/* fonts */ @font-face { font-family: 'pictos'; src: url('/web/20130418135330im_/http://sciences.blogs.liberation.fr/fonts/pictos.eot'); src: url('/web/20130418135330im_/http://sciences.blogs.liberation.fr/fonts/pictos.svg#pictos') format('svg'), url('/web/20130418135330im_/http://sciences.blogs.liberation.fr/fonts/pictos.eot#iefix') format('embedded-opentype'), url('/web/20130418135330im_/http://sciences.blogs.liberation.fr/fonts/pictos.woff') format('woff'), url('/web/20130418135330im_/http://sciences.blogs.liberation.fr/fonts/pictos.ttf') format('truetype'); font-weight: normal; font-style: normal; } @font-face { font-family: 'DINEngschriftStdRegular'; src: url('/web/20130418135330im_/http://sciences.blogs.liberation.fr/fonts/dinengschriftstd-webfont.eot'); src: url('/web/20130418135330im_/http://sciences.blogs.liberation.fr/fonts/dinengschriftstd-webfont.svg#pictos') format('svg'), url('/web/20130418135330im_/http://sciences.blogs.liberation.fr/fonts/dinengschriftstd-webfont.eot#iefix') format('embedded-opentype'), url('/web/20130418135330im_/http://sciences.blogs.liberation.fr/fonts/dinengschriftstd-webfont.woff') format('woff'), url('/web/20130418135330im_/http://sciences.blogs.liberation.fr/fonts/dinengschriftstd-webfont.ttf') format('truetype'); font-weight: normal; font-style: normal; } /* Reset & base */ article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; } html { font-size: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; } html, button, input, select, textarea { font-family: sans-serif; color: #222; } body { margin: 0; width: 100%; overflow-x: hidden;} abbr[title] { border-bottom: 1px dotted; } ul, ol { margin: 1em 0; padding: 0 0 0 40px; } dd { margin: 0 0 0 40px; } nav ul, nav ol { list-style: none; list-style-image: none; margin: 0; padding: 0; } img { border: 0; -ms-interpolation-mode: bicubic; vertical-align: middle; } figure { margin: 0; } .chromeframe { margin: 0.2em 0; background: #ccc; color: black; padding: 0.2em 0; } h1, h2, h3, h4, h5, h6{padding: 0; margin: 0; font-weight: normal;} p{padding:0; margin:0;} ::-moz-selection { background: #c00; color: #fff; text-shadow: none; } ::selection { background: #c00; color: #fff; text-shadow: none; } hr{color: #ccc;} #maincontainerarticle article #articlecontent a, .commentaire p a{word-wrap: break-word;} /* css start */ body{background-image: url(http://web.archive.org/web/20130418135330im_/http://sciences.blogs.liberation.fr/test/images/fond_papier.jpg); color: #333; font-family: Times, serif; font-size: 18px; line-height: 24px; color: #333;} /* header */ header{height: 105px; background-color: #fff; border-bottom: solid 1px #ccc;} header nav{margin: auto; width: 1048px;} header nav a{display: block; float: left; width: 130px; border-right: solid 1px #ccc; border-left: solid 1px #ccc; height: 105px; margin-right: -1px; font-family: 'DINEngschriftStdRegular'; position: relative; color: #666; text-decoration: none; overflow: hidden; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease;} header nav a:hover{background-color: #c00;} header nav a span{font-family: 'pictos'; position: absolute; display: block; text-align: center; width: 100%; font-size: 40px; padding-top: 5px; line-height: 50px;} header nav a p{text-transform: uppercase; font-size: 16px; width: 120px; text-align: center; display: block; padding: 5px; line-height: 16px; position: absolute; top: 60px;} header nav a:hover span{color: #fff; -webkit-animation:headerPictoAnimation 300ms ease-out; -moz-animation:headerPictoAnimation 300ms ease-out; -o-animation:headerPictoAnimation 300ms ease-out; -ms-animation:headerPictoAnimation 300ms ease-out; animation:headerPictoAnimation 300ms ease-out;} header nav a:hover p{color: #fff; -webkit-animation:headerLienAnimation 300ms ease-out; -moz-animation:headerLienAnimation 300ms ease-out; -o-animation:headerLienAnimation 300ms ease-out; -ms-animation:headerLienAnimation 300ms ease-out; animation:headerLienAnimation 300ms ease-out;} /* Bloc titre du blog */ #BlogBlocTitre{text-align: center; padding:5px 0 5px 0;} #BlogBlocTitre img{margin-bottom: 30px;} #BlogBlocTitre a{margin: 0; padding: 0; font-family: 'DINEngschriftStdRegular'; font-size: 60px; font-weight: normal; text-decoration: none; color: #333; word-break: normal; word-wrap: normal;} #BlogBlocTitre a:hover{color:#c00;} #BlogBlocTitre span{margin: 0; padding: 0; font-size: 16px; line-height: 16px; display: block; margin-top: 25px;} #BlogBaseline{text-align: justify; padding: 20px 10px 20px 10px; font-style: italic; line-height: 20px;} #BlogBaseline span{color: #c00; font-size: 70px; display: inline-block; top: 15px; position: relative; font-weight: bolder;} #BlogRecherche{background-color: #fff; padding: 15px; position: relative; margin-bottom: 1px;} #BlogRecherche form{margin-bottom: 0;} #BlogChampRecherche{border: none; background-color: #eee; padding: 2px 5px 2px 5px; font-family: Times, serif; font-size: 20px; height: 30px; width: 240px;} #BlogBoutonValiderRecherche{position: absolute; top: 15px; right: 15px; border:none; color:#ccc; background-color:#333; width:30px; height:30px; font-family:"pictos"; padding: 2px; cursor: pointer; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease;} #BlogBoutonValiderRecherche:hover{color:#fff; background-color:#c00;} #BlogBlockTitrePage{background: #fff; margin-bottom: 1px; padding: 15px;} #BlogBlockTitrePage h4{font-family: 'DINEngschriftStdRegular'; font-size: 30px; text-transform: uppercase; border-bottom: solid 1px #666; color: #666;} #HeaderHintMobile{visibility: hidden;} /* content home */ #mainContainerHome{padding-left: 40px; padding-right: 10px;} #main{margin: 50px auto;} #mainContainerHome #main article{width: 299px; margin: 0 1px 1px 0; padding: 0; position: relative; float: left;} .homeBlocArticle{background-color: #fff; position: relative; padding-bottom: 10px; width: 299px; -webkit-transition:all 100ms ease-out} /*article:hover .homeBlocArticle{margin: 8px 0 0 8px; z-index: 999; border-bottom: solid 1px #ccc; border-right: solid 1px #ccc; -webkit-box-shadow: -1px -1px 0px 0px #c00, -2px -2px 0px 0px #c00, -3px -3px 0px 0px #c00, -4px -4px 0px 0px #c00, -5px -5px 0px 0px #c00, -6px -6px 0px 0px #c00, -7px -7px 0px 0px #c00, -8px -8px 0px 0px #c00; box-shadow: -1px -1px 0px 0px #c00, -2px -2px 0px 0px #c00, -3px -3px 0px 0px #c00, -4px -4px 0px 0px #c00, -5px -5px 0px 0px #c00, -6px -6px 0px 0px #c00, -7px -7px 0px 0px #c00, -8px -8px 0px 0px #c00;}*/ .homeBlocArticle .homeArticleHead{font-family: 'DINEngschriftStdRegular'; color: #c00; border-bottom: solid 3px #333; text-align: right; font-size: 16px; margin: 0 10px 0 10px; padding: 8px 0 3px 0; text-transform: uppercase;} .homeBlocArticle .homeArticleTitre{font-family: 'DINEngschriftStdRegular'; font-size: 40px; text-transform: uppercase; line-height: 37px; display: inline; padding: 7px 2px 7px 2px; margin: 0 0px 30px 0px; text-decoration: none; color: #333; -webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; -o-transition: all 0.2s linear; transition: all 0.2s linear; text-align:left; border: 0;display: block;} .homeBlocArticle .homeArticleTitre:hover{background-color: #c00; color: #ddd;} .homeBlocArticle .homeArticleTitre a{} .homeBlocArticle .homeArticleCorps{text-align: justify; margin: 0 10px;height:627px; overflow: hidden; } .homeBlocArticle .homeArticleCorps .homeArticleBlocImg{background-color: #333; color: #fff; font-size: 18px; text-align: center; margin-bottom: 10px; font-style: italic;} .homeBlocArticle .homeArticleCorps .homeArticleBlocImg img{width:100%} .homeBlocArticle .homeArticleCorps .homeArticleBlocImg span{padding: 2px 10px 2px 10px; display: block;} .homeBlocArticleCat{background-color: #777; color: #000; font-family: 'DINEngschriftStdRegular'; width: 170px; font-size: 18px; padding: 5px; text-transform: uppercase; line-height: 18px; height: 35px; border-right: solid 1px #fff; float: left;text-decoration: none;} .homeBlocArticleCommentaires{ background-color: #777; color: #000; font-family: 'DINEngschriftStdRegular'; font-size: 18px; padding: 5px; text-transform: uppercase; line-height: 18px; border-bottom: solid 3px #333;} .homeBlocArticleCat span, .homeBlocArticleCommentaires span{color: #fff; font-family: 'pictos'; text-transform: none; font-size: 20px; display: block; float: left; padding: 0 10px 0 0} .cache {background-image: url(http://web.archive.org/web/20130418135330im_/http://sciences.blogs.liberation.fr/test/images/bas_texte.png);position: absolute;width: 279px; height: 38px;bottom: 41px;} /*lien flipés */ p .homeArticleCorps a, #mainContainerArticle article #articleContent .linkArticle{ display: inline-block; overflow: hidden; vertical-align: top; -webkit-perspective: 400px; -moz-perspective: 400px; -webkit-perspective-origin: 50% 50%; -moz-perspective-origin: 50% 50%; text-decoration: none; color: #c00; border-bottom: dotted 1px #c00; } p .homeArticleCorps a:hover, #mainContainerArticle article #articleContent .linkArticle:hover{border: none; padding-bottom: 1px; } p .homeArticleCorps a span, #mainContainerArticle article #articleContent .linkArticle span{ display: block; position: relative; padding: 0 2px; -webkit-transition: all 400ms ease; -moz-transition: all 400ms ease; -webkit-transform-origin: 50% 0%; -moz-transform-origin: 50% 0%; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -webkit-transform: translate3d( 0px, 0px, 0 ) rotateX( 0 );-moz-transform: translate3d( 0px, 0px, 0 ) rotateX( 0 );} p .homeArticleCorps a:hover span, #mainContainerArticle article #articleContent .linkArticle:hover span{background: #900;-webkit-transform: translate3d( 0px, 0px, -30px ) rotateX( 90deg );-moz-transform: translate3d( 0px, 0px, -30px ) rotateX( 90deg );} p .homeArticleCorps a span:after, #mainContainerArticle article #articleContent .linkArticle span:after{ content: attr(data-title); display: block; position: absolute; left: 0; top: 0; padding: 0 2px; color: #fff; background: #c00; -webkit-transform-origin: 50% 0%;-moz-transform-origin: 50% 0%; -webkit-transform: translate3d( 0px, 105%, 0px ) rotateX( -90deg );-moz-transform: translate3d( 0px, 105%, 0px ) rotateX( -90deg ); } /* content article*/ #mainContainerArticle{width: 1100px; margin: 50px auto; position: relative;} #mainContainerArticle #blocHeader{width: 299px; float: left; margin-bottom: 1px;} #mainContainerArticle article{width: 800px; float: right; margin-bottom: 1px; background: #fff;} #mainContainerArticle #outBrainContainer{width: 299px; position: absolute; top: 300px; left: 0; margin-bottom: 1px;} #mainContainerArticle #advertisingArea{width: 800px; float: right; margin-bottom: 1px; background: #fff;} #mainContainerArticle #commentaires{float: right; width: 800px; margin-bottom: 1px;} #mainContainerArticle #posterCommentaires{width: 299px; float: left; margin-bottom: 1px;} #mainContainerArticle hr{visibility: hidden; clear: both; height: 0;} #mainContainerArticle div h3{font-family: 'DINEngschriftStdRegular'; font-size: 30px; text-transform: uppercase; border-bottom: solid 1px #666; color: #666; margin: 15px 20px;} #mainContainerArticle article #articleDate{font-family: 'DINEngschriftStdRegular'; color: #c00; border-bottom: solid 3px #333; text-align: right; font-size: 16px; margin: 5px 20px 0 20px; padding-top: 5px; text-transform: uppercase;} #mainContainerArticle article #articleTitre{font-family: 'DINEngschriftStdRegular'; font-size: 60px; text-transform: uppercase; line-height: 60px; margin: 10px 0 30px 20px; text-decoration: none; color: #333; width: 400px; } #mainContainerArticle article #articleContent{margin: 75px 100px 30px 200px; text-align: justify; border-left: solid 1px #999; padding-left: 15px; position: relative;} #mainContainerArticle article #articleContent p{margin: 25px 0;} /*#mainContainerArticle article #articleContent:first-letter{float: left; font-size: 80px; line-height: 60px; margin: 0px 6px 0 0; color: #c00;} #mainContainerArticle article #articleContent p{margin-bottom: 20px;}*/ #mainContainerArticle article #articleContent a{color: #c00; text-decoration: none; display: inline; border-bottom: dotted 1px #c00;} #mainContainerArticle article #articleContent a:hover{color: #000;} #mainContainerArticle article #articleContent #articleCategory{position: absolute; top: 0; left: -180px; text-align: right; width: 160px; font-style: italic; color: #999;} #mainContainerArticle article #articleContent blockquote{clear: both; background-color: #c00; color: #fff; font-family: 'DINEngschriftStdRegular'; text-transform: uppercase; margin: 0; padding: 2px 5px 0 5px; border-top: solid 3px #600; } #mainContainerArticle article #articleContent blockquote:before{content: 'é'; font-family: 'pictos'; text-transform: none; float: left; margin-right: 5px; color: #000;} #mainContainerArticle article #articleContent h2{font-family: 'DINEngschriftStdRegular'; font-size: 30px; text-transform: uppercase; margin: 0; color: #333; clear: both; padding:10px 0; border-bottom: solid 1px #333; margin: 30px 0; font-weight: normal; color: #c00; text-align: left; line-height: 30px;} #mainContainerArticle article #articleContent .articleBlogImage{float: left; position: relative; width: 300px; margin: 0 10px 5px -200px; display: block; background-color: #333; border: solid 10px #fff; text-decoration: none; color: #fff; font-style: italic; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; clear: both;} #mainContainerArticle article #articleContent .articleBlogImage img{ display: block; margin: 0; padding: 0; width: 100%; height: auto;} #mainContainerArticle article #articleContent .articleBlogImage span{display: block; padding: 5px; text-align: center;} #mainContainerArticle article #articleContent .articleBlogImage:after{content: '8'; font-family: pictos; color: #fff; top: 10px; right: 15px; font-size: 30px; position: absolute; -webkit-transition: font-size 1s ease; -moz-transition: font-size 1s ease; -ms-transition: font-size 1s ease; -o-transition: font-size 1s ease; transition: font-size 1s ease; text-shadow: 0 0 3px #000} #mainContainerArticle article #articleContent .articleBlogImage:hover{box-shadow: 0 0 5px #000; color: #fff;} #mainContainerArticle article #articleContent .articleBlogImage:hover:after{font-size: 50px;} #signature{font-style: italic; border-top: solid 1px #666; text-align: right; margin-top: 75px; display: block; clear: both;} #outBrainContainer{ background-color: #fff;} #outBrainContainer .OUTBRAIN{padding: 0 15px 15px 15px;} #outBrainContainer a{ color: #333; text-decoration: none; display: block; height: auto; position: relative;} #outBrainContainer a:hover{color: #c00;} #outBrainContainer a:before{content: ')'; font-family: 'pictos'; padding: 1px 10px 5px 0;} #outBrainContainer .ob-text-content{display: block;} #outBrainContainer .ob_org_header, #outBrainContainer .ob_ads_header {font-family: 'DINEngschriftStdRegular'; font-size: 20px; text-transform: uppercase; margin: 20px 0 10px 0;border-bottom: 1px solid #ccc;display: block; height: auto; position: relative;} /* commentaires */ #commentaires{background-color: #fff;} .commentaire{clear: both; margin: 50px 100px 25px 200px; text-align: justify; border-left: solid 1px #999; padding-left: 15px; position: relative; min-height: 100px;} .commentaire p{} .commentaire p a{color: #c00; text-decoration: none; display: inline; border-bottom: dotted 1px #c00;} .commentaire p a:hover{color: #000;} .commentaire br{margin-bottom: 15px;} .auteur{position: absolute; top: 0; left: -180px; text-align: right; width: 160px; color: #999; font-style: italic;} .auteur span{display: block;} .auteur span a{color: #c00; text-decoration: none;} #posterCommentaires{ background-color: #fff;} #posterCommentaires form{margin: 20px 30px 20px 20px;} #posterCommentaires form input{width: 100%; border: none; background-color: #eee; font-family: Times, serif; font-size: 20px; padding: 5px; margin: 0 0 1px 0; box-sizing: content-box; -moz-box-sizing: content-box; -webkit-box-align: stretch;} #posterCommentaires form textarea{width: 100%; border: none; background-color: #eee; font-family: Times, serif; font-size: 20px; padding: 5px; margin: 0 0 1px 0; resize: none; box-sizing: content-box; height: 250px;} *:focus{outline: none;} #posterCommentaires form #comment-preview, #posterCommentaires form #comment-post{background: #333; color: #fff; cursor: pointer;} #posterCommentaires form #comment-preview:hover, #posterCommentaires form #comment-post:hover{background: #c00;} /* Responsive resize for articles */ @media only screen and (max-width:1150px){ #mainContainerArticle{width:90%; margin: 50px 2% 50px 8%;} #mainContainerArticle #blocHeader{float: none; margin: auto;} #mainContainerArticle article{float: none; width: 100%; padding: 15px 0;} #mainContainerArticle #outBrainContainer{width: 100%; position: relative; top: auto; left: auto; padding: 15px 0;} #mainContainerArticle #advertisingArea{width: 100%; float: none; padding: 15px 0;} #mainContainerArticle #commentaires{width: 100%; float: none; padding: 15px 0;} #mainContainerArticle #posterCommentaires{width: 100%; float: none; padding: 15px 0;} #mainContainerArticle hr{display: none; clear: none;} #mainContainerArticle div h3{margin: 0 10px 15px 10px;} } @media only screen and (max-width:850px){ #mainContainerArticle{width:88%; margin: 50px 2% 50px 10%;} #maincontainerarticle article #articletitre{font-size: 40px; line-height: 40px; width: 75%;} #maincontainerarticle article #articlecontent{margin: 50px;} #maincontainerarticle article #articlecontent .articleblogimage{float: none; width:100%; margin: 25px 0; border: none;} .commentaire{clear: both; margin: 25px 10px 0 10px; text-align: justify; border: none; min-height: auto; padding: 0;} .auteur{position: relative; top: 0; left: 0; text-align: left; width: auto; font-style: italic; color: #666; border-bottom: solid 1px #666; padding: 5px 0; margin-bottom: 5px;} .auteur span{display: inline;} .auteur span:after{content: ' | '} #mainContainerArticle article #articleDate{margin: 5px 10px 0 10px;} #mainContainerArticle article #articleTitre{margin: 10px 10px 30px 10px;} } @media only screen and (max-width:500px){ #mainContainerArticle{margin: 50px 0; width: auto;} #maincontainerarticle article #articlecontent{margin: 50px 10px; border: none; padding: 0;} body{background: none;} body, html{overflow-x: hidden;} p .homeArticleCorps a, #mainContainerArticle article #articleContent .linkArticle{display: inline;} p .homeArticleCorps a:hover, #mainContainerArticle article #articleContent .linkArticle:hover{border: none; padding-bottom: 1px; } p .homeArticleCorps a span, #mainContainerArticle article #articleContent .linkArticle span{display: inline;} p .homeArticleCorps a:hover span, #mainContainerArticle article #articleContent .linkArticle:hover span{background: #c00; -webkit-transform: translate3d( 0px, 0px, 0 ) rotateX( 0 );-moz-transform: translate3d( 0px, 0px, 0 ) rotateX( 0 ); color: #fff;} p .homeArticleCorps a span:after, #mainContainerArticle article #articleContent .linkArticle span:after{display: none; content: '';} } /* Footer */ footer{position:fixed; top: 0; left: 0; height: 100%;} #footerFond{position:absolute; top: 0; left: 0; height: 100%; width: 30px; background-color: #666; overflow: hidden; -webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; -o-transition: all 0.2s linear; transition: all 0.2s linear;} footer:hover #footerFond{width: 105px; } footer nav{position: absolute; top: 50%; margin-top: -100px;} footer nav .footerItemMenuContainer{width: 30px;overflow: hidden; -webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; -o-transition: all 0.2s linear; transition: all 0.2s linear; position: relative;} footer:hover nav .footerItemMenuContainer{width: 100px;overflow: visible;} footer nav .footerItemMenuContainer .footerMenuItem{width: 100px; font-size: 18px; display: block; font-family: 'pictos'; position: relative; height: 25px; text-decoration: none; color: #fff; padding:3px 0 3px 5px; margin-bottom: 1px; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; overflow: hidden;} footer nav .footerItemMenuContainer:hover .footerMenuItem{background-color:#c00; color: #fff;} footer nav .footerItemMenuContainer .footerMenuItem span{position: absolute; top: 3px; left: 20px; width: 150px; font-family: 'DINEngschriftStdRegular'; text-transform: uppercase; margin-left: 10px; opacity: 0; -webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; -o-transition: all 0.2s linear; transition: all 0.2s linear;} footer:hover nav .footerItemMenuContainer .footerMenuItem span{opacity: 1;} footer nav .footerItemMenuContainer:hover .footerMenuItem span{-webkit-animation:footerLienAnimation 300ms ease-out; -moz-animation:footerLienAnimation 300ms ease-out; -o-animation:footerLienAnimation 300ms ease-out; -ms-animation:footerLienAnimation 300ms ease-out; animation:footerLienAnimation 300ms ease-out;} footer nav .footerItemMenuContainer .footerMenuItem p{} footer nav .footerItemMenuContainer:hover .footerMenuItem p{-webkit-animation:footerPictoAnimation 300ms ease-out; -moz-animation:footerPictoAnimation 300ms ease-out; -o-animation:footerPictoAnimation 300ms ease-out; -ms-animation:footerPictoAnimation 300ms ease-out; animation:footerPictoAnimation 300ms ease-out;} footer nav .footerItemMenuContainer .footerInfobulle{position: absolute; top: 0; margin-left: 108px; background-color: rgba(0,0,0,.9); font-style: italic; font-size: 20px; color: #fff; padding: 5px; text-align: center; width: 230px; -webkit-transform:translate(50px, 200px) rotate(90deg); -moz-transform:translate(50px, 200px) rotate(90deg); -o-transform:translate(50px, 200px) rotate(90deg); -ms-transform:translate(50px, 200px) rotate(90deg); transform:translate(50px, 200px) rotate(90deg); opacity: 0; -webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; -o-transition: all 0.2s linear; transition: all 0.2s linear; visibility: hidden; overflow: visible; text-decoration: none;} footer nav .footerItemMenuContainer:hover .footerInfobulle{-webkit-transform:translate(0, 0) rotate(0); -moz-transform:translate(0, 0) rotate(0); -o-transform:translate(0, 0) rotate(0); -ms-transform:translate(0, 0) rotate(0); transform:translate(0, 0) rotate(0); opacity: 1; visibility: visible;} footer nav .footerItemMenuContainer #footerInfobulleApropos{position: absolute; top: -147px; margin-left: 108px; background-color: rgba(0,0,0,.9); font-style: italic; font-size: 20px; color: #fff; padding: 20px; text-align: justify; width: 650px; -webkit-transform: translate(50px, 800px) rotate(90deg); -moz-transform:translate(50px, 800px) rotate(90deg); -o-transform:translate(50px, 800px) rotate(90deg); -ms-transform:translate(50px, 800px) rotate(90deg); transform:translate(50px, 800px) rotate(90deg); opacity: 0; -webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; -o-transition: all 0.2s linear; transition: all 0.2s linear; visibility: hidden; overflow: visible;} footer nav .footerItemMenuContainer #footerInfobulleApropos img{display: block; float: left; margin: 0 15px 75px 0;} footer nav .footerItemMenuContainer:hover #footerInfobulleApropos{-webkit-transform:translate(0, 0) rotate(0); -moz-transform:translate(0, 0) rotate(0); -o-transform:translate(0, 0) rotate(0); -ms-transform:translate(0, 0) rotate(0); transform:translate(0, 0) rotate(0); opacity: 1; visibility: visible;} footer nav .footerItemMenuContainer .footerInfobulle:before, footer nav .footerItemMenuContainer #footerInfobulleApropos:before {right: 100%; border: solid transparent; content: ""; position: absolute; border-right-color: rgba(0,0,0,.9); border-width: 7px; top: 50%; margin-top: -7px; } footer nav .footerItemMenuContainer #versLibeInfobulle{width: 170px;} footer nav .footerItemMenuContainer #RSSInfobulle{width: 160px;} footer #footerArchives, footer #footerLiens{ position: absolute; top: 0; left: 0; height: 100%; color: #fff; margin-left: -1000px; -webkit-column-gap: 0; -webkit-column-width: 200px; -moz-column-gap: 0; -moz-column-width: 200px; width: 200px; display: block;} footer #footerArchives a, footer #footerLiens a, footer #footerLiens span{background-color: #eee; padding: 3px 5px 3px 30px; border-bottom: dotted 1px #999; font-family: 'SciencestexteRegular'; font-size: 20px; border-left: dotted 1px #999; display: block; color: #666; text-decoration: none; -webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; -o-transition: all 0.2s linear; transition: all 0.2s linear; position: relative; } footer #footerLiens a{} footer #footerLiens a.links-title{background-color: #c00; color: #fff; font-family: 'DINEngschriftStdRegular'; text-transform: uppercase; padding-left: 10px;} footer #footerLiens a.links-title:before{display: none;} footer #footerArchives a:hover, footer #footerLiens a:hover{background-color: #c00; color: #fff;} footer #footerArchives a:before, footer #footerLiens a:before{content: '>'; font-family: pictos; position: absolute; top: 5px; left: 5px;} /* nav */ #navigation{width: 100%; padding: 20px 0 20px 0; border-top: solid 1px #ccc; color: #666; text-align: center; margin-top: 30px; clear: both;} #navigation a{color: #666; text-decoration: none; margin: 20px; font-weight: normal; font-style: normal; font-family: SciencestexteRegular;} #navigation a:hover{color: #c00;} #navigation_commentaires{display: block; text-align: center; margin: 20px; border-top: solid 1px #999; padding-top: 15px;} #navigation_commentaires a{text-decoration: none; border-bottom: dotted 1 px #c00; color: #c00; margin: 0 20px;} #navigation_commentaires a:hover{color: #000;} /* by */ #by{padding: 15px; border-top: solid 1px #ccc; color: #666; text-align: center; clear: both; margin-bottom: 50px; font-size: 15px; font-family: SciencestexteRegular;} #by a{font-family: 'DINEngschriftStdRegular'; text-decoration: none; border-bottom: dotted 1px #c00; color: #c00; text-transform: uppercase; padding: 0 2px 0 2px; font-weight: normal; font-style: normal;} #by a:hover{color: #fff; background-color: #c00;} /* Pages des liens et des archives*/ #titre_listes_archives_liens{display: block; margin: 25px auto; border-top: solid 3px #333; font-family: 'DINEngschriftStdRegular'; background: #fff; padding: 5px; max-width: 750px; text-transform: uppercase; font-weight: normal;} #liste_archives_liens{max-width: 750px; margin: 25px auto;} #liste_archives_liens a{ display: block; float: left; background-color: #333; padding: 3px 5px 3px 30px; position: relative; color: #fff; text-decoration: none; margin: 0 1px 1px 0} #liste_archives_liens .links-title{font-family: 'DINEngschriftStdRegular'; color: #c00; text-transform: uppercase; float: none; clear: both; padding: 25px 0 5px 0; margin: 10px 0; border-bottom: solid 1px #c00; background: none;} #liste_archives_liens .links-title:before{display: none;} #liste_archives_liens .links-title:hover{background: none; color: #c00;} #liste_archives_liens a:before{content: '>'; font-family: pictos; position: absolute; top: 5px; left: 5px;} #liste_archives_liens a:hover{background: #c00; color: #fff;} /* Supprimer bold et italique en suite d'article */ .container_nostrong_noem strong{font-weight: normal; font-family: SciencestexteRegular;} .container_nostrong_noem em{font-style: normal; font-family: SciencestexteRegular;} footer{font-style: normal; font-weight: normal;} /* pubs ligasux */ #advertisingArea iframe{margin: 20px;} /*lightbox*/ #sciencesBox{position: fixed; top: 0; left: 0; z-index: 999999; width: 100%; height: 100%; background: rgba(0,0,0,0.8); color: #fff;} #sciencesBox .boxImage{margin: auto; top: 50%; position: absolute; left: 50%; overflow: hidden; background: rgba(0,0,0,0.8); border: solid 10px #000; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; height: 250px; width: 300px; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -ms-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease; margin-left: -150px; margin-top: -125px;} #sciencesBox .boxImage img{opacity: 0;} #sciencesBox .boxImage span{position: absolute; top: -7px; right: -7px; background: rgba(0,0,0,0.3); font-family: 'DINEngschriftStdRegular'; padding: 10px 15px 5px 10px; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; cursor: pointer;} #sciencesBox .boxImage p{display: block; background: rgba(0,0,0,0.6); position: absolute; bottom: 0; left: 0; padding: 15px; width: 100%; opacity: 0.2;} #sciencesBox .boxImage p:hover{opacity: 1;} #sciencesBox .boxImage .boxLoader{text-align: center; margin-top: 100px;} #sciencesBox .boxImage .boxLoader img{display: block; opacity: 1; margin-left: 136px;} /* Responsive resize */ /* Large desktop screen */ @media only screen and (max-width:1150px){ header{height: 90px;} header nav{margin: auto; width: 900px;} header nav a{width: 280px; border: none; height: 30px; position: relative;margin-left: 20px;} header nav a span{font-family: 'pictos'; position: relative; display: inline; text-align: left; width: 150px; font-size: 20px; padding: 2px 5px 2px 5px; line-height: 25px;} header nav a p{font-size: 18px; width: 250px; text-align: left; display: inline; padding: 5px; top: 0} } /* tablets */ @media only screen and (max-width:965px){ header{height: 120px;} header nav{width: 600px;} } @media only screen and (max-width:800px){ #lienApropos{display: none;} article #BlogBlocHuet{height: 394px;} } @media only screen and (max-width:680px){ article #BlogBlocHuet{height: 394px;} header{height: 240px; margin-top: -240px; position: fixed; top: 0; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; width: 100%; z-index: 999999;} header:hover{margin-top: 0;} header nav{width: 300px;} header #HeaderHintMobile{visibility: visible; position: absolute; top: 240px; left: 50%; width: 150px; margin-left: -75px; text-align: center; background-color: #fff; border: solid 1px #ccc; font-family: 'DINEngschriftStdRegular'; text-transform: uppercase; color: #c00; padding: 3px 0 3px 0;} header:hover #HeaderHintMobile{opacity: 0;} } #mobileFooter{background: #666; position: fixed; bottom: 0; left: 0; width: 100%; text-align: center; padding: 5px 0; box-shadow: 0 0 5px #000; display: none;} #mobileFooter a{color: #fff; text-decoration: none; font-family: pictos; margin: 0 5px; font-size: 25px;} /* mobiles */ @media only screen and (max-width:500px){ #mainContainerHome{padding: 0;} footer{display:none;} #mobileFooter{display: block;} } /* Responsive layer for main page */ @media only screen and (min-width : 0px){#main{width: 300px;}} @media only screen and (min-width : 650px){#main{width: 600px;}} @media only screen and (min-width : 950px){#main{width: 900px;}} @media only screen and (min-width : 1250px){#main{width: 1200px;}} @media only screen and (min-width : 1550px){#main{width: 1500px;}} @media only screen and (min-width : 1850px){#main{width: 1800px;}} @media only screen and (min-width : 2150px){#main{width: 2100px;}} @media only screen and (min-width : 2450px){#main{width: 2400px;}} @media only screen and (min-width : 2750px){#main{width: 2700px;}} @media only screen and (min-width : 3050px){#main{width: 3000px;}} @media only screen and (min-width : 3350px){#main{width: 3300px;}} @media only screen and (min-width : 3650px){#main{width: 3600px;}} /* Animations */ @-webkit-keyframes headerPictoAnimation{from{opacity:0;-webkit-transform:translate(-50px, -50px) rotate(-90deg); } to{opacity:1;-webkit-transform:translate(0, 0) rotate(0);}} @-moz-keyframes headerPictoAnimation{from{opacity:0;-moz-transform:translate(-50px, -50px) rotate(-90deg); } to{opacity:1;-moz-transform:translate(0, 0) rotate(0);}} @-o-keyframes headerPictoAnimation{from{opacity:0;-o-transform:translate(-50px, -50px) rotate(-90deg); } to{opacity:1;-o-transform:translate(0, 0) rotate(0);}} @-ms-keyframes headerPictoAnimation{from{opacity:0;-ms-transform:translate(-50px, -50px) rotate(-90deg); } to{opacity:1;-ms-transform:translate(0, 0) rotate(0);}} @keyframes headerPictoAnimation{from{opacity:0; transform:translate(-50px, -50px) rotate(-90deg); } to{opacity:1; transform:translate(0, 0) rotate(0);}} @-webkit-keyframes headerLienAnimation{from{opacity:0;-webkit-transform:translate(0px, 100px) rotate(0); } to{opacity:1;-webkit-transform:translate(0, 0) rotate(0);}} @-moz-keyframes headerLienAnimation{from{opacity:0;-moz-transform:translate(-50px, 50px) rotate(90deg); } to{opacity:1;-moz-transform:translate(0, 0) rotate(0);}} @-o-keyframes headerLienAnimation{from{opacity:0;-o-transform:translate(-50px, 50px) rotate(90deg); } to{opacity:1;-o-transform:translate(0, 0) rotate(0);}} @-ms-keyframes headerLienAnimation{from{opacity:0;-ms-transform:translate(-50px, 50px) rotate(90deg); } to{opacity:1;-ms-transform:translate(0, 0) rotate(0);}} @keyframes headerLienAnimation{from{opacity:0;transform:translate(-50px, 50px) rotate(90deg); } to{opacity:1;transform:translate(0, 0) rotate(0);}} @-webkit-keyframes footerPictoAnimation{from{opacity:0;-webkit-transform:translate(-150px, 0); } to{opacity:1;-webkit-transform:translate(0, 0);}} @-moz-keyframes footerPictoAnimation{from{opacity:0;-moz-transform:translate(-150px, 0); } to{opacity:1;-moz-transform:translate(0, 0);}} @-o-keyframes footerPictoAnimation{from{opacity:0;-o-transform:translate(-150px, 0); } to{opacity:1;-o-transform:translate(0, 0);}} @-ms-keyframes footerPictoAnimation{from{opacity:0;-ms-transform:translate(-150px, 0); } to{opacity:1;-ms-transform:translate(0, 0);}} @keyframes footerPictoAnimation{from{opacity:0;transform:translate(-150px, 0); } to{opacity:1;transform:translate(0, 0);}} @-webkit-keyframes footerLienAnimation{from{opacity:0;-webkit-transform:translate(0, 50px); } to{opacity:1;-webkit-transform:translate(0, 0);}} @-moz-keyframes footerLienAnimation{from{opacity:0;-moz-transform:translate(0, 50px); } to{opacity:1;-moz-transform:translate(0, 0);}} @-o-keyframes footerLienAnimation{from{opacity:0;-o-transform:translate(0, 50px); } to{opacity:1;-o-transform:translate(0, 0);}} @-ms-keyframes footerLienAnimation{from{opacity:0;-ms-transform:translate(0, 50px); } to{opacity:1;-ms-transform:translate(0, 0);}} @keyframes footerLienAnimation{from{opacity:0;transform:translate(0, 50px); } to{opacity:1;transform:translate(0, 0);}} /* ph=1 */ /* FILE ARCHIVED ON 13:53:30 Apr 18, 2013 AND RETRIEVED FROM THE INTERNET ARCHIVE ON 08:22:19 Aug 12, 2022. JAVASCRIPT APPENDED BY WAYBACK MACHINE, COPYRIGHT INTERNET ARCHIVE. ALL OTHER CONTENT MAY ALSO BE PROTECTED BY COPYRIGHT (17 U.S.C. SECTION 108(a)(3)). */ /* playback timings (ms): captures_list: 74.103 exclusion.robots: 0.089 exclusion.robots.policy: 0.08 RedisCDXSource: 0.746 esindex: 0.008 LoadShardBlock: 53.605 (3) PetaboxLoader3.datanode: 66.685 (4) CDXLines.iter: 16.455 (3) load_resource: 52.078 PetaboxLoader3.resolve: 24.779 */