@charset "utf-8";

div#showcase {
  padding:10px;
}

div#viewer,
div#copy {
  float: left;
  width: 50%;
}
div#copy {
  text-align: right;
}

div#showcase div.explanation {
  text-align: center;
  margin: 20px auto;
}

div.explanation a#detail {
  margin:0 auto;
  width: 210px;
  height: 60px;
  background: url(/static/images/top/button_detail.png) no-repeat #fff top;
}

div.explanation a#detail:hover {
  background: url(/static/images/top/button_detail.png) no-repeat #fff bottom;
}

div.explanation a,
div.explanation ul li a,
div.explanation div#try a {
  display:block;
  text-decoration: none;
  text-indent: -9999px;
  overflow: hidden;
}

div.explanation div#try a {
  margin: 20px auto;
  width:415px;
  height:105px;
  background: url(/static/images/top/button_try.png) no-repeat top;
}

div.explanation div#try a:hover {
  background: url(/static/images/top/button_try.png) no-repeat bottom;
}

div.explanation ul {
  width:630px;
  margin: 0 auto;
}

div.explanation ul li {
  float:left;
}

div.explanation ul li#create a {
  width: 180px;
  height: 75px;
  background: url(/static/images/top/button_create.png) no-repeat #fff top;
}

div.explanation ul li#create a:hover {
  background: url(/static/images/top/button_create.png) no-repeat #fff bottom;
}

div.explanation ul li#upload a {
  width: 270px;
  height: 75px;
  background: url(/static/images/top/button_upload.png) no-repeat #fff top;
}

div.explanation ul li#upload a:hover {
  background: url(/static/images/top/button_upload.png) no-repeat #fff bottom;
}

div.explanation ul li#paste a {
  width: 180px;
  height: 75px;
  background: url(/static/images/top/button_paste.png) no-repeat #fff top;
}

div.explanation ul li#paste a:hover {
  background: url(/static/images/top/button_paste.png) no-repeat #fff bottom;
}