/*
Projekt:
Design: Sebastian Laube
Code: Sebastian Laube

Farben:
-------------------------------------------------------------- */

@import url("reset.css");
@import url("typography.css");
@import url("grid.css");

/* general
-------------------------------------------------------------- */
@font-face{font-family:'FO';src: url('fonts/fo.eot');}
@font-face{font-family: 'Titi'; src: url('../fonts/Titillium.eot');}
@font-face{font-family: 'Titi Bold'; src: url('../fonts/Titillium600.eot');}

@font-face{font-family: 'Titi'; src: url('../fonts/Titillium.otf') format('opentype');}
@font-face{font-family: 'Titi Bold'; src: url('../fonts/Titillium600.otf') format('opentype');}
@font-face{font-family: 'FO'; src: url('../fonts/fOrganik.ttf') format('truetype');}

::selection {
	background: #fff300; /* Safari, Opera, Chrome */
	color: #333;
}
::-moz-selection {
	background: #fff300; /* Firefox */
	color: #333;
}


body {background: #e5e4db url('../gfx/bg.png') repeat-x top left fixed;}

a:focus,
a:hover     { color: #f60; }
a           { color: #666; text-decoration: underline; }

.errorBox {
	padding: .5em 3em .5em 4em;
	background: #aae8ff url('../gfx/achtung.gif') no-repeat 1em center;
	border-bottom: 1px solid #82c6e0;
}
.errorBox a { color: #333;}

/* head
-------------------------------------------------------------- */
.accesslinks {width: 1px; margin: 0 !important;}
.accesslinks a,
.accesslinks a:hover,
.accesslinks a:visited {
	position: absolute;
	overflow: hidden;
	top: -1000px;
	left: -1000px;
}
.accesslinks a:focus,
.accesslinks .skiplink a:active {
	position: absolute;
	top: 0;
	left: 0;
}

h1 {
	margin: .5em 0;
	padding: .34em 0 0 180px;
	font: 6em/1em FO, 'Titi Bold', 'Lucida Sans Unicode', 'Bitstream Vera Sans', 'Nimbus Sans L', Arial, helvetica, sans-serif;
	min-height: 100px;
	background: url('../gfx/logo.gif') no-repeat 30px center;
	text-shadow: 0px 2px 3px rgba(220,200,220,.9); color: #222;
	color: #222;
	text-shadow: 0px 2px 3px #efefef;
	text-shadow: 1px 1px 0 #F7F7F7;
}
h1 a, h1 a:hover {color: #333; text-decoration:none; outline: 0;}

.quote {
	display: block;
	max-width: 14em;
	margin: 5em 0 0 830px;
	background: #666; /* fallback */
	background: rgba(0,0,0,.5);
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
}
.quote blockquote {
	margin: 1em;
	font: normal .9em/1.3em Georgia, "Times New Roman", Times, serif;
	color: #fff;
}
.quote p {margin: 0}
.quote a {color:#f60; text-shadow: 0 0 3px #000;}
.quote a:hover {color:#fff; text-shadow: 0 0 3px #fff;}

h1, .quote, .left{position: fixed; z-index: 0;}
.right {position: relative; float: right;}
.left, .right {margin-top: 15em;}

/* left
-------------------------------------------------------------- */
.left {text-shadow: 1px 1px 0 #F7F7F7;}
.left h2 {font: 2em/1.3em 'Titi Bold', 'Lucida Sans Unicode', 'Bitstream Vera Sans', 'Nimbus Sans L', Arial, helvetica, sans-serif; margin: 0 .5em .4em}
.left ul {
	margin: 0 1em 1.3em;
	list-style: none;
}

.control {
	padding: 1.1em 0;
	border-bottom: 1px solid #ccc;
	box-shadow: 0 0, 0 0, 0 0, 0 1px 0 #f7f7f7, 0 0;
	-moz-box-shadow: 0 0, 0 0, 0 0, 0 1px 0 #f7f7f7, 0 0;
	-webkit-box-shadow: 0 0, 0 0, 0 0, 0 1px 0 #f7f7f7, 0 0;
}
.control li {margin: 0 .3em;}
.control h3 {display: none;}

.control input, .control select, #search input {
	padding: .2em;
	font-size: 1em;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border: 1px solid #999;
	box-shadow: 0 0, 0 -1px 0 #ccc, 0 0, 0 1px 0 #f7f7f7, 0 0;
	-moz-box-shadow: 0 0, 0 -1px 0 #ccc, 0 0, 0 1px 0 #f7f7f7, 0 0;
	-webkit-box-shadow: 0 0, 0 -1px 0 #ccc, 0 0, 0 1px 0 #f7f7f7, 0 0;
}
.control input { width: 200px;}
.control select { width: 207px;}

.social li {display: inline; margin: 0 0 0 .3em ;}
.social img {display: inline-block;}

p.more {
	margin: 0 1em;
	padding: 0 0 1.2em;
	border-bottom: 1px solid #ccc;
	box-shadow: 0 0, 0 0, 0 0, 0 1px 0 #f7f7f7, 0 0;
	-moz-box-shadow: 0 0, 0 0, 0 0, 0 1px 0 #f7f7f7, 0 0;
	-webkit-box-shadow: 0 0, 0 0, 0 0, 0 1px 0 #f7f7f7, 0 0;
}
.awesome, .awesome:visited,
.awesme a, .awesme a:visited
{
	position: relative;
	display: inline-block;
	padding: 8px 14px 9px;
	font-size: 1.2em;
	font-weight: 400;
	line-height: 1;
	text-shadow: 0 -1px 1px #be4c00; /*fallback*/
	text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
	color: #fff; 
	text-decoration: none;
	border-bottom: 1px solid rgba(0,0,0,0.25);
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	box-shadow: 0 1px 3px rgba(0,0,0,0.5);
	-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
	-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
	background: #f60 url('../gfx/overlay.png') repeat-x;
	cursor: pointer;
	outline: 0;
}

	.awesome:hover, .awesme a:hover			{ background-color: #333; color: #fff; }
	.awesome:active, .awesme a:active		{ top: 1px; box-shadow: 0 1px 2px rgba(0,0,0,0.5); -moz-box-shadow: 0 1px 2px rgba(0,0,0,0.5);-webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.5);}

button {border: 0}
button.awesome {margin: 0 0 0 .3em;padding: 0 .2em; top: -1px;}
button.awesome:active {top: 0px;}

/* content
-------------------------------------------------------------- */
.right {
	background: #fff;
	border:1px solid #ccc;
	box-shadow: 0px 2px 5px rgba(200,200,200,.8);
	-moz-box-shadow: 0px 2px 5px rgba(110,110,110,.5);
	-webkit-box-shadow: 0px 2px 5px rgba(200,200,200,.8);
}
.wrap {margin: 30px 60px 0;}

.pages {margin: 0 0 1em;}
.alignleft { float: left;}
.alignright { float: right;}

.wp-caption {
	margin: 0 0 1.5em 0;
	padding: .4em 0 0 0;
	text-align: center;
	background: #fff;
	border: 1px solid #efefef;
	border-bottom: 2px solid #f60;
}
.wp-caption p { margin: .5em 0 .5em 0;}

/* blog post
-------------------------------------------------------------- */
.post {margin: 0 0 3em 0;}
.post h2, h2.pagetitle {
	font: 2em/1em 'Titi Bold', 'Lucida Sans Unicode', 'Bitstream Vera Sans', 'Nimbus Sans L', Arial, helvetica, sans-serif;
	margin: 0 0 .2em; border-bottom: 1px dotted #ccc;
}
h2.pagetitle {margin: 0 0 1em; font-size: 2.2em}
.post h2 a {color: #333; text-decoration: none;}
.post h2 a:hover, .post h2 a:active {color: #f60;}
.post .date {
	display: inline-block;
	position: relative;
	top: -2em;
	left: -5em;
	float: left;
	margin: 0 0 -6em 0;
	padding: .4em .6em;
	font: 1.3em/1.1em Georgia, "Times New Roman", Times, serif;
	text-shadow: -1px -1px 0 #000;
	color: #fff;
	background: #333;
	box-shadow: 0 1px 3px rgba(0,0,0,.6);
	-moz-box-shadow: 0 1px 3px rgba(0,0,0,.6);
	-webkit-box-shadow: 0 1px 3px rgba(0,0,0,.6);
	border-top: 1px solid #777;
	border-left: 1px solid #777;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	text-align: center;
}
.num {display: block; margin: -.2em 0 .2em; font-size: 2em; line-height:1em; font-style: italic;}
.mon {display: block; font-size: .9em; letter-spacing: .1em; line-height: .9em;}
.meta { font: .8em/1.5em Georgia, "Times New Roman", Times, serif; color: #888; margin: 0 0 1em;}

hr {display: none;}

/* comments
-------------------------------------------------------------- */
#comments, #respond {
	font: 2em/1em 'Titi Bold', 'Lucida Sans Unicode', 'Bitstream Vera Sans', 'Nimbus Sans L', Arial, helvetica, sans-serif;
	margin: 0 0 .8em;
}
ol.commentlist { margin: 3em 0; list-style: none;}
.commentlist li {
	padding: 0 5px;
	list-style: none;
}
li.comments-alt {clear: left;}

.commentlist blockquote { margin: 0; padding: 0 10px 1px; font-style: normal; background: url('../gfx/speech.png') no-repeat center bottom;}
.commentlist .author {float: right; padding: .6em 1em 0 0; font: .9em/1.3em Georgia, "Times New Roman", Times, serif; color: #444; text-align: right;}
.commentlist .time {color: #777;}
.commentlist .edit {float: left;}
.commentlist cite {font-size: 1.1em; font-style: normal;}

#commentform { margin: 1.5em 0 0;}
#commentform input[type=text] { width: 48%; margin: 0 2% 0 0;}
#commentform label { width: 49%; font-family: Georgia, "Times New Roman", Times, serif; color: #333;}
#commentform label span {color: #f60;}
#commentform textarea { width: 100%; height: 15em;}
#commentform input[type=text], #commentform textarea { padding: .4em; font-family: 'Lucida Sans Unicode', 'Bitstream Vera Sans', 'Nimbus Sans L', Arial, helvetica, sans-serif; border: 1px solid #ccc;}
#commentform input[type=submit] { padding: .4em .5em; color: #333; border: 1px solid #ccc; background: #eee;}

#commentform button.awesome {margin: 0; padding: 8px 14px 9px; top: -1px;}

/* stuff
-------------------------------------------------------------- */
#search {margin: 0 0 3em;}
#search input{ width: 20em;}

/* foot
-------------------------------------------------------------- */
.foot { margin: 1em 0 0; padding: .4em 0 0; font-size: .9em; color: #666;}
.foot .thanks {
	margin: 0 10px 0 0;
	padding: .8em .2em 3em .2em;
	font: .9em/1em Georgia, Times, serif;
	text-align: center;
	text-shadow: -1px -1px 0 #d95700;
	color: #fff;
	background: #f60; /*url('../gfx/bottom.png') repeat-x bottom;*/
	border-top: 1px solid #f80;
	border-bottom: 1px solid #d95700;
	-moz-border-radius-topleft: 5px;
	-moz-border-radius-topright: 5px;
	-webkit-border-top-right-radius: 5px;
	-webkit-border-top-left-radius: 5px;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
	box-shadow:  0px 1px 2px #888;
	-moz-box-shadow: 0px 1px 2px #888;
	-webkit-box-shadow: 0px 1px 2px #888;
}
.copy { padding: 1em 0 0;font-size: .9em}

.up {margin: 0; text-align: right;}
.up a {
	float: right;
	min-height: 26px;
	min-width: 26px;
	padding: 1.8em 3.3em 0em 1em;
	font: .9em/1em Georgia, Times, serif;
	color: #fff;
	background: url(../gfx/up_alt.png) right center no-repeat;
}
.up a span {display: none;}
.up a:hover {
	position: relative;
	z-index: 3;
	width: 6em;
	text-shadow: -1px -1px 0 #444;
	text-decoration: none;
	color: #fff;
	background-color: #555;
	background-color: rgba(0,0,0,.7);
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
}
.up a:hover span { display: inline;}

/* f404
-------------------------------------------------------------- */