@font-face {
    font-family: 'photoblogregular';
    src: url('photoblog_hint-webfont.eot');
    src: url('photoblog_hint-webfont.eot?#iefix') format('embedded-opentype'),
         url('photoblog_hint-webfont.woff') format('woff'),
         url('photoblog_hint-webfont.ttf') format('truetype'),
         url('photoblog_hint-webfont.svg#photoblogregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

h1 {
   font: 36px/36px 'photoblogregular', 'Muli', Verdana, Tahoma, sans-serif;
   letter-spacing: 0;
   vertical-align: bottom;
   margin: 0 0 20px 0;
   padding: 0;
}
h2 {
   letter-spacing: 0;
   margin: 5px 0 15px 0;
   padding: 0;
   font: 1.5em/1.6em 'Muli', Verdana, Tahoma, sans-serif;
   font-weight: bold;
   font-variant: small-caps;
}
h3 {
   letter-spacing: 0;
   margin: 25px 0 0 10px 0;
   padding: 0;
   font: 1.1em/1.2em 'Muli', Verdana, Tahoma, sans-serif;
   font-weight: bold;
   font-variant: small-caps;
}

ul, li {
   font: 1em 'Muli', Verdana, Tahoma, sans-serif;
   line-height: 1.35em;
   list-style: outside;
}

p { font: 1em 'Imprima', Arial, sans-serif; }
em { font: 1em 'Imprima', Arial, sans-serif; }
span { font: 0.85em 'Imprima', Arial, sans-serif; }

html, body {
   width: 100%;
   height: 100%;
   margin: 0;
   padding: 0;
   font-face: 'Imprima', Verdana, Tahoma, sans-serif;
   background-color: #000;
}
p   { xborder: 1px solid #f00; }
div { sborder: 1px solid #0ff; }
ul  { xborder: 1px solid #0f0; }
li  { xborder: 1px solid #f0f; }
td  { xborder: 1px solid #ff0; }
div, ul, li, a {
   padding: 0;
   margin: 0;
   /*border: 1px solid #ff0;
   border-bottom: 1px solid #f00;*/
}
ul, li {
   margin-left: 15px;
}

a, a:link, a:visited {
   color: #fff;
   text-decoration: none;
   font-weight: bold;
}
a:hover {
   text-decoration: underline;
}

img,
a img {
   border: none;
}

table {
   margin: 0;
   padding: 0;
   border-spacing: 0;
   border-collapse: collapse;
}
td {
   margin: 0;
   padding: 0;
   color: #dae4f2;
}

table.layout {
}

.right {
   float: right;
   margin-left: 15px;
   margin-right: 15px;
}
.left {
   float: left;
   margin-right: 15px;
   margin-left: 15px;
}

/* --- LOG ------------------------------------ */
#logger {
   position: fixed;
   top: 0px;
   left: 0px;
   bottom: 0px;
   width: 300px;
   overflow: hidden;
   font-family: Courier, Arial, sans-serif;
   font-size: 10px;
   background-color: #aaa;
   color: #000;
   border-right: 1px solid #000;
   padding: 2px;
   z-index: 99;
}
#logger.folded {
   width: 10px;
}

/* --- PAGE BACKGROUND ------------------------ */
/*http://stackoverflow.com/questions/5662735/stretch-background-image-css*/
/* ALTERNATIEF: http://jsfiddle.net/ZxNsM/ */
.filler {
   position: fixed;
   width: 100%; height: 100%;
   -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
   background-size: cover;
   background-attachment: fixed;
   background-image: url('../images/bg.jpg');
   background-color: #a4b1c4;
}

/* --- LAYOUT --------------------------------- */
#container {
   position: relative;
   width: 80%;
   min-width: 310px;
   max-width: 1300px;
   margin: 0 auto;
   padding: 0;
   height: auto !important; /* real browsers */
   height: 100%; /* IE6: treaded as min-height*/
   min-height: 100%; /* real browsers */

   xbackground: url('../images/body-bg.gif') #1b193b repeat-y 0 0;
   background-color: #1b193b;
   color: #dae4f2;

   -moz-box-shadow:    0px 0px 12px 8px rgba(0,0,0, 0.2);
   -webkit-box-shadow: 0px 0px 12px 8px rgba(0,0,0, 0.2);
   box-shadow:         0px 0px 12px 8px rgba(0,0,0, 0.2);
}

/* --- HEADER --------------------------------- */
#header-container {
   position: relative;
   left: 0px;
   top: 0px;
   height: 73px;
   width: 100%;
   xborder-bottom: 2px solid #252344;
   xcolor: #dae4f2;
}
   #header-title {
      position: absolute;
      right: 7%;
      top: 40px;
      height: 40px;
      width: 300px;
      text-align: right;
   }
   #header-title h1,
   #header-title h3 {
      margin: 0;
      padding: 0;
      font-family: 'photoblogregular', 'Muli', Verdana, Tahoma, sans-serif;
      font-variant: inherit;
      font-weight: normal;
      z-index: 100;
   }
   #header-title a {
      color: #dae4f2;
      margin: 0;
      padding: 0;
   }
   #header-title a:hover {
      color: #fff;
   }

/* --- MENU ----------------------------------- */
#menu {
   max-width: 750px;
   left: 0px;
   text-align: right;
   border-bottom: 1px solid #312e5e;
   xcolor: #dae4f2;
   z-index: 0;
}
   #menu-inner {
      position: relative;
      xright: 7%;
      xtop: 10px;
      width: 740px;
      margin: 0.6em 7% 0 7%;
   }
   #menu ul {
      float: left;
      display: inline;
      margin: 0;
      padding: 0;
      list-style-type: none;
   }
   #menu ul.left {
      float: left;
   }
   #menu ul.right {
      float: right;
   }
      #menu ul li {
         float: left;
         position: relative;
         display: inline;
         margin: 0;
         padding: 5px 40px 2px 0px;
         font-size: 1.1em;
         font-variant: small-caps;
         line-height: 1.3em;
         height: 2em;
      }
      #menu ul li:last-of-type {
         padding-right: 0;
      }
      #menu ul.right li {
         padding: 5px 0px 2px 30px;
      }
         #menu ul li a {
            color: #dae4f2;
            font-weight: normal;
         }
         #menu ul li a:hover {
            color: #fff;
         }

/* --- CONTENT -------------------------------- */
#content {
   position: relative;
   width: 100%;
   float: none;
   clear: both;
   padding: 0 0 50px 0;
   xcolor: #dae4f2;
}
   #content-inner {
      width: 86%;
      float: none;
      display: block;
      margin: 1em 7% 1em 7%;
   }
   /* http://nicolasgallagher.com/micro-clearfix-hack/ */
   #content-inner { zoom: 1; }
   #content-inner:before,
   #content-inner:after { content: ""; display: table; }
   #content-inner:after { clear: both; }

   #content-inner h3 {
      clear: both;
      margin: 25px 0 5px 15px;
   }
   #content-inner p, ul {
      margin: 0 0 1.5em 0;
      line-height: 1.35em;
   }

/* --- FOOTER --------------------------------- */
#footer-container {
   position: absolute;
   width: 100%;
   height: 50px;
   bottom: 0;
   text-align: right;
   border-top: 1px solid #312e5e;
   xcolor: #dae4f2;
}
   #footer-inner:before,
   #footer-inner:after {
       content: "";
       display: table;
   }
   #footer-inner:after {
       clear: both;
   }
   #footer-inner {
      width: 85%;
      margin: 0.6em 7% 0.3em 8%;
      /* For IE 6/7 (trigger hasLayout) */
      zoom: 1;
   }
      #footer-inner a {
         margin: 0 4px 0 0;
         padding: 0;
      }
      #footer-inner #social {
         float: left;
      }
      #footer-inner #cr {
         float: right;
      }

/* --- FRONTPAGE ------------------------------ */
.frontpage {
}
   .frontpage .filler {
      background-image: url('../images/bg.jpg');
      background-color: #a4b1c4;
   }
#frontpage {
   position: relative;
   margin: 0 auto;
   padding: 0;
   width: 80%;
}
#frontpage:after {
    padding-top: 100%; /*1:1 ratio*/
    display: block;
    content: '';
}
#frontpage a img {
   position: absolute;
   margin: 0 2px 2px 0;
   padding: 0;
   border: 1px solid #7b7f97;
}
#frontpage a:hover img {
}
#frontpage a .hov {
   display: none;
   border: 1px solid #fff;
   vertical-align: middle;
   text-align: center;
}

/* --- FOTO ---------------------------------- */

.photopage {
}
   .photopage .filler {
      background-image: none;
   }
   .photopage #container {
      background-image: none;
      background-color: #111115;
   }
   .photopage #content {
      /* min-height: 770px; /* voor staande foto's */
   }
   .photopage #content-inner {
      float: none;
      display: block;
      position: relative;
      width: 100%;
      margin: 40px 0 20px 0;
   }
   .photopage li {
      margin-left: 0;
   }

ul#catList {
   float: right;
   xwidth: 90%;
   margin: 0 20px 2px 5%;
}
   #catList li {
      float: left;
      margin-left: 20px;
      font-size: 1em;
      list-style-type: none;
   }
   #catList li a {
      color: #555;
      font-weight: normal;
   }
   #catList li a:hover {
      color: #fff;
   }

/* --- BRUILOFT ------------------------------- */
.bruiloftpage {
}
   .bruiloftpage .filler {
      background-image: url('../images/bg.jpg');
      background-color: #a4b1c4;
   }
   .bruiloftpage #menu,
   .bruiloftpage #footer-container {
      border-color: #fff;
      color: #fff;;
   }
   .bruiloftpage #header-title a,
   .bruiloftpage #menu ul li a {
      color: #fff;
   }
   .bruiloftpage #container {
      background-color: rgb(138, 129, 122);
      color: #fff;;
   }
   .bruiloftpage #content-inner {
      width: 100%;
      margin: 20px 0;
   }

.fotoslider {
   position: relative;
   width: 100%;
   margin: 0;
}
   .fotoslider img {
      width: 100%;
      margin: 0;
      padding: 0;
      border-top: 1px solid rgba(255,255,255, 0.6);
      border-bottom: 1px solid rgba(255,255,255, 0.6);
      xbox-shadow: 0 0px 4px 0 rgba(0,0,0, 0.5);
   }
.fotocaption {
   position: absolute;
   margin: 2%;
   padding: 0;
   width: 96%;
   background-color: rgba(0,0,0,0.6);
   border: 1px solid rgba(255,255,255, 0.5);
}
   #content .fotocaption h3 {
      margin: 0.8em 1em 0 1em;
   }
   #content .fotocaption p {
      margin: 0.8em 1em;
   }

/* --- FOTOBEWERKING -------------------------- */
.voorNa {
   overflow: hidden;
   width: 300px;
   position: relative;
   margin-bottom: 40px;
}

/* --- DEFAULTPAGE STYLING -------------------- */
.defaultpage {
}
   .defaultpage .filler {
      xbackground-image: url('../images/bg.jpg');
      xbackground-color: #a4b1c4;
   }

/* --- INLINE IMAGES -------------------------- */
img.inline {
   margin: 0 10px 50px 10px;
}