/*
Assignment Name: Path of Ligh Yoga Studio Classes External CSS - Module 8 (Ch.11)
File Name: yoga.css
Date: 02/26/2020
Programmer: Fredy Chavez
*/

body {       
        background-color: #3F2860; 
        color: #3f2860; 
        font-family: Verdana, Arial, sans-serif; 
}

header {     
        background-color: #9BC1C2; 
        background-image: url('../images/lilyheader.jpg');
        background-repeat: no-repeat;
        height: 150px;
        background-position: right;  
}

h1 {         
        padding-top: 50px; 
        padding-left: 2em; 
}

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

.nav a {     
        text-decoration: none;
        display: block; 
        text-align: center; 
        font-weight: bold; 
        border: 3px outset #CCCCCC; 
        padding: 1em; 
        margin-bottom: 1em; 
}

nav a:link {
        color: #3F2860; 
}

nav a:visited {
        color: #497777; 
}

nav a:hover {
        color: #A26100; 
        border: 3px inset #333333; 
}

nav ul {
        list-style-type: none; 
        padding: 0px; 
}

.studio {    
        font-style: italic; 
}

.footer {    
        background-color: #9BC1C2;
        font-size: .60em; 
        font-style: italic;
        text-align: center;
        padding: 1em; 
}

#wrapper {   
        width: 80%; 
        margin-right: auto; 
        margin-left: auto;
        background-color: #F5F5F5; 
        min-width: 1200px; 
        max-width: 1480px; 
}

main {      
        padding-left: 2em; 
        padding-right: 2em; 
        padding-top: 1em; 
        margin-left: 170px;   
}

* {
        box-sizing: border-box; 
}

.floatleft {
        float: left; 
        margin-right: 4em; 
}

.clear {
        clear: both; 
}

header, nav, main, footer {
        display: block; 
}

#mobile {
        display: none; 
}

#desktop {
        display: inline; 
}

@media only screen and (max-width: 1024px) {
    
    body {
        margin: 0; 
        padding: 0; 
    }
    
    #wrapper {
        width: 100%; 
        min-width: 0; 
        margin: 0; 
        padding: 0; 
    }
    
    header {
        padding-top: 1px; 
    }
    
    h1 {
        padding-top: 1em; 
    }
    
    nav {
        float: none; 
        width: auto; 
        padding-left: 2em; 
    }
    
    nav a {
        padding: 0.2em; 
        margin-left: 0.3em; 
        float: left; 
        width: 23%;
    }
    
    main {
        padding: 2.5em 1em; 
        margin: 0; 
        font-size: 90%;
        float: none;
        clear: both;
    }
    
    #hero {
        width: 100%; 
        height: auto; 
    }
    
    h2, h3, p, dl {
        padding-left: 2em; 
        padding-right: 2em; 
    }
    
    main ul {
        margin-left: 2em; 
    }
    
    .floatleft {
        margin-left: 2em; 
        margin-bottom: 1em; 
    }
    
    .clear {
        padding-left: 2em; 
    }
    
    }   
    
@media only all and (max-width: 768px) {
    
    h1 {
        font-size: 2em; 
        padding-top: 0.25em; 
        padding-left: 1.5em; 
        width: 85%; 
        text-align: center; 
    }
    
    nav a {
        padding: 0.5em; 
        width: 45%; 
        float: left; 
        min-width: 6em; 
        margin-left: 0.5em; 
    }
    
    main {
        padding-top: 0; 
    }
    
    .floatleft {
        float: none; 
        display: none; 
    }
    
    #hero {
        display: none; 
    }
    
    .footer {
        padding: 0.5em; 
        margin: 0; 
    }
    
    #mobile {
        display: inline; 
    }
    
    #desktop {
        display: none; 
    } 
    
    }

table {
        margin: auto;
        border: 1px #3F2860;
        border-collapse: collapse;
        width: 60%;
        margin-bottom: 1em;
}

td, th {
        padding: 5px; 
        border: 1px solid #3F2860;
}

tr:nth-of-type(even) {
        background-color: #9BC1C2;
}

caption {
        margin: 1em; 
        font-weight: bold;
        font-size: 120%; 
}

label {
        float: left;
        display: block; 
        text-align: right; 
        font-weight: bold; 
        width: 10em;
        padding-right: 1em;
}

input, textarea {
        display: block; 
        margin-bottom: 2em; 
}

#mySubmit {
        margin-left: 12em; 
}

form {
        padding: 3em; 
}

audio {
        display: block;
        margin: 1em; 
}