@import "lib.less";
/*=================
Write some less
=================*/


// Hoofdkleuren
@hoofdkleur: #B30881;
@bijkleur: #434343;

// Basic styles


h1, h2 {font-family: league-gothic; text-transform: uppercase; }
h2{font-size:24px;margin-bottom:13px;}
.titel h2, h2.titel{font-family: 'covered by your grace', cursive;font-weight:normal;font-size:21px;}
html, body, p{font-family:helvetica, arial, sans-serif;font-size:13px;line-height:165%;color:#444;}
a{color:@hoofdkleur; text-decoration: none; &:hover{text-decoration:underline;}}
.container_12{position:relative;}
.content {background:url('../images/frontend/pattern-streepjes.png') repeat;padding:165px 0 35px 0;}

// Basic classes
.img(@kader:5px){padding:@kader;background-color:white;.box-shadow(0,0,@kader,rgba(0,0,0,0.15));border:1px solid #f0f0f0;}


/*=================
Write some more
=================*/

/*--- Header ---*/

header#header{
	position: relative;
	background:url('../images/frontend/pattern-streepjes.png') repeat #DFDADD;
	
	#header-bollen{position:absolute;top:37px;right:-50px;}
	
	nav{		
		height: 37px;
		
		ul{
			margin:0 0 0 0;
				
			li{
				float: left;
				list-style-type: none;
				position:relative;
				
				&.current_page_item:after {
						content: "";
						display: block;
						position: absolute;
						bottom: -10px;
						left:45%;				
						border-color: @bijkleur transparent transparent transparent;
			  			border-style:solid;
			  			border-width:5px;
			  			width:0;
			  			height:0;
					}
				
				a{
					display: block;
					font-size: 12px;
					padding:11px 20px 5px 20px;
					text-decoration: none;
					color: @hoofdkleur;
					background-color:rgba(255,255,255,0.39);
					text-transform: uppercase;
					font-weight: bold;
				}
				
									
				a:hover, &.current_page_item a {
					background-color: @bijkleur;
					text-decoration: none;
					color:white;
					text-shadow: rgba(0,0,0,1) 1px 1px 1px;
					.rounded-corners(0 0 5px 5px);						
				}
				
				a:hover {
					background-color: @hoofdkleur;
					color: #FFF;
				}
				
				&.current_page_item a:hover {
					background-color: @bijkleur;
				}
			}
		}
	}

					
#zoekform{
	float: right;
	margin-top:4px;

	input {
		height: 15px;
		border: none;
		.rounded-corners(15px 0 0 15px);
		margin-right: -4px;
		padding:5px 0 5px 7px;
		border-style:solid;
		border-width: 1px 0 1px 1px;
		border-color: #c8c8c8;
		width:170px;
		font-size:12px;
		float: left;
	}
	
	button {
		height: 27px;
		width: 30px;
		text-indent: -9999px;
		padding: 4px;
		.rounded-corners(0 15px 15px 0);
		background: url('../images/frontend/vergrootglas.png') no-repeat center white;
		border-style:solid; 
		border-width: 1px 1px 1px 0;
		border-color: #c2c2c2;
		cursor: pointer;	
		}}
	

.ie7 #zoekform{input{height: 14px;}button{height: 26px;}}
.ie8 #zoekform{input{height: 14px; margin-top: -5px; }#submit-ff{height: 26px;padding-top:5px;}}}


@-moz-document url-prefix(){
	#submit-ff{padding-top:3px !important;}
}
			
.bovenbalk{
	height:100px;
	padding:45px 0 20px 0;
	width:100%;
	position:absolute;
	top:0;
	background:url('../images/frontend/kleurvlak-home.png') repeat-x;
	z-index:-1;
}	
			

/*--- Home ---*/

.home .bovenbalk{height:251px;}
.home .bovenbalk .container_12{display:none;}
.home .content {padding-top:84px;position:relative;}

#logo-maxha{
	position:absolute;
	top:-15px;left:-25px;
}

h1#slogan-maxha{
	margin:10px 0 37px 120px;
	font-size: 53px;
	height: 90px;
		
	span {
		float:left;
		display: block;
		
		&:first-child { 
			width: 180px; 
			&:after {
				content: " en door";
				margin-top: 30px;
				display: block;
				font-size: 140%;
			}
		}

		&:last-child { font: normal 18px 'Permanent Marker'; padding-top: 24px; }
		
		&.jongeren {
			font-size: 105px;
			color: #7c3264;
			margin: 22px 0 0 0;
			letter-spacing: -2px;
		}
	}	
}

.ie7, .ie8{ #slogan-maxha{display:none;}}
#slogan-maxha-img{display:none;}
.ie7, .ie8{ #slogan-maxha-img{display:block;margin:0 0 30px 135px;}}

header.titel{
	background: url('../images/frontend/streepjes-pattern-grunge.png') repeat-x;
	padding:4px 10px 10px 10px;
	overflow:hidden;
	margin-bottom:15px;
	
	h1{float:left;font-size:21px;font-family:'covered by your grace';}
	
	a{
		float:right;
		padding-right:25px;
		text-decoration:none;
		font-weight:bold;
		background: url('../images/frontend/rss.png') no-repeat right center;
		
		&:hover{text-decoration:underline;}
	}}
	.ie7 header.titel{margin-bottom:17px;}

.media.mixcloud{

	overflow: visible;
	background: none;
	
	header{
		background:url('../images/frontend/mixcloud-header-bg.jpg');

		padding:12px 14px;
		.rounded-corners(4px 4px 0 0);
		
		img,  a{float:left;margin-right:16px;}
		
		h1{
			font-family: 'covered by your grace', cursive;text-transform:capitalize;color:#f1f1f1;margin:5px 10px 0 0;font-size:21px;						
			span{font-size:28px;color:white;font-family:'league-gothic';margin-right:7px;span{text-transform:lowercase;}}
			float: left;
		}
		
		a.button{
 			color: #fff;
		  	.rounded-corners(3px);
		  	padding: 7px 11px 0 10px;
		  	.box-shadow(0px, 1px, 1px, rgba(255, 255, 255, 0.25));
	 	 	.gradient(#4b4b4b, 12%, 49%, 51%);
		  	text-shadow: 0 -1px 1px #000;
		  	border: 1px solid #050505;
		  	text-decoration: none;
		  	display: inline-block;
		  	font-weight: bold;
		  	line-height: 1;
		  	cursor: pointer;
		  	margin: 4px 0 0 0;		  	
		  	img{float:right;margin:-2px 0 0 8px;}
		}
		
		
	}
		
		ul {
			position: relative;
			float:right;
			z-index: 10000000;
			
			#mixcloud-select-list {
				position: absolute;
				width: 130%;
				right: 0;
				top: 34px;
				background: #2c2c2c;
				color: #FFF;
				.rounded-corners( 0 0 4px 4px);
				
				display: none;
				
				ul {
					width: 100%;
				}
				
				li {
					width: 100%;
					cursor: pointer;
					overflow: hidden;
					
					&:nth-child(even) {
						background: #333;
						
					}
					
					&:hover {
						background: #444;
					}
										
				}
				
				a {
					display: block;
					padding: 3px 0 1px 8px;
					color: #FFF;
					
					&:hover {
						text-decoration: none
					}
				}
			}	
	}

}

.ie7 .media.mixcloud ul {
	width: 200px;
}

#mixcloud-embed {
	position: relative;
	z-index: 0;
}

	
.ie7 .media.mixcloud a.button{width:160px;height:18px; img{position:absolute;}}

h2.titel{
	background-color:rgba(179,8,129, 0.08);
	width:263px;
	margin:15px 8px 10px 0;
	padding:5px 16px;
	float:left;
}

.oldie h2.titel {
	background: #F9ECF5;
	overflow: hidden;
}

.content ul.twitter{
	padding-left:0;
	clear:both;
	margin-top: -10px;
	li{
		list-style-type:none;
		padding:4px 10px;
		margin-bottom:4px;
		line-height:130%;
		font-size: 12px;
		
		a.tweeter { color: #444; text-decoration: none; font-weight: bold; }
	
		&:nth-child(odd) {
		background: rgba(0,0,0,0.03);
		}}}
		.ie7 .content ul.twitter{margin-top:-12px;}
	
a.soc-button{
	display:block;
	margin:15px 0 10px 0;
	float:right;
}

/*--- Content ---*/

.content h1{
	font-size: 160%;
}

.content article {p, li, h1, h2{width:720px;}}
.content article.nieuwsbericht.overzicht {p, li, h1, h2{width: auto;}}

/*--- Nieuwsberichten ---*/

article.nieuwsbericht{ 

	span{
		display: block;
		font-size: 11px;
		color: #777;
		padding-top: 2px;
	}
	
	.datum{
		font-size:20px;
		padding:3px 5px;
		display:inline;
		float:left;
		margin:0;
		color:white;
		font-family: league-gothic;
		
	&.dag{background-color:black;.rounded-corners(4px 0 0 4px);}
	&.maand{background-color:#3f3f3f;.rounded-corners(0 4px 4px 0);margin-right:15px;}
	
	}}

// Nieuwsberichten overzicht

article.nieuwsbericht.overzicht{
	margin-bottom: 30px;
	padding-bottom: 30px;
	border-bottom: 1px dotted #d2d2d2;
	overflow: auto;
	clear: both;

	img{
		float: left;
		margin-right: 15px;
		width: 18%;
		.img();
	}
	
	div{
		float: left;
		width: 75%;
	}

	h1{		
		margin:0;
		display:block;
		
		a{
			display: inline;
			font-size:32px;			
			line-height:1em;
			text-decoration: none;

			&:hover{
				text-decoration:underline;
			}}}

	p{
		margin-bottom: 5px;
		clear:both;
		
		a{
			text-decoration: underline;
			color: @hoofdkleur;
			
			&:hover{
				text-decoration:none;
			}}}}
			
.sharebox {
	background: rgba(0,0,0,0.09);
	
	.rounded-corners(260px);
	float: right;
	width: 260px;
	height: 260px;

}

.prevnext {
	font-weight: bold;
	font-size: 11px;
	text-transform: uppercase;
}

.comments {
	margin-top: 40px;
}

.sharebuttons {
	
	overflow: hidden;
	padding: 90px 0 0 50px;
	
	li {
		list-style-type: none;
		margin: 0;
		float: left;
	}
}

.subpages {
	
	text-transform: uppercase;
	font-size: 14px;
	font-weight: bold;
	
	a {
		padding: 5px 0 2px 5px;
		display: block;
		width: 80%;
	}
	
	li:first-child {
		font-weight: normal;
		.opacity(0.7);
		font-size: 12px;
		margin-bottom: 3px;
	}
	
	li.current_page_item a {
		background: @hoofdkleur;
		color: #FFF;
		position: relative;
		.rounded-corners(2px);
		
		&:after {
			content: "";
			display: block;
			position: absolute;
			top: 10px;
			right: -10px;				
			border-color:  transparent transparent transparent @hoofdkleur;
  			border-style:solid;
  			border-width:5px;
  			width:0;
  			height:0;
		
		}
		
		&:hover {
			text-decoration: none;
		}
		
	}
	
}


// Button
  
  a.button{
  	color: #fff;
  	.rounded-corners(15px);
  	padding: 7px 10px 12px 10px;
  	.box-shadow-inset(0, 2px, 2px, 0.15);
  	text-shadow: 0 1px 1px #222;
  	border: 1px solid darken(@hoofdkleur, 5%);
  	text-decoration: none;
  	display: inline-block;
  	font-weight: bold;
  	line-height: 1;
  	position: relative;
  	cursor: pointer;
  	
  	&.vorige{background: url('../images/frontend/vorige-pijl.png') no-repeat 6px center @hoofdkleur;padding-left:30px;}
  	&.volgende{background: url('../images/frontend/volgende-pijl.png') no-repeat 97% center @hoofdkleur;padding-right:33px;}
  	
  	&:hover{
  		text-decoration: underline;
  	}}
  	.ie7 .button{padding:7px 15px 11px 10px;}


/*--- Zoekresultaten ---*/

.search-results{
	article{
		margin-top: 20px;
		
		p{margin-bottom: 0;}
	}}

/*--- Footer ---*/

.media{
	background: url('../images/frontend/pattern-ruitjes.png') repeat #700A52;
	overflow: hidden;

	#footer-border{
		width:100%;
		height:35px;
		background: url('../images/frontend/overgang-footer.png') repeat-x white;
	}
	
	h2{
		font-family: 'Permanent Marker', cursive;
		color:white;
		text-shadow: 0 1px 1px #222;
		font-size:25px;
		margin-bottom:25px;
	}
	

			
	.flickr-groot{
		width:386px;
		height:245px;
		overflow: hidden;
		border:3px solid #FFF;
		margin-bottom:8px;
		float:left;
		text-align: center;
		vertical-align: middle;
		
		img {
			width: 130%;
			vertical-align: middle;
		}
		
	}
	
	.flickr-klein{
		width:69px;
		height:69px;
		float:left;
		margin:1px 10px 11px 0;
		.img(3px);
	}
	
	a.meer{
		clear:both;
		color:white;
		margin:20px 0;
		display:block;
		padding-top:5px;
		padding-bottom:7px;
		background-position:center right;
		background-repeat:no-repeat;
		text-decoration:none;	
		
	&.fotos{background-image: url('../images/frontend/flickr-button.png');width:145px;}
	&.videos{background-image: url('../images/frontend/youtube-button.png');width:125px;float:right;}
	&:hover{text-decoration:underline;}
	}
	
}


	footer{
		clear:both;
		background: url('../images/frontend/pattern-ruitjes.png') repeat #66094A;
		padding:28px 0 15px 0;
		overflow:hidden;
		
		h2{font: normal 16px 'Permanent Marker';float:left;margin-right:45px;margin-top:-5px;color:#FFF;}
		
		a{
			float:left;
			margin-right:31px;			
		
			&#metatalk{
				float:right;
				margin:10px 0 0 0;
				padding-bottom:0;
				&:hover img{background-color:darken(@hoofdkleur,11%);}
			}
		}
	}
		

.oldie #footer-border{
	background: url('../images/frontend/pattern-ruitjes.png') repeat #700A52;
}

/*--- Tekstpagina's --*/

.pagina-titel{
	padding:25px 0;
	img{width:65px;float:left;margin-right:20px;}
	h1{font-size:52px;float:left;line-height:1em;color:#222;margin-top:10px;}
}