ci

tree/bus_station.css

@@ -266,7 +266,7 @@ div#player_img {
     cursor: pointer;
 }
 #meat3{ 
-    bottom:33%;
+    bottom:34%;
     right: 14%;
     position: absolute;
     z-index: 3;

tree/butchery.css

@@ -68,7 +68,7 @@ body {
 }
 
 div.text_container {
-    bottom: 40px;
+    bottom: 35px;
     left:40px;
     right:40px;
     position:fixed;
@@ -93,12 +93,14 @@ div.text_container {
     cursor:pointer;
     font-size: 1.4vw;
 }
+
 .game_bar_glow{
     border: 0.11vw transparent solid;
     background-color: transparent;
-    -webkit-box-shadow: 0px 0px 8px 1px  black ;
+    color:#c94dff;
-    -moz-box-shadow: 0px 0px 8px 1px  black ;
+    -webkit-box-shadow: 0px 0px 8px 1px  #c94dff ;
-    box-shadow: 0px 0px 8px 1px  black ;   
+    -moz-box-shadow: 0px 0px 8px 1px  #c94dff ;
+    box-shadow: 0px 0px 8px 1px  #c94dff ;  
 }
 .win{
     animation-name: cats;
@@ -336,12 +338,13 @@ span.button_text{
     font-size: 16px;
     line-height: 17px;
     text-align: center;
-    width: 200px;
+    width: 220px;
     height: 105px;
     border-radius: 10px;
     padding: 18px;
     border: #000000 solid 1px;
     z-index:50;
+    cursor: pointer;
 }
 .bubble2:after {
     content: '';
@@ -384,6 +387,8 @@ span.button_text{
     border-radius: 10px;
     padding: 18px;
     border: #000000 solid 1px;
+    cursor: pointer;
+    z-index:50;
 }
 .bubble3:after {
     content: '';

tree/butchery.html

@@ -56,9 +56,9 @@
 <!--baloons-->
         <div class="bubble1" >I believe the butcher is also one of the saurians settlers: 
             I suspect that some of the meat stored here is actually cat's meat. 
-            Help me to check out these steaks!</div>
+            Help me to check out these steaks!  ■</div>
-        <div class="bubble2 invert" style="display: none;">I think this is the end for me. You need to tell people what we found out! I believe the saurians' headquarter lies below the bus station. Go there and save the survivors! </div>
+        <div class="bubble2 invert" style="display: none;">I think this is the end for me. You need to tell people what we found out! I believe the saurians' headquarter lies below the bus station. Go there and save the survivors! ✜</div>
-        <div class="bubble3 invert" style="display: none;">Follow the chemtrails whenever you'll find yourself in doubt. </div>
+        <div class="bubble3 invert" style="display: none;">Follow the chemtrails whenever you'll find yourself in doubt  ■</div>
 
 
 <!--bottom text-->
@@ -85,7 +85,7 @@
    </div>
 
 <!--game bar-->
-  <div class="game_bar invert" style="display: none;">
+  <div class="game_bar" style="display: none;">
     cat steaks: <span class="cat_meat_bar"></span> / 4 
   </div>
 
@@ -117,6 +117,7 @@
       $(".message2, .game_bar").show();
       setTimeout( function() {
         $("#cover").css('z-index',-5); 
+        $(".tables").css('cursor', 'pointer');
       }, 2000);
     });
 
@@ -130,6 +131,9 @@
 
     $("#table1").click (function(){
         $("#table1").addClass("touch_animation");
+        setTimeout(function(){
+            $("#table1").removeClass("touch_animation");
+        },250);
         error ++; 
         console.log("errors:", error);
         check_end_game ();
@@ -137,6 +141,9 @@
 
     $("#table2").click (function(){
         $("#table2").addClass("touch_animation");
+        setTimeout(function(){
+            $("#table2").removeClass("touch_animation");
+        },250);
         error ++; 
         console.log("errors:", error);
         check_end_game ();
@@ -144,6 +151,9 @@
 
   $("#table3").click (function(){
         $("#table3").attr("src", "imgs/butchery/cat.gif");
+        setTimeout(function(){
+            $("#table3").removeClass("touch_animation");
+        },250);
         cat_meat ++; 
         console.log("cat meat:", cat_meat);
         $('.cat_meat_bar').html(cat_meat);
@@ -152,6 +162,9 @@
 
     $("#table4").click (function(){
         $("#table4").addClass("touch_animation");
+        setTimeout(function(){
+            $("#table4").removeClass("touch_animation");
+        },250);
         error ++; 
         console.log("errors:", error);
         check_end_game ();
@@ -159,6 +172,9 @@
     
     $("#table5").click (function(){
         $("#table5").addClass("touch_animation");
+        setTimeout(function(){
+            $("#table5").removeClass("touch_animation");
+        },250);
         error ++; 
         console.log("errors:", error);
         check_end_game ();
@@ -166,6 +182,9 @@
 
     $("#table6").click (function(){
         $("#table6").addClass("touch_animation");
+        setTimeout(function(){
+            $("#table6").removeClass("touch_animation");
+        },250);
         error ++; 
         console.log("errors:", error);
         check_end_game ();
@@ -173,6 +192,9 @@
 
     $("#table7").click (function(){
         $("#table7").attr("src", "imgs/butchery/cat.gif");
+        setTimeout(function(){
+            $("#table7").removeClass("touch_animation");
+        },250);
         cat_meat ++; 
         console.log("cat meat:", cat_meat);
         $('.cat_meat_bar').html(cat_meat);
@@ -181,6 +203,9 @@
 
     $("#table8").click (function(){
         $("#table8").addClass("touch_animation");
+        setTimeout(function(){
+            $("#table8").removeClass("touch_animation");
+        },250);
         error ++; 
         console.log("errors:", error);
         check_end_game ();
@@ -188,6 +213,9 @@
 
     $("#table9").click (function(){
         $("#table9").addClass("touch_animation");
+        setTimeout(function(){
+            $("#table9").removeClass("touch_animation");
+        },250);
         error ++; 
         console.log("errors:", error);
         check_end_game ();
@@ -195,6 +223,9 @@
 
     $("#table10").click (function(){
         $("#table10").attr("src", "imgs/butchery/cat.gif");
+        setTimeout(function(){
+            $("#table10").removeClass("touch_animation");
+        },250);
         cat_meat ++; 
         console.log("cat meat:", cat_meat);
         $('.cat_meat_bar').html(cat_meat);
@@ -203,6 +234,9 @@
 
     $("#table11").click (function(){
         $("#table11").attr("src", "imgs/butchery/cat.gif");
+        setTimeout(function(){
+            $("#table11").removeClass("touch_animation");
+        },250);
         cat_meat ++; 
         console.log("cat meat:", cat_meat);
         $('.cat_meat_bar').html(cat_meat);
@@ -210,7 +244,10 @@
     });
 
     $("#table12").click (function(){
-        $("#table12").addClass("touch_animation");
+        $("#table12").addClass("touch_animation");        
+        setTimeout(function(){
+            $("#table12").removeClass("touch_animation");
+        },250);
         error ++; 
         console.log("errors:", error);
         check_end_game ();
@@ -239,20 +276,27 @@
                         $(".bubble2").show();
                         $("#butcher").hide();
                         $(".invert").removeClass("invert_style");
-                        setTimeout( function (){
+                    }, 5000)
-                            $(".bubble3").show();
-                            setTimeout( function (){
-                                $("#pat").attr("src", "imgs/butchery/parrot_d.png");  
-                                $(".message_won").hide();
-                                $(".message_final").show();
-                            }, 2000)
-                        }, 3000)
-                    }, 6000)
                 });
             }, 300);
         }, 1000);
         };
 
+        $(".bubble2").click(function(){
+            $(".bubble2").hide();
+            $(".bubble3").show();
+            setTimeout( function (){
+                $("#pat").attr("src", "imgs/butchery/parrot_d.png");  
+                $(".message_won").hide();
+                $(".message_final").show();
+            }, 2000)  
+        });
+
+        $(".bubble3").click(function(){
+            $(".bubble3").hide();
+        });
+
+
         if (error == 3) {
             setTimeout (function() { 
                 $("#cover").css("z-index",40);

tree/canteen.css

@@ -69,7 +69,7 @@
 
 
 div.text_container {
-    bottom: 40px;
+    bottom: 35px;
     left:40px;
     right:40px;
     position:fixed;
@@ -114,6 +114,13 @@ div.message1{
     font-size: 1.4vw;
 
 }
+.game_bar_glow{
+    border: 0.11vw transparent solid;
+    background-color: transparent;
+    -webkit-box-shadow: 0px 0px 8px 1px  black ;
+    -moz-box-shadow: 0px 0px 8px 1px  black ;
+    box-shadow: 0px 0px 8px 1px  black ;   
+}
 
 button{
     -webkit-appearance: none;
@@ -182,7 +189,9 @@ span.button_text{
     position:absolute ;
 }
 
-
+.satan{
+    cursor: pointer;
+}
 
 div.figure1 {
     top: 20%;
@@ -242,6 +251,7 @@ div.figure5 {
         border-radius: 10px;
         padding: 18px;
         border: #000000 solid 1px;
+        cursor: pointer;
     }
     .ned_bubble1:after {
         content: '';
@@ -284,6 +294,7 @@ div.figure5 {
         border-radius: 10px;
         padding: 18px;
         border: #000000 solid 1px;
+        cursor: pointer;
     }
     .ned_bubble2:after {
         content: '';

tree/canteen.html

@@ -54,9 +54,8 @@
 
 
 <!--baloons-->
-        <div class="ned_bubble1" style="display: none;" >I think this is the end for me. Please, promise me that you are going to put an end to this! Children are endangered and you are now the only one who can save them! </div>
+        <div class="ned_bubble1" style="display: none;" >I think this is the end for me. Please, promise me that you are going to put an end to this! Children are endangered and you are now the only one who can save them!  ✜</div>
-        <div class="ned_bubble2" style="display: none;">Follow the chemtrails whenever you'll find yourself in doubt. </div>
+        <div class="ned_bubble2" style="display: none;">Follow the chemtrails whenever you'll find yourself in doubt ■</div>
-        <div class="staff_bubble" style="display: none;"></div>
 
 
 <!--bottom text-->
@@ -249,31 +248,42 @@ var fluoride = 5;
          console.log("check end game");
                 if (fluoride == 0)  {
                     console.log("game over!");
+                    $(".game_bar").addClass("game_bar_glow");
                     setTimeout( function (){ 
-                        figures_all.detach()
+                        figures_all.detach();
+                        $(".game_bar").hide();
                         setTimeout( function () {
                             $("#column").hide();
                             $(".message2").hide();
                             $(".message3").show();
                             $(".invert").removeClass("invert_style");
-                            setTimeout (function () 
+                            setTimeout (function () {
-                                {$(".ned_bubble1").show();
+                                $(".game_bar").hide();
-                                    setTimeout (function () {
+                                $(".ned_bubble1").show();
-                                        $(".ned_bubble2").show();
+                            },1500);
-                                        setTimeout (function () {
-                                            $(".message3").hide();
-                                            $(".message4").show();
-                                            $("#ned").attr("src", "imgs/canteen/ned_wounded.png");
-                                    },5000);
-                                },4000);
-                            },3000);
                         }, 1000);
                     }, 1000);
 
-                    //setTimeout(avatar.animate ({top:"50%"}), 2000);
                 };
         };
 
+        $(".ned_bubble1").click( function(){
+            $(".ned_bubble1").hide();
+            $(".ned_bubble2").show();
+            setTimeout (function () {
+                $(".message3").hide();
+                $(".message4").show();
+                $("#ned").attr("src", "imgs/canteen/ned_wounded.png");
+        },3000);
+        });
+
+        $(".ned_bubble2").click( function(){
+            $(".ned_bubble2").hide();
+        });
+
+
+
+
  </script>
 
 <script type="text/javascript" src="index.js" ></script>

tree/cat_shelter.css

@@ -62,7 +62,7 @@ div#player_img {
 
 
 div.text_container {
-    bottom: 40px;
+    bottom: 35px;
     left:40px;
     right:40px;
     position:absolute;
@@ -246,6 +246,7 @@ span.button_text{
     padding: 18px;
     border: 1px black solid;
     z-index: 10;
+    cursor: pointer;
 }
 .bubble1:after {
     content: '';
@@ -335,6 +336,7 @@ span.button_text{
     padding: 18px;
     border: 1px black solid;
     z-index: 10;
+    cursor: pointer;
 }
 .bubble3:after {
     content: '';
@@ -373,7 +375,7 @@ span.button_text{
     line-height: 17px;
     text-align: center;
     width: 160px;
-    height: 50px;
+    height: 40px;
     border-radius: 10px;
     padding: 18px;
     border: #000000 solid 1px;
@@ -423,6 +425,7 @@ span.button_text{
     padding: 18px;
     border: 1px black solid;
     z-index: 20;
+    cursor: pointer;
 }
 .bubble5:after {
     content: '';
@@ -466,6 +469,7 @@ span.button_text{
     padding: 18px;
     border: #000000 solid 1px;
     z-index: 10;
+    cursor: pointer;
 }
 .bubble6:after {
     content: '';

tree/cat_shelter.html

@@ -40,13 +40,13 @@
       <img  id="pat" src="imgs/cat_shelter/parrot.gif" height="100px" style="display: none;">
 
          <div class="comic_div">
-          <div class="bubble1"style="display: none;">Hello stranger, are you looking for something? </div>
+          <div class="bubble1"style="display: none;">Hello stranger, are you looking for something? ✜</div>
-          <div class="bubble2"style="display: none;"> My name is Pat, nice to meet you. [...] </div>        
+          <div class="bubble2"style="display: none;"> My name is Pat, nice to meet you ✜</div>        
-          <div class="bubble3"style="display: none;"> I don't know any Amanda. But believe me, I wouldn't be surprised if something happened to her as well. Like those poor cats. They didn't escape, someone kidnapped them. </div>        
+          <div class="bubble3"style="display: none;"> I don't know any Amanda. But believe me, I wouldn't be surprised if something happened to her as well. Like those poor cats. They didn't escape, someone kidnapped them ✜</div>        
-          <div class="bubble4"style="display: none;"> If you want I can tell you more about it. [...]</div>        
+          <div class="bubble4"style="display: none;"> If you want I can tell you more about it ✜</div>        
           <div class="bubble5" style="display: none;">I have reasons to believe that the Major's family is not as human as we thought. You need to see this. 
-            They are financing the cat shelter to harvest the cubs as food: they made them disappear during the night. </div>        
+            They are financing the cat shelter to harvest the cubs as food: they made them disappear during the night ✜</div>        
-          <div class="bubble6"style="display: none;"> The hairballs will drive us to the Major's mansion. Follow me!</div>        
+          <div class="bubble6"style="display: none;"> The hairballs will drive us to the Major's mansion. Follow me! ■</div>        
 
         </div>
 
@@ -156,37 +156,49 @@
                 setTimeout(function(){
                     $(".bubble1").show();
                     setTimeout(function(){
-                        $(".bubble2").show();
-                        setTimeout(function(){
                             $(".message1").hide();
                             $(".message2").show();
                         }, 1000);
-                    }, 1500);
                 }, 1000);
             }, 1000);
         }
     }
+    $(".bubble1").click(function(){
+        $(".bubble1").hide();
+        $(".bubble2").show();
+    });
+
     $(".bubble2").click(function(){
-        $(".message2, .bubble1, .bubble2").hide();
+        $(".bubble2").hide();
         $(".bubble3").show();
-        setTimeout(function(){
+    });
-            $(".bubble4").show();
+
-        }, 1000);
+    $(".bubble3").click(function(){
+        $(".bubble3").hide();
+        $(".bubble4").show();
     });
 
     $(".bubble4").click(function(){
-        $(".bubble3, .bubble4").hide();
+        $(".bubble4").hide();
         $(".bubble5").show();
-        setTimeout(function(){
+    });
-            $(".bubble6").show();
-            setTimeout(function(){
-                $(".message3").show();
-            }, 1000);
-        }, 1000);
 
+    $(".bubble5").click(function(){
+        $(".bubble5").hide();
+        $(".bubble6").show();
     });
 
-   
+    $(".bubble5").click(function(){
+        $(".bubble5, .message2").hide();
+        $(".bubble6").show();
+        $(".message3").show();
+    });
+
+    $(".bubble6").click(function(){
+        $(".bubble6").hide();
+    });
+
+  
  </script>
     
 <script type="text/javascript" src="index.js" ></script>

tree/major_house.css

@@ -80,7 +80,7 @@ span.instructions_arrow{
 }
 
 div.text_container {
-    bottom: 40px;
+    bottom: 25px;
     left:40px;
     right:40px;
     position:fixed;
@@ -166,6 +166,7 @@ span.button_text{
 
 .glasses_bar:hover{
     border: 0.11vw transparent solid;
+    background-color: transparent;
     color:#c94dff;
     -webkit-box-shadow: 0px 0px 8px 1px  #c94dff ;
     -moz-box-shadow: 0px 0px 8px 1px  #c94dff ;
@@ -318,6 +319,7 @@ span.button_text{
     border-radius: 10px;
     padding: 18px;
     border: #000000 solid 1px;
+    cursor: pointer;
 }
 .bubble1:after {
     content: '';
@@ -361,6 +363,7 @@ span.button_text{
     border-radius: 10px;
     padding: 18px;
     border: #000000 solid 1px;
+    cursor: pointer;
 }
 .bubble2:after {
     content: '';

tree/major_house.html

@@ -73,11 +73,11 @@
 
 <div class="bubble1 to_invert" style="display: none;">
     The Major and his family are actually saurian settlers who came here to invade planet earth. 
-    Use my magnifying glass to see them in their real appearance. 
+    Use my magnifying glass to see them in their real appearance ■ 
 </div>
 <div class="bubble2 to_invert" style="display: none;">
     They are harvesting the cats to be ready for the arrival of other groups of invaders. 
-    Follow me to the butcher shop, I can show you the proof of what I'm saying. 
+    Follow me to the butcher shop, I can show you the proof of what I'm saying ■
 </div>
 
 <button class="glasses_bar" style="display: none;"> ✜ magnifying glass </button>
@@ -103,18 +103,6 @@
   window.onload = function() {
     window.localStorage.setItem("major_house","opened");
     console.log ("major house:",localStorage.major_house);
-    /*
-    setTimeout( function() {
-        $('.bubble1').show();
-        setTimeout( function() {
-            $('.bubble2').show();
-            setTimeout( function() {
-                $('.message1').hide();
-                $('.message2').show();
-            }, 2000);
-        }, 2000);
-    }, 1000);
-*/
     }
 
 //get player avatar from local storage
@@ -202,6 +190,14 @@ $(document).keydown(function(e) {
         
     })
 
+    $('.bubble1').click(function(){
+        $('.bubble1').hide();
+    });
+
+    $('.bubble2').click(function(){
+        $('.bubble2').hide();
+    });
+
   
  </script>
 

tree/pleiadians_satanism.css

@@ -69,7 +69,8 @@
 #ground{
     position:absolute;
     height:100%;
-    width:3500px;  
+    width:560vh;  
+   /* width:3500px;  */
 }
 
 #groundline {
@@ -83,7 +84,7 @@
 
 
 div.text_container {
-    bottom: 40px;
+    bottom: 20px;
     left:40px;
     right:40px;
     position:fixed;

tree/pleiadians_satanism.html

@@ -73,11 +73,11 @@
 
 
 
-<div class="bubble1 invert" style="display: none;">Hello <span id="player_name"></span>, your enlightened spirit guided you here.</div>
+<div class="bubble1 invert" style="display: none;">Hello <span id="player_name"></span>, your enlightened spirit guided you here ■</div>
-<div class="bubble2 invert" style="display: none;">We can sense that you are looking for something beyond your habits and understanding. We are happy to meet you. </div>
+<div class="bubble2 invert" style="display: none;">We can sense that you are looking for something beyond your habits and understanding. We are happy to meet you ■</div>
-<div class="bubble3 invert" style="display: none;">We are the beings of light. We don't belong to this planet.</div>
+<div class="bubble3 invert" style="display: none;">We are the beings of light. We don't belong to this planet ■</div>
-<div class="bubble4 invert" style="display: none;">We can sense the other beings and planet's energetic state. A heinous crime is shaking this land's vibration.</div>
+<div class="bubble4 invert" style="display: none;">We can sense the other beings and planet's energetic state. A heinous crime is shaking this land's vibration ■</div>
-<div class="bubble5 invert" style="display: none;">This darkness will soon spread to other planets. We came here as messengers, to help you elevate your soul and find the courage to fight evil.</div>
+<div class="bubble5 invert" style="display: none;">This darkness will soon spread to other planets. We came here as messengers, to help you elevate your soul and find the courage to fight evil ■</div>
 
 
 <div class="text_container invert " > 
@@ -230,6 +230,23 @@ function check_pleiadians() {
         }, 100);
     };
 };
+
+$(".bubble1").click( function(){
+    $(".bubble1").hide();
+});
+$(".bubble2").click( function(){
+    $(".bubble2").hide();
+});
+$(".bubble3").click( function(){
+    $(".bubble3").hide();
+});
+$(".bubble4").click( function(){
+    $(".bubble4").hide();
+});
+$(".bubble5").click( function(){
+    $(".bubble5").hide();
+});
+
   
  </script>
 

tree/pleiadians_saurians.html

@@ -73,11 +73,11 @@
 
 
 
-<div class="bubble1 invert" style="display: none;">Hello <span id="player_name"></span>, your enlightened spirit guided you here.</div>
+<div class="bubble1 invert" style="display: none;">Hello <span id="player_name"></span>, your enlightened spirit guided you here ■</div>
-<div class="bubble2 invert" style="display: none;">We can sense that you are looking for something beyond your habits and understanding. We are happy to meet you. </div>
+<div class="bubble2 invert" style="display: none;">We can sense that you are looking for something beyond your habits and understanding. We are happy to meet you ■</div>
-<div class="bubble3 invert" style="display: none;">We are the beings of light. We don't belong to this planet.</div>
+<div class="bubble3 invert" style="display: none;">We are the beings of light. We don't belong to this planet ■</div>
-<div class="bubble4 invert" style="display: none;">We can sense the other beings and planet's energetic state. A heinous crime is shaking this land's vibration.</div>
+<div class="bubble4 invert" style="display: none;">We can sense the other beings and planet's energetic state. A heinous crime is shaking this land's vibration ■</div>
-<div class="bubble5 invert" style="display: none;">This darkness will soon spread to other planets. We came here as messengers, to help you elevate your soul and find the courage to fight evil.</div>
+<div class="bubble5 invert" style="display: none;">This darkness will soon spread to other planets. We came here as messengers, to help you elevate your soul and find the courage to fight evil ■</div>
 
 
 <div class="text_container invert " > 
@@ -230,6 +230,21 @@ function check_pleiadians() {
         }, 100);
     };
 };
+$(".bubble1").click( function(){
+    $(".bubble1").hide();
+});
+$(".bubble2").click( function(){
+    $(".bubble2").hide();
+});
+$(".bubble3").click( function(){
+    $(".bubble3").hide();
+});
+$(".bubble4").click( function(){
+    $(".bubble4").hide();
+});
+$(".bubble5").click( function(){
+    $(".bubble5").hide();
+});
   
  </script>
 

tree/square_satanism.css

@@ -78,7 +78,7 @@ svg {
 }
 
 div.text_container {
-    bottom: 40px;
+    bottom: 35px;
     left:40px;
     right:40px;
     position:fixed;
@@ -94,7 +94,7 @@ div.text_container {
     border-radius: 25vw;
     padding-left: 10px;
     padding-right: 10px;
-    padding-bottom: 4px;
+    padding-bottom: 2px;
     font-family: sinistre;
     background-color: white;
     border: 0.11vw black solid;
@@ -102,8 +102,17 @@ div.text_container {
     color:black;
     cursor:pointer;
     font-size: 1.4vw;
+}
 
+.game_bar_glow{
+    border: 0.11vw transparent solid;
+    background-color: transparent;
+    color:#c94dff;
+    -webkit-box-shadow: 0px 0px 8px 1px  #c94dff ;
+    -moz-box-shadow: 0px 0px 8px 1px  #c94dff ;
+    box-shadow: 0px 0px 8px 1px  #c94dff ;  
 }
+
 .flipped {
     transform: scale(-1, 1);
     -moz-transform: scale(-1, 1);
@@ -111,7 +120,6 @@ div.text_container {
     -o-transform: scale(-1, 1);
     -khtml-transform: scale(-1, 1);
     -ms-transform: scale(-1, 1);
-
 }
 
 
@@ -123,6 +131,7 @@ button{
     color:black;
     cursor:pointer;
     font-family: jolybolditalic;
+    padding-bottom: 4px;
 }
 
 button:hover{

tree/square_satanism.html

@@ -17,7 +17,7 @@
 <!--houses-->
 <!--game bar-->
 
-<div class="game_bar invert" >
+<div class="game_bar" >
     villagers: <span class="fighters"></span> / 9
   </div>
   <img  id="thunder1" src="imgs/square_s/thunder.gif" height="150px" style="display: none;">
@@ -266,8 +266,8 @@
 
     function end_recluting() { 
         if (villagers == 9) {
- 
             setTimeout ( function (){
+                $(".game_bar").addClass("game_bar_glow");
                 $(".message1").hide();
             $(".message2").show();  
                 $(".invert").addClass("invert_style");

tree/square_saurians.css

@@ -78,7 +78,7 @@ svg {
 }
 
 div.text_container {
-    bottom: 40px;
+    bottom: 35px;
     left:40px;
     right:40px;
     position:fixed;
@@ -94,7 +94,7 @@ div.text_container {
     border-radius: 25vw;
     padding-left: 10px;
     padding-right: 10px;
-    padding-bottom: 4px;
+    padding-bottom: 2px;
     font-family: sinistre;
     background-color: white;
     border: 0.11vw black solid;
@@ -102,8 +102,17 @@ div.text_container {
     color:black;
     cursor:pointer;
     font-size: 1.4vw;
+}
 
+.game_bar_glow{
+    border: 0.11vw transparent solid;
+    background-color: transparent;
+    color:#c94dff;
+    -webkit-box-shadow: 0px 0px 8px 1px  #c94dff ;
+    -moz-box-shadow: 0px 0px 8px 1px  #c94dff ;
+    box-shadow: 0px 0px 8px 1px  #c94dff ;  
 }
+
 .flipped {
     transform: scale(-1, 1);
     -moz-transform: scale(-1, 1);
@@ -123,6 +132,7 @@ button{
     color:black;
     cursor:pointer;
     font-family: jolybolditalic;
+    padding-bottom: 4px;
 }
 
 button:hover{

tree/square_saurians.html

@@ -16,7 +16,7 @@
 
 <!--houses-->
 <!--game bar-->
-<div class="game_bar invert" >
+<div class="game_bar" >
     villagers: <span class="fighters"></span> / 9
   </div>
   <img  id="thunder1" src="imgs/square_s/thunder.gif" height="150px" style="display: none;">
@@ -125,7 +125,7 @@
         villagers ++; 
         $(".fighters").html(villagers);
         avatar.css({ top: "16%", left: "35%" });
-        baloon.css({ top: "7%", left: "37%" })
+        baloon.css({ top: "5%", left: "34%" })
         baloon.show();
         setTimeout ( function (){
             $("#person1").hide();
@@ -140,7 +140,7 @@
         villagers ++; 
         $(".fighters").html(villagers);
         avatar.css({ top: "13%", left: "59%" });
-        baloon.css({ top: "4%", left: "61%" })
+        baloon.css({ top: "2%", left: "61%" })
         baloon.show();
         setTimeout ( function (){
             $("#person2").hide();
@@ -151,11 +151,14 @@
     });
 
     $("#person3").click (function(){
-        check_flipping();
+        if (avatar.hasClass("flipped") == false) {
+            avatar.addClass("flipped");
+        }
+        duo.css ("zIndex", 5);
         villagers ++; 
         $(".fighters").html(villagers);
-        avatar.css({ top: "22%", left: "77%"});
+        avatar.css({ top: "32%", left: "85%"});
-        baloon.css({ top: "13%", left: "80%" })
+        baloon.css({ top: "22%", left: "78%" })
         baloon.show();
         setTimeout ( function (){
             $("#person3").hide();
@@ -172,7 +175,7 @@
         villagers ++; 
         $(".fighters").html(villagers);
         avatar.css({ top: "50%", left: "62%"});
-        baloon.css({ top: "41%", left: "64%" })
+        baloon.css({ top: "38%", left: "62%" })
         baloon.show();
         setTimeout ( function (){
             $("#person4").hide();
@@ -191,7 +194,7 @@
         duo.css ("zIndex", 0);
         avatar.addClass("flipped");
         avatar.css({ top: "14%", left: "17%" });
-        baloon.css({ top: "5%", left: "21%" });
+        baloon.css({ top: "2%", left: "17%" });
         baloon.show();
         setTimeout ( function (){
             $("#person5").hide();
@@ -207,7 +210,7 @@
         $(".fighters").html(villagers);
         duo.css ("zIndex", 1);
         avatar.css({ top: "53%", left: "29%" });
-        baloon.css({ top: "43%", left: "31%" });
+        baloon.css({ top: "40%", left: "29%" });
         baloon.show();
         setTimeout ( function (){
             $("#person6").hide();
@@ -218,15 +221,12 @@
     });
 
     $("#person7").click (function(){
-        if (avatar.hasClass("flipped") == false) {
+        check_flipping();
-            avatar.addClass("flipped");
-        }
         villagers ++; 
         $(".fighters").html(villagers);
-        avatar.addClass("flipped");
         avatar.css ("zIndex", -1);
-        avatar.css({ top: "33%", left: "26%" });
+        avatar.css({ top: "50%", left: "20%" });
-        baloon.css({ top: "24%", left: "28%" });
+        baloon.css({ top: "38%", left: "20%" });
         baloon.show();
         setTimeout ( function (){
             $("#person7").hide();
@@ -242,7 +242,7 @@
         $(".fighters").html(villagers);
         duo.css ("zIndex", 1);
         avatar.css({ top: "43%", left: "72%" });
-        baloon.css({ top: "35%", left: "75%" });
+        baloon.css({ top: "32%", left: "72%" });
         baloon.show();
         setTimeout ( function (){
             $("#person8").hide();
@@ -256,8 +256,8 @@
         check_flipping();
         villagers ++; 
         $(".fighters").html(villagers);
-        avatar.css({ top: "29%", left: "48%" });
+        avatar.css({top: "29%", left: "48%"});
-        baloon.css({ top: "19%", left: "51%" });
+        baloon.css({top: "17%", left: "48%"});
         baloon.show();
         setTimeout ( function (){
             $("#person9").hide();
@@ -270,10 +270,10 @@
 
     function end_recluting() { 
         if (villagers == 9) {
- 
             setTimeout ( function (){
+                $(".game_bar").addClass("game_bar_glow");
                 $(".message1").hide();
-            $(".message2").show();  
+                $(".message2").show();  
                 $(".invert").addClass("invert_style");
                 $("#thunder1, #thunder2 ").show();  
                 check_flipping();