@import url(//fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800&swap=true);
@import url(//fonts.googleapis.com/css?family=Roboto+Slab:400,300,700&swap=true);

html, body {
    font-family: "Open Sans", Helvetica, Arial, sans-serif;
    font-size: 15px;
    background: #f0f0f0 url(../images/bg-header.png) repeat-x;
}

/* To get the footer stick to the bottom of the page, even for small pages */
body > .container {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
}

main {
    flex: 1;
}

*:focus, *.click {
    outline: none;
}

a { text-decoration: underline; }
nav a, nav a:hover, .nav a, .nav a:hover, a.btn, footer a, a.more, h1 a, h2 a, h3 a, .table-hover a { text-decoration: none; }

.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:focus,
.navbar-default .navbar-nav > .active > a:hover {
    background-color: #c8c8c8;
}

header { background: #fff; margin: 0 -15px 0; position: relative; }
.navbar-brand { height: 150px; }
.navbar { border-radius: 0; }
.navbar-default { min-height: 30px; margin: 0 -15px; border: none; }
.navbar-right { margin-right: 0; }
.navbar-collapse { padding: 0; }
.navbar-sites { position: absolute; bottom: 0; right: 130px; min-height: 30px; border-right: 2px solid #ffa628; }
.navbar-sites .navbar-nav > li { float: none; text-align: right; }
.navbar-sites .navbar-nav > li > a { padding: 0 10px 5px; color: #333; background: transparent; text-transform: uppercase; }
.navbar-sites .navbar-nav > li:last-child > a { padding-bottom: 0; }
.navbar-sites .navbar-nav > li > a:hover { color: #e06500; }
.navbar-sites .navbar-nav > li > a.active { color: #e06500; }
.navbar-default { background-color: #f0f0f0; }
.navbar-default .navbar-nav { width: 100%; margin: 0; }
.navbar-default .navbar-nav > li > a { font-size: 14px; padding: 7px 14px 5px; color: #333; border-bottom: 2px solid transparent; }
.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus { color: #e06500; }
.navbar-default .navbar-nav > li.dropdown.open > a { background-color: #525252; color: #fff; }
.navbar-default .navbar-nav > li.active { border-bottom: 2px solid #ffa628; font-weight: bold; }

.navbar-name {  float: left; padding: 15px;  font-size: 18px;  line-height: 20px; }
@media(min-width: 767px) {
    .navbar-name { display: none; }
}

@media(max-width: 991px) {
    .navbar-default .navbar-nav > li > a { padding: 5px 7px 3px; }
}

.navbar-account { position: absolute; bottom: 0; right: 0; margin-bottom: 15px; }
.navbar-account .navbar-nav { width: 120px; }
.navbar-account .navbar-nav > li  { float: none; }
.navbar-account .navbar-nav > li a { font-weight: bold; background-color: #fff; float: none; text-align: right; padding: 0 10px 5px;}
.navbar-account .navbar-nav > li a:hover { color: #e06500; }

footer { background: #555; padding: 15px; color: #fff; font-size: 14px; margin: 0 -15px; }
footer a { color: #ffa628; }
footer a:hover { color: #e06500; text-decoration: none; }

.banner { margin: 20px 0; text-align: center; }

h2.en { font-size: 20px; margin: 0 0 0.5em; color: #555; }

.cdna, .more, .cdna:hover, .more:hover, .cdna a, .more a, .cdna:hover a, .more:hover a { color: #e06500; }

.button-bar.right, .btn-group.right, .pagination.right, .btn.right { float: right; }

p.bg-danger, p.bg-success { padding: 15px; }

.alert { margin: 30px 0 20px; }

h1,h2,h3,h4, .navbar-name { font-family: "Roboto Slab", "Open Sans", sans-serif, Helvetica; }
h4 { margin-top: 30px; }
a, a:hover { color: #333; }

.table-hover > tbody > tr.nohover:hover { background-color: transparent; }

.alerts h4 { font-family: "Open Sans", sans-serif; }
.alerts td { font-size: 14px; line-height: 1em; }
.alerts table > tbody > tr > td { border: none; padding: 3px; }
.alerts .flag { padding-bottom: 3px; }

.content { color: #444; line-height: 1.6em; font-family: "Roboto Slab", serif; font-weight: 300; padding-bottom: 20px; clear: both; }

.badge { background-color: #e06500; text-decoration: none; }
.badge:hover { text-decoration: none; }

.pagination > li > a { color: #ffa628; }
.pagination > li > a:hover { color: #e06500; }
.btn-primary { color: #fff; background-color: #ffa628; border-color: #ffa628; }
.btn-primary:hover, .btn-primary.active, .btn-primary:active, .btn.primary.active:hover, .btn-primary:focus, .btn-primary.focus { background-color: #e06500; border-color: #e06500; }
.btn-primary.disabled, .btn-primary[disabled], .btn-primary.disabled:hover, .btn-primary[disabled]:hover { background-color: #ffb24d; border-color: #ffb24d; }
.btn-primary.disabled:hover, .btn-primary.disabled:focus { background-color: #ffb24d; border-color: #ffb24d; }

.btn-primary.active.focus, .btn-primary.active:focus, .btn-primary.active:hover, .btn-primary.focus:active, .btn-primary:active:focus, .btn-primary:active:hover, .open > .dropdown-toggle.btn-primary.focus, .open > .dropdown-toggle.btn-primary:focus, .open > .dropdown-toggle.btn-primary:hover { background-color: #e06500; border-color: #e06500;}

.grey, .grey10, .grey01 { background: #fff; }

.order { font-size: larger; font-weight: bold; text-transform: uppercase; }

.tab-content { margin-top: 10px; }

.dropdown-menu.typeahead { max-height: 300px; overflow-y: scroll; }
.dropdown-menu.typeahead a { text-decoration: none; }

.jqstooltip {
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
}

.species-list h1 { margin: 18px 0 0; font-size: 18px; text-transform: uppercase; color: #555; }
.species-list h2 { margin: 0; font-size: 20px; }
.species-list > tbody > tr > td { vertical-align: middle; }
.species-list label { font-weight: normal; margin: 0; cursor: pointer; }

.flagstrap a, .flagstrap a:hover { text-decoration: none; cursor: pointer; }

.datepicker.form-control, .form-control.datepicker { padding: 6px 12px; width: 110px; }
.datepicker .day { cursor: pointer; }
.datepicker .day:hover { background-color: #f0f0f0; }
.datepicker .old.day, .datepicker .new.day { color: #808080; }

.leaderboard { width: 728px; height: 90px; margin: 20px auto; }
.leaderboard:empty { height: 0; margin: 0; }
.leaderboard img { width: 100%; height: 100%; }

#cookie-banner { position: fixed; bottom: 0; left: 0; right: 0; background-color: #525252; color: #fff; padding: 15px; font-size: 12px; margin: 0 auto; z-index: 1000; width: 100%; display: none; }
#cookie-banner.show { display: block !important; }
@media (min-width: 1200px) {
    .grey10 { background: #fff url(../images/grey-10.png) repeat-y; }
    .grey01 { background: #fff url(../images/grey-01.png) repeat-y; }
    #cookie-banner { width: 1170px; }
}
@media (min-width: 992px) and (max-width: 1199px) {
    .grey10 { background-image: url(../images/grey-10-970.png); }
    .grey01 { background-image: url(../images/grey-01-970.png); }
    #cookie-banner { width: 970px; }
    .leaderboard { width: auto; height: 60px; }
}
@media (min-width: 768px) and (max-width: 991px) {
    .grey10 { background-image: none; }
    .grey01 { background-image: none; }
    #cookie-banner { width: 750px; }
}
@media (max-width: 767px) {
    .leaderboard { width: 100%; height: auto; }
}

.btn-cookie { float: right; margin: 0 0 20px 20px; }

.ekko-lightbox-nav-overlay a:focus { outline: none; }

.form-control.coordinates { width: 100px; }

.btn-blue { color: #fff; background-color: #0099cc; border: none; }
.btn-blue:hover { color: #fff; background-color: #006699; border: none; }

#feedback { cursor: pointer; transform: rotate(270deg); color: #fff; background-color: #525252; padding: 5px 15px; position: fixed; right: -40px; height: 30px; bottom: 300px; border-radius: 5px 5px 0 0; z-index: 20; }
#feedback:hover { color: #ffa628; }

footer .social { text-align: right; font-size: 30px; }
.social { font-size: 40px; }
.social a { color: #ffa628; }
.social a:hover { color: #e06500; }

#related > tbody > tr.active > td { font-weight: bold; }
#related a { text-decoration: none; }

.help-block { line-height: 1em; }

/* Flex box for xs devices swaps left hand navigation and right hand main content so you don't have to scroll through a lot of navigational content */
.order-sm-1 { order: 0; }
.order-sm-2 { order: 0; }

@media (max-width: 991px) {
    .flex { display: flex; flex-direction: column; }
    .order-sm-1 { order: 1; }
    .order-sm-2 { order: 2; }
}

#searchbutton { float: right; cursor: pointer; }

.shop-table tr.noborder td { border: none;}
.shop-table .alert { margin: 0; }

.box { border-radius: 10px; background-color: #f4f4f4; padding: 15px; }

.form-group.has-error label { color: #e80000; }
.has-error .form-control, .has-error .form-control:focus { border-color: #e80000; }

.alert-sm { padding: 5px 10px; font-size: small; }

.strike { text-decoration:  line-through; }

.red { color: #e80000; }
.green { color: #00b000; }

.terugblik p:first-child, .twitchverhalen p:first-child {
    background-color: #ffa62849;
    color: #333;
    padding: 0.7rem 1rem;
    border-radius: 0.75rem;
    margin-bottom: 1.5rem;
    line-height: 1.4;
}

.terugblik h3 {
    color: #fff;
    background-color: #ffa628;
    letter-spacing: 1px;
    margin: 2rem 0 0.5rem;
    padding: 0.5rem;
    border-radius: 10px 10px 0 0;
}

.terugblik h4, .twitchverhalen h4 {
    color: #444;
    margin: 1.4rem 0 0.2rem;
    font-weight: bold;
}

.terugblik h3 + h4, .twitchverhalen h3 + h4 {
    margin-top: 1rem;
}

.terugblik a, .twitchverhalen a {
    color: #e06500;
}

.terugblik a:hover, .twitchverhalen a:hover {
    text-decoration: underline;
}

/* See https://www.h3xed.com/web-development/how-to-make-a-responsive-100-width-youtube-iframe-embed */
.ytcontainer {
    position: relative;
    width: 100%;
    height: 0;
    /* For fixed aspect ratio 16:9 */
    padding-bottom: 56.25%;
}
.ytcontainer > .yt {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.topic-counter { float: right; }
.topic-reply div { margin: 15px 0; }
.row .topic-reply-text { position: relative; }
.row .topic-reply-text a { text-decoration: none; }
.row .topic-reply-text .text { overflow: auto; width: 100%; }
.row .topic-reply-text .text a { text-decoration: underline; color: #e06500; }
.row .topic-reply-text:hover .reply-buttons { display: block; }
.row .topic-reply-text .reply-buttons { display: none; position: absolute; bottom: 15px; right: 15px; }