/*
Theme Name: paiko.de Theme
Theme URI: http://www.paiko.de
Description: Mein Theme
Version: 1.0
Author: Heiko Brömmelstrote
Author URI: http://www.paiko.de/
Tags: grey, custom header, fixed width, two columns, widgets
*/



@import "fonts.css";
@import "forms.css";

/* <------------ Basic Layout ------------> */

* { 
	padding: 0; margin: 0; 
}

html {
	height: 100%;
}

body {
 	background: #ffffff url(images/bg_big.jpg) top left no-repeat;
}
	/* <------------ Wrapper ------------> */
	
	#wrapper { 
 		margin: 60px 0 0 135px;
 		width: 900px;
	}
		/* <------------ Header Area ------------> */
		
		#header {
			height: 65px;
			width: 810px;
			margin-bottom: 50px;
		}

			#logo {
				height: 65px;
				width: 190px;
				float: left;
				background: url(images/logo.gif) top left no-repeat;
			}
			
			#logo a {
				height: 65px;
				width: 190px;
				display: block;
				text-indent: -900px;
			}

			#menu {
				height: 65px;
				width: 620px;
				float: left;
			}
				#menu ul {
					list-style: none;
				}
				
				#mainmenu li {
					text-align: center;
					float: left;
					height: 65px;
					width: 100px;
				}
				
				#mainmenu li a {
					display: block;
					font-size: 14px;
					font-weight: bold;
					color: #938f90;
					padding: 25px 0 0 0; 
				}
				
				#mainmenu li a:hover {
					color: #2d2b2d;
				}
				
				#mainmenu li a:visited {
					font-style: normal;
				}
				
				#mainmenu li a.home:hover {
					background: url(images/home_hover.gif) no-repeat;
				}		
				
				#mainmenu li a.folio:hover {
					background: url(images/folio_hover.gif) no-repeat;
				}	
				
				#mainmenu li a.about:hover {
					background: url(images/about_hover.gif) no-repeat;
				}	
				
				#mainmenu li a.contact:hover {
					background: url(images/contact_hover.gif) no-repeat;
				}
				
				#mainmenu li a.blog:hover {
					background: url(images/blog_hover.gif) no-repeat;
				}
				
				#mainmenu li a#home_active, #mainmenu li a#folio_active, #mainmenu li a#about_active, #mainmenu li a#contact_active, #mainmenu li a#blog_active {
					color: #2d2b2d;
					height: 65px;
					display: block;
				}
				
				#mainmenu li a#home_active {
					background: url(images/home_active.gif) no-repeat;
				}
				
				#mainmenu li a#folio_active {
					background: url(images/folio_active.gif) no-repeat;
				}
				
				#mainmenu li a#about_active {
					background: url(images/about_active.gif) no-repeat;
				}
				
				#mainmenu li a#contact_active {
					background: url(images/contact_active.gif) no-repeat;
				}
				
				#mainmenu li a#blog_active {
					background: url(images/home_active.gif) no-repeat;
				}
				
							
		/* <------------ Main Message ------------> */
		
		#main_content {
			clear: both;
			width: 810px;
			margin-bottom: 50px;
		}

			#mainmessage {
			margin-bottom: 5px;
			}
			
			
		/* <------------ Content ------------> */
		
		
		.category {

				float: left;
				width: 807px;
				margin-bottom: 15px;
				background: url(images/line.gif) bottom left no-repeat;
			}

		
		#content {
			clear: both;
		}		
			#content-left {
				float: left;
				width: 380px;
				margin-right: 50px;
			}
			
				.post ul {
					margin: 0 0 10px 25px;
				}
			
			#content-right {
				width: 450px;
				float: left;
			}
			
				#content-right ul {
					list-style-type: none;
				}
		
		.post {
			float: left;
			width: 380px;
			margin-bottom: 20px;
		}
		
		
		
			.meta {
				float: left;
				width: 380px;
				padding: 0 0 0 0;
			}
			
				.meta p {
					font-size: 9px;
				}
			
			.post img {
				float: left;
				padding-left: 3px;
				padding-top: 3px;
				padding-right: 3px;
				padding-bottom: 3px;
				margin: 5px 10px 10px 0;;
				background: #fff;
				border: 1px solid #e3e4e4; 
			}
			
		
		/* <------------ Sidebar ------------> */
		
		#sidebar_left {
			display: block;
			float: left;
			width: 178px;
			margin-right: 25px;
		}
		
		#sidebar_right {
			display: block;
			float: left;
			width: 178px;
		}
		
			#sidebar_right p, #sidebar_left p {
				width: 178px;
			}
		
			#sb_tags {
				display: block;
				float: left;
				width: 178px;
				margin: 0 0 25px 0;
			}
			
			#sb_news {
				display: block;
				float: left;
				width: 178px;
				margin: 0 0 25px 0;
			}
			
			#sb_twitter {
				display: block;
				float: left;
				width: 178px;
			}
			
				#sb_twitter li {
					margin: 0 0 10px 0;
				}
				
					#sb_twitter li a {
						text-decoration: underline;
					}
					
						#sb_twitter li a:hover {
							text-decoration: none;
						}
				
			#sb_links {
				clear: both;
				float: left;
				width: 178px;
				margin: 0 0 25px 0;
			}
			
			#sb_pics {
				clear: both;
				float: left;
				width: 178px;
			}		
			
				#sb_pics img {
					border: 1px solid #e3e4e4;
					margin: 0 5px 5px 0;
				}
				
				#sb_pics img:hover {
					border: 1px solid #3f3f3f;
				}
				
				/* <------------ Sociable ------------> */
				
				.sociable { 
					float: left;
					width: 380px;
					margin: 5px 0 15px 0; 
					display: block;
				}
				
					.sociable ul {
						list-style-type: none;
						border: none;
						text-decoration: none;
					}
					
						.sociable ul li {
							float: left;
						}
						
							.sociable img {
								border: none;
							}
						
							.sociable a {
								width: 16px;
								height: 16px;
								display: block;
								text-decoration: none;
								margin: 10px 5px 10px 0;
								padding: 1px;
								border: 1px solid #ccc;
								background: #FFF;
							}
							
								.sociable a:hover {
									border: 1px solid #fff;
								}
				
				/* <------------ Comments ------------> */
		
				ol.commentlist {
					margin: 0;
					padding: 0;
				}
				
				.commentlist li {
					list-style: none;
					margin-bottom: 14px;
				}
				
				.commentlist cite {
					padding: 7px 0;
					display: block;
				}	
				
				.commentlist a:link, .commentlist a:visited {
					font-style: normal;
				}
				
				.commentlist a:hover, .commentlist a:active {
				}
				
				.commentlist cite img {
					padding: 1px;
					border: 1px solid #cdcdcd;
					float: left;
					margin-right: 9px;
				}
				
				.commentlist .author {
					text-decoration: underline;
				}
				
				.commentlist .time {
					padding: 0;
				}
				
				.commenttext {
					padding: 10px 20px 10px 0;
				}


				
		/* <------------ Footer ------------> */
		
		#footer {
			float: left;
			margin-top: 30px;
			height: 25px;
			width: 810px;
			background: url(images/footer_bg.gif) bottom repeat-x;
		}
		
			#copyright {
				clear: both;
				width: 180px;
				margin-right: 150px;
				float: left;
			}
			
			#impressum {
				width: 480px;
				float: left;
				text-align: right;
			}