Chiller arrows.

web/css/000-controls.css

@@ -6,11 +6,11 @@ body {
 	color: #FFFFFF;
 }
 a {
-	color: #88EE44;
+	color: #84AAC2;
 	text-decoration: none;
 }
 a:hover {
-	color: #DDDDDD;
+	color: #FFAD27;
 }
 #title {
 	position: absolute;
@@ -59,16 +59,19 @@ a:hover {
 #next, #back {
 	position: absolute;
 	width: auto;
-	font-size: 2.5em;
+	font-size: 4.5em;
 	line-height: 0;
 	top: 40%;
 	font-weight: bold;
+	opacity: 0.35;
+	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=35)";
+	filter: alpha(opacity=35);
 }
 #back {
-	left: .5em;
+	left: 0.1em;
 }
 #next {
-	right: .5em;
+	right: 0.1em;
 }
 #photo {
 	border: 0;

web/index.html

@@ -26,8 +26,8 @@
 		</div>
 	</div>
 	
-	<a id="back">&larr;</a>
-	<a id="next">&rarr;</a>
+	<a id="back">&lsaquo;</a>
+	<a id="next">&rsaquo;</a>
 </div>
 
 <div id="error">Forgot my camera.</div>

web/js/010-control.js

@@ -300,6 +300,12 @@ $(document).ready(function() {
 	$("#photo-box").mouseleave(function() {
 		$("#photo-links").stop().fadeOut("slow");
 	});
+	$("#next, #back").mouseenter(function() {
+		$(this).fadeTo("slow", 1);
+	});
+	$("#next, #back").mouseleave(function() {
+		$(this).fadeTo("slow", 0.35);
+	});
 	$("#metadata-link").click(function() {
 		if (!$("#metadata").is(":visible"))
 			$("#metadata").stop()