/* 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) {}
*/