/* Reset */
body,h1,h2,h3,h4,p,a,form,ul,li,img,input,select,td,tr,table{
	margin: 0;
  padding: 0;
}

body{
	font-family: Arial, Verdana, Times, serif;
	background-color: #dadada;
  font-size: 10pt;
}

h1,h2,h3,h4,form,p,img,input,select,td,tr,table {
	padding: 3px;
  margin: 2px;
  }
/* Width of this is the overall width of the website

Adjust to your preferred width e.g. 800px, 930px, 1000px etc
*/
#container{
	margin: 0 auto;
	width: 1000px;
	/* für alle */
	height: 800px;
}
html>body #container { /* be nice to opera (&gekko) */
	height: auto;
	min-height: 800px;
}

#topBanner{
	float: right;
	width: 100%;
	height: 90px;
	overflow: hidden;
	margin-top: 0;
}

#logo{
	width: 300px;
	height: 60px;
	float: left;
	margin: 20px 0 0 0;
	text-decoration: none;
}

#logo img{
	border: 0;
	text-decoration: none;
	margin: 5px 0 0 0;
}

#searchArea{
	float: right;
	width: auto;
	height: auto;
	margin: 5px 0 0 0;
	text-align: center;
}

#searchArea tr{
	height: 25px;
}

#searchArea td, #searchArea tr, #searchArea table, #searchArea a, #searchArea p, #searchArea tbody{
	margin: 0;
	padding: 0;
}

#contentContainer{
	width: 100%;
	float: left;
	border-top: 0;
	border-bottom: 0;
	border-left: 1px solid #245B8E;
	border-right: 1px solid #245B8E;
	background-color: #ffffff;
	overflow: hidden;
	height: 450px;
}
html>body #contentContainer { /* be nice to opera (&gekko) */
	height: auto;
	min-height: 450px;
}


#contentArea{
	width: auto;
	margin: 10px;
	float: left;
	overflow: hidden;
}

/* Content */
#content{
	width: 100%;
	float: left;
	color: #000000;
	overflow: visible;
  margin-left:0px;
}
#leftNavigation{
	width: 200px;
	float: left;
	color: #000000;
	margin-left: 0px;
	overflow: visible;
}
#content2{
	width: 100%;
  float: right;
	color: #000000;
	overflow: visible;
  margin-left:0px;
	color: #000000;
  margin-left:205px;
}  
a, a:link, a:visited{
	color: #000000;
  font-weight: bold;
}
a:hover {
  text-decoration: none;
}

#headerContainer{
	float: left;
	width: 100%;
	height: 90px;
	background: url(images/headerContent.jpg) repeat-x;
}

#headerLeftPic{
	height: 90px;
	width: 10px;
	float: left;
	background: url(images/headerLeft.jpg) no-repeat;
}

#headerToolDetails{
	width: 990px;
	text-decoration: none;
	color: #FFFFFF;
 	position: relative;
	height: 90px;
	float: right;
	background: url(images/headerRight.jpg) no-repeat;
	right: -2px;
  background-position: right;

}

#headerToolDetails a, #headerToolDetails p, #headerToolDetails h1, #headerToolDetails h2, #headerToolDetails h3, #headerToolDetails h4, #headerToolDetails h5, #headerToolDetails h6{
	text-decoration: none;
	color: #FFFFFF;
  margin-top:5px;
}

#footerContainer{
	clear: both;
	float: left;
	width: 100%;
	height: 30px;
	background: url(images/footerContent.jpg) repeat-x;
	text-align: center;
}

#footerLeftPic{
	height: 30px;
	width: 10px;
	float: left;
	background: url(images/footerLeft.jpg) no-repeat;
}

#footerContent{
	float: left;
	width: auto;
	line-height: 30px;
	color: #FFFFFF;
	text-align: right;
}

#footerRightPic{
	position: relative;
	width: 500px;
	height: 30px;
	float: right;
	background: url(images/footerRight.jpg) no-repeat;
	right: -2px;
	text-align: right;
	line-height: 30px;
	font-size:7pt;
	color: #FFFFFF;
}


/* REUSABLE STYLES

textBoxStyleSearchArea:
Used in top right corner for search box and search dropDown.

Usage in HTML:
			<input type="text" class="textBoxStyleSearchArea" />
			<input type="submit" class="submitButtonStyle" />			
*/
.textBoxStyleSearchArea{
	width: 120px;
	height: 15px;
	border: 1px solid #6488A8;
	background-color: #FFFFFF;
	float: left;
	line-height: 15px;
	padding: 3px;
	margin: 0 5px 0 0;
	overflow: hidden;
}

.selectBoxStyleSearchArea{
	width: 128px;
	height: 21px;
	border: 1px solid #6488A8;
	background-color: #FFFFFF;
	float: left;
	line-height: 15px;
	padding: 3px;
	margin: 0 5px 0 0;
	overflow: hidden;
	padding-bottom: 2px;
}

.selectBoxStyleSearchArea:hover{
	cursor: pointer;
}


/* 
submitButtonStyle:
Used in top right corner for search button, but can be used for any other forms

It has a fixed size and should be used for forms.

Usage in HTML:
			<input type="submit" class="submitButtonStyle" />			
*/
.submitButtonStyle{
	border: 0;
	background: transparent url(images/inputButton.jpg) no-repeat;
	width: 70px;
	height: 20px;
	line-height: 20px;
	color: #FFFFFF;
	cursor: pointer;
	margin: 0 2px 0 2px;
}

.submitButtonStyle:hover{
	text-decoration: underline;
	cursor: pointer;
}

/* Footer Styles
Usage in HTML:
			<a class="footerTextStyle">footer text</a>
 */
a.footerTextStyle{
	color: #FFFFFF;
	font-size: 13px;
	text-decoration: none;
}

a.footerTextStyle:hover{
	text-decoration: underline;
}

/* Header Styles
Usage in HTML:
			<h3 class="toolsDetailsStyleWhite">header text</h3>
*/
.toolsDetailsStyleWhite{
	color: #FFFFFF;
	font-size: 100%;
	text-decoration: none;
}

.toolsDetailsStyleWhite:hover{
	color: #FFFFFF;
	font-size: 100%;
	text-decoration: underline;
}

/* Navigation Area 
Usage in HTML:
		<div id="navigationArea">
			<ul>
				<li><a href="index.html">Some Text</a></li>
				<li><a href="index.html">Some Text</a></li>
				<li><a href="index.html">Some Text</a></li>
				<li><a href="index.html">Some Text</a></li>
			</ul>
		</div>
		
CSS:

	Set Both widths seen in 1. and 2. below
	
	1. 	This is the overall navigation Area Container - not the actual buttons.  If you are using an explicit width in 2. e.g. 80px, 
		keep this width larger.
	2. 	This is the actual buttons and an explicit width e.g. 80px can be set or auto if you would like the buttons size to adjust based
		on their content.  Note: Setting width to auto does not display correctly in very old browsers such as IE6
*/

/* Overall Container of the navigation Area, not the actual buttons */
#navigationArea{
  display:none;
	margin:0px 2px;
	padding:10px;
	list-style:none;
  width:980px;
  background:#e3e3e3;
  font-size: 7pt;
  font-weight: bold;
}

#navigationArea ul {
  list-style:none;
	height: auto;
	float: left;

}

#navigationArea li{
	background:url(images/leftPicWhite.jpg) no-repeat left bottom;
	margin: 0 0 5px 2px;
	height: 25px;
  display: inline;
}

#navigationArea li a{
	line-height: 25px;
	background: url(images/rightPicWhite.jpg) no-repeat right bottom;
	text-decoration: none;
	color: #FFFFFF;
	margin: 0 0 0 2px;
	padding-left: 5px;
	padding-right: 10px;
  width: 120px;
	float: left;
}

#navigationArea li a:hover{
	text-decoration: underline;
}
#tools{
	margin:0px 2px;
	padding:0px;
	list-style:none;
  font-size:8pt;
}

#tools ul {
  list-style:none;
	height: auto;
	float: left;
}

#tools li{
	background:#113455;
	margin: 0 0 2px 2px;
	height: 25px;
  display: inline;
}

#tools li a{
	line-height: 25px;
  background:#113455;
	text-decoration: none;
	color: #FFFFFF;
	padding-left: 5px;
	padding-right: 5px;
	float: left;
  font-weight: bold;
}

#tools li a:hover{
  background:black;
}
#leftNavigation{
	float: left;
	width: 200px; /* 1. Adjust width - Keep larger than your width set in #navigationArea li a */
	height: auto;
	margin: 0;
	overflow: visible;
}

#leftNavigation ul{
	list-style-type: none;
	height: auto;
	float: left;
}

#leftNavigation li{
	background: url(images/leftPicWhite.jpg) no-repeat left bottom;
	margin: 0 0 5px 0;
	width: auto;
	height: 25px;
	overflow: hidden;
}

#leftNavigation  li a{
  width: 180px;
	line-height: 25px;
	background: url(images/rightPicWhite.jpg) no-repeat right bottom;
	text-decoration: none;
	color: #FFFFFF;
	display: block;
	margin: 0 0 0 2px;
	padding-left: 5px;
	padding-right: 10px;
	overflow: hidden;
	float: left;
  font-size:9pt;
}

#leftNavigation li a:hover{
	text-decoration: underline;
}
/* Grey area used in login page form and register page */
#signOnFormContainer{
	border: 1px solid #cfcfcf;
	background-color: #f9f9f9;
	float: left;
	padding: 20px;
	width: auto;
	height: auto;
}

/* Input boxes used in register and sign-on/login form, includes 10px space between each
Usage in HTML
	<input type="text" class="formtextboxstyle" />
*/
.formtextboxstyle{
	padding: 2px;
	width: 120px;
	border: 1px solid #6488a8;
	margin: 0 0 10px 0;
	display: block;
}

/* Style used for check box in sign-on/login form
Usage in HTML
	<input type="checkbox" class="formtextboxstyle" />
*/
.checkboxstyle{
	padding: 0;
	margin-right: 2px;
	margin-top: 5px;
	float: right;
	width: auto;
}

/* Small Button
This button changes its width based on content and is ideal for a single button to perform an action other
than a form.  Eg a single button to another page.

Usage in HTML :
			<div class="smallbuttonContainer">
				<div class="smallButtonLeftPic"></div>
				<div class="smallButtonContent"><a href="index.html">text of button here</a></div>
				<div class="smallButtonRightPic"></div>
			</div>
*/
.smallbuttonContainer{
	width: auto;
	height: auto;
	float: left;
}

.smallButtonLeftPic{
	height: 25px;
	width: 5px;
	background: url(images/smallButtonLeftWhite.jpg) no-repeat;
	float: left;
}

.smallButtonContent{
	height: 25px;
	width: auto;
	background: url(images/smallButtonContent.jpg) repeat-x;
	float: left;
	color: #FFFFFF;
}

.smallButtonContent a, .smallButtonContent p{
	color: #FFFFFF;
	text-decoration: none;
}

.smallButtonContent a:hover{
	text-decoration: underline;
}

.smallButtonRightPic{
	height: 25px;
	width: 5px;
	background: url(images/smallButtonRightWhite.jpg) no-repeat;
	float: left;
}

.signOutText{
	text-decoration: none;
	font-size: 13px;
	color: #000000;
}

.signOutText:hover{
	color: #000000;
	text-decoration: underline;
	font-size: 13px;
}

.greyContainer{
	display: block;
	width: 220px;
	margin: 20px auto 20px auto;
	padding: 10px;
	border: 1px solid #cfcfcf;
	background-color: #f9f9f9;
	font-size: 13px;
	color: #000000;
}

/*
Style used in the register page input boxes, but can be used for other input boxes

Usage in HTML:
		<input type="text" class="inputBoxStyle" />
*/
input.inputBoxStyle{
	padding: 2px;
	width: 120px;
	border: 1px solid #6488a8;
	margin: 5px;
}

/*
Style used in the register page drop down boxes, but can be used for other input boxes

Usage in HTML:
		<select class="selectStyle">
			<option value="someValue">Some Name</option>
			<option value="someOtherValue">Some Other Name</option>
		</select>
*/
select.selectStyle{
	width: 126px;
	border: 1px solid #6488a8;
	margin-left: 5px;
	padding: 2px;
}

#loginTextError{
	display: block;
	margin: 0 auto;
	padding: 3px;
	font-size: 11px;
	color: red;
	text-align: center;
	border: 1px solid red;
	background-color: #FFDFDF;
}

/*
Style used specifically for register button
*/
.submitButtonStyleRegister{
	border: 0;
	background: transparent url(images/inputButton.jpg) no-repeat;
	width: 70px;
	height: 20px;
	line-height: 20px;
	color: #FFFfFFF;
	cursor: pointer;
	margin: 5px 0 0 5px;
	padding-bottom: 2px;
}

.submitButtonStyleRegister:hover{
	text-decoration: underline;
	cursor: pointer;
}

/*
Style used specifically for sign on button
*/
.signOnButtonStyle{
	border: 0;
	background: transparent url(images/inputButton.jpg) no-repeat;
	width: 70px;
	height: 20px;
	line-height: 20px;
	color: #FFFFFF;
	cursor: pointer;
	padding-bottom: 2px;
	margin-top: 5px;
}

.signOnButtonStyle:hover{
	text-decoration: underline;
	cursor: pointer;
}

/*
Use to have black text with a underline, good for links or to highlight a particular area of text
*/
.linkUnderline{
	color: #000000;
	text-decoration: underline;
}