/* Jannis Gerlinger
Grafik & Webdesign
www.jannis-gerlinger.de
Start: 25.10.2009
Letzte Aenderung: 21.01.2010
*/

/* Farbschema
--------------------------------------------------------------------------------------- */

/*
Farbton (Hintergrund): #acdfff
Farbton (Content BG): #f8f8f8
Farbton (Pink): #ff0096
Farbton (Farbton): #xxxxxx
Farbton (Farbton): #xxxxxx
*/

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

/* Globals
--------------------------------------------------------------------------------------- */
html {
	background: url(../_images/_layout/bg_verlauf.png) repeat-x #acdfff;
	color: #000;
	}


body {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: normal;
	line-height: 20px;
	}
	
/* Globale - Links
--------------------------------------------------------------------------------------- */
a:link {
	color: #000;
	text-decoration: none;
	}

a:visited {
	color: #000;
	text-decoration: none;
	}

a:hover {
	color: #ff0096;
	text-decoration: none;
	}
	
/* Hauptspalte - Links
--------------------------------------------------------------------------------------- */
p.subline a:link, p.content a:link {
	color: #ac0065;
	font-weight: bold;
	text-decoration: none;
	}

p.subline a:visited, p.content a:visited {
	color: #ac0065;
	font-weight: bold;	
	text-decoration: none;
	}

p.subline a:hover, p.content a:hover {
	color: #ff0096;
	font-weight: bold;	
	text-decoration: none;
	}

.picframe, a.picframe {
	border: 5px solid #d8d8d8;
	}


a:hover .picframe {
	border-color: #b4b4b4;
	}
	
/* Seitenspalte - Links
--------------------------------------------------------------------------------------- */	
#seitenspalte a:link {
	color: #000;
	text-decoration: none;
	}
	
#seitenspalte a:visited {
	color: #000;
	text-decoration: none;
	}
	
#seitenspalte a:hover {
	color: #ff0096;
	text-decoration: none;
	}	
	
/* Footer - Links
--------------------------------------------------------------------------------------- */
#footer a:link {
	color: #fff;
	text-decoration: none;
	}

#footer a:visited {
	color: #fff;
	text-decoration: none;
	}

#footer a:hover {
	color: #c3c3c3;
	text-decoration: none;
	}		
	
/* Main Navigation
--------------------------------------------------------------------------------------- */
#home a {
 	background: url(../_images/_layout/start.png) no-repeat 0 0;
	cursor: pointer;
 	display: block;
 	height: 92px;
  	width: 148px;
	}

#home a:hover {
	background-position: -148px 0;
	}

#home a.aktiv {
  	background-position: -148px 0;
	}
	
	
		
#portfolio a {
 	background: url(../_images/_layout/portfolio.png) no-repeat 0 0;
	cursor: pointer;
 	display: block;
 	height: 92px;
  	width: 148px;
	}

#portfolio a:hover {
 	background-position: -148px 0;
	}

#portfolio a.aktiv {
  	background-position: -148px 0;
	}	
	

#project a {
 	background: url(../_images/_layout/project.png) no-repeat 0 0;
	cursor: pointer;
 	display: block;
 	height: 92px;
  	width: 148px;
	}

#project a:hover {
 	background-position: -148px 0;
	}

#project a.aktiv {
  	background-position: -148px 0;
	}
	
	
#gallery a {
 	background: url(../_images/_layout/gallery.png) no-repeat 0 0;
	cursor: pointer;
 	display: block;
 	height: 92px;
  	width: 148px;
	}

#gallery a:hover {
 	background-position: -148px 0;
	}

#gallery a.aktiv {
  	background-position: -148px 0;
	}
	
	
#about a {
 	background: url(../_images/_layout/about.png) no-repeat 0 0;
	cursor: pointer;
 	display: block;
 	height: 92px;
  	width: 148px;
	}

#about a:hover {
 	background-position: -148px 0;
	}

#about a.aktiv {
  	background-position: -148px 0;
	}	
	
	
#contact a {
 	background: url(../_images/_layout/contact.png) no-repeat 0 0;
	cursor: pointer;
 	display: block;
 	height: 92px;
  	width: 148px;
	}

#contact a:hover {
 	background-position: -148px 0;
	}

#contact a.aktiv {
  	background-position: -148px 0;
	}	
	
/* Seiten Navigation
--------------------------------------------------------------------------------------- */
#mail a {
 	background: url(../_images/_layout/mail.png) no-repeat 0 0;
	cursor: pointer;
 	display: block;
 	height: 32px;
  	width: 31px;
	}

#mail a:hover {
	background-position: -32px 0;
	}

#mail a.aktiv {
  	background-position: -32px 0;
	}
	

#twitter a {
 	background: url(../_images/_layout/twitter.png) no-repeat 0 0;
	cursor: pointer;
 	display: block;
 	height: 32px;
  	width: 31px;
	}

#twitter a:hover {
	background-position: -32px 0;
	}

#twitter a.aktiv {
  	background-position: -32px 0;
	}
	
	
#facebook a {
 	background: url(../_images/_layout/facebook.png) no-repeat 0 0;
	cursor: pointer;
 	display: block;
 	height: 32px;
  	width: 31px;
	}

#facebook a:hover {
	background-position: -32px 0;
	}

#facebook a.aktiv {
  	background-position: -32px 0;
	}
	
	
#xing a {
 	background: url(../_images/_layout/xing.png) no-repeat 0 0;
	cursor: pointer;
 	display: block;
 	height: 32px;
  	width: 31px;
	}

#xing a:hover {
	background-position: -32px 0;
	}

#xing a.aktiv {
  	background-position: -32px 0;
	}
	
	
#myspace a {
 	background: url(../_images/_layout/myspace.png) no-repeat 0 0;
	cursor: pointer;
 	display: block;
 	height: 32px;
  	width: 31px;
	}

#myspace a:hover {
	background-position: -32px 0;
	}

#myspace a.aktiv {
  	background-position: -32px 0;
	}
	

#behance a {
 	background: url(../_images/_layout/behance.png) no-repeat 0 0;
	cursor: pointer;
 	display: block;
 	height: 32px;
  	width: 31px;
	}

#behance a:hover {
	background-position: -32px 0;
	}

#behance a.aktiv {
  	background-position: -32px 0;
	}
	
	
#deviantart a {
 	background: url(../_images/_layout/deviantart.png) no-repeat 0 0;
	cursor: pointer;
 	display: block;
 	height: 32px;
  	width: 31px;
	}

#deviantart a:hover {
	background-position: -32px 0;
	}

#deviantart a.aktiv {
  	background-position: -32px 0;
	}	
	
	
#flickr a {
 	background: url(../_images/_layout/flickr.png) no-repeat 0 0;
	cursor: pointer;
 	display: block;
 	height: 32px;
  	width: 31px;
	}

#flickr a:hover {
	background-position: -32px 0;
	}

#flickr a.aktiv {
  	background-position: -32px 0;
	}	
	
	
#customize a {
 	background: url(../_images/_layout/customize.png) no-repeat 0 0;
	cursor: pointer;
 	display: block;
 	height: 32px;
  	width: 31px;
	}

#customize a:hover {
	background-position: -32px 0;
	}

#customize a.aktiv {
  	background-position: -32px 0;
	}	
	
	
.top a {
 	background: url(../_images/_layout/top.png) no-repeat 0 0;
	cursor: pointer;
 	display: block;
 	height: 32px;
  	width: 31px;
	}

.top a:hover {
	background-position: -32px 0;
	}

.top a.aktiv {
  	background-position: -32px 0;
	}	

/* Layout
--------------------------------------------------------------------------------------- */	
#head_bg_top {
	background: url(../_images/_layout/head_bg_top.jpg) no-repeat center;
	height: 484px;
	margin-top: -7px;
	min-width: 950px;	
	width: 100%;
	}
	
#logo {
	margin: 0 auto;
	padding-top: 40px;
	left: 50%;
	width: 860px;
	}
	
#mail_header {
	padding: 136px 0 0 660px;
	}	
	
#content_top {
	background: url(../_images/_layout/content_top.png);
	height: 178px;	
	margin: -264px auto 0 auto;		
	width: 960px;
	}
	
#navigation {
	float: left;
	margin: -11px 0 0 41px;
	position: absolute;
	}	
	
#navigation li {
	float: left;
	list-style-type: none;
	}
	
#wrapper {
	background: url(../_images/_layout/content_bg.png);
	margin: 0 auto;
	overflow: auto;	
	width: 960px;
	}
	
#hauptspalte {
	float: left;
	margin-left: 51px;
	width: 532px;
	}
	
#seitenspalte {
	float: left;	
	margin-left: 42px;
	overflow: hidden;
	width: 287px;
	}
	
#seitennavigation {
	background: url(../_images/_layout/schatten_seitennavigation.png) repeat-y;
	float: left;
	height: 320px;
	list-style-type: none;	
	margin: -130px 0 0 17px;
	padding-top: 10px;
	overflow: hidden;
	}
	
#seitennavigation li {
	padding-top: 2px;
	}	
		
#footer_top {
	background: url(../_images/_layout/footer_top.png);
	height: 145px;	
	margin: 0 auto;		
	width: 960px;
	}		
		
#seitennavigation_top {
	float: left;
	list-style-type: none;	
	margin-left: 929px;
	margin-top: 34px;
	}

#footer {
	background: url(../_images/_layout/footer.png) no-repeat center;
	height: 345px;
	margin: -145px 0 0 0;
	min-width: 950px;	
	width: 100%;
	}	
	
#footer_text {
	color: #fff;
	font-size: 11px;	
	float: left;
	height: 20px;
	left: 50%;
	margin-left: -480px;
	position: relative;	
	top: 258px;	
	width: 960px;
	}

#teaser_text {
	background: url(../_images/_layout/jannis_gerlinger_start.png);
	height: 350px;
	margin-bottom: -3px;
	text-indent: -888em;	
	width: 288px;
	}
	
#seitenspalte_margin {
	margin-bottom: -30px
	}	
	
/* Listen - Content
--------------------------------------------------------------------------------------- */	
.contentpics {
	float: left;
	list-style-type: none;
	}

.contentpics li {
	float: left;
	padding-bottom: 4px;
	}
	
.contentpics li.right {
	float: left;
	padding-left: 20px;	
	}	
	
.contentpics li.clear {
	height: 16px;
	}		
	
.contentpics li.bottom {
	height: 30px;
	}	
	
.portfolio_pics {	
	list-style-type: none;
	}
	
.portfolio_pics li.pic {
	float: left;
	height: 300px;
	margin: 0 0 30px 1px;
	}
	
.portfolio_pics li.logo {
	float: left;
	height: 184px;
	margin: 0 0 30px 1px;
	}	
	
.portfolio_pics li.clear {
	margin-bottom: 20px;
	}	

.webdesign_pics li.pic {
	float: left;
	height: 520px;
	list-style: none;
	margin-bottom: 30px;
	}
	
.webdesign_pics li.back {
	background: url(../_images/_layout/back.png);
	float: left;
	font-size: 22px;
	height: 59px;
	list-style: none;
	margin-top: 23px;
	padding: 21px 0 0 62px;
	width: 470px;
	}	

ul.resolutions {
	float: left;
	list-style-type: none;
	margin-bottom: 15px;
	}
	
.res_headline {
	font-size: 22px;
	margin: 0 0 5px 10px;
	}	
	
.res_pixel {
	float: left;
	font-size: 14px;
	font-weight: bold;
	list-style-type: square;
	list-style-position: inside;
	margin: 5px 10px 0 10px;
	width: 110px;	
	}
	
.makingof_pics {	
	list-style-type: none;
	}
	
.makingof_pics li.pic {
	float: left;
	height: 500px;
	margin: 0 0 30px 1px;
	}	
		
/* Listen - Seitenspalte
--------------------------------------------------------------------------------------- */		
#kategorien {
	font-weight: bold;
	line-height: 30px;
	list-style-type: none;
	margin-top: -11px;
	}
	
.favicon_kategorien {
	margin: 0px 6px 2px 0;
	vertical-align: middle
	}	
	
#kategorien li.clear, #dailylinks li.clear, #skills li.clear {
	list-style-type: none;
	list-style-image: none;
	margin-bottom: -40px;
	}
	
#skills {
	line-height: 30px;
	list-style-type: none;
	margin-top: -11px;
	}

#dailylinks {
	font-weight: bold;
	line-height: 30px;
	list-style-type: none;
	margin-top: -11px;
	}	
	
.favicon {
	border: 1px solid #b4b4b4;
	margin: 0px 6px 2px 0;
	vertical-align: middle
	}	
	
#printawards {
	font-weight: bold;
	line-height: 30px;
	list-style-type: none;
	margin-top: -11px;
	}	
	
#lebenslauf{
	background: url(../_images/_layout/lebenslauf_top.jpg) repeat-x;
	height: 380px;
	width: 288px;
	}
	
#lebenslauf img{
	margin-top: 177px;
	}	

#webawards {
	font-weight: bold;
	line-height: 30px;
	list-style-type: none;
	margin-top: -11px;
	}

#webawards li {
	float: left;
	height: 49px;
	margin-bottom: 8px;
	}	

#webawards li.center {
	padding: 0 9px 0 8px;
	}		
	
/* Listen - Footer
--------------------------------------------------------------------------------------- */	
.footer_list {
	float: left;
	height: 21px;	
	margin: -21px 0 0 778px;
	}
	
.footer_list li.impressum {
	float: left;
	list-style-type: none;
	}

.footer_list li.sitemap {
	float: left;	
	list-style-type: square;
	margin-left: 22px;
	}
	
/* Überschriften
--------------------------------------------------------------------------------------- */	
h1 {
	background: url(../_images/_layout/h1_bg.png);
	cursor: default;
	float: left;
	font-size: 35px;
	font-weight: normal;
	height: 28px;
	margin-bottom: 20px;
	padding: 10px 0 0 10px;
	text-shadow: 1px 1px 3px #474747;
	text-transform: uppercase;	
	width: 522px;
	}

h2 {
	color: #f8f8f8;
	cursor: default;
	font-size: 10px;
	height: 60px;
	margin: 80px 0 0 51px;
	text-align: center;
	width: 861px;
	}
	
h3 {
	background: url(../_images/_layout/h3_bg.png);
	cursor: default;	
	font-size: 22px;
	font-weight: normal;	
	height: 24px;
	margin: 30px 0 20px 0;
	padding: 4px 10px 0 0;
	text-shadow: 1px 1px 2px #474747;	
	text-transform: uppercase;
	text-align: right;
	width: 278px;
	}	

h4 {
	float: left;	
	font-size: 15px;
	margin-bottom: 6px;
	width: 532px;
	}

/* Absätze
--------------------------------------------------------------------------------------- */
p.subline {
	float: left;
	font-size: 12px;
	font-weight: bold;
	margin: 4px 0 31px 0;
	width: 532px;
	}

p.content {
	float: left;	
	margin: -2px 0 22px 0;
	width: 532px;
	}

p.copyright {
	float: left;
	height: 21px;
	margin-left: 362px;	
	text-align: right;
	}
		
p.clear {
	float: left;
	height: 13px;
	}
	
p.like_it {
	margin: -19px 0 0 320px;
	}	

/* Sonstiges
--------------------------------------------------------------------------------------- */	
hr {
	background: #d8d8d8;
	float: left;
	height: 1px;
	margin: 20px 0 20px 0;
	width: 532px;
	}

#tooltip{
	background: #000;	
	border: 1px solid #333;	
	color: #fff;	
	font-size: 13px;
	-moz-border-radius: 5px;	
	position: absolute;
	padding: 4px 7px;
	}	
	
/* Kontaktformular
--------------------------------------------------------------------------------------- */
#contactform {
	list-style-type: none;
	}

#contactform li.name {
	background: url(../_images/_layout/contact_name.png);
	float: left;
	height: 60px;
	margin-bottom: 60px;
	width: 530px;
	}
	
#contactform li.website {
	background: url(../_images/_layout/contact_website.png);
	float: left;
	height: 60px;
	margin-bottom: 60px;	
	width: 530px;
	}	

#contactform li.mail {
	background: url(../_images/_layout/contact_mail.png);
	float: left;
	height: 60px;
	margin-bottom: 60px;		
	width: 530px;
	}	

#contactform li.textarea {
	background: url(../_images/_layout/contact_textarea.png);
	float: left;
	height: 450px;
	margin-bottom: 60px;		
	width: 530px;
	}	

.formularfeld {
	background: none;
	color: #595959; 
	font-size: 22px;
	height: 33px; 
	padding: 17px 0 0 20px;
	width: 510px;
	}
	
.textfeld {
	background: none;
	color: #595959; 
	font-size: 22px;
	font-family: Arial, Helvetica, sans-serif;
	height: 372px; 
	padding: 25px 0 0 20px;
	width: 500px;
	}	

#contactform .sendenbtn {
	background-color: #000;
	border: 1px solid #cacaca;	
	color: #fff;
	cursor: pointer;
	float: left;
	font-size: 22px;
	font-weight: bold;
	height: 50px; 	
	letter-spacing: 1px;
	margin: -20px 0 30px 20px;
	width: 180px; 
	}	
		
#contactform .sendenbtn:hover {
background: #ff0096;
	}