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;
}