styles.css 29 KB

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