/*
Description: CSS file for thisjoe Website
Author: ThisJoe ( Joël Thissen)
Author URI: www.thisjoe.com
*/
html {
overflow-y:scroll;
}

body {
color: RGBA(255, 255, 255, 1);
font-family: 'Raleway','Exo 2','Courgette','sans-serif',helvetica,arial;
font-size:0.8em;
text-align:center;
-webkit-text-size-adjust: 100%;
background-color: #908C8C;
background-size: 100% 100%;
width:100%;
margin:0;
color: RGBA(0, 0, 0, 1);
background-image: url('../img/background_body01.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
}

p,h1,h2,h3,h4,h6,table,td,th,ul,ol,li,textarea,input {
font-size:100%;
} 

h1, h6 {
font-family: 'Architects Daughter';
font-size:200%;
}

h2 {
font-size:110%;
}

h3 {
color: RGBA(15, 62, 81, 1);
font-size:130%;

}
h4 {
font-size:120%;
}

h6 {
font-size:300%;
margin:auto;
padding:0;
}

li  strong{
font-size: 105%;
}

ul {
padding: 0;
margin:0;
padding-right:60px;
padding-left:80px;
}


iframe 	{margin:0px;}
img		{border:0; }

.centerImage
{
margin:auto;
text-align:center;
display:block;
}

#thepage {
width: 90%;
min-height: 100%;
font-size:100%;
background-color: #A4A49B;
background-size: 100% 100%;
margin: auto;
padding:0;
opacity: 0.94;
}


#thepage h2 {
font-family: sans-serif,"Tangerine","trebuchet ms", arial;
font-size: 120%;
color: RGBA(0, 0, 0, 1);
margin-top: 45px;
margin-bottom: 15px;
padding:0px;
}


#thepageold h6 {
font-family:  arial;
font-size: 110%;
font-weight: normal;
color: RGBA(0, 0, 0, 1);
padding:5px;
margin: auto;
margin-bottom: 30px;
}



#thedevisep {
width:70%;
margin:auto;
padding:5px;
font-family : "Comic sans ms", Arial, sans-serif;
font-size : 70%;
text-align : justify;
color :RGBA(0, 0, 0, 1);
}


#theheader {
width: 90%;
margin:auto;
background-color: #2B2B2D;
min-height: 15px;
}



strongred {
/* font-family : sans-serif,"Comic sans ms", Arial; */
font-size : 1em;
color : #F00;
}



strong {
/* font-family : sans-serif,"Comic sans ms", Arial; */
color: RGBA(15, 62, 81, 1);
}

#thecopyright, #thisjoe  {
width: 90%;
margin : 0 auto;
color : #8d8c8c;
text-align : center;
text-decoration : none;
font-size : 90%;
font-weight : bold;
background-color: #2B2B2D;
padding-top: 5px;
}

.thetitlecolor {
color: RGBA(65, 59, 51, 1);
}

.thetext {
color :rgba(0, 0, 0, 1);
font-size : 90%;
}

.thetext:first-letter {
font-size: 125%;
font-weight: bold;
color :rgba(0, 0, 0, 0.6);
}

.thetextsmall {
color :rgba(0, 0, 0, 1);
font-size : 70%;
text-align:right;
}

.thepagecontent, .thepagecontent2, .thepageheader {
width:100%;
/* font-family : sans-serif,"Comic sans ms", Arial ; */
font-size : 1.3em;
color :rgba(0, 0, 0, 1);
background-color: RGBA(140, 147, 145, 1);
margin:0;
padding-top: 10px;
padding-bottom : 10px;
}

.thepageheader {
background-image: url('../img/backgroundheader2_2.jpg');
background-repeat: no-repeat;
background-size: 100% 100%;
}

.thepagecontent2 {
 background-color: RGBA(156, 162, 160, 1);
}

.thepagecontentp, .thepagecontent2p {
width:80%;
margin: auto;
padding-top: 0px;
padding-bottom:10px;
text-aling:left;
color :rgba(0, 0, 0, 1);
font-size:100%;
}



.thetableau, .thetabpic {
display: table;
table-layout:fixed;
vertical-align:top;
margin:auto;
width: 100%;
border-spacing: 25px 0px;
color :rgba(0, 0, 0, 1);
}

.theformulaire {
/*text-align:left;*/
/*padding-left: 33%;*/
    display: inline-block;
    width: 55%;
    text-align: right;
}

form {
/* Pour le centrer dans la page */
margin: 0 auto;
width: 40%;
/* Pour voir les limites du formulaire */
padding: 0;
padding-left:3em;
border: 1px solid #5D3333;
border-radius: 1em;
text-align: justify;
}

form div + div {
margin-top: 0.5em;
}

.thetabpic {
text-align:center;
vertical-align:middle;
}

.thecolonne1, .thecolonne2, .thecolonne3, .thecolonne4, .thecollogo, .thecoltitle, .thecolpicmin, .thecolares {
display: table-cell;
width:100%;
padding: 0;
border: 0px solid black;
text-align:justify;
vertical-align: top;
padding-left:10px;
margin:auto;
}

.thecollogo, .thecoltitle, .thecolpicmin {
width:25%;
text-align:center;
vertical-align:middle;
}

.thecoltitle {
width:100%;
}

.thecolpicmin {
width:25%;
padding-top: 3px;
padding-bottom: 3px;
}

.thecolonne2 {
text-align: center;
}

.thecolonne3 {
width:20%;
}

.thecolonne4 {
width:100%;
}

.thecolonne5 {
width:50%;
}

.thecolonne4h1 {
/*  font-family: "Tangerine", arial; */
font-size: 10em;
padding-left:60px;
}


.transparent {
   opacity: 0.85; /*  CSS3  */
   filter(opacity=85);  /*  Pour IE  */
}



a {
color : RGBA(0, 0, 0, 1);
text-decoration : none;
}
a:hover {
color : RGBA(255, 255, 255, 1);
}
p {
color : black;
font-size : 100%;
}



#thecontact {
color : black;
font-family : "Comic sans ms, sans-serif", Arial;
background-position : center;
background-image : url('../img/bdp.bg.02.jpg');
background-repeat : repeat;
padding-left:55px;
padding-right:55px;
}


#thegooglemap {
}


#themenu, #themenu ul{
width: 100%;
padding:0;
margin:0;
list-style:none;
text-align:center;
font-size:80%;
font-family: 'Architects Daughter';
}

#themenu li{
display:inline-block;
position:relative;
border-radius:0;
font-size:80%;
background-color: #777;
}

#themenu ul li{
display:inherit;
border-radius:0;
font-size:210%;
}
#themenu ul li:hover{
border-radius:0;
}
#themenu ul li:last-child{
border-radius:0 0 8px 8px;
}

#themenu ul{
position:absolute;
z-index: 1000;
max-height:0;
left: 0;
right: 0;
overflow:hidden;
-moz-transition: .4s all .2s;
-webkit-transition: .4s all .2s;
transition: .4s all .2s;
}
#themenu li:hover ul{
max-height:35em;
}



/* background des liens menus et sous menus au survol */
#themenu li:hover, #themenu li li:hover{
background:#484040;
}



/* les a href */
#themenu a{
text-decoration:none;
display:block;
padding:8px 10px;
color :rgba(0, 0, 0, 0.9);
font-size:2em;
}
#themenu ul a{
padding:8px 0;
font-size:100%;
}
#themenu li:hover li a{
color :rgba(0, 0, 0, 0.9);
text-transform:inherit;
font-size:100%;
}
#themenu li:hover a, #themenu li li:hover a{
color:#EAEAEA;
}


#scrollUp
{
position: fixed;
bottom : 10px;
right: -100px;
opacity: 0.8;
}

#toback
{
position: fixed;
top : 10px;
right: 10px;
opacity: 0.8;
}