html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    font-family: Verdana, sans-serif;
}
a {
    text-decoration: none;
}
li {
    list-style: none;    
}

header {
    width: 100%;
    height: 50px;
    line-height: 50px;
    text-align: center;
    background-color: #ffffff;
    font-weight:bold;
      box-shadow: 1px 1px 4px 0 rgba(0,0,0,.1);
}
.brand {
    width: 88px;
    height: 100%;
    float: left;
    margin: 0 0 0 0;
}

.menu {
    width: auto;
    height: 100%;
    float: right;
}
.menu ul {
    width: 100%;
    height: inherit;
    margin: 0;
    padding: 0;
    display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
    display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
    display: -ms-flexbox;      /* TWEENER - IE 10 */
    display: -webkit-flex;     /* NEW - Chrome */
    display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */
}
.menu ul a {
    padding: 0px 20px 0px 20px;
    height: inherit;
    color: #222;
    display: inline-block;
    border-right: 1px solid #f4f4f4;
}
.menu ul a:hover {
    background-color: #713165;
    color: #fff;
}
#menuToggle {
    display: none;
}
.menu-icon {
    display: none;
}

#main-content { width:90%; margin-left:auto; margin-right:auto; min-width:400px; }
h1 { color:#713165; font-size:3em; margin:20px; text-shadow: 2px 2px 6px #808080;}
h2 { color:#808080; font-size:2em; margin:10px; text-shadow: 1px 1px 2px #000000;}
h3 { font-size:1.55em; margin:10px;}
h4,h5,h6 { font-size:1.25em;}
#container p { text-indent:20px; line-height:1.5em; font-size:1.2em;}
#container ul li { line-height:1.5em; list-style-type: square; list-style-position: inside;  }
#container ol li { line-height:1.5em; list-style-type: lower-roman; list-style-position: inside;  }
#container li { color:#000000; }
#container a,a:visited { font-weight:bold; color:#713165; } #main-content a:hover { color:#ff9900; }
#container label { width:175px; display:inline-block;}
footer { padding:20px; background-color:#dddddd; text-align:center; width:auto; }

@media screen and (max-width: 768px) {
    .menu {
        width: 100%;
        height: auto;
    }
    .menu ul {
        display: block;
        max-height: 0;
    	overflow: hidden;
    	-webkit-transition: max-height 0.3s;
    	-moz-transition: max-height 0.3s;
        -ms-transition: max-height 0.3s;
        -o-transition: max-height 0.3s;
    	transition: max-height 0.3s;

    }
    .menu ul a {
        text-align: left;
        width: 100%;
        height: 50px;
        background-color: #eeeeee;
        padding: 10px 0px 10px 5%;
    }
    .menu-icon {
        width: 100px;
        height: inherit;
        display: block;
        position: absolute;
        top: 0;
        right: 0;
        line-height: 60px;
    }
    #menuToggle:checked ~ ul {
        max-height: 350px;
        
    }
    .menu-icon i {
        font-size: 1.7em;
    }
}