body
{
    font-family: lucida grande ,tahoma,verdana,arial,sans-serif;
    background-color: #dcdcde;
    
}

body p
{
    font-size: 0.8em;
    line-height: 1.28;
   width: 1000px;
}

#wrapper
{
    width: 1080px;
    background-color: white;
    margin: 0 auto;
    padding: 10px;
    border: 1px solid #dedede;
    box-shadow: 0px 0 15px #777;
    
}
#wrapper_login
{
    width: 1060px;
    background-color: white;
    margin: 0 auto;
    border: 1px solid #dedede;
    box-shadow: 0px 0 15px #777;
}
#banner
{
    background-image: url(../Images/banner2.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    border: 5px solid #dedede;
    border-radius: 999px 999px 999px 999px; 
    height: 200px;
    box-shadow: 0px 0 40px #777;
}
#banner2
{
    background-image: url(../Images/SUNU_ORABANK.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    border: 5px solid #dedede;
    border-radius: 999px 999px 999px 999px; 
    height: 200px;
    box-shadow: 0px 0 40px #777;
}
#banner3
{
    background-image: url(../Images/SUNU_GUINEBIS.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    border: 5px solid #dedede;
    border-radius: 999px 999px 999px 999px; 
    height: 200px;
    box-shadow: 0px 0 40px #777;
}
#banner4
{
    background-image: url(../Images/SUNU_ALIOS.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    border: 5px solid #dedede;
    border-radius: 999px 999px 999px 999px; 
    height: 200px;
    box-shadow: 0px 0 40px #777;
}
#content_area
{
    float: left;
    width: 1000px;
    margin: 20px  20px 0;
    padding: 10px;
}
#content_area_login
{
    float: left;
    
    height: 400px;
    margin: 0 auto;
    width: 100%;
    background-image:url(../Images/LogoSL.bmp);
    background-repeat:no-repeat;
}
#sidebar
{
    
    width: 190px;
    height: 300px;
    background-color:#c10435 ;
    margin: 20px 10px;
    padding: 10px;
    border: 2px solid #E3E3E3;
    box-shadow: 0px 0 40px #777;
}

footer
{
    clear: both;
    width: auto;
    height: 40px;
    padding: 10px;
    border: 3px solid #E3E3E3;
    border-radius: 99px 999px 99px 999px;
    text-align: center;
    color: #fff;
    text-shadow: 0.1em 0.1em #333;
    background-image: url(../Images/bar_background2.png);
}

#navigation
{
    height: 60px;
    border: 3px solid #E3E3E3;
    margin-top: 20px;
    text-shadow: 0.1em 0.1em #333;
    background-image: url(../Images/bar_background2.png);
    border-radius: 99px 999px 99px 999px;
}

#nav
{
    list-style: none;
}

#nav ul
{
    margin: 0;
    padding: 0;
    width: auto;
    display: none;
}

#nav li
{
    font-size: 16px;
    float: left;
    position: relative;
    width: 120px;
    height: 50px;
}

#nav a:link, nav a:active, nav a:visited
{
    display: block;
    color: #fff;
    text-decoration: none;
}

#nav a:hover
{
    color: lightblue;
}

.imgLeft
{
    float: left;
    width: 240px;
    height: 150px;
    margin: 0px 10px 10px 0;
    padding: 10px;
}
.imgLeftPro
{
    float: left;
    width: 200px;
    height: 100px;
    margin: 0px 10px 10px 0;
    padding: 10px;
}
.imgRight
{
    float: right;
    width: 180px;
    height: 250px;
    margin: 0px 0 10px 10px;
    padding: 10px;
}
.imgRight2
{
    float: right;
    width: 240px;
    height: 150px;
    margin: 0px 0 10px 10px;
    padding: 15px;
}
html, body, h1, form, fieldset, legend, ol, li {
  margin: 0;
  padding: 0;
}
.message
{
	margin-left:300px;
	width:600px;
	color:#cc004d;
	text-align:center;
	font-size: 28px;
	
}
.message1
{
	margin-left:230px;
	width:500px;
	color:white;
	text-align:center;
	
}
.message2
{
	font-size: 14px;
	width:500px;
	color:#cc004d;
	text-align:center;
	
}
form#connexion {
  position: inherit;
   background:#cc004d;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  padding: 20px;
  margin-left:200px;
  width: 600px;
}
form#connexionexport {
  position: inherit;
   background:#cc004d;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  padding: 20px;
  margin-left:20px;
  width: 600px;
}
form#barre{
  position: inherit;
   background:#e0e0e0;
  -moz-border-radius: 2px;
  -webkit-border-radius: 2px;
   height: 19px;
   width: 100px;
  
}
form#connexion  fieldset {
  border: none;
  margin-bottom: 10px;
}
form#connexion  fieldset:last-of-type {
  margin-bottom: 0;
}
form#connexion legend {
  color: #fff;
  font-size: 16px;
  font-weight: bold;
  padding-bottom: 10px;
  text-shadow: 0 1px 1px #c0d576;
}
form#connexion fieldset fieldset legend {
  color: #111111;
  font-size: 13px;
  font-weight: normal;
  padding-bottom: 0;
}
form#connexion ol li {
  background: #b9cf6a;
  background: rgba(255,255,255,.3);
  border-color: #e3ebc3;
  border-color: rgba(255,255,255,.6);
  border-style: solid;
  border-width: 2px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  line-height: 30px;
  list-style: none;
  padding: 5px 10px;
  margin-bottom: 2px;
}
form#connexion ol ol li {
  background: none;
  border: none;
  float: left;
}
form#connexion label {
  float: left;
  font-size: 13px;
  width: 210px;
}
form#connexion fieldset fieldset label {
  background:none no-repeat left 50%;
  line-height: 20px;
  padding: 0 0 0 5px;
  width: auto;
}
form#connexion input:not([type=radio]),
form#connexion textarea {
  background: #ffffff;
  border: none;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  -khtml-border-radius: 3px;
  border-radius: 3px;
  font:  16px, "Times New Roman", Times, serif;
  outline: none;
  padding: 5px;
  width: 350px;
}
form#connexion input:not([type=submit]):focus,
form#connexion textarea:focus {
  background: #eaeaea;
}
form#connexion input[type=radio] {
  float: left;
  margin-right: 5px;
}
form#connexion button {
  background: #9E9E9E;
  border: none;
  -moz-border-radius: 20px;
  -webkit-border-radius: 20px;
  -khtml-border-radius: 20px;
  border-radius: 20px;
  color: #ffffff;
  display: block;
  font: 18px Georgia, "Times New Roman", Times, serif;
  letter-spacing: 1px;
  margin: auto;
  padding: 7px 25px;
  text-shadow: 0 1px 1px #000000;
  text-transform: uppercase;
}
form#export button {
  background: #9E9E9E;
  border: none;
  -moz-border-radius: 20px;
  -webkit-border-radius: 20px;
  -khtml-border-radius: 20px;
  border-radius: 20px;
  color: #ffffff;
  display: block;
  font: 18px Georgia, "Times New Roman", Times, serif;
  letter-spacing: 1px;
  margin: auto;
  padding: 7px 25px;
  text-shadow: 0 1px 1px #000000;
  text-transform: uppercase;
}
form#connexion button:hover {
  background: #1e2506;
  cursor: pointer;
}

form#export button:hover {
  background: #1e2506;
  cursor: pointer;
}


form#connexionmodif {
  position: inherit;
   background:#cc004d;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  padding: 20px;
  margin-left:25px;
  width: 600px;
}
form#connexionmodif  fieldset {
  border: none;
  margin-bottom: 10px;
}
form#connexionmodif  fieldset:last-of-type {
  margin-bottom: 0;
}
form#connexionmodif legend {
  color: #fff;
  font-size: 16px;
  font-weight: bold;
  padding-bottom: 10px;
  text-shadow: 0 1px 1px #c0d576;
}
form#connexionmodif fieldset fieldset legend {
  color: #111111;
  font-size: 13px;
  font-weight: normal;
  padding-bottom: 0;
}
form#connexionmodif ol li {
  background: #b9cf6a;
  background: rgba(255,255,255,.3);
  border-color: #e3ebc3;
  border-color: rgba(255,255,255,.6);
  border-style: solid;
  border-width: 2px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  line-height: 30px;
  list-style: none;
  padding: 5px 10px;
  margin-bottom: 2px;
}
form#connexionmodif ol ol li {
  background: none;
  border: none;
  float: left;
}
form#connexionmodif label {
  float: left;
  font-size: 13px;
  width: 200px;
}
form#connexionmodif fieldset fieldset label {
  background:none no-repeat left 50%;
  line-height: 20px;
  padding: 0 0 0 30px;
  width: auto;
}
form#connexionmodif input:not([type=radio]),
form#connexionmodif textarea {
  background: #ffffff;
  border: none;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  -khtml-border-radius: 3px;
  border-radius: 3px;
  font: italic 13px Georgia, "Times New Roman", Times, serif;
  outline: none;
  padding: 5px;
  width: 350px;
}
form#connexionmodif input:not([type=submit]):focus,
form#connexionmodif textarea:focus {
  background: #eaeaea;
}
form#connexionmodif input[type=radio] {
  float: left;
  margin-right: 5px;
}
form#connexionmodif button {
  background: #9E9E9E;
  border: none;
  -moz-border-radius: 20px;
  -webkit-border-radius: 20px;
  -khtml-border-radius: 20px;
  border-radius: 20px;
  color: #ffffff;
  display: block;
  font: 18px Georgia, "Times New Roman", Times, serif;
  letter-spacing: 1px;
  margin: auto;
  padding: 7px 25px;
  text-shadow: 0 1px 1px #000000;
  text-transform: uppercase;
}
form#connexionmodif button:hover {
  background: #1e2506;
  cursor: pointer;
}



table a:link {
	color: #666;
	font-weight: bold;
	text-decoration:none;
}
table a:visited {
	color: #00BCD4;
	font-weight:bold;
	text-decoration:none;
}
table a:active,
table a:hover {
	color: #bd5a35;
	text-decoration:underline;
}
table {
	font-family:Arial, Helvetica, sans-serif;
	color:#666;
	font-size:11px;
	text-shadow: 1px 1px 0px #fff;
	background:#eaebec;
	margin:20px;
	border:#ccc 1px solid;

	-moz-border-radius:3px;
	-webkit-border-radius:3px;
	border-radius:3px;

	-moz-box-shadow: 0 1px 2px #d1d1d1;
	-webkit-box-shadow: 0 1px 2px #d1d1d1;
	box-shadow: 0 1px 2px #d1d1d1;
}
table th {
	padding:5px 5px 5px 5px;
	border-top:1px solid #fafafa;
	border-bottom:1px solid #e0e0e0;

	background: #ededed;
	background: -webkit-gradient(linear, left top, left bottom, from(#ededed), to(#ebebeb));
	background: -moz-linear-gradient(top,  #ededed,  #ebebeb);
}
table th:first-child {
	text-align: left;
	padding-left:20px;
}
table tr:first-child th:first-child {
	-moz-border-radius-topleft:3px;
	-webkit-border-top-left-radius:3px;
	border-top-left-radius:3px;
}
table tr:first-child th:last-child {
	-moz-border-radius-topright:3px;
	-webkit-border-top-right-radius:3px;
	border-top-right-radius:3px;
}
table tr {
	text-align: center;
	padding-left:20px;
}
table td:first-child {
	text-align: left;
	padding-left:20px;
	border-left: 0;
}
table td {
	padding:5px;
	border-top: 1px solid #ffffff;
	border-bottom:1px solid #e0e0e0;
	border-left: 1px solid #e0e0e0;

	background: #fafafa;
	background: -webkit-gradient(linear, left top, left bottom, from(#fbfbfb), to(#fafafa));
	background: -moz-linear-gradient(top,  #fbfbfb,  #fafafa);
}
table tr.even td {
	background: #f6f6f6;
	background: -webkit-gradient(linear, left top, left bottom, from(#f8f8f8), to(#f6f6f6));
	background: -moz-linear-gradient(top,  #f8f8f8,  #f6f6f6);
}
table tr:last-child td {
	border-bottom:0;
}
table tr:last-child td:first-child {
	-moz-border-radius-bottomleft:3px;
	-webkit-border-bottom-left-radius:3px;
	border-bottom-left-radius:3px;
}
table tr:last-child td:last-child {
	-moz-border-radius-bottomright:3px;
	-webkit-border-bottom-right-radius:3px;
	border-bottom-right-radius:3px;
}
table tr:hover td {
	background: #f2f2f2;
	background: -webkit-gradient(linear, left top, left bottom, from(#f2f2f2), to(#f0f0f0));
	background: -moz-linear-gradient(top,  #f2f2f2,  #f0f0f0);	
}


#menu-accordeon {
  padding:0;
  margin:0;
  list-style:none;
  text-align: center;
  width: 180px;
}
#menu-accordeon ul {
  padding:0;
  margin:0;
  list-style:none;
  text-align: center;
}
#menu-accordeon li {
   background-color:#729EBF; 
   background-image:-webkit-linear-gradient(top, #729EBF 0%, #333A40 100%);
   background-image: linear-gradient(to bottom, #c1c1c1 0%, #333A40 100%);
   border-radius: 6px;
   margin-bottom:2px;
   box-shadow: 3px 3px 3px #999;
   border:solid 1px #333A40
}
#menu-accordeon li li {
   max-height:0;
   overflow: hidden;
   transition: all .5s;
   border-radius:0;
   background: #444;
   box-shadow: none;
   border:none;
   margin:0
}
#menu-accordeon a {
  display:block;
  text-decoration: none;
  color: #fff;
  padding: 8px 0;
  font-family: verdana;
  font-size:1.2em
}
#menu-accordeon ul li a, #menu-accordeon li:hover li a {
  font-size:1em
}
#menu-accordeon li:hover {
   background: #729EBF
}
#menu-accordeon li li:hover {
   background: #999;
}
#menu-accordeon ul li:last-child {
   border-radius: 0 0 6px 6px;
   border:none;
}
#menu-accordeon li:hover li {
  max-height: 15em;
}
#Global{
    margin: 0 auto;
    padding: 10px; 
}

#Global #gauche {
    float:left;
    width:250px;
    height:364px; 
}
#Global #droite {
    margin-left:24%; 
    width: 200px;
}
#Text{
    width:500px;
    height:150px;
    margin: 0 auto;
    padding: 10px; 
}
#Text #gch {
    float:left;
    width:250px;
    
}
#Text #drt {
    margin-left:25%; 
    width: 250px;
    padding-left: 150px;
}
#bouton{
    width:500px;
    height:30px;
    margin: 0 auto;
    padding: 10px; 
}
#bouton #gch {
    float:left;
    width:250px;
    
}
#bouton #mil {
    margin-left:10%; 
    width: 250px;
    padding-left: 90px;
}
#bouton #drt {
    margin-left:25%; 
    width: 250px;
    padding-left: 150px;
}


h3.ribbon {
  position: relative;   /* pour servir de référent */
  margin: 1em -10px;    /* pour décaler les bords */
  background: #CC0000;  /* pour visualiser */
}

h3.ribbon::before,
h3.ribbon::after {
  content: "";
  position: absolute;
  border-style: solid;
}

h3.left-top::before {
  left: 0;
  bottom: 100%;
  border-color: transparent #800000;
  border-width: 10px 10px 0 0;
}

h3.left-bottom::before {
  left: 0;
  top: 100%;
  border-color: transparent #800000;
  border-width: 0 10px 10px 0;
}

h3.right-top::after {
  right: 0;
  bottom: 100%;
  border-color: #800000 transparent;
  border-width: 0 10px 10px 0;
}

h3.right-bottom::after {
  right: 0;
  top: 100%;
  border-color: #800000 transparent;
  border-width: 10px 10px 0 0;
}