diff --git a/_assets/stylesheets/theme.css.less b/_assets/stylesheets/theme.css.less
deleted file mode 100644
index 15e95e6..0000000
--- a/_assets/stylesheets/theme.css.less
+++ /dev/null
@@ -1 +0,0 @@
-//= require less/pgn4web
diff --git a/_layouts/default.html b/_layouts/default.html
index 5e95d74..2827da3 100644
--- a/_layouts/default.html
+++ b/_layouts/default.html
@@ -13,9 +13,6 @@
     <!-- Bootstrap core CSS -->
     <link rel="stylesheet" href="/assets/css/bootstrap.min.css">
 
-    <!-- Custom styles for this template -->
-    {% stylesheet theme %}
-
     <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
     <!--[if lt IE 9]>
       <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
diff --git a/_layouts/game.html b/_layouts/game.html
index 82f8d0e..c9892fd 100644
--- a/_layouts/game.html
+++ b/_layouts/game.html
@@ -2,6 +2,8 @@
 layout: default
 ---
 
+<link rel="stylesheet" href="/assets/css/pgn4web.css">
+
 <div class="col-xs-12 col-sm-10 col-sm-offset-1">
   <h1>{{ page.title }}</h1>
   {{ content }}
diff --git a/_assets/stylesheets/less/pgn4web.less b/assets/css/pgn4web.scss
similarity index 66%
rename from _assets/stylesheets/less/pgn4web.less
rename to assets/css/pgn4web.scss
index e6bbffa..32656db 100644
--- a/_assets/stylesheets/less/pgn4web.less
+++ b/assets/css/pgn4web.scss
@@ -1,3 +1,7 @@
+---
+---
+
+
 /* Enable the scrolling of chess board up to the page top */
 
 body, html { height: 100%; }
@@ -7,22 +11,22 @@ body, html { height: 100%; }
 
 /* Chess board */
 
-@squareSize: 56px;
-@boardBorderWidth: 4px;
-@boardSize: 8 * @squareSize + 2 * @boardBorderWidth;
+$squareSize: 56px;
+$boardBorderWidth: 4px;
+$boardSize: 8 * $squareSize + 2 * $boardBorderWidth;
 
 .boardTable {
-  width: @boardSize;
-  height: @boardSize;
-  border: @boardBorderWidth solid #663300;
+  width: $boardSize;
+  height: $boardSize;
+  border: $boardBorderWidth solid #663300;
 }
 .whiteSquare, .blackSquare {
-  width: @squareSize;
-  height: @squareSize;
+  width: $squareSize;
+  height: $squareSize;
 }
 .pieceImage {
-  height: @squareSize;
-  width: @squareSize;
+  height: $squareSize;
+  width: $squareSize;
 }
 .whiteSquare, .highlightWhiteSquare {
   background: #ffcc99;
@@ -38,7 +42,7 @@ body, html { height: 100%; }
   position: absolute;
   top: 0;
   bottom: 0;
-  left: @boardSize + 10px;
+  left: $boardSize + 10px;
   right: 0;
 
   display: block;
@@ -47,7 +51,7 @@ body, html { height: 100%; }
 .moveOn, .variationOn {
   color: #fff;
   background-color: #428bca;
-  a&:hover {
+  &:hover {
     background-color: darken(#428bca, 10%);
   }
 }