@import url("//fonts.googleapis.com/css?family=Press+Start+2P");

/**
 * page styles
 */
body {
    margin-top: 50px;
    background-image: url(../img/backgrounds/default_stone.png);
    font-size: 180%;
    color: #eee;
}

@media screen and (min-width: 768px) {
    .jumbotron h1, .jumbotron .h1 {
        font-size: 60px;
    }
}

#content a {
    text-decoration: underline;
    color: #eee;
}

#content a:hover {
    text-decoration: none;
    color: #fff;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Press Start 2P', cursive;
    text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.3);
}

h2, h3, h4, h5, h6 {
    padding-top: 20px;
}

h2 code, h3 code, h4 code, h5 code, h6 code {
    text-shadow: none;
}

img {
    max-width: 100%;
}

/**
 * force the anchors to go to the right position
 * http://stackoverflow.com/questions/9047703/fixed-position-navbar-obscures-anchors
 */

a[id] {
    display: block;
    padding-top: 60px;
    margin-top: -60px;
}

#stone {
    padding-top: 40px;
    margin-top: -40px;
}

/**
 * navbar styles
 */

.navbar {
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
    background-image: -webkit-linear-gradient(#484e55, #3a3f44 60%, #313539);
    background-image: linear-gradient(#484e55, #3a3f44 60%, #313539);
    background-repeat: no-repeat;
    border: 1px solid rgba(0, 0, 0, 0.6);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff484e55', endColorstr='#ff313539', GradientType=0);
    filter: none;
}

/* fix navbar disappearing - http://stackoverflow.com/questions/14493533/really-weird-redraw-behavior-with-anchor-links-twitter-bootstrap-fixed-navbar */
.affix, .navbar-fixed-top {
    -webkit-transform: scale3d(1, 1, 1);
}

.navbar-brand, #header .lead, #header .btn {
    font-family: 'Press Start 2P', cursive;
}

.navbar-default .navbar-brand {
    color: #eee;
}

.navbar-default .navbar-brand:hover {
    color: #fff;
}

.navbar-default .navbar-nav > li > a {
    color: #ddd;
}

.navbar-default .navbar-nav > li > a:hover {
    color: #eee;
}

/**
 * header styles
 */
#header {
    background: #8BB9F9 url("../img/header.png") repeat-x scroll center;
}

#header-bg {
    min-height: 300px;
    background: transparent url("../img/backgrounds/dirt_grass.png") repeat-x scroll center bottom -64px;
}

#header .jumbotron {
    background: transparent;
    border: 0;
    text-align: center;
    margin-bottom: 0;
    color: #FFFFFF;
}

#header .jumbotron h1,
#header .jumbotron h2 {
    color: #FFFFFF;
}

#header .jumbotron a.btn {
    margin-bottom: 5px;
}

#header .jumbotron p {
    margin-bottom: 60px;
}

#header .lead {
    text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.3);
    margin: 20px 0;
}

/**
 * jumbotron styles
 */

.jumbotron {
    background-image: url(../img/backgrounds/default_water.png);
    color: #333;
}

.jumbotron h1, .jumbotron h2 {
    color: #222;
    padding-top: 0;
    margin-top: 0;
    margin-bottom: 20px;
}

.jumbotron p {
    line-height: normal;
}

/**
 * section styles
 */

.section {
    padding-bottom: 60px;
}

.section-dirt,
.container-dirt {
    background: url(../img/backgrounds/default_dirt.png) center top 40px;
    border-bottom: 6px solid #333;
}

/**
 * well styles
 */
.well {
    color: #111;
    position: relative;
    z-index: 1;    
}

.well:before {
    content: "";
    position: absolute;
    top: 0; 
    left: 0;
    width: 100%; 
    height: 100%;  
    opacity: .4; 
    z-index: -1;
    background: #eee url(../img/backgrounds/wool_white.png);
}

.well h2, .well h3, .well h4, .well h5, .well h6 {
    padding-top: 0;
}

.well a,
#content .well a {
    color: #000;
    font-weight: bold;
}

/**
 * footer styles
 */

#footer {
    border-top: 6px solid #333;
    background-image: url(../img/backgrounds/default_lava.png);
    padding-top: 20px;
}

#footer small {
    color: #000;
}

/**
 * big square borders
 */

pre, .well, .thumbnail, .jumbotron {
    border-radius: 0 !important;
    border: 4px solid #333;
}

.btn {
    border-radius: 0;
    border-width: 4px;
}

.btn-primary {
    color: #FFFFFF;
}

/**
 * craft styles
 */

.craft {
    background: #ccc;
    text-align: center;
    border: 4px solid #333;
}

pre.craft {
    font-family: 'Press Start 2P', cursive;
    font-size: 175%;
    color: #333;
    text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.3);
    line-height: 1em;
    letter-spacing: 0.1em;
}

div.craft {
    display: inline-block;
    padding: 3px;
    line-height: 0;
    letter-spacing: -4px;
    margin-bottom: 5px;
}

div.craft span {
    border: 2px solid #373737;
    border-right-color: #FFF;
    border-bottom-color: #FFF;
    background-color: #8B8B8B;
    width: 46px;
    height: 46px;
    margin: 1px;
    display: inline-block;
    vertical-align: middle;
}

div.craft img {
    width: 32px;
    height: 32px;
    margin: 5px;
}

.list-items {
    list-style: none;
    padding: 0;
}

.list-items li {
    float: left;
    height: 52px;
    width: 52px;
    border: 2px solid #373737;
    background-color: #8B8B8B;
    padding: 3px;
    margin: 1px;
}

.list-items img {
    margin: 5px;
    width: 32px;
    height: 32px;
}

.item {
    border: 2px solid #373737;
    background-color: #8B8B8B;
    display: inline-block;
}

.item img {
    margin: 5px;
    width: 32px;
    height: 32px;
}

.item-group {
    margin-top: -5px;
}

.item-group,
div.craft .item-group {
    display: inline-block;
    border: 0;
    width: 40px;
    height: 40px;
}

.item-group img,
div.craft .item-group img {
    width: 16px;
    height: 16px;
    margin: 2px;
}

/**
 * prettify styles
 */
.com {
    color: #93a1a1;
}

.lit {
    color: #195f91;
}

.pun, .opn, .clo {
    color: #93a1a1;
}

.fun {
    color: #dc322f;
}

.str, .atv {
    color: #D14;
}

.kwd, .prettyprint .tag {
    color: #1e347b;
}

.typ, .atn, .dec, .var {
    color: teal;
}

.pln {
    color: #48484c;
}

pre.prettyprint {
    padding: 10px !important;
    border: 4px solid #333 !important;
}

pre.prettyprint.linenums {
    -webkit-box-shadow: inset 40px 0 0 #fbfbfc, inset 41px 0 0 #ececf0;
    -moz-box-shadow: inset 40px 0 0 #fbfbfc, inset 41px 0 0 #ececf0;
    box-shadow: inset 40px 0 0 #fbfbfc, inset 41px 0 0 #ececf0;
}

/* Specify class=linenums on a pre to get line numbering */
ol.linenums li {
    color: #cccccc;
    text-shadow: 0 1px 0 #fff;
}

li.L0, li.L1, li.L2, li.L3,
li.L5, li.L6, li.L7, li.L8 {
    list-style-type: decimal !important
}

/**
 * github ribbon styles
 */

.ribbon {
    background-color: #a00;
    overflow: hidden;
    position: absolute;
    right: -3em;
    top: 3.5em;
    -moz-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -moz-box-shadow: 0 0 1em #888;
    -webkit-box-shadow: 0 0 1em #888;
}

.ribbon a {
    border: 1px solid #faa;
    color: #fff;
    display: block;
    font: bold 60% 'Press Start 2P', cursive;
    margin: 0.05em 0 0.075em 0;
    padding: 0.6em 3.5em;
    text-align: center;
    text-decoration: none;
    text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.3);
}

/**
 * accordion styles
 */

h2.panel-title, h3.panel-title, h4.panel-title, h5.panel-title {
    margin-top: 0;
}

.panel-group h4.panel-title {
    padding-top: 0;
}

.panel-group h4.panel-title a, .panel-group h4.panel-title a:hover {
    text-decoration: none;
}

.panel-default > .panel-heading {
    background: #888;
}

.panel-group .panel-heading + .panel-collapse .panel-body {
    border-top: 4px solid #333;
}

.panel-group .panel {
    border-radius: 0;
    border: 4px solid #333;
    background: #999;
}

/**
 * contributor styles
 */

#contributors ul {
    margin: 0;
    padding: 0;
}

#contributors li {
    width: 78px;
    margin: 5px;
    display: inline-block;
    text-align: center;
    font-size: 75%;
}

#contributors img {
    width: 64px;
}