/*  - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
	
	Screen.css
	* Main stylesheet for controling all CSS styles


- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -  */ 	

	@import "_reset.css"; 
	@import "_type.css"; 
	@import "_grid.css"; 


/* Body
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -  */

body {
	background: white url('../img/bg-sub-pages.jpg') top left repeat-x;
	margin: 0; padding: 0;	
}

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

#main-nav { 
			
	width: 445px; height: 43px;
	float: right;
	}

#main-nav ul {

	background: transparent url('../img/nav-main.jpg') top left no-repeat;
	position: relative;
	display: block; float: right;
	width: 445px; height: 43px;
	margin: 0 0px 0 0; padding: 0; 
	

	}

#main-nav li, #main-nav a 	{ display: block; height: 43px; outline: none; }
#main-nav li 				{ position: absolute; top: 0px; }
#main-nav a 				{ text-indent: -9999px; text-decoration: none; outline: none; }


#main-nav #nav-one		{ left: 0px; width: 71px; }                                            
#main-nav #nav-two		{ left: 71px; width: 90px; }
#main-nav #nav-three	{ left: 161px; width: 101px; }
#main-nav #nav-four		{ left: 262px; width: 95px; }
#main-nav #nav-five		{ left: 355px; width: 93px; }

#main-nav #nav-one a:hover		{ background: transparent url('../img/nav-main.jpg') -0px -43px no-repeat; }                                            
#main-nav #nav-two a:hover		{ background: transparent url('../img/nav-main.jpg') -71px -43px no-repeat; }
#main-nav #nav-three a:hover	        { background: transparent url('../img/nav-main.jpg') -161px -43px no-repeat; }
#main-nav #nav-four a:hover		{ background: transparent url('../img/nav-main.jpg') -262px -43px no-repeat; }
#main-nav #nav-five a:hover		{ background: transparent url('../img/nav-main.jpg') -355px -43px no-repeat; }

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

#side-nav 		{ marign: 0 0 5px 0; padding: 0; }
#side-nav ul 	{ margin: 0; padding: 0; }
#side-nav  li	{ border-bottom: 1px dotted #c4c4c4;list-style-type: none; text-transform: uppercase; font-size: 11px; margin: 0; padding: 2px 0 2px 5px;}

/* Image Replacement For Headers & Logo
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -  */

#header-div h1 a {

	background: transparent url('../img/quarrytilelogo.jpg') no-repeat left top;
	display: block; float: left;
	width: 332px; 	height: 144px;
	margin: 0; padding: 0;
	text-decoration: none;
	text-indent: -9999px;
	outline: none; 	

	}

h2#page-headers	 {

		display: block; float: left;
		margin: 10px 0 0 0 ; padding: 0 0px 0 0px;
		text-decoration: none;
		text-indent: -9999px;
		outline: none;
	}

h2.home-tag 		{ background: transparent url('../img/headers/home.jpg') no-repeat left top; width: 557px; height: 50px; }
h2.products-tag 	{ background: transparent url('../img/headers/products.jpg') no-repeat left top; width: 115px; height: 50px; }
h2.pavers-tag 	        { background: transparent url('../img/headers/pavers.jpg') no-repeat left top; width: 115px; height: 50px; }
h2.retaining-tag 	{ background: transparent url('../img/headers/retaining.jpg') no-repeat left top; width: 77px; height: 50px; }
h2.natural-tag 		{ background: transparent url('../img/headers/natural.jpg') no-repeat left top; width: 124px; height: 50px; }
h2.riverrock-tag 	{ background: transparent url('../img/headers/riverrock.jpg') no-repeat left top; width: 171px; height: 50px; }
h2.coloredgravel-tag 	{ background: transparent url('../img/headers/coloredgravel.jpg') no-repeat left top; width: 130px; height: 50px; }
h2.showcase-tag 	{ background: transparent url('../img/headers/showcase-130.jpg') no-repeat left top; width: 130px; height: 50px; }
h2.resources-tag 	{ background: transparent url('../img/headers/resources.jpg') no-repeat left top; width: 136px; height: 50px; }
h2.about-tag 		{ background: transparent url('../img/headers/about.jpg') no-repeat left top; width: 115px; height: 50px; }
h2.contact-tag 		{ background: transparent url('../img/headers/contact.jpg') no-repeat left top; width: 557px; height: 50px; }
h2.waterscape-tag 	{ background: transparent url('../img/headers/waterscape.jpg') no-repeat left top; width: 296px; height: 50px; }

/* Contact Bar Styles
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -  */

#header-contact-info p 				{ float: left; width: 170px; margin: 0; padding: 5px 0; font-size: 12px; font-weight: bold; color: white; }
#header-contact-info p.block-one 	{ border-right: 1px dotted #797979; margin: 0 10px 0 0; padding: 5px 10px 5px 0; text-align: right; }
#header-contact-info p.block-two 	{ border-right: 1px dotted #797979; margin: 0 10px 0 0; padding: 5px 5px 5px 0; text-align: left; }
#header-contact-info span 			{ display: block; clear: both; }

/* SlideShowPro
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -  */
	
#show-case {
	
	background: #242627 url('../img/bg-showcase.jpg') top left repeat-y;
	width: 660px; height: 357px; 	
	display: block; clear: both; 
}
	
.slide-show { 
	
	background-color: #121212;
	display: block; float: left; 
	width: 452px; height: 337px;
	margin: 0; padding: 10px; 
	
	 }

.slide-show-text { 

	background-color: #488787;
	display: block; float: right; 
	width: 168px; height: 337px;
	margin: 0; padding: 10px; 
	
	}
	
/* Misc Classes
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -  */

.clear 	{ clear: both; } 

#map-text  {float: right; width: 300px; }
.map-image { border: 1px solid #c4c4c4; float: left; }

.product-info-div { width: 170px; float: right; margin: 0 5px 5px 5px; text-align: center;  }
.product-info-div span { clear: both; }
.product-info-div span.product-logo img { border: 1px solid #c4c4c4; padding: 3px; }
.product-info-div span.product-images-row img { border: 1px solid #c4c4c4; padding: 0; margin: 5px 6px; float: right; }

.website { padding: 5px 10px; margin: 5px 0 0 6px; border: 1px solid #c4c4c4; display: block; width: 136px; text-align: center; font-size: 11px;}