Merged in skinning changes, removed click squares

index.html

@@ -11,21 +11,23 @@
 		</div>
 	</div>
 
-	<div id="content">
 
+	<div id="content">
 		<h1><span class="red">Frontend</span> Coding Test</h1>
 		<p>
-			Below is a series of links to problems. Each problem is an HTML file that contains the explanation of the problem as well as a partial solution.
+			Below is a series of links to problems, each problem is an HTML file that contains the explaination of the problem as well as a partial solution.
 		</p>
 		<p>
-			Please complete the HTML/CSS/JavaScript code in the problem file in order to solve it and send the completed code back to us to review.  Feel free to put comments in the HTML file to explain your solution.
+			Please complete the HTML/CSS/JavaScript code in the problem file in order to solve it and send the completed code back to us to review.  Feel free to put comments in the HTML file to explain your solution. Also <b>PLEASE DO NOT USE ANY THIRD PARTY LIBRARIES</b> to complete these.
+		</p>
+		<p>
+			One thing to keep in mind here is that these are fairly open-ended for a reason. We want to see your creativity and style, there is plenty of room for finesse, so please feel free to use it. Also these things shouldn't take you longer than a few hours, so please don't feel like you need to spend a day on it.
+		</p>
+		<p>
+			Have fun, show off, and please give us feedback so we can make this better!
 		</p>
-
-		<h2>Problems</h2>
-
 		<ul>
 			<li><a href="problems/image_rotator.html">Image Rotator</a></li>
-			<li><a href="problems/click_squares.html">Click Squares</a></li>
 			<li><a href="problems/text_search.html">Text Search</a></li>
 			<li><a href="problems/tabbed_content.html">Tabbed content</a></li>
 		</ul>

problems/image_rotator.html

@@ -5,11 +5,10 @@
 	<link type="text/css" rel="stylesheet" href="../css/style.css" />
 	<style type="text/css">
 		#rotator {
-			width: 150px;
-			height: 150px;
+			width: 450px;
+			height: 300px;
 			border: 1px solid black;
 			background: #aaa;
-			line-height: 150px;
 			text-align: center;
 		}
 	</style>
@@ -23,14 +22,31 @@
 
 <div id="content">
 	<h1><span class="red">Image</span> Rotator</h1>
-	<p>
-		Using the below image, make a rotator that shows only one of the lettered sections every 3 seconds.
-	</p>
-	<p>
-		For example, the first letter shown should be A, after 3 seconds, it should goto B and then C.  After C it should go back to A, and every 3 seconds it should continue to cycle.
-	</p>
-
-	<img src="../img/letter_sprite_1.jpg" />
+
+<p>
+	Using the below images, make a rotator in the box below that shows only one of the Katarina skins every 3 seconds.  The rotator should also display the correct image title and description with each image change.
+</p>
+<p>
+	It would be really awesome if the slides animated between one another!
+</p>
+
+<hr />
+
+<h4>Katarina</h4>
+<p>Fruitcake bonbon donut jelly-o brownie biscuit marzipan pie.</p>
+<img src="../img/kat_1.jpg" /><br/>
+
+<h4>Red Card Katarina</h4>
+<p>Cheesecake marzipan cupcake biscuit candy canes pudding.</p>
+<img src="../img/kat_2.jpg" /><br/>
+
+<h4>Kitty Cat Katarina</h4>
+<p>Applicake topping halvah lemon drops wypas cotton candy.</p>
+<img src="../img/kat_3.jpg" /><br/>
+
+<h4>High Command Katarina</h4>
+<p>Oat cake macaroon soufflé cupcake chupa chups chocolate bar bear claw dragée lemon drops.</p>
+<img src="../img/kat_4.jpg" /><br/>
 
 	<hr/>
 

problems/text_search.html

@@ -10,7 +10,6 @@
 		<div class="logo">Riot Games</div>
 	</div>
 </div>
-
 <div id="content">
 	<h1><span class="red">Text</span> Search</h1>
 	<p>