Change CSS template so that Tic Tac Toe looks nice.

template.tictactoe.css

@@ -4,28 +4,107 @@ body {
 }
 
 .tic-tac-toe {
-  height: 450px;  
-  width: 450px;  
+  font-family: 'Open Sans', sans-serif;
+  height: 440px;  
+  width: 440px;  
   margin: 50px auto 30px auto;
   position: relative;
-  background-color: #E6E6FA;
+}
+
+.tic-tac-toe .grid {
+  background-color: grey;
+  position: absolute;
+  display: block;
+  border-radius: 3px;
+}
+
+.tic-tac-toe .horizontal-bar-1 {
+  top: 140px;
+  bottom: 290px;
+  height: 10px;
+  width: 440px
+}
+
+.tic-tac-toe .horizontal-bar-2 {
+  top: 290px;
+  bottom: 140px;
+  height: 10px;
+  width: 440px
+}
+
+.tic-tac-toe .vertical-bar-1 {
+  left: 140px;
+  right: 290px;
+  height: 440px;
+  width: 10px;
+}
+
+.tic-tac-toe .vertical-bar-2 {
+  left: 290px;
+  right: 140px;
+  height: 440px;
+  width: 10px;
 }
 
 .tic-tac-toe label {
-  background-color: #78bec5;
   height: 140px;
   width: 140px; 
   display: none;
-  margin: 5px;
+  opacity: 0.0;
   position: absolute;
   cursor: pointer;
-  color: #fff;
   -moz-transition: background-color 0.3s;
   -o-transition: background-color 0.3s;
   -webkit-transition: background-color 0.3s;
   transition: background-color 0.3s;
 }
 
+.tic-tac-toe label:hover {
+  opacity: 0.2;
+}
+
+.circle {
+  position: absolute;
+  height: 100px;
+  width: 100px; 
+  margin: 10px;
+  border: 10px solid #dc685a;
+  border-radius: 50%;
+}
+
+.cross {
+  position: absolute;
+  width: 140px;
+  height: 140px;
+  display: block;
+  transform:rotate(45deg);
+  -ms-transform:rotate(45deg);
+  -webkit-transform:rotate(45deg);
+}
+
+.cross:before, .cross:after {
+  content: "";
+  position: absolute;
+  background: #78bec5;
+  border-radius: 3px;
+}
+
+.cross:before {
+  top: 65px;
+  bottom: 65px;
+  left: 0px;
+  right: 0px;
+  height: 10px;
+  width: 140px;
+}
+
+.cross:after {
+  left: 65px;
+  right: 65px;
+  height: 140px;
+  width: 10px;
+}
+
 .tic-tac-toe input.col-0 + label {
   left: 0px;
   right: 300px;
@@ -68,7 +147,7 @@ body {
 {% for turn in turns_player %}
 .tic-tac-toe input.turn-{{turn}}:checked + label {
   cursor: default;
-  background-color: red;
+  opacity: 1.0;
   z-index: 10 !important;
 }
 
@@ -77,14 +156,73 @@ body {
   display: block;
 }
 {% endfor %}
+
 {% for m in moves %}
 .tic-tac-toe
 {% for p in m.ps %}input.turn-{{p.t}}.field-{{p.i}}:checked ~ {% endfor %}
 input.turn-{{m.n.t}}.field-{{m.n.i}} + label {
   display: block;
   cursor: default;
-  background-color: green;
+  opacity: 1.0;
   z-index: 10 !important;
 }
 {% endfor %}
 
+
+.tic-tac-toe .end {
+  width: 440px;  
+  height: 440px;
+  padding-top: 125px;
+  position: absolute;
+  display: none;
+  background-color: #ecaf4f;
+  color: #3d4250;
+  text-align: center;
+  z-index: 11;
+  background: rgba(255, 255, 255, 0.8);
+  border-radius: 3px;
+}
+
+.tic-tac-toe .end h1 {
+  margin: 40px;
+}
+
+.tic-tac-toe .end a {
+  background-color: #3d4250;
+  border-radius: 3px;
+  text-decoration: none;
+  color: #fff; 
+  padding: 10px;
+}
+
+{% for m in wins2 %}
+.tic-tac-toe
+{% for p in m.ps %}input.turn-{{p.t}}.field-{{p.i}}:checked ~ {% endfor %}
+.end {
+  display: block;
+  z-index: 10 !important;
+}
+
+.tic-tac-toe
+{% for p in m.ps %}input.turn-{{p.t}}.field-{{p.i}}:checked ~ {% endfor %}
+.end > h1:before {
+  content: "Bot wins!" !important;
+}
+
+{% endfor %}
+
+{% for m in draws %}
+.tic-tac-toe
+{% for p in m.ps %}input.turn-{{p.t}}.field-{{p.i}}:checked ~ {% endfor %}
+.end {
+  display: block;
+  z-index: 10 !important;
+}
+
+.tic-tac-toe
+{% for p in m.ps %}input.turn-{{p.t}}.field-{{p.i}}:checked ~ {% endfor %}
+.end > h1:before {
+  content: "Tied!" !important;
+}
+
+{% endfor %}