/*================================================== M A I N S T Y L E S * Last Updated : 2008/10/31 * Author : www.ultrasupernew.com * Color Key : * Link bright pink : #f05ba1 * Purple bg : #2b1a2f * Default text color: #e8d6eb * Footer bg color : #211223 ==================================================*/ @import 'lib/reset.css'; @import 'lib/utilities.css'; @import 'lib/forms.css'; /*================================================== L A Y O U T Basic page layout ==================================================*/ body { background: url(/images/main/main-bg.jpg) repeat center top; font: 10px/160% "Century Gothic", Arial, Helvetica, sans-serif; text-align: center; color: #e8d6eb; border-top: 5px solid #af2227; } #page { text-align: left; } #header {height: 135px; background: url(/images/main/head-bg.jpg) repeat-x center top; text-align:center;} #header div.headerIn {width:900px; margin:0 auto; text-align: left;} #language-part {background: #c6272b; } #language-part div.language-partIn {width:900px; margin:0 auto;} #language-part div.language-partIn p {padding:10px 0 6px 0; margin:0 auto; text-align:right;} #indexHead {background:url(/images/main/index-head-bg.jpg) repeat-x center top; height:200px;} #indexHead div.indexHeadIn {width:900px; margin:0 auto; text-align: left;} #breadcrumb {background: url(/images/main/bread-bg.gif) repeat-x center top; height:42px; text-align:center; font-family: Arial; font-weight: bold; color:#ffcccc;} #contents {clear:both; background: #320c3b; padding:20px 0;} #contents div.contentsIn {width:900px; margin:0 auto; text-align: left;} #contents #contentsLeft {width:290px; display:inline; float:left; background: url(/images/main/dotted-v-01.gif) repeat-y right top; padding-right:10px;} #contents #contentsRight {display:inline; float:right; width:590px;} #footer {clear:both; background: #211223; padding:20px 0; margin-bottom:40px;} #footer div.footerIn {width:900px; margin:0 auto; text-align: left;} /*================================================== C O M M O N E L E M E N T S Main HTML elements ==================================================*/ #contents h1 {} #contents h2 { font-size: 1.8em; font-weight: bold; color:#fff; margin-bottom:20px;} #contents h3 {font-size: 1.4em; font-weight: bold; color:#fff; margin-bottom:15px;} #contents li, p, td, th, dd, dt, label, legend { } #contents p { margin-bottom: 1em; } #contents a:link { color: #f05ba1; text-decoration: none;} #contents a:visited { } #contents a:hover { text-decoration: underline; } #contents a:active { } /*================================================== Header elements ==================================================*/ #header div.headLeft {display:inline; float:left;} #header div.headRight {display:inline; float:right; margin-top:15px;} #header h1 {margin-top:68px;} #header h1 a {text-indent: -999em; display:block; background: url(/images/main/head-logo.jpg); width:430px; height:54px;} #header p.catchphrase {display:none;} /* Head login block*/ #header div#headLogin {background: url(/images/main/head-logbg-l.jpg); color:#241426;} #header div#headLogin span.headLoginIn {height:18px; display:block; padding:12px 20px; background: url(/images/main/head-logbg-r.jpg) no-repeat right top;} #header div#headLogin form input {vertical-align: middle; font-family:"Century Gothic", Arial, Helvetica, sans-serif; color:#443646; font-size:10px; } #header div#headLogin form input.submitImg {width:30px; height:21px;} #header div#headLogin form input#username {border:0; width:100px; height:15px; background: url(/images/main/head-logbg-input.jpg); padding:3px 5px; margin:0 5px 0 5px ; } #header div#headLogin form input#password {border:0; width:100px; height:15px; background: url(/images/main/head-logbg-input.jpg); padding:3px 5px; margin-right:5px;} #header div#headLogout {background: url(/images/main/head-logbg-l.jpg); color:#241426;} #header div#headLogout span.headLogoutIn {height:18px; display:block; padding:12px 20px; background: url(/images/main/head-logbg-r.jpg) no-repeat right top;} #header div#headLogout a {color:#b4323a; font-weight: bold; } #header div#headLogout span.spacer {color:#ccc; padding:0 5px;} /* Tabbed navigation */ #header #mainNavigation { clear:right; float:right; margin-top:38px;} #header #mainNavigation li{display:inline;} #header #mainNavigation li a{display:inline; float:left; width:100px; height:40px; margin-left:5px; text-indent:-999em;} #header #mainNavigation li.navHome a {background: url(/images/main/nav-btn-01.gif);} #header #mainNavigation li.navHome a:hover {background: url(/images/main/nav-btn-01.gif) left -40px;} .navHome #header #mainNavigation li.navHome a, .navHome #header #mainNavigation li.navHome a:hover {background: url(/images/main/nav-btn-01.gif) left -40px; cursor:default;} #header #mainNavigation li.navGive a {background: url(/images/main/nav-btn-02.gif);} #header #mainNavigation li.navGive a:hover {background: url(/images/main/nav-btn-02.gif) left -40px;} .navGive #header #mainNavigation li.navGive a, .navGive #header #mainNavigation li.navGive a:hover {background: url(/images/main/nav-btn-02.gif) left -40px; cursor:default;} #header #mainNavigation li.navShare a {background: url(/images/main/nav-btn-03.gif);} #header #mainNavigation li.navShare a:hover {background: url(/images/main/nav-btn-03.gif) left -40px;} .navShare #header #mainNavigation li.navShare a, .navShare #header #mainNavigation li.navShare a:hover {background: url(/images/main/nav-btn-03.gif) left -40px; cursor:default;} #header #mainNavigation li.navCards a {background: url(/images/main/nav-btn-04.gif);} #header #mainNavigation li.navCards a:hover {background: url(/images/main/nav-btn-04.gif) left -40px;} .navCards #header #mainNavigation li.navCards a, .navCards #header #mainNavigation li.navCards a:hover {background: url(/images/main/nav-btn-04.gif) left -40px; cursor:default;} /* Index page top */ #indexHead div.col {width:300px; float:left; height:200px; background: url(/images/main/index-head-spacer.gif) no-repeat right top; } #indexHead div.col h2 {height:53px; text-indent:-999em; margin:20px 0 10px 0;} #indexHead div.col p {color:#e8d6eb; font-size: 1.2em;} #indexHead div.col a {color:#f05ba1; text-decoration: none;} #indexHead div.col a:hover {text-decoration: underline;} #indexHead #findXp h2 {background: url(/images/main/index-title-1.gif) no-repeat;} #indexHead #findXp h2, #indexHead #findXp p {padding-right:10px;} #indexHead #shareXp h2 {background: url(/images/main/index-title-2.gif) no-repeat 10px top;} #indexHead #shareXp h2, #indexHead #shareXp p {padding:0 10px;} #indexHead #cardXp {background:0;} #indexHead #cardXp h2 {background: url(/images/main/index-title-3.gif) no-repeat 10px top;} #indexHead #cardXp h2, #indexHead #cardXp p, #indexHead #cardXp form {padding-left:10px;} #indexHead #cardXp form {margin-top:10px;} #indexHead #cardXp form input {vertical-align:middle;} #indexHead #cardXp input#card_nummber {border:0; background: url(/images/main/index-input-bg.gif); width:144px; height:19px; padding:0; color:#574959; font-family:"Century Gothic", Arial, Helvetica, sans-serif; font-size:1.4em; padding:6px 8px; margin-right:5px;} /* index language thingie */ #language-part div.language-partIn p {color:#fff; font-weight:bold; font-size:1.2em;} #language-part div.language-partIn p a {text-decoration:underline; color:#fff;} /* Breadcrumb */ #breadcrumb a {color:#fff; text-decoration: none;} #breadcrumb a:hover {text-decoration: underline;} #breadcrumb div.breadcrumbIn {width:900px; margin:0 auto; text-align:left;} #breadcrumb div.breadcrumbIn span.bread {display:block; padding:12px 0 12px 310px;} #breadcrumb div.breadcrumbIn span.bread span.spacer {color:#c66a7a; padding:0 5px; font-size: 1.2em; vertical-align: middle;} /*================================================== Contents generic elements ==================================================*/ h2 img.rssIcon {float:right;} /* link to all */ #contentsLeft #suggestXp div.seeAllSugg p, #contentsRight #usersXp div.seeAllSugg p, #contentsLeft #tagcloudSml div.seeAllTags p {font-size: 1.2em; text-align:right;} #contentsLeft #suggestXp div.seeAllSugg p a, #contentsRight #usersXp div.seeAllSugg p a {color:#f05ba1; text-decoration:none;} #contentsLeft #suggestXp div.seeAllSugg p a:hover, #contentsRight #usersXp div.seeAllSugg p a:hover {text-decoration:underline;} /*================================================== Right column specific elements ==================================================*/ /* Registration form */ #contentsRight div.register_form {background: #211223 url(/images/main/cont-blk-bot.gif) no-repeat left bottom;} #contentsRight div.register_form h2 {background: url(/images/main/cont-blk-top.gif) no-repeat left top; padding:12px 15px 0 15px;} #contentsRight div.register_form form {padding:0 15px 12px 15px;} /* Right column user experiences */ #contentsRight #usersXp div.itemUser {background: #211223 url(/images/main/cont-blk-bot.gif) no-repeat left bottom; margin-bottom:10px; padding-bottom:0; } #contentsRight #usersXp div.itemUser div.itemUserIn{background: url(/images/main/cont-blk-top.gif) no-repeat left top; padding:10px 10px 0 10px; overflow: auto;} #contentsRight #usersXp div.itemUser div.imgHoldr {float:left; width:90px; height:90px; background: url(/images/main/user-tmb-bg.gif) no-repeat; margin-bottom:11px; overflow: hidden;} #contentsRight #usersXp div.itemUser div.imgHoldr img {width:80px; height:80px; display:block; padding:5px;} #contentsRight #usersXp div.itemUser h3 {font-size:1.6em; font-weight: bold; margin:0 0 10px 100px;} #contentsRight #usersXp div.itemUser h3 span.author {font-size: 0.7em;} #contentsRight #usersXp div.itemUser p {font-size:1.2em; margin:0 0 0 100px; padding-bottom:11px;} #contentsRight #usersXp div.itemUser a {color:#f05ba1; text-decoration: none;} #contentsRight #usersXp div.itemUser a:hover {text-decoration: underline;} #contentsRight #usersXp div.itemUser h3 span.newsDate {float:right; font-size:0.6em; font-weight: normal; color:#956395; } /* share module head - button to share + explanations */ #contentsRight #shareExplain {overflow: auto; margin-bottom:20px;} #contentsRight #shareExplain h2 {font-size:2.4em;} #contentsRight #shareExplain p {} #contentsRight #shareExplain a.btn-share-big {float:right; width:176px; height:96px; margin:10px 0 0 10px; text-indent:-999em; background: url(/images/forms/btn-share-big.gif) no-repeat;} #contentsRight #shareExplain a.btn-share-big:hover {background: url(/images/forms/btn-share-big.gif) no-repeat 0 -96px;} /* give module head - button to give + explanations */ #contentsRight #giveExplain {overflow: auto; margin-bottom:20px;} #contentsRight #giveExplain h2 {font-size:2.4em;} #contentsRight #giveExplain p {} #contentsRight #giveExplain a.btn-sugst-big {float:right; width:176px; height:56px; margin:10px 0 0 10px; text-indent:-999em; background: url(/images/forms/btn-sugst-big.gif) no-repeat;} #contentsRight #giveExplain a.btn-sugst-big:hover {background: url(/images/forms/btn-sugst-big.gif) no-repeat 0 -56px;} #usersXp p.headMore {margin-bottom:20px;} /* user xp pagination */ #contentsRight ul#pagination {float:right; font-size:1.2em; padding-top:10px;} #contentsRight ul#pagination a {color:#211223; text-decoration: none;} #contentsRight ul#pagination a:hover {text-decoration: underline;} #contentsRight ul#pagination li {display:inline;} #contentsRight ul#pagination li span.holder, #contentsRight ul#pagination li a{display:inline; float:left; height:31px; background: url(/images/main/pagi-ok-r.gif) no-repeat right top; margin-left:10px;} #contentsRight ul#pagination li span.holder span.holderIn, #contentsRight ul#pagination li a span.holderIn {display:inline; float:left; background: url(/images/main/pagi-ok-l.gif) no-repeat left top; height:17px; padding:7px 10px;} #contentsRight ul#pagination li.nonActive span.holder, #contentsRight ul#pagination li.nonActive a{background: url(/images/main/pagi-not-r.gif) no-repeat right top; } #contentsRight ul#pagination li.nonActive span.holder span.holderIn, #contentsRight ul#pagination li.nonActive a span.holderIn {background: url(/images/main/pagi-not-l.gif) no-repeat left top; } #contentsRight ul#pagination li.first span.holder, #contentsRight ul#pagination li.first a{margin-right:10px;} #contentsRight ul#pagination li.last span.holder, #contentsRight ul#pagination li.last a{margin-left:20px;} /* static pages stuff (TOS, etc.) */ #contentsRight div.staticPage h3 {background: url(/images/main/dotted-h-01.gif) repeat-x 0 bottom; padding-bottom:10px; margin-top:30px;} #contentsRight div.staticPage p {font-size: 1.2em; line-height: 1.4em;} #contentsRight div.staticPage a{color:#f05ba1; text-decoration: none;} #contentsRight div.staticPage a:hover{text-decoration: underline;} #contentsRight div.staticPage ul {font-size: 1.2em; line-height: 1.4em;} #contentsRight div.staticPage ul li {margin-bottom:10px;} #contentsRight div.staticPage img.explain-image {display:block; margin-bottom:10px;} #contentsRight div.staticPage .daiji01 {font-size:3em; line-height:1.2em;} #contentsRight div.staticPage .daiji02 {font-size:2,4em;} /* view one user experience */ #contentsRight div.viewExp {background: #211223 url(/images/main/cont-blk-bot.gif) no-repeat left bottom;} #contentsRight div.viewExp div.viewExpIn {background: url(/images/main/cont-blk-top.gif) no-repeat left top; } #contentsRight div.viewExp div.xpHead {padding:12px 0 0 0; margin:0 15px 0 15px; background: url(/images/main/dotted-h-01.gif) repeat-x 0 bottom;} #contentsRight div.viewExp div.xpHead h2{margin-right:140px; line-height:1.1em; padding-bottom:15px;} #contentsRight div.viewExp div.xpHead p.xpDate {float:right; margin:0; padding:0 ; width:130px; text-align:right; font-size:0.9em; color:#996699;} #contentsRight div.viewExp div.xpHead p.xpDate span {color:#412842;} #contentsRight div.viewExp div.xpBody { padding-bottom:5px;} #contentsRight div.viewExp div.xpBody p {padding:0 15px 0 15px; line-height:1.6em;} #contentsRight div.viewExp div.xpBody a.thickbox{float:left; width:150px; background: url(/images/main/xp-imgbg-bot.gif) no-repeat 0 bottom; margin:0 10px 10px 0; text-decoration: none;} #contentsRight div.viewExp div.xpBody a.thickbox span.holdr{display:block; background: url(/images/main/xp-imgbg-top.gif) no-repeat 0 0; position:relative;} #contentsRight div.viewExp div.xpBody a.thickbox img{width:140px; padding:5px; display:block;} #contentsRight div.viewExp div.xpBody a.thickbox span.xpCross{position:absolute; display:block; background: url(/images/main/xp-imgcross.png) no-repeat; width:16px; height:16px; bottom:10px; left:10px;} #contentsRight div.viewExp div.xpBody div.audioBlock {} /* sound manager */ div#soundmanager-debug-toggle {opacity: 0;} #contentsRight a.sm2_link {display:block; width:58px; height:58px; text-indent:-999em; background: url(/images/main/sound-button.gif) no-repeat;} #contentsRight div.viewExp a.sm2_link {float:right; margin:0 0 10px 10px;} #contentsRight a.sm2_link:hover {background: url(/images/main/sound-button.gif) no-repeat 0 -58px;} #contentsRight a.sm2_playing {background: url(/images/main/sound-button.gif) no-repeat 0 -116px;} #contentsRight a.sm2_playing:hover {background: url(/images/main/sound-button.gif) no-repeat 0 -174px;} #contentsRight a.sm2_paused {background: url(/images/main/sound-button.gif) no-repeat 0 -232px;} #contentsRight a.sm2_paused:hover {background: url(/images/main/sound-button.gif) no-repeat 0 -290px;} /* related xp */ #contentsRight div.relatedExp {background: #211223 url(/images/main/cont-blk-bot.gif) no-repeat left bottom; margin-top:12px;} #contentsRight div.relatedExp div.relatedExpIn {background: url(/images/main/cont-blk-top.gif) no-repeat left top; padding:12px 15px 0 15px;} #contentsRight div.relatedExp h2 {font-size: 1.4em; padding:0 0 12px 0; margin-bottom:0;} #contentsRight div.relatedExp h2 a {float:right; width:14px; height:14px; text-indent: -999em;} #contentsRight div.relatedExp h2 a.toggleRelatedOn {background: url(/images/main/btn-toggle-arrw.gif);} #contentsRight div.relatedExp h2 a.toggleRelatedOff {background: url(/images/main/btn-toggle-arrw.gif) no-repeat 0 -14px;} #contentsRight div.relatedExp h2 span {float:left;} #contentsRight div.relatedExp ul#relatedXp {background: url(/images/main/dotted-h-01.gif) repeat-x 0 0; padding-top:15px;} #contentsRight div.relatedExp ul#relatedXp li {display:inline;} #contentsRight div.relatedExp ul#relatedXp li a{display:inline; float:left; width:102px; height:102px; margin:0 12px 15px 0;} #contentsRight div.relatedExp ul#relatedXp li.rltd5 a{margin:0 0 12px 0;} #contentsRight div.relatedExp ul#relatedXp li a img{display:inline; float:left; width:92px; height:92px; padding:5px; background: url(/images/main/related-tmb-bg.gif);} /* related xp tooltip */ #tooltip{position:absolute; background:url(/images/main/tooltip.png) no-repeat; padding:15px; color:#000; display:none; font-size:1.2em; width:172px; height:47px; text-align: left; overflow: hidden;} #tooltip span.title {display:block; font-size:1.4em; font-weight: bold; color:#211223;} #tooltip span.author {display:block; color:#613553;} /* comments */ #contentsRight div.commentExp {background: #211223 url(/images/main/cont-blk-bot.gif) no-repeat left bottom; margin-top:12px;} #contentsRight div.commentExp div.commentExpIn {background: url(/images/main/cont-blk-top.gif) no-repeat left top; padding:12px 15px 0 15px;} #contentsRight div.commentExp h2 {font-size: 1.4em; padding:0 0 12px 0; margin-bottom:0;} #contentsRight div.commentExp h2 a {float:right; width:14px; height:14px; text-indent: -999em; font-size:0px; line-height: 0;} #contentsRight div.commentExp h2 a.toggleCommentsOn {background: url(/images/main/btn-toggle-arrw.gif);} #contentsRight div.commentExp h2 a.toggleCommentsOff {background: url(/images/main/btn-toggle-arrw.gif) no-repeat 0 -14px;} #contentsRight div.commentExp h2 span {float:left;} #contentsRight div.commentExp div#relatedComments {background: url(/images/main/dotted-h-01.gif) repeat-x 0 0; padding-top:15px;} #contentsRight div.commentExp div#relatedComments p.commentMeta {color:#916192; width:552px; margin:0 auto; margin-bottom:5px;} #contentsRight div.commentExp div#relatedComments p.commentMeta span.author {color:#c3b1c5; font-weight: bold;} #contentsRight div.commentExp div#relatedComments p.commentBody {background: #2b1a2f url(/images/main/comment-bg-b.gif) no-repeat 0 bottom; margin:0 auto; width:552px; margin-bottom:20px;} #contentsRight div.commentExp div#relatedComments p.commentBody span{display:block; background: url(/images/main/comment-bg-t.gif) no-repeat 0 0; width:512px; padding:40px 20px 20px 20px;} #contentsRight div.commentExp h3 {padding-bottom:12px;} /* add comment form */ #contentsRight #formXp form#commentForm {background: url(/images/main/dotted-h-01.gif) repeat-x 0 0; padding-top:10px; overflow: auto;} #contentsRight #formXp form#commentForm div.button {margin-bottom:15px;} /*================================================== Left column specific elements ==================================================*/ /* Left column suggestions */ #contentsLeft #suggestXp div.itemSuggested {margin-bottom:15px;} #contentsLeft #suggestXp div.itemSuggested div.imgHoldr {float:left; width:80px; height:80px; background: url(/images/main/suggest-tmb-bg.gif) no-repeat; position:relative; overflow: hidden;} #contentsLeft #suggestXp div.itemSuggested div.imgHoldr img{display:block; width:70px; height:70px; padding:5px; position:relative; top:0;} #contentsLeft #suggestXp div.itemSuggested h3 {margin:0 0 7px 90px; font-size: 1.4em; font-weight: bold;} #contentsLeft #suggestXp div.itemSuggested h3 a{color:#f05ba1; text-decoration: none;} #contentsLeft #suggestXp div.itemSuggested h3 a:hover{text-decoration: underline;} #contentsLeft #suggestXp div.itemSuggested p {margin-left:90px;} #contentsLeft #suggestXp div.itemSuggested div.imgHoldr span.special{display:block; height:10px; position:absolute; top:5px; left:5px; text-indent:-999em; width:70px;} #contentsLeft #suggestXp div.itemSuggested div.imgHoldr span.sponsored{background:url(/images/main/pic-label-sponsored.gif) no-repeat;} #contentsLeft #suggestXp div.itemSuggested div.imgHoldr span.exclusive{background:url(/images/main/pic-label-exclusive.gif) no-repeat;} /* Left login form */ #contentsLeft div.login_form {background: #211223 url(/images/main/cont-smlblk-bot.gif) no-repeat left bottom;} #contentsLeft div.login_form h2 {background: url(/images/main/cont-smlblk-top.gif) no-repeat left top; padding:12px 15px 0 15px;} #contentsLeft div.login_form form {padding:0 15px 12px 15px;} /* quote bubble */ #contentsLeft #quoteBubble {background: #b885a8 url(/images/main/bubble-bg-b.gif) no-repeat 0 bottom; width:280px; margin-bottom:10px;} #contentsLeft #quoteBubble p {padding:20px 20px 40px 20px; font-size:1.8em; text-align: center; color:#2b192e; line-height: 1.2em; background:url(/images/main/bubble-bg-t.gif) no-repeat 0 0;} /* tagcloud */ #tagcloudSml {margin-bottom:30px; } #tagcloudSml a {color: #f05ba1; text-decoration: none;} #tagcloudSml a:hover {text-decoration: underline;} /*================================================== Footer ==================================================*/ #footer div.footerIn div#footNav {float:left; width:590px;} #footer div.footerIn div#footNav a {color:#ded1e0; text-decoration: none;} #footer div.footerIn div#footNav a:hover {text-decoration: underline;} #footer div.footerIn div#footNav span.spacer {padding:0 5px;} #footer div.footerIn div#footNav p.footLinks {font-size:1.2em; color:#462e4c;} #footer div.footerIn div#footNav p.footInfos {margin-top:10px; color:#665768;} #footer div.footerIn img.footerLogo {float:right; display:block;}