/*

     default layout from Obibase - an accessible responsive webtemplate by Obiwebs
     by Koen Van Nuffelen & Kris D'Aes

     this stylesheet should only contain responsive structural layout and positionning,
     no other text or element formatting

     we like responsive code, we go mobile first
     if it's not responsive, it's not a website

*/

/* ========= START REDUCED MOBILE HOMEPAGE ========= */

/* mmenu - condition in TS template head and body */

a.mobile-mmenu {
    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAZCAYAAADE6YVjAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAADhJREFUeNpi/P//PwOtARMDHQBdLGFBYtMq3BiHT3DRPU4YR4NrNAmPJuHRJDyahEeT8Ii3BCDAAF0WBj5Er5idAAAAAElFTkSuQmCC") no-repeat scroll center center transparent;
    display: inline-block;
    height: 40px;
    width: 40px;
    position: absolute;
    top: 0;
    left: 0;
}

body.mobile .navbar_zone #navbar a.mobile-mmenu+#search {display: inline-block; margin-left: 40px; line-height: 30px; margin-top: 2px;}

body.mobile div.mm-page #toolbar  {display: inline;}           /* new mobile */
body.mobile div.mm-page div#social  {display: inline-block;}

#mmenu:not( .mm-menu ) {          /* prevent Flash Of Unstyled Content (F.O.U.C.) at mmenu */
      display: none;
}

/* ========= END REDUCED MOBILE HOMEPAGE ========= */

/* ========= START RESPONSIVE IMAGES ========= */

picture img, picture, picture source {                           /* doesn't work in Safari: image disappears */
width: 100%; max-width: 100%;
}

@media screen and (-webkit-min-device-pixel-ratio:0) {    /* Safari only: show images again */
  picture img {
  width: auto;
  }
}

/* ========= END RESPONSIVE IMAGES ========= */

/* ========= START HEADER ZONE ========= */

.header_zone #logo_screen {text-indent: +9999px; overflow: hidden; margin: 0 auto; }
.header_zone #logo_screen a { width:100%; height:100%; display:block; }
.header_zone .header_title {font-size: 2.5em; text-align: center;}
.header_zone .header_baseline {font-size: 1.2em; margin-bottom: 20px; text-align: center;}
.header_zone #header_content { margin-bottom: 20px; }

@media (min-width: 640px) {
.header_zone #logo_screen {float: left; margin: 10px 20px 0 0;}
.header_zone .header_title {text-align: left; font-size: 4em;}
.header_zone .header_baseline {text-align: left; font-size: 1.5em;}
}

/* ========= END HEADER ZONE ========= */

/* ========= START PANES ========= */

.header_zone #leftpane,
.header_zone #rightpane {display: none;}

@media (min-width: 1480px) {
.header_zone #leftpane {display: block; position: absolute; top: 200px; width: 120px; left: -130px; height: 140px; }
.header_zone #rightpane {display: block; position: absolute; top: 200px; width: 120px; right: -130px; height: 140px; }
}

/* ========= END PANES ========= */

/* ========= START NAVBAR ========= */

/* start snippet bootstrap */

  .navbar-fixed-top,
  .navbar-fixed-bottom {
    position: static;
  }
  .navbar-fixed-top {
    margin-bottom: 20px;
  }
  .navbar-fixed-bottom {
    margin-top: 20px;
  }
  .navbar-fixed-top .navbar-inner,
  .navbar-fixed-bottom .navbar-inner {
    padding: 5px;
  }
  .navbar .container {
    width: auto;
    padding: 0;
  }
  .navbar .brand {
    padding-right: 10px;
    padding-left: 10px;
    margin: 0 0 0 -5px;
  }
  .nav-collapse {
    clear: both;
  }
  .nav-collapse .nav {
    float: none;
    margin: 0 0 10px;
  }
  .nav-collapse .nav > li {
    float: none;
  }
  .nav-collapse .nav > li > a {
    margin-bottom: 2px;
  }
  .nav-collapse .nav > .divider-vertical {
    display: none;
  }
  .nav-collapse .nav .nav-header {
    color: #777777;
    text-shadow: none;
  }
  .nav-collapse .nav > li > a,
  .nav-collapse .dropdown-menu a {
    padding: 9px 15px;
    font-weight: bold;
    color: #777777;
    -webkit-border-radius: 3px;
       -moz-border-radius: 3px;
            border-radius: 3px;
  }
  .nav-collapse .btn {
    padding: 4px 10px 4px;
    font-weight: normal;
    -webkit-border-radius: 4px;
       -moz-border-radius: 4px;
            border-radius: 4px;
  }
  .nav-collapse .dropdown-menu li + li a {
    margin-bottom: 2px;
  }
  .nav-collapse .nav > li > a:hover,
  .nav-collapse .nav > li > a:focus,
  .nav-collapse .dropdown-menu a:hover,
  .nav-collapse .dropdown-menu a:focus {
    background-color: #f2f2f2;
  }
  .navbar-inverse .nav-collapse .nav > li > a,
  .navbar-inverse .nav-collapse .dropdown-menu a {
    color: #999999;
  }
  .navbar-inverse .nav-collapse .nav > li > a:hover,
  .navbar-inverse .nav-collapse .nav > li > a:focus,
  .navbar-inverse .nav-collapse .dropdown-menu a:hover,
  .navbar-inverse .nav-collapse .dropdown-menu a:focus {
    background-color: #111111;
  }
  .nav-collapse.in .btn-group {
    padding: 0;
    margin-top: 5px;
  }
  .nav-collapse .dropdown-menu {
    position: static;
    top: auto;
    left: auto;
    display: none;
    float: none;
    max-width: none;
    padding: 0;
    margin: 0 15px;
    background-color: transparent;
    border: none;
    -webkit-border-radius: 0;
       -moz-border-radius: 0;
            border-radius: 0;
    -webkit-box-shadow: none;
       -moz-box-shadow: none;
            box-shadow: none;
  }
  .nav-collapse .open > .dropdown-menu {
    display: block;
  }
  .nav-collapse .dropdown-menu:before,
  .nav-collapse .dropdown-menu:after {
    display: none;
  }
  .nav-collapse .dropdown-menu .divider {
    display: none;
  }
  .nav-collapse .nav > li > .dropdown-menu:before,
  .nav-collapse .nav > li > .dropdown-menu:after {
    display: none;
  }
  .nav-collapse .navbar-form,
  .nav-collapse .navbar-search {
    float: none;
    padding: 10px 15px;
    margin: 10px 0;
    border-top: 1px solid #f2f2f2;
    border-bottom: 1px solid #f2f2f2;
    -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.1);
       -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.1);
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.1);
  }
  .navbar-inverse .nav-collapse .navbar-form,
  .navbar-inverse .nav-collapse .navbar-search {
    border-top-color: #111111;
    border-bottom-color: #111111;
  }
  .navbar .nav-collapse .nav.pull-right {
    float: none;
    margin-left: 0;
  }
  .nav-collapse,
  .nav-collapse.collapse {
    height: 0;
    overflow: hidden;
  }

/* end snippet bootstrap */


.navbar_zone #navbar {clear: both; }

.navbar_zone #navbar #navbar_selected_page {
    padding: 20px 15px;
    font-weight: bold;
    line-height: 40px;
    }

.navbar_zone #navbar_clickable {cursor: pointer;}

.navbar_zone #navbar #navbar_extend_button {
    background-color: #EDEDED;
    background-image: linear-gradient(to bottom, #F2F2F2, #E5E5E5);
    background-repeat: repeat-x;
    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1) inset, 0 1px 0 rgba(255, 255, 255, 0.075);
    color: #FFFFFF;
    float: right;
    margin: 5px 12px 5px 5px;
    padding: 7px 10px;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); }

.navbar_zone #navbar .icon-bar   {background-color: #F5F5F5;
    border-radius: 1px 1px 1px 1px;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
    display: block;
    height: 2px;
    width: 18px;}

.navbar_zone #navbar #nav_top {display: inline-block;}
.navbar_zone #navbar #search {margin-left: 16px;  line-height: 40px; }
.navbar_zone #navbar #links {display: inline-block; line-height: 40px;}
.navbar_zone #navbar #search,
.navbar_zone #navbar .tx-felogin-pi1,
.navbar_zone #navbar #login {display: inline-block; /* line-height: 40px; */}
.navbar_zone #navbar #search i {position: relative; left: 8px; margin-top: 4px; } /*{ position: absolute; top: 14px; left: 8px;} */
.navbar_zone #navbar #search #search input { padding-left: 26px; width: auto;}
.navbar_zone #navbar #search .searchform { margin-bottom: 0; position: relative; }
.navbar_zone #navbar #search .searchfield {
    border-radius: 15px 15px 15px 15px;
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size: 0.813em;
    font-weight: normal;
    line-height: 1;
    margin: 0 0 0 -14px;
    padding: 4px 14px 2px 28px;
    background-color: #FFFFFF;
    transition: border 0.2s linear 0s, box-shadow 0.2s linear 0s;
    color: #555555;
    display: inline-block;
    height: 20px; vertical-align: middle;
    width: 80px; }

.navbar_zone #navbar div.dropdown{ display: inline-block;}


@media (min-width: 640px) {                                 /* same as BELOW */
.navbar_zone #navbar_clickable {display: none;}
.navbar_zone .nav-collapse.collapse { height: auto; overflow: visible; }
.nav-collapse.collapse {
    height: auto !important;           /* overwrite inline css collapse script */
    overflow: visible !important;
  }

}

/* ========= END NAVBAR ========= */

/* ========= START NAV_TOP========= */



#nav_top a
{
    font: bold 14px Arial, Helvetica, sans-serif;
    text-decoration: none;
    text-transform: uppercase;
    /* Make the link cover the entire list item-container */
    display: block;
    line-height: 30px;
}

#nav_top .lev1
{
    list-style: none;
    padding: 0;
    margin: 0;
}

#nav_top .lev1 > li
{
    /* width: 100%;  */
}

#nav_top .lev1 a.collapsed
{
    background-image: url(images/arrow_right.png);
    background-position: right;
    background-repeat: no-repeat;
    background-position: 95% 50%;
}

#nav_top .lev1 a.expanded
{
    background-image: url(images/arrow_down_white.png);
    background-position: right;
    background-repeat: no-repeat;
    background-position: 95% 50%;
}

#nav_top .lev2
{
    list-style: none;
    padding: 0;
    margin: 0;
}

#nav_top .lev2 a
{
    font-weight: normal;
    text-transform: none;
    margin-left: 14px;
}

#nav_top .lev3
{
    list-style: none;
    padding: 0;
    margin: 0;
}

#nav_top .lev3 a
{
    margin-left: 28px;
    font-size: 13px;
}

#nav_top .lev3 > li
{
    height: 30px;
}

@media screen and (min-width: 640px) {              /* same as ABOVE */

#nav_top a.toggle_menu {display: none;}

#nav_top ul {z-index: 1000;}

#nav_top li { }

#nav_top .lev1
{
    width: 100%;
    height: 40px;
    display:inline-block;
}

#nav_top .lev1 > li
{
    display: inline-block;
    height: 40px;

}

#nav_top .lev1 li:hover > ul
{
    /* On hover, display the next level's menu */
    display: inline;
}

#nav_top .lev1 a
{
    /* Make the link cover the entire list item-container */
    display: block;
    line-height: 40px;
    padding: 0 10px 0 10px;
}

#nav_top .lev1 a.parent
{
    background-image: url(images/arrow_down.png);
    background-position: right;
    background-repeat: no-repeat;
    background-position: 95% 50%;
    padding: 0 30px 0 10px;
}

#nav_top .lev1 li.parent {position: relative;}

#nav_top .lev2
{
    position: absolute;
    left: 0;
    top: 40px;
    width: 300px;
    list-style: none;
    padding: 0;
    margin: 0;
    display: none;
    background-color: #EEEEEE;
}

#nav_top .lev2 a
{
    margin-left: 0px;
}

#nav_top .lev2 a.parent
{
    background-image: url(images/arrow_right.png);
    background-position: right;
    background-repeat: no-repeat;
    background-position: 95% 50%;
}

#nav_top .lev2 > li
{
    position: relative;
    width: auto;
}

#nav_top .lev3
{
    position: absolute;
    top: 0;
    right: -150px;
    width: 150px;
    list-style: none;
    padding: 0;
    margin: 0;
    display: none;
}

#nav_top .lev3 > li
{
    height: 30px;
}


}

/* ========= END NAV_TOP ========= */


/* ========= START SEARCH ========= */

@media (min-width: 320px) {
.navbar_zone #navbar #search .searchfield { width: 140px; }
}

@media (min-width: 640px) {
.navbar_zone #navbar #search {margin-right: 16px; }
.navbar_zone #navbar #search #search input { width: 200px;}
}

/* ========= END SEARCH ========= */

/* ========= START TOOLBAR ========= */

.navbar_zone #toolbar #language {display: inline-block;}
.navbar_zone #toolbar #language a#drop_language {}

.navbar_zone #toolbar #language ul#langnav {
    list-style: none outside none;
    margin-bottom: 2px;
    margin-left: 0;   display: inline;
}

.navbar_zone #toolbar #language ul#langnav li {
    display: inline;
}

.navbar_zone #toolbar #language ul.dropdown-menu {
  background-color: #ffffff;
  float:none;
  margin: 0 16px 15px 16px;
  background-clip: padding-box;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 6px 6px 6px 6px;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  z-index: 1000; }
.navbar_zone #toolbar #language ul.dropdown-menu a {margin: 0; line-height: normal;}
.navbar_zone #toolbar #language ul.dropdown-menu .notavailable {padding: 3px 20px; display: block;line-height: normal;}
.navbar_zone #toolbar #language ul.dropdown-menu {line-height: normal;}

.navbar_zone #toolbar #links ul {list-style: none outside none; margin-left: 16px; display: inline;}
.navbar_zone #toolbar #links li {display: inline; line-height: 40px;}


.navbar_zone #toolbar .tx-felogin-pi1  {margin-left: -4px}

.navbar_zone #toolbar #login .dropdown-menu {
  background-color: #ffffff;
  float:none;
  margin: 0 16px 15px 16px;
  padding: 0;
  background-clip: padding-box;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 6px 6px 6px 6px;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  z-index: 1000; }

.navbar_zone #toolbar #login #loginallpages {margin: 0;}
.navbar_zone #toolbar #login input { margin: 5px;}
.navbar_zone #toolbar #login #loginregister { margin: 5px;}


.navbar_zone #toolbar #login .arrow, .header_zone #toolbar #login .arrow:after {
    border-color: transparent;
    border-style: solid;
    display: block;
    height: 0;
    position: absolute;
    width: 0;
}

.navbar_zone #toolbar #login .arrow {
    border-width: 11px;
    border-bottom-color: rgba(0, 0, 0, 0.25);
    border-top-width: 0;
    left: 30px; /* left: 50%; */
    margin-left: -11px;
    top: -11px;
}

.navbar_zone #toolbar #login .arrow:after {
    border-width: 10px;
    content: "";
    border-bottom-color: #F7F7F7;;
    border-top-width: 0;
    margin-left: -10px;
    top: 1px;
}

@media (min-width: 640px) {
.navbar_zone #toolbar {display: inline-block; }
}

div.navbar_zone div.container div#navbar div.nav-collapse.collapse div#toolbar div#social {display: none;}

/* ========= END TOOLBAR ========= */


/* ========= START CONTAINER ========= */

.container {margin: 0 auto; width: 90%; position: relative; clear: both; }
.container:before,
.container:after { display: table; line-height: 0; content: ""; }
.container:after { clear: both; }

@media (min-width: 768px) {
.container {width: 690px;}
}

@media (min-width: 896px) {
.container {width: 818px;}
}

@media (min-width: 1024px) {
.container {width: 960px;}
}

@media (min-width: 1300px) {
.container {width: 1170px;}
}

/* ========= END CONTAINER ========= */


/* ========= START MAIN & FLOATS ========= */

.main_zone #main_left { margin: 10px 0 10px 0; padding: 10px; }
.main_zone #main_left #nav_left {margin-bottom: 16px;}
.main_zone #themeswitch {cursor: pointer; position: fixed; top: 10px; left: 10px;}

.main_zone #main_center {margin: 10px 0 10px 0; padding: 10px;}
.main_zone #main_center #breadcrumb {}
.main_zone #main_center #pagetitle {float: left; }
.main_zone #main_center #pagetools_top {float: right; margin: 10px 0; padding: 8px 0 0 15px;}
.main_zone #main_center #main_content {clear: both;}
.main_zone #main_center p { line-height: 1.5em; margin-bottom: 20px; }
.main_zone #main_center #pagetools_bottom {clear: both;}

.main_zone #main_right { margin: 10px 0 10px 0; padding: 10px; }


@media (min-width: 768px) {
body.tv-to-1 .main_zone #main_left_float, body.tv-to-1 .main_zone #main_center_float, body.tv-to-1 .main_zone #main_right_float {float: left; overflow: hidden; }
body.tv-to-1 .main_zone #main_left_float {width: 250px; }
body.tv-to-1 .main_zone #main_center_float { width: 440px;}
body.tv-to-17 .main_zone #main_center_float,
body.tv-to-18 .main_zone #main_center_float { width: 690px;}

/* .main_zone #main_right_float {clear: both;}   */
}

@media (min-width: 896px) {
body.tv-to-1 .main_zone #main_left_float {width: 250px; }
body.tv-to-1 .main_zone #main_center_float { width: 318px;}
body.tv-to-1 .main_zone #main_right_float { width: 250px;}
body.tv-to-17 .main_zone #main_center_float,
body.tv-to-18 .main_zone #main_center_float { width: 818px;}
}

@media (min-width: 1024px) {
body.tv-to-1 .main_zone #main_left_float {width: 250px; }
body.tv-to-1 .main_zone #main_center_float { width: 460px;}
body.tv-to-1 .main_zone #main_right_float { width: 250px;}
body.tv-to-17 .main_zone #main_center_float,
body.tv-to-18 .main_zone #main_center_float { width: 960px;}
}

@media (min-width: 1300px) {
body.tv-to-1 .main_zone #main_left_float {width: 250px; }
body.tv-to-1 .main_zone #main_center_float { width: 670px;}
body.tv-to-1 .main_zone #main_right_float { width: 250px;}
body.tv-to-17 .main_zone #main_center_float,
body.tv-to-18 .main_zone #main_center_float { width: 1170px;}
}

/* ========= END MAIN & FLOATS ========= */

/* ========= START MEDIA ========= */

.main_zone #main_left #media { background-image: none; margin-bottom: 16px; background-position: left; background-repeat: no-repeat; border-radius: 6px 6px 6px 6px; background-color: #ffffff; height: 72px; text-indent: +9999px; overflow: hidden;}

@media (min-width: 320px) {
.main_zone #main_left #media { background-image: url(images/media_lowres.png); }
}

@media (min-width: 480px) {
.main_zone #main_left #media { background-image: url(images/media_smartphone.png); }
}

@media (min-width: 640px) {
.main_zone #main_left #media { background-image: url(images/media_highres.png); }
}

@media (min-width: 768px) {
.main_zone #main_left #media { background-image: url(images/media_tablet.png); }
}

@media (min-width: 1024px) {
.main_zone #main_left #media { background-image: url(images/media_tablet_landscape.png); }
}

@media (min-width: 1300px) {
.main_zone #main_left #media { background-image: url(images/media_screen.png); }
}

@media (min-width: 1480px) {
.main_zone #main_left #media { background-image: url(images/media_widescreen.png); }
}

/* ========= END MEDIA ========= */


/* ========= START BOTTOM & FOOTER ========= */

.bottom_zone { padding: 12px 0 12px 0; }
.footer_zone { padding: 12px 0 12px 0; }

@media (min-width: 768px) {
.footer_zone #footer_left { float: left; text-align: left; }
.footer_zone #footer_center { text-align: center; }
.footer_zone #footer_right { float: right; text-align: right; }
}

/* ========= END BOTTOM & FOOTER ========= */