#WD-Title {
padding-left: 2.5%;
padding-top: 2.5%;
padding-bottom: 2.5%;
margin-right: 77%;
margin-bottom: 5%;
background-color: #333333;
color: white;
font-family: monospace;
text-transform: uppercase;
}
#topstuff1 {
margin-top: -10%;
margin-left: 25%;
margin-right: 40%;
background-color: #737373;
}
#topstuff2 {
margin-top: -17%;
margin-left: 30%;
margin-right: 35%;
background-color: #000099;
}
#topstuff3 {
margin-top: -7%;
margin-right: 15%;
margin-left: 50%;
background-color: #333333;
}
#topstuff4 {
margin-top: -6%;
margin-right: 65%;
margin-left: 1%;
background-color: #000066;
}
.topstuff1-2 {
padding-top: 6.25%;
padding-bottom: 5%;
opacity: 0.7;
}
.topstuff3-4 {
padding-top: 6%;
padding-bottom: 5%;
opacity: 0.7;
}
.all-top-stuff{
position: relative;
z-index: 1;
}
html,body {
background-color:#000;
}
ul {
display: flex;
justify-content: space-around;
width: 100%;
padding-left: 0;
}
li {
list-style: none;
font-size: 2%;
font-family: monospace;
font-weight: 300;
text-transform: uppercase;
letter-spacing: 1%;
}
a {
color: black;
text-decoration: none;
position: relative;
}
a:hover:before {
clip: rect(0, 190px, 190px, 0);
}
a:before {
position: absolute;
left: 0;
top: 0;
content: attr(data-content);
display: inline-block;
color: #6699ff;
width: 100%;
clip: rect(0, 0, 190px, 0);
-webkit-transition: clip cubic-bezier(0.25, 0.46, 0.45, 0.94) 500ms;
transition: clip cubic-bezier(0.25, 0.46, 0.45, 0.94) 500ms;
}
a:active {
text-shadow: 4px 4px 5px black;
}
.buttons {
margin-top: 10%;
background-color: white;
margin-left: 10%;
margin-right: 10%;
padding-top: 1%;
padding-bottom: 1%;
}
.img {
margin-bottom: 3.5%;
background-color: black;
border: 4px solid #1a001a;
float: left;
width: 13%;
height: 200px;
}
.img:hover {
border: 4px solid #777;
}
.img img {
width: 100%;
height: 100%;
}
.desc {
padding: 6%;
width: 87%;
text-align: center;
background-color: black;
color: white;
position: relative;
z-index: 1;
margin-top: 0px;
border: 4px solid #1a001a;
}
.image-gallery {
margin-left: 3%;
margin-top: 3%;
}
canvas {
position:absolute;
top:0; left:0;
}
}
#desc1{
padding-bottom: 10%;
}
#desc2{
padding-bottom: 12%;
}
#desc3{
padding-bottom: 12%;
}
#desc4{
padding-bottom: 12%;
}
#desc5{
padding-bottom: 12%;
}
#desc6{
padding-bottom: 12%;
}
#desc7{
padding-bottom: 12%;
}
/* Search bar styling: */
#tfnewsearch{
float:right;
margin-top:-180px;
padding:20px;
}
.tftextinput{
margin: 0;
padding: 5px 20px;
font-family: Arial, Helvetica, sans-serif;
font-size:14px;
border:1px solid blue; border-right:0px;
border-top-left-radius: 5px 5px;
border-bottom-left-radius: 5px 5px;
}
.tfbutton {
margin: 0px;
padding:5px 20px;
font-family: Arial, Helvetica, sans-serif;
font-size:14px;
outline: none;
cursor: pointer;
text-align: center;
text-decoration: none;
color: #ffffff;
border: solid 1px blue; border-right:1px;
background: blue;
background: -webkit-gradient(linear, left top, left bottom, from(purple), to(black));
background: -moz-linear-gradient(top, yellow, green);
border-top-right-radius: 5px 5px;
border-bottom-right-radius: 5px 5px;
}
.tfbutton:hover {
text-decoration: none;
background: #00678e;
background: -webkit-gradient(linear, left top, left bottom, from(#0095cc), to(#00678e));
background: -moz-linear-gradient(top, #0095cc, #00678e);
}
/* Fixes submit button height problem in Firefox */
.tfbutton::-moz-focus-inner {
border: 0;
}
.tfclear{
clear:both;
}
/* more search bar coding */
#tfheader{
background-color:#c3dfef;
}
#tfnewsearch{
float:right;
padding:20px;
}
.tftextinput2{
margin: 0;
padding: 5px 15px;
font-family: Arial, Helvetica, sans-serif;
font-size:14px;
color:#666;
border:1px solid #0076a3; border-right:0px;
border-top-left-radius: 5px 5px;
border-bottom-left-radius: 5px 5px;
}
.tfbutton2 {
margin: 0;
padding: 5px 7px;
font-family: Arial, Helvetica, sans-serif;
font-size:14px;
font-weight:bold;
outline: none;
cursor: pointer;
text-align: center;
text-decoration: none;
color: #ffffff;
border: solid 1px #0076a3; border-right:0px;
background: #0095cd;
background: -webkit-gradient(linear, left top, left bottom, from(#00adee), to(#0078a5));
background: -moz-linear-gradient(top, #00adee, #0078a5);
border-top-right-radius: 5px 5px;
border-bottom-right-radius: 5px 5px;
}
.tfbutton2:hover {
text-decoration: none;
background: #007ead;
background: -webkit-gradient(linear, left top, left bottom, from(#0095cc), to(#00678e));
background: -moz-linear-gradient(top, #0095cc, #00678e);
}
/* Fixes submit button height problem in Firefox */
.tfbutton2::-moz-focus-inner {
border: 0;
}
.tfclear{
clear:both;
}
var w = c.width = window.innerWidth,
h = c.height = window.innerHeight,
ctx = c.getContext('2d'),
size = [5, 20], //[min, max]
shineDir = [.01, .05],
angSpeed = [.02, .02],
stars = [],
frame = (Math.random()*360)|0,
pentaRadiant = Math.PI * 2 / 5;
function rand(ar){
return Math.random() * (ar[1] - ar[0]) + ar[0];
}
function Star(){
this.size = rand(size);
this.x = Math.random() * w;
this.y = -this.size*2;
this.vy = this.size/15;
this.vx = Math.random() * 6 - 3;
this.ay = this.size/5000;
this.shine = 0;
this.shineDir = rand(shineDir);
this.color = 'hsla(hue, 80%, brightness%, .15)'.replace('hue', frame%360);
this.rot = Math.random() * 2 * Math.PI;
this.omega = rand(angSpeed);
if(Math.random() < .5) this.omega *= -1;
}
Star.prototype.use = function(){
this.x += this.vx;
this.y += this.vy += this.ay;
var newShine = this.shine + this.shineDir;
if(newShine < 0 || newShine > 1) this.shineDir *= -1
else this.shine = newShine;
this.rot += this.omega;
ctx.translate(this.x, this.y);
ctx.rotate(this.rot);
ctx.fillStyle = this.color.replace('brightness', (2.5 + this.shine/2)*1000);
ctx.beginPath();
ctx.moveTo(this.size, 0);
for(var i = 0; i < 5; ++i){
var rad = pentaRadiant * i,
halfRad = rad + pentaRadiant/8;
ctx.lineTo(Math.cos(rad) * this.size, Math.sin(rad) * this.size);
ctx.lineTo(Math.cos(halfRad) * this.size/2, Math.sin(halfRad) * this.size/2);
}
ctx.closePath();
ctx.fill();
ctx.rotate(-this.rot);
ctx.translate(-this.x, -this.y);
}
function anim(){
window.requestAnimationFrame(anim);
++frame;
ctx.globalCompositeOperation = 'destination-out';
ctx.fillStyle = 'rgba(0, 0, 0, .1)';
ctx.fillRect(0, 0, w, h);
ctx.globalCompositeOperation = 'lighter';
if(Math.random() < .3) stars.push(new Star);
for(var s = 0; s < stars.length; ++s){
stars[s].use();
if(stars[s].x + stars[s].size < 0){
stars.splice(s, 6);
--s;
}
}
}
anim();
object.style.zIndex="-1"
//search bar coding
window.onload = function(){
//Get submit button
var submitbutton = document.getElementById("tfq");
//Add listener to submit button
if(submitbutton.addEventListener){
submitbutton.addEventListener("click", function() {
if (submitbutton.value == 'Search'){//Customize this text string to whatever you want
submitbutton.value = '';
}
});
}
}