body {background: #ddd; padding-bottom: 10px;}
p {margin: 1em; font: 700 16px sans-serif; line-height: 1.1em}

#outerwrapper {width: 1000px; position: relative; margin: 15px auto; padding-bottom: 40px;}
#innerwrapper {width: 1000px; float: left; position:; relative; background: #fff; border-radius: 10px; margin-bottom: 15px; padding-bottom: 10px;}

#header, #subhead, #hpMain, #main, #positive {float: left; position: relative; width: 100%;}

#header {overflow: visible; border-bottom: 17px solid black;}
#logo {float: left; margin: 20px 5px 10px 14px;}

#subhead {border: solid #fff; border-width: 5px 0 0 0;}
#subhead img {float: left; border: 10px solid #000; border-width: 7px 0;}


#nav {position: absolute; bottom: 10px; left: 140px; list-style: none;}
#nav li {float: left; margin: 0 7px;}
#nav li, #nav a, #nav a:visited, #hpMain div, #main div, #subnav a {font: 900 14px sans-serif; color: #888; text-transform: uppercase; text-decoration: none;}
body#men #navMen, body#women #navWomen, body#groms #navGroms, body#story #navStory, body#contact #navContact {border-bottom: 2px solid #006aa8;}
#nav a:hover {border-bottom: 2px solid #c00;}

#hpMain, #main {background: transparent url(../images/bkg_bottom.png) 0 100% no-repeat; padding-top: 20px;}
#hpMain h2, #main h2 {font-size: 20px; text-align: center;}

.graybox a {display: block; width: 100%; height: 100%;}

/* Home page */
#hpMain .category {width: 278px; height: 336px; float: left; margin: 14px 0 0 40px;}
#hpMain .graybox {width: 250px; height: 290px; position: relative; background: rgba(227, 228, 230, 0.7); border: 9px solid #b4b5b7; border-radius: 35px; box-shadow: 10px 15px 30px #ccc;}
#hpMain .graybox img {width: 250px; height: 290px;}

#categories h2 {font-size: 20px;}
#hpMen {margin-left: 30px;}
#positive {width: 100%; margin: 0px 0;}
#positive img {float: right;}
#plus {margin-right: 5px;}
#allThings {position: relative; top: 60px; right: 50px;}

/* Product pages */
#subnav, .category {margin-top: 24px}
#subnav {display: block; height: 125px; float: left; position: relative; margin-right: 20px; list-style: none; background: url(../images/bkg_subnav.png) 0 0 repeat-y;}
#subnav li {padding-left: 40px; margin-top: 2px;}
#subnav a {display: block; padding: 4px 10px 5px 20px;}
body#men #subnavMen, body#women #subnavWomen, body#groms #subnavGroms {background: #00B5E5;}
body#men #subnavMen a, body#women #subnavWomen a, body#groms #subnavGroms a, #subnav li:hover a {color: #fff;}
#subnav li:hover {background: #c00;}
#subnav #hpGroms {height: 100%;}

#products {margin-top: 25px;}
#products form {display: inline;}
/*
.category {width: 200px; height: 275px; float: left; margin-left: 57px;}
.graybox {width: 200px; height: 236px; position: relative; background: rgba(227, 228, 230, 0.7); border: 5px solid #b4b5b7; border-radius: 35px; box-shadow: 10px 15px 30px #ccc;}
*/
.item {position: relative; width: 240px; height: 280px; float: left; margin: 0 0 60px 35px; text-align: center; vertical-align: center;}
.graybox {position: relative; width: 235px; height: 270px; background: rgba(227, 228, 230, 0.7); border: 5px solid #b4b5b7; border-radius: 15px; box-shadow: 10px 15px 30px #ccc; overflow: hidden;}
.graybox img {position: relative; /* width: 200px; height: 236px; */ }
#main .graybox img:hover {right: 50%; bottom: 57%; width: 210%; height: 210%;}
input[type=image] {position: relative; top: 5px; padding-top: 3px;} 
select {margin-top: -10px;}

/* Layers */
#overlay {width: 1000px; height: 800px; position: absolute; z-index: 5; top: 0; right: 0; opacity: 0.9; background: url(../images/bkg_middle.png) 100% 30px no-repeat;} 
#subhead {z-index: 1;}
.graybox {z-index: 9;}
.cart {position: relative; z-index: 10; top: 5px; color: #000;}
#header, #subnav, #positive {z-index: 10;}
#hpMain, #main {z-index: 6;}
/* Debug */