@import url('css_reset.css');
@import url('css_utility.css');


/***************** GLOBAL ************************/

html {
	min-height: 100%;
	height: 100%;
	margin-bottom: 1px;
	overflow-y: scroll;
}

body {
	background: #fff;
	font: small/1.6em Verdana, Arial, Helvetica, sans-serif;
	color: #000;
	width: 100%;
	height: 100%;
}

/***************** STRUCTURE ************************/

#container {
	width: 1020px;
	margin: 40px auto;
}

#c1 {
	width: 130px;
	float: left;
	padding: 0 15px;
	margin-left: 20px;
	display: inline; /* IE6 FIX */
}

#c2 {
	width: 785px;
	float: right;
	margin-top: 10px;
	background: url('/images/bg-c2.jpg') repeat-y;
	padding: 15px 0 80px 30px;
	position: relative;
	min-height: 500px;
}

/***************** CONTENT ************************/

#content {
	margin: 15px auto 0 auto;
	min-height: 450px;
}

#c2 a:link, #c2 a:visited, #c2 a:active {
	color: #424242;
}

#c2 a:hover {
	color: #f60;
}

#content p {
	font-size: 95%;
	margin-bottom: 10px;
}

h1 {
	color: #e98025;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-weight: normal;
	padding-bottom: 8px;
	border-bottom: 1px solid #f0f0f0;
	margin: 30px 0 0.6em 0;
	font-size: 200%;
}

h1 span { font-size: 40%; vertical-align: top; }

h2 {
	color: #6b5440;
	font: normal 140% Georgia, "Times New Roman", Times, serif;
	margin: 1.6em 0 10px;
}

h3 {
	color: #6b5440;
	font: normal 160% Georgia, "Times New Roman", Times, serif;
	margin: 20px 0 10px;
}

h4 {
	font-weight: bold;
}

h4 > p {
	margin-bottom: 10px;
}	

/*
------------ LOGO / TAGLINE-----------------------------------*/

#logo {
	margin: 25px 0 0 10px;
}

#tagline {
	margin: 0 0 20px -5px;
}

/*
------------ BREADCRUMBS --------------------------------------*/

#breadcrumbs {
	font-size: 80%;
	color: #ccc;
}

#breadcrumbs a {
	color: #ccc;
	font-weight: normal;
}

#breadcrumbs a:hover {
	color: #666;
}



/*
----------- Site Navigation :: general styles & structure -----------------------------*/

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

#mainNav {
	margin: 25px 0 35px 10px;
}

#mainNav li {
	padding: 2px 0;
	list-style: none;
	margin-bottom: 4px;
}

#mainNav a {
	color: #424242;
	text-decoration: none;
	display: block;
	padding-left: 11px;
	font-size: 95%;
	font-weight: bold;
}

#t-home .n-home,
#t-about .n-about,
#t-products .n-products,
#t-technical .n-technical,
#t-news .n-news,
#t-green .n-green,
#t-distributors .n-distributors,
#t-contact .n-contact,
#t-faq .n-faq,
#t-login .n-login,
#t-links .n-links,
#mainNav a:hover {
	color: #f60;
	background: url('/images/bg-mainnav-a.gif') no-repeat left center;
}

#t-green .n-green { color: #090; background: url('/images/nav-green-indicator.jpg') no-repeat left center;}
#mainNav a.n-green:hover { color: #090 !important; background: url('/images/nav-green-indicator.jpg') no-repeat left center; }

/* 
--------- Subpage Navigation :: general styles & stucture ------------- */

.subnav ul {
	float: right;
	margin-top: -40px;
}

.subnav li {
	float: left;
	list-style: none;
}

.subnav a {
	text-indent: -9999px;
	height: 25px;
	display: block;
	margin-right: 3px;
	background-position: 0 -25px;
}

/* 
--------- Subpage Navigation :: roofing tiles navigation ------------- */

#t-tile-profiles .n-tile-profiles,
#t-color-selection .n-color-selection,
#t-blends .n-blends,
#t-accessories .n-accessories,
#t-pavers .n-pavers,
#t-green .n-green-tiles,
.subnav a:hover {
	background-position: 0 0;
}

.n-tile-profiles {
	background: url('/images/nav-tile-profiles.gif') no-repeat;
	width: 89px;
}

.n-green-tiles {
	background: url('/images/nav-tile-green.gif') no-repeat;
	width: 89px;
}

.n-color-selection {
	background: url('/images/nav-color-selection.gif') no-repeat;
	width: 109px;
}

.n-blends {
	background: url('/images/nav-blends.gif') no-repeat;
	width: 58px;
}

.n-accessories {
	background: url('/images/nav-accessories.gif') no-repeat;
	width: 112px;
}

.n-pavers {
	background: url('/images/nav-pavers.gif') no-repeat;
	width: 81px;
}

/*-----------TILE PROFILES --------------------*/

#technical-nav li, #news-nav li, #contact-nav li {
	float: left;
	list-style: none;
}

#technical-nav a, #news-nav a, #contact-nav a {
	text-indent: -9999px;
	height: 25px;
	display: block;
	margin-right: 3px;
	background-position: 0 -25px;
}

#t-warranty .n-warranty,
#t-installation .n-installation,
#t-notice .n-notice,
#t-building .n-building,
#t-drawings .n-drawings,
#t-map .n-contact-map,
#t-customer .n-contact-customer,
#t-corporate .n-contact-corporate,
#t-news-add .n-news-add,
#t-news-update .n-news-update,
#news-nav a:hover,
#contact-nav a:hover,
#technical-nav a:hover {
	background-position: 0 0px;
}

/***************** HOMEPAGE ************************/

#branding {
	margin-bottom: 10px;
}

h1.home {
	text-indent: -9999px;
	background: url('/images/hd-making-beauty.gif') no-repeat;
	line-height: 1em;
	margin-top: 24px;
	margin-left: 10px;
	width: 450px;
}

#flashcontent {
	margin-left: 10px;
}

#t-home p {
	margin: 0 25px 0 10px;
	width: 475px;
}

#home-sidebar {
	margin: 24px 25px 0 0;
	float: right;
}

/***************** PRODUCTS ************************/

/*
------------ SELECT YOUR PRODUCT ---------------------------------------*/


.product-selector {
	width: 230px;
	margin: 15px 5px 0;
	padding: 20px 10px;
	float: left;
	height: 450px;
	text-align: center;
}

a .product-selector {
	color: #000;
	text-decoration: none; /* FIX IE 6 & 7 */
}

a .product-selector:hover {
	background: #efefef;
}

.product-selector img {
	border: none;
}

.product-selector h3 {
	margin-top: -10px;
	color: #c25c31;
	font-weight: normal;
	font-size: 180%;
	padding: 30px 0 0 0;
	font-family: Georgia, "Times New Roman", Times, serif;
}

.product-selector p {
	text-align: left;
	width: 210px;
	margin: 15px 0 0 10px;
	line-height: 1.7em;
	font-size: 95%;
}

/*
------------ Roofing Tiles ---------------------------------------*/

#productInfo img#main {
	border: 1px solid #dcdcdc;
	float: left;
	margin-right: 20px;
}

#productInfo {
	position: relative;
	height: 210px;
	left: 20px;
}

#tile-profile-details {
	color: #483222;
	line-height: 1.3em;
	margin: 20px;
	padding-left: 30px;
}
#tile-profile-details li {
	list-style: square;
}

/*
-------------- Color Selection Controls -------------------------------*/

#color-controls {
	background: #dfdfdf url('/images/bg-color-control.gif') repeat-x;
	border-top: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
	padding: 10px 0;
	float: left;
	width: 100%;
}
.color-control-items {
	float: left;
	width: 190px;
	margin: 0 10px;
	padding-left: 50px;
	min-height: 55px;
}

#first-step {
	background: url('/images/bg-control-items-arrow-1.png') no-repeat left center;
}

.second-step {
	background: url('/images/bg-control-items-arrow-2.png') no-repeat left center;
}

.third-step {
	background: url('/images/bg-control-items-arrow-3.png') no-repeat left center;
	
}

.color-control-items .last {
	margin-right: 0;
}

.color-control-items span {
	padding-top: 15px;
	display: block;
	line-height: normal;
}

/*
------------ IMAGE GALLERY -------------------------------*/

#imageGallery {
	padding-top: 25px;
	clear: both;
	margin-left: 20px;
}

#imageGallery p {
	float: left;
	width: 94px;
	text-align: center;
	line-height: 15px;
	margin: 0 32px 40px 0;
	height: 140px;
}

imageGallery p.last {
	margin-right: 0;
}

#imageGallery span {
	padding-top: 4px;
	display: block;
	clear: both;
	text-transform: capitalize;
}

#imageGallery img {
	border: 1px solid #ccc;
	padding: 2px;
}

/*
------------ IMAGE GALLERY NAVIGATION -----------------------------*/

#tilesControl  {
	float: right;
	width: 230px;
	margin-top: -25px;
}

#tilesControl li {
	float: left;
	list-style: none;
	margin-right: 4px;
	
}

#tilesControl a {
	display: block;
	font-size: 80%;
	font-weight: normal;
	color: #666;
	text-decoration: none;
}

#tilesControl a:hover {
	text-decoration: underline;
}

/*------------ TILE INFORMATION -----------------*/

#productInfoNav {
	float: left;
	margin: 0 8px 0 10px;
}
#productInfoNav li {
	list-style: none;
	margin-bottom: 25px;
}
#productInfoNav img {
	border: none;
}
#productInfoNav a {
	display: block;
	margin-bottom: 4px;
	height: 29px;
	width: 108px;
}
#productInfo {
	margin: 15px 0;
}

#breadcrumbs {
	margin: -12px 0 0 10px;
}

#div-spanish {
	position: absolute;
	left: 150px;
	width: 642px;
}

#div-flat {
	position: absolute;
	left: 150px;
	width: 642px;	
	
}

#div-royal {
	position: absolute;
	left: 150px;
	width: 642px;	
}

#div-barrel {
	position: absolute;
	left: 150px;
	width: 642px;	
}

.tile-interface ul {
	list-style: none;
	float: left;
	margin-right: 15px;
	width: 125px;
	margin-top: 20px;
	border-right: 1px solid #dcdcdc;
}
.tile-interface li {
	color: #866e5c;
	margin-bottom: 15px;
	font-size: 95%;
}
.tile-interface span {
	color: #563821;
	font-size: 150%;
}
.tile-interface ul.first {
	width: 110px;
}
.tile-interface ul.middle {
	width: 135px;
}
.tile-interface ul.last {
	width: 130px;
	border: 0;
}

.spanish {
	background: url('/images/nav-tile-spanish.gif') no-repeat;
}
.spanish-selected {
	background: url('/images/nav-tile-spanish-selected.gif') no-repeat;
}
.royal {
	background: url('/images/nav-tile-royal.gif') no-repeat;
}
.royal-selected {
	background: url('/images/nav-tile-royal-selected.gif') no-repeat;
}
.barrel {
	background: url('/images/nav-tile-barrel.gif') no-repeat;
}

.barrel-selected {
	background: url('/images/nav-tile-barrel-selected.gif') no-repeat;
}


#hideProductInfo {
	border-top: 3px double #f0f0f0;
	display: block;
	text-align: right;
	margin-top: 10px;
}

#hideProductInfo img {
	border: none;
	background: none;	

}

#tilesControl a {
	text-indent: -9999px;
	height: 24px;
}

/*
-------------------------- blends-----------------------*/

#blends-gallery { font-size: 90%; margin: 0 0 20px 35px; padding-bottom: 30px; border-bottom: 1px solid #dedede; float: left; }

#blends-gallery img {  margin: -28px 0 0 0; float: left; display: block; }

.blend-column { float: left; width: 375px;  }

.blend-package { width: 270px; float: left; }

#blend-help { background: url('../images/bullet-star.gif') no-repeat left center; padding-left: 20px; font-weight: bold; color: #515151; }

#blends-gallery h3 { margin: 25px 0 0 140px; color: #6C3200; font-size: 150%; letter-spacing: -1.0px; }

#blends-gallery ul { margin-left: 140px; line-height: 12px; }

#blends-gallery li { font-size: 95%; }

#blends-gallery .second { margin: 90px 0 0 -225px; }

#blends-gallery .third { margin: 180px 0 0 -225px; }



/******************* TECHNICAL *********************/

h1.technical {
	padding-bottom: 8px;
	margin: 30px 0 15px 0;
}

.technical p {
	margin: 0 0 1.1em 20px;
}

.technical p:hover {
	cursor: pointer;
}

.technical ul.downloads {
	margin: 25px 0 1.1em 40px;
	list-style: square;
	font-size: 85%;
}

.technical .downloads li {
	margin-bottom: 0.9em;
}

.n-warranty {
	background: url('/images/nav-warranty.gif') no-repeat;
	width: 61px;
}
.n-installation {
	background: url('/images/nav-installation.gif') no-repeat;
	width: 96px;
}

.n-notice {
	background: url('/images/nav-notice.gif') no-repeat;
	width: 124px;
}
.n-building {
	background: url('/images/nav-building.gif') no-repeat;
	width: 165px;
}
.n-drawings {
	background: url('/images/nav-drawings.gif') no-repeat;
	width: 96px;
}

.n-news-add {
	background: url('/images/nav-news-add.gif') no-repeat;
	width: 69px;
}

.n-news-update{
	background: url('/images/nav-news-update.gif') no-repeat;
	width: 122px;
}

.n-contact-map {
	background: url('/images/nav-contact-map.gif') no-repeat;
	width: 132px;
}

.n-contact-customer {
	background: url('/images/nav-contact-customer.gif') no-repeat;
	width: 109px;
}

.n-contact-corporate {
	background: url('/images/nav-contact-corporate.gif') no-repeat;
	width: 90px;
}

/*-------------- TECHNICAL AND NEWS NAV ---------------------*/

h3.subheader {
	color: #886751;
	font-weight: normal;
	font-size: 180%;
	padding: 25px 0 10px 0;
	font-family: Georgia, "Times New Roman", Times, serif;
}

img.support {
	float: right;
	margin: 30px 180px 0 0;
}

img.notices {
	margin-right: 15px;
}

#technical-nav ul {
	float: right;
	margin-top: -40px;
	width: 600px;
}

#news-nav ul {
	margin-top: -25px;
	float: right;
}

#contact-nav ul {
	float: right;
	margin-top: -40px;
}

#technical-nav li, #news-nav li, #contact-nav li {
	float: left;
	list-style: none;
}

#technical-nav a, #news-nav a, #contact-nav a {
	text-indent: -9999px;
	height: 25px;
	display: block;
	margin-right: 3px;
	background-position: 0 -25px;
	float: left;
}

#t-warranty .n-warranty,
#t-installation .n-installation,
#t-notice .n-notice,
#t-building .n-building,
#t-drawings .n-drawings,
#t-map .n-contact-map,
#t-customer .n-contact-customer,
#t-corporate .n-contact-corporate,
#t-news-add .n-news-add,
#t-news-update .n-news-update,
#news-nav a:hover,
#contact-nav a:hover,
#technical-nav a:hover {
	background-position: 0 0px;
}

/*
------------ Links ---------------------------------------*/



/******************* FAQ *********************/

.question {
	text-decoration: underline;
}

.question div {
	background: red;
}

.question div p {
	margin-bottom: 10px;
}

ul.downloads {
	list-style: square;
	margin-left: 20px;
}
ul.downloads li {
	margin-bottom: 8px;
	font-size: 95%;
}

.tile-weights {
	border-collapse: collapse;
	margin: 0 0 15px 20px;
}

.tile-weights td, .tile-weights th {
	text-align: center;
	border: 1px solid #ccc;
	padding: 3px;
	font-size: 85%;
}

.tile-weights tr.even {
	background: #efefef;
}

#tile-weights tr#first {
	background: #fff;
}

/***************** NEWS ************************/

/*------------ SELECT YOUR PRODUCT -----------------*/

#t-news h1 {
	color: #e98025;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-weight: normal;
	padding-bottom: 8px;
	border-bottom: 1px solid #f0f0f0;
	margin: 30px 0 0 0;
}

#t-news h3 {
	margin: 10px 0 0 20px;
	color: #947B66;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-weight: normal;
	font-size: 140%;
}

#t-news p.article {
	margin: 0 0 1.1em 0;
	border-bottom: 3px double #efefef;
	padding-bottom: 10px;
}

#t-news p.date {
	font-size: 70%;
	display: inline;
	padding: 2px;
	color: #666;
}

#t-news h2 {
	margin-bottom: 3px;
}

/***************** NEWS ************************/

#news-add {
	margin: 15px 0 0 20px;
}

#news-add label {
	display: block;
	float: left;
	width: 60px;
	clear: both;
	vertical-align: middle;
}

#news-add div {
	margin-bottom: 1.1em;
}

#news-add .text {
	width: 300px;
}

#news-add .submit {
	margin-left: 60px;
}

#news-add span {
	color: red;
	font-weight: bold;
	font-size: 80%;
}

p.good-insert {
	color:#33CC33;
	font-weight: bold;
}

#news-add #allowed-characters {
	background:#FFFFF2;
	padding: 10px;
	border: 1px dashed #966;
	margin: 10px 0 0 60px;
	width: 278px;
	line-height: 1.2em;
}

/*--------------- UPDATE PAGES ---------------------------*/

#news-update h3 {
	padding: 4px 0;
}
#news-update span.date {
	color: #000;
	text-decoration: none;
	float: left;
	font-weight: normal;
	font-size: 50%;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	margin-right: 12px;
}

#news-update a:hover {
	background: #efefef;
	display: block;
	text-decoration: none;
}
#news-update input.button {
	margin: 8px 0 0 20px;
}
#news-update .update-area {
	padding: 5px;
}

/***************** NEWS ************************/

.contact p {
	margin: 0 0 1.1em 20px;
}
.contact p.first {
	margin-top: 1.1em;
}

/***************** CONTACT ************************/

#contact { width: 260px; background: #fff; padding: 20px;  }
#contact .text { width: 250px; }
#contact textarea { width: 250px;  }
#contact label { display: block;  color: #000; font-size: 100%;}
#contact label.form-header { font-size: 130%; }
#contact #submit { margin-top: 10px; }
.error { font-size: 80%; font-weight: bold; color: red; margin-left: 20px; }
.eg { font-size: 80%; font-weight: bold; font-style: italic; }


#tooltip {
	border: 3px double #333;
	background-color: #efefef;
	opacity: 0.85;
	padding: 10px;
	font-size: 80%;
	line-height: normal;
	width: 250px;
}

#tooltip.beth {
	background: #fff;
}

#tooltip.arturo {
	background: #fff;
}

#tooltip.david {
	background: #fff;
}

#tooltip.moody {
	background: #fff;
}

#tooltip.alfredo {
	background: #fff;
}

#tooltip h3, #tooltip p {
	margin: 5px;
	border: 0;
}

#tooptip {
	font-size: 80%;
}

#florida {
	float: right;
	margin: 25px 40px 0 0;
	width: 360px;
}

#representative-states {
	margin-left: 30px;
	font-size: 80%;
}

#reps {
	width: 300px;
}

#reps p {
	border-bottom: 3px double #ccc;
	padding-bottom: 1.1em;
}

#reps p:first-line {
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 110%;
	font-weight: bold;
	padding-left: 20px;
	
}
#reps br {
	line-height: normal;
}

#reps h3 {
	color: #663300;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-weight: normal;
	font-size: 160%;
	margin: 0 0 15px 0;
	border-left: 6px solid;
	padding-left: 10px;
	
}
#reps em {
	line-height: 1.5em;
	padding-top: 5px;
	display: block;
}

#reps span {
	display: block;
}

table.nover1 { 
         visibility: hidden; display: none;
}