html, body { 	
	background: #5b9acf url(img/bg.png) repeat-x;
	margin: 0;
	height:100%;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	Layout Blocks 
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
#top {	width: 980px;
	height:16px;
	margin: 0 auto 0 auto;
	padding: 0;
	background: #fff;
}

#top ul {
float:right;
margin:0;
padding:0;}

#top li {list-style:none;float:left;margin-left:20px;}
#top a {color:#003366;text-transform:uppercase;}
#top a:hover {color:#f00;text-decoration:none;}


#main { /* Holds the page items in place */
	width: 980px;
	min-height:400px;
	margin: 0 auto 0 auto;
	padding: 0;
	background: #fff;
}

#header {
	height:76px;
width:980px;
}
* html #header {clear:both;height:76px;} /* ie6 misbehaves again */

#logo {
background:url("img/header-logo.png") no-repeat scroll 0 0 #FFFFFF;
float:left;
height:76px;
width:260px;
}

#pageheader {
color:#003366;
float:left;
font-size:25px;
font-weight:bold;
height:40px;
margin-top:21px;
text-align:center;
width:444px;
}

#jqlogo {
background:url("img/jq-logo.png") no-repeat scroll 0 0 #FFFFFF;
float:right;
height:76px;
width:260px;
}


.space {
background:#FFFFFF;
float:left;
height:16px;
width:100%;	
}



#contentbox { 
	width: 980px;
	min-height:400px;
	background: #fff;
	float:left;
	margin-bottom:20px;
background:#fff;
/*background: #5b9acf url(img/bg.png) repeat-x;*/
}

#lside { 
float:left;
margin-left:2px;
width:178px;
}

/* formating the subnavi */
#subhead { 
background:none repeat scroll 0 0 #46A4CA;
height:26px;
margin-left:-2px;
width:99%;
}

#subhead h1 { 
color:#FFFFFF;
font-size:13px;
font-weight:normal;
margin:0;
text-align:center;
padding-top:4px;
} 


#subnavi{ 
width:100%;
float:left;
}

#subnavi ul{ 
float:left;
list-style:none outside none;
margin-bottom:50px;
margin-left:-2px;
margin-top:-15px;
padding-left:0;
}

#subnavi li{ 
background:none repeat scroll 0 0 #FFFFFF;
border:1px solid #FFFFFF;
float:left;
margin-top:1px;
padding:3px 3px 3px 37px;
width:133px;
}


#subnavi a{ 
color:#5B9ACF;
text-decoration:none;
padding-left:10px;
}

#subnavi li:hover a { 
color:#003366;
}

#subnavi li:hover { 
border:1px solid #46A4CA;
}

#subnavi li.menu-current { 

border:1px solid #46A4CA;
}
#subnavi .menu-current a{ 
color:#003366;
}

/* formating the promo_image */
.wbanner { 
padding:2px;
margin-bottom:-2px;
}



#frontedit { /* formating the frontedit module */
        background:transparent; 
        text-align: center;	
        line-height: 120%; 
        margin: 1em 5px 0.3em 5px; 
        border: 0px solid #fff;
        padding:10px;
        color:red;
}
#frontedit a {font-weight:normal;color:#f00; font-size:13px;}
#frontedit a:hover {color:#000;}

#content { /* main content from the WYSIWYG goes in here */
border-left:0px solid #5B9ACF;
border-right:0px solid #5B9ACF;
float:left;
min-height:300px;
padding-bottom:16px;
padding-left:14px;
padding-right:14px;
width:592px;
background:#fff;
}

#content-wrap {
width:980px;
}

#content td {vertical-align: top;}

* html #contentbox #content {text-align:left; display:inline;} /* ie6 misbehaves */
* html #contentbox #content table {width: 90%; display:inline;} /* ie6 fix to stop tables being pushed below floats */


#rside { /* Currently holds the promo boxes */
float:right;
margin-right:2px;
width:178px;
}

.searchbox {
float:left;
width:100%;
text-align:center;
margin-top:50px;
}

#link-jq{
float:left;
width:100%;
text-align:center;
}

#linkblock {
background:none repeat scroll 0 0 #CCCCCC;
border-top:1px solid #999999;
float:left;
width:100%;
}

#footerbox {
height:20px;
padding-top:0px;
width:100%;
float:left;
background:none repeat scroll 0 0 #ccc;
padding-bottom:20px;
}

#footer { 	
	font-size: 90%;
	color: #666;	
	padding-top: 10px;
text-align:center; 
}

/* Header Menu  */
#navContainer {
background:url("img/menu.jpg") repeat-x  #5B9ACF;
clear:both;
display:block;
height:30px;
}



/* 	Custom Classes (Re-useables) */
	

pre.code {
color:#333333;
font-size:11px;
line-height:1.4em;
}
pre.code br {
margin:0px;
padding:0px;
line-height:1px;
margin-top:-10px;
}

form.login_table {
color:#333333;
width:300px;
margin-left:150px;
border:0px solid #5B9ACF;
padding:20px;
}

form input[type='password'] {background:white; color:#003366; border:1px solid #5B9ACF; margin-top:4px;margin-left:13px; }
form input[type='text'] {
background:none repeat scroll 0 0 white;
border:1px solid #CCCCCC;
color:#333333;
margin-left:10px;
margin-top:4px;
}

.searchbox form input[type='text'] {
background:none repeat scroll 0 0 white;
border:1px solid #CCCCCC;
color:#003366;
margin-left:10px;
margin-top:4px;
padding:10px;
}

form input[type='submit'] {margin-bottom:14px; margin-left:10px;margin-top:2px; }



.head-text {
text-align:center;
color:#003366;
font-size:12px;
font-weight:bold;
margin-bottom:16px;
}

#sitemap {
margin-left:150px;
}

#sitemap ul {
list-style:disc;
}

#sitemap li {
list-style:square;
}

#sitemap li li {
list-style:disc;
}


/*** ESSENTIAL STYLES Superfish Drop-Down***/

#nav {
	float:left;	
	height: 30px;	
	border: 0;	
	padding:0;
}

.sf-erpe, .sf-erpe * {
	margin:			0;
	padding:		0;
	list-style:		none;
}
.sf-erpe {
	line-height:	1.0;
}
.sf-erpe ul {
	position:		absolute;
	top:			-999em;
	width:			10em; /* left offset of submenus need to match (see below) */
}
.sf-erpe ul li {
	width:			100%;
}
.sf-erpe li:hover {
	visibility:		inherit; /* fixes IE7 'sticky bug' */
}
.sf-erpe li {
	float:			left;
	position:		relative;
}
.sf-erpe a {
	display:		block;
	position:		relative;
}
.sf-erpe li:hover ul,
.sf-erpe li.sfHover ul {
	left:			0;
	top:			2.5em; /* match top ul list item height */
	z-index:		99;
}
ul.sf-erpe li:hover li ul,
ul.sf-erpe li.sfHover li ul {
	top:			-999em;
}
ul.sf-erpe li li:hover ul,
ul.sf-erpe li li.sfHover ul {
	left:			10em; /* match ul width */
	top:			0;
}
ul.sf-erpe li li:hover li ul,
ul.sf-erpe li li.sfHover li ul {
	top:			-999em;
}
ul.sf-erpe li li li:hover ul,
ul.sf-erpe li li li.sfHover ul {
	left:			10em; /* match ul width */
	top:			0;
}

/*** DEMO SKIN ***/
.sf-erpe {
	float:			left;
	margin-bottom:	1em;
}
.sf-erpe a {
	border-right:	1px solid #fff;
	border-bottom:		1px solid #fff;
	padding: 		.75em 1em;
	text-decoration:none;
}
.sf-erpe a, .sf-erpe a:visited  { /* visited pseudo selector so IE6 applies text colour*/
	color:			#fff;
}
.sf-erpe li {
	background:		transparent;
}
.sf-erpe li li {
	background:		#72B9D7;
/*	background:		#42A2C8; */

}
.sf-erpe li li a {
	padding: 7px;
border-right:0px solid #fff;
}
.sf-erpe li li li {
	background:		#72B9D7;
}
.sf-erpe li li li a {
	padding: 7px;
}
.sf-erpe li:hover, .sf-erpe li.sfHover,
.sf-erpe a:focus, .sf-erpe a:hover, .sf-erpe a:active {
	background:		#003366;
	outline:		0;
}

/*** arrows **/
.sf-erpe a.sf-with-ul {
	padding-right: 	2.25em;
	min-width:		1px; /* trigger IE7 hasLayout so spans position accurately */
}
.sf-sub-indicator {
	position:		absolute;
	display:		block;
	right:			.75em;
	top:			1.05em; /* IE6 only */
	width:			10px;
	height:			10px;
	text-indent: 	-999em;
	overflow:		hidden;
	background:		url('../images/arrows-ffffff.png') no-repeat -10px -100px; /* 8-bit indexed alpha png. IE6 gets solid image only */
}
a > .sf-sub-indicator {  /* give all except IE6 the correct values */
	top:			.8em;
	background-position: 0 -100px; /* use translucent arrow for modern browsers*/
}
/* apply hovers to modern browsers */
a:focus > .sf-sub-indicator,
a:hover > .sf-sub-indicator,
a:active > .sf-sub-indicator,
li:hover > a > .sf-sub-indicator,
li.sfHover > a > .sf-sub-indicator {
	background-position: -10px -100px; /* arrow hovers for modern browsers*/
}

/* point right for anchors in subs */
.sf-erpe ul .sf-sub-indicator { background-position:  -10px 0; }
.sf-erpe ul a > .sf-sub-indicator { background-position:  0 0; }
/* apply hovers to modern browsers */
.sf-erpe ul a:focus > .sf-sub-indicator,
.sf-erpe ul a:hover > .sf-sub-indicator,
.sf-erpe ul a:active > .sf-sub-indicator,
.sf-erpe ul li:hover > a > .sf-sub-indicator,
.sf-erpe ul li.sfHover > a > .sf-sub-indicator {
	background-position: -10px 0; /* arrow hovers for modern browsers*/
}

/*** shadows for all but IE6 ***/
.sf-shadow ul {
	background:	url('../images/shadow.png') no-repeat bottom right;
	padding: 0 8px 9px 0;
	-moz-border-radius-bottomleft: 17px;
	-moz-border-radius-topright: 17px;
	-webkit-border-top-right-radius: 17px;
	-webkit-border-bottom-left-radius: 17px;
}
.sf-shadow ul.sf-shadow-off {
	background: transparent;
}
.sf-erpe .menu-current {background:#003366;}

.sf-erpe .menu-parent {	background:#003366;}

ul.ceebox, ul.cerpe {
list-style:decimal-leading-zero;
margin-left:20px;
}

.gallery {
margin-left:50px;
}

.foldergallery-wrapper {
margin-left:50px;
}

.download {
height:50px;
margin-left:170px;
margin-top:40px;
width:250px;
}


.download a {
float:left;
background:url(img/download.png) no-repeat top left;
height:50px;
width:250px;
}

.download a:hover {
background:url(img/download.png) no-repeat bottom left;
}

.learn_more {
height:50px;
margin-left:170px;
margin-top:40px;
width:250px;
}

.learn_more a {
float:left;
background:url(img/learn_more.png) no-repeat top left;
height:50px;
width:250px;
}

.learn_more a:hover {
background:url(img/learn_more.png) no-repeat bottom left;
}

.mootools {
    background: url("img/mootools.jpg") no-repeat scroll center top #FFFFFF;
    float: left;
    min-height: 76px;
    padding-left: 50px;
    padding-top: 90px;
    width: 542px;
}

.mootools strong {
color:red;
}