html {
    height: 100%;
    font-size: 0;
	margin: 0 auto;
	overflow: hidden;
}

body {
	background: url("images/bgimage.jpg") no-repeat center center fixed;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
    font-family: Tahoma;
}
	
.highlite {
    color: #ffffff;
}

/*  One of these waifu classes will be added to <main>
    on pageload by javascript */
.waifu1 {
    background: url('images/mascots/yuno.png') #282A2E;
    background-size: contain;
    background-repeat: no-repeat;
    padding: 20px 20px 20px 300px;
}

.waifu2 {
    background: url('images/mascots/ramiel.png') #282A2E;
    background-size: contain;
    background-repeat: no-repeat;
    padding: 20px 20px 20px 300px;
}

.waifu3 {
    background: url('images/mascots/gumi.png') #282A2E;
    background-size: contain;
    background-repeat: no-repeat;
    padding: 20px 20px 20px 300px;
}

.waifu4 {
    background: url('images/mascots/rei.png') #282A2E;
    background-size: contain;
    background-repeat: no-repeat;
    padding: 20px 20px 20px 300px;
}

.waifu5 {
    background: url('images/mascots/kurumai.png') #282A2E;
    background-size: contain;
    background-repeat: no-repeat;
    padding: 20px 20px 20px 300px;
}

.waifu6 {
    background: url('images/mascots/satomi.png') #282A2E;
    background-size: contain;
    background-repeat: no-repeat;
    padding: 20px 20px 20px 300px;
}

.waifu7 {
    background: url('images/mascots/eureka.png') #282A2E;
    background-size: contain;
    background-repeat: no-repeat;
    padding: 20px 20px 20px 300px;
}

.waifu8 {
    background: url('images/mascots/aigis.png') #282A2E;
    background-size: contain;
    background-repeat: no-repeat;
    padding: 20px 20px 20px 300px;
}

.waifu9 {
    background: url('images/mascots/bernadette.png') #282A2E;
    background-size: contain;
    background-repeat: no-repeat;
    padding: 20px 20px 20px 300px;
}

.waifu10 {
    background: url('images/mascots/ae86.png') #282A2E;
    background-size: contain;
    background-repeat: no-repeat;
    padding: 20px 20px 20px 600px;
}

.waifu11 {
    background: url('images/mascots/rx7.png') #282A2E;
    background-size: contain;
    background-repeat: no-repeat;
    padding: 20px 20px 20px 600px;
}

.waifu12 {
    background: url('images/mascots/itsuki.png') #282A2E;
    background-size: contain;
    background-repeat: no-repeat;
    padding: 20px 20px 20px 300px;
}

.waifu13 {
    background: url('images/mascots/kocho.png') #282A2E;
    background-size: contain;
    background-repeat: no-repeat;
    padding: 20px 20px 20px 300px;
}

.plain {
    background: #282A2E;
    padding: 20px 20px 20px 20px;
}

main {
    font-size: 16px;
    border: 1px solid #39b6e9;
	margin: 0 auto;
	margin-top: 15%;
	display: table;
	vertical-align: middle;
	position: relative;
	z-index: 214748364;
}

header {
    margin-bottom: 40px;
}

footer {
	font-size: 12px;
	text-align: center;
	color: #FFF;
}

h1 {
    color: #FFF;
    letter-spacing: 2px;
    font-size: 40px;
    font-weight: normal;
    text-align: center;
    padding: 0;
    margin: 0;
}

.subtitle {
    color: #FFF;
    text-align: center;
    letter-spacing: 2px;
    padding: 0;
    margin: 0;
}

.searchContainer {
    text-align: center;
    margin-bottom: 30px;
}

.searchForm {
    display: inline-block;
    margin: 0 10px;
}

.searchBar {
    color: rgba(0,0,0,0);
    width: 20px;
    height: 20px;
    padding: 0;
    font-size: 10px;
    background-repeat: no-repeat;
    background-size: 20px 20px;
    background-position: right center;
    border: 1px solid lightgrey;
    opacity: 0.5;
    transition: all 1s;
}
.searchBar:hover {
    cursor: pointer;
    box-shadow: 0 0 5px #FFF;
    border: 1px solid #FFF;
    transition: all 0.5s;
    background-position: right center;
    opacity: 1;
}

.searchBar:focus {
    cursor: text;
    color: #000;
    width: 100px;
    padding: 0 10px 0 10px;
    opacity: 1;
}

.google {
    background-image: url('images/google.png');
}

.youtube {
    background-image: url('images/youtube.png');
}

.wikipedia {
    background-image: url('images/wikipedia.jpg');
    background-size: 21px 21px;
}

nav {
    text-align: center;
}

.buttonList,
.buttonList ul {
    padding: 0;
    margin: 0;
    list-style-type: none;
	text-align: right;
	line-height: 80%;
}

.buttonList > li {
    position: relative;
    margin: 10px 10px;
    display: inline-block;
}
.buttonList > li > a {
    display: inline-block;
    min-width: 140px;
    color: #39b6e9;
    text-decoration: none;
    font-size: 20px;
    padding: 10px 5px;
    border: 1px solid #39b6e9;
    outline: none;
    background: #1D1F21;
    transition: all 0.5s;
}

.buttonList > li:hover > a {
    color: #ffffff;
    background: #39b6e9;
    border-color: #39b6e9;
}

.buttonList > li > ul {
    position: absolute;
    box-sizing: border-box;
    overflow: hidden;
    width: 100%;
    max-height: 0;
    border: 0 solid #373B41;
    transition: all 0.5s;
    z-index: 10;
	font-size: 14px;
	padding: 0 2px 0 0;
}

.buttonList > li:hover > ul {
    max-height: 200px;
    border: 1px solid #39b6e9;
    transition: max-height 0.5s, border 0.5s;
}

.buttonList > li > ul > li {
    display: block;
}

.buttonList > li > ul > li > a {
    display: inline-block;
    width: 100%;
    color: #39b6e9;
    text-decoration: none;
    padding: 5px 0;
    outline: 0;
    background: #1D1F21;
    transition: all 0.5s;
}

.buttonList > li > ul > li > a:hover {
    color: #ffffff;
    background: #39b6e9;
}