/*
Theme Name: Archimedes
Theme URI: http://webcomic.nu
Author: Michael Sisk
Author URI: http://mgsisk.com
License: GPL2
License URI: //gnu.org/licenses/gpl-2.0.html
Version: 1
Description: Barebones starter theme named in honor of Nite Owl from the Watchmen graphic novel.
Tags: dark, light, white, black, gray, one-column, two-columns, left-sidebar, right-sidebar, fixed-width, flexible-width, custom-background, custom-colors, custom-header, custom-menu, editor-style, featured-image-header, featured-images, full-width-template, microformats, post-formats, rtl-language-support, sticky-post, theme-options, translation-ready
Webcomic: 4
*/

/** mobile portrait */
html {
	font-size: 65%;
	font-family: "Times New Roman", Times, serif;
}

body {
	background: #000033;
}

a {
	color: #663300;
	text-decoration: none;	
	-webkit-transition: color .25s;
	transition: color .25s;
}

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

a:focus,
a:hover {
	color: #663300;
	text-decoration: underline;
}

a:active {
	color: #000000;
	-webkit-transition: none;
	transition: none;
}

#page {
	width: 1064px;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
	background-color: #cc9966;
	background-image: url(images/CC9966_paper.jpg);
	background-repeat: repeat-y;
	background-position: right;
}
section#main {
		float: left;
		width: 768px;
	}
	
section#complementary {
		float: right;
		width: 296px;
	}
/**HEADER */
 .top_banner_01 {
	height: 13px;
	width: 700px;
	background-image: url(images/top_menu/banner_01.gif);
	float: left;
	margin-left: 34px;
}
 .top_banner_02 {
	height: 13px;
	width: 96px;
	background-image: url(images/top_menu/banner_02.gif);
	float: right;
	margin-left: 34px;
}
 .top_banner_03 {
	height: 13px;
	width: 200px;
	background-image: url(images/top_menu/banner_03.jpg);
	float: right;	
}
#navigation ul ul {
	display: none;
	z-index: 99;
}

#navigation ul ul a {
	text-indent: 1rem;
}

#navigation li {
	position: relative;
}

#navigation li:hover > ul {
	display: block;
}

#navigation a {
	color: #999;
	border-bottom: thin solid #ddd;
	display: block;
	line-height: 2;
}

#navigation a:focus,
#navigation a:hover,
#navigation li:hover > a {
	color: #333;
}

nav.posts,
nav.images,
nav.post-pages {
	clear: both;
	text-align: center;
}
/**NAV-WEBCOMICS-ABOVE*/
nav.webcomics-above {
	height: 19px;
	width: 728px;
	margin-right: 20px;
	margin-left: 20px;
	margin-bottom: 3px;
}
.first_top {
	height: 19px;
	width: 67px;
	float: left;
	background-image: url(images/page_menu/top_first.gif);
}
.first_top:hover {
	height: 19px;
	width: 67px;
	background-image: url(images/page_menu/top_first.gif);
	background-position:-67px;
}
.back_top {
	height: 19px;
	width: 84px;
	float: left;
	background-image: url(images/page_menu/top_back.gif);
	margin-left: 132px;
}
.back_top:hover {
	height: 19px;
	width: 84px;
	background-image: url(images/page_menu/top_back.gif);
	background-position:-84px;
}
.next_top {
	height: 19px;
	width: 84px;
	float: right;
	background-image: url(images/page_menu/top_next.gif);
	margin-right: 132px;
}
.next_top:hover {
	height: 19px;
	width: 84px;
	background-image: url(images/page_menu/top_next.gif);
	background-position:-84px;
}
.last_top {
	height: 19px;
	width: 67px;
	float: right;
	background-image: url(images/page_menu/top_last.gif);
}
.last_top:hover {
	height: 19px;
	width: 67px;
	background-image: url(images/page_menu/top_last.gif);
	background-position:-67px;
}

/**NAV WEBCOMICS-BELOW*/
nav.webcomics-below {
	height: 47px;
	width: 728px;
	margin-right: 20px;
	margin-left: 20px;
}
.first {
	height: 47px;
	width: 80px;
	float: left;
	background-image: url(images/page_menu/first_page_menu.gif);
}
.first:hover {
	height: 47px;
	width: 80px;
	background-image: url(images/page_menu/first_page_menu.gif);
	background-position:-80px;
}
.back {
	height: 47px;
	width: 84px;
	float: left;
	background-image: url(images/page_menu/back_page_menu.gif);
	margin-left: 122px;
}
.back:hover {
	height: 47px;
	width: 84px;
	background-image: url(images/page_menu/back_page_menu.gif);
	background-position:-84px;
}
.center {
	height: 47px;
	width: 90px;
	float: left;
	background-image: url(images/page_menu/center_page_menu.gif);
	margin-left: 36px;	
}
.center:hover {
	height: 47px;
	width: 90px;
	background-image: url(images/page_menu/center_page_menu.gif);
	background-position:-90px;
}
.next {
	height: 47px;
	width: 84px;
	float: right;
	background-image: url(images/page_menu/next_page_menu.gif);
	margin-right: 122px;
}
.next:hover {
	height: 47px;
	width: 84px;
	background-image: url(images/page_menu/next_page_menu.gif);
	background-position:-84px;
}
.last {
	height: 47px;
	width: 80px;
	float: right;
	background-image: url(images/page_menu/last_page_menu.gif);
}
.last:hover {
	height: 47px;
	width: 80px;
	background-image: url(images/page_menu/last_page_menu.gif);
	background-position:-80px;
}
/**post_nav**/
.single-posts {
	margin-bottom: 20px;
}		
.back_post {
	height: 19px;
	width: 84px;
	float: left;
	background-image: url(images/page_menu/top_back.gif);
	background-position:-20px;
	clear: left;
}
.back_post:hover {
	height: 19px;
	width: 84px;
	background-image: url(images/page_menu/top_back.gif);
	background-position:-84px;
}
.next_post {
	height: 19px;
	width: 84px;
	float: right;
	background-image: url(images/page_menu/top_next.gif);
	background-position:20px;
}
.next_post:hover {
	height: 19px;
	width: 84px;
	background-image: url(images/page_menu/top_next.gif);
	background-position:-84px;
}	
nav.images img {
	max-width: 64px;
	opacity: .5;
}

nav.images a:hover img {
	opacity: 1;
}
/** CONTENT */

#content {
	width: 768px;
	float: left;
}
.page-header {	
margin-left: 34px;
}


.post-webcomic {
	width: 768px;
	background-image: url(images/webcomic_bg.gif);
	background-repeat: repeat-y;
}

.webcomic-img {
	width: 700px;
	margin-right: auto;
	margin-left: auto;
	border: thin solid #000000;
}
article {	
	margin-left: 34px;
}

article .post-thumbnail {
	border: thin solid #ddd;
	float: right;
	margin: 0 0 1rem 1rem;
	padding: .25rem;
}

article .post-footer {
	clear: both;
}

article .post-edit-link,
article .comment-edit-link,
article .comment-reply-link {
	background: #FFCC99;
	border: medium solid #663300;
	color: #663300;
	font-size: smaller;
	margin: 0 0 0 .5rem;
	padding: .1rem .25rem;
	text-transform: uppercase;
	font-weight: bolder;
}

article article {
	border-bottom: 0;
	margin: 1rem 0 0 1rem;
	padding: 1rem 0 0;

}
.post-meta {
	text-align: right;
	margin-right: 34px;
margin-bottom: 80px;	
background-repeat: repeat-x;
	
}
.post-content {
	margin-right: 34px;
}
section#comments {
	width: 700px;
	margin-right: 34px;
	margin-left: 34px;

}
.ad_banner {
	width: 468px;
	margin-right: 148px;
	margin-left: 148px;
	margin-top: 5px;
}
.ad_leader {
	height: 90px;
	width: 728px;
	margin-left: 20px;
	margin-right: 20px;
	margin-top:5px;
	float: left;
}
#margin-right{
	width: 700px;
	margin-right: 34px;
}
/** social media */
 #soc_net {
	height:150px;
	width: 768px;
margin-top: 34px;
	background-image: url(images/soc_net/hor_line.gif);
	background-color: #cc9966;
	background-repeat: repeat-x;
	border-bottom-style: double;
	border-bottom-width: thick;
	border-bottom-color: black	;

float: right;

}
 .fb {
	background-image: url(images/soc_net/fb.gif);
	height: 34px;
	width: 56px;
	float: right;

}
 .fb:hover {
	background-image: url(images/soc_net/fb.gif);
	height: 34px;
	width: 56px;
	background-position:-56px;
}
 .twt {
	height: 34px;
	width: 45px;
	background-image: url(images/soc_net/twt.gif);
	float: right;
}
 .twt:hover {
	height: 34px;
	width: 45px;
	background-image: url(images/soc_net/twt.gif);
	background-position:-45px;
}
 .stumble {
	background-image: url(images/soc_net/stumble.gif);
	height: 34px;
	width: 44px;
	float: right;
}
 .stumble:hover {
	background-image: url(images/soc_net/stumble.gif);
	height: 34px;
	width: 44px;
	background-position:-44px;
}
 .reddit {
	height: 34px;
	width: 45px;
	background-image: url(images/soc_net/reddit.gif);
	float: right;	
}
 .reddit:hover {
	height: 34px;
	width: 45px;
	background-image: url(images/soc_net/reddit.gif);
	background-position:-45px;	
}
 .pint {
	background-image: url(images/soc_net/pint.gif);
	height: 34px;
	width: 45px;
	float: right;
}
 .pint:hover {
	background-image: url(images/soc_net/pint.gif);
	height: 34px;
	width: 45px;
	background-position:-45px;
}
 .googplus {
	height: 34px;
	width: 44px;
	background-image: url(images/soc_net/google_plus.gif);
	float: right;	
}
 .googplus:hover {
	height: 34px;
	width: 44px;
	background-image: url(images/soc_net/google_plus.gif);
	background-position:-44px;
}
 .lj {
	height: 34px;
	width: 45px;
	background-image: url(images/soc_net/lj.gif);
	float: right;
}
 .lj:hover {
	height: 34px;
	width: 45px;
	background-image: url(images/soc_net/lj.gif);
	background-position:-45px;
}
 .digg {
	background-image: url(images/soc_net/digg.gif);
	height: 34px;
	width: 45px;
	float: right;
}
 .digg:hover {
	background-image: url(images/soc_net/digg.gif);
	height: 34px;
	width: 45px;
	background-position:-45px;
}
 .del {
	background-image: url(images/soc_net/del.gif);
	height: 34px;
	width: 44px;
	float: right;
}
 .del:hover {
	background-image: url(images/soc_net/del.gif);
	height: 34px;
	width: 44px;
	background-position:-44px;
}
 .tumblr {
	height: 34px;
	width: 45px;
	background-image: url(images/soc_net/tumblr.gif);
	float: right;

}
 .tumblr:hover {
	height: 34px;
	width: 45px;
	background-image: url(images/soc_net/tumblr.gif);
	background-position:-45px;
}
 .share_email {
	background-image: url(images/soc_net/email.gif);
	height: 34px;
	width: 51px;
	float: right;
}
 .share_email:hover {
	background-image: url(images/soc_net/email.gif);
	height: 34px;
	width: 51px;
	background-position:-51px;
}

 .share {
	height: 34px;
	width: 34px;
	background-image: url(images/soc_net/share.gif);
	float: right;
}

/** sidebar */
.sidebar {
	width: 296px;
	height: 1257px;
	float: right;
	background-image: url(images/side_menu/side_menu_ro.jpg);
}
.TOE_main {
	height: 143px;
	width: 247px;
	float: right;
	margin-left: 49px;
	background-image: url(images/side_menu/TOE_main.jpg);
}
.TOE_main:hover {
	height: 143px;
	width: 247px;
	background-image: url(images/spacer.gif);
}
.RSS{
	background-image: url(images/side_menu/RSS.gif);
	height: 49px;
	width: 49px;
	clear: right;
	float: left;
	margin-right: 247px;
}
.RSS:hover {
	background-image: url(images/spacer.gif);
	height: 49px;
	width: 49px;
}
.ABOUT{
	background-image: url(images/side_menu/ABOUT.gif);
	height: 49px;
	width: 49px;
	float: left;
	clear: left;
	margin-left: 26px;	
	margin-right: 93px;
}
.ABOUT:hover {
	background-image: url(images/spacer.gif);
	height: 49px;
	width: 49px;
	
	}
.COMICS{
	background-image: url(images/side_menu/COMICS.jpg);
	height: 104px;
	width: 98px;
	float: right;
	margin-right: 30px;
}
.COMICS:hover {
	background-image: url(images/spacer.gif);
	height: 104px;
	width: 98px;
}
.eisner{
	background-image: url(images/side_menu/eisner.jpg);
	height: 39px;
	width: 41px;
	clear: right;
	float: right;
	margin-left: 225px;
	margin-right: 30px;
}
.eisner:hover {
	background-image: url(images/spacer.gif);
	height: 39px;
	width: 41px;
}	
.BLOG{
	background-image: url(images/side_menu/BLOG.jpg);
	width: 128px;
	height: 114px;
	clear: right;
	float: left;
	margin-top: 103px;
	margin-right: 168px;
}	
.BLOG:hover {
	background-image: url(images/spacer.gif);
	width: 128px;
	height: 114px;
}
.LINKS{
	background-image: url(images/side_menu/LINKS.jpg);
	width: 149px;
	height: 138px;
	float: right;
	margin-right: 30px;
	clear: left;
}
.LINKS:hover {
	background-image: url(images/spacer.gif);
	width: 149px;
	height: 138px;
}
.fb_LINKS{
	background-image: url(images/side_menu/fb_LINKS.jpg);
	height: 52px;
	width: 50px;
	float: right;
	margin-top: 73px;
	margin-left: 67px;
}
.fb_LINKS:hover {
	background-image: url(images/spacer.gif);
	height: 52px;
	width: 50px;
	}
.twt_LINKS{
	background-image: url(images/side_menu/twt_LINKS.jpg);
	height: 48px;
	width: 48px;
	clear: right;
	float: left;
	margin-left: 96px;
}
.twt_LINKS:hover {
	background-image: url(images/spacer.gif);
	height: 48px;
	width: 48px;
}
.dev_LINKS{
	background-image: url(images/side_menu/dev_LINKS.jpg);
	width: 53px;
	height: 61px;
	float: left;
	margin-left: 19px;
	margin-right: 80px;
}
.dev_LINKS:hover {
	background-image: url(images/spacer.gif);
	width: 53px;
	height: 61px;
}
.STORE{
	background-image: url(images/side_menu/STORE.jpg);
	width: 129px;
	height: 134px;
	float: left;
	margin-top: 81px;
	margin-left: 44px;
	margin-right: 123px;
}
.STORE:hover {
	background-image: url(images/spacer.gif);
	width: 129px;
	height: 134px;
}
.pay{
	background-image: url(images/side_menu/pay.gif);
	width: 54px;
	height: 50px;
	clear: left;
	float: left;
	margin-top: 46px;
	margin-left: 21px;
	margin-right: 125px;
}
.pay:hover {
	background-image: url(images/spacer.gif);
	width: 54px;
	height: 50px;
}

.widget {
margin-left: 34px;
margin-right: 34px;
}
	
/** FOOTER */

	.TOE_foot {
	width: 996px;
	height: 350px;
	background-image: url(images/footer/footer.png);
	margin-right: auto;
	margin-left: auto;
	clear: both;
}
	.TOE_foot_box {
	width: 996px;
	height: 298px;
}

	#words {
	width: 378px;
	height: 25px;
}
	.footer_left{
	float: left;
}
	.footer_right{
	float: right;
}									
.theory {
	background-image: url(images/footer/theory.gif);
	height: 15px;
	width: 349px;
	float: left;

}
.theory:hover {
	background-image: url(images/footer/theory.gif);
	height: 15px;
	width: 349px;
	background-position:-349px;		
}
.toecomics {
	background-image: url(images/footer/toecomics.png);
	height: 15px;
	width: 305px;
	float: right;

}
.toecomics:hover {
	background-image: url(images/footer/toecomics.png);
	height: 15px;
	width: 305px;
	background-position:-305px;		
}									
.elan {
	background-image: url(images/footer/elan.gif);
	height: 15px;
	width: 200px;
	margin-top: 37px;
	margin-right: auto;
	margin-left: auto;
}
.elan:hover {
	background-image: url(images/footer/elan.gif);
	height: 15px;
	width: 200px;
	background-position:-200px;
}	
#contentinfo {
	text-align: center;
	font-family: Arial, Helvetica, sans-serif;
	color: #999;
	font-size: small;
}

#contentinfo a {
	color: #999;
}

#contentinfo a:focus,
#contentinfo a:hover {
	color: #FFFFFF;
}

@media only screen and ( min-width: 30em ) { /** mobile landscape */
	
}

@media only screen and ( min-width: 45em ) { /** tablet portrait */
	html {
		font-size: 100%;
	}
	
	#navigation ul ul {
		background: #fff;
		outline: thin solid #ddd;
		position: absolute;
		white-space: pre;
	}
	
	#navigation ul ul ul {
		left: 100%;
		top: 0;
	}
	
	#navigation ul ul a {
		text-indent: 0;
	}
	
	#navigation li {
		float: left;
	}
	
	#navigation ul ul li {
		float: none;
	}
		
	#navigation a {
		border: 0;
		padding: .5rem;
	}
	
}

@media only screen and ( min-width: 60em ) { /** tablet landscape */
	
}

@media only screen and ( min-width: 75em ) { /** desktop */
	html {
		font-size: 125%;
	}
}

@media only screen and ( min-width: 90em ) { /** high definition */
	
}

/** WordPress */
.sticky {
	
}

.bypostauthor {
	border: thin solid #ccc;
	padding: 1rem 1rem 0;
}

.alignnone {
	margin: 1rem;
}

.aligncenter {
	display:block;
	margin: 1rem auto;
}

.alignright {
	float: right;
	margin: 1rem 0 1rem 1rem;
}

.alignleft {
	float: left;
	margin: 1rem 1rem 1rem 0;
}

.wp-caption {
	background: #fff;
	border: thin solid #ddd;
	max-width: 100%;
	padding: .25rem;
	text-align: center;
}

.wp-caption-text {
	font-size: smaller;
	margin: 0;
}

.gallery {
	margin: auto;
	padding: .25rem;
}

.gallery-item {
	float: left;
	margin: 0;
	padding: .25rem;
	text-align: center;
}

.gallery-icon {
	line-height: 1;
}

.gallery-icon img {
	background: #fff;
	border: thin solid #ddd;
	padding: .25rem;
}

.gallery-caption {
	font-size: smaller;
	margin: 0;
}

.gallery-columns-1 .gallery-item {
	float: none;
}

.gallery-columns-2 .gallery-item {
	width: 50%;
}

.gallery-columns-3 .gallery-item {
	width: 33%;
}

.gallery-columns-4 .gallery-item {
	width: 25%;
}

.gallery-columns-5 .gallery-item {
	width: 20%;
}

.gallery-columns-6 .gallery-item {
	width: 16%;
}

.gallery-columns-7 .gallery-item {
	width: 14%;
}

.gallery-columns-8 .gallery-item {
	width: 12%;
}

.gallery-columns-9 .gallery-item {
	width: 11%;
}

/** H5BP  */
.wait {
	cursor: wait;
}

.ir {
    background-color: transparent;
    border: 0;
    color: transparent;
    font: 0/0 a;
    text-shadow: none;
}

.hide {
    display: none !important;
    visibility: hidden;
}

.mask {
    visibility: hidden;
}

.ghost {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

.ghost.focus:active,
.ghost.focus:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

.cf:before,
.cf:after {
    content: "";
    display: table;
}

.cf:after {
}

.cf {
    *zoom: 1;
}