@page "/"
@namespace squirrowse.web.Pages
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@{
    Layout = null;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="jquery/jquery.js"></script>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>squirrowse.web</title>
    <base href="~/"/>
    <link rel="stylesheet" href="css/bootstrap/bootstrap.min.css"/>
    <link rel="stylesheet" href="lib/lightgallery/css/lightgallery.css"/>
    <link href="css/site.css" rel="stylesheet"/>
    <style type="text/css">


        .demo-gallery > ul { margin-bottom: 0; }

        .demo-gallery > ul > li {
            float: left;
            margin-bottom: 15px;
            margin-right: 20px;
            width: 200px;
        }

        .demo-gallery > ul > li a {
            border: 3px solid #FFF;
            border-radius: 3px;
            display: block;
            float: left;
            overflow: hidden;
            position: relative;
        }

        .mostly-customized-scrollbar::-webkit-scrollbar {
            background-color: #aaa; /* or add it to the track */
            height: 8px;
            overflow: auto;
            width: 5px;
        }

        .demo-gallery > ul > li a > img {
            -moz-transition: -moz-transform 0.15s ease 0s;
            -o-transition: -o-transform 0.15s ease 0s;
            -webkit-transform: scale3d(1, 1, 1);
            -webkit-transition: -webkit-transform 0.15s ease 0s;
            height: 100%;
            transform: scale3d(1, 1, 1);
            transition: transform 0.15s ease 0s;
            width: 100%;
        }

        .demo-gallery > ul > li a:hover > img {
            -webkit-transform: scale3d(1.1, 1.1, 1.1);
            transform: scale3d(1.1, 1.1, 1.1);
        }

        .demo-gallery > ul > li a:hover .demo-gallery-poster > img { opacity: 1; }

        .demo-gallery > ul > li a .demo-gallery-poster {
            -o-transition: background-color 0.15s ease 0s;
            -webkit-transition: background-color 0.15s ease 0s;
            background-color: rgba(0, 0, 0, 0.1);
            bottom: 0;
            left: 0;
            position: absolute;
            right: 0;
            top: 0;
            transition: background-color 0.15s ease 0s;
        }

        .demo-gallery > ul > li a .demo-gallery-poster > img {
            -o-transition: opacity 0.3s ease 0s;
            -webkit-transition: opacity 0.3s ease 0s;
            left: 50%;
            margin-left: -10px;
            margin-top: -10px;
            opacity: 0;
            position: absolute;
            top: 50%;
            transition: opacity 0.3s ease 0s;
        }

        .demo-gallery > ul > li a:hover .demo-gallery-poster { background-color: rgba(0, 0, 0, 0.5); }

        .demo-gallery .justified-gallery > a > img {
            -moz-transition: -moz-transform 0.15s ease 0s;
            -o-transition: -o-transform 0.15s ease 0s;
            -webkit-transform: scale3d(1, 1, 1);
            -webkit-transition: -webkit-transform 0.15s ease 0s;
            height: 100%;
            transform: scale3d(1, 1, 1);
            transition: transform 0.15s ease 0s;
            width: 100%;
        }

        .demo-gallery .justified-gallery > a:hover > img {
            -webkit-transform: scale3d(1.1, 1.1, 1.1);
            transform: scale3d(1.1, 1.1, 1.1);
        }

        .demo-gallery .justified-gallery > a:hover .demo-gallery-poster > img { opacity: 1; }

        .demo-gallery .justified-gallery > a .demo-gallery-poster {
            -o-transition: background-color 0.15s ease 0s;
            -webkit-transition: background-color 0.15s ease 0s;
            background-color: rgba(0, 0, 0, 0.1);
            bottom: 0;
            left: 0;
            position: absolute;
            right: 0;
            top: 0;
            transition: background-color 0.15s ease 0s;
        }

        .demo-gallery .justified-gallery > a .demo-gallery-poster > img {
            -o-transition: opacity 0.3s ease 0s;
            -webkit-transition: opacity 0.3s ease 0s;
            left: 50%;
            margin-left: -10px;
            margin-top: -10px;
            opacity: 0;
            position: absolute;
            top: 50%;
            transition: opacity 0.3s ease 0s;
        }

        .demo-gallery .justified-gallery > a:hover .demo-gallery-poster { background-color: rgba(0, 0, 0, 0.5); }

        .demo-gallery .video .demo-gallery-poster img {
            height: 48px;
            margin-left: -24px;
            margin-top: -24px;
            opacity: 0.8;
            width: 48px;
        }

        .demo-gallery.dark > ul > li a { border: 3px solid #04070a; }

        .home .demo-gallery { padding-bottom: 80px; }
    </style>

</head>
<body>
<app>
    <component type="typeof(App)" render-mode="ServerPrerendered"/>
</app>

<div id="blazor-error-ui">
    <environment include="Staging,Production">
        An error has occurred. This application may no longer respond until reloaded.
    </environment>
    <environment include="Development">
        An unhandled exception has occurred. See browser dev tools for details.
    </environment>
    <a href="" class="reload">Reload</a>
    <a class="dismiss">🗙</a>
</div>

<script src="lib/lightgallery/js/lightgallery-all.js"></script>
<script src="_framework/blazor.server.js"></script>
<script>
    function galeryJs() {

        $('.lgalery').lightGallery();
    };

    function colapseD() {
        $('.collapse').collapse();
    };

</script>
</body>
</html>