@font-face {
    font-family: 'Open Sans';
    /*src: url('../fonts/opensans-light-webfont.woff2') format('woff2'),*/
    /*url('../fonts/opensans-light-webfont.woff') format('woff');*/
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'Open Sans';
    /*src: url('../fonts/opensans-regular-webfont.woff2') format('woff2'),*/
    /*url('../fonts/opensans-regular-webfont.woff') format('woff');*/
    font-weight: 300;
    font-style: normal;
}

html{
    font-family: 'Open Sans';
    color: black;
}

#main-container{
    /*width : 1200px; */
    margin : 0 auto;
}

#nav-container{
    height : 80px;
    position : relative;
    background-color : #ffffff;
}

#logo-container{
    width : 50%;
    height : 80px;
    float : left;
    box-sizing: border-box;
}

#logo-container .logo{
    background: url( ../images/modules/playlist/logo.png ) no-repeat;
    width: 88px;
    height:34px;
    position : absolute;
    left : 50px;
    top: 20px;
}

#buttons-container{
    width : 50%;
    height : 80px;
    padding-top: 23px;
    padding-right : 50px;
    position: relative;
    float : left;
    box-sizing: border-box;
}

#buttons-container .button {
    width : 136px;
    height : 57px;
    display: flex;
    align-items: center;
    float: right;
    justify-content: center;
    text-decoration: none;
    color : #000000;
}

#buttons-container .login-icon{
    background: url( ../images/modules/playlist/logout-icon.png ) no-repeat;
    width : 25px;
    height : 18px;
    padding-right: 10px;
}


#buttons-container .button:hover{
    background-image: url(../images/modules/playlist/nav-button-bg.png);
}

#buttons-container .button-selected{
    background-image: url(../images/modules/playlist/nav-button-bg.png);
}