/* PAGE LAYOUT */

body, html {
  height: 100%;
  min-height: 100%;
  font-size: 18px;
}

body {
  font-family: Medium;
  /* overflow: hidden; */
}

input, button, select, textarea {
  font-family: Medium;
}

h1,h2,h3,h4,h5,h6 {
  font-family: Bold;
  font-weight: normal;
}

strong {
  font-family: Heavy;
  font-weight: normal;
}

@media (max-width: 767px) {
  body {
    padding-right: 0px;
    padding-left: 0px;
  }
}

.page {
  height: 100%;
  /* overflow: hidden;*/
  position: absolute;
  width: 100%;
}

#page-content {
	background-color: gray;
	height: 1400px;
}

/* SPLASH */
#splash-content {
  cursor: pointer;
  left: 50%;
  margin-top: -144px;
  margin-left: -122px;
  position: absolute;
  text-align: center;
  top: 50%;
}

/* GEM PAGE */

#gem-page-header {
	/* do we want to stick at top, or scroll out of sight? 
	top: 0px;
  position: fixed;
  */
  height: 70px;
	width: 100%;
	padding-left: 0px;
	padding-right: 0px;
  background: #B5B2D9;
  text-align: center;
}

#gem-page-header .logo {
  float: left;
  margin: 11px 12px;
}

#gem-page-header .gem-page-title {
  display: block;
  left: 52px;
  margin: 17px auto;
  position: relative;
}

#gem-page-header .sandwich {
  float: right;
  margin: 17px 12px;
}

#onlineCount {
    background: #add9ca;
    border-radius: 18px;
    color: white;
    float:right;
    font-weight: bolder;
    font-size: 18px;
    line-height: 31px;
    margin-top: 17px;
    padding: 2px 12px;
}

#gem-page-footer {
    text-align: center;
    padding-bottom: 10px;
    padding-top:20px;
}

/*
* this is usually 380px wide minimum. If the viewport can't hold it all, we compress down the margins so it fits into a 320 space
*/
@media (max-width: 380px) {
  #gem-page-header {
    text-align: left;
  }

  #gem-page-header .logo {
    margin: 11px 5px;
  }
  
  #gem-page-header .gem-page-title {
    margin: 17px 0px;
    position: static;
  }
  
  #gem-page-header .sandwich {
    float: right;
    margin: 17px 5px;
  }
  
  #onlineCount {
    padding: 2px 5px;
  }
}

/* SCROLLERS */
.scroller {
  background: #777 url('/images/scroller-arrow.png') center no-repeat;
  bottom: 0;
  cursor: pointer;
  height: 30px;
  opacity: .5;
  position: fixed;
  width: 100%;
  z-index: 10;
}

/* SANDWICH */
.sandwich {
  cursor: pointer;
}

.sandwich .slice {
  background: #C1D82F;
  height: 7px;
  width: 35px;
}

.sandwich .slice:nth-child(1), .sandwich .slice:nth-child(2) {
  margin-bottom: 7px;
}

.sandwich-menu {
  height: 0;
  margin: 0;
  overflow: hidden;
}

.sandwich-menu li {
  margin-bottom: 2px;
}

.sandwich-menu li:last-child {
  margin-bottom: 0px;
}

.sandwich-menu li a {
  background: #c1d72e;
  color: #000;
  display: block;
  font-size: 130%;
  padding: 10px 15px;
}

.sandwich-menu li a:hover,
.sandwich-menu li a:active {
  color: #FFF;
  text-decoration: none;
}

/* TAGS */
.tag-delicate, .tag-delicate:hover, .tag-delicate.active {
background-color: #B5B2D9;
}
.tag-robust, .tag-robust:hover, .tag-robust.active {
background-color: #B32317;
color: #FFF !important;
fill: #FFF;
}
.tag-playful, .tag-playful:hover, .tag-playful.active {
background-color: #F89828;
}
.tag-serious, .tag-serious:hover, .tag-serious.active {
background-color: #00457C;
color: #FFF !important;
fill: #FFF;
}
.tag-organic, .tag-organic:hover, .tag-organic.active {
background-color: #78A22F;
}
.tag-geometric, .tag-geometric:hover, .tag-geometric.active {
background-color: #C9CBCC;
}
.tag-stable, .tag-stable:hover, .tag-stable.active {
background-color: #ACA095;
color: #FFF !important;
fill: #FFF;
}
.tag-dynamic, .tag-dynamic:hover, .tag-dynamic.active {
background-color: #FFC425;
}
.tag-relaxing, .tag-relaxing:hover, .tag-relaxing.active {
background-color: #AFDDD2;
}
.tag-exciting, .tag-exciting:hover, .tag-exciting.active {
background-color: #EE3424;
}
.tag-majestic, .tag-majestic:hover, .tag-majestic.active {
background-color: #522E91;
color: #FFF !important;
fill: #FFF;
}
.tag-humble, .tag-humble:hover, .tag-humble.active {
background-color: #9A5107;
color: #FFF !important;
fill: #FFF;
}


/* Twitter button */
.twitterBtn iframe {
    position: relative;
    top: 5px;
}