@charset "UTF-8";
/********************************      Basic Structure      ********************************/
html {
  font-size: 100%;
  height: 100%;
  margin-bottom: 1px;
  /* Always show a scrollbar to avoid jumping when the scrollbar appears  */ }

body {
  font-family: Verdana, Helvetica, Arial, "黑体", "heiti", sans-serif;
  padding: 0;
  margin: 0;
  line-height: 1.8em;
  text-align: center; }

#bg-wrapper {
  width: 100%;
  min-height: 500px;
  background: url("../images/line-bg.png") right top no-repeat; }

#trace {
  z-index: 99;
  position: fixed;
  overflow: auto;
  max-height: 80%;
  font-family: Tahoma;
  font-size: 12px;
  line-height: 1.2em; }

/********************************      Elements styling      ********************************/
h1, h2, h3, h4, h5, h6 {
  font-family: Verdana, Helvetica, Arial, "黑体", "heiti", sans-serif;
  font-weight: bold;
  -webkit-margin-before: 0;
  -webkit-margin-after: 0; }

h1 {
  font-family: Calibri, Verdana, Helvetica, Arial, "黑体", "heiti", sans-serif;
  font-size: 31px;
  font-weight: bold; }

a {
  color: #3f3e3e;
  text-decoration: none; }

a:hover {
  color: #395aa6; }

a:focus {
  outline: 1px; }

strong {
  font-weight: bold; }

small {
  font-size: 0.85em; }

pre {
  font-family: monospace; }

p {
  padding: 5px 0 10px 0;
  line-height: 1.6em; }

/********************************      General Classes      ********************************/
.clear {
  clear: both; }

.align-left {
  float: left; }

.align-right {
  float: right; }

.init-hid {
  visibility: hidden; }

/*****************/
/***********/
/* grid-item
------------------------- */
.grid {
  margin: 10px auto; }

.grid-item {
  width: 100px;
  height: 100px;
  float: left;
  margin-bottom: 10px; }

.grid-item--width2, .grid-item--width2 .cover-img {
  width: 210px; }

.grid-item--width3 {
  width: 320px; }

.grid-item--height2, .grid-item--height2 .cover-img {
  height: 210px; }

.grid-item--height3 {
  height: 320px; }

.grid-item--gigante {
  width: 240px;
  height: 180px;
  background: #F90;
  z-index: 2;
  /* keep it above other items */ }

/* ---- clickable ---- */
.grid--clickable .grid-item:hover {
  border-color: white;
  background: #f90;
  cursor: pointer; }

.cover-img {
  border-radius: 15px;
  width: 100px;
  height: 100px; }

.grid-item a span {
  display: none; }

/*********/
.footer {
  margin: 2em 1em 2em;
  border-top: solid 1px #ccc;
  text-align: center;
  color: #999; }

.page-header h1 {
  line-height: 1.5em;
  margin: 40px 0 8px 0; }

.stats {
  border-bottom: solid 1px #eee;
  padding-bottom: 1em;
  margin-bottom: 1em;
  text-align: center; }

.col-sm-3 {
  display: inline-block;
  margin: 0 20px; }

#parent-entry {
  display: block;
  z-index: 5;
  top: 0;
  width: 100%;
  position: fixed;
  padding: 6px 12px;
  margin-bottom: 0;
  font-size: 14px;
  font-weight: normal;
  line-height: 1.428571429;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  cursor: pointer;
  background-image: none;
  border: 1px solid transparent;
  border-radius: 4px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
  color: #fff;
  background-color: #F04E8C;
  border-color: #EE36A1; }

#parent-entry:hover, #parent-entry:focus, #parent-entry:active, #parent-entry.active {
  text-decoration: none;
  background-color: #F90;
  background-image: none;
  outline: 0;
  -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); }

/*********/
#mask-overlay {
  position: fixed;
  width: 100%;
  height: 100%;
  opacity: 0.5;
  background: #000;
  top: 0px;
  left: 0px;
  z-index: 8; }

#content-app {
  z-index: 9;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0px;
  margin: auto; }

#content-app .btn-close {
  padding: 5px;
  display: block;
  text-align: left;
  z-index: 999999; }

#app-wrapper {
  text-align: center;
  margin: 20% auto;
  width: 60%;
  padding: 2em;
  background: #efefef;
  border-radius: 25px;
  -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); }

#app-icon {
  border-radius: 25px;
  width: 144px;
  height: 144px; }

#app-urls a {
  margin-left: 1em;
  margin-right: 1em; }