@font-face {
    font-family: 'Roman';
    src: url('../webfonts/webfont.eot');
    src: url('../webfonts/webfont.eot?#iefix') format('embedded-opentype'),
         url('../webfonts/webfont.woff') format('woff'),
         url('../webfonts/webfont.ttf') format('truetype'),
         url('../webfonts/webfont.svg#GranjonLTStdRoman') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'Italic';
    src: url('../webfonts/italic-webfont.eot');
    src: url('../webfonts/italic-webfont.eot?#iefix') format('embedded-opentype'),
         url('../webfonts/italic-webfont.woff') format('woff'),
         url('../webfonts/italic-webfont.ttf') format('truetype'),
         url('../webfonts/italic-webfont.svg#GranjonLTStdItalic') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'Bold';
    src: url('../webfonts/bold-webfont.eot');
    src: url('../webfonts/bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../webfonts/bold-webfont.woff') format('woff'),
         url('../webfonts/bold-webfont.ttf') format('truetype'),
         url('../webfonts/bold-webfont.svg#GranjonLTStdBold') format('svg');
    font-weight: normal;
    font-style: normal;

}

a:hover, a:active, a:focus {
    outline: 0 none;
}

#wrapper {
	width: 980px; height: 682px;
	position: relative;
	/*position: absolute;
	top: 50%; left:50%;
	margin-left: -490px; margin-top: -341px;*/
	margin: 0 auto;
	overflow: hidden;
}

#wrapper header { position: absolute; top: 10px; left: 6px; }
#wrapper header h1 { width: 137px; height: 13px; background: #fff url(../img/ui/header.gif) no-repeat 0 0; }
#wrapper header h1 a { display: block; width: 100%; height: 100%; }
#wrapper header h1 a span { display: none; }

nav#main { position: absolute; top: 35px; left: 48px; }
nav#main ul li a span{ display: none; }
nav#main ul li a { display: block; height: 100%; }
nav#main ul li { display: block; height: 19px; width: 67px; }
nav#main ul #menu_projects { background: #fff url(../img/ui/menu-projects.gif) no-repeat 0 0; }
nav#main ul #menu_text { background: #fff url(../img/ui/menu-text.gif) no-repeat 0 0; }
nav#main ul #menu_contact { background: #fff url(../img/ui/menu-contact.gif) no-repeat 0 0; }

nav#projects { 
	position: absolute; right: 57px; 
	width: 536px; height: 93px; 
}
nav#projects ul { position: absolute; height: 100%; width: 5000px; }
nav#projects div#list { position: absolute; left: 52px; height: 100%; width: 431px; overflow: hidden; }
nav#projects #prev, nav#projects #next { position: absolute; height: 100%; width: 52px; line-height: 93px; text-align: center; outline: 0 none; }
nav#projects #prev a, nav#projects #next a { display: block; width: 100%; height: 100%; }
nav#projects #prev a { background: #fff url(../img/ui/prev.gif) no-repeat 0 0;}
nav#projects #next a { background: #fff url(../img/ui/next.gif) no-repeat 0 0;}
nav#projects #prev a:hover, nav#projects #next a:hover { background-position: 0 -93px;}
nav#projects #prev a span, nav#projects #next a span { display: none ;}
nav#projects #next { right: 0; }
nav#projects ul li { display: block; float: left; margin-right: 7px; width: 139px; height:93px; }
nav#projects ul li a { display: block; width: 139px; height:93px; outline: 0 none; }

section {
	position: absolute; top: 110px; left: 48px; 
	width: 932px; height:572px;
	overflow: hidden;
}
section header { font-family: 'Roman'; }
section header { font-family: 'Roman'; }

section#project div#img{ position: absolute; top: 0; left: 0; width:804px; text-align: center; }
section#project nav#details{ position: absolute; left: 822px; top: 0; height: 242px; }
section#project nav#details ul { display: block; width: 110px; margin-bottom: 7px; }
section#project nav#details ul li a { display: block; width: 110px; height: 76px; margin-bottom: 7px; }
section#project nav#details ul li a:last { display: block; width: 110px; height: 76px; margin-bottom: 0; }
section#project header{ position: absolute; left: 0; top: 550px; width: 804px; }
section#project header { text-align: center; }
section#project header h1, section#project header p { display: inline; font-size: 12px; }
section#project header h1 {  font-family: 'Roman'; font-weight: normal; font-variant: small-caps; background: none;  }
section#project header p:lang(fr):before { content:" - "; }
section#project header p:lang(en):before { content:" / "; }
section#project header p:lang(en) { font-family: 'Italic'; }
section#project header p:lang(fr) { font-family: 'Roman'; }

section#text { position: absolute; top: 133px; left: 216px; width: 510px; height: 550px; overflow:hidden;  }
section#text article:lang(en) { font-family: 'Italic';  font-weight: normal; font-size: 14px; text-align: justify; }
section#text article:lang(fr) { font-family: 'Roman';  font-weight: normal; font-size: 13px; text-align: justify; }
section#text .scroll_content{ position: absolute; top:0; left:0; width: 504px; height: 550px; overflow:hidden; }
section#text p, section#text hr { width: 470px; padding: 0 2px; line-height: 1.2em; margin-bottom: 0.5em; }
section#text hr { background: none; border: none; border-bottom: 1px dashed #918f8f; margin-bottom: 1em;}



footer { position: absolute; width: 9px; height: 259px; bottom: 33px; right: 103px;
	background: #fff url(../img/ui/copy.gif) no-repeat 0 0; 
}
footer p { display: none; }

#loading { position: absolute; width: 22px; height: 22px; top: 397px; left: 457px;
	background: url(../img/ui/loading.gif);
	display: none;
}

.scrollbar {
	z-index: 1000; position: absolute; top: 0; right: 0; width: 10px; height: 550px;
}
.scrollbar .bar {
	position: absolute; width: 8px; height: 200px; border: 1px solid #918f8f; background-color: #fff;
}
.scrollbar .track {
	position: absolute; width: 100%; height: 100%;
}