@charset "utf-8";
body {margin-top: 0;}

html {background: url('../images/crackedcement.png') repeat fixed #000; overflow: auto;
font-family: arial, veranda, sans-serif; font-size: 12px;
cursor: url('../images/knife.cur'), auto; height: 100%;}

#profile {width: 580px;
height: 0;
text-align: center;
display: table;
padding: 0;
margin: 10px auto 0;
border: solid 4px white;
-webkit-border-radius: 25px;
border-radius: 25px;
-webkit-box-shadow:  0 0 10px 6px #000;
box-shadow: 0 0 10px 6px #000;
background: url('../images/jsbcolorsbg2.png') repeat;
overflow: hidden;}

#header {width:1024px;
height:250px;
-webkit-border-radius:25px 25px 0 0;
border-radius:25px 25px 0 0;
text-align:center;
border-bottom:solid #FFF 4px;
padding-bottom:0;
background:url('../images/jsbheader3.png') no-repeat;
display: block;
overflow:hidden;}

.hidden {display: none;}

h1 {clear: both; background: #000; width: 75%; margin: 0 auto; font: 24px impact, sans-serif; text-align: center; color: white; text-decoration: none; text-transform: uppercase; border: 2px solid #FFF; -webkit-border-radius: 5px; border-radius: 5px;}

h3 {clear: both; font: bold 13px arial, helvetica, sans-serif; text-align: center; color: #FFF; text-decoration: none;}

h4 {font: bold 11px arial, helvetica, sans-serif; text-align: center; color: #F00; text-decoration: none; text-shadow: 0 0 4px #000;}
.roothead {clear: both; display: block; font: bold 11px arial, helvetica, sans-serif; color: #F00; margin: 0 auto; background: #000; width: 30%; text-align: center; text-decoration: none; text-transform: uppercase; border: 2px solid #F00; -webkit-border-radius: 5px; border-radius: 5px;}

hr {text-align: center;}

p {font: bold 11px arial, helvetica, sans-serif; padding-top: -1px; padding-left: 12px; padding-right: 12px; color: #FFF; text-align: justify; text-shadow: -1px -1px #000, 1px 1px #000;}

#tablepad {padding: 0 5px;}
table {border: 0; width: 100%;}
th {border: 2px solid white;}	
td {text-align: left; font: 10px veranda, sans-serif, arial; border: 1px solid white; color: white; background-color: black;}
.meminfo, .meminfoabout {background-color: #F4ce15; color: black; font: bold 11px veranda, sans-serif, arial; 
border: 1px solid black; text-decoration: underline; text-align: justify;}
.meminfoabout {text-transform: uppercase; text-align: center; font: bold 11px veranda, sans-serif, arial; border: 1px solid black; color: black; background-color: #F4ce15;}
.membackground {color: #FFF; text-align: justify; font-size: 10px;}
.memdetails, .memskills {font: bold 11px veranda, sans-serif, arial; color: white; background-color: black;}
.memskills {text-align: center;}
.memname, #memnameboom {text-transform: uppercase; text-align: center; font: 36px impact, veranda, sans-serif; border: 2px solid white; color: #F4ce15; background-color: #000;}
#memnameboom {font-size: 22px;}
.invis {border: 0; background: none; padding: 10px 0;}

#sidebar {width: 150px; border: solid 1px #FFF; text-align: left; margin: 4px 0 0 3px; position: absolute; background-color: #000; background-color: rgba(0,0,0,0.8)}
#sidebar a {width: 146px; height: 34px; display: block; text-align: center; margin: 0 auto;}

.navtab, .headertab {background: url('../images/jsb_buttons_header3.png') no-repeat;}

.navtab {width: 146px; height: 34px; display: block;}

#roleplaytab {background-position: -1px -1px;}
#whogangtab {background-position: -1px -36px;}
#gangmemtab {background-position: -1px -71px;}
#gangoptstab {background-position: -1px -106px;}
#gangrelationstab {background-position: -1px -141px;}
#gangrootstab {background-position: -1px -176px;}
#miscelltab {background-position: -148px -1px;}
#ooctab {background-position: -1px -211px;}
#gallerytab {background-position: -1px -246px;}
 
#whogangtab:hover {background-position: -148px -36px;}
#gangmemtab:hover {background-position: -148px -71px;}
#gangoptstab:hover {background-position: -148px -106px;}
#gangrelationstab:hover {background-position: -148px -141px;}
#gangrootstab:hover {background-position: -148px -176px;}
#ooctab:hover {background-position: -148px -211px;}
#gallerytab:hover {background-position: -148px -246px;}

#whogangtab:active {background-position: -295px -36px;}
#gangmemtab:active {background-position: -295px -71px;}
#gangoptstab:active {background-position: -295px -106px;}
#gangrelationstab:active {background-position: -295px -141px;}
#gangrootstab:active {background-position: -295px -176px;}
#ooctab:active {background-position: -295px -211px;}
#gallerytab:active {background-position: -295px -246px;}

#imgleft {width: 150px; height: 125px; display: block; background-color: red; float:left; margin-left: 5px; padding: 0 5px; border: solid 0 #FFF;}
#imgright {width: 150px; height: 125px; display: block; background-color: red; float:right; margin-right: 10px; padding: 0 5px; border: solid 0 #FFF;}
#imgcenter {width: 400px; height: 42px; display: block; background-color: transparent; margin: 0 auto; text-align: center; border: solid 1px #FFF;}

.headertab {display: block; margin: 0 auto; text-align: center;}

.headerborder {border: solid 2px #f4ce15; width: 500px; margin: 5px auto 0; padding: 5px 0; background: url('../images/asphalthead.png');
-webkit-border-radius: 25px;
border-radius: 25px;}

#whogangheader {width: 442px; height: 45px; background-position: -1px -352px;}
#gangmemheader {width: 246px; height: 48px; background-position: -1px -399px;}
#gangoptsheader {width: 225px; height: 49px; background-position: -1px -448px;}
#gangrelationsheader {width: 276px; height: 49px; background-position: -1px -498px;}
#gangrootsheader {width: 203px; height: 46px; background-position: -227px -450px;}
#galleryheader {width: 167px; height: 49px; background-position: -249px -400px;}
#oocheader {width: 365px; height: 49px; background-position: -1px -548px;}

#main {width: 100%; height: 480px; margin-left: 160px; overflow-y: hidden; margin-top: 4px; margin-bottom: 4px;}

#whogang, #gangmem, #operations, #relations, #gangroots, #ooc, #gallery {width: 850px; height: 478px; border: solid 1px #FFF; background-color: #000; background-color: rgba(0,0,0,0.8);}
#gangmem, #relations, #gangroots, #ooc, #gallery {overflow-y: auto;}

#small {font: bold 11px veranda, sans-serif, arial;}
#smallctr {text-align: center;}

#ooc {font: bold 11px veranda, sans-serif, arial; color: white;}
#ooc p {padding: 0 20px;}
#ooc ol {margin: 0; padding: 5px 10px 5px 40px; text-align: justify;}
#ooc li {margin-bottom: -5px; padding: 10px 5px 10px 5px; text-align: justify;}

#bottleimg {width: 154px; height: 125px; display: block; background-color: transparent; float:left; margin: -10px 0 0 5px; padding: 0 6px;}
#crowbarimg {width: 135px; height: 135px; display: block; background-color: transparent; float:right; margin: -5px 15px 0 0; padding: 0 0 0 6px;}

.phototitle {text-align: center;
font: bold 11px arial, helvetica, sans-serif;
color: white;
width: 120px;
margin: auto;}

.ally, .neutral, .enemy, .next, .subject, .quoted {font: bold 11px arial, helvetica, sans-serif; text-align: center; text-decoration: none; text-transform: uppercase;}

.ally, .exclnt {color: #0F0;}
.neutral, .avgr {color: #FF0;}
.enemy, .trble {color: #F00;}
.aver {color: #FF0}
.subject {color: #F00; text-decoration: underline;}
.quoted  {color: #F00; text-decoration: none; text-transform: none;}
.next {color: #FFF; text-decoration: none; text-transform: none;}

.thumbally, .thumbenemy, .thumbneutral {height: auto;
display: inline-block;
margin: 10px 5px;
width: 130px;
position: relative;}

.thumbboxally, .thumbboxenemy, .thumbboxneutral {display: block;
margin: auto;
margin-top: 3px;
margin-bottom: 3px;
width: 120px;
height: 90px;}

#allies, #enemies {display: block; 
margin: 0 auto; 
background: #000; 
width: 30%; 
font: bold 16px sans-serif, arial, helvetica; 
text-align: center; 
text-decoration: none; 
text-transform: uppercase; 
-webkit-border-radius: 5px; 
border-radius: 5px;}

#allies {color: #0F0; border: 2px solid #0F0;}
#enemies {color: #F00; border: 2px solid #F00;}

.top {margin-top: 10px;}
#allies.top {margin-top: 15px;}

.thumbs img {border: 2px solid #666;
margin: 0 auto;
display: inline-block;}

.thumbs img:hover {border: 2px solid #f4ce15;}

.thumbboxunknown {border: 1px dotted #FFF;}
.thumbboxally {border: 1px dotted #0F0;} 
.thumbboxenemy {border: 1px dotted #F00;}
.thumbboxneutral {border: 1px dotted #FF0;}

.thumbboxally:hover, .thumbboxneutral:hover, .thumbboxenemy:hover {border: 1px solid #FFF;}

#unknown, #riffs, #destroy, #turnbullacs, #orphans, #moonrun, #panzers, #furies, #saracens, #warriors, #eliminators {width: 120px; height: 90px; display: block; background: url('../images/relations_gangs.png') no-repeat;} 

#yukari {width: 120px; height: 90px; display: block; background: url('../images/relations_ally.png') no-repeat;}
#bobcat {width: 120px; height: 90px; display: block; background: url('../images/relations_enemy.png') no-repeat;}

#unknown {background-position: -1px -1px;}
#riffs {background-position: -122px -1px;}
#destroy {background-position: -243px -1px;}
#turnbullacs {background-position: -364px -1px;}
#orphans {background-position: -485px -1px;}
#moonrun {background-position: -1px -92px;}
#panzers {background-position: -122px -92px;}
#furies {background-position: -243px -92px;}
#saracens {background-position: -364px -92px;}
#warriors {background-position: -485px -92px;}
#eliminators {background-position: -1px -183px;}

#yukari {background-position: -1px -1px;} 
#bobcat {background-position: -243px -183px;}

#quote p {text-align: center;}
#p2 p {text-align: center;}

#sb-title-inner,#sb-info-inner,#sb-loading-inner,div.sb-message{font-family:"HelveticaNeue-Light","Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:200;color:#fff;}
#sb-container{position:fixed;margin:0;padding:0;top:0;left:0;z-index:999;text-align:left;visibility:hidden;display:none;}
#sb-overlay{position:relative;height:100%;width:100%;}
#sb-wrapper{position:absolute;visibility:hidden;width:100px;}
#sb-wrapper-inner{position:relative;border:2px solid #f4ce15;overflow:hidden;height:100px;}
#sb-body{position:relative;height:100%;}
#sb-body-inner{position:absolute;height:100%;width:100%;}
#sb-player.html{height:100%;overflow:auto;}
#sb-body img{border:none;}
#sb-loading{position:relative;height:100%;}
#sb-loading-inner{position:absolute;font-size:14px;line-height:24px;height:24px;top:50%;margin-top:-12px;width:100%;text-align:center;}
#sb-loading-inner span{background:url(loading.gif) no-repeat;padding-left:34px;display:inline-block;}
#sb-body,#sb-loading{background-color:#000;}
#sb-title,#sb-info{position:relative;margin:0;padding:0;overflow:hidden;}
#sb-title,#sb-title-inner{height:auto; line-height:26px; text-align: center;}
#sb-title-inner{font: 25px impact, sans-serif, arial; text-transform: uppercase; color: #FFF; text-shadow: #000 -1px 0, #000 0 1px, #000 1px 0, #000 0 -1px, #000 0 0 7px; filter: dropshadow(color=#000000, offx=1, offy=1);}
#sb-info,#sb-info-inner{height:20px;line-height:20px;}
#sb-info-inner{font-size:12px;}
#sb-nav{float:right;height:16px;padding:2px 0;width:45%;}
#sb-nav a{display:block;float:right;height:16px;width:16px;margin-left:3px;cursor:pointer;background-repeat:no-repeat;}
#sb-nav-close{background-image:url(close.png); margin-top: 5px;}
#sb-nav-next{background-image:url(next.png);}
#sb-nav-previous{background-image:url(previous.png);}
#sb-nav-play{background-image:url(play.png);}
#sb-nav-pause{background-image:url(pause.png);}
#sb-counter{float:left;width:45%;}
#sb-counter a{padding:0 4px 0 0;text-decoration:none;cursor:pointer;color:#fff;}
#sb-counter a.sb-counter-current{text-decoration:underline;}
div.sb-message{font-size:12px;padding:10px;text-align:center;}
div.sb-message a:link,div.sb-message a:visited{color:#fff;text-decoration:underline;}
#sb-info,#sb-info-inner{height: 56px; background: transparent; width: auto; margin-top: 0;}
#sb-caption {clear: both; font: 95% arial, veranda, sans-serif; height:auto; line-height:12px; text-align: justify; color:#fff; text-shadow: #000 -1px 0, #000 0 1px, #000 1px 0, #000 0 -1px, #000 0 0 7px; filter: dropshadow(color=#000000, offx=1, offy=1);}