html { 
height: 101%;
}
#mon_fond_de_page{ 

}  
#mon_fond_logo{
	background-image: url(../images/hbg.jpg); 
	background-size: 100%;
	}
/* Font  
========================================================================================*/	
body { -webkit-text-size-adjust:100%; -moz-text-size-adjust:100%; font-family:Arial, Helvetica, sans-serif; font-size:14px; line-height:21px; }
h1, h2, h3, h4, h5, h6 { font-family: 'Six Caps', sans-serif, Arial, Helvetica, sans-serif; }
nav, #footer { font-family: 'Homenaje', sans-serif, sans-serif, Arial, Helvetica, sans-serif; }

/* End Font  
========================================================================================*/
/* HEADING   
========================================================================================*/

h1, h2, h3, h4, h5 { text-transform:uppercase; border-bottom:solid 1px rgba(255,255,255,0.2);  }
h1 { font-size:60px; line-height:68px; }
h2 { font-size:60px; line-height:68px; margin-bottom:20px; padding-bottom:12px; }
h3 { font-size:20px; line-height:60px; margin-bottom:10px; padding-bottom:10px }
h4 { font-size:45px; line-height:50px; margin-bottom:8px; padding-bottom:5px; }
h5 { font-size:35px; line-height:50px; margin-bottom:8px; }
h6 { font-size:25px; line-height:25px; margin-bottom:8px; } 

/* END  HEADING   
========================================================================================*/

/* Links AND Button   
========================================================================================*/
a:focus{ outline:none;}
a { text-decoration:none; color:#9d9d9d }
a:hover { color:#393939 }

/* Links AND Button   
========================================================================================*/

/* Main Navigation 
========================================================================================*/

nav { font-size:18px; line-height:20px; padding:12px 12px 0 12px; text-align:right; display:block;  transform: skew(-19deg);
	-webkit-transform: skew(-19deg);
	-moz-transform: skew(-19deg);
	-o-transform: skew(-19deg);
	-ms-transform: skew(-19deg); border-radius:10px 10px 0 0; margin:0 0 0 18px; }
nav ul { float:right }
nav li { text-align:center; float:left; margin-left:3px; vertical-align:top; }
nav li a {  border-radius:10px 10px 0 0; display:inline-block; min-width:60px; position:relative; overflow:hidden; line-height:40px; padding:6px 35px 0 29px;  vertical-align:top;  }
nav li a:hover, nav li.active a {  text-shadow:0 1px 1px rgba(0,0,0,0.50); }
nav li:first-child { background:none; }

nav li a:before , nav li a:after { padding:6px 35px 0 29px;   display:block; position:absolute; z-index:-1;
-webkit-transition:all 0.3s ease;
-moz-transition:all 0.3s ease;
-o-transition:all 0.3s ease;
transition:all 0.3s ease; vertical-align:top; font-size:0px; content:'.';  top:0; left:0; right:0;  text-indent:0;  background:rgba(000,000,000,0.45); 
}


nav li a:after { top:-104%; }
nav li a:hover:before, nav li.active a:before { top:104%;  }
nav li a:hover:after, nav li.active a:after { top:0px;  background:rgba(255,255,255,0.20);  }
	
#menu { display:none; font-size:16px;  background-color:rgba(0,0,0,0.50); background-image:url(../img/menu-img.png); background-repeat:no-repeat; background-position:97% 14px; padding:15px 0 15px 3%; text-align:left; text-transform:uppercase  }

/* End Navigation 
========================================================================================*/

body {
margin: 0;
padding: 0;
}
* {
padding: 2px;
margin: 0;
}
ul, ol {
padding: .75em 0 .75em 0;
margin: 0 0 0 35px;
}
ul.menu {
margin: 0;
}
ul.menu li {
list-style: none;
}
p {
padding: 5px 0;
}
address {
margin: .75em 0;
font-style: normal;
}
a:focus {
outline: none;
}
img {
border: none;
}
em {
font-style: italic;
}
strong {
font-weight: bold;
}
form, fieldset {
margin: 0;
padding: 0;
border: none;
}
input, button, select {
vertical-align: middle;
}
.clr {
clear : both;
}
.clearfix:after {
content: " ";
display: block;
height: 0;
clear: both;
visibility: hidden;
font-size: 0;
}
.clearfix {
zoom: 1;
}
body {
text-align: left;
line-height: 20px;
font-size: 16px; //12px;
font-family: Segoe UI, sans-serif;
}
a, a:visited {
}
a:hover {
text-decoration: underline;
}
h1, div.componentheading {
text-align: left;
letter-spacing: -1px;
line-height: 25px;
font-size: 22px;
}
h2, div.contentheading {
text-align: center; /* left; */
font-size: 20px;
}
h2 a {
text-decoration: none;
}
h2 a:hover, div.contentheading a:hover {

}
.navbar-inner, .nav-list > .active > a, .nav-list > .active > a:hover,
.dropdown-menu li > a:hover, .dropdown-menu .active > a, .dropdown-menu
.active > a:hover,
.nav-pills > .active > a, .nav-pills > .active > a:hover,
.btn-primary {
}
/*
classe "rounded" ? ajoute des coins arrondis d'un rayon de 5px
classe "white" ? ajoute un fond dégradé blanc #ffffff vers gris #AEBAC3, ainsi
qu'une ombre de couleur #545454 légèrement décalée de 1px.
*/
.login-greeting, .login-form, .form-vertical, .published {
}
.milieu {
 text-align: center;
}
.rounded {
-moz-border-radius: 7px;
-o-border-radius: 7px;
-webkit-border-radius: 7px;
border-radius: 7px;
}
.white {
border: #ffffff 1px solid;
box-shadow: #545454 0px 1px 1px 0px;
-moz-box-shadow: #545454 0px 1px 1px 0px;
-webkit-box-shadow: #545454 0px 1px 1px 0px;
border: #eee 1px solid;
}
img {
max-width: 100%;
height: auto;
}
.wrapper {
max-width: 600px;
margin: 0 auto;
}
#nav {
margin: 0;
padding: 0;
min-height: 50px;
}
#nav ul.menu {
margin: 0;
padding: 0;
zoom: 1;
}
#nav ul.menu:after {
content : "";
clear: both;
display: block;
}
#nav ul.menu > li {
margin: 0;
padding: 0;
list-style:none;
border-right: 1px solid #fff;
box-shadow: 1px 0 0 #AEBAC3;
float: left;
}
#nav ul.menu > li > a, #nav ul.menu > li > span.separator {
display:block;
margin: 0px;
padding: 15px;
padding-right: 20px;
padding-left: 20px;
text-align: center;
font-size: 14px;
text-decoration: none;
}
#nav ul.menu > li:hover > a, #nav ul.menu > li:hover > span.separator,
#nav ul.menu > li.active > a, #nav ul.menu > li.active > span.separator {

}
#nav ul.menu > li:hover > a,
#nav ul.menu > li.active > a {

}
#nav ul.menu li li a, #nav ul.menu li li span.separator {
display:block;
margin: 10px;
padding: 5px;
padding-right: 10px;
padding-left: 10px;
text-decoration: none;
}
#nav ul.menu li li:hover > a {

}
#nav ul.menu li li.active > a {
text-align: left;

}
#nav ul.menu li ul, #nav ul.menu li:hover ul ul, #nav ul.menu li:hover ul ul
ul {
position: absolute;
left: -999em;
z-index: 999;
margin: 0;
padding: 0;
border: #ffffff 1px solid;
box-shadow: #545454 0px 1px 1px 0px;
-moz-box-shadow: #545454 0px 1px 1px 0px;
-webkit-box-shadow: #545454 0px 1px 1px 0px;
border: #ccc 1px solid;
width: 180px;

/*
Ici on style le conteneur de sous-menus, le plus important est de le positionner. Par
défaut on lui donne une "position:absolute" pour le sortir du flux et le positionner hors
de l'écran à "left :-999em". Le "z-index:999" permet de s'assurer que le sous menu sera
toujours au dessus des autres éléments. Pour finir on lui donne une largeur fixe de
180px.
*/


}
#nav ul.menu li:hover ul ul, #nav ul.menu li:hover li:hover ul ul, #nav
ul.menu li:hover li:hover li:hover ul ul {
left: -999em;
}
#nav ul.menu li:hover > ul, #nav ul.menu li:hover ul li:hover > ul, #nav
ul.menu li:hover ul li:hover ul li:hover > ul, #nav ul.menu li:hover ul
li:hover ul li:hover ul li:hover > ul {
left: auto;
}
/*
Ici on décide d'afficher le sous-menu (oui celui qu'on a envoyé à -999em tout à l'heure)
lorsque la souris survole l'élément parent : li:hover > ul. A ce moment là on lui remet
une position "left" à "auto" pour qu'il vienne gentiment se placer sous son parent.
*/
#nav ul.menu li:hover ul li:hover ul {
margin-top: -45px;
margin-left: 170px;
}
#nav ul.menu li li {
float: none;
}
/*
Sans faire dans la difficulté on va afficher le logo à gauche et le module de recherche à
droite.
*/
#logo {
float: left;
margin: 5px 0;
display: block;
max-width: 100%;
}
#headermodule {
float: right;
margin: 10px 0;
}
/*
D'abord il faut aligner les colonnes avec un "float:left", c'est d'ailleurs pour cela que vous
avons ajouté la classe "clearfix" sur le conteneur "main". C'est ce même conteneur
auquel on a appliqué la classe pilotée par la variable "$mainclass" qui peut prendre les
valeurs suivantes :
*/
#left, #right, #center {
float: left;
}
#left {
width: 25%;
}
#right {
width: 20%;
}
#center {
width: 55%;
}
.noleft #center {
width: 80%;
}
.noright #center {
width: 75%;
}
.noright.noleft #center {
width: 100%;
}
/* Commençons par espacer les colonnes pour aérer notre design. Attention à la méthode
des divs imbriquées, on vient d'appliquer la largeur aux conteneur "left" et "right", il faut
donc appliquer les marges sur les conteneurs intérieurs "div.inner".
*/
#left > div.inner {
margin-right: 10px;
padding: 15px;
}
#right > div.inner {
margin-left: 10px;
padding: 15px;
}
/* Voilà, on écarte les colonnes avec les margin-left et margin-right, et grâce au padding
on fait en sorte que le texte ne soit pas collé non plus aux bords de la colonne. */
#left ul.menu li a, #left ul.menu li span.separator,
#right ul.menu li a, #right ul.menu li span.separator {
display: block;
background: url(../images/tick.png) left center no-repeat;
border-bottom: 1px solid #e3e3e3;
box-shadow: 0 1px 0 #fff;
padding-top: 5px;
padding-bottom: 7px;
padding-left: 20px;
text-decoration: none;
}
/* Personnalisation du module de connexion */
#form-login-username label, #form-login-password label {
display: block;
}
#form-login-username input, #form-login-password input {
padding: 3px;
border: 1px solid #ddd;
-moz-border-radius: 3px;
-o-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
}
#form-login-username input:focus, #form-login-password input:focus {
border: 1px solid #036c9e;
}
#form-login-submit button {

border: 1px solid #c3c3c3;
padding: 4px;
-moz-border-radius: 3px;
-o-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
cursor: pointer;
}
#form-login-submit button:hover {

}
/* On va donner un peu d'espace à notre titre pour bien marquer la séparation avec les
paragraphes et le reste du contenu. Un petit peu de marges feront l'affaire. Bien sur si
vous voulez donner une couleur, taille, police différente vous pouvez laisser libre court à
votre imagination !
*/
h2.item-title, h2.item-title > a {
padding-left: 15px;
margin-top: 15px;
}
/*
Pour ajouter la flèche on va utiliser la propriété ":after" qui permet d'ajouter du contenu
après un élément HTML.
*/
div.item a.btn:after {
content: " >";
}
/*
Ensuite on donne les css pour l'allure générale du bouton.
*/
div.item a.btn {
text-decoration: none;
border: 1px solid #c3c3c3;
padding: 4px;
-moz-border-radius: 3px;
-o-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
cursor: pointer;
margin: 7px;
display:inline-block;
}
/*
display : inline-block -> fait en sorte que l'élément se comporte comme un
bloc tout en restant aligné comme un élément en ligne. L'avantage c'est qu'on peut alors
lui ajouter des marges (7px). Sans cette propriété les marges n'aurait aucun effet !

L'idée est très simple, on fait en sorte d'aligner les liens sur la même ligne et on les
espace en ajoutant un peu de marge sur les séparateurs (avec la classe "divider").
*/
ul.breadcrumb li {
display: inline;
list-style: none;
}
ul.breadcrumb li a {
text-decoration: none;
}
ul.breadcrumb .divider {
margin: 3px;
}
/*
display: inline -> affiche les éléments en ligne, ça permet tout simplement de
les aligner
*/
div.item-page li {
display: inline;
list-style: none;
}
li.next{
float: right;
}
/*
On aligne à nouveau les liens avec un "display:inline", mais on renvoit aussi le lien
"suivant" à droite avec un "float:right". Ici je n'ai pas donner de forme de bouton comme
pour les autres car je trouve qu'il ne faut pas abuser des bonnes choses et que les petits
liens vont bien. Maintenant si vous le désirez vous pouvez aisément copier et insérer des
styles sur ces liens pour les rendre un peu plus séduisants !


On va devoir les aligner à droite et leur donner une couleur de texte et une couleur de
fond. N'oubliez pas que les couleurs de textes doivent être appliquées sur les balises
"<a>" car on a déjà défini une couleur pour les liens dans les CSS et si vous appliquez la
couleur sur l'élément parent "<li>" cela n'aura aucun effet, puisque la couleur des liens
sera prépondérante. Grâce au "border-radius" on donne aussi un peu d'arrondi aux
angles.
*/
ul.actions li {
float: right;
padding: 2px 5px;
margin: 3px;
}
ul.actions li a {
text-decoration: none;
}
/*
float:right -> aligne les éléments à droite, peu importe si on les sort du flux
puisqu'on n'utilise pas le conteneur "ul.actions" pour lui définir des styles
Voyons maintenant de quoi est fait l'en-tête définie par le titre de page ainsi que le
texte "Ecrit par …".


Tout ça est englobé dans une div ayant la classe "page-header", c'est donc cette classe
qui va nous servir à mettre une petite bordure. La bordure marque la séparation entre le
haut de l'article et son contenu.
*/
.page-header {
border-bottom: 1px solid #e3e3e3;
}
/*
La seule classe qui nous intéresse ici c'est "article-info". On donne une couleur pâle aux
textes pour bien montrer que ce ne sont que des informations et que ça ne fait pas
partie du corps de l'article, et on diminue un peu la taille de police.
*/
.article-info {
font-size: 10px;
}
.cols-1
{
display: block;
float: none !important;
margin: 0 !important;
}
.cols-2 .column-1
{
width:46%;
float:left;
}
.cols-2 .column-2
{


width:46%;
float:right;
margin:0
}
.cols-3 .column-1
{
float:left;
width:29%;
padding:0px 5px;
margin-right:4%
}
.cols-3 .column-2
{
float:left;
width:29%;
margin-left:0;
padding:0px 5px
}
.cols-3 .column-3
{
float:right;
width:29%;
padding:0px 5px
}
.items-row
{
overflow:hidden;
margin-bottom:10px !important;
}
.column-1,
.column-2,
.column-3
{
padding:10px 5px
}
.column-2
{
width:55%;
margin-left:40%;
}
.column-3
{
width:30%
}
/*
Voilà je crois qu'on en a fini avec la personnalisation du contenu principal. Passons à la
prochaine étape, à savoir la rangée de modules du bas.
*/



#footer {
border-top: 1px solid #aaa;
padding: 5px;
}


@media screen and (max-width: 758px) {

.row1module, .row2module, .row3module, #left, #center, #right {
	float: none !important;
	width: 100% !important;
}

.row1module > div.inner, .row2module > div.inner, .row3module > div.inner, #left > div.inner, #center > div.inner, #right > div.inner {
	margin: 5px 0px 5px 0px !important;
}

.items-row .item, .column, .flexiblemodule, .logobloc {
	width: auto !important;
	float: none;
	margin: 0 !important;
}

}