Shadow, non, Shadow !

2 files changed, 31 insertions, 26 deletions

diff --git a/bracket.html b/bracket.html
index 2164567..cc08170 100644
--- a/bracket.html
+++ b/bracket.html
@@ -27,105 +27,100 @@
 
   <!-- group stage -->
 	<div id="listGroups">
-	<div id="groupA" class="group">
+	<div id="groupA" class="group shadow">
 	    <h2>GROUP A</h2>
 	    <p>Gaijin vs Olympic Croquet</p>
 	    <p>{Pedro, ?} vs Gaijin</p>
 	    <p>Olympics Croquet vs {Pedro, ?}</p>
 	</div>
 
-	<div id="groupB" class="group">
+	<div id="groupB" class="group shadow">
 	    <h2>GROUP B</h2>
 	    <p>Night Hawks vs Cake and Death</p>
 	</div>
 
-	<div id="groupC" class="group">
+	<div id="groupC" class="group shadow">
 	    <h2>GROUP C</h2>
 	    <p>Red and Ruskie vs {Sandy, ?}</p>
 	    <p>{Vijay, Zhen} vs Red and Ruskie</p>
 	    <p>{Sandy, ?} vs {Vijay, Zhen}</p>
 	</div>            
 
-	<div id="groupD" class="group">
+	<div id="groupD" class="group shadow">
 	    <h2>GROUP D</h2>
 	    <p>{Nadia, Salman} vs {Nina, Smriti}</p>
 	</div>
 	</div>
 
-	<br style='clear:both'/>
+	<br class="spacer"/>
 
-	<div id="rankingA" class="ranking">
+	<div id="rankingA" class="ranking shadow">
 	    <h2>Ranking group A</h2>
 	    <p>1 ...</p>
 	    <p>2 ...</p>
 	    <p>3 ...</p>
 	</div>
 
-	<div id="rankingB" class="ranking">
+	<div id="rankingB" class="ranking shadow">
 	    <h2>Ranking group B</h2>
 	    <p>1 ...</p>
 	    <p>2 ...</p>
 	</div>
 
-	<div id="rankingC" class="ranking">
+	<div id="rankingC" class="ranking shadow">
 	    <h2>Ranking group C</h2>
 	    <p>1 ...</p>
 	    <p>2 ...</p>
 	    <p>3 ...</p>
 	</div>
 
-	<div id="rankingD" class="ranking">
+	<div id="rankingD" class="ranking shadow">
 	    <h2>Ranking group D</h2>
 	    <p>1 ...</p>
 	    <p>2 ...</p>
 	</div>
 
-    <br style="clear:both"/>
+    <br class="spacer"/>
 
 	<!-- elimiatory games -->
-	<div id="Q1" class="quarter">
+	<div id="Q1" class="quarter shadow">
 	    <h2>Quarter-final 1</h2>
 	    <p>First team group A vs Second team group B</p>
 	</div>
 
-	<div id="Q2" class="quarter">
+	<div id="Q2" class="quarter shadow">
 	    <h2>Quarter-final 2</h2>
 	    <p>First team group B vs Second team group A</p>
 	</div>
 
-	<div id="Q3" class="quarter">
+	<div id="Q3" class="quarter shadow">
 	    <h2>Quarter-final 3</h2>
 	    <p>First team group C vs Second team group D</p>
 	</div>
 
-	<div id="Q4" class="quarter">
+	<div id="Q4" class="quarter shadow">
 	    <h2>Quarter-final 4</h2>
 	    <p>First team group D vs Second team group C</p>
 	</div>
 
-    <br style="clear:both"/>
+    <br class="spacer"/>
 
-	<div id="S1" class="semi">
+	<div id="S1" class="semi shadow">
 	    <h2>Semi-final 1</h2>
 	    <p>Winner Q1 vs Winner Q3</p>
 	</div>
 
-	<div id="S2" class="semi">
+	<div id="S2" class="semi shadow">
 	    <h2>Semi-final 2</h2>
 	    <p>Winner Q2 vs Winner Q4</p>
 	</div>
 	
-	<br style='clear:both'/>
+	<br class="spacer"/>
 
-	<div id="F">
+	<div id="F" class="shadow">
 	    <h2>FINAL</h2>
 	    <p>? vs ?</p>
 	</div>
-	
-
-
-
-
 
         </article>
 
diff --git a/style.css b/style.css
index f11199e..15aa005 100644
--- a/style.css
+++ b/style.css
@@ -125,17 +125,23 @@ tr:nth-child(even) {
 
 #bracket h2 {
     margin-top: 0;
-    text-align: center
+    text-align: center;
 }
 
 #calendar h2 {
-    text-align: center
+    text-align: center;
 }
 
 #calendar table {
     margin-bottom: 2ex;
 }
 
+.shadow {
+    -moz-box-shadow: .1em .1em .1em .1em #aaa;
+    -webkit-box-shadow: .1em .1em .1em .1em #aaa;
+    box-shadow: .1em .1em .1em .1em #aaa;
+}
+
 .group {
     float: left;
     padding: 1em;
@@ -294,3 +300,7 @@ td.team-name {
 #beaver:hover {
     opacity: 1.0;
 }
+
+.spacer {
+    clear: both;
+}