@import url(http://fonts.googleapis.com/css?family=Exo:400,700,900,400italic);
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,600);

body { 
      color:black;
      background:#ededed;
      font-family: 'Open Sans', sans-serif;
      font-size: 16px;
      font-style: semi-bold;
      font-weight: 400;
     }

div#content_primary, .span8, .span4, .span12 {color:#2f2f2f; background:#ededed;}
.span8, .span4 {padding-bottom: 20px;}
div#intro {background:white; margin-top: 0px; padding: 25px 20px;}

h1, h2, h1 small, h2 small, h3.about {
   font-family: 'Exo', sans-serif;
   font-style: bold;
   font-weight: 700;
   }

h3, h4, h5, h6, h3 small, h4 small, h5 small, h6 small, p.more 
{
font-family: 'Exo', sans-serif;
font-style: bold;
font-weight: 400;
}
h3.about {padding-bottom: 10px;}

.navbar .brand, .navbar .nav > li, footer, .span4 ul#respected {
  font-family: 'Exo', sans-serif;
  font-style: normal;
  font-weight: 400;
}

.span8 h2, .span4 h2, .span8 h3, .span4 h3, .span8 h4, 
.span4 p, footer p {margin:20px 20px 0;}
.span8 p {margin:0 20px 10px;}

.span8 h3.title {margin:0 20px -20px; line-height: 35px;} 
.span8 h3.date {margin:0 20px 15px; line-height: 25px; font-size: 18px;}

p.error {font-size: 18px; margin: 20px;}
p.more {font-size: 18px; margin: 20px;}
p.respectedlinks {padding: 10px 0 20px;} 
p.credit {font-size: 14px; margin: 3px 20px 0;}
p.legal {font-size: 15px; margin: 10px 20px 0;}
p.iconolink {margin-top: 20px;}
p.listed {margin: -21px 0 0 25px;}
div#intro p {font-size: 18px; line-height: 1.5;}

.kitten {margin:20px 60px;}
.kitten img {width:350px; margin-bottom: 20px;}
.kitten p, .kitten p.error {margin-left:-20px;}

ol,ul{list-style:none; padding: 0; margin: 0 0 10px 20px;}
div#sidebar_archives h3 {font-size: 20px; padding-top:0; margin-top:0;}
div#sidebar_archives ul#categories, 
div#sidebar_archives ul#months {width:120px; margin-bottom: 10px;}

.span8 ul#articles {list-style:circle inside; padding: 20px 0 10px; margin: 0 0 0 20px;}
.span8 ul#articles li {line-height: 20px;}
.span4 ul#respected {list-style:none; padding: 20px 0; margin: 0 0 10px 20px;}
.span4 ul#respected li {line-height: 28px;}
.span4 ul#respected i.icon-link {color: #6f6f6f; margin-top: 2px; padding: 2px 3px 0 0;}
ul.about {list-style:none; padding: 10px 0; margin-bottom: 10px;}
ul.about li {padding: 5px 0;} 

i.icon-rss {color: #ff6600; margin-top: 1px; padding: 1px 5px 6px 0;}
i.icon-ok-sign {color: #29a229; font-size:18px;}
i.icon-starfull {color: #e7e410; font-size:18px; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);}
i.icon-linkedin {color: #000000; font-size:24px;}
i.icon-twitter {color: #00aced; font-size:24px;}
i.icon-circle-arrow-up {background-color: transparent; font-size: 52px; margin:30px 50% 0; padding-top: 20px;}
a.scrollup {color: #000000;}
a.scrollup:hover {color: #68b5fd;}

hr {
  margin: 20px 0;
  border: 0;
  border-top: 1px solid #a0a0a0;
  border-bottom: 1px solid #ffffff;
}

    /* CUSTOMIZE THE NAV-TABS (ON THE ABOUT PAGE)
    -------------------------------------------------- */

    .nav-tabs > li {
    font-size: 26px;
    font-style: normal;
    font-weight: 700;
    letter-spacing: -1px; 
    line-height: 1.6;
    }

    .nav-tabs > li > a {
    padding-top: 12px;
    padding-bottom: 12px;
    line-height: 30px;
    }


/* Articles
---------------- */
ul#news_listing {list-style:none; margin-left: 0px;}
ul#news_listing li {margin-bottom:20px; overflow:hidden;}
ul#news_listing li p {margin-bottom:10px;}
ul#news_listing li img {float:left; margin:0 20px 15px 20px;}

.recently ul {padding-top:20px; list-style:none;}
.recently h3 {
             margin:0;
             padding:0;
             font-family: 'Exo', sans-serif;
             font-size: 26px; 
             font-style: bold; 
             font-weight: 400;
             line-height: 30px;
             }
.recently h3.date {margin:-10px 0 20px 0; line-height: 25px; font-size: 18px;}


    /* CUSTOMIZE THE NAVBAR
    -------------------------------------------------- */

    /* Special class on .container surrounding .navbar, used for positioning it into place. */
    .navbar-wrapper {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      z-index: 10;
      margin-top: 20px;
      margin-bottom: -90px; /* Negative margin to pull up carousel. 90px is roughly margins and height of navbar. */
    }
    .navbar-wrapper .navbar {

    }

    /* Remove border and change up box shadow for more contrast */
    .navbar .navbar-inner {
      border: 0;
      -webkit-box-shadow: 0 2px 10px rgba(0,0,0,.25);
         -moz-box-shadow: 0 2px 10px rgba(0,0,0,.25);
              box-shadow: 0 2px 10px rgba(0,0,0,.25);
    }

    /* Downsize the brand/project name a bit */
    .navbar .brand {
      padding: 14px 20px 16px; /* Increase vertical padding to match navbar links */
      font-family: 'Exo', sans-serif;
      font-size: 20px;
      font-weight: bold;
      text-shadow: 0 -1px 0 rgba(0,0,0,.5);
    }

    /* Navbar links: increase padding for taller navbar */
      .navbar .nav > li > a {
      padding: 15px 20px;
    }

    /* Offset the responsive button for proper vertical alignment */
      .navbar .btn-navbar {
      margin-top: 10px;
    }

    /* CUSTOMIZE THE NAVBAR LINK COLOURS
    -------------------------------------------------- */

    .navbar-inverse .brand,
    .navbar-inverse .nav > li > a {
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
    }

    .navbar-inverse .brand {color: #ffffff;}
    .navbar-inverse .navbar-text,
    .navbar-inverse .nav > li > a {color: #e3f3f2;}

    .navbar-inverse .brand:hover,
    .navbar-inverse .nav > li > a:hover,
    .navbar-inverse .brand:focus,
    .navbar-inverse .nav > li > a:focus {
    color: #68b5fd;
    background-color: transparent;
    }

    .navbar-inverse .nav .active > a,
    .navbar-inverse .nav .active > a:hover,
    .navbar-inverse .nav .active > a:focus {
    color: #68b5fd;
    background-color: #111111;
    }

    .navbar-inverse .navbar-link {
    color: #e3f3f2;
    }

    .navbar-inverse .navbar-link:hover,
    .navbar-inverse .navbar-link:focus {
    color: #68b5fd;
    }


    /* CUSTOMIZE THE CAROUSEL
    -------------------------------------------------- */

    /* Carousel base class */
    .carousel {
      margin-bottom: 15px;
    }

    .carousel .container {
      position: relative;
      z-index: 9;
    }

    .carousel .item {
      height: 400px;
    }
    .carousel img {
      position: absolute;
      top: 0;
      left: 0;
      max-width: 1900px;
      min-width: 1900px;
      height: 400px;
    }

    .carousel-caption {
      background-color: transparent;
      position: static;
      max-width: 650px;
      padding: 0 20px;
      margin-top: 140px;
    }
    .carousel-caption h2.shout,
    .carousel-caption h2.error,
    .carousel-caption p.shoutout,
    .carousel-caption p.error,
    .carousel-caption h2.article, .carousel-caption p.article 
    {
      margin: 0;
      line-height: 1.25;
      text-shadow: 0 1px 1px rgba(0,0,0,.4);
    }

    /* --- CAROUSEL TEXT ON EVERY PAGE --- */
    .carousel-caption h2.shout, .carousel-caption p.shoutout,
    .carousel-caption h2.error, .carousel-caption p.error,
    .carousel-caption h2.article, .carousel-caption p.article 
    {
     font-family: 'Exo', sans-serif;
     font-style: normal;
     font-weight: 400;
    }

    .carousel-caption h2.shout, .carousel-caption h2.error,
    .carousel-caption h2.article {
    font-size: 52px;
    font-style: normal;
    font-weight: 700; 
    letter-spacing: -1px; 
    line-height: 1.4;
    }


    /* --- CAROUSEL TEXT ON THE HOME PAGE --- */
    .carousel-caption h2.shout, .carousel-caption p.shoutout {color: white;}
    .carousel-caption p.shoutout {font-size: 22px; line-height: 1.3;}
    
    /* --- CAROUSEL TEXT FOR THE 404 PAGE --- */
    .carousel-caption h2.error, .carousel-caption p.error {color: yellow;}
    .carousel-caption p.error {font-size: 30px; line-height: 1.3;}

    /* --- CAROUSEL TEXT FOR THE ARTICLE PAGES --- */
    .carousel-caption h2.article, .carousel-caption p.article {color: white;} 
    .carousel-caption p.article {font-size: 30px; line-height: 1.3;}


    /* RESPONSIVE CSS
    -------------------------------------------------- */

    @media (max-width: 979px) {

      .container.navbar-wrapper {
        margin-bottom: 0;
        width: auto;
      }
      .navbar-inner {
        border-radius: 0;
        margin: -20px 0;
      }

      .carousel .item {
        height: 400px;
      }

      .carousel-caption {
        width: 80%;
        padding: 0 20px;
        margin-top: 115px;
      }

      .carousel img {
      max-width: 1900px;
      min-width: 1900px;
        height: 400px;
      }
    }


    @media (max-width: 767px) {

      .navbar-inner {
        margin: -20px;
      }

      .carousel {
        margin-left: -20px;
        margin-right: -20px;
      }
      .carousel .container {

      }
      .carousel .item {
        height: 300px;
      }
      .carousel img {
      max-width: 1425px;
      min-width: 1425px;
        height: 300px;
      }
      .carousel-caption {
        width: 90%;
        padding: 0 20px;
        margin-top: 70px;
      }
      .carousel-caption h2 {
        font-size: 30px;
      }

      .carousel-caption h2.shout, .carousel-caption h2.error,
      .carousel-caption h2.article {
        font-size: 36px;
        font-style: normal;
        font-weight: 700; 
        letter-spacing: -1px; 
        line-height: 1.25;
      }

    .carousel-caption p.shoutout, .carousel-caption p.article  {font-size: 18px; line-height: 1.2;}

      .carousel-caption p {
        font-size: 16px;
      }
    }


      /* Sticky footer styles
      -------------------------------------------------- */

      html,
      body {
        height: 100%;
        /* The html and body elements cannot have any padding or margin. */
      }

      /* Wrapper for page content to push down footer */
      #wrap {
        min-height: 100%;
        height: auto !important;
        height: 100%;
        /* Negative indent footer by it's height */
        margin: 0 auto -550px;
      }

      /* Set the fixed height of the footer here */
      #push, footer {height: 550px;}
      footer, footer .span12 {color:#bccbbe; background:#3e3e41;}

      /* Lastly, apply responsive CSS fixes as necessary */
      @media (max-width: 767px) {
        footer {
          margin-left: -20px;
          margin-right: -20px;
          padding: 20px 20px 600px;
        }
      #push, footer {height: 600px;}
      #wrap {
          /* Negative indent footer by it's height */
          margin: 0 auto -600px;
       }
      }

     footer hr {
       margin: 20px 10px;
       border: 0;
       border-top: 1px solid #1d1d1d;
       border-bottom: 1px solid #5a5a5a;
     }
 
     footer h4 {font-size: 16px; font-weight:700; margin-left:20px;}