/* Snowflakes official style sheet! */
 
html, body{ 
 margin:0; 
 padding:0;
 background-color: #9fa7d4; 
 font: 11px/165% 'Lucida Grande', Verdana, Helvetica, sans-serif;
 color: #666666;
 text-align:center; 
 background-image: url(images/background.png);
 background-repeat: repeat-x;

} 
 
 
 
 /* ------------------------------------------
   LAYOUT
------------------------------------------- */ 

#pagewidth{ 
 width:890px;
 background-color: #ffffff; 
 text-align:left;  
 margin-left:auto; 
 margin-right:auto;  
} 
 
#header{
 position:relative; 
 height:143px; 
 background-color:#FFFFFF; 
 width:100%;
} 

#comic-area{
 position:relative; 
  
 background-color:#FFFFFF; 
 width:100%;
 display:block; 
 margin:0 auto;
 text-align:center;
} 

#leftcol{
 width:205px; 
 float:left; 
 position:relative; 
 background-color:#FFFFFF; 
 }
 
#twocols{
 width:685px; 
 float:right; 
 position:relative;
 background-color: #FFFFFF; 
  }
 
#rightcol{
 width:205px; 
 float:right; 
 position:relative; 
 background-color:#FFFFFF;
 }
 
#maincol{background-color: #FFFFFF;  
 float: left; 
 display:inline; 
 position: relative; 
 width:480px; 
 }
 
#about-leftcol{
 width: 496px; 
 float:left; 
 position:relative; 
 background-color:#FFFFFF;
 }
 
 #castsmallcol {
 float: left;
 margin: 0 0 0 25px;
 width: 144px;
}

#castlargecol {
 float: left;
 margin: 0 0 0 15px;
 width: 305px;
}
 
#about-twocols{
 width:890px; 
 float:right; 
 position:relative; 
  }
 
#about-rightcol{
 width:391px; 
 float:right; 
 position:relative; 
 background-color:#FFFFFF;
 }
 
#about-maincol{background-color: #FFFFFF;  
 float: left; 
 display:inline; 
 position: relative;
 width: 425px; 
 }

 
 
 #contact-leftcol{
 width:250px; 
 float:left; 
 position:relative; 
 background-color:#FFFFFF; 
 }
 
#contact-twocols{
 width:590px; 
 float:right; 
 position:relative;
 background-color: #FFFFFF; 
  }
 
#contact-rightcol{
 width:290px; 
 float:right; 
 position:relative; 
 margin-left:-310px;
 background-color:#FFFFFF;
 }
 
#contact-maincol{background-color: #FFFFFF;  
 float: left; 
 display:inline; 
 position: relative; 
 width 250px; 
 }
 
 
 
 
#footer{
 height:60px; 
 background-color:#deeef4;
 background-image: url(images/background-footer.png);
 background-repeat: repeat-x; 
 clear:both;
 } 
 
 #news-area{
 width: 457px; 
 background-color:#dce8ef;
 clear:both;
 padding: 0px 0 0 0px;
 } 

 #tweetbox{
 width: 200px; 
 background-color:#dce8ef;
 clear:both;
 margin: 15px 0 0 15px;
 } 
 
 #column-pad{
 padding: 19px 0 0 20px;
 }
 
  #comicnav{
 padding: 20px 0 40px; 0px;
 }
 
   #characterpic{
 padding: 0 0 10px 25px;
 margin: 0 0 0 0;
 float: left;
 }
 
   #about-headers{
 padding: 0 0 0 25px;
 }
 
  #contact-headers{
 padding: 25px 0 0 25px;
 }
 
  #spacer{
 padding: 4px 0 4px 0;
 }
 
 #spacer2{
 padding: 20px 0 20px 0;
 clear: both;
 }
 
 #banners{
 margin: 20px 25px 25px 25px;
 float: center;
 }
 

 
 
 #selector{
 padding: 0 0 0 0;
 margin: 0 0 0 0;
 line-height: 100%;
 display: inline;
 float: top;
 text-align: left;
 font-size: 10px;
 font-weight: bold;
 color: #5b5b5b;	
 font-family: 'Lucida Grande', Verdana, Helvetica, sans-serif;
 }


 
 /* ------------------------------------------
   FONT ELEMENTS
------------------------------------------- */ 

p {
    width: 90%;
}

ul {
    list-style-type: none;
    line-height: 150%
    margin:0px;
    padding: 0 0 0 0;
}

li {
    list-style-type: none;
    line-height: 150%
    margin:0px;
    padding: 0 0 0 0;
}

h1 {
    font: 11px/165% 'Lucida Grande', Verdana, Helvetica, sans-serif;
    font-size: 18px;
    line-height: 13px;
    font-weight: bold;
    color: #3a4570;
    padding: 0 0 0 15px;
}

h2 {
    font: 11px/165% 'Lucida Grande', Verdana, Helvetica, sans-serif;
    font-size: bold;
    color: #000000;
    border-bottom: 1px solid #C6EC8C
}

h3 {
    font: 11px/165% 'Lucida Grande', Verdana, Helvetica, sans-serif;
    font-size: 18px;
    font-weight: bold;
    line-height: 100%;
    color: #434343;
    padding: 0 0 0 0px;
    margin: 0 0 0 0;
}

h4 {
    font: 11px/165% 'Lucida Grande', Verdana, Helvetica, sans-serif;
    font-size: 18px;
    font-weight: bold;
    line-height: 100%;
    color: #434343;
    padding: 0 0 0 30px;
    margin: 0 0 -7px 0;
}

a:link {
    color: #323f67;
    text-decoration: underline;
}

li:link {
    color: #323f67;
    text-decoration: none;
}

a:visited {
    color: #323f67;
    text-0decoration: underline;
}

li a:visited {
    color: #323f67;
    text-decoration: none;
}

a:hover {
    color: #323f67;
    text-decoration: none;
}

li a:hover {
    color: #323f67;
    text-decoration: none;
}


.comic-news {
	font-size: 12px;
	line-height: 140%;
	padding: 0 0 0 15px;
	color: #434343;	
	font-family: 'Lucida Grande', Verdana, Helvetica, sans-serif;
	}
	
.comic-date {
	font-size: 10px;
	line-height: 100%;
	font-weight: bold;
	padding: 0 0 0 15px;
	color: #3a4570;	
	font-family: 'Lucida Grande', Verdana, Helvetica, sans-serif;
	}
	
.blog-news {
	font-size: 12px;
	line-height: 140%;
	width: 98%;
	padding: 0 0 0 5px;
	margin-bottom: 70px;
	color: #434343;	
	font-family: 'Lucida Grande', Verdana, Helvetica, sans-serif;
	}
	
.blog-meta {
	font-size: 10px;
	line-height: 140%;
	font-weight: bold;
	padding: 0 0 0 5px;
	color: #5b5b5b;	
	font-family: 'Lucida Grande', Verdana, Helvetica, sans-serif;
	}
	
.about-text {
	font-size: 12px;
	line-height: 120%;
	width: 88%;
	padding: 0 0 0 0px;
	margin-bottom: 10px;
	color: #434343;	
	font-family: 'Lucida Grande', Verdana, Helvetica, sans-serif;
	}
	
	.about-text2 {
	font-size: 12px;
	line-height: 120%;
	width: 88%;
	padding: 0 0 0 25px;
	margin-bottom: 10px;
	color: #434343;	
	font-family: 'Lucida Grande', Verdana, Helvetica, sans-serif;
	}
	
	.age-text {
	font-size: 12px;
	line-height: 100%;
	font-style: italic;
	padding: 7px 0 0 0;
	margin: 0 0 -5px 0;
	color: #757575;	
	font-family: 'Lucida Grande', Verdana, Helvetica, sans-serif;
	}
	
.character-text {
	font-size: 12px;
	line-height: 130%;
	width: 97%;
	padding: 25px 0 0 0px;
	margin-bottom: 0px;
	color: #434343;	
	font-family: 'Lucida Grande', Verdana, Helvetica, sans-serif;
	}
	
.contact-text {
	font-size: 12px;
	line-height: 130%;
	width: 95%;
	padding: 0 0 0 30px;
	margin-bottom: 16px;
	color: #434343;	
	font-family: 'Lucida Grande', Verdana, Helvetica, sans-serif;
	}	

.contact-subs {
	font-size: 10px;
	line-height: 100%;
	width: 80%;
	font-weight: bold;
	padding: 0 0 0 30px;
	margin-bottom: -8px;
	color: #434343;	
	font-family: 'Lucida Grande', Verdana, Helvetica, sans-serif;
	}
	
	
.sidebar-text {
	font-size: 11px;
	line-height: 130%;
	width: 99%;
	padding: 0 0 0 0;
	color: #434343;	
	font-family: 'Lucida Grande', Verdana, Helvetica, sans-serif;
	}	
	
	
	
.footer-text {
 font-size: 10px;
 line-height: 130%;
 text-align: center;
 font: 'Lucida Grande', Verdana, Helvetica, sans-serif;
 color: #5a5b5b;
 padding: 15px 0 0 25px;
 }
 

/** MENU NAVIGATION ROLLOVERS **/

a.comicRollover {  
     display: inline;  
     float: left;
     width: 80px;  
     height: 23px;  
     background: url(images/menu_comic.gif) no-repeat 0 0;  
     overflow: hidden;  
     text-indent: -10000px;  
     font-size: 0px;  
     line-height: 0px;  
}

 a:hover.comicRollover {  
     background-position: 0px -23px;  
}


a.aboutRollover {  
     display: inline;  
     float: left;
     width: 93px;  
     height: 23px;  
     background: url(images/menu_about.gif) no-repeat 0 0;  
     overflow: hidden;  
     text-indent: -10000px;  
     font-size: 0px;  
     line-height: 0px;  
}

 a:hover.aboutRollover {  
     background-position: 0px -23px;  
}

a.contactRollover {  
     display: inline;  
     float: left;
     width: 109px;  
     height: 23px;  
     background: url(images/menu_contact.gif) no-repeat 0 0;  
     overflow: hidden;  
     text-indent: -10000px;  
     font-size: 0px;  
     line-height: 0px;  
}

 a:hover.contactRollover {  
     background-position: 0px -23px;  
}


a.rssRollover {  
     display: inline;  
     float: left;
     width: 106px;  
     height: 23px;  
     background: url(images/menu_rss.gif) no-repeat 0 0;  
     overflow: hidden;  
     text-indent: -10000px;  
     font-size: 0px;  
     line-height: 0px;  
}

 a:hover.rssRollover {  
     background-position: 0px -23px;  
}


a.twitchrisRollover {  
     display: inline;  
     float: left;
     width: 169px;  
     height: 62px; 
     margin: 7px 0 0 0;
     background: url(images/img_twit-chris.gif) no-repeat 0 0;  
     overflow: hidden;  
     text-indent: -10000px;  
     font-size: 0px;  
     line-height: 0px;  
}

 a:hover.twitchrisRollover {  
     background-position: 0px -62px;  
}

a.twitzachRollover {  
     display: inline;  
     float: left;
     width: 169px;  
     height: 62px;
     margin: 7px 0 0 0;  
     background: url(images/img_twit-zach.gif) no-repeat 0 0;  
     overflow: hidden;  
     text-indent: -10000px;  
     font-size: 0px;  
     line-height: 0px;  
}

 a:hover.twitzachRollover {  
     background-position: 0px -62px;  
}


a.twitjamesRollover {  
     display: inline;  
     float: left;
     width: 169px;  
     height: 62px;
     margin: 7px 0 0 0;  
     background: url(images/img_twit-james.gif) no-repeat 0 0;  
     overflow: hidden;  
     text-indent: -10000px;  
     font-size: 0px;  
     line-height: 0px;  
}

 a:hover.twitjamesRollover {  
     background-position: 0px -62px;  
}

a.linkRollover {  
     display: inline;  
     float: left;
     width: 169px;  
     height: 62px; 
     margin: 3px 0 7px 0; 
     background: url(images/img_link_banners.gif) no-repeat 0 0;  
     overflow: hidden;  
     text-indent: -10000px;  
     font-size: 0px;  
     line-height: 0px;  
}

 a:hover.linkRollover {  
     background-position: 0px -62px;  
}



/** Highlights the menu button for the current page **/

.navcurrent-comic {
	display: inline;  
     float: left;
     width: 80px;  
     height: 23px;  
     background: url(images/menu_comic.gif) no-repeat 0 0;  
     overflow: hidden;  
     text-indent: -10000px;  
     font-size: 0px;  
     line-height: 0px;
	 background-position: 0px -46px;
}

.navcurrent-about {
	 display: inline;  
     float: left;
     width: 93px;  
     height: 23px;  
     background: url(images/menu_about.gif) no-repeat 0 0;  
     overflow: hidden;  
     text-indent: -10000px;  
     font-size: 0px;  
     line-height: 0px;
	 background-position: 0px -46px;
}

.navcurrent-contact {
	display: inline;  
     float: left;
     width: 109px;  
     height: 23px;  
     background: url(images/menu_contact.gif) no-repeat 0 0;  
     overflow: hidden;  
     text-indent: -10000px;  
     font-size: 0px;  
     line-height: 0px;
	 background-position: 0px -46px;
}





	
  /* ------------------------------------------
   MISC
------------------------------------------- */ 




 /* *** Float containers fix:
 http://www.csscreator.com/attributes/containedfloat.php *** */ 
.clearfix:after {
 content: "."; 
 display: block; 
height: 0; 
 clear: both; 
 visibility: hidden;
 }
 
.clearfix{display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix{height: 1%;}
.clearfix{display: block;}
/* End hide from IE-mac */  


 
 /*printer styles*/ 
 @media print{ 
/*hide the left column when printing*/ 
#leftcol{display:none;} 

/*hide the right column when printing*/ 
#rightcol{display:none;} 
#twocols, #maincol{width:100%; float:none;}
}