body, html { padding: 0; margin: 0; } #particles-js { position: fixed; top: 0; right: 0; width: 66%; height: 100%; z-index: 1; } #report { display: inline-block; position: relative; z-index: 2; background-color: transparent } #meta { display: inline-block; position: relative; z-index: 2; background-color: transparent; width:48% } #buttons { display: inline-block; position: relative; z-index: 2; background-color: transparent } a.GL{ display: block; font-size: 1.1em; width:150px; text-decoration:none; text-align:center; font: bold 19px arial; text-transform: uppercase; padding: 10px 15px; margin: 3px; color: #ccc; background-color: Honeydew; background-image: linear-gradient(top, #888 0%, #555 100%); background-image: -webkit-gradient(linear, left top, left GLom, color-stop(0, #888), color-stop(1, #555)); background-image: -moz-linear-gradient(top, #888 0%, #555 100%); background-image: -o-linear-gradient(top, #888 0%, #555 100%); border: none; border-radius: 10px; text-shadow: 0px -1px 0px blue; box-shadow: 0px 1px 0px #666,0px 5px 0px #444,0px 6px 6px rgba(0, 0, 0, .6); -webkit-transition: ease .15s all; -moz-transition: ease .15s all; -o-transition: ease .15s all; transition: ease .15s all; } a.GL:hover, a.GL:focus{ -webkit-animation: linear 2.7s light infinite; -moz-animation: linear 2.7s light infinite; -o-animation: linear 2.7s light infinite; animation: linear 2.7s light infinite; } @-webkit-keyframes light{ 0% { color: blue; text-shadow: 0px -1px 0px #000; } 50% { color: blue; text-shadow: 0px -1px 0px #444, 0px 0px 5px #ffd, 0px 0px 8px #fff; } 100% { color: blue; text-shadow: 0px -1px 0px #000; } } @-moz-keyframes light{ 0% { color: blue; text-shadow: 0px -1px 0px #000; } 50% { color: blue; text-shadow: 0px -1px 0px #444, 0px 0px 5px #ffd, 0px 0px 8px #fff; } 100% { color: blue; text-shadow: 0px -1px 0px #000; } } @-o-keyframes light{ 0% { color: blue; text-shadow: 0px -1px 0px #000; } 50% { color: blue; text-shadow: 0px -1px 0px #444, 0px 0px 5px #ffd, 0px 0px 8px #fff; } 100% { color: blue; text-shadow: 0px -1px 0px #000; } } @keyframes light{ 0% { color: blue; text-shadow: 0px -1px 0px #000; } 50% { color: LightGrey; text-shadow: 0px -1px 0px #444, 0px 0px 5px #ffd, 0px 0px 8px #fff; } 100% { color: blue; text-shadow: 0px -1px 0px #000; } } a.GL:active{ color: #fff; text-shadow: 0px -1px 0px #444,0px 0px 5px #ffd,0px 0px 8px #fff; box-shadow: 0px 1px 0px #666,0px 2px 0px #444,0px 2px 2px rgba(0, 0, 0, .9); -webkit-transform: translateY(3px); -moz-transform: translateY(3px); -o-transform: translateY(3px); transform: translateY(3px); } a.SnA { float:left; margin-right:5px; margin-left:15px; font-family:arial; font-size: 20px; line-height: 20px; letter-spacing: -1px; text-decoration: none; text-align:center; display:block; width:140px; color: #888888; position: relative; -webkit-transition: color 0.2s; -moz-transition: color 0.2s; -o-transition: color 0.2s; transition: color 0.2s; } a.SnA:hover { color: black; background:rgba(0,0,0,0.1); } a.SnA:after { left: -20px; -webkit-transition-property: left, opacity, top; -moz-transition-property: left, opacity, top; -o-transition-property: left, opacity, top; transition-property: left, opacity, top; -webkit-transition-duration: .2s, .2s, .2s; -moz-transition-duration: .2s, .2s, .2s; -o-transition-duration: .2s, .2s, .2s; transition-duration: .2s, .2s, .2s; content: ""; width: 12px; height: 12px; background: transparent; position: absolute; border-left: 5px solid red; border-top: 5px solid red; top: -22px; opacity: 0; } a.SnA:hover:after { left: -10px; top: -12px; opacity: 1; } a.SnA:before { right: -20px; -webkit-transition-property: right, opacity, top; -moz-transition-property: right, opacity, top; -o-transition-property: right, opacity, top; transition-property: right, opacity, top; -webkit-transition-duration: .2s, .2s, .2s; -moz-transition-duration: .2s, .2s, .2s; -o-transition-duration: .2s, .2s, .2s; transition-duration: .2s, .2s, .2s; content: ""; width: 12px; height: 12px; background: transparent; position: absolute; border-right: 5px solid red; border-top: 5px solid red; top: -22px; opacity: 0; } a.SnA:hover:before { right: -10px; top: -12px; opacity: 1; } .SnSpan:after { left: -20px; -webkit-transition-property: left, opacity, bottom; -moz-transition-property: left, opacity, bottom; -o-transition-property: left, opacity, bottom; transition-property: left, opacity, bottom; -webkit-transition-duration: .2s, .2s, .2s; -moz-transition-duration: .2s, .2s, .2s; -o-transition-duration: .2s, .2s, .2s; transition-duration: .2s, .2s, .2s; content: ""; width: 12px; height: 12px; background: transparent; position: absolute; border-left: 5px solid red; border-bottom: 5px solid red; bottom: -24px; opacity: 0; } .SnSpan:hover:after { left: -10px; bottom: -14px; opacity: 1; } .SnSpan:before { right: -20px; -webkit-transition-property: right, opacity, bottom; -moz-transition-property: right, opacity, bottom; -o-transition-property: right, opacity, bottom; transition-property: right, opacity, bottom; -webkit-transition-duration: .2s, .2s, .2s; -moz-transition-duration: .2s, .2s, .2s; -o-transition-duration: .2s, .2s, .2s; transition-duration: .2s, .2s, .2s; content: ""; width: 12px; height: 12px; background: transparent; position: absolute; border-right: 5px solid red; border-bottom: 5px solid red; bottom: -24px; opacity: 0; } .SnSpan:hover:before { right: -10px; bottom: -14px; opacity: 1; } a.DnA { float:left; margin-right:5px; margin-left:15px; font-family:arial; font-size: 20px; line-height: 20px; letter-spacing: -1px; text-decoration: none; text-align:center; display:block; width:140px; color: #888888; position: relative; -webkit-transition: color 0.2s; -moz-transition: color 0.2s; -o-transition: color 0.2s; transition: color 0.2s; } a.DnA:hover { color: black; background:rgba(0,0,0,0.1); } a.DnA:after { left: -20px; -webkit-transition-property: left, opacity, top; -moz-transition-property: left, opacity, top; -o-transition-property: left, opacity, top; transition-property: left, opacity, top; -webkit-transition-duration: .2s, .2s, .2s; -moz-transition-duration: .2s, .2s, .2s; -o-transition-duration: .2s, .2s, .2s; transition-duration: .2s, .2s, .2s; content: ""; width: 12px; height: 12px; background: transparent; position: absolute; border-left: 5px solid blue; border-top: 5px solid blue; top: -22px; opacity: 0; } a.DnA:hover:after { left: -10px; top: -12px; opacity: 1; } a.DnA:before { right: -20px; -webkit-transition-property: right, opacity, top; -moz-transition-property: right, opacity, top; -o-transition-property: right, opacity, top; transition-property: right, opacity, top; -webkit-transition-duration: .2s, .2s, .2s; -moz-transition-duration: .2s, .2s, .2s; -o-transition-duration: .2s, .2s, .2s; transition-duration: .2s, .2s, .2s; content: ""; width: 12px; height: 12px; background: transparent; position: absolute; border-right: 5px solid blue; border-top: 5px solid blue; top: -22px; opacity: 0; } a.DnA:hover:before { right: -10px; top: -12px; opacity: 1; } .DnSpan:after { left: -20px; -webkit-transition-property: left, opacity, bottom; -moz-transition-property: left, opacity, bottom; -o-transition-property: left, opacity, bottom; transition-property: left, opacity, bottom; -webkit-transition-duration: .2s, .2s, .2s; -moz-transition-duration: .2s, .2s, .2s; -o-transition-duration: .2s, .2s, .2s; transition-duration: .2s, .2s, .2s; content: ""; width: 12px; height: 12px; background: transparent; position: absolute; border-left: 5px solid blue; border-bottom: 5px solid blue; bottom: -24px; opacity: 0; } .DnSpan:hover:after { left: -10px; bottom: -14px; opacity: 1; } .DnSpan:before { right: -20px; -webkit-transition-property: right, opacity, bottom; -moz-transition-property: right, opacity, bottom; -o-transition-property: right, opacity, bottom; transition-property: right, opacity, bottom; -webkit-transition-duration: .2s, .2s, .2s; -moz-transition-duration: .2s, .2s, .2s; -o-transition-duration: .2s, .2s, .2s; transition-duration: .2s, .2s, .2s; content: ""; width: 12px; height: 12px; background: transparent; position: absolute; border-right: 5px solid blue; border-bottom: 5px solid blue; bottom: -24px; opacity: 0; } .DnSpan:hover:before { right: -10px; bottom: -14px; opacity: 1; }