o-/test/style.css

A collection of functions, mixins, and placeholders for sass

@import url(https://fonts.googleapis.com/css?family=Droid+Sans+Mono);
.o-grid:after {
  content: '';
  display: table;
  clear: both; }

.o-grid {
  width: 100%; }

.o-col-1 {
  width: 8.3333333333%;
  float: left; }
  @media (max-width: 768px) {
    .o-col-1 {
      width: 100%;
      float: left; } }

.o-col-2 {
  width: 16.6666666667%;
  float: left; }
  @media (max-width: 768px) {
    .o-col-2 {
      width: 100%;
      float: left; } }

.o-col-3 {
  width: 25%;
  float: left; }
  @media (max-width: 768px) {
    .o-col-3 {
      width: 100%;
      float: left; } }

.o-col-4 {
  width: 33.3333333333%;
  float: left; }
  @media (max-width: 768px) {
    .o-col-4 {
      width: 100%;
      float: left; } }

.o-col-5 {
  width: 41.6666666667%;
  float: left; }
  @media (max-width: 768px) {
    .o-col-5 {
      width: 100%;
      float: left; } }

.o-col-6 {
  width: 50%;
  float: left; }
  @media (max-width: 768px) {
    .o-col-6 {
      width: 100%;
      float: left; } }

.o-col-7 {
  width: 58.3333333333%;
  float: left; }
  @media (max-width: 768px) {
    .o-col-7 {
      width: 100%;
      float: left; } }

.o-col-8 {
  width: 66.6666666667%;
  float: left; }
  @media (max-width: 768px) {
    .o-col-8 {
      width: 100%;
      float: left; } }

.o-col-9 {
  width: 75%;
  float: left; }
  @media (max-width: 768px) {
    .o-col-9 {
      width: 100%;
      float: left; } }

.o-col-10 {
  width: 83.3333333333%;
  float: left; }
  @media (max-width: 768px) {
    .o-col-10 {
      width: 100%;
      float: left; } }

.o-col-11 {
  width: 91.6666666667%;
  float: left; }
  @media (max-width: 768px) {
    .o-col-11 {
      width: 100%;
      float: left; } }

.o-col-12 {
  width: 100%;
  float: left; }
  @media (max-width: 768px) {
    .o-col-12 {
      width: 100%;
      float: left; } }

body {
  font-family: 'Droid Sans Mono', monospace;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  color: #616161; }

h1 {
  text-align: center;
  color: #616161; }

*,
*:before,
*:after {
  box-sizing: border-box; }

.checkbox {
  position: relative;
  display: inline-block; }
  .checkbox input[type=checkbox] {
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    width: 18px;
    height: 18px;
    margin: 0;
    padding: 0;
    cursor: pointer;
    baseline-shift: super; }
    .checkbox input[type=checkbox]:checked + label:after {
      position: absolute;
      top: -2.25px;
      display: inline-block;
      margin: 0;
      padding: 0;
      text-align: center;
      content: '\2713';
      font-family: monospace;
      font-weight: bold;
      font-size: 18px;
      width: 18px;
      height: 18px; }
    .checkbox input[type=checkbox]:not(checked) + label {
      content: ''; }
  .checkbox label {
    display: inline-block;
    width: 18px;
    height: 18px;
    color: #222;
    background: #ddd;
    border: 2px solid #3c3c3c;
    border-radius: 0;
    pointer-events: none; }

.radio {
  position: relative;
  display: inline-block; }
  .radio input[type=radio] {
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    width: 18px;
    height: 18px;
    margin: 0;
    padding: 0;
    cursor: pointer; }
    .radio input[type=radio]:checked + label:after {
      display: block;
      position: absolute;
      text-align: center;
      top: 3px;
      left: 3px;
      width: 12px;
      height: 12px;
      background: #222;
      border-radius: 50%;
      content: ''; }
    .radio input[type=radio]:not(:checked) + label:after {
      opacity: 0; }
  .radio label {
    box-sizing: border-box;
    display: inline-block;
    width: 18px;
    height: 18px;
    color: #222;
    background: #ddd;
    border: 2px solid #3c3c3c;
    border-radius: 50%;
    pointer-events: none; }

[class^=o-col] {
  height: 56px;
  border: 1px solid gray; }

.test {
  margin: 28px auto 28px;
  padding: 14px;
  width: 75%; }

.rc {
  width: 14px;
  height: 14px;
  display: inline-block;
  font-size: 7px;
  margin: 0;
  padding: 0; }

.rc-1 {
  background: #ce93d8; }

.rc-2 {
  background: #b388ff; }

.rc-3 {
  background: #69f0ae; }

.rc-4 {
  background: #d81b60; }

.rc-5 {
  background: #a5d6a7; }

.rc-6 {
  background: #8d6e63; }

.rc-7 {
  background: #827717; }

.rc-8 {
  background: #ccff90; }

.rc-9 {
  background: #009688; }

.rc-10 {
  background: #212121; }

.rc-11 {
  background: #9c27b0; }

.rc-12 {
  background: #7c4dff; }

.rc-13 {
  background: #1a237e; }

.rc-14 {
  background: #ffb74d; }

.rc-15 {
  background: #81c784; }

.rc-16 {
  background: #7e57c2; }

.rc-17 {
  background: #c51162; }

.rc-18 {
  background: #e57373; }

.rc-19 {
  background: #689f38; }

.rc-20 {
  background: #8e24aa; }

.rc-21 {
  background: #cddc39; }

.rc-22 {
  background: #00e676; }

.rc-23 {
  background: #607d8b; }

.rc-24 {
  background: #00c853; }

.rc-25 {
  background: #689f38; }

.rc-26 {
  background: #9e9d24; }

.rc-27 {
  background: #64dd17; }

.rc-28 {
  background: #7b1fa2; }

.rc-29 {
  background: #880e4f; }

.rc-30 {
  background: #4db6ac; }

.rc-31 {
  background: #66bb6a; }

.rc-32 {
  background: #b71c1c; }

.rc-33 {
  background: #ec407a; }

.rc-34 {
  background: #37474f; }

.rc-35 {
  background: #ffab00; }

.rc-36 {
  background: #4fc3f7; }

.rc-37 {
  background: #ce93d8; }

.rc-38 {
  background: #455a64; }

.rc-39 {
  background: #26a69a; }

.rc-40 {
  background: #33691e; }

.rc-41 {
  background: #4dd0e1; }

.rc-42 {
  background: #f48fb1; }

.rc-43 {
  background: #64ffda; }

.rc-44 {
  background: #c62828; }

.rc-45 {
  background: #64dd17; }

.rc-46 {
  background: #8bc34a; }

.rc-47 {
  background: #f57f17; }

.rc-48 {
  background: #388e3c; }

.rc-49 {
  background: #a1887f; }

.rc-50 {
  background: #689f38; }

.rc-51 {
  background: #fb8c00; }

.rc-52 {
  background: #81c784; }

.rc-53 {
  background: #69f0ae; }

.rc-54 {
  background: #2962ff; }

.rc-55 {
  background: #4db6ac; }

.rc-56 {
  background: #212121; }

.rc-57 {
  background: #536dfe; }

.rc-58 {
  background: #fff59d; }

.rc-59 {
  background: #d1c4e9; }

.rc-60 {
  background: #4527a0; }

.rc-61 {
  background: #e0e0e0; }

.rc-62 {
  background: #aa00ff; }

.rc-63 {
  background: #263238; }

.rc-64 {
  background: #ba68c8; }

.rc-65 {
  background: #7c4dff; }

.rc-66 {
  background: #64dd17; }

.rc-67 {
  background: #b2ebf2; }

.rc-68 {
  background: #c8e6c9; }

.rc-69 {
  background: #795548; }

.rc-70 {
  background: #cddc39; }

.rc-71 {
  background: #66bb6a; }

.rc-72 {
  background: #ef9a9a; }

.rc-73 {
  background: #d32f2f; }

.rc-74 {
  background: #4dd0e1; }

.rc-75 {
  background: #6a1b9a; }

.rc-76 {
  background: #212121; }

.rc-77 {
  background: #4527a0; }

.rc-78 {
  background: #76ff03; }

.rc-79 {
  background: #ea80fc; }

.rc-80 {
  background: #b71c1c; }

.rc-81 {
  background: #f9a825; }

.rc-82 {
  background: #546e7a; }

.rc-83 {
  background: #69f0ae; }

.rc-84 {
  background: #827717; }

.rc-85 {
  background: #880e4f; }

.rc-86 {
  background: #607d8b; }

.rc-87 {
  background: #80deea; }

.rc-88 {
  background: #afb42b; }

.rc-89 {
  background: #cddc39; }

.rc-90 {
  background: #424242; }

.rc-91 {
  background: #455a64; }

.rc-92 {
  background: #558b2f; }

.rc-93 {
  background: #d500f9; }

.rc-94 {
  background: #00c853; }

.rc-95 {
  background: #00c853; }

.rc-96 {
  background: #455a64; }

.rc-97 {
  background: #82b1ff; }

.rc-98 {
  background: #d32f2f; }

.rc-99 {
  background: #64dd17; }

.rc-100 {
  background: #ff8a80; }

input[type=range] {
  -webkit-appearance: none;
  margin: 10px 0;
  width: 100%; }
  input[type=range]:focus {
    outline: none; }
  input[type=range]::-webkit-slider-runnable-track {
    width: 100%;
    height: 2px;
    cursor: pointer;
    animate: 0.2s;
    background: #aaa; }
  input[type=range]::-webkit-slider-thumb {
    background: #444;
    cursor: pointer;
    -webkit-appearance: none;
    margin-top: -6px;
    height: 14px;
    width: 8px; }
  input[type=range]:focus::-webkit-slider-runnable-track {
    background: #aaa; }
  input[type=range]::-moz-range-track {
    width: 100%;
    height: 2px;
    cursor: pointer;
    animate: 0.2s;
    background: #aaa; }
  input[type=range]::-moz-range-thumb {
    border: none;
    background: #444;
    cursor: pointer;
    border-radius: 0%;
    height: 14px;
    width: 8px; }
  input[type=range]::-ms-track {
    width: 100%;
    height: 2px;
    cursor: pointer;
    animate: 0.2s;
    background: transparent;
    border-color: transparent;
    border-width: 8px 0;
    color: transparent; }
  input[type=range]::-ms-fill-lower {
    background: #aaa;
    border: 0px solid #000101;
    box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d; }
  input[type=range]::-ms-fill-upper {
    background: #aaa;
    border: 0px solid #000101;
    box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d; }
  input[type=range]::-ms-thumb {
    box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
    border: 0px solid #000000;
    height: 20px;
    width: 8px;
    background: #444;
    cursor: pointer; }
  input[type=range]:focus::-ms-fill-lower {
    background: #aaa; }
  input[type=range]:focus::-ms-fill-upper {
    background: #aaa; }

.range input[type=range] {
  -webkit-appearance: none;
  margin: 10px 0;
  width: 100%; }
  .range input[type=range]:focus {
    outline: none; }
  .range input[type=range]::-webkit-slider-runnable-track {
    width: 100%;
    height: 2px;
    cursor: pointer;
    animate: 0.2s;
    background: red; }
  .range input[type=range]::-webkit-slider-thumb {
    background: blue;
    cursor: pointer;
    -webkit-appearance: none;
    margin-top: -3px;
    border-radius: 50%;
    height: 8px;
    width: 8px; }
  .range input[type=range]:focus::-webkit-slider-runnable-track {
    background: red; }
  .range input[type=range]::-moz-range-track {
    width: 100%;
    height: 2px;
    cursor: pointer;
    animate: 0.2s;
    background: red; }
  .range input[type=range]::-moz-range-thumb {
    border: none;
    background: blue;
    cursor: pointer;
    border-radius: 50%;
    height: 8px;
    width: 8px; }
  .range input[type=range]::-ms-track {
    width: 100%;
    height: 2px;
    cursor: pointer;
    animate: 0.2s;
    background: transparent;
    border-color: transparent;
    border-width: 8px 0;
    color: transparent; }
  .range input[type=range]::-ms-fill-lower {
    background: red;
    border: 0px solid #000101;
    box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d; }
  .range input[type=range]::-ms-fill-upper {
    background: red;
    border: 0px solid #000101;
    box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d; }
  .range input[type=range]::-ms-thumb {
    box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
    border: 0px solid #000000;
    height: 20px;
    width: 8px;
    background: blue;
    cursor: pointer; }
  .range input[type=range]:focus::-ms-fill-lower {
    background: red; }
  .range input[type=range]:focus::-ms-fill-upper {
    background: red; }

.p1 {
  color: #f44336; }

.p2 {
  color: #4caf50; }

.p3 {
  color: #2196f3; }

.p4 {
  color: yellow;
  background: #304ffe; }

.p5 {
  color: #1b5e20;
  background: #d50000; }

.p6 {
  color: #304ffe;
  background: yellow; }

.media {
  margin: 0 auto 0;
  background: white;
  height: 64px;
  border: 1px solid black; }
  @media only screen and (min-width: 960px) {
    .media {
      width: 25%; } }
  @media only screen and (min-width: 721px) and (max-width: 959px) {
    .media {
      width: 75%; } }
  @media only screen and (max-width: 720px) {
    .media {
      width: 100%; } }
  @media only screen and (min-width: 721px) and (max-width: 959px) {
    .media {
      background: red; } }
  @media only screen and (max-width: 720px) {
    .media {
      background: red; } }

.golden {
  a: 48.54102;
  a: 78.5410207547;
  a: 18.54102;
  a: 11.4589807547; }