Mercurial > hg > dml-open-cliopatria
view cpack/dml/web/css/kube310/kube.css @ 0:718306e29690 tip
commiting public release
author | Daniel Wolff |
---|---|
date | Tue, 09 Feb 2016 21:05:06 +0100 |
parents | |
children |
line wrap: on
line source
/* Kube CSS-Framework 3.1 */ /* =Reset -----------------------------------------------------------------------------*/ *, *:before, *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } html { font-family: sans-serif; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; } html, body, div, span, object, iframe, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video, h1, h2, h3, h4, h5, h6 { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; } a:active, a:hover { outline: 0; } article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, embed, object, iframe, audio, video, canvas, progress, meter, output, textarea { display: block; } audio:not([controls]) { display: none; height: 0; } /* To prevent some browsers from inserting quotes on q and p */ blockquote, q { quotes: none; } blockquote p:before, blockquote p:after, q:before, q:after { content: ''; content: none; } /* Table reset */ table { border-collapse: collapse; border-spacing: 0; } caption, th, td { text-align: left; vertical-align: top; } thead th, thead td { font-weight: bold; vertical-align: bottom; } /* Image inside */ a img, th img, td img { vertical-align: top; } button, input, select, textarea { margin: 0; } textarea { overflow: auto; vertical-align: top; resize: vertical; } /* Normalize buttons in IE */ button { width: auto; overflow: visible; } /* Hand cursor on clickable controls */ input[type="reset"], input[type="submit"], input[type="file"], input[type="radio"], input[type="checkbox"], select, button { cursor: pointer; } /* Trick with vertical align for radio and checkbox */ input[type="radio"], input[type="checkbox"] { font-size: 110%; position: relative; top: -1px; } /* Normalize search fields */ input[type="search"] { -webkit-appearance: textfield; } input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; } /* Normalize horizontal line */ hr { display: block; height: 1px; border: 0; border-top: 1px solid #ddd; } /* Responsive media */ img, video, audio, embed, object { max-width: 100%; } img, video, embed, object { height: auto; } embed, object { height: 100%; } img { vertical-align: middle; -ms-interpolation-mode: bicubic; } /* =Typography -----------------------------------------------------------------------------*/ body { font-family: "Helvetica Neue", Helvetica, Tahoma, sans-serif; font-size: 0.85em; line-height: 1.618em; background: #ffffff; color: black; /* #333333; */ } /* =Links -----------------------------------------------------------------------------*/ a { color: #3570c3; } a:focus, a:hover { color: #d70a16; } /* =Headings -----------------------------------------------------------------------------*/ h1, h2, h3, h4, h5, h6 { font-family: "Helvetica Neue", Helvetica, Tahoma, sans-serif; font-weight: bold; color: #222222; text-rendering: optimizeLegibility; } h1 { font-size: 2.125em; line-height: 1.111em; margin-bottom: 0.809em; } h2 { font-size: 1.7em; line-height: 1.111em; margin-bottom: .25em; } h3 { font-size: 1.4449999999999998em; line-height: 1.333em; margin-bottom: .25em; } h4 { font-size: 1.105em; line-height: 1.5em; margin-bottom: .333em; } h5 { font-size: 0.85em; line-height: 1.618em; margin-bottom: .25em; } h6 { font-size: 0.7224999999999999em; text-transform: uppercase; line-height: 1.618em; margin-bottom: .25em; } /* =Subheadings -----------------------------------------------------------------------------*/ hgroup h1:first-child, hgroup h2:first-child, hgroup h3:first-child, hgroup h4:first-child, hgroup h5:first-child { margin-bottom: 0; } h1.subheading, h2.subheading, h3.subheading, h4.subheading, h5.subheading { margin-top: 0; font-weight: 300; } h1.subheading { font-size: 1.4166666666666667em; } h2.subheading { font-size: 1.1333333333333333em; } h3.subheading { font-size: 0.9633333333333333em; } h4.subheading { margin-top: .2em; font-size: 0.9208333333333334em; } h5.subheading { margin-top: .2em; font-size: 0.7555555555555555em; } /* =Lead -----------------------------------------------------------------------------*/ .lead { font-size: 1.35em; font-weight: 300; line-height: 1.35em; margin-bottom: 0.809em; } /* =Line height and margin -----------------------------------------------------------------------------*/ p, ul, ol, dl, dd, dt, blockquote, td, th { line-height: 1.618em; } ul, ol, ul ul, ol ol, ul ol, ol ul { margin: 0 0 0 3.236em; } ol ol li { list-style-type: lower-alpha; } ol ol ol li { list-style-type: lower-roman; } p, ul, ol, dl, blockquote, hr, pre, table, form, fieldset, figure, address { margin-bottom: 1.618em; } /* =Blockquote -----------------------------------------------------------------------------*/ blockquote { position: relative; font-style: italic; margin-left: 2.427em; padding-left: 1.618em; border-left: 2px solid rgba(0, 0, 0, 0.15); } blockquote p { margin-bottom: .5em; } blockquote small, cite { color: rgba(0, 0, 0, 0.4); font-style: italic; } small, blockquote cite { font-size: 0.85em; line-height: 1; } /* =Address -----------------------------------------------------------------------------*/ address { font-style: normal; } /* =Definition list -----------------------------------------------------------------------------*/ dl dt { font-weight: bold; } dd { margin-left: 1.0786666666666667em; } /* =Text-level -----------------------------------------------------------------------------*/ s, del { text-decoration: line-through; } abbr[title], dfn[title] { border-bottom: 1px dotted #000; cursor: help; } strong, b { font-weight: bold; } em, i { font-style: italic; } sub, sup { font-size: 0.65em; line-height: 0; position: relative; } sup { top: -0.5em; } sub { bottom: -0.25em; } figcaption { font-size: 0.85em; font-style: italic; } ins, u { text-decoration: underline; } mark { background-color: #fddc43; color: #0f0f0f; text-decoration: none; } /* =Code -----------------------------------------------------------------------------*/ pre, code, kbd, samp, var, output { font-size: 90%; font-style: normal; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; } pre { font-size: 90%; line-height: 1.45em; color: #333333; background: #f6f6f6; padding: 1.618em; overflow: auto; } code, samp, kbd { padding: 3px 6px 2px 6px; display: inline-block; line-height: 1; border-radius: 2px; } code { background: #f6f6f6; border: 1px solid #ddd; } pre code { font-size: 100%; border: none; padding: 0; background: none; line-height: 1.618em; } var { color: rgba(0, 0, 0, 0.5); } samp { background: #e9effa; border: 1px solid #c5d4f0; } kbd { background: #0f0f0f; color: rgba(255, 255, 255, 0.85); white-space: nowrap; } /* =Form -----------------------------------------------------------------------------*/ button:active, button:focus { outline: none; } button, input, textarea, select { font-family: "Helvetica Neue", Helvetica, Tahoma, sans-serif; font-size: 1em; box-shadow: none; } textarea, select[multiple], select[multiple="multiple"] { padding: .3em .35em; line-height: 1.35em; width: 99.9%; } input[type="text"], input[type="password"], input[type="email"], input[type="url"], input[type="phone"], input[type="tel"], input[type="number"], input[type="datetime"], input[type="date"], input[type="month"], input[type="color"], input[type="time"], input[type="search"], input[type="datetime-local"], button, input[type="submit"], input[type="reset"] { padding: .3em .35em; line-height: 1.618em; border-radius: 0; outline: none; } select[multiple], select[multiple="multiple"], textarea, input[type="text"], input[type="password"], input[type="email"], input[type="url"], input[type="phone"], input[type="tel"], input[type="number"], input[type="datetime"], input[type="date"], input[type="month"], input[type="color"], input[type="time"], input[type="search"], input[type="datetime-local"] { background: #fff; border: 1px solid #bbbcc0; position: relative; z-index: 1; -webkit-appearance: none; } button, input[type="submit"], input[type="reset"] { font-weight: 400; padding: .3em 1.3em; border: 1px solid transparent; color: #333333; background: #eeeded; cursor: pointer; border-radius: 2px; -webkit-appearance: none; } button:hover, input[type="submit"]:hover, input[type="reset"]:hover { color: rgba(0, 0, 0, 0.5); background: #dbdada; } button[disabled], input[type="submit"][disabled], input[type="reset"][disabled] { background: none; background: #dbdada; cursor: default; color: rgba(0, 0, 0, 0.5); } button[disabled]:hover, input[type="submit"][disabled]:hover, input[type="reset"][disabled]:hover { color: rgba(0, 0, 0, 0.5); } input::-moz-focus-inner, button::-moz-focus-inner { border: 0; padding: 0; } input[type="range"] { position: relative; top: 3px; } input[disabled] { background: #f4f4f4; border: 1px solid #ddd; color: rgba(0, 0, 0, 0.4); } select { margin-bottom: 0 !important; } fieldset { padding: 1.618em; margin-bottom: 1.618em; border: 1px solid #ddd; } fieldset *:last-child { margin-bottom: 0 !important; } legend { font-weight: bold; padding: 0 1em; margin-left: -1em; } /* =Tables -----------------------------------------------------------------------------*/ table { max-width: 100%; width: 100%; empty-cells: show; } table caption { text-transform: uppercase; padding: 0 1.0786666666666667em; color: rgba(0, 0, 0, 0.4); font-size: 0.85em; } table th, table td { border-bottom: 1px solid #eee; padding: 0.809em 1.0786666666666667em; } table tfoot th, table tfoot td { background: #f4f4f4; } /* =Responsive -----------------------------------------------------------------------------*/ /* Portrait tablet to landscape and desktop */ @media (min-width: 768px) and (max-width: 979px) { h1 { font-size: 2.125em; line-height: 1.125; } h2 { font-size: 1.7em; line-height: 1.25; } h3 { font-size: 1.4449999999999998em; line-height: 1.25; } h4 { font-size: 1.105em; line-height: 1.22222222; } h5 { font-size: 0.85em; } h6 { font-size: 0.7224999999999999em; } h1.subheading { font-size: 1.4166666666666667em; } h2.subheading { font-size: 1.1333333333333333em; } h3.subheading { font-size: 0.9633333333333333em; } h4.subheading { font-size: 0.9208333333333334em; } h5.subheading { font-size: 0.7555555555555555em; } } /* Landscape phone to portrait tablet */ @media (max-width: 767px) { h1 { font-size: 1.7em; line-height: 1.25; } h2 { font-size: 1.275em; line-height: 1.15384615; } h3 { font-size: 1.16875em; line-height: 1.13636364; } h4 { font-size: 0.9562499999999999em; line-height: 1.11111111; } h5 { font-size: 0.85em; } h6 { font-size: 0.7224999999999999em; } h1.subheading { font-size: 1.1333333333333333em; } h2.subheading { font-size: 0.85em; } h3.subheading { font-size: 0.7791666666666667em; } h4.subheading { font-size: 0.796875em; } h5.subheading { font-size: 0.7555555555555555em; } .lead { font-size: 1.2em; } ul, ol, ul ul, ol ol, ul ol, ol ul { margin-left: 1.618em; } blockquote { margin-left: 0; } } /* =Grid -----------------------------------------------------------------------------*/ .units-container:after, .units-row:after { content: ""; display: table; clear: both; } .units-container:after, .units-row:after { content: ""; display: table; clear: both; } .units-container { /* it's the trick to not collapse padding-top in the child element */ padding-top: 1px; margin-top: -1px; } .units-row { margin-bottom: 1.618em; } .width-100, .unit-100 { width: 100%; } .width-90, .unit-90 { width: 90%; } .width-80, .unit-80 { width: 80%; } .width-75, .unit-75 { width: 75%; } .width-70, .unit-70 { width: 70%; } .width-66, .unit-66 { width: 66.6%; } .width-65, .unit-65 { width: 65%; } .width-60, .unit-60 { width: 60%; } .width-50, .unit-50 { width: 50%; } .width-40, .unit-40 { width: 40%; } .width-35, .unit-35 { width: 35%; } .width-33, .unit-33 { width: 33.3%; } .width-30, .unit-30 { width: 30%; } .width-25, .unit-25 { width: 25%; } .width-20, .unit-20 { width: 20%; } .width-10, .unit-10 { width: 10%; } input.width-100, input.unit-100 { width: 98.6%; } textarea.width-100, textarea.unit-100 { width: 98.8%; } select.width-100, select.unit-100 { width: 99.4%; } .units-row .unit-90, .units-row .unit-80, .units-row .unit-75, .units-row .unit-70, .units-row .unit-66, .units-row .unit-65, .units-row .unit-60, .units-row .unit-50, .units-row .unit-40, .units-row .unit-35, .units-row .unit-33, .units-row .unit-30, .units-row .unit-25, .units-row .unit-20, .units-row .unit-10 { float: left; margin-left: 3%; } .units-row .unit-90:first-child, .units-row .unit-80:first-child, .units-row .unit-75:first-child, .units-row .unit-70:first-child, .units-row .unit-66:first-child, .units-row .unit-65:first-child, .units-row .unit-60:first-child, .units-row .unit-50:first-child, .units-row .unit-40:first-child, .units-row .unit-35:first-child, .units-row .unit-33:first-child, .units-row .unit-30:first-child, .units-row .unit-25:first-child, .units-row .unit-20:first-child, .units-row .unit-10:first-child { margin-left: 0; } .units-row .unit-90 { width: 89.7%; } .units-row .unit-80 { width: 79.4%; } .units-row .unit-75 { width: 74.25%; } .units-row .unit-70 { width: 69.1%; } .units-row .unit-66 { width: 65.66666666666666%; } .units-row .unit-65 { width: 65.66666666666666%; } .units-row .unit-60 { width: 58.800000000000004%; } .units-row .unit-50 { width: 48.5%; } .units-row .unit-40 { width: 38.2%; } .units-row .unit-35 { width: 31.333333333333332%; } .units-row .unit-33 { width: 31.333333333333332%; } .units-row .unit-30 { width: 27.9%; } .units-row .unit-25 { width: 22.75%; } .units-row .unit-20 { width: 17.6%; } .units-row .unit-10 { width: 7.3%; } .unit-push-90, .unit-push-80, .unit-push-75, .unit-push-70, .unit-push-66, .unit-push-65, .unit-push-60, .unit-push-50, .unit-push-40, .unit-push-35, .unit-push-33, .unit-push-30, .unit-push-25, .unit-push-20, .unit-push-10 { position: relative; } .unit-push-90 { left: 92.7%; } .unit-push-80 { left: 82.4%; } .unit-push-75 { left: 77.25%; } .unit-push-70 { left: 72.1%; } .unit-push-66 { left: 68.66666666666666%; } .unit-push-65 { left: 68.66666666666666%; } .unit-push-60 { left: 61.800000000000004%; } .unit-push-50 { left: 51.5%; } .unit-push-40 { left: 41.2%; } .unit-push-35 { left: 34.33333333333333%; } .unit-push-33 { left: 34.33333333333333%; } .unit-push-30 { left: 30.9%; } .unit-push-25 { left: 25.75%; } .unit-push-20 { left: 20.6%; } .unit-push-10 { left: 10.3%; } .units-row .unit-push-right { float: right; } .centered, .unit-centered { float: none !important; margin: 0 auto !important; } .unit-padding { padding: 1.618em; } .units-padding .unit-100, .units-padding .unit-90, .units-padding .unit-80, .units-padding .unit-75, .units-padding .unit-70, .units-padding .unit-66, .units-padding .unit-65, .units-padding .unit-60, .units-padding .unit-50, .units-padding .unit-40, .units-padding .unit-35, .units-padding .unit-33, .units-padding .unit-30, .units-padding .unit-25, .units-padding .unit-20, .units-padding .unit-10 { padding: 1.618em; } .units-split .unit-90, .units-split .unit-80, .units-split .unit-75, .units-split .unit-70, .units-split .unit-66, .units-split .unit-65, .units-split .unit-60, .units-split .unit-50, .units-split .unit-40, .units-split .unit-35, .units-split .unit-33, .units-split .unit-30, .units-split .unit-25, .units-split .unit-20, .units-split .unit-10 { margin-left: 0; } .units-split .unit-90 { width: 90%; } .units-split .unit-80 { width: 80%; } .units-split .unit-75 { width: 75%; } .units-split .unit-70 { width: 70%; } .units-split .unit-66 { width: 66.6%; } .units-split .unit-65 { width: 65%; } .units-split .unit-60 { width: 60%; } .units-split .unit-50 { width: 50%; } .units-split .unit-40 { width: 40%; } .units-split .unit-35 { width: 35%; } .units-split .unit-33 { width: 33.3%; } .units-split .unit-30 { width: 30%; } .units-split .unit-25 { width: 25%; } .units-split .unit-20 { width: 20%; } .units-split .unit-10 { width: 10%; } /* =Responsive -----------------------------------------------------------------------------*/ @media only screen and (max-width: 767px) { .mobile-width-100 { width: 100%; } .units-row .unit-90, .units-row .unit-80, .units-row .unit-75, .units-row .unit-70, .units-row .unit-66, .units-row .unit-65, .units-row .unit-60, .units-row .unit-50, .units-row .unit-40, .units-row .unit-35, .units-row .unit-33, .units-row .unit-30, .units-row .unit-25, .units-row .unit-20, .units-row .unit-10 { width: 100%; float: none; margin-left: 0; margin-bottom: 1.618em; } .unit-push-90, .unit-push-80, .unit-push-75, .unit-push-70, .unit-push-66, .unit-push-65, .unit-push-60, .unit-push-50, .unit-push-40, .unit-push-35, .unit-push-33, .unit-push-30, .unit-push-25, .unit-push-20, .unit-push-10 { left: 0; } .units-row .unit-push-right { float: none; } .units-mobile-50 .unit-90, .units-mobile-50 .unit-80, .units-mobile-50 .unit-75, .units-mobile-50 .unit-70, .units-mobile-50 .unit-66, .units-mobile-50 .unit-65, .units-mobile-50 .unit-60, .units-mobile-50 .unit-40, .units-mobile-50 .unit-30, .units-mobile-50 .unit-35, .units-mobile-50 .unit-33, .units-mobile-50 .unit-25, .units-mobile-50 .unit-20, .units-mobile-50 .unit-10 { float: left; margin-left: 3%; width: 48.5%; } .units-mobile-50 .unit-90:first-child, .units-mobile-50 .unit-80:first-child, .units-mobile-50 .unit-75:first-child, .units-mobile-50 .unit-70:first-child, .units-mobile-50 .unit-66:first-child, .units-mobile-50 .unit-65:first-child, .units-mobile-50 .unit-60:first-child, .units-mobile-50 .unit-40:first-child, .units-mobile-50 .unit-35:first-child, .units-mobile-50 .unit-30:first-child, .units-mobile-50 .unit-33:first-child, .units-mobile-50 .unit-25:first-child, .units-mobile-50 .unit-20:first-child, .units-mobile-50 .unit-10:first-child { margin-left: 0; } } /* =Blocks -----------------------------------------------------------------------------*/ .blocks-2, .blocks-3, .blocks-4, .blocks-5, .blocks-6 { padding-left: 0; list-style: none; margin-left: -3%; } .blocks-2:after, .blocks-3:after, .blocks-4:after, .blocks-5:after, .blocks-6:after { content: ""; display: table; clear: both; } .blocks-2:after, .blocks-3:after, .blocks-4:after, .blocks-5:after, .blocks-6:after { content: ""; display: table; clear: both; } .blocks-2 li, .blocks-3 li, .blocks-4 li, .blocks-5 li, .blocks-6 li { height: auto; float: left; margin-bottom: 1.618em; margin-left: 3%; } .blocks-2 > li { width: 47%; } .blocks-3 > li { width: 30.333333333333332%; } .blocks-4 > li { width: 22%; } .blocks-5 > li { width: 17%; } .blocks-6 > li { width: 13.666666666666666%; } .block-first { clear: both; } /* =Responsive -----------------------------------------------------------------------------*/ @media only screen and (max-width: 767px) { .blocks-2, .blocks-3, .blocks-4, .blocks-5, .blocks-6 { margin-left: 0; margin-bottom: 1.618em; } .blocks-2 > li, .blocks-3 > li, .blocks-4 > li, .blocks-5 > li, .blocks-6 > li { float: none; margin-left: 0; width: 100%; } .blocks-mobile-50 > li, .blocks-mobile-33 > li { float: left; margin-left: 3%; } .blocks-mobile-33, .blocks-mobile-50 { margin-left: -3%; } .blocks-mobile-50 > li { width: 47%; } .blocks-mobile-33 > li { width: 30.333333333333332%; } } /* =Tables -----------------------------------------------------------------------------*/ table.table-bordered td, table.table-bordered th { border: 1px solid #ddd; } table.table-simple td, table.table-simple th, table.table-simple caption { border: none; padding-left: 0; } table.table-flat td, table.table-flat th, table.table-flat caption { border: none; padding: 0; } table.table-striped tbody tr:nth-child(odd) td { background-color: #f8f8f8; } table.table-hovered tbody tr:hover td { background-color: #f4f4f4; } /* Responsive Tables */ .table-container { width: 100%; overflow: auto; margin-bottom: 1.618em; } .table-container table { margin-bottom: 0; } .table-container::-webkit-scrollbar { -webkit-appearance: none; width: 14px; height: 14px; } .table-container::-webkit-scrollbar-thumb { border-radius: 8px; border: 3px solid #fff; background-color: rgba(0, 0, 0, 0.3); } /* =Forms -----------------------------------------------------------------------------*/ .forms label { display: block; margin-bottom: 1.0786666666666667em; } .forms input[type="text"], .forms input[type="password"], .forms input[type="email"], .forms input[type="url"], .forms input[type="phone"], .forms input[type="tel"], .forms input[type="number"], .forms input[type="datetime"], .forms input[type="date"], .forms input[type="month"], .forms input[type="color"], .forms input[type="time"], .forms input[type="search"], .forms input[type="range"], .forms input[type="file"], .forms input[type="datetime-local"], .forms textarea, .forms select { display: block; } .forms-inline-list input[type="text"], .forms-inline-list input[type="password"], .forms-inline-list input[type="email"], .forms-inline-list input[type="url"], .forms-inline-list input[type="phone"], .forms-inline-list input[type="tel"], .forms-inline-list input[type="number"], .forms-inline-list input[type="datetime"], .forms-inline-list input[type="date"], .forms-inline-list input[type="month"], .forms-inline-list input[type="color"], .forms-inline-list input[type="time"], .forms-inline-list input[type="search"], .forms-inline-list input[type="range"], .forms-inline-list input[type="file"], .forms-inline-list input[type="datetime-local"], .forms-inline-list textarea, .forms-inline-list select { display: inline-block; } .forms-list, .forms-inline-list { margin: 0; padding: 0; margin-bottom: 1.0786666666666667em; list-style: none; } .forms-list label, .forms-inline-list li, .forms-inline-list li label { display: inline-block; margin-bottom: 0; } .forms-inline-list li label { margin-right: 0.809em; } .forms-inline-list li { margin-bottom: 3px; } .forms-list li { margin-bottom: 6px; } .forms-desc { margin-top: 4px; color: rgba(0, 0, 0, 0.4); font-size: 0.85em; line-height: 1.4em; } input[type="text"], input[type="password"], input[type="email"], input[type="url"], input[type="phone"], input[type="tel"], input[type="number"], input[type="datetime"], input[type="date"], input[type="month"], input[type="color"], input[type="time"], input[type="search"], input[type="datetime-local"], textarea { -moz-transition: border ease 0.5s; transition: border ease 0.5s; } /* States */ .error, .success { font-weight: normal; font-size: 0.85em; } input.input-error, textarea.input-error, select.input-error, .input-error { border-color: #d70a16; box-shadow: 0 0 0 2px rgba(215, 10, 22, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2) inset; } input.input-success, textarea.input-success, select.input-success, .input-success { border-color: #159776; box-shadow: 0 0 0 2px rgba(21, 151, 118, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2) inset; } input.input-gray, textarea.input-gray, select.input-gray, .input-gray { border-color: #ccc; box-shadow: 0 0 0 2px rgba(204, 204, 204, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2) inset; } input[type="text"]:focus, input[type="password"]:focus, input[type="email"]:focus, input[type="url"]:focus, input[type="phone"]:focus, input[type="tel"]:focus, input[type="number"]:focus, input[type="datetime"]:focus, input[type="date"]:focus, input[type="month"]:focus, input[type="color"]:focus, input[type="time"]:focus, input[type="search"]:focus, input[type="datetime-local"]:focus, textarea:focus { outline: none; border-color: #5ca9e4; box-shadow: 0 0 0 2px rgba(70, 161, 231, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2) inset; } input.input-search, input[type="search"] { padding-right: .5em; padding-left: .5em; margin-bottom: 0; border-radius: 15px; } /* Sizes */ .input-big, .input-small, .input-small-super { padding: .3em 1.75em; } .input-big { font-size: 1.25em; } .input-small { font-size: 0.85em; } .input-small-super { font-size: 0.65em; } /* Append & Prepend */ .input-groups { display: table !important; } .input-groups input { width: 100%; } .input-groups input, .input-groups .input-append, .input-groups .input-prepend, .input-groups .btn-append { display: table-cell !important; } .input-groups .btn-append, .input-groups .input-append, .input-groups .input-prepend { width: 1%; vertical-align: middle; } .input-groups .input-append, .input-groups .input-prepend { background-color: #eee; border: 1px solid #ccc; margin: 0; padding: .35em .75em .25em .75em; color: rgba(0, 0, 0, 0.5); line-height: 1.618em; font-size: 0.85em; white-space: nowrap; } .input-groups .input-prepend { border-right: none; } .input-groups .input-append { position: relative; z-index: 1; border-left: none; } .input-groups .btn-append .btn { display: block; height: auto; border-radius: 0 2px 2px 0; } /* =Mobile (Portrait) -----------------------------------------------------------------------------*/ @media only screen and (max-width: 767px) { .forms-list label { display: inline-block; } } /* =Navs -----------------------------------------------------------------------------*/ /* NavBar */ .navbar { margin-bottom: 1.618em; } .navbar:after { content: ""; display: table; clear: both; } .navbar:after { content: ""; display: table; clear: both; } .navbar-left { float: left; } .navbar-right { float: right; } .navbar ul { list-style: none; margin: 0; } .navbar ul:after { content: ""; display: table; clear: both; } .navbar ul:after { content: ""; display: table; clear: both; } .navbar ul li { float: left; margin-right: 1.618em; } .navbar-right ul li { margin-right: 0; margin-left: 1.618em; } .navbar ul li a, .navbar ul li span { display: block; text-decoration: none; } .navbar ul li a:hover { color: #d70a16; } .navbar ul li.active a, .navbar ul li span { text-decoration: none; cursor: text; color: rgba(0, 0, 0, 0.4); } /* Fullwidth */ .fullwidth ul { width: 100%; } .fullwidth li { float: none !important; margin: 0; display: table-cell; width: 1%; text-align: center; } .fullwidth li a, .fullwidth li span { display: block; } /* Vertical */ .nav { margin-bottom: 1.618em; } .nav ul { list-style: none; margin: 0; } .nav ul li ul { margin-left: 2em; font-size: .95em; } .nav ul li a, .nav ul li span { display: block; padding: 5px 0; } .nav ul li ul li a, .nav ul li ul li span { padding: 4px 0; } .nav ul li a { text-decoration: none; } .nav ul li a:hover { color: #d70a16; text-decoration: underline; } .nav ul li.active a, .nav ul li span { text-decoration: none; cursor: text; color: rgba(0, 0, 0, 0.4); } /* Stroked */ .nav-stroked li { border-bottom: 1px solid #eee; } .nav-stroked li:last-child { border-bottom: none; } /* Stacked */ .nav-stacked ul { border: 1px solid #eee; border-bottom: 0; } .nav-stacked ul li { border-bottom: 1px solid #eee; } .nav-stacked ul li a, .nav-stacked ul li span { padding: 5px 10px; } .nav-stacked ul li a:hover { background-color: #f5f5f5; } /* Stats */ .nav-stats li { position: relative; } .nav-stats li a, .nav-stats li span { padding-right: 50px; } .nav-stats sup { position: absolute; top: 50%; right: 0; color: rgba(0, 0, 0, 0.4); } .nav-stats.nav-stacked sup { right: .5em; } /* Breadcrumbs */ .breadcrumbs { margin-bottom: 1.618em; } .breadcrumbs:after { content: ""; display: table; clear: both; } .breadcrumbs:after { content: ""; display: table; clear: both; } .breadcrumbs ul { font-size: .9em; color: rgba(0, 0, 0, 0.4); list-style: none; margin: 0; } .breadcrumbs ul:after { content: ""; display: table; clear: both; } .breadcrumbs ul:after { content: ""; display: table; clear: both; } .breadcrumbs ul li { float: left; margin-right: 3px; } .breadcrumbs li + li:before { content: " > "; color: #aaa; font-size: 12px; margin: 0 3px; position: relative; top: -1px; } .breadcrumbs-sections li + li:before { content: " | "; top: 0; } .breadcrumbs-path li + li:before { content: " / "; top: 0; } .breadcrumbs ul li a { color: #0f0f0f; text-decoration: none; } .breadcrumbs ul li.active a, .breadcrumbs ul li.active a:hover { text-decoration: none; cursor: text; color: rgba(0, 0, 0, 0.4); } .breadcrumbs ul li a:hover { color: #0f0f0f; text-decoration: underline; } /* =Pagination -----------------------------------------------------------------------------*/ .pagination { position: relative; left: -9px; margin-left: 0; list-style: none; } .pagination:after { content: ""; display: table; clear: both; } .pagination:after { content: ""; display: table; clear: both; } .pagination li { float: left; margin-right: 2px; } .pagination li a, .pagination li span { display: block; padding: 7px 9px; line-height: 1; border-radius: 2px; color: #0f0f0f; text-decoration: none; } .pagination li span, .pagination li.active a, .pagination li.active a:hover { border: 1px solid #ddd; background: none; cursor: text; } .pagination li a:focus, .pagination li a:hover { text-decoration: none; background-color: #0f0f0f; color: #fff; border: 1px solid transparent; } /* =Responsive -----------------------------------------------------------------------------*/ @media only screen and (max-width: 767px) { .navbar-left, .navbar-right, .navbar ul li, .navbar-right ul li { float: none; text-align: center; } .navbar ul li, .navbar-right ul li { margin-left: 0; margin-right: 0; } .fullwidth ul { width: auto; } .fullwidth li { display: block; width: auto; } } /* =Buttons -----------------------------------------------------------------------------*/ .btn { display: inline-block; vertical-align: top; font-family: "Helvetica Neue", Helvetica, Tahoma, sans-serif; font-size: 1em; font-weight: 400; line-height: 1.618em; text-align: center; text-decoration: none; color: #333333; margin: 0; border: 1px solid transparent; border-radius: 2px; box-shadow: none; cursor: pointer; background: #eeeded; padding: .3em 1.3em; } .btn:hover { color: rgba(0, 0, 0, 0.5); background: #dbdada; } .btn::-moz-focus-inner { border: 0; padding: 0; } .btn-big { font-size: 1.25em; } .btn-small { font-size: 0.85em; } .btn-small-super { font-size: 0.65em; vertical-align: baseline; } .btn-outline { background: none; border: 1px solid #ddd; } .btn-blue, .btn-red, .btn-green, .btn-black { color: rgba(255, 255, 255, 0.9); } .btn-blue:hover, .btn-red:hover, .btn-green:hover, .btn-black:hover { color: rgba(255, 255, 255, 0.6); } .btn-white { background: #fff; } .btn-white:hover { background: #f2f2f2; } .btn-white.btn-outline { background: none; border-color: rgba(255, 255, 255, 0.85); color: rgba(255, 255, 255, 0.85); } .btn-white.btn-outline:hover { color: rgba(0, 0, 0, 0.9); background: #fff; } .btn-blue.btn-outline { background: none; border-color: #3d58a8; color: #3d58a8; } .btn-blue.btn-outline:hover { color: rgba(255, 255, 255, 0.9); background: #3d58a8; } .btn-red.btn-outline { background: none; border-color: #d70a16; color: #d70a16; } .btn-red.btn-outline:hover { color: rgba(255, 255, 255, 0.9); background: #d70a16; } .btn-green.btn-outline { background: none; border-color: #159776; color: #159776; } .btn-green.btn-outline:hover { color: rgba(255, 255, 255, 0.9); background: #159776; } .btn-black.btn-outline { background: none; border-color: #0f0f0f; color: #0f0f0f; } .btn-black.btn-outline:hover { color: rgba(255, 255, 255, 0.9); background: #0f0f0f; } .btn-blue { background: #3d58a8; } .btn-blue:hover { background: #2f4483; } .btn-red { background: #d70a16; } .btn-red:hover { background: #a60811; } .btn-green { background: #159776; } .btn-green:hover { background: #0f6a53; } .btn-yellow { background: #fddc43; color: #000; } .btn-yellow:hover { background: #e7be02; } .btn-black { background: #000; } .btn-black:hover { background: #333333; } .btn-active, .btn[disabled], .btn-disabled { background: none; background: #dbdada; color: rgba(0, 0, 0, 0.5); } .btn-active:hover, .btn[disabled]:hover, .btn-disabled:hover { color: rgba(0, 0, 0, 0.5); } .btn-active { border-top-color: #aaa; border-right-color: #bbb; border-left-color: #bbb; border-bottom-color: #ccc; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2) inset; } .btn-outline.btn[disabled], .btn-outline.btn-disabled { background: none; box-shadow: none; color: rgba(0, 0, 0, 0.3); border: 1px solid rgba(0, 0, 0, 0.1); } .btn-outline.btn-active { background: none; color: rgba(0, 0, 0, 0.4); border-top-color: #ccc; border-right-color: #ccc; border-left-color: #ccc; border-bottom-color: #ddd; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2) inset; } .btn[disabled], .btn-disabled { cursor: default; box-shadow: none; } .btn-blue.btn-active, .btn-red.btn-active, .btn-green.btn-active, .btn-black.btn-active { box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5) inset; } .btn-blue.btn-active, .btn-red.btn-active, .btn-green.btn-active, .btn-black.btn-active, .btn-blue.btn-disabled, .btn-red.btn-disabled, .btn-green.btn-disabled, .btn-black.btn-disabled, .btn-blue[disabled], .btn-red[disabled], .btn-green[disabled], .btn-black[disabled] { color: rgba(255, 255, 255, 0.6); } .btn-blue.btn-active:hover, .btn-red.btn-active:hover, .btn-green.btn-active:hover, .btn-black.btn-active:hover, .btn-blue.btn-disabled:hover, .btn-red.btn-disabled:hover, .btn-green.btn-disabled:hover, .btn-black.btn-disabled:hover, .btn-blue[disabled]:hover, .btn-red[disabled]:hover, .btn-green[disabled]:hover, .btn-black[disabled]:hover { color: rgba(255, 255, 255, 0.6); } .btn-white.btn-active { border-color: #ccc; border-bottom-color: #ddd; } .btn-blue.btn-active { border-color: #2f4483; } .btn-green.btn-active { border-color: #0f6a53; } .btn-red.btn-active { border-color: #a60811; } .btn-yellow.btn-active { border-color: #be9d02; } .btn-black.btn-active { border-color: #000; } .btn-white.btn-active, .btn-white.btn-disabled, .btn-white[disabled] { background: #f2f2f2; } .btn-blue.btn-active, .btn-blue.btn-disabled, .btn-blue[disabled] { background: #2f4483; } .btn-red.btn-active, .btn-red.btn-disabled, .btn-red[disabled] { background: #a60811; } .btn-green.btn-active, .btn-green.btn-disabled, .btn-green[disabled] { background: #0f6a53; } .btn-yellow.btn-active, .btn-yellow.btn-disabled, .btn-yellow[disabled] { background: #e7be02; } .btn-black.btn-active, .btn-black.btn-disabled, .btn-black[disabled] { background: #4d4d4d; } /* =Helpers -----------------------------------------------------------------------------*/ .group:after { content: ""; display: table; clear: both; } .group:after { content: ""; display: table; clear: both; } .big { font-size: 1.25em; } .small { font-size: 0.85em; } .small-super { font-size: 0.65em; } .nowrap, .nowrap td { white-space: nowrap; } .req, .required { font-weight: normal; color: #d70a16; } .color-gray { color: #777; } .color-gray-light { color: #999; } .color-black { color: #000; } .color-red, .error { color: #d70a16; } .color-green, .success { color: #159776; } .text-centered { text-align: center; } .text-right { text-align: right; } .last { margin-right: 0 !important; } .pause { margin-bottom: 0.809em !important; } .end { margin-bottom: 0 !important; } .normal { font-weight: normal; } .bold { font-weight: bold; } .italic { font-style: italic; } .left { float: left; } .right { float: right; } /* Responsive embedded objects */ .video-wrapper { height: 0; padding-bottom: 56.25%; position: relative; margin-bottom: 1.618em; } .video-wrapper iframe, .video-wrapper object, .video-wrapper embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } /* =Responsive -----------------------------------------------------------------------------*/ @media only screen and (max-width: 767px) { .left, .right { float: none; } } /* string content */ .str { color: #dd1144; } /* a keyword */ .kwd { color: #333333; } /* a comment */ .com { color: #999988; } /* a type name */ .typ { color: #445588; } /* a literal value */ .lit { color: #445588; } /* punctuation */ .pun { color: #888; } /* lisp open bracket */ .opn { color: #333333; } /* lisp close bracket */ .clo { color: #333333; } /* a markup tag name */ .tag { color: #367ac3; } /* a markup attribute name */ .atn { color: #51a7c9; } /* a markup attribute value */ .atv { color: #709c1a; } /* a declaration */ .dec { color: #666; } /* a variable name */ .var { color: teal; } /* a function name */ .fun { color: #990000; } @media print { * { text-shadow: none !important; color: #000 !important; background: transparent !important; box-shadow: none !important; font-size: 12pt; } h1 { font-size: 36pt; } h2 { font-size: 24pt; } h3 { font-size: 18pt; } h4 { font-size: 14pt; } h5 { font-size: 12pt; } h6 { font-size: 12pt; } a, a:visited { text-decoration: underline; } a[href]:after { content: " (" attr(href) ")"; } abbr[title]:after { content: " (" attr(title) ")"; } a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; } pre, blockquote { page-break-inside: avoid; } blockquote { border: none; font-style: italic; } img { max-width: 100% !important; } select { background: #fff !important; } }