/*! HTML5 Boilerplate v4.3.0 | MIT License | http://h5bp.com/ */ /* * What follows is the result of much research on cross-browser styling. * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal, * Kroc Camen, and the H5BP dev community and team. */ /* ========================================================================== Base styles: opinionated defaults ========================================================================== */ html, button, input, select, textarea { color: #222; } html { line-height: 1.4; font: 0.9em/1.3em "Droid Sans",Helvetica,Arial,sans-serif; } a {color: black;} /* * Remove text-shadow in selection highlight: h5bp.com/i * These selection rule sets have to be separate. * Customize the background color to match your design. */ ::-moz-selection { background: #b3d4fc; text-shadow: none; } ::selection { background: #b3d4fc; text-shadow: none; } /* * A better looking default horizontal rule */ hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; } hr:last-child { display: block; height: 1px; border: 0; border-top: 4px solid #555; margin: 1em 0; padding: 0; } /* * Remove the gap between images, videos, audio and canvas and the bottom of * their containers: h5bp.com/i/440 */ audio, canvas, img, video { vertical-align: middle; } /* * Remove default fieldset styles. */ fieldset { border: 0; margin: 0; padding: 0; } /* * Allow only vertical resizing of textareas. */ textarea { resize: vertical; } /* ========================================================================== Browse Happy prompt ========================================================================== */ .browsehappy { margin: 0.2em 0; background: #ccc; color: #000; padding: 0.2em 0; } /* ========================================================================== Author's custom styles ========================================================================== */ #navigationMenu { position: absolute; top: 0; left: -2em; } #navigationMenu li{ list-style:none; height:25px; padding:5px 2px; width:25px; } #navigationMenu span{ width:0; left:34px; padding:0; position:absolute; overflow:hidden; font-family:'Myriad Pro',Arial, Helvetica, sans-serif; font-size:14px; white-space:nowrap; line-height:28px; -webkit-transition: 0.25s; -moz-transition: 0.25s; transition: 0.25s; } #navigationMenu a{ /*background:url('../img/navigation.jpg') no-repeat;*/ height:25px; width:25px; display:block; position:relative; color: black; } #navigationMenu a:hover span, #navigationMenu a:hover span{ width:auto; padding:0 20px;overflow:visible; } #navigationMenu a:hover, #navigationMenu a:hover{ text-decoration:none; -moz-box-shadow:0 0 5px #E2E2E2; -webkit-box-shadow:0 0 5px #E2E2E2; box-shadow:0 0 5px #E2E2E2; } #navigationMenu span{ background-color:#E2E2E2; color:#004F9B; font-weight: bold; } /* #navigationMenu .home { background-position: 0 0;} #navigationMenu .password { background-position: -150px -50px;} #navigationMenu .password:hover { background-position:-150px 0;} #navigationMenu .mail { background-position: -100px -50px;} #navigationMenu .mail:hover { background-position:-100px 0;} #navigationMenu .listecooperateurs { background-position: -200px -50px;} #navigationMenu .listecooperateurs:hover { background-position:-200px 0;} #navigationMenu .listenonvotants { background-position: -300px -50px;} #navigationMenu .listenonvotants:hover{ background-position:-300px 0;} #navigationMenu .listevotants { background-position: -250px -50px;} #navigationMenu .listevotants:hover { background-position:-250px 0;} #navigationMenu .resultats { background-position: -50px -50px;} #navigationMenu .resultats:hover { background-position: -50px 0;} #navigationMenu .config { background-position: -350px -50px;} #navigationMenu .config:hover { background-position: -350px 0;} */ .mt1 {margin-top:1em;} .mr1 {margin-right:1em;} .mb1 {margin-bottom:1em;} .ml1 {margin-left:1em;} .mt2 {margin-top:2em;} .mr2 {margin-right:2em;} .mb2 {margin-bottom:2em;} .ml2 {margin-left:2em;} .pt1 {padding-top:1em;} .pr1 {padding-right:1em;} .pb1 {padding-bottom:1em;} .pl1 {padding-left:1em;} .pt2 {padding-top:2em;} .pr2 {padding-right:2em;} .pb2 {padding-bottom:2em;} .pl2 {padding-left:2em;} .red {color: red; text-align: center;} .bold {font-weight: bold;} .clr {clear: both;} .txtctr {text-align: center;} #login, #password { width: 120px; margin: 2px 2px 8px; padding: 4px; } input { border: 1px solid #999; -webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3); -moz-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3); box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3); width: 1.8em; } input[type=submit] { width:15em; background:#004F9B; color:#fff; height:30px; -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; border: 1px solid #999; text-decoration: none; padding: 0.4em; } input[type=submit]:hover { background:#fff; color:#004F9B; } header { margin-bottom: 2em; text-align: center; } #top-bg { width: 100%; position: relative; top: -4px; height: 18px; } header h1 { margin-top: 2em; } header h1,header h4 { text-align: center; } section { padding: 0 1em; } footer { text-align: center; margin-top: 2em; border-top: 1px solid #222; } #pageresults, #pageadmin { text-align: center; width: 90%; margin: 0 auto; min-height: 160px; } .result_pres { width: 20%; display: inline-block; font-size: 1.2em; font-weight: bold; } .result_pres_cs { width: 25%; display: inline-block; font-size: 1.2em; font-weight: bold; padding: 0.5em 0; } .conf_resolution { height:5em; } .conf_cs { width: 20%; } .conf_global_form { margin: 0; padding: 0; list-style: none } .conf_global_form li { overflow: auto } .conf_global_form li + li { margin-top: 5px } .conf_global_form label { float: left; width: auto; margin-right: 10px } .conf_global_form label + div { width: auto; overflow: auto } .conf_global_form input, .conf_global_form textarea { width: 100%; -moz-box-sizing: border-box; box-sizing: border-box } .admin-boxes { width: 200px; height: 100px; display: inline-block; background-color: #EEEEEE; border-radius: 8px; padding: 1em; margin: 1em; vertical-align: bottom; } .admin-boxes span {font-size: 1.2em; font-weight: bold; line-height: 40px;} .onoffswitch { position: relative; width: 90px; -webkit-user-select:none; -moz-user-select:none; -ms-user-select: none; left: 28%; top: 25%; } .onoffswitch-checkbox { display: none; } .onoffswitch-label { display: block; overflow: hidden; cursor: pointer; border: 2px solid #999999; border-radius: 20px; } .onoffswitch-inner { width: 200%; margin-left: -100%; -moz-transition: margin 0.3s ease-in 0s; -webkit-transition: margin 0.3s ease-in 0s; -o-transition: margin 0.3s ease-in 0s; transition: margin 0.3s ease-in 0s; } .onoffswitch-inner:before, .onoffswitch-inner:after { float: left; width: 50%; height: 30px; padding: 0; line-height: 30px; font-size: 14px; color: white; font-family: Trebuchet, Arial, sans-serif; font-weight: bold; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .onoffswitch-inner:before { content: "Fermé"; padding-right: 15px; background-color: #D91912; color: #FFFFFF; } .onoffswitch-inner:after { content: "Ouvert"; padding-right: 10px; background-color: #09BA0A; color: #FFFFFF; text-align: right; } .onoffswitch-switch { width: 18px; margin: 6px; background: #FFFFFF; border: 2px solid #999999; border-radius: 20px; position: absolute; top: 0; bottom: 0; right: 56px; -moz-transition: all 0.3s ease-in 0s; -webkit-transition: all 0.3s ease-in 0s; -o-transition: all 0.3s ease-in 0s; transition: all 0.3s ease-in 0s; } .onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner { margin-left: 0; } .onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch { right: 0px; } /* Popup */ .ui-dialog, .ui-widget { background-color: #EA6B6B; padding: 1em; } .ui-corner-all { border-radius: 1em; } .ui-dialog-titlebar-close { margin-left: 6em; padding: 4px; } .raz-mdp a {text-decoration: none;} /* ========================================================================== Helper classes ========================================================================== */ /* * Image replacement */ .ir { background-color: transparent; border: 0; overflow: hidden; /* IE 6/7 fallback */ *text-indent: -9999px; } .ir:before { content: ""; display: block; width: 0; height: 150%; } /* * Hide from both screenreaders and browsers: h5bp.com/u */ .hidden { display: none !important; visibility: hidden; } /* * Hide only visually, but have it available for screenreaders: h5bp.com/v */ .visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } /* * Extends the .visuallyhidden class to allow the element to be focusable * when navigated to via the keyboard: h5bp.com/p */ .visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; } /* * Hide visually and from screenreaders, but maintain layout */ .invisible { visibility: hidden; } /* * Clearfix: contain floats * * For modern browsers * 1. The space content is one way to avoid an Opera bug when the * `contenteditable` attribute is included anywhere else in the document. * Otherwise it causes space to appear at the top and bottom of elements * that receive the `clearfix` class. * 2. The use of `table` rather than `block` is only necessary if using * `:before` to contain the top-margins of child elements. */ .clearfix:before, .clearfix:after { content: " "; /* 1 */ display: table; /* 2 */ } .clearfix:after { clear: both; } /* * For IE 6/7 only * Include this rule to trigger hasLayout and contain floats. */ .clearfix { *zoom: 1; } /* ========================================================================== EXAMPLE Media Queries for Responsive Design. These examples override the primary ('mobile first') styles. Modify as content requires. ========================================================================== */ @media only screen and (min-width: 832px) { #identform { width: 40%; vertical-align: top; display: inline-block; margin: 0 4%; height: 12em; } #checkvoteform { width: 40%; vertical-align: top; display: inline-block; margin: 0 2%; height: 12em; } #identform input, #checkvoteform input { width: 70% } #pagevote { width: 50%; } #pagefinal { width: 50%; } } @media print, (-o-min-device-pixel-ratio: 5/4), (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 120dpi) { /* Style adjustments for high resolution devices */ } /* ========================================================================== Print styles. Inlined to avoid required HTTP connection: h5bp.com/r ========================================================================== */ @media print { * { background: transparent !important; color: #000 !important; /* Black prints faster: h5bp.com/s */ box-shadow: none !important; text-shadow: none !important; } a, a:visited { text-decoration: underline; } a[href]:after { content: " (" attr(href) ")"; } abbr[title]:after { content: " (" attr(title) ")"; } /* * Don't show links for images, or javascript/internal links */ .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; } pre, blockquote { border: 1px solid #999; page-break-inside: avoid; } thead { display: table-header-group; /* h5bp.com/t */ } tr, img { page-break-inside: avoid; } img { max-width: 100% !important; } @page { margin: 0.5cm; } p, h2, h3 { orphans: 3; widows: 3; } h2, h3 { page-break-after: avoid; } }