@charset "UTF-8";
@font-face {
font-family: 'Agency FB';
src: url('../font/agency_fb.eot');
src: url('../font/agency_fb.eot?#iefix') format('embedded-opentype'),
url('../font/agency_fb.svg#Agency FB') format('svg'),
url('../font/agency_fb.woff') format('woff'),
url('../font/agency_fb.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
/******************************** ********************************/
body {
width:100%;
height:100%;
font-family: Verdana;
font-size:0.9em;
color:#777;
margin:none;
padding:none;
background:#777;
}
div#cadre_principal {
width: 1200px;
margin:auto;
margin-top:20px;
background:white;
border:solid 1px black;
}
div#sup {
display:table;
}
div#sidebar {
display:table-cell;
width:20%;
padding:20px;
padding-bottom:0px;
vertical-align:top;
}
div#main_content {
display:table-cell;
width:80%;
padding-top:20px;
padding-right:40px;
overflow-x:hidden;
background-image:url('../Img/fond.jpg');
background-repeat:no-repeat;
background-position:-509px 20px;
transition-property: background-position, opacity;
transition-timing-function:ease;
transition-duration:2s;
opacity:0;
text-align:justify;
}
div#main_content p {
font-size:0.9em;
text-decoration:un
}
div#main_content h1 {
color:#39F;
font-size:2em;
font-weight:normal;
}
div#main_content h2 {
font-size:1.1em;
}
div#main_content h3 {
font-size:0.9em;
color:#10A5DD;
margin-left:30px;
}
div#main_content h4 {
font-size:0.8em;
margin-left:40px
font-weight:bold;
}
div#main_content a {
color:#39F;
font-size:0.9em;
text-decoration:none;
}
div#main_content a:hover {
text-decoration:underline;
}
div#main_content p a {
color:#39F;
text-decoration:none;
}
div#main_content p a:hover {
text-decoration:underline;
}
div#main_content li {
font-size:0.9em;
}
div#main_content li a {
color:#39F;
text-decoration:none;
}
div#main_content li a:hover {
text-decoration:underline;
}
.zoom_pub {
-moz-box-shadow: box-shadow: 5px 5px 5px #CCCCCC;
-webkit-box-shadow: box-shadow: 5px 5px 5px #CCCCCC;
-o-box-shadow: box-shadow: 5px 5px 5px #CCCCCC;
-ms-box-shadow: box-shadow: 5px 5px 5px #CCCCCC;
box-shadow: box-shadow: 5px 5px 5px #CCCCCC;
}
.zoom_pub:hover {
-moz-transition: all 0.7s ease-out;
-webkit-transition: all 0.7s ease-out;
-o-transition: all 0.7s ease-out;
-ms-transition: all 0.7s ease-out;
transition: all 0.7s ease-out;
-moz-transform: scale(3);
-webkit-transform: scale(3);
-o-transform: scale(3);
-ms-transform: scale(3);
transform: scale(3);
-moz-transform-origin: 100% 0%;
-webkit-transform-origin: 100% 0%;
-o-transform-origin: 100% 0%;
-ms-transform-origin: 100% 0%;
transform-origin: 100% 0%;
}
@keyframes barre_infos {
from {
background-color:rgba(250, 250, 250, 0);
-moz-box-shadow: none;
-webkit-box-shadow: none;
-o-box-shadow: none;
box-shadow: none;
filter: none;
display:none;
margin-top:300px;
}
to {
background-color:rgba(250, 250, 250, 0.4);
-moz-box-shadow: 0px 10px 10px 0px #656565;
-webkit-box-shadow: 0px 0px 7px 0px #DDDDDD;
-o-box-shadow: 0px 0px 7px 0px #DDDDDD;
box-shadow: 0px 0px 7px 0px #DDDDDD;
filter:progid:DXImageTransform.Microsoft.Shadow(color=#DDDDDD, Direction=NaN, Strength=7);
margin-top:130px;
}
}
@keyframes cadre_actu {
from {
display:none;
margin-left:1000px;
}
to {
display:block;
margin-left:402px;
}
}
@keyframes barre_infos_2 {
from {
background-color:rgba(250, 250, 250, 0);
-moz-box-shadow: none;
-webkit-box-shadow: none;
-o-box-shadow: none;
box-shadow: none;
filter: none;
display:none;
margin-top:-200px;
}
to {
background-color:rgba(250, 250, 250, 0.4);
-moz-box-shadow: 0px 10px 10px 0px #656565;
-webkit-box-shadow: 0px 0px 7px 0px #DDDDDD;
-o-box-shadow: 0px 0px 7px 0px #DDDDDD;
box-shadow: 0px 0px 7px 0px #DDDDDD;
filter:progid:DXImageTransform.Microsoft.Shadow(color=#DDDDDD, Direction=NaN, Strength=7);
margin-top:45px;
}
}
@keyframes cadre_infos {
from {
display:none;
margin-left:600px;
}
to {
display:block;
margin-left:0px;
}
}
.content {
width:100%;
float:left;
}
hr {
border-top: dotted 1px #CCCCCC;
border-bottom: none;
}
/******************************** ********************************/
/******************************** ********************************/
header {
text-align:center;
}
header h1 {
width:80%;
font-size:0.9em;
font-weight:lighter;
padding-top:10px;
padding-bottom:10px;
border-top:solid 1px #999;
border-bottom:solid 1px #999;
margin:auto;
}
header img {
width:63%;
margin-bottom:10px;
}
/******************************** ********************************/
/******************************** ********************************/
/******************************** ********************************/
div#main_content .cadre {
width:270px;
border-radius:20px;
background-image:url('../Img/fond_cadre.png');
padding:20px;
position:relative;
margin-top:-200px;
margin-bottom:20px;
opacity:0;
transition-property: margin-top, opacity;
transition-timing-function:ease;
transition-duration:2s;
transition-delay:2s;
}
div#main_content .cadre h2 {
color:white;
font-size:1em;
margin-top:0px;
}
div#main_content .cadre p {
margin-bottom:0px;
margin-top:0px;
color:white;
font-size:0.8em;
}
div#main_content .cadre a {
color:white;
text-decoration:underline;
}
div#actu_content {
height:160px;
padding:0px;
overflow-y:auto;
}
div#main_content .cadre .rounded-button {
width:17px;
height:17px;
border-radius:10px;
border:solid 1px white;
text-align:center;
float:right;
margin-top:5px;
text-decoration:none;
}
div#main_content .button {
color:white;
}
/******************************** ********************************/
/******************************** ********************************/
/******************************** ********************************/
.message {
width:98%;
padding:2%;
float:left;
border-bottom:dotted 1px #CCCCCC;
}
.message p:first-child {
width:100%;
}
.message p {
font-size:1em;
float:left;
}
.message img {
width:10%;
float:left;
margin-right:20px;
}
/******************************** ********************************/
/******************************** ********************************/