html{ color:#000; background:#FFF; font: 11px verdana, sans-serif; overflow-y:scroll; } body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0;word-wrap:break-word;font-family: verdana, sans-serif;} table{border-collapse:collapse;border-spacing:0;empty-cells:show;} fieldset,img{border:0;} address,caption,cite,code,dfn,th,var{font-style:inherit;font-weight:inherit;} code,strong{font-weight:bold;} em{font-style:italic;} li{list-style:none;} caption,th{text-align:left;} h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;} q:before,q:after{content:'';} abbr,acronym {border:0;font-variant:normal;} sup {vertical-align:text-top;} sub {vertical-align:text-bottom;} input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;} input,textarea,select{font-size:100%;} legend{color:#000;} /* =========================================== THEME STYLESHEET * Only applies when html class 'theme' is set in combination with a mode ('darkmode', ...) =========================================== */ html.theme div.wframes_wfr { color: var(--theme-white85); } html.theme .black_panel .bd { background: var(--theme-bg-primary); } html.theme .black_panel .divider { background: var(--theme-black70); } html.theme .action_panel_nopadding, html.theme .action_panel_nopadding .gocodebackground { background: var(--theme-bg-card); } .hd.gradient-gray, .ft.gradient-gray { background: var(--theme-gradient-gray); /* classic menu gray FOR THE BLACK ACTION PANEL */ } .wframes_wfr.gradient-gray, .wframes_divider.gradient-gray { background: var(--theme-gradient-gray); /* classic menu gray */ } .wframes_wfr.gradient-pink, .wframes_divider.gradient-pink { background: var(--theme-gradient-pink); /* used in parents, safety, etc... */ } .wframes_wfr.gradient-sand, .wframes_divider.gradient-sand { background: var(--theme-gradient-sand); /* classic menu sand - used in the HELP section!!! */ } .wframes_wfr.gradient-blue, .wframes_divider.gradient-blue { background: var(--theme-gradient-blue); /* classic menu blue (SEEMS TO BE USED INDEPENDENTLY) */ } .wframes_wfr.gradient-lightblue, .wframes_divider.gradient-lightblue { background: var(--theme-gradient-lightblue); /* also another menu color, lighter - Sketzmo (THEME-INDEPENDENT) */ } .wframes_wfr.gradient-green, .wframes_divider.gradient-green { background: var(--theme-gradient-green); /* TODO: advertisement (THEME-INDEPENDENT) */ } .wframes_wfr.white { background: var(--theme-white100); } /* THEME-BASED GRADIENT ASSIGNMENT */ .theme1 .wframes_wfr.header, .theme1 .wframes_wfr.bottom { background: var(--theme-gradient-gray); /* classic menu gray */ } .theme2 .wframes_wfr.header, .theme2 .wframes_wfr.bottom { background: var(--theme-gradient-blue); /* classic menu blue */ } .theme3 .wframes_wfr.header, .theme3 .wframes_wfr.bottom { background: var(--theme-gradient-pink); /* this is actually called "red" (actually pink), also menu */ } .theme4 .wframes_wfr.header, .theme4 .wframes_wfr.bottom { background: var(--theme-gradient-sand); /* classic menu sand */ } /* TODO MISSING: - THEME 6 --> MAGAZINE (FULLY USING GRAPHICS - VERY SPECIFIC PATTERN AND COLOR!) - THEME 7 --> GREEN (not sure about this one, myb advertisement?) - THEME 8 --> SKETZMO (we use only for topbar, independently) */ .theme9 .wframes_wfr.header, .theme9 .wframes_wfr.bottom { background: var(--theme-gradient-brightpink); /* VIP Pink */ } .theme10 .wframes_wfr.header, .theme10 .wframes_wfr.bottom { background: var(--theme-gradient-brightgreen); /* VIP Green */ } .theme11 .wframes_wfr.header, .theme11 .wframes_wfr.bottom { background: var(--theme-gradient-brightblue); /* VIP Blue */ } /* ALWAYS OVERWRITE FOR PROFILES - NO MATTER THE THEME! */ .theme1 .wframes_wfr.header:has(+ .htmleditor_page), .theme1 .htmleditor_page ~ .wframes_wfr.bottom { background: var(--theme-gradient-gray-default); /* DEFAULT menu gray */ color:white; } .theme2 .wframes_wfr.header:has(+ .htmleditor_page), .theme2 .htmleditor_page ~ .wframes_wfr.bottom { background: var(--theme-gradient-blue-default); /* DEFAULT menu blue */ color:white; } .theme3 .wframes_wfr.header:has(+ .htmleditor_page), .theme3 .htmleditor_page ~ .wframes_wfr.bottom { background: var(--theme-gradient-pink-default); /* DEFAULT menu pink */ color:white; } .theme4 .wframes_wfr.header:has(+ .htmleditor_page), .theme4 .htmleditor_page ~ .wframes_wfr.bottom { background: var(--theme-gradient-sand-default); /* DEFAULT menu sand */ color:white; } .theme9 .wframes_wfr.header:has(+ .htmleditor_page), .theme9 .htmleditor_page ~ .wframes_wfr.bottom { background: var(--theme-gradient-brightpink-default); /* DEFAULT VIP brightpink */ color:white; } .theme10 .wframes_wfr.header:has(+ .htmleditor_page), .theme10 .htmleditor_page ~ .wframes_wfr.bottom { background: var(--theme-gradient-brightgreen-default); /* DEFAULT VIP brightgreen */ color:white; } .theme11 .wframes_wfr.header:has(+ .htmleditor_page), .theme11 .htmleditor_page ~ .wframes_wfr.bottom { background: var(--theme-gradient-brightblue-default); /* DEFAULT VIP brightblue */ color:white; } /* PATTERNS - 5 DIFFERENT ONES THAT CAN BE APPLIED: */ /* 1) resources/images/wframes/circles.png 2) resources/images/wframes/scribbles.png 3) resources/images/wframes/swirls.png 4) resources/images/wframes/stars.png 3) resources/images/wframes/diagonal-lines.png */ .wframes_wfr .pattern { top: 0; right: 0; position: absolute; height: 35px; width: 233px; border-radius: 0 9px 0 0; z-index: -1; pointer-events: none; } /* NO Z-INDEX NOR BORDER RADIUS - USED ON THE PROFILE-DETAILS PAGE! */ .wframes_divider .pattern { top: 0; right: 0; position: absolute; height: 35px; width: 233px; pointer-events: none; } /* BLACK BY DEFAULT, LOWER OPACITY + BLEND MODE! */ .wframes_wfr.circles .pattern { background: url(/images/wframes/patterns/circles.png); mix-blend-mode: overlay; /*opacity: 60%; --> ELIN SAYS WE REMOVE THIS! */ } /* WHITE BY DEFAULT ! */ .wframes_wfr.scribbles .pattern { background: url(/images/wframes/patterns/scribbles.png); mix-blend-mode: overlay; filter: invert(100%); } /* TODO: NOT USED ATM! */ /* USING FOR wframes:divider */ .wframes_wfr.swirls .pattern, .wframes_divider.swirls .pattern { background: url(/images/wframes/patterns/swirls.png); mix-blend-mode: overlay; } .wframes_wfr.stars .pattern { background: url(/images/wframes/patterns/stars.png); /* used for VIP profile color bars! */ width: 751px; /* longer topbar! */ mix-blend-mode: overlay; } .wframes_wfr.linesdiagonal .pattern { background: url(/images/wframes/patterns/diag_lines.png); /* SKETZMO WFRAMES LIGHTBLUE BAR PATTERN */ width: 100%; /* across the entire topbar */ border-radius: 9px 9px 0 0; /* border-radius on both sides */ opacity: 4%; /* specific (lower) opacity */ } html.theme .wframes_wfr.linesdiagonal .pattern, html.theme .pattern.linesdiagonal { filter: invert(100%); opacity: 6% !important; } /* INVERT PATTERNS TO WHITE */ .wframes_wfr.invert100 .pattern { filter: invert(100%); } /* INVERT PATTERNS TO BLACK */ .wframes_wfr.invert0 .pattern { filter: invert(0); } /**************************************************** ALL CHANGES RELATED TO html CLASS 'theme Xmode' ****************************************************/ /* =========================================== FORM ELEMENTS =========================================== */ html.theme input[type="text"], html.theme input[type="color"], html.theme input[type="number"], html.theme input[type="password"], html.theme input[type="email"], html.theme textarea.textarea { background-color: var(--theme-bg-input); color: var(--theme-text-primary); } html.theme input::placeholder, html.theme textarea::placeholder { color: var(--theme-text-secondary); } html.theme select, html.theme .dropbtn { background-color: var(--theme-bg-input); color: var(--theme-text-primary) !important; } html.theme select > span, html.theme .dropbtn > span { color: var(--theme-text-primary) !important; } html.theme option:disabled { color: var(--theme-text-secondary); } html.theme .dropdown-content { background-color: var(--theme-bg-input); border-color: var(--theme-bg-input); } /* =========================================== FRAMEWORK - LOGOUT BAR =========================================== */ html.theme .framework_logout a { color: var(--theme-text-primary); } html.theme .framework_logout a:hover { color: var(--theme-white100); } html.theme .famework_beta_button a { color: var(--theme-text-primary); } /* =========================================== FRAMEWORK - TOP BAR =========================================== */ html.theme .framework_top_buttons a .menu_text { position: relative; top: 4px; } html.theme .framework_top_buttons a:first-child, html.theme .framework_top_buttons a:last-child { border-left: none; } html.theme .framework_top_buttons .button_models, html.theme .framework_top_buttons .button_models_selected { border-top-right-radius: 8px; } html.theme .framework_top_buttons .button_frontpage, html.theme .framework_top_buttons .button_frontpage_selected { border-top-left-radius: 8px; } html.theme .framework_top_buttons a { color: var(--theme-white85) !important; text-shadow: none !important; } html.theme .framework_top_buttons a[class*="selected"] { color: var(--theme-white100) !important; } /* Header status bar */ html.theme div.framework_minimenu, html.theme div.framework_minimenu2 { color: var(--theme-text-primary); } html.theme .framework_minimenu a, html.theme .framework_minimenu2 a { color: var(--theme-white85); } html.theme div.framework_header_title { color: var(--theme-text-primary); } html.theme .framework_header_status a:hover { color: var(--theme-text-primary); } html.theme .framework_header_status b { color: var(--theme-text-primary); } /* =========================================== LEFT MENU =========================================== */ html.theme #Left_menu div, html.theme #bw-settings nav#Left_menu .menu-sub-items { background-color: var(--theme-bg-primary); } html.theme #Left_menu a { color: var(--theme-text-primary); } html.theme #Left_menu .topbar .pattern.linesdiagonalleftmenu { filter: invert(100%); } html.theme table.wtable th, html.theme table.wtable_full th, html.theme table.wtable tr, html.theme table.wtable_full tr { color: var(--theme-text-primary); } html.theme table.wtable a { color: var(--theme-text-primary) !important; } html.theme table.wtable a:hover { color: var(--theme-leftmenu-selected) !important; } html.theme table.wtable { background: var(--theme-bg-primary) !important; } html.theme table.wtable_full { border-color: var(--theme-black100) !important; } html.theme table.wtable tr td, html.theme table.wtable tr.odd td { border-top: 1px var(--theme-black100) solid !important; border-right: 1px var(--theme-black100) solid !important; } html.theme #wag_panel table.wtable tr td, html.theme #wag_panel table.wtable tr.odd td { border-right: none !important; } html.theme table.wtable th { border-bottom: 1px var(--theme-black100) solid; border-right: 1px var(--theme-black100) solid; } html.theme .rank_table th { border-top: 1px var(--theme-black100) solid; } html.theme div.forum_room_content { border-bottom: 1px var(--theme-black100) solid; } /* FORUM POST COLORS */ html.theme div.forum_posts .post_by_sma, div.forum_posts .post_by_gostar, div.forum_posts .post_by_focusgroup { background: var(--theme-post-sma-gostar-focusgroup) !important; } html.theme div.forum_posts .post_by_admin { background: var(--theme-post-admin) !important; } html.theme div.forum_posts .post_by_mod { background: var(--theme-post-mod) !important; } html.theme div.forum_posts .post_by_ig { background: var(--theme-post-ig) !important; } html.theme div.forum_posts .post_by_studentcouncilgirl { background: var(--theme-post-studentcouncilgirl) !important; } html.theme div.forum_posts .post_by_NL_disneyHack { background: var(--theme-post-nl-disneyhack) !important; } html.theme div.forum_posts .post_by_socialitestar { background: var(--theme-post-socialitestar) !important; } html.theme div.forum_posts .vip_forum_color { background: var(--theme-post-vip) !important; } html.theme .toneIndicator { background-color: var(--theme-black80); } html.theme div.forum_posts .post_by_specialperson div.bubble b.bub2, html.theme div.forum_posts .post_by_specialperson div.bubble b.bub3, html.theme div.forum_posts .post_by_specialperson div.bubble b.bub4, html.theme div.forum_posts .post_by_specialperson div.bubble div.bdiv { background-color: var(--theme-black60) !important; border-color: var(--theme-black60) !important; } html.theme div.forum_posts .post_by_specialperson div.bubble b.bub1 { background-color: var(--theme-bg-primary); } html.theme #Left_menu .leftmenumugshot, html.theme #Left_menu .leftmenumugshot div, html.theme #Left_menu .leftmenumugshot .namebar, html.theme #Left_menu .leftmenumugshot .nb1, html.theme #Left_menu .leftmenumugshot .nb2, html.theme #Left_menu .leftmenumugshot .nbimage, html.theme #Left_menu .leftmenumugshot .nbtop, html.theme #Left_menu .leftmenumugshot a { background-color: var(--theme-black100); color: var(--theme-text-primary); } html.theme #Left_menu .leftmenumugshot .avatar_mugshot_lnk > div { background-color: var(--theme-bg-card); color: var(--theme-text-primary); } html.theme #Left_menu .slMenuItem_depth1:not(.naddi), html.theme #Left_menu .slMenuItem_bottom_depth1, html.theme #Left_menu .slMenuItem_depth1_nosub, html.theme #Left_menu .slMenuItem_bottom_depth1_nosub, html.theme #Left_menu .menu-item { background: var(--theme-gradient-gray) !important; } html.theme #Left_menu .slMenuItem_depth1:not(.naddi):hover, html.theme #Left_menu .slMenuItem_bottom_depth1:hover, html.theme #Left_menu .slMenuItem_depth1_nosub:hover, html.theme #Left_menu .slMenuItem_bottom_depth1_nosub:hover, html.theme #Left_menu .menu-item:hover { background: var(--theme-gradient-pink) !important; } html.theme #Left_menu .slMenuItem_bottom_depth1, html.theme #Left_menu .slMenuItem_bottom_depth1_nosub, html.theme #Left_menu .slMenuItem_permanent_no_sub_bottom_depth1 { border-radius: 0 0 9px 9px; } html.theme #Left_menu .slMenuItem_permanent_depth1, html.theme #Left_menu .slMenuItem_permanent_no_sub_depth1, html.theme #Left_menu .slMenuItem_permanent_no_sub_bottom_depth1, html.theme #Left_menu .slMenuItem_hover_depth1, html.theme #Left_menu .slMenuItem_bottom_depth1_hover, html.theme #bw-settings nav#Left_menu .menu-item.selected { background: var(--theme-gradient-pink) !important; } html.theme #Left_menu .slMenuItem_depth2:hover, html.theme #Left_menu .slMenuItem_depth2:active { color: #c37d8c; } html.theme #Left_menu .Left_menu_Bottom ul { background: var(--theme-bg-primary); /*border-radius: 0 0 9px 9px;*/ } /* =========================================== WIDGETS =========================================== */ html.theme body .widget a { color: var(--theme-text-primary); } html.theme .widget_pattern_full { filter: invert(100%); } html.theme .widget_header_text { color: var(--theme-text-primary); } html.theme #widget_avatar_box .widget_header_text { /* STAYS WHITE! */ color: #FFF !important; } html.theme .widget_pink_style a, html.theme .widget_pink_style a:visited { color: var(--theme-text-primary); } html.theme .widget_message_all { color: var(--theme-text-primary); } html.theme .widget_wardrobe_challenge { background: var(--theme-bg-primary); border-radius: 10px; color: var(--theme-text-primary); } html.theme #wardrobe_mask1, html.theme #wardrobe_mask2 { filter: invert(100%); } html.theme .widget_message_all a:hover { color: rgba(140, 175, 218, 0.5); } html.theme .widget_body { background: var(--theme-bg-primary); color: var(--theme-text-primary); } /* =========================================== AVATAR BACKGROUNDS =========================================== */ html.theme a.avatar_shot_small_lnk div, html.theme a.avatar_shot_small div, html.theme a.avatar_shot_small_lnk_backstage_mp div, html.theme a.avatar_shot_small_backstage_mp div, html.theme a.avatar_mugshot_lnk div, html.theme a.avatar_mugshot div, html.theme a.avatar_small_mugshot_lnk div, html.theme a.avatar_small_mugshot div { background: var(--theme-bg-card); } html.theme a.avatar_mugshot_lnk div span, html.theme a.avatar_mugshot div span { filter: drop-shadow(2px 4px 6px var(--theme-black)); } html.theme a.avatar_shot_small_lnk:hover img, html.theme a.avatar_mugshot_lnk:hover span { filter: invert(1); } /* =========================================== THEME COLORS - Solid backgrounds =========================================== */ html.theme .theme1 div.solidbackground { background-color: var(--theme-theme-gray) !important; } html.theme .theme2 div.solidbackground { background-color: var(--theme-theme-blue) !important; } html.theme .theme3 div.solidbackground { background-color: var(--theme-theme-pink) !important; } html.theme .theme4 div.solidbackground { background-color: var(--theme-theme-sand) !important; } html.theme .theme5 div.solidbackground { background-color: var(--theme-theme-green) !important; } html.theme .theme6 div.solidbackground { background-color: #5c3d69 !important; } html.theme .theme7 div.solidbackground { background-color: var(--theme-theme-teal) !important; } /* =========================================== THEME COLORS - Namebar =========================================== */ html.theme .theme1 div.namebar b, html.theme .theme2 div.namebar b, html.theme .theme3 div.namebar b, html.theme .theme4 div.namebar b, html.theme .theme5 div.namebar b, html.theme .theme6 div.namebar b, html.theme .theme7 div.namebar b, html.theme .theme8 div.namebar b { color: var(--theme-text-header); } html.theme .theme1 div.namebar b { background: var(--theme-theme-gray);} html.theme .theme2 div.namebar b { background: var(--theme-theme-blue);} html.theme .theme3 div.namebar b { background: var(--theme-theme-pink);} html.theme .theme4 div.namebar b { background: var(--theme-theme-sand);} html.theme .theme5 div.namebar b { background: var(--theme-black100);} /* TODO: gray-black? */ /*html.theme .theme6 div.namebar b { background: var();}*/ /* TODO: magazine? */ html.theme .theme7 div.namebar b { background: var(--theme-theme-green);} /* TODO: not sure about this one...? */ html.theme .theme8 div.namebar b { background: var(--theme-gradient-lightblue-divider);} html.theme .conversation div.namebar b { background: var(--theme-theme-pink) none repeat scroll 0 0;} /* =========================================== THEME COLORS - Table headers =========================================== */ html.theme .theme1 .std_table table th { background: var(--theme-gradient-gray); } html.theme .theme2 .std_table table th { background: var(--theme-gradient-blue); } html.theme .theme3 .std_table table th { background: var(--theme-gradient-pink); } html.theme .theme4 .std_table table th { background: var(--theme-gradient-sand); } html.theme .theme5 .std_table table th { background: var(--theme-gradient-green); } html.theme .theme7 .std_table table th { background: var(--theme-gradient-teal); } /* =========================================== TABLES - General =========================================== */ html.theme .theme1 .wtable tr.odd, html.theme .theme2 .wtable tr.odd, html.theme .theme3 .wtable tr.odd, html.theme .theme4 .wtable tr.odd { background-color: var(--theme-black80); } html.theme .brandedclubs .wtable tr, html.theme .brandedclubs .wtable th { background: transparent; } html.theme div.wtable_bottom_2_odd { background: var(--theme-bg-primary); border-radius: 0 0 9px 9px; } html.theme .moderatorCaseList tr:hover td { background-color: var(--theme-theme-pink); } /* =========================================== MSGBOX / DIALOGS =========================================== */ html.theme #msgbox_content { color: var(--theme-text-primary); } html.theme #msgbox_content a, html.theme #msgbox_content h2 { color: var(--theme-text-primary); } html.theme #msgbox .msgbox_msg_top, html.theme #msgbox .msgbox_msg_bottom { background: var(--theme-theme-blue); } html.theme #msgbox .msgbox_error_top, html.theme #msgbox .msgbox_error_bottom { background: var(--theme-theme-pink); } html.theme #msgbox .msgbox_confirm_top, html.theme #msgbox .msgbox_confirm_bottom { background: var(--theme-theme-sand); } html.theme #msgbox .msgbox_purple_top, html.theme #msgbox .msgbox_purpletop, html.theme #msgbox .msgbox_purple_bottom { background: #5c3d69; } html.theme #msgbox .msgbox_msg_top, html.theme #msgbox .msgbox_error_top, html.theme #msgbox .msgbox_confirm_top, html.theme #msgbox .msgbox_purpletop, html.theme #msgbox .msgbox_purple_top { border-radius: 9px 9px 0 0; } html.theme #msgbox .msgbox_msg_bottom, html.theme #msgbox .msgbox_error_bottom, html.theme #msgbox .msgbox_confirm_bottom, html.theme #msgbox .msgbox_purple_bottom { border-radius: 0 0 9px 9px; } /* =========================================== ACTION PANEL =========================================== */ html.theme #action_panel_content, html.theme #action_panel_contentwidgetTitleContent, html.theme div.panel_content { color: var(--theme-text-primary) !important; } html.theme #action_panel_bottom, html.theme .action_panel_padding { background: var(--theme-black80); } /* =========================================== MODEL DIALOG / INSPECT BOX =========================================== */ html.theme div#modeldialog_inspect_box { background: rgba(90, 91, 87, 0.53); backdrop-filter: blur(1.5px); border: none; box-shadow: 0 0 5px 5px rgba(90, 91, 87, 0.53); } html.theme div#modeldialog_inspect_box table.itembox td, html.theme div#modeldialog_inspect_box table.itembox th { border-radius: 10px; background: #71726d; } /* =========================================== CAMPAIGNS WIDGET =========================================== */ html.theme #campaigns_widget_widgetContainer { background: var(--theme-bg-primary) !important; } /* =========================================== LOADING INDICATORS =========================================== */ html.theme .loaddiv { filter: invert(1); } html.theme #activity_log_widget_widgetContainer_inner #load_img { filter: invert(1); } /* =========================================== FORUM / POSTS =========================================== */ html.theme div.forum_posts td.post_avatar { background-color: var(--theme-bg-card); } html.theme .post_content { color: var(--theme-text-primary); } html.theme td.forum_thread_deletetopics { background-color:var(--theme-bg-primary); } html.theme div.post_history { background-color: var(--theme-black60); } /* =========================================== MAIL =========================================== */ html.theme .theme2 #mail_item .from_bar, html.theme .theme3 #mail_item .from_bar { color: var(--theme-text-primary); } /* =========================================== TOOLTIP =========================================== */ html.theme #dhtml.themetooltip { background-color: var(--theme-black100); color: var(--theme-text-primary); border-color: var(--theme-black60); } /* =========================================== MODERN CARD COMPONENT (Dark Mode) =========================================== */ html.theme .modern-card { background-color: var(--theme-bg-card); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); } html.theme .modern-card-header { background: var(--theme-gradient-gray); color: var(--theme-text-header); } html.theme .modern-card-body { background: var(--theme-bg-card); color: var(--theme-text-primary); } html.theme .card-main-text { color: var(--theme-text-primary); } html.theme .card-sub-text { color: var(--theme-text-secondary); } /* =========================================== ADAPTIVE MENU (Dark Mode) =========================================== */ html.theme #Adaptive_menu .topbar { background: var(--theme-gradient-black) !important; } html.theme #Adaptive_menu .slMenuItem_depth1 { background: var(--theme-gradient-gray) !important; } html.theme #Adaptive_menu .slMenuItem_depth1:hover { background: var(--theme-gradient-pink) !important; } html.theme div.namebar a { color: var(--theme-white100) !important; } html.theme .profile_doll_position { background: var(--theme-black70); } html.theme .speech-bubble { background: var(--theme-black60); border: 1px solid var(--theme-black); } html.theme .speech-bubble::before { border-color: transparent var(--theme-black) transparent transparent; } html.theme .speech-bubble::after { border-color: transparent var(--theme-black60) transparent transparent; } html.theme .theme4 div.namebar b { background: var(--theme-theme-sand); } html.theme .profiletable td.divider { background-color: var(--theme-bg-primary); } html.theme .profiletable tr { background: var(--theme-bg-primary); color: var(--theme-text-primary); } html.theme .profiletable tr.profile_odd { background: var(--theme-black80); } html.theme div.rewardtextnopad { color: var(--theme-text-primary); } html.theme .color-option.selected { border: 2px var(--theme-white80) solid; } html.theme .wframes_content.forumsettings .optRow, html.theme .wframes_content.forumsettings .optRow div.optDesc, html.theme .wframes_content.forumsettings .optRow div.title, html.theme .wframes_content.accessibility .optRow, html.theme .wframes_content.accessibility .optRow div.optDesc, html.theme .wframes_content.accessibility .optRow div.title{ background: var(--theme-black80); color: var(--theme-text-primary) !important; } html.theme .shadowbox { background: none; } /* PICTURE ARCHIVE */ html.theme #picture_archive_top_widgetContainer .top_content_header { color: var(--theme-leftmenu-selected); } html.theme .top_content_price { color: var(--theme-text-primary); } html.theme #picture_archive_top_widgetContainer { background: var(--theme-bg-primary) !important; } html.theme .gray_block_1, html.theme .gray_block_2 { background: var(--theme-bg-card); } /* =========================================== MISC ELEMENTS =========================================== */ html.theme .pagetool input { border: 1px var(--theme-black60) solid; } /* IMPORANT - exclude this rule for magazine editor pages & HTML editor profile page! */ html.theme .wframes_content:not(.productionpage_container_mid_editor,.productionpage_container_mid, .htmleditor_page) { background: var(--theme-bg-primary); color: var(--theme-text-primary) !important; } html.theme .wframes_content.htmleditor_page.edit_page { background: var(--theme-bg-primary); } /* Force children to ignore the parent's color and look higher up the chain - ALWAYS fallback top default (GRAY) */ html.theme .wframes_content #magazine_editor { color: #545454; } html.theme .wframes_content .news_template a { color: #545454 !important; /* keep it grey! */ } html.theme .news_template .blackboard_top, html.theme .news_template .blackboard_top_short, html.theme .news_template .noteboard_top { width: 699px; border-radius: 12px 12px 0 0; /* image not very compatible w/ darkmode! */ background-position-y: -6px; } html.theme .htmleditor_page:has(#club_link_tracking) { background-color: var(--theme-bg-primary) !important; /* keep it dark! */ } /* EXCLUDE MAGAZINE JOURNALIST A-TAGS + GAMEMECHANICS TEXT! */ html.theme .wframes_content a:not(.memberentry_namebox_journalist, .memberentry_namebox_exjournalist, .memberentry_namebox_invited, .memberentry_namebox_journalist a, .memberentry_namebox_exjournalist a, .memberentry_namebox_invited a, .gamemechanics_want_more_points_text a) { color: var(--theme-text-primary) !important; } html.theme .wframes_content a:hover:not(.memberentry_namebox_journalist, .memberentry_namebox_exjournalist, .memberentry_namebox_invited, .memberentry_namebox_journalist a, .memberentry_namebox_exjournalist a, .memberentry_namebox_invited a, .gamemechanics_want_more_points_text a) { color: var(--theme-leftmenu-selected) !important; } html.theme .room_item_container { background: #282c2c; } html.theme .room_thumb_border { border: var(--theme-black60) 7px solid; } html.theme .room_item .namebar .nbtop a:hover { color: var(--theme-white70) !important; } html.theme .gotest_question, html.theme .gotest_optB, html.theme div.gotest_createContent textarea { background-color: var(--theme-bg-input) !important; } html.theme .goTest_Rank_score_hi-light { background-color: var(--theme-theme-green); } html.theme .start_test_club { background-color: var(--theme-black60); color: var(--theme-text-primary); border:1px solid var(--theme-black90); } html.theme .selftest_box, html.theme .selftest_background, html.theme .goTest_taketest_bg { background:url(/images/backgrounds/testyourself/selftest_bg_dark.png) no-repeat; } html.theme .mytests_image_1 { background: url(/images/backgrounds/testyourself/mytests1_2.png) no-repeat; } html.theme .mytests_image_2 { background: url(/images/backgrounds/testyourself/mytests1.png) no-repeat; } html.theme .my_published_tests_image { background: url(/images/backgrounds/testyourself/mytests1.png) no-repeat; } html.theme #replytoinfo { scrollbar-color: var(--theme-black90) var(--theme-black70); } html.theme #feedback_dialog textarea { background: var(--theme-black60); color: var(--theme-white100); } html.theme .goSuperExchange a { color: var(--theme-white100); } html.theme #search_result { background-color: var(--theme-black80); } html.theme .no_images_found { color: var(--theme-text-primary); } html.theme .wframes_content.billboard_widget div.billboard_image, html.theme .topselling_item_container { box-shadow: 4px 5px 7px var(--theme-black); } html.theme #activity_log_widget_widgetContainer { background: var(--theme-bg-primary); /*background of the whole thing*/ } html.theme div.activity_log_widget_empty { background: var(--theme-bg-primary) right bottom url(/images/friends/activities_filler_note.jpg) no-repeat !important; } html.theme #activity_log_widget_widgetContainer .bubble * { color: white; } html.theme .theme_activity_log div.bubble div.bdiv { overflow: auto; background: var(--theme-bubble-inside) !important; } html.theme .theme_activity_log #activity_log_widget_widgetContainer div.bubble div.bdiv:hover { background: var(--theme-bubble-inside-hover) !important; } html.theme #wag_panel #submitform #text_field { background: var(--theme-bg-input); color: var(--theme-white100); } /* =========================================== CLUB WIDGET RE-WORKED =========================================== */ html.theme .community_dyn_widget_club_content table.wtable tr td, html.theme .community_dyn_widget_club_content table.wtable tr th, html.theme .community_dyn_widget_club_content table.wtable tr.odd td { border-top: 1px var(--theme-black100) solid !important; border-right: 1px var(--theme-black100) solid !important; border-bottom: none; color: var(--theme-text-primary); } html.theme .community_dyn_widget_club_content table.wtable tr.odd td { var(--theme-black70) !important } /* PROFILE -- SOCIAL */ html.theme div.content_friend_banner { background: var(--theme-bg-primary) url(/images/backgrounds/banner_bg_filler.png); } html.theme div.friendAppCard { background: var(--theme-bg-primary); } html.theme div.friendAppCardIncoming { background-color: var(--theme-black80); } html.theme div.friendcardplaceholder { background: var(--theme-bg-primary) url(/images/backgrounds/big_widget_bg.png) -360px 0; width: 357px; } html.theme div.leftgreyBorder { border-right: 1px solid var(--theme-black70); } html.theme div.infocardpart { background-color: var(--theme-black70); } html.theme .grey_bar { background: var(--theme-black80); } html.theme div.wtable_bottom_3 { border-radius: 0 0 9px 9px; } html.theme .theme2 div.wtable_bottom_3 { background: var(--theme-theme-blue); } html.theme .theme3 div.wtable_bottom_3 { background: var(--theme-theme-pink); } html.theme .theme4 div.wtable_bottom_3 { background: var(--theme-theme-sand); } html.theme div.banner_174b, html.theme div.wtable_bottom_3_odd, html.theme .theme1 div.wtable_bottom_3, html.theme div.wframes_bottom_friend_banner { border-radius: 0 0 9px 9px; } html.theme .my_post_static_text, html.theme .my_comment_static_text { background: var(--theme-black60) !important; } html.theme .friend_message_board_show_comment_area { background: var(--theme-bubble-inside); } html.theme .my_post_edit, html.theme .my_comment textarea { color: var(--theme-text-primary); background: var(--theme-black60); } html.theme .my_post_image_button a:hover { color: var(--theme-white100) !important } html.theme .wframes_content.support_main a { color: var(--theme-text-primary) !important; } .support_main table td img { border-radius: 16px; } html.theme .gallery_background { filter: invert(100%); } html.theme .gallery_text { color: var(--theme-text-primary) !important; } html.theme .national_items_content { background-color: var(--theme-bg-primary) !important; color: var(--theme-text-primary); } html.theme .section-top .top-header-title, html.theme .section-top .top-header-text { color: var(--theme-text-primary); } html.theme .claim-counter, html.theme #country-selected-section, html.theme #submit-btn { background: var(--theme-black80); } html.theme .preview-and-claim { border: var(--theme-black) solid 1px; } html.theme .doll-preview img { background-color: var(--theme-black70); } html.theme .poll_title, html.theme .poll_content, html.theme .poll_result_overlay_content.sponsored { color: var(--theme-text-primary); } /* CURRENCY EXCHANGE */ html.theme .goSuperExchange { background-color: var(--theme-bg-primary); color: var(--theme-text-primary); } html.theme .goSuperExchange table.wtable th, html.theme .goSuperExchange table.wtable tr.odd th { border-bottom: none; border-top: 1px var(--theme-black) solid; border-right: 1px var(--theme-black) solid; } /* MESSAGES */ html.theme .wframes_wfr.white, html.theme div.banner_174b, html.theme div.wtable_bottom_3_odd, html.theme .theme1 div.wtable_bottom_3, html.theme div.wframes_bottom_friend_banner, html.theme #mail_lines { background: var(--theme-bg-primary) !important; } html.theme #mail_lines tr td { border-right: none !important; } html.theme #mail_lines table { color: var(--theme-text-primary); } #mail_lines tbody .outbox.unread, #mail_lines tbody .outbox.unread.odd { background-color: var(--theme-outbox-msg-unread); } #mail_lines tbody .inbox.unread, #mail_lines tbody .inbox.unread.odd { background-color: var(--theme-inbox-msg-unread); } #mail_lines tbody .selected, #mail_lines tbody .prev.selected { background-color: var(--theme-inbox-msg-selected); } #mail_lines tbody .prev { background-color: var(--theme-bg-primary); } html.theme #Left_menu .depth2chosenColor { color: var(--theme-leftmenu-selected); /* only used when a theme is applied! */ } html.theme .mail_content .auction_background_won, html.theme .mail_content .auction_background_wornout_buyer, html.theme .mail_content .auction_background_lost { background-color: #2e1a18; } html.theme .mail_content .auction_background_wornout_seller, html.theme .mail_content .auction_background_no_buyer, html.theme .mail_content .auction_background_sold { background-color: #101e2e; } /* SUPERSTARS */ html.theme .rank_score_container { background: var(--theme-black80) !important; } /* SHOP/INVENTORY */ html.theme .inventory, html.theme .inventory .itemBrowser, html.theme .tagDialog { background-color: var(--theme-bg-primary); } html.theme .inventory #layerNavigationBox { background-color: var(--theme-theme-pink); } html.theme .inventory #layerNavigationBox #subLayerNavigator, html.theme .inventory #layerNavigationBox #layerNavigator li.selected, html.theme .inventory[data-context="1"] #layerNavigationBox .searchModelBox, html.theme .inventory[data-context="4"] #layerNavigationBox .searchModelBox, html.theme .inventory[data-context="2"] #layerNavigationBox .searchModelBox, html.theme .inventory[data-context="5"] #layerNavigationBox .searchModelBox { background-color: var(--theme-black80); } html.theme .inventory .filterNavigator, html.theme .inventory .yourModel, html.theme .basketSelected { background: var(--theme-black60); } html.theme .inventory .yourModel .avatar { background-color: var(--theme-black80); border: solid var(--theme-bg-primary) 14px; box-shadow: 0 0 0 1px var(--theme-black); } html.theme #avatarSliderBox { border: solid var(--theme-black) 1px; border-left: none; background-color: var(--theme-bg-primary); } html.theme .inventory .yourModel .outfitTotalPrice { background-color: var(--theme-bg-primary); border: solid var(--theme-black) 1px; color: var(--theme-text-primary); } html.theme .inventory .yourModel .outfitTools { border: solid var(--theme-black) 1px; border-top: none; } html.theme .inventory .yourModel .outfitList .background, html.theme .inventory .yourModel .removeAllButtonBox { background-color: var(--theme-bg-primary); box-shadow: 0 0 0 1px var(--theme-black); } html.theme .inventory .yourModel .outfitList ul li { border-bottom: dotted var(--theme-text-primary) 1px; } html.theme .inventory .yourModel .outfitList ul li:last-child { border-bottom: none; } html.theme .inventory .itemGrid .itemDisplay, html.theme .inventory .selected .gfxtext.filter.gomoney, html.theme .inventory .selected .gfxtext.filter.diamond, html.theme .inventory #layerNavigationBox #layerNavigator li.selected, html.theme .inventory #layerNavigationBox #subLayerNavigator li, html.theme .inventory #contextNavigator, html.theme .inventory label, html.theme .inventory .yourModel .outfitTotalPrice h3, html.theme .inventory .yourModel .outfitTotalPrice > span, html.theme .inventory .yourModel .outfitList .basketPrice, html.theme .inventory .yourModel .removeAllButtonBox, html.theme .inventory .itemGrid .itemDisplay .description .auctionButton.enabled, html.theme .inventory .itemGrid .itemDisplay .description .tradeButton.enabled, html.theme .inventory .itemGrid .itemDisplay .description .tagsButton.enabled, html.theme .inventory .itemGrid .itemDisplay .description .bidButton.enabled, html.theme .inventory .itemGrid .itemDisplay .description .editButton.enabled, html.theme .inventory .itemGrid .itemDisplay .description .cancelButton, html.theme .inventory[data-context="1"] #layerNavigationBox .searchModelBox, html.theme .inventory[data-context="4"] #layerNavigationBox .searchModelBox, html.theme .inventory[data-context="2"] #layerNavigationBox .searchModelBox, html.theme .inventory[data-context="5"] #layerNavigationBox .searchModelBox, html.theme .inventory #layerNavigationBox .searchModelBox .modelName, html.theme .inventory #settingscontainer { color: var(--theme-white100); } html.theme .inventory #contextNavigator { background: var(--theme-bg-primary); } html.theme .inventory .gfxtext.filter.gomoney, html.theme .inventory .gfxtext.filter.diamond { color: var(--theme-white70); } html.theme .inventory .filterNavigator .dropdown { background-color: var(--theme-bg-input); color: var(--theme-white100); border: solid var(--theme-black100) 1px; } html.theme .inventory .filterNavigator .dropdown .arrow { border-left: solid var(--theme-black100) 1px; border-bottom: solid var(--theme-black100) 1px; background-color: var(--theme-black80); } html.theme .inventory .filterNavigator .dropdown .arrow span { border-top: solid var(--theme-white100) 5px; } html.theme .inventory .filterNavigator .dropdown.active ul { background-color: var(--theme-bg-input); border: solid var(--theme-black100) 1px; border-top: none; } html.theme .inventory .filterNavigator .dropdown ul li { color: var(--theme-text-primary); } html.theme .inventory .yourModel .currency, html.theme .inventory .itemDisplay .currency, html.theme .inventory .yourModel .basketLockBtn, html.theme .inventory .yourModel .basketDelBtn, html.theme .inventory #layerNavigationBox .searchModelBox img { filter: invert(100%); } html.theme .inventory .yourModel .basketDelBtn { margin: 0 3px 0; } html.theme .inventory[data-context="1"] .yourModel .outfitTools { margin-top: 7px; height: 23px; border-top: solid var(--theme-black) 1px; } html.theme .inventory .frontpage .mannequins .shop { background-color: var(--theme-mannequins-shop); } html.theme .inventory .frontpage .mannequins .jd { background-color: var(--theme-mannequins-jd); } html.theme .inventory .frontpage .mannequins .userDesign { background-color: var(--theme-mannequins-userdesign); } /**/ html.theme .inventory .itemGrid .itemDisplay.quality0 .itemWindow, html.theme .inventory .outfitList li div.quality0 .basketImg, html.theme .buyConfirmDialog .itemDisplay.quality0, html.theme .auctionDialog .itemDisplay.quality0, html.theme .tagDialog .itemDisplay.quality0 { background-color: var(--quality0-dark); } /**/ html.theme .inventory .itemGrid .itemDisplay.quality1 .itemWindow, html.theme .inventory .outfitList li div.quality1 .basketImg, html.theme .buyConfirmDialog .itemDisplay.quality1, html.theme .auctionDialog .itemDisplay.quality1, html.theme .tagDialog .itemDisplay.quality1 { background-color: var(--quality1-dark); } /**/ html.theme .inventory .itemGrid .itemDisplay.quality2 .itemWindow, html.theme .inventory .outfitList li div.quality2 .basketImg, html.theme .buyConfirmDialog .itemDisplay.quality2, html.theme .auctionDialog .itemDisplay.quality2, html.theme .tagDialog .itemDisplay.quality2 { background-color: var(--quality2-dark); } /**/ html.theme .inventory .itemGrid .itemDisplay.quality3 .itemWindow, html.theme .inventory .outfitList li div.quality3 .basketImg, html.theme .buyConfirmDialog .itemDisplay.quality3, html.theme .auctionDialog .itemDisplay.quality3, html.theme .tagDialog .itemDisplay.quality3 { background-color: var(--quality3-dark); } /**/ html.theme .inventory .itemGrid .itemDisplay.quality4 .itemWindow, html.theme .inventory .outfitList li div.quality4 .basketImg, html.theme .buyConfirmDialog .itemDisplay.quality4, html.theme .auctionDialog .itemDisplay.quality4, html.theme .tagDialog .itemDisplay.quality4 { background-color: var(--quality4-dark); } /**/ html.theme .inventory .itemGrid .itemDisplay.quality5 .itemWindow, html.theme .inventory .outfitList li div.quality5 .basketImg { background-color: var(--quality5-dark); } html.theme .inventory .itemGrid .itemDisplay.quality5.jd .itemWindow, html.theme .inventory .outfitList li div.quality5.jd .basketImg { background-color: var(--quality5-jd-dark); } /* THEME-BASED TINYMCE TEXT EDITOR */ html.theme .tox:not(.tox-tinymce-inline) .tox-editor-header, html.theme .tox .tox-toolbar-overlord { background-color: var(--theme-bg-primary); } html.theme .tox .tox-edit-area { color: var(--theme-text-primary) !important; } html.theme .tox .tox-toolbar, html.theme .tox .tox-toolbar__overflow, html.theme .tox .tox-toolbar__primary { background-color: var(--theme-bg-primary); background-image: repeating-linear-gradient(var(--theme-black) 0 1px, transparent 1px 39px); } html.theme .tox .tox-tbtn svg { fill: var(--theme-white100); } html.theme .tox-tinymce { border: 2px solid var(--theme-black); } html.theme .tox .tox-statusbar { background-color: var(--theme-bg-primary); border-top: 1px solid var(--theme-black); color: var(--theme-text-primary); } html.theme .tox .tox-statusbar__resize-handle svg { fill: var(--theme-black60); } html.theme div.tox-sidebar-wrap div.tox-edit-area iframe { background-color: var(--theme-black60); outline: 1px solid var(--theme-black); } html.theme #EditText div.tox-sidebar-wrap div.tox-edit-area iframe, html.theme #edittextWin div.tox-sidebar-wrap div.tox-edit-area iframe { background-color: transparent !important; /* WE SHOULD NOT CHANGE THE BACKGROUND IN MAG EDITOR! */ } html.theme .smileyInlinePanel .smileyHeader { color: var(--theme-text-primary) !important; } html.theme .tox .tox-statusbar__path-item { color: var(--theme-text-primary); } html.theme .tox:not(.tox-tinymce-inline).tox-tinymce--toolbar-bottom .tox-editor-header { border-top: 1px solid var(--theme-black100); } /* THEME-BASED SMILEY POP-UP */ html.theme #smileyPopup { background: var(--theme-black70); } /* DESIGNER */ html.theme .top_content textarea { background: var(--theme-black70); color: var(--theme-text-primary); } html.theme .msgbox_purpletop img.design_image { background: var(--theme-black60); } /* COMPETITIONS */ html.theme .theme2 .career_expander li.even { background-color: var(--theme-theme-blue); } html.theme .theme3 .career_expander li.even { background-color: var(--theme-theme-pink); } html.theme .theme4 .career_expander li.even { background-color: var(--theme-theme-sand); } html.theme .career_expander li img { filter: invert(100%); /* inverting the star icon for ul list items! */ } /* FAME LOG ACTION PANEL (Game Mechanics Famelog overlay) */ html.theme .black_panel .game_mechanics_dropdown.wtable tr{ background-color: var(--theme-black80); } html.theme .black_panel .game_mechanics_dropdown.wtable tr.odd{ background-color: var(--theme-black70); } html.theme .gamemechanics_details .background_div { background: var(--theme-black80); } /* OTHER BLACK PANEL STUFF */ html.theme .black_panel .wtable .odd { background: var(--theme-black70); } html.theme .black_panel .ruler { background: none; } html.theme .black_panel .modelNamePanel { background: var(--theme-black60); } html.theme .modelNamePanel .internal_panel_hd { background: var(--theme-black70); } html.theme .black_panel .userPanel a , html.theme .black_panel .userPanel a:visited, html.theme .black_panel a.navLink { color: var(--theme-text-primary); } html.theme .black_panel .userPanel a:hover, html.theme .black_panel a.navLink:hover { color: var(--theme-white100); } html.theme div.panel_content a { color: var(--theme-text-primary); } html.theme .black_panel .userPanel { color: var(--theme-white100); } html.theme #overlay, html.theme .auctionDialog { background-color: var(--theme-black80); } html.theme #overlay table th, html.theme .auctionDialog .auctionImageHeader { background-image: linear-gradient(var(--theme-black60), var(--theme-black70)); } /* MOD-CASE MESSAGE BACKGROUNDS */ html.theme table.moderatorCaseDetails tr.note .post_inner { /*background-color:rgb(240,215,185);*/ background-color: #4d3d2c; } html.theme table.moderatorCaseDetails tr.goMsg .post_inner { /*background-color:rgb(235, 220, 220);*/ background-color: #453535; } html.theme table.moderatorCaseDetails tr.userReply .post_inner { /*background-color:white;*/ background-color: #2c2f33; } html.theme table.moderatorCaseDetails tr.closeCase .post_inner { /*background-color:#bbb;*/ background-color: #1e1e1e; } /* INFOBOX */ html.theme .full_text.infobox h2, html.theme .billing_safePaymentHighlight { color: var(--theme-text-primary); } :root { /* Menu Gradients --> used on the billing page! */ --gradient-black-menu: linear-gradient(to bottom, #4A4A4A 0%, #1A1A1A 52%, #000000 52%, #000000 100%); --gradient-gray-menu: linear-gradient(to bottom, #a7a7a7 0%, #717070 52%, #696969 52%, #696969 100%); --gradient-pink-menu: linear-gradient(to bottom, #E5C0C7 0%, #CB8C99 52%, #C57F8E 52%, #B56475 100%); --gradient-blue-menu: linear-gradient(to bottom, #DDE8F6 0%, #B3CAE0 52%, #A9C0D6 52%, #95B2CB 100%); --gradient-red-menu: linear-gradient(to bottom, #E6C3C9 0%, #D19AA6 52%, #CB8D9A 52%, #BB6E7E 100%); /* TODO: same as pink? */ /* Gradients based on the ThemeColor.java class and wframes:top bars! */ --theme-gradient-gray-default: linear-gradient(to bottom, #adadad 0%, #959595 60%, #898989 60%, #616161 100%); /*UPDATED */ --theme-gradient-blue-default: linear-gradient(to bottom, #d7eafc 0%, #a3c2e1 60%, #99bbdc 60%, #80a6cb 100%); /*UPDATED */ --theme-gradient-pink-default: linear-gradient(to bottom, #e5c0c8 0%, #c78795 60%, #c27c8b 60%, #b56475 100%); /*UPDATED */ --theme-gradient-sand-default: linear-gradient(to bottom, #e3d0bc 0%, #d4b596 60%, #cfad8a 60%, #c9a47f 100%); /*UPDATED */ --theme-gradient-lightblue-default: linear-gradient(to bottom, #d0e8ea 0%, #acd8dc 60%, #9cd2d6 60%, #8ecace 100%); --theme-gradient-lightblue-reverse: linear-gradient(to bottom, #8ecace 0%, #9cd2d6 60%, #acd8dc 60%, #d0e8ea 100%); /*SKETZMO*/ --theme-gradient-lightblue-divider: #85BEC1FF; --theme-gradient-brightpink-default: linear-gradient(to bottom, #e38ebc 0%, #cc408d 100%); /* (VIP) */ --theme-gradient-brightblue-default: linear-gradient(to bottom, #51c2cf 0%, #0aa6ba 100%); /* (VIP) */ --theme-gradient-brightgreen-default: linear-gradient(to bottom, #a3de74 0%, #67bb29 100%); /* (VIP) */ --theme-gradient-green-default: linear-gradient(to bottom, #c5edcc 0%, #89bd92 60%, #7eb385 60%, #63966c 100%); /* TODO: TO BE USED FOR ADVERTISEMENT! */ /* The actual gradients used and overwritten by other themeVariables.css! */ /* THIS IS IMPORTANT SO THAT WE CAN STILL USE DEFAULT VALUES FOR PROFILES! ONLY IN HERE! */ --theme-gradient-gray: var(--theme-gradient-gray-default); --theme-gradient-blue: var(--theme-gradient-blue-default); --theme-gradient-blue-smooth: linear-gradient(#99bbdc, #80a6cb); --theme-gradient-pink: var(--theme-gradient-pink-default); --theme-gradient-sand: var(--theme-gradient-sand-default); --theme-gradient-lightblue: var(--theme-gradient-lightblue-default); --theme-gradient-green: var(--theme-gradient-green-default); --theme-gradient-brightpink: var(--theme-gradient-brightpink-default); --theme-gradient-brightblue: var(--theme-gradient-brightblue-default); --theme-gradient-brightgreen: var(--theme-gradient-brightgreen-default); /* Gradients for the framework header, black panel, menu icons... */ --gradient-framework-header: linear-gradient(to bottom, #565656, #808080); --gradient-framework-normal: linear-gradient(to bottom, #fefefe 0%, #d9d9d9 66%, #c7c7c7 66%, #c5c0c0 100%); --gradient-framework-selected: linear-gradient(to bottom, #d5d5d5 0%, #717171 66%, #636363 66%, #565656 100%); --gradient-framework-hover: linear-gradient(to bottom, #ffffff 0%, #a0a0a0 66%, #929292 66%, #858585 100%); --gradient-notipager-panel: linear-gradient(to bottom, #999e9e 0%, #868686 100%); /* Gradients for the logout bar */ --gradient-logout-bar: linear-gradient(to bottom, #a9a9a9 0%, #838383 50%, #6b6b6b 50%, #565656 100%); /* BUTTON GRADIENTS RE-WORK -- USED IN button_css.jsp! */ --theme-gradient-gray-dark: linear-gradient(to bottom, #888888 65%, #525252 65%); --theme-gradient-gray-hover: linear-gradient(to bottom, #d0d0d0 65%, #9e9e9e 65%); --theme-gradient-blue-dark: linear-gradient(to bottom, #7aaac8 65%, #4e80a8 65%); --theme-gradient-blue-hover: linear-gradient(to bottom, #aacae4 65%, #82aece 65%); --theme-gradient-pink-dark: linear-gradient(to bottom, #c27e90 65%, #9e5468 65%); --theme-gradient-pink-hover: linear-gradient(to bottom, #dca8b8 65%, #c07890 65%); --theme-gradient-sand-dark: linear-gradient(to bottom, #cca870 65%, #a67a48 65%); --theme-gradient-sand-hover: linear-gradient(to bottom, #e0c898 65%, #c09a68 65%); --theme-gradient-teal-dark: linear-gradient(to bottom, #509898 65%, #2e7470 65%); --theme-gradient-teal-hover: linear-gradient(to bottom, #6ab0a0 65%, #428c7c 65%); --theme-gradient-mint: linear-gradient(to bottom, #7ec888 65%, #50a060 65%); --theme-gradient-mint-hover: linear-gradient(to bottom, #a0d8a0 65%, #72b872 65%); --theme-gradient-orange-dark: linear-gradient(to bottom, #f89464 65%, #ed6c30 65%); --theme-gradient-orange-hover: linear-gradient(to bottom, #fab492 65%, #f3976d 65%); --theme-gradient-lightblue-dark: linear-gradient(to bottom, #8CC6CB 65%, #6EB4BB 65%); /*UPDATED - SKETZMO BUTTON!*/ --theme-gradient-lightblue-hover: linear-gradient(to bottom, #A0CED3 65%, #82BDC4 65%); /*UPDATED - SKETZMO BUTTON HOVER!*/ --theme-gradient-purple-dark: linear-gradient(to bottom, #795c77 65%, #482145 65%); --theme-gradient-purple-hover: linear-gradient(to bottom, #926890 65%, #6b3167 65%); --theme-gradient-lightpurple-dark: linear-gradient(to bottom, #ab6ac6 65%, #924ab0 65%); --theme-gradient-lightpurple-hover: linear-gradient(to bottom, #cda3de 65%, #b776d4 65%); --theme-gradient-lightpink-dark: linear-gradient(to bottom, #dbd0de 65%, #cabcce 65%); --theme-gradient-lightpink-hover: var(--theme-gradient-lightpurple-hover); /* Button Solids */ --theme-billboard-red: #c83182; --theme-billboard-red-hover: #db66a3; --theme-billboard-purple: #914b92; --theme-billboard-purple-hover: #b264b3; --theme-billboard-green: #85b85e; --theme-billboard-green-hover: #a6d383; --theme-billboard-disabled: #bbbbbb; --theme-arrow-fill: #ffffff; --theme-arrow-stroke: #ffffff; --theme-arrow-filter: drop-shadow(0 2px 4px rgba(0,0,0,0.4)); --theme-white60: #eeeeee; --theme-white80: #f8f8f8; --theme-white100: #ffffff; --theme-fmb-bubble: #e6c8c8; --theme-bubble-inside: #E6E1DC; --theme-bubble-border: var(--theme-white60); --theme-bubble-inside-hover: #fff; --theme-inbox-msg-unread: #b1cfed; --theme-inbox-msg-selected: #e6ebfa; --theme-outbox-msg-unread: #E6C8C8; --theme-theme-gray: #545454; --theme-theme-pinklabel: #ffeef7; /* NEW WIDGET GRADIENT COLORS! - in combo with '/images/widgets/patterns/widget_pattern_stone.png' */ --theme-blue-widget: #81acd9; --theme-blue-widget-gradient: linear-gradient(#c2d8ef, #99bde1 60%, #88b2da 60%, #81acd9); --theme-red-widget: #b56576; --theme-red-widget-gradient: linear-gradient(#e5c1c8, #c98b98 60%, #c07887 60%, #b56576); --theme-red-poll-result: linear-gradient(#e5c1c8, /*#c98b98 60%, #c07887 60%,*/ #b56576); --theme-sand-widget: #c9a47f; --theme-sand-widget-gradient: linear-gradient(#e4d3bd, #d8bd9f 60%, #ceab88 60%, #c9a47f); --theme-green-widget: #79c447; --theme-green-widget-gradient: linear-gradient(#bce3a4, #a4d87f 60%, #7dc74e 60%, #79c447); --theme-green-poll-result: linear-gradient(#bce3a4, /*#a4d87f 60%, #7dc74e 60%,*/ #79c447); /* SHOP/INVENTORY STUFF */ --theme-shop-selected: linear-gradient(to bottom, #c47e90, #b47582); --theme-shop-default: linear-gradient(to bottom, #787878, #525252); /* ADVERTISEMENT GRADIENT */ --advertisement-gradient-green: linear-gradient(to bottom, #c6eecc, #63966b); }/* =========================================== DARK-MODE CSS VARIABLES =========================================== */ html.darkmode { /* TODO: these can be theme-adjusted! */ /* Gradients of the Black Theme Color * - primarily used within themeTemplate.css * - some occurances within widget_css.jsp * - range from dark gray to #000 black * - IMPORTANT --> only exist in this css file! */ --theme-black: #000; /* mostly used for borders, outlines, drop-shadows & box-shadows */ --theme-black100: #0d0d0d; /* also primarily borders & some occurrences of background colors */ --theme-black90: #1f1f1f; /* only usage as semantic var '--theme-bg-primary' (check below) */ --theme-black80: #333333; /* used as semantic for bg-card, bubble-border & as a background color */ --theme-black70: #4d4d4d; /* mostly used for backgrounds, also for borders and input fields */ --theme-black60: #666666; /* backgrounds, borders and semantic (speech-bubble-inside) */ --theme-black50: #808080; /* for the lighter part of the menu gradiants */ /* TODO: these can be theme-adjusted! */ /* Gradients of the White Theme Color * - only use within themeTemplate.css * - range from light gray to #fff white (+ pink variation) * - IMPORTANT --> some of these exist in modernThemes.css (default mode) */ --theme-white100: #ffffff; /* semantic use for header text + force-white color for normal text! */ --theme-white85: #e5e5e5; /* only use for occasional text color lighter than white! */ --theme-white80: #d9d9d9; /* primary use - text primary semantic variable // has alternate version! */ --theme-white70: #cccccc; /* only used as semantic text-secondary variable (check below)! */ /* ---------------------------------------------- Semantic Variables ----------------------------------------------- * - usage: * - (PRIMARY) themeTemplate.css, * - css.jsp, * - widget_css.jsp, * - button_css.jsp, * - information_box.jsp, * - details.jsp, * - friend_message_board_css.jsp, * * - various solid colors * - IMPORTANT --> some of these also exist in modernThemes.css (default mode) */ /* TODO: these can be theme-adjusted! */ --theme-bg-primary: var(--theme-black90); /* only usage as the primary background color for darkmode! */ --theme-bg-card: var(--theme-black80); /* usage as a background color for certain avatar elements! */ --theme-bg-input: var(--theme-black70); /* usage as a background color for input fields & textareas! */ --theme-text-primary: var(--theme-white80); /* only usage as the primary TEXT color for darkmode! */ --theme-text-header: var(--theme-white100); /* occasional usage for header text in some cases! */ --theme-text-secondary: var(--theme-white70); /* occasional usage as a text-color! */ /* TODO: these can be theme-adjusted! */ /* NEW ARROW RE-WORK -- USAGE ONLY FOR THE SVG (chevron-right.svg) -- ALTERNATIVE VERSIONS IN modernThemeVariables.css */ --theme-arrow-filter: drop-shadow(0 2px 4px rgba(0,0,0,0.4)); --theme-arrow-fill: #f9e5f0; --theme-arrow-stroke: #f9e5f0; /* TODO: these can be theme-adjusted! */ /* NEW SPEECH BUBBLES RE-WORK -- USAGE FOR FMB & ACTIVITY LOG -- ALTERNATIVE VERSIONS IN modernThemeVariables.css */ --theme-fmb-bubble: #59353c; --theme-bubble-inside-hover: #352629; --theme-bubble-inside: var(--theme-black70); --theme-bubble-border: var(--theme-black90); /* TODO: these can be theme-adjusted! */ /* NEW MAIL INBOX/OUTBOX RE-WORK -- USAGE ONLY FOR MESSAGING -- ALTERNATIVE VERSIONS IN modernThemeVariables.css */ --theme-inbox-msg-unread: #304866; --theme-inbox-msg-selected: #6b8ab2; --theme-outbox-msg-unread: #7d3e4a; /* TODO: these can be theme-adjusted! */ /* ENTIRE FRAMEWORK RE-WORK -- DARKMODE VERSION OF THE MENU ICONS -- SAME VARS DEFINED IN modernThemeVariables.css FOR DEFAULTMODE! */ /* USED IN framework.jsp! */ --gradient-framework-header: linear-gradient(to bottom, var(--theme-black100), var(--theme-black80)); --gradient-framework-normal: linear-gradient(to bottom, var(--theme-black60) 0%, var(--theme-black70) 66%, var(--theme-black80) 66%, var(--theme-black90) 100%); --gradient-framework-selected: linear-gradient(to bottom, var(--theme-black70) 0%, var(--theme-black80) 66%, var(--theme-black90) 66%, var(--theme-black100) 100%); --gradient-framework-hover: linear-gradient(to bottom, var(--theme-black50) 0%, var(--theme-black60) 66%, var(--theme-black70) 66%, var(--theme-black80) 100%); /* MISC */ /* - LEFT MENU DARKER VERSION */ --theme-leftmenu-selected: #c37d8c; /* - BILLING PAGE LABEL DARKER VERSION */ --theme-theme-pinklabel: #856770; /* - LOGOUT BAR GRADIENT (SAME AS THE FRAMEWORK COLOR) */ --gradient-logout-bar: linear-gradient(to bottom, var(--theme-black60) 0%, var(--theme-black70) 50%, var(--theme-black80) 50%, var(--theme-black90) 100%); /* - SPECIFIC PARTS OF THE BLACK PANEL RE-WORK */ --gradient-notipager-panel: linear-gradient(to bottom, var(--theme-black80) 0%, var(--theme-black90) 100%); /* TODO: these can be theme-adjusted! */ /* ---------------------------------------------- THEME GRADIENTS -------------------------------------------------- * - usage: * - (PRIMARY) themeTemplate.css, * - ajaxContent_css.jsp, * - framework.jsp, * - widget_css.jsp, * - sketchit_css.jsp, * - IMPORTANT --> these are the main theme gradients that override the base (default) gradients * --> applied to (almost) all wframes:top, sometimes wframes:bottom, wframes:dividers * --> also applied based on certain theme classes... */ --theme-gradient-gray: linear-gradient(var(--theme-black60), var(--theme-black70) 60%, #3f3f3f 60%, var(--theme-black80)); /* theme1 */ --theme-gradient-blue: linear-gradient(#6b8eb2, #517394 60%, #456686 60%, #304b66); /* theme2 */ --theme-gradient-blue-smooth: linear-gradient(#456686, #304b66); --theme-gradient-pink: linear-gradient(#b8868f, #925761 60%, #8c505a 60%, #7d3e4a); /* theme3 */ --theme-gradient-sand: linear-gradient(#a3876a, #94795e 60%, #896e56 60%, #7a5f4a); /* theme4 */ --theme-gradient-green: linear-gradient(#618b67, #5a8160 60%, #507455 60%, #496b4e); /* theme5 */ --theme-gradient-teal: linear-gradient(#3e9095, #37828a 60%, #2f717d 60%, #286372); /* theme6 */ --theme-gradient-black: linear-gradient(#4a4a4a, #2a2a2a 60%, #1a1a1a 60%, #000000); /* AdaptiveMenu topbar */ --theme-gradient-lightblue: linear-gradient(#3a8a92, #2e7880 60%, #256e76 60%, #1e646c); /* Sketzmo (dark) */ --theme-gradient-lightblue-reverse: linear-gradient(#1e646c, #256e76 60%, #2e7880 60%, #3a8a92); /* Sketzmo divider (dark) */ /* Corresponding (dark) solid colors */ --theme-theme-gray: #3f3f3f; --theme-theme-blue: #456286; --theme-theme-pink: #8c505a; --theme-theme-sand: #896e56; --theme-theme-green: #507455; --theme-theme-teal: #2f717d; --theme-gradient-lightblue-divider: #18494e; /* Adaptive LeftMenu gradients */ --gradient-gray-menu: linear-gradient(to bottom, #373f4e 0%, #313846 52%, #282e3a 52%, #1a1e27 100%); --gradient-pink-menu: linear-gradient(to bottom, #b8868f 0%, #925761 52%, #8c505a 52%, #7d3e4a 100%); /* Button gradients - also assigned based on above-mentioned themes (button_css.jsp)! */ /* Testing button gradients w/ Gemini - (Darker - (Lighter - Darker), which simplifies to 2 * Darker - Lighter) */ /* TODO: these can be theme-adjusted! currently using button colors from modernThemeVariables.css (default)! */ /* Gray */ --theme-gradient-gray-dark: linear-gradient(to bottom, #525252 65%, #1c1c1c 65%); --theme-gradient-gray-hover: linear-gradient(to bottom, #9e9e9e 65%, #6c6c6c 65%); /* Blue */ --theme-gradient-blue-dark: linear-gradient(to bottom, #4e80a8 65%, #225688 65%); --theme-gradient-blue-hover: linear-gradient(to bottom, #82aece 65%, #5a92b8 65%); /* Pink */ --theme-gradient-pink-dark: linear-gradient(to bottom, #9e5468 65%, #7a2a40 65%); --theme-gradient-pink-hover: linear-gradient(to bottom, #c07890 65%, #a44868 65%); /* Sand */ --theme-gradient-sand-dark: linear-gradient(to bottom, #a67a48 65%, #804c20 65%); --theme-gradient-sand-hover: linear-gradient(to bottom, #c09a68 65%, #a06c38 65%); /* Teal */ --theme-gradient-teal-dark: linear-gradient(to bottom, #2e7470 65%, #0c5048 65%); --theme-gradient-teal-hover: linear-gradient(to bottom, #428c7c 65%, #1a6858 65%); /* Mint */ --theme-gradient-mint: linear-gradient(to bottom, #50a060 65%, #227838 65%); --theme-gradient-mint-hover: linear-gradient(to bottom, #72b872 65%, #449844 65%); /* Orange */ --theme-gradient-orange-dark: linear-gradient(to bottom, #ed6c30 65%, #e24400 65%); --theme-gradient-orange-hover: linear-gradient(to bottom, #f3976d 65%, #ec7a48 65%); /* Light Blue */ --theme-gradient-lightblue-dark: linear-gradient(to bottom, #6eb4bb 65%, #50a2ab 65%); --theme-gradient-lightblue-hover: linear-gradient(to bottom, #82bdc4 65%, #64acb5 65%); /* Purple */ --theme-gradient-purple-dark: linear-gradient(to bottom, #482145 65%, #170013 65%); --theme-gradient-purple-hover: linear-gradient(to bottom, #6b3167 65%, #44003e 65%); /* Light Purple */ --theme-gradient-lightpurple-dark: linear-gradient(to bottom, #924ab0 65%, #792a9a 65%); --theme-gradient-lightpurple-hover: linear-gradient(to bottom, #b776d4 65%, #a149ca 65%); /* Light Pink */ --theme-gradient-lightpink-dark: linear-gradient(to bottom, #cabcce 65%, #b9a8be 65%); --theme-gradient-lightpink-hover: var(--theme-gradient-lightpurple-hover); /* Button Solids (DARK) */ --theme-billboard-red-darkmode: #b50061; /* Calculated base */ --theme-billboard-red-hover-darkmode: #c83182; /* Previous default base */ --theme-billboard-purple-darkmode: #703271; /* Calculated base */ --theme-billboard-purple-hover-darkmode: #914b92; /* Previous default base */ --theme-billboard-green-darkmode: #649d39; /* Calculated base */ --theme-billboard-green-hover-darkmode: #85b85e; /* Previous default base */ --theme-billboard-disabled-darkmode: #888888; /* Manually shifted down from #bbbbbb */ /* DARK-COLOR VARIANTS FOR WIDGETS! */ /* TODO: these can be theme-adjusted! */ --theme-blue-widget: #304866; --theme-blue-widget-gradient: linear-gradient(#6c8bb3, #506e93 60%, #456286 60%, #304866); --theme-sand-widget: #7a5f4a; --theme-sand-widget-gradient: linear-gradient(#a3876a, #94795e 60%, #896e56 60%, #7a5f4a); --theme-red-widget: #7d3e4a; --theme-red-widget-gradient: linear-gradient(#b8868f, #925761 60%, #8c505a 60%, #7d3e4a); --theme-red-poll-result: linear-gradient(#7a3545, #3a1520); --theme-green-widget: #496b4e; --theme-green-widget-gradient: linear-gradient(#618b67, #5a8160 60%, #507455 60%, #496b4e); --theme-green-poll-result: linear-gradient(#4a7a28, #1a3208); /* SHOP/INVENTORY STUFF */ /* TODO: these can be theme-adjusted! */ --theme-shop-selected: linear-gradient(to bottom, #b8868f, var(--theme-theme-pink)); --theme-shop-default: linear-gradient(to bottom, #383838, #202020); --theme-mannequins-shop: rgb(0, 110, 128); --theme-mannequins-jd: rgb(130, 30, 80); --theme-mannequins-userdesign: rgb(30, 100, 30); /* Quality SOLID colors in the shop... */ /* TODO: these can be theme-adjusted! */ --quality0-dark: #2c3328; --quality1-dark: #2e383f; --quality2-dark: #302b35; --quality3-dark: #434137; --quality4-dark: #49333b; --quality5-dark: #006e80; --quality5-jd-dark: #821e50; /* FORUM POST (DARK-COLOR) VARIANTS... */ /* TODO: these can be theme-adjusted! */ --theme-post-sma-gostar-focusgroup: #654b3c; --theme-post-admin: #7b3c50; --theme-post-mod: #2f4d6b; --theme-post-ig: #49425d; --theme-post-studentcouncilgirl: #104329; --theme-post-nl-disneyhack: #502b63; --theme-post-socialitestar: #2a3325; --theme-post-vip: #373126; /* ADVERTISEMENT GRADIENT */ --advertisement-gradient-green: linear-gradient(to bottom, #63966b, #003e0a); } body, html { margin: 0; padding: 0; position:absolute; top:0; bottom:0; left:0; right:0; } @font-face { font-family: 'GSM print'; font-weight: normal; font-style: normal; src: url("https://cdn.gosupermodel.com/images/fonts/gsm_print.ttf") format("truetype"); } @font-face { font-family: 'GSM print'; font-weight: bold; font-style: normal; src: url("https://cdn.gosupermodel.com/images/fonts/gsm_print_b.ttf") format("truetype"); } input[type="text"], input[type="password"], input[type=select] { background-color: #efeded; } #framework_all { position: relative; min-height: 100%; } html.adaptive #wag_panel_c {left:0 !important;right:0 !important;} html.adaptive #wag_panel_c #wag_panel {margin:0 auto;box-shadow:5px 2px 10px;border-radius:10px;} html.adaptive #wag_panel_c .underlay {display:none;} .framework_header_status .my_model_link {display:none;} @media (max-width: 768px), (hover: none) and (pointer: coarse) { html.adaptive,html.adaptive body { left:unset; right:unset; bottom:0; width:740px; overflow-x:hidden; overflow-y:scroll; position:absolute; } html.adaptive #news_ {top:661px;left:490px;} html.adaptive #widget_avatar_box{display:none;} html.adaptive div.framework_content{width:730px;} html.adaptive div.framework_top_buttons{right:unset;top:46px;} html.adaptive a.framework_logo2{width:179px;} html.adaptive div.framework_logo2{width:178px;} html.adaptive .framework_header_status .my_model_link {display:inline-block;} html.adaptive div.framework_top{background-position-x:-500px;height:145px;background-size:cover;} html.adaptive div.framework_top_inner {width:730px;height:111px;} html.adaptive .framework_logout > div:nth-of-type(5), html.adaptive .framework_logout > div:nth-of-type(6){margin-left:-180px;} html.adaptive #campaigns_widget_ {margin-left:0;} html.adaptive .theme_activity_log{display:inline-block;margin-left:0;} html.adaptive #forum_latest_posts_{width:232px;} html.adaptive div.framework_return2newbie2 div.speechbubble {left:0;top:2px !important;} html.adaptive #games_right_column {position:absolute;top:0;right:8px;display:block;} html.adaptive .inventory .frontpage .mannequins .shop {margin-left:1px;} html.adaptive .inventory .frontpage .mannequins .last {margin-right:12px} html.adaptive .inventory .frontpage .shortbanners .addbannertag_short{width:230px;} html.adaptive .inventory .yourModel{padding:0;} html.adaptive .framework_content .rightColumn {right:8px;} html.adaptive .leftmenumugshot .mugshotgray {min-width: 616px;} html.adaptive .my_model_link {display:inline-block;} html.adaptive .framework_header { width:725px; background: linear-gradient( to bottom, #525556, #7e7f7f ); } html.adaptive .framework_header .framework_header_search, html.adaptive .framework_header .mutebutton, html.adaptive .framework_header .framework_header_status{display:none;} html.adaptive #avatarSliderBox {left:191px;} html.adaptive .inventory .frontpage .mannequins .mannequin{margin-left:1px} html.adaptive .wframes_3col.creative div.wframes_2col {margin-right:8px;} html.adaptive .wframes_3col.creative {position:relative;} html.adaptive .wframes_3col.creative #secondhand{position:absolute;top:0;right:10px;} html.adaptive .wframes_3col.creative #msgtoall{position:absolute;top:319px;right:10px;} /* === ADAPTIVE SHOP ITEM GRID - Modern Layout === */ html.adaptive .inventory .itemBrowser {margin-left:212px;width:auto;max-width:520px;max-height:calc(100vh - 200px);overflow-y:auto;} html.adaptive .explorer_fix_div .community-right-sidebar{margin-right:10px;} /* Item card: use CSS Grid for layout - [itemWindow | icons] over [description] */ html.adaptive .inventory .itemGrid .itemDisplay { float:none; display:inline-grid; grid-template-columns:1fr 36px; grid-template-rows:auto auto; width:calc(50% - 12px); max-width:245px; margin:6px; font-size:13px; vertical-align:top; height:auto !important; } /* ItemWindow in first column */ html.adaptive .inventory .itemGrid .itemDisplay .itemWindow { grid-column:1; grid-row:1; width:100%; max-width:200px; } html.adaptive .inventory .itemGrid .itemDisplay.man0 {height:auto !important;} /* Icons sidebar: positioned in second column, first row */ html.adaptive .inventory .itemGrid .itemDisplay .description .icons { position:absolute; top:0; right:0; width:36px; display:flex; flex-direction:column; align-items:center; gap:8px; padding:0; transform:scale(1.8); transform-origin:top center; z-index:100; } html.adaptive .inventory .itemGrid .itemDisplay .description .icons > *{float:none;margin:0;} /* Description spans full width below */ html.adaptive .inventory .itemGrid .itemDisplay .description { grid-column:1 / -1; grid-row:2; font-size:18px; line-height:24px; position:static; padding-right:0; } html.adaptive .inventory .itemGrid .itemDisplay .description .priceTag { font-size:18px; font-weight:bold; } /* Space for icons sidebar */ html.adaptive .inventory .itemGrid .itemDisplay::after { content:''; grid-column:2; grid-row:1; width:36px; } /* Color picker - click-based for adaptive mode (replaces hover behavior) */ html.adaptive .inventory .itemGrid .itemDisplay .description .icons .colorPicker{position:relative;} html.adaptive .inventory .itemGrid .itemDisplay .description .icons .colorPicker ul > li{width:15px;height:15px;} html.adaptive .inventory .itemGrid .itemDisplay .description .icons .colorPicker ul > li.white{width:13px;height:13px;} /* Disable hover expansion in adaptive mode */ html.adaptive .inventory .itemGrid .itemDisplay .description .icons .colorPicker:hover ul{ position:relative;top:0;left:0;background-color:transparent;border:none;padding:0;z-index:auto; } html.adaptive .inventory .itemGrid .itemDisplay .description .icons .colorPicker:hover ul > li{display:none;margin:0;} html.adaptive .inventory .itemGrid .itemDisplay .description .icons .colorPicker:hover ul > li.selected{display:inline-block;} html.adaptive .inventory .itemGrid .itemDisplay .description .icons .colorPicker:hover ul > br{display:none;} /* When closed (not is-open), ensure only selected color shows and br elements are hidden */ html.adaptive .inventory .itemGrid .itemDisplay .description .icons .colorPicker:not(.is-open) ul > li:not(.selected){display:none !important;} html.adaptive .inventory .itemGrid .itemDisplay .description .icons .colorPicker:not(.is-open) ul > br{display:none !important;} /* Click-based expansion using .is-open class */ html.adaptive .inventory .itemGrid .itemDisplay .description .icons .colorPicker.is-open ul{ position:absolute;right:0;left:auto;top:0;width:max-content;z-index:9999; background-color:white;border:solid #d7d8da 1px;padding:4px; } html.adaptive .inventory .itemGrid .itemDisplay .description .icons .colorPicker.is-open ul > li{display:inline-block !important;margin:5px;} html.adaptive .inventory .itemGrid .itemDisplay .description .icons .colorPicker.is-open ul > br{display:inline-block !important;} html.adaptive .inventory .itemGrid .itemDisplay .description .icons .colorPicker.is-open ul > li.white{width:13px;height:13px;} html.adaptive .inventory .itemGrid .itemDisplay .description .icons .colorPicker.is-open ul > li.selected{width:13px;height:13px;border:solid #b47482 1px;} html.adaptive .inventory .itemGrid .itemDisplay:has(.colorPicker.is-open){z-index:1000;} /* Grid row handling - JS sets firstInRow for 2 items per row */ html.adaptive .inventory .itemGrid .firstInRow{clear:both;} /* Scale down context navigator buttons to fit all 5 in adaptive width */ html.adaptive .inventory #contextNavigator li {width:138px;font-size:13px;margin-left:8px;} html.adaptive .inventory .communityContextButton .gfxtext.context {width:auto !important;} html.adaptive .inventory .gfxtext.context {font-size:16px;width:auto;} /* Scale down layer navigator buttons to fit 7 in adaptive width (730px - 130px search = 600px) */ html.adaptive .inventory #layerNavigationBox #layerNavigator li {width:85px;font-size:10px;} html.adaptive .inventory .gfxtext.layergroup {width:auto;} /* Allow sub layer navigator buttons to wrap to next line and layerNavigationBox to expand */ html.adaptive .inventory #layerNavigationBox {height:auto;min-height:60px;overflow:visible;} html.adaptive .inventory #layerNavigationBox .searchModelBox {position:absolute;bottom:0;top:auto;} html.adaptive .inventory #layerNavigationBox #layerNavigator {position:relative;left:0;margin-left:130px;padding:6px 0;} html.adaptive .inventory #layerNavigationBox #subLayerNavigator {height:auto;min-height:30px;overflow:hidden;width:600px;position:relative;top:0;padding-left:0;margin-left:130px;} html.adaptive .inventory .settings-icon {position:unset;} /* Friends page: reposition advertisement banner to align with other cards */ html.adaptive div:has(> .friend_banner_357t) {left:auto !important;right:0 !important;} /* Disable newbie styling in adaptive mode */ html.adaptive .newbie {display:none;} html.adaptive div.wframes_4col_r{float:none;width:731px;} html.adaptive div.wframes_4col_r .centerColumn{left:0;} /* Adaptive mode: Auto height to fit status bar and menu */ html.adaptive div.framework_content_pre {height: auto;} /* Hide original framework_header_status in adaptive mode */ html.adaptive .framework_header_status {display: none !important;} /* Show and style the adaptive status bar */ html.adaptive .adaptive-status-bar { display: flex; align-items: center; justify-content: space-between; height: 35px; width: 740px; background: var(--gradient-black-menu); color: #fff; padding: 0 24px 0 16px; box-sizing: border-box; } html.adaptive .adaptive-status-bar a { color: #cdcdcd; text-decoration: none; } html.adaptive .adaptive-status-bar a:hover { color: #fff; } html.adaptive .adaptive-status-bar b { color: #fff; font-weight: bold; } html.adaptive .adaptive-status-info { display: flex; align-items: center; gap: 8px; } html.adaptive .adaptive-status-info .separator { color: #cdcdcd; } html.adaptive .adaptive-status-buttons { display: flex; align-items: center; gap: 10px; } html.adaptive .adaptive-search-btn div { width: 17px; height: 17px; background: url("https://cdn.gosupermodel.com/images/buttons/search_2.png") no-repeat 0 0; } html.adaptive .adaptive-search-btn:hover div { background-position: -17px 0; } html.adaptive .adaptive-mute-btn { display: block; width: 17px; height: 17px; background-image: url("https://cdn.gosupermodel.com/images/buttons/mute.png"); } html.adaptive .adaptive-mute-btn:hover { background-position: -17px 0; } html.adaptive .adaptive-mute-btn.muted { background-position: -34px 0; } html.adaptive .adaptive-mute-btn.muted:hover { background-position: -51px 0; } /* =========================================== ADAPTIVE MODE FOOTER - Compact layout =========================================== */ html.adaptive div#framework_footer div#footer-wrapper{padding:4px 0 0 4px;} html.adaptive div#framework_footer #footer-links-menu > div{width: 200px;} html.adaptive #footer-wrapper nav#footer-links-menu div:nth-child(3), html.adaptive #footer-wrapper nav#footer-links-menu div:nth-child(4){width:100px;} html.adaptive div#framework_footer #footer-links-menu { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 0 0; width: 100%; } html.adaptive div#framework_footer #footer-links-menu #social-media { width:100%; text-align: center; padding-top: 8px; border-top: 1px solid rgba(255,255,255,0.2); } html.adaptive div#framework_footer #footer-links-menu #social-media h2 { display: none; } html.adaptive div#framework_footer #footer-links-menu #social-media ul { display: flex; justify-content: center; gap: 16px; } html.adaptive div#framework_footer #footer-links-menu #social-media ul li svg { height: 24px; min-height: 24px; } html.adaptive div#framework_footer #footer-company-information { margin-top: 12px; padding: 8px; } } @media (max-width: 768px) and (orientation: portrait), (hover: none) and (pointer: coarse) and (orientation: portrait){ /* Container for game content needs relative positioning */ /*better game layouts:*/ html.adaptive #wardrobechallenge{ position: absolute; width: 637px; height: 442px; overflow: hidden; left: 42px; } html.adaptive #wardrobechallenge #canvas{ position: absolute; left: -343px; } html.adaptive .framework_content { position: relative !important; } /* Overlay that prompts user to rotate device - contained within framework_content */ html.adaptive .game-landscape-overlay { display: flex !important; position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; background: rgba(0, 0, 0, 0.9) !important; z-index: 9999 !important; align-items: center !important; justify-content: center !important; flex-direction: column !important; text-align: center !important; color: white !important; font-family: Arial, sans-serif !important; padding: 20px !important; box-sizing: border-box !important; } html.adaptive .game-landscape-overlay-icon { font-size: 80px !important; margin-bottom: 20px !important; animation: rotate-hint 2s ease-in-out infinite !important; } html.adaptive .game-landscape-overlay-text { font-size: 18px !important; font-weight: bold !important; margin-bottom: 10px !important; } html.adaptive .game-landscape-overlay-subtext { font-size: 14px !important; opacity: 0.8 !important; } @keyframes rotate-hint { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(90deg); } } } /* Hide overlay in landscape mode */ @media (max-width: 768px) and (orientation: landscape), (hover: none) and (pointer: coarse) and (orientation: landscape) { html.adaptive .game-landscape-overlay { display: none !important; } /*better game layouts:*/ html.adaptive #wardrobechallenge{ position: absolute; width: 637px; height: 442px; overflow: hidden; left: 42px; } html.adaptive #wardrobechallenge #canvas{ position: absolute; left: -343px; top:-20px; } } /* Adaptive status bar - hidden by default */ .adaptive-status-bar {display: none;} div.framework_top{ background-image:url('https://cdn.gosupermodel.com/images/topbar/topbar.jpg'); background-position: center; background-repeat: repeat-x; } .winter div.framework_top{ background-image:url('https://cdn.gosupermodel.com/images/themes/other/winter/topbar.jpg?v2'); } .winter.valentines .framework_top{ background-image:url('https://cdn.gosupermodel.com/images/themes/other/winter/topbar_valentines2026.jpg'); } .spt div.framework_top{ background-image:url('https://cdn.gosupermodel.com/images/campaigns/spt_2025/spt_topbar.jpg'); } div.framework_top.newbie { background-image:url("https://cdn.gosupermodel.com/images/topbar/topbar_newbie.jpg"); } .winter div.framework_top.newbie{ background-image:url('https://cdn.gosupermodel.com/images/themes/other/winter/topbar_newbie.jpg?v2'); } .winter.valentines .framework_top.newbie{ background-image:url('https://cdn.gosupermodel.com/images/themes/other/winter/topbar_valentines2026_newbie.jpg'); } .spt div.framework_top.newbie{ background-image:url('https://cdn.gosupermodel.com/images/campaigns/spt_2025/spt_topbar_newbie.jpg'); } .framework_all div.easter.framework_top{ background-image:url("https://cdn.gosupermodel.com/images/topbar/easter_topbar.jpg"); background-color: #7F00FF; } div.framework_top_inner { width: 980px; height: 131px; margin: 0 auto; position: relative; } div.framework_logout { color: #b4b4b4; height: 22px; } .framework_logout div { float: right; height: 18px; } div.framework_logout_links { padding-top: 4px; padding-right: 3px; background: var(--gradient-logout-bar); border-radius: 0 0 8px 0; } div.framework_logout_corner1 { height: 22px; width: 25px; background-image: url(/images/buttons/lock.png), var(--gradient-logout-bar); background-size: 40px; background-repeat: no-repeat; background-position: 10px 4px, 0 0; border-radius: 0 0 0 8px; } div.framework_logout_corner2 { height: 22px; width: 28px; margin-left: 11px; background-image: url(/images/buttons/question_mark.png), var(--gradient-logout-bar); background-size: 52px; background-repeat: no-repeat; background-position: 10px 4px, 0 0; border-radius: 0 0 0 8px; } .modboxtab.left, .modboxtab.right { z-index:100; background:var(--gradient-logout-bar); position:absolute; top:0; height:22px; } .modboxtab.left { width:25px; left:360px; border-bottom-left-radius: 10px; } .modboxtab.right { left: 383px; border-bottom-right-radius: 10px; } .framework_logout a { color: white; text-decoration: none; margin: 5px; } .framework_logout a:hover { color: #cccccc; } .framework_top_buttons { height: 65px; position:absolute; top:66px; right:0; } .famework_beta_button a { float: right; width: 139px; height: 28px; text-align: center; color: #545454; } a.button_beta { background: url("https://cdn.gosupermodel.com/images/buttons/button_beta_server.png") no-repeat; top:7px; position:relative; font-weight:bold; } a.button_beta:hover { background: url("https://cdn.gosupermodel.com/images/buttons/button_over_beta_server.png") no-repeat; } .framework_header_background { width: 100%; } .framework_header_background, .framework_minimenu2 { background: var(--gradient-framework-header); } .framework_top_buttons a { float: right; width: 92px; height: 66px; background-image: url(/images/topbar/buttons_en_new.png), var(--gradient-framework-normal) !important; background-repeat: no-repeat, repeat; box-shadow: inset -1px 0 1px rgba(0, 0, 0, 0.3), inset 1px 0 1px rgba(255, 255, 255, 0.5) !important; color: #545454; /*(default)*/ text-shadow: 1px 1px 3px #fff; text-align: center; text-decoration: none; } .framework_top_buttons a:hover { background-image: url(/images/topbar/buttons_en_new.png), var(--gradient-framework-hover) !important; } .framework_top_buttons a[class*="selected"] { background-image: url(/images/topbar/buttons_en_new.png), var(--gradient-framework-selected) !important; color: white !important; /*(default)*/ text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.6) !important; } .framework_top_buttons a .menu_text { position: relative; top: 4px; } .framework_top_buttons .button_models, .framework_top_buttons .button_models_selected { border-top-right-radius: 8px; box-shadow: inset 1px 0 1px rgba(255, 255, 255, 0.5) !important; } .framework_top_buttons .button_frontpage, .framework_top_buttons .button_frontpage_selected { border-top-left-radius: 8px; box-shadow: inset -1px 0 1px rgba(0, 0, 0, 0.3) !important;; } a.button_frontpage, a.button_frontpage_selected { background-position: 0 0; width: 91px; } a.button_shopping, a.button_shopping_selected { background-position: -91px 0; position:relative; } a.button_games, a.button_games_selected { background-position: -183px 0; position:relative; } a.button_creative, a.button_creative_selected { background-position: -275px 0; position:relative; } a.button_community, a.button_community_selected { background-position: -367px 0; } a.button_models, a.button_models_selected { background-position: -459px 0; width: 91px; } a.button_frontpage:hover, a.button_frontpage_selected { background-position: 0 -66px, 0 0; } a.button_shopping:hover, a.button_shopping_selected { background-position: -91px -66px, 0 0; } a.button_games:hover, a.button_games_selected { background-position: -183px -66px, 0 0; } a.button_creative:hover, a.button_creative_selected { background-position: -275px -66px, 0 0; } a.button_community:hover, a.button_community_selected { background-position: -367px -66px, 0 0; } a.button_models:hover, a.button_models_selected{ background-position: -459px -66px, 0 0; } a.framework_logo1 { float: left; height: 131px; margin-top: -22px; width: 220px; } .framework_logo2 { float: left; height: 131px; margin-top: -66px; width: 220px; background-image: none; cursor: pointer; } div.framework_server_warning { position: absolute; background: url("https://cdn.gosupermodel.com/images/topbar/server_warning.png#png8"); width: 404px; height: 131px; color: #0c3c7e; left: 13px; top: 7px; z-index: 100; } div.framework_server_warning div { margin: 17px 24px 0 24px; font-size: 12px; overflow: hidden; height: 108px; } div.framework_server_warning h1 { font-size: 18px; margin-bottom: 6px; } #framework_server_warning_countdown_id { color: #c83282; } .framework_signup { position: relative; height:65px; } a.framework_signup_a { position:absolute; left:417px; top:-21px; width:122px; height:80px; background: 0 0; /*outline: blue dotted 1px;*/ } div.framework_signup_b { position:absolute; left:875px; top:37px; width:100px; /*outline: red dotted 1px;*/ } div.framework_header { width: 980px; height: 35px; margin: 0 auto; } div.framework_minimenu { height: 35px; float: left; color: white; } .framework_minimenu a { height: 35px; color: white; float: left; text-align: left; line-height: 16px; text-decoration: none; cursor: pointer; } .framework_minimenu div { height: 33px; float: left; padding-top: 2px; background: url("https://cdn.gosupermodel.com/images/topbar/minimenu8.png") -94px top; } div.framework_minimenu2 { height: 35px; color: white; position: absolute; width: 980px; } .framework_minimenu2 a { height: 35px; color: white; float: left; text-align: left; line-height: 16px; text-decoration: none; cursor: pointer; } .framework_minimenu2 div { height: 33px; float: left; padding-top: 2px; background: url("https://cdn.gosupermodel.com/images/topbar/minimenu8.png") -94px top; } div.framework_a1 { background-position: left top; width: 39px; } a:hover div.framework_a1 { background-position: left -35px; } div.framework_a2 { background-position: -36px top; padding-right: 6px; } a:hover div.framework_a2 { background-position: -36px -35px; color: #d3d3d3; } div.framework_b1 { background-position: -310px top; width: 36px; } a:hover div.framework_b1 { background-position: -310px -35px; } div.framework_b2 { padding-right: 6px; line-height:32px; } a:hover div.framework_b2 { background-position: -94px -35px; color: #d3d3d3; } div.framework_c1 { background-position: -346px top; width: 36px; } a:hover div.framework_c1 { background-position: -346px -35px; } div.framework_c2 { padding-right: 6px; line-height:32px; } a:hover div.framework_c2 { background-position: -94px -35px; color: #d3d3d3; } div.framework_d1 { background-position: -384px top; width: 34px; } div.framework_d1_start{ background:url('/images/topbar/minimenu8.png') 0 0 no-repeat; width:9px; margin-left:5px; } a:hover div.framework_d1_start{ background-position: 0 -35px; } div.framework_d1_bonus { background-position:-420px top; width: 34px; } a:hover div.framework_d1 { background-position:-384px -35px; } a:hover div.framework_d1_bonus { background-position: -420px -35px; } div.framework_d2 { font-weight: bold; line-height:32px; padding-right: 3px; } div.framework_d2.shop { text-align:right; padding-right: 3px; font-weight: bold; line-height:16px; } a:hover div.framework_d2.shop { background-position: -94px -35px; color: #d3d3d3; } div.framework_d2.bonus { font-weight: bold; color: #ffea3d; line-height:32px; padding-right: 3px; } div.framework_d2.shop.bonus { text-align:right; font-weight: bold; color: #ffea3d; padding-right: 3px; line-height:16px; } a:hover div.framework_d2 { background-position: -94px -35px; color: #d3d3d3; } a:hover div.framework_d2.bonus { background-position: -94px -35px; color: #b2a32b; } a:hover div.framework_d2.shop.bonus { background-position: -94px -35px; color: #b2a32b; } div.framework_d3_end { /* End piece without notifications */ background-position: -634px top; width: 9px; } a:hover div.framework_d3_end { background-position: -634px -35px; } div.framework_d3_space { background-position: -94px top; width: 9px; } a:hover div.framework_d3_space { background-position: -94px -35px; } /* notification stuff*/ div.framework_h1{ background-position: -561px top; width: 36px; } div.framework_h2 { line-height:32px; } /* pearls */ .pearls { position: relative; display: flex; align-items: center; } div.bg_circle { position: absolute; width: 25px; height: 25px; border-radius: 50%; top: 6px; left: 8px; z-index: 1; background: url("/images/currency/pearl_minimenu.png") no-repeat center; background-size: 16px auto; overflow: hidden; } div.framework_pe1 { background: linear-gradient(rgba(33, 230, 207, 0.76), rgba(32, 165, 153, 0.68)), url('/images/topbar/minimenu8.png') -526px top; background-blend-mode: hard-light; width: 36px; z-index: 0; } div.framework_pe2 { background: linear-gradient(rgba(33, 230, 207, 0.76), rgba(32, 165, 153, 0.68)), url('/images/topbar/minimenu8.png') -94px top; background-blend-mode: hard-light; line-height: 32px; padding-right: 3px; } a:hover div.framework_pe1{ background-position: -526px -35px; } a:hover div.framework_pe2 { background-position: -94px -35px; } /*NOTIFICATIONS*/ div.framework_e1 { background-position: -599px top; width: 36px; } a:hover div.framework_e1 { background-position: -599px -35px; } div.framework_e2 { padding-right: 6px; line-height:32px; } a:hover div.framework_e2 { background-position: -94px -35px; color: #d3d3d3; } div.framework_e3 { /* End piece for notification bar */ background-position: -634px top; width: 9px; } a:hover div.framework_e3 { background-position: -634px -35px; } /*NOTIFICATIONS*/ /* DIAMONDS AND PINBALL ICONS */ div.framework_f1 { background-position: -454px top; width: 36px; } div.framework_f1_bonus { background-position: -489px top; width: 36px; } a:hover div.framework_f1{ background-position: -454px -35px; } a:hover div.framework_f1_bonus { background-position: -489px -35px; } b.diamonds { margin: auto auto auto auto; } div.framework_f2 { line-height:32px; font-weight: bold; padding-right: 3px; } div.framework_f2_bonus { line-height:32px; font-weight: bold; color: #ffea3d; padding-right: 3px; } a:hover div.framework_f2 { background-position: -94px -35px; color: #d3d3d3; } a:hover div.framework_f2_bonus { background-position: -94px -35px; color: #b2a32b; } div.framework_g1 { background-position: -526px top; width: 36px; } div.framework_g1_bonus { background-position: -561px top; width: 36px; } a:hover div.framework_g1{ background-position-y: -35px; } #gift-icon { background-position: -202px top; } a:hover #gift-icon { background-position: -202px -35px; } #hourglass-icon{ background-position: -171px top; } a:hover #hourglass-icon { background-position: -171px -35px; } a:hover div.framework_g1_bonus { background-position: -561px -35px; } div.framework_g2 { line-height:32px; font-weight: bold; padding-right: 3px; } div.framework_g2_bonus { line-height:32px; font-weight: bold; color: #ffea3d; padding-right: 3px; } a:hover div.framework_g2 { background-position: -94px -35px; color: #d3d3d3; } a:hover div.framework_g2_bonus { background-position: -94px -35px; color: #b2a32b; } /* DIAMONDS AND PINBALL ICONS */ div.framework_i1{ padding-left:3px; background-position: -238px top; width:33px; } a:hover div.framework_i1 { background-position: -238px -35px; color: #d3d3d3; } div.framework_i1_highlight{ padding-left:3px; background-position: -274px top; width:33px; color:#efe567; } a:hover div.framework_i1_highlight { background-position: -274px -35px; color: #b2a32b; } div.framework_i2{ position: relative; background-position: -50px top; padding-left:3px; width:114px; } a:hover div.framework_i2 { background-position: -50px -35px; color: #d3d3d3; } div.framework_i2_highlight{ position: relative; background-position: -50px top; padding-left:3px; width:110px; color:#efe567; } a:hover div.framework_i2_highlight { background-position: -50px -35px; color: #b2a32b; } /* Topbar fame bar start*/ #fame_bar{ position:absolute; background:none; width:115px; border:0; padding:0; height:10px; top:16px; left:5px; } #fame_bar_end{ background-color:#898888; height:8px; width:2px; border:0; padding:0 } #fame_bar_middle{ background-color:#898888; width:71px; height:2px; margin-top:3px; border:0; padding:0 } #fame_bar_container{ background:none; position: relative; margin-top:5px; height:7px; border:0; padding:0; } #famebar_bar{ position:absolute; background:#ffffff; top:2px; left:0; height:4px; margin-left:2px; padding:0; } div.famebar_bar_color{ background:#efe567 !important; } a:hover div.famebar_bar_color{ background:#b2a32b !important; } #fame_bar_current_level{ background:none; margin-right:3px; border:0; padding:0; } #fame_bar_next_level{ background:none; margin-left:3px; border:0; padding:0; } #current_fame{ background:none; padding:0; margin-left:0; text-align:center; width:100px; } /* Topbar fame bar end*/ div.framework_header_title { color: white; font-size: 22px; text-align: center; line-height: 30px; } div.framework_header_status { color: #bbb; float: right; line-height: 35px; position:relative; z-index:1; } .framework_header_status a { color: #cdcdcd; text-decoration: none; } .framework_header_status a:hover { color: white; } .framework_header_status b { font-weight: bold; color: white; } a.celeb_chat_link { font-weight: bold; color: #f69a6f; } a.celeb_chat_link:hover { color: #ffc9b1; } a.framework_header_search { float: right; background-position: 0 0; position:relative; z-index:1; } a.framework_header_search div { width: 17px; height: 17px; background: url("https://cdn.gosupermodel.com/images/buttons/search_2.png") no-repeat 0 0; margin-top: 9px; margin-left: 5px; border-radius: 3px; } a.framework_header_search:hover div { background-position: -17px 0; } a.framework_header_mutebutton { display:block; float: right; margin-left:5px; margin-top:9px; position:relative; z-index:1; } .mutebutton { display:block; width: 17px; height: 17px; background-image:url("https://cdn.gosupermodel.com/images/buttons/mute.png"); border-radius: 3px; } .mutebutton:hover { background-position:-17px 0; } .mutebutton.muted { background-position:-34px 0; } .mutebutton.muted:hover { background-position:-51px 0; } div.framework_content_pre { width: 980px; margin: 0 auto; height: 16px; } div.tox-sidebar-wrap div.tox-edit-area iframe{ background-color: #efeded; outline: 1px solid #c6c6c6; font-family: verdana, sans-serif; } div.framework_newbie_task_panel { position:relative; width: 958px; margin-top:16px; margin-left:auto; margin-right:auto; padding-left:10px; padding-right:10px; } div.framework_newbie_task_panel .closeButton { position:absolute; top:10px; right:8px; border:0; width:17px; height:17px; background:transparent url("https://cdn.gosupermodel.com/images/buttons/close.png") no-repeat 0 0; cursor:pointer; } div.framework_newbie_task_panel .closeButton:hover { background-position:-17px 0; } div.framework_newbie_task_panel .closeButton > * { position:relative; left:-9999px; } div.framework_newbie_task_panel_content { background-image:url("https://cdn.gosupermodel.com/images/newbie/taskpanel/panel_bg.png"); color:#fce0a1; position:relative; height:125px; } div.framework_newbie_task_panel_left { position:absolute; left:0; top:0; width:10px; background-image:url("https://cdn.gosupermodel.com/images/newbie/taskpanel/panel_bg_left.png"); height:125px; } div.framework_newbie_task_panel_right { position:absolute; right:0; top:0; width:10px; background-image:url("https://cdn.gosupermodel.com/images/newbie/taskpanel/panel_bg_right.png"); height:125px; } div.framework_newbie_task_panel_content .steps { position:absolute; top:12px; left:18px; width:595px; height:101px; } div.framework_newbie_task_panel_content.rows3 .steps table { margin-top:-8px; } div.framework_newbie_task_panel_content.rows3 .steps { top:15px; } div.framework_newbie_task_panel_content .steps .step { position:relative; width:50%; font-family:verdana,sans-serif; font-size:12px; color:#fce0a1; line-height:12px; } div.framework_newbie_task_panel_content .steps .step .number { display:block; position:relative; width:37px; height:37px; margin-top:5px; margin-left:5px; background:url("https://cdn.gosupermodel.com/images/newbie/taskpanel/numbers_orange.png") no-repeat; } div.framework_newbie_task_panel_content .steps .step.complete .number { background-image:url("https://cdn.gosupermodel.com/images/newbie/taskpanel/numbers_blue.png"); } div.framework_newbie_task_panel_content .steps .step.n1 .number { background-position:0 0; } div.framework_newbie_task_panel_content .steps .step.n2 .number { background-position:-37px 0; } div.framework_newbie_task_panel_content .steps .step.n3 .number { background-position:-74px 0; } div.framework_newbie_task_panel_content .steps .step.n4 .number { background-position:-111px 0; } div.framework_newbie_task_panel_content .steps .step.n5 .number { background-position:-148px 0; } div.framework_newbie_task_panel_content .steps .step.n6 .number { background-position:-185px 0; } div.framework_newbie_task_panel_content .steps .step.current { font-weight:bold; color:#f6bc3e; } div.framework_newbie_task_panel_content .steps .step div.strikeThrough { position:absolute; top:0; left:0; } div.framework_newbie_task_panel_content .steps .step div.strikeThrough { display:none; } div.framework_newbie_task_panel_content .steps .step.complete div.strikeThrough { display:block; } div.framework_newbie_task_panel_content .steps .step.complete div.strikeThrough > span { background:url("https://cdn.gosupermodel.com/images/newbie/taskpanel/strike-through.png") left 2px; } div.framework_newbie_task_panel_content .steps .strikeThrough > span span { visibility:hidden; } div.framework_newbie_task_panel_content .reward { position:absolute; left:827px; top:64px; } div.framework_newbie_task_panel_content .reward .rewardGfx { position:absolute; top:-60px; } div.framework_newbie_task_panel_content .reward .rewardText { position:absolute; left:-90px; top:23px; width:180px; text-align:center; font-family:verdana,sans-serif; font-size:14px; font-weight:bold; text-transform:uppercase; color:white; } div.framework_newbie_task_panel_content .reward.birthday .rewardGfx { left:-121px; top:-64px; width:242px; height:126px; background:url("https://cdn.gosupermodel.com/images/newbie/taskpanel/reward-birthday.png") no-repeat left top; } div.framework_newbie_task_panel_content .reward.birthday .rewardText { top:20px; } div.framework_newbie_task_panel_content .reward.fame .rewardGfx { left:-124px; width:249px; height:122px; background:url("https://cdn.gosupermodel.com/images/newbie/taskpanel/reward-fame.png") no-repeat left top; } div.framework_newbie_task_panel_content .reward.zipperVoucher .rewardGfx { left:-120px; top:-64px; width:240px; height:128px; background:url("https://cdn.gosupermodel.com/images/newbie/taskpanel/reward-voucher-zipper.png") no-repeat left top; } div.framework_newbie_task_panel_content .reward.zipperVoucher .rewardText { left:-91px; top:8px; width:62px; text-align:right; } div.framework_newbie_task_panel_content .reward.shopVoucher .rewardGfx { left:-71px; top:-61px; width:240px; height:128px; background:url("https://cdn.gosupermodel.com/images/newbie/taskpanel/NewShop_voucher_newbie_en.png") no-repeat left top; } div.framework_newbie_task_panel_content .reward.shopVoucher .rewardText { left:-91px; top:8px; width:62px; text-align:right; } div.framework_content { position: relative; width: 980px; margin: 0 auto; height: auto; min-height: 676px; cursor:default; } .framework_content a { color: transparent; } .framework_content .kiosk_middle a { color: white; } .framework_content p { margin-top: 1em; margin-bottom: 1em; } a.framework_minimenu_dropcontainer { position: relative; } div.framework_prefooter { height: 40px; clear: both; } div#framework_footer{ background: #4a4a4a linear-gradient(#2a2a2a, #0f0f0f, #0a0a0a); bottom: 0; color: #fff; left: 0; line-height: 1.5; margin: 0 auto; padding: 0; position: relative; width: 100%; z-index: 1; overflow: hidden; } div#framework_footer div#footer-wrapper{ align-items: center; display: flex; flex-direction: row; flex-wrap: wrap; gap: 1rem; justify-content: space-between; margin: 0 auto; padding: 1rem 1rem 0 1rem; width: calc(100% - 2rem); max-width: 1180px; } div#framework_footer #footer-company-information{ background: #0a0a0a; margin: 1rem auto 0 auto; padding: 0.25rem; position: relative; text-align: center; } div#framework_footer #footer-company-information a{ display: inline-block; } div#framework_footer #footer-company-information img#footer-gsm-logotype{ height: auto; margin-right: 3px; margin-bottom: -4px; max-width: 16px; } div#framework_footer #footer-company-information ul{ list-style-type: none; margin: 0; margin-top: 0.75rem; padding: 0; } div#framework_footer #footer-links-menu ul.SoMe li{ display: inline-block; margin-right: 5px; } div#framework_footer #footer-links-menu ul.SoMe div{ height: 34px; display: block; width: 34px; background-image:url('https://cdn.gosupermodel.com/images/loginpage/social_media_channels_2023.png'); background-repeat:no-repeat; cursor:pointer; } div#framework_footer #footer-links-menu #social-media ul{ list-style-type: none; margin: 3px 0 0; padding: 0; } div#framework_footer #footer-links-menu #social-media ul li{ display: inline-block; margin-right: 5px; } div#framework_footer #footer-links-menu #social-media ul li svg{ fill: #fff; height: 1rem; min-height: 24px; } div#framework_footer .SoMe .insta { background-position: 0 -101px; } div#framework_footer .SoMe .tiktok { background-position: 0 -34px; } div#framework_footer .SoMe .momio { background-position: 0 0; } div#framework_footer #footer-company-information p{ display: inline; margin: 0; line-height: 17px; } div#framework_footer #footer-company-information p sup{ font-size: 0.5rem; vertical-align: top; } div#framework_footer a{ color: #fff; font-size: 1.1rem; line-height: 2; text-decoration-color: inherit; transition: all ease 0.15s; } div#framework_footer #footer-links-menu a:hover{ text-decoration-color: transparent; } div#framework_footer h2{ font-size: 1.3rem; font-weight: 600; margin: 0; text-transform: uppercase; } div#framework_footer #footer-links-menu ul li a{ display: block; } div#framework_footer #footer-links-menu{ display: flex; flex-wrap: wrap; gap: 2rem; margin: 0 auto; } div#framework_footer #footer-links-menu > div{min-width: 120px;} div#framework_footer #footer-links-menu ul{ list-style-type: none; margin: 0; padding: 0; } @media only screen and (max-width: 1135px){ div#framework_footer div#footer-wrapper{ justify-content: center; } } @media only screen and (max-width: 915px){ div#framework_footer #footer-links-menu{ display: grid; grid-gap: 2rem; grid-template-columns: 1fr 1fr; } div#framework_footer #footer-links-menu #social-media{ grid-column: 1 / -1; text-align: center; } div#framework_footer #footer-company-information{ margin-top: 0.5rem; } } @media only screen and (max-width: 500px){ div#framework_footer #footer-links-menu{ grid-template-columns: 1fr; text-align: center; } } #modeldialog { position: absolute; top: 0; left: 0; visibility: hidden; color: white; width: 508px; height: 332px; z-index: 2003; text-align: left; } .dialog_0 { background: url("https://cdn.gosupermodel.com/images/topbar/modeldialog_bigger.png"); } .dialog_1 { background: url( "https://cdn.gosupermodel.com/images/topbar/modeldialog_grey.png" ); } .dialog_2 { background: url( "https://cdn.gosupermodel.com/images/topbar/modeldialog_blue.png" ); } .dialog_3 { background: url( "https://cdn.gosupermodel.com/images/topbar/modeldialog_red.png" ); } .dialog_4 { background: url( "https://cdn.gosupermodel.com/images/topbar/modeldialog_sand.png" ); } .dialog_9 { background: url( "https://cdn.gosupermodel.com/images/topbar/modeldialog_pink.png" ); } .dialog_10 { background: url( "https://cdn.gosupermodel.com/images/topbar/modeldialog_green.png" ); } .dialog_11 { background: url( "https://cdn.gosupermodel.com/images/topbar/modeldialog_turquoise.png" ); } img.modeldialog_img { position: absolute; left: 348px; top: 13px; width: 140px; height: 300px; } div.modeldialog_topbox { position: absolute; left: 20px; top: 20px; width: 305px; z-index: 2004; } div.modeldialog_topbox .topboxSpan { margin-top: 6px; font-size: 10.5px; width: 294px; white-space: initial; display: -webkit-box; max-width: 400px; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; } div.modeldialog_topbox a { color: white; text-decoration: none; } div.modeldialog_topbox a:hover { color: #ddd; } div.modeldialog_deleted_text { position: absolute; left: 285px; top: 294px; width: 157px; text-align: center; } div.modeldialog_buttons { position: absolute; left: 22px; top: 102px; width: 162px; } div.modeldialog_buttons .button { width: 100%; text-align: left; font-weight: normal; font-size: 10px; letter-spacing: -1px; padding-right: 1px; } div.modeldialog_buttons .button span { padding: 0 0 0 4px; } div.modeldialog_buttons .button span img { padding-right: 1px; } div.modeldialog_buttons div.md_gab { clear: both; height: 8px; line-height: 1px; font-size: 1px; } div.modeldialog_icons { position: absolute; left: 202px; top: 102px; width: 118px; max-height:100px; min-height:100px; height:100px; } div.modeldialog_icons span a { color: white; text-decoration: none; } div.modeldialog_icons span img { vertical-align: bottom; width: 16px; height: 16px; } .modeldialog_icons_div{ margin-bottom:4px; } div.modeldialog_forsale{ position: absolute; left: 336px; top: 12px; } div.modeldialog_inspect_but{ position: absolute; right: 158px; bottom: 20px; width: 14px; height: 14px; cursor: pointer; background: url(/images/buttons/inspect.png); z-index: 2006; } div#modeldialog_inspect_box{ overflow: auto; display: none; position: absolute; right: 179px; bottom: 6px; width: 310px; height: 307px; padding: 3px; border-radius: 12px; background: rgba(33, 34, 33, 0.69) url(/images/loadinganim/loader_small_1.gif) center center no-repeat; border: 1px solid #aaaaaa; z-index: 2005; } div#modeldialog_inspect_box .itembox { position: relative; display:inline-table; margin: 1px; } div#modeldialog_inspect_box .itembox img{ margin:0; } div#modeldialog_inspect_box .itembox .wish { position: absolute; bottom: 0; left: 0; width:20px; height:15px; cursor:pointer; margin: 0 0 0 3px; background-image: url("https://cdn.gosupermodel.com/images/shopping/inventory/icons.png"); background-position: -34px 0; } div#modeldialog_inspect_box .itembox .wish.wishable { background-position: -54px 0; } div.modeldialog_magazine { position: absolute; left: 224px; top: 206px; width: 127px; } div.modeldialog_magazine span{ position:absolute; top:1px; left:4px; } div.modeldialog_magazine img{ position:absolute; top:18px; left:4px; width:65px; height:92px; } iframe.modeldialog_shimmer { visibility: hidden; z-index: 999; position: absolute; top: 0; left: 0; filter: alpha( opacity = 1 ); } .modelname_title { font-size: 14px; font-weight: bold; } .modelname_title a:hover { text-decoration: none; } .modelname_title img { vertical-align: bottom; width: 16px; height: 16px; } a[account]:hover { color: #888; } .tradingcard_theme .theme5, .theme1 .namebar a[account]:hover { color: #F0F0F0;} .theme2 .namebar a[account]:hover { color: #F0F6FD;} .theme3 .namebar a[account]:hover { color: #EBDCDC;} .theme4 .namebar a[account]:hover { color: #F9EADD;} .theme6 .namebar a[account]:hover { color: #F0F0F0;} .theme7 .namebar a[account]:hover { color: #b9b9b9;} img.micon { width: 12px; height: 12px; vertical-align: bottom; margin-left: 3px; } img.friendico { vertical-align: middle; } #msgbox { background: none; border: none; } #msgbox_content { color: white; padding: 20px 20px 0 20px; text-align: left; } #msgbox_content a { color: white; } #msgbox_content h2 { font-size: 16px; font-weight: 800; color: white; padding-bottom: 5px; } #msgbox .msgbox_top { background-repeat: no-repeat; background-position: top; border: none; } #msgbox .msgbox_bottom { background-position: bottom; height: 48px; padding-top: 10px; padding-right: 30px; padding-left: 30px; } #msgbox .msgbox_msg_top, #msgbox .msgbox_msg_bottom { background-image: url( 'https://cdn.gosupermodel.com/images/topbar/msgbox_blue.png' ); } #msgbox .msgbox_error_top, #msgbox .msgbox_error_bottom { background-image: url( 'https://cdn.gosupermodel.com/images/topbar/msgbox_red.png' ); } #msgbox .msgbox_confirm_top, #msgbox .msgbox_confirm_bottom { background-image: url( 'https://cdn.gosupermodel.com/images/topbar/msgbox_sand.png' ); } #msgbox .msgbox_purpletop, #msgbox .msgbox_purple_bottom { background-image: url( 'https://cdn.gosupermodel.com/images/topbar/msgbox_bg3.png' ); } #msgbox.yui-panel .hd { display: none; } #action_panel { background: none; border: none; box-shadow: 1px 2px 25px #00000094; border-radius: 9px; } #action_panel_content { color: #545454; text-align:left; } #action_panel_bottom { background: #ffffff; border: none; height: 45px; padding-top: 10px; padding-right: 30px; padding-left: 30px; } #action_panel_contentwidgetContainer { } .action_panel_nopadding{ padding-right:0; padding-left: 12px; background: white; } .action_panel_padding { padding: 10px 33px 0 33px; background: #ffffff; } #yui-panel-container { position: absolute; z-index: 101; } #action_panel.yui-panel .hd { display: none; } #action_panel.yui-panel .ft { display: none; } #action_panel.yui-panel .bd { } #action_panel_contentwidgetTitleContent { padding: 6px 12px; height: 23px; color: white; font: 16px verdana, sans-serif; line-height:21px; clear: both; background: var(--theme-gradient-pink); border-radius: 9px 9px 0 0; } #action_panel_contentwidgetTitleContent .button { } #loading_panel.yui-panel .hd { display: none; } #loading_panel.yui-panel .ft { display: none; } #loading_panel.yui-panel .bd { background:transparent; } #loading_panel .yui-panel{ background:transparent; border:0; } #notification_panel{ left:388px; position:relative; top:0; } #notification_panel.yui-panel{ background:transparent; border:0; font: 11px verdana, sans-serif; } .buttonclear { clear: both; float: none; } div.framework_topless_header { color: white; font-size: 24px; text-align: center; line-height: 30px; width: 980px; margin: 0 auto; } div.framework_topless_header .button { font-size: 11px; margin-top: 6px; } .clear { clear: both; } .no_wrap { white-space: nowrap; } #dhtmltooltip { position: absolute; left: -300px; padding: 2px; display: none; z-index: 2003; } .stdTooltip{ border-style:solid; background-color: #d7ecc6; border-color: black; border-width:1px; } #dhtmlpointer { position: absolute; left: -300px; z-index: 2003; display: none; } img.info_button { cursor: pointer; width: 21px; height: 21px; background: black; } a.info_button_wfr { float: right; margin-top: 7px; margin-left: 5px; line-height:10px; } a.info_button_wfr_popup { float: right; margin-top: 7px; margin-right: 5px; } img.info_button { background: url( "https://cdn.gosupermodel.com/images/buttons/info5.png#filter" ); } .tradingcard_theme, .theme5, .theme1 img.info_button{ background: url( "https://cdn.gosupermodel.com/images/buttons/info_icon_grey_norm.png" ); border-radius: 10px; } .theme8 img.info_button{ background: url( "https://cdn.gosupermodel.com/images/buttons/info_icon_sketchgame_norm.png" ); } .theme2 img.info_button, .theme_activity_log img.info_button{ background: url( "https://cdn.gosupermodel.com/images/buttons/info_icon_blue_norm.png" ); } .theme3 img.info_button { background: url( "https://cdn.gosupermodel.com/images/buttons/info_icon_red_norm.png" ); } .theme4 img.info_button { background: url( "https://cdn.gosupermodel.com/images/buttons/info_icon_sand_norm.png" ); } .theme6 img.info_button { background: url( "https://cdn.gosupermodel.com/images/buttons/info6.png#filter" ); } .theme7 img.info_button { background: url( "https://cdn.gosupermodel.com/images/buttons/info_icon_green_norm.png#filter" ); } a:hover img.info_button { background: url( "https://cdn.gosupermodel.com/images/buttons/info5h.png#filter" ); } .tradingcard_theme .theme5, .theme1 a:hover img.info_button{ background: url( "https://cdn.gosupermodel.com/images/buttons/info_icon_grey_hover.png" ); } .theme2 a:hover img.info_button, .theme_activity_log a:hover img.info_button{ background: url( "https://cdn.gosupermodel.com/images/buttons/info_icon_blue_hover.png" ); } .theme3 a:hover img.info_button { background: url( "https://cdn.gosupermodel.com/images/buttons/info_icon_red_hover.png" ); } .theme4 a:hover img.info_button { background: url( "https://cdn.gosupermodel.com/images/buttons/info_icon_sand_hover.png" ); } .theme6 a:hover img.info_button { background: url( "https://cdn.gosupermodel.com/images/buttons/info6h.png#filter" ); } .theme7 a:hover img.info_button { background: url( "https://cdn.gosupermodel.com/images/buttons/info_icon_green_hover.png#filter" ); } .theme8 a:hover img.info_button{ background: url( "https://cdn.gosupermodel.com/images/buttons/info_icon_sketchgame_hover.png#filter" ); } .textarea { background-color: #efeded; border: 1px solid #c6c6c6; } div.mugshot .dollWardrobe { background: -10px -5px no-repeat transparent; width: 100%; height: 100% } a.smiley img { padding: 4px 1px 0 1px; } .full_text h1 { font-size: 15px; } .full_text h2 { font-size: 13px; } .full_text h3 { font-size: 11px; } .full_text h1, .full_text h2, .full_text h3, .full_text h4, .full_text h5, .full_text h6 { font-weight: bold; margin-top: 11px; margin-bottom: 5px; } .full_text h3, .full_text h4, .full_text h5, .full_text h6 { margin-bottom: 0; } .full_text p { margin-top: 6px; margin-bottom: 6px; } .full_text strong { font-weight: bold; } .full_text em { font-style: italic; } .full_text ol { margin: 5px 25px; } .full_text ul { margin: 5px 0; } .full_text ol li { list-style-type: decimal; margin: 5px 0; } .full_text ul li { list-style-type: none; margin: 5px 0 5px 5px; padding: 0 7px 0 25px; background: url("https://cdn.gosupermodel.com/images/wframes/star_bullet.png") no-repeat top left; line-height: 14px; } .full_text ul li ul li { padding: 0 7px 0 22px; background: url("https://cdn.gosupermodel.com/images/wframes/star_bullet2.png") no-repeat top left; line-height: 13px; font-size: 10px; } .full_text ul li ul li ul li { padding: 0 7px 0 20px; background: url("https://cdn.gosupermodel.com/images/wframes/star_bullet3.png") no-repeat top left; line-height: 12px; font-size: 9px; } .std_table table { border: 1px #545454 solid; margin: 10px 0; width: 50%; } .std_table table th, .std_table table td { border: 1px #545454 solid; padding: 2px 6px; } .std_table table th { font-weight: bold; text-align: center; } .theme1 .std_table table th { background: #E6E1DC } .theme2 .std_table table th { background: #E6EBFA } .theme3 .std_table table th { background: #E6C8C8 } .theme4 .std_table table th { background: #F9EADD } .theme5 .std_table table th { background: #545454 } .theme6 .std_table table th { background: #924ab0 } .theme7 .std_table table th { background: #478884 } div.pagetool { float: right; } .pagetool .button { visibility: hidden; } .pagetool input { float: left; margin-top: 6px; margin-left: 4px; width: 35px; height: 13px; padding: 4px 2px; font-size: 11px; font-weight: normal; border: 1px black solid; display: none; } .loaddiv{ background:url('https://cdn.gosupermodel.com/images/loadinganim/loading.gif') no-repeat center center; background-color:transparent; width:100px; height:100px; position:relative; z-index:100; left:-50%; top:-50%; } .loadimg{ display:block; /*allows the element to take auto margins*/ margin:0 auto; /*centers in compliant browsers*/ text-align:center; /*centers in old versions of IE*/ position:relative; z-index:101; } a.avatar_shot_small_lnk div, a.avatar_shot_small div { background: url("https://cdn.gosupermodel.com/images/backgrounds/small_avatar_bg.jpg") no-repeat; width: 102px; height: 152px; position: relative; } a.avatar_shot_small_lnk:hover div { background-position: -102px 0; } a.avatar_shot_small_lnk div img, a.avatar_shot_small div img { position: absolute; top: 1px; left: 15px; } a.avatar_shot_small_lnk div img.pet_img, a.avatar_shot_small div img.pet_img { position: absolute; top: 1px; left: 15px; width: 70px; height: 150px; } a.avatar_shot_small_lnk_backstage_mp div, a.avatar_shot_small_backstage_mp div { background: url("https://cdn.gosupermodel.com/images/backgrounds/small_avatar_bg.jpg") no-repeat; width: 90px; height: 152px; } a.avatar_shot_small_lnk_backstage_mp:hover div { background-position: -102px 0; } a.avatar_shot_small_lnk_backstage_mp div img, a.avatar_shot_small_backstage_mp div img { position: relative; top: 1px; left: 15px } a.avatar_mugshot_lnk div, a.avatar_mugshot div { background: url("https://cdn.gosupermodel.com/images/backgrounds/small_avatar_bg.jpg") no-repeat 0 -5px; width: 85px; height: 100px; overflow: hidden; } a.avatar_small_mugshot_lnk div, a.avatar_small_mugshot div { background: url("https://cdn.gosupermodel.com/images/backgrounds/small_avatar_bg.jpg") no-repeat 0 -5px; width: 53px; height: 56px; overflow: hidden; } a.avatar_mugshot_lnk:hover div { background-position: -102px -5px; } a.avatar_mugshot_lnk div b, a.avatar_mugshot div b { display: block; background-repeat: no-repeat; background-position: -10px -5px; width: 100%; height: 100%; } a.avatar_mugshot_lnk div span, a.avatar_mugshot div span { display: block; background: url("https://cdn.gosupermodel.com/images/deleted_avatar_large.png#filter") -10px -5px no-repeat; width: 100%; height: 100%; } a.avatar_shot_small_lnk, a.avatar_mugshot_lnk { cursor: pointer; } .designer_popup_button { margin-left:13px; } div.designer_popup_button .button { text-align: left; padding-right: 1px; } div.designer_popup_button .button span img { padding-right: 1px; } div.billboard_widget{height:270px;width:483px;padding:0;overflow:hidden;} div.billboard_widget_menu{ padding-left:14px; padding-top:6px; position:absolute; top:225px;left:194px;float:right; background:url('https://cdn.gosupermodel.com/images/backgrounds/purple_bar.png#png8') no-repeat center center transparent; height:68px;width:261px; vertical-align:middle; } div.billboard_widget_menu_thumbnail{vertical-align:middle;height:60px;width:60px;float:left;} .billboard_widget_menu_thumb_img{width:56px;height:50px;vertical-align:middle;margin-left:2px;margin-top:5px} div.surprise_item_circlebg_trans{background:url("https://cdn.gosupermodel.com/images/wframes/item_circle_trans.png#filter") center center no-repeat;width:170px;height:170px} div.surprise_item_circlebg{background:url("https://cdn.gosupermodel.com/images/wframes/item_circle.png") center center no-repeat;width:170px;height:170px} div.surprise_item_circlebg_trans_new{background:url("https://cdn.gosupermodel.com/images/wframes/item_circle_trans_new.png#filter") center center no-repeat;width:170px;height:170px} div.surprise_item_circlebg_new{background:url("https://cdn.gosupermodel.com/images/wframes/item_circle_new.jpg") center center no-repeat;width:170px;height:170px} div.surprise_item_circle{ background-position:center center; background-repeat:no-repeat; width:170px; height:170px; } .magazine_editor_achievement_mail_logo{ background: url("https://cdn.gosupermodel.com/images/profiles/editor_achievement/logo.jpg") no-repeat; height:61px; width:284px; } div.framework_return2newbie2 { position:absolute; top:0; left:0; } div.framework_return2newbie2 div.speechbubble { position:absolute; left:280px; top:10px; width:140px; height:110px; } div.framework_return2newbie2 div.speechbubble div.speechbubbleTop { background: url("/dynimages/speechbubble.png?w=140&p=t&r=10") no-repeat top left transparent; width:140px; height:10px; position:absolute; top:0; left:0; } div.framework_return2newbie2 div.speechbubble div.speechbubbleContent { background: url("/dynimages/speechbubble.png?w=140&p=b&r=10") no-repeat bottom left transparent; width:120px; height:100px; position:absolute; top:10px; left:0; padding:0 10px; font-size:11px; line-height:13px; } div.framework_return2newbie2 div.speechbubble div.speechbubbleArrow { background:url("https://cdn.gosupermodel.com/images/speechbubble/speechbubble_arrow_left.png") no-repeat 0 0 transparent; width:31px; height:38px; position:absolute; top:36px; left:-12px; } div.framework_return2newbie2 div.speechbubble div.speechbubbleButton { position:absolute; bottom:0; width:130px; padding:0 5px 2px 5px; z-index:10; } .framework_return2newbie2 .speechbubble .speechbubbleButton .speechbubbleButtonImage { background:url('https://cdn.gosupermodel.com/images/newbie/taskpanel/button_still.gif') no-repeat 0 0; width:132px; height:44px; display:block; text-align:center; line-height:46px; text-decoration:none; font-family:'GSM print',verdana,sans-serif; font-weight:bold; font-size:12px; color:#1d1a1a; } .framework_return2newbie2 .speechbubble .speechbubbleButton .speechbubbleButtonImage.animated { background:url('https://cdn.gosupermodel.com/images/newbie/taskpanel/button_anim.gif') no-repeat 0 0; } .progress-container { display: flex; align-items: center; } .progress-circle { position: relative; width: 30px; height: 30px; } .progress-svg { width: 30px; height: 30px; transform: rotate(-90deg); } .progress-ring { fill: none; stroke: #555; stroke-width: 2; } .progress-bar { fill: none; stroke-width: 2; stroke-linecap: round; } #tier_text_topbar { padding-left: 4px; } #tier_text_dialog { padding-left: 5px; font-size: 16px; font-weight: bold; } #progress_bar_dialog { padding-left: 5px; } .widget_content_width { width: 218px; } .widget_content_padding { padding: 0 7px 0 7px; } .widget { height: 314px; width:233px; overflow: hidden; background-repeat:no-repeat; border-radius: 9px; } .widget a { color: #545454; text-decoration: underline; } .widget a:hover { color: #D24B96; } .widget_header { height: 34px; overflow: hidden; vertical-align: middle; padding: 0; margin: 0; } .widget_header_text { color: #FFF; margin: 0; padding: 8px 2px 2px 7px; font: 16px verdana, sans-serif; line-height: 35px; z-index:1; border-radius:7px; } hr.widget_ruler { /* padding: 0; */ margin: 0; /* height: 2px; */ /* border: 0; */ /* display: block; */ /* width: 100%; */ border-top: 1px solid rgba(0, 0, 0, 1); border-bottom: 1px solid rgba(255, 255, 255, 1); border-left: none; border-right: none; mix-blend-mode: overlay; } .widget_body { background: white; margin: 7px; border-radius: 6px; position: relative; } .widget_pink_style { background-image: url(https://cdn.gosupermodel.com/images/widgets/bg_pink.png); } .widget_pink_style a { color: #FFF; text-decoration: none; } .widget_pink_style a:visited { color: #FFF; text-decoration: none; } .widget_pink_style a:hover { color: #4c1936; text-decoration: none; } .widget_purple_style { background-image: url(https://cdn.gosupermodel.com/images/widgets/bg_lilla.png); } .widget_black_style { background-image: url(https://cdn.gosupermodel.com/images/widgets/bg_black.png ); } .widget_grey_style1 { background-image: url("https://cdn.gosupermodel.com/wfr/bg_grey1.a"); } .widget_grey_style2 { background-image: url("https://cdn.gosupermodel.com/wfr/bg_grey2.a"); } .widget_grey_style3 { background-image: url(https://cdn.gosupermodel.com/images/widgets/bg_grey.png ); } .widget .widget_pattern_full { background: url(/images/widgets/patterns/widget_pattern_stone.png); mix-blend-mode: overlay; width: 233px; height: 314px; border-radius: 9px; position: absolute; pointer-events: none; } .widget_blue_style1 .widget_header, .widget_blue_style2 .widget_header { background: var(--theme-blue-widget-gradient); } .widget_blue_style1, .widget_blue_style2 { background: var(--theme-blue-widget); } .widget_sand_style1 .widget_header, .widget_sand_style2 .widget_header { background: var(--theme-sand-widget-gradient); } .widget_sand_style1, .widget_sand_style2 { background: var(--theme-sand-widget); } .widget_red_style .widget_header, .widget_red_style1 .widget_header, .widget_red_style2 .widget_header, .widget_red_style3 .widget_header, .widget_red_style4 .widget_header { background: var(--theme-red-widget-gradient); } .widget_red_style, .widget_red_style1, .widget_red_style2, .widget_red_style3, .widget_red_style4 { background: var(--theme-red-widget); } .poll_widget .widget_poll_leaf_pattern { background: url(/images/widgets/patterns/widget_pattern_plant.png) no-repeat; width: 132px; height: 127px; position: absolute; bottom: -10px; right: 10px; } .widget_green_style2 .widget_header { background: var(--theme-green-widget-gradient); } .widget_green_style2 { background: var(--theme-green-widget); } .widget_magic_mirror{ background-image: url("https://cdn.gosupermodel.com/images/shopping/widget/magic_mirror_wid.png"); } .widget_avatar,.widget_avatar .widget_header_text { position: relative; background-image: url("https://cdn.gosupermodel.com/wfr/bg_avatar2.a"); } .widget_avatar.fall { background-image: url("https://cdn.gosupermodel.com/images/backgrounds/model_bg_fall.png"); } .winter .widget.widget_avatar,.winter .widget_avatar .widget_header_text { background-image: url("https://cdn.gosupermodel.com/images/themes/other/winter/avatarbg.png"); } .spt .widget.widget_avatar, .spt .widget_avatar .widget_header_text { background-image: url("https://cdn.gosupermodel.com/images/campaigns/spt_2025/avatar_bg.png"); } .widget_avatar a{ text-decoration:none } .widget_avatar a:visited{ text-decoration:none } .widget_purple_style1 { background-image: url(https://cdn.gosupermodel.com/images/widgets/bg1.png); } .widget_blue_style{ background-image: url(https://cdn.gosupermodel.com/images/widgets/bg_blue_1.png); } .widget_moodbarometer_style { background-image: url(https://cdn.gosupermodel.com/images/moodbarometer/bg_moodbarometer.png); } .widget_avatar_model { position: absolute; left: 21px; top: 14px; } .widget_avatar_icons { position: absolute; right: 15px; bottom: 10px; } .widget_message_all { overflow: hidden; width: 204px; margin-bottom: 7px; margin-top: 7px; height: 212px; color: #545454; padding: 8px } .widget_wardrobe_challenge { overflow: hidden; width: 204px; margin-bottom: 7px; height: 212px; color: #545454; padding: 8px; } .widget_dancer{ margin-left: 0; } .widget_secondhand{ } .widget_message_all a:hover { color: #a75bc7; } .widget_message_to_all_bottom { padding-left: 10px; padding-right: 7px; vertical-align: bottom; } .games_right_column .widget a.info_button_wfr{margin-top:0;} .widget_message_all .msg_to_all_text_box { height: 192px; } .widget_message_all .msg_to_all_text_box a.avatar_mugshot_lnk { float: left; margin-right: 7px; margin-bottom: 7px; } .widget_gotest{ background:url('https://cdn.gosupermodel.com/images/creative/widget/gotest_widget2_en.png') no-repeat; left: 4px; position: relative; top: 7px; } .widget_competition{ background:url('https://cdn.gosupermodel.com/images/creative/widget/competition_widget_en.png') no-repeat 7px 2px; left: 1px; position: relative; top: 7px; } .widget_juniordesigner{ background:url('https://cdn.gosupermodel.com/images/creative/juniordesigner/widgets_en.png') no-repeat; left: 4px; position: relative; top: 7px; } .widget_glitz{ height: 148px; left: 7px; position: relative; top: 7px; background:url('https://cdn.gosupermodel.com/images/widgets/shop_glitz_bg.jpg') no-repeat; } .widget_juniordesigner text_box{ height:250px; } /* =========================================== SKETZMO WIDGET RE-WORKED =========================================== */ .sketzmo_widget_content { background: var(--theme-gradient-lightblue-reverse); box-shadow: inset 0 1px 0 var(--theme-gradient-lightblue-divider), inset 0 2px 0 rgba(255, 255, 255, 0.4); width:482px; height:279px; position:relative; cursor: pointer; border-radius: 0 0 9px 9px; } .sketzmo_widget_content .sketzmo_background_image { background: url(/images/games/sketch/widget_bg.jpg) 0 0 no-repeat; width: 461px; height: 258px; position: relative; cursor: pointer; background-position: -11px -11px; border-radius: 6px; top: 10px; left: 10px; } .sketzmo_widget_content .pattern.linesdiagonal { background: url(/images/wframes/patterns/diag_lines.png); /* SKETZMO WFRAMES LIGHTBLUE BAR PATTERN */ opacity: 4%; /* specific (lower) opacity */ top: 0; right: 0; position: absolute; height: 100%; width: 100%; pointer-events: none; background-position-x: 3px; } /* =========================================== BACKSTAGE RUSH WIDGET RE-WORKED =========================================== */ .wframes_content.backstage_rush_widget { height:265px; position:relative; cursor: pointer; border-radius: 0 0 9px 9px; } .wframes_content.backstage_rush_widget .backstage_rush_background { cursor:pointer; height:258px; width: 461px; margin-bottom:0; background:url('/images/games/widget/backstage_widget_en.jpg') no-repeat; position: absolute; background-position: -11px -11px; border-radius: 6px; top: 8px; left: 10px; } .backstage_widget_text{ padding-left:14px; padding-top:135px; width:195px; color: #545454; } #backstage_widget_button{ position: absolute; bottom: 23px; left: 27px; } /* =========================================== PHOTOSHOOT WIDGET RE-WORKED =========================================== */ .wframes_content.photoshoot_widget { cursor:pointer; height:256px; width:468px; } .wframes_content.photoshoot_widget .photoshoot_background { cursor:pointer; height: 256px; width: 484px; background:url('https://cdn.gosupermodel.com/images/games/widget/photoshoot_widget_en_2.png') no-repeat; position: absolute; margin-top: 1px; margin-left: 6px; } /* =========================================== MAGAZINE WIDGET RE-WORKED =========================================== */ .widget_creative_magazine_container{ position:relative; height:272px; width:467px; } .widget_creative_magazine_container .widget_creative_magazine_background{ position:relative; background-image:url('https://cdn.gosupermodel.com/images/creative/widget/magazine_editor_widget_en.jpg'); background-repeat:no-repeat; height:265px; width:468px; border-radius:9px; } /* =========================================== DECOR WIDGET RE-WORKED =========================================== */ .wframes_content.decor_widget { height:265px; width:468px; border-radius: 0 0 9px 9px; cursor:pointer; } .wframes_content.decor_widget .decor_widget_background { background:url('https://cdn.gosupermodel.com/images/creative/widget/decor_widget.png') no-repeat; border-radius: 9px; position: relative; height:265px; width:468px; } .wframes_content.decor_widget .decor_widget_text { position:relative; width:193px; height:137px; margin-left:176px; padding-right:7px; bottom:252px; } /* =========================================== DESIGNER WIDGET RE-WORKED =========================================== */ .wframes_content.designer_widget { height:265px; width:468px; cursor:pointer; border-radius: 0 0 9px 9px; } .wframes_content.designer_widget .designer_widget_background { height:265px; width:468px; cursor:pointer; position:absolute; border-radius: 9px; } /* =========================================== CAMPAIGN BILLBOARD WIDGET(S) RE-WORKED =========================================== */ .wframes_content.billboard_widget div.billboard_image { height: 255px; width: 462px; position: absolute; top: 44px; left: 10px; border-radius: 9px; box-shadow: 4px 5px 5px rgba(0, 0, 0, 0.45); } .wframes_content.billboard_widget { height: 279px; } #campaigns_widget_widgetContainer { border-radius: 0 0 9px 9px; } .topselling_item_container { background-image:url('https://cdn.gosupermodel.com/images/widgets/newshop/topselling_item_en.jpg'); background-position: -10px -10px; height: 254px; width: 462px; border-radius: 9px; position: relative; top: 10px; left: 10px; box-shadow: 4px 5px 5px rgba(0, 0, 0, 0.45); } /* =========================================== ACTIVITY WIDGET RE-WORKED =========================================== */ #activity_log_widget_widgetContainer .bubble { background: var(--theme-bubble-inside); /*bubble inside color*/ border: 1px solid var(--theme-bubble-border); /*bubble border color*/ border-radius: 4px; } div.bubble div.bdiv { background: var(--theme-bubble-inside) !important; /*bubble inside color*/ padding: 6px !important; border-radius: 4px !important; border: none !important; } #activity_log_widget_widgetContainer .bubble:hover, #activity_log_widget_widgetContainer .bubble div.bdiv:hover { background: var(--theme-bubble-inside-hover) !important; /*bubble inside color HOVER*/ } .widget_message_all.widget_gotest, .widget_message_all.widget_competition, .widget_message_all.widget_juniordesigner{ color: #545454; } .widget_message_all.widget_competition + .widget_message_to_all_bottom .clear { clear: none; } .widget_creative_magazine_text{ position:absolute; top:105px; left:27px; width:134px; color:#545454; } .widget_creative_magazine_button{ position:absolute; top:237px; left:19px; width:144px; } .widget_games_magazine_container{ position:relative; background-image:url('https://cdn.gosupermodel.com/images/games/widget/magazine_editor_w1_widget.png'); background-repeat:no-repeat; height:314px; width:233px; } .widget_games_magazine_header{ position:absolute; top:8px; left:10px; color: white; font: 16px verdana, sans-serif; } .widget_games_magazine_info{ position:absolute; top:8px; left:205px; } .widget_games_magazine_text{ position:absolute; top:204px; left:23px; width:186px; color:#545454; } .widget_games_magazine_button{ position:absolute; top:279px; left:12px; width:144px; } /* =========================================== KIOSK WIDGET RE-WORKED =========================================== */ #widget_kiosk { position:relative; top:7px; left:16px; z-index:1; display:inline-block; background: var(--theme-sand-widget); border-radius: 9px; } #widget_kiosk .widget_pattern_full { background: url(/images/widgets/patterns/widget_pattern_kiosk.png) no-repeat; border-radius: 9px; width: 233px; height: 100%; position: absolute; pointer-events: none; z-index: -1; } .widget_kiosk_1w_top { background: var(--theme-sand-widget-gradient); border-radius: 9px 9px 0 0; width:233px; height:37px; position: relative; z-index: -2; } .widget_kiosk_1w_top .widget_ruler { position: relative; top: 35px; } .widget_kiosk_1w_header{ position:absolute; top:8px; left:10px; color: white; font: 16px verdana, sans-serif; } .widget_kiosk_1w_middle{ background: url(/images/widgets/kiosk.png) no-repeat 7px 4px !important; width:233px; height:277px; } .widget_kiosk_1w_newest_text{ position:absolute; top:124px; left:28px; width:75px; color:#ffffff; overflow:hidden; } .widget_kiosk_1w_mostpopular_text{ position:absolute; top:124px; left:129px; width:75px; color:#ffffff; overflow:hidden; } .widget_kiosk_1w_newest_magazine{ position:absolute; top:146px; left:26px; } .widget_kiosk_1w_mostpopular_magazine{ position:absolute; top:146px; left:127px; } .widget_kiosk_1w_button{ position:absolute; top:277px; left:17px; width:200px; } .widget_kiosk_1w_clickarea{ position:absolute; top:38px; left:0; width:232px; height:80px; cursor:pointer; } .widget_competition_1w_container{ width:219px; height:222px; position:absolute; top:44px; left:7px; } .widget_competition_1w_textbox{ background-color:#D6D6D6; position:absolute; top:157px; left:5px; width:209px; padding-top:7px; padding-bottom:7px; } .widget_competition_1w_text{ margin-left:7px; font-weight:bold; text-decoration:none; } .widget_competition_1w_paging{ position:absolute; top:-37px; left:166px; width:218px; } .widget_competition_1w_button{ position:absolute; top:233px; left:0; } .startnewmagazine_widget { cursor:pointer; position:relative; width: 203px; height: 221px; /* margin-left: 6px; */ padding: 8px 8px 0 8px; margin-bottom: 8px; border-radius: 11px; background:url('https://cdn.gosupermodel.com/images/magazine/production_page/involvement/language_specific/involvement_page_widget2_en.jpg') no-repeat; } #startnewmagazine_widgetwidgetContainer { background: transparent !important; } .startnewmagazine_widget_textbox { overflow:hidden; width:205px; height:46px; position:absolute; top:183px; } .startnewmagazine_widget_mugshot { position:absolute; left:6px; top:69px; width:121px; height:81px; background:url('https://cdn.gosupermodel.com/images/magazine/production_page/involvement/startmagazine_widget_mugshot_below.png') no-repeat 28px 9px ; } .startnewmagazine_widget_mugshot div { position:absolute; left:0; top:0; width:121px; height:81px; } .startnewmagazine_widget_mugshot div div { height: 81px; left: 27px; position: absolute; top: 3px; width: 121px; background:url('https://cdn.gosupermodel.com/images/magazine/production_page/involvement/startmagazine_widget_mugshot_above.png') no-repeat; } .testarea_widget { cursor:pointer; position:relative; width: 203px; height: 221px; padding: 8px 8px 0 8px; margin-bottom: 8px; border-radius: 11px; background:url('https://cdn.gosupermodel.com/images/magazine/production_page/involvement/language_specific/involvement_page_widget_1_en.jpg') no-repeat; } #testarea_widgetwidgetContainer { background: transparent !important; } .testarea_widget_textbox { overflow:hidden; width:205px; height:60px; position:absolute; top:169px; } .widget_news_infobox{ margin-top:-168px; background:url('https://cdn.gosupermodel.com/images/news/infobox_bg.jpg') no-repeat 0 0; height:168px; width:233px; } .widget_news_infobox_content{color:white;width:190px;min-width:190px;max-width:190px;height:120px;min-height:120px;max-height:120px;margin-left:21px;padding-top:10px;overflow:hidden;} .widget_news_infobox_button{ position:relative; margin-right:21px; } .club_most_active{ position: relative; } .club_left_widgets{ left: 747px; position: absolute; top: 1px; } .topselling_item{ display: table; height: 80px; width: 80px; position:absolute; } .topselling_item_span{ vertical-align: middle; cursor: pointer; } .topselling_item_thumb{ max-height: 72px; max-width: 72px; display: block; margin: 0 auto; } /* General rules */ #Left_menu li{ list-style-type:none; position:relative; } #Left_menu ul{ margin:0; padding:0; position:relative; } #Left_menu div{ margin:0; padding:0; background-color:#565656; } /* Layout CSS */ #Left_menu{ width:233px; visibility:hidden; text-align: left; text-indent:8px; vertical-align: middle; } /* All A tags - i.e menu itemDatas. */ #Left_menu a{ color: #FFF; text-decoration:none; display:block; clear:both; width:226px; outline:none; } #Left_menu .topbar{ background: var(--theme-gradient-gray); position: relative; z-index: 1; border-radius: 9px 9px 0 0; height:35px; width:233px; font-size: 16px; color:#FFF; text-indent:9px; line-height:34px; } #Left_menu .leftmenu-arrow { position: absolute; fill: #f9e5f0; stroke: #f9e5f0; stroke-width: 0.5; z-index: 1; top: 11px; right: 4px; pointer-events: none; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.4)); } #Left_menu .slMenuItem_depth1_nosub:hover ~ .leftmenu-arrow, #Left_menu .slMenuItem_bottom_depth1_nosub:hover ~ .leftmenu-arrow, #Left_menu .slMenuItem_bottom_depth1:hover ~ .leftmenu-arrow, #Left_menu .slMenuItem_bottom_depth1_hover ~ .leftmenu-arrow, #Left_menu .slMenuItem_permanent_no_sub_depth1 ~ .leftmenu-arrow, #Left_menu .slMenuItem_permanent_no_sub_bottom_depth1 ~ .leftmenu-arrow, #Left_menu .slMenuItem_permanent_depth1 ~ .leftmenu-arrow, #Left_menu .slMenuItem_depth1:hover ~ .leftmenu-arrow, #Left_menu .slMenuItem_hover_depth1 ~ .leftmenu-arrow { transform: rotate(90deg); } #Left_menu .topbar .pattern.linesdiagonalleftmenu { background: url(/images/wframes/patterns/diag_lines_leftmenu.png); /* Leftmenu pattern */ width: 100%; /* across the entire topbar */ border-radius: 9px 9px 0 0; /* border-radius on both sides */ opacity: 5%; /* specific (lower) opacity */ position: absolute; height: 35px; top: 0; left: 0; z-index: -1; filter: invert(100%); /* TODO: maybe we make it white instead? */ } #Left_menu .leftmenumugshot{ background:#656565; text-indent:0; } #Left_menu .leftmenumugshot .namebar, #Left_menu .leftmenumugshot .nb1, #Left_menu .leftmenumugshot .nb2, #Left_menu .leftmenumugshot .nbimage, #Left_menu .leftmenumugshot .nbtop { background-color:#656565; } #Left_menu .leftmenumugshot a{ display:inline; background-color:#656565; color:white; clear:none; } #Left_menu .leftmenumugshot div{ background-color:#656565; color:white; } #Left_menu .depth2chosenColor{ color:#C37D8C; } /* A tags - NO MORE STATIC IMAGES! */ #Left_menu .slMenuItem_depth1 { background: var(--gradient-gray-menu); box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.5); height:37px; width:233px; line-height:37px; } #Left_menu .slMenuItem_depth1_nosub { background: var(--gradient-gray-menu); box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.5); height:37px; width:233px; line-height:37px; } #Left_menu .slMenuItem_depth1_nosub:hover { background: var(--gradient-pink-menu); box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.5); height:37px; width:233px; line-height:37px; } #Left_menu .slMenuItem_bottom_depth1 { background: var(--gradient-gray-menu); box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.5); border-radius: 0 0 9px 9px; height:39px; width:233px; line-height:39px; } #Left_menu .slMenuItem_bottom_depth1_nosub { background: var(--gradient-gray-menu); box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.5); border-radius: 0 0 9px 9px; height:39px; width:233px; line-height:37px; } #Left_menu .slMenuItem_bottom_depth1_nosub:hover{ background: var(--gradient-pink-menu); box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.5); border-radius: 0 0 9px 9px; height:39px; width:233px; line-height:37px; } #Left_menu .slMenuItem_bottom_hover_depth1{ background: var(--gradient-gray-menu); box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.5); height:37px; width:233px; line-height:37px; } #Left_menu .slMenuItem_bottom_depth1:hover{ background: var(--gradient-pink-menu); box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.5); border-radius: 0 0 9px 9px; height:39px; width:233px; line-height:39px; } #Left_menu .slMenuItem_bottom_depth1_hover{ /*ie6 hack */ background: var(--gradient-pink-menu); box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.5); height:39px; width:233px; line-height:39px; } #Left_menu .slMenuItem_permanent_no_sub_depth1{ background: var(--gradient-pink-menu); box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.5); height:37px; width:233px; line-height:37px; } #Left_menu .slMenuItem_permanent_no_sub_bottom_depth1{ background: var(--gradient-pink-menu); box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.5); border-radius: 0 0 9px 9px; height:39px; width:233px; line-height:39px; } #Left_menu .slMenuItem_permanent_depth1 { background: var(--gradient-pink-menu); box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.5); height:37px; width:233px; line-height:37px; } #Left_menu .slMenuItem_depth1:hover { background: var(--gradient-pink-menu); box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.5); height:37px; width:233px; line-height:37px; } #Left_menu .slMenuItem_hover_depth1 { background: var(--gradient-pink-menu); box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.5); height:37px; width:233px; line-height:37px; } #Left_menu .slMenuItem_depth2 { margin-top:1px; line-height:20px; } #Left_menu .slMenuItem_depth2:active, #Left_menu .slMenuItem_depth2:hover, #Left_menu .slMenuItem_depth4 { margin-top:1px; color:#C37D8C; } #Left_menu .slMenuItem_depth3{ /* Sub menu itemDatas */ margin-top:1px; font-style:italic; color:blue; } #Left_menu .slMenuItem_depth5{ /* Sub menu itemDatas */ margin-top:1px; } #Left_menu .slideMenuDiv1 ul{ padding:1px; } #Left_menu .Left_menu_Bottom div, #Left_menu .Left_menu_Bottom ul { background-color:transparent; } #Left_menu .Left_menu_Bottom ul { background: #565656; width:231px; } #Left_menu > ul > li:last-child div { border-radius: 0 0 9px 9px; } #Left_menu .slideMenuDiv2 ul{ margin-left:0; padding:1px; } #Left_menu .slideMenuDiv3 ul{ margin-left:10px; padding:1px; } #Left_menu .slMenuItem_depth4 ul{ margin-left:15px; padding:1px; } /******************************************************************************************************************************************************************************************/ /* Adaptive Menu System - Mobile Responsive Styles */ /* Uses .left-menu class to support multiple menu instances with different IDs */ /* Also supports #Left_menu ID for backward compatibility */ @media (max-width: 768px) { /* =========================================== Hide column-based left menu in adaptive mode The adaptive menu is now rendered in framework_content_pre by main.jsp =========================================== */ html.adaptive .wframes_1col { display: none; } /* Also hide any left wrapper that contains the old menu */ html.adaptive .wframes_1col_left_wrapper { display: none; } /* Hide picture archive spacer that may escape the hidden column */ html.adaptive .picture-archive-spacer { display: none; } /* Base container for adaptive menu in framework_content_pre */ html.adaptive .left-menu, html.adaptive #Left_menu { width: 100% !important; max-width: 730px !important; height: 38px !important; font-family: Arial, sans-serif !important; z-index: 100 !important; overflow: hidden !important; position: relative !important; /* Positioning context for absolute ul */ } /* Menu open state - keep fixed height, menu list will overlay */ html.adaptive .left-menu.menu-open, html.adaptive #Left_menu.menu-open { overflow: visible !important; /* Height stays at 38px - ul is positioned absolutely */ } /* Main menu list - hidden by default */ html.adaptive .left-menu > ul, html.adaptive #Left_menu > ul { display: none !important; } /* Main menu list - absolutely positioned when open to overlay content */ html.adaptive .left-menu.menu-open > ul, html.adaptive #Left_menu.menu-open > ul { display: flex !important; position: absolute !important; top: 38px !important; left: 0 !important; z-index: 10000 !important; } /* Top bar styling */ html.adaptive .left-menu .topbar, html.adaptive #Left_menu .topbar { display: flex !important; align-items: center !important; justify-content: flex-start !important; padding-left: 0px !important; height: 38px !important; border: 1px solid #000000 !important; cursor: pointer !important; color: #ffff !important; font-size: 16px !important; text-decoration: none !important; width: 730px !important; box-sizing: border-box !important; background: var(--gradient-black-menu) !important; text-indent: 0 !important; line-height: 38px !important; font-size: 0 !important; } /* Replace topbar text with "Menu" */ html.adaptive .left-menu .topbar::before, html.adaptive #Left_menu .topbar::before { content: 'Menu' !important; font-size: 16px !important; padding-left: 16px !important; } /* Add dropdown arrow to topbar */ html.adaptive .left-menu .topbar::after, html.adaptive #Left_menu .topbar::after { content: 'â–¼' !important; margin-left: 8px !important; font-size: 10px !important; opacity: 0.8 !important; vertical-align: middle !important; transition: transform 0.2s !important; } /* Main menu list shared styles */ html.adaptive .left-menu > ul, html.adaptive #Left_menu > ul { flex-direction: column !important; flex-wrap: nowrap !important; justify-content: flex-start !important; align-items: stretch !important; background: transparent !important; margin: 0 !important; padding: 0 !important; width: 730px !important; position: relative !important; z-index: 10000 !important; height: auto !important; list-style: none !important; } /* Main menu items */ html.adaptive .left-menu > ul > li, html.adaptive #Left_menu > ul > li { list-style: none !important; margin: 0 !important; margin-top: -1px !important; padding: 0 !important; flex: 0 0 auto !important; text-align: left !important; border: 1px solid #000000 !important; width: 730px !important; } /* Main menu links - depth1 */ html.adaptive .left-menu .slMenuItem_depth1, html.adaptive .left-menu .slMenuItem_depth1_nosub, html.adaptive .left-menu .slMenuItem_bottom_depth1, html.adaptive .left-menu .slMenuItem_bottom_depth1_nosub, html.adaptive #Left_menu .slMenuItem_depth1, html.adaptive #Left_menu .slMenuItem_depth1_nosub, html.adaptive #Left_menu .slMenuItem_bottom_depth1, html.adaptive #Left_menu .slMenuItem_bottom_depth1_nosub { text-decoration: none !important; color: #ffff !important; display: flex !important; align-items: center !important; justify-content: flex-start !important; height: 38px !important; font-size: 16px !important; padding-left: 16px !important; width: 730px !important; box-sizing: border-box !important; background: var(--theme-gradient-gray) !important; border: none !important; line-height: 38px !important; text-indent: 0 !important; } /* Items without submenu */ html.adaptive .left-menu .slMenuItem_depth1_nosub, html.adaptive .left-menu .slMenuItem_bottom_depth1_nosub, html.adaptive #Left_menu .slMenuItem_depth1_nosub, html.adaptive #Left_menu .slMenuItem_bottom_depth1_nosub { border: none !important; } /* Hover states - ONLY for items without submenus (nosub) */ html.adaptive .left-menu .slMenuItem_depth1_nosub:hover, html.adaptive .left-menu .slMenuItem_bottom_depth1_nosub:hover, html.adaptive #Left_menu .slMenuItem_depth1_nosub:hover, html.adaptive #Left_menu .slMenuItem_bottom_depth1_nosub:hover { background: var(--gradient-pink-menu) !important; color: #ffff !important; } /* Disable hover for items WITH submenus - they should only respond to clicks */ html.adaptive .left-menu .slMenuItem_depth1:hover, html.adaptive .left-menu .slMenuItem_bottom_depth1:hover, html.adaptive .left-menu .slMenuItem_hover_depth1, html.adaptive .left-menu .slMenuItem_bottom_depth1_hover, html.adaptive #Left_menu .slMenuItem_depth1:hover, html.adaptive #Left_menu .slMenuItem_bottom_depth1:hover, html.adaptive #Left_menu .slMenuItem_hover_depth1, html.adaptive #Left_menu .slMenuItem_bottom_depth1_hover { background: var(--gradient-gray-menu) !important; color: #ffff !important; pointer-events: auto !important; } /* Selected/permanent states - keep pink gradient but match other styling */ html.adaptive .left-menu .slMenuItem_permanent_depth1, html.adaptive .left-menu .slMenuItem_permanent_no_sub_depth1, html.adaptive .left-menu .slMenuItem_permanent_no_sub_bottom_depth1, html.adaptive #Left_menu .slMenuItem_permanent_depth1, html.adaptive #Left_menu .slMenuItem_permanent_no_sub_depth1, html.adaptive #Left_menu .slMenuItem_permanent_no_sub_bottom_depth1 { background: var(--gradient-pink-menu) !important; text-decoration: none !important; color: #ffff !important; display: flex !important; align-items: center !important; justify-content: flex-start !important; height: 38px !important; font-size: 16px !important; padding-left: 16px !important; width: 730px !important; box-sizing: border-box !important; border: none !important; line-height: 38px !important; text-indent: 0 !important; } /* Add dropdown arrow ONLY to items with submenus */ html.adaptive .left-menu > ul > li > a[href]:not(.slMenuItem_depth1_nosub):not(.slMenuItem_bottom_depth1_nosub):not(.slMenuItem_permanent_no_sub_depth1):not(.slMenuItem_permanent_no_sub_bottom_depth1)::after, html.adaptive #Left_menu > ul > li > a[href]:not(.slMenuItem_depth1_nosub):not(.slMenuItem_bottom_depth1_nosub):not(.slMenuItem_permanent_no_sub_depth1):not(.slMenuItem_permanent_no_sub_bottom_depth1)::after { content: 'â–¼' !important; margin-left: 8px !important; font-size: 10px !important; opacity: 0.8 !important; vertical-align: middle !important; transition: transform 0.2s !important; } /* Submenu container */ html.adaptive .left-menu .slideMenuDiv1, html.adaptive .left-menu .slideMenuDiv2, html.adaptive #Left_menu .slideMenuDiv1, html.adaptive #Left_menu .slideMenuDiv2 { position: relative !important; width: 730px !important; z-index: 10001 !important; margin-top: 0 !important; } /* Submenu lists */ html.adaptive .left-menu .slideMenuDiv1 ul, html.adaptive .left-menu .slideMenuDiv2 ul, html.adaptive #Left_menu .slideMenuDiv1 ul, html.adaptive #Left_menu .slideMenuDiv2 ul { margin: 0 !important; margin-bottom: 0 !important; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important; flex-direction: column !important; list-style: none !important; padding: 0 !important; width: 730px !important; } /* Submenu items */ html.adaptive .left-menu .slideMenuDiv1 ul li, html.adaptive .left-menu .slideMenuDiv2 ul li, html.adaptive #Left_menu .slideMenuDiv1 ul li, html.adaptive #Left_menu .slideMenuDiv2 ul li { border-left: 1px solid #000000 !important; border-right: 1px solid #000000 !important; border-bottom: none !important; border-top: 1px solid #000000 !important; width: 730px !important; background: #565656 !important; text-align: left !important; margin: 0 !important; margin-top: 0 !important; padding: 0 !important; } /* Submenu links - depth2 */ html.adaptive .left-menu .slMenuItem_depth2, html.adaptive #Left_menu .slMenuItem_depth2 { display: block !important; background: #565656 !important; padding-left: 32px !important; height: 38px !important; line-height: 38px !important; margin-top: 0 !important; color: #ffff !important; width: 730px !important; box-sizing: border-box !important; font-size: 16px !important; text-decoration: none !important; } /* Ensure all nested elements in depth2 also have 16px font */ html.adaptive .left-menu .slMenuItem_depth2 *, html.adaptive .left-menu .slMenuItem_depth2 div, html.adaptive #Left_menu .slMenuItem_depth2 *, html.adaptive #Left_menu .slMenuItem_depth2 div { font-size: 16px !important; } html.adaptive .left-menu .slMenuItem_depth2:hover, html.adaptive .left-menu .slMenuItem_depth2:active, html.adaptive #Left_menu .slMenuItem_depth2:hover, html.adaptive #Left_menu .slMenuItem_depth2:active { background: #767676 !important; color: #ffff !important; } /* Active/selected depth2 items - darker pink background */ html.adaptive .left-menu .depth2chosenColor, html.adaptive .left-menu .slMenuItem_depth2.depth2chosenColor, html.adaptive .left-menu a.depth2chosenColor, html.adaptive #Left_menu .depth2chosenColor, html.adaptive #Left_menu .slMenuItem_depth2.depth2chosenColor, html.adaptive #Left_menu a.depth2chosenColor { background: #B56475 !important; padding-left: 32px !important; height: 38px !important; line-height: 38px !important; margin-top: 0 !important; width: 730px !important; box-sizing: border-box !important; font-size: 16px !important; font-weight: normal !important; display: block !important; color: #ffff !important; } /* Ensure divs inside chosen items don't override */ html.adaptive .left-menu .depth2chosenColor div, html.adaptive .left-menu a.depth2chosenColor div, html.adaptive #Left_menu .depth2chosenColor div, html.adaptive #Left_menu a.depth2chosenColor div { font-size: 16px !important; font-weight: normal !important; height: auto !important; line-height: inherit !important; display: inline !important; } /* Last submenu item gets bottom border */ html.adaptive .left-menu .slideMenuDiv1 ul li:last-child, html.adaptive .left-menu .slideMenuDiv2 ul li:last-child, html.adaptive #Left_menu .slideMenuDiv1 ul li:last-child, html.adaptive #Left_menu .slideMenuDiv2 ul li:last-child { border-bottom: 1px solid #000000 !important; } /* Hide bottom bar background */ html.adaptive .left-menu .Left_menu_Bottom ul, html.adaptive #Left_menu .Left_menu_Bottom ul { background: transparent !important; } } /* =========================================== Adaptive Left Menu (framework-level instance) For pages that include the menu in framework_content_pre (e.g., mail pages in complete flexbox migration) This only overrides positioning - all other styles inherit from the shared .left-menu rules above. =========================================== */ /* Hidden by default (outside media query) */ #Left_menu_adaptive { display: none; visibility: hidden; } @media (max-width: 768px) { /* Show in adaptive mode - only override positioning */ /* Uses relative positioning since it's already in framework_content_pre */ html.adaptive #Left_menu_adaptive { display: block; visibility: visible; position: relative !important; top: auto !important; left: auto !important; padding-bottom: 16px; } /* Hide main UL by default (needed for ID specificity) */ html.adaptive #Left_menu_adaptive > ul { display: none !important; } /* Menu open state */ html.adaptive #Left_menu_adaptive.menu-open { overflow: visible !important; height: auto !important; } html.adaptive #Left_menu_adaptive.menu-open > ul { display: flex !important; position: absolute; top: 0px; left: 0; margin-top: -1px !important; } } div.wframes_1col { width: 233px; float: left; margin-right: 16px; overflow: hidden; } div.wframes_1col_r { width: 233px; float: left; overflow: hidden; } div.wframes_2col { width: 482px; float: left; margin-right: 16px; overflow: hidden; } div.wframes_2col_r { width: 482px; float: left; /*margin-right: 16px;*/ overflow: hidden; } div.wframes_3col { width: 731px; float: left; overflow: hidden; } div.wframes_3col_r { width: 731px; float: left; overflow: hidden; } div.wframes_4col_r { width: 980px; float: left; overflow: hidden; } /* Flexible width column - use with any wframes_Xcol class to make it flexible */ div.wframes_flex { width: auto; float: none; flex: 1; min-width: 0; } div.wframes_wfr { margin: 0; padding: 0 7px 0 7px; width: 200px; height: 35px; background: black; color: white; font: 16px verdana, sans-serif; line-height:35px; clear: both; position: relative; } /* Flexible width wframes (width=0) - inherits width from container */ div.wframes_wfr_flex { width: auto; } div.wframes_wfr .button, div.wframes_divider .button, div.internal_panel_hd .button, div.yui-panel-container .pagetool .button, .pagetool .button { margin-top: 6px; margin-left: 4px; font-size: 11px; } div.wframes_wfr_insert { position: absolute; left: 311px; top: 6px; height: 23px; } div.wframes_wfr_insert_half { right:7px; left:auto; } div.wframes_wfr_insert .button { margin: 0 4px; } div.wframes_wfr_insert div.vert_div { float: left; width: 2px; height: 23px; background: url('https://cdn.gosupermodel.com/images/wframes/vert_divider.png'); margin: 0 4px; } div.wframes_bottom_gray66 div.vert_div { float: left; width: 2px; height: 48px; background: url('https://cdn.gosupermodel.com/images/wframes/vert_divider.png'); margin: 0 4px; } .wframes_content { background-color: white; color: #545454; padding: 7px; overflow: hidden; clear: both; } .wframes_content a { color: #545454; } .wframes_content a:hover { color: #888; } .wframes_content p:first-child, .wframes_content h1:first-child, .wframes_content h2:first-child, .wframes_content h3:first-child { margin-top: 0; } .wframes_content p:last-child, .wframes_content h1:last-child, .wframes_content h2:last-child, .wframes_content h3:last-child { margin-bottom: 0; } .no_bottom_padding { padding-bottom: 0; } div.wframes_divider { margin: 0; padding: 0 7px 0 7px; height: 35px; background: black; color: white; font: 16px verdana, sans-serif; line-height: 35px; clear: both; position: relative; } div.wframes_bottom_blue60 { width: 717px; height: 60px; padding: 4px 7px 2px 7px; background: url("https://cdn.gosupermodel.com/wfr/blue_gradient.w3b") 0 bottom; color: white; clear: both; } div.wframes_bottom_red40 { width: 717px; height: 40px; line-height: 19px; padding: 4px 7px 2px 7px; background: url("https://cdn.gosupermodel.com/wfr/gred_gradient.w3b") 0 bottom; color: white; clear: both; } div.wframes_bottom_red30 { width: 482px; height: 40px; line-height: 19px; padding: 4px 7px 2px 7px; background: url("https://cdn.gosupermodel.com/wfr/gred_gradient.w2b") 0 bottom; color: white; clear: both; } div.wframes_gap { height: 16px; clear: both; } /* Bubbles */ div.bubble { margin: 7px; } b.btop, b.bbottom { display:block; background:transparent; font-size:1px; } b.bub1, b.bub2, b.bub3, b.bub4 { display:block; overflow:hidden; } b.bub1, b.bub2, b.bub3 { height:1px; } b.bub2, b.bub3, b.bub4 { background:#F8F8F8; border-left:1px solid #eee; border-right:1px solid #eee; } b.bub1 { margin:0 5px; background:#eee; } b.bub2 { margin:0 3px; border-width:0 2px; } b.bub3 { margin: 0 2px; } b.bub4 { height:2px; margin:0 1px; } div.bubble input[type="text"], div.bubble input[type="password"], div.bubble input[type=select] { background-color: white; } .theme1 div.bubble b.bub2, .theme1 div.bubble b.bub3, .theme1 div.bubble b.bub4, .theme1 div.bubble div.bdiv { background-color: #E6E1DC; border-color: #E6E1DC; } .theme1 div.bubble b.bub1 { background-color: #E6E1DC; } .theme2 div.bubble b.bub2, .theme2 div.bubble b.bub3, .theme2 div.bubble b.bub4, .theme2 div.bubble div.bdiv { background-color: #E6EBFA; border-color: #E6EBFA; } .theme2 div.bubble b.bub1 { background-color: #E6EBFA; } .theme3 div.bubble b.bub2, .theme3 div.bubble b.bub3, .theme3 div.bubble b.bub4, .theme3 div.bubble div.bdiv { background-color: #E6C8C8; border-color: #E6C8C8; } .theme3 div.bubble b.bub1 { background-color: #E6C8C8; } .theme4 div.bubble b.bub2, .theme4 div.bubble b.bub3, .theme4 div.bubble b.bub4, .theme4 div.bubble div.bdiv { background-color: #F0D7B9; border-color: #F0D7B9; } .theme4 div.bubble b.bub1 { background-color: #F0D7B9; } .theme5 div.bubble b.bub2, .theme5 div.bubble b.bub3, .theme5 div.bubble b.bub4, .theme5 div.bubble div.bdiv { background-color: #545454; border-color: #545454; } .theme5 div.bubble b.bub1 { background-color: #545454; } .theme6 div.bubble b.bub2, .theme6 div.bubble b.bub3, .theme6 div.bubble b.bub4, .theme6 div.bubble div.bdiv { background-color: #924ab0; border-color: #924ab0; } .theme6 div.bubble b.bub1 { background-color: #924ab0; } .theme7 div.bubble b.bub2, .theme7 div.bubble b.bub3, .theme7 div.bubble b.bub4, .theme7 div.bubble div.bdiv { background-color: #924ab0; border-color: #478884; } .theme7 div.bubble b.bub1 { background-color: #478884; } .gsm_goodies div.bubble b.bub2, .gsm_goodies div.bubble b.bub3, .gsm_goodies div.bubble b.bub4, .gsm_goodies div.bubble div.bdiv { background-color:#E8E8E8; border-color:#E8E8E8;} .gsm_goodies div.bubble b.bub1 { background-color: #E8E8E8; } .tradingcard_theme div.bubble b.bub2, .tradingcard_theme div.bubble b.bub3, .tradingcard_theme div.bubble b.bub4, .tradingcard_theme div.bubble div.bdiv { background-color:#924ab0; border-color:#924ab0;} .tradingcard_theme div.bubble b.bub1 { background-color: #924ab0; } div.solidbackground{ margin: 10px 0; padding: 6px; } .theme1 div.solidbackground { background-color: #545454; } .theme2 div.solidbackground { background-color: #8CAFD2; } .theme3 div.solidbackground { background-color: #C37D8C; } .theme4 div.solidbackground { background-color: #F9EADD; } .theme5 div.solidbackground { background-color: #E6E1DC; } .theme6 div.solidbackground { background-color: #F0F0F0; } .theme7 div.solidbackground { background-color: #478884; } .gsm_goodies div.solidbackground { background-color: #E8E8E8; } .tradingcard_theme div.solidbackground { background-color: #924ab0; } /* Modelname bar*/ div.namebar { height: 20px; } div.namebar a { text-decoration: none; color:white; } div.namebar div.nbimg { float: left; width: 18px; height: 18px; background: url("https://cdn.gosupermodel.com/images/wframes/modelname_star.png"); margin: 0 7px; } div.namebar img.nbimg { float: left; margin: 0 7px; } b.nb1 { margin: 0 2px; height: 1px; display: block; font-size: 1px; background: black; } b.nb2 { margin: 0 1px; height: 1px; display: block; font-size: 1px; background: black; } b.nbtop { display: block; background: black; overflow: hidden; font-weight: bold; font-size: 13px; height: 18px; line-height: 16px; color:white; padding: 2px 0 0 0; border-radius: 3px 3px 0 0; } .theme1 div.namebar b { background: #545454;} .theme2 div.namebar b { background: #8CAFD2;} .theme3 div.namebar b { background: #C37D8C;} .theme4 div.namebar b { background: #D7B48C;} .theme5 div.namebar b { background: #E6E1DC;} .theme6 div.namebar b { background: #F0F0F0;} .theme7 div.namebar b { background: #478884;} .theme8 div.namebar b { background: #9fd5d9;} .conversation div.namebar b { background:#C37D8C none repeat scroll 0 0;} /* Table */ table.wtable { color: #585858; background: white; border-spacing: 0; border-collapse: separate; border: 1px #b3b3b3 solid; } table.wtable_full { border-color: #b3b3b3; border-width: 0 0 1px 1px; width: 100%; } table.wtable a { color: #585858; text-decoration: none; } table.wtable a:hover { color: #999; } table.wtable td { border-top: 1px #d6d6d6 solid; border-right: 1px #d6d6d6 solid; padding: 4px 5px; overflow: hidden; } table.wtable_multiline td { padding-top: 2px; padding-bottom: 2px; } table.wtable th { font-weight: bold; text-align: center; border-bottom: 1px #d0d0d0 solid; border-right: 1px #d0d0d0 solid; padding: 4px 5px; cursor: pointer; } table.wtable th.sortable:hover { color: #999999; } table.wtable tr.odd td { border-top: 1px #b3b3b3 solid; border-right: 1px #b3b3b3 solid; } .theme1 .wtable tr.odd { background: #E6E1DC;} .theme2 .wtable tr.odd { background: #E6EBFA;} .theme3 .wtable tr.odd { background: #E6C8C8;} .theme4 .wtable tr.odd { background: #F9EADD;} .theme5 .wtable tr.odd { background: #545454;} .theme6 .wtable tr.odd { background: #924ab0;} .theme7 .wtable tr.odd { background: #478884;} div.wtable_bottom_1, div.wtable_bottom_1_odd, div.wtable_bottom_2, div.wtable_bottom_2_odd, div.wtable_bottom_3, div.wtable_bottom_3_odd { height: 9px; width: 100%; font-size:1px; } div.wtable_bottom_1_odd { background: url("https://cdn.gosupermodel.com/wfr/xfff.w1b") bottom; } .theme1 div.wtable_bottom_1 { background: url("https://cdn.gosupermodel.com/wfr/x545454.w1b") bottom; } .theme2 div.wtable_bottom_1 { background: url("https://cdn.gosupermodel.com/wfr/x8cafd2.w1b") bottom; } .theme3 div.wtable_bottom_1 { background: url("https://cdn.gosupermodel.com/wfr/xc37d8c.w1b") bottom; } .theme4 div.wtable_bottom_1 { background: url("https://cdn.gosupermodel.com/wfr/xf0d7b9.w1b") bottom; } .theme5 div.wtable_bottom_1 { background: url("https://cdn.gosupermodel.com/wfr/xe6e1dc.w1b") bottom; } .theme6 div.wtable_bottom_1 { background: url("https://cdn.gosupermodel.com/wfr/xf0f0f0.w1b") bottom; } .theme7 div.wtable_bottom_1 { background: url("https://cdn.gosupermodel.com/wfr/x478884.w1b") bottom; } div.wtable_bottom_2_odd { background: url("https://cdn.gosupermodel.com/wfr/xfff.w2b") bottom; } .theme1 div.wtable_bottom_2 { background: url("https://cdn.gosupermodel.com/wfr/x545454.w2b") bottom; } .theme2 div.wtable_bottom_2 { background: url("https://cdn.gosupermodel.com/wfr/x8cafd2.w2b") bottom; } .theme3 div.wtable_bottom_2 { background: url("https://cdn.gosupermodel.com/wfr/xc37d8c.w2b") bottom; } .theme4 div.wtable_bottom_2 { background: url("https://cdn.gosupermodel.com/wfr/xf0d7b9.w2b") bottom; } .theme5 div.wtable_bottom_2 { background: url("https://cdn.gosupermodel.com/wfr/xe6e1dc.w2b") bottom; } .theme6 div.wtable_bottom_2 { background: url("https://cdn.gosupermodel.com/wfr/xf0f0f0.w2b") bottom; } .theme7 div.wtable_bottom_2 { background: url("https://cdn.gosupermodel.com/wfr/x478884.w2b") bottom; } div.wtable_bottom_3_odd { background: url("https://cdn.gosupermodel.com/wfr/xfff.w3b") bottom; } .theme1 div.wtable_bottom_3 { background: url("https://cdn.gosupermodel.com/wfr/x545454.w3b") bottom; } .theme2 div.wtable_bottom_3 { background: url("https://cdn.gosupermodel.com/wfr/x8cafd2.w3b") bottom; } .theme3 div.wtable_bottom_3 { background: url("https://cdn.gosupermodel.com/wfr/xc37d8c.w3b") bottom; } .theme4 div.wtable_bottom_3 { background: url("https://cdn.gosupermodel.com/wfr/xf0d7b9.w3b") bottom; } .theme5 div.wtable_bottom_3 { background: url("https://cdn.gosupermodel.com/wfr/xe6e1dc.w3b") bottom; } .theme6 div.wtable_bottom_3 { background: url("https://cdn.gosupermodel.com/wfr/xf0f0f0.w3b") bottom; } .theme7 div.wtable_bottom_3 { background: url("https://cdn.gosupermodel.com/wfr/x478884.w3b") bottom; } .gt_link a { text-decoration:none; font-weight:bold; } .gt_link a:hover { color:#999; } .brandedclubs .wtable th{ background:#ffffff; } .brandedclubs .wtable tr{ background:#F9EADD; } .brandedclubs .wtable tr.odd{ background:#F0D7B9; } table.itembox { width: 60px; height: 60px; overflow: hidden; table-layout: fixed; } table.itembox th:hover { background-position: 0 -60px; } table.itembox th { cursor: pointer; } table.itembox td, table.itembox th { text-align: center; background: url(https://cdn.gosupermodel.com/images/backgrounds/item_box_bg1.png); } table.itembox img { margin: 3px; max-width: 54px; max-height:52px; } #itembox_hover { position: absolute; overflow: hidden; z-index: 2050; display: none; -webkit-border-radius: 9px; -moz-border-radius: 9px; border-radius: 9px; padding: 7px; -webkit-box-shadow: rgba(0,0,0,0.5) 6px 6px 18px; -moz-box-shadow: rgba(0,0,0,0.5) 6px 6px 18px; box-shadow: 6px 6px 18px rgba(0,0,0,0.5); background: #646661; } .friendbar_element{ float:left; height:25px; text-align:center; padding-top:10px; color:white; background: url("https://cdn.gosupermodel.com/images/clear.gif"); } .friendbar_divider{ background-image:url('https://cdn.gosupermodel.com/images/friends/friend_bar_divider.jpg'); background-repeat:no-repeat; float:left; width:1px; height:35px; background-color:white; text-align:center; } #friendbar_box{ background-image:url('https://cdn.gosupermodel.com/images/friends/friend_bar_bg.png#filter'); width:731px; height:88px; color:white; } .friendbar_container{ position:relative; top:1px; left:7px; height:35px; color:white; float:left; } div.friendAppCard{ height:179px; width:351px; background-color:white; float:left; } div.friendAppCardIncoming{ height:179px; width:343px; background-color:white; float:left; } div.leftgreyBorder{ border-right:1px solid #CCC; padding-right:7px; } .rightFriendAppCard{ padding-left:7px; } div.friendappwidgetdivider{ height: 2px; width: 100%; background: url("https://cdn.gosupermodel.com/images/widgets/widget_divider.png") no-repeat; font-size: 1px; } div.infocardpart{ height:152px; width:243px; float:left; padding-left:6px; background-color:#f0f0f0; } div.infocardpart table{ width:100%; height:157px; } div.infocardpart_incoming{ height:157px; width:233px; float:left; padding-left:6px; } div.infocardpart_incoming table{ width:100%; height:157px; } div.friendcardplaceholder{ background:white url('https://cdn.gosupermodel.com/images/backgrounds/big_widget_bg.png') -360px 0; width:357px; } div.friend_incoming_357t { background: url('https://cdn.gosupermodel.com/wfr/bar2_7.w357t'); } div.friend_banner_357t { background: var(--advertisement-gradient-green); border-radius: 9px 9px 0 0; } div.wframes_bottom_friendincoming{ width: 343px; height: 100px; padding: 4px 7px 2px 7px; background: var(--theme-gradient-blue-smooth); border-radius: 0 0 9px 9px; color: white; clear: both; } div.wframes_bottom_friend_banner{ width: 343px; height: 3px; padding: 4px 7px 2px 7px; background: url("https://cdn.gosupermodel.com/wfr/xfff.w357b") 0 top; color: white; clear: both; } div.content_friend_banner{ background:white url('https://cdn.gosupermodel.com/images/backgrounds/banner_bg_filler.png'); width:343px; height:276px; } .friend_top_padding{ padding-top:7px; } div.applicationscontent_incoming{ height:179px; width:343px; overflow:hidden; } .get_statement{ height: 61px; overflow: hidden; padding-top: 5px; width: 154px; } .grey_bar{ background:url('https://cdn.gosupermodel.com/images/friend_badges/gray_bar.png'); height:31px; width:237px; text-align:right; } .grey_bar .text{ float: right; height: 11px; padding-top: 8px; position: relative; width: 130px; } .grey_bar .remove_button{ padding-right:7px; padding-left:7px; padding-top:4px;position:relative;float:right; width:29px; height:31px; } .userToUserRetentionSticker { position:relative; background-color:rgb(235, 220, 220); width:223px; height:66px; padding:7px; } .userToUserRetentionSticker.used { display:none; } .userToUserRetentionSticker .userToUserRetentionSendMessageBox { position:absolute; left:0; bottom:0; width:223px; padding:7px; } .userToUserRetentionSticker .userToUserRetentionSendMessageBox .text { padding-right:37px; text-align:right; line-height:23px; } #user2userRetentionDialog { position:relative; } #user2userRetentionDialog .friendShot { position:absolute; padding:14px; top:0; left:0; width:70px; } #user2userRetentionDialog .u2urDialogBody { margin-left:70px; } #user2userRetentionDialog textarea { width:100%; resize:vertical; } /* =========================================== BUTTONS RE-WORKED (position: relative;left: -4px;) =========================================== */ a.button span:not(:has(.button-arrow)) { padding: 0 6px 0 6px !important; } a.button span .button-arrow{ visibility: inherit; position: relative; fill: var(--theme-arrow-fill); stroke: var(--theme-arrow-stroke); stroke-width: 0.5; z-index: 1; top: 3.5px; right: 2px; pointer-events: none; filter: var(--theme-arrow-filter) } a[id*="_l"]:has(span svg.button-arrow) svg.button-arrow, a#prev svg.button-arrow { transform: rotate(180deg); right: 4px; } svg.button-arrow.double { right: 3px !important; } a.button { color: #444; display: inline-block; height: 23px; /*padding-right: 6px; --> sliding doors padding */ text-decoration: none; text-align: center; overflow: hidden; font-weight: bold; line-height: 23px; margin:0 auto; outline: none; cursor: pointer; border-radius: 4px; } a.button span { display: block; padding: 0 0 0 6px; border-radius: 4px; text-decoration: none; /*font-size: 11px;*/ /*line-height: 23px;*/ } a.button span img { vertical-align: top; padding-right: 4px; } a.button:hover { color: #000; outline: none; } a.button:hover span { outline: none; } .floatRight { float:right; } .floatLeft { float:left; } a.coloridx0 { background: var(--theme-gradient-gray-dark); } a.coloridx0 span{ background: var(--theme-gradient-gray-dark); color: white; } a.coloridx0:hover, a.coloridx0:hover span { background: var(--theme-gradient-gray-hover); color: white; } a.coloridx0Selected, a.coloridx0Selected span { background: var(--theme-gradient-gray-hover); } a.coloridx1 { background: var(--theme-gradient-blue-dark); } a.coloridx1 span{ background: var(--theme-gradient-blue-dark); color: white; } a.coloridx1:hover, a.coloridx1:hover span { background: var(--theme-gradient-blue-hover); color: white; } a.coloridx1Selected, a.coloridx1Selected span { background: var(--theme-gradient-blue-hover); } a.coloridx2 { background: var(--theme-gradient-pink-dark); } a.coloridx2 span{ background: var(--theme-gradient-pink-dark); color: white; } a.coloridx2:hover, a.coloridx2:hover span { background: var(--theme-gradient-pink-hover); color: white; } a.coloridx2Selected, a.coloridx2Selected span { background: var(--theme-gradient-pink-hover); } a.coloridx3 { background: var(--theme-gradient-sand-dark); } a.coloridx3 span{ background: var(--theme-gradient-sand-dark); color: white; } a.coloridx3:hover, a.coloridx3:hover span { background: var(--theme-gradient-sand-hover); color: white; } a.coloridx3Selected, a.coloridx3Selected span { background: var(--theme-gradient-sand-hover); } a.coloridx4 { background: var(--theme-gradient-gray-hover); } a.coloridx4 span{ background: var(--theme-gradient-gray-hover); color: white; } a.coloridx4:hover, a.coloridx4:hover span { background: var(--theme-gradient-gray-dark); color: white; } a.coloridx4Selected, a.coloridx4Selected span { background: var(--theme-gradient-gray-dark); } a.coloridx5 { background: var(--theme-gradient-teal-dark); } a.coloridx5 span{ background: var(--theme-gradient-teal-dark); color: white; } a.coloridx5:hover, a.coloridx5:hover span { background: var(--theme-gradient-teal-hover); color: white; } a.coloridx5Selected, a.coloridx5Selected span { background: var(--theme-gradient-teal-hover); } a.coloridx6 { background: var(--theme-gradient-mint); } a.coloridx6 span{ background: var(--theme-gradient-mint); color: white; } a.coloridx6:hover, a.coloridx6:hover span { background: var(--theme-gradient-mint-hover); color: white; } a.coloridx6Selected, a.coloridx6Selected span { background: var(--theme-gradient-mint-hover); } a.coloridx7 {background-position: right -345px;} a.coloridx7 span{background-position:left -345px; color: white;} a.coloridx7:hover { background-position: right -368px; color: white;} a.coloridx7:hover span { background-position: left -368px; color: white; } a.coloridx7Selected {background-position: right -368px;} a.coloridx7Selected span {background-position: left -368px;} a.coloridx8 { background: var(--theme-gradient-orange-dark); } a.coloridx8 span{ background: var(--theme-gradient-orange-dark); color: white; } a.coloridx8:hover, a.coloridx8:hover span { background: var(--theme-gradient-orange-hover); color: white; } a.coloridx8Selected, a.coloridx8Selected span { background: var(--theme-gradient-orange-hover); } a.coloridx9 {background-position: right -276px;} a.coloridx9 span{background-position:left -276px; color: white;} a.coloridx9:hover { background-position: right -92px;} a.coloridx9:hover span { background-position: left -92px;} a.coloridx9Selected {background-position: right -92px;} a.coloridx9Selected span {background-position: left -92px;} a.coloridx10 {background-position: right -391px;} a.coloridx10 span{background-position:left -391px; color: white;} a.coloridx10:hover { background-position: right -368px;} a.coloridx10:hover span { background-position: left -368px;} a.coloridx10Selected {background-position: right -368px;} a.coloridx10Selected span {background-position: left -368px;} a.coloridx11 {background-position: right -253px;} a.coloridx11 span{background-position:left -253px; color: white;} a.coloridx11:hover { background-position: right -69px;} a.coloridx11:hover span { background-position: left -69px;} a.coloridx11Selected {background-position: right -69px;} a.coloridx11Selected span {background-position: left -69px;} a.coloridx12 {background-position: right -345px;} a.coloridx12 span{background-position:left -345px; color: white;} a.coloridx12:hover { background-position: right -368px;} a.coloridx12:hover span { background-position: left -368px;} a.coloridx12Selected {background-position: right -368px;} a.coloridx12Selected span {background-position: left -368px;} a.coloridx13 { background: var(--theme-gradient-gray-hover); cursor: default; } a.coloridx13 span{ background: var(--theme-gradient-gray-hover); color: white; } a.coloridx13:hover, a.coloridx13:hover span { background: var(--theme-gradient-gray-hover); color: white; } a.coloridx13Selected, a.coloridx13Selected span { background: var(--theme-gradient-gray-hover); } a.coloridx14 { background: var(--theme-billboard-red); cursor: default; } a.coloridx14 span{ background: var(--theme-billboard-red); color: white; } a.coloridx14:hover, a.coloridx14:hover span { background: var(--theme-billboard-red-hover); color: white; } a.coloridx14Selected, a.coloridx14Selected span { background: var(--theme-billboard-red-hover); } a.coloridx15 { background: var(--theme-billboard-purple); cursor: default; } a.coloridx15 span{ background: var(--theme-billboard-purple); color: white; } a.coloridx15:hover, a.coloridx15:hover span { background: var(--theme-billboard-purple-hover); color: white; } a.coloridx15Selected, a.coloridx15Selected span { background: var(--theme-billboard-purple-hover); } a.coloridx16 { background: var(--theme-billboard-green); cursor: default; } a.coloridx16 span{ background: var(--theme-billboard-green); color: white; } a.coloridx16:hover, a.coloridx16:hover span { background: var(--theme-billboard-green-hover); color: white; } a.coloridx16Selected, a.coloridx16Selected span { background: var(--theme-billboard-green-hover); } a.coloridx17 { background: var(--theme-billboard-disabled); cursor: default; } a.coloridx17 span{ background: var(--theme-billboard-disabled); color: white; } a.coloridx17:hover, a.coloridx17:hover span { background: var(--theme-billboard-disabled); color: white; } a.coloridx17Selected, a.coloridx17Selected span { background: var(--theme-billboard-disabled); } a.coloridx18 { background: var(--theme-gradient-purple-dark); } a.coloridx18 span{ background: var(--theme-gradient-purple-dark); color: white; } a.coloridx18:hover, a.coloridx18:hover span { background: var(--theme-gradient-purple-hover); color: white; } a.coloridx18Selected, a.coloridx18Selected span { background: var(--theme-gradient-purple-hover); } a.coloridx19 { background: var(--theme-gradient-lightpink-dark); } a.coloridx19 span{ background: var(--theme-gradient-lightpink-dark); color: white; } a.coloridx19:hover, a.coloridx19:hover span { background: var(--theme-gradient-lightpink-hover); color: white; } a.coloridx19Selected, a.coloridx19Selected span { background: var(--theme-gradient-lightpink-hover); } a.coloridx20 { background: var(--theme-gradient-lightpurple-dark); } a.coloridx20 span{ background: var(--theme-gradient-lightpurple-dark); color: white; } a.coloridx20:hover, a.coloridx20:hover span { background: var(--theme-gradient-lightpurple-hover); color: white; } a.coloridx20Selected, a.coloridx20Selected span { background: var(--theme-gradient-lightpurple-hover); } a.coloridx21 { background: var(--theme-gradient-lightblue-dark); } a.coloridx21 span{ background: var(--theme-gradient-lightblue-dark); color: white; } a.coloridx21:hover, a.coloridx21:hover span { background: var(--theme-gradient-lightblue-hover); color: white; } a.coloridx21Selected, a.coloridx21Selected span { background: var(--theme-gradient-lightblue-hover); } a.pinkdottedbutton { height: 19px; background: url('https://cdn.gosupermodel.com/images/buttons/log_in_btn_right.png') no-repeat scroll top right; font-size: 9px; margin-right: 4px; padding-right:3px; } a.pinkdottedbutton span { background: transparent url('https://cdn.gosupermodel.com/images/buttons/log_in_btn_left.png') no-repeat top left; color: white; text-decoration: none; line-height: 12px; padding:4px 0 3px 3px; } a.pinkdottedbutton:hover { background: transparent url('https://cdn.gosupermodel.com/images/buttons/log_in_btn_right.png') no-repeat bottom right; } a.pinkdottedbutton:hover span { background-position: left -19px; } .centerwrapper { width: 100%; text-align: center; } .button_spacing_left .button { margin-left: 4px; } .button_spacing_right .button { margin-right: 4px; } #mail_lines{ min-height:265px; background-color:white; } #mail_lines td { height: 24px; border-right: 0; border-top: 0; padding: 0; border-bottom: 1px solid #B3B3B3; padding-left: 7px; } #mail_lines img { vertical-align: middle; } #mail_lines tr { padding: 0; } #mail_lines_top th { border-right: 0; text-align: left; } #mail_lines_top table { border: 0 solid #B3B3B3; } #mail_lines .mousOvhref:hover { background-color:#E6EBFA; } #mail_lines tr { border-top: 1px solid red; border-bottom: 1px solid #B3B3B3; cursor: pointer; } #mail_lines input { margin-right: 1px; } #mail_lines .padright { padding-right: 11px; vertical-align: top; } .scrolllingtable { overflow-y: scroll; overflow-x: hidden; } #mail_item .from_bar { font-size: 11px; color: white; line-height: 17px; font-weight: bold; } #mail_item .mail_content { margin-bottom: 20px; /*overflow: scroll;*/ height: 230px; overflow-x: hidden; overflow-y:auto; } #mail_item .bar_padding { height: 27px; } #mail_item .whitelink { color: white; width: 200px; font-size: 11px; } #mail_item .whitelink a { color: white; text-decoration: none; } #mail_item .whitelink a:hover { text-decoration: none; } #mail_lines .outbox.unread { background-color: #E6C8C8; } #mail_lines .outbox.unread.odd { background-color: #E6C8C8; } #mail_content { padding-left: 7px; padding-right: 7px; } .bar_select { font-size: 11px; line-height: 35px; vertical-align: top; } #mail_lines .maildate{ font-size: 8px; } #mail_lines .mailsubject { line-height:16px; max-height:16px; overflow: hidden; } .auctionmail_itembox { background-color: #343434; border-radius: 5px 5px 5px 5px; } .auctionmail_headline { font-size: 16px; margin: 4px 0 12px; } .auctionmail_headline.blue { color: #8cafd2; } .auctionmail_headline.red { color: #c37d8c; } .auctionmail_itembox_price{ font-size: 20px; } .auctionmail_itembox_price.blue{ color: #8cafd2; } .auctionmail_itembox_price.red { color: #c37d8c; } .auctionmail_item { display: table; width:150px; height:150px; background-image:url('/images/backgrounds/gomessages/auctionitem_bg.png'); } .auctionmail_item_thumb { display:block; margin: 0 auto; max-width: 100px; max-height: 100px; } .auctionmail_itembox_headline { color: white; font-weight:bold; } .auctionmail_itembox_left_column{ color: white; font-weight:bold; width: 50%; } .auctionmail_itembox_right_column{ color: white; width: 50%; } .auctionmail { padding: 12px 12px 36px; } .mail_content .auction_background_won, .mail_content .auction_background_wornout_buyer, .mail_content .auction_background_lost { background-color: #f3e8e6; } .mail_content .auction_background_wornout_seller, .mail_content .auction_background_no_buyer, .mail_content .auction_background_sold { background-color: #f1f6fc } .auction_hr { height: 1px; border: 0 none; background-color: #737373; } .auctionmail_encouragement { margin: 12px 0 0 0; } .auction_currency_icon { width: 22px; height: 22px; vertical-align: bottom; } .promo_bg_nopromo{ background:transparent url("https://cdn.gosupermodel.com/images/billing/promo/no_promo_bg.png") 0 0 no-repeat; width:278px; height:193px; position:relative; color:white; background-size:278px 193px; } .promo_bg_gomoney{ background:transparent url("https://cdn.gosupermodel.com/images/billing/promo/gomoney_only_promo_bg.png") 0 0 no-repeat; width:184px; height:328px; position:relative; color:white; } .promo_bg_dollitem{ background:transparent url("https://cdn.gosupermodel.com/images/billing/promo/item_only_promo_bg.png") 0 0 no-repeat; width:389px; height:402px; position:relative; color:white; } .promo_bg_dollitem_gomoney{ background:transparent url("https://cdn.gosupermodel.com/images/billing/promo/item_gomoney_promo_bg.png") 0 0 no-repeat; width:389px; height:402px; position:relative; color:white; } .promo_bg_dollitem_gomoney_diamonds{ background:transparent url("https://cdn.gosupermodel.com/images/billing/promo/promo_item_gm_diamonds.png") 0 0 no-repeat; width:389px; height:402px; position:relative; color:white; } .promo_bg_gomoney_diamonds{ background:transparent url("https://cdn.gosupermodel.com/images/billing/promo/promo_gm_diamonds.png") 0 0 no-repeat; width:389px; height:402px; position:relative; color:white; } .payment_methods{ width:130px; height:92px; position:absolute; } .payment_methods table{ width:100%; height:100%; } .promo_bg_nopromo .payment_methods{ top:78px;left:20px; } .promo_bg_dollitem_gomoney .payment_methods{ left: 227px; top: 265px; } .promo_bg_dollitem_gomoney_diamonds .payment_methods{ left: 227px; top: 265px; } .promo_bg_gomoney .payment_methods{ left: 15px; top: 198px; } .promo_bg_dollitem .payment_methods{ left: 228px; top: 266px; } .promo_bg_gomoney_diamonds .payment_methods{ left:15px; top:195px; } .payment_methods td{ padding:3px; } .payment_methods tr{ align:center; } .promo_mouseover_header{ font-size:12px; position:absolute; } .promo_bg_nopromo .promo_mouseover_header{ top:7px;left:15px;width: 162px; } .promo_mouseover_header p{ font-size:11px;font-weight:normal;max-width:337px;max-height:29px;padding-top: 14px; } .promo_bg_dollitem_gomoney .promo_mouseover_header{ top:10px;left:15px; } .promo_bg_dollitem_gomoney_diamonds .promo_mouseover_header{ top:10px;left:15px; } .promo_bg_gomoney .promo_mouseover_header{ top:10px;left:15px;width: 162px; } .promo_bg_dollitem .promo_mouseover_header{ top:10px;left:15px; } .promo_bg_gomoney_diamonds .promo_mouseover_header{ top: 10px; left:15px; } .payment_method_title{ font-size: 13px; height: 19px; overflow: hidden; position: absolute; width: 153px; font-weight: bold; } .promo_bg_nopromo .payment_method_title{ left: 15px;top: 45px; } .promo_bg_dollitem_gomoney .payment_method_title{ left: 219px;top: 235px; } .promo_bg_dollitem_gomoney_diamonds .payment_method_title{ left: 219px;top: 238px; } .promo_bg_gomoney .payment_method_title{ left: 15px;top: 169px; } .promo_bg_dollitem .payment_method_title{ left: 219px;top: 235px; } .promo_bg_gomoney_diamonds .payment_method_title{ left:15px; top:169px; } .promo_gomoney{ font-size:13px; position:absolute; } .promo_gomoney p{ color:white; font-weight: bold; } .promo_gomoney div{ color: #D6539A; margin-left: 31px; margin-top: 20px; text-align: center; width: 86px; } .promo_diamonds{ font-size:13px; position:absolute; } .promo_diamonds p{ color:white; font-weight: bold; top: 100px; } .promo_diamonds div{ color: #D6539A; margin-left: 31px; margin-top: 20px; text-align: center; width: 86px; top: 100px; } .promo_bg_dollitem_gomoney .promo_gomoney{ left: 218px;top: 62px; } .promo_bg_dollitem_gomoney_diamonds .promo_gomoney{ left: 218px;top: 62px; } .promo_bg_dollitem_gomoney_diamonds .promo_diamonds{ left: 218px;top: 152px; } .promo_bg_gomoney_diamonds .promo_gomoney{ left:15px; top:70px; } .promo_bg_gomoney_diamonds .promo_diamonds{ left: 190px; top:70px; } .promo_bg_gomoney .promo_gomoney{ left: 15px;top: 92px; } .promo_bg_gomoney .promo_gomoney div{ margin-top: 11px; } .promo_items{ position:absolute } .promo_items p{ font-size:13px; color:white; font-weight: bold; } .promo_items img{ padding-left:29px; } .promo_bg_dollitem_gomoney .promo_items,.promo_bg_dollitem .promo_items{ left: 15px;top: 62px; } .promo_bg_dollitem_gomoney_diamonds .promo_items,.promo_bg_dollitem .promo_items{ left: 15px;top: 62px; } table.product_box td { width: 174px; background: url('https://cdn.gosupermodel.com/images/billing/product_box_bg_large.jpg') 0 0 no-repeat; padding-left: 0; vertical-align: top; border-radius: 12px 12px 0 0; } div.product_title_box { height: 116px; margin-left: 0; font-size: 13px; font-weight: bold; position:relative; } div.product_title_box div { line-height: 20px; font-size: 17px; color: #5f5e5e; } div.product_title_period { margin-left: 7px; margin-bottom: 7px; line-height: 20px; font-size: 17px; color: #cb3782; } table.product_box td.product_title_box_space { width: 7px; background: none; } div.product_title_box div.period_text { position:absolute; top:4px; left:18px; font-size:12px; text-align:center; color:#5f5e5e; width:150px; } div.product_title_box div.diamond_text{ position:absolute; top:37px; left:0; font-size:40px; color:#cb3782; width:100px; text-align:right; line-height:40px; } div.product_title_box div.gomoney_text{ position:absolute; top:80px; left:0; font-size:24px; color:#5f5e5e; width:106px; text-align:right; line-height:27px; } div.product_description { background: url('https://cdn.gosupermodel.com/images/billing/membership_top_box_bg.jpg') 0 0 no-repeat; width: 695px; height: 119px; font-weight: bold; padding: 14px 0 0 21px; border-radius: 10px; margin-bottom: 5px; color: #545454; } div.product_description div.bullets_title { font-size:26px; } div.product_description div.bullet { font-size:18px; } #payment label img { max-width:65px; } .payment_methods td img { max-width: 40px; } .billing_paymentlogo td img,.billing_paymentlogo_accept td img { max-width: 58px; max-height: 36px; } #bar { background: url('https://cdn.gosupermodel.com/images/membership/bar.jpg') no-repeat; position: absolute; top: 36px; left: 73px; height: 35px; } .productInfoDiv { position: absolute; top: 0; left: 543px; width: 172px; height: 230px; } .goPackDiv { position:relative; width: 356px; height:244px; border-radius:10px; } #goPackPrice { position: absolute; right: 0; font-size: 16px; font-family: Verdana, sans-serif; color: rgb(0,0,126); padding: 10px; z-index: 1; } .carouselContainer { position: absolute; bottom: 5px; right: 10px; width: 240px; cursor: pointer; } .noGoPackDiv, .goPackDiv { overflow: hidden; position: relative; width: 349px; height: 232px; border-radius: 10px; background-size: 364px auto; border: 1px solid var(--theme-theme-gray); } .noGoPackDiv { background-image: url('https://cdn.gosupermodel.com/images/billing/gopacks/gopack_filler.jpg'); background-repeat: no-repeat; background-size: 364px auto; background-position: -6px; margin-top: 5px; } .pinballRefillDiv { position: relative; width: 173px; height: 232px; border-radius: 10px; background: url('https://cdn.gosupermodel.com/images/billing/gopacks/pinball_bg.jpg') no-repeat -7px -8px; background-size: 364px auto; padding-left: 176px; margin-top: 5px; border: 1px solid var(--theme-theme-gray); } .mouseOverDiv { display:none; } .endDateDiv { float: left; width: 360px; margin-right: 14px; } .topupMannequinDiv { overflow: hidden; position: relative; background: url('https://cdn.gosupermodel.com/images/billing/new_ootm_bg.png') no-repeat 0 0; width: 718px; height: 232px; margin-top: 7px; border-radius: 9px; } .goPackTimer { position: absolute; background-color: white; bottom: 5px; left: 5px; padding: 2px 10px; border-radius: 0 10px 0 5px; border-bottom: 1px solid black; color: #545454; } .link-container { margin-top: 10px; width:370px; } #referral-link { padding: 10px; font-size: 12px; margin-bottom: 20px; border-radius: 5px; border: none; padding: 5px; border-radius: 5px; width: 300px; } /* Copyright (c) 2010, Yahoo! Inc. All rights reserved. Code licensed under the BSD License: http://developer.yahoo.com/yui/license.html version: 2.8.1 */ .yui-overlay, .yui-panel-container { visibility:hidden; position:absolute; z-index: 2; } .yui-tt { visibility:hidden; position:absolute; color:#333; background-color:#FDFFB4; font-family:arial,helvetica,verdana,sans-serif; padding:2px; border:1px solid #FCC90D; font:100% sans-serif; width:auto; } /* PLEASE NOTE: The
element used for a Tooltip's shadow is appended to its root element via JavaScript once it has been rendered. The code that creates the shadow lives in the Tooltip's public "onRender" event handler that is a prototype method of YAHOO.widget.Tooltip. Implementers wishing to remove a Tooltip's shadow or add any other markup required for a given skin for Tooltip should override the "onRender" method. */ .yui-tt-shadow { display: none; } * html body.masked select { visibility:hidden; } * html div.yui-panel-container select { visibility:inherit; } * html div.drag select { visibility:hidden; } * html div.hide-select select { visibility:hidden; } .mask { z-index: 1; display:none; position:absolute; top:0; left:0; -moz-opacity: 0.5; opacity:.50; filter: alpha(opacity=50); background-color:#CCC; } /* There are two known issues with YAHOO.widget.Overlay (and its subclasses) that manifest in Gecko-based browsers on Mac OS X: 1) Elements with scrollbars will poke through Overlay instances floating above them. 2) An Overlay's scrollbars and the scrollbars of its child nodes remain visible when the Overlay is hidden. To fix these bugs: 1) The "overflow" property of an Overlay instance's root element and child nodes is toggled between "hidden" and "auto" (through the application and removal of the "hide-scrollbars" and "show-scrollbars" CSS classes) as its "visibility" configuration property is toggled between "false" and "true." 2) The "display" property of