.ui.nag { display: none; position: absolute; top: 0px; left: 10%; z-index: 100; width: 80%; min-height: 20px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; padding: 8px 20px; background-color: #272626; background: -webkit-linear-gradient(top, rgba(22, 22, 22, 0.85) 0%, rgba(17, 17, 17, 1) 100%); background: -moz-linear-gradient(top, rgba(22, 22, 22, 0.85) 0%, rgba(17, 17, 17, 1) 100%); background: -o-linear-gradient(top, rgba(22, 22, 22, 0.85) 0%, rgba(17, 17, 17, 1) 100%); background: -ms-linear-gradient(top, rgba(22, 22, 22, 0.85) 0%, rgba(17, 17, 17, 1) 100%); background: linear-gradient(top, rgba(22, 22, 22, 0.85) 0%, rgba(17, 17, 17, 1) 100%); -webkit-box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.4), 0px 1px 0px rgba(255, 255, 255, 0.1) inset ; -moz-box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.4), 0px 1px 0px rgba(255, 255, 255, 0.1) inset ; box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.4), 0px 1px 0px rgba(255, 255, 255, 0.1) inset ; text-align: center; font-size: 14px; font-weight: bold; color: #009FDA; text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.8); -webkit-border-radius: 0px 0px 5px 5px; -moz-border-radius: 0px 0px 5px 5px; border-radius: 0px 0px 5px 5px; -webkit-transition: 0.2s background; -moz-transition: 0.2s background; -o-transition: 0.2s background; -ms-transition: 0.2s background; transition: 0.2s background; } .ui.nag .close { cursor: pointer; opacity: 0.4; position: absolute; top: 50%; right: 15px; margin-top: -6px; font-size: 12px; color: #FFFFFF; -webkit-transition: 0.1s opacity; -moz-transition: 0.1s opacity; -o-transition: 0.1s opacity; -ms-transition: 0.1s opacity; transition: 0.1s opacity; } .ui.nag .close.hover { opacity: 1; } .ui.nag b { font-weight: bold; color: #EEEEEE; } /* Bottom Style */ .ui.nag.bottom { -webkit-border-radius: 5px 5px 0px 0px; -moz-border-radius: 5px 5px 0px 0px; border-radius: 5px 5px 0px 0px; } /* Fixed Style */ .ui.nag.fixed { position: fixed; } .ui.nag.bottom.fixed { top: auto; bottom: 0px; } /* Link Style */ .ui.nag.hover { cursor: pointer; background-color: #272626; background: -webkit-linear-gradient(top, rgba(22, 22, 22, 1) 0%, rgba(17, 17, 17, 1) 100%); background: -moz-linear-gradient(top, rgba(22, 22, 22, 1) 0%, rgba(17, 17, 17, 1) 100%); background: -o-linear-gradient(top, rgba(22, 22, 22, 1) 0%, rgba(17, 17, 17, 1) 100%); background: -ms-linear-gradient(top, rgba(22, 22, 22, 1) 0%, rgba(17, 17, 17, 1) 100%); background: linear-gradient(top, rgba(22, 22, 22, 1) 0%, rgba(17, 17, 17, 1) 100%); } .ui.nag.hover b { font-weight: bold; color: #FFFFFF; } /* White Variation */ .ui.nag.white { background-color: #EEEEEE; background: -webkit-linear-gradient(top, #FFFFFF 0%, #DDDDDD 100%); background: -moz-linear-gradient(top, #FFFFFF 0%, #DDDDDD 100%); background: -o-linear-gradient(top, #FFFFFF 0%, #DDDDDD 100%); background: -ms-linear-gradient(top, #FFFFFF 0%, #DDDDDD 100%); background: linear-gradient(top, #FFFFFF 0%, #DDDDDD 100%); -webkit-box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.2), 0px 1px 0px rgba(255, 255, 255, 0.1) inset ; -moz-box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.2), 0px 1px 0px rgba(255, 255, 255, 0.1) inset ; box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.2), 0px 1px 0px rgba(255, 255, 255, 0.1) inset ; text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.8); color: #888888; } .ui.nag.white .close, .ui.nag.white b { color: #000000; }