Index: /other-projects/nz-flag-design/trunk/render-3d/CSS/button.css
===================================================================
--- /other-projects/nz-flag-design/trunk/render-3d/CSS/button.css	(revision 29574)
+++ /other-projects/nz-flag-design/trunk/render-3d/CSS/button.css	(revision 29575)
@@ -1,20 +1,14 @@
 .myButton {
-	-moz-box-shadow: 0px 1px 14px 11px #f0f7fa;
-	-webkit-box-shadow: 0px 1px 14px 11px #f0f7fa;
-	box-shadow: 0px 1px 14px 11px #f0f7fa;
-	background-image:url("../images/snowButton.jpg"); 
 	background-color:#33bdef;
 	-moz-border-radius:42px;
 	-webkit-border-radius:42px;
-	border-radius:42px;
+	border-radius:100%;
 	border:4px solid #057fd0;
-	display:inline-block;
+	display: block;
 	cursor:pointer;
 	color:#ffffff;
-	font-family:Permanent Marker;
-	font-size:28px;
-	padding:25px 60px;
-	text-decoration:none;
-	text-shadow:2px 2px 20px #5b6178;
+	padding:50px;
+	float: right;
+	margin: 10% 15% 10% 10%;
 }
 .myButton:hover {
Index: /other-projects/nz-flag-design/trunk/render-3d/flag.html
===================================================================
--- /other-projects/nz-flag-design/trunk/render-3d/flag.html	(revision 29574)
+++ /other-projects/nz-flag-design/trunk/render-3d/flag.html	(revision 29575)
@@ -18,17 +18,41 @@
 				position: fixed;
 			}
-
-			#info {
+			
+			#menuContainer{
+				position: fixed;
+				right: -18vw;
+				float: right;
+				width: 25vw;
+				transition: right 0.5s;
+				background-image: url("./images/slider.png");
+				background-size: 25vw 150vh;
+				background-position: center;
+			}
+
+			#weatherMenu {
 				text-align: center;
-				padding: 10px;
+				padding: 0px;
+				width: 20vw;
 				z-index: 10;
-				width: 100%;
-				position: absolute;
-				top: 10%;
-			}
-
-			a {
-				text-decoration: underline;
-				cursor: pointer;
+				height: 100vh;
+				position: relative;
+				float: right;
+			}
+			
+			#arrow{
+				float: left;
+				background-image: url("./images/arrow.png");
+				background-position: center;
+				background-size: 5vw 10vh;
+				margin: auto;
+				right: 1vw;
+				width: 5vw;
+				height: 10vh;
+				position: relative;
+				border-radius: 100%;
+				top: 45vh;
+				z-index: 9;
+				transition: transform 0.5s;
+				transform: rotate(360deg);
 			}
 			
@@ -37,11 +61,31 @@
 
 	<body>
-		<div id="info" style="color : white">
-			Toggle: <a onclick="fine = !fine;">Sunny</a> |
-			<a onclick="wind = !wind;">Wind</a> |
-			<a onclick="raining = !raining;">Rain</a> |
-			<a class="myButton" onclick="snowing = !snowing;">Snow</a>
-			
+		<div id="menuContainer">
+			<div id="weatherMenu" style="color : white">
+				<!--Toggle: 
+				<a onclick="wind = !wind;">Wind</a> |-->
+				<a class="myButton" style="background-image:url('./images/sunButton.jpg')" onclick="fine = !fine;"></a>
+				<a class="myButton" style="background-image:url('./images/rainButton.jpg')" onclick="raining = !raining;"></a>
+				<a class="myButton" style="background-image:url('./images/snowButton.jpg')" onclick="snowing = !snowing;"></a>
+			</div>
+			<div id="arrow" onclick="openclose()">
+			</div>
 		</div>
+		
+		
+		<script type="text/javascript">
+			var open = false;
+			function openclose(){
+				if (open){
+					document.getElementById("menuContainer").style.right = "-20vw";
+					document.getElementById("arrow").style.transform = "rotate(360deg)";
+				}else{document.getElementById("menuContainer").style.right = "0vw";
+					document.getElementById("arrow").style.transform = "rotate(180deg)";
+				}
+				open = !open;
+				
+			}
+		</script>
+		
 
 		<script type="text/javascript" src="./Flag_files/Three.js"></script>
@@ -221,5 +265,5 @@
 					clothTextures[i] = THREE.ImageUtils.loadTexture( flags[i] );
 					//clothTextures[i].needsUpdate = true;
-					clothTextures[i].wrapS = clothTextures[i].wrapT = THREE.RepeatWrapping;
+					clothTextures[i].wrapS = clothTextures[i].wrapT = THREE.ClampToEdgeWrapping;
 					clothTextures[i].anisotropy = 16;
 				}
@@ -232,5 +276,5 @@
 				arrow = new THREE.ArrowHelper( new THREE.Vector3( 0, 1, 0 ), new THREE.Vector3( 0, 0, 0 ), 50, 0xff0000 );
 				arrow.position.set( -200, -50, -200 );
-				scene.add( arrow );
+				//scene.add( arrow );
 
 	
