/*  
Theme Name: Typoblog2
Theme URI: http://www.typoblog.ch
Description: Typoblog 2.0<br /> - Simples Theme für den neuen Typoblog.
Version: 1.0
Author: Roland Liechti 
Author URI: http://www.typoblog.ch

(based on Autumn Concept by Ed Merrit http://www.edmerritt.com/)
*/

/* BASIC STYLES
____________________________________________________________________________
*/

* {font-size: 100%; margin: 0; padding: 0; line-height: 1.4em;}
body {position: relative; background: #1f1f1f; font: 14px Verdana, Arial, Helvetica, sans-serif; text-align: center; letter-spacing: 0; color: #333;}
h2 {color: #3a3e3e}
h3 {color: #3a3e3e;font: bold 1.1em Arial, Helvetica, sans-serif; padding: 0 0 10px 0; margin: 24px 0 12px 0; background: url(images/underline.png) bottom repeat-x; clear:both;}

a {color: #3a709c;}
p {margin: 0 0 24px 0; font-size:14px; clear: both;}
blockquote {border-left: 10px solid #c0c0b1; background: #ededda; }
code {color: #006600;}


.left {float: left; clear: both;}
.right {float: right;}



/* typography */

.textbkg {border-left: 4px solid #fff;}
.textbkg span {background: #fff; outline: solid 2px #fff; -moz-outline: solid 2px #fff;}

/* modules and widgets */
#wp-calendar td {background: #ededda;}
#flickr a {border: 4px solid #c0c0b1; background: #fff;}
#flickr a:hover {border-color: #959586;}
/* forms */

/* buttons */
.comments a {background: url(images/comments_left.png) top left no-repeat; color: #3a3e3e;}
.comments span {background: url(images/comments_right.png) top right no-repeat;}









/* GENERAL STYLES
____________________________________________________________________________
*/

/* Layout Containers */
#container {float: left; display: block; width: 100%;}
#content {float: left; display: block; width: 100%; text-align: left;}
#related {float: left; display: block; width: 100%; background-image: url(images/related.png); background-position: top; background-repeat: repeat-x; text-align: left;}
#container, #nav li ul li {background-color: #fff;}

.cols01 {float: left; display: block; width: 280px; padding: 0 10px 48px 10px;}
.cols02 {float: left; display: block; width: 560px; padding: 0 30px 48px 00px;}
.cols03 {float: left; display: block; width: 880px; padding: 0 10px;}
.center {text-align: center;}
.box01 {display: block; max-width: 900px; margin: 0 auto; clear: both;}


/* Header */
#header {float: left; display: block; width: 100%; background-image: url(images/header.png); background-position: top; background-repeat: repeat-x; text-align: left;}
#logo {background: transparent url(images/logo_typoblog.png) no-repeat left 10px; height: 90px;float:left; width: 550px;}
#logo a {color: #3a3e3e;visibility:hidden;}
#blogdescription {display:none;}
#typopic {height: 170px; border: 1px solid #fff;clear: both; display: block; width: auto;}
#typopic ul {padding: 0; margin: 0;}
#typopic ul li {list-style-type: none; padding: 0;}

/* Footer */
#footer {float: left; display: block; width: 100%; background-image: url(images/footer.png); background-color: #333; background-position: top; background-repeat: repeat-x; text-align: left; padding: 13px 0 6px 0;}
#footer p {color: #76766a;margin-bottom: 12px; font-size: 0.75em;}
#footer a {font-weight: normal; color: #3a709c;}

/* Date Settings */
.date {float: left; width: 6.3em; height: 6.3em;background: #777; margin-right: 20px;}
.dateDay {display: block; text-align: right; margin: 5px 10px 0 0; font: bold 2.4em Arial, Helvetica, sans-serif; color: white;}
.dateMonth {display: block; text-align: right; margin: 2px 10px 0 0; font: 10px Tahoma, Arial, Helvetica, sans-serif; text-transform: uppercase; color: white;}
.dateYear {display: block; text-align: right; margin: -3px 10px 0 0; font: 10px Tahoma, Arial, Helvetica, sans-serif; text-transform: uppercase; color: white;}

/*Entry and Comments*/
.entry_content {clear:both;}
.entry_content img {padding: 15px; border: 1px solid #bbb;clear:both;}
.entry_content h4, .entry_content p, .entry_content h2, .entry_content h3 {clear:both;}
.entry {float: left; width: 100%; clear: both; margin: 24px 0 0 0;}
.entry h2 a {color: #3a3e3e;}
.aComment {float: left; width: 100%; clear: both; margin: 0 0 12px 0;}
.aComment:last-child {background: none;}
.aComment h4 {margin: 0;}
.aComment h4 img {display: none;}
.aComment .textbkg {margin: 0 0 6px 0;}

.textbkg span {padding: 0 4px 0 0; overflow: visible; font-size: 11px; color: #777;}



/* navigation */
.navbox {padding:0px;width:auto;float:right;margin: 51px 0 0 0;}

#nav {float: left; position: relative; display: block; width: 100%; list-style: none; margin: 3px 0 0 0; padding: 0 0 7px 0;}
#nav li {float: left; position: relative; display: inline;}
#nav li a {float: left; position: relative; display: inline; padding: 8px 10px; z-index: 100;color: #333; font-weight: normal; letter-spacing: 2px;}
#nav li ul {display: none; position: absolute; left: -3px; padding: 3.45em 0 0 0; z-index: 90; margin: 0;}
#nav li ul li {display: block; padding: 10px 8px 8px 8px; background-color: white; 
			  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
			  filter: alpha(opacity=80);
			  -moz-opacity: 0.8;
			  -khtml-opacity: 0.8;
			  opacity: 0.8;
			  }
#nav li ul li.lastchild {padding-bottom: 3px;}
#nav li ul li a {display: block; width: 17em; padding: 0px 5px; font-weight: normal;}
#nav li ul li a:hover {padding-left: 5px;}
#nav li:hover ul {display: block;}

#nav > li:hover {border-top: 2px solid #222;}
#nav li ul li a {}
#nav li ul li a:hover {color: #3a709c;}


/* typography */
#logo {margin: 32px 0 0 0;}
#logo a {font: bold 3em Arial, Helvetica, sans-serif; text-decoration: none; letter-spacing: -2px;}
h2 {font: bold 1.9em Arial, Helvetica, sans-serif; letter-spacing: -1px;}
.pageH2 {margin: 0 0 24px 0;}
h3#comments {margin-bottom: 24px;}
h3#respond {float: left; clear: both; display: block; width: 100%;}
.archive h3 {background: none; margin: 0 0 -7px 0;}
h4 {font: 1.1em Arial, Helvetica, sans-serif; margin: 0 0 12px 0; font-weight: bold;}
.entry h2 {padding: 6px 0 0 0;}
.entry .textbkg span a {font-weight: normal;}
blockquote {padding: 10px 10px 1px 10px; margin: 0 0 24px 0;}
code {position: relative; left: 0; font: 1em "Courier New", Courier, mono; }
.cols01 ul, .cols02 ul {margin: 0 0 24px 14px;}
.cols01 ol, .cols02 ol {margin: 0 0 24px 21px;}
.cols01 ul ul, .cols02 ul ul, .cols01 ol ul, .cols02 ol ul {margin: 0 0 0 14px;}
.cols01 ol ol, .cols02 ol ol, .cols01 ul ol, .cols02 ul ol {margin: 0 0 0 21px;}

.comments {float: left; clear: both; display: inline; width: 100%;}
.comments a {float: left; display: inline; padding: 4px 0 5px 84px; font-weight: bold; font-size: 0.75em;}
.comments span {float: left; display: inline; background: url(images/comments_right.png) top right no-repeat; width: 10px; height: 22px; overflow: hidden;}
.archive .comments {margin-top: -46px;}
ul {margin: 0 0 24px 12px;}
ul ul {margin-bottom: 0;}
img {float: left; margin: 0 12px 12px 0;}
.wp-smiley {float: none; margin: 0;}
.smalltext {font-size: 10px;}


/* links */
a {font-weight: bold; text-decoration: none;}

a.link {padding-left:16px; background: transparent url(images/arrow01.gif) no-repeat 0px 2px;}
a:hover.link {padding-left:16px;background: transparent url(images/arrow02.gif) no-repeat 0px 2px;}

.pageNav, .pageNav2 {float: left; width: 100%; margin-top: 12px; color: white;}
.pageNext span, .pagePrev span {display: none;}
.pagePrev {float: left; display: block; width: 70px; height: 22px; background: url(images/prev.png) 50% 50% no-repeat;}
.pageNext {float: right; display: block; width: 70px; height: 22px; background: url(images/next.png) 50% 50% no-repeat;}


/* forms */
.field, .commentform_openid, #securitycode {width: 204px; padding: 4px 3px !important; margin: 0 5px 7px 0; background: #fff !important; border: 1px solid #959586; color: #999;}
select {width: 280px; margin: 0 0 7px 0; color: #3a3e3e;}
select option {padding: 1px;}
#commentform {display: block;}
#commentform p {display: block; width: 100%; margin: 0 0 5px 0;}
#commentform p label {position: relative; top: -8px;}
#comment {width: 571px; padding: 4px 3px; border: 1px solid #959586; font: 1em Verdana, Arial, Helvetica, sans-serif; color: #4f4f4c;}
#searchform {margin-top:25px;}
#searchform2 {}
#searchform2 div {}
#searchsubmit {position: relative; top: 5px;}

#flickr_badge_uber_wrapper {margin: 0 0 24px 0;}
.flickrlink {text-transform: lowercase;}
.flickrlink span {color: #ff0084;}
#flickr {float: left;}
#flickr img {border: none;}
#flickr a {float: left;}
.flickr_badge_image img {float: left; margin: 1px;}
#flickr div {float: left; margin: 0 10px 10px 0;}
#flickr div#flickr_badge_image3, #flickr div#flickr_badge_image6 {margin-right: 0;}

#wp-calendar {width: 100%; text-align: center;}
#wp-calendar .pad, #wp-calendar #next, #wp-calendar #prev {background: none;}


/* tab content styles (for tab styles check jquery.tabs.css) */


.tabcontainer { margin-top: 30px;}

.cols01 ul.tabs-nav { margin: 0 0 0 0;}
.cols01 ul.postList { margin: 0 0 0 -8px;}

.postList {
	padding:0;
	margin:0;
	width:280px;
}
.postList li {
	list-style:none;
	margin:0;
	border-bottom:1px solid #424243;
}
.postList a {
	display:block;
	width:260px;
	padding:8px 10px;
	color:#333;
	text-decoration:none;
}
.postList a:hover {
	background-color:#444;
	color: white;
}

.listMeta {font-weight:normal;font-size:10px;padding-top:5px;line-height: 20px;}