button,hr,input { overflow:visible } audio,canvas,progress,video { display:inline-block } progress,sub,sup { vertical-align:baseline } html { font-family:sans-serif; line-height:1.15; -ms-text-size-adjust:100%; -webkit-text-size-adjust:100% } body { margin:0 } menu,article,aside,details,footer,header,nav,section { display:block } h1 { font-size:2em; margin:.67em 0 } figcaption,figure,main { display:block } figure { margin:1em 40px } hr { box-sizing:content-box; height:0 } code,kbd,pre,samp { font-family:monospace,monospace; font-size:1em } a { background-color:transparent; -webkit-text-decoration-skip:objects } a:active,a:hover { outline-width:0 } abbr[title] { border-bottom:none; text-decoration:underline; text-decoration:underline dotted } b,strong { font-weight:bolder } dfn { font-style:italic } mark { background-color:#ff0; color:#000 } small { font-size:80% } sub,sup { font-size:75%; line-height:0; position:relative } sub { bottom:-.25em } sup { top:-.5em } audio:not([controls]) { display:none; height:0 } img { border-style:none } svg:not(:root) { overflow:hidden } button,input,optgroup,select,textarea { font-family:sans-serif; font-size:100%; line-height:1.15; margin:0 } button,input { }button,select { text-transform:none } [type=submit],[type=reset],button,html [type=button] { -webkit-appearance:button } [type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner { border-style:none; padding:0 } [type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring { outline:ButtonText dotted 1px } fieldset { border:1px solid silver; margin:0 2px; padding:.35em .625em .75em } legend { box-sizing:border-box; color:inherit; display:table; max-width:100%; padding:0; white-space:normal } progress { }textarea { overflow:auto } [type=checkbox],[type=radio] { box-sizing:border-box; padding:0 } [type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button { height:auto } [type=search] { -webkit-appearance:textfield; outline-offset:-2px } [type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration { -webkit-appearance:none } ::-webkit-file-upload-button { -webkit-appearance:button; font:inherit } summary { display:list-item } [hidden],template { display:none } /*# sourceMappingURL=normalize.min.css.map */ body { background:-webkit-linear-gradient(top,#F68344 0.00%,#98370F 60.00%); background:linear-gradient(top,#F68344 0.00%,#98370F 60.00%); background-size:2500px 1600px; background-repeat:no-repeat; font-weight:300; -webkit-font-smoothing:subpixel-antialiased; font-size:100%; font-family:Helvetica; } #warp { background:-webkit-linear-gradient(top,#F68344 0.00%,#98370F 60.00%); background:linear-gradient(top,#F68344 0.00%,#98370F 60.00%); background-size:2500px 1600px; background-repeat:no-repeat; position:relative; width:800px; height:200px; margin:100px auto 0px; padding:5px; display:block; text-align:center; border-radius:10px; } #menu { border-bottom:1px solid #DDD; position:relative; background:-webkit-linear-gradient(top,#F8F8F8 0.00%,#EFEFEF 32.86%,#D7D7D7 68.93%,#CFCFCF 100.00%); background:linear-gradient(top,#F8F8F8 0.00%,#EFEFEF 32.86%,#D7D7D7 68.93%,#CFCFCF 100.00%); height:50px; width:700px; margin:auto; list-style:none; border-radius:0 15px 0 0; box-shadow:0 2px 1px 0 #BEBEBE,0 4px 1px -1px #B8B8B8,0 6px 1px -2px #B3B3B3,0 8px 1px -3px #ADADAD,0 10px 1px -4px #AAAAAA,0 12px 1px -5px #A7A7A7,0 14px 1px -6px #9C9C9C,0 16px 1px -7px #939393,0 18px 1px -8px #8B8B8B,0 20px 1px -9px #666666,0 6px 1px rgba(0,0,0,0.1),0 0 5px rgba(0,0,0,0.1),0 1px 3px rgba(0,0,0,0.3),0 20px 4px -6px rgba(0,0,0,0.9),0 45px 5px -5px rgba(0,0,0,0.05),0 35px 10px -5px rgba(0,0,0,0.1),0 25px 55px 5px rgba(0,0,0,0.15); z-index:0; margin:100px auto; } #menu:before { content:""; } #menu:after { content:""; } #menu li { background:transparent; padding:0px; width:80px; height:62px; margin:0px; overflow:hidden; line-height:50px!important; -webkit-transition:all .5s ease-out; transition:all .5s ease-out; } /* hover statut */ #menu li:hover,#menu li.active { background:-webkit-linear-gradient(top,#F58246 0.00%,#ED7F44 32.86%,#CC7244 68.93%,#BE6E48 100.00%); background:linear-gradient(top,#F58246 0.00%,#ED7F44 32.86%,#CC7244 68.93%,#BE6E48 100.00%); z-index:2; width:80px; top:-8px; border-radius:10px 10px 0 0; border-top:1px solid #f7a273; border-left:none; border-right:none; text-align:center; box-shadow:0 2px 1px 0 #963004,0 4px 1px -1px #852A03,0 6px 1px -2px #812802,0 8px 1px -3px #7D2803,0 10px 1px -4px #661F01,0 12px 1px -5px #521A02,0 14px 1px -6px #401601,0 16px 1px -7px #3C1501,0 18px 1px -8px #2D1001,0 20px 1px -9px #110500,0 6px 1px rgba(0,0,0,0.1),0 0 5px rgba(0,0,0,0.1),0 10px 20px rgba(0,0,0,0.75),0 20px 4px -6px rgba(0,0,0,0.9),0 45px 5px -5px rgba(0,0,0,0.05),0 35px 10px -5px rgba(0,0,0,0.1),0 25px 55px 5px rgba(0,0,0,0.15); z-index:0; -webkit-transition:background border-radius 0.75s ease-in; transition:background border-radius 0.75s ease-in; -webkit-transition:box-shadow 0.5s ease-in; transition:box-shadow 0.5s ease-in; } #menu li.active { background-color:#DADADA } .item:hover { position:relative; display:inline-block; text-align:center; } /* item */ .item { font-size:100%; position:relative; display:inline-block; text-align:center; } .item:hover:before,.active.item:before { content:""; background:-webkit-linear-gradient(top,rgba(247,144,88,0.05) 60.00%,rgba(147,50,14,0.5) 100.00%); background:linear-gradient(top,rgba(247,144,88,0.05) 60.00%,rgba(147,50,14,0.5) 100.00%); display:block; height:200px; width:200px; border-radius:100px; position:absolute; top:-130px; left:-120px; z-index:-1; } /* item separateur */ .item:after { content:""; padding:0px; width:0px; height:12px; top:20px; display:block; position:absolute; border-left:1px solid rgba(0,0,0,0.1); border-right:1px solid rgba(255,255,255,0.1); z-index:2; } .item:hover:after,.item.active:after { content:""; display:none; } /* lien */ .item a { text-align:center; color:#787878; font-size:70%; text-decoration:none; text-shadow:0px 1px 0px white; } .item:hover a,.item.active a { text-align:center; color:#FFF; z-index:10; font-weight:lighter; text-shadow:0px 1px 0px black; width:80px; display:block; } a,a:hover { color:black; text-decoration:underlink; }