/*General Stuff*/
/*Here starts the CSS for the You Drew It, You can't Un-draw It mainpage.*/
/*Here are the colors:
Blues:
-Light:#d4d8ef
-Normal:#454752
-Dark:#303137

Greens:
-Light:aba99b
-Normal:#94917f
*/

body {
 background:#fff url(images/background_body.png) repeat-x;
 font-family:Verdana, Arial, Helvetica, sans-serif;
 font-size:75%;
 color:#000000;
 margin:0 0 0 0;
 padding:0 0 0 0;
 text-align:center;
}

a:link {
 text-decoration:underline;
 color:#9d9ddd;
}

a:visited{
 text-decoration:underline;
 color:#9B9887;
}

a:hover {
 font-weight:underline;
 text-decoration:none;
 color:#7F8294;
}

a:active {
 text-decoration:none;
 color:#9d9ddd;
}

body h1 {
 text-decoration:bold;
 font-size:13pt;
}

body h2 {
 text-decoration:bold;
 font-size:97%;
}

img {
 border: 0;
}


/*Placment Stuff*/
/*These are for the position of universal page elements.  Everything here appears on all pages.*/

#container {
 background:#fff;
 width:1000px;
 margin-right:auto;
 margin-left:auto;
 text-align:left;
}

#header {
 background:#454752 url(images/header.png) no-repeat top center;
 padding:0;
 margin:0;
 text-align:center;
 height:100px;
 width:auto;
 border-bottom:3px solid #aba99b;
}

#footer {
 background:#94917F;
 font-size:90%;
 color:#ffffff;
 float:left;
 width:100%;
 padding:5px 0 5px 0;
 margin:0 auto 0 auto;
 bottom:0;
 border-top:3px solid #ABA99B;
}

#main {
 background:#ffffff;
 float:left;
 width:1000px;
 border-left:1px solid #ABA99B;
 /*padding-top:10px;
 padding-bottom:10px;*/
 /*border-bottom:3px solid #454752;*/
}

#left_area {
 background:transparent;
 float:left;
 width:750px;
 padding: 5px;
 /*border-right:1px solid #ABA99B;*/
}

#left_area p {
 padding:5px;
}

#left_area h2 {
 padding:0 5px 0 5px;
 margin:0;
 background:#fff;
 color:#000;
 font-size:150%;
 /*border-bottom:1px solid #ABA99B;*/
}

#left_area h1 {
 padding:0 5px 0 5px;
 margin:0;
 font-size:125%;
}

/*#middle_area {
 background:transparent;
 float:left;
 width:150px;
 padding:0 5px 0 5px;
 text-align:center;
}*/

#middle_area h1{
 font-size:130%;
}

#right_area {
 background:#transparent;
 float:right;
 width:222px;
 padding:0 5px 5px 5px;
 text-align:center;
 /*border-left:1px solid black;
 border-right:1px solid black;*/
}

#right_area h1{
 font-size:130%;
}

/*Menu*/
/*Another Stu Nicholls menu writeup.  It's the one thing I'm bad at when it comes to CSS code.  I can never remember how to do it, so I just use his.*/
/*Credits: CSSpplay */
/*URL: http://www.cssplay.co.uk/menus/pro_one */

.menu1 {padding:0 0 0 32px; margin:0; list-style:none; height:35px; background:#fff url(images/button1.png); position:relative; /*border:1px solid #000;*/ border-width:0 1px; /*border-top:3px solid #aba99b;*/ border-bottom:3px solid #aba99b;}
.menu1 li {float:left;}
.menu1 li a {display:block; float:left; height:35px; line-height:35px; color:#aba99b; text-decoration:none; font-size:11px; font-family:arial, verdana, sans-serif; font-weight:bold; text-align:center; padding:0 0 0 8px; cursor:pointer;}
.menu1 li a b {float:left; display:block; padding:0 16px 0 8px;}
.menu1 li.current a {color:#d4d8ef; background:url(images/button3.png);}
.menu1 li.current a b {background:url(images/button3.png) no-repeat right top;}
.menu1 li a:hover {color:#94917f; background:#000 url(images/button2.png);}
.menu1 li a:hover b {background:url(images/button2.png) no-repeat right top;}
.menu1 li.current a:hover {color:#94917f; background:#000 url(images/button3.png); cursor:default;}
.menu1 li.current a:hover b {background:url(images/button3.png) no-repeat right top;}

/*Sub-Menu*/
/*Repeat code for sub menus on various pages*/

.menu2 {padding:0 0 0 32px; margin:0; list-style:none; height:35px; background:#fff url(images/button1.png); position:relative; /*border:1px solid #000;*/ border-width:0 1px; /*border-top:5px solid #aba99b;*/ border-bottom:1px solid #444;}
.menu2 li {float:left;}
.menu2 li a {display:block; float:left; height:35px; line-height:35px; color:#aba99b; text-decoration:none; font-size:11px; font-family:arial, verdana, sans-serif; font-weight:bold; text-align:center; padding:0 0 0 8px; cursor:pointer;}
.menu2 li a b {float:left; display:block; padding:0 16px 0 8px;}
.menu2 li.current a {color:#d4d8ef; background:url(images/button3.png);}
.menu2 li.current a b {background:url(images/button3.png) no-repeat right top;}
.menu2 li a:hover {color:#94917f; background:#000 url(images/button2.png);}
.menu2 li a:hover b {background:url(images/button2.png) no-repeat right top;}
.menu2 li.current a:hover {color:#94917f; background:#000 url(images/button3.png); cursor:default;}
.menu2 li.current a:hover b {background:url(images/button3.png) no-repeat right top;}

/*Individual Page Changes*/
/*These are for tweaked the various pages of the site.*/

/*This is for the comic pages, it makes the right area larger to show more information, and changes the container's background.*/
#comic_main {
 background:url(images/comic_background.png) left top;
 float:left;
 width:1000px;
 /*padding-top:10px;
 padding-bottom:10px;*/
 border-left:1px solid #ABA99B;
 border-bottom:7px solid #454752;
}

#comic_main img{
 border-top:1px solid black;
 border-bottom:1px solid black;
 margin:5px 0 5px 0;
}

#comic_left_area {
 background:transparent;
 float:left;
 width:600px;
}

#comic_left_area p {
 padding:0;
}

table.udiucudi {
 border-collapse: separate;
 border-spacing:10px;
}

#sub_right_area {
 background:transparent;
 float:right;
 width:375px;
 padding:0 5px 5px 5px;
 /*border-left:1px solid black;
 border-right:1px solid black;*/
}

#sub_right_area h1{
 font-size:130%;
}

/*Products page tweaks*/
#products p {
}


/* CG nav setup */
#cg_nav1 { height: 50px; width: 400px; margin: 0 auto; }
#cg_nav1 a, #cg_nav1 span {
height: 50px; width: 100px; float: left;
background: #fff top left no-repeat; }
#cg_nav1 a span, #cg_nav1 span span,
#cg_nav1 .cg_divider { display: none; }

/* CG nav images */
a#cg_first { background: url(cg_nav/first.gif); }
a#cg_back { background: url(cg_nav/back.gif); }
a#cg_next { background: url(cg_nav/next.gif); }
a#cg_last { background: url(cg_nav/last.gif); }

/* CG nav rollover images */
a#cg_first:hover { background: url(cg_nav/first_on.gif); }
a#cg_back:hover { background: url(cg_nav/back_on.gif); }
a#cg_next:hover { background: url(cg_nav/next_on.gif); }
a#cg_last:hover { background: url(cg_nav/last_on.gif); }

/* CG nav unavailable images */
span#cg_first { background: url(cg_nav/first_off.gif); }
span#cg_back { background: url(cg_nav/back_off.gif); }
span#cg_next { background: url(cg_nav/next_off.gif); }
span#cg_last { background: url(cg_nav/last_off.gif); }