body { font-family:Arial, helvetica, sans-serif; font-size:85%; color:black; width:1000px; margin:0 auto; background:#ebebeb url(graphics/bg.jpg) 0 0 repeat-x }

a { color:#020d9e; text-decoration:none }
#productmenu a { color: black; }
a:hover { color:#dd1f26; text-decoration: underline; }
div#productmenu div.menubox div.title a { color: white; }
img { border:0 }
h1 { color:#020d9e; font-size:120%; display: inline; }
h2 { color:grey; font-size:100%; display: inline; margin-left: 5px; }
h3 { color:#020d9e; font-size:110% }
strong { color:#020d9e }
hr { height:1px; border:0; color:#8d8d8d; background:#8d8d8d }
.error { font-weight: bold; color: red; }



/* --- Header and Main Menus --- */
#header { position:absolute; width:100%; height:123px; top:0; left:0; }
#header .container { width:1000px; margin:0 auto }

#mainmenu { float:right; margin-top:45px; font-size:85%; text-transform:uppercase }
#mainmenu .button { float:left; margin-left:1px; background:#dd1f26 url(graphics/header/red-bg.gif) 0 0 repeat-x }
#mainmenu .button .left { float:left; width:9px; height:18px; background:url(graphics/header/red-left.gif) 0 0 no-repeat }
#mainmenu .button .right { float:left; width:9px; height:18px; background:url(graphics/header/red-right.gif) 100% 0 no-repeat }
#mainmenu .button:hover { background:#3c9b16 url(graphics/header/green-bg-top.gif) 0 0 repeat-x }
#mainmenu .button:hover .left { background:url(graphics/header/green-left-top.gif) 0 0 no-repeat }
#mainmenu .button:hover .right { background:url(graphics/header/green-right-top.gif) 0 0 no-repeat }
#mainmenu .option { float:left; padding:3px 0 3px }
#mainmenu .option a { padding:0 10px 0 10px; color:#fff }
.divider { margin:0; padding:5px 0; background:url(graphics/header/bg.gif) 100% 50% no-repeat }
html>body .divider { height:6px; padding:2px 0; background:url(graphics/header/bg.gif) 100% 50% no-repeat }

#othermenu { float:right; font-size:85%; text-transform:uppercase }
#othermenu .summary { float:left; padding:3px 20px 0 0; font-size:120%; text-transform:none; color:#253a94 }
#othermenu .button { float:left; margin-left:1px; background:url(graphics/header/blue-bg.gif) 0 0 repeat-x }
#othermenu .button .left { float:left; width:9px; height:20px; background:url(graphics/header/blue-left.gif) 0 0 no-repeat }
#othermenu .button .right { float:left; width:9px; height:20px; background:url(graphics/header/blue-right.gif) 100% 0 no-repeat }
#othermenu .button:hover { background:url(graphics/header/green-bg-btm.gif) 0 0 repeat-x }
#othermenu .button:hover .left { background:url(graphics/header/green-left-btm.gif) 0 0 no-repeat }
#othermenu .button:hover .right { background:url(graphics/header/green-right-btm.gif) 100% 0 no-repeat }
#othermenu .option { float:left; padding:3px 0 4px }
#othermenu .option a { padding:0 12px 0 10px; color:#fff }



/* --- Overall Layout --- */
#contentlayout { padding: 130px 0 0 0; }
#content { float:right; width:775px;padding-top: 14px }
#content .column { float:left; width:385px }
#content .widecolumn { float:left; width:770px }
#content .widecolumn h1 { margin: 0; padding: 0; }
#content .column p { padding:0 15px 0 5px }
#content .maincolumn { float:left; width:345px; padding:0 10px 0 10px }
#static { float:right; width:775px; text-align: justify; }
#static .column { float:left; width:385px }
#static .column p { padding:0 15px 0 5px }
#static .maincolumn { float:left; width:345px; padding:0 10px 0 10px }



/* --- Main Content Boxouts --- */
.boxout { padding:0 15px 0 0 }
.boxout .title { background:url(graphics/boxouts/top.gif) 0 0 repeat-x }
html>body .boxout .title { background:none }
.boxout .title .left { float:left; width:15px; height:30px }
html>body .boxout .title .left { float:left; width:15px; height:30px; background:url(graphics/boxouts/tl.png) 0 0 no-repeat }
.boxout .title .right { float:right; width:15px; height:30px }
html>body .boxout .title .right { float:right; width:15px; height:30px; background:url(graphics/boxouts/tr.png) 100% 0 no-repeat }
.boxout .title .body { height:30px; margin:0 15px; color:#dd1f26 }
html>body .boxout .title .body { height:30px; margin:0 15px; color:#dd1f26; background:url(graphics/boxouts/top.png) 0 0 repeat-x }
.boxout .mainleft { padding-left:5px; background:url(graphics/boxouts/left.gif) 0 0 repeat-y }
html>body .boxout .mainleft { padding-left:5px; background:url(graphics/boxouts/left.png) 0 0 repeat-y }
.boxout .mainright { background:url(graphics/boxouts/right.gif) 100% 0 repeat-y }
html>body .boxout .mainright { padding-right:15px; background:url(graphics/boxouts/right.png) 100% 0 repeat-y }
.boxout .main { padding:10px; font-size:95%; background:#fff }
html>body .boxout .main { padding:10px 0 0 10px; font-size:95%; background:#fff }
.boxout .foot { background:url(graphics/boxouts/btm.gif) 0 100% repeat-x }
html>body .boxout .foot { background:none }
.boxout .foot .left { float:left; width:15px; height:15px }
html>body .boxout .foot .left { float:left; width:15px; height:15px; background:url(graphics/boxouts/bl.png) 0 100% no-repeat }
.boxout .foot .right { float:right; width:15px; height:15px }
html>body .boxout .foot .right { float:right; width:15px; height:15px; background:url(graphics/boxouts/br.png) 100% 100% no-repeat }
html>body .boxout .foot .middle { height:15px; margin:0 15px; background:url(graphics/boxouts/btm.png) 0 100% repeat-x }
.boxout h2 { margin:0; padding-top:8px; display: block; color: #020d9e;}
html>body .boxout h2 { padding-top:8px; display: block; color: #020d9e;}




/* --- Product Listings --- */
.productlarge { margin-bottom:15px }
.productlarge img { padding:0 10px 5px 0 }
.productname { color:#020d9e; font-weight:bold }
.productname a { color:#020d9e }
.productname a:hover { color:#dd1f26 }
.price { padding-top:7px; font-weight: bold; color: black; }
.price a { font-weight: normal; }
.productsmallcontainer { float:left; width:168px }
.productsmall { padding:10px 12px 0 0 }
.productsmall img { float:left; padding:0 10px 5px 0 }
.productsmall .price { float:none; padding-top:7px }

.filter { float:left; margin-right:15px; font-size:90% }

.pagination { float:right; padding-top:8px; color:#4d4d4d; font-weight:bold }
.pagination a { padding:0 1px; font-weight:normal; text-decoration:underline }

.categories h4 { margin:0 }
.categories p { margin:0; padding:0 }
.categories ul, .categories li { margin:0; padding:0 0 0 10px }
.categories li { list-style:none }
.categories ul { margin-bottom:15px }




/* --- Product Page --- */
.productimages { float: right; margin-left: 30px; width: 460px; text-align: right; }
.productimages img { padding:10px 0 5px 7px }
.productinfo .filter { margin-bottom:10px; color:#020d9e }
.productinfo .price { float:none; margin-top:5px }

.breadcrumbs { padding-top:8px }
.breadcrumbs a { color:#dd1f26; text-decoration:underline }
.breadcrumbs a:hover { color:#020d9e }

/* --- Product Menu --- */
#productmenu { float:left; width:180px; margin-left:10px }
.menubox { margin-bottom:10px }
.menubox .title { background:url(graphics/boxouts/menu-top.gif) 0 0 repeat-x }
html>body .menubox .title { background:none }
.menubox .title .left { float:left; width:10px; height:23px }
html>body .menubox .title .left { float:left; width:10px; height:23px; background:url(graphics/boxouts/menu-tl.png) 0 0 no-repeat }
.menubox .title .right { float:right; width:10px; height:23px }
html>body .menubox .title .right { float:right; width:10px; height:23px; background:url(graphics/boxouts/menu-tr.png) 100% 0 no-repeat }
.menubox .title .body { height:23px }
html>body .menubox .title .body { height:23px; margin:0 10px; background:url(graphics/boxouts/menu-top.png) 0 0 repeat-x }
.menubox .title .body p { padding-top:4px }
.menubox .title .body a { color:#fff; text-transform:uppercase }
.menubox .mainleft { padding-left:5px; background:url(graphics/boxouts/menu-sides.gif) 0 0 repeat-y }
.menubox .mainright { padding-right:15px; background:url(graphics/boxouts/menu-sides.gif) 100% 0 repeat-y }
.menubox .main { padding:5px 0 }
.menubox .foot { background:url(graphics/boxouts/menu-sides.gif) 0 100% repeat-x }
html>body .menubox .foot { background:none }
.menubox .foot .left { float:left; width:10px; height:10px; background:url(graphics/boxouts/menu-sides.gif) 0 0 repeat-y }
html>body .menubox .foot .left { float:left; width:10px; height:10px; background:url(graphics/boxouts/menu-bl.png) 0 100% no-repeat }
.menubox .foot .right { float:right; width:10px; height:10px; background:url(graphics/boxouts/menu-sides.gif) 100% 0 repeat-y }
html>body .menubox .foot .right { float:right; width:10px; height:10px; background:url(graphics/boxouts/menu-br.png) 100% 100% no-repeat }
.menubox .foot .middle { height:10px; margin:0 10px }
html>body .menubox .foot .middle { height:10px; margin:0 10px; background:url(graphics/boxouts/menu-sides.gif) 0 100% repeat-x }
#productmenu .option { margin:4px -5px 0 5px }
#productmenu .option.submenu { font-size: 0.9em; text-align: left; }
#productmenu .option.selection { font-weight: bold; }

p#autographs {clear: left; color: red; width: 350px; font-size: small; font-weight: bold; visibility: hidden; margin-left: 112px; margin-top: 0; }

form.contact label {display:block;float:left;width:100px;text-align:right;font-size:small;margin:0 6px 0 0; }
form.contact input, #static form.contact select, #static form.contact textarea {width:350px;margin-bottom:6px}
form.contact textarea {height:120px; }

#content form.purchase label {display:block;float:left;width:80px;text-align:right;font-size:small;margin:0 6px 0 0;color:#25478B}
#content form.purchase input, #content form.purchase select, #content form.purchase textarea {width:170px;margin-bottom:6px}
#content form.purchase textarea {height:60px}
#content form.purchase input.button {width:75px;margin-left:100px}

/* --- Buttons --- */
.button, .button-sml { float:left; cursor:pointer }
.button .left, .button .right { float:left; width:6px; height:27px }
.button .content { float:left; height:27px }
.button-sml { float:left; height:18px }
.button-sml .left, .button-sml .right { float:left; width:5px; height:18px }
.button-sml .content { float:left; height:18px }
.button a { color:#fff }
.button-sml a { color:#fff; font-size:85% }
.button img, .button-sml img { padding:0; vertical-align:bottom }

.button .addtocart .left { margin-left:5px; background:url(graphics/buttons/blue-left.png) 0 0 no-repeat }
.button .addtocart .right { background:url(graphics/buttons/blue-right.png) 100% 0 no-repeat }
.button .addtocart .content { padding:5px 3px 0; background:url(graphics/buttons/blue-bg.png) 0 0 repeat-x }
.button .addtocart:hover .left { background:url(graphics/buttons/green-left.png) 0 0 no-repeat }
.button .addtocart:hover .right { background:url(graphics/buttons/green-right.png) 100% 0 no-repeat }
.button .addtocart:hover .content { background:url(graphics/buttons/green-bg.png) 0 0 repeat-x }

.button-sml .more .left { margin-left:5px; background:url(graphics/buttons/lgrey-left-sml.png) 0 0 no-repeat }
.button-sml .more .right { background:url(graphics/buttons/lgrey-right-sml.png) 100% 0 no-repeat }
.button-sml .more .content { padding:0 4px 0; background:url(graphics/buttons/lgrey-bg-sml.png) 0 0 repeat-x }
.button-sml .more:hover .left { background:url(graphics/buttons/green-left-sml.png) 0 0 no-repeat }
.button-sml .more:hover .right { background:url(graphics/buttons/green-right-sml.png) 100% 0 no-repeat }
.button-sml .more:hover .content { background:url(graphics/buttons/green-bg-sml.png) 0 0 repeat-x }



/* -------------- Search Popup -------------- */
#searchpopupcontainer { position:absolute; z-index:99; top:90px; width:350px; left:50%; margin-left: -175px; display: none;}
#searchpopup { width:100%; padding:2px; text-align:left }
#searchpopup .formcontent { padding:0 5px 0 15px; border:solid 3px #020d9e; background:#f0f0f0; }
#searchpopup h3 { padding-top:0; color:#020d9e }
#searchpopup p { margin-top:0 }
#searchpopup p a { padding-right:17px; font-size:90%; color:#dd1f26; background:url(graphics/header/search-red.gif) 100% 50% no-repeat }
#searchpopup p a:hover { color:#3c9b16; background:url(graphics/header/search-green.gif) 100% 50% no-repeat }
#searchpopup input { font-size:90%; margin-right:10px }




/* --- Footer --- */
#footer { margin-top:30px; padding:0 0 30px; font-size:85%; color:#4d4d4d }
#footer img { vertical-align:bottom }
#footer strong { font-size:125%; color:#020d9e }
#footer a { color:#4d4d4d; margin-left:10px }
div#footer a.plain { margin-left: 0; }
#footer a:hover { color:#dd1f26 }
#footer .credit { color:#999 }
#footer .credit a { color:#999; margin-left:0; text-decoration:underline }
#footer .credit a:hover { color:#dd1f26 }




/* --- Misc --- */
.floatleft { float:left }
.floatright { float:right }
.alignleft { text-align:left }
.alignright { text-align:right }
.aligncenter { text-align:center }
.clear { clear:both; height:0; line-height:0; font-size:1%; /*for IE*/ }
.clear_left { clear:left; height:0; line-height:0; font-size:1%; /*for IE*/ }
.clear_right { clear:right; height:0; line-height:0; font-size:1%; /*for IE*/ }

#trace, .trace { border:solid 1px #ff0000 }

div.productinfo a, div#content a, div#static a {text-decoration: underline; }

#static img.academy {float:right;clear:right;margin-left:20px;margin-bottom:20px;border:1px solid #8C9EC2}

div#content p {
	margin: 0;
}

div#content p.categorylinks a {
	text-decoration: none;
}

div#content p.categorylinks a:hover {
	text-decoration: underline;
}

div#content p.categorylinks strong {
	color: #4d4d4d;
}

div#content p.categorylinks strong.faint {
	color: #999;
}

div#content br.categorylinks {
	margin-bottom: 10px; 
}

/* lightbox */
#lightbox{	position: absolute;	left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0;}
#lightbox img{ width: auto; height: auto;}
#lightbox a img{ border: none; }

#outerImageContainer{ position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; }
#imageContainer{ padding: 10px; }

#loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; }
#hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; }
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}

#prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */ display: block; }
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(/images/gui/lightbox/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(/images/gui/lightbox/nextlabel.gif) right 15% no-repeat; }

#imageDataContainer{ font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100%	; }

#imageData{	padding:0 10px; color: #666; }
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }	
#imageData #caption{ font-weight: bold;	}
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em;	}			
#imageData #bottomNavClose{ width: 66px; float: right;  padding-bottom: 0.7em; outline: none;}	 	

#overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; }
div#content p.pricecheck {font-weight: bold; color: blue; margin-bottom: 25px; font-size: 1.2em;}

div.recommendation {
	float: left;
	margin-right: 30px;
}

div.recommendation img {
	margin-top: 5px;
}

#jpsays { float:right; width:210px; margin-top:20px; background:#253a94 }
#jpsays .top { width:210px; height:98px; background:url(graphics/jpsays/top.jpg) 0 0 no-repeat }
#jpsays .bottom { width:210px; height:10px }
html>body #jpsays .bottom { background:url(graphics/jpsays/bottom.gif) 0 0 no-repeat }
#jpsays .quote { padding:6px 6px 0; color:#BEC4DF; line-height:150%; text-align:left }
#jpsays .quote img { padding:0; vertical-align:text-bottom }

#special { float:left; margin:10px 0 20px; padding-top:10px; border:2px solid #bfbfbf }
html>body #special { padding-top:0; border:0 }
html>body #special .top { height:6px; background:url(graphics/boxouts/special-sides.gif) 0 0 repeat-x }
#special .top .left { float:left }
html>body #special .top .left { width:6px; height:6px; background:url(graphics/boxouts/special-tl.gif) 0 0 no-repeat }
#special .top .right { float:right }
html>body #special .top .right { width:6px; height:6px; background:url(graphics/boxouts/special-tr.gif) 100% 0 no-repeat }
html>body #special .mainleft { background:url(graphics/boxouts/special-sides.gif) 0 0 repeat-y }
html>body #special .mainright { padding-left:5px; background:url(graphics/boxouts/special-sides.gif) 100% 0 repeat-y }
#special .main { padding:0; line-height:150% }
#special .main a { text-decoration:underline }
#special .main img { margin-top:5px }
#special .title { color:#020d9e; font-weight:bold; background:none }
#special .worth { font-size:90%; font-style:italic }
html>body #special .bottom { height:6px; background:url(graphics/boxouts/special-sides.gif) 0 100% repeat-x }
#special .bottom .left { float:left }
html>body #special .bottom .left { width:6px; height:6px; background:url(graphics/boxouts/special-bl.gif) 0 100% no-repeat }
#special .bottom .right { float:right }
html>body #special .bottom .right { width:6px; height:6px; background:url(graphics/boxouts/special-br.gif) 100% 100% no-repeat }

div.event {
	width: 350px;
	height: 130px;
	float: left;
	margin: 0 15px 15px 0;
}

p.error {
	font-weight: bold;
	color: red;
}

img#legends {
	float: left;
	width: 773px;
	height: 515px;
	margin: 0 15px 15px 0;
}

img#johnfun {
	float: right;
	width: 300px;
	height: 388px;
	margin: 5px 2px 15px 15px;
}

p.legendsblurb {
	float: left;
	width: 440px;
	margin: 0.5em;
}

ul.legendsblurb {
	float: left;
	width: 400px;
	margin: 0.5em;
}

table#legends {
	clear: both;
	width: 100%;
	border: 2px solid #213895;
	border-collapse: collapse;
}

table#legends tr.alt td {
	background-color: #dedede;
}

table#legends th {
	border-width: 0;
	padding: 5px;
	background-color: #213895;
	color: white;
}

table#legends td {
	border-width: 0;
	padding: 5px;
}

div#content p.introduction {
	padding-top: 0px;
	padding-bottom: 28px;
	padding-left: 1px;
	line-height: 1.25em;
	text-align: justify;
}

div#content p.introduction a {
	font-weight: bold;
	text-decoration: none;
}

div#content p.introduction a:hover {
	text-decoration: underline;
}

div#homepagebrands {
	width: 750px;
	margin: auto;
}

div#homepagebrands div.brand {
	float: left;
	margin: 0px 14px 10px 14px;
}

div#homepagebrands div.brand img {
	width: 120px;
	border: 1px solid #c6c7c6;
}

div#footer img {
	border: 1px solid #c6c7c6;
}

a.lozenge {
	font-size: 80%;
	text-decoration: none;
	color: white;
	padding: 0 4px;
	background: url(graphics/buttons/lgrey-bg-sml.png) 0
}