/*
Title: DE Comics
Author: Tome Wilson - tome@creativewebgroup.net
Last Updated: August 4, 2009
*/

/* ---[ css reset ]--------------------- */
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, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, .rss_box {margin: 0; padding: 0; border: 0; outline: 0; font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; vertical-align: baseline}
:focus {outline: 0}
body {line-height: 1; color: #000}
/* tables still need 'cellspacing="0"' in the markup */
table {border-collapse: collapse; border-spacing: 0}
caption, th, td {text-align: left; font-weight: normal; padding: 6px}
em, .em {font-style: italic}
strong, .strong {font-weight: bold}
.big {font-size: 12px}
.l {float: left}
.r {float: right}
.clear {clear: both; display: block}
.center {text-align: center}


/* ---[ structure ]--------------------- */
html, body {background: #fff url(images/shell/background.gif) repeat-x; height: 100%; min-width: 760px; text-align: center; font: normal 11px/1.55em Arial, Calibri, Helvetica, sans-serif; color: #666}
#center-on-page {width: auto; text-align: center}
#container {margin: 0 auto; width: 760px; display: block}
#header {width: 760px; height: 89px; display: block}
#navigation {width: 760px; height: 53px; display: block}
#navigation img {float: left}


/* ---[ dropdown navigation buttons ]--------------------- */
#navigation div {position: absolute; visibility: hidden; margin: 0; padding: 0; z-index: 2}
#navigation div a {position: relative; top: 53px; left: 10px; display: block; margin: 0; padding: 5px 0; white-space: nowrap; text-align: center; text-decoration: none; background: #fff; color: #919191; border-right: 1px dotted #e0e0e0; border-bottom: 1px dotted #e0e0e0; border-left: 1px dotted #e0e0e0}
#navigation div a:hover {background: #ececec; color: #0e8441}


#header-container {width: 760px; height: 248px; display: block; padding: 12px 0}

#content-area {text-align: left; width: 760px; display: block; background: #fff url(images/shell/content-background.gif) repeat-y}
#content {width: 500px; display: block; padding: 12px 12px 12px 0; float: left}

#sidebar {width: 235px; display: block; padding: 12px 0 12px 13px; float: left}
.news-story {margin: .75em 0}
.date {font-weight: bold; font-size: 13px; color: #444; background: #fff url(images/icons/paper.gif) no-repeat; padding-left: 20px; margin-top: 4px}
.title {font-size: 12px; padding-top: 6px; color: #0e8441}

#footer {clear: both; margin-top: 24px; padding: 18px 0; background: #fff url(images/shell/footer-background.gif) repeat-x; text-align: center; margin-top: 24px; font-weight: bold; font-size: 11px; color: #0e8441}
#footer-navigation {color: #333; padding-top: 6px}


/* ---[ link styles ]--------------------- */
a {color: #0e8441; text-decoration: underline}
a:link {color: #0e8441}
a:visited {color: #0e8441}
a:hover {color: #e1a404}

#footer-navigation a {color: #333; text-decoration: none; padding: 6px 4px}
#footer-navigation a:link {color: #333}
#footer-navigation a:visited {color: #333}
#footer-navigation a:hover {color: #e1a404; text-decoration: none}


/* ---[ content styles ]--------------------- */
#content-area p {padding: .4em 0}
#content-area ul {margin-left: 14px; padding: .4em 0}

.more {float: right; font-weight: bold; font-size: 12px; background: #fff url(images/icons/arrows.gif) no-repeat; background-position: 100% 5px; padding-right: 11px}

.photoL {float: left; margin: 0 10px .25em 0}
.photoR {float: right; margin: 0 0 .25em 10px}

.hr {font-size: 1px; border-bottom: 1px dotted #ccc; margin: 10px 0}
.bump {padding: 9px 0}

#gallery-bar {width: 500px; margin: 10px 0}
#gallery-bar img {float: left; margin-right: 9px}

/* ---[ colors ]--------------------- */
.green {color: #0e8441 !Important}
.yellow {color: #e1a404 !Important}
.grey {color: #919191 !Important}
.k {color: #000 !Important}
.w {color: #fff !Important}


/* ---[ table style ]--------------------- */
#table {width: 100%; padding: 0; margin: .4em 0}
#table th {color: #fff; border: 1px solid #fff; text-align: left; padding: 3px 6px; background: #0e8441 url(images/shell/table/th.gif) repeat-x; text-align: center}
#table td {border-right: 1px dotted #ccc; border-bottom: 1px dotted #ccc; background: #fff; padding: 3px 6px; text-align: center}
#table td.alt {background: #ececec}
#table td.left-cell {border-left: 1px dotted #ccc}

/* ---[ headings ]--------------------- */
h1 {font: normal 28px/1em Arial, Calibri, Helvetica, sans-serif; color: #333; padding: 28px 0 0 0; overflow: hidden; height: 0 !important; height /**/:28px}
h1#welcome-to-de-comics {background: #fff url("images/headings/welcome-to-de-comics.gif") no-repeat}
h1#in-the-news {background: #fff url("images/headings/in-the-news.gif") no-repeat}
h1#de-comics-gallery {background: #fff url("images/headings/in-the-news.gif") no-repeat}
h1#donation-corner {background: #fff url("images/headings/donation-corner.gif") no-repeat}
h1#sitemap {background: #fff url("images/headings/sitemap.gif") no-repeat}
h1#contact-de-comics {background: #fff url("images/headings/contact-de-comics.gif") no-repeat}
h1#contact-us {background: #fff url("images/headings/contact-us.gif") no-repeat}
h1#privacy-policy {background: #fff url("images/headings/privacy-policy.gif") no-repeat}
h1#news {background: #fff url("images/headings/news.gif") no-repeat}
h1#de-comics-publications {background: #fff url("images/headings/de-comics-publications.gif") no-repeat}
h1#de-comics {background: #fff url("images/headings/de-comics.gif") no-repeat}
h1#freebies {background: #fff url("images/headings/freebies.gif") no-repeat}
h1#gallery {background: #fff url("images/headings/gallery.gif") no-repeat}
h1#about-de-comics {background: #fff url("images/headings/about-de-comics.gif") no-repeat}
h1#how-to-order {background: #fff url("images/headings/how-to-order.gif") no-repeat}
h1#donate {background: #fff url("images/headings/donate.gif") no-repeat}
h1#error {background: #fff url("images/headings/error.gif") no-repeat}
h1#thank-you {background: #fff url("images/headings/thank-you.gif") no-repeat}

h2 {padding: .4em 0; font: normal 18px/1em Arial, Calibri, Helvetica, sans-serif; color: #333}
h3 {padding: .4em 0; font: bold 16px/1em Arial, Calibri, Helvetica, sans-serif; color: #e1a404}


/* ---[ contact form ]--------------------- */
.inputTextarea, .inputText {border: 1px solid #ccc; background: #f3f3f3; font-size: 11px}

#content form {margin: 0; padding: 0; font-size: 100%; width: auto}
#content form fieldset {clear: both; font-size: 100%; border-color: #ccc; border-width: 1px 0 0 0; border-style: dotted none none none; padding: 10px; margin: 0}
#content form fieldset legend {font-size: 1.25em; font-weight: bold; color: #666; margin: 0; padding: 0 .25em;}
#content label {font-size: 100%}
#content label u {font-style: normal; text-decoration: underline}
#content input, select, textarea {font: normal 11px/1.55em Arial, Calibri, Helvetica, sans-serif; color: #333}
#content textarea {overflow: auto}
#content form div {clear: left; display: block; width: 440px; height: 1%; margin: 5px 0 0 0; padding: 1px 3px}
#content form div fieldset {clear: none; border: 1px solid #666; margin: 0 0 0 144px; padding: 0 5px 5px 5px; width: 197px}
#content form div fieldset legend {font-size: 100%; padding: 0 3px 0 9px}
#content form div.required fieldset legend {font-weight: bold; color: #0e8441}
#content form div label {display: block; float: left; width: 130px; padding: 3px 5px; margin: 0 0 5px 0; text-align: right}
#content form div.optional label, label.optional {font-weight: normal}
#content form div.required label, label.required {font-weight: bold; color: #0e8441}
#content form div label.labelCheckbox, form div label.labelRadio {float: none; display: block; width: 200px; height: 1%; padding: 0; margin: 0 0 5px 142px; text-align: left}
#content form div fieldset label.labelCheckbox, form div fieldset label.labelRadio {margin: 0 0 5px 0; width: 170px}
#content form div img {border: 1px solid #000}
#content p.error {background-color: #f00; background-image: url(images/form/icon_error.gif); background-repeat: no-repeat; background-position: 3px 3px; color: #fff; padding: 3px 3px 5px 27px; border: 1px solid #000; margin: auto 100px}
#content form div.error {background-color: #ffffe1; background-image: url(images/form/required_bg.gif); background-repeat: no-repeat; background-position: top left; color: #666; border: 1px solid #f00}
#content form div.error p.error {background-image: url(images/form/icon_error.gif); background-position: top left; background-color: transparent; border-style: none; font-size: 88%; font-weight: bold; margin: 0 0 0 118px; width: 200px; color: #f00}
#content form div input, form div select, form div textarea {width: 200px; padding: 1px 3px; margin: 0}
#content form div input.inputFile {width: 211px}
#content form div option {font-size: 10px; padding: 2px 0}
#content form div select.selectOne {width: 211px; padding: 1px 3px}
#content form div select.selectMultiple {width: 211px}
#content form div input.inputCheckbox, form div input.inputRadio, input.inputCheckbox, input.inputRadio {display: inline; height: 14px; width: 14px; background-color: transparent; border-width: 0; padding: 0; margin: 0 0 0 140px}
#content form div input.inputSubmit, form div input.inputButton, input.inputSubmit, input.inputButton {background-color: #ccc; color: #000; width: auto; padding: 0 6px; margin: 0}
#content form div.submit div input.inputSubmit, form div.submit div input.inputButton {float: right; margin: 0 0 0 5px}
#content form div small {display: block; margin: 0 0 5px 142px; padding: 1px 3px; font-size: 9px; height: 1%}
#content form fieldset legend {line-height: 150%}
#content form input, form select, form textarea {background-color: #fff}
#content div.optional label:before {content: ''}
#content div.required label:before {content: ''}
#content form div label.labelCheckbox, form div label.labelRadio, label.labelCheckbox, label.labelRadio {display: block; width: 190px; height: 1%; padding: 4px 0 0 18px; text-indent: -18px; line-height: 120%}
#content form div label.labelCheckbox input.inputCheckbox, form div label.labelRadio input.inputRadio, label.labelCheckbox input.inputCheckbox, label.labelRadio input.inputRadio {margin: 0}
#content form div fieldset input.inputText, form div fieldset input.inputPassword, form div fieldset input.inputFile, form div fieldset textarea.inputTextarea {width: 160px; margin: 0 0 0 18px; margin: 0 0 0 -124px}
#content form div label.compact {display: inline; width: auto; padding: 4px 10px 0 0; text-indent: 0; margin: 0}
#content form div.wide label {float: none; display: block}
#content form div label.wide {width: 348px}
#content form div.wide input.inputText, form div.wide input.inputPassword, form div.wide input.inputFile, form div.wide select, form div.wide textarea {width: 344px; margin: 0}
#content form div.notes p, form div small {line-height: 125%}
#content form div.wide small {margin: 0 0 5px 0}


/* ---[ form check for spammers ]--------------------- */
#formsend {display: none}