body {
	margin:0;
	background-color: Black;
	color: White;
	font: 10px verdana;
	}

.body {
	width: 1050px;
	margin: 0 auto;
	position: relative;
	}

ul {
	margin: 0;
	padding: 0;
	list-style-type: none;
	position: relative;
	}

ul li {
	margin: 0 25px;
	padding: 0;
	float: left;
	}

ul li p {
	margin: 0;
	padding: 0;
	padding: 24px 0;
	color: #888888;/* 666 too faint */
	text-align: center;
	}

.line {
	border-top: 1px solid #404040;
	color: White;
	margin: 30px 0;
	clear: both;
	}

.header {
	margin: 0;
	}

a.price, a.price:link, a.price:visited {
	color: orange; 
	text-decoration: none;
	line-height: 20px;
	font-weight: bold;
	}

/* COLUMN FORMATTING 
	This is a little crude, but the more sophisticated layouts took way more work, trying to accomodate different width images and tough
	keeping the text centered below the image. Page stays centered in 1000px wide frame but the images are bunched-up on the left side.
	Looks best to have about 900px wide total images, otherwise add a class on the UL to adjust the li-margins for each page or row.

*/
ul.swim1 li { margin: 0 37px; }
ul.swim2 li { margin: 0 52px; }
ul.index1 li { margin: 0 40px; }
ul.index2 li { margin: 0 20px; }
ul.comics1 li { margin: 0 42px; }
ul.comics2 li { margin: 0 50px; }


/*  Nav Styles  */

ul#nav li {
	margin: 0 0 0 20px;
	padding: 0; /* adding left padding here screws up the line wraps */
	float: left;
	color: #999;
	}
ul#nav {
	position:absolute;
	bottom: 7px;
	right: 0;
	}
ul#nav li a {
	margin: 0;
	padding: 7px 10px 7px 10px; /* sets button size around text */
	text-decoration: none;
	}
ul#nav li a:hover {
	color: White;
	background: #555;
	}
ul#nav li a.current {
	color: #777;
	border: 1px solid #404040;
	border-bottom: 1px solid #000;
	}
ul#nav li a.current:hover {
	color: #777;
	border: 1px solid #404040;
	border-bottom: 1px solid #000;
	background: Black;
	}

h1 {
	text-indent: -9999px;
	margin: 0;
	padding: 0;
	height: 58px;
	background: url('img/header.png') no-repeat;
	}

h1 a {
	display: block;
	width: 113px;
	height: 61px;
	}
	
/*  Page-specific Styles  */
h2.title {
	margin: 29px auto 32px;
	padding: 0;
	height: 19px;
	text-align: center;
	font-family: 'Michroma', sans-serif;
	font-size: 22px;
	letter-spacing: 2px;
	color: #8c8c8c;
	text-transform: uppercase;
	}

h2.home {
	margin: -8px 0 0 0;
	padding-bottom: 20px;
	height: auto;
	}

a.none {
	text-decoration: none;
	}
	
li h3 {
	display: none;
	}

#foot p {
	margin: 0 40px;
	padding: 0 0 10px 0;
	color: #666666;
	font: 10px verdana;
	line-height: 20px;
	}

a:link, a:visited {
	color: #999;
	}

/* Bookies, Surfer & Giclee Sale pages */

h3.bookies {
	font-family: myriad, "myriad pro", arial, sans-serif;
	font-size: 32px;
	font-weight: normal;
	margin: 29px auto 32px;
	padding: 0;
	height: 19px;
	}

em {font-size: 24px;}

#btn {
	width: 170px;
	margin: 0 auto;
	}

.body2 {
	width: 700px;
	margin: 0 auto;
	position: relative;
	font-family: myriad, "myriad pro", arial, sans-serif;
	font-size: 14px;
	font-weight: normal;
	color: #999;
	}

h4 {
	font-size: 16px;
	color: #ccc;
	}

/* surfer page */

#detail {text-align: center;}

p.info {
	margin: 0;
	padding: 18px 0;
	color: White;
	font-size: 14px;
	}

p {color: #666666;}
p.sub {color: White;}

h3 {width: 100%; text-align: center;}



/* Index */
/* section2 has the 4 main categories & thumbnails */
#section2 {
	padding-top: 50px;
	padding-bottom: 50px;
	}
	
#section2 #col2 {
	width: 50%;
	float: right;
	text-align: center;
	}

#section2 #col1 {
	width: 50%;
	text-align: center;
	}
	
#section2 img {
	padding-bottom: 20px;
	}

/* Selling Pages */

#viewcart {
	text-align: center;
	}

/* home page */
h2.home {  /*reset*/
	text-indent: 0;
	margin: 0;
	height: auto;
	width: auto;
	background: none;
	}

h3 {  /*reset*/
	margin: 0;
	height: auto;
	width: auto;
	}

/* section1, news & announcements on Home Page */

#section1 {
	background-color: #414042;
	margin-top: 30px;
	padding-top: 15px;
	padding-bottom: 15px;
	}

#left, #right {
	background-color: Black;
	width: 490px;
	margin: 0 15px 0 15px;
	padding-bottom: 35px;
	border: 1px solid black; /* don't know the problem, but this makes both callouts look similar */
	}

#right {
	float: right;
	padding-bottom: 13px; /* don't know the problem, but this makes both callouts look similar */
	}

#section1 h2 {
	font-weight: bold;
	font-style: oblique;
	font-size: 18px;
	color: #ccc;
	padding: 5px 0 10px 20px;
	}

#section1 img {
	margin: 0 10px 0 20px;
	}

#section1 h3 {
	font-size: 18px;
	text-align: left;
	}

#section1 p {
	font-size: 15px;
	margin-left: 15px;
	margin-right: 15px;
	font-size: 14px;
	padding-bottom: 5px;
	margin-bottom: 0;
	}

#section1 a {
	font-size: 14px;
	color: Orange;
	}

#wide {
	padding-left: 10px;
	margin-left: 10px;
	font-size: 13px;
	}

#wide h2 {
	margin: 0;
	padding: 0;
	padding-top: 5px;
	padding-bottom: 5px;
	font-size: 16px;
	}

#wide p {
	margin-left: 0;
	}

/* styles for paypal buttons & prices */

.center {text-align:center}
.right {float: right; color: #bbb;}
.paypal {font-size: 18px;}

div.price {	/* used on poster & comic pages, gotta use div, padding not respected on the em2 tag */
	padding-bottom: 3px;
	}

em2 {	/* comics.html, prices, note em is used on big giclee pages */
	font-size: 16px;
	color: #888888;
	font-style: italic;
	}  

/* styles for Temporary Closure Nov 2024 */
#temp-closed {
	width: 100%;
	height: 200px;
	padding-top: 15px;
	background-color: Yellow;
	color: Red;
	text-align: center;
	font-size: large;
	}

#temp-closed h2 {
	color: red;
	}

#temp-closed p {
	color: black;
	}


#temp-closed a:link, #temp-closed a:visited {
	color: blue;
	}