/* @group main styles -------------------- */

@import url( "normalize.css" );

body{
  font-family: "Myriad Pro", "Lucida Grande", Arial, sans-serif;
  font-size:16px;
  line-height:1.5;
  background-color: #f8f8f8;
}

.page-header {
  width: 300px; height: 100%;
  background-color: #15171b;
  position: fixed;
  left: 0; top: 0; bottom: 0;
  color: white;
  text-align: center; }

.page-header .img-preview {
  width: 100%;
  height: 170px;
  position: relative;
  z-index: 1;
  overflow: hidden;
}

.page-header .banner-img {
  width: 100%;
  position: 1; }

.page-header .gif-preview {
  width: 100%;
  min-height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
  display: none;
}

.page-header .gif-preview[src*=".gif"] {
  display: block;
}

.page-header a {
  color: #bdf5da;
  font-weight: bold; }

.gif-listing {
  margin-left: 300px;
  padding: 20px;
  overflow: hidden; }

/*Style the list of categories*/
.gif-listing > ul {
  margin: 0; padding: 0;
  list-style: none;
  /*experimental column support*/
  -moz-column-gap: 20px;
  -moz-column-fill: auto;
  -webkit-column-count: 3;
  -webkit-column-gap: 20px;
  -webkit-column-fill: auto;
  column-count: 3;
  column-gap: 20px;
  column-fill: auto; }

/*Style individual category cards*/
.gif-listing > ul > li {
  background-color: rgba(189,245,218,.2);
  background-color: white;
  border-radius: 10px;
  padding: 10px 20px;
  margin: 0 0 20px 0;
  text-transform: capitalize;
  font-size: 24px;
  /* experimental column support */
  -moz-column-break-inside: avoid;
  -webkit-column-break-inside: avoid;
  column-break-inside: avoid; }

/*Style the sub-list of gifs*/
.gif-listing > ul > li > ul {
  margin: 4px 0 0;
  padding: 8px 0 0;
  list-style: none;
  border-top: 1px solid #dae3e3;
  overflow: hidden;
  text-overflow: ellipsis;
}

/*Style individual gif listing items*/
.gif-listing > ul > li > ul > li {
  text-overflow: ellipsis;
  width: 100%;
  overflow: hidden;
  font-size: 16px;
  text-transform: none; }

/*Style individual gif links*/
.gif-listing > ul > li > ul > li a {
  color: #5d9379;
  text-decoration: none; }

.gif-listing > ul > li > ul > li a:hover {
  color: #2a2f37;
  text-decoration: underline; }
  
.loadingIndicator{
  height: 100%;
  z-index: 10;
  position: relative;
  line-height: 150px;
  font-size: 250%;
  display:block;
}

/* @end main styles */