/***************************************************************************************************
    Auteur          :   Michel Gratton (mgratton@infinitdesign.ca)
    Date creation   :   19 septembre 2008
    Fichier	        :   style_champlain.css
    Type            :   Global CSS
    Description     :   Contient toutes les style utilisés pour le site Champlain retracé
***************************************************************************************************/
body {
  font-family: Arial, Verdana, Helvetica, sans-serif;
  text-align: center;
  font-size: 10pt;
  color: #000;
  background: #fff url(../images/main-bg.gif) repeat-x 0 0;
  padding-top: 31px; /*espace pour la nav bar onf*/
  margin: 0 0 -15px;
}
/**********
  Reset "control"
**********/
p, ul, ol, li, div, span, a {text-align: left;}
a{color: #960; text-decoration: none;}
a:hover {text-decoration: underline;}
a img {border: 0px; display: block;}

b, strong{font-weight:bold}
i, em{font-style:italic}

ul,ol{list-style-position:inside}
ul, ol, li {margin: 0; padding: 0; list-style-type: none;}

/**********
	Pour changer le font-size du site, simplement changer dynamiquement le class du body pour une des 
  class suivante et le reste s'ajustera en concéquence
**********/
body.fs_normal {font-size: 10pt;}
body.fs_medium {font-size: 12pt;}
body.fs_large {font-size: 15pt;}


/**********
    Contrôle du contenue et de son positionnement global dans la page
**********/
div#site-wrapper {
  position: relative;
  margin: 0 auto; /* Se qui permet d'afficher le div au centre lorsque le contenue doit être centré ;) */
  padding: 0;
  text-align: left;
  width: 960px;
}
div#content-wrapper {background-color: #fff; padding-bottom: 5em;}

div#top-caption {text-align: right; padding: 1em 0 0.5em; font-weight: bold;}

div#header-wrapper {
	position: relative;
  height: 339px;
}
  div#header-wrapper .boxlogo {
    position: absolute;
    top: 20px; left: 20px;
    width: 280px; height: 223px;
    overflow: hidden;
    text-indent: -8000px;
    opacity: 0.72; -moz-opacity: 0.72;
    background-color: #0a0100;
    z-index: 1; /* Relatif au headerWrapper */
    opacity: 0.72; -moz-opacity: 0.72;
  }
  .fr div#header-wrapper .header-logo {
    position: absolute;
    top: 87px; left: 24px;
    width: 271px; height: 88px;
    z-index: 2; /* Relatif au headerWrapper */
	}
  .en div#header-wrapper .header-logo {
    position: absolute;
    top: 88px; left: 33px;
    width: 253px; height: 87px;
    z-index: 2; /* Relatif au headerWrapper */
	}

.home div#header-wrapper {
	height: 401px;
  background: transparent url(../images/header/bg-home.jpg) no-repeat 0 0;
}
  .home div#header-wrapper .boxlogo {
    width: 371px; height: 322px;
  }
  .fr.home div#header-wrapper .header-logo {
    position: absolute;
    top: 135px; left: 36px;
    width: 324px; height: 101px;
    z-index: 2; /* Relatif au headerWrapper */
  }
  .en.home div#header-wrapper .header-logo {
    position: absolute;
    top: 135px; left: 32px;
    width: 323px; height: 110px;
    z-index: 2; /* Relatif au headerWrapper */
  }

	.home div#flash-holder {
  	position: absolute;
    top: 20px; right: 20px;
  }

.the-work div#header-wrapper {
  background: transparent url(../images/header/bg-the-work.jpg) no-repeat 0 0;
}
.the-techniques div#header-wrapper {
  background: transparent url(../images/header/bg-the-techniques.jpg) no-repeat 0 0;
}
.the-contexte div#header-wrapper {
  background: transparent url(../images/header/bg-the-contexte.jpg) no-repeat 0 0;
}
.the-team div#header-wrapper {
  background: transparent url(../images/header/bg-the-team.jpg) no-repeat 0 0;
}
.press-room div#header-wrapper {
  background: transparent url(../images/header/bg-press-room.jpg) no-repeat 0 0;
}
.news-events div#header-wrapper {
  background: transparent url(../images/header/bg-home.jpg) no-repeat 0 0;
}
.making-of div#header-wrapper {
  background: transparent url(../images/header/bg-making-of.jpg) no-repeat 0 0;
}
.photo-gallery div#header-wrapper {
  background: transparent url(../images/header/bg-photo-gallery.jpg) no-repeat 0 0;
}
div#top-yellow-bar {
	position: absolute;
  background-color: #fc0;
  width: 650px; height: 10px;
  bottom: 0px; right: 0px;
  display: inline;
  margin: 0; padding: 0;
}

div#flash-holder div#mediamovie {
	position: relative;
  width: 512px;
}
  div#flash-holder .flash-update p {
    /*border:1px solid #960;*/
    color: #fff;
    font-size:12px;
    /*font-size: 1.2em;
    background-color: #0a0100;
    padding:5px;*/
    text-align:right;
  }
  div#flash-holder .flash-update p a {
    /*color: #fc0;*/
    color:#fff;
    font-weight: bold;
  }
  body.fr .flash-update p.en,
  body.en .flash-update p.fr,
  div.flash-replaced .alt {
    display:none;
  }
  body.en .flash-update p.en,
  body.fr .flash-update p.fr {
    display:block;
    width: 100%;
    position: absolute;
    top: 0; left: 0;
  }

div#side-nav-wrapper {
	float: left;
 	width: 310px;
  background: transparent url(../images/side-nav-bg.gif) repeat-x 0 0;
}
div#side-nav-wrapper #side-nav {
	padding: 2px 10px;
}
div#side-nav-wrapper #side-nav ol li {
	float: left; clear: left;
	text-transform: uppercase;
  border-top: 1px solid #fc0;
  line-height: 2.5em;
  width: 100%;
}
  div#side-nav-wrapper #side-nav ol li a {
    display: block;
    width: 100%;
  }
  div#side-nav-wrapper #side-nav ol li#go-home {
  	line-height: 2em;
    border: 0;
  }

  div#side-nav-wrapper #side-nav ol li a {
    text-transform: none;
    color: #630;
    font-size: 1.5em;
  }
    div#side-nav-wrapper #side-nav ol li a:hover,
    div#side-nav-wrapper #side-nav ol li a.active {
      color: #000;
      text-decoration: none;
    }
  
    div#side-nav-wrapper #side-nav ol li#go-home a {
      font-size: 1em;
      color: #000;
    }
    div#side-nav-wrapper #side-nav ol li#go-home a:hover,
    div#side-nav-wrapper #side-nav ol li#go-home a.active {
      font-weight: bold;
    }

  div#side-nav-wrapper #side-nav ol ul.closed-menu {
  	display: none;
  }

  div#side-nav-wrapper #side-nav ol ul {
  	padding-bottom: 2em;
  }

  div#side-nav-wrapper #side-nav ol ul li {
    float: left; clear: left;
    text-transform: none;
    border-width: 0;
    width: 100%;
  }
    div#side-nav-wrapper #side-nav ol ul li a {
    	background: transparent url(../images/sprite-dot-menu.gif) no-repeat 0 -95px;
      font-size: 1em;
      line-height: 1.5em;
      padding-left: 20px;
      color: #960;
      font-weight: normal;
    }
      div#side-nav-wrapper #side-nav ol ul li a:hover,
      div#side-nav-wrapper #side-nav ol ul li a.active {
      	background-position: 0 5px;
        color: #960;
        font-weight: bold;
      }

div#footer-wrapper {
	clear: both;
  padding: 2em 0 5em;
}
  div#footer-wrapper #foot-nav {
  	padding: 1.5em 0.7em 1em;
  	border-top: 1px solid #ccc;
  	border-bottom: 1px solid #ccc;
  }
  div#footer-wrapper #foot-nav #foot-caption {
  	text-transform: uppercase;
    font-weight: bold;
    font-size: 1.1em;
    color: #35251c;
	}
  div#footer-wrapper #foot-nav ol {
  	display: block;
    margin-left: -0.8em;
  }
    div#footer-wrapper #foot-nav ol li {
      float: left;
      padding: 0.5em 0;
    }
      div#footer-wrapper #foot-nav ol li a {
        display: block;
        padding: 0 .8em;
        border-right: 1px solid #ccc;
        text-transform: uppercase;
        color: #960;
	font-size:.9em;
      }
      div#footer-wrapper #foot-nav ol li a:hover {
      	color: #000;
        text-decoration: none;
      }
      div#footer-wrapper #foot-nav ol li a.last {
        border-right-width: 0;
      }

  div#footer-wrapper #foot-sub-info {
  	clear: both;
    border-bottom: 1px solid #ccc;
  }
    div#footer-wrapper #foot-sub-info a#foot-logo,
    div#footer-wrapper #foot-sub-info a#foot-logo-musee {
      float: left;
      position: relative;
      /*text-indent: -8000px;
      overflow: hidden;*/
      border-width: 0;
      border-right: 1px solid #ccc;
      height: 137px;
    }
    div#footer-wrapper #foot-sub-info a#foot-logo {
    	clear: both;
      width: 227px;
		}
      div#footer-wrapper #foot-sub-info a#foot-logo img {
        position: absolute;
        top: 21px; left: 3px;
      }
      div#footer-wrapper #foot-sub-info a#foot-logo span,
      div#footer-wrapper #foot-sub-info a#foot-logo-musee span {
      	display: block;
        position: absolute;
        top: 137px; left: 0px;
        font-weight: bold; font-size: 1em !important;
        text-indent: 0.4em;
        line-height: 2em;
        border-width: 0;
        border-right: 1px solid #ccc;
        border-bottom: 1px solid #ccc;
      }
      div#footer-wrapper #foot-sub-info a#foot-logo span {
        width: 227px;
      }
    div#footer-wrapper #foot-sub-info a#foot-logo-musee,
    div#footer-wrapper #foot-sub-info a#foot-logo-musee span {
      width: 101px;
    }
      div#footer-wrapper #foot-sub-info a#foot-logo-musee img {
        position: absolute;
        top: 23px; left: 18px;
      }
    div#footer-wrapper #foot-sub-info p#foot-desc {
    	float: left;
    	margin: 1.1em;
      line-height: 1.4em;
      width: 590px;
    }
  div#footer-wrapper a {
    color: #960;
  }

h1 {
	float: left;
  display: inline; /* Supprime le double margin de IE 6 sur les éléement en float et n'affecte pas le display */
  width: 610px;
	font-size: 2em;
  margin: 0 0 0.5em 0; padding: 0;
}
h2 {
	float: left;
  display: inline; /* Supprime le double margin de IE 6 sur les éléement en float et n'affecte pas le display */
  width: 610px;
	font-size: 1.2em;
  margin: -0.5em 0 0.5em 0; padding: 0;
}

div.section-jump {
	padding-top: 2em;
}
a.section-jump,
span.section-jump {
	color: #960;
  font-size: 1.1em;
  font-weight: bold;
}

div#page-content {
	float: left;
  display: inline; /* Supprime le double margin de IE 6 sur les éléement en float et n'affecte pas le display */
  margin: 20px;
  width: 610px;
}
div#page-content .left-col {
	float: left;
  display: inline; /* Supprime le double margin de IE 6 sur les éléement en float et n'affecte pas le display */
  width: 290px;
	line-height: 1.5em;
}
div#page-content .right-col {
	float: right;
  display: inline; /* Supprime le double margin de IE 6 sur les éléement en float et n'affecte pas le display */
  width: 290px;
	line-height: 1.5em;
}
div#page-content .full-col {
	line-height: 1.5em;
}
div#page-content .left-col span.h2,
div#page-content .right-col span.h2 {
	display: block;
	font-size: 1.2em;
  font-weight: bold;
  margin: 0 0 0.5em;
}

div#page-content p.citation {
	margin-bottom: 0px;
	font-size: 1.6em;
  line-height: 1.2em;
}
div#page-content p.citation.first {
	margin-top: 0.6em;
}

div#flash-lib {
	width: 512px;
  padding-top: 1em;
}
div#flash-lib #flash-holder {
	margin-bottom: 1em;
}
div#flash-lib .film-desc {
	clear: both; padding-top: 0.5em;
}
/**********
	Style pour les thumbnails du player
**********/

.clip-title em {font-size:12px; font-style:normal;}

.thumb-row:after{content:".";display:block;height:0;clear:both;visibility:hidden;}
.thumb-row {width:100%; border-top:1px solid #ffcc00;padding-top:15px;}
.thumb-row h3{margin-top:0; padding-top:0;}
.thumb-row p {width:350px; margin-left:145px;}

a.thumb-box {
	float: left;
	position: relative;
  margin: 0 12px 12px 0;
	display: block;
  width: 126px; height: 71px;
  overflow: hidden;
  text-align: center;
  background-color: #1e0b00;
  border: 2px solid #fff;
}
	a.thumb-box img.thumb {
  	height: 71px;
  }
	a.thumb-box img.thumb-play {
  	position: absolute;
    top: 51px; left: 5px;
  }
a.thumb-box:hover,
a.thumb-box .active {
	border: 2px solid #ffcd07;
}
.thumb-row {width:100%; display:block;}

/**********
	Style pour la galerie d'image
**********/
div#gallery-wrapper {
	clear: both;
	position: relative; 
  margin-top: 1em;
}
  div#gallery-wrapper .gallery-styled {
  	display: block;
  	clear: both;
  	width: 610px; 
    margin: 0.5em 0 0 -2px;
  }
    div#gallery-wrapper .gallery-styled li {
    	float: left;
    	width: 85px;
      height: 55px; 
      margin: 0 0 2px 2px; 
      background-color: #000;
      display: inline;
    }
    div#gallery-wrapper #main-image .caption{
    	display: block; 
      clear: both; 
      width: 610px; 
      font-size: 1em; 
      text-align: center; 
      line-height: 1.4em; 
      padding: 1em 0;
      background-color: #fff;
    }
    div#gallery-wrapper #main-image {
    	margin: 0 auto;
      min-height: 396px;
      width: 608px; 
      overflow: visible;
      background-color: #000;
     }
		div#gallery-nav {
    	text-align: center;
      line-height: 1.2em;
      padding: 0.5em;
    }
 
/**********
    Style générique
**********/
.block {display: block;}
.clear {clear: both;}
.left {float: left;}
.right {float: right;}
.hide-content {display: none; visibility: hidden;}
.opac_80 {opacity: 0.8; -moz-opacity: 0.8;}
.opac_50 {opacity: 0.5; -moz-opacity: 0.5;}
.h0 {height: 0px;}

/********** FIN GÉNÉRIQUE **********/
.after:after {content:".";display:block;height:0;clear:both;visibility:hidden;}

/**********
    Style exceptionnel
**********/
pre.___trace {
  display: block;
  border: 1px dashed #c0c0c0;
  background-color: #FEE6B8;
  padding: 10px;
  color: #000;
  text-align: left;
  /*white-space: normal;*/
}
pre.___trace:before {content:"OUTPUT TRACE"; font-weight: bold; color: #800000; font-size: 1.5em; display: block; border-bottom: 1px solid #800000;}
pre.___trace:after {content:"END OUTPUT TRACE"; font-weight: bold; color:#800000; display: block; border-top: 1px solid #800000;}

/********** FIN EXCEPTIONNEL **********/