/* 
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Title : Dieter Bohne Architekt
Author : Thomas Poschen - http://www.studio311.de
URL : http://www.studio311.de

Beschreibung : Dieter Bohne Webpage

Erstellt : Dezember 2007
Copyright: studio311

All rights reserved including rights of reproduction and use in any form or by any means, including the making of copies by any photo process or by any electronic or mechanical device (printed, written, or oral), or recording for sound or visual reproduction, or for use in any knowledge or retrieval system or device, unless permission in writing is obtained from the copyright proprietor.
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
*/

html, body {
	margin: 0;
	padding: 0;}

body {
	color: #666;
	text-align: center;
	font: medium Geneva, Arial, Helvetica, sans-serif;
	background: #242424 url(../../splash_library/bg.jpg) repeat-x;}

.hidden {
	display: none;}

/******************************
* FLASH CONTENT
******************************/
#flashcontent {
	padding: 0;
	margin:0;
	float: left;}

/******************************
* TEXT FORMAT
******************************/



p {
	font-size: 12px;
	color: #333;
	margin: 10px 24px 5px 22px;
	padding: 3px;
	text-align: justify;}

strong {
	font-weight: bold;
	color: #666;}

span.italic {
	color: #9B5E02;
	font-style: italic;}

em {
	color: #333;
	font-weight: bold;}

span.rosa {
	padding: 0;
	margin: 0 0 8px 0;
	font-size: 14px;
	font-weight: bold;
	color: #FF0099;}
	
span.verde {
	padding: 0;
	margin: 0 0 8px 0;
	font-size: 14px;
	font-weight: bold;
	color: #00CC00;}
	
span.celeste {
	padding: 0;
	margin: 0 0 8px 0;
	font-size: 14px;
	font-weight: bold;
	color: #0099CC;}

img {
	border:0;}

.simpleline {
	width: 400px;
	height: 3px;
	padding: 0 0 6px 0;
	margin: 0;
	background: url(../../splash_library/simpleline.gif) repeat-x left top;	}

.simplelinesmall {
	width: 210px;
	height: 3px;
	padding: 0 0 6px 0;
	margin: 0;
	background: url(../../splash_library/simpleline.gif) repeat-x left top;	}

/******************************
* OLD BROWSER WARNING
******************************/
span.hidden	{
	display:none;}

#container {
	width: 970px;
	height: 750px;
	margin: auto;
	text-align: left;
	background-color: #d0d35e;
	background: url(../images/verlauf.jpg) repeat-x left top;
}

#containerpresse {
	width: 970px;
	height: 1000px;
	margin: auto;
	text-align: left;
	background: url(../images/verlauf.jpg) repeat-x left top;
	background-color: #d0d35e;
}
#logooben{
	width:970px;
	height: 58px;
	padding: 0;
	margin: 0;
	}

#logoabstand{
	width:970px;
	height: 52px;
	padding: 0;
	margin: 0;
	float:left;}

/* navigation */
#slantedmenu{
	font-weight: bold;
	font-size: 11px;}

#slantedmenu:after{ /*Add margin between menu and rest of content in Firefox*/
	content: "."; 
	display: block; 
	height: 0; 
	clear: both; 
	visibility: hidden;}

#slantedmenu ul{
	text-indent: 10px;
	padding: 1px 4px 0 0;
	margin: 0;
	background-color: #FFCE00;
	border: 1px solid #FFCE00;
	text-align: right; /*set value to "center" for example to center items*/
	line-height: 380%;}

#slantedmenu ul li{
	display: inline;}

#slantedmenu ul li a{
	color: #fff;
	padding: 3px 0;
	padding-right: 25px;
	margin: 0;
	text-decoration: none;
	background: transparent url(../../splash_library/slantdivider.gif) top right no-repeat;}

#slantedmenu ul li a:visited{
	color: #494949;} 

#slantedmenu ul li a.select {
	color: #000;
	text-decoration: line-through;}

#slantedmenu ul li a:hover{
	color: #000;}

/*banner web pages*/
#title {
	width:450px;
	height:171px;
	clear:both;
	float:left;
	margin-top:20px;
	padding: 120px 0 0 0;
	line-height:29px;}

#title p{
	color: #fff;
	font-size: 20px;
	font-weight: bold;}

#bannerhome {
	background: url(../../splash_library/banner_home.jpg) no-repeat left top;
	width: 770px;
	height: 300px;
	padding: 0;
	margin: 0;
	clear:both;}

#bannercontact {
	background: url(../../splash_library/banner_contact.jpg) no-repeat left top;
	width: 770px;
	height: 200px;
	padding: 0;
	margin: 0;
	clear:both;}

#bannersnapshots {
	background: url(../../splash_library/banner_snapshots.jpg) no-repeat left top;
	width: 770px;
	height: 200px;
	padding: 0;
	margin: 0;
	clear:both;}

#bannersnapshotssurf {
	background: url(../../splash_library/banner_snapshots_surf.jpg) no-repeat left top;
	width: 770px;
	height: 200px;
	padding: 0;
	margin: 0;
	clear:both;}

#bannergear {
	background: url(../../splash_library/banner_gear.jpg) no-repeat left top;
	width: 770px;
	height: 200px;
	padding: 0;
	margin: 0;
	clear:both;}

#bannerman {
	background: url(../../splash_library/banner_man.jpg) no-repeat left top;
	width: 770px;
	height: 200px;
	padding: 0;
	margin: 0;
	clear:both;}

#bannerwomen {
	background: url(../../splash_library/banner_women.jpg) no-repeat left top;
	width: 770px;
	height: 200px;
	padding: 0;
	margin: 0;
	clear:both;}

/* Content ---------------------------*/
#wrapper {
	width: 770px;
	padding:0;
	margin:0;}

/*dl home page*/
#homecontent {
	width: 500px;
	padding:0;
	margin: 0;}

#homecontent .padding {
	padding: 2px 20px 4px 20px;}

#homecontent h1 {
	padding: 0;
	margin: 0 0 8px 0;
	font-size: 24px;
	font-weight: bold;
	color: #333;}

#homecontent h3 {
	padding: 0;
	margin: 0 0 8px 20px;
	font-size: 14px;
	font-weight: bold;
	color: #0099CC;}

#homecontent p {
	font-size: 12px;
	text-align: left;
	color: #333;
	margin: 0;
	padding: 0px;
	line-height: 135%;}

#homecontent a {
	color: #0099CC;
	text-decoration: none;}

#homecontent a:hover {
	color: #333;
	text-decoration: underline;}

#random {
	width: 400px;
	height:150px;
	padding:0;
	margin: 0;
	border: 5px solid #FFCE00;}

/*end*/
#content {
	width: 500px;
	padding:0;
	margin: 0;}

#content .padding {
	padding: 2px 20px 4px 20px;}

#content h1 {
	padding: 0;
	margin: 0 0 8px 0;
	font-size: 24px;
	font-weight: bold;
	color: #333;}

#content p {
	font-size: 12px;
	text-align: left;
	color: #333;
	margin: 0;
	padding: 0px;
	line-height: 135%;}

#content a {
	color: #0099CC;
	text-decoration: underline;}

#content a:hover {
	color: #333;
	text-decoration: none;}

#sidebar-a {
	float: right;
	width: 246px;
	padding:0;
	margin: 0;
	clear:both;}

#sidebar-a .padding {
	padding: 2px 10px 0 8px;}

#sidebar-a h1 {
	padding: 0;
	margin: 0 0 8px 0;
	font-size: 24px;
	font-weight: bold;
	color: #666;}

#sidebar-a h2 {
	padding: 0;
	margin: 0 0 8px 0;
	font-size: 17px;
	font-weight: bold;
	color: #666;}

#sidebar-a h3 {
	padding: 0;
	margin: 0 0 8px 0;
	font-size: 14px;
	font-weight: bold;
	color: #999;}

#sidebar-a p {
	font-size: 12px;
	text-align: left;
	color: #333;
	margin: 0;
	padding: 0px;
	line-height: 135%;}

#sidebar-a a {
	color: #0099CC;
	text-decoration: underline;}

#sidebar-a a:hover {
	color: #333;
	text-decoration: none;}

#sidebar-a ul {
	padding:0;
	margin: 0;
	font-size: 12px;
	color: #333;
	text-align: left;}

#sidebar-a li {
	list-style: none;
	font-weight: bold;
	color: #333;
	padding: 6px 0 3px 0;
	margin: 0 0 0 6px;
	text-transform: uppercase;}

#sidebar-a img {
	padding: 2px;
	border: 4px solid #ccc;}

#sidebar-a dl {
	width: 230px;
	line-height: normal;
	font-size: 12px;
	text-align: left;
	padding: 0;
	margin: 0 9px 0 0;
	background: #FFCE00 url(../../splash_library/dotted-line-light.gif) repeat-x left top;}

#sidebar-a dt {
	font-weight: bold;
	color: #333;
	padding: 6px 0 3px 0;
	margin: 0 0 0 6px;
	text-transform: uppercase;}

#sidebar-a dd {
	margin: 0;
	padding: 0 0 4px 4px;
	color: #333;
	border-bottom: 2px solid #fff;}

/*full*/
#full {
	text-align: left;
	width:770px;}

#full .padding {
	padding: 2px 20px 4px 20px;}

#full h1 {
	padding: 0;
	margin: 0 0 8px 0;
	font-size: 24px;
	font-weight: bold;
	color: #333;}

#full h3 {
	padding: 0;
	margin: 0 0 8px 20px;
	font-size: 14px;
	font-weight: bold;
	color: #0099CC;}

#full p {
	font-size: 12px;
	text-align: justify;
	color: #333;
	margin: 0;
	padding: 0px;
	line-height: 135%;}

#full a {
	color: #0099CC;
	text-decoration: none;}

#full a:hover {
	color: #333;
	text-decoration: underline;}

/*  footer  */
#footer {
	clear:both;
	width: 970px;
	height: 30px;
	margin: auto;
	color: #999;
	text-align: center;
	font-size: 11px;
	padding: 30px 0 5px 0;}

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

#footer a:hover {
	color: #333;
	text-decoration: line-through;}

span.credits {
	color: #333;}

/******************************
* THE FORMS
******************************/
#boxForm {
	padding: 0px;
	margin: 0px;}

form {
	margin: 0px;
	padding: 0px;}

#boxForm .padding {
	padding: 0 8px 8px 28px;}

label {
	text-align: left;
	font-size: 12px;
	color: #333;
	font-weight: bold;
	line-height: 175%;}

.input {
	font-size: 11px;
	color: #404040;
	background: #E5E5E5 url(../../splash_library/bg_input.gif) repeat-x;
	width: 300px;
	padding: 2px;
	margin: 2px 0 2px 0;}

.selectmenu {
    font: 11px Geneva, Arial, Helvetica, sans-serif;
	color: #404040;
	background: #E5E5E5;
	width: 300px;}

.textarea {
	font: 11px Geneva, Arial, Helvetica, sans-serif; 
	color: #404040;
	background: #E5E5E5 url(../../splash_library/bg_input.gif) repeat-x;
	height: 80px; 
	width: 300px; 
	padding: 2px;
	margin: 2px 0 2px 0;}

.button {
	font: 11px Geneva, Arial, Helvetica, sans-serif;
	color: #333;
	background: #E5E5E5;
	border: 1px solid #E2E5D2;
	padding: 1px;
	margin-top: 0;}

/******************************
* AJAX HOMECONTENT
******************************/
#thumbnail { /*contenitore thumbnail generico*/
	text-align: left;
	width:100%;
	overflow:auto;
	padding-bottom: 20px;}

#thumbnail dl {
	width: 160px;
	text-align: left;
	padding: 2px 1px 0 12px;
	margin: 0 3px 0 2px;
	float:left;/*successione*/}

#thumbnail dt {
	font-size: 13px;
	font-weight: bold;
	color: #666;
    padding: 10px 2px 0 0;}

#thumbnail dd {
	font-size: 12px;
	margin: 0;
	padding: 2px 2px 0 0;
	color: #333;}
	
#thumbnail dd img {
	width:150px;
	height:100px;
	background: #fff url(../../splash_library/bg.jpg) repeat-x left top;
	border: 4px solid #ccc;
	padding: 6px;
	margin: 0 0 2px 0;
	display:block;}

#thumbnail dd.arrow {
	font-size: 13px;
	line-height:140%;
	margin: 0;
	padding: 2px 2px 0 14px;
	font-weight: bold;
	color: #0099CC;
	background: url(../../splash_library/arrow.gif) no-repeat left;}

/*ajax*/

#lightbox{
	position: absolute;
	top: 40px;
	left: 0;
	width: 100%;
	z-index: 100;
	text-align: center;
	line-height: 0;}

#lightbox a img{ border: none; }

#outerImageContainer{
	position: relative;
	background-color: #fff;/*colore di sfonfo della foto grande*/
	width: 250px;
	height: 250px;
	margin: 0 auto;}

#imageContainer{
	padding: 10px;}

#loading{
	position: absolute;
	top: 40%;
	left: 0%;
	height: 25%;
	width: 100%;
	text-align: center;
	line-height: 0;}
	
#hoverNav{
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	z-index: 10;}
	
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}

#prevLink, #nextLink{
	width: 49%;
	height: 100%;
	background: transparent url(../../images/blank.gif) no-repeat; /* Trick IE into showing hover */
	display: block;
	}
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(../../images/prevlabel.gif) no-repeat left 15%; }
#nextLink:hover, #nextLink:visited:hover { background: url(../../images/nextlabel.gif) right 15% no-repeat; }


#imageDataContainer{
	font: 11px Geneva, Arial, Helvetica, sans-serif;
	background-color: #fff;
	margin: 0 auto;
	line-height: 1.4em;}

#imageData{
	padding:0 10px;
	}
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }	
#imageData #caption{ font-weight: bold;	}
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em;	}			
#imageData #bottomNavClose{ width: 66px; float: right;  padding-bottom: 0.7em;	}	
		
#overlay{
	position: absolute;
	top: 0;
	left: 0;
	z-index: 90;
	width: 100%;
	height: 500px;
	background-color: #000;
	filter:alpha(opacity=60);
	-moz-opacity: 0.6;
	opacity: 0.6;}

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

* html>body .clearfix {
	display: inline-block; 
	width: 100%;}

* html .clearfix {
	/* Hides from IE-mac \*/
	height: 1%;
	/* End hide from IE-mac */}	

/*  flash gear + man + woman  */
#flashshow {
	width: 700px;
	height: 450px;
	text-align: center;
	padding: 0;
	margin-top: 0px;
	margin-right: auto;
	margin-left: auto;}

#flashshow a {
	color: #0099CC;
	text-decoration: underline;}

#flashshow a:hover {
	color: #333;
	text-decoration: none;}