/******************************
    File: main.css

    Main stylesheet.
    Convert width to 960
******************************/

/***********************************RESET***********************************/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0}table{border-collapse:collapse;border-spacing:0}fieldset,img{border:0}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal}ol,ul{list-style:none}caption,th{text-align:left}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}q:before,q:after{content:''}abbr,acronym{border:0}

/***********************************MAIN***********************************/

html, body {
    font-family: Helvetica,Arial,sans-serif;
    font-size: 14px;
    color: #333;
    background: url("/images/bodytile.jpg") repeat scroll center top #013559;
}

*[type="hidden"] {
    display: none;
}

.hidden {
    display:none;
}

acronym[title] {
    text-decoration: none !important;
}

blockquote {margin: 1em 5em 0 2em;}

#page {
    min-width: 900px;
    max-width: 100%;
    overflow: hidden;
    background: url('/images/bodytile.jpg') repeat top center;
    position:relative;

}

h1        {vertical-align: middle;}
input    {outline: 0 none;}

big            {font-size: 1.2em;}
small        {font-size: .8em; font-weight: normal;}
small>small    {font-size: .6em; top: -2px; position:relative;}

sup            {vertical-align:.3em;}
sub            {vertical-align:-.3em;}

p             {margin-bottom: .5em;}

a                     {color:#fff; text-decoration:none; cursor: pointer;}
a:hover                {color:#acf; text-decoration:underline;}

.white {color: #FFF;}

.table    {display: table;}
.row    {display: table-row;}
.cell    {display: table-cell;}

strong,b {font-weight: bold}

#mainbody, #welcomebody, .mainbody {
    background-image: url('/images/bodygrad.png');
    background-repeat: repeat-x;
}

#mainbody a, #welcomebody a, .mainbody a            {color:#036; text-decoration:none;}
#mainbody a:hover, #welcomebody a:hover, .mainbody a:hover    {color:#369; text-decoration:underline;}

#main-content, #search-content {clear:both;}

.container {
    width:900px;
    margin: 0 auto;
}
#account {
    float:right;
    display: inline-block !important;
}

.clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
    float: none !important;
    clear:both !important;
    height:0 !important;
    font-size: 1px !important;
    line-height: 0px !important;
    background: none !important;
    width: 0px !important;
}
.navBG {
    background: url('/images/bodybg.jpg') #FFF repeat-x top center;
    height: 90px;
    position: relative;
    z-index: 51;
}

#branding {
    margin: 0 -30px 0 -50px;
    width: 261px;
    height: 91px;
    display: block;
    background: url('/images/logo.png') no-repeat;
    float:left;
}

#branding a {
    display: block;
    width: 126px;
    height: 66px;
    position: relative;
    top: 12px;
    left: 53px;
    text-indent: -9999px;
}

#swirl {
    float:right;
    height:105px;
    width: 202px;
    margin: 0 -120px -15px 2em;
    background: url('/images/swirl.png') transparent no-repeat top right;
}

#social_media a:hover img {
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -ms-border-radius: 3px;
    -o-border-radius: 3px;
    border-radius: 3px;
    background-color:#FFF;
}

#navi {
    float: left;
    display: inline;
    width: 600px;
    position: relative;
    font-size: 16px;
    height: 90px;
}

#navi a {
    display: inline-block;
    font-weight: bold;
    color: #000;
    height: 90px;
    cursor: pointer;
}

#navi a span {
    display: inline-block;
    padding: 60px 1em 0 1em;
}

#navi>li {
    display:inline-block;
    float:left;
}

#navi>li:hover>a, #navi>li.current-page>a    {background: url('/images/nav_hover.png') no-repeat bottom center; position: relative; z-index: 50;}

#navi .current-page a {
    color: #06A;
    text-decoration: none;
}
#navi a:hover {
    color: #09F;
    text-decoration: none;
}

#subnav {
    position: relative;
    z-index: 50;
    width: 100%;
    text-align: center;
    height: 25px;
    margin-top: -44px;

    padding-top: 25px;
    background: url('/images/subnavbg.png') repeat top center;
}

#subnav.expanded {
    margin-top: 0px;
}

#subnav ul {
    clear:both;
    position:absolute;
    left: 50%;
    display:none;
}
#subnav li {
    display: inline-block;
}

#subnav a {
    color: #FFFFFF;
    display: inline-block;
    font-size: 12px;
    font-weight: bold;
    height: 25px;
    line-height: 25px;
    padding: 0 20px;
    text-align: center;
    text-transform: uppercase;
}

#subnav a:hover {
    text-decoration: none;
    background-color: #000;
    background-color: rgba(0,0,0,.6);
}

#subLeaderboard li .description {
    display:none;
    background-color: #000;
    background-color: rgba(0,0,0,.9);
    position: absolute;
    left:0;
    text-align: left;
    padding: 10px;
    border-radius: 0 0 10px 10px;
    -moz-border-radius: 0 0 10px 10px;
    -webkit-border-radius: 0 0 10px 10px;
    color: #FFF;
    font-size: .9em;
}

.mainBG {
    background: url('/images/darkbg.jpg') repeat-x top center;
    padding-top: 100px;
}

.mainBG.shiftdown {
    padding-top: 300px;
}

#mainbody, #welcomebody, .mainbody {
    background-color: #FFF;
    color: #333;
    padding: 10px;
}

#welcomebody {
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
}

img.avatar {
    width: 30px;
    height: 30px;
}

#countrybox {
    display:none;
    position:absolute;
    z-index:2;

    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    padding: 5px;
    background-color: #8AC;
    margin-top: 10px;
}

.hoveralt .hovered, .hoveralt:hover .standard    {display: none;}
.hoveralt:hover .hovered                        {display: inline-block;}

.hoveralt.reserve .standard, .hoveralt.reserve .hovered            {display: block;}
.hoveralt.reserve .hovered, .hoveralt.reserve:hover .standard    {visibility: hidden; height: 0;}
.hoveralt.reserve:hover .hovered                                 {visibility: visible; height: auto;}


.shadow {
    box-shadow: 0 5px 10px #000;
    -moz-box-shadow: 0 5px 10px #000;
    -webkit-box-shadow: 0 5px 10px #000;
}

.softshadow {
    box-shadow:0 1px 5px rgba(0,0,0,.5);
    -moz-box-shadow: 0 1px 5px rgba(0,0,0,.5);
    -webkit-box-shadow: 0 1px 5px rgba(0,0,0,.5);
    margin-bottom: 2px;
}

/**********ps3_leaderboard********/
div.searchbar {
    width: 880px;
    margin: -40px -10px 5px -10px;
    background-color: #09F;
    padding: 5px 10px;
    height:27px;
}

div.searchbar>div {width: 50%; float: left;}
div.searchbar>div.search {float: right;}
div.searchbar>div.search #searchid, div.searchbar>div.search input[type="submit"] {
    float:right;
    margin-top:2px;
}
div.searchbar>div.search #searchgame {
    float:right;
    margin-top:3px;
    margin-right:5px;
}
div.searchbar>div.search #searchtype {
    float:right;
    text-align:left;
    padding-left:5px;
    padding-right:1px;
    font-size:.8em;
    font-weight:normal;
    color:#fff;
}

div.searchbar input[type="text"] {height: 20px; width: 250px;}

.leaderboard-name {
    color: #FFF;
    font-size: 16px;
    font-weight: bold;
    line-height: 24px;
}
.leaderboard-name>span {font-weight:lighter; color:#DEF;}

.ps3_leaderboard {
    border: 1px solid #666;
    width:100%;
    font-weight:bold;
}
.ps3_leaderboard tr            {height: 39px;} /*1 px less for border*/

.ps3_leaderboard th li         {list-style: none; display:inline;}
.ps3_leaderboard th            {border-bottom: 1px solid #CCC; background:url('/images/headergradient.png') repeat-x #FFF top left;color: #333 !important; font-weight: bold;}
.ps3_leaderboard th a          {color: #333 !important; font-weight: bold;}
.ps3_leaderboard th a:hover    {color: #888 !important; text-decoration:none !important;}

.ps3_leaderboard th.asc>div,    .ps3_leaderboard th.desc>div,
.filter-row a.asc,                .filter-row a.desc,
.asc .sorttext,                    .desc .sorttext,
.sort-row a.asc,                .sort-row a.desc
{
    padding-left: 12px;
}

.ps3_leaderboard th.asc>div,.asc .sorttext,.filter-row a.asc,.sort-row a.asc        {background: url('/images/asc.gif') no-repeat center left;}
.ps3_leaderboard th.desc>div,.desc .sorttext,.filter-row a.desc,.sort-row a.desc    {background: url('/images/desc.gif') no-repeat center left;}

.ps3_leaderboard th,.ps3_leaderboard td {text-align:center; padding: 0 5px;}

.ps3_leaderboard th#head_crank+#head_rank>div, .ps3_leaderboard th#head_level>div, .ps3_leaderboard th#head_points>div {padding-left: 0; background: transparent;}
.ps3_leaderboard.game_board td{padding: 5px 0;}

th#head_title {text-align: left;}
th#head_difficulty {text-align: center;}

.sorticon {
    display:inline-block;
    text-indent: -9999px;
    overflow:hidden;
    background-image: url('/images/headersprite.png');
    background-repeat: no-repeat;
    height:20px;
}

.sorticon.rarity {
    background-image: url('/images/raritysprite.png?v2');
}

#sortCRankFlag        {width:16px; position: absolute;margin-top: 3px;z-index: 0;}
#sortCRank            {width:18px; background-position: -207px 0; position: relative;}
#sortRank,.sortRank            {width:12px;}
#sortCountry        {width:16px; background-position: -14px 0;}
#sortAvatar            {width:20px; background-position: -32px 0;}
#sortLevel            {width:18px; background-position: -56px 0;}
#sortBronze, .sortBronze            {width:18px; background-position: -76px 0;}
#sortSilver, .sortSilver            {width:18px; background-position: -97px 0;}
#sortGold, .sortGold            {width:18px; background-position: -118px 0;}
#sortPlatinum, .sortPlatinum        {width:18px; background-position: -139px 0;}
#sortTotal, .sortTotal            {width:21px; background-position: -162px 0;}
#sortPoints, .sortPoints            {width:16px; background-position: -230px 0;}
#sortComplete        {width:13px; background-position: -309px 0;}
#sortIncomplete        {width:13px; background-position: -295px 0;}
#sortRatio            {width:20px; background-position: -271px 0;}

#sortSonyCommon
{
    width:21px;
    background-image: url('/images/sony_common_20.png');
}
#sortSonyRare
{
    width:21px;
    background-image: url('/images/sony_uncommon_20.png');
}
#sortSonyVeryRare
{
    width:21px;
    background-image: url('/images/sony_rare_20.png');
}
#sortSonyUltraRare
{
    width:21px;
    background-image: url('/images/sony_ultra_rare_20.png');
}

#sortGimme            {width:21px; background-position: 0 0;}
#sortUncommon        {width:21px; background-position: -24px 0;}
#sortChallenging    {width:21px; background-position: -48px 0;}
#sortSkillz            {width:21px; background-position: -72px 0;}
#sortHeadaches        {width:21px; background-position: -96px 0;}
#sortRare            {width:21px; background-position: -120px 0;}
#sortPrestige        {width:21px; background-position: -144px 0;}

.title #sortGimme            {width:21px; background-position: 0 -2px;}
.title #sortUncommon        {width:21px; background-position: -24px -2px;}
.title #sortChallenging        {width:21px; background-position: -48px -2px;}
.title #sortSkillz            {width:21px; background-position: -72px -2px;}
.title #sortHeadaches        {width:21px; background-position: -96px -2px;}
.title #sortRare            {width:21px; background-position: -120px -2px;}
.title #sortPrestige        {width:21px; background-position: -144px -2px;}

#sortNumPlayed         {width:13px; background-position: -251px 0;}
#sortNumComplete    {width:21px; background-position: -272px 0;}

tr.evenrow, tr.even                                {background-color: #E8E8E8}
tr.oddrow, tr.odd                                {background-color: #DDD}

tr.evenrow.light, tr.even.light                    {background-color: #FFF}
tr.oddrow.light, tr.odd.light                    {background-color: #F8F8F8}

tr.evenrow.unearnedrow, tr.even.unearnedrow        {background-color: #EEE8E0}
tr.oddrow.unearnedrow, tr.odd.unearnedrow        {background-color: #E8DDD8}

tr.evenrow.cheater, tr.even.cheater, tr.even.impossible   {background-color: #FEE}
tr.oddrow.cheater, tr.odd.cheater, tr.odd.impossible    {background-color: #EDD}

tr.evenrow.nolongerpossible, tr.even.nolongerpossible   {background-color: #FFE0B3}
tr.oddrow.nolongerpossible, tr.odd.nolongerpossible    {background-color: #FFD699}

tr.evenrow.unobtainable, tr.even.unobtainable   {background-color: #FFFEEE}
tr.oddrow.unobtainable, tr.odd.unobtainable    {background-color: #EEEDDD}

tr.evenrow.hid, tr.even.hid               {background-color: #f5ef53}
tr.oddrow.hid, tr.odd.hid                 {background-color: #e4de42}

tr.tablerow:hover                    {background-color: #CEF;}
tr.tablerow.cheater:hover            {background-color: #FBC;}

tr.tablerow                       {line-height: .9em;}
.tablerow td                      {padding-left:5px !important; padding-right:5px !important;}

#selectedrow .avatar img.avatar {
    width: 40px;
    height: 40px;
    margin: 10px 0;
}
#selectedrow .rank, #selectedrow .psnid {
    font-size: 1.3em !important;
}
#selectedrow td, .selectedrow {
    background-color: #FFF !important;
}

.tablerow .rank            {font-size: 1.0em; border:0;}
.tablerow .rank.Zx1        {font-size: 1.5em;}
.tablerow .rank.Zx2        {font-size: 1.4em;}
.tablerow .rank.Zx3        {font-size: 1.3em;}
.tablerow .rank.Zx4        {font-size: 1.2em;}
.tablerow .rank.Zx5        {font-size: 1.1em;}

.tablerow .country+.rank {color: #888;}

.tablerow .psnid            {text-align: left; padding-left:5px; width:100%}
.tablerow .country img    {width: 16px; height: 10px;}

.tablerow .level            {padding-top:5px; min-width:58px;}
.tablerow .level big        {display:block; text-align:left;}
.tablerow .level>small    {position: relative; left: .3em;}

tr.tablerow:hover .subtotal {visibility: visible; height: auto;}

.bronze .subtotal,
.silver .subtotal,
.gold .subtotal,
.platinum .subtotal,
.total .subtotal
 {
    display:block;
    height: 0;
    overflow-y: hidden;
    visibility: hidden;
    font-size:11px;
    color: #555;
}

tr.tablerow:hover .bronze div,
tr.tablerow:hover .silver div,
tr.tablerow:hover .gold div,
tr.tablerow:hover .platinum div,
tr.tablerow:hover .total div
{
    background-color:#EEE;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    padding: 3px;
    margin: 0 -3px;
}

td.bronze,td.silver,td.gold,td.platinum {font-size:11px}

.bronze, .bronze a        {color: #C46438 !important}
.silver, .silver a        {color: #777 !important}
.gold, .gold a            {color: #C2903E !important}
.platinum, .platinum a    {color: #667FB2 !important}
.total                    {color: #999 !important;}

.rarity.gimmes            {color: #804124 !important; font-size:11px;}
.rarity.uncommon        {color: #994E2C !important; font-size:11px;}
.rarity.challenging        {color: #C46438 !important; font-size:.85em;}
.rarity.skillz            {color: #777 !important; font-size:.9em;}
.rarity.headaches        {color: #C2903E !important}
.rarity.rare            {color: #667FB2 !important; font-size:1.1em;}
.rarity.prestige        {color: #09F !important; font-size:1.1em;}

.average small            {font-weight: bold;}

.avg_perfect             {color: #9C0; font-size: 1.2em;}
.avg_great                {color: #6A0;}
.avg_good                  {color: #AA0;}
.avg_meh                    {color: #AA8;}
.avg_bad                    {color: #A60;}
.avg_sucky                 {color: #F00;}

td.gameimage {width: 140px;}
td.gametitle {text-align: left !important;}
td.gametitle {width: 100%;}
td.numplayed {font-weight: normal;}

td.complete                 {color:#D80;}
td.incomplete              {color:#820;}

td.rarity .zero         {color: #AAA;}

.progress_float {
    margin-left: 350px;
    margin-top: -20px;
    position: absolute;
    text-align: center;
}

.progresscontainer {
    border: 1px solid #CCC;
    background-color: #FFF;
    background-color: rgba(255,255,255,.8);
    padding: 2px;
    height: 6px;
    margin-top: 3px;
    text-align: left;
}

.small.progresscontainer {
    height: 2px;
    padding: 1px;
    background-color: transparent;
}

.medium.progresscontainer {
    height: 4px;
    width: 100px;
    padding: 1px;
    background-color: transparent;
}

.progresscontainer>div {
    max-width: 100%;
}

.partialprogressbar {
    background-color: #8CF;
    height: 100%;
}

.partialprogressbar.alt {
    background-color: #8CF;
    background-repeat: repeat-x;
    background-position: 0 0;
    background-size: 16px 8px;
    background-image: -webkit-linear-gradient(315deg,transparent,transparent 33%,rgba(0,0,0,0.12) 33%,rgba(0,0,0,0.12) 66%,transparent 66%,transparent);
    background-image: -moz-linear-gradient(315deg,transparent,transparent 33%,rgba(0,0,0,0.12) 33%,rgba(0,0,0,0.12) 66%,transparent 66%,transparent);
    background-image: -o-linear-gradient(315deg,transparent,transparent 33%,rgba(0,0,0,0.12) 33%,rgba(0,0,0,0.12) 66%,transparent 66%,transparent);
    background-image: linear-gradient(315deg,transparent,transparent 33%,rgba(0,0,0,0.12) 33%,rgba(0,0,0,0.12) 66%,transparent 66%,transparent);
    -webkit-animation: pb 0.8s linear 0 infinite;
}

.progressbar {
    background-color: #09F;
    height: 100%;
    min-width: 1px;
}

.stacked .progressbar {min-width: 0;}
.stacked.progresscontainer>DIV {display:inline-block;}

td.points {
    /*border-left: 1px solid #CCC;*/
    background-color: rgba(255,255,255,.3);
    white-space:nowrap;
}

.updateBorder {
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;

    border: 1px solid #6699CC;

    display: inline-block;

    position: absolute;
    left: 0;
    right: 0;

    margin: -250px auto 107px;
    width: 374px;
    padding: 3px;

    text-align: center;
}
.updateCenter {
       background-color: #000;
    display: block;
    height: 125px;
    overflow: hidden;
    padding: 10px;
    position: relative;
    text-align: center;

    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
}

#psninput {
    float: left;
    display:inline-block;
    text-align: center;
    color: #FFF;
/*    margin-top: 20px;*/
    min-width:355px;
}

#recent_profiles {
    float: left;
    display: inline-block;
    border-left: 1px solid #345;

    height: 125px;
    width: 120px;

    margin-left: 10px;
    padding-left: 10px;
    text-align: left;
    position:relative;

    color:#FFF;
    font-size:13px;
}

#recent_profiles a {
    display: block;
    color: #DEF;
    font-size: 11px;
}

#recent_profiles a:hover {
    color: #BCD;
}

#recent_profiles .title {
    border-bottom: 1px dashed #345;
    display: block;
    margin-bottom: 10px;
}

#recent_profiles .clearrecent {
    position: absolute;
    bottom: 0;
    right: 0;

    font-size: 8px;
    text-transform: uppercase;
    cursor: pointer;
}

#recent_profiles .clearrecent:hover {
    text-decoration:underline;
}

#update-loading {
    background-color: #000000;
    display: none;
    left: 5px;
    padding: 10px 0;
    position: absolute;
    top: 3px;
    width: 100%;
}

.flatbutton {
    cursor: pointer;

    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -ms-border-radius: 3px;
    -o-border-radius: 3px;
    border-radius: 3px;

    -webkit-user-select: none;
    font-family: arial,sans-serif;
    font-size: 11px;
    font-weight: bold;
    line-height: 11px;
    padding: 0 8px;
    text-align: center;
    height: 23px;
    margin-left: 5px;
    display: inline-block;
}

.flatbutton, .flatbutton:hover {text-decoration:none !important;}

.flatbutton.light {
    background-color: #F5F5F5;
    background-image: -webkit-gradient(linear,left top,left bottom,from(#f5f5f5),to(#f1f1f1));
    background-image: -webkit-linear-gradient(top,#f5f5f5,#f1f1f1);
    background-image: linear-gradient(top,#f5f5f5,#f1f1f1);
    background-image: -o-linear-gradient(top,#f5f5f5,#f1f1f1);
    border: 1px solid #222;
    border: 1px solid rgba(0, 0, 0, 0.1);
    color: #666 !important;
}

.flatbutton.medium {
    background-color: #79B;
    background-image: -webkit-gradient(linear,left top,left bottom,from(#68A),to(#8AC));
    background-image: -webkit-linear-gradient(top,#68A,#8AC);
    background-image: linear-gradient(top,#68A,#8AC);
    background-image: -o-linear-gradient(top,#68A,#8AC);
    border: 1px solid #369;
    border: 1px solid rgba(48, 96, 144, 0.3);
    color: #FFF;
}

.flatbutton.dark {
    background-color: #333;
    background-image: -webkit-gradient(linear,left top,left bottom,from(#333),to(#010101));
    background-image: -webkit-linear-gradient(top,#333,#010101);
    background-image: linear-gradient(top,#333,#010101);
    background-image: -o-linear-gradient(top,#333,#010101);
    border: 1px solid #DDD;
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #CCC;
}

.awebutton {
    -webkit-box-shadow: rgba(0, 0, 0, 0.199219) 0px 2px 4px 0px;
    box-shadow: rgba(0, 0, 0, 0.199219) 0px 2px 4px 0px;
    text-shadow: rgba(0, 0, 0, 0.398438) 0px 1px 0px;
    background-color: #369EC1;
    background-image: -webkit-linear-gradient(top, white, #80C1D8 2%, #369EC1);
    background-image:    -moz-linear-gradient(top, white, #80C1D8 2%, #369EC1);
    background-image:     -ms-linear-gradient(top, white, #80C1D8 2%, #369EC1);
    background-image:      -o-linear-gradient(top, white, #80C1D8 2%, #369EC1);
    background-image:         linear-gradient(to bottom, white, #80C1D8 2%, #369EC1);
    border: 1px solid #369EC1;
    border-radius: 8px;
    color: white !important;
    display: inline-block;
    font-family: 'Helvetica Neue', Helvetica, Arial, FreeSans, sans-serif;
    font-size: 16px;
    font-weight: bold;
    padding: 11px 25px;
    text-decoration: none;
    text-rendering: optimizelegibility;
}
.awebutton:hover {
    text-decoration:none;
}

#add-user-button  {
    padding: 0 14px;
    height: 28px;
    margin: 0px;
    font-weight: bold;

    -webkit-border-radius: 0 3px 3px 0;
    -moz-border-radius: 0 3px 3px 0;
    -ms-border-radius: 0 3px 3px 0;
    -o-border-radius: 0 3px 3px 0;
    border-radius: 0 3px 3px 0;
}

#add-user-button.loading {
    background-image: url('http://i.imgur.com/M6kXg.gif');
    background-repeat: no-repeat;
    background-position: 5px center;
}

#inputpsnid {
    background: rgba(255,255,255,.8);
    color: #333;
    border: 1px solid #FFF;

    -webkit-border-radius: 3px 0 0 3px;
    -moz-border-radius: 3px 0 0 3px;
    -ms-border-radius: 3px 0 0 3px;
    -o-border-radius: 3px 0 0 3px;
    border-radius: 3px 0 0 3px;

    width: 150px;
    padding: 6px;
    border-right: none;
}

#inputpsnid:focus {
    background: #EEE;
    color: #000;
}

#user_notice {color: #CCCCCC; line-height: 18px; padding-top: 15px; max-width:320px;}
#user_notice div {padding-left: 20px; display:inline-block}
#user_notice #error {background: url("/images/erroricon.png") no-repeat transparent;}
#user_notice #notice {background: url("/images/exclamationicon.png") no-repeat transparent;}

/**************PAGE***************/
/*.paginationLast {display:none}*/
.pagination {
    /*float:right;*/
    text-align: right;
    font-size: 11px;
    cursor: default;
}
.pagination ul, .pagination li, .game_alpha ul, .game_alpha li {
    list-style:none;
    margin-bottom: 2px;
    display:inline-block;
}
.pagination li a, .pagination li.currentpage {
    padding: 2px 2px 0 2px;
    margin: 0 2px;
    text-decoration: none !important;
    border-bottom: 2px solid transparent;
}
.pagination li.currentpage {border-bottom:2px solid #036;}
.pagination li a:hover {
    cursor: pointer;
    color: #FFF !important;
    text-decoration: none !important;
    background-color: #036;
}

.page_area.inner {padding-right: 16px;}

.game_alpha {
    position: relative;
    top: -30px;
    height: 20px;
    margin: 0 -10px -5px -10px;
    background-color: rgba(0,0,0,.6);
    border-radius: 5px 5px 0 0;
    -moz-border-radius: 5px 5px 0 0;
    -webkit-border-radius: 5px 5px 0 0;
}

#content-header {
    display:block;
    border-bottom: 1px solid #CCC;
    margin-bottom: 1em;
    padding: 0 11px;
}

#page-title {
    display:inline-block;
    font-size: 1.5em;
    width: 44%;
}

#page-title>* {
    display:inline-block;
}

.about-title-wrap {
    background: url("/images/subnavbg.png") repeat;
    padding: 5px 0 7px 0;
    margin: 45px 0 15px -10px;
    width: 900px;
}
#page-title.about {
    background: url("/images/bodybg.jpg") repeat-x;
    font-size: 2em;
       margin: 0;
    text-align: center;
    text-transform: uppercase;
    vertical-align: middle;
    width: 900px !important;
}

#about-content {line-height: 18px;}


#game-title {
    display:inline-block;
    font-size: 1.5em;
}

.breadcrumb {
    font-size: 11px;
    font-weight: normal;
    color: #999;
    margin: 5px 0;
}

#page-alt {
    display:inline-block;
    width: 55%;
    text-align: right;
}

#page-alt div {
    display: inline-block;
}

#page-alt .sort {
    font-size: 11px;
    text-align: left;
    height: 20px;
}

#page-alt .pagination {
    margin-left: 2em;
}

.filter {
    font-size: 8pt;
}

.filter input{
    position: relative;
    margin: 0 .2em;
    top: 3px;
}

.filter form, .filter label {display: inline}
.filter script {display: none}

.game_alpha li {text-align: center; height: 20px;}
.game_alpha a {display: block; color: #FFF !important; padding: .2em .6em; text-decoration: none !important;}
.game_alpha li.currentpage a, .game_alpha li:hover a {color: #FFF !important;}
.game_alpha li.currentpage {
    cursor:default;
    background-color: #09F !important;
}
.game_alpha li:hover {background-color:#07D;}
.game_alpha li.letter {width: 27px}

.otherLink.currentpage {padding-left: .6em !important; padding-right: .6em !important;}

.allLink {
    padding-left: 0 !important;
    padding-right: 0 !important;
    border-radius: 5px 0 0 0;
    -moz-border-radius: 5px 0 0 0;
    -webkit-border-radius: 5px 0 0 0;
}
.allLink a{padding-left: 2em !important; padding-right: 2em !important;}

.flaggloss {
    position: relative;
    background: url('/images/flaggloss.png') no-repeat top left;
    display: inline-block;
    width: 16px;
    height: 10px;
    margin-right: -16px;
}

h1>.flaggloss {
    margin-right: -20px;
}

/*****************GAMES*****************/
.options {
   background-color: #023;
   font-size: 15px;
}
.options li {
   background-color: #234;
   color: #9AB;
   border-radius: 4px 4px 0 0; -moz-border-radius: 4px 4px 0 0; -webkit-border-radius: 4px 4px 0 0;
   display: inline-block;
   margin-left:5px;
   padding:2px 15px;
   cursor:pointer;
   text-decoration:none;
}
.options li:hover {
    background-color:#7BE;
    color:white;
}

.options li.selected, .options li.selected:hover {
   background-color: #9AB;
   color: #333;
}

.gameTable {
    width: 100%;
}
.gameTable td{
    vertical-align: top;
    width: 23%;
    padding: 0 1% 2em 1%;
}

.gameTable td.inner {
    border-right: 1px solid #DDD;
}

.game-image-cell {
    background-color: #333;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    width: 140px;
    height: 77px;
    object-fit: contain;
}

#custom_leaderboard.user .game-image-cell {
    width: 85px;
    height: 46px;
}

.gamerow.complete .game-border {background-color: #8A5;}
.gamerow.hasplat .game-border {background-color: #58A;}

.gamerow.incomplete_data td.image-cell {border-left: 5px solid #FAA;}

.star_empty, .star_full {
    overflow: hidden;
    width: 70px;
    height: 14px;
    background: url('/images/starbar.png') no-repeat top right;
}
.star_full {
    background-position: 0 0 !important;
}

.gameHeadContainer {
    display:inline-block;
    background-color: #EEE;
    padding-right: 5px;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    height: 77px;
    margin-bottom: .5em;
    border: 2px solid #DDD;
}

.gameHeadSpace{
    float: left;
    display:inline-block;
    background-color: #999;
    padding-right: 2px;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    height: 77px;
    position:relative;
}

.statsTrophyTooltip {
    font-family:"Arial"
}

.statsTrophyTooltip, .gameTrophies {
    cursor: default;
    font-weight: bold;
    text-align: left;
    font-size:11px;
}

.gameTrophies {
    border: 1px solid #AAA;
    border-left: 0 none !important;
    width: 30px;
    height: 67px;
    padding: 5px 7px 3px 5px;
    float: left;
    margin: 0 -5px;
    border-radius: 0 5px 5px 0;
    -moz-border-radius: 0 5px 5px 0;
    -webkit-border-radius: 0 5px 5px 0;
}
.abstract>*                   {background: url('/images/smalltrophyabstract.png') no-repeat top left; min-width: 22px; margin-left: .3em; height: 12px; text-align: right; line-height: 12px;}
.abstract>.platinum           {background-position: left 0;}
.abstract>.gold               {background-position: left -12px;}
.abstract>.silver             {background-position: left -24px;}
.abstract>.bronze             {background-position: left -36px;}
.abstract>.total              {background-position: left -48px;}

.sprite>*                     {background: url('/images/smalltrophysprite.png') no-repeat top left; min-width: 8px; margin-left: 3px; height: 12px; text-align: right; line-height:11px;}
.sprite>.platinum             {background-position: left -3px;}
.sprite>.gold                 {background-position: left -19px;}
.sprite>.silver               {background-position: left -35px;}
.sprite>.bronze               {background-position: left -51px;}
.sprite>.total                   {background: none;}
.sprite>.tooltip              {padding-left:15px; margin-top:3px}

.trophy_totals .sprite>.total  {background: none; border-left: 1px solid #666; padding-left: 5px; font-weight: normal; font-size: 11px;}
.trophy_totals .sprite>*       {text-shadow:none; display: inline-block; margin-right: .3em; padding-left: 15px; width: auto; text-align: left; font-weight: bold;}

.real>*                       {background: url('/images/smalltrophyreal.png') no-repeat top left; padding-left: 20px; margin-left:.3em; height: 16px; line-height: 16px; text-align:right;}
.real>.platinum               {background-position: 0   2px;}
.real>.gold                   {background-position: 0 -16px;}
.real>.silver                 {background-position: 0 -32px;}
.real>.bronze                 {background-position: 0 -48px;}
.real>.total,.real>.filtertotal{background: none; padding-left: 0;}

.real.oneEM>*                            {height: 12px; padding-left: 16px;}
.real.oneEM>.platinum                      {background-position: 0   0px;}
.real.oneEM>.gold                       {background-position: 0 -18px;}
.real.oneEM>.silver                     {background-position: 0 -34px;}
.real.oneEM>.bronze                     {background-position: 0 -50px;}
.real.oneEM>.total,.real>.filtertotal    {background: none; padding-left: 0;}

.sprite>*>sub                  {color: #888 !important; font-size: 8pt; font-weight: normal;}

.abstract>.none,.sprite>.none,.real>.none  {opacity: .3;}
.platinum.none                               {visibility: hidden;}

.gameTrophies li.gameTotals, .tooltipTotals        {background: transparent !important;}

.gameTotals, .tooltipTotals {
    border-top: 1px solid #CCC;
}

.tooltipTotals {
    color:#555;
    padding-top:2px;
}

.gameTotals {
    margin-top: 0.4em;
    margin-left: 0.3em;
    text-align: right;
    color: #AAA;
}

.gameTitle .platinum {
    display: inline-block;
    width: 16px;
    height: 13px;
    background: url('/images/smalltrophyreal.png') no-repeat left 1px;
}

.gameCell .gameImage {float:left; display:inline-block; /*width: 170px;*/}
.gameCell .gameTitle {clear:both; margin-bottom: .5em; font-size: 12px;}

.gameTitle a, a.game-title {font-weight: bold; color: #333 !important;}
.gameTitle a:hover, a.game-title:hover {color: #369 !important;}

.gamePlayers, .gameDifficulty {font-size: .7em; color: #666;}
.difficultyPoints, .percent_complete {color: #999;}
.numcomplete {color: #C80;}

/************GAME DETAILS***************/
.page-table {
    margin: -10px;
}

.page-right {
    display:table-cell;
    vertical-align: top;
    /*width: 180px;*/
    padding-left: 10px;
}

.page-right>div {
    margin-right: 10px;
}

.page-left {
    display: table-cell;
    vertical-align: top;
    width: 100%;
    /*padding: 0 10px;*/
}

.page-header, #userPage {
    margin-top: -25px;
    border-radius: 15px 0 0 0;
    -moz-border-radius: 15px 0 0 0;
    -webkit-border-radius: 15px 0 0 0;
    background-color: #023;
}

.page-header>div {
    display: table-cell;
}

.page-header .gameTitleCell {vertical-align: bottom;}

.gameImage {
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
}
.page-header .gameImage{
    margin: 10px;
    height: 110px;
    background-color: #001118;
}

select {
    font-size: .9em;
}

.filter-row, .recent-trophies {
    text-align: right;
    font-size: 11px;
    background-color: #023;
    /*margin: 0 -10px 10px -10px;*/
}
.filter-row>div, .sort-row{
    padding: 2px 15px;
    background-color: #9AB;
    height: 18px;
    font-size: 11px;
    color: #333;
    font-weight: bold;
}

.gamesLeft .filter-row>div {
    padding:8px 15px 4px 15px;
}

.filter-row>div {
     border-radius: 0 20px 0 0;
    -moz-border-radius: 0 20px 0 0;
    -webkit-border-radius: 0 20px 0 0;
}

.recent-trophies>div.window {
    text-align: left;
    border-radius: 20px 0 0 0;
    -moz-border-radius: 20px 0 0 0;
    -webkit-border-radius: 20px 0 0 0;
    height: auto;
    color: #333;
    background-color: #456;
    padding: .5em .25em .5em .75em;
    /*overflow: hidden;     //needs to be disabled so the hover works */
}

table.recentTrophies {width: 100%}
table.recentTrophies td {width: 8.33%}

.filter-row>div .sort-area{
    float: right;
    margin-top: 4px;
}

.filter-row>div .sort-area a, .sort-row .sort-area a {
    cursor: pointer;
    color: #DDD !important;
}

.sort-area a:hover, .sort-area a.asc, .sort-area a.desc  {
    color: #FFF !important;
}

.filter-row>div .spoiler-area {
    float: left;
}

.filter-area, .sort-area, #displaySummary {
    font-weight:normal;
    display:table-cell;
}
.sort-area {text-align:right}
.userRight .sort-area {text-align:left}
.userRight .filter-area {text-align:right}
#displaySummary {text-align: center; font-weight:bold;}

.game-heading {
    color: #DDD;
    margin-right: 0;
}
.game-heading .average_completion, .game-heading .comp_completion {
    width: 125px;
    text-align: center;
    font-size: 11px;
    display: inline-block;
    padding: 10px;
}

.game-heading .progresscontainer {
    display:inline-block;
    background-color: #333;
    width: 75px;
    margin-bottom:2px;
}

#gamesHeader .page-right.useravatar {
    width: 210px;
    vertical-align: top;
    position: relative;
}

#gamesHeader .useravatar img{
    background-color: #001118;
    height: 110px;
    border-radius: 10px 10px 10px 10px;
}

#gamesHeader .useravatar img.plus {
    position: absolute;
    margin-left: -130px;
    margin-top: -15px;
    background: none;
    height: auto;
    width: 32px;
}

.section_content a.evenplayer, .section_content a.oddplayer {display: block; color: #FFF !important;font-size: 11px; width: 179px; margin: 0 -5px;}
.section_content a>div {display: inline-block; vertical-align: middle;}

/*.section_content .evenplayer {background-color: #444;}
.section_content .evenplayer:hover {background-color: #666;}
.section_content .oddplayer {background-color: #555;}
.section_content .oddplayer:hover {background-color: #777;}*/

div.tiny_av {padding: 5px; position: relative;}
div.tiny_av img.tiny_av {
    width: 40px;
    height:40px;
    background-color: #222;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    vertical-align: middle;
    cursor: pointer;
}

div.tiny_av img.plus {
    width: 16px;
    position: absolute;
    left: -5px;
    top: 0;
}

.section_content div {display:inline-block;}

.section_content .user_details {width: 115px; padding-left: 5px;}
.section_content .user_details .progresscontainer {width: 50%}
.section_content .user_details .psn_id {font-size: 1.2em; font-weight: bold}
.section_content .user_details .psn_id .small {font-size: 11px;}

.section_content a.evenplayer:hover, .section_content a.oddplayer:hover {text-decoration: none !important; cursor: default;}
.section_content a.evenplayer .psn_id:hover, .section_content a.oddplayer .psn_id:hover {text-decoration: underline !important; cursor: pointer}
.section_content .user_details .age {color: #CCC !important; cursor: text;}
.section {
    width: 179px;
    margin-bottom: 20px;
    box-shadow: 0 5px 10px #000;
    -moz-box-shadow: 0 5px 10px #000;
    -webkit-box-shadow: 0 5px 10px #000;
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
}

.section_head {
    border-radius: 3px 3px 0 0;
    -moz-border-radius: 3px 3px 0 0;
    -webkit-border-radius: 3px 3px 0 0;
    min-height: 1em;
    color: #ABC;
    padding: .5em;
    background-color: #234;
}

.section.collapsed .section_head, .section.expanded .section_head {
    cursor: pointer;
}

.section .section_head h3 {
    background-repeat: no-repeat;
    background-position: right center;
    padding-right: 16px;
}
.section.collapsed .section_head h3 {background-image: url('/images/desc_white.gif')}
.section.expanded .section_head h3 {background-image: url('/images/asc_white.gif')}

.section.half .section_content .lasthalf{
    display:none;
}
.section.collapsed .section_content {
    display: none;
}

.section_content {
    background-color: #384048;
    padding: 0 5px;
}

.gamesContent {display: table; width:100%}
.gamesRight {background-color: #023; color: #FFF; padding-top: 21px;}
.gamesLeft {background-color: #FFF;}
.gamesLeft #foot {padding: 10px; width: auto;}
#gamesHeader {display: table;}
#gamesHeader .page-left {width: auto;}
#gamesHeader .page-right {width: 100%; padding: 10px; vertical-align: top;}
.gamebreadcrumb {background-color:#023; height:25px; margin: 0px; font-size: 8pt; font-family: Verdana,Arial,Helvetica,sans-serif; color: #999;}
.gamebreadcrumb a{color: #bbb !important;}
.gamebreadcrumb * {display: inline-block; vertical-align: baseline;}

.gameDetailTitle {
    font-size: 18pt;
    color: #EEE;
    margin-bottom:5px;
}

.gameDetailTitle a {
    color: #EEE !important;
    line-height: 23px;
}

.gameDetailTitle div.sub {
    font-size: 11pt;
    margin-top: -5px;
    display: inline;
}

.gameDetailTitle div.main {
    margin-right: .2em;
    display: inline;
}
.game-heading .psn-id {
    color: #89A !important;
    font-size: 1.1em;
    margin-top: 4px;
}

.game-heading .trophy_totals {
    border-top: 1px dashed #89A;
    display: inline-block;
    padding-top: 3px;
}

.gameDetailTitle div {
    display:inline-block;
}

#game_details_table {width: 100%; border-bottom: 1px solid #CCC;}
#game_details_table td, .gamesLeft .date_earned {vertical-align: middle; font-weight: bold; font-size: 11px;}
#game_details_table .trophy_image {text-align: center; width: 75px; min-width:75px; padding: 5px;}

#game_details_table .trophy_title {padding: 2px;width:100%;/*min-width:326px;*/}
/*#game_details_table .unearned .trophy_title, #game_details_table .earned .trophy_title {min-width:395px;}*/
#game_details_table .trophyrare {padding: 0 5px;}

#game_details_table .percent_earned {width:45px;min-width:45px;}
#game_details_table .percent_earned , #game_details_table .percent_expand {padding: 0}

#game_details_table .trophy_title .description {font-weight: normal; font-size: 11px; padding-right: 10px;}

/*#game_details_table tr.trophyvalue3 .trophy_image img {width: 64px; height: 64px;}*/
#game_details_table .trophy_image img, .gameTrophyPreviewImage>img {
    width: 45px; height: 45px; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; display: inline-block; background-color: #333;
    box-shadow: 0 2px 5px #000;
    -moz-box-shadow: 0 2px 5px #000;
    -webkit-box-shadow: 0 2px 5px #000;
}

#game_details_table .earned .trophy_image img, #game_details_table tr.impossible .trophy_image img {
    box-shadow: none;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
}
#game_details_table .trophy_image img.alt {background-color: #999;}

.trophy-border, .game-border {
    display: inline-block;
    padding: 2px 2px 2px 10px;
    border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px;
}


#game_details_table tr.earned .trophy-border, #game_details_table tr.impossible .trophy-border {box-shadow: 0 2px 5px #000;-moz-box-shadow: 0 2px 5px #000;-webkit-box-shadow: 0 2px 5px #000;}

#game_details_table tr.earned.trophyvalue  .trophy-border {background-color: #333;}
#game_details_table tr.earned.trophyvalue0 .trophy-border {background-color: #C46438;}
#game_details_table tr.earned.trophyvalue1 .trophy-border {background-color: #777;}
#game_details_table tr.earned.trophyvalue2 .trophy-border {background-color: #C2903E;}
#game_details_table tr.earned.trophyvalue3 .trophy-border {background-color: #667FB2;}
#game_details_table tr.impossible .trophy-border {background-color: #F34;}
#game_details_table tr.unobtainable .trophy-border {background-color: #f49907;}

/*#game_details_table tr.earned .trophy-border {background-color: green;} */

#game_details_table .title .alt {color: #333 !important;}
#game_details_table .description .alt {color: #999 !important;}

#game_details_table.strict tr.spoiler .alt,
#game_details_table.strict tr.spoiler .description .alt,
#game_details_table.moderate tr.spoiler .description .alt                    {visibility:visible !important; height: auto !important;}
#game_details_table.strict tr.spoiler .title,
#game_details_table.strict tr.spoiler .gametitle,
#game_details_table.strict tr.spoiler .trophy-image.standard,
#game_details_table.strict tr.spoiler .description,
#game_details_table.moderate tr.spoiler .description .standard           {visibility:hidden; height: 0px; overflow-y: hidden;}

#game_details_table.moderate tr.spoiler .trophy-image.standard          {opacity: .3}

#game_details_table.trophies_earned tr.unearned                            {display:none}
#game_details_table.trophies_unearned tr.earned                            {display:none}

#game_details_table .percent_earned div.percent {
    background-color: #77BBEE;
    border-radius: 5px 0 0 5px;
    color: #FFFFFF;
    height: 16px;
    line-height: 18px;
    margin-top: -2px;
    padding: 2px;
    position: absolute;
    text-align: center;
    width: 45px;
}
#game_details_table .percent_expand div.expander {
   border-radius: 0 5px 5px 0;
    -moz-border-radius: 0 5px 5px 0;
    -webkit-border-radius: 0 5px 5px 0;
    padding: 2px 5px;
    height: 16px;
    background-color: #09F;
    line-height: 18px;

    position: absolute;
    margin-top: -2px;
}

#game_details_table div.expander_under {
    padding-left: 5px;
    font-weight:normal;
    height: 16px;
    padding: 3px 2px 2px 5px;
}

/*#game_details_table .date_earned {min-width: 120px}*/
.gamesLeft .date_earned {min-width: 100px}
.date_earned {text-align: center; width:25%;}
.date_earned .invalid, .dateearned .invalid {color: #A00;}
.date_earned .unavailable {color: #888; font-size: .8em;}
.date_earned .date {display:block;}
.date_earned .time {color: #888}
/*#game_details_table .date_earned .time .minute,#game_details_table .date_earned .time .second {font-size:11px;}*/

#game_details_table .percent_expand {width: 200px;min-width:200px; padding-right: 10px;}

.title.bronze,
.title.silver,
.title.gold,
.title.platinum {
        padding-left: 15px;
        height: 16px;
        line-height: 16px;
        background: url("/images/smalltrophyreal.png") no-repeat scroll 0 1px transparent;
}

.title.platinum        {background-position: 0 1px;}
.title.gold         {background-position: 0 -17px;}
.title.silver       {background-position: 0 -33px;}
.title.bronze       {background-position: 0 -49px;}

#game_details_table thead,
.sort {display: none;}

#game_details_table tr.dlc_header {
}
#game_details_table td.dlc_header {
    background-color:#002233;
    padding-top:20px;
}
#game_details_table div.dlc_header {
    padding:5px 10px;
    border-radius: 5px 5px 0 0;
    -moz-border-radius: 5px 5px 0 0;
    -webkit-border-radius: 5px 5px 0 0;
    -webkit-box-shadow: rgba(0, 0, 0, 0.199219) 0px 2px 4px 0px;
    box-shadow: rgba(0, 0, 0, 0.199219) 0px 2px 4px 0px;
    text-shadow: rgba(0, 0, 0, 0.398438) 0px 1px 0px;
    background-color: #369EC1;
    background-image: -webkit-linear-gradient(top, white, #369EC1 2%, #023);
    background-image:    -moz-linear-gradient(top, white, #369EC1 2%, #023);
    background-image:     -ms-linear-gradient(top, white, #369EC1 2%, #023);
    background-image:      -o-linear-gradient(top, white, #369EC1 2%, #023);
    background-image:         linear-gradient(to bottom, white, #369EC1 2%, #023);
    border: 1px solid #369EC1;
    color: white !important;
    font-family: 'Helvetica Neue', Helvetica, Arial, FreeSans, sans-serif;
    font-size: 14px;
    font-weight: bold;
    text-decoration: none;
    text-rendering: optimizelegibility;
}

.dlc_content {
    margin-left:10px;
    float:left;
    height:70px;
    max-width:500px;
}

.dlc_content .trophy_totals {
    border-top: 1px dashed #fff;
    display: inline-block;
    padding-top: 3px;
    margin-top:5px;
}
.dlc_content .trophy_totals .sprite>.total  {
    border-left: 1px solid #fff;
}

#game_details_table img.dlc_image {
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    height: 70px;
    vertical-align:middle;
    background-color: #001118;
}

/**************USER VIEW***************/
#userPage {
    color: #BBB;
}
#userPage #custom_leaderboard {
    color: #888;
    font-size: 11px;
}

#userPage #custom_leaderboard .progress-cell {
    padding-right: 30px;
}

.userLeft {
    vertical-align: top;
    display: table-cell;
    width: 180px;
}

.userRight {
    vertical-align: top;
    display: table-cell;
    background-color: #FFF;
    width: 720px;
}

.profileLogo {
    position: relative;
}

#upgradeButton {
    margin-top: -15px;
    margin-bottom: 10px;
}

#id-avatar, #upgradeButton {
    margin-left:10px;
    margin-right:10px;
}

#id-avatar {
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    overflow:hidden;
    margin-top: 10px;
    margin-bottom: 25px;
    color: #FFF;
    text-align:center;
}

img.avatar-medium {
    width: 60px;
    height: 60px;
    background-color: #001118;
    border-radius: 5px 5px 5px 5px;
    -moz-border-radius: 5px 5px 5px 5px;
    -webkit-border-radius: 5px 5px 5px 5px;
}

#id-avatar img.avatar-large {
    width: 160px;
    height: 160px;
    background-color: #001118;
    border-radius: 0 0 5px 5px;
    -moz-border-radius: 0 0 5px 5px;
    -webkit-border-radius: 0 0 5px 5px;
}

.profileLogo img.plus {
    position: absolute;
    top: -15px;
    left: -25px;
    width: 50px;
}

#id-handle {
    font-weight: bold;
    color: #EEE;
    font-size: 20px;
    font-family: "lucida grande",tahoma,verdana,arial,sans-serif;
}

div.userHeader {
    background-color: #023;
    padding: 10px 0;
}
table.userHeader {
    width: 100%;
}

td.userInfo {
    width: 35%;
}

.aboutmearrow {
    border-color: transparent transparent transparent #345;
    border-style: solid;
    border-width: 5px 0px 0px 5px;
    height: 0px;
    width: 0px;
    margin-left: 8px;
}

.cheaterprofile .aboutmearrow {
    border-color: transparent transparent transparent #543;
}

#id-aboutme {
    padding: 3px 5px;
    color: #CCC;
    background-color: #345;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    display:inline-block;
}

.userstats {
    padding-right:5px;
}

.userstats, .gamestats {
    text-align: right;
    color: #EEE;
}

#toprightstats td { white-space: nowrap; }
.userstats #leveltext big, .gamestats #leveltext big{font-size: 30px; display: inline-block;}
.userstats big, .gamestats big{font-size: 25px; display: block;}
.userstats small, .gamestats small{font-size: 10px; color: #888;}

.center {text-align: center;}

.userstats td, .gamestats td {
    padding: 0 10px;
}
td.separator {
    background-image: -webkit-gradient(
      linear, left top, left bottom,
      from(rgba(255,255,255,0)),
      to(rgba(255,255,255,0)), color-stop(.5,rgba(255,255,255,.4))
    );
    background-image: -moz-linear-gradient(
      rgba(255,255,255,0) 0%, rgba(255,255,255,.4) 50%, rgba(255,255,255, 0) 100%
    );
    width: 0 !important;
    padding: 0 0 0 1px !important;
}
.userstats div.prog, .userstats div.progperc {display: table-cell; font-size: 11px;}
.userstats div.prog {width: 100%; padding-right: 10px;}

#leveltext img {
    width: 30px;
    position: relative;
    margin-right: 5px;
    top: 3px;
}

.controls {
    margin-top: 2em;
}
.controls.right {
    float:right;
    margin-right: 1em;
}
.controls.left {
    float: left;
    margin-right: 1em;
}

.controls a {
    cursor: pointer;
}
.recent-trophies {
    clear:both;
}

.recentTrophy img {
    margin: 0 2px;
    width: 45px;
}

.userRight #main-content {
    background-color: #FFF;
/*    overflow: hidden;*/
}

.ctrlarr {
    display:none;
    /*text-indent: -9999px;
    overflow:hidden;
    background-image: url('http://i.imgur.com/RVlTo.gif');
    background-repeat: no-repeat;
    width: 8px;
    height: 12px;
}

.ctrlarr.rw {background-position: -2px 0;}
.ctrlarr.pr {background-position: -16px 0; width: 4px;}
.ctrlarr.nx {background-position: -25px 0; width: 4px;}
.ctrlarr.ff {background-position: -34px 0;*/}

.ps3_leaderboard.user {border:0px !important;}

.ps3_leaderboard.user thead {
    font-size: 10px;
    font-weight:normal;
    display: none;
}

#custom_leaderboard.user tr td:firstchild {
    padding-right: 0px;
}

#custom_leaderboard.user tr td {
    padding-top: 5px;
    padding-bottom: 5px;
}

td.title-cell {
    width: 100%;
    vertical-align: top;
    padding-top: 10px !important;
    text-align: left;
    padding-left: 5px;
}

.gameMain div.platformlabel {
    -moz-transform: rotate(-90deg);
    -webkit-transform: rotate(-90deg);
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

    left: -6px;
    position: absolute;
    bottom: 7px;
}

div.platformlabel {
    font-size: 11px;
    border-radius: 2px 2px 2px 2px;
    padding: 2px 4px;
    text-decoration: none;
    display: inline-block;
    margin-right: 3px;
    margin-bottom: 1px;
    text-decoration: none !important;
    font-weight: bold;
}
div.platformlabel.ps3 {
/*    background-color: #036;
    border: 1px solid: #09F;
    color:#5CF; */
    background-color: #4A4A4A;
    color:#fff;
}
div.platformlabel.psv {
    background-color: #063;
    color:#fff;
/*    background-color: #063;
    border: 1px solid #0F9;
    color:#0F9;*/
}
div.platformlabel.ps4 {
    padding: 2px 4px;
    background-color: #0068BF;
    color: #fff;
/*    background-color: #ccc;
    border: 1px solid #555;
    background-image: url('/images/ps4tagbg.png');
    color: #555;*/
}
div.platformlabel.ps5 {
    border: 1px solid #000;
    background-color: #fff;
    color: #000;
    padding: 1px 3px;
}

.hasplatcell {vertical-align: middle}
.hasplatcell img {height: 24px;}

.title-cell .gametitle {font-size: 12px; margin-bottom: 3px; display:inline-block;}

.selectwrapper {position: relative; display: inline-block;}

#custom_leaderboard.filter_progress_Incomplete tr.complete      {display:none;}
#custom_leaderboard.filter_progress_Complete tr                 {display:none;}
#custom_leaderboard.filter_progress_Complete tr.complete        {display:table-row;}
#custom_leaderboard.filter_progress_Cheated tr                  {display:none;}
#custom_leaderboard.filter_progress_Cheated tr.cheater          {display:table-row;}

#custom_leaderboard.filter_gametype_Platinum tr.PSN             {display:none;}
#custom_leaderboard.filter_gametype_PSN tr.Platinum             {display:none;}

#custom_leaderboard.filter_platform_PS3 tr.PS5,
#custom_leaderboard.filter_platform_PS3 tr.PS4,
#custom_leaderboard.filter_platform_PS3 tr.PSV,
#custom_leaderboard.filter_platform_PS3 tr.PS5PS4,
#custom_leaderboard.filter_platform_PS3 tr.PS5PSV,
#custom_leaderboard.filter_platform_PS3 tr.PS5PS4PSV,
#custom_leaderboard.filter_platform_PS3 tr.PS4PSV               {display:none;}
#custom_leaderboard.filter_platform_PSVita tr.PS5,
#custom_leaderboard.filter_platform_PSVita tr.PS4,
#custom_leaderboard.filter_platform_PSVita tr.PS3,
#custom_leaderboard.filter_platform_PSVita tr.PS4PS3,
#custom_leaderboard.filter_platform_PSVita tr.PS5PS4            {display:none;}
#custom_leaderboard.filter_platform_PS4 tr.PS5,
#custom_leaderboard.filter_platform_PS4 tr.PS3,
#custom_leaderboard.filter_platform_PS4 tr.PSV,
#custom_leaderboard.filter_platform_PS4 tr.PS5PSV,
#custom_leaderboard.filter_platform_PS4 tr.PS3PSV               {display:none;}
#custom_leaderboard.filter_platform_PS5 tr.PS4,
#custom_leaderboard.filter_platform_PS5 tr.PS3,
#custom_leaderboard.filter_platform_PS5 tr.PSV,
#custom_leaderboard.filter_platform_PS5 tr.PS4PS3,
#custom_leaderboard.filter_platform_PS5 tr.PS4PSV,
#custom_leaderboard.filter_platform_PS5 tr.PS3PSV,
#custom_leaderboard.filter_platform_PS5 tr.PS4PS3PSV            {display:none;}

#rarefilter, #typefilter, #earnedfilter, #platformfilter {position: relative; margin-bottom: 20px;}
#filter-area {
    -moz-user-select: -moz-none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
#filter-area .sorticon {margin-right: 3px;}
#filter-area .desc {
    display:block;
    margin: 2px;
    font-weight:normal;
    padding: 2px 4px;
    text-align: left;
    color:#333;
    cursor: pointer;
    min-width: 160px;
    height: 18px;

    border: 1px solid transparent;

    margin-left: 25px;
}

#filter-area .desc.alllink {
    padding-left: 30px;
    min-width: 125px;
}

#filter-area .desc>* {float:left;}
#filter-area .desc span {height: 20px;}

#filter-area .desc.selected {border: 1px solid #999; background-color:#EEE; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px;}

#filter-area .desc .filtertotal {
    font-weight:lighter;
    color:#888 !important;
    margin-left: 4px;
}
#displaynum {
    position: absolute;
    right: 5px;
    width: 200px;
    margin-left: -190px;
    text-align: center;
    height: 20px;
    line-height: 20px;
}
#userPage .summaryslot {
    border: 1px solid #999;
    border-left: 0 none;
    margin-right: 1px;
    padding: 0;

    border-radius: 0 10px 0 0;
    -moz-border-radius: 0 10px 0 0;
    -webkit-border-radius: 0 10px 0 0;
    overflow:hidden;
}

#userPage #trophies-area .title a {
    text-align: left;
    overflow: hidden;
    height: 1.2em;
    display: block;
}

#filter-area .slider {
    position: absolute;
    left: 7px;
}

#filter-area .desc input {
    height:20px;
    margin: 0 3px 0 0;
    display:none;
    min-width: 0;
}

#filter-area .desc.alllink input {
    position: relative;
    left: -26px;
}

#filter-area .desc.alllink.bubble {
    visibility: hidden;
}

#filter-area .desc.bubble input {
    display: inline-block;
    cursor:pointer;
}

#filter-area .desc.bubble {
    min-width: 149px;
    margin-left: 10px;
}

.ui-slider-handle {outline:none;}

.mainSection {
    position: relative;
}

/*****************AJAX******************/
.ui-autocomplete {
    max-width: 252px;
    border: 1px solid #BBB;
    background-color: #FFF;
}

.ui-autocomplete li:first-child a {
    border-top: 0 none !important;
}
.ui-autocomplete li a {
    cursor: pointer;
    padding: 5px;
    display: block;
    color: #036;
    border-top: 1px dashed #CCC;
}

.ui-state-hover {
    color: #06B;
    background-color: #EEE;
}

.ui-autocomplete li a .highlight {
    font-weight: bold;
    color: #09F;
}

.ui-autocomplete li a td {
    vertical-align: middle;
}

.ui-autocomplete li a .searchav {
    width: 20px;
    display: inline-block;
    margin-right: 8px;
}

/*****************CARD******************/

.recent-trophies .hc-details table {width: 100%}

.recent-trophies .hc-details a, .hc-details .trophyinfo a:hover {text-decoration: none;}
.recent-trophies .hc-details .trophyinfo .game_title a {color: #DDD !important;font-size: 1.2em; font-weight: bold}
.recent-trophies .hc-details .trophyinfo .title a {color:#FFF !important;font-size: 1.4em; font-weight: bold}
.recent-trophies .hc-details .trophyinfo .description {color: #BBB; line-height: 12px;}
.recent-trophies .hc-details .trophyinfo .date_earned {color: #999; border-top: 1px dashed #666; display:inline-block; margin-top: .5em;}
.recent-trophies .hc-details .trophyinfo {
    width: auto;
    display:inline-block;
    text-align: left;
}
.recent-trophies .hc-details .game_image {
    text-align: right;
}

.recent-trophies .hc-details .game_image img {
    width: 100px;
    background-color: #001118;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    margin-left: 10px;
}

/*.milestone_shelf .hc-details { left: 5px; top: 130px; }*/

.usertabs li {
    padding-left: 6px;
    margin: 3px 0;
}

.usertabs li a, .usertabs li a:hover, .usertabs li a:active {
    color: #FFF !important;
    text-decoration: none !important;
    display: block;
    font-size: 14px;
    height: 21px;
    line-height: 24px;
}

.usertabs li:hover {
    background-color: #68A;
}

.usertabs li.current {
    position:relative;
    background-color: #048 !important;
    background-image: -webkit-linear-gradient(left, #048, #048 95%, #024);
    background-image:    -moz-linear-gradient(left, #048, #048 95%, #024);
    background-image:     -ms-linear-gradient(left, #048, #048 95%, #024);
    background-image:      -o-linear-gradient(left, #048, #048 95%, #024);
    background-image:         linear-gradient(to right, #048, #048 95%, #024);
    margin: 3px 0 3px -10px;
    padding-left: 15px;
}

.usertabs li.current .arrow {
    border-color: transparent #012 transparent transparent;
    border-style: solid;
    border-width: 0px 10px 10px 0px;
    height: 0px;
    width: 0px;
    position: absolute;
    bottom: -10px;
    left: 0px;
}

#boardrank {margin: 20px 5px 0 5px;}

.rankhead {
    font-size: 12px;
    border-bottom: 1px solid #444;
    margin-bottom: .5em;
    padding: 2px 5px;
    color:#ccc;
}

#ranksummary td {padding: 5px;}
#ranksummary img {height: 22px;}
#randomstats-area>div {margin-bottom: 15px;}
#ranksummary big {font-size: 20px;}

.cheatermessage {
    background-color: #FCC;
    border: 1px solid #F00;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    border-radius: 5px;
    color: #F34;
    font-size: 10px;
    padding: 10px;
}

.cheatermessage br {margin-bottom: 1em;}

/********Individual Trophy Details******/
#individual_swirl {
    display: block;
    height: 285px;
    margin-left: -88px;
    margin-top: -235px;
    position: absolute;
    width: 1038px;
    text-align:center;
}

#individual_icon {
    margin-left: 55px;
    margin-top: -55px;
}

#individual_icon img#id-trophyimage {
    width: 225px;
}

#individual_icon #trophyvalue {
    width: 100px;
    margin-top: 100px;
}

#individual_swirl.swirl_0 {background: url("/images/trophyswirl_bronze.png") no-repeat transparent;}
#individual_swirl.swirl_1 {background: url("/images/trophyswirl_silver.png") no-repeat transparent;}
#individual_swirl.swirl_2 {background: url("/images/trophyswirl_gold.png") no-repeat transparent;}
#individual_swirl.swirl_3 {background: url("/images/trophyswirl_platinum.png") no-repeat transparent;}

.individualpage {position: relative}
.individualpage #page-title {width: 100%; text-align:center}
.summaryslot {
    text-align: left;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    padding: 5px 15px;

    border: 1px solid #CCC;
    border-color: rgba(0,0,0,.2);

    background-color: #EEE;
    background-color: rgba(0,0,0,.1);

    margin: 10px 0;
    font-size: 12px;
}

.summaryslot h2 {margin: 5px 0; font-size: 14px; line-height: 14px;}
.aboutpage .summaryslot img {width: 24px; margin-right: 5px;}

.summaryslot .game_title {font-size: 14px;}
.summaryslot .title {font-size: 12px; font-weight: bold;}
.summaryslot .description {font-size: 10px; color: #333; margin:2px 0 5px 3px;}
.summaryslot .game_image {vertical-align: top}
.summaryslot .game_image img  {height: 60px; object-fit: contain;}

#userPage .summaryslot .game_image, #userPage .summaryslot .trophy_image, #userPage .summaryslot .trophyinfo, #userPage .summaryslot .trophystats {padding: 7px 3px;}
#userPage .summaryslot .trophystats, #userPage .summaryslot .dateearned {font-size: 10px; color:#666; margin-left:3px;}
#userPage .summaryslot .game_image img, #userPage .trophy_image img {
    height: 40px;
    background-color: #333;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
}
#userPage .summaryslot .game_image img {width: 72px;}
#userPage .summaryslot .trophy_image img {width: 40px;}
#userPage .summaryslot .game_image, #userPage .summaryslot .trophy_image {vertical-align:middle;}
#userPage .summaryslot .trophyimage {padding-left: 4px;}
#userPage .summaryslot .game_image {padding-right: 4px;}
#userPage .summaryslot .game_image a {position:relative;}
#userPage .summaryslot .game_image a .platformlabel {position:absolute; bottom: -1px; font-size: 8px; right: -5px;}
#userPage .summaryslot .trophyinfo {width: 100%}

.individualpage #main-content {text-align: center}
.individualpage #main-content .trophy_table td {text-align:left;}
.individualpage #main-content .trophy_table td:last-child {border-right: 1px solid #666}
.individualpage #main-content .trophy_table td.rankcell {text-align:right;}
.individualpage #main-content .trophy_table td.date_earned {font-weight: normal; font-size: .8em; width: 30%; text-align:center}
.individualpage #main-content .trophy_table td.date_earned .date {display: block;}

/*****************Contact****************/
#contactForm {
    background: #023;
    color: #FFF;
    padding: 10px;
    width:280px;

    position:fixed;
    right:-300px;

    top:0;
    bottom:0;
    z-index: 500;
}
#contactForm label, #contactForm input[type="text"], #contactForm select, #contactForm textarea {font-size:12px;}

#contactForm input[type="text"], #contactForm input[type="checkbox"], #contactForm textarea, #contactForm select {
    border: 1px solid transparent;
}
#contactForm input[type="text"], #contactForm select, #contactForm textarea {
    font-family: Helvetica,Arial,sans-serif;
    display: block;
    width: 280px;

    letter-spacing: -0.25px;
    padding: 7px 8px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    background-color:#345;
    color:#FFF;
}

#contactForm select {height:30px;}
#contactForm textarea {height: 100px; max-width:280px; min-width:280px; min-height:30px;}

#contactForm td {vertical-align: top; text-align:left; padding: 5px;}
#contactForm td:first-child {vertical-align: top; text-align:right; }

.contactdetails {
    display:none;

    font-size: 10px;
    padding: 10px;
    margin: 10px 0;

    background-color: #046;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -ms-border-radius: 3px;
    -o-border-radius: 3px;
    border-radius: 3px;
}

.contactdetails.err {
    background-color:#600;
    color:#F00;
}

#ajaxStatus {
    font-size:12px;
    text-align:center;
}

#sendFeedback {
    width: 100%;
    padding: 0;
    margin: 0;
    height: 30px;
    line-height: 30px;
    margin-top: 10px;
}

#contactForm .contactTab {

    cursor:pointer;
    position: absolute;
    left: -26px;
    top: 140px;
    width: 17px;
    height: 35px;
    font-size: 16px;
    font-weight: bold;
    color: #09F;
    text-transform: uppercase;
    background-image: url('/images/contacttab.png');
    z-index: 40;
    padding: 95px 0 0 9px;
}

/*****************Admin****************/
#adminForm {
    background: #FF0000;
    color: #FFF;
    padding: 10px;
    width:280px;

    position:fixed;
    left:-300px;

    top:0;
    bottom:0;
    z-index: 500;
}
#adminForm label, #adminForm input[type="text"], #adminForm select, #adminForm textarea {font-size:12px;}

#adminForm input[type="text"], #adminForm input[type="checkbox"], #adminForm textarea, #adminForm select {
    border: 1px solid transparent;
}
#adminForm input[type="text"], #adminForm select, #adminForm textarea {
    font-family: Helvetica,Arial,sans-serif;
    display: block;
    width: 280px;

    letter-spacing: -0.25px;
    padding: 7px 8px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    background-color:#FCC;
    color:#333;
}

#adminForm select {height:30px;}
#adminForm textarea {height: 300px; max-width:280px; min-width:280px; min-height:30px;}

#adminForm td {vertical-align: top; text-align:left; padding: 5px;}
#adminForm td:first-child {vertical-align: top; text-align:right; }

.admindetails {
    display:none;

    font-size: 10px;
    padding: 10px;
    margin: 10px 0;

    background-color: #046;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -ms-border-radius: 3px;
    -o-border-radius: 3px;
    border-radius: 3px;
}

.admindetails.err {
    background-color:#600;
    color:#F00;
}

#adminAjaxStatus {
    font-size:12px;
    text-align:center;
}

.adminSubmit {
/*    width: 100%;*/
    padding: 0 10px;
    margin: 0;
    height: 30px;
    line-height: 30px;
    margin-top: 10px;
}

#adminForm .adminTab {

    cursor:pointer;
    position: absolute;
    right: -26px;
    top: 140px;
    width: 17px;
    height: 35px;
    font-size: 16px;
    font-weight: bold;
    color: #FCC;
    text-transform: uppercase;
    background-image: url('/images/admintab.png');
    z-index: 40;
    padding: 95px 0 0 9px;
}

span.adminChecker {
    display: none;
}

/*****************404*******************/
.errorpage {
    text-align:center;
    padding:100px 0;
}

.errorpage h1 {
    font-size: 42px;
    text-transform:uppercase;
}

/****************Login******************/
.userform {color:#89A; position: absolute; right: 50%; width: 900px; margin-right: -365px; text-align:right;top:0;z-index:1000}
.userform .area {float:right; padding: 3px 10px; background:#FFF;
    -webkit-border-radius: 0 0 5px 5px;
    -moz-border-radius: 0 0 5px 5px;
    -ms-border-radius: 0 0 5px 5px;
    -o-border-radius: 0 0 5px 5px;
    border-radius: 0 0 5px 5px;
    height:22px;
    overflow-y: hidden;
}
.userform label {font-size: 8pt; color: #89A}
.userform input, .userform a {padding:2px 5px; border: 1px solid #89A;}

.forum#wrapper input[type="text"], .forum#wrapper textarea {padding:2px; border: 1px solid #89A}
.forum#wrapper input[type="text"]:focus, .forum#wrapper textarea:focus {border: 1px solid #000}

.userform .avatar {height: 22px; width: 22px;}
.levelicon, .leaderboardlevelicon {height:20px; width: 20px;}

.userform .avatar, .userlevel {padding-right: 5px}
.levelicon {padding-left: 15px}
.levelprogressicon {height:30px; width: 30px; padding-left: 15px}
.userform .username {color:#036}
.userlevel {font-size: 14pt; color:#333}
#presence_user_info {cursor: pointer}
#presence_user_info>div {vertical-align:middle; display:table-cell}

#presence_user_area .droplinks {margin: 0 -10px; background:#FFF; padding: 4px 0;}
#presence_user_area .droplinks a {display: block;  border:1px solid transparent; text-align:left; padding: 2px 10px; font-size: 11px; color:#369;}
#presence_user_area .droplinks a:hover {background:#007FDB; border:1px solid #09F; color:#FFF; text-decoration: none}

#presence_user_area .droplinks .separator { margin: 3px 5px; border-top: 1px solid #ddd;}

/*****************FOOTER****************/
#psntlfooter {
    color: #333 !important;
    text-align:right;
    margin-top: 3em;
    line-height: 13px;
    width: 100%;
    padding-top: 2em;
    font-size: 11px;
}
#psntlfooter .container div {
    display:inline-block;
}

#psntlfooter ul , #psntlfooter #design span {
    display:block;
}

#psntlfooter li {
    list-style: none;
    display: inline;
}

#psntlfooter ul li a {margin: 0 .5em;}
#psntlfooter .design {margin-top:6px;}

#generateColor {
    text-align:center;
    clear:both;
    padding-top:25px;
}

#generateColor .color {
    border: 1px solid #ccc;
    width: 20px;
    height:20px;
    margin:5px;
    font-size: 12px;
    line-height:20px;
    color:#FFF;
}
#generateColor .color:hover {
    border: 1px solid #333;
    cursor:pointer;
}

.color.selected {
    height:30px !important;
    margin:0 5px !important;
}

.color#blue {background:#0267a8}
.color#teal {background:#088}
.color#green {background:#12c759}
.color#forest {background:#616624}
.color#yellow {background:#c2ac00}
.color#orange {background:#F90}
.color#brown {background:#7b5830}
.color#red {background:#fd0a00}
.color#pink {background:#d90094}
.color#bubblegum {background:#F9B}
.color#lilac {background:#b5f}
.color#purple {background:#8d04c5}
.color#black {background:#000}
.color#grey {background:#657782}


#trophyCardCode {margin-top:15px;}
#trophyCardCode>div {
     float:left;
     width:48%;
     padding:1%;
     text-align:left;
}
#trophyCardCode>div>div {
    font-weight:bold;
    color:#333;
}
#trophyCardCode>div>input {
    width:92%;
    padding: 3px;
    margin: 0 2%;
    border: 1px solid #CCC;
    background-color:#F2F2F2;
}

#trophyCardCode>div>input::selection, #trophyCardCode>div>input::-moz-selection {
    background-color:#09F !important;
    color:#FFF !important;
}

/******************** WELCOME *******************************/
#leveldata>div>span {
    display:table-cell;
    vertical-align:middle;
}
#leveldata .levelvalue {
    font-size:1.2em;
    padding-left:2px;
}

.welcomeSection {
    border: 1px solid #999;
    float:left;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    padding:2px;
    margin-bottom:6px;
}

.welcomeSection .section_head {
    margin:-8px;
    margin-bottom:0px;
    background:url('/images/headergradient.png') repeat-x #09F top left;
    color:#FFF;
    border-radius: 5px 5px 0 0;
    -moz-border-radius: 5px 5px 0 0;
    -webkit-border-radius: 5px 5px 0 0;
}
.welcomeSection .section_head>h3 {
    font-weight:bold;
}

.welcomeSection .section_item {
    margin-top:5px;
    padding-top:10px;
    border-bottom:1px solid black;
    padding-bottom:3px;
}  

.welcomeSection .section_item:hover, .welcomeSection .section_item a:hover {
    cursor: pointer;
    background-color: #CEF;
    text-decoration: none;
}

.welcomePageRight {
    margin-left:6px;
    width:346px;
    padding:10px;
    background-color:#FFF;
}

.welcomePageUserSummary {
    background-color:#023;
}

.welcomePageTrophyCard {
    background-color:#FFF;
    border:none;
    padding:0px;
}

#welcomeProfileProgress>DIV {
    display:inline-block;
}

.gameTrophyPreviewImage {
    padding:2px;
    float:left;
}

.gameTrophyPreviewImage>img {
    height:36px;
    width:36px;
}

.updateBorder2 {
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border: 1px solid #6699CC;
    display: inline-block;
    margin-top: -220px;
    margin-left:-10px;
    width: 896px;
    padding: 1px;
    position:absolute;
}
.updateCenter2 {
    background-color: #000;
    height: 125px;
    padding: 10px;
    text-align: center;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
}

.sitestats {
    display: inline-block;
    margin-top: -60px;
    margin-left:-10px;
    width: 880px;
    padding: 0px 10px;
    position:absolute;
    font-family: 'Helvetica Neue', Helvetica, Arial, FreeSans, sans-serif;
    font-weight: bold;
    text-decoration: none;
    text-rendering: optimizelegibility;
    color:white;
}
.sitestats>div {
    /*float:left;*/
}
.sitestats .stat_value{
    font-weight:normal;
    font-size: 20px;
    text-align:center;
}
.sitestats .stat_title{
    text-align:center;
    font-size:14px;
}

/* Basic jQuery Slider essential styles */
ul.bjqs{position:relative; list-style:none;padding:0;margin:0;overflow:hidden; display:none;}
li.bjqs-slide{position:absolute; display:none;}
ul.bjqs-controls{list-style:none;margin:0;padding:0;z-index:9999;}
ul.bjqs-controls.v-centered li a{position:absolute;}
ul.bjqs-controls.v-centered li.bjqs-next a{right:0;}
ul.bjqs-controls.v-centered li.bjqs-prev a{left:0;}
ol.bjqs-markers{list-style: none; padding: 0; margin: 0; width:100%;}
ol.bjqs-markers.h-centered{text-align: center;}
ol.bjqs-markers li{display:inline;}
ol.bjqs-markers li a{display:inline-block;}
p.bjqs-caption{display:block;width:96%;margin:0;padding:2%;position:absolute;bottom:0;}

/* 2014-08-29 SCM Added for game details page */
.trophy_card_info { clear: both; margin-top: 75px; }
.trophy_card_info a { font-size: 8pt; color: #99AABB !important; }
.trophy_card_info span { font-size: 8pt; }
.err { color: #CC0000; }
.warn { color: #F0AD4E; }
.success { color: #00AA00; font-weight: bold; }

.stick {
    position: fixed;
    top: 0;
    z-index: 10000;
}

#sticky_preview {
    float:right; 
    margin-top:10px; 
    margin-bottom: -20px; 
    padding-right:10px; 
}

#psntlheadercontainer {
    margin: -50px auto 45px auto;
    background-color:#fff;
    width:900px;
}

#psntlheaderad {
    margin: 0 auto;
    width:728px;
    padding:15px;
    text-align:right;
}

/* Tournament Beta Tag */
a.page-select { position: relative; }
a.page-select span sup.beta {
    color: #F0AD4E !important; left: 100px; top: 55px; position: absolute;
    -ms-transform: rotate(25deg); /* IE 9 */
    -webkit-transform: rotate(25deg); /* Chrome, Safari, Opera */
    transform: rotate(25deg);
}
/* Custom Leaderboard Alpha Tag #F0AD4E */
a#custom { position: relative; }
a#custom sup {
    color: #F0AD4E !important; left: 60px; position: absolute; font-weight: bold;
    -ms-transform: rotate(25deg); /* IE 9 */
    -webkit-transform: rotate(25deg); /* Chrome, Safari, Opera */
    transform: rotate(25deg);
}