styles.css 30 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891
  1. @charset "UTF-8";
  2. /**
  3. * Primary Drupal Styles
  4. * Author: Bachir Soussi Chiadmi
  5. */
  6. /* between 0 & 640px */
  7. /* between 640px & 1024px */
  8. /* between 1025px & 1366px */
  9. /* between 1367px & 1920px */
  10. /* between 1920px & infinity */
  11. body {
  12. font-size: 16px;
  13. font-family: "aileron", Arial, "MS Trebuchet", sans-serif; }
  14. h1 {
  15. font-size: 1.6em; }
  16. h2 {
  17. font-size: 1.5em; }
  18. h3 {
  19. font-size: 1.4em; }
  20. h4 {
  21. font-size: 1.3em; }
  22. h5 {
  23. font-size: 1.2em; }
  24. h6 {
  25. font-size: 1.1em; }
  26. input {
  27. font-family: Arial, "MS Trebuchet", sans-serif;
  28. font-size: 0.8em; }
  29. /** layout */
  30. .footer-block .region, .header-block {
  31. display: inline-block;
  32. vertical-align: top; }
  33. #header, #main, #footer {
  34. padding: 0; }
  35. #header {
  36. width: 100%;
  37. z-index: 20;
  38. background-color: rgba(255, 255, 255, 0.95);
  39. background-image: url(../../images/fond-trame-logo-lite.png);
  40. background-repeat: no-repeat;
  41. background-position: center top;
  42. background-size: contain;
  43. max-height: 200px; }
  44. @media only screen and (min-width: 85.4375em) {
  45. #header {
  46. position: fixed;
  47. max-height: 400px; } }
  48. #header hgroup.logo {
  49. width: 95%;
  50. margin: 0 auto;
  51. padding: 1em 0 0; }
  52. @media only screen and (min-width: 64.0625em) {
  53. #header hgroup.logo {
  54. max-width: 1000px; } }
  55. #header h1 {
  56. margin: 0; }
  57. #header h1 a {
  58. display: block;
  59. height: 120px;
  60. background-image: url(../../images/logo.png);
  61. background-size: contain;
  62. background-position: center;
  63. background-repeat: no-repeat;
  64. text-indent: -2000px;
  65. overflow: hidden;
  66. margin: 0; }
  67. @media only screen and (min-width: 85.4375em) {
  68. #header h1 a {
  69. height: 320px; } }
  70. #header h2 {
  71. text-align: center;
  72. color: #20c498;
  73. font-size: 1em;
  74. font-weight: 500; }
  75. @media only screen and (min-width: 85.4375em) {
  76. #header h2 {
  77. font-size: 2em; } }
  78. #main {
  79. width: 95%;
  80. margin: 0 auto; }
  81. @media only screen and (min-width: 85.4375em) {
  82. #main {
  83. padding-top: 400px; } }
  84. @media only screen and (min-width: 64.0625em) {
  85. #main {
  86. max-width: 1000px; } }
  87. #node-63 {
  88. padding: 1em 0; }
  89. #node-63 .content section {
  90. display: inline; }
  91. #node-63 .content p {
  92. margin: 0;
  93. font-size: 1em;
  94. line-height: 1.2;
  95. font-weight: 400; }
  96. #node-63 .content p em {
  97. font-weight: 500; }
  98. @media only screen and (min-width: 64.0625em) {
  99. #node-63 .content p {
  100. font-size: 1.3em;
  101. line-height: 1.3; } }
  102. #node-63 ul.links {
  103. text-align: right;
  104. margin: 0;
  105. padding: 0; }
  106. #node-63 ul.links li {
  107. margin: 0;
  108. padding: 0;
  109. display: inline-block; }
  110. #node-63 ul.links a {
  111. color: #20c498;
  112. text-decoration: none;
  113. font-weight: 500; }
  114. #thematique-anchor-links {
  115. display: none;
  116. padding: 2em 0 4em; }
  117. @media only screen and (min-width: 64.0625em) {
  118. #thematique-anchor-links {
  119. display: block; } }
  120. #thematique-anchor-links ul {
  121. display: -ms-flexbox;
  122. display: flex;
  123. -ms-flex-flow: row nowrap;
  124. flex-flow: row nowrap;
  125. -ms-flex-pack: justify;
  126. justify-content: space-between;
  127. padding: 0;
  128. margin: 0; }
  129. #thematique-anchor-links ul li {
  130. max-width: 7em;
  131. list-style: none;
  132. padding: 0;
  133. margin: 0; }
  134. #thematique-anchor-links ul li a {
  135. text-decoration: none;
  136. font-weight: 600;
  137. display: block;
  138. min-height: 3em;
  139. background-position: center;
  140. background-repeat: no-repeat;
  141. background-size: contain; }
  142. #thematique-anchor-links ul li a span {
  143. display: block; }
  144. #thematique-anchor-links ul li a.node-32 {
  145. background-image: url(../../images/menu-fond-theme-0-flat.jpg);
  146. color: #2f82ff; }
  147. #thematique-anchor-links ul li a.node-32.en_attente {
  148. color: #aaa;
  149. background-image: url(../../images/menu-fond-theme-0-flat-nb.jpg);
  150. cursor: default; }
  151. #thematique-anchor-links ul li a.node-14 {
  152. background-image: url(../../images/menu-fond-theme-1-flat.jpg);
  153. color: #ff0000; }
  154. #thematique-anchor-links ul li a.node-14.en_attente {
  155. color: #aaa;
  156. background-image: url(../../images/menu-fond-theme-1-flat-nb.jpg);
  157. cursor: default; }
  158. #thematique-anchor-links ul li a.node-38 {
  159. background-image: url(../../images/menu-fond-theme-2-flat.jpg);
  160. color: #88aa00; }
  161. #thematique-anchor-links ul li a.node-38.en_attente {
  162. color: #aaa;
  163. background-image: url(../../images/menu-fond-theme-2-flat-nb.jpg);
  164. cursor: default; }
  165. #thematique-anchor-links ul li a.node-3 {
  166. background-image: url(../../images/menu-fond-theme-3-flat.jpg);
  167. color: #ff6600; }
  168. #thematique-anchor-links ul li a.node-3.en_attente {
  169. color: #aaa;
  170. background-image: url(../../images/menu-fond-theme-3-flat-nb.jpg);
  171. cursor: default; }
  172. #thematique-anchor-links ul li a.node-20 {
  173. background-image: url(../../images/menu-fond-theme-4-flat.jpg);
  174. color: #ff2ad4; }
  175. #thematique-anchor-links ul li a.node-20.en_attente {
  176. color: #aaa;
  177. background-image: url(../../images/menu-fond-theme-4-flat-nb.jpg);
  178. cursor: default; }
  179. #thematique-anchor-links ul li a.node-26 {
  180. background-image: url(../../images/menu-fond-theme-5-flat.jpg);
  181. color: #8800aa; }
  182. #thematique-anchor-links ul li a.node-26.en_attente {
  183. color: #aaa;
  184. background-image: url(../../images/menu-fond-theme-5-flat-nb.jpg);
  185. cursor: default; }
  186. .node-thematique {
  187. margin-top: 2em;
  188. margin-bottom: 7em;
  189. position: relative; }
  190. @media only screen and (min-width: 85.4375em) {
  191. .node-thematique {
  192. margin-top: 0; } }
  193. .node-thematique::before {
  194. position: absolute;
  195. content: " ";
  196. z-index: -1;
  197. background-position: center;
  198. background-repeat: no-repeat;
  199. background-size: cover;
  200. width: 100%;
  201. height: 100%;
  202. top: 0;
  203. left: 0; }
  204. @media only screen and (min-width: 85.4375em) {
  205. .node-thematique::before {
  206. background-size: contain;
  207. width: 110%;
  208. height: 110%;
  209. top: -5%;
  210. left: -5%; } }
  211. .node-thematique.en_attente::before {
  212. background-size: contain;
  213. background-position: left; }
  214. .node-thematique.node-32::before {
  215. background-image: url(../../images/fond-theme-0-flat.png); }
  216. .node-thematique.node-32 > h2,
  217. .node-thematique.node-32 .group-video .field-name-field-description h3,
  218. .node-thematique.node-32 .group-description .field-name-field-ecouter,
  219. .node-thematique.node-32 .node-documentair .field-name-field-doc,
  220. .node-thematique.node-32 .node-documentair .field-name-title-field,
  221. .node-thematique.node-32 .field-name-field-episodes .field-label,
  222. .node-thematique.node-32 .node-episode .field-name-title-field,
  223. .node-thematique.node-32 .node-episode span.date {
  224. color: #2f82ff; }
  225. .node-thematique.node-32 .field-name-body .summary {
  226. border-left-color: #2f82ff; }
  227. .node-thematique.node-14::before {
  228. background-image: url(../../images/fond-theme-1-flat.png); }
  229. .node-thematique.node-14 > h2,
  230. .node-thematique.node-14 .group-video .field-name-field-description h3,
  231. .node-thematique.node-14 .group-description .field-name-field-ecouter,
  232. .node-thematique.node-14 .node-documentair .field-name-field-doc,
  233. .node-thematique.node-14 .node-documentair .field-name-title-field,
  234. .node-thematique.node-14 .field-name-field-episodes .field-label,
  235. .node-thematique.node-14 .node-episode .field-name-title-field,
  236. .node-thematique.node-14 .node-episode span.date {
  237. color: #ff0000; }
  238. .node-thematique.node-14 .field-name-body .summary {
  239. border-left-color: #ff0000; }
  240. .node-thematique.node-38::before {
  241. background-image: url(../../images/fond-theme-2-flat.png); }
  242. .node-thematique.node-38 > h2,
  243. .node-thematique.node-38 .group-video .field-name-field-description h3,
  244. .node-thematique.node-38 .group-description .field-name-field-ecouter,
  245. .node-thematique.node-38 .node-documentair .field-name-field-doc,
  246. .node-thematique.node-38 .node-documentair .field-name-title-field,
  247. .node-thematique.node-38 .field-name-field-episodes .field-label,
  248. .node-thematique.node-38 .node-episode .field-name-title-field,
  249. .node-thematique.node-38 .node-episode span.date {
  250. color: #88aa00; }
  251. .node-thematique.node-38 .field-name-body .summary {
  252. border-left-color: #88aa00; }
  253. .node-thematique.node-3::before {
  254. background-image: url(../../images/fond-theme-3-flat.png); }
  255. .node-thematique.node-3 > h2,
  256. .node-thematique.node-3 .group-video .field-name-field-description h3,
  257. .node-thematique.node-3 .group-description .field-name-field-ecouter,
  258. .node-thematique.node-3 .node-documentair .field-name-field-doc,
  259. .node-thematique.node-3 .node-documentair .field-name-title-field,
  260. .node-thematique.node-3 .field-name-field-episodes .field-label,
  261. .node-thematique.node-3 .node-episode .field-name-title-field,
  262. .node-thematique.node-3 .node-episode span.date {
  263. color: #ff6600; }
  264. .node-thematique.node-3 .field-name-body .summary {
  265. border-left-color: #ff6600; }
  266. .node-thematique.node-20::before {
  267. background-image: url(../../images/fond-theme-4-flat.png); }
  268. .node-thematique.node-20 > h2,
  269. .node-thematique.node-20 .group-video .field-name-field-description h3,
  270. .node-thematique.node-20 .group-description .field-name-field-ecouter,
  271. .node-thematique.node-20 .node-documentair .field-name-field-doc,
  272. .node-thematique.node-20 .node-documentair .field-name-title-field,
  273. .node-thematique.node-20 .field-name-field-episodes .field-label,
  274. .node-thematique.node-20 .node-episode .field-name-title-field,
  275. .node-thematique.node-20 .node-episode span.date {
  276. color: #ff2ad4; }
  277. .node-thematique.node-20 .field-name-body .summary {
  278. border-left-color: #ff2ad4; }
  279. .node-thematique.node-26::before {
  280. background-image: url(../../images/fond-theme-5-flat.png); }
  281. .node-thematique.node-26 > h2,
  282. .node-thematique.node-26 .group-video .field-name-field-description h3,
  283. .node-thematique.node-26 .group-description .field-name-field-ecouter,
  284. .node-thematique.node-26 .node-documentair .field-name-field-doc,
  285. .node-thematique.node-26 .node-documentair .field-name-title-field,
  286. .node-thematique.node-26 .field-name-field-episodes .field-label,
  287. .node-thematique.node-26 .node-episode .field-name-title-field,
  288. .node-thematique.node-26 .node-episode span.date {
  289. color: #8800aa; }
  290. .node-thematique.node-26 .field-name-body .summary {
  291. border-left-color: #8800aa; }
  292. .node-thematique > h2 {
  293. font-size: 3em;
  294. font-weight: 400;
  295. line-height: 0.9;
  296. text-indent: -0.09em;
  297. position: relative;
  298. margin: 0;
  299. padding: 0 1em 0 0; }
  300. @media only screen and (min-width: 85.4375em) {
  301. .node-thematique > h2 {
  302. padding: 0 2em 0 0;
  303. font-size: 4em;
  304. padding: 0; } }
  305. .node-thematique > h2 span.target {
  306. position: absolute;
  307. top: -120px; }
  308. @media only screen and (min-width: 85.4375em) {
  309. .node-thematique > h2 span.target {
  310. top: -170px; } }
  311. .node-thematique > h2 span.date {
  312. font-size: 0.3em;
  313. font-weight: 600;
  314. display: block;
  315. text-indent: 0.2em; }
  316. .node-thematique .content {
  317. letter-spacing: -0.25em; }
  318. .node-thematique .content > * {
  319. letter-spacing: normal; }
  320. .node-thematique .content article.main {
  321. overflow: hidden; }
  322. @media only screen and (min-width: 64.0625em) {
  323. .node-thematique .content article.main {
  324. display: inline-block;
  325. vertical-align: top;
  326. width: 69.5%; } }
  327. .node-thematique .content article.main .field-name-body {
  328. position: relative;
  329. z-index: 3; }
  330. .node-thematique .content article.main .field-name-body > * {
  331. padding: 0 1em 0 0; }
  332. .node-thematique .content article.main .field-name-body .summary {
  333. position: relative;
  334. transition: background-color 0.5 ease-in-out;
  335. border-left-style: solid;
  336. border-left-width: 0; }
  337. @media only screen and (min-width: 64.0625em) {
  338. .node-thematique .content article.main .field-name-body .summary {
  339. height: 7em;
  340. overflow: hidden; } }
  341. .node-thematique .content article.main .field-name-body .summary p {
  342. font-size: 1.05em;
  343. padding: 0.5em 0;
  344. margin: 0;
  345. font-weight: 500; }
  346. @media only screen and (min-width: 64.0625em) {
  347. .node-thematique .content article.main .field-name-body .summary p {
  348. padding: 0.5em 1.2em 0.5em; } }
  349. .node-thematique .content article.main .field-name-body .value {
  350. display: none;
  351. position: absolute;
  352. height: 1px;
  353. margin-bottom: 0;
  354. transition: height 0.5s ease-in-out;
  355. background-color: #fff;
  356. overflow: hidden; }
  357. @media only screen and (min-width: 85.4375em) {
  358. .node-thematique .content article.main .field-name-body .value {
  359. display: block; } }
  360. .node-thematique .content article.main .field-name-body .value p {
  361. font-size: 0.95em;
  362. padding: 1em 1em 0 1.5em;
  363. line-height: 1.3;
  364. margin: 0;
  365. background-color: #fff; }
  366. @media only screen and (min-width: 64.0625em) {
  367. .node-thematique .content article.main .field-name-body:hover .value {
  368. height: 700px; } }
  369. .node-thematique .content article.main .group-video {
  370. position: relative; }
  371. .node-thematique .content article.main .group-video .field-name-field-emvideo img {
  372. max-width: 100%;
  373. height: auto; }
  374. .node-thematique .content article.main .group-video .field-name-field-emvideo a {
  375. display: block;
  376. line-height: 0; }
  377. .node-thematique .content article.main .group-video .group-description {
  378. cursor: pointer;
  379. pointer-events: none;
  380. position: absolute;
  381. z-index: 2;
  382. top: 0;
  383. left: 0;
  384. width: 100%;
  385. height: 100%; }
  386. .node-thematique .content article.main .group-video .group-description .field-name-field-ecouter {
  387. font-size: 0.7em;
  388. background-color: rgba(255, 255, 255, 0.9);
  389. font-weight: 600;
  390. padding: 0.2em 0.4em;
  391. display: inline-block;
  392. margin: 5px; }
  393. @media only screen and (min-width: 64.0625em) {
  394. .node-thematique .content article.main .group-video .group-description .field-name-field-ecouter {
  395. font-size: 1em; } }
  396. @media only screen and (min-width: 64.0625em) {
  397. .node-thematique .content article.main .group-video .group-description .field-name-field-ecouter {
  398. margin: 15px; } }
  399. .node-thematique .content article.main .group-video .group-description .field-name-field-description {
  400. position: absolute;
  401. top: 0;
  402. left: 0;
  403. box-sizing: border-box;
  404. width: 80%;
  405. height: 70%;
  406. margin: 10%;
  407. padding: 5%;
  408. opacity: 0;
  409. background-color: rgba(255, 255, 255, 0.9);
  410. transition: opacity 0.3s ease-in-out; }
  411. .node-thematique .content article.main .group-video .group-description .field-name-field-description h3 {
  412. font-weight: 500;
  413. font-size: 2em;
  414. margin: 0; }
  415. @media only screen and (min-width: 64.0625em) {
  416. .node-thematique .content article.main .group-video:hover .group-description .field-name-field-description {
  417. opacity: 1; } }
  418. .node-thematique .content aside.right {
  419. margin-top: 1.2em; }
  420. @media only screen and (min-width: 64.0625em) {
  421. .node-thematique .content aside.right {
  422. display: inline-block;
  423. vertical-align: top;
  424. width: 30.5%;
  425. margin-top: 0; } }
  426. @media only screen and (min-width: 64.0625em) {
  427. .node-thematique .content aside.right .field-name-field-eclairages {
  428. padding-left: 1em; } }
  429. .node-thematique .content aside.right .field-name-field-eclairages .field-items {
  430. display: -ms-flexbox;
  431. display: flex;
  432. -ms-flex-flow: row wrap;
  433. flex-flow: row wrap;
  434. -ms-flex-pack: start;
  435. justify-content: flex-start; }
  436. @media only screen and (min-width: 64.0625em) {
  437. .node-thematique .content aside.right .field-name-field-eclairages .field-items {
  438. display: block; } }
  439. .node-thematique .content aside.right .field-name-field-eclairages .field-items > .field-item {
  440. display: block;
  441. background-color: #fff;
  442. width: 33%; }
  443. @media only screen and (min-width: 64.0625em) {
  444. .node-thematique .content aside.right .field-name-field-eclairages .field-items > .field-item {
  445. width: auto; }
  446. .node-thematique .content aside.right .field-name-field-eclairages .field-items > .field-item:not(:last-child) {
  447. padding-bottom: 1.2em; } }
  448. .node-thematique .content aside.right .node-documentair {
  449. background-color: #fff; }
  450. .node-thematique .content aside.right .node-documentair .content {
  451. position: relative; }
  452. .node-thematique .content aside.right .node-documentair .content .group-txt {
  453. cursor: pointer;
  454. pointer-events: none;
  455. box-sizing: border-box;
  456. position: absolute;
  457. z-index: 2;
  458. overflow: hidden;
  459. top: 0;
  460. left: 0;
  461. width: 90%;
  462. height: 80%;
  463. margin: 5px; }
  464. @media only screen and (min-width: 64.0625em) {
  465. .node-thematique .content aside.right .node-documentair .content .group-txt {
  466. margin: 15px; } }
  467. .node-thematique .content aside.right .node-documentair .content .group-txt .field-name-field-doc {
  468. font-size: 0.7em;
  469. background-color: rgba(255, 255, 255, 0.9);
  470. font-weight: 600;
  471. padding: 0.2em 0.4em;
  472. display: inline-block;
  473. z-index: 5;
  474. transition: background-color 0.3s ease-in-out; }
  475. @media only screen and (min-width: 64.0625em) {
  476. .node-thematique .content aside.right .node-documentair .content .group-txt .field-name-field-doc {
  477. font-size: 1em; } }
  478. .node-thematique .content aside.right .node-documentair .content .group-txt .field-name-title-field {
  479. position: absolute;
  480. z-index: -1;
  481. top: 0;
  482. left: 0;
  483. width: 100%;
  484. font-size: 1.5em;
  485. font-weight: 500;
  486. padding: 30px 7px 10px;
  487. background-color: rgba(255, 255, 255, 0.9);
  488. opacity: 0;
  489. transition: opacity 0.3s ease-in-out; }
  490. .node-thematique .content aside.right .node-documentair .content .group-video img {
  491. width: 100%;
  492. height: auto; }
  493. .node-thematique .content aside.right .node-documentair .content .group-video a {
  494. display: block;
  495. line-height: 0; }
  496. @media only screen and (min-width: 64.0625em) {
  497. .node-thematique .content aside.right .node-documentair:not(.en_attente):hover .group-txt .field-name-field-doc {
  498. background-color: transparent; }
  499. .node-thematique .content aside.right .node-documentair:not(.en_attente):hover .group-txt .field-name-title-field {
  500. opacity: 1; } }
  501. .node-thematique .content aside.right .node-documentair.en_attente > .content {
  502. position: relative; }
  503. .node-thematique .content aside.right .node-documentair.en_attente > .content::before {
  504. position: absolute;
  505. top: 0;
  506. left: 0;
  507. width: 100%;
  508. height: 100%;
  509. content: " ";
  510. z-index: 10;
  511. background-color: #fff;
  512. opacity: 0.8; }
  513. .node-thematique .content aside.bottom {
  514. padding-top: 1.2em; }
  515. @media only screen and (min-width: 64.0625em) {
  516. .node-thematique .content aside.bottom {
  517. padding-top: 0.6em; } }
  518. .node-thematique .content aside.bottom .field-name-field-episodes .field-label {
  519. font-size: 0.7em;
  520. background-color: rgba(255, 255, 255, 0.9);
  521. font-weight: 600;
  522. padding: 0.2em 0.4em;
  523. display: inline-block;
  524. margin-bottom: 0.3em; }
  525. @media only screen and (min-width: 64.0625em) {
  526. .node-thematique .content aside.bottom .field-name-field-episodes .field-label {
  527. font-size: 1em; } }
  528. .node-thematique .content aside.bottom .field-name-field-episodes > .field-items {
  529. display: -ms-flexbox;
  530. display: flex;
  531. -ms-flex-flow: row wrap;
  532. flex-flow: row wrap;
  533. -ms-flex-pack: start;
  534. justify-content: flex-start; }
  535. @media only screen and (min-width: 64.0625em) {
  536. .node-thematique .content aside.bottom .field-name-field-episodes > .field-items {
  537. -ms-flex-flow: row nowrap;
  538. flex-flow: row nowrap;
  539. -ms-flex-pack: justify;
  540. justify-content: space-between; } }
  541. .node-thematique .content aside.bottom .field-name-field-episodes > .field-items > .field-item {
  542. display: block;
  543. background-color: #fff;
  544. width: 50%; }
  545. @media only screen and (min-width: 64.0625em) {
  546. .node-thematique .content aside.bottom .field-name-field-episodes > .field-items > .field-item {
  547. width: 19%; } }
  548. .node-thematique .content aside.bottom .field-name-field-episodes > .field-items > .field-item .node-episode .content {
  549. position: relative; }
  550. .node-thematique .content aside.bottom .field-name-field-episodes > .field-items > .field-item .node-episode .content .group-txt {
  551. cursor: pointer;
  552. pointer-events: none;
  553. box-sizing: border-box;
  554. position: absolute;
  555. z-index: 2;
  556. overflow: hidden;
  557. top: 0;
  558. left: 0;
  559. width: 90%;
  560. height: 80%;
  561. margin: 5%;
  562. padding: 5%;
  563. background-color: rgba(255, 255, 255, 0.9);
  564. opacity: 1;
  565. transition: opacity,background-color 0.3s ease-in-out;
  566. z-index: 11; }
  567. .node-thematique .content aside.bottom .field-name-field-episodes > .field-items > .field-item .node-episode .content .group-txt .field-name-title-field {
  568. font-size: 3em;
  569. font-weight: 300;
  570. line-height: 1;
  571. font-style: italic;
  572. text-align: center; }
  573. @media only screen and (min-width: 64.0625em) {
  574. .node-thematique .content aside.bottom .field-name-field-episodes > .field-items > .field-item .node-episode .content .group-txt .field-name-title-field {
  575. font-size: 4em; } }
  576. .node-thematique .content aside.bottom .field-name-field-episodes > .field-items > .field-item .node-episode .content .group-video img {
  577. width: 100%;
  578. height: auto; }
  579. .node-thematique .content aside.bottom .field-name-field-episodes > .field-items > .field-item .node-episode .content .group-video a {
  580. display: block;
  581. line-height: 0; }
  582. .node-thematique .content aside.bottom .field-name-field-episodes > .field-items > .field-item .node-episode:not(.en_attente):hover .content .group-txt {
  583. opacity: 0.9;
  584. background-color: rgba(255, 255, 255, 0.3); }
  585. .node-thematique .content aside.bottom .field-name-field-episodes > .field-items > .field-item .node-episode:not(.en_attente):hover .content .group-txt .field-name-title-field {
  586. font-weight: 500; }
  587. .node-thematique .content aside.bottom .field-name-field-episodes > .field-items > .field-item .node-episode.en_attente > .content {
  588. position: relative; }
  589. .node-thematique .content aside.bottom .field-name-field-episodes > .field-items > .field-item .node-episode.en_attente > .content::before {
  590. position: absolute;
  591. top: 0;
  592. left: 0;
  593. width: 100%;
  594. height: 100%;
  595. content: " ";
  596. z-index: 10;
  597. background-color: #fff;
  598. opacity: 0.8; }
  599. .node-thematique .content aside.bottom .field-name-field-episodes > .field-items > .field-item .node-episode.en_attente > .content .field-name-title-field {
  600. font-size: 2em; }
  601. @media only screen and (min-width: 64.0625em) {
  602. .node-thematique .content aside.bottom .field-name-field-episodes > .field-items > .field-item .node-episode.en_attente > .content .field-name-title-field {
  603. font-size: 3em; } }
  604. .node-thematique .content aside.bottom .field-name-field-episodes > .field-items > .field-item .node-episode.en_attente > .content .field-name-title-field span.date {
  605. display: block;
  606. font-size: 0.3em;
  607. font-weight: 500;
  608. font-style: normal;
  609. padding-top: 0.3em; }
  610. #DOMWindow .embedded-video, #DOMWindow .player, #DOMWindow iframe {
  611. width: 100%;
  612. height: 100%; }
  613. .page-title {
  614. font-size: 4em;
  615. font-weight: 400;
  616. color: #20c498;
  617. text-transform: capitalize;
  618. text-indent: -0.09em;
  619. margin: 1em 0 0; }
  620. body.node-type-page h2 {
  621. font-size: 1.5em;
  622. font-weight: 400; }
  623. body.node-type-page h3 {
  624. font-size: 2em;
  625. font-weight: 300;
  626. margin: 1em 0 0; }
  627. body.node-type-page p {
  628. line-height: 1.3; }
  629. body.node-type-page a {
  630. color: #20c498; }
  631. #block-menu-menu-footer-menu {
  632. padding: 2em 0; }
  633. #block-menu-menu-footer-menu ul {
  634. margin: 0;
  635. padding: 0;
  636. text-align: center; }
  637. #block-menu-menu-footer-menu li {
  638. display: inline-block;
  639. list-style: none; }
  640. #block-menu-menu-footer-menu a {
  641. text-decoration: none;
  642. color: #20c498;
  643. font-size: 1.4em;
  644. font-weight: 400; }
  645. #block-menu-menu-footer-menu a:hover {
  646. font-weight: 500; }
  647. .region-footer-bottom {
  648. text-align: center; }
  649. .region-footer-bottom .block {
  650. display: inline-block;
  651. font-size: 0.7em;
  652. margin: 2em 0; }
  653. .region-footer-bottom .block a {
  654. color: inherit; }
  655. #content {
  656. padding: 1em; }
  657. .mceContentBody div {
  658. border: 1px dashed #D4D4D4; }
  659. .mceContentBody p:after, .mceContentBody ul:after {
  660. content: "¬";
  661. color: red; }
  662. .mceContentBody h1:before, .mceContentBody h2:before, .mceContentBody h3:before, .mceContentBody h4:before, .mceContentBody h5:before, .mceContentBody h6:before {
  663. color: blue;
  664. font-weight: normal;
  665. font-size: 10px;
  666. vertical-align: super; }
  667. .mceContentBody h1:before {
  668. content: "h1 "; }
  669. .mceContentBody h2:before {
  670. content: "h2 "; }
  671. .mceContentBody h3:before {
  672. content: "h3 "; }
  673. .mceContentBody h4:before {
  674. content: "h4 "; }
  675. .mceContentBody h5:before {
  676. content: "h5 "; }
  677. .mceContentBody h6:before {
  678. content: "h6 "; }
  679. .mceContentBody p {
  680. border: 1px dashed #848484; }
  681. .mceContentBody div {
  682. border: 1px solid #1A1A1A; }
  683. .mceContentBody h2 {
  684. font-size: 1.5em;
  685. font-weight: 400; }
  686. .mceContentBody h3 {
  687. font-size: 2em;
  688. font-weight: 300;
  689. margin: 1em 0 0; }
  690. .mceContentBody p {
  691. line-height: 1.3; }
  692. .mceContentBody a {
  693. color: #20c498; }
  694. /** Messages. */
  695. div.messages {
  696. padding: 9px;
  697. margin: 0.5em 0 0;
  698. color: #036;
  699. background: #bdf;
  700. border: 1px solid #ace;
  701. border-radius: 5px; }
  702. div.warning {
  703. color: #840;
  704. background: #fe6;
  705. border-color: #ed5; }
  706. div.error {
  707. color: #fff;
  708. background: #e63;
  709. border-color: #d52; }
  710. div.error p.error {
  711. color: #333; }
  712. div.status {
  713. color: #360;
  714. background: #cf8;
  715. border-color: #be7; }
  716. /** Tab navigation */
  717. ul.primary, .views-admin-links ul {
  718. font: 13px/1.231 sans-serif;
  719. *font-size: small;
  720. border-collapse: collapse;
  721. padding: 0 0 0 1em;
  722. /* LTR */
  723. white-space: nowrap;
  724. list-style: none;
  725. margin: 5px;
  726. height: auto;
  727. line-height: normal; }
  728. ul.primary li, .views-admin-links li {
  729. display: inline; }
  730. ul.primary li a, .views-admin-links li a {
  731. border-width: 1px;
  732. border-style: solid solid none solid;
  733. height: auto;
  734. margin-right: 0.5em;
  735. /* LTR */
  736. padding: 0 1em;
  737. text-decoration: none;
  738. border-top-left-radius: 5px;
  739. border-top-right-radius: 5px; }
  740. /** Form */
  741. #node-form .form-region-main {
  742. border-right: 1px solid #BFBFBF;
  743. padding-right: 10px;
  744. width: 68%; }
  745. #node-form .form-region-main label {
  746. float: left;
  747. min-width: 25%; }
  748. #node-form .form-region-main input.form-text {
  749. width: 40%; }
  750. #node-form .form-region-right {
  751. padding-left: 5px; }
  752. #node-form .form-region-right label {
  753. float: left;
  754. min-width: 35%; }
  755. #node-form .form-region-right input.form-text {
  756. width: 60%; }
  757. #node-form .form-region-main label.option, #node-form .form-region-right label.option {
  758. float: none; }
  759. form:not(#views-ui-config-item-form) .form-item {
  760. position: relative;
  761. /* padding:9px;*/ }
  762. form:not(#views-ui-config-item-form) .form-item .description {
  763. position: absolute;
  764. bottom: 140%;
  765. /* right:-15px;*/
  766. z-index: 5;
  767. left: 50%;
  768. color: #1A1A1A;
  769. line-height: 1.1;
  770. background: url(../images/popup.png) 50% 100% no-repeat;
  771. width: 240px;
  772. margin: 0px 0px -15px;
  773. padding: 9px 10px 20px;
  774. display: none;
  775. border-top: 1px solid #9F9F9F; }
  776. form:not(#views-ui-config-item-form) .form-item:hover {
  777. z-index: 1;
  778. height: auto;
  779. /* Fix for flicker in IE7 */ }
  780. form:not(#views-ui-config-item-form) .form-item:hover > .description {
  781. display: block; }
  782. fieldset {
  783. border: 1px solid #D4D4D4;
  784. padding: 10px;
  785. margin-bottom: 1em;
  786. border-radius: 5px; }
  787. fieldset legend {
  788. font-size: 1.6em; }
  789. input.form-text {
  790. max-width: 95%; }
  791. /** TABLE */
  792. table {
  793. width: 100%;
  794. border-radius: 5px; }
  795. table thead th {
  796. background-color: #CCC;
  797. padding: 0.5em 1em;
  798. text-align: left; }
  799. table tbody tr.even, table tbody tr.odd {
  800. border-bottom: 0 solid #CCCCCC;
  801. padding: 0.1em 0.6em; }
  802. table tbody tr.even {
  803. background-color: #EEE; }
  804. table tbody tr.odd {
  805. background-color: #E5E5E5; }
  806. table tbody td {
  807. padding: 0.5em 1em;
  808. text-align: left; }
  809. td.active {
  810. background-color: transparent; }
  811. #tasks .tabs {
  812. border: none;
  813. padding: 0; }
  814. #tasks .tabs a {
  815. border: none;
  816. border-radius: 3px;
  817. background-color: #eee;
  818. padding: 0.4em;
  819. color: #000;
  820. margin: 0 1em 0 0; }
  821. #tasks .tabs a.active {
  822. background-color: #999; }