@charset "utf-8";


/*Selector { declaration property: declaration value;*/
*{box-sizing: border-box;}
body{
    background-color: #3F2860;
    color: #40407A;
    font-family:Verdana, Geneva, Tahoma, sans-serif ;
}
#wrapper{
    width: 80%;
    margin-right: auto;
    margin-left: auto;
    background-color: #F5f5f5;
    min-width: 1200px;
    max-width: 1480px;
}
header{
    background-color: #80CBC4;
    background-image: url("images/lilyheader.jpg");
    height: 150px;
    background-repeat: no-repeat;
    background-position: right;
    text-align: center;
    
}

header a {text-decoration: none;}
header a:link{color:#40407A;}
header a:visited{color:#40407A;}
header a:hover{color: #FFFFFF;}
h1{
    padding-top: 50px;
    padding-left: 2em; 
    line-height: 200%;
}

nav{
     font-weight: bold; padding:1em; width: 160px; 
    float:left;}

nav a:link{color: #3F2860;}
nav a:visited{color: #497777;}
nav a:hover{color:#A26100; border: 3px inset #333333;}

nav ul{padding-left:0px ; list-style-type: none;}
/*Descendant selector - specify an element within the context of it's container (parent) element*/
nav a{
    text-decoration: none; display: block; text-align: center;border:3px outset gray; padding:1em; margin-bottom: 1em;

}

.studio {
    font-style: italic;
}
main{
    padding: 1em 2em 0em 2em; margin-left: 170px;
}
.floatleft{
    float: left; margin-right: 4em;margin-bottom: 1em;}
.clear{clear:both;}

#hero{
    padding : 1em 0;
}
footer{
    background-color: #80CBC4; font-size: .60em; font-style:italic;text-align: center;
}

#hero1{ margin-top: 30px;
 padding : 1em 0; }
.onethird{float:left; width: 33%; padding-left: 2em; padding-right: 2em;
}

.onehalf{float:left; width: 50%; padding-left: 2em;padding-right: 2em;
}
#hero1 img{ max-width:100%; height:auto; display:block; margin:0 auto; }