/* Extracted verbatim from the inline <style> block present on every
   live page. Absolute asset URLs rewritten to site-relative. */
input[type=search] {
            -webkit-appearance: textfield;
            -webkit-box-sizing: content-box;
            font-family: inherit;
            font-size: 100%;
        }
        input::-webkit-search-decoration,
        input::-webkit-search-cancel-button {
            display: none; 
        }


        input[type=search] {
            background: url(/images/search-icon.png) no-repeat 9px center;
            border: none;
            padding: 9px 10px 9px 32px;
            width: 55px;
            -moz-border-radius: 10em;
            -webkit-transition: all .5s;
            -moz-transition: all .5s;
            transition: all .5s;
        }
        input[type=search]:focus {
            width: 130px;
            background-color: #fff;
            -webkit-box-shadow: 0 0 5px rgba(109,207,246,.5);
            -moz-box-shadow: 0 0 5px rgba(109,207,246,.5);
            box-shadow: 0 0 5px rgba(109,207,246,.5);
        }


        input:-moz-placeholder {
            color: #999;
        }
        input::-webkit-input-placeholder {
            color: #999;
        }

        /* Demo 2 */
        #demo-2 input[type=search] {
            width: 15px;
            padding-left: 10px;
            color: transparent;
            cursor: pointer;
            outline: none;
        }
        #demo-2 input[type=search]:hover {
            background-color: #999;
        }
        #demo-2 input[type=search]:focus {
            width: 130px;
            padding-left: 32px;
            color: #ffffff;
            background-color: rgba(153, 153, 153, 0.9);
            cursor: auto;
        }
        #demo-2 input:-moz-placeholder {
            color: transparent;
        }
        #demo-2 input::-webkit-input-placeholder {
            color: transparent;
        }
        @media screen and (max-width: 768px) {
            .side-collapse-container{
                width:100%;
                position:relative;
                left:0;
                transition:left .4s;
            }
            .side-collapse-container.out{
                left:200px;
            }
            .side-collapse {
                top:50px;
                bottom:0;
                left:0;
                width:300px;
                position:fixed;
                overflow:hidden;
                transition:width .4s;
                height: 357px;
            }
            .side-collapse.in {
                width:0;
            }
        }

/* The 360° rotate hint, from engagement_rings.php's inline <style>. It is an
   overlay pinned over the frame, hidden above 480px and only shown on phones —
   without this it sits in the flow and pushes every ring image 70px down its
   card. `.dopelessrotate` needs a positioning context for it to anchor to. */
.dopelessrotate {
  position: relative;
}

.view_imagerotate {
  position: absolute;
  right: 27px;
  bottom: 105px;
  z-index: 5;
  height: 45px !important;
  display: none !important;
}

@media screen and (max-width: 480px) {
  .view_imagerotate {
    position: absolute;
    right: 57px;
    bottom: 108px;
    z-index: 5;
    height: 45px !important;
    display: block !important;
  }
}