/* ---------------- Formatierungen ---------------- */

*{
	padding: 0;
	margin: 0;
	border: 0;
}
html, body {
	height: 100%;
	font: 10pt verdana, arial, sans-serif;
	line-height: 14pt;
	color: #666;
	background: #fff url(htgrnd.jpg) center top;
	text-align: center;
}

p {
	margin: 0;
	padding: 10px 0;
}

td { 
	font-size: 10pt; 
	font-family: verdana, arial, sans-serif; 
}

h1 {
	color: #666; 
	font-size: 12pt;
	font-family: verdana, arial, sans-serif; 
	font-weight: bold;
}

h2 {
	color: #666; 
	font-size: 10pt;
	font-family: verdana, arial, sans-serif; 
	font-weight: bold;
}

a:link { 
	color: #99bc00; 
	text-decoration: none; 
}
a:visited { 
	color: #99bc00; 
	text-decoration: none; 
}
a:hover { 
	color: #87a509; 
	text-decoration: none; 
}
a:active { 
	color: #87a509; 
	text-decoration: none; 
}

#marginal img {
	border: 5px solid #fff;
	outline: 1px solid #cecece;
	cursor: pointer;
}

#content img {
	border: 10px solid #fff;
	outline: 1px solid #cecece;
}

#mycarousel img {
	border: none;
	outline: none;
}




/* ---------------- Klassen ---------------- */

.skill {
	display:inline-block;
	width:110px;
}

.left {
	float: left;
	margin-right: 15px;
	margin-bottom: 15px;
}

.hinweis {
	font-weight: normal;
	font-size: 8pt;
}

.clear{
	clear: both;
}


/* ---------------- Formular ---------------- */

label { 
	display: inline-block; 
	width: 80px; 
}

form div { 
	margin-bottom: 10px; 
}

input:hover,
input:focus,
textarea:hover,
textarea:focus{
   outline:none;
   box-shadow:0 0 10px #99bc00;
   -moz-box-shadow:0 0 10px #99bc00;
   -webkit-box-shadow:0 0 10px #99bc00;
  
}

.field { 
	font-family: verdana, arial, sans-serif; 
	font-size: 8pt; 
	color: #666; 
	width: 280px; 
	border: 1px solid #666; 
	padding: 3px;
}

.button {
	background-color: #fff;
	border: 1px solid #99bc00;
	padding: 3px;
	color: #666;
}

fieldset { 
	padding: 10px; 
	border: 1px solid #99bc00; 
	width: 370px; 
}



/* ---------------- Referenzen Thumbnails ---------------- */

.thumb_rotkaeppchen { margin-top:124px; }
.thumb_rotkaeppchen-banner { margin-top:241px; }
.thumb_toshiba { margin-top:241px; }
.thumb_toshibawin { margin-top:240px; }
.thumb_sonus { margin-top:240px; }
.thumb_traumacenter { margin-top:241px; }
.thumb_camel { margin-top:241px; }
.thumb_schoening { margin-top:241px; }
.thumb_karger { margin-top:241px; }
.thumb_rohr { margin-top:241px; }
.thumb_apoggio { margin-top:241px; }
.thumb_hartmann { margin-top:241px; }
.thumb_kruhl { margin-top:241px; }
.thumb_amhain { margin-top:241px; }
.thumb_hasskarl { margin-top:240px; }
.thumb_otakuwelt { margin-top:241px; }
.thumb_croftarts { margin-top:241px; }
.thumb_c4dschach { margin-top:241px; }

/* ---- Safari und Chrome ---- */
@media screen and (-webkit-min-device-pixel-ratio:0) { 
.thumb_rotkaeppchen { margin-top:121px; } 
.thumb_rotkaeppchen-banner { margin-top:240px; }
.thumb_toshiba { margin-top:240px; }
.thumb_traumacenter { margin-top:240px; }
.thumb_camel { margin-top:240px; }
.thumb_schoening { margin-top:240px; }
.thumb_karger { margin-top:240px; }
.thumb_rohr { margin-top:240px; }
.thumb_apoggio { margin-top:240px; }
.thumb_hartmann { margin-top:240px; }
.thumb_kruhl { margin-top:240px; }
.thumb_amhain { margin-top:240px; }
.thumb_otakuwelt { margin-top:240px; }
.thumb_croftarts { margin-top:240px; }
.thumb_c4dschach { margin-top:240px; }
}

/* ---- IE7 fix ---- */ 
* + html .thumb_rotkaeppchen { margin-top:125px; } 
* + html .thumb_toshibawin { margin-top:241px; }
* + html .thumb_sonus { margin-top:241px; }
* + html .thumb_hasskarl { margin-top:241px; }

/* ---- IE6  fix ---- */
* html .thumb_rotkaeppchen { margin-top:125px; } 
* html .thumb_toshibawin { margin-top:241px; }
* html .thumb_sonus { margin-top:241px; }
* html .thumb_hasskarl { margin-top:241px; }



/* ---------------- Layout ---------------- */

/* -------- Container -------- */

#container{
	text-align: left;
  	position: relative;
  	min-height: 100%;
	height: auto !important;/* moderne Browser */
	height: 100%; /* IE */
	bottom: -1px; 
}

/* -------- Header -------- */

#header{
	height: 350px;
	background: url(htgrnd-header.gif) repeat-x center top;
}

#header-core {
	width: 800px;
	margin: 0 auto;
}

ul#navi {
	position: relative;
	top: 100px;
	left: 90px;
	list-style: none;
	width: 170px;
}

ul#navi li a {
	width: 170px;
	padding-bottom: 4px;
	text-decoration: none;
	color: #99bc00;
	font-weight: bold;
	line-height: 21pt;
}

ul#navi li a:hover {
	color: #87a509;
}

#slider {
	float: right;
	top: 100px;
	left: 340px;
	width: 420px;
	height: 130px;
}

/* -------- Main -------- */

#main {
	width: 800px;
	margin: 0 auto;
  	padding: 0 2em 60px 2em;
}

#content {
	padding: 0 57px 0 30px;
	margin: 0 0 50px 301px;
	border-left: 1px solid #ccc;
}

* html #content { /* IE6 fix */ 
	padding: 0 50px 0 30px;
}

#marginal {
	float: left;
	width: 205px;
	margin: 0 0 0 60px;
	padding: 0;
}

* html #marginal { /* IE6 fix */ 
	margin: 0 0 0 32px;
}

#preload {
	display: none;
}



/* -------- Footer -------- */

#footer {
	width: 100%;
	background: #a7c525 url(htgrnd-footer.jpg) repeat-x;
	position: absolute;
	bottom: 0;
	height: 20px;
	margin: 0;
	padding: 15px 0;
	color: #fff;
}

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

#footer a:hover {
	text-decoration: underline;
	color: #fff;
}

#footer-core {
	width: 800px;
	margin: 0 auto;
}

#copyright {
	margin: 0 0 0 60px;
}

#imprint {
	float: right;
	margin: -19px 55px 0 0;
	text-align: right;
}

* html #imprint { /* IE6 fix */ 
	margin: -19px 27px 0 0;
}

/*
clear: left;
padding: 0;
margin: 0;
background: #a7c525 url(htgrnd-footer.jpg) repeat-x;
color: #fff;
*/


/* -------------------------------- Browserfix-Templates -------------------------------- */

* html #div { /* ---- IE6 fix ---- */ 
z-index: -999;
}

* + html #div  { /* ---- IE7 fix ---- */ 
z-index: -999;
} 

@media screen and (-webkit-min-device-pixel-ratio:0) {	/* ---- Safari und Chrome ---- */
#div  { z-index: -999; } 
}