/************************************************************** * All colors, fonts, and image styling goes here. **************************************************************/ /************************************************************** * General HTML Selectors- more can be added **************************************************************/ dt { margin: 0px; padding: 0px 0px 3px 0px; } dd { margin: 0px; padding: 0px 0px 10px 0px; } label { color: #000000; font: 900 13px Verdana, Arial, Geneva, Helvetica, sans-serif; margin: 3px 0px 3px 0px; } input { color: #000000; border: 2px solid #c0c0c0; font: 14px Verdana, Arial, Geneva, Helvetica, sans-serif; padding: 1px 1px 1px 3px; } select { color: #000000; border: 2px solid #c0c0c0; font: 14px Verdana, Arial, Geneva, Helvetica, sans-serif; } textarea { color: #000000; border: 2px solid #c0c0c0; font: 14px Verdana, Arial, Geneva, Helvetica, sans-serif; } a {color: #0290e6;} a:hover {color: #88bdc7;} /************************************************************** * For all web pages in the site. bodyStyle is for * and siteWrapperStyle has the background image of the site. * Both of these selectors are found in default.jsp and * landing.jsp **************************************************************/ /****This is where font and font color is set as default ***/ .bodyStyle { color: #022f64; background-color: #88bdc7; background-image: url('../images/pageBackground.gif'); background-repeat: repeat-x; font: 11px Verdana, Arial, Geneva, Helvetica, sans-serif; } .siteWrapperStyle { background-image: url('../images/mainBackground.gif'); background-repeat: repeat-y; background-position: 0px 48px; /* background-color: #1d5b82;*/ /* background-color: #ff0000; */ } /************************************************************** * Main Header Style- this is the area that contains your logo **************************************************************/ .headerStyle { background-image: url('../images/headerBackground.gif'); background-repeat: no-repeat; background-color: #1d5b82; } /************************************************************** * Top Navigation- This is the navigation bar underneath * the main header. There's the games flyout menu, link to WAP * site, Help page, and search. **************************************************************/ .gsHeaderStyle { background-image:url(''); background-repeat:repeat-x; } /*top nav styles*/ .submenuindicator {display:none;} .topMenuLinkStyle { padding: 4px 5px 1px 5px; font-family: Verdana, Arial, Geneva, Helvetica, sans-serif; font-size: 13px; font-weight: bold; } .topMenuDivider { padding: 4px 10px 1px 10px; font-family: Verdana, Arial, Geneva, Helvetica, sans-serif; font-size: 13px; font-weight: bold; color: #fff000; background-color: #1f87a4; } #topnav a:link, #topnav a:visited { color: #fff000; background-color: #1f87a4; } #topnav a:hover { color: #ffc000; background-color: #1f87a4; } /**** Games flyout menu style ****/ .subMenuLinkStyle { padding: 4px 10px 1px 10px; font-family: Verdana, Arial, Geneva, Helvetica, sans-serif; font-size: 12px; font-weight: bold; } #topnav ul li a:link, #topnav ul li a:visited { color: #06516c; font-weight: bold; /*background-color: #7394bb;*/ background-color: #ffffff; } #topnav ul li a:hover { color: #ffc000; background-color: #EEF3F4; } /**** header search ****/ .inputSearchBox { font-family: Verdana, Arial, Geneva, Helvetica, sans-serif; width:120px; margin: 0px 0px 0px 0px; } .inputSearchButton { margin: 2px 0px 0px 0px; } /**** header login button ****/ .gsHeaderLoginButton { float: right; display: inline; margin: 0px; padding: 4px; height: 21px; } #gsHeaderSigninBtn ul { list-style: none; display: inline; margin: 0px; padding: 0px; } #gsHeaderSigninBtn li { float: left; display: inline; padding: 0px 3px 0px 3px; } /************************************************************** * Main Content Styles- After the secondary header, there's * the main content section. **************************************************************/ .mainWrapperStyle { background-color: #ffffff; width: 636px; margin: 0px 0px 10px 7px; } .mainWrapperWholePageStyle { background-color: #ffffff; width:838px; margin: 0px 0px 6px 7px; } /**TODO delete this eventually, other files depend on it right now**/ .gamejumpFormat { width: 641px; padding:1px 0px 0px 0px; margin: 0px 0px 6px 12px; } /* Title that goes in the mainWrapper */ .pageTitleFormat { clear:both; float: left; display: inline; width: 608px; color:#16496f; font-size:16px; font-weight: bold; letter-spacing: 1px; padding-left: 20px; margin: 15px 0px 8px 7px; border-bottom: 3px solid #e8f6fa; } .pageTitleFullPageFormat { clear:both; float: left; display: inline; width: 786px; color:#16496f; font-size:16px; font-weight: bold; letter-spacing: 1px; margin: 15px 0px 5px 26px; border-bottom: 3px solid #e8f6fa; } /* Title that goes in the header box for My Account and Locker */ .boxTitleFormat { color:#ffffff; font-size:15px; font-weight: bold; margin: 5px 0px 0px 10px; text-transform: uppercase; } /* not used- generic class for div with blue header area...mostly used by the main content area */ .boxHeader { background-image:url('../images/hdr_bg1x20.gif'); background-position: top left; background-repeat: repeat-x; } .highlightBox { border: 2px solid #e8f6fa; background-color: #ffffff; } /************************************************************** * Footer style **************************************************************/ /*** this next selector is not being used by Greystripe ***/ .gsFooterStyle { display: none; width: 816px; height: 20px; text-align: center; padding: 0px 0px 0px 0px; margin: 5px 12px 5px 12px; } /* edit below for footer style*/ .footerStyle { background-image:url('../images/footerBackgroundWhite.gif'); background-repeat: no-repeat; width: 852px; height: 20px; text-align: center; padding: 20px 0px 0px 10px; background-color: #88bdc7; } .footerSmallFont { font-size: 10px; color: #ffffff; } .footerSmallFontNoLineLink { font-size: 10px; color: #ffffff; text-decoration: none; } #footer a:hover {color:#fa8f04;} /************************************************************** * Right column specific selectors **************************************************************/ .rightColumnHeader { clear:both; float: left; display: inline; background-image:url('../images/rightColumnHead.gif'); background-position: top left; background-repeat: no-repeat; height: 31px; width: 186px; } .rightColumnTop { clear:both; float: left; display: inline; background-image:url('../images/rightColumnBgTop.gif'); background-position: top left; background-repeat: no-repeat; height: 3px; width: 186px; font-size:1px; } .register, .ssoLessPhoneBox{ clear:both; float: left; display: inline; background-image:url('../images/rightColumnBgCenter.gif'); background-position: top left; background-repeat: y-repeat; height: 100px; width: 186px; padding: 0px 0px 0px 0px; overflow:hidden; } .ssoLessPhoneBox { height: 110px; } .account { clear:both; float: left; display: inline; background-image:url('../images/rightColumnBgCenter.gif'); background-position: top left; background-repeat: y-repeat; height: 195px; width: 186px; padding: 10px 0px 0px 0px; overflow:hidden; } .accountSectionBorder { border-bottom: 2px solid #e8f6fa; } .smallLocker { float: left; display: inline; background-image:url('../images/rightColumnBgAltCenter.gif'); background-position: top left; background-repeat: y-repeat; min-height: 245px; width: 179px; padding: 10px 0px 0px 7px; overflow:hidden; } .bottomAccount { float: left; display: inline; background-image:url('../images/rightColumnBgBottom.gif'); background-position: top left; background-repeat: no-repeat; height: 4px; width: 186px; font-size:1px; } .bottomLocker { float: left; display: inline; background-image:url('../images/rightColumnBgAltBottom.gif'); background-position: top left; background-repeat: no-repeat; height: 4px; width: 186px; font-size:1px; } /************************************************************** * Home Page specific selectors **************************************************************/ .homeOptions { background-image: url('../images/promoBackground.gif'); } .landingCategoryTitle { font-size: 12px; font-weight: bold; color: #000000; } .landingGamesBoxStyle { border: none; background-color: #ffffff; } .landingSelectPhoneBoxStyle { background-image: url('../images/browseBarBackground.gif'); } .landingGameStyle { background-image: url('../images/gameBackground.gif'); background-color: #ffffff; } .landingTitleFormat { color:#022f64; font-size:13px; letter-spacing: 1px; padding: 1px 0px 0px 10px; text-align: center; } /**** Category listing on the bottom *****/ .landingCategoryTitle { color: #fff000; font-size:13px; letter-spacing: 1px; } .landingCategoriesStyle { background-color: #dde7e9; background-image: url('../images/footerBackground.gif'); background-repeat: no-repeat; } .landingRegisterBoxStyle { background-image: url('../images/registerBackground.gif'); background-repeat: no-repeat; background-position: top left; } a.appCategories { float:left; display:block; height:22px; background-image: url('../images/buttons/categoryButtonRight.gif'); background-repeat: no-repeat; background-position: top right; margin: 0px 2px 0px 0px; padding: 0px 22px 0px 0px; text-decoration: none; } a.appCategories span { float:left; background-image: url('../images/buttons/categoryButtonLeft.gif'); background-repeat: no-repeat; background-position: top left; margin: 0px 0px 0px 1px; padding:4px 0px 8px 6px; font-weight:bold; font-size:10px; color:#fff000; white-space: nowrap; } /************************************************************** * Games page **************************************************************/ #gameListForCategory img { display: block; width: 70px; height: 70px; border: 2px solid #16496f; } #gameCategoryList li.catBox { background-image: url('../images/categoryBg.gif'); background-position: top left; background-repeat: no-repeat; } /************************************************************** * Application (Game) Details page **************************************************************/ .gameTitle { font-weight:bold; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:17px; color:#000000; } #gameThumbnail { background-image:url('../images/applicationGameBg.gif'); background-repeat: no-repeat; background-position: top left; } /* Tab buttons styles for active and inactive state. */ a.tabInactiveButton, a.tabActiveButton{ float: left; background-repeat: no-repeat; background-position: top right; padding: 0px 4px 0px 0px; margin-right:10px; font-weight:bold; font-size: 12px; text-decoration:none; } a.tabActiveButton{ color: #022F64; } a.tabInactiveButton{ color: #fff000; } a.tabInactiveButton span, a.tabActiveButton span{ float: left; background-position: top left; background-repeat: no-repeat; padding: 4px 5px 5px 9px; } a.tabInactiveButton span { z-index: -110000000000; } /* The buttons used specificaly for the app details page. */ a.addGameButton { float: left; background-repeat: no-repeat; background-position: top right; padding: 0px 9px 0px 0px; margin-right:10px; color: #ffffff; font-weight:bold; font-size: 13px; text-decoration:none; background-image: url('../images/buttons/btn_blue_1line_right.png'); } a.addGameButton span { float: left; display:block; line-height:12px; background-position: top left; background-repeat: no-repeat; padding: 4px 1px 4px 9px; background-image: url('../images/buttons/btn_blue_1line_left.png'); } /*** Screenshots, description, and high scores ****/ a.tabActiveButton { background-image: url('../images/tabs/moduleTabBgRightActive.gif'); } a.tabActiveButton span { background-image: url('../images/tabs/moduleTabBgLeftActive.gif'); } a.tabInactiveButton { background-image: url('../images/tabs/moduleTabBgRight.gif'); } a.tabInactiveButton span { background-image: url('../images/tabs/moduleTabBgLeft.gif'); } #appTabContentTop { background-image: url('../images/applicationModuleBgTop.gif'); height: 5px; } #appTabContentDiv { clear:both; float:left; background-image: url('../images/applicationModuleBgCenter.gif'); background-repeat: repeat-y; height: auto; display:inline; width:568px; } #appTabContentBottom { background-image: url('../images/applicationModuleBgBottom.gif'); height: 5px; } /*divs for the background*/ .backgroundTop { clear:both; float:left; display:inline; height: 8px; width:590px; background-image:url('../images/applicationBgTop.gif'); background-repeat: no-repeat; background-position: top left; font-size:1px; } .backgroundMiddle { clear:both; float:left; display:inline; width:590px; min-height: 350px; background-color:#EEF3F4; margin:0px; padding:0px; } .backgroundBottom { clear:both; float:left; display:inline; width:590px; height: 8px; background-image:url('../images/applicationBgBottom.gif'); background-repeat: no-repeat; background-position: top left; font-size:1px; } .downloadKeyHeader{ background-image:url(../images/downloadKeyTop.gif); background-position:left top; background-repeat:no-repeat; clear:both; display:inline; text-align:center; float:left; height:25px; width:312px; } .downloadKeyTop { background-image:url(../images/rightColumnBgTop.gif); background-position:left top; background-repeat:no-repeat; clear:both; display:inline; float:left; font-size:1px; height:3px; width:312px; } .downloadKeyCenter { background-image:url(../images/downloadKeyCenter.gif); background-position:left top; clear:both; display:inline; float:left; overflow:hidden; padding:0px; width:312px; } .downloadKeyBottom { background-image:url(../images/downloadKeyBottom.gif); background-position:left top; background-repeat:no-repeat; display:inline; float:left; font-size:1px; height:4px; width:312px; } /************************************************************** * Category/Search results **************************************************************/ .featureImageStyle { background-color: #454545; border: 2px solid #c2c2c2; } .gameSummaryBoxStyle { background-image: url('../images/categoryGameBg.gif'); background-position: top left; background-repeat: no-repeat; } /************************************************************** * Document pages: help, terms, privacy **************************************************************/ .document { font-size: 10px; color: #022f64; } /************************************************************** * Locker Page **************************************************************/ /*divs for the locker tab*/ .tabTableTop{ background-image:url('../images/lockerModuleBgTop.gif'); background-repeat: no-repeat; background-position: top left; } .tabTableMiddle{ background-image:url('../images/lockerModuleBgCenter.gif'); background-repeat: y-repeat; background-position: top left; } .tabTableBottom{ background-image:url('../images/lockerModuleBgBottom.gif'); background-repeat: no-repeat; background-position: top left; } table.readyHeader td.entryRowHeader { font: bold 11px Verdana, Arial, Helvetica, sans-serif; color: #063b70; letter-spacing: 1px; text-transform: uppercase; height:16px; padding: 7px 10px 4px 7px; text-align: left; } table.readyHeader td.removeEntryHeader { font: bold 11px Verdana, Arial, Helvetica, sans-serif; color: #063b70; letter-spacing: 1px; text-transform: uppercase; height:16px; padding: 7px 10px 4px 7px; text-align: center; } table.ready td.entryRow { height:20px; font: bold 11px Verdana, Arial, Helvetica, sans-serif; color: #063b70; border-bottom: 1px dotted #C1DAD7; text-align: left; padding: 10px; background-color: #ffffff; } table.ready td.removeEntry { height:20px; text-align: center; font: bold 11px Verdana, Arial, Helvetica, sans-serif; color: #063b70; border-bottom: 1px dotted #C1DAD7; padding: 10px; background-color: #ffffff; } /************************************************************** * Text, Anchor links, and Borders * font-family is not set for any of these because they are * inherit bodyStyle's font-family. However, should you want * have a specific font family for these selectors, you can * add that property. **************************************************************/ .bold {font-weight: bold;} .caps {text-transform: uppercase;} .noLine {text-decoration: none;} .center {text-align: center;} .left {text-align: left;} .white {color: #ffffff;} /* used in game title and description */ .verySmallTextFont { font-size: 10px; color: #034058; } .smallBlackTextFont { font-size: 9px; color: #000000; } .smallTextFont { font-size: 11px; color: #034058; } /* login pg */ .mediumTextFont { font-size: 13px; color: #666666; } .thirteenFontText { font-size: 13px; color: #000000; } .largeTextFont { font-size: 13px; color: #16496f; } .lightLargeTextFont { font-size: 13px; color: #ffffff; } .fourteenFontText { font-size: 14px; color: #000000; } .veryLargeTextFont { font-size: 15px; color: #000000; } .veryLargeWhiteTextFont { font-size: 14px; color: #ffffff; } .superLargeTextFont { font-size: 17px; color: #16496f; } /* orange login pg*/ .seventeenFontText { font-size: 17px; color: #fa8f04; } /* login pg */ .twentyFontText { font-size: 20px; color: #16496f; } .verySmallFontLink { font-size: 8px; color: #ffffff; } .smallFontLink { font-size: 10px; color: #0290e6; } .mediumBlackFontLink { font-size: 11px; color: #000000; text-decoration: none; } /*blue anchor on login and other pgs*/ .mediumFontLink { font-size: 13px; color: #0290e6; } /*blue- used in download help pg*/ .largeFontLink { font-size: 14px; color: #022f64; } /* games page */ .categoryLink { font-size: 11px; color: #fff000; } /*blue- used in gs footer, game pg*/ .smallFontNoLineLink { font-size: 10px; color:#034058; text-decoration: none; } .errorTextFont { font-size: 12px; color: #fc7e39; text-decoration: none; } .errorTextColor {color: #fc7e39;} /******************* Borders ************************/ /*black image border used in landing, games page*/ .gameImageBorder {border: 1px solid #000000;} /*landing page*/ .solidTwoPxBorder {border: 2px solid #ffe066;} /* this is used in the games, search results page*/ .dottedBorder {border: 1px dotted #5c80a8;} .blueBorder {border: 2px solid #e8f6fa;} /******************* Buttons ************************/ a.yellowButton { display:block; float:left; height:21px; background-image:url('../images/buttons/btnYellowSmRight.gif'); background-repeat: no-repeat; background-position: top right; margin-right: 1px; padding-right: 20px; text-decoration:none; } a.yellowButton span { display: block; background-image:url('../images/buttons/btnYellowSmLeft.gif'); background-repeat: no-repeat; background-position: top left; padding:2px 0px 11px 9px; color:#000000; font-size:12px; font-weight:bold; white-space: nowrap; } /* help contain the buttons and space them*/ .mediumBtnDivStyle { float:left; display: inline; height: 27px; margin: 5px 15px 5px 0px; } a.mediumButton { display:block; float:left; height:27px; background-repeat: no-repeat; background-position: top right; margin-right: 1px; padding-right: 28px; text-decoration:none; } a.mediumButton span { display: block; background-repeat: no-repeat; background-position: top left; padding:4px 0px 11px 9px; font-size:14px; font-weight:bold; white-space: nowrap; line-height: normal; } a.mediumYellowButton { background-image:url('../images/buttons/btnYellowLgRight.gif'); } a.mediumYellowButton span { background-image:url('../images/buttons/btnYellowLgLeft.gif'); color:#000000; } a.mediumBlueButton { background-image:url('../images/buttons/btnBlueLgRight.gif'); } a.mediumBlueButton span { background-image:url('../images/buttons/btnBlueLgLeft.gif'); color:#f27720; } a.blueButton { display:block; float:left; height:20px; background-image:url('../images/buttons/btn_blue_1line_right.png'); background-repeat: no-repeat; background-position: top right; padding:0px 9px 4px 0px; text-decoration:none; } a.blueButton span { float:left; background-image:url('../images/buttons/btn_blue_1line_left.png'); background-repeat: no-repeat; background-position: top left; padding:4px 0px 5px 10px; font-weight:bold; font-size:10px; color:#fff5cc; white-space: nowrap; } /* very large yellow button on home pg 56px tall*/ a.newYellowButton { display:block; float:left; height:56px; background-image:url('../images/registerButtonRight.gif'); background-repeat: no-repeat; background-position: top right; margin-right: 1px; padding-right: 37px; text-decoration:none; color:#000000; font-size:15px; font-weight:bold; } a.newYellowButton span { display: block; background-image:url('../images/registerButtonLeft.gif'); background-repeat: no-repeat; background-position: top left; padding:6px 0px 7px 9px; line-height:40px; white-space: nowrap; }