body { background: #dee3e7; margin: 0; padding: 0; font-family: 'Open Sans', Tahoma, Verdana, Arial, Helvetica; font-weight: 400; font-size: 14px; color: #069 }
td { font-size: 14px } /*debug mode => quirks mode*/
h1, h2, h3 { font-family: 'Roboto Condensed', sans-serif; font-weight: 400; margin: 2em 0 0.8em; color: #848 }
h1 { font-size: 1.6em }
h1 a:link, h1 a:visited { color: #848; text-decoration: none }
h1 a:active, h1 a:hover { text-decoration: underline }
h2 { font-size: 1.3em }
.pg-accueil h2 { text-align: center; font-size: 1.8em }
h3 { font-size: 1.15em }
hr { margin: 1em 0; height: 1px; border: 0; border-top: 1px dashed #a7a }
p { margin: 1em 0 }
p, li, td { line-height: 1.6em }
ul, ol { margin: 1em 0 1em 3em; padding: 0 }
ul { list-style-type: square }
li { margin: 0.6em 0; padding: 0 }
strong, b { font-weight: 700; filter: alpha(opacity=95); -moz-opacity: 0.95; opacity: 0.95 } /* b : compat old lang strg */
a:link, a:visited { color: #058 }
a:active, a:hover { color: #f30 }
img { border: 0; image-rendering: -webkit-optimize-contrast; image-rendering: optimizeQuality }
:focus { outline: none } ::-moz-focus-inner { border: 0 }
h1:first-child, h2:first-child, div:first-child, p:first-child, ul:first-child { margin-top: 0 }
div:last-child, p:last-child, ul:last-child  { margin-bottom: 0 }
td { vertical-align: top }
tbody:first-child > tr:first-child > td:first-child { border-top-left-radius: 3px } /* tbody : edit pg */
tbody:first-child > tr:first-child > td:last-child { border-top-right-radius: 3px }
tbody:last-child > tr:last-child > td:first-child { border-bottom-left-radius: 3px }
tbody:last-child > tr:last-child > td:last-child { border-bottom-right-radius: 3px }
textarea { width: 100%; line-height: inherit }
input, select, textarea, button, #PrevFileList, #fileQueue { background: #fff; color: #069; border: 1px solid #ccd; padding-left: 0.3em; border-radius: 3px; font-family: inherit; font-size: inherit; font-weight: inherit }
input[type="submit"], input[type="button"], input[type="file"], button { padding-right: 0.3em }
input[type="radio"], input[type="checkbox"] { background: none; border: none; padding-left: 0 }
select, input[type="submit"], input[type="button"], input[type="file"], button, label { cursor: pointer }
optgroup { font: inherit; background: #ddd; color: #555; font-size: 1.1em }
optgroup option { font: inherit; background: #f5faff; color: #069; font-size: 0.9em }
input[type="text"]:focus, input[type="password"]:focus, textarea:focus { border: 1px solid #666; background: #fff!important }
input[disabled="disabled"], input[disabled], select[disabled], button[disabled] { color: #aaa; cursor: default!important }
input[readonly="readonly"] { cursor: default!important }
.numbers2 { width: 3em!important }
.numbers3 { width: 3.5em!important }
/* reset form */
input, textarea { outline: none; box-shadow: none }
input:-webkit-autofill { -webkit-box-shadow:0 0 0 99px #fff inset; -webkit-text-fill-color: #069 }

/* border-box */
img, textarea, input, select, .ul-lb, .txt-img-txt, #corp, #corp_slim, #login, .form-1, .form-2, #footer ul, #temoignages-h li { box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box }

.sortable { cursor: move }
.cadre { border-radius: 3px }
.italic { font-style: italic }
.uline { text-decoration: underline }
.small { font-size: 0.9em }
.default { cursor: default }
.center { text-align: center }
.right { text-align: right }
.noindex { display: none }
.no-wrap { white-space: nowrap }
.transp { opacity: 0; -moz-opacity: 0; filter: alpha(opacity=0) }

.lightbox, .errorbox, .cta-button { margin: 1.5em 0;  background: #E2E2F3; padding: 1em; border-radius: 6px }
.form .lightbox { background: #fff }
.lightbox2 { background: #eee }
.errorbox { background: #F1E6DA; color: #f30 }
.lightbox ul, .errorbox ul { list-style-type: disc }
.erreurinfo::before { content: "» "; font-size: 1.6em }
.erreur, .erreurinfo { color: #f30 }
.errorbox a:link, .errorbox a:visited, .erreurinfo a:link, .erreurinfo a:visited { color: #f30 }
.errorbox a:active, .errorbox a:hover, .erreurinfo a:active, .erreurinfo a:hover { color: #025 }
.cta-button { display: block; text-align: center;}
.pagination { word-spacing: 0.2em }
.pagination .on { color: #f00 }
.altern-1 { padding: 4px; background: #dee3e7 }
.altern-2 { padding: 4px; background: #efefef }
.more::before { content: "»"; display: inline-block; font-size: 1.6em; color: #848; margin-right: 0.2em; text-decoration:underline; font-weight: 600 }
.more::before { text-decoration:none } /* bug ie11 */
.pxfont { font-weight: 600; font-size: 0.7em; color: #888 } /*Hammersmith One*/
.clear { clear: both; display: block; height: 1px; overflow: hidden; margin: 0; padding: 0 }
.pseudo { font-family: 'Roboto Condensed', sans-serif; font-weight: 400 }
.pseudo:link, .pseudo:visited { color: #848 }
.pseudo:active, .pseudo:hover { color: #f30 }

/* IR */
.ir { margin: 0 auto; height: 5px; width: 59px; border: solid #777 1px; position: relative; overflow: hidden; background: #fff }
.ir div { height: 100%; width: 100%; background: url('../images/www/ir-grid.svg') no-repeat; position: absolute; top: 0 }
.ir0 div { left:-99px } .ir1 div { left:-54px } .ir2 div { left:-48px } .ir3 div { left:-42px }
.ir4 div { left:-36px } .ir5 div { left:-30px } .ir6 div { left:-24px } .ir7 div { left:-18px }
.ir8 div { left:-12px } .ir9 div { left:-6px } .ir10 div { left:0 }

/* Image carrée preload responsive */
.img-o { max-width: 100%; overflow: hidden; position: relative }
.img-o div { padding-top: 100% }
.img-o img { position: absolute; top: 0 }
.img-o.l img { left: -1000%; right: -1000%; margin: 0 auto; height: 100%; max-width: none }
.img-o.p img { width: 100% }
.img-o img:first-child { z-index: 1 }

/* Listing Tableau */
.listing-tab { width: 100%; border-spacing: 1px }
.listing-tab tr:nth-child(even) { background: #efefef }
.listing-tab tr:nth-child(odd) { background: #dee3e7 }
.listing-tab td { padding: 0.5em }
.listing-tab .date { width: 60px }

/* Formulaire */
table.form { width: 100% }
table.form strong, table.form2 strong { font-weight: 400; color: #848; filter: alpha(opacity=100); -moz-opacity: 1; opacity: 1 }
.form-t, .table-t { padding: 0.3em 0.3em 0.1em 0.5em; background: #D7DEE3; font-weight: 600; border-bottom: solid #C7D0D7 3px }
.form-1 { white-space: nowrap; padding: 5px 4px 5px 15px; background: #efefef; width: 3%; text-align: right }
.form-2 { padding: 4px; background: #dee3e7 }
.form-img { vertical-align: middle; background: #efefef; width: 204px }
.form-img > div { margin: 0 auto }
.form-img img { display: block }
.form-check { text-align: center; vertical-align: middle; cursor: pointer; width: 8px; background: #dee3e7 }
.form-sep { border-bottom: solid #fff 2px }
.form2-1 { padding: 4px; background: #efefef }
.form-wrap-lb { white-space: normal }
.selects-list { border-collapse: collapse }
.selects-list td { padding: 0 0 3px }
.selects-list img { vertical-align: middle; width: 16px; height: 16px }
.f-info-box { position: absolute; right: 12px; top: 31px; background: #fff; border-radius: 3px; overflow:hidden; border-bottom: solid #69c 1px; border-left: solid #69c 1px; border-right: solid #69c 1px }
.f-info-box-t { background: #69c; color: #fff; padding: 4px 6px }
.f-info-box td { padding: 4px }

/* List Label / Action */
.lb-ac, .ul-ac { list-style-type: none; margin-left: 0 }
.lb-ac > li { margin: 15px 0; border-radius: 3px; overflow: hidden; } /* 12=>15px bug scroll touch punch*/
.ul-lb { height: 2.6em; line-height: 2.6em; float:left; background: #dee3e7; padding:0 10px }
.ul-lb-container { max-width: 100%; display: inline-block; position: relative; line-height: normal; vertical-align:-22% }
.ul-lb-wrap { overflow: hidden; white-space: nowrap; text-overflow: ellipsis }
.ul-lb-info { position: absolute; right: 0; top: 0 }
.ul-ac { margin-top: 0; background: #efefef }
.ul-ac li { height: 2.6em; line-height: 2.6em; margin: 0; display: inline-block; padding:0 9px }
.ul-ac li:last-child { padding-right: 0 }
.hlk { cursor: pointer }

/* Header */
#wait { position: fixed; top: 0; left:0; z-index: 100; cursor: wait; width: 100%; height: 100% }
#header { background: #17a; overflow: auto }
#header > div { margin: 0 auto; width: 960px; max-width: 100% }
#logo img { float: left; display: block; margin: 6px 26px 6px 0 }
#header-right { float: right; height: 20px }
#lang_switch { padding: 1px 6px 2px; background: #fff; font-size: 11px; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px }
#lang_switch a { text-decoration: none }
#menu { float: left; margin: 7px 0 3px; list-style-type: none }
#menu li { line-height: 1em; margin: 0; float: left }
#menu a, #hsl h1 a { display: block; padding: 5px 10px; text-decoration: none; color: #fff; border: solid #eee 1px; font-weight: 600; border-radius: 3px; margin-right: 10px }
#menu a:hover, #hsl h1 a:hover { background: #4192BB }
#menu-annu a { border-bottom: solid #eee 2px; border-top: solid #17a 2px; border-left: 0; border-right: 0; padding: 4px 0; border-radius: 0; margin-right: 32px }
#menu-register a { background: #848 }
#menu-annu a:hover { background: #17a }
@media screen and (max-width: 615px) { 
	#logo img { margin-right: 18px }
	#menu a { margin-right: 3px }
	#menu-annu a { margin-right: 22px }
}
@media screen and (max-width: 585px) { 
	#menu { font-size: 0.8em; margin-top: 3px }
	#logo img { height: 17px; width: auto; margin: 4px  8px -1px 4px!important }
	#lang_switch { font-size: 9px }
	#menu a { padding: 3px 5px }
	#menu-annu a { margin: 0 14px 0 4px; padding: 2px 0; border-bottom: solid #eee 1px } 
}
@media screen and (max-width: 440px) { #menu span { display: none } }
@media screen and (max-width: 400px) { #menu span { display: inline } }

#footer { overflow: hidden; font-family: 'Roboto Condensed', sans-serif }
#footer > div { margin: 0 auto; width: 1000px; max-width: 100% }
#footer > div > div { padding:0 20px }
#footer ul { list-style-type: none; float: left; margin: 1em 0; width: 25% }
#footer li { white-space: nowrap }
#f-l2 { padding-left: 3px }
#f-l3 { padding-left: 6px }
#f-l4 { padding-left: 9px }
#f-l4, #f-l4 a { color: #888!important } #f-l4 a:hover, #f-l4 a:active { color: #f30!important }
@media screen and (max-width: 820px) { 
	#footer ul { width: 33.3% }
	#f-l4 { width: 100%!important; margin-top: -0.3em!important; text-align: center }
	#f-l4 li { display: inline }
	#f-l4 li::after { content: ' - ' }
	#f-l4 li:last-child::after { content: '' }
}
@media screen and (max-width: 408px) { 
	#f-l2 { display: none }
	#footer ul { width: 50% }
}

/* Corp */
#site { padding: 2em 0; background: #fff }
#site > div { margin: 0 auto; width: 960px; max-width:100% }
#corp_slim { width: 780px; margin: 0 auto; max-width:100% }
#side-right { width: 778px; float: right }
#side-left { width: 172px; float: left }
#side-left ul { margin-left: 0; list-style-type: none  }

/* Accueil */
#hsl { position: relative; background: #fff }
#hsl-bg { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: #C4DEEF no-repeat; background-size: cover }
#hsl-wrap { height:-webkit-calc(70vh); height:-moz-calc(70vh); height:calc(70vh); min-height: 200px; position:relative }
#hsl-wrap > div { display: table; width: 100%; height: 100%; text-align: center }
#hsl-wrap > div > div { display: table-cell; vertical-align: middle; text-shadow: 0 0 8px rgb(0,0,0) }
#hsl h1 { margin: 0; font-family: 'Open Sans', Tahoma, Verdana, Arial, Helvetica; font-size: 1.2em }
#hsl h1 a { display: inline-block; background-color: rgba(65, 146, 187, 0.75); box-shadow: 0 0 10px rgba(0,0,0,0.4);  }
#hsl h2 { font-size: 50px; color: #fff; margin: 0 0 -2px }
#hsl h3 { font-size: 40px; color: #fff; margin: 0 0 12px }
#hsl-copyright { font-size: 24px; color: #fff!important; text-decoration: none; display: block; position: absolute; right: 5px; bottom: 0; text-shadow: 0 0 4px rgba(0, 0, 0, 1) }
#spotlight { height: 474px; overflow: hidden; text-align: center }
#spotlight ul { width: calc(100% + 12px); margin: 0 }
#spotlight li { margin: 0px 12px 12px 0; display: inline-block }
#spotlight img { display: block }

.txt-img { display: block; position: relative; overflow:hidden }
.txt-img-bg, .txt-img-txt { position: absolute; bottom: 0; width: 100%; z-index:3 }
.txt-img-bg { height: 22px; background:-webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(0,0,0,0.6))); background:-webkit-linear-gradient(top, transparent 0%, rgba(0,0,0,0.6) 100%); background:-moz-linear-gradient(top, transparent 0%, rgba(0,0,0,0.6) 100%); background:linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.6) 100%) }
.txt-img-txt { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #fff; font-family: 'Roboto Condensed', sans-serif; font-size: 0.9em; padding: 0 2px; line-height: 1.3em; text-shadow: 0 0 1px rgba(0,0,0,0.6); text-align: center
}

#h-login { font-size: 0.9em }
#h-login p { margin: 0 0 3px }
#h-login p:last-child { margin-top: 1em }
#h-login input { background: #f5faff }
#h-newbooks { font-size: 0.9em }
#h-directory { list-style-type: none; margin: -0.4em 0; text-align: center }
#h-directory li { display: inline-block; margin: 0.4em 0.7em }
#h-articles { list-style-type: none }
#h-articles li { padding-left: 22px; background-position: 0 0.3em; background-repeat: no-repeat }

/* Temoignages */
#temoignages { list-style-type: none; margin: 0 }
#temoignages li { margin: 1.5em 0; padding: 1.5em; overflow: auto }
.tem-txt { overflow: auto;  margin-top: 1em }
#temoignages strong, #temoignages-h strong { font-family: 'Roboto Condensed', sans-serif; font-weight: 400 }
#temoignages .img-o, #temoignages-h .img-o { width: 150px; border-radius: 50%; float: left; margin-right: 1.5em }
#temoignages-link { float: right }
@media screen and (max-width: 480px) { #temoignages .img-o, #temoignages-h .img-o, #temoignages-link { float: none } }
/* Temoignages home */
#temoignages-h { list-style-type: none; margin: 0; overflow: auto; display: flex }
#temoignages-h li { padding: 1.5em; border: 1px solid #e8e8e8; width: 474px; float: left }
#temoignages-h li:first-child { margin-right: 12px }
@media screen and (max-width: 980px) { #temoignages-h { display: list-item } #temoignages-h li { width: 100% } }

/* Enregistrement */
.regasterisk { color: #f03; font-weight: 600 }
.passwd_champ { float: left; margin-right: 4px }
#passwd_lv { display:inline-block; font-size: 0.9em; cursor: default }
#passwd_lv_bar_gb { background: #ccc; width: 150px; height: 5px; overflow: hidden }
#passwd_lv_bar_gb div { height: 5px }
.checkbox-erreur { background: red; padding: 2px; float: left; margin-right: 5px; border-radius: 3px }
.checkbox-erreur input { display: block }

/* Recherche */
#annu-result { margin: 0; list-style-type: none; width: 100%; width: calc(100% + 2px) }
#annu-result li {  margin: 0 0 28px; display: block; float: left; width: 25%; text-align: center }
@media screen and (max-width: 665px) { #annu-result li { width: 33.33% } #annu-li7, #annu-li8 { display: none!important } }
@media screen and (max-width: 500px) { #annu-result li { width: 50% } #annu-li5, #annu-li6 { display: none!important }}
.annu-div { padding-bottom: 59px; margin-right: 2px; position: relative; z-index: 1; font-family: 'Roboto Condensed', sans-serif; font-weight: 400 }
.annu-div a { display: block; position: absolute; width: 100%; height: 100%; z-index: 2 }
.annu-div strong { display: block; position: absolute; width: 100%; bottom: 31px; font-weight: 400; font-size: 1.1em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.annu-div .img-o { width: 200px; text-align: left; margin: 0 auto }
.annu-div .bot { position: absolute; width: 100%; bottom: 0 }
.annu-div p { margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; line-height: 1.4em }
.annu-cat { font-size: 0.85em; color: #369 }
.annu-geo { font-size: 0.75em; color: #888 }
.annu-ir { height: 7px; padding-top: 4px }
.newbook { color: #848; margin-top: -4px!important }

.isvisited, .fvisited { text-decoration: none }
.isvisited strong, .fvisited strong { color: #848 }
a.isvisited:visited strong, a.fvisited strong { color: #888 }
a.isvisited:hover strong, a.fvisited:hover strong { color: #f30 }
.ComboCheckBoxes div { overflow: auto }
.ComboCheckBoxes div div { float: left; margin-right: 2.5em }
.ComboCheckBoxes div div:last-child { margin-right: 0 }
.ComboCheckBoxes p { text-transform: uppercase; font-size: 9px; color: #888; margin: 6px 0 }
#browse-cat { list-style-type: none }

/* Spotlight */
.img-j { float: left }
.img-j-lastrow, .img-j-lastrow ~ .img-j { display: none }
.img-j img { max-width: 100%; max-height: 100% }
#spotlight-search { overflow: auto; margin-bottom: -10px }
#no-portfolio-spotlight td { text-align: center; vertical-align: middle; padding: 4px; background: #dee3e7 }

/* Login */
#login { width: 360px; max-width:100%; margin: 0 auto; background: #eee; padding: 1em; border-radius: 3px }
#login p { text-align: center }
#login > div { background: #fff; padding: 1em; border-radius: 3px; font-size: 0.9em }
#login > div > div { margin-left: 100px }
#login .fa-user { float: left; margin: 12px 0 0 12px; color: #ddd }
@media screen and (max-width: 319px) { 
#login .fa-user { display: none }
#login > div > div { margin-left: 0 }
}
#login div p { text-align: left } 
#login input { background: #f5faff }

/* Admin */
.disabled, a.disabled { color: #888 }
label.disabled { cursor: default }
.disabled-pic { -moz-opacity: 0.40; opacity: 0.40; filter: alpha(opacity=40) }

.edit { background: url(../images/icons/edit.gif) 0 }
.up { background: url(../images/icons/up.gif) 0 }
.down { background: url(../images/icons/down.gif) 0 }
.config { background: url(../images/icons/wrench.gif) 0 }
.reorder { background: url(../images/icons/reorder.gif) 0 }
.add { background: url(../images/icons/add.gif) 0 }
.valider { background: url(../images/icons/valide.gif) 0 0.2em }
.stats { background: url(../images/icons/stats.gif) 0 }
.pic { background: url(../images/icons/pic.gif) 0 }
.pics { background: url(../images/icons/pics.gif) 0 }
.zoom { background: url(../images/icons/zoom.gif) 0 }
.tumbs { background: url(../images/icons/tumbs.gif) 0 }
.parent-dir { background: url(../images/icons/parent-dir.gif) 0 }
.user { background: url(../images/icons/user.gif) 0 }
.email { background: url(../images/icons/email.gif) 0 }
.pdata { background: url(../images/icons/pdata.gif) 0 }
.pass { background: url(../images/icons/pass.gif) 0 }
.news { background: url(../images/icons/news.gif) 0 }
.tab-action { background: url(../images/icons/tab-action.gif) 0 }
.report { background: url(../images/icons/report.gif) 0 }
.month { background: url(../images/icons/month.gif) 0 }
.day { background: url(../images/icons/day.gif) 0 }
.help { background: url(../images/icons/info.gif) 0 0.2em }
.print { background: url(../images/icons/print.gif) 0 }
.ajax { background: url(../images/icons/ajax.gif) 0 }
.ajaxoff { background: url(../images/icons/ajaxoff.gif) 0 }
.http { background: url(../images/icons/http.gif) 0 }
.link { background: url(../images/icons/link.gif) 0 }
.check { background: url(../images/icons/tick.gif) 0 0.2em }
.html { background: url(../images/icons/html.gif) 0 }
.ed-img { background: url(../images/icons/ed-img.gif) 0 }
.moreb { background: url(../images/icons/moreb.gif) 0 }
.back { background: url(../images/icons/left.png) 0 }
.time { background: url(../images/icons/time.gif) 0 0.2em }
.phone { background: url(../images/icons/phone2.gif) 0 }
.tablet { background: url(../images/icons/tablet.gif) 0 }
.logout { background: url(../images/icons/logout.gif) 0 }
.edit, .up, .down, .config, .reorder, .add, .valider, .stats, .pic, .pics, .zoom, .tumbs, .parent-dir, .user, .email, .pdata, .pass, .news, .tab-action, .report, .month, .day, .help, .print, .ajax, .ajaxoff, .http, .link, .check, .html, .ed-img, .moreb, .back, .time, .phone, .tablet, .logout { background-repeat: no-repeat; padding-left: 1.6em!important }
span.help  { display:inline-block }
.icon { display: block; width: 16px; margin: auto; text-indent: -9999px; text-decoration: none; padding-left: 0!important }
.shortcut { padding-left: 4px!important }
.shortcut span { background: url('../images/icons/shortcut.gif') 0 no-repeat; padding-left: 1.6em }
.txtref { font-size: 0.9em; color: #222!important; background-color: #ddd; white-space: nowrap; border-radius: 3px; border: 1px solid #fff; padding: 0 0.2em; background-position: 1px; display: inline-block }
 /* bugfix ie11 */
 body[UA*='rv:11.0'] .txtref { border-radius: 0 }

/* Admin Header */
#admin_body { width: 740px }
#header_admin { margin-bottom: 1.6em }
#header_admin a { margin-right: 0.6em }
#menu_user { list-style-type: none; margin: 0; width: 200px; float: right; border-radius: 3px; background: #ebeadb }
#menu_user li { margin: 0 }
#menu_user a { display: block; padding: 0.2em 0.4em; text-decoration: none; border: 1px solid #ebeadb; border-radius: 3px }
#menu_user a:hover, #menu_user a:active { background: #E2E2F3; border: 1px solid #999; color: #058 }
#menu_book { margin: 0; overflow: auto; font-size: 0.9em; text-transform: uppercase; font-weight: 600 }
#menu_book li { float: left; margin: 0 0.6em 0 0; border: solid #bbb 1px; border-bottom: none; border-top-left-radius: 3px; border-top-right-radius: 3px; overflow: hidden }
#menu_book a { border-bottom: solid #bbb 1px; display: block; padding: 0 0.6em; text-decoration: none; background: #ECE9D8; border-top: solid #FAF9F4 3px }
#menu_book a:hover, #menu_book a:active, #menu_book a.on { color: #058; background: #fff; border-top: solid #ECE9D8 3px }
#menu_book a.on { border-bottom: solid #fff 1px }
#menu_book_ligne { margin: -1px 0 2em 0; height: 1px; background: #bbb }
#sous_menu_book { list-style-type: none; margin: 0 0 1.7em 0; padding: 0.4em 0 0; color: #c9c; background: #efefef; border-radius: 3px }
#sous_menu_book li { display: inline-block; margin: 0 0 0.4em 1em }
#sous_menu_book a:link, #sous_menu_book a:visited { text-decoration: none }
.ui-sortable-helper { box-shadow: 0 0 10px rgba(0,0,0,0.5) }

/* Popup select js */
.pp-select { margin: 6px; background-color: #DEE3E7 }
.pp-select ul { list-style-type: none; margin: 0 }
.pp-select li { margin: 0; display: inline-block; text-align: center; padding: 6px }
.pp-select .img-o { width:140px; text-align: left }
#select_styles img, #TumbGal { width:250px }
.hack-top-border { display: inline-block; overflow: hidden }
.hack-top-border img { display: block; margin-top: -1px }

/* Photos */
#InputFileList { float: left }
.inputfile { position: relative; height: 24px; overflow: hidden }
.inputfile input { position: absolute; right: 0; top: 0; font-size: 60px; opacity: 0; -moz-opacity: 0; filter: alpha(opacity=0); text-align: right }
#PrevFile { width: 100%; margin-top: 1em }
#PrevFileNbr { background: #ccd; padding: 0.3em 0.6em; color: #333; border-top-left-radius: 3px; border-top-right-radius: 3px  }
#PrevFileList { height: 193px; overflow-y: scroll }
#PrevFileList div { padding-top: 3px }
#UploadHelp { float: right; width: 250px }
#sortpic { max-width: 900px; margin: 0 auto; overflow: hidden }
#sortpic div { width: 150px; height: 150px; float: left; text-align: center }
#sortpic img { cursor: move }
#vignette-gal .img-o { width: 140px }

/* Commentaires */
#comment { table-layout: fixed; width: 100%; border-spacing: 0; word-wrap: break-word }
.com-about { border-top-left-radius: 3px; border-bottom-left-radius: 3px; width: 200px; vertical-align: top; text-align: center; padding: 1em; background: #dee3e7 }
.com-data { border-top-right-radius: 3px; border-bottom-right-radius: 3px; padding: 1em; background: #efefef }
.com-sep { height: 12px }
.com-auth p { overflow:hidden; white-space: nowrap; text-overflow: ellipsis; margin: 0.2em 0 }

/* Statistiques */
#stats_left { float: left; width: 150px }
#stats_right { float: right; width: 795px }
#stats_left ul { list-style-type: none; margin: 0 }
.deploystat { overflow: auto }
.stats_tab { width: 100% }
.stats_td_1, .stats_td_2 { padding: 2px 6px; background: #efefef; white-space: nowrap; overflow: hidden; text-overflow: '' }
.stats_td_2 { background: #dee3e7 }
.stats_tabm { margin: 2em auto 0 }
.stats_tabm td { padding: 0.1em 1em; background: #fff }
.stats_barre { background: #1177AA; height: 8px; margin-top:7px!important; min-width: 1px }
.positif { color: Green }
.negatif { color: Red }
.neutre { color: Black }
#calandrier { width: 100% }
#calandrier td { background: #dee3e7; font-size: 0.9em; text-align: center }
#calandrier .select { background: #fcc }
#calandrier .vide { background: #efefef }
#calandrier .jour { background: #ffc }

/* Langue */
.fr .inputfile { background: #fff url('lg/fr/select-photo.gif?2') 0 0; width: 167px }
.en .inputfile { background: #fff url('lg/en/select-photo.gif?2') 0 0; width: 106px }
.new { line-height: 1em }
.new::after { color: #848; display: inline-block; text-decoration: none; font-size: 0.6em; vertical-align: super; font-family: 'Roboto Condensed', sans-serif }
.fr .new::after { content: '\00a0\00a0nouveau' }
.en .new::after { content: '\00a0\00a0new' }

/* Transitions */
a, input, textarea {
-webkit-transition: background 0.3s ease, border 0.3s ease, color 0.3s ease;
-moz-transition: background 0.3s ease, border 0.3s ease, color 0.3s ease;
-o-transition: background 0.3s ease, border 0.3s ease, color 0.3s ease;
transition: background 0.3s ease, border 0.3s ease, color 0.3s ease;
}

/* ####################################################################################### */

/* RESPONSIVE */
.floatr-left { float: right; margin-top: 0 }
.disptab { display: none }

/* RESPONSIVE DESIGN TABLETTE */
@media screen and (max-width: 979px) {
img { max-width: 100%; height: auto } /* width:auto; =>bug ie8 ?*/
#logo img { margin-left: 6px }
#lang_switch { border-bottom-right-radius: 0 }
#corp, #corp_slim { padding: 0 8px }
/* colonne annu */
#side-right, #side-left { width: 100%; float: none }
#side-left ul { text-align: center; max-width: 470px; margin: 0 auto }
#side-left li { display: inline-block;  margin: 0.4em 0.5em }
/* colonne admin */
#admin_body, #menu_user { width: 100% }
#menu_user { float: none; margin: 0 0 1.6em; font-size: 0.95em; overflow: auto }
#menu_user li { float: left }
/* colonne stats */
#stats_right, #stats_left { width: 100%; float: none }
#stats_right { margin-top: 2em }
#menu-stat { overflow: auto }
#menu-stat li { float: left; margin-right: 0.7em }
.stats_tab hr, #liste_mois { display:none }
.hidetab { display: none!important }
.disptab { display: block }
/* pg */
#h-newbooks, #h-temoignages .italic, #h-temoignages .small { font-size: 1em }

/* tinymce responsive */
table.mceLayout, textarea.tinyMCE { width: 100%!important }
.mceToolbar td { display:table-row; float: left }
}

/* RESPONSIVE DESIGN MOBILE */
@media screen and (max-width: 767px) {
#header_admin { margin-top: -1.2em }
#menu_user { margin-top: -0.5em }
#menu_book { font-size: 0.82em; margin: -0.7em 0 1.7em }
#menu_book li { border-radius: 3px; margin-right: 0.3em; margin-bottom: 0.3em }
#menu_book li:last-child { margin-right: 0 }
#menu_book a { padding: 2px 0.4em }
#menu_book a.on { border-bottom: solid #bbb 1px }
#menu_book_ligne { display: none }
#sous_menu_book { font-size: 0.95em }
#hsl h1 { font-size: 1em }
#hsl h2 { font-size: 40px; margin: 0 }
#hsl h3 { font-size: 32px; margin: 0 0 9px }
textarea, input, select, .selects-list { width: 100% }
input[type="radio"], input[type="checkbox"], .input-sm { width: auto }
input[type="submit"], input[type="button"], input[type="file"], button { width: auto; background: #efefef }
.form { border-collapse: collapse }
.form-t, .form-1, .form-2 { display: block }
.form-t { font-size: 1.1em; margin:1em 0 }
.form-t:first-child { margin-top: 0 }
.form-t select, h1 select { max-width: 120px }
.form-1 { background: #dee3e7; width: 100%; text-align: left; padding-left: 8px; }
.form-2 { background: #fff; padding: 6px 0 18px }
.form-img { background: #fff; margin: 5px 0 1.5em; display: inline-block; width: auto }
.form-check { vertical-align: top; border-right: solid #fff 4px; padding-top:5px }
.form-sep { border-bottom:none } .form-check.form-sep { border-top: solid #fff 12px }
.form-no-lb { display: none }
.form .lightbox { background: #E2E2F3 }
.floatr-left { float: none }
#photo-ac-group { font-size: 0.9em }
#photo-ac-group select { width: 128px }
.com-about { width: 120px }
}

/* RESPONSIVE DESIGN MOBILE PORTRAIT */
@media screen and (max-width: 440px) {
#corp, #corp_slim { padding: 0 3px }
#hsl h1 { font-size: 0.9em }
#hsl h2 { font-size: 34px; }
#hsl h3 { font-size: 27px; }
}

/* ICON */
.flag { padding: 1px; border: 1px solid #bbb; vertical-align: -15%; width: 22px; }

.ul-ac .svg-inline--fa { vertical-align: -9% }
.a-icon, .a-uicon { text-decoration: none; display:inline-block } /*inline-block : wrap*/
.a-uicon span { text-decoration: underline }

.svg-inline--fa, .fa { color: #369; font-size: 16px } /* default */
.small .svg-inline--fa, .small .fa { font-size: 14px }
h1 .svg-inline--fa, h1 .fa { font-size: 1em }
.fa-pencil { color: #f90 }
.fa-minus-circle { color: #E6584C }
.fa-plus-circle, .fa-check-circle, .fa-repeat { color: #6EB558 }
.fa-chart-area { color: #4D89DD }
.fa-cog { color: #999 }
.fa-level-up, .fa-arrow-right { color: #888 }
.ul-lb .fa, .ul-lb .svg-inline--fa { color: #999; font-size: 12px }