body { margin: 0; padding: 0; background-color: #c2c2c2; color: #000; font-family: verdana, futura, helvetica, 'century gothic', tahoma, 'sans serif'; font-size: 95%;  }

div#overall_top { background: #c2c2c2 url(img/bgTop.png) 0 0 no-repeat; height: 20px; margin: 10px 0 0 150px; padding: 0; width: 620px; } 
div#overall_bottom { background: #c2c2c2 url(img/bgBot.png) 0 0 no-repeat; height: 25px; margin: 0 0 0 150px; padding: 0; width: 620px; }
 
div#overall { display: inline; float: left; background: #c2c2c2 url(img/bgMid.png) 0 0 repeat-y; min-height: 500px; width: 620px; margin: 0 0 0 150px; padding: 0 0 20px 0; }
div#overall h1 { margin: 0; padding: 0; background-image: url(logo.png); background-position: 15px 0; background-repeat: no-repeat; height: 100px; width: 580px; }
div#overall h1 span { display: none; }

div#overall h2 { position: absolute; z-index: 4; top: 400px; left: 745px; margin: 0; display: block; height: 124px; width: 124px; border: none; }
div#overall h2.home { background-image: url(img/homeJo.gif); background-position: top left; background-repeat: no-repeat; } 
div#overall h2.products { background-image: url(img/productsJo.gif); background-position: top left; background-repeat: no-repeat; } 
div#overall h2.about { background-image: url(img/aboutJo.gif); background-position: top left; background-repeat: no-repeat; } 
div#overall h2.contact { background-image: url(img/contactJo.gif); background-position: top left; background-repeat: no-repeat; } 
div#overall h2.terms { background-image: url(img/termsJo.gif); background-position: top left; background-repeat: no-repeat; } 
div#overall h2.basket { background-image: url(img/basketJo.gif); background-position: top left; background-repeat: no-repeat; } 
div#overall h2.account { background-image: url(img/accountJo.gif); background-position: top left; background-repeat: no-repeat; } 

div#overall h2 span { display: none; }
div#overall h3 { font-size: 1.2em; padding: 4px; margin: 24px 0 10px 60px; width: 480px; text-transform: uppercase; text-align: center; background-color: #c2c2c2; color: #fff; text-align: center; }
div#overall h4 { padding: 2px 4px; margin: 24px 0 0 60px; width: 480px; text-align: center; background-color: #ccc; color: #666; }
div#overall p { clear: left; width: 480px; padding: 4px 4px; margin: 0 0 0 60px; font-size: 90%; text-align: center; }
div#overall table { clear: left; padding: 0; margin: 0 auto; width: 488px; text-align: center; }
div#overall th { color: #fff; padding: 4px; background-color: #c2c2c2; text-align: center; font-size: 85%; }
div#overall td { color: #333; text-align: center; background-color: #fff; font-size: 85%; }

div#overall a { color: #666; }
div#overall a:hover { color: #839f4b; }

#overall div.images { display: inline; float: left; clear: left; width: 480px; margin-left: 85px; padding-bottom: 20px; font-size: 0.9em; text-align: center; }
#overall a.catPic { display: block; float: left; margin: 5px 2px 15px 2px; height: 130px; width: 100px; text-decoration: none; padding-right: 4px; text-align: center; color: #666; font-size: 0.9em; }
#overall a.catPic:hover { color: #000; }
#overall a.catPic img { margin: 0 0 10px 0; height: 75px; border: none;  } 
#overall a.catPic:hover img {  } 

#overall a img { border: none; }
#overall input { text-align: center; margin: 0; padding: 2px;}
#overall fieldset { margin: 10px 60px; padding: 8px 4px; border: 1px solid #000; text-align: center; }
#overall fieldset legend { font-weight: bold; font-size: 100%; border: 1px solid #000; padding: 4px; }
#overall fieldset p { margin: 0 0 5px 20px; width: 450px; text-align: center; }
#overall fieldset label { clear: left; float: left; margin-top: 6px; margin-left: 20px; width:200px; display: block; font-size: 85%; }
#overall fieldset select { text-align: center; margin-bottom: 10px; border: 1px solid #000; font-size: 90%; padding: 2px; }
#overall fieldset input { float: left; clear: none; text-align: center; width: 140px; margin-bottom: 10px; border: 1px solid #000; padding: 2px;}
#overall fieldset textarea { float: left; clear: none; text-align: left; width: 145px; margin-bottom: 10px; border: 1px solid #000; background-color: #fff; }  
#overall fieldset input.submit { clear: both; width: 100px; text-align: center; float: right; margin-right: 20px; }

#overall fieldset.contact { width: 400px; text-align: center; margin: 0 auto; border: none;  } 
#overall fieldset.contact label { margin: 10px 0; text-align: center; font-weight: bold; }
#overall fieldset.contact input { padding: 2px; width: 200px; margin: 10px 0; float: none; }
#overall fieldset.contact textarea { padding: 2px; width: 200px; margin: 10px 0; float: none; }
#overall fieldset.contact input.submit { padding: 0; width: 57px; height: 57px; border: none; margin: 0 auto; float: none; }
 
#products { position: absolute; z-index: 3; top: 70px; left: 775px; width: 240px; }
#products ul { margin: 0; padding: 0; list-style: none; }
#products li { font-size: 1em; display: block; float: left; clear: left; margin: 4px 0; padding: 0; }
#products li a { text-decoration: none; color: #666; }
#products li a:hover { color: #000; }


#links { position: absolute; z-index: 3; top: 100px; left: -100px; }
#links ul { margin: 0; padding: 0; list-style: none; }
#links li { margin: 0; padding: 0; }
#links li span { display: none;  }

#links li a { display: block; position: relative; margin: 10px 0 5px 0; }
#links li a:hover { display: block; position: relative; margin: 10px 0 5px 20px; }

#links li a#but_home { width: 300px; height: 39px; background: transparent url(img/home.gif) top left no-repeat; }
#links li a#but_prod { width: 300px; height: 38px; background: transparent url(img/product.gif) top left no-repeat; }
#links li a#but_about { width: 300px; height: 51px; background: transparent url(img/about.gif) top left no-repeat; }
#links li a#but_cont { width: 300px; height: 38px; background: transparent url(img/contact.gif) top left no-repeat; }
#links li a#but_terms { width: 300px; height: 46px; background: transparent url(img/terms.gif) top left no-repeat; }

div#options { clear: left; text-align: center; background: #c2c2c2 url(img/bgMidgr.png) 0 0 repeat-y; color: #000; width: 620px; margin: 0 0 0 150px; padding: 8px 0; font-size: 80%; }
div#options a { color: #006699;}
div#options a:hover { color: #839f4b; }

div#footer { clear: left; text-align: center; background: #c2c2c2 url(img/bgMid.png) 0 0 repeat-y; width: 620px; margin: 0 0 0 150px; padding: 8px 0; font-size: 80%; }
div#footer a { color: #006699;}
div#footer a:hover { color: #839f4b; }

#basket a { position: absolute; z-index: 4; display: block; height: 75px; width: 75px; margin: 0; top: 400px; left: 40px; background: transparent url(img/basket.png) top left no-repeat; }
#basket span { display: none;}
#checkout a { position: absolute; z-index: 4; display: block; height: 75px; width: 75px; margin: 0; top: 480px; left: 40px; background: transparent url(img/check.png) top left no-repeat; }
#checkout span { display: none;}