/*
   screen.css
   metroroofing
   
   Created by Cale Woodley on 2008-06-23.
   Copyright 2008 Webfirm. All rights reserved.
*/

@import url("reset.css");

body {
  background: #cce4f2 url('../images/core/body-background.png') top left repeat-x;
  font: 0.69em Verdana, Arial, sans-serif;
  color: #444444;
}

#page {
  width: 100%;
  background: url('../images/core/page.jpg') top center no-repeat;
}

a {color: #003e7e;}
a:hover {text-decoration: none;}

.content-container {
  width: 806px;
  margin: 0 auto;
  clear: both;
  line-height: 1.55em;
}

.clear { display: block; clear: both; }

/*  #HEADER
**************************/
#header {
  width: 808px;
  height: 103px;
  clear: both;
}

#header img#logo {
	height: 81px;
	width: 331px;
	float: left;
	margin: 8px 0 0 12px;
}

#header img#cta-call {
	height: 45px;
	width: 190px;
	float: right;
	margin: 35px 20px 0 0;
}


/*  #FLASH
**************************/
#flash {
  width: 476px;
  height: 285px;
  border: 8px solid #0077c0;
  border-bottom: none;
  overflow: hidden;
  float: left;
  margin-right: 1px;
}

#flash img {
  width: 474px;
  height: 283px;
  border: 1px solid #164476;
  top: 0;
  left: 0;
}


/*  #CTA_CONTAINER
**************************/

#cta_container { width: 313px; height: 291px; float: left; }

#cta_container h2 {
	height: 47px;
	display: block;
	background: url('../images/core/cta-help.gif') no-repeat 14px 16px;
	text-indent: -9999px;
}

#cta_container ul { margin: 0; padding: 0; list-style: none; }

#cta_container li {
	display: block;
	height: 56px; 
	overflow: hidden;
	padding: 24px 5px 0 10px;
}
#cta_container li * { padding: 0; margin: 0; }

#cta_container li h3 { display: none; }

#cta_container ul li#ctalist-01, #cta_container li#ctalist-02 { margin-bottom: 2px; }
#cta_container ul li#ctalist-01 {background-image: url('../images/core/cta-roofing.gif');}
#cta_container ul li#ctalist-02 {background-image: url('../images/core/cta-copper_zinc.gif');}
#cta_container ul li#ctalist-03 {background-image: url('../images/core/cta-panel.gif');}



/*  #NAV
**************************/
#nav {
	clear: both;
  width: 808px;
}

#nav li {
  float: left;
}

#nav li a {
  display: block;
  height: 40px;
  text-indent: -999em;
}

#nav li a#nav-home {background:  url('../images/nav/nav-home.png') 0 0; width: 64px;}
#nav li a#nav-profile {background:  url('../images/nav/nav-profile.png') 0 0; width: 126px;}
#nav li a#nav-roofing {background:  url('../images/nav/nav-roofing.png') 0 0; width: 144px;}
#nav li a#nav-copper_zinc {background:  url('../images/nav/nav-copper_zinc.png') 0 0; width: 167px;}
#nav li a#nav-panel {background:  url('../images/nav/nav-panel.png') 0 0; width: 121px;}
#nav li a#nav-projects {background:  url('../images/nav/nav-projects.png') 0 0; width: 101px;}
#nav li a#nav-contact {background:  url('../images/nav/nav-contact.png') 0 0; width: 85px;}

#nav li a:hover {background-position: 0 -40px !important;}


/*  #CONTENT
**************************/
#content {
  width: 552px;
  padding: 20px;
  background: #fff;
  border: 1px solid #aed0e5;
  margin: 12px 0;
  float: left;
}

#content h1 {
  font-size: 1.82em;
  color: #003C7F;
  font-family: Helvetica, Verdana, Arial, sans-serif;
}

#content h2,
#content h3,
#content h4,
#content h5 {
  font-size: 1.42em;
  color: #003C7F;
  font-family: Helvetica, Verdana, Arial, sans-serif;
  margin: 13px 0 0 0;
}

body#index #content h1 {
  background: url('../images/core/index-h1-background.png') no-repeat;
  display: block;
  width: 289px;
  height: 25px;
  text-indent: -999em;
}

#content p {
  margin: 12px 0;
}

#content ul.features {
  display: block;
  width: 515px;
  padding: 20px;
  background: #f6f1dc;
  border: 2px solid #f3eac4;
  margin: 12px 0;
}

#content ul.features h2 {
  font-size: 1.27em;
  color: #0077c0;
  font-weight: normal;
  margin: 0 0 12px 0;
}

#content ul.features li {
  line-height: 1.64em;
  background: url('../images/core/ul-features-bullet.png') left center no-repeat;
  padding-left: 13px;
}

#content img.float-left {float: left; display: inline; margin: 16px 10px 6px 0;}
#content img.float-right {float: right; display: inline; margin: 16px 0 6px 10px;}

#content a.thickbox img {border: 1px solid #A4CFE5;}
#content a.thickbox:hover img {border: 1px solid #0074C1;}

/*  #CTA
**************************/
#cta_boxes {
  float: right;
  margin: 12px 0;
}

#cta_boxes h2 {
  text-indent: -999em;
  display: block;
  width: 190px;
  height: 29px;
  background: url('../images/core/cta-projects.gif') top center no-repeat;
}

.cta {
  background: #fff;
  width: 160px;
  text-align: left;
  padding: 16px;
  border: 1px solid #aed0e5;
  margin: 0 0 10px 0;
}

.cta img {
  border: 5px solid #0077c0;
}

.cta h3 {
  font-size: 1.09em;
  color: #003e7e;
}

.cta p {
  font-size: 0.91em;
}

.cta a {color: #ff6600;}


/*  #PROJECTS
**************************/
#content .project {
  display: block;
  clear: both;
}


#content .project h2 {
  padding: 15px 0 0 0;
}

#content .project p {
  margin: 0;
}


/*  #FOOTER
**************************/
#footer {
  width: 802px;
  margin: 0 auto;
  padding: 5px 3px;
  border-top: 1px solid #73a7c7;
  color: #0077c0;
  clear: both;
  font-size: 0.91em;
}

#footer p {
  float: left;
  display: inline;
  line-height: 1.70em;
}

#footer img {
  float: right;
  display: inline;
}

#footer a {color: #0077c0; text-decoration: none;}
#footer a:hover {text-decoration: underline;}