/*
 * CSS Reset.
 */
* {
	margin: 0;
	padding: 0;
}

tr { vertical-align: top; }
th, td {
	margin: 0.2em;
	padding: 0.2em;
}

address,
blockquote,
dl,
dt,
fieldset,
p,
ol,
ul
{
	color: grey;
	text-align: justify;
	margin-bottom: 1em;
}

dd,
dt,
li {
	color: grey;
	text-align: left;
	margin-left: 1.5em;
}

body,
td,
p,
td,
th {
	color: grey;
	font: 12px "Segoe UI", Tahoma, Helvetica, sans-serif;
	line-height: 1.6em;
}

a { color: #2A527E; }
a:hover { color: #3F7ABC; }

h1,
h2,
h3,
h4,
h5,
h6 {
	color: #093340;
	font: italic bold 18px "Trebuchet MS", Tahoma, Helvetica, sans-serif;
	margin-bottom: 0.2em;
}
h1 { font-size: 60px; }
h1 .first-half { color: #CE0B13; }
h2 { font-size: 30px; }
h3 { font-size: 16px; }
h4 { font-size: 14px; }
h5 { font-size: 12px; }
h6 { font-size: 12px; }

pre,
code,
xmp {
	font: 13px Consolas, "Courier New", Monaco, monospaced;
	text-align: left;
}

a img { border: none; }

button,
input,
select,
textarea {
	font: 11px "Segoe UI", Tahoma, Helvetica, sans-serif;
	padding: 0.1em;
}

button,
input[type=button],
input[type=submit],
input[type=reset] {
	padding: 0.1em 0.7em;
}

input.field {
	left: 0;
	right: 0;
}

fieldset {
	padding: 0.5em;
	border: none;
	border-top: 1px solid #CCC;
}
legend {
	font-size: 14px;
	padding: 0px 1em;
}

hr {
	border: solid 2px #6688AE;
	margin-bottom: 1em;
}

.clr { clear: both; }
.required { font-weight: bold; }


/*
 * Layout.
 */
html {
	min-width: 1000px;
}
body {
	background-color: #FFF;
	text-align: center;
	min-width: 1100px;
}

#header {
	background: transparent url(../images/header-bg-side.jpg) repeat-x;
	text-align: center;
	min-width: 1100px;
}
#header .header_l {
	background: transparent url(../images/header-bg.jpg) no-repeat;
	height: 150px;
	margin: 0 auto;
	width: 950px;
}

#header-swf {
	height: 150px;
	left: 50%;
	margin-left: -475px;
	position: absolute;
	top: 0;
	overflow: hidden;
}

#page-message {
	background-color: #FFF1A8;
	border: 1px solid #FFE348;
	color: #A00;
	font-weight: bold;
	margin: 1em auto;
	padding: 0.8em;
	text-align: center;
	width: 50%;
}


#content {
	background: url(../images/content-bg.jpg) 0 0 no-repeat;
	margin: 0 auto 20px auto;
	padding-left: 150px;
	padding-top: 30px;
	text-align: left;
	width: 950px;
}
#wrapper {
	margin: 0 auto 20px auto;
	text-align: left;
	width: 950px;
}
#wrapper:after,
#content:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
* html #wrapper,
* html #content { height: 1%; }
#wrapper,
#content { display:inline-block; }
#wrapper,
#content { display:block; }
#content .download {
	color: #CE0B13;
	font: italic bold 30px "Trebuchet MS", Tahoma, Helvetica, sans-serif;
	text-align: right;
}
#content .download a {
	color: #CE0B13;
	text-decoration: none;
}
#content .download a:hover { text-decoration: underline; }

.current-comic .body { margin-bottom: 2em; }

#main {
	float: left;
	overflow: hidden;
	display: inline;
	width: 650px;
}

#sidebar {
	background: url(../images/sidebar-bg.jpg) 50% 0 no-repeat;
	float: left;
	display: inline;
	margin-left: 40px;
	margin-top: -30px;
	min-height: 943px;
	overflow: hidden;
	padding: 100px 50px;
	width: 160px;
}

#wowio-banner { text-align: center; }


#comics-thumbnails {
	height: 350px;
	text-align: center;
}


#sidebar h3,
#featured table th {
	border-bottom: 1px solid red;
	font-size: 14px;
	font-style: italic;
	font-weight: bold;
	text-align: left;
	margin-bottom: 1em;
}
#featured .featured-comic,
#sidebar .featured-comic p,
#featured .featured-artist,
#sidebar .featured-artist p {
	font-style: italic;
	text-align: center;
}
#featured .latest-news li,
#sidebar .latest-news li {
	list-style: none;
	margin-left: 0;
	margin-bottom: 1em;
}
#featured a,
#sidebar a {
	color: #000;
	text-decoration: none;
	font-weight: bold;
}
#featured a:hover { text-decoration: none; }


#surface {
	background: transparent url(../images/surface-bg-side.jpg) repeat-x;
	text-align: center;
}
#surface .surface_l {
	background: transparent url(../images/surface-bg.jpg) no-repeat;
	height: 19px;
	margin: 0 auto;
	width: 950px;
}


#water {
	background: transparent url(../images/water-bg-side.jpg) repeat-x;
	color: #FFF;
	text-align: center;
}
#water a {
	color: #FFF;
	text-decoration: none;
}
#water a:hover { text-decoration: underline; }
#water .water_l {
	background: transparent url(../images/water-bg.jpg) no-repeat;
	margin: 0 auto;
	width: 950px;
	min-height: 270px;
}


#external-links {
	padding: 20px 0;
	text-align: left;
}
#external-links h3 {
	color: #FFF;
	font-size: 14px;
	font-style: italic;
	font-weight: bold;
	margin-bottom: 1em;
	text-align: center;
}
#external-links td {
	font-weight: bold;
	font-size: 13px;
	text-align: center;
}


.box .top-left { background: url(../images/top-left.png) 0 0 no-repeat; padding-left: 10px; }
.box .top-right { background: url(../images/top-right.png) 100% 0 no-repeat; height: 8px; }
.box .middle-left { background: url(../images/middle-left.png) 0 0 repeat-y; padding-left: 10px; }
.box .middle-right { background: url(../images/middle-right.png) 100% 0 repeat-y; padding: 10px 10px 10px 0; }
.box .bottom-left { background: url(../images/bottom-left.png) 0 0 no-repeat; padding-left: 10px; }
.box .bottom-right { background: url(../images/bottom-right.png) 100% 0 no-repeat; height: 8px; }


#ground {
	background: #000 url(../images/floor-bg-side.jpg) repeat-x;
	text-align: center;
}
#ground .ground_l {
	background: #000 url(../images/floor-bg.jpg) no-repeat;
	color: #FFF;
	margin: 0 auto;
	padding: 100px 0 20px 0;
	width: 950px;
}
#ground a {
	color: #FFF;
	text-decoration: none;
}
#ground a:hover { text-decoration: underline; }


#community h3 {
	color: #FFF;
	font-size: 14px;
	font-style: italic;
	font-weight: bold;
	margin-bottom: 1em;
	text-align: center;
}
#community .comment { text-align: left; }
#community .comment img { width: 300px !important; }
#community th {
	font-size: 14px;
	font-style: italic;
	font-weight: bold;
}

#share-result {
	color: #A30;
}


h3.criteria {
	color: #CE0B13;
	font-size: 18px;
	float: left;
	padding-top: 1em;
	padding-left: 0.5em;
}
ul.criteria {
	border: 1px solid #EEE;
	color: #999;
	font: 18px "Trebuchet MS", Tahoma, Helvetica, sans-serif;
	height: 2em;
	padding-top: 1em;
	padding-right: 0.5em;
}
ul.criteria li {
	background: url(../images/option.png) 0 50% no-repeat;
	float: left;
	list-style: none;
	margin-left: 1em;
	padding-left: 1.5em;
}
ul.criteria li.selected { background-image: url(../images/option-selected.png); }
ul.criteria li a {
	color: #999;
	text-decoration: none;
}
ul.criteria li a:hover { text-decoration: underline; }

.comic-preview {
	border: 1px solid #EEE;
	padding: 10px;
}
.comic-preview .title {
	color: #CE0B13;
	font-weight: bold;
	text-transform: uppercase;
	text-align: center;
}
.comic-preview .title a {
	color: #CE0B13;
	text-decoration: none;
}
.comic-preview .title a:hover { text-decoration: underline; }


.artist-preview {
	font-style: italic;
	text-align: center;
}

.credits {
	width: 100%;
	border-collapse: collapse;
}
.credits th {
	background-color: #99CCFF;
	color: #FFF;
	font-weight: bold;
	font-size: 13px;
	padding: 4px;
}

.form {
	width: 90%;
	margin: 0 auto 1em auto;
}
.form th.required {
	font-weight: bold;
}
.form .required input[type=text] {
	font-size: 16px;
}
.form tfoot td {
	text-align: right;
}

ul.error-list li {
	color: #C30;
	font-size: 11px;
	list-style: none;
}