/*
* This file is part of the access project project.
* 2013 - 2018 / RENATER
*/
* { /* Proportional fonts */
font-family: 'LatoWeb', sans-serif;
font-size: 1rem;
}
/* Prevent content moving when vertical scroll appears */
html {
overflow-x: hidden;
margin-right: calc(-1 * (100vw - 100%));
height: 100%;
}
body {
display: table;
width: 100%;
height: 100%;
position: absolute;
color: #41494c;
font-family: 'LatoWeb', sans-serif;
font-size: 0.85em;
line-height: 1;
background-color: #fff;
padding-bottom: 80px;
z-index:1;
}
main {
margin-bottom: 1.5rem;
padding: 1rem 1.5rem;
background-color: rgba(255,255,255,0.8);
box-shadow: 0px 10px 20px 0px;
text-align:left;
line-height:1.5;
animation-name: theFade; /* nom de l'animation */
animation-duration: 1s; /* temps de l'animation (4s) */
animation-iteration-count: 1; /* nombre de boucles (infinie) */
animation-timing-function: linear; /* accelération de l'animation (constant) */
}
/* deuxième étape */
@keyframes theFade {
0% {opacity:0;}
50% {opacity:0.5;}
100% {opacity:1}
}
main:after {
content: "";
display: block;
}
a, a:link, a:visited {
color: #d90d12;
}
a:link:hover, a:visited:hover, a:link:focus, a:visited:focus, a:link:active, a:visited:active {
text-decoration: none;
}
/* Titles */
h1,h2,h3,h4,h5,h6{
margin: 0.67em 0;
font-family: LatoWebBold, Helvetica, sans-serif;
}
h3,h4,h5,h6{
color:hsl(0,0%,30%);
}
h1 {
font-size: 2rem;
}
h2 {
font-size: 1.7rem;
}
h3 {
font-size: 1.5rem;
}
h4 {
font-size: 1.3rem;
}
h5 {
font-size: 1.1rem;
}
h6 {
font-size: 1rem;
}
img, object {
max-width: 100%;
}
ul{
margin-left: 1.25rem;
}
/**
* Buttons
*/
button, .button{
padding: 0.5em;
background-color: #f0494d;
border: 2px solid #f0494d;
font-family: 'LatoWebItalic';
text-decoration: none!important;
color: #fefefe!important;
}
button:focus,.button:focus{
background-color: #f0494d;
}
button.highlight, .button.highlight{
background-color: #7c7c7c;
}
button:hover, .button:hover {
background-image: none;
background-color: #f0494d;
opacity: 0.7;
}
.close-button, .close-button:hover {
padding:0;
background: transparent;
}
/* design of tooltips*/
.tooltip {
background-color: #fff0c6;
color: #41494c;
font-size: 100%;
max-width: 20rem !important;
border-radius: 3px;
text-align:justify;
box-shadow: 0px 5px 20px 0px rgba(1, 1, 1, 0.6);
}
.tooltip::before {
border-color: transparent transparent #fff0c6;
}
.tooltip.bottom::before {
border-color: transparent transparent #fff0c6;
}
.tooltip.top::before {
border-color: #fff0c6 transparent transparent;
}
.tooltip.left::before {
border-color: transparent transparent transparent #fff0c6;
}
.tooltip.right::before {
border-color: transparent #fff0c6 transparent transparent;
}
/* RENATER Class Added for Foundation CallOut*/
.alert-callout-border {
width: 100%;
padding: 1.3rem;
border-left-width: 0.3125rem;
border-left-color: #cacaca;
}
.alert-callout-border strong {
color: #0a0a0a;
}
.alert-callout-border .close-button {
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
.alert-callout-border.radius {
border-radius: 0.6rem;
}
.alert-callout-border.primary {
border-left-color: #1779ba;
}
.alert-callout-border.primary strong {
color: #1779ba;
}
.alert-callout-border.secondary {
border-left-color: #767676;
}
.alert-callout-border.secondary strong {
color: #767676;
}
.alert-callout-border.alert {
border-left-color: #cc4b37;
}
.alert-callout-border.alert strong {
color: #cc4b37;
}
.alert-callout-border.success {
border-left-color: #2ca200;
}
.alert-callout-border.success strong {
color: #2ca200;
}
.alert-callout-border.warning {
border-left-color: #ffae00;
}
.alert-callout-border.warning strong {
color: #ffae00;
}
/* Top button */
.scroll-top-wrapper {
position: fixed;
opacity: 0;
visibility: hidden;
overflow: hidden;
text-align: center;
z-index: 99999999;
background-color:#f0494d;
color: #eeeeee;
width: 50px;
height: 50px;
line-height: 50px;
right: 30px;
bottom: 30px;
padding-top: 0px;
border-radius: 50%;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.scroll-top-wrapper:hover {
background-color: #d90d12;
}
.scroll-top-wrapper.show {
visibility:visible;
cursor:pointer;
opacity: 1.0;
}
.scroll-top-wrapper i.fa {
line-height: inherit;
}
[type="text"]{
display: inherit;
height:inherit;
margin:inherit;
padding:inherit;
border: 1px solid #cacaca;
border-radius: 3px;
background-color: #fefefe;
box-shadow: inset 0 1px 2px rgba(10, 10, 10, 0.1);
font-family: inherit;
font-size:inherit;
font-weight:inherit;
line-height:inherit;
color: #0a0a0a;
transition: box-shadow 0.5s, border-color 0.25s ease-in-out;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
h1{
color: #d90d12;
font-family: "foobar_proregular", Arial, sans-serif;
font-size: 2em;
}
div.page{
background-color: rgba(255,255,255,0.8);
box-shadow: 0px 10px 20px 0px
}
fieldset {
text-align: left;
}
td.label {
margin:0;
display: inherit;
padding: .8em 0 .6em 1em;
border-radius: 0;
cursor: default;
background: transparent;
color: inherit;
}
#config__manager td.label span.outkey {
font-size: 70%;
margin-top: -1.7em;
margin-left: -1em;
display: block;
background-color: #fff;
color: #666;
float: left;
padding: 0 .1em 0 0.7rem;
position: relative;
z-index: 1;
}
#config__manager table tbody{
background-color: transparent;
}
#config__manager table tbody tr{
border: 1px solid #ccc;
}
#config__manager .label{
white-space: normal;
}
/** Wizard **/
.wizard > .steps > ol > li.current {
background: #f0494d;
color: #FFFFFF;
}
.wizard > .steps > ol > li.done {
background: #f0494d;
opacity:0.5;
color: #FFFFFF;
}
.wizard > .content {
border: 2px solid #d90d12;
}
div.account h3 {
background-color: #41494c;
}
div.account table tbody {
border: 1px solid #41494c;
}
/* Small screens */
/* Define mobile styles */
/* max-width 450px, mobile-only styles, use when QAing mobile issues */
@media only screen and (max-width: 28em){
h1{
font-size: 1.3em;
}
}
@media only screen and (min-width: 28em) and (max-width: 40em){
h1{
font-size: 1.5em;
}
}
/* max-width 640px, mobile-only styles, use when QAing mobile issues */
@media only screen and (max-width: 40em) {
}
/* Medium screens */
/* min-width 641px, medium screens */
@media only screen and (min-width: 40.063em) {
}
/* min-width 641px and max-width 1024px, use when QAing tablet-only issues */
@media only screen and (min-width: 40.063em) and (max-width: 50em) {
}
/* min-width 641px and max-width 1024px, use when QAing tablet-only issues */
@media only screen and (min-width: 40.063em) and (max-width: 64em) {
h1{
font-size: 1.7em;
}
}
/* Large screens */
/* min-width 1025px, large screens */
@media only screen and (min-width: 64.063em) {
}
/* min-width 1025px and max-width 1440px, use when QAing large screen-only issues */
@media only screen and (min-width: 64.063em) and (max-width: 90em) {}
/* min-width 1025px and max-width 1440px, use when QAing large screen-only issues */
@media only screen and (min-width: 74em) and (max-width: 90em) {
.row{
max-width:70rem;
}
}
/* XLarge screens */
/* min-width 1441px, xlarge screens */
@media only screen and (min-width: 90.063em) {}
/* min-width 1441px and max-width 1920px, use when QAing xlarge screen-only issues */
@media only screen and (min-width: 90.063em) and (max-width: 120em) {
.row{
max-width:80rem;
}
}
/* XXLarge screens*/
/* min-width 1921px, xxlarge screens */
@media only screen and (min-width: 120.063em) {}