/*

game structure

*/

.oufunnyequations_window
{
    margin: 0px auto 0px auto;
    width: 500px;
    min-height: 400px;
    overflow: hidden;
    font-family: 'Roboto', sans-serif;
}
        
.oufunnyequations_window_black
{
    margin: 0px auto 0px auto;
    width: 100%;
    min-height: 400px;
    overflow: hidden;
    background-color:rgba(0, 19, 26, 0.9);
}
 

/*

main window

*/


.oufunnyequations_screen_title
{
    padding: 20px 10px 20px 10px; 
    font-size: 68px;
    color: transparent;
    text-align:center;
    text-shadow: 1px 1px 1px rgba(255,255,255,0.7);
}
        
.oufunnyequations_screen_menu
{
    padding: 25px 0px 0px 0px;
    width: 100%;
    overflow: hidden;
    text-align: center;
}
        
/*
        
    LINKS
        
*/
        
        
.oufunnyequations_link_title
{
    color: transparent;
    text-shadow: 1px 1px 1px rgba(255, 191, 128,0.8);
    width: 100%;
    font-size: 35px;
    padding: 0px 20px 0px  20px;
    text-decoration: underline;
    cursor: pointer;
}
        
.oufunnyequations_link_title:hover
{
    text-shadow: 1px 1px 1px rgba(255, 166, 77,0.5);
    text-decoration: underline;
}
        
.oufunnyequations_link_menu,
.oufunnyequations_link_game
{
    color: transparent;
    text-shadow: 1px 1px 1px rgba(255, 191, 128,0.8);
    width: 100%;
    font-size: 35px;
    padding: 20px 0px 20px  0px;
    text-decoration: underline;
    cursor: pointer;
}
        
.oufunnyequations_link_menu:hover,
.oufunnyequations_link_game:hover
{
    text-shadow: 1px 1px 1px rgba(255, 166, 77,0.5);
    text-decoration: underline;
}
    

/*

menu window

*/

.oufunnyequations_menu_window
{
    padding: 114px 0px 0px 0px;
    width: 100%;
    overflow: hidden;
    text-align: center;
}
        
.oufunnyequations_game_window
{
    padding: 86px 0px 0px 0px;
    width: 100%;
    overflow: hidden;
    text-align: center;
}


/*


HELP

*/

.oufunnyequations_level1w_help_title
{
    padding: 15px 0px 0px 0px; 
    color: #ffffff; 
    font-size: 35px; 
    text-align:center;
}

.oufunnyequations_level1w_help_content
{
    margin: 20px auto 20px auto; 
    width: 460px; 
    font-size: 20px; 
    color: #cccccc; 
    text-align: justify;
}

.oufunnyequations_level1w_help_close
{
    text-align:center;
}

/*

LEVEL: Beginner

*/

.oufunnyequations_level1w_display_formlula
{
    color: #ffffff; 
    overflow: hidden; 
    text-align:center; 
    font-size: 100px;  
}
        
.oufunnyequations_level1w_display_formlula_a
{
    padding: 0px 10px;
}

.oufunnyequations_level1w_display_formlula_b
{
    padding: 0px 5px;
}
        
.oufunnyequations_level1w_display_title
{
    text-align:center; 
    width: 480px; 
    margin: 0 auto; 
    background: #cccccc;   
}
        
.oufunnyequations_level1w_display_answer_window
{
    margin: 20px auto 0px auto; 
    width: 400px; 
    text-align: center; 
    font-size: 60px; 
    color: #990000;  
}
        
.oufunnyequations_level1w_display_answer_padding
{
    padding: 0px 10px; 
    text-decoration:underline; 
    cursor: pointer;   
}
        
.oufunnyequations_level1w_display_timeout
{
    display:none; 
    margin: 20px auto 0px auto; 
    width: 400px; 
    text-align: center; 
    font-size: 60px; 
    color: #990000;
}
        
.oufunnyequations_level1w_display_wrong
{
    display:none; 
    margin: 20px auto 0px auto; 
    width: 400px; 
    text-align: center; 
    font-size: 60px; 
    color: #990000;   
}
        
.oufunnyequations_level1w_display_right
{
    display:none; 
    margin: 20px auto 0px auto; 
    width: 400px;
    text-align: center; 
    font-size: 60px; 
    color: #008000;  
}
        
.oufunnyequations_level1w_display_footer
{
    margin: 45px auto 5px auto; 
    width: 480px; 
    overflow:hidden; 
    font-size: 14px; 
    color: #cccccc;  
}
    
.oufunnyequations_level1w_display_footer_left
{
    float:left; 
    width: 33%; 
    text-align:left; 
}
        
.oufunnyequations_level1w_display_footer_center
{
    float:left; 
    width: 34%; 
    text-align:center;
}
        
.oufunnyequations_level1w_display_footer_center_exit
{
    text-decoration:underline; 
    cursor: pointer; 
    color: #990000;
}
        
.oufunnyequations_level1w_display_footer_right
{
    float:left; 
    width: 33%; 
    text-align:right;
}


/*

LEVEL: Intermediate

*/

.oufunnyequations_level1w_display_formula2
{
    margin: 25px auto 0px auto; 
    width: 498px; 
    color: #ffffff; 
    overflow: hidden; 
    text-align:center; 
    font-size: 60px;
}

.oufunnyequations_level1w_display_formula2_padding_a
{
    padding: 0px 10px;
}

.oufunnyequations_level1w_display_formula2_padding_b
{
    padding: 0px 5px;
}

.oufunnyequations_level1w_display_answer2
{
    text-align:center; 
    width: 480px; 
    margin: 30px auto 0 auto; 
    background: #cccccc;
}

/*

LEVEL: Professional

*/

.oufunnyequations_level1w_display_formula3
{
    margin: 25px auto 0px auto; 
    width: 498px; 
    color: #ffffff; 
    overflow: hidden; 
    text-align:center; 
    font-size: 60px;
}

.oufunnyequations_level1w_display_formula3_padding_a
{
    padding: 0px 10px;
}

.oufunnyequations_level1w_display_formula3_padding_b
{
    padding: 0px 5px;
}

.oufunnyequations_level1w_display_answer3
{
    text-align:center; 
    width: 480px; 
    margin: 30px auto 0 auto; 
    background: #cccccc;
}


@media only screen and (max-width: 520px) 
{
    .oufunnyequations_window
    {
        width: 100% !important;
        min-height: 400px !important;
    }
    
    .oufunnyequations_window_black
    {
        width: 100% !important;
        min-height: 400px !important;
    }
    
    .oufunnyequations_screen_title
    {
        padding: 35px 10px 20px 10px !important; 
        font-size: 48px !important;
    }
    
    .oufunnyequations_level1w_help_content
    {
        margin: 0px !important; 
        width: 100% !important;
        padding: 2% 10% 0% 10% !important;
        font-size: 18px !important;
    }
    
    .oufunnyequations_level1w_help_close
    {
        padding: 15px 0px 0px 0px !important;
    }
    
    /*
    
    LEVEL: Beginner
    
    */
    
    .oufunnyequations_level1w_display_formlula
    {
        font-size: 64px !important;
        padding: 10px 0px 0px 0px !important;
    }
    
    .oufunnyequations_level1w_display_title
    {
        margin: 24px 0px 0px 0px !important;
        width: 100% !important;
    }
    
    .oufunnyequations_level1w_display_answer_window
    {
        width: 100% !important;
        font-size: 48px !important;
    }
    
    .oufunnyequations_level1w_display_timeout,
    .oufunnyequations_level1w_display_wrong,
    .oufunnyequations_level1w_display_right
    {
        width: 100% !important;
        font-size: 48px !important;
    }
    
    .oufunnyequations_level1w_display_footer
    {
        margin: 0px !important;
        padding: 55px 15px !important;
        width: 100% !important;
    }
    
    /*
    
    LEVEL: Intermediate
    
    */
    .oufunnyequations_level1w_display_formula2
    {
        margin: 0px !important; 
        width: 100%  !important;
        padding: 35px 0px 0px 0px !important;
        font-size: 40px;
    }

    .oufunnyequations_level1w_display_answer2
    {
        width: 100% !important;
        margin: 38px auto 0 auto !important;
    } 
    
    .oufunnyequations_level1w_display_answer_window
    {
        width: 100% !important;
        font-size: 40px !important;
    }
    
    /*
    
    LEVEL: Professional
    
    */
    
    .oufunnyequations_level1w_display_formula3
    {
        margin: 0px !important; 
        width: 100%  !important;
        padding: 35px 0px 0px 0px !important;
        font-size: 46px;
    }
    
    .oufunnyequations_level1w_display_answer3
    {
        width: 100% !important;
        margin: 40px auto 0 auto !important;
    }
    
    .oufunnyequations_level1w_display_answer_window
    {
        width: 100% !important;
        font-size: 40px !important;
    }
    
}