<NME> pageguide.less
<BEF> ADDFILE
<MSG> [pageguide] initial load of guide files.

<DFF> @@ -0,0 +1,358 @@
+/* Variables
+================================================== */
+
+    @pg-highlight-color: #f70077;
+
+/* Mixins
+================================================== */
+
+    .pg-rounded-corners (@radius: 5px) {
+        -webkit-border-radius: @radius;
+        -moz-border-radius: @radius;
+        -o-border-radius: @radius;
+        border-radius: @radius;
+    }
+
+    .pg-transition-animation (@prop: all, @time: 1s, @ease: linear) {
+        -webkit-transition: @prop @time @ease;
+        -moz-transition: @prop @time @ease;
+        -o-transition: @prop @time @ease;
+        -ms-transition: @prop @time @ease;
+        transition: @prop @time @ease;
+    }
+
+    .pg-icon-replacement (@imgtouse: "pageguide.png", @height: 20px, @width: 20px, @bgposition: 0 0) {
+        background: transparent url(@imgtouse) @bgposition no-repeat;
+        display: block;
+        height: @height;
+        overflow: hidden;
+        text-indent: -999px;
+        width: @width;
+    }
+
+    .pg-box-shadow (@x: 0, @y: 0, @blur: 5px, @spread: 0, @color: rgba(0, 0, 0, 0.5)) {
+        -webkit-box-shadow: @arguments;
+        -moz-box-shadow: @arguments;
+        -o-box-shadow: @arguments;
+        box-shadow: @arguments;
+    }
+
+    .pg-transform (@rotate: 90deg, @scale: 1, @skew: 1deg, @translate: 10px) {
+        -webkit-transform: rotate(@rotate) scale(@scale) skew(@skew) translate(@translate);
+        -moz-transform: rotate(@rotate) scale(@scale) skew(@skew) translate(@translate);
+        -o-transform: rotate(@rotate) scale(@scale) skew(@skew) translate(@translate);
+        -ms-transform: rotate(@rotate) scale(@scale) skew(@skew) translate(@translate);
+        transform: rotate(@rotate) scale(@scale) skew(@skew) translate(@translate);
+    }
+
+
+/* Page Guide
+================================================== */
+
+    #tlyPageGuideWrapper {
+
+        .tlypageguide_toggle {
+            background: rgba(0, 0, 0, 0.1);
+            .pg-rounded-corners(3px 0 0 3px);
+            clear: both;
+            color: #000000;
+            cursor: pointer;
+            display: block;
+            float: right;
+            font-size: 11px;
+            height: 50px;
+            line-height: 25px;
+            padding: 22px 6px 6px;
+            position: fixed;
+            right: -190px;
+            text-align: left;
+            text-decoration: none;
+            top: 84px;
+            width: 184px;
+            .pg-transition-animation(all, 0.2s, ease-in);
+
+            &:before {
+                .pg-icon-replacement("/img/tlyguide/tlyguide_icon.png", 16px, 16px, 0 0);
+                content: " ";
+                left: 25px;
+                position: absolute;
+                top: 8px;
+            }
+
+            div {
+                border-left: 1px solid #fff;
+                display: block;
+                height: 33px;
+                line-height: 16px;
+                overflow: hidden;
+                padding: 2px 0 0 5px;
+                position: absolute;
+                right: -4px;
+                top: 6px;
+                width: 124px;
+
+                span {
+                    display: block;
+                    margin: 0 0 0 -118px;
+                    width: 115px;
+                    .pg-transition-animation(all, 0.2s, ease-in);
+                }
+            }
+
+            a {
+                bottom: -26px;
+                color: #000;
+                opacity: 0;
+                position: absolute;
+                right: 10px;
+                text-decoration: none;
+            }
+
+            &:hover {
+                background: rgba(0, 0, 0, 0.2);
+                right: 0 !important;
+
+                div span {
+                    margin: 0;
+                }
+            }
+        }
+
+        #tlyPageGuide {
+
+            li {
+                background: fade(@pg-highlight-color, 30%);
+                .pg-box-shadow(0, 2px, 10px, 1px, rgba(0, 0, 0, 0.4));
+                cursor: pointer;
+                display: none;
+                height: 46px;
+                line-height: 50px;
+                position: absolute;
+                text-align: center;
+                width: 50px;
+                .pg-transition-animation(all, 0.1s, ease-in);
+                z-index: 5000;
+
+                ins {
+                    background: none;
+                    color: #fff;
+                    display: block;
+                    font-size: 32px;
+                    overflow: hidden;
+                    text-decoration: none;
+                    width: 50px;
+                }
+
+                div {
+                    display: none;
+                }
+
+                &:after {
+                    content: " ";
+                    display: block;
+                    height: 0;
+                    left: 0;
+                    position: absolute;
+                    top: -15px;
+                    width: 0;
+                    border-top: none;
+                    border-right: none;
+                    border-bottom: none;
+                    border-left: none;
+                    top: auto;
+                    left: auto;
+                    right: auto;
+                }
+
+                &.tlypageguide-active {
+                    background: fade(@pg-highlight-color, 95%);
+
+                    &.tlypageguide_bottom:after {
+                        border-bottom: 15px solid fade(@pg-highlight-color, 95%);
+                    }
+
+                    &.tlypageguide_right,
+                    &.tlypageguide_left,
+                    &.tlypageguide_op {
+                        &:after {
+                            border-top: 15px solid fade(@pg-highlight-color, 95%);
+                        }
+                    }
+                }
+
+                &.tlypageguide_bottom {
+                    &:after {
+                        border-bottom: 15px solid fade(@pg-highlight-color, 30%);
+                        border-right: 15px solid transparent;
+                        left: 0;
+                        top: -15px;
+                    }
+                    &:hover { margin-top: -5px; }
+                }
+
+                &.tlypageguide_right {
+                    &:after {
+                        border-top: 15px solid fade(@pg-highlight-color, 30%);
+                        border-left: 15px solid transparent;
+                        left: -15px;
+                        top: 0;
+                    }
+                    &:hover { margin-left: -5px; }
+                }
+
+                &.tlypageguide_left {
+                    &:after {
+                        border-top: 15px solid fade(@pg-highlight-color, 30%);
+                        border-right: 15px solid transparent;
+                        right: -15px;
+                        top: 0;
+                    }
+                    &:hover { margin-left: 5px; }
+                }
+
+                &.tlypageguide_top {
+                    &:after {
+                        border-top: 15px solid fade(@pg-highlight-color, 30%);
+                        border-right: 15px solid transparent;
+                        bottom: -15px;
+                        left: 0;
+                    }
+                    &:hover { margin-top: 5px; }
+                }
+
+                &:hover {
+                    background: fade(@pg-highlight-color, 95%);
+
+                    &.tlypageguide_bottom:after {
+                        border-bottom: 15px solid fade(@pg-highlight-color, 95%);
+                    }
+
+                    &.tlypageguide_right,
+                    &.tlypageguide_left,
+                    &.tlypageguide_top {
+                        &:after {
+                            border-top: 15px solid fade(@pg-highlight-color, 95%);
+                        }
+                    }
+                }
+            }
+        }
+
+        #tlyPageGuideMessages {
+            .pg-rounded-corners(3px 3px 0 0);
+            background: rgba(0, 0, 0, 0.85);
+            .pg-box-shadow(0, 0, 9px, 4px, rgba(0, 0, 0, 0.4));
+            bottom: 0;
+            display: none;
+            font-size: 16px;
+            height: 0;
+            margin: 0 5% 0 5%;
+            padding: 10px;
+            position: fixed;
+            width: 90%;
+            z-index: 1000;
+
+            span {
+                background: fade(@pg-highlight-color, 95%);
+                .pg-rounded-corners(3px);
+                color: #fff;
+                display: block;
+                font-size: 32px;
+                height: 46px;
+                left: 40px;
+                line-height: 50px;
+                overflow: hidden;
+                position: absolute;
+                text-align: center;
+                top: 25px;
+                width: 50px;
+            }
+
+            div {
+                color: #fff;
+                line-height: 22px;
+                margin: 10px 90px 0 120px;
+                position: relative;
+
+                a {
+                    color: #fff;
+
+                    &:hover {
+                        color: #fff;
+                    }
+                }
+            }
+
+            .tlypageguide_close {
+                background: @pg-highlight-color;
+                .pg-rounded-corners(0 0 3px 3px);
+                color: #fff;
+                display: block;
+                font-size: 11px;
+                height: 24px;
+                line-height: 26px;
+                overflow: hidden;
+                position: absolute;
+                right: 50px;
+                text-align: center;
+                text-decoration: none;
+                top: 0;
+                width: 50px;
+            }
+
+            .tlypageguide_back,
+            .tlypageguide_fwd {
+                .pg-icon-replacement ("/img/tlyguide/tlyguide_arrow.png", 30px, 30px, 10px 4px);
+                position: absolute;
+                top: 34px;
+                left: 10px;
+            }
+
+            .tlypageguide_back {
+                .pg-transform(-180deg, 1, 0, 0);
+            }
+
+            .tlypageguide_fwd {
+                left: 90px;
+            }
+        }
+    }
+
+    .tlypageguide_shadow {
+        position: relative;
+
+        &:after {
+            background-color: fade(@pg-highlight-color, 10%);
+            .pg-box-shadow(0, 0, 1px, 1px, rgba(147, 0, 119, 0.25));
+            content: " ";
+            display: none;
+            position: absolute;
+            top: 0;
+            left: 0;
+        }
+    }
+
+    .tlypageguide-open {
+
+        #tlyPageGuideWrapper {
+
+            .tlypageguide_toggle {
+                .pg-box-shadow(6px, 4px, 5px, 0, rgba(0, 0, 0, 0.4));
+                background: fade(@pg-highlight-color, 90%);
+                color: #fff;
+                right: 0 !important;
+
+                a {
+                    opacity: 1.0;
+                }
+
+                div span {
+                    margin: 0;
+                }
+            }
+        }
+
+        .tlypageguide_shadow:after {
+            display: block;
+        }
+    }

[pageguide] initial load of guide files.