From f334dcacaa9a89b892dc2c460bec22b788a4eb85 Mon Sep 17 00:00:00 2001
From: Anjith <v-anpal@microsoft.com>
Date: Tue, 6 Aug 2013 17:29:01 +0530
Subject: [PATCH 1/2] UI changes for About page and Help pages

1) Font colors in side menu.
2) Anchored at its location when one scrolls down the page.
3) Font & styles for the text in the main area of the page.
---
 .../web/static/foundation/css/codalab.css     | 173 ++++++++++++------
 .../web/static/foundation/sass/_settings.scss |  67 ++++++-
 .../apps/web/templates/web/help/about.html    |   2 +-
 .../web/help/create_competition.html          |   2 +-
 4 files changed, 189 insertions(+), 55 deletions(-)

diff --git a/codalab/apps/web/static/foundation/css/codalab.css b/codalab/apps/web/static/foundation/css/codalab.css
index b2969d607..beaf31ef2 100644
--- a/codalab/apps/web/static/foundation/css/codalab.css
+++ b/codalab/apps/web/static/foundation/css/codalab.css
@@ -63,80 +63,80 @@ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav,
   display: block;
 }
 
-/* line 45, ../sass/_settings.scss */
+/* line 52, ../sass/_settings.scss */
 * {
   font-family: Segoe UI,'Segoe UI', Helvetica, Arial,'Trebuchet MS',sans-serif;
   font-size: 100%;
   font-weight: normal;
 }
 
-/* line 51, ../sass/_settings.scss */
+/* line 58, ../sass/_settings.scss */
 .menu-icon {
   background: #3684d6;
 }
 
-/* line 55, ../sass/_settings.scss */
+/* line 62, ../sass/_settings.scss */
 .menu-icon > span, .menu-icon > span a, .menu-icon > span a:hover {
   border-bottom-style: none;
   border: 0px;
   padding: 2px;
 }
 
-/* line 62, ../sass/_settings.scss */
+/* line 69, ../sass/_settings.scss */
 div.CompetitionsDetailContainer div.section-container section:not(.active) p a:hover {
   color: #ffac31;
 }
 
-/* line 66, ../sass/_settings.scss */
+/* line 73, ../sass/_settings.scss */
 div.CompetitionsDetailContainer div.section-container section.active div.content div.section-container section p.title {
   background: transparent;
 }
 
-/* line 69, ../sass/_settings.scss */
+/* line 76, ../sass/_settings.scss */
 div.CompetitionsDetailContainer div.section-container section.active div.content div.section-container section.active div.content {
   border: 0px;
 }
 
-/* line 73, ../sass/_settings.scss */
+/* line 80, ../sass/_settings.scss */
 div.CompetitionsDetailContainer div.section-container section.active div.content div.section-container section p.title a {
   padding: 2px;
   text-align: right;
   border: 0px;
 }
 
-/* line 79, ../sass/_settings.scss */
+/* line 86, ../sass/_settings.scss */
 div.CompetitionsDetailContainer div.section-container section.active div.content div.section-container section p {
   border: 0px;
 }
 
-/* line 83, ../sass/_settings.scss */
+/* line 90, ../sass/_settings.scss */
 td > a > i {
   color: #3684d6;
 }
 
-/* line 87, ../sass/_settings.scss */
+/* line 94, ../sass/_settings.scss */
 a > i {
   height: 100%;
   color: white;
 }
 
-/* line 92, ../sass/_settings.scss */
+/* line 99, ../sass/_settings.scss */
 .competitionsDetailTabArea > section > .title {
   font-size: 19px;
   font-weight: 400;
 }
 
-/* line 97, ../sass/_settings.scss */
+/* line 104, ../sass/_settings.scss */
 .competitionsDetailTabArea > section > .title a:hover {
   color: #ffac31;
 }
 
-/* line 101, ../sass/_settings.scss */
+/* line 108, ../sass/_settings.scss */
 .process_participant_request {
   padding-top: 10px;
 }
 
-/* line 106, ../sass/_settings.scss */
+/* line 113, ../sass/_settings.scss */
 .competitionUserBlock {
   border: solid 1px #ccc;
   margin-bottom: 10px;
@@ -144,44 +144,44 @@ a > i {
   padding: 0;
 }
 
-/* line 113, ../sass/_settings.scss */
+/* line 120, ../sass/_settings.scss */
 .competitionUserBlock p {
   font-size: 13px;
 }
 
-/* line 117, ../sass/_settings.scss */
+/* line 124, ../sass/_settings.scss */
 .user_results, .competition_results {
   padding-top: 10px;
 }
 
-/* line 120, ../sass/_settings.scss */
+/* line 127, ../sass/_settings.scss */
 .globalBlueButton a, .globalBlueButton a:hover {
   color: white;
 }
 
-/* line 124, ../sass/_settings.scss */
+/* line 131, ../sass/_settings.scss */
 .content > h3 {
   font-size: 14px;
   font-weight: 700;
 }
 
-/* line 129, ../sass/_settings.scss */
+/* line 136, ../sass/_settings.scss */
 .content > p {
   font-size: 13px;
 }
 
-/* line 133, ../sass/_settings.scss */
+/* line 140, ../sass/_settings.scss */
 .section-container.vertical-tabs > section > .content {
   border: 0px;
   color: #3b3b3b;
 }
 
-/* line 138, ../sass/_settings.scss */
+/* line 145, ../sass/_settings.scss */
 .competitionProcessHeader > ul > li {
   height: 100%;
 }
 
-/* line 141, ../sass/_settings.scss */
+/* line 148, ../sass/_settings.scss */
 .competitionProcessHeader > ul > li > a {
   color: white;
   font-size: 13px;
@@ -189,21 +189,21 @@ a > i {
   padding-right: 40px;
 }
 
-/* line 148, ../sass/_settings.scss */
+/* line 155, ../sass/_settings.scss */
 .competition-preview {
   border: 1px solid #cccccc;
   margin-top: 5px;
   margin-bottom: 5px;
 }
 
-/* line 154, ../sass/_settings.scss */
+/* line 161, ../sass/_settings.scss */
 .competition-summary {
   background: #fafafa;
   height: 100px;
   overflow: hidden;
 }
 
-/* line 160, ../sass/_settings.scss */
+/* line 167, ../sass/_settings.scss */
 .competition-preview > .columns > .button.small {
   vertical-align: middle;
   margin-bottom: 5px;
@@ -213,13 +213,13 @@ a > i {
   border-color: #ffac31;
 }
 
-/* line 169, ../sass/_settings.scss */
+/* line 176, ../sass/_settings.scss */
 .competition-summary > .columns {
   margin: 0px;
   padding: 0px;
 }
 
-/* line 174, ../sass/_settings.scss */
+/* line 181, ../sass/_settings.scss */
 .competition-label {
   height: 100px;
   background: #3684d6;
@@ -228,7 +228,7 @@ a > i {
   padding-left: 0px;
 }
 
-/* line 182, ../sass/_settings.scss */
+/* line 189, ../sass/_settings.scss */
 .competition-image {
   padding: 0px;
   margin: 0px;
@@ -236,33 +236,33 @@ a > i {
   vertical-align: middle;
 }
 
-/* line 189, ../sass/_settings.scss */
+/* line 196, ../sass/_settings.scss */
 .competition-info .columns {
   padding: 0px;
   margin: 0px;
 }
 
-/* line 193, ../sass/_settings.scss */
+/* line 200, ../sass/_settings.scss */
 .competition-title {
   color: #333333;
   text-align: left;
   font-size: 15px;
 }
 
-/* line 199, ../sass/_settings.scss */
+/* line 206, ../sass/_settings.scss */
 .large-12 > .competition-label {
   margin: 0px;
   padding: 0px;
   width: 30px;
 }
 
-/* line 205, ../sass/_settings.scss */
+/* line 212, ../sass/_settings.scss */
 .competition-description, .competition-owner {
   font-size: small;
   color: #999999;
 }
 
-/* line 210, ../sass/_settings.scss */
+/* line 217, ../sass/_settings.scss */
 .slider {
   color: white;
   font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
@@ -278,26 +278,26 @@ a > i {
   vertical-align: middle;
 }
 
-/* line 225, ../sass/_settings.scss */
+/* line 232, ../sass/_settings.scss */
 .subheader {
   height: auto;
   padding-bottom: 10px;
 }
 
-/* line 230, ../sass/_settings.scss */
+/* line 237, ../sass/_settings.scss */
 #footer, #footer a, #footer a:hover {
   font-size: small;
   background: #3684d6;
   color: white;
 }
 
-/* line 236, ../sass/_settings.scss */
+/* line 243, ../sass/_settings.scss */
 .topbar-title {
   font-size: x-large;
   font-weight: light;
 }
 
-/* line 241, ../sass/_settings.scss */
+/* line 248, ../sass/_settings.scss */
 .header {
   position: fixed;
   left: 0;
@@ -306,13 +306,13 @@ a > i {
   z-index: 1000;
 }
 
-/* line 249, ../sass/_settings.scss */
+/* line 256, ../sass/_settings.scss */
 .container {
   padding-top: 45px;
   padding-bottom: 20px;
 }
 
-/* line 254, ../sass/_settings.scss */
+/* line 261, ../sass/_settings.scss */
 p.competition-paragraph {
   font-size: 11px;
   color: #666666;
@@ -320,49 +320,49 @@ p.competition-paragraph {
   margin-bottom: 0;
 }
 
-/* line 261, ../sass/_settings.scss */
+/* line 268, ../sass/_settings.scss */
 .competition-info {
   height: 90px;
   overflow: hidden;
   padding-top: 5px;
 }
 
-/* line 267, ../sass/_settings.scss */
+/* line 274, ../sass/_settings.scss */
 .competition-image > img {
   height: 90px;
   margin-top: 5px;
 }
 
-/* line 272, ../sass/_settings.scss */
+/* line 279, ../sass/_settings.scss */
 .competition-preview.panel {
   background: #fafafa;
 }
 
-/* line 276, ../sass/_settings.scss */
+/* line 283, ../sass/_settings.scss */
 .competition-tile {
   margin-bottom: 10px;
 }
 
-/* line 280, ../sass/_settings.scss */
+/* line 287, ../sass/_settings.scss */
 .competition-tile h3 {
   font-size: 16px;
   color: #333333;
 }
 
-/* line 285, ../sass/_settings.scss */
+/* line 292, ../sass/_settings.scss */
 .articleHeadingContainer h3 {
   margin: 0;
   line-height: 100%;
 }
 
-/* line 290, ../sass/_settings.scss */
+/* line 297, ../sass/_settings.scss */
 .articleHeadingContainer label {
   color: #a4a4a4;
   margin-bottom: 14px;
   font-size: 12px;
 }
 
-/* line 296, ../sass/_settings.scss */
+/* line 303, ../sass/_settings.scss */
 .signin-centered-container {
   margin: auto !important;
   float: none !important;
@@ -370,34 +370,103 @@ p.competition-paragraph {
   padding: 25px;
 }
 
-/* line 303, ../sass/_settings.scss */
+/* line 310, ../sass/_settings.scss */
 .small-6.pull-6.columns > .globalBlueButton {
   float: right;
 }
 
-/* line 306, ../sass/_settings.scss */
+/* line 313, ../sass/_settings.scss */
 .signin-formfields p:nth-child(3) > input {
   float: left;
   position: relative;
   top: -20px;
 }
 
-/* line 311, ../sass/_settings.scss */
+/* line 318, ../sass/_settings.scss */
 .signin-formfields p:nth-child(3) > label {
   padding-left: 20px;
 }
 
-/* line 315, ../sass/_settings.scss */
+/* line 322, ../sass/_settings.scss */
 .globalBlueButton, .globalBlueButtonBig, .globalBlueButtonInput, .globalBlueButtonAtag > a, .globalBlueButtonSmallAtag > a, .globalBlueButtonSmall, .globalBlueButtonSmallFlexi, .buttonAccept {
   box-shadow: none;
   white-space: nowrap;
 }
 
-/* line 319, ../sass/_settings.scss */
+/* line 327, ../sass/_settings.scss */
 .signin-centered-container > p > a {
   display: inline-block;
 }
 
+/* line 331, ../sass/_settings.scss */
+ul.side-nav {
+  padding-top: 0;
+  position: fixed;
+}
+/* line 334, ../sass/_settings.scss */
+ul.side-nav li {
+  margin-bottom: 2px;
+}
+/* line 337, ../sass/_settings.scss */
+ul.side-nav li a {
+  color: #3684d6;
+  font-size: 14px;
+}
+/* line 339, ../sass/_settings.scss */
+ul.side-nav li a:hover {
+  color: #ffac31;
+}
+/* line 340, ../sass/_settings.scss */
+ul.side-nav li a:active {
+  background: none;
+}
+/* line 342, ../sass/_settings.scss */
+ul.side-nav li.active a {
+  color: #666666 !important;
+}
+
+/* line 347, ../sass/_settings.scss */
+.glossary-page-container h6 {
+  font-size: 14px;
+  color: #666666;
+}
+/* line 352, ../sass/_settings.scss */
+.glossary-page-container p {
+  font-size: 12px;
+  color: #666666;
+}
+/* line 357, ../sass/_settings.scss */
+.glossary-page-container ol {
+  font-size: 13px;
+  color: #666666;
+}
+/* line 360, ../sass/_settings.scss */
+.glossary-page-container ol li {
+  padding-bottom: 10px;
+  list-style-type: disc;
+}
+/* line 366, ../sass/_settings.scss */
+.glossary-page-container ul {
+  font-size: 13px;
+  color: #666666;
+  margin-left: 20px;
+}
+/* line 371, ../sass/_settings.scss */
+.glossary-page-container ul li {
+  padding-bottom: 10px;
+  list-style-type: disc;
+}
+/* line 377, ../sass/_settings.scss */
+.glossary-page-container pre {
+  padding: 10px;
+  background: #ebf2fb;
+  margin-bottom: 15px;
+}
+/* line 383, ../sass/_settings.scss */
+.glossary-page-container a {
+  color: #3684d6;
+}
+
 /* font-face */
 @font-face {
   font-family: "GeneralFoundicons";
diff --git a/codalab/apps/web/static/foundation/sass/_settings.scss b/codalab/apps/web/static/foundation/sass/_settings.scss
index 5b044c2b2..793d8b00b 100644
--- a/codalab/apps/web/static/foundation/sass/_settings.scss
+++ b/codalab/apps/web/static/foundation/sass/_settings.scss
@@ -9,6 +9,8 @@ $light-medium-gray: #a4a4a4;
 $medium-light-gray: #999;
 $dark-gray: #333;
 $light-background-blue:#eff2f9;
+$link-color: #3684d6;
+
 
 $body-font-color: $gray;
 $header-font-color: $gray;
@@ -42,6 +44,11 @@ $section-title-bg-hover: none;
 
 $tooltip-bg: $background;
 
+@mixin linkStyle {
+	color:$link-color;
+	font-size:14px;
+}
+
 *{
     font-family: Segoe UI,'Segoe UI', Helvetica, Arial,'Trebuchet MS',sans-serif;
 	font-size:   100%;
@@ -316,6 +323,64 @@ p.competition-paragraph {
 	box-shadow:none;
 	white-space:nowrap;
 }
+
 .signin-centered-container > p > a {
 	display:inline-block;
-}
\ No newline at end of file
+}
+
+ul.side-nav {
+	 padding-top:0;
+	 position:fixed;
+	 li {
+		margin-bottom:2px;
+	 }
+	 li a {
+		@include linkStyle;
+		&:hover{color:$active}
+		&:active{background:none}
+	  }
+	li.active a {
+		color:$gray !important
+	}
+}
+.glossary-page-container {
+	h6 { 
+		font-size:14px; 
+		color:$gray
+		}
+
+	p { 
+		font-size:12px; 
+		color:$gray
+		}
+
+	ol { 
+		font-size:13px; color:$gray;
+
+		li {
+			padding-bottom:10px;
+			list-style-type:disc;
+		}
+	}
+
+	ul { 
+		font-size:13px; 
+		color:$gray;
+		margin-left:20px;
+
+		li{
+			padding-bottom:10px;
+			list-style-type:disc;
+		}
+	}
+
+	pre {
+		padding:10px;
+		background:$banner;
+		margin-bottom:15px;
+		}
+
+	a {
+		color:$link-color
+		}
+}
diff --git a/codalab/apps/web/templates/web/help/about.html b/codalab/apps/web/templates/web/help/about.html
index d09f0813b..dbdc024d6 100644
--- a/codalab/apps/web/templates/web/help/about.html
+++ b/codalab/apps/web/templates/web/help/about.html
@@ -5,7 +5,7 @@
 <div class="row">
     <!-- Main Content Section -->
     <!-- This has been source ordered to come first in the markup (and on small devices) but to be to the right of the nav on larger screens -->
-    <div class="large-9 push-3 columns">
+    <div class="large-9 push-3 columns glossary-page-container">
         <h6>About CodaLab</h6>
         <a id="codaLab"></a>
         <p>
diff --git a/codalab/apps/web/templates/web/help/create_competition.html b/codalab/apps/web/templates/web/help/create_competition.html
index c8da20c41..c0cec9467 100644
--- a/codalab/apps/web/templates/web/help/create_competition.html
+++ b/codalab/apps/web/templates/web/help/create_competition.html
@@ -4,7 +4,7 @@
 <div class="row">
     <!-- Main Content Section -->
     <!-- This has been source ordered to come first in the markup (and on small devices) but to be to the right of the nav on larger screens -->
-    <div class="large-9 push-3 columns">
+    <div class="large-9 push-3 columns glossary-page-container">
                 <h1>Create a Competition</h1>
                 <p>
                     CodaLab competitions provide an opportunity for researchers, developers and algorithmists to 

From ff72a23f75b6e328a3837a72685f571a19dcabcf Mon Sep 17 00:00:00 2001
From: Anjith <v-anpal@microsoft.com>
Date: Tue, 6 Aug 2013 19:31:44 +0530
Subject: [PATCH 2/2] spacing in the Competition details

fix for spacing in the Competition details
---
 .../web/static/foundation/css/codalab.css     | 211 +++++++++++-------
 .../web/static/foundation/sass/_settings.scss |  64 +++++-
 2 files changed, 196 insertions(+), 79 deletions(-)

diff --git a/codalab/apps/web/static/foundation/css/codalab.css b/codalab/apps/web/static/foundation/css/codalab.css
index beaf31ef2..2f31a12c7 100644
--- a/codalab/apps/web/static/foundation/css/codalab.css
+++ b/codalab/apps/web/static/foundation/css/codalab.css
@@ -63,80 +63,80 @@ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav,
   display: block;
 }
 
-/* line 52, ../sass/_settings.scss */
+/* line 61, ../sass/_settings.scss */
 * {
   font-family: Segoe UI,'Segoe UI', Helvetica, Arial,'Trebuchet MS',sans-serif;
   font-size: 100%;
   font-weight: normal;
 }
 
-/* line 58, ../sass/_settings.scss */
+/* line 67, ../sass/_settings.scss */
 .menu-icon {
   background: #3684d6;
 }
 
-/* line 62, ../sass/_settings.scss */
+/* line 71, ../sass/_settings.scss */
 .menu-icon > span, .menu-icon > span a, .menu-icon > span a:hover {
   border-bottom-style: none;
   border: 0px;
   padding: 2px;
 }
 
-/* line 69, ../sass/_settings.scss */
+/* line 78, ../sass/_settings.scss */
 div.CompetitionsDetailContainer div.section-container section:not(.active) p a:hover {
   color: #ffac31;
 }
 
-/* line 73, ../sass/_settings.scss */
+/* line 82, ../sass/_settings.scss */
 div.CompetitionsDetailContainer div.section-container section.active div.content div.section-container section p.title {
   background: transparent;
 }
 
-/* line 76, ../sass/_settings.scss */
+/* line 85, ../sass/_settings.scss */
 div.CompetitionsDetailContainer div.section-container section.active div.content div.section-container section.active div.content {
   border: 0px;
 }
 
-/* line 80, ../sass/_settings.scss */
+/* line 89, ../sass/_settings.scss */
 div.CompetitionsDetailContainer div.section-container section.active div.content div.section-container section p.title a {
   padding: 2px;
   text-align: right;
   border: 0px;
 }
 
-/* line 86, ../sass/_settings.scss */
+/* line 95, ../sass/_settings.scss */
 div.CompetitionsDetailContainer div.section-container section.active div.content div.section-container section p {
   border: 0px;
 }
 
-/* line 90, ../sass/_settings.scss */
+/* line 99, ../sass/_settings.scss */
 td > a > i {
   color: #3684d6;
 }
 
-/* line 94, ../sass/_settings.scss */
+/* line 103, ../sass/_settings.scss */
 a > i {
   height: 100%;
   color: white;
 }
 
-/* line 99, ../sass/_settings.scss */
+/* line 108, ../sass/_settings.scss */
 .competitionsDetailTabArea > section > .title {
   font-size: 19px;
   font-weight: 400;
 }
 
-/* line 104, ../sass/_settings.scss */
+/* line 113, ../sass/_settings.scss */
 .competitionsDetailTabArea > section > .title a:hover {
   color: #ffac31;
 }
 
-/* line 108, ../sass/_settings.scss */
+/* line 117, ../sass/_settings.scss */
 .process_participant_request {
   padding-top: 10px;
 }
 
-/* line 113, ../sass/_settings.scss */
+/* line 122, ../sass/_settings.scss */
 .competitionUserBlock {
   border: solid 1px #ccc;
   margin-bottom: 10px;
@@ -144,44 +144,44 @@ a > i {
   padding: 0;
 }
 
-/* line 120, ../sass/_settings.scss */
+/* line 129, ../sass/_settings.scss */
 .competitionUserBlock p {
   font-size: 13px;
 }
 
-/* line 124, ../sass/_settings.scss */
+/* line 133, ../sass/_settings.scss */
 .user_results, .competition_results {
   padding-top: 10px;
 }
 
-/* line 127, ../sass/_settings.scss */
+/* line 136, ../sass/_settings.scss */
 .globalBlueButton a, .globalBlueButton a:hover {
   color: white;
 }
 
-/* line 131, ../sass/_settings.scss */
+/* line 140, ../sass/_settings.scss */
 .content > h3 {
   font-size: 14px;
   font-weight: 700;
 }
 
-/* line 136, ../sass/_settings.scss */
+/* line 145, ../sass/_settings.scss */
 .content > p {
   font-size: 13px;
 }
 
-/* line 140, ../sass/_settings.scss */
+/* line 149, ../sass/_settings.scss */
 .section-container.vertical-tabs > section > .content {
   border: 0px;
   color: #3b3b3b;
 }
 
-/* line 145, ../sass/_settings.scss */
+/* line 154, ../sass/_settings.scss */
 .competitionProcessHeader > ul > li {
   height: 100%;
 }
 
-/* line 148, ../sass/_settings.scss */
+/* line 157, ../sass/_settings.scss */
 .competitionProcessHeader > ul > li > a {
   color: white;
   font-size: 13px;
@@ -189,21 +189,21 @@ a > i {
   padding-right: 40px;
 }
 
-/* line 155, ../sass/_settings.scss */
+/* line 164, ../sass/_settings.scss */
 .competition-preview {
   border: 1px solid #cccccc;
   margin-top: 5px;
   margin-bottom: 5px;
 }
 
-/* line 161, ../sass/_settings.scss */
+/* line 170, ../sass/_settings.scss */
 .competition-summary {
   background: #fafafa;
   height: 100px;
   overflow: hidden;
 }
 
-/* line 167, ../sass/_settings.scss */
+/* line 176, ../sass/_settings.scss */
 .competition-preview > .columns > .button.small {
   vertical-align: middle;
   margin-bottom: 5px;
@@ -213,13 +213,13 @@ a > i {
   border-color: #ffac31;
 }
 
-/* line 176, ../sass/_settings.scss */
+/* line 185, ../sass/_settings.scss */
 .competition-summary > .columns {
   margin: 0px;
   padding: 0px;
 }
 
-/* line 181, ../sass/_settings.scss */
+/* line 190, ../sass/_settings.scss */
 .competition-label {
   height: 100px;
   background: #3684d6;
@@ -228,7 +228,7 @@ a > i {
   padding-left: 0px;
 }
 
-/* line 189, ../sass/_settings.scss */
+/* line 198, ../sass/_settings.scss */
 .competition-image {
   padding: 0px;
   margin: 0px;
@@ -236,33 +236,33 @@ a > i {
   vertical-align: middle;
 }
 
-/* line 196, ../sass/_settings.scss */
+/* line 205, ../sass/_settings.scss */
 .competition-info .columns {
   padding: 0px;
   margin: 0px;
 }
 
-/* line 200, ../sass/_settings.scss */
+/* line 209, ../sass/_settings.scss */
 .competition-title {
   color: #333333;
   text-align: left;
   font-size: 15px;
 }
 
-/* line 206, ../sass/_settings.scss */
+/* line 215, ../sass/_settings.scss */
 .large-12 > .competition-label {
   margin: 0px;
   padding: 0px;
   width: 30px;
 }
 
-/* line 212, ../sass/_settings.scss */
+/* line 221, ../sass/_settings.scss */
 .competition-description, .competition-owner {
   font-size: small;
   color: #999999;
 }
 
-/* line 217, ../sass/_settings.scss */
+/* line 226, ../sass/_settings.scss */
 .slider {
   color: white;
   font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
@@ -278,26 +278,26 @@ a > i {
   vertical-align: middle;
 }
 
-/* line 232, ../sass/_settings.scss */
+/* line 241, ../sass/_settings.scss */
 .subheader {
   height: auto;
   padding-bottom: 10px;
 }
 
-/* line 237, ../sass/_settings.scss */
+/* line 246, ../sass/_settings.scss */
 #footer, #footer a, #footer a:hover {
   font-size: small;
   background: #3684d6;
   color: white;
 }
 
-/* line 243, ../sass/_settings.scss */
+/* line 252, ../sass/_settings.scss */
 .topbar-title {
   font-size: x-large;
   font-weight: light;
 }
 
-/* line 248, ../sass/_settings.scss */
+/* line 257, ../sass/_settings.scss */
 .header {
   position: fixed;
   left: 0;
@@ -306,13 +306,13 @@ a > i {
   z-index: 1000;
 }
 
-/* line 256, ../sass/_settings.scss */
+/* line 265, ../sass/_settings.scss */
 .container {
   padding-top: 45px;
   padding-bottom: 20px;
 }
 
-/* line 261, ../sass/_settings.scss */
+/* line 270, ../sass/_settings.scss */
 p.competition-paragraph {
   font-size: 11px;
   color: #666666;
@@ -320,49 +320,49 @@ p.competition-paragraph {
   margin-bottom: 0;
 }
 
-/* line 268, ../sass/_settings.scss */
+/* line 277, ../sass/_settings.scss */
 .competition-info {
   height: 90px;
   overflow: hidden;
   padding-top: 5px;
 }
 
-/* line 274, ../sass/_settings.scss */
+/* line 283, ../sass/_settings.scss */
 .competition-image > img {
   height: 90px;
   margin-top: 5px;
 }
 
-/* line 279, ../sass/_settings.scss */
+/* line 288, ../sass/_settings.scss */
 .competition-preview.panel {
   background: #fafafa;
 }
 
-/* line 283, ../sass/_settings.scss */
+/* line 292, ../sass/_settings.scss */
 .competition-tile {
   margin-bottom: 10px;
 }
 
-/* line 287, ../sass/_settings.scss */
+/* line 296, ../sass/_settings.scss */
 .competition-tile h3 {
   font-size: 16px;
   color: #333333;
 }
 
-/* line 292, ../sass/_settings.scss */
+/* line 301, ../sass/_settings.scss */
 .articleHeadingContainer h3 {
   margin: 0;
   line-height: 100%;
 }
 
-/* line 297, ../sass/_settings.scss */
+/* line 306, ../sass/_settings.scss */
 .articleHeadingContainer label {
   color: #a4a4a4;
   margin-bottom: 14px;
   font-size: 12px;
 }
 
-/* line 303, ../sass/_settings.scss */
+/* line 312, ../sass/_settings.scss */
 .signin-centered-container {
   margin: auto !important;
   float: none !important;
@@ -370,102 +370,161 @@ p.competition-paragraph {
   padding: 25px;
 }
 
-/* line 310, ../sass/_settings.scss */
+/* line 319, ../sass/_settings.scss */
 .small-6.pull-6.columns > .globalBlueButton {
   float: right;
 }
 
-/* line 313, ../sass/_settings.scss */
+/* line 322, ../sass/_settings.scss */
 .signin-formfields p:nth-child(3) > input {
   float: left;
   position: relative;
   top: -20px;
 }
 
-/* line 318, ../sass/_settings.scss */
+/* line 327, ../sass/_settings.scss */
 .signin-formfields p:nth-child(3) > label {
   padding-left: 20px;
 }
 
-/* line 322, ../sass/_settings.scss */
+/* line 331, ../sass/_settings.scss */
 .globalBlueButton, .globalBlueButtonBig, .globalBlueButtonInput, .globalBlueButtonAtag > a, .globalBlueButtonSmallAtag > a, .globalBlueButtonSmall, .globalBlueButtonSmallFlexi, .buttonAccept {
   box-shadow: none;
   white-space: nowrap;
 }
 
-/* line 327, ../sass/_settings.scss */
+/* line 336, ../sass/_settings.scss */
 .signin-centered-container > p > a {
   display: inline-block;
 }
 
-/* line 331, ../sass/_settings.scss */
+/* line 340, ../sass/_settings.scss */
 ul.side-nav {
   padding-top: 0;
   position: fixed;
 }
-/* line 334, ../sass/_settings.scss */
+/* line 343, ../sass/_settings.scss */
 ul.side-nav li {
   margin-bottom: 2px;
 }
-/* line 337, ../sass/_settings.scss */
+/* line 346, ../sass/_settings.scss */
 ul.side-nav li a {
-  color: #3684d6;
-  font-size: 14px;
+  color: #3684d6 !important;
+  font-size: 15px !important;
 }
-/* line 339, ../sass/_settings.scss */
+/* line 348, ../sass/_settings.scss */
 ul.side-nav li a:hover {
   color: #ffac31;
 }
-/* line 340, ../sass/_settings.scss */
+/* line 349, ../sass/_settings.scss */
 ul.side-nav li a:active {
   background: none;
 }
-/* line 342, ../sass/_settings.scss */
+/* line 351, ../sass/_settings.scss */
 ul.side-nav li.active a {
   color: #666666 !important;
 }
 
-/* line 347, ../sass/_settings.scss */
-.glossary-page-container h6 {
+/* line 357, ../sass/_settings.scss */
+.glossary-page-container h6, competitions-block-Styling h6, .section-container.vertical-tabs .content h6 {
   font-size: 14px;
   color: #666666;
 }
-/* line 352, ../sass/_settings.scss */
-.glossary-page-container p {
+/* line 362, ../sass/_settings.scss */
+.glossary-page-container p, competitions-block-Styling p, .section-container.vertical-tabs .content p {
   font-size: 12px;
   color: #666666;
 }
-/* line 357, ../sass/_settings.scss */
-.glossary-page-container ol {
+/* line 367, ../sass/_settings.scss */
+.glossary-page-container ol, competitions-block-Styling ol, .section-container.vertical-tabs .content ol {
   font-size: 13px;
   color: #666666;
 }
-/* line 360, ../sass/_settings.scss */
-.glossary-page-container ol li {
+/* line 370, ../sass/_settings.scss */
+.glossary-page-container ol li, competitions-block-Styling ol li, .section-container.vertical-tabs .content ol li {
   padding-bottom: 10px;
   list-style-type: disc;
 }
-/* line 366, ../sass/_settings.scss */
-.glossary-page-container ul {
+/* line 376, ../sass/_settings.scss */
+.glossary-page-container ul, competitions-block-Styling ul, .section-container.vertical-tabs .content ul {
   font-size: 13px;
   color: #666666;
   margin-left: 20px;
 }
-/* line 371, ../sass/_settings.scss */
-.glossary-page-container ul li {
+/* line 381, ../sass/_settings.scss */
+.glossary-page-container ul li, competitions-block-Styling ul li, .section-container.vertical-tabs .content ul li {
   padding-bottom: 10px;
   list-style-type: disc;
 }
-/* line 377, ../sass/_settings.scss */
-.glossary-page-container pre {
+/* line 387, ../sass/_settings.scss */
+.glossary-page-container pre, competitions-block-Styling pre, .section-container.vertical-tabs .content pre {
   padding: 10px;
   background: #ebf2fb;
   margin-bottom: 15px;
 }
-/* line 383, ../sass/_settings.scss */
-.glossary-page-container a {
+/* line 393, ../sass/_settings.scss */
+.glossary-page-container a, competitions-block-Styling a, .section-container.vertical-tabs .content a {
   color: #3684d6;
 }
+/* line 397, ../sass/_settings.scss */
+.glossary-page-container b, competitions-block-Styling b, .section-container.vertical-tabs .content b {
+  color: #666666;
+}
+
+/* line 403, ../sass/_settings.scss */
+div.auto.section-container > section > .title a, .auto.section-container > .section > .title a {
+  background: white;
+  padding-left: 40px !important;
+  padding-right: 40px !important;
+  font-size: 19px;
+}
+
+/* line 411, ../sass/_settings.scss */
+.auto.section-container > section > .content, .auto.section-container > .section > .content, .vertical-tabs.section-container > section > .content, .vertical-tabs.section-container > .section > .content {
+  background: #f8f8f8 !important;
+}
+
+/* line 415, ../sass/_settings.scss */
+.auto.section-container > section.active > .title {
+  border-bottom: solid 1px #f8f8f8 !important;
+}
+/* line 417, ../sass/_settings.scss */
+.auto.section-container > section.active > .title a {
+  background: #f8f8f8 !important;
+}
+
+/* line 422, ../sass/_settings.scss */
+.section-container.vertical-tabs .content {
+  padding-top: 1px !important;
+}
+/* line 425, ../sass/_settings.scss */
+.section-container.vertical-tabs .content p {
+  color: #3b3b3b;
+  font-size: 13px;
+  line-height: 22px;
+}
+/* line 430, ../sass/_settings.scss */
+.section-container.vertical-tabs .CompetitionsDetailLftUl {
+  margin-bottom: 2px;
+}
+/* line 433, ../sass/_settings.scss */
+.section-container.vertical-tabs .CompetitionsDetailLftUl a {
+  color: #3684d6 !important;
+  font-size: 15px !important;
+}
+/* line 435, ../sass/_settings.scss */
+.section-container.vertical-tabs .CompetitionsDetailLftUl a:hover {
+  color: #ffac31 !important;
+}
+/* line 436, ../sass/_settings.scss */
+.section-container.vertical-tabs .CompetitionsDetailLftUl a:active {
+  background: none !important;
+}
+/* line 440, ../sass/_settings.scss */
+.section-container.vertical-tabs .active a {
+  color: #666666 !important;
+  font-weight: bold;
+}
 
 /* font-face */
 @font-face {
diff --git a/codalab/apps/web/static/foundation/sass/_settings.scss b/codalab/apps/web/static/foundation/sass/_settings.scss
index 793d8b00b..d8c8731af 100644
--- a/codalab/apps/web/static/foundation/sass/_settings.scss
+++ b/codalab/apps/web/static/foundation/sass/_settings.scss
@@ -10,6 +10,9 @@ $medium-light-gray: #999;
 $dark-gray: #333;
 $light-background-blue:#eff2f9;
 $link-color: #3684d6;
+$background-gray:#f8f8f8;
+$white:#fff;
+$text-color-gray:#3b3b3b;
 
 
 $body-font-color: $gray;
@@ -45,8 +48,14 @@ $section-title-bg-hover: none;
 $tooltip-bg: $background;
 
 @mixin linkStyle {
-	color:$link-color;
-	font-size:14px;
+	color:$link-color !important;
+	font-size:15px !important;
+}
+
+@mixin paragraph-Style {
+	color:$text-color-gray;
+	font-size:13px;
+	line-height:22px;
 }
 
 *{
@@ -343,7 +352,8 @@ ul.side-nav {
 		color:$gray !important
 	}
 }
-.glossary-page-container {
+
+.glossary-page-container, competitions-block-Styling {
 	h6 { 
 		font-size:14px; 
 		color:$gray
@@ -383,4 +393,52 @@ ul.side-nav {
 	a {
 		color:$link-color
 		}
+
+	b {
+		color:$gray
+	}
+}
+
+div.auto.section-container > section > .title, .auto.section-container > .section > .title{
+		a{
+		background:$white;
+		padding-left:40px !important;
+		padding-right:40px !important;
+		font-size:19px;
+		}
+}
+
+.auto.section-container > section > .content, .auto.section-container > .section > .content, .vertical-tabs.section-container > section > .content, .vertical-tabs.section-container > .section > .content {
+	background:$background-gray !important;
 }
+
+.auto.section-container > section.active > .title {
+	border-bottom:solid 1px $background-gray !important;
+	a {
+		background:$background-gray !important;
+	}
+}
+.section-container.vertical-tabs{
+	 .content{
+			padding-top:1px !important;
+			@extend competitions-block-Styling;
+				p {
+					@include paragraph-Style;
+				}
+			}
+	
+	.CompetitionsDetailLftUl {
+		margin-bottom:2px;
+
+		a {
+			@include linkStyle;
+			&:hover{color:$active !important}
+			&:active{background:none !important}
+		}
+	}
+
+	.active a {
+			color:$gray !important;
+			font-weight:bold;
+	}
+}
\ No newline at end of file