/*
    font-family: 'Redressed', cursive;
font-family: 'Roboto', sans-serif;
*/

body
{
    font-family:'roboto', sans-serif;
    font-size: 14px;
    margin: 0 auto;
    font-family: 'Roboto', sans-serif;
}

#container
{
    width: auto;
}

#logo_div
{
    width:10%;
    display:inline-block;
    float: left;
}

#menu_wrapper
{
    width:90%;
    display:inline-block;
    float: right;
}


img
{
    width:100%;
}
/* ================ Form ===================== */
form
{
    width: 50%;
    margin:5px auto;
}

.form_element
{
    width: 90%;
    margin: 5px auto;
    padding: 5px;
}

.form_button
{
    padding:20px;
    background-color:darkslategrey;
    color: azure;
    float:none;
}

legend
{
    font-family: 'Redressed', cursive;
    font-size: 250%;
}
/* ================ Divs ===================== */

.menu
{
    display: flex;
    margin: 0 auto;
    text-align: center;
}
.menu a
{
    padding: 1px 5px;
    margin: 0;
    display:inline-block;
    font-family: 'Redressed', cursive;
    text-align: center;
    text-decoration: none;
    font-size: 150%;
    
}
#container
{
    width:auto;
}

#content
{
    width:90%;
    margin:0 auto;
    padding: 50px;
}

#quarter
{
    width:25%;
    float:left;
    display:inline-block;
}
#half
{
    width:50%;
    float:left;
    display:inline-block;
}

#ten_columns
{
    width:10%;
    float:left;
    display:inline-block;
}
#twenty_columns
{
    width:5%;
    float:left;
    display:inline-block;
}
#quarter
{
    width:25%;
    float:left;
    display:inline-block;
}
#three_quarter
{
    width:75%;
    float:left;
    display:inline-block;
}

#clear
{
    clear: both;
}

#view_display
{
    width:20%;
    float:left;
}

#middle_div
{
    width:50%;
    margin: 0 auto;
}



/* ===========================  UL and LI (Unordered List)  =================== */




/*  ===========  MEDIA QUERY    ==========*/
@media screen and (max-width: 540px)
{
    body
		{
			font-size: 10px;
		}
    #quarter
        {
            width:50%;
        }
    #half
        {
            width:100%;
        }

    #ten_columns
        {
            width:50%;
        }
    #twenty_columns
        {
            width:50%;
        }
    #quarter
        {
            width:50%;
        }
    #three_quarter
        {
            width:100%;
            float:left;
        }
   
}

@media screen and (max-width: 460px)
{
    #container
    {
        width:460pxl;
    }
}

@media screen and (max-width: 350px)
{
	body
		{
			font-size: 6px;
		}
	
	
}


/* ================ Divs ===================== */