html,body , #body{
margin:0 auto;
background-position: center top;
background-repeat: repeat-x;
background-color: #000000;
height:100%;
background-image: url(images/bgFade.jpg);

}


#container {
position:relative;
text-align: center;
width: 100%;
background-repeat: no-repeat;
margin: 0 auto;
padding:0;
min-height:85%;	
}


#footer {
border-top: 0px solid;
border-top-color:#232323;
width: 100%;
background-position: top;
background-repeat: repeat-x;
text-align: center;
background-image:url(images/bgFade.jpg);
background-repeat:repeat-x;
background-position:top;
padding-top: 1px; height:120px;
}

.spacerBar{ height:10px;	border-top: 3px solid  ; border-top-color:#4D4D4D; clear:both; width:998px; margin:0 auto} 
.spacerBarText{ height:1px; margin:3px 0 6px 0;	border-bottom: 1px dashed  ; border-bottom-color:#666666;} 



h1,h2,h3{
margin: 0;
padding:0;
font-weight: normal;
}

form {margin: 0; padding:0; } 


ul{
padding:0; 
margin: 0;
list-style:none;
}

li{
margin:0px 0px;
list-style:none; 
}


.button1{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #FFFFFF;
border:none;
background-color: #141543;
margin:0; padding:2px;  
} 





form  {
margin: 0;
padding: 0;
}




#top{
position:relative;
text-align: left;
margin:0 auto ;
height: 110px;
width: 998px;

}

#strap{ position:absolute; left:0; top:0} 
#strap a{
color: #004882;
}

#logo
{
top: 13px;
left: 0px;
position: absolute;
z-index: 0;
width: 356px;
text-align: left;
}

#logo img
{
} 

#homePic{
width: 996px;
height: 95px;
background-position: 0px;
background-repeat: no-repeat;
padding: 0px;
border: 0px solid;
border-color: #FFFFFF;

}



#NavTop {

position: absolute;
right: 0px;
bottom:  0px; 
}

#NavTop ul {
margin: 0;
padding: 0;
text-align: left;
list-style-type: none;
}

#NavTop li {
list-style-type: none;
display: inline;
margin: 0 ;
padding: 0 ; 

}

#NavTop a {
display:block;
float:left;
padding: 8px 4px 8px 4px;  
color: #CCCCCC;
text-decoration:none;
font-size: 11px; font-weight:bold;
font-family: Arial, Helvetica, sans-serif;
text-transform: uppercase;	
}

#NavTop a:hover  {
color: #fff; background-color:#4D4D4D; 
text-decoration: none;  
} 

#NavTop a.navSelected {
color: #E64111; background-color:#4D4D4D;
text-decoration: none;  
} 


#contentWrapper
{
text-align:left;
clear: both;
margin:0 auto;
min-height:360px;
height:auto!important;
height:360px;
margin-top: 20px;
width: 998px;
}




#contentLeft{
float:left;
width: 430px;
text-align: left;
}

#contentLeft #pageImage{ border:2px solid #999 }


#contentRight {
border:0;
width: 560px;
float: right;
text-align:left;
}

#contentRight  p{ margin:0;padding:4px 0 4px 3px  }

#contentRight  a{ text-decoration:underline; color:#fff; font-weight:bold}
#contentRight  a:hover{ text-decoration:underline; color:#E64111;  }

#contentRight td {padding:5px}

#contentRight ul{
padding:0;margin:5px  ;
list-style:none; 
text-align: left;
}

#contentRight ul li{
padding:2px 0px 2px 15px;
margin: 0 0 0 0 ;  
display: block;
background-image:url(images/tick.png);
background-repeat:no-repeat;
background-position:left 5px;
}

/* project details info */

#projectDetails strong{  font-size:14px; color:#FFFFFF;  } /* venue, project details etc auto format titles*/
#projectDetails p, #projectDetails li{  font-size:12px ;color:#e1e1e1;}
#projectDetails #mediaWrapper {
padding: 6px; width:400px; height:300px;
border-bottom: 0px dashed #333;
} 

#projectDetails #contentRight li{
padding: 3px 0px 3px 15px;
margin: 0 0 0 0 ;  
display: block;
background-image: url(images/arrOn.gif);
background-repeat:no-repeat;
background-position:left 6px;
font-size:11px; 
}

#projectDetails #detailsImage{
border:3px solid;
border-color: #333333;
}

#videoContainer{  height:300px; width:400px;}  


#siteBy{
margin-right: 15px;
font-size: 9px;
color: #0B0B0B;
text-align: right;
}





#NavSub {
margin: 50px auto 0px auto;
text-align: left;
width: 998px; padding-left:10px;
}

#NavSub UL {
margin:0; padding:0;	 
margin-right: 25px;
list-style-type: none;
}

#NavSub LI { margin-right:4px;}

#NavSub LI, #NavSub li A  {
DISPLAY: inline;
font-size: 12px;
color: #FFFFFF;
list-style-type:none ; 
}




#NavSub A:hover {
text-decoration:none
}

#NavSub .footerSE a{
display: block;
font-size: 12px;
text-transform: uppercase;
margin: 10px 0px;
}

#NavSub  #essaLogo {
display:block;
text-align:right;
margin: -30px 0 0 0;
}

#NavSub  #siteBy {
display:block;
text-align:right;
margin: 20px 0 20px 0;
}

#NavSub  #siteBy a{
color: #666666;
font-size:11px
}

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



/*######## universal ########### */
img { border:0;}
.floatRight{float:right; }

.floatLeft{float:left; }

.clearFloat{
clear:both;
height:0px;
margin:0px; padding:0px;
}

.TAR{ text-align:right}
.TAL{ text-align:left}
.TAC{ text-align:center}

.centred , .centered{margin:0 auto}

.m3{margin:3px}
.m5{margin:5px}
.m10{margin:10px}

.mT3{margin-top:3px}
.mT5{margin-top:5px}
.mT10{margin-top:10px}
.mT15{margin-top:15px}
.mT20{margin-top:20px}

.mB3{margin-bottom:3px}
.mB5{margin-bottom:5px}
.mB10{margin-bottom:10px}
.mB25{margin-bottom:25px}

.mL3{margin-left:3px}
.mL5{margin-left:5px}
.mL10{margin-left:10px}
.mL15{margin-left:15px}
.mL20{margin-left:20px}

.mR3{margin-right:3px}
.mR5{margin-right:5px}
.mR10{margin-right:10px}
.mR15{margin-right:15px}
.mR20{margin-right:20px}


.p3{padding:3px}
.p5{padding:5px}
.p10{padding:10px}

.pT3{padding-top:3px}
.pT5{padding-top:5px}
.pT10{padding-top:10px}

.pB3{padding-bottom:3px}
.pB5{padding-bottom:5px}
.pB10{padding-bottom:10px}

.pL3{padding-left:3px}
.pL5{padding-left:5px}
.pL10{padding-left:10px}
.pL15{padding-left:15px}
.pL20{padding-left:20px}

.pR3{padding-right:3px}
.pR5{padding-right:5px}
.pR10{padding-right:10px}
.pR15{padding-right:15px}
.pR20{padding-right:20px}
.b0{border:none; border:0px;}
.p0{ padding:0px;}
.m0{ margin:0px;}



.bfs{border:1px solid  #D6D6D6;}
.bfd{border:1px dotted #D6D6D6;}
.bfdd{border:1px dashed #D6D6D6;}

.bfdd{border:1px dashed #D6D6D6;}
.bbd{
border-bottom : 1px dotted #666666;
}
.bbs{ border-bottom : 1px solid #D6D6D6;}
.bbdd{ border-bottom : 1px dashed #D6D6D6;}

.bts{ border-top : 1px solid #D6D6D6;}
.btd{ border-top : 1px dotted #D6D6D6;}
.btdd{ border-top : 1px dashed #D6D6D6;}


.bbr{border:1px solid #ff0000;}
.bfr{border:1px dotted #ff0000;}
.bfrdd{border:1px dashed #ff0000;}

.w10{ width:10px}
.w20{ width:20px}
.w25{ width:25px}
.w50{ width:50px}
.w75{ width:75px}
.w100{ width:100px}
.w150{ width:150px}
.w200{ width:200px}
.w250{ width:250px}
.w275{ width:275px}
.w300{ width:300px}
.w325{ width:325px}
.w350{ width:350px}
.w400{ width:400px}
.w450{ width:450px}
.w500{ width:500px}
.w550{ width:550px}
.w600{ width:600px}
.w650{ width:650px}
.w700{ width:700px}
.w725{ width:725px}
.w750{ width:750px}
.w800{ width:800px}
.w850{ width:850px}
.w900{ width:900px}
.w950{ width:950px}

.h5{ height:5px}
.h10{ height:10px}
.h20{ height:20px}
.h25{ height:25px}
.h50{ height:50px}
.h75{ height:75px}
.h100{ height:100px}

.bgcCCC  {background-color:#ccc}
.bgcWHITE  {background-color:#fff}
.bgcF1  {background-color:#f1f1f1}
.bgcF7 {background-color:#f7f7f7}
.bgcBLACK  {background-color:#000}
.bgcRED  {background-color:RED}
.bgc999  {background-color:#999}

a:hover {
text-decoration: underline; 
}

.block{ display:block}


/* slider */

#sliderHandle{
cursor: pointer;
position: absolute;
top: 1px;
width:85px;
background-image: url(images/sliderBtn.png);
background-position: center top;
background-repeat: no-repeat;
height: 26px;
} 

#sliderWrapper{
clear:both;  
height:20px;
margin: 0px 0px 20px 0px;
}
#sliderTrack{
margin-top: 0px;
position:relative; 
/*  background-color:#333; border:1px solid #ccc;*/
width:100%;
background-image:url(images/sliderTrack.png);
background-repeat:no-repeat;
height:20px;
}

#stopperL{ position:absolute; left:0px; top:0; height:20px ;width:25px; text-decoration:none }
#stopperR{position:absolute; right:0px; top:0; height:20px ;width:25px; text-decoration:none }
/* projects */

#carouselWrapper{
width: 998px;
overflow-y: hidden;overflow-x: scroll;
height: 130px; position:relative;
}

#carouselList {
margin: 0;
padding: 0;
list-style-type: none; 
margin-bottom:10px; 
text-align:left; position:relative;
}

#carouselList .carouselItems {
float:left; position:absolute; top:0;
padding: 0; height:115px;
width: 125px;
text-align: center;
border: 2px solid;
border-color: #252525;
}

#carouselList #carouselSelected{ border-color: #999;}

#carouselList  img { margin:7px 0 ;  } 

#carouselList  li a{
font-size: 11px; 
margin: 0px;
color: #ccc; display:block
}






/* FEATURED home pg */
#projectsFeatured{
background-color: #000;
clear: both;
height:220px;
width: 998px;
border-top:0px solid #333;
background-image: url(images/featProjBg.png);
background-position: top;
background-repeat: no-repeat;
position: relative;
}


#projectsFeatured h4{
position:absolute; font-size:11px; color: #999;
left: 16px;
top: 6px;
} 
#projectsFeatured ul {
margin: 0px 0 0 20px;
padding: 0;
list-style-type: none;   
}

#projectsFeatured ul li{
float: left;
margin: 35px 10px 0px 0px;
padding: 0 10px 0 10px;
width: 215px;
text-align: left;
border-right: 0px dashed;
border-right-color: #333333;
list-style-type: none;
}

#projectsFeatured ul .last{ border:none; padding-right:0px; margin-right:0px}

#projectsFeatured ul li h2 {
color:#1C7C95;
display:block;
font-size:12px;
font-weight:bold;
margin: 5px 0 6px 0;
font-family:Arial, Helvetica, sans-serif;
}

#projectsFeatured ul li h2 span { /* hdn*/
color:  #2E2E2E;
font-size: 8px;
}
#projectsFeatured ul li img {
margin-top:10px
}

#projectsFeatured ul li .text{
font-size: 11px;
display: block;
padding: 0px;
margin: 0px;
color: #fff;
text-align: left;
height: 45px;

}

#projectsFeatured ul li .readMore {
height:15px; line-height:15px;
text-align: right;
color: #E64111;
font-size: 10px; font-weight:bold; text-transform:uppercase;
margin-top: -16px;
padding-right:10px; display:block
} 




/* forms for login and register etc - check all forms for change effects*/

.formWrapper { /* div*/
text-align:left;
margin:0;
padding:0;
margin: 10px 0px 10px 0px;


}

.formWrapper form, .loginWrapper form { /* form */
padding:5px;
margin:0px;
text-align:left;
margin-left: 6px;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
color: #333333;
border:2px dashed;
border-color: #333333;

}




.formWrapper .headers , .loginWrapper .headers{
font-size: 12px;
font-weight: bold; font-style:italic;
text-transform: uppercase;
margin:3px 0px 0px 0px;
clear:both;
background-color: #000000;
padding:6px 4px 6px 8px;
color: #FFFFFF;
}
.rows {
margin:10px 0px 0px 25px; clear:both
}
.labels{
display: block;
font-size: 11px;
font-family: Arial, Helvetica, sans-serif;
color: #CCCCCC;
} 


.inputs{
width: 245px;
border: 2px solid #999999;
padding:1px;
height:17px; 
background-color: #CCCCCC;
color:#333333;
font-family: Arial, Helvetica, sans-serif;	font-size: 12px;	color: #333333;
}

.inputsErr{ border-color:#ff0000}
.inputsOver { border-color:#999999; background:#f1f1f1} 


/*.inputsDD {
width: 231px;
border: 2px solid #ccc;
margin-bottom:2px;
padding:2px;
background:#fff;
background-color: #FFFFFF;
font-family: Arial, Helvetica, sans-serif;	font-size: 11px;	color: #333333;
}



.inputsDDErr  {
border: 2px solid #ff0000;
background-color: #FF0000;
color: #F0F0F0;
} 
.inputsDDOver {
border: 2px solid #e3e3e3; 
background-color: #fff;
color: #333;
} 
*/


.formWrapper .lastRow {
clear: both;
margin-bottom: 16px;
text-align:right;	
margin-top: 5px; margin-right:28px;
}


.formButton {
background-color: #333333;
color: #FFFFFF;
font-size: 10px;
font-weight: bold;
border: 0px;border: 2px solid #333333;
padding: 3px;
margin-left: 10px;
margin-top: 15px;
font-family: Arial, Helvetica, sans-serif;
}

/*######## eo forms ########### */