@import url(http://fonts.googleapis.com/css?family=Roboto+Slab:400,100,300,700);


*{margin:0;padding:0;}html{width:100%;height:100%;overflow-y:scroll;}img{border:none;}
body{background:#333 url(img/bg.gif);font-family:Arial, san-serif;font-weight:300;font-size:14px;color:#333;text-align:center;width:100%;height:100%;}

a{color:#333;font-weight:bold;text-decoration:none;}

#rose{height:800px;width:800px;position:relative;margin:auto;/*top:50%;left:50%;margin:-380px 0 0 -380px*/}
#fond, #gammes, #accords, #flechegammes, #flecheaccords{height:100%;width:100%;position:absolute;top:0}
#fond img{height:100%;transform-origin: 50% 50%;;}
#gammes img, #accords img{height:100%;transform-origin: 50% 50%;transition: all .5s;opacity:.5}
#gammes svg, #accords svg, #flecheaccords svg, #flechegammes svg{height:100%;transform-origin: 50% 50%;transition: all .5s;opacity:.5}
#gammes, #accords, #flechegammes, #flecheaccords{transform-origin: 50% 50%;transition: all .5s;opacity:.8;z-index:10;}
#accords img:hover{}
#controles{margin:0 auto 10px auto;width:780px;text-align:center;background:#FFF;border-radius:0 0 10px 10px;padding:10px;box-shadow:1px 1px 4px #666;z-index:1000;position:relative;}
#footer{margin:10px auto 0 auto;width:780px;text-align:center;background:#FFF;border-radius:10px;padding:10px;box-shadow:1px 1px 4px #666;}

#polyflechegamme, #polygamme{fill:orange;}
#polyflecheaccords, #polyaccords{fill:lime;}