@charset "UTF-8";
/* CSS Document */

.clear {clear:both} 

body {
    overflow: hidden;
}

@font-face {
    font-family: "Pressura";
    src: url("font/GT-Pressura-Regular.otf");
    font-weight:500;
}

@font-face {
    font-family: "Triplex";
    src: url("font/TriplexSans-Light.otf");
    font-weight:500;
}

/* ----------- TEXTE ----------- */

p {

    font-family: "Triplex", Helvetica, Arial, sans-serif;
    font-size:7px;
    color:#000;
    z-index:99;
    margin:2px 0;
}

h1 {

    font-family: "Triplex", Helvetica, Arial, sans-serif;
    font-size:12px;
    color:#000;
    z-index:99;
    margin:3px 0;
    font-weight: normal;
    z-index:-1;
    width:100px;

}



/* ----------- HEADER----------- */

#header {
    position:absolute;
    top:15px;
    margin-left:40px;
    z-index:200;
    width:80px;
    
}

.titre p a{
    font-family: "Triplex", Helvetica, Arial, sans-serif;
    font-size:17px;
    color:#A5A5A5;
    z-index:99;
    margin-bottom:7px;
    opacity:0.7; 
    text-decoration: none;
     position:absolute;

}

#buttons {
    height:auto;
    width:auto;
    display:inline-block;
    z-index:200;
    padding:0;
    top:100px;
    margin-top:1px;
    position:absolute;
}

#buttons li{
    color:#FFF;
    font-size:20px;
    font-family: "Triplex", Arial, Helvetica, sans-serif;
    display:block;
    list-style: none;
    margin:3px;
    padding:2px 5px 1px 5px;
    text-align: center;
    background:#A5A5A5;
    opacity:0.7; 
    border-radius: 2px;
    vertical-align: top;


}

#buttons li a{
    color:#FFF;
    text-decoration: none;
}

#buttons li a:hover{
    color:#000;
}

/*------------IMAGES SIZE --------- */


img.medium{
    width:50px;
}

img.large{
    width:75px;
}

img.big{
    width:100px;
}

/* ----------- CONTENU ----------- */
 
#zoombox {
    width:2000px;
    height: 800px;
    top:80px;
    margin:0px -20px;
    z-index:1;
    position:absolute;
    cursor:move;
    

} 

#Container
{
    list-style:none;
    width:220px;
    height:280px;
    position:relative;
    display:inline-block;
    z-index:1;


}
#Container li{list-style:none;}
#cover
{
    display:block;
    position:absolute;
    top:50%;
    left:50%;
    margin-left:-25px;
    margin-top:-25px;
    width:50px;
    height:auto;
    cursor:pointer;
}
.blueBox
{
    display:block;
    position:absolute;
    width:60px;
    height:60px;
    display:none;
}
.blueBoxInner
{
    display:block;
    width:50px;
    height:50px;
    margin:5px;
}


/* ----------- IMAGES CONSTELLATIONS----------- */


/*DDD18*/

#marbre{top:0px; left:-58px;}
#pollock{top:-62px; left:0px;}
#galaxie{top:133px; left:105px;}
#carteciel{top: 67px; left:105px;}
#mutilation{top: 173px; left:0px;}

/*BACK COVER 3*/

/*#GreenBox:hover .blueBox{display:block;}*/
#saturne{top:-68px; left:-55px;}
#pythagore{top:-67px; left:25px;}
#pythagore img{width:55px;}
#target{top: 3px; left:-55px;}
#copernic{top:70px; left:-55px;}
#rondpoint{top: 0px; left:105px;}
#kodak{top: 110px; left:105px;}
#atome{top: 50px; left:105px;}
#cellarius{top: 163px; left:-5px;}
#roue{top: -62px; left:85px;}


/*BACK COVER 4*/

/*#GreenBox:hover .blueBox{display:block;}*/
#poemes{top:70px; left:104px;}
#balla{top:0px; left:104px;}
#morellet{top:-80px; left:0px;}
#francis{top: 105px; left:-55px;}
#morellet2{top: 43px; left:-55px;}
#mikado{top: -10px; left:-55px;}

/*SHELF2*/

#bibliotheque{top:-35px; left:105px;}
#mondrian{top:-63px; left:-38px;}
#steinchen{top:78px; left:105px;}
#alex{top:82px; left:-55px;}
#tatlin{top: 0px; left:-55px;}
#ouvrier{top: 155px; left:50px;}
#lewittbook{top: 15px; left:105px;}

/*BACK COVER 5*/

/*#GreenBox:hover .blueBox{display:block;}*/
#bernin{top:35px; left:105px;}
#christ{top:-70px; left:0px;}
#courant{top:163px; left:0px;}
#serpent{top: -57px; left:105px;}
#apollinaire{top: 95px; left:-52px;}

/*EMIGRE 1*/

/*#GreenBox:hover .blueBox{display:block;}*/
#passeport{top:-83px; left:-50px;}
#tschichold{top:75px; left:-105px;}
#monde{top:-73px; left:5px;}
#berlin{top: 0px; left:-105px;}
#mallarme{top: 170px; left:-10px;}

/*EMIGRE 8*/

/*#GreenBox:hover .blueBox{display:block;}*/
#lune{top:0px; left:105px;}
#parrino{top:-89px; left:0px;}
#parrino2{top: -40px; left:-55px;}
#windlin{top:50px; left:-55px;}
#rand{top: 155px; left:50px;}
#helmo{top: 88px; left:105px;}
#mosset{top: 135px; left:-55px;}

/*EMIGRE 13*/

/*#GreenBox:hover .blueBox{display:block;}*/
#magnum{top:70px; left:-82px;}
#california{top:0px; left:-82px;}
#stereotypes{top:-90px; left:-82px;}
#paris{top: 172px; left:0px;}

/*EMIGRE 14*/

/*#GreenBox:hover .blueBox{display:block;}*/
#ipad{top:-55px; left:105px;}
#ibook{top:0px; left:105px;}
#glitch{top:140px; left:-57px;}
#gothic{top: 0px; left:-57px;}
#cologne {top: -88px; left:0px;}

/*EMIGRE 15*/

#octavo7{top:77px; left:105px;}
#beuys{top:-87px; left:13px;}
#fuse{top:63px; left:-80px;}

/*OCTAVO 3*/

/*#GreenBox:hover .blueBox{display:block;}*/
#archi{top:-60px; left:-28px;}
#curtain{top:-69px; left:78px;}
#minority{top:90px; left:-105px;}
#medusa{top: 150px; left:50px;}
#greco{top: 88px; left:105px;}
#jocondex{top: 0px; left:105px;}
#estes{top: 0px; left:-105px;}

/*OCTAVO 7*/

/*#GreenBox:hover .blueBox{display:block;}*/
#lewitt{top:165px; left:0px;}
#fantome{top:0px; left:-55px;}
#richter{top:82px; left:105px;}
#duchamp{top: -15px; left:105px;}

/*TNG 2*/

/*#GreenBox:hover .blueBox{display:block;}*/
#creep{top:23px; left:105px;}
#loup{top:0px; left:-55px;}
#xmen{top:145px; left:50px;}

/*TNG 6*/

#chinois{top:-83px; left:0px;}
#punk{top:140px; left:105px;}
#sun{top:62px; left:105px;}
#daily{top: -10px; left:105px;}
#tatoo{top: 143px; left:-82px;}
#durer{top: -55px; left:-80px;}

/*HARD WERKEN*/

#fusion{top:-113px; left:10px;}
#faucille{top:150px; left:30px;}
#vulcain{top:113px; left:-60px;}
#thor{top: 35px; left:-60px;}

/*DDD2*/

#matrix{top:10px; left:-80px;}
#seurat{top:-81px; left:0px;}
#clous{top:95px; left:105px;}
#feu{top: -25px; left:105px;}
#roy{top: 145px; left:105px;}