#notification-area { position: relative; z-index: 9999; width: 100%; padding: 10px 0;}
#notification-area ~ #header.header-fixed { top: 0;}
#notification-area.hidden { display: none; }
.logged-in #notification-area.hidden { display: block; }
.logged-in #notification-area ~ #header.header-fixed { top:32px; }
#notification-area h3 { font-weight: bold; clear:none!important; margin: 0; padding: 0; color: #222; }
#notification-area { color: #fff; text-align: center }
#notification-area p { margin: 0 0 10px; }
#notification-area strong { font-size: 130%; text-transform: uppercase; text-shadow: 1px 1px 3px rgba(0,0,0,0.3); }
#notification-area p:last-child { margin: 0; }
#notification-area a { color: #fff; }
#remove-notice { display: block; height:30px; width: 30px; position: absolute; right: 10px; top: 6px; margin: 0; transition: top 0.3s; background: center no-repeat url(data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTguMS4xLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDE3NC4yMzkgMTc0LjIzOSIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMTc0LjIzOSAxNzQuMjM5OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgd2lkdGg9IjUxMnB4IiBoZWlnaHQ9IjUxMnB4Ij4KPGc+Cgk8cGF0aCBkPSJNODcuMTIsMEMzOS4wODIsMCwwLDM5LjA4MiwwLDg3LjEyczM5LjA4Miw4Ny4xMiw4Ny4xMiw4Ny4xMnM4Ny4xMi0zOS4wODIsODcuMTItODcuMTJTMTM1LjE1NywwLDg3LjEyLDB6IE04Ny4xMiwxNTkuMzA1ICAgYy0zOS44MDIsMC03Mi4xODUtMzIuMzgzLTcyLjE4NS03Mi4xODVTNDcuMzE4LDE0LjkzNSw4Ny4xMiwxNC45MzVzNzIuMTg1LDMyLjM4Myw3Mi4xODUsNzIuMTg1UzEyNi45MjEsMTU5LjMwNSw4Ny4xMiwxNTkuMzA1eiIgZmlsbD0iI0ZGRkZGRiIvPgoJPHBhdGggZD0iTTEyMC44Myw1My40MTRjLTIuOTE3LTIuOTE3LTcuNjQ3LTIuOTE3LTEwLjU1OSwwTDg3LjEyLDc2LjU2OEw2My45NjksNTMuNDE0Yy0yLjkxNy0yLjkxNy03LjY0Mi0yLjkxNy0xMC41NTksMCAgIHMtMi45MTcsNy42NDIsMCwxMC41NTlsMjMuMTUxLDIzLjE1M0w1My40MDksMTEwLjI4Yy0yLjkxNywyLjkxNy0yLjkxNyw3LjY0MiwwLDEwLjU1OWMxLjQ1OCwxLjQ1OCwzLjM2OSwyLjE4OCw1LjI4LDIuMTg4ICAgYzEuOTExLDAsMy44MjQtMC43MjksNS4yOC0yLjE4OEw4Ny4xMiw5Ny42ODZsMjMuMTUxLDIzLjE1M2MxLjQ1OCwxLjQ1OCwzLjM2OSwyLjE4OCw1LjI4LDIuMTg4YzEuOTExLDAsMy44MjEtMC43MjksNS4yOC0yLjE4OCAgIGMyLjkxNy0yLjkxNywyLjkxNy03LjY0MiwwLTEwLjU1OUw5Ny42NzksODcuMTI3bDIzLjE1MS0yMy4xNTNDMTIzLjc0Nyw2MS4wNTcsMTIzLjc0Nyw1Ni4zMzEsMTIwLjgzLDUzLjQxNHoiIGZpbGw9IiNGRkZGRkYiLz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8L3N2Zz4K); 
background-size: 24px; text-decoration: none; }
#remove-notice:hover { top: 8px; }
#notification-area { background: #3399cc; }
#notification-area.red { background: #ff8e8e; }
#notification-area.orange { background: #ff6600; }
#notification-area.green { background: #5dd428; }
#notification-area.gray { background: #d8d8d8; }