@import "reset.css";

/* 
 * general
 */
body { background-color:black; color:gray; font-family:Verdana; line-height:1.5; }
a { font-style:italic; color:gray; }
h1,h2,h3 { color:gray; text-align:center; line-height:0.5; }
h1 { font-size:1em; font-variant:small-caps; margin-top:2em; }
h2 { font-size:1em }

/*
 * header
 */
#header { position:relative; }
#header h1 { letter-spacing:60px; word-spacing:100px; color:gray; margin-left:5em; }

/*
 * main divs
 */
#main { position:relative; width:1000px; background-color:black; border-top:solid 30px #111; border-bottom: solid 30px #111; border-left:solid 20px #111; border-right:solid 20px #111; margin-top:20px; }
#main, #mmy, #moi { height:465px; top:0px; }
#mmy, #moi { position:absolute; top:10px; }

/*
 * main menu
 */
.menu { position:relative; width:100%; }
.menuitem { width:400px; }
.menuitem > a { padding:5px; text-decoration:none; letter-spacing:0.3em; }

/*
 * content divs
 */
.content { position:absolute; width:700px; height:450px; text-align:left; top:10px; color:#333; }
.showRight { left:300px; }
.showLeft { left:0px; }
.hidden { display:none; }
.close { position:absolute; top:0px; left:670px; cursor:pointer; }
.item > a, .desc > a { color:#AAA; letter-spacing:0.2em; text-decoration:none; font-size:0.8em; margin-left:0.2em; margin-bottom:0.4em; }
.desc { line-height:1.5; letter-spacing:0.2em; font-size:0.7em; }
#photo .item > a > img { border:solid white 2px; width:40px; height:40px; }
#photo .itemname { padding-left:100px; width:100px; float:left; }
#tomorephoto { margin-top:75px; padding-left:600px; }
#morephoto .item > a { display:block; margin-top:10px; }
#work { background-image:url(../img/work-background.png); }
#work .desc { margin-top:120px; margin-left:150px; }
#music { background-image:url(../img/manouche.jpg); background-repeat:no-repeat; }
#music .item { margin-top:50px; margin-left:150px; }

/*
 * footer
 */
#footer { position:absolute; top:475px; text-align:left; }
#flag { width:21px; height:13px; margin-left:20px; float:left; cursor:pointer; }
.dimmed { opacity:0.4; filter:alpha(opacity=40); }
.verydim { opacity:0.2; filter:alpha(opacity=20); }
.flagfr { background-image:url(../img/francais.jpg); }
.flagen { background-image:url(../img/anglais.png); }
#credits { text-align:right; font-size:0.6em; width:900px; color:#555; float:left; }

/*
 * external content
 */
#external { display:none; top:0px; left:0px; width:100%; height:100%; background-color:black; }
#extheader { text-align:left; width:50%; color:#555; float:left; }
#extheader > a { text-decoration:none; }
#closeext { text-align:right; color:white; float:left; cursor:pointer; }
#noiframe { display:none; }

/*
 * style classes
 */
.hover { background-color:#111; }

/*
 * position classes
 */
.menu .top { height:200px; }
.topimg { z-index:75; }
.bottomimg { z-index:50; }
.left { left:0px; }
.right { right:0px; }