@charset "utf-8";

/* ################################################### */
/* # version:   1.0                                  # */
/* # author:    Norman van der Mull                  # */
/* # e-mail:    norman@hoogvlieger.com               # */
/* # website:   http://www.hoogvlieger.com           # */
/* ################################################### */


/* GLOBAL RESET */
/* ################################################### */


html, body                          { width: 100%; height: 100%; }
body,div,dl,dt,dd,ul,ol,li,
h1,h2,h3,h4,h5,h6,
pre,form,fieldset,input,textarea,
p,blockquote
{  
  margin: 0; 
  padding: 0; 
} 

*                                   { line-height: 160%; }
li, dd                              { margin-left: 8%; }


/* #################### */


html
{
  background-color: #c7a989;
  height: 100%;
}


body
{
  background: transparent url(../img/strandBg.jpg) no-repeat center top;
  color: #444;
  font-family: 'Lucida Sans', 'Lucida Sans Std', verdana, arial, georgia;  
  font-size: 0.8em;
  text-align: center;
  position: relative;
  height: 100%;
}

#header
{
  position: relative;
  height: 317px;
  width: 878px;
  margin: 0 auto;
}

#wrapper
{
  margin: 0px auto;
  position: relative;
  text-align: center;
  min-height: 100%;
  width: 880px;
  text-align: left;
}

#skipLink
{
  display: none;
}

#canvas
{
  background: url(../img/canvasBg.png) no-repeat center top;
  position: relative;
  width: 878px;
  margin: 0 auto;  
}

#polaroid
{
  width: 478px;
  height: 305px;
  position: absolute;
  right: -60px;
  top: -60px;
  z-index: 110;
}


h1
{
  display: block;
  height: 70px;
}

h1 a
{
  background: transparent url(../img/headerTitleBg.jpg) no-repeat left top;
  display: block;
  width: 878px;
  height: 50px;
  position: absolute;
  left: 0;
  top: 0;
  font-size: 24px;
  font-weight: normal;
  color: #D1BEA8;
  text-decoration: none;
  padding-top: 4px;
  font-family: 'Lucida Sans Std', arial, georgia;
  margin-bottom: 18px;
  text-align: center;
}

h1 a:hover
{
  color: #fff;
}

h2, h3
{
  color: #85766A;
  font-weight: normal;
  font-size: 22px;
  margin-bottom: 8px;
}

h4
{
  color: #85766A;
}


#mission
{
  width: 400px;
  top: 80px;
  left: 24px;
  text-align: left;
  color: #000;
  line-height: 2em;
  padding: 25px 0 0 38px;
}

#mission h2
{
  font-size: 32px;
  line-height: 32px;
  font-weight: normal;
  margin: 0;
  color: #2DB9E7;
  margin-bottom: 12px;
}

#header #mission h3
{
  font-size: 18px;
  font-style: italic;
  font-weight: normal;
  margin-bottom: 18px;
}

#mission p
{
  line-height: 2em;
  color: #004C83;  
}

div#panels
{
  background: url(../img/startPanels.png) no-repeat center top;
  text-align: left;
  padding: 7px 0 0 36px;
}

div#panels div.panel
{
  width: 360px;
  float: left;
  margin-right: 12px;
  padding: 18px;
  position: relative;
}

div#panels div.panel div#tag
{
  position: absolute;
  z-index: 10000;
  left: 152px;
  top: -8px;
}

div#panels div.panel img
{
  float: left;
  margin-right: 12px;
}

div#panels div.panel a.button
{
  display: block;
  padding: 4px 8px;
  background: #d8d3ce;
  color: #86766b;
  font-size: 14px;
  font-weight: normal;
  clear: both;
  margin-top: 6px;
  text-align: center;
  text-decoration: none;
}

div#panels div.panel a.button:hover
{
  text-decoration: underline;
}


div#paragraphColumn
{
  float: left;
  overflow: hidden;
  width: 530px;
  text-align: left;
  padding: 32px;
}

div#paragraphColumn div.paragraph
{
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px dotted grey;
}

div#paragraphColumn div.paragraph p
{
  margin-bottom: 12px;
}

div#panelColumn
{
  float: right;
  width: 245px;
  overflow: hidden;
  padding: 32px 32px 32px 0;
  text-align: left;
  font-size: 95%;
}

div#panelColumn .panelGreen
{
  margin-bottom: 24px;
  padding-bottom: 12px;
  background: #9ccd52 url(../img/panelBgGreen.png) repeat-x left top;
  padding: 20px;
  color: #fff;
  
}

div#panelColumn .panelGreen h4
{
  color: #fff;
  font-size: 20px;
  font-weight: normal;
  line-height: 20px;
  margin-bottom: 8px;
}

div#panelColumn .panelGreen p
{
  color: #d7ebba;
}

div#panelColumn .panelBrown
{
  margin-bottom: 24px;
  padding-bottom: 12px;
  background: #d1bda8 url(../img/panelBgBrown.png) repeat-x left top;
  padding: 20px;  
}

div#panelColumn .panelBrown p
{
  color: #907e70;
}


div#footer
{
  width: 100%;
  text-align: center;
  padding-top: 12px;
  font-size: 0.9em;
  float: left;
  overflow: hidden;
  position: relative;
  color: #fff;
}

div#footer a
{
  margin: 0;
  padding: 0;
  color: #fff;
  text-decoration: none;
}

div#footer a:hover
{
  text-decoration: underline;
}

div#footer div a,
div#footer div
{
  color: #e3cdb3;
}




/* imageSlider styles */

#screen
{
  width: 500px;
  padding: 0;
  position: absolute;
  left: 480px;
  top: 24px;
  height: 109px;
}			

#screen li
{
  float:left;
  list-style:none;
  height: 109px;
}

#screen .jq-ss-crop
{
	margin: 0 5px 0 0;
	float:left;				
}

#left,#right
{
  font-weight:bolder;
  font-size: 12px;
  margin-top: 32px;
  display:block;
  text-decoration:none;
  color:white;
  font-weight: bold;
  background: url(../img/carouselNav.png) no-repeat left top;
  width: 25px;
  height: 50px;
}

#right
{
  background-position: right top;
}

#right:hover
{
  background-position: right bottom;
}

#left:hover
{
  background-position: left bottom;
}

#view
{
  width:442px;
  height:212px;
  overflow:hidden;
}

#images
{
  width:4818px !important;
  width:4822px;
  padding:0;
}

#images li img
{
	border:0;
	width: 144px;
	height: 108px;
}


/* ##### FORMULIER STYLEN #### */


form
{
  background: url(../img/content-achtergrond.png) repeat-y -2px top;
  border: 0px;
  padding: 12px;
}

form fieldset
{
  border: 0px;
  margin: 0.5em;
}

form fieldset label
{
  width: 90px;
  float: left;
  display: block;
}

form fieldset input,
form fieldset textarea
{
  width: 240px;
}


/* ########   CLEARFIX   ######## */

.clearfix:after 
{
		content: ".";
		display: block;
		clear: both;
		visibility: hidden;
		line-height: 0;
		height: 0;
}
 
.clearfix 
{
 	display: inline-block;
}
 
html[xmlns] .clearfix 
{
 	display: block;
}
 
* html .clearfix 
{
 	height: 1%;
}