From 331db0bd0da573af32edb3d9511d91f76d0b15bf Mon Sep 17 00:00:00 2001
From: Henry <henrycastordossantos@gmail.com>
Date: Sun, 22 Oct 2017 21:03:58 -0200
Subject: [PATCH 01/34] Create style.scss

---
 style.scss | 1069 ++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 1069 insertions(+)
 create mode 100644 style.scss

diff --git a/style.scss b/style.scss
new file mode 100644
index 0000000..4ec8e8d
--- /dev/null
+++ b/style.scss
@@ -0,0 +1,1069 @@
+/* reset CSS */
+
+html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  font-size: 100%;
+  font: inherit;
+  vertical-align: baseline;
+}
+
+/* HTML5 display-role reset for older browsers */
+
+article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
+  display: block;
+}
+
+body {
+  line-height: 1;
+}
+
+ol, ul {
+  list-style: none;
+}
+
+blockquote, q {
+  quotes: none;
+}
+
+blockquote {
+  &:before, &:after {
+    content: '';
+    content: none;
+  }
+}
+
+q {
+  &:before, &:after {
+    content: '';
+    content: none;
+  }
+}
+
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+html {
+  width: 100%;
+  height: 100%;
+}
+
+body {
+  width: 100%;
+  height: 100%;
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  -moz-user-select: moz-none;
+  -ms-user-select: none;
+  user-select: none;
+  color: #fff;
+  background: #000 url(img/darkNoise.png);
+  font-family: Tahoma,Arial,sans-serif;
+  font-size: 13px;
+}
+
+small {
+  font-size: 80%;
+}
+
+a {
+  text-decoration: underline;
+  cursor: pointer;
+  color: #ccc;
+  &:visited {
+    text-decoration: underline;
+    cursor: pointer;
+    color: #ccc;
+  }
+  &:hover {
+    text-shadow: 0px 0px 3px #fff;
+    color: #fff;
+  }
+  &:active {
+    opacity: 0.8;
+    background: transparent;
+  }
+}
+
+.inset {
+  box-shadow: 0px 0px 12px #000 inset;
+}
+
+.title {
+  font-family: 'Kavoon', Georgia,serif;
+  font-size: 28px;
+  text-shadow: 0px 0px 4px #000;
+  color: #fff;
+}
+
+.section {
+  font-family: 'Kavoon', Georgia,serif;
+  font-size: 28px;
+  text-shadow: 0px 0px 4px #000;
+  color: #fff;
+  padding: 16px;
+  width: 100%;
+  text-align: center;
+}
+
+.subsection {
+  padding: 8px 0px;
+  font-size: 14px;
+  div.title {
+    font-size: 22px;
+    padding: 8px 16px;
+    width: 100%;
+    border-bottom: 1px solid #999;
+    margin-bottom: 8px;
+  }
+}
+
+.update {
+  .title {
+    color: #69c;
+  }
+  &.small .title {
+    font-size: 16px;
+    opacity: 0.8;
+    color: #fff;
+  }
+}
+
+.listing {
+  padding: 3px 16px;
+  font-size: 13px;
+  b {
+    font-weight: bold;
+    opacity: 0.6;
+  }
+  small {
+    font-size: 11px;
+    opacity: 0.9;
+  }
+  label {
+    font-size: 12px;
+    border-bottom: 1px solid #fff;
+    opacity: 0.5;
+    padding-left: 16px;
+    padding-bottom: 2px;
+    position: relative;
+    left: -4px;
+    top: -2px;
+  }
+}
+
+.hidden {
+  visibility: hidden;
+}
+
+.listing:hover .hidden {
+  visibility: visible;
+}
+
+a.option, .info a {
+  display: inline-block;
+  border: 1px solid #ccc;
+  background: #000;
+  margin: 2px 4px 2px 0px;
+  color: #ccc;
+  font-size: 12px;
+  padding: 4px 8px;
+  text-decoration: none;
+}
+
+a.option:hover, .info a:hover {
+  border-color: #fff;
+  color: #fff;
+  text-shadow: none;
+}
+
+a.option:active, .info a:active {
+  background-color: #333;
+}
+
+a.option.warning {
+  &:hover {
+    border-color: #f33;
+    color: #f33;
+  }
+  &:active {
+    background-color: #300;
+  }
+}
+
+.info a {
+  border-color: #666;
+  background: #eee;
+  color: #666;
+  padding: 2px 6px;
+  &:hover {
+    border-color: #000;
+    background-color: #fff;
+    color: #000;
+  }
+  &:active {
+    background-color: #999;
+  }
+}
+
+.warning, a.option.warning {
+  color: #c00;
+  border-color: #c00;
+}
+
+#backgroundLayers {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  left: 0px;
+  top: 0px;
+  div {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    left: 0px;
+    top: 0px;
+  }
+}
+
+#backgroundLayer1 {
+  background: url(img/bgBlue.jpg);
+}
+
+#backgroundLayer2 {
+  background: #000 url(img/darkNoise.png);
+}
+
+#topBar {
+  position: absolute;
+  left: 0px;
+  top: 0px;
+  width: 100%;
+  height: 32px;
+  background: url(img/darkNoise.png);
+  box-shadow: 0px -4px 8px #666 inset;
+  color: #ccc;
+  div {
+    margin: 6px 8px;
+  }
+  a {
+    color: #fff;
+  }
+}
+
+#javascriptError {
+  position: absolute;
+  left: 0px;
+  top: 0px;
+  right: 0px;
+  bottom: 0px;
+  background: url(img/darkNoise.png);
+  text-align: center;
+  z-index: 100000000000;
+  line-height: 150%;
+  font-size: 20px;
+}
+
+#game {
+  position: absolute;
+  left: 0px;
+  top: 32px;
+  right: 0px;
+  bottom: 0px;
+  overflow: hidden;
+}
+
+#sectionLeft {
+  position: absolute;
+  left: 0px;
+  top: 0px;
+  width: 30%;
+  bottom: 0px;
+  min-width: 100px;
+  overflow: hidden;
+}
+
+#sectionMiddle {
+  position: absolute;
+  left: 30%;
+  padding-left: 16px;
+  margin-right: 15px;
+  top: 0px;
+  right: 318px;
+  bottom: 0px;
+  min-width: 100px;
+  overflow-x: hidden;
+  overflow-y: scroll;
+}
+
+#game.onMenu #sectionMiddle {
+  background: #000 url(img/darkNoise.png);
+}
+
+#sectionRight {
+  height: 100%;
+  position: absolute;
+  top: 0px;
+  right: 0px;
+  overflow-x: hidden;
+  overflow-y: scroll;
+}
+
+#sectionLeft {
+  .blackGradient {
+    background: url(img/blackGradient.png) repeat-x bottom;
+    position: absolute;
+    left: 0px;
+    right: 0px;
+    top: 300px;
+    height: 640px;
+  }
+  .blackFiller {
+    background: #000;
+    position: absolute;
+    left: 0px;
+    right: 0px;
+    top: 940px;
+    bottom: 0px;
+  }
+}
+
+#tooltipAnchor {
+  position: absolute;
+  z-index: 1000000000;
+  display: none;
+}
+
+#tooltip {
+  position: absolute;
+  background: #000 url(img/darkNoise.png);
+  padding: 4px 8px;
+  margin: 4px;
+  border: 3px ridge #d2e248;
+  border-color: #c7cd6e #a48836 #845a36 #a48836;
+  border-radius: 3px;
+  box-shadow: 0px 0px 1px 2px rgba(0, 0, 0, 0.5), 0px 2px 4px rgba(0, 0, 0, 0.25), 0px 0px 6px 1px rgba(0, 0, 0, 0.5) inset;
+  text-shadow: 0px 1px 1px #000;
+  color: #ccc;
+  b {
+    color: #fff;
+    font-weight: bold;
+  }
+  .name {
+    font-weight: bold;
+    font-size: 110%;
+    color: #fff;
+    margin: 2px 0px;
+  }
+}
+
+.description {
+  margin: 4px 0px;
+}
+
+#tooltip q {
+  display: block;
+  position: relative;
+  text-align: right;
+  margin-top: 8px;
+  font-style: italic;
+  opacity: 0.7;
+}
+
+q {
+  &:before, &:after {
+    display: inline-block;
+    content: "\"";
+  }
+}
+
+.price {
+  font-weight: bold;
+  color: #6f6;
+  padding-left: 18px;
+  position: relative;
+  &.disabled {
+    color: #f66;
+  }
+}
+
+.disabled .price {
+  color: #f66;
+}
+
+.price {
+  &:before {
+    content: '';
+    display: block;
+    position: absolute;
+    left: 0px;
+    top: 2px;
+    background: url(img/money.png);
+    width: 16px;
+    height: 16px;
+  }
+  &.plain {
+    color: #fff;
+    display: inline-block;
+    &:before {
+      top: 0px;
+    }
+  }
+}
+
+#cookieAnchor {
+  position: absolute;
+  left: 50%;
+  top: 40%;
+}
+
+#bigCookie {
+  width: 256px;
+  height: 256px;
+  position: absolute;
+  left: -128px;
+  top: -128px;
+  background: url(img/perfectCookie.png);
+  background-size: 256px 256px;
+  cursor: pointer;
+  z-index: 10;
+  -webkit-transition: opacity 0.1s ease-out,-webkit-transform 0.1s ease-out;
+  -moz-transition: opacity 0.1s ease-out,-moz-transform 0.1s ease-out;
+  -ms-transition: opacity 0.1s ease-out,-ms-transform 0.1s ease-out;
+  -o-transition: opacity 0.1s ease-out,-o-transform 0.1s ease-out;
+  transition: opacity 0.1s ease-out,transform 0.1s ease-out;
+}
+
+.elderWrath #bigCookie {
+  background: url(img/imperfectCookie.png);
+  background-size: 256px 256px;
+}
+
+#bigCookie {
+  &:hover {
+    -webkit-transform: scale(1.05, 1.05);
+    opacity: 0.9;
+    -moz-transform: scale(1.05, 1.05);
+    opacity: 0.9;
+    -ms-transform: scale(1.05, 1.05);
+    opacity: 0.9;
+    -o-transform: scale(1.05, 1.05);
+    opacity: 0.9;
+    transform: scale(1.05, 1.05);
+    opacity: 0.9;
+  }
+  &:active {
+    -webkit-transform: scale(0.98, 0.98);
+    opacity: 1;
+    -moz-transform: scale(0.98, 0.98);
+    opacity: 1;
+    -ms-transform: scale(0.98, 0.98);
+    opacity: 1;
+    -o-transform: scale(0.98, 0.98);
+    opacity: 1;
+    transform: scale(0.98, 0.98);
+    opacity: 1;
+  }
+}
+
+#cookieShine {
+  width: 512px;
+  height: 512px;
+  position: absolute;
+  left: -256px;
+  top: -256px;
+  background: url(img/shine.png);
+  background-size: 100%;
+  z-index: 5;
+  opacity: 0.5;
+}
+
+#cookieNumbers {
+  position: absolute;
+  top: -80px;
+}
+
+.cookieNumber {
+  position: absolute;
+  pointer-events: none;
+  left: -100px;
+  top: 0px;
+  width: 200px;
+  z-index: 100;
+  text-align: center;
+  text-shadow: none;
+}
+
+#cookieCursors {
+  position: absolute;
+  z-index: 5;
+}
+
+.cursor {
+  width: 32px;
+  height: 32px;
+  position: absolute;
+  background: url(img/cursor.png);
+}
+
+.cookieParticle {
+  width: 64px;
+  height: 64px;
+  margin-left: -32px;
+  margin-top: -32px;
+  position: absolute;
+  background: url(img/smallCookies.png);
+  opacity: 0;
+}
+
+#particles {
+  position: absolute;
+  left: 0px;
+  top: 0px;
+}
+
+.particle {
+  position: absolute;
+  pointer-events: none;
+  left: -200px;
+  bottom: 0px;
+  width: 400px;
+  z-index: 100000000;
+  text-align: center;
+  text-shadow: 0px 0px 6px #000;
+  font-size: 24px;
+}
+
+#cookieShower {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  z-index: 2;
+}
+
+#milk {
+  width: 100%;
+  height: 0%;
+  position: absolute;
+  left: 0px;
+  bottom: 0px;
+  z-index: 100;
+  opacity: 0.9;
+}
+
+.milkLayer {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  left: 0px;
+  top: 0px;
+  background-repeat: repeat-x;
+}
+
+#cookies {
+  position: absolute;
+  left: 0px;
+  top: 15%;
+  width: 100%;
+  text-align: center;
+  z-index: 200;
+  background: #000;
+  background: rgba(0, 0, 0, 0.4);
+  padding: 2px 0px;
+}
+
+.separatorLeft, .separatorRight {
+  width: 16px;
+  height: 100%;
+  background: url(img/panelVertical.png) repeat-y;
+  position: absolute;
+  top: 0px;
+  bottom: 0px;
+  z-index: 100;
+}
+
+.separatorLeft {
+  left: 30%;
+}
+
+.separatorRight {
+  right: 317px;
+}
+
+.separatorBottom {
+  width: 100%;
+  height: 16px;
+  background: url(img/panelHorizontal.png) repeat-x;
+  position: absolute;
+  left: 0px;
+  bottom: 0px;
+}
+
+.button {
+  background: #000 url(img/darkNoise.png);
+  box-shadow: 0px 0px 3px #666 inset,0px 0px 4px #000;
+  position: absolute;
+  z-index: 100;
+  width: 64px;
+  height: 24px;
+  text-align: center;
+  font-size: 18px;
+  cursor: pointer;
+  -webkit-transition: left 0.1s ease-out,right 0.1s ease-out,box-shadow 0.1s ease-out;
+  -moz-transition: left 0.1s ease-out,right 0.1s ease-out,box-shadow 0.1s ease-out;
+  -ms-transition: left 0.1s ease-out,right 0.1s ease-out,box-shadow 0.1s ease-out;
+  -o-transition: left 0.1s ease-out,right 0.1s ease-out,box-shadow 0.1s ease-out;
+  transition: left 0.1s ease-out,right 0.1s ease-out,box-shadow 0.1s ease-out;
+  &:hover {
+    box-shadow: 0px 0px 12px #ccc inset,0px 0px 4px #000;
+    z-index: 1000;
+  }
+}
+
+#prefsButton:hover, #statsButton:hover {
+  left: -8px;
+}
+
+#prefsButton, #statsButton {
+  padding: 14px 0px 10px 16px;
+}
+
+#prefsButton {
+  top: 0px;
+  left: -16px;
+}
+
+#statsButton {
+  bottom: 16px;
+  left: -16px;
+}
+
+#logButton {
+  &:hover {
+    right: -8px;
+  }
+  padding: 14px 16px 10px 0px;
+  bottom: 16px;
+  right: -16px;
+}
+
+#game.onMenu {
+  #menu {
+    display: block;
+  }
+  .row {
+    display: none;
+  }
+}
+
+#menu {
+  display: none;
+  z-index: 1000000;
+  position: absolute;
+  left: 16px;
+  right: 0px;
+  top: 112px;
+  bottom: 0px;
+  /*box-shadow:0px 0px 24px #000 inset;
+  background:#000 url(img/darkNoise.png);*/
+}
+
+#comments {
+  padding: 16px;
+  text-align: center;
+  position: relative;
+  padding-bottom: 32px;
+  font-size: 16px;
+  height: 64px;
+  overflow: hidden;
+}
+
+#commentsText {
+  padding: 0px 64px;
+  q {
+    font-style: italic;
+  }
+  sig {
+    font-size: 70%;
+    display: block;
+    text-align: center;
+    opacity: 0.7;
+    &:before {
+      content: "-";
+      padding-left: 64px;
+    }
+  }
+}
+
+.row {
+  height: 128px;
+  position: relative;
+  padding-bottom: 32px;
+  display: none;
+  overflow: hidden;
+  &.enabled {
+    display: block;
+  }
+  .content {
+    width: 100%;
+    height: 128px;
+    position: absolute;
+    overflow-x: scroll;
+    overflow-y: hidden;
+    padding-bottom: 16px;
+  }
+  .background {
+    background: #999;
+    position: absolute;
+    left: 0px;
+    top: 0px;
+    height: 100%;
+    z-index: 1;
+    min-width: 100%;
+  }
+  .backgroundLeft, .backgroundRight {
+    width: 128px;
+    height: 128px;
+    position: absolute;
+    top: 0px;
+  }
+  .backgroundLeft {
+    left: 0px;
+  }
+  .backgroundRight {
+    right: 0px;
+  }
+  .objects {
+    position: absolute;
+    z-index: 10;
+  }
+  .special {
+    position: absolute;
+    z-index: 1000000;
+    width: 100%;
+    top: 0px;
+    bottom: 16px;
+    background: #000 url(img/mapBG.jpg) fixed;
+    display: none;
+  }
+  .specialButton {
+    visibility: hidden;
+    display: none;
+    position: absolute;
+    top: 0px;
+    left: 0px;
+    width: 128px;
+    height: 128px;
+    z-index: 200000;
+  }
+}
+
+a.control {
+  position: absolute;
+  width: 48px;
+  height: 48px;
+  background: url(img/control.png) no-repeat;
+  opacity: 0.8;
+  &:hover {
+    opacity: 1;
+  }
+  &.west {
+    left: 0px;
+    top: 48px;
+    background-position: 0px -48px;
+  }
+  &.east {
+    left: 96px;
+    top: 48px;
+    background-position: -96px -48px;
+  }
+  &.north {
+    left: 48px;
+    top: 0px;
+    background-position: -48px 0px;
+  }
+  &.south {
+    left: 48px;
+    top: 96px;
+    background-position: -48px -96px;
+  }
+  &.middle {
+    left: 48px;
+    top: 48px;
+    background-position: -48px -48px;
+  }
+}
+
+.map {
+  position: absolute;
+  left: 0px;
+  top: 0px;
+  overflow: hidden;
+  background: #000;
+  .tile, .thing {
+    width: 16px;
+    height: 16px;
+    position: absolute;
+    left: 0px;
+    top: 0px;
+  }
+  .tile {
+    background: url(img/mapTiles.png) no-repeat;
+    z-index: 100;
+  }
+  .thing {
+    background: url(img/mapIcons.png) no-repeat;
+    z-index: 200;
+  }
+}
+
+.special .fighter {
+  position: absolute;
+  width: 96px;
+  height: 96px;
+}
+
+.row .info, #sectionLeft .info {
+  /*visibility:hidden;*/
+  -webkit-transition: opacity 0.1s ease-out;
+  -moz-transition: opacity 0.1s ease-out;
+  -ms-transition: opacity 0.1s ease-out;
+  -o-transition: opacity 0.1s ease-out;
+  transition: opacity 0.1s ease-out;
+  opacity: 0;
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  height: 112px;
+  padding: 8px;
+  z-index: 100000;
+  font-size: 12px;
+  line-height: 125%;
+  background: url(img/infoBG.png);
+  color: #666;
+  box-shadow: 0px 0px 4px #000;
+}
+
+.row .info:after {
+  width: 16px;
+  height: 128px;
+  position: absolute;
+  right: -16px;
+  top: 0px;
+  background: url(img/infoBGfade.png) repeat-y;
+  display: block;
+  content: '';
+}
+
+#sectionLeft .info {
+  border-radius: 16px;
+  padding: 24px 8px 8px 24px;
+  left: -16px;
+  top: -16px;
+  height: auto;
+}
+
+.row:hover .info, #sectionLeft:hover .info {
+  visibility: visible;
+  opacity: 1;
+}
+
+.row {
+  &:hover .specialButton {
+    visibility: visible;
+    opacity: 1;
+  }
+  .object {
+    position: absolute;
+    width: 64px;
+    height: 64px;
+  }
+}
+
+#sectionLeftInfo {
+  position: absolute;
+  left: 0px;
+  top: 0px;
+  width: 100%;
+}
+
+#storeTitle {
+  text-align: center;
+  padding: 8px;
+  width: 284px;
+}
+
+#upgrades {
+  height: 60px;
+  width: 300px;
+  position: relative;
+  overflow-y: hidden;
+  &:hover {
+    height: auto;
+    min-height: 60px;
+  }
+}
+
+.crate {
+  width: 60px;
+  height: 60px;
+  display: inline-block;
+  cursor: pointer;
+  opacity: 0.6;
+  position: relative;
+  background: #000;
+  float: left;
+  &:before {
+    content: '';
+    position: absolute;
+    left: 0px;
+    top: 0px;
+    width: 60px;
+    height: 60px;
+    display: block;
+    background: url(img/upgradeFrame.png);
+    z-index: 10;
+  }
+}
+
+.icon {
+  width: 48px;
+  height: 48px;
+  display: inline-block;
+  margin: 0px 4px;
+  background-image: url(img/icons.png?v=1);
+}
+
+.crate {
+  background-image: url(img/icons.png?v=1);
+}
+
+.achievement {
+  opacity: 0.4;
+}
+
+.crate {
+  &.enabled {
+    opacity: 1;
+  }
+  &:hover {
+    &:before {
+      box-shadow: 0px 0px 6px #fff inset,0px 0px 1px #000;
+      z-index: 20;
+    }
+    background-color: #200e0a;
+  }
+}
+
+.product {
+  width: 300px;
+  height: 64px;
+  cursor: pointer;
+  opacity: 0.6;
+  background: url(img/storeTile.jpg);
+  position: relative;
+  &:nth-child(4n-3) {
+    background-position: 0px 64px;
+  }
+  &:nth-child(4n-2) {
+    background-position: 0px 128px;
+  }
+  &:nth-child(4n-1) {
+    background-position: 0px 192px;
+  }
+  &:hover {
+    box-shadow: 0px 0px 16px #fff inset,0px 0px 1px #000;
+    z-index: 20;
+  }
+  &.enabled {
+    &:active {
+      box-shadow: 0px 0px 16px #000 inset;
+    }
+    opacity: 1;
+  }
+  .icon {
+    width: 64px;
+    height: 64px;
+    position: absolute;
+    left: 0px;
+    top: 0px;
+  }
+  .content {
+    display: inline-block;
+    position: absolute;
+    left: 64px;
+    top: 6px;
+    right: 0px;
+    bottom: 6px;
+    padding: 4px;
+    text-shadow: 0px 0px 6px #000,0px 1px 1px #000;
+    .owned {
+      position: absolute;
+      right: 12px;
+      top: 6px;
+      font-size: 40px;
+      opacity: 0.2;
+      color: #000;
+      text-shadow: 0px 0px 8px #fff;
+    }
+  }
+}
+
+.goldenCookie {
+  width: 96px;
+  height: 96px;
+  background: url(img/goldCookie.png);
+  cursor: pointer;
+  position: absolute;
+  z-index: 10000000000;
+  display: none;
+}
+
+#versionNumber {
+  position: absolute;
+  left: 0px;
+  bottom: 0px;
+  opacity: 0.5;
+  margin: 8px;
+  font-size: 22px;
+  z-index: 100000000;
+}
+
+#alert {
+  display: none;
+  position: fixed;
+  bottom: -16px;
+  left: -16px;
+  z-index: 100000000000;
+  padding: 8px 8px 24px 24px;
+  font-size: 14px;
+  background: #990;
+  border-radius: 16px;
+  color: #fff;
+  box-shadow: 0px 0px 4px #000;
+}
+
+#support {
+  width: 280px;
+  text-align: center;
+  margin: 16px auto;
+}
+
+#supportComment {
+  opacity: 0.5;
+  margin: 8px;
+}
+
+.noFancy {
+  * {
+    text-shadow: none !important;
+    box-shadow: none !important;
+  }
+  .price {
+    text-shadow: 0px 0px 4px #000, 0px 1px 0px #000 !important;
+  }
+}

From 14d235ed1643dc98608aafa99ee0bd02fda2b112 Mon Sep 17 00:00:00 2001
From: Henry <henrycastordossantos@gmail.com>
Date: Tue, 24 Oct 2017 23:31:43 +0800
Subject: [PATCH 02/34] @mixin absolute

---
 style.scss | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

diff --git a/style.scss b/style.scss
index 4ec8e8d..5760116 100644
--- a/style.scss
+++ b/style.scss
@@ -538,17 +538,20 @@ q {
   font-size: 24px;
 }
 
-#cookieShower {
-  position: absolute;
+@mixin absolute {
   width: 100%;
+  position: absolute;
+}
+
+#cookieShower {
+  @include absolute
   height: 100%;
   z-index: 2;
 }
 
 #milk {
-  width: 100%;
+  @include absolute
   height: 0%;
-  position: absolute;
   left: 0px;
   bottom: 0px;
   z-index: 100;
@@ -556,9 +559,8 @@ q {
 }
 
 .milkLayer {
-  width: 100%;
+  @include absolute
   height: 100%;
-  position: absolute;
   left: 0px;
   top: 0px;
   background-repeat: repeat-x;

From 1d558f3fd0221af1fbc6282579f1ff6cc8fb05ae Mon Sep 17 00:00:00 2001
From: Henry <henrycastordossantos@gmail.com>
Date: Tue, 24 Oct 2017 23:53:08 +0800
Subject: [PATCH 03/34] @mixin absolute 2

---
 style.scss | 22 +++++++++-------------
 1 file changed, 9 insertions(+), 13 deletions(-)

diff --git a/style.scss b/style.scss
index 5760116..28ff5cd 100644
--- a/style.scss
+++ b/style.scss
@@ -9,6 +9,11 @@ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockq
   vertical-align: baseline;
 }
 
+@mixin absolute {
+  width: 100%;
+  position: absolute;
+}
+
 /* HTML5 display-role reset for older browsers */
 
 article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
@@ -216,9 +221,8 @@ a.option.warning {
 }
 
 #backgroundLayers {
-  width: 100%;
+  @include absolute
   height: 100%;
-  position: absolute;
   left: 0px;
   top: 0px;
   div {
@@ -239,10 +243,9 @@ a.option.warning {
 }
 
 #topBar {
-  position: absolute;
+  @include absolute
   left: 0px;
   top: 0px;
-  width: 100%;
   height: 32px;
   background: url(img/darkNoise.png);
   box-shadow: 0px -4px 8px #666 inset;
@@ -538,11 +541,6 @@ q {
   font-size: 24px;
 }
 
-@mixin absolute {
-  width: 100%;
-  position: absolute;
-}
-
 #cookieShower {
   @include absolute
   height: 100%;
@@ -567,10 +565,9 @@ q {
 }
 
 #cookies {
-  position: absolute;
+  @include absolute
   left: 0px;
   top: 15%;
-  width: 100%;
   text-align: center;
   z-index: 200;
   background: #000;
@@ -744,9 +741,8 @@ q {
     z-index: 10;
   }
   .special {
-    position: absolute;
+    @include absolute
     z-index: 1000000;
-    width: 100%;
     top: 0px;
     bottom: 16px;
     background: #000 url(img/mapBG.jpg) fixed;

From f1130875ac72f2954e3a9ddf44a42c10013f11d2 Mon Sep 17 00:00:00 2001
From: Henry <henrycastordossantos@gmail.com>
Date: Wed, 25 Oct 2017 00:08:16 +0800
Subject: [PATCH 04/34] @mixin lefttop

---
 style.scss | 41 +++++++++++++++++------------------------
 1 file changed, 17 insertions(+), 24 deletions(-)

diff --git a/style.scss b/style.scss
index 28ff5cd..1d0ae91 100644
--- a/style.scss
+++ b/style.scss
@@ -14,6 +14,11 @@ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockq
   position: absolute;
 }
 
+@mixin lefttop {
+  left: 0px;
+  top: 0px;
+}
+
 /* HTML5 display-role reset for older browsers */
 
 article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
@@ -223,8 +228,7 @@ a.option.warning {
 #backgroundLayers {
   @include absolute
   height: 100%;
-  left: 0px;
-  top: 0px;
+  @include lefttop
   div {
     width: 100%;
     height: 100%;
@@ -244,8 +248,7 @@ a.option.warning {
 
 #topBar {
   @include absolute
-  left: 0px;
-  top: 0px;
+  @include lefttop
   height: 32px;
   background: url(img/darkNoise.png);
   box-shadow: 0px -4px 8px #666 inset;
@@ -259,9 +262,8 @@ a.option.warning {
 }
 
 #javascriptError {
+  @include lefttop
   position: absolute;
-  left: 0px;
-  top: 0px;
   right: 0px;
   bottom: 0px;
   background: url(img/darkNoise.png);
@@ -281,9 +283,8 @@ a.option.warning {
 }
 
 #sectionLeft {
+  @include lefttop
   position: absolute;
-  left: 0px;
-  top: 0px;
   width: 30%;
   bottom: 0px;
   min-width: 100px;
@@ -524,9 +525,8 @@ q {
 }
 
 #particles {
+  @include lefttop
   position: absolute;
-  left: 0px;
-  top: 0px;
 }
 
 .particle {
@@ -558,9 +558,8 @@ q {
 
 .milkLayer {
   @include absolute
+  @include lefttop
   height: 100%;
-  left: 0px;
-  top: 0px;
   background-repeat: repeat-x;
 }
 
@@ -716,10 +715,9 @@ q {
     padding-bottom: 16px;
   }
   .background {
+    @include lefttop
     background: #999;
     position: absolute;
-    left: 0px;
-    top: 0px;
     height: 100%;
     z-index: 1;
     min-width: 100%;
@@ -749,11 +747,10 @@ q {
     display: none;
   }
   .specialButton {
+    @include lefttop
     visibility: hidden;
     display: none;
     position: absolute;
-    top: 0px;
-    left: 0px;
     width: 128px;
     height: 128px;
     z-index: 200000;
@@ -803,11 +800,10 @@ a.control {
   overflow: hidden;
   background: #000;
   .tile, .thing {
+    @include lefttop
     width: 16px;
     height: 16px;
     position: absolute;
-    left: 0px;
-    top: 0px;
   }
   .tile {
     background: url(img/mapTiles.png) no-repeat;
@@ -827,6 +823,7 @@ a.control {
 
 .row .info, #sectionLeft .info {
   /*visibility:hidden;*/
+  @include lefttop
   -webkit-transition: opacity 0.1s ease-out;
   -moz-transition: opacity 0.1s ease-out;
   -ms-transition: opacity 0.1s ease-out;
@@ -834,8 +831,6 @@ a.control {
   transition: opacity 0.1s ease-out;
   opacity: 0;
   position: absolute;
-  top: 0px;
-  left: 0px;
   height: 112px;
   padding: 8px;
   z-index: 100000;
@@ -883,9 +878,8 @@ a.control {
 }
 
 #sectionLeftInfo {
+  @include lefttop
   position: absolute;
-  left: 0px;
-  top: 0px;
   width: 100%;
 }
 
@@ -984,11 +978,10 @@ a.control {
     opacity: 1;
   }
   .icon {
+    @include lefttop
     width: 64px;
     height: 64px;
     position: absolute;
-    left: 0px;
-    top: 0px;
   }
   .content {
     display: inline-block;

From 817356db8baf8deabee3ac669daa8ae380d6a3ac Mon Sep 17 00:00:00 2001
From: Henry <henrycastordossantos@gmail.com>
Date: Wed, 25 Oct 2017 00:14:09 +0800
Subject: [PATCH 05/34] @mixin lefttop 2

---
 style.scss | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/style.scss b/style.scss
index 1d0ae91..769b887 100644
--- a/style.scss
+++ b/style.scss
@@ -230,11 +230,10 @@ a.option.warning {
   height: 100%;
   @include lefttop
   div {
+    @include lefttop
     width: 100%;
     height: 100%;
     position: absolute;
-    left: 0px;
-    top: 0px;
   }
 }
 

From b6bc5634a59f40f91efd6025d17591fbf223f673 Mon Sep 17 00:00:00 2001
From: Henry <henrycastordossantos@gmail.com>
Date: Wed, 25 Oct 2017 00:23:58 +0800
Subject: [PATCH 06/34] @mixin four

---
 style.scss | 13 +++++++++----
 1 file changed, 9 insertions(+), 4 deletions(-)

diff --git a/style.scss b/style.scss
index 769b887..681bf4f 100644
--- a/style.scss
+++ b/style.scss
@@ -9,6 +9,13 @@ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockq
   vertical-align: baseline;
 }
 
+@mixin four {
+  left: 0px;
+  top: 0px;
+  width: 100%;
+  position: absolute;
+}
+
 @mixin absolute {
   width: 100%;
   position: absolute;
@@ -226,9 +233,8 @@ a.option.warning {
 }
 
 #backgroundLayers {
-  @include absolute
+  @include four
   height: 100%;
-  @include lefttop
   div {
     @include lefttop
     width: 100%;
@@ -246,8 +252,7 @@ a.option.warning {
 }
 
 #topBar {
-  @include absolute
-  @include lefttop
+  @include four
   height: 32px;
   background: url(img/darkNoise.png);
   box-shadow: 0px -4px 8px #666 inset;

From 3638956f615816ff3d696ad45b39f6f42f23142d Mon Sep 17 00:00:00 2001
From: Henry <henrycastordossantos@gmail.com>
Date: Wed, 25 Oct 2017 00:29:02 +0800
Subject: [PATCH 07/34] blockquote, q

---
 style.scss | 10 ----------
 1 file changed, 10 deletions(-)

diff --git a/style.scss b/style.scss
index 681bf4f..2603c3e 100644
--- a/style.scss
+++ b/style.scss
@@ -42,16 +42,6 @@ ol, ul {
 
 blockquote, q {
   quotes: none;
-}
-
-blockquote {
-  &:before, &:after {
-    content: '';
-    content: none;
-  }
-}
-
-q {
   &:before, &:after {
     content: '';
     content: none;

From 23dbb1c750929429cbbba45f762205b4b3e15671 Mon Sep 17 00:00:00 2001
From: Henry <henrycastordossantos@gmail.com>
Date: Wed, 25 Oct 2017 01:06:40 +0800
Subject: [PATCH 08/34] a.option, .info a &:hover

---
 style.scss | 11 +++++------
 1 file changed, 5 insertions(+), 6 deletions(-)

diff --git a/style.scss b/style.scss
index 2603c3e..0e75676 100644
--- a/style.scss
+++ b/style.scss
@@ -180,12 +180,11 @@ a.option, .info a {
   font-size: 12px;
   padding: 4px 8px;
   text-decoration: none;
-}
-
-a.option:hover, .info a:hover {
-  border-color: #fff;
-  color: #fff;
-  text-shadow: none;
+  &:hover {
+    border-color: #fff;
+    color: #fff;
+    text-shadow: none;
+  }
 }
 
 a.option:active, .info a:active {

From 3ee8d1a7c55f9e90ce79096cd799fdc9c871c33d Mon Sep 17 00:00:00 2001
From: Henry <henrycastordossantos@gmail.com>
Date: Wed, 25 Oct 2017 01:23:02 +0800
Subject: [PATCH 09/34] Many things

---
 style.scss | 35 ++++++++++++++++-------------------
 1 file changed, 16 insertions(+), 19 deletions(-)

diff --git a/style.scss b/style.scss
index 0e75676..88a6006 100644
--- a/style.scss
+++ b/style.scss
@@ -787,9 +787,8 @@ a.control {
 }
 
 .map {
+  @include lefttop
   position: absolute;
-  left: 0px;
-  top: 0px;
   overflow: hidden;
   background: #000;
   .tile, .thing {
@@ -832,17 +831,16 @@ a.control {
   background: url(img/infoBG.png);
   color: #666;
   box-shadow: 0px 0px 4px #000;
-}
-
-.row .info:after {
-  width: 16px;
-  height: 128px;
-  position: absolute;
-  right: -16px;
-  top: 0px;
-  background: url(img/infoBGfade.png) repeat-y;
-  display: block;
-  content: '';
+  &:after {
+    width: 16px;
+    height: 128px;
+    position: absolute;
+    right: -16px;
+    top: 0px;
+    background: url(img/infoBGfade.png) repeat-y;
+    display: block;
+    content: '';
+  }
 }
 
 #sectionLeft .info {
@@ -853,13 +851,8 @@ a.control {
   height: auto;
 }
 
-.row:hover .info, #sectionLeft:hover .info {
-  visibility: visible;
-  opacity: 1;
-}
-
 .row {
-  &:hover .specialButton {
+  &:hover .specialButton, .info {
     visibility: visible;
     opacity: 1;
   }
@@ -874,6 +867,10 @@ a.control {
   @include lefttop
   position: absolute;
   width: 100%;
+  &:hover .info {
+    visibility: visible;
+    opacity: 1;
+  }
 }
 
 #storeTitle {

From f57260d319e45536142f9f35ec4fa98076e25216 Mon Sep 17 00:00:00 2001
From: Henry <henrycastordossantos@gmail.com>
Date: Wed, 25 Oct 2017 01:25:26 +0800
Subject: [PATCH 10/34] a.option, .info a &:active

---
 style.scss | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/style.scss b/style.scss
index 88a6006..0636cf1 100644
--- a/style.scss
+++ b/style.scss
@@ -185,10 +185,9 @@ a.option, .info a {
     color: #fff;
     text-shadow: none;
   }
-}
-
-a.option:active, .info a:active {
-  background-color: #333;
+  &:active {
+    background-color: #333;
+  }
 }
 
 a.option.warning {

From e2fa8c43f94ab242860136e26615fcf90b165ff0 Mon Sep 17 00:00:00 2001
From: Henry <henrycastordossantos@gmail.com>
Date: Wed, 25 Oct 2017 01:53:05 +0800
Subject: [PATCH 11/34] @mixin bottonright

---
 style.scss | 17 +++++++++--------
 1 file changed, 9 insertions(+), 8 deletions(-)

diff --git a/style.scss b/style.scss
index 0636cf1..3a18820 100644
--- a/style.scss
+++ b/style.scss
@@ -21,6 +21,11 @@ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockq
   position: absolute;
 }
 
+@mixin bottonright {
+  right: 0px;
+  bottom: 0px;
+}
+
 @mixin lefttop {
   left: 0px;
   top: 0px;
@@ -254,10 +259,9 @@ a.option.warning {
 }
 
 #javascriptError {
+  @include bottonright
   @include lefttop
   position: absolute;
-  right: 0px;
-  bottom: 0px;
   background: url(img/darkNoise.png);
   text-align: center;
   z-index: 100000000000;
@@ -266,11 +270,10 @@ a.option.warning {
 }
 
 #game {
+  @include bottonright
   position: absolute;
   left: 0px;
   top: 32px;
-  right: 0px;
-  bottom: 0px;
   overflow: hidden;
 }
 
@@ -319,12 +322,11 @@ a.option.warning {
     height: 640px;
   }
   .blackFiller {
+    @include bottonright
     background: #000;
     position: absolute;
     left: 0px;
-    right: 0px;
     top: 940px;
-    bottom: 0px;
   }
 }
 
@@ -651,13 +653,12 @@ q {
 }
 
 #menu {
+  @include bottonright
   display: none;
   z-index: 1000000;
   position: absolute;
   left: 16px;
-  right: 0px;
   top: 112px;
-  bottom: 0px;
   /*box-shadow:0px 0px 24px #000 inset;
   background:#000 url(img/darkNoise.png);*/
 }

From 2eb97c31da2b34ea929eb5e4d693a045b0611de8 Mon Sep 17 00:00:00 2001
From: Henry <henrycastordossantos@gmail.com>
Date: Wed, 25 Oct 2017 02:18:03 +0800
Subject: [PATCH 12/34] #prefsButton, #statsButton &:hover

---
 style.scss | 10 ++++------
 1 file changed, 4 insertions(+), 6 deletions(-)

diff --git a/style.scss b/style.scss
index 3a18820..dc34595 100644
--- a/style.scss
+++ b/style.scss
@@ -616,22 +616,20 @@ q {
   }
 }
 
-#prefsButton:hover, #statsButton:hover {
-  left: -8px;
-}
-
 #prefsButton, #statsButton {
   padding: 14px 0px 10px 16px;
+  left: -16px;
+  &:hover {
+    left: -8px;
+  }
 }
 
 #prefsButton {
   top: 0px;
-  left: -16px;
 }
 
 #statsButton {
   bottom: 16px;
-  left: -16px;
 }
 
 #logButton {

From 59c42e8333e223736dcb87db638ede088e38cbce Mon Sep 17 00:00:00 2001
From: Henry <henrycastordossantos@gmail.com>
Date: Wed, 25 Oct 2017 02:22:33 +0800
Subject: [PATCH 13/34] crate

---
 style.scss | 28 +++++++++++-----------------
 1 file changed, 11 insertions(+), 17 deletions(-)

diff --git a/style.scss b/style.scss
index dc34595..e53811c 100644
--- a/style.scss
+++ b/style.scss
@@ -897,6 +897,7 @@ a.control {
   position: relative;
   background: #000;
   float: left;
+  background-image: url(img/icons.png?v=1);
   &:before {
     content: '';
     position: absolute;
@@ -908,6 +909,16 @@ a.control {
     background: url(img/upgradeFrame.png);
     z-index: 10;
   }
+  &.enabled {
+    opacity: 1;
+  }
+  &:hover {
+    &:before {
+      box-shadow: 0px 0px 6px #fff inset,0px 0px 1px #000;
+      z-index: 20;
+    }
+    background-color: #200e0a;
+  }
 }
 
 .icon {
@@ -918,27 +929,10 @@ a.control {
   background-image: url(img/icons.png?v=1);
 }
 
-.crate {
-  background-image: url(img/icons.png?v=1);
-}
-
 .achievement {
   opacity: 0.4;
 }
 
-.crate {
-  &.enabled {
-    opacity: 1;
-  }
-  &:hover {
-    &:before {
-      box-shadow: 0px 0px 6px #fff inset,0px 0px 1px #000;
-      z-index: 20;
-    }
-    background-color: #200e0a;
-  }
-}
-
 .product {
   width: 300px;
   height: 64px;

From 7ca198ca595c385f0f945550266bdc512d8cbf59 Mon Sep 17 00:00:00 2001
From: Henry <henrycastordossantos@gmail.com>
Date: Wed, 25 Oct 2017 02:44:13 +0800
Subject: [PATCH 14/34] Update style.scss

---
 style.scss | 56 ++++++++++++++++++++++++++----------------------------
 1 file changed, 27 insertions(+), 29 deletions(-)

diff --git a/style.scss b/style.scss
index e53811c..e097fb3 100644
--- a/style.scss
+++ b/style.scss
@@ -86,6 +86,33 @@ a {
   text-decoration: underline;
   cursor: pointer;
   color: #ccc;
+  .option, .info a {
+    display: inline-block;
+    border: 1px solid #ccc;
+    background: #000;
+    margin: 2px 4px 2px 0px;
+    color: #ccc;
+    font-size: 12px;
+    padding: 4px 8px;
+    text-decoration: none;
+  }
+  .option.warning {
+    &:hover {
+      border-color: #f33;
+      color: #f33;
+   }
+    &:active {
+      background-color: #300;
+    }
+  }
+  &:hover {
+    border-color: #fff;
+    color: #fff;
+    text-shadow: none;
+  }
+  &:active {
+    background-color: #333;
+  }
   &:visited {
     text-decoration: underline;
     cursor: pointer;
@@ -176,35 +203,6 @@ a {
   visibility: visible;
 }
 
-a.option, .info a {
-  display: inline-block;
-  border: 1px solid #ccc;
-  background: #000;
-  margin: 2px 4px 2px 0px;
-  color: #ccc;
-  font-size: 12px;
-  padding: 4px 8px;
-  text-decoration: none;
-  &:hover {
-    border-color: #fff;
-    color: #fff;
-    text-shadow: none;
-  }
-  &:active {
-    background-color: #333;
-  }
-}
-
-a.option.warning {
-  &:hover {
-    border-color: #f33;
-    color: #f33;
-  }
-  &:active {
-    background-color: #300;
-  }
-}
-
 .info a {
   border-color: #666;
   background: #eee;

From 1599c78209a4b20bef1451ebbb98348b6835e5a5 Mon Sep 17 00:00:00 2001
From: Henry <henrycastordossantos@gmail.com>
Date: Wed, 25 Oct 2017 04:05:47 +0800
Subject: [PATCH 15/34] Many things

#bigCookie .elderWrath
#bigCookie
---
 style.scss | 16 ++++------------
 1 file changed, 4 insertions(+), 12 deletions(-)

diff --git a/style.scss b/style.scss
index e097fb3..07f5178 100644
--- a/style.scss
+++ b/style.scss
@@ -387,10 +387,6 @@ q {
   }
 }
 
-.disabled .price {
-  color: #f66;
-}
-
 .price {
   &:before {
     content: '';
@@ -432,14 +428,10 @@ q {
   -ms-transition: opacity 0.1s ease-out,-ms-transform 0.1s ease-out;
   -o-transition: opacity 0.1s ease-out,-o-transform 0.1s ease-out;
   transition: opacity 0.1s ease-out,transform 0.1s ease-out;
-}
-
-.elderWrath #bigCookie {
-  background: url(img/imperfectCookie.png);
-  background-size: 256px 256px;
-}
-
-#bigCookie {
+  .elderWrath {
+      background: url(img/imperfectCookie.png);
+      background-size: 256px 256px;
+  }
   &:hover {
     -webkit-transform: scale(1.05, 1.05);
     opacity: 0.9;

From f0b2edaaf8c9ece1c50da47ab6876f42ca6b3ff6 Mon Sep 17 00:00:00 2001
From: Henry <henrycastordossantos@gmail.com>
Date: Wed, 25 Oct 2017 04:08:44 +0800
Subject: [PATCH 16/34] .price

---
 style.scss | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/style.scss b/style.scss
index 07f5178..a68227a 100644
--- a/style.scss
+++ b/style.scss
@@ -385,9 +385,6 @@ q {
   &.disabled {
     color: #f66;
   }
-}
-
-.price {
   &:before {
     content: '';
     display: block;

From a0823cf177f230ab9c5ebb22861831fe3fda876e Mon Sep 17 00:00:00 2001
From: Henry <henrycastordossantos@gmail.com>
Date: Wed, 25 Oct 2017 01:39:56 -0200
Subject: [PATCH 17/34] .row

---
 style.scss | 21 +++++++++------------
 1 file changed, 9 insertions(+), 12 deletions(-)

diff --git a/style.scss b/style.scss
index a68227a..61bbb16 100644
--- a/style.scss
+++ b/style.scss
@@ -769,6 +769,15 @@ a.control {
     top: 48px;
     background-position: -48px -48px;
   }
+  &:hover .specialButton, .info {
+    visibility: visible;
+    opacity: 1;
+  }
+  .object {
+    position: absolute;
+    width: 64px;
+    height: 64px;
+  }
 }
 
 .map {
@@ -836,18 +845,6 @@ a.control {
   height: auto;
 }
 
-.row {
-  &:hover .specialButton, .info {
-    visibility: visible;
-    opacity: 1;
-  }
-  .object {
-    position: absolute;
-    width: 64px;
-    height: 64px;
-  }
-}
-
 #sectionLeftInfo {
   @include lefttop
   position: absolute;

From 2ebbc47bab982fac9e30b186e94f9a55ba4cac97 Mon Sep 17 00:00:00 2001
From: Henry <henrycastordossantos@gmail.com>
Date: Wed, 25 Oct 2017 01:55:28 -0200
Subject: [PATCH 18/34] #tooltip .q

---
 style.scss | 17 ++++++++---------
 1 file changed, 8 insertions(+), 9 deletions(-)

diff --git a/style.scss b/style.scss
index 61bbb16..f240f94 100644
--- a/style.scss
+++ b/style.scss
@@ -349,6 +349,14 @@ a {
     color: #fff;
     font-weight: bold;
   }
+  q {
+    display: block;
+    position: relative;
+    text-align: right;
+    margin-top: 8px;
+    font-style: italic;
+    opacity: 0.7;
+  }
   .name {
     font-weight: bold;
     font-size: 110%;
@@ -361,15 +369,6 @@ a {
   margin: 4px 0px;
 }
 
-#tooltip q {
-  display: block;
-  position: relative;
-  text-align: right;
-  margin-top: 8px;
-  font-style: italic;
-  opacity: 0.7;
-}
-
 q {
   &:before, &:after {
     display: inline-block;

From 98cf411524c04f498149022287db01deb76c9dd1 Mon Sep 17 00:00:00 2001
From: Henry <henrycastordossantos@gmail.com>
Date: Wed, 25 Oct 2017 02:03:33 -0200
Subject: [PATCH 19/34] #game.onMenu, #sectionLeft

---
 style.scss | 22 +++++++++-------------
 1 file changed, 9 insertions(+), 13 deletions(-)

diff --git a/style.scss b/style.scss
index f240f94..cf2ca45 100644
--- a/style.scss
+++ b/style.scss
@@ -275,15 +275,6 @@ a {
   overflow: hidden;
 }
 
-#sectionLeft {
-  @include lefttop
-  position: absolute;
-  width: 30%;
-  bottom: 0px;
-  min-width: 100px;
-  overflow: hidden;
-}
-
 #sectionMiddle {
   position: absolute;
   left: 30%;
@@ -297,10 +288,6 @@ a {
   overflow-y: scroll;
 }
 
-#game.onMenu #sectionMiddle {
-  background: #000 url(img/darkNoise.png);
-}
-
 #sectionRight {
   height: 100%;
   position: absolute;
@@ -311,6 +298,12 @@ a {
 }
 
 #sectionLeft {
+  @include lefttop
+  position: absolute;
+  width: 30%;
+  bottom: 0px;
+  min-width: 100px;
+  overflow: hidden;
   .blackGradient {
     background: url(img/blackGradient.png) repeat-x bottom;
     position: absolute;
@@ -631,6 +624,9 @@ q {
   #menu {
     display: block;
   }
+  #sectionMiddle {
+    background: #000 url(img/darkNoise.png);
+  }
   .row {
     display: none;
   }

From 226f90cf3248b29c58706836726eb0e120a127e9 Mon Sep 17 00:00:00 2001
From: Henry <henrycastordossantos@gmail.com>
Date: Sun, 29 Oct 2017 15:11:32 -0200
Subject: [PATCH 20/34] #section&

---
 style.scss | 88 +++++++++++++++++++++++++++---------------------------
 1 file changed, 44 insertions(+), 44 deletions(-)

diff --git a/style.scss b/style.scss
index cf2ca45..aed40cb 100644
--- a/style.scss
+++ b/style.scss
@@ -275,50 +275,50 @@ a {
   overflow: hidden;
 }
 
-#sectionMiddle {
-  position: absolute;
-  left: 30%;
-  padding-left: 16px;
-  margin-right: 15px;
-  top: 0px;
-  right: 318px;
-  bottom: 0px;
-  min-width: 100px;
-  overflow-x: hidden;
-  overflow-y: scroll;
-}
-
-#sectionRight {
-  height: 100%;
-  position: absolute;
-  top: 0px;
-  right: 0px;
-  overflow-x: hidden;
-  overflow-y: scroll;
-}
-
-#sectionLeft {
-  @include lefttop
-  position: absolute;
-  width: 30%;
-  bottom: 0px;
-  min-width: 100px;
-  overflow: hidden;
-  .blackGradient {
-    background: url(img/blackGradient.png) repeat-x bottom;
-    position: absolute;
-    left: 0px;
-    right: 0px;
-    top: 300px;
-    height: 640px;
-  }
-  .blackFiller {
-    @include bottonright
-    background: #000;
-    position: absolute;
-    left: 0px;
-    top: 940px;
-  }
+#section {
+    &Middle, &Right, &Left, &Left.blackFiller {
+        position: absolute;
+    }
+    &Middle {
+      left: 30%;
+      padding-left: 16px;
+      margin-right: 15px;
+      top: 0px;
+      right: 318px;
+      bottom: 0px;
+      min-width: 100px;
+      overflow-x: hidden;
+      overflow-y: scroll;
+    }
+    &Right {
+      height: 100%;
+      position: absolute;
+      top: 0px;
+      right: 0px;
+      overflow-x: hidden;
+      overflow-y: scroll;
+    }
+    &Left {
+      @include lefttop
+      width: 30%;
+      bottom: 0px;
+      min-width: 100px;
+      overflow: hidden;
+      .blackGradient {
+        background: url(img/blackGradient.png) repeat-x bottom;   
+        right: 0px;
+        top: 300px;
+        height: 640px;
+      }
+      .blackFiller {
+        @include bottonright
+        background: #000;
+        top: 940px;
+      }
+    }
+  &Left, &Left.blackGradient, &Left.blackFiller {
+        left: 0px;
+    }
 }
 
 #tooltipAnchor {

From d52b7f44e366db39f6aacbf69dd52b0a04abb514 Mon Sep 17 00:00:00 2001
From: Henry <henrycastordossantos@gmail.com>
Date: Sun, 29 Oct 2017 15:44:40 -0200
Subject: [PATCH 21/34] #cookie&

---
 style.scss | 180 ++++++++++++++++++++++++++---------------------------
 1 file changed, 89 insertions(+), 91 deletions(-)

diff --git a/style.scss b/style.scss
index aed40cb..0944bba 100644
--- a/style.scss
+++ b/style.scss
@@ -321,6 +321,70 @@ a {
     }
 }
 
+#cookie {
+    &Anchor, &Shine, &Numbers, &Cursors, &Shower, &s {
+        position: absolute;
+    }
+    &Anchor {
+      left: 50%;
+      top: 40%;
+    }
+    &Shine {
+      width: 512px;
+      height: 512px;
+      left: -256px;
+      top: -256px;
+      background: url(img/shine.png);
+      background-size: 100%;
+      z-index: 5;
+      opacity: 0.5;
+    }
+    &Numbers {
+      top: -80px;
+    }
+    &Cursors {
+      z-index: 5;
+    }
+    &Shower {
+      @include absolute
+      height: 100%;
+      z-index: 2;
+    }
+    &s {
+      @include absolute
+      left: 0px;
+      top: 15%;
+      text-align: center;
+      z-index: 200;
+      background: #000;
+      background: rgba(0, 0, 0, 0.4);
+      padding: 2px 0px;
+    }
+}
+
+.cookie {
+    &Number, &Particle {
+      position: absolute;
+    }
+    &Number {
+      pointer-events: none;
+      left: -100px;
+      top: 0px;
+      width: 200px;
+      z-index: 100;
+      text-align: center;
+      text-shadow: none;
+    }
+    &Particle {
+      width: 64px;
+      height: 64px;
+      margin-left: -32px;
+      margin-top: -32px;
+      background: url(img/smallCookies.png);
+      opacity: 0;
+    }
+}
+
 #tooltipAnchor {
   position: absolute;
   z-index: 1000000000;
@@ -396,12 +460,6 @@ q {
   }
 }
 
-#cookieAnchor {
-  position: absolute;
-  left: 50%;
-  top: 40%;
-}
-
 #bigCookie {
   width: 256px;
   height: 256px;
@@ -447,39 +505,6 @@ q {
   }
 }
 
-#cookieShine {
-  width: 512px;
-  height: 512px;
-  position: absolute;
-  left: -256px;
-  top: -256px;
-  background: url(img/shine.png);
-  background-size: 100%;
-  z-index: 5;
-  opacity: 0.5;
-}
-
-#cookieNumbers {
-  position: absolute;
-  top: -80px;
-}
-
-.cookieNumber {
-  position: absolute;
-  pointer-events: none;
-  left: -100px;
-  top: 0px;
-  width: 200px;
-  z-index: 100;
-  text-align: center;
-  text-shadow: none;
-}
-
-#cookieCursors {
-  position: absolute;
-  z-index: 5;
-}
-
 .cursor {
   width: 32px;
   height: 32px;
@@ -487,16 +512,6 @@ q {
   background: url(img/cursor.png);
 }
 
-.cookieParticle {
-  width: 64px;
-  height: 64px;
-  margin-left: -32px;
-  margin-top: -32px;
-  position: absolute;
-  background: url(img/smallCookies.png);
-  opacity: 0;
-}
-
 #particles {
   @include lefttop
   position: absolute;
@@ -514,12 +529,6 @@ q {
   font-size: 24px;
 }
 
-#cookieShower {
-  @include absolute
-  height: 100%;
-  z-index: 2;
-}
-
 #milk {
   @include absolute
   height: 0%;
@@ -536,42 +545,31 @@ q {
   background-repeat: repeat-x;
 }
 
-#cookies {
-  @include absolute
-  left: 0px;
-  top: 15%;
-  text-align: center;
-  z-index: 200;
-  background: #000;
-  background: rgba(0, 0, 0, 0.4);
-  padding: 2px 0px;
-}
-
-.separatorLeft, .separatorRight {
-  width: 16px;
-  height: 100%;
-  background: url(img/panelVertical.png) repeat-y;
-  position: absolute;
-  top: 0px;
-  bottom: 0px;
-  z-index: 100;
-}
-
-.separatorLeft {
-  left: 30%;
-}
-
-.separatorRight {
-  right: 317px;
-}
-
-.separatorBottom {
-  width: 100%;
-  height: 16px;
-  background: url(img/panelHorizontal.png) repeat-x;
-  position: absolute;
-  left: 0px;
-  bottom: 0px;
+.separator {
+    &Left, &Right, &Bottom {
+        position: absolute;
+    }
+    &Left, & Right {
+      width: 16px;
+      height: 100%;
+      background: url(img/panelVertical.png) repeat-y;
+      top: 0px;
+      bottom: 0px;
+      z-index: 100;
+    }
+    &Left {
+        left: 30%;
+    }
+    &Right {
+        right: 317px;
+    }
+    &Bottom {
+      width: 100%;
+      height: 16px;
+      background: url(img/panelHorizontal.png) repeat-x;
+      left: 0px;
+      bottom: 0px;
+    }
 }
 
 .button {

From 61e4b5a79606e81a175567382e76fe56e8c4c11b Mon Sep 17 00:00:00 2001
From: Henry <henrycastordossantos@gmail.com>
Date: Sun, 29 Oct 2017 15:50:00 -0200
Subject: [PATCH 22/34] Correction .separator&Right

---
 style.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/style.scss b/style.scss
index 0944bba..73d9327 100644
--- a/style.scss
+++ b/style.scss
@@ -549,7 +549,7 @@ q {
     &Left, &Right, &Bottom {
         position: absolute;
     }
-    &Left, & Right {
+    &Left, &Right {
       width: 16px;
       height: 100%;
       background: url(img/panelVertical.png) repeat-y;

From 7612819954d6888297216e97488d35fcf0cadac2 Mon Sep 17 00:00:00 2001
From: Henry <henrycastordossantos@gmail.com>
Date: Sun, 29 Oct 2017 16:23:08 -0200
Subject: [PATCH 23/34] @mixins to %placeholders

---
 style.scss | 42 +++++++++++++++++++++---------------------
 1 file changed, 21 insertions(+), 21 deletions(-)

diff --git a/style.scss b/style.scss
index 73d9327..89e1af8 100644
--- a/style.scss
+++ b/style.scss
@@ -9,24 +9,24 @@ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockq
   vertical-align: baseline;
 }
 
-@mixin four {
+%four {
   left: 0px;
   top: 0px;
   width: 100%;
   position: absolute;
 }
 
-@mixin absolute {
+%absolute {
   width: 100%;
   position: absolute;
 }
 
-@mixin bottonright {
+%bottonright {
   right: 0px;
   bottom: 0px;
 }
 
-@mixin lefttop {
+%lefttop {
   left: 0px;
   top: 0px;
 }
@@ -224,10 +224,10 @@ a {
 }
 
 #backgroundLayers {
-  @include four
+  @extend four
   height: 100%;
   div {
-    @include lefttop
+    @extend lefttop
     width: 100%;
     height: 100%;
     position: absolute;
@@ -243,7 +243,7 @@ a {
 }
 
 #topBar {
-  @include four
+  @extend four
   height: 32px;
   background: url(img/darkNoise.png);
   box-shadow: 0px -4px 8px #666 inset;
@@ -257,8 +257,8 @@ a {
 }
 
 #javascriptError {
-  @include bottonright
-  @include lefttop
+  @extend bottonright
+  @extend lefttop
   position: absolute;
   background: url(img/darkNoise.png);
   text-align: center;
@@ -268,7 +268,7 @@ a {
 }
 
 #game {
-  @include bottonright
+  @extend bottonright
   position: absolute;
   left: 0px;
   top: 32px;
@@ -299,7 +299,7 @@ a {
       overflow-y: scroll;
     }
     &Left {
-      @include lefttop
+      @extend lefttop
       width: 30%;
       bottom: 0px;
       min-width: 100px;
@@ -351,7 +351,7 @@ a {
       z-index: 2;
     }
     &s {
-      @include absolute
+      @extend absolute
       left: 0px;
       top: 15%;
       text-align: center;
@@ -513,7 +513,7 @@ q {
 }
 
 #particles {
-  @include lefttop
+  @extend lefttop
   position: absolute;
 }
 
@@ -530,7 +530,7 @@ q {
 }
 
 #milk {
-  @include absolute
+  @extend absolute
   height: 0%;
   left: 0px;
   bottom: 0px;
@@ -539,8 +539,8 @@ q {
 }
 
 .milkLayer {
-  @include absolute
-  @include lefttop
+  @extend absolute
+  @extend lefttop
   height: 100%;
   background-repeat: repeat-x;
 }
@@ -631,7 +631,7 @@ q {
 }
 
 #menu {
-  @include bottonright
+  @extend bottonright
   display: none;
   z-index: 1000000;
   position: absolute;
@@ -774,7 +774,7 @@ a.control {
 }
 
 .map {
-  @include lefttop
+  @extend lefttop
   position: absolute;
   overflow: hidden;
   background: #000;
@@ -802,7 +802,7 @@ a.control {
 
 .row .info, #sectionLeft .info {
   /*visibility:hidden;*/
-  @include lefttop
+  @extend lefttop
   -webkit-transition: opacity 0.1s ease-out;
   -moz-transition: opacity 0.1s ease-out;
   -ms-transition: opacity 0.1s ease-out;
@@ -839,7 +839,7 @@ a.control {
 }
 
 #sectionLeftInfo {
-  @include lefttop
+  @extend lefttop
   position: absolute;
   width: 100%;
   &:hover .info {
@@ -937,7 +937,7 @@ a.control {
     opacity: 1;
   }
   .icon {
-    @include lefttop
+    @extend lefttop
     width: 64px;
     height: 64px;
     position: absolute;

From b27c70771fc955e157f2b75086e7deb1a1e54dc9 Mon Sep 17 00:00:00 2001
From: Henry <henrycastordossantos@gmail.com>
Date: Sun, 29 Oct 2017 16:33:41 -0200
Subject: [PATCH 24/34] @mixins to %placeholders 2

---
 style.scss | 38 +++++++++++++++++++-------------------
 1 file changed, 19 insertions(+), 19 deletions(-)

diff --git a/style.scss b/style.scss
index 89e1af8..e1067d5 100644
--- a/style.scss
+++ b/style.scss
@@ -224,10 +224,10 @@ a {
 }
 
 #backgroundLayers {
-  @extend four
+  @extend four;
   height: 100%;
   div {
-    @extend lefttop
+    @extend lefttop;
     width: 100%;
     height: 100%;
     position: absolute;
@@ -243,7 +243,7 @@ a {
 }
 
 #topBar {
-  @extend four
+  @extend four;
   height: 32px;
   background: url(img/darkNoise.png);
   box-shadow: 0px -4px 8px #666 inset;
@@ -257,8 +257,8 @@ a {
 }
 
 #javascriptError {
-  @extend bottonright
-  @extend lefttop
+  @extend bottonright;
+  @extend lefttop;
   position: absolute;
   background: url(img/darkNoise.png);
   text-align: center;
@@ -268,7 +268,7 @@ a {
 }
 
 #game {
-  @extend bottonright
+  @extend bottonright;
   position: absolute;
   left: 0px;
   top: 32px;
@@ -299,7 +299,7 @@ a {
       overflow-y: scroll;
     }
     &Left {
-      @extend lefttop
+      @extend lefttop;
       width: 30%;
       bottom: 0px;
       min-width: 100px;
@@ -311,7 +311,7 @@ a {
         height: 640px;
       }
       .blackFiller {
-        @include bottonright
+        @extend bottonright;
         background: #000;
         top: 940px;
       }
@@ -346,12 +346,12 @@ a {
       z-index: 5;
     }
     &Shower {
-      @include absolute
+      @include absolute;
       height: 100%;
       z-index: 2;
     }
     &s {
-      @extend absolute
+      @extend absolute;
       left: 0px;
       top: 15%;
       text-align: center;
@@ -513,7 +513,7 @@ q {
 }
 
 #particles {
-  @extend lefttop
+  @extend lefttop;
   position: absolute;
 }
 
@@ -530,7 +530,7 @@ q {
 }
 
 #milk {
-  @extend absolute
+  @extend absolute;
   height: 0%;
   left: 0px;
   bottom: 0px;
@@ -539,8 +539,8 @@ q {
 }
 
 .milkLayer {
-  @extend absolute
-  @extend lefttop
+  @extend absolute;
+  @extend lefttop;
   height: 100%;
   background-repeat: repeat-x;
 }
@@ -631,7 +631,7 @@ q {
 }
 
 #menu {
-  @extend bottonright
+  @extend bottonright;
   display: none;
   z-index: 1000000;
   position: absolute;
@@ -774,7 +774,7 @@ a.control {
 }
 
 .map {
-  @extend lefttop
+  @extend lefttop;
   position: absolute;
   overflow: hidden;
   background: #000;
@@ -802,7 +802,7 @@ a.control {
 
 .row .info, #sectionLeft .info {
   /*visibility:hidden;*/
-  @extend lefttop
+  @extend lefttop;
   -webkit-transition: opacity 0.1s ease-out;
   -moz-transition: opacity 0.1s ease-out;
   -ms-transition: opacity 0.1s ease-out;
@@ -839,7 +839,7 @@ a.control {
 }
 
 #sectionLeftInfo {
-  @extend lefttop
+  @extend lefttop;
   position: absolute;
   width: 100%;
   &:hover .info {
@@ -937,7 +937,7 @@ a.control {
     opacity: 1;
   }
   .icon {
-    @extend lefttop
+    @extend lefttop;
     width: 64px;
     height: 64px;
     position: absolute;

From a74805b247c4e6a796aaea08d81dfb57ba36f694 Mon Sep 17 00:00:00 2001
From: Henry <henrycastordossantos@gmail.com>
Date: Sun, 29 Oct 2017 16:42:00 -0200
Subject: [PATCH 25/34] @mixins to %placeholders 3

---
 style.scss | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/style.scss b/style.scss
index e1067d5..1eebc9f 100644
--- a/style.scss
+++ b/style.scss
@@ -686,7 +686,7 @@ q {
     padding-bottom: 16px;
   }
   .background {
-    @include lefttop
+    @include lefttop;
     background: #999;
     position: absolute;
     height: 100%;
@@ -718,7 +718,7 @@ q {
     display: none;
   }
   .specialButton {
-    @include lefttop
+    @include lefttop;
     visibility: hidden;
     display: none;
     position: absolute;
@@ -779,7 +779,7 @@ a.control {
   overflow: hidden;
   background: #000;
   .tile, .thing {
-    @include lefttop
+    @include lefttop;
     width: 16px;
     height: 16px;
     position: absolute;

From a32faba84b73770320078c14293e1d94af1b4c1d Mon Sep 17 00:00:00 2001
From: Henry <henrycastordossantos@gmail.com>
Date: Sun, 29 Oct 2017 16:52:41 -0200
Subject: [PATCH 26/34] %placeholder updated

---
 style.scss | 36 ++++++++++++++++++------------------
 1 file changed, 18 insertions(+), 18 deletions(-)

diff --git a/style.scss b/style.scss
index 1eebc9f..10a0209 100644
--- a/style.scss
+++ b/style.scss
@@ -224,10 +224,10 @@ a {
 }
 
 #backgroundLayers {
-  @extend four;
+  @extend %four;
   height: 100%;
   div {
-    @extend lefttop;
+    @extend %lefttop;
     width: 100%;
     height: 100%;
     position: absolute;
@@ -243,7 +243,7 @@ a {
 }
 
 #topBar {
-  @extend four;
+  @extend %four;
   height: 32px;
   background: url(img/darkNoise.png);
   box-shadow: 0px -4px 8px #666 inset;
@@ -257,8 +257,8 @@ a {
 }
 
 #javascriptError {
-  @extend bottonright;
-  @extend lefttop;
+  @extend %bottonright;
+  @extend %lefttop;
   position: absolute;
   background: url(img/darkNoise.png);
   text-align: center;
@@ -268,7 +268,7 @@ a {
 }
 
 #game {
-  @extend bottonright;
+  @extend %bottonright;
   position: absolute;
   left: 0px;
   top: 32px;
@@ -299,7 +299,7 @@ a {
       overflow-y: scroll;
     }
     &Left {
-      @extend lefttop;
+      @extend %lefttop;
       width: 30%;
       bottom: 0px;
       min-width: 100px;
@@ -311,7 +311,7 @@ a {
         height: 640px;
       }
       .blackFiller {
-        @extend bottonright;
+        @extend %bottonright;
         background: #000;
         top: 940px;
       }
@@ -351,7 +351,7 @@ a {
       z-index: 2;
     }
     &s {
-      @extend absolute;
+      @extend %absolute;
       left: 0px;
       top: 15%;
       text-align: center;
@@ -513,7 +513,7 @@ q {
 }
 
 #particles {
-  @extend lefttop;
+  @extend %lefttop;
   position: absolute;
 }
 
@@ -530,7 +530,7 @@ q {
 }
 
 #milk {
-  @extend absolute;
+  @extend %absolute;
   height: 0%;
   left: 0px;
   bottom: 0px;
@@ -539,8 +539,8 @@ q {
 }
 
 .milkLayer {
-  @extend absolute;
-  @extend lefttop;
+  @extend %absolute;
+  @extend %lefttop;
   height: 100%;
   background-repeat: repeat-x;
 }
@@ -631,7 +631,7 @@ q {
 }
 
 #menu {
-  @extend bottonright;
+  @extend %bottonright;
   display: none;
   z-index: 1000000;
   position: absolute;
@@ -774,7 +774,7 @@ a.control {
 }
 
 .map {
-  @extend lefttop;
+  @extend %lefttop;
   position: absolute;
   overflow: hidden;
   background: #000;
@@ -802,7 +802,7 @@ a.control {
 
 .row .info, #sectionLeft .info {
   /*visibility:hidden;*/
-  @extend lefttop;
+  @extend %lefttop;
   -webkit-transition: opacity 0.1s ease-out;
   -moz-transition: opacity 0.1s ease-out;
   -ms-transition: opacity 0.1s ease-out;
@@ -839,7 +839,7 @@ a.control {
 }
 
 #sectionLeftInfo {
-  @extend lefttop;
+  @extend %lefttop;
   position: absolute;
   width: 100%;
   &:hover .info {
@@ -937,7 +937,7 @@ a.control {
     opacity: 1;
   }
   .icon {
-    @extend lefttop;
+    @extend %lefttop;
     width: 64px;
     height: 64px;
     position: absolute;

From 1047a90e64284300b4bddd3fca0b2fa1ef2a9bbd Mon Sep 17 00:00:00 2001
From: Henry <henrycastordossantos@gmail.com>
Date: Sun, 29 Oct 2017 17:49:44 -0200
Subject: [PATCH 27/34] #cookie&Shower

---
 style.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/style.scss b/style.scss
index 10a0209..7670b6a 100644
--- a/style.scss
+++ b/style.scss
@@ -346,7 +346,7 @@ a {
       z-index: 5;
     }
     &Shower {
-      @include absolute;
+      @extend absolute;
       height: 100%;
       z-index: 2;
     }

From a18a11d272ac6f46b8a917181c59c2535bb0c382 Mon Sep 17 00:00:00 2001
From: Henry <henrycastordossantos@gmail.com>
Date: Sun, 29 Oct 2017 20:28:09 -0200
Subject: [PATCH 28/34] @mixin transform

---
 style.scss | 35 +++++++++++++++--------------------
 1 file changed, 15 insertions(+), 20 deletions(-)

diff --git a/style.scss b/style.scss
index 7670b6a..58e870b 100644
--- a/style.scss
+++ b/style.scss
@@ -9,6 +9,19 @@ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockq
   vertical-align: baseline;
 }
 
+@mixin transform($scale, $opacity) {
+  -webkit-transform: scale($scale, $scale);
+  opacity: $opacity;
+  -moz-transform: scale($scale, $scale);
+  opacity: $opacity;
+  -ms-transform: scale($scale, $scale);
+  opacity: $opacity;
+  -o-transform: scale($scale, $scale);
+  opacity: $opacity;
+  transform: scale($scale, $scale);
+  opacity: $opacity;
+}
+
 %four {
   left: 0px;
   top: 0px;
@@ -480,28 +493,10 @@ q {
       background-size: 256px 256px;
   }
   &:hover {
-    -webkit-transform: scale(1.05, 1.05);
-    opacity: 0.9;
-    -moz-transform: scale(1.05, 1.05);
-    opacity: 0.9;
-    -ms-transform: scale(1.05, 1.05);
-    opacity: 0.9;
-    -o-transform: scale(1.05, 1.05);
-    opacity: 0.9;
-    transform: scale(1.05, 1.05);
-    opacity: 0.9;
+    @include scale(1.05, 0.9)
   }
   &:active {
-    -webkit-transform: scale(0.98, 0.98);
-    opacity: 1;
-    -moz-transform: scale(0.98, 0.98);
-    opacity: 1;
-    -ms-transform: scale(0.98, 0.98);
-    opacity: 1;
-    -o-transform: scale(0.98, 0.98);
-    opacity: 1;
-    transform: scale(0.98, 0.98);
-    opacity: 1;
+    @include scale(0.98, 1)
   }
 }
 

From 9547c1946c673fe97b7ae8719b273a03330c2585 Mon Sep 17 00:00:00 2001
From: Henry <henrycastordossantos@gmail.com>
Date: Sun, 29 Oct 2017 20:37:56 -0200
Subject: [PATCH 29/34] placeholder corrections

---
 style.scss | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/style.scss b/style.scss
index 58e870b..9a9d597 100644
--- a/style.scss
+++ b/style.scss
@@ -681,7 +681,7 @@ q {
     padding-bottom: 16px;
   }
   .background {
-    @include lefttop;
+    @extend %lefttop;
     background: #999;
     position: absolute;
     height: 100%;
@@ -705,7 +705,7 @@ q {
     z-index: 10;
   }
   .special {
-    @include absolute
+    @extend %absolute
     z-index: 1000000;
     top: 0px;
     bottom: 16px;
@@ -713,7 +713,7 @@ q {
     display: none;
   }
   .specialButton {
-    @include lefttop;
+    @extend lefttop;
     visibility: hidden;
     display: none;
     position: absolute;

From dbe8fc5fbf0f630d7336aab8f456d734286b0d9d Mon Sep 17 00:00:00 2001
From: Henry <henrycastordossantos@gmail.com>
Date: Sun, 29 Oct 2017 20:56:55 -0200
Subject: [PATCH 30/34] Update 2

---
 style.scss | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/style.scss b/style.scss
index 9a9d597..66e6ee4 100644
--- a/style.scss
+++ b/style.scss
@@ -206,16 +206,15 @@ a {
     left: -4px;
     top: -2px;
   }
+  &:hover .hidden {
+    visibility: hidden;
+  }
 }
 
 .hidden {
   visibility: hidden;
 }
 
-.listing:hover .hidden {
-  visibility: visible;
-}
-
 .info a {
   border-color: #666;
   background: #eee;
@@ -713,7 +712,7 @@ q {
     display: none;
   }
   .specialButton {
-    @extend lefttop;
+    @extend %lefttop;
     visibility: hidden;
     display: none;
     position: absolute;

From 8dbafe993407d6b3629a2499585801541371f2cf Mon Sep 17 00:00:00 2001
From: Henry <henrycastordossantos@gmail.com>
Date: Sun, 29 Oct 2017 21:01:07 -0200
Subject: [PATCH 31/34] Create helpers.scss

---
 helpers.scss | 34 ++++++++++++++++++++++++++++++++++
 1 file changed, 34 insertions(+)
 create mode 100644 helpers.scss

diff --git a/helpers.scss b/helpers.scss
new file mode 100644
index 0000000..33f6e15
--- /dev/null
+++ b/helpers.scss
@@ -0,0 +1,34 @@
+@mixin transform($scale, $opacity) {
+  -webkit-transform: scale($scale, $scale);
+  opacity: $opacity;
+  -moz-transform: scale($scale, $scale);
+  opacity: $opacity;
+  -ms-transform: scale($scale, $scale);
+  opacity: $opacity;
+  -o-transform: scale($scale, $scale);
+  opacity: $opacity;
+  transform: scale($scale, $scale);
+  opacity: $opacity;
+}
+
+%four {
+  left: 0px;
+  top: 0px;
+  width: 100%;
+  position: absolute;
+}
+
+%absolute {
+  width: 100%;
+  position: absolute;
+}
+
+%bottonright {
+  right: 0px;
+  bottom: 0px;
+}
+
+%lefttop {
+  left: 0px;
+  top: 0px;
+}

From 80d31d42601eb36938bcee899d1d30a276ccf3ef Mon Sep 17 00:00:00 2001
From: Henry <henrycastordossantos@gmail.com>
Date: Sun, 29 Oct 2017 21:05:18 -0200
Subject: [PATCH 32/34] @import "helpers"

---
 style.scss | 37 ++-----------------------------------
 1 file changed, 2 insertions(+), 35 deletions(-)

diff --git a/style.scss b/style.scss
index 66e6ee4..2029a61 100644
--- a/style.scss
+++ b/style.scss
@@ -1,3 +1,5 @@
+@import "helpers";
+
 /* reset CSS */
 
 html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
@@ -9,41 +11,6 @@ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockq
   vertical-align: baseline;
 }
 
-@mixin transform($scale, $opacity) {
-  -webkit-transform: scale($scale, $scale);
-  opacity: $opacity;
-  -moz-transform: scale($scale, $scale);
-  opacity: $opacity;
-  -ms-transform: scale($scale, $scale);
-  opacity: $opacity;
-  -o-transform: scale($scale, $scale);
-  opacity: $opacity;
-  transform: scale($scale, $scale);
-  opacity: $opacity;
-}
-
-%four {
-  left: 0px;
-  top: 0px;
-  width: 100%;
-  position: absolute;
-}
-
-%absolute {
-  width: 100%;
-  position: absolute;
-}
-
-%bottonright {
-  right: 0px;
-  bottom: 0px;
-}
-
-%lefttop {
-  left: 0px;
-  top: 0px;
-}
-
 /* HTML5 display-role reset for older browsers */
 
 article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {

From 624c9f50a1fd03e1647c001a37850181b5587354 Mon Sep 17 00:00:00 2001
From: Henry <henrycastordossantos@gmail.com>
Date: Sun, 29 Oct 2017 21:51:14 -0200
Subject: [PATCH 33/34] #section &LeftInfo

---
 style.scss | 195 ++++++++++++++++++++++++++---------------------------
 1 file changed, 95 insertions(+), 100 deletions(-)

diff --git a/style.scss b/style.scss
index 2029a61..e487b36 100644
--- a/style.scss
+++ b/style.scss
@@ -255,90 +255,104 @@ a {
 }
 
 #section {
-    &Middle, &Right, &Left, &Left.blackFiller {
-        position: absolute;
-    }
-    &Middle {
-      left: 30%;
-      padding-left: 16px;
-      margin-right: 15px;
-      top: 0px;
-      right: 318px;
-      bottom: 0px;
-      min-width: 100px;
-      overflow-x: hidden;
-      overflow-y: scroll;
-    }
-    &Right {
-      height: 100%;
+  &Middle, &Right, &Left, &Left.blackFiller, &LeftInfo {
       position: absolute;
-      top: 0px;
+  }
+  &Middle {
+    left: 30%;
+    padding-left: 16px;
+    margin-right: 15px;
+    top: 0px;
+    right: 318px;
+    bottom: 0px;
+    min-width: 100px;
+    overflow-x: hidden;
+    overflow-y: scroll;
+  }
+  &Right {
+    height: 100%;
+    position: absolute;
+    top: 0px;
+    right: 0px;
+    overflow-x: hidden;
+    overflow-y: scroll;
+  }
+  &Left {
+    @extend %lefttop;
+    width: 30%;
+    bottom: 0px;
+    min-width: 100px;
+    overflow: hidden;
+    .blackGradient {
+      background: url(img/blackGradient.png) repeat-x bottom;   
       right: 0px;
-      overflow-x: hidden;
-      overflow-y: scroll;
+      top: 300px;
+      height: 640px;
     }
-    &Left {
-      @extend %lefttop;
-      width: 30%;
-      bottom: 0px;
-      min-width: 100px;
-      overflow: hidden;
-      .blackGradient {
-        background: url(img/blackGradient.png) repeat-x bottom;   
-        right: 0px;
-        top: 300px;
-        height: 640px;
-      }
-      .blackFiller {
-        @extend %bottonright;
-        background: #000;
-        top: 940px;
-      }
+    .blackFiller {
+      @extend %bottonright;
+      background: #000;
+      top: 940px;
     }
-  &Left, &Left.blackGradient, &Left.blackFiller {
-        left: 0px;
+  }
+  &LeftInfo {
+    width: 100%;
+    .info {
+      border-radius: 16px;
+      padding: 24px 8px 8px 24px;
+      left: -16px;
+      top: -16px;
+      height: auto;
     }
+    &:hover .info {
+      visibility: visible;
+      opacity: 1;
+    }
+  }
+  &Left, &Left.blackGradient, &Left.blackFiller {
+      left: 0px;
+  }
 }
 
 #cookie {
-    &Anchor, &Shine, &Numbers, &Cursors, &Shower, &s {
-        position: absolute;
-    }
-    &Anchor {
-      left: 50%;
-      top: 40%;
-    }
-    &Shine {
-      width: 512px;
-      height: 512px;
-      left: -256px;
-      top: -256px;
-      background: url(img/shine.png);
-      background-size: 100%;
-      z-index: 5;
-      opacity: 0.5;
-    }
-    &Numbers {
-      top: -80px;
-    }
-    &Cursors {
-      z-index: 5;
-    }
-    &Shower {
-      @extend absolute;
-      height: 100%;
-      z-index: 2;
-    }
-    &s {
-      @extend %absolute;
-      left: 0px;
-      top: 15%;
-      text-align: center;
-      z-index: 200;
-      background: #000;
-      background: rgba(0, 0, 0, 0.4);
-      padding: 2px 0px;
-    }
+  &Anchor, &Shine, &Numbers, &Cursors, &Shower, &s {
+      position: absolute;
+  }
+  &Anchor {
+    left: 50%;
+    top: 40%;
+  }
+  &Shine {
+    width: 512px;
+    height: 512px;
+    left: -256px;
+    top: -256px;
+    background: url(img/shine.png);
+    background-size: 100%;
+    z-index: 5;
+    opacity: 0.5;
+  }
+  &Numbers {
+    top: -80px;
+  }
+  &Cursors {
+    z-index: 5;
+  }
+  &Shower {
+    @extend absolute;
+    height: 100%;
+    z-index: 2;
+  }
+  &s {
+    @extend %absolute;
+    left: 0px;
+    top: 15%;
+    text-align: center;
+    z-index: 200;
+    background: #000;
+    background: rgba(0, 0, 0, 0.4);
+    padding: 2px 0px;
+  }
 }
 
 .cookie {
@@ -364,12 +378,6 @@ a {
     }
 }
 
-#tooltipAnchor {
-  position: absolute;
-  z-index: 1000000000;
-  display: none;
-}
-
 #tooltip {
   position: absolute;
   background: #000 url(img/darkNoise.png);
@@ -399,6 +407,11 @@ a {
     color: #fff;
     margin: 2px 0px;
   }
+  &Anchor {
+    position: absolute;
+    z-index: 1000000000;
+    display: none;
+  }
 }
 
 .description {
@@ -791,24 +804,6 @@ a.control {
   }
 }
 
-#sectionLeft .info {
-  border-radius: 16px;
-  padding: 24px 8px 8px 24px;
-  left: -16px;
-  top: -16px;
-  height: auto;
-}
-
-#sectionLeftInfo {
-  @extend %lefttop;
-  position: absolute;
-  width: 100%;
-  &:hover .info {
-    visibility: visible;
-    opacity: 1;
-  }
-}
-
 #storeTitle {
   text-align: center;
   padding: 8px;

From d7aa0051a1a1aa41bf76eb6b639f2dcb62a0102e Mon Sep 17 00:00:00 2001
From: Henry <henrycastordossantos@gmail.com>
Date: Mon, 30 Oct 2017 11:24:36 -0200
Subject: [PATCH 34/34] @extend %lefttop correction

---
 style.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/style.scss b/style.scss
index e487b36..3f5db77 100644
--- a/style.scss
+++ b/style.scss
@@ -753,7 +753,7 @@ a.control {
   overflow: hidden;
   background: #000;
   .tile, .thing {
-    @include lefttop;
+    @extend %lefttop;
     width: 16px;
     height: 16px;
     position: absolute;