GROUP CODE

<style type="text/css">

.pfor {
display: none;
}

::-webkit-scrollbar-thumb:vertical {background-color:#00ffa6;}
::-webkit-scrollbar {height:0px;width:5px;background-color:#ffffff;}


img
{margin-bottom:-3px;}

body
{
background-color: #111;
background-image: url(http://www.transparenttextures.com/patterns/green-dust-and-scratches.png);
background-position: fixed;
background-attachment:fixed;
background-repeat:repeat;
}

#profile {
background-color: transparent;
border: 0px;
}

a
{text-decoration:none;
color:#ff7300;
-webkit-transition: opacity 0.7s linear;
-webkit-transition: all 0.7s ease-in-out;
-moz-transition: all 0.7s ease-in-out;
-o-transition: all 0.7s ease-in-out;
opacity:1;}

a:hover
{text-decoration:none;
color:;
opacity:1;}

blockquote
{border-left:2px solid;
padding-left:5px;}

.title {letter-spacing:2;
text-align:center;
font-family:consolas, serif;
color:#fff;
position:relative;
top:60px;
right:0px;
}

.title:a {
font-size:12pt;
-webkit-transition: opacity 0.7s linear;
-webkit-transition: all 0.7s ease-in-out;
-moz-transition: all 0.7s ease-in-out;
-o-transition: all 0.7s ease-in-out;
}

.title:hover {opacity:1;
color:#fff400;
-webkit-transition: opacity 0.7s linear;
-webkit-transition: all 0.7s ease-in-out;
-moz-transition: all 0.7s ease-in-out;
-o-transition: all 0.7s ease-in-out;
}

#navi {
    position: absolute;
    margin-top:65px;
    right:0px;
    left:0px;
}

#navi a {
    float: left;
display: block;
    width: 10px;
    height: 5px;
    background: #ccc;
transition:all 1s ease-out;-o-transition:all 1s ease-in-out;-moz-transition:all 1s ease-in-out;
    margin-bottom: 5px;
}


#navi a:hover {
background-color:transparent;
}



#first {
background-color:rgba(99,99,99,0.10);
height:150px;
width:150px;
position:fixed;
top:50px;
right:800px;
}

#first:hover #hana {
position: absolute;
top:0px;
right:172px;
opacity: 0.85;
-webkit-transition:all 1s ease-in-out;
-moz-transition:all 1s ease-in-out;
transition:all 1s ease-in-out;
}


#hana {
position: absolute;
top: -140px;
right:172px;
height:485px;
width:250px;
opacity: 0;
background:transparent;
border: #ccc 1px solid;
-webkit-transition:all 1s ease-in-out;
-moz-transition:all 1s ease-in-out;
transition:all 1s ease-in-out;
color:#fff;
text-align:justify;
padding:10px;
font-family:consolas;
font-size:7pt;
}


#second {
background-color:rgba(99,99,99,0.10);
height:150px;
width:150px;
position:fixed;
top:50px;
right:615px;
}

#second:hover #dul {
position: absolute;
top:0px;
right:358px;
opacity: 0.85;
-webkit-transition:all 1s ease-in-out;
-moz-transition:all 1s ease-in-out;
transition:all 1s ease-in-out;
}


#dul {
position: absolute;
top: -140px;
right:358px;
height:485px;
width:250px;
opacity: 0;
background:transparent;
border: #ccc 1px solid;
-webkit-transition:all 1s ease-in-out;
-moz-transition:all 1s ease-in-out;
transition:all 1s ease-in-out;
color:#fff;
text-align:justify;
padding:10px;
font-family:consolas;
font-size:7pt;
}


#third {
background-color:rgba(99,99,99,0.10);
height:150px;
width:150px;
position:fixed;
top:50px;
right:430px;
}

#third:hover #set {
position: absolute;
top:0px;
right:542px;
opacity: 0.85;
-webkit-transition:all 1s ease-in-out;
-moz-transition:all 1s ease-in-out;
transition:all 1s ease-in-out;
}


#set {
position: absolute;
top: -140px;
right:542px;
height:485px;
width:250px;
opacity: 0;
background:transparent;
border: #ccc 1px solid;
-webkit-transition:all 1s ease-in-out;
-moz-transition:all 1s ease-in-out;
transition:all 1s ease-in-out;
color:#fff;
text-align:justify;
padding:10px;
font-family:consolas;
font-size:7pt;
}


#fourth {
background-color:rgba(99,99,99,0.10);
height:150px;
width:150px;
position:fixed;
top:230px;
right:800px;
}

#fourth:hover #net {
position: absolute;
top:-180px;
right:172px;
opacity: 0.85;
-webkit-transition:all 1s ease-in-out;
-moz-transition:all 1s ease-in-out;
transition:all 1s ease-in-out;
}

#net {
position: absolute;
top:-260px;
right:172px;
height:485px;
width:250px;
opacity: 0;
background:transparent;
border: #ccc 1px solid;
-webkit-transition:all 1s ease-in-out;
-moz-transition:all 1s ease-in-out;
transition:all 1s ease-in-out;
color:#fff;
text-align:justify;
padding:10px;
font-family:consolas;
font-size:7pt;
}

#fifth {
background-color:rgba(99,99,99,0.10);
height:150px;
width:150px;
position:fixed;
top:230px;
right:615px;
}

#fifth:hover #daseot {
position: absolute;
top:-180px;
right:358px;
opacity: 0.85;
-webkit-transition:all 1s ease-in-out;
-moz-transition:all 1s ease-in-out;
transition:all 1s ease-in-out;
}

#daseot {
position: absolute;
top:-260px;
right:358px;
height:485px;
width:250px;
opacity: 0;
background:transparent;
border: #ccc 1px solid;
-webkit-transition:all 1s ease-in-out;
-moz-transition:all 1s ease-in-out;
transition:all 1s ease-in-out;
color:#fff;
text-align:justify;
padding:10px;
font-family:consolas;
font-size:7pt;
}

#sixth {
background-color:rgba(99,99,99,0.10);
height:150px;
width:150px;
position:fixed;
top:230px;
right:430px;
}

#sixth:hover #yoseot {
position: absolute;
top:-180px;
right:542px;
opacity: 0.85;
-webkit-transition:all 1s ease-in-out;
-moz-transition:all 1s ease-in-out;
transition:all 1s ease-in-out;
}

#yoseot {
position: absolute;
top:-260px;
right:542px;
height:485px;
width:250px;
opacity: 0;
background:transparent;
border: #ccc 1px solid;
-webkit-transition:all 1s ease-in-out;
-moz-transition:all 1s ease-in-out;
transition:all 1s ease-in-out;
color:#fff;
text-align:justify;
padding:10px;
font-family:consolas;
font-size:7pt;
}

#seventh {
background-color:rgba(99,99,99,0.10);
height:150px;
width:150px;
position:fixed;
top:410px;
right:800px;}

#seventh:hover #ilgop {
position: absolute;
top:-355px;
right:172px;
opacity: 0.85;
-webkit-transition:all 1s ease-in-out;
-moz-transition:all 1s ease-in-out;
transition:all 1s ease-in-out;
}

#ilgop {
position: absolute;
top:-380px;
right:172px;
height:485px;
width:250px;
opacity: 0;
background:transparent;
border: #ccc 1px solid;
-webkit-transition:all 1s ease-in-out;
-moz-transition:all 1s ease-in-out;
transition:all 1s ease-in-out;
color:#fff;
text-align:justify;
padding:10px;
font-family:consolas;
font-size:7pt;
}

#eighth {
background-color:rgba(99,99,99,0.10);
height:150px;
width:150px;
position:fixed;
top:410px;
right:615px;}


#eighth:hover #yodol {
position: absolute;
top:-355px;
right:358px;
opacity: 0.85;
-webkit-transition:all 1s ease-in-out;
-moz-transition:all 1s ease-in-out;
transition:all 1s ease-in-out;
}

#yodol {
position: absolute;
top:-380px;
right:358px;
height:485px;
width:250px;
opacity: 0;
background:transparent;
border: #ccc 1px solid;
-webkit-transition:all 1s ease-in-out;
-moz-transition:all 1s ease-in-out;
transition:all 1s ease-in-out;
color:#fff;
text-align:justify;
padding:10px;
font-family:consolas;
font-size:7pt;
}

#ninth {
background-color:rgba(99,99,99,0.10);
height:150px;
width:150px;
position:fixed;
top:410px;
right:430px;}

#ninth:hover #ahop {
position: absolute;
top:-355px;
right:542px;
opacity: 0.85;
-webkit-transition:all 1s ease-in-out;
-moz-transition:all 1s ease-in-out;
transition:all 1s ease-in-out;
}

#ahop {
position: absolute;
top:-380px;
right:542px;
height:485px;
width:250px;
opacity: 0;
background:transparent;
border: #ccc 1px solid;
-webkit-transition:all 1s ease-in-out;
-moz-transition:all 1s ease-in-out;
transition:all 1s ease-in-out;
color:#fff;
text-align:justify;
padding:10px;
font-family:consolas;
font-size:7pt;
}

</style>
<div id="first"><div class="title">VIEGLES</div>
<div id="navi">
<a href="#1" title="geography." id="links"></a>
<a href="#2" title="culture." id="links"></a>
<a href="#3" title="abilities." id="links"></a>
<a href="#4" title="alliances." id="links"></a>
</div>
<div id="hana">
<p>A low gravity planet in the neighboring galaxy to Earth, shielded by a layer of electromagnetic waves that shoot from the core of the planet back out to space. The only way to travel through its thick atomsphere is if a portal is produced to travel through it. It is only revealed should the planet's intelligent inhabitants lead you to their rather large home. It is a very old planet, the first created in it's galaxy and possibly even one of the first in the mysterious beginning of the universe considering the vastness of it. It is similar to Earth yet unique as a mother planet, also being the third planet from twin suns which are ultimately smaller than Viegles. The planet is caught in eternal spring. Oceans are coral, thin grass is a generous green all year round. It is a world that could be comparable to what a human would call, <i>Heaven</i>. Viegles and its natural land formations such as hooded mountains, flowered valleys, and low clouds all suggest that this planet is simply a paradise. </p>
</div>
</div>


<div id="second"><div class="title">FAQ</div>
<div id="navi">
<a href="#1" title="invitation." id="links"></a>
<a href="#2" title="application." id="links"></a>
<a href="#3" title="q&a." id="links"></a>
<a href="#4" title="rules." id="links"></a>
</div>
<div id="dul">

</div>
</div>

<div id="third"><div class="title">GXON10</div>
<div id="navi">
<a href="#1" title="geography." id="links"></a>
<a href="#2" title="culture." id="links"></a>
<a href="#3" title="abilities." id="links"></a>
<a href="#4" title="alliances." id="links"></a>
</div>
<div id="set">

</div>
</div>

<div id="fourth"><div class="title">CERES</div>
<div id="navi">
<a href="#1" title="geography." id="links"></a>
<a href="#2" title="culture." id="links"></a>
<a href="#3" title="abilities." id="links"></a>
<a href="#4" title="alliances." id="links"></a>
</div>
<div id="net">

</div>

<div id="fifth"><div class="title">EARTH</div>
<div id="navi">
<a href="#1" title="geography." id="links"></a>
<a href="#2" title="culture." id="links"></a>
<a href="#3" title="abilities." id="links"></a>
<a href="#4" title="alliances." id="links"></a>
</div>
<div id="daseot">

</div>

<div id="sixth"><div class="title">DAKAETA</div>
<div id="navi">
<a href="#1" title="geography." id="links"></a>
<a href="#2" title="culture." id="links"></a>
<a href="#3" title="abilities." id="links"></a>
<a href="#4" title="alliances." id="links"></a>
</div>
<div id="yos