/*# # Studio One : The Divine Cat # # # # Started: Dec 5, 2006 # # # # Updated: Dec 18, 2006 # # # # brent@mimoYmima.com # # # # alice@mimoymima.com # # /* Main Link Color: #024553 Article Text: #383838 Red for titles (and hover color): #B81F21 */ /* IE Mac Hacks */ /*\*//*/ @import "son.hacks-ie-mac.css"; /**/ /* - - - General for all pages - - - */ /* -- Links */ #SON a { color: #024553; text-decoration: none; } #SON a:link { color: #024553; text-decoration: none; } #SON a:visited { color: #024553; text-decoration: none; } #SON a:hover { color: #B81F21; text-decoration: none; } #SON a:active { color: #B81F21; text-decoration: none; } /* -- Headings */ #SON #SONContent h2 { margin: 1em 0; } #SON #SONContent h3 { margin-bottom: .3em; } #SON #SONContent h3 a { font-size: 15px; font-weight: bold; } /* Buttons (for this program) */ #SON .SONButton { text-align: center; } /* Paragraphs */ #SON p { line-height: 140%; margin-bottom: 1em; } #SON strong {font-weight: bold;} /* Definitions */ #SON dd { line-height: 140%; margin-bottom: 1em; } /* Column Layout */ #SON .SONColumnLayout:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } /* - - - Page Elements - - - */ /* SON Wrapper ~ note: default size for fonts set in the basic sheet to 12px ~ */ #SON { font-family: Arial, Helvetica, Verdana, sans-serif; color: #383838; background: #FFF; margin: 0 auto; text-align: left; border: 10px solid #FFF; width: 561px; position: relative; } /* -- Masthead */ #SON #SONMasthead { height: 125px; } #SON #SONMasthead #SponsorUnit { width: 188px; height: 118px; float: right; } #SON #ProgramLogo { position: relative; float: left; top: 15px; left: 50px; } #SON .GoogleHeader {margin-bottom: 10px;} /* -- Main Navigation */ /* Image-Based Rollover */ #SON #SONMainNav { float: left; width: 564px; height: 55px; background: url(../images/navmenu2.gif) -2px -55px no-repeat; } #SON #SONMainNav li { float: left; list-style-type: none; display: block; } #SON #SONMainNav li a { display: block; background: url(../images/navmenu2.gif) -2px -55px no-repeat; } #SON #SONMainNav #FF a { width: 164px; height: 55px; text-indent: -9999em; } #SON #SONMainNav #RT a { width: 218px; height: 55px; text-indent: -9999em; } #SON #SONMainNav #QT a { width: 182px; height: 55px; text-indent: -9999em; } #SON #SONMainNav #FF a:hover, #SON #SONMainNav #FF a:focus { background-position: -2px 0; } #SON #SONMainNav #RT a:link, #SON #SONMainNav #RT a:visited { background-position: -166px -55px; } #SON #SONMainNav #RT a:hover, #SON #SONMainNav #RT a:focus { background-position: -166px 0; } #SON #SONMainNav #QT a:link, #SON #SONMainNav #QT a:visited { background-position: -384px -55px; } #SON #SONMainNav #QT a:hover, #SON #SONMainNav #QT a:focus { background-position: -384px 0; } /* Set the active state */ .SONFF #SONMainNav #FF a { background-position: -2px 0; cursor: default; } .SONRT #SONMainNav #RT a { background-position: -166px 0 !important; cursor: default; } .SONQT #SONMainNav #QT a { background-position: -384px 0 !important; cursor: default; } /* -- CONTENT */ /* NewFeature */ #SON #NewFeature {float: left; margin-bottom: 8px; background: #E6DFCD url(../images/bkg.new-feature.gif) repeat-y; } #SON #NewFeature .SONPhotoSpot { margin: -45px 20px 0 0; height: 210px; position: relative; z-index: 1000; float: right; } #SON #NewFeature h2 { position: relative; left: -10px; } #SON #NewFeature h3 { margin: 0 220px .6em 20px; } #SON #NewFeature p { margin: 0 220px 1em 20px; } #SON #NewFeature .SONButton { text-align: left; margin: 35px 0 10px 270px; } #SON #NewFeature .SONColumnLayout {padding-bottom: 21px; background: url(../images/bottomcap.new-feature.gif) bottom no-repeat; } #SON #NewFeature li {margin-left: 35px;} /* -- MAIN CONTENT */ #SON #SONContent #SONMainContent { float: left; width: 368px; margin-top: 6px; } #SON #SONContent #SONMainContent h2 { position: absolute; left: -10px; } /* Common Main Content Promo Styles */ #SON .MainContPromo { position: relative; margin-top: 4px; } #SON .MainContPromo .SONWrapper { padding: 20px 10px 0 20px; } #SON .MainContPromo p { color: #09484F; font-size: 15px; font-weight: bold; } #SON .MainContPromo .BottomCap { height: 21px; } /* Main Content Promo ~ Opinion Poll */ #SON #PromoPoll { margin-top: 12px; padding-top: 9px; background: #CEE6CD url(../images/topcap.poll.gif) top no-repeat; } #SON #PromoPoll .SONWrapper { background: #CEE6CD url(../images/bkg.poll.gif) repeat-y; } #SON #PromoPoll h2 { top: -28px; } #SON #PromoPoll #PollForm .PollHorizList {width: 100%; margin-bottom: 4px; } #SON #PromoPoll #PollForm .SONPhotoSpot {float: left; width: 96px; margin: 0 6px; text-align: center; } #SON #PromoPoll #PollForm .HorizList img { display: block; } #SON #PromoPoll #PollForm label { display: block; text-align: center; text-transform: uppercase; color: #994B0B; font-weight: bold; } #SON #PromoPoll #PollForm label:hover { color: #B81F21; } #SON #PromoPoll .SONButton a { display: block; text-decoration: underline; text-transform: uppercase; text-align: right; margin-right: 10px; font-size: 10px; } #SON #PromoPoll .BottomCap { background: url(../images/bottomcap.poll.str.gif) bottom no-repeat; } /* Main Content Promo ~ Cat's Zodiac */ #SON #PromoZodiac { padding-top: 5px; background: #BEDED4 url(../images/topcap.zodiac.str.gif) top no-repeat; } #SON #PromoZodiac .SONWrapper { background: #BEDED4 url(../images/bkg.zodiac.gif) repeat-y; } #SON #PromoZodiac h2 { top: -30px; } #SON #PromoZodiac #ZodiacForm label { color: #000; font-weight: bold; font-size: 13px; } #SON #PromoZodiac #ZodiacForm select { background: #FFF;/* for Firefox */ margin-top: -1.4em; margin-left: 12em; color: #CB1709; border: 2px solid #848484; border-right: 2px solid #FAFAFA; border-bottom: 2px solid #FAFAFA; } #SON #PromoZodiac #ZodiacForm select option { color: #CB1709; } #SON #PromoZodiac #ZodiacForm .SONButton { padding-bottom: .5em; } #SON #PromoZodiac .BottomCap { background: url(../images/bottomcap.zodiac.str.gif) bottom no-repeat; } /* Recent Features */ #SON #RecentFeatures { position: relative; margin-top: 4px; padding-top: 5px; background: #C6D9E4 url(../images/topcap.features.gif) top no-repeat; } #SON #RecentFeatures .SONColumnLayout { padding: 20px 5px 0 5px; background: #C6D9E4 url(../images/bkg.features.gif) repeat-y; } #SON #RecentFeatures .SONColumnLayout .SONPhotoSpot { float: left; margin-left: 10px; margin-bottom: 10px; } #SON #RecentFeatures h2 { top: -32px; } #SON #RecentFeatures h3 { margin: 0 5px .3em 150px; } #SON #RecentFeatures p { margin-right: 10px; margin-left: 150px; } #SON #RecentFeatures .SONButton { padding-bottom: 10px; margin-left: 270px; } #SON #RecentFeatures .Divider { width: 100%; height: 20px; background: url(../images/bkg.divider.features.gif) repeat-x; } #SON #RecentFeatures .Divider hr { display: none; } #SON #RecentFeatures .BottomCap { height: 21px; background: url(../images/bottomcap.features.rnd.gif) bottom no-repeat; } #SON #RecentFeatures li {margin-left: 35px;} /* - Featured Article Styles */ #SON #Featured { position: relative; background: #E6DFCD url(../images/bkg.article.gif) repeat-y; } #SON #Featured h2 { top: -6px; } #SON #Featured h3 { padding: 3.5em 0 .5em 16px; color: #024553; background: url(../images/topcap.article.gif) top no-repeat; } #SON #Featured h4 { margin: .5em 0 1.5em 16px; } #SON #Featured h4 a:link, #SON #Featured h4 a:visited { color: #000; } #SON #Featured h4 a:hover { color: #B81F21; } #SON #Featured .SONPhotoSpot { float: left; margin: 5px 15px 15px 15px; } #SON #Featured p { margin: 0 16px 1em 16px; } #SON #Featured .SONButton { margin: 0 5px 5px 275px; } #SON #Featured .BottomCap { height: 21px; background: url(../images/bottomcap.article.dot.gif) bottom no-repeat; } #SON #Featured li {margin-left: 35px; margin-bottom: 4px;} /* - Article Styles */ .SONArticle #SONContent #Featured .SONPhotoSpot { margin-bottom: 0; } .SONArticle #SONContent #Featured .BottomCap { background: url(../images/bottomcap.article.gif) bottom no-repeat; } .SONArticle #SONContent h4 a { font-weight: bold; } .SONArticle #SONContent .ArticleAuthor { padding-top: 5px; margin-top: 4px; background: url(../images/topcap.author.gif) top no-repeat; } .SONArticle #SONContent .ArticleAuthor .SONWrapper { padding: 10px 10px 15px 16px; background: #EEE9DC url(../images/bkg.author.gif) repeat-y; } .SONArticle #SONContent .ArticleAuthor h4 { display: inline; } .SONArticle #SONContent .ArticleAuthor p { display: inline; color: #024553; margin: 0px 0px 0px .13em; } .SONArticle #SONContent .ArticleAuthor i, .SONArticle #SONContent .ArticleAuthor em {font-style: italic;} .SONArticle #SONContent .ArticleAuthor .BottomCap { height: 21px; background: url(../images/bottomcap.author.gif) bottom no-repeat; } /* -- SIDE BAR */ #SON #SONContent #SONSideBar { float: right; width: 185px; } /* -- The Divine Cat Side Bar Promos */ /* Common The Divine Cat Promo Styles */ #SON #SONSideBar .SONItem { margin-top: 14px; } #SON #SONSideBar .FirstPromo { margin-top: 6px; } #SON #SONSideBar .SONItem h4 { height: 62px; } #SON #SONSideBar .SONItem h4 span { display: none; } #SON #SONSideBar .SONItem h5 { margin: 5px 0; } #SON #SONSideBar .SONItem .SONWrapper { padding: 0 12px 22px 14px; } /* Promo - Breed Game */ #SON #PromoGame { margin: 0; background: #DCD5B3 url(../images/bkg.promo.game.gif) repeat-y; } #SON #PromoGame .SONWrapper { background: url(../images/bottomcap.promo.game.gif) bottom no-repeat; } #SON #PromoGame h4 { background: url(../images/hdr.promo.game.gif) top no-repeat; } #SON #PromoGame p { color: #860202; font-size: 13px; font-weight: bold; } #SON #PromoGame .FormList { margin-left: 30px; } #SON #PromoGame .FormList label { text-transform: uppercase; color: #78660f; font-weight: bold; } #SON #PromoGame .FormList label:hover { color: #B81F21; } #SON #PromoGame #GameForm .SONButton { margin: 1em 0 5px 0; } /* Promo - Sponsor Tools */ #SON #PromoTools { background: #D9E5EA url(../images/bkg.promo.tools.gif) repeat-y; } #SON #PromoTools .SONWrapper { text-align: center; background: url(../images/bottomcap.promo.tools.gif) bottom no-repeat; } #SON #PromoTools h4 { background: url(../images/hdr.promo.tools.gif) top no-repeat; } #SON #PromoTools h5 { color: #447695; font-size: 14px; margin-bottom: 10px;} #SON #PromoTools p { color: #0b5294; margin-bottom: 2px; text-align: center; } #SON #PromoTools .SONItem {margin: 10px 0 5px;} /* Promo - Product Review */ #SON #PromoReview { background: #DFE7C5 url(../images/bkg.promo.review.gif) repeat-y; } #SON #PromoReview .SONWrapper { padding-bottom: 10px; text-align: center; background: url(../images/bottomcap.promo.review.gif) bottom no-repeat; } #SON #PromoReview h4 { background: url(../images/hdr.promo.review.gif) top no-repeat; } #SON #PromoReview h5, #SON #PromoReview em, #SON #PromoReview h5 i { color: #437C70; text-align: left; font-size: 13px; font-weight: bold;} #SON #PromoReview img { margin: 5px 0; } /* Promo - Care Tips */ #SON #PromoTips { background: #D7E6CD url(../images/bkg.promo.tips.gif) repeat-y; } #SON #PromoTips .SONWrapper { padding-bottom: 10px; background: url(../images/bottomcap.promo.tips.gif) bottom no-repeat; } #SON #PromoTips h4 { background: url(../images/hdr.promo.tips.gif) top no-repeat; } #SON #PromoTips h5 { color: #2E67B3; line-height: 140%; font-size: 14px; } #SON #PromoTips p { color: #024553; } #SON #Footer .footer { float: left; width: 561px; padding-bottom: 10px; margin-top: 20px; text-align: center; padding-bottom: 10px; height: 50px; background: #FFF; } #SON #Footer .footer img {margin-bottom: 5px; } #SON #Footer a:link {font-size: 10px; color: #333; text-decoration: underline; } #SON #Footer a:visited {font-size: 10px; color: #333; text-decoration: underline; } #SON #Footer a:hover {font-size: 10px; color: #333;} #SON #Footer a:active {font-size: 10px; color: #333;} /* Specific Pages # # # #*/ /* SONHome Page */ /* SONHome uses different MainNav images */ .SONHome #SONMainNav { margin-left: -1px; background-image: url(../images/navmenu.gif)!important; } .SONHome #SONMainNav li a { background-image: url(../images/navmenu.gif)!important; } /* Common Section Page Styles */ .SONIndex #SONContent #RecentFeatures .BottomCap { height: 21px; background: url(../images/bottomcap.features.str.gif) bottom no-repeat; } .SONIndex #SONContent #PromoZodiac .BottomCap { background: url(../images/bottomcap.zodiac.rnd.gif) bottom no-repeat; } /* Breed Game Page*/ #SON #BreedGame { background: #DCD5B3 url(../images/bkg.breed-game.gif) repeat-y; } #SON #BreedGame .SONWrapper { text-align: center;/* for IE5.5*/ padding-top: 4.5em; background: url(../images/topcap.breed-game.gif) top no-repeat; } #SON #BreedGame h2 {position: relative; left: -10px;} #SON #BreedGame h4 { color: #024553; font-weight: normal; text-align: center; margin: 0 0 .5em 0; } #SON #BreedGame h5 { color: #024553; text-transform: uppercase; text-align: center; margin-bottom: 1em; font-size: 14px; } #SON #BreedGame li {margin-left: 35px;} /* Image Replacement for Breed Game Result */ #SON #BreedGame .Result { margin: 0 auto; height: 38px; width: 107px; } #SON #BreedGame .Result span { display: block; width: 0; height: 0; overflow: hidden; } #SON #BreedGame .Correct { background: url(../images/hdr.game.answer.correct.gif) no-repeat; } #SON #BreedGame .Oops { background: url(../images/hdr.game.answer.oops.gif) no-repeat; } #SON #BreedGame .SONWrapper .SONPhotoSpot { text-align: center; } #SON #BreedGame .SONWrapper .game_image {width: 124px; margin: 0 auto 10px; text-align: center; } #SON #BreedGame p { margin-right: 20px; margin-left: 16px; text-align: left; } #SON #BreedGame .SONButton { margin: 0 5px 5px 270px; } #SON #BreedGame .BottomCap { height: 21px; background: url(../images/bottomcap.breed-game.gif) bottom no-repeat; } #SON #NextGame { position: relative; margin-top: 4px; background: #E7E2CA url(../images/bkg.next-game.gif) repeat-y; } #SON #NextGame .SONWrapper { padding: 30px 10px 0 20px; background: url(../images/topcap.next-game.gif) top no-repeat; } #SON #NextGame h2 { top: -30px; } #SON #NextGame p { color: #860202; font-size: 14px; font-weight: bold; } #SON #NextGame .FormList {margin: 0 auto; width: 188px;} #SON #NextGame .FormList label { color: #78660F; font-weight: bold; } #SON #NextGame .FormList label:hover { color: #B81F21; } #SON #NextGame .BottomCap { height: 21px; background: url(../images/bottomcap.next-game.gif) bottom no-repeat; } /* Care Tips Page */ #SON #CareTips { background: #D7E6CD url(../images/bkg.tips.gif) repeat-y; } #SON #CareTips h2 {position: relative; left: -10px;} #SON #CareTips h3 { color: #024553; padding: 3.5em 20px .5em 16px; background: url(../images/topcap.care-tips.gif) top no-repeat; } #SON #CareTips p { margin-right: 20px; margin-left: 16px; } #SON #CareTips .BottomCap { height: 21px; background: url(../images/bottomcap.care-tips.gif) bottom no-repeat; } #SON #RecentTips { position: relative; margin-top: 4px; padding-top: 5px; background: url(../images/topcap.recent-tips.gif) top no-repeat; } #SON #RecentTips h2 { top: -30px; } #SON #RecentTips .LinkList { padding: 0 0 21px 0; background: #D7E6CD url(../images/bottomcap.recent-tips.gif) bottom no-repeat; } #SON #RecentTips .LinkList .FirstItem { padding-top: 2em; } #SON #RecentTips .LinkList li { margin: 0; padding: 1em 20px 5px 18px; background: url(../images/bkg.tips.gif) repeat-y; } #SON #RecentTips .LinkList li a {margin: 0; text-decoration: underline; color: #3B7A87; font-weight: bold; background: transparent url(../images/bullet.gif) 0 50% no-repeat; padding-left: 12px; } #SON #RecentTips .LinkList .Alt { background: #EBF3E6 url(../images/bkg.recent-tips.alt.gif) repeat-y; } /* Cat's Zodiac Page */ #SON #Zodiac { background: #BEDED4 url(../images/bkg.zodiac.gif) repeat-y; } #SON #Zodiac h2 {position: relative; left: -10px;} #SON #Zodiac h3 { color: #024553; padding: 3.5em 20px .5em 16px; background: url(../images/topcap.zodiac.rnd.gif) top no-repeat; } #SON #Zodiac p { margin-right: 20px; margin-left: 16px; } #SON #Zodiac .BottomCap { height: 21px; background: url(../images/bottomcap.zodiac.str.gif) bottom no-repeat; } #SON #TryAgain { margin-top: 4px; padding-top: 5px; background: #D2E8E1 url(../images/topcap.zodiac.try.gif) top no-repeat; } #SON #TryAgain .SONWrapper { padding: 10px 10px 0 20px;; background: #D2E8E1 url(../images/bkg.zodiac.try.gif) repeat-y; } #SON #TryAgain p { color: #09484F; font-size: 15px; font-weight: bold; } #SON #TryAgain #ZodiacForm label { color: #000; font-weight: bold; font-size: 13px; } #SON #TryAgain #ZodiacForm select { background: #FFF;/* for Firefox */ margin-top: -1.2em; margin-left: 12em; color: #CB1709; border: 2px solid #848484; border-right: 2px solid #FAFAFA; border-bottom: 2px solid #FAFAFA; } #SON #TryAgain #ZodiacForm select option { color: #CB1709; } #SON #TryAgain #ZodiacForm .SONButton { padding-bottom: 0; } #SON #TryAgain .BottomCap { height: 21px; background: url(../images/bottomcap.zodiac.try.gif) bottom no-repeat; } /* Opinion Poll Page */ #SON #Poll { background: #CEE6CD url(../images/bkg.poll.gif); } #SON #Poll h2 {position: relative; left: -10px;} #SON #Poll h3 { color: #024553; padding: 3.5em 20px 0 20px; background: url(../images/topcap.poll.gif) top no-repeat; } #SON #Poll .PollHorizList {width: 100%; margin-bottom: 4px; } #SON #Poll .SONPhotoSpot {float: left; width: 96px; margin: 0 6px 10px; text-align: center; } #SON #Poll .HorizList img { display: block; } #SON #Poll label { display: block; text-align: center; text-transform: uppercase; color: #994B0B; font-weight: bold; } #SON #Poll p { clear: both; margin: 1em 20px; } #SON #Poll .SONButton a { display: block; text-decoration: underline; text-transform: uppercase; text-align: right; margin-right: 10px; font-size: 10px; } #SON #Poll .BottomCap { height: 21px; background: url(../images/bottomcap.poll.rnd.gif) bottom no-repeat; } /* Product Review Page */ #SON #ProductReview { background: #DFE7C5 url(../images/bkg.review.gif) repeat-y; } #SON #ProductReview h2 {position: relative; left: -10px;} #SON #ProductReview h3 { color: #024553; padding: 3.5em 20px 0 16px; background: url(../images/topcap.product-review.gif) top no-repeat; } #SON #ProductReview h3 em, #SON #ProductReview h3 i {font-style: italic; color: #024553; font-size: 15px; font-weight: bold;} #SON #ProductReview .SONPhotoSpot { float: left; margin: 5px 15px 15px 15px; } #SON #ProductReview p { margin-right: 25px; margin-left: 16px; } #SON #ProductReview .BottomCap { height: 21px; background: url(../images/bottomcap.product-review.gif) bottom no-repeat; } #SON #PastReviews { position: relative; margin-top: 4px; padding-top: 5px; background: url(../images/topcap.past-reviews.gif) top no-repeat; } #SON #PastReviews h2 { top: -30px; } #SON #PastReviews .LinkList { padding: 0 0 21px 0; background: #DFE7C5 url(../images/bottomcap.past-reviews.gif) bottom no-repeat; } #SON #PastReviews .LinkList .FirstItem { padding-top: 1.5em; } #SON #PastReviews .LinkList li { margin-bottom: 0; padding: .5em 20px .5em 35px; background: url(../images/bkg.review.gif) repeat-y; } #SON #PastReviews .LinkList li a { text-decoration: underline; color: #3B7A87; background: url(../images/bullet.gif) 0 50% no-repeat; } #SON #PastReviews .LinkList li a em, #SON #PastReviews .LinkList li a i {color: #3B7A87;} #SON #PastReviews .LinkList .Alt { background: #EFF3E3 url(../images/bkg.past-reviews.alt.gif) repeat-y; } /* PollArchive Page */ #SON #PastPolls { position: relative; margin-top: 4px; padding-top: 5px; background: url(../images/topcap.pastpolls.gif) top no-repeat } #SON #PastPolls h2 { top: -5px; } #SON #PastPolls .LinkList { padding: 25px 0 0 0; background: #DFE7C5 url(../images/bkg.pastpolls.gif) repeat-y; } #SON #PastPolls .LinkList .FirstItem { padding-top: 1.5em; } #SON #PastPolls .LinkList li { margin-bottom: 0px; padding: .5em 20px .5em 35px; background: url(../images/bkg.pastpolls.gif) repeat-y; } #SON #PastPolls .LinkList li a { text-decoration: underline; color: #3B7A87; background: url(../images/bullet.gif) 0 50% no-repeat; } #SON #PastPolls .LinkList .Alt { background: #EFF3E3 url(../images/bkg.pastpolls-alt.gif) repeat-y; } #SON #PastPolls .bottomcap { margin-top: -12px;height: 21px; background: url(../images/bottomcap.pastpolls.gif) bottom no-repeat; } #SON .SideBoxGoogle {text-align: center;} #SON #RecentFeatures .SONPhotoSpot {height: 96px;} /* -- Alsett Clearing Method*/ .clearfix:after {content: "."; display: block; height: 0; clear: both; visibility: hidden;} * html .clearfix {height: 1%;} .clearfix {display: block;} .clearfix {display:inline-block;} /* Hide from IE Mac \*/ .clearfix {display:block;}