/* Styles for the Metrolpolitan Opera 2 page website */

* {
    padding:0;
    margin:0;
}

body {
    background:tan;
    font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    /* wn you have a two word property, it must be separated with a hyphen */
    background-image:url(../images/notes.png);
    /* png is a transparent image */
    background-attachment: fixed;
}

div#wrapper {
    width:940px;
    background:beige;
    padding: 20px;
    margin:20px auto 20px auto;
    /* centers the wrapper */
    overflow:hidden;
}

header {
    /* height:200px; */
    background:#fff;
    margin-bottom:20px;
}

footer {
    height:50px;
    background:tan;
    clear:both;
    /* when you clear an element, you cannot add space aobve that element with a margin-top. You must use margin-bottom on the elemnent that you had cleared!! */
    font-size:.9em;
}

footer ul {
    margin-left:30px;
}

footer a {
    color:brown;
}

footer li {
    list-style:none;
    float:left;
    margin-right:30px;
    /* vertical center */
    line-height:50px;
    color:brown;
}

a {
    color:brown;
}


img.right {
    float:right;
    margin-left:30px;
    margin-bottom:10px;
}

img.left {
    float:left;
    margin-right:30px;
    margin-bottom:20px;
}

.center {
    margin:20px auto;
    /* center */
    display:block;
    /* we must change the inline image to a block level image */
    text-align:center;
}



h1, h2 {
    margin-bottom:8px;
    font-family:Georgia, 'Times New Roman', Times, serif;
    color:brown;
}
h1 {
    font-size:2.5em;
}

h2 {
    font-size:1.8em;
}

p {
    margin-bottom:20px;
    line-height:1.4;
}