diff --git a/css/badge.css b/css/badge.css
new file mode 100644
index 0000000..3e1a762
--- /dev/null
+++ b/css/badge.css
@@ -0,0 +1,18 @@
+.badges-section {
+  margin-bottom:30px;
+}
+.badges-section .media {
+  margin-top: 30px;
+}
+h1.badge-title{
+  margin-top: 10px;
+}
+#modal-badge-img {
+  position:absolute;
+  right: 25px;
+  bottom: 25px;
+  opacity: 0.5;
+}
+#assertion-modal.in {
+  color: black;
+}
diff --git a/css/lesson.css b/css/lesson.css
index 9d28880..9aad2f8 100644
--- a/css/lesson.css
+++ b/css/lesson.css
@@ -1,82 +1,126 @@
-/* pre blocks inherit color from parent */
-pre {
-    color: inherit;
+code {
+    color: #333333;
 }
 
-/* Work around to issue when create EPUB with pandoc for IPython Notebook
- * template.
- */
-div.out {
-  display: block;
-  padding: 9.5px;
-  margin-bottom: 10px;
-  font-size: 13px;
-  line-height: 20px;
-  word-break: break-all;
-  word-wrap: break-word;
-  background-color: #f5f5f5;
-  border: 1px solid #ccc;
-  border: 1px solid rgba(0, 0, 0, 0.15);
-  -webkit-border-radius: 4px;
-     -moz-border-radius: 4px;
-          border-radius: 4px;
+/* Code sample */
+pre.sourceCode,
+pre.input {
+    color: ForestGreen;
 }
-
-div.out pre {
-    padding: 0px;
-    margin: 0px;
-    border: 0px;
+pre.output {
+    color: MediumBlue;
 }
-
-/* Comments in code. */
-.comment {
-    color: purple;
+pre.error {
+    color: Red;
 }
 
-/* Highlighted changes in code. */
-.highlight {
-    background-color: mistyrose;
+.objectives, .keypoints, .callout, .challenge {
+    margin: 1em 0;
+    padding: 0em 1em;
 }
 
-/* Manual input. */
-.in {
-    color: darkgreen;
-    margin-left: 20px;
+.objectives h2:first-child,
+.keypoints h2:first-child,
+.callout h2:first-child,
+.challenge h2:first-child {
+    margin-top: 10px;
 }
 
-/* Program output. */
-.out {
-    color: darkblue;
-    margin-left: 20px;
+.objectives, .keypoints {
+    background-color: azure;
+    border: 5px solid azure;
 }
 
-/* Error output. */
-.err {
-    color: darkred;
-    margin-left: 20px;
-    font-style: italic;
-    font-weight: bold;
+.callout {
+    background-color: #EEE;
+    border: 5px solid #EEE;
 }
 
-/* Files. */
-.file {
-    margin-left: 20px;
+.challenge {
+    background-color: #CCFFCC;
+    border: 5px solid #CCFFCC;
 }
 
-/* Explanatory call-out boxes. */
-div.box {
-    background-color: lightgray;
+/* Tables used for displaying choices in challenges. */
+table.choices tr td {
+    vertical-align : top;
 }
 
-/* Challenge questions. */
-div.challenge {
-    border-style: solid;
-    border-width: thin;
-    border-color: gray;
+/* Database tables do _not_ have double borders */
+table.outlined {
+    border-collapse: collapse;
+}
+    
+/* Printing */
+@media print {
+    h1 {
+        font-size: 16pt;
+        line-height: 18pt;
+    }
+    
+    h2,h3,h4,h5,h6 {
+        font-size: 12pt;
+        line-height: 13pt;
+    }
+    
+    /* Objectives, Callout Box and Challenges */
+    .objectives, .keypoints {
+        background-color: unset;
+        border: 5px solid;
+    }
+    
+    .callout {
+        background-color: unset;
+        border: 5px solid;
+    }
+    
+    .challenge {
+        background-color: unset;
+        border: 5px solid;
+    }
+    
+    p,ul,ol,li,pre,code {
+        font-size: 8pt;
+        line-height: 9pt;
+    }
+    
+    code {
+        padding: 0px;
+        border: 0px;
+        background: unset;
+    }
+    
+    pre.sourceCode::before,
+    pre.input::before. {
+        content: "Input:";
+    }
+    
+    pre.output::before {
+        content: "Output:";
+    }
+    
+    pre.error::before {
+        content: "Error:";
+    }
+    
+    pre.sourceCode code,
+    pre.input code,
+    pre.output code,
+    pre.error code {
+        display: block;
+        margin-top: 1em;
+        margin-left: 2em;
+    }
+    
+    #github-ribbon {
+        display: none;
+    }
+    
+    .banner {
+        display: none;
+    }
+    
+    .footer {
+        display: none;
+    }
 }
-
-/* Key points in summary. */
-div.keypoints {}
-
-/* Learning objectives. */
-div.objectives {}
diff --git a/css/swc-bootstrap.css b/css/swc-bootstrap.css
index b8b8e65..b7886e2 100644
--- a/css/swc-bootstrap.css
+++ b/css/swc-bootstrap.css
@@ -1,140 +1,261 @@
-/* Customizations to Bootstrap's default styles */
-
-blockquote p {
-    font-size: inherit;
-    font-weight: inherit;
-    line-height: inherit;
-}
 /* readability: darken the alert colour for contrast with background */
-
 .alert {
-    color: rgb(0, 0, 0);
+  color: rgb(0,0,0);
 }
-/* Container for page contents. */
 
-.container {
-    background-color: white;
+.navbar .brand {
+  padding-top: 0px;  /* align the logo */
+  text-shadow:none;
 }
-.hero-unit {
-    padding: 20px;
+
+.navbar {
+  margin:0;
+  border-top:5px solid #2b3990;
+  border-bottom:1px solid #CCC;
 }
+
 .navbar .container {
     background-color: inherit;
+    font-size:11pt;
+    padding:27px 10px 0px 10px;
+    background:url('../img/software-carpentry-banner.png') no-repeat;
+    background-size: 250px;
+    background-position: 10px 10px;
+    height:50px;
 }
+
 .navbar-inner {
-    min-height: 40px;
-    padding-right: 20px;
-    padding-left: 20px;
-    background-color: #F4F4F4;
-    background-image: none;
-    border: 1px solid #d4d4d4;
-    -webkit-border-radius: 0;
-    -moz-border-radius: 0;
-    border-radius: 0;
+  min-height: 40px;
 }
-code {
-    color: #333333;
+
+.navbar .nav > li > a {
+  padding: 10px;
 }
+
+.navbar-inverse .nav > li > a {
+  color: #f0f0f0;
+  text-shadow:none;
+}
+
 .navbar-inverse .navbar-inner {
-    background-color: #20267D;
-    background-image: none;
-    border-color: #20267D;
+  background:#D6D6D6;
 }
+
 .navbar-inverse .nav .active > a,
-.navbar-inverse .nav .active > a:hover, .navbar-inverse .nav .active > a:focus {
-    color: #ffffff;
-    background-color: #20267D;
+.navbar-inverse .nav .active > a:hover,
+.navbar-inverse .nav .active > a:focus {
+  color: #2b3990;
 }
+
 .navbar-inverse .nav li.dropdown.open > .dropdown-toggle,
 .navbar-inverse .nav li.dropdown.active > .dropdown-toggle,
 .navbar-inverse .nav li.dropdown.open.active > .dropdown-toggle {
-    color: #ffffff;
-    background-color: #20267D;
+  color: #ffffff;
+  background-color: #B9B9C4;
 }
+
 .navbar-inverse .nav li.dropdown.active > .dropdown-toggle .caret {
-    border-top-color: #999999;
-    border-bottom-color: #999999;
+  border-top-color: #999999;
+  border-bottom-color: #999999;
 }
+
 .navbar-inverse .nav li.dropdown.open > .dropdown-toggle .caret {
-    border-top-color: #ffffff;
-    border-bottom-color: #ffffff;
+  border-top-color: #ffffff;
+  border-bottom-color: #ffffff;
+}
+
+.navbar-inverse .navbar-search .search-query {
+  background-color: #ffffff;
+  color: #666666;
+  border-color:#2b3990;
+  width:150px;
 }
+
+.navbar-inverse .navbar-search {
+  border: none;
+}
+
+.navbar-inverse .nav-collapse .nav > li > a:hover,
+.navbar-inverse .nav-collapse .dropdown-menu a:hover {
+  background-color: transparent;
+}
+
+.navbar-inverse .nav-collapse .nav > li > a, .navbar-inverse .nav-collapse .dropdown-menu a {
+  color: #2b3990;
+  text-align: center;
+}
+
+.navbar-inverse .nav-collapse .nav > li:hover > a {
+  color: #935212;
+}
+
+.navbar.transparent.navbar-inverse .navbar-inner {
+    border-width: 0px;
+    -webkit-box-shadow: 0px 0px;
+    box-shadow: 0px 0px;
+    border-radius:0;
+    -webkit-border-radius:0;
+    background-image: -webkit-gradient(linear, 50.00% 0.00%, 50.00% 100.00%, color-stop( 0% , rgba(0,0,0,0.00)),color-stop( 100% , rgba(0,0,0,0.00)));
+    background-image: -webkit-linear-gradient(270deg,rgba(0,0,0,0.00) 0%,rgba(0,0,0,0.00) 100%);
+    background-image: linear-gradient(180deg,rgba(0,0,0,0.00) 0%,rgba(0,0,0,0.00) 100%);
+}
+
+code {
+  color: #333333;
+}
+
+.container {
+    max-width:920px;
+}
+
+blockquote p {
+  font-size:14px;
+}
+
 /* GitHub Ribbon */
 
 #github-ribbon a {
-    background: #000;
-    color: #fff;
-    text-decoration: none;
-    font-family: arial, sans-serif;
-    text-align: center;
-    font-weight: bold;
-    padding: 5px 40%;
-    font-size: 0.8rem;
-    line-height: 1.6rem;
-    position: relative;
-    transition: 0.5s;
-    width: 100%;
-    margin: 0 auto;
-    white-space: nowrap;
-    z-index: 10;
+  background:#000;
+  color:#fff;
+  text-decoration:none;
+  font-family:arial, sans-serif;
+  text-align:center;
+  font-weight:bold;
+  padding:5px 40%;
+  font-size:0.8rem;
+  line-height:1.6rem;
+  position:relative;
+  transition:0.5s;
+  width:100%;
+  margin: 0 auto;
+  white-space: nowrap;
+  z-index:10;
 }
+
 #github-ribbon a:hover {
-    background: #600;
-    color: #fff;
+  background:#600;
+  color:#fff;
 }
+
 #github-ribbon a::before, #github-ribbon a::after {
-    content: "";
-    width: 100%;
-    display: block;
-    position: absolute;
-    top: 1px;
-    left: 0;
-    height: 1px;
-    background: #fff;
-}
-#github-ribbon a::after {
-    bottom: 1px;
-    top: auto;
+  content:"";
+  width:100%;
+  display:block;
+  position:absolute;
+  top:1px;
+  left:0;
+  height:1px;
+  background:#fff;
 }
-/* github ribbon breaking point */
 
-@media screen and (min-width: 600px) {
-    .navbar .btn-navbar {
-        margin-right: 150px;
-    }
-    #github-ribbon {
-        position: absolute;
-        display: block;
-        top: 0;
-        right: 0;
-        width: 150px;
-        overflow: hidden;
-        height: 150px;
-    }
-    #github-ribbon a {
-        width: 200px;
-        position: absolute;
-        padding: 5px 40px;
-        top: 40px;
-        right: -80px;
-        transform: rotate(45deg);
-        -webkit-transform: rotate(45deg);
-        box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.8);
-    }
+#github-ribbon a::after{
+  bottom:1px;
+  top:auto;
 }
-@media (max-width: 599px) {
-    .header h1 {
-        font-size: 20pt;
-    }
-    #header-text {
-        font-size: 16pt;
+
+/* Media Queries */
+
+@media (max-width: 979px){
+  .navbar-inverse .nav-collapse ul{
+    margin:20px 0 0;
+  }
+
+  .navbar-inverse .nav-collapse .nav > li > a {
+    font-size: 12pt;
+  }
+
+  .navbar-inverse .nav-collapse .navbar-search {
+    text-align: center;
+    border-top:1px solid #AAA;
+    margin:0;
+  }
+
+  .navbar-inverse .nav-collapse .navbar-search .search-query {
+    margin:10px 0;
+  }
+
+  .navbar-inverse .nav-collapse .nav > li {
+    border-top:1px solid #AAA;
+    padding:10px 0;
+  }
+
+}
+
+@media (max-width: 767px) {
+    .container {
+      padding:0 40px;
     }
-    #github-ribbon {
-        width: 100%;
+
+    body {
+      padding:0;
     }
-    #github-ribbon a {
-        display: block;
-        padding: 0px 0px;
-        margin: 0px 0px;
+
+    .navbar-fixed-top, .navbar-fixed-bottom, .navbar-static-top {
+      margin-left: 0;
+      margin-right: 0;
+      margin-bottom:0;
     }
 }
+
+@media (max-width: 979px) and (min-width: 768px) {
+  .container {
+    max-width: 700px;
+  }
+
+}
+
+@media (max-width: 400px) {
+  .header h1 {
+      font-size: 24pt;
+  }
+
+  #header-text {
+      font-size:16pt;
+  }
+
+  .navbar .container {
+    background-size: 200px;
+    background-position: 10px 20px;
+  }
+
+  #nav-logo {
+    width:190px;
+    height:40px;
+  }
+}
+
+/* github ribbon breaking point */
+@media screen and (min-width:600px){
+  #github-ribbon{
+    position:absolute;
+    display:block;
+    top:0;
+    right:0;
+    width:150px;
+    overflow:hidden;
+    height:150px;
+  }
+  #github-ribbon a{
+    width:200px;
+    position:absolute;
+    padding:5px 40px;
+    top:40px;
+    right:-80px;
+    transform:rotate(45deg);
+    -webkit-transform:rotate(45deg);
+    box-shadow:1px 1px 10px rgba(0,0,0,0.8);
+  }
+  .navbar .btn-navbar {
+    margin-right: 150px;
+  }
+}
+
+@media (max-width: 319px) {
+  .header h1 {
+      font-size: 20pt;
+  }
+
+  #header-text {
+      font-size:16pt;
+  }
+}
diff --git a/css/swc-workshop-and-lesson.css b/css/swc-workshop-and-lesson.css
new file mode 100644
index 0000000..df1b81d
--- /dev/null
+++ b/css/swc-workshop-and-lesson.css
@@ -0,0 +1,36 @@
+body.workshop, body.lesson {
+	background-color: #BEC3C6;
+	margin: 20px 0;
+}
+
+.container-full-width {
+	max-width: none;
+}
+
+.card {
+	background-color: white;
+}
+
+/* Top banner of every page. */
+div.banner {
+	background-color: #FFFFFF;
+	width: 100%;
+	height: 90px;
+	margin: 0px;
+	padding: 0;
+	border-bottom: 1px solid #A6A6A6;
+}
+
+/* Padding around image in top banner. */
+div.banner a img {
+	padding: 20px 25px;
+}
+
+/* Footer of every page. */
+div.footer {
+	clear: both;
+	background: url("/img/main_shadow.png") repeat-x scroll center top #FFFFFF;
+	padding: 4px 10px 7px 10px;
+	border-top: 1px solid #A6A6A6;
+	text-align: right;
+}
\ No newline at end of file
diff --git a/css/swc.css b/css/swc.css
index 43a0917..2492a91 100644
--- a/css/swc.css
+++ b/css/swc.css
@@ -1,7 +1,5 @@
 /* Main body of pages. */
 body {
-    background: #BEC3C6;
-    margin: 20px 0;
     font-family: "Open Sans", Helvetica, Arial, sans-serif;
     color: rgb(03, 03, 03);
 }
@@ -13,47 +11,79 @@ body.stylesheet {
     margin: 20 auto;
 }
 
-/* Top banner of every page. */
-div.banner {
-    background-color: #FFFFFF;
-    width: 100%;
-    height: 90px;
+/* Explanatory call-out boxes. */
+div.box {
+    width: 54em;
+    background-color: mistyrose;
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
+    padding-top: 1px;
+    padding-bottom: 1px;
+    padding-left: 10px;
+    padding-right: 10px;
+    outline-color: gray;
+    outline-width: 1px;
+    outline-style: solid;
+}
+
+/* Level 2 headings inside pages. */
+div.content div h3 {
+    border-bottom: 1px solid #CCCCCC;
+    display: block;
+    font-family: Verdana,"BitStream vera Sans";
+    margin-top: 10px;
+    padding: 0 5px 3px;
+}
+
+/* PDF and slide files referenced from lectures. */
+div.files {
+    padding: 10px;
+}
+
+.swc-blue-bg {
+   /*background-color: #20267D;*/
+   /* svg colour is slightly different? */
+    background: #2b3990;
+}
+
+/* Main menu at the top of every page. */
+div.mainmenu {
+    clear: both;
+    background-color: #F4F4F4;
     margin: 0px;
-    padding: 0;
+    padding: 3px 0px 3px 25px;
     border-bottom: 1px solid #A6A6A6;
+    height: 30px
 }
 
-.swc-blue-bg {
-   background-color: #20267D;
+#menubar {
+    float: left;
+    margin-top: 4px;
 }
 
-/* Padding around image in top banner. */
-div.banner a img {
-    padding: 20px 25px;
+#searchbar {
+    float: right;
+    margin-right: 20px;
 }
 
-@media (max-width: 700px) {
-    div.banner a img {
-        padding: 20px 0px;
-    }
+/* Narration for audio-only lectures. */
+div.narration {
+    text-align: center;
+    font-size: 2em;
 }
 
-/* Footer of every page. */
-div.footer {
-    clear: both;
-    background: url("/img/main_shadow.png") repeat-x scroll center top #FFFFFF;
-    padding: 4px 10px 7px 10px;
-    border-top: 1px solid #A6A6A6;
-    text-align: right;
+/* Table of contents. */
+div.toc {
+    /* No special styling yet. */
 }
 
-/* Headings */
-h1, h2, h3, h4, h5, h6  {
-    color: rgb(03,03,03);
+.transcript {
+    display: table;
 }
 
-h1.title {
-    margin:40px 0px;
+.transcript .media img {
+    border: 1px solid grey;
 }
 
 h1, h2 {
@@ -79,22 +109,6 @@ div.chapter h2 {
 .objectives, .keypoints, .callout, .challenge {
     margin: 1em 0;
     padding: 0em 1em;
-}
-
-.objectives, .keypoints {
-    background-color: azure;
-    border: 5px solid azure;
-}
-
-.callout {
-    background-color: #EEE;
-    border: 5px solid #EEE;
-}
-
-.challenge {
-    background-color: #CCFFCC;
-    border: 5px solid #CCFFCC;
-}
 
 /* Things to fix. */
 .fixme {
@@ -118,10 +132,76 @@ div.chapter h2 {
 /* Block quotations. */
 blockquote {
     margin: 1em;
-    padding: .7em;
+    padding: 1em 1em .5em 1em;
     width: 90%;
 }
 
+/* Citation for testimonial quote. */
+blockquote.testimonial cite {
+    font-style: italic;
+}
+/* YouTube video embed. */
+div.youtube {
+    text-align: center;
+    padding: 10px;
+}
+
+/* Glossary description lists. */
+dl.gloss {
+    /* Empty for now. */
+}
+
+/* Displaying YouTube videos. */
+iframe.youtube_player {
+    border: 0;
+    text-align: center;
+    width: 640px;
+    height: 500px;
+}
+
+/* Sections in book chapters. */
+section {
+    clear: both;
+}
+
+/* Person's name in team.html. */
+.person {
+    font-weight: bold;
+    font-style: italic;
+}
+
+/* Short review of book in bibliography. */
+span.review {
+    font-style: italic;
+}
+
+/* Bibliography book covers. */
+img.book-cover {
+    width: 80px;
+}
+
+/* Blog calendar table in blog/index.html. */
+table.blogcalendar th {
+    text-align  : right;
+    font-weight : bold;
+}
+
+/* See above. */
+table.blogcalendar th.left {
+    text-align : left;
+}
+
+/* See above. */
+table.blogcalendar tr td {
+    text-align : right;
+}
+
+/* Blog index tables in blog/index.html. */
+table.blogindex td.date {
+    text-align: left ;
+    width:10em;
+}
+
 /* Citation for testimonial quote. */
 blockquote.testimonial cite {
     font-style: italic;
@@ -137,236 +217,199 @@ table.outlined {
     border-collapse: collapse;
 }
 
-/* Code sample */
-pre.sourceCode,
-pre.input {
-    color: ForestGreen;
+/* Link items (to workshop pages) in the workshops tables */
+table.workshops td.link {
+    width: 50%;
+    text-align: left;
 }
-pre.output {
-    color: MediumBlue;
+
+/* Spacer items (i.e. ellipsis) on the workshops tables */
+table.workshops td.spacer {
+   max-width: 100%;
+   text-align: center;
 }
-pre.error {
-    color: Red;
+
+/* Date columns on the workshops tables */
+table.workshops td.date {
+    width: 50%;
+    text-align: right;
 }
 
-/* Printing */
-@media print {
-  h1 {
-    font-size: 16pt;
-    line-height: 18pt;
-  }
+/* Badge modal dialog */
+#assertion-modal {
+    width:700px;
+    margin-left:-350px;
+}
+#assertion-modal iframe {
+    background-color: transparent;
+    border: 0px none transparent;
+    padding: 0px;
+    width: 100%;
+    height: 20em;
+}
 
-  h2,h3,h4,h5,h6 {
-    font-size: 12pt;
-    line-height: 13pt;
-  }
+#assertion-model img.badge {
+    position: absolute;
+    right: 15px;
+    bottom: 35px;
+    opacity: 0.5;
+}
 
-  /* Objectives, Callout Box and Challenges */
-  .objectives, .keypoints {
-      background-color: unset;
-      border: 5px solid;
-  }
+/* list with checkbox as bullet */
+ul.checklist {
+  list-style-image: url('../img/checkbox.png');
+}
 
-  .callout {
-      background-color: unset;
-      border: 5px solid;
-  }
+/* FAQ */
+dl.faq dt {
+    font-style: italic;
+    font-weight: bold;
+}
 
-  .challenge {
-      background-color: unset;
-      border: 5px solid;
-  }
+section.content {
+    width:100%;
+    background: white;
+}
 
-  p,ul,ol,li,pre,code {
-    font-size: 8pt;
-    line-height: 9pt;
-  }
+.header.home {
+    background: url(../img/header.png) no-repeat center center;
+    background-attachment: fixed;
+    -webkit-background-size: cover;
+    -moz-background-size: cover;
+    -o-background-size: cover;
+    background-size: cover;
+}
 
-  code {
-    padding: 0px;
-    border: 0px;
-    background: unset;
-  }
-
-  pre.sourceCode::before,
-  pre.input::before. {
-      content: "Input:";
-  }
-
-  pre.output::before {
-      content: "Output:";
-  }
-
-  pre.error::before {
-      content: "Error:";
-  }
-
-  pre.sourceCode code,
-  pre.input code,
-  pre.output code,
-  pre.error code {
-      display: block;
-      margin-top: 1em;
-      margin-left: 2em;
-  }
-
-  #github-ribbon {
-    display: none;
-  }
+.header {
+    background:#2b3990;
+}
 
-  .banner {
-    display: none;
-  }
+.header h1 {
+    line-height: 1.1;
+    margin: 60px 0px 80px;
+    font-size: 40pt;
+}
 
-  .footer {
-    display: none;
-  }
+#header-text {
+    font-size:20pt;
+    margin:0;
+}
+
+#nav-logo {
+    width:270px;
+    height:40px;
+    top:5;
+    left:10;
+    position:absolute;
+    z-index: 10;
+}
+
+#home-options {
+    background:#F6F6F6;
+    border-top:1px solid #DDDDDD;
+    border-bottom:1px solid #DDDDDD;
+    padding:20px 0;
+    margin-bottom:20px;
 }
 
-/*----------------------------------------*/
-/* Override Bootstrap CSS                 */
-/*----------------------------------------*/
+#title {
+    background:#F6F6F6;
+    border-top:1px solid #DDDDDD;
+    border-bottom:1px solid #DDDDDD;
+    padding:0 0 20px;
+    margin-bottom:20px;
+}
 
-blockquote p {
-    font-size: inherit;
-    font-weight: inherit;
-    line-height: inherit;
+h5 a:link, h5 a:visited,
+h4 a:link, h4 a:visited,
+h3 a:link, h3 a:visited {
+    color:#2b3990;
 }
 
-blockquote h2{
-   margin-top: 0px;
+h5 a:hover,
+h4 a:hover,
+h3 a:hover {
+    color:#C26D17;
+    text-decoration: none;
 }
 
-/* readability: darken the alert colour for contrast with background */
+a {
+    color:#3E51CF;
+    -webkit-transition: all 0.2s ease;
+    -moz-transition: all 0.2s ease;
+    -o-transition: all 0.2s ease;
+    transition: all 0.2s ease;
+}
 
-.alert {
-    color: rgb(0, 0, 0);
+a:hover {
+    color:#965412;
 }
-/* Container for page contents. */
 
-.container {
-    background-color: white;
+footer {
+    background:#2b3990;
+    padding:20px 0;
+    font-size: 10pt;
+    margin-top:10px;
 }
-.hero-unit {
-    padding: 20px;
+
+footer a, footer a:hover{
+    color:#FFF;
+    padding-left: 10px;
 }
-.navbar .container {
-    background-color: inherit;
+
+footer .container .links{
+    background:url('../img/software-carpentry-banner-white.png') no-repeat;
+    background-size: 200px;
+    background-position: 0;
+    height:40px;
+    padding:40px 0 0 200px;
+    text-align: right;
 }
-.navbar-inner {
-    min-height: 40px;
-    padding-right: 20px;
-    padding-left: 20px;
-    background-color: #F4F4F4;
-    background-image: none;
-    border: 1px solid #d4d4d4;
-    -webkit-border-radius: 0;
-    -moz-border-radius: 0;
-    border-radius: 0;
-}
-code {
-    color: #333333;
-}
-.navbar-inverse .navbar-inner {
-    background-color: #20267D;
-    background-image: none;
-    border-color: #20267D;
-}
-.navbar-inverse .nav .active > a,
-.navbar-inverse .nav .active > a:hover, .navbar-inverse .nav .active > a:focus {
-    color: #ffffff;
-    background-color: #20267D;
-}
-.navbar-inverse .nav li.dropdown.open > .dropdown-toggle,
-.navbar-inverse .nav li.dropdown.active > .dropdown-toggle,
-.navbar-inverse .nav li.dropdown.open.active > .dropdown-toggle {
-    color: #ffffff;
-    background-color: #20267D;
-}
-.navbar-inverse .nav li.dropdown.active > .dropdown-toggle .caret {
-    border-top-color: #999999;
-    border-bottom-color: #999999;
-}
-.navbar-inverse .nav li.dropdown.open > .dropdown-toggle .caret {
-    border-top-color: #ffffff;
-    border-bottom-color: #ffffff;
-}
-
-/* GitHub Ribbon */
-#github-ribbon a {
-    background: #000;
-    color: #fff;
-    text-decoration: none;
-    font-family: arial, sans-serif;
-    text-align: center;
+
+
+/* For the Request a Workshop form */
+#ss-form .ss-q-title {
+    display: block;
     font-weight: bold;
-    padding: 5px 40%;
-    font-size: 0.8rem;
-    line-height: 1.6rem;
-    position: relative;
-    transition: 0.5s;
-    width: 100%;
-    margin: 0 auto;
-    white-space: nowrap;
-    z-index: 10;
+    padding-bottom: 0.5em;
 }
-#github-ribbon a:hover {
-    background: #600;
-    color: #fff;
+#ss-form .ss-required-asterisk {
+    color: #c43b1d;
 }
-#github-ribbon a::before, #github-ribbon a::after {
-    content: "";
-    width: 100%;
-    display: block;
-    position: absolute;
-    top: 1px;
-    left: 0;
-    height: 1px;
-    background: #fff;
-}
-#github-ribbon a::after {
-    bottom: 1px;
-    top: auto;
-}
-
-/* GitHub ribbon breaking point */
-@media screen and (min-width: 600px) {
-    .navbar .btn-navbar {
-        margin-right: 150px;
-    }
-    #github-ribbon {
-        position: absolute;
-        display: block;
-        top: 0;
-        right: 0;
-        width: 150px;
-        overflow: hidden;
-        height: 150px;
-    }
-    #github-ribbon a {
-        width: 200px;
-        position: absolute;
-        padding: 5px 40px;
-        top: 40px;
-        right: -80px;
-        transform: rotate(45deg);
-        -webkit-transform: rotate(45deg);
-        box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.8);
-    }
-}
-@media (max-width: 599px) {
-    .header h1 {
-        font-size: 20pt;
-    }
-    #header-text {
-        font-size: 16pt;
-    }
-    #github-ribbon {
-        width: 100%;
-    }
-    #github-ribbon a {
-        display: block;
-        padding: 0px 0px;
-        margin: 0px 0px;
-    }
+#ss-form label {
+    display:inline;
+    cursor: default;
+}
+#ss-form .ss-secondary-text {
+    color: #666;
+}
+#ss-form .ss-form-entry {
+    margin-bottom: 1.5em;
+}
+#ss-form ul {
+    margin:0;
+    padding:0;
+    list-style: none;
+}
+#ss-form ol {
+    margin:0;
+}
+#ss-form .ss-choice-item {
+    line-height: 1.3em;
+    padding-bottom: .5em;
+}
+#ss-form .ss-q-long {
+    resize: vertical;
+    width: 70%;
+}
+#ss-form .error-message, .required-message {
+    display: none;
+}
+#ss-form .ss-form-entry input {
+  vertical-align: middle;
+  margin: 0;
+  padding:0 4px;
+}
+#ss-form .ss-choice-item-control {
+  padding-right: 4px;
 }