/* Multivits CSS - Author: Paul Arnold

Tips on making the Stylesheet as compliant as possible 

- Use relative (scalable) units (em, %, keyword) rather than fixed units (px, in, cm)
	This helps browsers to resize text. If possible use em

- Use fallback fonts in case the browser does not support your chosen font
	eg: "font-family: Verdana, Arial, Helvetica, sans-serif"

- For proper screen-reader compliance keep background and text colours as contrasting as possible

- Use CSS to layout pages as much as possible as using HTML based laout (tables etc) can confuse screen readers

To validate your CSS go to http://jigsaw.w3.org/css-validator/

*/

/* 
Global Properties - this will set the margins and padding of everything on the page to 0. Not essential but gives you more control over your layout.
The Font-Size Property here fixes an IE bug regarding relative font-sizes. In the same way, Line-Height keeps the gap between lines consistent.
*/

* { margin: 0; padding: 0; font-family: Verdana, Arial, Helvetica, sans-serif;}
img { border: 0;}
h2 { color: #00498D; font-size: 1.1em; margin-bottom: 10px;}
/* h2 { margin-bottom: 9px; color: #00498D;} */
h3 { margin-bottom: 9px; color: #666; font-size: 0.8em;}
h4 { color: #999999; font-size: 0.8em; margin-bottom: 10px;}
li { color: #333; margin-left: 10px;}
ul { color: #333; font-size: 0.8em; margin-left: 10px;}
p { margin-bottom: 8px; line-height: 1.1em;}
hr { margin: 7px 0;}
.submit { background: url(../images/send-butt.jpg) no-repeat; width: 60px; height: 24px; border: 0;}

/* Fonts */
a:link { color: #00498D; text-decoration: none;}
a:visited { color: #00498D; text-decoration: none;}
a:hover { color: #999; text-decoration: none;}
a:active { color: #00498D; text-decoration: none;}
a.active:link { color: #000;}
a.active:visited { color: #000;}
a.active:hover { color: #00498D;}
a.active:active { color: #000;}

/* Main Divs */
#leftcol { width: 189px; float: left;}
#maincol { float: left; padding: 0 8px; width: 565px; text-align: left; border-left: dashed #CCC 1px; border-right: dashed #CCC 1px; min-height: 470px;}
#rightcol { float: right; width: 160px;}
#footer { clear: both; border-top: dashed 1px #CCC; font-size: 0.6em; padding-top: 10px;}

/* Header H! and Image */
#headerdiv h1 { margin: 0; padding: 0;}
#headerdiv h1 a { position: relative; width: 950px; height: 108px; display: block;}
#headerdiv h1 a span { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url(../images/header.jpg) top left no-repeat; cursor: pointer;}
#headerdiv h1 a span img { display: none;}

#homeflash { height: 220px; background: url(../images/grass.jpg) repeat-x;}

/* Top Menu */
#nav { height: 34px; background: url(../images/nav-bg.jpg) repeat-x; border-bottom: 4px solid #903; margin-bottom: 10px;}
.navlink { float: left; border-right: #666 2px groove; padding: 10px 20px; height: 14px; vertical-align: middle; font-size: 0.7em;}

#header { margin-bottom: 10px;}
.welcome { float: right; padding: 10px 20px; height: 15px; vertical-align: middle; font-size: 0.7em; text-align: center;}
.logoutdiv { float: right; padding: 10px 20px; height: 14px; vertical-align: middle; font-size: 0.7em; text-align: center; border-left: #666 2px groove;}
.logoutdiv a:link { color: #333;}
.logoutdiv a:visited { color: #333;}
.logoutdiv a:hover { color: #666;}
.logoutdiv a:link { color: #333;}
#logoutlink { float: right; color: #CCC; padding: 10px 20px; height: 14px; vertical-align: middle; font-size: 0.7em;}
.butttext { font-size: 1.1em; font-weight: bold;}
.rightbuttouter { width: 148px; height: 25px; padding-bottom: 7px; margin-bottom: 7px; border-bottom: dashed 1px #CCC; float: right; font-size: 0.8em;}
.leftbuttouter { width: 180px; border-top: dashed 1px #CCC;}
.leftbutt { margin: 4px 0; width: 180px; height: 36px; text-align: center; padding-top: 12px;}
.cattitle { font-size: 1.2em; width: 570px; text-align: left; border-bottom: dashed 1px #CCC; font-weight: bold;}
.maincontwidth { width: 570px;}
.prodimg { width: 230px; float: left; border-right: dashed 1px #CCC;}
.purchaseoptions { float: left; padding: 50px 0 0 10px; width: 320px;}
.productinfo { font-size: 0.7em; color: #666; text-align: left; margin-top: 10px; display: block;}
.productinfohidden { font-size: 0.7em; color: #666; text-align: left; margin-top: 10px; display: none;}
.subsection { width: 570px; height: 26px; clear: both; margin-top: 15px; color: #Cf0F3F; text-align: left; font-size: 1.0em; font-weight: bold; vertical-align: middle;}
.subsection-left { float: left; width: 13px; height: 26px; background: url(../images/subsect-left.gif) no-repeat;}
.subsection-right { float: left; width: 13px; height: 26px; background: url(../images/subsect-right.gif) no-repeat;}
.subsection-main { float: left; width: 544px; height: 26px; background: url(../images/subsect-bg.gif) repeat-x; float: left; padding-top: 3px;}
.offer { width: 310px; height: 26px; clear: both; margin: 0 auto; border-bottom: dotted #CCC 1px; margin-bottom: 10px; color: #FFF; text-align: center; font-size: 0.9em; font-weight: bold; vertical-align: middle;}
.offer-left { float: left; width: 12px; height: 23px; background: url(../images/offer-left.gif) no-repeat;}
.offer-right { float: left; width: 12px; height: 23px; background: url(../images/offer-right.gif) no-repeat;}
.offer-main { float: left; width: 286px; height: 23px; background: url(../images/offer-mid.gif) repeat-x; float: left; padding-top: 3px;}
.relatedproducts { width: 570px; margin-top: 10px;}
.relatedproduct { width: 140px; float: left; text-align: center; color: #666; font-size: 0.7em; margin-top: 10px; border-top: dashed 1px #CCC;}
.toplisthead { width: 148px; font-size: 0.8em; background: url(../images/happy.jpg) right no-repeat; height: 55px; border-bottom: dashed 1px #CCC; color: #000; font-size: 0.8em; font-weight: bold; margin-bottom: 10px;}
.toplist { width: 148px; font-size: 0.7em; font-weight: bold;}
.toplist a:link { color: #00498D;}
.toplist a:visited { color: #00498D;}
.toplist a:hover { color: #000;}
.toplist a:active { color: #00498D;}
.quickselect { width: 180px; height: 60px; background: url(../images/grey-bg.gif) no-repeat 0 10px; float: left; padding-top: 10px; padding-bottom: 10px; border-top: dashed 1px #CCC; text-align: center;}
#armasig { float: right; text-align: right;}
#armasig a:hover { color: #999;}
#footlinks { float: left;}
#footlinks a:hover { color: #666;}

/* Div Styling */
.floatleft { float: left;}
.floatright { float: right;}
.fullwidth { width: 950px;}
#maincontent { width: 570px; margin: 20px 0 auto 0; text-align: left;}
.topmargin { margin-top: 20px;}
.centerdiv { margin-left: auto; margin-right: auto;}
.clear { clear: both;}
.navy { color: #00498D;}
.bigpara { padding-bottom: 10px; color: #333; font-size: 0.8em; /*@font-size: 0.7em;*/}
.smpara { color: #666; font-size: 0.7em;}

/* Links */
.navlink a:link { color: #333; text-decoration: none;}
.navlink a:visited { color: #333;}
.navlink a:hover { color: #666;}
.navlink a:active { color: #333;}
.whitelink a:link { color: #FFF;}
.whitelink a:visited { color: #FFF;}
.whitelink a:hover { color: #000;}
.whitelink a:active { color: #FFF;}

/* Input Buttons */
.input { float: left; font-size: 0.8em;}
.logininput { border: 0; background: url(../images/input-bg.png) repeat-x; float: left; padding-top: 1px;}
.inputleft { width: 6px; height: 15px; background: url(../images/input-left.png) no-repeat; float: left; border: 0; /*@margin-right: -2px;*/}
.inputright { width: 6px; height: 15px; background: url(../images/input-right.png) no-repeat; float: left;}
.inputbutt { width: 6px; height: 15px; float: left;}

/* Mouseovers */
.displace { position: absolute; left: -5000px;}

a.red-footer { display: block; width: 180px; height: 18px; text-decoration: none; background: url(../images/red-footer.gif);}
a.red-footer:hover { background-position: -180px 0;}

a.quick-butt { display: block; margin: 0 auto; margin-top: 8px; width: 100px; height: 16px; text-decoration: none; background: url(../images/quick-butt.png);}
a.quick-butt:hover { background-position: -100px 0;}

a.login-butt { display: block; width: 148px; height: 24px; text-decoration: none; background: url(../images/login-butt.gif);}
a.login-butt:hover { background-position: -148px 0;}

a.new-cust-butt { display: block; width: 148px; height: 24px; text-decoration: none; background: url(../images/new-cust-butt.gif);}
a.new-cust-butt:hover { background-position: -148px 0;}

a.pass-butt { display: block; width: 148px; height: 24px; text-decoration: none; background: url(../images/pass-butt.gif);}
a.pass-butt:hover { background-position: -148px 0;}

a.more-info { display: block; width: 130px; height: 21px; text-decoration: none; background: url(../images/more-info.gif);}
a.more-info:hover { background-position: -130px 0;}

a.currency-butt { display: block; width: 177px; height: 29px; text-decoration: none; background: url(../images/currency-butt.gif);}
a.currency-butt:hover { background-position: -177px 0;}

a.checkout-butt { display: block; width: 177px; height: 29px; text-decoration: none; background: url(../images/checkout-butt.gif);}
a.checkout-butt:hover { background-position: -177px 0;}

a.buynow-purple { display: block; width: 86px; height: 23px; text-decoration: none; background: url(../images/buynow-purple.gif);}
a.buynow-purple:hover { background-position: -86px 0;}

a.fulldet-butt { display: block; width: 185px; height: 30px; text-decoration: none; background: url(../images/fulldet-butt.gif);}
a.fulldet-butt:hover { background-position: -185px 0;}

a.friend { display: block; width: 185px; height: 32px; text-decoration: none; background: url(../images/friend.gif);}
a.friend:hover { background-position: -185px 0;}