/** * Primary Drupal Styles * Author: Bachir Soussi Chiadmi */ /* between 0 & 640px */ /* between 640px & 1000px */ /* between 1001px & 1025px */ /* between 1026px & 1920px */ /* between 1920px & infinity */ body { font-size: 16px; font-family: "aileron", Arial, "MS Trebuchet", sans-serif; } h1 { font-size: 1.6em; } h2 { font-size: 1.5em; } h3 { font-size: 1.4em; } h4 { font-size: 1.3em; } h5 { font-size: 1.2em; } h6 { font-size: 1.1em; } input { font-family: Arial, "MS Trebuchet", sans-serif; font-size: 0.8em; } /** layout */ .footer-block .region, .header-block { display: inline-block; vertical-align: top; } #header, #main, #footer { padding: 0; } #header { width: 100%; z-index: 20; background-color: rgba(255, 255, 255, 0.95); background-image: url(../../images/fond-trame-logo-lite.png); background-repeat: no-repeat; background-position: center top; background-size: contain; max-height: 200px; } @media only screen and (min-width: 62.5625em) { #header { position: fixed; } } @media only screen and (min-width: 62.5625em) { #header { max-height: 400px; } } #header hgroup.logo { width: 95%; margin: 0 auto; padding: 1em 0 0; } @media only screen and (min-width: 62.5625em) { #header hgroup.logo { max-width: 1000px; } } #header h1 { margin: 0; } #header h1 a { display: block; height: 120px; background-image: url(../../images/logo.png); background-size: contain; background-position: center; background-repeat: no-repeat; text-indent: -2000px; overflow: hidden; margin: 0; } @media only screen and (min-width: 62.5625em) { #header h1 a { height: 320px; } } #header h2 { text-align: center; color: #20c498; font-size: 1em; font-weight: 500; } @media only screen and (min-width: 62.5625em) { #header h2 { font-size: 2em; } } @media only screen and (min-width: 62.5625em) { #main { padding-top: 400px; } } #main > .region { width: 95%; margin: 0 auto; } @media only screen and (min-width: 62.5625em) { #main > .region { max-width: 1000px; } } #node-63 { padding: 1em 0; } #node-63 .content section { display: inline; } #node-63 .content p { margin: 0; } #node-63 ul.links { text-align: right; margin: 0; padding: 0; } #node-63 ul.links li { margin: 0; padding: 0; display: inline-block; } #node-63 ul.links a { color: inherit; text-decoration: none; font-weight: 500; } #thematique-anchor-links { display: none; padding: 1em 0; } @media only screen and (min-width: 62.5625em) { #thematique-anchor-links { display: block; } } #thematique-anchor-links ul { display: -ms-flexbox; display: flex; -ms-flex-flow: row nowrap; flex-flow: row nowrap; -ms-flex-pack: justify; justify-content: space-between; padding: 0; margin: 0; } #thematique-anchor-links ul li { max-width: 7em; list-style: none; padding: 0; margin: 0; } #thematique-anchor-links ul li a { text-decoration: none; font-weight: 600; display: block; min-height: 3em; background-position: center; background-repeat: no-repeat; background-size: contain; } #thematique-anchor-links ul li a span { display: block; } #thematique-anchor-links ul li a.node-32 { background-image: url(../../images/menu-fond-theme-0-flat.jpg); color: #2f82ff; } #thematique-anchor-links ul li a.node-32.en_attente { color: #aaa; background-image: url(../../images/menu-fond-theme-0-flat-nb.jpg); cursor: default; } #thematique-anchor-links ul li a.node-14 { background-image: url(../../images/menu-fond-theme-1-flat.jpg); color: #ff0000; } #thematique-anchor-links ul li a.node-14.en_attente { color: #aaa; background-image: url(../../images/menu-fond-theme-1-flat-nb.jpg); cursor: default; } #thematique-anchor-links ul li a.node-38 { background-image: url(../../images/menu-fond-theme-2-flat.jpg); color: #88aa00; } #thematique-anchor-links ul li a.node-38.en_attente { color: #aaa; background-image: url(../../images/menu-fond-theme-2-flat-nb.jpg); cursor: default; } #thematique-anchor-links ul li a.node-3 { background-image: url(../../images/menu-fond-theme-3-flat.jpg); color: #ff6600; } #thematique-anchor-links ul li a.node-3.en_attente { color: #aaa; background-image: url(../../images/menu-fond-theme-3-flat-nb.jpg); cursor: default; } #thematique-anchor-links ul li a.node-20 { background-image: url(../../images/menu-fond-theme-4-flat.jpg); color: #ff2ad4; } #thematique-anchor-links ul li a.node-20.en_attente { color: #aaa; background-image: url(../../images/menu-fond-theme-4-flat-nb.jpg); cursor: default; } #thematique-anchor-links ul li a.node-26 { background-image: url(../../images/menu-fond-theme-5-flat.jpg); color: #8800aa; } #thematique-anchor-links ul li a.node-26.en_attente { color: #aaa; background-image: url(../../images/menu-fond-theme-5-flat-nb.jpg); cursor: default; } .node-thematique { min-height: 766px; margin-bottom: 10em; position: relative; } .node-thematique::before { position: absolute; content: " "; z-index: -1; background-position: center; background-repeat: no-repeat; background-size: cover; width: 100%; height: 100%; top: 0; left: 0; } @media only screen and (min-width: 62.5625em) { .node-thematique::before { background-size: contain; width: 110%; height: 110%; top: -5%; left: -5%; } } .node-thematique.node-32::before { background-image: url(../../images/fond-theme-0-flat.png); } .node-thematique.node-32.en_attente::before { background-image: url(../../images/fond-theme-0-flat-nb.jpg); } .node-thematique.node-32.en_attente > h2, .node-thematique.node-32.en_attente .group-video .field-name-field-description h3, .node-thematique.node-32.en_attente .group-description .field-name-field-ecouter, .node-thematique.node-32.en_attente .node-documentair .field-name-field-doc, .node-thematique.node-32.en_attente .node-documentair .field-name-title-field, .node-thematique.node-32.en_attente .field-name-field-episodes .field-label, .node-thematique.node-32.en_attente .node-episode .field-name-title-field { color: #aaa; } .node-thematique.node-32:not(.en_attente) > h2, .node-thematique.node-32:not(.en_attente) .group-video .field-name-field-description h3, .node-thematique.node-32:not(.en_attente) .group-description .field-name-field-ecouter, .node-thematique.node-32:not(.en_attente) .node-documentair .field-name-field-doc, .node-thematique.node-32:not(.en_attente) .node-documentair .field-name-title-field, .node-thematique.node-32:not(.en_attente) .field-name-field-episodes .field-label, .node-thematique.node-32:not(.en_attente) .node-episode .field-name-title-field { color: #2f82ff; } .node-thematique.node-14::before { background-image: url(../../images/fond-theme-1-flat.png); } .node-thematique.node-14.en_attente::before { background-image: url(../../images/fond-theme-1-flat-nb.jpg); } .node-thematique.node-14.en_attente > h2, .node-thematique.node-14.en_attente .group-video .field-name-field-description h3, .node-thematique.node-14.en_attente .group-description .field-name-field-ecouter, .node-thematique.node-14.en_attente .node-documentair .field-name-field-doc, .node-thematique.node-14.en_attente .node-documentair .field-name-title-field, .node-thematique.node-14.en_attente .field-name-field-episodes .field-label, .node-thematique.node-14.en_attente .node-episode .field-name-title-field { color: #aaa; } .node-thematique.node-14:not(.en_attente) > h2, .node-thematique.node-14:not(.en_attente) .group-video .field-name-field-description h3, .node-thematique.node-14:not(.en_attente) .group-description .field-name-field-ecouter, .node-thematique.node-14:not(.en_attente) .node-documentair .field-name-field-doc, .node-thematique.node-14:not(.en_attente) .node-documentair .field-name-title-field, .node-thematique.node-14:not(.en_attente) .field-name-field-episodes .field-label, .node-thematique.node-14:not(.en_attente) .node-episode .field-name-title-field { color: #ff0000; } .node-thematique.node-38::before { background-image: url(../../images/fond-theme-2-flat.png); } .node-thematique.node-38.en_attente::before { background-image: url(../../images/fond-theme-2-flat-nb.jpg); } .node-thematique.node-38.en_attente > h2, .node-thematique.node-38.en_attente .group-video .field-name-field-description h3, .node-thematique.node-38.en_attente .group-description .field-name-field-ecouter, .node-thematique.node-38.en_attente .node-documentair .field-name-field-doc, .node-thematique.node-38.en_attente .node-documentair .field-name-title-field, .node-thematique.node-38.en_attente .field-name-field-episodes .field-label, .node-thematique.node-38.en_attente .node-episode .field-name-title-field { color: #aaa; } .node-thematique.node-38:not(.en_attente) > h2, .node-thematique.node-38:not(.en_attente) .group-video .field-name-field-description h3, .node-thematique.node-38:not(.en_attente) .group-description .field-name-field-ecouter, .node-thematique.node-38:not(.en_attente) .node-documentair .field-name-field-doc, .node-thematique.node-38:not(.en_attente) .node-documentair .field-name-title-field, .node-thematique.node-38:not(.en_attente) .field-name-field-episodes .field-label, .node-thematique.node-38:not(.en_attente) .node-episode .field-name-title-field { color: #88aa00; } .node-thematique.node-3::before { background-image: url(../../images/fond-theme-3-flat.png); } .node-thematique.node-3.en_attente::before { background-image: url(../../images/fond-theme-3-flat-nb.jpg); } .node-thematique.node-3.en_attente > h2, .node-thematique.node-3.en_attente .group-video .field-name-field-description h3, .node-thematique.node-3.en_attente .group-description .field-name-field-ecouter, .node-thematique.node-3.en_attente .node-documentair .field-name-field-doc, .node-thematique.node-3.en_attente .node-documentair .field-name-title-field, .node-thematique.node-3.en_attente .field-name-field-episodes .field-label, .node-thematique.node-3.en_attente .node-episode .field-name-title-field { color: #aaa; } .node-thematique.node-3:not(.en_attente) > h2, .node-thematique.node-3:not(.en_attente) .group-video .field-name-field-description h3, .node-thematique.node-3:not(.en_attente) .group-description .field-name-field-ecouter, .node-thematique.node-3:not(.en_attente) .node-documentair .field-name-field-doc, .node-thematique.node-3:not(.en_attente) .node-documentair .field-name-title-field, .node-thematique.node-3:not(.en_attente) .field-name-field-episodes .field-label, .node-thematique.node-3:not(.en_attente) .node-episode .field-name-title-field { color: #ff6600; } .node-thematique.node-20::before { background-image: url(../../images/fond-theme-4-flat.png); } .node-thematique.node-20.en_attente::before { background-image: url(../../images/fond-theme-4-flat-nb.jpg); } .node-thematique.node-20.en_attente > h2, .node-thematique.node-20.en_attente .group-video .field-name-field-description h3, .node-thematique.node-20.en_attente .group-description .field-name-field-ecouter, .node-thematique.node-20.en_attente .node-documentair .field-name-field-doc, .node-thematique.node-20.en_attente .node-documentair .field-name-title-field, .node-thematique.node-20.en_attente .field-name-field-episodes .field-label, .node-thematique.node-20.en_attente .node-episode .field-name-title-field { color: #aaa; } .node-thematique.node-20:not(.en_attente) > h2, .node-thematique.node-20:not(.en_attente) .group-video .field-name-field-description h3, .node-thematique.node-20:not(.en_attente) .group-description .field-name-field-ecouter, .node-thematique.node-20:not(.en_attente) .node-documentair .field-name-field-doc, .node-thematique.node-20:not(.en_attente) .node-documentair .field-name-title-field, .node-thematique.node-20:not(.en_attente) .field-name-field-episodes .field-label, .node-thematique.node-20:not(.en_attente) .node-episode .field-name-title-field { color: #ff2ad4; } .node-thematique.node-26::before { background-image: url(../../images/fond-theme-5-flat.png); } .node-thematique.node-26.en_attente::before { background-image: url(../../images/fond-theme-5-flat-nb.jpg); } .node-thematique.node-26.en_attente > h2, .node-thematique.node-26.en_attente .group-video .field-name-field-description h3, .node-thematique.node-26.en_attente .group-description .field-name-field-ecouter, .node-thematique.node-26.en_attente .node-documentair .field-name-field-doc, .node-thematique.node-26.en_attente .node-documentair .field-name-title-field, .node-thematique.node-26.en_attente .field-name-field-episodes .field-label, .node-thematique.node-26.en_attente .node-episode .field-name-title-field { color: #aaa; } .node-thematique.node-26:not(.en_attente) > h2, .node-thematique.node-26:not(.en_attente) .group-video .field-name-field-description h3, .node-thematique.node-26:not(.en_attente) .group-description .field-name-field-ecouter, .node-thematique.node-26:not(.en_attente) .node-documentair .field-name-field-doc, .node-thematique.node-26:not(.en_attente) .node-documentair .field-name-title-field, .node-thematique.node-26:not(.en_attente) .field-name-field-episodes .field-label, .node-thematique.node-26:not(.en_attente) .node-episode .field-name-title-field { color: #8800aa; } .node-thematique > h2 { font-size: 3em; font-weight: 400; position: relative; margin: 2em 0 0; padding: 0 2em 0 0; } @media only screen and (min-width: 62.5625em) { .node-thematique > h2 { padding: 0; } } .node-thematique > h2 span { position: absolute; top: -170px; } .node-thematique .content { letter-spacing: -0.25em; } .node-thematique .content > * { letter-spacing: normal; } .node-thematique .content article.main { overflow: hidden; } @media only screen and (min-width: 62.5625em) { .node-thematique .content article.main { display: inline-block; vertical-align: top; width: 69.5%; } } .node-thematique .content article.main .field-name-body { position: relative; z-index: 3; } .node-thematique .content article.main .field-name-body > * { padding: 0 1em 0 0; } .node-thematique .content article.main .field-name-body .summary { position: relative; background-color: rgba(255, 255, 255, 0.7); transition: background-color 0.5 ease-in-out; } @media only screen and (min-width: 62.5625em) { .node-thematique .content article.main .field-name-body .summary { height: 7em; overflow: hidden; } } .node-thematique .content article.main .field-name-body .summary p { font-size: 1.1em; padding: 0.5em 0.5em 0.5em 0; margin: 0; font-weight: 500; } .node-thematique .content article.main .field-name-body .value { display: none; position: absolute; height: 1px; margin-bottom: 0; transition: height 0.5s ease-in-out; background-color: #fff; overflow: hidden; } @media only screen and (min-width: 62.5625em) { .node-thematique .content article.main .field-name-body .value { display: block; } } .node-thematique .content article.main .field-name-body .value p { font-size: 1em; padding: 1em 1em 0 1.5em; line-height: 1.3; margin: 0; background-color: #fff; } @media only screen and (min-width: 62.5625em) { .node-thematique .content article.main .field-name-body:hover .summary { background-color: #fff; } .node-thematique .content article.main .field-name-body:hover .value { height: 700px; } } .node-thematique .content article.main .group-video { position: relative; } .node-thematique .content article.main .group-video .field-name-field-emvideo img { max-width: 100%; height: auto; } .node-thematique .content article.main .group-video .field-name-field-emvideo a { display: block; line-height: 0; } .node-thematique .content article.main .group-video .group-description { cursor: pointer; pointer-events: none; position: absolute; z-index: 2; top: 0; left: 0; width: 100%; height: 100%; } .node-thematique .content article.main .group-video .group-description .field-name-field-ecouter { font-size: 1em; font-weight: 600; padding: 0.2em 0.4em; background-color: rgba(255, 255, 255, 0.9); display: inline-block; margin: 15px; } .node-thematique .content article.main .group-video .group-description .field-name-field-description { position: absolute; top: 0; left: 0; box-sizing: border-box; width: 80%; height: 70%; margin: 10%; padding: 5%; opacity: 0; background-color: rgba(255, 255, 255, 0.9); transition: opacity 0.3s ease-in-out; } .node-thematique .content article.main .group-video .group-description .field-name-field-description h3 { font-weight: 500; font-size: 2em; margin: 0; } .node-thematique .content article.main .group-video:hover .group-description .field-name-field-description { opacity: 1; } .node-thematique .content aside.right { margin-top: 1.2em; } @media only screen and (min-width: 62.5625em) { .node-thematique .content aside.right { display: inline-block; vertical-align: top; width: 30.5%; margin-top: 0; } } @media only screen and (min-width: 62.5625em) { .node-thematique .content aside.right .field-name-field-eclairages { padding-left: 1em; } } .node-thematique .content aside.right .field-name-field-eclairages .field-item:not(:last-child) { padding-bottom: 1.2em; } .node-thematique .content aside.right .node-documentair { min-height: 150px; background-color: #fff; } .node-thematique .content aside.right .node-documentair .content { position: relative; } .node-thematique .content aside.right .node-documentair .content .group-txt { cursor: pointer; pointer-events: none; box-sizing: border-box; position: absolute; z-index: 2; overflow: hidden; top: 0; left: 0; width: 90%; height: 80%; margin: 15px; } .node-thematique .content aside.right .node-documentair .content .group-txt .field-name-field-doc { font-size: 1em; font-weight: 600; padding: 0.2em 0.4em; background-color: rgba(255, 255, 255, 0.9); display: inline-block; z-index: 5; transition: background-color 0.3s ease-in-out; } .node-thematique .content aside.right .node-documentair .content .group-txt .field-name-title-field { position: absolute; z-index: -1; top: 0; left: 0; width: 100%; font-size: 1.5em; font-weight: 500; padding: 30px 7px 10px; background-color: rgba(255, 255, 255, 0.9); opacity: 0; transition: opacity 0.3s ease-in-out; } .node-thematique .content aside.right .node-documentair .content .group-video img { width: 100%; height: auto; } .node-thematique .content aside.right .node-documentair .content .group-video a { display: block; line-height: 0; } .node-thematique .content aside.right .node-documentair:not(.en_attente):hover .group-txt .field-name-field-doc { background-color: transparent; } .node-thematique .content aside.right .node-documentair:not(.en_attente):hover .group-txt .field-name-title-field { opacity: 1; } .node-thematique .content aside.right .node-documentair.en_attente > .content { position: relative; } .node-thematique .content aside.right .node-documentair.en_attente > .content::before { position: absolute; top: 0; left: 0; width: 100%; height: 100%; content: " "; z-index: 10; background-color: #fff; opacity: 0.8; } .node-thematique .content aside.bottom { padding-top: 1.2em; } @media only screen and (min-width: 62.5625em) { .node-thematique .content aside.bottom { padding-top: 0.6em; } } .node-thematique .content aside.bottom .field-name-field-episodes .field-label { font-size: 1em; font-weight: 600; padding: 0.2em 0.4em; background-color: rgba(255, 255, 255, 0.9); display: inline-block; margin-bottom: 0.3em; } @media only screen and (min-width: 62.5625em) { .node-thematique .content aside.bottom .field-name-field-episodes > .field-items { display: -ms-flexbox; display: flex; -ms-flex-flow: row nowrap; flex-flow: row nowrap; -ms-flex-pack: justify; justify-content: space-between; } } .node-thematique .content aside.bottom .field-name-field-episodes > .field-items > .field-item { display: block; background-color: #fff; } @media only screen and (min-width: 62.5625em) { .node-thematique .content aside.bottom .field-name-field-episodes > .field-items > .field-item { width: 19%; } } .node-thematique .content aside.bottom .field-name-field-episodes > .field-items > .field-item .node-episode .content { position: relative; } .node-thematique .content aside.bottom .field-name-field-episodes > .field-items > .field-item .node-episode .content .group-txt { cursor: pointer; pointer-events: none; box-sizing: border-box; position: absolute; z-index: 2; overflow: hidden; top: 0; left: 0; width: 90%; height: 80%; margin: 5%; padding: 5%; background-color: rgba(255, 255, 255, 0.9); opacity: 1; transition: opacity,background-color 0.3s ease-in-out; } .node-thematique .content aside.bottom .field-name-field-episodes > .field-items > .field-item .node-episode .content .group-txt .field-name-title-field { font-size: 4em; font-weight: 800; font-style: italic; text-align: center; } .node-thematique .content aside.bottom .field-name-field-episodes > .field-items > .field-item .node-episode .content .group-video img { width: 100%; height: auto; } .node-thematique .content aside.bottom .field-name-field-episodes > .field-items > .field-item .node-episode .content .group-video a { display: block; line-height: 0; } .node-thematique .content aside.bottom .field-name-field-episodes > .field-items > .field-item .node-episode:not(.en_attente):hover .content .group-txt { opacity: 0.9; background-color: rgba(255, 255, 255, 0.3); } .node-thematique .content aside.bottom .field-name-field-episodes > .field-items > .field-item .node-episode.en_attente > .content { position: relative; } .node-thematique .content aside.bottom .field-name-field-episodes > .field-items > .field-item .node-episode.en_attente > .content::before { position: absolute; top: 0; left: 0; width: 100%; height: 100%; content: " "; z-index: 10; background-color: #fff; opacity: 0.8; } .node-thematique.en_attente .content > .main { position: relative; } .node-thematique.en_attente .content > .main::before { position: absolute; top: 0; left: 0; width: 100%; height: 100%; content: " "; z-index: 10; background-color: #fff; opacity: 0.8; } #DOMWindow .embedded-video, #DOMWindow .player, #DOMWindow iframe { width: 100%; height: 100%; } .page-title { font-size: 3em; font-weight: 400; text-transform: capitalize; } #block-menu-menu-footer-menu { padding: 2em 0; } #block-menu-menu-footer-menu ul { margin: 0; padding: 0; text-align: center; } #block-menu-menu-footer-menu li { display: inline-block; list-style: none; } #block-menu-menu-footer-menu a { text-decoration: none; color: inherit; } .region-footer-bottom { text-align: center; } .region-footer-bottom .block { display: inline-block; font-size: 0.7em; margin: 2em 0; } #content { padding: 1em; } /** Messages. */ div.messages { padding: 9px; margin: 0.5em 0 0; color: #036; background: #bdf; border: 1px solid #ace; border-radius: 5px; } div.warning { color: #840; background: #fe6; border-color: #ed5; } div.error { color: #fff; background: #e63; border-color: #d52; } div.error p.error { color: #333; } div.status { color: #360; background: #cf8; border-color: #be7; } /** Tab navigation */ ul.primary, .views-admin-links ul { font: 13px/1.231 sans-serif; *font-size: small; border-collapse: collapse; padding: 0 0 0 1em; /* LTR */ white-space: nowrap; list-style: none; margin: 5px; height: auto; line-height: normal; } ul.primary li, .views-admin-links li { display: inline; } ul.primary li a, .views-admin-links li a { border-width: 1px; border-style: solid solid none solid; height: auto; margin-right: 0.5em; /* LTR */ padding: 0 1em; text-decoration: none; border-top-left-radius: 5px; border-top-right-radius: 5px; } /** Form */ #node-form .form-region-main { border-right: 1px solid #BFBFBF; padding-right: 10px; width: 68%; } #node-form .form-region-main label { float: left; min-width: 25%; } #node-form .form-region-main input.form-text { width: 40%; } #node-form .form-region-right { padding-left: 5px; } #node-form .form-region-right label { float: left; min-width: 35%; } #node-form .form-region-right input.form-text { width: 60%; } #node-form .form-region-main label.option, #node-form .form-region-right label.option { float: none; } form:not(#views-ui-config-item-form) .form-item { position: relative; /* padding:9px;*/ } form:not(#views-ui-config-item-form) .form-item .description { position: absolute; bottom: 140%; /* right:-15px;*/ z-index: 5; left: 50%; color: #1A1A1A; line-height: 1.1; background: url(../images/popup.png) 50% 100% no-repeat; width: 240px; margin: 0px 0px -15px; padding: 9px 10px 20px; display: none; border-top: 1px solid #9F9F9F; } form:not(#views-ui-config-item-form) .form-item:hover { z-index: 1; height: auto; /* Fix for flicker in IE7 */ } form:not(#views-ui-config-item-form) .form-item:hover > .description { display: block; } fieldset { border: 1px solid #D4D4D4; padding: 10px; margin-bottom: 1em; border-radius: 5px; } fieldset legend { font-size: 1.6em; } input.form-text { max-width: 95%; } /** TABLE */ table { width: 100%; border-radius: 5px; } table thead th { background-color: #CCC; padding: 0.5em 1em; text-align: left; } table tbody tr.even, table tbody tr.odd { border-bottom: 0 solid #CCCCCC; padding: 0.1em 0.6em; } table tbody tr.even { background-color: #EEE; } table tbody tr.odd { background-color: #E5E5E5; } table tbody td { padding: 0.5em 1em; text-align: left; } td.active { background-color: transparent; } #tasks .tabs { border: none; padding: 0; } #tasks .tabs a { border: none; border-radius: 3px; background-color: #eee; padding: 0.4em; color: #000; margin: 0 1em 0 0; } #tasks .tabs a.active { background-color: #999; }