/*CSS - Styleguide*/

/*
	http://www.weldingpeak.de/
   	css styles
   
   	Copyright 2008, Markus Spiske
   	http://www.temporausch.com
*/

/*------------------general styles------------------*/
html, body, div, p, h1, h2, h3, ul, ol, span, a, table, td, form, img, li {
	margin: 0;
	padding: 0;
	color: #557580;
}

body {
	font: 12px/155% Helvetica, Arial, Verdana, sans-serif;
	text-align: center;
}

h1 {
	font-family: Helvetica, Arial, Verdana, sans-serif;
	font-size: 14px;
	font-weight: bold;
	margin-bottom: 10px;
	color: #e06d19;
	text-transform: uppercase;
}

h2 {
	font-family: Helvetica, Arial, Verdana, sans-serif;
	font-size: 12px;
	font-weight: bold;
	margin-top: 10px;
	margin-bottom: 3px;
	color: #557580;
}

a.orange:link, a.orange:visited, a.orange:active {
	font-size: 12px;
	font-weight: normal;
	color: #e06d19;
	text-decoration: underline;
}

a.orange:hover {
	font-size: 12px;
	font-weight: normal;
  	color: #557580;
  	text-decoration: none;
}

a.footer:link, a.footer:visited, a.footer:active {
	font-size: 11px;
	font-weight: normal;
	color: #fff;
	text-decoration: underline;
}

a.footer:hover {
	font-size: 11px;
	font-weight: normal;
  	color: #fff;
  	text-decoration: none;
}

a img, a:hover img {
	border: none;
}

.indent_box {
	padding-left: 25px;
}

hr {
	border:none;
	width:100%;
  	color:#d5c89a;
  	background-color:#d5c89a;
 	height:1px;
 	margin-bottom:15px;
}

.clear {
	clear: both;
}

/*------------------scrollbar------------------*/
.jScrollPaneContainer {
	position: relative;
	overflow: hidden;
	z-index: 1;
}

.jScrollPaneTrack {
	position: absolute;
	cursor: pointer;
	right: 0;
	top: 0px;
	height: 100%;
	background: #9ebdc8;
}

.jScrollPaneDrag {
	position: absolute;
	background: #557580;
	cursor: pointer;
	overflow: hidden;
}
			
.holder {
	float: left;
	margin-top: 10px;
}

.scroll-pane {
	width: 450px;
	overflow: auto;
	float: left;
	height: 260px;
}		
		
/* IE SPECIFIC HACKED STYLES */
	* html .osX .jScrollPaneDragBottom {
	bottom: -1px;
}
/* /IE SPECIFIC HACKED STYLES */

.higlight {
    height: 21px;
    color: #fff;
    background-color: #ff00ff;
}

/*------------------container------------------*/
#container {
	position: absolute;
  	left: 50%;
  	top: 50%;
  	width: 880px;
  	height: 646px;
  	margin-left: -440px; /* half of width */
  	margin-top: -323px;  /* half of height */
}

/*------------------header------------------*/
#header {
	width: 880px;
	height: 200px;
}

/*-------------------navi-------------------*/

#navi { 
	float: left; 
	margin-top: 43px; 
}

ul {
    list-style-type: none;
    margin:	0;
}
   
li.normal {
    width: 122px;
    margin-right: 1px;
    float: left;
    text-align: center;
}

li.normal a {
    height: 21px;
    text-decoration: none;
    color: #fff;
    display: block;
    background-color: #557580;
    padding-top: 7px;
    /*border: 1px solid #557580;*/
}

li.normal a:hover {
    height: 21px;
    color: #fff;
    background-color: #e06d19;
}

li.highlight {
    width: 122px;
    margin-right: 1px;
    float: left;
    text-align: center;
}

li.highlight a {
    height: 21px;
    text-decoration: none;
    color: #fff;
    display: block;
    background-color: #e06d19;
    padding-top: 7px;
    /*border: 1px solid #557580;*/
}

li.highlight a:hover {
    height: 21px;
    color: #fff;
    background-color: #557580;
}

/*------------------content------------------*/
#content_frame {
	width: 880px;
  	float: left;
}

#content {
	width: 450px;
	padding-top: 20px;
	padding-left: 20px;
	text-align: left;
	float: left;
}

#content_input {
	padding-left: 20px;
	text-align: left;
	float: left;
}

#pic {
	width: 388px;
	float: right;
	text-align: left;	 		
}

/*------------------footer------------------*/
#footer	{
	width: 880px;
	padding-top: 20px;
	height: 35px;
	float: left;
  	background: url(../img/bg_footer.gif) no-repeat;
  	font-size: 11px;
}

#footer_left {
  	color: #fff;
	float: left;
	margin-left: 20px;
	width: 600px;
	text-align: left;	 		
}

#footer_right {
	float: right;
	margin-right: 20px;
	text-align: left;	 		
}