body {
   background-color:#f7f7f7;
   font-family: Helvetica, Arial, sans-serif;
   width:100%;
   margin:0;
}

.guide-view {
   position:absolute;
   top:0;
   bottom:0;
   right:0;
   left:0;
   overflow-x:hidden;
}

/***************************************************************************
 * Header
 */

header {
   height:50px;
   position:absolute;
   top:0;
   left:0;
   right:0;
   background: #111;
   color:#aaa;
   line-height:50px;
   text-align:center;
}

header > .fullscreen:hover {
   color: #ccc;
   border-color: #ccc;
}

header > .fullscreen {
   font-size:22px;
   margin-left:30px;
   cursor: pointer;
   /* without this the icons align properly */
   line-height: 1.9em;
}

header > a > i.fa {
   color:#666;
   vertical-align:middle;
   margin-bottom:1px;
   line-height:50px;
}

header > a.previous > i {
   margin-right:10px;
}
header > a.next > i {
   margin-left:10px;
}

header > a {
   padding:0 23px;
   cursor:pointer;
   font-size:14px;
}

header > a:hover {
   color:#ccc;
}

header > .previous {
   float:left;
}
header > .next {
   float:right;
}

#currentStep {
   color: white;
   font-size:20px;
}

@media (max-width: 700px) {
   header .label{
      display:none;
   }
}

/***************************************************************************
 * Step 
 */

.guide-step {
   position: absolute;
   left: 0;
   right: 0;
   top: 50px;
   bottom:0;
   background-color: #f7f7f7;
}

.guide-step .side-bar {
   position: absolute;
   top: 0;
   bottom:0;
   right:0;
   width: 280px;
   padding:10px;
   overflow-y:auto;
   box-shadow: -3px 0 20px rgba(0,0,0,0.2);
}

.guide-step .step-thumbs {
   text-align:center;
}

.guide-step .side-bar .thumb {
   border-radius:10px;
   overflow:hidden;
   width:29%;
   margin-right:4%;
   border: solid 1px #eee;
}
.guide-step .side-bar .thumb:last-child {
   margin-right:0;
}

.guide-step .large-media {
   position: absolute;
   left: 0;
   right: 300px;
   display: block;
   top: 0;
   bottom:0;
   overflow:auto;
   text-align:center;
}

.guide-step .large-media img {
   max-width:100%;
   max-height:100%;
}

@media (max-width: 700px) {
   .guide-step .side-bar,
   .guide-step .large-media {
      position: static;
      width:auto;
      box-shadow: none;
   }
   .guide-step .large-media img {
      /* For some reason in narrow mode, the image is X px high, but it's
       * container is X-1 pixels high, causing scrolling. */
      margin-bottom: 1px;
   }
}

/***************************************************************************
 * Step lines
 */

li.step-line {
   margin-bottom:10px;
}
li.indent-1 {
   margin-left: 30px;
}

ul.step-lines {
   padding-left:1.2em;
}


/***************************************************************************
 * Transitions -- classBased
 */

.guide-step {
   left:-100%;
   width:100%;
   right:auto;
   transition: 0.3s left ease-in-out;
}

.guide-step.forward {
   left:100%;
}

.guide-step.backward {
   left:-100%;
}

.guide-step.current {
   left:0;
}