/* app css stylesheet */

[ng\:cloak], [ng-cloak], .ng-cloak { display: none; }

body {
   font-family: 'Open Sans', sans-serif;
   background-color: #FAFAFA;
   padding: 50px 0;
}

h1 {
   font-size: 84px;
   color: #E7852E;
   margin: 20px 0;
   background: -webkit-linear-gradient(#E7852E, #f3c445);
   -webkit-background-clip: content-box;
   -webkit-text-fill-color: transparent;
}

h1 img {
   text-align: center;
   width: 100px;
   margin-right: 25px;
}

h2 {
   font-size: 28px;
   line-height: 36px;
}

a i[class*="icon-"]:hover {
   text-decoration: none;
}

/* we leave the href="" off of ng events so we don't trigger angular's router,
   but that causes the pointer to disappear in IE, so add it back here */
button, a {
   cursor: pointer;
}

nav a, .nav a, .sidebar a, .modal-footer a {
   color: #E59E37;
}

.nav li, .nav li a {
   -moz-user-select: none;
   -webkit-user-select: none;
   -ms-user-select: none;
}

nav a:hover, .nav a:hover, .sidebar a:hover, .modal-footer a:hover {
   color: #E7852E;
}

div[ng-view] {
   min-height: 350px;
}

nav {
   padding: 0;
   margin: 0 0 20px;
   position: relative;
   z-index: 2;
}

nav .nav {
   font-size: 16px;
   line-height: 46px;
   margin: 15px 20px 0 0;
}

.pull-right {
   margin-left: 15px;
}

a.brand {
   font-size: 42px;
   font-weight: bold;
   line-height: 46px;
   text-decoration: none;
   color: #E59E37;
   background: -webkit-linear-gradient(#E7852E, #f3c445);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
}

a.brand:hover {
   text-decoration: none;
}

a.brand img {
   height: 42px;
   margin-right: 6px;
   position: relative;
   top: -8px;
}

/** THE FEED LIST TO THE LEFT */
#hearth header {
   text-align: right;
   margin: 0 0 10px;
}

#searchbox {
   position: relative;
   margin-bottom: 0;
}

#searchbox .input-append {
   width: 85%;
}

#searchbox button.btn, #searchbox button.btn:focus, #searchbox button.btn:hover {
   background-color: #DE8B1F;
   color: white;
   background-position: inherit;
   background-image: none;
}

.sidebar label.checkbox {
   display: block;
   color: #555;
}

#filters {
   margin-bottom: 15px;
   padding-right: 0;
   padding-left: 0;
}

#filters li {
   width: 100%;
   position: relative;
   font-size: 14px;
}

#filters li:hover a, #filters li.active:hover a {
   background-color: #eee;
}

#filters li a {
   color: #555;
   white-space: nowrap;
   text-overflow: ellipsis;
   overflow: hidden;
}

#filters li a:hover {
   color: #000;
}

#filters li aside {
   display: block;
   position: absolute;
   right: 0;
   top: 2px;
   background-color: #fafafa;
   z-index: 5;
   font-size: 16px;
   padding-left: 4px;
}

#filters li:hover aside {
   background-color: #eee;
}

#filters li aside a:hover {
   cursor: pointer;
   text-decoration: none;
}

#hearth.isDemo #filters li aside {
   display: none;
}

#filters li i.icon-remove-sign {
   color: #946b6e;
}

#filters li i.icon-remove-sign:hover {
   color: red;
}

#filters li i.icon-ok {
   color: #8a998c;
   margin-right: 3px;
}
#filters li.all i.icon-ok {
   margin-right: 23px;
}
#filters li i.icon-ok:hover {
   color: #39e03c;
}

#filters li span {
   color: #9A9A9A;
   padding-left: 5px;
   font-weight: normal;
}


#filters li.active a,
#filters li.active a:hover,
#filters li.active a:focus {
   font-weight: bold;
   border-radius: 0;
   color: #000000;
   text-shadow: none;
}
#filters li.active a {
   background-color: transparent;
}

#filters li:hover,
#filters li.active:hover,
#filters li:hover aside {
   background-color: #eee;
}

#filters li.active i.icon-circle-blank,
#filters li.active i.icon-bullseye,
#filters li i.icon-circle {
   display: none;
}

#filters li.active i.icon-circle {
   display: inline-block;
}

/** FEEDS (the article grid)
  *********************************/

#feeds {
   position: relative;
}

#feeds > article {
   float: left;
   overflow: hidden;
   position: relative;
   border-radius: 2px;
   background-color: white;
   text-overflow: ellipsis;
   height: 350px;
   margin: 0 .49% .49% 0;
   width: 32%;
   border: 1px solid #dddddd;
   cursor: pointer;
}

#feeds > article:hover {
   border-color: orange;
}

#feeds > article:hover:after {
   opacity: .3;
   position: absolute;
   left: 0;
   bottom: 0;
   top: 0;
   right: 0;
   height: auto;
   border-radius: 2px;
   content: " ";
   z-index: 250;
   background: #555;
   filter: none;
}
#feeds > article > * {
   margin-left: 10px;
   margin-right: 10px;
}

#feeds > article > footer {
   display: none;
   position: absolute;
   bottom: 0;
   min-height: 3em;
   width: 100%;
   border-radius: 2px;
   z-index: 251;
   background-color: #444;
   color: #ffe7bb;
   margin: 0;
}

#feeds > article:hover footer {
   display: block;
}

#feeds > article:hover footer {
   display: block;
}

#feeds > article footer a {
   color: #8a998c;
   font-size: 24px;
   line-height: 24px;
   position: absolute;
   top: 50%;
   margin-top: -12px;
   right: 5px;
   float: inherit;
}

#feeds > article > footer p {
   margin: 4px 30px 4px 10px;
   font-size: 12px;
   line-height: 18px;
}

#feeds > article footer a:hover {
   color: #39e03c;
}

#feeds > article [ng-bind-html] img {
   max-width: 100%;
}

#feeds > article h2 {
   max-height: 2.6em;
   font-size: 16px;
   line-height: 20px;
   text-overflow: ellipsis;
   overflow: hidden;
}

#feeds > i.icon-spin {
   position: absolute;
   top: 20%;
   left: 20%;
   font-size: 10em;
   color: orange;
   opacity: .5;
}

#feeds > h3 {
   margin-top: 2.4em;
   color: #e7b16c;
   text-align: center;
}

#feeds > i.icon-spin,
#feeds > h3,
#feeds > i.icon-spin,
#hearth.noArticles.isDemo #feeds > h3.done {
   display: none;
}

#hearth.loading #feeds > i.icon-spin {
   display: block;
}

#hearth.noFeeds #feeds > h3.start {
   display: block;
}

#hearth.noArticles #feeds > h3.done {
   display: block;
}

#feeds > h3.done i.icon-smile {
   display: block;
   font-size: 6em;
}

a [class^="icon-"]:before, a [class*=" icon-"]:before {
   cursor: pointer;
}

#feeds > article img {
   padding: 0 4px;
}

#feeds > article .left, #feeds > article .wp-post-image {
   float: left;
   margin-right: 5px;
}

#feeds > article .right {
   float: right;
   margin-left: 5px;
}

#feeds > article:after {
   position: absolute;
   bottom: 0;
   left: -10%;
   display: block;
   width: 120%;
   height: 25px;
   content: " ";
   background: -moz-linear-gradient(top,  rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%); /* FF3.6+ */
   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0)), color-stop(100%,rgba(255,255,255,1))); /* Chrome,Safari4+ */
   background: -webkit-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); /* Chrome10+,Safari5.1+ */
   background: -o-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); /* Opera 11.10+ */
   background: -ms-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); /* IE10+ */
   background: linear-gradient(to bottom,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); /* W3C */
   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
}

#feeds > article[data-feed="whatif"] h1 {
   display: none;
}

#foot {
   text-align: center;
   color: #bbbbbb;
   margin-top: 40px;
}

#foot aside {
   line-height: 34px;
}

#foot a {
   text-decoration: underline;
   color: #bbbbbb;
}

#foot ul li:last-child:after {
   content: "";
}

article.box {
   padding: 25px;
   border: 1px solid #bbbbbb;
   position: relative;
}

article.box h2 {
   margin-top: 0;
}

article.box a[data-dismiss="box"] {
   position: absolute;
   top: 10px;
   right: 10px;
   font-size: 20px;
}

#login h2 {
   margin-top: 0;
   text-align: center;
}

#login ul {
   text-align: center;
   position: relative;
}

#login ul li {
   width: 50%;
   float: left;
   padding: 0;
   position: relative;
}

#login ul li .btn {
   white-space: nowrap;
   display: block;
   width: auto;
   margin-right: 10px;
   margin-bottom: 10px;
   line-height: 2em;
   padding: 6px;
}

#addFeeds {
   display: block;
}

#addFeeds a.dropdown-toggle {
   display: block;
   width: auto;
   font-size: 18px;
   line-height: 24px;
   text-decoration: none;
   padding: 8px;
   margin: 15px 0;
}

#addFeeds a.dropdown-toggle:hover {
   background-color: #eee;
}

#addFeeds a.dropdown-toggle i {
   display: inline-block;
   margin: 4px 0;
}

#addFeeds .dropdown-menu {
   max-height: 200px;
   overflow: auto;
}

#about {
   margin-bottom: 20px;
}

#about h2, #about h3 {
   /*text-align: center;*/
}

#about i {
   color: #E7852E;
}

section.sidebar {
   min-height: 500px;
}

.nav-list li {
   line-height: 28px;
   font-size: 20px;
}

label {
   font-weight: bold;
}

label.checkbox {
   font-weight: normal;
}

form[novalidate] input.ng-invalid.ng-dirty {
   border-color: #fa0300;
   background-color: #ffc;
}

form[novalidate] input.ng-valid.ng-dirty {
   border-color: #4cb246;
}

form[novalidate].ng-valid button[disabled],
form[novalidate].ng-invalid button[type="submit"] {
   display: none;
}

form[novalidate].ng-valid button[type="submit"],
form[novalidate].ng-invalid button[disabled] {
   display: inline-block;
}

.modal input.xxlarge {
   max-width: 510px;
}

button {
   border-radius: 0;
}

#login .btn, .modal-footer.bigbuttons button {
   font-size: 24px;
   line-height: 30px;
   padding: 6px 16px;
   border-radius: 0;
}

.modal-footer.bigbuttons {
   padding: 12px;
}

.modal-footer.bigbuttons .btn {
   margin-left: 20px;
}

.modal {
   width: 800px;
   margin-left: -400px;
   left: 50%;
   top: 10%;
}

.modal-footer {
   padding: 2px;
}

div.modal.article .modal-footer {
   border-bottom: 1px solid #ddd;
   -webkit-border-top-left-radius: 10px;
   -webkit-border-top-right-radius: 6px;
   -moz-border-radius-topleft: 6px;
   -moz-border-radius-topright: 6px;
   border-top-left-radius: 6px;
   border-top-right-radius: 6px;
   -webkit-border-bottom-left-radius: 0;
   -webkit-border-bottom-right-radius: 0;
   -moz-border-radius-bottomleft: 0;
   -moz-border-radius-bottomright: 0;
   border-bottom-left-radius: 0;
   border-bottom-right-radius: 0;
}

.modal-footer ul {
   margin-bottom: 0;
}

.modal-footer ul li {
   font-size: 24px;
   line-height: 28px;
   padding: 2px 4px;
   margin: 0 2px;
}

.modal-footer ul li:hover {
   background-color: #ddd;
}

@media (max-width:480px) {
   .modal {
      margin: 5px;
   }
}

@media (max-width:767px) {
   #feeds > article {
      width: 100%;
      height: auto;
      min-height: 100px;
      max-height: 350px;
      margin: 10px;
   }

   section.sidebar {
      width: auto;
      min-height: inherit;
      margin: 15px;
      background-color: #ddd;
      padding: 10px;
   }
}

/* the sizing of this @media tag, and its contents, are coupled with controllers.js ArticleCtrl's ABSOLUTE_WIDTH */
@media (max-width:850px) {
   .modal {
      position: absolute;
      width: auto;
      margin: 20px;
      top: 0;
      left: 0;
      font-size: 14px;
      max-height: none;
   }

   .modal-body {
      max-height: none;
      overflow: visible;
   }

   .modal-footer ul li {
      font-size: 18px;
      line-height: 22px;
   }
}


@media (min-width:768px) and (max-width:979px) {
   #searchbox .input-append {
      width: 75%;
   }
}

@media (min-width:1200px) {
   #feeds > article {
      width: 24%;
   }
}

@media (max-width:870px) {
   #GitHubBanner { display: none; }
}