/* < blank > */
/* Nicolas Taffin */
/* http://polylogue.com */
/* licence CC: BY-NC-SA */
/****************************************/
/* commons */
/****************************************/
/****************************************/
/* variables */
/****************************************/
/****************************************/
/* fonts */
/****************************************/
.fontNormal {
font-family: Helvetica, Arial, sans-serif;
}
.fontBold {
font-family: Helvetica, Arial, sans-serif;
font-weight: bold;
}
strong {
font-weight: bold;
}
/******************************************************/
/* arrow entities */
/* droite -> ou ou */
/* bas -> ou ou */
/******************************************************/
/****************************************/
/* general */
/****************************************/
body {
color: #050505;
background-color: #e5e5e5;
font-family: Helvetica, Arial, sans-serif;
font-size: 11pt;
line-height: 1.4em;
text-align: center;
}
header,
#header,
#tete,
.header,
.tete {
position: static;
height: 60px;
width: 100%;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
background-color: #ffffff;
box-shadow: 0 0 10px #666666;
}
.header > .content,
.tete > .contenu {
font-size: 0.8em;
line-height: 2em;
position: relative;
}
footer,
#footer,
#pied,
.footer,
.pied {
background-color: #ffffff;
height: 120px;
width: 100%;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
box-shadow: 0 0 10px #666666;
}
.footer > .content,
.pied > .contenu {
text-align: left;
font-size: 0.9em;
padding: 50px 30px 0px 30px;
}
.home .footer > .content,
.home .pied > .contenu {
padding: 85px 30px 0px 30px;
}
#main,
#ventre,
.main,
.ventre {
width: 100%;
min-height: 400px;
/*overflow-x: hidden;*/
height: auto;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}
.main > .content,
.ventre > .contenu {
padding: 0px 0px 0px 0px;
}
/****************************************/
/* sticky footer */
/****************************************/
/*
Sticky Footer by Ryan Fait
http://ryanfait.com/
*/
/* the bottom margin of antiStickyFooter is the negative value of the footer's height */
/* .push must be the same height as .footer */
/* dom must be
*/
html,
body,
.jsbody {
height: 100%;
width: 100%;
}
.antiStickyFooter {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -120px;
}
.footer,
.push {
clear: both;
height: 120px;
position: relative;
}
/****************************************/
/* html default */
/****************************************/
/* tables */
table {
border-collapse: collapse;
/* separate */
margin: 1em auto 1em auto;
font-weight: normal;
font-size: 0.9em;
line-height: 1.45em;
border: none;
}
thead * {
border: none;
font-weight: bold;
font-size: 0.9em;
}
th {
font-family: Helvetica, Arial, sans-serif;
font-weight: bold;
border: none;
padding: 3px;
}
td {
border: 1px solid #d9d7d7;
padding: 0.3em 0.8em;
}
tr td:first-child {
text-align: left;
font-weight: bold;
}
table.striped td {
border: none;
}
td img {
vertical-align: top;
}
caption {
color: #404040;
padding: 1em 0 0.8em 0;
font-weight: bold;
}
table.invisible,
table.invisible th,
table.invisible tr,
table.invisible td {
border: none;
background-color: transparent;
background-image: none;
}
/****************************************/
/* custom */
/****************************************/
a.logo {
display: block;
float: left;
width: 220px;
text-decoration: none;
margin: 0px 0px 0px 0px;
height: 60px;
background: transparent url("/tna/media_sel/images/logo-s.png") no-repeat 50% 50%;
}
/****************************************/
/* siteID card */
/****************************************/
.siteIdCard {
position: relative;
display: block;
width: 100%;
min-height: 100px;
/* max-height: 250px; */
/* min-width: 1210px; */
height: auto;
background: #f2f2f2;
padding: 0em 0em 0em 0em;
color: #404040;
font-size: 0.9em;
/* box-shadow: 0 0 10px @darkBg ; */
}
.siteIdCard .content {
padding: 1em 0em 0em 0em;
}
.siteMeta {
width: 70%;
float: right;
height: auto;
text-align: left;
padding: 0em 0em 2em 0px;
}
body.nopic .siteMeta {
width: 100%;
padding-left: 65px;
}
#metadata {
padding: 0em 20px 0em 40px;
}
/****************************************/
/* timeMachine */
/****************************************/
body.nopic .timeMachine {
display: none;
}
.timeMachine {
width: 30%;
float: left;
min-height: 240px;
height: auto;
position: relative;
}
.timeMachine li {
display: inline;
}
.timeMachine a {
display: block;
width: 200px;
height: 100px;
position: absolute;
right: 0;
top: 0;
background-position: right top;
background-size: contain;
background-repeat: no-repeat;
text-align: left;
font-size: 0.85em;
font-family: Helvetica, Arial, sans-serif;
font-weight: bold;
}
.timeMachine .first a {
right: 0;
top: 5px;
opacity: 0.4;
}
.timeMachine .middle a {
width: 230px;
height: 120px;
right: 12px;
top: 50px;
opacity: 0.75;
font-size: 1.3em;
}
.timeMachine .last a {
width: 250px;
height: 130px;
right: 24px;
top: 100px;
opacity: 0.9;
font-size: 1.6em;
}
.timeMachine a:hover {
opacity: 1;
}
/****************************************/
/* userShortcuts */
/****************************************/
.userShortcuts {
display: block;
width: auto;
float: right;
text-align: right;
padding: 0px 5px 0em 0em;
font-size: 0.95em;
line-height: 60px;
position: relative;
}
.userShortcuts li {
display: inline;
}
.userShortcuts .searchTrigger {
display: none;
}
.userShortcuts .shortcutDesc {
display: none;
float: left;
position: absolute;
top: 1em;
right: 2em;
width: auto;
height: auto;
line-height: 1em;
margin: 0em 1em 0em 0em;
text-align: center;
white-space: nowrap;
background-color: #fef39b;
padding: 1em;
opacity: 0.8;
}
.userShortcuts li:hover .shortcutDesc {
display: block;
}
.userShortcuts .icon {
vertical-align: middle;
display: inline-block;
width: 28px;
height: 28px;
background-size: contain;
}
.fav .icon {
background: transparent url("/tna/media_sel/images/star.png") 0em 0em no-repeat;
background-size: contain;
}
.tweet .icon {
background: transparent url("/tna/media_sel/images/bird.png") 0em 0em no-repeat;
background-size: contain;
opacity: 0.65;
}
.searchTrigger .icon {
background: transparent url("/tna/media_sel/images/magnifying.png") 0em 0em no-repeat;
background-size: contain;
}
.userShortcuts a {
opacity: 0.6;
}
.userShortcuts a:hover {
opacity: 1;
}
/****************************************/
/* loader */
/****************************************/
.loaderContainer {
display: block;
position: absolute;
width: 100%;
height: 100%;
z-index: 0;
}
.loader {
position: absolute;
left: 50%;
top: 60%;
margin-left: -30px;
margin-top: -30px;
height: 60px;
width: 60px;
background: transparent url("/tna/media_sel/images/loader.png") center center no-repeat;
background-size: contain;
-webkit-animation-name: spinning;
-webkit-animation-duration: 900ms;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-moz-animation-name: spinning;
-moz-animation-duration: 900ms;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
-ms-animation-name: spinning;
-ms-animation-duration: 900ms;
-ms-animation-iteration-count: infinite;
-ms-animation-timing-function: linear;
animation-name: spinning;
animation-duration: 900ms;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
body.banner .loader {
top: 45%;
}
@-webkit-keyframes spinning {
from {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
transform: rotate(360deg);
}
to {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
transform: rotate(0deg);
}
}
@-moz-keyframes spinning {
from {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
transform: rotate(360deg);
}
to {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
transform: rotate(0deg);
}
}
@-ms-keyframes spinning {
from {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
transform: rotate(360deg);
}
to {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
transform: rotate(0deg);
}
}
/****************************************/
/* timeLine */
/****************************************/
.bigButtonWrapper {
min-width: 1210px;
position: relative;
}
.button {
display: block;
position: absolute;
width: 46px;
height: 46px;
top: -23px;
margin-left: -3px;
left: 30%;
z-index: 10000;
cursor: pointer;
background-color: #999999;
background-image: url("/tna/media_sel/images/buttonArrow.png");
background-repeat: no-repeat;
background-size: contain;
background-position: 50% 50%;
-webkit-border-radius: 23px;
-moz-border-radius: 23px;
border-radius: 23px;
box-shadow: 1px 1px 3px #666666;
border: 3px solid #ffffff;
}
body.nopic .button {
left: 22%;
}
.button.opened,
.button.opened:hover {
background-color: #4c93ff;
-webkit-animation: opening 300ms 0ms forwards;
-moz-animation: opening 300ms 0ms forwards;
-ms-animation: opening 300ms 0ms forwards;
animation: opening 300ms 0ms forwards;
}
@-webkit-keyframes opening {
from {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
}
}
@-moz-keyframes opening {
from {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
}
}
@-ms-keyframes opening {
from {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
}
}
.button.closed {
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
background-color: #999999;
-webkit-animation: closing 300ms 0ms forwards;
-moz-animation: closing 300ms 0ms forwards;
-ms-animation: closing 300ms 0ms forwards;
animation: closing 300ms 0ms forwards;
}
@-webkit-keyframes closing {
from {
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
}
to {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
}
@-moz-keyframes closing {
from {
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
}
to {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
}
@-ms-keyframes closing {
from {
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
}
to {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
}
.button:hover {
background-color: #777777;
box-shadow: 0px 0px 2px #666666;
}
.button.smallButton {
margin-left: 7px;
top: 33px;
bottom: auto;
width: 25px;
height: 25px;
-webkit-border-radius: 13px;
-moz-border-radius: 13px;
border-radius: 13px;
background-image: url("/tna/media_sel/images/buttonArrow.png");
border: 3px solid #ffffff;
background-size: cover;
}
/****************************************/
/* classes documentaires */
/****************************************/
.indented,
.indente,
.document p.indented,
.document p.indente {
padding-left: 1em;
}
.caption,
.legende,
.document p.caption,
.document p.legende {
margin-top: 5px;
margin-left: 10px;
font-size: 0.8em;
line-height: 1.4em;
color: #827c7c;
}
.stabilo {
background-color: #FFFFB2;
}
.justify {
text-align: justify;
}
.petit,
.smallText,
.document p.smallText,
.document p.petit {
font-size: 0.7em;
line-height: 1.4em;
}
.toutPetit,
.tinyText,
.document p.tinyText,
.document p.toutPetit {
font-size: 0.5em;
line-height: 1.4em;
}
.gros,
.bigText,
.document p.gros,
.document p.bigText {
font-size: 1.3em;
line-height: 1.3em;
}
h2 {
font-size: 1.3em;
text-align: left;
padding: 1em 0em 0.5em 0em;
}
/****************************************/
/* SOCIAL LINKS */
/****************************************/
ul.socialLinks {
float: left;
display: block;
margin-top: 10px;
left: 13px;
padding: 0px;
width: auto;
}
ul.socialLinks li {
margin: 0px;
padding: 0px;
display: inline;
}
ul.socialLinks li a {
float: left;
width: 30px;
height: 30px;
overflow: hidden;
background-image: url("/tna/media_sel/images/social-media-icons2.png");
background-repeat: no-repeat;
margin-left: 4px;
opacity: 0.9;
}
ul.socialLinks li a:hover {
opacity: 1;
}
ul.socialLinks a.twitter {
background-position: -35px 0px;
}
ul.socialLinks a.linked {
background-position: -35px -72px;
}
ul.socialLinks a.youtube {
background-position: 0px 0px;
}
ul.socialLinks a.facebook {
background-position: 0px -35px;
}
ul.socialLinks a.rss {
background-position: -72px 0px;
}
ul.socialLinks a.stumble {
background-position: -72px -72px;
}
/*****************************/
/* footer */
/*****************************/
ul.bottomLinks {
list-style-type: none;
}
ul.bottomLinks li {
color: rgba(5, 5, 5, 0.3);
display: inline;
}
ul.bottomLinks li a {
color: #050505;
padding: 0 0.3em;
}
a.goToTop {
display: inline;
position: static;
opacity: 1;
}
.footer a {
opacity: 0.8;
}
.footer a:hover {
text-decoration: underline;
opacity: 1;
}
a.signature {
display: block;
width: 41px;
height: 60px;
float: right;
margin: -38px 0em 0em 2em;
vertical-align: top;
background: transparent url("/tna/media_sel/images/supplierLogo-s.png") 0em 0em no-repeat;
background-size: contain;
}
/****************************************/
/* home */
/****************************************/
body.home {
color: #050505;
background-color: #ededed;
font-family: Helvetica, Arial, sans-serif;
font-size: 11pt;
line-height: 1.4em;
text-align: center;
}
/****************************************/
/* corporate */
/****************************************/
.home #header {
position: fixed;
height: auto;
overflow: visible;
z-index: 100;
}
.home #header.smallHeader {
position: fixed;
left: 0;
top: 0;
z-index: 10000;
height: 60px;
}
.headerInnerWrapper {
float: left;
height: auto;
width: 100%;
overflow: hidden;
}
.smallHeaderInnerWrapper {
height: 0;
}
.headerMargin {
height: 60px;
}
.home .header a.logo {
display: block;
width: 0%;
overflow: hidden;
}
.home .header a.logo.visible {
width: 220px;
}
.home .header .searchForm {
display: block;
width: 0%;
overflow: hidden;
}
.home .header .searchForm.visible {
width: auto;
}
.home .corporate .logo {
display: block;
float: left;
width: 50%;
height: 80px;
margin-top: 20px;
background-color: transparent;
background-image: url("/tna/media_sel/images/logo-l.png");
background-position: 50% top;
background-repeat: no-repeat;
background-size: contain;
}
.corporate-desc {
display: block;
float: right;
width: 49%;
text-align: left;
padding: 1.5em 1em 1em 2em;
}
.corporate h1 {
font-size: 1.2em;
text-transform: uppercase;
font-weight: bold;
color: rgba(255, 255, 255, 0.8);
padding-bottom: 0.15em;
}
.siteTitle {
display: block;
height: 60px;
width: 100%;
padding-right: 20px;
background-color: transparent;
color: #666666;
text-align: center;
font-size: 17px;
line-height: 60px;
}
.siteTitle input[type="text"] {
width: 20em;
border: 1px solid #ddd;
font-size: 0.8em;
text-align: left;
padding: 0.2em 0.5em;
}
.siteTitle .url-truncable {
display: inline-block;
text-align: left;
padding: 0.8em 1em;
font-size: 0.9em;
line-height: 2em;
max-width: 30em;
height: 2.5em;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
word-wrap: break-word;
}
.siteTitle .url-truncable:hover {
display: block;
position: absolute;
top: 0;
left: 0;
min-height: 80px;
height: auto;
max-width: 100%;
width: 100%;
background-color: rgba(254, 243, 155, 0.9);
white-space: normal;
text-align: center;
font-size: 1em;
line-height: 1.4em;
padding-top: 15px;
box-shadow: 2px 2px 30px rgba(0, 0, 0, 0.1);
z-index: 5;
}
/****************************************/
/* customisation des modules */
/****************************************/
.module {
display: block;
width: 100%;
height: 30%;
float: left;
}
.module > .content {
margin: auto;
width: auto;
max-width: 950px;
}
.module.corporate {
color: #ffffff;
min-height: 120px;
height: auto;
background-color: #1974ff;
}
.module.facts {
background-color: #ffffff;
}
.module.search {
height: 80px;
background-color: #4c93ff;
}
.module.collections {
background-color: #eeeeee;
height: auto;
}
/****************************************/
/* Search */
/****************************************/
.module.search a {
color: rgba(255, 255, 255, 0.8);
text-shadow: -1px -1px 0 #1974ff;
}
.module.search a:hover {
color: #ffffff;
text-shadow: -1px -1px 0 #1974ff;
}
.module.search .content {
font-size: 1.5em;
line-height: 80px;
}
.module.search .textField {
width: 15em;
color: #3b3e95;
background-color: rgba(255, 255, 255, 0.4);
border: 2px solid rgba(255, 255, 255, 0.2);
padding: 0.2em;
}
.module.search .textField:focus {
color: #3b3e95;
background-color: rgba(255, 255, 255, 0.6);
border: 2px solid rgba(255, 255, 255, 0.7);
}
.module.search input::-webkit-input-placeholder {
/* WebKit browsers */
color: #fff !important;
}
.module.search input:-moz-placeholder {
/* Mozilla Firefox 4 to 18 */
color: #fff !important;
}
.module.search input::-moz-placeholder {
/* Mozilla Firefox 19+ */
color: #fff !important;
}
.module.search input:-ms-input-placeholder {
/* Internet Explorer 10+ */
color: #fff !important;
}
.module.search .submitField {
background-color: #3b3e95;
border: 2px solid #3b3e95;
color: rgba(255, 255, 255, 0.7);
text-shadow: -1px -1px 0 #2d2f70;
padding: 0.2em 0.4em;
margin-left: 0.2em;
}
.module.search .submitField:hover {
background-color: #4b4fb8;
border-color: #4b4fb8;
color: #ffffff;
}
.inputGroup {
display: inline-block;
vertical-align: middle;
padding: 0 0 0 0.5em;
}
.inputGroup select,
.inputGroup a {
display: block;
font-size: 0.65em;
line-height: 1.4em;
margin-top: .2em;
}
/****************************************/
/* viz */
/****************************************/
.module.viz {
height: auto;
}
.module.viz .content {
max-width: 100%;
}
.node {
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
border: solid 1px transparent;
font: 9px sans-serif;
line-height: 12px;
overflow: hidden;
position: absolute;
text-indent: 2px;
color: text;
}
/****************************************/
/* facts */
/****************************************/
.facts > .content {
padding-bottom: 5px;
}
.yearGraph {
margin: 1em 0 0.5em 0;
}
.yearGraph li {
display: block;
clear: both;
line-height: 1.6em;
}
.yearGraphLabel {
font-size: 1.3em;
color: #3b3e95;
display: block;
float: left;
width: 90%;
}
.gauge {
display: block;
margin-left: 0em;
height: 1.5em;
padding-top: 0.3em;
}
.gauge .level {
display: block;
background-color: #3b3e95;
margin-left: 4em;
height: 1em;
color: transparent;
position: relative;
}
.gaugeFacts {
display: none;
color: #050505;
text-align: center;
font-size: 0.9em;
position: absolute;
right: -95px;
top: -5px;
z-index: 1000;
width: 100px;
height: auto;
background-color: rgba(255, 255, 255, 0.5);
box-shadow: 2px 2px 10px rgba(5, 5, 5, 0.4);
border: 1px solid rgba(5, 5, 5, 0.4);
}
li:hover .gaugeFacts {
display: block;
}
.piechart {
width: auto;
height: auto;
text-align: center;
margin: 1em 0 0.5em 0;
}
.thepie {
height: 250px;
width: 100%;
min-width: 320px;
}
.slice text {
font-size: 14pt;
opacity: 0.9;
}
.piechart svg {
height: 250px;
width: 100%;
min-width: 320px;
margin: auto;
}
.bigCounter {
font-size: 2em;
line-height: 2em;
text-align: center;
padding-top: 1em;
margin-bottom: 0.2em;
}
.col6.bigCounter {
min-height: 250px;
line-height: 300px;
}
.bigCounter .counter {
font-size: 2em;
display: block;
color: #3b3e95;
}
.col6.bigCounter .counter {
font-size: 1.2em;
display: block;
color: #3b3e95;
}
.bigCounter .middle {
display: inline-block;
vertical-align: middle;
line-height: 1.8em;
}
/****************************************/
/* collections */
/****************************************/
.colorCollection {
color: #6dc260;
}
.collections ul {
text-align: left;
padding: 5px 0 0px 0;
font-size: 0;
}
.collections li {
font-size: 13pt;
display: inline-block;
vertical-align: top;
height: auto;
min-height: 150px;
width: 23%;
margin: 0 1% 2% 1%;
}
.collections a {
color: rgba(255, 255, 255, 0.95);
text-shadow: -1px -1px 0 rgba(59, 62, 149, 0.3);
}
.collections li:hover a {
color: #ffffff;
}
.collections li .icon {
display: block;
width: 100%;
height: 150px;
background-color: rgba(59, 62, 149, 0.2);
background-repeat: no-repeat;
background-size: cover;
background-position: 50% 50%;
opacity: 0.85;
}
.collections li .icon.partnerLogo {
background-size: contain;
}
.collections li:hover .icon {
opacity: 1;
}
.collections li .label {
display: block;
padding: 0.4em 0.3em;
overflow-x: hidden;
min-height: 4.3em;
}
.collections li.restricted .label,
.collections li.restricted .icon {
background-color: #4c93ff;
}
.collections li.public .label,
.collections li.public .icon {
background-color: #6dc260;
}
/****************************************/
/* sitemenu */
/****************************************/
ul.siteMenu {
display: block;
float: left;
width: auto;
padding: 0em 0em 0em 5px;
height: 60px;
line-height: 60px;
font-size: 1.2em;
}
ul.siteMenu li {
display: inline;
padding: 0em 0.2em 0em 0.2em;
}
ul.siteMenu ul {
display: inline;
}
ul.siteMenu .menuTrigger > a {
display: none;
}
ul.siteMenu ul a {
color: #827c7c;
opacity: 0.7;
cursor: pointer;
padding: 0.6em 0.6em 0.6em 0.6em;
border-radius: 1.5em;
}
ul.siteMenu ul li.selected a,
ul.siteMenu ul li.selected a:hover {
background-color: #f2f2f2;
opacity: 1;
text-shadow: 1px 1px 0 #ffffff;
}
ul.siteMenu ul li a:hover {
background-color: #f2f2f2;
opacity: 1;
text-shadow: 1px 1px 0 #ffffff;
}
/****************************************/
/* siteList */
/****************************************/
.home .organizer {
height: auto;
position: relative;
}
.siteListContainer {
display: block;
text-align: left;
overflow: auto;
min-height: 200px;
height: auto;
position: relative;
}
.siteListContainer ul {
display: block;
}
.siteListContainer ul {
text-align: center;
}
.siteListContainer ul a {
color: #050505;
}
.siteListContainer ul a:hover {
color: #000000;
}
a.fav {
font-size: 0.75em;
display: block;
width: auto;
}
/*.shortcutDesc
{
display: none;
}
a.fav:hover .shortcutDesc
{
display: inline;
}*/
a.toSite {
display: block;
max-width: 950px;
margin: auto;
text-align: left;
}
ul .thumbnail {
display: block;
background-size: contain;
background-repeat: no-repeat;
background-position: center center;
margin: 0.8em 0em 0.8em 0em;
}
ul .siteName {
font-family: Helvetica, Arial, sans-serif;
font-weight: bold;
display: block;
}
ul .liveUrl {
font-size: 0.85em;
display: block;
}
ul .description {
font-size: 0.85em;
display: block;
}
ul .facts {
font-size: 0.85em;
display: block;
}
/* thumbs */
.siteListContainer .thumbs {
width: 100%;
padding: 0.5em 0em 0.5em 40px;
text-align: center;
}
.siteListContainer .thumbs li {
display: inline-block;
text-align: center;
width: auto;
height: auto;
padding: 0.7em 0.3em 0.7em 0.5em;
margin: 0.3em 0.3em 0.3em 0.3em;
border-radius: 0.8em;
border: 2px solid transparent;
}
.siteListContainer .thumbs li:hover {
border: 2px solid #cce0ff;
background-color: #ffffff;
}
.siteListContainer .thumbs li a {
text-align: left;
}
.siteListContainer .thumbnail {
width: 250px;
height: 180px;
}
.siteListContainer .thumbs a.toSite {
width: 250px;
margin: 0em 0em 0em 0em;
height: auto;
}
.siteListContainer .thumbs .description {
display: none;
}
/* list */
.list {
color: #050505;
}
.list li {
display: block;
clear: both;
height: auto;
padding: 0.3em 0em 0.3em 0em;
line-height: 1.5em;
}
.list li:nth-child(even) {
background-color: #ebeaea;
}
.list li:nth-child(odd) {
background-color: #f7f7f7;
}
.list li:hover {
background-color: #cce0ff;
}
.list li a span,
.list li a span span {
overflow: hidden;
height: 1.7em;
}
.list .metaEssentials {
float: left;
width: 80%;
}
.list .siteName {
float: left;
width: 40%;
padding: 0em 0em 0em 15px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.list .thumbnail,
.list .description {
display: none;
}
.list .liveUrl {
float: left;
width: 60%;
padding: 0em 0em 0em 10px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.list .fav {
display: none;
}
.list .facts {
width: 19%;
margin: 0em 0em 0em 10px;
}
/* full */
.full {
display: block;
}
.full li {
display: block;
width: 100%;
float: left;
vertical-align: middle;
cursor: pointer;
clear: both;
padding: 0.6em 0em 0.6em 0em;
background-color: #f4f4f4;
background: -webkit-gradient(linear, left top, left bottom, from(#f4f4f4), to(white));
background: -webkit-linear-gradient(top, #f4f4f4, white);
background: -moz-linear-gradient(top, #f4f4f4, white);
background: -ms-linear-gradient(top, #f4f4f4, white);
background: -o-linear-gradient(top, #f4f4f4, white);
}
.full li:hover {
background-color: #b2d1ff;
}
.full li:hover a.toSite {
color: #000000;
}
.full .metaEssentials {
float: left;
width: 40%;
min-height: 60px;
padding: 0em 0em 0em 1.6em;
}
.full .liveUrl {
width: 100%;
height: 1.5em;
padding: 0em 0em 0em 0px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
body.nopic .full .thumbnail {
display: none;
}
.full .thumbnail {
display: block;
float: left;
width: 80px;
height: 60px;
margin: 0em 20px 0.6em 40px;
}
.full .description {
display: block;
width: 38%;
float: left;
padding: 0.3em 0 0.6em 1em;
}
.full .fav {
display: none;
}
.full .facts {
width: 20%;
text-align: right;
float: right;
margin: 0em 0em 0em 0em;
padding: 0em 40px 0em 0em;
}
/****************************************/
/* index */
/****************************************/
.resultsTools {
width: 100%;
float: left;
background-color: #4c93ff;
height: auto;
padding: 0.3em 0.5em 0.3em 0.5em;
}
.indexLabel {
float: left;
width: auto;
color: #ffffff;
font-size: 0.8em;
padding: 0.7em 1em 0em 0px;
}
ul.rolodex {
display: block;
width: auto;
float: left;
height: auto;
padding: 0.15em 0em 0em 0px;
overflow: hidden;
}
ul.rolodex li {
display: inline;
}
ul.rolodex li a {
display: block;
float: left;
width: auto;
min-width: 1.2em;
height: 25px;
line-height: 28px;
font-family: Helvetica, Arial, sans-serif;
font-weight: bold;
text-decoration: none;
background-color: #7fb2ff;
border-radius: 0.2em;
padding: 0em 0.3em 0em 0.3em;
margin: 0em 0.3em 0.2em 0;
color: #fbfcff;
box-shadow: inset 1px 1px 2px #4c93ff;
}
ul.rolodex li a:hover {
background: #237aff;
box-shadow: 0px 0px 0px #394bc1;
text-decoration: none;
}
ul.rolodex li a.active,
ul.rolodex li a.active:hover {
color: #0047b2;
background: #ffffff;
box-shadow: none;
}
/****************************************/
/* resultsFilter */
/****************************************/
ul.resultsFilter {
font-size: 0.8em;
display: block;
float: right;
padding: 0.8em 0px 0em 40px;
}
ul.resultsFilter li {
display: inline;
color: #ffffff;
}
body.nopic ul.resultsFilter li.thumbsView {
display: none;
}
ul.resultsFilter li a {
color: #ffffff;
}
ul.resultsFilter li.selected a,
ul.resultsFilter li.selected a:hover {
text-decoration: none;
color: #394bc1;
}
ul.resultsFilter li a:hover {
color: #ffffff;
}
ul.resultsFilter li a:active {
color: #ffffff;
}
/****************************************/
/* home Slider */
/****************************************/
.homeHeightBuffer {
display: block;
height: 60px;
background-color: #4c93ff;
}
.homeHeightBuffer.visible {
display: block;
height: 60px;
}
.slideshow {
display: block;
width: 100%;
height: auto;
text-align: center;
background: #666666;
background: -moz-linear-gradient(left, #666666 0%, #95b3ff 33%, #95b3ff 66%, #666666 100%);
background: -ms-linear-gradient(left, #666666 0%, #95b3ff 33%, #95b3ff 66%, #666666 100%);
background: -webkit-linear-gradient(left, #666666 0%, #95b3ff 33%, #95b3ff 66%, #666666 100%);
background: linear-gradient(to right, #666666 0%, #95b3ff 33%, #95b3ff 66%, #666666 100%);
}
#slider {
margin: auto;
}
ul.bjqs {
position: relative;
list-style: none;
padding: 0;
margin: 0;
overflow: hidden;
display: block;
}
li.bjqs-slide {
position: absolute;
top: 0;
left: 0;
}
.themaBanner {
display: block;
position: absolute;
width: 100%;
height: 250px;
background-color: transparent;
background-position: 50% 50%;
background-repeat: no-repeat;
background-size: cover;
}
.themaId {
display: block;
position: absolute;
top: 15px;
left: 40px;
color: #ffffff;
font-family: Helvetica, Arial, sans-serif;
font-weight: bold;
font-size: 1em;
text-transform: uppercase;
text-align: left;
text-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
}
.themaTitle {
display: block;
position: absolute;
bottom: 15px;
left: 40px;
color: #ffffff;
font-family: Helvetica, Arial, sans-serif;
font-weight: bold;
font-size: 3em;
line-height: 1em;
text-align: left;
text-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
}
ul.bjqs-controls {
list-style: none;
margin: 0;
padding: 0;
z-index: 9999;
}
ul.bjqs-controls.v-centered li a {
position: absolute;
font-size: 0.8em;
font-family: Helvetica, Arial, sans-serif;
font-weight: bold;
background-color: #ffffff;
color: #5b5757;
opacity: 0.6;
padding: 0em 1em 0em 1em;
}
ul.bjqs-controls.v-centered li a:hover {
opacity: 1;
box-shadow: 0px 0px 5px #000000;
}
ul.bjqs-controls.v-centered li.bjqs-next a {
right: 0;
border-top-left-radius: 0.6em;
border-bottom-left-radius: 0.6em;
}
ul.bjqs-controls.v-centered li.bjqs-prev a {
left: 0;
border-top-right-radius: 0.6em;
border-bottom-right-radius: 0.6em;
}
ol.bjqs-markers {
position: absolute;
bottom: 15px;
right: 10px;
list-style: none;
padding: 0 0 0 0;
margin: 0px 0 0 0;
font-size: 0.8em;
font-family: Helvetica, Arial, sans-serif;
font-weight: bold;
color: #5b5757;
}
ol.bjqs-markers.h-centered {
text-align: right;
}
ol.bjqs-markers li {
display: inline;
}
ol.bjqs-markers li a {
display: inline-block;
background-color: #ffffff;
opacity: 0.6;
border-radius: 0.5em;
padding: 0 0.5em 0 0.5em;
margin: 0 0.2em 0 0.2em;
}
ol.bjqs-markers li.active-marker a {
opacity: 0.9;
}
p.bjqs-caption {
display: block;
width: 96%;
margin: 0;
padding: 2%;
position: absolute;
bottom: 0;
}
/****************************************/
/* disclaimer */
/****************************************/
.disclaimer {
display: block;
background-color: rgba(255, 254, 177, 0.95);
font-size: 0.95em;
line-height: 1.4em;
text-align: left;
padding: 1em 40px 1em 40px;
}
.disclaimer.fixed {
position: fixed;
height: auto;
left: 0;
top: 60px;
z-index: 10000;
}
.disclaimer .acceptBox {
float: left;
text-align: left;
width: 6em;
font-family: Helvetica, Arial, sans-serif;
font-weight: bold;
}
.disclaimer p {
padding-left: 7em;
}
.disclaimer input,
.disclaimer label {
/* margin-left: 1em; */
cursor: pointer;
}
.disclaimer a {
text-decoration: underline;
}
/****************************************/
/* browser */
/****************************************/
#ajaxSidebar {
width: 300px;
height: auto;
float: left;
position: relative;
overflow: auto;
/* box-shadow: inset 0px 0px 10px fade(@neutral, 60%);*/
}
.ui-resizable-handle {
height: 100%;
width: 20px;
position: absolute;
top: 0;
z-index: 15000;
}
.ui-resizable-e {
right: 0;
cursor: e-resize;
}
.archiveBrowser {
text-align: left;
position: relative;
padding: 0em 0em 0em 0em;
}
.archiveBrowser.hidden {
display: none;
}
.browserTitle {
height: 1.5em;
color: #8e8989;
padding: 0.25em 30px 0em 30px;
font-family: Helvetica, Arial, sans-serif;
font-weight: bold;
font-size: 2.8em;
line-height: 0.8em;
text-align: left;
}
.browserTitle .inactive {
font-size: 0.3em;
font-family: Helvetica, Arial, sans-serif;
font-weight: bold;
float: right;
padding-top: 0.5em;
}
/****************************************/
/* tags */
/****************************************/
.tagsBrowser {
height: auto;
}
.tagsBrowser.hidden {
display: none;
}
.tagsBrowser ul {
z-index: 1000;
overflow: hidden;
padding: 2em 40px 1em 30px;
line-height: 2em;
}
.tagsBrowser li {
display: inline;
}
.tagsBrowser ul a {
color: #827c7c;
}
.tagsBrowser ul a:hover {
color: #4c93ff;
}
.tagsBrowser ul a.active {
font-family: Helvetica, Arial, sans-serif;
font-weight: bold;
color: #4c93ff;
}
.tag1 {
font-size: 0.75em;
}
.tag2 {
font-size: 1em;
}
.tag3 {
font-size: 1.4em;
}
.tag4 {
font-size: 1.9em;
}
/* hamburger icon */
.hamburger {
display: inline-block;
width: 25px;
height: 25px;
overflow: hidden;
vertical-align: middle;
cursor: pointer;
}
.slice {
display: block;
width: 100%;
height: 20%;
background-color: #aaa;
margin-bottom: 16%;
border-radius: 0.2em;
}
.slice:last-child {
margin: 0;
}
.hamburger:hover .slice {
background-color: #777;
}
/****************************************/
/* search Page widgets */
/****************************************/
/****************************************/
/* searchPlus */
/****************************************/
.module.searchPlus {
background-color: #4c93ff;
height: auto;
font-size: 1.3em;
padding: 1em 0 0.7em 0;
}
.searchPlus input[type="text"] {
padding: 0.3em 0.5em;
background-color: rgba(255, 255, 255, 0.9);
}
.searchPlus input[type="text"]:focus {
background-color: #ffffff;
}
::-webkit-input-placeholder {
/* WebKit browsers */
color: #394bc1;
}
:-moz-placeholder {
/* Mozilla Firefox 4 to 18 */
color: #394bc1;
}
::-moz-placeholder {
/* Mozilla Firefox 19+ */
color: #394bc1;
}
:-ms-input-placeholder {
/* Internet Explorer 10+ */
color: #394bc1;
}
.searchPlus input[type="submit"] {
padding: 0.3em 0.5em;
background-color: rgba(255, 255, 255, 0.5);
cursor: pointer;
}
.searchLinks {
padding: 0.5em 0 0 0;
font-size: 0.8em;
}
/****************************************/
/* advanced search */
/****************************************/
.module.searchAdvanced {
background-color: #394bc1;
display: none;
color: #ffffff;
box-shadow: inset 0 0 10px #283486;
padding: 1em 0 0.7em 0;
color: rgba(255, 255, 255, 0.9);
}
.module.searchAdvanced.visible {
display: block;
height: auto;
}
body.nojs .module.searchAdvanced {
display: block;
height: auto;
}
#advancedTrigger {
cursor: pointer;
}
.searchAdvanced h1 {
color: rgba(255, 255, 255, 0.8);
font-size: 1.4em;
padding: 0 0 0.5em 0;
}
.searchAdvanced h2 {
color: rgba(255, 255, 255, 0.8);
padding: 0 0 0.5em 0;
}
.searchAdvanced input[type="text"] {
width: 13em;
padding: 0.2em 0.5em 0.3em 0.5em;
background-color: rgba(255, 255, 255, 0.7);
}
.searchAdvanced input[type="text"]:focus {
background-color: #ffffff;
}
.searchAdvanced select {
width: 13em;
}
.searchAdvanced input[type="submit"] {
font-size: 1.2em;
padding: 0.3em 0.5em;
background-color: rgba(255, 255, 255, 0.3);
cursor: pointer;
margin: 0.8em 0 0 200px;
}
.searchAdvanced .searchPrimaryField {
display: block;
clear: both;
padding: 0.2em;
}
.searchPrimaryField label {
display: block;
float: left;
width: 200px;
}
#searchCheckboxList,
#texte_10 {
padding: 0.3em 0 0 2em;
}
#searchCheckboxList a.helpLink {
display: none;
}
/****************************************/
/* search Results */
/****************************************/
.searchQueryControls {
display: block;
height: 40px;
background-color: #d9d7d7;
color: #ffffff;
text-align: center;
line-height: 40px;
position: relative;
overflow: hidden;
}
span.nightmare {
display: block;
color: #404040;
text-align: left;
width: 100%;
padding-left: 250px;
}
.bottom .nightmare {
padding-left: 15px;
}
ul.filters {
display: inline-block;
width: 200px;
position: absolute;
bottom: 0;
left: 15px;
margin: 8px 15px 0 0px;
color: #394bc1;
text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.8);
}
ul.filters li {
display: inline-block;
height: 32px;
line-height: 32px;
background-color: rgba(255, 255, 255, 0.5);
padding: 0.1em 0.5em;
vertical-align: bottom;
color: #827c7c;
cursor: pointer;
}
ul.filters li.active {
background-color: #f6f6f6;
color: #394bc1;
}
ul.filters li:hover {
background-color: #e9e9e9;
color: #394bc1;
}
ul.paginator {
display: inline-block;
width: auto;
float: right;
margin: 0px 15px 0 15px;
text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.8);
}
ul.paginator li {
display: inline-block;
padding: 0.2em 0em;
vertical-align: bottom;
color: #394bc1;
}
ul.paginator li a {
padding: 0.3em 0.5em;
}
ul.paginator li a:hover {
color: #ffffff;
background-color: #4c93ff;
text-shadow: -1px -1px 0 #394bc1;
}
.current {
font-weight: bold;
}
ul.paginator li.page {
color: #404040;
}
ul.paginator input {
width: 3em;
padding: 0.3em 0.5em;
background-color: rgba(255, 255, 255, 0.4);
}
ul.paginator input:focus {
background-color: rgba(255, 255, 255, 0.8);
}
.searchResultContent {
border-bottom: 1px solid rgba(255, 255, 255, 0.5);
background-color: #f1f1f1;
text-align: bold;
}
.searchResultContent:nth-child(odd) {
background-color: #ffffff;
}
.searchResultContent > .content {
margin: auto;
width: auto;
max-width: 950px;
text-align: left;
padding: 0.5em 15px 0.5em 15px;
}
.pageTitle {
font-size: 1.2em;
display: block;
font-weight: bold;
padding: 0.2em 0 0.3em 0;
}
.pageTitle:hover {
color: #394bc1;
}
.snippet {
display: block;
padding: 0.2em 0 0.4em 50px;
}
.linkInformation {
color: #827c7c;
display: block;
width: auto;
float: left;
}
.linkInformation.originalUrl {
display: block;
width: auto;
float: none;
}
.linkInformation a:hover {
color: #394bc1;
}
.allInfo {
display: block;
color: #827c7c;
text-align: right;
}
.allInfo:hover {
color: #394bc1;
}
.highlight {
background-color: #fffeb1;
padding: 0.3em 0.3em 0.2em 0.3em;
}
/****************************************/
/* banner */
/****************************************/
body.banner .jsbody {
height: 100%;
}
body.banner header,
.banner #header {
position: absolute;
top: 0;
left: 0;
z-index: 2000;
}
body.banner footer,
.banner #footer {
display: none;
}
body.banner .siteTitle {
padding-right: 50px;
text-align: center;
}
body.banner .timeBrowseColumn {
position: absolute;
top: 0;
left: 0;
width: 30%;
height: 100%;
padding-top: 60px;
border-right: 1px solid #b4b0b0;
position: relative;
z-index: 2;
}
body.banner .mainWrapper {
width: 100%;
height: 100%;
overflow: auto;
}
.ui-resizable-e {
top: 0;
right: -20px;
height: 100%;
}
.iframeContainer {
position: absolute;
top: 0;
right: 0;
width: 70%;
height: 100%;
z-index: 1;
padding-top: 60px;
overflow: hidden;
background-color: white;
}
.graphicDisclaimerContainer {
position: absolute;
right: 0;
top: 60px;
width: 120px;
height: 120px;
z-index: 3;
overflow: hidden;
}
.graphicDisclaimer {
position: absolute;
left: -65px;
top: -110px;
-ms-transform: rotate(45deg);
/* IE 9 */
-webkit-transform: rotate(45deg);
/* Chrome, Safari, Opera */
transform: rotate(45deg);
background-color: rgba(76, 147, 255, 0.85);
color: #ffffff;
width: 400px;
height: 200px;
padding-top: 170px;
overflow: hidden;
font-size: 1.5em;
text-align: center;
}
#removeGdc {
opacity: 0.5;
font-size: 0.8em;
padding: 0 0 0 0.3em;
cursor: pointer;
}
#removeGdc:hover {
opacity: 1;
}
/* banner embeded calendar responsiveness */
body.banner .siteMeta {
padding-left: 0;
}
body.banner #metadata {
padding: 0 20px 0 20px;
}
body.banner #metadata #archiveDescription {
padding: 5px 0 0 0px;
}
body.banner .metaLabel {
display: none !important;
}
body.banner ul#facts1 {
margin: 0.8em 0px 0px 50px;
}
body.banner ul#facts1 li {
display: inline;
padding-right: 1em;
}
body.banner ul#facts2 {
display: none;
}
body.banner ul#archiveTags {
padding: .8em 0 0 50px;
}
body.banner .bigButtonWrapper {
min-width: 320px;
}
body.banner .button {
left: 20px;
}
body.banner .simpleList .year.closed .bar {
left: 20px;
}
body.banner .simpleList .year.opened .bar {
font-size: 200px;
text-align: left;
}
body.banner .simpleList .year.opened {
height: 15.5em;
padding-bottom: 0;
}
body.banner .simpleList .year {
min-width: 320px;
}
body.banner .bigCounter .counter {
font-size: 1.1em;
}
body.banner .simpleList .year > .label {
left: 67px;
top: 20px;
height: auto;
width: auto;
font-size: 45px;
text-align: left;
margin: none;
}
body.banner .simpleList .year.closed > .label {
left: 67px;
top: 20px;
font-size: 45px;
}
body.banner .simpleList .year > .counter {
top: 25px;
left: 190px;
font-size: 0.65em;
margin: 0;
height: auto;
width: auto;
line-height: 1em;
}
body.banner .simpleList .year.closed > .counter {
top: 25px;
left: 190px;
font-size: 0.65em;
margin: 0;
height: auto;
width: auto;
line-height: 1em;
}
body.nopic.banner .simpleList .monthCalendar {
left: 20px;
width: 100%;
margin-left: 15px;
margin-top: 0;
height: 15.5em;
}
body.banner .simpleList .columns {
top: 3em;
}
body.banner .simpleList .instanceList {
left: 0px;
top: 3em;
height: 12.3em;
border-left: 45px solid transparent;
overflow-x: auto;
overflow-y: hidden;
width: 100%;
}
/*** messages ***/
body.message {
color: #222;
background-color: #FFFFFF;
font-size: 12pt;
line-height: 1.4em;
text-align: left;
}
body.message h1 {
font-size: 1.3em;
font-family: Helvetica, Arial, sans-serif;
font-weight: bold;
}