body * {
	font-family: 'Source Sans Pro', sans-serif;
}
A:link {text-decoration: none}
A:visited {text-decoration: none}
A:active {text-decoration: none}
A:hover {text-decoration: underline; }
h1,
h3 {
	font-weight: 300;
}
h2 { font-weight: 400; }
h2 { font-size: 2em; }

b {
	font-weight: 600;
}
ul {
	margin-top: 0.5ex;
	font-weight: 300;
}
p {
	margin-top: 0.5ex;
	font-weight: 300;
}
.title {
	margin-top: 0.ex;
	top: 0;
	text-align: left;
	/*border: 1px solid black;*/
	background: white;
}
.title img { float: left; margin:0; }
.title h3 { fontsize:24; }
.title	a:link {text-decoration: none; color: black}
.title	a:visited {text-decoration: none; color: black}
.title	a:active {text-decoration: none; color: black}
.title	a:hover {text-decoration: underline; }

.title h1, h2 {
	margin-bottom: 0.1ex;
	margin-top: 0.ex;
}
#thetitle:hover { z-index: 9999; }

.intertitle {
	margin-top: 1ex;
	margin-bottom: 4ex;
	padding: 1px 3px;
	text-align: center;
	/*border: 1px solid black;*/
	border-bottom: 1px solid black;
	background: white;
	clear: both;
	z-index:0;
}
.intertitle h2 { margin-bottom: 0px; }
.intertitle h3 { margin-bottom: 0px; border-bottom: 0px; }
.centering {
	margin-left: 50%
}
.margins {
	margin-left: 100px; 
	margin-right: 100px; 
	text-align: center;
}
.mainpage {
	position: relative;
	/* centrer l'origine */
	margin-right: 0px;
	margin-left: 230px;
	/*border: 1px solid black;*/
	/*right: 70px;*/
}

.lateral {
	position: fixed;
	width: 230px;
	padding: 8px;
	opacity: .75;
	border-radius: 10px;
	z-index:1;
}
.lateral:hover { z-index: 8; }
.lateral h2 {
	margin-bottom: 0.5ex;	
	margin-top: -0.1ex;	
}
.lateral p {
	margin-top: 0.7ex;	
}

.lateral.menu {
	left: 1ex;
	top: 1ex;
	text-align: center;
	background: white;
	z-index:10;
}
.lateral.social {
	left: 1ex;
	top: 405px;
	text-align: left;
	background: white;
	position: relative;
	opacity: .5;
	z-index: 9;
}

.active {
	text-decoration: underline overline;
	font-weight:normal;
}
.lateral.announcements {
	position: fixed;
	right: 1px;
	top: 1ex;
	opacity: .75;
    -webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadein 2s; /* Firefox < 16 */
        -ms-animation: fadein 2s; /* Internet Explorer */
         -o-animation: fadein 2s; /* Opera < 12.1 */
            animation: fadein 2s;
}
.lateral.announcement {
	background: #00ff00;
	border-radius: 10px;
	text-align: left;
	position:relative;
	margin-top:5px;
	margin-right:0px;
}

.post {
	position:relative;
	z-index: 2;	
	float:left;
	text-align: center;
	display: inline-block;
	width: 650px;
	/*border: 1px solid black;*/
	border-left: solid 30px rgba(40, 100, 10, 0.8);
	margin: 0.7ex;
}
.content {
	position:relative;
	z-index:2;
	text-align: left;
	/* width: 74ex; */
	top:0ex;
	background: white;
	margin-left: 7px; 
}
.content img { margin: 10px; float: right; }
.content h2 {
	margin-left: 0px;
	margin-top: -0.6ex;
	}
.content p {
	text-align: justify;
	margin-bottom: 1ex; 
	/*border-color: transparent transparent transparent black;
	border-left: solid 4ex #53539a;*/
}
.content ul {
	margin-top: 0ex;
}
.content ul li {
	margin-bottom: 2ex;
}
.content ul li:target {
    -webkit-animation: blinkanimation 5s steps(15, start) infinite; /* Safari, Chrome and Opera > 12.1 */
   	
       -moz-animation: background-color: #ffa; fadein 2s; /* Firefox < 16 */
        -ms-animation: background-color: #ffa;fadein 2s; /* Internet Explorer */
         -o-animation: background-color: #ffa;fadein 2s; /* Opera < 12.1 */
            animation: blinkanimation 5s steps(15, start) infinite;
}

.verticaltext {
	z-index: -998;	
        width: 20ex;
	font-size: 24px;
	transform-origin: right top ;
    -webkit-transform: rotate(-90deg);

    /* Firefox */
    -moz-transform: rotate(-90deg);

    /* IE */
    -ms-transform: rotate(-90deg);

    /* Opera */
    -o-transform: rotate(-90deg);

    /* Not Internet Explorer */
    -ms-visibility:hidden;
	top: 0px;
	left: -22.5ex;
	float: right;
	position: absolute;
	font-weight: 900;
	/*color: #c0d0e5;*/
	color: white;
	text-align: right;
	opacity: .6;
}

.highlightblink {
    -webkit-animation: blinkanimation 5s steps(15, start) infinite; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadein 2s; /* Firefox < 16 */
        -ms-animation: fadein 2s; /* Internet Explorer */
         -o-animation: fadein 2s; /* Opera < 12.1 */
            animation: blinkanimation 5s steps(15, start) infinite;
}
@keyframes blinkanimation {
  0% { background-color: #ffffff; }
  50% { background-color: #ffa; }
  100% { background-color: #ffffff; }
}
@-webkit-keyframes blinkanimation {
  0% { background-color: #ffffff; }
  50% { background-color: #ffa; }
  100% { background-color: #ffffff; }
}


#highlight {
    -webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadein 2s; /* Firefox < 16 */
        -ms-animation: fadein 2s; /* Internet Explorer */
         -o-animation: fadein 2s; /* Opera < 12.1 */
            animation: fadein 2s;
}

@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: .5; }
    
}

/* Firefox < 16 */
@-moz-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: .5; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
    from { opacity: 0;  }
    to   { opacity: .5;  }
}

/* Internet Explorer */
@-ms-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: .5; }
}

/* Opera < 12.1 */
@-o-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: .5; }
}

.balise {

}
.balise:target {
   background-color: #ffa;
    -webkit-animation: blinkanimation 5s steps(15, start) infinite; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadein 2s; /* Firefox < 16 */
        -ms-animation: fadein 2s; /* Internet Explorer */
         -o-animation: fadein 2s; /* Opera < 12.1 */
            animation: blinkanimation 5s steps(15, start) infinite;
}

iframe {
    position: absolute;
    border: none;
    box-sizing: border-box;
    z-index:0;
  }