/*  Typo
----------------------------------------------- */

a:link, a:visited
{
    text-decoration: underline;
    color:#EC4413;
}
a:active { 	text-decoration: underline; }
a:hover { text-decoration:none; }


h1 { font: bold 36px/150% Oswald, sans-serif !important; }
h2 { font: bold 36px/150% Oswald, sans-serif !important; color: black !important }

p {	font: normal 16px/150% Oswald, sans-serif !important;}

/*  Layout
----------------------------------------------- */

body {
    background: #333333 url(https://u.jimcdn.com/cms/o/s4a469cbb3f226f53/userlayout/img/bg.gif?t=1319710136) no-repeat top left;
    padding:35px 0 0 0;
    margin:0;
    font: 11px/140% Verdana, Geneva, Arial, Helvetica, sans-serif;
}

#container
{
    margin:0 auto;
    width:834px;
    background:white;
}

#header
{
    padding:17px;
}

#header h1,
#header a
{
    padding:0;
    font-family:"Helvetica","Lucida Sans Unicode",Tahoma,Verdana,Arial,Helvetica,sans-serif;
    font-size:30px;
    font-weight:normal;
    text-decoration:none;
    line-height:1.3em;
    color:#666666;
    text-align:right;
}

#header a:hover { text-decoration:none;  }


#navigation
{
    float:left;
    width:220px;
    padding:17px;

}
#sidebar
{
    padding-top:10px;
}

#content {
    width: 100%;
    padding: 100px 0 0 0;
    background-image:url('https://u.jimcdn.com/cms/o/s4a469cbb3f226f53/userlayout/img/site-back.jpg?t=1536679919');
    background-size: 100%;
    background-color: #039e4b;
    background-repeat:no-repeat;
    padding-bottom: 60px;
}

#content_area{
    max-width: 1100px;
       background: rgba(255,255,255,0.92);
    padding: 50px 30px 30px 30px;
    margin: auto;
    border-radius: 12px;
    font: normal 16px/150% Oswald, sans-serif !important;
}

#footer
{
    clear:both;
    margin-top:10px;
    background:url(https://u.jimcdn.com/cms/o/s4a469cbb3f226f53/userlayout/img/footer-bg.gif?t=1319710136) repeat-x top;
    height:65px;
}

#footer .gutter 
{
    height:30px;
    padding:35px 15px 0 90px;
}

/*  Navigation
----------------------------------------------- */

ul.mainNav1,
ul.mainNav2
{
    margin:0;
    padding: 0;
}


ul.mainNav1 li,
ul.mainNav2 li
{
    display: inline;
    margin: 0;	
    padding: 0;
}


ul.mainNav1 li a,
ul.mainNav2 li a
{
    font:normal 11px/140% Verdana, Geneva, Arial, Helvetica, sans-serif;
    text-decoration: none;
    display: block;
    color:#333;
    border-bottom:1px solid #CCC;
}


ul.mainNav1 li a { padding:4px 4px 4px 4px; }
ul.mainNav2 li a { padding:4px 4px 4px 14px; }
ul.mainNav3 li a { padding:4px 4px 4px 24px; }


ul.mainNav1 a:hover
{
    background:#EEE;
    color:black;
}

ul.mainNav1 a.current { font-weight:bold; }



/* Modifs Gauthier */
/************************************ MENU ***********************************/
.nav ul {
  list-style: none;
  background-color: #53270d;
  text-align: center;
  padding: 0;
  margin: 0;
}

.nav li {
  font-family: 'Oswald', sans-serif;
  font-size: 1.2em;
  line-height: 40px;
  text-align: left;
color:white
}

.nav a {
  text-decoration: none;
  color: #fff !important;
  display: block;
  padding-left: 15px;
  border-bottom: 1px solid #888;
  transition: .3s background-color;
}

.nav a:hover {
      background-color: #400b0b !important;
color:white !important;
}



.nav a.active {
   background-color: #400b0b !important;
color:white !important;
  cursor: default;
}

/* Sub Menus */
.nav li li {
  font-size: .8em;
}

/* cards */
.card-custo {
  /* Add shadows to create the "card" effect */
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  transition: 0.3s;
}

/* On mouse-over, add a deeper shadow */
.card-custo:hover {
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}

/* Add some padding inside the card container */
.container-custo {
  padding: 2px 16px;
}

/*******************************************
   Style menu for larger screens

   Using 650px (130px each * 5 items), but ems
   or other values could be used depending on other factors
********************************************/

@media screen and (min-width: 650px) {
  .nav li {
    width: 102px;
    border-bottom: none;
    height: 50px;
    line-height: 50px;
    font-size: 1.4em;
    display: inline-block;
    margin-right: -4px;
  }

  .nav a {
    border-bottom: none;
  }

  .nav > ul > li {
    text-align: center;
  }

  .nav > ul > li > a {
    padding-left: 0;
  }

  /* Sub Menus */
  .nav li ul {
    position: absolute;
    display: none;
    width: 200px;
  }

  .nav li:hover ul {
    display: block;
z-index:10000;
  }

  .nav li ul li {
    display: block;
    width: 100%;
  }
}