/*
Author: Carla van Loon
*/

/* -------------------------------
BODY STYLES
----------------------------------*/

* {
  margin: 0;
  padding: 0;
}

body {
  color: #333;
  background:#f0f0f0 url(../images/layout/bk_body.png) repeat-x;
  font-family:Arial, Helvetica, sans-serif;
  font-size:13px;
  line-height:135%;
}

/*----------------------------------------------------
BASIC HTML ELEMENTS STYLES
------------------------------------------------------*/

a {
	color:#1FA2E1;
	text-decoration:none;
}

a:hover {
  text-decoration: underline;
}

a:focus {
	outline:none;
}

h1 {
	color:#277bce;
	font-size:24px;
	letter-spacing:-1px;
	font-weight:normal;
	padding:10px 0 5px;
	line-height:100%;
	font-family:Georgia, "Times New Roman", Times, serif;
	font-style:italic;
}

h1.home {
	color:#1FA2E1;
	font-size:30px;
}

h1 a {
	color:#277bce;
	text-decoration:none;
}

h1 a:hover {
	color:#1FA2E1;
	text-decoration:none;
}

h2,h3 {
	font-size:22px;
	font-weight:normal;
	font-style:italic;
	letter-spacing:-1px;
	padding:5px 0;
} 

h3{
	font-size:17px;
	font-weight:bold;
}

h4 {
	font-size: 12px;
	line-height: 1.4;
	margin: 0;
	padding: 0px 0px 0px 10px;
	color:#ffffff;

}

ul {
	list-style:none;
}

p {
	margin:10px 0;
}

hr {
height: 0;
border: 0;
border-top: 1px solid #E2E2E2;
}

.avatar {
	padding:1px;
	border: 1px solid #CCCCCC;
}
/* -------------------------------
LAYOUT STRUCTURE
----------------------------------*/

#wrapper {
	width:960px;
	margin:0 auto;
}
#header {
	position:relative;
	height:259px;
	background:url(../images/layout/bk_header.png) 100px 1px no-repeat;
}

#header a {
font-weight: normal;
color: #FFFFFF;
text-decoration: none;
} 


#header a:hover {
	color: #FFF;
	text-decoration: underline; 
}

#content {
	padding:25px 0;
}

#content #colLeft {
	float:left;
	width:700px;
	margin-right:10px;

}


#content #colRight {
	float:left;
	width:250px;
	
}

#content #colMain {
	float:left;
	width:940px;
	padding:20px 10px 10px 10px;
	background-color:#FFF;
	-moz-box-shadow: 0 0 5px #ccc;
	-webkit-box-shadow: 0 0 5px#ccc;
	box-shadow: 0 0 5px #ccc;

}

.left_content {
	float:left;
	width:680px;
	margin-right:10px;
	margin-bottom:10px;
	padding:10px 10px 10px 10px;
	background-color:#FFF;
	-moz-box-shadow: 0 0 5px #ccc;
	-webkit-box-shadow: 0 0 5px#ccc;
	box-shadow: 0 0 5px #ccc;

}

.main_content {
	float:left;
	width:940px;
	margin-bottom:10px;
	padding:10px 10px 10px 10px;
	background-color:#FFF;
	-moz-box-shadow: 0 0 5px #ccc;
	-webkit-box-shadow: 0 0 5px#ccc;
	box-shadow: 0 0 5px #ccc;

}


#footer {
	background:#000 url(../images/layout/bk_footer.jpg) 0 0 repeat-x;
	padding-top:15px;
	padding-bottom:10px;
	margin-top:15px;
	min-width:960px;
}

#footerInner {
	width:960px;
	margin:0 auto;
	color:#797979;
}

#copyright {
	border-top:1px solid #1E1E1E;
	background:#111;
	min-width:960px;
}

#copyrightInner {
	width:960px;
	margin:0 auto;
	font-size:11px;
	color:#515151;
	padding:20px 0;
	position:relative;
}


/* -------------------------------
HEADER ELEMENTS
----------------------------------*/

/* TopMenu */

#navigatie {
	min-width:999px;
	width:1000px;
	height:50px;
	margin: 0 auto;
	
}

.menu {
	padding-bottom:0px; 
	position:absolute;
	top:210px;
	font-size:11px;
	z-index:1;
	color:#003399;
	border-right:1px solid #d4d4d4;
	}

.menu a {
	color:#003399;
}

.menu a:hover {
	color:#003399;
	text-decoration:underline;
}

/* remove all the bullets, borders and padding from the default list styling */
.menu ul {padding:0;margin:0;list-style-type:none; height:50px;}

/* style the sub-level lists */
.menu ul ul {width:130px;}

/* float the top list items to make it horizontal and a relative positon so that you can control the dropdown menu positon */
.menu ul li {float:left;height:50px;line-height:50px; padding: 0px 10px 0px 10px;	border-left:1px solid #b4b4b4;text-transform: uppercase; border-bottom: 0px solid #AAAADD;font-weight: bold;}

/* style the sub level list items */
.menu ul ul li {display:block;width:12em;height:auto;position:relative;line-height:sem;left:-11px;text-transform: none;font-weight: normal;border-left:0px solid #b4b4b4;}

/* style the links for the top level */
.menu a, .menu a:visited {display:block;float:left;height:50px;text-decoration:none;color:#003399;padding:0px;
}

/* style the sub level links */
.menu ul ul a, .menu ul ul a:visited {display:block;background:#000; color:#003399;width:168px;height:100%;line-height:1em; padding:1em 1em;border-bottom:1px solid #b4b4b4;border-left:1px solid #b4b4b4;border-right:1px solid #b4b4b4;}
.menu ul table ul a, .menu ul table ul a:visited  {width:14em; w\idth:12em;}


/* style the table so that it takes no part in the layout - required for IE to work */
.menu table {position:absolute; left:0; top:0; z-index:-1;}
.menu ul ul table {lef\t:-1px;}
.menu ul ul table ul.left {margin-lef\t:2px;}

.menu li:hover {position:relative;}
* html .menu a:hover {position:relative;}

/* style the third level background */
.menu ul ul ul a, .menu ul ul ul a:visited {background:#000;}
/* style the fourth level background */
.menu ul ul ul ul a, .menu ul ul ul ul a:visited {background:#000;}
/* style the sub level 1 background */
.menu ul :hover a.sub1 {background:#000;}
/* style the sub level 2 background */
.menu ul ul :hover a.sub2 {background:#000;}

/* style the level hovers */
/* first */
.menu a:hover {color:#000;}
.menu :hover > a {color:#000;}
/* second */
.menu ul ul a:hover{color:#5AC4ED;background:#000;}
.menu ul ul :hover > a {color:#003399;background:#000;}
/* third */
.menu ul ul ul a:hover {background:#000;}
.menu ul ul ul :hover > a {background:#000;}
/* fourth */
.menu ul ul ul ul a:hover {background:#000;}


/* hide the sub levels and give them a positon absolute so that they take up no room */
.menu ul ul {visibility:hidden;position:absolute;height:0;top:50px;left:0;width:14em;}

/* position the third level flyout menu */
.menu ul ul ul{left:14em;top:0;width:14em;}

/* position the third level flyout menu for a left flyout */
.menu ul ul ul.left {left:-12em;}


/* make the second level visible when hover on first level list OR link */
.menu ul li:hover ul, .menu ul a:hover ul {visibility:visible; height:auto; padding-bottom:3em; background:transparent url(images/trans.gif);}
/* 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;}
/* Logo */

/* Logo */

#logo {
	position:absolute;
	left:0;
	top:10px;
}

#logo img {
	border:none;
	width: 200px;
}

/* Login box */

#loginbox {
	position:absolute;
	left:0;
	top:145px;
	padding-left:0px;
	font-size: 11px;
	color:#FFF;
	width:370px;
}


.loginbox,input,select {
	padding: 4px;
	margin-right: 0px;
	background-color: #ffffff;
	border: 1px solid #1d2a5b;
}

/* Banners */

#header .banner1 {
    float: right; 
    clear: right; 
    margin-top: 17px; 
	height: 80px;
	width: 200px;
	border: 1px solid #fff;
}

#header .banner1 img {
	border: none;
}

#header .banner2 {
    float: right; 
    clear: right; 
    margin-top: 16px; 
	height: 80px;
	width: 200px;
	border: 1px solid #fff;

}

.banner2 img {
	border: none;
}


/* Social Links */

#socialLinks {
	position:absolute;
	left:0;
	top:160px;
	background:url(images/bk_social_links.png) 0 50% no-repeat;
	padding-left:120px;
	height:42px;
}

#socialLinks .linkedin, #socialLinks .facebook, #socialLinks .twitter, #socialLinks .rss {
	display:block;
	width:32px;
	height:32px;
	float:left;
	margin-left:5px;
	text-indent:-9999px;
}

#socialLinks .linkedin:hover, #socialLinks .facebook:hover, #socialLinks .twitter:hover, #socialLinks .rss:hover {
	margin-bottom:2px;
}

#socialLinks .linkedin {
	background:url(../images/layout/ico_linkedin.png) 0 0 no-repeat;
}

#socialLinks .facebook {
	background:url(../images/layout/ico_facebook.png) 0 0 no-repeat;
}

#socialLinks .twitter {
	background:url(../images/layout/ico_twitter.png) 0 0 no-repeat;
}

#socialLinks .rss {
	background:url(../images/layout/ico_rss.png) 0 0 no-repeat;
}

/*----------------------------
FOOTER ELEMENTS
------------------------------*/

#footer h2 {
	font-weight:bold;
	color:#ccc;
	font-size:18px;
}

#footerInner {
	overflow:hidden;
	padding-bottom:10px;
}

#footerInner .boxFooter {
	float:left;
	width:290px;
	padding-right:30px;
}

#footerInner .last {
	padding-right:0;
}

#footerInner h2 {
	font-size:20px;
	border-bottom:1px solid #292929;
	padding:7px 0;
	margin-bottom:7px;
}

#footerInner .boxFooter ul li {
	padding:5px 6px 5px 18px;
	border-bottom:1px solid #292929;
	background:url(../images/layout/star.png) 0 8px no-repeat;
	color:#986123;
	font-size:10px;
	font-style:italic;
}

#footerInner .boxFooter ul li br {
	line-height:5px;
}

#footerInner .boxFooter ul li a {
	text-decoration:none;
	color:#515151;
	font-size:13px;
	font-style:normal;
}

#footerInner .boxFooter ul li a:hover {
	color:#ccc;
}

#sitebottom {
	position:absolute;
	right:5px;
	top:13px;
}

#sitebottom img {
	border:none;
}

#sitebottom a {
	display:block;
	/*width:344px;
	height:26px;
	background:url(../images/layout/site5bottom.png) 0 0 no-repeat;
	text-indent:-9999px;*/
}


/*----------------------------
LEFTCOL ELEMENTS
------------------------------*/

.postBox {
	margin-bottom:10px;
}


.postBox .postBoxMid {
	padding:0 5px;
	background-color:#FFF;
	-moz-box-shadow: 0 0 5px #ccc;
	-webkit-box-shadow: 0 0 5px#ccc;
	box-shadow: 0 0 5px #ccc;
}

.postBox .postBoxMid p{
	line-height:145%;
}

.postBox .postBoxMid img {
	border:none;
	padding:10px;
}


.postBox .postBoxMidInner {
	padding:10px 10px 10px 10px;
	position:relative;
}

.postBoxMid .category {
	background:url(../images/layout/star.png) 0 50% no-repeat;
	padding:0 0 0 20px;
	text-transform:uppercase;
	font-size:11px;
	line-height:100%;
	color:#ccc;
	font-weight:bold;
	
}

.postBox .postBoxMid .date {
	color:#4D4639; 
	font-weight: normal; 
	font-size: 100%;
}

.postBox .postBoxMid .textPreview {
	float:left;
	width:100%;
	margin-top:15px;

}

.postBox .postBoxMid .textPreview p{
	margin-top:0;
	
}

.postBox .postBoxMid .postMeta {
	border-top:1px solid #E2E2E2;
	padding-top:10px;
	margin-top:25px;
	clear:left;
	overflow:hidden;
}

.postBox .postBoxMid .postMeta .more-link {
	display:block;
	padding:3px 0;
	font-size:14px;
	font-weight:bold;
	float:left;
	
}

.postBox .postBoxMid .postMeta .metaRight {
	float:right;
	min-height: 30px;
}

.postBox .postBoxMid .postMeta .metaRight .avatar {
	vertical-align:middle;
	margin-left:20px;
	margin-right:5px;
	float:right;
	padding:1px;
	border: 1px solid #CCCCCC;
}

.postBox .postBoxMid .postMeta .metaRight img {
	vertical-align:middle;
	margin-left:0px;
}

/* PAGINATION */

.emm-paginate {padding:10px 0; overflow:hidden;}
.emm-paginate a {background:url(../images/layout/bk_pagenavi.jpg) 0 100% repeat-x; border:1px solid #ddd; color:#666; margin-right:5px; padding:4px 8px; text-align:center; text-decoration:none;}
.emm-paginate .emm-title {color:#555; margin-right:4px;}
.emm-paginate .emm-gap {color:#999; margin-right:4px;}
.emm-paginate a:hover, .emm-paginate a:active, .emm-paginate .emm-current {color:#fff; background:#18AEF5; border:1px solid #0A95D8; margin-right:5px; padding:4px 8px;}
.emm-paginate .emm-page {}
.emm-paginate .emm-prev, .emm-paginate .emm-next {}


/* --------------------------------
RIGHTCOL ELEMENTS
-----------------------------------*/

.rightBox {
	margin-bottom:10px;
	
}


.rightBox .rightBoxMid {
	padding:30px 10px 15px;
	position:relative;
	background-color:#FFF;
	-moz-box-shadow: 0 0 5px #ccc;
	-webkit-box-shadow: 0 0 5px#ccc;
	box-shadow: 0 0 5px #ccc;

}

.rightBox .rightBoxMid .avatar {
	vertical-align:middle;
	margin-left:20px;
	margin-right:5px;
	float:left;
	padding:1px;
	border: 1px solid #CCCCCC;
}


.rightBox .rightBoxMidSearch {
	padding:6px 10px 5px;
	overflow:hidden;
}

.rightBox .rightBoxMid h2 {
	
	font-size:14px;
	font-weight:bold;
	letter-spacing:0;
	color:#277bce;
	text-transform:uppercase;
	display:block;
	width:254px;
	height:39px;
	position:absolute;
	top:6px;
	left:-2px;
	padding:5px 0px 0 10px;
	
}

.rightBox .rightBoxMid ul li{
	padding:5px 0;
	border-bottom:1px solid #E2E2D8;
}

/* Latest Tweet */

#twitter {
	margin-left:4px;
	width: 270px;
}

#twitter #twitter_update_list {
	background:url(../images/layout/bk_twitter_box_top.png) 0 0 no-repeat;
	padding:3px 15px 0;
	font-family:Georgia, "Times New Roman", Times, serif;
	font-size:12px;
	font-style:italic;
	line-height:125%;
	color:#666;
}

#twitter #twitter_update_list li{
	list-style-type:none;
	padding-top:10px;
}

#twitter #bottom {
	height:36px;
	background:url(../images/layout/bk_twitter_box_bottom.png) 0 0 no-repeat;
	padding-left:63px;
	padding-top:45px;
	font-weight:bold;
}

/* -------------------------------
CLEARING
----------------------------------*/

.clearfix:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
  overflow: hidden;
  float: none;
}

.clearfix { 
  display: block;  
}

/* Hide from IE-mac \*/
* html .clearfix { float: left; height: 1%; }
/* End hide from IE-mac */


/* -------------------------------
PAGINATION
----------------------------------*/


div.pagination {
	padding: 3px;
	margin: 3px;
}

div.pagination a {
	padding: 2px 5px 2px 5px;
	margin: 2px;
	border: 1px solid #AAAADD;
	text-decoration: none; /* no underline */
	color: #277bce;
		background-color: #ffffff;
	
}
div.pagination a:hover, div.pagination a:active {
	border: 1px solid #277bce;
		background-color: #ffffff;
	color: #000;
}
div.pagination span.current {
	padding: 2px 5px 2px 5px;
	margin: 2px;
		border: 1px solid #277bce;
		
		font-weight: bold;
		background-color: #277bce;
		color: #FFF;
	}
	div.pagination span.disabled {
		padding: 2px 5px 2px 5px;
		margin: 2px;
		border: 1px solid #EEEEEE;
	
		color: #DDD;
	}
	

/* -------------------------------
PERSOONLIJKE PRESTATIE
----------------------------------*/


table.perspres td, 
table.perspres th {
	text-align: left;
	border-bottom: 1px solid #EEEEEE;
	height: 20px;
	padding-left: 5px;
}

table.perspres th {
	text-align:left;
	font-weight:bold;
	border-bottom: 1px solid #000;
	padding-left: 12px;

}


/* -------------------------------
PROFILE BADGES
----------------------------------*/

.pong {
	float:left;
	background: url(../images/users/badges/badge_pong.png) no-repeat left top;
	height:46px;
	width:60px;
	font-size: 0.8em;
	font-weight: bold;
	text-align: center;
	color: #78e80a;
	padding-right: 15px;
	padding-top:20px;

}

.pong .month {
  font-size: 0.9em;
  font-weight: bold;
  text-transform: uppercase;
  color: #78e80a;
  text-align: center;
  padding: 0px;
  margin: 0px;
	display:block;
}

.fc {
	float:left;
	background: url(../images/users/badges/badge_fc.png) no-repeat left top;
	height:36px;
	width:60px;
	font-size: 0.8em;
	font-weight: normal;
	color: #000000;
	text-align: center;
	padding-right: 15px;
	padding-top:30px;
}

.fc .month {
  font-size: 1.0em;
  font-weight: bold;
  text-transform: uppercase;
  color: #78e80a;
  text-align: center;
}

.fc2 {
	float:left;
	background: url(../images/users/badges/badge_fc.png) no-repeat left top;
	height:66px;
	width:60px;
	font-weight: normal;
	color: #000000;
	text-align: center;
}

.fc2 .month {
  font-weight: bold;
  text-transform: uppercase;
  color: #78e80a;
  text-align: center;
}


.news_badge {
	float:left;
	background: url(../images/users/badges/nieuws.png) no-repeat left top;
	height:45px;
	width:45px;
}

/* -------------------------------
TEAM PAGE
----------------------------------*/


div#teamLeft{
	width:560px;
	float:left;
	margin-right:10px;
}

div#teamRight{
	width:390px;
	float:left;
}

div.teamBlock {
	float:top;
	padding:10px 10px 10px 10px;
	margin-bottom:10px;
	background-color:#FFF;
	-moz-box-shadow: 0 0 5px #ccc;
	-webkit-box-shadow: 0 0 5px#ccc;
	box-shadow: 0 0 5px #ccc;


}