html {
    margin: 0;
    padding: 0;
    background-color: #003333;
}
body {
    width: 80%;
    max-width: 800px;
    margin: 0 auto;
    background-color: #003333;
    font: 100% Verdana, Arial, sans-serif;
}
p {
    color: #ff9900;
    font-size: 1em;
    text-align: center;
}
article {
    color: #ff9900;
    width: 80%;
    min-width: 320px;
    margin: 0 auto;
    background-color: rgba(0,83,83, 0.5);
    padding: 10px;
    border-radius: 8px;
    margin-bottom: 15px;
    box-shadow: inset 0.3em 0.3em 0.6em rgba(256,256,256,0.5),
                inset -0.3em -0.3em 0.6em rgba(0,0,0,0.5);
}
section {
    width:80%;
    margin-left: auto;
    margin-right: auto;
    padding:10px;
}
aside {
    margin-left: auto;
    margin-right: auto;
}
h1 { 
    background-color: #003333;
    background-repeat: no-repeat;
    color: #666666;    
    margin-left: auto;
    margin-right: auto;
    line-height: 150%;
    text-align: center;
    padding-top: 10px;
}
h3 { 
    color: #ffcc33;
    font-size: 1.12em;
    line-height: 120%;
    text-align: center;
}
li { 
    color: #ff9900;
}
footer  { 
    background-color:#000000;
    clear: both;
    color: #ffcc33;
    line-height: 150%;
    font-size: .60em;
    font-style: italic; 
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    width: 80%;
    border-radius: 5px 5px 5px 5px;
}
.menu {
    margin-left: auto;
    margin-right: auto;
    text-align: left;
    width: 70%;
}
.welcome {
    margin-left: auto;
    margin-right: auto;
    width: 60%;
    text-align: center;
}
#efino  {
    width: 240px;
    height: 25px;
    background-image:url(images/efino3a.gif);
    background-repeat: no-repeat;
    border: 0;
    border-radius: 5px, 5px, 5px, 5px;
}
#facebook {
    width: 72px;
    height: 72px;
    background-image:url(images/fbook.png);
    background-repeat: no-repeat;
    border: 0;
    border-radius: 5px 5px 5px 5px;
}
#front { 
    width: 153px;
    height: 120px;
    background-image:url(images/front.jpg);
    background-repeat: no-repeat;
    border: 0;
    border-radius: 5px 5px 5px 5px;
}
#inside {
    width: 162px;
    height: 120px;
    background-image: url(images/inside.jpg);
    background-repeat: no-repeat;
    border: 0;
    border-radius: 5px 5px 5px 5px;
}
#map { 
    width: 296px;
    height: 216px;
    background-image:url(images/maptoespressofino.gif);
    background-repeat: no-repeat;
    border: 0;
    border-radius: 5px 5px 5px 5px;
}
#reverselogo {
    width: 96px;
    height: 120px;
    background-image:url(images/reverselogo1.jpg);
    background-repeat: no-repeat;
    border: 0;
    border-radius: 5px 5px 5px 5px;
}
#yelp {
    width: 97px;
    height: 54px;
    background-image:url(images/yelp.png);
    background-repeat: no-repeat;
    border: 0;
    border-radius: 5px 5px 5px 5px;
}
#yelp2 {
    width: 67px;
    height: 34px;
    background-image:url(images/yelp2.png);
    background-repeat: no-repeat;
    border: 0;
    border-radius: 5px 5px 5px 5px;
}
@media (min-width: 60em) and (max-width: 200em){
    html{
        background-position: 0px 5px, 10px 0px, 0px 10px, 10px 5px, 0% 0%, 0% 0%;
        background-image: linear-gradient(27deg, rgb(0, 51, 51) 5px, transparent 5px), linear-gradient(207deg, rgb(0, 51, 51) 5px, transparent 5px), linear-gradient(27deg, rgb(14, 65, 65) 5px, transparent 5px), linear-gradient(207deg, rgb(14, 65, 65) 5px, transparent 5px), linear-gradient(90deg, rgb(6, 57, 57) 10px, transparent 10px), linear-gradient(rgb(8, 59, 59) 25%, rgb(5, 56, 56) 25%, rgb(5, 56, 56) 50%, transparent 50%, transparent 75%, rgb(16, 67, 67) 75%, rgb(16, 67, 67));
        background-attachment: scroll, scroll, scroll, scroll, scroll, scroll;
        background-repeat: repeat, repeat, repeat, repeat, repeat, repeat;
        background-size: 20px 20px;
        background-origin: padding-box, padding-box, padding-box, padding-box, padding-box, padding-box;
        background-clip: border-box, border-box, border-box, border-box, border-box, border-box;
        background-color: rgb(0, 49, 49);
    }
    nav {
        margin-left: auto;
        margin-right: auto;
        text-align: center;
        background-color: #000000;
        color: #666666;
        line-height: 120%;
        font-size: 1.12em;
        width: 80%;
        max-width: 680px;
        padding: 5px 0px 5px 0px;
        border-radius: 7px 7px 7px 7px;
    }
    #art {
        width: 596px;
        height: 288px;
        background-image:url(images/pour4.jpg);
        background-repeat: no-repeat;
        border: 0;
        border-radius: 5px 5px 5px 5px;
    }
    #logo {
        width: 548px;
        height: 180px;
        background-color: #000000;
        background-image:url(images/reversebanner2.jpg);
        background-repeat: no-repeat;
        border: 0;
        border-radius: 5px 5px 5px 5px;
    }
}
@media (min-width: 42em) and (max-width: 60em) {
    html{
        background-color: #003333;
    }
    body {
        min-width: 48em;
    }
    nav {
        margin-left: auto;
        margin-right: auto;
        text-align: center;
        background-color: #000000;
        color: #666666;
        line-height: 120%;
        font-size: 1.12em;
        width: 80%;
        max-width: 680px;
        padding: 5px 0px 5px 0px;
        border-radius: 7px 7px 7px 7px;
    }

  #art {
         width: 440px;
         height: 173px;
         background-image:url(images/pour5a.jpg);
         background-repeat: no-repeat;
         border: 0;
         border-radius: 5px 5px 5px 5px;
     }
    #epsilon {
        width:100%;
    }
    #logo {
        width: 548px;
        height: 180px;
        background-color: #000000;
        background-image:url(images/reversebanner2.jpg);
        background-repeat: no-repeat;
        border: 0;
        border-radius: 5px 5px 5px 5px;
    }
}
@media (max-width: 42em) {
    html {
        background-color: #003333;
    }
    body {
        width: 100%;
        min-width: 22em;
    }
    nav {
        margin-left: auto;
        margin-right: auto;
        text-align: center;
        background-color: #000000;
        color: #666666;
        line-height: 120%;
        font-size: 1.12em;
        width: 80%;
        min-width: 320px;
        padding: 5px 10px 5px 10px;
        border-radius: 7px 7px 7px 7px;
    }
    article {
        margin-left: auto;
        margin-right: auto;
        width: 90%;
        padding: 5px 0px 5px 0px;
    }
    .welcome {
        width: 85%;
    }
    #epsilon {
        display: none;
    }       
    #logo {
        width: 375px;
        height: 147px;
        background-color: #003333;
        background-image: url(images/pour5abc.gif);
        background-repeat: no-repeat;
        border: 0;
        border-radius: 5px 5px 5px 5px;
    }
}