/* ==========================================================================
Author's custom styles
========================================================================== */
a, a:hover, a:focus {
text-decoration: none;
transition-property: background-color, color, width, height;
transition-timing-function: ease-in;
transition-duration: 0.2s;
}
a{color: #707173;}
a:hover, a:focus{ color: #009fe0;}
strong{ color: #008DC2}
a.link {
text-align: right;
display: inline-block;
text-transform: uppercase;
font-family: 'Open Sans Condensed', sans-serif;
font-weight: 700;
float: right;
cursor: pointer;
}
body, .popover-content{
font-family: 'Nunito', sans-serif;
color: #707173;
font-weight: 300;
}
/*
------------------------------
Colors
------------------------------
Gris clair: #E6E7E8
Gris Foncé: #707173
Bleu vif: #009ee0;
bleu foncé: #008DC2;
------------------------------
Typo
------------------------------
font-family: 'Open Sans Condensed', sans-serif;
font-family: 'Nunito', sans-serif;
------------------------------
Header
------------------------------
*/
.wrapper{
background:url('../img/background.png') no-repeat top right;
margin:0;
padding:0 0 190px 0;
-webkit-background-size: cover; /* pour anciens Chrome et Safari */
background-size: cover; /* version standardisée */
overflow: visible;
}
.brand{
/*margin-top:35px;*/
position: relative;
z-index: 100;
}
.base-line{
background: #009fe0;
color: #fff;
display: inline;
}
h2.base-line{
padding: 8px 16px;
font-size: 1.15em;
}
.brand h3.unige{
border: 0;
font: 0/0 a;
text-shadow: none;
color: transparent;
background: url(../img/unige.png) no-repeat;
width: 200px;
height: 72px;
margin-bottom: 40px;
}
.brand h2{
margin-left:140px;
font-family: 'Montserrat', sans-serif;
}
.brand h1{
margin-left: 40px;
border: 0;
font: 0/0 a;
text-shadow: none;
color: transparent;
background: url(../img/les-recherches-au-fil-du-rhone.png) no-repeat;
width: 380px;
height: 143px;
}
.expo h2{
margin-top: 0px;
float: right;
margin-right: 140px;
z-index: 2;
position: relative;
border: 0;
font: 0/0 a;
text-shadow: none;
color: transparent;
background: url('../img/slogan-2.png') no-repeat;
width: 370px;
height: 270px;
}
/*
------------------------------
ICons
------------------------------
*/
.dv-icon{
display: block;
width: 60px;
height: 60px;
border: 0;
font: 0/0 a;
text-shadow: none;
}
.small-dv-icon{
display: block;
width: 40px !important;;
height: 40px !important;
border: 0;
font: 0/0 a;
text-shadow: none;
}
.dv-icon-video{
background: url('../img/icon-video.png') no-repeat;
}
.dv-icon-star {
background: url('../img/icon-star.png') no-repeat;
}
.dv-icon-inauguration {
background: url('../img/icon-inauguration.png') no-repeat;
}
.dv-icon-biodiversite{
background: url('../img/icon-transparent-biodiversite.png') no-repeat;
}
.dv-icon-climat{
background: url('../img/icon-transparent-climat.png') no-repeat;
}
.dv-icon-climat-button{
background: url('../img/icon-climat.png') no-repeat;
}
.dv-icon-water{
background: url('../img/icon-transparent-water.png') no-repeat;
}
.dv-icon-energie{
background: url('../img/icon-transparent-energie.png') no-repeat;
}
.dv-icon-city{
background: url('../img/icon-transparent-city.png') no-repeat;
}
.dv-icon-action{
background: url('../img/icon-button.png') no-repeat 0 0;
}
.dv-icon-energie-button{
background: url('../img/icon-transparent-energie-button.png') no-repeat;
}
.dv-icon-climat-button{
background: url('../img/icon-transparent-climat-button.png') no-repeat;
}
.dv-icon-biodiversite-button{
background: url('../img/icon-transparent-biodiversite-button.png') no-repeat;
}
.dv-icon-city-button{
background: url('../img/icon-transparent-city-button.png') no-repeat;
}
.dv-icon-water-button{
background: url('../img/icon-transparent-water-button.png') no-repeat;
}
/*
------------------------------
Content
------------------------------
*/
.main-content{
border-top: 1px solid #E6E7E8;
border-right: 1px solid #E6E7E8;
background-color: rgba(255, 255, 255, 0.9);
background-image: url('../img/border-left-wrapper.png');
background-repeat: repeat-y;
background-position: 0 200px;
padding-left: 80px;
padding-right: 15px;
padding-bottom: 120px;
}
.main-content h2, .main-content h3{
color: #707173;
font-family: 'Open Sans Condensed', sans-serif;
font-weight: 400;
text-transform: uppercase;
}
.block-title {
min-height: 90px;
}
.block-title h2{
line-height: 60px;
vertical-align: middle;
margin-left: 70px;
}
.block-title h2 span{
display:inline-block;
line-height:normal; /* on rétablit le line-height */
}
.main-content hr{
margin-top: 35px;
margin-bottom: 20px;
border: 0;
border-top: 2px dotted #707173;
}
.promo{
padding: 20px 0;
background: url("../img/textture-block.png") top right no-repeat;
height: 100%;
}
.promo h2{
border-top: 5px solid #008DC2;
margin: 110px 0 210px 60px;
text-align: right;
padding: 20px 10px 0 0;
}
.promo h2 a{
color: #707173;
}
.promo h2 a:hover{
color: #009fe0;
}
.promo h2 a .dv-icon-action{
text-align: right;
background-position: 0 0;
float: right;
}
.promo h2 a:hover .dv-icon-action{
background-position: 0 -60px;
}
.block-large{
}
h4.subtitle{
color: #008DC2;
font-family: 'Open Sans Condensed', sans-serif;
text-transform: uppercase;
width: 350px;
margin-left: 130px;
font-size: 1.4em;
font-weight: 700;
}
.block-large .block-content{
margin: 20px 70px 20px 130px;
}
.block-content.video-container{
position: relative;
padding-bottom: 58.5%;
padding-top: 30px; height: 0; overflow: hidden;
}
.video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.article {
padding: 0 0 40px 0;
margin-bottom: 30px;
border-bottom: 1px solid #E6E7E8;
}
.content-title h2{
font-size:2.2em;
}
.content-title h3{
font-size:1.6em;
font-weight: 700;
color: #008DC2;
}
.content-body{
margin-top: 20px;
}
.image-content img{
border: 1px solid #E6E7E8;
}
.blogroll{
background: #008DC2;
color: #fff;
margin-bottom: 20px;
margin-top:40px;
}
.blogroll.darker{
background: #009ee0;
color: #fff;
margin-bottom: 20px;
margin-top:20px;
}
.blogroll h3{
color: #fff;
}
.blogroll li a{
color:#fff;
text-transform: uppercase;
font-family: "Open Sans Condensed", sans-serif;
}
.blogroll li a:hover{
text-decoration: underline;
}
.page-title{
margin: 0 0 60px 80px;
background: #009fe0;
}
.page-title h1{
color: #fff;
width: 90%;
padding: 5px 10px;
line-height: 38px;
font-size:38px;
}
.page-title h1 span.txt{
margin: 0 0 0 60px;
display: block;
}
.content-chapeau{
margin-top: 40px;
}
.content-chapeau span{
color: #009ee0;
}
.content-chapeau strong{
color: #707173!important;
}
/*
------------------------------
Sticky Date
------------------------------
*/
.sticky-date {
position: fixed;
height: 108px;
bottom: 0;
right:0;
width: 294px;
background: url('../img/sticky-date.png');
text-align: right;
color: #fff;
padding: 8px 20px;
font-family: "Open Sans Condensed", sans-serif;
font-size: 1em;
z-index:100
}
.sticky-date h3,.sticky-institu h3 {
text-transform: uppercase;
font-size: 1.45em;
color:#fff;
}
.sticky-institu{
z-index: 100;
position: fixed;
height: 168px;
bottom: 0;
left:0;
width: 449px;
background: url('../img/sticky-institu.png') no-repeat;
text-align: left;
color: #fff;
padding: 8px 20px;
font-family: "Open Sans Condensed", sans-serif;
font-size: 1em;
}
.sticky-institu ul li, .sticky-institu ul li > a{
color: #fff;
}
.sticky-institu ul li > a:hover{
text-decoration: underline;
}
/*
------------------------------
Map
------------------------------
*/
.row.nav {
margin: 0 auto 30px auto;
text-align: center;
}
.nav-map{
text-align: center;
margin: 0 auto;
list-style: none;
}
.nav-map li a {
float: left;
display: inline-block;
height: 150px;
width: 150px;
border-radius: 50%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
color: #fff;
font-family: Open Sans Condensed;
font-weight: 400;
text-align: center;
text-transform: uppercase;
background: #707173;
vertical-align: middle;
margin: 10px 28px;
padding: auto 5px;
font-size: 1.1em;
transition-property: background-color, color, width, height;
transition-timing-function: ease-in;
transition-duration: 0.2s;
}
.nav-map li a i.dv-icon{
text-align: center;
background-size: 70px 62px;
margin: 22px auto 0 auto;
height: 62px;
width: 70px;
}
.nav-map li a span{margin-top: 0; padding: 0}
.nav-map li a:hover,
.nav-map li a:focus,
.nav-map li a.active{
background: #009ee0;
}
.map{
margin-top:40px;
}
.map-wrapper{
position: relative;
margin-bottom: 80px;
}
.map img{
border: 3px solid #E6E7E8;
width: 100%;
}
a.map-marker{
background: url('../img/marker.png');
width: 38px;
height: 51px;
display: block;
position: absolute;
z-index: 80;
border: 0 none transparent;
cursor: pointer;
padding: 10px 14px;
font-weight: bold;
}
a#marker-1{
right: 0%;
top: 10%;
color: white;
}
a#marker-2{
right: 9%;
top: 19%;
}
a#marker-3{
right: 22%;
top: 32%
}
a#marker-4{
right: 35%;
top: 13%;
}
a#marker-5{
right: 39%;
top: 12%;
}
a#marker-6{
right: 42%;
top: 14%;
}
a#marker-7{
right: 86%;
top: 93%;
}
a#marker-8{
right: 49%;
top: 15%;
}
a#marker-9{
right:47%;
top:25%;
}
a#marker-10{
right: 51%;
top: 23%;
}
a#marker-11{
right: 49%;
top: 21%;
}
a#marker-12{
right:50%;
top:27%;
}
a#marker-13{
right:61%;
top:53%
}
a#marker-14 {
right: 20%;
top:23%;
}
.chapeau{
margin-top:40px;
}
h3.popover-title{
font-size: 1.5em;
text-transform: uppercase;
}
.ofil2o .popover{
width: 340px;
}
.popover .small-dv-icon {
margin: 5px
}
.map-listing{
}
.map-listing a.map-marker{
display: inline-block;
margin: 0 10px;
}
.map-listing h2{
line-height: 51px;
vertical-align: middle;
margin: 0 0 0 60px;
}
.map-listing .content-title{
margin-top:20px
}
.map-listing .content-body i {
margin: 0 10px 10px 0
}
/* pager */
.pager{
border-top: 1px solid #E6E7E8;
padding-top: 30px;
}
.pager li>a, .pager li>span {
display: inline-block;
padding: 5px 14px;
background-color: #E6E7E8;
border: 1px solid #fff;
border-radius: 10px;
font-family: 'Montserrat', sans-serif;
font-weight: normal;
}
.pager li.disabled,
.pager li.disabled>a:hover,
.pager li.disabled>a:focus{
color: #666!important;
}
.pager li>a:hover {
background: #008DC2;
color: #fff!important;
}
/* menu--------- */
.menu h3{
text-transform: uppercase;
font-family: 'Open Sans Condensed', sans-serif;
margin-top: 0;
}
.menu .nav.nav-pills{
text-transform: uppercase;
font-family: 'Open Sans Condensed', sans-serif;
}
.menu .nav-pills>li.active>a,
.menu .nav-pills>li.active>a:hover,
.menu .nav-pills>li.active>a:focus {
color: #fff;
background-color: #009ee0;
}
@media (max-width: 1024px) {
.nav-map li a{
height: 110px;
width: 110px;
font-size: 0.8em;
margin: 10px ;
}
.brand {
background-color: rgba( 255, 255, 255, 0.8);
margin-top:0;
}
.brand h3{
margin-top:0;
padding-top: 10px;
}
}
@media (min-width: 1650px) {
.wrapper {
background: url('../img/background.png') no-repeat right -125px;
margin:0;
padding:0;
-webkit-background-size: cover; /* pour anciens Chrome et Safari */
background-size: cover; /* version standardisée */
overflow: visible;
}
}