body
{
    font-family:'Capsuula';
    background-color: #050914;
    margin:0 auto;
    padding:0;
    width: 100%;
    height: 100%;
    background-image: url('../images/space_bcg2.jpg');
    background-repeat: no-repeat;
    background-position: bottom center;
    background-attachment:fixed;


}

code { color: white}


@font-face {
    font-family: 'Capsuula';
    src: url('Capsuula.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
#top_bar
{
    width: 100%;
    background-image: url('../images/top_bar_bcg.png');
    background-size:cover;
    background-repeat: repeat-y;
    height: 34px;
    position: fixed;
    border-bottom: 1px dotted #7cc9e5;
    color: #d6ffff;
    margin: 0px auto;
    padding-top: 14px;
    z-index: 100;  
}

#top_bar #inside
{
    width: 960px;
    margin: 0px auto;
    font-size: 18pt;
    padding-left: 10px;

}

#top_bar p img
{
    vertical-align: middle;
    padding-right: 2px;

}

#flag_pl, #flag_uk
{
    padding-left: 5px;
}

#element1 {display:inline-block;margin: 0px; float: left;  }
#element2 {display:inline-block; margin: 0px; float: left;}

#container
{
    padding-top: 80px;
    max-width: 960px;
    margin: 0px auto;

    height: 100%;


}

/*header*/

#header
{
    transform:scale(1.2,1); /* W3C */
    -webkit-transform:scale(1.2,1); /* Safari and Chrome */
    -moz-transform:scale(1.2,1); /* Firefox */
    -ms-transform:scale(1.2,1); /* IE 9 */
    -o-transform:scale(1.2,1); /* Opera */

    text-align: left;
}

h1
{
    text-transform: uppercase;
    color: #6cb9df;
    font-size: 32pt;
    font-weight: normal;


}

h2

{
    font-style: italic;
    color: #c7f8ff;
    font-weight: normal;
    font-size: 14pt;
    margin-left: 84px;
    margin-top: 0px;

}

h3,h4,h5{
    color: #c7f8ff; 
}
#content
{
    width: 960px;
}

#content_left
{
    width: 490px;
    color: #b5eef9;
    margin-top: 20px;
    float: left;

}

ul
{
    line-height: 16pt;
    color: #e7ffff;
    list-style:none;
    padding-left:0;
    font-family: 'Dosis', sans-serif;
}


li
{
/*    background: url('../images/dot.png') no-repeat left top;*/
    background: url('../images/dot-green.png') no-repeat left top;
    padding: 1px 2px 17px 27px;
    list-style: none;

}

#youtube_div
{
    width: 400px;
    color: #b5eef9;
    margin-top: 20px;
    float: left;
    margin-left: 70px;
    font-family: 'Dosis', sans-serif;



}

#youtube_div hr{
    background:url(../images/line.png) repeat-x top center;
    height:2px;
    border:none !important;
    width: 70%;
    margin:0px 0px 30px 35px;

}

#header hr
{
    background:url(../images/line.png) repeat-x top center;
    height:2px;
    border:none !important;
    width: 44%;
    margin-left: 83px;
}


#youtube_div img,
#youtube_div p
{
    display: inline-block;
}

a:link, a:visited, a:active
{
    color: #a0d0ff;

}

a:hover
{
    color: #fff;
}

p{
    color: #e7ffff;
}


@media only screen and (min-device-width : 768px) and (max-device-width : 1024px){

    body
    {
        width: 768px;
        margin: 0;
        padding:0;
    }
    #top_bar
    {

        margin: 0;
        padding-top: 5px;
        width: 1024px;

    }

    #inside
    {
        width: 100%;
        margin: 0;
        padding:0;
    }

    h1,h2, #inside
    {
        font-family: 'Dosis', sans-serif;
    }

    #container,
    #content_left,
    #youtube_div

    {
        width: 100%;
        margin: 0;
        padding-left: 10px;

    }


    #header
    {
        width:100%;
    }


}



/*@media screen and (max-width: 480px) and (orientation: portrait)  {*/
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
    /* Styles */

    body
    {
        width: 480px;
        margin: 0;
        padding:0;
    }



    #top_bar
    {
        height: 38px;

        margin: 0;
        padding-top: 14px;
        padding-left: 10px;
        display:block;
        float: left;
        width: 600px;

    }

    #top_bar #inside

    {

        font-family: 'Dosis', sans-serif;
        margin: 0;
        padding-left: 0px;
        display:block;

    }



    #element1 {

        float: left; 
        display:block;} 

    #element2 {

        display:block;
        float: left;
        padding-left: 0px;
    }


    #flag_pl
    {
        padding-left: 15px;
    }


    #container,
    #content_left,
    #youtube_div,
    #header
    {
        width: 80%;
        margin: 0;

    }

    .musicFrame{
        width:400px;
    }

    #content_left,
    #youtube_div
    {
        padding-left: 10px;
    }

    a
    {
        margin: 0px;
    }

    h1
    {

        font-size: 32pt;
        line-height: 32pt;
        margin-left: 40px;
        font-family: 'Dosis', sans-serif;
        width: 100%;
        padding-left: 10px;
    }

    h2

    {   
        width: 100%;
        line-height: 14pt;
        margin-left: 40px;
        font-family: 'Dosis', sans-serif;
        padding-left: 10px;
    }

}

.panel{
    background-color:rgba(0,0,0,0.7);
    padding:20px;
    margin:20px;
}

.songs_list{
    text-align: left;
    font-size:smaller;
}

.songs_list img {
    width:50px;
    float:left;
    margin-right:10px;
}

.smaller img {
    width:20px;
    float:left;
    margin-right:10px;
}

.smaller li {
    padding: 0;
}


a.video:link, a.video:active {
    color:#75a864;
}

.panel h2 {
    margin-left: 0px;
}

.panel li {
    background: none;
}

h1 {
    margin:5px 0 5px 0;
}