/**
 * CSS reset
 *
 * source: http://meyerweb.com/eric/tools/css/reset/
 * mix v2.0 and v1.0
 */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, /*img,*/ ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0; padding: 0;
    border: 0; outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;	
    box-sizing: border-box;
}

img {
    margin: 0; padding: 0;
    border: 0; outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}

body {line-height: 1;}
ol, ul {list-style: none;}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after, q:before, q:after {content: ''; content: none;}

/* remember to define focus styles! */
:focus {outline: 0;}

/* remember to highlight inserts somehow! */
ins {text-decoration: none;}
del {text-decoration: line-through;}

/* tables still need 'cellspacing="0"' in the markup */
table {border-collapse: collapse; border-spacing: 0;}

/**
 * Site-specific styles
 */

body {
    font-size: 12px;
    font-family: "trebuchet ms", Helvetica, sans-serif;
    background-color: #fff;
    color: #383838;
    width: 100% !important;
    margin: 0;
}

table {width:100%; line-height: 16px;}
tr {vertical-align: middle;}
tr:nth-child(even) {background: #f0f0f0;}
tr:nth-child(odd) {background: #fff;}
td {padding: 4px;}

/**
 * Text styling
 * Based on source: http://winston.wolfslittlestore.be/
 */
h1, h2, h3, h4, h5, h6 {font-weight: normal; letter-spacing: -0.5px; color: #184366;}
h2, h3{border-bottom: dotted 1px #E1E1E1; padding-bottom: 2px; margin: 13px 0 10px;}
h1 span, h2 span, h3 span, h4 span {font-weight: bold;}

p {text-align:justify; margin: 4px 0; line-height: 18px;}
p a, li a {color: #F16C00;}
a {text-decoration: none; color: #F16C00;}
a:hover {text-decoration: none;}

em {font-weight: bold; font-style: normal;}
li {line-height: 16px; margin: 4px 0 6px;}
dt {font-weight: bold; margin: 6px 0;}
dd {margin: 12px 40px;}
dd ul {list-style: inside; padding-left: 0; margin: 0;}

/* image styling */
.image-left {float: left; padding: 0 15px 5px 0;}
.image-right{float: right; padding: 0 0 5px 15px;}
.image-center {display: block; margin: 0 auto;}
.image-header-offset {margin-top: 50px;}

.floatTL, .floatTR{background: #fff; position: relative; margin-bottom: 1.5em; margin-top: 0.5em; z-index: 10;}
.floatTL{float: left; margin-right: 1.5em;}
.floatTR{float: right; margin-left: 1.5em;}

/* FK logo en tekst in header */
#header-wrapper {background: #184366; width: 100%;}

#header {
    margin: 0 auto;
    width: 100%;
    height: 75px;
    position: relative;
    max-width:1000px;
}

#header h1{
    font-size: 30px; 
    font-weight: bold;
    position: absolute;
    height: 80px; bottom: -20px;
    background: url('http://cdn.fkgent.be/img/fk-logo.jpg') no-repeat left;
}

#header h1 a{display: block; text-decoration: none; color: #fff; padding: 20px 0 25px 95px;}

#menu{position: absolute; left: 43em; bottom: -6px;}
#menu ul{list-style: none;}
#menu li{float: left;}

#menu li a{
    margin-left: 0.5em;
    display: block;
    padding: 1.1em 1.4em 1.0em 1.4em;
    background: #fff url('http://cdn.fkgent.be/img/n4.gif') repeat-x;
    border: solid 1px #fff;
    color: #616161;
    font-weight: bold;
    font-size: 0.9em;
    text-decoration: none;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;	
    box-sizing: border-box;
}

#menu li a.active{
    background: #FF790B url('http://cdn.fkgent.be/img/n3.gif') repeat-x;
    color: #fff;
    border: solid 1px #DB7623;
}

#menu li a:hover{
    background: #CA2F2F url('http://cdn.fkgent.be/img/n3-active.gif') repeat-x;
    color: #fff;
    border: solid 1px #CA2F2F;
}

.sidebarmenu {background: #333; margin: 0; padding: 0; width: 100%; line-height: 1.8;}
.sidebarmenu li {margin: 0; padding: 0; list-style: none;}
.sidebarmenu a:hover {background: #184366; color: #fff; border:1px solid #184366;}
.sidebarmenu a {
  border:1px solid #dcdcdc;
  background:#e6e6e6 url(css/smoothness/images/ui-bg_glass_75_e6e6e6_1x400.png) 50% 50% repeat-x;
  font-weight:normal;
  color:#555; display: block;
  margin: 0; padding: 8px 12px;
  text-decoration: none;
}

#main-wrapper {
    background: url('http://cdn.fkgent.be/img/main-wrapper.gif') repeat-x top;
    min-height: 65px;
}

#main {
    margin: 0 auto; padding: 50px 0;
    width: 100%; max-width: 960px;
    position: relative;
    color: #585858;
}

#main h2,h3,h4{border-bottom: dotted 1px #184366; position: relative; top: 7px;}
#main h2,h3{font-size: 2.2em; padding-bottom: 0.1em; margin-bottom: 0.8em;}
#main h4{font-size: 1.6em; padding-bottom: 0.175em; margin-bottom: 1.4em; margin-top: 0.95em;}

#footer {width: 100%; border-top: solid 2px #184366; background: #fff url('http://cdn.fkgent.be/img/main-wrapper.gif') repeat-x; margin: 10px auto 0; padding: 15px 0 20px;}
#footer p {text-align: center; margin: 0;}

/* grid */
.cols { display: block; }
.cols:after {content: " "; display: block; height: 0; clear: both; overflow: hidden; visibility: hidden;}
.cols .spacingLeft { margin-left: 24px; }
.cols .spacingLeftHalf { margin-left: 12px; }
.cols .spacingRight { margin-right: 24px; }
.cols .spacingRightHalf { margin-right: 12px; }
.cols .spacingBothHalf { margin-right: 12px; margin-left: 12px; }

.col { width: 100%; max-width: 72px; margin-right: 24px; float: left; }
/*.col-2 { width: 100%; max-width: 168px; }*/
.col-3 { width: 100%; max-width: 210px; }
/*.col-4 { width: 100%; max-width: 360px; }*/
/*.col-5 { width: 100%; max-width: 456px; }*/
/*.col-6 { width: 100%; max-width: 552px; }*/
.col-7 { width: 100%; max-width: 692px; }
/*.col-8 { width: 100%; max-width: 744px; }*/
/*.col-9 { width: 100%; max-width: 840px; }*/
.col-10 { width: 100%; max-width: 936px; }
.col-last { margin-right: 0 !important; float: right;}

/* tabbladen */
#tabs{border: 1px solid #aaa; margin-bottom: 1.7em; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;}
#tabs .loading, #tabs .tab-content{height: 175px;overflow: auto;}
#tabs .loading img{margin: 66px auto; display: block;} /* margin berekend uit hoogte loading - hoogte spinner*/

/* activiteiten */
.activiteitinfo, #activiteit a, #activiteitfrontpage a{margin: 0; font-size: 1em; line-height: 1.8em; text-align: justify;}
.activiteitinfo span {float: right; padding-right: 5px;}

#activiteit, #activiteitfrontpage{
    display: inline-block; background: #F8F8F8;
    margin-right: 9px; margin-bottom: 9px; border: solid 1px #888888;
    -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px;
    -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}

#activiteit{width: 300px;}
#activiteitfrontpage{width: 48.5%;}
#activiteit:hover, #activiteitfrontpage:hover {background: #F0F0F0;}
#activiteit a, #activiteitfrontpage a {color: #585858; text-decoration: none;}
#activiteit img, #activiteitfrontpage img {padding: 5px 15px 5px 5px; float: left; border: none; z-index: 10;}

#main .clear{clear: both;}

/* comments */
dl.comment {display: inline-block; padding: 12px 0 0;}
.comment dt{clear: left; margin-bottom: 10px; width: 170px; font-weight: 700;}
.comment dd{text-align: justify; max-width: 485px; margin: 0;}
.comment dt, .comment dd{float: left;}
.comment .functie{color:#184366;}

#main #comments{border: 1px solid #aaa; overflow: auto; margin-bottom: 20px;}
#comment{padding: 10px; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px;}
#comment.even, #comment.fkeven{background-color: #fff796; background-repeat:no-repeat;}
#comment.fk{background-color: #fff;	background-repeat:no-repeat;}
#comment.fk, #comment.fkeven{background-image:url('http://cdn.fkgent.be/img/fk.png')}

/* schilden van kringen */
.kring {width: 20%; padding: 16px 20px 0 0; float: left; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;}
.kring p {text-align: center; margin: 6px 0 0 0; color: #000;}
.kring a:hover p { text-decoration: underline; }
.kring a{color: #585858; text-decoration: none}

/* kalender */
.schildjes{display: table-cell; vertical-align: top; height: 100%;}
.kalender{width: 100%; border-collapse:collapse; empty-cells:show;}
.kalender th a{color: #fff;}
.kalender td{border-color: gray; padding-left: 3px; padding-top: 3px; vertical-align: top; width: 95px; height: 120px;}
.kalender img{border: 5px; padding: 2px;}

/* td.vakje bewust overqualified */
td.vakje{
    padding-bottom: 30px;
    border: 1px dashed #A2A2A2; 
    background-color: #fff;
    background-repeat: no-repeat;
    background-position: right bottom;/* 50% 85%; */
}

/* td.today bewust overqualified */
td.today{ border: 5px solid #ff6; }

#kalender_afb {border: 0;}

#kalender-content{width: 100%; height: auto;}
#maandkalender{position: relative;}

#toolbar {padding: 10px 4px; width: 100%; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;}
#toolbar-container{overflow: auto; display: block; margin: 0 auto;}
#type-kiezer, #kring-kiezer{width: 100%; height: 200px; display: none;}

/* columns */
.double-column, .three-column, .four-column {-moz-column-gap: 5px; -webkit-column-gap: 5px; -ms-column-gap: 5px; column-gap: 5px;}
.double-column{-moz-column-count: 2; -webkit-column-count: 2; -ms-column-count: 2; column-count: 2;}
.three-column{-moz-column-count: 3; -webkit-column-count: 3; -ms-column-count: 3; column-count: 3;}
.four-column{-moz-column-count: 4; -webkit-column-count: 4; -ms-column-count: 4; column-count: 4;}

/* tooltips */
#tooltip{position:absolute; border:1px solid #333; background:#f7f5d1; padding:2px 5px; color:#333; display:none;}	
a.tooltip, a.tooltip:hover {text-decoration: none; font-weight: bold; color: #383838;}

/* timepicker */
.ui-timepicker-div .ui-widget-header{ margin-bottom: 8px; }
.ui-timepicker-div dl{ text-align: left; }
.ui-timepicker-div dl dt{ height: 25px; }
.ui-timepicker-div dl dd{ margin: -25px 0 10px 65px; }
.ui-timepicker-div td{ font-size: 90%; }

/* sponsors */
.sponsor {width: 210px; margin-bottom: 10px;}
.sponsor:hover {cursor: pointer;}

/* forms */
textarea {line-height: 18px; padding: 1px; max-width: 100%;}
dl.form {padding: 12px 0 0; display: inline-block;}
.dl.form:after {content: " "; display: block; height: 0; clear: both; overflow: hidden; visibility: hidden;}
.dl.form{display: block;}
.form dt, .form dd{float: left;}
.form dt {clear: left; width: 120px; font-weight: 700; margin-right: 5px; margin-bottom: 10px;}
.form dd {margin: 0 0 15px 0; max-width: 100%;}
.form-success {color: #008A0D; background: #CFC; padding: 12px; border: 1px solid #008A0D; margin: 0 0 12px;}
.error {color: #E2001A; padding: 5px 0 10px 0; position: relative;}

/* Responsive objecten embedden */
.embed-container {
    position: relative;
    padding-bottom: 56.25%; /* 16/9 ratio */
    padding-top: 30px; /* IE6 workaround*/
    width: 100%; height: 0; overflow: hidden;    
}

.embed-container iframe, .embed-container object, .embed-container embed {
    position: absolute; top: 0; left: 0;
    width: 100%; height: 100%; border-style: none;
}