*{
    box-sizing: border-box;
}
body {
    font-family: Verdana,Arial,sans-serif;
    background-color: #00005D;
}

#wrapper{
    background-color: #B3C7E6;
    color:#000066;
    width:80%;
    margin: auto;
}
nav{
    float:left;
    width:150px;
}
main {
    display: block;
    margin-left:155px;
    padding:20px;
    background-color: #ffffff;
    color: #000000;
}
header{
    background-color: #869DC7;
    color:#00005D;
    font-size: 150%;
    padding: 10px 10px 10px 155px;
    background-image: url(../images/lighthouselogo.jpg);
    background-repeat: no-repeat;
}
h1{
    margin-bottom:20px;
}
h2{
    color:#869DC7;
    font-family: Arial,sans-serif;
}
footer{
    font-size: 95%;
    text-align:center;
    clear:both;
    padding:20px;
    background-color: #869DC7;
}
#floatright {
    margin:10px;
    float:right;
    background-color:#FFFFFF;
    padding: 5px;
    border: 1px solid #cccccc;
    box-shadow:5px 5px 5px #828282;
    transform:rotate(3deg);
}
nav ul{
    list-style-type: none;
    margin-left: 0px;
    padding: 10px;
}
nav a{
    text-decoration:none;
    padding: 10px;
}
nav a:link{
    color:white;

}
nav a:visited{
    color:#EAEAEA;

}

nav a:hover{
    color:#000066;
}

table{
    margin:auto;
    border:5px solid #000066;
    border-collapse:collapse;
}
td, th{
    padding:0.5em;
    border-style:none;
    font-family:Arial,sans-serif;
}
caption {
    font-family:Verdana,sans-serif;
    font-weight: bold;
    font-size:1.2em;
    padding-bottom:0.5em;
}
tr:nth-of-type(even) {
    background-color:#eaeaea;

}
 tr:first-of-type{
     background-color:#000066;
     color:#eaeaea;
 }

 form{
     background-color:#eaeaea;
     font-family:Arial,sans-serif;
     padding:10px;

 }
 label{
     float:left;
     width:100px;
     clear: left;
     text-align:right;
     padding-right:10px;
     margin-bottom:10px;
 }
 input, textarea{
    margin-top:10px;
    display:block;

 }
 #mySubmit, #myReset {
     margin-left:110px;

 }
@media only screen and (max-width: 1024px) {
    body {
        margin: 0px;
    }

    #wrapper {
        width: auto;
    }

    main {
        margin-left: 0px;
    }

    nav {
        float: none;
        width:auto;
    }
    nav li{
        display: inline-block;  
        padding: 0.5em;

    }
    nav ul{
        text-align:center;
    }
    nav a{
        border-style:none;
    }
    h1,h2{
        font-size: 120%;
    }
    p{
        font-size: 90%;
    }

}
@media only screen and (max-width: 768px) {
    h1,h2{
        font-size: 100%;
    }
    p{
        font-size:80%;
    }
    nav,nav ul,nav li {
        padding: 0px;
    }
    nav li {
        display: block;
    }
    nav a {
        display: block;
        padding: 0.5em 0;
        border-bottom: 2px ridge #00005D;
    }
    #floatright {
        display: none;
    }
}