@import url(http://fonts.googleapis.com/css?family=Abel);
@import url(http://fonts.googleapis.com/css?family=Poiret+One);
@import url(http://fonts.googleapis.com/css?family=Kameron);


body { 
  background: rgba(40, 40, 40, 255) url(/images/nebula.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}


hl {
/*   background-color: rgba(255, 255, 0, 0.2); */
}

.nav-preorder {
    margin-top:5px;
    margin-bottom:4px;
    height: 50px;
}

.page {
    position: relative; 
    z-index: 1;
    margin: 0 auto;
}

.page h1 {
    color: #fede39;
    text-shadow: 1px 1px 5px rgba(150, 150, 150, 0.91);
    font-size: 54px;
    margin-bottom: 20px;
    font-family: Poiret One;
    font-weight: 900;
}

.browsehappy {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}

/* Space out content a bit */
body {
    padding-bottom: 20px;
}

.amazon-button {
/*  width: 50px; */
    height: 45px;
    margin-left: 6px;
    margin-right: 4px;
    margin-top: 6px;
}

.barnes-button {
    width: 50px;
    margin-top: 5px;
}

.packt-button {
    width: 50px;
    height: 45px;
    margin-top: 5px;
    margin-left: 5px;
}

.code-button {
    float: right;
    margin-bottom: 1px;
}

/* Everything but the jumbotron gets side spacing for mobile first views */
.header,
.marketing,
.footer {
    padding-top: 10px;
    padding-left: 15px;
    padding-right: 15px;
}

.footer p {
    color: white;
    text-shadow: 1px 2px 3px rgba(0,0,0,0.5);
}

.footer p a {
    color: #4ff;
}



/* Custom page header */
.header {
    border-bottom: 1px solid #e5e5e5;
}

h3 {
    padding-left:10px;
    font-size: 20px;
}

/* Make the masthead heading the same height as the navigation */
.header h3 {
    margin-top: 0;
    margin-bottom: 0;
    line-height: 40px;
    padding-bottom: 19px;
}

.chapter-number {
    font-family: Abel;
    font-size: 24px;
    font-weight: 700;
}

.chapter-title {
    color: #777;
}

/* Custom page footer */
.footer {
    padding-top: 19px;
    color: #777;
    border-top: 1px solid #e5e5e5;
}

.promo {
    padding-top: 30px;
    padding-bottom: 40px;
}

.container-narrow > hr {
    margin: 30px 0;
}

/* Main marketing message and sign up button */
.jumbotron {
    z-index: 1;
    text-align: center;
    border-bottom: 1px solid #e5e5e5;
/*    background: transparent; */
}

.jumbotron .btn {
    font-size: 21px;
    padding: 14px 24px;
}



.checklist {
    text-align: left;
    width: 330px;
    margin-top: 30px;
    margin-left: auto;
    margin-right: auto;
}

.checklist li {
    margin-bottom: 20px;
}

.check { 
    display: block;
    background:url(../images/checkmark.png) no-repeat 0 50%; 
    list-style-type: none;
    height:50px;
    padding-left: 38px;
    padding-top: 15px;
    margin-top: 5px;
    margin-bottom: 5px;

    color: white;
    font-weight: 900;
    font-family: Kameron;
    font-size: 20px;
    text-shadow: 0 1px 0 rgba(0,0,0,.5);
}

#hContainer {
    text-align: justify;
}
#hContainer > div {
    display: inline-block;
    vertical-align: top;

    /* IE fix. */
    *display: inline;
    zoom: 1;
}
#hContainer:after {
    content: "";
    width: 100%;
    display: inline-block;
}

/* Supporting marketing content */
.marketing {
    background: rgba(255, 255, 255, .9);
}

pre {
    background-color: rgba(100, 100, 100, .2);
}

.chapter-img {
    height: 300px;
    padding:10px; 
/*    border:45px dotted rgba(109, 188, 81, .20); */
}

@-moz-document url-prefix() {
    .chapter-img {
/*        border:40px outset rgba(109, 188, 81, .20); */
    }
}

.buybuttons {
    background: rgba(255, 255, 255, .9);
    -webkit-border-top-left-radius: 25px;
    -webkit-border-top-right-radius: 25px;
    -moz-border-radius-topleft: 25px;
    -moz-border-radius-topright: 25px;
    border-top-left-radius: 25px;
    border-top-right-radius: 25px;
/*
    border-style: groove;
    border-width: 2px;
    border-color: rgba(255, 255, 255, .9);
*/
}

.fb-button {
    float: left;
    margin-right: 30px;
    margin-bottom: 15px;
    margin-top:15px;
}

.tw-button {
    float: left;
    margin-bottom: 10px;
    margin-top: 15px;
}

.gp-button {
    float: left;
    margin-bottom: 10px;
    margin-top:15px;
}

.social {
    width: 300px;
    margin-left: auto;
    margin-right: auto;
}

.lambda-img {
    height:30px;
    margin-top:-5px;
}

.book-img {
    
}

.checkbook {
    background-image:url('../images/book.jpg');
    background-position:center;
    background-repeat:no-repeat;
    margin-left: auto;
    margin-right: auto;
    padding-left: 20px;
    padding-top: 10px;
    width: 350px;
    height: 431px;
}

.marketing p + h4 {
    margin-top: 28px;
}

/* Responsive: Portrait tablets and up */
@media screen and (min-width: 768px) {
    .container {
        max-width: 730px;
    }


    /* Remove the padding we set earlier */
    .header,
    .marketing,
    .footer {
        padding-left: 0;
        padding-right: 0;
    }

    /* Space out the masthead */
    .header {
        margin-bottom: 30px;
    }
    
    /* Remove the bottom border on the jumbotron for visual effect */
    .jumbotron {
        border-bottom: 0;
    }

}

.button {
    box-shadow: inset 0 0 2px white;
    color: white;
    font-size: 14px;
    font-weight: 100;
    text-shadow: 0 1px 0 rgba(0,0,0,.5);
    position: relative;
    color: white;
    cursor: pointer;
}
.button:hover {
    //border-color: #254c73;
    -webkit-transition: box-shadow .5s ease-in;
}
.button:hover:before {
    box-shadow: 0 3px 1px rgba(0,0,0,.1);
    background-image: -webkit-radial-gradient(center top, 130px 40px, rgba(255,255,255,.4), rgba(255,255,255,.05));
}
.button:active:before {
    box-shadow: none;
}
.button:active {
    top: 1px;
}


/* Buzz Out */

@-webkit-keyframes buzz-out {
  10% {
    -webkit-transform: translateX(3px) rotate(2deg);
    transform: translateX(3px) rotate(2deg);
  }

  20% {
    -webkit-transform: translateX(-3px) rotate(-2deg);
    transform: translateX(-3px) rotate(-2deg);
  }

  30% {
    -webkit-transform: translateX(3px) rotate(2deg);
    transform: translateX(3px) rotate(2deg);
  }

  40% {
    -webkit-transform: translateX(-3px) rotate(-2deg);
    transform: translateX(-3px) rotate(-2deg);
  }

  50% {
    -webkit-transform: translateX(2px) rotate(1deg);
    transform: translateX(2px) rotate(1deg);
  }

  60% {
    -webkit-transform: translateX(-2px) rotate(-1deg);
    transform: translateX(-2px) rotate(-1deg);
  }

  70% {
    -webkit-transform: translateX(2px) rotate(1deg);
    transform: translateX(2px) rotate(1deg);
  }

  80% {
    -webkit-transform: translateX(-2px) rotate(-1deg);
    transform: translateX(-2px) rotate(-1deg);
  }

  90% {
    -webkit-transform: translateX(1px) rotate(0);
    transform: translateX(1px) rotate(0);
  }

  100% {
    -webkit-transform: translateX(-1px) rotate(0);
    transform: translateX(-1px) rotate(0);
  }
}

@keyframes buzz-out {
  10% {
    -webkit-transform: translateX(3px) rotate(2deg);
    -ms-transform: translateX(3px) rotate(2deg);
    transform: translateX(3px) rotate(2deg);
  }

  20% {
    -webkit-transform: translateX(-3px) rotate(-2deg);
    -ms-transform: translateX(-3px) rotate(-2deg);
    transform: translateX(-3px) rotate(-2deg);
  }

  30% {
    -webkit-transform: translateX(3px) rotate(2deg);
    -ms-transform: translateX(3px) rotate(2deg);
    transform: translateX(3px) rotate(2deg);
  }

  40% {
    -webkit-transform: translateX(-3px) rotate(-2deg);
    -ms-transform: translateX(-3px) rotate(-2deg);
    transform: translateX(-3px) rotate(-2deg);
  }

  50% {
    -webkit-transform: translateX(2px) rotate(1deg);
    -ms-transform: translateX(2px) rotate(1deg);
    transform: translateX(2px) rotate(1deg);
  }

  60% {
    -webkit-transform: translateX(-2px) rotate(-1deg);
    -ms-transform: translateX(-2px) rotate(-1deg);
    transform: translateX(-2px) rotate(-1deg);
  }

  70% {
    -webkit-transform: translateX(2px) rotate(1deg);
    -ms-transform: translateX(2px) rotate(1deg);
    transform: translateX(2px) rotate(1deg);
  }

  80% {
    -webkit-transform: translateX(-2px) rotate(-1deg);
    -ms-transform: translateX(-2px) rotate(-1deg);
    transform: translateX(-2px) rotate(-1deg);
  }

  90% {
    -webkit-transform: translateX(1px) rotate(0);
    -ms-transform: translateX(1px) rotate(0);
    transform: translateX(1px) rotate(0);
  }

  100% {
    -webkit-transform: translateX(-1px) rotate(0);
    -ms-transform: translateX(-1px) rotate(0);
    transform: translateX(-1px) rotate(0);
  }
}

.buzz-out {
  display: inline-block;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}

.buzz-out:hover {
  -webkit-animation-name: buzz-out;
  animation-name: buzz-out;
  -webkit-animation-duration: .75s;
  animation-duration: .75s;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1;
}