/* FONTS */ @font-face { font-family: 'OpenSans'; src: local('fonts/openSans.woff') format('woff'); } * { margin: 0; padding: 0; } html, body { height: 100%; font-size: 95%; font-family: "Cantarell", "Helvetica", "Arial", "sans-serif"; } /* LIENS */ a { color: #0062BE; 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 */ img { max-width: 100%; vertical-align: middle; } a img { border: none; } /* FORMULAIRES */ legend { display: block; width: 100%; margin: 20px 0 5px; padding: 5px 0; border-bottom: 1px solid #ddd; font-size: 150%; clear: both; } label { display: block; min-height: 25px; padding: 5px 0; font-size: 14px; line-height: 25px; cursor: pointer; } input, select, textarea { display: inline-block; max-width: 100%; min-height: 25px; padding: 5px; background: #fdfdfd; border: 1px solid #bbb; border-radius: 3px; color: #666; line-height: 25px; vertical-align: middle; box-shadow: 0 2px 2px #eee inset; } input[type="radio"], input[type="checkbox"] { width: 15px; min-height: 15px; } input:focus, select:focus, textarea:focus { color: #0062BE; border-color: #33BBFF; box-shadow: 0 2px 2px #DDDDFF inset; } .form-group { margin: 0; clear: both; } .form-group.form-actions { min-width: 250px; padding: 5px 0; background: #f4f4f4; border-top: 1px solid #ddd; } .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 { border-radius: 0; font-size: 14px; } .stick .btn { border-radius: 0; font-size: 14px; } .stick .btn:first-child, .stick input:first-child { border-radius: 3px 0 0 3px; } .stick .btn.btn-important:first-child { border-right: 1px solid #06f; } .stick .btn:last-child, .stick input:last-child { border-radius: 0 3px 3px 0; } .stick .btn + .btn, .stick .btn + input, .stick input + .btn, .stick input + input { border-left: none; } .stick input + .btn { border-top: 1px solid #bbb; } .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: #fff; background: linear-gradient(#fff, #eee); border-radius: 3px; border: 1px solid #ddd; border-bottom: 1px solid #aaa; border-right: 1px solid #aaa; color: #666; text-shadow: 0px -1px 0 #ddd; line-height: 20px; vertical-align: middle; cursor: pointer; } a.btn { min-height: 25px; line-height: 25px; } .btn:hover { background: #f0f0f0; background: linear-gradient(#f8f8f8, #f0f0f0); text-decoration: none; } .btn.active, .btn:active { box-shadow: 0px 2px 4px #e0e0e0 inset, 0px 1px 2px #fafafa; background: #eee; } .btn.btn-important { background: #0084CC; background: linear-gradient(#0084CC, #0045CC); color: #fff; border: 1px solid #0062B7; text-shadow: 0px -1px 0 #aaa; } .btn.btn-important:hover { background: linear-gradient(#0066CC, #0045CC); } .btn.btn-important:active { background: #0044CB; box-shadow: none; } .btn.btn-attention { background: #E95B57; background: linear-gradient(#E95B57, #BD362F); color: #fff; border: 1px solid #C44742; text-shadow: 0px -1px 0px #666; } .btn.btn-attention:hover { background: linear-gradient(#D14641, #BD362F); } .btn.btn-attention:active { background: #BD362F; box-shadow: none; } /* NAVIGATION */ .nav.nav-list .nav-header, .nav.nav-list .item { display: block; height: 35px; line-height: 35px; } .nav.nav-list .item:hover { background: #fafafa; } .nav.nav-list .item:hover a { color: #003388; } .nav.nav-list .item.active { background: #0062BE; color: #fff; } .nav.nav-list .item.active a { color: #fff; } .nav.nav-list .disable { color: #aaa; background: #fafafa; text-align: center; } .nav.nav-list .item > * { display: block; padding: 0 10px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .nav.nav-list a:hover { text-decoration: none; } .nav.nav-list .nav-header { padding: 0 10px; color: #888; background: #f4f4f4; border-bottom: 1px solid #ddd; font-weight: bold; text-shadow: 0 0 1px #ddd; } .nav.nav-list .separator { display: block; height: 0; margin: 5px 0; border-bottom: 1px solid #ddd; } .nav.nav-list .nav-form { padding: 3px; text-align: center; } .nav-head { display: block; margin: 0; background: #fff; background: linear-gradient(#fff, #f0f0f0); border-bottom: 1px solid #ddd; 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 .dropdown-target { display: none; } .dropdown .dropdown-menu { display: none; min-width: 200px; margin: 5px 0 0; padding: 5px 0; position: absolute; right: 0px; background: #fff; border: 1px solid #ddd; border-radius: 5px; text-align: left; box-shadow: 3px 3px 3px #ddd; } .dropdown .dropdown-menu .dropdown-header { display: block; padding: 0 5px; color: #888; font-weight: bold; font-size: 14px; line-height: 30px; } .dropdown .dropdown-menu .item { display: block; height: 30px; font-size: 90%; line-height: 30px; } .dropdown .dropdown-menu .item > * { display: block; padding: 0 25px; line-height: 30px; } .dropdown .dropdown-menu .item:hover { background: #0062BE; color: #fff; } .dropdown .dropdown-menu .item:hover > * { color: #fff; text-decoration: none; } .dropdown .dropdown-menu .separator { display: block; height: 0; margin: 5px 0; border-bottom: 1px solid #ddd; } .dropdown .dropdown-target:target ~ .dropdown-menu { display: block; z-index: 10; } .dropdown .dropdown-close { display: inline-block; position: absolute; top: -16px; right: -16px; width: 16px; height: 16px; padding: 5px; background: #fff; border-radius: 50px; border: 1px solid #ddd; line-height: 16px; text-align: center; } .dropdown .dropdown-close:hover { background: #f4f4f4; } /* 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; box-shadow: 1px 1px 3px #aaa inset; } .alert .alert-head { margin: 0; font-weight: bold; font-size: 110%; } /* ICONES */ .icon { display: inline-block; width: 16px; height: 16px; vertical-align: middle; line-height: 16px; background: center center no-repeat; } .icon.i_refresh { background-image: url("icons/refresh.svg"); } .icon.i_bookmark { background-image: url("icons/starred.svg"); } .icon.i_not_bookmark { background-image: url("icons/unstarred.svg"); } .icon.i_read { background-image: url("icons/read.svg"); } .icon.i_unread { background-image: url("icons/unread.svg"); } .icon.i_all { background-image: url("icons/all.svg"); } .icon.i_close { background-image: url("icons/close.svg"); } .icon.i_search { background-image: url("icons/search.svg"); } .icon.i_configure { background-image: url("icons/configure.svg"); } .icon.i_login { background-image: url("icons/login.svg"); } .icon.i_logout { background-image: url("icons/logout.svg"); } .icon.i_add { background-image: url("icons/add.svg"); } .icon.i_link { background-image: url("icons/link.svg"); } .icon.i_down { background-image: url("icons/down.svg"); } .icon.i_up { background-image: url("icons/up.svg"); } .icon.i_help { background-image: url("icons/help.svg"); } .icon.i_note { background-image: url("icons/note.svg"); } .icon.i_note_empty { background-image: url("icons/note_empty.svg"); } .icon.i_category { background-image: url("icons/category.svg"); } .icon.i_rss { background-image: url("icons/rss.svg"); } .icon.i_share { background-image: url("icons/share.svg"); }