/*
	Theme Name: Turbine
	Version: 1.0
	Author: uli@aplusplus.org
*/

@import "reset.css";


/* Prevent scroll bar jump */
html {
	height: 100%;
	margin-bottom: 1px;
}
.index {
	
}
/* Defaults */
body {
	background-color: #FAFAFA ;
	color: #888;
	font: 0.66em Arial, Sans-Serif;
	line-height:130%;
	width:100%;
	}
	
a {
	background-color: inherit;
	color: black;
	text-decoration: underline;
	}
a:hover {
	background-color: inherit;
	}

input {
	text-align:left;
}

/*
General Textstyles

*/

.smalltext {
	font: .9em Arial, Sans-Serif;
}
.mainnavtext {
	font: italic 1.1em Georgia, Serif;
	color:#666;
}
a.mainnavtext {
	text-decoration:none;
}
a.mainnavtext:hover {
	text-decoration:underline;
}

h1{
	font-size:1.9em;
	line-height:100%;
	width:350px;
	text-decoration:none;
	color:black;
	letter-spacing:-.02em;
	
}

h2{

	font-size:1.3em;
	line-height:1.5em;
	width:350px;
	text-decoration:none;
	color:black;
	font-weight:bold;
	margin-bottom:1em;
}
h1 + h2{
	margin:-0.5em 0 0 0;padding:0;
	margin-bottom:1em;
}
h1 a, h2 a, h3 a {
	text-decoration:none;
}
/*
	page
		div#definition
		ul#header
			li#search
			li#userinfo
		div#content
			div#navigation
			div#list
				div#post
			div#navigation
			
		div#footer
*/
#topcontainer {
	width:100%;
	max-width:100%;
}

/* definition styles */

#definition {
	height:50px;
	overflow:hidden;
	background:black;
	width:100%;
}
#defcontent {
	display:none;
}
#defimage {
	width:100%;
	min-height:500px;
}
#defimageload {
	display:none;
}
#defchange {
	height:50px;
	width:100%;
	position:absolute;
}
#defchange img {
	width:100%;
	height:100%;
}
#defoverlay {
	position:absolute;
	max-width:1000px;
	top:413px;
	text-align:center;
}
#deftext {
	width:100%;
	max-width: 740px;
	min-width: 740px;
	margin: 0 auto 0 auto;
}
#deftextholder {
 position:absolute;
 font: 35px Arial, Sans-Serif;
 font-weight:bold;
 line-height:100%;
 color:white;
 margin: 50px 0 0 0;
 width:500px;
}
#deftextback {
  background:black;
}

#page {
	width:100%;
	max-width: 740px;
	min-width: 740px;
	text-align: left;
	margin: 0 auto 0 auto;
}

/* general header with user logged in state above every page */
#headcontainer {
	width:100%;
	background:black;
	overflow:hidden;
	height:150px;
}
#header {
	display:block;
	height:55px;
	max-width: 740px;
	min-width:740px;
	margin: 0 auto 0 auto;
	padding:10px 0 10px 0;
}

#header li {
	float:left;
}
#header li#search {
	width:500px;	
}
#header li#search input#searchfield {
	background:none;
	border:none;
	color:black;
	font: 23px Arial, Sans-Serif;
	font-weight:bold;
	float:left;
	min-width:500px;
	padding: 1px 1px 0px 1px;
	width:500px;
}
#header #searchtitle {
	font:italic 12px Georgia,Serif;
	color:#CCC;
	height:20px;
}
#header li#userinfo {
	width:200px;
	margin:22px 0 0 40px;
	color:white;
}
#header #userid {
	font-size:17px;
	font-weight:bold;
}
#header li#userinfo a {
	color:white;
	text-decoration:none;
}
#header li#userinfo a:hover {
	text-decoration:underline;
}
#headsubimage {
	overflow:hidden;
	height:87px;
	width:100%;
	background:#FAFAFA;
	text-align:center;
}
#headsubimage img {
	min-width:1000px;
}
#topcontainer {
	margin:0 0 20px 0;
}
/* index list spacing &  width limit */
#list div.entry {
	width:500px;
	overflow:hidden;
	max-width:500px;
	margin:0 0 .8em 0;
}

/* 
text layout for content 
*/

#content.single div.entry img {
	margin:0 0 1em 0;
	max-width:680px;
}
#content.single div.entry p {
	font: 1.3em/140% Arial, Sans-Serif;
	color:black;
	width:500px;
	margin:0 0 1em 0;
	padding:0;
}
#content.single div.entry blockquote {
	float:right;
}
#content.single div.entry blockquote p {
	width:145px;
	font:bold italic 1em Arial, Sans-Serif;
	color:#666;
	display:block;
}
/* spacing for headline on single pages */
#content.single div.entry h1 {
	margin: .2em 0 0.5em 0;
}

/* 
 index page layout
*/
#indeximage {
	min-height:50px;
	background:black;
}
#content.index {
	backrgound:red;
	max-width:500px;
	width:500px;
	float:left;
}
#content.index div.entry h1 {
	position:absolute;
	margin:0;
	display:block;
	height:auto;
	clear:both;
}
#content.index div.entry p {
	min-height:50px;
	margin:0;
	background:black;
	color:black;
}
#content.index div.entry p:hover {
	background:black;
	color:white;
}

.headlineback {
	background:#FAFAFA;
}

/* sidebar */
#sidebar h2 {
	font-weight:bold;
}
#sidebar {
	float:right;
	width:200px;
	border-top:1px solid black;
	color:black;
}

#sidebar li {
	padding:2px 0 5px 0;
	border-top:1px solid black;
}
#sidebar ul {
	margin:0 0 7px 0;
	padding:0;
	border:none;
}
#sidebar ul li {
	margin:0 0 5px 0;
	padding:0;
	border:none;
}
#sidebar li.page_item {
	margin:0;
	padding:0;
}
#sidebar li.page_item a {
	padding:2px 0 5px 0;
	font-weight:bold;
	color:black;
	width:200px;
	display:block;
	text-decoration:none;
}
#sidebar li.page_item a:hover{
	color:white;
	background:black;
	text-decoration:none;
}


#sidebar a:hover {
	text-decoration:underline;
}
#flickrfeed {
	border:none;
	margin:30px 0 0 0;
}
#flickrfeed img{
	margin:0 1px 1px 0;
}

/* footer */ 
#footer {
	display:block;
	width:100%;
	margin:50px 0 0 0;
	padding:10px 0 100px 0;
	color:#333;
	border-top:1px dotted #666;
	float:left;
}
#footer a {
	text-decoration:none;
}
#footer p {
	width:500px;
} 

.post h3 #commentinfo {
	width:28px;
	height:25px;
	float:right;
	margin:0;
	padding:0;
}
.post #commentinfo a {
	margin:0;
	padding:0;
	width:28px;
	height:25px;
	padding-bottom:10px;
}

.post #commentnumber {
	margin:0;
	padding:0;
	width:100%;
	height:25px;
	color:white;
	text-align:center;
	line-height:15px;
	font-size:.65em;
	padding:0 0 0 2px;
	background:url(images/comment_back.gif) no-repeat 0 0;
}

.post #nocommentinfo {
	margin:0;
	padding:0;
	width:100%;
	height:25px;
	color:white;
	text-align:center;
	line-height:15px;
	font-size:.65em;
	padding:0 0 0 2px;
	background:url(images/no_comment_back.gif) no-repeat 0 0;
	display:block;
	}


#pageinfo {
	color:#999;

	}







.npage,.ppage  {
	margin:0 1em 0 .2em;
	font-weight:bold;
	}

small, .postmetadata, blockquote, strike {
	font-size: 1.1em;
	color: #888;
	background-color: inherit;
	}


/* 	Used to hold phrases such as "Read more >>" together */
.nowrap {
	white-space: nowrap;
}

#commentforms {
	margin:6em 0 0 0;
}

/*	Can't say font: inherit; as IE don't get it */
.commentlist li, #commentform input, #commentform textarea {
	font: 1.3em/140% Arial, Sans-Serif;
	}


.commentlist {
	padding: 1em 0 0 0;
	margin: .6em 0 6em 0;
	text-align: justify;
	border-top:1px solid black;
	}

.commentlist li {
	margin: .3em 0 1em 0;
	list-style: none;
	width:100%;
	color:#222;
	}
#commenthead {
color:black;
	font:italic 12px Georgia,Serif;
}
#commentmetadata small {
	font-size:.8em;
}
#commentmetadata cite {
	font-weight:bold;
	font-size:1em;
	line-height:90%;
}
.commentlist li.alt {
	color:#444;
	/*border-top:1px solid #666;*/
	padding: .5em 0 0 0;
	}


#commentmetadata {
	font-size:1em;
	color:#666;
	float:right;
	width:200px;
	margin:0;
	padding:0;
}

#commentmetadata a {
	text-decoration:none;
	color:#666;
	font-size:1em;
	}
#commentmetadata a:hover {
	text-decoration:underline;
	}


/*	Comment paragraphs are indented by 0.6em */

#commenttext p {
	width:500px;
	margin:0;
	padding:0;
}

	
/*	The name of the commenter is cited a little larger */

#commentform {
	padding:.5em 0 0 0;
	}

#commentforms label {
	margin:0 0 0 30px;
	width:200px;
	text-align:left;

}
/*	Gives the name/mail/web text input boxes their width & spacing */
#commentform input {
	width: 500px;
	padding: 0.25em;
	margin: 3px 0 0 0;
	background:white;
	border:1px solid #666;
	}

.login {
	width:500px;
	font-size:1.3em;
	font-weight:bold;
	color:#333;
	
}
/*	The main comment entry box fills the width of the content column */
.commentformtitle {
	float:right;
	width:200px;
}
#commentform textarea {
	padding: 0.25em;
	margin: 0.6em 0.6em 0 0;
	background:white;
	border:1px solid #666;
	width:500px;
	}

/*	The text of the "Submit Comment" link should be on the right */
#commentform #submitcomment {
	margin: 2em 0 1em 0;
	height:40px;
	
}
#commentform #submitcomment input {
	background:black;	
	height:40px;
	color:white;
	text-decoration:none;
	width:200px;
	border:none;
	}
#commentform #submitcomment a:hover {
	color:white;
	text-decoration:none;
	}
/*	I've added this to highlight a comment in limbo.. */
.awaitingmoderation {
	border: 1px dotted #f00;
}

/*	..and this for 404 page titles */
.problem {
	color: #f00;
	background-color: inherit;
}



/*	Image defaults
	Safari bug squishes image out of aspect when shrinking for max-width: 100% here
	But current Web-kit builds seem to have fixed this so next release might be OK
	Removing the max-width line allows large images to be full size: scroll to see all
*/
img {
	max-width: 100%;
	padding: 0;
	margin: 0;
	}

a img {
	border: none;
	}

/*	Using these classes with img elements is preferable to align="..." attribute */
img.centered {
	display: block;
	margin: 0.6em auto 0.6em auto;
	}

/*	The actual alignment is done by the general .alignleft rule above
	Typical usage would be for a leading  small picture with text flowing past its right edge */
img.alignleft {
	margin: 0.6em 0.9em 0.6em 0;
}

img.alignright {
	margin: 0.6em 0 0.6em 0.9em;
}

/*	Lists inside posts
	The html>body prefix is not understood by IE which therefore doesn't read these rules
	as the stylized bullets don't work in IE anyway */
	

html>body .entry ul {
	margin: 0;
	padding: 0 0 0 2em;
	list-style: none;
	text-indent: -1em;
	}

html>body .entry li {
	margin: 0.8em 0 0.9em 1.1em;
	}

.entry ul li:before {
	content: "\00BB  ";
	}

.entry ol {
	padding: 0 0 0 2em;
	margin: 0;
	}

.entry ol li {
	margin: 0;
	padding: 0;
	}


ol li {
	list-style: decimal outside;
	}

/*	Code should be used for just a few words.. */
code {
	font: 1.1em 'Courier New', Courier, Monospace;
	}

/*	..and the pre tag works better for whole code excerpts */
pre {
	background-color: #f9f9f9;
	color: black;
	padding: 0.6em 0 0.6em 0.6em;
	margin: 0 0 1em 0;
	font: 1.1em 'Courier New', Courier, Monospace;
	white-space: pre;
	overflow: auto;
	border: 1px solid #ddd;
}

/*	Horrible hack to try to stop IE overflowing on long lines in pre elements.
	IE needs a width to turn on overflow, but 100% here with padding leads to the
	overflow scroller itself causing the entry to overflow in turn. Nasty.
	So this just truncates the pre block. Also nasty, but slightly less ugly.
	(The * html prefix selects IE out of all browsers as its the only one to think
	there is a super-element surrounding the html one)
*/
* html pre {
	width: 30em;
}

acronym, abbr, span.caps {
	font-size: 1em;
	letter-spacing: .08em;
	cursor: help;
	}

acronym, abbr {
	border-bottom: 0.2em solid #ddd;
	}


strong, b {
	font-weight: bold;
	}

em, i {
	font-style:italic;
	}

/*	This class holds the next posts/previous posts links
	1px lower padding just required to get Opera to honour margin setting (!) */
.navigation {
	width:500px;
	font: italic 1.7em Georgia, Serif;
	color:#666;
	/*  */
	}
.navigation a {
	text-decoration:none;
	padding:.4em 0 .4em 0;
}

.navigation a:hover {
	text-decoration:underline;
}

#related li {
	padding:0 0 0 0;
	margin:1em 0 5em 0;
	font:1.15em Arial,Sans-Serif;
	color:#444;
	}

#related li a {
	font:1.15em Arial,Sans-Serif;
	color:#222;
	}
.lightborder {
	margin:3em 0 0 0;
	border-top:1px dashed #CCC;
	}
.alignright {
	float: right;
	}

.alignleft {
	float: left;
	}

/*
	Blocks containing only floating child elements seem to have no height. This hack allows
	an empty, non-floating, div to be appended to give the container its true height.
	Used in #page and .navigation */
.snap-to-fit {
	clear: both;
	visibility: hidden;
}



/* safari hack */
#header li#search input#searchfield {
color:white;#
}