/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : Jan 20, 2020, 6:01:10 PM
    Author     : odetig
*/

body{
    font-family: 'Arial', sans-serif;
    background-color:#EEE;
    color:#333;
    margin:0;
    padding:0;
    font-size:11pt;
}

main{
    max-width:1400px;
    width:80%;
    margin-left:auto;
    margin-right:auto;
    background-color:white;
    box-shadow: rgba(0,0,0,0.2) 0 0 1em;
    padding: 2em;
    box-sizing:border-box;
    min-height:30em;
    position:relative;
    padding-bottom:10em;
}

div{
    box-sizing:border-box;
}

.header #logo{
    height:6em;
}

main > .content{
    padding-left:6.2em;
    padding-right:6em;
    margin-top:4em;
}

h1{
    font-size:2em;
    font-weight:normal;
}

input,button,select{
    border: 0.2em solid #AAA;
    border-width: 0 0 0.2em 0;
    border-radius: 0.5em;
    padding: 0.5em;
    box-sizing:border-box;
    background-color:#EEE;
    font-size:1.2em;
    font-family: 'Arial', sans-serif;
}

input[type="submit"],button{
    background-color:#777;
    color:white;
    border-bottom-color:#555;
}

input[type="submit"]:hover,button:hover{
    cursor:pointer;
    background-color:#888;
}

input[type="submit"]:active,button:active{
    background-color:#555;
}

a{
    color:#555;
    text-decoration:none;
}
a:hover{
    cursor:pointer;
    color:#000;
    text-decoration:underline;
}

footer{
    padding:2em;
    padding-left:8.2em;
    position:absolute;
    bottom:0;
    left:0;
    width:100%;
    display:block;
    box-sizing:border-box;
}

footer > .logos{
    display:inline-block;
    text-align:right;
    width:33%;
    vertical-align:middle;
}

footer > .logos img{
    height:6em;
    display:inline-block;
}

footer > .credit{
    display:inline-block;
    text-align:left;
    vertical-align:middle;
    width:67%;
}

table{
    width:100%;
    border-collapse:collapse;
}

table td:not(:last-child), table th:not(:last-child){
    padding-right:1em;
}

table th{
    text-align:left;
    padding-left:0.5em;
}

table input{
    font-size:1em;
    background:none;
    border:none;
    padding: 0.1em 0.5em;
    border-radius:0;
}

table input:hover{
    box-shadow: rgba(0,0,0,0.5) 0 0 0.2em;
}

table input:focus{
    box-shadow: rgba(0,0,0,1) 0 0 0.2em;
}

table select{
    background:transparent;
    border:none;
}

tr:nth-child(even){
    background-color:#EEE;
}

.black_mask{
    content:'';
    position:fixed;
    top:0;
    left:0;
    opacity:0.3;
    background-color:black;
    width:100%;
    height:100%;
}

.header_menu{
    position:absolute;
    top:0;
    right:0;
    padding: 2em;
    box-sizing:border-box;
    text-align:right;
}
.header_menu a{
    display:inline-block;
    vertical-align:middle;
    box-sizing:border-box;
}
.header_menu a:hover{
    cursor:pointer;
    text-decoration:underline;
}

.header_menu a ~ a{
    margin-left:0.4em;
}

.header_menu a.language{
    font-size:1.2em;
}

.header_menu a.language:hover{
    transform:scale(1.1);
}

.header_menu a.language:active{
    transform:scale(1);
}

.header_menu a.language:not([data-selected="true"]){
    filter:grayscale(0.5);
    opacity:0.5;
}

.header_menu a.language[data-selected="true"] > .flag{
    box-shadow: rgba(0,0,0,0.2) 0 0 0.2em;
}

.header_menu > .links{
    display:block;
    width:100%;
    text-align:right;
    margin-top:0.5em;
}

#back{
    color:#555;
    vertical-align:top;
}

#back::before{
    content:'';
    position:relative;
    width:1em;
    height:1em;
    margin-right:0.2em;
    top:-0.1em;
    display:inline-block;
    background-position:center;
    background-size:75%;
    background-repeat:no-repeat;
    background-image:url('/img/back.png');
    vertical-align:middle;
}

#back:hover::before{
    opacity:0.8;
}

#back:active::before{
    opacity:0.6;
}

#home_link{
    display:inline-block;
    text-align:right;
}

@media screen and (max-width: 1600px), screen and (max-device-width: 1600px){
    main{
        width:90%;
    }
}

@media screen and (max-width: 1400px), screen and (max-device-width: 1400px){
    main{
        width:95%;
    }
}

@media screen and (max-width: 800px), screen and (max-device-width: 800px){
    body{
        background-color:white;
    }
    main{
        width:100%;
        padding-left:0.5rem;
        padding-right:0.5rem;
        box-shadow:none;
        background:transparent;
    }
    main > .content{
        margin-top:0.5rem;
        padding-left: 0rem;
        padding-right: 0rem;
    }
    main > .content h1{
        margin-top:0.5rem;
    }
    footer{
        padding: 0.5rem;
    }
}

@media screen and (max-width: 720px), screen and (max-device-width: 720px){
    main{
        padding-top:0rem;
        padding-bottom:13rem;
    }
    .header_menu{
        padding: 0.5rem;
        display:block;
        position:relative;
    }
    footer .credit{
        margin-bottom:1rem;
    }
    footer .credit,footer .logos{
        display:block;
        width:100%;
        text-align:left;
    }
}