html, body {
	margin: 0;
	padding: 0;
	height: 100%;
	text-align: center;
	}
	
a {
	outline: none;
}

body
{
	background-image: url(../images/bg.gif);
	background-position: center 0px;	
	background-repeat: no-repeat;
}

#pagina {
	margin: 0; 
	padding: 0;
	min-height: 100%;
	_height: 100%;
}

#container {
	z-index: 3;
	position: relative;
	margin-bottom: 191px; /* Hoogte van footer div + space die er tussen moet zitten */
	margin: 0em auto; /* Pagina in het horizontaal midden */
	width: 1000px;
    top: -20px;
	text-align: left;
}


#campinglogo_container {
	top:15px;
	margin:0;
	padding:0;
	margin-left:750px;
	position: absolute;
	z-index: 10;
	}

#campinglogo {
	background-color:#FFFFFF;
	border-style:solid;
	border-width:10px;
	border-color: #ffffff;
	border-radius: 10px;
	-moz-border-radius: 10px;
		
	transform:rotate(4deg);
 	-moz-transform:rotate(4deg);
 	-webkit-transform:rotate(4deg);
 	-o-transform:rotate(4deg);
 	-ms-transform:rotate(4deg);
	
	-moz-box-shadow: 3px 3px 5px rgba(0,0,0,0.4);
	-webkit-box-shadow: 3px 3px 5px rgba(0,0,0,0.4);
	box-shadow: 3px 3px 5px rgba(0,0,0,0.4);	
	
    
    	
	width: 255px;
	height: 143px;
	z-index: 2;
	position: absolute;
    ;
	background-repeat: no-repeat;
}

#meisje {
	position: absolute;
	z-index: 6;
	width: 269px;
	height: 455px;
	top: 80px;
	left: 30px;
	background: url(../images/meisje.png);
	background-repeat: no-repeat;
}



#header {
	width: 1000px;
	height: 361px;
}

#slogan_venster {
	width: 500px;
	height: 100px;
	top: 175px;
	float: right;
	z-index: 5;
	position: relative;
	}

#slogan {
    font-family: SecretTypewriterRegular, Helvetica, Arial, sans-serif;
	font-size: 35px;
	background: #EC118F;
	color: #FFFFFF;
	padding: 10px;
	position: absolute;
	top: 0;
	left: 0;

	-webkit-box-shadow: 4px 4px 5px rgba(0, 0, 0, 0.4);
	-moz-box-shadow: 4px 4px 5px rgba(0, 0, 0, 0.4);
	box-shadow: 4px 4px 5px rgba(0, 0, 0, 0.4);
	
	-webkit-transform: rotate(-3deg);
	-moz-transform: rotate(-3deg);
	transform: rotate(-3deg);
}

#slogan2 {
    font-family: SecretTypewriterRegular, Helvetica, Arial, sans-serif;
	font-size: 20px;
	background: #EC118F;
	color: #FFFFFF;
	padding: 5px;
	position: absolute;
	top: 37px;
	left: 20px;
	
	-webkit-box-shadow: 4px 4px 5px rgba(0, 0, 0, 0.4);
	-moz-box-shadow: 4px 4px 5px rgba(0, 0, 0, 0.4);
	box-shadow: 4px 4px 5px rgba(0, 0, 0, 0.4);	
}



#visual {
	width: 804px;
	height: 343px;
	background: url(../images/visual4.jpg);
	position: absolute;
	top: 0;
	left: 145px;
}

#visual_kader {
	width: 804px;
	height: 343px;
	background: url(../images/visual_kader.png);
	position: absolute;
	top: 0;
	left: 145px;
}

/*#campinglogo_kader {
	width: 226px;
	height: 146px;
	z-index: 2;
	position: absolute;
	top: 10px;
	left: 760px;
	background: url(../images/campinglogo_kader.png);
	background-repeat: no-repeat;
	text-indent: -9999px;
}*/

#zijkolom {
	width: 200px;
	float: left;
	margin-top: 200px;
	margin-left: 50px;
	}

#hoofdkolom {
	width: 650px;
	float: left;
	//margin-top: 50px;
	margin-left: 50px;
}	
	
#footer {
	margin: -150px 0 0 0;  /* Hoe hoog is de div */
	height: 285px; /* Hoogte van de div */
	clear: both;
	background:url(../images/footer.jpg);
	background-position: center 0px;
	background-repeat: no-repeat;
}
			
#footer_inhoud, #footer_inhoud p {
	padding-top: 90px;
}
	
/*	------------------------- Menu -----------------------------*/	

#menubalk {
	position: absolute;
	z-index: 1;
	top: 261px;
	left: 0px;
	width: 1000px;
	height: 61px;
    background: url(../images/menu.png);
}

#menu {
	position: absolute;
	z-index: 7;
	top: 261px;
	left: 200px;
    font-family: SecretTypewriterRegular;
	color: #fff;
}

#menu li {
	display: inline; /* Menu links are horizontally aligned using display: inline */
}

#menu li a {
	padding: 6px 12px; /* Display: block won't work in this example, instead we are using padding to make the hole tab a clickable link */
	color:#FFFFFF;
	text-decoration: none;
	//padding: 10px;
	padding: 5px 10px;
	font-size: 15px;
}

#menu li.active a, #menu li.active a:hover{
	background:url('../images/menu_on.gif');
	color:#EC118F;
}

#menu li a:hover  {
	background:url('../images/menu_on.gif');
	color: #EC118F;
}

#submenu {
width: 200px;
position: absolute;
margin-top: 550px;
margin-left: 50px;
	font-size: 12px;
	color: #fff;
	padding-bottom: 20px;
	margin-bottom: 20px;
	background-image : url('../images/submenu_bottom.png');
	background-repeat: no-repeat;
	background-position: bottom left;
}

#submenu ul {
	width: 180px;
	margin:0;
	padding:0;
	padding-bottom: 5px;
	list-style-type: none;
	margin: 0 10px;
}

#submenu li {
	font-size: 13px;
}

#submenu li a {
	color: #919191;
	text-decoration: none;
	padding-left: 12px;
	padding-right: 12px;
	font-weight: normal
}

#submenu li.active a,
#submenu li.active a:hover {
	color: #EC118F;
	font-weight: bold;
	text-decoration: none;
}

#submenu li a:hover  {
	font-weight: normal;
	color: #EC118F;
	text-decoration: underline;
}

#kolom {
	position: absolute;
	width: 250px;
	top: 0;
	margin-left: 30px;
	color: #fff;
}



@font-face {
    font-family: 'SecretTypewriterRegular';
    src: url('../3rdparty/font-face/veteran_typewriter-webfont.eot');
    src: url('../3rdparty/font-face/veteran_typewriter-webfont.eot?iefix') format('eot'),
         url('../3rdparty/font-face/veteran_typewriter-webfont.woff') format('woff'),
         url('../3rdparty/font-face/veteran_typewriter-webfont.ttf') format('truetype'),
         url('../3rdparty/font-face/veteran_typewriter-webfont.svg#webfontIM723nLk') format('svg');
}


h2 {
    font-family: SecretTypewriterRegular, Helvetica, Arial, sans-serif;
	font-size: 22px;
	color: #EC118F;
}

h3 {
    font-family: SecretTypewriterRegular, Helvetica, Arial, sans-serif;
	font-size: 18px;
	color: #EC118F;
}

h4 {
    font-family: SecretTypewriterRegular, Helvetica, Arial, sans-serif;
	font-size: 16px;
	color: #EC118F;
}

p, td, body  { 
	padding: 0;
	margin: 0;
	line-height: 18px;
	font-family: Verdana, Arial;
	font-size: 13px;
	color: #919191;
}

p  { 
	padding:0 0 10px 0;
}


a { 
	font-family: verdana;
	color: #EC118F; 
	font-weight:normal;
	text-decoration:none;
}

a:hover { 
	font-family: verdana;
	color: #EC118F; 
	font-weight:normal;
	text-decoration:underline;
}

.cleardiv {
	clear:both;
	display:block;
}

hr {
	height: 2px;
    color: #e1e1e1;
    background-color: #e1e1e1;
	border:0;
}


.geenmarges {
	padding: 0;
	margin: 0;
}


ul.polaroids { width: 650px; margin: 0 0 18px -50px; }
ul.polaroids li { display: inline; }
ul.polaroids a { background: #fff; display: inline; float: left; margin: 0 0 27px 30px; width: auto; padding: 10px 10px 15px; text-align: center; font-family: SecretTypewriterRegular; text-decoration: none; color: #EC118F; font-size: 15px; -webkit-box-shadow: 0 3px 6px rgba(0,0,0,.25); -moz-box-shadow: 0 3px 6px rgba(0,0,0,.25); -webkit-transform: rotate(-2deg); -webkit-transition: -webkit-transform .15s linear; -moz-transform: rotate(-2deg); }
ul.polaroids img { border:0; display: block; width: 160px; margin-bottom: 12px; }
ul.polaroids a:after { content: attr(title); }

ul.polaroids li:nth-child(even) a { -webkit-transform: rotate(2deg);  -moz-transform: rotate(2deg);  }
ul.polaroids li:nth-child(4n) a { -webkit-transform: none; position: relative; top: -5px;  -moz-transform: none; }
ul.polaroids li:nth-child(6n) a { -webkit-transform: rotate(5deg); position: relative; right: 5px;  -moz-transform: rotate(5deg); }
ul.polaroids li:nth-child(9n) a { position: relative; right: 5px; top: 8px; }
ul.polaroids li:nth-child(11n) a { position: relative; left: -5px; top: 3px; }

ul.polaroids li.messy a { margin-top: -375px; margin-left: 160px; -webkit-transform: rotate(-5deg); -moz-transform: rotate(-5deg); }

ul.polaroids li a:hover { -webkit-transform: scale(1.25); -moz-transform: scale(1.25); -webkit-box-shadow: 0 3px 6px rgba(0,0,0,.5); -moz-box-shadow: 0 3px 6px rgba(0,0,0,.5); position: relative; z-index: 5; }





ul.ecards { width: 650px; margin: 0 0 18px -50px; }
ul.ecards li { display: inline; }
ul.ecards a { display: inline; float: left; margin: 0 0 27px 30px; width: auto; -webkit-box-shadow: 0 3px 6px rgba(0,0,0,.25); -moz-box-shadow: 0 3px 6px rgba(0,0,0,.25); -webkit-transform: rotate(-2deg); -webkit-transition: -webkit-transform .15s linear; -moz-transform: rotate(-2deg); }
ul.ecards img { border:0; display: block; width: 160px;  }


ul.ecards li:nth-child(even) a { -webkit-transform: rotate(2deg);  -moz-transform: rotate(2deg);  }
ul.ecards li:nth-child(4n) a { -webkit-transform: none; position: relative; top: -5px;  -moz-transform: none; }
ul.ecards li:nth-child(6n) a { -webkit-transform: rotate(5deg); position: relative; right: 5px;  -moz-transform: rotate(5deg); }
ul.ecards li:nth-child(9n) a { position: relative; right: 5px; top: 8px; }
ul.ecards li:nth-child(11n) a { position: relative; left: -5px; top: 3px; }

ul.ecards li.messy a { margin-top: -375px; margin-left: 160px; -webkit-transform: rotate(-5deg); -moz-transform: rotate(-5deg); }

ul.ecards li a:hover { -webkit-transform: scale(1.25); -moz-transform: scale(1.25); -webkit-box-shadow: 0 3px 6px rgba(0,0,0,.5); -moz-box-shadow: 0 3px 6px rgba(0,0,0,.5); position: relative; z-index: 5; }








ul.gastenboek { width: 650px; margin: 30px 0 60px -50px; }
ul.gastenboek li {
	list-style-type: none;
	padding: 10px 20px;
	//background: #EC118F;
	-moz-box-shadow: 3px 3px 5px rgba(0,0,0,0.5);
	-webkit-box-shadow: 3px 3px 5px rgba(0,0,0,0.5);
	box-shadow: 3px 3px 5px rgba(0,0,0,0.5);
		 }




ul.gastenboek li { margin: 10px 0; }

ul.gastenboek li:nth-child(1n)  { background: #EC118F; -webkit-transform: rotate(-1deg);  -moz-transform: rotate(-1deg); }
ul.gastenboek li:nth-child(1n) h2, ul.gastenboek li:nth-child(1n) p  { color: #ffffff; }

ul.gastenboek li:nth-child(2n) { position: relative; left: 20px; background: #24B34A; -webkit-transform: rotate(2deg);   -moz-transform: rotate(2deg); }

ul.gastenboek li:nth-child(3n)  { background: #f1f1f1; }
ul.gastenboek li:nth-child(3n) h2, ul.gastenboek li:nth-child(3n) p  { color: #EC118F; }

ul.gastenboek li:nth-child(4n)  { background: #50A8FC; }












.gekozen_ecard {
	width: 325px;
	-webkit-transform: rotate(-2deg); 
	-moz-transform: rotate(-2deg); 
	-webkit-box-shadow: 0 3px 6px rgba(0,0,0,.5); 
	-moz-box-shadow: 0 3px 6px rgba(0,0,0,.5);
}



.knop {
cursor:pointer;
	padding: 10px 20px;
	background: #EC118F;
	-moz-box-shadow: 3px 3px 5px rgba(0,0,0,0.5);
	-webkit-box-shadow: 3px 3px 5px rgba(0,0,0,0.5);
	box-shadow: 3px 3px 5px rgba(0,0,0,0.5);
		
	behavior:url(border-radius.htc);
	behavior:url(-ms-transform.htc);
 	-moz-transform:rotate(-3deg);
 	-webkit-transform:rotate(-3deg);
 	-o-transform:rotate(-3deg);
 	-ms-transform:rotate(-3deg);	
	width: 100px;
	text-align: center;
}

.knoptekst {    
	font-family: SecretTypewriterRegular, Helvetica, Arial, sans-serif;
	font-size: 22px;
	color: #FFF;
	font-weight: normal;
	display:block;
}	
	
.knoptekst:hover{    
	font-family: SecretTypewriterRegular, Helvetica, Arial, sans-serif;
	font-size: 24px;
	color: #FFF;
	font-weight: normal;
}		

textarea {
	font-family: arial;
}