/*---------------------------------------------------------------------------------------
  
                        Website: Greenhill Roofing Contractors
                        Author: Bitmedia
                        Created: October 2008
  
---------------------------------------------------------------------------------------*/


/*
    Basics
    Navigation
    Layout
    Content
    Typography
    Form Styles
    Misc
*/



/*---------------------------------------------------------------------------------------
   Basics
---------------------------------------------------------------------------------------*/

/* Default and Common CSS styles */
@import "default.css";
@import "common.css";


/* Body */
body	{ background: #cfcfcf;}


/*---------------------------------------------------------------------------------------
   Navigation
---------------------------------------------------------------------------------------*/

/* Top Nav */
ul#topNav { margin: 12px 0 0 0; padding: 0; list-style: none; float: right; width: 470px;}
ul#topNav li { float: left; display: inline; margin: 0; padding: 0;}
ul#topNav li a { float: left; padding: 5px 25px 12px; font-size: 1.1em; font-weight: bold; color: #fff; text-decoration: none; background: url('../images/whiteArrow.png') no-repeat bottom center;}
ul#topNav li a:hover { color: #bfccec;}
ul#topNav li a.currentPage { color: #bfccec;}

/* Main Nav */
ul#mainNav { float: left; margin: 0; padding: 0; border-top: 1px solid #444; list-style: none;  }
ul#mainNav li { float: left; margin: 0; padding: 0 0 2px; background: url('../images/mainNavDivider.png') repeat-x bottom left;}
ul#mainNav li.last { background: none;}
ul#mainNav li a {  float: left; width: 189px; padding: 8px 0 8px 45px; color: #fff; text-decoration: none; font-weight: bold; font-size: 1.1em; background: url('../images/whiteArrow2.gif') no-repeat 23px 50%;}
ul#mainNav li a:hover { background-color: #999;}
ul#mainNav li a.currentPage { background-color: #999;}

/* Minor Nav */
ul#minorNav { float: right; margin: 0; padding: 0; list-style: none;}
ul#minorNav li { float: left; display: inline; margin: 0; padding: 0; background: url('../images/minorNavDivider.png') no-repeat center right;}
ul#minorNav li.last { background: none;}
ul#minorNav li a { float: left; padding: 0 10px; color: #fff; text-decoration: none;}
ul#minorNav li a:hover { text-decoration: underline;}
ul#minorNav li a.currentPage { text-decoration: underline; font-weight:bold;}

/* Sub Nav */
ul#subNav { overflow: hidden; width: 100%; margin: 4px 0 1.5em 0; padding: 0 !important; list-style: none; background: #7f7f7f;}
ul#subNav li { float: left; display: inline; margin: 0; padding: 0;}
ul#subNav li a { float: left; padding: 10px 25px 10px; font-size: 1.6em; font-weight: bold; color: #666; text-decoration: none; color: #fff;}
ul#subNav li a:hover { background: #999;}
ul#subNav li a.currentPage { color: #fff;}

/* Backlinks */
.backLink {margin-left:15px;margin-bottom:1em;}

/*---------------------------------------------------------------------------------------
   Layout
---------------------------------------------------------------------------------------*/

/* Container */
#pageContainer { }

/* Header */
#pageHeaderContainer { width: 100%; min-width: 880px; background: url('../images/blueGradientBg.png') repeat-x;}
#pageHeader { width: 866px; min-height: 101px; height: auto; padding: 0 7px; margin: 0 auto;}
* html #pageHeader { height: 101px;}
#pageBodyContainer { width: 100%; min-width: 880px; padding: 4px 0 0 0; background: url('../images/whiteHorzBorder.png') repeat-x;}
#pageBody { margin: 0 auto; width: 880px; background: url('../images/pageBody.png') no-repeat;}
#pageBodyBottom { position: relative; padding: 0 7px 11px 7px; width: 866px; background: url('../images/pageBodyBottom.png') no-repeat bottom left;} 

#mainColumn { float: right; width: 620px; padding: 0 4px 0 0;}
#sideColumn { float: left; width: 234px; padding: 0 0 220px 4px; position: relative;}


#footer { float: left; width: 834px; min-height: 28px; height: auto; padding: 10px 12px 0; margin: 0 0 0 4px; border-top: 7px solid #fff; background: #475b9a;}
* html #footer { height: 28px; display: inline;}
#footer p {text-align:center; border-top: 1px solid #fff; padding-top: 2px; padding-bottom:4px; width:100%;}

#footer #cards { overflow: hidden; padding: 10px 0 10px 320px;}
#footer #cards img { float:left; margin-right:7px; }


/*---------------------------------------------------------------------------------------
   Content
---------------------------------------------------------------------------------------*/
/* Header */
#logo { float: left;}
#contact { float: right; width: 470px; height: 40px; margin: 15px 0 0 0;}

/* Side Column */
/*#sideLogos { position: absolute; bottom: 80px; left: 0px; width: 234px; text-align: center;}*/
#sideLogos { position: absolute; bottom: 10px; left: 2px; width: 234px; text-align: center;}
#sideLogos img#topsealLogo { margin-right: 30px;}
#sideLogos img#trustmarkLogo, #sideLogos img#investorsinpeopleLogo { margin: 10px 30px 0 0;}
#sideLogo img#nfrcLogo, #sideLogo img#chasLogo { margin-top: 10px;}


/* Main Column */
#contentFeatures { padding: 0 15px;}
.feature { float: left; width: 284px; border: 1px solid #24417b;}
.featureAlt { float: right; width: 284px; border: 1px solid #24417b;}

#contentFeatures .featHeader { background: #334b89; color: #fff; padding: 2px 5px;}

#mainColumn ul {padding: 0 0 0 25px;}


/* Footer */
#valid { float: left;}
#valid img { float: left; margin-right: 5px; padding-top: 2px;}
#copyright { float: left; padding-left: 15px;}


/* Gallery */
#galleryContainer { padding: 0 20px;} 
#galleryContainer a img { margin: 0 10px 10px 0; border: 1px solid #79a769;}
#galleryContainer a:hover img { border: 1px solid #0567b6;}

/* wwindows */
#vwindows { margin-left: 15px; padding-bottom: 1.4em; overflow: auto;}
#vwindows .row { padding-bottom: 10px; float: left; width: 100%;}
#vwindows .vw { float: left; width: 190px; margin: 0 5px 15px 0; border: 1px solid #ccc;}
#vwindows .vw .veluxImage { text-align: center;}
#vwindows .vw .veluxHeader {  padding: 5px 5px 0; background: #f2f2f2; font-weight: bold;}
#vwindows .vw .veluxAbstract { padding: 0 5px;  background: #f2f2f2;}
#vwindows .vw .veluxLink {  padding: 0 5px 5px;  background: #f2f2f2;}
#vwindows .vw .veluxLink a { font-weight: bold;}

/* Video */
.videoContainer { margin-top: 15px;}
.videoContainer p { padding: 0 0 10px!important; font-size: .9em;}




/*---------------------------------------------------------------------------------------
   Typography
---------------------------------------------------------------------------------------*/

/* Links */
a:link, a:visited { color: #79a769; }
a:hover {  color: #0567b6; }

#contact a:link, #contact a:visited { color: #fff; text-decoration: none;}
#contact a:hover {  color: #d6e6d0; }

/* Free Quote Link */
p.freequote {  padding: 0 0 1.25em !important; }
p.freequote a { display: block; width: 197px; height: 30px; text-indent: -9999px; background: url('../images/freequote.png') no-repeat;}
p.freequote a:hover { background-position: top right;}


/* Base Font */
body { font: 62.5% arial, tahoma, arial, helvetica; color: #666}

/* Font Changes */
#pageContainer { font-size: 1.2em; line-height: 1.4em;}
#pageHeader { color: #fff; text-align:left;}
#pageBody { text-align:left;}
#mainColumn p { padding: 0 15px 1.2em;}
#footer { font-size: .9em; color: #fff; text-align:left;}

/* Headers */
#mainColumn h1 { margin: 20px 15px .6em; font-weight: bold;}
#mainColumn h2 { margin: 20px 15px .6em; font-weight: bold;font-size: 1.6em; line-height:1.2em; }
#sideColumn h3 { margin: 25px 0 20px 17px; color: #fff; font-size: 1.8em; }



/*---------------------------------------------------------------------------------------
   Form Styles
---------------------------------------------------------------------------------------*/

/* Default Form Style */
#formDefault { width: 500px;}
.formRow { width: 100%; float: left; margin-bottom: 10px;}
.formLeft { width: 150px; float: left;}
.formRight { float: left;}
.formRight input, .formRight textarea { margin-right: 5px;}
input.submit { cursor: pointer; margin-left: 150px;}
input.submit:hover { }
#contactForm {margin-left:15px; overflow: hidden; padding-bottom: 1.4em;}
#contactForm .input, #contactForm textarea { padding: 2px 5px; width: 250px !important;}
#contactForm select { padding: 2px 0 2px 5px; width: 262px;}
#contactForm textarea { height: 75px;}

#quotationForm {margin-left:15px; }

/*---------------------------------------------------------------------------------------
   Misc.
---------------------------------------------------------------------------------------*/

/* Error Page */
body.errorPage {}
body.errorPage p#errorMessage { padding: 100px 0; text-align: center;}