/* Body and box-like elements */ 

html { 
	background: #001925 url(images/body_bg.gif) top center repeat-y;
	height: 100%; 
}

body {
/* crappy rendering issues in-house terminals. More investigation for detection needed. */
/*    font: normal 14px "myriad-pro-1","myriad-pro-2","Lucida Grande", "Verdana", sans-serif; */
	font: "helvetica neue", helvetica, arial, sans-serif;
    font-weight: 400;
	text-align: center;
	height: 100%;
}

#doc { 
	display: block;
	height: 100%;
	min-height: 100%;
	z-index: 0;
}

#hd {
	/* Logo and Such */
	padding: 0;
	margin: 0;
	height: 192px;
	border-left: 2px solid #356AA0;
	border-right: 2px solid #204061;
	text-align: center;
	background-image: url(images/recbanner.jpg);
	background-repeat: no-repeat;
	background-position: center top;
}

#bd {
    height: 100%
}


#wrap {
	min-height: 100%;
	height: auto !important;
	height: 100%;
	margin: 0 auto -45px; /* the bottom margin is the negative value of the footer's height */
}

#ft {
	height: 85px; 
	display: block;
	margin-top: 21px;
	clear: both;
	color: #999;
	text-align: center;
	line-height: 1.5em;
	text-shadow: 2px 2px 3px #ccc;
}

#preview {
	margin: 0 auto 0;
	padding-left: 6px;
	overflow: hidden;
}

.yui-g, .yui-gf {
	margin: 0 0 1em 0;
}

.yui-gf {
	padding: 0 0.5em;
}

.info {
	margin: 0 36px;
}

h1 {
	padding: 0;
    font-weight: bold;
	font-size: 150%;
	margin-top: 1em;
	margin-bottom: 0.5em;
}

h2 {
	padding: 0;
	font-size: 125%;
	margin-top: 1em;
	margin-bottom: 0.5em;
}


h3 {
	padding: 0;
	font-size: 110%;
	margin-top: 1em;
	margin-bottom: 0.5em;
	font-weight: bold;
}

p {
	margin-bottom: 1em;	
}

#map {
	float: left;
	display: inline;
	margin: 0 8px 10px 10px;
	border: 2px solid #ccc;
}

#map legend {
	font-weight: bold;
	text-align: center;
}

#part_search {
	float: left;
	padding: 0.5em;
	margin-bottom: 1.5em;
	color: white;
    background: transparent url(images/cssbox.png) no-repeat -40px -25px; /* pull the right image over on top of border */
    -webkit-border-radius: 7px;
	-moz-border-radius: 7px;
	border-radius: 7px;
}

/* Brand the selection */
::-moz-selection { color: #000;  background: #bdf; }
::selection      { color: #000;  background: #bdf; }


/* CSS Box */

/* set the image to use and establish the lower-right position */ 
.cssbox-a, .cssbox-b, .cssbox-c, .cssbox_body, .cssbox_head, .cssbox_head h2 {
    background: transparent url(images/cssbox.png) no-repeat bottom right;
}

.cssbox-a { 
    width: 740px !important; /* intended total box width - padding-right(next) */
    width: 725px; /* IE Win = width - padding */
    padding-right: 15px; /* the gap on the right edge of the image (not content padding) */
    margin: 20px auto; /* use to position the box */ 
} 

.cssbox-b { 
    width: 565px !important; /* intended total box width - padding-right(next) */
    width: 550px; /* IE Win = width - padding */
    padding-right: 15px; /* the gap on the right edge of the image (not content padding) */
    margin: 20px auto; /* use to position the box */ 
} 

.cssbox-c { 
    width: 235px !important; /* intended total box width - padding-right(next) */
    width: 220px; /* IE Win = width - padding */
    padding-right: 15px; /* the gap on the right edge of the image (not content padding) */
    margin: 20px auto; /* use to position the box */ 
} 

/* set the top-right image */ 
.cssbox_head { 
    background-position: top right; margin-right: -15px; /* pull the right image over on top of border */
    padding-right: 40px; /* right-image-gap + right-inside padding */ 
    text-shadow: rgba(0,0,0,.4) 0px 2px 5px; /* Safari-only, but cool */
    font-weight: bold;
} 

/* set the top-left image */ 
.cssbox_head h2 { 
    background-position: top left; 
    margin: 0; /* reset main site styles*/ 
    border: 0; /* ditto */
    font-weight: 900;
    font-size: 125%;
    line-height: 1em;
    color: white;
    text-shadow: 2px 2px 3px #000;
    padding: 24px 0px 12px 30px; /* padding-left = image gap + interior padding ... no padding-right */ 
    height: auto !important; height: 1%; /* IE Holly Hack */ 
} 

/* set the lower-left corner image */ 
.cssbox_body { 
    background-position: bottom left; 
    margin-right: 25px; /* interior-padding right */
    margin-bottom: 0px; /* reset for msie */
    padding: 15px 0 20px 40px; /* mirror .cssbox_head right/left */ 
}

.cssbox_body label {
	font-weight: bold;
	padding: 4px 4px 2px 8px;
    text-shadow: 2px 2px 3px #000;
}

.header_logo {
	float: right;
	margin-top: -10px;
	padding: 0;
}

/* img shadows */

.img-shadow {
	float:left;
	margin: 10px 0 0 10px !important;
	margin: 10px 0 0 5px;
}

.img-shadow img {
	display: block;
	position: relative;
	background-color: #fff;
	border: 1px solid #a9a9a9;
	margin: -6px 6px 6px -6px;
	padding: 0px;
	-webkit-box-shadow: 2px 2px 4px #666666;
    -moz-box-shadow: 2px 2px 4px #666666;
    box-shadow: 2px 2px 4px #666666;
}

.floatLeft,.fl
{
	float:left;
	margin-right: 18px;
}

.floatRight,.fr
{
	float:right;
	margin-left: 18px;
}

ul.imagelist {
	padding: 0;
	margin: 0;
	list-style-type: none;
	float: left;
	width: 100%;
}

ul.imagelist li { display: inline; }

ul.imagelist li a {
	float: left;
	width: 5em;
	padding: 0.2em 1em;
	text-decoration: none;
}

.fifth {
	width: 125px;
}

.fifthFloat {
    float: right; 
	width: 125px;
	margin-left: 12px;
}

.clear {
	clear: both
}

/* floating Thumbnails */

.thumbnail {
	float: left;
	width: 180px;
	border: 1px solid #999;
	margin: 0 0px 4px 4px;
	padding: 4px;
	font-size: xx-small;
	color: #666666;
	font-family: Arial, Helvetica, sans-serif;
	text-align: center;
	font-weight: bold;
}

.thumbnail:hover {
	border: 1px solid #000;
	color: #000000;
	background-color: #066;
}

.clearboth { clear: both; }

/* Images */
a img {
	border-width: 0px !important;	
}

a {
	text-decoration: none;
}

a:link, a:visited {
	color: #066;
}

a:hover {
	color: #333333;
	text-decoration: underline;
}

/* Navigation */

#navlist {
	margin: 0 auto 2em auto;
	padding: 170px 0 20px 160px;
	border-bottom: 2px solid #000;
}

#navlist ul, #navlist li {
	margin: 0;
	padding: 0;
	display: inline;
	list-style-type: none;
}

#navlist a:link, #navlist a:visited {
	float: left;
	line-height: 14px;
	font-weight: 700;
	padding: 4px 8px;
	margin: 0 4px 8px 4px;
	text-decoration: none;
	color: #fff;
}

#new #navlist #nav_new a, 
#catalog #navlist #nav_catalog a, 
#order #navlist #nav_order a, 
#contact #navlist #nav_contact a, 
#suppliers #navlist #nav_suppliers a,
#store #navlist #nav_store a, 
#navlist a:hover {
	border-bottom: 4px solid #000;
	padding: 4px 8px;
	margin-bottom: -4px;
    background: #444;
    background-color: rgba(0, 0, 0, 0.4);
	color: #fff;
}

#navlist a:hover {
    background-color: rgba(255, 196, 0, 0.6);
}

#navlist a:link#prev, #navlist a:link#next, a:visited#prev, #navlist a:visited#next {
	float: right;
	padding-bottom: 2px;
}

/* Category List */

#catlist {
padding: 0 1px 1px;
margin-left: 0;
font: normal 10px Verdana, sans-serif;
background: gray;
width: 100%;
}

#catlist li {
list-style: none;
margin: 0;
border-top: 1px solid gray;
text-align: left;
}

#catlist li a {
display: block;
padding: 0.25em 0.5em 0.25em 0.75em;
border-left: 1em solid #AAB;
background: #ccccdd;
text-decoration: none;
}

#catlist li#active a {
border-left-color: red;
border-left: 1em solid;
font: bold 10px Verdana, sans-serif;
}

#catlist li.subcat a {
font: normal 10px Verdana, sans-serif;
border-left: 1em solid #FFF;
background: #CCC;
}

#catlist li a:link { color: #448; }
#catlist li a:visited { color: #667; }

#catlist li a:hover {
border-color: #FE3;
color: #FFF;
background: #332;
}

#searchForm {
	margin-bottom: 1em;
	padding: 0px;
}

#searchForm form {
	background: url(menu/search_box.png) top left no-repeat;
	padding: 0px;
	height: 24px;
	width: 276px;
}

#searchForm form input.searchText {
	margin-left: 80px;
	margin-top: 2px;
	width: 162px;
}

#searchForm form input.searchButton {
	margin-left: 2px;
	margin-top: 0px;
	float: right;
}

.logo {
	text-align: center;
	vertical-align: middle;
}

.logo h2 {
	margin: 0;
}

table.aform th, table.aform td, table.catalog td {
	text-align: left;
}

table.suppliers { margin: 0 auto 0 auto; }

table.suppliers td {
	text-align: center;
}

table.suppliers h2 { margin: 0; padding: 0}
table.suppliers img { margin: 0 0 6px 0; }

table.catlinks {
	margin: 0 auto 0 auto;
}


table.catlinks td {
	padding: 1em;
	border: none;
}

.tableFooter {
	margin-top: 1em;
}

a.supplier {
	font-size: 7pt;
	text-decoration: underline;
}

.small {
	font-size: 7pt;
}

.red {
	color: red;
	font-size: 93%;
}

table.fancy {
	margin-bottom: 1em;
}

ul.fancy {
	list-style-position: outside;
	list-style-type: disc;
	margin-top: 0.5em;
	margin-bottom: 1em;
}

ul.fancy li {
	border-spacing: 0px 4px;
	padding:0 0 0 16px;
	background:url(images/dot.gif) 0px 4px no-repeat;
}

table.fancy td, table.fancy th {
	border-color: #666;
	border-width: 1px;
	border-style: solid;
	padding-left: 6px;
	padding-bottom: 2px;
	padding-right: 6px;
	padding-top: 2px;
}

table.fancy th {
	color: white;
    background: transparent url(images/cssbox.png) no-repeat -40px -25px; /* pull the right image over on top of border */
	font-weight: bold;
    text-shadow: 2px 2px 3px #000;
}

table.fancy td {
	background: white;
}

.float_right {
	float: right;
}

.align_center {
	text-align: center;
}

/* The CSS Code for the menu starts here */
#menu {
	font-family: Arial, sans-serif;
	font-weight: bold;
	text-transform: uppercase;
	padding: 0 0 0 10px;
	list-style-type: none;
	font-size: 13px;
	background: #eee;
	height: 40px;
	border-top: 2px solid #eee;
	border-left: 2px solid #eee;
	border-bottom: 2px solid #ccc;
	border-right: 2px solid #ccc;
}
#menu li {
	float: left;
	margin: 0;
	
}
#menu li a {
	text-decoration: none;
	display: block;
	padding: 0 20px;
	line-height: 40px;
	color: #666;
}
#menu li a:hover, #menu li.active a {
	background-color: #f5f5f5;
	border-bottom: 2px solid #DDD;
	color: #999;
}

/* Black Menu */
#menu.black {
	border-top: 2px solid #333;
	border-left: 2px solid #333;
	border-bottom: 2px solid #000;
	border-right: 2px solid #000;
	background: #333;}
#menu.black a {color: #CCC;}
#menu.black li a:hover, #menu.black li.active a {color: #999; background: #555; border-bottom: 2px solid #444;}


/* Blue Menu */
#menu.blue {
	border-top: 2px solid #356AA0;
	border-left: 2px solid #356AA0;
	border-bottom: 2px solid #204061;
	border-right: 2px solid #204061;
	background: #356AA0;}
#menu.blue a {color: #fff;}
#menu.blue li a:hover, #menu.blue li.active a {color: #90CDFF; background: #3D7BBB; border-bottom: 2px solid #356AA0;}