Hi,
Need a little bit more help. This isn't really my best area so please don't get angry if you feel I've asked for too much help?
Coding a website for a GSP, still, and they want the bottom part for "Why PlugPayPlay" to have text which switches depending on which link you select in the nav bar. As you can see here: http://www.mingul.co.uk/jadonsnapr/lio0bY.jpg
For example, if I choose Support the text will change from what it was on to the new text. So if I was on Network, all the text there would smoothly change to the text about Support. Hope that makes sense?
I want the tab it's first on to be Network (Middle One) and then they can switch between which ever one's they want. I've no clue if this is an easy thing to do or a hard thing to do? If you have code for this or can write something up I'd appreciate it.
The website is: http://betappp.plugpayplay.com/
You can see the Style Sheet here: http://betappp.plugpayplay.com/style.css.php?path=0 and view the HTML source code by right clicking and View Source (Sure you knew that). If you'd be kind enough to implement it into the code, that'd help so I can put it in. I believe there may be a .js file required too? If so, I can put the code for that in there and put it in a folder. The folder for all js is /js so please make sure it finds it through there.
Thank you and I've posted the HTML and CSS below too. Let me know.
index.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>PlugPayPlay - Game Server Hosting - Home</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="High performance game servers and dedicated servers at affordable prices. Clan gaming rental for Counter-Strike Source, Team Fortress 2 and other various popular games." />
<meta name="keywords" content="game hosting, game servers, game server provider, low ping, voice servers, teamspeak, private server, public server, dedicated server, no lag, uk servers, quick setup, xeon quad core, plugpayplay, plug pay play, uservenet, easy networking solutions ltd, ens-ltd, tc admin, counter strike source, day of defeat source, team fortress 2, left 4 dead, killing floor, HL2, affordable prices, steam, clans, high performance, colocation, gameservers, gameserver, free teamspeak host, virtual private server, 2 server, 2142 server, cheap teamspeak server, team fortress 2 server, cod4 server, server games, dedicated web server, half life server, gaming server, server, clan server, day of defeat server, mohaa server, teamspeak server, quake 4 server, cod server, bf2 server, battlefield 2 server, css server, ventrilo server, tf2 server, cs server, counterstrike server, dedicated server review, cs 1.6 dedicated server,dedicated server reviews, free dedicated server, cod dedicated server, virtual dedicated server, dedicated server linux, dedicated server host, windows dedicated server, cheap dedicated server, dedicated server, virtual server hosting, cod4 server hosting, virtual private server hosting, web server hosting, teamspeak server hosting, css server hosting, ventrilo server hosting, counterstrike server hosting, server hosting, dedicated server hosting, counter strike 1.6 servers, counter strike clan, counter strike servers, counter strike server hosting, counter strike game servers, counter strike 1.6 server, server counter strike, counter strike source server search, counter strike source servers, counter strike source server, counter strike source, wicked game server, game server reseller, ultimate game server, free game server hosting, game server provider, rent game server, dedicated game server, game server rentals, game server rental, game server providers, game server host, game server hosting, game server, call of duty 4 server hosting, call of duty 4 game servers, call of duty 4 server, call of duty 4 servers" />
<meta name="copyright" content="Easy Networking Solutions Ltd" />
<meta name="robots" content="all" />
<link rel="stylesheet" href="style.css.php?path=0" type="text/css" />
<link rel="stylesheet" href="http://www.plugpayplay.com/sIFR-screen.css" type="text/css" />
<link rel="SHORTCUT ICON" href="favicon.ico" />
<link rel="stylesheet" type="text/css" href="downtime.css" />
<link href='http://fonts.googleapis.com/css?family=Anton' rel='stylesheet' type='text/css' />
<link href='http://fonts.googleapis.com/css?family=Montserrat+Alternates' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="js/jquery-1.5.1.js"></script>
<script type="text/javascript" src="js/header.js"></script>
<script type="text/javascript">
var a=new Date,b=a.getHours()+a.getTimezoneOffset()/60;
if(18==a.getDate()&&0==a.getMonth()&&2012==a.getFullYear()&&13<=b&&24>=b)
{
</script>
</head>
<body>
<div id="container"><!-- Container Start -->
<div class="leftwrapper">
<div class="leftcontainer"><div class="leftmenu">
<div><a href="/index.php">Home</a></div>
<div><a href="/aboutus.php">About Us</a></div>
<div><a href="/contactus.php">Contact Us</a></div>
</div>
</div>
</div>
<br >
<div class="rightwrapper">
<div class="bottomcontainer"><div class="bottommenu">
<div><a href="#">Game Panel</a></div>
<div><a href="#">Billing</a></div>
<div><a href="#">Web Panel</a></div>
</div>
</div>
</div>
<br >
<div id="content" style="padding: 0; position: relative; z-index: 20;"> <!-- ALL Content Start --> <div class="bar">
<div class="ppp">
<a href="index.php">
<img src="images/ppp.png" alt="Logo" /></a>
</div>
<div class="social">
<a href="http://steamcommunity.com/groups/plugpayplay"><img src="Social/Steam.png" alt="Steam" /></a>
<a href="http://facebook.com/plugpayplay"><img src="Social/Facebook.png" alt="Facebook" /></a>
<a href="http://twitter.com/plugpayplay"><img src="Social/Twitter.png" alt="Twitter" /></a>
<a href="http://www.youtube.com/user/PlugPayPlayMedia"><img src="Social/YouTube.png" alt="Youtube" /></a>
</div>
</div>
<div class="uppercon">
<div class="promotiontext">
<div class="wrapper">
<div class="container"><div class="menu">
<div><a href="gameservers.php">Game Servers</a></div>
<div><a href="dedicatedservers.php">Dedicated Servers</a></div>
<div><a href="voiceservers.php">Voice Servers</a></div>
<div><a href="colocation.php">Colocation</a></div>
<div><a href="/forums/">Forums</a></div>
<div><a href="news-media.php">News & Media</a></div>
</div>
</div>
</div>
<br />
<div class="hotline"> </div>
<br />
<a href="#"><img src="images/hotdeal.png" alt="HotDeal" /></a>
</div>
</div>
<div class="lowercon">
<div class="gameservers">
<font face="Anton" size="5"><font color="#f7df00">GAME</font> <font color="#fff">SERVERS</font></font>
<div class="line"> </div>
<br />
<a href="/gameservers.php"><img src="images/Game Server.png" alt="Game Servers"></a>
</div>
<div class="latestnews">
<font face="Anton" size="5">
<font color="#f7df00">LATEST</font>
<font color="#fff">NEWS</font></font>
<div class="line"> </div>
<font face="Open Sans">
<font color="#00bdf4" size="4">PLUGPAYPLay NOW HOSTS CS:GO SERVERS</font>
<div class="innerline"> </div>
<font color="#00f47a" size="4">World's Cheapest GSP</font>
<div class="innerline"> </div>
<font color="#bff700" size="4">Now VAT Inclusive</font>
<div class="innerline"> </div>
<font color="#f7df00" size="4">iPhone 5 Competition</font>
<div class="innerline"> </div>
<font color="#f54700" size="4">Check Out Our New Site!</font>
</font></font>
</div>
<div class="dediservers">
<font face="Anton" size="5"><font color="#f7df00">DEDICATED</font> <font color="#fff">SERVERS</font></font>
<div class="line"> </div>
<br />
<a href="/dedicatedservers.php"><img src="images/Dedi Server.png"></a>
</div>
<div class="login">
<font face="Anton" size="5">
<font color="#f7df00">PRICE</font>
<font color="#fff">PROMISE</font>
</font>
<div class="line"> </div>
</div>
<div class="noc">
<font face="Anton" size="5"><font color="#f7df00">NOC</font> <font color="#fff">MORE INFO</font>
<div class="line"> </div>
<font color="#00bdf4" size="4"> test </font>
<div class="innerline"> </div>
<font color="#00f47a" size="4"> test </font>
<div class="innerline"> </div>
<font color="#bff700" size="4"> test </font>
<div class="innerline"> </div>
<font color="#f7df00" size="4"> test </font>
<div class="innerline"> </div>
<font color="#f54700" size="4"> test</font>
<div class="innerline"> </div>
<font color="#fff" size="2">Last Updated: 10/10/2012</font>
</font>
</div>
<div class="teamspeak">
<font face="Anton" size="5"><font color="#f7df00">TEAM</font><font color="#fff">SPEAK</font></font>
<div class="line"> </div>
</div>
<div class="whyppp">
<div class="bottomwrapper">
<script type="text/javascript" src="js/login.js"></script>
<div class="bottomcontainer"><div class="bottommenu">
<div id="logintabs">
<div> <a nohref="nohref">Servers</a></div>
<div> <a nohref="nohref">Network</a></div>
<div> <a nohref="nohref">Support</a></div>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="footer">
All rights reserved | PlugPayPlay, a division of <a href="http://www.ens-ltd.com">Easy Networking Solutions Ltd</a> | <a href="privacypolicy.php">Privacy Policy</a> | <a href="Terms-and-Conditions.pdf">Terms and Conditions</a>
</div>
</div>
</body>
</html>
</div>
style.css.php
*{
margin: 0px;
padding: 0px;
z-index: 2;
}
html{
background-color: #212121;
}
body {
font-family: Arial, Verdana, Sans-Serif;
font-size: 5px;
color: #424242;
text-align: justify;
margin: 0px auto;
vertical-align: top;
background-image:url('images/bg.png');
}
div {
margin: 0px;
padding: 0px;
}
img {
border: none;
}
a {
color: #ffffff;
font-weight: bold;
text-decoration: none;
z-index: 4;
border: none;
}
a:hover{
color: #ffde00;
font-weight: bold;
text-decoration: none;
}
a:active {
outline: none;
}
h1{
font-family: Arial, Verdana, Sans-Serif;
font-size: 18px;
}
#container {
width: 1000px;
margin: 0px auto;
font-size: 14px;
color: #acacac;
text-align: center;
}
#header {
background-color: #212121;
width: 1000px;
height: 200px;
cursor: pointer;
}
#header .overlay {
position: relative;
z-index: 60;
left: 0px;
top: 0px;
width: 1000px;
height: 200px;
cursor: pointer;
padding: 0;
}
.wrapper {
width: 79.5%;
height: 60px;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#464646', endColorstr='#5a5a5a'); /* for IE */
background: -moz-linear-gradient(center bottom, rgb(70, 70, 70), rgb(90, 90, 90)) repeat scroll 0% 0% transparent;
background: -webkit-gradient(linear, center bottom, center top, from(rgb(70, 70, 70)), to(rgb(90, 90, 90)));
border-top: 2px solid rgb(90, 90, 90);
-moz-border-radius-bottomleft: 16px;
border-bottom-left-radius: 16px;
-moz-border-radius-bottomright: 16px;
border-bottom-right-radius: 16px;
position: relative;
margin-left: auto;
margin-right: auto;
}
.container {
width: 1555px;
margin: 0px auto;
}
.menu {
height: 60px;
float: left;
}
div.menu {
height: 60px;
}
div.menu a:first-child {
border-right: 0;
border-left: 0;
}
div.menu div {
list-style: none outside none;
float: left;
height: 60px;
text-align: center;
}
div.menu a {
display: block;
padding: 0 20px;
border-left: 1px solid rgba(255,255,255,0.1);
border-right: 1px solid rgba(0,0,0,0.1);
text-align: center;
line-height: 60px;
-webkit-transition-property: background;
-webkit-transition-duration: 700ms;
-moz-transition-property: background;
-moz-transition-duration: 700ms;
}
div.menu a:hover {
background: transparent none;
}
div.active a{
}
div.menu p:first
{
}
.leftwrapper {
width: 30.5%;
height: 60px;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#464646', endColorstr='#5a5a5a'); /* for IE */
background: -moz-linear-gradient(center bottom, rgb(70, 70, 70), rgb(90, 90, 90)) repeat scroll 0% 0% transparent;
background: -webkit-gradient(linear, center bottom, center top, from(rgb(70, 70, 70)), to(rgb(90, 90, 90)));
border-top: 2px solid rgb(90, 90, 90);
-moz-border-radius-bottomleft: 30px;
border-bottom-left-radius: 30px;
-moz-border-radius-bottomright: 30px;
border-bottom-right-radius: 30px;
position: relative;
margin-left: 3px;
margin-right: auto;
}
.leftcontainer {
width: 350px;
margin: 0px auto;
}
.leftmenu {
height: 60px;
float: left;
}
div.leftmenu {
height: 60px;
}
div.leftmenu a:first-child {
border-right: 0;
border-left: 0;
}
div.leftmenu div {
list-style: none outside none;
float: left;
height: 60px;
text-align: center;
}
div.leftmenu a {
display: block;
padding: 0 20px;
border-left: 1px solid rgba(255,255,255,0.1);
border-right: 1px solid rgba(0,0,0,0.1);
text-align: center;
line-height: 60px;
-webkit-transition-property: background;
-webkit-transition-duration: 700ms;
-moz-transition-property: background;
-moz-transition-duration: 700ms;
}
div.leftmenu a:hover {
background: transparent none;
}
div.active a{
}
div.menu p:first
{
}
.rightwrapper {
width: 32%;
height: 60px;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#464646', endColorstr='#5a5a5a'); /* for IE */
background: -moz-linear-gradient(center bottom, rgb(70, 70, 70), rgb(90, 90, 90)) repeat scroll 0% 0% transparent;
background: -webkit-gradient(linear, center bottom, center top, from(rgb(70, 70, 70)), to(rgb(90, 90, 90)));
border-top: 2px solid rgb(90, 90, 90);
-moz-border-radius-bottomleft: 30px;
border-bottom-left-radius: 30px;
-moz-border-radius-bottomright: 30px;
border-bottom-right-radius: 30px;
position: relative;
margin-left: 710px;
margin-top: -78px;
}
.rightcontainer {
width: 350px;
margin: 0px auto;
}
.rightmenu {
height: 60px;
float: left;
}
div.rightmenu {
height: 60px;
}
div.rightmenu a:first-child {
border-right: 0;
border-left: 0;
}
div.rightmenu div {
list-style: none outside none;
float: left;
height: 60px;
text-align: center;
}
div.rightmenu a {
display: block;
padding: 0 20px;
border-left: 1px solid rgba(255,255,255,0.1);
border-right: 1px solid rgba(0,0,0,0.1);
text-align: center;
line-height: 60px;
-webkit-transition-property: background;
-webkit-transition-duration: 700ms;
-moz-transition-property: background;
-moz-transition-duration: 700ms;
}
div.rightmenu a:hover {
background: transparent none;
}
div.active a{
}
div.menu p:first
{
}
.bottomwrapper {
width: 34.5%;
height: 60px;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#464646', endColorstr='#5a5a5a'); /* for IE */
background: -moz-linear-gradient(center bottom, rgb(70, 70, 70), rgb(90, 90, 90)) repeat scroll 0% 0% transparent;
background: -webkit-gradient(linear, center bottom, center top, from(rgb(70, 70, 70)), to(rgb(90, 90, 90)));
border-top: 2px solid rgb(90, 90, 90);
-moz-border-radius-bottomleft: 30px;
border-bottom-left-radius: 30px;
-moz-border-radius-bottomright: 30px;
border-bottom-right-radius: 30px;
margin-left: auto;
margin-right: auto;
position: relative;
}
.bottomcontainer {
width: 340px;
margin: 0px auto;
}
.bottommenu {
height: 60px;
float: left;
}
div.bottommenu {
height: 60px;
}
div.bottommenu a:first-child {
border-right: 0;
border-left: 0;
}
div.bottommenu div {
list-style: none outside none;
float: left;
height: 60px;
text-align: center;
}
div.bottommenu a {
display: block;
padding: 0 20px;
border-left: 1px solid rgba(255,255,255,0.1);
border-right: 1px solid rgba(0,0,0,0.1);
text-align: center;
line-height: 60px;
-webkit-transition-property: background;
-webkit-transition-duration: 700ms;
-moz-transition-property: background;
-moz-transition-duration: 700ms;
}
div.bottommenu a:hover {
background: transparent none;
}
div.active a{
}
div.menu p:first
{
}
#content {
text-align: center;
width: 1000px;
}
#footer {
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#464646', endColorstr='#5a5a5a'); /* for IE */
background: -moz-linear-gradient(center top , rgb(90, 90, 90), rgb(70, 70, 70)) repeat scroll 0% 0% transparent;
background: -webkit-gradient(linear, center top, center bottom, from(rgb(90, 90, 90)), to(rgb(70, 70, 70)));
border-top: 2px solid rgb(90, 90, 90);
-moz-border-radius-topleft: 16px;
border-top-left-radius: 16px;
-moz-border-radius-topright: 16px;
border-top-right-radius: 16px;
width: 1020px;
height: 29px;
padding-top: 20px;
margin: 0 auto;
margin-bottom: 0px;
text-align: center;
font-size: 10px;
font-family: Verdana;
color: #888888;
}
.yellow {
color: #ffe400;
}
.dedidetails {
font-family: Arial;
font-size : 12px;
line-height: 15px;
}
.mouse {
cursor: pointer;
}
.html,body {
overflow-x:hidden;
}
/*/////////
frontpage
/////////*/
#row1 div, #testservers, #row3 div {
padding: 32px 15px 5px 15px;
float: left;
font-size: 9px;
font-family: Verdana;
}
#row1 div {
width: 209px;
height: 169px;
margin: 5px 47px;
}
#row2 div {
float: left;
text-align: left;
height: 169px;
font-size: 9px;
}
.row2 {
width: auto;
float: left;
margin: 5px 19px;
}
#row3 .row3 {
text-align: left;
width: 365px;
height: 169px;
margin: 5px 52px;
}
#row3 .noc {
position: relative;
z-index: 50;
left: 300px;
top: 0px;
width: 75px;
height: 30px;
cursor: pointer;
margin: -30px 0 0 0;
padding: 0;
}
#row4 div {
float: left;
margin: 5px 44px;
}
/*//////////
frontpage noc, ads, lgsl & login
//////////*/
#testservers {
width: 209px;
margin: 5px 19px;
font-family: Verdana;
font-size: 9px;
}
#toptext {
padding: 6px 10px 6px 10px;
background-color: #242424;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
text-align: center;
}
#testservers ul{
display: block;
list-style: none;
}
#testservers ul li{
border-bottom: 1px solid #8c8c8c;
height: 26px;
}
#testservers img {
float: left;
}
#loginbox {
width: 222px;
padding: 32px 8px 5px 8px;
margin: 5px 19px;
}
#logintabs{
padding: 0px;
margin: 4px 0px;
margin-left: 4px;
}
#logintabs img{
padding: 0px;
margin: 0px;
float: none;
}
#logintabs li {
display: inline;
margin: 0px;
margin-left: -1px;
padding: 0px;
border: 0px;
}
#login{
margin: 0;
padding: 0;
}
#login img{
margin-top: 12px;
padding: 0;
}
#login p{
margin-left: 5px;
margin-top: 2px;
}
#login input{
background: url('images/login/input.png') no-repeat;
border: 0px;
width: 200px;
height: 19px;
padding: 0px 8px;
}
#row3 ul{
display: block;
list-style: none;
}
#row3 li{
border-bottom: 1px solid #8c8c8c;
height: 26px;
}
#row3 td{
border-bottom: 1px solid #8c8c8c;
height: 26px;
padding: 0px 0px 2px 0px;
}
.ads {
display: none;
}
/*///////////
gameserver page
///////////*/
#metascore{
background: url("images/gameservers/metascore.gif") no-repeat;
color: #8bc53f;
font-family: Arial;
font-size: 24px;
font-weight: 700;
height: 35px;
padding-right: 43px;
padding-top: 0px;
text-align: right;
width: 180px;
}
/*///////////
dediserver page
///////////*/
#dedis div {
width: 221px;
height: 266px;
margin: 5px 41px;
padding: 62px 15px 5px 15px;
float: left;
font-size: 9px;
font-family: Ariel, Verdana;
text-align: left;
color: #ffffff;
}
#dedis h2 {
margin-bottom: 3px;
}
#dedis2 div {
width: 221px;
height: 266px;
margin: 5px 41px;
padding: 52px 15px 5px 15px;
float: left;
font-size: 9px;
font-family: Ariel, Verdana;
text-align: left;
color: #ffffff;
}
#dediv .dedidetail {
position: relative;
z-index: 50;
left: 377px;
top: 46px;
width: 75px;
height: 29px;
cursor: pointer;
margin: -30px 0 0 0;
padding: 0;
}
#dediv .dedibuynow {
position: relative;
z-index: 50;
left: 377px;
top: 75px;
width: 75px;
height: 30px;
cursor: pointer;
margin: -30px 0 0 0;
padding: 0;
}
/*///////////
contactus & colocation page
///////////*/
#colo-box1{
/*text-align: justify; */
margin-left: 100px ;
width: 800px;
}
#colo-box2{
margin-left: 120px ;
width: 760px;
}
.colo-ul{
color: rgb(222, 222, 222);
list-style-type:square;
text-align: left;
list-style-position:outside;
margin-left: 450px;
}
h4 {
font-weight: 700;
font-size: 20px;
}
h5 {
color: rgb(255, 222, 0);
font-size: 16px;
}
#contactus {
width: 880px;
margin: 0px auto;
text-align: left;
margin-bottom: 20px;
}
.contactus {
background: url(images/contactus/inputbox-small.png) no-repeat;
width: 234px;
height: 23px;
border: none;
padding: 0px 6px;
margin: 4px 0px 6px 0px;
}
#snow {
background: url(images/snow.png) repeat-x;
position: fixed;
bottom: 0px;
color: white;
height: 20px;
width: 100%;
z-index: 92;
font-size: 20px;
}
a.sopa {
position: absolute;
background: url(/images/sopa.png) no-repeat 0 0;
text-indent: -9999px;
top: 126px;
display: block;
width: 546px;
height: 46px;
z-index: 1;
left: 50%;
margin-left: -273px;z
outline: none;
}
#test {
float:left;
margin-left:30px;
margin-top:25px;
margin-bottom:25px;
}
#test2 {
float:left;
margin-right:50px;
margin-left:10px;
margin-top:25px;
margin-bottom:25px;
height:225px;
width:405px;
}
#text {
float:left;
margin-left:160px;
margin-top:0px;
margin-bottom:50px;
}
.uppercon {
width: 1020px;
height: 355px;
background-color: #282828;
border-radius: 20px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
margin-bottom: 15px;
font-size: 15px;
margin-top: 0px;
}
.hotline {
padding: 0 20px;
width: auto;
margin: 0 auto;
border-top: 3px solid #212121;
display: block;
}
.line {
padding: 0 20px;
width: auto;
margin: 0 auto;
border-top: 3px solid rgba(255,255,255,0.1);
display: block;
}
.innerline {
padding: 0 20px;
width: auto;
margin: 0 auto;
border-top: 1px solid rgba(255,255,255,0.1);
display: block;
}
.lowercon {
width: 1020px;
height: 860px;
background-color: #282828;
border-radius: 20px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
padding-top: 20px;
margin-bottom: 20px;
}
.promotion-text {
width: 1020px;
height: 20px;
font-size: 15px;
border-bottom: 2px outset #ffffff;
}
.gameservers {
width: 240px;
height: 230px;
background-color: #141414;
border-radius: 20px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
padding-top: 5px;
margin-bottom: 20px;
margin-left: 20px;
float:left;
}
.latestnews {
width: 450px;
height: 230px;
text-align: center;
text-transform: uppercase;
background-color: #141414;
border-radius: 20px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
padding-top: 5px;
margin-bottom: 20px;
margin-left: 280px;
}
.dediservers {
width: 240px;
height: 230px;
background-color: #141414;
border-radius: 20px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
padding-top: 5px;
margin-bottom: 20px;
margin-left: 750px;
margin-top: -255px;
}
.login {
width: 240px;
height: 230px;
background-color: #141414;
border-radius: 20px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
padding-top: 5px;
margin-bottom: 20px;
margin-left: 20px;
float:left;
}
.noc {
width: 450px;
height: 230px;
text-align: center;
text-transform: uppercase;
background-color: #141414;
border-radius: 20px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
padding-top: 5px;
margin-bottom: 20px;
margin-left: 280px;
}
.teamspeak {
width: 240px;
height: 230px;
background-color: #141414;
border-radius: 20px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
padding-top: 5px;
margin-bottom: 20px;
margin-left: 750px;
margin-top: -255px;
}
.whyppp {
width: 975px;
height: 325px;
text-align: center;
text-transform: uppercase;
background-color: #141414;
border-radius: 20px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
padding-top: 0px;
margin-left: auto;
margin-right: auto;
}
.bar {
width: 1020px;
height: 120px;
font-size: 15px;
margin-top: 70px;
}
.ls {
width: 200px;
height: 145px;
float:left;
}
.ppp {
width: 200px;
height: 145px;
float:left;
margin-top: -130px;
margin-left: 385px;
margin-right: 250px;
}
.social {
width: 200px;
height: 145px;
float:left;
margin-top: 60px;
margin-bottom: -1035px;
margin-left: 800px;
}
