Homepage styling and pretties

app/assets/stylesheets/darkswarm/hub_node.css.sass

@@ -10,13 +10,12 @@ hub
     &, & > a.row
       display: block
 
-  strong
-    color: $clr-strong
   &.inactive, &.inactive strong
     color: $disabled-dark
 
   &.open
     border: 1px solid $clr-strong
+    background: white
     .active_table_row:first-child
       border-bottom: 1px solid $clr-strong
     .active_table_row.link
@@ -34,6 +33,7 @@ hub
       padding-top: 1em
 
   &.closed
+    @include csstrans
     &:hover, &:active, &:focus
-      background: white
       border: 1px solid $clr-strong
+      color: $clr-strong

app/assets/stylesheets/darkswarm/mixins.sass

@@ -22,4 +22,11 @@
 @mixin fullwidthbg
   background-position: top center 
   background-repeat: no-repeat
-  background-size: 100% auto
+  background-size: 100% auto
+
+@mixin csstrans
+  -webkit-transition: all 200ms ease-in-out
+  -moz-transition: all 200ms ease-in-out
+  -ms-transition: all 200ms ease-in-out
+  -o-transition: all 200ms ease-in-out
+  transition: all 200ms ease-in-out

app/assets/stylesheets/darkswarm/typography.css.sass

@@ -1,3 +1,5 @@
+@import branding
+
 @font-face
   font-family: 'AvenirBla_IE'
   src: url("/AveniBla.eot") format("opentype")
@@ -18,9 +20,10 @@
   //font-family: "AvenirBla_IE", "AvenirBla"
 
 a
-  color: #267D97
+  color: $clr-strong
   &:hover
-    text-decoration: underline
+    text-decoration: none
+    color: $clr-bright
 
 @mixin avenir
   color: #333333