OgSite/style.css

body{
background-color:#000000;
margin:0;
background-image:url("resources/carcbonbg.jpg");
}

@font-face {
    font-family: race;
    src: url(resources/evogria.otf);
} 

#menu {
position:fixed;
height:100%;
vertical-align:center;
width:15%;--300px;
left:0;
border-right:1px solid black;
background: rgb(160,0,0);
background: -moz-linear-gradient(left,  rgba(160,0,0,1) 0%, rgba(181,0,0,1) 63%, rgba(160,0,0,1) 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(160,0,0,1)), color-stop(63%,rgba(181,0,0,1)), color-stop(100%,rgba(160,0,0,1)));
background: -webkit-linear-gradient(left,  rgba(160,0,0,1) 0%,rgba(181,0,0,1) 63%,rgba(160,0,0,1) 100%);
background: -o-linear-gradient(left,  rgba(160,0,0,1) 0%,rgba(181,0,0,1) 63%,rgba(160,0,0,1) 100%);
background: -ms-linear-gradient(left,  rgba(160,0,0,1) 0%,rgba(181,0,0,1) 63%,rgba(160,0,0,1) 100%);
background: linear-gradient(to right,  rgba(160,0,0,1) 0%,rgba(181,0,0,1) 63%,rgba(160,0,0,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a00000', endColorstr='#a00000',GradientType=1 );

}

#buttonholder {
  position: relative;
  top: 45%;
  transform: translateY(-40%);
  height:auto;
  width:auto;
}
.button {
width:100%;
height:5%;
text-align:center;
background: #353535;
background: -moz-linear-gradient(top,  #353535 0%, #383838 1%, #363636 36%, #363636 73%, #343434 99%, #353535 99%, #353535 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#353535), color-stop(1%,#383838), color-stop(36%,#363636), color-stop(73%,#363636), color-stop(99%,#343434), color-stop(99%,#353535), color-stop(100%,#353535));
background: -webkit-linear-gradient(top,  #353535 0%,#383838 1%,#363636 36%,#363636 73%,#343434 99%,#353535 99%,#353535 100%);
background: -o-linear-gradient(top,  #353535 0%,#383838 1%,#363636 36%,#363636 73%,#343434 99%,#353535 99%,#353535 100%);
background: -ms-linear-gradient(top,  #353535 0%,#383838 1%,#363636 36%,#363636 73%,#343434 99%,#353535 99%,#353535 100%);
background: linear-gradient(to bottom,  #353535 0%,#383838 1%,#363636 36%,#363636 73%,#343434 99%,#353535 99%,#353535 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#353535', endColorstr='#353535',GradientType=0 );

    -webkit-transition: all 500ms ease-out;
    -moz-transition: all 500ms ease-out;
    -o-transition: all 500ms ease-out;
    transition: all 500ms ease-out;
	transition-delay: all 500ms;
	border-top:2px solid #363636;
	border-bottom:2px solid #363636;
font-color:000000;
font-family:race;
font-size:250%;
text-shadow: 1px 1px #606060;
-box-shadow:inset 0 0 100px #000000;
cursor: pointer; cursor: hand;
-webkit-user-select: none; /* Chrome/Safari */        
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* IE10+ */
background-repeat:no-repeat;
background-size:100%;
margin-bottom:-2;
overflow: hidden;
}
.button:hover {
height:20%;
box-shadow:inset 0 0 100px #000000;
text-shadow: none;
font-color:f2f2f2;
-background-image:url("resources/linkbg.png");
}

#eagle {
position:absolute;
top:3%;
left:0%;
width:100%;
height:18%;
background-image:url("resources/eagle2.png");
background-repeat: no-repeat;
-background-attachment: fixed;
background-size:50%;
background-position:45% 30%;
 -webkit-transition: all 1s ease-out;
    -moz-transition: all 1s ease-out;
    -o-transition: all 1s ease-out;
    transition: all 1s ease-out;
	cursor: pointer; cursor: hand;
}
#eagle:hover {
background-image:url('resources/eagleover.png');
}

#senna {
position:absolute;
bottom:0px;
left:0px;
width:100%;
height:18%;
background-image:url("resources/senna.png");
background-repeat: no-repeat;
-background-attachment: fixed;
background-size:80%;
background-position:50% 70%;
}

.bottombox {
position:absolute;
bottom:0px;
width:100%;
height:100%;
}

.bs {
position:absolute;
bottom:0px;
}

#bar {
position:absolute;
height:0px;
background:#ffffff;
width:100%;
top:0px;
 -webkit-transition: all 1s ease-out;
    -moz-transition: all 1s ease-out;
    -o-transition: all 1s ease-out;
    transition: all 1s ease-out;
opacity:50%;
}
#bar:hover {
-height:100%;
}

#bar2 {
position:absolute;
width:0px;
height:100%;
background:#ffffff;
left:0px;
-webkit-transition: all 2s ease-out;
    -moz-transition: all 2s ease-out;
    -o-transition: all 2s ease-out;
    transition: all 2s ease-out;
opacity:50%;
}
#bar2:hover {
width:100%;
}

#wrapper2 {
position:fixed;
width: -moz-calc(100% - 300px);
width: -webkit-calc(100% - 300px);
width: -o-calc(100% - 300px);
width: calc(100% - 300px);
height:100%;
left:300;
background:url("resources/flag.png");
background-size:50%;
background-repeat: no-repeat;
background-attachment: fixed;
background-position:right bottom;
}

#wrapper {
position:absolute;
width:85%;
height:100%;
left:15%;
background:url("resources/lambobg.png");
background-repeat: no-repeat;
background-attachment: fixed;
background-size:50%;
background-position:right -30%;
opacity: 1;
-webkit-transition: all 1s ease-out;
    -moz-transition: all 1s ease-out;
    -o-transition: all 1s ease-out;
    transition: all 1s ease-out;
}
#swrapper:hover {
opacity: 0.5;
background-size:55%;
}
#panel {
position:absolute;
margin:auto;
bottom:10;
right:10;
height: 500px;
width:200px;
background:black;
}

#dropshadowbg {position:absolute;width:100%;height:100%;box-shadow: inset 0 0 200px #000000;}

#logo {
position:absolute;
right:50;
top:50;
width:300;
height:300;
background-image:url("resources/logo.png");
background-repeat:no-repeat;
}