/*!
Theme Name: Bayeux
Theme URI: http://egypt.urnash.com/rita/
Author: Margaret Trauth
Author URI: http://egypt.urnash.com
Description: A theme for horiontally-scrolling comics. Requires the Comic Easel plugin. Also suggested: Studiograsshopper's Custom Taxonomies Menu Widget.
Version: 1.5
License: (c) 2012-2014 Margaret Trauth
License URI: license.txt
Tags: dark, two-columns
*/

@import "elements.less";

/* =Reset default browser CSS. Based on work by Eric Meyer: http://meyerweb.com/eric/tools/css/reset/index.html
-------------------------------------------------------------- */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	border: 0;
	font-family: inherit;
	font-size: 100%;
	font-style: inherit;
	font-weight: inherit;
	margin: 0;
	outline: 0;
	padding: 0;
	vertical-align: baseline;
}
:focus {/* remember to define focus styles! */
	outline: 0;
}
body {
	line-height: 1.5;
}
ol, ul {
	list-style: none;
}
table {/* tables still need 'cellspacing="0"' in the markup */
	border-collapse: separate;
	border-spacing: 0;
}
caption, th, td {
	font-weight: normal;
	text-align: left;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: "";
}
blockquote, q {
	quotes: "" "";
}
a img {
	border: 0;
}

/*
 * site-wide styling
 */


/* =Structure
-------------------------------------------------------------- */

#page {
	display: block;
	margin: 1em;
}
#primary {
	float: left;
	margin: 0 -240px 0 0;
	width: 100%;
	
	@media (max-width:700px) {
		float:none;
		margin:0;
	}
}
#content {
	margin: 0 280px 0 0;
	@media (max-width:700px) {
		margin:0;
	}
}
#main .widget-area {
	float: right;
	overflow: hidden;
	width: 220px;
	
	@media (max-width:700px) {
		float:none;
		width:auto;
		text-align:right;
		margin-bottom:2em;
	}
}
#colophon {
	position:relative;
	clear: both;
	display:inline-block;
	white-space:nowrap;
	width:auto;
	.textwidget {
		display:inline;
	}
	.blogroll-title {
		display:inline;
		margin-left:1em;
		color:@link;
		&:hover {
			z-index:100;
		}
	}
	.blogroll {
		background:@background;
		position:absolute;
		display:inline;
		.opacity(0);
		visibility:hidden;
		bottom:-1em;
		// height:0;
		overflow:hidden;
		right:-1em;
		padding:.5em;
		// z-index:-99999;
		.transition-duration(.6s);
		li {
			background:@background;
			text-align:right;
			a {
				padding:0 .5em .5em;
				background:@background;
				display:block;
			}
		}
	}
	.blogroll-title:hover + .blogroll,
	.blogroll:hover,
	.blogroll-title:active + .blogroll {
		display:inline;
		// height:auto;
		visibility:visible;
		bottom:1.2em;
		.transition-duration(.1s);
		.opacity(1);
		z-index:99;
	}
}

/* Increase the size of the content area for templates without sidebars */
.full-width #content,
.image-attachment #content,
.error404 #content {
	margin: 0;
}

/* Text meant only for screen readers */
.screen-reader-text,
.assistive-text {
	position: absolute !important;
	clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
	clip: rect(1px, 1px, 1px, 1px);
}

/* Alignment */
.alignleft {
	display: inline;
	float: left;
}
.alignright {
	display: inline;
	float: right;
}
.aligncenter {
	clear: both;
	display: block;
	margin-left: auto;
	margin-right: auto;
}


/* =Header
-------------------------------------------------------------- */

#site-title {
	font-size: 2em;
/*	font-weight: bold;*/
	margin: .67em 0;
}
#site-description {
	font-size: 1em;
	font-weight: normal;
	margin: 0 0 1em;
}


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

#access {
/*	background: #eee;*/
	display: block;
	float: left;
	margin: 0 auto 1em;
	width: 100%;
}
#access ul {
	list-style: none;
	margin: 0;
	padding-left: 0;
}
#access li {
	float: left;
	position: relative;
}
#access a {
	display: block;
	line-height: 2em;
	padding: 0 1em;
	text-decoration: none;
}
#access ul ul {
	box-shadow: 0 3px 3px rgba(0,0,0,0.2);
	-moz-box-shadow: 0 3px 3px rgba(0,0,0,0.2);
	-webkit-box-shadow: 0 3px 3px rgba(0,0,0,0.2);
	display: none;
	float: left;
	position: absolute;
	top: 2em;
	left: 0;
	z-index: 99999;
}
#access ul ul ul {
	left: 100%;
	top: 0;
}
#access ul ul a {
	background: #dedede;
	line-height: 1em;
	padding: .5em .5em .5em 1em;
	width: 10em;
	height: auto;
}
#access li:hover > a,
#access ul ul :hover > a {
	background: #dedede;
}
#access ul ul a:hover {
	background: #cecece;
}
#access ul li:hover > ul {
	display: block;
}


/* =Content
-------------------------------------------------------------- */

.sticky {
	background:inherit; // HACK: make sure less doesn't optimize this class away
						// so it'll pass the theme check.
}
.entry-meta {
	clear: both;
	display: block;
}
.single-author .entry-meta .byline {
	display: none;
}
#content nav {
	display: block;
	overflow: hidden;
	
	.nav-previous {
		float: left;
	}
	
	.nav-next {
		float: right;
		text-align: right;
	}
}
#content #nav-above {
	display: none;
}
.paged #content #nav-above,
.single #content #nav-above {
	display: block;
}
#nav-below {
	margin: 1em 0 0;
}
.page-link {
	clear: both;
	margin: 0 0 1em;
}
.page .edit-link {
	clear: both;
	display: block;
}

/* 404 page */
.error404 .widget {
	float: left;
	width: 33%;
}
.error404 .widget .widgettitle,
.error404 .widget ul {
	margin-right: 1em;
}
.error404 .widget_tag_cloud {
	clear: both;
	float: none;
	width: 100%;
}

/* Notices */
.post .notice,
.error404 #searchform {
	background: #eee;
	display: block;
	padding: 1em;
}

/* Image Attachments */
.image-attachment div.entry-meta {
	float: left;
}
.image-attachment nav {
	float: right;
	margin: 0 0 1em 0;
}
.image-attachment .entry-content {
	clear: both;
}
.image-attachment .entry-content .entry-attachment {
	background: #eee;
	margin: 0 0 1em;
	padding: 1em;
	text-align: center;
}
.image-attachment .entry-content .attachment {
	display: block;
	margin: 0 auto;
	text-align: center;
}

/* Aside Posts */
.format-aside .entry-header {
	display: none;
}
.single .format-aside .entry-header {
	display: block;
}
.format-aside .entry-content,
.format-aside .entry-summary {
	padding-top: 1em;
}
.single .format-aside .entry-content,
.single .format-aside .entry-summary {
	padding-top: 0;
}

/* Gallery Posts */
.format-gallery .gallery-thumb {
	float: left;
	margin: 0 1em 0 0;
}

/* Image Posts */
.format-image .entry-header {
	display: none;
}
.single .format-image .entry-header {
	display: block;
}
.format-image .entry-content,
.format-image .entry-summary {
	padding-top: 1em;
}
.single .format-image .entry-content,
.single .format-image .entry-summary {
	padding-top: 0;
}


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

a img {
	border: none;
}
p img {
	margin-bottom: 0.5em; /* a small bottom margin prevents content floating under images */
}
/*
Resize images to fit the main content area.
- Applies only to images uploaded via WordPress by targeting size-* classes.
- Other images will be left alone. Use "size-auto" class to apply to other images.
*/
img.size-auto,
img.size-full,
img.size-large,
img.size-medium,
.attachment img,
.widget-area img,
.wp-caption {
	max-width: 100%; /* When images are too wide for containing element, force them to fit. */
	height: auto; /* Override height to match resized width for correct aspect ratio. */
}
img.alignleft {
	margin-right: 1em;
}
img.alignright {
	margin-left: 1em;
}
.wp-caption {
	padding: .5em;
	text-align: center;
}
.wp-caption img {
	margin: .25em;
}
.wp-caption .wp-caption-text {
	margin: .5em;
}
.gallery-caption {
	background:inherit; // HACK: make sure less doesn't optimize this class away
						// so it'll pass the theme check.
}
.wp-smiley {
	margin: 0;
}


/* =Forms
-------------------------------------------------------------- */

#searchform label {
	display: none;
}
#searchform input#s {
	width: 60%;
}
input[type=text],
input#s {
	margin: 0 1em 0 0;
	width: 60%;
}
textarea {
	width: 80%;
}

/* Class for labelling required form items */
.required {
	color: #cc0033;
}


/* =Comments
-------------------------------------------------------------- */

article.comment {
	display: block;
}
#respond input[type=text] {
	display: block;
	width: 60%;
}
#respond textarea {
	display: block;
	margin: 0 0 1em;
	width: 80%;
}
#respond .form-allowed-tags {
	clear: both;
	width: 80%;
}
#respond .form-allowed-tags code {
	display: block;
}


/* =Widgets
-------------------------------------------------------------- */

.widget {
	display: block;
}
.widget-area .widget_search {
	overflow: hidden;
}
.widget-area .widget_search input {
	float: left;
}


/* =Footer
-------------------------------------------------------------- */

#colophon {
	padding: 1em 0 0;
}


/* PEGGY */

//
// fonts

// use google's cdn for the body text
@import url(http://fonts.googleapis.com/css?family=Ubuntu:300,300italic,500);

// use my site for the navigation font
@font-face {
	font-family: 'RitaNav';
	src:url('fonts/RitaNav.eot');
	src:url('fonts/RitaNav.eot?#iefix') format('embedded-opentype'),
		url('fonts/RitaNav.woff') format('woff'),
		url('fonts/RitaNav.ttf') format('truetype'),
		url('fonts/RitaNav.svg#RitaNav') format('svg');
	font-weight: normal;
	font-style: normal;
}

//
// COLORS
//

@bodytext: #60686F;
@background: #231F20;
@link: #a0a8aF;
@visited-link: #80888F;
@hover: #c0c8cF;


//
// MEASUREMENTS
//

@comic-width: 1024px;
@comic-height: 728px;


body {
	color:@bodytext;
	background-color:@background;
	font-family: 'Ubuntu', helvetica, arial, sans-serif;
	font-weight:300;
}

a {
	text-decoration:none;
	&:link { color:@link; }
	&:hover {
		color:@hover !important;
		text-shadow:0 0 10px #fff}
	&:visited { color:@visited-link; }
}

//
// basic html

i, em {
	font-style:italic;
}

b, strong {
	font-weight:500;
}

small {
	font-size:small;
}

blockquote {
	
}

ul {
	li {
		
	}
}

ol {
	li {
		
	}
}

dl {
	max-width:40em;
	margin:0 auto;
}
dt {
	font-weight:500;
	width:13em;
	float:left;
	clear:left;
	text-align:right;
	@media (max-width:700px) {
		text-align:left;
		float:none;
		border-bottom:1px solid @bodytext;
	}
}
dd {
	max-width:43em;
	display:block;
	margin:0 0 1em 13.5em;
	
	@media (max-width:700px) {
		margin-left:0;
	}
	
	&:after {
		content:"\A";
		white-space:pre;
	}
}


tt {
	font-family:monospace;
}

// FIXME probably some other basic stuff needs to be styled too

//
// banner/main menu

#branding {
	white-space:nowrap;
	position:relative;
	background:@background;
	top:-0.5em;
	// @media (min-width:@comic-width){
	//
	// 	position:fixed;
	// 	z-index:1000;
	// 	padding-top:1em;
	// 	margin-top:-1em;
	// 	padding-left:2em;
	//
	// 	width:100%;
	// 	top:0.5em;
	// 	left:-1em;
	//
	// 	>h1, >div {
	// 	}
	// 	+ #main {
	// 		// display:none;
	// 		padding-top:1.5em;
	// 	}
	// }
}

#site-title, #site-description {
	display:inline;
	font-size:100%;
	// margin:0 1em 0 0;
}
#site-description {
	font-size:small;
	font-style:italic;
	margin:0 0 0 0.5em;
}

#nav {	

	&:before {
		content:"○";
		margin:0 -0.5em 0 1em;
	}
	
	display:inline;
	// margin-left:-1.5em;
	margin-right:2em;
	div, ul, li, .widget-title {
		display:inline;
	}
	.textwidget, .menu-item, .widget-title {
		margin-left:1.5em;
	}
	.cat-item {
		letter-spacing:1px;
		&:before {
			content:"/ ";
		}
	}
	.current-cat a {
		color:@hover;
		text-shadow:0 0 10px #fff;
		// cursor:default;
	}
}

#colophon {
	.textwidget, .blogroll-title {
		margin-left:1.5em;
	}
}

#primary {
}

//
// main comic view

.tax-chapters {
	position:relative;
	#content {
		display:table-row;
		overflow:visible;
		margin:0;
	}
	.comic {
		display:table-cell;
		width:@comic-width;
		vertical-align:top;
	}
	.comic-image img {
		width:auto;
		height:@comic-height;
		image-rendering:-webkit-optimize-contrast;
		image-rendering:optimizeQuality;
		-ms-interpolation-mode:bicubic;
	}
	.page-header {
		display:none;
	}
	.ahead, .rewind {
		position:fixed;
		width:25%;
		height:@comic-height;
		left:0;
		
		opacity:0;
		.transition ();
		text-align:center;
		
		
		speak: none;
		
		color:@background!important;
		text-shadow: 0 0 10px @bodytext;
		
		font-style: normal;
		font-weight: normal;
		font-variant: normal;
		font-size:100px;
		text-transform: none;
		line-height:@comic-height + @comic-height/2px;
		-webkit-font-smoothing: antialiased;
		&:hover {
			opacity:1;
		}
		
		z-index:256;
	}
		
	.ahead {
		left:auto;
		right:0;
	}
	.scroll-next {
		display:inline-block;
		width:4em;
		&:after {
			font-family:"RitaNav";
			content:"\e004";
		}
	}
	.accordion {
		.opener {
			overflow:hidden;
			.transition-duration(1s);
			a:before {
				font-family:"RitaNav";
				content:"\e001";
				margin-right:.5em;
			}
		}
		.entry-content {
			height:0;
			overflow:hidden;
			.transition-duration(1s);
		}
		&:target {
			.opener {
				height:0;
			}
			.entry-content {
				height:auto;
			}
		}
	}
}

//
// ads in main comic

// 468x79 px
.banner-ad {
	display:block;
	margin:1em 1em 0 0;
	width:468px;
	height:79px;
	float:left;
}

//
// blog archive page stuff

.category-blog {
	.page-header {
		display:none;
	}
	article {
		margin:2em auto 6em;
	}
	#secondary {
		margin-top:3em;
	}
}

//
// general blog post styling

.entry-header {
	text-align:right;
	time {
		display:block;
	}
}

.entry-meta {
	text-align:right;
}

.entry-header, .entry-content, .entry-meta {
	margin:0 4em;
}

.entry-content {
	padding-top:1em;
	border-top:1px solid @link;
	clear:left;
	p {
		margin:0 0 1em auto;
		text-indent:4em;
		max-width:30em;
		text-align:justify;
	}
}

.single {
	#main {
		width:100%;
		margin:0 auto !important;
	}
	#primary {
		margin:0 auto !important;
	}
	.comic {
		width:@comic-width;
	}
	nav {
		div {
			float:left;
			text-align:center;
			width:33% !important;
			margin-left:33%;
		}
		.nav-previous {
			margin-left:0;
			+.nav-chapter {
				margin-left:0;
			}
		}
		.nav-chapter +.nav-next {
			margin-left:0;
		}
		
	}
	.under-comic {
		font-size:small;
		font-style:italic;
		text-align:center;
		// outline:1px solid red;
		margin-top:.5em;
	}
	.entry-header {
		margin-top:.5em;
	}
}

.single-post {
	#nav-above {
		margin-top:1em;
	}
}

// comic chapter nav

.chapternav {
	display:table-cell;
	vertical-align:top;
	width:512px;
	white-space:nowrap;
	.next,.prev,.last {
		display:block;
		padding-top:@comic-height/2px;
		height:@comic-height;
	}
	.next, .prev {
		padding-top:100px;
		font-family: 'RitaNav';
		speak: none;
		font-style: normal;
		font-weight: normal;
		font-variant: normal;
		font-size:200px;
		text-transform: none;
		line-height:@comic-height - 200px;
		-webkit-font-smoothing: antialiased;
		&:hover {
			text-shadow: 0 0 10px #fff;
		}
	}
	.next {
		width:512px;
		&:before {
			content:"\e001";
			width:512px;
		}
	}

	.prev:before {
		content:"\e000";
	}
	.last {
		display:block;
		width:512px;
		padding-left:4em;
		white-space:nowrap;
	}
	.instructions {
		display:block;
		position:relative;
		width:985px;
		height:@comic-height;
		background:@background url("images/website-splash.png") no-repeat;
		margin-left:-1em;

		i {
			color:@background;
			font-size:55px;
			position:absolute;
			display:block;
			padding:480px 0 0 512px;
		}	
		.firstlink {
			display:block;
			position:absolute;
			width:985-482px;
			margin:563px 0 0 0;
			padding:0 0 0 482px;
			font-style:italic;
			font-size:24px;

		}
	}
	.synopsis {
		position:absolute;
		z-index:100;
		top:750px;
		left:200px;
		font-style:italic;
		font-size:80%;
		display:none;
	}
	.raves {
		position:absolute;
		z-index:100;
		width:400px;

		word-wrap:normal;
		top:700px;
		left:200px;
		q {
			position:absolute;
			word-wrap:normal;
			display:block;
			width:400px;
			text-indent:-5px;
			text-align:center;
			font-style:italic;
			
			&[cite]:after {
				content:"– " attr(cite);
				display:block;
				margin-top:0.3em;
				text-align:right;
				// float:right;
			}
		}
	}
}

// polite 'support this comic please' come-on

#supportthecomic {
	margin:(768/2)+200px 0 0 -500px;
	padding:0 1em;
	a {
		white-space:nowrap;
	}
}

//
// COMMENTSES

#comments {
	margin:0 4em;
	.commentlist {
		float:left;
	}
	article {
		margin-top:1.5em;
	}
	.comment-author, .comment-meta, .reply a {
		max-width:30em;
		font-size:small;
		font-style:italic;
	}
	.comment-author {
		img {
			float:left;
			margin-right:.5em;
		}
	}
	.comment-meta {
		float:left;
		margin-right:.5em;
		&:after {
			content:",";
		}
	}
	.comment-content {
		max-width:30em;
		padding:.5em 0 0;
		text-align:justify;
		
		@media (max-width:700px) {
/*			padding-top:2em;*/
/*			display:block;*/
			clear:left;
		}
	}
	.reply {
		max-width:30em;
		text-align:right;
		a {
			display:block;
			margin-left:33%;
			padding-right:.5em;
			border-top:1px solid @visited-link;
		}
	}
	.children {
		margin-left:2em;
	}
	
	#respond {
/*		max-width:30em;*/
		margin-top:1em;
		// float:left;
		clear:left;
		#reply-title {
			display:inline;
		}
		form {
			display:inline;
		}
		.logged-in-as {
			margin-left:.5em;
			display:inline;
			&:before {
				content:"::";
				margin-right:.5em;
			}
		}
		label {
			font-size:small;
			font-style:italic;
			display:inline;
		}
		.required {
			visibility:hidden;
			color:inherit;
			letter-spacing:-999px;
			word-spacing:  -999px;
			&:after {
				content:"(required)";
				visibility:visible;
				letter-spacing:normal;
				word-spacing:  normal;
				display:inline;
			}
		}
		input[type=text] {
			background:none;
			border:none;
			border-bottom:1px dashed;;
			margin-bottom:.2em;
			display:inline;
			color:@link;
			font-size:1em;
			&:focus {
				color:@hover;
			}
		}
		textarea {
			width:29em;
			.rounded (4px);
			margin:.2em 0;
			padding:.5em;
			font-size:1em;
			background:@visited-link;
			&:focus {
				background:@hover;
			}
		}
		.form-allowed-tags {
			font-size:small;
			font-style:italic;
			float:left;
			width:80%;
			padding-top:.4em;
		}
		.form-submit {
			width:20%;
			float:right;
			text-align:right;
		}
		#submit {
			background:@visited-link;
			.rounded (4px;);
			border:none;
		}
	}
}

//
// 'about' page
.about {
	h1 {
		display:none;
	}
	h2, h3 {
		text-align:center;
		font-weight:500;
	}
	h2 {
		font-size:150%;
		margin:1em auto .5em;
		border-bottom:1px solid @bodytext;
		width:50%;
		@media (max-width:700px) {
			width:100%;
		}
	}
	h3 {
	}
	.entry-content {
		border-top:none;
		margin-top:2em;
	}
	p {
		margin:0 auto 1em;
	}
	#disclaimer {
		font-style:italic;
		font-size:80%;
		max-width:45em;
		margin-top:4em;
	}
	#characters {
		clear:both;
		display:block;
		width:100%;
		li {
			-moz-box-sizing:border-box;
			-webkit-box-sizing:border-box;
			box-sizing:border-box;
			vertical-align:top;
			padding:0 1em 2em;
			width:24%;
			max-width:30em;
			display:inline-block;
			@media (max-width:700px) {
				width:100%;
			}
			br {
				display:none;
			}
		}
		p {
			text-align:justify;
			text-indent:1em;
			-webkit-hyphens: auto;
			-moz-hyphens: auto;
			hyphens: auto;			
		}
		.clear {
			clear:both;
		}
		h3 {
			font-weight:500;
			text-align:center;
			@media (max-width:700px) {
				font-size:150%;
			}
		}
		img {
			display:block;
			margin:0 auto .5em;
		}
		#panopticon {
			max-width:100%;
			width:100%;
			p {
				text-align:center;
			}
		}
	}
}

/*@media all and (max-width:700px) {
	.about {
		.entry-content {
			background:pink;
		}
	}
}*/