*
{
    margin: 0;
    padding: 0;
}
body 
{
    background-color: #FFFFFF;
    color: #282828;
    font-family: Arial;
    font-size: 13px;
    line-height: 1.4;
}
table
{
	border-collapse:collapse;
}
ol, ul 
{
    list-style: none outside none;
}
a 
{
    text-decoration: none;
}

::-webkit-input-placeholder { /* WebKit browsers */
    color:    #999;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color:    #999;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
    color:    #999;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
    color:    #999;
}

.clear
{
	display:block;
	clear:both;
}

/* Boutons */

a.boutonAction
{
    display:inline-block;
    border:1px solid black;
    border-radius:0.3em;
    text-align:center;
    background-color:#134b97;
    color:white;
    padding:0.3em 1em;
}

/* Tableaux */

div.zoneTable
{
  margin:20px 25px 15px 0;
}
div.zoneTable table
{
	width:100%;
	border:2px solid black;
}
div.zoneTable table .noresults,
div.zoneTable table .noresults
{
  text-align:center;
  color:grey;
}
div.zoneTable table tr th,
div.zoneTable table tr th
{
  border-bottom:2px solid black;
}
div.zoneTable table tr,
div.zoneTable table tr th,
div.zoneTable table td
{
  border-left:1px solid black;
  border-right:1px solid black;
  padding:5px;
}
div.zoneTable table tr.lignePaire,
div.zoneTable table tr.lignePaire
{
  background-color:#F1F1F1;
}

/* Menu de sélection des années */

ul.menuSelectionAnnees
{
  float:right;
  margin-right:25px;
}
ul.menuSelectionAnnees li
{
  float:left;
}
ul.menuSelectionAnnees li.actif,
ul.menuSelectionAnnees li a
{
  display:block;
  width:50px;
  padding:5px 0;
  text-align:center;
  font-weight:bold;
  border:1px solid #B8B8B8;
  margin-left:-1px;
}
ul.menuSelectionAnnees li a
{
  background-color:#F1F1F1;
  color:#B8B8B8;
}
ul.menuSelectionAnnees li.actif
{
  background-color:#FF0000;
  color:white;
}

/* Formulaires */

form.styleGeneral p
{
  margin-bottom:5px;
}
form.styleGeneral fieldset
{
	border:1px solid dashed;
	border-radius:10px;
	margin:0 25px 15px 0;
	padding:15px;
}
form.styleGeneral fieldset legend
{
	padding:0 10px;
	margin-left:20%;
	color: #282828;
    font-size:18px;
    font-weight:100;
    text-transform: uppercase;
}
form.styleGeneral .label
{
  display:block;
  float:left;
  min-width:150px;
  width:20%;
  text-align:right;
  padding:3px 15px 0 0;
}
form.styleGeneral p input,
form.styleGeneral p textarea,
form.styleGeneral p select
{ 
  border:1px solid #CCCCCC;
  padding:6px 8px 5px 6px;
  margin-right:5px;
  margin-bottom:15px;
  color:#222222;
  font-size:14px;
  line-height:18px;
  border-radius:4px;
  box-shadow:0 1px 3px rgba(0, 0, 0, 0.05) inset, 0 1px 0 #FFFFFF;
  white-space: pre-wrap;
  word-wrap: break-word; 
}
form.styleGeneral p input:focus,
form.styleGeneral p textarea:focus
{
  border-color:#56B4EF;
  box-shadow:0 1px 3px rgba(0, 0, 0, 0.05) inset, 0 0 8px rgba(82, 168, 236, 0.6);
}
form.styleGeneral p textarea
{
  width:auto; 
  height:80px;
  font-family: Helvetica,sans-serif;
  margin-bottom:10px !important;
  overflow-x:hidden;
  overflow-y:auto;
}
form.styleGeneral p select
{
	padding:0 0 0 6px;	
}
form.styleGeneral p select option
{
	padding:5px 10px;	
}

/* Zone de recherche */

form.zoneRecherche
{
  float:right;
  margin:-10px 25px 0 0;
}
form.zoneRecherche .boutonAide
{
  display:block;
  float:right;
  width:32px;
  height:32px;
  background:transparent url(../images/icone_aide.png) no-repeat center center;
}
form.zoneRecherche .boutonAide span
{
  display:none;
}
form.zoneRecherche p
{
  float:right;
  margin-right:10px;
}
form.zoneRecherche p input
{
  width:250px;
  height:16px;
  padding:8px;
  border-radius:4px;
  border:1px solid rgba(0, 0, 0, 0.15);
  padding-left:42px !important;
  background:white url(../images/icone_recherche.png) no-repeat 0 0;
}
form.zoneRecherche p input:hover
{
  border-color:#5286D6;
  background-position:0 -34px;
}

/* Entête */

header 
{
    background-color: #D6D2CF;
    font-family: Helvetica,sans-serif;
    padding:10px 0;
    position: relative;
    width: 100%;
    height:42px;
    z-index: 500;
}
header h1
{
    float:left;
    position: relative;
    color: #282828;
    font-size: 30px;
    font-weight: 100;
    margin-left: 25px;
    line-height:42px;
    text-transform: uppercase;
    z-index:505;
}
header h1 img
{
   float:left;
   height:45px;
   margin:-2px 10px 0 0;
}
header div#zoneDossierActif
{
    float:left;
    min-width:30%;
    text-align:center;
    line-height:45px;
}
header div#barreOutils
{
/*
	float:right;
	width:200px;
	position: relative;
	margin:0 15px 0 0;
	z-index:510;
*/
	position: absolute;
    top:0;
    right:0;
	margin:10px 15px 0 0;
	z-index:510;
}
header div#barreOutils a.uneAction
{
	display:block;
	float:right;
	width:40px;
	height:40px;
	background-color:transparent;
	background-position:center center;
	background-repeat:no-repeat;
}
header div#barreOutils a#pictoNotifications
{
    width:17px;
    padding:0 5px 0 18px;
    margin-top:-3px;
    margin-right:10px;
    color:white;
    font-weight:bold;
    text-align:center;	
}
header div#barreOutils a#retourAccueil
{
	margin-right:10px;
}
.gb_r 
{
    display:none;
    -moz-user-select: text;
    animation: 0.2s ease 0s normal none 1 gb__a;
    background: none repeat scroll 0 0 #FFFFFF;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 2px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    overflow: hidden;
    position: absolute;
    right: 0;
    top: 44px;
    z-index:515;
    width:333px;
}
.gb_R {
    margin: 20px;
}
.gb_U {
    border: medium none;
    height: 96px;
    vertical-align: top;
    width: 96px;
    margin-right:5px;
}
.gb_S {
    margin-right: 20px;
    position: relative;
}
.gb_S, .gb_T {
    display: inline-block;
    vertical-align: top;
    width:70%;
}
.gb_W {
    font-weight: bold;
    margin: -4px 0 1px;
    font-size:14px;
    text-transform: uppercase;
}
.gb_X {
    color: #666666;
    font-size:11px;
    overflow:hidden;
}
.gb_P {
    color: #3079ED;
    font-size:11px;
}
.gb_P:hover {
    text-decoration:underline;
}
.gb_E {
    float:right;
    background: none repeat scroll 0 0 #4D90FE;
    border-color: #3079ED;
    font-weight: bold;
    margin:-25px 0 10px 0;
    border-radius: 2px;
    display: inline-block;
    line-height: 28px;
    padding: 0 12px;
    color:white;
}

div#zoneNotifications
{
    display:none;
    -moz-user-select: text;
    animation: 0.2s ease 0s normal none 1 gb__a;
    background: none repeat scroll 0 0 #FFFFFF;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 2px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    overflow-y:scroll;
    position: absolute;
    right: 44px;
    top: 44px;
    z-index:515;
    width:333px;
    padding:0.5em 0 0 0;
}
div#zoneNotifications h3
{
    font-size: 14px;
    text-transform: uppercase;
    padding:0 0.8em 0.2em 0.8em;
    text-align:center;
}
div#zoneNotifications ul#mesnotifications
{
}
div#zoneNotifications ul#mesnotifications li
{
}
div#zoneNotifications ul#mesnotifications li a,
div#zoneNotifications ul#mesnotifications li div.sansLien
{
    display:block;
    color:black;
    padding:0.2em 0.8em;
    margin-bottom:0.5em;
}
div#zoneNotifications ul#mesnotifications li a.notificationLue,
div#zoneNotifications ul#mesnotifications li a.notificationLue p.date,
div#zoneNotifications ul#mesnotifications li div.sansLien,
div#zoneNotifications ul#mesnotifications li div.sansLien p.date
{
    color:grey !important;
}
div#zoneNotifications ul#mesnotifications li a:hover,
div#zoneNotifications ul#mesnotifications li div.sansLien:hover
{
    background-color:#e5e5e5;
}
div#zoneNotifications ul#mesnotifications li img
{
    display:block;
    width:4em;
    float:left;
    margin:0.2em 0.6em 0 0;
}
div#zoneNotifications ul#mesnotifications li p.description
{
    background-color:transparent;
    padding-left:4.6em;
}
div#zoneNotifications ul#mesnotifications li p.date
{
    color:blue;
    font-weight:bold;
    font-size:80%;
    padding:0.2em 0 0 5.6em;
}
div#zoneNotifications ul#mesnotifications li p.date span.statutN
{
    display:block;
    float:right;
    width:0.8em;
    height:0.8em;
    background-color:red;
    border-radius:0.8em;
}

/* Zones */

#colonneGauche
{

}

ul.fonctionsApp
{

}
ul.fonctionsApp li
{
	clear:left;
	width:100%;
	height:30px;
	margin-bottom:5px;
}
ul.fonctionsApp li span
{
	display:block;
	float:left;
	width:5px;
	height:30px;
	background-color:transparent;
	margin-right:10px;
}
ul.fonctionsApp li a
{
	display:block;
	height:30px;
	line-height:30px;
	color:black;
	text-decoration:none;
	padding:0 0 0 10px;
	overflow:hidden;
}
ul.fonctionsApp li a:hover
{
	background-color:#E5E5E5;	
}

ul.fonctionsApp li.actif span, ul.fonctionsApp li:hover span
{
	background-color:red;
}
ul.fonctionsApp li.actif a
{
	font-weight:bold;
	color:red;
}

#zoneCentrale
{
  	margin-left:15px;
}
#zoneUnique
{
	margin-left:15px;
}
h2
{
    color:#282828;
    font-size:20px;
    font-weight:100;
    text-transform:uppercase;
    margin:15px 0;
}
h3.soustitre
{
	background-color: #E5E5E5;
    font-weight:100;
    font-size:14px;
    line-height:22px;
    margin-bottom: 5px;
    padding: 0 0 0 8px;
    text-transform: uppercase;
}

/* Login */

#loginPage
{
	background-color: #E3E3E3;
}
#loginPage .boutonClose
{
    color:grey;
    float:right;
    font-size:25px;
    margin:0 10px 0 0;
}
#loginPage img
{
	display:block;
    width:45%;
	clear:both;
	margin:0 auto 20px auto;
}
#loginPage div.cartoucheLogo
{
	display:block;
    width:180px;
    height:180px;
	clear:both;
	margin:0 auto 20px auto;
    border:4px solid black;
    border-radius:100%;
    background-repeat:no-repeat;
    background-size:contain;
    background-position:center center;
}
#loginPage div.cartouchePortail
{
    display:block;
    text-align:center;
}
#loginPage div.cartouchePortail p
{
    display:inline-block;
    padding:5px 15px !important;
    margin:0 auto 25px auto;
    text-align:center;
    border-radius:5px;
    text-transform: uppercase;
    font-size:120%;
    font-weight:bold;
}
#loginPage .boutonClose span
{
	display:block;
    margin:-3px 0 0 0;
}
#loginPage .enteteApplication 
{
    display:block;
    width: 380px;
    margin: 40px auto 0 auto;
}
#loginPage .applicationLogo 
{
    display:block;
    width:100%;
    height:105px;
    background-repeat: no-repeat;
    background-size: contain;
    background-position:top center;
}
#loginPage .contenu
{
    background: none repeat scroll 0 0 #FFFFFF;
    border-radius: 3px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
    margin: 40px auto 100px auto;
    width: 380px;
}
#loginPage .contenu form
{
	padding:30px 0 0 0;
}
#loginPage .contenu form p
{
	padding:0 0 15px 0;
}
#loginPage .contenu form h3,
#loginPage .contenu form h3.confirmation,
#loginPage .contenu form p.explications,
#loginPage .contenu form p.confirmation
{
    display:block;
    width:310px;
    margin:0 auto;
    text-align:center;
}
#loginPage .contenu form h3,
#loginPage .contenu form h3.confirmation
{
    font-size: 25px;
    font-weight:bold;
    margin-bottom:15px;
}
#loginPage .contenu form p.explications
{
    font-size:20px;
}
#loginPage .contenu form p.confirmation
{
    font-size:18px;
}
#loginPage .contenu form p input
{
    display:block;
    width:280px;
    font-size: 20px;
    padding: 15px;
    vertical-align: middle;	
	border:1px solid #D6D3CE;
	border-radius: 3px;
	margin:0 auto;	
}
#loginPage .contenu form p input:focus
{
	border-color:#4387FD;
}
#loginPage .contenu form p input.erreur
{
	border-color:#CB2027;
}
#loginPage .contenu form .footer
{
    clear: both;
    height:40px;
    font-size: 14px;
    padding: 20px 40px;
    margin-top:15px;
    background: none repeat scroll 0 0 #F0F0F0;
    border-radius: 0 0 3px 3px;
    border-top: 1px solid #DADADA;
}
#loginPage .contenu form .footer input
{
	display:block;
	font-size: 15px;
	font-weight: bold;
	background-color:#EBEBEB;
    border: 1px solid #DDDDDD;
    border-radius: 3px;
    box-shadow:none;
    color:#AAAAAA;
    cursor:default;
    padding:8px 12px;
}
#loginPage .contenu form .footer p
{
	height:20px;
	padding:8px 0;
}

#loginPage .contenu form .footer input#authenfication,
#loginPage .contenu form .footer input#oubliMDP
{
    float:right;
    margin-left: 8px;
    background-color:#E7F2D2;
    color:#3A9D23;
	border-color:#3A9D23;
}
#loginPage .contenu form .footer input#expireMDP
{
	width:250px;
	margin:0 auto;
	background-color:#ffedcc;
	color:orange;
	border-color:orange;
}
#loginPage .contenu form .footer input#changeMDP
{
	width:110px;
	margin:0 auto;
    background-color:#E7F2D2;
    color:#3A9D23;
	border-color:#3A9D23;
}


/* Responsive */

@media only screen and (min-width: 600px) {
  /* For tablets: */
}
@media only screen and (min-width: 768px) {
  /* For desktop: */
  #zoneCentrale
  {
  	margin-left:215px;
  }

  /* Menu de l'entête */
  #colonneGauche
  {
  	float:left;
  	padding-right:15px;
  }
  ul.fonctionsApp
  {
  	width:200px;
  	margin-top: 10px;
  }

  /* Formulaires */
  form.styleGeneral p textarea
  {
    min-width:280px;
    width:50%; 
    resize:vertical;
  }
}