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

body {
		width: 100%;
		max-width: 100%;
		background-color: #fff; /* HG main*/
		font: 400 0.8em Geneva, Arial, Helvetica, sans-serif;
		color: #333;
		line-height: 1.4em;
}

h1 {
		margin-right: 30px;
		font: 800 2em Geneva, Arial, Helvetica, sans-serif;
		text-align:left;
}

h2 {
		margin-right: 30px;
		font: 600 1.4em Geneva, Arial, Helvetica, sans-serif;
		text-align: left;
}

h3 {
		margin-right: 30px;
		font: 600 1em Geneva, Arial, Helvetica, sans-serif;
		text-align: left;
		margin-bottom: -1px;
}

h4 {
		margin-right: 30px;
		font: 100 1em Geneva, Arial, Helvetica, sans-serif;
		text-align: left;
		margin-bottom: -15px;
}

a {
		color: #000000;
		text-decoration:none;
}

a:link { color: #000; } /* nicht besuchte Links */

a:visited { color: #000; } /* besuchte Links */

a:hover,
a:focus {
		text-decoration: none;
		color: #c00;
		background-color: #E9E9E9;
} /* gerade beruehrter Link */

a:active { color: #900; }

/* aktive Links */

#img { border: none; }

/* -----------------------
Textschatten - text-shadow
------------------------*/

.text-shadow { text-shadow: #c0c0c0 3px 3px 5px; }

/* -------------
Zeichenabstand
----------------*/	
.grossabstand { letter-spacing: 0.2em; }

#left {
		position: fixed;
		top: 0;
		left: 0;
		overflow: hidden;
		height:100%;
		width: 30%;
		text-align: right;
		background: #FFFFFF url(../images/layout/fade.png) no-repeat right; /* HG links*/
		img-border: none;
}

#left img { border: none; }

.left { text-align:right }

#outer {
		position: absolute;
		left: 0;
		top: 50%;
		width:100%;
		height: 240px;
		margin-top: -190px;
 text-align:right background-color:#FFF;
}

body > #left { position:fixed; }

/*----------------
Gaestebuch
-----------------*/

#guestbook {
		height: 95%;
		margin: 50px 5% 20px 38%;
		padding-top: 0px !important;
		overflow:auto;
		margin-right:50px;
		background-color:#FFF;
}

/*---------------------
Inhaltbox rechts
-----------------------*/
#main {
		height: 95%;
		margin: 100px 5% 20px 38%;
		padding-top: 0px !important;
		overflow:auto;
		margin-right:50px;
		background-color:#FFF;
}

#main img {
		border: none;
		margin-right: 5px;
}

#main img a:hover { border: #FF0000 solid 1px; }

#gallerycontainer a,
#bio a,
#main a { border-bottom:#CC0000 solid 1px }

span.title {
		display: block;
		margin: 0 0 5px 0;
		font: 600 1.1em Geneva, Arial, Helvetica, sans-serif;
		color: #fff;
}

span.red { color:#CC0000; }

span.black { color:black; }

span.white { color:#FFFFFF; }

span.gray { color: gray; }

span.hinweis {
		font-size:11px;
		color: gray;
}

span.courier_new { font-family:"Courier New", Courier, monospace; }

span.code {
		font-family:"Courier New", Courier, monospace;
		font-size:12px;
}

#quellcode a { text-decoration:none; }

#quellcode {
		border: gray solid 1px;
		padding: 15px;
		width: 440px;
}

a.nav {
		display: block;
		margin: 0;
		text-decoration: none;
		font: "Courier New", Courier, monospace;
		color:black;
		padding: 0 30px 3px 0;
}

a.nav:hover {
		color: #CC0000;
		background: #E9E9E9;
		text-decoration: none;
}

a.nav:active {
		color: #CC0000;
		background: #CCC;
		text-decoration: none;
}

.date {
		float: left;
		width: 2.0em;
		font: 600 1.3em "Courier New", Courier, monospace;
		padding-right: 5px;
		text-align: right;
		margin:20px;
}

div.main {
		margin-left: 2.9em;
		margin-bottom: 25px;
		padding: 0 30px 30px 5px;
		background: #fff;
		height: 500px;
}

img.main {
		float: right;
		margin: 10px;
		padding: 4px;
		border: solid 1px #2e2e2e;
}

a img.main:hover { background: #E9E9E9; }

/* ---------------
biocontainer
----------------*/

#biocontainer {
		width: 550px;
		overflow:auto;
}

#biobild { float:left; }

#bio {
		float:right;
		width: 300px;
		margin-right: 20px;
}

#pano { margin-left: -50px; }

#panorama { margin-top: -65px; }

/* --------------------------------
Bildercontainer
----------------------------------*/

div#portfolio {
		position: absolute;
		left: 50%;
		top: 50%;
		margin-left: -130px;
		margin-top: -290px;
		width: 550px;
		height: 350px;
}

div#gallerycontainer {
		margin:0px;
		padding:0px;
}

.gallerycontainer { position: relative; }

.thumbnail img {
		border: 1px solid white;
		text-align:center;
}

.thumbnail:hover {
		background-color:#CC0000;
		text-align:center;
}

.thumbnail:hover img {
		border: 1px solid white;
		text-align:center;
}

.thumbnail span { /*CSS fuer Grossbild*/
		position: absolute;
		height:350px;
		left: -1000px;
		visibility: hidden;
		color: black;
		text-decoration: none;
		text-align:center;
}

.thumbnail span img { /*CSS fuer Grossbild*/
		border-width: 0;
		padding: 2px;
		text-align:center;
}

.thumbnail:hover span { /*CSS fuer Grossbild*/
		visibility: visible;
		top: 113px; /* Firefox 95px IE 113px */
		left: -3px;
		text-align: center;
		z-index: 50;
}

/*--------------
zurueck/vor unten
------------------*/

#centrieren { text-align: center; }

/*----------------------------------
Startbild
----------------------------------*/

#startbild {
		position: absolute;
		left: 50%;
		top: 50%;
		margin-left: -150px;
		margin-top: -195px;
		width: 550px;
		height: 500px;
		text-align:left;
}

/*------------------------
kursbild
-----------------------*/

#kursbild {
		float: right;
		margin-right: 50px;
		padding: 15px 0 10px 25px;
}

/* ----------------------
kursinhalt
-----------------------*/

#kursinhalt { width: 400px; }

/*----------------------------------
navigation Inhalt Portfolio
----------------------------------- */
/* Root = Horizontal, Secondary = Vertical */

ul#navmenu {
		margin: 0;
		border: 0 none;
		padding: 0;
		width: 500px; /*For KHTML*/
		list-style-type:none;
		height: 24px;
		display:block;
}

ul#navmenu li {
		margin: 0;
		border: 0 none;
		padding: 0;
		float: left; /*For Gecko*/
		display: inline;
		list-style: none;
		position: relative;
		height: 24px;
}

ul#navmenu ul {
		margin: 0;
		border: 0 none;
		padding: 0;
		width: 160px;
		list-style: none;
		display: none;
		position: absolute;
		top: 24px;
		left: 0;
}

ul#navmenu ul:after /*From IE 7 lack of compliance*/ {
		clear: both;
		display: block;
		font: 1px/0px serif;
		content: ".";
		height: 0;
		visibility: hidden;
}

ul#navmenu ul li {
		width: 160px;
		float: left; /*For IE 7 lack of compliance*/
		display: block !important;
		display: inline; /*For IE*/
}

/* Root Menu */
ul#navmenu a {
		padding: 0 6px;
		float: none !important; /*For Opera*/
		float: left; /*For IE*/
		display: block;
		background: #fff;
		color: #000;
		font: 12px/22px Geneva, Arial, Helvetica, sans-serif;
		text-decoration: none;
		height: auto !important;
		height: 1%; /*For IE*/
		border-bottom:#FFFFFF solid 1px;
}

/* Root Menu Hover Persistence */
ul#navmenu a:hover,
ul#navmenu li:hover a,
ul#navmenu li.iehover a {
		background: #E9E9E9;
		color: #CC0000;
}

ul#navmenu ul ul,
ul#navmenu ul ul ul {
		display: none;
		position: absolute;
		top: 0;
		left: 160px;
}

/* Do Not Move - Must Come Before display:block for Gecko */
ul#navmenu li:hover ul ul,
ul#navmenu li:hover ul ul ul,
ul#navmenu li.iehover ul ul,
ul#navmenu li.iehover ul ul ul { display: none; }

ul#navmenu li:hover ul,
ul#navmenu ul li:hover ul,
ul#navmenu ul ul li:hover ul,
ul#navmenu li.iehover ul,
ul#navmenu ul li.iehover ul,
ul#navmenu ul ul li.iehover ul { display: block; }

ul { list-style-image: url(../images/layout/punkt.png); }

ul#navmenu a:active {
		color: #CC0000;
		background: #CCC;
		text-decoration: none;
}

/*---------------------------
flags
---------------------------*/

#flags {
		margin:0px;
		padding:0px;
		align:center;
}

#flags img {
		border:none;
		margin: 1px;
}

/*---------------------------
nicht anzeigen
---------------------------*/	  
#verbergen,
#sitemap {
		position: absolute;
		top: -5000px;
		left: -5000px;
		width: 0;
		height: 0;
		overflow: hidden;
		display: inline;
}