/************************************************ * * File : css/ps.css * Version : v1.0 * Date : Sunday, 10 September 2006 * Email : JakeAlger@RhapX.com * ************************************************ * Global style settings ************************************************/ @media screen { * { margin: 0; padding: 0; } body { background-color:#1f2024; text-align: center; font-size: 11px; font-family: Tahoma, Verdana, Arial, sans-serif; } h1 { text-indent:-9000px; } h2 { text-indent:-9000px; font-size:10px; } img { border:none; } ul { list-style-type:none; } li { list-style:none; } a { text-decoration:none; text-indent:0px; color:#aaa; } #general p a:hover { text-decoration:underline; } .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } /************************************************ * Container ************************************************/ #container { margin:0 auto; width:900px; background:url(images/ps-container-bg.jpg) repeat-y; text-align:left; } #container h1 { height:123px; background:url(images/ps-main-header.jpg) no-repeat; } /************************************** * Top Header **************************************/ #container #top { height:33px; background:url(images/ps-login-bg.jpg) repeat-x; } #container #top ul { width:545px; padding:8px 0 0 10px; float:left; } #container #top ul li { display:inline; color:#7c7d81; padding:0 7px 0 7px; } #container #top ul li a { color:#7c7d81; } #container #top ul li a:hover { color:#e6a968; } #container #top div { float:left; width:96px; padding:6px 5px 0 0; height:19px; background:url(images/ps-input-bg.jpg) no-repeat 0 6px; } #container #top div input { border:0; font-weight:bold; color:#000; font-size:10px; padding-top:3px; width:84px; background:transparent; } #container #top ul#btns { float:right; width:auto; padding:8px 0 0 0; background:transparent; } #container #top ul#btns li { padding:0; margin-left:3px; float:left; } #container #top ul#btns li input.login { border:0; width:43px; height:16px; background:url(images/ps-login-btn.jpg) no-repeat; } /************************************** * Main Content **************************************/ #content { color:#fff; padding-top:9px; width:900px; background:url(images/ps-content-bg.jpg) repeat-x; } /************************************** * Left Content **************************************/ #content #lcontent { width:161px; float:left; } #content #lcontent h2 { height:25px; } #content #lcontent h2#uhevents { background:url(images/ps-uevents-header.jpg) no-repeat; } #content #lcontent h2#ghservers { background:url(images/ps-gservers-header.jpg) no-repeat; } #content #lcontent h2#hsponsors { background:url(images/ps-sponsors-header.jpg) no-repeat; } #content #lcontent h2#hsupport { background:url(images/ps-support-header.jpg) no-repeat; } #content #lcontent #uevents { width:154px; background-color:#23262b; padding:0 0 5px 7px; } #content #lcontent #uevents h3 { margin-bottom:2px; font-size:11px; color:#4b4f58; padding:9px 0 0 7px; width:139px; height:15px; background:url(images/ps-uevents-sheader.jpg) no-repeat 0 7px; } #content #lcontent #uevents ul { height:58px; padding:10px 0 0 7px; background:url(images/ps-uevents-ulbg.jpg) no-repeat; } #content #lcontent #uevents ul li { float:left; color:#dee5eb; font-size:10px; height:13px; width:105px; padding-left:43px; } #content #lcontent #uevents ul li.name { background:url(images/ps-dt-game.jpg) no-repeat 0 4px; } #content #lcontent #uevents ul li.venue { background:url(images/ps-dt-venue.jpg) no-repeat 0 4px; } #content #lcontent #uevents ul li.location { background:url(images/ps-dt-location.jpg) no-repeat 0 4px; } #content #lcontent #uevents ul li.opponent { background:url(images/ps-dt-opponent.jpg) no-repeat 0 4px; } #content #lcontent #uevents ul li.teams { background:url(images/ps-dt-teams.jpg) no-repeat 0 4px; } #content #lcontent #uevents ul li.league { background:url(images/ps-dt-league.jpg) no-repeat 0 4px; } #content #lcontent #uevents ul li.info { padding:0; } #content #lcontent #gservers { width:154px; padding:0px 0 5px 7px; background:url(images/ps-gservers-bg.jpg) repeat-y; } #content #lcontent #gservers h3 { width:136px; height:14px; padding:5px 0 0 10px; font-size:10px; color:#c4c7cc; background:url(images/ps-gserver-sheader.jpg) no-repeat 0 3px; } #content #lcontent #gservers ul { width:139px; height:65px; padding-left:7px; background:url(images/ps-gservers-ul-bg.jpg) no-repeat; } #content #lcontent #gservers ul li { width:78px; color:#dee5eb; font-size:10px; padding-left:58px; } #content #lcontent #gservers ul li.ip { background:url(images/ps-gservers-ip.jpg) no-repeat 0 4px; } #content #lcontent #gservers ul li.port { background:url(images/ps-gservers-port.jpg) no-repeat 0 4px; } #content #lcontent #gservers ul li.rotation { background:url(images/ps-gservers-rotation.jpg) no-repeat 0 4px; } #content #lcontent #gservers ul li.players { background:url(images/ps-gservers-players.jpg) no-repeat 0 4px; } #content #lcontent #gservers ul li.join, #content #lcontent #gservers ul li.ranking { float:left; padding-left:0; width:50px; } #content #lcontent #gservers ul li.join a, #content #lcontent #gservers ul li.ranking a { float:left; text-indent:-9000px; } #content #lcontent #gservers ul li.join a { width:51px; background:url(images/ps-gservers-join.jpg) no-repeat 0 4px; } #content #lcontent #gservers ul li.ranking a { width:72px; background:url(images/ps-gservers-ranking.jpg) no-repeat 20px 4px; } #content #lcontent #sponsors, #content #lcontent #support { background-color:#303437; width:161px; } #content #lcontent #sponsors ul, #content #lcontent #support ul { padding-left:6px; width:155px; } #content #lcontent #sponsors ul li, #content #lcontent #support ul li { padding:5px 0 2px 0; } /************************************** * Middle Content **************************************/ #promo { text-align: center; vertical-align: bottom; padding-top:10px } #content #mcontent { width:577px; float:left;background-color: #41464a; } #content #mcontent #mpost { float:left; width:567px; padding:0px 0 0px 5px; background:url(images/ps-mainpost-bg.jpg) repeat-y; } #content #mcontent #mpost img#c { float:right; margin-right:20px; } #content #mcontent #mpost #post { width:358px; float:left; } #content #mcontent #mpost #post p { margin-bottom:5px; } #content #mcontent #mpost #post div.feature { width:349px; height:265px; padding:10px 0 0 9px; background:url(images/ps-mainpost-cbg.jpg) no-repeat; } #content #mcontent #mpost #post div dl { width:349px; padding-bottom:10px; } #content #mcontent #mpost #post div dl dt { color:#ebad70; font-weight:bold; } #content #mcontent #mpost #post div dl dd { color:#5e6669; } #content #mcontent #mpost #post div p { color:#8f9396; width:349px; } #content #mcontent #mpost #post div ul { width:349px; padding-top:5px; } #content #mcontent #mpost #post div ul li { margin-right:9px; float:left; font-size:9px; color:#d6d8d5; background:url(images/ps-mainpost-btnbg.jpg) no-repeat; } #content #mcontent #mpost #post div ul li a { text-indent:-9000px; float:left; width:62px; height:16px; } #content #mcontent #mpost #post div ul li#more a { background:url(images/ps-readmore-btnbg.jpg) no-repeat; } #content #mcontent #mpost #post div ul li#comment a { background:Url(images/ps-addcomment-btnbg.jpg) no-repeat; } #content #mcontent #headlines { width:161px; float:left; background:url(images/ps-headlines-bg.jpg) repeat-y; } #content #mcontent #headlines h2 { width:161px; height:25px; text-indent:-9000px; } #content #mcontent #headlines h2#gheadline { background:url(images/ps-headlines-gheader.jpg) no-repeat; } #content #mcontent #headlines h2#eheadline { background:url(images/ps-headlines-events.jpg) no-repeat; } #content #mcontent #headlines h2#eachieve { background:url(images/ps-headlines-achievements.jpg) no-repeat; } #content #mcontent #headlines h2#esponsor { background:url(images/ps-headlines-sponsor-news.jpg) no-repeat; } #content #mcontent #headlines h2#egeneral { background:url(images/ps-headlines-general-news.jpg) no-repeat; } #content #mcontent #headlines h2#jupdates { background:url(images/ps-headlines-jupdates.jpg) no-repeat; } #content #mcontent #headlines ul { padding-left:6px; width:155px; background-color:#a1a7a7; } #content #mcontent #headlines ul li { color:#24282b; height:14px; padding:4px 0 4px 21px; width:133px; } #content #mcontent #headlines ul li a { color:#24282b; } #content #mcontent #headlines ul li.cz { background:url(images/icons/ps-paradigm-icon.jpg) no-repeat 0 4px; } #content #mcontent #headlines ul li.cs { background:url(images/icons/ps-css-header-d.jpg) no-repeat 0 4px; } #content #mcontent #headlines ul li.news { background:url(images/icons/ps-news-icon.jpg) no-repeat 0 4px; } #content #mcontent #headlines ul li.achieve { background:url(images/icons/ps-goldstar-icon.jpg) no-repeat 0 4px; } #content #mcontent #headlines ul li.bf2 { background:url(images/icons/ps-bf2-icon.jpg) no-repeat 0 4px; } #content #mcontent #main-news { width:576px; float:right;} #content #mcontent #main-news h2 { font-size:10px; margin-bottom:4px; height:23px; background:url(images/ps-gnews-header.jpg) no-repeat;margin-left:4px; } #content #mcontent #main-news .newspost { padding-left:4px; width:570px; margin-bottom:4px;margin-bottom:15px;} #content #mcontent #main-news .newspost h3 { font-size:10px; color:#474c52; padding:4px 0 0 10px; height:20px; background:url(images/ps-news-header.jpg) no-repeat;background-color:#959b9b; } #content #mcontent #main-news .newspost h3 em { float:right; margin:-12px 10px 0 0; font-style:normal; } #content #mcontent #main-news .newspost p { color:#d3d7da; padding:5px 10px 5px 10px; width:550px; background:url(images/ps-news-pbg.jpg) repeat-y; } #content #mcontent #main-news .newspost ul { color:#d3d7da; background:url(images/ps-news-pbg.jpg) repeat-y; } #content #mcontent #main-news .newspost ul li { color:#d3d7da; margin-left:30px; margin-right:10px; list-style-type:disc; background:url(images/ps-news-pbg.jpg) repeat-y; } #content #mcontent #main-news .newspost ul.butt { padding-left:10px; width:560px; height:20px; background:url(images/ps-newspost-footer.jpg) no-repeat; } #content #mcontent #main-news .newspost ul.butt li { margin-left:0; list-style-type:none; float:left; color:#7e8186; float:left; margin-right:10px; } #content #mcontent #main-news .newspost ul.butt li strong { float:left; color:#eaaf6d; } #content #mcontent #main-news .newspost ul.butt li a { float:left; color:#7e8186; } #content #mcontent #main-news .newspost ul.butt li.read a { text-indent:-9000px; width:62px; height:16px; background:url(images/ps-readmore-btnbg.jpg) no-repeat; } /************************************** * Middle Content => General **************************************/ #content #mcontent #general { width:577px; float:left; } #content #mcontent #general h2 { height:25px; background:url(images/ps-general-header.jpg) no-repeat; } #content #mcontent #general .gpost { padding:3px 3px 0 3px; width:571px; } #content #mcontent #general .gpost div.gbody { padding-right:15px; padding-left:15px; padding-bottom:5px;} #content #mcontent #general .gpost div { padding:0; background:url(images/ps-gpost-pbg.jpg) repeat-y; } #content #mcontent #general .gpost p { /*padding-left:10px;*/ margin-bottom:8px; padding-top:0; } #content #mcontent #general .gpost ul { padding:0; padding-bottom:0; } #content #mcontent #general .gpost ul li { margin-left:30px; margin-right:20px; list-style-type:disc; } #content #mcontent #general .gpost h3 { height:31px; padding:4px 10px 0 10px; font-size:11px; color:#474c50; font-weight:bold; background:url(images/ps-gpost-header.jpg) no-repeat; } #content #mcontent #general .gpost h3 em { float:right; margin-top:-13px; font-style:normal; } #content #mcontent #general .gpost ul.butt { padding-left:10px; width:560px; height:5px;margin-bottom:5px; background:url(images/ps-gpost-footer.jpg) no-repeat bottom; } #content #mcontent #general .gpost ul.butt li { list-style-type:none; margin-left:0; color:#7e8186; float:left; margin-right:10px; } #content #mcontent #general .gpost ul.butt li strong { color:#eaaf6d; } #content #mcontent #general .gpost ul.butt li a { float:left; color:#7e8186; } #content #mcontent #general .gpost ul.butt li.read a { text-indent:-9000px; width:62px; height:16px; background:url(images/ps-readmore-btnbg.jpg) no-repeat; } #content #mcontent #general #subposts { width:202px; float:left; background-color:#a1a7a7; } #content #mcontent #general #subposts h3 { text-indent:-9000px; height:28px; background:url(images/ps-featuredarticles-header.jpg) no-repeat; } #content #mcontent #general #subposts div { width:188px; padding:5px 5px 0 9px; } #content #mcontent #general #subposts div p { color:#3e4245; } #content #mcontent #general #subposts div img { float:left; margin:0 8px 5px 0; } #content #mcontent #general #subposts div dl { float:right; font-size:10px; padding-left:5px; width:113px; height:24px; background:url(images/ps-sub2-header.jpg) no-repeat; } #content #mcontent #general #subposts div dl dt { color:#dcad79; } #content #mcontent #general #subposts div dl dd { color:#9ca0a1; } #content #mcontent #general #subposts div ul { padding:7px 0 7px 0px; } #content #mcontent #general #subposts div ul li { color:#3d4245; display:inline; font-weight:bold; padding-right:10px; } #content #mcontent #general #subposts div ul li a { color:#3d4245; } #content #mcontent #general #subposts div ul li strong { color:#7b7f82; } #content #mcontent #general #hlbox { width:370px; float:right; } #content #mcontent #general #hlbox p { float:left; line-height:14px; width:346px; color:#767779; padding:10px; background-color:#212224; } #content #mcontent #general #hlbox dl { float:left; background-color:#212224; padding:10px 0 0 10px; width:356px; } #content #mcontent #general #hlbox dl dt { color:#fff; } #content #mcontent #general #hlbox dl dd { color:#585c5d; } #content #mcontent #general #hlbox ul li { padding:6px 0 0 10px; width:356px; height:20px; color:#3d4045; font-weight:bold; } #content #mcontent #general #hlbox ul li a { color:#3d4045; } #content #mcontent #general #hlbox ul li#orange { background:url(images/ps-headline-orange.jpg) no-repeat; } #content #mcontent #general #hlbox ul li#lgrey { background:url(images/ps-headline-lgrey.jpg) no-repeat; } #content #mcontent #general #hlbox ul li#dgrey1 { background:url(images/ps-headline-dgray1.jpg) no-repeat; } #content #mcontent #general #hlbox ul li#dgrey2 { background:url(images/ps-headline-dgray2.jpg) no-repeat; } /************************************** * Right Content **************************************/ #content #rcontent { width:161px; float:right; } #content #rcontent h2 { float:left; font-size:10px; width:161px; height:25px; text-indent:-9000px; } #content #rcontent h2#mresults { background:url(images/ps-mresults-header.jpg) no-repeat; } #content #rcontent h2#ldownloads { background:url(images/ps-ldownloads-header.jpg) no-repeat; } #content #rcontent h2#trosters { background:url(images/ps-trosters-header.jpg) no-repeat; } /* #content #rcontent h3 { float:left; width:146px; padding:4px 0 0 15px; height:16px; font-size:10px; color:#fefefe; background:url(images/ps-roster-sub.jpg) repeat-x; } */ #content #rcontent ul { padding:6px 0 0 83px; height:19px; background:url(images/ps-choose-game.jpg) no-repeat; } #content #rcontent ul li { float:left; height:16px; padding-left:18px; width:21px; color:#6b6c6e; } #content #rcontent ul li a { float:left; width:21px; color:#6b6c6e; } #content #rcontent ul li#css { background:url(images/icons/ps-css-header-d.jpg) no-repeat 0 0; } #content #rcontent ul li#bf2 { background:url(images/icons/ps-bf2-header-d.jpg) no-repeat 0 0; } #content #rcontent #search { float:left; padding:7px 0 7px 13px; width:148px; } #content #rcontent #search ul { width:148px; color:#fff; background:transparent; padding:0; } #content #rcontent #search ul li { padding:0; float:left; width:auto; } #content #rcontent #search ul li input#s { font-weight:bold; border:0; font-size:10px; width:123px; height:14px; padding:2px 3px 0 3px; background:url(images/ps-searchbox-bg.jpg) no-repeat; } #content #rcontent #search ul li input#as { border:0; width:43px; height:16px; background:url(images/ps-search-btn.jpg) no-repeat; } #content #rcontent .box { float:left; width:161px; } #content #rcontent .box table { background-color:#a2a6a7; width:161px; } #content #rcontent .box table tr { color:#24282b; background-color:#a2a6a7; width:161px; } #content #rcontent .box table tr a { color:#24282b; width:134px; } #content #rcontent .box table tr td { padding:4px 0 4px 0px; } #content #rcontent .box table tr td img { padding-left:2px; } #content #rcontent .box table tr td.score { color:#474c50; } #content #rcontent .box table tr td.result { color:#474c50; } #content #rcontent .box table tr td.file { padding-left:5px; } #content #rcontent .box table tr td.size { color:#474c50; } #content #rcontent ul.roster { padding:0; margin:0; background:transparent; } #content #rcontent div.roster { padding:0px 0 0px 0px; width:161px; text-align:left; font-size:9px; font-family:Arial; color:#dfe3e6; } /* #content #rcontent ul.roster li a { float:left; width:40px; font-size:9px; font-family:Arial; text-align:center; color:#dfe3e6; }*/ /************************************** * Middle Content => Profile **************************************/ #content #mcontent #profile { float:left; width:577px; padding-bottom:5px; background-color:#25282d; } #content #mcontent #profile ul#mhead { float:left; width:417px; height:26px; background:url(images/ps-profile-mheader.jpg) no-repeat; } #content #mcontent #profile ul#mhead li { width:155px; float:left; font-size:10px; padding:7px 0 0 35px; height:18px; } #content #mcontent #profile ul#mhead li.us { width:100px; background:url(images/icons/ps-us-icon.jpg) no-repeat 10px 7px; } #content #mcontent #profile ul#control { width:159px; height:22px; padding:4px 0 0 1px; background:url(images/ps-ul-control-bg.jpg) no-repeat; float:left; } #content #mcontent #profile ul#control li { width:43px; height:12px; font-size:9px; padding-left:7px; float:left; } #content #mcontent #profile ul#control li img { float:left; } /*** ***/ #content #mcontent #profile #uprofile { float:left; background:url(images/ps-uprofile-bg.jpg) repeat-y; } #content #mcontent #profile #uprofile #uarea { width:365px; float:left; color:#2b2f32; } #content #mcontent #profile #uprofile #uarea h3 { height:25px; text-indent:-9000px; background:url(images/ps-uprofile-header.jpg) no-repeat; } #content #mcontent #profile #uprofile #uarea div#fields { padding:6px 0 0 12px; width:353px; } #content #mcontent #profile #uprofile #uarea div img { float:left; } #content #mcontent #profile #uprofile #uarea div dl { margin-left:-12px; width:176px; font-family:Arial, Tahoma, Verdana; font-size:10px; float:right;} #content #mcontent #profile #uprofile #uarea div dl dt { width:62px; color:#696d6c; float:left; } #content #mcontent #profile #uprofile #uarea div dl dd { overflow:hidden; width:110px; color:#2a2e31; float:left; } #content #mcontent #profile #uprofile #uarea div dl dd a { color:#2a2e31; } /*#content #mcontent #profile #uprofile #uarea div p { float:right; padding:5px 16px 10px 0; color:#2b2f32; width:161px; }*/ #content #mcontent #profile #uprofile #uarea div { margin:8px; } /* #content #mcontent #profile #uprofile #uarea table { width:365px; float:left; } #content #mcontent #profile #uprofile #uarea table tr td { text-align:center; } #content #mcontent #profile #uprofile #uarea table tr td p { color:#94989b; padding-bottom:5px; } */ #content #mcontent #profile #uprofile #listings { width:211px; float:right; } #content #mcontent #profile #uprofile #listings h3 { float:left; width:211px; height:25px; text-indent:-9000px; } #content #mcontent #profile #uprofile #listings h3#cspecs { background:url(images/ps-compspecs-header.jpg) no-repeat; } #content #mcontent #profile #uprofile #listings h3#ufavs { background:url(images/ps-ufavorites-header.jpg) no-repeat; } #content #mcontent #profile #uprofile #listings h3#flist { background:url(images/ps-friendslist-header.jpg) no-repeat; } #content #mcontent #profile #uprofile #listings h3#bfriend { background:url(images/ps-befriended-header.jpg) no-repeat; } #content #mcontent #profile #uprofile #listings dl { width:211px; clear:left; } #content #mcontent #profile #uprofile #listings dl dt { width:73px; color:#696d70; padding:4px 0 4px 13px; float:left; } #content #mcontent #profile #uprofile #listings dl dt.odd { background-color:#2a2d32; } #content #mcontent #profile #uprofile #listings dl dt.even { background-color:#2d3035; } #content #mcontent #profile #uprofile #listings dl dd { width:125px; color:#dde1e4; float:left; padding:4px 0 4px 0px; } #content #mcontent #profile #uprofile #listings dl dd.odd { background-color:#2d3035; } #content #mcontent #profile #uprofile #listings dl dd.even { background-color:#2d3035; } #content #mcontent #profile #uprofile #listings table { float:left; width:211px; } #content #mcontent #profile #uprofile #listings table tr.odd { background-color:#2a2d32; } #content #mcontent #profile #uprofile #listings table tr.even { background-color:#2d3035; } #content #mcontent #profile #uprofile #listings table tr td { padding:4px 0 4px 9px; } #content #mcontent #profile #uprofile #listings table tr td img { margin-right:5px; } #content #mcontent #profile #uprofile #listings table tr td a { color:#696d70; } #content #mcontent #profile #comments { clear:left; width:577px; background-color:#5d6266; } #content #mcontent #profile #comments h3 { height:25px; text-indent:-9000px; background:url(images/ps-recent-comments.jpg) no-repeat; } #content #mcontent #profile #comments div { padding:2px 0 0 2px; width:575px; } #content #mcontent #profile #comments div h4 { padding:5px 10px 0 0; font-size:11px; height:18px; background:url(images/ps-rcomment-header.jpg) no-repeat; } #content #mcontent #profile #comments div h4 strong { color:#fdae5f; padding:0 8px 0 8px; } #content #mcontent #profile #comments div h4 img { margin-right:7px; } #content #mcontent #profile #comments div h4 em { float:right; color:#94989b; font-style:normal; margin-top:-13px; font-weight:normal; } #content #mcontent #profile #comments div p { background-color:#dfe0e2; width:512px; padding:15px 30px 15px 30px; color:#2d2e32; } /************************************** * Footer **************************************/ #container #footer { height:97px; background:url(images/ps-footer-bg.jpg) repeat-x; } #container #footer p { padding-top:29px; } #container #footer div { width:624px; float:left; padding:27px 0 0 21px; } #container #footer div p { color:#d7dbde; padding-top:0; } #container #footer div ul { width:624px; padding-top:10px; } #container #footer div ul li { display:inline; font-size:10px; color:#919596; padding-right:10px; } #container #footer div ul li a { color:#919596; } #container #footer div ul li a:hover { color:#e6a968; } }