﻿/*@font-face {
    font-family: "klint-regular";
    font-style: normal;
    font-weight: normal;
    src: url("/assets/fonts/klintpro-regular.eot?#iefix") format("embedded-opentype"), url("/assets/fonts/klintpro-regular.woff") format("woff"), url("/assets/fonts/klintpro-regular.ttf") format("truetype"), url("/assets/fonts/klintpro-regular.svg#CIVCSansRegular") format("svg");
}
@font-face {
    font-family: "klint-bold";
    font-style: normal;
    font-weight: normal;
    src: url("/assets/fonts/klintpro-bold.eot?#iefix") format("embedded-opentype"), url("/assets/fonts/klintpro-bold.woff") format("woff"), url("/assets/fonts/klintpro-bold.ttf") format("truetype"), url("/assets/fonts/klintpro-bold.svg#CIVCSansBold") format("svg");
}
*/



#dd_domaine
{
    width: 20%;/*320px;*/
}

.inline
{
     display:inline;
}

input.textEntry_inline 
{
    height:30px;
    width: 95%;/*320px;*/
    border: 1px solid #ccc;
    display:inline;
}


body
{
  
    
	font-size: 1em;
	color: #492A23;
	/*font-family: Verdana;*/
	/* font-family: "Helvetica Neue", "Lucida Grande", "Segoe UI", Arial, Helvetica, Verdana, sans-serif;*/
	
	font-family:klint-medium;
}


#loginButton
{
    height:40px;
}

/* DEFAULTS
----------------------------------------------------------*/

a:link, a:visited
{
    color: #8D3895;
}

a:hover
{
    color: #1d60ff;
    text-decoration: none;
}

a:active
{
    color: #034af3;
}


p
{
    margin-bottom: 10px;
    line-height: 1.6em;
}

.trait {text-decoration:line-through;
        position:absolute; margin-top:280px;}

/* HEADINGS   
----------------------------------------------------------*/

#webmail
{

    clear:both;
}

h1, h2, h3, h4, h5, h6
{
    font-size: 1.5em;

    font-variant: small-caps;
    text-transform: none;
    font-weight: 200;
    margin-bottom: 0px;
}

h1
{
    font-size: 1.6em;
    padding-bottom: 0px;
    margin-bottom: 0px;
    display:inline;
    overflow:auto ;
   /*  width:20px;*/
}

h2
{
    font-size: 1.5em;
    font-weight: 600;
}

h3
{
    font-size: 1.2em;
}

h4
{
    font-size: 1.1em;
}

h5, h6
{
    font-size: 1em;
}

/* FORM ELEMENTS   
----------------------------------------------------------*/

fieldset
{
    margin: 1em 0px;
    padding: 1em;
    border: 1px solid #ccc;
    /*float:left;*/
}

/*
.div_erreur
{
    color: Red;
    font-size: small;
    position:absolute;
     top:250px;
  margin-left:400px;

}
*/



#advance
{
  /*  clear:both;*/
     position:relative;
     /*float:left;*/
     

  padding:0;
   margin-top:25px;
   /*   margin-left:50px;*/
     
     
}

#pbMdp
{
  /*  clear:both;*/
     position:relative;
     /*float:left;*/
     

  padding:0;
   margin-top:20px;
   /*   margin-left:50px;*/
     
     
}



.div_aide
{
     position:absolute;
   color:Red;  
   font-size:small;  
   margin-top:50px;
   margin-left:500px;
   float:right;
}



fieldset p 
{
   /* margin: 2px 12px 10px 10px;*/
}



fieldset.login {
    /*background-color:White;*/
    box-shadow: 0 30px 60px 0 rgba(0,0,0,0.3);
    background-color: #BCA696;
   
    height: 100%;
    border-radius: 10px 10px 10px 10px;
}

fieldset label.inline 
{
    display: inline;
    
}

.legend
{
    font-size: 1.1em;
   font-weight:bold;
   margin-bottom:15px;
}

/*legend 
{
    font-size: 1.1em;
  
    margin-top:30px;
   font-weight:bold;
}
*/
input.textEntry 
{
    width: 95%;/*320px;*/
    border: 1px solid #ccc;
}

input.passwordEntry 
{
    height:30px;
     width: 95%;/*320px;*/
    border: 1px solid #ccc;
    display:inline;
}

/* sur pc*/
@media screen /*and (max-width: 1280px)*/
{

    /* Rédigez vos propriétés CSS ici */
    div.accountInfo {
       
        /*     width: 20%;*/
        /* position:relative;*/
        /*float:left;*/
        /* height:140px;*/
    }

    .logo
    {
        height:100px;
        /*width:100px;*/
    }

}

#Image1, #Image2, #Image3, #Image4 {
    float: left;
    margin: 0;
    padding: 0;
/*    width: 130px;*/
    height: 120px;
}
/* sur mobile */
@media handheld /*(max-device-width:800px)*/ { /*and (orientation: landscape) {*/

    div .accountInfo
    {
        width: 100%; /*pleine largeur pour le login*/ /*position:relative;*/
        height:140px;
       /* float:left;*/
    }

    .logo
    {
        height:10%;
        width:10%;
    }
}




/* MISC  
----------------------------------------------------------*/

.clear
{
    clear: both;
}



.failureNotification
{
    font-size: 1.2em;
    color: Red;
}

.title
{
    display: block;
    float: left;
    text-align: left;
    width: auto;
}

.bold
{
    font-weight: bold;
}
#LoginUser_LoginButton {
    background-color: #9f005d;
    box-shadow: 0 10px 30px 0 rgba(95,186,233,0.4);
    color: white;
    border: none;
    height: 30px;
    width: 80%;
    cursor: pointer;
    font-weight: bold;
}
#LoginUser_LoginButton:hover {
   
    color: black;

}
.submitButton {

    margin-top: 10px;
    text-align: center;
}

#headertext a {
  background-color: transparent;
  text-decoration: none;
}

#headertext a:hover {
  text-decoration: underline;
}

.content {
  background-color: #FFFFFF;
  border: 1px solid #E3EDF4;
  padding: 20px 40px 40px;
}

#contentwrap 
{
    /*
  overflow: visible;
  padding: 36px 30px 30px;
  
  width: 895px;*/
}

#contentwrap, .content {
    border-radius: 18px 18px 18px 18px;
}


#pagewrap {
    margin: 0 auto;
    margin-left: 5px;
    margin-right: auto;
    text-align: left;
    margin-bottom: 20px;
    text-align: left;
    margin-bottom: 20px;
    width: 955px;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    /*  width: 955px;* */
}


#headertext {
  font-size: 12px;
  margin: 30px 0 0;
  position: relative;
  text-align: right;
  /*width: 920px;*/
  z-index: 10;
}

#logo
{
 /*margin-left:10px;*/
}



/*pour smartphone */
@media (handheld) /*max-width: 640px)*/ 
    {
        -webkit-box-sizing: border-box;
           -moz-box-sizing: border-box;
                box-sizing: border-box;
    }
    
    /* passer body (et tous les éléments de largeur fixe) en largeur automatique */

    body {
        width: auto;
        margin: 0;
        padding: 0;
    }
    
    /* fixer une largeur maximale de 100% aux éléments potentiellement problématiques */

    img,
    table,
    td,
    blockquote,
    code,
    pre,
    textarea,
    input,
    iframe,
    object,
    embed,
    video {
        max-width: 100%;
    }
    
    /* conserver le ratio des images */

    img {
        height: auto;
    }
    
    /* gestion des mots longs */

    textarea,
    table,
    td,
    th,
    code,
    pre,
    samp {
        -webkit-hyphens: auto; /* césure propre */
        -moz-hyphens: auto;
        hyphens: auto;
        word-wrap: break-word; /* passage à la ligne forcé */
    }
    
    code,
    pre,
    samp {
        white-space: pre-wrap; /* passage à la ligne spécifique pour les éléments à châsse fixe */
    }
    
    /* Passer à une seule colonne (à appliquer aux éléments multi-colonnes) */

    element1,
    element2 {
        float: none;
        width: auto;
    }
    
    /* masquer les éléments superflus */

    .hide_mobile {
        display: none !important;
    }
    
    /* Un message personnalisé */

    /*body:before {
        content: "Version mobile du site";
        display: block;
        text-align: center;
        font-style: italic;
        color: #777;
    }*/
}

@media (max-device-width:768px) and (orientation: landscape) {
  html {
   -webkit-text-size-adjust: 100%;
   -ms-text-size-adjust: 100%;
  }
}



a {color:#000000;}      /* unvisited link */
a:visited {color:#000000;}  /* visited link */
a:hover {color:#000000;}  /* mouse over link */
a:active {color:#000000;}  /* selected link */