@charset "UTF-8";
html {
  width: 100%;
  height: 100%;
}

body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  color: #424e60;
  font-size: 13px;
  font-family: 'roboto','microsoft yahei', sans-serif;
  background: #fff;
}

header, nav, section, article, video, footer {
  display: block;
}

a {
  color: #579eeb;
  transition: 0.3s;
}
a:hover {
  color: #52d6ee;
}
a img {
  border-style: none;
}
a.btn {
  color: #fff;
  text-decoration: none;
  display: inline-block;
  padding: 12px;
  background-color: #579eeb;
  margin: 0 8px 18px 0;
}
a.btn:hover {
  background-color: #59bcea;
}

header {
  width: 100%;
  margin: 0;
  padding: 100px 0;
  background-color: #579eeb;
  *zoom: 1;
  filter: progid:DXImageTransform.Microsoft.gradient(gradientType=1, startColorstr='#FF579EEB', endColorstr='#FF59BCEA');
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjAuMCIgeDI9IjEuMCIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzU3OWVlYiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzU5YmNlYSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
  background-size: 100%;
  background-image: -webkit-gradient(linear, 0% 0%, 100% 100%, color-stop(0%, #579eeb), color-stop(100%, #59bcea));
  background-image: -moz-linear-gradient(left top, #579eeb 0%, #59bcea 100%);
  background-image: -webkit-linear-gradient(left top, #579eeb 0%, #59bcea 100%);
  background-image: linear-gradient(to right bottom, #579eeb 0%, #59bcea 100%);
  text-align: center;
}
header h1 {
  text-align: center;
  font-weight: 100;
  color: #fff;
  font-size: 36px;
  margin: 0 0 18px;
  padding: 0;
  letter-spacing: 3px;
}
header a {
  color: #fff;
  text-decoration: none;
  font-weight: 300;
}
header a.btn {
  border: 1px solid #fff;
  display: block;
  margin: 80px auto 0;
  padding: 14px;
  width: 240px;
  font-size: 16px;
  background-color: transparent;
}
header a.btn:hover {
  background-color: rgba(255, 255, 255, 0.3);
  color: #fff;
}

div#container {
  width: 100%;
}

section {
  display: block;
  width: 900px;
  margin: 0 auto 80px;
}
section section {
  margin-bottom: 60px;
}
section section:last-child {
  margin-bottom: 0;
}
section h1 {
  color: #579eeb;
  font-size: 28px;
  font-weight: 300;
  margin: 0 0 30px;
  padding: 0;
  letter-spacing: 1px;
}
section h2 {
  font-size: 24px;
  margin: 0 0 15px;
  padding: 0 0 8px;
  font-weight: 100;
  letter-spacing: 1px;
  border-bottom: 1px solid #d8dde6;
}
section h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 100;
  margin-bottom: 20px;
  letter-spacing: 1px;
}
section h3 span {
  font-size: 11px;
  font-weight: 300;
}
section .options {
  margin: 40px 0;
}
section .options:last-child {
  margin-bottom: 0;
}
section dl {
  margin: 0 0 -20px;
  overflow: hidden;
}
section dt {
  width: 156px;
  padding-right: 12px;
  padding-left: 12px;
  padding-bottom: 8px;
  display: inline-block;
  border-bottom: 1px solid #d8dde6;
  margin: 0 0 20px;
}
section dd {
  width: 696px;
  padding-right: 12px;
  padding-left: 12px;
  padding-bottom: 8px;
  display: inline-block;
  border-bottom: 1px solid #d8dde6;
  margin: 0 0 20px;
}

div#inline_sample,div#inline_sample2,div#inline_sample3,
#api_contents {
  display: none;
  width: 800px;
  height: 585px;
  color: #787878;
  background-color: #fff;
  padding:5px;
}
div#inline_gx, div#inline_gx2, div#inline_gx3, div#inline_gx4, div#inline_gx5, div#inline_gx6, div#inline_gx7, div#inline_gx8,
div#inline_gx9, div#inline_gx10, div#inline_gx11, div#inline_gx12, div#inline_gx13, div#inline_gx14, div#inline_gx15, div#inline_gx16,
#api_contents {
  display: none;
  width: 800px;
  height: 519px;
  color: #787878;
  background-color: #fff;
  padding:5px;
}

section#ajaxContents {
  width: 300px;
  height: 300px;
  padding: 30px;
  margin: 0;
  background-color: #fff;
}

code, pre {
  padding: 10px;
  background-color: #f2f8ff;
  border: 1px solid #c1dbf5;
  display: block;
  margin-bottom: 15px;
}