@charset "utf-8";
/* General Rules */
* {margin: 0; padding: 0; outline:none;}
body {text-align: center; font-family: Arial,"Helvetica Neue",Helvetica,Geneva,sans-serif;background-color: #000; font-size: 95%; color: #999;}
div#wrapper {text-align: left; width: 985px; background-color: #000; position: relative; margin: 0 auto;}
a {color: #efefef; border: none; text-decoration:none;}
a:hover {color: #01b0f0;}
a:focus {border:none;}
img {}
img:hover {border: 1px solid #01b0f0;}
ul {list-style-type: none;}
img {border: 1px solid #151515;}
h2,h3,h4,h5,h6 {font-family:"Helvetica Neue",Helvetica,Geneva,sans-serif;}
h2 {font-size: 1.25em;}
h3 {font-size: 1.1em;}

/* Header Related and profile Nav*/
div#header  {background: #000; height: 100px; position: relative; padding-bottom: 10px;}
ul#loginNav {left: 0px; top: 0px; float:right;}
ul#loginNav li{font-size: 1.2em; clear: none; float:left;}

/* logged in profile nav */
#profileNav, #browseNav {margin:0 0 25px 0; padding:5px;}
#profileNav li, #browseNav li{float:left; text-align:left; margin:0 10px 0 0; background:#151515; border:1px solid #333; padding:5px; width:17%; height:20px;}
#profileNav li:hover, #browseNav li:hover {background:#000;}
#profileNav li a, #browseNav li a {font-size:1.1em; display:block;}
#browseNav li {width:30%; text-align:center;}

/* Main Navigation Bar */
div#dividerBar {left: 0px; top: 70px; position:absolute; background: url(../images/mainNavBarFill.gif) repeat-x; width:100%; height:6px; z-index:3;}
div#mainNav {left: 260px; top: 70px; position:absolute; z-index:2;}
#nav {margin:-35px 0 0 0;}
#nav li {float:left; width:100px; border:1px solid #333; height:25px; padding:5px; text-align:center; font-size:20px; font-weight: bold; background:#252525; margin:0 5px;}
#nav li a {display:block;}
#nav li:hover {background:#000000;}
#nav li a:hover {color:#fff;}
#nav li.selected {border: 1px solid #4FB921;}
#header #logo {position: absolute; top:10px; background: url(../images/logo.png) no-repeat;
background-color: #000; width: 219px; height: 70px; border: none; z-index: 50;}
#header #logo h1{text-indent: -9999px; width: 255px; height: 85px; cursor:pointer;}
ul#mainNav a {color: #F1EFE2;}

#footer {border-top:solid 1px #333333; text-align:center; font-size: 0.8em; margin: 3em 0 0 0;}
#footer ul {margin:1em 0;}
#footer li {display:inline; padding:0 2px 0 5px; border-left:1px solid #AEEE00;}
#footer a {color:#ff3399;}
#footer a:hover {color:#AEEE00;}
#footer li.tweet {background: url(../images/Twitter25_27.png) no-repeat 0px 0px; padding:0 5px 0 25px; border:none;}

.clear {clear: both;}
#wrapper #comicInfoTable {border: 0px;}
.error {color: #FF0000;}
.success {color: #009900;}
.commentText {text-align: left; background: #FFFFFF; width: 300px; padding: 5px;}
.commentHeader {text-align: right;}
#content li {float: left; margin: 0px 5px 5px 0px;}

/*tabs*/
div#tags {font: 1.2em Tahoma, Geneva, sans-serif;}

/* Create Comic related */
img#createComic {float:left; margin:50px 0;}
img#createCharacter {float:right; margin:50px 0;}

/* View comic related */
div#comicDisplay {text-align:center;}
div#comicDisplay h2, div#comicDisplay {width:985px; text-align:left; margin: 0 auto 2px auto;}
div#comicDisplay img {margin: 0 10px 10px 0; border:1px solid #efefef;}
div#comicDisplay h2 span {color:#FF3399; font-size:.9em;}
div#comicStats {border:1px #333 solid; margin:0 0 0 0px; height:65px; width:450px;}
div#comicStats ul {float:left;}
div#comicStats li {margin: 0 0 5px 0;}
ul#comicStatsHeading li {color:#009900;}
ul#comicStatsHeading {margin: 0 20px 0 0; text-align:left;}
ul#comicStatsNumbers {border-right:1px solid #333; padding: 0 20px 0 0;}
ul#embedInfo {text-align:right; margin:0 auto 20px auto;}
ul#embedInfo label {float:none; display:inline;}
ul#embedInfo input{border:0; width:265px;}
ul#embedInfo h4 {text-align:left; margin:20px 0; background-color: #333333;}
ul#rateThisComic {margin:0 0 0 20px; width:200px;}
ul#rateThisComic li img {float:left; margin: 8px 10px 0 0; border: 1px solid #666;}
ul#rateThisComic li img:hover {border: 1px solid #01B0F0;}

/* View creation related */
.add_creation,.remove_creation{color: #009900; margin: .6em 0px; border: 1px solid #333; padding: .2em;}
.add_creation span, .remove_creation span {color: #F1EFE2;}
.remove_creation {color: #FF0000;}
.add_creation span:hover,.remove_creation span:hover {color: #D1CFC2;}
.add_creationhover,.remove_creation:hover {color: #FF0000;}

/*View character related */
#charImgDisplay {text-align:center; width: 985px; border:1px solid #151515;}
#charImgDisplay img {border:none;}
#charInfo,#charEdit,#charStats {float:left; width:33%; padding-top:5px;}
#charInfo h2 {color:#FF3399; padding:0 0 2px 0; font-size:1.5em;}
#charInfo h3 {color:#AEEE00; padding:0 0 2px;}
#charInfo span {color:#01B0F0; font-size:1.1em; font-weight:bold;}
#charStats {float:right;}
#charStats div {float:right;}
#charStats span {color:#AEEE00;}
#charEdit {text-align:center;}
a.changeAvatar {display:block; clear:both; color:#01b0f0;}

/*front page comic/creation column related*/
div#topComics, div#newComics{float: left; width: 300px; height:1000px; background: url(../images/comic_thumb_bg.png) no-repeat;}
div#topCreations, div#newCreations{float: right; width: 150px; height:1000px; background: url(../images/creation_thumb_bg.png) no-repeat;}
div#newCreations {padding: 0px;}

/* character comic profile previews (for browsing).*/
.browse {width:900px; margin:25px auto 50px auto;}
.browse h4 {font-size: 1em; background:none; font-weight:bold; text-indent:0px; color: #ff3399; }
.imageholder {width:150px; height:150px; background: #000;}

div.charPreview img, div.charPreview img:hover {border:none;}
div.charPreview .imageholder {text-align:center; background:#000;}
div.charPreview {border: 1px #999 solid; overflow:hidden; background:#151515;}
div.charPreview h4 {color:#AEEE00;}
div.charPreview:hover {border: #01B0F0 1px solid;}
div.charPreview a:hover {color:#AEEE00;}

div.previewProfile {width:96px; height:120px; float:left; margin:0 20px 0 0; text-align:center;}
div.previewProfile img {width:96px; height:96px;}
div.comicPreview,div.charPreview {float: left; width:150px; height:220px; margin:10px;}
div.comicPreview h4 {color:#ff3399; font-size:.8em;}

/* Front page top 3 new/top comics */
div.featComic {width:100%; margin:15px 0 30px 0;}
div.featComic h2 {text-indent:-9999px; width:112px; height:98px; float:left; margin-top:40px;}
div.featComic h2#topComics {background: url(../images/top_new_tag.png) no-repeat ;}
div.featComic h2#newComics {background: url(../images/top_new_tag.png) no-repeat -0px -98px;}
div.featComic h3 {font-size: 1em; background:none; font-weight:bold; text-indent:0px; color: #ff3399; }
div.featComic div.thumbVotes {float:left; width:100%;}
div.featComic div.thumbVotes p {float:right;}

/*Front Page - holds column1 and column2 */
div#columnHolder h2 {text-indent:-9999px; margin:5px 0 5px 0; height:20px; width:338px; text-align:left;}

/* Front Page column1 - and what the peep */
div#column1 {float:left; width: 551px; padding:0; height:750px;}
div#column1 div#whatThePeep {width:440px; float:left; margin: 0 0 100px 0;}
div#whatThePeep {color:#999999;}
div#whatThePeep h2 {background:url(../images/subTitles.png) no-repeat 0px -18px;}
div#whatThePeep a {color: #01B0F0;}
div#whatThePeep a:hover {color: #AEEE00;}
div#whatThePeep li {height:16px; line-height:16px; padding:0 0 0 20px; margin:0 0 20px 0;}
div#whatThePeep li.commentIcon  {background: url(../images/userActionIcons.gif) no-repeat;}
div#whatThePeep li.joinIcon {background: url(../images/userActionIcons.gif) no-repeat 0px -16px;}
div#whatThePeep li.publishIcon {background: url(../images/userActionIcons.gif) no-repeat 0px -65px;}
div#whatThePeep li.createIcon {background: url(../images/userActionIcons.gif) no-repeat 0px -48px;}

/* Front Page column2*/
div#column2 {float:right; width: 350px; padding:0; height:750px;}

div#column2 div.charHead, div#column2 div#infoBar, div#column2 div#stats, div#column2 div#news,div#column2 div#bgInfo {border:1px solid #151515; margin: 0 0 40px 0; position:relative;}
div#column2 h2 {position:absolute; top:-1.4em; left:0px;}
div#column2 div#infoBar {margin-top:1.4em;}

/* Front page Featureed Artist */
div#infoBar {}
div#infoBar div#featuredArtist {margin:auto; width:96px; text-align:center;}
div#infoBar h2 {background:url(../images/subTitles.png) no-repeat 0px 1px;}

/* Front page character heads */
div.charHead {height: 175px;}
div.charHeadIndv {float:left; width:48px; height:48px; text-align:center;}
div.charHeadIndv img {border:none; }
div.charHead h2 {background:url(../images/subTitles.png) no-repeat 0px -38px;}

/* Front Page stats and news related */
div#stats, div#news {position:relative;}
div#stats li, div#news li {padding:5px;}
div#stats li#newestUser {float:right; top:20%; right: 3px; position: absolute; padding:0;}
div#stats a {color:#AEEE00;}
div#stats a:hover {color:#ff3399;}
div#news {margin:50px 0 0 0;}
div#news h2 {background:url(../images/subTitles.png) no-repeat 0px -56px;}
div#stats h2 {background:url(../images/subTitles.png) no-repeat 0px -75px;}

/* Front page additional comics - holds the comicTables*/
div#additionalComics {width:100%;}

/* Front page comic tables top 3-9 */
div.comicTable {width: 450px; float:left;}
div.comicTable h2 {width: 452px; height:24px; background: url(../images/blueTabWithText.png) no-repeat; margin: 0 0 -2px 0px; text-indent:-9999px;}
div.comicTable h2 span {margin: 0 0 0 5px;}
div.comicTable h2 {color:#FFF;}
div.comicTable a {color: #AEEE00;}
div.comicTable a:hover {color: #ff3399;}
div.comicTable .comicRow img {float:left; width:36px; height:36px; margin: 5px;}
div.comicTable .comicRow {height: 47px; border-bottom:1px solid #151515; border-left:1px solid #151515; border-right:1px solid #151515; width:100%; background: #000; clear:both;}
div.comicTable .comicRow a, div#theNewComics .comicRow p, div#theNewComics .comicRow h6 {}
div.comicTable .comicRow span {float:right; position:relative; top:-10px;}
div.comicTable .comicRow span p {text-align:right;}
div#lastComicTable {float:right;}
div#lastComicTable h2 {background: url(../images/blueTabWithText.png) no-repeat 0px -24px;}

/*user profile comics specific */
div.userProfileComics {height:180px; margin: 0 20px 20px 0;}
div.userProfileComics h2 {}

/* record navigation related */
.recordNav { background-color: #151515; margin: 0 6px 0 0; width: 50px; line-height: 40px; border: 1px #333 solid; padding: .5em;}
.recordNav:hover { background-color: #000;}
/* This will change the text "xxx #pages of #total" */
.recordNavText {}
div#recordNavigationButtons{margin-top:10px;}

/* thumbnail title, username, voting display related */
h5,h6,p.objectVotes{font-size: .7em; font-weight: normal;}
h6,p.objectVotes {font-size: .7em;}
div.thumbVotes {float:right;}
p.objectVotes {float:left;}

/* user profile related */
div#profileBranding {border:1px solid #333; width:200px; text-align:center; margin:0 0 20px 0;  padding:0 15px 0 15px; float:left;}
div#profileBranding img {border:none;}
div#profileBranding h2{font-weight:normal; color:#ff3399;}
div#userProfileComicsAndChars div.charPreview {border:none; background:#000;}
div#userProfileComicsAndChars {float:right; width: 700px; clear:none;}
div#userProfileComicsAndChars div.charPreview h4 {color:#AEEE00;}
div#userProfileComicsAndChars h2 {border-bottom:3px solid #151515; margin:0 0 5px 0;clear:both;}
ul#profileStats {padding: 0px; float:right; font-size:12px; width:80px;}
ul#profileStats li{text-align:center; height:52px; margin:0 0 30px 0;}
ul#profileStats li span {padding:52px 0 0 0; display:block;}
li#profileViews{background:url(../images/profileIcons.png) 50% 0px no-repeat;}
li#profileComicsMade{background:url(../images/profileIcons.png) 50% -52px no-repeat;}
li#profileCreationsMade{background:url(../images/profileIcons.png) 50% -104px no-repeat;}
li#profileLikes{background:url(../images/profileIcons.png) 50% -156px no-repeat;}
li#profileDislikes{background:url(../images/profileIcons.png) 50% -208px no-repeat;}
li#profileLocation{background:url(../images/profileIcons.png) 50% -260px no-repeat;}
li#profileAge{background:url(../images/profileIcons.png) 50% -312px no-repeat;}

div#userAbout {border:1px solid #333; width:200px; margin:25px 0 20px 0; padding:0 15px 0 15px;}
div#userAbout p{margin:0 0 20px 0;}

div#profileComicsDiv {float:right; width:600px;}

/* About Page */
div#about p, #backstory p {margin:10px 0;}
div#about div {float:left; width:375px; padding: 0 50px 0 0; clear:none;}
#about div h2 {color:#FF3399;}
#about div h4, #backstory h4 {color:#01b0f0;}
div#about h1 {color:#AEEE00; border-bottom: 5px solid #FFFFFF; margin: 0 0 10px 0;}
#about img {float:right; clear:none; border:none;}

/*backstory page*/
#backstory {width:650px;}
 

/* comments related */
div#showComments {margin:100px 0 0 25px; width:450px;}
div#showComments h2{margin: 0 0 10px 0; border-bottom: solid 10px #666; font-size:1.2em; text-align:left;}
div.commentRow {margin:0; clear:left;}
div.commentsUserInfo {float:left; width:110px; margin: 0 10px 0 0; text-align:center;}
div.commentsDateText {float:left; width:325px; text-align:left;}

div.commentsUserInfo span {display:block; padding-bottom: .25em;}
div.commentsDateText span {display:block; padding-bottom: .25em; text-align:right; border-bottom:thin solid #666666; color: #009900; width:325px;}

/* Form related */
label, label span {display:block; padding-bottom: .25em; }
label { float:left; width:70%}
label span{float:left; width:45%; text-align:right; font-size: 1.2em;}

fieldset input, fieldset textarea, fieldset img, fieldset select{float: right; width:45%; border: 1px solid #333; font-size: 1.2em; background: #F1EFE2; color:#151515;}
fieldset input:hover, textarea:hover, select:hover {border-color: #FF3399;}
fieldset input:active, input:focus,textarea:active,textarea:focus {border-color: #01B0F0;}

fieldset {margin:0 20px 10px 0; padding:20px; border: 1px solid #999; overflow: hidden; background: url(../images/grad_black_hatch_bg.png) repeat-x bottom; }
form div {margin-bottom:20px; padding:10px 20px; text-align:center; }
form div input{padding: .25em; border:1px solid #333; text-transform: capitalize; color: #F1EFE2; background: #151515; cursor:pointer; margin: 0 0 0 2em; font-size:1.1em; width:140px;}
form#comment div,form#inappropriate div {padding:0; text-align:left; }
form p {width:100%; padding: .1em; margin:auto; text-align:center;}
form div input:hover{color: #01B0F0;}

/* add comment form specific - resides in tabs */
form#comment width, form#inappropriate {width: 100%;}
form#comment label,form#inappropriate label {float:none; width:auto;}
form#comment label span,form#inappropriate label span {float:none; text-align:left; width:100%; font-weight:normal; font-size:1em;}
form#comment fieldset,form#inappropriate fieldset{margin:auto;}
form#comment fieldset textarea,form#comments fieldset select,form#inappropriate fieldset textarea, form#inappropriate fieldset select {width: 100%;}
form#comment input,form#inappropriate input {width:140px; float:left; margin: 20px 0 0 0; font-size:35px;}
form#comment fieldset img,form#inappropriate fieldset img{border:none; float:right; margin: 20px 0 0 0; width:200px;}
form#comment fieldset, form#inappropriate fieldset {padding:0; border:none; background:none;}
form#comment div,form#inappropriate div {text-align:center;}
form#comment div input,form#inappropriate div input {margin:auto; float:none; font-size:1.1em;}

/* social bookmarking - resides in tabs */
div#socialBookmarks {text-align:center;}
div#socialBookmarks ul {margin:30px 50px 100px 50px;}
div#socialBookmarks li a{text-indent:-5000px; width:48px; height:48px; display:block;}
div#socialBookmarks li {float:left; display:inline;}
li#delicious {background: url(../images/linkIcons/Delicious_48x48.png) no-repeat;}
li#digg {background: url(../images/linkIcons/Digg_48x48.png) no-repeat;}
li#technorati {background: url(../images/linkIcons/Technorati_48x48.png) no-repeat;}
li#blinklist {background: url(../images/linkIcons/Blinklist_48x48.png) no-repeat;}
li#furl {background: url(../images/linkIcons/Furl_48x48.png) no-repeat;}
li#reddit {background: url(../images/linkIcons/Reddit_48x48.png) no-repeat;}

/* Contact Page */
ul#ContactInfo h2 {color:#fff; margin:15px 0 0 0;}