/*
	Styles for rueprich.de from Holger Rueprich.
	Based on 960 Grid System - http://960.gs/
	Learn more ~ http://www.spry-soft.com/grids/
*/

/* Global
----------------------------------------------------------------------------------------------------*/

* {
	margin: 0;
	padding: 0;
}

body {
	font: 80%/170% 'Helvetica Neue', Arial, 'Liberation Sans', FreeSans, sans-serif;
}

p, dl, h2, h3, ol, ul {
	margin-bottom: 1.5em;
}

a {
	text-decoration: none;
	color: #0C5A66;
}

a.pdf,
a.jar,
a.jpg {
	display: block;
	min-height: 32px;
	padding-left: 42px;
}

a.pdf { background: url('../images/pdf.jpg') center left no-repeat; }
a.jar { background: url('../images/jar.jpg') center left no-repeat; }
a.jpg { background: url('../images/jpg.jpg') center left no-repeat; }

a.pdf span,
a.jar span,
a.jpg span {
	color: #999;
	display: block;
}

a.image-link {
	float: left;
	margin-right: 1.5em;
}

#content img.blog-image {
	float: left;
	margin-right: 1.5em;
	border: 0;
}

p.meta { margin-top: -.5em; }

#content ol,
#content ul {
	margin-left: 1em;
	margin-bottom: 3em;
}

#content .content ol,
#content .content ul {
	margin-left: 0;
	margin-bottom: 1.5em;
}

#content li {
	margin: 0 15px;
}

h1, .accessibility {
	display: none;
}

h2, h3 {
	font: 100% Georgia, serif;
	font-weight: normal;
	font-style: italic;
	border-bottom: 1px dotted #666;
	margin-bottom: 1em;
	color: #666;
}

h1.descent,
#footer h2,
.blog .entries h2,
.home #content h3 {
	display: block;
	font-size: 165%;
	font-family: inherit;
	line-height: inherit;
	font-style: normal;
	border: none;
	color: #000;
	margin-bottom: 0.4em;
}

.vcard .country-name,
.vcard .type { display: none; }


/* Layout-Containers
----------------------------------------------------------------------------------------------------*/

#header,
#content,
#footer {
	margin: 0 auto;
	width: 960px;
}


/* Header
----------------------------------------------------------------------------------------------------*/

#header-wrap {
	background: #0C5A66;
	height: 50px;
	color: #fff;
	line-height: 50px;
	margin-bottom: 3em;
}

#header {
	background: url('../images/header-bg.jpg') no-repeat;
	height: 50px;
}

#navigation, #logo {
	display:inline;
	float: left;
	position: relative;
	margin-left: 15px;
	margin-right: 15px;
	width:450px;
}

#logo a {
	display: block;
	background: url('../images/logo-multi.jpg') no-repeat left top;
	text-indent: -999px;
	font-size: 1px;
	overflow: hidden;
}

#logo a:hover { background: url('../images/logo-multi.jpg') no-repeat left bottom; }

#logo .tagline { display: none; }

#navigation {
	background: url('../images/navigation.jpg') no-repeat;
	list-style-type: none;
}

#navigation a { 
	display: block;
	color: #fff; 
	text-indent: -999px;
	font-size: 1px;
	overflow: hidden;
}

#navigation li {
	float: left;
}

#blog { width: 62px;}
#portfolio { width: 88px; }
#ueber-mich { width: 99px; }
#kontakt { width: 78px; }


/* Footer
----------------------------------------------------------------------------------------------------*/

#footer-wrap {
	background: url(../images/bottomcontentbar.jpg) #191919 top left repeat-x;
	padding: 9px 0 0;
	margin-top: 2em;
}

#footer {
	background: url(../images/footer_wrap.jpg) #191919 top left no-repeat;
	color: #A4A4A4;
	padding-top: 3em;
}

#footer-wrap a { color: #fff; }

#footer-wrap h2 {
	color: #fff;
	margin-bottom: .8em;
	font-weight: normal;
}

#footer-navigation,
#footer-navigation .copy,
#footer-navigation .navigation {
	display: inline;
	float: left;
	position: relative;
	margin: 0 15px;
}

#footer-navigation .copy { 	width:610px; }
#footer-navigation .navigation { width:290px; }

#footer-navigation {
	background: url(../images/footer_bar.jpg) #191919 no-repeat;
	height: 75px;
	padding: 15px 0;
	margin: 0;
	width: 960px;
}


/* Elsewhere
----------------------------------------------------------------------------------------------------*/

#flickr img { 
	margin: 0 13px 8px 0; 
	padding: 5px;
	background: #fff;
	border: none;
}

#flickr a.last img {
	margin-right: 0;
}

#twitter, #flickr, #mister-wong {
	display: inline;
	float: left;
	position: relative;
	margin: 0 15px 1em;
	width: 290px;
}

#twitter li, #mister-wong li {
	background: url(../images/footer_list_items.jpg) bottom center no-repeat;
}

#twitter li, #mister-wong li {
	list-style-type: none;
	padding: 15px 0;
}

#twitter li.first, #mister-wong li.first {
	padding-top: 0;
}

#twitter li.last, #mister-wong li.last {
	background: none;
	padding-bottom: 0;
}


/* Start
----------------------------------------------------------------------------------------------------*/

#blog-preview, #intro {
	display: inline;
	float: left;
	position: relative;
	margin: 0 15px;
	width: 450px;
}

.intro-first {
	font: 400%/100% sans-serif;
	font-weight: bold;
	display: block;
	margin-bottom: 0.35em;
}

.intro-sub { 
	font: 220%/130% sans-serif;
	font-weight: normal; 
	display: block;
	color: #666;
}

.intro-sub strong {
	font-weight: normal;
	color: #000;
}

#blog-preview ul { margin-left: 0; }

#blog-preview li {
	border-bottom: 1px dotted #666;
	list-style-type: none;
	padding: 5px 0;
	margin: 0;
}

#blog-preview li.last { border: 0; }


/* Portfolio
----------------------------------------------------------------------------------------------------*/

.portfolio #content h2,
.portfolio #content ol {
	display: inline;
	float: left;
	position: relative;
	margin: 0 15px;
	width: 930px;
}

.portfolio #content ol {
	margin-top: 10px;
}

.portfolio #content li {
	background: url('../images/portfolio-img-bg.jpg') no-repeat;
	width: 210px;
	list-style-type: none;
	margin: 0 30px 0 0;
	float: left;
	text-align: center;
}

.portfolio #content li.first { clear: both; }
.portfolio #content li.last { margin: 0; }

.portfolio #content span.techniques {
	display: block;
	margin: 15px 0 30px;
	font-size: 90%;
}

.portfolio #content img { 
	border: none; 
	padding: 0;
}

.portfolio #content a {
	width: 204px;
	height: 91px;
	display: block;
	margin: 0 auto;
	overflow: hidden;
}

.portfolio #content a { text-indent: -9999px; }

.portfolio #united-internet { background: url('../images/portfolio-allgemein.jpg') 0px 0px no-repeat; }
.portfolio #united-internet:hover { background: url('../images/portfolio-allgemein.jpg') -204px 0px no-repeat; }

.portfolio #dhbw-mosbach { background: url('../images/portfolio-allgemein.jpg') 0px -273px no-repeat; }
.portfolio #dhbw-mosbach:hover { background: url('../images/portfolio-allgemein.jpg') -204px -273px no-repeat; }

.portfolio #fitness-beruf { background: url('../images/portfolio-allgemein.jpg') -408px -181px no-repeat; }
.portfolio #fitness-beruf:hover { background: url('../images/portfolio-allgemein.jpg') -612px -181px no-repeat; }

.portfolio #linkwerk { background: url('../images/portfolio-allgemein.jpg') -408px 0px no-repeat; }
.portfolio #linkwerk:hover { background: url('../images/portfolio-allgemein.jpg') -612px 0px no-repeat; }

.portfolio #ba-mosbach { background: url('../images/portfolio-allgemein.jpg') 0px -364px no-repeat; }
.portfolio #ba-mosbach:hover { background: url('../images/portfolio-allgemein.jpg') -204px -364px no-repeat; }

.portfolio #safs-beta { background: url('../images/portfolio-allgemein.jpg') 0 -91px no-repeat; }
.portfolio #safs-beta:hover { background: url('../images/portfolio-allgemein.jpg') -204px -91px no-repeat; }

.portfolio #bodylife { background: url('../images/portfolio-allgemein.jpg') -408px -273px no-repeat; }
.portfolio #bodylife:hover { background: url('../images/portfolio-allgemein.jpg') -612px -273px no-repeat; }

.portfolio #horn-verlag { background: url('../images/portfolio-allgemein.jpg') 0 -182px no-repeat; }
.portfolio #horn-verlag:hover { background: url('../images/portfolio-allgemein.jpg') -204px -182px no-repeat; }

.portfolio #kiana-yoga { background: url('../images/portfolio-allgemein.jpg') -408px -91px no-repeat; }
.portfolio #kiana-yoga:hover { background: url('../images/portfolio-allgemein.jpg') -612px -91px no-repeat; }


.portfolio #mosbach-und-fitness { background: url('../images/portfolio-multimedia.jpg') no-repeat; }
.portfolio #mosbach-und-fitness:hover { background: url('../images/portfolio-multimedia.jpg') -204px 0 no-repeat; }

.portfolio #eckie-schneckie { background: url('../images/portfolio-multimedia.jpg') -408px 0 no-repeat; }
.portfolio #eckie-schneckie:hover { background: url('../images/portfolio-multimedia.jpg') -612px 0 no-repeat; }

.portfolio #cruisen-mosbach { background: url('../images/portfolio-multimedia.jpg') 0 -91px no-repeat; }
.portfolio #cruisen-mosbach:hover { background: url('../images/portfolio-multimedia.jpg') -204px -91px no-repeat; }

.portfolio #timmy-vs-trite { background: url('../images/portfolio-multimedia.jpg') -408px -91px no-repeat; }
.portfolio #timmy-vs-trite:hover { background: url('../images/portfolio-multimedia.jpg') -612px -91px no-repeat; }


.portfolio-entry .details,
.portfolio-entry .project,
.portfolio-entry .sidebar {
	display: inline;
	float: left;
	position: relative;
	margin-left: 15px;
	margin-right: 15px;
}

.portfolio-entry .details,
.portfolio-entry .sidebar {
	width: 210px;
	float: right;    
}

.portfolio-entry .project {
	float: right;
	width: 450px;
}

dd {
	margin-left:2em;
	font-style:italic;
}

dt {
	color:#000;
	border-top:1px solid #DDD;
	margin:.5em 0 0;
	padding:.5em 0 0;
}

dt.first {
	border:0;
	padding:0;
}

#content .project ul {
	margin-bottom: 1.5em;
}



/* Innerfade
----------------------------------------------------------------------------------------------------*/

#content img {
	padding:1px;
	border:2px solid #DDD;
	background: #FFF;
}

#content #innerfade {
	list-style-type:none;
	text-align:right;
	padding: 0;
	margin: 1em 0;
}

#innerfade li {
	width: 100%;
	margin: 0;
}

#innerfade img { width: 444px; }


/* About
----------------------------------------------------------------------------------------------------*/

.about-img {
	width:210px;
	padding-top: 3em;
}

#content .about-img img {
	border: 0;
	padding: 0;
}

.about-txt {
	width:290px;
}

.vita {
	float: left;
}

.vita h2 {
	left: 160px;
	width: 210px;
}

.about-img, .about-txt,
.vita h2, .vita dt, .vita dd {
	display:inline;
	float: left;
	position: relative;
	margin-left: 15px;
	margin-right: 15px;
}

.vita dt {
	clear: both;
	width: 130px;
	text-align: right;
	color: #999;
	border-top: 0;
	padding: 0;
	margin-top: 0;
}

.vita dt strong {
	font-weight: normal;
	color: #000;
}

.vita dd {
	width: 210px;
	margin-bottom: 3em;
	font-style: normal;
}


/* Blog
----------------------------------------------------------------------------------------------------*/

.blog .entry .meta,
.blog .entry .meta img,
.blog .entry .meta p,
.blog .entry .content,
.blog .sidebar,
.blog-detail .entries h3 {
	display: inline;
	float: left;
	position: relative;
	margin-left: 15px;
	margin-right: 15px;
}

.entries {
	float: left;
	width: 720px;
}

.entry { 
	float: left;
	clear: both;
	margin-bottom: 3em;
}

.blog .entry .content {
	float: right;
	width: 450px;
}

.blog .sidebar {
	width: 210px;
}

.blog .entry .meta {
	text-align: right;
	float: left;
	width: 210px;
}

.blog .entry .meta .tags a { color: #999; }

.blog .entry .meta strong {
	color: #000;
	font-weight: normal;
}

.blog #content .entry .meta img {
	width: 46px;
	margin-left: 0;
	margin-top:6px;
	padding:1px;
	border:1px solid #999;
}

.blog .entry .meta p {
	width: 130px;
	margin-right: 0;
	text-align: left;
}

.blog .entry .meta p strong { font-weight: bold; }

.blog .entries form { width:450px; }

.blog-detail .entries h3 { 
	left: 240px;
	width: 450px;
}

.blog .entries .entry .content h3 {
	left: 0;
	margin-left: 0;
	margin-right: 0;
}

.blog-detail .entries fieldset { 
	left: 240px;
	margin-left: 15px;
}

/*
code {
	background: #E0EDEF;
	display: block;
	padding: 15px;
	border: 1px solid #0C5A66;
}
*/
	code {
		font-family: 'Consolas','Bitstream Vera Sans Mono','Courier New',Courier,monospace; 
		padding: 0 0.25em;
	}

.syntaxhighlighter code { display: inline; }

#content .syntaxhighlighter { margin-bottom: 2em !important; }

.blog-navigation {
	clear: both;
	margin: 0 15px;
}

.blog-navigation .newer { float: right; }
.blog-navigation .older { float: left; }


/* Contact
----------------------------------------------------------------------------------------------------*/

.contact .address,
.contact .contact-form,
.contact .sidebar {
	display:inline;
	float: left;
	position: relative;
	margin: 0 15px;
}

.contact .address, .contact .sidebar { width:210px; }
.contact .contact-form { width:450px; }


/* Forms
----------------------------------------------------------------------------------------------------*/

fieldset, fieldset p, label {
	display: inline;
	float: left;
	position: relative;
	margin-left: 15px;
	margin-right: 15px;
}

fieldset {
	width: 450px;
	margin: 0;
	border: 0;
}

fieldset.meta { display: none; }

fieldset p {
	width: 370px;
	margin-right: 0;
}

fieldset p.button {
	left: 65px;
}

fieldset p.button input {
	width: auto;
	padding: 0 15px;
}

label {
	width: 50px;
	margin-left: 0;
}

input, textarea { 
	display: block;
	width: 368px;
	border: 1px solid #999;
	font: inherit;
}

form input { display: none; }
form fieldset input { display: block; }

textarea {
	height: 100px;
}

.wpcf7-mail-sent-ok,
.wpcf7-validation-errors {
	border: 1px dotted #f00;
	clear: both;
	padding: 10px;
	background: #fee;
	width: 350px;
	margin-right: 0;
	float: right;
}

.wpcf7-mail-sent-ok {
	border: 1px dotted #0C5A66;
	background: #E0EDEF;
}

.wpcf7-not-valid-tip,
.wpcf7-not-valid-tip-no-ajax {
	color: #f00;
}


/* Clear Floated Elements
----------------------------------------------------------------------------------------------------*/

#header:after,
#content:after,
#footer:after,
.entries:after {
	clear: both;
	content: ' ';
	display: block;
	font-size: 0;
	line-height: 0;
	visibility: hidden;
	width: 0;
	height: 0;
}

* html #header,
* html #content,
* html #footer,
* html .entries {
	height: 1%;
}