/* Colorcodes 

Turqoise:
Quadri: C100-M0-Y30-K0
Pantone: 3125
#00abbd

Donkerblauw:
Quadri: C100-M71-Y39-K34
Pantone: 302
#003e5b

Oranje:
Quadri: C10-M50-Y100-K0
Pantone: 7564 
#e28f26

*/

html { overflow: auto; }
body { font-weight: normal; font-size: 10pt; font-family: Calibri; margin: 0; background: #E9EAED; scrollbar-face-color: #ebeffa; scrollbar-shadow-color: #d1dbf4; scrollbar-highlight-color: #ffffff; scrollbar-3dlight-color: #ffffff; scrollbar-darkshadow-color: #ffffff; scrollbar-track-color: #f8fafd; scrollbar-arrow-color: #bdcbef; }

input[type="text"],
input[type="password"] { text-align: center; padding: 10px; border: 1px solid #ccc; background-color: #fff; border-radius: 3px; -webkit-box-shadow: inset 0 0 10px 0 rgba(0,0,0,.1); box-shadow: inset 0 0 10px 0 rgba(0,0,0,.1); }
input[type="submit"] { border: 0; padding: 7px 10px; background: #00abbd; border-radius: 3px; border-bottom: 2px solid #00828e; transition: 0.3s; color: #eee; cursor: pointer; }
input[type="submit"]:hover { background: #e28f26; border-bottom-color: #c4791d; }

select { padding: 4px; border: 1px solid #ccc; border-radius: 3px; cursor: pointer; }

.info { margin-bottom: 10px; position: relative; overflow: hidden; transition: 1s; height: 43px; }
.info .info-content { padding: 5px; height: 32px; border-radius: 3px; border-bottom: 1px solid; }
.info .information { background: #76afdc; border-color: #5c8db2; }
.info .success { background: #8ec641; border-color: #80b23a; }
.info .warning { background: #fddb55; border-color: #e8c64e; }
.info .error { background: #F0947B; border-color: #d5684d; }
.info img { height: 32px; width: 32px; border: 0; display: block; float: left; }
.info p { font-weight: bold; margin: 0 0 0 10px; float: left; line-height: 32px; vertical-align: middle; }
.info .information p,
.info .success p { color: #fff; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3); }
.info .warning p ,
.info .error p { color: #222; text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.3); }
.info .close-info { position: absolute; background: #555; border-radius: 3px; border-bottom: 1px solid #333; height: 18px; width: 18px; text-align: center; top: 12px; right: 12px; color: #ddd; font-weight: bold; cursor: pointer; }
	
.clear { clear: both; }
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { *zoom: 1; }

header { width: 100%; background: #003e5b; margin-bottom: 25px; color: #fff; border-bottom: 1px solid #d0d1d5; }
header #header-content { max-width: 900px; margin: 0 auto; padding: 10px 0; }
header #header-content h1 { margin: 0; float: left; }
header #header-content #user { float: right; height: 33px; }
header #header-content #user span { margin-right: 20px; height: 33px; line-height: 33px; }
header #header-content #user a { display: inline-block; padding: 7px 10px; background: #00abbd; border-radius: 3px; border-bottom: 2px solid #00828e; transition: 0.1s; color: #eee; text-decoration: none; }
header #header-content #user a:hover { border-bottom: 0; margin-top: 2px; background: #00b3c4; }

section#info, nav, main, footer { margin: 0 auto; }

section#info { max-width: 900px; }

nav { max-width: 902px; }
nav menu { margin: 0; padding: 0; }
nav menu menuitem { display: inline-block; background: #f2f2f2; border-right: 1px solid #dfe0e4; border-top: 3px solid #00abbd; border-top-left-radius: 3px; border-top-right-radius: 3px; }
nav menu menuitem:first-child { border-left: 1px solid #dfe0e4; }
nav menu menuitem:hover,
nav menu menuitem.selected { border-top: 3px solid #e28f26; }
nav menu menuitem.selected { background: #fff; }
nav menu menuitem a { display: block; padding: 15px 20px; text-decoration: none; color: #222; font-size: 1.1em; font-weight: bold; }

main { max-width: 880px; padding: 10px; background: #fff; border-radius: 3px; border: 1px solid; border-color: #e5e6e9 #dfe0e4 #d0d1d5; }
.user-active main { border-top: 0; border-top-left-radius: 0; }

main .inline-dropdown { margin-bottom: 10px; }
main .inline-dropdown label { width: 60px; display: inline-block; }

main #page-login { text-align: center; padding-bottom: 25px; }
main #page-login h2 { color: #003e5b; }

main #page-reinvite input,
main #page-login input { margin-top: 15px; }
main #page-reinvite input { text-align: left; }

main #page-legacy iframe { border: 0; width: 100%; min-height: 686px; }
