/* Import stylesheets and hide from IE/Mac \*/
/*@import "lib/reset.css";*/
@import "lib/typography.css";
/*@import "lib/grid.css";
@import "lib/buttons.css";*/
/* End import/hide */

/* CSS Document */
body {
	margin: 0;
	padding: 0;
	color: #000;
	}

* {
	margin: 0;
	padding: 0;
}

#container {
width: 90%;
max-width: 1100px; /*This contains the webpage to a specific width - to make sure header image doesn't break, and it is the same size as the 2 column layout. */
min-width: 800px;
margin: 10px auto;
}

#header {
padding: .5em;
}

#menu_span {
padding:3px;
font-size:.8em;
margin:0px 35px 0px 15px;
background-color:#e8e8e8;
}

#menu_span a {
text-decoration:none;
color:blue;
}

#menu_span a:hover {
text-decoration:none;
color:darkred;
}

#leftnav {
float: left;
width: 180px;
margin: 0;
padding: 1em;
}

#leftnav p, #rightnav p { 
margin: 0 0 1em 0; 
}

#rightnav {
float: right;
width: 240px;
margin: 0;
padding: 1em;
}

#content {
margin-left: 190px;
margin-right: 20px;
padding: 1em;
}

#content2 {
margin-left: 190px;
margin-right: 260px;
padding: 1em;
max-width: 48em;
}

#footer {
clear: both;
margin: 0;
padding: 1em 2em;
text-align: center;
color: #666;
}

hr {
	
	/* border:2px solid #ab1111; */
	border:2px solid #ccc;
	
	margin:1em 1em 1em 0;
}

hr.black {
	/* border:2px solid #000; */
	border:2px solid #999;
	
	margin:1em 1em 1em 0;
}

#nautilusbar {
	background:url(../images/nautilus_bar.jpg) no-repeat top left;
	height:3em;
}
	
#nautilusbar_stretch {
	float:right; 
	height:3em;
	width: 23em;
	background:url(../images/nautilus_bar2.jpg) no-repeat top right;
}



/* -------------------------------------- SPECS TABLE <<<---------------------------------------------- */

.specs_table tr td {
	background-color:#fff;
	padding:2px;
	border:1px solid #cccccc;
	vertical-align:top;
	color:#333333;
}

/* -------------------------------------- Unordered list for Text Container <<<------------------------ */

.text_container ul {
	list-style:disc outside;
	margin-top:10px;
}

.text_container ul li {
	margin-left:18px;
	margin-bottom:5px;
}

/* -------------------------------------- FLEX BOX <<<---------------------------------------------- */

.text_container {
	position:relative;
	/*background-image:url("../images/gradient-top-1.jpg");*/
	background-align:top center;
	background-repeat:repeat-x;
	padding:24px 20px 20px 20px;
	/*border-top:4px solid #ab1111;*/
	border-top:4px solid #999;
	margin-right:14px;
	margin-top:13px;
}

.no_top_border {
	position:relative;
	border-top:0px solid #999;
}


/* -------------------------------------- FLEX BOX <<<---------------------------------------------- */

.top {
 margin: 0; padding: 0 50px 0 0;
 background: transparent url(../images/box/shadow.gif) repeat-y right top;
}
.top h1 {
 margin: 0; padding: 50px 0 0 50px;
 background: transparent url(../images/box/shadow.gif) no-repeat left top;
 font-size: 110%;
}
.bottom {
 margin: 0; padding: 0 50px 0 0;
 background: transparent url(../images/box/shadow.gif) repeat-y right bottom;
}
.bottom p {
 margin: 0; padding: 10px 0 50px 50px;
 background: transparent url(../images/box/shadow.gif) no-repeat left bottom;
}

.flexbox h1 {
 margin: 0; padding: 50px 0 0 50px;
 font-size: 110%;
}
.flexbox p {
 margin: 0; padding: 10px 0 0 50px;
 background: transparent url(../images/box/shadow.gif) repeat-y 0 -50px;/* align left - start 50px from the top */
}
.flexbox {
 margin: 0; padding: 0 50px 0 0;
 background: transparent url(../images/box/shadow.gif) repeat-y 100% -50px;/* align right - start 50px from the top */
}

/* -------------------------------------- FORMS <<<---------------------------------------------- */

.form_left_col {
	display:block;
	width:140px;
	float:left;
	font-weight:bold;
}

/* -------------------------------------- List Cells <<<---------------------------------------------- */

.TwoColumnListCell {
	border:1px dotted #ccc;
	vertical-align:top;
}

.TwoColumnListCell .wrapper {
	text-align:center;
	padding:3px;
}

.TwoColumnListCell .wrapper a {
 text-decoration:none;
 color:blue;
 font-size:10px;
}

.TwoColumnListCell .wrapper a:hover {
 text-decoration:none;
 color:darkred;
 font-size:10px;
}

	 
/* -------------------------------------- Product / Category Grids <<<---------------------------------------------- */

.product_grid_wrapper {
	position:relative;
	text-decoration:none;
}

#outer {height: 400px; overflow: hidden; position: relative;}
#outer[id] {display: table; position: static;}

#middle {position: absolute; top: 50%;} /* for explorer only*/
#middle[id] {display: table-cell; vertical-align: middle; position: static;}

#inner {position: relative; top: -50%} /* for explorer only */
/* optional: #inner[id] {position: static;} */

.product_grid_cell_outer_wrapper {
	position:relative;
	/*display:table-cell;*/
	font-size:10px;
	height:130px;
	width:110px;
	border:1px dotted #ccc;
	margin:5px;
	padding:5px;
	float:left;
}

.product_grid_cell_inner_wrapper {
	display: table-cell;
	vertical-align: middle;
	/*position: static;
	#position: absolute;
	#top: 50%;*/
}

.product_grid_cell {
	/*position: static;
	#position: relative;
	#top: -50%;*/
	position:absolute;
	text-align:center;
	width:100px;
	padding:5px;
	bottom:0;
}

.product_grid_cell a {
	text-decoration:none;
	color:blue;
	font-size:10px;
}

	 
/* -------------------------------------- FLOATS <<<---------------------------------------------- */

.floatright {
	float:right; 
	margin: 10px 10px 10px 10px; 
}

.floatleft {
	float:left; 
	margin: 10px 10px 10px 10px; 
}

/* -------------------------------------- CLEARFIX <<<---------------------------------------------- */
/*The Holly hack for a bug in IE6 for Windows*/

.clearfix:after{
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}

.clearfix {display: inline-block;}  /*a fix for IE Mac*/

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;} 
/* End hide from IE-mac */


/* -------------------------------------- PEEKABOO <<<---------------------------------------------- */

/* Hides from IE5-mac */
* html div#menu {
	height: 1%;
} /* ------- change the sidebar to whatever div element is having the PEEKABOO Bug issue -------*/
/* End hide from IE5-mac */ /*— Holly Hack for IE 6 Peekaboo bug —*/


/* -------------------------------------- Tooltip <<<---------------------------------------------- */

#dhtmltooltip {
	position: absolute;
	left: -300px;
	width: 150px;
	border: 1px solid black;
	padding: 2px;
	background-color: lightyellow;
	visibility: hidden;
	z-index: 100;
	/*Remove below line to remove shadow. Below line should always appear last within this CSS*/
	filter: progid:DXImageTransform.Microsoft.Shadow(color=gray,direction=135);
}

#dhtmlpointer {
	position:absolute;
	left: -300px;
	z-index: 101;
	visibility: hidden;
}


/* -------------------------------------- Products <<<---------------------------------------------- */

.magnifying {
	font-size:.8em;
	padding:5px;
}

.product_logos {
	font-size:.9em;
	padding:5px 5px 0px 5px;
	text-align:right;
}