/*Begin CSS Reset*/
/* v1.0 | 20080212 */

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;
	background: transparent;
}
body {
	line-height: 1.25;
	vertical-align:middle;
	color: #FFFFFF;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}

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

/* remember to highlight inserts somehow! */
ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}

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

/*IE7 Fix*/
#tp, #bttm, #tpbt, #bttmbt {*margin-left:-10px;}
#nav li {*display:inline !important;}
/*End IE7 Fix*/

/*Auto Overflow*/
.overflow {overflow:auto;height:500px;}
/*Float Right*/
.right, #right, #rightb, #rightf, #tr, #br, #rightbt, #dates {float:right;}
/*Float left*/
.left, #left, #leftb, #leftf, #tl, #bl, #leftbt {float:left;}
/*Corners*/
#tl, #tr, #bl, #br {height:10px;width:10px;background-repeat:no-repeat;}
/*Center*/
.center, #tp, #bttm, #tpbt, #bttmbt, #wide {margin-left:auto;margin-right:auto;}
/*10px Height*/
#tp, #bttm, #top, #bottom, #tpbt, #bttmbt {height:10px;}
/*930px width*/
#tp, #bttm {width:930px;}
/*-10px left margin*/
#tp, #bttm, #tpbt, #bttmbt {*margin-left:-10px;}
/*Background Color #01001e*/
#tp, #bttm, #main, #mainb, #mainf, #mainbt, #tpbt, #bttmbt {background-color:#01001e;}
/*200px Height*/
#left, #right, #main {height:200px;}
/*3px width*/
#left, #right, #leftb, #rightb, #rightf, #leftf, #leftbt, #rightbt {width:3px;}
/*width 950px*/
#logo, #body, #footer, #menu {width:950px;}
/*height 600px*/
#leftb, #rightb, #mainb {height:600px;}
/*Height 20px*/
#leftf, #rightf, #mainf, #leftbt, #rightbt, #mainbt {height:20px;}
/*Left side of round box*/
#left, #leftb, #leftf, #leftbt {
	background-repeat: repeat-y;
	background-image: url('images/left.png');
	background-position: left;
}
/*947px width*/
#main, #mainb, #mainf {
	width:947px;
}
/*Right side of round box*/
#right, #rightb, #rightf, #rightbt {
	background-image: url('images/right.png');
	background-repeat: repeat-y;
	background-position: right;
}
/*bottom of round box*/
#bttm, #bttmbt {
	background-image: url('images/bttm.png');
	background-repeat: repeat-x;
	background-position:center bottom;
}
/*top of round box*/
#tp, #tpbt {
	background-image: url('images/tp.png');
	background-repeat: repeat-x;
	background-position: 50% top;
}
/*10px rounded corners*/
#wide {
	-moz-border-radius:10px;
	-webkit-border-radius:10px;
	border-radius:10px;
}
/*10px Rounded bottom left and top right Border*/
#dates {
	-moz-border-radius-bottomleft:10px;
	-webkit-border-bottom-left-radius:10px;
	border-radius-bottom-left:10px;
	-moz-border-radius-topleft:10px;
	-webkit-border-top-left-radius:10px;
	border-radius-top-left:10px;
}
/*10px rounded bottom right corner*/
#comic, #content {
	-moz-border-radius-bottomright:10px;
	-webkit-border-bottom-right-radius:10px;
	border-radius-bottom-right:10px;
}
/*10px rounded bottom left corner*/
#s3slider {
	-moz-border-radius-bottomleft:10px;
	-webkit-border-bottom-left-radius:10px;
	border-radius-bottom-left:10px;
}
/*1px solid gold border*/
#comic, #dates, #s3slider, #content, #wide {border:1px #593d00 solid;}
/*5px Padding*/
#comic, #dates, #s3slider, #content, #wide {padding:5px;}
/*Background Color #00000e*/
#comic, #dates, #s3slider, #content, #wide {background-color:#00000e;}

#wide {Width:900px;}
hr {color:#593d00;}
h1 {color:#593d00;font-size:xx-large;}
h2{color:#593d00;font-size:x-large;}
#tpbt, #bttmbt {width:115px;}
#tl {
	background-image: url('images/tl.png');
	background-position: left top;
}
#tr {
	background-image: url('images/tr.png');
	background-position: right top;
	margin-top:-10px;
}
#mainbt {
	width:132px;
	color:white;
	text-decoration:none;
	font-weight:bold;
	font-size:medium;
	text-shadow: black 0.1em 0.1em 0.1em;
}
#menuitem {width:135px;}
#menuitem:hover #mainbt, #menuitem:hover #tpbt, #menuitem:hover #bttmbt {background-color:#593d00;}
#menuitem:hover #br {background-image:url('images/br1.png');}
#menuitem:hover #bl {background-image:url('images/bl1.png');}
#menuitem:hover #tl{background-image:url('images/tl1.png');}
#menuitem:hover #tr {background-image:url('images/tr1.png');}
#rightf, #rightbt {margin-top:-20px}
#right {margin-top:-200px;}
#rightb {margin-top:-600px;}
#bl {
	background-image: url('images/bl.png');
	background-repeat: no-repeat;
	background-position: left bottom;
}
#br {
	background-image: url('images/br.png');
	background-position: right bottom;
	background-repeat: no-repeat;
	margin-top:-10px;
}
body {
	background-image: url('images/bg.png');
}
#s3slider {
   width: 408px; /* important to be same as image width */
   height: 306px; /* important to be same as image height */
   position: relative; /* important */
   overflow: hidden; /* important */
   margin-right:1px;
}
#s3slider, #comic, #content {margin-top:-7px;}
#s3sliderContent {
   width: 408px; /* important to be same as image width or wider */
   position: absolute; /* important */
   top: 0; /* important */
   margin-left: 0; /* important */
   left:5px;
}
.s3sliderImage {
	float: left; /* important */;
	position: relative; /* important */;
	display: none;
	margin-top: 2px;
}
.s3sliderImage span {
   position: absolute; /* important */
   left: 0;
   font: 10px/15px Arial, Helvetica, sans-serif;
   padding: 10px 13px;
   width: 382px;
   background-color: #000;
   filter: alpha(opacity=70); /* here you can set the opacity of box with text */
   -moz-opacity: 0.7; /* here you can set the opacity of box with text */
   -khtml-opacity: 0.7; /* here you can set the opacity of box with text */
   opacity: 0.7; /* here you can set the opacity of box with text */
   color: #fff;
   display: none; /* important */
   top: 0;

   /*
       if you put
       top: 0; -> the box with text will be shown at the top of the image
       if you put
       bottom: 0; -> the box with text will be shown at the bottom of the image
   */
}

.clear {
   clear: both;
} 
#comic {
	width:400px;
}
a {text-decoration:none;}
#content {width:500px;}
#nav li {display:inline-block;}
#dates, #s3slider {
	width:408px;
}
#dates {margin-top:10px;margin-right:1px;}
#events li {
	list-style-type: none;
	list-style-position: inside;
	text-align: left;
}
/*left aligned text*/
.textleft {text-align:left;}
/*Drop Down menus*/
#nav, #nav ul {
	padding: 0;
	margin: 0;
	list-style: none;
}
#nav a {
	display: block;
	width: 135px;
	height: 40px;
}

#nav li ul {
	position: absolute;
	z-index:1;
	left: -999em;
	width: 135px;
	height: 40px;
}

#nav li:hover ul {
	left: auto;
	height: 40px;
	display: block;
}
#nav li:hover ul, #nav li.sfhover ul {
	left: auto;
	height: 40px;
	display: block;
}
#nav li {
	*display:inline !important;
}