/*
  HTML5 Reset :: style.css
  ----------------------------------------------------------
  We have learned much from/been inspired by/taken code where offered from:
 
  Eric Meyer          :: http://ericmeyer.com
  HTML5 Doctor        :: http://html5doctor.com
  and the HTML5 Boilerplate  :: http://html5boilerplate.com
  
-------------------------------------------------------------------------------*/

/* Let's default this puppy out
-------------------------------------------------------------------------------*/

html, body, body div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, hgroup, menu, nav, section, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 1em;
  vertical-align: baseline;
  font-family: "Helvetica", "Arial", sans-serif;
}                  

html {
  background: #fff url("../images/background_img.jpg") no-repeat center center fixed;
  overflow-y: scroll;
  background-size: cover;
  min-height: 100%;
  position: relative;
}

body {
  min-height: 100%;
}

article, aside, figure, footer, header, hgroup, nav, section {display: block;}

/* Responsive images and other embedded objects
   Note: keeping IMG here will cause problems if you're using foreground images as sprites.
   If this default setting for images is causing issues, you might want to replace it with a .responsive class instead. */
img,
object,
embed {max-width: 100%;}

/*   force a vertical scrollbar to prevent a jumpy page; 
  following lines for the full screen fixed background image */ 
  
html {
color: white;
}

/* we use a lot of ULs that aren't bulleted. 
  don't forget to restore the bullets within content. */

blockquote, q {quotes: none;}

blockquote:before, 
blockquote:after, 
q:before, 
q:after {content: ''; content: none;}

a {
  margin: 0; 
  padding: 0; 
  font-size: 100%; 
  vertical-align: baseline; 
  background: transparent;
}

del {text-decoration: line-through;}

abbr[title], dfn[title] {border-bottom: 1px dotted #000; cursor: help;}

/* tables still need cellspacing="0" in the markup */
table {border-collapse: collapse; border-spacing: 0;}
th {font-weight: bold; vertical-align: bottom;}
td {font-weight: normal; vertical-align: top;}

hr {display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0;}

pre {
  white-space: pre-line; /* CSS 3 (and 2.1 as well, actually) */
}

input[type="radio"] {
vertical-align: text-bottom;
}

fieldset {
max-width: 800px;
}

select, input, textarea {
border-radius:5px;
vertical-align: top;
transition: all 0.25s ease-in-out;
box-shadow: 0 0 5px rgba(128, 128, 128, 0.5);
}

input[type="checkbox"] {
display: inline;
margin: 1.5em 1.5em 0 0;
vertical-align: bottom;
}

#jform_contact_email_copy-lbl {
display: inline;
vertical-align: bottom;
}

legend {
margin: 0 0 1.5em;
}

table {
font-size: inherit; 
}
 
/* Accessible focus treatment
  people.opera.com/patrickl/experiments/keyboard/test */
a:hover, a:active {outline: none;}

small {font-size: 85%;}

strong, th {font-weight: bold;}

td, td img {vertical-align: top;} 

/* Make sure sup and sub don't screw with your line-heights
  gist.github.com/413930 */
sub, sup {font-size: 75%; line-height: 0; position: relative;}
sup {top: -0.5em;}
sub {bottom: -0.25em;}

/* standardize any monospaced elements */
pre, code, kbd, samp {font-family: monospace, sans-serif;}

/* hand cursor on clickable elements */
.clickable,
label, button, select, input, textarea {
cursor: pointer;
display: block;
margin: 0 0.5em 0.5em;
}

/* let's clear some floats */
.clearfix:before, .clearfix:after { content: "\0020"; display: block; height: 0; overflow: hidden; }  
.clearfix:after { clear: both; }  

/* Ok, this is where the fun starts.
-------------------------------------------------------------------------------*/

body {
font: 13px Helvetica, Arial, sans-serif;
}

/* using local fonts? make sure to read up on Paul Irish's 
  Bulletproof @font-face syntax: http://mky.be/font-face/bulletproof/ */

/* we like off-black for text */
body, select, input, textarea {
  color: #333;
}

ins {
background-color: #fcd700; 
color: #000; 
text-decoration: none;
}

mark {
color: #000; 
font-style: italic; 
font-weight: bold;
}





/* Print styles!
-------------------------------------------------------------------------------*/
@media print {



}


/* Media queries!
-------------------------------------------------------------------------------*/

/* Consider this: www.cloudfour.com/css-media-query-for-mobile-is-fools-gold/ */
@media screen and (max-device-width: 480px) {
  
    
}

@media all and (orientation: portrait) {
  
}

@media all and (orientation: landscape) {
  
}

/* starting specific sienna styling here! */

h1 {
font-size: 1.5em;
line-height: 21px;
margin: 1em 0;
color: #FF7F00;
font-weight: normal;
}

h2 {
font-size: 1.3em;
margin: 1.4em 0;
color: #FF7F00;
font-weight: bold;
font-variant: small-caps;
}

h3 {
color: #fff;
font-size: 1.2em; 
font-weight: normal; 
margin: 1em 0 0.5em;
}

strong {
font-weight: bold;
color: #FF7F00;
}

p {
margin: 0 0 2em;
font-size: 1.1em;
text-align: justify;
line-height: 200%;
}

p > img {
padding-right: 1.5em;
}

strong {
color: #FF7F00;
font-weight: bold;
}

#wrapper {
position: relative;
margin: 0 auto;
width: 80%;
min-height: 100%;
background-color: transparent;
color: white;
}

#blackbar {
height: 12px;
width: 100%;
background-color: rgba(0,0,0,0.7);
}

#header {
width: 100%; 
}

#logo {
float:left;
}
#logo h1 {
  margin:0;
}

#logo a {
display: block;
float:left;
}

#launchpad {
float: left;
width: 200px;
}

#firestarter {
float: left;
width: 180px;
height: 40px;
background-color: rgba(256, 256, 256, 0.6);
padding: 6px 0 0 20px;
color: #333;
font-size: 2em;
font-variant: small-caps;
font-weight: bold;
text-decoration: none;
text-align: left;
text-shadow: -1px -1px 2px white, 1px 1px 2px black;
}

#top_menu {
float: left;
position: relative;
clear: right;
background-color: rgba(255,127,0,0.5);
width: 250px;
display: none;
font-size: 1.1em;
/* box-shadow: 3px 3px 6px 5px rgba(0, 0, 0, 0.2); */
}

#top_menu::before {
  display: block; /* pseudo-element are INLINE elements so they must be declared as block elements */
  position: absolute; /* must be positionned absolutely against the parent div; works only if #contenu position: relative */
  top: 0; 
  right: 0; 
  bottom: 0; 
  left: 0;
  background: #fff url("../images/background_img.jpg") no-repeat center center fixed;
  background-size: cover;
  content: '\00a0';
  background-color: rgba(255,127,0,0.0);  /* for debugging */
  filter: blur(6px);
  z-index: -1;
}


#top_menu.top_menu {
display: block;
}

#top_menu ul {
padding: 0;
list-style: none;
}

#top_menu ul li {
padding: 7px 5px 6px 20px;border-top: 1px solid rgba(255,255,128,0.5); 
transition: background-color 0.5s;
-moz-transition: background-color 0.5s;
-webkit-transition: background-color 0.5s;
-o-transition: background-color 0.5s;
}

#top_menu ul li:hover {
background-color: #ffa815;
}

#top_menu a {
color: white;
text-decoration: none;
font-size: 1.15em;
/* modernizedtext-shadow: 0 1px 1px black, 0 -1px 2px white; */
transition: color 0.5s;
-moz-transition: color 0.5s;
-webkit-transition: color 0.5s;
}

#top_menu ul a:hover {
color: black;
}

#top_menu [class~=current] {
background-color: #fff;
}

#top_menu ul li[class~=current]:hover {
background-color: white;
}

#top_menu [class~=current] a {
color: black;
}

#clear_header {
clear: both;
height: 0;
}

#capsule {
width: 100%;
margin: 0 auto;
padding: 25px 0 49px; /* according to cssstickyfooter.com the padding must be the same height as the footer */
overflow: auto; /* part of the cssstickyfooter.com solution */
}

#contenu {
position: relative;
width: 94%;
margin: 10px 0;
padding: 0;
overflow: auto;
font-size: 1.1em;
background-color: rgba(0,0,0,0.5);
border-radius: 4px; 
transition: background .5s ease-out;
}

/* Trying to get the frozen glass effect with a pseudo-element Patsy! */
#contenu::before {
  display: block; /* pseudo-element are INLINE elements so they must be declared as block elements */
  position: absolute; /* must be positionned absolutely against the div#contenu; works only if #contenu position: relative */
  top: 0; 
  right: 0; 
  bottom: 0; 
  left: 0;
  background: #fff url("../images/background_img.jpg") no-repeat center center fixed;
  background-size: cover;
  content: '\00a0'; /* there must be something or it won't work */
  filter: blur(2px);
  z-index: -1;
}

#contenu:hover {
background-color: rgba(0,0,0,0.7);
}

#contenu ul {
padding-left: 1.5em;
}

#contenu ul > :first-child {
  padding-top: 1em;
}

#contenu ul > :last-child {
  padding-bottom: 1em;
}

#contenu ul li {
padding: 0.3em; 
font-size: 1em;
}

#contenu h1 {
margin: 1em 0.8em;
}

li > ul {
  font-size: 1em;
  line-height: 1.1em;
}

#contenu h2 {
margin: 1em 1.5em;
}

#contenu h3 {
margin: 1em 1.8em;
}

#contenu p, #contenu ul {
margin: 0em 2em;
}

#contenu a:hover {
text-decoration: none;
color: white;
text-shadow: 5px 5px 10px orange, -5px -5px 10px orange;
}

.left_content {
float: left;
margin: 0 0 0 3%;
width: 20%;
}

.left_content img {
width: 100%;
}

.right_content {
float: right;
width: 65%;
margin: 0 5% 0 0;
padding: 0;
}

#contenu a {
color: #FF7F00;
text-decoration: none;
}

div.contact {
padding: 3% 3%;
}

#contenu .contact h2, #contenu .contact h3, #contenu .contact p, #contenu .contact span {
margin-left: 0;
}

#footer {
/* float:left;
clear:both; */
position: absolute;
bottom: 0;
height: 40px;
width: 100%;
/* margin-top: -49px;  according to cssstickyfooter.com must be the negative value of footer height 
padding-left: 200px; */
background-color: rgba(0,0,0,0.5);
overflow: hidden;
}

#footer ul {
padding: 1em 0 0 300px;
width: 40%;
margin: 0 auto;
color: white;
float: left
}

#footer ul li {
display: inline; 
margin: 1em 1em 1em 10%;
font-variant: small-caps;
}

#footer a {
text-decoration: none; 
color: #FF7F00;
font-size: 1.1em;
}

#footer a:hover {
text-decoration: none;
color: white;
text-shadow: 3px 3px 6px orange, -3px -3px 6px orange;
}

/*div.custom-copyright {
float: left;
color: #aaa;
font-size: 0.9em;
font-variant: small-caps;
padding-top: 10px;
}
*/


#mod-custom89 > * {
	margin: 1em 0;
	font-size: 1.1em;
	text-align: justify;
	line-height: 100%;
	color: #ffffff;
}

form {
font-size: 1.1em; 
font-weight: normal; 
margin: 1em 1.8em;
}

.chronoform {
float: right;
font: 1em Helvetica Arial sans-serif;
margin: 3em 3em;
}

p.chrono_credits {
font-size: 0.7em;
}

input[type], textarea {
display: inline-block; 
border: 1px solid #FF7F00;
box-shadow: 0 0 3px rgba(128, 128, 0, 1);
font-size: 0.9em;
}

.input_container {
margin: 1em 0;
}

#question  {
display: inline-block;
width: 240px;
height: 120px;
text-align: center;
background: url('/images/tr-avocat/poservotrequestion-sprite.png') bottom;
text-indent: -9999px;
}

#question:hover {
background-position:top;
}

.badge {
display: none;
}

.label-warning {
display: none;
}