/************************************************************************************************* * Floating Toolbar *************************************************************************************************/ #floating-toolbar { position: fixed; top: 0px; z-index: 1000010; width: 100%; background:url('../img/core/gradients/bg-topbar-grey.jpg'); height: 36px; min-width:980px; } #floating-toolbar .inner { padding: 0; margin: 3px auto 0; } #floating-toolbar.fixed .inner { width: 960px; margin-left: auto; margin-right: auto; } #floating-toolbar.fluid .inner { min-width: 960px; margin-left: 30px; margin-right: 30px; } #floating-toolbar #panel-search { margin-right: 6px; margin-left: 6px; } #floating-toolbar #panel-login { font: bold 12px/20px Arial, sans-serif; color: #CCC; margin-top: 4px; } #floating-toolbar #panel-login a, #floating-toolbar #panel-login a:visited, #floating-toolbar #panel-login a:active { text-decoration: none; color: #444; } #floating-toolbar #panel-login a:hover { color: #000; } #floating-toolbar #panel-login ul { list-style:none; margin: 0px; padding: 0px; } #floating-toolbar #panel-login ul li { list-style:none; margin: 0px 3px; float:left; } #floating-toolbar #panel-login .my-pm { padding: 2px 4px; margin: 0px 3px; color: white; background-color: #B50104; } #floating-toolbar #panel-login img.hwm_logo { margin:1px 0 0; } .layout-label { color: transparent; background: transparent url('../img/core/view-res-dark.png') no-repeat; text-indent: -999px; width: 18px; height: 12px; white-space: nowrap; } #floating-toolbar #utility-bar { margin: 8px 0 0 3px; } #floating-toolbar #utility-bar li { padding-left: 0px; } #floating-toolbar #utility-bar li.layout { height: 14px; color: #888; font: bold 12px/12px Arial, sans-serif; } #floating-toolbar #utility-bar li.hover, #floating-toolbar #utility-bar li.selected { color: #333; } #floating-toolbar #utility-bar #btn-layout-fixed { width: 31px; margin-left: 2px; background-image: none; } #floating-toolbar #utility-bar #btn-layout-fluid { width: 37px; margin-right: 10px; background-image: none; } #floating-toolbar #utility-bar .util-spacer { padding: 0; margin: 0 2px; width: 1px; background-color: #888; font-weight: normal; } #floating-toolbar #social-media { float: left; margin: 4px 0px 0px; width: 140px; } #floating-toolbar #social-media .desc { float: left; font: bold 12px/21px Arial, sans-serif; color: #CCC; } #floating-toolbar #social-media ul { float: left; margin: 0; padding: 0; list-style: none; width:100%; } #floating-toolbar #social-media li { float: left; margin-left: 5px; } #floating-toolbar #social-media li a, #floating-toolbar #social-media li img {display: block; width: 20px; height: 20px; overflow: hidden; } #floating-toolbar #social-media li a#tw { background: transparent url('/img/icons/social-sprites.png') -10px -10px no-repeat; } #floating-toolbar #social-media li a:hover#tw { background: transparent url('/img/icons/social-sprites.png') -10px -40px no-repeat; } #floating-toolbar #social-media li a#fb { background: transparent url('/img/icons/social-sprites.png') -40px -10px no-repeat; } #floating-toolbar #social-media li a:hover#fb { background: transparent url('/img/icons/social-sprites.png') -40px -40px no-repeat; } #floating-toolbar #social-media li a#yt { background: transparent url('/img/icons/social-sprites.png') -70px -10px no-repeat; } #floating-toolbar #social-media li a:hover#yt { background: transparent url('/img/icons/social-sprites.png') -70px -40px no-repeat; } #floating-toolbar #social-media li a#rss { background: transparent url('/img/icons/social-sprites.png') -100px -10px no-repeat; } #floating-toolbar #social-media li a:hover#rss { background: transparent url('/img/icons/social-sprites.png') -100px -40px no-repeat; } #floating-toolbar #social-media li a#app { background: transparent url('/img/icons/social-sprites.png') -130px -10px no-repeat; } #floating-toolbar #social-media li a:hover#app { background: transparent url('/img/icons/social-sprites.png') -130px -40px no-repeat; } #floating-toolbar #social-media li a#gplus { background: transparent url('/img/icons/social-sprites.png') -160px -9px no-repeat; } #floating-toolbar #social-media li a:hover#gplus { background: transparent url('/img/icons/social-sprites.png') -160px -39px no-repeat; } /************************************************************************************************* * Login Form Element on Shadowbox *************************************************************************************************/ #sb-player { min-height: 352px; min-width: 345px; } #sb-player .login-box { font: 13px/18px Arial, sans-serif; height: 26px; background: url('../img/login/bg-repeat-login.jpg') repeat-x; color: #CCC; padding: 0; } #sb-player .login-box #register-link { width: 195px; font-weight: bold; line-height: 14px; font-size: 11px; } #sb-player .login-box #register-icon { padding-top: 3px; } #sb-player .login-form { background-color: white; padding: 5px 0px; height: 270px; } #sb-player .login-form .login-form-container { text-align: center; } #sb-player .login-form input.text { border: 2px solid #DDD; text-align: center; font-size: 15px; font-weight: bold; padding: 7px 5px; width: 198px; } #sb-player .login-form-label { font-family: Arial, sans-serif; font-size: 12px; text-transform: uppercase; font-weight: bold; margin-top: 10px; } #sb-player .login-form-forget, .login-form-button { margin-top: 3px; } #sb-player .login-form-forget, .login-form-forget a, .login-form-forget a:visited { color: #999; font-size: 12px; } #sb-player .login-form-terms a, .login-form-terms a:visited { font-weight: bold; color: #000; } #sb-player .login-form-terms a:hover { color: #06c; } #sb-player .login-form-button .login-button { cursor: pointer; background-color: #8AC43A; border: none; color: #FFF; font-weight: bold; font-size: 13px; width: 212px; height: 35px; } /************************************************************************************************* * Login Form Element for Forums custom login page *************************************************************************************************/ #hwz-login-form { width: 600px; margin:0 auto 30px; } #hwz-login-form .login-box { font: bold 12px/58px Arial, sans-serif; height: 58px; background: #333; color: #fff; padding: 0 40px; } #hwz-login-form .login-box .right { margin-top:14px; } #hwz-login-form .login-box .right img { height:25px; } #hwz-login-form .login-box #register-link { width: 195px; font-weight: bold; line-height: 14px; font-size: 11px; } #hwz-login-form .login-box #register-icon { padding-top: 3px; } #hwz-login-form .login-form { background-color: white; padding: 5px 0px; height: 290px; border:1px solid #ccc; } #hwz-login-form .login-form input.text { border: 2px solid #DDD; text-align: center; font-size: 15px; font-weight: bold; padding: 7px 5px; width: 198px; } #hwz-login-form .login-form-label { font-family: Arial, sans-serif; font-size: 12px; text-transform: uppercase; font-weight: bold; margin-top: 20px; } #hwz-login-form .login-form-forget, .login-form-button { margin-top: 3px; } #hwz-login-form .login-form-forget, .login-form-forget a, .login-form-forget a:visited { color: #999; font-size: 12px; } #hwz-login-form .login-form-terms { margin-bottom:8px; } #hwz-login-form .login-form-terms a, .login-form-terms a:visited { font-weight: bold; color: #000; } #hwz-login-form .login-form-terms a:hover { color: #06c; } #hwz-login-form .login-form-button .login-button { cursor: pointer; background-color: #8AC43A; border: none; color: #FFF; font-weight: bold; font-size: 13px; width: 212px; height: 35px; } /************************************************************************************************* * My Profile Submenu on Floating bar *************************************************************************************************/ #floating-toolbar #panel-login #toggle-user-menu { max-width: 200px; overflow: hidden; white-space: nowrap; } #floating-toolbar #panel-login #toggle-icon { background-color: #88C539; margin: 4px 5px 0px; float: left; display: block; width: 12px; height: 10px; background-repeat: no-repeat; } #floating-toolbar #panel-login #toggle-icon.collapse { background-image: url('../img/core/icons/btn_collapse.png'); } #floating-toolbar #panel-login #toggle-icon.expand { background-image: url('../img/core/icons/btn_expand.png'); } #floating-toolbar #panel-login span.toggle { cursor: pointer; } #floating-toolbar #panel-login #my-profile { color: #444; font-weight: bold; } #floating-toolbar #panel-login #v-menu { display: block; position: relative; } #floating-toolbar #panel-login.inactive #v-menu { display: none; } #floating-toolbar #panel-login #v-menu ul { list-style-type: none; margin: 0px; padding: 0px; position: absolute; top: 27px; left: 10px; -moz-box-shadow: 0px 0px 5px #888; -webkit-box-shadow: 0px 0px 5px #888; z-index: 100000; box-shadow: 0px 0px 5px #888; } #floating-toolbar #panel-login #v-menu ul li { float: none; list-style-type: none; display: block; margin: 0px; padding: 0px; } #floating-toolbar #panel-login #v-menu ul li a, #floating-toolbar #panel-login #v-menu ul li a:visited { display: block; width: 120px; line-height: 24px; height: 24px; background-color: #FFF; color: black; font-size: 11px; font-weight: normal; text-align: left; padding-left: 10px; border: 1px solid #DDD; border-top-width: 0px; } #floating-toolbar #panel-login #v-menu ul li a:hover { background-color: #DDD; } /** * Page Search Form **/ #PageSearchForm { float: none; } #PageSearchForm fieldset { border: none 0; margin: 0px; padding: 0px; background-color: transparent; } #PageSearchForm input.text { background: none repeat scroll 0 0 #EEEEEE; border: 1px solid #BBBBBB; color: #333333; font-family: Arial, sans-serif; font-size: 13px; font-weight: normal; margin-top: 2px; padding: 1px 0px 1px 4px; height: 22px; line-height: 20px; width: 150px;/* SG Only */ } #PageSearchForm input.submit { background: transparent; width: 16px; height: 16px; margin-left: 1px; text-indent: 999em; cursor: pointer; } #PageSearchForm fieldset.popup { visibility: hidden; position: absolute; width: 220px; z-index: 1; font-size: 9px; background: #eee; border: 1px solid #ccc; padding: 5px; box-shadow: 2px 2px 5px #666; } #PageSearchForm fieldset.popup span, #PageSearchForm fieldset.popup label { float: left; height: 15px; line-height: 15px; vertical-align: middle; } #PageSearchForm fieldset.popup label { margin: 0 0 0 5px; } #PageSearchForm fieldset.popup { width: 220px; padding: 5px; } #PageSearchForm fieldset.popup span, #PageSearchForm fieldset.popup label { font-family: Arial, sans-serif; height: 15px; line-height: 15px; vertical-align: middle; } /* Back to top link */ #floating-top { margin-top: -6px; margin-left: 10px; } a#floating-top-link { display: block; width: 30px; height: 39px; background: transparent url('../img/core/icons/btt_down.png') 50% 50% no-repeat; } a#floating-top-link:hover { background-image: url('../img/core/icons/btt_hover.png'); } /*** Country Selector ***/ #country-selector { position: relative; width: 44px; height: 22px; line-height: 22px; border: 1px solid transparent; margin-top: 3px; margin-right: 20px; } #country-selector.active, #country-selector:hover { border: 1px solid #BBBBBB; } #country-selector-link { width: 44px; height: 22px; background: transparent url('../img/flags/arrow-darkgrey.png') 30px 50% no-repeat; display: block; } #country-selector.active #country-selector-link, #country-selector:hover #country-selector-link { background-image: url('../img/flags/arrow-active.png'); background-color: #EEEEEE; } #country-selector-link img { margin: 1px 3px; } #country-selector-flags { display: none; position: absolute; top: 23px; left: 0px; background-color: #FFF; list-style-type: none; border: 1px solid #000; margin-left: 0px; width: 104px; -moz-box-shadow: 0px 0px 5px #888; -webkit-box-shadow: 0px 0px 5px #888; box-shadow: 0px 0px 5px #888; z-index: 12; } #country-selector.active #country-selector-flags { display: block; } #country-selector-flags li a { display: block; height: 23px; color: #333; font: bold 12px/23px Arial, sans-serif; padding: 5px 0px; padding-left: 30px; background-color: transparent; background-position: 6px 50%; background-repeat: no-repeat; text-decoration: none; } #country-selector-flags li a.inactive { color: #A6A6A6; } #country-selector-flags li a:hover { background-color: #EEE; } #country-selector-flags li a#flag-sg { background-image: url('../img/flags/flag-sg.png'); } #country-selector-flags li a#flag-my { background-image: url('../img/flags/flag-my.png'); } #country-selector-flags li a#flag-ph { background-image: url('../img/flags/flag-ph.png'); } #country-selector-flags li a#flag-id { background-image: url('../img/flags/flag-id.png'); } #country-selector-flags li a#flag-th { background-image: url('../img/flags/flag-th.png'); } #country-selector-flags li a#flag-www { background-image: url('../img/flags/flag-www.png'); } #country-selector-flags li a.inactive#flag-sg { background-image: url('../img/flags/flag-sg-inactive.png'); } #country-selector-flags li a.inactive#flag-my { background-image: url('../img/flags/flag-my-inactive.png'); } #country-selector-flags li a.inactive#flag-ph { background-image: url('../img/flags/flag-ph-inactive.png'); } #country-selector-flags li a.inactive#flag-id { background-image: url('../img/flags/flag-id-inactive.png'); } #country-selector-flags li a.inactive#flag-th { background-image: url('../img/flags/flag-th-inactive.png'); } #country-selector-flags li a.inactive#flag-www { background-image: url('../img/flags/flag-www-inactive.png'); }