body {
  font: 1em "Segoe UI", Candara, "Bitstream Vera Sans", "DejaVu Sans", "Bitstream Vera Sans", "Trebuchet MS", Verdana, "Verdana Ref", sans serif;
  line-height: 1.62;
}

/* Prevent FOUC */
.js body {
  visibility: hidden;
  /* Hide body if JS is available */
}

.on body {
  visibility: visible;
  /* Reshow body after all resources loaded */
}
/* Rainbow Layout specific styles */
#rainbow {
  box-shadow: 8px 8px 18px #f98407;
  border-radius: 12px;
  width: 34em;
  margin: 0 auto;
}
#rb-header {
  border-radius: 12px 12px 0 0;
  border-bottom: 1px solid #999;
}
#rb-footer {
  border-radius: 0 0 12px 12px;
  clear: both;
  border-top: 1px solid #999;
}

.rainbow { /* Just for fun */
  position: relative;
  padding: 0 1em;
  color: #fffdad;
  background: #ff5f3f;
  background: -o-linear-gradient(left, red, orange, yellow, green, blue, indigo, violet);
  background: -moz-linear-gradient(left, red, orange, yellow, green, blue, indigo, violet);
  background: -webkit-gradient(linear, left center, right center, from(red), color-stop(14%, orange), color-stop(28%, yellow), color-stop(42%, green), color-stop(56%, blue), color-stop(70%, indigo), to(violet)); 
  background: -ms-linear-gradient(left, red, orange, yellow, green, blue, indigo, violet);
  background: linear-gradient(left, red, orange, yellow, green, blue, indigo, violet);
}
.rainbow h1 {
  font-size: 2.6em;
  text-shadow: 1px 1px 3px #999;
}
.rainbow h2 {
  position: absolute;
  top: 1em;
  right: 1em;
  font-size: .8em;
  border: none;
  color: #fed971;
}

/* Sample for my layouts */
#sample {

}

/* For main stylesheet */
.leftback{
  padding: 1em;
}
.rightback {
  /* Non-media query, non JS devices. An ideal reading width */
  width: 32em;
  margin: 0 auto;
  overflow: hidden;
}

.fluid {
  width: 100%;
  _width: auto;
  height: auto;
  max-width: 100%;
}

#toplink {
  background: #bfbe85;
  bottom: 1em;
  cursor: pointer;
  display: block;
  height: 2em;
  right: .5em;
  padding-left: 0.4em;
  z-index: 999;
  width: 1em;
  border-radius: 10px 0 0 10px;
  opacity: .5;
}

/* Kick off fluid layout */
@media screen and (min-width: 1em) {
  #rainbow {
    width: 100%;
  }
  
  /* Conditional Images */
  #rain {
    background: red url('red.jpg') no-repeat 50% top;
    height: 100px;
    padding: 0 1em;
    color: #ffe;
  }
  #rain:after {
    content:"Good";
  }
  #rainbow .leftback {
    background: #fcfbd6;
  }
  
  /* For main stylesheet */
  .rightback, .centreback, .leftback, .main, .aside-a, .aside-b {
    position: relative;
    float: left;
    width: 100%;
  }

  .leftback {
    padding: 0 1%;
    width: 98%;
  }

}


@media screen and (min-width: 20em) {
  .leftback {
    padding: 0 2%;
    width: 96%;
  }
}

@media screen and (min-width: 30em) {
  .leftback {
    padding: 0 3%;
    width: 94%;
  }
  #rain {
    background: Orange url('orange.jpg') no-repeat 50% top;
  }
  #rain:after {
    content:"Mercy";
  }
}
/* Go to two columns 56/44 */
@media screen and (min-width: 40em) {
  #rainbow .rightback {
    background: #fec6ff;
  }
  #rain {
    background: Yellow url('yellow.jpg') no-repeat 50% top;
    color: #333;
  }
  #rain:after {
    content:"Grace";
  }

  /* For main stylesheet */
  .centreback {
    right: 44%;
  }
  
  .leftback {
    padding: 0;
    width: 100%;
    box-shadow: 1px 0 8px #ccc;
  }
  
  .main {
    left: 46%; /* o(total offset) + ml(all margins to left) */
    width: 52%; /* b(background) - bm(background margins) */
  }
  
  .aside-a {
    left: 50%; /* o + ml */
    width: 40%; /* b - bm */
  }
  
  .aside-b {
    float: right;
    left: 42%; /* b - mr(margin right) */
    width: 40%; /* b - bm */
  }
}

/* Go to two columns 60/40 */
@media screen and (min-width: 50em) {

  #rain {
    background: Green url('green.jpg') no-repeat 50% top;
    color: #ffe;
  }
  #rain:after {
    content:"Life";
  }
  
  /* For main stylesheet */
  .centreback {
    right: 40%;
  }
  
  .main {
    left: 42%; /* o + ml */
    width: 56%; /* b - bm */
  }
  
  .aside-a {
    left: 46%; /* o + ml */
    width: 36%; /* b - bm */
  }
  
  .aside-b {
    left: 38%; /* b - mr */
    width: 36%; /* b - bm */
  }
}

/* Go to two columns 70/30 */
@media screen and (min-width: 60em) {
  
  #rain {
    background: Blue url('blue.jpg') no-repeat 50% top;
  }
  #rain:after {
    content:"Truth";
  }
  
  /* For main stylesheet */
  .centreback {
    right: 30%;
  }
  
  .main {
    left: 32%; /* o + ml */
    width: 66%; /* b - bm */
  }
  
  .aside-a {
    left: 36%; /* o + ml */
    width: 26%; /* b - bm */
  }
  
  .aside-b {
    left: 28%; /* b - mr */
    width: 26%; /* b - bm */
  }
}


/* Go to three columns 25/50/25 */
@media screen and (min-width: 70em) {

  #rainbow .leftback {
    background: #ffaf38;
  }

  #rainbow .centreback {
    background: #fcfbd6;
  }

  #rain {
    background: Indigo url('indigo.jpg') no-repeat 50% top;
  }
  #rain:after {
    content:"Wisdom";
  }

  /* For main stylesheet */
  .centreback {
    right: 25%;
    box-shadow: 1px 0 8px #ccc;
  }

  .leftback {
    right: 50%;
  }
  
  .main {
    left: 102%;
    width: 46%;
  }
  
  .aside-a {
    left: 31%;
    width: 21%;
  }
  
  .aside-b {
    float: right;
    left: 73%;
    width: 21%;
  }

}

@media screen and (min-width: 79em) {
  #rain {
    background: Violet url('violet.jpg') no-repeat 50% top;
  }
  #rain:before {
    content:"Peace, Innocence";
  }
  #rain:after {
    content:"and Love";
  }
}