@font-face{
    font-family: jamesShieldsRagamuffin;
    src: url(../fonts/james-shields_ragamuffin/RAG.woff);
}

@font-face{
    font-family: ComputerAmok;
    src: url(../fonts/ComputerAmok.WOFF);
}


body{

    padding: 0 0 0 0;
    overflow-x: hidden;
    background: url(../img/20161129_Background_Game_grey_v1.png) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;

}

input {

    font-size: 2vh;


}
#amount_bugs_input{
    width: 100%;
}
select{

    font-size: 2vh;
    width: 100%;

}

.table_FirstCloumn_BulletPoint{
    width: 80px;
}


#h3_settings:hover, #h3_settings:focus, #h3_settings:active, #h3_statistik:hover, #h3_statistik:focus, #h3_statistik:active {
    background: rgb(55, 171, 230);
    color: rgba(0, 0, 0, 0.4);
    transition: all 0.5s ease-in;
}
#h3_settings,#h3_statistik {
    font-size: 2vh;
    display: inline-block;
    box-sizing: border-box;
    margin: 0 auto;
    padding: 8px;
    width: 80%;
    max-width: 200px;
    border-radius: 8px;
    color: #fff;
    text-align: center;
    text-decoration: none;
    letter-spacing: 1px;
    transition: all 0.3s ease-out;


}
#h3_statistik{
    display: none;
}
#h3_tabs_header_span{
    left: 0%;
    text-align: center;
    position: relative;
    display: block;
    height: 80px;
    width: 100%;

}

.h3_settings_selected{
    background: rgba(100, 157, 255, 0.5);
}

.h3_settings_not_selected{
    background: rgba(255, 255, 255, 0.5);
}
#welcomeText{
    width: 80%;
    left: 5%;
    position: relative;
}

table{
    width: 75%;
    table-layout: fixed;
}
#settings_big_div {
    background: url(../img/20161129_Background_Game_v2.png) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    height: 100vh;
    position: absolute;
    padding: 0 20% 0% 1%;
    width: 98%;
    top: -1px;
    left: -1px;
}
ol{
    list-style-image: url(../img/bug2_40px.png);
    margin: 10px 0 0 100px;
    font-size: 2vh;
}
body {
    font-family: Helvetica;

}
h3{
    font-size: 2vh;
    text-align: center;
    font-family: jamesShieldsRagamuffin;
}
h1{
    font-size: 10vh;
    text-align: center;
    margin: 0 0;
    font-family: jamesShieldsRagamuffin;
}

#add_next_generation,#btn_start_next_game{
    font-size: 4vh;
    height: 7vh;
    font-family: jamesShieldsRagamuffin;
    text-align: center;
    padding: 1vh 0.4vh 0 1vh;
    position: relative;
    display: inline-block;
    left: 5%;
    margin-top: 1vw;
    width: 90%;

}

#add_next_generation{

}

#settings_panel_center{
    left: 20%;
    position: relative;
    display: block;
}


#field{
    position: absolute;
    margin-top: 3%;
    border: 2px solid black;
    width: 98%;
    height: 70%;

    /*background-image: url(../img/transp_backgrounds/basketball.png);*/
    background: #f1f5bf; /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(#f1f5bf, white); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(#f1f5bf, white); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(#f1f5bf, white); /* For Firefox 3.6 to 15 */
    background: linear-gradient(#f1f5bf, white); /* Standard syntax */
}

#colorchoser{
    display: inline-block;
    z-index: 1000;
    margin: 5px 0 5px 0;

}
#stop_game_manual {
font-size: 100px;
}

#field_background_over{
    position: absolute;
    margin-top: 5%;
    z-index: 400;
    width: 98%;
    height: 70%;

    background-image: url(../img/transp_backgrounds/basketball.png);
}
.dots{
    /*border-radius: 100%;
    width: 40px;
    height: 40px;
    */
    display: inline-block;
    position: absolute;
    top : 0;
    left:0;
}
.red {
    background-color: #ff4c54;

}
.blue {
    background-color: #3231ff;
}

.yellow {
    background-color: #ffe91e;
}
.darkgreen {
    background-color: #45770c;
}
.darkyellow {
    background-color: #a4922a;
}

.beige {
    background-color: #F5F5DC;
}

.lila {
    background-color: #d707f5;
}

.lightblue {
    background-color: #00f5f4;
}

#fieldblock{
    display: none;
    z-index: 300;
    width: 100%;
    background: rgba(0,0,0,0.3);
    /*background: white;*/
    height: 100%;
    position: absolute;

}
#txt_fieldblock{
    color: white;
    text-align: center;
    margin-top: 30%;
    font-size: 20pt;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
h2,h3,h4,h5{
    font-family: Helvetica;
}


.color_selector{
    width: 7vh;
    height: 7vh;
    margin: 0 5px 0 5px;
    border: solid 2px black;
    display: inline-block;
}
#anzahl_kaefer_fixed{
    font-family: jamesShieldsRagamuffin;
    font-weight: bold;
}

.bulletPointBackgroundStyle{

    background: url("../img/bug2_40px.png");
    background-repeat: no-repeat;
    display: inline-block;
    width: 50px;
    height: 40px;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;



}

#field_game_over{
    position: absolute;
    margin-top: 3%;
    border: 2px solid black;
    width: 98%;
    height: 70%;
    background-color: red;
    z-index: 1;
    text-align: center;
    padding: 0 0 0 0;
    font-size: 3vh;
    display: none;
}

#field_game_over_p{

    width: 80%;
    margin-left: 10%
}

.legals{
    color: #007fc4;
    text-decoration: none;

}

#ManualReRunGame{

    border: 2px solid black;
    padding: 6px;
    margin-top: 12px;
    display: inline-block;
    cursor: pointer;
}

footer{position: absolute;
    top: 98%;
    color: darkgreen;
    background-color: black;
    height: 3vw;
    width: 100%;
    left: 0px;}


#timeInfoText{
    display: none;
    border: 2px dashed black;
    padding: 5px 5px 4px 25px;
    background-image: url(../img/stopwatch_black.png);
    background-size: 20px;
    background-repeat: no-repeat;
    position: relative;
    left: 40%;
    margin-top: 16px;

}


#diagram_div
{
    width: 80%;height: 25vw;
    max-height: 41%;
    position: relative;display: none; left: 10%; z-index: 301; background: white;
}

.winTooSmallP{
    position: relative;
    width: 80%;
    left: 10%;
}