<style type="text/css">

/*-------------------------------------------------------------------------- Defaut ---------------------------------------------------------------------------*/
.reset {
	
}
@font-face {
    font-family: 'typo1';
    src: url('../font/roboto.eot');
    src: url('../font/roboto.eot?#iefix') format('embedded-opentype'),
         url('../font/roboto.woff') format('woff'),
         url('../font/roboto.ttf') format('truetype'),
         url('../font/roboto.svg#Roboto') format('svg');
}

@font-face {
    font-family: 'typo2';
    src: url('../font/roboto_b.eot');
    src: url('../font/roboto_b.eot?#iefix') format('embedded-opentype'),
         url('../font/roboto_b.woff') format('woff'),
         url('../font/roboto_b.ttf') format('truetype'),
         url('../font/roboto_b.svg#Roboto') format('svg');
}
* {
   margin:0;
   padding:0;
   font-family:Verdana, Geneva, sans-serif;
   outline: 0;
   border: 0;
   font-family:'typo1', Arial, sans-serif;
   font-size:14px;
   box-sizing: border-box;	
}
.menu_couleur {
position:fixed;
height:70px;
width:70px;
background:#FFF;
overflow:hidden;
opacity:0;
right:0;
top:0;
-webkit-transition: all 0.3s ease; 
-moz-transition: all 0.3s ease; 
-o-transition: all 0.3s ease; 
padding:10px;
}

.effet_menu_couleur {
height:250px;
width:200px;
opacity:1;
}
.typo1 {
  font-family: 'typo1', arial;
  font-size: 2rem;
  color: #000;
  position: absolute;
  right: 10px;
  top: 10px;
}

.typo2 {
  font-family: 'typo2', arial;
  font-size: 2rem;
  color: #000;
  position: absolute;
  right: 10px;
  top: 70px;
}

.typo3 {
  font-family: 'typo3', arial;
  font-size: 2rem;
  color: #000;
  position: absolute;
  right: 10px;
  top: 130px;
}
.clearer {
	clear:both;
	height:0px;
}

h1 {
	font-size:0px;
	text-indent:-9999px;
	position:absolute;
}

.carrer_couleur {
width:30px;
height:25px;
border:#ccc 1px solid;
position:relative;
z-index:100;
}

#carrer0 {
background:#FFFFFF;
text-align:center;
color:#FFFFFF;
text-shadow:2px 2px #000;
display:block;
margin:0 0 10px 0;
}

#carrer1 {
background:#558ed5;
text-align:center;
color:#FFFFFF;
text-shadow:2px 2px #000;
display:block;
margin:0 0 10px 0;
}

#carrer2 {
background:#0971c0;
text-align:center;
color:#FFFFFF;
text-shadow:2px 2px #000;
display:block;
margin:0 0 10px 0;
}

#carrer3 {
background:#17375e;
text-align:center;
color:#FFFFFF;
text-shadow:2px 2px #000;
display:block;
margin:0 0 10px 0;
}

#carrer4 {
background:#e9e9e9;
text-align:center;
color:#FFFFFF;
text-shadow:2px 2px #000;
display:block;
margin:0 0 10px 0;
}

#carrer5 {
background:#333;
text-align:center;
color:#FFFFFF;
text-shadow:2px 2px #000;
display:block;
margin:0 0 10px 0;
}

#carrer6 {
background:;
text-align:center;
color:#FFFFFF;
text-shadow:2px 2px #000;
display:block;
margin:0 0 10px 0;
}

#carrer7 {
background:;
text-align:center;
color:#FFFFFF;
text-shadow:2px 2px #000;
display:block;
margin:0 0 10px 0;
}

li {
list-style-type: none;
}

p {
margin:0 0 10px 0;
line-height:20px;
}

</style>