header {
    background: #EE1;
    color: #11E;    
    position: fixed;
    width:auto;
    width:100%;
    display:table;
}

.headbar {
    width: auto;
    width: 100%;
    float: left;
}

.index {display: none;}

,headbar:hover .index {
    display: table;
}

.headbar .index {
    width:auto;
    width:100%;
}

.index img, .index a, .index iframe {
    float: left;
}

iframe {
    max-height:380;
}

header p, header a {  
    margin: 2.5%;
    font-size: 340%;
    font-weight: bold;
    text-align: center;
    font-family: "Brush Script MT", "Lucida Handwriting", cursive;
}

/*The rest is history*/

.menu {
    width: auto;
    width: 10%;
    float: left;
}

.menu:hover .index, .headbar:hover .index {
    display: table;
}

.menubar {
    width:auto;
    width:98%;
    display: none;
    margin: 5px;
}

.menubar a {
    float:left;
    
    padding: 5px;
    border: 1px solid black;
    width: auto;
    padding: 20px;
    text-decoration: none;
    
    font-size:200%;
}

.menubar a:hover {
    background:white;
}

.close {
    float: right;
}

header div.center {
    float: right;
    
    width: auto;
    width: 90%;
}

header div.center p {
    text-align: center;
}

@media print {
    header {
        display:none;
    }
}

@media only screen and (max-width: 768px) {
    header p, header a {  
    font-size: 270%;
    }
} 

@media only screen and (max-width: 600px) {
    header p, header a {  
    font-size: 200%;
    }
}