/*
Theme Name: Cooper
Theme URI: http://hekainteractive.com
Description: The Cooper theme.
Version: 1.0
Author: Andrew Maxwell
Author URI: http://www.hekainteractive.com
Tags: blue, custom header, fixed width, two columns, widgets

*/

/*=== START OF CSS RESET ===*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}

/* remember to define focus styles! */
:focus {
	outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: collapse;
	border-spacing: 0;
}
/*=== END OF CSS RESET ===*/


/*=== START OF STANDARD CSS ===*/
body {
        background-color: #2569A8;
	color: #000;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
        word-spacing: 0.03em;
	line-height: 15px;
}
p {
	font-size: 12px;
	letter-spacing: 0.020em;
	word-spacing: 0.03em;
	line-height: 15px;
	margin: 10px 0;
}
/*=== CONTAINER ===*/
#container {
	margin: 0 auto;
	position: relative;
	width: 1000px;
}


/*=== HEADER ===*/
#header {
	border-bottom: solid 2px #000;
	height: 80px;
	margin: 0 auto;
	position: relative;
	width: 1000px;
}
#header #logo {
	float: left;
	height: 54px;
	margin: 10px 0 0 0;
	width: 321px;
}
#header h1 a {
	color: #000;
	font-family: Verdana, Geneva, sans-serif;
	font-size: 16px;
	text-decoration: none;
}
#header .nav {
	bottom: 0;
	right: 0;
	position: absolute;
}
ul#mainMenu {
	float: left;
}
ul#mainMenu li {
	float: left;
}
ul#mainMenu li a {
        background-color: #CCC;
	border-right: solid 1px #999;
	border-left: solid 1px #FFF;
	color: #333;
	float: left;
	font-size: 12px;
	font-weight: 600;
	padding: 5px 10px;
	text-decoration: none;
}
ul#mainMenu li a:hover {
	background-color: #276db2;
	border-right: solid 1px #999;
	border-left: solid 1px #FFF;
	color: #FFF;
	float: left;
	font-size: 12px;
	font-weight: 600;
	padding: 5px 10px;
	text-decoration: none;
}
ul.dropdown,
ul.dropdown li,
ul.dropdown ul {
 list-style: none;
 margin: 0;
 padding: 0;
}

ul.dropdown {
 position: relative;
 z-index: 597;
 float: left;
}

ul.dropdown li {
 float: left;
 line-height: 1.3em;
 vertical-align: middle;
 zoom: 1;
}

ul.dropdown li.hover,
ul.dropdown li:hover {
 position: relative;
 z-index: 599;
 cursor: default;
}

ul.dropdown ul {
 visibility: hidden;
 position: absolute;
 top: 100%;
 left: 0;
 z-index: 598;
}

ul.dropdown ul li {
	float: none;
	background-color: #CCC;
	border-top: solid 1px #FFF;
	border-right: solid 1px #999;
	border-bottom: solid 1px #999;
	border-left: solid 1px #FFF;
}

ul.dropdown ul ul {
 top: 1px;
 left: 150px;
}

ul.dropdown li:hover > ul {
 visibility: visible;
}
/*------------------------------------------------------------------------------------------------------/
 * @section		Base Style Extension
 */

ul.dropdown a,
ul.dropdown span {
 display: block;
 padding: 5px 30px;
}



/*------------------------------------------------------------------------------------------------------/
 *	@section	Base Style Override
 */


ul.dropdown li {
 padding: 0;
}

ul.dropdown ul a,
ul.dropdown ul span { /* POI, proposal: override abstract a, span */
 padding: 8px;
}



/*------------------------------------------------------------------------------------------------------/
 * @section		Base Style Reinitiate: post-override activities
 */


ul.dropdown *.dir { /* POI */
 padding: 5px 30px;
}

ul.dropdown ul *.dir {
 padding: 8px 30px 8px 8px;
}



/*------------------------------------------------------------------------------------------------------/
 *	@section	Custom Styles
 */


ul.dropdown ul a {
 width: 133px;
}

ul.dropdown ul a.dir {
 width: 111px;
}



/*------------------------------------------------------------------------------------------------------/
 * @section		Support Class `open` Usage
 * @source		js, artificial
 *
 */


ul.dropdown *.open {
 background-color: #3d3d3d;
}
ul.dropdown ul *.open {
 background-color: #4c4c4c;
 background-image: url(images/comnav-arrowover.png);
 color: #fff;
}
ul.dropdown ul ul *.open {
 background-color: #595959;
 background-image: url(images/comnav-arrowover2.png);
 color: #fff;
}
/* Override UPPER TWO definitions */
ul.dropdown a.open:hover {
 background-color: #4698ca;
 color: #fff;
}
ul.dropdown ul a.open:hover {
 background-image: url(images/comnav-arrowon.png);
 color: #fff;
}


/* Clone in CSS 2 */

ul.dropdown li:hover > *.dir {
 background-color: #3d3d3d;
}
ul.dropdown ul li:hover > *.dir {
 background-color: #4c4c4c;
 background-image: url(images/comnav-arrowover.png);
}
ul.dropdown ul ul li:hover > *.dir {
 background-color: #595959;
 background-image: url(images/comnav-arrowover2.png);
 color: #fff;
}

/* Override UPPER TWO definitions */
ul.dropdown li:hover > a.dir:hover {
 background-color: #4698ca;
 color: #fff;
}
ul.dropdown ul li:hover > a.dir:hover {
 background-image: url(images/comnav-arrowon.png);
 color: #fff;
}
/*=== INNER CONTAINER ===*/
#innerContainer {
	background-color: #fff;
	border: 1px solid #333;
	float: left;
	margin: 20px auto 10px auto;
	padding: 20px;
	position: relative;
	width: 960px;
}
#innerContainer ul {
	list-style: disc;
	list-style-position: inside;
	margin: 10px;
}
#productDetails {
	float: left;
	margin-right: 20px;
	text-align: center;
	width: 250px;	
	border-right: solid 1px #CCC;
	clear: left;
}
.productThumbnails a img {
	border-top: solid 1px #CCC;
	border-right: solid 1px #666;
	border-bottom: solid 1px #666;
	border-left: solid 1px #CCC;
	margin: 5px 0 0 10px;
}
.productThumbnails a img:hover {
	border-top: solid 1px #666;
	border-right: solid 1px #CCC;
	border-bottom: solid 1px #CCC;
	border-left: solid 1px #666;
}
.flashPresentation {
	width: 160px;
        padding: 10px;
	margin: 10px auto 0 auto;
	background-color: #CCC;
	border-top: solid 1px #FFF;
	border-right: solid 1px #666;
	border-bottom: solid 1px #666;
	border-left: solid 1px #FFF;
}
.flashPresentation:hover {
	width: 160px;
	padding: 10px;
	margin: 10px auto 0 auto;
	background-color: #CCC;
	border-top: solid 1px #666;
	border-right: solid 1px #FFF;
	border-bottom: solid 1px #FFF;
	border-left: solid 1px #666;
}
.flashPresentation p {
	color: #000;
	font-weight: 600;
	text-decoration: none;
	margin: 0;
	padding: 0;
}
.flashPresentation a {
	color: #000;
	font-weight: 600;
	text-decoration: none;
	margin: 0;
	padding: 0;
}
.productSpecs {
	width: 160px;
	padding: 10px;
	margin: 10px auto 0 auto;
	background-color: #CCC;
	border-top: solid 1px #FFF;
	border-right: solid 1px #666;
	border-bottom: solid 1px #666;
	border-left: solid 1px #FFF;
}
.productSpecs:hover {
	width: 160px;
	padding: 10px;
	margin: 10px auto 0 auto;
	background-color: #CCC;
	border-top: solid 1px #666;
	border-right: solid 1px #FFF;
	border-bottom: solid 1px #FFF;
	border-left: solid 1px #666;
}
.productSpecs p {
	color: #000;
	font-weight: 600;
	text-decoration: none;
	margin: 0;
	padding: 0;
}
.productSpecs a {
	color: #000;
	font-weight: 600;
	text-decoration: none;
	margin: 0;
	padding: 0;
}
.productContact {
	width: 160px;
	height: 25px;
	padding: 10px;
	margin: 10px auto 0 auto;
	background-color: #CCC;
	border-top: solid 1px #FFF;
	border-right: solid 1px #666;
	border-bottom: solid 1px #666;
	border-left: solid 1px #FFF;
}
.productContact:hover {
	width: 160px;
	height: 25px;
	padding: 10px;
	margin: 10px auto 0 auto;
	background-color: #CCC;
	border-top: solid 1px #666;
	border-right: solid 1px #FFF;
	border-bottom: solid 1px #FFF;
	border-left: solid 1px #666;
}
.productContact span {
	color: #000;
	font-weight: 600;
	text-decoration: none;
	margin: 0;
	padding: 0;
	float: left;
	font-size: 20px;
}
.productContact p {
	color: #000;
	font-weight: 600;
	text-decoration: none;
	margin: 0;
	padding: 0;
}
.productContact a {
	color: #000;
	font-weight: 600;
	text-decoration: none;
	margin: 0;
	padding: 0;
}

/*=== FAQ ===*/
ol#faqList {
	position: fixed;
	top: 100px;
	width: 250px;
	list-style: decimal;
}
ol#faqList li a {
	text-decoration: none;
	color: #000;
	font-weight: 600;
}
ol#faqList li a:hover {
	text-decoration: underline;
}
ol#faqList li {
	margin-bottom: 5px;
}
/*=== FOOTER ===*/
#footer {
	float: left;
	height: 40px;
	width: 1000px;
}
#footer ul.nav {
	margin-left: 390px;
}
#footer ul.nav li {
	float: left;
}
#footer ul.nav li a {
	font-size: 10px;
	padding: 5px 10px;
	text-decoration: none;
}



/*--- SLIDESHOW ON HOMEPAGE ---*/
div.scrollable { 
    /* required settings */ 
    position:relative; 
    overflow:hidden; 
    width: 875px; 
    height: 260px;
    margin: 0 auto;
} 
/* 
    root element for scrollable items. Must be absolutely positioned 
    and it should have a extremely large width to accomodate scrollable items. 
    it's enough that you set width and height for the root element and 
    not for this element. 
*/ 
div.scrollable div.items { 
    /* this cannot be too large */ 
    width:20000em; 
    position:absolute; 
} 
 
/* 
    a single item. must be floated in horizontal scrolling. 
    typically, this element is the one that *you* will style 
    the most. 
*/ 
div.scrollable div.items div { 
    float:left; 
	height: 250px;
	width: 875px;
} 
 
/* you may want to setup some decorations to active the item */ 
div.items div.active { 
    border:1px inset #ccc; 
    background-color:#fff; 
}
.slide {
    background-image: url(http://www.cooperenvironmental.com/wp-content/themes/cooper/images/slide-bg.jpg);
    height: 250px;
    position: relative;
    width: 875px;
}
.slide p {
    width: 450px;
    font-size: 14px;
    font-weight: 600;
    float: left;
    color: #fff;
    margin: 30px 0 0 30px;
    line-height: 28px;
    text-transform: uppercase;
}
.slide p a:link, .slide p a:visited{
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    text-decoration: none;
}
.slide p a:hover {
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    text-decoration: underline;
}
.slide img {
    position: absolute;
    top: 0;
    right: 0;
}

/* Begin Images */
p img {
	padding: 0;
	max-width: 100%;
	}

/*	Using 'class="alignright"' on an image will (who would've
	thought?!) align the image to the right. And using 'class="centered',
	will of course center the image. This is much better than using
	align="center", being much more futureproof (and valid) */

img.centered {
	display: block;
	margin-left: auto;
	margin-right: auto;
	}

img.alignright {
	padding: 4px;
	margin: 0 0 2px 7px;
	display: inline;
	}

img.alignleft {
	padding: 4px;
	margin: 0 7px 2px 0;
	display: inline;
	}

.alignright {
	float: right;
	}

.alignleft {
	float: left;
	}
/* End Images */