body, h1, h2, h3, h4, ul, li, div, p {
  margin: 0;
  padding: 0;
}

a {
  outline: 0;
}

body {
  background: #fff;
  color: #505050;
  font-family: "Hiragino kaku Gothic Pro", "メイリオ", Meiryo, Verdana, Arial, sans-serif;
}

header {
  margin: 40px auto 20px;
}
header h1 {
  font-weight: normal;
  font-size: 2em;
  border-bottom: 1px solid #505050;
  padding: 0 0 5px;
}

#contents, footer {
  width: 95%;
  max-width: 960px;
  margin: 0 auto;
}

nav {
  width: 100%;
  margin: 0 auto;
  padding: 10px 0 0;
}
nav .op {
  margin-left: 1em;
}
nav #show-res-nav {
  margin-left: 10px;
}
nav #show-res-nav ul.dropdown-menu a.disable {
  color: gainsboro;
}
nav #show-res-nav ul.dropdown-menu a.disable i.icon-ok {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=10);
  opacity: 0.1;
}
nav #show-res-nav ul.dropdown-menu a.disable:hover {
  color: #3fa5d7;
}

@media screen and (max-width: 540px) {
  #contents, footer, #shareButton {
    width: 540px;
  }
}
#dptable {
  margin-top: 10px;
  width: 100%;
}
#dptable thead th span {
  font-weight: normal;
  font-size: 0.8em;
  color: #505050;
}
#dptable thead th span:before {
  content: '（×';
}
#dptable thead th span:after {
  content: '）';
}
#dptable thead th:first-child {
  width: 1%;
}
#dptable tbody tr.fraction {
  color: #ff8400;
}
#dptable tbody th {
  white-space: nowrap;
}

#shareButton {
  padding: 10px 5px;
  text-align: left;
}
#shareButton div.twitter {
  display: inline-block;
  overflow: hidden;
  width: 90px;
  padding: 0px 5px;
}
#shareButton div.facebook {
  display: inline-block;
  width: 115px;
  padding: 0px 5px;
}
#shareButton div.google {
  display: inline-block;
  overflow: hidden;
  width: 60px;
  padding: 0px 5px;
}
#shareButton div.hatena {
  display: inline-block;
  overflow: hidden;
  width: 115px;
  padding: 0px 5px;
}

footer {
  border-top: 1px solid gainsboro;
  margin-top: 40px;
  padding: 10px 0;
}

.clearfix {
  width: 100%;
}

.clearfix:after {
  content: "";
  display: block;
  clear: both;
}