/* css-framework Version: 4.0.1 Author: Aleksej Romanovskij (http://css-framework.com) License: Creative Commons Attribution 3.0 Unported License (http://creativecommons.org/licenses/by/3.0/) ---------------------------------------- */ abbr, address, article, aside, audio, b, blockquote, body, canvas, caption, cite, code, del, details, dfn, div, dl, dt, dd, em, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, html, i, iframe, img, ins, kbd, label, legend, mark, nav, object, p, pre, q, samp, section, small, span, strong, sub, summary, sup, table, tbody, td, tfoot, th, thead, time, tr, ul, li, ol, var, video { background: none; border: 0; font-size: 100%; margin: 0; outline: 0; padding: 0; text-align: left; text-decoration: none; } article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } .clearfix { zoom: 1; } .clearfix:before, .clearfix:after { display: table; content: ''; } .clearfix:after { clear: both; } .g { zoom: 1; margin: 0 auto; width: 940px; } .g:before, .g:after { display: table; content: ''; } .g:after { clear: both; } .g-row { zoom: 1; margin: 20px 0 0; } .g-row:before, .g-row:after { display: table; content: ''; } .g-row:after { clear: both; } .g-row:first-child { margin-top: 0; } .g-row > [class^='g-'] { float: left; margin: 0 0 0 20px; } .g-row > [class^='g-']:first-child { margin-left: 0; } .g-1 { width: 60px; } .g-2 { width: 140px; } .g-3 { width: 220px; } .g-4 { width: 300px; } .g-5 { width: 380px; } .g-6 { width: 460px; } .g-7 { width: 540px; } .g-8 { width: 620px; } .g-9 { width: 700px; } .g-10 { width: 780px; } .g-11 { width: 860px; } .g-12 { width: 940px; } .f-column { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; float: left; padding-left: 10px; } .f-column:first-child { padding-left: 0; padding-right: 10px; } .f-col-2, .f-col-3, .f-col-4 { zoom: 1; } .f-col-2:before, .f-col-3:before, .f-col-4:before, .f-col-2:after, .f-col-3:after, .f-col-4:after { display: table; content: ''; } .f-col-2:after, .f-col-3:after, .f-col-4:after { clear: both; } .f-col-4 .f-column, .f-col-3 .f-column .f-column, .f-col-2 .f-column { width: 50%; } .f-col-3 > .f-column:first-child { width: 67%; } .f-col-3 > .f-column { width: 33%; } .lt-ie8 .f-column { padding: 0; } .lt-ie8 .f-column > * { margin-left: 10px; } .lt-ie8 .f-column:first-child > * { margin-right: 10px; margin-left: 0; } .lt-ie8 .f-column .f-column { margin: 0; } body { font: normal 13px / 18px Arial, 'Helvetica Neue', Helvetica, sans-serif; background: #ffffff; color: #444444; } a { color: #268bd2; } a:visited { color: #16527c; } a:hover { color: #1e6ea7; } a:active { outline: none; } h1, .h1, h2, .h2, h3, .h3, h4, .h4 { font: bold 26px / 1.3 Arial, 'Helvetica Neue', Helvetica, sans-serif; color: #333333; margin-top: 18px; } h1, .h1 { margin-top: 0; } h2, .h2 { font-size: 22px; } h3, .h3 { font-size: 18px; } blockquote, h4, .h4 { font-size: 14px; } h5, .h5 { font-size: 12px; } h1:first-child, h2:first-child, h3:first-child, h4:first-child, h5:first-child { margin-top: 0; } abbr { border-bottom: 1px dotted #cccccc; } blockquote { padding: 5px 3em; position: relative; } blockquote p { margin: 9px 0 0 0; } blockquote p:first-child { margin: 0; } blockquote:before, blockquote:after { color: #cccccc; font-size: 3em; position: absolute; } blockquote:before { left: 0; top: 0; } blockquote:after { bottom: 0; right: 0; } blockquote cite { color: #888888; font-size: small; font-style: normal; } blockquote cite:before { content: '\2014'; padding-right: .5em; } q, cite { font-style: italic; } blockquote:before, q:before { content: '\00AB'; } blockquote:after, q:after { content: '\00BB'; } pre, code, samp { -moz-border-radius: 3px; border-radius: 3px; background: #fdf6e3; border: 1px solid #fcf1d5; } samp { background: #073642; border-color: #084150; color: #fdf6e3; } pre, code, samp, var, kbd { font-family: Consolas, 'Lucida Console', Monaco, monospace; font-size: .9em; padding: 0 4px; } pre { padding: 7px 9px; -moz-tab-size: 4; -o-tab-size: 4; tab-size: 4; white-space: pre-wrap; word-wrap: break-word; } code, samp { line-height: 0; } b, strong { font-weight: bold; } address, var, i, em { font-style: italic; } dfn { font-style: italic; font-weight: bold; } mark { color: #cb4b16; } ins { color: #859900; } ins:before, ins:after { content: '+'; } del { color: #dc322f; } del:before, del:after { content: '\2212'; } sup, sub { position: relative; font-size: .8em; line-height: 0; } sup { vertical-align: text-top; } sub { vertical-align: text-bottom; } small { font-size: .8em; } hr, .hr { background: #eeeeee; border: 0; height: 2px; } ul, ol { margin-left: 28px; } dt { font-weight: bold; } dd { margin: 0 0 0 7px; } dd:before { color: #839496; content: '\2014'; padding-right: .5em; } p, ul, ol, dl, blockquote, address, pre, hr, .hr, h1, .h1, h2, .h2, h3, .h3, h4, .h4 { margin-bottom: 12px; } table { border-collapse: collapse; border-spacing: 0; margin: 24px 0; max-width: 100%; width: 100%; } caption { font-size: 18px; font-weight: bold; margin: 0 0 12px 0; text-align: center; } th, td { padding: 6px 8px; vertical-align: top; } th { background: #f3f3f3; font-weight: bold; text-align: left; } td, tfoot th { border-top: 1px solid #eeeeee; } tr:hover th, tr:hover td { background: #fdf6e3; } .f-table-zebra tbody tr:nth-child(2n) { background: #f8f8f8; } fieldset { margin: 24px 0; } legend { font-size: 18px; font-weight: bold; margin: 0; padding: 0 0 24px 0; } .f-row { margin: 0 0 12px 0; } .f-row > label, .f-row .f-label { float: left; padding: 5px 0 0 0; text-align: right; width: 200px; } .f-input { margin: 0 0 0 220px; } .f-input + .f-input { margin-top: 6px; } .f-input-help { color: #888888; font-size: 12px; margin: 0; padding-top: 3px; } .f-input-comment, .f-input-inline { margin-left: 5px; } .f-input-comment { display: inline-block; padding: 5px 0 0 0; vertical-align: top; } .f-actions { -moz-border-radius: 0 0 3px 3px; border-radius: 0 0 3px 3px; background: #f3f3f3; margin: 0; padding: 12px 12px 12px 220px; } .f-horizontal .f-row > label, .f-horizontal .f-label { display: block; float: none; padding: 0 0 5px; text-align: left; width: auto; } .f-horizontal .f-input { margin: 0; } .f-horizontal .f-actions { padding: 12px; } select, textarea, input[type="text"], input[type="password"] { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; border: 1px solid; border-color: #bfbfbf #cccccc #d9d9d9; height: 28px; padding: 3px 6px; } .f-bu, select, input[type="text"], input[type="password"], textarea { font: normal 13px / 18px Arial, 'Helvetica Neue', Helvetica, sans-serif; -moz-border-radius: 3px; border-radius: 3px; color: #444444; display: inline-block; vertical-align: middle; } textarea { height: auto; overflow: auto; padding-right: 3px; resize: vertical; } .f-bu, label, select, button { cursor: pointer; } .f-bu { color: #444444; overflow: visible; padding: 3px 10px; position: relative; text-align: center; text-decoration: none; z-index: 0; } .f-bu:link, .f-bu:visited, .f-bu:hover, .f-bu:active { color: #444444; } .f-bu:active { padding-bottom: 2px; padding-top: 4px; } select { -webkit-appearance: none; } option { background: #ffffff; padding: 3px; } select, textarea, input[type="text"], input[type="password"] { background: #ffffff; } textarea, input[type="text"], input[type="password"] { -webkit-box-shadow: inset 1px 2px 2px rgba(0, 0, 0, 0.1); -moz-box-shadow: inset 1px 2px 2px rgba(0, 0, 0, 0.1); box-shadow: inset 1px 2px 2px rgba(0, 0, 0, 0.1); } button::-moz-focus-inner, input::-moz-focus-inner { border: none; padding: 0; } .lt-ie8 select, .lt-ie8 textarea, .lt-ie8 input[type="text"], .lt-ie8 input[type="password"] { height: auto; } .f-buttons .f-bu { -moz-border-radius: 0; border-radius: 0; margin: 0 0 0 -1px; } .f-buttons .f-bu:first-child { -moz-border-radius: 3px 0 0 3px; border-radius: 3px 0 0 3px; } .f-buttons .f-bu:last-child { -moz-border-radius: 0 3px 3px 0; border-radius: 0 3px 3px 0; } .f-bu { background-color: #d9d9d9; background-image: -moz-linear-gradient(#ffffff, #d9d9d9); background-image: -ms-linear-gradient(#ffffff, #d9d9d9); background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(100%, #d9d9d9)); background-image: -webkit-linear-gradient(#ffffff, #d9d9d9); background-image: -o-linear-gradient(#ffffff, #d9d9d9); background-image: linear-gradient(#ffffff, #d9d9d9); -webkit-box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.5); -moz-box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.5); box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.5); border: 1px solid; border-color: transparent rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); } .f-bu:hover { background-color: #cccccc; background-image: -moz-linear-gradient(#f2f2f2, #cccccc); background-image: -ms-linear-gradient(#f2f2f2, #cccccc); background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f2f2f2), color-stop(100%, #cccccc)); background-image: -webkit-linear-gradient(#f2f2f2, #cccccc); background-image: -o-linear-gradient(#f2f2f2, #cccccc); background-image: linear-gradient(#f2f2f2, #cccccc); } .f-bu-warning, .f-bu-success, .f-bu-default { color: #ffffff; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); } .f-bu-warning:link, .f-bu-warning:visited, .f-bu-warning:hover, .f-bu-warning:active, .f-bu-success:link, .f-bu-success:visited, .f-bu-success:hover, .f-bu-success:active, .f-bu-default:link, .f-bu-default:visited, .f-bu-default:hover, .f-bu-default:active { color: #ffffff; } .f-bu-default { background-color: #268bd2; background-image: -moz-linear-gradient(#78b9e6, #268bd2); background-image: -ms-linear-gradient(#78b9e6, #268bd2); background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #78b9e6), color-stop(100%, #268bd2)); background-image: -webkit-linear-gradient(#78b9e6, #268bd2); background-image: -o-linear-gradient(#78b9e6, #268bd2); background-image: linear-gradient(#78b9e6, #268bd2); } .f-bu-default:hover { background-color: #227dbc; background-image: -moz-linear-gradient(#62ade3, #227dbc); background-image: -ms-linear-gradient(#62ade3, #227dbc); background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #62ade3), color-stop(100%, #227dbc)); background-image: -webkit-linear-gradient(#62ade3, #227dbc); background-image: -o-linear-gradient(#62ade3, #227dbc); background-image: linear-gradient(#62ade3, #227dbc); } .f-bu-success { background-color: #859900; background-image: -moz-linear-gradient(#b1cc00, #859900); background-image: -ms-linear-gradient(#b1cc00, #859900); background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #b1cc00), color-stop(100%, #859900)); background-image: -webkit-linear-gradient(#b1cc00, #859900); background-image: -o-linear-gradient(#b1cc00, #859900); background-image: linear-gradient(#b1cc00, #859900); } .f-bu-success:hover { background-color: #6f8000; background-image: -moz-linear-gradient(#9bb300, #6f8000); background-image: -ms-linear-gradient(#9bb300, #6f8000); background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #9bb300), color-stop(100%, #6f8000)); background-image: -webkit-linear-gradient(#9bb300, #6f8000); background-image: -o-linear-gradient(#9bb300, #6f8000); background-image: linear-gradient(#9bb300, #6f8000); } .f-bu-warning { background-color: #dc322f; background-image: -moz-linear-gradient(#eb8886, #dc322f); background-image: -ms-linear-gradient(#eb8886, #dc322f); background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #eb8886), color-stop(100%, #dc322f)); background-image: -webkit-linear-gradient(#eb8886, #dc322f); background-image: -o-linear-gradient(#eb8886, #dc322f); background-image: linear-gradient(#eb8886, #dc322f); } .f-bu-warning:hover { background-color: #cf2623; background-image: -moz-linear-gradient(#e77370, #cf2623); background-image: -ms-linear-gradient(#e77370, #cf2623); background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #e77370), color-stop(100%, #cf2623)); background-image: -webkit-linear-gradient(#e77370, #cf2623); background-image: -o-linear-gradient(#e77370, #cf2623); background-image: linear-gradient(#e77370, #cf2623); } .f-radio, .f-check { display: inline-block; padding: 3px 0 0 0; } .f-radio input, .f-check input { margin: 2px; } .f-bu:focus, .f-bu:active { -webkit-box-shadow: inset 1px 2px 2px rgba(0, 0, 0, 0.1); -moz-box-shadow: inset 1px 2px 2px rgba(0, 0, 0, 0.1); box-shadow: inset 1px 2px 2px rgba(0, 0, 0, 0.1); z-index: 1; } .f-bu:active, .f-bu:focus, input[type="text"]:focus, input[type="password"]:focus, textarea:focus { border-color: #268bd2; outline: none; } .f-bu:focus, input[type="text"]:focus, input[type="password"]:focus, textarea:focus { -webkit-box-shadow: 0 0 5px rgba(38, 139, 210, 0.3); -moz-box-shadow: 0 0 5px rgba(38, 139, 210, 0.3); box-shadow: 0 0 5px rgba(38, 139, 210, 0.3); } .f-bu.disabled, .f-bu[disabled], textarea[disabled], select[disabled], input[disabled] { opacity: 0.75; cursor: not-allowed; } .f-valid .f-check, .f-valid .f-radio, .f-valid .f-input-comment { color: #859900; } .f-valid select, .f-valid textarea, .f-valid input[type="text"], .f-valid input[type="password"] { border-color: #859900; } .f-invalid .f-check, .f-invalid .f-radio, .f-invalid .f-input-comment { color: #dc322f; } .f-invalid select, .f-invalid textarea, .f-invalid input[type="text"], .f-invalid input[type="password"] { border-color: #dc322f; } .f-message { background: #feffe3; border-radius: 3px; border: 1px solid #eff3d5; color: #5c5d46; margin: 0 0 12px 0; padding: 8px 27px 8px 12px; position: relative; } .f-message h5 { margin-bottom: 6px; } .f-message .close { cursor: pointer; font-size: 18px; font-weight: bold; opacity: 0.2; position: absolute; right: 10px; top: 8px; } .f-message p { margin-bottom: 4px; } .f-message-actions { margin: 0 -15px 0 0; text-align: right; } .f-message-actions .f-bu { margin-left: 5px; } .f-message-error { background: #ffebe1; border-color: #ffddd3; color: #5c4c45; } .f-message-success { background: #e9f2c9; border-color: #dbe4bb; color: #4b5331; } .close { font-weight: bold; font-size: 18px; cursor: pointer; opacity: 0.2; } .close:before { content: '\00D7'; } .close:hover { opacity: 0.8; } .f-nav { zoom: 1; margin: 0 0 12px 0; position: relative; } .f-nav:before, .f-nav:after { display: table; content: ''; } .f-nav:after { clear: both; } .f-nav > li { float: left; list-style: none; margin: 0 18px 0 0; position: relative; } .f-nav > li > a { display: block; line-height: 28px; text-decoration: none; } .f-nav > li > a:hover { color: #000000; } .f-nav > .active a, .f-nav > .active a:hover { color: #000000; } .f-nav-tabs { border-bottom: 1px solid #d9d9d9; } .f-nav-tabs > li { margin: 0 6px -1px 0; } .f-nav-tabs > li > a { -moz-border-radius: 3px 3px 0 0; border-radius: 3px 3px 0 0; border-bottom: 1px solid transparent; padding: 1px 10px 0; } .f-nav-tabs > li > a:hover { background: #eeeeee; border-color: #d9d9d9; } .f-nav-tabs > .active a, .f-nav-tabs > .active a:hover { background: #ffffff; border: 1px solid #d9d9d9; border-bottom: 1px solid #ffffff; padding: 0 10px; } .f-nav-list { margin: 0 0 12px 0; } .f-nav-list > li { float: none; list-style: none; margin: 0; } .f-nav-list > li > a { display: block; line-height: 28px; padding: 0 11px; text-decoration: none; } .f-nav-list > li > a:hover { color: #000000; } .f-nav-list > .active a, .f-nav-list > .active a:hover { color: #000000; } .f-nav-list.f-nav-tabs { border-bottom: none; } .f-nav-list.f-nav-tabs > .active > a, .f-nav-list.f-nav-tabs > .active > a:hover, .f-nav-list.f-nav-tabs > li > a { -moz-border-radius: 0; border-radius: 0; border: 1px solid #d9d9d9; padding: 0 10px; } .f-nav-list.f-nav-tabs > .active > a, .f-nav-list.f-nav-tabs > .active > a:hover, .f-nav-list.f-nav-tabs > li + li > a { border-top: none; } .f-nav-list.f-nav-tabs > li:first-child > a { -moz-border-radius: 3px 3px 0 0; border-radius: 3px 3px 0 0; } .f-nav-list.f-nav-tabs > li:last-child > a { -moz-border-radius: 0 0 3px 3px; border-radius: 0 0 3px 3px; } .f-nav-bar { background-color: #1a1a1a; background-image: -moz-linear-gradient(#404040, #1a1a1a); background-image: -ms-linear-gradient(#404040, #1a1a1a); background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #404040), color-stop(100%, #1a1a1a)); background-image: -webkit-linear-gradient(#404040, #1a1a1a); background-image: -o-linear-gradient(#404040, #1a1a1a); background-image: linear-gradient(#404040, #1a1a1a); -moz-border-radius: 3px; border-radius: 3px; -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); border: 1px solid #262626; color: #cccccc; position: relative; z-index: 2010; } .f-nav-bar .f-nav-bar-body { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; zoom: 1; width: 940px; height: 36px; line-height: 36px; margin: auto; } .f-nav-bar .f-nav-bar-body:before, .f-nav-bar .f-nav-bar-body:after { display: table; content: ''; } .f-nav-bar .f-nav-bar-body:after { clear: both; } .f-nav-bar .f-nav { float: left; margin: 0; } .f-nav-bar .f-nav > li { margin: 0; } .f-nav-bar .f-nav > li > a { color: #cccccc; line-height: 36px; padding: 0 10px; text-shadow: -1px -1px 0 #000000; } .f-nav-bar .f-nav > li > a:hover, .f-nav-bar .f-nav > .active > a { color: #ffffff; text-shadow: 1px 1px 0 #000000; } .f-nav-bar .f-nav-right { float: right; } .f-nav-bar-title { color: #ffffff; float: left; font-size: 22px; line-height: 33px; padding: 0 15px; text-shadow: 1px 1px 1px #000000; } .f-nav-bar-title a { color: #ffffff; text-decoration: none; } .f-nav-bar-fixed { -moz-border-radius: 0; border-radius: 0; left: 0; position: fixed; right: 0; top: 0; z-index: 2010; } .f-nav-bar-fixed .f-nav-bar-title { padding-left: 0; } .f-breadcrumbs { margin: 0 0 12px; overflow: hidden; padding: 0; } .f-breadcrumbs li { float: left; list-style: none; margin-left: 9px; } .f-breadcrumbs li:before { content: '/'; margin-right: 9px; } .f-breadcrumbs li:first-child { margin-left: 0; } .f-breadcrumbs li:first-child:before { display: none; } .f-breadcrumbs a { text-decoration: none; } .f-breadcrumbs a:hover { text-decoration: underline; } .f-pager { margin: 0 0 12px 0; } .f-pager ul { margin: 0; padding: 0; text-align: center; } .f-pager li { display: inline; list-style: none; padding: 0 5px; } .f-pager .active, .f-pager a { text-decoration: none; } .f-pager-left ul { text-align: left; } .f-pager-right ul { text-align: right; } .f-pager-prev { margin-right: 12px; } .f-pager-next { margin-left: 12px; } .f-pager-prev a:hover, .f-pager-next a:hover { text-decoration: none; } .f-bwi { zoom: 1; margin: 0 0 12px 0; } .f-bwi:before, .f-bwi:after { display: table; content: ''; } .f-bwi:after { clear: both; } .f-bwi-pic { float: left; margin-right: 12px; } .f-bwi-text { overflow: auto; } .f-bwi-right .f-bwi-pic { float: right; margin-left: 12px; margin-right: 0; } .f-gallery { margin: 0; } .f-gallery .f-gallery-item { margin-bottom: 20px; } .f-gallery a { text-decoration: none; } .f-gallery a:hover { text-decoration: underline; } .f-gallery img { -moz-border-radius: 3px; border-radius: 3px; background: #ffffff; border: 1px solid #eeeeee; display: block; padding: 4px; } .f-gallery small { display: block; padding: 0 5px; }