@font-face{ font-family: 'MetaPlusBold'; src: url('../css/metaplusbold.ttf'); }
@font-face{ font-family: 'MetaPlusBook'; src: url('../css/metaplusbook.ttf'); }

html, body, div, span,
h1, h2, h3, h4, h5, h6, p,
a, em, img, strong,
ol, ul, li,
table, tr, th, td,
form {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 14px;
  background: transparent;
  font-family: 'Segoe UI', Tahoma, Verdana, Arial, Helvetica, sans-serif;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
input, button{
  overflow: visible;
}
html {
  overflow: auto;
}
html, body {
  height: 100%;
  min-height: 100%;
}
body {
  font-family: 'Segoe UI', Tahoma, Verdana, Arial, Helvetica, sans-serif;
  line-height: 1.2;
  color: #1e2022;
  text-align: center;
  background: #fcfcfc;
}
p {
  padding: 0 0 10px;
}
ul {
  padding: 0 0 0 16px;
}
li {
  padding: 0 0 8px;
}
a, row a {
  text-decoration: none;
  color: #1E2022;
}

label { width: 150px; height: 30px; display: inline-block; color: #777777; }
h1 { font-size: 1.7em; color: #999999; margin-bottom: 10px; }
input[type='submit'] {
  font-size: 1.2em;
  width: 120px;
  height: 25px;
  padding-bottom: 5px;
  cursor: pointer;
  border-radius: 4px 4px 4px 4px;
    border-style: solid;
    border-width: 1px;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 1px 2px rgba(0, 0, 0, 0.05);
  background-color: #5BB75B;
    background-image: linear-gradient(to bottom, #62C462, #51A351);
    background-repeat: repeat-x;
    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
    color: #FFFFFF;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  
}
.right { float: right; }
.nav img{ height: 20px; cursor: pointer; }
.left { float: left; }
.clear { clear: both; }
.block { display: inline-block; }
.disabled { cursor: default !important; }
.button {
  font-size: 1.2em;
  text-align: center;
  width: 120px;
  height: 20px;
  padding-bottom: 5px;
  padding-top: 5px;
  cursor: pointer;
  
  border-radius: 4px 4px 4px 4px;
  border-style: solid;
  border-width: 1px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 1px 2px rgba(0, 0, 0, 0.05);
  
  background-color: #5BB75B;
    background-image: linear-gradient(to bottom, #62C462, #51A351);
    background-repeat: repeat-x;
    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
    color: #FFFFFF;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  
}
input[type='text'], input[type='email'], input[type='file'], input[type='password'], select{
  border: 1px solid #DDDDDD;
  width: 250px;
  padding: 5px;
  background-color: #E0E0E0;
  color: #555555;
  border-radius: 4px 4px 4px 4px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 1px 2px rgba(0, 0, 0, 0.05);
}

input[type='text']:invalid, input[type='email']:invalid, input[type='password']:invalid{
    border: 3px solid #AADDDD;
}
.zoek {
  background-image: url('../img/icons/magnifier.png');
  background-repeat: no-repeat;
  background-position: 5px 50%;
  padding-left: 25px !important;
}
#pageContainer { min-height: 100%; width: 1330px; margin: auto; }
#pageContainerMobi { min-height: 100%; width: 100%; margin: 0px; }
.viewWidth { width: 1330px; }
.viewWidthMobi { width: 100%; }

#header img { float: left; padding-top: 10px; }
#header div {  
  background-image: linear-gradient(bottom, #CCCCCC 47%, #DDDDDD 59%);
  background-image: -o-linear-gradient(bottom, #CCCCCC 47%, #DDDDDD 59%);
  background-image: -moz-linear-gradient(bottom, #CCCCCC 47%, #DDDDDD 59%);
  background-image: -webkit-linear-gradient(bottom, #CCCCCC 47%, #DDDDDD 59%);
  background-image: -ms-linear-gradient(bottom, #CCCCCC 47%, #DDDDDD 59%);
  background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0.47, #CCCCCC), color-stop(0.59, #DDDDDD) );
  
  float: right;
  padding:10px;
  width: 100px;
  font-weight: bold;
  margin: 5px;
  margin-right: 0px;
  margin-top: 23px;
  
  -webkit-border-top-left-radius: 10px;
  -webkit-border-top-right-radius: 10px;
  -moz-border-radius-topleft: 10px;
  -moz-border-radius-topright: 10px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}
#header a { color: #FFFFFF; }
#header a:hover { color: #555555; }
#header div:hover {
  background-image: linear-gradient(bottom, #EEEEEE 17%, #CCCCCC 59%);
  background-image: -o-linear-gradient(bottom, #EEEEEE 17%, #CCCCCC 59%);
  background-image: -moz-linear-gradient(bottom, #EEEEEE 17%, #CCCCCC 59%);
  background-image: -webkit-linear-gradient(bottom, #EEEEEE 17%, #CCCCCC 59%);
  background-image: -ms-linear-gradient(bottom, #EEEEEE 17%, #CCCCCC 59%);  
  background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0.17, #EEEEEE), color-stop(0.59, #CCCCCC) );
}
.activeButton {
  background-image: linear-gradient(bottom, #51A351 47%, #62C462 59%) !important;
  background-image: -o-linear-gradient(bottom, #51A351 47%, #62C462 59%) !important;
  background-image: -moz-linear-gradient(bottom, #51A351 47%, #62C462 59%) !important;
  background-image: -webkit-linear-gradient(bottom, #51A351 47%, #62C462 59%) !important;
  background-image: -ms-linear-gradient(bottom, #51A351 47%, #62C462 59%) !important;
  background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0.47, #51A351), color-stop(0.59, #62C462) );
}

.inactiveButton {
  background-image: linear-gradient(bottom, #CCCCCC 47%, #DDDDDD 59%);
  background-image: -o-linear-gradient(bottom, #CCCCCC 47%, #DDDDDD 59%);
  background-image: -moz-linear-gradient(bottom, #CCCCCC 47%, #DDDDDD 59%);
  background-image: -webkit-linear-gradient(bottom, #CCCCCC 47%, #DDDDDD 59%);
  background-image: -ms-linear-gradient(bottom, #CCCCCC 47%, #DDDDDD 59%);
  background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0.47, #CCCCCC), color-stop(0.59, #DDDDDD) );
}

.inactiveUser {
  background-color: #ffb162 !important;
}

.studentLink {
    font-size: 1.2em;
    color: #b8b8b8;
    padding: 5px;
}

.alertButton {
  background-image: linear-gradient(bottom, #FF5555 47%, #FF4444 59%);
  background-image: -o-linear-gradient(bottom, #FF5555 47%, #FF4444 59%);
  background-image: -moz-linear-gradient(bottom, #FF5555 47%, #FF4444 59%);
  background-image: -webkit-linear-gradient(bottom, #FF5555 47%, #FF4444 59%);
  background-image: -ms-linear-gradient(bottom, #FF5555 47%, #FF4444 59%);
  background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0.47, #FF5555), color-stop(0.59, #FF4444) );
}

#bodyContainer { background-color: #eeeeee; position: fixed; top: 60px; bottom: 30px; overflow: scroll; border-top: 2px solid #cccccc; }
#bodyContainer_student { position: fixed; top: 60px; bottom: 30px; overflow: scroll; }
#body { padding:20px; text-align: left; display: inline-block; width: 90%; }
#bodyBO { padding:20px; text-align: left; }
#footer { position: fixed; bottom: 0px; height: 20px; background-color: #cccccc; padding-top: 5px; padding-bottom: 5px; }
#footer a { text-decoration: none; color: #AAAAAA; }

.Error { color: #FF0000; margin-bottom: 10px; font-size: 1.4em; }
.Success { color: #51A351; margin-bottom: 10px; font-size: 1.4em; }

.dataGrid { border-bottom: solid 2px #CCCCCC; width: 100%; padding-bottom: 10px; }

.row {
  width: 100%;
  display: inline-block;  
  border-radius: 4px 4px 4px 4px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 0px 0px rgba(0, 0, 0, 0.05);
}

.rowMobi {
  width: 100%;
  display: inline-block;  
  border-radius: 4px 4px 4px 4px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 0px 0px rgba(0, 0, 0, 0.05);
}

.row div { border-right: 1px solid #FFFFFF; padding: 5px; float: left; width: 25%; overflow: auto; min-height: 15px; margin-right: 5px; }
.rowMobi div { float: left; width: 18%; overflow: auto; min-height: 15px;margin-bottom: 5px;margin-top: 5px;}
.rowHead { background-color: #555555; font-weight: bold; color: #FFFFFF; }
.rowEven { background-color: #DDDDDD; cursor: pointer; }
.rowOdd { cursor: pointer; }
.row .double { width: 46%; border-right: none; }
.row .tripple { width: 65%; border-right: none; }
.row .quadruple { width: 100%; }
.row .quadrupleMinus { width: 90%; }
.row .buttons { width: 3%; }
.row img { width: 24px; }
.popUp { background-color: #FF0000; }

.popUpDiv {
  position:absolute;
  background-color:#DDDDDD;
  width:1004px;
  height:auto;
  z-index: 9002;
  padding: 10px;
  overflow: auto;
  text-align: left;
  border-radius: 4px 4px 4px 4px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 1px 2px rgba(0, 0, 0, 0.05);
}
.popUpDiv form { background-color: #EEEEEE; padding: 10px;
  border-radius: 4px 4px 4px 4px;
  border-style: none;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 1px 2px rgba(0, 0, 0, 0.05);
}
#popUpHeader{ color: #999999; font-size: 2em; font-weight: bold; margin-bottom: 15px; float: left; }
#popUpClose { font-weight: bold; font-size: 2em; float: right; color: #DD3333; cursor: pointer; }
#blanket {
  background-color:#111;
  opacity: 0.65;
  filter:alpha(opacity=65);
  position:absolute;
  z-index: 9001;
  top:0px;
  left:0px;
  width:100%;
}

#delay {
  display: none;
  background-color:#FFF;
  opacity: 0.65;
  filter:alpha(opacity=65);
  height: 100%;
  width: 100%;
  z-index: 100;
  position: absolute;
  top:0px;
  left:0px;  
}
#delay img {
  position: absolute;  
  top: 0;  
  bottom: 0;  
  left: 0;  
  right: 0;  
  margin: auto; 
}

.icon {
  margin-right:25px; cursor: pointer;
}

.importTable td { border: 1px solid; padding: 5px; }

.executionStep { height: 20px; width: 20px; }
.executionBar { border-bottom: 2px solid #CCCCCC; margin-bottom: 10px; }

.roundedDiv {
  cursor: pointer;
  
  
  border-radius: 4px 4px 4px 4px;
  border-style: solid;
  border-width: 1px;
  border-color: #999999;
  
  background-color: #F5F5F5;
  text-align: center;
  float: left;
  width: 175px;
  margin-right: 15px;
  font-size: 1.3em;
  color: #FFFFFF;
  padding-top: 5px;
  padding-bottom: 5px;
  margin-bottom: 5px;
}


.roundedDivFull {
  width: 100%;
  text-align: left;
  padding-left: 20px;
}
.roundedDivFull span { font-size: 1.5em; }
.stepTable td, .stepTable th {
  vertical-align: top; padding-right: 10px;
  margin-bottom: 20px;
}
.stepTable th { font-size: 1.5em; color: #CCCCCC; }
.checkedCheckmark { color: #51A351; }

#nextStep label { font-size: 1.5em; width: 100%; }
#nextStep input { width: 100%; }
.buttonUp {
    border-radius: 4px;
    background: #ddd;
    cursor: pointer;
    border-top: solid 2px #eaeaea;
    border-left: solid 2px #eaeaea;
    border-bottom: solid 2px #777;
    border-right: solid 2px #777;
    padding: 2px 2px;   	
    }

.buttonDown {
  border-radius: 4px;
  background: #AbA;
  border-top: solid 2px #777;
  border-left: solid 2px #777;
  border-bottom:solid 2px  #eaeaea;
  border-right: solid 2px #eaeaea;
  padding: 2px 2px;   	
}

.message {
  width: 90%;
  text-align: center;
  border-radius: 4px;
  background: #AdA;
  border: solid 2px #777;
  padding: 4px;
  margin-bottom: 10px;
}

.leftForm{ width: 25%; border-right: 1px solid #777; float: left; }

.rightForm { width: 70%; float: right; }
.rightForm H2 img { height: 20px; cursor: pointer; }

.frame{
  z-index: 10;
  display: inline-block;
  position: fixed;
  background:#cacaca;
  margin:0px;
  padding:0px;
  height: 960px;
  width: 1280px;
}

.selectiondiv{
  border:2px solid white;
  background:#1B94E0;
  opacity:0.4;
  filter:alpha(opacity=40);
  margin:0px;
  padding:0px;
  display:none;
  height: 0px;
  width:0px;
}
#ajaxSelection{
  border: 1px solid #F1C43F;
  background: #fDeEb3 none repeat scroll 0% 0%;
  filter:alpha(opacity=60);
  opacity:0.6;
  cursor: pointer;
  padding: 4px 6px;
  -webkit-border-radius: 3px 3px 3px 3px;
  -moz-border-radius: 3px 3px 3px 3px;
  border-radius: 3px 3px 3px 3px;
}
#status2 {
  position: fixed;
  height: 0px;
  width:0px;
  top: 0px;
  left: 0px;
  z-index: 2000;
}
#filterVervolg { background-color: #c0e3f8; }
#deleteClickArea { background-color: #fd6655; background-image: linear-gradient(to bottom, #e9713d, #d15b23); }