/* ==============================================
Layout Style Sheet (for version 5 browsers and above)

version:  1.0
author:   Philip Lee (MCUBE.TV)
date:     11 February 2006
================================================= */

/* =LAYOUT =INIT
================================================= */
.imgright { float: right    }
.imgleft  { float: left     }
del.show  { display: inline }
#main .imgpad { padding: 0 }


/* =LAYOUT =CLEAR
================================================= */
#header,
#menu,
#menu li,
#menu ul,
#top,
#bottom,
#footer {
	margin: 0;
	padding: 0;
}

/* =CLEARFIX
================================================= */
/* Clear Fix Hacks: To ensure container div wraps around float elements
http://www.positioniseverything.net/easyclearing.html
http://www.positioniseverything.net/articles/onetruelayout/
*/
.clearfix:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}

.clearfix {display: inline-table;}

/* Hides from IE-mac \*/
.clearfix {display: block;}
/* End hide from IE-mac */


/* =LAYOUT =VERTICALLY ALIGNING CONTAINER DIV IN BROWSER WINDOW
=============================================================== */

/*\*/
#valign_outer, #valign_inner {
	height: 100%;
}
#valign_outer {
	margin: 0 auto;
	display: table;
}
#valign_inner {
	display: table-cell;
	vertical-align: middle;
	
	width: 80%; /* Opera needs to set the width here */
}
/**/
#valign_inner {
	/*white-space: nowrap;*/
}

/* in IEM solo shrink-wrap, no vert.center \*//*/
#valign_outer {
	text-align: center;
}
#container {
	display: inline-block;
	text-align: left;
	width: 1px;
}
/**/

/* =LAYOUT =STYLING
================================================= */
#container {	
	overflow: hidden;
	margin: 0 auto;
	
	text-align: left;
	
	width: 780px;
	/*width: 50em;*/

	position: relative;
	
	margin: 1em auto;
}

/* commented backslash hack - hide from Mac IE \*/ 
/*#container {
	height:100%;
}*/

/* =TOP
================================================= */
#top {
	position: relative;
 	/*background: #2d5f96 url("../images/en/background-top.jpg") 0 0 repeat-y;*/
	
	border: solid #008669;
	border-width: 1px 1px 0 1px;
	background: white;
}

#top h1 {
	float: left;
}

#top #banner {
	float: right;
}


/* =BOTTOM
================================================= */
#bottom {
	position: relative;
	text-align: left;

	padding: 0.5em;
	background-color: white;
	border: solid #008669;
	border-width: 0 1px 1px 1px;
	
	height: 80px;

}
/* =CONTENT
================================================= */
/* See typography.css */
#content	{
	position: relative;
	min-height: 284px;
	/*height: 25em;*/
	text-align: left;
	/*background: white url("../images/en/background-content.gif") top right no-repeat;*/
	background: white;

	border: solid #008669;
	border-width: 0 1px 1px 1px;
}

#main {
	float: left;
	position: relative;
}

#main a:hover	{
	background-color: #3798B5;
}

#main h2 {

}

#section-image {
	float: right;
}

#section-text {
	padding: 1em 0em 1em 1em;
	float: left;
	/*width: 45%;*/
	width:325px;
	border-left: solid 1px #eaeaea;
}

#affiliates-partners #section-text {
	padding: 1em 0em 1em 1em;
	float: left;
	width:55%;
	border-left: solid 1px #eaeaea;
}

#about #section-text,
#thankyou #section-text {
	border: none;
	width: 50%;
}

#signup #section-text {
	border: none;
	width: 55%;
}


#contact #section-text {
	border: none;
	width: 60%;
}


#test #section-text {
	width: 65%;
	border-width: 0px;
}

#section-text p {
 	margin: 0 0 1em 0;
	text-align: justify;
}

#section-text p img {
	border: solid 1px white;
	margin: 0 1em 0.5em 0;
	float: left;
}


#section-text ul, 
#section-text ol {
 	font-size: 0.7em;
 	margin-bottom: 1em;
}

#section-text ul ul, 
#section-text ul ol, 
#section-text ol ol,
#section-text ol ul {
 	font-size: 1em;
 	margin-bottom: 1em
}

#section-text table {
 color: white;
}


/* =MENU
================================================= */
ul#menu {
	list-style-type: none;
	background: #8ba0bf url("../images/en/background-menu-item.jpg") 0 0 repeat-x;
	width: 100%;
	min-height: 1.55em;
	clear: both;
	border: solid #000066;
	border-width: 1px 0;
}

#menu li {
	display: block;
	float: left;
	position: relative;
	text-align: left;
}	

#menu li a:link,
#menu li a:visited {
  	font-family: "trebuchet MS", arial, helvetica, sans-serif;
	font-size: 0.75em;
	text-decoration: none;
	color: white;
	
	display: block;
	padding:0.45em 0.3em 0.3em 0.3em;
	padding-left: 20px;

	/*min-height: 0.7em;*/
	border: none;
	background: none;

}

#menu li a:hover,
#menu li a:active {
	background: #00a19d url("../images/en/wouter-icon.gif") 0.3em 0.4em no-repeat;
	color: white;
}

#menu abbr {
	border: none;
}


/* =MENU
================================================= */
ul#submenu {
	list-style-type: none;
	float: left;
	padding: 1em;
	margin: 0;
	/*width: 24%;*/
	width: 160px;
}

ul#submenu li {
	margin-bottom: 1em;
	font-size: 0.8em;

}

ul#submenu li a:link, 
ul#submenu li a:visited {
	background: transparent url("../images/en/submenu-icon.gif") 0 2px no-repeat;
	border-bottom: none;
	padding: 8px 0.2em 2px 16px;
}

ul#submenu li a:hover, 
ul#submenu li a:active {
	background: #00a19d;
}

/* =LOGIN FORM
================================================= */
#login_frame {
	position:absolute;
	right:0;
	bottom:0;
	width:22em;
	padding:0;
}


#login_frame form {
	padding: 0;
	margin: 0;
}

#login_frame fieldset {
	margin-top: 0;
	border: 0;
}

#login_frame fieldset#details {
	margin: 0;
	padding: 0;
	text-align: right;
}

#login_frame #details input {
	padding:0;
	margin-right: 0.5em;
	width: 6em;
}

#login_frame #details label {
	/*font-family: arial, helvetica, sans-serif;*/
	text-align: right;
	margin-right: 0.4em;
	margin-left: 0.6em;
}

#login_frame #details .submit {
	background: none;
	border:none;
	max-width: 32px;
	width: 32px;
}

#login_frame #error {
	font-size: x-small;
	color: red;
	margin: 0;
	padding: 0.2em 0.5em 0.5em 0.5em;
	text-align: right;
}


#logout {
	text-align: right;
	padding: 0 1em 0 1em;
	font-family: arial, helvetica, sans-serif;
	
	/* Need blackground color if not text will look ugly when using moo.fx*/
	background-color: white;
}

#logout #username {
	font-weight: bold;
}

#logout #logoutlink {
	font-size: x-small;
}

/* =FOOTER
================================================= */
#footer {
	text-align: right;
	clear:both;
	font-size: 0.6em;
	font-family: arial, verdana, "trebuchet MS", helvetica, sans-serif;
	padding: 0.5em 0 0 0;
}

/* =CONTACT
================================================= */
#contact .vcard p {
	font-size: 100%;
}

#contact .vcard p a:hover,
#contact .vcard p a:active	{
 	background-color:#00a19d;
}


#contact .vcard {
	font-size: 0.8em;
	text-align: center;
	margin: 2em 0 0 5em;
	padding: 0;
}

#contact .vcard img {
	margin: auto;
}

#contact .vcard img {
	text-align: center;
}

#contact .vcard .org {
	font-size: 1.2em;
	font-weight: bold;
	text-transform: uppercase;
	color: #0b3e8e;
	margin-bottom: 1em;
}

#contact .vcard .url {
	display: none;
}