/* START -- UNIVERSAL STYLE RULES */
* 
{
    margin: 0px;
    padding: 0px;
}
/* END -- UNIVERSAL STYLE RULES */

body 
{
    background-image: url("img/wall.jpeg");
    background-repeat: no-repeat;
    background-size: cover;
}
#wrapper 
{
    width: 1200px;
    height: 650px;
    margin: 20px auto;
}
.logo
{
    margin: 10px 0px 0px 50px;
    height: 100px;
    width: 100px;
}
#sidebar_nav
{
    width: 200px;
    background-color: white;
    height: 650px;
    float: left;
    border-right: white 3px solid;
}
nav a 
{
    text-decoration: none; 
    color: black;
}
nav a:hover
{
    color: white;
}
nav ul 
{
    list-style-type: none;
    font-size: 15px;
    font-family: Cambria, Cochin, Georgia, Times, Times New Roman, serif;
    text-transform: uppercase;
}
nav li
{
    padding: 10px;
}
/* START -- BUTTON STYLES */
.button 
{
    display: inline-block;
    padding: 8px 16px;
    border-radius: 3px;
    background-color: white;
    border: 1px solid black;
    width: 150px;
}
.button:hover
{
    padding: 8px 16px;
    border-radius: 3px;
    background-color: lightslategrey;
    box-shadow: 0px 12px 16px 0 rgba(0,0,0,0.24), 0px 17px 50px 0px rgba(0,0,0,0.19);
}
/* END -- BUTTON STYLE */

#landing /* main tag for index.html */
{
    background-image: url("img/scott-goodwill3.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    height: 650px;
    width: 997px;
    float: right;
}

#appoint /* main tag for appointment.html */
{
    background-color: black;
    color: white;
    height: 650px;
    width: 997px;
    float: right;
    text-align: center;
}

#gal /*main tag for gallery.html */
{
    background-color: black;
    color: white;
    height: 650px;
    width: 997px;
    float: right;
    text-align: center;
}

#promo /*main tag for promotionals.html */
{
    background-image: url("img/christmas.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    color: white;
    height: 650px;
    width: 997px;
    float: right;
    text-align: center;
}

#about /* main tag for about.html */
{
    background-image: url("img/seattle.jpg");
    background-size: 997px 650px; /*width is first value, height is second value */
    background-repeat: no-repeat;
    color: white;
    height: 650px;
    width: 997px;
    float: right;
    text-align: center;
}
#about p 
{
    color: white;
    margin: 0px 40px 0px 500px;
    font-family: "News Cycle";
    font-size: 20px;
    font-weight: bold;
    background-color: black;
    padding: 20px 20px 0px 20px;
}
#gal p 
{
    font-size: 20px; 
    font-family: "News Cycle"; 
    padding: 5px;
    margin: 0px 0px 10px 0px; /* REMINDER: top, right, bottom, left */
    background-color: rgba(255, 0, 0, 0.459);
    color: white;
}

#appoint p
{
    font-size: 20px;
}

#booking_header 
{
    padding: 20px;
    color: black;
    background-color: white;
    text-transform: uppercase;
    font-family: "Trade Winds";
    font-size: 35px;
    letter-spacing: 3px;
}

#gallery_header 
{
    padding: 20px;
    color: black;
    background-color: white;
    text-transform: uppercase;
    font-family: "Trade Winds";
    font-size: 35px;
    letter-spacing: 3px;
}
#promo_header
{
    padding: 20px;
    color: black;
    background-color: white;
    text-transform: uppercase;
    font-family: "Trade Winds";
    font-size: 35px;
    letter-spacing: 3px;
}

#promo img 
{
    border: dashed 5px black;
    padding: 5px;
}

.contact 
{
    color: lightskyblue;
    
}
.coupon_download
{
    color: maroon;
    font-weight: bold;
}
/* START -- FORM STYLE RULES */
input[type=text], select 
{
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0px;
    display: inline-block;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}

input[type=date], select 
{
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0px;
    display: inline-block;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}

input[type=submit] 
{
    width: 50%;
    background-color: maroon;
    color: white;
    padding: 14px 20px;
    margin: 8px 0;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    text-transform: uppercase;
    font-weight: bold;
}

input[type=submit]:hover 
{
    background-color: brown;
}

#form 
{
    padding: 20px 100px;
}

label{text-transform: uppercase;}
/* END -- FORM STYLE RULES */

/* START -- FOOTER STYLE RULES */
#footer 
{
    clear: both; /* nav is floated left, main is floated right, footer needs to be cleared */
    color: white;
    background-color: black;
    text-align: center;
    height: 20px;
    border-top: white 1px solid;
}
/* END -- FOOTER STYLE RULES */

/* START -- GALLERY STYLE RULES */
div .gallery 
{
    margin: 5px;
    display: inline;
}

div .gallery img 
{
    height: 200px;
    width: 120px;
    padding: 5px;
    border: solid 2px rgba(255, 255, 255, 0.425);
}
/* END -- GALLERY STYLE RULES */