@font-face
{
  font-family: Lato;
  src: url('../fonts/Lato.ttf');
}

@font-face
{
  font-family: Consolas;
  src: url('../fonts/Consolas.ttf');
}

body {
  background: url(../img/background.jpg);
}

.page-header {
  height: 256px;
  min-width: 1200px;
  margin-top: 0px;
  margin-bottom: 0px;
  padding-top: 10px;
  background-color: rgba(0, 0, 0, 0.6);  
}

.page-header h1 {
  display: inline-block;
  font-family: Consolas;
  font-size: 54px;
  color: #fff;
  position: relative;
}

.page-header p {
  font-size: 18px;
  font-family: Consolas;
  color: #666;
  font-style: italic;
}

#logo {
  display: inline-block;
  height: 256px;
  width: 256px;
  position: relative;
  top: -13px;
  background: url(../img/logo.png);
}

.label-pool {
  height: 256px;
}

.label-pool .label {
  font-size: 16px;
  line-height: 32px;
}

.label-pool .label.disabled {
  color: #aaa;
  background-color: #666;
}

.label-pool .label:hover {
  cursor: pointer;
}

.label-pool .label.active {
  font-size: 32px;
}

#above-head {
  width: 384px;
  height: 384px;
  position: absolute;
  left: calc(50% - 576px);
  overflow: hidden;
  display: hidden;
}

#above-head.slide-in {
  display: inline-block;
  z-index: 1;
}

#above-head img {
  position: relative;
  width: 384px;
  height: 384px;
  right: -384px;
  opacity: 0;
  transition: all 0.6s;
  -moz-transition: all 0.6s;
  -webkit-transition: all 0.6s;
  -o-transition: all 0.6s;
}

#above-head.slide-in img {
  right: 0px;
  opacity: 1;
  z-index: 1;
}

#above-content {
  width: 768px;
  height: 384px;
  background-color: rgba(0,0,0,0.9);
  position: absolute;
  right: calc(50% - 576px);
  display: hidden;
  opacity: 0;
  transition: all 0.6s;
  -moz-transition: all 0.6s;
  -webkit-transition: all 0.6s;
  -o-transition: all 0.6s;
}

#above-content.slide-in {
  display: inline-block;
  opacity: 1;
  z-index: 1;
}

#above-content .repo-desc {
  color: #aaa;
  font-family: Consolas;
  font-style: italic;
  font-size: 24px;
  padding: 20px 10px;
}

#above-content .btn-return {
  position: absolute;
  right: 0px;
  bottom: 0px;
  color: #fff;
  background-color: #007fff;
}

#above-content .btn-return:hover {
  cursor: pointer;
}

#repo-list {
  margin-left: calc(50% - 576px);
}

#repo-list img {
  width: 128px;
  height: 128px;
  position: relative;
  left: 0px;
  opacity: 1;
  transition: all 0.6s;
  -moz-transition: all 0.6s;
  -webkit-transition: all 0.6s;
  -o-transition: all 0.6s;
}

#repo-list td a.slide-out img {
  left: -128px;
  opacity: 0;
}

#repo-list td a.fade-out img {
  opacity: 0;
}

#repo-list a.masked img {
  opacity: 0;
}

#repo-list td .repo-desc {
  display: none;
}

#angularjs img {
  background-color: rgba(44,44,44,0.7);
}
#backbonejs img {
  background-color: #fff;
}
#bootstrap img {
  background-color: rgba(92,66,131,0.3);
}
#bower img {
  background-color: rgba(255,204,47,0.7);
}
#cohort img {
  /*background-image: url(../img/cohort.png);*/
}
#cordova img {
  background-color: rgba(255,255,255,0.3);
}
#css3 img {
  background-color: rgba(53,156,214,0.3);
}
#es6 img {
  background-color: #fff;
}
#grunt img {
  background-color: rgba(251,169,25, 0.3);
}
#handlebars img {
  background-color: #fff;
}
#html5 img {
  background-color: rgba(241,101,41,0.3);
}
#ionic img {
  background-color: #fff;
}
#jquery img {
  background-color: rgba(7,105,173,0.3);
}
#jquery-mobile img {
  background-color: rgba(16,128,64,0.3);
}
#jquery-ui img {
  background-color: rgba(178,73,38,0.3);
}
#json-loop img {
  /*background-image: url(../img/json-loop.png);*/
}
#nodejs img {
  background-color: rgba(51,51,51,0.7);
}
#lawe img {
  /*background-image: url(../img/lawe.png);*/
}
#meanjs img {
  background-color: #fff;
}
#meteor-cantas img {
  /*background-image: url(../img/meteor-cantas.png);*/
}
#mocha img {
  background-color: rgba(134,100,71,0.3);
}
#my-concerns img  {
  /*background-image: url(../img/my-concerns.png);*/
}
#qunit img {
  background-color: rgba(57,15,57,0.5);
}
#reactjs img {
  background-color: rgba(34,34,34,0.7);
}
#requirejs img {
  /*background-image: url(../img/require.js.png);*/
}
#ueis img {
  /*background-image: url(../img/ueis.png);*/
}
#yeoman img {
  background-color: #fff;
}
#mongodb img {
  background-color: rgba(64,40,23,0.7);
}
#karma img {
  background-color: #fff;
}
#less img {
  background-color: rgba(29,54,93,0.3);
}
#meteor img {
  background-color: #fff;
}