@charset "utf-8";

/************** General Settings **********************************************/

body { 
    background-color  : white;
    margin            : 0em; 
    font-family       : 'Helvetica', sans-serif;
}

div { 
    border            : 0em; 
}

img {
    border            : 0em; 
    width             : 100%;
    margin            : 0.1em 0.1em 0.1em 0.1em; /* top right bottom left */ 
}

img.frame {
    margin            : 0em 0em 0em 0em; /* top right bottom left */ 
}

/************** Header ********************************************************/

header {
    xxx-border            : 0.125em solid blue; 
    position          : relative;
    left              : 0em;
    top               : 0em;
    padding           : 0.3125em; 
    margin            : 0em;
}

header #wide {
    display           : none;
}

header #narrow {
    display           : block;
}

header #narrow #img {
    width             : 100%;
    height            : 100%;
    max-width         : 47.8125em;
    max-height        : 15.9375em;
}

/************** Navigation ****************************************************/

nav {
    xxx-border            : 0.125em solid red; 
    position          : relative;
    top               : -1.875em;   /* There is some space at the bottom of the header image. */
    left              : 0em;
    padding           : 0em;
    margin-left       : 1.875em;
    margin-right      : 1.25em;
    margin-bottom     : -1.875em;   /* Makes main move up. */
}

nav ul {
    xxx-border            : 0.125em solid brown; 
    padding           : 0em;
    margin            : 0em;
    list-style-type   : none;
    text-align        : center;
    display           : flex;
    flex-flow         : row wrap;
    justify-content   : center;
}

nav li {
    margin            : 0.125em;
    padding           : 0em 0.9375em 0em 0.9375em;  /* top right bottom left */
    height            : 1.875em;
    line-height       : 1.75em; 
    background-image  : url(img/frame/button.png);
    background-size   : cover; 
    background-repeat : repeat-x;
    border-radius     : 0.5em;
}

nav li:hover,
nav li:focus {
    background-image  : url(img/frame/button-reverse.png);
    font-weight       : bold;
}

nav li.sel {
    background-image  : url(img/frame/button.png);
    font-weight       : bold;
    color             : #444444;
}

nav a { 
    display           : block;
    text-decoration   : none; 
    color             : #990099;
}

/************** Main **********************************************************/

main {
    xxx-border            : 0.125em solid green; 
    position          : relative;
    top               : 0em;
    left              : 0em;
    margin            : 0em 0.625em 0.625em 0.625em;  /* top right bottom left */
    padding           : 0.625em;
}

main h1,
main h2,
main h3 {
    color             : #990099;
}

main p.teamimage {
    text-align        : center;
    width             : 100%;
}


/************** Special Items *************************************************/

input#email1, input#email2 {
    width             : 100%; 
    max-width         : 25em;
} 


/******************************************************************************/
/**** Breakpoint: Probably landscape instead of portrait aspect ratio . *******/

/* The width of header.png is 765px, plus 2 x 5px padding is 775px (16px=1em): */

@media (min-width: 48.5em) {

  
    /************** Header ********************************************************/
    
    header #narrow {
        display           : none;
    }
    
    header #wide {
        display           : block;
        height            : 13.125em;  /* less than the header images - makes main move up */
    }
    
    header #wide div {
        position          : absolute;
        top               : 0em;
        padding           : 0.3125em;
    }
    
    header #headerL {
        left              : 0em;
        width             : 18.125em;
    }
    
    header #headerM {
        left              : 18.125em;
        right             : 17.8125em;
    }
    
    header #headerR {
        right             : 0em;
        width             : 17.8125em;
    }
    
    header #imgM {
        width             : 100%;
        height            : 15.9375em;
    }
    
    /************** Navigation ****************************************************/
    
    nav {
        xxx-border            : 0.125em solid red; 
        position          : absolute;
        left              : 0.625em;
        top               : 18.75em;
        width             : 8.75em;
        padding           : 0em;
        margin            : 0em;
    }
    
    nav ul {
        flex-flow         : column nowrap;
    }
    
    nav ul li {
        text-align        : center;
    }
    
    /************** Main **********************************************************/
    
    main {
        margin-left       : 10.625em;
    }

}