html{
    height:100%;
}
body{
    height:100%;
    text-align: left;
    background:#ffdd88;}
* html div#container{
    height:100%;
}

div#container{
    width: 80%;
    margin:0px auto;
    position:relative;
    min-height: 100%;
}
body > #container {
        height: auto;
}
div#main{
    padding-bottom:30px;
    text-align:center;

}

.box {
  width: 100%;
  border: 5px solid #eebb66;
  background-color: #ffffee;
  color: #000044;
  -moz-border-radius: 7px;
  -webkit-border-radius: 7px;
  text-align: center;
  margin-top: 30px;
  margin-bottom: 30px;
  padding-right: 25px;
  padding-left: 25px;
  padding-bottom: 15px;
  padding-top: 15px;
}

.voca {
   white-space: nowrap;
   font-family: "ヒラギノ明朝 Pro","Hiragino Mincho Pro","メイリオ","Meiryo";
   font-weight: bold;
   font-size: xx-large;
   color: #222222;
   padding: 6px 5px 0 0;
   text-align:center;
}
.moto {
   white-space: nowrap;
   font-family: "ヒラギノ明朝 Pro","Hiragino Mincho Pro","メイリオ","Meiryo";
   font-size: medium ;
   color: #897EA6;
   padding: 6px 5px 0 0;
   text-align:center;
}

.score {
   white-space: nowrap;
   font-size: x-large ;
   color: #665b88;
   padding: 6px 5px 0 0;
   text-align:center;
}

.comment {
   white-space: nowrap;
   font-size: medium ;
   color: #665b88;
   padding: 6px 5px 0 0;
   text-align:center;
}


.desc {
   font-size: small ;
   color: #222244;
   text-align:center;
}

.tdlabel {
   white-space: nowrap;
   width:15em;
   font-size: small ;
   color: #222244;
   text-align:right;
}

.tdbtn {
   width:10em;
   text-align:center;
}

#foot{
    position:absolute;
    text-align:right;
    font-size: xx-small;
    bottom:0px;
    height:40px;
    width:100%;
}