/* 
    Document	: bc_layout
    Gemaakt op	: 31-okt-2011, 14:11:17
    Auteur		: Communicatiebureau fourdesign_
    Omschrijving:
        In dit bestand staat de css voor de basis indeling en layout van het bluecms.
*/


* {
	margin:0;
	padding:0;
}

:focus {
	outline: none;
}

a img {
	border: 0;
}

.clear {	
	clear:both;	
}

html {
	overflow-y: scroll;
}

html, body { 
	height: 100%;
	min-width: 960px;
}

	body > #wrapper {
		width: 100%;
		margin: 0;
		min-height: 100%;
		background-image: url("../../img/bg-small.png");
		background-position: center top;
		background-repeat: repeat-y;
	}

		.navigation {
			position: relative;
			z-index: 3;
			width: 100%;
			background-color: #00365E;
			height: 30px;
		}
		
			.navigation > .container {
				width: 950px;
				margin: 0 auto;
			}
				
				ul.menu {
					float: left;
					margin-left: 0px;
				}
				
					ul.menu li {
						display: block;
						float: left;
						margin: 0;
						margin-right: 0px;
						
						
		
					}
						ul.menu li:hover a {
							background-color: #FFF;
							color: #000;
						}
					
						ul.menu li a {
							display: block;
							font-size: 13px;
							color: #adb0b7;
							font-weight: bold;
							text-decoration: none;
							display: block;
							padding: 4px 14px;
							
							-webkit-transition: none;
							-moz-transition: none;
							-o-transition: none;
							transition: none;
						}
													
						ul.menu li a.active {
							color: #FFFFFF;
							font-weight: bold;
							background: #0098D9;
						}	
						
							ul.menu > li > a.active > span.line {
								border-color: #0098D9;
							}
						
						ul.menu li ul {
							display: none;
							position: absolute;								
							background-color: #384f5c;
							list-style: none;
							min-width: 160px;
							padding: 0px 0 0;
							margin: 0px 0 0 0px;										
							-webkit-box-shadow: 0px 4px 4px 1px rgba(200, 200, 200, 75);
							box-shadow: 0px 4px 4px 1px rgba(200, 200, 200, 75);
						}
						
							ul.menu li:hover > ul {
								display: block;
							}
						
							ul.menu li ul li {
								display: block;
								float: none;
								margin: 0;
								
							}
							
								ul.menu li ul li a {
									display: block;
									padding: 5px 12px;
									font-size: 13px;
									color: #adb0b7;
									font-weight: normal;
									text-decoration: none;
	
									-webkit-transition: all 150ms ease-in-out;
									-moz-transition: all 150ms ease-in-out;
									-o-transition: all 150ms ease-in-out;
									transition: all 150ms ease-in-out;
								}
								
									ul.menu li:hover ul li:last-of-type a {
										border-bottom: none;
									}
									
									ul.menu li ul li ul {
										display: none;
										position: absolute;			
										background-color: #384f5c;
										list-style: none;
										min-width: 160px;
										left: 160px;
										padding: 0;
										margin: -33px 0 0 0px;			
										-webkit-box-shadow: 4px 4px 4px 1px rgba(200, 200, 200, 75);
										box-shadow: 4px 4px 4px 1px rgba(200, 200, 200, 75);
									}
									
										ul.menu li ul > li:hover ul {
											display: block;
										}
						
							
							ul.menu li:hover ul li > a:hover, 
							ul.menu li:hover ul li > a.active {
								color: #000;
								background: #efefef;
							}
								
				div.selection {
					float: right;		
					height: 25px;					
				}
				
					.user.selection span {
						padding: 4px 6px 2px !important;
					}
				
					div.selection > span {
						cursor: pointer;
						
						color: #ADB0B7;
						display: block;
						padding: 4px 12px;
						margin-left: 0px;
						font-weight: bold;

					}
					
						div.selection > span i {
							margin-right: 9px;
						}
					
					div.selection.website > span, div.selection.language > span    {
						background: url('../../img/dropdown-white.png') no-repeat right 8.5px;
						padding: 4px 23px 4px 7px !important;
					}
					
					div.selection > span:hover, 
					div.selection:hover > span {
						background-color: #FFF;
						color: #000;
						font-weight: bold;
					}
					
					div.selection > .dropdown {
						display: none;
						position: absolute;
					}
					
					div.selection:hover > .dropdown {
						display: block;
						position: absolute;
						width: 168px;
						background-color: #FFF;
						list-style: none;
						min-width: 100px;
						padding: 0px 0 0;
						margin: 0px 0 0 0px;
						-webkit-box-shadow: 0px 4px 4px 1px rgba(200, 200, 200, 75);
						box-shadow: 0px 4px 4px 1px rgba(200, 200, 200, 75);
					}
					
						div.selection > .dropdown > a {
							display: block;
							color: #000;
							font-weight: normal;
							padding: 5px 12px;
							border-bottom: none;
							
							-webkit-transition: all 150ms ease-in-out;
							-moz-transition: all 150ms ease-in-out;
							-ms-transition: all 150ms ease-in-out;
							-o-transition: all 150ms ease-in-out;
							transition: all 150ms ease-in-out;
						}
						
							div.selection > .dropdown > a:last-of-type {
								border-bottom: none;
							}
						
						div.selection > .dropdown > a:hover {
							color: #000;
							background: #efefef;
						}
							
		.actionmenu {
			width: 100%;
			background: #EFEFEF;
			border-bottom: 1px solid #FFF;
			margin: 0 0 5px 0;
			box-shadow: 0px -1px 3px #000;
			-webkit-box-shadow: 0px 1px 3px #C4C4C4;
		}
		
			.actionmenu > .container {
				width: 950px;
				margin: 0 auto;
				padding: 7px 0;
				overflow: hidden;
			}
			
				.actionmenu > .container > .left {
					float: left;
					width: 210px;
				}

					.actionmenu > .container > .left > h1#logo	{
						display: block;
						width: 150px;
						height: 31px;
						text-indent: -99999px;
						float: left;
						margin: 18px 0 0 0;
					}

						.actionmenu > .container > .left > h1#logo > a {
							display: block;
							width: 150px;
							height: 31px;
							background-image: url("../../img/main/logo.png");
							margin-top: -12px;
							background-repeat: no-repeat;
						}

					.actionmenu > .container > .left >  img.loader {
						display: block;
						float: left;
						margin: 14px 0 0 30px
					}
				
				.actionmenu > .container > .right {
					float: right;
					width: 1200px;
				}

				.actionmenu > .container > .right > .items {
					margin: 11px 0 0;
				}

					
#wrapper > div.actionmenu > div.container > div.right > div.items > div.item {
	display:			inline-block;
	float:				left;
	position:			relative;
	border:				1px solid #C5C7C8;
	color:				#152A2A;
	padding:			1px 9px 1px 9px;
	margin:				0 8px 8px 0;
	cursor:				pointer;
	
	-webkit-border-radius: 2px;
	border-radius: 2px;
	
	background: #f9f9f9;
	background: -moz-linear-gradient(top,  #f9f9f9 0%, #ececec 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f9f9f9), color-stop(100%,#ececec));
	background: -webkit-linear-gradient(top,  #f9f9f9 0%,#ececec 100%);
	background: -o-linear-gradient(top,  #f9f9f9 0%,#ececec 100%);
	background: -ms-linear-gradient(top,  #f9f9f9 0%,#ececec 100%);
	background: linear-gradient(to bottom,  #f9f9f9 0%,#ececec 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f9f9f9', endColorstr='#ececec',GradientType=0 );
	
	-webkit-transition: all 250ms ease-in-out;
	-moz-transition: all 250ms ease;
	-o-transition: all 250ms ease;
	transition: all 250ms ease;
}

#wrapper > div.actionmenu > div.container > div.right > div.items > div.item.color {
	padding:			1px 9px 1px 4px;
}

#wrapper > div.actionmenu > div.container > div.right > div.items > div.item:hover {
	background:			#e1e2e3;
}

#wrapper > div.actionmenu > div.container > div.right > div.items > div.item:active {
	background:			#C8CACD;
}

#wrapper > div.actionmenu > div.container > div.right > div.items > div.item > span.icon-small:before {
	margin-right:		5px;
	margin-top:			1px;
}
				
					
					.actionmenu > .container > .items > button.related {
						-webkit-box-shadow: inset 0px 0px 2px 1px rgba(0, 152, 217, 0.5);
						-moz-box-shadow: inset 0px 0px 2px 1px rgba(0, 152, 217, 0.5);
						box-shadow: inset 0px 0px 2px 1px rgba(0, 152, 217, 0.5); 
					}
					
					.actionmenu > .container > .items > button.related:hover, 
					.actionmenu > .container > .items > button.related.active 
					{
						-webkit-box-shadow: inset 0px 0px 5px 1px rgba(0, 152, 217, 0.5);
						-moz-box-shadow: inset 0px 0px 5px 1px rgba(0, 152, 217, 0.5);
						box-shadow: inset 0px 0px 5px 1px rgba(0, 152, 217, 0.5); 
					}
		
		#wrapper > .content {
			width: 950px;
			margin: 0 auto;
			overflow: auto;
			padding-bottom: 50px;
		}
		
			.content > .left, 
			.content > #left {
				float: left;
				width: 230px;
				margin:	17px 0 0 0;
				padding: 0 0 25px;
			}
			
			.content > .right,  
			.content > #right {
				width: 700px;
				float: right;
				margin:	17px 0 0 0;
				padding: 0 0 25px 0;
			}
			
			html.ie7 .content > .right {
				width: auto;
				margin: 17px 0 0 25px;
			}
			
			html.ie7 .content > .right .block .content .widget-tab {
				margin-left: 10px;
			}
								
.page-title {
	margin: 5px 0 10px;
}


 #footer {
 	background: #f9f9f9 url('../../img/footer.png');
 	height: 50px;	
 	position: relative;
	margin-top: -50px; /* negative value of footer height */
	height: 50px;
	clear:both;
	color: #848484;
 }
 
 	.footer-content {
 		width: 950px;
 		margin: 0 auto;
 		padding: 15px 0 0;
 	}
 	
 		.footer-content a {
 			color: #848484;
 			font-weight: normal;
 			border-bottom: 1px dotted #848484;
 		}
 		
 			.footer-content a:hover {
 				color: #152A2A;
 				font-weight: normal;
 				border-bottom: 1px solid #152A2A;
 			}
 	
 		.footer-left {
 			float: left;
 		}
 		
 		.footer-right {
 			float: right;
 		}
 
		
@media screen and (max-width: 1050px) {

	#wrapper .bc-tree-container .bc-tree-row {
		width: 201px;
	}
	
	
	
	#wrapper .bc-tree-container .bc-tree-row > .bc-tree-label {
		width: 186px;
	}
	
	#wrapper .bc-tree-container .bc-tree-container .bc-tree-row > .bc-tree-label {
		width: 161px;
	}
	
	#wrapper .bc-tree-container .bc-tree-container .bc-tree-container .bc-tree-row > .bc-tree-label {
		width: 141px;
	}
	
	#wrapper .bc-tree-container .bc-tree-container .bc-tree-container .bc-tree-container .bc-tree-row > .bc-tree-label {
		width: 121px;
	}
	
	#wrapper .bc-tree-container .bc-tree-container .bc-tree-container .bc-tree-container .bc-tree-container .bc-tree-row > .bc-tree-label {
		width: 101px;
	}
	
	#wrapper .bc-tree-container .bc-tree-row > .bc-tree-label > span {
		width: 167px;
	}
	
	#wrapper .bc-tree-container .bc-tree-container .bc-tree-row > .bc-tree-label > span {
		width: 142px;
	}
	
	#wrapper .bc-tree-container .bc-tree-container .bc-tree-container .bc-tree-row > .bc-tree-label > span {
		width: 122px;
	}
	
	#wrapper .bc-tree-container .bc-tree-container .bc-tree-container .bc-tree-container .bc-tree-row > .bc-tree-label > span {
		width: 102px;
	}
	
	#wrapper .bc-tree-container .bc-tree-container .bc-tree-container .bc-tree-container .bc-tree-container .bc-tree-row > .bc-tree-label > span {
		width: 82px;
	}

	#wrapper > div.actionmenu > div.container > div.left {
		width:			220px;
	}
	
	#wrapper > div.actionmenu > div.container > div.right {
		width:			730px;
	}
	
}		
		
		
@media screen and (min-width: 1050px) and (max-width: 1499px) {
	#wrapper {
		background-image: url("../../img/bg-middle.png") !important;
	}
	
	#wrapper .bc-tree-container .bc-tree-row {
		width:  241px !important;
	}
	
	#wrapper .bc-tree-container .bc-tree-row > .bc-tree-label {
		width: 226px;
	}
	
	#wrapper .bc-tree-container .bc-tree-container .bc-tree-row > .bc-tree-label {
		width: 201px;
	}
	
	#wrapper .bc-tree-container .bc-tree-container .bc-tree-container .bc-tree-row > .bc-tree-label {
		width: 181px;
	}
	
	#wrapper .bc-tree-container .bc-tree-container .bc-tree-container .bc-tree-container .bc-tree-row > .bc-tree-label {
		width: 161px;
	}
	
	#wrapper .bc-tree-container .bc-tree-container .bc-tree-container .bc-tree-container .bc-tree-container .bc-tree-row > .bc-tree-label {
		width: 141px;
	}
	
	#wrapper .bc-tree-container .bc-tree-row > .bc-tree-label > span {
		width: 200px;
	}
	
	#wrapper .bc-tree-container .bc-tree-container .bc-tree-row > .bc-tree-label > span {
		width: 175px;
	}
	
	#wrapper .bc-tree-container .bc-tree-container .bc-tree-container .bc-tree-row > .bc-tree-label > span {
		width: 155px;
	}
	
	#wrapper .bc-tree-container .bc-tree-container .bc-tree-container .bc-tree-container .bc-tree-row > .bc-tree-label > span {
		width: 135px;
	}
	
	#wrapper .bc-tree-container .bc-tree-container .bc-tree-container .bc-tree-container .bc-tree-container .bc-tree-row > .bc-tree-label > span {
		width: 115px;
	}
	
	#wrapper > .navigation > .container,
	#wrapper > .actionmenu > .container,
	#wrapper > .content,
	#wrapper > .footer-content {
		width: 1030px;
	}
	
		#wrapper > .actionmenu > .container > .left,
		#wrapper > .content > .left, 
		#wrapper > .content > #left  {
			width: 270px;
		}
		
		#wrapper > .content > .right,  
		#wrapper > .content > #right {
			width: 740px;
		}
		
	/* other styles */
		
	ul#header-gallery-container > .sortableitem:nth-child(3n+0) {
	    margin-right: 0;
	}
	
	#gallerywidget ul#header-gallery-container > .sortableitem:nth-child(4n+0) {
		margin-right: 0;
	}
	
	#gallerywidget ul#header-gallery-container > .sortableitem:nth-child(3n+0) {
		margin: 0 10px 10px 0;
	}
	
	ul#widget-fotoalbum-gallery-gallery > .sortableitem:nth-child(4n+0) {
		margin-right: 0;
	}
	
	#wrapper > div.actionmenu > div.container > div.left {
		width: 240px;
	}
	
	#wrapper > div.actionmenu > div.container > div.right {
		width: 790px;
	}
	
}

@media screen and (min-width: 1500px) {	
	#wrapper {
		background-image: url("../../img/bg-full.png") !important;
	}

	#wrapper > .navigation > .container,
	#footer > .footer-content,
	#wrapper > .actionmenu > .container,
	#wrapper > .content,
	#wrapper > .footer-content  {
		width: 1420px;
	}
	
		#wrapper > .content > .left, 
		#wrapper > .content > #left  {
			width: 300px;
		}
		
		#wrapper > .content > .right,  
		#wrapper > .content > #right {
			width: 1105px;
		}
	
	/* other styles */
	
	.sortableitem, .sortableitem-image {
		width: 170px;
	}
		
	.sortableitem:nth-child(6n+6) {
	    margin-right: 0;
	}
}