/*
Assignment Name: Final Project CSS
File Name: final.css
Date: 03/14/2020
Programmer: Fredy Chavez
*/

body {
        background-image: url(../images/portland_historical_tours.jpg);
        background-size: cover; 
        background-repeat: no-repeat;
        color: #00023b; 
        font-family: Verdana, Georgia, sans-serif;
}

header {
        background-color: #a3bcc1;
        height: 150px; 
        text-align: center;
}


#logo {
        background-color: #a3bcc1;
        height: 150px;
        padding: 1em;
        float: left;
}

h1 {
        color: #00023b;
        text-shadow: 2px 2px #ABABAB;
        padding-top: 1em;
        display: inline-block;
}

h2 {
        font-size: 1.3em;
}

* {
        box-sizing: border-box;
}

nav {
        font-weight: bold; 
        float: left;
        width: 150px;
}

nav ul {
        list-style-type: none; 
        padding: 0px;
        margin-top: 2px;
        position: relative;
}

nav li a {
        text-decoration: none; 
        text-align: center; 
        display: block;
        background-color: #a3bcc1;
        border: 3px outset #CCCCCC;
        padding: 0.5em;
        margin: 0px; 
}

nav a:link {
        color: #00023b; 
}

nav a:visited {
        color: #2c4e06; 
}

nav a:hover {
        color: #4c2e01; 
        background-color: #ABABAB; 
}

nav ul li ul {
        display: none;
}

nav ul li:hover ul {
        display: block;
}

#container {      
        min-width: 700px;
        max-width: 1024px; 
        background-color:#ABABAB;
        color: #00023b;
        margin-right: auto;
        margin-left: auto;
        box-shadow: 5px 5px 5px #000000; 
}

main {  
        background-color: #FFFFFF; 
        padding: 0.3em 2em;
        margin-left: 150px;
}

.footer {        
        background-color: #FFFFFF; 
        font-size: .70em; 
        font-style: italic; 
        text-align: center;
        padding: 1em; 
        margin-left: 150px;
}

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

@media only screen and (max-width: 1024px) {
    
    body {
        margin: 0; 
        padding: 0; 
    }
    
    #container {
        width: 100%; 
        min-width: 0; 
        margin: 0; 
        padding: 0; 
    }
    
    h1 {
        padding-top: 1em;
    }
    
    nav {
        float: none; 
        width: auto;
        clear: both;
    }
    
    nav ul {
        margin: 0;
    }
    
    nav a {
        margin-bottom: 0;
        float: left; 
        width: 25%;
    }
    
    main {
        padding: 2em 1em; 
        margin: 0; 
        font-size: 90%;
        float: none;
        clear: both;
    }
    
    h2, p {
        padding-left: 1em; 
        padding-right: 1em; 
    }
    
    .footer {
        margin: 0;
    }  
}

@media only all and (max-width: 768px) {
    
    h1 {
        font-size: 2em; 
        padding-top: 0.5em;
        padding-bottom: 0.5em;
        margin: 0;
        width: 40%; 
        text-align: left;
        display: inline-block;
    }
    
    nav a {
        padding: 0.5em; 
        width: 100%; 
        min-width: 6em; 
         
    }
    
    main {
        padding-top: 0.5em; 
    }
    
    .footer {
        padding: 0.5em; 
        margin: 0; 
    }
    
    .thumbphoto {
        display: none;
    }
}

label {
        float: left;
        display: block; 
        width: 8em; 
        padding-right: 1em;
        text-align: right;
}

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

#myTour {
        display: block;
        margin-bottom: 1em;
}

#myChoice {
        margin-bottom: 3em;
}

#mySubmit {
        margin-left: 12em;
}

#button {
        float: right;
        margin-top: 0.6em;
        margin-bottom: 0.6em;
        
        
}

.review {
        font-style: italic;
        font-size: 85%;
}

.thumbphoto {
        float: right;
        clear: right;
        margin-top: 2em;
        margin-bottom: 0;
        margin-left: 2em;
        margin-right: 0;  
}

table {
        margin: auto;
        border: 1px #a3bcc1;
        width: 100%; 
        border-collapse: collapse;
    }

td, th {
        padding: 5px; 
        border: 1px solid #a3bcc1; 
        text-align: center;
    }  

.text {
        text-align: left;
}