/*
Essentials CSS
AUTH: Kain Balzary
DATE: July 2010
NOTES:

*/

/* #######################
   base reset + basics
   ####################### */
 html,  body,  div,  span,  object,  iframe,
 h1,  h2,  h3,  h4,  h5,  h6,  p,  blockquote,  pre,
 a, abbr,  acronym,  address,  big,  cite,  code,
 del,  dfn,  em,  font,  img,  ins,  kbd,  q,  s,  samp,
 small,  strike,  strong,  sub,  sup,  tt,  var,
 dl,  dt,  dd,  ol,  ul,  li,
 fieldset,  form,  label,  legend,
 table,  caption,  thead,  tr,  th,  td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
}

/*########################
Layout and Structure 
########################## */
/* This controls the layout positioning and design images*/
/* For the Home page, #MainContent is customised to be thinner to allow for #SideContentRight. #wrapper and other background image structural divs have different images loaded. This is acheived with <style> on the home page itself */

body 			{background:#E3E4E4; text-align:center}

#Header			{background:#E3E4E4 url(images/background2.png) top center repeat-y; }

#Logo a			{width:280px; height:125px; position:absolute; top:30px; left:50%; margin-left:-480px; overflow:hidden; text-indent:-5000px; color:transparent; }
#NavPrimary		{width:400px; height:30px; position:absolute; top:142px; left:50%; margin-left:80px; }
#HeaderImage	{width:960px; /* height:366px;*/ margin:0 auto;}
#HeaderImage img{padding-top:181px;}

/*Wrapper is the first div without absolute positoining*/
#Wrapper		{margin:0px auto !important; width:1000px; text-align:left; background:#E3E4E4 url(images/mainBG.png) top center repeat-y; padding-top:80px;}

 #SideContent	{float:left; width:159px; margin-left:86px; padding-bottom:50px; }

 #MainContent	{float:right; width:620px; margin-right:100px; padding-bottom:50px; }

#Footer			{clear:both; margin:0px auto; width:100%; background:#E3E4E4 url(images/footer.png) center top no-repeat; text-align:right; padding:120px 0px 80px 0; position:relative;}



/*########################
Core page elements
########################## */
#homeleft {float:left; width:540px; position:absolute; left:50%; margin-left:-450px; text-align:left}
#homeright {float:right; width:320px; position:absolute; left:50%; margin-left:133px; margin-top:36px;}
#mainpageflashreplaceme { height:317px;}


	/* jQuery lightBox plugin - Gallery style */
	#gallery {
		margin-top:20px;
 
	}
 	#gallery img {
		border: 2px solid #eee;
		border-width: 5px 5px 20px;
	}
	#gallery a:hover img {
		border: 5px solid #ddd;
		border-width: 5px 5px 20px;
		color: #fff;
	}
/*########################
Typography
########################## */
 

body {font-family:Arial, Helvetica, sans-serif; font-size:72%}
h1, h2, h3, h4 {font-weight:100; color:#444; letter-spacing:-0.05em;}
h1		{font-size:2.2em; color:#09F;}
h2		{font-size:1.8em;}
h3		{font-size:1.3em;}
h4		{font-size:1.2em;}

#MainContent {color:#666}
#MainContent p	{line-height:2.1em;}
strong {font-weight:bold}
#MainContent a {color:#3C6793;} 
#Footer      a {color:#666;}
#MainContent a:hover, #Footer a:hover { text-decoration:none;}
#Footer {color:#585858; font-size:85%}
/*########################
Page specific
########################## */



/*########################
navigation
########################## */


.navi {
width:400px;
height:30px;
font-size:0.85em;
}
/* remove all the bullets, borders and padding from the default list styling */
.navi ul {
padding:0;
margin:0;
list-style-type:none;
}
.navi ul ul {
width:140px;
}
/* float the list to make it horizontal and a relative positon so that you can control the dropdown menu positon */
.navi li {
float:left;
width:96px;
position:relative;
}
/* style the links for the top level */
.navi a, .navi a:visited {
display:block;
font-size:11px;
text-decoration:none; 
color:#222; 
width:90px; 
height:30px; 
background:#fff url(images/navbg.png) top left repeat-y;
padding-left:0px; 
line-height:29px;
text-align:center
}
/* a hack so that IE5.5 faulty box model is corrected */
* html .navi a, * html .navi a:visited {
width:140px;
w\idth:96px;
}

/* style the second level background */
.navi ul ul a.drop, .navi ul ul a.drop:visited {
background:#949e7c;
}
/* style the second level hover */
.navi ul ul a.drop:hover {
background:#c9ba65;
}
.navi ul ul :hover > a.drop {
background:#c9ba65;
}
/* style the third level background */
.navi ul ul ul a, .navi ul ul ul a:visited {
background:#e2dfa8;
}
/* style the third level hover */
.navi ul ul ul a:hover{
background:#b2ab9b;
}
.navi ul ul ul :hover > a {
background:#b2ab9b;
}

/* style the table so that it takes no part in the layout - required for IE to work */
.navi table {border-collapse:collapse; border:0; position:absolute; left:0; bottom:-1px;}

/* hide the sub levels and give them a positon absolute so that they take up no room */
.navi ul ul {
visibility:hidden;
position:absolute;
bottom:31px;
left:0; 
width:150px;
}
* html .navi ul ul {
bottom:30px;
}
/* position the third level flyout menu */
.navi ul ul ul{
left:150px; 
bottom:0;
width:150px;
}
/* position the third level flyout menu for a left flyout */
.navi ul ul ul.left {
left:-150px;
}


/* style the second level links */
.navi ul ul a, .navi ul ul a:visited {
background:#f2f6f3; 
color:#000; 
height:auto; 
line-height:1em; 
padding:5px 10px; 
width:100px
/* yet another hack for IE5.5 */
}
* html .navi ul ul a{
width:150px;
w\idth:129px;
}


/* style the top level hover */
.navi a:hover, .navi ul ul a:hover {
color:#ffffff; 
background:#D0DFD5;
}
.navi :hover > a, .navi ul ul :hover > a {
color:#fff;
background:#D0DFD5;
}

/* make the second level visible when hover on first level list OR link */
.navi ul li:hover ul,
.navi ul a:hover ul{
visibility:visible;
height:auto;
}
/* keep the third level hidden when you hover on first level list OR link */
.navi ul :hover ul ul{
display:none;
}
/* keep the fourth level hidden when you hover on second level list OR link */
.navi ul :hover ul :hover ul ul{
display:none;
}
/* make the third level visible when you hover over second level list OR link */
.navi ul :hover ul :hover ul{ 
display:block;
bottom:0;
}
/* make the fourth level visible when you hover over third level list OR link */
.navi ul :hover ul :hover ul :hover ul { 
display:block;
bottom:0;
}