/* vim:ts=4:sw=4:sts=0:noet

 */


html {
	/* force a vertical scrollbar on firefox to avoid page-shifting */
	overflow: -moz-scrollbars-vertical !important;
	font-size: 100%;
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
}

html, body, h1, h2, h3, h4, h5, input, textarea, header select {
	font-family: sans-serif;
	font-size: 10.5pt;
}
h1, h2 {
	font-size: 13pt;
	font-weight: bold;
}
div.quote, div.quotefx, div.codeblock, div.codeblockout, pre, code {
	font-family: monospace;
	font-size: 9.5pt;
}

body {
	background-color: #fffff8;
	line-height: 1.45em;
	margin: 0;
	padding: 10px;
	padding-top: 0;
}

a {
	color: #666;
}

a:visited {
	color: #888;
}

span.na {
	color: gray;
}

span.highlight {
	background-color: #ffff67;
}

span.flickrblue {
	color: #0063dc;
}
span.flickrpink {
	color: #ff0084;
}

strike {
	/* darken since text color is light */
	text-decoration: line-through black;
}

hr {
	border: 0px;
	height: 1px;
	border-top: solid 1px #ccc;
	margin-top: 1.75em;
	margin-bottom: 1.75em;
	display: block;
	width: 85%;
}

div.quote, div.quotefx, div.codeblock, div.codeblockout, pre {
	background-color: #f7f7f2;
	border: 1px solid #e0deca;
	padding: 1em;
	text-align: left;
	overflow: auto;
}
blockquote {
	border-left: 4px solid #ccc;
	padding-left: 1em;
}
code,
div.quote code,
div.quotefx code,
div.codeblock code,
div.codeblockout code,
pre code {
	background-color: #f7f7f2;
	padding: 1px 3px;
}
pre > code {
	padding: 0;
}


header {
	height: 3em;
	margin-bottom: 20px;
	margin-top: 10px;
	padding: 14px 0 0 0;
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
}

header .bar {
	color: #ccc;
	font-size: 12pt;
	vertical-align: bottom;
	padding-left: 1px;
	padding-right: 1px;
}

header h2 {
	font-weight: bold;
	display: inline;
	-moz-osx-font-smoothing: auto;
	-webkit-font-smoothing: auto;
}
header a {
	font-weight: bold;
	text-decoration: none;
}
header a,
header a:visited {
	color: #aaa;
}
header h2 a,
header h2 a:visited {
	color: #888;
}

.page_nav {
	text-align: center;
	margin-top: 3em;
	color: #555;
}
.page_nav .page {
	border: 1px solid gray;
	display: inline-block;
	padding: 5px 10px;
	margin-left: 0.5em;
	text-align: center;
}
.page_nav .page.cur_page {
	background-color: #f7f7f2;
	font-weight: bold;
}


footer {
	color: #aaa;
	font-size: 9.5pt;
	margin-bottom: 2em;
	margin-top: 3em;
	text-align: center;
}
footer a,
footer a:visited {
	color: gray;
}


/* actual item text */
div.itemcontent {
	color: #555;
}

div.itemcontent p:first-child {
	margin-top: 0.5em;
}

div.itemcontent img {
	-ms-interpolation-mode: bicubic;
	/*
	filter: grayscale(100%);
	transition: 1s;
	transition-timing-function: ease;
	*/
}
/*
div.itemcontent img:hover {
	filter: none;
	transition: 1s;
	transition-timing-function: ease;
}
*/
div.iframeholder {
	text-align: center;
}
div.itemcontent p img:first-child {
	display: block;
	margin-left: auto;
	margin-right: auto;
}
div.itemcontent blockquote p img:first-child {
	display: inline;
}
div.itemcontent.bigitem img {
	display: block;
}
div.itemcontentphoto a img {
	cursor: zoom-in;
}


div#sitewrapper {
	margin: 0px auto;
	overflow: hidden;
	position: relative;
	padding: 0 5px;
}


/* new item snippets */

div.date_jutout {
	float: left;
	margin-left: -160px;
}
div.date_jutout_inside {
	font-style: italic;
	font-size: 10pt;
	text-align: right;
	color: #aaa;
	width: 130px;
}

div.itemsnippet {
	margin-bottom: 3em;
}


/* item pages */

body.item header,
body.item div#contentwrapper {
	margin-left: auto;
	margin-right: auto;
	width: 665px;
}

body.item.editor div#sitewrapper {
	margin-right: 650px;
	margin-left: 0;
	width: 660px;
}
body.item.editor div#contentwrapper {
	margin-left: 0;
	margin-right: 0;
}
div#editor {
	background-color: #f2f2f2;
	border-left: 3px solid #ddd;
	bottom: 0px;
	padding: 10px 20px 10px 15px;
	position: fixed;
	right: 0px;
	top: 0px;
	width: 650px;
}
body.editor div#editor {
	display: block;
}
body.editor div#editor h1 {
	margin: 0;
	padding: 0;
	display: inline;
}
div#editor label {
	display: inline-block;
	position: relative;
	margin-bottom: 5px;
	height: 1.6em;
}
div#editor input[type=text],
div#editor input[type=checkbox] {
	padding: 2px;
	position: absolute;
	left: 90px;
	width: calc(100% - 95px);
}
div#editor textarea,
div#editor .CodeMirror {
	font-size: 0.8em;
	border: 1px solid #ddd;
	position: absolute;
	height: auto;
	line-height: 1.2em;
	right: 15px;
	width: 90ch;
	bottom: 10px;
	top: 120px;
}
.CodeMirror .cm-spell-error:not(.cm-url):not(.cm-comment):not(.cm-tag):not(.cm-word){
	background:rgba(255,0,0,.15)
}


div.itemwrapper h1,
div.itemwrapper h2,
div.itemwrapper h3,
div#editor h1 input {
	color: #333;
	font-weight: bold;
	padding: 0;
	margin: 0;
}

div.itemwrapper h1,
div.itemwrapper h1 a,
div#editor h1 input {
	color: #333;
	text-decoration: none;
}

div.itemdetails {
	font-size: 10pt;
}
div.itemdetails,
span.relateddetails {
	color: #aaa;
	margin: 0;
	margin-top: 2px;
	margin-bottom: 2px;
	padding: 0;
}
div.itemdetails a,
span.relateddetails a {
	color: #999;
	text-decoration: none;
}

div#related,
div#commentcontainer {
	margin-top: 3em;
}
div#commenthead {
	margin-bottom: 1em;
}

div.itemedit {
	position: fixed;
	right: 0;
	bottom: 0;
	background-color: white;
	outline: 1px solid gray;
	padding: 5px 10px;
}


/* per-comment */

div.comment {
	margin: 1em;
	overflow-x: auto;
}
div.commentgravatar {
	float: left;
}

div.commentfrom,
div.commentcontent {
	margin-left: 47px;
}

div.commentcontent p {
	margin-top: 0.5em;
}
div.commentcontent p:first-child {
	margin-top: 0px;
}

div.commentcontent li {
	margin-left: 15px;
}
div.commentcontent ul li,
div.commentcontent ol li {
	margin-left: 5px;
}

div.commentpreviewform {
	margin-top: 1em;
}

div.commentfrom {
	color: #aaa;
}
div.commentfrom a {
	color: #bbb;
}
div.commentfrom span.commentfromname,
div.commentfrom span.commentfromname a,
div.commentfrom span.commentfromitem a {
	color: #195ecf;
}
div.commentfrom a.twitterlink {
	color: #33ccff;
	text-decoration: none;
}
div.commentreply {
	float: right;
	padding: 0px 10px 2px 10px;
}
div.commentreply a {
	color: #999;
	text-decoration: none;
}
div.commentfrom strong {
	font-weight: 300;
	color: gray;
}


/* data tables */

div.datatable label {
	display: block;
	float: left;
	margin-bottom: 4px;
}
div.datatable img {
	vertical-align: middle;
}
div.datatable label, div.datatable span, div.datatable select,
div.datatable br {
	line-height: 2em;
}
div.datatable br {
	clear: left;
}
div.datatable textarea {
	margin-bottom: 4px;
}

div.datatable label.norm {
	display: inline;
	float: none;
}

div.datatable label {
	width: 90px;
}
div.hintblock {
	color: gray;
	font-style: italic;
}

div.datatablewide label {
	width: 140px;
}
div.datatablewide div.hintblock {
	color: gray;
	font-style: italic;
	margin-left: 130px;
}

iframe.vimeo {
	height: 420px;
	margin-left: -15px;
	width: 654px;
}

iframe.slides_preview {
	-moz-transform: scale(0.5);
	-moz-transform-origin: 0 0;
	-webkit-transform: scale(0.5);
	-webkit-transform-origin: 0 0;

	/* 1366/768 */
	width: 1245px;
	height: 700px;
}

div.itemcontent table {
	border-spacing: 0;
	border-collapse: collapse;
	display: block;
	overflow: auto;
	width: 100%;
	word-break: normal;
	word-break: keep-all;
}
div.itemcontent table th {
	font-weight: bold;
	background-color: #f7f7f2;
}
div.itemcontent table th,
div.itemcontent table td {
	border: 1px solid #ddd;
	padding: 6px 13px;
}
div.itemcontent table tr {
	background-color: #fefefe;
	border-top: 1px solid #ccc;
}
div.itemcontent table tr:nth-child(2n) {
	background-color: #f9f9f9;
}


/* responsive adjustments */

@media only screen and (max-width: 1000px) {
	div.date_jutout {
		display: none;
	}
}

@media only screen and (max-width: 685px) {
	body.item header {
		margin-top: 0;
	}

	body.item div#contentwrapper {
		width: auto;
		min-width: auto;
	}
	body.item header {
		margin-right: 0;
	}
	body.item div.itemwrapper img {
		height: auto;
		max-width: 100%;
	}
	body.item div.itemphotos div.bigitem img {
		margin-left: 0 !important;
	}
	body.item div.itemphotosets {
		padding-left: 1em;
		padding-right: 1em;
	}
	body.item div.itemphotosets div.photosetphotos {
		margin-left: -1em;
		margin-right: -2em;
		padding: 0;
	}

	body.item iframe {
		max-width: 100%;
	}

	body.item video {
		max-width: 100%;
		height: auto;
	}

	iframe.vimeo {
		margin-left: 0;
		width: 100%;
	}
}


/* helpers */

div.flash-notice, div.flash-error, div.flash-info {
	border: 2px solid;
	margin: 5px 5px 10px 5px;
	padding: 5px 10px;
}

div.flash-notice li, div.flash-error li, div.flash-info li {
	margin-left: 15px;
}

div.flash-notice {
	background-color: #e8ffe7;
	border-color: green;
}

div.flash-error {
	background-color: #ffe7e7;
	border-color: red;
}

div.flash-info {
	background-color: #fffee4;
	border-color: #fffa77;
}

div.fieldWithErrors {
	display: inline;
}
div.fieldWithErrors input,
div.fieldWithErrors select,
div.fieldWithErrors textarea {
	padding: 2px;
	border: 2px solid red;
}