#background1 { position: fixed; top: 0; left: 0; height:100%; overflow:hidden; width:100%; z-index: 1; img{ width:100%; position:absolute; top:-100px; } } #background { background: url(/background.png) repeat 5% 5%; position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 1; opacity:0.2; } #midground { background: url(/midground.png) repeat 20% 20%; position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 1; opacity:0.2; } #foreground { background: url(/foreground.png) repeat 90% 110%; position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 2; opacity:0.2; } #color_background{ background:rgba(233,229,226,1) url(/paper2.png); position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 2; opacity:0.97; } #top_anchor{ position:absolute; top:0px; left:0px; display:none; } #bandeau{ position:absolute;top:0px;left:0px;width:100%;z-index:4;padding-top:2em; .inner{ padding-left:400px; } } #top{ //colors #394246 rgba(180,55,34,1) rgba(160,35,14,1) rgba(241,234,227,1) @top_color : rgba(50,50,50,1); @background-color :rgba(240,240,240,1); @hover-background-color :@background-color; @ac-background-color :@background-color; @border-color:rgba(255,247,193,1); background:@background-color url(/paper.png) left bottom; @top_color : white; @background-color :rgba(180,55,34,1); @hover-background-color :rgba(160,35,14,1); @ac-background-color :rgba(206,141,4,1); @border-color:rgba(255,247,193,1); background:@background-color url(/paper.png) left bottom; h2{ font-size:3em !important; a{ color:white !important; } } z-index:6; width:300px; height:100%; margin:auto; position:fixed; text-align:center; opacity:1; -webkit-transition-duration:0.5s; hr::after{ color:@top_color; } &:hover{ opacity:1; background-color:@hover-background-color; //rgba(228,126,88,1) } &.acceuil{ box-shadow:0px 0px 5px rgba(0,0,0,0.5); background-color:@ac-background-color; } .inner{ overflow:auto; border-left:1px solid; border-right:1px solid; border-color:@border-color; height:100%; width:96%; margin:auto; } top:0px; left:50px; #logo{ display:inline-block; margin-top:1.3em; padding:0px; height:60px; *{color:rgba(204,93,46,1);} } hr *{ color:rgba(241,234,227,0.2); } #menu_top{ *{color:rgba(27,27,27,1);} text-align:center; font-family:@font_title; margin:0px; margin-top:8px; text-align:center; padding:1px; a{ font-size:1.2em; display:inline-block; padding:2px 5px; padding-top:10px; margin-top:15px; color:@top_color; text-decoration:none; border-bottom:1px dashed rgba(222,223,231,1); &.active, &:hover{ border-bottom:1px solid rgba(222,223,231,1); } } } } #accueil{ position:absolute; z-index:3; bottom:1em; right:1em; padding:1em; margin-left:460px; h3{ margin-top:0px; color:white; } } #main{ &.with_banner{ top:150px; } max-width:1060px; padding:2em 0; position:absolute; z-index:3; top:0px; left:400px; right:50px; min-height:100%; } #large_place{ background:rgba(233,229,226,1); position:fixed; text-align:center; top:0; left:0; width:100%; height:100%; z-index:7; display:none; } @media only screen and (max-width: 1100px) { #bandeau{ .inner{ padding-left:339px; } } #top{ left:-11px; } #main{ left:339px; } } @media only screen and (max-width: 800px) { #bandeau{ position:static; .inner{ padding-left:15px; } } #top{ position:static; width:100%; .inner{ border:0px; margin:0px; width:100%; border-bottom:1px solid rgba(241,234,227,1); padding-bottom:0.5; margin-bottom:0.5em; } hr{ display:none; } &.active{ hr{ display:block; } .inner{ padding-bottom:2em; margin-bottom:0.5em; } #menu_top{ display:block; } } } #menu_top{ display:none; } #main{ position:static; padding:1em; } .large_content{ position:relative; z-index:4; } }