/* 
Yes2web Standaard CSS - V 20070801 
Site.css Bevat alle elementen voor de opmaak van de website, exclusief de opmaak die door TinyMCE gebruikt kan worden.
*/

/*
Projectnaam/algemene info
@author: naam
@version: yyyymmdd-##
*/

body, #publerBody {
	text-align: center;
}

#container {
	position:relative;
	width: 940px;			/* Page width */
	margin:0 auto; 			/* First one for top spacing, second one for center alignment */
	text-align: left;		/* IE undo center alignment */
}
		
#header {
	height: 150px;
}

	#logo {
		margin:0; padding: 0;
		padding-top: 39px; /* 1px white zit in het logo */
	}
	#clipart {
		position: absolute;
		right: 0; top: 20px;
	}
	p#langselect {
		position: absolute;
		right: 0;
		top: 120px;
		color: #919294;
		font-size: 11px;
		line-height: 18px;
	}	
	p#langselect a{
		display: inline-block;
		width: 16px;
		height: 13px;
		text-indent: -5555px;
		position:relative;
		margin-left:6px;
		top:4px;
		*top:0;
		_top:4px;
	}
	p#langselect a.selected{
	/*	border-bottom:2px solid #7db617;*/
		
		
	}
	p#langselect a.en {
		background: url(/images/thebridge/icons/gb.png) center 0 no-repeat;
	}
	p#langselect a.nl {
		background: url(/images/thebridge/icons/nl.png) center 0 no-repeat;
	}
	
	p#langselect a.en-selected {
		background: url(/images/thebridge/icons/gb-selected.png) center 0 no-repeat;
	}
	p#langselect a.nl-selected {
		background: url(/images/thebridge/icons/nl-selected.png) center 0 no-repeat;
	}	
	
div#main { margin-top: 50px;}
.home div#main img {
	margin-bottom: 20px;
}

div#wrapper {
	float:left; width:100%;
}

div#contents {
	margin: 0 240px 0 240px;	/*Geef de margins zo breed als de columns */
	text-align: justify;
	padding-bottom:20px;

}
.home div#contents {
	/*margin: 0 320px 0 320px;*/ /* 3 column layout */
	margin:0;
}
.full div#contents{
	/*margin:0 240px 0 0;*/
}
ul#navigation {
	z-index:100;
	position: absolute;
	top: 146px; /* -4px voor padding */
	left: 0;
 	height: 31px;
	width: 100%;
	list-style: none;
	margin: 0; padding: 4px 0;
	background: url(/images/thebridge/background/sprite.png) left 4px no-repeat;
}
* html ul#navigation {
	background: url(/images/thebridge/background/navigation-ie6.png) left 4px no-repeat;
}
	ul#navigation li {
		position: relative;
		float: left;
		height: 31px;
		background: url(/images/thebridge/background/sprite.png)  right -36px no-repeat;

	}
	ul#navigation li.no-sub {
		background-position: right -68px;
	}
	ul#navigation li:hover, ul#navigation li.hover {
		top: -4px;
		left: -1px;
		height: 39px;
		background-position: right -100px;
	}
	ul#navigation li.no-sub:hover, ul#navigation li.no-sub-hover{ /* ie6 fix */
		background-position: right -139px;
	}
		ul#navigation li a {
			display: block;
			color: #FFF;
			padding: 0px 22px;
			margin: 1px 1px 1px 0; 
			line-height: 29px;
			font-size: 14px;
			text-decoration: none;
		}
		ul#navigation li:hover a, ul#navigation li.hover a {
			color: #000;
			background: url(/images/thebridge/background/sprite.png)  -470px -100px no-repeat;
			padding: 4px 21px 4px 23px;
			margin: 0 1px 0 0; 
			line-height: 31px;
		}
		
		ul#navigation li.no-sub a:hover {
			background-position: -470px -139px;
		
		}
		ul li.selected a {
			background: url(/images/thebridge/background/sprite.png)  center -36px no-repeat;
		}
		body.home ul li.selected a {
			background: url(/images/thebridge/background/sprite.png)  left -36px no-repeat;
		}
		
		ul#navigation li ul {
			position: absolute;
			display: none;
			margin: 0;
			width: 180px;
			border-bottom: 1px solid #adadad;
			list-style: none;
			background: #f7f7f7 url(/images/thebridge/background/sub-ul.png) top left repeat-y;
			*border-right:1px solid #adadad;
		}
		
		ul#navigation li:hover ul, ul#navigation li.hover ul {
			display: inline-block;
			margin-top:-4px;
			z-index:1000;
		}
			ul#navigation li ul li, ul#navigation li ul li:hover, ul#navigation li ul li.hover {
				top: 0px; left: 0px; padding: 0; margin: 0;
				float: none;
				background: #f7f7f7 url(/images/thebridge/background/sub-ul.png)  top right repeat-y;
				*background:none;
				*padding:1px 0;
				margin-left: 1px;
				height: auto;
				
			}
			ul#navigation li ul li:hover, ul#navigation li ul li.hover {
			
			}
			ul#navigation li:hover ul li a, ul#navigation li.hover ul li a {
				background: none;				
				line-height:18px !important;
				color: #52a212;
				padding: 0 5px 0 15px; margin: 0;
				background: none;
				font-weight:bold;
				font-size:.9em;
				
			}
			* html ul#navigation li.hover ul li a {
				display: inline;
			}
			ul#navigation li:hover ul li.first a, ul#navigation li.hover ul li.first a {
				padding-top: 12px; 
				display:inline-block;
			}
			ul#navigation li:hover ul li.last a, ul#navigation li.hover ul li.last a {
				padding-bottom: 8px; 
			
			}
			
			ul#navigation li ul li a:hover, ul#navigation li ul li.selected a {
				color: #000;
				background: none;
			}
			
			ul#navigation li#searchform {
				margin: 0; position: static;
				padding: 5px 7px 0 0;
				float: right;
				height: auto;
				background: none;
			}
			ul#navigation li#searchform input {
				border: none;
				background: none;
				width: 96px;
				font-size: 11px;
				color: #919294;
				line-height:1em;
				position:relative;
				*top:-2px;
			}
			 ul#navigation li#searchform button  {
				border: none;
				background: none;
				width: 20px;
				text-indent: -5555px;
				cursor:pointer;
			 }
div#empty-left-column{
	float:left;
	width:220px;
	margin-left:-940px;
}		
ul#sub-navigation{
	float:left;
	width:220px;				/* De breedte + padding + border + margin moet even breed zijn als de margins van de contents */
	list-style: none;
	margin-left:-940px; 	/* Zo breed als de container */
	padding-top: 17px;
	background: url(/images/thebridge/background/sprite.png) left -65px no-repeat;
}
	ul#sub-navigation li {
		background: url(/images/thebridge/background/sprite.png) -1px -95px no-repeat;	
	}
	ul#sub-navigation li.last{	
		background: url(/images/thebridge/background/sprite.png) -221px -65px no-repeat;
		height: 35px;
	}	
		ul#sub-navigation li a{
			padding: 0 30px;
			background: none;
			font-size: 14px;
			color: #53a212;
			text-decoration: none;
			background: url(/images/thebridge/background/sprite.png) -914px -183px no-repeat;	
		}
		ul#sub-navigation li a:hover, ul#sub-navigation li.selected a {
			color: black;
		}
		ul#sub-navigation li.selected a{
			background: url(/images/thebridge/background/sprite.png) -914px -204px no-repeat;	
		}
		ul#sub-navigation li.selected ul{
			display: block;
		}
		ul#sub-navigation ul{
			display: none;
			margin: 0;
			list-style: none;
		}
			ul#sub-navigation ul li.last{
			/*	height: auto;*/
			}
				ul#sub-navigation li ul li a{
					padding: 0 20px 0 37px;
					color: #999999;
					font-size: 12px;
					font-weight: bold;					
					display: inline-block;
					background:url(/images/thebridge/background/subnav-bullet.png) no-repeat 30px 11px !important;
				}
				ul#sub-navigation li.selected ul li a{
					color: #999999;
				}
				ul#sub-navigation li ul li.selected a{
					color: black;
				}

.home #left-column {
	float: left;
	margin-left: -940px;
	width: 300px;
}

#right-column {
	float: left;
	margin-left: -220px;
	width: 220px;
	_margin-left:-230px;
		_position:relative;
	_right:-10px;
	
}

.home #right-column {
	width: 300px;
	margin-left: -300px;
}


		
#footer {
	clear:left;
	width:100%;
	border-top: 1px solid #53A211;
	text-align: right;
	margin-bottom:20px;
	padding-top:6px;
}
#footer address{
	float: left;
}

ul#sitemap, ul#matchlist{
	list-style:none;
	margin:0;
}
ul#sitemap ul{
	list-style:none;	
	}
	ul#sitemap ul li a{	
		color:#333;
		text-decoration:none;
		font-size:.9em;
	}
	ul#sitemap ul li li a{
		color:#999;
	}
	
.loading{
	background:url(/images/thebridge/icons/loading.gif) no-repeat 50% 50%;
}

div#news-holder{
	min-height:100px;
	_height:100px;
}

.invisible{
	display:none;
}

ul#peoplelist{
	padding:0;
	margin:0;
	list-style:none;
}
ul#peoplelist li{
	float:left;
	margin-right:20px;
	height:260px;
	width:200px;
	text-align:left;
}
	
ul#matchlist{
	width:450px;
}

h2#match-title{
	text-align:left;
}

/* Match */
ul#matchlist li{
	float:left;
	margin:3px;
	padding:1px;
	padding-bottom:0;
	*paddig-bottom:2px;
	
}


ul#matchlist li img{
	cursor:pointer;
	margin:0;
	padding:0;
	line-height:1.5em;
	display:block;
}

ul#matchlist li.clicked{
	background:#555;
}
ul#matchlist li.main{
	background: #53A211;

}
ul#matchlist li.main img{
	cursor:default;
	}
	
div#match-main, div#match-with{
	width:110px;
	text-align:center;
	height:235px;
	position:relative;
	overflow:hidden;
}
div#match-main a, div#match-with a{
	position:absolute;
	display:block;
	width:110px;
	bottom:0;
	text-align:center;
}
div#match-result{
	width:155px;
	height:235px;
	position:relative;
	overflow:hidden;
	float:right;
}
div#match-result span{
	position:absolute;
	color:#cfcfcf;
	font-weight:bold;
	font-size:1.3em;
	line-height:1.3em;
}

/*
div#match-result span#pos-0{
	font-size:1.3em;
	top:0;
	right:0;
}
div#match-result span#pos-1{
	font-size:1.2em;
	top:38px;
	left:0;
}
div#match-result span#pos-2{
	font-size:1.5em;
	color:#53A211;
	top:80px;	
}
div#match-result span#pos-3{
	font-size:.9em;
	left:5px;
	bottom:95px;
}
div#match-result span#pos-4{
	font-size:1.4em;
	right:0;
	bottom:65px;
}
div#match-result span#pos-5{
	font-size:1em;
	bottom:40px;
	left:20px;
}

*/

div#match-result span#pos-2{ /*old 0*/
	font-size:1.3em;
	top:0;
	right:0;
}
div#match-result span#pos-3{ /*old 1*/
	font-size:1.2em;
	top:38px;
	left:0;
}
div#match-result span#pos-0{ /*old 2*/
	font-size:1.5em;
	color:#53A211;
	top:80px;	
}
div#match-result span#pos-5{ /*old 3*/
	font-size:.9em;
	left:5px;
	bottom:95px;
}
div#match-result span#pos-1{ /*old 4*/
	font-size:1.4em;
	right:0;
	bottom:65px;
}
div#match-result span#pos-4{ /*old 5*/
	font-size:1em;
	bottom:40px;
	left:20px;
}



#match-main, #match-with, #plus, #equals, #match-result{
	float:left;
	}
	
/* Carousel CSS */
/**
 * This <div> element is wrapped by jCarousel around the list
 * and has the classname "jcarousel-container".
 */
.jcarousel-container {
    position: relative;
}

.jcarousel-clip {
    z-index: 2;
    padding: 0;
    margin: 0;
    overflow: hidden;
    position: relative;
}

.jcarousel-list {
    z-index: 1;
    overflow: hidden;
    position: relative;
    top: 0;
    left: 0;
    margin: 0;
    padding: 0;
}

.jcarousel-list li,
.jcarousel-item {
    float: left;
    list-style: none;
    /* We set the width/height explicitly. No width/height causes infinite loops. */
    width: 125px;
    height: 200px;
}

/**
 * The buttons are added dynamically by jCarousel before
 * the <ul> list (inside the <div> described above) and
 * have the classnames "jcarousel-next" and "jcarousel-prev".
 */
.jcarousel-next {
    z-index: 3;
    display: none;
}

.jcarousel-prev {
    z-index: 3;
    display: none;
}

/* SKIN HERE */
.jcarousel-skin-bridge .jcarousel-container {
    margin-bottom:10px;
}

.jcarousel-skin-bridge .jcarousel-container-horizontal {
    width:860px;
    padding: 0 40px;
}

.jcarousel-skin-bridge .jcarousel-clip-horizontal {
    width:  860px;
    height: 200px;
}

.jcarousel-skin-bridge .jcarousel-item {
    width: 125px;
    height: 200px;
}


.jcarousel-skin-bridge .jcarousel-item-horizontal {
    margin-right: 22px;
}


.jcarousel-skin-bridge .jcarousel-item-placeholder {
}

/**
 *  Horizontal Buttons
 */
.jcarousel-skin-bridge .jcarousel-next-horizontal {
    position: absolute;
    top: 63px;
    right: 5px;
    width: 21px;
    height: 24px;
    cursor: pointer;
    background: url(/images/thebridge/icons/next.png) no-repeat 0 0;
}

.jcarousel-skin-bridge .jcarousel-prev-horizontal {
    position: absolute;
    top: 63px;
    left: 5px;
    width: 32px;
    height: 32px;
    cursor: pointer;
    background: url(/images/thebridge/icons/prev.png) no-repeat 0 0;
}