/* CSS Document */

/**The four main containers of the website. Include the whole website**/
html {
	margin: 0px;
	padding: 0px;
}

body {
	margin: 0px;
	padding: 0px;
	font-size: 10px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	background-color: #669999;
}


/**Css for creating the shadow effect**/
/**
#shadow {
	background-image: url(images/shadow.png);
	background-repeat: repeat-y;
	background-position: 50%;
	padding: 2px 3px 3px 0px;
	margin: 0px;
}
**/

#container {
	text-align: left;
	color: #333333;
	background-color: #FFFFFF;
	margin: 0px auto 0px auto;
	width: 800px;
	padding: 1px;
	height:100%;
}


/**Some general attributes**/
h1 {
	font-size: 150%;
	color: #000000;
	margin: 0px 0px 5px 0px;
}

p {
	color: #000000;
	margin: 5px;
}

a {
	color: #ffffff;
	text-decoration: underline;
	cursor: pointer;
}

a:hover {
	color: #50879c;
}

h2 {
	font-size: 150%;
	color: #000000;
	font-style: italic;
}

h3 
{
	font-size: 110%;
	color: #000000;
	font-style: italic;
}


/**Used for clearing floats**/
.clearall {
	clear: both;
	display: block;
	height: 1px;
}

.addmargin {
	margin-top: 20px;
}

/**Header css**/
#masthead {
	
}



/**Css for the three boxed links on the top of the site**/
#globalLink {
	background-color: #325b71;
	float: left;
	text-align: center;
	display: block;
	height: 69px;
	margin: 0px;
	padding: 0px;
	width:322px;
	
}

#globalLink ul {
	display: inline;
	margin: 0px;
	padding: 0px;
}

#globalLink li{
	float: left;
	list-style-type: none;
	margin-right: 0px;
	padding: 0px;
	border-right: 1px solid #FFFFFF;	
}

#globalLink li a{
	background-color: #325b71;
	display: block;
	width: 160px;
	height: 40px;
	text-decoration: none;
	padding-top: 29px;
	margin-top: 0px;
	color:#FFFFFF;
}

#lsc {
	float: left;
	border: 1px solid #325b71;
	width: 112px;
	height: 67px;
	display: block;
	text-align: center;
	margin-right: 1px;
}

#lsc a {
	margin: 0px;
	padding: 0px;
	border: 0px;
	display: block;
	width: 112px;
	height: 67px;

}


#globalLink li a:hover {
	/**Adds a small box in the corner of the link**/
	background-color: #50879c;
	display: block;
	width: 160px;
	height: 40px;
	text-decoration: none;
	padding-top: 29px;
	margin: 0px;
	color:#FFFFFF;
}


/**Css for the logo**/
#logo {
	float: right;
	border: 1px solid #325b71;
	width: 361px;
	height: 67px;
	background-color: #325b71;
	display: block;
	text-align: center;
}



/**The loginpanel**/
#loginpanel {
	margin: 0px 0px 0px 0px;
	text-align: center;
	background-color: #325b71;
	color: #FFFFFF;
	display: block;
	padding-top: 9px;
	padding-bottom: 1px;
	height: 25px;
}


#loginpanel form{
	margin: 0px;
	padding: 0px;
}

#loginpanel input {
	border: 1px solid #50879c;
	color: #325b71;
	background-color: #FFFFFF;
	width: 110px;
	margin: 0px 10px 0px 0px;
	padding: 1px 5px 1px 5px;
	font-size: 100%
}





/**Css for the imageholder**/
#imageholder {
	border: 1px solid #325b71;
	padding: 30px 0px 0px 0px;
	margin: 0px 0px 0px 0px;
	width: 798px;
	height: 220px;

}

#theimage {
	width: 796px;
	height: 196px;
}



/**The searchbar**/
#search {
	padding: 0px;
	margin: 0px;
	display: inline;
	width: 300px;
	top: -27px;
	left: -70px;
	float: right;
	position: relative;
}

#search form {
	display: inline;
	width: 300px;
	padding: 0px;
	margin: 0px;
}

#search input {
	width: 180px;
	border: 1px solid #000000;
	color: #325b71;
	background-color: #FFFFFF;
	margin: 0px 10px 0px 0px;
	padding: 1px 5px 1px 5px;
}



/**Start main site**/
#main {
	margin: 0px 0px 1px 0px;
	padding: 0px;
	border-left: 0px solid #325b71;
}

/**The navigation menu**/
#navbar {
	display: block;
	margin-left: 0px;
	width: 150px;
	float: left;
	padding: 0px;
	margin: 0px;
}

.menu {
position:relative; 
z-index:1000;
font-size:90%;
}

#container #main #navbar .menu  table {
	position:absolute;
	top:0;
	left:0;
	z-index:100;
	font-size:1em;
}

/* remove all the bullets, borders and padding from the default list styling */
.menu ul {
padding:0;
margin:0;
list-style-type:none;
width:150px;
}
/* hack for IE5.5 */
* html .menu ul {margin-left:-16px; ma\rgin-left:0;}
/* position relative so that you can position the sub levels */
.menu li {
position:relative;
}

/* style the links */
.menu a, .menu a:visited {
display:block; 
text-decoration:none;
height:25px;
line-height:25px;
width:149px;
color:#fff;
background:#325b71;
text-indent:5px;
border:1px solid #fff;
border-width:0 1px 1px 0;
}
/* hack for IE5.5 */
* html .menu a, * html .menu a:visited {width:150px; w\idth:149px;}
/* style the link hover */
.menu a:hover{
color:#fff; 
background:#50879c;
}

/* hide the sub levels and give them a positon absolute so that they take up no room */
.menu ul ul {
visibility:hidden;
position:absolute;
top:0;
left:150px; 
}
/* make the second level visible when hover on first level list OR link */
.menu ul :hover ul{
visibility:visible;
}
/* keep the third level hidden when you hover on first level list OR link */
.menu ul :hover ul ul{
visibility:hidden;
}
/* keep the fourth level hidden when you hover on second level list OR link */
.menu ul :hover ul :hover ul ul{
visibility:hidden;
}
/* make the third level visible when you hover over second level list OR link */
.menu ul :hover ul :hover ul{ 
visibility:visible;
}
/* make the fourth level visible when you hover over third level list OR link */
.menu ul :hover ul :hover ul :hover ul { 
visibility:visible;
}

.menu ul .login a{
	background: #000000;
	color: #FFFFFF;
}

.menu ul .login a:hover{
	background: #333333;
	color: #FFFFFF;
}


/**The main container where the text will go in every page*/
.content {
	float: right;
	display: block;
	width: 628px;
	border: 1px solid #325b71;
	padding: 0px 10px 10px 10px;
	margin: 0px 0px 0px 0px;
	min-height: 200px;
}

/* the following rule is recognized only by IE */
	
* html body .content
{
	height:200px;
}

.content a {
	color: #325b71;
	text-decoration : none;
}

.content a:hover {
	color: #325b71;
	text-decoration: underline;
}

.content img 
{
	border:0px;
}

/**The small panels**/
.employers,
.fundingbodies,
.brokers {
	display: block;
	width: 250px;
	color: #FFFFFF;
	background-color: #325b71;
	border: 1px  dotted #FFFFFF;
	padding: 10px;
	margin: 20px;
	height: 150px;
}

.employers p,
.fundingbodies p,
.brokers p {
	color: #FFFFFF;
}


.employers h1,
.fundingbodies h1,
.brokers h1 {
	color: #FFFFFF;
	
}


/**Position left**/
.employers{
	float: left;
}

/**Position right**/
.fundingbodies {
	float: right;
}


/**Position middle under the other two**/
.brokers {
	clear: both;
	margin: 0px auto;
}

/**Footer**/
#footer {
	clear: both;
	width: 780px;
	padding: 8px 10px 5px 10px;
	background-color: #325b71;
	color: #FFFFFF;
	margin: 0px 0px 0px 0px;
	height: 20px;
}


/**The links in the footer**/
#siteinfo {
	float: left;
	text-align: left;	
	color: #FFFFFF;
	margin: 0px;
	padding: 0px;
	display: block;
	width: 450px;
}


/**The trademark**/
#registered {
	text-align: right;
	color: #FFFFFF;
	float: right;
	margin: 0px;
	padding: 0px;
	display: block;
	width: 200px;
}


/**For required form fields**/
.required
{	color: #CC3300;
	font-weight: bold;
}

.x-layer
{
	text-align:left;
}


.x-tree 
{
	background-color:white;
}

#w3c
{
	float:right;
	position:relative;
	top:-8px;
	left: 8px;
}

#w3c p
{
	margin:0px;
	padding:0px;
}

#w3c p img
{
	border:0px;
}

.x-form-element .strengthMeter {
 border: 1px solid #B5B8C8;
  margin: 3px 0 3px 0;
 background-image: url(images/meter_background.gif);
}
.x-form-element .strengthMeter-focus {
 border: 1px solid #000;
}
.x-form-element .scoreBar {
 background-image: url(images/meter.gif);
 height: 10px;
 width: 0;
 line-height: 1px;
 font-size: 1px;
}

.htmlcomponent ol, htmlcomponent li 
{
	list-style: decimal;
}