/*

 Portfolio von David Keller v1.1
-----------------------------------
Autor:       David Keller
Erstellt:    27.03.2010 22:10:27
Last change: 19.08.2011 01:19:09

*/

/* ====== Allgemein =================================================================== */

/* ----- Reset ----- */
* {
	border: none;
	margin: 0;
	padding: 0;
}

/* ----- Hintergrund und Standardfont ----- */
body {
	background: url(img/hintergrund.gif) #3970ac repeat;
	color: #535353;
	font: 22px/28px  Helvetica, Arial, "Nimbus Sans L", "Liberation Sans", FreeSans, sans-serif;
	text-shadow: 0 1px 0 #fff;
}

/* ----- Links ----- */
a {
	color: #6d6e6e;
	text-decoration: none;
	position: relative;
}

a:hover {
	text-decoration: underline;
	top: 1px;
}

a:active {
	top: 0;
}

/* ----- clear ----- */
.clear {
	clear: both;
	height: 0;
}

/* ----- Ausblenden ----- */
.hidden {
	display: none;
}

/* ----- Container -------------------------------------------------------------------- */
#container {
	background-color: #d9d9d9;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#eeeeee), to(#cdcdcd));
	background-image: -moz-linear-gradient(top, #eeeeee, #cdcdcd);
	border: 1px solid #fff;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	-webkit-box-shadow: 0 0 30px #535353;
	-moz-box-shadow: 0 0 30px #535353;
	box-shadow: 0 0 30px #535353;
	position: relative;
	margin: 30px auto 0;
	width: 598px;
}

/* ====== Header ====================================================================== */
header {
	display: block;
	height: 106px;
	position: relative;
}

header h1 a {
	color: #535353;
	display: block;
	font-size: 72px;
	font-weight: bold;
	line-height: 72px;
	margin-left: 24px;
	padding-top: 18px;
	text-shadow: 0 0 10px #888888;
}

header h1 a:hover {
	text-decoration: none;
}

header img {
	border-bottom: 23px solid #fff;
	border-left: 7px solid #fff;
	border-right: 7px solid #fff;
	border-top: 7px solid #fff;
	-webkit-box-shadow: 0 0 10px #888888;
	-moz-box-shadow: 0 0 10px #888888;
	box-shadow: 0 0 10px #888888;
	position: absolute;
	right: 34px;
	top: 22px;
	-webkit-transform: rotate(8deg);
	-moz-transform: rotate(8deg);
	-o-transform: rotate(8deg);
	transform: rotate(8deg);
	z-index: 100;
}

/* ====== Projects (Slider) =========================================================== */
section#projects {
	border-color: #eee;
	border-bottom: 1px solid rgba(255,255,255,0.24);
	float: left;
	left: -1px;
	position: relative;
}

/* ----- Window ----- */
#projects .window {
	border-color: #adadad;
	border-bottom: 1px solid rgba(173,173,173,0.24);
	border-top: 1px solid rgba(173,173,173,0.24);
	height: 250px;
	overflow: hidden;
	position: relative;
	width: 600px;
}

#projects .window .imageRow {
	left: 0;
	position: absolute;
	top: 0;
}

#projects .window .imageRow img {
	float: left;
	width: 600px;
}

/* ----- paging ----- */
#projects .paging {
	bottom: -14px;
	display: none;
	font-size: 10px;
	right: 4px;
	position: absolute;
	text-align: center;
	width: 100;
	z-index: 10;
}

#projects .paging a {
	background-color: #e4e4e4;
	border: 1px solid #999999;
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	border-radius: 8px;
	-webkit-box-shadow: 0 1px 0 #fff;
	-moz-box-shadow: 0 1px 0 #fff;
	box-shadow: 0 1px 0 #fff;
	display: block;
	float: left;
	height: 8px;
	margin: 0 2px;
	overflow: hidden;
	text-decoration: none;
	-webkit-transition: background-color 0.5s ease-out;
	-moz-transition: background-color 0.5s ease-out;
	-o-transition: background-color 0.5s ease-out;
	width: 8px;
}

#projects .paging a.active {
	background-color: #999999;
}

#projects .paging a:hover {
	background-color: #cdcdcd;
	top: 0;
}

/* ====== Content ===================================================================== */
#content {
	clear: both;
	margin: 0px 25px 20px;
	padding-top: 30px;
}

#content h2 {
	font-size: 40px;
	margin-bottom: 20px;
}

/* ----- Ich -------------------------------------------------------------------------- */
section#ich {
	float: left;
	width: 288px;
}

#ich p.fotographieren {
	margin: 8px 0 15px;
}

#ich a.dsblog {
	background: url(img/icons.png) no-repeat left -230px;
	color: #414140;
	display: block;
	float: left;
	height: 31px;
	line-height: 31px;
	margin-top: 4px;
	padding-left: 48px;
	text-align: left;
}

/* ----- Netzwerk --------------------------------------------------------------------- */
section#netzwerk {
	float: right;
	width: 260px;
}

#netzwerk h2 {
	text-align: right;
}

#netzwerk ul {
	float: right;
	list-style: none;
	text-align: right;
}

#netzwerk ul li a {
	background: url(img/icons.png) no-repeat top left;
	display: block;
	height: 31px;
	line-height: 31px;
	margin-bottom: 12px;
	padding-right: 48px;
}

/* --- einzelne Netzwerke --- */
/* - Twitter - */
#netzwerk ul li a.twitter {
	color: #3b90bb;
	background-position: right -886px;
}

/* - Google+ - */
#netzwerk ul li a.googleplus {
	color: #2f2f2f;
	background: url(img/googleplus.png) no-repeat top right;
}

/* - Facebook - */
#netzwerk ul li a.facebook {
	color: #5876af;
	background-position: right -312px;
}

/* - Flickr - */
#netzwerk ul li a.flickr {
	color: #0069db;
	background-position: right -394px;
}

#netzwerk ul li a.flickr .r {
	color: #fe0089;
}

/* - Gowalla - */
#netzwerk ul li a.gowalla {
	color: #ff7d00;
	background-position: right -558px;
}

/* - Delicious - */
#netzwerk ul li a.delicious {
	color: #004b9c;
	background-position: right -148px;
}

/* - LastFM - */
#netzwerk ul li a.lastfm {
	color: #d73827;
	background-position: right -722px;
}

/* - Readernaut - */
#netzwerk ul li a.readernaut {
	color: #66893b;
	background-position: right -804px;
}

/* - AIM - */
#netzwerk ul li a.aim {
	color: #cda41d;
	background-position: right 0;
}

/* - Google Talk - */
#netzwerk ul li a.googletalk {
	color: #305ab3;
	background-position: right -476px;
}

/* ----- Kontakt ---------------------------------------------------------------------- */
section#kontakt {
	display: block;
	margin-top: 40px;
}

#kontaktformular_wrap {
	background: url(img/kontakt.png) no-repeat left top;
	height: 390px;
}

#kontaktformular {
	width: 438px;
	margin-bottom: 24px;
}

#kontaktformular ol {
	list-style: none;
}

#kontaktformular ol li {
	height: 34px;
	line-height: 34px;
	margin-bottom: 16px;
}

#kontaktformular ol li.nachricht {
	height: 116px;
}

#kontaktformular label {
	display: block;
	float: left;
	margin-right: 16px;
	text-align: right;
	width: 124px;
}

#kontaktformular input, #kontaktformular textarea  {
	border: 1px solid #aaaaaa;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	color: #444444;
	font-size: 18px;
	padding: 5px;
	-webkit-transition: 0.5s ease-out;
	-moz-transition: 0.5s ease-out;
	-o-transition: 0.5s ease-out;
	width: 286px;
}

#kontaktformular input {
	height: 23px;
}

#kontaktformular input:hover, #kontaktformular textarea:hover {
	border: 1px solid #888888;
}

/* --- Button --- */

#kontaktformular button {
	background: #eaeaea;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#d8d8d8));
	background-image: -moz-linear-gradient(top, #ffffff, #d8d8d8);
	border: 1px solid #aaaaaa;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	color: #6d6e6e;
	float: right;
	font-size: 18px;
	padding: 3px 5px 2px 7px;
	text-align: center;
	-webkit-transition: border 0.5s ease-out, color 0.5s ease-out;
	-moz-transition: border 0.5s ease-out, color 0.5s ease-out;
	-o-transition: border 0.5s ease-out, color 0.5s ease-out;
	position: relative;
}

#kontaktformular button:hover {
	border: 1px solid #888888;
	color: #535353;
	top: 1px;
}

#kontaktformular button:active {
	background-image: -webkit-gradient(linear, left top, left bottom, from(#d8d8d8), to(#fff));
	background-image: -moz-linear-gradient(top, #d8d8d8, #fff);
}

#kontakt p.alternative {
	margin-left: 140px;
	width: 298px;
}

/* --- Gesendet --- */
#gesendet {
	margin-left: 48px;
	width: 400px;
}

#gesendet p {
	text-align: left;
}

#gesendet p.achtung {
	color: red;
}


/* ====== Footer ====================================================================== */
footer p {
	background: url(img/icons.png) no-repeat 0 -82px;
	color: #b2b3b3;
	font-size: 14px;
	height: 16px;
	line-height: 15px;
	margin: 8px auto 30px;
	padding-left: 22px;
	position: relative;
	text-shadow: 0 -1px 0 #353535;
	width: 556px;
}

footer p a {
	color: #b2b3b3;
	-webkit-transition: color 0.5s ease-out;
	-moz-transition: color 0.5s ease-out;
	-o-transition: color 0.5s ease-out;
}

footer p a:hover {
	color: #8f9090;
	text-decoration: none;
	text-shadow: 0 -1px 0 #222;
	top: 0;
}

/* ====== weiteres ==================================================================== */

/* ----- Fancybox --------------------------------------------------------------------- */

#fancybox-outer {
	border: 1px solid #ffffff;
}
.overlay {
	display: block;
	padding: 8px;
}


/* --- details Projects --- */
article.project {
	width: 800px;
}

.project img {
	border: 1px solid #888;
	max-width: 800px;
}

.project p.title {
	margin: 16px 0 2px;
}

.project p.description {
	margin-bottom: 2px;
}

.project p.description.small {
	font-size: 16px;
	line-height: 18px;
}

/* --- Icons und Inspiration --- */
.iconsInspiration {
	padding: 4px 8px 6px;
	width: 470px;
}

.iconsInspiration h3 {
	margin-bottom: 2px;
}

.iconsInspiration p.icons {
	margin-bottom: 8px;
}

ul.inspirationSites {
	padding-left: 20px;
	list-style-type: circle;
	list-style-position: outside;
	opacity: 1;
}

/* --- Impressum --- */
.impressum {
	padding: 4px 8px 6px;
	width: 330px;
}

.impressum h3 {
	margin-bottom: 2px;
}

.impressum p.info {
	margin-bottom: 8px;
}

.impressum #hcard-David-Keller {
	font-size: 16px;
	line-height: 20px;
}