/* ---------------------------------------------------- */
/* RESET */
/* ---------------------------------------------------- */
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, code, del, em, font, img, small, strike, strong, dl, dt, dd, ol, ul, li, fieldset, form, label, table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
/* ---------------------------------------------------- */
/* end RESET */
/* ---------------------------------------------------- */

body {
background:#175483;
color:#75c3fe;
text-align:center;
font-family: Helvetica, Arial, sans-serif; 
text-shadow: rgba(0,0,0,.4) 0 1px 0; 
font-size:12px;
}

/* ---------------------------------------------------- */
/* STYLING */
/* ---------------------------------------------------- */

.alignleft {
float:left;
display:block;
margin:0 20px 20px 0;
}

.alignright {
float:right;
display:block;
text-align: right;
margin:0 0 20px 20px;
}

h2 {
font-size:16px;
margin:0 0 20px 0;
border-top:1px solid #1a5a8b;
border-bottom:1px solid #1a5a8b;
}

h3 {
color:#229dfa;
font-size:18px;
line-height:30px;
margin:0 0 20px 0;
border-top:1px solid #1a5a8b;
border-bottom:1px solid #1a5a8b;
}

h3 span {
font-size:12px;
font-weight: normal;
color:#229dfa;
}

h4 {
color:#229dfa;
font-size:22px;
line-height:20px;
margin:0 0 20px 0;
}

h4 span {
font-size:14px;
font-weight: normal;
color:#b09b7c;
text-transform: uppercase;
}

h5 {
font-size:15px;
line-height:24px;
margin:0 0 20px 0;
}

h6 {
font-size:14px;
font-weight:bold;
margin:0 0 5px 0;
}

p {
line-height:24px;
margin:0 0 20px 0;
}

ul {
line-height:24px;
}

ol  {
line-height:24px;
}

a {
color:#229dfa;
text-decoration: none;
}

a:hover {
color:#fff;
}


/* ---------------------------------------------------- */
/* MAIN STRUCTURE */
/* ---------------------------------------------------- */

#page {
width:100%;
clear:both;
overflow: hidden;
padding:50px 0 0 0;
display:block;
}

.container {
clear:both;
overflow: hidden;
position:relative;
display: table;
height:1%;
width:100%;
background:url(../images/bg.png) no-repeat top center;
}

.container .inner {
padding:20px 0;
width:770px;
margin:auto;
text-align:left;
}

/* ---------------------------------------------------- */
/* SPRACHEN */
/* ---------------------------------------------------- */
.sprachen{
position:absolute;
left:240px;
top:20px;
}
.sprachen a{
color:#229dfa;
font-size:18px;
text-shadow: 1px 1px #333, -1px -1px #444;
padding:5px 10px 5px 10px;
}


/* ---------------------------------------------------- */
/* HEADER */
/* ---------------------------------------------------- */
#header {
overflow: hidden;
position:fixed;
display: block;
height:50px;
width:100%;
z-index:10;
background:url(../images/header.jpg) no-repeat top center;
}

#header .inner {
padding:0px;
width:770px;
margin:auto;
text-align:left;
}

#header .inner h1 {
line-height:50px;
height:50px;
float:left;
display:block;
}

#header .inner h1 a {
color:#FFFFFF;
margin:0px;
text-decoration: none;
padding:0px;
float:left;
display:block;
font-size:30px;
}

#header .inner ul.nav {
display:block;
float:right;
margin:15px 0 0;
}

#header .inner ul.nav li {
float:left;
display:block;
line-height:20px;
margin:0 0 0 10px;
}

#header .inner ul.nav li a {
color:#229dfa;
text-decoration: none;
display:block; padding-bottom:4px; 
border-bottom:none; 
font:1.3em Helvetica, Arial, serif; 
text-shadow: rgba(0,0,0,.4) 0 1px 0;

}

#header .inner ul.nav li a:hover {
color:#75c3fe;
border-bottom:1px dotted #75c3fe;
padding-bottom:3px;
}

#header .inner ul.nav li.active a {
color:#75c3fe;
border-bottom:1px dotted #75c3fe;
}

/* ---------------------------------------------------- */
/* BANNER */
/* ---------------------------------------------------- */
#banner .inner {
width:770px;
height:auto;
background:url(../images/logo_bg.png) no-repeat top center;
position:relative;
}
h1.logo a{
background:url(img/logo.png) no-repeat left center;
width:265px;
height:95px;
text-indent:-9999px;
position:absolute;
top:0px;
left:0px;
}
#banner .screenshot {
margin-top:150px;
float:left;
display:block;
width:240px;
height:154px;
position:relative;
overflow: hidden;
}

#banner .screenshot a.bannerPortfolioLink {
width:235px;
height:141px;
background:url(../images/bannerPortfolioLink.png) no-repeat;
position:absolute;
top:0px;
left:0px;
display:block;
}

#intro {color:#75c3fe; 
font:1.4em   Helvetica, Arial, sans-serif;  
width:500px; 
margin:150px 0 0 260px;  
text-shadow: rgba(0,0,0,.4) 0 1px 0;
}
#intro p{
margin-bottom:1em;
line-height:150%;
}
#intro h4{
color:#229dfa;
font:1.5em  Helvetica, Arial, sans-serif; 
text-shadow: rgba(0,0,0,.4) 0 1px 0; 
}
*+ html #intro {
color:#75c3fe;
font:1.4em  Helvetica, Arial, sans-serif; 
text-shadow: rgba(0,0,0,.4) 0 1px 0;  
width:500px;  
margin:180px 0 0 260px;
}  

*+ html #intro p{
margin-bottom:1em;
line-height:150%;
}
*+ html #intro h4{
color:#229dfa;
font:1.5em Helvetica, Arial, sans-serif; 
text-shadow: rgba(0,0,0,.4) 0 1px 0; 
}

/* ---------------------------------------------------- */
/* SERVICES */
/* ---------------------------------------------------- */
ul.services {
overflow: hidden;
width:770px;
height:auto;
padding:10px 0 0;
}

ul.services li.col1{
display:block;
float:left;
width:240px;
margin:0 12px 0 0;
}
ul.services li.col2{
display:block;
float:left;
width:240px;
margin:0 12px 0 12px;
}
ul.services li.col3{
display:block;
float:left;
width:240px;
margin:0 0 0 12px;
}

/* ---------------------------------------------------- */
/* PORTFOLIO */
/* ---------------------------------------------------- */
#slideshow {
overflow: hidden;
width:770px;
padding:10px 0 0;
}

#slideshow .col1{
display:block;
float:left;
width:240px;
margin:0 12px 0 0;
}
#slideshow .col2{
display:block;
float:left;
width:240px;
margin:0 12px 0 12px;
}
#slideshow .col3{
display:block;
float:left;
width:240px;
margin:0 0 0 12px;
}
#slideshow h3{
	padding:6px 0px;
	text-align:center;
	text-decoration:none;
}
#slideshow h3 a{
	font:bold 18px Helvetica, Arial, sans-serif; 
text-shadow: rgba(0,0,0,.4) 0 1px 0; 	
	color:#03ff09;
	text-align:center;
	padding :0px 10px 0px 10px;
	margin-bottom:10px;
	text-decoration:none;
}
#slideshow h3 a:hover{
	color:#fce679;
	text-decoration:none;
}
#slideshow img{
	text-align:left;
	height:154px;
	border:1px solid #1a5a8b;
}

#slideshow p{
	font:normal 12px Helvetica, Arial, sans-serif; 
text-shadow: rgba(0,0,0,.4) 0 1px 0; 
	color:#75c3fe;
	text-align:left;
	width:240px;
	text-decoration:none;
	padding:2px 0px 6px 0px;
}
.center{
text-align:center;	
}
/* ---------------------------------------------------- */
/* SLIDESHOW
/* ---------------------------------------------------- */
#slideshow {
width: 770px;
overflow: hidden;}

#slideshow ul {
margin: 0;
padding: 0;
list-style-type: none;
height: 1%; /* IE fix */}

#slideshow ul:after {
content: ".";
clear: both;
display: block;
height: 0;
visibility: hidden;}            

/* ---------------------------------------------------- */
/* SLIDESHOW > SLIDES
/* ---------------------------------------------------- */
#slideshow .slides {
overflow: hidden;
width: 770px;}

#slideshow .slides ul {
width: 1540px;}

#slideshow .slides li {
width: 770px;
float: left;
padding: 0px;}

#slideshow .slides h2 {
margin-top: 0;}

/* ---------------------------------------------------- */
/* SLIDESHOW > NAVIGATION
/* ---------------------------------------------------- */
#slideshow .slides-nav {
border-top:1px dotted #1a5a8b;
border-bottom:1px dotted #1a5a8b;
font:normal 12px Helvetica, Arial, sans-serif; 
text-shadow: rgba(0,0,0,.4) 0 1px 0; 
color:#75c3fe;
}

#slideshow .slides-nav li {
float: left;}

#slideshow .slides-nav li a {
display: block;
padding: 5px 10px;
outline: none;
color:#75c3fe;
}
.js #slideshow .slides-nav li.on {
border:1px dotted #229dfa;
-webkit-border-radius: 2px;
	-moz-border-radius: 2px;
	border-radius: 2px;


}

.js #slideshow .slides-nav li.on a {
position: relative;
top: 2px;}




/* ---------------------------------------------------- */
/* ABOUT */
/* ---------------------------------------------------- */
#aboutMe .left {
width:500px;
display:block;
float:left;
margin:20px 0;
overflow: hidden;
}

#aboutMe .right {
width:240px;
display:block;
float:right;
margin:20px 0;
overflow: hidden;
}

ul.links {
line-height:30px;
font-weight:bold;
letter-spacing: 0.5px;
}

/* ---------------------------------------------------- */
/* GET IN TOUCH */
/* ---------------------------------------------------- */
input {
background-color:#204b6e;
border-top:1px solid #154063;
border-right:1px solid #154063;
border-left:1px solid #325f80;
border-bottom:1px solid #325f80;
padding:10px 10px 0 10px;
height:24px;
width:300px;
color:#75c3fe;
font-size:13px;
font-family: Helvetica, Arial, sans-serif; 
text-shadow: rgba(0,0,0,.4) 0 1px 0; 
}

input:focus {
border:1px solid #325f80;
}

textarea {
background-color:#204b6e;
border-top:1px solid #154063;
border-right:1px solid #154063;
border-left:1px solid #325f80;
border-bottom:1px solid #325f80;
padding:10px 10px 0 10px;
height:120px;
width:400px;
color:#75c3fe;
font-size:13px;
font-family:  Helvetica, Arial, sans-serif; 
text-shadow: rgba(0,0,0,.4) 0 1px 0; 
}
textarea:focus {
border:1px solid #325f80;
}

#submit {
background:url(../images/submit.jpg) no-repeat;
width:91px;
height:30px;
text-indent:-9999px;
}

#getInTouch .left {
float:left;
display:block;
width:500px;
}

#getInTouch .right {
float:right;
display:block;
width:240px;
}
.stil1{
background: #003;
font-style:italic;
}

/* ---------------------------------------------------- */
/* FOOTER */
/* ---------------------------------------------------- */
#footer {
margin-top:170px;
background:#175483;
}
#footer .inner {
width:770px;
height:74px;
background:url(../images/logo_footer.jpg) no-repeat top left;
border-top:1px dotted #1a5a8b;
}
#footer ul.f_nav {
display:block;
float:right;
margin:20px 0 0;
}
#footer ul.f_nav li {
float:left;
display:block;
line-height:20px;
margin:0 0 0 10px;
}

#footer ul.f_nav li a {
color:#229dfa;
text-decoration: none;
display:block; padding-bottom:4px; 
border-bottom:none; 
font:0.8em Georgia, "Times New Roman", Times, serif; 
}

#footer ul.f_nav li a:hover {
color:#75c3fe;
border-bottom:1px dotted #75c3fe;
padding-bottom:3px;
}

#footer ul.f_nav li.active a {
color:#75c3fe;
}


#footer p {
color:#75c3fe;
font-size:12px;
line-height:20px;
margin:0px;
padding:20px 0 0 160px;
}

#footer p a {
color:#229dfa;
}

#footer p a:hover {
color:#fff;
}
/* ---------------------------------------------------- */
/* FLICKR */
/* ---------------------------------------------------- */
.zg_div {margin:0px 0px 5px 0px; width:117px; display:block; float:right;}
.zg_div_inner { color:#666666; text-align:center; font-family:Helvetica, Arial, sans-serif; 
text-shadow: rgba(0,0,0,.4) 0 1px 0;  font-size:11px;}
.zg_div a, .zg_div a:hover, .zg_div a:visited {color:#3993ff; background:inherit !important; text-decoration:none !important;}

/**
 * jQuery lightBox plugin
 * @copyright (c) 2008 Leandro Vieira Pinho (leandrovieira.com)
 * @license CC Attribution-No Derivative Works 2.5 Brazil - http://creativecommons.org/licenses/by-nd/2.5/br/deed.en_US
 * @example Visit http://leandrovieira.com/projects/jquery/lightbox/ for more informations about this jQuery plugin
 */
#jquery-overlay {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 90;
	width: 100%;
	height: 500px;
}
#jquery-lightbox {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 100;
	text-align: center;
	line-height: 0;
}
#jquery-lightbox a img { border: none; }
#lightbox-container-image-box {
	position: relative;
	background-color: #fff;
	width: 250px;
	height: 250px;
	margin: 0 auto;
}
#lightbox-container-image { padding: 10px; }
#lightbox-loading {
	position: absolute;
	top: 40%;
	left: 0%;
	height: 25%;
	width: 100%;
	text-align: center;
	line-height: 0;
}
#lightbox-nav {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	z-index: 10;
}
#lightbox-container-image-box > #lightbox-nav { left: 0; }
#lightbox-nav a { outline: none;}
#lightbox-nav-btnPrev, #lightbox-nav-btnNext {
	width: 49%;
	height: 100%;
	display: block;
}
#lightbox-nav-btnPrev { 
	left: 0; 
	float: left;
}
#lightbox-nav-btnNext { 
	right: 0; 
	float: right;
}
#lightbox-container-image-data-box {
	font: 10px Verdana, Helvetica, sans-serif;
	background-color: #fff;
	margin: 0 auto;
	line-height: 1.4em;
	overflow: auto;
	width: 100%;
	padding: 0 10px 0;
}
#lightbox-container-image-data {
	padding: 0 10px; 
	color: #666; 
}
#lightbox-container-image-data #lightbox-image-details { 
	width: 70%; 
	float: left; 
	text-align: left; 
}	
#lightbox-image-details-caption { font-weight: bold; }
#lightbox-image-details-currentNumber {
	display: block; 
	clear: left; 
	padding-bottom: 1.0em;	
}			
#lightbox-secNav-btnClose {
	width: 66px; 
	float: right;
	padding-bottom: 0.7em;	
}