html, body, div, span, applet, object, iframe,
    h1, h3, h4, h5, h6, p, blockquote, pre,
    a, abbr, acronym, address, big, cite, code,
    del, dfn, em, img, ins, kbd, q, s, samp,
    small, strike, sub, sup, tt, var,
    b, u, i, center,
    dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend,
    table, caption, tbody, tfoot, thead, tr, th, td,
    article, aside, canvas, details, embed,
    figure, figcaption, footer, header, hgroup,
    menu, nav, output, ruby, section, summary,
    time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
    }
    /* HTML5 display-role reset for older browsers */
    article, aside, details, figcaption, figure,
    footer, header, hgroup, menu, nav, section {
    display: block;
    }
    body {
    line-height: 1;
    }
    ol, ul {
        list-style: none;
    }
    blockquote, q {
    quotes: none;
    }
    blockquote:before, blockquote:after,
    q:before, q:after {
    content: '';
    content: none;
    }
    table {
    border-collapse: collapse;
    border-spacing: 0;
    }

html {
    width: 100%;
    height: 100%;
    background: #004282; /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(#003366, #004282, #0052A1, #004282, #003366); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(#003366, #004282, #0052A1, #004282, #003366); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(#003366, #004282, #0052A1, #004282, #003366); /* For Firefox 3.6 to 15 */
    background: linear-gradient(#003366, #004282, #0052A1, #004282, #003366); /* Standard syntax */
}

body {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 13px;
    color:#333;
    margin: 0px;
}
    
p {
    padding: 10px;
}

h2 {
    text-align: center;
    margin: 0px;
    padding-top: 10px;
}

#wrapper {
    width: 100%;
    min-width: 780px;
    max-width: 1366px;
    margin: 0 auto;
    background-color: #003366;
}

#header {
    float: left;
    width: 100%;
    height: 100%;
    background-color: #003366;
    display: table;
}

#headerLogo {
    float: left;
    display: table-cell;
    vertical-align: middle;
    margin-right: 10px;
}

#headerTitle {
    width: 100%;
    font-size: 22px;
    color: #FFF;
    display: table-cell;
    vertical-align: middle;
}

#contentliquid {
    float: left;
    width: 100%;
}

#content {
    background: #FFFFFF;
    margin-left: 180px;
    border: 0px;
    border-left: 2px;
    border-style: solid;
    border-color: #003366;
    padding: 0px 15px;
}

#leftcolumn {
    float: left;
    background: #FFF;
    width: 180px;
    margin-left: -100%;
    border: 0px;
    border-right: 2px;
    border-style: solid;
    border-color: #003366;
}

        
.wifeo_pagemenu>a {
    color:#000;
    text-decoration:none;
} 

.wifeo_rubrique>a {
    color:#000;
    text-decoration:none
} 

.wifeo_pagesousmenu>a {
    color:#f2f2f2 ; 
    text-decoration:none;
} 

.wifeo_conteneur_menu {
    height:auto;
    width:180px;
} 

.wifeo_pagemenu {
    background-color:#f2f2f2;
    -webkit-transition-property:background-color;
    -moz-transition-property:background-color;
    -ms-transition-property:background-color;
    -o-transition-property:background-color;
    transition-property:background-color;
    -webkit-transition-duration:1s;
    -moz-transition-duration:1s;
    -ms-transition-duration:1s;
    -o-transition-duration:1s;
    width:180px;
    padding:2px;
    height:25px;
    text-align:left;
    display:table;
} 

.wifeo_pagemenu>a {
    display:table-cell;
    vertical-align:middle;
} 

.wifeo_rubrique>a {
    display:table;
} 

.wifeo_rubrique>a {
    background-color:#f2f2f2;
    -webkit-transition-property:background-color;
    -moz-transition-property:background-color;
    -ms-transition-property:background-color;
    -o-transition-property:background-color;
    transition-property:background-color;
    -webkit-transition-duration:1s;
    -moz-transition-duration:1s;
    -ms-transition-duration:1s;
    -o-transition-duration:1s;
    transition-duration:1s;
    padding:2px;
    padding-left:10px;
    height:25px;
    width:180px;
    text-align:left;
    text-decoration:none;
    display:table-cell;
    vertical-align:middle;
} 

.wifeo_pagesousmenu {
    background-color:#003366;
    -webkit-transition:all 0.25s ease;
    -moz-transition:all 0.25s ease;
    -ms-transition:all 0.25s ease;
    -o-transition:all 0.25s ease;
    transition:all 0.25s ease;
    padding-top:5px;
    padding-bottom:5px;
    padding-right: 8px; 
    width:172px;
    display:inline-block;
    text-align:right
} 

.wifeo_pagesousmenu:hover {
    border-left:[T:epaisseur_border]px solid #f2f2f2;
    background-color: #99cc01;
} 

.wifeo_pagesousmenu>a:hover {
    color: #000;
}

.wifeo_sousmenu {
    width:180px;
    display:none;
}

#contentliquid {
    background-color: #f2f2f2;
}

#content {
    background-color: #FFFFFF;
}

#leftTitle {
    text-align: left;
    color: #000;
    background-color: #f2f2f2;
    font-size: 16px;
    font-weight: bold;
    -webkit-margin-after: 0px; 
    -webkit-margin-before: 0px;
    padding-bottom: 6px;
    padding-left:10px;
    border-style: solid;
    border-width: 0px 0px 0px 0px;
    border-color: #f2f2f2;
    vertical-align: middle;
}

#footer {
    height: 40px;
    width: 100%;
    background-color: #003366;    
    color: #FFFFFF;
    clear: both;
    padding-bottom: 0px;
    text-align: center;
}

#carousel {
    width: 100%;
    clear: both;
}

#menu * { 
    padding:0; 
    margin: 0; 
    font: 15px georgia; 
    list-style-type:none;
    z-index: 1000;
}

#menu { 
    margin-top: 0px;
    float: right;
    line-height: 10px; 
    width: 100%;
    background-color: #003366;
}

#menu a { 
    display: block; 
    text-decoration: none; 
    color: #FFF;
}

#menu a:hover { 
    background: #99cc01;
    color: #000;
}

#menu ul li ul li a:hover { 
    background: #99cc01 ; 
    padding-left:9px;
    border-left: solid 1px #000;
}

#menu ul li ul li {
    width: 130px; 
    border: none; 
    color: #99cc01;  
    padding-top: 3px; 
    padding-bottom: 3px; 
    padding-left: 3px; 
    padding-right: 3px; 
    background: #003366;
}

#menu ul li ul li a { 
    font: 14px arial; 
    font-weight:normal; 
    font-variant: small-caps; 
    padding-top:3px; 
    padding-bottom:3px;
}
#menu ul li ul li a:hover {
    color: #000;
}

#menu ul li {
    width: 120px; 
    font-weight: normal 
    border-top: solid 1px #003366; 
    border-bottom: solid 1px #003366; 
    background: #003366;
}

#menu ul li a { 
    font-weight: normal;
    padding: 15px 10px;
}

#menu li{ 
    position:relative; 
    float:right;
}

#menu ul li ul, #menu:hover ul li ul, #menu:hover ul li:hover ul li ul { 
    display:none;
    list-style-type:none; 
    width: 140px;
}

#menu:hover ul, #menu:hover ul li:hover ul, #menu:hover ul li:hover ul li:hover ul { 
    display:block;
}

#menu:hover ul li:hover ul li:hover ul { 
    position: absolute;
    margin-left: 145px;
    margin-top: -22px;
    font: 14px;
}

#menu:hover ul li:hover ul { 
    position: absolute;
    margin-top: 1px;
    font: 14px;
    top: 100%;
}

#content ol li {
    margin-left: 3em;
    list-style-type: decimal;
    line-height: normal;
    padding: 7px 0px;
}

#content ul li {
    margin-left: 3em;
    list-style-type:disc;
    line-height: normal;
    padding: 7px 0px;
}

#content p {
    line-height: normal;
}

.sublistRoman {
    list-style-type: lower-roman !important;
}

li p {
    padding: 0px;
}

.active {
    background-color: #99cc01;
    color: #000 !important;
}

.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
}

.tooltip .tooltiptext {
    visibility: hidden;
    width: 400px;
    background-color: #f2f2f2;
    color: #000;
    text-align: left;
    padding: 5px 5px;
    border-radius: 6px;
    position: absolute;
    z-index: 1;
    border-color: #000;
    border-style: solid;
    border-width: 2px;
}
.tooltip .tooltiptext {
    top: -5px;
    left: 100%; 
}

.tooltip .tooltiptext2 {
    visibility: hidden;
    width: 680px;
    background-color: #f2f2f2;
    color: #000;
    text-align: left;
    padding: 5px 5px;
    border-radius: 6px;
    position: absolute;
    z-index: 1;
    margin-left: -340px;
    border-color: #000;
    border-style: solid;
    border-width: 2px;
}

.tooltip:hover .tooltiptext {
    visibility: visible;
}

.tooltip:hover .tooltiptext2 {
    visibility: visible;
}

.tooltip .tooltiptext3 {
    visibility: hidden;
    width: 400px;
    background-color: #f2f2f2;
    color: #000;
    text-align: left;
    padding: 5px 5px;
    border-radius: 6px;
    position: absolute;
    z-index: 1;
    margin-left: -200px;
    border-color: #000;
    border-style: solid;
    border-width: 2px;
    top: -5px;
    right: 100%; 
}

.tooltip:hover .tooltiptext3 {
    visibility: visible;
}

.tooltiptext, .tooltiptext3 {
    white-space: pre;           /* CSS 2.0 */
	white-space: pre-wrap;      /* CSS 2.1 */
	white-space: pre-line;      /* CSS 3.0 */
	white-space: -pre-wrap;     /* Opera 4-6 */
	white-space: -o-pre-wrap;   /* Opera 7 */
	white-space: -moz-pre-wrap; /* Mozilla */
	white-space: -hp-pre-wrap;  /* HP Printers */
	word-wrap: break-word;      /* IE 5+ */
}
body {
    background-image: linear-gradient(to right , #cb2d3e , #ef473a);
}

/* search box */

.button_box2 {
margin:100px auto;
}
/*-------------------------------------*/
.cf:before, .cf:after{
content:"";
display:table;
}
.cf:after{
clear:both;
}
.cf{
zoom:1;
}
/*-------------------------------------*/

.form-wrapper-2 {
width: 330px;
padding: 15px;
background: #555;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
-moz-box-shadow: 0 1px 1px rgba(0,0,0,.4) inset, 0 1px 0 rgba(255,255,255,.2);
-webkit-box-shadow: 0 1px 1px rgba(0,0,0,.4) inset, 0 1px 0 rgba(255,255,255,.2);
box-shadow: 0 1px 1px rgba(0,0,0,.4) inset, 0 1px 0 rgba(255,255,255,.2);
}
.form-wrapper-2 input {
width: 210px;
height: 20px;
padding: 10px 5px;
float: left;
font: bold 15px 'Raleway', sans-serif;
border: 0;
background: #eee;
-moz-border-radius: 3px 0 0 3px;
-webkit-border-radius: 3px 0 0 3px;
border-radius: 3px 0 0 3px;
}
.form-wrapper-2 input:focus {
outline: 0;
background: #fff;
-moz-box-shadow: 0 0 2px rgba(0,0,0,.8) inset;
-webkit-box-shadow: 0 0 2px rgba(0,0,0,.8) inset;
box-shadow: 0 0 2px rgba(0,0,0,.8) inset;
}
.form-wrapper-2 input::-webkit-input-placeholder {
color: #999;
font-weight: normal;
font-style: italic;
}
.form-wrapper-2 input:-moz-placeholder {
color: #999;
font-weight: normal;
font-style: italic;
}
.form-wrapper-2 input:-ms-input-placeholder {
color: #999;
font-weight: normal;
font-style: italic;
}
.form-wrapper-2 button {
overflow: visible;
position: relative;
float: right;
border: 0;
padding: 0;
cursor: pointer;
height: 40px;
width: 110px;
font: bold 15px/40px 'Raleway', sans-serif;
color: #fff;
text-transform: uppercase;
background: #D88F3C;
-moz-border-radius: 0 3px 3px 0;
-webkit-border-radius: 0 3px 3px 0;
border-radius: 0 3px 3px 0;
text-shadow: 0 -1px 0 rgba(0, 0 ,0, .3);
}
.form-wrapper-2 button:hover{
background: #FA8807;
}
.form-wrapper-2 button:active,
.form-wrapper-2 button:focus{
background: #c42f2f;
}
.form-wrapper-2 button:before {
content: '';
position: absolute;
border-width: 8px 8px 8px 0;
border-style: solid solid solid none;
border-color: transparent #D88F3C transparent;
top: 12px;
left: -6px;
}
.form-wrapper-2 button:hover:before{
border-right-color: #FA8807;
}
.form-wrapper-2 button:focus:before{
border-right-color: #c42f2f;
}
.form-wrapper-2 button::-moz-focus-inner {
border: 0;
padding: 0;
}