var sb;
    (function(sb) {
        sb.adSlots = ['forecast_incontent_1', 'forecast_incontent_2', 'weather_incontent_4', 'weather_incontent_5', 'weather_incontent_6'];
        sb.createdUtc = new Date(1792528327729);
        sb.startUtc = new Date();
        sb.domain = "seabreeze.com.au";
        sb.url = "https://www.seabreeze.com.au";
        sb.apiUrl = "https://api.seabreeze.com.au";
        sb.apiKey = "2FC32786-3166-404E-89F5-1815879C3BF3";
        sb.cdnHost = "";
        sb.member = null;
        sb.config = {"adServer":"p","houseFallback":false,"houseTimeoutMs":4000,"showRemoveAds":false,"showRemoveAdsText":"Remove Advertising","showNightShading":false,"useNewWeather":true,"funkyArrows":false,"enableSearchToSamePage":false};
        sb.state = "";
        sb.xDomain = "";
        sb.debug = false;  
        sb.version = "5130";
    })(sb || (sb = {}));


    function getWindowWidth() {
        if (typeof (window.innerWidth) == 'number')
            return window.innerWidth;
        if (document.documentElement && document.documentElement.clientWidth)
            return document.documentElement.clientWidth;
        if (document.body && document.body.clientWidth)
            return document.body.clientWidth;
        return null;
    }

    document.cookie = 'dw=' + getWindowWidth() + '; path=/';

</script>


    <script>
        if(!sb.debug) {
            (function () {
                var errorsEndpoint = (sb.apiUrl || '').replace(/\/+$/, '') + '/v1/classic/errors';
                var getStackTrace = function() {
                    try {
                        var obj = {};
                        if (typeof Error.captureStackTrace === 'function') {
                            Error.captureStackTrace(obj, getStackTrace);
                            return obj.stack || '';
                        }
                    } catch (e) { }
                    return '';
                };
                function stringifyConsoleArgs(args) {
                    var parts = [];
                    for (var i = 0; i < args.length; i++) {
                        var a = args[i];
                        try {
                            if (a instanceof Error) {
                                parts.push(a.message + (a.stack ? '\n' + a.stack : ''));
                            } else if (a && typeof a === 'object') {
                                parts.push(JSON.stringify(a));
                            } else {
                                parts.push(String(a));
                            }
                        } catch (ex) {
                            parts.push('[unprintable]');
                        }
                    }
                    return parts.join(' ');
                }
                function sendJsErrorReport(errMsg, url, line, column, stack) {
                    try {
                        var data = new FormData();
                        data.append('source', 'JS');
                        data.append('errMsg', errMsg != null ? String(errMsg) : '');
                        data.append('url', url != null && url !== '' ? String(url) : (typeof location !== 'undefined' ? location.href : ''));
                        data.append('line', line != null && line !== undefined ? String(line) : '0');
                        data.append('column', column != null && column !== undefined ? String(column) : '0');
                        data.append('error', '');
                        data.append('stack', stack != null ? String(stack) : '');
                        var clientDiag = (typeof window.__sbClientDiag === 'string') ? window.__sbClientDiag : '';
                        if (clientDiag) {
                            data.append('clientInfo', clientDiag);
                        }
                        if(sb.member != null) {
                            data.append('memberName', sb.member.name);
                        }
                        var xhr = new XMLHttpRequest();
                        xhr.open('POST', errorsEndpoint);
                        xhr.withCredentials = true;
                        xhr.send(data);
                    } catch (e) { }
                }
                var pageOrigin = (typeof location !== 'undefined' && location.origin) ? location.origin : '';
                function stripTrailingLineColumn(uri) {
                    if (!uri) return uri;
                    var s = String(uri);
                    s = s.replace(/:(?:\d+):(?:\d+)$/, '');
                    return s;
                }
                function originFromAbsUrl(candidate) {
                    try {
                        return new URL(stripTrailingLineColumn(candidate)).origin;
                    } catch (e) {
                        return null;
                    }
                }
                function scriptUrlBelongsToSite(scriptUrl) {
                    if (!pageOrigin) return true;
                    if (!scriptUrl || scriptUrl === '') return true;
                    try {
                        return new URL(String(scriptUrl), typeof location !== 'undefined' ? location.href : '').origin === pageOrigin;
                    } catch (e2) {
                        return true;
                    }
                }
                function stackImplicatesForeignOrigin(stack) {
                    if (!stack || !pageOrigin) return false;
                    var re = /\b(https?:\/\/[^\s)'<>[\]]+)/g;
                    var m;
                    while ((m = re.exec(stack)) !== null) {
                        var origin = originFromAbsUrl(m[1]);
                        if (origin && origin !== pageOrigin)
                            return true;
                    }
                    return false;
                }
                function isKnownBotUa() {
                    try {
                        var ua = navigator.userAgent || '';
                        return /Applebot|Bytespider|baiduspider|Googlebot|bingbot|YandexBot|facebookexternalhit|Twitterbot|LinkedInBot|SemrushBot|AhrefsBot|DotBot|PetalBot|GPTBot/i.test(ua);
                    } catch (e) { return false; }
                }
                function isNoisyJsErrorMessage(msg) {
                    if (!msg) return false;
                    var s = String(msg);
                    var needles = [
                        'addEL_hook',
                        'tiles.openfreemap.org',
                        'gstatic.com/firebasejs',
                        'ResizeObserver loop',
                        'NotReadableError',
                        'The I/O read operation failed',
                        'The play() request was interrupted',
                        'Database deleted by request of the user',
                        'Blocked a frame with origin',
                        '$ is not defined',
                        'jQuery is not defined',
                        "Can't find variable: $",
                        "Can't find variable: jQuery"
                    ];
                    for (var i = 0; i < needles.length; i++) {
                        if (s.indexOf(needles[i]) !== -1) return true;
                    }
                    if (s.indexOf('Maximum call stack size exceeded') !== -1 &&
                        (s.indexOf('addEventListener') !== -1 || s.indexOf('addEL_hook') !== -1))
                        return true;
                    if (/THREE\.WebGL|Error creating WebGL context|WebGL context could not be created/i.test(s))
                        return true;
                    if (/Failed to initialize WebGL|webglcontextcreationerror|OffscreenContext Creation failed|GpuChannelHost creation failed/i.test(s))
                        return true;
                    if (/htmx:sendAbort|htmx:afterRequest/i.test(s)) return true;
                    if (s.indexOf('[console.error] Failed to fetch') !== -1 && s.indexOf('firebase') !== -1)
                        return true;
                    if (s === 'Unhandled rejection' || s === '[console.error] Unhandled rejection')
                        return true;
                    return false;
                }
                function isNoisyJsErrorStack(stack) {
                    if (!stack) return false;
                    var s = String(stack);
                    var needles = [
                        'addEL_hook',
                        'tiles.openfreemap.org',
                        'gstatic.com/firebasejs',
                        'm.baidu.com'
                    ];
                    for (var i = 0; i < needles.length; i++) {
                        if (s.indexOf(needles[i]) !== -1) return true;
                    }
                    if (/THREE\.WebGL|Error creating WebGL/i.test(s)) return true;
                    if (/Failed to initialize WebGL|webglcontextcreationerror|OffscreenContext Creation failed|GpuChannelHost creation failed/i.test(s)) return true;
                    return false;
                }
                function isBaiduInjectionContext(message, stack) {
                    var msg = message != null ? String(message) : '';
                    if (msg.indexOf('Maximum call stack size exceeded') === -1) return false;
                    try {
                        if ((document.referrer || '').indexOf('baidu.com') !== -1) return true;
                    } catch (e) { }
                    return isNoisyJsErrorStack(stack);
                }
                function shouldReportJsError(message, scriptUrl, stack) {
                    var msg = message != null ? String(message) : '';
                    if (msg === 'Script error.' || msg.indexOf('Script error.') === 0)
                        return false;
                    if (isKnownBotUa()) return false;
                    if (isBaiduInjectionContext(msg, stack)) return false;
                    if (isNoisyJsErrorMessage(msg)) return false;
                    if (isNoisyJsErrorStack(stack)) return false;
                    if (!scriptUrlBelongsToSite(scriptUrl))
                        return false;
                    if (stackImplicatesForeignOrigin(stack))
                        return false;
                    return true;
                }
                function shouldReportWindowError(message, scriptUrl, stack) {
                    return shouldReportJsError(message, scriptUrl, stack);
                }
                function shouldReportConsoleError(message, stack) {
                    return shouldReportJsError(message, typeof location !== 'undefined' ? location.href : '', stack);
                }
                var origConsoleError = console.error.bind(console);
                window.onerror = function (errMsg, url, line, column, error) {
                    try {
                        var stack = (error && error.stack) ? error.stack : getStackTrace();
                        if (shouldReportWindowError(errMsg, url, stack))
                            sendJsErrorReport(String(errMsg != null ? errMsg : ''), url, line, column, stack);
                    } catch (e) { }
                    origConsoleError(errMsg);
                    return true;
                };
                console.error = function () {
                    origConsoleError.apply(console, arguments);
                    try {
                        var msg = stringifyConsoleArgs(arguments);
                        if (!msg) return;
                        var st = '';
                        try { st = new Error().stack || ''; } catch (es) { }
                        if (!shouldReportConsoleError(msg, st)) return;
                        sendJsErrorReport('[console.error] ' + msg, typeof location !== 'undefined' ? location.href : '', '0', '0', st);
                    } catch (e) { }
                };
                window.addEventListener('unhandledrejection', function (event) {
                    try {
                        var reason = event.reason;
                        var msg = (reason && reason.message) ? String(reason.message) : String(reason != null ? reason : 'Unhandled rejection');
                        var stack = (reason && reason.stack) ? String(reason.stack) : '';
                        if (!shouldReportJsError(msg, typeof location !== 'undefined' ? location.href : '', stack)) return;
                        sendJsErrorReport(msg, typeof location !== 'undefined' ? location.href : '', '0', '0', stack);
                    } catch (e) { }
                });
            })();
        }
    </script>
    <script>
        var googletag = googletag || {};
        googletag.cmd = googletag.cmd || [];
    </script>
<script async src='https://cdn.fuseplatform.net/publift/tags/2/2153/fuse.js'></script>          <!-- Custom Theme -->
        <!-- Global Head -->
    <!-- Layout01Head end -->

    
    
</head>
<body class="has-banners">


<!-- Begin BodyStart -->
<script src="/Scripts/Vendor/jquery-4.0.0-min.js"></script>

<script>
    (function () {
        // Source of truth for last pointer type, also read by Global.ts via
        // a window-backed getter on Global.mastheadLastPointerType.
        window.__sbMastheadLastPointerType = 'unknown';
        document.addEventListener('pointerdown', function (e) {
            window.__sbMastheadLastPointerType = e.pointerType || 'unknown';
        }, true);

        function isTouchFirst() {
            return (typeof navigator !== 'undefined' && navigator.maxTouchPoints > 1);
        }
        function canHoverFinePointer() {
            if (isTouchFirst()) return false;
            return window.matchMedia && window.matchMedia('(hover: hover) and (pointer: fine)').matches;
        }

        // Clamp a just-opened flyout submenu fully on-screen (e.g. at 947x600 the
        // Forums flyouts otherwise open past the right edge). Flips to the left of
        // the parent row when the flyout fits there, else pulls it back inside the
        // right edge; shifts up / scrolls when it overflows the bottom. Inline
        // styles win over the breakpoint rules in Masthead.cshtml with no
        // specificity battle; Global.ts clears them when the dropdown closes,
        // and each call re-resets before measuring.
        var CLAMP_MARGIN = 8;
        window.__sbClampSubmenu = function (submenu) {
            var s = submenu.style;
            s.left = ''; s.right = ''; s.top = ''; s.maxHeight = ''; s.overflowY = '';

            var rect = submenu.getBoundingClientRect();
            if (!rect.width) return; // hidden at this breakpoint (e.g. coarse-pointer Forums at xs/sm)

            var vw = document.documentElement.clientWidth;
            var vh = document.documentElement.clientHeight;

            var overflowRight = rect.right - (vw - CLAMP_MARGIN);
            if (overflowRight > 0) {
                var li = submenu.parentElement;
                var liLeft = li ? li.getBoundingClientRect().left : 0;
                if (liLeft + 16 - rect.width >= CLAMP_MARGIN) {
                    // Room on the left: mirror the default position (1rem overlap).
                    s.left = 'auto';
                    s.right = 'calc(100% - 1rem)';
                } else {
                    // No room either side: keep right, pulled back on-screen.
                    // offsetLeft is relative to the li, so this works at any breakpoint.
                    s.left = Math.floor(submenu.offsetLeft - overflowRight) + 'px';
                }
            }

            if (rect.height > vh - CLAMP_MARGIN * 2) {
                s.maxHeight = (vh - CLAMP_MARGIN * 2) + 'px';
                s.overflowY = 'auto';
            }
            rect = submenu.getBoundingClientRect();
            var overflowBottom = rect.bottom - (vh - CLAMP_MARGIN);
            if (overflowBottom > 0) {
                var shift = Math.min(overflowBottom, Math.max(rect.top - CLAMP_MARGIN, 0));
                if (shift > 0) s.top = '-' + Math.ceil(shift) + 'px';
            }
        };

        // Hover path: flyouts open purely via CSS (li:hover) in Masthead.cshtml,
        // so clamp on entry to any menu row owning a flyout. mouseover + the
        // relatedTarget check emulates mouseenter (which cannot be delegated).
        // On touch the flyout is still display:none here, so the zero-width
        // guard above makes this a no-op; the tap path below clamps instead.
        document.addEventListener('mouseover', function (e) {
            var t = e.target;
            if (!t || !t.closest) return;
            var li = t.closest('.masthead-container .dropdown-menu li');
            if (!li) return;
            if (e.relatedTarget && li.contains(e.relatedTarget)) return;
            var submenu = li.querySelector(':scope > .dropdown-submenu');
            if (submenu) window.__sbClampSubmenu(submenu);
        }, true);

        // Capture-phase click → runs BEFORE the anchor's default navigation,
        // BEFORE Bootstrap's data-api handlers, BEFORE any later jQuery binding.
        document.addEventListener('click', function (e) {
            if (e.button !== 0 && e.button !== undefined) return;
            if (e.defaultPrevented) return;

            var target = e.target;
            if (!target || !target.closest) return;
            var item = target.closest('.masthead-container .dropdown-menu .dropdown-item');
            if (!item) return;

            // Parent-row contract: next-sibling .dropdown-submenu + a visible .ic-right arrow.
            var submenu = item.nextElementSibling;
            if (!submenu || !submenu.classList || !submenu.classList.contains('dropdown-submenu')) return;
            var arrow = item.querySelector('.ic-right');
            if (!arrow) return;
            // offsetParent is null when the element (or an ancestor) is display:none.
            if (arrow.offsetParent === null && arrow.offsetWidth === 0 && arrow.offsetHeight === 0) return;

            // Mouse/trackpad on a true hover-capable device: let the tap navigate
            // (the hover-flyout already exposed the children). Anything else — touch,
            // pen, iPad-in-Desktop-Mode, touchscreen laptops — toggles the submenu.
            var pt = window.__sbMastheadLastPointerType;
            var wasTouch = pt === 'touch' || pt === 'pen';
            if (!wasTouch && canHoverFinePointer()) return;

            e.preventDefault();
            e.stopPropagation();

            // Toggle this submenu; close any sibling submenus in the same dropdown-menu.
            // Also toggle .active on the parent .dropdown-item — the existing DropDown.scss
            // &.active rule paints it yellow, replacing the light-blue --bg-secondary that
            // iOS Safari's sticky :hover otherwise leaves behind after a tap.
            var willOpen = !submenu.classList.contains('show');
            var li = item.parentElement;
            var ul = li && li.parentElement;
            if (ul) {
                var openItems = ul.querySelectorAll(':scope > li > .dropdown-item.active');
                for (var k = 0; k < openItems.length; k++) openItems[k].classList.remove('active');
                var subs = ul.querySelectorAll(':scope > li .dropdown-submenu.show');
                for (var i = 0; i < subs.length; i++) subs[i].classList.remove('show');
            }
            if (willOpen) {
                submenu.classList.add('show');
                item.classList.add('active');
                window.__sbClampSubmenu(submenu);
            } else {
                item.classList.remove('active');
            }
        }, true); // <-- capture
    })();
</script>

    <a id="PageTop"></a>         <a href="#PageTop" class="toTopOfPage" aria-label="Back to top"><span><i class="ic-up icon-2" aria-hidden="true"></i></span></a>             <div class="print-only layout-print-brand"><img src="/Assets/Images/static/a/logo-seabreeze.com.au.png" alt="Seabreeze.com.au"/></div>
        <div class="masthead-container" id="masthead-wrapper">
                



<style>
    /* Make masthead sticky on all screen sizes */
    /* M2 elevation 6dp — https://m2.material.io/design/environment/light-shadows.html */
    .masthead-container {
        position: sticky;
        top: 0;
        z-index: 1000; /* Above content, below modals (1050+) and Bootstrap dialogs */
        box-shadow:
            0 3px 5px -1px rgba(0, 0, 0, 0.2),
            0 6px 10px 0 rgba(0, 0, 0, 0.14),
            0 1px 18px 0 rgba(0, 0, 0, 0.12);
        border: 0;
        border-radius: 0;
    }
    
    /* Fix: Prevent scrolling and layout shift when Bootstrap modal opens.
       Use overflow: hidden to block scrolling, and padding-right: 0 to prevent shift. */
    body.modal-open {
        overflow: hidden !important;
        padding-right: 0 !important;
    }

    .masthead-icon div {
        color: #fff;
        font-size: .80rem;
    }
    /* Keep masthead dropdown actions at the 44px tap minimum. */
    .masthead-container .dropdown-menu .dropdown-item {
        min-height: 44px;
        display: flex;
        align-items: center;
    }
    
    /* Person icon in logged-out state - match visual weight of masthead SVG icons */
    .masthead-person-icon {
        filter: brightness(0) invert(1);
        display: block;
        width: 24px !important;
        height: 24px !important;
        min-width: 24px !important;
        min-height: 24px !important;
    }

    .logo { display:block; width:80px; height:40px; margin-top:-4px; margin-bottom:-4px; }
    @media (min-width:992px)  { .logo { width:124px; height:62px; margin:0; } }
    
    /* Dark mode: Fix search box border - ensure white border all the way around */
    [data-bs-theme="dark"] .masthead-container .input-group {
        border: 1px solid #fff;
        border-radius: 0.5rem;
    }
    [data-bs-theme="dark"] .masthead-container .input-group .input-group-text,
    [data-bs-theme="dark"] .masthead-container .input-group .form-control {
        border: none !important;
    }
    /* Dark mode: Keep search icon blue (icon-primary filter) instead of inverted white */
    [data-bs-theme="dark"] .masthead-container .input-group .ic-search.icon-primary {
        filter: invert(32%) sepia(77%) saturate(5053%) hue-rotate(209deg) brightness(99%) contrast(111%) !important;
    }

    /*
      Inset depth on the location search: box-shadow on the input-group itself is hidden behind
      opaque .form-control / .input-group-text. A ::after layer draws the inset over the control
      (pointer-events: none); z-index below :focus so Bootstrap focus rings still win.
    */
    .masthead-container .masthead-location-search {
        position: relative;
        border-radius: 0.5rem;
    }
    .masthead-container .masthead-location-search::after {
        content: '';
        position: absolute;
        inset: 0;
        border-radius: inherit;
        pointer-events: none;
        z-index: 3;
        box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.14), inset 0 1px 2px rgba(0, 0, 0, 0.08);
    }
    .masthead-container .masthead-location-search > .form-control:focus,
    .masthead-container .masthead-location-search > .input-group-text:focus-within {
        z-index: 5;
    }
    
    /* lg/xl: spread nav icons more, shrink search box (old-site style) */
    @media (min-width: 992px) {
        #masthead-icons {
            gap: 2.75rem !important;
        }
        .masthead-search-col {
            max-width: 480px !important;
        }
    }

    /* Below lg: spread icons evenly with equal sizing */
    @media (max-width: 991.98px) {
        #masthead-icons {
            justify-content: space-evenly !important;
        }
        #masthead-icons > a,
        #masthead-icons > .dropdown {
            text-align: center;
        }
        #masthead-icons .masthead-icon,
        .masthead-profile-col .masthead-icon {
            align-items: center !important;
        }
        /* Keep SVG icons same size as lg */
        #masthead-icons .masthead-icon svg,
        .masthead-person-icon {
            width: 24px !important;
            height: 24px !important;
            min-width: 24px !important;
            min-height: 24px !important;
        }
    }
    
    /* Below lg: SearchBox top row, then Logo | Icons+Profile bottom row */
    @media (max-width: 991.98px) {
        .masthead-container > .row {
            justify-content: space-between !important;
            flex-wrap: wrap !important;
            overflow: visible !important;
        }
        /* SearchBox must take full width to force wrap */
        .masthead-container > .row > div:first-child {
            flex: 0 0 100% !important;
            max-width: 100% !important;
            width: 100% !important;
            padding-right: 0 !important;
        }
        .masthead-search-col {
            max-width: none !important;
        }
        /* Reduce search box size on small screens */
        .masthead-container .input-group.input-group-lg {
            font-size: 0.875rem;
        }
        .masthead-container .input-group.input-group-lg .form-control,
        .masthead-container .input-group.input-group-lg .input-group-text {
            padding: 0.375rem 0.5rem;
            font-size: 0.875rem;
        }
        .masthead-container .input-group.input-group-lg .ic-search {
            font-size: 0.875rem;
        }
        /* Hamburger col */
        .masthead-container > .row > .col-auto.order-2 {
            order: 2 !important;
            flex: 0 0 auto !important;
            padding-left: 0.25rem !important;
            display: flex !important;
            align-items: center !important;
        }
        .masthead-container .masthead-search-col a.d-lg-none {
            overflow: visible !important;
        }
        .masthead-container #mobile-drawer-toggle {
            min-width: 44px;
            min-height: 44px;
            margin-top: 0 !important;
            margin-left: 0 !important;
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }
        /* Icons + Profile share the row, stretch to fill between logo edges */
        .masthead-container > .row > .col-auto.order-3 {
            order: 3 !important;
            flex: 1 1 0 !important;
            margin-left: 0.5rem !important;
            margin-right: 0 !important;
            overflow: visible !important;
        }
        .masthead-profile-col {
            order: 4 !important;
            flex: 0 0 auto !important;
        }
        #masthead-icons {
            justify-content: space-evenly !important;
            gap: 0.5rem !important;
            width: 100%;
            overflow: visible !important;
        }
        #masthead-icons > a,
        #masthead-icons > .dropdown {
            text-align: center;
            flex: 1;
            position: relative;
        }
        #masthead-icons > a,
        #masthead-icons > .dropdown > a,
        .masthead-profile-col > .flex > .dropdown > a {
            min-width: 44px;
            min-height: 44px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding-top: 0.25rem;
            padding-bottom: 0.25rem;
        }
        /* Profile col items also stretch evenly */
        .masthead-profile-col > .flex > .dropdown {
            text-align: center;
        }
        /* Ensure dropdowns can overflow */
        #masthead-icons .dropdown-menu,
        .masthead-profile-col .dropdown-menu {
            position: absolute !important;
            z-index: 1050 !important;
        }
        #masthead-icons .masthead-icon,
        .masthead-profile-col .masthead-icon {
            align-items: center !important;
        }
        /* Icons and font sized to fit within logo/profile height */
        #masthead-icons .masthead-icon svg,
        .masthead-person-icon {
            width: 20px !important;
            height: 20px !important;
            min-width: 20px !important;
            min-height: 20px !important;
        }
        #masthead-icons .masthead-icon div,
        .masthead-profile-col .masthead-icon div {
            font-size: 0.65rem !important;
            line-height: 1.1 !important;
        }
        .mobile-drawer-panel .mobile-drawer-content {
            padding-bottom: 188px !important;
        }
        .mobile-drawer-thumb-space {
            height: 50vh;
            height: 50dvh;
            pointer-events: none;
            flex-shrink: 0;
        }
    }
    
    /* M2 elevation 12dp (above masthead 6dp) — same spec as DropDown.scss .masthead-container .dropdown-menu */
    .masthead-container .dropdown-menu {
        border: 1px solid #3d88b8; /* border of dropdown menu container */
        box-shadow:
            0 7px 8px -4px rgba(0, 0, 0, 0.2),
            0 12px 17px 2px rgba(0, 0, 0, 0.14),
            0 5px 22px 4px rgba(0, 0, 0, 0.12) !important;
        padding-top: 0.15rem !important;
        padding-bottom: 0.15rem !important;
    }

    .dropdown-menu li {
        position: relative;
    }
    
    /* Submenu: hidden by default; absolute-positioned relative to parent li.
       Viewport clamping (flip left / pull back / shift up when the flyout would
       render off-screen, e.g. a 947x600 window) is done with inline styles by
       window.__sbClampSubmenu in _Layout02BodyStart.cshtml on every open. */
    .dropdown-menu .dropdown-submenu {
        display: none;
        position: absolute;
        left: calc(100% - 1rem);
        top: 0;
    }

    /* Submenu opens via .show (tap on touch) or :hover (mouse/trackpad at ANY breakpoint, like
       the classic site). `pointer: fine` keeps phones/tablets on tap-to-open despite Android
       mis-reporting `hover: hover`. */
    .masthead-container .dropdown-menu .dropdown-submenu.show {
        display: block;
    }
    @media (hover: hover) and (pointer: fine) {
        .masthead-container .dropdown-menu > li:hover > .dropdown-submenu {
            display: block;
        }
    }

    .masthead-container .dropdown-item .submenu-item-row {
        display: flex;
        align-items: center;
        width: 100%;
        justify-content: space-between;
        gap: 0.5rem;
    }

    .masthead-container .dropdown-item .submenu-item-row .ic-right {
        margin-left: auto;
        flex-shrink: 0;
    }

    /* Below md: parent dropdown is narrow, so overlap parent with left: 73% for visibility. */
    @media (max-width: 767.98px) {
        .masthead-container .dropdown-menu .dropdown-submenu.show {
            left: 73%;
        }
        @media (hover: hover) and (pointer: fine) {
            .masthead-container .dropdown-menu > li:hover > .dropdown-submenu {
                left: 73%;
            }
        }

        /* Forums: single-level menu on touch only at xs/sm — submenus suppressed, tap navigates
           (ic-right indicator already hidden via d-none d-md-inline). Mouse/trackpad users keep
           the full sub-category flyouts on hover at every width, as the classic site did. */
        @media (pointer: coarse) {
            .masthead-container [data-nav-section="forums_menu"] .dropdown-submenu {
                display: none !important;
            }
        }

        /* First-level dropdown: position at top:0 when it doesn't fit vertically */
        .masthead-container > .row .dropdown > .dropdown-menu.dropdown-menu-top-adjusted {
            top: 0 !important;
            position: fixed !important;
            max-height: 100vh;
            overflow-y: auto;
        }
    }

    /* xs/sm: smooth compact/expand (Safari address-bar timing ~200ms) */
    @media (max-width: 991.98px) {
        .masthead-container {
            transition: padding 0.2s ease-out;
        }
        .masthead-container .masthead-search-col,
        .masthead-container #masthead-search-container {
            transition: opacity 0.2s ease-out, max-height 0.2s ease-out;
        }

        .masthead-mobile-compact-logo {
            display: none;
        }

        .masthead-container.masthead-mobile-compact .masthead-search-col,
        .masthead-container.masthead-mobile-compact #masthead-search-container {
            display: none !important;
        }

        .masthead-container.masthead-mobile-compact .masthead-mobile-compact-logo {
            display: inline-flex !important;
            align-items: center;
            flex-shrink: 0;
        }

        .masthead-container.masthead-mobile-compact > .row > .col-auto.order-2 {
        }

        .masthead-container.masthead-mobile-compact > .row > .col-auto.order-3 {
            margin-left: 0 !important;
            margin-right: 0 !important;
            flex: 1 1 auto !important;
            min-width: 0;
        }

        .masthead-container.masthead-mobile-compact #masthead-icons .masthead-icon > div {
            display: none;
        }

        .masthead-container.masthead-mobile-compact #masthead-icons > a,
        .masthead-container.masthead-mobile-compact #masthead-icons > .dropdown > a {
            padding-top: 0 !important;
            padding-bottom: 0 !important;
            min-height: 40px;
        }

        .masthead-container > div {
            padding-top: 0.5 !important;
            padding-bottom: 0.5 !important;
        }

        .masthead-container.masthead-mobile-compact > .row {
            flex-wrap: nowrap !important;
            justify-content: space-between !important;
        }

        .masthead-container.masthead-mobile-compact #masthead-icons {
            width: 100%;
            gap: 0 !important;
            justify-content: space-evenly !important;
        }

        .masthead-container.masthead-mobile-compact .masthead-profile-col {
            padding-left: 0.25rem !important;
            padding-right: 0.25rem !important;
        }

        .masthead-container.masthead-mobile-compact .masthead-profile-col > .flex > .dropdown > a,
        .masthead-container.masthead-mobile-compact .masthead-profile-col > .flex > .dropdown > a > .position-relative {
            min-width: 36px;
            min-height: 36px;
        }

        .masthead-container.masthead-mobile-compact .masthead-profile-col img.rounded-circle {
            margin-top: 0.25rem !important;
            width: 1.75rem !important;
            height: 1.75rem !important;
        }

        .masthead-container.masthead-mobile-compact .masthead-profile-col .sb-unread-mail-badge {
            font-size: 0.58rem;
            padding: 0.12rem 0.32rem !important;
        }

        .masthead-container.masthead-mobile-compact .masthead-mobile-compact-logo .logo {
            width: 60px;
            height: 30px;
            margin-top: 0;
            margin-bottom: 0;
            margin-right: 1.25rem;
        }

        .masthead-container.masthead-mobile-compact #mobile-drawer-toggle svg {
            width: 24px;
            height: 24px;
        }

        .masthead-container.masthead-mobile-compact #masthead-icons .masthead-icon svg {
            width: 22px !important;
            height: 22px !important;
            min-width: 22px !important;
            min-height: 22px !important;
        }
    }
    
    /* Mobile drawer menu */
    .mobile-drawer-backdrop {
        position: fixed;
        inset: 0;
        z-index: 1039;
        background: rgba(0,0,0,0.4);
    }
    .mobile-drawer-panel {
        position: fixed;
        top: 0;
        height: 100vh;
        height: 100dvh;
        width: 76vw;
        z-index: 1040;
        display: flex;
        flex-direction: column;
        /* Right-handed: dock right; swipe from the right edge. */
        left: auto;
        right: 0;
        /* Avoid fractional-pixel sliver at viewport edge on xs/sm when closed */
        transform: translateX(calc(100% + 2px));
        transition: transform 180ms ease-out;
        overflow: hidden;
        box-shadow: -4px 4px 24px rgba(0,0,0,0.25);
        /* Custom drawer ripple handles press feedback (not WebKit gray / primary flash) */
        -webkit-tap-highlight-color: transparent;
    }
    .mobile-drawer-scroll {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    .mobile-drawer-panel.open {
        transform: translateX(0);
    }
    /* Left-handed: drawer docks on the left; swipe opens from the left edge. */
    html[data-sb-handedness="left"] .mobile-drawer-panel {
        left: 0;
        right: auto;
        transform: translateX(calc(-100% - 2px));
        box-shadow: 4px 4px 24px rgba(0,0,0,0.25);
    }
    html[data-sb-handedness="left"] .mobile-drawer-panel.open {
        transform: translateX(0);
    }
    .transition-opacity {
        transition: opacity 180ms ease-out;
    }
    .opacity-0 { opacity: 0; }
    .opacity-100 { opacity: 1; }
    
    /* Drawer section styling */
    .drawer-section-header {
        cursor: pointer;
        user-select: none;
        min-height: 44px;
        position: relative;
        overflow: hidden;
        isolation: isolate;
    }
    .drawer-section-header:hover {
        background-color: var(--bs-tertiary-bg);
    }
    .drawer-nav-item {
        padding: 0.5rem 1rem 0.5rem 2.5rem;
        display: flex;
        align-items: center;
        gap: 0.75rem;
        color: var(--bs-body-color);
        text-decoration: none;
        min-height: 44px;
        position: relative;
        overflow: hidden;
        isolation: isolate;
    }
    .drawer-nav-item:hover,
    .drawer-nav-item:focus,
    .drawer-nav-item:active,
    .drawer-section-header:focus,
    .drawer-section-header:active {
        background-color: var(--bs-tertiary-bg);
        color: var(--bs-body-color);
    }
    .drawer-nav-item i {
        width: 20px;
        text-align: center;
    }
    /* Touch-origin fill: circle → full row (300ms), fade out on release (600ms).
       Fill color matches app AppColors.blue10 / --bg-secondary.
       z-index -1 keeps label text/icons above the fill (text nodes are not
       elevated by child selectors). */
    .drawer-tap-ripple {
        position: absolute;
        border-radius: 50%;
        background-color: var(--bg-secondary, #E5F0FF);
        pointer-events: none;
        transform: translate(-50%, -50%) scale(0);
        opacity: 1;
        z-index: -1;
        will-change: transform, opacity;
    }
    .drawer-tap-ripple.is-expanding {
        transition: transform 300ms ease-out;
        transform: translate(-50%, -50%) scale(1);
    }
    .drawer-tap-ripple.is-fading {
        transition: opacity 600ms ease-out;
        opacity: 0;
    }
    /* Same press fill on weather rail items (lg+ equivalent of drawer weather links).
       Rail links shrink-wrap to icon+label by default — force full rail width so the
       ripple matches the mobile drawer row fill. */
    .weather-rail-item {
        position: relative;
        overflow: hidden;
        isolation: isolate;
        align-self: stretch !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box;
    }
    .rotate-180 {
        transform: rotate(180deg);
    }
    [x-cloak] {
        display: none !important;
    }

    /* Drawer: three-arrow wind legend (compact; matches member menu scale) */
    .drawer-arrow-stack {
        width: 22px;
        height: 22px;
    }
    .drawer-arrow-stack i {
        width: 14px !important;
        height: 14px !important;
        min-width: 14px !important;
        min-height: 14px !important;
        filter: drop-shadow(1px 1px 1px rgba(0,0,0,0.35));
    }
</style>


<!-- Masthead -->
<div class="masthead-container container-fluid bg-primary m-0 p-0" data-nav="masthead">
    <div class="row g-0 p-2 p-lg-1 justify-content-between" >
        
        <!-- SearchBox -->
        <div class="col-12 col-lg order-1 order-lg-3 mb-0 masthead-search-col" style="max-width:640px">
            <div id="masthead-search-container" class="flex gap-2 align-items-center">
                <!-- Logo in search row (below lg only) -->
                    <a href="/" class="d-lg-none flex-shrink-0 position-relative">
                        <img src="/Assets/Images/static/a/logo-seabreeze.com.au.png" alt="Seabreeze" class="logo">
                    </a>
                <div class="ps-3 flex-grow-1 min-w-0 my-2">
    <div class="input-group input-group-lg p-md-0">
        <span class="input-group-text bg-background" style="border-color: #e6e6e6; border-right: none;">
            <i class="ic-search icon-primary"></i>
        </span>
        <input class="form-control bg-background ps-0 location-search" id="73"
               type="search"
               placeholder='Suburb, PostCode or Beach...'
               autocomplete="off" autocorrect="off" autocapitalize="none" spellcheck="false" inputmode="search" role="combobox" aria-autocomplete="list" aria-haspopup="listbox">
        <span class="input-group-text bg-primary location-search-target location-search-target-gps">
            <i class="ic-target-primary bg-primary"></i>
        </span>
    </div>
    <script>window.__sbPrebuiltRecents = [];</script>
                </div>
            </div>
        </div>

        <!-- Logo (lg+)  Hamburger (below lg) -->
        <div class="col-auto order-2 order-lg-1 flex align-items-center position-relative">
                <a href="/" alt="Home" class="d-none d-lg-block">
                    <img src="/Assets/Images/static/a/logo-seabreeze.com.au.png" alt="Seabreeze" class="logo">
                </a>
            <a href="/" alt="Home" class="masthead-mobile-compact-logo d-lg-none position-relative">
                <img src="/Assets/Images/static/a/logo-seabreeze.com.au.png" alt="Seabreeze" class="logo">
            </a>
            <!-- Hamburger menu button (below lg only) -->
            <button class="btn p-0 mt-1 ms-1 d-lg-none" id="mobile-drawer-toggle" aria-label="Menu">
                <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" fill="white" viewBox="0 0 16 16">
                    <path fill-rule="evenodd" d="M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5m0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5m0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5"/>
                </svg>
            </button>
        </div>

        <!-- Nav Icons -->
        <div class="col-auto order-3 order-lg-2">
            <div id="masthead-icons" class="flex flex-nowrap gap-2 px-lg-4 justify-content-center align-items-center h-100" data-nav-section="nav_icons">

                <div class="dropdown">
                <a href="/weather/wind-forecast/sydney" class="medium fw-bold text-body dropdown-auto masthead-direct-nav" data-bs-toggle="dropdown" data-bs-offset="-22, 2" aria-expanded="false" id="weatherMenu">
                    <div class="column gap-1 align-items-center masthead-icon">
                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M9.32757 1H10.6164V2.83245H9.32757V1Z" fill="yellow"/>
<path d="M5.23286 2.44199L6.34901 1.79757L7.26523 3.38447L6.14909 4.02889L5.23286 2.44199Z" fill="yellow"/>
<path d="M2.40786 5.73816L3.05229 4.62201L4.63918 5.53823L3.99476 6.65438L2.40786 5.73816Z" fill="yellow"/>
<path d="M1.6095 8.71631H3.44199V10.0052H1.6095V8.71631Z" fill="yellow"/>
<path d="M2.40708 12.9833L3.99398 12.0671L4.63841 13.1832L3.05151 14.0995L2.40708 12.9833Z" fill="yellow"/>
<path d="M15.3034 5.53968L16.8903 4.62346L17.5348 5.7396L15.9479 6.65582L15.3034 5.53968Z" fill="yellow"/>
<path d="M12.6783 3.3857L13.5945 1.79876L14.7107 2.44319L13.7944 4.03012L12.6783 3.3857Z" fill="yellow"/>
<path d="M19.6336 12.3636C19.4475 11.292 18.9178 10.3097 18.1124 9.55797C17.3044 8.80395 16.2832 8.34379 15.1948 8.23445C14.9607 7.14554 14.3899 6.15296 13.5532 5.39653C12.5698 4.50761 11.2977 4.01802 9.97109 4.01802C7.02465 4.01802 4.62751 6.41515 4.62751 9.36164C4.62751 10.7988 5.19495 12.1494 6.20172 13.1487C6.08611 13.355 5.98583 13.5721 5.90356 13.7991C5.30291 13.9078 4.75081 14.1984 4.31488 14.6419C3.76433 15.202 3.4611 15.9431 3.4611 16.7286C3.4611 18.3708 4.79708 19.7067 6.43921 19.7067H9.54843L8.35285 22.4915L9.53718 23L10.951 19.7067H12.7508L11.5552 22.4915L12.7395 23L14.1534 19.7067H15.9531L14.7575 22.4915L15.9419 23L17.3557 19.7067H18.6534C20.7141 19.7067 22.3905 18.0303 22.3905 15.9696C22.3905 14.2682 21.2361 12.7983 19.6336 12.3636ZM5.91636 9.36164C5.91636 7.12582 7.73532 5.30687 9.97109 5.30687C11.8235 5.30687 13.4015 6.54425 13.878 8.27458C13.1512 8.39246 12.46 8.66823 11.8464 9.09046C11.1641 9.55986 10.6141 10.1824 10.2358 10.9087C10.1706 10.9058 10.1053 10.9043 10.0402 10.9043C8.87363 10.9043 7.79667 11.3591 6.99952 12.1198C6.30534 11.3743 5.91636 10.3976 5.91636 9.36164ZM18.6535 18.4179H6.43921C5.50776 18.4179 4.74995 17.6601 4.74995 16.7286C4.74995 15.815 5.49315 15.0576 6.40669 15.0404L6.9007 15.0311L7.01992 14.5516C7.36521 13.163 8.60719 12.1932 10.0402 12.1932C10.2032 12.1932 10.3675 12.206 10.5285 12.2313L11.0348 12.3109L11.2263 11.8355C11.7984 10.4153 13.1573 9.49765 14.6883 9.49765C15.6365 9.49765 16.5402 9.85372 17.233 10.5002C17.9224 11.1436 18.3401 12.0138 18.4089 12.9506L18.4474 13.4754L18.9693 13.5425C20.1849 13.6989 21.1016 14.7423 21.1016 15.9697C21.1017 17.3196 20.0034 18.4179 18.6535 18.4179Z" fill="yellow"/>
</svg>
 
                        <div>Weather <i class="ic-down masthead-dropdown-arrow d-none d-lg-inline"></i></div>
                    </div>
                </a>
    <ul class="dropdown-menu" data-nav-section="weather_menu">
        <li><a class="dropdown-item" href="/weather/wind-forecast/perth">
                <div class="submenu-item-row">
                    Recent
                    <i class="ic-right"></i>
                </div>
            </a>

            <ul class="dropdown-menu dropdown-submenu" id="recent-locations">

            <li>
                <a class="dropdown-item" href="/locations/search">
                    <div class="flex gap-2 align-items-center">
                        <div><i class="ic-search"></i></div>
                        Search for a location
                    </div></a>
            </li>

            </ul>
        </li>
            <li><a class="dropdown-item" href="/weather/wind-forecast/perth">
                    <div class="submenu-item-row">Western Australia <i class="ic-right"></i></div>
                </a>
                    <ul class="dropdown-menu dropdown-submenu">
                            <li><a class="dropdown-item" href="/weather/wind-forecast/perth"><div class="flex gap-2 align-items-center">Metro</div></a></li>
                            <li><a class="dropdown-item" href="/weather/wind-forecast/wa-south-west"><div class="flex gap-2 align-items-center">South West</div></a></li>
                            <li><a class="dropdown-item" href="/weather/wind-forecast/wa-central-west"><div class="flex gap-2 align-items-center">Central West</div></a></li>
                            <li><a class="dropdown-item" href="/weather/wind-forecast/wa-north-west"><div class="flex gap-2 align-items-center">North West</div></a></li>
                            <li><hr class="dropdown-divider"></li>
                            <li><a class="dropdown-item" href="/weather/surf-camera/perth"><div class="flex gap-2 align-items-center">
                                <div><i class="ic-views"></i></div>
                                Surf Cameras
                            </div></a></li>
                            <li><a class="dropdown-item" href="/weather/surf-graph/perth"><div class="flex gap-2 align-items-center">
                                <div><i class="bi bi-graph-up" aria-hidden="true"></i></div>
                                Swell Graphs
                            </div></a></li>
                    </ul>
            </li>
            <li><a class="dropdown-item" href="/weather/wind-forecast/sydney">
                    <div class="submenu-item-row">New South Wales <i class="ic-right"></i></div>
                </a>
                    <ul class="dropdown-menu dropdown-submenu">
                            <li><a class="dropdown-item" href="/weather/wind-forecast/sydney"><div class="flex gap-2 align-items-center">Metro</div></a></li>
                            <li><a class="dropdown-item" href="/weather/wind-forecast/nsw-north"><div class="flex gap-2 align-items-center">North</div></a></li>
                            <li><a class="dropdown-item" href="/weather/wind-forecast/nsw-mid-north"><div class="flex gap-2 align-items-center">Mid North</div></a></li>
                            <li><a class="dropdown-item" href="/weather/wind-forecast/nsw-illawarra"><div class="flex gap-2 align-items-center">Illawarra</div></a></li>
                            <li><a class="dropdown-item" href="/weather/wind-forecast/nsw-south-coast"><div class="flex gap-2 align-items-center">South Coast</div></a></li>
                    </ul>
            </li>
            <li><a class="dropdown-item" href="/weather/wind-forecast/melbourne">
                    <div class="submenu-item-row">Victoria <i class="ic-right"></i></div>
                </a>
                    <ul class="dropdown-menu dropdown-submenu">
                            <li><a class="dropdown-item" href="/weather/wind-forecast/melbourne"><div class="flex gap-2 align-items-center">Metro</div></a></li>
                            <li><a class="dropdown-item" href="/weather/wind-forecast/vic-west-coast"><div class="flex gap-2 align-items-center">West Coast</div></a></li>
                            <li><a class="dropdown-item" href="/weather/wind-forecast/vic-east-coast"><div class="flex gap-2 align-items-center">East Coast</div></a></li>
                    </ul>
            </li>
            <li><a class="dropdown-item" href="/weather/wind-forecast/adelaide">
                    <div class="flex gap-2 align-items-center">South Australia</div>
                </a>
            </li>
            <li><a class="dropdown-item" href="/weather/wind-forecast/brisbane">
                    <div class="submenu-item-row">Queensland <i class="ic-right"></i></div>
                </a>
                    <ul class="dropdown-menu dropdown-submenu">
                            <li><a class="dropdown-item" href="/weather/wind-forecast/brisbane"><div class="flex gap-2 align-items-center">Brisbane</div></a></li>
                            <li><a class="dropdown-item" href="/weather/wind-forecast/qld-far-north"><div class="flex gap-2 align-items-center">Far North</div></a></li>
                            <li><a class="dropdown-item" href="/weather/wind-forecast/qld-central-coast"><div class="flex gap-2 align-items-center">Central Coast</div></a></li>
                            <li><a class="dropdown-item" href="/weather/wind-forecast/qld-sunshine-coast"><div class="flex gap-2 align-items-center">Sunshine Coast</div></a></li>
                            <li><a class="dropdown-item" href="/weather/wind-forecast/qld-gold-coast"><div class="flex gap-2 align-items-center">Gold Coast</div></a></li>
                    </ul>
            </li>
            <li><a class="dropdown-item" href="/weather/wind-forecast/darwin">
                    <div class="flex gap-2 align-items-center">Northern Territory</div>
                </a>
            </li>
            <li><a class="dropdown-item" href="/weather/wind-forecast/hobart">
                    <div class="submenu-item-row">Tasmania <i class="ic-right"></i></div>
                </a>
                    <ul class="dropdown-menu dropdown-submenu">
                            <li><a class="dropdown-item" href="/weather/wind-forecast/hobart"><div class="flex gap-2 align-items-center">Hobart</div></a></li>
                            <li><a class="dropdown-item" href="/weather/wind-forecast/tas-west-coast"><div class="flex gap-2 align-items-center">West Coast</div></a></li>
                            <li><a class="dropdown-item" href="/weather/wind-forecast/tas-north-coast"><div class="flex gap-2 align-items-center">North Coast</div></a></li>
                            <li><a class="dropdown-item" href="/weather/wind-forecast/tas-east-coast"><div class="flex gap-2 align-items-center">East Coast</div></a></li>
                    </ul>
            </li>
        <li><hr class="dropdown-divider"></li>
        <li><a class="dropdown-item" href="/weather/my-weather"><div class="flex gap-2 align-items-center">
            <div><i class="ic-favourite"></i></div>
            My Favourites
        </div></a></li>
        <li><a class="dropdown-item" href="javascript:sb.GlobalSettings.toggleArrowColors()"><div class="flex gap-2 align-items-center">
            <div><i class="ic-rotate"></i></div>
            Reverse Arrows
        </div></a></li>
    </ul>
                </div>  
                <a href="/classifieds" class="medium fw-bold text-body text-nowrap">
                    <div class="column gap-1 align-items-center masthead-icon">
                        <svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M23.35 19.0022C22.7152 16.9812 21.1804 14.4582 19.0589 11.8824C20.3382 9.96226 21.2384 8.07761 21.8385 6.59492C22.9139 3.93825 23.2805 2.00382 23.2956 1.92279L23.4673 1L22.5445 1.1717C22.4634 1.18679 20.529 1.55341 17.8724 2.62873C15.7817 3.47499 14.0325 4.44274 12.5939 5.40246C11.5464 4.51312 10.438 3.64966 9.34574 2.93C6.11532 0.8016 3.76203 0.437816 2.35122 1.84867C0.940412 3.25948 1.3042 5.61277 3.43247 8.84318C4.1072 9.86734 4.90837 10.9057 5.73872 11.8947C3.81483 14.2616 2.36111 16.5846 1.64347 18.494L1.49744 18.8826L5.58473 22.9699L5.97328 22.8238C7.88574 22.1049 10.2132 20.6476 12.5839 18.7191C15.0904 20.7563 17.5358 22.229 19.5047 22.8474L19.9904 23L21.3021 20.7995L23.5026 19.4878L23.35 19.0022ZM20.6318 6.14241C20.0912 7.47386 19.2971 9.14493 18.1888 10.8608C17.6296 10.225 17.0374 9.58971 16.4167 8.96149L21.4224 3.95584C21.2199 4.59312 20.9597 5.33501 20.6318 6.14241ZM18.3249 3.83542C19.1323 3.50754 19.8742 3.2474 20.5114 3.04492L15.5013 8.055C14.9248 7.49466 14.2833 6.89113 13.6018 6.28152C15.3193 5.1716 16.9922 4.37654 18.3249 3.83542ZM3.00136 18.5646C3.69776 16.8971 4.95686 14.9183 6.59286 12.8844C7.26707 13.6462 7.93866 14.362 8.55755 14.9989L3.99659 19.5598L3.00136 18.5646ZM5.90269 21.4659L4.90751 20.4708L9.46404 15.9142C10.1639 16.6056 10.8725 17.2617 11.5807 17.8762C9.54753 19.5113 7.56955 20.7698 5.90269 21.4659ZM20.3624 19.8599L19.4124 21.4536C16.8142 20.4829 13.4073 18.0369 10.1758 14.8054C8.47432 13.1039 6.1099 10.5654 4.50826 8.1344C3.30866 6.31359 2.11869 3.90309 3.26214 2.75963C3.58883 2.43295 4.01869 2.2968 4.5089 2.2968C5.73456 2.2968 7.33633 3.14891 8.63691 4.00579C11.0679 5.60744 13.6065 7.97181 15.3079 9.67332C18.5394 12.9048 20.9854 16.3117 21.9561 18.9099L20.3624 19.8599Z" fill="white"/>
<path d="M16.2867 16.6983L17.1975 15.7874L19.452 18.0419L18.5411 18.9527L16.2867 16.6983Z" fill="white"/>
</svg>

                        <div>Buy &amp; Sell</div>
                    </div >
                </a>

                    <a href="/Media" class="medium fw-bold text-body text-nowrap d-none d-lg-block">
                        <div class="column gap-1 align-items-center masthead-icon">
                            <svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M17.088 10.8025C17.088 11.7931 17.8796 12.5989 18.8527 12.5989C19.8257 12.5989 20.6174 11.7931 20.6174 10.8025C20.6174 9.81196 19.8257 9.00609 18.8527 9.00609C17.8796 9.00609 17.088 9.81196 17.088 10.8025ZM19.4409 10.8025C19.4409 11.1327 19.177 11.4013 18.8527 11.4013C18.5283 11.4013 18.2645 11.1327 18.2645 10.8025C18.2645 10.4723 18.5283 10.2037 18.8527 10.2037C19.177 10.2037 19.4409 10.4723 19.4409 10.8025Z" fill="white"/>
<path d="M19.4409 6.61088V3.01807H2.97034V17.3893H6.49975V20.9821H22.9703V6.61088H19.4409ZM4.14681 16.1917V4.21567H18.2645V6.61088H6.49975V16.1917H4.14681ZM7.67622 17.4497L11.0907 13.105L14.3715 19.7845H7.67622V17.4497ZM14.3177 16.9971L16.3248 14.8518L18.5274 19.7845H15.6868L14.3177 16.9971ZM21.7939 19.7845H19.8197L16.6747 12.7412L13.7584 15.8584L11.3206 10.8952L7.67622 15.5326V7.80849H21.7939V19.7845Z" fill="white"/>
</svg>

                            <div class="d-none d-lg-inline">Gallery</div>
                            <div class="d-lg-none small bold">Gallery</div>
                        </div >
                    </a>

                <div class="dropdown">
                    <a href="/Forums" class="medium fw-bold text-body dropdown-auto masthead-direct-nav" data-bs-toggle="dropdown" data-bs-offset="-22, 2" aria-expanded="false" id="forumsMenu">
                        <div class="column gap-1 align-items-center masthead-icon">
                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M4.86719 7.44531H6.15625V8.73438H4.86719V7.44531Z" fill="white"/>
<path d="M7.44531 7.44531H8.73438V8.73438H7.44531V7.44531Z" fill="white"/>
<path d="M10.0234 7.44531H11.3125V8.73438H10.0234V7.44531Z" fill="white"/>
<path d="M23 15.9102C23 12.0008 19.8195 8.82031 15.9102 8.82031C15.6517 8.82031 15.3935 8.83471 15.1374 8.86251C15.1651 8.60865 15.1797 8.35092 15.1797 8.08984C15.1797 4.1805 11.9992 1 8.08984 1C4.1805 1 1 4.1805 1 8.08984C1 9.69305 1.55597 11.2464 2.5739 12.5103L1.24991 15.1797H8.08984C8.35092 15.1797 8.60865 15.1651 8.86251 15.1374C8.83471 15.3935 8.82031 15.6516 8.82031 15.9102C8.82031 19.8195 12.0008 23 15.9102 23H22.7501L21.4261 20.3307C22.444 19.0667 23 17.5134 23 15.9102ZM3.32822 13.8906L4.11386 12.3067L3.81707 11.9809C2.83171 10.8994 2.28906 9.51752 2.28906 8.08984C2.28906 4.89129 4.89129 2.28906 8.08984 2.28906C11.2884 2.28906 13.8906 4.89129 13.8906 8.08984C13.8906 11.2884 11.2884 13.8906 8.08984 13.8906H3.32822ZM15.9102 21.7109C12.7116 21.7109 10.1094 19.1087 10.1094 15.9102C10.1094 15.556 10.1419 15.203 10.2052 14.8574C12.4162 14.1648 14.1648 12.4163 14.8573 10.2052C15.203 10.1419 15.5559 10.1094 15.9101 10.1094C19.1087 10.1094 21.7109 12.7116 21.7109 15.9102C21.7109 17.3378 21.1682 18.7197 20.1828 19.8012L19.8861 20.127L20.6718 21.7109H15.9102Z" fill="white"/>
<path d="M12.6875 15.2656H13.9766V16.5547H12.6875V15.2656Z" fill="white"/>
<path d="M15.2656 15.2656H16.5547V16.5547H15.2656V15.2656Z" fill="white"/>
<path d="M17.8438 15.2656H19.1328V16.5547H17.8438V15.2656Z" fill="white"/>
</svg>

                            <div>Forums <i class="ic-down masthead-dropdown-arrow d-none d-lg-inline"></i></div>
                        </div>
                    </a>
        <ul class="dropdown-menu" data-nav-section="forums_menu">
                <li><a class="dropdown-item" href="/forums"><div class="flex gap-2 align-items-center">All</div></a></li>
                <li><a class="dropdown-item" href="/forums/Windsurfing"><div class="submenu-item-row">Windsurfing <i class="ic-right d-none d-md-inline"></i></div></a>
                    <ul class="dropdown-menu dropdown-submenu">
                            <li><a class="dropdown-item" href="/forums/Windsurfing/General"><div class="flex gap-2 align-items-center">General</div></a></li>
                            <li><a class="dropdown-item" href="/forums/Windsurfing/Gps"><div class="flex gap-2 align-items-center">Gps &amp; Speed Sailing</div></a></li>
                            <li><a class="dropdown-item" href="/forums/Windsurfing/Wave-sailing"><div class="flex gap-2 align-items-center">Wave Sailing</div></a></li>
                            <li><a class="dropdown-item" href="/forums/Windsurfing/Foiling"><div class="flex gap-2 align-items-center">Foiling</div></a></li>
                            <li><a class="dropdown-item" href="/forums/Windsurfing/Review"><div class="flex gap-2 align-items-center">Gear Reviews</div></a></li>
                            <li><a class="dropdown-item" href="/forums/Windsurfing/Lost-Found"><div class="flex gap-2 align-items-center">Lost &amp; Found</div></a></li>
                            <li><a class="dropdown-item" href="/forums/Windsurfing/Western-Australia"><div class="flex gap-2 align-items-center">Windsurfing WA</div></a></li>
                            <li><a class="dropdown-item" href="/forums/Windsurfing/New-South-Wales"><div class="flex gap-2 align-items-center">Windsurfing NSW</div></a></li>
                            <li><a class="dropdown-item" href="/forums/Windsurfing/Queensland"><div class="flex gap-2 align-items-center">Windsurfing QLD</div></a></li>
                            <li><a class="dropdown-item" href="/forums/Windsurfing/Victoria"><div class="flex gap-2 align-items-center">Windsurfing Victoria</div></a></li>
                            <li><a class="dropdown-item" href="/forums/Windsurfing/South-Australia"><div class="flex gap-2 align-items-center">Windsurfing SA</div></a></li>
                            <li><a class="dropdown-item" href="/forums/Windsurfing/Tasmania"><div class="flex gap-2 align-items-center">Windsurfing Tasmania</div></a></li>
                    </ul>
                </li>
                <li><a class="dropdown-item" href="/forums/Kitesurfing"><div class="submenu-item-row">Kitesurfing <i class="ic-right d-none d-md-inline"></i></div></a>
                    <ul class="dropdown-menu dropdown-submenu">
                            <li><a class="dropdown-item" href="/forums/Kitesurfing/General"><div class="flex gap-2 align-items-center">General</div></a></li>
                            <li><a class="dropdown-item" href="/forums/Kitesurfing/Review"><div class="flex gap-2 align-items-center">Gear Reviews</div></a></li>
                            <li><a class="dropdown-item" href="/forums/Kitesurfing/Foiling"><div class="flex gap-2 align-items-center">Foiling</div></a></li>
                            <li><a class="dropdown-item" href="/forums/Kitesurfing/Newbies-Tips-Tricks"><div class="flex gap-2 align-items-center">Newbies / Tips &amp; Tricks</div></a></li>
                            <li><a class="dropdown-item" href="/forums/Kitesurfing/Lost-Found"><div class="flex gap-2 align-items-center">Lost &amp; Found</div></a></li>
                            <li><a class="dropdown-item" href="/forums/Kitesurfing/Western-Australia"><div class="flex gap-2 align-items-center">Western Australia</div></a></li>
                            <li><a class="dropdown-item" href="/forums/Kitesurfing/New-South-Wales"><div class="flex gap-2 align-items-center">New South Wales</div></a></li>
                            <li><a class="dropdown-item" href="/forums/Kitesurfing/South-East-Queensland"><div class="flex gap-2 align-items-center">Queensland</div></a></li>
                            <li><a class="dropdown-item" href="/forums/Kitesurfing/Victoria"><div class="flex gap-2 align-items-center">Victoria</div></a></li>
                            <li><a class="dropdown-item" href="/forums/Kitesurfing/South-Australia"><div class="flex gap-2 align-items-center">South Australia</div></a></li>
                            <li><a class="dropdown-item" href="/forums/Kitesurfing/Tasmania"><div class="flex gap-2 align-items-center">Tasmania</div></a></li>
                    </ul>
                </li>
                <li><a class="dropdown-item" href="/forums/Surfing/Shortboards"><div class="flex gap-2 align-items-center">Surfing</div></a></li>
                <li><a class="dropdown-item" href="/forums/Surfing/Longboarding"><div class="flex gap-2 align-items-center">Longboarding</div></a></li>
                <li><a class="dropdown-item" href="/forums/Stand-Up-Paddle"><div class="submenu-item-row">Stand Up Paddle <i class="ic-right d-none d-md-inline"></i></div></a>
                    <ul class="dropdown-menu dropdown-submenu">
                            <li><a class="dropdown-item" href="/forums/Stand-Up-Paddle/SUP"><div class="flex gap-2 align-items-center">General</div></a></li>
                            <li><a class="dropdown-item" href="/forums/Stand-Up-Paddle/Foiling"><div class="flex gap-2 align-items-center">Foiling</div></a></li>
                            <li><a class="dropdown-item" href="/forums/Stand-Up-Paddle/Review"><div class="flex gap-2 align-items-center">Board Talk &amp; Reviews</div></a></li>
                            <li><a class="dropdown-item" href="/forums/Wing-Foiling/Wind-Wings"><div class="flex gap-2 align-items-center">Wing Foiling</div></a></li>
                    </ul>
                </li>
                <li><a class="dropdown-item" href="/forums/Wing-Foiling/Wind-Wings"><div class="flex gap-2 align-items-center">Wing Foiling</div></a></li>
                <li><a class="dropdown-item" href="/forums/Sailing/General"><div class="flex gap-2 align-items-center">Sailing</div></a></li>
                <li><hr class="dropdown-divider"></li>
                <li><a class="dropdown-item" href="/forums/ActiveTopics"><div class="flex gap-2 align-items-center">Active Topics</div></a></li>
                <li><a class="dropdown-item" href="/forums/SubscribedTopics"><div class="flex gap-2 align-items-center">Subscribed Topics</div></a></li>
                <li><a class="dropdown-item" href="/Help/Forums/The-Seabreeze-Forum-Rules"><div class="flex gap-2 align-items-center">Rules &amp; Guidelines</div></a></li>
    </ul>
                </div>
            </div>
        </div>

        <!-- Profile (separate col at lg+, merges into icon row at < lg) -->
        <div class="col-auto order-4 masthead-profile-col">
            <div class="flex align-items-center h-100">
                    <!-- Profile (logged out) -->
                    <div class="dropdown">
                        <a class="medium fw-bold text-body" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                            <div class="column gap-1 align-items-center masthead-icon">
                                <i class="ic-person masthead-person-icon"></i>
                                <div class="d-none d-lg-inline">Settings</div>
                                <div class="d-lg-none small bold">Settings</div>
                            </div>
                        </a>
                        <!-- Logged Out Menu -->
<ul class="dropdown-menu dropdown-menu-end masthead-profile-menu" style="min-width: 260px;" data-nav-section="profile_menu">
    <li>
        <a class="dropdown-item flex gap-2 align-items-center" href="/login?returnUrl=%2Fweather%2Ftides%2Fsearch%2FTAS"><i class="ic-sign-in"></i>Login</a>
    </li>
    <li>
        <a class="dropdown-item flex gap-2 align-items-center" href="/Forgot"><i class="ic-help"></i>Forgot my login</a>
    </li>
    <li><hr class="dropdown-divider"></li>
    <li>
        <a class="dropdown-item flex gap-2 align-items-center" href="/register?returnUrl=%2Fweather%2Ftides%2Fsearch%2FTAS"><i class="ic-sign-up"></i>Join! (Its Free)</a>
    </li>
    <li><hr class="dropdown-divider"></li>
<li class="px-3 py-0 member-menu-prefs">
    <div class="btn-group w-100 member-theme-btn-group" role="group" aria-label="Appearance" >
        <button type="button" class="btn member-theme-btn js-member-theme-btn active"
                data-member-theme-btn="Light" title="Light"
                onclick="event.preventDefault(); event.stopPropagation(); sb.GlobalSettings.setMemberThemeMode('Light');">
            <i class="ic-sun"></i>
        </button>
        <button type="button" class="btn member-theme-btn js-member-theme-btn "
                data-member-theme-btn="Dark" title="Dark"
                onclick="event.preventDefault(); event.stopPropagation(); sb.GlobalSettings.setMemberThemeMode('Dark');">
            <i class="ic-moon"></i>
        </button>
        <button type="button" class="btn member-theme-btn js-member-theme-btn "
                data-member-theme-btn="Auto" title="System"
                onclick="event.preventDefault(); event.stopPropagation(); sb.GlobalSettings.setMemberThemeMode('Auto');">
            <i class="ic-website"></i>
        </button>
    </div>
</li>
<li>
    <button type="button" class="dropdown-item d-flex align-items-center gap-2 js-member-arrow-toggle mt-2"
            onclick="event.preventDefault(); event.stopPropagation(); sb.GlobalSettings.toggleArrowColorsFromMemberMenu();">
        <div class="position-relative flex-shrink-0 member-menu-arrow-stack" aria-hidden="true">
                <i class="ic-arrow-red position-absolute" style="bottom: 0; left: 0; transform: rotate(-75deg);"></i>
                <i class="ic-arrow-yellow position-absolute" style="bottom: 25%; left: 25%; transform: rotate(-75deg);"></i>
                <i class="ic-arrow position-absolute" style="bottom: 50%; left: 50%; transform: rotate(-75deg);"></i>
        </div>
        <span class="js-member-arrow-label">Reverse Arrow Colours</span>
    </button>
</li>
<li>
    <a class="dropdown-item" href="#" onclick="sb.GlobalSettings.openSettings(); return false;"><div class="flex gap-2 align-items-center"><i class="ic-settings"></i>Settings</div></a>
</li>
</ul>


                    </div>
            </div>
        </div>
    </div> 
    
    <!-- Mobile Drawer Menu (< lg only) -->
    <div class="d-lg-none" x-data="{ drawerOpen: false, weatherOpen: true, memberOpen: true, modOpen: false, adminOpen: false, adminToolsOpen: false }"
         x-effect="document.body.style.overflow = drawerOpen ? 'hidden' : '';">
        
        <!-- Backdrop -->
        <div class="mobile-drawer-backdrop"
             x-show="drawerOpen"
             x-transition:enter="transition-opacity"
             x-transition:enter-start="opacity-0"
             x-transition:enter-end="opacity-100"
             x-transition:leave="transition-opacity"
             x-transition:leave-start="opacity-100"
             x-transition:leave-end="opacity-0"
             x-on:click="drawerOpen = false"
             x-cloak>
        </div>
        
        <!-- Drawer Panel -->
        <div class="mobile-drawer-panel bg-surface" :class="drawerOpen ? 'open' : ''" data-nav-section="mobile_drawer">
            <!-- Header -->
            <div class="bg-primary text-white p-3 d-flex align-items-center justify-content-between flex-shrink-0">
                <a href="/" class="d-flex align-items-center gap-2 text-white text-decoration-none" x-on:click="drawerOpen = false">
                    <img src="/Assets/Images/static/a/logo-seabreeze.com.au.png" alt="Seabreeze" style="height:24px;">
                    <span class="fw-bold fs-5">Seabreeze</span>
                </a>
                <div class="d-flex align-items-center gap-2">
                    <!-- Wind arrow colours (three arrows overlaid, matches current rev cookie; tap to toggle) -->
                    <button class="btn p-0 d-flex align-items-center justify-content-center" type="button"
                            x-on:click="drawerOpen = false; sb.GlobalSettings.toggleArrowColors()"
                            title="Reverse arrow colours"
                            aria-label="Reverse arrow colours">
                        <div class="position-relative drawer-arrow-stack">
                                <i class="ic-arrow-red position-absolute" style="bottom: 0; left: 0; transform: rotate(-75deg);"></i>
                                <i class="ic-arrow-yellow position-absolute" style="bottom: 25%; left: 25%; transform: rotate(-75deg);"></i>
                                <i class="ic-arrow position-absolute" style="bottom: 50%; left: 50%; transform: rotate(-75deg);"></i>
                        </div>
                    </button>
                    <!-- Settings cog -->
                    <button class="btn p-0" x-on:click="drawerOpen = false; setTimeout(() => sb.GlobalSettings.openSettings(), 200)" aria-label="Settings">
                        <i class="ic-settings" style="filter: brightness(0) invert(1); font-size: 25px;"></i>
                    </button>
                    <!-- Profile/Avatar -->
                        <a href="/Login" class="text-white" x-on:click="drawerOpen = false">
                            <i class="ic-person" style="filter: brightness(0) invert(1); font-size: 20px;"></i>
                        </a>
                    <!-- Close button -->
                    <button class="btn p-0" x-on:click="drawerOpen = false" aria-label="Close">
                        <i class="ic-close" style="filter: brightness(0) invert(1); font-size: 20px;"></i>
                    </button>
                </div>
            </div>
            
            <!-- Content: header stays put; only this pane scrolls. Invisible 50vh
                 spacer above Weather so the first row can be pulled into thumb reach. -->
            <div class="mobile-drawer-scroll">
            <div class="mobile-drawer-thumb-space" aria-hidden="true"></div>
            <div class="py-2 mobile-drawer-content">
                <!-- Weather Section (expandable) -->
                <div class="drawer-section-header px-3 py-2 d-flex align-items-center justify-content-between" 
                     x-on:click="weatherOpen = !weatherOpen">
                    <span class="fw-bold"><i class="ic-weather me-2"></i>Weather</span>
                    <i class="ic-down" :class="weatherOpen ? 'rotate-180' : ''" style="transition: transform 150ms;"></i>
                </div>
                <div x-show="weatherOpen">
                            <a href="/weather/wind-forecast/sydney" class="drawer-nav-item"><i class="ic-wind"></i>Wind</a>
                            <a href="/weather/forecast/today/sydney" class="drawer-nav-item"><i class="ic-weather"></i>Weather</a>
                            <a href="/weather/tides/today/sydney" class="drawer-nav-item"><i class="ic-tides"></i>Tides</a>
                            <a href="/weather/rain-radar/sydney" class="drawer-nav-item"><i class="ic-rain"></i>Rain Radar</a>
                            <a href="/weather/moon-phases/sydney" class="drawer-nav-item"><i class="ic-moon"></i>Moon</a>
                            <a href="/weather/sun/sydney" class="drawer-nav-item"><i class="ic-sun"></i>Sun</a>
                            <a href="/weather/stations/nearby/sydney" class="drawer-nav-item"><i class="ic-temperature"></i>Stations</a>
                            <a href="/weather/synoptic/sydney" class="drawer-nav-item"><i class="bi bi-tropical-storm"></i>Synoptic</a>
                            <a href="/weather/colour-satellite/sydney" class="drawer-nav-item"><i class="ic-target"></i>Satellites</a>
                            <a href="/weather/marine-forecast/sydney" class="drawer-nav-item"><i class="ic-boating"></i>Marine</a>
                            <a href="/weather/warnings?referringLocation=sydney" class="drawer-nav-item"><i class="ic-warning"></i>Warnings</a>
                            <a href="/weather/my-weather" class="drawer-nav-item"><i class="ic-favourite"></i>Favourites</a>
                    <a href="#" class="drawer-nav-item" x-on:click.prevent="drawerOpen = false; setTimeout(() => sb.GlobalSettings.openSettings(), 200)"><i class="ic-settings"></i>Settings</a>
                </div>
                
                <!-- Buy & Sell (direct link) -->
                <a href="/classifieds" class="drawer-section-header px-3 py-2 d-flex align-items-center text-body text-decoration-none">
                    <span class="fw-bold"><i class="ic-price me-2"></i>Buy &amp; Sell</span>
                </a>
                
                <!-- Forums (direct link) -->
                <a href="/Forums" class="drawer-section-header px-3 py-2 d-flex align-items-center text-body text-decoration-none">
                    <span class="fw-bold"><i class="ic-forums me-2"></i>Forums</span>
                </a>
                
                <!-- Gallery (direct link) -->
                <a href="/Media" class="drawer-section-header px-3 py-2 d-flex align-items-center text-body text-decoration-none">
                    <span class="fw-bold"><i class="ic-add-photo me-2"></i>Gallery</span>
                </a>
                
                <!-- Member Section (expandable, logged-in only) -->
                    <!-- Login/Register for logged out users -->
                    <a href="/Login" class="drawer-section-header px-3 py-2 d-flex align-items-center text-body text-decoration-none">
                        <span class="fw-bold"><i class="ic-sign-in me-2"></i>Login</span>
                    </a>
                    <a href="/Member/Register" class="drawer-section-header px-3 py-2 d-flex align-items-center text-body text-decoration-none">
                        <span class="fw-bold"><i class="ic-sign-up me-2"></i>Join (Free)</span>
                    </a>
                
                <!-- Help (direct link) -->
                <a href="/Help/Weather" class="drawer-section-header px-3 py-2 d-flex align-items-center text-body text-decoration-none">
                    <span class="fw-bold"><i class="ic-help me-2"></i>Help</span>
                </a>
                


            </div>
            </div>
        </div>
    </div>
    <script>
        // Hide the 50vh spacer above Weather on open (scroll it off-screen). The user
        // can then pull the list down so the first row sits in the thumb zone.
        function sbScrollDrawerPastThumbSpace() {
            var scroll = document.querySelector('.mobile-drawer-scroll');
            var space = document.querySelector('.mobile-drawer-thumb-space');
            if (!scroll || !space) return;
            var y = space.offsetHeight || 0;
            if (!y) return;
            var apply = function () { scroll.scrollTop = y; };
            apply();
            requestAnimationFrame(function () {
                apply();
                requestAnimationFrame(apply);
            });
            setTimeout(apply, 50);
            setTimeout(apply, 200);
        }

        var mobileDrawerPanel = document.querySelector('.mobile-drawer-panel');
        if (mobileDrawerPanel) {
            mobileDrawerPanel.addEventListener('transitionend', function (e) {
                if (e.propertyName !== 'transform') return;
                if (mobileDrawerPanel.classList.contains('open')) sbScrollDrawerPastThumbSpace();
            });
        }

        var mobileDrawerToggle = document.getElementById('mobile-drawer-toggle');
        if (mobileDrawerToggle) mobileDrawerToggle.addEventListener('click', function() {
            const drawer = document.querySelector('[x-data*="drawerOpen"]');
            if (drawer && drawer._x_dataStack) {
                drawer._x_dataStack[0].drawerOpen = !drawer._x_dataStack[0].drawerOpen;
                if (drawer._x_dataStack[0].drawerOpen) sbScrollDrawerPastThumbSpace();
            }
        });

        // Edge swipe to open/close the mobile drawer (side follows Handedness).
        (function () {
            const EDGE_PX = 28;
            const OPEN_DX = 56;
            const CLOSE_DX = 56;
            const MAX_VERT = 48;
            const MQ = '(max-width: 991.98px)';
            let startX = 0;
            let startY = 0;
            let tracking = false;
            let fromEdge = false;

            const isLeftHanded = () =>
                document.documentElement.getAttribute('data-sb-handedness') === 'left';

            const getDrawerData = () => {
                const drawer = document.querySelector('[x-data*="drawerOpen"]');
                return drawer && drawer._x_dataStack ? drawer._x_dataStack[0] : null;
            };

            const onStart = (e) => {
                if (!window.matchMedia(MQ).matches) return;
                if (e.touches && e.touches.length !== 1) return;
                const t = e.touches[0];
                const w = window.innerWidth || document.documentElement.clientWidth;
                const leftHanded = isLeftHanded();
                const data = getDrawerData();
                if (!data) return;

                startX = t.clientX;
                startY = t.clientY;
                tracking = true;
                fromEdge = false;

                if (data.drawerOpen) {
                    fromEdge = true;
                    return;
                }

                if (leftHanded) {
                    fromEdge = startX <= EDGE_PX;
                } else {
                    fromEdge = startX >= w - EDGE_PX;
                }
            };

            const onEnd = (e) => {
                if (!tracking || !fromEdge) {
                    tracking = false;
                    fromEdge = false;
                    return;
                }
                tracking = false;
                fromEdge = false;
                const t = (e.changedTouches && e.changedTouches[0]) || null;
                if (!t) return;
                const dx = t.clientX - startX;
                const dy = t.clientY - startY;
                if (Math.abs(dy) > MAX_VERT) return;

                const data = getDrawerData();
                if (!data) return;
                const leftHanded = isLeftHanded();

                if (data.drawerOpen) {
                    // Swipe toward the docked edge to close.
                    if (leftHanded && dx <= -CLOSE_DX) data.drawerOpen = false;
                    else if (!leftHanded && dx >= CLOSE_DX) data.drawerOpen = false;
                } else {
                    // Swipe in from the edge to open.
                    if (leftHanded && dx >= OPEN_DX) data.drawerOpen = true;
                    else if (!leftHanded && dx <= -OPEN_DX) data.drawerOpen = true;
                    if (data.drawerOpen) sbScrollDrawerPastThumbSpace();
                }
            };

            document.addEventListener('touchstart', onStart, { passive: true });
            document.addEventListener('touchend', onEnd, { passive: true });
            document.addEventListener('touchcancel', function () {
                tracking = false;
                fromEdge = false;
            }, { passive: true });
        })();

        (function () {
            const masthead = document.querySelector('.masthead-container');
            if (!masthead) return;

            // Mimic Safari iOS toolbar: hide when the page scrolls up (finger swipe up,
            // scrollY increases); show on swipe down (scrollY decreases) or at scroll origin.
            const MQ = '(max-width: 991.98px)';
            const AT_TOP_PX = 12;
            const MIN_SCROLL_BEFORE_HIDE_PX = 56;
            const MIN_DIRECTION_DELTA_PX = 6;
            const TOGGLE_LOCK_MS = 180;

            let lastScrollY = Math.max(0, window.scrollY || window.pageYOffset || 0);
            let compact = false;
            let toggleLockUntilMs = 0;

            const isXsSm = () => window.matchMedia(MQ).matches;
            const getScrollY = () => Math.max(0, window.scrollY || window.pageYOffset || 0);

            const closeProfileDropdown = () => {
                const profileDropdown = masthead.querySelector('.masthead-profile-col .dropdown-menu.show');
                if (!profileDropdown) return;

                profileDropdown.classList.remove('show');
                const trigger = masthead.querySelector('.masthead-profile-col [data-bs-toggle="dropdown"][aria-expanded="true"]');
                if (trigger) {
                    trigger.setAttribute('aria-expanded', 'false');
                }
            };

            const setCompact = (nextCompact) => {
                if (compact === nextCompact) return;
                compact = nextCompact;
                masthead.classList.toggle('masthead-mobile-compact', compact);
                toggleLockUntilMs = Date.now() + TOGGLE_LOCK_MS;
                if (compact) {
                    closeProfileDropdown();
                }
            };

            const onScroll = () => {
                const currentY = getScrollY();
                const delta = currentY - lastScrollY;
                const pageScrollingUp = delta > MIN_DIRECTION_DELTA_PX;
                const pageScrollingDown = delta < -MIN_DIRECTION_DELTA_PX;

                if (!isXsSm()) {
                    setCompact(false);
                    lastScrollY = currentY;
                    return;
                }

                if (Date.now() < toggleLockUntilMs) {
                    lastScrollY = currentY;
                    return;
                }

                if (currentY <= AT_TOP_PX) {
                    setCompact(false);
                    lastScrollY = currentY;
                    return;
                }

                if (pageScrollingUp && currentY > MIN_SCROLL_BEFORE_HIDE_PX) {
                    setCompact(true);
                }

                if (pageScrollingDown) {
                    setCompact(false);
                }

                lastScrollY = currentY;
            };

            window.addEventListener('scroll', onScroll, { passive: true });
            window.addEventListener('resize', onScroll);
            if (window.visualViewport) {
                window.visualViewport.addEventListener('scroll', onScroll, { passive: true });
                window.visualViewport.addEventListener('resize', onScroll, { passive: true });
            }
            onScroll();
        })();

        // Menu row press fill (matches native MastheadDrawer DrawerTapRipple).
        // Drawer (xs–lg), masthead dropdowns, and weather rail — any screen width.
        (function () {
            const FILL_MS = 300;
            const FADE_MS = 600;
            const ROW_SEL = [
                '.drawer-nav-item',
                '.drawer-section-header',
                '.weather-rail-item',
                '.sb-rail-item',
            ].join(', ');

            document.addEventListener('pointerdown', function (e) {
                if (e.pointerType === 'mouse' && e.button !== 0) return;
                const row = e.target.closest(ROW_SEL);
                if (!row) return;

                const rect = row.getBoundingClientRect();
                const x = e.clientX - rect.left;
                const y = e.clientY - rect.top;
                const maxX = Math.max(x, rect.width - x);
                const maxY = Math.max(y, rect.height - y);
                const diameter = Math.ceil(2 * Math.sqrt(maxX * maxX + maxY * maxY));

                const ripple = document.createElement('span');
                ripple.className = 'drawer-tap-ripple';
                ripple.style.width = diameter + 'px';
                ripple.style.height = diameter + 'px';
                ripple.style.left = x + 'px';
                ripple.style.top = y + 'px';
                row.appendChild(ripple);

                // Reflow so the scale(0) → scale(1) transition runs.
                void ripple.offsetWidth;
                ripple.classList.add('is-expanding');

                const expandedAt = Date.now() + FILL_MS;
                let finished = false;

                const fadeOut = function () {
                    if (finished) return;
                    finished = true;
                    const wait = Math.max(0, expandedAt - Date.now());
                    setTimeout(function () {
                        ripple.classList.add('is-fading');
                        setTimeout(function () { ripple.remove(); }, FADE_MS);
                    }, wait);
                };

                row.addEventListener('pointerup', fadeOut, { once: true });
                row.addEventListener('pointercancel', fadeOut, { once: true });
                // pointerleave covers drag-off without cancel on some browsers
                row.addEventListener('pointerleave', fadeOut, { once: true });
            }, { passive: true });
        })();
    </script>
</div>



            
            
            


        </div>
        <div id="global-settings-modal-container"></div>
        <div class="modal fade" id="strong-wind-arrow-notice-modal" tabindex="-1" aria-labelledby="strong-wind-arrow-notice-title" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header border-0 pb-0">
                <h5 class="modal-title" id="strong-wind-arrow-notice-title">Wind arrows</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body d-flex gap-3 align-items-center pt-0">
                <div class="flex-shrink-0 position-relative" style="width:4.25rem;height:4.25rem;">
                    <div id="strong-wind-modal-viz-red-strong" class="position-absolute top-0 start-0 w-100 h-100 d-none">
                        <i class="ic-arrow icon-4 position-absolute" style="bottom: 0; left: 0; transform: rotate(-75deg); filter: drop-shadow(1px 1px 1px rgba(0,0,0,0.35));"></i>
                        <i class="ic-arrow-yellow icon-4 position-absolute" style="bottom: 22%; left: 22%; transform: rotate(-75deg); filter: drop-shadow(1px 1px 1px rgba(0,0,0,0.35));"></i>
                        <i class="ic-arrow-red icon-4 position-absolute" style="bottom: 44%; left: 44%; transform: rotate(-75deg); filter: drop-shadow(1px 1px 1px rgba(0,0,0,0.35));"></i>
                    </div>
                    <div id="strong-wind-modal-viz-green-strong" class="position-absolute top-0 start-0 w-100 h-100 d-none">
                        <i class="ic-arrow-red icon-4 position-absolute" style="bottom: 0; left: 0; transform: rotate(-75deg); filter: drop-shadow(1px 1px 1px rgba(0,0,0,0.35));"></i>
                        <i class="ic-arrow-yellow icon-4 position-absolute" style="bottom: 22%; left: 22%; transform: rotate(-75deg); filter: drop-shadow(1px 1px 1px rgba(0,0,0,0.35));"></i>
                        <i class="ic-arrow icon-4 position-absolute" style="bottom: 44%; left: 44%; transform: rotate(-75deg); filter: drop-shadow(1px 1px 1px rgba(0,0,0,0.35));"></i>
                    </div>
                </div>
                <p class="mb-0" id="strong-wind-arrow-modal-message"></p>
            </div>
            <div class="modal-footer border-0 pt-0">
                <button type="button" class="btn btn-primary" data-bs-dismiss="modal">OK</button>
            </div>
        </div>
    </div>
</div>

<div class="sb-page-constrain" style='min-height: 768px'>                <noscript>
                    <div class="alert alert-warning d-flex align-items-center my-3" style="max-width: 600px; margin: 0 auto;" role="alert">
                        <i class="ic-info me-2 fs-4"></i>
                        <div>
                            <a href="https://www.google.com/?q=How%20to%20enable%20javascript%20in%20your%20browser">Enable JavaScript</a> to get the best experience.
                        </div>
                    </div>
                </noscript>
                

        <div class="row gx-0">
                <div class="col-auto sb-rail-left">




<!-- Begin WeatherRail — see Web/Docs/Knowledge/MENURAIL.md -->
<style>
    /* Match icon sizes to Masthead (20px to match SVG visual weight) */
    .weather-rail-icons i[class^="ic-"],
    .weather-rail-icons i[class*=" ic-"],
    .weather-rail-icons i.bi,
    .weather-rail-bottom i[class^="ic-"],
    .weather-rail-bottom i[class*=" ic-"],
    .weather-rail-bottom i.bi {
        font-size: 20px;
        width: 20px;
        height: 20px;
        display: inline-block;
    }

    .weather-rail-horz .weather-rail-item {
        flex-direction: row !important;
        gap: 0.5rem !important;
        justify-content: flex-start !important;
        align-items: center !important;
    }
    .weather-rail-horz .weather-rail-item .weather-rail-label {
        text-align: left !important;
    }

    #weather-rail-desktop .weather-rail-icons,
    #weather-rail-desktop .weather-rail-bottom {
        width: 100%;
        align-items: stretch !important;
        gap: 0 !important;
    }
</style>

<div class="d-print-none">
    <div class="sb-rail-fixed weather-rail-fixed d-none d-lg-flex flex-lg-column bg-surface weather-rail-horz"
         id="weather-rail-desktop"
         data-rail="weather_rail"
         data-rail-width="180px"
         data-rail-gutter="0px"
         style="--sb-rail-z: 450">
        <div class="py-2" data-rail-scroll>
            <div class="d-flex flex-column w-100" data-rail-scroll-inner>
                <div class="weather-rail-icons column my-2 w-100">
        <a class="flex gap-2 align-items-center weather-rail-item sb-rail-item w-100" href='/weather/wind-forecast/sydney'  data-rail-icon-id='rail-wind'>
            <div class="flex justify-content-center align-content-end">
                <i class="ic-wind "></i>
            </div>
            <div class="text-body bold weather-rail-label">Wind</div>
        </a>
        <a class="flex gap-2 align-items-center weather-rail-item sb-rail-item w-100" href='/weather/forecast/today/sydney'  data-rail-icon-id='rail-weather'>
            <div class="flex justify-content-center align-content-end">
                <i class="ic-weather "></i>
            </div>
            <div class="text-body bold weather-rail-label">Weather</div>
        </a>
        <a class="flex gap-2 align-items-center weather-rail-item sb-rail-item w-100" href='/weather/tides/today/sydney'  data-rail-icon-id='rail-tides'>
            <div class="flex justify-content-center align-content-end">
                <i class="ic-tides icon-primary"></i>
            </div>
            <div class="text-primary bold weather-rail-label">Tides</div>
        </a>
        <a class="flex gap-2 align-items-center weather-rail-item sb-rail-item w-100" href='/weather/rain-radar/sydney'  data-rail-icon-id='rail-radar'>
            <div class="flex justify-content-center align-content-end">
                <i class="ic-rain "></i>
            </div>
            <div class="text-body bold weather-rail-label">Rain Radar</div>
        </a>
        <a class="flex gap-2 align-items-center weather-rail-item sb-rail-item w-100" href='/weather/moon-phases/sydney'  data-rail-icon-id='rail-moon'>
            <div class="flex justify-content-center align-content-end">
                <i class="ic-moon "></i>
            </div>
            <div class="text-body bold weather-rail-label">Moon</div>
        </a>
        <a class="flex gap-2 align-items-center weather-rail-item sb-rail-item w-100" href='/weather/sun/sydney'  data-rail-icon-id='rail-sun'>
            <div class="flex justify-content-center align-content-end">
                <i class="ic-sun "></i>
            </div>
            <div class="text-body bold weather-rail-label">Sun</div>
        </a>
        <a class="flex gap-2 align-items-center weather-rail-item sb-rail-item w-100" href='/weather/stations/nearby/sydney'  data-rail-icon-id='rail-observations'>
            <div class="flex justify-content-center align-content-end">
                <i class="ic-temperature "></i>
            </div>
            <div class="text-body bold weather-rail-label">Stations</div>
        </a>
        <a class="flex gap-2 align-items-center weather-rail-item sb-rail-item w-100" href='/weather/synoptic/sydney'  data-rail-icon-id='rail-synoptic'>
            <div class="flex justify-content-center align-content-end">
                <i class="bi bi-tropical-storm text-body"></i>
            </div>
            <div class="text-body bold weather-rail-label">Synoptic</div>
        </a>
        <a class="flex gap-2 align-items-center weather-rail-item sb-rail-item w-100" href='/weather/colour-satellite/sydney'  data-rail-icon-id='rail-satellites'>
            <div class="flex justify-content-center align-content-end">
                <i class="ic-target "></i>
            </div>
            <div class="text-body bold weather-rail-label">Satellites</div>
        </a>
        <a class="flex gap-2 align-items-center weather-rail-item sb-rail-item w-100" href='/weather/marine-forecast/sydney'  data-rail-icon-id='rail-marine'>
            <div class="flex justify-content-center align-content-end">
                <i class="ic-boating "></i>
            </div>
            <div class="text-body bold weather-rail-label">Marine</div>
        </a>
        <a class="flex gap-2 align-items-center weather-rail-item sb-rail-item w-100" href='/weather/warnings?referringLocation=sydney'  data-rail-icon-id='rail-warnings'>
            <div class="flex justify-content-center align-content-end">
                <i class="ic-warning "></i>
            </div>
            <div class="text-body bold weather-rail-label">Warnings</div>
        </a>
        <a class="flex gap-2 align-items-center weather-rail-item sb-rail-item w-100" href='/weather/my-weather'  data-rail-icon-id='rail-favourites'>
            <div class="flex justify-content-center align-content-end">
                <i class="ic-favourite "></i>
            </div>
            <div class="text-body bold weather-rail-label">Favourites</div>
        </a>
                </div>


                <div class="weather-rail-bottom column my-2 w-100">
        <a class="flex gap-2 align-items-center weather-rail-item sb-rail-item w-100"  onclick='settingsClick()' role='button' >
            <div class="flex justify-content-center align-content-end">
                <i class="ic-settings "></i>
            </div>
            <div class="text-body bold weather-rail-label">Settings</div>
        </a>
        <a class="flex gap-2 align-items-center weather-rail-item sb-rail-item w-100" href='/Help'  >
            <div class="flex justify-content-center align-content-end">
                <i class="ic-help "></i>
            </div>
            <div class="text-body bold weather-rail-label">Help</div>
        </a>
                </div>
            </div>
        </div>
        <div class="rail-scroll-hint" data-rail-scroll-hint aria-hidden="true">
    <i class="bi bi-chevron-down"></i>
</div>

    </div>
</div>
<script>
(function () {
    var root = document.documentElement;
    var script = document.currentScript;
    var rail = null;
    // Prefer the rail that precedes this boot script (direct sibling, or wrapped e.g. Weather d-print-none).
    if (script) {
        var el = script.previousElementSibling;
        while (el && !rail) {
            if (el.classList && el.classList.contains('sb-rail-fixed')) {
                rail = el;
                break;
            }
            if (el.querySelector) {
                rail = el.querySelector('.sb-rail-fixed');
            }
            el = el.previousElementSibling;
        }
    }
    if (!rail) {
        rail = document.querySelector('.sb-rail-fixed');
    }
    if (!rail) return;

    var m = document.getElementById('masthead-wrapper') || document.querySelector('.masthead-container');
    if (m) {
        root.style.setProperty('--masthead-height', m.offsetHeight + 'px');
    }

    if (typeof window.matchMedia === 'function' && !window.matchMedia('(min-width: 992px)').matches) {
        root.style.setProperty('--sb-rail-width', '0px');
        root.style.setProperty('--sb-rail-gutter', '0px');
        return;
    }
    root.style.setProperty('--sb-rail-width', rail.getAttribute('data-rail-width') || '220px');
    root.style.setProperty('--sb-rail-gutter', rail.getAttribute('data-rail-gutter') || '0px');
})();
</script>


<!-- End WeatherRail -->
<div id="weather-settings"></div>

<script>
function settingsClick() {
    try {
        if (window.flutter_inappwebview && window.flutter_inappwebview.callHandler) {
            window.flutter_inappwebview.callHandler('openWeatherSettings');
            return;
        }
    } catch (_) {}

    $("#weather-settings").load("/weather/modal/settings", function (response,status,xhr) {
        var el = document.getElementById('weather-settings-modal');
        var modal = new bootstrap.Modal(el);
        modal.show();
    });

    $(".modal-content").on('click', function (e) {
        $(e).addClass("shake-horizontal");
        setTimeout(function () {
            $(e).removeClass("shake-horizontal")
        }, 500);
    });
}
</script>



</div>             <div class="col weather-content-column" style="min-width:0">
                    <div><div class="my-4 hidden-print"><div class=""><div class='spono-spot hidden-print spono-hero' data-id='WeatherHeader'><div data-fuse='forecast_header'></div></div></div></div></div>                 <div class='container-fluid'>
                    <div class="row">
                        <!-- Content Header -->
                            <div class="col-12"></div>
                        <!-- Content: single class avoids Razor WriteAttributeValue NRE from nested quotes -->
                        <div class="col-12 sb-col-xl-8 ps-1 pe-1">
                                

                                    <style type="text/css">
            .weather-rail-margin-top {
                margin-top: 35px !important;
            }
        </style>
        <div class="mx-2">
        <div class="weather-content">
                <div class="float-end d-flex gap-3 ms-3">
                    <a class="btn-link" href="/weather/tides/nearby/sydney">
                        <div class="flex align-items-center">
                            <i class="ic-map icon-primary me-1"></i>
                            <span>Nearby</span>
                        </div>
                    </a>
                </div>
            
<div class="d-none d-md-block d-print-none">
    <nav aria-label='breadcrumb' class='d-print-none'><ol class='breadcrumb'><li class='breadcrumb-item'><a href='/Home'><i class='ic-home icon-1' aria-label='Home'></i></a></li><li class='breadcrumb-item'><a href='/weather'>Weather</a></li><li class='breadcrumb-item'><a href='/weather/tides/search/TAS'>Tides</a></li><li class='breadcrumb-item active'>TAS </ol> </nav>
</div>



            <div class="surface">
                <h1 class="h3">Tide Times Search</h1>
                
                <div class="mt-3">
                    
<div class="input-group input-group-lg p-md-0">
    <span class="input-group-text bg-background location-search-icon">
        <i class="ic-search icon-primary"></i>
    </span>
    <input class="form-control bg-background ps-0 location-search" id="74"
           type="search"
           placeholder='Enter tide location...'
           autocomplete="off" autocorrect="off" autocapitalize="none" spellcheck="false" inputmode="search" role="combobox" aria-autocomplete="list" aria-haspopup="listbox"
           >
    <span class="input-group-text bg-primary location-search-target location-search-target-gps">
        <i class="ic-target-primary bg-primary"></i>
    </span>
</div>


                </div>
            </div>

            <div class="surface">
                <h2 class="h4">Tide Forecasts by State</h2>

                <div class="d-flex flex-wrap justify-content-center gap-3 py-3">
                        <button onclick="sb.Network.go('/weather/tides/search/WA')" class="btn btn-border">WA</button>
                        <button onclick="sb.Network.go('/weather/tides/search/VIC')" class="btn btn-border">VIC</button>
                        <button onclick="sb.Network.go('/weather/tides/search/NSW')" class="btn btn-border">NSW</button>
                        <button onclick="sb.Network.go('/weather/tides/search/QLD')" class="btn btn-border">QLD</button>
                        <button onclick="sb.Network.go('/weather/tides/search/SA')" class="btn btn-border">SA</button>
                        <button onclick="sb.Network.go('/weather/tides/search/NT')" class="btn btn-border">NT</button>
                        <button onclick="sb.Network.go('/weather/tides/search/TAS')" class="btn btn-primary">TAS</button>
                </div>

                <h3 class="h5">Tide Time Locations for TAS / Tasmania</h3>

                <div class="row" style="min-height:400px">

                        <h2 style="font-size:29pt;font-weight: bold;margin-left: 15px;margin-top: 7px">A</h2>
                        <div class="col-12">
                                <a href="/weather/tides/today/abels-bay-tas-7112" title="Tide Times for ABELS BAY, TAS">
                                    <div class="col-12 col-sm-6 col-md-6 col-lg-3 btn" style='text-align: left'>
                                        <span class="input-area-map-marker glyphicon glyphicon-map-marker" style="color:#C5C5C9"></span>&nbsp;Abels Bay
                                    </div>
                                </a>
                                <a href="/weather/tides/today/adventure-bay-tas-7150" title="Tide Times for ADVENTURE BAY, TAS">
                                    <div class="col-12 col-sm-6 col-md-6 col-lg-3 btn" style='text-align: left'>
                                        <span class="input-area-map-marker glyphicon glyphicon-map-marker" style="color:#C5C5C9"></span>&nbsp;Adventure Bay
                                    </div>
                                </a>
                                <a href="/weather/tides/today/akaroa-tas-7216" title="Tide Times for AKAROA, TAS">
                                    <div class="col-12 col-sm-6 col-md-6 col-lg-3 btn" style='text-align: left'>
                                        <span class="input-area-map-marker glyphicon glyphicon-map-marker" style="color:#C5C5C9"></span>&nbsp;Akaroa
                                    </div>
                                </a>
                                <a href="/weather/tides/today/ann-bay-tas" title="Tide Times for ANN BAY, TAS">
                                    <div class="col-12 col-sm-6 col-md-6 col-lg-3 btn" style='text-align: left'>
                                        <span class="input-area-map-marker glyphicon glyphicon-map-marker" style="color:#C5C5C9"></span>&nbsp;Ann Bay
                                    </div>
                                </a>
                                <a href="/weather/tides/today/ansons-bay-tas-7264" title="Tide Times for ANSONS BAY, TAS">
                                    <div class="col-12 col-sm-6 col-md-6 col-lg-3 btn" style='text-align: left'>
                                        <span class="input-area-map-marker glyphicon glyphicon-map-marker" style="color:#C5C5C9"></span>&nbsp;Ansons Bay
                                    </div>
                                </a>
                                <a href="/weather/tides/today/apollo-bay-tas-7150" title="Tide Times for APOLLO BAY, TAS">
                                    <div class="col-12 col-sm-6 col-md-6 col-lg-3 btn" style='text-align: left'>
                                        <span class="input-area-map-marker glyphicon glyphicon-map-marker" style="color:#C5C5C9"></span>&nbsp;Apollo Bay
                                    </div>
                                </a>
                                <a href="/weather/tides/today/arthur-river-tas-7330" title="Tide Times for ARTHUR RIVER, TAS">
                                    <div class="col-12 col-sm-6 col-md-6 col-lg-3 btn" style='text-align: left'>
                                        <span class="input-area-map-marker glyphicon glyphicon-map-marker" style="color:#C5C5C9"></span>&nbsp;Arthur River
                                    </div>
                                </a>
                        </div>
                        <h2 style="font-size:29pt;font-weight: bold;margin-left: 15px;margin-top: 7px">B</h2>
                        <div class="col-12">
                                <a href="/weather/tides/today/babel-island-tas" title="Tide Times for BABEL ISLAND, TAS">
                                    <div class="col-12 col-sm-6 col-md-6 col-lg-3 btn" style='text-align: left'>
                                        <span class="input-area-map-marker glyphicon glyphicon-map-marker" style="color:#C5C5C9"></span>&nbsp;Babel Island
                                    </div>
                                </a>
                                <a href="/weather/tides/today/badger-head-tas-7270" title="Tide Times for BADGER HEAD, TAS">
                                    <div class="col-12 col-sm-6 col-md-6 col-lg-3 btn" style='text-align: left'>
                                        <span class="input-area-map-marker glyphicon glyphicon-map-marker" style="color:#C5C5C9"></span>&nbsp;Badger Head
                                    </div>
                                </a>
                                <a href="/weather/tides/today/bakers-beach-tas-7307" title="Tide Times for BAKERS BEACH, TAS">
                                    <div class="col-12 col-sm-6 col-md-6 col-lg-3 btn" style='text-align: left'>
                                        <span class="input-area-map-marker glyphicon glyphicon-map-marker" style="color:#C5C5C9"></span>&nbsp;Bakers Beach
                                    </div>
                                </a>
                                <a href="/weather/tides/today/barbers-beach-tas" title="Tide Times for BARBERS BEACH, TAS">
                                    <div class="col-12 col-sm-6 col-md-6 col-lg-3 btn" style='text-align: left'>
                                        <span class="input-area-map-marker glyphicon glyphicon-map-marker" style="color:#C5C5C9"></span>&nbsp;Barbers Beach
                                    </div>
                                </a>
                                <a href="/weather/tides/today/barnes-bay-tas-7150" title="Tide Times for BARNES BAY, TAS">
                                    <div class="col-12 col-sm-6 col-md-6 col-lg-3 btn" style='text-align: left'>
                                        <span class="input-area-map-marker glyphicon glyphicon-map-marker" style="color:#C5C5C9"></span>&nbsp;Barnes Bay
                                    </div>
                                </a>
                                <a href="/weather/tides/today/bass-pyramid-tas" title="Tide Times for BASS PYRAMID, TAS">
                                    <div class="col-12 col-sm-6 col-md-6 col-lg-3 btn" style='text-align: left'>
                                        <span class="input-area-map-marker glyphicon glyphicon-map-marker" style="color:#C5C5C9"></span>&nbsp;Bass Pyramid
                                    </div>
                                </a>
                                <a href="/weather/tides/today/battery-point-tas-7004" title="Tide Times for BATTERY POINT, TAS">
                                    <div class="col-12 col-sm-6 col-md-6 col-lg-3 btn" style='text-align: left'>
                                        <span class="input-area-map-marker glyphicon glyphicon-map-marker" style="color:#C5C5C9"></span>&nbsp;Battery Point
                                    </div>
                                </a>
                                <a href="/weather/tides/today/beaumaris-tas-7215" title="Tide Times for BEAUMARIS, TAS">
                                    <div class="col-12 col-sm-6 col-md-6 col-lg-3 btn" style='text-align: left'>
                                        <span class="input-area-map-marker glyphicon glyphicon-map-marker" style="color:#C5C5C9"></span>&nbsp;Beaumaris
                                    </div>
                                </a>
                                <a href="/weather/tides/today/beauty-point-tas-7270" title="Tide Times for BEAUTY POINT, TAS">
                                    <div class="col-12 col-sm-6 col-md-6 col-lg-3 btn" style='text-align: left'>
                                        <span class="input-area-map-marker glyphicon glyphicon-map-marker" style="color:#C5C5C9"></span>&nbsp;Beauty Point
                                    </div>
                                </a>
                                <a href="/weather/tides/today/beechford-tas-7252" title="Tide Times for BEECHFORD, TAS">
                                    <div class="col-12 col-sm-6 col-md-6 col-lg-3 btn" style='text-align: left'>
                                        <span class="input-area-map-marker glyphicon glyphicon-map-marker" style="color:#C5C5C9"></span>&nbsp;Beechford
                                    </div>
                                </a>
                                <a href="/weather/tides/today/bell-bay-tas-7253" title="Tide Times for BELL BAY, TAS">
                                    <div class="col-12 col-sm-6 col-md-6 col-lg-3 btn" style='text-align: left'>
                                        <span class="input-area-map-marker glyphicon glyphicon-map-marker" style="color:#C5C5C9"></span>&nbsp;Bell Bay
                                    </div>
                                </a>
                                <a href="/weather/tides/today/bellingham-tas-7254" title="Tide Times for BELLINGHAM, TAS">
                                    <div class="col-12 col-sm-6 col-md-6 col-lg-3 btn" style='text-align: left'>
                                        <span class="input-area-map-marker glyphicon glyphicon-map-marker" style="color:#C5C5C9"></span>&nbsp;Bellingham
                                    </div>
                                </a>
                                <a href="/weather/tides/today/bicheno-tas-7215" title="Tide Times for BICHENO, TAS">
                                    <div class="col-12 col-sm-6 col-md-6 col-lg-3 btn" style='text-align: left'>
                                        <span class="input-area-map-marker glyphicon glyphicon-map-marker" style="color:#C5C5C9"></span>&nbsp;Bicheno
                                    </div>
                                </a>
                                <a href="/weather/tides/today/big-river-cove-tas" title="Tide Times for BIG RIVER COVE, TAS">
                                    <div class="col-12 col-sm-6 col-md-6 col-lg-3 btn" style='text-align: left'>
                                        <span class="input-area-map-marker glyphicon glyphicon-map-marker" style="color:#C5C5C9"></span>&nbsp;Big River Cove
                                    </div>
                                </a>
                                <a href="/weather/tides/today/binalong-bay-tas-7216" title="Tide Times for BINALONG BAY, TAS">
                                    <div class="col-12 col-sm-6 col-md-6 col-lg-3 btn" style='text-align: left'>
                                        <span class="input-area-map-marker glyphicon glyphicon-map-marker" style="color:#C5C5C9"></span>&nbsp;Binalong Bay
                                    </div>
                                </a>
                                <a href="/weather/tides/today/birchs-bay-tas-7162" title="Tide Times for BIRCHS BAY, TAS">
                                    <div class="col-12 col-sm-6 col-md-6 col-lg-3 btn" style='text-align: left'>
                                        <span class="input-area-map-marker glyphicon glyphicon-map-marker" style="color:#C5C5C9"></span>&nbsp;Birchs Bay
                                    </div>
                                </a>
                                <a href="/weather/tides/today/black-river-tas-7321" title="Tide Times for BLACK RIVER, TAS">
                                    <div class="col-12 col-sm-6 col-md-6 col-lg-3 btn" style='text-align: left'>
                                        <span class="input-area-map-marker glyphicon glyphicon-map-marker" style="color:#C5C5C9"></span>&nbsp;Black River
                                    </div>
                                </a>
                                <a href="/weather/tides/today/blackmans-bay-tas-7052" title="Tide Times for BLACKMANS BAY, TAS">
                                    <div class="col-12 col-sm-6 col-md-6 col-lg-3 btn" style='text-align: left'>
                                        <span class="input-area-map-marker glyphicon glyphicon-map-marker" style="color:#C5C5C9"></span>&nbsp;Blackmans Bay
                                    </div>
                                </a>
                                <a href="/weather/tides/today/blue-rocks-tas-7255" title="Tide Times for BLUE ROCKS, TAS">
                                    <div class="col-12 col-sm-6 col-md-6 col-lg-3 btn" style='text-align: left'>
                                        <span class="input-area-map-marker glyphicon glyphicon-map-marker" style="color:#C5C5C9"></span>&nbsp;Blue Rocks
                                    </div>
                                </a>
                                <a href="/weather/tides/today/boat-harbour-tas-7321" title="Tide Times for BOAT HARBOUR, TAS">
                                    <div class="col-12 col-sm-6 col-md-6 col-lg-3 btn" style='text-align: left'>
                                        <span class="input-area-map-marker glyphicon glyphicon-map-marker" style="color:#C5C5C9"></span>&nbsp;Boat Harbour
                                    </div>
                                </a>
                                <a href="/weather/tides/today/boat-harbour-beach-tas-7321" title="Tide Times for BOAT HARBOUR BEACH, TAS">
                                    <div class="col-12 col-sm-6 col-md-6 col-lg-3 btn" style='text-align: left'>
                                        <span class="input-area-map-marker glyphicon glyphicon-map-marker" style="color:#C5C5C9"></span>&nbsp;Boat Harbour Beach
                                    </div>
                                </a>
                                <a href="/weather/tides/today/bonnet-hill-tas-7053" title="Tide Times for BONNET HILL, TAS">
                                    <div class="col-12 col-sm-6 col-md-6 col-lg-3 btn" style='text-align: left'>
                                        <span class="input-area-map-marker glyphicon glyphicon-map-marker" style="color:#C5C5C9"></span>&nbsp;Bonnet Hill
                                    </div>
                                </a>
                                <a href="/weather/tides/today/boobyalla-beach-tas" title="Tide Times for BOOBYALLA BEACH, TAS">
                                    <div class="col-12 col-sm-6 col-md-6 col-lg-3 btn" style='text-align: left'>
                                        <span class="input-area-map-marker glyphicon glyphicon-map-marker" style="color:#C5C5C9"></span>&nbsp;Boobyalla Beach
                                    </div>
                                </a>
                                <a href="/weather/tides/today/boomer-bay-tas-7177" title="Tide Times for BOOMER BAY, TAS">
                                    <div class="col-12 col-sm-6 col-md-6 col-lg-3 btn" style='text-align: left'>
                                        <span class="input-area-map-marker glyphicon glyphicon-map-marker" style="color:#C5C5C9"></span>&nbsp;Boomer Bay
                                    </div>
                                </a>
                                <a href="/weather/tides/today/bramble-cove-tas" title="Tide Times for BRAMBLE COVE, TAS">
                                    <div class="col-12 col-sm-6 col-md-6 col-lg-3 btn" style='text-align: left'>
                                        <span class="input-area-map-marker glyphicon glyphicon-map-marker" style="color:#C5C5C9"></span>&nbsp;Bramble Cove
                                    </div>
                                </a>
                                <a href="/weather/tides/today/bream-creek-tas-7175" title="Tide Times for BREAM CREEK, TAS">
                                    <div class="col-12 col-sm-6 col-md-6 col-lg-3 btn" style='text-align: left'>
                                        <span class="input-area-map-marker glyphicon glyphicon-map-marker" style="color:#C5C5C9"></span>&nbsp;Bream Creek
                                    </div>
                                </a>
                                <a href="/weather/tides/today/bridgewater-tas-7030" title="Tide Times for BRIDGEWATER, TAS">
                                    <div class="col-12 col-sm-6 col-md-6 col-lg-3 btn" style='text-align: left'>
                                        <span class="input-area-map-marker glyphicon glyphicon-map-marker" style="color:#C5C5C9"></span>&nbsp;Bridgewater
                                    </div>
                                </a>
                                <a href="/weather/tides/today/bridport-tas-7262" title="Tide Times for BRIDPORT, TAS">
                                    <div class="col-12 col-sm-6 col-md-6 col-lg-3 btn" style='text-align: left'>
                                        <span class="input-area-map-marker glyphicon glyphicon-map-marker" style="color:#C5C5C9"></span>&nbsp;Bridport
                                    </div>
                                </a>
                                <a href="/weather/tides/today/brooklyn-tas-7320" title="Tide Times for BROOKLYN, TAS">
                                    <div class="col-12 col-sm-6 col-md-6 col-lg-3 btn" style='text-align: left'>
                                        <span class="input-area-map-marker glyphicon glyphicon-map-marker" style="color:#C5C5C9"></span>&nbsp;Brooklyn
                                    </div>
                                </a>
                                <a href="/weather/tides/today/brooks-bay-tas-7116" title="Tide Times for BROOKS BAY, TAS">
                                    <div class="col-12 col-sm-6 col-md-6 col-lg-3 btn" style='text-align: left'>
                                        <span class="input-area-map-marker glyphicon glyphicon-map-marker" style="color:#C5C5C9"></span>&nbsp;Brooks Bay
                                    </div>
                                </a>
                                <a href="/weather/tides/today/bungaree-tas-7256" title="Tide Times for BUNGAREE, TAS">
                                    <div class="col-12 col-sm-6 col-md-6 col-lg-3 btn" style='text-align: left'>
                                        <span class="input-area-map-marker glyphicon glyphicon-map-marker" style="color:#C5C5C9"></span>&nbsp;Bungaree
                                    </div>
                                </a>
                                <a href="/weather/tides/today/burnie-tas-7320" title="Tide Times for BURNIE, TAS">
                                    <div class="col-12 col-sm-6 col-md-6 col-lg-3 btn" style='text-align: left'>
                                        <span class="input-area-map-marker glyphicon glyphicon-map-marker" style="color:#C5C5C9"></span>&nbsp;Burnie
                                    </div>
                                </a>
                        </div>
                        <h2 style="font-size:29pt;font-weight: bold;margin-left: 15px;margin-top: 7px">C</h2>
                        <div class="col-12">
                                <a href="/weather/tides/today/cairns-bay-tas-7116" title="Tide Times for CAIRNS BAY, TAS">
                                    <div class="col-12 col-sm-6 col-md-6 col-lg-3 btn" style='text-align: left'>
                                        <span class="input-area-map-marker glyphicon glyphicon-map-marker" style="color:#C5C5C9"></span>&nbsp;Cairns Bay
                                    </div>
                                </a>
                                <a href="/weather/tides/today/camdale-tas-7320" title="Tide Times for CAMDALE, TAS">
                                    <div class="col-12 col-sm-6 col-md-6 col-lg-3 btn" style='text-align: left'>
                                        <span class="input-area-map-marker glyphicon glyphicon-map-marker" style="color:#C5C5C9"></span>&nbsp;Camdale
                                    </div>
                                </a>
                                <a href="/weather/tides/today/cape-barren-island-tas-7257" title="Tide Times for CAPE BARREN ISLAND, TAS">
                                    <div class="col-12 col-sm-6 col-md-6 col-lg-3 btn" style='text-align: left'>
                                        <span class="input-area-map-marker glyphicon glyphicon-map-marker" style="color:#C5C5C9"></span>&nbsp;Cape Barren Island
                                    </div>
                                </a>
                                <a href="/weather/tides/today/cape-bruny-tas" title="Tide Times for CAPE BRUNY, TAS">
                                    <div class="col-12 col-sm-6 col-md-6 col-lg-3 btn" style='text-align: left'>
                                        <span class="input-area-map-marker glyphicon glyphicon-map-marker" style="color:#C5C5C9"></span>&nbsp;Cape Bruny
                                    </div>
                                </a>
                                <a href="/weather/tides/today/cape-frankland-tas" title="Tide Times for CAPE FRANKLAND, TAS">
                                    <div class="col-12 col-sm-6 col-md-6 col-lg-3 btn" style='text-align: left'>
                                        <span class="input-area-map-marker glyphicon glyphicon-map-marker" style="color:#C5C5C9"></span>&nbsp;Cape Frankland
                                    </div>
                                </a>
                                <a href="/weather/tides/today/cape-grim-tas" title="Tide Times for CAPE GRIM, TAS">
                                    <div class="col-12 col-sm-6 col-md-6 col-lg-3 btn" style='text-align: left'>
                                        <span class="input-area-map-marker glyphicon glyphicon-map-marker" style="color:#C5C5C9"></span>&nbsp;Cape Grim
                                    </div>
                                </a>
                                <a href="/weather/tides/today/cape-pillar-tas-7182" title="Tide Times for CAPE PILLAR, TAS">
                                    <div class="col-12 col-sm-6 col-md-6 col-lg-3 btn" style='text-align: left'>
                                        <span class="input-area-map-marker glyphicon glyphicon-map-marker" style="color:#C5C5C9"></span>&nbsp;Cape Pillar
                                    </div>
                                </a>
                                <a href="/weather/tides/today/cape-portland-tas-7264" title="Tide Times for CAPE PORTLAND, TAS">
                                    <div class="col-12 col-sm-6 col-md-6 col-lg-3 btn" style='text-align: left'>
                                        <span class="input-area-map-marker glyphicon glyphicon-map-marker" style="color:#C5C5C9"></span>&nbsp;Cape Portland
                                    </div>
                                </a>
                                <a href="/weather/tides/today/cape-raoul-tas-7184" title="Tide Times for CAPE RAOUL, TAS">
                                    <div class="col-12 col-sm-6 col-md-6 col-lg-3 btn" style='text-align: left'>
                                        <span class="input-area-map-marker glyphicon glyphicon-map-marker" style="color:#C5C5C9"></span>&nbsp;Cape Raoul
                                    </div>
                                </a>
                                <a href="/weather/tides/today/cape-sorell-tas" title="Tide Times for CAPE SORELL, TAS">
                                    <div class="col-12 col-sm-6 col-md-6 col-lg-3 btn" style='text-align: left'>
                                        <span class="input-area-map-marker glyphicon glyphicon-map-marker" style="color:#C5C5C9"></span>&nbsp;Cape Sorell
                                    </div>
                                </a>
                                <a href="/weather/tides/today/cape-sorell-(coastal)-tas" title="Tide Times for CAPE SORELL (COASTAL), TAS">
                                    <div class="col-12 col-sm-6 col-md-6 col-lg-3 btn" style='text-align: left'>
                                        <span class="input-area-map-marker glyphicon glyphicon-map-marker" style="color:#C5C5C9"></span>&nbsp;Cape Sorell
                                    </div>
                                </a>
                                <a href="/weather/tides/today/cape-tourville-tas" title="Tide Times for CAPE TOURVILLE, TAS">
                                    <div class="col-12 col-sm-6 col-md-6 col-lg-3 btn" style='text-align: left'>
                                        <span class="input-area-map-marker glyphicon glyphicon-map-marker" style="color:#C5C5C9"></span>&nbsp;Cape Tourville
                                    </div>
                                </a>
                                <a href="/weather/tides/today/castle-forbes-bay-tas-7116" title="Tide Times for CASTLE FORBES BAY, TAS">
                                    <div class="col-12 col-sm-6 col-md-6 col-lg-3 btn" style='text-align: left'>
                                        <span class="input-area-map-marker glyphicon glyphicon-map-marker" style="color:#C5C5C9"></span>&nbsp;Castle Forbes Bay
                                    </div>
                                </a>
                                <a href="/weather/tides/today/chain-of-lagoons-tas-7215" title="Tide Times for CHAIN OF LAGOONS, TAS">
                                    <div class="col-12 col-sm-6 col-md-6 col-lg-3 btn" style='text-align: left'>
                                        <span class="input-area-map-marker glyphicon glyphicon-map-marker" style="color:#C5C5C9"></span>&nbsp;Chain Of Lagoons
                                    </div>
                                </a>
                                <a href="/weather/tides/today/charlotte-cove-tas-7112" title="Tide Times for CHARLOTTE COVE, TAS">
                                    <div class="col-12 col-sm-6 col-md-6 col-lg-3 btn" style='text-align: left'>
                                        <span class="input-area-map-marker glyphicon glyphicon-map-marker" style="color:#C5C5C9"></span>&nbsp;Charlotte Cove
                                    </div>
                                </a>
                                <a href="/weather/tides/today/chasm-creek-tas-7321" title="Tide Times for CHASM CREEK, TAS">
                                    <div class="col-12 col-sm-6 col-md-6 col-lg-3 btn" style='text-align: left'>
                                        <span class="input-area-map-marker glyphicon glyphicon-map-marker" style="color:#C5C5C9"></span>&nbsp;Chasm Creek
                                    </div>
                                </a>
                                <a href="/weather/tides/today/clarence-point-tas-7270" title="Tide Times for CLARENCE POINT, TAS">
                                    <div class="col-12 col-sm-6 col-md-6 col-lg-3 btn" style='text-align: left'>
                                        <span class="input-area-map-marker glyphicon glyphicon-map-marker" style="color:#C5C5C9"></span>&nbsp;Clarence Point
                                    </div>
                                </a>
                                <a href="/weather/tides/today/clifton-beach-tas-7020" title="Tide Times for CLIFTON BEACH, TAS">
                                    <div class="col-12 col-sm-6 col-md-6 col-lg-3 btn" style='text-align: left'>
                                        <span class="input-area-map-marker glyphicon glyphicon-map-marker" style="color:#C5C5C9"></span>&nbsp;Clifton Beach
                                    </div>
                                </a>
                                <a href="/weather/tides/today/cloudy-bay-tas" title="Tide Times for CLOUDY BAY, TAS">
                                    <div class="col-12 col-sm-6 col-md-6 col-lg-3 btn" style='text-align: left'>
                                        <span class="input-area-map-marker glyphicon glyphicon-map-marker" style="color:#C5C5C9"></span>&nbsp;Cloudy Bay
                                    </div>
                                </a>
                                <a href="/weather/tides/today/coles-bay-tas-7215" title="Tide Times for COLES BAY, TAS">
                                    <div class="col-12 col-sm-6 col-md-6 col-lg-3 btn" style='text-align: left'>
                                        <span class="input-area-map-marker glyphicon glyphicon-map-marker" style="color:#C5C5C9"></span>&nbsp;Coles Bay
                                    </div>
                                </a>
                                <a href="/weather/tides/today/coles-beach-tas" title="Tide Times for COLES BEACH, TAS">
                                    <div class="col-12 col-sm-6 col-md-6 col-lg-3 btn" style='text-align: left'>
                                        <span class="input-area-map-marker glyphicon glyphicon-map-marker" style="color:#C5C5C9"></span>&nbsp;Coles Beach
                                    </div>
                                </a>
                                <a href="/weather/tides/today/connellys-marsh-tas-7173" title="Tide Times for CONNELLYS MARSH, TAS">
                                    <div class="col-12 col-sm-6 col-md-6 col-lg-3 btn" style='text-align: left'>
                                        <span class="input-area-map-marker glyphicon glyphicon-map-marker" style="color:#C5C5C9"></span>&nbsp;Connellys Marsh
                                    </div>
                                </a>
                                <a href="/weather/tides/today/cooee-tas-7320" title="Tide Times for COOEE, TAS">
                                    <div class="col-12 col-sm-6 col-md-6 col-lg-3 btn" style='text-align: left'>
                                        <span class="input-area-map-marker glyphicon glyphicon-map-marker" style="color:#C5C5C9"></span>&nbsp;Cooee
                                    </div>
                                </a>
                                <a href="/weather/tides/today/couta-rocks-tas-7330" title="Tide Times for COUTA ROCKS, TAS">
                                    <div class="col-12 col-sm-6 col-md-6 col-lg-3 btn" style='text-align: left'>
                                        <span class="input-area-map-marker glyphicon glyphicon-map-marker" style="color:#C5C5C9"></span>&nbsp;Couta Rocks
                                    </div>
                                </a>
                                <a href="/weather/tides/today/cowrie-point-tas-7321" title="Tide Times for COWRIE POINT, TAS">
                                    <div class="col-12 col-sm-6 col-md-6 col-lg-3 btn" style='text-align: left'>
                                        <span class="input-area-map-marker glyphicon glyphicon-map-marker" style="color:#C5C5C9"></span>&nbsp;Cowrie Point
                                    </div>
                                </a>
                                <a href="/weather/tides/today/crayfish-creek-tas-7321" title="Tide Times for CRAYFISH CREEK, TAS">
                                    <div class="col-12 col-sm-6 col-md-6 col-lg-3 btn" style='text-align: left'>
                                        <span class="input-area-map-marker glyphicon glyphicon-map-marker" style="color:#C5C5C9"></span>&nbsp;Crayfish Creek
                                    </div>
                                </a>
                                <a href="/weather/tides/today/cremorne-tas-7024" title="Tide Times for CREMORNE, TAS">
                                    <div class="col-12 col-sm-6 col-md-6 col-lg-3 btn" style='text-align: left'>
                                        <span class="input-area-map-marker glyphicon glyphicon-map-marker" style="color:#C5C5C9"></span>&nbsp;Cremorne
                                    </div>
                                </a>
                                <a href="/weather/tides/today/currie-tas-7256" title="Tide Times for CURRIE, TAS">
                                    <div class="col-12 col-sm-6 col-md-6 col-lg-3 btn" style='text-align: left'>
                                        <span class="input-area-map-marker glyphicon glyphicon-map-marker" style="color:#C5C5C9"></span>&nbsp;Currie
                                    </div>
                                </a>
                                <a href="/weather/tides/today/curtis-island-tas" title="Tide Times for CURTIS ISLAND, TAS">
                                    <div class="col-12 col-sm-6 col-md-6 col-lg-3 btn" style='text-align: left'>
                                        <span class="input-area-map-marker glyphicon glyphicon-map-marker" style="color:#C5C5C9"></span>&nbsp;Curtis Island
                                    </div>
                                </a>
                        </div>
                        <h2 style="font-size:29pt;font-weight: bold;margin-left: 15px;margin-top: 7px">D</h2>
                        <div class="col-12">
                                <a href="/weather/tides/today/darlington-jetty-tas" title="Tide Times for DARLINGTON JETTY, TAS">
                                    <div class="col-12 col-sm-6 col-md-6 col-lg-3 btn" style='text-align: left'>
                                        <span class="input-area-map-marker glyphicon glyphicon-map-marker" style="color:#C5C5C9"></span>&nbsp;Darlington Jetty
                                    </div>
                                </a>
                                <a href="/weather/tides/today/deal-island-tas" title="Tide Times for DEAL ISLAND, TAS">
                                    <div class="col-12 col-sm-6 col-md-6 col-lg-3 btn" style='text-align: left'>
                                        <span class="input-area-map-marker glyphicon glyphicon-map-marker" style="color:#C5C5C9"></span>&nbsp;Deal Island
                                    </div>
                                </a>
                                <a href="/weather/tides/today/deep-bay-tas-7112" title="Tide Times for DEEP BAY, TAS">
                                    <div class="col-12 col-sm-6 col-md-6 col-lg-3 btn" style='text-align: left'>
                                        <span class="input-area-map-marker glyphicon glyphicon-map-marker" style="color:#C5C5C9"></span>&nbsp;Deep Bay
                                    </div>
                                </a>
                                <a href="/weather/tides/today/dennes-point-tas-7150" title="Tide Times for DENNES POINT, TAS">
                                    <div class="col-12 col-sm-6 col-md-6 col-lg-3 btn" style='text-align: left'>
                                        <span class="input-area-map-marker glyphicon glyphicon-map-marker" style="color:#C5C5C9"></span>&nbsp;Dennes Point
                                    </div>
                                </a>
                                <a href="/weather/tides/today/detention-tas-7321" title="Tide Times for DETENTION, TAS">
                                    <div class="col-12 col-sm-6 col-md-6 col-lg-3 btn" style='text-align: left'>
                                        <span class="input-area-map-marker glyphicon glyphicon-map-marker" style="color:#C5C5C9"></span>&nbsp;Detention
                                    </div>
                                </a>
                                <a href="/weather/tides/today/devonport-tas" title="Tide Times for DEVONPORT, TAS">
                                    <div class="col-12 col-sm-6 col-md-6 col-lg-3 btn" style='text-align: left'>
                                        <span class="input-area-map-marker glyphicon glyphicon-map-marker" style="color:#C5C5C9"></span>&nbsp;Devonport
                                    </div>
                                </a>
                                <a href="/weather/tides/today/devonport-tas-7310" title="Tide Times for DEVONPORT, TAS">
                                    <div class="col-12 col-sm-6 col-md-6 col-lg-3 btn" style='text-align: left'>
                                        <span class="input-area-map-marker glyphicon glyphicon-map-marker" style="color:#C5C5C9"></span>&nbsp;Devonport
                                    </div>
                                </a>
                                <a href="/weather/tides/today/doctors-rocks-tas-7325" title="Tide Times for DOCTORS ROCKS, TAS">
                                    <div class="col-12 col-sm-6 col-md-6 col-lg-3 btn" style='text-align: left'>
                                        <span class="input-area-map-marker glyphicon glyphicon-map-marker" style="color:#C5C5C9"></span>&nbsp;Doctors Rocks
                                    </div>
                                </a>
                                <a href="/weather/tides/today/dolphin-sands-tas-7190" title="Tide Times for DOLPHIN SANDS, TAS">
                                    <div class="col-12 col-sm-6 col-md-6 col-lg-3 btn" style='text-align: left'>
                                        <span class="input-area-map-marker glyphicon glyphicon-map-marker" style="color:#C5C5C9"></span>&nbsp;Dolphin Sands
                                    </div>
                                </a>
                                <a href="/weather/tides/today/douglas-river-tas-7215" title="Tide Times for DOUGLAS RIVER, TAS">
                                    <div class="col-12 col-sm-6 col-md-6 col-lg-3 btn" style='text-align: left'>
                                        <span class="input-area-map-marker glyphicon glyphicon-map-marker" style="color:#C5C5C9"></span>&nbsp;Douglas River
                                    </div>
                                </a>
                                <a href="/weather/tides/today/dover-tas-7117" title="Tide Times for DOVER, TAS">
                                    <div class="col-12 col-sm-6 col-md-6 col-lg-3 btn" style='text-align: left'>
                                        <span class="input-area-map-marker glyphicon glyphicon-map-marker" style="color:#C5C5C9"></span>&nbsp;Dover
                                    </div>
                                </a>
                                <a href="/weather/tides/today/dowsing-point-tas-7010" title="Tide Times for DOWSING POINT, TAS">
                                    <div class="col-12 col-sm-6 col-md-6 col-lg-3 btn" style='text-align: left'>
                                        <span class="input-area-map-marker glyphicon glyphicon-map-marker" style="color:#C5C5C9"></span>&nbsp;Dowsing Point
                                    </div>
                                </a>
                                <a href="/weather/tides/today/dunalley-(stroud-point)-tas" title="Tide Times for DUNALLEY (STROUD POINT), TAS">
                                    <div class="col-12 col-sm-6 col-md-6 col-lg-3 btn" style='text-align: left'>
                                        <span class="input-area-map-marker glyphicon glyphicon-map-marker" style="color:#C5C5C9"></span>&nbsp;Dunalley (Stroud Point)
                                    </div>
                                </a>
                        </div>
                        <h2 style="font-size:29pt;font-weight: bold;margin-left: 15px;margin-top: 7px">E</h2>
                        <div class="col-12">
                                <a href="/weather/tides/today/eaglehawk-neck-tas-7179" title="Tide Times for EAGLEHAWK NECK, TAS">
                                    <div class="col-12 col-sm-6 col-md-6 col-lg-3 btn" style='text-align: left'>
                                        <span class="input-area-map-marker glyphicon glyphicon-map-marker" style="color:#C5C5C9"></span>&nbsp;Eaglehawk Neck
                                    </div>
                                </a>
                                <a href="/weather/tides/today/tas-east-coast" title="Tide Times for EAST COAST (COASTAL), TAS">
                                    <div class="col-12 col-sm-6 col-md-6 col-lg-3 btn" style='text-align: left'>
                                        <span class="input-area-map-marker glyphicon glyphicon-map-marker" style="color:#C5C5C9"></span>&nbsp;East Coast
                                    </div>
                                </a>
                                <a href="/weather/tides/today/east-moncoeur-island-tas" title="Tide Times for EAST MONCOEUR ISLAND, TAS">
                                    <div class="col-12 col-sm-6 col-md-6 col-lg-3 btn" style='text-align: left'>
                                        <span class="input-area-map-marker glyphicon glyphicon-map-marker" style="color:#C5C5C9"></span>&nbsp;East Moncoeur Island
                                    </div>
                                </a>
                                <a href="/weather/tides/today/eddystone-tas-7264" title="Tide Times for EDDYSTONE, TAS">
                                    <div class="col-12 col-sm-6 col-md-6 col-lg-3 btn" style='text-align: left'>
                                        <span class="input-area-map-marker glyphicon glyphicon-map-marker" style="color:#C5C5C9"></span>&nbsp;Eddystone
                                    </div>
                                </a>
                                <a href="/weather/tides/today/eddystone-point-tas-7264" title="Tide Times for EDDYSTONE POINT, TAS">
                                    <div class="col-12 col-sm-6 col-md-6 col-lg-3 btn" style='text-align: left'>
                                        <span class="input-area-map-marker glyphicon glyphicon-map-marker" style="color:#C5C5C9"></span>&nbsp;Eddystone Point
                                    </div>
                                </a>
                                <a href="/weather/tides/today/edgcumbe-beach-tas-7321" title="Tide Times for EDGCUMBE BEACH, TAS">
                                    <div class="col-12 col-sm-6 col-md-6 col-lg-3 btn" style='text-align: left'>
                                        <span class="input-area-map-marker glyphicon glyphicon-map-marker" style="color:#C5C5C9"></span>&nbsp;Edgcumbe Beach
                                    </div>
                                </a>
                                <a href="/weather/tides/today/egg-lagoon-tas-7256" title="Tide Times for EGG LAGOON, TAS">
                                    <div class="col-12 col-sm-6 col-md-6 col-lg-3 btn" style='text-align: left'>
                                        <span class="input-area-map-marker glyphicon glyphicon-map-marker" style="color:#C5C5C9"></span>&nbsp;Egg Lagoon
                                    </div>
                                </a>
                                <a href="/weather/tides/today/eggs-and-bacon-bay-tas-7112" title="Tide Times for EGGS AND BACON BAY, TAS">
                                    <div class="col-12 col-sm-6 col-md-6 col-lg-3 btn" style='text-align: left'>
                                        <span class="input-area-map-marker glyphicon glyphicon-map-marker" style="color:#C5C5C9"></span>&nbsp;Eggs And Bacon Bay
                                    </div>
                                </a>
                                <a href="/weather/tides/today/emita-tas-7255" title="Tide Times for EMITA, TAS">
                                    <div class="col-12 col-sm-6 col-md-6 col-lg-3 btn" style='text-align: left'>
                                        <span class="input-area-map-marker glyphicon glyphicon-map-marker" style="color:#C5C5C9"></span>&nbsp;Emita
                                    </div>
                                </a>
                                <a href="/weather/tides/today/emu-heights-tas-7320" title="Tide Times for EMU HEIGHTS, TAS">
                                    <div class="col-12 col-sm-6 col-md-6 col-lg-3 btn" style='text-align: left'>
                                        <span class="input-area-map-marker glyphicon glyphicon-map-marker" style="color:#C5C5C9"></span>&nbsp;Emu Heights
                                    </div>
                                </a>
                        </div>
                        <h2 style="font-size:29pt;font-weight: bold;margin-left: 15px;margin-top: 7px">F</h2>
                        <div class="col-12">
                                <a href="/weather/tides/today/falmouth-tas-7215" title="Tide Times for FALMOUTH, TAS">
                                    <div class="col-12 col-sm-6 col-md-6 col-lg-3 btn" style='text-align: left'>
                                        <span class="input-area-map-marker glyphicon glyphicon-map-marker" style="color:#C5C5C9"></span>&nbsp;Falmouth
                                    </div>
                                </a>
                                <a href="/weather/tides/today/flinders-island-tas" title="Tide Times for FLINDERS ISLAND, TAS">
                                    <div class="col-12 col-sm-6 col-md-6 col-lg-3 btn" style='text-align: left'>
                                        <span class="input-area-map-marker glyphicon glyphicon-map-marker" style="color:#C5C5C9"></span>&nbsp;Flinders Island
                                    </div>
                                </a>
                                <a href="/weather/tides/today/foochow-beach-tas" title="Tide Times for FOOCHOW BEACH, TAS">
                                    <div class="col-12 col-sm-6 col-md-6 col-lg-3 btn" style='text-align: left'>
                                        <span class="input-area-map-marker glyphicon glyphicon-map-marker" style="color:#C5C5C9"></span>&nbsp;Foochow Beach
                                    </div>
                                </a>
                                <a href="/weather/tides/today/four-mile-creek-tas-7215" title="Tide Times for FOUR MILE CREEK, TAS">
                                    <div class="col-12 col-sm-6 col-md-6 col-lg-3 btn" style='text-align: left'>
                                        <span class="input-area-map-marker glyphicon glyphicon-map-marker" style="color:#C5C5C9"></span>&nbsp;Four Mile Creek
                                    </div>
                                </a>
                                <a href="/weather/tides/today/freycinet-tas-7215" title="Tide Times for FREYCINET, TAS">
                                    <div class="col-12 col-sm-6 col-md-6 col-lg-3 btn" style='text-align: left'>
                                        <span class="input-area-map-marker glyphicon glyphicon-map-marker" style="color:#C5C5C9"></span>&nbsp;Freycinet
                                    </div>
                                </a>
                                <a href="/weather/tides/today/friendly-beaches-tas-7215" title="Tide Times for FRIENDLY BEACHES, TAS">
                                    <div class="col-12 col-sm-6 col-md-6 col-lg-3 btn" style='text-align: left'>
                                        <span class="input-area-map-marker glyphicon glyphicon-map-marker" style="color:#C5C5C9"></span>&nbsp;Friendly Beaches
                                    </div>
                                </a>
                        </div>
                        <h2 style="font-size:29pt;font-weight: bold;margin-left: 15px;margin-top: 7px">G</h2>
                        <div class="col-12">
                                <a href="/weather/tides/today/garden-cove-tas" title="Tide Times for GARDEN COVE, TAS">
                                    <div class="col-12 col-sm-6 col-md-6 col-lg-3 btn" style='text-align: left'>
                                        <span class="input-area-map-marker glyphicon glyphicon-map-marker" style="color:#C5C5C9"></span>&nbsp;Garden Cove
                                    </div>
                                </a>
                                <a href="/weather/tides/today/gardners-bay-tas-7112" title="Tide Times for GARDNERS BAY, TAS">
                                    <div class="col-12 col-sm-6 col-md-6 col-lg-3 btn" style='text-align: left'>
                                        <span class="input-area-map-marker glyphicon glyphicon-map-marker" style="color:#C5C5C9"></span>&nbsp;Gardners Bay
                                    </div>
                                </a>
                                <a href="/weather/tides/today/geilston-bay-tas-7015" title="Tide Times for GEILSTON BAY, TAS">
                                    <div class="col-12 col-sm-6 col-md-6 col-lg-3 btn" style='text-align: left'>
                                        <span class="input-area-map-marker glyphicon glyphicon-map-marker" style="color:#C5C5C9"></span>&nbsp;Geilston Bay
                                    </div>
                                </a>
                                <a href="/weather/tides/today/glaziers-bay-tas-7109" title="Tide Times for GLAZIERS BAY, TAS">
                                    <div class="col-12 col-sm-6 col-md-6 col-lg-3 btn" style='text-align: left'>
                                        <span class="input-area-map-marker glyphicon glyphicon-map-marker" style="color:#C5C5C9"></span>&nbsp;Glaziers Bay
                                    </div>
                                </a>
                                <a href="/weather/tides/today/gordon-tas-7150" title="Tide Times for GORDON, TAS">
                                    <div class="col-12 col-sm-6 col-md-6 col-lg-3 btn" style='text-align: left'>
                                        <span class="input-area-map-marker glyphicon glyphicon-map-marker" style="color:#C5C5C9"></span>&nbsp;Gordon
                                    </div>
                                </a>
                                <a href="/weather/tides/today/granville-harbour-tas-7469" title="Tide Times for GRANVILLE HARBOUR, TAS">
                                    <div class="col-12 col-sm-6 col-md-6 col-lg-3 btn" style='text-align: left'>
                                        <span class="input-area-map-marker glyphicon glyphicon-map-marker" style="color:#C5C5C9"></span>&nbsp;Granville Harbour
                                    </div>
                                </a>
                                <a href="/weather/tides/today/grassy-tas-7256" title="Tide Times for GRASSY, TAS">
                                    <div class="col-12 col-sm-6 col-md-6 col-lg-3 btn" style='text-align: left'>
                                        <span class="input-area-map-marker glyphicon glyphicon-map-marker" style="color:#C5C5C9"></span>&nbsp;Grassy
                                    </div>
                                </a>
                                <a href="/weather/tides/today/gray-tas-7215" title="Tide Times for GRAY, TAS">
                                    <div class="col-12 col-sm-6 col-md-6 col-lg-3 btn" style='text-align: left'>
                                        <span class="input-area-map-marker glyphicon glyphicon-map-marker" style="color:#C5C5C9"></span>&nbsp;Gray
                                    </div>
                                </a>
                                <a href="/weather/tides/today/great-bay-tas-7150" title="Tide Times for GREAT BAY, TAS">
                                    <div class="col-12 col-sm-6 col-md-6 col-lg-3 btn" style='text-align: left'>
                                        <span class="input-area-map-marker glyphicon glyphicon-map-marker" style="color:#C5C5C9"></span>&nbsp;Great Bay
                                    </div>
                                </a>
                                <a href="/weather/tides/today/greens-beach-tas-7270" title="Tide Times for GREENS BEACH, TAS">
                                    <div class="col-12 col-sm-6 col-md-6 col-lg-3 btn" style='text-align: left'>
                                        <span class="input-area-map-marker glyphicon glyphicon-map-marker" style="color:#C5C5C9"></span>&nbsp;Greens Beach
                                    </div>
                                </a>
                        </div>
                        <h2 style="font-size:29pt;font-weight: bold;margin-left: 15px;margin-top: 7px">H</h2>
                        <div class="col-12">
                                <a href="/weather/tides/today/hawley-beach-tas-7307" title="Tide Times for HAWLEY BEACH, TAS">
                                    <div class="col-12 col-sm-6 col-md-6 col-lg-3 btn" style='text-align: left'>
                                        <span class="input-area-map-marker glyphicon glyphicon-map-marker" style="color:#C5C5C9"></span>&nbsp;Hawley Beach
                                    </div>
                                </a>
                                <a href="/weather/tides/today/hellyer-tas-7321" title="Tide Times for HELLYER, TAS">
                                    <div class="col-12 col-sm-6 col-md-6 col-lg-3 btn" style='text-align: left'>
                                        <span class="input-area-map-marker glyphicon glyphicon-map-marker" style="color:#C5C5C9"></span>&nbsp;Hellyer
                                    </div>
                                </a>
                                <a href="/weather/tides/today/heybridge-tas-7316" title="Tide Times for HEYBRIDGE, TAS">
                                    <div class="col-12 col-sm-6 col-md-6 col-lg-3 btn" style='text-align: left'>
                                        <span class="input-area-map-marker glyphicon glyphicon-map-marker" style="color:#C5C5C9"></span>&nbsp;Heybridge
                                    </div>
                                </a>
                                <a href="/weather/tides/today/hobart" title="Tide Times for HOBART (COASTAL), TAS">
                                    <div class="col-12 col-sm-6 col-md-6 col-lg-3 btn" style='text-align: left'>
                                        <span class="input-area-map-marker glyphicon glyphicon-map-marker" style="color:#C5C5C9"></span>&nbsp;Hobart
                                    </div>
                                </a>
                                <a href="/weather/tides/today/hogan-island-tas" title="Tide Times for HOGAN ISLAND, TAS">
                                    <div class="col-12 col-sm-6 col-md-6 col-lg-3 btn" style='text-align: left'>
                                        <span class="input-area-map-marker glyphicon glyphicon-map-marker" style="color:#C5C5C9"></span>&nbsp;Hogan Island
                                    </div>
                                </a>
                                <a href="/weather/tides/today/howth-tas-7316" title="Tide Times for HOWTH, TAS">
                                    <div class="col-12 col-sm-6 col-md-6 col-lg-3 btn" style='text-align: left'>
                                        <span class="input-area-map-marker glyphicon glyphicon-map-marker" style="color:#C5C5C9"></span>&nbsp;Howth
                                    </div>
                                </a>
                                <a href="/weather/tides/today/hunter-island-tas" title="Tide Times for HUNTER ISLAND, TAS">
                                    <div class="col-12 col-sm-6 col-md-6 col-lg-3 btn" style='text-align: left'>
                                        <span class="input-area-map-marker glyphicon glyphicon-map-marker" style="color:#C5C5C9"></span>&nbsp;Hunter Island
                                    </div>
                                </a>
                        </div>
                        <h2 style="font-size:29pt;font-weight: bold;margin-left: 15px;margin-top: 7px">I</h2>
                        <div class="col-12">
                                <a href="/weather/tides/today/ida-bay-tas-7109" title="Tide Times for IDA BAY, TAS">
                                    <div class="col-12 col-sm-6 col-md-6 col-lg-3 btn" style='text-align: left'>
                                        <span class="input-area-map-marker glyphicon glyphicon-map-marker" style="color:#C5C5C9"></span>&nbsp;Ida Bay
                                    </div>
                                </a>
                                <a href="/weather/tides/today/impression-bay-tas" title="Tide Times for IMPRESSION BAY, TAS">
                                    <div class="col-12 col-sm-6 col-md-6 col-lg-3 btn" style='text-align: left'>
                                        <span class="input-area-map-marker glyphicon glyphicon-map-marker" style="color:#C5C5C9"></span>&nbsp;Impression Bay
                                    </div>
                                </a>
                                <a href="/weather/tides/today/inner-sister-island-tas" title="Tide Times for INNER SISTER ISLAND, TAS">
                                    <div class="col-12 col-sm-6 col-md-6 col-lg-3 btn" style='text-align: left'>
                                        <span class="input-area-map-marker glyphicon glyphicon-map-marker" style="color:#C5C5C9"></span>&nbsp;Inner Sister Island
                                    </div>
                                </a>
                        </div>
                        <h2 style="font-size:29pt;font-weight: bold;margin-left: 15px;margin-top: 7px">K</h2>
                        <div class="col-12">
                                <a href="/weather/tides/today/kelso-tas-7270" title="Tide Times for KELSO, TAS">
                                    <div class="col-12 col-sm-6 col-md-6 col-lg-3 btn" style='text-align: left'>
                                        <span class="input-area-map-marker glyphicon glyphicon-map-marker" style="color:#C5C5C9"></span>&nbsp;Kelso
                                    </div>
                                </a>
                                <a href="/weather/tides/today/killiecrankie-tas-7255" title="Tide Times for KILLIECRANKIE, TAS">
                                    <div class="col-12 col-sm-6 col-md-6 col-lg-3 btn" style='text-align: left'>
                                        <span class="input-area-map-marker glyphicon glyphicon-map-marker" style="color:#C5C5C9"></span>&nbsp;Killiecrankie
                                    </div>
                                </a>
                                <a href="/weather/tides/today/killiecrankie-bay-tas" title="Tide Times for KILLIECRANKIE BAY, TAS">
                                    <div class="col-12 col-sm-6 col-md-6 col-lg-3 btn" style='text-align: left'>
                                        <span class="input-area-map-marker glyphicon glyphicon-map-marker" style="color:#C5C5C9"></span>&nbsp;Killiecrankie Bay
                                    </div>
                                </a>
                                <a href="/weather/tides/today/king-island-tas" title="Tide Times for KING ISLAND, TAS">
                                    <div class="col-12 col-sm-6 col-md-6 col-lg-3 btn" style='text-align: left'>
                                        <span class="input-area-map-marker glyphicon glyphicon-map-marker" style="color:#C5C5C9"></span>&nbsp;King Island
                                    </div>
                                </a>
                                <a href="/weather/tides/today/kingston-beach-tas-7050" title="Tide Times for KINGSTON BEACH, TAS">
                                    <div class="col-12 col-sm-6 col-md-6 col-lg-3 btn" style='text-align: left'>
                                        <span class="input-area-map-marker glyphicon glyphicon-map-marker" style="color:#C5C5C9"></span>&nbsp;Kingston Beach
                                    </div>
                                </a>
                        </div>
                        <h2 style="font-size:29pt;font-weight: bold;margin-left: 15px;margin-top: 7px">L</h2>
                        <div class="col-12">
                                <a href="/weather/tides/today/lady-barron-tas-7255" title="Tide Times for LADY BARRON, TAS">
                                    <div class="col-12 col-sm-6 col-md-6 col-lg-3 btn" style='text-align: left'>
                                        <span class="input-area-map-marker glyphicon glyphicon-map-marker" style="color:#C5C5C9"></span>&nbsp;Lady Barron
                                    </div>
                                </a>
                                <a href="/weather/tides/today/lady-barron-harbour-tas" title="Tide Times for LADY BARRON HARBOUR, TAS">
                                    <div class="col-12 col-sm-6 col-md-6 col-lg-3 btn" style='text-align: left'>
                                        <span class="input-area-map-marker glyphicon glyphicon-map-marker" style="color:#C5C5C9"></span>&nbsp;Lady Barron Harbour
                                    </div>
                                </a>
                                <a href="/weather/tides/today/larapuna-(eddystone-point)-tas" title="Tide Times for LARAPUNA (EDDYSTONE POINT), TAS">
                                    <div class="col-12 col-sm-6 col-md-6 col-lg-3 btn" style='text-align: left'>
                                        <span class="input-area-map-marker glyphicon glyphicon-map-marker" style="color:#C5C5C9"></span>&nbsp;Larapuna (Eddystone Point)
                                    </div>
                                </a>
                                <a href="/weather/tides/today/lauderdale-tas-7021" title="Tide Times for LAUDERDALE, TAS">
                                    <div class="col-12 col-sm-6 col-md-6 col-lg-3 btn" style='text-align: left'>
                                        <span class="input-area-map-marker glyphicon glyphicon-map-marker" style="color:#C5C5C9"></span>&nbsp;Lauderdale
                                    </div>
                                </a>
                                <a href="/weather/tides/today/launceston-tas-7250" title="Tide Times for LAUNCESTON, TAS">
                                    <div class="col-12 col-sm-6 col-md-6 col-lg-3 btn" style='text-align: left'>
                                        <span class="input-area-map-marker glyphicon glyphicon-map-marker" style="color:#C5C5C9"></span>&nbsp;Launceston
                                    </div>
                                </a>
                                <a href="/weather/tides/today/leeka-tas-7255" title="Tide Times for LEEKA, TAS">
                                    <div class="col-12 col-sm-6 col-md-6 col-lg-3 btn" style='text-align: left'>
                                        <span class="input-area-map-marker glyphicon glyphicon-map-marker" style="color:#C5C5C9"></span>&nbsp;Leeka
                                    </div>
                                </a>
                                <a href="/weather/tides/today/leith-tas-7315" title="Tide Times for LEITH, TAS">
                                    <div class="col-12 col-sm-6 col-md-6 col-lg-3 btn" style='text-align: left'>
                                        <span class="input-area-map-marker glyphicon glyphicon-map-marker" style="color:#C5C5C9"></span>&nbsp;Leith
                                    </div>
                                </a>
                                <a href="/weather/tides/today/lillico-tas-7310" title="Tide Times for LILLICO, TAS">
                                    <div class="col-12 col-sm-6 col-md-6 col-lg-3 btn" style='text-align: left'>
                                        <span class="input-area-map-marker glyphicon glyphicon-map-marker" style="color:#C5C5C9"></span>&nbsp;Lillico
                                    </div>
                                </a>
                                <a href="/weather/tides/today/limestone-bay-tas" title="Tide Times for LIMESTONE BAY, TAS">
                                    <div class="col-12 col-sm-6 col-md-6 col-lg-3 btn" style='text-align: left'>
                                        <span class="input-area-map-marker glyphicon glyphicon-map-marker" style="color:#C5C5C9"></span>&nbsp;Limestone Bay
                                    </div>
                                </a>
                                <a href="/weather/tides/today/loccota-tas-7255" title="Tide Times for LOCCOTA, TAS">
                                    <div class="col-12 col-sm-6 col-md-6 col-lg-3 btn" style='text-align: left'>
                                        <span class="input-area-map-marker glyphicon glyphicon-map-marker" style="color:#C5C5C9"></span>&nbsp;Loccota
                                    </div>
                                </a>
                                <a href="/weather/tides/today/long-reach-tas-7253" title="Tide Times for LONG REACH, TAS">
                                    <div class="col-12 col-sm-6 col-md-6 col-lg-3 btn" style='text-align: left'>
                                        <span class="input-area-map-marker glyphicon glyphicon-map-marker" style="color:#C5C5C9"></span>&nbsp;Long Reach
                                    </div>
                                </a>
                                <a href="/weather/tides/today/low-head-tas-7253" title="Tide Times for LOW HEAD, TAS">
                                    <div class="col-12 col-sm-6 col-md-6 col-lg-3 btn" style='text-align: left'>
                                        <span class="input-area-map-marker glyphicon glyphicon-map-marker" style="color:#C5C5C9"></span>&nbsp;Low Head
                                    </div>
                                </a>
                                <a href="/weather/tides/today/low-head-(coastal)-tas-7253" title="Tide Times for LOW HEAD (COASTAL), TAS">
                                    <div class="col-12 col-sm-6 col-md-6 col-lg-3 btn" style='text-align: left'>
                                        <span class="input-area-map-marker glyphicon glyphicon-map-marker" style="color:#C5C5C9"></span>&nbsp;Low Head
                                    </div>
                                </a>
                                <a href="/weather/tides/today/low-rocky-point-tas" title="Tide Times for LOW ROCKY POINT, TAS">
                                    <div class="col-12 col-sm-6 col-md-6 col-lg-3 btn" style='text-align: left'>
                                        <span class="input-area-map-marker glyphicon glyphicon-map-marker" style="color:#C5C5C9"></span>&nbsp;Low Rocky Point
                                    </div>
                                </a>
                                <a href="/weather/tides/today/lower-wattle-grove-tas-7109" title="Tide Times for LOWER WATTLE GROVE, TAS">
                                    <div class="col-12 col-sm-6 col-md-6 col-lg-3 btn" style='text-align: left'>
                                        <span class="input-area-map-marker glyphicon glyphicon-map-marker" style="color:#C5C5C9"></span>&nbsp;Lower Wattle Grove
                                    </div>
                                </a>
                                <a href="/weather/tides/today/lughrata-tas-7255" title="Tide Times for LUGHRATA, TAS">
                                    <div class="col-12 col-sm-6 col-md-6 col-lg-3 btn" style='text-align: left'>
                                        <span class="input-area-map-marker glyphicon glyphicon-map-marker" style="color:#C5C5C9"></span>&nbsp;Lughrata
                                    </div>
                                </a>
                                <a href="/weather/tides/today/lulworth-tas-7252" title="Tide Times for LULWORTH, TAS">
                                    <div class="col-12 col-sm-6 col-md-6 col-lg-3 btn" style='text-align: left'>
                                        <span class="input-area-map-marker glyphicon glyphicon-map-marker" style="color:#C5C5C9"></span>&nbsp;Lulworth
                                    </div>
                                </a>
                                <a href="/weather/tides/today/lymwood-tas-7256" title="Tide Times for LYMWOOD, TAS">
                                    <div class="col-12 col-sm-6 col-md-6 col-lg-3 btn" style='text-align: left'>
                                        <span class="input-area-map-marker glyphicon glyphicon-map-marker" style="color:#C5C5C9"></span>&nbsp;Lymwood
                                    </div>
                                </a>
                        </div>
                        <h2 style="font-size:29pt;font-weight: bold;margin-left: 15px;margin-top: 7px">M</h2>
                        <div class="col-12">
                                <a href="/weather/tides/today/maatsuyker-island-tas" title="Tide Times for MAATSUYKER ISLAND, TAS">
                                    <div class="col-12 col-sm-6 col-md-6 col-lg-3 btn" style='text-align: left'>
                                        <span class="input-area-map-marker glyphicon glyphicon-map-marker" style="color:#C5C5C9"></span>&nbsp;Maatsuyker Island
                                    </div>
                                </a>
                                <a href="/weather/tides/today/macquarie-heads-tas-7468" title="Tide Times for MACQUARIE HEADS, TAS">
                                    <div class="col-12 col-sm-6 col-md-6 col-lg-3 btn" style='text-align: left'>
                                        <span class="input-area-map-marker glyphicon glyphicon-map-marker" style="color:#C5C5C9"></span>&nbsp;Macquarie Heads
                                    </div>
                                </a>
                                <a href="/weather/tides/today/maria-island-tas" title="Tide Times for MARIA ISLAND, TAS">
                                    <div class="col-12 col-sm-6 col-md-6 col-lg-3 btn" style='text-align: left'>
                                        <span class="input-area-map-marker glyphicon glyphicon-map-marker" style="color:#C5C5C9"></span>&nbsp;Maria Island
                                    </div>
                                </a>
                                <a href="/weather/tides/today/marion-bay-tas-7175" title="Tide Times for MARION BAY, TAS">
                                    <div class="col-12 col-sm-6 col-md-6 col-lg-3 btn" style='text-align: left'>
                                        <span class="input-area-map-marker glyphicon glyphicon-map-marker" style="color:#C5C5C9"></span>&nbsp;Marion Bay
                                    </div>
                                </a>
                                <a href="/weather/tides/today/memana-tas-7255" title="Tide Times for MEMANA, TAS">
                                    <div class="col-12 col-sm-6 col-md-6 col-lg-3 btn" style='text-align: left'>
                                        <span class="input-area-map-marker glyphicon glyphicon-map-marker" style="color:#C5C5C9"></span>&nbsp;Memana
                                    </div>
                                </a>
                                <a href="/weather/tides/today/midway-point-tas-7171" title="Tide Times for MIDWAY POINT, TAS">
                                    <div class="col-12 col-sm-6 col-md-6 col-lg-3 btn" style='text-align: left'>
                                        <span class="input-area-map-marker glyphicon glyphicon-map-marker" style="color:#C5C5C9"></span>&nbsp;Midway Point
                                    </div>
                                </a>
                                <a href="/weather/tides/today/montagu-bay-tas-7018" title="Tide Times for MONTAGU BAY, TAS">
                                    <div class="col-12 col-sm-6 col-md-6 col-lg-3 btn" style='text-align: left'>
                                        <span class="input-area-map-marker glyphicon glyphicon-map-marker" style="color:#C5C5C9"></span>&nbsp;Montagu Bay
                                    </div>
                                </a>
                                <a href="/weather/tides/today/montello-tas-7320" title="Tide Times for MONTELLO, TAS">
                                    <div class="col-12 col-sm-6 col-md-6 col-lg-3 btn" style='text-align: left'>
                                        <span class="input-area-map-marker glyphicon glyphicon-map-marker" style="color:#C5C5C9"></span>&nbsp;Montello
                                    </div>
                                </a>
                                <a href="/weather/tides/today/musselroe-bay-tas-7264" title="Tide Times for MUSSELROE BAY, TAS">
                                    <div class="col-12 col-sm-6 col-md-6 col-lg-3 btn" style='text-align: left'>
                                        <span class="input-area-map-marker glyphicon glyphicon-map-marker" style="color:#C5C5C9"></span>&nbsp;Musselroe Bay
                                    </div>
                                </a>
                        </div>
                        <h2 style="font-size:29pt;font-weight: bold;margin-left: 15px;margin-top: 7px">N</h2>
                        <div class="col-12">
                                <a href="/weather/tides/today/naracoopa-tas-7256" title="Tide Times for NARACOOPA, TAS">
                                    <div class="col-12 col-sm-6 col-md-6 col-lg-3 btn" style='text-align: left'>
                                        <span class="input-area-map-marker glyphicon glyphicon-map-marker" style="color:#C5C5C9"></span>&nbsp;Naracoopa
                                    </div>
                                </a>
                                <a href="/weather/tides/today/nelson-bay-tas-7330" title="Tide Times for NELSON BAY, TAS">
                                    <div class="col-12 col-sm-6 col-md-6 col-lg-3 btn" style='text-align: left'>
                                        <span class="input-area-map-marker glyphicon glyphicon-map-marker" style="color:#C5C5C9"></span>&nbsp;Nelson Bay
                                    </div>
                                </a>
                                <a href="/weather/tides/today/new-year-island-tas" title="Tide Times for NEW YEAR ISLAND, TAS">
                                    <div class="col-12 col-sm-6 col-md-6 col-lg-3 btn" style='text-align: left'>
                                        <span class="input-area-map-marker glyphicon glyphicon-map-marker" style="color:#C5C5C9"></span>&nbsp;New Year Island
                                    </div>
                                </a>
                                <a href="/weather/tides/today/tas-north-coast" title="Tide Times for NORTH COAST (COASTAL), TAS">
                                    <div class="col-12 col-sm-6 col-md-6 col-lg-3 btn" style='text-align: left'>
                                        <span class="input-area-map-marker glyphicon glyphicon-map-marker" style="color:#C5C5C9"></span>&nbsp;North Coast
                                    </div>
                                </a>
                                <a href="/weather/tides/today/northdown-tas-7307" title="Tide Times for NORTHDOWN, TAS">
                                    <div class="col-12 col-sm-6 col-md-6 col-lg-3 btn" style='text-align: left'>
                                        <span class="input-area-map-marker glyphicon glyphicon-map-marker" style="color:#C5C5C9"></span>&nbsp;Northdown
                                    </div>
                                </a>
                                <a href="/weather/tides/today/nugara-tas-7256" title="Tide Times for NUGARA, TAS">
                                    <div class="col-12 col-sm-6 col-md-6 col-lg-3 btn" style='text-align: left'>
                                        <span class="input-area-map-marker glyphicon glyphicon-map-marker" style="color:#C5C5C9"></span>&nbsp;Nugara
                                    </div>
                                </a>
                        </div>
                        <h2 style="font-size:29pt;font-weight: bold;margin-left: 15px;margin-top: 7px">O</h2>
                        <div class="col-12">
                                <a href="/weather/tides/today/ocean-vista-tas-7320" title="Tide Times for OCEAN VISTA, TAS">
                                    <div class="col-12 col-sm-6 col-md-6 col-lg-3 btn" style='text-align: left'>
                                        <span class="input-area-map-marker glyphicon glyphicon-map-marker" style="color:#C5C5C9"></span>&nbsp;Ocean Vista
                                    </div>
                                </a>
                                <a href="/weather/tides/today/old-beach-tas-7017" title="Tide Times for OLD BEACH, TAS">
                                    <div class="col-12 col-sm-6 col-md-6 col-lg-3 btn" style='text-align: left'>
                                        <span class="input-area-map-marker glyphicon glyphicon-map-marker" style="color:#C5C5C9"></span>&nbsp;Old Beach
                                    </div>
                                </a>
                                <a href="/weather/tides/today/opossum-bay-tas-7023" title="Tide Times for OPOSSUM BAY, TAS">
                                    <div class="col-12 col-sm-6 col-md-6 col-lg-3 btn" style='text-align: left'>
                                        <span class="input-area-map-marker glyphicon glyphicon-map-marker" style="color:#C5C5C9"></span>&nbsp;Opossum Bay
                                    </div>
                                </a>
                        </div>
                        <h2 style="font-size:29pt;font-weight: bold;margin-left: 15px;margin-top: 7px">P</h2>
                        <div class="col-12">
                                <a href="/weather/tides/today/palana-tas-7255" title="Tide Times for PALANA, TAS">
                                    <div class="col-12 col-sm-6 col-md-6 col-lg-3 btn" style='text-align: left'>
                                        <span class="input-area-map-marker glyphicon glyphicon-map-marker" style="color:#C5C5C9"></span>&nbsp;Palana
                                    </div>
                                </a>
                                <a href="/weather/tides/today/park-grove-tas-7320" title="Tide Times for PARK GROVE, TAS">
                                    <div class="col-12 col-sm-6 col-md-6 col-lg-3 btn" style='text-align: left'>
                                        <span class="input-area-map-marker glyphicon glyphicon-map-marker" style="color:#C5C5C9"></span>&nbsp;Park Grove
                                    </div>
                                </a>
                                <a href="/weather/tides/today/parklands-tas-7320" title="Tide Times for PARKLANDS, TAS">
                                    <div class="col-12 col-sm-6 col-md-6 col-lg-3 btn" style='text-align: left'>
                                        <span class="input-area-map-marker glyphicon glyphicon-map-marker" style="color:#C5C5C9"></span>&nbsp;Parklands
                                    </div>
                                </a>
                                <a href="/weather/tides/today/parsons-bay-tas" title="Tide Times for PARSONS BAY, TAS">
                                    <div class="col-12 col-sm-6 col-md-6 col-lg-3 btn" style='text-align: left'>
                                        <span class="input-area-map-marker glyphicon glyphicon-map-marker" style="color:#C5C5C9"></span>&nbsp;Parsons Bay
                                    </div>
                                </a>
                                <a href="/weather/tides/today/pearshape-tas-7256" title="Tide Times for PEARSHAPE, TAS">
                                    <div class="col-12 col-sm-6 col-md-6 col-lg-3 btn" style='text-align: left'>
                                        <span class="input-area-map-marker glyphicon glyphicon-map-marker" style="color:#C5C5C9"></span>&nbsp;Pearshape
                                    </div>
                                </a>
                                <a href="/weather/tides/today/pegarah-tas-7256" title="Tide Times for PEGARAH, TAS">
                                    <div class="col-12 col-sm-6 col-md-6 col-lg-3 btn" style='text-align: left'>
                                        <span class="input-area-map-marker glyphicon glyphicon-map-marker" style="color:#C5C5C9"></span>&nbsp;Pegarah
                                    </div>
                                </a>
                                <a href="/weather/tides/today/petcheys-bay-tas-7109" title="Tide Times for PETCHEYS BAY, TAS">
                                    <div class="col-12 col-sm-6 col-md-6 col-lg-3 btn" style='text-align: left'>
                                        <span class="input-area-map-marker glyphicon glyphicon-map-marker" style="color:#C5C5C9"></span>&nbsp;Petcheys Bay
                                    </div>
                                </a>
                                <a href="/weather/tides/today/pieman-river-tas" title="Tide Times for PIEMAN RIVER, TAS">
                                    <div class="col-12 col-sm-6 col-md-6 col-lg-3 btn" style='text-align: left'>
                                        <span class="input-area-map-marker glyphicon glyphicon-map-marker" style="color:#C5C5C9"></span>&nbsp;Pieman River
                                    </div>
                                </a>
                                <a href="/weather/tides/today/pirates-bay-tas" title="Tide Times for PIRATES BAY, TAS">
                                    <div class="col-12 col-sm-6 col-md-6 col-lg-3 btn" style='text-align: left'>
                                        <span class="input-area-map-marker glyphicon glyphicon-map-marker" style="color:#C5C5C9"></span>&nbsp;Pirates Bay
                                    </div>
                                </a>
                                <a href="/weather/tides/today/planter-beach-tas" title="Tide Times for PLANTER BEACH, TAS">
                                    <div class="col-12 col-sm-6 col-md-6 col-lg-3 btn" style='text-align: left'>
                                        <span class="input-area-map-marker glyphicon glyphicon-map-marker" style="color:#C5C5C9"></span>&nbsp;Planter Beach
                                    </div>
                                </a>
                                <a href="/weather/tides/today/police-point-tas-7116" title="Tide Times for POLICE POINT, TAS">
                                    <div class="col-12 col-sm-6 col-md-6 col-lg-3 btn" style='text-align: left'>
                                        <span class="input-area-map-marker glyphicon glyphicon-map-marker" style="color:#C5C5C9"></span>&nbsp;Police Point
                                    </div>
                                </a>
                                <a href="/weather/tides/today/port-arthur-tas-7182" title="Tide Times for PORT ARTHUR, TAS">
                                    <div class="col-12 col-sm-6 col-md-6 col-lg-3 btn" style='text-align: left'>
                                        <span class="input-area-map-marker glyphicon glyphicon-map-marker" style="color:#C5C5C9"></span>&nbsp;Port Arthur
                                    </div>
                                </a>
                                <a href="/weather/tides/today/port-huon-tas-7116" title="Tide Times for PORT HUON, TAS">
                                    <div class="col-12 col-sm-6 col-md-6 col-lg-3 btn" style='text-align: left'>
                                        <span class="input-area-map-marker glyphicon glyphicon-map-marker" style="color:#C5C5C9"></span>&nbsp;Port Huon
                                    </div>
                                </a>
                                <a href="/weather/tides/today/port-latta-tas-7321" title="Tide Times for PORT LATTA, TAS">
                                    <div class="col-12 col-sm-6 col-md-6 col-lg-3 btn" style='text-align: left'>
                                        <span class="input-area-map-marker glyphicon glyphicon-map-marker" style="color:#C5C5C9"></span>&nbsp;Port Latta
                                    </div>
                                </a>
                                <a href="/weather/tides/today/port-sorell-tas-7307" title="Tide Times for PORT SORELL, TAS">
                                    <div class="col-12 col-sm-6 col-md-6 col-lg-3 btn" style='text-align: left'>
                                        <span class="input-area-map-marker glyphicon glyphicon-map-marker" style="color:#C5C5C9"></span>&nbsp;Port Sorell
                                    </div>
                                </a>
                                <a href="/weather/tides/today/pot-boil-point-tas" title="Tide Times for POT BOIL POINT, TAS">
                                    <div class="col-12 col-sm-6 col-md-6 col-lg-3 btn" style='text-align: left'>
                                        <span class="input-area-map-marker glyphicon glyphicon-map-marker" style="color:#C5C5C9"></span>&nbsp;Pot Boil Point
                                    </div>
                                </a>
                                <a href="/weather/tides/today/preservation-bay-tas-7316" title="Tide Times for PRESERVATION BAY, TAS">
                                    <div class="col-12 col-sm-6 col-md-6 col-lg-3 btn" style='text-align: left'>
                                        <span class="input-area-map-marker glyphicon glyphicon-map-marker" style="color:#C5C5C9"></span>&nbsp;Preservation Bay
                                    </div>
                                </a>
                                <a href="/weather/tides/today/primrose-sands-tas-7173" title="Tide Times for PRIMROSE SANDS, TAS">
                                    <div class="col-12 col-sm-6 col-md-6 col-lg-3 btn" style='text-align: left'>
                                        <span class="input-area-map-marker glyphicon glyphicon-map-marker" style="color:#C5C5C9"></span>&nbsp;Primrose Sands
                                    </div>
                                </a>
                        </div>
                        <h2 style="font-size:29pt;font-weight: bold;margin-left: 15px;margin-top: 7px">R</h2>
                        <div class="col-12">
                                <a href="/weather/tides/today/randalls-bay-tas-7112" title="Tide Times for RANDALLS BAY, TAS">
                                    <div class="col-12 col-sm-6 col-md-6 col-lg-3 btn" style='text-align: left'>
                                        <span class="input-area-map-marker glyphicon glyphicon-map-marker" style="color:#C5C5C9"></span>&nbsp;Randalls Bay
                                    </div>
                                </a>
                                <a href="/weather/tides/today/recherche-bay-tas" title="Tide Times for RECHERCHE BAY, TAS">
                                    <div class="col-12 col-sm-6 col-md-6 col-lg-3 btn" style='text-align: left'>
                                        <span class="input-area-map-marker glyphicon glyphicon-map-marker" style="color:#C5C5C9"></span>&nbsp;Recherche Bay
                                    </div>
                                </a>
                                <a href="/weather/tides/today/reekara-tas-7256" title="Tide Times for REEKARA, TAS">
                                    <div class="col-12 col-sm-6 col-md-6 col-lg-3 btn" style='text-align: left'>
                                        <span class="input-area-map-marker glyphicon glyphicon-map-marker" style="color:#C5C5C9"></span>&nbsp;Reekara
                                    </div>
                                </a>
                                <a href="/weather/tides/today/roches-beach-tas-7170" title="Tide Times for ROCHES BEACH, TAS">
                                    <div class="col-12 col-sm-6 col-md-6 col-lg-3 btn" style='text-align: left'>
                                        <span class="input-area-map-marker glyphicon glyphicon-map-marker" style="color:#C5C5C9"></span>&nbsp;Roches Beach
                                    </div>
                                </a>
                                <a href="/weather/tides/today/rocky-cape-tas-7321" title="Tide Times for ROCKY CAPE, TAS">
                                    <div class="col-12 col-sm-6 col-md-6 col-lg-3 btn" style='text-align: left'>
                                        <span class="input-area-map-marker glyphicon glyphicon-map-marker" style="color:#C5C5C9"></span>&nbsp;Rocky Cape
                                    </div>
                                </a>
                                <a href="/weather/tides/today/rose-bay-tas-7015" title="Tide Times for ROSE BAY, TAS">
                                    <div class="col-12 col-sm-6 col-md-6 col-lg-3 btn" style='text-align: left'>
                                        <span class="input-area-map-marker glyphicon glyphicon-map-marker" style="color:#C5C5C9"></span>&nbsp;Rose Bay
                                    </div>
                                </a>
                                <a href="/weather/tides/today/round-hill-tas-7320" title="Tide Times for ROUND HILL, TAS">
                                    <div class="col-12 col-sm-6 col-md-6 col-lg-3 btn" style='text-align: left'>
                                        <span class="input-area-map-marker glyphicon glyphicon-map-marker" style="color:#C5C5C9"></span>&nbsp;Round Hill
                                    </div>
                                </a>
                                <a href="/weather/tides/today/rowella-tas-7270" title="Tide Times for ROWELLA, TAS">
                                    <div class="col-12 col-sm-6 col-md-6 col-lg-3 btn" style='text-align: left'>
                                        <span class="input-area-map-marker glyphicon glyphicon-map-marker" style="color:#C5C5C9"></span>&nbsp;Rowella
                                    </div>
                                </a>
                        </div>
                        <h2 style="font-size:29pt;font-weight: bold;margin-left: 15px;margin-top: 7px">S</h2>
                        <div class="col-12">
                                <a href="/weather/tides/today/sandford-tas-7020" title="Tide Times for SANDFORD, TAS">
                                    <div class="col-12 col-sm-6 col-md-6 col-lg-3 btn" style='text-align: left'>
                                        <span class="input-area-map-marker glyphicon glyphicon-map-marker" style="color:#C5C5C9"></span>&nbsp;Sandford
                                    </div>
                                </a>
                                <a href="/weather/tides/today/sandy-bay-tas-7005" title="Tide Times for SANDY BAY, TAS">
                                    <div class="col-12 col-sm-6 col-md-6 col-lg-3 btn" style='text-align: left'>
                                        <span class="input-area-map-marker glyphicon glyphicon-map-marker" style="color:#C5C5C9"></span>&nbsp;Sandy Bay
                                    </div>
                                </a>
                                <a href="/weather/tides/today/scamander-tas-7215" title="Tide Times for SCAMANDER, TAS">
                                    <div class="col-12 col-sm-6 col-md-6 col-lg-3 btn" style='text-align: left'>
                                        <span class="input-area-map-marker glyphicon glyphicon-map-marker" style="color:#C5C5C9"></span>&nbsp;Scamander
                                    </div>
                                </a>
                                <a href="/weather/tides/today/sea-elephant-tas-7256" title="Tide Times for SEA ELEPHANT, TAS">
                                    <div class="col-12 col-sm-6 col-md-6 col-lg-3 btn" style='text-align: left'>
                                        <span class="input-area-map-marker glyphicon glyphicon-map-marker" style="color:#C5C5C9"></span>&nbsp;Sea Elephant
                                    </div>
                                </a>
                                <a href="/weather/tides/today/seal-bay-tas" title="Tide Times for SEAL BAY, TAS">
                                    <div class="col-12 col-sm-6 col-md-6 col-lg-3 btn" style='text-align: left'>
                                        <span class="input-area-map-marker glyphicon glyphicon-map-marker" style="color:#C5C5C9"></span>&nbsp;Seal Bay
                                    </div>
                                </a>
                                <a href="/weather/tides/today/seven-mile-beach-tas-7170" title="Tide Times for SEVEN MILE BEACH, TAS">
                                    <div class="col-12 col-sm-6 col-md-6 col-lg-3 btn" style='text-align: left'>
                                        <span class="input-area-map-marker glyphicon glyphicon-map-marker" style="color:#C5C5C9"></span>&nbsp;Seven Mile Beach
                                    </div>
                                </a>
                                <a href="/weather/tides/today/seymour-tas-7215" title="Tide Times for SEYMOUR, TAS">
                                    <div class="col-12 col-sm-6 col-md-6 col-lg-3 btn" style='text-align: left'>
                                        <span class="input-area-map-marker glyphicon glyphicon-map-marker" style="color:#C5C5C9"></span>&nbsp;Seymour
                                    </div>
                                </a>
                                <a href="/weather/tides/today/shearwater-tas-7307" title="Tide Times for SHEARWATER, TAS">
                                    <div class="col-12 col-sm-6 col-md-6 col-lg-3 btn" style='text-align: left'>
                                        <span class="input-area-map-marker glyphicon glyphicon-map-marker" style="color:#C5C5C9"></span>&nbsp;Shearwater
                                    </div>
                                </a>
                                <a href="/weather/tides/today/simpsons-bay-tas-7150" title="Tide Times for SIMPSONS BAY, TAS">
                                    <div class="col-12 col-sm-6 col-md-6 col-lg-3 btn" style='text-align: left'>
                                        <span class="input-area-map-marker glyphicon glyphicon-map-marker" style="color:#C5C5C9"></span>&nbsp;Simpsons Bay
                                    </div>
                                </a>
                                <a href="/weather/tides/today/sisters-beach-tas-7321" title="Tide Times for SISTERS BEACH, TAS">
                                    <div class="col-12 col-sm-6 col-md-6 col-lg-3 btn" style='text-align: left'>
                                        <span class="input-area-map-marker glyphicon glyphicon-map-marker" style="color:#C5C5C9"></span>&nbsp;Sisters Beach
                                    </div>
                                </a>
                                <a href="/weather/tides/today/sleepy-beach-tas" title="Tide Times for SLEEPY BEACH, TAS">
                                    <div class="col-12 col-sm-6 col-md-6 col-lg-3 btn" style='text-align: left'>
                                        <span class="input-area-map-marker glyphicon glyphicon-map-marker" style="color:#C5C5C9"></span>&nbsp;Sleepy Beach
                                    </div>
                                </a>
                                <a href="/weather/tides/today/somerset-beach-tas" title="Tide Times for SOMERSET BEACH, TAS">
                                    <div class="col-12 col-sm-6 col-md-6 col-lg-3 btn" style='text-align: left'>
                                        <span class="input-area-map-marker glyphicon glyphicon-map-marker" style="color:#C5C5C9"></span>&nbsp;Somerset Beach
                                    </div>
                                </a>
                                <a href="/weather/tides/today/south-arm-tas-7022" title="Tide Times for SOUTH ARM, TAS">
                                    <div class="col-12 col-sm-6 col-md-6 col-lg-3 btn" style='text-align: left'>
                                        <span class="input-area-map-marker glyphicon glyphicon-map-marker" style="color:#C5C5C9"></span>&nbsp;South Arm
                                    </div>
                                </a>
                                <a href="/weather/tides/today/south-burnie-tas-7320" title="Tide Times for SOUTH BURNIE, TAS">
                                    <div class="col-12 col-sm-6 col-md-6 col-lg-3 btn" style='text-align: left'>
                                        <span class="input-area-map-marker glyphicon glyphicon-map-marker" style="color:#C5C5C9"></span>&nbsp;South Burnie
                                    </div>
                                </a>
                                <a href="/weather/tides/today/southport-tas-7109" title="Tide Times for SOUTHPORT, TAS">
                                    <div class="col-12 col-sm-6 col-md-6 col-lg-3 btn" style='text-align: left'>
                                        <span class="input-area-map-marker glyphicon glyphicon-map-marker" style="color:#C5C5C9"></span>&nbsp;Southport
                                    </div>
                                </a>
                                <a href="/weather/tides/today/southport-jetty-tas" title="Tide Times for SOUTHPORT JETTY, TAS">
                                    <div class="col-12 col-sm-6 col-md-6 col-lg-3 btn" style='text-align: left'>
                                        <span class="input-area-map-marker glyphicon glyphicon-map-marker" style="color:#C5C5C9"></span>&nbsp;Southport Jetty
                                    </div>
                                </a>
                                <a href="/weather/tides/today/southport-lagoon-tas-7109" title="Tide Times for SOUTHPORT LAGOON, TAS">
                                    <div class="col-12 col-sm-6 col-md-6 col-lg-3 btn" style='text-align: left'>
                                        <span class="input-area-map-marker glyphicon glyphicon-map-marker" style="color:#C5C5C9"></span>&nbsp;Southport Lagoon
                                    </div>
                                </a>
                                <a href="/weather/tides/today/spring-bay-tas" title="Tide Times for SPRING BAY, TAS">
                                    <div class="col-12 col-sm-6 col-md-6 col-lg-3 btn" style='text-align: left'>
                                        <span class="input-area-map-marker glyphicon glyphicon-map-marker" style="color:#C5C5C9"></span>&nbsp;Spring Bay
                                    </div>
                                </a>
                                <a href="/weather/tides/today/spring-beach-tas-7190" title="Tide Times for SPRING BEACH, TAS">
                                    <div class="col-12 col-sm-6 col-md-6 col-lg-3 btn" style='text-align: left'>
                                        <span class="input-area-map-marker glyphicon glyphicon-map-marker" style="color:#C5C5C9"></span>&nbsp;Spring Beach
                                    </div>
                                </a>
                                <a href="/weather/tides/today/squeaking-point-tas-7307" title="Tide Times for SQUEAKING POINT, TAS">
                                    <div class="col-12 col-sm-6 col-md-6 col-lg-3 btn" style='text-align: left'>
                                        <span class="input-area-map-marker glyphicon glyphicon-map-marker" style="color:#C5C5C9"></span>&nbsp;Squeaking Point
                                    </div>
                                </a>
                                <a href="/weather/tides/today/st-helens-tas-7216" title="Tide Times for ST HELENS, TAS">
                                    <div class="col-12 col-sm-6 col-md-6 col-lg-3 btn" style='text-align: left'>
                                        <span class="input-area-map-marker glyphicon glyphicon-map-marker" style="color:#C5C5C9"></span>&nbsp;St Helens
                                    </div>
                                </a>
                                <a href="/weather/tides/today/stack-island-tas" title="Tide Times for STACK ISLAND, TAS">
                                    <div class="col-12 col-sm-6 col-md-6 col-lg-3 btn" style='text-align: left'>
                                        <span class="input-area-map-marker glyphicon glyphicon-map-marker" style="color:#C5C5C9"></span>&nbsp;Stack Island
                                    </div>
                                </a>
                                <a href="/weather/tides/today/stanley-tas-7331" title="Tide Times for STANLEY, TAS">
                                    <div class="col-12 col-sm-6 col-md-6 col-lg-3 btn" style='text-align: left'>
                                        <span class="input-area-map-marker glyphicon glyphicon-map-marker" style="color:#C5C5C9"></span>&nbsp;Stanley
                                    </div>
                                </a>
                                <a href="/weather/tides/today/stony-head-tas-7252" title="Tide Times for STONY HEAD, TAS">
                                    <div class="col-12 col-sm-6 col-md-6 col-lg-3 btn" style='text-align: left'>
                                        <span class="input-area-map-marker glyphicon glyphicon-map-marker" style="color:#C5C5C9"></span>&nbsp;Stony Head
                                    </div>
                                </a>
                                <a href="/weather/tides/today/strahan-tas-7468" title="Tide Times for STRAHAN, TAS">
                                    <div class="col-12 col-sm-6 col-md-6 col-lg-3 btn" style='text-align: left'>
                                        <span class="input-area-map-marker glyphicon glyphicon-map-marker" style="color:#C5C5C9"></span>&nbsp;Strahan
                                    </div>
                                </a>
                                <a href="/weather/tides/today/strzelecki-tas-7255" title="Tide Times for STRZELECKI, TAS">
                                    <div class="col-12 col-sm-6 col-md-6 col-lg-3 btn" style='text-align: left'>
                                        <span class="input-area-map-marker glyphicon glyphicon-map-marker" style="color:#C5C5C9"></span>&nbsp;Strzelecki
                                    </div>
                                </a>
                                <a href="/weather/tides/today/sulphur-creek-tas-7316" title="Tide Times for SULPHUR CREEK, TAS">
                                    <div class="col-12 col-sm-6 col-md-6 col-lg-3 btn" style='text-align: left'>
                                        <span class="input-area-map-marker glyphicon glyphicon-map-marker" style="color:#C5C5C9"></span>&nbsp;Sulphur Creek
                                    </div>
                                </a>
                                <a href="/weather/tides/today/surges-bay-tas-7116" title="Tide Times for SURGES BAY, TAS">
                                    <div class="col-12 col-sm-6 col-md-6 col-lg-3 btn" style='text-align: left'>
                                        <span class="input-area-map-marker glyphicon glyphicon-map-marker" style="color:#C5C5C9"></span>&nbsp;Surges Bay
                                    </div>
                                </a>
                                <a href="/weather/tides/today/surprise-bay-tas-7256" title="Tide Times for SURPRISE BAY, TAS">
                                    <div class="col-12 col-sm-6 col-md-6 col-lg-3 btn" style='text-align: left'>
                                        <span class="input-area-map-marker glyphicon glyphicon-map-marker" style="color:#C5C5C9"></span>&nbsp;Surprise Bay
                                    </div>
                                </a>
                                <a href="/weather/tides/today/surveyors-bay-tas-7116" title="Tide Times for SURVEYORS BAY, TAS">
                                    <div class="col-12 col-sm-6 col-md-6 col-lg-3 btn" style='text-align: left'>
                                        <span class="input-area-map-marker glyphicon glyphicon-map-marker" style="color:#C5C5C9"></span>&nbsp;Surveyors Bay
                                    </div>
                                </a>
                                <a href="/weather/tides/today/swan-island-tas" title="Tide Times for SWAN ISLAND, TAS">
                                    <div class="col-12 col-sm-6 col-md-6 col-lg-3 btn" style='text-align: left'>
                                        <span class="input-area-map-marker glyphicon glyphicon-map-marker" style="color:#C5C5C9"></span>&nbsp;Swan Island
                                    </div>
                                </a>
                                <a href="/weather/tides/today/swan-point-tas-7275" title="Tide Times for SWAN POINT, TAS">
                                    <div class="col-12 col-sm-6 col-md-6 col-lg-3 btn" style='text-align: left'>
                                        <span class="input-area-map-marker glyphicon glyphicon-map-marker" style="color:#C5C5C9"></span>&nbsp;Swan Point
                                    </div>
                                </a>
                                <a href="/weather/tides/today/swimming-beach-tas" title="Tide Times for SWIMMING BEACH, TAS">
                                    <div class="col-12 col-sm-6 col-md-6 col-lg-3 btn" style='text-align: left'>
                                        <span class="input-area-map-marker glyphicon glyphicon-map-marker" style="color:#C5C5C9"></span>&nbsp;Swimming Beach
                                    </div>
                                </a>
                        </div>
                        <h2 style="font-size:29pt;font-weight: bold;margin-left: 15px;margin-top: 7px">T</h2>
                        <div class="col-12">
                                <a href="/weather/tides/today/table-cape-tas-7325" title="Tide Times for TABLE CAPE, TAS">
                                    <div class="col-12 col-sm-6 col-md-6 col-lg-3 btn" style='text-align: left'>
                                        <span class="input-area-map-marker glyphicon glyphicon-map-marker" style="color:#C5C5C9"></span>&nbsp;Table Cape
                                    </div>
                                </a>
                                <a href="/weather/tides/today/taroona-tas-7053" title="Tide Times for TAROONA, TAS">
                                    <div class="col-12 col-sm-6 col-md-6 col-lg-3 btn" style='text-align: left'>
                                        <span class="input-area-map-marker glyphicon glyphicon-map-marker" style="color:#C5C5C9"></span>&nbsp;Taroona
                                    </div>
                                </a>
                                <a href="/weather/tides/today/tasman-island-tas-7001" title="Tide Times for TASMAN ISLAND, TAS">
                                    <div class="col-12 col-sm-6 col-md-6 col-lg-3 btn" style='text-align: left'>
                                        <span class="input-area-map-marker glyphicon glyphicon-map-marker" style="color:#C5C5C9"></span>&nbsp;Tasman Island
                                    </div>
                                </a>
                                <a href="/weather/tides/today/the-gardens-tas-7216" title="Tide Times for THE GARDENS, TAS">
                                    <div class="col-12 col-sm-6 col-md-6 col-lg-3 btn" style='text-align: left'>
                                        <span class="input-area-map-marker glyphicon glyphicon-map-marker" style="color:#C5C5C9"></span>&nbsp;The Gardens
                                    </div>
                                </a>
                                <a href="/weather/tides/today/three-hummock-island-tas" title="Tide Times for THREE HUMMOCK ISLAND, TAS">
                                    <div class="col-12 col-sm-6 col-md-6 col-lg-3 btn" style='text-align: left'>
                                        <span class="input-area-map-marker glyphicon glyphicon-map-marker" style="color:#C5C5C9"></span>&nbsp;Three Hummock Island
                                    </div>
                                </a>
                                <a href="/weather/tides/today/tomahawk-tas-7262" title="Tide Times for TOMAHAWK, TAS">
                                    <div class="col-12 col-sm-6 col-md-6 col-lg-3 btn" style='text-align: left'>
                                        <span class="input-area-map-marker glyphicon glyphicon-map-marker" style="color:#C5C5C9"></span>&nbsp;Tomahawk
                                    </div>
                                </a>
                                <a href="/weather/tides/today/trial-harbour-tas-7469" title="Tide Times for TRIAL HARBOUR, TAS">
                                    <div class="col-12 col-sm-6 col-md-6 col-lg-3 btn" style='text-align: left'>
                                        <span class="input-area-map-marker glyphicon glyphicon-map-marker" style="color:#C5C5C9"></span>&nbsp;Trial Harbour
                                    </div>
                                </a>
                                <a href="/weather/tides/today/turners-beach-tas-7315" title="Tide Times for TURNERS BEACH, TAS">
                                    <div class="col-12 col-sm-6 col-md-6 col-lg-3 btn" style='text-align: left'>
                                        <span class="input-area-map-marker glyphicon glyphicon-map-marker" style="color:#C5C5C9"></span>&nbsp;Turners Beach
                                    </div>
                                </a>
                        </div>
                        <h2 style="font-size:29pt;font-weight: bold;margin-left: 15px;margin-top: 7px">U</h2>
                        <div class="col-12">
                                <a href="/weather/tides/today/ulverstone-tas-7315" title="Tide Times for ULVERSTONE, TAS">
                                    <div class="col-12 col-sm-6 col-md-6 col-lg-3 btn" style='text-align: left'>
                                        <span class="input-area-map-marker glyphicon glyphicon-map-marker" style="color:#C5C5C9"></span>&nbsp;Ulverstone
                                    </div>
                                </a>
                        </div>
                        <h2 style="font-size:29pt;font-weight: bold;margin-left: 15px;margin-top: 7px">V</h2>
                        <div class="col-12">
                                <a href="/weather/tides/today/verona-sands-tas-7112" title="Tide Times for VERONA SANDS, TAS">
                                    <div class="col-12 col-sm-6 col-md-6 col-lg-3 btn" style='text-align: left'>
                                        <span class="input-area-map-marker glyphicon glyphicon-map-marker" style="color:#C5C5C9"></span>&nbsp;Verona Sands
                                    </div>
                                </a>
                        </div>
                        <h2 style="font-size:29pt;font-weight: bold;margin-left: 15px;margin-top: 7px">W</h2>
                        <div class="col-12">
                                <a href="/weather/tides/today/waterhouse-island-tas" title="Tide Times for WATERHOUSE ISLAND, TAS">
                                    <div class="col-12 col-sm-6 col-md-6 col-lg-3 btn" style='text-align: left'>
                                        <span class="input-area-map-marker glyphicon glyphicon-map-marker" style="color:#C5C5C9"></span>&nbsp;Waterhouse Island
                                    </div>
                                </a>
                                <a href="/weather/tides/today/waterloo-tas-7109" title="Tide Times for WATERLOO, TAS">
                                    <div class="col-12 col-sm-6 col-md-6 col-lg-3 btn" style='text-align: left'>
                                        <span class="input-area-map-marker glyphicon glyphicon-map-marker" style="color:#C5C5C9"></span>&nbsp;Waterloo
                                    </div>
                                </a>
                                <a href="/weather/tides/today/wattle-grove-tas-7109" title="Tide Times for WATTLE GROVE, TAS">
                                    <div class="col-12 col-sm-6 col-md-6 col-lg-3 btn" style='text-align: left'>
                                        <span class="input-area-map-marker glyphicon glyphicon-map-marker" style="color:#C5C5C9"></span>&nbsp;Wattle Grove
                                    </div>
                                </a>
                                <a href="/weather/tides/today/tas-west-coast" title="Tide Times for WEST COAST (COASTAL), TAS">
                                    <div class="col-12 col-sm-6 col-md-6 col-lg-3 btn" style='text-align: left'>
                                        <span class="input-area-map-marker glyphicon glyphicon-map-marker" style="color:#C5C5C9"></span>&nbsp;West Coast
                                    </div>
                                </a>
                                <a href="/weather/tides/today/west-ulverstone-tas-7315" title="Tide Times for WEST ULVERSTONE, TAS">
                                    <div class="col-12 col-sm-6 col-md-6 col-lg-3 btn" style='text-align: left'>
                                        <span class="input-area-map-marker glyphicon glyphicon-map-marker" style="color:#C5C5C9"></span>&nbsp;West Ulverstone
                                    </div>
                                </a>
                                <a href="/weather/tides/today/weymouth-tas-7252" title="Tide Times for WEYMOUTH, TAS">
                                    <div class="col-12 col-sm-6 col-md-6 col-lg-3 btn" style='text-align: left'>
                                        <span class="input-area-map-marker glyphicon glyphicon-map-marker" style="color:#C5C5C9"></span>&nbsp;Weymouth
                                    </div>
                                </a>
                                <a href="/weather/tides/today/white-beach-tas-7184" title="Tide Times for WHITE BEACH, TAS">
                                    <div class="col-12 col-sm-6 col-md-6 col-lg-3 btn" style='text-align: left'>
                                        <span class="input-area-map-marker glyphicon glyphicon-map-marker" style="color:#C5C5C9"></span>&nbsp;White Beach
                                    </div>
                                </a>
                                <a href="/weather/tides/today/whitemark-tas-7255" title="Tide Times for WHITEMARK, TAS">
                                    <div class="col-12 col-sm-6 col-md-6 col-lg-3 btn" style='text-align: left'>
                                        <span class="input-area-map-marker glyphicon glyphicon-map-marker" style="color:#C5C5C9"></span>&nbsp;Whitemark
                                    </div>
                                </a>
                                <a href="/weather/tides/today/wickham-tas-7256" title="Tide Times for WICKHAM, TAS">
                                    <div class="col-12 col-sm-6 col-md-6 col-lg-3 btn" style='text-align: left'>
                                        <span class="input-area-map-marker glyphicon glyphicon-map-marker" style="color:#C5C5C9"></span>&nbsp;Wickham
                                    </div>
                                </a>
                                <a href="/weather/tides/today/wiltshire-tas-7321" title="Tide Times for WILTSHIRE, TAS">
                                    <div class="col-12 col-sm-6 col-md-6 col-lg-3 btn" style='text-align: left'>
                                        <span class="input-area-map-marker glyphicon glyphicon-map-marker" style="color:#C5C5C9"></span>&nbsp;Wiltshire
                                    </div>
                                </a>
                                <a href="/weather/tides/today/wingaroo-tas-7255" title="Tide Times for WINGAROO, TAS">
                                    <div class="col-12 col-sm-6 col-md-6 col-lg-3 btn" style='text-align: left'>
                                        <span class="input-area-map-marker glyphicon glyphicon-map-marker" style="color:#C5C5C9"></span>&nbsp;Wingaroo
                                    </div>
                                </a>
                                <a href="/weather/tides/today/wivenhoe-tas-7320" title="Tide Times for WIVENHOE, TAS">
                                    <div class="col-12 col-sm-6 col-md-6 col-lg-3 btn" style='text-align: left'>
                                        <span class="input-area-map-marker glyphicon glyphicon-map-marker" style="color:#C5C5C9"></span>&nbsp;Wivenhoe
                                    </div>
                                </a>
                        </div>
                        <h2 style="font-size:29pt;font-weight: bold;margin-left: 15px;margin-top: 7px">Y</h2>
                        <div class="col-12">
                                <a href="/weather/tides/today/yambacoona-tas-7256" title="Tide Times for YAMBACOONA, TAS">
                                    <div class="col-12 col-sm-6 col-md-6 col-lg-3 btn" style='text-align: left'>
                                        <span class="input-area-map-marker glyphicon glyphicon-map-marker" style="color:#C5C5C9"></span>&nbsp;Yambacoona
                                    </div>
                                </a>
                                <a href="/weather/tides/today/yarra-creek-tas-7256" title="Tide Times for YARRA CREEK, TAS">
                                    <div class="col-12 col-sm-6 col-md-6 col-lg-3 btn" style='text-align: left'>
                                        <span class="input-area-map-marker glyphicon glyphicon-map-marker" style="color:#C5C5C9"></span>&nbsp;Yarra Creek
                                    </div>
                                </a>
                        </div>
                </div>
            </div>
        </div>
    </div>

                        </div>
                            <!-- Right Rail -->
                            <div class="col-12 sb-col-xl-4 right-rail ps-1 pe-2 mt-3 mt-xl-0">
                                


<div class="d-flex flex-column gap-0 weather-rail-margin-top" data-rail="weather_rail_right">
    



<div id="flag-panel-root" style="height:220px;" class="surface p-0 mb-3">
    <div class="flag-panel-wrapper position-relative overflow-hidden rounded"
         style="width:100%;height:100%;background-color:#475569;">

        <div id="flag-panel-container"
             data-panel-bg="#475569"
             data-wind-knots="3.0"
             data-wind-dir="157.5"
             data-has-temperature="true"
             data-temperature="16.7"
             data-has-astro="true"
             data-sun-altitude="14.14"
             data-sun-azimuth="93.37"
             data-moon-altitude="-38.05"
             data-moon-azimuth="203.82"
             data-moon-illum="0.709"
             data-view-id="0"
             style="position:absolute;inset:0;z-index:0;">
        </div>

            <div class="position-absolute top-0 start-0 m-2"
                 style="z-index:2;pointer-events:none;">
                <span class="text-white fw-semibold small"
                      style="font-size:0.75rem;text-shadow:0 1px 3px rgba(0,0,0,0.7);">
                    Sydney - Observatory Hill
                </span>
                <span id="fp-viewpoint-label" class="d-none"></span>
            </div>
        <div id="fp-compass" class="position-absolute top-0 end-0 me-2 mt-2"
             style="z-index:2;">
            <div class="d-flex align-items-center justify-content-center rounded-circle bg-dark bg-opacity-50"
                 style="width:44px;height:44px;backdrop-filter:blur(4px);">
                <div id="fp-compass-needle" class="d-flex flex-column align-items-center"
                     style="transform-origin:center center;transition:transform 0.35s ease;">
                    <span id="fp-compass-arrow" class="text-white fw-bold" style="font-size:0.6rem;line-height:1;">&#9650;</span>
                    <span id="fp-compass-label" class="text-white fw-semibold" style="font-size:0.65rem;line-height:1.3;letter-spacing:0.03em;">N</span>
                </div>
            </div>
        </div>

        <div class="position-absolute bottom-0 start-0 m-2 d-flex align-items-center text-white fw-semibold"
             style="z-index:2;pointer-events:none;font-size:0.75rem;text-shadow:0 1px 3px rgba(0,0,0,0.7);white-space:nowrap;">
<div class='flex flex-shrink-1 justify-content-start align-items-center gap-1 ps-1'><i class='ic-arrow-red' style='display:inline-block;width:18px;height:18px;transform:rotate(22deg);' title='Wind: 3 kn WNW'></i><span class='d-inline-block text-nowrap'>3 kn WNW</span></div>                <span class="ms-1">·</span>
                <span id="fp-temperature" class="ms-1">17 &deg;C</span>
        </div>

        <button id="fp-playpause" type="button" title="Pause animation"
                class="position-absolute bottom-0 end-0 me-2 mb-2 border-0 p-0 bg-transparent"
                style="z-index:2;cursor:pointer;user-select:none;">
            <div class="d-flex flex-column align-items-center justify-content-center rounded-circle bg-dark bg-opacity-50"
                 style="width:44px;height:44px;backdrop-filter:blur(4px);">
                <i id="fp-playpause-icon" class="ic-pause icon-white"
                   style="width:1.1rem;height:1.1rem;"></i>
            </div>
        </button>
    </div>
</div>

<script>
(function () {
    var urls = ["/dist/js/bundles/flagpanel-script.LPHEYLEE.js"];
    var loaded = false;
    function loadScripts() {
        if (loaded || !urls || !urls.length) return;
        loaded = true;
        for (var i = 0; i < urls.length; i++) {
            var s = document.createElement('script');
            s.src = urls[i];
            s.defer = true;
            s.type = 'text/javascript';
            document.body.appendChild(s);
        }
    }
    function scheduleLoad() {
        if ('requestIdleCallback' in window) {
            requestIdleCallback(loadScripts, { timeout: 2000 });
        } else {
            setTimeout(loadScripts, 1);
        }
    }
    var el = document.getElementById('flag-panel-container');
    if (!el) return;
    if (window.matchMedia('(max-width: 767px)').matches) {
        var io = new IntersectionObserver(function (entries) {
            if (!entries.some(function (e) { return e.isIntersecting; })) return;
            io.disconnect();
            scheduleLoad();
        }, { rootMargin: '200px' });
        io.observe(el);
    } else {
        scheduleLoad();
    }
})();
</script>
    

<div class="surface p-2" data-panel="warnings">
        <div class="d-flex justify-content-between align-items-center">
            <h5>Warnings</h5>
        </div>
            <div class="text-muted small">No warnings within 100 km.</div>
            <h6 class="my-2 fw-bold">State Wide</h6>
            <div class="mt-2 small">
                    <div class="d-flex flex-wrap gap-1 justify-content-start mb-2" role="list" aria-label="All NSW warning categories">
                            <span class="badge" role="listitem" style="background-color: #666666; color: #fff;">Agricultural</span>
                    </div>
                <div class="text-end">
                    <a href="/weather/warnings/nsw?referringLocation=sydney" class="text-decoration-none">
                        View all NSW warnings
                    </a>
                </div>
            </div>
</div>


    


<div class="surface p-2">
    <div class="d-flex justify-content-between align-items-center">
        <h5>Temperature</h5>
            <div class="d-flex align-items-center small">
                <i class="ic-location icon-primary me-1" style="width: 12px; height: 12px;"></i>
                <span class="fw-medium">Sydney</span>
            </div>
    </div>

        <div class="text-muted small">Temperature Offline</div>
</div>


    



<div class="surface p-2" data-panel="tides">
    <div class="d-flex justify-content-between align-items-center">
        <h5>Tides</h5>
            <div class="d-flex align-items-center small">
                <i class="ic-location icon-primary me-1" style="width: 12px; height: 12px;"></i>
                <span class="fw-medium">Fort Denison</span>
            </div>
    </div>

        <!-- Rule of Twelths Curve Graph (80% width, taller chart area) -->
        <div class="mx-auto" style="width: 80%;">
            <div class="position-relative" style="height: 110px; margin-top: 5px;">
            <svg viewBox="0 0 200 70" preserveAspectRatio="xMidYMid meet" style="width: 100%; height: 100%;">
                
                <!-- Water fill under curve -->
                <path d="M 20 55 L 20.0 12.0 L 23.2 12.0 L 26.4 12.2 L 29.6 12.4 L 32.8 12.7 L 36.0 13.1 L 39.2 13.5 L 42.4 14.0 L 45.6 14.7 L 48.8 15.3 L 52.0 16.1 L 55.2 16.9 L 58.4 17.8 L 61.6 18.8 L 64.8 19.8 L 68.0 20.9 L 71.2 22.0 L 74.4 23.1 L 77.6 24.3 L 80.8 25.6 L 84.0 26.9 L 87.2 28.2 L 90.4 29.5 L 93.6 30.8 L 96.8 32.2 L 100.0 33.5 L 103.2 34.8 L 106.4 36.2 L 109.6 37.5 L 112.8 38.8 L 116.0 40.1 L 119.2 41.4 L 122.4 42.7 L 125.6 43.9 L 128.8 45.0 L 132.0 46.1 L 135.2 47.2 L 138.4 48.2 L 141.6 49.2 L 144.8 50.1 L 148.0 50.9 L 151.2 51.7 L 154.4 52.3 L 157.6 53.0 L 160.8 53.5 L 164.0 53.9 L 167.2 54.3 L 170.4 54.6 L 173.6 54.8 L 176.8 55.0 L 180.0 55.0 L 180 55 Z" fill="var(--bs-info)" opacity="0.15"/>
                
                <!-- Rule of Twelths curve -->
                <path d="M 20.0 12.0 L 23.2 12.0 L 26.4 12.2 L 29.6 12.4 L 32.8 12.7 L 36.0 13.1 L 39.2 13.5 L 42.4 14.0 L 45.6 14.7 L 48.8 15.3 L 52.0 16.1 L 55.2 16.9 L 58.4 17.8 L 61.6 18.8 L 64.8 19.8 L 68.0 20.9 L 71.2 22.0 L 74.4 23.1 L 77.6 24.3 L 80.8 25.6 L 84.0 26.9 L 87.2 28.2 L 90.4 29.5 L 93.6 30.8 L 96.8 32.2 L 100.0 33.5 L 103.2 34.8 L 106.4 36.2 L 109.6 37.5 L 112.8 38.8 L 116.0 40.1 L 119.2 41.4 L 122.4 42.7 L 125.6 43.9 L 128.8 45.0 L 132.0 46.1 L 135.2 47.2 L 138.4 48.2 L 141.6 49.2 L 144.8 50.1 L 148.0 50.9 L 151.2 51.7 L 154.4 52.3 L 157.6 53.0 L 160.8 53.5 L 164.0 53.9 L 167.2 54.3 L 170.4 54.6 L 173.6 54.8 L 176.8 55.0 L 180.0 55.0" fill="none" stroke="var(--bs-info)" stroke-width="2" opacity="0.7"/>
                
                <!-- Vertical line at current position -->
                <line x1="77.9" y1="55" x2="77.9" y2="24.4" 
                      stroke="var(--bs-primary)" stroke-width="1" stroke-dasharray="2,2" opacity="0.5"/>
                
                <!-- Current position marker -->
                <circle cx="77.9" cy="24.4" r="5" fill="var(--bs-primary)"/>
                <circle cx="77.9" cy="24.4" r="8" fill="none" stroke="var(--bs-primary)" stroke-width="1" opacity="0.4"/>
                
                <!-- Last tide label -->
                <text x="20" y="9" font-size="8" fill="var(--bs-secondary)" text-anchor="middle">5:31am</text>
                <text x="20" y="65" font-size="9" fill="var(--bs-secondary)" text-anchor="middle" font-weight="bold">1.25m</text>
                
                <!-- Next tide label -->
                <text x="180" y="9" font-size="8" fill="var(--bs-secondary)" text-anchor="middle">11:06am</text>
                <text x="180" y="65" font-size="9" fill="var(--bs-secondary)" text-anchor="middle" font-weight="bold">0.72m</text>
            </svg>
            </div>
        </div>
        <!-- Tide info row -->
        <div class="d-flex justify-content-between align-items-center small mt-1">
            <div class="text-muted">
                <span class="text-danger">
                    &#x2193; Falling
                </span>
            </div>
            <div class="fw-bold">
                Current: 1.10m
            </div>
        </div>
</div>


    

    

<div class="surface d-print-none">
    <div class="d-flex justify-content-center">
                <div class="">
                    <div class="hidden-print d-flex justify-content-center"><div class=""><div class='spono-spot hidden-print spono-mrec' data-id='WeatherMRec1'><div class='d-lg-none'><div data-fuse='mob_mrec_1'></div></div><div class='d-none d-lg-block'><div data-fuse='misc_mrec_1'></div></div></div></div></div>
                </div>
    </div>
</div>

    

<div class="surface p-2" data-panel="weather_now">
    <div class="d-flex justify-content-between align-items-center">
        <h5 class="mb-0">Weather Now for Sydney (Coastal)</h5>
    </div>

        <div class="text-muted small">Observations not available</div>
</div>

    

        

    


<div class="surface p-2">
    <div class="d-flex justify-content-between align-items-center">
        <h5>Nearby Wind</h5>
        <span class="small text-muted">50 km radius</span>
    </div>

        <div class="position-relative bg-surface rounded overflow-auto mx-auto" style="min-height: 200px; max-width: 400px; max-height: 400px;">
            <svg viewBox="0 0 280 200" preserveAspectRatio="xMidYMid meet" style="width: 100%; height: 100%;">
                <defs>
                    <radialGradient id="windAreaGradient" cx="50%" cy="50%" r="50%">
                        <stop offset="0%" stop-color="var(--bs-primary)" stop-opacity="0.1"/>
                        <stop offset="70%" stop-color="var(--bs-primary)" stop-opacity="0.05"/>
                        <stop offset="100%" stop-color="var(--bs-primary)" stop-opacity="0"/>
                    </radialGradient>
                    
                    <!-- Wind arrow symbol for reuse -->
                    <symbol id="windArrow" viewBox="0 0 24 24">
                        <path d="M12 2L4 14h5v8h6v-8h5L12 2z" fill="currentColor"/>
                    </symbol>
                </defs>
                
                <!-- Radius circle background -->
                <circle cx="140.0" cy="100.0" r="90.0" 
                        fill="url(#windAreaGradient)" 
                        stroke="var(--bs-border-color)" 
                        stroke-width="1" 
                        stroke-dasharray="4,4"/>
                
                <!-- Distance rings (25km intervals) -->
                    <circle cx="140.0" cy="100.0" r="45.0" 
                            fill="none" 
                            stroke="var(--bs-border-color)" 
                            stroke-width="0.5" 
                            stroke-dasharray="2,4"
                            opacity="0.5"/>
                
                <!-- Compass directions -->
                <text x="140.0" y="15" font-size="8" fill="var(--bs-secondary)" text-anchor="middle">N</text>
                <text x="140.0" y="192.0" font-size="8" fill="var(--bs-secondary)" text-anchor="middle">S</text>
                <text x="12" y="103.0" font-size="8" fill="var(--bs-secondary)" text-anchor="middle">W</text>
                <text x="268.0" y="103.0" font-size="8" fill="var(--bs-secondary)" text-anchor="middle">E</text>
                
                <!-- Nearby location markers with wind arrows -->
                
                    <!-- Location marker with wind arrow -->
                    <g class="wind-marker" style="cursor: pointer;" role="button" tabindex="0" data-url="/weather/wind-forecast/bankstown-nsw-2200" onclick="sb.Network.go(this.dataset.url)">
                            <!-- Wind arrow -->
                            <g transform="translate(85.7, 97.0) rotate(292, 9, 9)">
                                <use href="#windArrow" width="18" height="18" style="color: #E13700;"/>
                            </g>
                            <!-- Wind speed text -->
<text x="94.7" y="120.0" font-size="7" font-weight="bold" fill="#E13700" text-anchor="middle">Calm</text>                        <!-- Location name -->
                        <text x="94.7" y="130.0" font-size="6" fill="var(--bs-body-color)" text-anchor="middle" opacity="0.7">Bankstown</text>
                    </g>
                    <!-- Location marker with wind arrow -->
                    <g class="wind-marker" style="cursor: pointer;" role="button" tabindex="0" data-url="/weather/wind-forecast/horsley-park-nsw-2175" onclick="sb.Network.go(this.dataset.url)">
                            <!-- Wind arrow -->
                            <g transform="translate(38.3, 79.6) rotate(67, 9, 9)">
                                <use href="#windArrow" width="18" height="18" style="color: #E13700;"/>
                            </g>
                            <!-- Wind speed text -->
<text x="47.3" y="102.6" font-size="7" font-weight="bold" fill="#E13700" text-anchor="middle">2 kn</text>                        <!-- Location name -->
                        <text x="47.3" y="112.6" font-size="6" fill="var(--bs-body-color)" text-anchor="middle" opacity="0.7">Horsley Park</text>
                    </g>
                    <!-- Location marker with wind arrow -->
                    <g class="wind-marker" style="cursor: pointer;" role="button" tabindex="0" data-url="/weather/wind-forecast/holsworthy-nsw-2173" onclick="sb.Network.go(this.dataset.url)">
                            <!-- Wind arrow -->
                            <g transform="translate(53.1, 133.2) rotate(67, 9, 9)">
                                <use href="#windArrow" width="18" height="18" style="color: #E13700;"/>
                            </g>
                            <!-- Wind speed text -->
<text x="62.1" y="156.2" font-size="7" font-weight="bold" fill="#E13700" text-anchor="middle">4 kn</text>                        <!-- Location name -->
                        <text x="62.1" y="166.2" font-size="6" fill="var(--bs-body-color)" text-anchor="middle" opacity="0.7">Holsworthy</text>
                    </g>
                    <!-- Location marker with wind arrow -->
                    <g class="wind-marker" style="cursor: pointer;" role="button" tabindex="0" data-url="/weather/wind-forecast/richmond-nsw-2753" onclick="sb.Network.go(this.dataset.url)">
                            <!-- Wind arrow -->
                            <g transform="translate(19.1, 27.0) rotate(270, 9, 9)">
                                <use href="#windArrow" width="18" height="18" style="color: #E13700;"/>
                            </g>
                            <!-- Wind speed text -->
<text x="28.1" y="50.0" font-size="7" font-weight="bold" fill="#E13700" text-anchor="middle">Calm</text>                        <!-- Location name -->
                        <text x="28.1" y="60.0" font-size="6" fill="var(--bs-body-color)" text-anchor="middle" opacity="0.7">Richmond</text>
                    </g>
                
                <!-- Current location marker (center, larger) -->
                <g class="current-location">
                        <!-- Pulse animation ring -->
                        <circle cx="140.0" cy="100.0" r="18" fill="none" stroke="#E13700" stroke-width="2" opacity="0.3">
                            <animate attributeName="r" values="18;24;18" dur="2s" repeatCount="indefinite"/>
                            <animate attributeName="opacity" values="0.3;0.1;0.3" dur="2s" repeatCount="indefinite"/>
                        </circle>
                        <!-- Main wind arrow (larger) -->
                        <g transform="translate(128.0, 88.0) rotate(270, 12, 12)">
                            <use href="#windArrow" width="24" height="24" style="color: #E13700;"/>
                        </g>
                </g>
            </svg>
        </div>
        <!-- Current location info -->
        <div class="d-flex justify-content-between align-items-center mt-2 small">
            <div class="d-flex align-items-center small">
                <i class="ic-location icon-primary me-1" style="width: 12px; height: 12px;"></i>
                <span class="fw-medium">Sydney</span>
            </div>
                <span class="fw-bold" style="color: #E13700;">Calm E</span>
        </div>
</div>


    


    



<div x-data="{expanded:true,reverseRiseSet:false,sunTransformNormal:'translate(3.0, 48.0) scale(0.6)',sunTransformReversed:'translate(173.0, 48.0) scale(0.6)',moonClipXNormal:'15.0',moonClipXReversed:'185.0',moonImageXNormal:'5.0',moonImageXReversed:'175.0',panelStyle(){return 'transform:scaleX('+(this.expanded?1:0)+');transform-origin:center;transition:transform 150ms ease-in-out;'},riseX(){return this.reverseRiseSet?180:20;},setX(){return this.reverseRiseSet?20:180;},sunTransform(){return this.reverseRiseSet?this.sunTransformReversed:this.sunTransformNormal;},moonClipX(){return this.reverseRiseSet?this.moonClipXReversed:this.moonClipXNormal;},moonImageX(){return this.reverseRiseSet?this.moonImageXReversed:this.moonImageXNormal;},toggleRiseSet(){this.expanded=false;window.setTimeout(()=>{let req=null;if(window.sb&&sb.GlobalSettings&&sb.GlobalSettings.toggleRiseSet){req=sb.GlobalSettings.toggleRiseSet();}else if(window.$&&$.post){req=$.post('/weather/rise-set/toggle');}this.reverseRiseSet=!this.reverseRiseSet;this.expanded=true;if(req&&req.fail){req.fail(()=>{this.reverseRiseSet=!this.reverseRiseSet;});}},150);}}">
<!-- Sun Section -->
<div class="surface p-2" x-bind:style="panelStyle()">
    <div class="d-flex justify-content-between align-items-center">
        <h5 class="mb-0">Sun</h5>
        <i class="ic-rotate icon-muted" style="width:.85rem;height:.85rem;cursor:pointer" title="Flip rise/set sides" x-on:click="toggleRiseSet()"></i>
    </div>

        <div class="text-muted small">Astonomy Offline</div>
</div>

<!-- Moon Section -->
<div class="surface p-2 mt-2" x-bind:style="panelStyle()">
    <div class="d-flex justify-content-between align-items-center">
        <h5 class="mb-0">Moon</h5>
        <i class="ic-rotate icon-muted" style="width:.85rem;height:.85rem;cursor:pointer" title="Flip rise/set sides" x-on:click="toggleRiseSet()"></i>
    </div>

        <div class="text-muted small">Astonomy Offline</div>
</div>
</div>


    

<div class="surface p-2" data-panel="live_weather">
    <div class="d-flex justify-content-between align-items-center">
        <h5>Live Weather</h5>
            <i class="ic-info icon-muted" style="width:.85rem;height:.85rem" tooltip="Nearby to Sydney (Coastal)"></i>
    </div>

        <table class="table table-md table-borderless small mb-0">
            <div>
        <tr>
        <td colspan="5"><h6 class="fw-bold">
        Nearby</h6>
            </td>
    </tr>
            </div>

                    <tr role="button" tabindex="0" data-url="/weather/wind-forecast/north-head-nsw" onclick="sb.Network.go(this.dataset.url)">
                        <td class="text-break"><div class='flex align-items-center gap-3'><i class='ic-location'></i>North Head, NSW</div></td>
                        <td><div class='flex flex-shrink-1 justify-content-start align-items-center gap-1 ps-1'><span style='display:inline-block;width:18px;height:18px;line-height:18px;text-align:center;' title='Calm'><span style='display:inline-block;width:8px;height:8px;border-radius:50%;background-color:#0066FF;vertical-align:middle;'></span></span><span class='d-inline-block text-nowrap'>Calm </span></div></td>
                        <td class="temperature-cold"></td>
                    </tr>
                    <tr role="button" tabindex="0" data-url="/weather/wind-forecast/little-bay-nsw-2036" onclick="sb.Network.go(this.dataset.url)">
                        <td class="text-break"><div class='flex align-items-center gap-3'><i class='ic-location'></i>Little Bay, NSW</div></td>
                        <td><div class='flex flex-shrink-1 justify-content-start align-items-center gap-1 ps-1'><span style='display:inline-block;width:18px;height:18px;line-height:18px;text-align:center;' title='Calm'><span style='display:inline-block;width:8px;height:8px;border-radius:50%;background-color:#0066FF;vertical-align:middle;'></span></span><span class='d-inline-block text-nowrap'>Calm </span></div></td>
                        <td class="temperature-cold"></td>
                    </tr>
                    <tr role="button" tabindex="0" data-url="/weather/wind-forecast/cronulla-nsw-2230" onclick="sb.Network.go(this.dataset.url)">
                        <td class="text-break"><div class='flex align-items-center gap-3'><i class='ic-location'></i>Cronulla, NSW</div></td>
                        <td><div class='flex flex-shrink-1 justify-content-start align-items-center gap-1 ps-1'><i class='ic-arrow-red' style='display:inline-block;width:18px;height:18px;transform:rotate(0deg);' title='Wind: 2 kn W'></i><span class='d-inline-block text-nowrap'>2 kn W</span></div></td>
                        <td class="temperature-cold"></td>
                    </tr>

        <tr>
        <td colspan="5"><h6 class="fw-bold">
        Windiest in Australia</h6>
            </td>
    </tr>
                    <tr role="button" tabindex="0" data-url="/weather/wind-forecast/cape-leeuwin-wa" onclick="sb.Network.go(this.dataset.url)">
                        <td class="text-break"><div class='flex align-items-center gap-3'><i class='ic-location'></i>Cape Leeuwin, WA</div></td>
                        <td><div class='flex flex-shrink-1 justify-content-start align-items-center gap-1 ps-1'><i class='ic-arrow' style='display:inline-block;width:18px;height:18px;transform:rotate(45deg);' title='Wind: 28 kn NW'></i><span class='d-inline-block text-nowrap'>28 kn NW</span></div></td>
                        <td class="">18&deg;</td>
                    </tr>
        <tr>
        <td colspan="5"><h6 class="fw-bold">
        Most Windless in Australia</h6>
            </td>
    </tr>
                    <tr role="button" tabindex="0" data-url="/weather/wind-forecast/perth" onclick="sb.Network.go(this.dataset.url)">
                        <td class="text-break"><div class='flex align-items-center gap-3'><i class='ic-location'></i>Perth (Coastal), WA</div></td>
                        <td><div class='flex flex-shrink-1 justify-content-start align-items-center gap-1 ps-1'><span style='display:inline-block;width:18px;height:18px;line-height:18px;text-align:center;' title='Calm'><span style='display:inline-block;width:8px;height:8px;border-radius:50%;background-color:#0066FF;vertical-align:middle;'></span></span><span class='d-inline-block text-nowrap'>Calm </span></div></td>
                        <td class="">11&deg;</td>
                    </tr>
        <tr>
        <td colspan="5"><h6 class="fw-bold">
        Hottest in Australia</h6>
            </td>
    </tr>
                    <tr role="button" tabindex="0" data-url="/weather/wind-forecast/troughton-island-wa" onclick="sb.Network.go(this.dataset.url)">
                        <td class="text-break"><div class='flex align-items-center gap-3'><i class='ic-location'></i>Troughton Island, WA</div></td>
                        <td><div class='flex flex-shrink-1 justify-content-start align-items-center gap-1 ps-1'><i class='ic-arrow-red' style='display:inline-block;width:18px;height:18px;transform:rotate(315deg);' title='Wind: 5 kn SW'></i><span class='d-inline-block text-nowrap'>5 kn SW</span></div></td>
                        <td class="">28&deg;</td>
                    </tr>
        <tr>
        <td colspan="5"><h6 class="fw-bold">
        Coldest in Australia</h6>
            </td>
    </tr>
                    <tr role="button" tabindex="0" data-url="/weather/wind-forecast/wandering-wa-6308" onclick="sb.Network.go(this.dataset.url)">
                        <td class="text-break"><div class='flex align-items-center gap-3'><i class='ic-location'></i>Wandering, WA</div></td>
                        <td><div class='flex flex-shrink-1 justify-content-start align-items-center gap-1 ps-1'><i class='ic-arrow-red' style='display:inline-block;width:18px;height:18px;transform:rotate(45deg);' title='Wind: 3 kn NW'></i><span class='d-inline-block text-nowrap'>3 kn NW</span></div></td>
                        <td class="temperature-cold">4&deg;</td>
                    </tr>
        <tr>
        <td colspan="5"><h6 class="fw-bold">
        Wettest in Australia</h6>
            </td>
    </tr>
                    <tr role="button" tabindex="0" data-url="/weather/wind-forecast/thangool-airport-qld" onclick="sb.Network.go(this.dataset.url)">
                        <td class="text-break"><div class='flex align-items-center gap-3'><i class='ic-location'></i>Thangool Airport, QLD</div></td>
                        <td colspan="2" class="text-primary fw-bold">55.2 mm</td>
                    </tr>
        </table>
        <div class="mt-2 small text-end">
            <a href="/locations/search" class="text-decoration-none">More locations...</a>
        </div>
</div>


    

</div>

                            </div>                     </div>
                </div>
            </div>
        </div>
    <!-- End BodyStart -->



</div>  

</div>
<div class="wait-overlay"></div>
<div class="refresh-notice toast-container position-fixed top-50 start-50 translate-middle p-3" style="display:none">
    <div class="toast show align-items-center shadow-lg" role="status" aria-live="polite" aria-atomic="true">
        <div class="d-flex">
            <div class="toast-body">Getting latest weather&hellip;</div>
            <button type="button" class="btn-close me-2 m-auto" aria-label="Dismiss"></button>
        </div>
    </div>
</div>

<!-- Begin BodyEnd -->


<div class="mt-5 pt-4 d-print-none" style="height:60px;background-image:url(/Assets/Images/FooterTop.svg)"></div>  

<style>
    .footer-links a {
        color: #fff;
    }

    .footer-links a:hover,
    .footer-links a:focus {
        color: #fff;
        text-decoration: underline;
    }

    /* Primary About / Support actions — ≥44px tap targets on touch devices */
    .footer-links .footer-primary-link {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
    }
</style>

<div class="text-bg-primary footer-links d-print-none" id="sb-footer">
    <div class="container">
        <div class="row pt-5 px-3">
            <!-- Apps -->
            <div class="col-12 col-md-4 order-1 order-md-5 pb-5">
                <div class="column gap-2"> 
                    <h5>Know before you go</h5>
                    <h3>Download the Seabreeze app for iOS or Android.</h3>
                    <div class="row mt-2">
                        <div class="col">
                            <a target="_blank" href='https://play.google.com/store/apps/details?id=au.com.seabreeze'>
                                <img src="/Assets/Images/GooglePlay.svg" alt="" class="p-2 px-3 border rounded-3">
                            </a>
                        </div> 
                        <div class="col">
                            <a target="_blank" href='https://apps.apple.com/au/app/seabreeze-free/id571581320'>
                                <img src="/Assets/Images/AppStore.svg" alt="" class="p-2 border rounded-3">
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        
            <!-- Weather -->
            <div class="col-6 col-md-2 order-2 order-md-1 pb-5">
                <div class="column gap-2 me-3">
                    <h5 class="">Weather</h5>
                    <div class="column gap-3">
                        <p class="medium text-secondary"><a href="/weather/wind-forecast/sydney">Sydney weather</a></p>
                        <p class="medium text-secondary"><a href="/weather/wind-forecast/melbourne">Melbourne weather</a></p>
                        <p class="medium text-secondary"><a href="/weather/wind-forecast/brisbane">Brisbane weather</a></p>
                        <p class="medium text-secondary"><a href="/weather/wind-forecast/perth">Perth weather</a></p>
                        <p class="medium text-secondary"><a href="/weather/wind-forecast/adelaide">Adelaide weather</a></p>
                        <p class="medium text-secondary"><a href="/weather/wind-forecast/darwin">Darwin weather</a></p>
                        <p class="medium text-secondary"><a href="/weather/wind-forecast/hobart">Hobart weather</a></p>
                        <p class="medium text-secondary"><a href="/weather/wind-forecast/canberra">Canberra weather</a></p>
                        <p class="medium text-secondary"><a href="/locations/map">Location Map</a></p>
                        <p class="medium text-secondary"><a href="/locations/search">Location Search</a></p>
                        <p class="medium text-secondary"><a href="/weather/rain-radar/">Rain Radar</a></p>
                    </div>
                </div>
            </div>
        
            <!-- Activities -->
            <div class="col-6 col-md-2 order-3 order-md-2 pb-5">
                <div class="column gap-2 mx-3">
                    <h5 class="">Activities</h5>
                    <div class="column gap-3">
                        <p class="medium text-secondary"><a href="/Kitesurfing">Kitesurfing</a></p>
                        <p class="medium text-secondary"><a href="/Windsurfing">Windsurfing</a></p>
                        <p class="medium text-secondary"><a href="/Stand-up-paddle">Stand up paddle</a></p>
                        <p class="medium text-secondary"><a href="/Surfing">Surfing</a></p>
                        <p class="medium text-secondary"><a href="/Boating">Boating</a></p>
                        <p class="medium text-secondary"><a href="/Sailing">Sailing</a></p>
                        <p class="medium text-secondary"><a href="/Fishing">Fishing</a></p>
                    </div>
                </div>
            </div>
        
            <!-- About -->
            <div class="col-6 col-md-2 order-4 order-md-3 pb-5">
                <div class="column gap-2">
                    <h5 class="">About</h5>
                    <div class="column gap-3">
                        <p class="medium text-secondary mb-0"><a class="footer-primary-link" href="/OurStory">About us</a></p>
                        <p class="medium text-secondary mb-0"><a class="footer-primary-link" href="/Support">Support</a></p>
                    </div>
                    <h5 class="mt-4">Other</h5>
                    <div class="column gap-3">
                        <p class="medium text-secondary"><a href="/News">News</a></p>
                        <p class="medium text-secondary"><a href="/Articles">Articles</a></p>
                        <p class="medium text-secondary"><a href="/Weather/Shared">Widgets</a></p>
                    </div>
                </div>
            </div>
        
            <!-- Support -->
            <div class="col-6 col-md-2 order-5 order-md-4 pb-5">
                <div class="column gap-2">
                    <h5 class="">Support</h5>
                    <div class="column gap-3">
                        <p class="medium text-secondary"><a href="/Support">Write To Us</a></p>
                        <p class="medium text-secondary"><a href="/Help">Help/FAQ</a></p>
                        <p class="medium text-secondary"><a href="/Support/UserFeedback">Report Bug</a></p>
                        <p class="medium text-secondary"><a href="/Support/UserFeedback">Suggestion Box</a></p>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="row px-3 py-5 gap-3">
            <!-- Legals -->
            <div class="col-12 col-md text-center">Copyright © 1997-2026 Seabreeze.com.au</div>
            <div class="col-12 col-md text-center"><a href="/TermsOfService">Terms of use</a></div>
            <div class="col-12 col-md text-center"><a href="/PrivacyPolicy">Privacy policy</a></div>
            <div class="col-12 col-md text-center">Version: 5130</div>
        </div>
    </div>
</div>

<div style="height: 85px;" class="sb-footer-banner-spacer text-bg-primary d-print-none"></div>







<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css">

<script type="application/ld+json">{"@context":"https://schema.org","@type":"WebSite","name":"Seabreeze","url":"https://www.seabreeze.com.au"}</script><script type="application/ld+json">{"@context":"https://schema.org","@type":"Organization","name":"Seabreeze","url":"https://www.seabreeze.com.au","logo":"https://www.seabreeze.com.au/Assets/images/static/a/logo-seabreeze.com.au.png"}</script><script type="application/ld+json">{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://www.seabreeze.com.au/Home"},{"@type":"ListItem","position":2,"name":"Weather","item":"https://www.seabreeze.com.au/weather"},{"@type":"ListItem","position":3,"name":"Tides","item":"https://www.seabreeze.com.au/weather/tides/search/TAS"},{"@type":"ListItem","position":4,"name":"TAS","item":"https://www.seabreeze.com.au/weather/tides/search/tas"}]}</script>

<!-- End BodyEnd -->

<!-- Begin BodyEndScripts -->

<script defer src="/dist/js/bundles/htmx-script.1279c54e.js" type="text/javascript"></script>
<script src="/dist/js/bundles/head-script.563ed274.js" type="text/javascript"></script>
<script src="/dist/js/bundles/seabreeze-script.BTVGZBRO.js" type="text/javascript"></script>
<script src="/dist/js/bundles/graphs-script.4GVYJI4O.js" type="text/javascript"></script>
<script>
(function(){
if(!window.jQuery){
var b=document.createElement('div');
b.id='sb-jquery-missing';
b.className='alert alert-warning mb-0 border-0 rounded-0 text-center';
b.setAttribute('role','alert');
b.textContent="Page didn't load correctly - reload recommended";
if(document.body){document.body.insertBefore(b,document.body.firstChild);}
return;
}
jQuery(function(){ sb.Weather && sb.Weather.railOnReady && sb.Weather.railOnReady(); sb.Weather && sb.Weather.railOnReady && sb.Weather.railOnReady(); sb.LocationSearch && sb.LocationSearch.onReady && sb.LocationSearch.onReady('#73', '/LocationSearch',  function (c) { sb.LocationSearch.goFromMasthead(c) }); sb.LocationSearch && sb.LocationSearch.onReady && sb.LocationSearch.onReady('#74', '/LocationSearch?f=tide',  function (c) { sb.Network.go('/weather/tides/today/'+c.data.path); }); sb.AdBanners && sb.AdBanners.onReady && sb.AdBanners.onReady(); sb.Global && sb.Global.onReady && sb.Global.onReady(); sb.GlobalSettings && sb.GlobalSettings.onReady && sb.GlobalSettings.onReady();});
})();
</script>
<script defer src="/scripts/vendor/twemoji@14.0.2.js"></script>
<script defer>window.addEventListener("load", () => { twemoji.parse(document.body, { folder: "svg", ext: ".svg" }); });</script>
<script>
    document.addEventListener("DOMContentLoaded", function () {
        // Guard the global: if the core bundle was blocked/failed to load (adblock,
        // flaky network, bots), `bootstrap` is undefined - don't throw on every page.
        if (!window.bootstrap || !window.bootstrap.Tooltip) return;
        const tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
        tooltipTriggerList.forEach(function (tooltipTriggerEl) {
            new bootstrap.Tooltip(tooltipTriggerEl)
        })
    });
</script>



<!-- End BodyEndScripts --> 


</body>
</html>