/* ======================================
  1. Kalibrierung und Restauration
  ====================================== */
*  { padding: 0; margin: 0; }


/* ======================================
  2. Allgemeine Styles
  ====================================== */

body {
  /*background-color: white;*/
  font-family: Arial, Verdana, Helvetica, sans-serif;
  font-size: small;
}
h1 {
	color: #000000;
    font-family: Verdana, Helvetica, Arial, sans-serif;
    font-size: 2rem;
    font-weight: normal;
    line-height: 2.3rem;
}
h2 {
	color: #000000;
    font-family: Verdana, Helvetica, Arial, sans-serif;
    font-size: 1rem;
    font-weight: normal;
    line-height: 1.15rem;
  }
h3 {
	font-family: Verdana, Helvetica, Arial, sans-serif;
	font-size: 100%;
	font-weight: bold;
	}
	
@font-face {
  font-family: 'Titillium+Web:400,200';
  src: url('myfont-webfont.eot#') format('eot'), 
       url('myfont-webfont.woff') format('woff'), 
       url('myfont-webfont.ttf')  format('truetype'),
       url('myfont-webfont.svg#svgFontName') format('svg');
}

a:link { /*text-decoration:underline;*/ color:#c6c6c5; }
a:visited { /*text-decoration:underline;*/ color:#c6c6c5; }
a:hover { text-decoration:none; border-bottom: 1px dotted #a0a0a0; color: #a0a0a0; }


/* Allgemeine Klassen und IDs */

.clearing { clear: both; }
.link { font-size:0.7rem; color:#c6c6c5; }
.link_text { color:#c6c6c5; text-decoration:underline; }
.container_head { float:left; width:930px; height: 50px; margin-top:10px; }
.container { float:left; width:930px;margin-top:10px; }
.container_topline { float:left; width:930px;margin-top:20px; border-top:1px dotted #282828; padding-top:20px; }
.left { float:left; width:25%; height:250px; background-color:#c0c0c0; }
.right { float:right; width:25%; height:250px; background-color:#c0c0c0; }
.middle { position:absolute; margin:0 25%; width:50%; height:250px; background-color:#a0a0a0; }
.content { float:left; padding: 5px; clear:both;}
.content_box { padding:0 5px 0 5px; clear:both; }
.footer_column { float:left; width:205px; /* background-color: #e0e0e0; */ }
.footer_column_dotted { float:left; width:205px; border-right:1px dotted; /* background-color: #e0e0e0; */ } 
.head { font-family:arial,helvetica,sans-serif; font-size:0.8rem; line-height:1.2rem; font-weight:normal; color:#878786; margin-bottom:5px;}
.head_nullneun { font-family:arial,helvetica,sans-serif; font-size:0.9rem; font-weight:bold; color:#282828; margin-bottom:7px;}
.head_einsfuenf { font-family:arial,helvetica,sans-serif; font-size:1.5rem; line-height:1.8rem; color:#282828; margin-bottom:10px; }
.col_head { 	float: left; width: 140px; padding: 0; margin: 0 15px 0 10px; font-size: 0.8rem; font-weight: bold; color:#282828; }
.bodytext { font-family: Arial, Verdana, Helvetica, sans-serif; font-size:0.7rem; line-height:1.1rem; color:#c6c6c5; }
.bodytext_darker { font-family: Arial, Verdana, Helvetica, sans-serif; font-size:0.7rem; line-height:1.1rem; color:#3c3c3b; }
.bodytext_nullacht { font-family: Arial, Verdana, Helvetica, sans-serif; font-size:0.74rem; line-height:1.3rem; color:#282828; }
.copyright_small { font-family: Arial, Verdana, Helvetica, sans-serif; font-size:0.6rem; line-height:1.3rem; color:#a0a0a0; }
.col_head { 	float: left; width: 140px; padding: 0; margin: 0 15px 0 10px; font-size: 0.8rem; font-weight: bold; color:#282828; }
.category { font-size:0.65rem;color:#c0c0c0; }
.line { float:left; width:826px; height:2px; margin-top:20px; border-bottom:1px dotted #282828; }
.line_930 { float:left; width:930px; height:2px; margin-top:20px; border-bottom:1px dotted #282828; }
.gap_20 { float:left; width:826px; height:2px; margin-top:20px; }
.gap_40 { float:left; width:826px; height:2px; margin-top:40px; }
.center { 
	position:absolute;
	height:2000px;
	width:3000px;
	margin:-1000px 0px 0px -1500px;
	top: 50%;
	left: 50%;
	text-decoration: none;
	text-align: center;
	padding: 3px 0 0 0;
	color: black;
	}

.backgound_dott { background-color:#32E804 }
.transparenz { background: rgba(255, 255, 255, 0.9); }
.transparenz_black { background: rgba(0, 0, 0, 0.6); }

.photo_container { float:left; display: block; height: 512px; margin-right:30px; }




/* ======================================
  3.  Styles für die Layoutbereiche
  ====================================== */
#body {
   background-color: white;
   padding: 0; margin: 0;
   overflow-x: hidden;
   overflow-y: hidden;
}

#wrapper { 
  position:absolute;
  height:600px;
  width:930px;
  margin:-300px 0 0 -465px;
  top:50%;
  left:50%;
  padding: 0 0;
  background:white;
}

#wrapper_content { 
  position:absolute;
  background-color:white;
  width:930px;
  margin:20px 0 0 -465px;
  left:50%;
  padding: 0 0;
}

#kopfbereich {
	width: 930px;
	height: 60px;
	margin: 10px auto 0;
}

#Demo {
	position:relative;
	float:left;
	overflow:hidden;
	width:550px; 
	height:300px;
	margin-left:30px;
	margin-top:20px;
}

#scrolled-container {
	overflow: scroll;
	width: 760px; height: 500px;
}

/* photography */

#photo_kopfbereich {
	position: fixed;
	z-index: 3;
	float: left;
	display: block;
	width: 13012px;
	height: 30px;
	background-color: white;
}

#content-container {
	overflow: scroll;
	width:750px;
	height:500px;
}

#photo_content_container {
	float: left;
	position: absolute;
	z-index: 1;
	display: block;
	width: 13000px;
	margin-top: 60px;
	margin-left: 305px;
	padding: 10px 10px 20px;
}

div#photo_navibereich {
  z-index: 2;
  position: fixed;
  width: 250px;
  height: 420px;
  float: left;
  overflow:hidden; 
  background: white; 
  padding: 0 30px 0 30px;
  margin: 70px 0 0 0;
  /* border-bottom:1px solid #6c6c6c; */
}
/* hasLayout für IE6 */
* html #photo_navibereich { height: 1%; }

div#photo_navibereich ul {
  /* padding: 7px 0; */ 
  margin: 60px 0 0 0;
  font-size: 0.7rem;
  font-weight: normal;
}
div#photo_navibereich li {
  position: relative;
  list-style-type: none;
  /* border-bottom: 1px dotted #afafaf;
  padding: 7px 0 7px 7px; 
  margin: 10px; */
}
div#photo_navibereich a {
  padding: 0;
  text-decoration: none;
  color: black;
  font-family: Verdana, Arial,Helvetica,sans-serif;
}
/* Schritt 3 Linkzustände gestalten */ 
div#photo_navibereich ul a:hover, 
div#photo_navibereich ul a:focus {
  /* background: #c0c0c0 -30px; */
  border-bottom: 1px dotted #6c6c6c;
  color: black;
  text-decoration: none;
}
div#photo_navibereich ul a:active {
  background: #000000;
  color: white;
}

#photo_navibereich li.sie-sind-hier a { color:red; }



/* =======================================
   E N D E   D E S   S T Y L E S H E E T S
   ======================================= */