@charset "UTF-8";
/* CSS Document */

/*
	ClintonHillDesignBuild.com Screen Styles

	Table of Contents:
		0. template layout
		1. home
		2. aboutus
		3. services
		4. projects
		5. contact
*/

/* 0. template layout
----------------------------------------------- */
body {background-color:#C7C9CB; margin: 0; padding: 0;}

img.logo {position: absolute; border: none; top: 97px; left: 5px; padding: 0;}

#navbar {
  height: 50px;
  padding: 100px 0 40px 5px;
  font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
}
#navbar img {position: relative; border: none;}
#navbar li {list-style: none; float: left;}
#navbar li a {
	display: block;  
	border-left: 1px solid #FFF; 
	border-bottom: none;
	margin-left: 0;
	padding-left: 5px; 
	width: 145px; 
	height: 50px; 
	text-transform: uppercase; 
	font-size: 12px; 
	color: #FFF;
	letter-spacing: 0.25ex; 
	text-decoration: none;}
	
#navbar li.logotype a {
	display: block !important;  
	border-left: none !important; 
	border-bottom: none;
	padding-left: 0 !important; 
	width: 295px !important; 
	height: 50px;
	text-decoration: none;}
	
#navbar a:hover,
  .aboutus #navbar #aboutus a,
  .services #navbar #services a,
  .projects #navbar #projects a,
  .contact #navbar #contact a {
	font-weight: bold;
}

#main {position: relative; width: 100%; left: 0; top: 0; padding: 0; height: 100%;}
#main a:link, a:visited {text-decoration: none; border-bottom: inherit; border-width: 0px 0px 1px 0px; border-style: none none dotted none;}

#main #text {
	position: relative;
	padding: 5px 0 0 5px;
	width: 35em;
	font-family:Verdana, Arial, Helvetica, sans-serif; 
	font-size: 10px; 
	letter-spacing: 0; 
	line-height: 170%; 
}
#main #text h2 {font-size: 9px; letter-spacing: 0.2ex;}

#main #footer {position: absolute; bottom: 0; margin: 0; clear: both; font-size: 9px; font-family:Verdana, Arial, Helvetica, sans-serif; line-height:160%;}
#main #footer p {margin-left: 8px; padding: 60px 0 30px 0;}


/* 1. home
----------------------------------------------- */
body.home #main {background-color: #516E39; height: 550px;}
body.home #main p, ul {color: #87BA61;}
body.home #main a {color: #87BA61;}
body.home #main a:hover {color: #A9EB7A !important;}
body.home #main a:visited {color: #87BA61;}
body.home #main img.archi {position:absolute; top: 0; left: 300px;}
body.home #main #text {width: 250px; padding-bottom: 100px;}


/* 2. aboutus
----------------------------------------------- */
body.aboutus #navbar #aboutus a {color: #9B5A2C; border-left: 1px solid #9B5A2C !important;}
body.aboutus #main {background-color: #9B5A2C;}
body.aboutus #main p, ul {color: #F3D893;}
body.aboutus #main a {color: #F3D893;}
body.aboutus #main a:hover {color: #FFF !important;}
body.aboutus #main a:visited {color: #F3D893;}
body.aboutus #main img {position:absolute; z-index: 5; left: 0;}
body.aboutus #main #text {left: 450px; padding-bottom: 110px;}

/* 3. services
----------------------------------------------- */
body.services #navbar #services a {color: #537ABD; border-left: 1px solid #537ABD !important; }
body.services #main {background-color: #537ABD;}
body.services #main p {color: #E1F5FD;}
body.services #main ul {color: #E1F5FD;}
body.services #main a {color: #E1F5FD;}
body.services #main a:hover {color: #FFF !important;}
body.services #main a:visited {color: #E1F5FD;}
body.services #main img {position:absolute; z-index: 5; left: 0;}
body.services #main #text {left: 450px; padding-bottom: 75px;}

/* 4. projects
----------------------------------------------- */
body.projectspage #navbar #projects a {color: #F6EE91; border-left: 1px solid #F6EE91 !important; }
body.projectspage #main {background-color: #F6EE91;}
body.projectspage #main p, ul {color: #AE9B37;}
body.projectspage #main a {color: #AE9B37;}
body.projectspage #main a:hover {color: #705D0D !important;}
body.projectspage #main a:visited {color: #AE9B37;}
body.projectspage #main img {position:absolute; z-index: 5; left: 0;}
body.projectspage #main #text {left: 300px; padding-bottom: 110px;}
body.projectspage #main #footer p {margin-left: 300px !important;}

/* 4.a projectspage while temp above is up */
body.projects #navbar #projects a {color: #F6EE91; border-left: 1px solid #F6EE91 !important; }
body.projects #main {background-color: #F6EE91;}
body.projects #main p, ul {color: #AE9B37;}
body.projects #main a {color: #AE9B37;}
body.projects #main a:hover {color: #705D0D !important;}
body.projects #main a:visited {color: #AE9B37;}
body.projects #main #footer p {margin-left: 300px !important;}
body.projects #main #text {width: 250px; padding-bottom: 100px;}
body.projects #main #thumbnails {position: absolute; left:300px; top: 0px;}
body.projects #main #thumbnails a {border: none;}


body.projects #main #list {
	position: relative;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-weight: bold;
	font-size: 10px; 
	margin: 0 0 -500px 0;
	padding: 0 0 500px 0;
} 
body.projects #main #list ul {
	width: 450px;
	list-style: none;
	margin: 0;
	padding-left: 0;
	clear: both;
}
body.projects #main #list li a {
	vertical-align: top;
	display: block;
	width: 450px;
	height: 100px;
	padding: 10px 0 0 5px;
	border-bottom: none;
}
body.projects #main #list li a:hover {
	background-color: #FBF5BD;
}
body.projects #main #list li img {
	margin: -18px 0 0 295px;
	border: none;
}



/* 5. contact
----------------------------------------------- */
body.contact #navbar #contact a {color: #3D1723; border-left: 1px solid #3D1723 !important; }
body.contact #main {background-color: #3D1723;}
body.contact #main p {color: #DEB5C5;}
body.contact #main a {color: #DEB5C5;}
body.contact #main a:hover {color: #FFF !important;}
body.contact #main a:visited {color: #DEB5C5;}
body.contact #main #archi {position:absolute; top: 0; right: 0px;}
body.contact #main #text {left: 292px; padding-bottom: 40px; height:500px;}
body.contact #main #footer p {margin-left: 300px !important;}


/* 6. image / project show */
body.image #main #img {
	text-align: center;
	height:550px;
	padding: 25px;
}
body.image #main #img img, body.image #main #img a {
	border: none;
}
body.image #main #text {
	bottom: 15px;
	left: 20px;
	position: absolute;
}
body.image a, body.image a:visited {color:#333333; font-weight:bold;}
body.image a:hover {color:#868A8E;}