<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<div class="row">
<div class="col-xs-6 col-sm-6 col-md-3 col-lg-3" style="max-height:1000px">
<!-- PRICE ITEM -->
<div class="panel price panel-red">
<div class="panel-heading text-center">
<h3>Hosts/Co-Hosts</h3>
</div>
<div class="panel-body text-center">
<p class="lead" style="font-size:20px"><strong>Handle/Promote Staff</strong></p>
</div>
<ul class="list-group list-group-flush text-center">
<li class="list-group-item"> SirLydian</li>
<li class="list-group-item"> Hoodini</li>
<li class="list-group-item"> The Tiger Psƴ Co</li>
</ul>
<div class="panel-footer">
</div>
</div>
<!-- /PRICE ITEM -->
</div>
<div class="col-xs-6 col-sm-6 col-md-3 col-lg-3">
<!-- PRICE ITEM -->
<div class="panel price panel-blue">
<div class="panel-heading arrow_box text-center">
<h3>Managers</h3>
</div>
<div class="panel-body text-center">
<p class="lead" style="font-size:20px"><strong>Manage bouncers<br>Move Users<br>Able to Permanent Ban</strong></p>
</div>
<ul class="list-group list-group-flush text-center">
<li class="list-group-item"> Lady Gaussian</li>
<li class="list-group-item"> PLURrzDiploMAC</li>
<li class="list-group-item"> NZRBL</li>
<li class="list-group-item"> TσσS†σɲє∂</li>
<li class="list-group-item"> Prophesier</li>
<li class="list-group-item"> Jerm</li>
</ul>
<div class="panel-footer">
</div>
</div>
<!-- /PRICE ITEM -->
</div>
<div class="col-xs-6 col-sm-6 col-md-3 col-lg-3" style="max-height:500px !important; overflow-y:scroll;">
<!-- PRICE ITEM -->
<div class="panel price panel-green">
<div class="panel-heading arrow_box text-center">
<h3>Bouncers</h3>
</div>
<div class="panel-body text-center">
<p class="lead" style="font-size:20px"><strong>Skip Songs<br>Temporary Ban</strong></p>
</div>
<ul class="list-group list-group-flush text-center">
<li class="list-group-item"> ♡Tσσ Li†♡</li>
<li class="list-group-item"> BelgianWaffll</li>
<li class="list-group-item"> BlueLeaf</li>
<li class="list-group-item"> BuddhΔ</li>
<li class="list-group-item"> Bεεmσ</li>
<li class="list-group-item"> Bєasт Оf Єdєп</li>
<li class="list-group-item"> ChillAndTrap</li>
<li class="list-group-item"> DΛЯØĊҚ</li>
<li class="list-group-item"> E1337</li>
<li class="list-group-item"> GhostlyT</li>
<li class="list-group-item"> iAsdf</li>
<li class="list-group-item"> Kℛ8TVE</li>
<li class="list-group-item"> losr</li>
<li class="list-group-item"> Notorious AFK</li>
<li class="list-group-item"> One Half</li>
<li class="list-group-item"> Pandi</li>
<li class="list-group-item"> PοllυxDzη</li>
<li class="list-group-item"> Soamer</li>
<li class="list-group-item"> SomeKindOfPig</li>
<li class="list-group-item"> Soulection</li>
<li class="list-group-item"> tac0</li>
<li class="list-group-item"> TxS_PRIME</li>
<li class="list-group-item"> Uη¢нø√ℯкα♭ℓℯ</li>
<li class="list-group-item"> Zöoly</li>
<li class="list-group-item"> Shaggy</li>
<li class="list-group-item"> ₮ЯỊⱢⱢ ϨῌØX</li>
<li class="list-group-item"> Lotus</li>
</ul>
<div class="panel-footer">
</div>
</div>
<!-- /PRICE ITEM -->
</div>
<div class="col-xs-6 col-sm-6 col-md-3 col-lg-3" style="max-height:500px !important; overflow-y:scroll;">
<!-- PRICE ITEM -->
<div class="panel price panel-grey">
<div class="panel-heading arrow_box text-center">
<h3>Resident DJs</h3>
</div>
<div class="panel-body text-center">
<p class="lead" style="font-size:20px"><strong>2k Soundcloud Followers<br>Noteable People<br>Move To 1 For New Tracks</strong></p>
</div>
<ul class="list-group list-group-flush text-center">
<li class="list-group-item"> N¡gh†m∆resAnd8Ø8s</li>
<li class="list-group-item"> 8ersofficial</li>
<li class="list-group-item"> Aero Chord</li>
<li class="list-group-item"> 8ersofficial</li>
<li class="list-group-item"> AEYEZ</li>
<li class="list-group-item"> AllTrapNation</li>
<li class="list-group-item"> Alter_Natives</li>
<li class="list-group-item"> AnunnakiCrown</li>
<li class="list-group-item"> Apex Rise</li>
<li class="list-group-item"> Arman Cekin</li>
<li class="list-group-item"> AutoLaser</li>
<li class="list-group-item"> Baewatch</li>
<li class="list-group-item"> Bass Nation</li>
<li class="list-group-item"> beckdevito</li>
<li class="list-group-item"> BISHU</li>
<li class="list-group-item"> BLVK SHEEP</li>
<li class="list-group-item"> BOM-TRVDY</li>
<li class="list-group-item"> BowieOfficial</li>
<li class="list-group-item"> Browski</li>
<li class="list-group-item"> brxxk</li>
<li class="list-group-item"> C11Beatz</li>
<li class="list-group-item"> ChillNation</li>
<li class="list-group-item"> COMED TRAP</li>
<li class="list-group-item"> Da Vosk Docta</li>
<li class="list-group-item"> Delay</li>
<li class="list-group-item"> DIVERSA</li>
<li class="list-group-item"> DJ CICK</li>
<li class="list-group-item"> Duskus</li>
<li class="list-group-item"> EkaliEkali</li>
<li class="list-group-item"> Far East Movement</li>
<li class="list-group-item"> Finfet</li>
<li class="list-group-item"> FLAGZ</li>
<li class="list-group-item"> FoggyLondon</li>
<li class="list-group-item"> FVCKDIVMONDS</li>
<li class="list-group-item"> GAWTBASS</li>
<li class="list-group-item"> Goon Bags</li>
<li class="list-group-item"> GRAV3ROBBA</li>
<li class="list-group-item"> GUARD1AN</li>
<li class="list-group-item"> Illenium</li>
<li class="list-group-item"> JayKode</li>
<li class="list-group-item"> JustTrapMusic</li>
<li class="list-group-item"> JＯＵＲＮＡL</li>
<li class="list-group-item"> K Theory</li>
<li class="list-group-item"> Kasbo</li>
<li class="list-group-item"> KonsoL</li>
<li class="list-group-item"> KRYLON</li>
<li class="list-group-item"> lilbeatofficial</li>
<li class="list-group-item"> LNKZ</li>
<li class="list-group-item"> LVX</li>
<li class="list-group-item"> MajorLeagueWobs</li>
<li class="list-group-item"> Matstubs</li>
<li class="list-group-item"> Micro</li>
<li class="list-group-item"> Mooley</li>
<li class="list-group-item"> MoonBeat</li>
<li class="list-group-item"> MusicDaily</li>
<li class="list-group-item"> Mutrix</li>
<li class="list-group-item"> NorRasta</li>
<li class="list-group-item"> Noxive</li>
<li class="list-group-item"> obei</li>
<li class="list-group-item"> OhhhGawd</li>
<li class="list-group-item"> Onderkoffer</li>
<li class="list-group-item"> Openwater</li>
<li class="list-group-item"> phlarft</li>
<li class="list-group-item"> PolarYouth</li>
<li class="list-group-item"> PRISTINE</li>
<li class="list-group-item"> RED CØFFINS</li>
<li class="list-group-item"> Sammie Beats</li>
<li class="list-group-item"> Saturn</li>
<li class="list-group-item"> shoestring</li>
<li class="list-group-item"> Simtem</li>
<li class="list-group-item"> Snavs</li>
<li class="list-group-item"> solowtrapshit</li>
<li class="list-group-item"> Space Race</li>
<li class="list-group-item"> StatikLink</li>
<li class="list-group-item"> SweetTeeth</li>
<li class="list-group-item"> Sykotix</li>
<li class="list-group-item"> T-Mass</li>
<li class="list-group-item"> The Dub Rebellion</li>
<li class="list-group-item"> THETOPGEARDOG</li>
<li class="list-group-item"> Tomsize</li>
<li class="list-group-item"> Trap City</li>
<li class="list-group-item"> TrapPanda</li>
<li class="list-group-item"> Tyrian_GD</li>
<li class="list-group-item"> uAnimals</li>
<li class="list-group-item"> uniqueme</li>
<li class="list-group-item"> VΛNILLΛ TRΛP</li>
<li class="list-group-item"> XVII</li>
<li class="list-group-item"> Yedgar</li>
<li class="list-group-item"> E S T R O</li>
<li class="list-group-item"> NuckingFutz</li>
</ul>
<div class="panel-footer">
</div>
</div>
<!-- /PRICE ITEM -->
</div>
</div>
</div>
@import url("http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css");
@import url("http://fonts.googleapis.com/css?family=Roboto:400,300,700italic,700,500&subset=latin,latin-ext");
body {
padding-top: 40px;
padding-bottom: 40px;
}
/* COMMON PRICING STYLES */
.panel.price,
.panel.price>.panel-heading{
border-radius:0px;
-moz-transition: all .3s ease;
-o-transition: all .3s ease;
-webkit-transition: all .3s ease;
}
.panel.price:hover{
box-shadow: 0px 0px 30px rgba(0,0,0, .2);
}
.panel.price:hover>.panel-heading{
box-shadow: 0px 0px 30px rgba(0,0,0, .2) inset;
}
.panel.price>.panel-heading{
box-shadow: 0px 5px 0px rgba(50,50,50, .2) inset;
text-shadow:0px 3px 0px rgba(50,50,50, .6);
}
.price .list-group-item{
border-bottom-:1px solid rgba(250,250,250, .5);
}
.panel.price .list-group-item:last-child {
border-bottom-right-radius: 0px;
border-bottom-left-radius: 0px;
}
.panel.price .list-group-item:first-child {
border-top-right-radius: 0px;
border-top-left-radius: 0px;
}
.price .panel-footer {
color: #fff;
border-bottom:0px;
background-color: rgba(0,0,0, .1);
box-shadow: 0px 3px 0px rgba(0,0,0, .3);
}
.panel.price .btn{
box-shadow: 0 -1px 0px rgba(50,50,50, .2) inset;
border:0px;
}
/* green panel */
.price.panel-green>.panel-heading {
color: #fff;
background-color: #57AC57;
border-color: #71DF71;
border-bottom: 1px solid #71DF71;
}
.price.panel-green>.panel-body {
color: #fff;
background-color: #65C965;
}
.price.panel-green>.panel-body .lead{
text-shadow: 0px 3px 0px rgba(50,50,50, .3);
}
.price.panel-green .list-group-item {
color: #333;
background-color: rgba(50,50,50, .01);
font-weight:600;
text-shadow: 0px 1px 0px rgba(250,250,250, .75);
}
/* blue panel */
.price.panel-blue>.panel-heading {
color: #fff;
background-color: #608BB4;
border-color: #78AEE1;
border-bottom: 1px solid #78AEE1;
}
.price.panel-blue>.panel-body {
color: #fff;
background-color: #73A3D4;
}
.price.panel-blue>.panel-body .lead{
text-shadow: 0px 3px 0px rgba(50,50,50, .3);
}
.price.panel-blue .list-group-item {
color: #333;
background-color: rgba(50,50,50, .01);
font-weight:600;
text-shadow: 0px 1px 0px rgba(250,250,250, .75);
}
/* red price */
.price.panel-red>.panel-heading {
color: #fff;
background-color: #D04E50;
border-color: #FF6062;
border-bottom: 1px solid #FF6062;
}
.price.panel-red>.panel-body {
color: #fff;
background-color: #EF5A5C;
}
.price.panel-red>.panel-body .lead{
text-shadow: 0px 3px 0px rgba(50,50,50, .3);
}
.price.panel-red .list-group-item {
color: #333;
background-color: rgba(50,50,50, .01);
font-weight:600;
text-shadow: 0px 1px 0px rgba(250,250,250, .75);
}
/* grey price */
.price.panel-grey>.panel-heading {
color: #fff;
background-color: #6D6D6D;
border-color: #B7B7B7;
border-bottom: 1px solid #B7B7B7;
}
.price.panel-grey>.panel-body {
color: #fff;
background-color: #808080;
}
.price.panel-grey>.panel-body .lead{
text-shadow: 0px 3px 0px rgba(50,50,50, .3);
}
.price.panel-grey .list-group-item {
color: #333;
background-color: rgba(50,50,50, .01);
font-weight:600;
text-shadow: 0px 1px 0px rgba(250,250,250, .75);
}
/* white price */
.price.panel-white>.panel-heading {
color: #333;
background-color: #f9f9f9;
border-color: #ccc;
border-bottom: 1px solid #ccc;
text-shadow: 0px 2px 0px rgba(250,250,250, .7);
}
.panel.panel-white.price:hover>.panel-heading{
box-shadow: 0px 0px 30px rgba(0,0,0, .05) inset;
}
.price.panel-white>.panel-body {
color: #fff;
background-color: #dfdfdf;
}
.price.panel-white>.panel-body .lead{
text-shadow: 0px 2px 0px rgba(250,250,250, .8);
color:#666;
}
.price:hover.panel-white>.panel-body .lead{
text-shadow: 0px 2px 0px rgba(250,250,250, .9);
color:#333;
}
.price.panel-white .list-group-item {
color: #333;
background-color: rgba(50,50,50, .01);
font-weight:600;
text-shadow: 0px 1px 0px rgba(250,250,250, .75);
}
