/* GLOBAL STYLES
-------------------------------------------------- */
/* Padding below the footer and lighter body text */

body {
  padding-bottom: 40px;
  color: #7ba6c5;
  font-size: 14px;
  background-color: #1b2b36;
  background-image: linear-gradient(#376183, #385870, #314e63, #253c4b, #1b2b36);
  background-size: 100% 256px;
  background-position: top left;
  background-repeat: repeat-x;
}
.message {
    float:left;
    width: 100%;
	background-color: #cfc;
	border: 1px dashed #0f0;
	text-align: center;
	margin: 16px 0 8px 0;
	padding: 16px;
    clear: both;
}
code {
    color: #aaa;
    display: block;
    margin-bottom: 8px;
}
h4 { font-size: 1.2em; }

div.message a { text-decoration: none; }
.align-right { display:inline-block;width:100%;text-align:right;}

.error {
	background-color: #fcc;
	border: 1px dashed #f00;
}

.warning {
	background-color: #fec;
	border: 1px dashed #fa8;
}

#page
{
    max-width: 916px;
    margin:auto;
    padding:0;
}
.container { overflow: hidden; max-width: 916px; }
.p-lr-m { padding-left: 7px; padding-right: 7px; }
.p-lr { padding-left: 4px; padding-right: 4px; }

.logo {
    padding-top: 4px;
}
.kerstback {
    background-image: url(https://www.nederhits.nl/img/site/kerstdiv.png);
    background-size: 80%;
    background-repeat: no-repeat;
    background-position: 0% 60px;
    background-clip: border-box;
}

a { font-size: 12px; color: #fff; font-weight: bold; }
a:hover { color: #8cf; text-decoration: underline; }

a.setcat {
    display: inline-block;
    padding-right: 4px;
    color: #386574;
    font-size: 10px;
    font-weight:normal;
}
.catselected {
    color:#329ae6 !important;
    font-weight:bold !important;
    font-size: 11px;
}

.side-banners img { padding-bottom: 16px; }
.side-banners {  max-width: 250px; }

.block { background-color: #243b4c; margin: 0 -7px 15px -7px; padding: 0 8px 6px 8px; border-radius: 6px; }
.block h2 { padding-top: 6px; }
.block h3 { padding-top: 6px; }
.block-poll { background-color: #243b4c; border: 3px solid #27485f; padding-top: 16px; }
.block-top { margin-top: 16px; }

/*.block-poll .track-row { border-bottom: 1px solid #1e3648; }*/
#flexBanner { margin: 8px 0 24px 0; }
hr.hr-banner { border-color:#2e495c; }

.featured h3 { margin-top: 6px; }
.block-featured {
    background-color: #27485f;
    /* as it's used on .row in stead of .col, we need to fix margins */
    margin: 0 -7px 0 -7px;
    padding: 0;
}
.track-toggle td
{
    text-align: center;
}
.track-toggle td:after
{
    content: "- Alleen 5 tracks weergeven -";
}
.track-toggle.collapsed td:after
{
    content: "+ Meer tracks weergeven +";
}

.side-block { background-color: #243b4c; margin: -5px -7px 8px -7px; padding: 0 8px 8px 8px; border-radius: 6px; }
.side-block td:first-of-type { padding-left: 8px; padding-right: 8px; }
#recent-list { margin-left: 7px; margin-right: -8px; }

.clear { clear: both; }
.wrap-phone { float: none; }
.highlite-bg { background-color: #2e495c; }
.highlite-admin { background-color: #213942; }
.highlite-admin2 { background-color: #254d50; }
.highlite-admin3 { background-color: #245265; }
.highlite-disabled { background-color: #492a2a; }
.dimm, .dimm:hover { color: #b3b3b3; text-decoration: none; }
.caption { text-transform: uppercase; color: #fff; font-size: 11px; letter-spacing: 2px; color: #eee; }
.center { text-align: center; }
.space-right { margin-right: 6px;}
.space-left { margin-left: 6px;}
.underline { text-decoration: underline; }
.rounded { border-radius: 5px;}
.color-green { color: green !important; }
.color-blue { color: #4c9aff !important; }
.color-red { color: red !important; }
.color-grey { color: grey !important; }
.color-white { color: white !important; }
.color-yellow { color: yellow !important; }
.color-purple { color: purple !important; }

.right-container {
    width: 160px;
    float: right;
    margin-left: 24px;
}
.left-container {
    float: none;
    width: auto;
    overflow: hidden;
/*    padding-right: 20px;*/
}
h2 {
    font-size: 32px;
    font-weight: bold;
    color: #fff;
    margin-top: 0;
    margin-bottom: 24px;
}
h3, .table-header {
    font-size: 16px;
    font-weight: bold;
    color: #fff;
}
.table-header2 {
    font-size: 12px;
    font-weight: bold;
    color: #fff;
}

/*
    text color theme: d1ffff
    text color theme inactive: 447497 (misschien zelfde als divider doen of andersom)
    divider-color: 2b495f
    
*/

.zoeken {
    margin-bottom: 24px;
/*    border: 1px solid #ccc;
    border-radius: 4px;*/
    width: 100%;
}
.zoeken input[type=text] {
    padding: 2px 6px;
    margin:  0;
    display: inline-block;
    border: 1px solid #ccc;
    border-radius: 4px;
    width: 320px;
}
.zoeken input[type=submit] {
    display: inline-block;
    float:left;
    width: 100px;
    background-color: #36ab3a;
    color: white;
    padding: 10px 14px;
    margin: 8px 8px 12px 0;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size:12px;
	text-decoration: none;
}
.zoeken input[type=submit]:hover {
    background-color: #3d8a40;
    color: white;
	text-decoration: none;
}

/* Artiest pagina */
.artist-header { min-height: 120px; margin-top: 8px; margin-bottom: 8px; overflow: visible; /*background-color:green;*/ }
.artist-header .caption { display: inline-block; padding-top: 8px; }
.artist-image { width: 120px; height: 120px; border-radius: 10px; float:left; margin-right: 16px; margin-top: 0px; }
.newest-image { width: 80px; height: 80px; margin-right: 12px; float: left; }
.album-header-image { width: 120px; height: 120px; margin-right: 12px; float: left; border-radius: 5px; }
.popularity-graph { width: 200px; height: 80px; border: 1px solid #aaa; background-color: #1c2c38; margin-top: 2px;}
.popularity-w { width: 200px; }

/* alike column */
.alike-image { width: 44px; height: 44px; border-radius: 5px; float:left; margin-right: 12px; margin-top: 3px;}
.alike { height: 52px; padding: 2px; margin-top: 6px;  display: table; }
.alike a { font-size: 12px; color: #fff; font-weight: bold; }
.alike:hover { background-color: #2e495c; text-decoration: underline; color: #fff; }
.alike-name { display: table-cell; overflow: hidden; width: 140px; height: 48px; vertical-align: middle; }

/* alike/releases/artists page */
.play-image {
    display: inline-block;
    position: relative;
    }

.play-image:after {
    content:"";
    position: absolute;
    width:100%;
    height:100%;
    top:0;
    left:0;
    background-image: url(https://www.nederhits.nl/img/site/play-120.png);
    background-size: cover;
    background-repeat: no-repeat;
    opacity:0;
    -webkit-transition: all 0.5s ease; /* Safari and Chrome */
    -moz-transition: all 0.5s ease; /* Firefox */
    -ms-transition: all 0.5s ease; /* IE 9 */
    -o-transition: all 0.5s ease; /* Opera */
    transition: all 0.5s ease;
}

.play-image:hover:after {
    opacity:0.8;
}
.play-image:hover img {
    opacity:0.3;
}
.item-page { clear: both; margin-top: 16px; margin-bottom: 24px; height: auto; content: ""; display: table; }
.alike-item-image { width: 120px; height: 120px; position: relative; border-radius: 5px; opacity: 1.0;
    -webkit-transition: all 0.5s ease; /* Safari and Chrome */
    -moz-transition: all 0.5s ease; /* Firefox */
    -ms-transition: all 0.5s ease; /* IE 9 */
    -o-transition: all 0.5s ease; /* Opera */
    transition: all 0.5s ease;
}
.album-item-image { width: 150px; height: 150px; position: relative; border-radius: 5px; opacity: 1.0;
    -webkit-transition: all 0.5s ease; /* Safari and Chrome */
    -moz-transition: all 0.5s ease; /* Firefox */
    -ms-transition: all 0.5s ease; /* IE 9 */
    -o-transition: all 0.5s ease; /* Opera */
    transition: all 0.5s ease;
}
.main-cover { width: 180px; height: 180px; }
.alike-item { height: 180px; width: 120px; margin: 0 6px 4px 6px;  display: block; float: left;}
.alike-item a { font-size: 12px; color: #fff; font-weight: bold; }
.alike-item-name { overflow: hidden; width: 96px; display: inline-block; text-align: left; padding-top: 8px; padding-left: 2px; font-weight: normal; font-size: 11px;}
.album-item { height: 250px; width: 150px; margin: 0 8px 8px 8px;  display: block; float: left;}
.album-item a { font-size: 12px; color: #fff; font-weight: bold; }
.album-item-name { overflow: hidden; text-align: left; padding: 4px 0 2px 2px; font-size: 11px; color: #888; }
.album-item-name a { font-weight: normal;}
.alike-item-vote { overflow: hidden; width: 24px; display: inline-block; text-align: right; vertical-align: top; padding-top: 2px; }
.alike-item-vote a { color: #888; }
.alike-item-vote a:hover { color: #fff; }
.alike-item-date { width: 120px; display: block; text-align: center; }
.sub-artists { color: #888; }
.sub-artists a { color: #888; }
.sub-artists a:hover { color: #eee; }
.sub-artists-rl { color: #888; }
.sub-artists-rl a { color: #888; }
.sub-artists-rl a:hover { color: #eee; }
.album-artists { color: #888; font-size: 12px; display:block;}
.album-artists a { color: #888; font-size: 12px; }
.album-artists a:hover { color: #eee; }
.album-label { color: #888; font-size: 12px; display:block;}
.artist-newest { height: 80px; }
.album-header { height: 120px; margin-bottom: 8px; width: 100%;}
.newest-name a, .newest-name { font-size: 16px; display: block; padding-top: 8px; padding-bottom: 4px; color: #fff; font-weight: bold;}
.chart-image { width: 38px; height: 38px; }
.rate-image { width: 30px; height: 10px; padding-bottom: 3px; padding-left: 4px;}

.artist-info { margin-bottom: 16px; padding-top: 8px; overflow:hidden; }
.bio-image { width: 200px; float: left; margin: 4px 16px 8px 0; border-radius: 6px; }
.bio-links { padding-bottom: 16px; }

.single-name a, .single-name { font-size: 16px; display: block; padding-top: 0px; padding-bottom: 2px; color: #fff; font-weight: bold;}
.single-item .dimm { font-size: 0.8em; display: block; }
.single-item .album-header { height: 100%; }
.item-data { display: block; margin-left: 132px; }
.single-item { margin-bottom: 48px; width: 100%; clear: left; }
.single-tracks { width: 100%; }
table.single-tracks { width: 100%; color: #d1ffff; vertical-align: middle; font-size: 12px; margin-top: 12px; }


.tracks, .tracks-index { width: 100%; color: #d1ffff; vertical-align: middle; font-size: 12px; margin-top: 16px; margin-bottom: 48px;}
.tracks-index { margin:0 0 8px 0; }
.tracks td { padding-right: 4px; }
.track-row { height: 32px; border-bottom: 1px solid #2b495f; }
.no-border { border: none; }
/*.track-row:hover { background-color: #2e495c; }*/
.track-col-cover { width: 38px; }
.track-col-nr { width: 30px; text-align: center; color: #888; }
.track-hd-nr { width: 30px; text-align: center; }

.track-hd-wk,.track-hd-wk-small { width: 30px; text-align: right;  }
.track-hd-wk span,.track-hd-wk-small span { display: block; line-height: 16px; padding-right:4px; /*border-right: 1px solid #2b495f;*/ }
.track-hd-wk-small { width: 18px;}
.track-hd-wk.disabled { opacity: 0.5 !important; }
.track-col-play { width: 30px; text-align: center; color: #888;}
.track-col-play.disabled { opacity: 0.5 !important; }
.track-col-play a { color: #888; }
.track-col-play a:hover { color: #fff; }
.track-col-name { color: #fff; }
.track-col-name.disabled { opacity: 0.5 !important; }
.track-col-name a.track-title,
.track-col-name a.track-title:visited,
.track-col-name a.track-title:active {
	color: #fff !important;
	font-weight: normal !important;
	text-decoration: none !important;
	opacity: .85;
}
.track-col-name a.track-title:hover {
	color: #fff !important;
	text-decoration: underline !important;
	opacity: .85;
}
.label-txt { color: #666; font-size: 11px; line-height: 11px; }
.track-col-label { color: #888; text-align: right; }
.track-col-date { color: #888; text-align: right; width: 62px;}
.track-col-date.disabled { opacity: 0.5 !important; }
table.tracks td.track-col-name .sub-artists-rl a { color: #888; }
.track-col-artist { color: #eee; padding-left:16px; }
.track-col-artist a { color: #fff; }
.track-col-links { width: 69px; text-align: right; }
.track-col-links a { display: inline; }
.track-col-time { width: 32px; text-align: right; }
.track-col-time.disabled { opacity: 0.5 !important; }
.track-col-rate { width: 32px; text-align: center; }
.track-col-rate.disabled { opacity: 0.5 !important; }
.track-col-rank { width: 32px; text-align: center; }
.track-col-rank a { color: #888; }
.track-col-rank a:hover { color: #fff; }
.track-col-rank.disabled { opacity: 0.5 !important; }
.track-col-rating { color: #888; text-align: right; }
.track-icon { width: 32px; display: inline; padding: 2px 0 2px 7px; opacity: 0.6; }
.track-icon:hover { opacity: 1; }
.track-icon.disabled { opacity: 0.3; pointer-events: none; }
.track-icon.disabled:hover { opacity: 0.3 !important; }

.sub-menu { clear: both; color: #fff; text-transform: uppercase; letter-spacing: 1px; border-bottom: 1px solid #2b495f; margin-bottom: 16px; }
.sub-menu span { color: #fff; margin-right: 24px; font-weight: normal; border-bottom: 2px solid #6af;}
.sub-menu a { color: #aaa; padding-right: 24px; font-weight: normal; }
.sub-menu a:hover { color: #fff;}
.sub-menu-artists span { margin-right: 16px; }
.sub-menu-artists a { padding-right: 16px; }

.rank-icon { background-color: #27485f; border-radius: 50%; width: 24px; height: 24px; padding-top: 3px; font-weight: bold;}
.rank-up { background-color: #080; }
.rank-up-stip { border: 2px solid #0b0; padding-top:1px; }
.rank-down, .rank-down-stip { background-color: #c00; }
/*.rank-down-stip { border: 2px solid #f00; padding-top:1px; }*/
.rank-new { background-color: #00f; }
.rank-new-stip { border: 2px solid #06f; padding-top:1px; }

.featured-track {
    display:inline-block;
    line-height:16px;
    width:16px;
    height:16px;
    vertical-align:middle;
    margin-left:4px;
    background-image:url(https://www.nederhits.nl/img/site/stars.png)!important;
    background-color:transparent!important;
    background-repeat:repeat-x!important;
    background-position: left center;
}

.page-header
{
    padding: 15px 0;
}

/* CUSTOMIZE THE NAVBAR
-------------------------------------------------- */

.navbar
{
    background-color: #375b73;
    background-image: linear-gradient(#356d93, #375b73, #375b73);
    margin-bottom: 16px;
    padding: 4px 8px;
    font-size: 14px;
}
.navbar .dropdown-item {
    font-weight: normal;
    font-size: 14px;
}
.navbar .dropdown-item:hover {
    background-color: #a6cce5;
}
.navbar a {
    font-size: 14px;
}

.form-control { font-size: 14px; }

.form-control::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: #aaa;
  opacity: 1;
  font-size: 0.9em;
}
.form-control::::-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: #aaa;
}

.form-control::-ms-input-placeholder { /* Microsoft Edge */
    color: #aaa;
}
.btn-outline-secondary:hover { color: #222 !important; }
.form-search-group {
    height: 24px; font-size: 14px;
}

div.social-buttons {
    margin: 4px 8px 4px 0;
}

.image img {
    -webkit-transition: all 0.8s ease; /* Safari and Chrome */
    -moz-transition: all 0.8s ease; /* Firefox */
    -ms-transition: all 0.8s ease; /* IE 9 */
    -o-transition: all 0.8s ease; /* Opera */
    transition: all 0.8s ease;
}

.image:hover img {
    -webkit-transform:scale(1.25); /* Safari and Chrome */
    -moz-transform:scale(1.25); /* Firefox */
    -ms-transform:scale(1.25); /* IE 9 */
    -o-transform:scale(1.25); /* Opera */
     transform:scale(1.25);
}

/* Follow button */
.spotify-follow, .print-button {
    background: #2ebd59;
    border-radius: 500px;
    color: #fff;
    font-size: 11px;
    line-height: 11px;
    width: 92px;
    float: right;
    height: 22px;
    padding-top: 2px;
    padding-bottom: 3px;
    white-space: nowrap;
    margin-top: 6px;
}
.spotify-follow:hover
{
    background: #1ed760;
}
.bt-icon {
    background-image: url(https://www.nederhits.nl/img/site/spotify-sprite.png);
    display: block;
    float: left;
    width: 17px;
    height: 17px;
    padding-top: 3px;
    margin-left: 3px;
    margin-right: 6px;
}
.bt-text {
    text-transform: uppercase;
    display: block;
    float: left;
    letter-spacing: 1px;
    line-height: 11px;
    margin-top: 4px;
    font-weight: normal;
}

/* Print button */
.print-button {
    background: #d11;
    width: 144px;
    margin-right: 8px;
}
.print-button:hover
{
    background: #f22;
}

.print-icon { width: 32px; display: inline; padding: 3px 0 2px 12px; float: left; }
.print-button-text {
    text-transform: uppercase;
    display: block;
    letter-spacing: 1px;
    line-height: 11px;
    margin-top: 4px;
    font-weight: normal;
}

/* Featurettes
------------------------- */

.featurette-divider {
  margin: 40px 0; /* Space out the Bootstrap <hr> more */
  color: #d1ffff;
}

/* Thin out the marketing headings */
.featurette-heading {
  font-weight: 300;
  line-height: 1;
  letter-spacing: -1px;
  margin-bottom: 32px;
}


/* RESPONSIVE YT
-------------------------------------------------- */
.yt {
    display: block;
    height: 0;
    width: 100%;
    position: relative;
    padding-top: 56.25%;
    background-size: cover;
    background-position: 50% 50%;
}

.yt iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

footer {
    font-size: 12px;
}

.form-container { min-width: 320px; float: left; }
.form-col-25    { width: 20%; }
.form-col-75    { width: 80%; }
.filepicker {
    padding: 2px 6px;
    margin:  0;
    height: 36px;
}

fieldset {
    border: 1px solid #888;
    border-radius: 5px;
    background-color: #f2f2f2;
    padding: 8px 20px;
    margin: 8px 0px;
}

label { display:inline-block; font-weight: normal; color: #468; }

input[type=text], select, textarea {
    padding: 2px 6px;
    margin:  0;
    display: inline-block;
    border: 1px solid #ccc;
    border-radius: 4px;
    width: 100%;
    color: #333;
}
textarea.fullwidth-area {
    max-width: 100%;
    min-height: 250px;
    margin-top:6px;
}
select {
    margin: 0 0;
    padding: 2px 2px;
}
input[type=submit], .button, .button-cancel {
    float:left;
    background-color: #36ab3a;
    color: white;
    padding: 10px 14px;
    margin: 8px 8px 12px 0;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size:12px;
	text-decoration: none;
}

input[type=submit]:hover, .button:hover, .button-cancel:hover {
    background-color: #3d8a40;
    color: white;
	text-decoration: none;
}


/* RESPONSIVE CSS
-------------------------------------------------- */
@media (max-width: 543px) {
	.featurette-divider {
	  margin: 10px 0; /* Space out the Bootstrap <hr> more */
	}
    .social-buttons, .navbar-form { padding-bottom: 8px; }
    a.navbar-brand { padding: 0; margin-left: -10px; }
    .hide-on-phone {display: none;}
    .wrap-phone { float: left; }
    .track-hd-wk { width: 18px;}
    td.track-col-rate { display: none !important;}
    td.track-col-time { display: none !important;}
    #coverplayer {display: none;}

    .sub-artists-rl:before { content: ""; display:block;}
    .sub-artists-index:before { content: ""; display:block;}
}

/* This is small devices, when the menu pops in */
@media (min-width: 544px) {
	.featurette-divider {
	  margin: 20px 0; /* Space out the Bootstrap <hr> more */
	}
    .social-buttons, .navbar-form { padding-bottom: 8px; }
    .hide-on-phone {display: none;}
    .wrap-phone { float: left; }
    .track-hd-wk { width: 18px;}
    #coverplayer {display: none;}

    .sub-artists-rl:before { content: " - "; display: inline; }
    .sub-artists-index:before { content: " - "; }
}

/* desktop small / pad portrait */
@media (min-width: 768px) {
    .featurette-heading { margin-top: 0px; font-size: 50px; }

    .social-buttons, .navbar-form { padding-bottom: 0px; }

    .hide-on-phone {display: block;}
    .wrap-phone { float: none; }
    .track-hd-wk { width: 30px !important; }
    #coverplayer {display: block; float:right;}

    .sub-artists-rl:before { content: ""; display:block;}
/*    .sub-artists-rl:before { content: " - "; }*/
    .sub-artists-index:before { content: ""; display:block;}
}

/* desktop wide / pad landscape */
@media (min-width: 992px) {
    .featurette-heading { margin-top: 0px; }
    .social-buttons, .navbar-form { padding-bottom: 0px; }

    .hide-on-phone {display: block;}
    .wrap-phone { float: none; }
    .track-hd-wk { width: 30px;}
    #coverplayer {display: block; float:right;}

    .sub-artists-rl:before { content: " - "; display: inline; }
    .sub-artists-index:before { content: ""; display:block;}
}