html,
body {
  font-family: 'Open Sans', sans-serif;
  cursor: pointer;
}


/* Button Container */


/* Default button size - Small */

.stanza-btn-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 6.875em;
  height: 1.25em;
  text-align: center;
  color: white;
  font-weight: 600;
  border-radius: 1px;
}

.stanza-btn-container.ticker {
  border-radius: 1px 0 0 1px;
  width: 7.5em;
}

.content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}


/* The overlay which creates the hover effect */

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: 0.3s;
  -moz-transition: 0.3s;
  -webkit-transition: 0.3s;
  -ms-transition: 0.3s;
  -o-transition: 0.3s;
  cursor: pointer;
  z-index: 2;
}

/* Change the width if a ticker is present */

.overlay.small.ticker {
  width: 8.98em;
}

.overlay.medium.ticker {
  width: 8.69em;
}

.overlay.large.ticker {
  width: 8.4em;
}

.overlay:hover {
  box-shadow: inset 0 0 27px rgba(238, 238, 238, 0.5);
  transition: 0.3s;
  -moz-transiton: 0.3s;
  -webkit-transition: 0.3s;
  -ms-transition: 0.3s;
  -o-transition: 0.3s;
}


/* The gradient */

.gradient {
  position: absolute;
  top: -57px;
  left: -12px;
  width: 279px;
  height: 80px;
  transition: 0.3s;
  -moz-transition: 0.3s;
  -webkit-transition: 0.3s;
  -ms-transition: 0.3s;
  -o-transition: 0.3s;
  cursor: pointer;
  z-index: 0;
  background: rgba(1, 1, 1, 0.1);
  -webkit-transform: rotate(12deg);
  -moz-transform: rotate(12deg);
  -ms-transform: rotate(12deg);
  -o-transform: rotate(12deg);
  transform: rotate(12deg);
}


/* Stanza logo on the left */

.stanza-logo {
  position: absolute;
  top: 0;
  left: 0;
  margin: 0;
  opacity: 0.3;
  height: 100%;
}

.button-text {
  width: 100%;
  font-size: 8px;
  position: absolute;
  text-align: center;
  line-height: 20px;
  padding-left: 9px;
  text-transform: uppercase;
}


/* The ticker */

.ticker-container {
  position: absolute;
  width: 25px;
  right: -24px;
  color: white;
  font-size: 8px;
  height: 20px;
  line-height: 20px;
  border-radius: 0 1px 1px 0;
  z-index: 1;
}

.ticker-container.medium.ticker {
  height: 19px;
}

.ticker-container > .dark-layer {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 0 1px 1px 0;
}

.ticker-container > span {
  position: relative;
  z-index: 1;
}

/* Exceptions */


/* The large button */


/*

 * Need to lower the font size for large buttons since it's not a perfect aspect
   ratio of the small button or medium.

 * Change the font in 2 places:
 * button-text
 * ticker-container

 */


/* decrease the font size of the buttons's text */

.stanza-btn-container.large {
  top: 8px;
  left: 49px;
  -webkit-transform: scale(2);
  -moz-transform: scale(2);
  -o-transform: scale(2);
  -ms-transform: scale(2);
  transform: scale(1.9091);
  height: 1.146em;
}

.stanza-btn-container.large.ticker {
  width: 6.777em;
}


/* For the large button make the font slightly smaller */

.button-text.large {
  font-size: 7px;
}


/* decrease font size for the ticker on large buttons */

.ticker-container.large {
  width: 28px;
  right: -26px;
  font-size: 7px;
  height: 100%;
}


/* The medium button */

.stanza-btn-container.medium {
  top: 3px;
  left: 17px;
  width: 7.157em;
  height: 1.193em;
  -webkit-transform: scale(1.31);
  -moz-transform: scale(1.31);
  -o-transform: scale(1.31);
  -ms-transform: scale(1.31);
  transform: scale(1.31);
}

.stanza-btn-container.ticker.medium {
  width: 7.186em;
}


/* Different languages */


/*
 * Longer languages
 * Shorter languages
*/


/* very long languages */

.button-text.german,
.button-text.russian,
.button-text.greek,
.button-text.portuguese.small,
.button-text.portuguese.large {
  font-size: 5px;
  position: relative;
  bottom: 1px;
}


/* long languages */

.button-text.russian,
.button-text.french,
.button-text.spanish,
.button-text.dutch,
.button-text.italian,
.button-text.portuguese.medium,
.button-text.polish.large,
.button-text.czech.large,
.button-text.catalan.large {
  font-size: 6px;
}

.button-text.portuguese.small.ticker,
.button-text.german.small.ticker,
.button-text.russian.small.ticker,
.button-text.dutch.small.ticker,
.button-text.italian.small.ticker {
  font-size: 6px;
  line-height: 22px;
}

.button-text.french.small.ticker,
.button-text.polish,
.button-text.czech,
.button-text.catalan {
  font-size: 7px;
  line-height: 21px;
}


/* Asian languages */

.button-text.chinesesimplified,
.button-text.chinesetraditional,
.button-text.korean,
.button-text.japanese {
  font-size: 9px;
  line-height: 19px;
}