@charset "UTF-8"; /* FONTS */ @font-face { font-family: "OpenSans"; src: url("../fonts/openSans.woff") format("woff"); } * { margin: 0; padding: 0; } html, body { height: 100%; font-size: 95%; font-family: "OpenSans", "Cantarell", "Helvetica", "Arial", sans-serif; color: #888; } /* LIENS */ a { color: #6986B2; text-decoration: none; } a:hover { text-decoration: underline; } /* LISTES */ ul, ol, dl { margin: 10px 0 10px 30px; line-height: 190%; } dd { margin: 0 0 10px 30px; } /* TITRES */ h1, h2, h3 { min-height: 40px; margin: 15px 0 5px; line-height: 40px; } /* IMG */ figure { margin: 5px 0 10px; text-align: center; } figcaption { display: inline-block; padding: 3px 20px; color: #999; font-style: italic; border-bottom: 1px solid #ccc; } img { height: auto; max-width: 100%; vertical-align: middle; } a img { border: none; } /* VIDEOS */ iframe, embed, object, video { max-width: 100%; } /* FORMULAIRES */ legend { display: block; width: 100%; margin: 20px 0 5px; padding: 5px 0; border-bottom: 1px solid #2f2f2f; font-size: 150%; clear: both; } label { display: block; min-height: 25px; padding: 5px 0; font-size: 14px; line-height: 25px; cursor: pointer; } input { width: 180px; } textarea { width: 360px; height: 100px; } input, select, textarea { display: inline-block; max-width: 100%; min-height: 25px; padding: 5px; background: #333; border: 1px solid #000; border-radius: 3px; color: #999; line-height: 25px; vertical-align: middle; box-shadow: 0 2px 2px #1d1d1d inset; } option { padding:0 .5em 0 .5em; } input[type="radio"], input[type="checkbox"] { width: 15px !important; min-height: 15px !important; } input:focus, select:focus, textarea:focus { color: #6986b2; border-color: #2f2f2f; } input:invalid, select:invalid { border-color: red; box-shadow: 0 0 2px 1px red; } input:focus.extend { width: 300px; transition: width 200ms linear; } .form-group { margin: 0; } .form-group:after { content: ""; display: block; clear: both; } .form-group.form-actions { min-width: 250px; padding: 5px 0; background: #1a1a1a; border-top: 1px solid #2f2f2f; } .form-group.form-actions .btn { margin: 0 10px; } .form-group .group-name { display: block; float: left; width: 200px; padding: 10px 0; text-align: right; } .form-group .group-controls { min-width: 250px; min-height: 25px; margin: 0 0 0 220px; padding: 5px 0; } .form-group .group-controls .control { display: block; min-height: 30px; padding: 5px 0; line-height: 25px; font-size: 14px; } .stick { display: inline-block; white-space: nowrap; font-size: 0px; vertical-align: middle; } .stick input, .stick .btn { border-radius: 0; font-size: 14px; } .stick .btn:first-child, .stick input:first-child { border-radius: 3px 0 0 3px; } .stick .btn-important:first-child { border-right: 1px solid #000; } .stick .btn:last-child, .stick input:last-child { border-radius: 0 3px 3px 0; } .stick .btn + .btn, .stick .btn + input, .stick .btn + .dropdown > .btn, .stick input + .btn, .stick input + input, .stick input + .dropdown > .btn, .stick .dropdown + .btn, .stick .dropdown + input, .stick .dropdown + .dropdown > .btn { border-left: none; } .stick .btn + .dropdown > .btn { border-left: none; border-radius: 0 3px 3px 0; } .stick .btn + .dropdown a { font-size: 12px; } .btn { display: inline-block; min-height: 37px; min-width: 15px; padding: 5px 10px; background: linear-gradient(to bottom, #fff 0%, #eee 100%); border-radius: 3px; border: 1px solid #000; color: #888; line-height: 20px; vertical-align: middle; cursor: pointer; overflow: hidden; } a.btn { min-height: 25px; line-height: 25px; } .btn:hover { background: linear-gradient(to bottom, #4A5D7A, #26303F); text-decoration: none; } .btn.active, .btn:active, .dropdown-target:target ~ .btn.dropdown-toggle { background: #26303F; } .btn-important { background: linear-gradient(to bottom, #0084CC, #0045CC); color: #888888; border: 1px solid #000000; } .btn-important:hover { background: linear-gradient(to bottom, #0066CC, #0045CC); } .btn-important:active { background: #0044CB; box-shadow: none; } .btn-attention { background: linear-gradient(to bottom, #E95B57, #BD362F); color: #888888; border: 1px solid #000000; } .btn-attention:hover { background: linear-gradient(to bottom, #D14641, #BD362F); } .btn-attention:active { background: #BD362F; box-shadow: none; } /* NAVIGATION */ .nav-list .nav-header, .nav-list .item { display: block; height: 35px; line-height: 35px; } .nav-list .item:hover { background: #1a1a1a; } .nav-list .item:hover a { color: #26303F; } .nav-list .item.active { background: #26303F; color: #1a1a1a; } .nav-list .item.active a { color: #888; } .nav-list .disable { color: #aaa; background: #fafafa; text-align: center; } .nav-list .item > * { display: block; padding: 0 10px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .nav-list a:hover { text-decoration: none; } .nav-list .item.error a { color: #BD362F; } .nav-list .item.active.error a { color: #fff; background: #BD362F; } .nav-list .item.empty a { color: #f39c12; } .nav-list .item.active.empty a { color: #fff; background: #f39c12; } .nav-list .nav-header { padding: 0 10px; background: #1a1a1a; border-bottom: 1px solid #2f2f2f; font-weight: bold; } .nav-list .separator { display: block; height: 0; margin: 5px 0; border-bottom: 1px solid #2f2f2f; } .nav-list .nav-form { padding: 3px; text-align: center; } .nav-head { display: block; margin: 0; background: linear-gradient(to bottom, #fff, #f0f0f0); border-bottom: 1px solid #2f2f2f; text-align: right; } .nav-head .item { display: inline-block; padding: 5px 10px; } /* HORIZONTAL-LIST */ .horizontal-list { display: table; table-layout: fixed; margin: 0; padding: 0; width: 100%; } .horizontal-list .item { display: table-cell; vertical-align: middle; } /* DROPDOWN */ .dropdown { position: relative; display: inline-block; } .dropdown-target { display: none; } .dropdown-menu { display: none; min-width: 200px; margin: 5px 0 0; padding: 5px 0; position: absolute; right: 0px; background: #1a1a1a; border: 1px solid #888; border-radius: 5px; text-align: left; } .dropdown-menu:after { content: ""; position: absolute; top: -6px; right: 13px; width: 10px; height: 10px; background: #1a1a1a; border-top: 1px solid #888; border-left: 1px solid #888; z-index: -10; transform: rotate(45deg); } .dropdown-header { display: block; padding: 0 5px; color: #888; font-weight: bold; font-size: 14px; line-height: 30px; } .dropdown-menu .item { display: block; height: 30px; font-size: 90%; line-height: 30px; } .dropdown-menu > .item > a { display: block; padding: 0 25px; line-height: 30px; } .dropdown-menu > .item.share > a { display: list-item; list-style-position:inside; list-style-type:decimal; } .dropdown-menu > .item:hover { background: #26303F; color: #888; } .dropdown-menu > .item[aria-checked="true"] > a:before { content: '✓ '; font-weight: bold; margin: 0 0 0 -1.2em; padding: 0 0.2em 0 0; } .dropdown-menu > .item:hover > a { color: #888; text-decoration: none; } .dropdown-menu .input { display: block; height: 40px; font-size: 90%; line-height: 30px; } .dropdown-menu .input select, .dropdown-menu .input input { display: block; height: 20px; width: 95%; margin: auto; padding: 2px 5px; border-radius: 3px; } .dropdown-menu .input select { width: 70%; height: auto; } .dropdown-menu .separator { display: block; height: 0; margin: 5px 0; border-bottom: 1px solid #888; } .dropdown-target:target ~ .dropdown-menu { display: block; z-index: 10; } .dropdown-close { display: inline; } .dropdown-close a { font-size: 0; position: fixed; top: 0; bottom: 0; left: 0; right: 0; display: block; z-index: -10; } /* ALERTS */ .alert { display: block; width: 90%; margin: 15px auto; padding: 10px 15px; background: #1a1a1a; border: 1px solid #ccc; border-right: 1px solid #aaa; border-bottom: 1px solid #aaa; border-radius: 5px; color: #aaa; } .alert-head { margin: 0; font-weight: bold; font-size: 110%; } .alert > a { color: inherit; text-decoration: underline; } .alert-warn { border: 1px solid #c95; color: #c95; } .alert-success { border: 1px solid #484; color: #484; } .alert-error { border: 1px solid #844; color: #844; } /* ICÔNES */ .icon { display: inline-block; width: 16px; height: 16px; vertical-align: middle; line-height: 16px; } /* Prompt (centré) */ .prompt { text-align: center; } .prompt label { text-align: left; } .prompt form { margin: 1em auto 2.5em auto; width: 10em; } .prompt input { margin: .4em auto 1.1em auto; width: 100%; } .prompt p { margin: 20px 0; }