CSS fix for back and next buttons

toddwprice · Oct 7, 2011 · 76b6b4c · 76b6b4c
1 parent 5ef8a69
commit 76b6b4c
Show file tree

Hide file tree

Showing 13 changed files with 173 additions and 68 deletions.
diff --git a/css/apple.css b/css/apple.css
@@ -101,7 +101,6 @@ div.jsTouch div.toolbar h1{
 	width: 22px;
 	display: inline-block;
 	position: absolute;
-	top: 1px;
 	-webkit-background-clip: content;
 }
 
@@ -111,12 +110,12 @@ div.jsTouch div.toolbar h1{
 	margin-left: 8px;
 }
 
-.back > span {
-	top: 0px;
-	left: -11px;
-	height: 25px;
+.back > span.s2 {
+	top: -1px;
+	left: -9px;
+	height: 27px;
+	width: 12px;
 	background: -webkit-gradient(linear, 0 0, 0 100%, color-stop(0,#496387), color-stop(.03,#9CB0CF), color-stop(.6,#455E80), color-stop(1,#5D7EAB));
-	border: 0px;
 	-webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAABGCAYAAADb7SQ4AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAiNJREFUeNrEWb9LQlEUvj5BcHoQvMnVKXD1D3CLwqBJbHJsazQaWoSCxgbHJiMIAiNok6AhCDdXVycnJ8EQOgeOYaG+d39998KH+HyP753zzjnfd325xfdSgVeV8B6BScuEV0IRSbxHeCMk/AVFXCA8ScQKSXxPqK0fQBBfE5r/D+Y8VzUT9jb94DPimqRYIYkrhGcpKhhxIqTxrpNcExdlQJTTTnRJnCc8ykhUSOIOoZ71ZFfEZ4S2zgUu+rguxZRHEnPbfKRVsOtUl0RtYpOLTYljIS2Z3nVk2DY9SbNCEt8RDm0rUpe4La1jvXSqmtum72raZI24KuNQIYl/nSGSOJb0Jq61M0pxhjwK9304hUjHGSKILzc5Q5drUzttdYY+I97pDH1FzG0zNFUb04gTG4kzJS5kdYauiZtZnaFr4ooKsCIVaDHxKAQxt1NBnGIVHfGCcEQYh3jGU8KBfMKLiyM+lgzAq/qT0ArVTg+Ei1B9fEPoovV4fcfQd2HedScX39GprwGTNjJn0maTELN6IuSzECLB6T5x2eM66jQgnIeSxa60GnS3uL56tr7b1Ai0JPVwYi6yho2U2lgfKym19VxjMRHzEGbvS9K+RBPzetGVUpf29lZHSl2/DMnLvwh1ZMQrKW3Ic4fvJOZS6ZMQW5hpmpT63DvtlFLfm7bBNruM2C2yXb7y3U6ZpRS5P/4jpUjihRTbCJ3q1eL3GMMfAQYAJmB6SBO619IAAAAASUVORK5CYII=);
 	-webkit-mask-size: 13px 27px;
 	-webkit-mask-repeat: no-repeat;
@@ -126,7 +125,23 @@ div.jsTouch div.toolbar h1{
 	-webkit-box-sizing: border-box;	
 }	
 
-.back.clicked > span {
+.back > span.s1 {
+	top: -1px;
+	left: -10px;
+	height: 27px;
+	width: 12px;
+	background: #555;
+	-webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAABGCAYAAADb7SQ4AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAiNJREFUeNrEWb9LQlEUvj5BcHoQvMnVKXD1D3CLwqBJbHJsazQaWoSCxgbHJiMIAiNok6AhCDdXVycnJ8EQOgeOYaG+d39998KH+HyP753zzjnfd325xfdSgVeV8B6BScuEV0IRSbxHeCMk/AVFXCA8ScQKSXxPqK0fQBBfE5r/D+Y8VzUT9jb94DPimqRYIYkrhGcpKhhxIqTxrpNcExdlQJTTTnRJnCc8ykhUSOIOoZ71ZFfEZ4S2zgUu+rguxZRHEnPbfKRVsOtUl0RtYpOLTYljIS2Z3nVk2DY9SbNCEt8RDm0rUpe4La1jvXSqmtum72raZI24KuNQIYl/nSGSOJb0Jq61M0pxhjwK9304hUjHGSKILzc5Q5drUzttdYY+I97pDH1FzG0zNFUb04gTG4kzJS5kdYauiZtZnaFr4ooKsCIVaDHxKAQxt1NBnGIVHfGCcEQYh3jGU8KBfMKLiyM+lgzAq/qT0ArVTg+Ei1B9fEPoovV4fcfQd2HedScX39GprwGTNjJn0maTELN6IuSzECLB6T5x2eM66jQgnIeSxa60GnS3uL56tr7b1Ai0JPVwYi6yho2U2lgfKym19VxjMRHzEGbvS9K+RBPzetGVUpf29lZHSl2/DMnLvwh1ZMQrKW3Ic4fvJOZS6ZMQW5hpmpT63DvtlFLfm7bBNruM2C2yXb7y3U6ZpRS5P/4jpUjihRTbCJ3q1eL3GMMfAQYAJmB6SBO619IAAAAASUVORK5CYII=);
+	-webkit-mask-size: 13px 27px;
+	-webkit-mask-repeat: no-repeat;
+	-webkit-mask-position-x: 0px;
+	-webkit-mask-position-y: 0px;
+	-webkit-mask-clip: border;
+	-webkit-box-sizing: border-box;	
+	-webkit-box-shadow: 0px 1px 0px #bbb;
+}	
+
+.back.clicked > span.s2 {
 	background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#7AD62B),  to(#56961E));
 }
 
@@ -136,20 +151,39 @@ div.jsTouch div.toolbar h1{
 	margin-right: 8px;
 }
 
-.next > span {
-	right: -7px;
-	background: -webkit-gradient(linear, left top, right bottom, color-stop(0,#496387), color-stop(.03,#9CB0CF), color-stop(.6,#455E80), color-stop(1,#5D7EAB));
-	border-right: solid 1px rgba(79, 79, 79, 0.75);
-	border-top: solid 1px rgba(79, 79, 79, 0.75);
-	-webkit-border-top-left-radius: 6px;
-	-webkit-border-bottom-right-radius: 6px;
-	-webkit-transform: rotate(45deg);
-	-webkit-mask-image: -webkit-gradient(linear, right top, left bottom, from(#000000), color-stop(0.37,#000000), color-stop(0.37, transparent), to(transparent));
-	-webkit-background-clip: content
-}
+.next > span.s2 {
+	top: -1px;
+	right: -9px;
+	height: 27px;
+	width: 12px;
+	background: -webkit-gradient(linear, 0 0, 0 100%, color-stop(0,#496387), color-stop(.03,#9CB0CF), color-stop(.6,#455E80), color-stop(1,#5D7EAB));
+	-webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAABGCAYAAADb7SQ4AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAZdEVYdFNvZnR3YXJlAEFkb2JlIEltYWdlUmVhZHlxyWU8AAACk0lEQVRoQ8WZP2gUQRTGLwYCVlaBgK1tOokgBI50QTFgJQqBlBaWgoFgq72FZSrFSjAk2NkKtgEr25AiELASLgTz/ULmuGRvdmdn3rx78DW3cL/58755b2fnRmfnx4PB4L50JLnFLZGWpO/SHTeqQICJZemrtOAFD2B4a9LuLMAwn0tvPeBzSq7/U0Av9NvnmgOIgUeCrks/asEn93iSQZKRbCRdlYiBgWEvbLZYg9wGhndX2pduW8O7wPBWpC/SvCU8BQzvifRhFmCYL6XXVvCYnWL/f64HT6W90gH0BcP7Jw2lXyXw1D2eZJDhZPo9bzA8vF3k8ZwZh4kyY2yWVUpLwAwgu5SWgoFTSt/13W8LMMw3Vz5P5ufYKfbnvUqp1YwZTK9SagkGHkopVa01rMHAgHa2yzXAwOlcPknRUloLDPyRFC2lNcHAKaVYrRGWdmpLpka77AXG40PpZxhd7aUOHDz+TRqXUi8wA7hWSj3BwJkxTcSC1x7fTLwt7xmHASzPCjy+EWjzYI1nh7PYY9riVe+l/iPoY2nkCf4rIC/7J+ydF5gjk1cfZnwZXuAtsa5da3iAdwRtXOTUzmqAlMRG1ASztCQT++sG/i3SQ4lMnho19hi7bLRBa2Q1L+0cEGPbeM34mUBJNwWWS70taPLdiBX4o6DvY8taK6sPrpKJG6HkKPXxoUirXRk8bTQlS83HEw6IqFfbpp8LDiUu+8tNDpi93JRY5uzIAb/qYxurAwTLYJ3i6JPVHA50Eb1sExthKphjcChxFptEyh6HztAMysi7wNiG5b3sDC2jDRw6wyLb5GR1ozP0mDG2cf/EF+0MLWd8006tnWEtMLZ5IJ1aArqSC7tQ4lygwcfJnaHlSlwADTGshYz22ugAAAAASUVORK5CYII=);
+	-webkit-mask-size: 13px 27px;
+	-webkit-mask-repeat: no-repeat;
+	-webkit-mask-position-x: 0px;
+	-webkit-mask-position-y: 0px;
+	-webkit-mask-clip: border;
+	-webkit-box-sizing: border-box;	
+}	
 
-.next.clicked > span {
-	background-image: -webkit-gradient(linear, left top, right bottom, from(#7AD62B), to(#56961E));
+.next > span.s1 {
+	top: -1px;
+	right: -10px;
+	height: 27px;
+	width: 12px;
+	background: #555;
+	-webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAABGCAYAAADb7SQ4AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAZdEVYdFNvZnR3YXJlAEFkb2JlIEltYWdlUmVhZHlxyWU8AAACk0lEQVRoQ8WZP2gUQRTGLwYCVlaBgK1tOokgBI50QTFgJQqBlBaWgoFgq72FZSrFSjAk2NkKtgEr25AiELASLgTz/ULmuGRvdmdn3rx78DW3cL/58755b2fnRmfnx4PB4L50JLnFLZGWpO/SHTeqQICJZemrtOAFD2B4a9LuLMAwn0tvPeBzSq7/U0Av9NvnmgOIgUeCrks/asEn93iSQZKRbCRdlYiBgWEvbLZYg9wGhndX2pduW8O7wPBWpC/SvCU8BQzvifRhFmCYL6XXVvCYnWL/f64HT6W90gH0BcP7Jw2lXyXw1D2eZJDhZPo9bzA8vF3k8ZwZh4kyY2yWVUpLwAwgu5SWgoFTSt/13W8LMMw3Vz5P5ufYKfbnvUqp1YwZTK9SagkGHkopVa01rMHAgHa2yzXAwOlcPknRUloLDPyRFC2lNcHAKaVYrRGWdmpLpka77AXG40PpZxhd7aUOHDz+TRqXUi8wA7hWSj3BwJkxTcSC1x7fTLwt7xmHASzPCjy+EWjzYI1nh7PYY9riVe+l/iPoY2nkCf4rIC/7J+ydF5gjk1cfZnwZXuAtsa5da3iAdwRtXOTUzmqAlMRG1ASztCQT++sG/i3SQ4lMnho19hi7bLRBa2Q1L+0cEGPbeM34mUBJNwWWS70taPLdiBX4o6DvY8taK6sPrpKJG6HkKPXxoUirXRk8bTQlS83HEw6IqFfbpp8LDiUu+8tNDpi93JRY5uzIAb/qYxurAwTLYJ3i6JPVHA50Eb1sExthKphjcChxFptEyh6HztAMysi7wNiG5b3sDC2jDRw6wyLb5GR1ozP0mDG2cf/EF+0MLWd8006tnWEtMLZ5IJ1aArqSC7tQ4lygwcfJnaHlSlwADTGshYz22ugAAAAASUVORK5CYII=);
+	-webkit-mask-size: 13px 27px;
+	-webkit-mask-repeat: no-repeat;
+	-webkit-mask-position-x: 0px;
+	-webkit-mask-position-y: 0px;
+	-webkit-mask-clip: border;
+	-webkit-box-sizing: border-box;	
+	-webkit-box-shadow: 0px 1px 0px #bbb;
+}	
+
+.next.clicked > span.s2 {
+	background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#7AD62B),  to(#56961E));
 }
 
 /* Sergemted Button */

diff --git a/css/ipad-dark.css b/css/ipad-dark.css
@@ -110,22 +110,38 @@ div.jsTouch div.toolbar h1{
 	margin-left: 8px;
 }
 
-.back > span {
-	top: 0px;
-	left: -10px;
-	height: 25px;
+.back > span.s2 {
+	top: -1px;
+	left: -9px;
+	height: 27px;
+	width: 12px;
 	background: -webkit-gradient(linear, 0 0, 0 100%, from(#A6A6A6), to(#B5B5B5), color-stop(.5,#7A7A7A),color-stop(.5,#5C5C5C));
-	border: 0px;
 	-webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAABGCAYAAADb7SQ4AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAiNJREFUeNrEWb9LQlEUvj5BcHoQvMnVKXD1D3CLwqBJbHJsazQaWoSCxgbHJiMIAiNok6AhCDdXVycnJ8EQOgeOYaG+d39998KH+HyP753zzjnfd325xfdSgVeV8B6BScuEV0IRSbxHeCMk/AVFXCA8ScQKSXxPqK0fQBBfE5r/D+Y8VzUT9jb94DPimqRYIYkrhGcpKhhxIqTxrpNcExdlQJTTTnRJnCc8ykhUSOIOoZ71ZFfEZ4S2zgUu+rguxZRHEnPbfKRVsOtUl0RtYpOLTYljIS2Z3nVk2DY9SbNCEt8RDm0rUpe4La1jvXSqmtum72raZI24KuNQIYl/nSGSOJb0Jq61M0pxhjwK9304hUjHGSKILzc5Q5drUzttdYY+I97pDH1FzG0zNFUb04gTG4kzJS5kdYauiZtZnaFr4ooKsCIVaDHxKAQxt1NBnGIVHfGCcEQYh3jGU8KBfMKLiyM+lgzAq/qT0ArVTg+Ei1B9fEPoovV4fcfQd2HedScX39GprwGTNjJn0maTELN6IuSzECLB6T5x2eM66jQgnIeSxa60GnS3uL56tr7b1Ai0JPVwYi6yho2U2lgfKym19VxjMRHzEGbvS9K+RBPzetGVUpf29lZHSl2/DMnLvwh1ZMQrKW3Ic4fvJOZS6ZMQW5hpmpT63DvtlFLfm7bBNruM2C2yXb7y3U6ZpRS5P/4jpUjihRTbCJ3q1eL3GMMfAQYAJmB6SBO619IAAAAASUVORK5CYII=);
-	-webkit-mask-size: 13px 26px;
+	-webkit-mask-size: 13px 27px;
+	-webkit-mask-repeat: no-repeat;
+	-webkit-mask-position-x: 0px;
+	-webkit-mask-position-y: 0px;
+	-webkit-mask-clip: border;
+	-webkit-box-sizing: border-box;	
+}	
+
+.back > span.s1 {
+	top: -1px;
+	left: -10px;
+	height: 27px;
+	width: 12px;
+	background: #000;
+	-webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAABGCAYAAADb7SQ4AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAiNJREFUeNrEWb9LQlEUvj5BcHoQvMnVKXD1D3CLwqBJbHJsazQaWoSCxgbHJiMIAiNok6AhCDdXVycnJ8EQOgeOYaG+d39998KH+HyP753zzjnfd325xfdSgVeV8B6BScuEV0IRSbxHeCMk/AVFXCA8ScQKSXxPqK0fQBBfE5r/D+Y8VzUT9jb94DPimqRYIYkrhGcpKhhxIqTxrpNcExdlQJTTTnRJnCc8ykhUSOIOoZ71ZFfEZ4S2zgUu+rguxZRHEnPbfKRVsOtUl0RtYpOLTYljIS2Z3nVk2DY9SbNCEt8RDm0rUpe4La1jvXSqmtum72raZI24KuNQIYl/nSGSOJb0Jq61M0pxhjwK9304hUjHGSKILzc5Q5drUzttdYY+I97pDH1FzG0zNFUb04gTG4kzJS5kdYauiZtZnaFr4ooKsCIVaDHxKAQxt1NBnGIVHfGCcEQYh3jGU8KBfMKLiyM+lgzAq/qT0ArVTg+Ei1B9fEPoovV4fcfQd2HedScX39GprwGTNjJn0maTELN6IuSzECLB6T5x2eM66jQgnIeSxa60GnS3uL56tr7b1Ai0JPVwYi6yho2U2lgfKym19VxjMRHzEGbvS9K+RBPzetGVUpf29lZHSl2/DMnLvwh1ZMQrKW3Ic4fvJOZS6ZMQW5hpmpT63DvtlFLfm7bBNruM2C2yXb7y3U6ZpRS5P/4jpUjihRTbCJ3q1eL3GMMfAQYAJmB6SBO619IAAAAASUVORK5CYII=);
+	-webkit-mask-size: 13px 27px;
 	-webkit-mask-repeat: no-repeat;
 	-webkit-mask-position-x: 0px;
 	-webkit-mask-position-y: 0px;
 	-webkit-mask-clip: border;
 	-webkit-box-sizing: border-box;	
+	-webkit-box-shadow: 0px 1px 0px #bbb;
 }	
 
-.back.clicked > span {
+.back.clicked > span.s2 {
 	background-image: -webkit-gradient(linear, left top, right bottom, from(#7AD62B),  to(#56961E));
 }
 
@@ -135,19 +151,38 @@ div.jsTouch div.toolbar h1{
 	margin-right: 8px;
 }
 
-.next > span {
-	right: -7px;
-	background: -webkit-gradient(linear, left top, right bottom, from(#A6A6A6), to(#B5B5B5), color-stop(.5,#7A7A7A),color-stop(.5,#5C5C5C));
-	border-right: solid 1px #222222;
-	border-top: solid 1px #222222;
-	-webkit-border-top-left-radius: 6px;
-	-webkit-border-bottom-right-radius: 6px;
-	-webkit-transform: rotate(45deg);
-	-webkit-mask-image: -webkit-gradient(linear, right top, left bottom, from(#000000), color-stop(0.38,#000000), color-stop(0.38, transparent), to(transparent));
-	-webkit-background-clip: content
-}
+.next > span.s2 {
+	top: -1px;
+	right: -9px;
+	height: 27px;
+	width: 12px;
+	background: -webkit-gradient(linear, 0 0, 0 100%, from(#A6A6A6), to(#B5B5B5), color-stop(.5,#7A7A7A),color-stop(.5,#5C5C5C));
+	-webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAABGCAYAAADb7SQ4AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAZdEVYdFNvZnR3YXJlAEFkb2JlIEltYWdlUmVhZHlxyWU8AAACk0lEQVRoQ8WZP2gUQRTGLwYCVlaBgK1tOokgBI50QTFgJQqBlBaWgoFgq72FZSrFSjAk2NkKtgEr25AiELASLgTz/ULmuGRvdmdn3rx78DW3cL/58755b2fnRmfnx4PB4L50JLnFLZGWpO/SHTeqQICJZemrtOAFD2B4a9LuLMAwn0tvPeBzSq7/U0Av9NvnmgOIgUeCrks/asEn93iSQZKRbCRdlYiBgWEvbLZYg9wGhndX2pduW8O7wPBWpC/SvCU8BQzvifRhFmCYL6XXVvCYnWL/f64HT6W90gH0BcP7Jw2lXyXw1D2eZJDhZPo9bzA8vF3k8ZwZh4kyY2yWVUpLwAwgu5SWgoFTSt/13W8LMMw3Vz5P5ufYKfbnvUqp1YwZTK9SagkGHkopVa01rMHAgHa2yzXAwOlcPknRUloLDPyRFC2lNcHAKaVYrRGWdmpLpka77AXG40PpZxhd7aUOHDz+TRqXUi8wA7hWSj3BwJkxTcSC1x7fTLwt7xmHASzPCjy+EWjzYI1nh7PYY9riVe+l/iPoY2nkCf4rIC/7J+ydF5gjk1cfZnwZXuAtsa5da3iAdwRtXOTUzmqAlMRG1ASztCQT++sG/i3SQ4lMnho19hi7bLRBa2Q1L+0cEGPbeM34mUBJNwWWS70taPLdiBX4o6DvY8taK6sPrpKJG6HkKPXxoUirXRk8bTQlS83HEw6IqFfbpp8LDiUu+8tNDpi93JRY5uzIAb/qYxurAwTLYJ3i6JPVHA50Eb1sExthKphjcChxFptEyh6HztAMysi7wNiG5b3sDC2jDRw6wyLb5GR1ozP0mDG2cf/EF+0MLWd8006tnWEtMLZ5IJ1aArqSC7tQ4lygwcfJnaHlSlwADTGshYz22ugAAAAASUVORK5CYII=);
+	-webkit-mask-size: 13px 27px;
+	-webkit-mask-repeat: no-repeat;
+	-webkit-mask-position-x: 0px;
+	-webkit-mask-position-y: 0px;
+	-webkit-mask-clip: border;
+	-webkit-box-sizing: border-box;	
+}	
+
+.next > span.s1 {
+	top: -1px;
+	right: -10px;
+	height: 27px;
+	width: 12px;
+	background: #555;
+	-webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAABGCAYAAADb7SQ4AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAZdEVYdFNvZnR3YXJlAEFkb2JlIEltYWdlUmVhZHlxyWU8AAACk0lEQVRoQ8WZP2gUQRTGLwYCVlaBgK1tOokgBI50QTFgJQqBlBaWgoFgq72FZSrFSjAk2NkKtgEr25AiELASLgTz/ULmuGRvdmdn3rx78DW3cL/58755b2fnRmfnx4PB4L50JLnFLZGWpO/SHTeqQICJZemrtOAFD2B4a9LuLMAwn0tvPeBzSq7/U0Av9NvnmgOIgUeCrks/asEn93iSQZKRbCRdlYiBgWEvbLZYg9wGhndX2pduW8O7wPBWpC/SvCU8BQzvifRhFmCYL6XXVvCYnWL/f64HT6W90gH0BcP7Jw2lXyXw1D2eZJDhZPo9bzA8vF3k8ZwZh4kyY2yWVUpLwAwgu5SWgoFTSt/13W8LMMw3Vz5P5ufYKfbnvUqp1YwZTK9SagkGHkopVa01rMHAgHa2yzXAwOlcPknRUloLDPyRFC2lNcHAKaVYrRGWdmpLpka77AXG40PpZxhd7aUOHDz+TRqXUi8wA7hWSj3BwJkxTcSC1x7fTLwt7xmHASzPCjy+EWjzYI1nh7PYY9riVe+l/iPoY2nkCf4rIC/7J+ydF5gjk1cfZnwZXuAtsa5da3iAdwRtXOTUzmqAlMRG1ASztCQT++sG/i3SQ4lMnho19hi7bLRBa2Q1L+0cEGPbeM34mUBJNwWWS70taPLdiBX4o6DvY8taK6sPrpKJG6HkKPXxoUirXRk8bTQlS83HEw6IqFfbpp8LDiUu+8tNDpi93JRY5uzIAb/qYxurAwTLYJ3i6JPVHA50Eb1sExthKphjcChxFptEyh6HztAMysi7wNiG5b3sDC2jDRw6wyLb5GR1ozP0mDG2cf/EF+0MLWd8006tnWEtMLZ5IJ1aArqSC7tQ4lygwcfJnaHlSlwADTGshYz22ugAAAAASUVORK5CYII=);
+	-webkit-mask-size: 13px 27px;
+	-webkit-mask-repeat: no-repeat;
+	-webkit-mask-position-x: 0px;
+	-webkit-mask-position-y: 0px;
+	-webkit-mask-clip: border;
+	-webkit-box-sizing: border-box;	
+	-webkit-box-shadow: 0px 1px 0px #bbb;
+}	
 
-.next.clicked > span {
+.next.clicked > span.s2 {
 	background-image: -webkit-gradient(linear, left top, right bottom, from(#7AD62B), to(#56961E));
 }
 

diff --git a/css/ipad-light.css b/css/ipad-light.css
@@ -93,7 +93,7 @@ div.jsTouch div.toolbar h1{
 	text-shadow: #666666 1px 1px 1px;
 }
 
-.button:hover, .button.clicked {
+.button.clicked {
 	border: 1px solid #2c5a97;
 	background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#24CCFF), to(#1A83D4), color-stop(.5,#1A88DB),color-stop(.5,#187BC7));
 }
@@ -113,12 +113,12 @@ div.jsTouch div.toolbar h1{
 	margin-left: 8px;
 }
 
-.back > span {
-	top: 0px;
-	left: -11px;
-	height: 25px;
+.back > span.s2 {
+	top: -1px;
+	left: -9px;
+	height: 27px;
+	width: 12px;
 	background: -webkit-gradient(linear, 0 0, 0 100%, from(#BCBDBF), to(#717882));
-	border: 0px;
 	-webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAABGCAYAAADb7SQ4AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAiNJREFUeNrEWb9LQlEUvj5BcHoQvMnVKXD1D3CLwqBJbHJsazQaWoSCxgbHJiMIAiNok6AhCDdXVycnJ8EQOgeOYaG+d39998KH+HyP753zzjnfd325xfdSgVeV8B6BScuEV0IRSbxHeCMk/AVFXCA8ScQKSXxPqK0fQBBfE5r/D+Y8VzUT9jb94DPimqRYIYkrhGcpKhhxIqTxrpNcExdlQJTTTnRJnCc8ykhUSOIOoZ71ZFfEZ4S2zgUu+rguxZRHEnPbfKRVsOtUl0RtYpOLTYljIS2Z3nVk2DY9SbNCEt8RDm0rUpe4La1jvXSqmtum72raZI24KuNQIYl/nSGSOJb0Jq61M0pxhjwK9304hUjHGSKILzc5Q5drUzttdYY+I97pDH1FzG0zNFUb04gTG4kzJS5kdYauiZtZnaFr4ooKsCIVaDHxKAQxt1NBnGIVHfGCcEQYh3jGU8KBfMKLiyM+lgzAq/qT0ArVTg+Ei1B9fEPoovV4fcfQd2HedScX39GprwGTNjJn0maTELN6IuSzECLB6T5x2eM66jQgnIeSxa60GnS3uL56tr7b1Ai0JPVwYi6yho2U2lgfKym19VxjMRHzEGbvS9K+RBPzetGVUpf29lZHSl2/DMnLvwh1ZMQrKW3Ic4fvJOZS6ZMQW5hpmpT63DvtlFLfm7bBNruM2C2yXb7y3U6ZpRS5P/4jpUjihRTbCJ3q1eL3GMMfAQYAJmB6SBO619IAAAAASUVORK5CYII=);
 	-webkit-mask-size: 13px 27px;
 	-webkit-mask-repeat: no-repeat;
@@ -128,7 +128,23 @@ div.jsTouch div.toolbar h1{
 	-webkit-box-sizing: border-box;	
 }	
 
-.button:hover > span, .back.clicked > span {
+.back > span.s1 {
+	top: -1px;
+	left: -10px;
+	height: 27px;
+	width: 12px;
+	background: #444;
+	-webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAABGCAYAAADb7SQ4AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAiNJREFUeNrEWb9LQlEUvj5BcHoQvMnVKXD1D3CLwqBJbHJsazQaWoSCxgbHJiMIAiNok6AhCDdXVycnJ8EQOgeOYaG+d39998KH+HyP753zzjnfd325xfdSgVeV8B6BScuEV0IRSbxHeCMk/AVFXCA8ScQKSXxPqK0fQBBfE5r/D+Y8VzUT9jb94DPimqRYIYkrhGcpKhhxIqTxrpNcExdlQJTTTnRJnCc8ykhUSOIOoZ71ZFfEZ4S2zgUu+rguxZRHEnPbfKRVsOtUl0RtYpOLTYljIS2Z3nVk2DY9SbNCEt8RDm0rUpe4La1jvXSqmtum72raZI24KuNQIYl/nSGSOJb0Jq61M0pxhjwK9304hUjHGSKILzc5Q5drUzttdYY+I97pDH1FzG0zNFUb04gTG4kzJS5kdYauiZtZnaFr4ooKsCIVaDHxKAQxt1NBnGIVHfGCcEQYh3jGU8KBfMKLiyM+lgzAq/qT0ArVTg+Ei1B9fEPoovV4fcfQd2HedScX39GprwGTNjJn0maTELN6IuSzECLB6T5x2eM66jQgnIeSxa60GnS3uL56tr7b1Ai0JPVwYi6yho2U2lgfKym19VxjMRHzEGbvS9K+RBPzetGVUpf29lZHSl2/DMnLvwh1ZMQrKW3Ic4fvJOZS6ZMQW5hpmpT63DvtlFLfm7bBNruM2C2yXb7y3U6ZpRS5P/4jpUjihRTbCJ3q1eL3GMMfAQYAJmB6SBO619IAAAAASUVORK5CYII=);
+	-webkit-mask-size: 13px 27px;
+	-webkit-mask-repeat: no-repeat;
+	-webkit-mask-position-x: 0px;
+	-webkit-mask-position-y: 0px;
+	-webkit-mask-clip: border;
+	-webkit-box-sizing: border-box;	
+	-webkit-box-shadow: 0px 1px 0px #bbb;
+}	
+
+.back.clicked > span.s2 {
 	background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#24CCFF), to(#1A83D4), color-stop(.5,#1A88DB),color-stop(.5,#187BC7));
 }
 
@@ -138,19 +154,38 @@ div.jsTouch div.toolbar h1{
 	margin-right: 8px;
 }
 
-.next > span {
-	right: -7px;
+.next > span.s2 {
+	top: -1px;
+	right: -9px;
+	height: 27px;
+	width: 12px;
 	background: -webkit-gradient(linear, left top, right bottom, from(#BCBDBF), to(#717882));
-	border-right: solid 1px #222222;
-	border-top: solid 1px #222222;
-	-webkit-border-top-left-radius: 6px;
-	-webkit-border-bottom-right-radius: 6px;
-	-webkit-transform: rotate(45deg);
-	-webkit-mask-image: -webkit-gradient(linear, right top, left bottom, from(#000000), color-stop(0.38,#000000), color-stop(0.38, transparent), to(transparent));
-	-webkit-background-clip: content
-}
+	-webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAABGCAYAAADb7SQ4AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAZdEVYdFNvZnR3YXJlAEFkb2JlIEltYWdlUmVhZHlxyWU8AAACk0lEQVRoQ8WZP2gUQRTGLwYCVlaBgK1tOokgBI50QTFgJQqBlBaWgoFgq72FZSrFSjAk2NkKtgEr25AiELASLgTz/ULmuGRvdmdn3rx78DW3cL/58755b2fnRmfnx4PB4L50JLnFLZGWpO/SHTeqQICJZemrtOAFD2B4a9LuLMAwn0tvPeBzSq7/U0Av9NvnmgOIgUeCrks/asEn93iSQZKRbCRdlYiBgWEvbLZYg9wGhndX2pduW8O7wPBWpC/SvCU8BQzvifRhFmCYL6XXVvCYnWL/f64HT6W90gH0BcP7Jw2lXyXw1D2eZJDhZPo9bzA8vF3k8ZwZh4kyY2yWVUpLwAwgu5SWgoFTSt/13W8LMMw3Vz5P5ufYKfbnvUqp1YwZTK9SagkGHkopVa01rMHAgHa2yzXAwOlcPknRUloLDPyRFC2lNcHAKaVYrRGWdmpLpka77AXG40PpZxhd7aUOHDz+TRqXUi8wA7hWSj3BwJkxTcSC1x7fTLwt7xmHASzPCjy+EWjzYI1nh7PYY9riVe+l/iPoY2nkCf4rIC/7J+ydF5gjk1cfZnwZXuAtsa5da3iAdwRtXOTUzmqAlMRG1ASztCQT++sG/i3SQ4lMnho19hi7bLRBa2Q1L+0cEGPbeM34mUBJNwWWS70taPLdiBX4o6DvY8taK6sPrpKJG6HkKPXxoUirXRk8bTQlS83HEw6IqFfbpp8LDiUu+8tNDpi93JRY5uzIAb/qYxurAwTLYJ3i6JPVHA50Eb1sExthKphjcChxFptEyh6HztAMysi7wNiG5b3sDC2jDRw6wyLb5GR1ozP0mDG2cf/EF+0MLWd8006tnWEtMLZ5IJ1aArqSC7tQ4lygwcfJnaHlSlwADTGshYz22ugAAAAASUVORK5CYII=);
+	-webkit-mask-size: 13px 27px;
+	-webkit-mask-repeat: no-repeat;
+	-webkit-mask-position-x: 0px;
+	-webkit-mask-position-y: 0px;
+	-webkit-mask-clip: border;
+	-webkit-box-sizing: border-box;	
+}	
+
+.next > span.s1 {
+	top: -1px;
+	right: -10px;
+	height: 27px;
+	width: 12px;
+	background: #555;
+	-webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAABGCAYAAADb7SQ4AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAZdEVYdFNvZnR3YXJlAEFkb2JlIEltYWdlUmVhZHlxyWU8AAACk0lEQVRoQ8WZP2gUQRTGLwYCVlaBgK1tOokgBI50QTFgJQqBlBaWgoFgq72FZSrFSjAk2NkKtgEr25AiELASLgTz/ULmuGRvdmdn3rx78DW3cL/58755b2fnRmfnx4PB4L50JLnFLZGWpO/SHTeqQICJZemrtOAFD2B4a9LuLMAwn0tvPeBzSq7/U0Av9NvnmgOIgUeCrks/asEn93iSQZKRbCRdlYiBgWEvbLZYg9wGhndX2pduW8O7wPBWpC/SvCU8BQzvifRhFmCYL6XXVvCYnWL/f64HT6W90gH0BcP7Jw2lXyXw1D2eZJDhZPo9bzA8vF3k8ZwZh4kyY2yWVUpLwAwgu5SWgoFTSt/13W8LMMw3Vz5P5ufYKfbnvUqp1YwZTK9SagkGHkopVa01rMHAgHa2yzXAwOlcPknRUloLDPyRFC2lNcHAKaVYrRGWdmpLpka77AXG40PpZxhd7aUOHDz+TRqXUi8wA7hWSj3BwJkxTcSC1x7fTLwt7xmHASzPCjy+EWjzYI1nh7PYY9riVe+l/iPoY2nkCf4rIC/7J+ydF5gjk1cfZnwZXuAtsa5da3iAdwRtXOTUzmqAlMRG1ASztCQT++sG/i3SQ4lMnho19hi7bLRBa2Q1L+0cEGPbeM34mUBJNwWWS70taPLdiBX4o6DvY8taK6sPrpKJG6HkKPXxoUirXRk8bTQlS83HEw6IqFfbpp8LDiUu+8tNDpi93JRY5uzIAb/qYxurAwTLYJ3i6JPVHA50Eb1sExthKphjcChxFptEyh6HztAMysi7wNiG5b3sDC2jDRw6wyLb5GR1ozP0mDG2cf/EF+0MLWd8006tnWEtMLZ5IJ1aArqSC7tQ4lygwcfJnaHlSlwADTGshYz22ugAAAAASUVORK5CYII=);
+	-webkit-mask-size: 13px 27px;
+	-webkit-mask-repeat: no-repeat;
+	-webkit-mask-position-x: 0px;
+	-webkit-mask-position-y: 0px;
+	-webkit-mask-clip: border;
+	-webkit-box-sizing: border-box;	
+	-webkit-box-shadow: 0px 1px 0px #bbb;
+}	
 
-.next:hover > span, .next.clicked > span {
+.next.clicked > span.s2 {
 	background-image: -webkit-gradient(linear, left top, right bottom, from(#24CCFF), to(#1A83D4), color-stop(.5,#1A88DB),color-stop(.5,#187BC7));
 }