styles.css 27 KB

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