/* CSS Document */

/*------------------ POSITIONING DIVS -----------------------*/


body {
background-color: #d2d3d5;
font-family: Verdana, Arial, Helvetica, sans-serif;
}

#container {
position: absolute;
top: 0;
left: 0;
width: 1024px;
text-align: left;
}

#masthead {
position: absolute;
top: 0;
left: 0;
width: 1024px;
height: 100px;
background-image: url(image/gradient.jpg);
background-repeat: repeat-y;
}

#detail {
position: absolute;
top: 100px;
left: 0;
width: 1024px;
min-height: 460px; height: auto !important; /*this line for firefox (and IE7) etc */
height: 460px; /* this line for IE6 */
background-color: #FFFFFF;
}

	#menu {
	position: relative;
	float: left;
	width: 180px;
	min-height: 460px; height: auto !important; 
	height: 460px; 
	}
	
	#textarea {
	position: relative;
	float: left;
	padding: 80px;
	width: 682px;
	border: 1px solid #cccccc;
	min-height: 460px; height: auto !important; 
	height: 460px; 
	}
	
.clear {
clear: both; /* use this div to specify where floating elements should end. Like a section break */
}


#footer {
position: relative;
width: 1024px;
height: 50px;
background-image: url(image/gradient.jpg);
background-repeat: repeat-y;
}

/*------------------ MENU styling -----------------------*/

#menu ul {
list-style: none;
margin: 0;
padding: 0;
padding-top: 80px;
}


#menu a {
text-decoration: none;
display: block;
}


#menu h2 {
margin: 0;
}

#menu h2 a {
font-family: Arial, Helvetica, sans-serif;
font-size: 9pt;
text-align: right;
color: #333333;
margin-right: 35px;
padding-top: 20px;
font-style: normal;
padding-bottom: 3px;
text-transform: lowercase;
}

#menu ul li {
border-bottom: 1px solid #CCCCCC;

}

#menu h2 a:hover  {
text-decoration: none;
padding-bottom: 1px;
border-bottom: 2px solid #f15e18;

}

/*------------------ Column layout -----------------------*/

.layout1 {
float: left;
width: 200px;
}

.layout2 {
float: right;
width: 470px;
}


/*------------------ TYPOGRAPHY -----------------------*/

a:link {text-decoration: underline; color: #333333;}
a:visited {text-decoration: underline; color: #333333;}
a:active {text-decoration: underline; color: #333333;}
a:hover {text-decoration: underline; color: #000000;}

#footer a:link {text-decoration: none; color: #666666;}
#footer a:visited {text-decoration: none; color: #666666;}
#footer a:active {text-decoration: none; color: #666666;}
#footer a:hover {text-decoration: none; color: #000000;}

p {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 8pt;
line-height: 12pt;
color: #333333;
margin-top: 0;
margin-bottom: 20px;
}

h1 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12pt;
line-height: 12pt;
color: #bbbbbb;
font-weight: normal;
margin-top: 10px;
margin-bottom: 18px;

}

#textarea h2 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 9pt;
line-height: 10pt;
color: #333333;
font-weight: bold;
background-image: url(image/redarrow.jpg);
background-repeat: no-repeat;
background-position: left;
padding-left: 12px; /* to allow for red arrow */
margin-top: 5px;
margin-bottom: 18px;
}

#footer p {
float: right;
font-size: 7pt;
color: #666666;
margin-top: 5px;
}


hr {
border: none 0;
border-top: 1px solid #CCCCCC;/*the border*/
height: 1px;/*whatever the total width of the border-top and border-bottom equal*/
margin-bottom: 10px;
}