/******* COL LEFT *******/
/*div#col_left {float: left; width: 400px; margin-right: 10px; padding-bottom: 20px;}*/
div#col_left {float: left; width: 430px; margin-right: 40px; padding-bottom: 20px;}

div#col_left div#sliderwrap {/*width: 373px;*/ width: 403px; height: 180px; padding: 15px 10px 0 15px; border: 1px solid #CBD3E2; background: #F2F5FB; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; box-shadow: 0 5px 10px #DEDEDE; behavior: url(/library/js/PIE.htc); margin-bottom: 25px; position: relative;}
div#col_left div#sliderwrap div#pager {position: absolute; bottom: 10px; right: 10px;}
div#col_left div#sliderwrap div#pager a {display: block; float: left; width: 7px; height: 7px; background: url(/library/images/home/puce-slider.png) no-repeat -12px 0; text-indent: -9999px; margin-left: 5px;}
div#col_left div#sliderwrap div#pager a:hover, div#col_left div#sliderwrap div#pager a.activeSlide {background-position: 0 0;}
div#col_left div#slider {width: 380px; height: 155px; overflow: hidden;}
div#col_left div#slider div.item {width: 380px; height: 155px; overflow: hidden; background: #F2F5FB;}
div#col_left div#slider div.item img {float: left; margin-right: 10px;}
/*div#col_left div#slider div.item * {color: #555;}*/
div#col_left div#slider div.item div.text {width: 225px; float: left;}
div#col_left div#slider div.item h3 {font-size: 16px; margin-bottom: 5px;}
div#col_left div#slider div.item p {font-size: 13px; margin-bottom: 5px;}
/*div#col_left div#slider div.item a {color: #1E3A6C; float: right; font-weight: bold;}*/
div#col_left div#slider div.item a:hover {text-decoration: underline;}
div#col_left div#slider div.item h3 a, div#col_left div#slider div.item p a {float: none;}


div#col_left article {margin-bottom: 10px;}
div#col_left article+article {border-top: 1px solid #C7C5C5; padding-top: 5px;}
div#col_left article a:hover {text-decoration: underline;}
div#col_left article h3 {background:url(/library/images/common/icon-article.png) no-repeat 0 0; padding: 6px 0 0 20px;}
div#col_left article h3 a {color: #1E3A6C;}
div#col_left article p.auteur, div#col_left article p.date_pub {padding-left: 20px;}
div#col_left article p.desc {padding-left: 15px; font-size: 13px;}
div#col_left article p.date_pub {font-size:11px;}
/* couleurs revues */
div#col_left article.revue1 p.desc {border-left: 4px solid #D63320;}
div#col_left article.revue2 p.desc {border-left: 4px solid #B2D22A;}
div#col_left article.revue3 p.desc {border-left: 4px solid #FFA660;}
div#col_left article.revue4 p.desc {border-left: 4px solid #80CEE5;}



/******* COL MIDDLE *******/
/*div#col_middle {float: left; width: 300px; padding: 15px 0 20px 20px; background: url(/library/images/home/bg-colmiddle.png) no-repeat 0 0;}*/
div#col_middle {float: left; width: 340px; padding-bottom: 20px;}

div#col_middle article {margin-bottom: 20px;}
div#col_middle article .texte {margin-left: 65px;}
div#col_middle article p.auteur a {text-decoration: none;}
div#col_middle article a:hover {text-decoration: underline !important;}
div#col_middle article h3 {font-size: 13px;}
div#col_middle article h3 a {color: #1E3A6C;}
div#col_middle article h4 {font-size: 11px; font-weight: normal; margin-bottom: 3px; position: relative; padding-left: 10px;}
div#col_middle article h4 a {color: #1E3A6C;}
div#col_middle article h4 img {position: absolute; top: 1px; left: 0;}
div#col_middle article a img {float: left; border: 1px solid #484848; width: 55px;}
div#col_middle article p.type {float: right;}
div#col_middle article.revue a.plus {display: block; text-align: right;}

.special{
    border:1px solid #ccc;
    margin-bottom:10px;
    padding:10px;
}
.special p{margin-top:10px;}
/* ==========================================================================
   MEDIA QUERIES
   ========================================================================== */

@media (max-width: 768px) {
	main {
		display: flex;
    	flex-wrap: wrap;
	}
	div#col_left,
	div#col_middle {
		float: none;
		width: 100%;
	}
	div#col_left {
		order: 2;
		margin: 0;
		padding: 0 0 20px;
	}
	div#col_left div#sliderwrap {
		display: none;
	}
	div#col_middle {
		order: 1;
		background: none;
		padding: 15px 0;
	}
	aside {
		flex: 1;
		order: 3;
	}
}

@media (min-width: 768px) and (max-width: 991px) {
	div#col_left div#sliderwrap {
		display: block;
		height: auto;
		width: auto;
		padding: 15px;
	}
	div#col_left div#slider {
		width: auto;
		height: 215px;
	}
	div#col_left div#slider div.item {
		height: 200px !important;
		width: 100% !important;
	}
	div#col_left div#slider div.item div.text {
		float: none;
	}
	div#col_left div#slider div.item img {
		max-width: 100px;
	}
}