html{
    width: 1200px;
    margin: 0 auto;
    background: black ; /* Fills the page */
    position: relative; /* Fix for absolute positioning */
}
body{
    font-size: 12px ;
    width: 90%;
    margin-left: auto ;
    margin-right: auto ;
    text-align: left;
}
h1{
    color: white ;
    font-family: Calibri, "Gill Sans", "Gill Sans MT", "Trebuchet MS", sans-serif ;
    font-size: 4em ;
    margin-top: 5px ;
    margin-bottom: 15px ;
    float: left ;
}
h2{
    color: white ;
    font-family: Calibri, "Gill Sans", "Gill Sans MT", "Trebuchet MS", sans-serif ;
    font-size: 2em ;
    margin-top: 0 ;
    float: left ;
}
ol{
    text-align: left ;
    margin: 0 0 0 0 ;
    padding: 0 0 0 25px ;
}
.bold{
    font-weight: bold ;
}
#main{
    margin-left: auto ;
    margin-right: auto ;
}
#login{
    float: right ;
    text-align: center ;
    margin-top: 0;
}
#login input{
    padding: 0 0 0 0 ;
    width: 200px;
    padding: 0 0 0 0 ;
    margin: 10px 0 0 0 ;
}
#main_header{
    background-color: black ;
    width: 90% ;
    height: 100px ;
    position: absolute;
    top: 0px ;
}
#title{
    width: 80% ;
    float: left ;
    height: 60px;
}
#sub_title{
    width: 80%;
    float: left;
}
#directions{
    background: yellow ;
    color: black ;
    font-family:"Century Gothic", Calibri, sans-serif ;
    font-size: 1.2em ;
    line-height: 1.5em ;
    float: right ;
    border: 10px white solid ;
    padding: 0 10px 10px 10px ;
    width: 125px ;
    height: 273px ;
    text-align: center ;
}
#image_div{
    float: left ;
    vertical-align: middle ;
    width: 90% ;
    height: 220px ;
    position: absolute ;
    top: 105px ;
}
img{
    float: left;
    height: 100%;
    width: auto;
    margin-right: 7px;
}
img.left_margin{
    margin-left: 9px ;
}
img.no_margin{
    margin: 0px ;
    float: right ;
}
#main_content{
    width: 90% ;
    position: absolute ;
    top: 393px ;
    height: 313px ;
    color: white ;
    background: black ;
}
#options{
    width: 27% ;
    float: left ;
    height: 100% ;
    margin-right: 15px ;
    font-weight: bold ;
}
#ordering{
    width: 262px ;
    height: 200px ;
    float: right ;
    border:thick white solid ;
    padding: 5px ;
    font-size: 1.2em ;
    font-weight: bold ;
    line-height: 1.5em ;
    font-family: Calibri, "Gill Sans", "Gill Sans MT", "Trebuchet MS", sans-serif ;
    color: white ;
    text-align: center ;
}
#explanation{
    width: 560px ;
    float: left ;
    height: 275px ;
    padding: 15px ;
    text-align: center ;
    font-style: oblique ;
    line-height: 1.7em ;
    font-family:"Century Gothic", Calibri, sans-serif ;
    font-size: 16px ;
}
.nav{
    font-weight: bold ;
    width: 100% ;
    height: 50px ;
    margin: 0 0 15px 0 ;
    border:thick white outset ;
    color: white ;
    background-color: black ;
    font-size: 12px;
}
.nav:hover{
    color: silver ;
}
.call_text{
    font-style: normal ;
    text-transform: uppercase ;
    line-height: 1.5em ;
}
.phone_number{
    font-style: normal ;
    font-weight: bold ;
    font-size: 1.5em ;
    line-height: 1.5em ;
}
#menu_div{
    position: absolute ;
    top: 337px ;
    width: 90% ;
}
#menu{
    padding: 0 ;
    margin: 0 ;
    width: 100% ;
    list-style:none;
    height:43px;

    /* Rounded Corners */
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;

    /* Background color and gradients */
    background: #A5CA4A;

    /* Borders */
    border: 1px solid #002232;

    -moz-box-shadow:inset 0px 0px 1px #edf9ff;
    -webkit-box-shadow:inset 0px 0px 1px #edf9ff;
    box-shadow:inset 0px 0px 1px #edf9ff;
}
#menu li {
    float:left;
    text-align:center;
    position:relative;
    padding: 4px 10px 4px 10px;
    margin-right:20px;
    margin-top:7px;
    border:none;
}
#menu li:first-child{
    margin-left: 28px ;
}
#menu_div li:hover {
    border: 1px solid #777777;
    padding: 4px 9px 4px 9px;

    /* Background color and gradients */
    background: #F4F4F4;

    /* Rounded corners */
    -moz-border-radius: 5px 5px 5px 5px;
    -webkit-border-radius: 5px 5px 5px 5px;
    border-radius: 5px 5px 5px 5px;
}
#menu_div li a {
    font-family:Arial, Helvetica, sans-serif;
    font-size:14px;
    color: black ;
    display:block;
    outline:0;
    text-decoration:none;
}
#menu li:hover a {
    color:#161616;
}
#footer {
    position: absolute ;
    top: 740px ;
    width: 90% ;
    height: 80px ;
    color: gray ;
    font-size: .9em ;
    text-align: center ;
    line-height: 13px ;
}
.user_name_blur {
    color: #ccc ;
}
.user_name_focus {
    color: black ;
}

/*Modal Login*/
/* Bordered form */
form {
    border: 3px solid #f1f1f1;
}

/* Full-width inputs */
input[type=text], input[type=password] {
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #ccc;
    box-sizing: border-box;
}

/* Set a style for all buttons */
button {
    background-color: #A5CA4A;
    color: white;
    font-size: 16px;
    padding: 14px 20px;
    margin: 26px 0;
    border: none;
    cursor: pointer;
    width: 100%;
}

/* Add a hover effect for buttons */
button:hover {
    opacity: 0.8;
}

.login_button {
    background-color: #A5CA4A;
    color: white;
    font-size: 16px;
    padding: 14px 20px;
    margin: 10px 0 20px 0;
    border: none;
    cursor: pointer;
    width: 100%;
}

/* Extra style for the cancel button (red) */
.cancelbtn {
    font-size: 16px;
    padding: 14px 20px;
    margin: 0 0;
    border: none;
    cursor: pointer;
    width: 100%;
    background-color: #f44336;
}

/* Add padding to containers */
.modal_container {
    padding: 16px;
}

/* Change styles for span and cancel button on extra small screens */
@media screen and (max-width: 300px) {
    span.psw {
        display: block;
        float: none;
    }
    .cancelbtn {
        width: 100%;
    }
}

/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
    padding-top: 60px;
}

/* Modal Content/Box */
.modal-content {
    background-color: #fefefe;
    margin: 5px auto; /* 15% from the top and centered */
    border: 1px solid #888;
    width: 200px; /* Could be more or less, depending on screen size */
}

.modal-content label {
    font-family: Calibri, "Gill Sans", "Gill Sans MT", "Trebuchet MS", sans-serif ;
}

/* The Close Button */
.close {
    /* Position it in the top right corner outside of the modal */
    position: absolute;
    right: 25px;
    top: 0;
    color: #000;
    font-size: 35px;
    font-weight: bold;
}

/* Close button on hover */
.close:hover,
.close:focus {
    color: red;
    cursor: pointer;
}