/*---------------------------------------------------------------------------------------------------+
|                                                                                                    |
|    			Ctrl-V Wireframe - Ctrl-V Multimedia Communications B.V.    						 |
|                                                                                                    |
+-------------------------------------------------+--------------------------------------------------+
|                                                 |                                                  |
|   		 									  |   v 0.0.0                                        |
|   Assigned to:    	Mark van Hagen 			  |   May 2009                                       |
|   Stylesheet:			main.css				  |   http://www.ctrl-v.nl                           |
|                                                 |                                                  |
+-------------------------------------------------+-------------------------------------------------*/


/*-------------------------------------------+
|                                            |
|            BODY AND HTC FIXES	             |
|                                            |
+-------------------------------------------*/

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

body{
	color:#171717;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size:62.5%;
	line-height: 1.8em;
	text-align:left;
	padding: 0;
  	margin: 0;
	background:#1e1e1e url("../img/bg_black.jpg") no-repeat center top;	
/*	background:#fff url("../img/bg_kerst-ctrl-v_2009.jpg") no-repeat center top; */

}

/*-------------------------------------------+
|                                            |
|           		Colors     			     |
|                                            |
+-------------------------------------------*/

.black {		color: #171717;} /* Body tekst */
.red{			color: #f20017;} /* Errors */

.magenta{			color: #bf1b3c;}
.magenta_donker{	color: #a50b15;}
.zacht_roze{		color: #f5e1e6;}
.zachtst_roze{		color: #ffebf1;}
.hard_roze{			color: #ff74b0;}
.grey{				color: #e5e5e5;}



/*-------------------------------------------+
|                                            |
|          			HEADERS		             |
|                                            |
+-------------------------------------------*/

h1, h2, h3, h4, h5, h6{
	line-height: 1.8em;
}

h1{		
	font-size:1.6em;
	color: #bf1b3c;	
	margin: 0px 20px 0px 20px;
}
h2{
	font-size:1.2em;
	font-weight: bold;
	color: #bf1b3c;
	margin: 0px 20px 0px 20px;
}
h3{
	font-size:1.2em;
	font-weight: bold;
	margin: 0px 20px 0px 20px;
}


/*-------------------------------------------+
|                                            |
|          			TEXT		             |
|                                            |
+-------------------------------------------*/

.generic p{
	font-size:1.2em;
	line-height:1.8em;
	padding: 0px 20px 18px 20px;
}

.generic strong{
	font-weight: bold;
}

blockquote p{
	font-family:Georgia, "Times New Roman", Times, serif;
	margin-right: 0.7em;  
	text-indent: -0.7em;
	font-style:italic;
	font-weight:bold;
}

.justify{
	text-align:left;
}

/*-------------------------------------------+
|                                            |
|         		 LIST ITEMS  		     	 |
|                                            |
+-------------------------------------------*/

.generic ol{
	font: italic 1.2em Georgia, Times, serif;
	list-style:decimal;	
	margin-bottom:1.8em;
	padding: 0px 20px 18px 45px;
} 
	.generic ol li span{
		font: 1.2em Arial, Helvetica, sans-serif;
		color: #c70d13;	
		line-height: 1.8em;
	}

.generic ul{
	font-size: 1.0em;		
	list-style:disc;
	list-style:outside;	
	line-height: 1.8em;	
	padding: 0px 20px 18px 40px;
}
	.generic ul li{
		line-height: 1.8em;
		font-size: 1.2em;
		list-style:outside;	
	}

/** Lits items - noBullits **********************************************************************/

	ul.noBullits{
		font-size: 1.0em;	
		list-style:outside;
		line-height: 1.8em;	
		padding: 0px 20px 4px 45px;
	}
		ul.noBullits li, ul li.noBullits_last{
			line-height: 1.8em;
			font-size: 1.2em;
			list-style:outside;
			list-style:none;
		}
			ul li.noBullits_last{
				padding-bottom: 14px;
			}			
			ul.noBullits li span{
				display:inline-block;
				width: 100px;
				padding-right: 20px;
				font-weight:bold;
			}
	


/*-------------------------------------------+
|                                            |
|         		 	LINKS			     	 |
|                                            |
+-------------------------------------------*/

	.generic a:link, .generic a:visited, .generic a:hover, .generic a:active {
		color:#bf1b3c;
		text-decoration:none;
		font-weight: bold;
	}
	
	.generic p a:hover, .generic ul a:hover{
		text-decoration:underline;
	}
	
/*-------------------------------------------+
|                                            |
|     	Diversen Content Elementen	         |
|                                            |
+-------------------------------------------*/

	.generic hr{
		border: none;
		height: 0px;
		border-bottom: #bf1b3c dotted 1px;		
		margin: 0px 20px 18px 20px
	}
	
	.generic .img{
		margin: 5px 20px 10px 20px;
		border: 1px solid #333;
	}

/*-------------------------------------------+
|                                            |
|         		 	LAYOUT			     	 |
|                                            |
+-------------------------------------------*/

#wrapper {
	min-height: 100%;
	height: auto !important;
	height: 100%;
	margin: 0 auto; /* the bottom margin is the negative value of the footer's height */
	width:960px;
	background: url("../img/bg_tile.png") repeat-y center top;
}

#container {
	width:940px;
	position: relative;
	margin: 0 auto;
}

/** Content Area **********************************************************************/
	
	#contentArea{
		width: 579px;
		min-height: 520px;
		height: auto !important;
		height: 520px;
		background-color:#FFFFFF;
		border-left: #a50b15 solid 1px;			
	}
		
		#header{
			min-height: 104px;
			height: auto !important;
			height: 104px;
			padding: 15px 10px 0px 20px;		
		}
			#header span{display:none;}		
		
		#headerTekst{
			width: 100%;
			min-height: 30px;
			height: auto !important;
			height: 30px;
			border: 1px dotted #bf1b3c;
			border-left: none;
			border-right:none;
			background-color: #f5e1e6;
			padding-top: 20px;
		}
			
			#showreelKader{
				width:577px;
				height:325px;
				background-color:#FFF;
				padding:1px;
				margin:-20px 0px 0px 0px
			}
			
		#content{
			padding: 20px 0px;
			border-bottom: #bf1b3c dotted 1px;
		}		

	/** split Content - Sitecheck en Nieuwe sites **********************************************************************/
		
		.splitContent{/* deze tag is nodig voor IE6 en 7 */}

			.splitContent_right, .splitContent_left{
				min-height: 246px;
				height: auto !important;
				height: 246px;
				background-color:#e5e5e5;
				padding-top: 20px;
				margin: -20px 0px 0px -2px;
				border-left: #bf1b3c dotted 1px;						
			}
			.splitContent_left{
				border-left:none;
				margin-left: 0px;
				background-color:#fff;
			}
				.splitContent_right h2 , .splitContent_left h2 {
					padding-left: 0px;
				}							
				.splitContent_right ul{
					padding-left: 35px;
				}
			
			/** Nieuwe sites **********************************************************************/
			
				.nieuwesites{					
					margin: 10px 0px 20px 20px;		
				}				
					.nieuwesites a{
						display:block;
						position: absolute;
						width: 250px;
						height: 188px;
						border: 1px solid #333;						
					}
					.nieuwesites a:hover{
						border: 1px dotted #bf1b3c;
					}
					.nieuwesites .caption{
						font-size: 1.0em;
						background: url("../img/caption_white.png");
						position:absolute;
						margin: 160px 1px 0px 0px;
						width: 230px;
						padding: 5px 10px;
						cursor: pointer;
						color: #333;
						font-weight:bold;
					}
					
					a img.nieuwesite:link, a img.nieuwesite:visited, a img.nieuwesite:hover, a img.nieuwesite:active{
						border: 1px solid #333;
					}
					a img.nieuwesite:hover{
						border: 1px dotted #bf1b3c;
					}
				
			/** Nieuwe sites **********************************************************************/
			
				.sitecheck{					
						position:absolute;	
						margin-top: -35px;
						right:0px;
						width: 147px;
						height: 174px;					
					}								
					
	/** Nieuwsbrief **********************************************************************/
		
		#nieuwsbrief, #nieuwsbrief.nieuwsbrief_noBorder{
			width: 100%;
			height:18px;
			background-color:#F5E1E6;
			border-bottom: #bf1b3c dotted 1px;
			border-top: #bf1b3c dotted 1px;
			margin-bottom: 20px;
			padding:10px 0px;	
		}
			#nieuwsbrief.nieuwsbrief_noBorder{
				border-bottom: none;
				margin-bottom: 0px;
				background-color:#FFEBF1;
				padding: 10px 0px;
			}
		
			#nieuwsbrief label{
				float:left;
				width:auto;
				height: 22px;
				margin: 0px 2px 0px 0px;
				padding: 0px 5px 0px 10px;
				line-height: 21px;
				font-size: 110%;
			}	
	
			#nieuwsbrief input.tekstveld, #nieuwsbrief input.tekstveld_groot, #nieuwsbrief input.tekstveld_error{
				float:left;
				width: 145px;
				height: 17px;
				margin-left: 10px;
				padding: 1px 0px 0px 5px;
				border:#bf1b3c thin solid;
				border-width:1px;
			}
			
			#nieuwsbrief input.tekstveld:hover{
				border:1px solid #a50b15;	
			}		
			
			#nieuwsbrief input.tekstveld:focus{
				border:1px dashed #a50b15;
			}	
	
			#nieuwsbrief input.checkbox{
				float:left;
				width: 18px;
				height: 18px;
				font-size: 20px;
			}		
	
			input.buttonNieuwsbrief{
				width:auto;
				text-align:center;
				border: 1px #a50b15 solid;
				background-color: #bf1b3c;	
				font-size: 12px;
				font-weight: bold;
				color: #fff;
				cursor: pointer;
				line-height: 17px;
				height: 20px;
				padding: 0px 5px 5px 5px;
				float:right;
				margin-right: 20px;
			}		
			
					
	/** Formulier **********************************************************************/

	.generic fieldset a{
		text-decoration:underline;
	}
	.generic fieldset{
		margin-bottom: 20px;
	}

		/** Formulier Inputfields **********************************************************************/
	
			.generic label{
				float:left;
				width: 220px;
				height: 22px;
				margin: 0px 2px 0px 0px;
				padding-left: 5px;
				line-height: 21px;
				font-size: 110%;
				list-style:none;
			}
			
			
			li .left{
			    list-style:none;
			}
			
	
			input.tekstveld, input.tekstveld_groot, input.tekstveld_error{
				float:left;
				width: 270px;
				height: 18px;
				padding-left: 2px;
				border:#999999 thin solid;
				border-width:1px;
				
			}			
				input.tekstveld:hover{
					border:1px solid #bf1b3c;	
				}					
				input.tekstveld:focus{
					background-color:#fff;
					border:1px dashed #bf1b3c;		
				}	
	
			input.tekstveld_groot{
				width: 485px;
			}
			
			input.tekstveld_error{
				border:1px solid #ff0000;	
			}
	
			input.checkbox{
				float:left;
				width: 18px;
				height: 18px;
				font-size: 20px;
			}
			
			.error{	
	           color:#f20017;
			}
			
			input.checkbox_single{
				float:left;
				width: 18px;
				height: 18px;
				font-size: 20px;
		        display:inline;
			    border:none;
			    margin-top: 3px;
			}
	
			input.radio{
				line-height: 22px;
			}
	
			textarea{
				float:left;
				width: 268px;
				height: 72px;
				border:#999999 1px solid;
				font-family:Arial, Helvetica, sans-serif;
				font-size: 13px;
				padding: 2px;			
			}
				textarea:hover{
					border:1px solid #bf1b3c;	
				}					
				textarea:focus{
					background-color:#fff;
					border:1px dashed #bf1b3c;		
				}		
	
			input.button{
				width:auto;
				text-align:center;
				border: 1px #a50b15 solid;
				background-color: #bf1b3c;	
				font-size: 12px;
				font-weight: bold;
				color: #fff;
				cursor: pointer;
				line-height: 17px;
				height: 22px;
				padding: 0px 5px 5px 5px;
				float:left;
				margin-right: 5px;
			}			
	
		/** Formulier Li decoration  **********************************************************************/
		
			.generic fieldset ul{
				font-size: 1.0em;	
				line-height: 1.8em;	
				padding: 0px;
				margin: 0px;
				margin-top: 10px;
				margin-left: 20px;		
				list-style:none;
			}
		
	
			fieldset li.odd, fieldset li.even, fieldset li.white, fieldset li.footer, fieldset li.empty {
				float:left;
				margin-bottom: 1px;
				background-color:#ffebf1;
				min-height: 21px;
				height: auto !important;
				height: 21px;
				list-style:none;
			}
			
			fieldset li.left{
				list-style:none;
			}
			
			fieldset li.even{
				background-color:#f5e1e6;
				list-style:none;
			}
	
			fieldset li.white, fieldset li.footer, #content fieldset li.white label, #content fieldset li.footer label  {
				background-color:#ffffff;
				padding-left: 0px;
				list-style:none;
			}	
			
			fieldset li.footer {
			    margin-left:5px;
			}	
	
			fieldset li.empty{
				float:none;
				clear:left;
				background-color:#fff;
				list-style:none;
			}
	
			.clear-field{
				clear:left;
				list-style:none;
			}	

/** ImageColumn **********************************************************************/

	#imageColumn{
		width: 220px;
		background-color: #000;
		text-align:center;
	}

/** Navigation **********************************************************************/

	#nav{
		width: 139px;
		border-left: #d72b5e solid 1px;
		background-color: #bf1b3c;
	}
	
		#klok{
			width:138px;
			height: 119px;
			padding: 0px 0px;
			text-align:center;
			border-bottom: #a50b15 solid 1px;	
		}
		
			#nav ul{
				text-align:center;
				font-size:1.2em;
				line-height:1.8em;
				border-bottom: #d72b5e solid 1px;
			}
			
			#nav ul li a{
				height: 23px;
				display:block;
				color: #fff;
				text-decoration: none;				
				border-top: #d72b5e solid 1px;
				border-bottom: #a50b15 solid 1px;					
			}
			
			#nav ul li a:hover{
				background-color:#a50b15;
				border-top: #c3322a solid 1px;
				border-bottom: #860000 solid 1px;						
			}		
				#nav ul li a.active, #nav ul li a.active:hover{
					color: #171717;
					background-color:#ff74b0;			
					border-top: #e25997 solid 1px;
					border-bottom: #ff92cd solid 1px;					
				}
				 
	ul#socialmedia {
		display:inline-block;
		margin: 20px 0px 0px 28px;	
		border:none;
	}
		
		#socialmedia li{
			width: 24px;
			height:24px;
			display:inline-block;
			float:left;
			margin-right: 5px;
		} 
		
		ul#socialmedia li a, ul#socialmedia li a:hover{
			border: none;
			background-color: #BF1B3C;
		}
		
		#socialmedia span{ display:none;} 
		

/** Adres **********************************************************************/

	#adres{
		width: 544px;
		color:#FFFFFF;
		padding: 20px 20px 0px 15px;
		background-color: #ff74b0;
		border-left: #a50b15 solid 1px;
	}
	
/*-------------------------------------------+
|                                            |
|         		GOOGLE MAPS			     	 |
|                                            |
+-------------------------------------------*/

.googleMaps_kader{
	margin: 0px 20px 20px 20px;
	border:1px solid #333333;
}
	.googleMaps{
		width: 537px;
		height: 398px;
	}

/*-------------------------------------------+
|                                            |
|         			ICONS			     	 |
|                                            |
+-------------------------------------------*/
.icon{
	display:inline-block;
	padding-left: 18px;
	background-repeat: no-repeat;
	background-position: 0px 3px;
}
.iconFold_down{	background-image: url("../img/icons/fold_down.gif");}
.iconFold_up{	background-image: url("../img/icons/fold_up.gif");}
.iconArrow_right{	background-image: url("../img/icons/arrow_right.gif");}
.iconLink_extern{	background-image: url("../img/icons/link_extern.gif");}



/*-------------------------------------------+
|                                            |
|           	   DIVERSEN	                 |
|                                            |
+-------------------------------------------*/
	
.clear {  /* Handig als ie6/7 onnodig zaken blijft floaten. Als een normale "clear:both" niet werkt. http://sonspring.com/journal/clearing-floats */	
	clear:both;
    display: block;
    overflow: hidden;
    visibility: hidden;
    width: 0;
    height: 0;
}

.closed {
    display:none;
    height:0px;
}

.floatRight{ /* Float any item to the right */
	float:right;
	margin-right:0;
}
.floatLeft{ /* Float any item to the left */
	float:left;
	margin-left:0;
}

.clearRight{ /* Float any item to the right */
	clear:right;
}

.clearLeft{ /* Float any item to the right */
	clear:left;
}

.fiftyFifty{
	width: 50%;
}
.fortyNine{
	width: 49.9%;
}

.hidden{ display: none;} /* even snel iets verbergen */

.debug{ /* gebruik deze om snel iets te kunnen debuggen */
	border:#FF0000 solid 1px;
}


.normal {
font-weight:normal;

}