styles.css 29 KB

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