/*
* style.css
*/

#body {
    background-color: white;
    font-size: 100%;
}
h1 {
    font-family: "Arial", Sans-serif;
}

#page { 
    margin: 1%; 
}

.header img {       /* Using a class selector, image style */
    width: 100%;
    float: left;
    margin-bottom: 15px;
}
.header h1 {        /* Using a class selector, h1 style */
    text-align: center;
    margin-left: 120px;
    padding: 30px;
    background-color: lightsteelblue;
    border: 1px solid black;
}

#nav {
    width: 100%;
    display: inline-block;
    text-align:left;
    background-color: lightblue;
}
#nav ul {    /* Unordered list */
    margin:0;
    padding:0;
}
#nav ul li {  /* Unordered list list item */
    display: inline-block;
}
#nav ul li a {  /* Unordered list list item link */
    padding-left: 25px;
    background: lightblue;
    color: black;
    text-decoration:none;
}
#nav ul li a:hover {
    background-color: lightgreen;
}
        
#section {
    padding: 1% 2%;
}

.about img {       /* Using a class selector, image style */
    width: 100%;
    float: left;
    margin-top: 10px;
    margin-right: 20px;
}
.about h2 {        /* Using a class selector, h2 style */
    text-align: left;
    padding-top:10px;
}
.about p {        /* Using a class selector, p style */
    text-align: left;
    margin-left: 2px;
}

div.gal {
    margin: 5px;
    border: 1px solid black;
    float: left;
    width: 250px;
    height: 320px;
}
div.gal img {
    width: 100%;
    height: auto;
}

div.gal_tall {
    margin: 5px;
    border: 1px solid black;
    float: left;
    width: 250px;
    height: 500px;
}
div.gal_tall img {
    width: 100%;
    height: auto;
}


div.desc {
    padding: 10px;
    text-align: center;
}

div.why {
    padding: 5px;
    text-align: left;
    font-size:80%;
}

p.contact {         /* Using a class selector specific to paragrah */
    margin: 20px 0px 5px 30px; 
    font-family: "Courier", Sans-serif;
    font-size: 85%;
}

#footer {
    clear: both;
    width: 100%;
    text-align:center;
    background-color:lightblue;
    color:black;
}

/*  Not used yet */
#aside {
    margin: 30px 0;
    background: white;
    padding: 20px;
    clear: both;
}

#article {
    margin: 30px 0;
    background: white;
    padding: 20px;
    clear: both;
}