body
{
    font-size: 90%;
    font-family: Verdana, Tahoma, Arial, "Helvetica Neue", Helvetica, Sans-Serif;
    margin: 0 0 0 0;
    padding: 0 0 0 0;
    color:DarkBlue;
}

pre {
    font-family: Courier;
    font-size: 110%;
}

a:link
{
    color: #034af3;
    text-decoration: none;
}
a:visited
{
    color: #034af3;
}
a:hover
{
    color: #1d60ff;
    text-decoration: none;
}
a:active
{
    color: #12eb87;
}

p, ul
{
    margin-bottom: 20px;
    line-height: 1.6em;
}

img 
{
    max-height:550px;
    max-width:900px;
    height: expression(this.width>700 ? 700 : true); 
    width: expression(this.width>1200 ? 1200 : true); 
}


h1, h2, h3, h4, h5, h6
{
    font-size: 1.5em;
    color: darkblue;
}

h1
{
    font-size: 2em;
    padding-bottom: 0;
    margin-bottom: 0;
}
h2
{
    padding-top: 10px;
    padding-bottom: 10px;
}
h3
{
    font-size: 1.2em;
}
h4
{
    font-size: 1.1em;
}
h5, h6
{
    font-size: 1em;
}

/* this rule stylestags that are the
  first child of the left and right table columns */

.rightColumn > h1, .rightColumn > h2, .leftColumn > h1, .leftColumn > h2
  {
  margin-top: 0;
  }

div#toonvraag
{
    margin-top:2em;
}

div.vraag 
{
    padding-top:5px;
    padding-left:5px;
    padding-right:5px;
}

  div.vraag label, div.vraag label p 
  {   
     font-weight:bold;  
     font-family:Verdana, Tahoma, Arial, "Helvetica Neue", Helvetica, Sans-Serif;
     font-size: 1em;
     line-height:normal;
  }
  
  div.vraag ul 
  {
    margin-top:1em;
      
  }
  
  div.vraag img.vraagfiguur 
  {
    margin-top:1em;  
  }
  
div.vraag label ul,   div.vraag label ul li
  {
      display:block;
      float:none;
  }

  label table, div.vraag table
  {
  width: 200px;
  min-width:200px;
  margin-top: 1em;
  margin-bottom: 1em;
  }

  label table tr td, div.vraag table tr td
  {
  width: 20px;
  background-color: white;
  border-color: darkblue;
  }


  /* PRIMARY LAYOUT ELEMENTS
  ----------------------------------------------------------*/

  /* you can specify a greater or lesser percentage for the
  page width. Or, you can specify an exact pixel width. */
  .page
  {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  }

  #header
  {
  position: relative;
  margin-bottom: 0px;
  color: #000;
  padding: 0 0 0 0;
  }

  #header h1
  {
  font-weight: bold;
  padding: 5px 0;
  margin: 0 0 0 0;
  color: #fff;
  border: none;
  line-height: 2em;
  font-size: 32px !important;
  }

  #main
  {
  padding: 30px 30px 15px 30px;
  background-color: #fff;
  margin-bottom: 30px;
  _height: 1px; /* only IE6 applies CSS properties starting with an underscore */
  }

  #main p
  {
    margin-top:20px;   
  }

  #footer
  {
  color: #999;
  padding: 10px 0;
  text-align: center;
  line-height: normal;
  margin: 0 0;
  font-size: .9em;
  }

  ul#pagenumbers, ul#filterweg, ul#lijstTesten
  {
  padding: 0 0;
  position: relative;
  margin:2em 2.3em 1.5em 1.5em;
  text-align: center;
  }

  ul#pagenumbers li{
  display:block;
  position:relative;
  float:left
  }

img.pagenumbers {
    height:18px;
    width:18px; 
    vertical-align:middle;
    padding-top:5px;
    padding-bottom:5px;
}
img.opdrachten, input[type="image"].opdrachten 
{
    height:32px;
    width:32px; 
    vertical-align:middle;
    padding-left:5px;
    padding-right:5px;
}
  
  .huidigepagina
  {
      font-size:1.3em;   
  }
  
  #titelvast 
  {
    position:fixed;
	top:0px;
	left:0px;
    z-index:20;
	text-align: left;
	visibility: visible;
  }

  ul#tijden
  {
  padding: 0 0 2px 5px;
  position: absolute;
  margin: 2px 0em 1.5em 0em;
  text-align: left;
  }

  ul#pagenumbers, ul#tijden, ul#filterweg, ul
  {
  list-style: none;
  list-style-image:none;
  }

  ul#pagenumbers li, ul#tijden li, ul#filterweg li, ul#lijstTesten li
  {
  display: inline;
  list-style: none;
  list-style-image:none;
  font-size:1.1em;
  }
  
  ul#tijden li span
  {
      margin-left:2px;
  }

  div.validation-summary-errors ul {
            list-style-type:square;
}

  div.validation-summary-errors ul li 
  {
        display: block;
        float:none;
        margin-left:1em;
    }

  ul li pre
  {
  display : block;
  padding-left : 2em;
  margin-top:-1.5em;
  }

  ul.antwoord li
  {
  display:block;
  float:none;
  }

ul.antwoord li pre {
    padding-top:0.4em;
}


  li#greeting
  {
  padding: 10px 20px;
  font-weight: bold;
  text-decoration: none;
  line-height: 2.8em;
  color: #fff;
  }

  ul#pagenumbers li a, ul#tijden li span, ul#lijstTesten li a
  {
  padding: 10px 20px;
  font-weight: bold;
  text-decoration: none;
  line-height: 2em;
  background-color: #e8eef4;
  color: #034af3;
  }

  ul#pagenumbers li a:hover, ul#filterweg li a:hover
  {
  background-color:  #E3CEF6;
  text-decoration: none;
  }

  ul#pagenumbers li a:active, ul#filterweg li a:active
  {
  font-style:italic;
  font-weight:bold;
  }

  ul#pagenumbers li.selected a, ul#filterweg li.selected a
  {
  background-color: #fff;
  color: #000;
  }

  ul#groepenlijst li
  {
  list-style:none;
  float:none;
  }

  /* FORM LAYOUT ELEMENTS
  ----------------------------------------------------------*/

  fieldset
  {
  border: 1px solid #E2E5FF;
  padding: 0 1.4em 1.4em 1.4em;
  margin:0 0 1.5em 0;
  display:block;
  }

  fieldset label
  {
  padding-bottom:1em;
  padding-top:1em;
  display:block;
  }

  legend
  {
  font-size:1.2em;
  font-weight: bold;
  }

  textarea
  {
  width:100%;
  font-family: Verdana, Tahoma, Arial, "Helvetica Neue", Helvetica, Sans-Serif;
  color:DarkBlue;
  }

  input[type="text"] , .text-box, input[type="file"], select
  {
  width: 200px;
  border: 1px solid #8E97FF;
  display: inline;
  color:DarkBlue;
  padding: 2px 2px;
  }

input[type="file"] {
    width: 500px;
}

  input[type="password"]
  {
  width: 200px;
  border: 1px solid #8E97FF;
  padding: 2px 2px 2px 2px;
  }

  input[type="submit"], input[type="button"]
  {
  background-color: #e8eef4;
  color: darkblue;
  border: 0px solid #8E97FF;
  padding: 10px 20px;
  font-weight: bold;
  }

input[readonly="readonly"] {
    display:inline;
}

  div#divAfsluiten {
  margin-top:2.5em;
  margin-left:0em;
  }

  #knopTestAfsluiten {
        margin-left:2em;
        color: #034af3;
    }

  select
  {
  color: DarkBlue;
  border: 1px solid #8E97FF;
  padding: 2px 2px 2px 2px;
  }

  /* TABLE
  ----------------------------------------------------------*/

  table
  {
  border: solid 1px #e8eef4;
  border-collapse: collapse;
  width:100%;
  min-width:100%;
  display:table;
  table-layout:fixed;
  }


  table td
  {
  padding: 5px;
  border: solid 1px #e8eef4;
  background-color:White;
  font-family: Verdana, Tahoma, Arial, "Helvetica Neue", Helvetica, Sans-Serif;
  color:DarkBlue;
  }

  table th
  {
  padding: 5px 5px;
  text-align: left;
  background-color: darkblue;
  color:white;
  font-weight:300;
  border: solid 1px #e8eef4;
  }

  table td select, table td textarea, table td label
  {
  width: 100%;
  color:DarkBlue;
  }

table td input[type="text"]
{
  width: 90%;
  color:DarkBlue;    
}
  table td input[class="duurtijd"]
  {
  width: 5em;
  }

  table td input[readonly] {
  border: 0px solid white;
  }

  table tr[class="vraag"] td
  {
  background-color: #e8eef4;
  }

  table tr[class="traject"] td
  {
  background-color: yellow;
  }

  table.footerTable td
  {
  border-style:none;
  border-width:0px;
  }

  .tableFooterLeft
  {
  width:10%;
  min-width:10%;
  float:left;
  }
  .tableFooterRight
  {
  text-align:right;
  display:inline;
  float:right;
  }

  table#tblVragen {
    margin-top:4em;
}

  table#tblVragen td {
    width:100%;
    min-width:100%;
}




  /* MISC
  ----------------------------------------------------------*/
  img#ImageLogo
  {
  float:left;
  }

  .clear
  {
  clear: both;
  }

  .error
  {
  color:Red;
  }

  .pageNumbers
  {
  text-align:center;
  width:100%;
  }

  label.attribuut
  {
  width:14em;
  display:inline;
  }

  #menucontainer
  {
  margin-top:1.4em;
  }

  div#title
  {
  display:block;
  float:left;
  text-align:left;
  }

  #titel
  {
  font-size:2em;
  font-weight:bold;
  display:inline-block;
  float:next;
  text-align:center;
  color:white;
  padding-top:20px;
  margin-left:50px;
  }

  #logindisplay
  {
  color:white;
  font-size:1.1em;
  display:inline;
  float:right;
  text-align:right;
  margin:2em 2em;
  color:white;
}

#logindisplay a:link
{
    color: white;
    text-decoration: underline;
}

#logindisplay a:visited
{
    color: white;
    text-decoration: underline;
}

#logindisplay a:hover
{
    color: white;
    text-decoration: none;
}

/* Styles for validation helpers
-----------------------------------------------------------*/
.field-validation-error
{
    color: #ff0000;
}

td .field-validation-error
{
    display:inline-block;
}

.field-validation-valid
{
    display: none;
}

.input-validation-error
{
    border: 1px solid #ff0000;
    background-color: #ffeeee;
}

.validation-summary-errors
{
    font-weight: bold;
    color: #ff0000;
}

.validation-summary-valid
{
    display: none;
}

/* Styles for editor and display helpers
----------------------------------------------------------*/
.display-label,
.editor-label
{
    margin: 1em 0 0 0;
}

.display-field,
.editor-field
{
    margin:0.5em 0 0 0;
}

.text-box
{
    width: 30em;
}

.text-box.multi-line
{
    height: 6.5em;
}

.tri-state
{
    width: 6em;
}

.alignRechts 
{
    text-align:right;
}

.banner
{
	background-image: url('../Images/logo_band.GIF');
	background-repeat: repeat-x;
	width:100%;
	height:66px;
}

.even
{
    background-color:lightblue;
}

.oneven
{
    background-color:lightyellow;
}

.tabelvragen 
{
    margin-top:6em;
}

.knopje {
    margin-left: 1px;
    text-decoration: none;
    color: #034af3;
    border: 0px solid #8E97FF;
    padding: 5px 15px 5px 15px;
    background-color: #e8eef4;
}

input[type=text].noborder {
    border:none;
}

/* Popup container */
.popup {
    position: relative;
    display: inline-block;
    cursor: pointer;
}

/* The actual popup (appears on top) */
.popup .popuptext {
    visibility: hidden;
    width: 160px;
    background-color: #555;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 8px 0;
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 50%;
    margin-left: -80px;
}

/* Popup arrow */
.popup .popuptext::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #555 transparent transparent transparent;
}

/* Toggle this class when clicking on the popup container (hide and show the popup) */
.popup .show {
    visibility: visible;
    -webkit-animation: fadeIn 1s;
    animation: fadeIn 1s
}

/* Add animation (fade in the popup) */
 @-webkit-keyframes fadeIn {
    from {opacity: 0;} 
    to {opacity: 1;}
}

@keyframes fadeIn {
    from {opacity: 0;}
    to {opacity:1 ;}
}

@media screen and (min-width:960px) {
    .tabelvragen {
        margin-top: 3em;
    }
}