/*
/////////////////////////////////

Name des Dokumentes: "screen.css"

Erstellt fuer: "nicogutmann.de | Online-Portfolio"
Erstellungsdatum: "26.10.2010"

/////////////////////////////////


/* Setzt alle vordefinierten Einstellungen des Browsers auf 0
-------------------------*/
html,body,div,ul,p,ol,li,h1,h2,h3,h4,dl,dt,dd,i,input,textarea,address,img {
	margin:				0;
	padding:			0;
	border:				0;
	list-style:			none;
	font-style:			normal
}

section, footer, article, header, hgroup { display: block }

/* /////////////////////////////// Allgemeine Informationen /////////////////////////////// */

body { background: black }

#seite {
	width: 60%;
	min-width: 900px;
	max-width: 1512px;
	padding: 2em 0;
	margin: 0 auto;
	font: .765em/150% Arial,sans-serif;
	color: #f3f3f3
}

.reader-only { display: none }

	#supersized-loader { position:absolute; top:50%; left:50%; z-index:10; width:60px; height:60px; margin:-30px 0 0 -30px; text-indent:-999em; background-color:#111; background:rgba(0,0,0,0.8) url(imgs/loading.gif) no-repeat center center; -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px;}
	
	#supersized { position:fixed; left:0; top:0; overflow:hidden; z-index:-999; height:100%; width:100%; }
		#supersized img{ height:auto; width:auto; position:relative; outline:none; border:none; -ms-interpolation-mode:bicubic; image-rendering: optimizeQuality; }


/* /////////////////////////////// Inhalt /////////////////////////////// */

		section a {
			color: #f29400;
			text-decoration: underline
		}
		section a:hover {
			background: #f29400;
			color: white;
			text-decoration: none
		}

	/*-------------------------------------------------------------------
		Überschriften
	------------------------*/
	
	h1 {
		position: relative;
		color: white;
		text-shadow: 1px 1px 1px #ccc;
		text-transform: uppercase;
		text-align: center;
		margin: 30px 0 30px;
		font: 800%/1 'Kreon',Georgia,Arial,serif
	}
	
		h1 img { position: absolute; bottom: -30px; left: 50%; margin-left: -112px }
	
	#biografie h2,
	#kontakt h2,
	#arbeiten h2 {
		margin: 2em 0 0 0;
		font-size: 200%;
		line-height: 1.5;
		text-align: center;
		letter-spacing: 1px;
		color: #aaa
	}
	
		h2 span	{ 
			background: #f5f5f5; 
			padding: 10px 10px 5px; 
			font-family: 'Kreon',Georgia,Arial,serif; 
			box-shadow: 2px 2px 10px #bbb;
			-moz-box-shadow: 2px 2px 10px #bbb; 
			-webkit-box-shadow: 2px 2px 10px #bbb;  
			text-shadow: 1px 1px 1px white;
		}
	
	h3 { margin: -5px 0 1em; text-align: center }
		
	
/* /////////////////////////////// Biografie /////////////////////////////// */

#biografie {
	padding: 2em .5% 0;
}
	
	#biografie article {
			width: 38%;
			position: relative;
			float: left;
			padding: 1em 2% 1em 10%;
			background: rgba(0,0,0,.8)
	}
	
	#biografie article + article { float: right; width: 37% }
	
		#biografie h4 { position: absolute; top: .8em; left: 1em; z-index: 6; font-size: 110% }
	
	
/* /////////////////////////////// Meine Arbeiten /////////////////////////////// */

	#arbeiten article {
		clear: both;
		margin-bottom: 40px 
	}

				
	/*-------------------------------------------------------------------
		Arbeiten
	------------------------*/
	#arbeiten { clear: both; padding-top: 2em }
	
		#arbeiten article li {
			float: left;
			width: 22%;
			margin: 0 .5% 2em;
			padding: .5em 1%;
			background: rgba(0,0,0,.8);
			list-style: none
		}
		
		#arbeiten article h4 {
			padding: .5em 0; 
			background: #111
		}
		
			#arbeiten article li img { display: block; margin: 0 auto }
		
			#arbeiten article li h4 a {
				border: none; text-decoration: none; background: none; color: transparent }
		
		#arbeiten article dl {
			padding: .5em 1em;
			background: black url(imgs/bg-arbeiten.png) repeat-x;
			height: 10em;
			border: 1px solid black
		}
		
			dt { 
				font-weight: normal; 
				border-bottom: 1px solid black; 
				font: 120%/1.5 'Kreon',Georgia,Arial,serif;
			} 
			 
			dd { border-top: 1px solid #444; 
				padding: .5em 0 .5em 10px;
				font-size: 90%;
				background: url(imgs/icon_liste.png) left 10px no-repeat
			}
	
				#foto-uebersicht img { display: block; width: 96%; margin: 0 auto }
		
		#colorbox, #cboxWrapper { position: absolute; top: 0; left: 0; z-index: 9999; overflow: hidden }
		#cboxContent { position: relative; overflow: hidden }
		
		#cboxLoadingGraphic { position: absolute; top: 0; left: 0; width: 100% }
		
		#cboxPrevious, 
		#cboxNext, 
		#cboxClose { position: absolute; bottom: 3px; cursor: pointer; width: 25px; height: 25px; text-indent: -9999px }
		
		    #cboxContent { background: rgba(0,0,0,.9); padding: 1em }
		    	#cboxContent img { border: 1px solid #666 }
		        #cboxLoadedContent { margin-bottom: 17px }
		        #cboxCurrent { position:absolute; bottom:7px; left:80px; color: #f3f3f3; font: 70%/1.4 Arial,sans-serif }
		        
		        #cboxPrevious { left:20px; background:url(imgs/controls.png) -50px 0px no-repeat }
		        #cboxPrevious.hover { background-position:-50px -25px }
		        
		        #cboxNext { left: 47px; background:url(imgs/controls.png) -26px 0px no-repeat }
		        #cboxNext.hover {background-position:-26px -25px;}
		        
		        #cboxLoadingGraphic { background: white url(imgs/loading.gif) center center no-repeat }
		        
		        #cboxClose { right:20px; background:url(imgs/controls.png) -1px 0px no-repeat }
		        #cboxClose.hover { background-position:-1px -25px }


#weitere-jobs {
	position: relative;
	overflow: hidden;
	padding: 1em 1.5em 1em 150px;
	margin: -2em .5% 0;
	background: rgba(0,0,0,.8)
}

	#arbeiten #weitere-jobs h3 { position: absolute; top: 1.3em; left: 1em; z-index: 6 }
	#arbeiten #weitere-jobs li { font-size: 90%; float: left; width: 18%; padding: .3em 2%; margin: .3em 1% .3em 0 }


		
/* /////////////////////////////// Mein Kontakt /////////////////////////////// */

#kontakt { clear: both; padding-top: 1px }

address {
		position: relative;
		color: white;
		text-shadow: 1px 1px 1px #ccc;
		text-transform: uppercase;
		text-align: center;
		padding: 20px 0 30px;
		font: 400%/1 'Kreon',Georgia,Arial,serif
}

	address span:after { display: inline }
	
	address span:last-child:after { content: "" }
	address a { color: #eee }
	

/* /////////////////////////////// Netzwerk-Navi /////////////////////////////// */
	
	#netzwerk { 
		position: fixed; 
		left: 0; 
		top: 40px; 
		background: rgb(0,0,0); 
		padding: 0 1em;
		border-radius: 0 7px 7px 0;
		-moz-border-radius: 0 7px 7px 0;
		-webkit-border-radius: 0 7px 7px 0
	}
	
		#netzwerk li {
			list-style: none;
			padding: .3em;
			float: right
		}
		
			#netzwerk a {
				display: block;
				width: 25px;
				height: 34px;
				text-indent: -3000px
			}
		
			#fbook a {background: url(imgs/icon_fbook.png) 0 0 no-repeat}
			#fbook a:hover {background: url(imgs/icon_fbook.png) -28px 0 no-repeat }
			
			#lastfm a {background: url(imgs/icon_lastfm.png) 0 0 no-repeat}
			#lastfm a:hover {background: url(imgs/icon_lastfm.png) -26px 0 no-repeat}
			
			#xing a {background: url(imgs/icon_xing.png) 0 0 no-repeat}
			#xing a:hover {background: url(imgs/icon_xing.png) -28px 0 no-repeat}
			

/* /////////////////////////////////////////////////////////////////////////////////////////////
	MEDIA QUERIES 
///////////////////////////////////////////////////////////////////////////////////////////// */

/* /////////////////////////////// iPhone 3G /////////////////////////////// */

@media only screen and (max-width: 480px) {
	#seite { width: 100%; min-width: 320px; max-width: 460px }
	h1 { font-size: 300% }
		h1 img { position: absolute; bottom: -80px; left: 50%; margin-left: -84px; width: 168px; height: 200px }
	#supersized { display: none; }
	#netzwerk { top: 0; border-radius: 0 7px 7px 0; -webkit-border-radius: 0; width: 95%; min-width: 320px; max-width: 460px; padding-right: 5% }
	
	#biografie article { width: 85%; float: none; margin: 10px auto; padding: 1em 5%; }
	#biografie article + article { float: none; width: 85% }
		
		#biografie h4,
		#arbeiten #weitere-jobs h3 { position: relative; top: 0; left: 0 }
	
	#arbeiten { padding-top: 0 }
		#arbeiten article li { width: 66%; float: none; margin: 10px auto }
		#colorbox, #cboxWrapper { display: none }
		#arbeiten article dl { height: 7em }
			dl > dt,dd { display: inline; background: none; padding: 0; border: none }
			dd + dt { display: block; border-top: 1px solid #444; padding-top: 4px }
	#arbeiten article:last-child { display: none }
	
	#arbeiten #weitere-jobs { width: 85%; float: none; margin: 10px auto; padding: 1em 5%; }
		#arbeiten #weitere-jobs li { width: 47%; padding: .3em 1%; margin: .3em 1% .3em 0 }
		
		address { font-size: 200% }
}