/* * Site header styling */ @charset "utf-8"; .header { text-align: center; background: linear-gradient(180deg, #C2AFFE, #CCBAFE); box-shadow: 0 0 5px #8364A1; } .header .logo { background: none; height: auto; width: auto; display: inline-block; text-decoration: none; font: 100 70px/80px "Segoe UI", sans-serif; color: #B06AC4; transition: color .2s, text-shadow .2s; } .header .logo:hover { color: #C17BD5; text-shadow: 0 0 .1em #C17BD5; } .header .logo:active { color: #A059B3; text-shadow: 0 0 .1em #A059B3; } @media (max-width: 768px) { .header .logo { font: 100 50px/60px "Segoe UI", sans-serif; } } .header .menu { border-bottom: 2px solid #9475B2; } .header .menu .menu-nav { text-align: left; float: left; } .header .menu .menu-ucp { text-align: right; float: right; } .header .menu .menu-mob { display: none; } .header .menu .menu-item { margin: 0 8px -2px; display: inline-block; min-width: 75px; padding: 5px; border-bottom: 2px solid #8364A1; color: inherit; text-decoration: none; text-align: center; transition: border-color .5s, background .3s; } .header .menu .menu-item.avatar { width: auto; padding-left: 36px; background: url('/pixel.png') no-repeat scroll left center / contain transparent; } .header .menu .menu-item:hover { border-color: #503180 !important; } .header .menu .menu-item:active { border-color: #503180 !important; background-color: #503180 !important; } .header .menu .menu-donate:hover { border-color: #EE9400 !important; } .header .menu .menu-donate:active { border-color: #EE9400 !important; background-color: #EE9400 !important; } @media (max-width: 1283px) and (min-width: 930px) { .header .menu { border: 0; padding-bottom: 5px; } .header .menu .menu-nav { margin-left: 32px; } .header .menu .menu-nav, .header .menu .menu-ucp { display: block; float: none; text-align: center; } .header .menu .menu-item { min-width: 120px; border: 0; margin: 0 8px; } .header .menu .menu-nav .menu-item { min-width: 120px; border-bottom: 1px solid #8364A1; } .header .menu .menu-ucp .menu-item { min-width: 120px; border-top: 1px solid #8364A1; } } @media (max-width: 930px) { .header .menu .menu-nav, .header .menu .menu-ucp { float: none; text-align: center; display: none; } .header .menu .menu-hid { display: block; } .header .menu .menu-mob { display: block; } .header .menu .menu-item.avatar { padding-left: 0; } .header .menu .menu-mob .menu-item { width: 100px; } .header .menu .menu-nav .menu-item, .header .menu .menu-ucp .menu-item { display: block; border-top: 0; border-bottom: 1px solid #8364A1; margin: 0 8px; } .header .menu .menu-nav:before { content: "Navigation"; font-size: 20px; line-height: 40px; } .header .menu .menu-ucp:before { content: "User Settings"; font-size: 20px; line-height: 40px; } } .headerNotify { margin: 10px auto; padding: 10px; width: auto; max-width: 1024px; border: 1px solid #9475B2; box-shadow: 0 0 3px #9475B2; border-radius: 3px; background: #D3BFFF; display: block; text-align: center; }