/*---------------------------------------------------------------------
Roberts Roofing: Base Styles
Author:  Mario S. Cisneros
Version 1: 15 May 2007
Email: mario@webnet-ts.com 
Production: 7/18/07
----------------------------------------------------------------------*/

html
{height: 100%;
  font-size: 100.01%;
  margin-bottom: 1px;} 

/*margins set to 0 in order to eliminate default margins in IE, Firefox, Mozilla and Netscape*/
/*padding set to "0" in order to eliminate default padding in Opera*/

body
{margin: 0; 
  padding: 0;
  font: normal 1em arial, sans-serif;
  text-align: center;
  color: #1D2948;
  border-top: 8px solid #013C63;
  background: url("../img/backgrounds/body.jpg") repeat-x;}

#container
{width: 760px;
	margin: 0 auto; 
  line-height: 1.5;
  background-color: transparent;}

#browseralert
{display: none;}


/* HEADER
---------------------------------------------------------------------------------------------------------------------------*/
#masthead
{position: relative;
	width: 100%;
	border-top: 1px solid #01548B;}

div #header
{position: relative;
	width: 760px;
	height: 280px;
  margin: 0 auto;
  background: transparent url("../img/backgrounds/header.jpg") no-repeat;}

div #logo
{position: absolute;
  width: 160px;
  height: 97px;
  top: 0;
  left: 15px;
  color: #C9B167;
  font: bold 2em garamond, arial, serif;
  margin: 0;
  padding: 0;}

div #logo img
{border: none;}

div #tagline
{position: absolute;
  width: 180px;
  top: 1%;
  left: 82%;
  color: #C9B167;
  letter-spacing: 1px;
	font: bold 0.8em "trebuchet ms", arial, sans-serif;
  font-variant: small-caps;
  margin: 0;
  padding: 0;}


/* HEADING LEVELS
---------------------------------------------------------------------------------------------*/
#home h1
{font: bold 1.2em "trebuchet ms", georgia, arial, sans-serif;
	text-align: left;
  text-transform: capitalize;
  color: #FF7300;
  margin: 5px 0 0;
  padding: 10px 0 10px 35px;}

#contact h1
{margin: 30px 0 10px 0;}

h1
{font: bold 1.3em georgia, arial, sans-serif;
	text-align: left;
  text-transform: capitalize;
  color: #004674;
  margin: 0 0 20px 0;
  border-bottom: 1px solid #004674;}

h2
{font: normal 1.2em georgia, arial, sans-serif;
	text-align: left;
  text-transform: capitalize;
  color: #990000;
  margin-bottom: 0;
  padding: 0;}

h3
{font: bold 1em georgia, arial, sans-serif;
	text-align: left;
  color: #004674;}

.products h2
{margin: 30px 0 0 0;}

#contactus 
{margin-top: 30px;}

#sidebar h2
{font-size: 1.3em;
  color: #BB5E00;
  margin-top: -5px;
  border-bottom: 1px solid #BB5E00;}


/* HOMEPAGE 3-COLUMN SECTION
---------------------------------------------------------------------------------------------*/
#main
{width: 760px;
  text-align: left;
  font-size: 0.8em;
  line-height: 1.5;
  color: #000;
  margin-top: 2px;}

#main p.intro
{font-size: 1.1em;
  color: #000;
  margin: 15px 0 5px 0;
  padding-left: 15px;
  border-left: 1px solid #FF7300;
  border-right: 1px solid #FF7300;}

#main p.intro span
{color: #000;
  font-style: italic;}

#main ul
{margin: 10px 0 10px 15px; 
 padding: 0;}

#main #section1
{float: left;
 width: 230px;
 display: inline;
 margin-top: 15px;
 padding: 0 5px;
 background: transparent url("../img/backgrounds/main.jpg") no-repeat;}

#section1 .who
{padding-left: 43px;
  background: transparent url("../img/icons/who.gif") no-repeat 0%;}

#main #section2
{float: left;
 width: 230px;
 display: inline;
 margin: 15px 0 0 20px;
 padding: 0 5px;
 background: transparent url("../img/backgrounds/main.jpg") no-repeat;}

#section2 .what
{padding-left: 38px;
  background: transparent url("../img/icons/what.gif") no-repeat 0%;}

#main #section3
{float: right;
 width: 230px;
 display: inline;
 margin-top: 15px;
 padding: 0 5px;
 background: transparent url("../img/backgrounds/main.jpg") no-repeat;}

#section3 .how
{padding-left: 44px;
  background: transparent url("../img/icons/how.gif") no-repeat 0%;}

#section3 #overflow
{overflow: auto;
  height: 60px;
  width: 200px;}

#main p
{margin: 5px 0 10px 0;}

#main p.moremargin
{margin-top: 13px;}


/* STYLE RULES FOR INTERIOR PAGES
---------------------------------------------------------------------------------------------*/
#container p
{text-align: left;
  margin: 10px 0 5px 0;}

#sidebar
{float: left;
 width: 200px;
 display: inline;
 font-size: 0.9em;
 margin: 25px 0 0 0;}

#sidebar dl
{line-height: 1;
  margin: 0;
  padding: 0;}

#sidebar dt
{text-align: left;
  font-weight: bold;
  margin: 15px 0 0 0;
  padding: 0;}

#sidebar dd
{text-align: left;
  margin: 0;
  padding: 5px 0 0 0;}

#sidebar p
{margin: 5px 0;}

#content
{float: right;
 width: 520px;
 display: inline;
 font-size: 0.9em;
 margin: 20px 0 0 0;
 padding: 0 5px 0 15px;
 border-left: #777 1px solid;}

#content ul li
{text-align: left;
  margin-top: 5px;}

#content ol li
{text-align: left;
  margin-top: 5px;}

#content ol li ul li
{text-align: left;
  padding: 5px 0;}

#content dl
{margin: 0;
  padding: 0;}

#content dt
{text-align: left;
  margin: 15px 0 0 0;
  padding: 0;}

#content dd
{text-align: left;
  margin: 0;
  padding: 5px 0 0 0;}


/* ADDITIONAL STYLE RULES FOR PRODUCTS PAGE
---------------------------------------------------------------------------------------------*/
.products p
{margin: 5px 0;}

.products table
{text-align: left;
  margin: 0;
  padding: 0;
  border: 0;}


/* ADDITIONAL STYLE RULES FOR DIRECTORY PAGE
---------------------------------------------------------------------------------------------*/
#directory #content
{font-size: 0.9em;}

#directory #wrapper
{position: relative;
  width: 520px;
  margin-top: 35px;}

#directory #section1
{float: left;
 width: 140px;
 display: inline;
 margin-top: 15px;
 padding-left: 15px;}

#directory #section2
{float: left;
 width: 140px;
 display: inline;
 margin: 15px 0 0 30px;
 padding-left: 15px;}

#directory #section3
{float: right;
 width: 140px;
 display: inline;
 margin-top: 15px;
 padding-left: 15px;}

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


/* ADDITIONAL STYLE RULES FOR CHOOSE PAGE
---------------------------------------------------------------------------------------------*/
#choose .wrapper
{position: relative;
  width: 510px;
  margin-top: 15px;}

#choose .section1
{float: left;
  display: inline;
  margin-bottom: 15px;}

#choose .section2
{float: right;
  display: inline;
  margin-bottom: 15px;}


/* ADDITIONAL STYLE RULES FOR TESTIMONIALS PAGE
---------------------------------------------------------------------------------------------*/
.video table
{margin: 0;
  padding: 0;
  list-style: none;
  border: 0;}

.video table caption
{font-weight: bold;
  padding-bottom: 20px;}

.video td
{text-align: center;}

.video td img
{margin-bottom: 15px;
  padding: 2px;
  border: #777 1px solid;}

.video .smallprint
{font-size: 0.6em;
  color: #333;}


/* EXTRAS
---------------------------------------------------------------------------------------------*/
.clear
{clear: both;
  height: 1px; 
  overflow: hidden;}
  
.clearmore
{clear: both;
  height: 10px; 
  overflow: hidden;}
  
.left
{float: left;
	margin: 5px 15px 0 0;
  padding: 2px;
  border: #777 1px solid;}

.fineprint
{font-size: 0.8em;
  padding-left: 15px;}