/*********************** LOGO & COLORS ***********************/

  body {
      background-attachment: scroll;
      background-color: #fff;
      background-image: url('../images/background.jpg');
      background-position: center top;
      background-repeat: no-repeat;
      background-size: calc(100%);
  }

/* logo */
#logo {
    background-image: url("../images/djlogo.png");
    background-repeat: no-repeat;
    width: 150px;
    height: 120px;
}
@media screen and (max-width:767px) {
    #logo {
        background-size: 36px 26px;
        height: 36px;
    }
}

/* language */
.language-default li.active a {
    color: #3fa7cc;
}

.language-default a:hover {
    color: #3fa7cc;
}

/* menu */
.navigation-default li li.first.active a, .navigation-default li li.first.active a:hover {
    background: #fff url("../images/icon-home-active_dj.png") no-repeat 0 0;
}

.navigation-default li li.active, .navigation-default li li.active a {
    color: #FFF;
    background-color: #3fa7cc;
    border-radius:5px;
}

    .navigation-default li li.active ul li.active a {
        color: #3fa7cc;
        background: transparent none;
    }

    .navigation-default li li.active ul li.first.active a {
        color: #3fa7cc;
        background: transparent none;
    }

    .navigation-default li li.active ul li ul li.active a {
        color: #3fa7cc;
    }

    .navigation-default li li.active a:hover {
        background-color: #3fa7cc;
        border-radius:5px;
    }

/* mobile menu */
.responsejs .slicknav_nav li.active a {
    color: #3fa7cc;
}

.responsejs .slicknav_nav li.hasChild li.active {
    background: #3fa7cc;
}

.responsejs .slicknav_nav .sitewide-nav.slicknav_open a {
    color: #3fa7cc;
}

.responsejs .slicknav_nav .sitewide-nav.hasChild li.active a {
    color: #3fa7cc;
}

.responsejs .slicknav_menu .slicknav_btn:hover, .responsejs .slicknav_menu .slicknav_btn.slicknav_open {
    background: #3fa7cc;
    border-radius: 5px;
}

/* checkbox artist/song/year */
input[type="checkbox"]:focus + label:before,
input[type="radio"]:focus + label:before {
    border-color: #3fa7cc;
}

input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
select:focus,
textarea:focus {
    border-color: #3fa7cc;
}

ul.feature-icons li:before {
    background: #3fa7cc;
}

input[type='submit']:hover, input[type='reset']:hover, input[type='button']:hover, .button:hover {
    background-color: #3fa7cc;
}

input[type="submit"],
	input[type="reset"],
	input[type="button"],
	.button {
		background-color: #3fa7cc;
	}

ul.feature-icons li:before {
    background: #3fa7cc;
}

input[type='text'], input[type='password'], input[type='email'], select {
    color: #3fa7cc;
}

/*********************** EINDE LOGO & COLORS ***********************/



/******************* CUSTOM COLORS VOOR IMTHEDJ *******************/

.divplay {
    /*background-color: #daf1f3;*/
    background-color: rgba(206,222,243,0.5);
    border-radius: 5px;
}

.trplay {

}

.divsearch, .divplaylist, .divmyplaylist{
    /*background-color: #f3f3f1;*/
    background-color: rgba(243,243,241,0.5);
    -webkit-tap-highlight-color: rgba(0,0,0,0); /* Disable flickr onclick Safari */
    border-radius: 5px;
}

.trplaylist, .trsearchitem, .trmyplaylist {
   
}

.tdfontlarge_upper_bold_play, .tdfontnormal_play, .tdfontxlarge_bold_blue, .tdfontlarge_bold_blue, .tdfontsmall_bold_blue, .tdfontnormal_blue {
    color: #3fa7cc;
}

.tdfontnormal_noplaylist {
    color: #ee565a;
}

/******************* EINDE CUSTOM COLORS VOOR IMTHEDJ *******************/



/********************** CUSTOM VOOR IMTHEDJ **********************/

.trheader{
    padding-top: 20px;
    padding-bottom: 30px;
}

.trsubtitle{
    padding-bottom: 30px;
}

.trinlog {
    padding-bottom: 70px;
}

.trinfo {
    height: 100px;
}

.tdoptie{
    padding-top: 30px;
    width: 278px;
}

.tdoptie_middle {
    width: 278px;
}

.tdimgbtn {
    width: 110px;
}

.tdrecord {
    width: 225px;
    vertical-align: middle;
    padding-left: 10px;
    padding-bottom: 4px;
}

.imgrecord {
    width: 160px;
}

.imgproces {
        width: 700px;
    }

.imgbtn {
    width: 100px;
    margin-right: 25px;
    border-radius: 10px;
}

.imgsnelmenu
{
    width: 233px;
}

.imgath
{
    width: 35px;
}

.tdfontxlarge_bold_blue {
    font-size: 3rem;
    font-weight: bold;  
    height: 100px;
}

.tdfontlarge_bold, .tdfontlarge_upper_bold, .tdfontlarge_upper_bold_play, .tdfontlarge_bold_blue {
    font-size: 2rem;
    font-weight: bold;    
}

.tdfontlarge_upper_bold, .tdfontlarge_upper_bold_play {
    text-transform: uppercase;   
}

.tdfontlarge_upper_bold_play{
    font-style: italic;
}

.tdfontnormal, .tdfontnormal_play, .tdfontnormal_noplaylist, .tdfontnormal_italic, .tdfontnormal_blue {
    font-size: 1.8rem;
}

.tdfontnormal_play, .tdfontnormal_italic, .tdfontsmall_italic {
    font-style: italic;
}

.tdfontsmall, .tdfontsmall_bold_blue, .tdfontsmall_italic {
    font-size: 1.4rem;
    line-height: 0.7em;
}

.tdfontsmall_bold_blue {
     font-weight: bold;    
}

.tddiscfontnormal
{
    font-size: 1.8rem;
}

.tddiscfontsmall {
    font-size: 1.4rem;
    line-height: 1.5;
}

.tddisc
{
    width: 35px;
    font-size: 1.8rem;
    padding-top: 0px;
    vertical-align: middle;
}

.tdimgdj {
    vertical-align: middle;
    width: 90px;
}

.imgdj {
    width: 70px;
    text-align: right;
    /*padding-right: 10px;*/
}

.imgvink{
    width: 30px;
}

.imgvinksmall {
    width: 15px;
}

.tdimgvote {
    vertical-align: middle;
    width: 50px;
    cursor: pointer;
    padding-top: 0px;
}

.imgvote {
    width: 40px;
}

.imgnoot {
    width: 50px;
}

.tdimgdelete {
    vertical-align: middle;
    width: 90px;
    /*background-color: #ee565a;*/
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    /*text-align: center;*/
}

.imgdelete{
    width: 50px;
    text-align: right;
    /*padding-right: 10px;*/
    cursor: pointer;
}

.img_loader {
    width: 100px;
}

.hidden{
    visibility:hidden;
}

.hiddenheight{
    visibility:hidden;
    height: 0px;
}

.paddingtop
{
    padding-top: 30px;
}

.underline
{
    text-decoration:underline;
}

@media screen and (max-width:1023px) {
    .imgoptie {
        width: 240px;
    }

    .tdoptie_middle {
        width: 240px;
    }

    .tdoptie {
        padding-top: 25px;
        width: 240px;
    }
}

@media screen and (max-width:767px) {

    .trheader{
        padding-top: 20px;
        padding-bottom: 10px;
    }

    .trsubtitle{
        padding-bottom: 10px;
    }

    .trinlog {
        padding-bottom: 40px;
    }

    .trinfo {
        height: 80px;
    }

    .tdrecord {
        width: 115px;
        padding-left: 6px;
        padding-bottom: 2px;
    }

    .tdoptie {
        padding-top: 15px;
        width: 120px;
    }

    .tdoptie_middle {
        width: 120px;
    }

    .tdimgbtn {
        width: 75px;
    }

    .imgrecord {
        width: 90px;
    }

    .imgproces {
        width: 350px;
    }

    .imgoptie {
        width: 120px;
    }

    .imgbtn {
        width: 65px;
        margin-right: 10px;
    }

    .tdfontxlarge_bold_blue {
        font-size: 2.0rem;
    }

    .tdfontlarge_bold, .tdfontlarge_upper_bold, .tdfontlarge_upper_bold_play, .tdfontlarge_bold_blue {
        font-size: 1.3rem;
    }

    .tdfontnormal, .tdfontnormal_play, .tdfontnormal_noplaylist, .tdfontnormal_italic, label, .tdfontnormal_blue {
        font-size: 1.3rem;
    }

    .tdfontsmall, .tdfontsmall_bold_blue, .tdfontsmall_italic {
        font-size: 1rem;
    }

    .tddisc {
        width: 15px;
        font-size: 1.3rem;
    }

    .tddiscfontnormal {
        font-size: 1.3rem;
        line-height: 1.5;
    }

    .tddiscfontsmall{
        font-size: 1rem;
        line-height: 1.5;
    }

    .tdimgdj {
        width: 40px;
    }

    .imgdj {
        width: 30px;
    }

    .imgsnelmenu {
        width: 100px;
    }

    .imgath {
        width: 25px;
    }

    .imgvink {
        width: 15px;
    }

    .imgvinksmall {
        width: 8px;
    }

    .tdimgvote {
        width: 30px;
    }

    .imgvote {
    width: 20px;
    }

    .imgnoot {
        width: 20px;
    }

    .tdimgdelete {
        width: 40px;
    }

    .imgdelete {
        width: 25px;
    }

    .img_loader {
        width: 75px;
    }

    .paddingtop {
        padding-top: 10px;
    }
}

/********************** EINDE CUSTOM VOOR IMTHEDJ **********************/