/*------------------------------------------------------------------------ # Girl Tech - MASTER CSS > September, 2007 (v1.0) # ------------------------------------------------------------------------ /*------------------------------------------------------------------------ COMMON STYLES -------------------------------------------------------------------------*/ * { margin: 0px; padding: 0px; margin: 0px; outline: 0px; font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; } table { width: 100%; } /*table { border-collapse: collapse; border-spacing: 0; border: none; width: 100%; }*/ body { font: 62.5% Tahoma, "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif; color: #222; text-decoration: none; background: #6a327c url(../media/layout/bg-body.jpg) no-repeat center top; text-align: center; } a { color: #4e1e61; text-decoration: underline; } a:hover { color: #ff82e3; text-decoration: none; } img { border: none; } strong { font-weight: bold; } ul { list-style: none; } i, em { font-style: italic; } /*--------------------------------------------------------------------- MAIN LAYOUT -------------------------------------------------------------------------*/ #wrapper { height: auto; width: 980px; margin: 0px auto 0px auto; text-align: left; padding: 0px 0px 50px 0px; position: relative; } #flashHeader { } #wrapper-inner { height: auto; width: 976px; margin-left: 2px; background: #ddc8ed url(../media/layout/bg-wrapper-inner.jpg) no-repeat left top; } #wrapper-innerHome { height: auto; width: 976px; margin-left: 2px; } #wrapper-inner-bottom { clear: both; height: 10px; background: url(../media/layout/bg-wrapper-inner-bot.png) no-repeat left top; font-size: 0px; line-height: 0px; } #wrapper-inner-bottom2 { clear: both; height: 10px; background: url(../media/layout/bg-wrapper-inner-bot2.png) no-repeat left top; font-size: 0px; line-height: 0px; } #leftCol { float: left; width: 288px; padding: 0px 0px 0px 8px; } #leftCol #navSub { margin: 1px 0px 9px 2px; background: url(../media/nav/bg-sn.jpg) no-repeat left top; height: 326px; width: 284px; } #leftCol2 { float: left; width: 288px; padding: 0px 0px 0px 8px; } #leftCol2 #navSub { margin: 1px 0px 9px 2px; background: url(../media/nav/bg-sn.jpg) no-repeat left top; height: 306px; width: 284px; } #mainCol { float: left; height: auto; width: 662px; margin: 10px 0px 0px 6px; background: #fff url(../media/layout/bg-mainCol.gif) no-repeat right top; } #mainCol #content { width: 640px; background: url(../media/layout/bg-content.jpg) repeat-x left top; height: auto; } #mainCol #content-inner { width: auto; height: auto; } #mainCol #content-inner.plain { width: auto; height: auto; padding: 20px; } #mainCol #content-inner.prod { width: auto; height: auto; padding: 20px 20px 20px 0px; } #mainCol2 { float: left; height: auto; width: 958px; margin: 10px 0px 0px 6px; background: #fff url(../media/layout/bg-mainCol.gif) no-repeat right top; } #mainCol2 #content { width: 936px; background: url(../media/layout/bg-content.jpg) repeat-x left top; height: auto; } #mainCol2 #content-inner { width: auto; height: auto; } #mainCol2 #content-inner.plain { width: auto; height: auto; padding: 20px; } #mainCol2 #content-inner.prod { width: auto; height: auto; padding: 20px 20px 20px 0px; } #imageNextTobullets #imageNextTobullets { float:right; width:auto; height:auto; padding:60px; } #footer { position: relative; height: 50px; margin-top: 9px; } /*--------------------------------------------------------------------- HOMEPAGE -------------------------------------------------------------------------*/ #homeTop { height: 316px; background: url(../media/layout/bg-home-top.png) no-repeat left top; position: relative; margin-bottom: 4px; } #homeTop #flashVideoPlayer { width: 365px; height: 306px; position: absolute; top: 0px; left: 10px; } #homeTop #flashProductViewer { width: 593px; height: 301px; position: absolute; top: 6px; left: 371px; } #homeMid { height: 272px; background: url(../media/layout/bg-home-mid.png) no-repeat left top; position: relative; margin-bottom: 4px; } #homeMid #homeContest { width: 361px; height: 258px; position: absolute; top: 7px; left: 4px; } #homeMid #homeIM { width: 288px; height: 256px; position: absolute; top: 7px; left: 374px; } #homeMid #homeForums { width: 295px; height: 259px; position: absolute; top: 4px; left: 671px; background: url(../media/layout/bg-home-forums.png); font-size: 1.1em; line-height: 1.4em; } #homeBot { height: 272px; background: url(../media/layout/bg-home-bot.png) no-repeat left top; position: relative; } #homeBot #homePoll { width: 288px; height: 253px; position: absolute; top: 9px; left: 9px; background: url(../media/layout/bg-home-poll.png); font-size: 1.1em; line-height: 1.4em; } #homeBot #homeDownloads { width: 364px; height: 253px; position: absolute; top: 9px; left: 302px; background: url(../media/layout/bg-home-downloads.png); font-size: 1.1em; line-height: 1.4em; } #homeBot #homeCafe { width: 288px; height: 253px; position: absolute; top: 9px; left: 673px; background: url(../media/layout/bg-home-cafe-comingsoon.png); } /* Community Forums ------------------------------------------------------------------------ */ a.viewAllForums { width: auto; height: auto; position: absolute; top: 19px; left: 190px; color: #cadc52; } #homeForums p.title { width: auto; height: auto; position: absolute; top: 160px; left: 20px; color: #f9a2e6; font-weight: bold; } #homeForums p.list { width: 250px; height: auto; position: absolute; top: 180px; left: 20px; font-size: .9em; color: #fff; line-height: 1.5em; } #homeForums p.list a { color: #fff; } #homeForums ul#forumList { width: auto; height: auto; position: absolute; top: 50px; left: 20px; } #homeForums ul#forumList li { float: left; width: 80px; height: auto; line-height: 1.6em; } #homeForums ul#forumList li a { color: #ff82e3; display: block; width: auto; } #homeForums ul#forumList li a:hover { color: #fff; text-decoration: underline; } /* Latest Poll ------------------------------------------------------------------------ */ #homePoll p { color: #ff82e3; margin: 40px 20px 5px 20px; } #homePoll form p { color: #FFF; padding: 0px 0px 0px 0px; margin: 40px 10px 5px 20px; } #homePoll form p.submit { padding: 0px; text-align: center; margin: 0px 20px 5px 20px; } #homePoll form label { font-weight: bold; padding: 0px 0px 2px 0px; display: block; } /* Downloads ------------------------------------------------------------------------ */ #homeDownloads #downLeft { width: 143px; height: auto; position: absolute; top: 40px; left: 17px; } #homeDownloads #downRight { width: 200px; height: auto; position: absolute; top: 40px; left: 160px;} #homeDownloads p.title { color: #ff82e3; padding-left: 3px; padding-bottom: 10px; } #homeDownloads ul#products { padding-left: 3px; } #homeDownloads ul#products li { color: #fff; line-height: 1.2em; padding-bottom: .8em; } #homeDownloads ul#products li a { color: #cadc52; font-weight: bold; text-decoration: none; } #homeDownloads ul#products li a:hover { color: #ffa1cc; } #homeDownloads img.wallpaper { border: 1px solid #9c69b5; margin-left: 3px; } #homeDownloads img.wallpaper:hover { border: 1px solid #fff; } a.freeIMdownload { width: 196px; height: 56px; display: block; text-indent: -9999px; background: url(../media/layout/a-freeIMdownload.png) no-repeat left top; margin-top: 10px; } a.freeIMdownload:hover { background: url(../media/layout/a-freeIMdownload.png) no-repeat left bottom; } a.viewAllSoftwareUpdates { width: 143px; height: 16px; display: block; text-indent: -9999px; background: url(../media/layout/a-viewAllSoftwareUpdates.gif) no-repeat left top; position: absolute; top: 220px; left: 17px; } a.viewAllSoftwareUpdates:hover { background: url(../media/layout/a-viewAllSoftwareUpdates.gif) no-repeat left bottom; } a.viewAllWallpapers { width: 180px; height: 16px; display: block; text-indent: -9999px; background: url(../media/layout/a-viewAllWallpapers.gif) no-repeat left top; position: absolute; top: 220px; left: 168px; } a.viewAllWallpapers:hover { background: url(../media/layout/a-viewAllWallpapers.gif) no-repeat left bottom; } /* Game Cafe ------------------------------------------------------------------------ */ a.wordGames { width: 265px; height: 54px; display: block; text-indent: -9999px; background: url(../media/layout/a-wordGames.png) no-repeat left top; position: absolute; top: 41px; left: 11px; } a.wordGames:hover { background: url(../media/layout/a-wordGames.png) no-repeat left bottom; } a.scienceGames { width: 265px; height: 54px; display: block; text-indent: -9999px; background: url(../media/layout/a-scienceGames.png) no-repeat left top; position: absolute; top: 95px; left: 11px; } a.scienceGames:hover { background: url(../media/layout/a-scienceGames.png) no-repeat left bottom; } a.mathGames { width: 265px; height: 54px; display: block; text-indent: -9999px; background: url(../media/layout/a-mathGames.png) no-repeat left top; position: absolute; top: 149px; left: 11px; } a.mathGames:hover { background: url(../media/layout/a-mathGames.png) no-repeat left bottom; } a.viewMoreGames { width: 180px; height: 16px; display: block; text-indent: -9999px; background: url(../media/layout/a-viewMoreGames.gif) no-repeat left top; position: absolute; top: 220px; left: 17px; } a.viewMoreGames:hover { background: url(../media/layout/a-viewMoreGames.gif) no-repeat left bottom; } /*--------------------------------------------------------------------- Products/Electronics -------------------------------------------------------------------------*/ #prod-left { float: left; width: 320px; height: auto; padding: 20px 0px 0px 0px; } #prod-middle { float: right; width: 90px; height: auto; padding: 0px 0px 0px 200px;} #prod-left #prod-intro { background: #fff; padding: 20px; margin-bottom: 20px; } #prod-left #prod-intro p { font-style: italic; color: #4e1e61;} #prod-left .noBotPad { padding-bottom: 0px; } #prod-right { float: right; width: 300px; height: auto; padding: 20px 10px 20px 0px; position: relative; } #prod-right #prodImg { background: url(../media/layout/bg-prodImg.gif) no-repeat; width: 300px; height: 340px; } #prod-right #prodImg img { margin-top: 10px; margin-left: 10px; } #prod-right #prodThumbs { padding-top: 20px; } #prod-middle #prodThumbs mid {position: relative; left: 500px;} a.prodThumb { width: 98px; height: 88px; background: #fff url(../media/layout/prodImg-thumb.gif) no-repeat 0 0; display: block; float: left; } a.prodThumb:hover { background: #fff url(../media/layout/prodImg-thumbHover.gif) no-repeat 0 0; border: 0 solid #fff; } /* a.current { background: #fff url(../media/layout/prodImg-thumbHover.gif) no-repeat 0 0; } */ a.prodThumb img { margin-top: 4px; margin-left: 4px; } a.prodThumb span { position: absolute; left: -9999px; top: 0px; visibility: hidden; text-decoration: none; } a.prodThumb:hover span { left: 6px; top: 26px; visibility: visible; text-decoration: none; z-index: 500; } /* a.current span { left: 6px; top: 26px; visibility: visible; text-decoration: none; z-index: 500; } a.prodThumb:hover span {background: #fff; z-index: 501 ! important;} */ a.mid { margin-left: 3px; margin-right: 3px; } /*--------------------------------------------------------------------- MENU: Sub -------------------------------------------------------------------------*/ ul#subNav { padding: 15px 0px 0px 11px; margin: 0px; list-style: none; width: 260px; } ul#subNav li { width: auto; _height: 1%; } ul#subNav li a { font-size: 1.5em; font-weight: bold; color: #ffa6e3; text-decoration: underline; padding: 1px 0px 1px 27px; margin: 5px 0px 5px 0px; _margin: 2px 0px 2px 0px; display: block; background: url(../media/layout/sn-arrow-white-lrg.gif) no-repeat 16px center; } ul#subNav li a:hover { color: #FFF; text-decoration: none; } ul#subNav li a.active { color: #974394; text-decoration: none; background: #FFF url(../media/layout/sn-arrow-purple-lrg.gif) no-repeat 16px center; } ul#subNav ul { padding: 0px 0px 0px 0px; margin: 0px; list-style: none; width: 261px; } ul#subNav ul li { width: auto; _height: 1%; } ul#subNav ul li a { font-size: 1.1em; font-weight: normal; color: #fff; text-decoration: underline; padding: 2px 0px 2px 47px; margin: 3px 0px 3px 0px; _margin: 1px 0px 1px 0px; display: block; background: url(../media/layout/sn-arrow-white-sm.gif) no-repeat 39px center; } ul#subNav ul li a:hover { color: #974394; text-decoration: none; } ul#subNav ul li a.active { color: #974394; text-decoration: none; background: url(../media/layout/sn-arrow-purple-sm-active.gif) no-repeat 0px center; font-weight: bold; } /*--------------------------------------------------------------------- MENU: Footer -------------------------------------------------------------------------*/ #navPink { list-style: none; margin: 0px; padding: 0px; position: absolute; top: 0px; left: 346px; } #navPink li { display: block; float: left; width: auto; padding: 0px 3px 0px 3px; color: #ffa1cc; } #navPink li a { color: #ffa1cc; text-decoration: underline; } #navPink li a:hover { color: #fff; text-decoration: none; } #navWhite { list-style: none; margin: 0px; padding: 0px; position: absolute; top: 0px; left: 636px; } #navWhite li { display: block; float: left; width: auto; padding: 0px 3px 0px 3px; color: #fff; } #navWhite li a { color: #fff; text-decoration: underline; font-weight: bold; } #navWhite li a:hover { color: #ffa1cc; text-decoration: none; } a.privacy { width: 102px; height: 16px; background: url(../media/layout/a-privacyPolicy.gif) no-repeat left top; text-indent: -9999px; display: block; position: absolute; left: 750px; top: 22px; } a.privacy:hover { background: url(../media/layout/a-privacyPolicy.gif) no-repeat left bottom; } a.terms { width: 116px; height: 16px; background: url(../media/layout/a-termsCond.gif) no-repeat left top; text-indent: -9999px; display: block; position: absolute; left: 856px; top: 22px; } a.terms:hover { background: url(../media/layout/a-termsCond.gif) no-repeat left bottom; } /*--------------------------------------------------------------------- FOOTER -------------------------------------------------------------------------*/ #footer p.copyright { color: #fff; position: absolute; top: 0px; left: 0px; font-family: Verdana, Arial, Helvetica, sans-serif; line-height: 1.3em; } #footer p.copyright a { color: #ffa1cc; } #footer p.copyright a:hover { color: #ffa1cc; text-decoration: underline; } /*--------------------------------------------------------------------- BREADCRUMB -------------------------------------------------------------------------*/ p.breadcrumb { color: #6a327c; font-size: 1.0em; height: 35px; line-height: 40px !important; margin: 0px 0px 0px 25px !important; padding: 0px !important; } p.breadcrumb span { padding: 0px 3px; } p.breadcrumb a { color: #6a327c; font-weight: bold; text-decoration: underline; } p.breadcrumb a:hover { color: #ffa1cc; text-decoration: none; } /*--------------------------------------------------------------------- MODULES -------------------------------------------------------------------------*/ #leftCol .module { background: url(../media/layout/bg-mod-top-leftCol.png) no-repeat left top; padding-top: 10px; } #leftCol .module-inner { background: url(../media/layout/bg-mod-bot-leftCol.png) no-repeat left bottom; } #leftCol2 .module2 { background: url(../media/layout/bg-mod-top-leftCol2.png) no-repeat left top; padding-top: 10px; } #leftCol2 .module-inner2 { background: url(../media/layout/bg-mod-bot-leftCol2.png) no-repeat left bottom; } /* Latest Poll ------------------------------------------------------------------------ */ .module-latestPoll { font-size: 1.1em; line-height: 1.4em; } .module-latestPoll-inner { background: url(../media/layout/bg-mod-latestPoll.gif) no-repeat left bottom; height: 205px; width: 288px; } .module-latestPoll h3 { background: url(../media/layout/hd-latestPoll.gif) no-repeat left bottom; text-indent: -9999px; display: block; height: 20px; width: 87px; margin: 0px 0px 5px 20px; } .module-latestPoll p { color: #ff82e3; margin: 0px 20px 5px 20px; } .module-latestPoll form p { color: #FFF; padding: 20px 0px 0px 0px; } .module-latestPoll form p.submit { padding: 0px; text-align: center; } .module-latestPoll form label { font-weight: bold; padding: 0px 0px 2px 0px; display: block; } /*--------------------------------------------------------------------- LISTS -------------------------------------------------------------------------*/ /* Electronics List ------------------------------------------------------------------------ */ ul#eList { list-style: none; height: 825px; } ul#eList li { background: none; float: left; width: 193px; height: 270px; padding: 0px 7px 7px 0px; position: relative; } ul#eList li.dm { background: url(../media/layout/eList-dm.gif) no-repeat; } ul#eList li.pj { background: url(../media/layout/eList-pj.gif) no-repeat; } ul#eList li.im { background: url(../media/layout/eList-IM.gif) no-repeat; } ul#eList li.vj { background: url(../media/layout/eList-vj.gif) no-repeat; } ul#eList li.pp { background: url(../media/layout/eList-pp.gif) no-repeat; } ul#eList li.pen { background: url(../media/layout/eList-pen.gif) no-repeat; } ul#eList li.mb { background: url(../media/layout/eList-mb.gif) no-repeat; } ul#eList li.wd { background: url(../media/layout/eList-wd.gif) no-repeat; } ul#eList li a { display: block; position: relative; left: 15px; text-decoration: none; font-weight: bold; } ul#eList li p { display: block; padding-right: 20px; position: absolute; top: 175px; left: 15px; text-decoration: none; font-weight: bold; } /* Community List ------------------------------------------------------------------------ */ ul#cList { list-style: none; height: 365px; } ul#cList li { background: none; float: left; width: 193px; height: 180px; padding: 0px 7px 7px 0px; position: relative; } ul#cList li.mb { background: url(../media/layout/cList-msgBoards.gif) no-repeat; } ul#cList li.po { background: url(../media/layout/cList-polls.gif) no-repeat; } ul#cList li.lgt { background: url(../media/layout/cList-letters.gif) no-repeat; } ul#cList li.nl { background: url(../media/layout/cList-newsletters.gif) no-repeat; } ul#cList li a { display: block; position: relative; left: 15px; text-decoration: none; font-weight: bold; } /* Facts List ------------------------------------------------------------------------ */ ul#fList { list-style: none; height: 555px; } ul#fList li { background: none; float: left; width: 193px; height: 180px; padding: 0px 7px 7px 0px; position: relative; } ul#fList li.hm { background: url(../media/layout/fList-history.gif) no-repeat; } ul#fList li.fq { background: url(../media/layout/fList-faqs.gif) no-repeat; } ul#fList li.cu { background: url(../media/layout/fList-contact.gif) no-repeat; } ul#fList li.pp { background: url(../media/layout/fList-privacy.gif) no-repeat; } ul#fList li.tu { background: url(../media/layout/fList-terms.gif) no-repeat; } ul#fList li.np { background: url(../media/layout/fList-news.gif) no-repeat; } ul#fList li.sl { background: url(../media/layout/fList-store.gif) no-repeat; } ul#fList li a { display: block; position: relative; left: 15px; text-decoration: none; font-weight: bold; } /* Games & Downloads ------------------------------------------------------------------------ */ ul#gList { list-style: none; } ul#gList li { background: none; float: left; width: 193px; height: 180px; padding: 0px 7px 7px 0px; position: relative; } ul#gList li.gg { background: url(../media/layout/gList-games.gif) no-repeat; } ul#gList li.dd { background: url(../media/layout/gList-downloads.gif) no-repeat; } ul#gList li.ll { background: url(../media/layout/gList-links.gif) no-repeat; } ul#gList li.tt { background: url(../media/layout/gList-tips.gif) no-repeat; } ul#gList li.swap { background: url(../games/images/swapASmileyIcon.png) no-repeat; } ul#gList li.word { background: url(../games/images/wordScrambleIcon.png) no-repeat; } ul#gList li.scores { background: url(../games/images/HighScoresIcon.png) no-repeat; } ul#gList li a { display: block; position: relative; left: 15px; text-decoration: none; font-weight: bold; } /* Downloads: Wallpapers ------------------------------------------------------------------------ */ ul#dList { list-style: none; height: auto; } ul#dList li { background: none; float: left; width: 193px; height: 180px; padding: 0px 7px 7px 0px; position: relative; display: inline; } ul#dList li.wall { background: url(../media/downloads/dList-template.gif) no-repeat; } ul#dList li img { display: block; position: absolute; top: 10px; left: 10px; width: 173px; height: 145px; } ul#dList li a.linkwall { display: block; position: absolute; top: 158px; left: 15px; text-decoration: none; font-weight: bold; } /* Downloads: Software ------------------------------------------------------------------------ */ ul#sList { list-style: none; height: auto; } ul#sList li { background: none; float: left; width: 193px; height: 270px; padding: 0px 7px 7px 0px; position: relative; display: inline; } ul#sList li.sWare { background: url(../media/downloads/sList-template.gif) no-repeat; } ul#sList li img { display: block; position: absolute; top: 10px; left: 10px; width: 173px; height: 145px; } ul#sList li a.linksWare { display: block; position: absolute; top: 158px; left: 15px; text-decoration: none; font-weight: bold; } ul#sList li p { display: block; padding-right: 20px; position: absolute; top: 175px; left: 15px; text-decoration: none; font-weight: bold; } /* Store Locations/Buy Online List ------------------------------------------------------------------------ */ ul#stList { list-style: none; height: auto; } ul#stList li { background: none; float: left; width: 193px; height: 180px; padding: 0px 7px 7px 0px; position: relative; display: inline; } ul#stList li.st { background: url(../media/layout/storeLoc-template.gif) no-repeat; } ul#stList li img { display: block; position: absolute; top: 10px; left: 10px; width: 173px; height: 145px; } ul#stList li a.siteLink { display: block; position: absolute; top: 155px; left: 15px; text-decoration: none; font-weight: bold; } /*--------------------------------------------------------------------- MISC BUTTONS -------------------------------------------------------------------------*/ a.writeLetter { width: 265px; height: 54px; display: block; text-indent: -9999px; background: url(../media/layout/a-writeLetter.gif) no-repeat left top; } a.writeLetter:hover { background: url(../media/layout/a-writeLetter.gif) no-repeat left bottom; } /*--------------------------------------------------------------------- FORMS -------------------------------------------------------------------------*/ form .inputTxt { padding: 5px; border: 1px solid #CCC; font-size: 1.4em; width: 300px; } form .inputTxtArea { padding: 5px; border: 1px solid #CCC; font-size: 1.4em; width: 585px; } form label { font-weight: bold; }