@import url('https://fonts.googleapis.com/css?family=Roboto:900');

html { margin: 0; padding: 0; font-size: 16px; font-family: Arial; color: #777; }
body { margin: 0; padding: 40px 10px; background: #ffffff; }

* { box-sizing: border-box; }

h1 { font-family: Roboto; color: #212121; font-size: 1.625em; margin: 0 0 5px 0; padding: 0; }

a { color: #212121; text-decoration: none; }
a:hover {text-decoration: underline; }

.intro { margin: 0 0 25px; padding: 0; }

h1 a:hover, .intro a:hover { text-decoration: none; }

form { background: #E3E3E3; text-align: center; }
form #search_fields { padding: 10px; }
form #search_fields label { display: none; }
form #search_fields input { display: inline-block; font-size: 1.125em; color: #5b5b5b; border: none; background: none; padding-left: 0; padding-right: 0; margin: 0;}
form #search_fields input.form-submit { width: 30px; height: 30px; text-indent: -10000px; background: url(../img/widget/ico-search.png) no-repeat center center; }
form #search_fields input.form-text { width: 300px; max-width: calc( 100% - 60px ); }

input:focus { outline:  none; }

.footer { text-align: center;}
.lien-bibliotheque-numerique { display: block; width: 215px; height: 51px; text-indent: -10000px; margin: 0 auto; background: url(../img/widget/ico-lien-bibliotheque-numerique.png) no-repeat center center; }

.liste { margin-top: 15px; }

.liste-content { overflow: hidden; padding-bottom: 30px; }
.liste-row { float: left; padding: 0 18px 0 0; }
.liste-row img { max-width: 168px; height: auto; }
/*.liste-row:first-child { padding-left: 0; }
.liste-row:last-child { padding-right: 0; }*/
.liste-row h2 { margin: 10px 0 0 0; color: #212121; font-family: Roboto; font-size: 0.875em; }
.liste-row .auteur { color: #212121; font-size: 0.813em; font-weight: bold; /*margin-bottom: 1px;*/ }
.liste-row .annee { color: #212121; font-size: 0.813em;  }
.liste-row .renvoi { position: absolute; top: 32%; left: 0; padding: 0 20px 0 10px; font-family: Roboto; font-size: 1.7em; text-align: right; color: #ffffff; }

.scrollable-active .scrollable-prev { text-indent: -10000px; background: url(../img/widget/ico-left.png) no-repeat left center; width: 46px;}
.scrollable-active .scrollable-next { text-indent: -10000px; background: url(../img/widget/ico-right.png) no-repeat left center; width: 46px;}

div.media.text { position: relative; }

@media screen and (max-width:767px){ /* on passe en version smartphone en dessous de 767 */
    body { font-size: 0.938em; }
    form #search_fields { padding: 20px 5px; }
    .liste-row { padding: 0 12px 0 0; }
    .liste-row .renvoi { font-size: 1.45em; }
    .liste-row img { max-width: 133px; }
}