@font-face {
  font-family: 'FontAwesome';
  src: url('../type/fontawesome-webfont.eot'); /* IE9 Compat Modes */
  src: url('../type/fontawesome-webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../type/fontawesome-webfont.woff') format('woff'), /* Modern Browsers */
       url('../type/fontawesome-webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('../type/fontawesome-webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}

html,body{

  background:url('../img/noise.png');

}

body *{

  font-weight: 400;

}

h3,
h3 *{

  font-weight: 200;

}

#user-alert-bar{

  text-align: center;

}

#page {
    box-shadow: 0px 0px 10px 2px #d0d0d0;
    background-color: #fff;
    margin:20px auto;
    padding: 8px;
}

#error-content-container{

  display: table;
  height: auto;
  width: 100%;

}

#error-content{

  text-align: center !important;
  float: none;
  padding: 150px 0;

}

#error-content > div{

  width: 60%;
  margin: 0 auto;

}

#error-content h3 {

  line-height: 2rem;

}

.container{

  position: relative;

}

#footer {
    text-align: center;
    font-size: 12px;
    padding: 12.5px 0 7.5px;
    border-top: 1px solid #ddd;
}

.nav-tabs{

  margin-bottom: 0;

}

.listing h3{

  text-align: center;
  visibility: visible;
  padding: 20px 0;
  margin: 0;

}

.listing-key{

  position: relative;
  width: 100%;
  height: auto;

}

.listing-key span{

  vertical-align: bottom;
  line-height: 2.2rem;
  letter-spacing: .06rem;
  padding: 8px;

}

.listing-key span:nth-child(1){
position: absolute;
left: 1.5%;
padding: 0;
margin: 0;

}

.listing-key span:nth-child(2){

padding-left: 25%;

}

.listing-key span:nth-child(3){

  position: absolute;
  width: auto;
  padding: 0;
  right: 2.5%;

}

.mobile-accordion-header{

  display: none;
  visibility: hidden;

}

.mobile-accordion-header a:visited , 
.mobile-accordion-header a:hover   , 
.mobile-accordion-header a:active{

  text-decoration: none;
  outline: none;

}

.mobile-accordion-header a:hover{

  cursor: hand;
  cursor: pointer;

}

.listing-item{ 

  position: relative;
  width: 100%; 
  padding: 8px 0;

}

.listing-item .subreddit-url a{

  font-weight: 400;

}

.rank-value a{

  margin-left: 1.5px;

}

.listing-item:nth-child(odd){ 

  background: #f9f9f9;
  border-bottom: 1px solid #dddddd;
  border-top: 1px solid #dddddd;

}

.listing-stat{

  position: absolute;
  width: auto;
  bottom: 22.5%;
  padding: 0;
  right: 2.5%;
  text-align: left;

}

.growth-stat{

  position: absolute;
  width: auto;
  bottom: 22.5%;
  padding: 0;
  right: 2.5%;
  text-align: left;

}

.rank-value{ position: absolute; left: 2.5%; text-align: center; }

.subreddit-url{ 

  display: block;
  width: 50%;
  margin: 0 auto;
  text-align: left;

}

/* Search Bar */

#searchField{

  display: none;

}

#search-bar{

  position: absolute;
  display: block;
  right: 1px;
  bottom: 0;

}

#search-submit{

  margin-left: 5px;
  margin-top: -1px;
  font-size: .8rem;

}

.navbar-form .form-control{

  height: 16px !important;

}

.nsfw-search{

  color: #FF1493 !important;

}

.sfw-search{

  color: #0088cc;

}

.dropdown-toggle{

  overflow: visible;

}

.dropdown-option{

  display: none !important;
  visibility: hidden !important;

}

/* Search Results Page */

#search-results-container{

  text-align: center;
  margin: 0

}

#search-results-parent > h3{

  width: 100%;
  text-align: center;
  margin: 25px 0;

}

#search-results-parent h3 span{

  font-style: italic;

}

.search-result-item{

  position: relative;
  width: 95%;
  display: inline-block;
  text-align: left;
  padding: 2.5%;

}

#search-results-container > div:nth-child(odd){ 

  background: #f9f9f9;
  border-top: 1px solid #dddddd;
  border-bottom: 1px solid #dddddd;

}

#search-results-container > div:nth-last-child(1){

  border-bottom: none;

}

.result-item-slug a{

  font-size: 1.05rem;

}

.result-item-title-container{

display: inline-block;
vertical-align: top;
width: 60%;
margin-left: 2.5%;
line-height: 1rem;

}

.result-item-title{

  font-size: .75rem;

}

.result-item-title:before{

  content: " - ";

}

.result-item-description{

  font-size: 1rem;
  margin-top: 7.5px;
  line-height: 1.2rem;

}

.subscriber-count-container{

  position: absolute;
  top:0;
  bottom: 0;
  right: 0;
  width: 15%;

}

.subscriber-count-table{

  display: table;
  width: 100%;
  height: 100%;
  text-align: center;

}

.subscriber-count{

  display: table-cell;
  vertical-align: middle;
  text-align: center;
  font-size: .9rem;
  line-height: 1.25rem;

}

.result-item-rank-container{

  position: absolute;
  display: block;
  vertical-align: top;
  right: 15%;
  top:0;
  bottom: 0;
  width: 20%;

}

.result-item-rank-table{

  display: table;
  width: 100%;
  height: 100%;
  text-align: center;

}

.rank-item{

  position: relative;
  display: table-cell;
  width: 20%;
  height: 20%;
  vertical-align: middle;
  text-align: center;

}

.rank-item-inner-container:hover{

  cursor: hand;
  cursor: pointer;

}

.rank-item-value{

  display: inline-block;
  margin: 2.5px 0;
  font-size: .9rem;
  letter-spacing: .1rem;
  font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
  font-weight: 200;

}

.rank-item .rank-icon{

  width: 30px;
  height: auto;
  display: inline-block;
  color: black;
  opacity: .5;

}



.rank-item:nth-child(1) .rank-item-inner-container:hover .rank-icon{

  transition: all .1s ease-in-out;
  color: orange;
  opacity: 1;


}

.rank-item:nth-child(2) .rank-item-inner-container:hover .rank-icon{

  transition: all .1s ease-in-out;
  color: blue;
  opacity: 1;


}

.rank-item:nth-child(3) .rank-item-inner-container:hover .rank-icon{

  transition: all .1s ease-in-out;
  color: green;
  opacity: 1;


}

.rank-item-inner-container:hover .alt-text-bubble{

  display: block;

}

.alt-text-bubble{

  position: absolute;
  display: none;
  width: 150px;
  left: 50%;
  right: 50%;
  margin-left: -75px;
  margin-top: 60px;
  text-align: center;
  padding: 5px 0;
  background: white;
  border-radius: 5px;
  z-index: 1000;
  box-shadow: 0px 0px 10px 2px #d0d0d0;
  color: black !important;

}

.alt-text-bubble.sfw{

  border: solid 1px #08c;

}

.alt-text-bubble.nsfw{

  border: solid 1px #FF1493;
  
}

.alt-text-bubble.sfw:before{

  border-color:#08c transparent;

}

.alt-text-bubble.nsfw:before{

  border-color:#FF1493 transparent;
  
}

.alt-text-bubble:before{
content:"";
position:absolute;
border-style:solid;

/* reduce the damage in FF3.0 */
display:block;
width:0;
top:-15px; /* value = - border-top-width - border-bottom-width */
bottom:auto;
left:50%;
right:50%; /* controls horizontal position */
border-width:0 14px 14px;
margin-left: -14.5px;

}

.alt-text-bubble:after{
content:"";
position:absolute;
border-style:solid;
border-color:#fff transparent;
/* reduce the damage in FF3.0 */
display:block;
width:0;
top:-13px; /* value = - border-top-width - border-bottom-width */
bottom:auto;
left:50%;
right:50%; /* value = (:before right) + (:before border-right) - (:after border-right) */
margin-left: -13px;
border-width:0 13px 13px;
}

/*( Pagination )*/

.pagination{

  position: relative;
  text-align: center;
  margin-bottom: 0;
  padding: 2.5px 0 15px;

}

.pagination span{

  display: block;
  float: left;

}

.pagination .pagination-arrow{

  display: block;
  margin-top: -1.5px;

}

#first-arrow{

  float: left;

}

#last-arrow{

  float: right;

}

.nsfw{ color: #FF1493; }


.nav{

  position: relative;

}

.dropdown-toggle{

  overflow: visible;

}

#pagination-container{

  position: relative;
  width: auto;
  height: auto;

}

#mobile-pagination{

  display: none;

}

@media only screen and (min-width : 768px) and (max-width: 992px) {


  .listing{

    font-size: 95%;

  }


  .listing-key span:nth-child(2){

    padding-left: 20%;

  }

  .subreddit-url{ 

    display: block;
    width: 60%;
    margin: 0 auto;
    text-align: left;

  }

}

@media only screen and (max-width : 768px) {


  #page{

    margin-top: 50px;

  }

  #search-bar .input-prepend{

    width: 100%;

  }

  .input-prepend .form-control{

    width: 55%;

  }

  #search-bar{

    position: relative;
    display: block !important;
    width: 100%;
    text-align: center;
    margin-top: -87.5px;

  }

  .search-result-item{

    text-align: center;

  }

  .result-item-title-container{

    width: 90%;
    text-align: center;
    padding-bottom: 15px;

  }

  .result-item-slug a{

    font-size: 1.25rem;

  }

  .result-item-title{

    display: block;
    padding-top: 2.5px;
    font-size: .8rem;

  }

  .result-item-title:before{

    content: "";

  }

  .result-item-rank-container{
    float: none;
    position: relative;
    left: 0;
    right: 0;
    display: inline-block !important;
    width: 150px !important;

  }

  .subscriber-count-container{
    float: none;
    position: relative;
    left: 0;
    right: 0;
    display: inline-block !important;
    width: 100px !important;
    top: 3.5px;

  }

  .result-item-rank-container,
  .subscriber-count-container{

    position: relative;
    margin: 0;
    padding: 0;

  }

  .result-item-description{

    margin:0;
    padding-top: 15px;
    font-size: .95rem;
    text-align: center;

  }

    #error-content > div{

      width: 80%;

    }

    #error-content > div > h3{

      font-size: 1.25rem;

    }

    /* enable smaller screen pagination */

      /* pagination */


  #pagination-container , .pagination{

    height: 35px !important;
    padding: 0!important;
    margin: 25px 0 !important;


  }

  #mobile-pagination{

    width: 50px !important;
    display: inherit;
    position: absolute;    
    z-index: 10000;
    left: 50%;
    right: 50%;
    bottom: 2.5px !important;
    margin-left: -25px;

  }

  .pagination *{

    border: none !important;

  }

  #first-page , #previous-page , #next-page , #last-page{

    position: absolute;
    bottom: 6.5px;
  }

  #first-page , #previous-page{

    left: 0;

  }

  #next-page , #last-page{

    right: 0;

  }

  #next-page{

    right: 20%;

  }

  #previous-page{

    left: 20%;

  }

  #previous-page a:after{

    content: '  Prev';

  }

  #next-page a:before{

    content: 'Next  ';

  }

  .pagination ul{

    box-shadow: none;

  }

  .page-link{

    display: none !important;
    visibility: hidden !important;

  }

}

@media only screen and (max-width : 480px) {

    .search-result-item{

      padding: 10px 0;

    }

    .result-item-rank-container *,
    .subscriber-count{


      font-size: 95%;

    }

    .result-item-description{

      text-align: center;

    }

      /* enable accordion anchors */
      #listing-parent{

        padding-top: 25px;

      }

    .listing-header{

      display: none;
      visibility: hidden;

    }

    .mobile-accordion-header{

      display: block;
      visibility: visible;
      text-align: center;

    }

    .mobile-accordion-header a{

      display: block;
      width: 100%;
      height: 100%;

    }

    .listing-container > .row-fluid > div:nth-child(2) > .mobile-accordion-header,
    .listing-container > .row-fluid > div:nth-child(3) > .mobile-accordion-header{

      border-top: solid 1px #ddd;

    }

    .listing-key , .listing-item{

      display: none;

    }

    .active-listing-item{

      display: inherit !important;

    }

    /* other stuff */

  .subreddit-nav-suffix{

    display: none;
    visibility: hidden;

  }

  body{

    width: 95%;
    padding: 0 0 0 2.5% !important;

  }

 /* .listing-stat{

   width: auto;
   text-align: right;
   right: 0;

  }*/

    .listing-key span:nth-child(2){

    padding-left: 22.5%;

  }

  .listing{

    font-size: 110%;

  }

  .listing-item{

    padding: 10px 0;

  }

  .listing-stat , .growth-stat , .rank-value{

    bottom: 25% !important;

  }

  .subreddit-url{

    width: 55%;

  }

   #error-content{

    padding: 50px 0 75px;

  }

  #error-content > div{

    width: 100%;

  }

  #error-content > div > h3{

    font-size: 1.15rem;

  }

  #error-content > div > p{

    text-align: left;
    width: 95%;
    margin: 0 auto;
    padding-left: .5%;

  }


}

@media only screen and (max-width : 480px) and ( orientation: portrait ){

  .input-prepend .form-control{

    width: 50%;

  }

  #first-page a , #previous-page a ,
  #next-page a , #last-page a{

    padding: 0;

  }

  #mobile-pagination{

    bottom: 35px;

  }



}