/* -------------------------------------------------------------- 
	Resets default browser CSS
	http://meyerweb.com/eric/tools/css/reset/
-------------------------------------------------------------- */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
}

ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}

/* remember to define focus styles! */
:focus {
	outline: 0;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* Alisa: so the centered page wouldn't shift if the content is shorter than viewport */
html {
	overflow: scroll;
}

/* -------------------------------------------------------------- 
   typography
-------------------------------------------------------------- */
body {
	font-size: 62.5%; 
	font-family: Arial, Helvetica, Verdana, sans-serif;  

	color: #333333; 
}

h2, h3, h4, h5, h6, p {margin: 0px 15px 15px 15px;}
h2 {font-size: 1.4em; }
h3 {font-size: 1.2em; margin-bottom: 10px;}
h4 {font-size: 1.2em; margin-bottom: 0;}
h5 {font-size: 1.1em;}
h6 {font-size: 1em;}
p, ol, ul, dl, table {font-size: 1.1em; }
ol p, ul p, dl p, fieldset p {font-size: inherit; margin: 0;} 
table p {font-size: 1em;}
ol, ul, dl {margin: 0px 15px 15px 35px;}

img {margin: 0px 15px 15px 15px;}
img {vertical-align: bottom;}
p img {float: left; margin-left: 0;}
h1 img, h2 img, h3 img, h4 img {margin: 0;}


ul {list-style-type: disc;}
ol {list-style-type: decimal;}
li {margin-bottom: 5px;}
dt {font-weight: bold;}

a {color:#333; text-decoration: none;}
a:focus, a:hover {text-decoration: underline;}
strong {font-weight: bold;}
em {font-style: italic;}

/* -------------------------------------------------------------- 
 Some default classes
-------------------------------------------------------------- */
.top {margin-top:20px;}
.bottom {margin-bottom:0; padding-bottom:0;}
.clear {clear: both;}
.left {float: left;}
.right {float: right;}
.center {text-align: center;}
.padding {padding-top: 20px;}
.smpadding {padding-top: 10px;}
.small {font-size: .9em;}
.hide {
	position:absolute;
	left:-9990px;
	top:0px;
	width:1px;
	height:1px;
	overflow:hidden;
}
.invisible {
	visibility: hidden;
}
.divider {
	border-bottom: 2px solid #333333;
	height: 1px;
	clear: both;
	margin-top: 15px;
	margin-bottom: 15px;
}
.column {
	float: left;
	width: 45%;
}

/* --------------------------------------------------------------  
	=Layout 
-------------------------------------------------------------- */
body {
	background: url(../images/bg_full.jpg) top center no-repeat;
}	

.container {
	/*background: url(../images/bg.jpg) no-repeat -150px -150px;
	background: url(../images/tommy.jpg) no-repeat;
	background: url(../images/bg_full.jpg) top center no-repeat;*/
}

.contentwrap {
	width: 960px;
	margin: 0 auto;
}

.content {	
	margin-bottom: 25px;
	width: 805px;
	float: right;
}

.maincontent {
	width: 640px;
	float: left;
	min-height: 135px;
}

.sidecontent {
	float: right;
	width: 160px;
}

.sidenav {
	width: 150px;
	float: left;
}

/* =header 
-------------------------------------------------------------- */
.headerwrap {
	width: 100%;
	background: url(../images/header_div.gif) repeat-x left bottom;
	margin-bottom: 3px;
	min-height: 47px;
	_height: 47px;
}
.header {margin: 0 auto; width: 950px;
	font-size: .9em;}
.logo {margin: 10px 0 7px 0px; float: left;}
.logo img {margin: 0;}

/* topsearch */
.topsearch {
	float: left;
	display: inline;
	margin-left: 220px;
	margin-top: 11px;
}

.topsearchloggedin {
	float: left;
	display: inline;
	margin-left: 220px;
	margin-top: 11px;
}

.topsearch fieldset, .topsearchloggedin fieldset {
	float: left;
	display: inline;
	margin: 0;
	font-weight: bold;
}

.topsearch .label, .topsearchloggedin .label {
	width: auto;
	font-size: 1.1em;
}

.topsearch .text, .topsearchloggedin .text {
	width: 85px;
}

/* utility nav */
.utilitynav {
	float: right;
	margin: 12px 0 0 0;
}

.utilitynav li {
	list-style: none;
	float: left;
	margin: 0 0 0 8px;
	font-weight: bold;

}

.utilitynav a {
	color: #333333;
}


/* =nav 
-------------------------------------------------------------- */
#navwrap {
	clear: both;
	margin: 0 auto;
	width: 960px;
	position: relative;
	z-index: 110;
}
#nav {
	margin: 0px 0 10px 0;
	font-weight: bold;
	position: relative;
	float: left;
	width: 100%;
}
#nav li {
	float:left; 
	list-style: none;
	padding-right: 16px;
}
#nav li a {color: #333333;}

/* =drop-down sub nav 
-------------------------------------------------------------- */
#nav li .subnav {
	position: absolute;
	top: 12px;
	margin-left: 0;
	line-height: normal;
	text-align: left;
	z-index: 100;
	font-size: .9em;
	margin: 0;
	background: url(../images/top_subnav_bg.png) left top no-repeat;
	_background: url(../images/top_subnav_bg.gif) left top no-repeat;
	padding: 5px 0 0px 0;
}

#nav li .subnav li.last{
	background: url(../images/top_subnav_bg.png) left bottom no-repeat;
	_background: url(../images/top_subnav_bg.gif) left bottom no-repeat;
	padding-bottom: 8px;
	margin-bottom: -10px;
	width: 100%;
}

#nav li#nav1 .subnav {left: -10px;}
#nav li#nav2 .subnav {left: 50px;}
#nav li#nav3 .subnav {left: 145px; width: 131px;}
#nav li#nav4 .subnav {left: 300px;}

#nav li .subnav li {
	float: left;
	clear: both;
	padding-right: 0;
}

#nav li .subnav a {
	font-size: .9em;
	color: #fff;
	display: block;
	margin-left: 4px;
	padding-left: 8px;
	width: 120px;
	height: 11px;
	line-height: 1;
	
}

#nav li .subnav a:hover {
	color: #fff;
	background: url(../images/link_on.gif) no-repeat;
	text-decoration: none;
}

#nav li .subnav .current a {background: #e61638;}

#nav li .subnav {display: none;}
#nav li:hover .subnav, #nav li.over .subnav {display: block;}



/* =footer
-------------------------------------------------------------- */

.footer {
	clear: both;
	color: #999;
	margin: 0 auto;
	width: 960px;
	margin-bottom: 50px;
}

.footer p {
	margin: 0;
	font-size: .9em;
}

.footer .links {
	float: left;
}

.footer .copyright {
	float: right;
}

.footer a {
	color: #999;
	margin-right: 1px;
	margin-left: 1px;
}

/* -------------------------------------------------------------- 
 =forms
-------------------------------------------------------------- */
form fieldset {margin: 0px 0px 10px 15px;}

legend, .legend {
	font-size: 1.1em;
	font-weight: bold;
	text-transform: uppercase;
	margin-bottom: 0;
	margin-right: 0;
}

legend {
	*margin-left: -7px;
}

form fieldset.submit {margin-top: 0;}

form ol {margin: 0;}

form li {
	margin-bottom: 5px; 
	list-style: none;
}

label {
	font-size: 1em;
}

li label {
	font-size: .9em;
}

.label {
	display: block; 
	float: left; 
	padding-right: 3px; 
	width: 95px;
	text-align: right;
}

input.text, select, textarea {
	border: 1px solid #000;
	color: #000000;
	font-size: 1em;
}

input.text, .select, .textarea {width: 220px;}
input.largetext, .largeselect, .largetextarea {width: 250px;}
input.mediumtext, .mediumselect, .mediumtextarea {width: 100px; height: 12px;}
input.smalltext, .smallselect {width: 100px;}
input.tinytext {width: 20px;}

.auto {
	width: auto;
}
.altlabel {
	padding-left: 2px;
	padding-right: 0px;
}

.textarea {height: 50px;}

input.button {padding: 0; margin-left: 100px;}

form p.note, form li.note {margin-left: 115px; font-size: .9em;}


span.note {
	text-transform: uppercase;
	font-size: .8em;
}

form .options {
	width: 30%;
	margin-left: 30px;
	overflow: hidden;
}

form .options li {
	float: left;
	margin-right: 10px;
	display: inline;
}

.checkbox, .radio {margin: 0 3px -2px 0;}

label.checkboxlabel, label.radiolabel {

}

div.errormsg {	
	color: #e51836;
	text-transform: uppercase;
	font-weight: bold;
	line-height: 1;
	width: 250px;
	float: right;
	margin-top: -40px;
}

div.errormsg2 {
	margin-top: -60px;
}

/* -------------------------------------------------------------- 
 =tables
-------------------------------------------------------------- */
table {
	margin: 10px 15px;
	text-align: center;
}

caption {
	font-size: .9em;
	padding-bottom: 5px;
	margin: 10px 0px;
	text-align: left;
}

th {
	font-size: 1.2em;
	padding: 5px;
}

td {
	line-height: normal;
	padding: 5px;
	vertical-align: middle;
}

.heading {
	text-align: left;
}

tr.alt td {
	background: #CCCCCC;
}

/* -------------------------------------------------------------- 
	=Elements 
-------------------------------------------------------------- */
/* box */
.box {
	background: #c8c9cb url(../images/main_content_bg.gif) left bottom no-repeat;
	margin-top: 7px;
	min-height: 135px;
	padding-bottom: 1px;
	clear: left;
	margin-bottom: 15px;
	width: 640px;
	float: left;
}
.box h2.head {
	background: url(../images/main_content_top.gif) left top no-repeat;
	margin: -7px 0 5px 0;
	padding: 7px 0 0px 15px;
	position: relative;
} 

h2.head {
	text-transform: uppercase;
	font-size: 2.5em;
}

h2.cathead {font-size: 1.5em;}
.box .inner {
	background: #fff url(../images/inner_content_top.gif) no-repeat;
	padding-top: 11px;
	margin-left: 15px;
	width: 610px;
	padding-bottom: 1px;
	overflow: hidden;
}

.box .bottom {
	background: #fff url(../images/inner_content.gif) left bottom no-repeat;
	margin-left: 15px;
	width: 610px;
	height: 20px;
	margin-bottom: 20px;
}

.subhead {
	text-transform: uppercase;
	margin-bottom: 3px;
	margin-right: 0;
}
.list {
	color: #ea5362;
	line-height: 1;
}

.list a {
	color: #ea5362;
}

.indent {
	margin-left: 30px;
}

.box form {
	margin-top: 20px;
}

/* sidenav */
.sidenav {
	height: 731px;
	background: url(../images/left_nav.gif) left bottom no-repeat;
}
.sidenav h2.head {
	background: url(../images/left_nav.gif) left top no-repeat;
	margin: 0 0 13px 0;
	padding: 9px 0 0px 8px;
} 
.sidenav p, .sidenav ul {
	margin: 0 0 10px 8px;
	color: #fff;	
}
.sidenav li {
	list-style: none;
	text-transform: uppercase;
	margin-bottom: 0;
	font-size: .9em;
}
.sidenav a {
	color: #fff;
}

.sidenav li ul {
	margin-bottom: 0;
}
.sidenav li li {
	text-transform: none;
}

.sidenav li li li {
	padding-left: 8px;
}


.sidenav li.current {
	background: url(../images/sidenav_on.gif) left top no-repeat;
	color: #000;
}
.sidenav li.current a {
	color: #000;
}

.sidenav li.currentlong {
	background: url(../images/sidenav_on_long.gif) left top no-repeat;
	color: #000;
}
.sidenav li.currentlong a {
	color: #000;
}



/* sidecontent */
.sidecontent img {
	margin: 0 0 15px 0;
}

/* item list -- use either a list or table*/
.itemlist {
	margin-left: 15px;
	margin-right: 0;
}
.itemlist li {
	list-style: none;
	float: left;
	margin-right: 25px;
	background: url(../images/pic_bg.gif) left top no-repeat;
	display: inline;
}

.item {
	list-style: none;
	background: url(../images/pic_bg.gif) left top no-repeat;
	text-align: center;
}

.itemlist td {
	padding: 0 25px 10px 0;
}
div.item {
	float: left;
	padding: 0;
	margin-right: 5px;
	display: inline;
}

.item img {
	padding: 5px 9px;
	margin: 0;
	background: url(../images/pic_bottom.gif) left bottom no-repeat;
}

.itemcaption td {
	vertical-align: top;
}

.itemcaption p {
	background: url(../images/pic_bg.gif) left bottom no-repeat;
	padding-bottom: 2px;
	text-transform: uppercase;
	text-align: center;
	letter-spacing: -1px;
	font: bold 1em Verdana, Arial, Helvetica, sans-serif;
	min-height: 17px;
	_height: 17px;
	margin: 0;
}

.itemcaption img {
	background: none;
	padding: 7px;
}

dl {
	margin-left: 15px;
	margin-right: 0;
}

dl.column {
	width: 40%;
	display: inline;
}

dt {
	margin-top: 15px;
	margin-bottom: 5px;
}
dd {
	margin-left: 8px;
}



/* END 'GLOBAL' STYLES
-------------------------------------------------------------- */






/* login popup */
div.login-pop {
	position: absolute;
	top:26px;
	left: 550px;
	z-index: 100;
	color: #FFFFFF;
}

div.login-pop .inner {
	width:240px; 
	align:center;
	padding-top:25px;
	padding-bottom: 25px;
	background:url(../images/interface/size-chart-bk.jpg) no-repeat top #212020;
	border:4px #272727 solid;
	padding: 10px 20px 0px 20px;
}

.loginoptions {
	text-align: center;
	background: url(../images/interface/login-spyder.gif) 15% center no-repeat;
	margin-bottom: 1em;
}

div.login-pop .inner p {
	margin: 1em 0;
	line-height: 1.6;
}

.login-pop .modal-close {
	top:4px;
	right:4px;
}

.loginform {
	background: url(../images/interface/login-spyder.gif) left bottom no-repeat;
}

.loginform fieldset.submit {
	padding-left: 72px;
}
.loginform .label {
	width: 65px;
}
.loginform input.text {
	width: 160px;
}
div.login-pop .inner p.helpers {
	margin-left: 70px;
}
.modal-close {
	display:block;
	width:18px;
	height:55px;
	background-image:url(../images/interface/modal-close.gif);
	background-position:left top;
	background-repeat:no-repeat;
	position:absolute;
	top:4px;
	right:4px;
}


/*2009-08-21- will error highlight*/
input.error {
	background: #d11919;
	border: 2px solid #fe0002;
	color: #fff;
}

select.error {
	background: #d11919;
	border: 2px solid #fe0002;
	color: #fff;
}

/*2009-08-24 - Will */
div.errormsg_simple {	
	color: #e51836;
	text-transform: uppercase;
	font-weight: bold;
	line-height: 1;
}

/*2009-09-03 - Jonathan copied old size chart styles */
div#modalSizeChart h2 {
        padding:0px 0px;
}
div#modalSizeChart table {
        margin: 0px auto;
}
div#modalSizeChart th{
        color:#000000;
        font-size:9px;
        font-weight:bold;
        padding:1px;
        font-size:10px;
}
div#modalSizeChart tr.even{
        background-color:#CCCCCC;
}

div#modalSizeChart td {
        font-size:10px;
        border-left:#454545 1px solid;
        padding:1px;
}
div#modalSizeChart td.firstCell {
        border-left:none;
}

/*2009-09-16 - Jonathan used for product cat pages for displaying prices */
.oldprice {
	color: #e22e2d;
	font-size: 98%;
	text-decoration:line-through;
}
.noprice {
	color: #e22e2d;
	font-size: 98%;
}