/*
TITLE:		Screen Styles for The New California Craftsmen
AUTHOR:		Dan Boland: dan@danzigner.com
CREATED:	May 4th, 2008
NOTES:		Hand-crafted in Los Angeles, California
*/

* {margin: 0; padding: 0; border: none; }

.alt {display: none; }

body {background: black; font-family: Helvetica, Arial, sans-serif; }

p {line-height: 1.4em; }

.wrap {
		width: 850px; 
		background: #ebe9e9; 
		margin: 0 auto; 
	}
	
.header {
	}
	
.menusystem {
		background: url(../img/head.gif) top left no-repeat; 
		height: 150px; 
	}
	
#navmenu {
		width: 200px; 
		margin-left: 650px; 
		overflow: hidden;
		list-style: none; 
		text-align: right; 
	}
	
#thome a {
		height: 53px; 
		background: url(../img/thome.gif) top left no-repeat; 
	}
	
#tcase a {
		height: 23px; 
		background: url(../img/tcase.gif) top left no-repeat; 
	}
	
#tprojects a {
		height: 26px; 
		background: url(../img/tprojects.gif) top left no-repeat; 
	}
	
#tabout a {
		height: 23px; 
		background: url(../img/tabout.gif) top left no-repeat; 
	}
	
#tcontact a {
		height: 25px; 
		background: url(../img/tcontact.gif) top left no-repeat;
	}
	
#navmenu a {
		width: 0 !important; 
		width/**/:200px; /* IE5/WIN HACK */
		padding-left: 200px; 
		overflow: hidden; 
		display: block; 
	}

#navmenu a:hover {
		background-position-x: -200px; 
	}
	
.content {background: #ebe9e9; }
	
.hero {
		display: block;
		width: 850px; 
		height: 350px; 
		overflow: hidden; 
		margin-top: 30px; 
	}
	
.hero a {
		display: block; 
		width: 850px; 
		height: 350px; 
		height: 0 !important;
		height/**/:350px; /* IE5/WIN HACK */
		padding-top: 350px; 
		overflow: hidden; 
		background: url(../img/home-hero-leonard-house.jpg) top left no-repeat; 
	}
	
.hero a:hover {background-position-y: -350px; }

.about {
		display: block; 
		width: 850px; 
		height: 75px; 
		overflow: hidden; 
	}
	
.about a {
		display: block; 
		width: 850px; 
		height: 75px; 
		height: 0 !important;
		height/**/:75px; /* IE5 WIN HACK */
		padding-top: 75px; 
		overflow: hidden; 
		background: url(../img/about-banner.gif) top left no-repeat; 
	}
	
.about a:hover {background-position-y: -75px; }

.project {
		display: block;
		width: 340px; 
		height: 175px; 
		overflow: hidden; 
		float: left; 
	}
	
.project a {
		display: block; 
		width: 340px; 
		height: 175px; 
		height: 0 !important;
		height/**/:175px; /* IE5 WIN HACK */
		padding-top: 175px; 
		overflow: hidden; 
		background: url(../img/project-banner-bwp.jpg) top left no-repeat; 
	}
	
.project a:hover {background-position-y: -175px; }

.case {
		display: block; 
		width: 510px; 
		height: 175px; 
		overflow: hidden; 
	}

.case a {
		display: block; 
		width: 510px; 
		height: 175px; 
		height: 0 !important; 
		height/**/:175px; /* IE5/WIN HACK */
		padding-top: 175px; 
		overflow: hidden; 
		background: url(../img/case-study-banner-chesse.jpg) top left no-repeat; 
	}

.case a:hover {background-position-y: -175px; }

.contactphone {
		display: block; 
		margin-top: 35px; 
		width: 850px; 
		height: 200px; 
		overflow: hidden; 
		height: 0 !important;
		height/**/:200px; /* IE5/WIN HACK */
		padding-top: 200px; 
		background: url(../img/contact-phone-banner.jpg) top left no-repeat; 
	}
	
.contactemail {
		display: block; 
		margin-top: 35px; 
		width: 850px; 
		height: 200px; 
		overflow: hidden; 
	}
	
.contactemail a {
		display: block; 
		height: 0 !important; 
		height/**/:200px; /* IE5/WIN HACK */
		padding-top: 200px; 
		background: url(../img/contact-email-banner.jpg) top left no-repeat; 	
	}
	
.contactemail a:hover {background-position-y: -200px; }	
	
.aboutbanner {
		display: block; 
		height: 175px; 
		margin-top: 35px; 
		overflow: hidden; 
		height: 0 !important; 
		height/**/:175px; /* IE5/WIN HACK */
		padding-top: 175px; 
		background: url(../img/about-banner.jpg) top left no-repeat; 
	}
	
p.aboutpage {
		width: 500px; 
		margin: 1.5em 35px; 
		font-family: Helvetica, Arial, sans-serif; 
		font-size: 75%; 
		line-height: 1.5em; 
	}
	
p.aboutpage a:link, p.aboutpage a:visited {
		color: black; 
		text-decoration: underline; 
	}
	
p.aboutpage a:hover {
		color: #d10000; 
		text-decoration: none; 
	}
	
ul.simplelist {
		list-style: disc; 
		margin: 1.5em 70px; 
		font-family: Helvetica, Arial, sans-serif; 
		font-size: 75%; 
		line-height: 1.5em; 
		color: #666; 
	}
	
.bwpcontainer {
		margin: 35px; 
		display: block; 
		height: 600px; 
		overflow: auto; 
		background: url(../img/bwp-hero.jpg) top left no-repeat; 
	}
	
.bwpcontainer h1 {
		display: block; 
		height: 165px; 
		margin-left: 385px; 
		overflow: hidden; 
		height: 0 !important; 
		height/**/:165px; /*IE5/WIN HACK */
		padding-top: 165px; 
		background: url(../img/bwp-h1.gif) bottom left no-repeat; 
	}
	
.gallery {
		margin:35px 35px 0 385px; 
	}
	
.gallery img {
		margin: 0 10px 10px 0; 
	}
		
.bwpcontainer ul, 
.salon11container ul, 
.benchcontainer ul, 
.diamondcontainer ul,
.chessecontainer ul,
.leonardcontainer ul {
		margin-left: 400px; 
		list-style-type: circle; 
		width: 300px; 
		font-family: Helvetica, Arial, sans-serif; 
		font-size: 75%; 
	}
	
.bwpcontainer li, 
.salon11container li, 
.benchcontainer li, 
.diamondcontainer li,
.chessecontainer li, 
.leonardcontainer li {
		margin-top: 15px; 
	}
			
.salon11container {
		margin: 35px; 
		background: url(../img/salon-hero.jpg) top left no-repeat; 
	}
	
.salon11container h1 {
		display: block; 
		height: 64px; 
		margin-left: 385px; 
		overflow: hidden; 
		height: 0 !important; 
		height/**/:64px; /* IE5/WIN HACK */
		padding-top: 64px; 
		background: url(../img/salon-h1.gif) bottom left no-repeat; 
	}
	
.salon11container p {
		margin: 15px 35px 15px 385px; 
		width: 350px; 
		font-family: Helvetica, Arial, sans-serif; 
		font-size: 75%; 
	}
	
.chessecontainer h1 {
		margin: 35px 0; 
		display: block; 
		height: 175px; 
		overflow: hidden; 
		height: 0 !important; 
		height/**/:175px; /* IE5/WIN HACK */
		padding-top: 175px; 
		background: url(../img/chesse-h1.jpg) bottom left no-repeat; 
	}
	
.chessecontainer p {
		margin: 15px 35px; 
		width: 350px; 
		font-family: Helvetica, Arial, sans-serif; 
		font-size: 75%; 
	}
	
.leonardcontainer h1 {
		margin: 35px 0; 
		display: block; 
		height: 175px; 
		overflow: hidden; 
		height: 0 !important; 
		height/**/:175px; /* IE5/WIN HACK */
		padding-top: 175px; 
		background: url(../img/leonard-h1.jpg) bottom left no-repeat; 
	}
	
.leonardcontainer p {
	margin: 15px 35px; 
	width: 315px; 
	font-family: Helvetica, Arial, sans-serif; 
	font-size: 75%; 
	float: left;
	}
	
.benchcontainer h1 {
		margin: 35px 0; 
		display: block; 
		height: 175px; 
		overflow: hidden; 
		height: 0 !important; 
		height/**/:175px; /* IE5/WIN HACK */
		padding-top: 175px; 
		background: url(../img/floating-bench-h1.jpg) top left no-repeat; 
	}
	
.benchcontainer ul,
.diamondcontainer ul,
.chessecontainer ul {float: left; margin-left: 70px !important; }

.diamondcontainer h1 {
		margin: 35px 0; 
		display: block: 
		height: 175px; 
		overflow: hidden; 
		height: 0 !important; 
		height/**/:175px; /* IE/WIN HACK */
		padding-top: 175px; 
		background: url(../img/diamond-h1.jpg) top left no-repeat; 
	}

.projects {
		
	}
	
.projects-bwp a:link, .projects-bwp a:visited {
		margin: 35px 0; 
		display: block; 
		height: 175px; 
		overflow: hidden; 
		height: 0 !important; 
		height/**/:175px; /* IE/WIN HACK */
		padding-top: 175px; 
		background: url(../img/projects_bwp-banner.jpg) top left no-repeat; 
	}
	
.projects-bwp a:hover {
		background-position-y: -175px; 
	}
	
.projects-floating-bench a:link, .projects-floating-bench a:visited {
		float: left; 
		margin-bottom: 35px; 
		display: block; 
		height: 80px; 
		width: 340px; 
		overflow: hidden; 
		height: 0 !important; 
		height/**/:80px; /* IE/WIN HACK */
		padding-top: 80px; 
		background: url(../img/projects_bench-banner.jpg) top left no-repeat; 
	}
	
.projects-floating-bench a:hover {
		background-position-y: -80px; 
	}
	
.projects-diamond a:link, .projects-diamond a:visited {
		float: left; 
		margin-bottom: 35px; 
		display: block; 
		height: 80px; 
		width: 510px; 
		overflow: hidden; 
		height: 0 !important; 
		height/**/:80px; /* IE/WIN HACK */
		padding-top: 80px; 
		background: url(../img/projects_diamond-banner.jpg) top left no-repeat; 
	}
	
.projects-diamond a:hover {
		background-position-y: -80px; 
	}

.casestudies h2 {
		display: block; 
		height: 40px; 
		margin: 35px 0 0 0; 
		overflow: hidden; 
		height: 0 !important; 
		height/**/:40px; /* IE/WIN HACK */
		padding-top: 40px; 
		background: url(../img/case-studies-h2.gif) top left no-repeat; 
	}
	
.studiessalon a:link, .studiessalon a:visited {
		display: block; 
		height: 175px; 
		margin: 35px 0; 
		overflow: hidden; 
		height: 0!important; 
		height/**/:175px; /* IE5/WIN HACK */
		padding-top: 175px; 
		background: url(../img/studies-salon-banner.jpg) top left no-repeat; 
	}
	
.studiessalon a:hover {
		background-position-y: -175px; 
	}
	
.studieschesse a:link, .studieschesse a:visited {
		display: block;
		height: 175px; 
		margin: 35px 0; 
		overflow: hidden; 
		height: 0!important;
		height/**/:175px; /* IE5/WIN HACK */
		padding-top: 175px; 
		background: url(../img/studies-chesse-banner.jpg) top left no-repeat; 
	}
	
.studieschesse a:hover {
		background-position-y: -175px; 
	}
	
.studiesleonard a:link, .studiesleonard a:visited {
		display: block; 
		height: 175px; 
		margin: 35px 0; 
		overflow: hidden; 
		height: 0 !important; 
		height/**/:175px; /* IE5/WIN HACK */
		padding-top: 175px; 
		background: url(../img/studies-leonard-banner.jpg) top left no-repeat; 
	}
	
.studiesleonard a:hover {
		background-position-y: -175px; 
	}

.footer {
		margin: 36px 0;
		display: block; 
		height: 75px;  
		color: #bbb; 
		background: #ebe9e9 url(../img/footer.gif) bottom center no-repeat; 
		font-size: 50%; 
		text-align: center; 
		clear: both; 
	}

.footer a:link, .footer a:visited {color: #bbb; text-decoration: none; }
.footer a:hover {text-decoration: underline; }