@charset "UTF-8"; /* CSS Document */ html { background: url(noise_pattern_with_crosslines.png); /* Black Linen http://subtlepatterns.com */ } h1 { font-family: 'Neucha', serif; font-size: 40px; text-shadow: 2px 2px 2px #aaa; text-align: center; } h2 { font-family: 'Neucha', serif; font-size: 20px; text-shadow: 2px 2px 2px #aaa; text-align: left; } body { font-family: 'Neucha', serif; font-size: 20px; } .share { position: relative; display: inline-block; /* * Отвечает, за расположение кнопочек */ } .share a { font-family: Neucha, Arial, sans-serif; font-size: 13px; text-decoration: none; text-align: center; padding: 5px 0; /* Отвечает за стиль меню */ } .share > a { display: inline-block; width: 100px; z-index: 1; font-weight: bold; color: #616267; border: 1px solid #8F8F8F; border-radius: 3px; background: #fff; background-image: -webkit-linear-gradient(top, #FAFBFD, #F6F7FC); background-image: -moz-linear-gradient(top, #FAFBFD, #F6F7FC); /* Отвечает за дизайн кнопочки */ } .share > a:hover { background: #eee; background-image: -webkit-linear-gradient(top, #F4F7FC, #FAFBFF); background-image: -moz-linear-gradient(top, #F4F7FC, #FAFBFF); } .share div { position: absolute; width: 100px; height: 8px; overflow: hidden; left: 2px; top: 28px; -webkit-transition: all 150ms linear; -moz-transition: all 150ms linear; -o-transition: all 150ms linear; transition: all 150ms linear; /* * Отвечает, за скрытие меню, до того, как на него навели курсор */ } .share:hover div { height: 91px; /* * 26px высота каждого