app/assets/stylesheets/shared/maquette.css.scss
/* =============================================================================
IMPORT GLOBAL VAR
========================================================================== */
@import "variables";
/* =============================================================================
FONTS
========================================================================== */
@font-face {
font-family: 'SteelfishRegular';
src: font-url('steelfish_rg-webfont.eot');
src: font-url('steelfish_rg-webfont.eot?#iefix') format("embedded-opentype"),
font-url('steelfish_rg-webfont.woff') format("woff"),
font-url('steelfish_rg-webfont.ttf') format("truetype"),
font-url('steelfish_rg-webfont.svg#SteelfishRegular') format("svg");
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'OswaldRegular';
src: font-url('oswald-webfont.eot');
src: font-url('oswald-webfont.eot?#iefix') format("embedded-opentype"),
font-url('oswald-webfont.woff') format("woff"),
font-url('oswald-webfont.ttf') format("truetype"),
font-url('oswald-webfont.svg#OswaldRegular') format("svg");
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'DINSchriftRegular';
src: font-url('dinengschrift-alternate-webfont-webfont.eot');
src: font-url('dinengschrift-alternate-webfont-webfont.eot?#iefix') format('embedded-opentype'),
font-url('dinengschrift-alternate-webfont-webfont.woff') format('woff'),
font-url('dinengschrift-alternate-webfont-webfont.ttf') format('truetype'),
font-url('dinengschrift-alternate-webfont-webfont.svg#DINSchriftRegular') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'SedonaScriptFLFRegular';
src: font-url('sedonascriptflf-webfont.eot');
src: font-url('sedonascriptflf-webfont.eot?#iefix') format('embedded-opentype'),
font-url('sedonascriptflf-webfont.woff') format('woff'),
font-url('sedonascriptflf-webfont.ttf') format('truetype'),
font-url('sedonascriptflf-webfont.svg#SedonaScriptFLFRegular') format('svg');
font-weight: normal;
font-style: normal;
}
/* =============================================================================
STICKY FOOTER
========================================================================== */
html, body {
height: 100%;
}
body{
background: #e6d2ae;
background: -moz-linear-gradient(top, #e6d2ae 0%, $white 100%) no-repeat;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e6d2ae), color-stop(100%,$white)) no-repeat;
background: -webkit-linear-gradient(top, #e6d2ae 0%,$white 100%) no-repeat;
background: -o-linear-gradient(top, #e6d2ae 0%,$white 100%) no-repeat;
background: -ms-linear-gradient(top, #e6d2ae 0%,$white 100%) no-repeat;
background: linear-gradient(top, #e6d2ae 0%,$white 100%) no-repeat;
}
#container{
min-height: 100%;
}
#main{
position:relative;
z-index:1;
padding-bottom: 95px;
&:after{
content:"";
display:block;
height:30px;
}
}
footer{
position: relative;
margin-top: -95px;
height:95px;
}
/* =============================================================================
HEADER
========================================================================== */
#header{
height: 50px;
left: 0;
overflow: visible;
position: fixed;
right: 0;
top: 0;
z-index: 10000;
}
#primaryNav{
position:relative;
z-index:100;
height:50px;
background: #8a1514; /* Old browsers */
background: -moz-linear-gradient(top, #8a1514 0%, #7b1514 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#8a1514), color-stop(100%,#7b1514));
background: -webkit-linear-gradient(top, #8a1514 0%,#7b1514 100%);
background: -o-linear-gradient(top, #8a1514 0%,#7b1514 100%);
background: -ms-linear-gradient(top, #8a1514 0%,#7b1514 100%);
background: linear-gradient(top, #8a1514 0%,#7b1514 100%);
&:after{
content:"";
display:block;
height:3px;
background: #8c0909;
background: -moz-linear-gradient(top, #8c0909 0%, #5e0b09 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#8c0909), color-stop(100%,#5e0b09));
background: -webkit-linear-gradient(top, #8c0909 0%,#5e0b09 100%);
background: -o-linear-gradient(top, #8c0909 0%,#5e0b09 100%);
background: -ms-linear-gradient(top, #8c0909 0%,#5e0b09 100%);
background: linear-gradient(top, #8c0909 0%,#5e0b09 100%);
-webkit-box-shadow: 0 2px 5px 0 $black;
-moz-box-shadow: 0 2px 5px 0 $black;
box-shadow: 0 2px 5px 0 $black;
}
ul{
position:relative;
width:960px;
height:50px;
margin:0 auto;
}
li{
display:inline-block;
line-height:50px;
background:image-url('header/header-separation.png') no-repeat right 8px;
&:first-child{
background:none;
}
}
a{
font-family: $font-steel;
letter-spacing:1px;
font-size:2em;
text-shadow: 0 2px 3px $black;
color:$link;
display:inline-block;
padding:0 10px;
&:hover, &.selected{
color:$link;
text-decoration:none;
background: radial-gradient(center bottom, ellipse farthest-side, rgba(196, 31, 31, 1) 20%, rgba(196, 31, 31, 0) 100%);
background: -moz-radial-gradient(center bottom, ellipse farthest-side, rgba(196, 31, 31, 1) 20%, rgba(196, 31, 31, 0) 100%);
background: -webkit-radial-gradient(center bottom, ellipse farthest-side, rgba(196, 31, 31, 1) 20%, rgba(196, 31, 31, 0) 100%);
background: -o-radial-gradient(center bottom, ellipse farthest-side, rgba(196, 31, 31, 1) 20%, rgba(196, 31, 31, 0) 100%);
background: -ms-radial-gradient(center bottom, ellipse farthest-side, rgba(196, 31, 31, 1) 20%, rgba(196, 31, 31, 0) 100%);
}
&:visited{
color:$link;
}
&.connectionButton{
position:absolute;
text-indent:-9999px;
outline:none;
top:1px;
right:0;
height:49px;
width:55px;
background: image-url('header/connection_button.png') no-repeat top left;
-moz-transition: width 0.8s ease;
-webkit-transition: width 0.8s ease;
-o-transition: width 0.8s ease;
transition: width 0.8s ease;
&:after{
z-index:1;
position:absolute;
top:1px;
right:0;
content: "";
display: block;
height:46px;
width:3px;
background:#1c1c1c;
border-radius:3px;
-webkit-box-shadow: 2px 0 1px 0 #8d2f30;
-moz-box-shadow: 2px 0 1px 0 #8d2f30;
box-shadow: 2px 0 1px 0 #8d2f30;
}
&:before{
position:absolute;
z-index:10;
top:4px;
right:0;
content: "";
display: block;
height:40px;
width:3px;
background:transparent;
-webkit-box-shadow: -1px 0 5px 1px $black;
-moz-box-shadow: -1px 0 5px 1px $black;
box-shadow: -1px 0 5px 1px $black;
}
&:hover{
width:162px;
}
}
&.connected{
@extend a.connectionButton;
background-position:bottom left;
}
}
#homeRailsFrance{
width:198px;
height:113px;
background: image-url('header/header-logo.png') no-repeat;
text-indent:-9999px;
padding:0;
outline:none;
&:hover{
background-position:0 100%;
}
}
}
/* =============================================================================
SECTION HEADER
========================================================================== */
#sectionHeader{
padding-top:53px;
text-align:center;
background: image-url('section-header.jpg');
height:100px;
border:none;
box-shadow:none;
hgroup{
height:100px;
background:image-url('sprite-header.png') top center no-repeat;
&.resourcesHeader{
background-position:center -100px;
}
&.connexionHeader{
background-position:center -200px;
}
&.eventHeader{
background-position:center -300px;
}
&.jobsHeader{
background-position:center -400px;
}
&.contactHeader{
background-position:center -500px;
}
&.mapHeader{
background-position:center -600px;
}
&.userHeader{
background-position:center -700px;
}
&.error404Header{
background-position:center -800px;
}
}
h1{
position:relative;
font-family:$font-steel;
font-size: 3em;
text-shadow: 0 2px 5px $black;
text-transform: uppercase;
color:#ececec;
margin:0;
padding:5px 0 0 0;
display:inline-block;
letter-spacing:2px;
&:before{
content:"";
position:absolute;
top:13%;
left:-85px;
display:block;
width:78px;
height:48px;
background: image-url('arabesques.png') center left no-repeat;
}
&:after{
content:"";
position:absolute;
top:13%;
right:-85px;
display:block;
width:78px;
height:48px;
background: image-url('arabesques.png') center right no-repeat;
}
}
span{
color:$blue;
text-shadow:0 2px 5px $black;
}
p{
color:$white;
}
}
/* =============================================================================
SECONDARY NAV
========================================================================== */
#secondaryNav{
height:46px;
background: image-url('secondary-nav.jpg') repeat-x;
padding:12px 0 10px 0;
text-align:center;
}
#secondaryNavContainer{
display:inline-block;
height:46px;
background: #8e1115;
background: -moz-linear-gradient(top, #8e1115 0%, #7d1313 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#8e1115), color-stop(100%,#7d1313));
background: -webkit-linear-gradient(top, #8e1115 0%,#7d1313 100%);
background: -o-linear-gradient(top, #8e1115 0%,#7d1313 100%);
background: -ms-linear-gradient(top, #8e1115 0%,#7d1313 100%);
background: linear-gradient(top, #8e1115 0%,#7d1313 100%);
h2{
position:relative;
top:-5px;
font-family:$font-sedona;
font-weight:normal;
color:#400404;
font-size:3.5em;
display:inline-block;
vertical-align:top;
padding:0 0 0 10px;
margin:0;
}
ul{
display:inline-block;
}
li{
vertical-align:top;
display:inline-block;
margin:0 0 0 15px;
line-height:46px;
height:46px;
&.shadow{
padding:0 0 0 20px;
background: image-url('questions/ombre-tri.png') left top no-repeat;
}
&:last-child{
padding-right:12px;
}
}
label{
display:inline-block;
text-transform:uppercase;
font-family: $font-steel;
font-size:2em;
letter-spacing:1px;
text-shadow: 0 2px 3px $black;
color:$link;
}
.simple_form{
input[type=checkbox]{
display:inline-block;
}
}
a{
text-transform:uppercase;
display:inline-block;
}
}
/* =============================================================================
FOOTER
========================================================================== */
#addContentBug{
padding-top:15px;
text-align:center;
font-family:$font-oswald;
font-size:1.0em;
a{
color:$red;
}
}
footer{
position:relative;
z-index:50;
text-align: center;
background: image-url('footer/footer-background.png') center top no-repeat;
ul{
display:inline-block;
}
li{
display:inline-block;
vertical-align:middle;
}
a{
font-family:$font-steel;
font-size:1.5em;
color:#5d2c2c;
display:inline-block;
&.footerRight:before{
content:"";
display:inline-block;
width:8px;
height:24px;
margin:0 5px 0 0;
background: image-url('footer/circle.png') left 12px no-repeat;
}
&.footerLeft:after{
@extend .footerRight:before;
margin:0 0 0 5px;
}
&:hover{
color:#5d2c2c;
text-decoration:underline;
}
}
}
#logoDotCloud{
background: image-url('footer/dotcloud.png') top center no-repeat;
width:150px;
height:35px;
text-indent:-9999px;
outline:none;
&:hover{
background-position:center 100%;
}
}
#footerBottom{
position:relative;
font-family:$font-din;
height:22px;
vertical-align:bottom;
background: image-url('footer/footer.png') repeat-x;
}
/* =============================================================================
GLOBAL CLASS
========================================================================== */
.center960{
width:960px;
margin:0 auto;
}
.navLink{
font-family: $font-steel;
font-size:2em;
letter-spacing:1px;
text-shadow: 0 2px 3px $black;
color:$link;
&:hover{
color:$link;
}
}
.sort{
@extend .navLink;
&:after{
content: "";
display:inline-block;
background:image-url('questions/sort-button.png') bottom left no-repeat;
width:22px;
height:23px;
margin-left:8px;
}
&.desc:after{
background-position:top left;
}
&.asc:after{
background-position:left -23px;
}
}
.navButton{
font-size:1.1em;
font-family:$font-din;
letter-spacing:1px;
color:$link;
background: #750a0b;
background: -moz-linear-gradient(top, #750a0b 0%, #460504 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#750a0b), color-stop(100%,#460504));
background: -webkit-linear-gradient(top, #750a0b 0%,#460504 100%);
background: -o-linear-gradient(top, #750a0b 0%,#460504 100%);
background: -ms-linear-gradient(top, #750a0b 0%,#460504 100%);
background: linear-gradient(top, #750a0b 0%,#460504 100%);
padding:0 10px 0 10px;
display:inline-block;
height:25px;
line-height:25px;
-webkit-border-radius:2px;
-moz-border-radius:2px;
border-radius:2px;
-webkit-box-shadow: 1px 2px 5px 0 $black;
-moz-box-shadow: 1px 2px 5px 0 $black;
box-shadow: 1px 2px 5px 0 $black;
-moz-transition: all 0.8s ease;
-webkit-transition: all 0.8s ease;
-o-transition: all 0.8s ease;
transition: all 0.8s ease;
&:hover, &.selected{
color:$darkRed;
background:#4d0505;
-webkit-box-shadow: inset 3px 3px 10px 0 $black;
-moz-box-shadow: inset 3px 3px 10px 0 $black;
box-shadow: inset 3px 3px 10px 0 $black;
-webkit-border-radius:4px;
-moz-border-radius:4px;
border-radius:4px;
}
}
.buttonBlue{
@extend .navButton;
font-size:1.2em;
color:$white;
letter-spacing:inherit;
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
background: #66b5be;
background: -moz-linear-gradient(top, #66b5be 0%, #45777c 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#66b5be), color-stop(100%,#45777c));
background: -webkit-linear-gradient(top, #66b5be 0%,#45777c 100%);
background: -o-linear-gradient(top, #66b5be 0%,#45777c 100%);
background: -ms-linear-gradient(top, #66b5be 0%,#45777c 100%);
background: linear-gradient(top, #66b5be 0%,#45777c 100%);
&:hover{
color:$white;
}
}
.add:before{
content:"";
display:inline-block;
vertical-align:top;
width:12px;
height:25px;
background: image-url('button-sprite.png') -17px 3px no-repeat;
margin-right:5px;
}
.rss:before{
content:"";
width:17px;
height:25px;
display:inline-block;
vertical-align:top;
background: image-url('button-sprite.png') left center no-repeat;
margin-right:5px;
}
.back:before{
content:"";
width:18px;
height:25px;
display:inline-block;
vertical-align:top;
background: image-url('button-sprite.png') right center no-repeat;
margin-right:5px;
}
.worldMap{
background: image-url('background-world-map.png') center 221px no-repeat;
}
.theContent{
width:960px;
margin:0 auto;
padding-top:30px;
min-height:400px;
}
.theContentList{
padding:0;
margin:0;
list-style-type:none;
}
.theContentListLi{
border-bottom: 1px dashed #857C6F;
padding-bottom:20px;
margin-bottom:30px;
&:last-child{
border-bottom: none;
padding:0;
}
}
.theContentListTitle{
font-family:$font-steel;
font-size:1.5em;
color:#400404;
margin-top:0;
-webkit-transition: color 0.8s ease 0;
-moz-transition: color 0.8s ease 0;
-o-transition: color 0.8s ease 0;
-ms-transition: color 0.8s ease 0;
transition: color 0.8s ease 0;
&:hover{
color:#a51515;
}
}
.button{
font-family:$font-steel;
font-size:1.6em;
display:inline-block;
height:40px;
line-height:40px;
padding:0 15px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
border:none;
-webkit-box-shadow: 1px 2px 5px 0 $black;
-moz-box-shadow: 1px 2px 5px 0 $black;
box-shadow: 1px 2px 5px 0 $black;
-moz-transition: all 0.8s ease;
-webkit-transition: all 0.8s ease;
-o-transition: all 0.8s ease;
transition: all 0.8s ease;
color:$link;
text-transform:uppercase;
background: #b21818;
background: -moz-linear-gradient(top, #b21818 0%, #8a1415 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b21818), color-stop(100%,#8a1415));
background: -webkit-linear-gradient(top, #b21818 0%,#8a1415 100%);
background: -o-linear-gradient(top, #b21818 0%,#8a1415 100%);
background: -ms-linear-gradient(top, #b21818 0%,#8a1415 100%);
background: linear-gradient(top, #b21818 0%,#8a1415 100%);
&:hover{
color:$darkRed;
background:#4d0505;
-webkit-box-shadow: inset 3px 3px 10px 0 $black;
-moz-box-shadow: inset 3px 3px 10px 0 $black;
box-shadow: inset 3px 3px 10px 0 $black;
}
}
.markdownLink{
margin:-10px 0 20px 0;
font-family:$font-oswald;
a{
color:$red;
&:hover{
text-decoration:underline;
}
}
}
.informationsBlock
{
font-family:$font-oswald;
font-size:1.1em;
background:$white;
border-radius: 5px;
box-shadow: 1px 1px 4px 0 $black inset;
height: 30px;
line-height: 30px;
padding: 0 15px;
text-align: center;
div{
display:inline-block;
width:33%;
}
span{
color:$blue;
}
a{
color:$blue;
-webkit-transition: color 0.8s ease 0;
-moz-transition: color 0.8s ease 0;
-o-transition: color 0.8s ease 0;
-ms-transition: color 0.8s ease 0;
transition: color 0.8s ease 0;
&:hover{
color:$red;
}
}
}
.noAnwser{
font-family:$font-oswald;
font-size:1.3em;
font-weight:bold;
color:$blue;
text-align:center;
}
.center{
margin-top:20px;
text-align:center;
}
/* =============================================================================
PAGINATION
========================================================================== */
.pagination{
text-align:center;
line-height:26px;
.page a{
color:$black;
}
.current{
color: #a01616;
}
.first a, .last a, .next a, .prev a{
background : image-url('pagination-sprite.png') no-repeat;
display:inline-block;
text-indent:-9999px;
height:26px;
outline:none;
}
.first a, .last a{
width:46px;
}
.next a, .prev a{
width:26px;
}
.next a{
background-position: top right;
&:hover{
background-position: bottom right;
}
}
.prev a{
background-position: top left;
&:hover{
background-position:bottom left;
}
}
.first a{
background-position: -26px 0;
&:hover{
background-position: -26px 100%;
}
}
.last a{
background-position: -72px 0;
&:hover{
background-position: -72px 100%;
}
}
}
/* =============================================================================
FORMS
========================================================================== */
.simple_form{
div{
position:relative;
display:inline-block;
vertical-align:top;
}
.block{
display:block;
}
legend {
font-family: $font-steel;
font-size: 1.8em;
text-transform: uppercase;
color: $red;
display:block;
width: 100%;
border-bottom: dashed 1px #857c6f;
padding-bottom:10px;
margin-bottom:20px;
}
label {
font-family: $font-oswald;
font-size:1.3em;
color: $darkestRed;
display: block;
margin-bottom: 10px;
span {
color: #9f1615;
}
}
abbr[title]{
border:none;
}
input[type=text],input[type=email],input[type=url],input[type=checkbox],input[type=password],textarea{
background: $white;
padding:5px;
display: block;
color: #666;
border: 1px solid $darkestRed;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-transition: all 0.25s ease-in-out;
-moz-transition: all 0.25s ease-in-out;
-o-transition: all 0.25s ease-in-out;
transition: all 0.25s ease-in-out;
outline: none;
margin-bottom: 10px;
&:focus{
color: $black;
-webkit-box-shadow: 0 0 5px #ff0000;
-moz-box-shadow: 0 0 5px #ff0000;
box-shadow: 0 0 5px #ff0000;
}
}
textarea{
width:938px;
height:100px;
padding:10px;
}
}
.field_with_errors{
input[type=text],input[type=email],input[type=url],input[type=checkbox],input[type=password],textarea{
background:#C24641;
&:focus + .error{
visibility:visible;
opacity:1;
}
}
.error{
font-family: $font-oswald;
font-size:1em;
color:#fff;
text-align:center;
box-shadow: 0 0 4px $black;
position:absolute;
z-index:200;
min-width:150px;
bottom:45px;
left:380px;
padding:5px;
visibility:hidden;
opacity:0;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
background: -moz-linear-gradient(top, #901414 0%, #811316 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#901414), color-stop(100%,#811316));
background: -webkit-linear-gradient(top, #901414 0%,#811316 100%);
background: -o-linear-gradient(top, #901414 0%,#811316 100%);
background: -ms-linear-gradient(top, #901414 0%,#811316 100%);
background: linear-gradient(top, #901414 0%,#811316 100%);
-webkit-transition: all 0.3s ease-in;
-moz-transition: all 0.3s ease-in;
-o-transition: all 0.3s ease-in;
transition: all 0.3s ease-in;
&:after {
border-color: #8A1413 transparent;
border-style: solid;
border-width: 10px 10px 0;
bottom: -10px;
content: "";
display: block;
left: 20px;
position: absolute;
width: 0;
}
}
}
.text.field_with_errors .error{
bottom:120px;
left:910px;
}
.textError{
font-family: $font-oswald;
font-size:1em;
color:#fff;
text-align:center;
box-shadow: 0 0 4px $black;
padding:5px 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
background: -moz-linear-gradient(top, #901414 0%, #811316 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#901414), color-stop(100%,#811316));
background: -webkit-linear-gradient(top, #901414 0%,#811316 100%);
background: -o-linear-gradient(top, #901414 0%,#811316 100%);
background: -ms-linear-gradient(top, #901414 0%,#811316 100%);
background: linear-gradient(top, #901414 0%,#811316 100%);
}