clearless/_compiled/example.css

.clearfix {
  zoom: 1;
}
.clearfix:after {
  display: block;
  visibility: hidden;
  height: 0;
  clear: both;
  content: ".";
}
/* ---- setup ---- */
body {
  padding: 20px;
  margin: 0;
  background: #DDD;
  font-size: 10px;
  font-family: sans-serif;
  min-width: 320px;
}
p,
li {
  font-size: 10px;
  font-size: 1rem;
}
h1 {
  font-size: 15px;
  font-size: 1.5rem;
}
h2 {
  font-size: 12px;
  font-size: 1.2rem;
}
.receptacle {
  max-width: 1200px;
  margin: 0 auto;
  border-bottom: 1px dashed #666;
}
.nav {
  padding: 10px 0 10px 10px;
}
.nav li {
  margin-bottom: 5px;
  list-style: none;
  padding: 0;
}
.nav a {
  display: inline-block;
  position: relative;
  padding-left: 16px;
}
.ie6 .nav a,
.ie7 .nav a {
  display: inline;
  zoom: 1;
}
.nav a:before {
  position: absolute;
  display: block;
  content: ' ';
  background-image: url('/examples/sprite.png');
  background-repeat: no-repeat;
  background-position: -100px -50px;
  height: 11px;
  width: 6px;
  top: 4px;
  left: 0;
}
/* ---- grids ---- */
.primary,
.secondary,
.tertiary,
.quaternary {
  background: #FFF;
}
.section {
  margin-bottom: 2%;
}
.segment {
  margin-bottom: 2%;
  overflow: hidden;
}
/* Grids using floats */
.floated .section {
  zoom: 1;
  width: 100%;
}
.floated .section:after {
  display: block;
  visibility: hidden;
  height: 0;
  clear: both;
  content: ".";
}
.floated .segment {
  display: inline;
  float: left;
  margin-right: 1.5873015873015872%;
  display: inline;
  float: left;
}
/* Grids using inline-block */
.inline .section {
  letter-spacing: -0.31em;
  *letter-spacing: normal;
  word-spacing: -0.43em;
}
.inline .segment {
  display: inline-block;
  vertical-align: top;
  letter-spacing: normal;
  word-spacing: normal;
  margin-right: 1.5873015873015872%;
  display: inline-block;
  vertical-align: top;
  letter-spacing: normal;
  word-spacing: normal;
}
.section-1 .segment {
  width: 100%;
}
.section-2 .segment {
  display: inline-block;
  vertical-align: top;
  letter-spacing: normal;
  word-spacing: normal;
  width: 49.2063492063492%;
  margin-right: 1.5873015873015872%;
}
.section-2 .secondary {
  margin-right: 0;
  float: right;
}
.section-3 .segment {
  width: 49.2063492063492%;
}
.section-4 .segment {
  width: 49.2063492063492%;
}
/* media query example */
@media all and (max-width: 40em) {
  .section-3 .segment:nth-child(2n),
  .section-4 .segment:nth-child(2n) {
    margin-right: 0;
    float: right;
  }
}
@media all and (min-width: 40em) {
  .section-1 .segment {
    width: 23.809523809523807%;
  }
  .section-1 .quaternary {
    margin-right: 0;
    float: right;
  }
  .section-2 .primary {
    width: 61.904761904761905%;
  }
  .section-2 .secondary {
    width: 36.507936507936506%;
    margin-right: 0;
    float: right;
  }
  .section-3 .segment:nth-child(4n) {
    margin-right: 0;
    float: right;
  }
  .section-3 .primary {
    width: 17.46031746031746%;
  }
  .section-3 .secondary {
    width: 23.809523809523807%;
  }
  .section-3 .tertiary {
    width: 36.507936507936506%;
  }
  .section-3 .quaternary {
    width: 17.46031746031746%;
    margin-right: 0;
    float: right;
  }
  .section-4 .primary {
    width: 11.11111111111111%;
    padding-right: 6.349206349206349%;
  }
  .section-4 .secondary {
    width: 11.11111111111111%;
    padding-left: 6.349206349206349%;
    margin-left: 6.349206349206349%;
  }
  .section-4 .tertiary {
    width: 17.46031746031746%;
    margin-left: 6.349206349206349%;
  }
  .section-4 .quaternary {
    width: 17.46031746031746%;
    padding-left: 6.349206349206349%;
    margin-right: 6.349206349206349%;
  }
}
/* Nested Grids */
.section-parent .segment {
  width: 49.2063492063492%;
}
.section-parent > .secondary {
  background-color: transparent;
  padding: 0;
  margin-right: 0;
  float: right;
}
.section-nested .segment {
  width: 22.58064516129032%;
  margin-right: 3.225806451612903%;
  background: #999;
}
.floated .section-nested .segment > .secondary,
.floated .section-parent .segment:nth-child(4n) {
  margin-right: 0;
  float: right;
}
.inline .section-nested .segment > .secondary,
.inline .section-parent .segment:nth-child(4n) {
  margin-right: 0;
}
/* Sprites & Icons */
.more {
  display: inline-block;
  position: relative;
  padding-right: 16px;
}
.ie6 .more,
.ie7 .more {
  display: inline;
  zoom: 1;
}
.more:before {
  position: absolute;
  display: block;
  content: ' ';
  background-image: url('/examples/sprite.png');
  background-repeat: no-repeat;
  background-position: -100px -50px;
  height: 11px;
  width: 6px;
  top: 4px;
  right: 0;
}
.icon-nav a {
  display: inline-block;
  padding-top: 10px;
  padding-bottom: 10px;
  position: relative;
  padding-left: 38px;
}
.ie6 .icon-nav a,
.ie7 .icon-nav a {
  display: inline;
  zoom: 1;
}
.icon-nav a:before {
  position: absolute;
  display: block;
  content: ' ';
  background-image: url('/examples/sprite.png');
  background-repeat: no-repeat;
  background-position: 0px 0px;
  height: 28px;
  width: 28px;
  top: 2px;
  left: 0;
}
.icon-nav .robots a:before {
  background-position: 0px 0px;
}
.icon-nav .robots a:hover:before {
  background-position: -50px 0px;
}
.icon-nav .rockets a:before {
  background-position: 0px -50px;
}
.icon-nav .rockets a:hover:before {
  background-position: -50px -50px;
}
.icon-nav .runners a:before {
  background-position: 0px -100px;
}
.icon-nav .runners a:hover:before {
  background-position: -50px -100px;
}
.icon-nav .ghosts a:before {
  background-position: 0px -150px;
}
.icon-nav .ghosts a:hover:before {
  background-position: -50px -150px;
}
/* Other Helpers */