.menubutton { display: inline-block; width: 40px; height: 40px; color: black; cursor: pointer; text-align: center; position: absolute; line-height: 40px; z-index: 200; } #menushow { min-width: 142px; background: black; display: block; position: relative; color: white; border: 1px solid #CC3300; border-radius:6px; overflow: hidden; padding:5px; } #menushow-container { position: absolute; top: 133px; height: 0; max-width: 362px; width:100%; overflow: hidden; overflow-y: auto; display: none; z-index: 200; transition: 0.5s; } #menushow-container.open { height: 100%; height: calc(100% - 133px); animation: menushow_open 0.5s; opacity: 1; } #menushow-container.close { opacity: 0; height: 0; } #shadow { width:100%; height:100%; position: fixed; top: 0; left: 0; z-index: 100; transition: 0.5s; background-color: rgba(0,0,0,0.7); display: none; } #shadow.open { animation: shadow_open 0.5s; display:block; } #shadow.close { animation: shadow_close 0.5s; display: block; } @keyframes shadow_open { 0%{ opacity:0; } 100%{ opacity:1; } } @keyframes shadow_close { 0% { opacity:1; } 100%{ opacity:0; } } @keyframes menushow_open { 0%{ height: 0; opacity:0; } 100%{ opacity:1; height: 100%; height: calc(100% - 133px); } } body { max-width:800px; min-width:240px;margin:auto;background-color : #000000; color: #FFFFFF; font-family: Lucida Grande, Verdana, Arial, Helvetica, sans-serif; font-size: 12px;} a:link,a:active,a:visited { color: #FF9900; text-decoration: none; } a:hover { text-decoration: none; color: #FFFF00; background-color: #990000; border: 1px solid #FF9900; padding: 1px; position: relative; top: 1px; } div.cat { background: url(images/fon_red.gif) repeat-x 0 0;background-color: #990000; color:#FFF;margin-bottom:4px;border-radius:6px;padding:5px } .navbar{background-color:#000000;border-bottom: 1px solid #CC3300;border-top: 1px solid #CC3300; border-left: 1px solid #CC3300; border-right: 1px solid #CC3300;margin-bottom:4px;border-radius:6px;padding:5px} .catSides { background: url(images/fon_red_catsides.gif) repeat-x 0 0;color:#FFFFFF;background-color: #990000;border-bottom: 3px double #660000; border-left: 3px double #CC0000; border-top: 3px double #CC0000; border-right: 3px double #660000; font-weight:bold;margin-bottom:1px;border-radius:6px;padding:5px } .row1 { background-color:#000000;border-bottom: 1px solid #CC3300;border-top: 1px solid #CC3300; border-left: 1px solid #CC3300; border-right: 1px solid #CC3300;margin-bottom:1px;border-radius:6px;padding:5px } .row_easy { background-color:#000000;border-bottom: 1px solid #CC3300;border-top: 1px solid #CC3300; border-left: 1px solid #CC3300; border-right: 1px solid #CC3300;margin-bottom:1px;border-radius:6px;padding:5px } .row_hard { background-color:#660000;border-bottom: 1px solid #CC3300;border-top: 1px solid #CC3300; border-left: 1px solid #CC3300; border-right: 1px solid #CC3300;margin-bottom:1px;border-radius:6px;padding:5px } span.genmed { font-size : 11px; } span.cattitle {color: #FFFFFF; font-weight: bold; font-size: 12px; } a.cattitle { color: #FFFFFF; text-decoration: none; } a.buttom { color: #990033; border: 1px solid #990033; background: #FFCC66; padding: 0px 2px 0px; line-height: 1.5; }
Источник: WAPER.SU