/* Définition des polices personnalisées */

@font-face
{
    font-family: 'alexbrush-regular';
    src: url('polices/alexbrush-regular.eot');
    src: url('polices/alexbrush-regular.eot?#iefix') format('embedded-opentype'),
         url('polices/alexbrush-regular.woff') format('woff'),
         url('polices/alexbrush-regular.ttf') format('truetype'),
         url('polices/alexbrush-regular.svg#alexbrush-regular') format('svg');
    font-weight: normal;
    font-style: normal;
}

 
/* Eléments principaux de la page */
 

/* Header */

body
{
    /*background: url('images/fond_bleu.png');*/
	color: #181818;
    font-family: Arial, sans-serif;
    
}

#bloc_page
 {
    width: 900px; /* Largeur du bloc */
    margin: auto;
}

@media all and (max-width: 1024px)
{
    #bloc_page
    {
        width: auto;
    }
}


section h1, footer h1, nav a
{
    font-family: arial, serif;				/* Type de police */
    font-weight: normal;					/* Taille de police */
    text-transform: uppercase;				/* Toujours écrits en majuscules */
}


a,a:link,a:visited
{
text-decoration:none;
color:#646671
}
a:hover
{
transition:background-color .2s linear;
-moz-transition:background-color .2s linear;
-o-transition:background-color .2s linear;
-webkit-transition:background-color .2s linear;
color:#000;
transition:color .2s linear;
-moz-transition:color .2s linear;
-o-transition:bcolor .2s linear;
-webkit-transition:color .2s linear
}

/* Header */

#titre_principal
{
    display: inline-block;
}
 
header h1
{
    font-family: alexbrush-regular, serif;
    font-size: 3.5em;
    font-weight: normal;
}
 
#logo1, header h1
{
    display: inline-block;
	vertical-align: middle;
    margin-bottom: 0px;
}

header h2
{
    font-family: arial, serif;
    font-size: 1.1em;
    margin-top: 0px;
    font-weight: normal;
}

/* Bar de navigation inutilisé */
/* xxxxxxxxxxxxxxxxxx Navigation xxxxxxxxxxxxxxxxxxxxxxxxxx */
nav
{
    display: inline-block;
    width: 900px;
    text-align: center;
}
 
nav ul
{
    list-style-type: none;
}
 
nav li
{
    display: inline-block;
    margin-right: 15px;
}
 
nav a
{
    font-size: 1.3em;
    color: #181818;
    padding-bottom: 3px;
    text-decoration: none;
}
 
nav a:hover
{
    color: #760001;
    border-bottom: 3px solid #760001;
}

@media all and (max-width: 1024px)
{
    nav
    {
        width: auto;
        text-align: left;
    }
     
    nav li
    {
        display: block;
        padding-left: 4px;
    }
     
    nav a
    {
        font-size: 1.1em;
    }
     
    nav a:hover
    {
        border-bottom: 0;
    }
}
/* xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */
#top-menu-main-intrusion
{
background:url("images/menu_top2.png") no-repeat 0 -180px;
width:114px
}
#top-menu-main-intrusion:hover
{
background:transparent url("images/menu_top2.png") no-repeat 0 -90px
}
#top-menu-main-video
{
background:url("images/menu_top2.png") no-repeat -114px -180px;
width:114px
}
#top-menu-main-video:hover
{background:transparent url("images/menu_top2.png") no-repeat -114px -90px
}
#top-menu-main-controle
{
background:url("images/menu_top2.png") no-repeat -228px -180px;
width:114px
}
#top-menu-main-controle:hover
{
background:transparent url("images/menu_top2.png") no-repeat -228px -90px
}
#top-menu-main-incendie 
{
background:url("images/menu_top2.png") no-repeat -342px -180px;
width:114px
}
#top-menu-main-incendie:hover
{
background:transparent url("images/menu_top2.png") no-repeat -342px -90px
}
#top-menu-main-eas
{
background:url("images/menu_top2.png") no-repeat -456px -180px;
width:114px
}
#top-menu-main-eas:hover
{
background:transparent url("images/menu_top2.png") no-repeat -456px -90px
}
#top-menu-main-ip
{
background:url("images/menu_top2.png") no-repeat -570px -180px;
width:114px}
#top-menu-main-ip:hover
{
background:transparent url("images/menu_top2.png") no-repeat -570px -90px
}

#top
{
height:120px;
margin:0;
padding:0;
width:900px;
margin:auto
}
#top-logo
{
background:transparent url(images/logo.png) no-repeat left top;
display:block;
float:left;
height:120px;
margin:0;
padding:0;
width:120px
}
#top-logo span
{
display:none
}
#top-menu
{
float:left;
height:120px;
width:710px
}
#top-menu-nav
{
border-bottom:1px solid #bebebe;
float:left;
height:32px;
list-style:none;
margin:0;
padding:0;
width:100%;
background:#fff
}
#top-menu-nav li
{
display:inline;
font-size:13px;
font-weight:bold;
text-align:center;
vertical-align:middle;
padding:18px 10px 10px 15px
}
#top-menu-nav li.f1
{
padding-right:0
}
#top-menu-nav li a
{
color:#CCC;
text-decoration:none
}
#top-menu-nav li a:hover
{
color:#666;
text-decoration:none
}
#top-menu-main
{
float:left;
list-style:none;
margin:0;
margin-top:32px;
padding:0;
width:100%
}
#top-menu-main li
{
display:inline
}
#top-menu-main li a
{
display:block;
float:left;
height:90px;
margin-left:1px;
margin-right:1px;
padding:0;
text-decoration:none
}
#top-menu-main li a span
{
display:none
}
/* Lien Menu */
#hd-tabs li 
{
border-color: #595959;
border-style: solid;
border-width: 1px 1px 0;
float: left;
margin: -1px 0 0 -1px;
padding: 0;
-ms-transition: background-color .2s;
-webkit-transition: background-color .2s;
-moz-transition: background-color .2s;
-o-transition: background-color .2s;
transition: background-color .2s;
}
li
 {
padding: 0 0 8px;
vertical-align: middle;
list-style-type: none;
}
#hd-tabs li .tb 
{
height: 20px;
padding: 5px 20px;
text-align: center;
}
#hd-tabs li a, #hd-tabs li .tb 
{
color: #e6e6e6;
display: block;
line-height: 20px;
text-decoration: none;
}
#hd-tabs ul
 {
background-color: #000;
border: 1px solid #595959;
box-shadow: 1px 1px 2px #777;
opacity: 0;
position: absolute;
visibility: hidden;
z-index: 25;
-webkit-transform: translate3d(0,0,0);
-ms-transition: opacity .2s;
-webkit-transition: opacity .2s;
-moz-transition: opacity .2s;
-o-transition: opacity .2s;
transition: opacity .2s;
}
#hd-tabs ul li 
{
border: 0;
float: none;
width: auto;
-ms-transition: background-color .2s;
-webkit-transition: background-color .2s;
-moz-transition: background-color .2s;
-o-transition: background-color .2s;
transition: background-color .2s;
}
/* Bannière */
 
#banniere_image
{
    margin-top: 15px;
    height: 200px;
    border-radius: 5px;
    background: url('images/banniere.png') no-repeat;
    position: relative;
    box-shadow: 0px 4px 4px #1c1a19;
    margin-bottom: 25px;
}

#banniere_description
{
    position: absolute;
    bottom: 0;
    border-radius: 0px 0px 5px 5px;
    width: 99.5%;
    height: 33px;
    padding-top: 15px;
    padding-left: 4px;
    background-color: rgb(24,24,24); /* Pour les anciens navigateurs */
    background-color: rgba(24,24,24,0.8);
    color: white;
    font-size: 0.8em;
}
#banniere_description a
{
	color: white;
}
.bouton_rouge
{
    display: inline-block;
    height: 25px;
    position: absolute;
    right: 5px;
    bottom: 5px;
    background: url('images/fond_degraderouge.png') repeat-x;
    border: 1px solid #760001;
    border-radius: 5px;
    font-size: 1.2em;
    text-align: center;
    padding: 3px 8px 0px 8px;
    color: white;
    text-decoration: none;
}
 
.bouton_rouge img
{
    border: 0;
}

@media all and (max-width: 1024px)
{
    #banniere_image
    {
        display: none;
    }
}

/* Corps */

article ul li	/* Taille des caractéres p et ul utilisés dans la partie pied de page */
{
    font-size: 0.8em;
    list-style-type: square;
}

article, aside
{
    display: inline-block;
    vertical-align: top;
    text-align: justify;
}

article
{
    width: 625px;
    margin-right: 15px;
}

article p
{
    font-size: 0.8em;
}
 
article h2
{
	font-weight: bold;
	text-align: left;
	font-size: 1.5em;
}

article h1
{
	font-weight: bold;
	text-align: left;
}

table
{
border-collapse: collapse;
}

table p, ul
{
	text-align: left;
}

.rotation90
{
	white-space: nowrap;
	-moz-transform: rotate(-90deg) translate(-20px, 0px);  /* FF3.5+ */
	-o-transform: rotate(-90deg) translate(-20px, 0px);  /* Opera 10.5 */
	-webkit-transform: rotate(-90deg) translate(-20px, 0px);  /* Saf3.1+, Chrome */
	-ms-transform : rotate(-90deg) translate(-20px, 0px); /* IE */
}

.hauteur90
{
	height:135px;

}

.largeur135
{
	width: 135px;
}

.largeur180
{
	width: 180px;
}

.largeur30
{
	width: 30px;
}

td, th /* Mettre une bordure sur les td ET les th et aligner le texte */
{
	border: 1px solid black;
    text-align: center;
}
#fournisseur a
{
	color: white;
}
#retour a
{
	color: white;
}
.bouton_rouge2
{
    position: fixed;
	height: 25px;
    left: 5px;
    top: 5px;
    background: url('images/fond_degraderouge.png') repeat-x;
    border: 1px solid #760001;
    border-radius: 5px;
    font-size: 1.2em;
    text-align: center;
    padding: 3px 8px 0px 8px;
    color: white;
    text-decoration: none;
}
 
.bouton_rouge2 img
{
    border: 0;
}

aside
{
    position: relative;
    width: 235px;
    background-color: #706b64;
    box-shadow: 0px 2px 5px #1c1a19;
    border-radius: 5px;
    padding: 10px;
    color: white;
    font-size: 0.9em;
}
a p
{
    color: white;
}
aside p, h1
{
	text-align: center;
}
 
.ico_categorie
{
    vertical-align: middle;
    margin-right: 8px;
}
 
#fleche_bulle
{
    position: absolute;
    top: 100px;
    left: -12px;
}
 
#eboutier img
{
    border: 1px solid #181818;
}
 
aside img
{
    margin-right: 5px;
}

@media all and (max-width: 1024px)
{
    article, figure, aside, iframe
	{
        width: auto;
        display: block;
        margin-bottom: 15px;
    }
     
    #fleche_bulle
    {
        display: none;
    }
     
    aside p:last-child
    {
        text-align: center;
    }
}
.presentation
{
    width: 600px;
    height: 180px;
    overflow: auto;
    background-color: rgb(192,192,192);
    padding : 10px;
    margin-bottom: 10px;
    border-radius: 5px;
}
.presentation2
{
    width: 600px;
    height: 200px;
    background-color: rgb(192,192,192);
    padding : 10px;
    margin-bottom: 10px;
    border-radius: 5px;
}
.image_blocs
{
    float: left;
    margin-right: 10px;
}

/* Footer */
footer	/* Présentation du haut de la partie pied de page */
{
    background:  url('images/ico_top.png') no-repeat top center, 
        url('images/separateur.png') repeat-x top, 
        url('images/ombre.png') repeat-x top;
    padding-top: 35px;
}
 
footer p, footer ul 	/* Taille des caractéres p et ul utilisés dans la partie pied de page */
{
    font-size: 0.6em;
}
 
footer h2	/* Taille des Titres h1 utilisés dans la partie pied de page */
{
    font-size: 0.8em;
    text-align: left;
}
/*xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx*/
#liens-bas .premier  /* On définie pour le premier block du pied de page */
{
background-image: none; /* pas d'image de fond */
float: left; /* position gauche */
padding: 5px 10px 10px 10px; /* sa position gauche, haut, bas, droite */
}
#liens-bas div  /* On définie pour les bocks <div> du pied de page */
{
display: inline-block; /* l'alignement des blocks */
background: transparent url('images/separator.png') repeat-y 0 15px; /* l'image de fond */
float: left; /* la position des blocks */
height: 140px; /* la hauteur des blocks */
}
.autres /* on définie pour les listes ul des blocks de pied de page */
{
width: 80px; /* Largeur */
margin: 5px; /* Marge */
padding: 0;	/* Position */
}
.autres li /* on définie pour les lignes il des listes de pied de pages */ 
{
margin: 0; /* Marge */
padding: 0; /* Position */
}
h2
{
margin: 10px 10px 10px 10px;
font-size: 14px;
text-transform: uppercase; /* transforme le texte en majuscules */
}