* {
margin: 0; padding: 0; top: 0px; left: 0px; right: 0px;
}
html, body {
margin: 0;
padding: 0;
height: 100%;
overflow-x: visible;
}
body { background: #0C0301 url(background.jpg); top center no-repeat;
background-attachment:fixed;
background-size:cover;
top: 0px; left: 0px; right: 0px;
margin:0;
padding: 0;
text-align:center;
min-height: 100%;
width: 100%;
font-family: Raleway,sans-serif;
font-size: 14px;
color: #E1D9C1;
line-height : 17px;
}
#fixedbg{
background:url('images/bg_index.jpg') center center no-repeat;
height:100%;
position:fixed;
width:100%;
z-index:-1;
top:0;
}
@media screen and (max-width: 1000em) {
* {
box-sizing: border-box;
}
html {
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
/* passer body (et tous les �l�ments de largeur fixe) en largeur automatique */
body {position: relative;
width: auto;
margin: 0;
padding: 0px;
}
/* fixer une largeur maximale de 100% aux �l�ments potentiellement probl�matiques */
img,
table,
td,
blockquote,
code,
pre,
textarea,
input,
iframe,
object,
embed,
video {
max-width: 100%;
}
/* conserver le ratio des images */
img {
height: auto;
}
/* gestion des mots longs */
textarea,
table,
td,
th,
code,
pre,
samp {
-webkit-hyphens: auto; /* c�sure propre */
-moz-hyphens: auto;
hyphens: auto;
word-wrap: break-word;/* passage � la ligne forc� */
}
code,
pre,
samp {
white-space: pre-wrap; /* passage � la ligne sp�cifique pour les �l�ments � ch�sse fixe */
}
.hide_mobile {
display: none !important;
}
.slicknav_menu {
display:none;
}
.js #menu { display:none;
}
.js .slicknav_menu {
display:block; position: center; width: 100%; top: 0; z-index:1;
}
#header-cont { display: none;
}
.header { width: 100%;
}
}
/* CONTAINER et @MEDIAS
********************************************************************/
#container { position: relative; /* on positionne le conteneur */
margin-left: 100px;
margin-right: auto;
width: 100%;
text-align: left;
min-height: 90%;
margin-top: 30px;
}
@media only screen and (max-width: 60em)
{
#container{ margin-top: 20px;
}
}
@media only screen and (max-width: 1000em)
{
#container{ width: 98%;
max-width: 600px;
margin-top:20px;
margin-left: auto;
}
}
.video-responsive { overflow:hidden; padding-bottom:56.25%; position:relative; height:0; }
.video-responsive iframe { left:0; top:0; height:100%; width:100%; position:absolute;}
/* HEADER LOGO et MENU PRINCIPAL
********************************************************************/
#header-cont { background: #0C0301;
width: 100%;
position: fixed;
top: 0px;
z-index: 2;
}
.header { background: url(images/logo2.png) left no-repeat;
height: 110px;
width: 960px;
margin: 0px auto;
}
#menu {
float: right;
}
#menu ul li { margin-top: 20px;
line-height: 20px;
list-style: none;
text-align: right;
}
#menu ul li a{
text-decoration: none;
padding: 0px 0px 0px 26px;
list-style: none;
color: #FFFFFF;
font-size : 12px;
font-family: Raleway, sans-serif;
font-weight: normal;
}
#menu ul li a:hover{
color: #A76B30;
text-decoration: none;
font-weight: normal;
}
.logo-responsive { overflow:hidden; padding-bottom:60px; position:relative; height:0; }
/* MAIN -> tableau en haut du MENU2 des enseignantes
********************************************************************/
#main { position: relative;
margin : 0px auto;
overflow: auto;
padding: 0px;
min-height: 100%;
}
#maingauche {
position: relative;
width: 960px;
overflow: auto;
margin : 0px 0px 0px 0px;
min-height: 100%;
}
#menu2 { float: left;
width: 460px;
position: relative;
margin-top: 10px;
}
#menu2 ul li { text-align: center;
list-style: none ;
}
#menu2 ul li a{
margin : 0 0 0 0px;
padding : 0px 10px 0px 10px;
font-family: Raleway, sans-serif;
font-weight: normal;
font-size: 12px;
text-decoration: none;
text-align: center;
color: #FFFFFF;
}
#menu2 li a:hover{
color: #A76B30;
text-decoration: none;
font-weight : normal;
}
#dessin2 {
margin : 10px 0px 0px 0px;
width: 460px;
border-radius:10px;
position: relative;
float: left;
border-collapse: collapse;
font-family: Raleway,sans-serif;
font-size: 14px;
font-weight: normal;
color: #E1D9C1;
text-align: left;
min-height: 100%;
}
#dessin1 {
position: relative;
margin-top: 10px;
border-radius:10px;
border-collapse: collapse;
float: left;
width: 460px;
font-family: Raleway, sans-serif;
font-size: 14px;
font-weight: normal;
color: #E1D9C1;
text-align: left;
min-height: 100%;
}
#index {
position: relative;
margin-top: 10px;
border-radius:0px;
border-collapse: collapse;
float: left;
width: 600px;
font-family: Raleway,sans-serif;
font-size: 14px;
font-weight: normal;
color: #E1D9C1;
text-align: left;
max-height: 100%;
}
/* LOGO MENU PRINCIPAL @MEDIAS
********************************************************************/
@media screen and (max-width: 40em) {
/* #menu is the original menu */
.js #menu {
display:none;
}
.js .slicknav_menu {
display:block;
}
}
/* MEDIAS CORPS DE PAGE -> DESSIN PEINTURE PORTRAIT JEUNES ATELIERS EVENEMENTS CONTACT LIENS et class des titres et textes et 2MEDIAS
**************************************************************************************************************************************/
@media only screen and (max-width: 40em)
{
#dessin2 {
width: 100%;
height: 100%;
margin: 10px 0px 0px 0px;
border-radius: 20px;
}
#dessin1 {
width: 100%;
margin: 10px 0px 0px 0px;
border-radius:20px;
}
#index { height: 100%;
width: 100%;
margin: 10px 0 0 0px;
border-radius:0px;
}
#maingauche {
width: 100%; margin: 0px 0 0 0px;
}
#menu2 { display: block;
position: ;
width: 100%;
margin: 0px 0 0 0px;
z-index:1;
}
#menu2 ul li { text-align: center;
list-style: none ;
}
#menu2 ul li a{
margin : 0px 0 0 0px;
padding : 0px 2px 0px 2px;
font-family: Raleway, sans-serif;
font-weight: normal;
font-size: 10px;
text-decoration: none;
text-align: center;
color: #FFFFFF;
}
.texte { padding: 0px 0px 20px 20px;
text-align: justify;
font-family: Raleway, sans-serif;
font-size: 14px;
font-weight: normal;
color: #E1D9C1;
line-height: 25px;
margin-left: 20px;
margin-right: 20px;
}
.titresms { text-align: left;
font-family: Raleway, sans-serif;
font-size: 14px;
color: #E1D9C1;
font-weight: normal;
padding: 30px 20px 15px 20px;
}
.opacite {
width: 40%;
background-color: rgb(12, 3, 1); /* alternative solide */
background-color: rgba(12, 3, 1, 0.4);
}
}
a{
text-decoration: none;
font-weight: normal;
color: #FFFFFF;
}
a:hover{
color: #A76B30;
text-decoration: none;
font-weight: normal;
}
.titre { text-align: center;
font-family: Raleway, sans-serif;
font-size: 14px;
color: #E1D9C1;
font-weight: normal;
padding: 30px 10px 20px 10px;
line-height: 20px;
letter-spacing:0.1em;
word-spacing:0.2em;
!border-bottom: 1px solid #A76B30;
}
.titremenu { text-align: left;
font-family: Raleway, sans-serif;
font-size: 14px;
color: #E1D9C1;
font-weight: normal;
padding: 10px 10px 60px 8px;
line-height: 20px;
letter-spacing:0.1em;
word-spacing:0.2em;
! border-bottom: 1px solid #A76B30;
background-color: rgba(12, 3, 1, 0.7);
}
.titremenu2 { text-align: left;
font-family: Raleway, sans-serif;
font-size: 14px;
color: #E1D9C1;
font-weight: normal;
padding: 20px 0px 0px 15px;
line-height: 20px;
letter-spacing:0.1em;
word-spacing:0.2em;
! border-bottom: 1px solid #A76B30;
background-color: rgba(12, 3, 1, 0.7)
}
.titresms { text-align: left;
font-family: Raleway, sans-serif;
font-size: 16px;
color: #E1D9C1;
font-weight: normal;
padding: 30px 20px 15px 20px;
letter-spacing:0.1em;
word-spacing:0.2em;
}
.titre1 { text-align: center;
font-family: Raleway, sans-serif;
font-size: 13px;
color: #E1D9C1;
font-weight: normal;
! border-!bottom: 1px solid #A76B30;
margin: 0px 25px 0px 25px;
padding: 20px 0px 0px 0px;
letter-spacing:0.1em;
}
.titre2 { text-align: left;
font-family: Raleway,sans-serif;
font-size: 14px;
color: #E1D9C1;
font-weight: normal;
padding: 30px 0 15px;
margin-right: 20 px;
margin-left: 20px;
letter-spacing:0.1em;
}
.texte { padding: 0px 0px 20px 20px;
text-align: justify;
font-family: Raleway, sans-serif;
font-size: 14px;
font-weight: normal;
color: #E1D9C1;
line-height: 20px;
margin-left: 20px;
margin-right: 20px;
}
.texteatelier { padding: 15px 0px 20px 0px;
font-family: Raleway,sans-serif;
font-size: 13px;
font-weight: normal;
color: #E1D9C1;
line-height: 20px;
border-bottom: 1px solid #A76B30;
margin-left: 20px;
margin-right: 20px;
}
.texte2 { padding: 20px 0px 20px 0px;
text-align: left;
font-family: Raleway, sans-serif;
font-size: 14px;
font-weight: normal;
color: #E1D9C1;
line-height: 20px;
!border-bottom: 1px solid #A76B30;
margin-left: 20px;
margin-right: 20px;
}
.texte3 { padding: 0px 0px 30px 0px;
text-align: normal;
font-family: Raleway, sans-serif;
font-size: 13px;
font-weight: normal;
color: #E1D9C1;
line-height: 20px;
letter-spacing: 0.1em;
border-bottom: 1px solid #A76B30;;
margin-left: 20px;
margin-right: 20px;
}
.sous-titre {
letter-spacing: 0.05em;
word-spacing:0.1em;
font-size: 11px;
line-height: 14px;
font-style: italic;
margin-left: 18px;
}
.citation{ padding: 15px 10px 10px 10px;
text-align: center;
font-family: Raleway, sans-serif;
font-size: 13px;
font-weight: normal;
font-style : italic;
color: #E1D9C1;
line-height: 18px;
letter-spacing:0.1em;
word-spacing:0.2em;
}
/* CLASS -NOM DES ENSEIGNANTES- SuZIE DELISLE -NB petits caract�res - class OPACITE
*************************************************************************************/
.sd { padding: 0px 0px 5px 100px;
text-align: left;
font-family: Raleway, sans-serif;
font-size: 12px;
color: #E1D9C1;
font-weight: normal;
font-style : italic;
}
.nb {
padding: 0px 0px 10px 20px;
text-align: left;
font-family: Raleway, sans-serif;
font-size: 11px;
color: #E1D9C1;
font-weight: normal;
font-style : italic;
}
.opacite {
width: 70%;
background-color: rgb(12, 3, 1); /* alternative solide */
background-color: rgba(12, 3, 1, 0.7);
}
/* BAS DE PAGE
****************************************************/
@media only screen and (max-width: 60em)
{#footer, #footer2 { padding-bottom: 10px;
}
}
#footer2 {
line-height : 15px;
font-family: Raleway, sans-serif;
font-size: 10px;
font-weight: normal;
color: #E1D9C1;
text-align: center;
padding-top: 15px;
padding-bottom: 15px;
border-top: solid 1px #E1D9C1;
}
#footer {
margin-top: 12px;
padding-bottom:12px;
line-height : 15px;
font-family: Raleway, sans-serif;
font-size: 10px;
font-weight: normal;
color: #E1D9C1;
text-align: center;
}
#footer a{
text-decoration: none;
font-weight: bold;
color: #FFFFFF;
}
#footer a:hover{
color: #E2C58D;
text-decoration: none;
font-weight: bold;
text-transform: uppercase;
}