/*
 * Stylesheet implemented by mathieu.gagnon.name
 * based on a design by tofubox.com
 * for lvlstudio.com
 * Copyright fredericback.com, 2007
 *
 * TOC:
 * 1.  Elements
 * 2.  Classes
 * 3.  Document layout
 * 3.1 Document media layout
 * 4.  Rounded corners, customcorners style
 * 5.  Rounded corners, Sorin Ionescu style
 * 6.  Hacks
 */

@import "reset.css";


/**
 * 1. Elements
 */
body, td, input, select {
	color:#333333; /* black is proscribe */
	font-family:verdana,arial,sans-serif;
	/* font-size:75%; wished absolute size: 12px; */
	font-size:12px;
}
body {
	text-align:center;
	padding-bottom:1em;
}
h1 {
	font-family:georgia,serif;
	/* font-size:1.7em; wished absolute size: 20px; */
	font-size:20px;
	margin:0.7em 0;
	margin-top:0px;
	padding-top:2px;
	font-weight:normal;
	font-style:italic;
}
h2 {
	font-family:verdana,arial,sans-serif;
	/* font-size:1.6em; wished absolute size: 16px; */
	font-size:16px;
	margin:0.9em 0;
	font-style:normal;
}
h3 {
	font-family:georgia,serif;
	/* font-size:0.98em; wished absolute size: 12px; */
	font-size:12px;
	font-weight:bold;
	font-style:italic;
	margin:0;
}
a {
	/* outline:none; for accessibility, its better to leave it default */
	cursor:pointer;
	text-decoration:underline;
}
a:hover {
	text-decoration:none;
}
a img {
	border:0;
}
a.selected {
	font-weight:bold;
}
p {
	margin:1em 0;
	text-align:justify;
}
strong {
	font-weight:bold;
}
em,i {
	font-style:italic;
}
form label {
	font-size:9px;
}


/**
 * 2. Classes
 */
.navigation {
	/* font-size:83%; wished absolute size: 10px; */
	font-size:10px;
}
.navigation a {
	text-decoration:none;
}
.navigation a:hover {
	text-decoration:underline;
}
.navigation ul {
	list-style-type:none;
	margin:0;
	padding:0;
}
.navigation li {
	margin:3px 0;
}
.navigation ul ul {
	padding-left:1.5em;
}
.section {
	clear:both;
}
.access {
	display:none;
}
.meta {
	font-family:arial;
	font-size:0.95em;
}
.error {
	text-align:left;
	color:#fe9b02;
}
.field {
	float:left;
	width:100%;
	margin-bottom:3px;
}
.up, .selected.up, .next, .next2, .prev, .prev2, .button {
	font-family:georgia,serif;
	text-decoration:none;
	font-weight:normal;
	/* font-size:0.8em; */
	font-size:12px;
}
.button a, .up:hover, .next:hover, .next2:hover, .prev:hover, .prev2:hover, .button:hover {
	text-decoration:none;
}
.up {
	margin-right:12px;
	padding-right:13px;
	background-color:transparent;
	background-repeat:no-repeat;
	background-position:right center;
}
.up:hover {
	text-decoration:none;
}
.next, .next2 {
	float:right;
	padding-right:20px;
	background-color:transparent;
	background-repeat:no-repeat;
	background-position:right center;
}
.prev, .prev2 {
	float:right;
	padding-left:20px;
	background-color:transparent;
	background-repeat:no-repeat;
	background-position:left center;
}
.notice {
	background:url(images/notice-see.gif) no-repeat bottom right;
}
a.notice:hover {
	background:url(images/notice-see-hover.gif) no-repeat bottom right;
}
.photo {
	padding-left:20px;
	background:url(../images/icons/photo.gif) no-repeat center left;
}
.video {
	padding-left:20px;
	background:url(../images/icons/video.gif) no-repeat center left;
}
.illustration {
	padding-left:20px;
	background:url(../images/icons/illustration.gif) no-repeat center left;
}
.article {
	padding-left:20px;
	background:url(../images/icons/article.gif) no-repeat center left;
}
.animation {
	padding-left:20px;
	background:url(../images/icons/animation.gif) no-repeat center left;
}
.attachement {
	padding-left:20px;
	background:url(../images/icons/attachement.gif) no-repeat center left;
}
.pdf {
	padding:5px 0 5px 25px;
	background:url(../images/icons/pdf.gif) no-repeat center left;
}
.links {
	background:transparent url(../images/icons/links.gif) no-repeat left top;
	padding-left:25px;
	text-align:left;
}
.subsections {
	background:transparent url(../images/icons/subsections.gif) no-repeat left top;
	padding-left:25px;
	text-align:left;
}
.subsections a {
	cursor:pointer;
}


/**
 * 3. Document layout
 */
#document {
	overflow:hidden;
	text-align:left;
	width:780px;
	margin:0 auto;
	background-color:#fff;
}
#header {
	position:relative;
	background-color:transparent;
	background-repeat:no-repeat;
}
#header h1 {
	display:none;
}
#languages {
	float:left;
	/* font-size:73%; */
	font-size:9px;
	font-family:arial;
}
#languages .selected {
	z-index:10;
	position:relative;
	padding-right:13px;
	padding-bottom:3px;
	margin-right:4px;
	background-color:transparent;
	background-repeat:no-repeat;
	background-position:bottom right;
}
#languages a.selected:hover {
	text-decoration:none;
}

#languages .choices {
	position:relative;
	left:-17px;
	z-index:5;
	padding-left:15px;
	padding-bottom:2px;
	background-color:transparent;
	background-repeat:no-repeat;
	background-position:bottom right;
}
#topnav {
	float:right;
	margin:0;
	margin-bottom:10px;
	padding:0 1em 1px 15px;
	text-transform:uppercase;
	background-color:transparent;
	background-repeat:no-repeat;
	background-position:bottom left;
}
#topnav img {
	vertical-align:bottom;
}
#sitenav {
	clear:both;
	margin-bottom:0;
	padding:1em;
	text-align:right;
	line-height:100%;
	padding-left:160px;
	background-color:transparent;
	background-repeat:no-repeat;
	background-position:30px top;
}
#sitenav a {
	font-weight:bold;
}
#sitenav a:hover {
	text-decoration:none;
}
#menu {
	display:inline; /* http://www.positioniseverything.net/explorer/doubled-margin.html */
	/* font-size:83%; wished absolute size: 10px; */
	font-size:10px;
	float:left;
	width:182px;
	line-height:125%;
	margin-left:10px;
	/* make sure the logo does not overlap the menu,
	   this is a poor's man min-height */
	margin-bottom:80px;
}
#menu ul {
	margin-bottom:5em;
}
#menu ul ul {
	margin-bottom:0; /* expecting no third level */
}
#menu ul ul a {
	font-style:italic;
}
#menu ul a:hover {
	font-weight:bold;
	text-decoration:none;
}
#menu .next:hover { /* yoyo */
	font-weight:normal;
}
#menu .first a {
	font-weight:normal;
}
#content {
	display:inline;
	float:right;
	width:568px;
	line-height:125%;
	margin-right:10px;
	margin-bottom:10px;
}
#content .wrapper {
	padding:10px;
}
#content .intro {
	font-size:0.85em;
	margin-bottom:2em;
}
#content p.intro {
	margin-bottom:4em;
}
#footer {
	clear:both;
	text-align:right;
	width:100%;
}
#footer .navigation {
	color:#fff;
	margin:0;
	margin-top:10px;
	height:25px;
	text-align:right;
	background-color:#66669a;
	background-repeat:no-repeat;
	background-position:center center;
}
#footer .navigation img {
	margin:4px 10px;
}
#copyright {
	text-align:center;
	font-size:0.8em;
	margin-bottom:0;
}
#copyright a {
	text-decoration:none;
}
#copyright a:hover {
	text-decoration:underline;
}


/**
 * 3.1 Document media layout
 */
#medias a {
	font-weight:normal;
	text-decoration:none;
}
#medias a:hover {
	text-decoration:none;
}
#medias .wrapper {
	padding-top:1px;
}
#medias .media {
	cursor:pointer;
	margin-top:8px;
	position:relative;
}
#medias .media .wrapper {
	position:relative;
	padding:10px 30px;
}
#medias .media img {
	float:left;
	margin-right:20px;
}
#medias .media {
	cursor:pointer;
}
#medias .media .media-type {
	float:none;
	margin-right:0;
	position:absolute;
	bottom:10px;
	right:10px;
}
#media_content {
	text-align:center;
}
#media_display {
	margin:40px 0;
}
#media_description {
	margin:0 10px;
	padding:10px 0;
}
#media_description .wrapper {
	padding:0 0 10px 0;
}
#media_description span {
	float:left;
}
#media_description .meta {
	float:none;
}


/**
 * 4. Rounded corners, customcorners style
 *
 * The js will wrap .box content inside the appropriate structure,
 * leaving the content inside .customcorners2_body.
 * These type of corners are used when a box needs to be display on
 * a background.
 * The technique is described at
 * <http://alistapart.com/articles/customcorners2/>
 */
.box {
	display:block;
}
a.box {
	text-decoration:none;
}
.box .customcorners2 {
	padding-top:1px; /* fixes the height (height bug before refresh in wk) */
	position:relative;
	top:-15px;
	background-repeat:no-repeat;
	background-position:0 0px;
}
.box .customcorners2_header {
	height:15px;
	margin:0;
	position:relative;
	top:-1px;
	right:-14px;
	padding-left:0;
	background-repeat:no-repeat;
	background-position:top right;
}
.box .customcorners2_body {
	padding:1px 15px 0 0;
	position:relative;
	top:-1px;
	right:-14px;
	background-repeat:repeat-y;
	background-position:top right;
}
.box .customcorners2_footer {
	position:relative;
	top:12px;
	height:15px;
	text-align:right;
	text-decoration:none !important;
	font-family:georgia,serif;
	background-repeat:no-repeat;
	background-position:bottom left;
}
.box .customcorners2_innerfooter {
	height:27px;
	width:15px;
	top:-13px;
	position:absolute;
	right:-14px;
	background-repeat:no-repeat;
	background-position:bottom right;
}
.box .customcorners2_wrapper {
	margin-top:-18px;
	bottom:-15px;
	position:relative;
	z-index:20;
	/* padding-bottom:10px; ------------------------------------------------------------------------------------ */
}
/*
.box_label {
	position:absolute;
	bottom:6px;
	right:5px;
	z-index:500;
}
*/
/* specific boxes rules border-bottom is added to fix a browser bug in ie. */
.box.type_01 .customcorners2_body { border-bottom:1px solid #ffffff; }
.box.type_02 .customcorners2_body { border-bottom:1px solid #f3fdfb; }
/* .box.type_03 .customcorners2_body { border-bottom:1px solid #ffffff; } */
/* .box.type_04 .customcorners2_body { border-bottom:1px solid #f2efea; } */
.box.type_05 .customcorners2_body { border-bottom:1px solid #e1edf0; }
.box.type_06 .customcorners2_body { border-bottom:1px solid #eaf3da; }
.box.type_07 .customcorners2_body { border-bottom:1px solid #dcebee; }
.box.type_09 .customcorners2_body { border-bottom:1px solid #e9f5ea; }
a.box.type_03 .customcorners2_innerfooter { z-index:20; background-image:url(images/boxes/type_03/bottom_right_see.png) !important; }
a.box.type_03:hover .customcorners2_innerfooter { background-image:url(images/boxes/type_03/bottom_right_see_hover.png) !important; }
a.box.type_04 .customcorners2_innerfooter { z-index:20; background-image:url(images/boxes/type_04/bottom_right_see.png) !important; }
a.box.type_04:hover .customcorners2_innerfooter { background-image:url(images/boxes/type_04/bottom_right_see_hover.png) !important; }
.box.see.type_05 .customcorners2_innerfooter { z-index:20; background-image:url(images/boxes/type_05/bottom_right_see.png) !important; }
.box.see.type_05:hover .customcorners2_innerfooter { background-image:url(images/boxes/type_05/bottom_right_see_hover.png) !important; }
a.box.type_05 .customcorners2_innerfooter { z-index:20; background-image:url(images/boxes/type_05/bottom_right_see.png) !important; }
a.box.type_05:hover .customcorners2_innerfooter { background-image:url(images/boxes/type_05/bottom_right_see_hover.png) !important; }
a.box.type_06 .customcorners2_innerfooter { z-index:20; background-image:url(images/boxes/type_06/bottom_right_see.png) !important; }
a.box.type_06:hover .customcorners2_innerfooter { background-image:url(images/boxes/type_06/bottom_right_see_hover.png) !important; }
a.box.type_10 .customcorners2_innerfooter { z-index:20; background-image:url(images/boxes/type_10/bottom_right_see.png) !important; }
a.box.type_10:hover .customcorners2_innerfooter { background-image:url(images/boxes/type_10/bottom_right_see_hover.png) !important; }


/**
 * 5. Rounded corners, Sorin Ionescu style
 */
.type_01-north { background:url(images/borders/type_01/north.gif) repeat-x top; }
.type_01-east { background:url(images/borders/type_01/east.gif) repeat-y right; }
.type_01-south { background:url(images/borders/type_01/south.gif) repeat-x bottom; }
.type_01-west { background:url(images/borders/type_01/west.gif) repeat-y left; }
.type_01-northeast { background:url(images/borders/type_01/northeast.gif) no-repeat top right; }
.type_01-southeast { background:url(images/borders/type_01/southeast.gif) no-repeat bottom right; }
.type_01-southwest { background:url(images/borders/type_01/southwest.gif) no-repeat bottom left; }
.type_01-northwest { background:url(images/borders/type_01/northwest.gif) no-repeat top left; }

.type_02-north { background:url(images/borders/type_02/north.gif) repeat-x top; }
.type_02-east { background:url(images/borders/type_02/east.gif) repeat-y right; }
.type_02-south { background:url(images/borders/type_02/south.gif) repeat-x bottom; }
.type_02-west { background:url(images/borders/type_02/west.gif) repeat-y left; }
.type_02-northeast { background:url(images/borders/type_02/northeast.gif) no-repeat top right; }
.type_02-southeast { background:url(images/borders/type_02/southeast.gif) no-repeat bottom right; }
.type_02-southwest { background:url(images/borders/type_02/southwest.gif) no-repeat bottom left; }
.type_02-northwest { background:url(images/borders/type_02/northwest.gif) no-repeat top left; }

.type_03-north { background:url(images/borders/type_03/north.gif) repeat-x top; }
.type_03-east { background:url(images/borders/type_03/east.gif) repeat-y right; }
.type_03-south { background:url(images/borders/type_03/south.gif) repeat-x bottom; }
.type_03-west { background:url(images/borders/type_03/west.gif) repeat-y left; }
.type_03-northeast { background:url(images/borders/type_03/northeast.gif) no-repeat top right; }
.type_03-southeast { background:url(images/borders/type_03/southeast.gif) no-repeat bottom right; }
.type_03-southwest { background:url(images/borders/type_03/southwest.gif) no-repeat bottom left; }
.type_03-northwest { background:url(images/borders/type_03/northwest.gif) no-repeat top left; }

.type_04 .north { background:url(images/borders/type_04/north.gif) repeat-x top; }
.type_04 .east { background:url(images/borders/type_04/east.gif) repeat-y right; }
.type_04 .south { background:url(images/borders/type_04/south.gif) repeat-x bottom; }
.type_04 .west { background:url(images/borders/type_04/west.gif) repeat-y left; }
.type_04 .northeast { background:url(images/borders/type_04/northeast.gif) no-repeat top right; }
.type_04 .southeast { background:url(images/borders/type_04/southeast.gif) no-repeat bottom right; }
.type_04 .southwest { background:url(images/borders/type_04/southwest.gif) no-repeat bottom left; }
.type_04 .northwest { background:url(images/borders/type_04/northwest.gif) no-repeat top left; }

.type_05 .north { background:url(images/borders/type_05/north.gif) repeat-x top; }
.type_05 .east { background:url(images/borders/type_05/east.gif) repeat-y right; }
.type_05 .south { background:url(images/borders/type_05/south.gif) repeat-x bottom; }
.type_05 .west { background:url(images/borders/type_05/west.gif) repeat-y left; }
.type_05 .northeast { background:url(images/borders/type_05/northeast.gif) no-repeat top right; }
.type_05 .southeast { background:url(images/borders/type_05/southeast.gif) no-repeat bottom right; }
.type_05 .southwest { background:url(images/borders/type_05/southwest.gif) no-repeat bottom left; }
.type_05 .northwest { background:url(images/borders/type_05/northwest.gif) no-repeat top left; }

.selected .type_02-north, .media:hover .type_02-north { background:url(images/borders/type_02/north-hover.gif) repeat-x top; }
.selected .type_02-east, .media:hover .type_02-east { background:url(images/borders/type_02/east-hover.gif) repeat-y right; }
.selected .type_02-south, .media:hover .type_02-south { background:url(images/borders/type_02/south-hover.gif) repeat-x bottom; }
.selected .type_02-west, .media:hover .type_02-west { background:url(images/borders/type_02/west-hover.gif) repeat-y left; }
.selected .type_02-northeast, .media:hover .type_02-northeast { background:url(images/borders/type_02/northeast-hover.gif) no-repeat top right; }
.selected .type_02-southeast, .media:hover .type_02-southeast { background:url(images/borders/type_02/southeast-hover.gif) no-repeat bottom right; }
.selected .type_02-southwest, .media:hover .type_02-southwest { background:url(images/borders/type_02/southwest-hover.gif) no-repeat bottom left; }
.selected .type_02-northwest, .media:hover .type_02-northwest { background:url(images/borders/type_02/northwest-hover.gif) no-repeat top left; }

.selected .north, .media:hover .north { background:url(images/borders/type_04/north-hover.gif) repeat-x top; }
.selected .east, .media:hover .east { background:url(images/borders/type_04/east-hover.gif) repeat-y right; }
.selected .south, .media:hover .south { background:url(images/borders/type_04/south-hover.gif) repeat-x bottom; }
.selected .west, .media:hover .west { background:url(images/borders/type_04/west-hover.gif) repeat-y left; }
.selected .northeast, .media:hover .northeast { background:url(images/borders/type_04/northeast-hover.gif) no-repeat top right; }
.selected .southeast, .media:hover .southeast { background:url(images/borders/type_04/southeast-hover.gif) no-repeat bottom right; }
.selected .southwest, .media:hover .southwest { background:url(images/borders/type_04/southwest-hover.gif) no-repeat bottom left; }
.selected .northwest, .media:hover .northwest { background:url(images/borders/type_04/northwest-hover.gif) no-repeat top left; }


/**
 * 6. Hacks
 */
.clearfix:after { /* http://www.positioniseverything.net/easyclearing.html */
    content: ".";
    display: block;
    height: 0;
    font-size: 0;
    clear: both;
    visibility: hidden;
}
.clearfix {display: inline-block;}

/* Hides from IE5/Mac \*/
* html .clearfix {height: 1px;}
.clearfix {display: block;}
/* End hide from IE5/Mac */