/* 
* NFB.CA Web extension
*    _____
*   / ___ \
*  / / _ \ \
*  \ \(_)/ /
*   \_   _/
*    |   |   équipe web ONF / 
*    |_|_|   NFB web team  / 2010
*    =====   
*
*  Les journaux de Lipsett
*  Gil Nault (designer graphique) Pierre Bourgeois (intégrateur-programmeur)
*/


@import url("reset.css");
@import url("grids.css");

/* FONTS AND GENERIC CLASSES
---------------------------------------------------------*/
	body {font: 13px/1.6 arial,helvetica,clean,sans-serif; background: #2A2E2C  url(../imgs/background.jpg);color: #000; z-index: 2;padding: 0; margin: 0;}
	h1 a {display: block; height:172px; width: 709px;  text-indent: -9999px;}
	h2.first {margin-top: 0;}	
	h2 {font-size: 18px;line-height: 22px; margin: 30px 0 22px 0;}
	h3 {font-size: 16px;}
	dt {font-weight: bold; line-height: 1.2}
	dd {margin-bottom: 12px;}
	p {margin: 0 0 15px 0; text-align: justify; }
	a, a:visited{ text-decoration:none; color:#874342;}
	a:hover{color:#999; text-decoration:underline;}
	
	.clear {clear: both;}
	.hide {display: none;}
	.left {float: left;}
	.right {float: right;}
	.alignright {float: right; margin: 0 0 0 15px;}
	.horizontal li {display: inline;} /* Horizontal list */
	.playing {display: none;}
	
/* LAYOUT
---------------------------------------------------------*/
	
	#header,#content{width:709px; margin:0 auto; }
	#equalize,.innerFooter{width:980px;margin:0 auto; }
	#container { position: relative; bottom: -30px; background: url(../imgs/background.jpg);}
	
/* SKINNING 
---------------------------------------------------------*/

	/* Title */
	.fr h1  a {background: url(../imgs/lipsett_titre_FR.png);}
	.en h1  a {background: url(../imgs/lipsett_titre_EN.png);}

	/* Credits */
	#credits-fr {background-image: url(../imgs/lipsett_texte_FR.png); width:709px; height: 66px; text-indent: -9999px; margin: 10px 0; }
	#credits-en {background-image: url(../imgs/lipsett_texte_AN.png); width:709px; height: 66px; text-indent: -9999px; margin: 10px 0; }
	
	/* Backgrounds */
	.innerContainer{background-image: url(../imgs/gars-dans-le-bas.png); background-repeat: no-repeat; background-position: -230px 100%; min-width: 1250px;}
	.arthur-lipsett .innerContainer{background-image: url(../imgs/gars-dans-le-bas-2.png); background-repeat: no-repeat; background-position: -130px 100%; min-width: 1250px;}
	.home .innerContainer{background-image: url(../imgs/montgolfiere.png); background-repeat: no-repeat; background-position: -85px 0;min-width: 1250px;}
	
	#content {padding: 50px 0 90px 0;}
	.home #content {padding: 50px 0;}
	
	#content p {width: 560px; text-align: left;}
	.home #content p, .film #content p{width: 100%; text-align: justify;}

	
	#mediamovie {margin-top: -10px;}
	
	#credits .left {width: 250px;}
	#credits .right {width: 250px;}
	
	
	/* Making of*/
	#makingof  ul {margin: 20px auto; width: 450px;}
	#makingof  li {width: 203px; float: left; margin-right: 20px;}
	#makingof  li.right {float: right;}
	#makingof img {border: 1px solid #000000;}
	
	.text {position: relative;}
	#videos {position: absolute; top: 0; right: -110px;}
	
	#videos  li {padding-bottom: 15px; font-weight: bold;}
	#videos  li a{padding-bottom: 15px;}
	#videos  img{border: 1px solid #000000;}
	.film #videos, .home #videos {display: none;}
	
	#content a {color: #26557a}
	 .arthur-lipsett.en #content {padding-bottom: 150px;}

	#extra {background: url(../imgs/footer-bacground.png) repeat-x; padding-top: 20px; }
	#extra  .innerExtra {background: #2A2E2C;border-top: 1px solid #5F6261;}
	#extra h3 {color: white; margin: 0; padding: 9px 0 5px 0;font-size: 24px; font-weight: normal;}
	#extra img {margin: 2px 0 10px 0;}
	
	#extra, #footer {color: white; font-size: 12px;position: relative; }
	.innerUnit {border-right: 1px solid #5F6261;  padding: 10px 25px 25px 25px;}
	.firstUnit  .innerUnit {padding-left: 22px;}
	.lastUnit .innerUnit {border-right: none; padding-right: 0;}
	
	a.download {background: url(../imgs/down.gif) no-repeat 0 3px; padding-left: 15px;}
	
	/* Tabs navigation
	-------------------------------------------------------------- */	
	#tabs {width: 570px}
	#tabs  h2 {padding-top: 25px;}
	#tabs ul.tabNavigation {} 
	#tabs ul.tabNavigation li {display: inline; }   
	#tabs ul.tabNavigation a {color: #000000; display: block; float:left; padding: 5px 0; margin: 0 20px 0 0; font-size: 12px;}
	#tabs ul.tabNavigation a:hover,
	#tabs ul.tabNavigation a.selected {border-top: 5px solid #000; text-decoration: none; position: relative; bottom: 5px; font-weight: bold} 
	#tabs div {clear: both;}
	
	/* LAURELS
	-------------------------------------------------------------- */

	/*#laurels {width: 800px; position: relative; left: -20px; margin: -6px 0;}*/
	#laurels {width: 800px; position: relative; margin: -6px 0 30px -30px;}
	#laurels .ligne2 {width: 800px; position: relative; left:130px; margin: 0;}

	
	/* Blog 
	------------------------------------------------*/
	
	#blog {padding: 0 }
	#blog .post h2 {margin-bottom: 0; color:#26557a; font-size: 21px; font-weight: bold; line-height: 1;}
	#blog .post small {margin-top: 0; font-size: 11px;}
	#blog  .post .entry {padding: 15px 0 3px 0; margin-bottom: 39px;border-bottom: 1px solid #000000; font-size: 12px;}
	#blog  .post p.postmetadata {display : none;}
	#blog #comment {width: 708px; border: none}
	#blog input {border: none}
	#blog input#submit {border: 1px solid #000; padding: 3px 5px;}
	#blog span.comment {padding-left: 20px; background: url(../imgs/comment.gif) no-repeat 0 2px; margin-left: 30px;}
	#blog .navigation { padding-bottom: 30px; margin-top: 0; padding-top: 0;}
	
	#sidebar {display: none;}
	
	/* End blog */
	
	#extra p {margin: 0 0 18px 0; }
	#extra a, #footer  a {color: #e0cf95; }
	#extra ul.horizontal  {margin: 0;}
	#extra ul.horizontal li {}
	#extra ul.horizontal li a{padding: 0 20px 0 25px; display: block; float: left; border-right: 1px solid #5F6261; }
	#extra ul.horizontal li.last a {padding: 0 0 0 40px; border-right: none; }
	#extra ul.horizontal li a.download { width: 80px; height: 20px; background: url(../imgs/down.gif) no-repeat 8px 3px;}
	#extra ul.horizontal li.last a.download {background-position: 22px 3px;}
	
	#footer { padding: 25px 0 9px 0; background: #2A2E2C;border-top: 1px solid #5F6261;  }
	#footer .innerFooter {padding-left: 50px;}
	#footer .innerFooter ul {padding-left: 100px; background: url(../imgs/logo-nfb.gif) no-repeat 0 4px;; height: 53px;}
	#footer .innerFooter li {font-size: 12px; padding: 0 10px; border-right: 1px solid #5F6261;}
	#footer .innerFooter li.first  {padding-left:0;}
	#footer .innerFooter li.last {border-right: none;}
	#footer .innerFooter p {padding-left: 100px;font-size: 11px; clear: both; margin-top: -24px;}
	#footer .innerFooter a {color: #e0cf95;}


	#note1{z-index:100000;}
	#note1{ width:300px; padding: 5px; background:#000; color:#FFF;}
	
/* TOP MENU
----------------------------------------------------------*/
	.menu {list-style: none; width:755px; margin:0 auto 30px auto;}
	.menu li { display: inline; }
	.menu li a { display: block; float: left; height: 60px;  text-indent: -9999px;}
	
	/* Francais */
	
	.fr .menu li a {background-image: url(../imgs/menu.png);}
	
	.fr .menu li a.film { width: 137px; background-position: 0 0;}
	.fr .menu li a.team { width: 151px; background-position: -137px 0;}	
	.fr .menu li a.arthur-lipsett{ width: 336px; background-position: -288px 0;}
	.fr .menu li a.blog{ width: 131px; background-position: -624px 0;	}
	
	.fr .menu li a.film:hover, 
	.film.fr .menu li a.film,
	.fr .menu li a.film:focus {background-position: 0 -65px;}
	
	.fr .menu li a.team:hover,
	.team.fr  .menu li a.team,
	.fr .menu li a.team:focus {background-position: -137px -65px;}	
	
	.fr .menu li a.arthur-lipsett:hover, 
	.arthur-lipsett.fr  .menu li a.arthur-lipsett,
	.fr .menu li a.arthur-lipsett:focus {background-position: -288px -65px;}
	
	.fr .menu li a.blog:hover, .blog .menu li a.blog,
	.blog.fr  .menu li a.blog,
	.fr .menu li a.blog:focus {background-position: -624px -65px;}
	.fr .menu a { outline: none; }
	
	/* English */
	
	.en .menu li a {background-image: url(../imgs/png_Menu-an.png);} 
	.en .menu li a.film { width: 143px; background-position: 0 0;}
	.en .menu li a.team { width: 169px; background-position: -143px 0;}	
	.en .menu li a.arthur-lipsett{ width: 335px; background-position: -312px 0;}
	.en .menu li a.blog{ width: 108px; background-position: -647px 0;	}	
	
	.en .menu li a.film:hover, 
	.film.en  .menu li a.film,
	.en .menu li a.film:focus {background-position: 0 -60px;}
	
	.en .menu li a.team:hover,
	.team.en  .menu li a.team,
	.en .menu li a.team:focus {background-position: -143px -60px;}	
	
	.en .menu li a.arthur-lipsett:hover, 
	.arthur-lipsett.en  .menu li a.arthur-lipsett,
	.en .menu li a.arthur-lipsett:focus {background-position: -312px -60px;}
	
	.en .menu li a.blog:hover, .blog .menu li a.blog,
	.menu.en  li a.blog:focus {background-position: -647px -60px;}
	.en .menu a { outline: none; }