@font-face {
  font-family: 'BlairITC TT';
  src: url('/fonts/BlairMdITC TT Medium.eot'); /* IE9 Compat Modes */
  src: url('/fonts/BlairMdITC TT Medium.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('/fonts/BlairMdITC TT Medium.woff') format('woff'), /* Modern Browsers */
       url('/fonts/BlairMdITC TT Medium.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('/fonts/BlairMdITC TT Medium.svg#5ebba2919efce1ce8c0dde66abe171d7') format('svg'); /* Legacy iOS */
       
  font-style:   normal;
  font-weight:  400;
}

@font-face {
  font-family: 'BlairITC TT';
  src: url('BlairITC TT Light.eot'); /* IE9 Compat Modes */
  src: url('BlairITC TT Light.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('BlairITC TT Light.woff') format('woff'), /* Modern Browsers */
       url('BlairITC TT Light.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('BlairITC TT Light.svg#60e7bdf4bd930130156eb74bcbc6f9d1') format('svg'); /* Legacy iOS */
       
  font-style:   normal;
  font-weight:  200;
}

@font-face {
  font-family: 'BlairITC TT';
  src: url('BlairITC TT Bold.eot'); /* IE9 Compat Modes */
  src: url('BlairITC TT Bold.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('BlairITC TT Bold.woff') format('woff'), /* Modern Browsers */
       url('BlairITC TT Bold.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('BlairITC TT Bold.svg#e7d5e4e814d757efeb762208b57087a1') format('svg'); /* Legacy iOS */
       
  font-style:   normal;
  font-weight:  700;
}
body {
	margin: 0;
	padding: 0;
	color: #fff;
	font-weight: 100;
	font-size: 12px;
	font-family: Avenir, Verdana, Arial, Helvetica, Sans-Serif;

	background-color: black;
	background-image: url(/images/background-v3.jpg);
	background-attachment: fixed;
	background-repeat: no-repeat;
	background-position: top center;
	overflow: auto;
	overflow-y: scroll;
	text-align:center;
}

a:link   { color: #DDD; text-decoration: none; border: none; }
a:visited   { color: #DDD; text-decoration: none; border: none; }
a:hover    { color: #689; text-decoration: none; border: none; }
img {
	border: none;
}
img.intext, img.intextleft, img.intextright {
	border: solid 1px #111;
	max-width: 100%;
}

div.intextleft {
	float: left;
	margin: 0 15px 0 0;
	max-width: 50%;
}
div.intextright {
	float: right;
	margin: 0 0 0 15px;
	max-width: 50%;
}

.item .intext, .short .intextleft, .short .intextright {
	display: none;
}

.parent, .pagetitle {
	display: none;
}


.fixed {
	width: 100%;
	position: fixed;
	top: 0px;
}
.header, .body {
	width: 1035px;
	height: 100%;
	margin: 0 auto;
	text-align: left;
}
.header {
    position: relative;
}

.body {
/*	height: 100%;*/
/*	padding-top: 200px;*/
}
.outerbox {
	position: relative;
	display: table-cell;
	vertical-align: bottom;
	text-align: right;
	height: 653px;
	width: 110px;
/*	height: 500px;*/
}

.innerbox {
	position: absolute;
	top: 0;
	left: 0;
	vertical-align: top;
	text-align: right;
	width: 100px;
	padding: 20px 0 0 10px;
}
.blackbox {
/*	display: none;*/
	position: relative;
/*	display: table-cel;*/
	top: 200px;
	left: 110px;
/*	margin: 200px 120px 0 0;*/
	width: 790px;
	height: 700px;
	background: black;
	clear: both;
/*	padding-left: 125px;*/
}
#root .blackbox {
	display: none;
}
.content {
	height: auto;
	padding: 20px 20px 20px 130px;
	clear: both;
	background: black;
}
.rightbox {
    position: absolute;
	top: 0;
	right: 0;
	height: 100%;
/*	display: table-cell;*/
/*	padding-left: 800px;*/
/*	top: -200px;*/
	width: 123px;
/*	padding: 210px 600px 0 0;*/
	float: right;
}
.rightbox p {
	margin-top: 20px;
}
.outerbox .tree, .sisters, .childs {
/*	font-family: "BlairMdITC TT", Avenir, Verdana, Arial, Helvetica, Sans-Serif;*/
	position: relative;
	left: 100px;
	width: 1005px;
	margin-left: -1005px;
	padding: 5px 0 0 0;
	font-size: 12px;
    font-family: 'BlairITC TT', Avenir, Verdana, Arial, Helvetica, Sans-Serif, Avenir, Verdana, Arial, Helvetica, Sans-Serif;
    font-weight: 200;
	text-transform: uppercase;
	text-align: right;
}

.outerbox .leaf, .outerbox .leafactive, .sister, .sisteractive, .child, .childactive  {
	display: block;
	margin: 3px 0 0 0;
}

.outerbox .leafactive, .sisteractive, a.sisteractive, .childactive  {
	border-bottom: solid 1px #216193;
	margin-bottom: 5px;
	color: #216193; 
}
div.logo {
    position: absolute;
    top: 196px;
	padding: 0 0 7px 0;
	margin: 0 0 15px 0;
}
div.logo a img,
.switch a img {
    border-bottom: solid 2px transparent;
    padding: 5px 0;
}

div.logo a img,
div.logo a:hover img {
    border-bottom: solid 2px #216193;
}

.logo.active {
	padding: 0 0 5px 0;
	width: 1000px;
	border-bottom: solid 2px #216193;
}
.slogan {
    font-style: oblique;
    color: #999;
}

.switch {
    position: absolute;
    bottom: 0;
    left: 0;
    margin: 0;
    padding: 0;
}
.switch a {
    opacity: 0.25;
    filter:alpha(opacity=25);
}
.switch a:hover {
    color: white;
    opacity: 1;
    filter:alpha(opacity=100);
}
.switch a:hover img {
    border-bottom: solid 2px #c33;
}

.subdirtitle, .sistertitle {
	display: block;
	font-size: smaller;
	color: #666;
	margin-top: 10px;
}
.submenu, .tree {
	position: relative;
	background: black;
	width: 100px;
/*	float: left;*/
/*	left: 125px;*/
/*	width: 0px;*/
	margin: 0 0 0 0;
	margin: 0 0 0 0;
	text-align: right;
	font-size: 12px;
	text-transform: uppercase;
	text-align: right;
	z-index: 50;
}
.outerbox .tree {
	background: none;
}
.innerbox .tree #branch1 .leaf, .innerbox .tree #branch1 .leafactive, .innerbox .tree #branch1 .interleaves, .innerbox .tree #branch1 .subdirtitle  {
	display: none;
}
.innerbox .tree #branch1 .branch .leaf, .innerbox .tree #branch1 .branch .leafactive,.innerbox .tree #branch1 .branch .interleaves, .innerbox .tree #branch1 .branch .subdirtitle  {
	display: block;
/*	font-weight: bold;*/
}
.tree .branch {
/*	width: 155px;*/
}
.tree #branch2 .branch {
/*	font-weight: bold;*/
/*	margin-left: 1em;*/
	font-size: smaller;
}
.tree .sister:after, .tree .sisteractive:after {
	content: none;
}

span.leaf, span.leafactive {
	display: block;
	color: #216193; 
}
.leafactive a {
	color: #216193; 
}
#branch1 span {
	display: none;
}
#branch2 span {
	display: block;
}



#blanket {
	background-color:#000;
/*	opacity: 0.65;*/
/*	filter:alpha(opacity=65);*/
	position:absolute;
	z-index: 10;
	top:0px;
	left: 50%;
	margin-left: -395px;
/*	margin-top: 10px;*/
/*	margin-top: 200px;*/
	width:640px;
/*	width: 100%;*/
/*	height: 150%;*/
	clear: both;
	padding: 0px 20px 20px 130px;
}

div.large {
	text-align: left;
}
div.large video, div.large img {
	width: 100%;
	margin-top: 0;
	margin-bottom: 5px;
	z-index: 80;
	background: none;
}
object.player, embed.player {
	width: 640px;
	margin-top: 0;
	margin-bottom: 5px;
	z-index: 80;
	border: none;
}
.large object {
	width: 100%;
	min-height: 360px;
/*		border: solid 1px green;*/
}
.large embed.player {
	width: 100%;
	min-height: 360px;
/*		border: solid 1px blue;*/
}

.large .largename {
	text-align: left;
	margin-top: 5px;
	text-transform: uppercase;
	color: #216193; 
	font-size: 12pt;
}
.large h1, .large h2, .large h3, .large h4, .large h5, .large h6, .large h7, .large h8, .large h9 {
	text-transform: uppercase;
	color: #216193; 
	font-size: 10pt;
	margin-top: 28pt;
	font-weight: normal;
}
.large h1 {
	font-size: 13pt;
}
.large h2 {
	font-size: 12pt;
}
.large h3 {
	font-size: 11pt;
}
.large h4 {
	font-size: 11pt;
	text-transform: none;
}
.large h5 {
	font-size: 10pt;
	text-transform: none;
}

.large .nav {
	display: block;
	text-align: center;
	margin: 5px 0;
/*	margin: -20px 0 0 0;*/
	line-height: 15px;
}
.large .nav a {
	display: inline-block;
/*	border-color: #333 #666 #666 #333;*/
	color: #CCC;
/*	background: black;*/
	padding: 5px 3px 2px;
/*	border: solid 1px #000;*/
	border-radius: 10px;
	-moz-border-radius: 10px;
	width: 15px;
	text-align: center;
/*	background: url(/images/bouton-player.jpg);*/
	background-position: center center;
}
.large .nav a:hover {
	color: #689;
	border-color: #666;
/*	background: #333;*/
}

.playlist {
	margin-top: -5px;
}
/*a.itemlink {
	float: left;
	display: inline;
	z-index: 70;
}
*/
.item {
/*	background: #333;*/
	display: block;
/*	display: inline;*/
/*	float: left;*/
	color: #DDD;
	width: 470px;
	padding: 5px 5px 5px 175px;
	margin-top: 0;
	margin-bottom: 0;
	margin-left: -5px;
	clear: both;
	height: 90px;
	overflow: hidden;
	z-index: 85;
}

.item .thumbframe {
	float: left;
	clear: left;
	margin-left: -170px;
	height: 90px;
	overflow: hidden;
}
.item img.thumb {
	width: 160px;
}
.item .name {
	color: #689;
	text-transform: uppercase;
	margin: 0 0 5px;
}
.links {
	position: relative;
	float: right;
	top: 5px;
	right: 0px;
	width: auto;
	height: 0px;
	text-align: right;
	font-size: 7pt;
/*	margin-top: -2px;*/
}

.links a.link {
	display: block;
	width: auto;
	clear: both;
	white-space:nowrap;
	text-transform: uppercase;
	font-size: 7pt; 
	background: #CCC;
	color: #333;
	text-decoration: none;
	border: solid 1px #333;
	padding: 1px 3px 0 5px;
/*	margin-left: -1px;
	margin-right: 1px;
*/
}
.links a.link:hover, .nav .links a.link:hover {
	background: #689;
}

.links .link:after {
	font-weight: bold;
	content: " ▼";
}

.nav .links .link {
	display: inline-block;
}

div.debug {
	font-size: 8pt;
	line-height: 9pt;
	border-top: solid 1px #666;
	font-family: "courier";
}

p.debug {
	margin: 3px 0 0 5em;
}

p.debug:before {
	content: "debug: ";
	display: inline-block;
	width: 5em;
	margin-left: -5em;
}

#fullscreen #blanket {
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0px;
	left: 0px;
	margin: 0px;
	padding: 0px;
}

#fullscreen div.large video, #fullscreen div.large img {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	border: none;
}