*:not(font) { /* color:#ffffffbf; */ color: #ffffffbf; } body { margin: 0; padding: 0; font-size: 12px; font-family: 'Open Sans'; background: #000 url(images/bg.jpg) top center no-repeat; } table.tftable {font-size:12px;color:#fbfbfb;width:100%;border-width: 1px;border-color: #686767;border-collapse: collapse;} table.tftable th {font-size:12px;background-color:#171515;border-width: 1px;padding: 8px;border-style: solid;border-color: #686767;text-align:left;} table.tftable tr {background-color:#2f2f2f;} table.tftable td {font-size:12px;border-width: 1px;padding: 8px;border-style: solid;border-color: #686767;} /* @font-face { font-family: 'HackingTrashed-Regular'; src: url('hackingtrashed-regular.eot'); src: url('hackingtrashed-regular.eot?#iefix') format('embedded-opentype'), url('hackingtrashed-regular.svg#HackingTrashed-Regular') format('svg'); } */ .fontpro,.fontpro-26549 { font-family: 'HackingTrashed-Regular',sans-serif; } .wrap { width: 100%; } .row { margin: 0 auto; width: 1000px; } .right h2 { margin: 0; width: 655px; height: 54px; line-height: 43px; text-transform: uppercase; color: orange; font-family: 'HackingTrashed-Regular',sans-serif; font-size: 25px; text-align: left; text-indent: 25px; text-shadow: 1px 0 1px #343434; } table th {font-size:12px;background-color:#111111;border-width: 1px;padding: 8px;border-style: solid;border-color: #ffffffbf;text-align:left; font-family: 'HackingTrashed-Regular',sans-serif;} table {font-size:12px;color:#ffffffbf;width:100%;border-width: 1px;border-color: #ffffffbf;border-collapse: collapse;} table tr {background-color:#222222;} table td {font-size:12px;border-width: 1px;padding: 8px;border-style: solid;border-color: #bcaf91;} table a:link {color: #ffffffbf;} table a:visited {color: #ffffffbf;} table a:hover {color: #ffb245;} table a:active {color: #ffffffbf;} table a:focus {color: #ffffffbf;} a:link {color: #ffffffbf;} a:visited {color: #ffffffbf;} a:hover {color: #ffb245;} a:active {color: #ffffffbf;} a:focus {color: #ffffffbf;} #outer { } /* Top Bar Styles */ #top_bar { height: 30px; color: #ffffffbf; line-height: 30px; text-shadow: 1px 0 1px #000; } #top_bar a { display: block; margin-left: 30px; line-height: 31px; text-indent: -825px; color: #ffffffbf; text-decoration: none; background: url(/css/css/images/users_ico.png) center left no-repeat; } #top_bar a:hover { opacity: .65; } /* Header Styles */ #header { position: relative; z-index: 10; } #header #logo { margin: 30px 50px 0 30px; position: relative; float: left; /* width: 427px; */ width: 33%; height: 105px; background: url(https://themafialife.com/tml4.gif) no-repeat; /* margin-bottom: 14px; */ margin-bottom: 2px; background-size: contain; z-index: 10; } #header #profile { float: right; margin: 10px 0px 10px 5px; font-size: 11px; color: #8f8f8f; /* margin-right:59px; */ margin-right:26px; } #header #stats { display:inline-block; float: left; margin-top:12px; } #header #stats .stat_container .title { float: left; text-align: right; color: #ffffffbf; font-size: 11px; line-height: 19px; width:50px; } #header #stats .stat_container .after_title { float: left; text-align: right; color: #ffffffbf; font-size: 11px; line-height: 19px; } #header #stats .stat_container .stat { float: left; margin-left: 5px; width: 100px; height: 19px; filter: brightness(2.5); padding-right: 5px; } #header #profile #avatar { float: left; width: 95px; height: 97px; background: url(images/avatar.png) no-repeat; margin-top: 10px; } #header #profile #details { float: left; margin-left: 15px; line-height: 18px; text-align:left; margin-top: 5px; } #header #profile #details span { color: #ff6936; } #header #profile #details a.btn { display: block; margin-top: 3px; /* width: 130px; */ height: 22px; line-height: 22px; text-align: center; color: #ffffffbf; text-decoration: none; /* background: url(images/orange_btn.png) no-repeat; */ background-color: #ecf0f1; color: black; font-weight: 700; border-radius: 4px; } #header #profile #details a.btn:hover { opacity: .65; } /* Main Styles */ #main { position: relative; margin-top: -10px; z-index: 500; } #main .top { height: 67px; background: url(/images/content_bg_01.png) no-repeat; } #main .top .pad { padding: 16px 0 0 37px; } #main .top #search_box { float: left; margin-top: 3px; width: 182px; height: 29px; background: url(/css/images/search_player_box.png) no-repeat; } #main .top #search_box input.clear { float: left; margin: 1px 0 0 7px; height: 25px; width: 145px; color: #5d5d5d; font-size: 11px; border: none; outline: none; background: none; } #main .top #search_box input.search { cursor: pointer; border: none; outline: none; background: none; } #main .top #info { float: right; /* width: 76%; */ padding-top: 4px; right: 60px; position: relative; } #main .top #info a { color:#ffffffbf !important; } #main .top #info span.page_resource { float: left; display: block; /* line-height: 20px; */ text-indent: 20px; color: #ffffffbf; font-size: 11px; background: url(/css/images/jail_ico.png) center left no-repeat; padding-left: 2px; margin-left: 4px; } #main .top #info span.page_hospital { float: left; display: block; /* line-height: 20px; */ text-indent: 20px; color: #ffffffbf; font-size: 11px; background: url(/css/images/hosp.png) center left no-repeat; padding-left: 2px; margin-left: 8px; } #main .top #info span.page_jail { float: left; display: block; /* line-height: 20px; */ text-indent: 20px; color: #ffffffbf; font-size: 11px; background: url(/css/images/jail_ico.png) center left no-repeat; padding-left: 2px; margin-left: 8px; } #main .top #info span.page_gameupdates { float: left; display: block; /* line-height: 20px; */ text-indent: 20px; color: #ffffffbf; font-size: 11px; background: url(/css/images/news_ico.png) center left no-repeat; padding-left: 2px; margin-left: 8px; } #main .top #info span.page_gamechat { float: left; display: block; /* line-height: 20px; */ text-indent: 20px; color: #ffffffbf; font-size: 11px; background: url(/css/images/mail_ico.png) center left no-repeat; padding-left: 2px; margin-left: 8px; } #main .top #info span.page_mail { float: left; display: block; /* line-height: 20px; */ text-indent: 20px; color: #ffffffbf; font-size: 11px; background: url(/css/images/mail_ico.png) center left no-repeat; padding-left: 2px; margin-left: 8px; } #main .top #info span.page_events { float: left; display: block; /* line-height: 20px; */ text-indent: 20px; color: #ffffffbf; font-size: 11px; background: url(/css/images/events_ico.png) center left no-repeat; padding-left: 2px; margin-left: 8px; } #main .top #info span.page_events a, #main .top #info span.page_mail a { color: #ffffffbf; } #main .top #info span.location { float: left; display: block; /* line-height: 20px; */ text-indent: 20px; color: #ffffffbf; font-size: 11px; margin-left: 8px; background: url(/css/images/location_ico.png) center left no-repeat; } #main .top #info span.page_news { float: left; display: block; margin-left: 8px; /* line-height: 20px; */ text-indent: 20px; color: #ffffffbf; font-size: 11px; background: url(/css/images/news_ico.png) center left no-repeat; } #main .top #info span.clock { float: left; display: block; margin-right: 14px; /* line-height: 20px; */ text-indent: 20px; color: #ffffffbf; font-size: 11px; background: url(/css/images/clock_ico.png) center left no-repeat; } .middle.row { background: url(/css/images/content_bg_02.png); min-height: 900px; margin-bottom:-47px; } #main .middle #left { float: left; width: 215px; } #main .middle #left #menu { margin-left: 11px; width: 215px; } /* #maincontent styles */ div#maincontent { width: 70%; text-align: left; margin-left:200px; } #maincontent h2 { font-family: monospace; font-size: 24px; margin: 0 0 12px; } #maincontent p { font-family: monospace; } /* smart ads slider styles */ .clearfix { clear: both; } .vertical-text-slider { position: relative; border: 1px solid #ffffffbf; background: #222; margin-bottom: 20px; } /* .vertical-text-slider::before { position: absolute; right:0; top:0; bottom:0; width:26px; background: #111; content: " "; border-left: 1px solid #ffffffbf; } */ .slick-track { position: relative; } .slider-icon { float: left; display: block; width: 26px; height: 26px; text-align: center; vertical-align: middle; } .slider-icon a { display: block; background: #ccc; width: 100%; height: 100%; line-height: 26px; font-size: 21px; font-weight: 700; text-decoration: none; } .slider-icon a img { width: 16px; height: 16px; padding: 5px; } .slider-frame { float: left; display: block; height: 26px; width: calc(100% - 26px); overflow: hidden; } ul.slides { list-style-type: none; /* transform: translateY(26px); */ padding: 0; margin: 0; } .slide { height: 26px; word-wrap: break-word; } .slide .slide-content { box-sizing: border-box; padding: 0 3px 0 12px; float: left; height: 26px; /* width: calc(100% - 28px); */ overflow: hidden; } .slide .slide-content span { font-size: 12px !important; line-height: 26px !important; display: flex; height: 100%; justify-content: center; flex-direction: row; } .slide .slide-content span a { display: flex; justify-content: center; flex-direction: column; } .slide .slide-content p { font-size: 12px; line-height: 16px; margin: 0; } .slide .slide-action { float: left; width: 28px; height:26px; overflow: hidden; /* background: #ccc; */ } .slide .slide-action a { display: block; text-align: center; color: red; } .slide .slide-action a img { padding: 5px 6px; } a.menu { float: right; margin: 0 0 3px 0; display: block; width: 193px; height: 34px; line-height: 34px; text-indent: 25px; text-decoration: none; color: #ffffffbf; text-shadow: 1px 0 1px #000; background: url(/css/images/menu_link.png) no-repeat; } a.menu:hover { width: 215px; color: #ffb245; background: url(/css/css/images/menu.png) no-repeat; } #staff_panel { margin: 10px 0 0 0; /* width: 190px; */ /* background: url(/css/images/staff_panel_box.png) no-repeat; */ border: 1px #ffffff57 solid; border-radius: 10px; padding-bottom: 15px; } #staff_panel .pad { padding: 6px 8px 0 8px; } #staff_panel span.title { display: block; line-height: 20px; color: #ffffffbf; } #staff_panel a { color: #818181; font-size: 11px; text-decoration: none; } #main .middle #right { float: left; margin-left: 30px; width: 700px; line-height: 22px; color: #7a7a7a; } .bottom.row{ height: 173px; background: url(/css/images/content_bg_03.png) no-repeat; } /* Footer Styles */ #footer { height: 134px; background: url(/css/images/footer_bg.png) top center no-repeat; } .spacer { clear: both; } #main .middle #left #menu a.menu { float: right; margin: 0 0 3px 0; display: block; width: 193px; height: 34px; line-height: 34px; text-indent: 25px; text-decoration: none; color: #ffffffbf; text-shadow: 1px 0 1px #000; background: url(images/menu_link.png)no-repeat; } div#menu { float: left; margin-left:30px; display: block; width: 193px; height: 34px; text-decoration: none; color: #ffffffbf; text-shadow: 1px 0 1px #000; /* background: url(images/menu_link.png); */ } div#menu1 { float: left; margin-left:-193px; margin-top:38px; display: block; width: 193px; height: 34px; line-height: 34px; text-indent: 25px; text-decoration: none; color: #ffffffbf; text-shadow: 1px 0 1px #000; background: url(images/menu_link.png);} h3 { display: block; font-size: 1.17em; -webkit-margin-before: 1em; -webkit-margin-after: 1em; -webkit-margin-start: 0px; -webkit-margin-end: 0px; font-weight: bold; color:#7a7a7a; } contenthead { display: block; font-size: 1.17em; -webkit-margin-before: 1em; -webkit-margin-after: 1em; -webkit-margin-start: 0px; -webkit-margin-end: 0px; font-weight: bold; color:#7a7a7a; } #dottedRow { border-bottom: 1px dotted #666666; padding: 5px; } #dottedRow1 { border-bottom: 1px dotted #666666; border-left: 1px solid #666666; padding: 5px; } #dottedRow2 { border-bottom: 1px dotted #666666; border-right: 1px solid #666666; padding: 5px; } #dottedRow3 { border-bottom: 1px solid #666666; border-top: 1px solid #666666; padding: 5px; } #dottedRow4 { border-bottom: 1px solid #666666; border-top: 1px solid #666666; border-right: 1px solid #666666; padding: 5px; } #dottedRow5 { border-bottom: 1px solid #666666; padding: 5px; } #dottedRow6 { border-bottom: 1px solid #666666; border-right: 1px solid #666666; padding: 5px; } #dottedRow7 { border-bottom: 1px solid #666666; border-left: 1px solid #666666; padding: 5px; } #botlink { background: rgba(0, 0, 0, .25); padding: 10px; margin: 0 auto; border: #303030 thin solid; } .progress-bar { background-color: #000000; width: 100px; padding:1px; height:10px; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; } .progress-bar span { display: inline-block; height: 8px; width: 100px; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; -moz-box-shadow: 0 0 5px #000 inset, 0 0 0 #444444; -webkit-box-shadow: 0 0 5px #000 inset, 0 0 0 #444444; box-shadow: 0 0 5px #000 inset, 0 0 0 #444444; -webkit-transition: width .4s ease-in-out; -moz-transition: width .4s ease-in-out; -ms-transition: width .4s ease-in-out; -o-transition: width .4s ease-in-out; transition: width .4s ease-in-out; at:left; } .blue span { background-color: #000000; } .stripes span { -webkit-background-size: 30px 30px; -moz-background-size: 30px 30px; background-size: 30px 30px; background-image: -webkit-gradient(linear, left top, right bottom, color-stop(.25, rgba(50,100,200,0.75)), color-stop(.25, transparent), color-stop(.5, transparent), color-stop(.5, rgba(50,100,200,0.75)), color-stop(.75, rgba(50,100,200,0.75)), color-stop(.75, transparent), to(transparent)); background-image: -webkit-linear-gradient(135deg, rgba(50,100,200,0.75) 25%, transparent 25%, transparent 50%, rgba(50,100,200,0.75) 50%, rgba(50,100,200,0.75) 75%, transparent 75%, transparent); background-image: -moz-linear-gradient(135deg, rgba(50,100,200,0.75) 25%, transparent 25%, transparent 50%, rgba(50,100,200,0.75) 50%, rgba(50,100,200,0.75) 75%, transparent 75%, transparent); background-image: -ms-linear-gradient(135deg, rgba(50,100,200,0.75) 25%, transparent 25%, transparent 50%, rgba(50,100,200,0.75) 50%, rgba(50,100,200,0.75) 75%, transparent 75%, transparent); background-image: -o-linear-gradient(135deg, rgba(50,100,200,0.75) 25%, transparent 25%, transparent 50%, rgba(50,100,200,0.75) 50%, rgba(50,100,200,0.75) 75%, transparent 75%, transparent); background-image: linear-gradient(135deg, rgba(50,100,200,0.75) 25%, transparent 25%, transparent 50%, rgba(50,100,200,0.75) 50%, rgba(50,100,200,0.75) 75%, transparent 75%, transparent); -webkit-animation: animate-stripes 3s linear infinite; -moz-animation: animate-stripes 3s linear infinite; } @-webkit-keyframes animate-stripes { 0% {background-position: 0 0;} 100% {background-position: 60px 0;} } @-moz-keyframes animate-stripes { 0% {background-position: 0 0;} 100% {background-position: 60px 0;} } .floaty { background:rgba(0,0,0,.25); border:thin solid #333; border-radius:5px; margin-top:10px; margin-bottom:10px; padding:15px 5px 10px; text-align:center; } .flexcont{ display:flex; align-items:center; } .flexele{ flex:1; text-align:center; } .resource-plot{ flex-basis:25%; text-align:center; height:100px; line-height:100px; } .crime{ width:23%; padding-bottom:2%; padding-top:2%; margin-left:1.5%; margin-bottom:1.5%; background:rgba(0,0,0,.25); border:black thin solid; display:inline-block; text-align:center; } .notify{ color:#00ff00; } .floatylinks{ font-size:14px; background:#000000; color:#c7c5c5; border:thin solid #333; padding:10px; border-radius:5px; margin:2px; } .floatylinks:hover{ background:rgba(0,128,0,.125); } a{ text-decoration:none!important; } #newtables { margin-bottom: 25px; } #newtables td, #newtables th { text-align: center; } .donate :not(font) { color:#ffffffbf; } .cta, .cta b { color: chartreuse !important; font-size: 15px; font-family: monospace; } .donate_rules { text-align: left; padding-left: 15px; font-size: 15px; } .donate_rules li { padding-top: 10px; list-style-type: none; } .ui-autocomplete { position: absolute; width: 221px; top: 190px; left: 489.5px; z-index: 999999999; cursor: default; } .ui-autocomplete-loading { background: white url('images/ui-anim_basic_16x16.gif') right center no-repeat; } * html .ui-autocomplete { width:1px; } .ui-menu { list-style:none; padding: 10px; margin: 0; display:block; width:215px; background-color: #111111f5; border-radius: 5px; line-height: 1.5em; } .ui-menu .ui-menu { margin-top: -3px; } .ui-menu .ui-menu-item { margin:0; padding: 0; width: 200px; } .ui-menu .ui-menu-item a { text-decoration:none; display:block; padding:.2em .4em; line-height:1.5; zoom:1; } .ui-menu .ui-menu-item a.ui-state-hover, .ui-menu .ui-menu-item a.ui-state-active { margin: -1px; } .ui-helper-hidden-accessible { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } .ui-state-default { float: right; margin: 0 0 3px 0; display: block; width: 193px; height: 34px; line-height: 34px; text-decoration: none; color: #ffffffbf; text-shadow: 1px 0 1px #000; background: url(/css/images/menu_link.png) no-repeat; } .ui-state-default:hover { width: 215px; color: #ffb245; background: url(/css/css/images/menu.png) no-repeat; } .ui-state-default:hover a { color: #ffb245; } .ui-state-default a { padding: 10px 40px; } .forumhover { cursor: pointer; } .spinButton { -moz-box-shadow:inset 0px 1px 3px 0px #91b8b3; -webkit-box-shadow:inset 0px 1px 3px 0px #91b8b3; box-shadow:inset 0px 1px 3px 0px #91b8b3; background-color:#768d87; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; border:1px solid #566963; display:inline-block; cursor:pointer; color:#ffffff; font-family:Arial; font-size:15px; font-weight:bold; padding:10px 37px; text-decoration:none; text-shadow: 0px -1px 0px #2b665e; } .spinButton:hover { background-color:#6c7c7c; } .spinButton:active { position:relative; top:1px; } .checkboxes label { padding-right: 10px; white-space: nowrap; } .checkboxes input { vertical-align: middle; } .radiobuttons label { padding-right: 10px; white-space: nowrap; } .radiobuttons input { vertical-align: top; } .clear { padding: 8px 0; } .confirm { color: dodgerblue; } a.preslink { font-size: 16px; color: #79f807; text-decoration: underline!important; } a.preslink1 { font-size: 16px; color: #f32525; } #pricing-table { margin: 10px auto; text-align: center; width: 892px; /* total computed width = 222 x 3 + 226 */ } #pricing-table .plan { font: 12px 'Lucida Sans', 'trebuchet MS', Arial, Helvetica; text-shadow: 0 1px rgba(0,0,0,0.5); background: #d3d3d3; border: 1px solid #ff0000; color: #333; padding: 20px; width: 191px; /* plan width = 180 + 20 + 20 + 1 + 1 = 222px */ float: left; position: relative; } #pricing-table #most-popular { z-index: 2; top: -13px; border-width: 3px; padding: 30px 20px; /* border-radius: 5px; */ box-shadow: 20px 0 10px -10px rgba(0, 0, 0, .15), -20px 0 10px -10px rgba(0, 0, 0, .15); } /* #pricing-table .plan:nth-child(1) { border-radius: 5px 0 0 5px; } #pricing-table .plan:nth-child(4) { border-radius: 0 5px 5px 0; } */ /* --------------- */ #pricing-table h5 { font-size: 20px; font-weight: normal; padding: 20px; margin: -20px -20px 0 -20px; background-color: #111; /* background-image: linear-gradient(#000000, #696969); */ } #pricing-table.with-cicrle h5 { margin-bottom: 50px; } #pricing-table #most-popular h5 { background-color: #111; /* background-image: linear-gradient(#000, #000000); */ margin-top: -30px; padding-top: 30px; border-radius: 5px 5px 0 0; } /* #pricing-table .plan:nth-child(1) h5 { border-radius: 5px 0 0 0; } #pricing-table .plan:nth-child(4) h5 { border-radius: 0 5px 0 0; } */ #pricing-table h5 span { display: block; font: bold 20px/40px Georgia, Serif; color: #000000; background: #ffffffbf; border: 1px solid #ff0000; height: 100px; width: 100px; margin: 10px auto -65px; border-radius: 100px; box-shadow: 0 5px 20px #ddd inset, 0 3px 0 #999 inset; } /* --------------- */ #pricing-table ul { margin: 5px 0 0 0; color: #000000; padding: 0; list-style: none; } #pricing-table li { border-top: 1px solid #ddd; color: #000000; padding: 10px 0; font-size: 16px; } /* --------------- */ #pricing-table .price { margin: 5px -20px; background-color: #1112; padding: 10px 0; display: flex; justify-content: center; } #pricing-table .price span { color: #111; line-height: 25px; font-size: 18px; font-weight: 700; margin-left: 10px; } #pricing-table .signup { position: relative; padding: 8px 20px; margin: 12px 0 0 0; color: #ffffffbf; font: bold 14px Arial, Helvetica; text-transform: uppercase; text-decoration: none; display: inline-block; background-color: #ff0000; background-image: linear-gradient(#ff0000, #000000); border-radius: 3px; text-shadow: 0 1px 0 rgba(0,0,0,.3); } #pricing-table .signup:hover { color: #ff0000; background-color: #000000; background-image: linear-gradient(#000, #ffffffbf); } #pricing-table .signup:active, #pricing-table .signup:focus { background: #ff0000; top: 2px; box-shadow: 0 0 3px rgba(0, 0, 0, .7) inset; } /* --------------- */ .clear:before, .clear:after { content:""; display:table } .clear:after { clear:both } .clear { zoom:1 } .mb-0 { margin-bottom: 0px; } #lottery-prize { color: chartreuse; font-family: monospace; font-size: 2em; } .achlvl25{ background-image: url(images/lvl25.png) no-repeat; } .mt-3 { margin-top: 1rem !important } .pb-3 { padding-bottom: 1rem !important; } .mb-3 { margin-bottom: 1rem !important; } .poll-box { background: rgba(0,0,0,.25); border: thin solid #333; text-align: center; width: 75%; margin: 2em auto; } .poll-progress-bar { width: 100%; height: 20px; line-height: 20px; font-weight: bolder; border: 2px black solid; padding: 1px; color: white; border-radius: 3px; background: #0F2027; /* fallback for old browsers */ background: -webkit-linear-gradient(to right, #2C5364, #203A43, #0F2027); /* Chrome 10-25, Safari 5.1-6 */ background: linear-gradient(to right, #2C5364, #203A43, #0F2027); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ } #reply { color: black; } input, button, textarea, select, option, select:focus, option:first-of-type, .text-black { color: black; } .text-green { color: #37ff50; } .text-lime { color: lime; } .text-center { text-align: center; } .item-purchase { font-size: 14px; color: yellow!important; } .item-text { font-size: 14px; margin: 10px 0 0 0; } .mt-0 { margin-top: 0px!important; } .m-0 { margin: 0px!important; } .text-14 { font-size: 14px; } .text-18 { font-size: 18px; } .text-red { color: red; } .text-yellow { color: yellow!important; } p#cd { color: aliceblue; font-weight: 600; font-size: 14px; margin: 0 0 4px 0; } #chat_block { font-size: 14px!important; } .g-recaptcha { display: inline-block; } .l-item { flex-grow: 1; width: 33%; text-align: center; } .l-container { display: flex; } /** * Tooltip Styles */ /* Base styles for the element that has a tooltip */ [data-tooltip], .tooltip { position: relative; cursor: pointer; } /* Base styles for the entire tooltip */ [data-tooltip]:before, [data-tooltip]:after, .tooltip:before, .tooltip:after { position: absolute; visibility: hidden; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); opacity: 0; -webkit-transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out, -webkit-transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24); -moz-transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out, -moz-transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24); transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out, transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24); -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); pointer-events: none; } /* Show the entire tooltip on hover and focus */ [data-tooltip]:hover:before, [data-tooltip]:hover:after, [data-tooltip]:focus:before, [data-tooltip]:focus:after, .tooltip:hover:before, .tooltip:hover:after, .tooltip:focus:before, .tooltip:focus:after { visibility: visible; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); opacity: 1; } /* Base styles for the tooltip's directional arrow */ .tooltip:before, [data-tooltip]:before { z-index: 1001; border: 6px solid transparent; background: transparent; color: #000 content: ""; } /* Base styles for the tooltip's content area */ .tooltip:after, [data-tooltip]:after { z-index: 1000; padding: 8px; width: 160px; background-color: #000; background-color: hsla(0, 0%, 20%, 0.9); color: #000 content: attr(data-tooltip); font-size: 14px; line-height: 1.2; } /* Directions */ /* Top (default) */ [data-tooltip]:before, [data-tooltip]:after, .tooltip:before, .tooltip:after, .tooltip-top:before, .tooltip-top:after { bottom: 100%; left: 50%; } [data-tooltip]:before, .tooltip:before, .tooltip-top:before { margin-left: -6px; margin-bottom: -12px; border-top-color: #000; border-top-color: hsla(0, 0%, 20%, 0.9); } /* Horizontally align top/bottom tooltips */ [data-tooltip]:after, .tooltip:after, .tooltip-top:after { margin-left: -80px; } [data-tooltip]:hover:before, [data-tooltip]:hover:after, [data-tooltip]:focus:before, [data-tooltip]:focus:after, .tooltip:hover:before, .tooltip:hover:after, .tooltip:focus:before, .tooltip:focus:after, .tooltip-top:hover:before, .tooltip-top:hover:after, .tooltip-top:focus:before, .tooltip-top:focus:after { -webkit-transform: translateY(-12px); -moz-transform: translateY(-12px); transform: translateY(-12px); } /* Left */ .tooltip-left:before, .tooltip-left:after { right: 100%; bottom: 50%; left: auto; } .tooltip-left:before { margin-left: 0; margin-right: -12px; margin-bottom: 0; border-top-color: transparent; border-left-color: #000; border-left-color: hsla(0, 0%, 20%, 0.9); } .tooltip-left:hover:before, .tooltip-left:hover:after, .tooltip-left:focus:before, .tooltip-left:focus:after { -webkit-transform: translateX(-12px); -moz-transform: translateX(-12px); transform: translateX(-12px); } /* Bottom */ .tooltip-bottom:before, .tooltip-bottom:after { top: 100%; bottom: auto; left: 50%; } .tooltip-bottom:before { margin-top: -12px; margin-bottom: 0; border-top-color: transparent; border-bottom-color: #000; border-bottom-color: hsla(0, 0%, 20%, 0.9); } .tooltip-bottom:hover:before, .tooltip-bottom:hover:after, .tooltip-bottom:focus:before, .tooltip-bottom:focus:after { -webkit-transform: translateY(12px); -moz-transform: translateY(12px); transform: translateY(12px); } /* Right */ .tooltip-right:before, .tooltip-right:after { bottom: 50%; left: 100%; } .tooltip-right:before { margin-bottom: 0; margin-left: -12px; border-top-color: transparent; border-right-color: #000; border-right-color: hsla(0, 0%, 20%, 0.9); } .tooltip-right:hover:before, .tooltip-right:hover:after, .tooltip-right:focus:before, .tooltip-right:focus:after { -webkit-transform: translateX(12px); -moz-transform: translateX(12px); transform: translateX(12px); } /* Move directional arrows down a bit for left/right tooltips */ .tooltip-left:before, .tooltip-right:before { top: 3px; } /* Vertically center tooltip content for left/right tooltips */ .tooltip-left:after, .tooltip-right:after { margin-left: 0; margin-bottom: -16px; } div.success{display:block;background:#00C000;color:#fff;border:thin solid #00FF00;border-radius:5px;padding:7px;margin:10px 0;font-weight:bold;} div.error{display:block;background:#C00000;color:#fff;border:thin solid #FF0000;border-radius:5px;padding:7px;margin:10px 0;font-weight:bold;} .d-inline { display: inline; } .float-right{ float: right; } .gangotd { display: flex; flex-direction: row; justify-content: space-around; align-items: center; flex-wrap: nowrap; /* padding: 15px 5px 15px; */ } .gangotd_i { display: flex; flex-direction: column; align-items: center; } .gangotd_i a { min-height: 80px; display: flex; flex-direction: column; justify-content: center; } /* Adjusted Tooltip styles */ .tooltip { pointer-events: none; position: fixed; display: none; max-width: 200px; /* Increase the width to fit more words within one line */ background-color: rgba(51, 51, 51, 0.8); /* Slightly transparent background */ color: #fff; text-align: center; border: 1px solid #000; /* 1px black border */ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); /* Black shadow */ border-radius: 5px; padding: 5px; z-index: 999; /* Increase the z-index to ensure the tooltip appears above other elements */ } /* ... Existing CSS styles ... */ .king-and-queen-table { margin: 20px auto; border-collapse: collapse; width: 80%; } .king-and-queen-table td { padding: 10px; text-align: center; border: 1px solid #ccc; } .king-and-queen-table img { border-radius: 50%; border: 2px solid #fff; } .king-and-queen-table strong { font-size: 18px; margin-top: 10px; } .king-and-queen-table span { font-size: 14px; color: #666; } /* ... Existing CSS styles ... */