working on scoreboard

static/scss/_base.scss

@@ -538,26 +538,3 @@ LIST EVENTS STYLES
     	font-family: inherit; 
     }
 }
-
-/*********************
-SCOREBOARD STYLES
-*********************/
-
-.country {
-	border-bottom:1px solid #ccc;
-	border:1px solid #ccc;
-	.country-name {
-		font-weight: 800;
-		font-size: 1.2em;		
-	}
-	.event-number {
-		font-weight: 800;
-		font-size: 1.5em;
-	}
-	background-color: #F5F5F5;
-}
-
-.highlighted {
-	background-color: #F0F8FF;
-}
-

static/scss/_scoreboard.scss

@@ -0,0 +1,83 @@
+/*********************
+SCOREBOARD STYLES
+*********************/
+
+.sb-wrapper {
+	display: block;
+	position: relative;
+	z-index: 999;
+	padding-left: 0;
+	overflow: visible;
+
+	.one-row{
+		display: table-row;
+    	counter-reset:li; 
+    	margin-left:0; 
+    	padding-left:0;
+
+		.sb-box{
+			display: table-cell;
+			border: solid white 4px;
+			background: $silver;
+			position: relative;	
+    		list-style:none; 
+    		height: 160px;
+
+    		&:before {
+   				content:counter(li);
+    			counter-increment:li; 
+    			position:absolute;
+    			top:0;
+    			left:0;
+    			-moz-box-sizing:border-box;
+    			-webkit-box-sizing:border-box;
+    			box-sizing:border-box;
+    			width:40px;
+    			padding:10px;
+    			border-top: 2px solid $slate;
+    			color:$white;
+    			font-weight: bold;
+    			background:$slate;
+    			text-align: center;
+			}
+
+			&:nth-child(-n +10)::before {
+				border-top: 2px solid $secondary-color;
+				background:$secondary-color;
+			}
+
+			img {
+				position: absolute;
+				right: -2px;
+				top: -12px;
+				width: 65px;
+			}
+
+			.box-inner{
+				top: 25%;
+				padding: 0 15px;
+				position: relative;	
+			}
+
+			.country-name {
+				display: block;
+				position: relative;
+				font-size: 20px;
+				padding-top: 10px;
+			}
+
+			a {
+				display: inline-block;
+
+				.event-number {
+					position: relative;
+					font-size: 18px;
+					left: 0;
+					display: block;
+					text-decoration: none;
+					padding-bottom: 10px;
+				}	
+			}
+		}
+	}
+}	

static/scss/style.scss

@@ -38,6 +38,7 @@ of the styles inside media queries.
 // styles in base.scss
 @import "base";
 @import "misc";
+@import "scoreboard";
 
 //style for pagination button
 @import "pagination";

static/scss/variables.scss

@@ -11,6 +11,7 @@ $white:                     #ffffff;
 $whitesmoke:                #f5f5f5;
 $brand-primary:             #428BCA;
 $golden:                    #FCD04B;
+$bronze:					#cd7f32;
 
 $dark-blue:					#478ac8;//#198182;
 $light-blue:				#386ea0;//lighten(#386ea0, 20%);//#26BCBB;

web/templates/pages/scoreboard.html

@@ -3,17 +3,22 @@
 {% block title %}- Events Scoreboard{% endblock title %}
 
 {% block content %}
-	<div class="container">
+<div class="container">
 		<h1>#codeEU Events Scoreboard</h1>
 		<p>Which countries in Europe are buzzing with coding activity? The scoreboard is sorted by the number of listed coding events per population, so don't be surprised to see some of the smaller countries higher up on the list!</p>
-		{% for country in counts %}
-			<div class="col-md-6 country{% if forloop.counter < 11 %} highlighted{% endif %}"> 
-				<img src="/static/flags/{{ country.country_code|lower }}.png" alt="{{ country.country_name }}" />
-				<span class="icon-flag">
-					<span class="country-name">{{ country.country_name }}</span> is participating with 
-					 <span class="event-number"><a href="{% url 'web.search_events' %}?country_code={{ country.country_code }}&amp;past=yes">{{ country.events }}</span> event{% if country.events != 1 %}s{% endif %}</a>
-				</span>
-			</div>
-		{% endfor %}
+	<div class="sb-wrapper">
+			<ol class="one-row">
+			{% for country in counts %}
+				<li class="col-md-3 col-sm-4 col-xs-6 sb-box"> 
+					<img src="/static/flags/{{ country.country_code|lower }}.png" alt="{{ country.country_name }}" />
+					<div class="box-inner">
+							<span class="country-name">{{ country.country_name }}</span><p> is participating with </p>
+							<a href="{% url 'web.search_events' %}?country_code={{ country.country_code }}&amp;past=yes">
+						 	<span class="event-number">{{ country.events }} event{% if country.events != 1 %}s{% endif %}</span></a>
+					</div>
+				</li>
+			{% endfor %}
+			</ol>
 	</div>
+</div>
 {% endblock content %}