/**
 * giratina.css
 * Giratina style - dark background, light text, easy on the eyes
 */


/**
 * Base Structure - body, html, etc.
 * --------------------------------------------------
 */

body {
    /*color: #E8DFC5; original text color - i do like it but it's still a bit too bright*/
    color: #D8D1BD;
}

/*may add additional queries and sizes, e.g. the smallest image should probably start showing up at a narrower width than 767*/
@media (max-width: 767px) {
    body {
        background: #333 url(../img/giratina_bottom_s.jpg) no-repeat;
        background-attachment: fixed;
        background-position: bottom right;
    }
    
}
@media (min-width: 768px) and (max-width: 991px) {
    body {
        background: #333 url(../img/giratina_bottom_m.jpg) no-repeat;
        background-attachment: fixed;
        background-position: bottom right;
    }
}
@media (min-width: 992px) and (max-width: 1199px) {
    body {
        background: #333 url(../img/giratina_bottom.jpg) no-repeat;
        background-attachment: fixed;
        background-position: bottom right;
    }
}
@media (min-width: 1200px) {
    body {
        background: #333 url(../img/giratina_bottom.jpg) no-repeat;
        background-attachment: fixed;
        background-position: bottom right;
    }
}

h1, h2, h3, h4, h5, h6 {
    color: #AA4444;
}

a {
    color: #CC9E2E;
}

a:hover,
a:active,
a:focus {
    color: #EDCE8B;
}

.site-header {
    background: #4A1414 url(../img/giratina_header_pattern.png) repeat-x;
    height: 215px;
}

.site-header a {
    display: block;
    width: 100%;
    height: 215px;
    text-indent: -9999px;
    background: url(../img/giratina_header.png) no-repeat;
}

/*smaller widths need a different header image*/
@media (max-width: 632px) {
    .site-header {
        background: #4A1414 url(../img/giratina_header_pattern_small.png) repeat-x;
        height: 75px;
    }  
    .site-header a {
        height: 75px;
        background: url(../img/giratina_header_small.png) no-repeat;
    }
}

#page-content-wrapper {
    background-color: rgba(0,0,0,0.1);
    padding: 20px;
    border: 1px solid #222;
}

.site-footer {
    border-top: 1px solid #633636;
    margin-top: 50px;
}

hr {
    border: none;
    height: 1px;
    background-color: #633636; /*same color as site footer border*/
    color: #633636; /*same color as site footer border*/
}

ul li {
    list-style-image: url(../img/red_bullet.png);
}

/*a bit of witchcraft to change the color of ordered list numbers*/
/*NOTE: not using this for now because nested ordered/unordered lists continue the counter rather than restricting it to the top level*/
/*it should be possible to get it to stick to a single level but I'm having trouble getting my head around it*/
/*and since having the numbering work is more important I'm leaving off the colored markers for now...*/
/*ol li {
    list-style-type: none;
    counter-increment: list;
    position: relative;
}

ol li:before {
    content: counter(list) ".";
    position: absolute;
    left: -2.5em;
    width: 2em;
    text-align: right;
    color: #AA4444;
}

ol ul li:before {
    content: none;
}*/

/*...except for Firefox! vendor-specific pseudoclasses to the rescue, hahahaha*/
/*assuming it moves into the actual spec, in the future the ::marker pseudoclass will be the correct way to do this for all browsers*/
/*I'll also be able to do this with uls and so won't need the bullet image anymore*/
ol li::-moz-list-number {
    color: #AA4444;
}

.table {
    border: 1px solid #151515;
    margin: 30px 0;
}

.table td,
.table th {
    border: 1px solid #151515;
}

.table > thead > tr > th {
    border-bottom: 1px solid #151515;
    background-color: #633636;
}

.table > thead > tr > th,
.table > tbody > tr > th,
.table > tfoot > tr > th,
.table > thead > tr > td,
.table > tbody > tr > td,
.table > tfoot > tr > td {
    border-top: none;
}

.table > tbody > tr > td {
    background-color: #424242;
}

.table caption {
    padding: 10px;
    text-align: center;
}


/**
 * Component Styles - buttons, menus, etc.
 * --------------------------------------------------
 */

/*darken the navbar a bit*/
.navbar-inverse {
    background-color: #131313;
}

.navbar-brand img {
    margin-top: -10px;
}

.dropdown-menu {
  background-color: #222;
}

.dropdown-menu li {
    list-style: none;
}

.dropdown-menu > li > a {
  color: #E8DFC5; /*same color as body copy*/
}

/*make the active color the same as the main accent color*/
.navbar-inverse .navbar-nav > .active > a,
.navbar-inverse .navbar-nav > .active > a:hover,
.navbar-inverse .navbar-nav > .active > a:focus {
  background-color: #AA4444; /*same color as headings*/
}

.navbar-inverse .navbar-nav > .open > a,
.navbar-inverse .navbar-nav > .open > a:hover,
.navbar-inverse .navbar-nav > .open > a:focus {
  color: #fff;
  background-color: #AA4444; /*same color as headings*/
}

.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
  color: #fff;
  background-color: #AA4444; /*same color as headings*/
}
.dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover,
.dropdown-menu > .active > a:focus {
  color: #fff;
  background-color: #AA4444; /*same color as headings*/
}

@media (max-width: 767px) {
  .navbar-inverse .navbar-nav .open .dropdown-menu > li > a {
    color: #9d9d9d;
  }
  .navbar-inverse .navbar-nav .open .dropdown-menu > li > a:hover,
  .navbar-inverse .navbar-nav .open .dropdown-menu > li > a:focus {
    color: #fff;
    background-color: transparent; /*may change this to main accent color later*/
  }
  .navbar-inverse .navbar-nav .open .dropdown-menu > .active > a,
  .navbar-inverse .navbar-nav .open .dropdown-menu > .active > a:hover,
  .navbar-inverse .navbar-nav .open .dropdown-menu > .active > a:focus {
    color: #fff;
    background-color: #AA4444; /*same color as headings*/
  }
}


/*buttons*/
.btn-primary {
  color: #D8D1BD; /*same color as body copy*/
  background-color: #AA4444; /*same color as headings*/
  border-color: #712323;
}
.btn-primary:focus,
.btn-primary.focus {
  color: #D8D1BD; /*same color as body copy*/
  background-color: #953434;
  border-color: #631c1c;
}
.btn-primary:hover {
  color: #D8D1BD;
  background-color: #953434;
  border-color: #631c1c;
}
.btn-primary:active,
.btn-primary.active,
.open > .dropdown-toggle.btn-primary {
  color: #E8DFC5;
  background-color: #953434;
  border-color: #631c1c;
}
.btn-primary:active:hover,
.btn-primary.active:hover,
.open > .dropdown-toggle.btn-primary:hover,
.btn-primary:active:focus,
.btn-primary.active:focus,
.open > .dropdown-toggle.btn-primary:focus,
.btn-primary:active.focus,
.btn-primary.active.focus,
.open > .dropdown-toggle.btn-primary.focus {
  color: #D8D1BD;
  background-color: #953434;
  border-color: #631c1c;
}

/*code and pre*/
code {
    background-color: #444;
    color: #B55C5C;
}

pre {
    background-color: #444;
    color: #ccc;
    border: #111;
}

/*form elements*/
input[type=text], textarea {
    background-color: #222;
    border: 1px solid #050505;
    padding: 4px;
}

/*pagination links*/
.nextprev {
    width: 100%;
    overflow: auto;
    margin: 50px 0 20px 0;
}

.prevlink {
    float: left;
}

.nextlink {
    float: right;
}

.homelink {
    width: 100%;
    text-align: center;
}


/**
 * Main Content Styles
 * --------------------------------------------------
 */

.page-header, .post-header {
    border-bottom: 1px solid #633636; /*same color as site footer border*/
    margin-bottom: 15px;
    padding-bottom: 0; /*override bootstrap*/
}

.post-header {
    margin-bottom: 15px;
}

.footnotes {
    font-size: 90%;
}

.footnotes hr {
    display: none;
}

blockquote {
    background-color: rgba(99,54,54,0.3); /*same color as site footer border*/
    border: 1px #151515 solid;
}

.modified-date {
    text-align: right;
    font-style: italic;
    font-size: 80%;
    color: #999;
}


/**
 * Index, Post Listing and Post Styles
 * --------------------------------------------------
 */

article.listed-post {
    padding-bottom: 70px;
}

article.listed-post:last-of-type {
    padding-bottom: 20px;
}

.post-meta {
    font-size: 95%;
    color: #999;
    padding-bottom: 5px;
}

/* Display the list of post tags as a comma-separated list that sits inline with the rest of the meta information */
ul.tag-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: inline;
}

ul.tag-list li {
    list-style-image: none;
    display: inline;
}

ul.tag-list li:after {
    content: ",";
}

ul.tag-list li:last-child:after {
    content: "";
}

ul.tag-list li:nth-last-child(2):after {
    content: " and";
}

/**
 * Gallery Styles
 * --------------------------------------------------
 */

.gallery-img {
    border: 2px solid #eee;
    margin: 1px;
    display: inline-block;
}

.gallery-img:hover {
    border: 2px solid #CC9E2E; /*AA4444 (the main red color) also looks nice here*/
}

/**
 * Markdown Notices Plugin Styles
 * --------------------------------------------------
 */

.notices {
    padding: 1px 1px 1px 30px;
    margin: 15px 0;
}

/*darker version*/

.notices.yellow {
    border-left: 10px solid #f0ad4e;
    background: #49493F;
    color: #CEBC73;
}
.notices.red {
    border-left: 10px solid #d9534f;
    background: #49403F;
    color: #B76365;
}
.notices.blue {
    border-left: 10px solid #5bc0de;
    background: #3F3F49;
    color: #94C8D3;
}
.notices.green {
    border-left: 10px solid #5cb85c;
    background: #3F4940;
    color: #72B763;
}

/*original light colors for reference

.notices.yellow {
    border-left: 10px solid #f0ad4e;
    background: #fcf8f2;
    color: #df8a13;
}
.notices.red {
    border-left: 10px solid #d9534f;
    background: #fdf7f7;
    color: #b52b27;
}
.notices.blue {
    border-left: 10px solid #5bc0de;
    background: #f4f8fa;
    color: #28a1c5;
}
.notices.green {
    border-left: 10px solid #5cb85c;
    background: #f1f9f1;
    color: #3d8b3d;
}*/