html, body, body div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form,
label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, hgroup,
menu, nav, section, time, mark, audio, video, details, summary
{ margin: 0; padding: 0; border: 0; font-size: 100%; vertical-align: baseline; background: transparent }
* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary { display:block }
audio,canvas,video { display:inline-block; *display:inline; *zoom:1 }
audio:not([controls]) { display:none; height:0 }
[hidden] { display:none }
html { font-size:100%; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; overflow-y: scroll; }
html,button,input,select,textarea { font-family:sans-serif }
body { margin:0 }
a:focus { outline:thin dotted }
a:active,a:hover { outline:0 }
abbr[title] { border-bottom:1px dotted }
b,strong { font-weight:bold }
blockquote { margin:1em 40px }
dfn { font-style:italic }
hr { -moz-box-sizing:content-box; box-sizing:content-box; height:0 }
mark { background:#ff0; color:#000 }
p,pre { margin:1em 0 }
code,kbd,pre,samp { font-family:monospace,serif; _font-family:'courier new',monospace; font-size:1em }
pre { white-space:pre; white-space:pre-wrap; word-wrap:break-word }
q { quotes:none }
q:before,q:after { content:''; content:none }
small { font-size:80% }
sub,sup { font-size:75%; line-height:0; position:relative; vertical-align:baseline }
sup { top:-0.5em }
sub { bottom:-0.25em }
dl,menu,ol,ul { margin:1em 0 }
dd { margin:0 0 0 40px }
menu,ol,ul { padding:0 0 0 40px }
nav ul,nav ol { list-style:none; list-style-image:none }
img { border:0; -ms-interpolation-mode:bicubic }
img, object, embed {max-width: 100%;}
svg:not(:root) { overflow:hidden }
figure { margin:0 }
form { margin:0 }
fieldset { border:1px solid #c0c0c0; margin:0 2px; padding:.35em .625em .75em }
legend { border:0; padding:0; white-space:normal; *margin-left:-7px }
button,input,select,textarea { font-size:100%; margin:0; vertical-align:baseline; *vertical-align:middle }
button,input { line-height:normal }
button,select { text-transform:none }
button,html input[type="button"],input[type="reset"],input[type="submit"] { -webkit-appearance:button; cursor:pointer; *overflow:visible }
button[disabled],html input[disabled] { cursor:default }
input[type="checkbox"],input[type="radio"] { padding:0; *height:13px; *width:13px }
input[type="radio"] {vertical-align: text-bottom }
input[type="checkbox"] {vertical-align: bottom }
.ie7 input[type="checkbox"] {vertical-align: baseline }
.ie6 input {vertical-align: text-bottom }
input[type="search"] { -webkit-appearance:textfield; -moz-box-sizing:content-box; -webkit-box-sizing:content-box; box-sizing:content-box }
input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration { -webkit-appearance:none }
button::-moz-focus-inner,input::-moz-focus-inner { border:0; padding:0 }
textarea { overflow:auto; vertical-align:top }
table { border-collapse:collapse; border-spacing:0 }
th {font-weight: bold; vertical-align: bottom;}
td {font-weight: normal; vertical-align: top;}

/* scale images in IE7 more attractively & prevent BG image flicker upon hover */
.ie7 img {-ms-interpolation-mode: bicubic;}
.ie6 html {filter: expression(document.execCommand("BackgroundImageCache", false, true));}

/* clear floats */
.clearfix:before, .clearfix:after { content: "\0020"; display: block; height: 0; overflow: hidden; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }
.chromeframe {position: absolute; top: 0;}



/* ===== Primary Styles ========================================================
   Author: Johan Coppieters
   Design: Jelle Cayman
   Colors:
      Zwart: #333334
      Grijs: #9d9d9c
      Blauw: #4d94cc (links, titels van gele buttons, ...)
      Geel BG: #fcc14e
      Geel BG 40%: #fee6b8
      Geel tekst: #f3ad25
      Geel border: #ed9d00
      BG: #f6f6f5

   ========================================================================== */
h1 { font-size: 34px; color: #333334; font-weight: bold; width: 100%; text-align: left; display: block; margin: 10px 0 10px 0  }
h2 { font-size: 24px; color: #333334; font-weight: bold; letter-spacing: 1px; text-align: left; color: #333334; margin: 10px 0 10px 0 }
h3 { font-size: 20px; color: #333334; font-weight: bold }
h4 { font-size:1em; margin:1.33em 0 }
h5 { font-size:.83em; margin:1.67em 0 }
h6 { font-size:.67em; margin:2.33em 0 }

body { background-color: #f6f6f5; font-family: helvetica, arial, sans-serif; color: #333334; }
a { color: #4d94cc }

img { margin-top: 10px; border: solid 1px #9d9d9c; max-width: 685px;
      box-shadow: 2px 2px 5px lightgrey; -moz-box-shadow: 2px 2px 5px lightgrey; -webkit-box-shadow: 2px 2px 5px lightgrey }
li { font-size: 14px }
pre { margin: 0 20px 0 0; font-size: 12px; padding: 8px; border: solid 1px #9d9d9c }

/* =============================================================================
   All pages - Header & Footer
   ========================================================================== */
/* original
header { width: 1130px; margin: 10px auto; } */
#banner { margin-top: 84px; }
header {
  box-shadow: 0px 3px 2px black; height:84px; padding:10px 10px 10px 0; margin: 0px auto;
  width: 100%; background-color: white; position: fixed; top: 0; left: 0 }

header img { margin: 0 0 0 95px; height: 60px; display: inline-block;
             box-shadow: none; -moz-box-shadow: none; -webkit-box-shadow: none; border: none; max-width: inherit }
header nav { float: right; margin: 0 }
header nav a { font-size: 16px; font-weight: bold; color: #333334; text-decoration: none;
               margin: 24px 50px 0 0; text-transform: uppercase; display: inline-block; padding-bottom: 5px  }
header nav a.active,
header nav a:hover { border-bottom: solid 2px #fcc14e }

header aside { display: inline-block; float: right; margin: 0 2px 0 10px }
header aside a { font-size: 12px; text-transform: uppercase; color: #333334; text-decoration: none; font-weight: bold }
header aside a.active { color: #9d9d9c }
header aside a:hover { border-bottom: solid 2px #fcc14e }
header aside a:active:hover { border-bottom: none }

#banner { width: 100%; background-position: left top; background-repeat: repeat-x }

footer { background-color: #333334; }
footer section { width: 1130px; height: 170px; margin: 10px auto 0 auto; display: table; padding-top: 30px }
footer a { text-align: center; display: inline-block; width: 24%; margin: auto; vertical-align: middle }
footer img { margin-top: 0px; border: none; max-width: inherit; box-shadow: none; -moz-box-shadow: none; -webkit-box-shadow: none}

@media (max-width: 1039px) {
  header img { margin-left: 60px }
  header { width: 100%; }
  footer section { width: 100% }
  header nav a { margin: 24px 15px 0 0 }
}
@media (max-width: 639px) {
  header img { float: none; height: 40px; display: block; margin: 0 0 0 10px }
  header nav { float: none; margin: 5px 0 0 10px; display: inline-block }
  header nav a { margin: 12px 10px 0 0 }
  footer a { width: 95%; margin: 10px 10px 20px 10px }
  header aside { margin-left: 10px }
  header nav a { font-size: 14px }
}


/* =============================================================================
   Fork me on Github ribbon
   ========================================================================== */

#ribbon { height: 149px; width: 149px; overflow: hidden; padding: 0; margin: 0;
  position: fixed; top: 84px; right: 0; z-index: 999 }

#ribbon a {
  display: block; position: relative; left: 0; top: 0; font-size: 14px; font-weight: bolder; text-decoration: none;
  text-align: center; color: #333334; width: 240px; padding: 8px 30px; border: 1px solid #ed9d00; background-color: #fcc14e;
  -webkit-box-shadow: 1px 0 3px 1px rgba(0,0,0,0.4); -moz-box-shadow: 1px 0 3px 1px rgba(0,0,0,0.4); box-shadow: 1px 0 3px 1px rgba(0,0,0,0.4);
  -moz-transform-origin: 20% 0; -webkit-transform-origin: 20% 0; -ms-transform-origin: 20% 0; -o-transform-origin: 20% 0; transform-origin: 20% 0;
  -moz-transform: rotate(45deg); -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg) }

@media (max-width: 639px) {
  #ribbon { top: 24px }
  #ribbon a { width: 125px; height: 22px; padding: 3px 6px; font-size: 12px;
    -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none;
    -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;
    -moz-transform-origin: 0 0; -webkit-transform-origin: 0 0; -ms-transform-origin: 0 0; -o-transform-origin: 0 0; transform-origin: 0 0;
    -moz-transform: rotate(0deg); -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg);
  }
}


/* =============================================================================
   Home page
   ========================================================================== */

.home h1 { font-size: 34px; color: #9d9d9c; font-weight: bold; width: 100%; text-align: center; display: block; margin: 20px auto }
.home h2 { font-size: 20px; color: #333334; font-weight: normal; letter-spacing: 1px }

.home #banner { background-image: url(../images/bannerL.png); margin-bottom: 35px }
.home #banner img { margin-top: 0px; border: none; max-width: inherit; box-shadow: none; -moz-box-shadow: none; -webkit-box-shadow: none}

.home #banner section { width: 1130px; margin: 10px auto }
.home #banner section > img { margin: 65px 0 0 40px; float: left; display: inline-block; width: 640px }

.home #banner section > div { float: left; display: inline-block; width: 440px }
.home #banner section > div > h2 { margin: 180px 0 163px 20px; display: block; color: white;  }
.home #banner section > div > a { margin-left: 50px; display: block }

.home #content { border-top: solid 1px #9d9d9c; background-color: white }
.home #content section { width: 1130px; margin: 10px auto 0 auto }
.home #content article { width: 24%; display: inline-block; min-height: 100px;
                         margin: 5px 0 30px 0; padding-right: 20px; vertical-align: top; padding: 6px }
.home #content article p { font-size: 14px; }
.home #content article a { font-size: 12px }

.home #examples { border-top: solid 1px #9d9d9c }
.home #examples section { width: 1130px; margin: 10px auto }
.home #examples section article { margin: 15px; width: 45%; display: inline-block }
.home #examples section img { box-shadow: none; -moz-box-shadow: none; -webkit-box-shadow: none; border: none; max-width: 100% }

@media (max-width: 1025px) {
  .home #banner { background-size: auto 250px; margin-bottom: 15px; }
  .home #banner section { width: 100% }
  .home #banner section > img { margin: 90px 0 0 30px; float: left; display: inline-block; width: 390px }
  .home #banner section > div { width: auto;  }
  .home #banner section > div > h2 { margin: 140px 0 93px 20px; font-size: 22px }
  .home #banner section > div > a { margin-left: 45px }

  .home #content section { width: 100%; margin: 10px auto 0 auto }
  .home #content article { width: 48%; margin-left: 8px }

  .home #examples section { width: 100%; margin: 10px auto }
}

@media (max-width: 830px) {
  header img { margin-left: 40px }
  .home #banner section > img { margin: 90px 0 0 30px; float: left; display: inline-block; width: 350px }
  .home #banner section > div > h2 { margin: 140px 0 100px 10px; font-size: 18px }
  .home #banner section > div > a > img { width: 200px }
}

@media (max-width: 720px) {
  .home #banner section > img { display: none }
  .home #banner section > div > h2 { margin: 110px 0 120px 20px; display: block; color: white; font-size: 16px }
  .home #banner section > div > a { margin-left: 50px }

  .home #content article { width: 95%; margin-left: 4px }
}

/* =============================================================================
   Content page
   ========================================================================== */

.page header { /* width: 1023px */ }
.page header nav a { margin: 24px 4px 0 46px }
.page header img { margin-left: 8px;
                   box-shadow: none; -moz-box-shadow: none; -webkit-box-shadow: none; border: none; max-width: inherit }
.page #banner { background-image: url(../images/banner.png); height: 64px  }

.page #content { width: 1023px; margin: 10px auto }
.page #content nav { width: 250px; display: inline-block; border: 1px solid #9d9d9c; margin: 8px; background-color: white; vertical-align: top }
.page #content nav > span { display: inline-block; margin: 8px 0 0 8px }
.page #content nav ul { margin: 8px 16px 16px 8px; padding: 0 }
.page #content nav li { margin: 8px 2px 8px 2px; padding: 10px 0 0 0; border-top: solid 1px #9d9d9c }
.page #content nav li:first-child { border-top: none }
.page #content nav a { color: #9d9d9c; text-decoration: none; font-size: 14px }
.page #content nav a:hover { color: #333334; border-bottom: solid 1px #333334 }
.page #content nav a.active { color: #f3ad25 }

.page #content section { width: 734px; display: inline-block; border: 1px solid #9d9d9c;
                         padding-top: 10px; margin: 8px 4px 8px 8px; background-color: white; vertical-align: top }
.page #content section.noNav { width: 1004px }

.page #content section h1 { margin-left: 24px }

.page #content article { margin: 0; padding: 0 0 20px 26px; display: inline-block; text-align: left; vertical-align: top; width: 100% }
.page #content article.intro { width: 300px; border-top: solid 1px lightgrey; padding: 18px 0 10px 26px; margin: 10px 10px 0px 20px; }
.page #content article p { font-size: 14px; color: #333334; margin: 5px 0 24px 0px; padding-right: 20px }
.page #content article pre {  }
.page #content article img.intro { max-width: 90%; max-height: 165px }
.page #content article li { margin-bottom: 8px; margin-right: 5px }
.page #content article li li { margin-top: -5px; }

.page #content form {margin: 0px; border: solid 1px #c0c0c0; padding: 10px; }
.page #content form fieldset { border: none; padding: 0; margin: 0 }
.page #content form fieldset > div { margin: 10px 0 15px 0 }
.page #content form fieldset > div > label { display: inline-block; width:160px; text-align: right; padding: 0 13px 0 0; font-weight: bold }
.page #content form fieldset > div > input[type=text] { width: 350px }
.page #content form fieldset > div > input[type=text].number { width: 70px }
.page #content form fieldset > div > div { display: inline-block; }
.page #content form fieldset > div > div > label { display: inline-block; margin: 0 20px 0 7px }
.page #content form fieldset > div > div > input { vertical-align: top; }
.page #content form #action_buttons { border-top: solid 1px #c0c0c0; padding: 10px 0 0 160px; }

.page #content form fieldset > div > label.error { text-align: left; padding: 4px 0 0 160px; color: red; display: block; width: inherit }
.page #content form fieldset > div > input.error,
.page #content form fieldset > div > textarea.error { border: 1px solid red }



@media (max-width: 1023px) {
  .page #content { width: 96%; margin: 10px auto 0 auto; display: block }
  .page #content section { width: 96%; }
  .page #content section.nonav { width: 96%; }
  .page #content h1 { margin-left: 5px }
  .page header { width: 100%; }
  .page #content section { width: inherit; }
  .page footer section { width: 100% }
  .page header nav a { margin: 24px 15px 0 0 }
}
@media (max-width: 639px) {
  .page #content { width: 98% }
  .page #content section.noNav { width: 98%; }
  .page #content section { width: inherit; }
  .page #content article { margin-left: 4px; display: block }
  .page #content form fieldset > div > label { display: block; text-align: left; padding: 0 0 5px 0 }

}

/* =============================================================================
   Login page
   ========================================================================== */

.login #banner { background-image: url(../images/bannerL.png); height: 370px;  }
.login #banner section { width: 1130px; margin: 10px auto }

.login #banner section > form { float: left; display: inline-block; background: white; width: 440px }
.login #banner section > h2 { float: left; display: inline-block; width: 440px }

/* =============================================================================
   Site creation styles
   ========================================================================== */
.page #content form.sitecreationform { width: 600px; margin-bottom: 18px; box-shadow: lightgrey 2px 2px 2px; }

.sitecreation .userdetail{
    width: 575px;
    font-size: 20px;
    height: 40px;
    padding: 4px 4px 4px 10px;
    margin-bottom: 20px;
}
.sitecreation label{
    display: inline-block;
    width: 600px;
    font-weight: bold;
}
.sitecreation{
    padding-left: 60px;
}
.warning {padding: 5px 10px; background: #fef9f9; border: 1px solid rgb(253,190,87); color: rgb(210,133,2); text-align: left; width: 575px; font-size: 15px }
/* =============================================================================
   Print Styles
   ========================================================================== */

@media print {
  * { background: transparent !important; color: black !important; box-shadow:none !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important; } /* Black prints faster: h5bp.com/s */
  a, a:visited { text-decoration: underline; }
  a[href]:after { content: " (" attr(href) ")"; }
  abbr[title]:after { content: " (" attr(title) ")"; }
  .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; }  /* Don't show links for images, or javascript/internal links */
  pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
  thead { display: table-header-group; } /* h5bp.com/t */
  tr, img { page-break-inside: avoid; }
  img { max-width: 100% !important; }
  @page { margin: 0.5cm; }
  p, h2, h3 { orphans: 3; widows: 3; }
  h2, h3 { page-break-after: avoid; }
}