/*  
Theme Name: ssGeneric
Theme URI: http://stripshow.monkeylaw.org
Description: stripShow Generic theme, version 2.0
Version: 2.0
Author: Brad Hawkins
Author URI: http://stripshow.monkeylaw.org
Flooble: Flatchmo

*/

/* Widths -- this theme is designed to have three columns (left, main, right) on the index page, and two columns (main, right) on all other pages. */
#page { 
	width: 820px;  /* Master page with */
	}
#bodyColumn1 { /* Width of the left column on index page, right column on other pages */
	width: 200px;
	}
#bodyColumn3 {
	width: 200px; /* width of the right column on index page */
	}
#below-fold.index #bodyColumn2 { /* width of central column on index page */
	width: 420px;
	}
#below-fold.single #bodyColumn2 { /* width of main column on single pages */
	width: 620px;
	}
#below-fold.page #bodyColumn2 { /* width of main column on "page" pages */
	width: 600px;
	padding: 10px;
	}
	

/* HTML Tags */
body {
	background-color: #ffffff;
	color: #000000;
	}
h2 {
	text-align: center;
	font-size: 1.5em;
	}
a:link, a:visited {
	color: #000000;
	text-decoration: none;
	font-weight: bold;
	}
a:hover { 
	text-decoration: underline;
	}
blockquote {
	font-size: .9em;
	color: #666666;
	}
#page {
	margin: 0 auto;
	border-left: 2px solid #000000;
	border-right: 2px solid #000000;
	}


.storyline_dropdown select {
	background-color: #ffffff;
	color: #000000;
	border: 1px solid #000000;
	width: 180px;
	}

.storyline_dropdown input {
	background-color: #ffffff;
	border: 1px solid #000000;
	margin-top: 4px;
	color: #000000;
	font-weight: bold;
	}
.storyline_dropdown input:hover {
	background-color: #000000;
	border: 1px solid #ffffff;
	color: #ffffff;
	}

#page {
	color: #000000;
	}
#comic img {
	background-color: #ffffff;
	}
	
.social-bookmark {
	background-color: #000000;
	color: #ffffff;
	
	height: 100px;
	}
#comicSection.vertical .social-bookmark {
	width: 166px;
	margin: 0 auto;
	}
.social-bookmark .icons {
	padding: 4px 4px 4px 7px;
	text-align: center;
	}
.social-bookmark .icons a {
	width: 24px;
	height: 24px;
	padding: 1px;
	}
.social-bookmark .icons a img {
	width: 24px;
	height: 24px;
	}
#comicSection.horizontal .icons a img {
	width:16px;
	height: 16px;
	}
.story-nav fieldset {
	margin: 0;
	border: 0;
	background-color: #000000;
	}

/* The contents of Page entries */
.page-content {
	padding: 10px;
	}
.page-content h2 {
	font-size: 1.5em;
	}
#bodyColumn2 ul h2 {
	text-align: left;
	font-size: 1.2em;
	}


/* Post Boxes -- these boxes are where content goes. They are numbered rather than named to provide more flexibility. Give your boxes a class of "post" etc and then an ID giving the specific name of the box. */

.post {
	background-color: #f0f0f0;
	border: 1px solid #000000;
	margin-bottom: 10px;
	}

.post h2 {
	background-color: #000000;
	text-align: center;
	margin: 0 0 8px 0;
	padding: 0px 4px;
	line-height: 32px;
	font-size: 1em;
	color: #ffffff;
	}
.post h2 a:link, .post h2 a:visited {
	color: #ffffff;
	text-decoration: none;
	}
.post h3 {
	background-color: #000000; 
	color: #ffffff;
	margin: 0 0 8px 0;
	padding: 0 4px;
	line-height: 24px;
	font-size: 1em;
	}
.post h3 a:link, .post h3 a:visited {
	color: #ffffff;
	text-decoration: none;
	}
.post h3 a:hover {
	color: #ffffff;
	}
.entry {
	margin: 8px;
	}
.social-bookmark2 {
	border-top: 1px solid #000000;
	padding: 2px;
	text-align: center;
	}
.social-bookmark2 img {
	height: 16px;
	width: 16px;
	}
.postmetadata {
	font-size: .75em;
	border-top: 1px solid #000000;
	padding: 2px;
	}
#singleColumns .postmetadata {
	border: 1px solid Black;
	padding: 4px;
	}
.postmetaitem {
	padding: 2px 2px 2px 20px;
	line-height: 16px;
	background-color: transparent;
	background-repeat: no-repeat;
	}
.postrss {
	background-image: url(images/rss.png);
	}
.postauthor {
	background-image: url(images/author.png);
	}
.postdate {
	background-image: url(images/calendar.png);
	}
.postcomments {
	background-image: url(images/quote.png);
	}
.postcat {
	clear: left;
	}
.postedit {
	background-image: url(images/edit.png);
	}
#comicSection.vertical .postmetaitem {
	line-height: 18px;
	padding: 3px 0 3px 20px;
	}

/* Comments */
.commentlist {
	margin: 20px;
	width: 500px;
	padding: 10px;
	margin: 0;
	list-style: none;
	}
	.commentlist li {
		border: 1px solid #000000;
		margin-bottom: 10px;
		}
			.commentlist li p {
				padding: 10px;
				margin: 0;
				}
	.commentmetadata {
		font-size: .8em;
		text-align: right;
		font-style: normal;
		display: block;
		background: #000000;
		padding: 4px;
		color: #ffffff;
		}
		.commentmetadata cite {
			font-size: 1.2em;
			padding-right: 10px;
			}
		.commentmetadata a:link, .commentmetadata  a:visited {
		padding: 2px;
			color: #ffffff;
			}
		.commentmetadata a:hover {
			background-color: #ffffff;
			color: #000000;
			}
span.avatar {
	width: 32px;
	height: 32px;
	float: left;
	margin: 5px;
	}

.commentmetadata {
	font-size: 10px;
	display: block;
	text-align: right;
	clear: both;
	}
form#commentform {
	width: 500px;
	}
#commentform .commentinput {
	background: #f0f0f0;
	border: 1px solid #000000;
	padding: 2px;
	}
	#commentform input#submit {
		border: 1px solid #ffffff;
		background-color: #000000;
		color: #ffffff;
		font-weight: bold;
		}
		#commentform input#submit:hover {
			background-color: #ffffff;
			border: 1px solid #000000;
			color: #000000;
			}
textarea#comment {
	background: #f0f0f0;
	width: 80%;
	padding: 2px;
	border: 1px solid #000000;
	font-size: .8em;
	font-family: Verdana;
	}

.social-bookmark {
	font-size: .75em;
	clear: right;
	
	}
.social-bookmark h3 {
	font-size: 1em;
	margin: 0px;
	padding: 4px 4px 0 4px;
	}
	

/* Fonts */
body {
	font-family: Helvetica, sans-serif;
	font-size: 11pt;
	margin: 0px;
	}
h3 {
	font-size: 1.2em;
	}
a img {
	border: none;
	}

/* Positioning and size */
body {
	margin: 0px;
	}
#pageHeader {
	position: relative;
	height: 108px; 
	margin: 0px auto 1px auto;
	background-color: #000000;
	overflow: hidden;
	}
#pageHeaderLogo {
	height: 108px;
	width: 300px;
	position: absolute;
	top: 0px;
	left: 0px;
	}
#pageHeaderBody {
	height: 108px;
	width: 520px;
	position: absolute;
	top: 0px;
	right: 0px;
	}
#pageHeaderAdBox {
	text-align: center;
	vertical-align: middle;
	line-height: 30px;
	background: transparent url(images/advertisement.png) no-repeat;
	position: relative;
	width: 480px;
	height: 60px;
	margin: 24px auto;
	}
#pageHeader h1 {
	font-size: 3em;
	margin: 0px;
	padding: 20px 10px 0 10px;
	}
	#pageHeader h1 a {
	color: #ffffff;
		text-decoration: none;
		}
	#pageHeader h1 a:hover {
		color: #ffffff;
		background-color: #000000;
		}

#pageHeader_01 {
	position: absolute;
	left: 0px;
	width: 230px;
	height: 108px;
	background-image: url(images/header_01.png);
	}
#pageHeader_02 {
	position: absolute;
	left: 230px;
	width: 670px;
	height: 108px;
	background-image: url(images/header_02.png);
	}

#menuBar {
	border-top: 1px solid #000000;
	border-bottom: 1px solid #000000;
	height: 28px;
	background-color: #000000;
	position: relative;
	}

#mainMenu {
	clear: right;
	height: 28px;
	margin: 0;
	font-weight: bold;
	width: 650px;
	float: left;
	overflow: hidden;
	}
#mainMenu ul {
	list-style: none;
	padding: 0;
	margin: 0;
	}
#mainMenu ul li {
	float: left;
	display: inline;
	margin: 0;
	padding: 0;
	}
#mainMenu ul li a {
	text-transform: uppercase;
	padding-left: 10px;
	padding-right: 10px;
	line-height: 28px;
	display: block;
	text-decoration: none;
	color: #ffffff;
	}
#mainMenu ul li a:link, #mainMenu ul li a:visited {
	background: transparent;
	}
#mainMenu ul li a:hover, #mainMenu ul li a:active {
	text-decoration: none;
	background-color: #ffffff;
	color: #000000;
	}


	
#frontPageBlog, #frontPageNonComic {
	margin-top: 10px;
	position: relative;
	}
#frontPageNonComic {
	padding-bottom: 20px;
	}

/* Columns */
#below-fold {
	margin: 0px auto;
	background-repeat: repeat-y;
	clear: both;
	border-top: 2px solid #000000;
	}
#below-fold.index {
	clear: both;
	}
#bodyColumn1 {
	float: left;
	}
#bodyColumn2 {
	float: left;
	position: relative;
	}
#bodyColumn3 {
	float: left;
	}

#comicSidebar {
	padding: 10px;
	}
#footer {
	clear: both;
	background-color: #000000;
	font-size: .6em;
	color: #ffffff;
	padding: 10px;
	text-align: center;
	}
	#footer a:link, #footer a:visited {
		color: #ffffff;
		}
/* Regular WordPress sidebar and stripShow Comic Sidebar*/
#sidebar, #comic-sidebar {
	position: relative;
	font-size: .8em;
	width: 180px;
	text-align: center;
	padding: 10px;
	}
#sidebar ul, #comic-sidebar ul {
	padding: 0px;
	list-style: none;
	position: relative;
	margin: 0px;
	}
#sidebar table, #sidebar table caption, #comic-sidebar table, #comic-sidebar table caption {
	margin: 0px auto;
	}
#sidebar li.widget {
	border: 1px solid #000000;
	margin-bottom: 10px;
	}
#sidebar li.widget ul {
	padding: 4px;
	}
#sidebar li.widget h2 {
	margin: 0;
	padding: 2px;
	font-size: 1em;
	background-color: #000000;
	color: #ffffff;
	}
#sidebar li.widget h2 a:link, .post h2 a:visited {
	text-decoration: none;
	}
#sidebar li.widget h2 a:hover {
	color: #ffffff;
	}
#sidebar li.widget form {
	margin: 5px;
	}
#sidebar h2 {
	font-size: 1.2em;
	}

/* stripShow Comic Sidebar */
#comic-sidebar li.widget {
	margin-bottom: 10px;
	background-color: #000000;
	color: #cccccc;
	}
	#comic-sidebar li.widget a {
		color: #ffffff;
		font-weight: bold;
		}
#comic-sidebar li.widget ul {
	padding: 4px;
	margin: 0px auto;
	}
#comic-sidebar li.widget h2 {
	margin: 0 ;
	padding: 2px;
	font-size: 1em;
	background-color: #000000;
	color: #ffffff;
	}
#comic-sidebar li.widget h2 a:link, .post h2 a:visited {
	text-decoration: none;
	}
#comic-sidebar li.widget h2 a:hover {
	color: #ffffff;
	}
#comic-sidebar li.widget fieldset {
	border: 0;
	}
#comic-sidebar li.widget select {
display: block;
	width: 165px;
	font-size: .8em;
	}


#searchform input {
	border: 1px solid #000000;
	background-color: #f0f0f0;
	padding: 2px;
	margin-bottom: 2px;
	}
input#searchsubmit {
	background-color: #000000;
	border: 1px solid #ffffff;
	color: #ffffff;
	}
input#searchsubmit:hover {
	background-color: #ffffff;
	border: 1px solid #000000;
	color: #000000;
	}

.bar1 {
	height: 20px;
	width: 560px;
	padding: 0px 20px;
	background-image: url(images/bar_600.png);
	}
.iconrow {
	text-align: center;
	padding-top: 4px;
	}

/* Vertical and horizontal layouts */
	#comicSection {
		position: relative;
		width: 100%;
		margin-top: 10px;
		}
	#comic {
		width: auto;
		float: left;
		}
	#comicSection.vertical #comic {
		background-color: #ffffff;
		float: left;
		padding: 10px;
		text-align: center;
		width: 590px;
		}
	#comicSection.horizontal #comic {
		background-color: #ffffff;
		clear: both;
		margin: 0px auto;
		text-align: center;
		width: 100%;
		}
	#comicSection.horizontal #comic-meta {
		clear: both;
		width: 646px;
		padding-top: 10px;
		margin: 0 auto;
		}
	#comicSection.vertical #comic-meta {
		clear: right;
		width: 195px;
		margin-left: 610px;
		margin-right: 10px;
		padding-top: 10px;
		}
	#comicSection.vertical .post {
		font-size: .8em;
		}
	#comicSection.horizontal .post {
		float: left;
		width: 400px;
		}
	#comicSection.horizontal .social-bookmark, #comicSection.horizontal .story-nav {
		float: none;
		position: relative;
		clear: right;
		margin-left: 410px;
		height: 50px;
		margin-bottom: 10px;
		}
	#comicSection.vertical .story-nav {
		margin-top: 10px;
		}
	#comicSection.vertical .story-nav select {
		width: 170px;
		}
.transcript_toggler {
	background: #000000;
	}
	.transcript_toggler a {
		color: #ffffff;
		text-decoration: none;
		padding-left: 20px;
		display: block;
		line-height: 16px;
		font-size: 11px;
		}
	.toggler_off {
		background: transparent url(images/toggler_off.png) no-repeat top left;
		}
	.toggler_on {
		background: transparent url(images/toggler_on.png) no-repeat top left;
		}
	.transcript {
		padding: 10px;
		font-size: 10px;
		}
	.transcript_line {
		margin-bottom: 10px;
		}
	.transcript_character {
		display: block;
		font-weight: bold;
		text-align: center;
		text-transform: uppercase;
		}
	.transcript_description {
		font-style: oblique;
		}
/* Comic Archive page */
span.archive_date {
	width: 100px;
	font-size: .8em;
	text-align: right;
	}
span.archive_title {
	padding-left: 4px;
	}
.comicdate {
	font-size: .8em;
	margin-bottom: 10px;
	}
.post.archive {
	background-color: #ffffff;
	}


/*  Navigation bar */
#header-navbar { /* The spevific instance of the navbar located in the header */
	position: absolute;
	top:0px;
	right: 10px;
	}
ul.stripshow-comic-navbar {
	width: 135px;
	height: 27px;
	padding: 0;
	margin: 0;
	display: block;
	}
ul.stripshow-comic-navbar li {
	display: block;
	height: 27px;
	width: 27px;
	padding: 0;
	margin: 0;
	list-style: none;
	float: left;
	}
ul.stripshow-comic-navbar li a:link, ul.stripshow-comic-navbar li a:visited {
	display: block;
	width: 27px;
	height: 27px;
	}
.linktext { display: none; }

/* Regular arrows */
.first-comic a { background: transparent url(images/comic-navbar.png) no-repeat 0 -50px;}
.previous-comic a { background: transparent url(images/comic-navbar.png) no-repeat -50px -50px;}
.next-comic a { background: transparent url(images/comic-navbar.png) no-repeat -100px -50px;}
.last-comic a { background: transparent url(images/comic-navbar.png) no-repeat -150px -50px;}
.random-comic a { background: transparent url(images/comic-navbar.png) no-repeat -200px -50px;}

/* Disabled arrows */
.first-comic { background: transparent url(images/comic-navbar.png) no-repeat 0 0px;}
.previous-comic { background: transparent url(images/comic-navbar.png) no-repeat -50px 0px;}
.next-comic { background: transparent url(images/comic-navbar.png) no-repeat -100px 0px;}
.last-comic { background: transparent url(images/comic-navbar.png) no-repeat -150px 0px;}
.random-comic { background: transparent url(images/comic-navbar.png) no-repeat -200px 0px;}

/* Active arrows */
.first-comic a:hover { background: transparent url(images/comic-navbar.png) no-repeat 0 -100px;}
.previous-comic a:hover { background: transparent url(images/comic-navbar.png) no-repeat -50px -100px;}
.next-comic a:hover { background: transparent url(images/comic-navbar.png) no-repeat -100px -100px;}
.last-comic a:hover { background: transparent url(images/comic-navbar.png) no-repeat -150px -100px;}
.random-comic a:hover { background: transparent url(images/comic-navbar.png) no-repeat -200px -100px;}

/* Suggested by WP theme guidelines */
.aligncenter,
div.aligncenter {
   display: block;
   margin-left: auto;
   margin-right: auto;
}

.alignleft {
   float: left;
}

.alignright {
   float: right;
}

.wp-caption {
   border: 1px solid #000000;
   text-align: center;
   background-color: #f3f3f3;
   padding-top: 4px;
   margin: 10px;
}

.wp-caption img {
   margin: 0;
   padding: 0;
   border: 0 none;
}

.wp-caption p.wp-caption-text {
   font-size: 11px;
   line-height: 17px;
   padding: 0 4px 5px;
   margin: 0;
}