html
{
    height: 100%;
}

body
{
    margin: 0px;
    height: 100%;
    background-color: #ededed;
}

#container-body
{
    position: relative;
    min-height: 100%;
}

#container-main
{
    width: 1024px;
    margin: 0 auto;
    position: relative;
    min-height: 100%;
    background-color: #fff;
}


#header-back
{
    background-color: #ff9933;
    height: 265px;
}



#header-nav
{
    background-image: url('../img/header-bite.gif');
    width: 1024px;
    height: 39px;
    position: absolute;
}

#header-bite
{
     background-image: url('../img/bite-mark-orange.gif');
    width: 60px;
    height: 38px;
    position: absolute;
    left: 60px;
    top: 25px;
}

#confs-dude
{
    /* 
    width: 189px;
    height: 219px;*/
    position: absolute;
    Right: 300px;
    top: 46px;
    z-index: 1;
}

#tough-choice
{
    background-image: url('../img/tough-choice.png');
    width: 210px;
    height: 63px;
    position: absolute;
    left: 180px;
    top: 170px;
    
}

#well-not-anymore
{
    background-image: url('../img/well-not-anymore.png');
    width: 114px;
    height: 49px;
    position: absolute;
    left: 740px;
    top: 160px;
    
}

#dont-know-what
{
    background-image: url('../img/dont-know-what-to-eat.png');
    width: 510px;
    height: 40px;
    position: absolute;
    left: 40px;
    top: 70px;
}


#bubble-taco
{
    background-image: url('../img/bubble-taco.gif');
    width: 136px;
    height: 87px;
    position: absolute;
    right: 240px;
    top: 45px;
    z-index: 2;
}

#bubble-pizza
{
    background-image: url('../img/bubble-pizza.gif');
    width: 119px;
    height: 99px;
    position: absolute;
    left: 420px;
    top: 135px;
}

#logo-header
{
    width: 93px;
    height: 18px;
    position: absolute;
    left: 40px;
    top: 7px;
}

#home-button-top
{
    position: absolute;
    width: 48px;
    height: 17px;
    right: 120px;
    top: 10px;
}

#about-button-top
{
    position: absolute;
    width: 70px;
    height: 16px;
    right: 40px;
    top: 13px;
}

#container-bottom
{
    position: absolute;
    bottom: 0px;
    width: 100%;
    height: 60px; /* Height of the footer */
}

#footer-background
{
    background-image: url('../img/footer-background.gif');
    width: 1024px;
    height: 54px;
    padding-bottom: 0px;
    position: absolute;
    bottom: 0px;
}

#container-mid
{
    margin: 20px 10px 5px 10px;
}

    #container-mid:before,
    #container-mid:after
    {
        content: "";
        display: table;
    }

    #container-mid:after
    {
        clear: both;
    }


#body-header-text
{
    font-size: 20px;
    color: #ff9933;
    font-weight: 900;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

    #body-header-text em
    {
        font-size: 28px;
        color: #ff9933;
        font-weight: 900;
    }

#address-bar
{
    background-image: url('../img/address-bar-background.gif');
    width: 960px;
    height: 100px;
    margin-left: auto;
    margin-right: auto;
}

#center-body-text
{
    text-align: center;
    padding-bottom: 10px;
    
}


#address-bar-instructions-1
{
    color: #fff;
    /*position: relative;*/
    top: 5px;
    bottom: 5px;
    font-weight: 800;
    text-align: center;
    display: block
}

#address-bar-instructions
{
    color: #fff;
    position: relative;
    top: 3px;
    left: 15px;
    font-weight: 800;
}

span
{
    font-family: Arial;
}

#location-search-button
{
    background-image: url('../img/feed-me-button.gif');
    background-color: transparent; /* make the button transparent */
    background-repeat: no-repeat; /* make the background image appear only once */
    background-position: 0px 0px; /* equivalent to 'top left' */
    border: none; /* assuming we don't want any borders */
    cursor: pointer; /* make the cursor like hovering over an <a> element */
    height: 52px; /* make this the size of your image */
    width: 160px;
}

#fmb-container
{
    text-align: right;
    position: relative;
    top: 5px;
    right: 15px;
}

#location-id
{
    width: 250px;
    height: 22px;
    position: relative;
    top: 5px;
    left: 10px;
}

#container-location
{
    margin-left: auto;
    margin-right: auto;
    width: 960px;
}

    #container-location:before,
    #container-location:after
    {
        content: "";
        display: table;
    }

    #container-location:after
    {
        clear: both;
    }

#result-left
{
    float: left;
    width: 300px;
    display: inline-block;
}

#name-of-restaurant
{
    width: 300px;
    display: inline-block;
}

#review-info
{
    width: 300px;
    display: inline-block;
    min-height: 40px;
    padding-top: 10px;
}

#address-info
{
    width: 300px;
    display: inline-block;
    font-family: Arial;
    padding-top: 10px;
}

#container-result
{
}

    #container-result:before,
    #container-result:after
    {
        content: "";
        display: table;
    }

    #container-result:after
    {
        clear: both;
    }

.result-divider
{
    background-image: url('../img/location-result-divider.gif');
    width: 300px;
    height: 1px;
}

#result-right
{
    float: right;
    display: inline-block;
}

#map-info
{
}


#container-location-result
{
    display: none;
}

/* Begin of old site here*/

#biz-name
{
    font-size: 16px;
    font-weight: bold;
    min-height: 40px;
    padding-top: 10px;
    font-family: Arial;
}

    #biz-name a:link
    {
        color: #ff9933;
    }
    /* unvisited link */
    #biz-name a:visited
    {
        color: #ff9933;
    }
    /* visited link */
    #biz-name a:hover
    {
        color: #ff9933;
    }
    /* mouse over link */
    #biz-name a:active
    {
        color: #ff9933;
    }
/* selected link */


#biz-num-reviews
{
    display: inline-block;
    padding-top: 5px;
    font-family: Arial;
}


#quote
{
    margin-top: 10px;
    padding: 5px;
    font-style: italic;
    font-size: 14px;
    font-family: Arial;
}

#quote-source
{
    padding: 5px;
    margin-bottom: 0px;
    font-size: 16px;
    font-family: Arial;
}

#map-img
{
    margin: 0px auto;
    text-align: center;
    padding: 0px 0px;
}

#info-table
{
    border: 0px none;
    margin: 0px auto 10px;
    padding-bottom: 10px;
    text-align: center;
}

#yelp-logo
{
    padding-top: 20px;
    padding-left: 200px;
}

#biz-rating
{
    padding-top: 10px;
    float: right;
}

a img
{
    border: 0px;
}

#container-quote
{
    margin-bottom: 20px;
    margin-top:20px;
    background-color: #ffcc00;
    border-radius: 15px;

}

#quote-tip
{
    background-image: url('../img/quote-tip-down.gif');
    width: 26px;
    height: 13px;
    position: relative;
    bottom: -13px;
    left: 50px;
}

#sub-bottom
{
    margin: 0px auto;
    width: 50%;
}


#container-about-page
{
    margin-left: auto;
    margin-right: auto;
    width: 960px

}

#container-about-page h2 
{
    color: #555
}

#about-us
{
    margin:0 5px 30px 5px;
}


#comming-soon
{
    margin:10px 5px 30px 5px;
}

#contact-us
{
      margin:10px 5px 30px 5px;
}


#misc-msg
{
    display:block;
    text-align:center;
    font-size: 30px;
    font-weight:bolder;
    min-height: 40px;
    padding-top: 60px;
    font-family: Arial;
    color: #ff9933;
}



/* Ajax modal wait */
/* Start by setting display:none to make this hidden.
   Then we position it in relation to the viewport window
   with position:fixed. Width, height, top and left speak
   speak for themselves. Background we set to 80% white with
   our animation centered, and no-repeating */
.modal {
    display:    none;
    position:   fixed;
    z-index:    1000;
    top:        0;
    left:       0;
    height:     100%;
    width:      100%;
    background: rgba( 255, 255, 255, .8 ) 
                url('http://i.stack.imgur.com/FhHRx.gif') 
                50% 50% 
                no-repeat;
}

/* When the body has the loading class, we turn
   the scrollbar off with overflow:hidden */
body.loading {
    overflow: hidden;   
}

/* Anytime the body has the loading class, our
   modal element will be visible */
body.loading.modal {
    display: block;
}