/* A `@media (pointer: coarse){touch-action:manipulation}` backstop was added here on 2026-09-05 and removed the same day, along with the JS scale pin that was the actual defect. Nothing on this page names a scale now, so a double tap and a pinch both undo themselves the way they do on any other web page. f134315 / docs/fw-viewport-scaling.md. */ h1, h2, h3, h4, h5, h6 { color: #333333; font-size: 13px; margin: 0; padding: 0;} h1 { font-size: 14px;} h4, h5 { font-size: 11px;} .app_content {margin: 3px 5px!important;padding-top:3px!important;} .ac {margin: 3px 5px;padding-top:3px;} .ac,.h,div,html{font-family:'San Francisco', tahoma,arial,sans-serif; font-size:11px; } .ac,.pad,h,table,td{font-size:11px;} a img{border:none} .clearfix{clear:both;} .clearfix:after { clear: both; content: "."; display: block; font-size: 0; height: 0; line-height: 0; visibility: hidden;} body{width:800px;margin:20px auto;background:#fff!important;margin-top:0;} .tabs_width{width:100%} /* was 760px inside the 800px body: My Crew/My Profile floated right to x=760, 40px shy of the edge. mobile/mobile2/handheld already force 100%/99%. */ .box .header{height:14px} a{color:#3B5998; cursor:pointer;text-decoration:none;} a:hover{text-decoration:underline} a:hover, a:hover span { text-decoration: underline; } .mainMenuDynamicItemLink a:hover span{text-decoration:underline!important;} .mainMenuLink{float:left!important;position:relative!important;} .index .logo{text-align:center;margin-bottom:150px;} .standard_message.has_padding{padding-bottom:0px} .prof .standard_message.has_padding{padding:5px 10px 10px 10px;} .box {display:inline;border:none!important;} .box .header { background: #D8DFEA none repeat scroll 0%; border-top: 1px solid #3B5998; margin: 0px; padding: 2px 8px; display:block; } .box .header h2 { color: #555555; /*3B5998*/ font-size: 11px; font-weight: bold; } .box .header .title {float:left;} .box .header .action {float:right;text-align:right;font-weight:normal;} .box .subheader{ background-color:#EEEEEE; border-bottom:1px solid #CCCCCC; border-top:1px solid #CCCCCC; color:#000000; font-size:11px; font-weight:normal; padding:3px 5px 2px; } /* clear:both - .box .header is pinned to height:14px (line 28), sized for 11px desktop type, and .box .header .title is float:left. Any title taller than 14px (an icon, a bigger font, two lines) leaves a sliver of that float hanging BELOW the blue bar, and this rule is overflow:visible so the sliver lands inside the content. Body text just flows around it and nobody ever noticed. A TABLE is a block box that may not overlap a float, so it shrinks to the leftover width and jumps the float's FULL width to the right - for its whole height. /prize-spin's 10-prize list rendered as a 220px table sitting 199px in, half of every row empty on the left (Joe, in the app, 2026-09-08). A no-op wherever the float already fits. */ .box .content { margin: 0px; clear: both; overflow: visible; padding: 10px 8px 10px; margin-bottom:10px; background-color: #F7F7F7; } .indent{padding-left:20px;} .sindent{padding-left:10px;} .box .content p{margin-top: 0;} .h .logo {margin:5px 0px 0px 5px;width:47%;float:left;} .h .news{width:48%;float:right;margin-top:10px;} #click { margin-top:5px;} .filters .selections { list-style-type:none; } .choices { border-top:1px solid #555555; padding-bottom:10px; margin-bottom:10px; } .choices .img { padding:5px 5px 0px 5px; } .small.choices .img{ padding:0;} .choices li .img img{ text-align:center; border:1px solid #CCCCCC; margin-top:5px; } .pp { margin-top:5px; } .pp .buttons { padding-bottom:20px; } .pp .buttons .inputbutton, .form .inputbutton { padding:3px; } .form.add{float:left;padding-top:11px;} .prof .content.form{padding:8px 4px;} .prof .form input{margin:5px 5px 5px 10px;} .prof .title_header{padding:0 0 0 15px;} .add { padding-left:10px;} #item_form{text-align:right;padding-right:10px;} .tiny{font-size:10px} .reg{font-size:11px} .twelve{font-size:12px} .twelvetable tr, .twelvetable td, .twelvetable{font-size:12px} .twelvef{font-size:12px!important} .cbox { width:640px; margin: 0 auto 0 auto; text-align:center; } .center,.c{text-align:center;} .title_header {text-align:left;} .left,.leftnormal{float:left;width:49%;} .right,.rightnormal{float:right;width:49%;} .left h3,.right h3 { padding:10px 0px; } .t.race h3{padding:0px!important;} .wallkit_frame h3{padding:2px 8px;} .right p { padding-left:30px;} .clear_both{clear:both;} .big{ font-size:13px;} .bigb{font-size:18px;font-weight:bold;} .left.main{width:65%;}.prof .left.main{width:60%;} .right.sub{width:33.75%;}.prof .right.sub{width:38.75%;} /* 98% left a 16px gutter; 98.75% leaves 10px, the same gap as between the sidebar cards */ .editorkit .editorkit_row input, .editorkit .editorkit_row textarea { width: 99%; } .prof .h {padding:0px 2px 5px 2px;border-bottom:1px solid #AAAAAA;margin-bottom:5px;} .customize.prof .h {padding-bottom:0px;border-bottom:none;} .view_on{font-weight:bold!important;background-color:#F0F0F0!important;padding:2px;} .prof .h .l{float:left;width:76%;} .prof .h .r{float:right;width:23%;text-align:right;} .prof hr,.search hr{border:none;border-top:1px solid #D8DFEA;} .faq,.friend_summary .padbig{line-height:16px;} .faq .que a:hover{text-decoration:underline} .faq .que {padding:5px;} .faq .ans {background:#FAFAFA none repeat scroll 0%;border:1px solid #D8DFEA;margin:3px 0px 20px;padding:5px 10px;} .inputtext{width:99%;} #item_container .img{font:10px arial,verdana;color:#000000;} .items .c{color:#444444;font-weight:bold;} .items .cf{ color:#3B5998;font-weight:bold;} .items .r{ color:#999999;} .l,.light{ color:#999999;} .m,.medium{ color:#666666;} .d{ color:#333333;} .dd{ color:#000000;} .shade_bg,.shade td{background-color:#EEEEEE;} .tar{text-align:right} .items p{padding-left:10px;} .t.items p{margin-bottom:6px;} .b{font-weight:bold} .t.msg{width:100%;border-bottom:1px solid #CCCCCC;margin-bottom:3px;padding-bottom:3px;} .t.msg .n{width:35px;} .n, .t .n h3, .n a {color:#323232;} .t td {vertical-align:top;} .t.items p{font:11px arial,verdana;} .t.items .cf{color:#AAAAAA} .prof .t.items .n{width:90px;} /* Georgia -> Wendy One (2026-08-25): the game font everywhere the apps already use it (mobile2.css has mapped .number/.big_number to wendy for years). Wendy has ONE weight - a faux-bold inside renders as a smear, so bold children are forced back to normal; use color for emphasis instead. georgia stays as the fallback while the ttf loads. */ .number{font:18px "wendy",georgia!important;} .big_number{font:24px "wendy",georgia!important;} .number b,.number strong,.number .bold,.big_number b,.big_number strong,.big_number .bold{font-weight:normal!important;} .standard_message p{font-size:13px;} .page{clear:both;text-align:right;padding-right:10px;color:#000000;font-size:11px;} .pagination_links{ float:right; padding-top:14px; } .pagination_links li{ display: inline; margin-left: 5px; } .pagination_pages_text a, .pagination_pages_num a, .pagination_pages_num_cur a, .pagination_pages_text a:visited, .pagination_pages_num a:visited, .pagination_pages_num_cur a:visited { padding: 2px 6px 4px 6px; border-top: 1px solid #FFFFFF; } .pagination_pages_num_cur a{ font-weight:bold; border-top: 1px solid #CCCCCC!important; background-color:#F3F3F3!important; } .pagination_pages_text a:hover, .pagination_pages_num a:hover, .pagination_pages_num_cur a:hover, .pagination_text a:hover { border-top: 1px solid #CCCCCC; background-color: #F4F4F4; } .pagination_text a { padding: 2px 6px 4px 6px; } .pagination_results { padding: 3px 0px 10px 0px; color: #999999; } .pagination_results{ list-style: none; } .cf h3{ /*height:66px; margin:10px;*/ } .cf h3 img { vertical-align:middle; } .fblue{color:#3B5998;} .blue{color:#004DCC!important;} .red{color:#CC0000!important;font-weight:normal;} .gold,.g{color:#E0B235!important;} a .red, .red a {text-decoration:underline;color:#CC0000;} .green{color:#00AA00;font-weight:normal;} a .green, .green a{text-decoration:underline;color:#00AA00;} .friend {width:74px;height:120px;float:left;text-align:center;padding-bottom:10px;} .friend.food_givers{height:55px!important;} .friend a:hover{text-decoration:none;} .friend a:hover .n{text-decoration:underline;} .sp .wallkit_post .wallkit_postcontent{margin-left:75px;} .sp .wallkit_post .wallkit_profilepic{width:75px;} .sp.votes .wallkit_post .wallkit_postcontent{margin-left:40px;} .sp.votes .wallkit_post .wallkit_profilepic{width:40px;} .dev_bg h4{ background-color:#F8F6EC !important; } .dev_footer{ color:#B5B5B5; display:block; font-size:9px; margin:10px 2px 2px 0pt; text-align:right; } .bold{font-weight:bold;} .b,.crap{color:#555555!important;} .normal,.nor{font-weight:normal;} .ul,.underline{text-decoration:underline;} .noul{text-decoration:none!important;} .share_link #share_link, .composer_fields .field #subject_field{width:350px!important;} /*.dsilver h4{background-color:#F2F2F0 !important;} .dgreen h4{background-color:#F8FFF3 !important;} .dyellow h4{background-color:#FFFDF0 !important;} .dred h4{background-color:#FFF3F2 !important;}*/ .dbrown h4{background-color:#F4F1EC !important;} .lred{background-color:#FFEDED;}.llred{background-color:#FFF5F5;}.lr,.lr a{color:#C27D7D} .lgreen{background-color:#EDFFEF;} .lyellow{background-color:#FFFEED;} .lgrey{background-color:#EEEEEE;} .lblue{background-color:#f0f5fe;} .choices .choice .img{padding:10px;width:150px;vertical-align:top; } .choices .choice .img img{ max-width: 250px} .choices .choice .details {padding:5px;padding-bottom:0;vertical-align:top;} .choices .pad{width:98%} .choices .pad .img img,.msg .img img,.brdr{border:1px solid #666666;margin:2px;} /* Chum art is stored at 2x (250x250) so it stays sharp on retina; 125px is the size it is MEANT to draw at - shop row, profile, flash banner, raffle, donate. Capped here rather than per call site because ~20 sites render this art and most set no width at all, so the next one added would regress. Matched on the src substring, which catches both the relative and the absolute (https://fishwrangler.com/...) forms the templates emit, plus any ?v stamp. No-op on thumbs/ (16px - max-width never scales an image UP), and deliberately NOT !important so the inline max-width:100px caps in _header_msgs / _header_dropdowns still win. */ img[src*="/images/chumnew/"]{max-width:125px} /* Same deal for skills art, which is stored at 2x (400x400) and drawn at 200px. The /customize/skills rows already set max-width:200px inline on both the visible and the hidden variant, but Earl's shack, the skill-learned alert on desktop, the night-fishing panel and the secItemAdd flash banner set no width, so they would have doubled. max-height caps elsewhere (Earl's 100px header, /ui-examples' 120px) still win - they bind height, which this never touches. */ img[src*="/images/skills/"]{max-width:200px} /* Resource art, doubled 2026-08-27. This family is the awkward one: 67 of its call sites set no width at all, and before the double its stored sizes ran from 59px to 500px, so the same list showed a 90px icon beside a 165px one. 100px is where the biggest consumer already had it - sectionResourceExchange's own .imgx img{max-width:100px} - so everything now lands there instead of rendering at whatever resolution its file happened to be. The detail-page heroes keep their inline max-width (180px on _resource_view_86/87, 200px on resourceViewSuccess:173) because an inline declaration outranks this, and they are the one place a resource is meant to be looked at rather than counted. The second rule exists because Earl's offers render inside .choices .choice .img, whose 250px rule at line 280 is (0,3,1) and would beat a bare attribute selector - the same specificity trap the chum shop hit. Not !important, or the heroes shrink. */ img[src*="/images/resource/"],video[src*="/images/resource/"]{max-width:100px} .choices .choice .img img[src*="/images/resource/"],.choices .choice .img video[src*="/images/resource/"]{max-width:100px} /* The flash-message header image. _header_msgs(2).php used to write this ceiling as an inline style, which outranks every src-scoped cap above - so an error header drew resource art at its full 2x size while the same art drew at 100px everywhere else. As a class it can be beaten by an attribute selector, and header_img_style (still inline) keeps beating both. 301/300 are the values those two templates had. */ .hdrimg{max-width:301px} .hdrimg2{max-width:300px} .hdrimg[src*="/images/resource/"],.hdrimg2[src*="/images/resource/"]{max-width:100px} img[src*="/images/treasure/special-bonus-"]{max-width:100px} .imgstatus{vertical-align:center;padding:2px;font-size:13px;font-weight:normal} .bigbrdr{border:1px solid #999999;} .choices .pad .img {width:200px} .chum.pad .img{width:100px} .lines.pad .img{width:100px} .msg .t{vertical-align:top;border-bottom:1px dotted #999999;} .msg .img{border-bottom:1px dotted #999999;padding:0;} .msg .img2{vertical-align:top;padding:8px;text-align:right;border-bottom:1px dotted #999999;} .nfmsgs .img2 img{max-width:30px;} .choices .details .detail td{vertical-align:bottom;} .choices .details .detail{padding:10px;line-height:2;} .choices .details .detail img{margin-bottom:-2px;} .choices .details .detail.r{padding-left:20px;} .choices .details .detail.r tr{vertical-align:top} .pad{padding:5px;}.mar{margin:5px;} .bb,.stats .bb td{border-bottom:1px solid #CCCCCC;} .padbig{margin:15px} .my_items td{vertical-align:top;} .padb{padding-bottom:5px} .huge{font:22px Arial,Verdana!important;font-weight:bold;} .thumb img,.my_items img,.i2{margin-bottom:-2px!important;} .i3{margin-bottom:-3px!important;} .i4{margin-bottom:-4px!important;} .i5{margin-bottom:-5px!important;} .my_items .i3{margin-bottom:-3px!important;}.my_items .i4{margin-bottom:-4px!important;} .x16{width:16px;height:16px;} .town-thumbnail{max-width:16px;max-height:16px;image-rendering:-moz-crisp-edges;image-rendering:pixelated;image-rendering:crisp-edges;} img[src*="/chumnew/thumbs/"]{max-width:16px;max-height:16px;} .bronze{color:#A34E1A}.silver{color:#A1A1A1}.gold{color:#DCAD17} .info_box{border:1px solid #CCCCCC;background:#F1F1F1;margin:5px;padding:15px;} .info_box .pad{line-height:16px} .alert_box{background:#D7E7FF url(https://fishwrangler.com/images/blue-bg.gif) repeat-x;padding:10px;text-align:center;} .red_box{background-color:#FFCECE;padding:10px;text-align:center;} .green_box{background-color:#CEFFD6;padding:10px;text-align:center;} .hide{display:none} .lh{line-height:1.5!important} .lh2{line-height:2!important} .treasure{width:150px;padding:20px;vertical-align:middle;text-align:center;} .treasure.border{border:2px solid #00AA00;} /* * Tabs */ div#mainmenucontainer {float:left; margin-left: 10px;} div#rightMenuSection { margin-right: 10px;} .not_mv2 div#rightMenuSection { float:right} .newtabs {height:21px; font-size:11px; font-family:'San Francisco',tahoma,arial,sans-serif} div.newtabs ul {margin:0; padding:0; list-style:none;} div.newtabs ul li {float:left; margin:0; padding:0; height:19px; line-height:19px;} div.newtabs ul li a {text-decoration:none; padding:0 10px; display:block; background:#F1F1F1; color:#000; font-weight:bold; border:1px solid #898989; margin-left:-1px; margin-bottom:-1px;} div.newtabs ul li a:hover {text-decoration:underline;} div.newtabs ul li a.selected {background:#6d84b4; color:#fff; border-color:#3B5998 #5973A9 #3B5998 #36538F; } div.newtabs ul li a.selected:hover {text-decoration:none;} div.newtabs ul li.first a {margin-left:0px;} /* alternate - right-aligned - tab */ div.newtabs ul li.alternateTab {float:right !important; position:relative; left:-43px; border-left:1px solid #898989; margin-left:-1px;} div.newtabs ul li.alternateTab a { border-left:1px solid #898989; } /* * MainMenu */ table.mainMenu {position:relative; padding: 0px; font-size:11px; border-top: solid 1px #898989; border-right: solid 1px #898989; font-family:'San Francisco',tahoma,arial,sans-serif} table.staticMenuItem {display:block; height: 20px; border-left:1px solid #898989; background:#F7F7F7 url(https://fishwrangler.com/images/menu/mb.gif) repeat-x; text-align:center; margin: 0; } table.staticMenuItem tr td {display:block; height: 20px} a.staticMenuItem {color:#000; font-weight:bold; margin: 0 8px; line-height:19px; vertical-align:middle } table.selectedMenuItem {display:block; height: 20px; border-left:1px solid #898989; background:#8092BD url(https://fishwrangler.com/images/menu/mbselected.gif) repeat-x; text-align:center} table.selectedMenuItem tr td {display:block; height: 20px} a.selectedMenuItem {color:#FFF; font-weight:bold; margin: 0 8px; line-height:19px} table.dynamicMenuItem {height: 21px; text-align:left; color:#000; z-index:6 } a.dynamicMenuItem {height: 21px; color:#000; font-weight: bold; margin: 0 8px; line-height:19px} div.rightMenuBarTabsHolder {position:absolute; z-index:5; margin-top: 4px; left:445px; width: 177px} div.dynamicMenuStyle {border: solid 1px #898989; border-top: none; background: #F7F7F7 url(https://fishwrangler.com/images/menu/mb.gif) repeat-x bottom; z-index:5} div.menuBarTabsHolder {position:relative; border-bottom: solid 1px #898989; z-index:101; height:21px; margin-top: 4px;} div.mainMenuStaticItem {text-align: center; border: solid 1px #898989; border-right: none; height: 20px; background: #F7F7F7 url(https://fishwrangler.com/images/menu/mb.gif) repeat-x} div.mainMenuStaticOpenedItem {border: solid 1px #898989; border-right: none; height: 21px; background: #F7F7F7;margin-bottom: -1px;} div.mainMenuLink a {display:block; float:left; white-space:nowrap; height: 20px; padding-top: 3px; line-height: 19px; padding: 0 8px; font-family: 'San Francisco',tahoma,arial,sans-serif; font-size: 11px; font-weight:bold; color: #000000} div.mainMenuLink a span {display: inline-block} div.mainMenuStaticItem a {color: #000000} div.mainMenuDynamicItem {clear:both} div.mainMenuDynamicItem a {color:#000000} div.mainMenuSelectedStaticItem {text-align: center; border: solid 1px #253E7F; border-right: none; height: 20px; background: #8092BD url(https://fishwrangler.com/images/menu/mbselected.gif) repeat-x} div.mainMenuSelectedStaticItem a {color: #FFFFFF} div.mainMenuSelectedStaticOpenedItem {text-align: center; border: solid 1px #253E7F; border-right: none; height: 21px; background: #8092BD;margin-bottom:-1px} div.mainMenuSelectedStaticOpenedItem a {color: #FFFFFF} div.mainMenuDynamicMenuContainer {border: solid 1px #898989; border-top: none; background: #fff; margin-left: -1px; margin-top: -2px; color: #000000;border-radius:0 0 5px 5px; -webkit-box-shadow: 0px 3px 5px 3px rgba(0,0,0,0.5); -moz-box-shadow: 0px 3px 5px 3px rgba(0,0,0,0.5); box-shadow: 0px 3px 5px 3px rgba(0,0,0,0.5); border:none!important; z-index:101; } div.mainMenuDynamicMenuContainer a {color: #000000} div.mainMenuDynamicMenuRightShadow{margin-left: -1px} div.mainMenuDynamicMenuBottomShadow{margin-left: 1px} .has_group a{padding-left:22px!important;} div.newtabs ul li.alternateTab {float:right !important; position:relative; left:-43px; border-left:1px solid #898989; margin-left:-1px;} div.newtabs ul li.alternateTab a { border-left:1px solid #898989; } /* * PopupWindow control */ div.popupWindow { visibility:hidden; position:absolute; left:0px; top:0px; overflow:visible;} div.popupWindowBlock { background:#FFFFFF; border:1px solid #E2E2E2; position:absolute; left:0px; top:0px; z-index:13; overflow:visible} div.popupWindowContent {background:#F7F7F7; border-style: solid; border-color: #E2E2E2; overflow:hidden} div.popupWindowShadow { position:absolute; left:4px; top:4px; z-index:8; overflow:hidden; background:#000; filter:progid:DXImageTransform.Microsoft.Alpha(opacity=25); opacity:.25; } div.windowShadowStyle {background:#000; filter:progid:DXImageTransform.Microsoft.Alpha(opacity=25); opacity:.25; } div.popupWindowClose { position:absolute; right:4px; top:1px; width:17px; height:18px; overflow:hidden; z-index:18; background:#FFF; cursor:pointer; text-align:left;} div.popupWindowClose img {border-width:0px 0px 1px 1px !important; border:solid #E2E2E2; margin-top:4px; } div.popupWindowHeader { color:#887F6F; padding: 5px; font-size:12px; font-weight:bold; border-bottom:1px solid #E4E2E2; } div.popupWindowText { font-weight:bold; color:#000; font-size:14px; padding:15px 5px;} div.popupWindowActions { padding:5px 5px 0px 5px;} #submenu .mainMenuLink a:hover{color:#3B5998;} .error h1,.errorbg{background:#F4E2E2 url(https://fishwrangler.com/images/red-bg2.gif) repeat-x!important;} .herror{line-height:1.5;margin:8px 5px 5px;padding:10px;font-size:12px;border:1px solid #E15E5E;background:#F4E2E2 url(https://fishwrangler.com/images/red-bg2.gif) repeat-x!important;} .herror h1,.hsuccess h1{margin-bottom:10px;} .status{background:#FFF9D7 url(https://fishwrangler.com/images/yellow-bg.gif) repeat-x!important;} .hsuccess{line-height:1.5;margin:8px 5px 5px;padding:10px;font-size:12px;border:1px solid #E2C822;background:#FFF9D7 url(https://fishwrangler.com/images/yellow-bg.gif) repeat-x!important;} .hgreen{line-height:1.5;margin:8px 5px 5px;padding:10px;font-size:12px;border:1px solid #20b91a;background:#d6fdcb url(https://fishwrangler.com/images/green-bg.gif) repeat-x!important;} .halert{line-height:1.5;margin:8px 5px 5px;padding:10px;font-size:12px;border:1px solid #747aef;background:#D7E7FF url(https://fishwrangler.com/images/blue-bg.gif) repeat-x!important;} .tos h1{text-decoration:underline;padding-top:5px} .tos .text{padding:10px 0px} .inputbutton.publish_form_submit,.fish .publish_form_submit { background:transparent url(https://fishwrangler.com/images/share.gif) no-repeat scroll right top!important; border:medium none #FFFFFF; height:14px; width:40px; } .dish .inputbutton.publish_form_submit,.dish .publish_form_submit { background:transparent url(https://fishwrangler.com/images/share-dish.gif) no-repeat scroll right top!important; border:medium none #FFFFFF; height:14px; width:40px; } .chest .inputbutton.publish_form_submit,.chest .publish_form_submit { background:transparent url(https://fishwrangler.com/images/share-treasure.gif) no-repeat scroll right top!important; border:medium none #FFFFFF; height:14px; width:40px; } .right.pub{text-align:right;margin-right:3px;} .onh a:hover{text-decoration:underline} .onh a{text-decoration:none;color:#666666;} .dev_post{background-color:#E8F3E0;} .rusty_post{background-color:#f3e8e0;} .earl_post{background-color:#f1efe0;} .jr_dev_post{background-color:#e0f3ea63;} .mod_post{background-color:#f3e0e0;} .mod_post{background-color:#e2e7f1;} .owner_post{background-color:#f3f1e0;} .board_topic .last_post {width:210px!important;} /*.town3{color:#006eea;}*//*bc -light blue*/ /*.town5{color:#b60000;}*//*mr - red*/ /*.town4{color:#014797;}*//*sc - dark blue*/ .town6,.town7,.town8,.town9,.town10, .town51,.town52,.town53,.town54{color:#650082;}/*icelantica - purple*/ .town91{color: #9b0ac9 } /*polar island brigther purple */ .town55 {color: #bd0028;} .town11,.town12,.town13 {color:#079b00;}/*sigs - */ .town14,.town15,.town16, .town35, .town36, .town37, .anniversary, .anniversary a{color:#bb8c00!important;}/*par - dark yellow*/ .town17,.town18,.town19, .town25,.town26,.town27{color:#6f7300;}/*g - green/yellow*/ .town38,.town39,.town40, .town28,.town29,.town30,.town31{color:#306f14;}/*ten year storm - dark green/yellow*/ .town41,.town42,.town43, .collectable, .collectable a{color: #2e897e;} .town44,.town45,.town46, .town32, .town33, .town34 {color: #8c2e29;} .town47,.town48,.town49{color: #009dde;} .town50, .town23, .polaroid, .polaroid a{color: #de4800!important;;} .town81,.town82,.town83,.town84,.town85,.town86,.town87,.town88,.town89,.town90{color: #ee5b15;} .town56{color: #001a56;} .town57, .town58,.town59,.town60 {color: #ff0454;} .town61,.town62{color: #e0222a;}/*gp*/ .town63,.town76,.town77,.town78, .quest, .quest a{color: #554437!important;;} .town65,.town66,.town67{color: #00c0c2;} .town68,.town69, .tournamenttext, .tournamenttext a{color: #a2043f!important;} .town70,.town71,.town72, .town79, .town80{color: #888} .town73,.town74,.town75, .storyline, .storyline a{color: #0087db;} .town92,.town93,.town94, .town106,.town107,.town108{color: #5d4e48 /* medievalton grey*/} .town95{color: #1ca3c4;} .town96{color: #b54625;} .town97,.town98,.town99,.town100{color: #00c681;} .town101,.town102,.town103,.town104{color: #c2b330;} .town109,.town110,.town111,.town112{color: #262b33 /* roboton off-black */} .town113,.town114,.town115{color: #8f4b30 /* bones and holes - burnt sienna, sampled off the town art */} /* Clan badge overlay on fish images */ .clan-badge { position: absolute; bottom: 4px; right: 4px; padding: 2px 6px; border-radius: 8px 0 0 0; display: inline-flex; align-items: center; gap: 3px; font-size: 10px; font-weight: 500; max-width: calc(100% - 8px); box-shadow: none; border: none; margin:0px; } .clan-badge::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.55); border-radius: 8px 0 0 0; z-index: 0; } .clan-badge-icon { width: 12px; height: 12px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; } .clan-badge-icon svg { width: 100%; height: 100%; display: block; } .clan-badge-icon svg, .clan-badge-icon svg path { fill: currentColor; } .clan-badge-icon, .clan-badge-text { filter: brightness(1.8); position: relative; z-index: 1; } .clan-badge-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 0 2px rgba(0, 0, 0, 0.8), 0 1px 1px rgba(0, 0, 0, 0.5); } .clan-badge:hover { filter: brightness(1.2); } /* Favorite-fish star overlay - same corner-badge language as .clan-badge (css3.css:505), but its own corner: top-right, the conventional spot for a favorite/bookmark toggle, and one nothing else on this image claims. A long clan-badge name (bottom-right, up to the image's full width) never measured closer than ~90px to a bottom-left star even at the longest real group name in the DB, but top-right has zero collision risk with ANY corner badge's future growth, not just today's longest string (2026-08-21). */ .fish-fav-star { position: absolute; top: 4px; right: 4px; /* 5, not 1: the rehab fish (1005-1046) render an images-compare slider whose before/separator/handle layers claim z-index 2/3/4 in the SAME root stacking context, so a z-index:1 star painted UNDER the photo and was invisible on every rehab fish (2026-08-25). Anything new layered over a fish photo has to stay below 5. */ z-index: 5; background-color: rgba(0, 0, 0, 0.75); border-radius: 0 0 0 8px; padding: 2px 5px; font-size: 15px; line-height: 1; color: #bbb; cursor: pointer; transition: transform 0.15s; } .fish-fav-star.on { color: gold; } /* No anchor ever wants the global a:hover underline (css3.css:1192) - kill it at the class. Shadow+scale reads as "interactive" better than brightness alone at this size (2026-08-21). */ .fish-fav-star:hover { text-decoration: none; transform: scale(1.2); box-shadow: 0 0 4px 1px rgba(255,255,255,0.7); } .fish-fav-load { position: absolute; top: 4px; right: 4px; z-index: 5; /* same stacking fight as .fish-fav-star above */ } /* A per-fish rarity/population rule ("# img{border-color:...}") targets EVERY nested in that fish's row, not just the hero photo - it was never meant to reach the loading.gif fw_ajax() briefly drops in here mid- toggle, but a bare descendant selector cannot tell the two apart (2026-08-21). Scope the override to this class, not to .fish-fav-star itself - the star is an , never matched by an "img" selector, so it needed no fix. */ .fish-fav-load img { border: none !important; margin: 0 !important; } .hand:hover{cursor:hand} #simplemodal-overlay {background-color:#000; cursor:wait;} #simplemodal-container{ background: none repeat scroll 0 0 rgba(82, 82, 82, 0.7); border-radius: 8px 8px 8px 8px; padding: 10px; height:auto!important; width:465px; top: 50%!important; /* Align the top of the modal to the middle of the screen */ transform: translateY(-50%); /* Move the modal up by half its height to center it vertically */ margin-top: 0; /* No longer necessary */ } .fbiframe #simplemodal-container{ top: 150px!important; } #simplemodal-container h2.dialog_title{background:#6d84b4;border:1px solid #3b5998;border-bottom:none;color:#fff;font-size: 14px;font-weight:bold;margin:0} #simplemodal-container h2.secure{background:#6d84b4 url(https://fishwrangler.com/images/fb-lock.png) 98% no-repeat} #simplemodal-container h2.loading{background:#6d84b4 url(https://fishwrangler.com//images/fb-loading.gif) 98% no-repeat} #simplemodal-container h2.dialog_loading{background:#6d84b4 url(https://fishwrangler.com//images/fb-loading.gif) no-repeat 400px 10px;padding-right:40px} #simplemodal-container h2 span{display:block;padding:5px 10px} /* The modal title is an

, so in the app mobile2.css:42 hits it with `.mv2 h2{font-size:18px!important;font-family:"wendy"!important;line-height:1}`. Wendy One is a display face with tall ascenders, and line-height:1 leaves it no optical room at all - measured 6px above the glyphs and 5px below in a 30px bar, with the thumb sitting 2px off the text's baseline. The bar reads tight against a body that has 10px of padding and 44px buttons under it. Give the title its own rhythm; the id in the selector is what wins over the !important-free line-height. */ #simplemodal-container h2.dialog_title span{padding:5px 10px 7px;line-height:1.2} /* Modal title icon is CENTRED on the header text, not dropped below its baseline. The old vertical-align:-3px stacked with .i2's margin-bottom:-2px and pushed a 16px icon 5px low against a 14px bold line (f698). !important beats the .i2 nudge, which is itself !important. */ #simplemodal-container h2.dialog_title span img{vertical-align:middle;margin-bottom:0!important} #simplemodal-container .dialog_content{background:#fff;border:1px solid #555;border-top-width:0} #simplemodal-container .dialog_content.dialog_content_titleless{border-top:1px solid #555} #simplemodal-container .dialog_loading,.dialog_loading_shown .dialog_title,.dialog_loading_shown .dialog_content{display:none} #simplemodal-container .dialog_loading{display:block} #simplemodal-container .dialog_body{padding:12px 14px 14px 14px;border-bottom:1px solid #ccc} #simplemodal-container .dialog_body{border-bottom:0} #simplemodal-container .dialog_summary{background:#f2f2f2;padding:2px 10px;border-bottom:1px solid #ccc} #simplemodal-container .dialog_buttons{background:#f2f2f2;padding:8px 10px 8px 10px;position:relative;text-align:right} #simplemodal-container .dialog_buttons_msg{float:left;line-height:17px;padding-top:4px} #simplemodal-container .dialog_buttons_msg .uiInputLabel{line-height:14px} #simplemodal-container .dialog_footer{background:#F2F2F2 none repeat scroll 0} #simplemodal-container .inputbutton{font-weight:bold;padding:5px 10px;font-family:'San Francisco',Tahoma,arial,sans-serif} .fb_icon{background: url("https://fishwrangler.com/images/v2/thumbs/fw.gif") no-repeat scroll center center #6D84B4; float: left;height: 16px; margin: 6px 5px 5px;width: 16px;} .fb_close{background: url("https://fishwrangler.com/images/fb-close.png") no-repeat scroll 0 0 transparent;cursor: pointer;display: block;height: 15px;position: absolute; right: 18px; top: 17px; width: 15px;} .fb_close:hover { background: url("https://fishwrangler.com/images/fb-close.png") no-repeat scroll 0 -15px transparent; } .fb_close:active { background: url("https://fishwrangler.com/images/fb-close.png") no-repeat scroll 0 -30px transparent; } .mv2 .fb_close{top:8px} .tabs ul { list-style-type: none; height: 21px; border-bottom:1px solid #AAAAAA; clear:both; padding-left: 5px; } .tabs a{ color:#222222; text-decoration:none; } .tabs a:hover{ text-decoration:underline; color:#111111; } .tabs ul li:hover, .tabs ul li.on { background-image: url(https://fishwrangler.com/images/tab-hover.gif)!important; } .tabs ul li.off { background-image: url(https://fishwrangler.com/images/tab.gif)!important; } .tabs ul li { background-image: url(https://fishwrangler.com/images/tab.gif); border-right:1px solid #AAAAAA; border-top:1px solid #AAAAAA; border-bottom:1px solid #AAAAAA; padding-right: 8px; padding-left: 8px; display: block; line-height:20px; text-decoration: none; font-size: 11px; font-weight:bold; color: #371C1C; } .tabs .border_left{ border-left:1px solid #AAAAAA; } .tabs li{ float: left; } .indent_right{ margin-right:15px;} .float_right{ float:right!important;} #c_stats_user a{text-decoration:underline;} #ecometer{ background-image: url("//fishwrangler.com/images/random/ecometer.png"); height: 54px; overflow: hidden; width: 390px; margin:0 auto; } #ecobar{ background-image: url('//fishwrangler.com/images/random/ecobar.png'); display: inline-block; height: 54px; margin-left: 47%; width: 32px; } .dialog_body table td img, .hsuccess.header table td img{ max-width:100px; } /* The catch art is drawn square at its own width/height attrs (110); the 100px cap above squeezed it to 100x110 (f134526). */ .hsuccess.header table td img.fish-anim{max-width:none} .nbsp{white-space:nowrap} .trip-log .img img, .msg .lgreen .img img{max-width:45px!important;} .whiteglow{ text-shadow: 2px 2px #FFFFFF;text-shadow:0 0 1px #fff, 0 0 1px #fff, 0 0 1px #fff, 0 0 2px #fff, 0 0 2px #fff,0 0 1px #fff, 0 0 1px #fff, 0 0 1px #fff, 0 0 2px #fff, 0 0 2px #fff,0 0 1px #fff, 0 0 1px #fff, 0 0 1px #fff; } .opacity50{opacity:0.5} .pointer{cursor:pointer;} .option, .option .name{ cursor:pointer; } .option{border:1px solid #333; border-radius:3px; display:inline-table;color:#ccc; background-color:#666;margin-left:5px;margin-bottom:5px;} .option:hover{border:1px solid #678399;background-color:#7db2cc;color:#333;} .option.selected{ border:1px solid #5d8195; background-color:#9dd2ff; color:#111; } .option.selected, .option.selected .name{cursor:auto;} .option:hover img{opacity:1;} .option img{opacity:.5;} .option.selected img{opacity:1;} .option .name, .option img{max-width:75px; line-height:1;} .not_mv2 #fish_now_bar{ border-collapse: collapse; } .not_mv2 #fish_now_bar td{ padding:3px; } #fish_now_bar.bigfishtable div,#fish_now_bar.bigfishtable .tiny,#fish_now_bar.bigfishtable td,#fish_now_bar.bigfishtable span, #fish_now_bar.bigfishtable #timer_div, .bigfish a{font-size:16px!important} .bigfish{font-size:24px!important} .bigfish a{font-size:28px!important;} .bigfish #timer_div a{font-size:16px!important;} .h{margin-top:-5px} .strike{text-decoration: line-through} .ul_links a {text-decoration:underline;} .ul_links a:hover {color:#0060ff;} .imgContainer .resize{ width:40px; height:40px; object-fit:cover; border:1px solid #666666; margin-right:10px; opacity:0.90; filter:alpha(opacity=90) } .imgContainer .resize_fish{ width:40px; height:40px; margin-right:10px; } .faded img { opacity:0.25; filter:alpha(opacity=25) } .imgContainer{ padding-top:4px; } .overlay{ position:absolute;clear:both;filter:none!important; } .fa{ display:block; text-shadow: 0px 0px 2px #008a00, 0px 0px 2px #008a00, 0px 0px 2px #008a00, 0px 0px 2px #008a00, 0px 0px 2px #008a00, 0px 0px 2px #008a00, 0px 0px 2px #008a00, 0px 0px 2px #008a00, 0px 0px 2px #008a00, 0px 0px 2px #008a00, 0px 0px 2px #008a00; /* text-shadow: 0px 0px 2px #008a00,0px 0px 3px #008a00,0px 0px 4px #008a00,0px 0px 5px #008a00,0px 0px 6px #008a00,0px 0px 6px #008a00,0px 0px 2px #008a00,0px 0px 3px #008a00,0px 0px 4px #008a00, 0px 0px 5px #008a00,0px 0px 6px #008a00,0px 0px 6px #008a00;*/ position:absolute; z-index:100; color:#fff; -webkit-transition: all 3s ease 0s, opacity 1s ease 0s; -moz-transition: all 3s ease 0s, opacity 1s ease 0s; -ms-transition: all 3s ease 0s, opacity 1s ease 0s; -o-transition: all 3s ease 0s, opacity 1s ease 0s; transition: all 3s ease 0s, opacity 1s ease 0s; } .fa a{ color:#fff!important; } .fa.r{ text-shadow: 0px 0px 2px #ff0000, 0px 0px 2px #ff0000, 0px 0px 2px #ff0000, 0px 0px 2px #ff0000, 0px 0px 2px #ff0000, 0px 0px 2px #ff0000, 0px 0px 2px #ff0000, 0px 0px 2px #ff0000, 0px 0px 2px #ff0000, 0px 0px 2px #ff0000, 0px 0px 2px #ff0000; /* text-shadow: 0px 0px 2px #ff0000,0px 0px 3px #ff0000,0px 0px 4px #ff0000,0px 0px 5px #ff0000,0px 0px 6px #ff0000,0px 0px 6px #ff0000,0px 0px 2px #ff0000,0px 0px 3px #ff0000,0px 0px 4px #ff0000,0px 0px 5px #ff0000,0px 0px 6px #ff0000,0px 0px 6px #ff0000; */ } .fa, .fa.r{ z-index:1000; font-weight:bold!important; } .fishnow_l{ display:inline-block;margin:0 auto; } .fishnow_l img{ text-decoration:none; } .fancy-glow{ /* -webkit-box-shadow:0 0 20px #fff3a7; -moz-box-shadow: 0 0 20px #fff3a7; box-shadow:0 0 20px #fff3a7;*/ background-color:#fff3a7!important; transition-duration:1s; } /* .fancy-glow::after { box-shadow: 0 5px 15px rgba(0,0,0,0.3); opacity: 0; transition: opacity 0.3s ease-in-out; } .fancy-glow:hover::after { opacity: 1; }*/ .imgimg{width:100px;height:100px} .new-trip-logs .img img{max-width:60px;border:1px solid #666;} .new-trip-logs .t, .new-trip-logs .t .left{font-size:12px;} .new-trip-logs tr{background-color:transparent !important;} .mainMenuDynamicItemLink img{margin-bottom:-3px;} .mainMenuDynamicItemLink span .stats-user img{margin-bottom:-3px} #header_msgs .pub.fish{margin-bottom:13px} .new-trip-logs .pub.fish{margin-bottom:0!important;} #header_msgs img.fish{width:100px;height:100px;max-width:100px;max-height:100px; border:1px solid #333; box-shadow:0px 0px 5px 2px rgba(0,0,0,.5);} #header_news_alert{font-size:10px;} .img_tag { background-color: #fff; border: 1px solid #999; border-radius: 3px; margin-bottom: 2px!important; padding: 3px; max-width:98%; max-height:500px; } .mi{ animation: mi_a 5s linear 0s infinite alternate, mi2_a 3s linear 0s infinite alternate; cursor:pointer; } @keyframes mi_a { 0% { color: red; } 50% { color: #ee7400; } 100% { color: #bf8c00; } } @keyframes mi2_a { 0% {opacity:1;} 100% {opacity:.66; } } .glow { -webkit-animation-duration: .75s; -webkit-animation-name: glow; -webkit-animation-direction: alternate; -webkit-animation-iteration-count: infinite; animation-duration: .75s; animation-name: glow; animation-direction: alternate; animation-iteration-count: infinite; transform: translateZ(0); } @-webkit-keyframes glow { from { text-shadow: 0 0 0px #ffffff } to { text-shadow: 0 0 5px #0014ff, 0 0 5px #0014ff, 0 0 5px #0014ff; } } .glow2 { -webkit-animation-duration: .5s; -webkit-animation-name: glow2; -webkit-animation-direction: alternate; -webkit-animation-iteration-count: infinite; animation-duration: .5s; animation-name: glow2; animation-direction: alternate; animation-iteration-count: infinite; transform: translateZ(0); } @-webkit-keyframes glow2 { from { text-shadow: 0 0 0px #ffffff } to { text-shadow: 0 0 10px rgba(255, 255, 0, 0.75), 0 0 10px rgba(255, 255, 0, 0.75), 0 0 10px rgba(255, 255, 0, 0.75); } } .glow3 { -webkit-animation-duration: .75s; -webkit-animation-name: glow3; -webkit-animation-direction: alternate; -webkit-animation-iteration-count: infinite; animation-duration: .75s; animation-name: glow3; animation-direction: alternate; animation-iteration-count: infinite; transform: translateZ(0); } @-webkit-keyframes glow3 { from { text-shadow: 0 0 0px #ffffff } to { text-shadow: 0 0 2px #000, 0 0 2px #000,0 0 2px #000; } } .blackglow{ text-shadow: 0 0 2px #000, 0 0 2px #000,0 0 2px #000,0 0 2px #000, 0 0 2px #000,0 0 2px #000,0 0 2px #000, 0 0 2px #000,0 0 2px #000; } .blink { animation: blink-animation 1s steps(5, start) infinite; -webkit-animation: blink-animation 1s steps(5, start) infinite; transform: translateZ(0); } @keyframes blink-animation { to { visibility: hidden; } } @-webkit-keyframes blink-animation { to { visibility: hidden; } } .shakey:hover, .shak3y { /* Start the shake animation and make the animation last for 0.5 seconds */ animation: shake 0.5s; /* When the animation is finished, start again */ animation-iteration-count: infinite; } @keyframes shake { 0% { transform: translate(1px, 1px) rotate(0deg); } 10% { transform: translate(-1px, -2px) rotate(-1deg); } 20% { transform: translate(-3px, 0px) rotate(1deg); } 30% { transform: translate(3px, 2px) rotate(0deg); } 40% { transform: translate(1px, -1px) rotate(1deg); } 50% { transform: translate(-1px, 2px) rotate(-1deg); } 60% { transform: translate(-3px, 1px) rotate(0deg); } 70% { transform: translate(3px, 1px) rotate(-1deg); } 80% { transform: translate(-1px, -1px) rotate(1deg); } 90% { transform: translate(1px, 2px) rotate(0deg); } 100% { transform: translate(1px, -2px) rotate(-1deg); } } .shakey2 { /* Start the shake animation and make the animation last for 0.5 seconds */ animation: shake2 3s; /* When the animation is finished, start again */ animation-iteration-count: infinite; } @keyframes shake2 { 0% { transform: translate(1px, 1px) rotate(0deg); } 2% { transform: translate(-1px, -2px) rotate(-1deg); } 4% { transform: translate(-3px, 0px) rotate(1deg); } 6% { transform: translate(3px, 2px) rotate(0deg); } 8% { transform: translate(1px, -1px) rotate(1deg); } 10% { transform: translate(-1px, 2px) rotate(-1deg); } 12% { transform: translate(-3px, 1px) rotate(0deg); } 14% { transform: translate(3px, 1px) rotate(-1deg); } 16% { transform: translate(-1px, -1px) rotate(1deg); } 18% { transform: translate(1px, 2px) rotate(0deg); } 20% { transform: translate(1px, -2px) rotate(-1deg); } 22%,100% { transform: translate(1px,0px) rotate(0deg); } } .bs1{box-shadow:0px 0px 10px 3px rgba(0,0,0,.5)} .bs2{box-shadow:0px 0px 5px 2px rgba(0,0,0,.5)} #header_msgs_container2 .tar{padding-bottom:10px!important;} .not_mv2 img.bigger{max-width:220px!important;max-height:220px!important;width:220px!important;height:220px!important;} .mv2 img.bigger{max-width:200px!important;max-height:200px!important;width:200px!important;height:200px!important;} #header_msgs_container2 .hsuccess, #header_msgs_container2 .herror{margin:0 0 3px 0!important;} .fish_container{width:250px;height:250px;position:relative;overflow:hidden;border:1px solid #666666} .fish_container img{border:none!important;margin:0!important;box-shadow:none!important;} .fish_img_container img, .noselect{ -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -o-user-select: none; user-select: none; -drag: none; -webkit-user-drag: none; } .fish_img_container img{max-width:250px!important;} .townimg{ width:100%;z-index:1; border-color:#fff} .fishimg{z-index:2;max-width:250px} .town_div,.fish_div{position:absolute;display:inline-block;overflow:hidden} .mv2 #quests .nbsp{white-space: normal;} .mv2 .tableflex tr{display:flex;flex-direction:column;} .mv2 .tableflex img{max-width:99%;} /* Small pole display (profile, skins preview) */ #c_img_small { width: 234px; height: 210px; overflow: hidden; margin: 0 auto; } #c_img_small #my_setup_img { transform: scale(0.6); transform-origin: top left; } #c_img_small #pole, #c_img_small #pole_div img, #c_img_small .chum2 { opacity: 1 !important; } /* Tournament/cast page - smaller pole display */ .tournament #c_img_small { width: 190px; height: 170px; } .tournament #c_img_small #my_setup_img { transform: scale(0.487); } /* Mobile tournament - smaller to fit layout */ .mv2 .tournament #c_img_small { width: 200px; height: 180px; } .mv2 .tournament #c_img_small #my_setup_img { transform: scale(0.51); } select{border:1px solid #bdc7d8;font-family:'San Francisco',tahoma,arial,sans-serif;font-size: 11px;padding:2px} .inputtext,.inputpassword{padding-bottom:4px} .ff4.mac .inputtext,.ff4.mac .inputpassword{padding-bottom:3px} .inputradio{padding:0;margin:0 5px 0 0;vertical-align:middle} .inputcheckbox{border:0;vertical-align:middle;cursor:pointer;} .inputbutton,.inputsubmit{cursor:pointer;border-style:solid;border-width:1px;border-color:#d9dfea #0e1f5b #0e1f5b #d9dfea;background-color:#3b5998;color:#fff!important;padding:2px 15px 3px 15px;text-align:center; -webkit-touch-callout: none; /* iOS Safari */ -webkit-user-select: none; /* Safari */ -khtml-user-select: none; /* Konqueror HTML */ -moz-user-select: none; /* Old versions of Firefox */ -ms-user-select: none; /* Internet Explorer/Edge */ user-select: none; /* Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox */ } .inputsubmit_disabled{background-color:#999;border-bottom:1px solid #000;border-right:1px solid #666;color:#fff!important} .inputaux{background:#ddd;border-color:#e7e7e7 #666 #666 #e7e7e7;color:#000!important} .inputaux_disabled{color:#999!important} /* subtle hover/active states for inputbutton + inputaux */ .inputbutton,.inputsubmit{transition:background-color .1s ease,box-shadow .1s ease,transform .05s ease} .inputbutton:hover,.inputsubmit:hover{background-color:#4c6db0;box-shadow:0 1px 0 rgba(0,0,0,.15)} .inputbutton:active,.inputsubmit:active{background-color:#2f487d;box-shadow:none;transform:translateY(1px)} .inputaux:hover{background:#e8e8e8} .inputaux:active{background:#c9c9c9;transform:translateY(1px)} textarea,.inputtext,.inputpassword{border:1px solid #bdc7d8;font-family:'San Francisco',tahoma,arial,sans-serif;font-size: 12px;margin:0;padding:3px} .white, .white a{color:#fff!important;} .hl,.searchmatch{background-color:#fffab2;border-bottom:1px solid #dcd22f;} .hli{font-weight:bold;background-color:#fffab2;border-bottom:1px solid #dcd22f;} .blur,.blur img{ -webkit-filter: blur(3px); /* Safari 6.0 - 9.0 */ filter: blur(3px); } #funny{ animation-duration: 5s; animation-iteration-count:infinite; } #funny.sealion1, #funny.seagull1{ animation-name: slidein1; } #funny.sealion1 .im,#funny.seagull1 .im{ height:100px; } #funny.sealion2, #funny.sealion3{ animation-name: slidein2; } #funny.sealion2 .im,#funny.sealion3 .im{ height:90px; } #funny.sealion4 { animation-name: slidein3; } #funny.sealion4 .im{ height:80px; } #funny.seagull2, #funny.seagull4{ animation-name: slidein4; } #funny.seagull2 .im,#funny.seagull4 .im{ height:60px; } #funny.seagull3 { animation-name: slidein5; } #funny.seagull3 .im { height:80px; } @keyframes slidein1 { 0%,100% {margin-top: 50px;} 50% { margin-top: -75px;} } @keyframes slidein2 { 0%,100% {margin-top: 50px;} 50% { margin-top: -25px;} } @keyframes slidein3 { 0%,100% {margin-top: 50px;} 50% { margin-top: -20px;} } @keyframes slidein4 { 0%,100% {margin-top: 50px;} 50% { margin-top: -15px;} } @keyframes slidein5 { 0%,100% {margin-top: 50px;} 50% { margin-top: -60px;} } .blackbg{background-color:#000;} .ppic{width:22px;height:26px;} .ppic img{ max-width:20px;max-height:20px;margin-bottom:2px; } .ranking_user{width:100%;border-spacing: 0; border-collapse: collapse;} .shadetable tr tr{background-color:transparent!important;}/* secondary*/ .ranking_user tr:nth-child(odd), .shadetable tr:nth-child(odd){ background-color:#eee; } .ranking_user td{font-size:12px;} .ranking_user .rank{font-size:14px;font-weight:bold;text-align:right;padding-right:3px;} .ranking_user tr td:last-child {padding-right:5px;} .pollstat{margin-left:25px;margin-bottom:3px;margin-right:5px;} .polloption:last-child {border-radius:0 0 5px 5px} .polloption:first-child {border-radius:5px 5px 0 0} .polloption:nth-child(odd){ background-color:rgba(150,150,150,.5); } .polloption:nth-child(even){ background-color:rgba(200,200,200,.5); } .polloption input{ margin-top:3px } .i{font-style:italic;} a.inputbutton{white-space:nowrap;padding:1px 10px;} /* a sized anchor button next to an submit must match its box, or the pair renders two different-height buttons (ship-store Buy + Add to Cart, 2026-08-13) */ a.inputbutton.big,a.inputbutton.huge{padding:2px 15px 3px 15px;} /* No anchor button ever wants the global a:hover underline - noul was pasted onto every correct usage by hand and forgotten on the rest (ship-store View, 2026-08-13). Kill it at the class so the mistake stops being possible; noul on buttons is now harmless. */ a.inputbutton:hover,a.inputsubmit:hover{text-decoration:none;} /* An icon inside a button is CONTENT, not a mark on a text line. joeTools::icon() stamps i2/i3/i4, which pull the art DOWN 2-4px with !important so it sits on a baseline - and because a negative bottom margin also SHRINKS the icon's margin box, the line box never grows to hold it. Inside an a.inputbutton (11px font, 16.5px line-height, 1px padding, 1px border = a 17.5px box) a native 16px thumb therefore renders flush to the top and 1.5px THROUGH the bottom border: the border cuts the art in half. Joe, 2026-09-14, on the Scuba life ring: "the life ring overflows beyond height of the button." Centering it and zeroing the nudge lets the line box grow instead - the button gets ~4px taller and the whole glyph sits inside its own border, at every font size, for every icon. Net: viewport-audit.mjs check 5b + tests/unit/ButtonIconFitTest.php. display:inline-block is half the fix and not optional: an INLINE box's height is its line-height no matter what it contains, so an anchor button stays 17.5px tall while the icon overflows it silently. Only an inline-block grows to hold its own content. FW's .cta_big already declared it one button at a time (line ~1695) for the same reason. */ a.inputbutton,a.inputsubmit{display:inline-block} .inputbutton img,.inputsubmit img{vertical-align:middle;margin-bottom:0!important} @media only screen and (min-device-width: 721px){ #blueBar{height:45px!important;background-color:#0079b8; overflow: hidden;} #blueBar .blueLeft{width:70%!important;margin:10px 0!important;font-size:15px!important; } #blueBar .blueRight{width:25%!important;margin:10px 0!important;font-size:15px!important; } #blueBar40{height:50px!important;} .blueContainer{padding: 0 5px;} .ac{margin:0px;} div#mainmenucontainer{margin-left:0} div#rightMenuSection{margin-right:0} } .maxwidth100{max-width:100%;} .vtop{vertical-align: top;} .fourteen{font-size:14px;} .fifteen{font-size:15px;} .width_anim{ transition: width 1s cubic-bezier(0.5, -1, 0.5, 2); -webkit-transition: width 1s cubic-bezier(0.5, -1, 0.5, 2); } .loading{ background-image: url(https://fishwrangler.com/images/loading.gif); width:16px; height:11px; } .ptop{padding-top:5px;} .table{display:table} #checkboxes .name{font-size:inherit!important;} #show_friends_div{min-width:440px;margin-top:15px; display:table} #invite{width:540px} #send_to_friends{ display: inline; padding: 5px 20px; margin-left: 15px;font-size: 16px; } .fb_friend{line-height:0.5;} #checkboxes{ overflow:auto; height:140px;background-color:#fefefe;border:1px solid #aaa;font-size:14px; } #checkboxes .f.green{background-color:#efe;border-bottom:1px solid #ccc;margin-bottom:-1px;} #checkboxes .select_all{background-color:#efe;border-bottom:1px solid #ccc;margin-bottom:-1px;} .send_btn{text-align:right; margin:5px;} .hsuccess.round{box-shadow: 0 1px 1px #e2daa8;} .round, .big_display .img img, .tiny_display .img img, #my_notices .img img, .global_msg .img img { border-spacing: 0; border: solid #ccc 1px; -moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px; -webkit-box-shadow: none; /*0 1px 1px #ccc;*/ -moz-box-shadow: none; /*0 1px 1px #ccc;*/ box-shadow: none; /*0 1px 1px #ccc;*/ background: #ffffff; /* Old browsers */ background: -moz-linear-gradient(top, #ffffff 47%, #cecece 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(47%,#ffffff), color-stop(100%,#cecece)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #ffffff 47%,#cecece 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #ffffff 47%,#cecece 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #ffffff 47%,#cecece 100%); /* IE10+ */ background: linear-gradient(to bottom, #ffffff 47%,#cecece 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#cecece',GradientType=0 ); /* IE6-9 */ } .hidden,.hid{display:none} .sixteen{font-size:16px;} .mtb .f:hover{background-color:#eee;cursor:pointer;cursor:hand;} .mtb .f{float: left; height: 29px; width: 50%;} .mtb .brdr.profile-pic{max-width:50px} /* joeTools::profilePic size 'supertiny' emits width='16' AND max-height:16px, so a portrait avatar (200x307 is the common upload) gets its width pinned at 16 and its height clamped to 16 - a face squashed ~50% too narrow, on every forum meta line. That attribute lives in lib/joeTools.class.php, which is core and off limits, so the aspect is repaired here. object-fit only does anything when BOTH dimensions are pinned, which is supertiny alone; square/tiny/normal leave height auto and are untouched, and a browser without object-fit degrades to exactly today's squash. Found by _ai/tools/lib/stretch-check.js, 2026-09-09. */ .profile-pic{object-fit:cover} /* ============================================================ DARK MODE - global invert (the original ~one-line approach). Invert the whole page, then re-invert media (img / ads / worldmap) and nudge a few brand colors back. Restored 2026-06-03 from the pre-carveout version per Joe: the carveout pattern left every un-covered surface (forum, dropdowns, new pages) light, so it was endless whack-a-mole. A global invert covers ALL surfaces at once. ============================================================ */ .dark { filter: invert(100%) hue-rotate(180deg); color:#313131; } .dark a{ color:#3b5998cc; } .dark .fwadski{background:#000!important} /* exemption primitives (see docs/dark-mode.md "Exemption primitives"): .di = show a dark glyph on the dark page (single invert -> flips light); .dn = keep an element in its AUTHORED colors in both modes (double invert, like photos). Use .dn to host an always-dark code/diff theme. */ .dark .di{ filter:none !important; } .dark .dn{ filter:invert(100%) hue-rotate(180deg) !important; } .dark .h .logo{ opacity:0.6; } .dark #fish_now_bar img, .dark #item_container .details img{ opacity:0.75; } /* legacy white-bg JPG/GIF art, auto-tagged .dwb by the runtime tagger in _css.php. Cannot be made transparent in CSS, so dim the glaring white box into a soft card. Real fix = transparent PNG/webp asset. See docs/dark-mode.md */ .dark img.dwb{ opacity:0.62; } /* addon art has light/icy gradient backgrounds (not flat white, so the .dwb tagger skips them) that read bright on dark - dim the whole category. */ .dark img[src*="/feed/addon/"]{ opacity:0.78; } .dark img, .dark .fwadski, .dark #worldmap { filter: invert(100%) hue-rotate(180deg); } /* menu chevron: path-based + unscoped so it matches every env (fw.kyd.net / fishwrangler.com / beta) AND every nav context (.mainMenuStaticItem and the top links like .disable_on_630). filter:none = single ancestor invert only, so the dark arrow flips light and shows on the dark nav. */ .dark img[src*="/images/menu/arrow.gif"], .dark .mainMenuStaticItem img[src*="/images/mv2/fw-off.png"], .dark .mainMenuStaticItem img[src*="/images/mv2/map-off.png"], .dark .mainMenuStaticItem img[src*="/images/mv2/shop-off.png"], .dark .mainMenuStaticItem img[src*="/images/mv2/fish-off.png"], .dark .mainMenuStaticItem img[src*="/images/mv2/trophy-off.png"], .dark .mainMenuStaticItem img[src*="/images/mv2/rlc-off.png"], .dark .mainMenuStaticItem img[src*="/images/mv2/help-off.png"], .dark .mainMenuStaticItem img[src*="/images/mv2/profile-off.png"], .logo.c img { filter: none!important; } .dark .box .content{ background-color:#ececec; border-radius: 0 0 10px 10px; } .dark .mv2 .mainMenuStaticItem img{ opacity:0.6; } .dark .blue{ color:#3b5998cc!important; } .dark .hgreen, .dark .herror{ opacity:.7; } .dark .green{ color:#00ad00a6; } .dark div.mainMenuStaticItem a{ color: #434343; } .dark div.mainMenuSelectedStaticItem a{ color: #e9e9e9; } .dark div.mainMenuDynamicMenuContainer a{ color: #5a5a5a; } .dark .red, .dark .red a, .dark a .red{ color:#cc00007d !important; } .dark .town57, .dark .town58, .dark .town59, .dark .town60{ color:#ff0454a3; } .dark .green, .dark .green a, .dark a .green{ color:#00aa00c7; } .dark .inputbutton, .dark .inputsubmit{ opacity:0.75; } .dark img.share3{ opacity:0.75; } .dark #qcolor{ opacity:0.75; } .dark .town68, .dark .town69, .dark .tournamenttext, .dark .tournamenttext a{ color:#a2043fa1 !important; } .dark .bs2{ box-shadow:0px 0px 5px 2px rgba(0, 0, 0, 0.216); } .dark .n, .dark .t .n h3, .dark .n a{ color:#3232329c; } .dark #c_resources_user a{ opacity:0.75; } .dark .boardkit_subtitle{ color:#3c3c3c; } .dark .gold ,.dark .g{ color:#c18d00 !important; } .dark .boardkit_frame a{ color:#3b5998ba; } :root { --ico-share: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAACXBIWXMAAAsTAAALEwEAmpwYAAAEyElEQVR4nNVaSWxbRRh+5chSuCJASHjGQYUG6BJRwnYAhCg7vXACiirEAYkDSAgJ9cKBA5eiFEI50AYhcaFFgGfsNEtDOHBI6nrm2bGdBSd1m8ZJm8aJ7Xj90f9MHDvxMrbfs9tPGsmJ37z3fW/++bexppkNgB2Eee6lf+qP2h2yGwd+xv/hd9qNho7fJu4gTvkWYaKHcOGmXMYpl1BhxPEavJZy+eauYf32thG3cXGAcvkTYXKtCuGqg+BcJvoI8zzeMuL4MMrEUKOkK4rhcoA69S7LiD9wduxOwsUJykXWbPK0MESWMNlLWHCnqeRtLrGXcjFlHXG5ZTVEyDSzIkw/RLlYbxV5ujGYSFAm3miSvDhMucy0nDwvjAxxivcaIm/jntfaTB4KIph+qC7ydib3t8VseGVzIsz7mBL5+8+47yJcTltB5MPzszCyuApXEimYiyXhzKVleOXvSVURk+gJawrIu0pzidu5hF/mrkI5pHM5+FRcVLyX+LZ2kLLAzx/1XipLvljEy0orIbIdDrGvogArIiyOcDwJtXA6vKy6Cq5quY3p5LuHJkAF/8aS6vctl3JgYmaFgGfPBZQEhOMp5XsSLk6WkMe0ljCxajb5h106HJtcgJyCgIGFqLoAJtdKUnHM580m/8F4yHCVqnh/LFTfM4rTDMrFcbOIv/BX0PD1xUhksjCfSFUkfzK0VPdzCJPHin2/W2VS16APTswswtTqOlxPZSC4ug49Uwuw56wP9g344FRoCTK5UoMZikThmXN+2N3vhd7pCFxLZko27mci3NjLYnI8z/4o3EK5jNWa8PxIAC5XeIuLyXQJMYR3JQFv/zOz7T4POnV4atgPBwYnmlpp3AdGjW1zyvtqXYwPDUQTSraMK/Ol77Ixx+x9RbeOP9z3aNQpH6l14ZGxkBJ5x/x12Dvgs544z48Oh2e3Zmf6k7UuPD4VURLwlX++ZeQp5lgO2a0kADefCr4OXGm9AKpgQh9fmFMSoK/E4cXRYGtNyKawidEFVvPjxUA3iqkzutyWbGJN0Y2iS4xlsmVJr6WzRkxQ8Ub499PDfnhiyCQ3Wk8ge2k0aOQsqWw+WK1nc8DnV+C5kQB0OKVRmCwl02XjQWe/F36YWTSEbWA2loTPZbOBLN996Kln8kMu3UiTd7m2+3p0o99PRwoiN7BSRHwr+ppNJbDRarZ9GjlRJAqqOFJnMmd3iNcLAjpdF26zIp3G8ZF7DrYsRlkMNpNOG6vARN9NU9Aw+WMJ+c2C/uYoKe1M7t8m4H9vNGiFiIsKRf2v4Wtq92PCWZa8YUZOvcuKtsoXevW2Siqbg4OjSg2ujI179lQUkDcl2WtFY+vn2asVyX/iUWtsobvXaiFf4Eu/FaaEdfJwJGq0FjGInQ4vw8E6WovKBx+4TEZ/3gIRDY44Jp1K5DdF6K8SJtM3APkMBlqtEVDuebedZwQEXyDT39GaAYbsNplTHK1AMwN4uICbqGVvnssAnu6bQn5TRHAnZfI7a49ZZQZdJZ7+a1YB+/OUyX7TyTPhrBmkzARGbcLFqWayWMJFFDvNFXObVgBTcWy0Ei6/oVycr1ae5n8bIcexGEHncPfvY7e2jXhFAOzAYhsDz8bPbexMdOYLcPPxH3jRyykXhFhcAAAAAElFTkSuQmCC'); --ico-facebook: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAACXBIWXMAAAsTAAALEwEAmpwYAAAE1klEQVR4nO2Z609bZRzHT7ht64DJdWNlzA7GWoyvjIv+FZqomZkvJJkvfa8hjsNt0DEqQ2DQcqczJijgBXDqFuOyxPhCsxBMHPSyXg6l7WnP6SnQnkL5maeoYeG05zx9oGrCN/m9/3xPn9/v+T3fUtSRjnQkck1BtnYi9OqlcaGhdjw0XTvO/35xNBSsGeNi1aNcrHqED2qGuSXNcHBaYwo2nDexr1A0ZFH/tl74bPOczhzWaycF96UJAVDVjofg4hgqHmpGeage4eHCMJcozVAQnjehCsD5wYCraoDtUJvYyoyD10wJZTpz2KidFETtZBiw4Y0BqBpkE1V5xy9W3vENVBiZ0ozA190NX9VOrgd05jCQwp8bSBhIlLrfx57t9b19aOAvGSG37m54SGdeh0OAh7N9qLxQ0esdpIyQe9DwqjpzeCED8HDmEy+U96zNVxgZ1UHB52YS/nTPWqLKbq/+QNFLecQGMnRsYC98+W0PlHV7oLSbGSCD/zT8Dim8xsjCtXsCjC5G4IFDhF/XtuBnJgYPnSLMWaLw0UNBEr6sexVKP16Foi73lbTgtROhEt3kup8E/rVZHmz8NqTSI5eYFL7EwEBJFxPI70pjxKI5TwL/+iwP4vZOSvi9BiThDQwUdzFQ1Onqx4J/0bxRSXJJXTCx4BLioESPXGJq+FtuVGKRnqnC+fp6koZ9/35YEfzfBmTg4blOF5y66exQRk9DlnZCcJFMm+knUZCSI7QNb85wUDvo260BL2j61xTAu6BQ73CjpVGWP7FVEo7K5aB0474xw6VuWIM0/KmbTijUJ+qyrAG0EpPO+WBkf/N61uNwhgC+oMMB+XrHh/IGJkIzpJfUlkT//rIaI4Iv6HDAyXbH57IGasf4JdIbNi4xPe/bo0Tw+e0OUN2wL8oaqBkLBUjXAykD39uiRPAnbzyFE212v7yBUU4k3W2SG0gfXtX2FFSt9qisgeoRTsSBRxcWH915pqQUiwNwkfi+Mv22rgy+zQ4nWpQZCOB8eUGUXxdSqeknXhl8qx2OtdjkjxBKD3CODamBqzOsIvjjLTY43myTb2LNUHAG58yTGrg87FEG32KDY802+TGKchuchg0RGNiKA5TecimFh7wmyweyBlDohPOSqp/j4b2Fv2qeg2tzHEhZerwWg/qvA1D/FQvvfrlbV77wY8BbIafZ+rKiZa7KyDrTfQaiUSk1Rr+zRpRPm9b98LlNVofiNA8lZunCozmfzEC68HnIAG1pp5QKxX27iRk+PLqgpAzcs0RI4KNUwxM1hSMU96UDn9zAZrrwkN1o6cWCTxgY4ovVfT4/LjxaD5IZSAc+p9HCUvQf6eWmKKvEhUd7TSoDmPCQ3bjyFkUilFXiwKcygA1/fbmPItYUZJ/u8cziPEYkDaxsYsHnNK7MUfSPOeQG0K9gZFTl3Z55pfu8lIFvVzaVw19f+YaiDyjc/UdGyEVZpZJ9PrkBhceGPqAvLyWUVZYY3P5Uj5FkBmTgfcQNq1QF7e4SFPcVdbqjUutBMgPJLqlsNOfppWIq0yo2ONUoMSvUO5x7LykpAwvLG8/uNrTVmVgPcG/YQxENWSh0QrkNij4WveKGi4/FN2I7sLm1A0xoK25+LLBon0crcWKr/C/8zXqkI1H/f/0JPDNnaCVeJTwAAAAASUVORK5CYII='); --ico-twitter-old: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAACXBIWXMAAAsTAAALEwEAmpwYAAAEF0lEQVR4nO1ZXWwUVRS+mbtg/IkmCOEB1Gh8MtGEEIgmPJHwxLMB9VVjfIIHI4bEVHkAEh+V1MbE8ADh3inbkkJRQCyQiAaJCLSJ8UFtuwqlP7bcO9OZ3dn5yJltSaHbmTs7011M9ktO0mSmd75v5pxzv3uWsTbaaCM7bPCC7b5hSb3XkrrIhR7iUk9xqcq10FOW0IN0je4pCOd11gGLtRzH3Oe4UAe5UCUuNVKFUKNcqAOs6KxvPnH77houVBcXyk9NfLEQnwvVyY7eXd0U7pat3uZCT2YmvkiInrCE2rl8zLuwgkv1de7E5cOhvqJn5Uu+D09YUp1efvI6CkuqfnpmPuS7sKKZ5Pl9Efocs7EyM//mpI1eqsA7M5G3hHqnZeTl3Jew1Y7G2PfMPMulHm+1AC70ZEMtNurzrSYv78ehdOyLzvpcNqm5eMzW+OCqh6uTVbgBMOaF6B6pYONZN7r+1HGNnZc9fHrTX6oWfGa7z6d5+wfjCH1yw8fmc64x+Z7RCuphNgDO3w4iUTenq1h7wolJJXXAjH0HrMinxJAacUJM+CFe+y5ZxLtXPCTh+9sB3rviYfevfpyAEpnGRP7kKpNIOUHtwZQKWwdmY+/9eaIKEww7IV7oi/kCUqNgO5sTBZDdTRLw0wJSQQjsve6jsMS9k36YSD4IgZdOxpOnsGz9cbIAoXqSFnrr8uK0uHgnwKa5olwYJnADGNWTJXS3gQA9aLLYkb/rF+aFsSDqOK9+6+LpopmAmXJoKuBGogATqzwwFuD9XzycvTVXDBkxNFM1EkAbq4GA5P7/w1g+xOdRHK2YCRDKy0UA7QFUeHlhV1z7TC/A7LS1/dIsxr3sKkIgsX2mSiHTIn68W+OV0y76/82WTr2lwJS8WRGbtFEKMVy/C6VBJQQ2nDGzJOZt1GAjo3im6OCbPytRCjSKzwYNc39egNR7EgXQ0CnNouQoP/+9jGtTVfxXNpdzohRgpW3+HIqCcDaZmTmpRtIsTEH1QKRM2ybVEE/zDKGGjad5ZF3jFnvyuMbLpxxsuzCLfUNl/DgeGKUSWYYPry3tm3hsqP0sjwPNlvMuztwyI7zQ9x/+q4IXDQwbr//2PWY768wF1L5CZ9yiROaj33z0/ROg5IYPbGzlKvCHqkKOVCKfv6a3QeJyXoD+gqWGPb0qzaGeCnJ1rxMFncIyEZYPkJ9oeG5Ks8rciDQsQL3JsoBmla0jr79kmWGDW1L1Npu8JdQpNoACy3G429808lKdzG+4u3C8ntCZckubgbzefB3QrHJZRo5C38lcsCnnpodog8lOXHlRn7enV7Gmw3bW1WxHeu9U+x+1P/UOuyzogEVDJ5rbkGeng0d0sqv9gOfT35bU16NrUu+JXOUj8TNrG22w/z3uAWynvj35w9FQAAAAAElFTkSuQmCC'); --ico-twitter: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAACXBIWXMAAAsTAAALEwEAmpwYAAAKT2lDQ1BQaG90b3Nob3AgSUNDIHByb2ZpbGUAAHjanVNnVFPpFj333vRCS4iAlEtvUhUIIFJCi4AUkSYqIQkQSoghodkVUcERRUUEG8igiAOOjoCMFVEsDIoK2AfkIaKOg6OIisr74Xuja9a89+bN/rXXPues852zzwfACAyWSDNRNYAMqUIeEeCDx8TG4eQuQIEKJHAAEAizZCFz/SMBAPh+PDwrIsAHvgABeNMLCADATZvAMByH/w/qQplcAYCEAcB0kThLCIAUAEB6jkKmAEBGAYCdmCZTAKAEAGDLY2LjAFAtAGAnf+bTAICd+Jl7AQBblCEVAaCRACATZYhEAGg7AKzPVopFAFgwABRmS8Q5ANgtADBJV2ZIALC3AMDOEAuyAAgMADBRiIUpAAR7AGDIIyN4AISZABRG8lc88SuuEOcqAAB4mbI8uSQ5RYFbCC1xB1dXLh4ozkkXKxQ2YQJhmkAuwnmZGTKBNA/g88wAAKCRFRHgg/P9eM4Ors7ONo62Dl8t6r8G/yJiYuP+5c+rcEAAAOF0ftH+LC+zGoA7BoBt/qIl7gRoXgugdfeLZrIPQLUAoOnaV/Nw+H48PEWhkLnZ2eXk5NhKxEJbYcpXff5nwl/AV/1s+X48/Pf14L7iJIEyXYFHBPjgwsz0TKUcz5IJhGLc5o9H/LcL//wd0yLESWK5WCoU41EScY5EmozzMqUiiUKSKcUl0v9k4t8s+wM+3zUAsGo+AXuRLahdYwP2SycQWHTA4vcAAPK7b8HUKAgDgGiD4c93/+8//UegJQCAZkmScQAAXkQkLlTKsz/HCAAARKCBKrBBG/TBGCzABhzBBdzBC/xgNoRCJMTCQhBCCmSAHHJgKayCQiiGzbAdKmAv1EAdNMBRaIaTcA4uwlW4Dj1wD/phCJ7BKLyBCQRByAgTYSHaiAFiilgjjggXmYX4IcFIBBKLJCDJiBRRIkuRNUgxUopUIFVIHfI9cgI5h1xGupE7yAAygvyGvEcxlIGyUT3UDLVDuag3GoRGogvQZHQxmo8WoJvQcrQaPYw2oefQq2gP2o8+Q8cwwOgYBzPEbDAuxsNCsTgsCZNjy7EirAyrxhqwVqwDu4n1Y8+xdwQSgUXACTYEd0IgYR5BSFhMWE7YSKggHCQ0EdoJNwkDhFHCJyKTqEu0JroR+cQYYjIxh1hILCPWEo8TLxB7iEPENyQSiUMyJ7mQAkmxpFTSEtJG0m5SI+ksqZs0SBojk8naZGuyBzmULCAryIXkneTD5DPkG+Qh8lsKnWJAcaT4U+IoUspqShnlEOU05QZlmDJBVaOaUt2ooVQRNY9aQq2htlKvUYeoEzR1mjnNgxZJS6WtopXTGmgXaPdpr+h0uhHdlR5Ol9BX0svpR+iX6AP0dwwNhhWDx4hnKBmbGAcYZxl3GK+YTKYZ04sZx1QwNzHrmOeZD5lvVVgqtip8FZHKCpVKlSaVGyovVKmqpqreqgtV81XLVI+pXlN9rkZVM1PjqQnUlqtVqp1Q61MbU2epO6iHqmeob1Q/pH5Z/YkGWcNMw09DpFGgsV/jvMYgC2MZs3gsIWsNq4Z1gTXEJrHN2Xx2KruY/R27iz2qqaE5QzNKM1ezUvOUZj8H45hx+Jx0TgnnKKeX836K3hTvKeIpG6Y0TLkxZVxrqpaXllirSKtRq0frvTau7aedpr1Fu1n7gQ5Bx0onXCdHZ4/OBZ3nU9lT3acKpxZNPTr1ri6qa6UbobtEd79up+6Ynr5egJ5Mb6feeb3n+hx9L/1U/W36p/VHDFgGswwkBtsMzhg8xTVxbzwdL8fb8VFDXcNAQ6VhlWGX4YSRudE8o9VGjUYPjGnGXOMk423GbcajJgYmISZLTepN7ppSTbmmKaY7TDtMx83MzaLN1pk1mz0x1zLnm+eb15vft2BaeFostqi2uGVJsuRaplnutrxuhVo5WaVYVVpds0atna0l1rutu6cRp7lOk06rntZnw7Dxtsm2qbcZsOXYBtuutm22fWFnYhdnt8Wuw+6TvZN9un2N/T0HDYfZDqsdWh1+c7RyFDpWOt6azpzuP33F9JbpL2dYzxDP2DPjthPLKcRpnVOb00dnF2e5c4PziIuJS4LLLpc+Lpsbxt3IveRKdPVxXeF60vWdm7Obwu2o26/uNu5p7ofcn8w0nymeWTNz0MPIQ+BR5dE/C5+VMGvfrH5PQ0+BZ7XnIy9jL5FXrdewt6V3qvdh7xc+9j5yn+M+4zw33jLeWV/MN8C3yLfLT8Nvnl+F30N/I/9k/3r/0QCngCUBZwOJgUGBWwL7+Hp8Ib+OPzrbZfay2e1BjKC5QRVBj4KtguXBrSFoyOyQrSH355jOkc5pDoVQfujW0Adh5mGLw34MJ4WHhVeGP45wiFga0TGXNXfR3ENz30T6RJZE3ptnMU85ry1KNSo+qi5qPNo3ujS6P8YuZlnM1VidWElsSxw5LiquNm5svt/87fOH4p3iC+N7F5gvyF1weaHOwvSFpxapLhIsOpZATIhOOJTwQRAqqBaMJfITdyWOCnnCHcJnIi/RNtGI2ENcKh5O8kgqTXqS7JG8NXkkxTOlLOW5hCepkLxMDUzdmzqeFpp2IG0yPTq9MYOSkZBxQqohTZO2Z+pn5mZ2y6xlhbL+xW6Lty8elQfJa7OQrAVZLQq2QqboVFoo1yoHsmdlV2a/zYnKOZarnivN7cyzytuQN5zvn//tEsIS4ZK2pYZLVy0dWOa9rGo5sjxxedsK4xUFK4ZWBqw8uIq2Km3VT6vtV5eufr0mek1rgV7ByoLBtQFr6wtVCuWFfevc1+1dT1gvWd+1YfqGnRs+FYmKrhTbF5cVf9go3HjlG4dvyr+Z3JS0qavEuWTPZtJm6ebeLZ5bDpaql+aXDm4N2dq0Dd9WtO319kXbL5fNKNu7g7ZDuaO/PLi8ZafJzs07P1SkVPRU+lQ27tLdtWHX+G7R7ht7vPY07NXbW7z3/T7JvttVAVVN1WbVZftJ+7P3P66Jqun4lvttXa1ObXHtxwPSA/0HIw6217nU1R3SPVRSj9Yr60cOxx++/p3vdy0NNg1VjZzG4iNwRHnk6fcJ3/ceDTradox7rOEH0x92HWcdL2pCmvKaRptTmvtbYlu6T8w+0dbq3nr8R9sfD5w0PFl5SvNUyWna6YLTk2fyz4ydlZ19fi753GDborZ752PO32oPb++6EHTh0kX/i+c7vDvOXPK4dPKy2+UTV7hXmq86X23qdOo8/pPTT8e7nLuarrlca7nuer21e2b36RueN87d9L158Rb/1tWeOT3dvfN6b/fF9/XfFt1+cif9zsu72Xcn7q28T7xf9EDtQdlD3YfVP1v+3Njv3H9qwHeg89HcR/cGhYPP/pH1jw9DBY+Zj8uGDYbrnjg+OTniP3L96fynQ89kzyaeF/6i/suuFxYvfvjV69fO0ZjRoZfyl5O/bXyl/erA6xmv28bCxh6+yXgzMV70VvvtwXfcdx3vo98PT+R8IH8o/2j5sfVT0Kf7kxmTk/8EA5jz/GMzLdsAAAAgY0hSTQAAeiUAAICDAAD5/wAAgOkAAHUwAADqYAAAOpgAABdvkl/FRgAABqxJREFUeNrsmdlvG9cVxokZSrbVokBjK33w0qZA+t4HG3bS5aVAgMJogAJB0u0P6EvRonWdCkH8ZhtBlyBuKlK2TMlLNEPDVuVYcRzHsRJHshZK3CmJFLWQlK2IpExzLhdRsn59IEXRi8xVKoqawH0hBvd+38w53/nOuTpA97+8dM8IPCNQYwIV/czIenPygKSKJkkVF2VFuGVVLMiqlskusSApwiWp4qKkiia9ktivO4JUyVG1JdCR3C0r2nFZ0UKyKihrKVpQVrRjuouJXZtPwBxvlBXNKCvaYtnAHyeyKCtas+58fMemEJDM2i9lRUSrBv4YERGRFO2NjSNgpE5WtZM1B/7Y0gw6I3W1JXCZBknVPtp48NklqVq37jINsip0siqqJGCkbjPBr5EQ13Vm6qsmUBg2v77k4FqfBX8ghHdqBv9MkKlgiKlgCH8gRLfVy/NGV9lgv2sY5vy1L3BNTGPs8/L1juhqgjdXRUBStF8VHtRwapIv7KNEo1EAkskU85EIC/dixGIxAD5xTVN/Zq5k8C+edjPm8wMwH9N4vtnx8Jcwa69XRuDS/e2yKsKPHrireQS708XS0jJ9vhDfaA/RcD7MQVMvIyMjADR1W0sC32h0MWB1ENc0Mg9W2NPqeZI6RQsltmQCsqIZ1zv4J629DA0NAfC7TkvuoDjHrtlwu90A7D/Z/3Twp30MjvpJJpMkUmm+Z7A87fn3yyNwMbGrWJH6+w1HHuwPWrNgt5mCfO7wEg6HSWWWaFwnH77WOkV3v507d+4AsLfNVrTY6czJPSUTkBXteLHPv9UU5Eunj3A4gkgt0tiS/fzfMVoZHR0F4Kpj8rF8aGifpcs6QSQSAeClk7dLrdjHSiNwBElWtGApm+5uXgPbMxag/uw8sir4adtthoeHAXjrykj++S1n5jh904rP5wPgVcVWjuUI6czIRQnozckD5UjgK6Y1sH/oHMr//7fPnHly+0/2o++I0dLvJxgMAvCbjv6y5VZvTuwrSkBSRVN5HibOXz914PF4AHj51O18PvQ4xpmfnyedWeK3LV15on+86q6suJnFm8UJKNqlcjfeagrS687GdTyZ5lu55N1pdDLu9bKyskImkwHgz/8eRFa1yggo4kIJBISrks2/bbDiyYXMFfsk9efCyKrg4Jn+fH2wTH+FvuN+5fZCEY6iBKqxyq+Y+rBYLAAc6rIgK9k3/W6Pm7GxsaxkGvuq8UjhEghU0aQocY5/Ys/Xh5dO5epD2yxfuieJRKMkFzM8Z3BX2vykN5aAKthqCtE/6icSjRKOC3YYs2B3tTjy8nnNOcWW9rsbRaC6buuF5mEGhm2k02kAPh8P5uvDwTMD+Xw41DW0MSFUaRLLquCFVjeu8QmWlpeZmr2L1WoF4E9dw1kdV+Kc6HExPj5eUT6UlMSVyKisChoNTnqGrCzcu0c8nWH3KQ/vXF/zS/ty5q6hLcQN2zh35+aIxBNsN7hqLKPlFjJV8E3TFFbfDOl0mpWVFV7810A2H9pnuT06SSQSRaQW2d4ymvVLLfb8V7jumqa+fa7ULu1wcSuhJPaXA77BFKB70Mns7Gy2Erc/3AvsMa6B/cwToO5stj68em4wH2K/77SUZiWUxN7SzJyqBUrZcFv7HT60TRAOh7Nhsk5M/+zsWvIevpzLh477HL1qwel0AnDA2FtMgWZ0R5BKtdPHioGvPxfGcNOaf7u/uPA0Z6nxjxtr5u77hpxfagtxy+UjEomwuLRcpD5oR2vW0Og/iNHc5yMQCGSd5QfFPf22thC9Hn/eL+0wOLPKZbTicrtZWl7mhmeGupzkPqr/OnNiZ7ktZfN61fZw50A+fg997Ck5X3YX5MNVu58tOb/0I9MgNpstZ8kHn9QXnyi/qTfHnnu0qdd3xPjLR068Xi8Ab1+xoFfiZSnWzwuS1zkxzccDNq4POfB6vTx48ACAHxpvPTRyrKipz41V3ig8/MemQT7tG+Srhfu8d8tL3floRX6pqdvGgNVOIpkkmUqRTKUQySSRezHmF2L0TC8Uhs9r1Q62DJs9lSt4+/+sfrRoRpZUrXPTR4uKdkV3E331BNaGu92bONz9sHbD3cLx+nrKVOOwWX3zNSWwuplk1l5/0sixBsDnZUV7rRD4hhCQVbE6N31fVrR0Da6Y0rIiTuRk+6nga3/JZ07szNqO0rzTI9YgIKva0dUK+9+5pVz9HUHSmxP7JLN4U1LEBUkRDlkR0dwF3qKsiKikCrukiAuSKg7rlcTeDbtmfXZT/4zA/xmB/wwApu6BFvM/sd4AAAAASUVORK5CYII='); --ico-email: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAACXBIWXMAAAsTAAALEwEAmpwYAAAEB0lEQVR4nO1ZW09TQRA+wcuDj14exCpn0Zjoq9Hok7/CaPR/CCEaXoz6KNbd0mDURFFTlPtVUOMlXvAWL6BSlFpaKXBa6G4w4MuYWbAKnG3P4ZzTatJJJtl098x8szszOzvVtCIVqUjOKQSrymrTBwjjVToTtwkVA4SJlE75T2Q5ZvyDnGO8qoyl92vVUKIVmrbTH1sJE2cJ5THCBNhhnfFRnYozO2pmfHkHvqOGbyJMBHXK5+wCX2YIlTICO4N8Y17AlzNxlFCRdArchI0yJo54BnxPENboVNR5ABwWMRW1qMtV8JuDsI5Q3uk5eJZxqw7U6Qp43I18gid/grx3dwjWOjYgL27DlBxwBJ4ExLECgod5dxKHVwS+1J/eoFMxWWgDCBXJFaVYzPMFB89+x4OgtsDj7Wh2Se0OpiHQz2E4kQZjyl0eTqSB9XPYFeQmbsTnyoM/ttnZ/bNmO+Fv64f2h88gYUy5bkDCmJKyUYciFs5YQ18NJVinmAkJNHTAuWuNcKm5G4YiMdfAD0ViUibKRh3mscBjWDTmxD9fVZr74vBoHK603pGKztc3wb3nb2AyNe0I/OPXH8B/vVnKvNzcA+FvMXU8BKb3WXAfXqUSgAonjBT0Pn0FNfVNUumNrvsQHZuwDTyWmIBQzwMpAxndZ3zBNVX6yxmvzG0AFY3ZDPjN78MjEFxwKXazFV4ODFkG/+ZjGAKhNvltbUM7vP38ZdF8lmzUkNMAfHhYMUDu4rgBt3ofZXax5f5TSBgpJfDxZAq6H7/IrA/1PJAnsXSd2gD+zsoJKEtlFbD+95/gwo0WCepiYyd8/BpdtubzyGgmUP3XW6TvGwp5SgOomMx9AlkeKdncIhIfh/qOu6YB/negXm3vg6+jY1llEfUJzHpmgAzw5BT0LQlwZBzjbziHa3LJIU4MWIkLLeVPI1G42NiV8fW6250w+CVi+XviyIVsBHE2/j6ZhOZ7TyTj2M63xGEQW0qjXjJxkkZzXWSFNYBX5DQAm07/qgGEzuy1WsxFzQSE4+pLyi0Ox1OKAObfLHfzsHQ1E+Lvc68CVXFNr3kxpzNxWnP6oCEnB6URXpxEOJ6C8wj+xKBp/vcFZrZodgg7AksF+U5FYPPxd56y71TEzH38ml3y1U2vX/aop2mpoLRywHXgpZUD8+DpsiA2Vtw3xV6lMiPkjw9pTgh7lYUCr1N+QXNMIVhFmGjKO3gm2g9Ww2rXmrvYcM3fzos215q7i5q8JpnJC7c56NbOmxH2Kr1oOepMTDgOWFt9UyYoXjDOgfNZzPOYtrV8E96OWHaoaqccwKNYHti+YT2haijBphP2bbBmx4cHvuywHJElCY4Zf7swVyGryn/hb9YiFUn7/+kX6mpAGc+doUUAAAAASUVORK5CYII='); } .fb{ background-image: var(--ico-facebook); } .twitter{ background-image: var(--ico-twitter); } .email{ background-image: var(--ico-email); } .shareico{ background-image: var(--ico-share); } .shareicon{width:48px;height:48px; margin:0 auto; text-align: center; } .shareicon:hover,.shareicon:focus { filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(20deg) brightness(102%) contrast(102%); } .newshare,.newshare { filter: brightness(0%); } .newshare:hover,.newshare:focus { filter: brightness(100%); } .share-treasure{ filter: hue-rotate(-163deg) ; /*golden*/ } .share-tourny{ filter: hue-rotate(141deg) saturate(0.9) ; /* redish*/ } .share-dish{ filter: grayscale(1) ; /* bw*/ } .share-nf{ filter: brightness(0.7) contrast(2.62) grayscale(1) ; /* very dark bw*/ } .share-mtc{ filter: contrast(1.37) hue-rotate(-308deg) ; /*purple*/ } .share-mtb{ filter: brightness(0.99) contrast(1.65) hue-rotate(59deg) ; /*purple-ish*/ } .share-lc{ filter: hue-rotate(145deg) saturate(1.31) ;/*bright red*/ } .share-profile{ filter: hue-rotate(-14deg) ; /* light blue bg*/ } .share-skill{ filter: hue-rotate(-180deg) ; /* brownish*/ } .share-quest{ filter: grayscale(.66); /* greyish*/ } .share_preview{background-color:#eee;border-radius:0px 10px 0 0;} .share_container{background-color: #d7d7d7;border-radius:0 0 10px 10px;} .share_preview .share_toggle img{max-width:100px!important} .share_preview .pad.twelve{padding:5px} img.share3{ height:14px;margin-bottom:-2px; transition: all 0.25s ease; } img.share3:hover{ box-shadow: 2px 2px 2px rgba(0,0,0,0.5); transform:scale(1.05); } .hsuccess .share3{margin-bottom:0px;margin-top:-1px;} .two-lines { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; max-width: 100%; display: block; } .vgt0-image-container .img { position: relative; display: inline-block; } .vgt0-image-container .img .profile-pic { position: absolute; width: 20px; height: 20px; bottom: 0px; right: 0px; border: 1px solid #666; /* Optional border for styling */ } /* Lazy loading styles */ .lazy-partial { min-height: 100px; margin-bottom: 20px; } .loading-placeholder { background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%); background-size: 200% 100%; animation: loading-gradient 1.5s ease-in-out infinite; border-radius: 5px; width: auto; padding: 10px; } @keyframes loading-gradient { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } .section-placeholder { padding: 15px; text-align: center; color: #888; } /* Polaroid display styles */ .polaroid_div a { position: relative; display: inline-block; } .polaroid_div a:not(:first-child) { margin-left: -30px; } .polaroid_div a:nth-child(n+4) { margin-top: -60px; } .polaroid_div img { max-width: 150px; } .polaroid-rotate-left { transform: rotate(-10deg); } .polaroid-rotate-right { transform: rotate(10deg); } .polaroid-glow { box-shadow: 0 0 2px rgba(0,0,0,0.8), 0 0 5px rgba(0,0,0,0.5); } /* ===== joe- utility set ===== Small, finite vocabulary. See docs/fw-class-cheatsheet.md for the full index of FW classes and when to reach for joe- vs. existing utilities. */ .joe-row{display:flex;flex-wrap:wrap} .joe-row-nw{display:flex;flex-wrap:nowrap} .joe-col{display:flex;flex-direction:column} .joe-grow{flex:1 1 auto;min-width:0} .joe-gap-s{gap:4px} .joe-gap-m{gap:8px} .joe-gap-l{gap:16px} .joe-cf{overflow:hidden} .joe-mt{margin-top:5px} .joe-mb{margin-bottom:5px} .joe-ml{margin-left:5px} .joe-mr{margin-right:5px} .joe-pt{padding-top:5px} .joe-pb{padding-bottom:5px} .joe-avatar{float:left;width:50px;margin-right:10px;text-align:center} .joe-avatar img{display:block;border:1px solid #999;border-radius:3px} .joe-body{margin-left:62px} .joe-card{background:#f7f7f7;padding:8px 10px;border-radius:4px;margin:6px 0} .joe-pill{display:inline-block;padding:1px 6px;border-radius:8px;background:#eee;font-size:10px} .joe-divider{border-top:1px solid #ddd;margin:8px 0} /* joe-navrow - the bottom-of-page "ways back out" row: 3+ destinations, centered, separated by  • . Pair it with .m and a .joe-divider above. nowrap is on the LINK, never the row: at 420px the row MUST wrap, but between items - without this "All Forums" splits across the break. It lives here rather than inline so link number six cannot forget it. Spec + when to use this instead of the floated back/next pair: docs/ui-style-guide.md "Page footer navigation". */ .joe-navrow{text-align:center;padding:5px;line-height:20px} .joe-navrow a{white-space:nowrap} .joe-truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .joe-wrap{overflow-wrap:break-word;word-break:break-word} /* ===== boardkit_* card pattern (also in forum.css; copied here so site-wide) ===== The classic forum-card look: blue title bar, light subtitle bar, body with bordered rows. Use for any "list of items with a header" widget. */ .boardkit_frame{} .boardkit_title{background-color:#cfd7e4;padding:3px 5px 2px 5px;border-top:#3b5998 1px solid;border-bottom:#ccc 1px solid;color:#3b5998;font-size:11px;font-weight:bold;word-wrap:break-word} .boardkit_subtitle{background-color:#eee;padding:3px 5px 2px 5px;border-bottom:#ccc 1px solid;color:#000;font-size:11px;font-weight:normal} .boardkit_no_topics{background-color:#f7f7f7;padding:20px 10px;color:#000;text-align:center;margin:0;border-bottom:#ccc 1px solid} .boardkit_topic{padding:10px;border-bottom:1px solid #ccc} .boardkit_topic_title{font-size:11px;font-weight:bold;display:block} .boardkit_topic_summary{font-size:9px;font-weight:normal;color:#515151;display:inline;margin-right:10px} .boardkit_topic_updated{font-size:9px;font-weight:normal;color:#777;display:inline} /* ===== /ig link-in-bio hub (IgSection.php) ===== The hub is where an Instagram "link in bio" tap lands, but it gets desktop traffic too, and the mobile-first build read badly there: 11px body copy and a swipe carousel nobody can swipe with a mouse. Desktop gets a grid of every shot plus readable copy; .mv2 keeps the phone sizes. */ @font-face{font-family:"wendy";src:url("WendyOne-Regular.ttf");font-display:swap;} /* .cta_big - the big landing-page call to action. Pair with .inputbutton (plus .noul on an ): FW blue button, game font, generous target. Site-wide on purpose, NOT an /ig class - reuse it for any "one thing we want clicked" page. NOTE the lopsided padding, and leave it alone: Wendy One carries a 15px ascent against a 4px descent at 18px, so EQUAL padding renders the label visibly low in the box. 10/8 puts the cap band dead center; measured with canvas TextMetrics actualBoundingBoxAscent, not eyeballed. Bare .wendy is NOT usable here - that rule lives only in mobile2.css, so it silently does nothing on desktop; .cta_big carries the @font-face family itself. */ a.inputbutton.cta_big,.inputbutton.cta_big{font-family:"wendy",arial,sans-serif;font-weight:normal;font-size:18px;line-height:1.25;padding:10px 26px 8px 26px;display:inline-block;white-space:normal} /* Must restate the padding: mobile2.css loads after this file and its `.mv2 a.inputbutton{padding:8px 15px}` ties on specificity, so a font-size-only .mv2 rule loses the padding and the label drops low again on phones. */ .mv2 a.inputbutton.cta_big,.mv2 .inputbutton.cta_big{font-size:16px;padding:9.5px 26px 6.5px 26px} /* .cta_float - the rotating growth prompts that sit on the bottom edge of the rig on /my (the Red Shark invite, the send-friends-fishing pair). They used to be a normal in-flow div pulled up 19px, which still cost the page ~24px of height on desktop and ~30px on mobile, where mobile2.css:30 raises .inputbutton to 18px and the template's own .twelve loses the tie. A prompt that is right maybe 1 render in 6 should not tax the other five. The wrapper is height:0 so it contributes NOTHING to layout, and the button is lifted a full line above the wrapper's origin so it lands over the rig art instead of below it. z-index 95: above the rig's skin layers (skin_slot.z_index tops out at 90) and below mobile's fixed tab bar (.newtabs2 z-index 99) - at 100 it slid over the tabs (#578). */ .cta_float{height:0;overflow:visible;position:relative;z-index:95;text-align:center} a.inputbutton.cta_float_btn,.inputbutton.cta_float_btn{font-size:12px;padding:3px 14px 4px 14px;transform:translateY(-104%);max-width:96%;white-space:normal;box-shadow:0 1px 3px rgba(0,0,0,.35)} .mv2 a.inputbutton.cta_float_btn,.mv2 .inputbutton.cta_float_btn{font-size:15px;padding:6px 12px 3px} /* same middle size as every mv2 button (mobile2.css), not its own 13px */ /* No green buttons (Joe, 2026-09-15) - the old .inputbutton.go is gone. A secondary is .inputaux. .wide goes full-width ONLY on .mv2: a 740px slab reads as a broken layout on desktop, where an inline button is what everything else on the page looks like. */ .mv2 a.inputbutton.wide,.mv2 .inputbutton.wide{display:block;width:100%;box-sizing:border-box} .ig-hub .ig-copy{font-size:14px;line-height:1.65} .ig-hub .ig-wide{max-width:620px;margin:0 auto} .ig-hub .ig-shots{margin:8px 0;display:grid;grid-template-columns:1fr 1fr;grid-gap:8px} .ig-hub .ig-shots.one{grid-template-columns:1fr} .ig-hub .ig-shots a{display:block} .ig-hub .ig-shots a:first-child{grid-column:1 / -1} .ig-hub .ig-shots img{width:100%;display:block} .ig-hub .ig-wire td{font-size:13px;line-height:1.5} .ig-hub .ig-snip{font-size:12px;line-height:1.5;color:#555555;padding-top:3px} .ig-hub .ig-links a.inputbutton{font-size:13px;padding:4px 14px 5px 14px;display:inline-block;margin-bottom:4px} .mv2 .ig-hub .ig-copy{font-size:13px} .mv2 .ig-hub .ig-wide{max-width:480px} /* Search box dropdown (fw-search.js) - fish/town/area/clan rows with a thumbnail. Sits on top of jQuery UI 1.8's .ui-autocomplete, which is why every rule is scoped to .fw-search-menu; the plain widget is still used elsewhere. */ .fw-search-menu{width:auto!important;min-width:260px;max-width:340px;background:#ffffff;border:1px solid #999999;padding:0;max-height:340px;overflow-y:auto;overflow-x:hidden;z-index:9999} .fw-search-menu .ui-menu-item{margin:0;width:100%} .fw-search-menu a.fwsr{display:block;padding:3px 6px;line-height:1.2;text-align:left;border:0;margin:0;min-height:34px;white-space:normal;color:#000000} .fw-search-menu a.fwsr:hover,.fw-search-menu a.ui-state-hover,.fw-search-menu a.ui-state-active{background:#e8f2fb;border:0;margin:0;color:#000000} /* 2px because that is the width the fish page gives the population border */ .fw-search-menu .fwsr-i{width:32px;height:32px;float:left;margin:0 7px 0 0;border:2px solid #dddddd;background:#ffffff} /* town markers are 16x16 pixel art - nearest-neighbor keeps the 2x upscale crisp instead of soft; the -blank town art and fish silhouettes are photos, so no px */ .fw-search-menu .fwsr-i.px{image-rendering:-moz-crisp-edges;image-rendering:pixelated} /* NO color here: the name span also carries the row's .town class, and a rule like .town109 (0,1,0) cannot outrank .fw-search-menu .fwsr-n (0,2,0) */ .fw-search-menu .fwsr-n{display:block;font-size:13px} .fw-search-menu .fwsr-n b{font-weight:bold} .fw-search-menu .fwsr-s{display:block;font-size:11px;color:#777777} /* .polepick - the two-pole chooser on the signup takeover (_add_app.php). This is the ONLY thing the page asks a cold ad click to do, and it used to be two bare links with a 12x12 button.jpg standing in for a radio button and "Free with yer 700 starting gold" spelled out twice. Now each pole is one card-shaped tap target: whole card is the link, the radio is drawn in CSS, and the card lifts on hover so it reads as pickable. Wendy One is the game font and is already @font-face'd above - it has ONE weight, so never put inside these (a faux-bold Wendy renders as a smear; use color instead). */ #welcome .polepick{border-collapse:separate;border-spacing:20px 0;margin:16px auto 0;max-width:100%} #welcome .polepick td{text-align:center;vertical-align:top;padding:0} #welcome .pp-card{display:block;padding:12px 12px 15px;border:2px solid #E2C822;border-radius:10px;background:#ffffff;text-decoration:none;color:#333333;transition:transform .12s ease,box-shadow .12s ease,border-color .12s ease} #welcome .pp-card:hover,#welcome .pp-card:focus{border-color:#0a8f0a;box-shadow:0 4px 14px rgba(0,0,0,.18);transform:translateY(-3px);text-decoration:none} #welcome .pp-card:active{transform:translateY(0);box-shadow:0 1px 4px rgba(0,0,0,.18)} /* pointer-events off or the tap lands on the