main.css

html, body {
    font-family: sans-serif;
    margin: 0;
    padding: 0;
    overflow: hidden;
    height: 100%;
    width: 100%;
}

h1{
    font-size:30px;
    margin: 10px;
    color: white;
}

h2{
    font-size:20px;
    margin: 10px;
    color: darkgray;
}

button{
    margin: 10px;
    height: 40px;
    width: 300px;
}

a{
    text-decoration: none;
}


/* wrapper */
#wrapper{
    z-index: 0;
}

/* side */
#side{
    z-index: 1;
}

#side li{
    position: relative;
    padding: 20px 60px 20px 10px;
    border-bottom: 1px solid rgba(0, 0, 0, .1);
    list-style:none;
    text-align: center;
}

/* chevron */
.chevron {
    display:inline-block;
    width: .5em;
    height: .8em;
    position:relative;
    left:90px;
}
.chevron:before, .chevron:after {
    display:block;
    content:"";
    width:0;
    height:0em;
    border-style:solid;
    position:absolute;
}
.chevron:before {
    right:0;
    border-width:.6em 0 .6em .6em;
    border-color:transparent transparent transparent white;
}
.chevron:after {
    left:0;
    border-width:.6em 0 .6em .6em;
    border-color:transparent transparent transparent rgba(0, 0, 0, 0);
}

/* main */
#main{
    margin:0px;
    width:100%;
    height:100%;
    background-color: whitesmoke;
    z-index: 2;
}

/* header(snapの関係でmainの中に) */
#header{
    position: fixed;
    top: 0px;
    left: 0px;
    width:100%;
    height:70px; /* 固定 */
    background-color: rgba(255, 165, 0,0.6);
    z-index: 3; /* side*/
}

.hamburger {
    display: block; 
    position: absolute;
    top:30%;
    right:5%;
    z-index: 3;
}

/* content */
.content{
    background-color:antiquewhite;
}

/* top画像 400x250*/
.top-image{
    position: relative;
    width:450px;
    height:250px;
}

.mojinose{
    position:absolute;
    top:50%;
    left:100px;
    text-align: center;
    color: white;
    font-size:20px;
}

/* login button */
.login{ /* login 内で共通 */
    font-family: 'Microsoft Sans Serif';
    text-align: center;
    margin: 0 auto;
    color: white;
}

.login > .twitter{
    margin: 0 auto;
    background: skyblue;
    width: 250px;
    height: 40px;
    line-height:40px;
    border-radius: 15px;
}

.login > .facebook{
    margin: 0 auto;
    background: navy;
    width: 250px;
    height: 40px;
    line-height:40px;
    border-radius: 15px;
}

/* 運営からのコメント */
.comment{
    text-align: center;
}

/* oshimen */
.oshimen{
    position: relative;
    width:100%;
    height:100%;
    padding:0 5%;/* いい感じにセンター寄せできないかなー */
    text-align:center;
}

.white-box{
    float:left;
    background-color: white;
    margin:10px 10px;
    padding:5px;
    width:150px;
    border:1px solid;
    border-color:aquamarine;
    border-radius: 10px;
    line-height: 10px;
}

.player-image{
    width:100px;
    height:100px;
}

.vote{
    display: block;
    margin:0 auto;
    width: 130px;
    height: 40px;
    font-size: 20px;
    text-align: center;
    font-weight: bold;
    background: orange;
    border-radius: 40px;
    box-shadow: 3px 3px 3px rgba(0,0,0,0.2);
    color: white;
    line-height:40px;
}

/* oshimen-footer(clearのための) */
.oshimen-footer{
    clear: both; /* 強制的にclear */
}