semantic-ui-sass 0.19.3.1 → 1.7.0.0

data/app/assets/stylesheets/semantic-ui/modules/_sticky.scss

@@ -0,0 +1,80 @@
+ /*
+ * # Semantic UI
+ * https://github.com/Semantic-Org/Semantic-UI
+ * http://www.semantic-ui.com/
+ *
+ * Copyright 2014 Contributors
+ * Released under the MIT license
+ * http://opensource.org/licenses/MIT
+ *
+ */
+
+
+
+/*******************************
+            Sticky
+*******************************/
+
+.ui.sticky {
+  position: static;
+  -webkit-transition: width 0.2s ease, height 0.2s ease, top 0.2s ease, bottom 0.2s ease;
+          transition: width 0.2s ease, height 0.2s ease, top 0.2s ease, bottom 0.2s ease;
+  z-index: 800;
+}
+
+
+/*******************************
+            States
+*******************************/
+
+
+/* Bound */
+.ui.sticky.bound {
+  position: absolute;
+  left: auto;
+  right: auto;
+}
+
+/* Fixed */
+.ui.sticky.fixed {
+  position: fixed;
+  left: auto;
+  right: auto;
+}
+
+/* Bound/Fixed Position */
+.ui.sticky.bound.top,
+.ui.sticky.fixed.top {
+  top: 0px;
+  bottom: auto;
+}
+.ui.sticky.bound.bottom,
+.ui.sticky.fixed.bottom {
+  top: auto;
+  bottom: 0px;
+}
+
+
+/*******************************
+            Types
+*******************************/
+
+.ui.native.sticky {
+  position: -webkit-sticky;
+  position: -moz-sticky;
+  position: -ms-sticky;
+  position: -o-sticky;
+  position: sticky;
+}
+
+
+/*******************************
+         Theme Overrides
+*******************************/
+
+
+
+/*******************************
+         Site Overrides
+*******************************/
+

data/app/assets/stylesheets/semantic-ui/modules/_tab.scss

@@ -1,8 +1,7 @@
-@import '../depends/loader';
-/*
- * # Semantic - Tab
- * http://github.com/jlukic/semantic-ui/
- *
+ /*
+ * # Semantic UI
+ * https://github.com/Semantic-Org/Semantic-UI
+ * http://www.semantic-ui.com/
  *
  * Copyright 2014 Contributors
  * Released under the MIT license
@@ -10,6 +9,8 @@
  *
  */
 
+
+
 /*******************************
            UI Tabs
 *******************************/
@@ -18,10 +19,12 @@
   display: none;
 }
 
+
 /*******************************
              States
 *******************************/
 
+
 /*--------------------
        Active
 ---------------------*/
@@ -40,25 +43,51 @@
   overflow: hidden;
   display: block;
   min-height: 250px;
-  text-indent: -10000px;
 }
-
 .ui.tab.loading * {
   position: relative !important;
   left: -10000px !important;
 }
-
-.ui.tab.loading:after {
+.ui.tab.loading:before,
+.ui.tab.loading.segment:before {
   position: absolute;
-  top: 50px;
+  content: '';
+  top: 100px;
   left: 50%;
-  content: 'Loading...';
-  margin-left: -32px;
-  text-indent: 5px;
-  color: rgba(0, 0, 0, 0.4);
-  width: 100%;
-  height: 100%;
-  padding-top: 75px;
-  background: image-url("semantic-ui/loader-large.gif") no-repeat 0px 0px;
-  visibility: visible;
-}
+  margin: -1.25em 0em 0em -1.25em;
+  width: 2.5em;
+  height: 2.5em;
+  border-radius: 500rem;
+  border: 0.2em solid rgba(0, 0, 0, 0.1);
+}
+.ui.tab.loading:after,
+.ui.tab.loading.segment:after {
+  position: absolute;
+  content: '';
+  top: 100px;
+  left: 50%;
+  margin: -1.25em 0em 0em -1.25em;
+  width: 2.5em;
+  height: 2.5em;
+  -webkit-animation: button-spin 0.6s linear;
+          animation: button-spin 0.6s linear;
+  -webkit-animation-iteration-count: infinite;
+          animation-iteration-count: infinite;
+  border-radius: 500rem;
+  border-color: #aaaaaa transparent transparent;
+  border-style: solid;
+  border-width: 0.2em;
+  box-shadow: 0px 0px 0px 1px transparent;
+}
+
+
+/*******************************
+         Tab Overrides
+*******************************/
+
+
+
+/*******************************
+        User Overrides
+*******************************/
+

data/app/assets/stylesheets/semantic-ui/modules/_transition.scss

@@ -1,530 +1,408 @@
-/*******************************
-  Semantic - Transition
-  Author: Jack Lukic
+ /*
+ * # Semantic UI
+ * https://github.com/Semantic-Org/Semantic-UI
+ * http://www.semantic-ui.com/
+ *
+ * Copyright 2014 Contributors
+ * Released under the MIT license
+ * http://opensource.org/licenses/MIT
+ *
+ */
+
 
-  CSS animation definitions for
-  transition module
 
+/*******************************
+          Transitions
 *******************************/
 
 /*
   Some transitions adapted from Animate CSS
   https://github.com/daneden/animate.css
 */
-
-.ui.transition {
+.transition {
   -webkit-animation-iteration-count: 1;
-  animation-iteration-count: 1;
-  -webkit-animation-duration: 1s;
-  animation-duration: 1s;
+          animation-iteration-count: 1;
+  -webkit-animation-duration: 500ms;
+          animation-duration: 500ms;
   -webkit-animation-timing-function: ease;
-  animation-timing-function: ease;
+          animation-timing-function: ease;
   -webkit-animation-fill-mode: both;
-  animation-fill-mode: both;
+          animation-fill-mode: both;
 }
 
+
 /*******************************
             States
 *******************************/
 
-.ui.animating.transition {
-  display: block;
+
+/* Animating */
+.animating.transition {
   -webkit-backface-visibility: hidden;
-  -ms-backface-visibility: hidden;
-  backface-visibility: hidden;
+          backface-visibility: hidden;
   -webkit-transform: translateZ(0);
-  -ms-transform: translateZ(0);
-  transform: translateZ(0);
+          transform: translateZ(0);
+  visibility: visible !important;
 }
 
 /* Loading */
-
-.ui.loading.transition {
+.loading.transition {
   position: absolute;
-  top: -999999px;
+  top: -99999px;
   left: -99999px;
 }
 
 /* Hidden */
-
-.ui.hidden.transition {
-  display: none !important;
+.hidden.transition {
+  display: none;
+  visibility: hidden;
 }
 
 /* Visible */
-
-.ui.visible.transition {
-  display: block;
-  visibility: visible;
+.visible.transition {
+  display: block !important;
+  visibility: visible !important;
+  -webkit-backface-visibility: hidden;
+          backface-visibility: hidden;
+  -webkit-transform: translateZ(0);
+          transform: translateZ(0);
 }
 
 /* Disabled */
-
-.ui.disabled.transition {
+.disabled.transition {
   -webkit-animation-play-state: paused;
-  animation-play-state: paused;
+          animation-play-state: paused;
 }
 
+
 /*******************************
           Variations
 *******************************/
 
-.ui.looping.transition {
+.looping.transition {
   -webkit-animation-iteration-count: infinite;
-  animation-iteration-count: infinite;
+          animation-iteration-count: infinite;
 }
 
+
 /*******************************
              Types
 *******************************/
 
+
+
+/*******************************
+           Animations
+*******************************/
+
+
 /*--------------
     Emphasis
 ---------------*/
 
-.ui.flash.transition {
+.flash.transition {
   -webkit-animation-name: flash;
-  animation-name: flash;
+          animation-name: flash;
 }
-
-.ui.shake.transition {
+.shake.transition {
   -webkit-animation-name: shake;
-  animation-name: shake;
+          animation-name: shake;
 }
-
-.ui.bounce.transition {
+.bounce.transition {
   -webkit-animation-name: bounce;
-  animation-name: bounce;
+          animation-name: bounce;
 }
-
-.ui.tada.transition {
+.tada.transition {
   -webkit-animation-name: tada;
-  animation-name: tada;
+          animation-name: tada;
 }
 
 /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
-
-.ui.pulse.transition {
+.pulse.transition {
   -webkit-animation-name: pulse;
-  animation-name: pulse;
-}
-
-/*--------------
-     Flips
----------------*/
-
-.ui.flip.transition.in,
-.ui.flip.transition.out {
-  -webkit-perspective: 2000px;
-  -ms-perspective: 2000px;
-  perspective: 2000px;
-}
-
-.ui.horizontal.flip.transition.in,
-.ui.horizontal.flip.transition.out {
-  -webkit-animation-name: horizontalFlip;
-  animation-name: horizontalFlip;
-}
-
-.ui.horizontal.flip.transition.out {
-  -webkit-animation-name: horizontalFlipOut;
-  animation-name: horizontalFlipOut;
-}
-
-.ui.vertical.flip.transition.in,
-.ui.vertical.flip.transition.out {
-  -webkit-animation-name: verticalFlip;
-  animation-name: verticalFlip;
-}
-
-.ui.vertical.flip.transition.out {
-  -webkit-animation-name: verticalFlipOut;
-  animation-name: verticalFlipOut;
-}
-
-/*--------------
-      Fades
----------------*/
-
-.ui.fade.transition.in {
-  -webkit-animation-name: fade;
-  animation-name: fade;
-}
-
-.ui.fade.transition.out {
-  -webkit-animation-name: fadeOut;
-  animation-name: fadeOut;
-}
-
-.ui.fade.up.transition.in {
-  -webkit-animation-name: fadeUp;
-  animation-name: fadeUp;
-}
-
-.ui.fade.up.transition.out {
-  -webkit-animation-name: fadeUpOut;
-  animation-name: fadeUpOut;
+          animation-name: pulse;
 }
 
-.ui.fade.down.transition.in {
-  -webkit-animation-name: fadeDown;
-  animation-name: fadeDown;
-}
-
-.ui.fade.down.transition.out {
-  -webkit-animation-name: fadeDownOut;
-  animation-name: fadeDownOut;
-}
-
-/*rtl:ignore renaming*/
-
-.ui.fade.left.transition.in {
-  -webkit-animation-name: fadeLeft;
-  animation-name: fadeLeft;
-}
-
-/*rtl:ignore renaming*/
-
-.ui.fade.left.transition.out {
-  -webkit-animation-name: fadeLeftOut;
-  animation-name: fadeLeftOut;
-}
-
-/*rtl:ignore renaming*/
-
-.ui.fade.right.transition.in {
-  -webkit-animation-name: fadeRight;
-  animation-name: fadeRight;
-}
-
-/*rtl:ignore renaming*/
-
-.ui.fade.right.transition.out {
-  -webkit-animation-name: fadeRightOut;
-  animation-name: fadeRightOut;
-}
-
-/*--------------
-      Scale
----------------*/
-
-.ui.scale.transition.in {
-  -webkit-animation-name: scale;
-  animation-name: scale;
-}
-
-.ui.scale.transition.out {
-  -webkit-animation-name: scaleOut;
-  animation-name: scaleOut;
-}
-
-/*--------------
-     Slide
----------------*/
-
-.ui.slide.down.transition.in {
-  -webkit-animation-name: slide;
-  animation-name: slide;
-  transform-origin: 50% 0%;
-  -ms-transform-origin: 50% 0%;
-  -webkit-transform-origin: 50% 0%;
-}
-
-.ui.slide.down.transition.out {
-  -webkit-animation-name: slideOut;
-  animation-name: slideOut;
-  -webkit-transform-origin: 50% 0%;
-  -ms-transform-origin: 50% 0%;
-  transform-origin: 50% 0%;
-}
-
-.ui.slide.up.transition.in {
-  -webkit-animation-name: slide;
-  animation-name: slide;
-  -webkit-transform-origin: 50% 100%;
-  -ms-transform-origin: 50% 100%;
-  transform-origin: 50% 100%;
-}
-
-.ui.slide.up.transition.out {
-  -webkit-animation-name: slideOut;
-  animation-name: slideOut;
-  -webkit-transform-origin: 50% 100%;
-  -ms-transform-origin: 50% 100%;
-  transform-origin: 50% 100%;
-}
-
-@-webkit-keyframes slide {
-  0% {
-    opacity: 0;
-    -webkit-transform: scaleY(0);
-    transform: scaleY(0);
-  }
-
-  100% {
-    opacity: 1;
-    -webkit-transform: scaleY(1);
-    transform: scaleY(1);
-  }
-}
-
-@keyframes slide {
-  0% {
-    opacity: 0;
-    -webkit-transform: scaleY(0);
-    -ms-transform: scaleY(0);
-    transform: scaleY(0);
-  }
-
-  100% {
-    opacity: 1;
-    -webkit-transform: scaleY(1);
-    -ms-transform: scaleY(1);
-    transform: scaleY(1);
-  }
-}
-
-@-webkit-keyframes slideOut {
-  0% {
-    opacity: 1;
-    -webkit-transform: scaleY(1);
-    transform: scaleY(1);
-  }
-
-  100% {
-    opacity: 0;
-    -webkit-transform: scaleY(0);
-    transform: scaleY(0);
-  }
-}
-
-@keyframes slideOut {
-  0% {
-    opacity: 1;
-    -webkit-transform: scaleY(1);
-    -ms-transform: scaleY(1);
-    transform: scaleY(1);
-  }
-
-  100% {
-    opacity: 0;
-    -webkit-transform: scaleY(0);
-    -ms-transform: scaleY(0);
-    transform: scaleY(0);
-  }
-}
-
-/*******************************
-       Animations
-*******************************/
-
-/*--------------
-    Emphasis
----------------*/
-
 /* Flash */
-
 @-webkit-keyframes flash {
-  0%, 50%, 100% {
+  0%,
+  50%,
+  100% {
     opacity: 1;
   }
-
-  25%, 75% {
+  25%,
+  75% {
     opacity: 0;
   }
 }
-
 @keyframes flash {
-  0%, 50%, 100% {
+  0%,
+  50%,
+  100% {
     opacity: 1;
   }
-
-  25%, 75% {
+  25%,
+  75% {
     opacity: 0;
   }
 }
 
 /* Shake */
-
 @-webkit-keyframes shake {
-  0%, 100% {
+  0%,
+  100% {
     -webkit-transform: translateX(0);
-    transform: translateX(0);
+            transform: translateX(0);
   }
-
-  10%, 30%, 50%, 70%, 90% {
+  10%,
+  30%,
+  50%,
+  70%,
+  90% {
     -webkit-transform: translateX(-10px);
-    transform: translateX(-10px);
+            transform: translateX(-10px);
   }
-
-  20%, 40%, 60%, 80% {
+  20%,
+  40%,
+  60%,
+  80% {
     -webkit-transform: translateX(10px);
-    transform: translateX(10px);
+            transform: translateX(10px);
   }
 }
-
 @keyframes shake {
-  0%, 100% {
+  0%,
+  100% {
     -webkit-transform: translateX(0);
-    -ms-transform: translateX(0);
-    transform: translateX(0);
+            transform: translateX(0);
   }
-
-  10%, 30%, 50%, 70%, 90% {
+  10%,
+  30%,
+  50%,
+  70%,
+  90% {
     -webkit-transform: translateX(-10px);
-    -ms-transform: translateX(-10px);
-    transform: translateX(-10px);
+            transform: translateX(-10px);
   }
-
-  20%, 40%, 60%, 80% {
+  20%,
+  40%,
+  60%,
+  80% {
     -webkit-transform: translateX(10px);
-    -ms-transform: translateX(10px);
-    transform: translateX(10px);
+            transform: translateX(10px);
   }
 }
 
 /* Bounce */
-
 @-webkit-keyframes bounce {
-  0%, 20%, 50%, 80%, 100% {
+  0%,
+  20%,
+  50%,
+  80%,
+  100% {
     -webkit-transform: translateY(0);
-    transform: translateY(0);
+            transform: translateY(0);
   }
-
   40% {
     -webkit-transform: translateY(-30px);
-    transform: translateY(-30px);
+            transform: translateY(-30px);
   }
-
   60% {
     -webkit-transform: translateY(-15px);
-    transform: translateY(-15px);
+            transform: translateY(-15px);
   }
 }
-
 @keyframes bounce {
-  0%, 20%, 50%, 80%, 100% {
+  0%,
+  20%,
+  50%,
+  80%,
+  100% {
     -webkit-transform: translateY(0);
-    -ms-transform: translateY(0);
-    transform: translateY(0);
+            transform: translateY(0);
   }
-
   40% {
     -webkit-transform: translateY(-30px);
-    -ms-transform: translateY(-30px);
-    transform: translateY(-30px);
+            transform: translateY(-30px);
   }
-
   60% {
     -webkit-transform: translateY(-15px);
-    -ms-transform: translateY(-15px);
-    transform: translateY(-15px);
+            transform: translateY(-15px);
   }
 }
 
 /* Tada */
-
 @-webkit-keyframes tada {
   0% {
     -webkit-transform: scale(1);
-    transform: scale(1);
+            transform: scale(1);
   }
-
-  10%, 20% {
+  10%,
+  20% {
     -webkit-transform: scale(0.9) rotate(-3deg);
-    transform: scale(0.9) rotate(-3deg);
+            transform: scale(0.9) rotate(-3deg);
   }
-
-  30%, 50%, 70%, 90% {
+  30%,
+  50%,
+  70%,
+  90% {
     -webkit-transform: scale(1.1) rotate(3deg);
-    transform: scale(1.1) rotate(3deg);
+            transform: scale(1.1) rotate(3deg);
   }
-
-  40%, 60%, 80% {
+  40%,
+  60%,
+  80% {
     -webkit-transform: scale(1.1) rotate(-3deg);
-    transform: scale(1.1) rotate(-3deg);
+            transform: scale(1.1) rotate(-3deg);
   }
-
   100% {
     -webkit-transform: scale(1) rotate(0);
-    transform: scale(1) rotate(0);
+            transform: scale(1) rotate(0);
   }
 }
-
 @keyframes tada {
   0% {
     -webkit-transform: scale(1);
-    -ms-transform: scale(1);
-    transform: scale(1);
+            transform: scale(1);
   }
-
-  10%, 20% {
+  10%,
+  20% {
     -webkit-transform: scale(0.9) rotate(-3deg);
-    -ms-transform: scale(0.9) rotate(-3deg);
-    transform: scale(0.9) rotate(-3deg);
+            transform: scale(0.9) rotate(-3deg);
   }
-
-  30%, 50%, 70%, 90% {
+  30%,
+  50%,
+  70%,
+  90% {
     -webkit-transform: scale(1.1) rotate(3deg);
-    -ms-transform: scale(1.1) rotate(3deg);
-    transform: scale(1.1) rotate(3deg);
+            transform: scale(1.1) rotate(3deg);
   }
-
-  40%, 60%, 80% {
+  40%,
+  60%,
+  80% {
     -webkit-transform: scale(1.1) rotate(-3deg);
-    -ms-transform: scale(1.1) rotate(-3deg);
-    transform: scale(1.1) rotate(-3deg);
+            transform: scale(1.1) rotate(-3deg);
   }
-
   100% {
     -webkit-transform: scale(1) rotate(0);
-    -ms-transform: scale(1) rotate(0);
-    transform: scale(1) rotate(0);
+            transform: scale(1) rotate(0);
   }
 }
 
 /* Pulse */
-
 @-webkit-keyframes pulse {
   0% {
     -webkit-transform: scale(1);
-    transform: scale(1);
+            transform: scale(1);
     opacity: 1;
   }
-
   50% {
     -webkit-transform: scale(0.9);
-    transform: scale(0.9);
+            transform: scale(0.9);
     opacity: 0.7;
   }
-
   100% {
     -webkit-transform: scale(1);
-    transform: scale(1);
+            transform: scale(1);
     opacity: 1;
   }
 }
-
 @keyframes pulse {
   0% {
     -webkit-transform: scale(1);
-    -ms-transform: scale(1);
-    transform: scale(1);
+            transform: scale(1);
     opacity: 1;
   }
-
   50% {
     -webkit-transform: scale(0.9);
-    -ms-transform: scale(0.9);
-    transform: scale(0.9);
+            transform: scale(0.9);
     opacity: 0.7;
   }
-
   100% {
     -webkit-transform: scale(1);
-    -ms-transform: scale(1);
-    transform: scale(1);
+            transform: scale(1);
+    opacity: 1;
+  }
+}
+
+/*--------------
+     Slide
+---------------*/
+
+.slide.down.transition.in {
+  -webkit-animation-name: slideIn;
+          animation-name: slideIn;
+  transform-origin: 50% 0%;
+  -ms-transform-origin: 50% 0%;
+  -webkit-transform-origin: 50% 0%;
+}
+.slide.down.transition.out {
+  -webkit-animation-name: slideOut;
+          animation-name: slideOut;
+  -webkit-transform-origin: 50% 0%;
+      -ms-transform-origin: 50% 0%;
+          transform-origin: 50% 0%;
+}
+.slide.up.transition.in {
+  -webkit-animation-name: slideIn;
+          animation-name: slideIn;
+  -webkit-transform-origin: 50% 100%;
+      -ms-transform-origin: 50% 100%;
+          transform-origin: 50% 100%;
+}
+.slide.up.transition.out {
+  -webkit-animation-name: slideOut;
+          animation-name: slideOut;
+  -webkit-transform-origin: 50% 100%;
+      -ms-transform-origin: 50% 100%;
+          transform-origin: 50% 100%;
+}
+@-webkit-keyframes slideIn {
+  0% {
+    opacity: 0;
+    -webkit-transform: scaleY(0);
+            transform: scaleY(0);
+  }
+  100% {
+    opacity: 1;
+    -webkit-transform: scaleY(1);
+            transform: scaleY(1);
+  }
+}
+@keyframes slideIn {
+  0% {
+    opacity: 0;
+    -webkit-transform: scaleY(0);
+            transform: scaleY(0);
+  }
+  100% {
+    opacity: 1;
+    -webkit-transform: scaleY(1);
+            transform: scaleY(1);
+  }
+}
+@-webkit-keyframes slideOut {
+  0% {
     opacity: 1;
+    -webkit-transform: scaleY(1);
+            transform: scaleY(1);
+  }
+  100% {
+    opacity: 0;
+    -webkit-transform: scaleY(0);
+            transform: scaleY(0);
+  }
+}
+@keyframes slideOut {
+  0% {
+    opacity: 1;
+    -webkit-transform: scaleY(1);
+            transform: scaleY(1);
+  }
+  100% {
+    opacity: 0;
+    -webkit-transform: scaleY(0);
+            transform: scaleY(0);
   }
 }
 
@@ -532,488 +410,584 @@
      Flips
 ---------------*/
 
-/* Horizontal */
+.flip.transition.in,
+.flip.transition.out {
+  -webkit-perspective: 2000px;
+          perspective: 2000px;
+}
+.horizontal.flip.transition.in {
+  -webkit-animation-name: horizontalFlipIn;
+          animation-name: horizontalFlipIn;
+}
+.horizontal.flip.transition.out {
+  -webkit-animation-name: horizontalFlipOut;
+          animation-name: horizontalFlipOut;
+}
+.vertical.flip.transition.in {
+  -webkit-animation-name: verticalFlipIn;
+          animation-name: verticalFlipIn;
+}
+.vertical.flip.transition.out {
+  -webkit-animation-name: verticalFlipOut;
+          animation-name: verticalFlipOut;
+}
 
-@-webkit-keyframes horizontalFlip {
+/* Horizontal */
+@-webkit-keyframes horizontalFlipIn {
   0% {
     -webkit-transform: rotateY(-90deg);
-    transform: rotateY(-90deg);
+            transform: rotateY(-90deg);
     opacity: 0;
   }
-
   100% {
     -webkit-transform: rotateY(0deg);
-    transform: rotateY(0deg);
+            transform: rotateY(0deg);
     opacity: 1;
   }
 }
-
-@keyframes horizontalFlip {
+@keyframes horizontalFlipIn {
   0% {
     -webkit-transform: rotateY(-90deg);
-    -ms-transform: rotateY(-90deg);
-    transform: rotateY(-90deg);
+            transform: rotateY(-90deg);
     opacity: 0;
   }
-
   100% {
     -webkit-transform: rotateY(0deg);
-    -ms-transform: rotateY(0deg);
-    transform: rotateY(0deg);
+            transform: rotateY(0deg);
     opacity: 1;
   }
 }
 
 /* Horizontal */
-
 @-webkit-keyframes horizontalFlipOut {
   0% {
     -webkit-transform: rotateY(0deg);
-    transform: rotateY(0deg);
+            transform: rotateY(0deg);
     opacity: 1;
   }
-
   100% {
     -webkit-transform: rotateY(90deg);
-    transform: rotateY(90deg);
+            transform: rotateY(90deg);
     opacity: 0;
   }
 }
-
 @keyframes horizontalFlipOut {
   0% {
     -webkit-transform: rotateY(0deg);
-    -ms-transform: rotateY(0deg);
-    transform: rotateY(0deg);
+            transform: rotateY(0deg);
     opacity: 1;
   }
-
   100% {
     -webkit-transform: rotateY(90deg);
-    -ms-transform: rotateY(90deg);
-    transform: rotateY(90deg);
+            transform: rotateY(90deg);
     opacity: 0;
   }
 }
 
 /* Vertical */
-
-@-webkit-keyframes verticalFlip {
+@-webkit-keyframes verticalFlipIn {
   0% {
     -webkit-transform: rotateX(-90deg);
-    transform: rotateX(-90deg);
+            transform: rotateX(-90deg);
     opacity: 0;
   }
-
   100% {
     -webkit-transform: rotateX(0deg);
-    transform: rotateX(0deg);
+            transform: rotateX(0deg);
     opacity: 1;
   }
 }
-
-@keyframes verticalFlip {
+@keyframes verticalFlipIn {
   0% {
     -webkit-transform: rotateX(-90deg);
-    -ms-transform: rotateX(-90deg);
-    transform: rotateX(-90deg);
+            transform: rotateX(-90deg);
     opacity: 0;
   }
-
   100% {
     -webkit-transform: rotateX(0deg);
-    -ms-transform: rotateX(0deg);
-    transform: rotateX(0deg);
+            transform: rotateX(0deg);
     opacity: 1;
   }
 }
-
 @-webkit-keyframes verticalFlipOut {
   0% {
     -webkit-transform: rotateX(0deg);
-    transform: rotateX(0deg);
+            transform: rotateX(0deg);
     opacity: 1;
   }
-
   100% {
     -webkit-transform: rotateX(-90deg);
-    transform: rotateX(-90deg);
+            transform: rotateX(-90deg);
     opacity: 0;
   }
 }
-
 @keyframes verticalFlipOut {
   0% {
     -webkit-transform: rotateX(0deg);
-    -ms-transform: rotateX(0deg);
-    transform: rotateX(0deg);
+            transform: rotateX(0deg);
     opacity: 1;
   }
-
   100% {
     -webkit-transform: rotateX(-90deg);
-    -ms-transform: rotateX(-90deg);
-    transform: rotateX(-90deg);
+            transform: rotateX(-90deg);
     opacity: 0;
   }
 }
 
 /*--------------
-     Fades
+      Fades
 ---------------*/
 
-/* Fade */
+.fade.transition.in {
+  -webkit-animation-name: fadeIn;
+          animation-name: fadeIn;
+}
+.fade.transition.out {
+  -webkit-animation-name: fadeOut;
+          animation-name: fadeOut;
+}
+.fade.up.transition.in {
+  -webkit-animation-name: fadeUpIn;
+          animation-name: fadeUpIn;
+}
+.fade.up.transition.out {
+  -webkit-animation-name: fadeUpOut;
+          animation-name: fadeUpOut;
+}
+.fade.down.transition.in {
+  -webkit-animation-name: fadeDownIn;
+          animation-name: fadeDownIn;
+}
+.fade.down.transition.out {
+  -webkit-animation-name: fadeDownOut;
+          animation-name: fadeDownOut;
+}
 
-@-webkit-keyframes fade {
+/* Fade */
+@-webkit-keyframes fadeIn {
   0% {
     opacity: 0;
   }
-
   100% {
     opacity: 1;
   }
 }
-
-@keyframes fade {
+@keyframes fadeIn {
   0% {
     opacity: 0;
   }
-
   100% {
     opacity: 1;
   }
 }
-
 @-webkit-keyframes fadeOut {
   0% {
     opacity: 1;
   }
-
   100% {
     opacity: 0;
   }
 }
-
 @keyframes fadeOut {
   0% {
     opacity: 1;
   }
-
   100% {
     opacity: 0;
   }
 }
 
 /* Fade Up */
-
-@-webkit-keyframes fadeUp {
+@-webkit-keyframes fadeUpIn {
   0% {
     opacity: 0;
-    -webkit-transform: translateY(20px);
-    transform: translateY(20px);
+    -webkit-transform: translateY(10%);
+            transform: translateY(10%);
   }
-
   100% {
     opacity: 1;
-    -webkit-transform: translateY(0);
-    transform: translateY(0);
+    -webkit-transform: translateY(0%);
+            transform: translateY(0%);
   }
 }
-
-@keyframes fadeUp {
+@keyframes fadeUpIn {
   0% {
     opacity: 0;
-    -webkit-transform: translateY(20px);
-    -ms-transform: translateY(20px);
-    transform: translateY(20px);
+    -webkit-transform: translateY(10%);
+            transform: translateY(10%);
   }
-
   100% {
     opacity: 1;
-    -webkit-transform: translateY(0);
-    -ms-transform: translateY(0);
-    transform: translateY(0);
+    -webkit-transform: translateY(0%);
+            transform: translateY(0%);
   }
 }
-
 @-webkit-keyframes fadeUpOut {
   0% {
     opacity: 1;
-    -webkit-transform: translateY(0);
-    transform: translateY(0);
+    -webkit-transform: translateY(0%);
+            transform: translateY(0%);
   }
-
   100% {
     opacity: 0;
-    -webkit-transform: translateY(20px);
-    transform: translateY(20px);
+    -webkit-transform: translateY(10%);
+            transform: translateY(10%);
   }
 }
-
 @keyframes fadeUpOut {
   0% {
     opacity: 1;
-    -webkit-transform: translateY(0);
-    -ms-transform: translateY(0);
-    transform: translateY(0);
+    -webkit-transform: translateY(0%);
+            transform: translateY(0%);
   }
-
   100% {
     opacity: 0;
-    -webkit-transform: translateY(20px);
-    -ms-transform: translateY(20px);
-    transform: translateY(20px);
+    -webkit-transform: translateY(10%);
+            transform: translateY(10%);
   }
 }
 
 /* Fade Down */
-
-@-webkit-keyframes fadeDown {
+@-webkit-keyframes fadeDownIn {
   0% {
     opacity: 0;
-    -webkit-transform: translateY(-20px);
-    transform: translateY(-20px);
+    -webkit-transform: translateY(-10%);
+            transform: translateY(-10%);
   }
-
   100% {
     opacity: 1;
-    -webkit-transform: translateY(0);
-    transform: translateY(0);
+    -webkit-transform: translateY(0%);
+            transform: translateY(0%);
   }
 }
-
-@keyframes fadeDown {
+@keyframes fadeDownIn {
   0% {
     opacity: 0;
-    -webkit-transform: translateY(-20px);
-    -ms-transform: translateY(-20px);
-    transform: translateY(-20px);
+    -webkit-transform: translateY(-10%);
+            transform: translateY(-10%);
   }
-
   100% {
     opacity: 1;
-    -webkit-transform: translateY(0);
-    -ms-transform: translateY(0);
-    transform: translateY(0);
+    -webkit-transform: translateY(0%);
+            transform: translateY(0%);
   }
 }
-
 @-webkit-keyframes fadeDownOut {
   0% {
     opacity: 1;
-    -webkit-transform: translateY(0);
-    transform: translateY(0);
+    -webkit-transform: translateY(0%);
+            transform: translateY(0%);
   }
-
   100% {
     opacity: 0;
-    -webkit-transform: translateY(-20px);
-    transform: translateY(-20px);
+    -webkit-transform: translateY(-10%);
+            transform: translateY(-10%);
   }
 }
-
 @keyframes fadeDownOut {
   0% {
     opacity: 1;
-    -webkit-transform: translateY(0);
-    -ms-transform: translateY(0);
-    transform: translateY(0);
+    -webkit-transform: translateY(0%);
+            transform: translateY(0%);
   }
-
   100% {
     opacity: 0;
-    -webkit-transform: translateY(-20px);
-    -ms-transform: translateY(-20px);
-    transform: translateY(-20px);
+    -webkit-transform: translateY(-10%);
+            transform: translateY(-10%);
   }
 }
 
-/* Fade Left */
+/*--------------
+      Scale
+---------------*/
 
-@-webkit-keyframes fadeLeft {
+.scale.transition.in {
+  -webkit-animation-name: scaleIn;
+          animation-name: scaleIn;
+}
+.scale.transition.out {
+  -webkit-animation-name: scaleOut;
+          animation-name: scaleOut;
+}
+
+/* Scale */
+@-webkit-keyframes scaleIn {
   0% {
     opacity: 0;
-    -webkit-transform: translateX(-20px);
-    transform: translateX(-20px);
+    -webkit-transform: scale(0.7);
+            transform: scale(0.7);
   }
-
   100% {
     opacity: 1;
-    -webkit-transform: translateX(0);
-    transform: translateX(0);
+    -webkit-transform: scale(1);
+            transform: scale(1);
   }
 }
-
-@keyframes fadeLeft {
+@keyframes scaleIn {
   0% {
     opacity: 0;
-    -webkit-transform: translateX(-20px);
-    -ms-transform: translateX(-20px);
-    transform: translateX(-20px);
+    -webkit-transform: scale(0.7);
+            transform: scale(0.7);
   }
-
   100% {
     opacity: 1;
-    -webkit-transform: translateX(0);
-    -ms-transform: translateX(0);
-    transform: translateX(0);
+    -webkit-transform: scale(1);
+            transform: scale(1);
   }
 }
-
-@-webkit-keyframes fadeLeftOut {
+@-webkit-keyframes scaleOut {
   0% {
     opacity: 1;
-    -webkit-transform: translateX(0);
-    transform: translateX(0);
+    -webkit-transform: scale(1);
+            transform: scale(1);
   }
-
   100% {
     opacity: 0;
-    -webkit-transform: translateX(-20px);
-    transform: translateX(-20px);
+    -webkit-transform: scale(0.7);
+            transform: scale(0.7);
   }
 }
-
-@keyframes fadeLeftOut {
+@keyframes scaleOut {
   0% {
     opacity: 1;
-    -webkit-transform: translateX(0);
-    -ms-transform: translateX(0);
-    transform: translateX(0);
+    -webkit-transform: scale(1);
+            transform: scale(1);
   }
-
   100% {
     opacity: 0;
-    -webkit-transform: translateX(-20px);
-    -ms-transform: translateX(-20px);
-    transform: translateX(-20px);
+    -webkit-transform: scale(0.7);
+            transform: scale(0.7);
   }
 }
 
-/* Fade Right */
+/*--------------
+     Drop
+---------------*/
+
+.drop.transition {
+  -webkit-transform-origin: top center;
+      -ms-transform-origin: top center;
+          transform-origin: top center;
+  -webkit-animation-timing-function: cubic-bezier(0.34, 1.61, 0.7, 1);
+          animation-timing-function: cubic-bezier(0.34, 1.61, 0.7, 1);
+}
+.drop.transition.in {
+  -webkit-animation-name: dropIn;
+          animation-name: dropIn;
+}
+.drop.transition.out {
+  -webkit-animation-name: dropOut;
+          animation-name: dropOut;
+}
 
-@-webkit-keyframes fadeRight {
+/* Scale */
+@-webkit-keyframes dropIn {
   0% {
     opacity: 0;
-    -webkit-transform: translateX(20px);
-    transform: translateX(20px);
+    -webkit-transform: scale(0);
+            transform: scale(0);
   }
-
   100% {
     opacity: 1;
-    -webkit-transform: translateX(0);
-    transform: translateX(0);
+    -webkit-transform: scale(1);
+            transform: scale(1);
   }
 }
-
-@keyframes fadeRight {
+@keyframes dropIn {
   0% {
     opacity: 0;
-    -webkit-transform: translateX(20px);
-    -ms-transform: translateX(20px);
-    transform: translateX(20px);
+    -webkit-transform: scale(0);
+            transform: scale(0);
   }
-
   100% {
     opacity: 1;
-    -webkit-transform: translateX(0);
-    -ms-transform: translateX(0);
-    transform: translateX(0);
+    -webkit-transform: scale(1);
+            transform: scale(1);
   }
 }
-
-@-webkit-keyframes fadeRightOut {
+@-webkit-keyframes dropOut {
   0% {
     opacity: 1;
-    -webkit-transform: translateX(0);
-    transform: translateX(0);
+    -webkit-transform: scale(1);
+            transform: scale(1);
   }
-
   100% {
     opacity: 0;
-    -webkit-transform: translateX(20px);
-    transform: translateX(20px);
+    -webkit-transform: scale(0);
+            transform: scale(0);
   }
 }
-
-@keyframes fadeRightOut {
+@keyframes dropOut {
   0% {
     opacity: 1;
-    -webkit-transform: translateX(0);
-    -ms-transform: translateX(0);
-    transform: translateX(0);
+    -webkit-transform: scale(1);
+            transform: scale(1);
   }
-
   100% {
     opacity: 0;
-    -webkit-transform: translateX(20px);
-    -ms-transform: translateX(20px);
-    transform: translateX(20px);
+    -webkit-transform: scale(0);
+            transform: scale(0);
   }
 }
 
 /*--------------
-      Scale
+     Browse
 ---------------*/
 
-/* Scale */
-
-@-webkit-keyframes scale {
+.browse.transition.in {
+  -webkit-animation-name: browseIn;
+          animation-name: browseIn;
+  -webkit-animation-timing-function: ease;
+          animation-timing-function: ease;
+}
+.browse.transition.out,
+.browse.transition.out.left {
+  -webkit-animation-name: browseOutLeft;
+          animation-name: browseOutLeft;
+  -webkit-animation-timing-function: ease;
+          animation-timing-function: ease;
+}
+.browse.transition.out.right {
+  -webkit-animation-name: browseOutRight;
+          animation-name: browseOutRight;
+  -webkit-animation-timing-function: ease;
+          animation-timing-function: ease;
+}
+@-webkit-keyframes browseIn {
   0% {
-    opacity: 0;
-    -webkit-transform: scale(0.7);
-    transform: scale(0.7);
+    -webkit-transform: scale(0.8) translateZ(0px);
+            transform: scale(0.8) translateZ(0px);
+    z-index: -1;
+  }
+  10% {
+    -webkit-transform: scale(0.8) translateZ(0px);
+            transform: scale(0.8) translateZ(0px);
+    z-index: -1;
+    opacity: 0.7;
+  }
+  80% {
+    -webkit-transform: scale(1.05) translateZ(0px);
+            transform: scale(1.05) translateZ(0px);
+    opacity: 1;
+    z-index: 999;
   }
-
   100% {
+    -webkit-transform: scale(1) translateZ(0px);
+            transform: scale(1) translateZ(0px);
+    z-index: 999;
+  }
+}
+@keyframes browseIn {
+  0% {
+    -webkit-transform: scale(0.8) translateZ(0px);
+            transform: scale(0.8) translateZ(0px);
+    z-index: -1;
+  }
+  10% {
+    -webkit-transform: scale(0.8) translateZ(0px);
+            transform: scale(0.8) translateZ(0px);
+    z-index: -1;
+    opacity: 0.7;
+  }
+  80% {
+    -webkit-transform: scale(1.05) translateZ(0px);
+            transform: scale(1.05) translateZ(0px);
     opacity: 1;
-    -webkit-transform: scale(1);
-    transform: scale(1);
+    z-index: 999;
+  }
+  100% {
+    -webkit-transform: scale(1) translateZ(0px);
+            transform: scale(1) translateZ(0px);
+    z-index: 999;
   }
 }
-
-@keyframes scale {
+@-webkit-keyframes browseOutLeft {
   0% {
-    opacity: 0;
-    -webkit-transform: scale(0.7);
-    -ms-transform: scale(0.7);
-    transform: scale(0.7);
+    z-index: 999;
+    -webkit-transform: translateX(0%) rotateY(0deg) rotateX(0deg);
+            transform: translateX(0%) rotateY(0deg) rotateX(0deg);
+  }
+  50% {
+    z-index: -1;
+    -webkit-transform: translateX(-105%) rotateY(35deg) rotateX(10deg) translateZ(-10px);
+            transform: translateX(-105%) rotateY(35deg) rotateX(10deg) translateZ(-10px);
+  }
+  80% {
+    opacity: 1;
   }
-
   100% {
+    z-index: -1;
+    -webkit-transform: translateX(0%) rotateY(0deg) rotateX(0deg) translateZ(-10px);
+            transform: translateX(0%) rotateY(0deg) rotateX(0deg) translateZ(-10px);
+    opacity: 0;
+  }
+}
+@keyframes browseOutLeft {
+  0% {
+    z-index: 999;
+    -webkit-transform: translateX(0%) rotateY(0deg) rotateX(0deg);
+            transform: translateX(0%) rotateY(0deg) rotateX(0deg);
+  }
+  50% {
+    z-index: -1;
+    -webkit-transform: translateX(-105%) rotateY(35deg) rotateX(10deg) translateZ(-10px);
+            transform: translateX(-105%) rotateY(35deg) rotateX(10deg) translateZ(-10px);
+  }
+  80% {
     opacity: 1;
-    -webkit-transform: scale(1);
-    -ms-transform: scale(1);
-    transform: scale(1);
+  }
+  100% {
+    z-index: -1;
+    -webkit-transform: translateX(0%) rotateY(0deg) rotateX(0deg) translateZ(-10px);
+            transform: translateX(0%) rotateY(0deg) rotateX(0deg) translateZ(-10px);
+    opacity: 0;
   }
 }
-
-@-webkit-keyframes scaleOut {
+@-webkit-keyframes browseOutRight {
   0% {
+    z-index: 999;
+    -webkit-transform: translateX(0%) rotateY(0deg) rotateX(0deg);
+            transform: translateX(0%) rotateY(0deg) rotateX(0deg);
+  }
+  50% {
+    z-index: 1;
+    -webkit-transform: translateX(105%) rotateY(35deg) rotateX(10deg) translateZ(-10px);
+            transform: translateX(105%) rotateY(35deg) rotateX(10deg) translateZ(-10px);
+  }
+  80% {
     opacity: 1;
-    -webkit-transform: scale(1);
-    transform: scale(1);
   }
-
   100% {
+    z-index: 1;
+    -webkit-transform: translateX(0%) rotateY(0deg) rotateX(0deg) translateZ(-10px);
+            transform: translateX(0%) rotateY(0deg) rotateX(0deg) translateZ(-10px);
     opacity: 0;
-    -webkit-transform: scale(0.7);
-    transform: scale(0.7);
   }
 }
-
-@keyframes scaleOut {
+@keyframes browseOutRight {
   0% {
+    z-index: 999;
+    -webkit-transform: translateX(0%) rotateY(0deg) rotateX(0deg);
+            transform: translateX(0%) rotateY(0deg) rotateX(0deg);
+  }
+  50% {
+    z-index: 1;
+    -webkit-transform: translateX(105%) rotateY(35deg) rotateX(10deg) translateZ(-10px);
+            transform: translateX(105%) rotateY(35deg) rotateX(10deg) translateZ(-10px);
+  }
+  80% {
     opacity: 1;
-    -webkit-transform: scale(1);
-    -ms-transform: scale(1);
-    transform: scale(1);
   }
-
   100% {
+    z-index: 1;
+    -webkit-transform: translateX(0%) rotateY(0deg) rotateX(0deg) translateZ(-10px);
+            transform: translateX(0%) rotateY(0deg) rotateX(0deg) translateZ(-10px);
     opacity: 0;
-    -webkit-transform: scale(0.7);
-    -ms-transform: scale(0.7);
-    transform: scale(0.7);
   }
-}
+}
+
+
+/*******************************
+         Site Overrides
+*******************************/
+