@font-face{font-family:sf pro display;font-style:normal;font-weight:400;src:local('SF Pro Display'),url(./fonts/SFPRODISPLAYREGULAR.OTF) format('opentype')}
@font-face{font-family:sf pro display;font-style:italic;font-weight:100;src:local('SF Pro Display'),url(./fonts/SFPRODISPLAYULTRALIGHTITALIC.OTF) format('opentype')}
@font-face{font-family:sf pro display;font-style:italic;font-weight:200;src:local('SF Pro Display'),url(./fonts/SFPRODISPLAYTHINITALIC.OTF) format('opentype')}
@font-face{font-family:sf pro display;font-style:italic;font-weight:300;src:local('SF Pro Display'),url(./fonts/SFPRODISPLAYLIGHTITALIC.OTF) format('opentype')}
@font-face{font-family:sf pro display;font-style:normal;font-weight:500;src:local('SF Pro Display'),url(./fonts/SFPRODISPLAYMEDIUM.OTF) format('opentype')}
@font-face{font-family:sf pro display;font-style:italic;font-weight:600;src:local('SF Pro Display'),url(./fonts/SFPRODISPLAYSEMIBOLDITALIC.OTF) format('opentype')}
@font-face{font-family:sf pro display;font-style:normal;font-weight:700;src:local('SF Pro Display'),url(./fonts/SFPRODISPLAYBOLD.OTF) format('opentype')}
@font-face{font-family:sf pro display;font-style:italic;font-weight:800;src:local('SF Pro Display'),url(./fonts/SFPRODISPLAYHEAVYITALIC.OTF) format('opentype')}
@font-face{font-family:sf pro display;font-style:italic;font-weight:900;src:local('SF Pro Display'),url(./fonts/SFPRODISPLAYBLACKITALIC.OTF) format('opentype')}

/*
@font-face {
  font-family: 'SF Pro Display';
  font-style: normal;
  font-weight: 200;
}
@font-face {
  font-family: 'SF Pro Display';
  font-style: normal;
  font-weight: 300;
}
*/

html { overflow:hidden; 
background-color:#FFFFFF;
}
body { #overflow:hidden;
	font-family: 'SF Pro Display', sans-serif;
       	font-weight: 300; 
	background-color: ##1B4A77;
}
	
code {font-size:1em;}
#bloc-fixe {
	position:fixed;
	#border:solid 1px;
	#background-color:#1B4A77;
	background-color:#FFFFFF;
	width:250px;
	top:0px;
	overflow:auto;
	bottom:0px;
	font-size:90%;
}




#bloc-fixe select {

  /* styling */
  background-color: white;
  border: thin solid #53e3a6;
  border-radius: 4px;
  display: inline-block;
  font: inherit;
  line-height: 1.5em;
  padding: 0.5em 3.5em 0.5em 1em;

  /* reset */

  margin: 0;      
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-appearance: none;
  -moz-appearance: none;
}


/* arrows */

select.classic {
  /*background-image:
    linear-gradient(45deg, transparent 50%, #50a3a2 50%),
    linear-gradient(135deg, blue 50%, transparent 50%),
    linear-gradient(to right, #50a3a2, #50a3a2);
 */ background-position:
    calc(100% - 20px) calc(1em + 2px),
    calc(100% - 15px) calc(1em + 2px),
    100% 0;
  background-size:
    5px 5px,
    5px 5px,
    2.5em 2.5em;
 	border-radius:20px; 
    background-repeat: no-repeat; */
}

select.classic:focus {
  background-image:
    linear-gradient(45deg, transparent 50%, transparent 50%),
    linear-gradient(135deg, #53e3a6 50%, white 50%),
    linear-gradient(to right, #FFFFE0, #FFFFE0);
  background-position:
    calc(100% - 15px) 1em,
    calc(100% - 20px) 1em,
    100% 0;
  background-size:
    5px 5px,
    5px 5px,
    2.5em 2.5em;
  background-repeat: no-repeat;
  border-color: grey;
  outline: 0;
}

footer {
  height: 100px;
  width:250px;
  position: fixed;
  bottom: 0;
  background: #FFFFFF;
  font-family: 'SF Pro Display', sans-serif;
  color: #000000;
  #background-color: #09B888;
}

footer a {
        color: #000000;
}

#bloc-rapport {
        position: absolute;
        #border:solid 1px;
        background-color:#1B4A77;
        top:10px;
        bottom:10px;
        right:0px;
        padding:10px;
        overflow-y:auto;
}


#bloc-variable {
	position: absolute;
	#border:solid 1px;
/**	background-color:#1B4A77; **/
/**	background-color:#1B4A77; **/
	background-color:#2F499A; 
	top:0px;
	/*left:260px;  */
	bottom:0px;
	right:0px;
	padding:0px;
	overflow:auto; 
}


#contenu {

/**background-color: #f9f9f9;
        display:block;
border: 1px solid #09B888;
        border-radius:20px;
    -moz-border-radius:20px; **/
        padding: 20px;
}


select {
  #background-color: #0563af;
  color: #2F499A;
  padding: 12px;
  width: 250px;
  border: none;
  font-size: 18px;
  box-shadow: 0 5px 25px rgba(0, 0, 0, 0.2);
  -webkit-appearance: button;
  appearance: button;
  outline: none;
}

select option {
 padding: 30px;
}

h1 {
        font-size: 24px;
        font-weight: 800;
               /** color:#E9A51F; **/
	color:#000000;
}

h2 {
	font-size: 16px;
	font-weight: 800;
	color:black;
}

h2 a {
	font-size: 16px;
        font-weight: 800;
        color:black;
}

h2 a:hover {
        font-size: 16px;
        font-weight: 800;
        color:black;
	text-decoration: underline;
}

h3 {
        font-weight: 800;
                color:black;
}



#contenu td{
/* border: 1px dashed #b8b8b8; */
font-size:16px;
font-weight:bold;
/*      border: 1px solid #333333;*/

margin: 5;
padding: 5;
}



#contenu table{
        #color:#1B4A77;
	color: black;
/*      background-color:#f9f9f9; */
        margin: 0px;
        padding: 5px;
        border-collapse: collapse;
/*      border-radius:10px;
        border-collapse: collapse;
        box-shadow: 1px 1px 1px #999; */
        }

.advanced {
        /* background-color:#C3D8F0; */
	background-color: white;
       /*  box-shadow: 1px 1px 1px #C3D8F0;
        box-shadow: 1px 1px 1px #999; */
	border-radius:20px 20px 20px 20px; 
		 border-spacing: 0;
  border-collapse: separate; 
	border:#E9A51F;
	color: #1B4A77;
}

.titreadvanced {
 /** background-color: rgba(255, 255, 255, 0.2); **/
  background-color : #1B4A77;
  /** padding: 10px 15px;
  margin: 0 auto 10px auto;
  display: block; */
font-size: 18px;
  text-align: center;
  color: #E9A51F;
  font-weight: 300;
}



.advancedyellow {
        background-color:#FFFFE0;
        box-shadow: 0px 0px 0px #f9f9f9;
        box-shadow: 1px 1px 1px #999;
        border-radius:0px 0px 10px 10px;
}

.enteteadvanced {
        color: #FFFFFF;
       /** background: linear-gradient(to bottom right, #50a3a2 0%, #53e3a6 100%);  */
	background : #838a90;
		
}

.bouton {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  outline: 0;
  border: 1px solid rgba(255, 255, 255, 0.4);
  background-color: rgba(255, 255, 255, 0.2);
  width: 250px;
  border-radius: 3px;
  padding: 10px 15px;
  margin: 0 auto 10px auto;
  display: block;
  text-align: center;
  font-size: 18px;
  color: white;
  transition-duration: 0.25s;
  font-weight: 300;
}
.bouton:hover {
  background-color: rgba(255, 255, 255, 0.4);
}
.bouton:focus {
  background-color: white;
  width: 300px;
  color: #53e3a6;
}


.tr_titre{
height: 40px;
background-color:#eee;
}

.grostitre{
font-size:18px;
color:#E9A51F;
}

.grostitre2{
font-size:16px;}

table.entete {
    border-collapse:separate;
    border-color: #09B888;
    border:solid #E9ECEC 3px;
    border-radius:20px;
    -moz-border-radius:20px;
}

.inputadvanced {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  /**outline: 0; */
  height:40px;
  #border: 1px solid rgba(255, 255, 255, 0.4);
  border: 1px solid;
  /** background-color: rgba(255, 255, 255, 0.2); **/
  #background-color : #EEEEEE;
/**  background-color : #1B4A77; **/
  border-radius: 3px;
 /** padding: 10px 15px;
  margin: 0 auto 10px auto;
  display: block; */
font-size: 16px;
  #text-align: center;
  #color: #1B4A77;
  color: black;
/**  color: #C3D8F0; **/
  transition-duration: 0.25s;
  font-weight: 300;
}
/**  .inputadvanced:hover {
  #background-color: #932F1A;
  color: #FFFFFF;
} **/
.inputadvanced:focus {
  #background-color: #932F1A;
  color: black;
}

.labeladvanced {
webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  /**outline: 0; */
  border: 1px solid rgba(255, 255, 255, 0.4);
 /** background-color: rgba(255, 255, 255, 0.2); **/
  background-color : #F1F1F1;
  border-radius: 3px;
 /** padding: 10px 15px;
  margin: 0 auto 10px auto;
  display: block; */
font-size: 14px;
  text-align: right;
  color: black;
  transition-duration: 0.25s;
  font-weight: 300;
}

.buttonadvanced {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  outline: 0;
   background-color: #2F499A; 
  #background-color: #E9A51F;
  border: 0;
  padding: 10px 15px;
  color: white;
  border-radius:5px 5px 5px 5px;
  width: 250px;
  cursor: pointer;
  font-size: 16px;
  transition-duration: 0.25s;
}
.buttonadvanced:hover {
  #background-color: #932F1A;
  background-color: black;
  color : #FFFFFF;
}




.buttonrubrique {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  outline: 0;
  background-color: #1B4A77;
  border: 0;
  padding: 10px 15px;
  color: white;
  border-radius:5px 5px 5px 5px;
  width: 250px;
  cursor: pointer;
  font-size: 16px;
  text-align: left;
  transition-duration: 0.25s;
}
.buttonrubrique:hover {
  #background-color: #932F1A;
  background-color: #1B4A77;
  color : #FFFFFF;
}

.tdtitre {
	width:24%;
	padding:5px;
	color:black;
}

.tdreponse {
        width:24%;
        padding:5px;
        color:black;
	text-align:right;
	background-color:#F1F1F1;
	border-radius:5px 5px 5px 5px;
}




.wrapper {
    position: relative;
    overflow: hidden;
    width: 500px;
/*    height: 100px;*/
  /*  border: 1px solid black; */
}

#slide {
    position: absolute;
    left: 100%;
   right: 0px;
    top:-0px;
    width: 200px;
    height: 100px;
    background: #DB1515;
    transition: 1s;
    border-radius:0px 20px 20px 0px;
}

.wrapper:hover #slide {
    transition: 1s;
    left: 300px;
}

.wrapperlong {
    position: relative;
    overflow: hidden;
    width: 600px;
/*    height: 100px;*/
  /*  border: 1px solid black; */
}

#slidelong {
    position: absolute;
    left: 100%;
   right: 0px;
    top:-0px;
    width: 200px;
    height: 100px;
    background: #DB1515;
    transition: 1s;
    border-radius:0px 20px 20px 0px;
}

.wrapperlong:hover #slidelong {
    transition: 1s;
    left: 400px;
}

/* CSS issu des tutoriels http://css.alsacreations.com */

dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
 font-family: 'SF Pro Display', sans-serif;
font-size:16px;
font-weight:bold;
color: #E9A51F;
}
#menu {
position: absolute;
top: 20px;
left: 20px;
right: 0px;
z-index:100;
width: 700px;
}

#menu dl {
float: left;
width: 160px;
margin: 0 2px;
}

#menu dt { font-family: 'SF Pro Display', sans-serif;
cursor: pointer;
text-align: left;
#font-weight: bold;
text-indent: 20px;
line-height: 20px;
border:solid #E9ECEC 3px;
    border-radius:20px;
    -moz-border-radius:20px;

}
#menu dd {
border: 1px solid #09B888;
}
#menu li {
font-family: 'SF Pro Display', sans-serif;
text-align: left;
left: 20px;
#background: #fff;
text-indent: 5px;
line-height: 20px;
color: #1B4A77;
}
#menu li a {
 font-family: 'SF Pro Display', sans-serif;
color: white;
text-decoration: none;
display: block;
border: 0 none;
height: 100%;
}

#menu li a:hover{
background: #09B888;
color: white;
}
 #menu dt a {
          font-family: 'SF Pro Display', sans-serif;
color: #1B4A77;
text-decoration: none;
display: block;
border: 0 none;
}

a {
         font-family: 'SF Pro Display', sans-serif;
        text-decoration: none;
        color: #1B4A77;
        font-size: 14px;
/*font: Verdana, sans-serif;
font-size:12px;
font-weight: bold;*/
}

.titre1 {
        font-size: 20px;
        font-weight: bold;
        color: #FFFFFF;
        float: left;
        #margin-top: 112px;
        margin-right: auto;
        margin-bottom: auto;
        margin-left: 12px;
}
a:hover {
        color: #E9A51F;
        text-decoration: underline;
}

#FormRisk select {
width:400px; }

#FormRisk select:focus {
width:auto; }

#FormIntegre select {
width:100px; }

#FormIntegre select:focus {
width:auto; }