@charset "UTF-8";

/*----------
   Layout
----------*/

html {
overflow-y:scroll; /* Firefox scrollbar fix */
height:100%; /* Opera fix */
}

html, body { min-width:988px; }

body {
background:#383838 url('images/body_bg.gif') center repeat-y;
margin:0;

}

#wrap {
margin:0 auto;
padding:0 0 0 4px;
width:984px;
}

#leftcolumn {
width:790px;
background:#334c9a;
float:left;
position:relative;
}

	#top {
	background:#334c9a url('images/banner.jpg');
	height:176px;
	}
	
	#intro {
	position:absolute;
	text-indent:-9999px;
	}

	#content {
	padding:1px 0;
	background:#213163 url('images/content_bg.png') repeat-y;
	min-height:230px;
	}
		#content #padding 				{ margin:25px 35px 0 35px; }
		body.comic #content #padding 	{ margin:25px 20px 0 20px; }
		
		#contenttop 	{ height:17px; background:url('images/content_top.png'); position:absolute; width:100%; z-index:1; }
		#contentbottom 	{ height:17px; background:url('images/content_bottom.png'); }
		
		#comic { }

#footer {
width:500px;
background:#213163 url('images/footer_bg.png');
margin:2px auto 5px auto;
}

	#footertop 		{ height:17px; background:url('images/footer_top.png'); }
	#footerbottom 	{ height:17px; background:url('images/footer_bottom.png'); }

#rightcolumn {
width:186px;
float:left;
margin:176px 0 0 6px;
}


/*---------
   Menu
---------*/

#menu {
width: 321px;
height: 41px;
padding:0;
background: url('images/menu.png');
position:absolute;
margin:154px 0 0 234px;
z-index:2;
}
		
#menu li {
/*display:inline;*/
height:100%;
position: absolute;
text-indent:-9999px;
overflow:hidden;
}

#menu a {
display:block;
height:100%;
}

	#home 	{ left: 0px; width: 86px; }
	#extras { left: 86px; width: 80px; }
	#info	{ left: 168px; width: 60px;	}
	#forum 	{ left: 226px; width: 95px; }
	
	#home a:hover 		{ background: url('images/menu.png') 0 -41px; }
	#extras a:hover 	{ background: url('images/menu.png') -86px -41px; }
	#info a:hover 		{ background: url('images/menu.png') -168px -41px; }
	#forum a:hover 		{ background: url('images/menu.png') -226px -41px; }


/*-------
  Text 
-------*/

body {
font: 9pt/1.3 Verdana, Geneva, sans-serif;
color:#9ac5f9;
}

p { margin:1em 0; }
	#footer p { margin: 0; text-align:center; }
	#notes p { margin:0 14px; color:#213163; }
	body.error #content p { text-align:center; margin-top:100px; font-size:150%;}
	p#published { margin:0; position: absolute; right:20px; font-size:80%; }

h2 { font-size:140%; margin:0.8em 0; }

ul { margin:1em 0; padding:0 0 0 1.5em; }


/*-------
  Links 
-------*/

a:link 		{ color:#9ac5f9; text-decoration:underline; }
a:visited 	{ color:#9ac5f9; text-decoration:underline; }
a:active 	{ color:#FFF; text-decoration:underline; }
a:hover 	{ color:#FFF; text-decoration:underline; }

#menu a:focus, .nav a:focus { outline: none; }

/*----------
   Images 
-----------*/

img { border:none; }


/*----------
   Notes 
-----------*/

p.slick-toggle {
margin:15px auto 10px auto;
background:url('images/notes.png');
width:141px;
height:41px;
text-indent:-9999px;
overflow:hidden;
cursor:pointer;
}
	
	p.slick-toggle:hover { background: url('images/notes.png') 0 -41px; }

#notes {
background:#9ac5f9 url('images/notes_bg.png');
margin:10px auto 0px auto;
width:500px;
}

	#notestop 		{ height:14px; background:url('images/notes_top.png'); }
	#notesbottom 	{ height:14px; background:url('images/notes_bottom.png'); }


/*------------------
  Comic navigation 
------------------*/

.nav {
text-align:center;
width:100%;
position:relative;
}
	
	.top 	{ margin:32px auto 18px auto; }
	.bottom { margin:18px auto 8px auto }

.title {
width:67px;
height:68px;
background-image:url('images/title.png');
margin:0 auto;
padding:0 1px 0 0;
cursor:pointer;
position:relative;
z-index:2;
font-size:17pt;
font-weight:bold;
text-shadow: 0px 0px 3px #000;
letter-spacing:-2px;
}

	.title:hover { 
	color:#FFF;
	background: url('images/title.png') 0 -68px;
	text-shadow: 0px 0px 1px #9ac5f9;
	}
	
	.title img {
	vertical-align:middle;
	height:60px;
	width:1px;
	}
	
.list {
list-style:none;
margin:0;
padding:3px;
position:absolute;
width:70px;
left:50%;
margin-left:-39px;
background:#324b99;
z-index:3;
display:none;
border:1px solid #466ad7;
border-radius:8px;
-moz-border-radius:8px;
-webkit-border-radius:8px;
}

	.top .list { top:64px; }
	.bottom .list { bottom:64px; }

	body.njs .title:hover + .list { display:block; }
	body.njs .list:hover { display:block; }
	
	.list li { padding:0; margin:0; }
	
	.list a {
	display:block;
	text-decoration:none;
	/*line-height:1.7;*/
	border:1px solid #324b99;
	border-radius:6px;
	-moz-border-radius:6px;
	-webkit-border-radius:6px;
	text-shadow: 1px 1px 2px #131d3b;
	padding:3px 0;
	
	}
		.list a:hover {
		background:#213163;
		border:1px solid #3758bb;
		}

.buttons {
width:428px;
height: 37px;
left:50%;
margin:0 0 0 -214px;
padding:0;
position:absolute;
top:15px;
z-index:1;
}

	.buttons li {
	position: absolute;
	text-indent:-9999px;
	overflow:hidden;
	height:100%;
	}
	
		.buttons .first		{ left: 0px; 	width: 86px; 	background: url('images/navi.png') 0 0; }
		.buttons .back 	{ left: 86px; 	width: 100px;	background: url('images/navi.png') -86px 0; }
		.buttons .next 		{ left: 266px; 	width: 80px; 	background: url('images/navi.png') -326px 0; }
		.buttons .latest 	{ left: 346px; 	width: 82px; 	background: url('images/navi.png') -406px 0; }
	
	.buttons a {
	display:block;
	height:100%;
	}
			
		.first a 	{ background: url('images/navi.png') 0 -74px; }
		.back a { background: url('images/navi.png') -86px -74px; }
		.next a 	{ background: url('images/navi.png') -326px -74px; }
		.latest a 	{ background: url('images/navi.png') -406px -74px; }
		
		.first a:hover 		{ background: url('images/navi.png') 0 -37px; }
		.back a:hover 	{ background: url('images/navi.png') -86px -37px; }
		.next a:hover 		{ background: url('images/navi.png') -326px -37px; }
		.latest a:hover 	{ background: url('images/navi.png') -406px -37px; }


/*---------
    Ads
---------*/

#rightadd {
width:160px;
height:600px;
padding:0px 13px;
background: #334c9a url('images/rightad_bg.png');
}
	
	#rightadtop 	{ height:13px; background:url('images/rightad_top.png'); }
	#rightadbottom 	{ height:13px; background:url('images/rightad_bottom.png'); }

#bottomad {
width:728px;
height:90px;
margin:5px auto;
}


/*-----------
    Share
-----------*/

#share {
width:450px;
margin:25px auto 20px auto;
text-align:center;
}

	#share h2 {
	margin: 0 auto 5px auto;
	text-indent:-9999px;
	overflow:hidden;
	height:20px;
	width:143px;
	background:url('images/share.png');
	}

	#addthis { height:32px; margin:0 0 5px 0; }

		a.addthis_button_facebook_like { margin:7px 0 0 0; /* background:url('images/facebook_like_bg.png') right top no-repeat; */ }
	
	#facebook_group { display:inline-block; position:relative; top: -7px; }
	
	a.facebook {
	padding:2px 5px 0px 2px;
	font-size:90%;
	text-decoration:none;
	background:#eceef5;
	border:1px solid #bbcae7;
	color:#2d4c8d;
	border-radius:3px;
	-moz-border-radius:3px;
	-webkit-border-radius:3px;
	display:inline-block;
	font-family: "lucida grande",tahoma,verdana,arial,sans-serif;
	}
	
		a.facebook:hover {
		border:1px solid #8cabe7;
		background-color:#bbcae7;
		}
		
		a.facebook img {
		vertical-align:middle;
		border:none;
		margin:-2px 2px 0 0;
		width:18px;
		height:18px;
		}

	#flattr { display:inline-block; position:relative; top:-2px; }
	#paypal { display:inline-block; }