/* EWP  Stylesheet  */

body, html {
	margin:0px;
	padding:0px;
	font-family:"Verdana", Arial, Helvetica, sans-serif;
	text-align:center;
	height:100%;
	font-size:90%;
	background-color:#000066;
}
/* commented backslash hack v2 \*/ 
html, body { 
	height:100%; 
} 
* html #wrapper { 
	height:100%; 
}
/* end hack */
/* Note that position:relative; was added to make sure
 * elements stay within the wrapper when absolute positioned
 */
#wrapper {
	width:770px;
	text-align:left;
	min-height:100%;
	position:relative;
	background: #FFFFFF;
	margin: 5px auto -59px;
}
#header {
	width:100%;
	height:100px;
	border-bottom:none;
	background:url(../images/logo.jpg) no-repeat left top;
}
/* The logo top left */
#logo {
	position:absolute;
	top:5px;
	left:610px;
	height:52px;
	width:150px;
	font: 9px Arial, Helvetica, sans-serif;
	color: #FF0000;
	background: no-repeat;
}
#logo img {
	padding-right: 5px;
	padding-left: 10px;
}
#logo a {
	color:#CC0000;
	font-size:9px;
	margin:0px;
	margin-top:5px;
}
#logo h3 {
	color:#FF1C1C;
	font-size:20px;
	margin:0px;
	margin-top:5px;
}
#logo h4 {
	margin-top:0px;
	font-size:10px;
	font-weight:normal;
	text-align:right;
	padding-right:15px;
	padding-left:5px;
}
/* the blue bar right under the header, it holds the menu buttons */
#menu_holder {
	height:25px;
	width:100%;
	background:url(../images/menu.jpg) repeat-x;
}

/* The actual position of the menu, note the margin to the left */
#menu {
	margin-left:245px;
}
/* I floated the links to the left because they 
 * became block level elements 
 */
#menu a {
	display:block;
	float:left;
	height:15px;
	/* Top Right Bottom Left (TRouBLe) */
	padding:5px 20px 5px 20px;
	color:#0066CC;
	font-weight:bold;
	font-size:10px;
	margin-right:0px;
	text-decoration:none;
}
#menu a:hover {
	background-color:#CC0000;
	color:white;
}
#dateformat {
	font:9px Arial, Helvetica, sans-serif;
	color: #003399;
	letter-spacing:.2em;
	padding-top:5px;
}

#news {
	float:left;
	width:245px;
	background: #FFFFFF;
	padding: 0px;
	
}
/* Note that I only style the h2 tags that are inside the news section 
 * The folder image is added automatically every time you use an h2 tag 
 */
#news h2 {
	padding-left:20px;
	font-size:14px;
	font-weight:bold;
	color:#CC0000;
	margin-top:20px;
	/* the clear is added to make sure the Read More 
	 * links do not come next to the date
	 */
	clear:both;
}
#news p {
	color:#666;
	font-size:90%;
	padding-left: 20px;
}
#news   imgR {
	padding-left:20px;
	margin-top:20px;
	float: right;
	border-color: #00FF00;
}


a.newslink {
	float:right;
	color:blue;
	font-weight:bold;
	text-decoration:none;
	font-size:90%;
	margin-top:5px;
	border-bottom:1px dashed blue;
}



a.newslink:hover {
	color:#0000FF;
	border-bottom:1px dashed #0000FF;
}
/* Photos of projects */
#welcome {
	border-top:0px;
	height:541px;
	width:525px;
	float:left;
	margin-left:0px;
	padding-left:0px;
	font-size:90%;
	background: #FFFFFF url(../images/top.jpg) no-repeat;
}
#welcome h1 {
	color:#333333;
	text-align:left;
	font-size:18px;
	margin-top:10px;
	padding-left: 25px;
	line-height: 85%;
	font-weight: normal;
}
#welcome hr {
	color:#CC0000;
	text-align:left;
	padding-left: 25px;
	margin-left: 25px;
	font-weight: normal;
	width: 300px;
}
#welcome ul {
	color:#666666;
	text-align:left;
	font-size:12px;
	margin-top:10px;
	padding-left: 25px;
	margin-left: 25px;
	font-weight: normal;
	width: 320px;
	list-style: square;
	line-height: 150%;
}
#welcome h2 {
	border-top:0px;
	margin-left:0px;
	padding-left:25px;
	font: italic 16pt/19pt "Times New Roman", Times, serif;
	color: #CC0000;
	margin-top: 15px;
	text-indent: -10px;
}



#main {
	height:349px;
	width:525px;
	float:left;
	background: url(../images/main.jpg) no-repeat;
	
}
#clearfooter {
	height:60px;
	clear:both;
}
.bar {
	border:1px solid red;
	height:23px;
	float:left;
	width:442px;
	margin-left:30px;
	margin-top:3px;
	background: url(../images/redbar.gif) repeat-x;
}
.column {
	float:left;
	width:200px;
	margin-left:30px;
	margin-top:-20px;
	color:#666;
	font-size:90%;
	font-weight:normal;
}
.column img {
	margin-left:15px;
}

.column h4 {
	font-weight:bold;
	margin:0px;
	color:white;
	text-align:center;
	margin-bottom:20px;
	font-size:12px;
}
.column ul li a {
	color:blue;
}
.column ul li a:hover {
	color:#FFA400;
}
#footer {
	width:770px;
	height:24px;
	border-top:25px solid #CC0000;
	margin-left:auto;
	margin-right:auto;
	background-color:#000066;
	color:#CCC;
	font-size:10px;
	padding-top:10px;
	clear:both;
}
#footer a{
	color:#CCFFCC;
}
#pageMain {
	border-top:0px;
	width:525px;
	float:left;
	padding-left:0px;
	font-size:90%;
	background: #FFFFFF no-repeat;
}
#pageMain p {
	border-top:0px;
	margin: 10px 10px 10px 30px;
	width: 442px;
}
#pageMainbkg {
	border-top:0px;
	width:525px;
	float:left;
	margin-left:0px;
	padding-left:0px;
	font-size:90%;
	background: #FFFFFF url(../images/bluPrint.jpg) no-repeat left;
}
#pageMain h4 {
	border-top:0px;
	margin: 10px 10px 10px 30px;
	width: 442px;
	font-size: 16px;
}
#pageMain ul {
	color:#666666;
	text-align:left;
	font-size:12px;
	margin-top:10px;
	padding-left: 25px;
	margin-left: 25px;
	font-weight: normal;
	list-style: square;
	line-height: 125%;
	margin-right: 15px;
}
