/*David Saber Com v7 CSS*/

@font-face {
	/* Generated by Font Squirrel (http://www.fontsquirrel.com) on September 7, 2011 */
    font-family: 'WindsorBold';
    src: url('/tech/windsor-bold-webfont.eot');
    src: url('/tech/windsor-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('/tech/windsor-bold-webfont.woff') format('woff'),
         url('/tech/windsor-bold-webfont.ttf') format('truetype'),
         url('/tech/windsor-bold-webfont.svg#WindsorBold') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'WindsorRegular';
    src: url('windsor-regular-webfont.eot');
    src: url('windsor-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('windsor-regular-webfont.woff') format('woff'),
         url('windsor-regular-webfont.ttf') format('truetype'),
         url('windsor-regular-webfont.svg#WindsorRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

.PlayBtnInArticleSide {
	/*Semble concerner les textes des img dans les articles genre Tuts*/
	position:relative;
	left:3px;
	top:-100px;
	color : white ;
	padding:0px;
	margin:0px;
	font-weight:600;
	text-align:left;
	text-shadow: 2px 2px 2px #000;
	filter: Glow(Color=gray, Strength=2); 
}

html {
	height:100%;
}

body {
	background-color:transparent;
	/* 2011 : background-color : #5d748c ;*/
	height: 100% ; 
	width: 100% ;
	margin : 0px ;
	padding: 0px ;
    background: url('/tech/dsc7_bg_chk.png') no-repeat center center fixed;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}

body.Starter {
	background-color : #5d748c ;
	z-index:-1;
}

iframe.contact {
	z-index: 9;
	position: absolute;
	top: 100px;
	left: 350px;
	width: 870px;
	height: 1000px;
	padding: 0px;
	margin:0px;
	border: 2px solid black;
	background-color: #b4bfca;
	overflow:hidden;
}

div.VerticalMiddleCol {
	/* Délimite la totalité du contenu dans une colonne centrée allant de haut en bas du browser */
	position: relative;
	z-index: 1;
	width: 1280px;
	height: 100%;
	/*min-width:1280px;*/
	margin-right: auto ;
	margin-left: auto ;
	/*border: 3px solid green;*/
}

div.SectionAllBelowUpperMargin {
	/* Délimite la totalité du contenu à l'intérieur de div.VerticalMiddleCol, à partir du bas de la marge supérieure, jusqu'au bas de div.VerticalMiddleCol */
	z-index: 2;
	position: absolute;
	top: 5%;
	width: 100%;
	height: 94%;
	/*border: 1px solid green;*/ 
}

div.MainFrameHd720 { 
	/* Délimite la totalité du contenu à l'intérieur de div.SectionAllBelowUpperMargin, dans un rectangle devant faire 1280X720px */
	/* Bug: le contenu dépasse de ce div, probablement à cause des contours de div.SectionAllBelowHeader */
	z-index: 3;
	position: relative;
	width: 100%;
	height: 720px;
	/*text-align: center;*/
	/*border: 1px solid red;*/
}

div.DSCHeader { 
	/* barre horizontale des menus */
	position: absolute;
	z-index: 4;
	top: 0px;
	left: 0px ;
	width: 100%;
	height: 65px;
	margin : 0px ;
	padding: 0px ;
	border:0px;
	background-color:transparent;
	/*border: 1px solid white;*/
}

div.SectionAllBelowHeader { 
	/* Le cadre bleu ciel sous la barre des menus */
	position: absolute;
	z-index: 5;
	width: 100%;
	height: 655px;
	top:66px;
	left:0px;
	margin : 0px ;
	padding: 0px ;
	border: 3px solid black;
	background: url('/tech/dsc7_mainframe_bg_sky.png') repeat center top fixed;
	background-size: 1285px 780px;
}

div.NavLeft {
	/*La barre verticale à droite du GUI des menus de niveau 2*/
	z-index: 8;
	position: absolute;
	top: 0px ;
	left: 0px ;
	width: 214px;
	height: 100%;
	margin : 0px ;
	padding: 0px ;
	text-align: right;
	vertical-align:middle;
	/*border: 1px solid blue;*/
}

div.AsideRight {
	/*Colonne verticale de droite contenant commentaires et liens vers sous-articles, c'est à dire les menus niveau 3*/
	z-index: 8;
	position: absolute;
	top: 0px ;
	left: 1070px ;
	width: 209px;
	height: 100%;
	margin : 0px ;
	padding: 0px ;
	/*text-align: right;*/
	vertical-align:middle;
	/*border: 1px solid green;*/
}

div.MainContent {
	/*La zone centrale entre div.NavLeft et div.AsideRight, qui contient introductions.*/
	z-index: 8;
	position: absolute;
	top: 0px ;
	left: 215px ;
	width: 690px;
	height: 100%;
	margin : 0px ;
	padding-left : 80px ;
	padding-right : 80px ; 
	/*border: 1px solid yellow;*/
}

div.FrameArticle{
	/*Une section entre div.NavLeft et bord droit du div.SectionAllBelowHeader, qui contient les articles et tuts.*/
	z-index: 9;
	position: absolute;
	top: 100px;
	left: 265px;
	width: 870px;
	padding-left: 50px;
	padding-right: 50px; 
	border: 2px solid white;
	background-color:#537190;
}

div.PageSelector { 
	/*Zone qui va de la droite de NavLeft jusqu'au bord droit du div.SectionAllBelowHeader, contient articles, vignettes de redirections.*/
	z-index: 8;
	position: absolute;
	top: 0px ;
	left: 215px ;
	width: 885px;
	height: 100%;
	margin : 0px ;
	padding-left : 90px ;
	padding-right : 90px ; 
	/*border: 1px solid orange;*/
}

div.Respirons {
	/*Une simple marge verticale*/
	height: 50px;
	vertical-align:central;
	/*border: 1px solid orange;*/
}

div.HautDesColonnes {
	/*Réorganisation des 3 colonnes verticales avec div.HautDesColonnes qui prend 15% en haut et un autre div qui prend le reste */
	position:relative;
	height: 100px;
	vertical-align: central;
	/*border: 1px solid pink;*/
}

div.BottomBlockContainer {
	/*Réorganisation des 3 colonnes verticales avec div.HautDesColonnes qui prend 15% en haut et le div BottomBlockContainer qui prend le reste */
	position:relative;
	height:542px; /*hauteur du cadre bleu ciel : 655. div.HautDesColonnes: 100px. Il reste 555px mais il y a 13px de marge interne*/
	vertical-align:bottom;
	padding-top:13px;
	/*border: 1px solid cyan;*/
}

div.TopBlock {
	/*Div qui est verticalement poussé en haut*/
	position:absolute;
	right: 0px;
	top: 0px;
	/*border: 1px solid blue;*/
}

div.BottomBlock {
	/*Div qui est verticalement poussé en bas à droite dans par exemple div.BottomBlockContainer*/
	position:absolute;
	right: 0px;
	bottom: 0px;
	/*border: 1px solid green;*/
}

div.BottomBlockCentered {
	/*Div qui est verticalement poussé en bas et au centre dans par exemple div.BottomBlockContainer*/
	position: absolute;
	bottom: 0px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 0px;
	margin-bottom: 0px;
	padding: 0px;
	width: 100%; /* largeur obligatoire pour être centré */
	vertical-align: bottom;
	/*border: 1px solid green;
	background-color: #0C3;*/
}

div.SeriedImages {
	/*Un div qui contient une suite d'image qui suivent le flow, dans des pages type article de présentation de travaux ou de photos*/
	/*width : 750px;*/
	text-align: center;
	display : table;
	margin : 0px auto;
	padding: 0;
	z-index: 10;
	/*border: 3px solid black;*/
}

div.SeriedImagesCentered {
	/*Un div centré qui contient une suite d'image, suivant le flow, dans des pages type pages d'accueil*/
	/*width : 750px;*/
    height:540px;
	width:750px;
    position:absolute;
    left:50%;
    top:50%;
    margin:-270px 0 0 -375px;
	/*border: 2px solid black;*/
}

div.ImageClickablePic {
	/*bloc div contenant une image, dans pages de type Galleries, avec design genre diapo*/
	z-index: 11;
	background-image:url(/works/dsc7_img_clickable_pic.png);
	width:160px;
	height:90px;
	-webkit-box-shadow: 4px 4px 10px #000;   
    -moz-box-shadow: 4px 4px 10px #000;
	box-shadow: 4px 4px 10px #000;
	float:left;
	margin: 3px 5px;
	position:relative;
}

div.ImageClickableDoc {
	z-index: 11;
	background-image:url(/works/dsc7_img_clickable_doc.png);
	width:160px;
	height:90px;
	float:left;
	margin: 3px 5px;
	position:relative;
}

div.ImageClickablePage {
	z-index: 11;
	background-image:url(/works/dsc7_img_clickable_page.png);
	width:160px;
	height:90px;
	float:left;
	margin: 3px 5px;
	position:relative;
	-webkit-box-shadow: 4px 4px 10px #000;   
    -moz-box-shadow: 4px 4px 10px #000;
	box-shadow: 4px 4px 10px #000;
}

div.ImageCaptionBg {
	z-index: 12;
	position:absolute;
	background-color:#000;
	opacity: 0.5;
	filter:alpha(opacity=50);
	width:100%;
	height:18%;
	left:0px;
	bottom:0px;
	margin:0px;
	padding:0px;
}

div.ImageClickableVideo {
	z-index: 11;
	background-image:url(/works/dsc7_img_clickable_video.png);
	width:160px;
	height:90px;
	-webkit-box-shadow: 4px 4px 10px #000;   
    -moz-box-shadow: 4px 4px 10px #000;
	box-shadow: 4px 4px 10px #000;
	float:left;
	margin: 3px 5px;
	position:relative;
/*	border: 1px solid black;*/
}

div.ImageCaptionTopLeft {
	z-index: 13;
	position:absolute;
	left:15px;
	top:0px;
	margin:0px;
	padding:0px;
}

div.ImageCaptionTopRight {
	z-index: 13;
	position:absolute;
	right:15px;
	top:0px;
	margin:0px;
	padding:0px;
}

div.ImageCaptionBottomLeft {
	z-index: 13;
	position:absolute;
	left:15px;
	bottom:1px;
	margin:0px;
	padding:0px;
}

div.ImageCaptionBottomCenter {
	z-index: 13;
	position:absolute;
	left:0px;
	bottom:1px;
	margin:0px;
	padding:0px;
	width:100%;
}

div.ImageCaptionBottomRight {
	z-index: 13;
	position:absolute;
	right:15px;
	bottom:1px;
	margin:0px;
	padding:0px;
}

div.ImagePageSelector {
	position:relative;
	float:left;
	width:200px;
	height:112px;
	margin: 10px 10px;
	box-shadow: 4px 4px 10px #1E405B;
	-webkit-box-shadow: 4px 4px 10px #1E405B;   
    -moz-box-shadow: 4px 4px 10px #1E405B;
}

div.ImageFrontPage {
	position:relative;
	float:left;
	width:230px;
	height:135px;
	margin: 10px 10px;
	box-shadow: 4px 4px 10px #1E405B;
	-webkit-box-shadow: 4px 4px 10px #1E405B;   
    -moz-box-shadow: 4px 4px 10px #1E405B;
	/*border: 1px solid blue;*/
}

div.ImageInArticle {
	float:right;
	width:200px;
	height:112px;
	margin: 10px 10px;
	box-shadow: 4px 4px 10px #1E405B;
	-webkit-box-shadow: 4px 4px 10px #1E405B;   
    -moz-box-shadow: 4px 4px 10px #1E405B;
}

div.HeaderImage {
	float: left;
	margin-left: 13px;
	margin-right: 13px;
	/*border: 1px solid orange;*/
}

div.HeaderImage a {
	background-image : url("/tech/dsc7_logo_over.png");
	/*This is for preloading the hover image*/
}

div.HeaderImage a:link, div.HeaderImage a:visited {
	float:left;
	background-color : transparent;
	background-repeat : no-repeat ;
	background-position : top left ;
	background-image : url("/tech/dsc7_logo.png");
}

div.HeaderImage a:hover, div.HeaderImage a:focus, div.HeaderImage a:active  {
	float:left;
	background-image : url("/tech/dsc7_logo_over.png");
}

div.HeaderText {
	position:absolute;
	top:5px;
	left:550px;
	/*border: 1px solid orange;*/
}

img {
	border:0px;
}

img.VidLogo {
	position:absolute;
	top:33%;
	left:12%;
	width:30px;
	height:30px;
}

img.ClickablePic {
	position: relative;
	width: 142px;
	height: 65px;
	top: 7px;
	left: 0px;
}

img.ClickableVideo {
	position:absolute;
	width:130px;
	height:86px;
	left:15px;
	top:2px;
}

img.ClickablePage {
	position:absolute;
	width:152px;
	height:75px;
	left:4px;
	top:12px;
}

img.ClickableDoc {
	width:35%;
	margin: 26px 0px;
}

img.ClickableHand {
	position:relative;
	width:100px;
	top:25px;
}

img.PageSelector {
	width:100%;
	height:100%;
}

img.Banner {
	width:400px;
	height:65px;
	margin:5px;
}

img.Inline {
	height:12px;
	width:12px;
}

p {
	font-family : Geneva, Arial, Verdana, Helvetica, sans-serif;
	font-size : 13px;
	color:#e2eaed;
	text-align:left;
}

p.ImageCaptionLeft {
	color : white ;
	padding:0px;
	margin:0px;
	font-weight:600;
	text-align:left;
	text-shadow: 2px 2px 2px #000;
	filter: Glow(Color=gray, Strength=2); 
}

p.ImageCaptionRight {
	color : white ;
	padding:0px;
	margin:0px;
	font-weight:600;
	text-align:right;
	text-shadow: 2px 2px 2px #000;
	filter: Glow(Color=gray, Strength=2); 
}

p.ImageCaptionCentered {
	color : white ;
	padding:0px;
	margin:0px;
	font-family: "WindsorBold";
	font-size:21px;
	font-weight:500;
	text-align:center;
	text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black; 	/*OLD CODE : text-shadow: 5px 5px 5px #000;*/
	filter: Glow(Color=black, Strength=1); /*ONLY for IE9 and less. ALTERNATIVE IE9 CODE: filter: progid:DXImageTransform.Microsoft.Shadow(color=gray,direction=135);*/
}

p.TextNavLeft {
	font-size : 19px;
	color : #e0f5fc ;
	text-align:right;
	margin:0px;
	padding:0px;
	/*border: 1px solid yellow;*/
}

p.TextNavRight {
	margin:0px;
	padding:0px;
	/*border: 1px solid yellow;*/
}

p.PresentationTitle {
	/*Titres des pages de présentation, genre photos. Alignement au centre. Semble servir à rien, fusionner avec p.PresentationNormal */
	font-family: "WindsorBold";
	text-align:center;
	font-size : 26px;
	font-weight:550;
	padding:0px;
	margin:02px;
	/*border: 1px solid purple;*/
}

p.PresentationSubTitle {
	/* utilisé comme titre de deuxième importance. Fusionner avec p.ArticleSubTitle {*/
	text-align: center ;
	font-size : 18px ;
}

p.PresentationNormal {
	/*Utilisé pour les corps des textes genre introduction au site*/
	font-size : 17px;
}

p.ArticleTitle {
	/*Titres des pages genre introduction.*/
	font-family: "WindsorBold";
	font-size : 26px;
	font-weight:550;
}

p.ArticleSubTitle {
	/* utilisé dans articles, comme titres de deuxième importance. */
	font-size : 18px ;
}

p.ArticleChapterTitle {
	/* titres des sous parties des articles ou introductions*/
	margin-top:24px;
	font-weight:bold;
}

p.ArticleParagraph {
	/* sert à garder une hauteur minimum pour que le paragraphe reste alignée à une photo l'illustrant*/
	min-height:125px;
}

p.AsideTitle {
	/* sert à donner un titre aux commentaires dans les asides */
	font-family: "WindsorRegular";
	font-size : 20px;
	font-weight:1;
	margin:0px;
	padding:0px;
	/*border: 1px solid orange;*/
}

span.Important {
	font-weight:600;
}

a {
	text-decoration:none;
}

a:link { 
	color : #e0f5fc ;
	text-decoration: none; 	
}

a:hover , a:visited:hover {
	color: white; 
	text-decoration: underline; 
} 

a:visited {
	color: #c6dde5;
	text-decoration: none; 	
}

a.DSCHeader {
	font-family: "WindsorRegular";
	font-size : 45px;
	font-weight:1;
	margin-left:22px;
	/*border: 1px solid grey;*/
}

ul {
	text-align:left;
	color:white;
}

#lightbox{	position: absolute;	left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0; }
#lightbox img{ width: auto; height: auto;}
#lightbox a img{ border: none; }

#outerImageContainer{ position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; }
#imageContainer{ padding: 10px; }

#loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; }
#hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; }
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}

#prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(data:lightbox2/image/gif;base64,AAAA); /* Trick IE into showing hover */ display: block; }
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(../tech/lightbox2/images/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(../tech/lightbox2/images/nextlabel.gif) right 15% no-repeat; }

#imageDataContainer{ font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100%	; }	

#imageData{	padding:0 10px; color: #666; }
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }	
#imageData #caption{ font-weight: bold;	}
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em;	}			
#imageData #bottomNavClose{ width: 66px; float: right;  padding-bottom: 0.7em; outline: none;}	 	

#overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 100%; background-color: #000; }