/* ================================ +
   			DIGITALE PIONIERS 2008
+ ================================ */



/* 
** Made by: Ines Gall, Edgar Vijgeboom
** Website:	www.studioparkers.nl
*/



/* ================================ +
               STANDAARDS
+  ================================ */

/* start RESET DEFAULT styles */
*{ margin:0; padding:0; border:0px; }
* html li{height:1%;}
img { border:0px; }	
a { color:#ee1122; text-decoration:none; }
a:hover{ text-decoration:underline; }
p {margin-bottom:12px;}
html, body {height:100%}
/* end RESET DEFAULT styles */




/* ================================ +
             GLOBAL LAYOUT
+  ================================ */

body { 
	font-family: 		Verdana, Arial, Helvetica, sans-serif;
	font-size:			11px;
	line-height: 		17px;
	color: 					#333333;
}

#bg {
	width: 			100%;
	overflow:		hidden;
	background:	#ffffff url(../images/background.gif) no-repeat center bottom;
}

#wrapper {
	position:relative;
	width: 			1000px;
	margin:			auto;
	overflow:		auto;
	text-align:	left;
	padding-bottom:160px;
}

#kop {
	font-family: 		"Lucida Sans Unicode", "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;
	width: 				945px;
	height: 			90px; 
	margin:				0 0 0 10px;
	background:		#ffffff url(../images/logo.gif) no-repeat left top;
	overflow:			hidden;
}

#column_btn {
	display:			inline;
	width: 				140px;
	margin:				80px 0 0 20px;
	float:				left;
}

#column_breed {
	width: 				790px;
	margin:				0 0 0 0;
	float:				left;
}

#countdown {
	font-family: 		"Lucida Sans Unicode", "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;
	font-size:			14px;
	width: 				230px;
	height:				100px;
	margin: 			17px 10px 20px 0;
	float:				right;
	text-align:			left;
	line-height:		19px;
}

.floatleft {
	float:				left;
}

.cleartop {
	clear:both;
	height:1px;
	overflow:hidden;
	background-color:#e9e9e9; 
	width: 				790px;
	margin-left:160px;
}

.clear {
	clear:both;
}

#noscript {
	width: 100%;
	height: 100px;
	text-align: center;
	background-color: red;
	color: white;
	font-size:160%;
	font-weight:bold;
	padding-top:30px;
	
}


/* ================================ +
            LINKS & BUTTONS
+  ================================ */

.button {
	width:350px;
	float:right;
}

.btn {
	display: block;
	width:115px;
	height:25px;
	background: url('../images/btn_bg.gif') no-repeat -60px 0px;
	padding-left:5px;
	margin-right:10px;
	font-family: "Lucida Sans Unicode", "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;
	font-size:11px;
	color:#ffffff;
}

a.btn:hover{
	background-position: -60px -26px;
	text-decoration: none;
	}
	
.btn_klein {
	display: block;
	width:75px;
	height:25px;
	background: url('../images/btn_bg.gif') no-repeat -60px 0px;
	padding-left:5px;
	font-family: "Lucida Sans Unicode", "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;
	font-size:11px;
	color:#ffffff;
}	

a.btn_klein:hover{
	background-position: -60px -26px;
	text-decoration: none;
	}
	
	
.btn_groot { /* voor feedback versturen */
	display: block;
	width:212px;
	height:25px;
	background: url('../images/btn_bg.gif') no-repeat -20px 0px;
	padding-left:5px;
	float:right;
	font-family: "Lucida Sans Unicode", "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;
	font-size:11px;
	color:#ffffff;
}	

a.btn_groot:hover{
	background-position: -20px -26px;
	text-decoration: none;
	}
	
.link {
	text-decoration: underline;
	color:#ee1122;
}	

a.link:hover {
	color:#464040;
}


/* MENU */

#menu {
	font-family: 		"Lucida Sans Unicode", "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;
	font-size: 			12px;
	width: 				790px;
	height: 			23px; 
	margin:				0 0 0 160px;
	background:			#464040;
	border-bottom: 		5px solid #ee1122;
}

#menu ul {
	list-style: 		none;
}

#menu ul li {
	float:				left;
}

#menu a{
	display:			block;
	width:				130px;
	height:				23px; 
	overflow:			hidden;
}

#menu .aanmelden { background: url('../images/navigatie.gif') no-repeat -7px 0px;}
#menu .gegevens { background: url('../images/navigatie.gif') no-repeat -144px 0px;}	
#menu .project { background: url('../images/navigatie.gif') no-repeat -281px 0px;}
#menu .planning { background: url('../images/navigatie.gif') no-repeat -418px 0px;}	
#menu .financien { background: url('../images/navigatie.gif') no-repeat -555px 0px;}
#menu .verstuur { background: url('../images/navigatie.gif') no-repeat -692px 0px;}	

#menu .aanmelden:hover {background-position: -7px -23px;}
#menu .gegevens:hover {background-position: -144px -23px;}
#menu .project:hover {background-position: -281px -23px;}
#menu .planning:hover {background-position: -418px -23px;}
#menu .financien:hover {background-position: -555px -23px;}
#menu .verstuur:hover {background-position: -692px -23px;}

#menu .aanmelden_active{background: url('../images/navigatie.gif') no-repeat -7px -23px;}
#menu .gegevens_active{background: url('../images/navigatie.gif') no-repeat -144px -23px;}
#menu .project_active{ background: url('../images/navigatie.gif') no-repeat -281px -23px;}
#menu .planning_active{ background: url('../images/navigatie.gif') no-repeat -418px -23px;}	
#menu .financien_active{ background: url('../images/navigatie.gif') no-repeat -555px -23px;}
#menu .verstuur_active{ background: url('../images/navigatie.gif') no-repeat -692px -23px;}	


/* ================================ +
               typografie
+  ================================ */

/* fix voor IE, die lucidia niet zo mooi toond */
#kop strong {
    font-family: "Lucida Sans", "Lucida Sans Unicode", "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;
}

.pagetitel {
    font-family: "Lucida Sans", "Lucida Sans Unicode", "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;
		font-size:		13px;
}

.header {
	font-size: 15px;
}

.red {
	color:	#ee1122;
	}
	
h1 {
	font-size:18px;
	margin-bottom:5px;
	}	

h2 {
	line-height: 1.4em;
}



	
/* ================================ +
          FORM ELEMENTEN
+  ================================ */

/* blokjes lay-outs */

#column_breed p{
	padding:20px 0px 0px 30px;
	font-weight:bold;
}

.blok_breed {
	width: 				790px;
	padding-bottom:5px;
	margin-bottom:		15px;
	background-color:	#e9e9e9;
}

.blok_bg {
	width: 					790px;
	padding-bottom:	20px;
	margin-bottom:	15px;
	overflow:				auto;
	background: 		url('../images/blokken_bg.gif') repeat-y 0px 0px;
	}

.blok_left {
	width: 				330px;
	float:left;
}

.blok_right {
	display:inline;
	width: 365px;
	float:left;
	margin: 20px 0 0 35px;
}

.blok_left ul {
	line-height: 1.4em;
	list-style-position: outside;
	list-style-type: disc;
	padding: 0 0 0 32px;
	margin-left:13px;
}

.listtitel {
	margin-left:-15px;
	list-style-type: none;
}

.tekst_breed {
	width: 550px;
	margin:0 10px 20px 30px;
}

.intro_breed {/* uitzondering voor introtekst bij aanmelden */
	width: 500px;
	margin:0 10px 20px 30px;
	float:left;
}

.intro_colom {
	width: 180px;
	margin:55px 10px 20px 25px;
	float:left;
}

.ul_breed {
	width:550px;
	line-height: 1.4em;
	list-style-position: outside;
	list-style-type: disc;
	padding: 0 0 0 32px;
	margin-left:13px;
}

.blok_einde {
	width: 				790px;
	height:				180px;
	padding-bottom:5px;
	margin-bottom:	15px;
	background-color:	#e9e9e9;
	border-top:5px solid #ee1122;
}

/* formstijles*/

input {
	background-color:#ffffff;
	border:1px solid #aabbcc;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size:11px;
	padding: 2px;
	}
	
.groot {
	width:665px;
	margin: 0 0 25px 55px;
}	

.medium {
	width:380px;
	margin: 0 0 12px 0;
	float:left;
}	

.klein {
	width:190px;
	margin: 0 0 12px 0;
	float:left;
}	

.kleiner {
	width:160px;
	margin: 0 0 12px 0;
	float:left;
}

.inputmail {
	width:190px;
	margin: 0 5px 12px 0;
	float:left;
}	

.login {
	margin: 0 0 6px 0;
	width:115px;
}	

textarea {
	width: 365px;
	height: 180px;
	border: 1px solid #aabbcc;
	padding: 5px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size:11px;
	float:left;
	margin: 20px 0 0 35px;
}

.areaklein {
	height: 90px;
}

.areaklein_simpel {
	height: 90px;
	margin: 45px 0 0 0;
}

.radio {
	vertical-align:-3px;
	border:0px;
	background-color:transparent;
}

label {
	width:275px;
	height:25px;
	text-align:right;
	margin-right:90px;
	float:left;
}

label.hoog {
	height:70px;
}

.feedback {
	width:180px;
	margin-left:15px;
	padding:2px;
	color: #ffffff;
	background-color: #ee1122;
	float:left;
}


.paperclip {
	vertical-align:-3px;
	float:left;
}

#tekenen td {
	padding:0 20px 0 0;
	font-weight:bold;
}



/* lightbox*/

#video_bg {
	position:			absolute; 	/* needed for footer positioning*/
	top:				0px;
	left:				0px;
	width:				100%;
	height:				100%; 
	height:				1000px;		/* IE6: treaded as min-height*/
	min-height:		100%; 		/* real browsers */
	background-color:	#000000;
	opacity:			0.65;
	z-index:			100;
	text-align:		center;
	filter:				alpha (opacity=65);
	}
	
#videoplayer {
	position:	absolute;
	width:		100%;
	top:			0px;
	z-index:	101;
	}
	
#popup {
	position:absolute;
	top:150px;
	left:350px;
	width:350px;
	padding:10px 20px 30px 30px;
	color:#ee1122;
	background-color:#ffffff;
		z-index:			102;
}

.sluiten {
	width:350px;
	text-align:right;
}