@charset "UTF-8";
body,html {
	font: Helvetica, Arial, sans-serif;
	margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
	padding: 0;
	color: #000;
	height:100%;
}

/* -------------  COLORS  ------------------------------- */
/*
ORANGE: #F30;
TURQOUISE: #099;
*/


/* -------------  LOGO AND NAVIGATION  ------------------ */
/* ------------------------------------------------------ */
#logo-and-nav {
	margin-left:18px;
	margin-top: 84px;
}
#logo-and-nav .wc-logo {
	margin-left:12px;
}


/* -------------  SIDEMENU  ----------------------------- */
/* ------------------------------------------------------ */
#logo-and-nav ul.sidemenu {
	padding:0px;
	margin-top: 10px;
	font-family: Helvetica, Arial, sans-serif;
	font-size: 12px;
	border-bottom: 1px solid #333;
	width: 182px;
	background-color: #333;
}
#logo-and-nav ul.sidemenu li {
	list-style:none;
	height:26;
	margin-left:10px;
}
#logo-and-nav ul.sidemenu li a {
	text-decoration: none;
	display: block;
	width: 200px;
	color: #fff;
	padding-top: 8px;
	padding-bottom: 8px;
}
#logo-and-nav ul.sidemenu li a:hover {
	color: #099;
	text-decoration: none;
}

/* set the hover color to orange for sealcoat stuff */
#asphalt-sealcoat-systems ul.sidemenu li a:hover,
#sealcoat-products ul.sidemenu li a:hover,
#sealcoat-project-profiles ul.sidemenu li a:hover,
#sealcoat-project-profile ul.sidemenu li a:hover,
#pavement-management ul.sidemenu li a:hover {
	color: #f30;
	text-decoration: none;
	padding-top: 8px;
	padding-bottom: 8px;
}
#logo-and-nav ul.sidemenu ul {
	list-style-type:disc;
	background-color:#2B2B2B;
	color:#fff;
	margin-left:-25px;
}
#logo-and-nav ul.sidemenu .selected {
	list-style: disc;
	font-weight: normal;
	background:url(images/page-selected.gif) no-repeat top right;
	padding-top: 8px;
	padding-bottom: 8px;
}
#home #logo-and-nav ul.sidemenu .selected,
#cool-roof-systems #logo-and-nav ul.sidemenu .selected,
#farr-systems #logo-and-nav ul.sidemenu .selected,
#farr-step-by-step #logo-and-nav ul.sidemenu .selected,
#coatings #logo-and-nav ul.sidemenu .selected,
#roofing-products #logo-and-nav ul.sidemenu .selected,
#specifications #logo-and-nav ul.sidemenu .selected,
#project-profiles #logo-and-nav ul.sidemenu .selected,
#roofing-project-profile #logo-and-nav ul.sidemenu .selected,
#services #logo-and-nav ul.sidemenu .selected,
#about-us #logo-and-nav ul.sidemenu .selected,
#contact-us #logo-and-nav ul.sidemenu .selected {
	color: #099;
}
#asphalt-sealcoat-systems #logo-and-nav ul.sidemenu .selected,
#sealcoat-products #logo-and-nav ul.sidemenu .selected,
#pavement-management #logo-and-nav ul.sidemenu .selected,
#sealcoat-project-profiles #logo-and-nav ul.sidemenu .selected,
#sealcoat-project-profile #logo-and-nav ul.sidemenu .selected {
	color: #f30;
}
#logo-and-nav ul.sidemenu .selected-root {
	list-style: none;
	color: #099;
	font-weight: normal;
	background:url(images/page-selected-light.gif) top right no-repeat;
	padding-top: 8px;
	padding-bottom: 8px;
}
#asphalt-sealcoat-systems #logo-and-nav ul.sidemenu .selected-root {
	color: #f30;
}


/* -------------  GLOBAL STYLES  ------------------------ */
/* ------------------------------------------------------ */

/* CONTAINER */
#container {
	position: relative;
}

/* SET LEFT POSITIONING OF #mainContent IN STONE */
#home #container #mainContent,
#cool-roof-systems #container #mainContent,
#farr-systems #container #mainContent,
#farr-step-by-step #container #mainContent,
#coatings #container #mainContent,
#roofing-products #container #mainContent,
#specifications #container #mainContent,
#project-profiles #container #mainContent,
#roofing-project-profile #container #mainContent,
#services #container #mainContent,
#asphalt-sealcoat-systems #container #mainContent,
#sealcoat-products #container #mainContent,
#sealcoat-project-profiles #container #mainContent,
#sealcoat-project-profile #container #mainContent,
#pavement-management #container #mainContent,
#about-us #container #mainContent,
#contact-us #container #mainContent {
	left:200px;
	position:absolute;
	display:block;
	margin-bottom: 10px;
}

/* SET BACKGROUND COLOR AND POSITION ON EVERY PAGE */
#home,
#cool-roof-systems,
#farr-systems,
#farr-step-by-step,
#coatings,
#roofing-products,
#specifications,
#project-profiles,
#roofing-project-profile,
#services,
#asphalt-sealcoat-systems,
#sealcoat-products,
#sealcoat-project-profiles,
#sealcoat-project-profile,
#pavement-management,
#about-us,
#contact-us {
	background-color: #333;
	background-repeat: no-repeat;
	background-position: 200px 0px;
}

/* HIDE PAGE H1's */
#home h1,
#cool-roof-systems h1,
#farr-systems h1,
#farr-step-by-step h1,
#coatings h1,
#roofing-products h1,
#specifications h1,
#project-profiles h1,
#services h1,
#asphalt-sealcoat-systems h1,
#sealcoat-products h1,
#sealcoat-project-profiles h1,
#pavement-management h1,
#about-us h1,
#contact-us h1 {
	display:none;
}

/* NAVIGATION LINK COLORS */
/* TURQOUISE: #099; */
#home a,
#cool-roof-systems a,
#farr-systems a,
#farr-step-by-step a,
#coatings a,
#roofing-products a,
#specifications a,
#project-profiles a,
#services a,
#about-us a,
#contact-us a {
	color: #099;
	text-decoration: underline;
}
#home a:hover,
#cool-roof-systems a:hover,
#farr-systems a:hover,
#farr-step-by-step a:hover,
#coatings a:hover,
#roofing-products a:hover,
#specifications a:hover,
#project-profiles a:hover,
#pavement-management a:hover,
#about-us a:hover,
#contact-us a:hover {
	color: #333;
	text-decoration: underline;
}

/* LINK COLORS */
/* ORANGE: #FF3300; */
#asphalt-sealcoat-systems a,
#sealcoat-products a,
#sealcoat-project-profiles a,
#sealcoat-services a {
	color: #F30;
}
#asphalt-sealcoat-systems a:hover,
#sealcoat-products a:hover,
#sealcoat-project-profiles a:hover,
#sealcoat-services a:hover {
	color: #F30;
	text-decoration: none;
}
#sealcoat-products #maincontent a,
#sealcoat-products #mainContent .product-basics a {
	color: #F30;
	text-decoration: underline;
}
#sealcoat-products #maincontent a:hover,
#sealcoat-products #mainContent .product-basics a:hover {
	color:black;
	text-decoration: none;
}

/* SHOW FOOTER ON EVERY PAGE, though its different on some */
/* ------------------------------------------------------- */
#container #footer {
	left:200px;
	position: absolute;
	background-color:#333;
	margin-top: 20px;
}
#container #footer p {
	border-top:1px solid #666;
	padding-top:4px;
	font-size:11px;
	color:#999;
	line-height:14px;
	font-family:Helvetica, Arial, sans-serif;
	margin-bottom: 30px;
}
#container #footer a {
	color: #CCC;
	text-decoration:underline;
}
#container #footer a:hover {
	color:#099;
	text-decoration:none;
}

/* Let's set footer widths AND HEIGHT now :)  */
#home #footer {
	width:663px;
	top:500px;
}
#cool-roof-systems #footer {
	width:663px;
	top:495px;
}
#farr-systems #footer {
	width:700px;
	top:800px;
	left:0px; /* move the footer 200 to the left on this funky page */
}
#farr-step-by-step #footer {
	width:706px;
	top:3018px;
}
#coatings #footer {
	width:673px;
	top:650px;
}
#roofing-products #footer {
	width:748px;
	top:4152px;
}
#specifications #footer {
	width:763px;
	top:1206px;
}
#project-profiles #footer {
	width:600px;
	top:550px;
}
#roofing-project-profile #footer,
#sealcoat-project-profile #footer {
	width:500px;
	top:800px;
}
#services #footer {
	width:600px;
	top:710px;
}
#asphalt-sealcoat-systems #footer {
	width:583px;
	top:445px;
}
#sealcoat-products #footer {
	width:748px;
	top:2186px;
}
#pavement-management #footer {
	width:690px;
	top:2066px;
}
#sealcoat-project-profiles #footer {
	width:600px;
	top:460px;
}
#about-us #footer {
	width:413px;
	top:950px;
}
#contact-us #footer {
	width:502px;
	top:810px;
}

/* COOL LINKS */
#mainContent .cool {
	color: #0d94d2;
}


/* -------------  INDIVIDUAL PAGE STYLES  ------------------------------ */
/* --------------------------------------------------------------------- */

/* -------------  HOME  -------------------------------- */
#home {
	background-image: url(images/backgrounds/home.jpg);
}
#home #mainContent td {
	font-family:Helvetica, Arial, sans-serif;
	font-size:11px;
	color:#ccc;
	padding: 5px 10px 5px 0px;
	vertical-align:top;
	line-height: 13px;
}
#home #mainContent {
	top: 430px;
	position: absolute;
}


/* -------------  COOL ROOF SYSTEMS  ------------------- */
#cool-roof-systems {
	background-image: url(images/backgrounds/cool-roof-systems.jpg);
}
#cool-roof-systems #mainContent {
	font-family:Helvetica, Arial, sans-serif;
	font-size:12px;
	color:#333;
	vertical-align:top;
	line-height: 16px;
	
	top: 139px;
	width: 188px;
	height: 330px;
	padding-top: 10px;
	padding-left: 32px;
	padding-right: 30px;
	padding-bottom: 20px;
	background-color: white;
	display: block;
	position: absolute;
}
#cool-roof-systems #mainContent li {
	margin-bottom: 4px;
}

/* -------------  FARR SYSTEMS  ------------------------ */
#farr-systems {
	background-image: url(images/backgrounds/farr-systems.jpg);
}
#farr-systems #mainContent {
	position: absolute;
	display: block;
	top: 338px;	
	height:614px;
}
#farr-systems #mainContent #column1,
#farr-systems #mainContent #column2 {
	font-family:Helvetica, Arial, sans-serif;
	font-size:12px;
	color:#333;
	vertical-align:top;
	line-height: 16px;
	
	margin-top: 0px;
	padding-top: 24px;
	padding-left: 32px;
	padding-right: 30px;
	padding-bottom: 20px;
	background-color: white;
	position: absolute;
	display: block;
	height:754px
}
#farr-systems #mainContent li {
	margin-left: -22px;
	margin-bottom: 6px;
}
#farr-systems #mainContent #column1 {
	margin-right: 2px;
	width: 283px;
}
#farr-systems #mainContent #column2 {
	left: 347px;
	width: 282px;

}


/* -------------  FARR STEP BY STEP  ------------------- */
#farr-step-by-step {
	background-image: url(images/backgrounds/farr-step-by-step.jpg);
}
#farr-step-by-step #mainContent {
	top: 191px;
}
#farr-step-by-step #mainContent {
	font-family:Helvetica, Arial, sans-serif;
	font-size:12px;
	font-weight: bold;
	
	color:#333;
	vertical-align:bottom;
	line-height: 16px;
	width: 643px;
	height: 2790px;
	padding-top: 24px;
	padding-left: 49px;
	padding-right: 14px;
	padding-bottom: 20px;
	background-color: white;
	position:absolute;
	display: block;
}
#farr-step-by-step #mainContent .title {
	margin-top: 100px;
}
#farr-step-by-step #mainContent tr .image-above {
	margin-top: 40px;
}
#farr-step-by-step #mainContent td .right-image {
	margin-left: -16px;
}

/* -------------  COATINGS  ---------------------------- */
#coatings {
	background-image: url(images/backgrounds/coatings.jpg);
}
#coatings #mainContent {
	top: 275px;
}
#coatings #mainContent {
	font-family:Helvetica, Arial, sans-serif;
	font-size:12px;
	color:#333;
	vertical-align:top;
	line-height: 16px;
	margin-top: -167px;
	
	width: 275px;
	height: auto;
	padding-top: 24px;
	padding-left: 32px;
	padding-right: 30px;
	padding-bottom: 20px;
	background-color: white;
	display: block;
	position: absolute;
}


/* -------------  ROOFING & SEALCOAT PRODUCTS  --------- */
#roofing-products {
	background-image: url(images/backgrounds/roofing-products.jpg);
}
#sealcoat-products {
	background-image: url(images/backgrounds/sealcoat-products.jpg);
}
#roofing-products #mainContent {
	top:200px;
}
#sealcoat-products #mainContent {
	top: 178px;
}
#sealcoat-products #mainContent .subtitle {
	margin-top: 5px;
	padding-bottom: 25px;
}
#roofing-products #mainContent,
#sealcoat-products #mainContent {
	background-color:#fff;
	padding-top:20px;
	padding-left:15px;
	padding-right:15px;
}
#roofing-products td, th, table,
#sealcoat-products td, th, table {
	font-family:Helvetica, Arial, sans-serif;
	font-size:12px;
	line-height: 15px;
	color:#333;
	vertical-align:top;
}
#roofing-products td,
#sealcoat-products td {
	background-color:#FFFFFF;
	border-top:solid 1px #CCC;
	padding-bottom:20px;
}
#roofing-products th,
#sealcoat-products th {
	margin-top:20px;
	font-weight:normal;
	text-align:left;
	color:#000000;
	background-color:#fff;
	border:0;
}
#roofing-products #mainContent ul,
#sealcoat-products #mainContent ul {
	margin-left:-24px;
}
#roofing-products #mainContent li,
#sealcoat-products #mainContent li {
	margin-bottom:10px;
}
#roofing-products .product-number,
#sealcoat-products .product-number {
	width:74px;
	text-align:right;
	padding-right:4px;
}
#roofing-products .product-basics,
#sealcoat-products .product-basics {
	width:240px;
}
#roofing-products .product-basics p,
#sealcoat-products .product-basics p {
	margin-top: -4px;
}
#roofing-products .product-description,
#sealcoat-products .product-description {
	padding-right:40px;
}
#roofing-products .product-description p,
#sealcoat-products .product-description p {
	padding:0px;
}
#roofing-products h3,
#sealcoat-products h3 {
	font-size:14px;
	padding-top:0;
	padding-bottom: 10px;
	margin:0;
	border:0;
}
#roofing-products #mainContent a,
#sealcoat-products #mainContent a {
	color:#099;
	text-decoration:underline;
}
#roofing-products #mainContent a:hover,
#sealcoat-products #mainContent a:hover {
	color:#000;
	text-decoration:none;
}
#roofing-products .pdf-image-td,
#sealcoat-products .pdf-image-td {
	padding-bottom:6px;
	padding-top:8px;
}
#roofing-products .pdf-download-td,
#sealcoat-products .pdf-download-td {
	padding-top:6px;
	padding-bottom:6px;
}
#roofing-products .pdf-download-td,
#sealcoat-products .pdf-download-td {
	padding-left:7px;
}


/* -------------  SPECIFICATIONS  --------------------- */
#specifications {
	background-image: url(images/backgrounds/specifications.jpg);
}
#specifications #mainContent {
	background-color: #fff;
	
	top:276px;
	width: 771px;
	height: 1032px;
	margin-top: -125px;
	padding-top: 20px;
	padding-left: 0px;
	padding-right: -20px;
	position: absolute;
}
#specifications td, th, table {
	font-family:Helvetica, Arial, sans-serif;
	font-size:12px;
	line-height: 15px;
	color:#333;
	vertical-align:top;
}
#specifications table {
	margin-left: 30px;
}
#specifications td {
	background-color: #FFF;
	border-top: solid 1px #CCC;
	padding-bottom: 8px;
	padding-top: 8px;
}
#specifications th {
	margin-top:20px;
	font-weight:normal;
	text-align:left;
	color:#000000;
	background-color:#fff;
	border:0;
}
#specifications .heading {
	vertical-align: bottom;
	padding-bottom: 8px;
	color: #000;
}
#specifications .heading-number {
	border-top: solid 1px #ccc;
	padding-top: 8px;
	width: 20px;
}
#specifications .details {
	border: none;
}
#specifications #mainContent ul {
	margin-left:-24px;
}
#specifications #mainContent li {
	margin-bottom:10px;
}
#specifications h3 {
	font-size:14px;
	padding-top:0;
	padding-bottom: 10px;
	margin:0;
	border:0;
}
#specifications #mainContent a {
	color:#099;
	text-decoration:underline;
}
#specifications #mainContent a:hover {
	color:#000;
	text-decoration:none;
}


/* -------------  PROJECT PROFILES (ROOFING & SEALCOAT)  --------------------------- */
#project-profiles {
	background-image: url(images/backgrounds/project-profiles.jpg);
}
#sealcoat-project-profiles {
	background-image: url(images/backgrounds/sealcoat-project-profiles.jpg);
}
#sealcoat-project-profiles #mainContent,
#project-profiles #mainContent {
	top:211px;
	width:533px;
	background-color:#FFF;
	padding-top:18px;
	padding-left:33px;
	padding-right:34px;
	padding-bottom:34px;
	position: absolute;
}
#sealcoat-project-profiles #mainContent table,
#project-profiles #mainContent table {
	margin-left: 10px;
}
#sealcoat-project-profiles #mainContent .row,
#project-profiles #mainContent .row {
	margin-bottom: 25px;
}
#sealcoat-project-profiles .thumbnail,
#project-profiles .thumbnail {
	border: 3px solid #fff;
}
#project-profiles .thumbnail:hover {
	border: 3px solid #099;
}
#sealcoat-project-profiles .thumbnail:hover {
	border: 3px solid #F30;
}
#project-profiles a:hover {
	text-decoration: none;
	color:#000;
}
#sealcoat-project-profiles a:hover {
	text-decoration: none;
	color:#F30;
}
/* --- Details page ... big image and discription and such ---*/
#project-profiles-detiails {}


/* -------------  PROJECT PROFILE (singular!!! ... the details page) (ROOFING & SEALCOAT)  --------------------------- */
#roofing-project-profile #mainContent,
#sealcoat-project-profile #mainContent {
	top:-84px;
	background-color:#222;
	padding-top:33px;
	padding-left:33px;
	padding-right:33px;
	padding-bottom:33px;
	position: absolute;
}
#roofing-project-profile #mainContent table,
#sealcoat-project-profile #mainContent table {
	margin-left: 10px;
}
#roofing-project-profile #mainContent .row,
#sealcoat-project-profile #mainContent .row {
	margin-bottom: 25px;
}
#roofing-project-profile .thumbnail,
#sealcoat-project-profile .thumbnail {
	border: 3px solid #fff;
}
#roofing-project-profile .thumbnail:hover {
	border: 3px solid #099;
}
#sealcoat-project-profile .thumbnail:hover {
	border: 3px solid #F30;
}
#roofing-project-profile a:hover,
#sealcoat-project-profile a:hover {
	text-decoration: none;
	color:#000;
}
#roofing-project-profile a:hover,
#sealcoat-project-profile a:hover {
	text-decoration: none;
	color:#F30;
}
#roofing-project-profile #mainContent p,
#sealcoat-project-profile #mainContent p {
	font-family:Helvetica, Arial, sans-serif;
	font-size:12px;
	color:#999;
	vertical-align:top;
	line-height: 16px;
	margin-top: 20px;
	width:400px;
}
#sealcoat-project-profile #mainContent .back-link,
#roofing-project-profile #mainContent .back-link {
	font-family:Helvetica, Arial, sans-serif;
	font-size:12px;
	color:#fff;
	vertical-align:top;
	line-height: 16px;
	text-decoration: underline;
}
#sealcoat-project-profile #mainContent .back-link:hover,
#roofing-project-profile #mainContent .back-link:hover {
	text-decoration: none;
}
#sealcoat-project-profile #mainContent .back-link:hover {
	color:#f30;
}
#roofing-project-profile #mainContent .back-link:hover {
	color:#099;
}


/* -------------  SERVICES  --------------------------- */
#services {
	background-image: url(images/backgrounds/services.jpg);
}
#services #mainContent {
	top: 211px;
}
#services #mainContent {
	font-family:Helvetica, Arial, sans-serif;
	font-size:12px;
	color:#333;
	vertical-align:top;
	line-height: 16px;
	
	width: 538px;
	height: auto;
	padding-top: 24px;
	padding-left: 32px;
	padding-right: 30px;
	padding-bottom: 20px;
	background-color: white;
	display: block;
	position: absolute;
}
#services #mainContent table {
	margin-left: 14px;
}
#services #mainContent td {
	vertical-align: top;
}
#services #mainContent .row {
	padding-bottom: 14px;
}
#services #mainContent h3 {
	margin-top: -2px;
	margin-bottom: -4px;
	margin-left: 10px;
}
#services #mainContent p {
	margin-left: 10px;
}
#services #mainContent a:hover {
	text-decoration: none;
	color:#000;
}


/* -------------  ASPHALT SEALCOAT SYSTEMS  --------------------------- */
#asphalt-sealcoat-systems {
	background-image: url(images/backgrounds/asphalt-sealcoat-systems.jpg);
}
#asphalt-sealcoat-systems #mainContent {
	top: 285px;
	width:521px;
	background-color:#FFFFFF;
	padding-top:18px;
	padding-left:28px;
	padding-right:34px;
	padding-bottom:34px;
	position: absolute;
}
#asphalt-sealcoat-systems #mainContent p {
	font-family:Helvetica, Arial, sans-serif;
	font-size:12px;
	color:#333;
	vertical-align:top;
	text-align:left;
	line-height: 15px;
}


/* -------------  PAVEMENT MANAGEMENT SYSTEM  --------------------------- */
#pavement-management {
	background-image: url(images/backgrounds/pavement-management.jpg);
}
#pavement-management #mainContent {
	font-family:Helvetica, Arial, sans-serif;
	font-size:12px;
	color:#333;
	vertical-align:top;
	line-height: 16px;
	
	top: 190px;
	width: 628px;
	height: 1850px;
	padding-top: 10px;
	padding-left: 32px;
	padding-right: 30px;
	padding-bottom: 20px;
	background-color: white;
	display: block;
	position: absolute;
}
#pavement-management #mainContent table {
	margin-top: 20px;
	margin-left: 0px;
}
#pavement-management #mainContent td {
	padding-bottom: 22px;
}
#pavement-management #mainContent .description {
	border-top: solid 1px #ccc;
	padding-left: 13px;
	vertical-align: top;
}


/* -------------  ABOUT US  --------------------------- */
#about-us {
	background-image: url(images/backgrounds/about-us.jpg);
}
#about-us #mainContent {
	top: 131px;
	width:346px;
	background-color:#FFFFFF;
	padding-top:18px;
	padding-left:33px;
	padding-right:34px;
	padding-bottom:34px;
	position: absolute;
}
#about-us #mainContent p {
	font-family:Helvetica, Arial, sans-serif;
	font-size:12px;
	color:#333;
	vertical-align:top;
	text-align:left;
	line-height: 15px;
}


/* -------------  CONTACT US  ------------------------- */
#contact-us {
	background-image: url(images/backgrounds/contact-us.jpg);
}
#contact-us #mainContent {
	top: 220px;
}
#contact-us #mainContent #column1,
#contact-us #mainContent #column2 {
	font-family:Helvetica, Arial, sans-serif;
	font-size:12px;
	color:#333;
	vertical-align:top;
	line-height: 16px;
	
	height:568px;
	padding-top: 8px;
	padding-left: 25px;
	padding-right: 37px;
	padding-bottom: 20px;
	background-color: white;
	position: absolute;
}
#contact-us #mainContent #column1 {
	margin-right: 2px;
	width: 188px;
}
#contact-us #mainContent #column2 {
	left: 252px;
	width: 188px;

}
#contact-us #mainContent h3 {
	margin-top: 18px;
	margin-bottom: 6px;
}