/* Général */ /* ------- */ body {line-height: 1.5; font-size: 12px; font-family: "Lucida Grande", Verdana, Arial, sans-serif; background: #515358 url(images/bg1.jpg) repeat; margin-top:10px} /* Structures principales */ /* ---------------------- */ div#container {width:98%;min-width:900px; margin:0 auto; background-color: white;-moz-box-shadow: 0px 0px 3px #333; -webkit-box-shadow: 0px 0px 3px #333; box-shadow: 0px 0px 3px #333} div#nav {float:left; width:25.9375%; padding-bottom:60px} div#header {float:right; width:73.9%; position:relative} div#content {float:right; width:69.9%; padding:2% 2%; position:relative} div#footer {display: block;vertical-align: middle; width:51.2%; min-height:60px; padding:2.0833% 20.8333% 2.0833% 28.125%; color:#ccc; font-size:9px; background: #000 url(images/bg-footer-estudio.png) no-repeat 95% center} div#clear {width:100%; clear:both} #aide {margin:0 auto; position:relative; width:98%; height:100%} /* Blocs Fonctions */ /* --------------- */ div.fonctions {float:left; position:relative; background:transparent} div.fonctions.f1 {float:none; width:100%; margin:0 auto} div.fonctions.f2 {min-height:100px; width:75%} div.fonctions.f3 {min-height:50px; width:100%; background: transparent url(images/bg-fonctions-f3.png) repeat-x} /* Header */ /* ------ */ /* Outils : pictos d'Aide, Impression & Diaporama */ /* ----------------------------- */ #outils {position:absolute; z-index:10; width:150px; padding:0; margin:0; height:100px; top:0px; right:0px} #outils li {list-style-type:none} #outils li a {position:absolute; display:block; top:8px; opacity:0.40; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=40)"; filter: alpha(opacity=40)} #outils a:hover {opacity:0.80; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; filter: alpha(opacity=80)} #outils .impression a {width:22px; height:22px; background: url(images/picto-impression.png) no-repeat center center; left:32px} #outils .aide a {width:22px; height:22px; background: url(images/picto-aide.png) no-repeat center center; left:0px} #outils .diaporama a {width:22px; height:22px; background: url(images/picto-diaporama.png) no-repeat center center; left:64px} #outils .ppt a {width:42px; height:22px; background: transparent url(images/picto-diapo-ppt.png) no-repeat center center; top:28px; left:74px} #outils .pdf a {width:42px; height:22px; background: url(images/picto-diapo-pdf.png) no-repeat center center; top:50px; left:74px} #outils .ppth a {width:0px; height:0px; left:72px} #outils .pdfh a {width:44px; height:44px; background: url(images/loading.gif) no-repeat center center; top:28px; left:72px} #outils .supph a {width:42px; height:22px; background: url(images/hide.png) no-repeat center center; top:72px; left:74px} /*#outils .pdf a {width:42px; height:44px; background: url(images/picto-diapo-pdf.png) no-repeat center center; top:28px; left:74px}*/ #outils .supp a {width:42px; height:22px; background: url(images/picto-diapo-supp.png) no-repeat center center; top:72px; left:74px} #outils .diaporama span {color:black; position:absolute; margin-left:90px; top:10px; font-size:14px; font-weight:bold} /* Onglets */ /* ------- */ ul.onglets {position:absolute; top:21px; left:20px} ul.onglets li {float:left; height:20px; line-height:20px; list-style-type: none; padding:4px 12px; background-color:#eee} ul.onglets li.actuel {background-color:white; border-bottom:1px solid white} ul.onglets li.actuel a {color:black; font-weight:bold} ul.onglets li a {text-decoration:none; color:gray} /* ul.onglets li a:hover {text-decoration:none; color:black} */ /* Sidebar/Nav */ /* ----------- */ #nav {text-align:right; background: url(images/logo.png) no-repeat center 14px} #nav h1 {margin:0; height:151px; font-size:0.2em; color:white} /* #nav h3.actuel {display: table-cell; vertical-align: middle; width:235px; height:80px; background: transparent url(images/bg-nav-h2.png) repeat-x; letter-spacing: -1px;padding:0px 15px 15px 0px;font-size:18px } */ #nav h3.actuel {color:#5b85ce; font-weight:bold} #nav h3 {padding:6px 15px 18px 0px;cursor: pointer;} #nav ul {list-style-position: inside!important; margin: 0; padding: 0} #nav ul li {padding:12px 15px 12px 15px; list-style-type: none;cursor: pointer; } #nav ul li:first-child {border-top:none} #nav ul li.actuel {color:#5b85ce; font-weight:bold} #nav a {text-decoration:none; color:black} #nav h3 a {color:black} /* Contenu central */ /* --------------- */ #content h2 {text-align:center} /* Affichage : pictos d'affichage des graphes : Barres, Courbes & Listing */ /* ---------------------------------- */ ul.affichage {position:absolute; top:-12px; right:6px} ul.affichage li {width:18px; height:30px; list-style-type: none; float:left; ; margin-right:10px; padding-top:8px} ul.affichage li.actuel {background: url(images/picto-select1.png) no-repeat center top} ul.affichage li a {display:block; width:18px; height:17px; opacity:0.40; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=40)"; filter: alpha(opacity=40)} ul.affichage a:hover {opacity:0.80; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; filter: alpha(opacity=80)} ul.affichage li.actuel a {opacity:1.00; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100)} ul.affichage a.barres {background: url(images/picto-barres.png) no-repeat center center} ul.affichage a.lignes {background: url(images/picto-lignes.png) no-repeat center center} ul.affichage a.tables {background: url(images/picto-tables.png) no-repeat center center} /* Aide (postits) */ /* -------------- */ span.postit {position:absolute; z-index:1000} span.outils {width:207px; height:83px; top:10px; right:160px; background: url(images/postit-outils.png) no-repeat center top} span.affichage {width:207px; height:83px; top:120px; right:100px; background: url(images/postit-affichage.png) no-repeat center top} /* Bordures */ /* -------- */ .onglets li {border:1px solid #dbdbdb; border-bottom:none} .onglets li.actuel {border-bottom:1px solid white} .fonctions.f3 {border-top:1px dotted #eee; border-bottom:1px solid #eaeaea; } #nav {border-right:1px solid #ddd} #nav ul li {border-bottom:1px solid #ddd} #nav h3 {border-bottom:1px solid #ddd} #nav h2 {border-top:1px solid #ddd} /* Marges */ /* ------ */ #nav h2,#nav ul {margin:0} ul.onglets {margin:0; padding:0} /* Visibilité */ /* ---------- */ .visible {visibility: visible} .invisible {visibility: hidden} /*special tableaux de résultats*/ div#mainContent table#tab { border:3px solid #6495ed; border-collapse:collapse; width:90%; margin:auto; } div#mainContent table#tab thead, tfoot { background-color:#D0E3FA; background-image: url(images/fond_tab.png); border:1px solid #6495ed; } div#mainContent table#tab tbody { background-color:#FFFFFF; border:1px solid #6495ed; } div#mainContent table#tab th { font-family: "Lucida Grande", Verdana, Arial, sans-serif; border:1px dotted #6495ed; padding:5px; background-color:#EFF6FF; width:auto; } div#mainContent table#tab td { font-family: "Lucida Grande", Verdana, Arial, sans-serif; font-size:80%; border:1px solid #6495ed; padding:5px; text-align:left; } div#mainContent table#tab td.vals { font-family: "Lucida Grande", Verdana, Arial, sans-serif; font-size:80%; border:1px solid #6495ed; padding:5px; text-align:center; } div#mainContent table#tab caption { font-family: "Lucida Grande", Verdana, Arial, sans-serif; } /* ------------------------------------------- */ /* Media Queries */ /* http://dev.bowdenweb.com/a/css/media-queries-boilerplate.css */ /** smartphone (landscape)**/ /* @media only screen and (min-width : 321px) { body { min-width: 321px; margin-left:0px;margin-right:0px; padding-right:0px;padding-left:0px; },div#container{width: 100%;margin-left:0px;margin-right:0px;padding-right:0px;padding-left:0px;},.grid_1,.grid_2,.grid_3,.grid_4,.grid_5,.grid_6,.grid_7,.grid_8,.grid_9,.grid_10,.grid_11,.grid_12{margin-left:10px;margin-right:10px}.alpha,.omega{margin-left:0;margin-right:0},.align_center,.align_right{text-align:left} } */ /** smartphone (portrait)**/ /* @media only screen and (max-width : 320px) and (orientation:portrait){ body { min-width:320px; margin-left:0px;margin-right:0px; padding-right:0px;padding-left:0px; },div#container{width: 100%;margin-left:0px;margin-right:0px;padding-right:0px;padding-left:0px;},.grid_1,.grid_2,.grid_3,.grid_4,.grid_5,.grid_6,.grid_7,.grid_8,.grid_9,.grid_10,.grid_11,.grid_12{margin-left:10px;margin-right:10px}.alpha,.omega{margin-left:0;margin-right:0},.align_center,.align_right{text-align:left} } */ /** smartphone (portrait and landscape)**/ /* @media only screen and (min-width : 320px) and (max-width : 480px) and (orientation:landscape){ body { min-width: 400px; margin-left:0px;margin-right:0px; padding-right:0px;padding-left:0px; },div#container{width: 100%;margin-left:0px;margin-right:0px;padding-right:0px;padding-left:0px;},.grid_1,.grid_2,.grid_3,.grid_4,.grid_5,.grid_6,.grid_7,.grid_8,.grid_9,.grid_10,.grid_11,.grid_12{margin-left:10px;margin-right:10px}.alpha,.omega{margin-left:0;margin-right:0},.align_center,.align_right{text-align:left} } */ /** smartphone and desktop 480px **/ /* @media only screen and (max-width: 480px), only screen and (max-device-width: 480px) {} */ /** smartphone and desktop 640px **/ /* @media only screen and (max-width: 640px), only screen and (max-device-width: 640px) { span.outils {right:500px} span.affichage {right:450px} div#container {width:610px!important} #nav h1 {width:150px!important; height:150px; margin:0}} */ /** smart phones htc desire hd width in landscape mode = 533px https://docs.google.com/present/view?id=dkx3qtm_22dxsrgcf4 **/ /* @media only screen and (min-device-width : 320px) and (max-device-width : 569px) {} */ /** iOS **/ /** http://gabrieleromanato.com/2012/09/css-media-queries-per-ipad-e-iphone/ **/ /** iPhone **/ /** iPhone (landscape) **/ /* @media screen and (max-width: 480px) { body { max-width: 480px margin-left:0px;margin-right:0px; },div#container{width:100%;margin-left:0px;margin-right:0px;} } */ /** iPhone (portrait) **/ /* @media screen and (max-width: 320px) { body { max-width: 320px margin-left:0px;margin-right:0px; },div#container{max-width: 320px;margin-left:0px;margin-right:0px;} } @media only screen and (-webkit-min-device-pixel-ratio: 5.1 ), only screen and (min-device-pixel-ratio: 5.1 ) { } */ /** iPhone 4 **/ /* @media only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5) { } */ /** iphone5 and ipod touch 5th gen **/ /* @media (device-height: 568px) and (-webkit-min-device-pixel-ratio: 2) {} */ /** iPad **/ /** iPad (landscape) **/ /* @media screen and (max-width: 1024px) {} */ /** iPad (landscape) **/ /* @media only screen and (min-width : 768px) and (max-width : 1024px) and (orientation : landscape) {} */ /** iPad (portrait) **/ /* @media screen and (min-width: 700px) and (max-width: 770px) { span.outils {right:350px} span.affichage {right:300px} #nav {background-size: 85%; background-position-y :24px} div#container {width:750px} #nav h1 {width:200px; height:151px; margin:0}} */ /** iPad (portrait) **/ /* @media only screen and (min-width : 768px) and (max-width : 1024px) and (orientation : portrait) {} */ /** iPad (portrait and landscape) **/ /* @media only screen and (min-width : 768px) and (max-width : 1024px) {} */ /** Desktops and laptops **/ /* @media only screen and (min-width : 1224px) {} */ /** Large screens **/ /* @media only screen and (min-width : 1824px) {} */ /** high resolution displays media queries https://raw.github.com/gist/3828790/b1cbb060a4213425e24ff3b96d0b376265e4b6ce/mq.css via gist https://gist.github.com/3828790 **/ /** small screen, non-retina **/ /* @media only screen and (min-width: 320px) {} */ /** small screen, retina, stuff to override above media query **/ /* @media only screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: 320px), only screen and ( min--moz-device-pixel-ratio: 2) and (min-width: 320px), only screen and ( -o-min-device-pixel-ratio: 2/1) and (min-width: 320px), only screen and ( min-device-pixel-ratio: 2) and (min-width: 320px), only screen and ( min-resolution: 192dpi) and (min-width: 320px), only screen and ( min-resolution: 2dppx) and (min-width: 320px) { body { min-width: 320px; margin-left:0px;margin-right:0px; },div#container{min-width: 320px;margin-left:0px;margin-right:0px;} } */ /** medium screen, non-retina **/ /* @media only screen and (min-width: 700px) { body { min-width: 700px; margin-left:0px;margin-right:0px; },div#container{min-width: 700px;margin-left:0px;margin-right:0px;} } */ /** medium screen, retina, stuff to override above media query **/ /* @media only screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: 700px), only screen and ( min--moz-device-pixel-ratio: 2) and (min-width: 700px), only screen and ( -o-min-device-pixel-ratio: 2/1) and (min-width: 700px), only screen and ( min-device-pixel-ratio: 2) and (min-width: 700px), only screen and ( min-resolution: 192dpi) and (min-width: 700px), only screen and ( min-resolution: 2dppx) and (min-width: 700px) {} */ /** large screen, non-retina **/ /* @media only screen and (min-width: 1300px) {} */ /** large screen, retina, stuff to override above media query **/ /* @media only screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: 1300px), only screen and ( min--moz-device-pixel-ratio: 2) and (min-width: 1300px), only screen and ( -o-min-device-pixel-ratio: 2/1) and (min-width: 1300px), only screen and ( min-device-pixel-ratio: 2) and (min-width: 1300px), only screen and ( min-resolution: 192dpi) and (min-width: 1300px), only screen and ( min-resolution: 2dppx) and (min-width: 1300px) {} */