/* Theme Name: Habbox 2025 Theme URI: http://www.habbox.comwp Description: Version seven of Habbox Author: Laura, Joe. Founding authors: Kieran, Chippiewill, Skynus, Recursion, Joe License: Habbox V7 can not be copied and/or distributed without the express permission of Habbox General Management License URI: http://www.habbox.com */ /* '##::::'##::::'###::::'########::'########:::'#######::'##::::'##: ##:::: ##:::'## ##::: ##.... ##: ##.... ##:'##.... ##:. ##::'##:: ##:::: ##::'##:. ##:: ##:::: ##: ##:::: ##: ##:::: ##::. ##'##::: #########:'##:::. ##: ########:: ########:: ##:::: ##:::. ###:::: ##.... ##: #########: ##.... ##: ##.... ##: ##:::: ##::: ## ##::: ##:::: ##: ##.... ##: ##:::: ##: ##:::: ##: ##:::: ##:: ##:. ##:: ##:::: ##: ##:::: ##: ########:: ########::. #######:: ##:::. ##: Site Name: Habbox Version Eight Version: 8.0 File Name: Build.css - Main Site CSS Frontend Coding: lawrawrrr (Laura), LiquefiedFilth (Joe Zalewski) Archival frontend coding: Intricat (Kieran Eves) & Skynus (Tom Wells) Backend Coding: Recursion (Tom Ferguson) & William (Chippiewill) Design: lawrawrrr (Laura) ------ TABLE OF CONTENTS ------ 01. BOILER PLATE 1. CSS Reset 2. General 2.0 Logo and scene 3. List Styles 01. GENERAL 1. Structure 2. Navigation 3. Home Images 4. Top Bar 5. Radio Player 6. Alert Bar 7. Tooltip 8. Buttons 9. Fonts 10. Header 10.1 Header Colours 11. Banner 12. News 13. Comments 14. Full Width 15. Widget Area 16. Profiles 17. Forms 18. Message (system) 19. Staff List 20. Imager 21. Notice 22. Footer 23. Login page X. Misc ------------------------------- */ /* ------------------------------------------------------------------------------------------------------------------------------------- */ /* 01. BOILER PLATE */ /* ------------------------------------------------------------------------------------------------------------------------------------- */ /* ------ 1. CSS Reset ------ */ html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,address,code,del,dfn,em,img,q,dl,dt,dd,ol,ul,li,table,caption,tbody,tfoot,thead,tr,th,td,br,fieldset,textarea{margin:0;padding:0;border:0;vertical-align:baseline;} html{height:100%;} address,form{margin:0} h1,h2,h3,h4,h5,h6,hr{margin:0;} h2, h3, h4 {margin-bottom: 15px;font-weight: 500;} p{width:100%;margin-top:0px;margin-bottom:20px;} /* REMEMBER PARAGRAPH MARGIN-TOP IS HERE! */ strong, b{font-weight:bold;} em, dfn, i{font-style:italic;} textarea{font-family:verdana;font-size:10px;} table {width: fit-content!important;width:-moz-max-content!important; margin: auto;} img {max-width: 100%;height: auto;object-fit: scale-down;} #posts {width:100%!important} #posts td {max-width:150px} #slots {width:100%!important} #slots td {max-width:200px} :focus {outline: 0px;} .borders td {border: 1px solid #717171;padding: 5px;} .borders {border-collapse: collapse;} .borders tr:first-of-type {background: #8c8c8c;color: white;} blockquote {margin-left: 20px;border-left: 5px solid #e6e6e6;padding-left: 20px;} blockquote::before {font-family: Arial;content: "\201C";color: #dadada;font-size: 5em;height: 35px;overflow: hidden;line-height: 1;vertical-align: 13px;display: block;} /* ------ 2. General ------ */ body{background: #eaeae6;font-size: 10pt;color: #333333;margin:0px;font-family: Verdana;} #content{width: 80%; margin: auto; font-family: 'Ubuntu', sans-serif;margin-top: 30px;} a:link,a:visited,a:hover,a:active,a:focus{text-decoration:none;outline:none;} a{color:#ef8a1a;} a:hover{color:black;} .preload{display:none;} /* ------ 3. List Styles ------ */ ul,li{list-style:none;list-style-type:none;} ul.arrow_list,ul.arrow_list li,ul.check_list,ul.check_list li{margin-left:0;list-style:none;} ol{float:left;} /* ------------------------------------------------------------------------------------------------------------------------------------- */ /* 02. GENERAL */ /* ------------------------------------------------------------------------------------------------------------------------------------- */ /* ------ 0. SPOTLIGHTS AND SCENE ------*/ /*HXSS #logo {background: url(/hxsshub/images/hxss25logo.png)no-repeat center;width: 40%;height: 100%;display: inline-block;margin-top: -400px;} #scene-wrapper-left {background: url(/hxsshub/images/hxss-left-25.png) left bottom no-repeat;height: 400px;max-height: 400px;max-width: 476px;width: 30%;display: inline-block;} #scene-wrapper {background: linear-gradient(#4392e7, #61ace6, #6cc0e8, #98cfe2, #84cedc, #a3e4ef);height: 400px;} #scene-wrapper-right {background: url(/hxsshub/images/hxss-25-right.png) right bottom no-repeat;height: 400px;max-height: 400px;display: inline-block;width: 29%;float:right;} */ /*DEFAULT #logo {background: url(/wp-content/themes/habboxv7/images/logos/HABBOX_LOGO.png)no-repeat center;width: 40%;height: 100%;display: inline-block;margin-top: -400px;} #logo:hover {background: url(/wp-content/themes/habboxv7/images/logos/HABBOX_LOGO_WAVE.gif)no-repeat center;} #scene-wrapper-left {background: url(images/left/habboxair.gif) right bottom no-repeat;height: 400px;max-height: 400px;width: 30%;display: inline-block;} #scene-wrapper {background: linear-gradient(#4392e7, #61ace6, #6cc0e8, #98cfe2, #84cedc, #a3e4ef);height: 400px;} #scene-wrapper-right {background: url(images/right/hotel.png) right no-repeat;height: 350px; max-height: 350px;display: inline-block;width: 30%;} */ /* JUBILEE #logo {background: url(/wp-content/themes/habboxv7/images/logos/habbox-logo-jubilee.png)no-repeat center;width: 40%;height: 100%;display: inline-block;margin-top: -400px;} #logo:hover {background: url(/wp-content/themes/habboxv7/images/logos/habbox-logo-jubilee.gif)no-repeat center;} #scene-wrapper-left {background: url(images/left/jubilee-left.png) left bottom no-repeat;height: 400px;max-height: 400px;width: 30%;display: inline-block;} #scene-wrapper {background: linear-gradient(#4392e7, #61ace6, #6cc0e8, #98cfe2, #84cedc, #a3e4ef);height: 400px;} #scene-wrapper-right {background: url(images/right/hotel.png) right no-repeat;height: 350px; max-height: 350px;display: inline-block;width: 30%;} */ /* EASTER #logo {background: url(/wp-content/themes/habboxv7/images/logos/EASTER_LOGO_2022.png)no-repeat center;width: 40%;height: 100%;display: inline-block;margin-top: -400px;} #scene-wrapper-left {background: url(images/left/eggs.png) left bottom no-repeat;height: 400px;max-height: 400px;width: 30%;display: inline-block;} #scene-wrapper {background: linear-gradient(#fbbf7a,#fffdd3,#dbf9cd,#cfe8f9,#f1ecff,#f8bfe8);height: 400px;} #scene-wrapper-right {background: url(images/right/hotel.png) right no-repeat;height: 350px; max-height: 350px;display: inline-block;width: 30%;opacity:0.5} */ /*HALLOWEEN #logo {background: url(/wp-content/themes/habboxv7/images/logos/HABBOXWEEN_LOGO.png)no-repeat center;width: 40%;height: 100%;display: inline-block;margin-top: -400px;} #scene-wrapper-left {background: url(images/left/hxween-zombies-left-4.png) left top no-repeat;height: 400px;max-height: 400px;width: 30%;display: inline-block;} #scene-wrapper {background: linear-gradient(#7a7a79, #ae9e8c, #938275, #726e6b, #555049, #272420);height: 400px;} #scene-wrapper-right {background: url(images/right/hween_hotel3.png) right no-repeat;height: 350px; max-height: 350px;display: inline-block;width: 30%;opacity:0.6} */ /*WINTER*/ #logo {background: url(/wp-content/themes/habboxv7/images/logos/HABBOX_SNOW_LOGO.gif)no-repeat center;width: 40%;height: 100%;display: inline-block;margin-top: -400px;} #logo:hover {background: url(/wp-content/themes/habboxv7/images/logos/HABBOX_SNOW_LOGO_LIGHTS.gif)no-repeat center;} #scene-wrapper-left {background: url(images/left/snow.png) left bottom no-repeat;height: 400px;max-height: 400px;width: 30%;display: inline-block;} #scene-wrapper {background: linear-gradient(#19507e, #2671a9, #4ca4dc, #81b8da, #bbe9f7, #ade3f6);height: 400px;} #scene-wrapper-right {background: url(images/right/hotel-winter.png) right no-repeat;height: 350px; max-height: 350px;display: inline-block;width: 30%;opacity:0.6} /* VALENTINES #logo {background: url(/wp-content/themes/habboxv7/images/logos/VALENTINES_LOGO.png)no-repeat center;width: 40%;height: 100%;display: inline-block;margin-top: -400px;} #scene-wrapper-left {background: url(images/left/vals-date.png) left bottom no-repeat;height: 400px;max-height: 400px;width: 30%;display: inline-block;} #scene-wrapper {background: linear-gradient(#ffcfd7,#e196ae,#db82ab,#cb6d98,#ab527a,#93535d);height: 400px;} #scene-wrapper-right {background: url(images/right/hotel-vals.png) right no-repeat;height: 350px; max-height: 350px;display: inline-block;width: 30%;opacity:0.5} */ /*MOBILE OPTIMISATION */ @media only screen and (max-width: 960px) { #news-wrapper {width:100%!important;} #columns {width: 99%!important;} ul#column1 {padding:0px!important;margin:5% 0!important} #scene-wrapper-left, #scene-wrapper-right {display:none!important} #logo {width:100%!important;margin-top:0px!important;image-rendering: pixelated;} } /* ------ 1. Structure ------ */ #page-wrapper{width:100%;height:100%;margin:0 auto 0;} /* ------ 2. Navigation ------ */ /* ------ 2. Navigation ------ */ #menu-bar { display: flex; align-items: center; justify-content: flex-end; position: relative; gap: 16px; margin: 0 10%; } #navigation { font-family: Verdana; font-size: 10px; font-weight: bold; color: #615E5E; margin-left: 15px; float: left; } #access { font-family: Verdana; font-size: 10px; font-weight: bold; color: #615E5E; float: left; flex: 1 1 auto; /* allow nav to take remaining space */ } #access ul { font-family: Verdana; font-size: 10px; font-weight: bold; color: #615E5E; float: left; margin: 0px; } #access li { float: left; font-family: Ubuntu; font-size: 13px; padding: 8px 0px; height: fit-content; } #access li:hover { background: #00000070; } #access a { display: block; padding: 12px; margin-top: 1px; padding-top: 6px; color: #ffffffc7; float: left; width: 100%; } #access ul ul { display: none; margin: 0; position: absolute; max-width: 188px; padding: 0px; z-index: 2; } #access ul li:hover > ul { display: block; } ul.sub-menu { top: 50px; } ul.sub-menu > li { padding: 2px 0px !important; background: #000000ba; width: 180px; } ul.sub-menu li a { padding-left: 10% !important; } ul.user-options { display: none; } .user-options { padding: 0px; display: block; color: #ffffffc7; font-weight: bold; } .user-options li:hover { background: #00000047; } .user-options form { width: 100%; max-width: 174px; } .user-options > ul { min-width: 160px; } .user-options > li, .user-options form li { padding: 9px 20px !important; background: #000000ba; display: block; color: #ffffffc7; font-weight: bold; max-width: 174px; width: 100%; cursor: pointer; } /* Spacer before user-hello to mimic "right: 12%" */ .menu-spacer { flex: 0 0 12%; /* this pushes user-hello left from the right edge */ } .user-hello { display: flex; align-items: center; gap: 8px; padding: 15px 15px 15px 0; font-family: 'Ubuntu', sans-serif; font-size: 14px; font-weight: 500; height: 20px; color: #fff; background: #0000008c; white-space: nowrap; flex: 0 0 auto; z-index: 20; } .user-hello > ul { display: none; margin-top: 185px; position: absolute; z-index: 25; width: 8.5%; } .user-hello:hover > ul { display: block; } /* ========================= MINI RADIO PLAYER ========================= */ #mini-radio { display: flex; align-items: center; gap: 8px; padding: 15px; font-family: 'Ubuntu', sans-serif; font-size: 14px; font-weight: 500; height: 20px; color: #fff; background: #0000008c; white-space: nowrap; flex: 0 0 auto; z-index: 10; margin-right: 16px; } #mini-radio button { background: none; border: none; color: #fff; font-size: 14px; cursor: pointer; padding: 0; } #mini-radio button:hover { opacity: 0.8; } .mini-radio-meta { display: flex; flex-direction: column; line-height: 1.1; overflow: hidden; } #mini-radio-song { max-width: 120px; overflow: hidden; text-overflow: ellipsis; } #mini-radio-listeners { opacity: 0.7; font-size: 11px; display:none; } #dj-live-indicator { display: inline-block; width: 10px; height: 10px; margin: 0px 5px; border-radius: 50%; background-color: red; animation: quick-pulse 3s infinite; /* 5s cycle */ vertical-align: middle; } /* Offline state */ #dj-live-indicator.offline { background-color: #999; animation: none; } @keyframes quick-pulse { 0%, 84%, 100% { /* stay still most of the time */ transform: scale(1); opacity: 1; } 85%, 90% { /* quick pulse window (5% of 5s = 0.25s) */ transform: scale(1.2); opacity: 0.6; } } /* === Mobile stacking === */ @media (max-width: 768px) { #menu-bar { flex-direction: column; align-items: flex-start; } #mini-radio { order: -1; width: 100%; max-width: 100%; justify-content: center; padding: 6px 0; border-bottom: 1px solid rgba(255,255,255,0.15); } .mini-radio-meta { align-items: center; } .user-hello { width: 100%; justify-content: center; } } /* Mobile menu */ .toggle-nav { display: none !important; } @media screen and (max-width: 580px) { .toggle-nav { display: inline-block !important; float: left; margin: 7px; font-size: 2em; transition: color linear 0.15s; } a.toggle-nav:link, a.toggle-nav:visited, a.toggle-nav:hover, a.toggle-nav:active { text-decoration: none; color: #fff; } #access { display: inline-block; position: relative; text-align: left; } #access ul { display: none; z-index: 999; margin-top: 50px; margin-left: -40px; width: 140px; position: absolute; } #access ul li { padding: 0px; background: #0000009e; } #access ul li ul { display: none !important; } #access a { float: none; display: block; position: relative; top: 0px; width: 120px; text-align: left; padding: 9px 8px !important; } #access li:after { content: none; } #menu-habbox li:first-of-type { display: none; } #access ul li:hover > ul { display: inline-block !important; margin-left: 136px; } ul.sub-menu > li { width: 125px; } } /*Mobile font-size optimizations*/ @media only screen and (max-width: 1150px) { #access li, .user-hello, #mini-radio { font-size: 12px; } } @media only screen and (max-width: 1072px) { #access li, .user-hello, #mini-radio { font-size: 11px; } } @media only screen and (max-width: 960px) { #access a { padding: 10px 8px !important; } } /* Other small tweaks */ .hxlavatar { float: right; } .wpematico_credit { display: none; } /* ------ 3. Home images ------ */ /* -- New Homepage -- */ .featured-content {background: white;height: 360px;width: 100%;display:flex;image-rendering: pixelated;} .featured-content .thumbnail {float:left;height: 100%;width: 80%;object-fit: cover;background-position: center} .post-badge {margin: 10px; padding: 10px; width: 30px;height: 30px;} @media only screen and (max-width: 960px) {.featured-content {display: block;} .featured-content .news-wrapper {height: fit-content;} #home-goodies-item {width: 100%;}} .homepage #featured #news-node { width: 100%; } .homepage #news-node { float: left; vertical-align: top; margin: 10px 0px; width: 33%; } .homepage #featured #news-node { margin: 0px; width:100%; } .homepage #listing .news-header-wrapper { font-size: 16px; font-weight: 500; height: 40px; } .homepage #listing .news-wrapper { min-height: 220px; } .listing-title {color:#fff} .listing-title:hover {color:#252525ad} .comment-home { background: url(/wp-content/themes/habboxv7/images/icons/comment.gif) no-repeat 1px; padding-left: 29px; height: 18px; float:left; } .post-ratings img { vertical-align: top; opacity: 0.8; } .post-ratings, .comment-link { width: 50px!important; font-weight: bold; display: inline-block; margin-left: 2%; height: 14px; float:left; } .home-footer { display: inline-block; background: url(/wp-content/themes/habboxv7/images/headers/search.png),linear-gradient(140deg,#252525 50%,#505050 50%,#505050 70%,#717171 70%,#717171 85%,#9c9c9c 85%,#9c9c9c 100%); width: 100%; padding: 10px 0; float: left; font-size: 15px; color: #fff; } .news-read { display: inline-block; width: 85px; margin: 0% 5%; background: url(/wp-content/themes/habboxv7/images/icons/read-more.png) no-repeat; padding-left: 22px; font-weight: bold; float: right; } .news-read:hover, .comment:hover {opacity:0.8} .news-read a {color:#fff} .news-read a:hover, .comment:hover {color:#ef8a1a} .news-article {padding:0px} .tags a { color: #fff; background: #bbbbbb; padding: 5px 10px; margin: 10px 0px; display: inline-block; } .tags a:hover {background: #b1620b;} .news-author { margin: 10px 0px;} .secondary:nth-of-type(2) { margin-right: 0; } .news-secondary { margin-top: 20px; } .secondary { width: 49%; float: left; margin-right: 2%; } .secondary .featured-content { display: block; } .secondary .news-header-wrapper { font-size: 16px; height: 30px; line-height: 30px; } .secondary img { display: none; } #home-rares{ background-color:#fff; } .home-rares-header { background: url(/wp-content/themes/habboxv7/images/headers/furni.png),linear-gradient(140deg,#0a8462 50%,#1a9a82 50%,#1a9a82 70%,#39b593 70%,#39b593 85%,#63ccaf 85%,#63ccaf 100%); width: 94%; color: #fff; font-size: 20px; padding: 2% 3%; margin-top: 20px; margin-bottom:20px; } .home-rare-products, .home-rare-feat { display: inline-block; width: 96%; margin:0 2%; } .home-rare-products .furni-widget-display { width: 7.1%; height: 30px; margin: 5px 0; } .home-rare-product h3 { background: url(/wp-content/themes/habboxv7/images/headers/furni.png); background-color: #333; width: 100%; padding: 10px 0px; color: #fff; font: 700 10pt Ubuntu; text-align: center; margin: 0px; } .home-rare-feat-product { float: left; width: 49%; margin-right: 2%; } .home-rare-feat-product:nth-of-type(2) { margin-right: 0; } .home-rare-feat .home-rare-product { width: 100%; } div.price { background: url(/wp-content/themes/habboxv7/images/icons/coins.gif); background-repeat: no-repeat; background-position: 5px center; text-align: left; padding-left: 26px; margin: auto; display: inline-block; } .home-rare-product { width: 19.2%; margin-right: 1%; height: 100px; position: relative; overflow: hidden; float: left; background: url(/wp-content/uploads/2017/10/productgrid.png); margin-bottom:10px; } .home-rare-products a:nth-of-type(5n) > .home-rare-product { margin-right: 0px; } .home-rare-products-price { background-color: #3336; width: 100%; padding-top: 4px; padding-bottom: 5px; color: #fff!important; font-weight: 700; display: block; position: absolute; bottom: 0; text-align: center; } .home-rare-product img { width: 100%; height: 100%; object-fit: none; image-rendering: pixelated; } #home-goodies { display: inline-block; } .home-goodies-header { background: url(/wp-content/themes/habboxv7/images/headers/wiki.png),linear-gradient(140deg, #542590 50%, #6735a7 50%, #6735a7 70%, #7641b9 70%, #7641b9 85%, #935bda 85%, #935bda 100%); width: 94%; color: #fff; font-size: 20px; padding: 2% 3%; margin-top: 20px; } .home-goodies-content { background: #fff; display: inline-block; width: 95%; padding: 0 2.5% 2.5%; min-height:150px; } #home-goodies > div:first-of-type { margin-right: 2%; } #home-goodies-item { width: 49%; float: left; } #home-goodies-item img { float: left; margin: 0% 5% 5% 3%; } a.goodies-button { display: inline-block; color: rgb(255, 255, 255); font-weight: bold; background: url(/wp-content/themes/habboxv7/images/headers/general.png) rgb(239, 138, 26); padding: 15px 20px; } a.goodies-button a:hover { background: url(/wp-content/themes/habboxv7/images/headers/general.png) rgb(185, 108, 21); } .all-articles { background: url(/wp-content/themes/habboxv7/images/headers/general.png) #ef8a1a; border: 0; cursor: pointer; margin: 10px 0px 0px; padding: 15px 0; color: #fff; font-family: ubuntu; font-weight: 700; display: inline-block; text-align:center; width:100% } div#listing { display: inline-block; } @media only screen and (min-width: 600px) and (max-width: 900px) { #news-node { width: 100%;} #home-goodies-item {width: 100%;} .home-rare-products .home-rare-product {width: 32%;margin-right: 2%!important;} .home-rare-products a:nth-of-type(3n) > .home-rare-product {margin-right: 0!important;} .home-rare-products a:nth-of-type(10) > .home-rare-product {display: none;} .home-guides-item {width: 49%;margin-right: 2%!important;} .home-rare-products a:nth-of-type(2n) > .home-guides-item {margin-right: 0px!important;} } @media only screen and (min-width: 20px) and (max-width: 600px) { .home-rare-feat-product {width: 100%;} .home-rare-products .home-rare-product {width: 49%;margin-right: 2%!important;} .home-rare-products a:nth-of-type(2n) > .home-rare-product {margin-right: 0!important;} .home-rare-products a:nth-of-type(n+5) > .home-rare-product {display: none;} .home-rare-products .furni-widget-display {width:14%} .secondary {width: 100%;margin-right: 0px;margin-bottom: 10px;} } .home-guides-header { background: url(/wp-content/themes/habboxv7/images/headers/question.png),linear-gradient(140deg,#0f157d 50%,#2827a7 50%,#2827a7 70%,#4745ca 70%,#4745ca 85%,#7b79de 85%,#7b79de 100%); width: 94%; color: #fff; font-size: 20px; padding: 2% 3%; margin-top: 20px; } .home-guides-item, .home-art-item { width: 31%; margin-right: 2%; height: 150px; position: relative; overflow: hidden; float:left; margin-bottom:20px; } .home-rare-products a:nth-of-type(3n) > .home-guides-item { margin-right: 0; } @media only screen and (max-width: 600px) {.home-guides-item {width: 49%;}.home-rare-products a:nth-of-type(3n) > .home-guides-item {margin-right: 2%; }.home-rare-products a:nth-of-type(2n) > .home-guides-item {margin-right: 0%;}} .home-guides-item h3 { background: url(/wp-content/themes/habboxv7/images/headers/question.png); background-color: #333; width: 96%; padding: 10px 2%; color: #fff; font: 500 11pt Ubuntu; text-align: center; margin-bottom:0px; } .home-art-item h3 { background: url(/wp-content/themes/habboxv7/images/headers/artist.png); background-color: #333; width: 96%; padding: 10px 2%; color: #fff; font: 500 11pt Ubuntu; text-align: center; margin-bottom:0px; } .guides-image { width: 100%; height: 100%; image-rendering: pixelated; opacity: 0.4; } .guides-image:hover { opacity: 1; } .hidden {display: none;} .hxss-item { width: 24%; margin-right: 0.5%; height: 190px; position: relative; overflow: hidden; float:left; background:url(https://habbox.com/wp-content/uploads/2017/10/productgrid.png); } .hxss-item h3 { background: url(/wp-content/themes/habboxv7/images/headers/stars.png) center,linear-gradient(140deg,#d0ac13 40%,#c3a110 40%,#c3a110 55%,#b7970c 55%,#b7970c 70%,#a78a0b 70%,#a78a0b 85%,#927d09 85%,#927d09 100%); image-rendering: pixelated; background-color: #333; width: 96%; padding: 10px 2%; color: #fff; font: 700 10pt Ubuntu; text-align: center; margin:0; } .hxss-awards { background: url(/wp-content/themes/habboxv7/images/headers/stars.png) center,linear-gradient(140deg,#d0ac13 40%,#c3a110 40%,#c3a110 55%,#b7970c 55%,#b7970c 70%,#a78a0b 70%,#a78a0b 85%,#927d09 85%,#927d09 100%)!important; } a.hxss.button { padding: 10px 1%; color: #ffffff; font-weight: bold; text-align: center; font-size: 11pt; display: inline-block; width: 12%; margin: 1%; font-family: 'Ubuntu'; } .hxss-buttons-intro { font-size: 120%; font-weight: bold; margin: auto; text-align: center; font-family: 'Ubuntu'; } a.hxss.button:nth-of-type(12n+1),a.hxss.button:nth-of-type(12n+5){background:url(/wp-content/themes/habboxv7/images/headers/tickets.png),linear-gradient(140deg,#d01818 40%,#b71111 40%,#b71111 55%,#9c0e0e 55%,#9c0e0e 70%,#840c0c 70%,#840c0c 85%,#6b0505 85%,#6b0505 100%)} a.hxss.button:nth-of-type(12n+2),a.hxss.button:nth-of-type(12n+6){background:url(/wp-content/themes/habboxv7/images/headers/tickets.png),linear-gradient(140deg,#5ba5e0 40%,#4997d6 40%,#4997d6 55%,#3689cc 55%,#3689cc 70%,#277bbf 70%,#277bbf 85%,#1664a2 85%,#1664a2 100%)} a.hxss.button:nth-of-type(12n+3),a.hxss.button:nth-of-type(12n+7){background:url(/wp-content/themes/habboxv7/images/headers/tickets.png),linear-gradient(140deg,#7ace63 40%,#67bf4f 40%,#67bf4f 55%,#51ab38 55%,#51ab38 70%,#3e9426 70%,#3e9426 85%,#267111 85%,#267111 100%)} a.hxss.button:nth-of-type(12n+4), a.hxss.button:nth-of-type(12n+8){background:url(/wp-content/themes/habboxv7/images/headers/tickets.png),linear-gradient(140deg,#6f6f6f 40%,#636363 40%,#636363 55%,#525252 55%,#525252 70%,#464646 70%,#464646 85%,#383838 85%,#383838 100%)} @media only screen and (min-width: 20px) and (max-width: 600px){ a.hxss.button {width: 45%;} } .header-link {color:#fff} .header-link:hover {color:#ffffffa3} .pageheader { font-family: Ubuntu; font-size: 60px; color: #45423b; text-align: center; text-transform: lowercase; width: 100%; display: inline-block; margin-bottom: 15px; } /* ------ 4. Top Bar ------ */ #topbar-wrapper { background: #000000ba; height: 50px; width: 100%; z-index: 9999; } #topbar-inner-wrapper{width:95%;margin-left:5%;color:#FFF;} .topbar-radio-text{font-family:'Ubuntu',sans-serif;margin-top:17px;float:left;font-weight:bold;margin-left: 15px;} .topbar-divider{background:url(images/topbar_divider.png) no-repeat;width:2px;height:23px;margin:8px 0 0 20px;float:left;} #topbar-twitter{background:url(images/topbar_twitter.png) no-repeat;width:25px;height:24px;margin:8px 0 0 20px;float:right;} /* ------ 5. Radio Player ------ */ #radioinformation-wrapper { height: 100%; padding: 0 2.5%; color: #7e7e7e; font-size: 22px; font-weight: 500; } #radio-player li {display: inline-block;padding-right:8%} #radio-wrapper {width: 80%;background: #fff;height: fit-content;margin: 0 10%;border: solid #ccc;border-width: 0 10px;font-family: ubuntu,sans-serif;text-align: left;display: inline-block;box-sizing: border-box; max-width:1545px;} #radio-play{width: 0px;height: 0px;border-top: 15px solid transparent;border-bottom: 15px solid transparent;border-left: 20px solid #ccc;cursor:pointer;float:left;} #radio-pause{cursor: pointer;float: left;width: 5px;height: 30px;border-color: #ccc;border-style: double;border-width: 0px 0px 0px 20px;} /*Volume slider */ .ui-corner-all{border-radius:0px;-webkit-border-radius:0px;} .ui-state-hover{color:#000;} .radio-orange{color:#FF8300;} /*DJ*/ .current-dj { display: inline-block; float: left; height: 76px; overflow: hidden; margin-top: -10px; width: 70px; box-sizing: border-box; image-rendering: pixelated; } .current-dj img { object-fit: none; overflow: hidden; max-width: fit-content; } .radio-dj { width: 15%; display: flex; padding: 21px 1% 0 0%; padding-top: 21px; float: left; box-sizing: border-box; } #hxlstats_dj {margin-left: 2.5%;} /*Buttons */ #radio-player { width: 20%; height: 100%; display: inline-block; float: left; line-height: 66px; box-sizing: border-box; } #radio-refresh{cursor: pointer;float: left;font-family: 'FontAwesome';font-size: 28px; color: #ccc;} #radio-stop{width: 0px;height: 0px;border:15px solid #ccc;cursor:pointer;float:left;} ul.jp-controls {width: 60%;margin: 0px;padding: 0px;display: inline-block;text-align: center;vertical-align: middle;line-height: normal;} /*Volume*/ .ui-slider-horizontal .ui-slider-handle {margin:0px} .ui-slider-horizontal {background: #e8e3e3;border: none;width: 36%;display: inline-block;height: 10px;} .ui-slider-horizontal .ui-slider-range-min{background:#ccc;float:left;} .ui-slider-horizontal .ui-slider-handle{height: 25px; width: 5px;background-color: #ccc;display: inline-block; top: -7px;} /*Song*/ .radio-song .bold.radio-orange, .radio-listeners .bold.radio-orange { display: inline-block; overflow: hidden; width: 30%; vertical-align: middle; line-height: normal; } .radio-song { width: 45%; padding: 0 2%; float: left; line-height: 58px; box-sizing: content-box; display: flex; } #radioinformation-song { display: inline-block; float: right; font-weight: lighter; width: 71%; margin-left: 3%; } .marquee {white-space: nowrap;overflow: hidden;} .marquee p {margin:0px;display: inline-block;padding-left: 100%;animation: marquee 10s linear infinite;} @keyframes marquee {0% { transform: translate(0, 0); } 100% { transform: translate(-100%, 0); }} /*Listeners*/ .radio-listeners { display: inline-block; float: right; padding-right: 1%; line-height: 58px; box-sizing: border-box; } #hxlstats_listeners {display:inline-block;vertical-align: middle;line-height: normal;} .radio-dj::before { color: #FF8300; font-weight: bold; content: 'DJ'; line-height: normal; margin: auto 0; padding-right: 2%; } .radio-song:before { color: #ff8300; font-weight: 700; content: 'Now playing '; width: fit-content; line-height: normal; margin: auto 0; padding-right: 2%; } .radio-listeners:before { color: #FF8300; font-weight: bold; content: '♫'; } /*Request Line*/ #radio-wrapper #header-widget-area {width: 28.5%;float: left;font-size: 9pt;margin: 0px;padding-top: 12px;position: relative;} .radio-request-header {color: #ccc;font-style: italic;} #radio-wrapper .widget-head {display:none} #request_success_wrapper {display: none; position:fixed; background-color:#f1f1f1;top:-20px;width:300px;height:135px;opacity:0.95;border-radius: 5px;margin-top: 10px; overflow:hidden; float:right;} #request_success_text {margin-top: 52px;vertical-align: middle;color:#000;position:relative;} #djsays-wrapper{width:416px;height:24px;margin:8px 0 0 20px;float:left;} #djsays-inner-wrapper{width:376px;margin:5px 0px 0px 20px;color:#FFF;float:left;} #request_line .form-text-260px, #request_line .form-textarea-requests {border: 1px solid #ccc;font: 10px Ubuntu, Verdana, sans-serif; height: 13px!important; vertical-align: middle;padding: 2%;} /*Mobile Layout */ @media only screen and (min-width:901px) and (max-width: 1280px) { #radioinformation-wrapper {font-size:18px;} ul.jp-controls {width:100%;} #volume {display: none;} .radio-listeners{padding:0} .radio-song { width: 40%;} } @media only screen and (min-width:601px) and (max-width: 900px) { #radioinformation-wrapper {font-size:18px;} .radio-dj{width:40%;} #radio-player {width: 40%;} .radio-song {width:80%;} } @media only screen and (min-width: 20px) and (max-width: 600px) { .radio-dj {width: 65%;padding-top:10px;} .radio-song {width: 96%;font-size: 18px;line-height: 46px;} #radio-player {width: 60%;height: 50px;margin-top: -5px;} .radio-listeners {display: inline-block;width: fit-content;float: right;padding-right: 4%;line-height: 58px; box-sizing: border-box;margin-top: -137px;} #radioinformation-song {width:67%} } .mobile-message-dj {font-size:10px; width:100%;display:inline-block;} /*---- NEW RADIO WIDGET ----*/ #hxlstats_comp_q2 { display: flex; color: #9c9c9c; margin-bottom: 5px; font-weight: 500; margin: 10px 2%; font-size: 14px; } #hxlstats_comp_q {font-weight: 300px!important} .message-header-wrapper { background: url(images/headers/music.png),linear-gradient( 140deg ,#ef8a1a 40%,#d67b14 40%,#d67b14 55%,#c16d0e 55%,#c16d0e 70%,#b1620b 70%,#b1620b 85%,#9a5408 85%,#9a5408 100%); width: 94%; color: #fff; float: left; font-size: 20px; padding: 2% 3%; } .new-hxl-msg { margin: 2%; } #request_line2 .dj_message_habbo { display: inline-block; padding: 2%; margin: 10px 2%; color: #989898; font-family: 'Ubuntu',sans-serif; font-size: 12px; width: 40%; } #request_line2 .dj_message_message { display: inline-block; padding: 2%; margin: 10px 2%; color: #989898; font-family: 'Ubuntu',sans-serif; font-size: 12px; width: 91%; border: 1px solid #ccc; } #request_line2 .radiosubmit:hover { background: #4e4e4e; } #request_line2 .radiosubmit { display: inline-block; padding: 2%; margin: 10px 2%; color: white; font-family: 'Ubuntu',sans-serif; font-size: 12px; width: 20%; background: #9c9c9c; text-align: center; } .new-hxl-msg a {margin-left: 2%;} .radiosubmit:hover {cursor:pointer} /* ------ 6. Alert Bar ------ */ .alert-wrapper{background-color: #E37925;width:100%;height:30px;border-top: 1px solid #E37925;float:left;} .alert-inner-wrapper{padding-left:20px;padding-right:20px;margin:8px auto 0;color:#FFF;width:940px;} .alert-inner-wrapper a{color:#691818;text-decoration:underline;} .alert-inner-wrapper a:hover{color:#000;} .ninja-annc-close{background:url(images/alert_cross.png) no-repeat;width:11px;height:11px;margin-top:2px;float:right;} .ninja-annc-close:hover{background:url(images/alert_cross_hover.png) no-repeat;} /* ------ 7. Tooltip ------ */ .tipsy { font-size: 10px; position: absolute; padding: 5px; z-index: 100000; } .tipsy-inner { background-color: #0F0D0C; color: #FFF; max-width: 200px; padding: 5px 10px 5px 10px; text-align: center; } .tipsy-inner { border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; } .tipsy-arrow { position: absolute; width: 0; height: 0; line-height: 0; border: 5px dashed #000; } .tipsy-ne .tipsy-arrow { top: 0; right: 10px; border-bottom-style: solid; border-top: none; border-left-color: transparent; border-right-color: transparent;} /* ------ 8. Buttons ------ */ .darkbutton {background: url(images/headers/general.png), rgba(76,185,186,1);padding: 10px;cursor: pointer;width: fit-content;display: inline-block; color:#FFF!important;} .darkbutton a {color:#fff} .darkbutton:hover { background: url(images/headers/general.png), rgba(13,81,82,1)} .lightbutton-left{background:url(images/partyroom_left.png) no-repeat;padding-right:5px;margin-top:-8px;width:5px;height:29px;float:left;} .lightbutton-right{background:url(images/partyroom_right.png) no-repeat;width:5px;height:29px;margin-top:-8px;margin-left:5px;float:right;} .lightbutton{background:url(images/partyroom_background.png) repeat-x;height:25px;padding-top:8px;margin-left:10px;float:left;font-weight:bold;} .lightbutton-settings{background:url(images/darkbutton_settings.png);width:8px;height:8px;margin:3px 10px 0 0;float:left;} .lightbutton a{color:#444444;} .lightbutton a:hover{color:#FF8300;} .lightbutton:hover {color:#FF8300;cursor:pointer;} a:hover .lightbutton {color:#FF8300;} /* ------ 9. Fonts ------ */ .bold {font-weight:bold;} .orange{color:#FF8300;} .red{color:#E37925;} .center{text-align:center;} .font-change {display: inline-block;} /* ------ 10. Header ------ */ #user-welcome{width: auto;float: right;color:#FFF;font-family:'Ubuntu', sans-serif;font-weight:500;font-size:11px;margin-top: 20px;} #user-name{margin-left:-3px;float: right;font-size:41px;color: rgb(51,49,43);font-family:UbuntuPretty, 'Ubuntu', sans-serif;line-height:41px;clear: both;} #user-register{font-size: 10px; margin-right: 65px;} a.register-link{color: #73dbff;} a.register-link:hover{color:#438aa2;} #avatar{float: left; margin-top: -16px; height: 65px; overflow: hidden;} #usercontrol{margin-top: 9px;float:right;clear: both;} /* ------ 10.1 Header Colours ------ */ .header-toggle{margin-top:-2px;float:right;cursor:pointer;} #header-toggle{margin-right:35px;margin-top:-30px;float:right;cursor:pointer;z-index:100;position: relative;} /* ------ 11. Habbox Today Banner ------ */ /* ================================ HABBOX GRADIENT BANNER (FINAL) ================================ */ .habbox-banner { width: 100%; height: 300px; display: flex; align-items: center; overflow: hidden; } /* ================================ HABBOX BANNER – BACKGROUND LAYER ================================ */ .habbox-banner { position: relative; overflow: hidden; background: none; /* no !important needed now */ } /* background layer only */ .habbox-banner::before { content: ""; position: absolute; inset: 0; background: var(--banner-bg); z-index: 0; transition: filter 0.25s ease; } /* content above background */ .habbox-banner__inner { position: relative; z-index: 1; } /* Inner layout */ .habbox-banner__inner { display: flex; align-items: center; width: 100%; padding: 0 10%; } /* Logo (left) */ .habbox-banner__logo { flex-shrink: 0; margin-right: 40px; } .habbox-banner__logo img { max-width: 300px; height: auto; display: block; } /* Content (right) */ .habbox-banner__content { color: #ffffff; max-width: 720px; } /* Title */ .habbox-banner__title { font-family: "Ubuntu", sans-serif; font-size: 52px; font-weight: 700; margin: 0 0 12px; background: rgba(0, 0, 0, 0.35); padding: 16px 22px; display: inline-block; } /* Description */ .habbox-banner__description { font-size: 14px; line-height: 1.4; margin-bottom: 16px; background: rgba(0, 0, 0, 0.35); padding: 14px 22px; max-width: 600px; } /* Buttons */ .habbox-banner__buttons { display: flex; gap: 10px; } .habbox-banner__button { display: inline-block; padding: 8px 16px; background: #ffffff; color: #333333; border-radius: 4px; font-family: "Ubuntu", sans-serif; text-decoration: none; font-weight: 600; transition: background 0.2s ease; } .habbox-banner__button--primary { background: #ef8a1a; color: #ffffff; } .habbox-banner__button:hover { background: #f2f2f2; } .habbox-banner__right-image { position: absolute; right: 0; top: 0; overflow: hidden; height: 380px; margin-top: -30px; z-index: 999999; } /* ================================ HABBOX BANNER – RESPONSIVE ================================ */ /* Large tablets & small desktops */ @media (max-width: 1200px) { .habbox-banner__title { font-size: 40px; } .habbox-banner__description { font-size: 12px; } .habbox-banner__buttons { width: 350px; } .habbox-banner__button { padding: 10px; font-size: 12px; } .habbox-banner__content { max-width: 300px; } } @media (max-width: 1200px) { .habbox-banner__content { display: none; } } /* Mobile */ @media (max-width: 600px) { .habbox-banner__right-image{display:none} .habbox-banner__logo { width: 100%; place-items: center; } } #habboxtoday{width:100%;height:350px;margin-top:-70px;} #hxtHead {margin: 0 11.75%;max-width: 1410px;} .hxtTab {position: absolute;height: 100%;width: 100%;background: #ffffffb8;padding: 3%;} .hxtOverflow {width: 100%;height: 100%;position: relative;overflow: hidden;float: left;-webkit-tap-highlight-color: transparent;} .hxtContainer {position: relative;width: 100%;height: 100%;-webkit-tap-highlight-color: transparent;} .hxtContent {width: 100%;height: 100%;position: absolute;left: 0;top: 0;} img.hxtImage {height: 91%;width: 94%;margin: 3% 0% 0% 3%;object-fit: cover;overflow: hidden;image-rendering: pixelated;} .hxtText {position: absolute;color: #fff;padding: 2%;font-size: 10px;bottom: 0px;background: -moz-linear-gradient(top, rgba(255,255,255,0), rgba(255,255,255, 1));background: -webkit-linear-gradient(top, rgba(255,255,255,0), rgb(0, 0, 0));font-family: 'Ubuntu', sans-serif;width: 90%;margin: 0% 3% 3% 3%;bottom: -.1%;} .hxtText h2 {font-size: 25px;font-weight: 400;margin-top: 30px;} .hxtText p {font-size: 14px;margin-bottom:10px!important} a.hxtLink {top: 3%;left: 3%;position: absolute;width: 94%;height: 93%;text-indent: 100%;white-space: nowrap;overflow: hidden;} /* Medium screen optimisation */ @media only screen and (max-width: 960px) { .hxtTab:nth-child(3) {display: none;} .hxtOverflow {width: 52%!important;margin-left: 53%!important;} } /* Mobile screen optimisation */ @media only screen and (max-width: 600px) { .hxtTab:nth-child(1) {display: none;} .hxtOverflow { width: 100%!important; margin-left: -1%!important;} } /* ------ 12. News ------ */ #news-wrapper{width:69%;float:left;margin-right:1%;max-width:1066px;} .news-header-wrapper{background: url(images/headers/general.png), linear-gradient(140deg, #ef8a1a 40%, #d67b14 40%, #d67b14 55%, #c16d0e 55%, #c16d0e 70%, #b1620b 70%, #b1620b 85%, #9a5408 85%, #9a5408 100%);width: 94%;color: #FFF;float: left;font-size: 20px;padding:2% 3%} .news-wrapper{background:#FFF;width:96%;height:100%;padding:2%;float:left;position:relative;} .news-readmore{width:100%;text-align:center;float:left;margin-top:10px;font-size:12pt} .news-article{width: 100%;float: left;font-size: 10pt;font-weight: normal;padding: 30px 0px;} .news-article ul li{list-style-type:disc;margin-left:15px;padding-left:4px;} .news-article ol li{list-style-type:decimal;margin-left:19px;} .news-article ol{width:100%;} .edit-link a {color: white;font-weight:normal;} .edit-link a:hover{color:#FF8300;} .news-author {color: #989898;font-size: 13px;} .news-author a {color:#ff8300} .news-author a:hover {color:#a55500} .news-header-comment {float: right;text-align: center;font-size: 16px;padding: 5px 10px;position: relative;background: #fff;border-radius: .4em;color: #ef8a1a;font-weight: bold;} .news-header-comment::after {content: '';position: absolute;bottom: 0;left: 50%;width: 0;height: 0;border: 6px solid transparent;border-top-color: #ffffff;border-bottom: 0;margin-left: -6px;margin-bottom: -6px;} .news-header-comment:hover {background: #d67b14;color: #fff;} .news-header-comment:hover:after {border-top-color:#d67b14} /* Share on Twitter */ section.sharing-box.content-margin.content-background.clearfix { float: right; } a.share-button.share-twitter { padding: 15px 15px 15px 50px; margin: 10px 0px; display: inline-block; border-radius: 30px; background: url(/wp-content/themes/habboxv7/images/icons/Twitter_Logo_WhiteOnBlue.png) 6px no-repeat #1da1f2; background-size: contain; color: #fff; } a.share-button.share-twitter:hover {opacity: 0.5;} /* ------ 13. Comments ------ */ /* New comments */ .commentlist { width: 100%; } .comment-form .submit { cursor: pointer; color: rgb(255, 255, 255); font-family: ubuntu; font-weight: 700; background: url(images/headers/general.png) rgb(239, 138, 26); border-width: 0px; padding: 15px 20px; } .nocomments { float: left; padding: 1%; width: 98%; border-bottom: 10px solid #eaeae6; display: inline-block; } .nocomments-frank { background: url(/wp-content/themes/habboxv7/images/icons/frank-confused.png) top left no-repeat; width: 80px; height: 70px; display: inline-block; } .nocomments-text { width: fit-content; display: inline-block; vertical-align: 30px; } #respond {width: 80%;display: inline-block;} span.grey {color: #ccc;} p.logged-in-as,p.comment-form-comment label {display: none;} h3#reply-title {margin:20px 0px 10px 0px; color: #a5a4a1;} #comment {margin-top: 10px;} #comment-form-wrapper { display: inline-block; width: 80%; } ul.children .comment { padding-left: 5%; background: #fff; margin-top:-20px; width:94%; } /* End of new comments */ .comments-header-wrapper{background: url(images/headers/general.png) #33312b; width: 94%; color: #FFF; float: left; font-size: 15px; padding: 1.5% 3%;} .comments-wrapper { background: #fff; float: left; font-family: ubuntu,sans-serif; width: 100%; } .comments-head { width: 75px; height: 75px; float: left; overflow: hidden; margin-right: 1%; } .comment { float: left; padding: 1%; width: 98%; border-bottom: 10px solid #eaeae6; } .comment-text span.orange {line-height: 20pt;} #comments-wrapper { width: 99%; float: left; font-size: 14px; } #comment-habbo { display: inline-block; margin-right: 2%; max-width: 18%; margin-bottom:20px; } #comment { resize: none; border: 1px solid #ececec; padding: 2%; font-size: 12px; font-family: ubuntu,sans-serif; width: 96%; height: 20px; display: block; } #commentform {width: 80%; display: inline-block;} #comment-form-background { position: relative;} #comment-submit{float: left;margin-top: 10px;content:'Comment'} .comment-submit-button,.login_infobox input#wppb-submit {background: url(images/headers/general.png) #ef8a1a;border: 0px;cursor: pointer;padding: 15px 20px;color: #fff;font-family: 'Ubuntu';font-weight: bold;} .login-remember label { display: inline-block; margin-left: 10px; } @media only screen and (max-width: 960px) { .login_infobox img {display: none;}} .comment-submit-button:hover,.login_infobox input#wppb-submit:hover{background:url(images/headers/general.png) #925512} .comment-link{color:#FFF;} #comment:before { content: ''; position: absolute; left: 1px; top: 50%; width: 0; height: 0; border: 22px solid transparent; border-right-color: #ccc; border-left: 0; border-bottom: 0; margin-top: -11px; margin-left: -22px; } #comment:after { content: ''; position: absolute; left: 1px; top: 50%; width: 0; height: 0; border: 20px solid transparent; border-right-color: #ffffff; border-left: 0; border-bottom: 0; margin-top: -10px; margin-left: -20px; } /* ------ 14. Full Width ------ */ .full-width{width:100%;margin-top:20px;float:left;} .full-width-wrapper{background: url(images/headers/general.png), linear-gradient(140deg, #ef8a1a 40%, #d67b14 40%, #d67b14 55%, #c16d0e 55%, #c16d0e 70%, #b1620b 70%, #b1620b 85%, #9a5408 85%, #9a5408 100%);width: 94%;color: #FFF;float: left;font-size: 20px;padding: 1% 3%;} .full-width-content{background: #fff;width: 94%;height: 100%;font-size: 11pt;color: #7e7e7e;line-height: 2em;padding: 3%;margin-top: 21px;} /* ------ 15. Widget Area ------ */ .widget{width: 100%;margin-bottom: 5%;float: left;font-size:9pt} .widget-header-wrapper{background: url(images/headers/forum.png), linear-gradient(140deg, #b72704 30%, #ae2505 30%, #ae2505 40%, #a12207 40%, #a12207 50%, #8f1e09 50%, #8f1e09 60%, #75180d 60%, #75180d 100%);width: 94%;color: #FFF;float: left;font-size: 20px;padding:2% 3%} .black-header-wrapper{background: url(images/headers/comps.png), linear-gradient(140deg, #252525 50%, #505050 50%, #505050 70%, #717171 70%, #717171 85%, #9c9c9c 85%, #9c9c9c 100%);width: 94%;color: #FFF;float: left;font-size: 20px;padding: 2% 3%;} .blue-header-wrapper {background:url(images/headers/twitter.png), linear-gradient(140deg, #006388 50%, #0f80ab 50%, #0f80ab 70%, #0096ce 70%, #0096ce 85%, #39b7e6 85%, #39b7e6 100%);width: 94%;color: #FFF;float: left;font-size: 20px;padding: 2% 3%;} .green-header-wrapper {background: url(images/headers/wiki.png), linear-gradient(140deg, #542590 50%, #6735a7 50%, #6735a7 70%, #7641b9 70%, #7641b9 85%, #935bda 85%, #935bda 100%);width: 94%;color: #FFF;float: left;font-size: 20px;padding: 2% 3%;} .yellow-header-wrapper {background: url(images/headers/badges.png), linear-gradient(140deg, #b38e09 50%, #c39f1a 50%, #c39f1a 70%, #d4b132 70%, #d4b132 85%, #e8c647 85%, #e8c647 100%);width: 94%;color: #FFF;float: left;font-size: 20px;padding: 2% 3%;} .turquoise-header-wrapper {background: url(images/headers/furni.png), linear-gradient(140deg, #0a8462 50%, #1a9a82 50%, #1a9a82 70%, #39b593 70%, #39b593 85%, #63ccaf 85%, #63ccaf 100%);width: 94%;color: #FFF;float: left;font-size: 20px;padding: 2% 3%;} .orange-header-wrapper {background: url(images/headers/events.png), linear-gradient(140deg, #65902a 50%, #71a52b 50%, #71a52b 70%, #7eb535 70%, #7eb535 85%, #92ca47 85%, #92ca47 100%);width: 94%;color: #FFF;float: left;font-size: 20px;padding: 2% 3%;} .pink-header-wrapper {background: url(images/headers/music.png),linear-gradient(140deg,#c36fa5 50%,#d486b8 50%,#d486b8 70%,#e096c5 70%,#e096c5 85%,#e6b7d5 85%,#e6b7d5 100%);width: 94%;color: #FFF;float: left;font-size: 20px;padding: 2% 3%;} .widget-content-wrapper{background: #FFF;} .widget-footer{display:none} .forumpostwidth{width:100%;text-overflow:ellipsis;white-space:nowrap;overflow-x:hidden;} .forumuserwidth{width:100%;text-overflow:ellipsis;white-space:nowrap;overflow-x:hidden;} #post_title{display:none;} #post_title td{padding:5px;} .forumnewposts td { padding:2%; height: fit-content!important; color: #989898; font-size: 1.2em; text-align: left;} .forumnewposts{cursor:pointer;} .forumnewposts:hover{background:#e6e5e5;} .hxltimewidth{width:100%;text-overflow:ellipsis;white-space:nowrap;overflow-x:hidden;} .hxldjwidth{width:100%;text-overflow:ellipsis;white-space:nowrap;overflow-x:hidden;} #slot_title{display:none;} #slot_title td{padding:5px;} .hxlslots td {padding: 2%;height: fit-content!important;color: #989898;font-size: 1.2em;text-align: left;} .hxlslots{cursor:pointer;} .hxlslots:hover{background:#e6e5e5;} .tweet{padding:5px;border-bottom:1px dashed #999;} .tweet:hover{background:#E6E5E5;cursor:pointer;} .tweet a{color:#FF8300;} .tweet a:hover{color:#000;} #follow-us{margin-top:20px;text-align:center;} #columns{float:left;width:30%;max-width:457px;} #columns .widget .widget-head {width: 100%;} ul#column1 {padding: 0 0 0 3%;margin: 0px;} .widget-placeholder { border: 2px dashed #999;margin-bottom:16px;clear:both;} .dragging{float:left;padding:0px;margin:0px;} #twitter_widget_content {font-size: 1.2em;color: #989898;padding: 2%;margin-top:45px;} .furni-widget-display {text-align: center; width: 12.1%; float: left; margin: 1%; height: 50px;cursor: pointer} /* ----- SOTM sidebar ----- */ .sotm-container { display: inline; } .sotm-container .item { width: 41%; display: inline-block; margin: 2%; vertical-align: top; } .sotm-container .sotm-item { display: flex; align-items: flex-start; /* top-align avatar + text */ gap: 10px; } .sotm-container .sotm-avatar { max-width: 45%; height: auto; object-fit: none; flex-shrink: 0; } .sotm-container .sotm-reason { max-width: 60%; } /* ------ 16. Profiles ------ */ /* ------ 17. Forms ------ */ form#request_line {width:100%} .form-text{ width: 50%; display: block; float: none; font: 14px Ubuntu; border: 1px solid #ccc; padding: 16px; margin: 20px auto;} .form-text-260px{width:25%;margin: 0px;height: 28px;padding: 0% 2%;font-size: 10px;font-family: Ubuntu;float: left;border: 1px solid #ccc;max-width: 70px;background: #f1f1f1; margin-right: 5px;} .form-textarea-requests {width:50%;margin: 0px;height: 21px!important;padding: 2% 2% 0%;font-size: 10px;font-family: Ubuntu;float: left;border: 1px solid #ccc;max-width: 600px;background: #fff;} .form-select-container {width: 179px;overflow: hidden;background: url(https://habbox.com/v7/wp-content/themes/habboxv7/images/form_select_full_180.png) no-repeat right;border: 1px solid rgb(109, 109, 109);border-right: 1px solid lightgrey;border-radius: 3px;height: 25px;float: left;} .form-select-container select {height: 25px;width: 100%;padding:5px;font-size: 10px;font-family: verdana;float: left;background: transparent;-webkit-appearance: none;border: 0;border-radius: 0;} #request_form_wrapper .form-select-container select {width:200px;} .webkit #request_form_wrapper .form-select-container select {width:180px;} .form-heading {width: 100%;margin-bottom:4px;float: left;} .form-disabled-text{background:#DDD;border:1px solid #777;width:878px;margin:1px 0 20px 0;height:26px;padding: 0px 10px 0px 10px;font-size:10px;font-family:verdana;float:left;} /* ------ 18. Message ------ */ .system_message{width:868px;margin:0;margin:20 auto 10 auto;padding:5px;text-align:center;background:white;border:1px solid #DDD;} .system_message.redm {background-color: #ffebe8;border-color: #c00;} .system_message.yellowm {border: 1px solid #e6db55;background-color: #fffbcc;} /* ------ 19. Staff List ------ */ #people-wrapper {margin: 0% -2%;} .people-header-wrapper {background: url(images/headers/people.png), linear-gradient(140deg, #ef8a1a 40%, #d67b14 40%, #d67b14 55%, #c16d0e 55%, #c16d0e 70%, #b1620b 70%, #b1620b 85%, #9a5408 85%, #9a5408 100%);width: 94%;color: #FFF;float: left;font-size: 20px;padding: 2% 3%;} .staff-user {width: 14.5%; min-width:115px; height: 115px; position: relative; overflow: hidden; display: inline-block; margin: 1%; background: url(/wp-content/uploads/2017/10/productgrid.png);} .staffhead { background: url(/wp-content/themes/habboxv7/images/headers/people.png) #33312b; width: 100%; height: 20px; color: #FFFFFF; font-size: 90%; font-weight: 500; text-align: center; padding: 5px 0px; line-height: 20px; } .staff-user img { width: 75%; height:70%; object-fit: none; margin-top: 5px; image-rendering: pixelated; } .usertitle { float: right; width: 66%; padding: 5% 3% 5%; font-size: x-small; } /* ------ 20. Imager ------ */ .input{padding: 5px 10px;font-family: 'Ubuntu', sans-serif;font-size: 15px;border:1px solid #999;} .input:focus{outline: none;border:1px solid #FF8300;} .input:hover{outline: none;border:1px solid #FF8300;} .country-input{padding:0px;height:24px;width:173px;font-family:verdana;font-size:10px;border:1px solid #999;} .country-input:focus{outline: none;border:1px solid #FF8300;} .country-input:hover{outline: none;border:1px solid #FF8300;} .stage2,.stage3,.stage4,.stage5{display:none;} .alignright{float:right;padding-left:10px;} .alignleft{float:left;padding-right:10px;} .aligncenter{margin:0 auto;display: block;} .pagination-wrapper{width:100%;float:left;} .pagination {display: block;width: auto;margin: 50px 10px;float: right;} .pagination span, .pagination a {margin: 2px 2px 2px 0;padding:6px 9px 5px 9px;text-decoration:none;width:auto;color:#fff;background:#33312B;} .pagination a:hover{color:#fff;background: #9a5408;} .pagination .current{padding:6px 9px 5px 9px;background: #ef8a1a;color:#fff;} /* ------ 21. Notice ------ */ .notice{background-color:#FFF2F2;border-width:1px;border-color:#FFABAB;border-style:solid;margin:0 10px 20px 0px;padding:10px;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;border-bottom-width:2px;color:#718895;width:876px;float:left;} .notice_habbo{background-color:#FFF2F2;border-width:1px;border-color:#FFABAB;border-style:solid;margin:0 10px 20px 0px;padding:10px;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;border-bottom-width:2px;color:#718895;width:876px;float:left;height:110px;} /* ------ 22. Footer ------ */ #footer-wrapper{background-color: #24211c; min-width:100%;float:left; border-top: 6px solid #696865;margin-top:50px;padding-bottom: 40px;} #footer-inner-wrapper {width: 80%;margin: 0 10%;color: #fff;} .footer-inner-box { display: inline-block; float: left; padding: 1% 0; margin-right: 1%; margin-top: 5px; font-family: ubuntu,sans-serif; width: 80%; } #footer-inner-box-statement{font-size: 9px;} .footer-radio-text{margin-top:13px!important;display: inline-block;text-align: center;float:none!important;width:100%;} @media only screen and (max-width: 960px) { .footer-radio-text{display: inline-block;text-align: left!important;float: left!important;margin: 13px 0 0 10px!important;width:auto;} } .footer-links{color:#333;} .sotm { width: 75%; display: inline-block; } .sotm-header { width: 100%; color: #fff; font: 20px 'Ubuntu'; margin-top: 20px; } #footer-sotm { font-family: 'Ubuntu'; width: 32%; position: relative; overflow: hidden; float: left; background: url(/wp-content/uploads/2017/10/productgrid.png); color: #24211c; } .sotm div:first-of-type { margin-right: 2%; } .sotm div:last-of-type { margin-left: 2%; } #footer-sotm img { height: 105px; object-fit: none; width: 30%; } .sotm_name { background: url(/wp-content/themes/habboxv7/images/headers/people.png) #33312b; width: 100%; height: 20px; color: #fff; font: 15px 'Ubuntu'; text-align: center; padding: 10px 0; } .sotm_desc { float: right; width: 58%; padding: 5% 5% 5% 0; font-size: small; color: #696865; } @media only screen and (max-width: 960px) { .sotm {width:100%;} .footer-question { width: 100%;margin-left: 0;} #footer-sotm {width:48%} } .bottom-links { min-width: 80%; float: left; padding: 0 10%; background: #040403; color: #989898; font-size: smaller; } a.toolip:hover {text-decoration:none;} /*BG color is a must for IE6*/ a.tooltip span {display:none;width:350px;position:absolute;right:70px;margin-top:-60px;} a.tooltip:hover span{display:block;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;opacity:0.5;background-color:#FFF;padding:5px;color:#000;border:1px solid #2b521d;} .sub-header {font-weight:bold;clear:both;width:100%;text-align:center;} /* ------ 23. Login Page ------ */ .login_infobox {padding: 0% 5%;} .login_infobox label {display: block;padding: 10px 0px;} .wppb-user-forms ul li {display: inline-block;width: 80%;} #wppb-register-user, #wppb-edit-user {padding: 0% 5%;} #wppb-register-user input, #wppb-register-user textarea#description, #wppb-edit-user input, #wppb-edit-user textarea#description {padding: 10px;font-family: 'Ubuntu', sans-serif;font-size: 15px;border: 1px solid #ccc;width: 60%;} #wppb-register-user input:focus, #wppb-register-user textarea#description:focus #wppb-edit-user input:focus, #wppb-edit-user textarea#description:focus {outline: none;border: 1px solid #FF8300;} #wppb-register-user textarea#description, #wppb-edit-user textarea#description {resize:none;height:40px!important} #wppb-register-user label, #wppb-edit-user label { display: block; padding: 10px 0px;} #wppb-register-user input#send_credentials_via_email {width: fit-content;} #wppb-register-user input#register, #wppb-edit-user input#edit_profile {background: url(images/headers/general.png) #ef8a1a;border: 0px;cursor: pointer;margin-top: 20px;padding: 15px 20px;color: #fff;font-family: 'Ubuntu';font-weight: bold;} #wppb-register-user input#register:hover, #wppb-edit-user input#edit_profile:hover {background: url(images/headers/general.png) #925512;} select#display-name {padding: 5px 10px;font-family: 'Ubuntu', sans-serif;font-size: 15px;border: 1px solid #999;width: 33%;} .wppb-form-field > span, #pass-strength-result { margin-left: 0px!important; } .wppb-form-field label, #wppb-login-wrap .login-username label, #wppb-login-wrap .login-password label, #wppb-login-wrap .login-auth label, .wppb-form-field label, #wppb-login-wrap .login-username label, #wppb-login-wrap .login-password label, #wppb-login-wrap .login-auth label { width: 100%; } span.wppb-description-delimiter { padding-top: 10px; } #wppb-register-user label, #wppb-edit-user label { display: block; padding: 0 0 5px 0; font-size: 14px; } .wppb-form-field label, #wppb-login-wrap .login-username label, #wppb-login-wrap .login-password label, #wppb-login-wrap .login-auth label { width: 100%!important; } .wppb-form-field input[type="text"], .wppb-form-field input[type="number"], .wppb-form-field input[type="email"], .wppb-form-field input[type="url"], .wppb-form-field input[type="password"], .wppb-form-field input[type="search"], .wppb-form-field select, .wppb-form-field textarea, .wppb-checkboxes, .wppb-radios, #wppb-login-wrap .login-username input, #wppb-login-wrap .login-password input, #wppb-login-wrap .login-auth input { padding: 10px; font-family: 'Ubuntu', sans-serif; font-size: 15px; border: 1px solid #ccc; width: 60%; } #wppb-login-wrap, #wppb-edit-user { display: flow-root; } /* ------ X Misc ------ */ /* Leaderboards styling */ .leaderboard {border-spacing: 0px;} .leaderboard td {padding: 5px 10px;border-bottom: 1px solid #ccc;} .leaderboard tr.generic {background: url(images/headers/stars.png), linear-gradient(140deg, #ef8a1a 40%, #d67b14 40%, #d67b14 55%, #c16d0e 55%, #c16d0e 70%, #b1620b 70%, #b1620b 85%, #9a5408 85%, #9a5408 100%);color: #FFF;font-size: 15px;font-weight:bold;} .leaderboard tr.blackteam {background: url(images/headers/stars.png), linear-gradient(140deg, #8a8a8a 40%, #737373 40%, #737373 55%, #5d5d5d 55%, #5d5d5d 70%, #4e4e4e 70%, #4e4e4e 85%, #000000 85%, #000000 100%);color: #FFF;font-size: 15px;font-weight:bold;} .leaderboard tr.greenteam {background: url(images/headers/stars.png), linear-gradient(140deg, #7bd07e 40%, #5cc160 40%, #5cc160 55%, #2aa92e 55%, #2aa92e 70%, #08920c 70%, #08920c 85%, #007704 85%, #007704 100%);color: #FFF;font-size: 15px;font-weight:bold;} .leaderboard tr.redteam {background: url(images/headers/stars.png), linear-gradient(140deg, #ec8585 40%, #e06464 40%, #e06464 55%, #ce3d3d 55%, #ce3d3d 70%, #b31717 70%, #b31717 85%, #940000 85%, #940000 100%);color: #FFF;font-size: 15px;font-weight:bold;} .leaderboard tr.blueteam {background: url(images/headers/stars.png), linear-gradient(140deg, #889eec 40%, #7089e2 40%, #7089e2 55%, #5675e2 55%, #5675e2 70%, #3559d8 70%, #3559d8 85%, #082eb9 85%, #082eb9 100%);color: #FFF;font-size: 15px;font-weight:bold;} .leaderboard tr:first-child td {border: 0px!important;padding: 10px;} /* Quiz Styling */ div.fca_qc_quiz button { background: url(images/headers/question.png) #ef8a1a!important; cursor: pointer!important; color: #fff!important; font-family: ubuntu!important; font-weight: 700!important; background: url(images/headers/general.png) #ef8a1a!important; border-width: 0!important; box-shadow: none!important; border-radius: 0px!important; padding: 10px 15px!important; font-size: 14px!important; } div.fca_qc_quiz button:hover {background:url(images/headers/question.png) #7b4a14!important;} div.fca_qc_quiz {padding:20px!important} p.fca_qc_quiz_title { margin: 0 0 20px 0!important; font-family: Ubuntu!important; font-size: 40px!important; color: #45423b!important; font-weight: 500!important; } #fca_qc_question { font-size: 30px!important; font-family: Ubuntu; color: #45423b; text-align: center; font-weight: 400; text-transform: lowercase; } div.fca_qc_quiz span.fca_qc_answer_span {font-size:13px;} div.fca_qc_quiz div.fca_qc_answer_div {width:90%} .fca_qc_quiz p {font-size: 12px;} /* Quiz Styling Over */ form#form_sqhbo { width: 100%; } table.ncode_imageresizer_warning{margin:0 auto;} .video{text-align:center;border:1px solid #000; border-top:none;border-bottom:none;height:324px;display:block;float:left;margin-bottom:10px;} #loading{width:200px;text-align:center;margin-top:-25px;margin-left:370px;} #rocket{display: inline-block; float: right;} .pagination-wrapper{margin-top:-19px;margin-bottom:7px;} .wp-table-reloaded caption {background-image: url(http://habbox.com/styles/defaultimages/edit_icon.png) !important;background-repeat: no-repeat !important;height: 25px;margin-top: 5px;margin-left: 4px;padding-top: 2px;padding-left: 20px;} #googleads { float: left; margin: 20px 10%; width: 80%; overflow: hidden; text-align: center; height: 90px; } #banner-icon{margin-right: 5px;margin-top:-30px;} .stafflist-icon{float:right;margin-top:-8px;cursor:pointer;} .stafflist-content .full-width-content{display:none;height:auto;} .stafflist-header{cursor:pointer;} .events-item-wrapper{cursor:pointer;width:100%;float:left;} .events-item-even-wrapper{cursor:pointer;width:100%;float:left;} /*.events-item-header{white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;padding:5px 0 5px 0;width:33%;text-align:center;float:left;} */ /*.events-item-wrapper:hover,.events-item-even-wrapper:hover{background:#E6E5E5;color:#FF8300;} */ /* .events-title{background:#ADADAD;padding:5px 0 5px 0;width:33.3%;text-align:center;float:left;} */ .horizontal-rule{background:url(images/login_horizontal_line.png) repeat-x;height:2px;width:100%;margin-top:20px;float:left;} .catablog-image{border:1px solid #000;} #steptwo-hidden{display:none;} .register-input{background:url(images/register_input.png) repeat-x;width:856px;margin:1px 0 20px 5px;height:24px;padding-left:10px;font-size:10px;font-family:verdana;border:none;float:left;} .register-text{width:100%;font-weight:bold;margin-bottom:10px;float:left;margin-left:5px;text-align:left;} .events-item-wrapper.deleted,.events-item-even-wrapper.deleted {background:#E37925;} .events-item-wrapper.deleted:hover,.events-item-even-wrapper.deleted:hover {background:#EE7A7A;} .events-item-wrapper.deleted a,.events-item-even-wrapper.deleted a {color:whitesmoke;} .events-item-wrapper.cancelled,.events-item-even-wrapper.cancelled {background:#C1BA5F;} .events-item-wrapper.cancelled:hover,.events-item-even-wrapper.cancelled:hover {background:#DAD36E;} .events-item-wrapper.cancelled a,.events-item-even-wrapper.missed a {color:whitesmoke;} .events-item-wrapper.missed,.events-item-even-wrapper.missed {background:#C1BA5F;} .events-item-wrapper.missed:hover,.events-item-even-wrapper.missed:hover {background:#DAD36E;} .events-item-wrapper.missed a,.events-item-even-wrapper.missed a {color:whitesmoke;} .table-item-wrapper{background:#DDD;cursor:pointer;width:100%;float:left;} .table-item-even-wrapper{cursor:pointer;width:100%;float:left;} .table-item-wrapper-half{background:#DDD;cursor:pointer;width:50%;float:left;} .table-item{padding-top:7px;width:25%;text-align:center;float:left;} .table-item-header{background: #AAA;height: 20px;padding: 5px 0 15px 0;width: 25%;text-align: center;float: left;color: #fff;} .list li {float: none!important;} #department-content { margin-top: 20px;background:#fff;} #listener_chart {display: inline-block;} .table-item-wrapper:hover,.table-item-even-wrapper:hover{background:#83cdee;} .table-title{font-weight:bold;width:100%;margin-bottom:20px;float:left;} .table-item-wrapper a:hover,.table-item-even-wrapper a:hover{color:#FFF;} .table-item-wrapper:hover, .table-item-even-wrapper:hover{background:#83cdee;} .event-text{width:100%;font-weight:bold;margin-bottom:10px;float:left;} .events-message{background:#fff;width:774px;margin-top:1px;height:35px;padding-left:10px;font-size:12px;font-family:'Ubuntu' sans-serif;float:left;} .events-input{background: #fff; border: 1px solid #808080; width: 70%; margin: 0 15% 25px 15%; padding: 10px;} .show-notes {background: #fff;border: 1px solid #808080;width: 70%;margin: 0 15% 25px 15%;padding: 10px;min-height: 50px;} .events-disabled-input{background:#DDD;border:1px solid #777;width:898px;margin:1px 0 20px 0;height:26px;padding-left:10px;font-size:10px;font-family:verdana;float:left;} .events-item-wrapper{cursor:pointer;width:100%;float:left;height: fit-content;line-height: 20px;} .events-item-even-wrapper{cursor:pointer;width:100%;float:left;height: fit-content;line-height: 20px;} .events-item-wrapper-small{cursor:pointer;width:100%;float:left;height: fit-content;line-height: 20px;width:97%; padding:1.5%} .events-item{width:25%;float:left;white-space:nowrap;text-overflow:ellipsis;padding:5px 0 5px 0;text-align:left;float:left;font-size:1.2em;} .slots-table .events-item {width:100%;padding: 5px;height: 28.75px!important;font-size: 12px;line-height: 10px;border-bottom: 1px solid #ccc;color: #7e7e7e;} .events-item-header{background:#AAA;width:25%;float:left;color: #FFF; padding: 5px 0 5px 0;text-align: center;} .events-item-wrapper:hover,.events-item-even-wrapper:hover,.events-item-wrapper-small:hover{background:#ccc;} .events-title{font-weight:bold;width:100%;text-align:center; display:inline-block;} .info-title {color: #42a8a9;font-size: 150%;font-weight:bold} .events-item-wrapper a:hover,.events-item-even-wrapper a:hover{color:#FFF;} .events-item-wrapper:hover, .events-item-even-wrapper:hover{background:#e6e6e6; color:#FFF;} #events_timetable_header {display:inline-block;width:100%;} .slots-table {width: 100%;height: 978px;overflow: hidden;} #slots-table .events-item {width: 92%;padding: 2.5% 4%;font-size: 12px;line-height: 10px;height:30px} #slots-table .events-item:hover {background: #eaeaea!important;} #slots-table .events-item-header {width:100%;background:#BDBDBD;border-bottom:1px solid #ccc;height:39px; padding:0px!important} #slots-table .events-item-wrapper, #slots-table .events-item-even-wrapper {background: #fff;height: 39px;border-bottom: 1px solid #ccc;} .djname {color: #9c9c9c;} .djusername {color: #7e7e7e;} .event-text{width:100%;font-weight:bold;margin-bottom:10px;float:left;} .events-day{margin: 20px 0px; padding: 10px 15px; font-family: Ubuntu; border: 1px solid #ccc;} .events-month{margin: 20px 0px; padding: 10px 15px; font-family: Ubuntu; border: 1px solid #ccc;} .events-year{margin: 20px 0px; padding: 10px 15px; font-family: Ubuntu; border: 1px solid #ccc;} .events-missed{padding: 10px 15px; font-family: Ubuntu; border: 1px solid #ccc; padding-left: 20px; display: inline-block; margin: auto;} .events-weeks{padding: 10px 15px; font-family: Ubuntu; border: 1px solid #ccc; padding-left: 20px; display: inline-block; margin: auto;} .events-hour{padding: 10px 15px; font-family: Ubuntu; border: 1px solid #ccc; padding-left: 20px; display: block; margin: auto;} .events-minute{padding: 10px 15px; font-family: Ubuntu; border: 1px solid #ccc; padding-left: 20px; display: block; margin: auto;} .events-horizontal-line{height:2px;margin-bottom:20px;width:100%;} #event-save, #event-delete {display:inline-block; margin-bottom:50px;} .table-5 {width:5%} .table-10 {width:10%} .table-15 {width:15%} .table-20 {width:20%} .table-30 {width: 26%;padding: 0% 2%;} .table-40 { width: 36%; padding: 4% 2%; } .table-50 {width:50%} .table-60 {width:60%} .table-70 {width:70%} .table-80 {width:80%} #department-content .table-30, #department-content .table-40 {padding:5px 0px} .widget-content-wrapper .events-item {height: fit-content!important;color: #989898;} .widget-content-wrapper .events-item-header { font-size: 1.2em; height: 15px!important; background: transparent;color: #989898;} .hide {opacity: 0;margin-top: -72px;margin-left: -20px;width: 100px;padding: 5px;background-color: #ffffffe0;word-break: break-word;color: #777;} .widget-hover:hover .hide {position: absolute;opacity: inherit;transition: linear 0.2s;} #department tr td img {padding-bottom: 20px; opacity:0.5;filter:alpha(opacity=50); border-width: 0} #department tr td img:hover {opacity:1;filter:alpha(opacity=100);} .footer-links a{color:#FF8300;} .footer-links a:hover{color:orange;} .wp-caption { border: 1px solid #ddd; text-align: center; background-color: #f3f3f3; padding-top: 4px; margin: 10px 0; -webkit-border-radius: 3px; border-radius: 3px; } .wp-caption img { margin: 0; padding: 0; border: 0 none; -webkit-user-drag: none; } .wp-caption-dd { font-size: 11px; line-height: 17px; padding: 0 4px 5px; margin: 0; } .wp-caption-text{} .sticky{} .gallery-caption{} .bypostauthor{} .wp-smiley { margin-top: 5px; } .rares{ margin:-20px; width:960px; color:rgb(83,83,83); font-family: 'Ubuntu',sans-serif;text-align:left;} .rare{margin-bottom:20px;float:left;background:white;border:1px solid #DDD;margin-left:20px;margin-top:20px;width:207px;height:250px;position: relative;cursor:pointer;} .rare .image { position: absolute;left: 0px;top: 40px;background-repeat: no-repeat;background-position: center center;width: 100%;height: 165px;background-image: url(http://habbox.com/assets/images/206/1329829851_throne.png);} .rare .name {font-weight: 500; font-size:18px; margin: 5px 0 0 10px;} .rare .motto{font-size:10px; margin: 0px 0 0 10px;font-weight: 300;} .rare .value{font-size:10px; line-height: 12px; bottom: 8px; position: absolute;margin-left: 10px;} .rare .edit { width: 14px; height: 15px; background-image: url(images/rares/edit-rare.png); position:absolute; top: 10px; right: 10px; } .rare .icons { height: auto; position:absolute; bottom:14px; right: 10px; width:auto; height: 15px;} .rare .icons img { margin-left:5px; } span.a\3A backbutton a {color:#fff} span.a\3A backbutton a:hover {color:#FF8300} /* #Custom Panel Buttons */ .bluespoiler {background-color:#e3f3ff;border-width:1px;border-color:#abdcff;border-style:solid;margin-bottom:16px;padding:10px;font-family:Verdana;font-smooth:never;font-size:10px;font-weight:normal;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;border-bottom-width:2px;font-family:verdana;font-size:11px;} .bluespoiler h2 {font-family:verdana;font-size:18px;font-weight:normal;color:#a1bad1;padding-top:0;margin-top:0;padding-bottom:4px;} .bluespoiler hr {border:none 0;color:#abdcff;background-color:#abdcff;height:1px;margin:5px;} .imager_assets { margin: 0px auto; } /*------- X. Advent Calendar ------ */ #wp-advent-list li a, #wp-advent-list li span { background: rgba(255, 255, 255, .8)!important; border: 2px dotted #e00!important; font-weight: bold; text-shadow: -1px 0 black, 0 2px black, 2px 0 black, 0 -2px black; margin: 2em; text-shadow: 1px 1px 1px #000, -1px -1px 1px #000, -1px 1px 1px #000, 1px -1px 1px #000; color: #fff; display: block; font-size: 1.3em; padding: 2em 0; height: 100%; line-height: 3em; text-decoration: none; text-align: center; -webkit-transition: all 0.3s linear; -moz-transition: all 0.3s linear; -o-transition: all 0.3s linear; transition: all 0.3s linear; width: 93.9375px; display: inline-block; float: left; } #wp-advent-calendar li span{display:none!important;} #wp-advent-calendar li a {font-family: 'Ubuntu';font-weight: bolder;font-size: 25pt!important;} body#calendar-day-body {background: url(/wp-content/uploads/2018/12/advent-2019-dark.png);} #wp-advent-list { width: 900px!important; height: 600px!important; max-width: none!important; max-height: none!important; } /*------- X. Santa's List ------ */ .santas-list { background: url(/wp-content/uploads/2019/12/santas-list-empty.png) no-repeat center; height: 500px; width: 443px; margin: auto; } .santas-list ul { width: 127px; padding: 226px 16px 0px 14px; } .santas-list li { display: inline-block; background: #ccc; border: 1px solid #fff; padding: 1px 7px; margin: 2px 2px; border-radius: 6px; } .santas-list a:hover img { transform: scale(1.2); image-rendering: pixelated; } /* ------------------------------------------------------------------------------------------------------------------------------------- */ /* 03. VALUES (with thanks to Joe, lawrawrrr and Scottish) NOW KEPT SEPARATELY IN FILE: style_rarevalues.css /* ------------------------------------------------------------------------------------------------------------------------------------- */ /* ------------------------------------------------------------------------------------------------------------------------------------- */ /* 04. BOXES */ /* ------------------------------------------------------------------------------------------------------------------------------------- */ /* ------ Article Box ------ */ .guidebox { width: 180px; height: 130px; position: relative; border: 1px solid #a5a5a5; border-radius: 5px; overflow: hidden; display: inline-block; margin: 3px; } .guidebox-image{ border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; opacity:0.5; overflow: hidden; position: absolute; top: 32px; width:fit-content; } .guidebox-image:hover { opacity:1; cursor:pointer; } .guidebox-head { background: url(http://habbox.com/assets/images//f49b9020caacd427780ba44f20fdb680.png); position: relative; left: 0px; top: 0px; z-index: 1000; background-color: #333; width:180px; border-top-left-radius: 5px; border-top-right-radius: 5px; padding-top: 10px!important; padding-bottom: 10px!important; color: #FFFFFF; font-weight: bold; text-align: center; font-family: 'Volter', 'Verdana'; font-size: 10px; } /* ------ X. Landing Pages ------ */ .landing { margin: 5px;} .landing-image { opacity:0.5;} .landing-image:hover { opacity:1; cursor:pointer;} .ghead { background: url(http://habbox.com/wp-content/themes/habboxv7/images/guidesoverlay.png); padding: 10px 0px; color: #fff; text-align: center; font: bold 10pt Ubuntu, sans-serif; } .ahead { background: url(http://habbox.com/wp-content/themes/habboxv7/images/graphicsoverlay.png); padding: 10px 0px; color: #fff; text-align: center; font: bold 10pt Ubuntu, sans-serif;} span.a\3a backbutton {display:block; margin:0px auto 20px auto; width:fit-content!important;} /* ------------------------------------------------------------------------------------------------------------------------------------- */ /* 05. GUIDES */ /* ------------------------------------------------------------------------------------------------------------------------------------- */ .guides-header-wrapper{background: url(/wp-content/themes/habboxv7/images/headers/question.png),linear-gradient(140deg,#b38e09 50%,#c39f1a 50%,#c39f1a 70%,#d4b132 70%,#d4b132 85%,#e8c647 85%,#e8c647 100%);width: 93%;color: #FFF;float: left;font-size: 20px;padding:2% 3%} /* ------ X. Guides Ingredients List ------ */ .guidesmenu{border: 2px solid #ccc;padding: 2%;} .guidesmenu h2{color: #ef8a1a;font: 500 15pt Ubuntu; margin-bottom: 10px;} .guidesmenu p{ } span.steps { background: url(/wp-content/themes/habboxv7/images/headers/question.png),linear-gradient(140deg,#ef8a1a 40%,#d67b14 40%,#d67b14 55%,#c16d0e 55%,#c16d0e 70%,#b1620b 70%,#b1620b 85%,#9a5408 85%,#9a5408 100%); width: 100%; color: #fff; float: left; font-size: 20px; margin: 0 -2% 20px; padding: 1% 2%; } .hxss-header { width: 100%; color: #fff; float: left; font-size: 20px; margin: 0 -2% 20px; padding: 1% 2%; } .hxssteam-member img { margin: auto; display: block; height: 64px; object-fit: none; object-position: center -13px; width: 100px; } .hxss-red, .redteam .hxss-username {background: url(/wp-content/themes/habboxv7/images/headers/stars.png),linear-gradient(140deg,#d01818 40%,#b71111 40%,#b71111 55%,#9c0e0e 55%,#9c0e0e 70%,#840c0c 70%,#840c0c 85%,#6b0505 85%,#6b0505 100%);} .hxss-blue, .blueteam .hxss-username {background: url(/wp-content/themes/habboxv7/images/headers/stars.png),linear-gradient(140deg,#5ba5e0 40%,#4997d6 40%,#4997d6 55%,#3689cc 55%,#3689cc 70%,#277bbf 70%,#277bbf 85%,#1664a2 85%,#1664a2 100%);} .hxss-green, .greenteam .hxss-username {background: url(/wp-content/themes/habboxv7/images/headers/stars.png),linear-gradient(140deg,#7ace63 40%,#67bf4f 40%,#67bf4f 55%,#51ab38 55%,#51ab38 70%,#3e9426 70%,#3e9426 85%,#267111 85%,#267111 100%);} .hxss-black, .blackteam .hxss-username {background: url(/wp-content/themes/habboxv7/images/headers/stars.png),linear-gradient(140deg,#6f6f6f 40%,#636363 40%,#636363 55%,#525252 55%,#525252 70%,#464646 70%,#464646 85%,#383838 85%,#383838 100%);} .hxss-yellow {background: url(/wp-content/themes/habboxv7/images/headers/stars.png),linear-gradient(140deg,#d0ac13 40%,#c3a110 40%,#c3a110 55%,#b7970c 55%,#b7970c 70%,#a78a0b 70%,#a78a0b 85%,#927d09 85%,#927d09 100%);} .hxssteam .hxssteam-member { display: inline-block; box-sizing: border-box; text-align: center; border: 1px solid #ccc; width: 11.5%; height: 100px; overflow: hidden; margin: 0.5%; } .hxss-username { background: url(/wp-content/themes/habboxv7/images/headers/disney.png) #ccc; font-size: smaller; font-weight: bold; padding: 5px 0; color:#fff; } .hxssteamleaders p { text-align: center; font-size: 40px; font-weight: 400; } .line-spacer { border-bottom: 5px solid #eaeae6; margin: 20px -2.03%; } .hxssteams { background: #fff; width: 96%; border-top: 30px solid #eaeae6; padding: 0 2%; } .hxssteamleaders .hxssteam-member { width: 19%; min-width: 100px; } .hxssteam.hxssteamleaders { text-align: center; } .hxss_button { background: url(/wp-content/themes/habboxv7/images/headers/stars.png),linear-gradient(140deg ,#d0ac13 40%,#c3a110 40%,#c3a110 55%,#b7970c 55%,#b7970c 70%,#a78a0b 70%,#a78a0b 85%,#927d09 85%,#927d09 100%); display: inline-block; padding: 10px 20px; font-weight: bold; color: white; font-size: 120%; margin: 20px 0px; } .hxss_button:hover {background:url(/wp-content/themes/habboxv7/images/headers/stars.png),#927d09; color:white;} .awards-header { background: url(/wp-content/themes/habboxv7/images/headers/stars.png),linear-gradient(140deg,#ef8a1a 40%,#d67b14 40%,#d67b14 55%,#c16d0e 55%,#c16d0e 70%,#b1620b 70%,#b1620b 85%,#9a5408 85%,#9a5408 100%); width: 104.5%; color: #fff; float: left; font-size: 20px; margin: 0 -4.3% 20px; padding: 1% 2%; } /* ------------------------------------------------------------------------------------------------------------------------------------- */ /* 06. STAFF PANEL /* ------------------------------------------------------------------------------------------------------------------------------------- */ /*HxL bits*/ tr.hxl_shoutouts_header { background: url(/wp-content/themes/habboxv7/images/headers/music.png), linear-gradient(140deg,#4cb9ba 50%,#41aaab 50%,#41aaab 70%,#359b9c 70%,#359b9c 85%,#238182 85%,#238182 100%); color: #fff; } .hxl_shoutouts_header th {padding: 15px 0px;} td.hxlshout-item {color: #767676;vertical-align: middle;padding: 5px 0 5px 5%;} #hxl_shoutouts tr:nth-child(even) {background: #ececec;} .staff_button {padding: 17px;float: left;} .staff_button:hover {background: #0000003d;cursor: pointer;} .staff_button a {font: bold 14px 'Ubuntu',sans-serif;color: #ffffffd9;} select#choice { padding: 15px 5px; display: inline-block; margin-top: 20px; float: left; margin-left: 50px; } #messages { margin-bottom: 25px; } #staff_pagewrapper {background: rgb(255,255,255);background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(66,160,161,1) 100%); height: 400px;} #staff_pagewrapper_left {background: url(images/left/staffleft.png) left no-repeat;height: 400px;max-height: 400px;width: 30%;display: inline-block;} #staff_pagewrapper_right {background: url(images/right/hotel.png) right no-repeat;height: 400px;max-height: 400px;display: inline-block;width: 29%;float: right; } #staff_logo {background: url(/wp-content/themes/habboxv7/images/logos/STAFF_LOGO.png)no-repeat center;width: 40%;height: 100%;display: inline-block;margin-top: -400px;} /*Mobile*/ @media only screen and (max-width: 960px) { #staff_pagewrapper_left, #staff_pagewrapper_right {display:none!important} #staff_logo {width:100%!important;margin-top:0px;image-rendering: pixelated;} } #staff_content{width: 80%; margin: auto; font-family: 'Ubuntu', sans-serif;} .staff_full-width{width:100%;margin-bottom:44px} .staff_full-width-wrapper{background: url(images/headers/general.png),linear-gradient(140deg,#4cb9ba 50%,#41aaab 50%,#41aaab 70%,#359b9c 70%,#359b9c 85%,#238182 85%,#238182 100%);width: 94%;color: #FFF;float: left;font-size: 20px;padding: 1% 3%;margin-bottom: 20px;} .staff_full-width-content{background: #fff;font-size: 11pt;color: #7e7e7e;line-height: 2em;margin-top: 44px; text-align: center;} .staff_full-width-footer{width:100%;height:11px;} .staff_landing {display: inline-block;width: 22%;margin: 1.5%;max-width: 300px;} .staff_dhead{ top: 0px ; left: 0px ; z-index: 1000 ; background:url(images/headers/badges.png), linear-gradient(140deg, #252525 50%, #505050 50%, #505050 70%, #717171 70%, #717171 85%, #9c9c9c 85%, #9c9c9c 100%); width: 100%; padding: 3px 0 3px 0; color: #ffffff ; font-weight: bold ; text-align: center ; font-size: 10pt ; display: block ;} .staff_landing-image{width: 100%; opacity: 0.7; overflow:hidden; object-fit:none;} .staff_landing-image:hover {opacity: 1.0;} .staff_panel-icons{} .staff_uploader{} .department-message {text-align: center;width: 100%;color: #fbb513; padding-top:2%; } #staff_events_nav ul {font-size: 10px;font-weight: bold;color: #615E5E;float: left;width: 60%;margin: 0% 20%;position: relative;} #staff_events_nav ul:last-child {margin-bottom: 30px;} #staff_events_nav ul li {display: inline-block;font-family: 'Ubuntu', sans-serif;font-size: 13px;margin:10px;} #staff_events_nav ul li a {padding: 10px 15px;color: #42a8a9;border-bottom: 2px solid;} #staff_events_nav ul li a:hover {border-bottom: 2px solid #42a8a92b;} #staff_department_container {width: 80%;margin: auto;margin-top: 40px;display: inline-block;} #event-buttons {width:100%; } #event-header-box {float: left;width: 96%;margin: 1% 2%;} .upload_annc { color: #fb1d1d; display: block; font-weight: 500;} .staff_department_container { background: #fff;display:inline-block;} /*note to self: stop changing this! it messes up most of the staff pages. look at book slots if you edit this again.*/ /* ------------------------------------------------------------------------------------------------------------------------------------- */ /* 07. MISC /* ------------------------------------------------------------------------------------------------------------------------------------- */ /* Latest Badges */ .latest-badges {text-align: center;width: 11.5%;overflow: hidden;background-color: #f5f5f5;float: left;margin-right: 1%;margin-bottom: 1%;height: 120px;} .latest-clothes { text-align: center; width: 15.6%; overflow: hidden; background-color: #f5f5f5; float: left; margin-right: 1%; margin-bottom: 1%; height: 145px; } .latest-badges img { background-repeat: no-repeat; background-position: 50% 50%; width: 100%; height: 60px; } .latest-badges-code {font-weight:bold;font-size:smaller;} .latest-badges-text { width: 94%; margin: auto; overflow: hidden; font-size: smaller;} .latest-badges-widget {text-align: center; width: 14%; float: left; margin: 1%; height: 60px; cursor: pointer;} .news-header-wrapper-valentines {background: url(images/headers/hearts.png) bottom left,linear-gradient(140deg,#b53573 50%,#e6599d 50%,#e6599d 70%,#ff9fc3 70%,#ff9fc3 85%,#f9cede 85%,#f9cede 100%);width: 93%;color: #FFF;float: left;font-size: 20px;padding:2% 3%} /* ------------------------------------------------------------------------------------------------------------------------------------- */ /* 07. FOR THE NEW GENERATORS /* ------------------------------------------------------------------------------------------------------------------------------------- */ .field { padding: 10px; color: #ccc; border-radius: 0px; border: 1px solid #ccc; margin-bottom:10px; } .submitbut { height: 38px; padding: 5px; font-weight: bold; border: 1px solid #ccc; } .selector { display: inline-table; width:100%; } .alts { display: inline-block; border: 1px solid #ccc; padding: 0.5%; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; width: 10.5%; margin: 2% 2% 0 0; height: 90px; overflow: hidden; cursor: pointer; background:url("/scripts/productgrid.png"); padding:0.5%; } .alts:hover { background: url("/scripts/productgrid.png"); opacity:0.6; } .alts:nth-of-type(8n) { margin-right: 0px!important; } .alttitle {display:none;} .thealt { display: block; margin: auto; padding-bottom: 20px; } .alts:active { background: #ccc; } .alts img { object-position: revert; width: 100%; height: 100%; object-fit: scale-down; } /* ------------------------------------------------------------------------------------------------------------------------------------- */ /* 09. DARK MODE! /* ------------------------------------------------------------------------------------------------------------------------------------- */ /* homepage/basic stuff*/ body.dark-mode {background: #222;} .dark-mode #radio-wrapper {background: #333;border-color: #666;} .dark-mode .featured-content, .dark-mode .news-wrapper, .dark-mode .home-goodies-content, .dark-mode #home-rares, .dark-mode .widget-content-wrapper, {background: #333;color: #ccc;} .dark-mode #request_line2 .dj_message_habbo {background: #222;border: 0;color: #444;} .dark-mode textarea.dj_message_message {background: #222;border: 0px;} .dark-mode h1, .dark-mode h2, .dark-mode h3, .dark-mode h4, .dark-mode h5, .dark-mode h6 {color: #eee;} .dark-mode hr {border: 1px solid #3f3f3f;margin: 10px;} .dark-mode .home-guides-item h3 {background-color: #111;} .dark-mode .hxtTab, .dark-mode .home-rare-products-price, .dark-mode .post-badge {background-color: #000000a1!important;} .dark-mode .home-rare-product, .dark-mode #footer-sotm, .dark-mode .products .product.type-product {background: url(https://habbox.com/wp-content/uploads/2022/08/productgrid-dark.png);} .dark-mode .message-header-wrapper {background:url(images/headers/music.png), linear-gradient(140deg, #9a5408 40%, #b1620b 40%, #b1620b 55%, #c16d0e 55%, #c16d0e 70%, #d67b14 70%, #d67b14 85%, #ef8a1a 85%, #ef8a1a 100%)} .dark-mode .news-header-wrapper {background:url(images/headers/general.png), linear-gradient(140deg, #9a5408 40%, #b1620b 40%, #b1620b 55%, #c16d0e 55%, #c16d0e 70%, #d67b14 70%, #d67b14 85%, #ef8a1a 85%, #ef8a1a 100%);} .dark-mode .home-footer {background:url(/wp-content/themes/habboxv7/images/headers/search.png),linear-gradient(140deg,#111 50%,#222 50%,#222 70%,#333 70%,#333 85%,#555 85%,#555 100%)} .dark-mode #footer-wrapper {background-color: #1a1a1a;} .dark-mode .tags a {background-color: #222;} .dark-mode #radio-refresh {color: #666;} .dark-mode #radio-stop, .dark-mode .comment, .dark-mode #radio-play {border-color: #666;} .dark-mode .ui-slider-horizontal, .dark-mode .ui-slider-horizontal .ui-slider-range-min, .dark-mode .ui-slider-horizontal .ui-slider-handle {background: #666;} .dark-mode #comment {background: #1a1a1a; color: #ccc;} .dark-mode .pageheader, .product_title.entry-title {color: #7e7e7e;} .dark-mode .ff-default .ff-el-form-control {background: #222222;color: #ccc;} .dark-mode .radio-controls {background: #666666;} .dark-mode .widget-content-wrapper, .dark-mode .news-wrapper, .dark-mode .home-goodies-content, .dark-mode #home-rares, .dark-mode .comment, .dark-mode ul.children .comment, .dark-mode .comments-wrapper {background-color: #333;color: #fff;} /* rv */ .dark-mode .price {background-color: #222;} .dark-mode .habbox-banner::before {filter: brightness(0.72) saturate(0.85) contrast(1.05);} .dark-mode .summary.entry-summary .price {background-color: #333333;}