/**
 * CSS Stylesheet for Basisgruppe NAWI Physik Song Selection Application
 * Created LG 02.12.16
 * First final version LG 04.01.17
 */


/***********************************************************************************/
/*************************** General, Background ***********************************/
/***********************************************************************************/

html, body
{
    padding: 0;
    margin: 0;
}

input:focus,
select:focus,
textarea:focus,
button:focus {
    outline: none;
}

/************************************************************************************/
/****************************** Dialogs etc *****************************************/
/************************************************************************************/

#init_overlay
{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #00ffff;
    z-index: 13; 
}
#init_overlay img
{
    position: fixed;
    top: 50%;
    left: 25%;
    width: 50%;
    transform: translateY(-50%);
}


/****************************** Dark Overlay ****************************************/
#overlay
{
    position: fixed;
    display: none;
    width: 100%;
    height: 100%;
    background: #000000;
    filter: alpha(opacity=60);
    opacity: 0.6;
    z-index: 10;
}

/****************************** Message Boxes ***************************************/
#msgbox
{
    position: fixed;
    display: none;
    width: 60%;
    height: 200px;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    z-index: 12;
}

#msgbox_inner
{
    position: absolute;
    min-width: 80%;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    text-align: center;
    font-size: 36pt;
}

/****************************** Dialogs General **************************************/
.dialog
{
    position: fixed;
    display: none;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    text-align: center;
    z-index: 11;
}

.dialog_title
{
    font-weight: bold;
}

.dialog_button
{
    margin-top: 24px;
}

/***************************** Bug Report Dialog **************************************/
#bugreport
{
    padding: 20px;
    text-align: center;
}
#bugreport_inner
{
    margin-top: 30px;
}
#text_bugreport
{
    width: 600px;
    height: 180px;
    margin-top: 20px;
    resize: none;
}

/***************************** Add Song Dialog ***************************************/
#newsong
{
    padding: 20px;
}

#newsong table
{
    width: 300px;
    margin: 24px auto 0 auto;
    border-spacing: 10px;
}
#newsong table input
{
    border: none;
}

#newsong_inner
{
    margin-top: 30px;
}


/*************************************************************************************/
/*************************************** Menu ****************************************/
/*************************************************************************************/

#menu
{
    position: absolute;
    display: none;
    left: auto;
    right: 0;
}
#menu ul
{
    list-style: none;
    padding: 4px 8px 4px 8px;
    margin: 0;
}
#menu ul li
{
    display: block;
    padding: 18px 48px 18px 24px;
    margin: 4px 0 4px 0;
    cursor: pointer;
}

/*************************************************************************************/
/********************************* Search Bar ****************************************/
/*************************************************************************************/

#searchBarContainer
{
    position: absolute;
    display: none;
    width: 100%;
    padding: 4px 0 4px 0;
}
#searchBar
{
    display: block;
    margin: 0 4px 0 4px;
}
#searchInputContainer
{
    margin-right: 80px;
}
#searchInput
{
    width: 100%;
    height: 80px;
    border: none;
    padding: 0;
}
#searchButton
{
    width: 80px;
    height: 80px;
    float: right;
    background: url('images/searchbutton_white.png') center no-repeat;
    background-size: 64px 64px;
    filter: alpha(opacity=60);
    opacity: 0.6;
}

/*************************************************************************************/
/**************************************** Header *************************************/
/*************************************************************************************/

#header_spacer
{
    display: inline-block;
    width: 36%;
    height: 100%;
    vertical-align: middle;
}

#img_logo
{
    width: 40%;
    vertical-align: middle;
}

#img_searchbutton
{
    width: 10%;
    vertical-align: middle;
    margin-right: 2%;
}
#img_menubutton
{
    width: 10%;
    vertical-align: middle;
    margin-right: 2%;
}

/************************************************************************************/
/************************************ Songs Table ***********************************/
/************************************************************************************/

#songTable
{
    width: 100%;
}

#songTable td
{
    padding: 18px 0 18px 0;
}

.songTitle
{
    margin-left: 24px;
    font-weight: bold;
}
.songInterpreter
{
    margin-left: 24px;
}

.votebutton
{
    display: block;
    width: 80px;
    height: 80px;
    margin: 0 12px 0 36px;
}

.votebutton_enabled
{
    background: url("images/upvote.png");
    background-size: 80px 80px;
}

.votebutton_disabled
{
    background: url("images/upvote_disabled.png");
    background-size: 80px 80px;
}

/******************************************************************************************/
/************************************* current Song ***************************************/
/******************************************************************************************/

#currentSong
{
    padding: 36px 24px 36px 24px;
   /* border-bottom: 1px solid black;*/
}

#currentCover
{
    height: 200px;
}

#currentTitle, #nextTitle
{
    font-weight: bold;
    margin-bottom: 12px;
}

#currentSongTitle
{
    font-weight: bold;
    padding-left: 12px;
}

#currentSongInterpreter
{
    padding-left: 12px;
}
#progressBar
{
    display: block;
    width: 100%;
    height: 12px;
    margin-top: 12px;
}
#progressBarInner
{
    display: block;
    width: 0;
    height: 100%;
}
#progressText
{
    margin-top: 4px;
    text-align: center;
    font-family: Verdana, Geneva, sans-serif;
    font-size: 18pt;
}
#nextTitle
{
    margin-left: 24px;
}
/*#trNextSong td
{
    border-bottom: 2px solid black;
}*/

/************************************************************************************/
/********************************* DSGVO ********************************************/
/************************************************************************************/
#dsgvo-body
{
    margin: 20px 5% 20px 5%;
}
.dsgvo-line
{
    margin: 3px 0 3px 20px;
}
.dsgvo-title
{
    font-weight: bold;
margin-bottom: 10px;
}