body {
    background-color: #336699;
    margin: 0;
    padding: 0;
    text-align: justify;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 100%;
    color: #000033;
}
#outerwrap {
    background-color: #DDE1F9;
    margin: 3px auto;
    border: 1px solid black;
    width: 100%;
}

/** DEFAULTS **************/
img { margin:0; padding:0; border:0; }
.resp-img {
    width: 100%;
    height: auto;
    border: 1px black solid; 
    /* need max-width in html */
}

h1, h2, h3, h4, h5, h6 {
    font-family: Georgia, "Times New Roman", Times, serif;
    font-weight: normal;
    color: #003333;
}
p { line-height: 150%; }

table { margin:0; padding:0; border:0; border-spacing:0;
    width:100%; }
td {
    padding: 0;
    text-align: justify;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 1em;
    color: #000033;
}

a { text-decoration: none;
    color: #003333;
    font-weight: bold;
}
a:hover {
    text-decoration: underline;
    color: #3333CC;
}

/**** HEADER ****/
#header {
    width: 100%;
    margin: 0px;
    padding: 10px 0;
    background: url(vt-img-hdr-800.jpg); 
    background-repeat: no-repeat;
    background-size: 100% auto;
    text-align: center;
}
#header h1 {
    margin: 0;
    padding: 15px 1em 0 0;
    color: #003366;
    font-size: 4em;
    font-weight: bold;
}
#header h2 {
    margin: 0;
    padding: 45px 3em 0 0;
    color: #336699;
    font-size: 1.25em;
    font-weight: bold;
}

/**** FOOTER ****/
#clear { clear:both; }

#footer {
    margin: 0 auto;
    padding: 0 0 3px 0;
    border-top: 1px solid #666666;
    background-color: white;
    color: #003333;
    font-size: 0.7em;
    text-align: center;
}

/***** MENU *****/
#menu {
    margin: 0;
    padding: 5px 0 5px 0;
    background-color: #003366;
}
#menu ul {
    margin: 0;
    padding: 0 .7em;
    list-style: none;
    text-align: right;
}
#menu li {
    display: inline;
}
#menu a {
    padding: 5px 1em;
    text-transform: uppercase;
    text-decoration: none;
    font-size: 0.75em;
    font-weight: bold;
    color: #FFFFFF;
}
#menu a:hover {
    background-color: #003333;
}

/**** CONTENT ***/
/* 2-col design (no padding):
   |    col-2     |  col-1  |
   |         col-3          |
*/

[class*="col-"] {
    float: left;
    margin: 0;
    /* height specified in page */
    border: 0px;
    /* border:1px solid LightBlue; */
}
.col-1 {width: 90%;
    padding: 15px 3% 0 2%;
    color: #CCFFFF;
}
.col-2 {width: 90%;
    padding: 15px 5% 0 4%;
    border-right: 1px solid #666666;
    background-color: white;
}
.col-3 {width: 90%;}

#gallery {
    float: left;
    /* background-color: #F5F5F5; */
    width: 750px;
    margin: 0 0 0 3px;
    padding: 24px 0 15px 24px;
}

/** MEDIA *****************/
@media only screen and (min-width: 60em) {
    body { background-color: #336699; }
    #outerwrap { width: 60em; }
    .col-2 { 
        width: 60%;
    }
    .col-1 { float:right;
        width: 25%;
    }
    .col-3 { clear:both; 
        width: 90%;
    }
}
/* Put another breakpoint at 31em? */