/* --------------------------------------------------------------
layout.css
Agencement et position général des blocs du site
-------------------------------------------------------------- */
/* --- Paramètres généraux de la page --- */
body {
text-align: center;
background-color: rgb(255,255,255);
word-wrap: break-word; /* fait une cesure sur les mots trop longs pour ne pas tout ramener à la ligne ( un retour chariot pour ne pas que le mot dépasse du bloc ) */
}
@media only screen and (min-width: 0px) and (max-width: 475px) {
body { padding-top: 50px; } /* Place pour le menu mobile */
}
/* --- Principales tailles des bloc --- */
.wrapper{width: 970px;}
.contenu .bloc_une, .section {width:650px;}
.a_propos,
.acces_directs,
.aside {width:300px;}
.impression_seulement,
.script,
.invisible {display:none}
/* --- Position et habillage des principaux blocs --- */
.page {
position: relative;
text-align: left;
}
@media only screen and (min-width: 0px) and (max-width: 475px) {
/* Pour menu principal */
.page {position: static;}
}
.header{width: 100%;}
.wrapper {
clear: both;
overflow: hidden;
margin-right: auto;
margin-left: auto;
background:inherit;
padding: 0px 5px;
}
.wrapper.relative {position:relative; /*permet de gérer les positions absolute des blocs enfants par rapoort à ce bloc. Ne pas intégrer directement dans le style wrapper sinon perturbe les hover du menu principal qui ne dépassent plus en dessous du nav*/}
.corps_texte{background: fixed no-repeat 50% 0%;}
.section {/*min-height: 350px;*/margin-bottom: 40px;float: left; background:#FFF;}
@media print {
.section, .section .texte {
width : 80%;
}
}
@media only screen and (min-width: 480px) {
.section .texte {margin:20px;}
}
.aside {float: right;margin-right:-5px;}/* margin-right pour compenser le padding du wrapper */
@media print{
.aside{display:none;}
}
/* --- FOOTER --- */
.footer {clear: both; text-align:center; padding-top:20px;}
.colophon {clear: both; margin-top:20px; margin-bottom:20px; text-align:center;}
.sites_ifac,
.partenaires,
.contacts{float:left;width:33%;}
/* Exception pour les partenaires dans les accès directs */
.acces_directs .partenaires {width:100%; padding: 2px;}
.chapeau{padding-top:15px; padding-bottom:15px;}
.a_propos{float:right;text-align: justify;background: rgb(240,240,240);}
.gmaps{height:400px;}
@media print {
/* Eviter les saut de page a l'intérieur de l'élément */
.gmaps {page-break-inside: avoid;}
}
#logo_ifac{
position: absolute;
left: 10px;
bottom: 5px;
width: 83px;
height: 64px;
background-repeat: no-repeat;
background-image: url("../img/logo-ifac-83x64px.png");
}
@media print {
#logo_ifac {
/* NOTE: par défaut les navigateur bloquent toutes les background-image
lors des impressions. On triche en changeant le backrgound-image en image
image d'une liste à puce */
display: list-item;
list-style-image: url(../img/logo-ifac-83x64px.png);
list-style-position: inside;
float: right;
width: 86px;
height: 68px;
/*background-repeat: no-repeat;
background-image: url(https://www.bafa-bafd.net/squelettes/img/logo_ifac.png);*/
margin-right: 5px;
margin-left: 10px;
/* Positionnement aligné au titre */
margin-top: -30px;
}
}
@media only screen and (max-width: 479px) {
#logo_ifac{
width: 51px;
height: 40px;
background-repeat: no-repeat;
background-image: url("../img/logo-ifac-51x40px.png");
}
}
.logo_site{
display: inline-block;
margin:5px;
}
#titre_site{
display: inline-block;
position: absolute;
bottom: 0px;
margin: 0px 0px 0px 15px;
}
#nom_site{vertial-align:middle;}
#baseline{}
.header .wrapper{min-height:80px;}
/*gestion des marges intérieures d'un bloc en cas de texte
Géré séparément pour équilibrer avec les blocs sans texte direct */
.margeur{padding:10px}
/* --- Couleurs de fond --- */
body {background:#FFF}
.wrapper {background:#FFF}
/* ATTENTION : Ne pas mettre ses couleurs dans les thèmes */
.footer, .footer .wrapper {background-color: rgb(0,34,54); text-align:left;}
.footer .titre {color: rgb(0,114,182);}
@media print {
.titre {
display: block;
width: auto; /* Laisser de la place pour les bordures */
margin: 10px;
font-size: 1.25em;
font-family: robotobold;
border: 1px solid black;
color: rgb(0,0,0);
}
}
.a_propos {border:1px solid #EEE;}
@media print{
.a_propos {
float:right;
width:100%;
}
}
/* --- Footer liste des sites --- */
.footer ul{}
/* --- RWD --- */
body {-webkit-text-size-adjust: 100%; /* Stops Mobile Safari from auto-adjusting font-sizes */}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
}
@media only screen and (max-width: 767px) {
body {}
.wrapper{width: 95%; margin-right:auto; margin-left:auto;}
.bloc_une,
.section,
.a_propos,
.acces_directs,
.aside {width: 100% !important; height:auto !important; margin: auto !important; padding: auto !important; clear:both; margin-bottom:10px !important;}
img, table, td, blockquote, code, pre, textarea, input, iframe, object, embed, video {max-width: 100% !important; height:auto;}
}
@media only screen and (min-width: 480px) and (max-width: 767px) {
}
@media only screen and (max-width: 479px) {
.bloc_une .conteneur_une .conteneur_texte {width : 80%;}
.actu_liste .actu_image{width:90px;height:auto;}
.gmaps{height:300px; width:90%;}
.header{font-size:0.5em}
.header .wrapper{min-height:50px;}
#titre_site{bottom:15px;}
}
/* Retina media query.
Overrides styles for devices with a
device-pixel-ratio of 2+, such as iPhone 4.
----------------------------------------------- */
@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and ( min--moz-device-pixel-ratio: 2),
only screen and ( -o-min-device-pixel-ratio: 2/1),
only screen and ( min-device-pixel-ratio: 2),
only screen and ( min-resolution: 192dpi),
only screen and ( min-resolution: 2dppx) {
/* Retina-specific stuff here
Pas utilisé car intégration d'un meta dans le head pour bloquer les redimensionnements automatiques
ou */
}
/* PAGE D'ACCUEIL */
/* --- Bloc de une --- */
.bloc_une{
float:left;
position:relative;
overflow:hidden;
margin-top: 10px;
}
@media print {
.bloc_une{display:none;}
}
.bloc_une .conteneur_une{position:absolute; width:100%;height:auto}
.bloc_une .conteneur_une.image_fond{
position:absolute;
left: 0px;
top: 0px;
z-index:1;
transition-timing-function: ease-in-out;
}
.bloc_une .conteneur_une .conteneur_texte{
height:90%;
color:#FFF;
width:30%;
position:absolute;
left: 2%;
top: 5%;
z-index:2;
}
.bloc_une .conteneur_une .titre_une{padding:5px;}
@media only screen and (max-width: 479px) {
.bloc_une .conteneur_une .conteneur_texte{
width: 80%;
font-size: 0.8em;
}
.bloc_une img{
height:auto;
}
}
/* ---- Specificités d'impression --- */
@media print {
.impression_seulement {display: block;}
.footer, .footer .wrapper {display:none;}
.nav, .nav .wrapper {display:none;}
iframe {display:none;}
aside, .aside {display:none;}
.impression_seulement {display: block;}
}