Index: wwwbase/styles/mobile.css
===================================================================
--- wwwbase/styles/mobile.css	(revision 832)
+++ wwwbase/styles/mobile.css	(working copy)
@@ -13,7 +13,7 @@
 }
 
 body {
-  width: 100%;
+  /*width: 99%;*/
   height: 100%;
 }
 
@@ -64,7 +64,7 @@
 #searchArea {
   width: 100%; /*320px;*/
   height: 45px;
-  margin: 5px 10px;
+  margin: 5px 0px;
   text-align: center;
 }
 
@@ -177,7 +177,7 @@
 }
 
 /* only small resolution devices in portrait mode */
-@media only screen and (max-width: 319px) {
+@media only screen and (max-width: 320px) {
 
   #faq {
     max-width: 90%;
@@ -187,11 +187,15 @@
   table {
     max-width: 300px;
   }
+  
+  body #hangman #hintButton {
+    width: 204px;
+  }
 
 }
 
 /* only big resolution devices in portrait mode */
-@media only screen and (max-width: 479px) {
+@media only screen and (max-width: 480px) {
   
   #wotdMobile {
     margin: 23% auto; /*80px auto;*/
@@ -231,3 +235,23 @@
   margin-bottom: 5px;
 }
 
+
+/* mobile improvements for Hangman game */
+body .hangmanArea {
+	border: 0px;
+}
+
+body #hangman .controls,
+body #hangman .newGameControls {
+	float: none;
+	clear: both;
+	margin-left: 0px;
+	padding-top: 10px;
+	width: 100%;
+}
+
+body #hangman .btn {
+	min-height: 40px;
+	margin: 5px;
+}
+
Index: wwwbase/styles/hangman.css
===================================================================
--- wwwbase/styles/hangman.css	(revision 832)
+++ wwwbase/styles/hangman.css	(working copy)
@@ -1,7 +1,87 @@
+.hangmanArea {
+  border: 2px dotted rgb(151, 212, 230);
+  padding: 10px;
+  -moz-border-radius: 4px;
+  border-radius: 4px;
+}
+
+.hangmanArea .paragraphTitle {
+  font-family: "Segoe Print", "Lucida Sans Unicode", Baskerville, Georgia;
+  color: rgb(16, 158, 27);
+  font-size: 18px;
+}
+
+#hangman {
+  overflow: hidden;
+}
+
+#hangman .btn {
+	color: #555;
+	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
+	background-repeat: repeat-x;
+	padding: 4px 12px;
+	margin-bottom: 0;
+	font-size: 14px;
+	line-height: 20px;
+	cursor: pointer;
+	-webkit-border-radius: 4px;
+	-moz-border-radius: 4px;
+	border-radius: 4px;
+	border: 1px solid rgb(204, 204, 204);
+	border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
+	-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
+	-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
+	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
+}
+
+#hangman .btn:hover {
+	background: rgb(230, 230, 230);
+}
+
+#hangman .graphics label,
+#hangman .newGameControls label {
+	display: block;
+	text-align: left;
+	padding-left: 5px;
+	font-size: 13px;
+}
+
+#hangman .newGame {
+  width: 100px;
+  margin-top: 4px;
+	color: #fff;
+	background-color: rgb(73, 175, 205);
+	background-image: -moz-linear-gradient(top, rgb(91, 192, 222), rgb(47, 150, 180));
+	background-image: -webkit-gradient(linear, 0 0, 0 100%, from(rgb(91, 192, 222)), to(rgb(47, 150, 180)));
+	background-image: -webkit-linear-gradient(top, rgb(91, 192, 222), rgb(47, 150, 180));
+	background-image: -o-linear-gradient(top, rgb(91, 192, 222), rgb(47, 150, 180));
+	background-image: linear-gradient(to bottom, rgb(91, 192, 222), rgb(47, 150, 180));
+}
+
+#hangman .newGame:hover {
+	background: rgb(47, 150, 180);
+	background-position: 0px -15px;
+}
+
+#hangman #hintButton {
+	background-color: rgb(250, 167, 50);
+	background-image: -moz-linear-gradient(top, rgb(251, 180, 80), rgb(248, 148, 6));
+	background-image: -webkit-gradient(linear, 0 0, 0 100%, from(rgb(251, 180, 80)), to(rgb(248, 148, 6)));
+	background-image: -webkit-linear-gradient(top, rgb(251, 180, 80), rgb(248, 148, 6));
+	background-image: -o-linear-gradient(top, rgb(251, 180, 80), rgb(248, 148, 6));
+	background-image: linear-gradient(to bottom, rgb(251, 180, 80), rgb(248, 148, 6));
+	text-shadow: none;
+}
+
+#hangman #hintButton:hover {
+	background: rgb(248, 148, 6);
+	background-position: 0px -15px;
+}
+
 #hangman .graphics {
   float: left;
-  font-size: 16px;
-  text-align: center;
+  margin-left: 10px;
+  margin-bottom: 10px;
 }
 
 #hangman .hangmanPic {
@@ -20,62 +100,69 @@
 
 #hangman .controls {
   float: left;
-  margin-left: 50px;
+  margin-left: 30px;
+  margin-top: 30px;
+  width: 300px;
 }
 
 #hangman .newGameControls {
   float: left;
-  font-size: 16px;
-  margin-left: 50px;
-  text-align: center;
+  margin-left: 30px;
+  margin-top: 30px;
 }
 
 #hangman .output {
   clear: both;
   padding-top: 10px;
+  padding-left: 10px;
 }
 
 #hangman .letters {
   text-align: center;
+  border: 1px solid #777;
+  padding: 4px 2px 2px 2px;
 }
 
 #hangman .letterButtons {
-  margin-left: 3px;
+  margin: 2px;
   width: 40px;
 }
 
-#hangman .newGame {
-  width: 100px;
-}
-
 #hangman #hintButton {
   margin-left: 3px;
-  width: 224px;
+  width: 230px;
 }
 
-#hangman .buttonGuessed {
-  background: #eaffea;
-  border: 1px solid green;
-  color: green;
+#hangman .buttonGuessed,
+#hangman .buttonGuessed:hover {
   font-weight: bold;
+  background: green;
+  color: white;
 }
 
-#hangman .buttonHinted {
-  background: #eaeaff;
-  border: 1px solid blue;
-  color: blue;
+#hangman .buttonHinted,
+#hangman .buttonHinted:hover {
+  background: #B2D9B2;
+  border: 1px solid green;
+  color: green;
   font-weight: bold;
 }
 
-#hangman .buttonMissed {
-  background: #ffeaea;
-  border: 1px solid red;
-  color: red;
+#hangman .buttonMissed,
+#hangman .buttonMissed:hover {
   font-weight: bold;
+  background-color: rgb(218, 79, 73);
+  background-image: -moz-linear-gradient(top, rgb(238, 95, 91), rgb(189, 54, 47));
+  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(rgb(238, 95, 91)), to(rgb(189, 54, 47)));
+  background-image: -webkit-linear-gradient(top, rgb(238, 95, 91), rgb(189, 54, 47));
+  background-image: -o-linear-gradient(top, rgb(238, 95, 91), rgb(189, 54, 47));
+  background-image: linear-gradient(to bottom, rgb(238, 95, 91), rgb(189, 54, 47)); /*#ffeaea;*/
+  color: white;
 }
 
 #hangman #resultsWrapper {
   display: none;
+  clear: both;
 }
 
 .notice-item {
Index: templates/common/hangman.ihtml
===================================================================
--- templates/common/hangman.ihtml	(revision 832)
+++ templates/common/hangman.ihtml	(working copy)
@@ -3,42 +3,44 @@
   var difficulty = "{$difficulty}";
 </script>
 
-<p class="paragraphTitle">Spânzurătoarea</p>
+<div class="hangmanArea">
+  <p class="paragraphTitle">Spânzurătoarea</p>
 
-<form id="hangman" action="">
+  <form id="hangman" action="">
 
-  <div class="graphics">
-    Vieți rămase: <span id="livesLeft">6</span>
-    <div class="hangmanPic"> </div>
-    <div class="imageLicense">imagini © dexonline.ro</div>
-  </div>
+    <div class="graphics">
+      <label>Vieți rămase: <span id="livesLeft">6</span></label>
+      <div class="hangmanPic"> </div>
+      <div class="imageLicense">imagini © dexonline.ro</div>
+      
+      <div class="output">
+      {section name="ignored" start=0 loop=$wordLength}
+        <input style="width:15pt" class="letters" name="out[]" type="text" readonly="readonly" size="1" value="" />
+      {/section}
+    </div>
+    </div>
 
-  <div class="controls">
-    {foreach from=$letters item=letter key=i}
-      <input class="letterButtons" type="button" value="{$letter|mb_strtoupper}"/>
-      {if $i % 6 == 5}<br/>{/if}
-    {/foreach}
-    <input id="hintButton" type="button" value="Dă-mi un indiciu"/>
-  </div>
+    <div class="controls">
+      {foreach from=$letters item=letter key=i}
+        <input class="letterButtons btn" type="button" value="{$letter|mb_strtoupper}"/>
+        <!-- {if $i % 6 == 5}<br/>{/if} -->
+      {/foreach}
+      <input id="hintButton" type="button" value="Dă-mi un indiciu" class="btn" />
+    </div>
 
-  <div class="newGameControls">
-    Joc nou:<br/>
-    <input class="newGame" type="button" name="newGame_1" value="ușor"/>
-    <input class="newGame" type="button" name="newGame_2" value="mediu"/><br/>
-    <input class="newGame" type="button" name="newGame_3" value="dificil"/>
-    <input class="newGame" type="button" name="newGame_4" value="expert"/>
-  </div>
+    <div class="newGameControls">
+      <label>Joc nou:</label>
+      <input class="newGame btn" type="button" name="newGame_1" value="ușor"/>
+      <input class="newGame btn" type="button" name="newGame_2" value="mediu"/><br/>
+      <input class="newGame btn" type="button" name="newGame_3" value="dificil"/>
+      <input class="newGame btn" type="button" name="newGame_4" value="expert"/>
+    </div>
 
-  <div class="output">
-    {section name="ignored" start=0 loop=$wordLength}
-      <input style="width:15pt" class="letters" name="out[]" type="text" readonly="readonly" size="1" value="" />
-    {/section}
-  </div>
+    <div id="resultsWrapper" class="txt">
+      {foreach from=$searchResults item=row}
+        {include file="common/bits/definition.ihtml row=$row}
+      {/foreach}
+    </div>
+  </form>
+</div>
 
-  <div id="resultsWrapper" class="txt">
-    {foreach from=$searchResults item=row}
-      {include file="common/bits/definition.ihtml row=$row}
-    {/foreach}
-  </div>
-</form>
-
