@charset UTF-8;



/*----------This is the content wrapper. The wrapper is floated left to accomodate all of the stetching content it contains. Width is set on the floated wrapper so that it fills the appropriate space.  The position is set to relative in order to set any of it's children to relative.----------*/

#wrapper { width: 920px; float: left; margin-top:-5px; position:relative;}

/*----------This styles the inside of the wrapper, the wrapperHeader contains the top image, the wrapperMiddle contains the repeating y axis image and wrapperBottom has the bottom closing image.
The wrapperMiddle is floated left and a width set. By setting a width that matches the body, the individual floated div will still occupy the normal document flow.
The div has been floated to accomodate the expanding wrapperMiddle's content. The wrapperBottom needs to clear the float above it, so it has a clear:both set to bring it back into the normal document flow. There is a slight 1-3 pixel gap I can fix it with a negative bottom margin in Mozilla but in IE 6 and 7 it doesn't work?? wrapperBottom is set to position relative so that it's child div.subnav can be absolutly positioned inside it.----------*/

#wrapperHeader { display: block; background: url(/images-new/backrounds/top.jpg) no-repeat -10px top; height:50px; }
#wrapperMiddle { background: url(/images-new/backrounds/rotate_object_center.jpg) repeat-y -10px 0; float: left; width: 100%; }
#wrapperBottom { background: url(/images-new/backrounds/bottom.jpg) repeat-y -10px top; height:158px; padding:0 5%; clear:both; position:relative;}

/*----------This is for the wrapperHeader. This will need to be for the product page templates that have larger headers. ----------*/

#wrapperHeader h1, #wrapperHeader h2  {}

/*----------This is the div.subnav nested in the wrapperBottom it has been absolutly positioned inside. ----------*/

#wrapperBottom div.subnav { position:absolute; left: 275px; top: 74px; }
#wrapperBottom div.subnav span { padding:0 10px;}

/*----------This is for the main two column template. Both have been floated and widths set to a percentage, so if the parent element is resized they will accomodate the change. ----------*/

#wrapperMiddle div#colLeft { width:52%; padding-right:10px; float: left; }
#wrapperMiddle div#colRight { width:41%; margin-left:10px; float: left; }

/*----------This ensures that any div in the div#colRight will have an em based bottom margin (this will allow the divs to expand without overlapping the content the follows it in the document flow. ----------*/

#wrapperMiddle div#colRight div { margin-bottom:3em; }



/*----------These are older styles-leave these just in case. This styles the product page templates too. ----------*/

div.container_500t { border-right:1px solid #CCCCCC; margin:0; padding:0; background:#FAFAFA; width:461px;}
div.container_500  {width: 440px; clear: both; margin:0; margin-top:35px; padding-right:21px; }

div.right { border-right:1px solid #CCCCCC; position:absolute; top:57px; right:170px; width: 472px; height: 613px; }

.static-links #currentpage a {color: #000; border-style: none;} 
.static-links span {float: left;} 
.static-links a, #static-links span {color: #999999; border-style: none;}
.static-links a:visited {color: #999999;}
.static-links a:hover {color: #477FC9;}

div.container_500t div p.static-links  { border-top:medium solid #3c7cd9; width:440px; margin-top:0;}
div.container_500t div p.static-links a {font-weight:bold;color: #3c7cd9; text-decoration:none;}
div.container_500t div p.static-links> span:first-child {margin-left:-5px;}
div.container_500t div p.static-links span a {padding:0 5px;}