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


*{
    padding:0;
    margin:0;
}

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

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

header{
    /* height:200px; used as placeholder to see header area them removed to show only the logo */
    /* background:#fff; */
    margin-bottom:20px;
    background-color: white;
}

footer{
    height:50px;
    line-height:50px;
    background: tan;
    clear:both;
    font-size:.9em;

    /* when you clear an element, you cannot add space above that element with a margin-top. You must use margin-bottom on the element that it had cleared!!!1*/
    /* center footer text by adding line-height*/
}

    footer ul{
        margin-left:20px;
    }

    footer li{
        list-style-type: none;
        float: left;
        margin-right: 30px;
        color: brown;  
     }
     
     a{
        color: brown;
     }
img.right {
    float:right;
    margin-left:30px;
    margin-bottom:10px;
}

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

.center {
    /* NO FLOAT CENTE!!!!*/
    margin: 20px auto;
    display: block;

    /* use the display tag to center image. A div is a block level element. Images are inline elements, display as block to have image act as block element*/
    text-align: center;
}

h1{
    font-size:2.5em;
}

h2{
    font-size:1.8em;
}

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

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