@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; } /* LIENS */ a { color: #2980b9; 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: inline-block; margin: 20px 0 5px; padding: 5px 20px; font-size: 150%; clear: both; background: #ecf0f1; border-radius: 20px; } label { display: block; min-height: 25px; padding: 5px 0; font-size: 12px; line-height: 25px; cursor: pointer; font-weight: bold; color: #444; } input, select, textarea { display: inline-block; max-width: 100%; min-height: 25px; padding: 5px; background: #FFF; border: none; border-bottom: 3px solid #ddd; color: #666; line-height: 25px; vertical-align: middle; border-radius: 5px; } 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: #333; border-color: #2980b9; } input:invalid, select:invalid { border-color: red; box-shadow: 0 0 2px 1px red; } .form-group { margin: 5px 0; border: 1px solid transparent; } .form-group:after { content: ""; display: block; clear: both; } .form-group:hover { background: #fff; border: 1px solid #eee; border-radius: 3px; } .form-group.form-actions { min-width: 250px; margin: 20px 0; padding: 5px 0; background: #ecf0f1; border-top: 3px solid #bdc3c7; border-radius: 5px 5px 0 0; } .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 label { font-weight: normal; font-size: 14px; color: #000; } .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 .btn, .stick input { font-size: 14px; border-radius: 0; } .stick .btn:first-child, .stick input:first-child { border-radius: 5px 0 0 5px; } .stick .btn:last-child, .stick input:last-child, .stick .btn + .dropdown > .btn { border-radius: 0 5px 5px 0; } .stick .btn + .dropdown a { font-size: 12px; } .btn { display: inline-block; min-height: 38px; min-width: 18px; padding: 5px 10px; background: #3498db; border-radius: 5px; border: none; border-bottom: 3px solid #2980b9; color: #fff; line-height: 20px; vertical-align: middle; cursor: pointer; overflow: hidden; } a.btn { min-height: 25px; line-height: 25px; } .btn.active, .btn:active, .btn:hover, .dropdown-target:target ~ .btn.dropdown-toggle { background: #2980b9; text-decoration: none; } .btn-important { background: #e67e22; color: #fff; border-bottom: 3px solid #d35400; } .btn-important:active, .btn-important:hover { background: #d35400; } .btn-attention { background: #e74c3c; color: #fff; border-bottom: 3px solid #c0392b; } .btn-attention:hover, .btn-attention:active { background: #c0392b; } /* NAVIGATION */ .nav-list { border-right: 1px solid #ecf0f1; } .nav-list .nav-header, .nav-list .item { display: block; height: 35px; line-height: 35px; margin: 5px 0; } .nav-list .item:hover, .nav-list .item.active { background: #2980b9; color: #fff; } .nav-list .item:hover a, .nav-list .item.active a { color: #fff; } .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:hover.error a, .nav-list .item.active.error a { color: #fff; background: #BD362F; } .nav-list .item.empty a { color: #f39c12; } .nav-list .item:hover.empty a, .nav-list .item.active.empty a { color: #fff; background: #f39c12; } .nav-list .nav-header { padding: 0 10px; margin: 0; color: #fff; background: #34495e; font-weight: bold; } .nav-list .separator { display: block; height: 0; margin: 5px 0; border-bottom: 1px solid #ddd; } .nav-list .nav-form { padding: 3px; text-align: center; } .nav-head { display: block; margin: 0; background: #34495e; color: #fff; text-align: right; } .nav-head a { color: #fff; } .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: #fff; border: 1px solid #95a5a6; border-radius: 3px; text-align: left; } .dropdown-menu:after { content: ""; position: absolute; top: -6px; right: 13px; width: 10px; height: 10px; background: #fff; border-top: 1px solid #95a5a6; border-left: 1px solid #95a5a6; z-index: -10; transform: rotate(45deg); } .dropdown-header { display: block; padding: 0 5px; color: #34495e; 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 > * { display: block; padding: 0 25px; line-height: 30px; } .dropdown-menu .item:hover { background: #2980b9; color: #fff; } .dropdown-menu .item:hover > * { color: #fff; text-decoration: none; } .dropdown-menu .input { display: block; height: 40px; font-size: 90%; line-height: 30px; } .dropdown-menu label { font-weight: normal; } .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 #95a5a6; } .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: #f4f4f4; border: 1px solid #ccc; border-right: 1px solid #aaa; border-bottom: 1px solid #aaa; border-radius: 5px; color: #aaa; text-shadow: 0 0 1px #eee; } .alert-head { margin: 0; font-weight: bold; font-size: 110%; } .alert-warn { background: #ffe; border: 1px solid #eeb; color: #c95; } .alert-success { background: #dfd; border: 1px solid #cec; color: #484; } .alert-error { background: #fdd; border: 1px solid #ecc; color: #844; } /* ICÔNES */ .icon { display: inline-block; width: 16px; height: 16px; vertical-align: middle; line-height: 16px; }