16pixels.css

/*!
 * 16pixels
 * github.com/englishextra/16pixels
 * bitbucket.org/englishextra/16pixels
 * pastebin.com/xAzjZ6aR
 * codepen.io/englishextra/pen/avIzi
 */
.col div,.col span,.col applet,.col object,.col iframe,.col h1,.col h2,.col h3,.col h4,.col h5,.col h6,.col p,.col blockquote,.col pre,.col a,.col abbr,.col acronym,.col address,.col big,.col cite,.col code,.col del,.col dfn,.col em,.col img,.col ins,.col kbd,.col q,.col s,.col samp,.col small,.col strike,.col strong,.col sub,.col sup,.col tt,.col var,.col b,.col u,.col i,.col center,.col dl,.col dt,.col dd,.col ol,.col ul,.col li,.col fieldset,.col form,.col label,.col legend,.col table,.col caption,.col tbody,.col tfoot,.col thead,.col tr,.col th,.col td,.col article,.col aside,.col canvas,.col details,.col embed,.col figure,.col figcaption,.col footer,.col header,.col hgroup,.col menu,.col nav,.col output,.col ruby,.col section,.col summary,.col time,.col mark,.col audio,.col video{margin: 0;padding: 0;border: 0;font-size: 100%;font: inherit;vertical-align: baseline;}.col ol,.col ul{list-style: none;}.col blockquote,.col q{quotes: none;}.col blockquote:before,.col blockquote:after,.col q:before,.col q:after{content: '';content: none;}.col table{border-collapse: collapse;border-spacing: 0;}
.col a {
    color: #2483AA;
    text-decoration: none;
    outline: none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.col a:hover,
.col a:focus,
.col a:active {
    color: #C71939;
}
.col h2 a {
    font-weight: inherit;
    color: inherit;
    outline: none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.col address,
.col p.address {
    font-size: 13px;
    line-height: 19px;
    font-weight: 400;
    font-style: italic;
    margin-right: 0;
}
.col.span_2 address,
.col.span_3 address,
.col.span_4 address,
.col.span_2 p.address,
.col.span_3 p.address,
.col.span_4 p.address {
    font-size: 12px;
    line-height: 18px;
}
.col p.blockquote {
    font-weight: 400;
    font-style: italic;
    margin-right: 0;
}
.col h1 {
    font-size: 36px;
    line-height: 37px;
    font-weight: 300;
    color: inherit;
    padding: 0;
}
.col h2 {
    font-size: 20px;
    line-height: 21px;
    font-weight: 600;
    color: inherit;
    padding: 0;
}
.col h3 {
    font-weight: 600;
    font-style: italic;
    color: inherit;
    padding: 0;
}
.col h4 {
    font-weight: 600;
    color: inherit;
    padding: 0;
}
.col h5 {
    font-weight: 600;
    font-variant: small-caps;
    text-decoration: underline;
    color: inherit;
    padding: 0;
}
.col h6 {
    font-weight: 400;
    font-variant: small-caps;
    text-decoration: underline;
    color: inherit;
    padding: 0;
}
.col h4,
.col h5,
.col h6,
.col.span_2 h3,
.col.span_3 h3,
.col.span_4 h3 {
    font-size: 16px;
    line-height: 18px;
}
.col p {
    font-weight: 400;
}
.col caption,
.col label,
.col p.smaller,
.col pre,
.col table td,
.col table th,
.col.span_2 p.blockquote,
.col.span_3 p.blockquote,
.col.span_4 p.blockquote,
.col.span_2 p,
.col.span_3 p,
.col.span_4 p,
.col.span_2 dl dt,
.col.span_3 dl dt,
.col.span_4 dl dt,
.col.span_2 dl dd,
.col.span_3 dl dd,
.col.span_4 dl dd,
.col.span_2 ul li,
.col.span_3 ul li,
.col.span_4 ul li,
.col.span_2 ol li,
.col.span_3 ol li,
.col.span_4 ol li {
    font-size: 14px;
    line-height: 21px;
}
.col p.larger,
.col blockquote {
    font-size: 18px;
    line-height: 27px;
}
.col dl dt {
    font-weight: 600;
    font-style: italic;
}
.col h3,
.col.span_2 h2,
.col.span_3 h2,
.col.span_4 h2 {
    font-size: 18px;
    line-height: 19px;
}
.col dl dt {
    font-size: 16px;
    line-height: 24px;
}
.col p,
.col p.blockquote,
.col dl dd,
.col ul li,
.col ol li,
.col.span_2 blockquote,
.col.span_3 blockquote,
.col.span_4 blockquote {
    font-size: 16px;
    line-height: 24px;
}
.col.span_2 dl dt,
.col.span_3 dl dt,
.col.span_4 dl dt {
    font-size: 14px;
    line-height: 21px;
}
.col dl dd {
    font-weight: 400;
}
.col ul {
    list-style: disc outside;
}
.col ul li {
    font-weight: 400;
}
.col ol {
    list-style: decimal inside;
}
.col ol li {
    font-weight: 400;
}
.col blockquote {
    font-style: italic;
}
.col pre {
    font-family: "Ubuntu Mono", Menlo, "Bitstream Vera Sans Mono", "DejaVu Sans Mono", Monaco, Consolas, monospace;
    white-space: pre;
    white-space: pre-wrap;
    word-wrap: inherit;
    overflow: -moz-scrollbars-horizontal;
    overflow-x: auto;
    color: #FFF;
    background: #5D5D5D;
    background-size: 24px 12px;
    border: 0px solid #5D5D5D;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    padding: 17px 24px;
}
.col pre code {
    font-family: "Ubuntu Mono", Menlo, "Bitstream Vera Sans Mono", "DejaVu Sans Mono", Monaco, Consolas, monospace;
    color: inherit;
    text-shadow: none;
}
.col pre a {
    color: inherit;
    text-decoration: none;
    outline: none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.col pre a:hover,
.col pre a:active,
.col pre a:focus {
    color: #FFF;
}
.col table {
    width: auto;
    border-collapse: collapse;
    border-spacing: 0;
}
.col table tr {
    background: #FAFAFA;
}
.col table tr:nth-of-type(odd) {
    background: #F4F4F4;
}
.col caption,
.col table th,
.col table td {
    font-family: inherit;
    text-align: left;
}
.col table td,
.col table th {
    padding: 5px 16px;
    border: 0px solid #FAFAFA;
    vertical-align: top;
}
.col.span_2 table td,
.col.span_3 table td,
.col.span_4 table td,
.col.span_2 table th,
.col.span_3 table th,
.col.span_4 table th {
    font-size: 13px;
    line-height: 19px;
}
.col table th {
    font-weight: 600;
    color: #FFF;
    background: #5D5D5D;
}
.col table th a {
    color: inherit;
}
.col table th a:hover,
.col table th a:active,
.col table th a:focus {
    text-decoration: underline;
}
.col table td {
    font-weight: 400;
    color: inherit;
}
.col caption {
    font-weight: 400;
    font-style: italic;
    color: inherit;
}
.col img {
    background: inherit none;
    border: 0px solid #FFF;
    vertical-align: bottom;
    padding: 0;
}
.col img.framed {
    background: #F4F4F4;
    background-size: 24px 12px;
    padding: 8px;
}
.col img.reflow390x180 {
    max-width: 380px;
    max-height: 190px;
}
.col input[type^="text"],
.col select,
.col textarea {
    font-size: 14px;
    line-height: 24px;
    font-weight: 400;
    color: inherit;
    background: #F4F4F4;
    background-size: 24px 12px;
    border: 1px solid #F4F4F4;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    padding: 8px;
    vertical-align: baseline;
    *vertical-align: middle;
    outline: none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.col input[type^="text"],
.col textarea {
    font-family: inherit;
}
.col select {
    font-family: sans-serif;
}
.col button,
.col input[type="button"],
.col input[type="reset"],
.col input[type="submit"],
.col input[type^="text"],
.col select {
    height: 40px;
}
.col input[type^="text"]:focus,
.col select:focus,
.col textarea:focus,
.col input[type^="text"]:active,
.col select:active,
.col textarea:active {
    color: inherit;
    background: #F4F4F4;
    background-size: 24px 12px;
    border: 1px solid #F4F4F4;
}
.col button,
.col input[type="button"],
.col input[type="reset"],
.col input[type="submit"] {
    width: 9em;
    font-size: 14px;
    font-weight: 600;
    font-family: inherit;
    line-height: 24px;
    color: #FFF;
    background: #506F7C none;
    border: 1px solid #506F7C;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    padding: 8px 1em;
    vertical-align: baseline;
    *vertical-align: middle;
    outline: none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.col button:hover,
.col input[type="button"]:hover,
.col input[type="reset"]:hover,
.col input[type="submit"]:hover,
.col button:active,
.col input[type="button"]:active,
.col input[type="reset"]:active,
.col input[type="submit"]:active,
.col button:focus,
.col input[type="button"]:focus,
.col input[type="reset"]:focus,
.col input[type="submit"]:focus {
    color: #FFF;
    background: #3C5B68 none;
    border: 1px solid #3C5B68;
}
.col label {
    display: block;
    font-weight: 400;
    font-style: italic;
    margin-bottom: 2px;
}
.col textarea {
    width: 95%;
}
.col ul,
.col ol,
.col dl {
    margin-left: auto;
}
.col dl dd:before {
    content: "\2014\00a0";
}
.col address,
.col p.address,
.col p.blockquote,
.col dl dd,
.col pre,
.col blockquote {
    margin-left: 24px;
}
.col ol {
    padding-left: 24px;
}
.col .indent {
    text-indent: 24px;
}
.col.span_2 address,
.col.span_2 p.address,
.col.span_2 p.blockquote,
.col.span_2 dd,
.col.span_2 pre,
.col.span_2 blockquote,
.col.span_3 address,
.col.span_3 p.address,
.col.span_3 p.blockquote,
.col.span_3 dd,
.col.span_3 pre,
.col.span_3 blockquote,
.col.span_4 address,
.col.span_4 p.address,
.col.span_4 p.blockquote,
.col.span_4 dd,
.col.span_4 pre,
.col.span_4 blockquote {
    margin-left: 21px;
}
.col.span_2 ol,
.col.span_3 ol,
.col.span_4 ol {
    padding-left: 21px;
}
.col.span_2 .indent,
.col.span_3 .indent,
.col.span_4 .indent {
    text-indent: 21px;
}
.col ul {
    padding-left: 40px;
}
.col td ul {
    margin-top: 0 !important;
}
.col td ul li {
    font-size: inherit !important;
    line-height: inherit !important;
}
.col td ol {
    margin-top: 0 !important;
}
.col td ol li {
    font-size: inherit !important;
    line-height: inherit !important;
}
.col.span_2 ul,
.col.span_3 ul,
.col.span_4 ul {
    padding-left: 35px;
}
.col.textcenter address,
.col.textcenter p.address,
.col.textcenter dd,
.col.textcenter pre,
.col.textcenter blockquote,
.col.textcenter p.blockquote {
    margin-left: 0;
}
.col img,
.col input,
.col ol li,
.col select,
.col textarea,
.col ul li {
    margin: 0;
}
.col address,
.col p.address,
.col p.blockquote,
.col h1,
.col h2,
.col h3,
.col h4,
.col h5,
.col h6,
.col blockquote,
.col caption,
.col dl,
.col dl dd,
.col figcaption,
.col figure,
.col ol,
.col p,
.col pre,
.col table,
.col ul {
    margin-top: 0;
}
.col h2 + div,
.col h2 + p,
.col h2 + table,
.col h3 + div,
.col h3 + p,
.col h3 + table,
.col h4 + div,
.col h4 + p,
.col h4 + table,
.col h5 + div,
.col h5 + p,
.col h5 + table,
.col h6 + div,
.col h6 + p,
.col h6 + table {
    margin-top: 8px;
}
.col address:first-child,
.col div + address,
.col h1 + blockquote,
.col h1 + div,
.col h1 + div.hr,
.col h1 + dl,
.col h1 + ol,
.col h1 + p,
.col h1 + pre,
.col h1 + table,
.col h1 + ul,
.col h2 + blockquote,
.col h2 + dl,
.col h2 + h3,
.col h2 + ol,
.col h2 + pre,
.col h2 + ul,
.col h3 + blockquote,
.col h3 + dl,
.col h3 + h4,
.col h3 + ol,
.col h3 + pre,
.col h3 + ul,
.col h4 + blockquote,
.col h4 + dl,
.col h4 + h3,
.col h4 + h5,
.col h4 + ol,
.col h4 + pre,
.col h4 + ul,
.col h5 + blockquote,
.col h5 + dl,
.col h5 + h6,
.col h5 + h2,
.col h5 + ol,
.col h5 + pre,
.col h5 + ul,
.col h6 + blockquote,
.col h6 + dl,
.col h6 + ol,
.col h6 + pre,
.col h6 + ul,
.col p + address,
.col p + p,
.col p.address,
.col p.blockquote,
.col pre + address,
.col table + address,
.col table + p.address,
.col table + p.blockquote {
    margin-top: 16px;
}
.col blockquote + blockquote,
.col blockquote + dl,
.col blockquote + h1,
.col blockquote + h2,
.col blockquote + h3,
.col blockquote + h4,
.col blockquote + h5,
.col blockquote + h6,
.col blockquote + ol,
.col blockquote + p,
.col blockquote + pre,
.col blockquote + table,
.col blockquote + ul,
.col div + blockquote,
.col div + dl,
.col div + h1,
.col div + h2,
.col div + h3,
.col div + h4,
.col div + h5,
.col div + h6,
.col div + ol,
.col div + p,
.col div + pre,
.col div + table,
.col div + ul,
.col dl + blockquote,
.col dl + dl,
.col dl + h1,
.col dl + h2,
.col dl + h3,
.col dl + h4,
.col dl + h5,
.col dl + h6,
.col dl + ol,
.col dl + p,
.col dl + pre,
.col dl + table,
.col dl + ul,
.col ol + blockquote,
.col ol + dl,
.col ol + h1,
.col ol + h2,
.col ol + h3,
.col ol + h4,
.col ol + h5,
.col ol + h6,
.col ol + ol,
.col ol + p,
.col ol + pre,
.col ol + table,
.col ol + ul,
.col p + blockquote,
.col p + dl,
.col p + figcaption,
.col p + figure,
.col p + h1,
.col p + h2,
.col p + h3,
.col p + h4,
.col p + h5,
.col p + h6,
.col p + ol,
.col p + pre,
.col p + table,
.col p + ul,
.col pre + blockquote,
.col pre + dl,
.col pre + h1,
.col pre + h2,
.col pre + h3,
.col pre + h4,
.col pre + h5,
.col pre + h6,
.col pre + ol,
.col pre + p,
.col pre + pre,
.col pre + table,
.col pre + ul,
.col table + blockquote,
.col table + dl,
.col table + h1,
.col table + h2,
.col table + h3,
.col table + h4,
.col table + h5,
.col table + h6,
.col table + ol,
.col table + p,
.col table + pre,
.col table + table,
.col table + ul,
.col ul + blockquote,
.col ul + dl,
.col ul + h1,
.col ul + h2,
.col ul + h3,
.col ul + h4,
.col ul + h5,
.col ul + h6,
.col ul + ol,
.col ul + p,
.col ul + pre,
.col ul + table,
.col ul + ul,
.col h1:first-child,
.col h2:first-child,
.col h3:first-child,
.col h4:first-child,
.col h5:first-child,
.col h6:first-child,
.col p:first-child,
.col dl:first-child,
.col ul:first-child,
.col ol:first-child,
.col blockquote:first-child,
.col pre:first-child,
.col table:first-child,
.col figcaption:first-child,
.col figure:first-child {
    margin-top: 24px;
}
.col dl dd,
.col address:first-of-type,
.col p.address:first-of-type,
.col address:last-child,
.col p.address:last-child,
.col p.blockquote:first-of-type,
.col p.blockquote:last-child,
.col p:last-child,
.col dl:last-child,
.col ul:last-child,
.col ol:last-child,
.col blockquote:last-child,
.col pre:last-child,
.col table:first-of-type,
.col table:last-child,
.col figcaption:last-child,
.col figure:last-child {
    margin-bottom: 0;
}
.col address,
.col blockquote,
.col dl,
.col figcaption,
.col figure,
.col ol,
.col pre,
.col ul {
    margin-bottom: 24px;
}
.col blockquote + p,
.col div + p,
.col dl + p,
.col h1 + p,
.col h2 + p,
.col h3 + p,
.col h4 + p,
.col h5 + p,
.col h6 + p,
.col ol + p,
.col p + p,
.col pre + p,
.col table + p,
.col ul + p {
    margin-bottom: 16px;
}
.span_440 {
    max-width: 440px;
    margin: 0 auto;
}
.span_720 {
    max-width: 720px;
    margin: 0 auto;
}
.span_940 {
    max-width: 940px;
    margin: 0 auto;
}
.span_1140 {
    max-width: 1140px;
    margin: 0 auto;
}
.indent {
    display: inline-block;
}
.holder {
    margin: 0 auto;
}
.holder select {
    width: 100%;
}
.textcenter {
    text-align: center;
}
.phonetic {
    font-family: Voces, Judson, ConstructiumRegular !important;
    font-style: normal;
    font-weight: 400 !important;
}
.larger {
    font-size: larger !important;
}
.smaller {
    font-size: smaller !important;
}
.italic {
    font-style: italic;
}
.highlight {
    font-weight: 600 !important;
    color: #C71939;
}
.fade {
    opacity: 1;
    transition: opacity .25s ease-in-out;
    -moz-transition: opacity .25s ease-in-out;
    -webkit-transition: opacity .25s ease-in-out;
}
.fade:hover {
    opacity: 0.5;
}
.hr {
    height: 1px;
    background: #F4F4F4;
    padding: 0;
    margin: 24px 0 0;
}