Updated /delta

Switched from less to scss. Still no build script to update the final CSS, though.
Added preliminary support for storing account data on browser's local storage for offline viewing. No public backend currently support this feature.

frontend/delta/scss/web/480.scss

@@ -0,0 +1,11 @@
+@media only screen and (min-width: 480px) {
+	.loginForm {
+		font-size: 1.2em;
+
+		input {
+		}
+		button {
+		}
+	}
+}
+

frontend/delta/scss/web/768.scss

@@ -0,0 +1,3 @@
+@media only screen and (min-width: 768px) {
+	
+}

frontend/delta/scss/web/992.scss

@@ -0,0 +1,2 @@
+@media only screen and (min-width: 992px) {
+}

frontend/delta/scss/web/add2home.scss

@@ -0,0 +1,160 @@
+/**
+ *
+ * Main container
+ *
+ */
+#addToHomeScreen {
+	z-index:9999;
+	-webkit-user-select:none;
+	user-select:none;
+	-webkit-box-sizing:border-box;
+	box-sizing:border-box;
+	-webkit-touch-callout:none;
+	touch-callout:none;
+	width:240px;
+	font-size:15px;
+	padding:12px 14px;
+	text-align:left;
+	font-family:helvetica;
+	background-image:-webkit-gradient(linear,0 0,0 100%,color-stop(0,#fff),color-stop(0.02,#eee),color-stop(0.98,#ccc),color-stop(1,#a3a3a3));
+	border:1px solid #505050;
+	-webkit-border-radius:8px;
+	-webkit-background-clip:padding-box;
+	color:#333;
+	text-shadow:0 1px 0 rgba(255,255,255,0.75);
+	line-height:130%;
+	-webkit-box-shadow:0 0 4px rgba(0,0,0,0.5);
+}
+
+#addToHomeScreen.addToHomeIpad {
+	width:268px;
+	font-size:18px;
+	padding:14px;
+}
+
+/**
+ *
+ * The 'wide' class is added when the popup contains the touch icon
+ *
+ */
+#addToHomeScreen.addToHomeWide {
+	width:296px;
+}
+
+#addToHomeScreen.addToHomeIpad.addToHomeWide {
+	width:320px;
+	font-size:18px;
+	padding:14px;
+}
+
+/**
+ *
+ * The balloon arrow
+ *
+ */
+#addToHomeScreen .addToHomeArrow {
+	position:absolute;
+	background-image:-webkit-gradient(linear,0 0,100% 100%,color-stop(0,rgba(204,204,204,0)),color-stop(0.4,rgba(204,204,204,0)),color-stop(0.4,#ccc));
+	border-width:0 1px 1px 0;
+	border-style:solid;
+	border-color:#505050;
+	width:16px; height:16px;
+	-webkit-transform:rotateZ(45deg);
+	bottom:-9px; left:50%;
+	margin-left:-8px;
+	-webkit-box-shadow:inset -1px -1px 0 #a9a9a9;
+	-webkit-border-bottom-right-radius:2px;
+}
+
+
+/**
+ *
+ * The balloon arrow for iPad
+ *
+ */
+#addToHomeScreen.addToHomeIpad .addToHomeArrow {
+	-webkit-transform:rotateZ(-135deg);
+	background-image:-webkit-gradient(linear,0 0,100% 100%,color-stop(0,rgba(238,238,238,0)),color-stop(0.4,rgba(238,238,238,0)),color-stop(0.4,#eee));
+	-webkit-box-shadow:inset -1px -1px 0 #fff;
+	top:-9px; bottom:auto; left:50%;
+}
+
+
+/**
+ *
+ * Close button
+ *
+ */
+#addToHomeScreen .addToHomeClose {
+	-webkit-box-sizing:border-box;
+	position:absolute;
+	right:4px;
+	top:4px;
+	width:18px;
+	height:18px; line-height:14px;
+	text-align:center;
+	text-indent:1px;
+	-webkit-border-radius:9px;
+	background:rgba(0,0,0,0.12);
+	color:#707070;
+	-webkit-box-shadow:0 1px 0 #fff;
+	font-size:16px;
+}
+
+
+/**
+ *
+ * The '+' icon, displayed only on iOS < 4.2
+ *
+ */
+#addToHomeScreen .addToHomePlus {
+	font-weight:bold;
+	font-size:1.3em;
+}
+
+
+/**
+ *
+ * The 'share' icon, displayed only on iOS >= 4.2
+ *
+ */
+#addToHomeScreen .addToHomeShare {
+	display:inline-block;
+	width:18px;
+	height:15px;
+	background-repeat:no-repeat;
+	background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAeCAQAAADu6HTYAAADPElEQVR4Xq3TX2gcRRzA8e/M7mVv2+TSNpc/TZtrY6jUGqgaSAmEChKLrYK0YH0RFC2CSCkEfCghiKU04J8qNigq6os+iQV98MHWFwVBrQQRWs21lBw5cw3NNb1/udu72RGG5Y77IzXW77D7sAwf5scyYoL6BGXSDKFZwaGpLvIUaeoCkvX1MmsM0Ny6oRSQYOLuIS+YZOpfQdqslpUxcZrzTVAz4qPwW2O3CeIwC/RSzeY6Ow1QhUrkr+YOWfEKDkEP8Rij7CHKJmrFSDHBdwGEE5wiGChPN+PnT8VdRtEIl1d4gRj/1EVe5ZSBKGh8iqQpo/Fo5+3C/gz0MYg4zgwbqday1/Q4B8BGQ45d/Hi54lakCrU5obOcidJpu1+Lg9whjabyaOYLnrIBFFaRD+xe2ybMDWY66GmP/WA9cGfGp0CWhy0wkMN8inepFiH2rV1j0NQSNQbFLRQnS8/8YSDBBpadfv4CYDub2fmeHDNAsL1MBWUel0iA+Xik6eHcyvD3vAMSU1TGuA/YRS+dD7ovCQN43GKRFCU20Kd3V/avDVVyAZ5niTEuLA5/zBGWg9EEEhfJKN200Tat8CmRAQb9+wv7soPlHt2tQorsz1uPbr0HTY4sJwrH47zJZwABBAKLMBoQXepwgTwdHCo+fXMkQ4lrxEmQ5AaXipPqDY9V2vn09tgvTPI71EEGYxM+/uMJLJ4svpgaWGKOi/xKgmqLSUGSUd5f2vIVJ/CgBaTIUsZ7ZBsn0+NzfMOXLFCXQyTcybN6ep5ZZgUOHn7jpfUpsZshdugPGf+E5zjbyHTSRyQ8xfRPPM/s63RHeuknSoT22mjmmnAOIMkUZ6D1xSfPPAfd1WFKM3sO2CMaHx8M1NjnXKHaAGGkOW0C02WeYHUz4qMtx+w5gUDS8NckYe5lHsMYwCZEPyEEmjLDZFmAS7CDviMdxyTkMNVBKEmYLvbiQQBIBBbCQG04bGQvFWz6CfsCQLWCigILFwcfkGYBiOpbYuOizTAyYyDdCtrGaRG1LCkIgMYEFhI0WqQZoSlbGRyHKe4qOx7iv2bVQW9dp4dlM/x6kmwnWQcd/Q3FCqwTEiT5s+6D5v/pb0SSHyg7uhMWAAAAAElFTkSuQmCC);
+	background-size:18px 15px;
+	text-indent:-9999em;
+	overflow:hidden;
+}
+
+#addToHomeScreen .addToHomeShare.addToHomeShareOS7 {
+	width:11px;
+	background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACoAAAA8CAYAAAAQTCjdAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAASCQAAEgkB80sG3AAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAKjSURBVGiB7dpPiFVVHMDxz7m9NCtMyI2bEJEC25WrEkzHUXCRraIwdNE8ZxfYIlcis1ZEbGEzT1QCF4XgH1CyWhUoJKIWNRGEiCNKmkSiYTzfcfGuOokx77x3ZlS8382959zfn+/invvn3RdijHIRBrwkOINCYXEcdjpb7VyiYdBsLScwt5y6IloYdzqXo36Ro0gY9IKWo+5JwmzBt2HQnBw9ehYNazyn5TBee8Dh+Vq+CWu92GufnkTDR6ab7gDeBNHouMM/l9tXTXM0fGBmL726Fg1Dam74EsvKqR8VNowL2Yzj5f7rnnE4DHq2235diYYhhTGfC94up35T0y+6di/ITU0rKVd+sEi0P7xr2pSJOu8zvF+OzqEv7vDH/WFxt7/cshy/ticsN8sXYUht0kXDOlsF9XJ4UaEvNoz9X3zc5bKaZThbyr5jzJ4wlNY7KTgM+ES0vhz+KeiPw36fKC/ucAF9uFBOrTZm26SJCtaV27+xIo7cXdkTEhvOoh+XyxprU1qnim7CQdGK2HAyKRexYVShT3RItDElN+mkjiP2Ym+S3f01hv2EVal5WW6hU0ElmptaqJuBpXg6MbeFH2LDpU6CQ93zWIKnEvs0cayGU3glMfkOo1jQYewZzOuyz7FC95Jwo5OgUFfgeg993hh/eTqCTxOSm/iuk8DY0Ap1b2GhtHXxsfZN4j/X0fOx4auEIknEhqv4OiUn1L13Z/+xWfWVaG4q0dxUormpRHNTieamEs1NJZqbJ1Q0jHvdiJo5S2cVjSNOCHZhn3/SnuYnIvl3yomIIz7MXZMn9hydRCrR3FSiualEc1OJ5qYSzU0lmptKNDePjWgwcPePT7/g+4cp8wCW4GXaryK3tL+mLdD5x62ppllgu7bso8q/2HIbzGWdNmWnSJwAAAAASUVORK5CYII=);
+	background-size:11px 15px;
+}
+
+/**
+ *
+ * The touch icon (if available)
+ *
+ */
+#addToHomeScreen .addToHomeTouchIcon {
+	display:block;
+	float:left;
+	-webkit-border-radius:6px;
+	border-radius:6px;
+	-webkit-box-shadow:0 1px 3px rgba(0,0,0,0.5),
+		inset 0 0 2px rgba(255,255,255,0.9);
+	box-shadow:0 1px 3px rgba(0,0,0,0.5),
+		inset 0 0 2px rgba(255,255,255,0.9);
+	background-repeat:no-repeat;
+	width:57px; height:57px;
+	-webkit-background-size:57px 57px;
+	background-size:57px 57px;
+	margin:0 12px 0 0;
+	border:1px solid #333;
+	-webkit-background-clip:padding-box;
+	background-clip:padding-box;
+}

frontend/delta/scss/web/behavior.scss

@@ -0,0 +1,111 @@
+//	https://github.com/h5bp/Effeckt.css
+
+
+@mixin slide () {
+	-webkit-transform: translate3d(0, 0, 0);
+	transform: translate3d(0, 0, 0);
+
+	&.left {
+		-webkit-transform: translate3d(-100%, 0, 0);
+		transform: translate3d(-100%, 0, 0);
+	}
+
+	&.center {
+		-webkit-transform: translate3d(0, 0, 0);
+		transform: translate3d(0, 0, 0);
+	}
+
+	&.right {
+		-webkit-transform: translate3d(100%, 0, 0);
+		transform: translate3d(100%, 0, 0);
+		visibility: hidden;
+		display: none;
+		
+		&.transition {
+			visibility: visible;
+			display: block;
+		}
+ 	}
+
+	&.transition {
+		-webkit-transition-duration: .25s;
+		transition-duration: .25s;
+	}
+}
+
+//	http://coenraets.org/blog/2013/03/hardware-accelerated-page-transitions-for-mobile-web-apps-phonegap-apps/
+.page {
+	position: absolute;
+
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+
+	@include slide();
+}
+
+/*
+.registrationForm {
+	.steps {
+		.step {
+			position: absolute;
+
+//			top: 0;
+//			left: 0;
+//			width: 100%;
+//			height: 100%;
+
+			.slide();
+		}
+	}
+}
+*/
+
+//----------------------------------------------------------------------
+//	tentative 3D transformations
+/*
+.page {
+	transform: rotateY(   0deg) translateZ( 100px);
+
+	&.left {
+ 		transform: rotateY( -90deg) translateZ( 100px);
+	}
+
+	&.center {
+		transform: rotateY(   0deg) translateZ( 100px);
+	}
+
+	&.right {
+ 		transform: rotateY(  90deg) translateZ( 100px);
+ 	}
+}
+
+#mainDiv {
+	width: 100%;
+	height: 100%;
+	position: absolute;
+	transform-style: preserve-3d;
+
+	transition: transform 3s;
+
+	&.show-front  { transform: translateZ( -100px ) rotateY(    0deg ); }
+	&.show-back   { transform: translateZ( -100px ) rotateX( -180deg ); }
+	&.show-right  { transform: translateZ( -100px ) rotateY(  -90deg ); }
+	&.show-left   { transform: translateZ( -100px ) rotateY(   90deg ); }
+	&.show-top    { transform: translateZ( -100px ) rotateX(  -90deg ); }
+	&.show-bottom { transform: translateZ( -100px ) rotateX(   90deg ); }
+}
+*/
+//=======================================================================
+
+
+//=======================================================================
+
+
+
+
+
+
+
+//========================================================

frontend/delta/scss/web/checkbox.scss

@@ -0,0 +1,96 @@
+div.checkbox {
+	display: block;
+	margin-bottom: 20px;
+	@include border-radius(4px);
+	border: 2px solid white;
+	background-color: white;
+	width: 80px;
+	position: relative;
+	height: 32px;
+
+	&:before {
+		content: "ON";
+		padding-left: 9px;
+		line-height: 32px;
+		color: $solarize-Accent-Cyan;
+		font-size: 14px;
+		font-weight: 600;
+
+	}
+
+	&:after {
+		content: "OFF";
+//		padding-left: 12px;
+		padding-left: 25px;
+		line-height: 32px;
+		color: $solarize-Accent-Cyan;
+		font-size: 14px;
+		font-weight: 600;
+	}
+
+
+
+	label.check { 
+		display: block;
+		width: 40px;
+		height: 30px;
+		@include border-radius(3px);
+		background-color: $solarize-Accent-Magenta;
+		border: 1px solid $solarize-Accent-Magenta;
+		position: absolute;
+		top: 0px;
+		left: 0px;
+	}
+
+
+
+	input[type=checkbox] {
+		display: none;
+	}
+
+	input[type=checkbox]:checked + label.check {
+		top: 0px;
+		left: 38px;
+		@include animation(labelON, .2s, ease-in, 1);
+	}
+
+	input[type=checkbox] + label.check {
+		top: 0px;
+		left: 0px;
+		@include animation(labelOFF, .2s, ease-in, 1);
+	}
+
+	label.info {
+		position: absolute;
+		color: white;
+		top: 0px;
+		left: 100px;
+		line-height: 32px;
+		width: 200px;
+		font-size: 16pt;
+	}
+}
+
+@include keyframes(labelON) {
+	0% {
+		top: 0px;
+		left: 0px;
+	}
+	
+	100% { 
+		top: 0px;
+		left: 38px;
+	}
+}
+
+@include keyframes(labelOFF) {
+	0% {
+		top: 0px;
+		left: 38px;
+	}
+	
+	100% { 
+		top: 0px;
+		left: 0px;
+	}
+}

frontend/delta/scss/web/flexbox.scss

@@ -0,0 +1,138 @@
+// --------------------------------------------------
+//	Flexbox LESS mixins
+//	The spec: http://www.w3.org/TR/css3-flexbox
+//
+//	Other info:
+//	- http://philipwalton.github.io/solved-by-flexbox/
+// --------------------------------------------------
+ 
+// Flexbox display
+// flex or inline-flex
+.flex-display(@display: flex) {
+	display: ~"-webkit-@{display}";
+	display: ~"-moz-@{display}";
+	display: ~"-ms-@{display}box"; // IE10 uses -ms-flexbox
+	display: ~"-ms-@{display}"; // IE11
+	display: @display;
+}
+ 
+// The 'flex' shorthand
+// - applies to: flex items
+// <positive-number>, initial, auto, or none
+.flex(@columns: initial) {
+	-webkit-flex: @columns;
+	   -moz-flex: @columns;
+	    -ms-flex: @columns;
+	        flex: @columns;
+}
+ 
+// Flex Flow Direction
+// - applies to: flex containers
+// row | row-reverse | column | column-reverse
+.flex-direction(@direction: row) {
+	-webkit-flex-direction: @direction;
+	   -moz-flex-direction: @direction;
+	    -ms-flex-direction: @direction;
+	        flex-direction: @direction;
+}
+ 
+// Flex Line Wrapping
+// - applies to: flex containers
+// nowrap | wrap | wrap-reverse
+.flex-wrap(@wrap: nowrap) {
+	-webkit-flex-wrap: @wrap;
+	   -moz-flex-wrap: @wrap;
+	    -ms-flex-wrap: @wrap;
+	        flex-wrap: @wrap;
+}
+ 
+// Flex Direction and Wrap
+// - applies to: flex containers
+// <flex-direction> || <flex-wrap>
+.flex-flow(@flow) {
+	-webkit-flex-flow: @flow;
+	   -moz-flex-flow: @flow;
+	    -ms-flex-flow: @flow;
+	        flex-flow: @flow;
+}
+ 
+// Display Order
+// - applies to: flex items
+// <integer>
+.flex-order(@order: 0) {
+	-webkit-order: @order;
+	   -moz-order: @order;
+	    -ms-order: @order;
+	        order: @order;
+}
+ 
+// Flex grow factor
+// - applies to: flex items
+// <number>
+.flex-grow(@grow: 0) {
+	-webkit-flex-grow: @grow;
+	   -moz-flex-grow: @grow;
+	    -ms-flex-grow: @grow;
+	        flex-grow: @grow;
+}
+ 
+// Flex shr
+// - applies to: flex itemsink factor
+// <number> 
+.flex-shrink(@shrink: 1) {
+	-webkit-flex-shrink: @shrink;
+	   -moz-flex-shrink: @shrink;
+	    -ms-flex-shrink: @shrink;
+	        flex-shrink: @shrink;
+}
+ 
+// Flex basis
+// - the initial main size of the flex item
+// - applies to: flex itemsnitial main size of the flex item
+// <width> 
+.flex-basis(@width: auto) {
+	-webkit-flex-basis: @width;
+	   -moz-flex-basis: @width;
+	    -ms-flex-basis: @width;
+	        flex-basis: @width;
+}
+ 
+// Axis Alignment
+// - applies to: flex containers
+// flex-start | flex-end | center | space-between | space-around 
+.justify-content(@justify: flex-start) {
+	-webkit-justify-content: @justify;
+	   -moz-justify-content: @justify;
+	    -ms-justify-content: @justify;
+	        justify-content: @justify;
+}
+ 
+// Packing Flex Lines
+// - applies to: multi-line flex containers
+// flex-start | flex-end | center | space-between | space-around | stretch 
+.align-content(@align: stretch) {
+	-webkit-align-content: @align;
+	   -moz-align-content: @align;
+	    -ms-align-content: @align;
+	        align-content: @align;
+}
+ 
+// Cross-axis Alignment
+// - applies to: flex containers
+// flex-start | flex-end | center | baseline | stretch 
+.align-items(@align: stretch) {
+	-webkit-align-items: @align;
+	   -moz-align-items: @align;
+	    -ms-align-items: @align;
+	        align-items: @align;
+}
+ 
+// Cross-axis Alignment
+// - applies to: flex items
+// auto | flex-start | flex-end | center | baseline | stretch 
+.align-self(@align: auto) {
+	-webkit-align-self: @align;
+	   -moz-align-self: @align;
+	    -ms-align-self: @align;
+	        align-self: @align;
+}

frontend/delta/scss/web/mixin.scss

@@ -0,0 +1,107 @@
+@mixin border-radius ($radius) {
+	border-radius: $radius;
+	-moz-border-radius: $radius;
+	-webkit-border-radius: $radius;
+}
+
+@mixin font-feature-settings($foo, $bar) {
+	-webkit-font-feature-settings:"$foo","$bar";
+	-moz-font-feature-settings:"$foo=1, $bar=1";
+	-moz-font-feature-settings:"$foo","$bar";
+	-ms-font-feature-settings:"$foo","$bar";
+	-o-font-feature-settings:"$foo","$bar";
+	font-feature-settings:"$foo","$bar";
+}
+
+@mixin icon-font() {
+	font-family: 'clipperz-icons';
+	@include font-feature-settings("liga", "dlig");
+	-webkit-font-smoothing: antialiased;
+	text-rendering:optimizeLegibility;
+}
+
+@mixin password-font() {
+	font-family: 'clipperz-password';
+	-webkit-font-smoothing: antialiased;
+	text-rendering:optimizeLegibility;
+}
+
+@mixin animation ($animation, $duration, $timing-function:linear, $iteration-count:1, $fill-mode:none) {
+	-webkit-animation-name: $animation;
+	-webkit-animation-duration: $duration;
+	-webkit-animation-timing-function: $timing-function;
+	-webkit-animation-iteration-count: $iteration-count;
+	-webkit-animation-fill-mode: $fill-mode;
+
+	-moz-animation-name: $animation;
+	-moz-animation-duration: $duration;
+	-moz-animation-timing-function: $timing-function;
+	-moz-animation-iteration-count: $iteration-count;
+	-moz-animation-fill-mode: $fill-mode;
+
+	-ms-animation-name: $animation;
+	-ms-animation-duration: $duration;
+	-ms-animation-timing-function: $timing-function;
+	-ms-animation-iteration-count: $iteration-count;
+	-ms-animation-fill-mode: $fill-mode;
+
+	-o-animation-name: $animation;
+	-o-animation-duration: $duration;
+	-o-animation-timing-function: $timing-function;
+	-o-animation-iteration-count: $iteration-count;
+	-o-animation-fill-mode: $fill-mode;
+
+	animation-name: $animation;
+	animation-duration: $duration;
+	animation-timing-function: $timing-function;
+	animation-iteration-count: $iteration-count;
+	animation-fill-mode: $fill-mode;
+}
+
+@mixin transition ($item, $time, $function) {
+	-webkit-transition: $item $time $function;
+	-moz-transition: $item $time $function;
+	-o-transition: $item $time $function;
+	-ms-transition: $item $time $function;
+	transition: $item $time $function;
+}
+
+@mixin transform ($rotateAngle, $translateX, $translateY) {
+	-webkit-transform: rotate(  $rotateAngle) translate($translateX, $translateY);
+	   -moz-transform: rotate(  $rotateAngle) translate($translateX, $translateY);
+	    -ms-transform: rotate(  $rotateAngle) translate($translateX, $translateY);
+	     -o-transform: rotate(  $rotateAngle) translate($translateX, $translateY);
+	        transform: rotate(  $rotateAngle) translate($translateX, $translateY);
+}
+
+
+@mixin animation-delay ($delay) {
+	-webkit-animation-delay: $delay;
+	   -moz-animation-delay: $delay;
+	    -ms-animation-delay: $delay;
+	     -o-animation-delay: $delay;
+	        animation-delay: $delay;
+}
+
+@mixin box-shadow ($xOffset, $yOffset, $size, $color) {
+	-webkit-box-shadow: $xOffset $yOffset $size $color;	
+	   -moz-box-shadow: $xOffset $yOffset $size $color;	
+	    -ms-box-shadow: $xOffset $yOffset $size $color;	
+	     -o-box-shadow: $xOffset $yOffset $size $color;	
+	        box-shadow: $xOffset $yOffset $size $color;	
+}
+
+@mixin keyframes($name) {
+	@-webkit-keyframes #{$name} {
+		@content; 
+	}
+	@-moz-keyframes #{$name} {
+		@content;
+	}
+	@-ms-keyframes #{$name} {
+		@content;
+	}
+	@keyframes #{$name} {
+		@content;
+	} 
+}

frontend/delta/scss/web/overlay.scss

@@ -0,0 +1,115 @@
+@import "mixin";
+
+div.overlay {
+	z-index: 99999;
+	position: fixed;
+	top: 50%;
+	left: 50%;
+	width: 200px;
+	height: 200px;
+	margin-left: -100px;
+	margin-top: -100px;
+	background: rgba(0,0,0,0.8);
+	@include border-radius(20px);
+
+	.title {
+		color: #FFF;
+		font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
+		font-weight: bold;
+		text-align: center;
+		display: block;
+		font-size: 26px;
+		position: absolute;
+		bottom: 30px;
+		left: 0;
+		width: 100%;
+	}
+
+	.icon {
+		position: relative;
+		display: inline-block;
+		width: 128px;
+		height: 128px;
+		top: 40%;
+		left: 50%;
+		margin-left: -64px;
+		margin-top: -64px;
+
+		text-align: center;
+		vertical-align: middle;
+
+		@include icon-font();
+		font-size: 96pt;
+		color: white;
+		text-shadow: none;
+	}
+
+	&.ios-overlay-show {
+		@include animation(ios-overlay-show, 750ms);
+	}
+
+
+	&.ios-overlay-hide {
+		@include animation(ios-overlay-hide, 750ms, linear, 1, forwards);
+	}
+
+	//	http://37signals.com/svn/posts/2577-loading-spinner-animation-using-css-and-webkit
+	div.spinner {
+		position: relative;
+		width: 100px;
+		height: 100px;
+		left: 50% !important;
+		top: 40% !important;
+
+		margin-left: -50px;
+		margin-top: -50px;
+
+//		display: inline-block;
+		display: block;
+
+		div {
+			width: 12%;
+			height: 26%;
+			background: #ffffff;
+			position: absolute;
+			left: 44.5%;
+			top: 37%;
+			opacity: 0;
+			@include animation(overlay-spin, 1s, linear, infinite);
+			@include border-radius(50px);
+			@include box-shadow(0, 0, 3px, rgba(0,0,0,0.2));
+		}
+
+		div.bar01 {@include transform(  0deg, 0, -142%); @include animation-delay(-0.00000s);}    
+		div.bar02 {@include transform( 30deg, 0, -142%); @include animation-delay(-0.91670s);}
+		div.bar03 {@include transform( 60deg, 0, -142%); @include animation-delay(-0.83300s);}
+		div.bar04 {@include transform( 90deg, 0, -142%); @include animation-delay(-0.75000s);}
+		div.bar05 {@include transform(120deg, 0, -142%); @include animation-delay(-0.66700s);}
+		div.bar06 {@include transform(150deg, 0, -142%); @include animation-delay(-0.58330s);}
+		div.bar07 {@include transform(180deg, 0, -142%); @include animation-delay(-0.50000s);}
+		div.bar08 {@include transform(210deg, 0, -142%); @include animation-delay(-0.41667s);}
+		div.bar09 {@include transform(240deg, 0, -142%); @include animation-delay(-0.33300s);}
+		div.bar10 {@include transform(270deg, 0, -142%); @include animation-delay(-0.25000s);}
+		div.bar11 {@include transform(300deg, 0, -142%); @include animation-delay(-0.16670s);}
+		div.bar12 {@include transform(330deg, 0, -142%); @include animation-delay(-0.08330s);}
+	}
+}
+
+//========================================================
+
+@include keyframes(overlay-spin) {
+	from {opacity: 1;}
+	to {opacity: 0.25;}
+}
+
+@include keyframes(ios-overlay-show) {
+	0% { opacity: 0; }
+	100% { opacity: 1; }
+}
+
+@include keyframes(ios-overlay-hide) {
+	0% { opacity: 1; }
+	100% { opacity: 0; }
+}
+
+//========================================================