/*  
Theme Name: Super Slider
Theme URI: http://www.samueljohn.de/super-slider
Description: Elegant and clean. Featuring a configurable sliding images in the menu which has been adapted to work even if JS is disabled; of course then without animation. (Based on Wayne Connor "Sliding Doors" and on Samuel Birch's phatfusion image menu.)
Version: 0.6
Author: Samuel John
Author URI: http://www.SamuelJohn.de
Tags: white, custom header, print css, fixed width, left sidebar,two columns, widget ready, widgets, valid CSS, xhtml

License:
	The CSS, XHTML and design:
	This work is licensed under the Creative Commons Attribution-Noncommercial-Share Alike 3.0 Germany License. To view a copy of this license, visit http://creativecommons.org/licenses/by-nc-sa/3.0/de/ or send a letter to Creative Commons, 171 Second Street, Suite 300, San Francisco, California, 94105, USA.
*/

/* for all elements */
* { margin: 0; padding: 0; list-style: none; }

body {
	font-size: 62.5%; /* Resets 1em to 10px (from WP default theme :-)*/
	font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif;
	text-align: center;
	color: #222222;
	background-color: #ddd;
}

/* Color for links */
body a { color: #996633; }


/* Language images that mark everything that has a lang-attribute */

.de, #content *[lang="de"] {
	background: url(img/de.png) 0px 3px no-repeat;
	padding-left: 30px !Important;
}
.en, #content *[lang="en"] {
	background: url(img/en.png) 0px 3px no-repeat;
	padding-left: 30px !Important;
}



/* Headings */

h1 {
	font-size: 2.5em;
	text-align: center;
}

h1, h2, h3 {
	font-family: 'Trebuchet MS', 'Lucida Grande', Verdana, Arial, Sans-Serif;
	font-weight: bold;
}

h2 {
	font-size: 2.8em;
	margin-top: 1em; 
	margin-bottom: 0;
}

h3 {
	font-size: 2.2em;
	margin-top: 1.6em;
	margin-bottom: 0;

}

h4 {
	font-size: 1.6em;
	margin-top: 1.2em;
	margin-bottom: 0;
	font-style:italic;
}



/* Wraps around everything.*/

/* Wrapper defines overall width. Note, when changing this, the width of the #content 
   and #content .post and #content .post img and #content .post ul li, #post-end-line
   and .floatright should be adapted. */
#wrapper {
	width: 744px;
	margin: 0 auto;
	text-align: left;
	position: relative;
	background-color: #ddd;
}    



/* Head of your page */

#header a {
	margin-bottom: 10px;
	padding-bottom: 15px;
	font: 3em "Trebuchet MS", "Lucida Grande", Lucida, Vernada, sans-serif;
	padding-top: 10px;
	/* color: #996633; */
	text-decoration: none;
}
#header { text-align: center; }
#header img { border:0px; margin-top:12px; }
/* #header a:hover { color: #663333; }
#middleword { color: #909090; } 
#header a:hover #middleword { color: #fff; } */
 
/* Text below your main title:*/ 
.description {	
	text-align: left;
	font: normal 1.2em Verdana, Helvetica, Sans-serif;
	color: #666;
	padding-bottom: 0px;
}  

                
#content {
	float: left;
	width: 574px;
	margin-top: 0px;
	padding-bottom: 20px;
}

/* A notice on top of the posts (optionally). For example for the search results. */
#content .notice p {
	padding: 5px 0px;
	font-size: 1.2em;
	margin: 1px;
}
#content .notice {
	border-bottom: 1px solid #cccccc;
	margin-bottom: 20px;
	margin-right: 30px;
}



/* A post */

#content .post {
	float: right;
	position: relative;
	width: 554px;
	padding-right:20px;
	margin-bottom: 15px;
}

/* The title of a post */
#content .post h2 a {
	/* you can overwrite the global h2 size: font-size: 2.2em; */
	color: #996633;
	text-decoration: none;
}
#content .post h2 a:hover {
	color: #663333;
}

/* heading within the post*/
#content .post h3 {
	text-decoration: none;
}


/* Notes for a post. */
#content .post-details {
	
}

/* When the post was posted, the number of comments are put in a <h3> element */
#content .post h3 a {
	color: #996633;
}              
/* An image in a post: constrain max dimensions*/
#content .post img {
	max-width: 540px;
	max-height: 540px;
	/* margin-bottom: 5px;
	margin-top: 10px;
	margin-left: 10px;
	margin-right: 10px; */
}     

.aligncenter,
div.aligncenter {
	display: block;
	margin-left: 10px;
	margin-right: 10px; 
}

.alignleft { 
	float: left; }

.alignright { 
	float: right;
}

 
/* Lists in your posts: */
#content .post ul {
	margin-left: 20px !important;
}
#content .post ul li {
	list-style-type: disc !important;
}

/* The text/font for your main text and lists*/
#content p,
#content .post ul li {
	font: normal 1.2em Verdana, Helvetica, Sans-serif;
	margin-bottom: 10px;
	margin-top: 10px;
	color: #222222;
	text-align: justify;
	line-height: 1.6em;
}

/* We add big " around the blockquotes in the content area. (Thanks to http://monc.se/kitchen/129/rendering-quotes-with-css) */
#content blockquote {
	font-size: 1.2em;
	margin-top:2.4em;
	margin-left: 0px;
	border-left: 10px solid #ccc;
	padding-left: 15px; 
} 
#content blockquote p { 
	font-style: italic;
	font-family: serif, Times;
	margin-top: 1.1em;
	margin-bottom: 1em;
}
#content blockquote * { quotes: none; }
#content blockquote *:before { 		
	content: '\201C'; 
	font-family: serif;
	font-size:4.5em;
	vertical-align:-50%;
	font-style:italic;
	color:#cccccc !important;
}
#content blockquote > *:after { 
	content: '\201D'; 
	font-size:2em;
	font-family: serif;
	vertical-align:-50%;
	font-style:italic;
	color:#cccccc !important;
}
blockquote q:before { content: '\2018'; }
blockquote q:after { content: '\2019'; }


#content p a {
	color: #996633;
}
	
#content p a:hover {
	text-decoration: none;
} 
	
#content small {
	font-family: Arial, Helvetica, Sans-Serif;
	font-size: 0.9em;
	line-height: 1.5em;
}

#content ol { line-height: 1.6; }
#content ol.commentlist { margin: 20px; }
#content ol.commentlist li {
	border-top: 3px solid #ccc;
	margin-bottom: 10px;
	margin-left: 0px;
} 
#content ol.commentlist li .commentMeta {
	width: 120px;
	float: left;
	margin-top: 5px;
} 
#content ol.commentlist li .commentMeta span { display: block; }
#content ol.commentlist li .commentMeta span.author,
#content ol.commentlist li .commentMeta span.author a {
	color: #666;    
	text-decoration: none;
	margin-bottom: 5px;
}
#content ol.commentlist li .commentMeta span.author a:hover { color:#222222 }                     
#content ol.commentlist li .commentMeta span.date a {
	color: #666;
	text-decoration: none;
	font-size: 1em;
}
#content ol.commentlist li .commentMeta span.moderate a {
	color: #aaaaaa;
}
#content ol.commentlist li .commentText {
	width: 500px;
	float: right;
	padding: 5px;
	font-size: 1em;
}
#content ol.commentlist .avatar { float: left; }
	
#content input,
#content #commentform input {
	padding: 2px;
	font-size: 1.2em;
	font-family: Arial, Helvetica, Sans-serif;
}
	
#content #commentform textarea {
	width: 540px;
	background-color: #eee;
	padding: 2px;
	font-size: 1.2em;
	font-family: Arial, Helvetica, Sans-serif;
}
	
#content .nextprevious {
	height: 40px;
	display: block;
} 
	
#content .nextprevious a {
	color: #CCC;
}               
	
#content .nextprevious .left {
	float: left;
}              
	
#content .nextprevious .right {
	float: right;
}
#post-end-line {
	clear: both;;
	display: block;
	width: 554px;
 	height: 5px;
	background: #ccc;
	border: 0; 
	margin-top: 10px;
	margin-bottom: 10px;
} 
	
	
	
/* Information about the post : */	
#content .post-details {
	font-size: 1em;
	font-weight: normal;
	color: #999999;
	margin-top: 5pt;
}
#content .post-details h3 a:hover {
	color: #663333;
	text-decoration: none;
}


#content textarea.fullwidth {
	width: 560px;
}


/* All the things on the side where WP places its widgets and so on...*/
#sidebar {
	width: 170px;
	float: right;
	padding-top: 2px;
	text-align: left;
	display: block;
} 

#sitemeter {
	text-align: center;
	width: 170px;
	font-size: 1em;
	color: #555;
}

#sitemeter img{
	padding-bottom: 8px;
	padding-top: 8px;
}
/* The captions of the widgets in the sidebar */
#sidebar h2 {
	font-weight: normal;
	font-size: 2em;
	text-transform: uppercase;
	margin-bottom: 5px;
	color: #666;
}

#sidebar a img {
	border: none;
}

#sidebar ul ul {
	margin-top: 2px;
	margin-bottom: 15px;
}

#sidebar ul ul li {
	font-size: 1em; /* Font size of the entris*/
	background: url(img/bullet.png) 0 5px no-repeat;
	padding: 0 10px;
	margin: 0 0 5px 5px;
}

#sidebar ul ul li a {
	color: #888888;
	text-decoration: none;
}
/* Mouse over the entries (links) in the sidebar: */
#sidebar ul ul li a:hover {
	color: #663333;
}

/* The footer is in the sidebar to the left. You can change this but then, you must also edit sidebar.php */
#sidebar #footer {
	padding: 7px;
	font-size: 1em;
}

#sidebar #footer p {
	margin-bottom: 5px;
	color: #ccc;
	text-align: center;
}
    
#sidebar #footer a {
	color: #ccc;
	text-decoration: none;
}
    
#sidebar #footer a:hover {
	text-decoration: none;
	color: #333333;
}

.clearfix { clear: both; }	

/* For program code in the post */
code {
	font: 1.1em 'Courier New', Courier, Fixed;
}




/* Not used right now. I'll leave this here, so it is easy to add a navigation in the sidebar */
#sidebar ul#nav {
	margin: 10px 0 20px 0;
}
#sidebar ul#nav li {
	margin: 0;
	padding: 0;
}
#sidebar ul#nav li a {
	display: block;
	height: 17px;
	padding: 7px 10px;
	background: url(img/nav_off.png) 0px 0px no-repeat;
	margin-bottom: 5px;
	text-decoration: none;
	font-size: 1.2em;
	text-transform: uppercase;
	font-weight: bold;
	color: #ff0000;
}
#sidebar ul#nav li a:hover {
	background: url(img/nav_off.png) 0px -31px no-repeat;
	color:#663333
}        
#sidebar ul#nav li a.active {
	background: url(img/nav_on.png) 0px 0px no-repeat;
	color: #000;
}


abbr {
	border-color: #555555;
	border-bottom-width: 1px;
	border-left-width: 0px;
	border-right-width: 0px;
	border-top-width: 0px;
	border-style: dotted;
	text-decoration: none;
}



/* The caption for images. */
.wp-caption-text  {
	font-size: 1em !Important;
	margin: 7px !Important;
	text-align: center;
	line-height: 1em;
}
.wp-caption {
	background-color: #fff;
	padding:        11px;
	margin-left:   16px;
	margin-right:  16px;
	margin-top:    10px;
	margin-bottom: 10px;                
	text-align: center;
	border-radius: 3px; 
}
.wp-caption img {
	margin: 0;
	padding: 0;
	border: 0 none;
}

/*****
Image Menu
v 2.2patchSJ
	*****/
/* Modificatons by Samuel John. 2009.*/

#imageMenu {
	height: 220px;
	overflow: hidden;
	background-color: #ddd;
	position: relative;
	padding: 10px 0 10px 0px;
	border-style: none;
	margin: 0 auto;
	/* The width is now directly in the header.php for easier modification 
	directly from wordpress admin panel.*/
}


#imageMenu ul {
	list-style: none;
	margin: 0px;
	display: block;
	height: 200px;
	width: 1000px;
}

#imageMenu ul li {
	float: left;
	border-bottom-style: solid;
	border-bottom-width: 1px;
	padding-bottom: 12px;
	padding-top: 12px;
	border-top-style: solid;
	border-top-width: 1px;
}

#imageMenu ul li a {
	/* Note: The width is now defined in the header.php */
	
	text-indent: -1000px; /* Get the text out of the way. When CSS are disabled, the user
							 can see the text, which is a good thing. Perhaps with modern
							 CSS 3 it is possible to render vertical text directly onto
							 the images with dropshadow effect? Then it would be easier
							 to exchange the images... and more compatible.*/
	background:#000000 none;
	border-right: 2px solid #ddd;
	cursor:pointer;
	display:block;
	overflow:hidden;
	height: 200px;
	margin: 0;
	padding: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
}


/* The image information are now in the header.php, too. So its faster to change an image. 
If you'd like to attach additional CSS to the menu images, you can use this predifined classes and
make sure that the name of the classes ("im1",...) are set in the array in the header.php. */

/*
#imageMenu ul li.im1 a {}
#imageMenu ul li.im2 a {}
#imageMenu ul li.im3 a {}
#imageMenu ul li.im4 a {}
#imageMenu ul li.im5 a {}
#imageMenu ul li.im6 a {}
#imageMenu ul li.imLast a {
	border-right-style: none;
	width: 320px; 
/*	
}*/

.clear {
	clear: both;
}