/*
Theme Name: Piet Oosterbeek
Theme URI: http://piet-oosterbeek.nl/
Description: Custom Piet Oosterbeek Template.
Version: 1
Author: Wevolve
Tags: White, variable width, variable height

(CC) 2010 Wevolve

Feel free to be inspired by this CSS, 
see the Creative Commons License (http://creativecommons.org/) 

If you re-use parts or whole of this CSS, 
you must include this copyright notice at the start of the file. 

Please contact us for commercial use and to find out 
how we can help you with various web-based solutions: 

web:     http://www.wevolve.nl 
e-mail:  info@wevolve.nl 
tel.:    +31-(0)74 255 2140 

/* -------------------------------------------------------- */ 

html, body { overflow:hidden; } 

body {
		padding:0; margin:0;
  color:#000;
	 font:100% Verdana, sans-serif;
	 background:#fff; 
}

#wrapper { overflow:hidden; }


/* -------------------- resets -------------------- */

.nocss { display:none; }

img,
a img {
  border:0;
  vertical-align:bottom;
} /* set image border to zero */

a:active,
a:focus { outline:0; } /* remove firefox link border */

textarea { overflow:auto; } /* remove textarea scrollbar in ie */

* html table { font-size: 100%; }  /* for IE 5.5 */

#page a[name] { padding:0; } /* firefox 3 / safari 3 */


/* -------------------- branding -------------------- */ 

#branding {
  position:absolute;
  top:50%; left:50%;
  z-index:1;
}

#branding a {
  display:block;
  margin:-100px 0 0 -143px;
  width:286px;
  height:200px;
  background:#000 url("img/piet_oosterbeek.gif") 0 0 no-repeat;
}


/* -------------------- content -------------------- */

#content p { 
  padding:6em 0 1em 0;
  text-align:center; 
  color:#d9d9d9;
  font-size:.8em;
}

#content p span { 
  display:block;
  padding:1em 0 0 0;
  margin:0 auto;
  text-align:center; 
  width:24em;
}


/* -------------------- gallerienav -------------------- */

#gallerienav {
  position:absolute;
  left:1.5em; top:1.5em;
  z-index:10000;
}

#gallerienav ul {
  float:left; display:inline;
  padding:0; margin:0;
}

#gallerienav li {
  clear:both;
  position:relative;
  float:left; display:inline;
  padding:0; margin:0;
}

#gallerienav #page { position:relative; }

#gallerienav a {
  clear:both;
  display:block;
  padding:.25em 0;
  color:#d9d9d9;
  font-size:.7em;
  text-decoration:none;
  cursor:pointer;
  background:#fff;
}

#gallerienav a:hover,
#gallerienav .current_page_item a { color:#000; }


/* -------------------- up -------------------- */

#previous_gallery a { 
  position:absolute;
  margin:0 0 0 -13px;
  left:50%;
  top:1.5em;
  width:25px;
  height:25px;
  z-index:100;
  background:url("img/navigation.png") 0 0 no-repeat; 
}

#previous_gallery a:hover { background-position:0 -25px; }


/* -------------------- imagenav -------------------- */

#imagenav {
  position:absolute;
  top:1.5em;
  right:1.5em;
  z-index:100;
}

#imagenav ul {
  padding:0; margin:0;
  float:left; display:inline;
}

#imagenav li {
  padding:0; margin:0 0 0 .5em;
  float:left; display:inline;
}

#imagenav a {
  font-size:.7em;  
  color:#bfbfbf;
  text-decoration:none;
}

#imagenav a:hover,
#imagenav .active a { color:#404040; }


/* -------------------- imagecontainer -------------------- */

#imagecontainer { 
  position:absolute;
  top:50%;
  height:500px;
  width:100%;
  overflow:hidden;
  margin:-250px auto 0;
  z-index:10;
}

#imagecontainer.video { 
  height:385px;
  margin:-193px auto 0;
}

#center {
  text-align:center;
  margin:0 auto;
}


/* -------------------- nextpreviousnav -------------------- */

#nextpreviousnav {
  position:absolute;
  top:50%;
  left:0; right:0;
  z-index:100;
}

#nextpreviousnav h3 { display:none; }

#nextpreviousnav ul,
#nextpreviousnav li { 
  padding:0; margin:0;
  list-style-type:none;
}

#previous_image a { 
  position:absolute;
  top:50%;
  left:1.5em;
  width:25px;
  height:25px;
  background:url("img/navigation.png") -75px 0 no-repeat; 
}

#previous_image a:hover { background-position:-75px -25px; }

#next_image a { 
  position:absolute;
  right:1.5em;
  top:50%;
  width:25px;
  height:25px;
  background:url("img/navigation.png") -25px 0 no-repeat; 
}

#next_image a:hover { background-position:-25px -25px; }

#previous_image a,
#next_image a { text-indent:-9999px; }


/* -------------------- footer -------------------- */ 

#footer {
  position:absolute;
  left:0;
  right:0;
  bottom:1.5em;
  padding:0; margin:0;
  z-index:100;
}


/* -------------------- sharenav -------------------- */ 

#sharenav { 
  float:left; display:inline;
}

#sharenav ul { 
  float:left; display:inline;
  padding:0; margin:0 0 0 1.5em;
}

#sharenav li { 
  float:left; display:inline;
  padding:0; margin:0 .5em 0 0;
}

#sharenav a {
  display:block;
  width:14px;
  height:14px;
  background:transparent url("img/share.png") no-repeat;
}

#sharenav #twitter a { background-position:0 0; }
#sharenav #twitter a:hover { background-position:0 -14px; }

#sharenav #linkedin a { background-position:-14px 0; }
#sharenav #linkedin a:hover { background-position:-14px -14px; }

#sharenav #facebook a { background-position:-28px 0; }
#sharenav #facebook a:hover { background-position:-28px -14px; }

#sharenav #email a { background-position:-42px 0; }
#sharenav #email a:hover { background-position:-42px -14px; }


/* -------------------- down -------------------- */

#next_gallery a {
  overflow:hidden;
  position:absolute;
  margin:0 0 0 -13px;
  left:50%;
  bottom:0;
  width:25px;
  height:25px;
  background:url("img/navigation.png") -50px 0 no-repeat; 
}

#next_gallery a:hover { background-position:-50px -25px; }


/* -------------------- realisation css -------------------- */

#contact {
  float:right; display:inline;
  margin:0 1.5em 0 0;
  z-index:100;
}

#contact a { 
  display:block;
  font-size:0.7em;
  text-decoration:none;
  color:#bfbfbf;
}

#contact a:hover { color:#404040; }