Merge branch 'master' of https://github.com/freakinhippies/OstrichJet…

…pack

# Conflicts:
#	style/menus.css

index.html

@@ -4,13 +4,21 @@
   <meta charset="utf-8">
   <meta name="viewport" content="minimal-ui, width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
   <title>TryCatch - Home</title>
-  <link href="style/style.css" rel="stylesheet" type="text/css" />
+  <!-- CSS stylesheets -->
+  <link href="style/base.css" rel="stylesheet" type="text/css"/>
+  <link href="style/menus.css" rel="stylesheet" type="text/css"/>
+  <link href="style/game.css" rel="stylesheet" type="text/css"/>
+
+  <!-- Fonts -->
   <link href='https://fonts.googleapis.com/css?family=Montserrat:700,400' rel='stylesheet' type='text/css'>
 
+  <!-- JQuery library -->
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
 
   <!-- Sounds library-->
   <script src="js/howlerjs/howler.js"></script>
+
+  <!-- Sound and menu scripts -->
   <script src="js/sounds.js"></script>
   <script src="js/menus.js"></script>
 </head>
@@ -128,15 +136,15 @@ <h2>Game Paused</h2>
     </div>
 
     <!-- This is the tutorial section (hidden by default) -->
-    <div id="tutorial-screen">
+    <div id="tutorial-screen" class="drop-menu">
       <h2 class="how-to-play">How to play - Spelling</h2>
       <img src="images/tutorial/mathtutorial.jpg" class="math-tutorial">
       <img src="images/tutorial/spellingtutorial.jpg" class="spelling-tutorial">
       <button class="button close-tutorial">Back</button>
     </div>
 
     <!-- This is the achievement section (hidden by default) -->
-    <div id="achievement-screen">
+    <div id="achievement-screen" class="drop-menu">
       <h2>Achievements</h2>
       <div id="achievements-div">
         <table id="achievements-table">
@@ -162,20 +170,20 @@ <h2>Achievements</h2>
     </div>
 
      <!-- This is the difficulty menu section (hidden by default) -->
-      <div id="difficulty-menu" >
+      <div id="difficulty-menu" class="drop-menu">
         <h2>Choose Difficulty</h2>
         <button id="easy" class="button diff">Easy</button>
         <br/>
         <button id="medium" class="button-selected diff">Medium</button>
         <br/>
         <button id="hard" class="button diff">Hard</button> 
-        <button class="button tutorial-button">Tutorial</button>
+        <button id = "tutorial-button" class="button">Tutorial</button>
         <button id="start-button" class="button">Start Game</button> 
         <button class="button main-menu-button">Back</button>
       </div>
 
       <!-- This is the leaderboard section (hidden by default) -->
-      <div id="leaderboard" >
+      <div id="leaderboard" class="drop-menu">
         <h2 id="leaderboard-header">Leaderboard - Spelling</h2>
             <?php include 'php/server-logOn.php'; ?>
 
@@ -287,7 +295,6 @@ <h1 id="score" class="score"></h1>
   <script src="js/lives.js"></script>
   <script src="js/gameOver.js"></script>
   <script src="js/bonusLevel.js"></script>
-
   <script src="js/background.js"></script>
 
   <!-- Canvas resizing script -->

js/menus.js

@@ -29,7 +29,7 @@ $(document).ready(function () {
   /**
    * Brings the tutorial screen up.
    */
-  $(".tutorial-button").click(function() {
+  $("#tutorial-button").click(function() {
     $("#tutorial-screen").css({display: "block"});
   });
 

style/base.css

@@ -0,0 +1,64 @@
+/*************/
+/* Reset CSS */
+/*************/
+* {
+  margin: 0;
+  padding: 0;
+  font-size: 100%;
+  font: inherit;
+  vertical-align: baseline;
+}
+
+/*******************/
+/* General Styling */
+/*******************/
+h2 {
+  text-align: center;
+  padding-top: 1em;
+  padding-bottom: 1em;
+  margin: 0 0 0.3em 0;
+  background: #F1AE3E;
+  background-color: #0088CB;
+  box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.40);
+  border: none;
+  font-family: 'Montserrat', sans-serif;
+  font-weight: 700;
+  font-size: 1.5em;
+  color: #FFFFFF;
+  text-shadow: 0px 4px 24px rgba(0, 0, 0, 0.50);
+  background-image: radial-gradient(50% 99%, rgba(193,238,253,0.65) 0%, rgba(23,51,97,0.36) 100%);
+}
+
+button {
+  outline: none;
+}
+
+button:hover {
+    text-shadow: 0px 8px 24px rgba(0, 0, 0, 0.70);
+    box-shadow: 0px 10px 30px 0px rgba(0, 0, 0, 0.60);
+}
+
+button:active {
+  text-shadow: 0px 2px 24px rgba(0, 0, 0, 0.70);
+}
+
+#wrapper {
+  position: relative;
+  width: 1000px;
+  height: 100vh;
+  margin: auto;
+  top: 0;
+}
+
+p {
+  margin: 0;
+}
+
+/**********************************/
+/* Fill Wrapper When Under 1000px */
+/**********************************/
+@media screen and (max-width: 1000px) {
+  #wrapper {
+    width: 100%;
+  }
+}