Update vanilla framework, remove yui-min.js

sass/core/_core-constants.scss

-@charset "UTF-8";
-/**
- * Ubuntu Patterns Stylesheet
- *
- * The CSS file required by Ubuntu patterns page
- *
- * @project		Ubuntu Patterns
- * @author		Web Team at Canonical Ltd
- * @copyright	2012 Canonical Ltd
- *
- * @see 		http://design.ubuntu.com
- */
-
-/**
- * standard colors
- *
- * @colordef standard colors
- */
-
-/* assets database path */
-$asset-path: "//assets.ubuntu.com/sites/ubuntu/latest/u/img/";
-/* usage: background: url(#{$asset-path}/backgrounds/background.jpg) no-repeat 0 0; */
-
-$ubuntu-orange:			  #dd4814; /* ubuntu orange (used for text links also on any site except canonical) */
-$light-orange:        #fdf6f2; /* used as background on pre text */
-$canonical-aubergine:	#772953; /* canonical aubergine */
-$light-aubergine:		  #77216f; /* light aubergine (consumer) */
-$mid-aubergine:			  #5e2750; /* mid aubergine (both) */
-$dark-aubergine:		  #2c001e; /* dark aubergine (enterprise) */
-$warm-grey:				    #888888; /* warm grey */
-$cool-grey:				    #333333; /* cool grey */
-$light-grey:			    #f7f7f7; /* light grey */
-
-/* notifications */
-$error:					      #df382c; /* red */
-$warning:				      #eca918; /* yellow */
-$success:				      #38b44a; /* green */
-$information:			    #19b6ee; /* cyan */
-
-/* colour coded status - from negative to positive (Icon: canonical circle) */
-$status-red:			    #df382c; /* red, for status that require immediate attention */
-$status-grey:			    #888888; /* grey, for disabled status or ones that don’t require attention */
-$status-yellow:			  #efb73e; /* yellow, for status that require attention */
-$status-blue:			    #19b6ee; /* blue, for status that don’t require action */
-$status-green:			  #38b44a; /* green, for positive status */
-
-/* misc colours */
-$box-solid-grey:		  #efefef;
-$link-color:			    $ubuntu-orange; /* This is the global link color, mainly used for links in content */
-
-/* grid variables */
-$base:					14;
-$gutter-width:	20px;
-$grid-gutter:		20px;
-$gutter:				2.12766%;
-
-$one-col:       6.38297%;
-$two-col:       14.89361%;
-$three-col:     23.40425%;
-$four-col:      31.91489%;
-$five-col:      40.42553%;
-$six-col:       48.93617%;
-$seven-col:     57.4468%;
-$eight-col:     65.95744%;
-$nine-col:      74.46808%;
-$ten-col:       82.97872%;
-$eleven-col:    91.48936%;
-
-$nav-bg:						#f0f0f0;
-$nav-link-color:		#333;
-$nav-border-dark:		#d4d7d4;
-$nav-border-light:	#f2f2f4;
-$nav-hover-bg:      #d0d0d0;
-$nav-active-bg:     #ddd;
-
-$breakpoint-medium: "only screen and (min-width: 768px)";
-
-$breakpoint-large: "only screen and (min-width: 984px)";
+@charset 'UTF-8';
+////
+/// Ubuntu Patterns Stylesheet
+/// The CSS file required by Ubuntu patterns page
+/// @project     Ubuntu Patterns
+/// @author      Web Team at Canonical Ltd
+/// @copyright   2012 Canonical Ltd
+/// @see         http://design.ubuntu.com
+////
 
+/// standard colors
+/// @colordef standard colors
+
+/// assets database path
+/// usage: background: url(#{$asset-path}/backgrounds/background.jpg) no-repeat 0 0;
+$asset-path: '//assets.ubuntu.com/sites/ubuntu/latest/u/img/';
+
+/// transparent to use throughout the site
+$transparent:           transparent !default;
+/// ubuntu orange (used for text links also on any site except canonical)
+$brand-color:          #dd4814 !default;
+/// light-orange - used as background on pre text
+$light-orange:          #fdf6f2 !default;
+/// canonical aubergine
+$canonical-aubergine:   #772953 !default;
+/// light aubergine (consumer)
+$light-aubergine:       #77216f !default;
+/// mid aubergine (both)
+$mid-aubergine:         #5e2750 !default;
+/// dark aubergine (enterprise)
+$dark-aubergine:        #2c001e !default;
+/// warm grey
+$warm-grey:             #888 !default;
+/// cool grey
+$cool-grey:             #333 !default;
+/// mid grey
+$mid-grey:              #dfdcd9 !default;
+/// light grey
+$light-grey:            #f7f7f7 !default;
+/// white
+$white:                 #fff !default;
+/// black
+$black:                 #000 !default;
+/// row background
+$row-background:        #4b1827 !default;
+
+/// red notifications
+$error:                 #df382c !default;
+/// yellow notifications
+$warning:               #eca918 !default;
+/// green notifications
+$success:               #38b44a !default;
+/// cyan notifications
+$information:           #19b6ee !default;
+
+/// red, for status that require immediate attention
+$status-red:            #df382c !default;
+/// grey, for disabled status or ones that don’t require attention
+$status-grey:           #888 !default;
+/// yellow, for status that require attention
+$status-yellow:         #efb73e !default;
+/// blue, for status that don’t require action
+$status-blue:           #19b6ee !default;
+/// green, for positive status
+$status-green:          #38b44a !default;
+
+/// box shadows
+$box-shadow:            #c2c2c2 !default;
+/// code background
+$code-bg:               #fffbeb !default;
+/// table header background
+$table-th:              #fee3d2 !default;
+
+/// box borders
+$box-border:            #dfdcd9 !default;
+
+/// This is the global link color, mainly used for links in content
+$link-color:            $brand-color !default;
+/// Base font colour
+$base-color:            #333 !default;
+
+/// grid variables
+/// base
+$base:              14 !default;
+/// gutter width
+$gutter-width:      20px !default;
+/// grid-gutter
+$grid-gutter:       20px !default;
+/// gutter
+$gutter:            2.12766% !default;
+
+/// one col
+$one-col:           6.38297% !default;
+/// two col
+$two-col:           14.89361% !default;
+/// three col
+$three-col:         23.40425% !default;
+/// four col
+$four-col:          31.91489% !default;
+/// five col
+$five-col:          40.42553% !default;
+/// six col
+$six-col:           48.93617% !default;
+/// seven col
+$seven-col:         57.4468% !default;
+/// eight col
+$eight-col:         65.95744% !default;
+/// nine col
+$nine-col:          74.46808% !default;
+/// ten col
+$ten-col:           82.97872% !default;
+/// eleven col
+$eleven-col:        91.48936% !default;
+
+/// nav background
+$nav-bg:            #f0f0f0 !default;
+/// nav link colour
+$nav-link-color:    #333 !default;
+/// nav border dark
+$nav-border-dark:   #d4d7d4 !default;
+/// nav border light
+$nav-border-light:  #f2f2f4 !default;
+/// nav hover background
+$nav-hover-bg:      #d0d0d0 !default;
+/// nav active background
+$nav-active-bg:     #ddd !default;
+
+/// resource hover
+$resource-hover:    #fafafa !default;
+
+/// resource shadow
+$resource-shadow:   #ddd !default;
+
+/// Medium breakpoint
+$breakpoint-medium: 768px;
+
+/// Large breakpoint
+$breakpoint-large: 984px;
+
+/// Base font size - medium screen
 @media only screen and (min-width : 768px) { $base: 15; }
 
-@media only screen and (min-width: 984px) { $base: 14; }
\ No newline at end of file
+// Base font size - small screen
+@media only screen and (min-width: 984px) { $base: 14; }

sass/core/_core-grid.scss

-@charset "UTF-8";
-/**
- * Ubuntu Core Front-End Framework
- *
- * Grid file part of the Ubuntu Core Front-End Framework
- *
- * This grid is composed by 14 columns (units) separated by 13 gutters (1/3 unit).
- * The first and last column are for padding purposes only.
- * The content fits in the middle 12 columns.
- * Possible divisions: 1 (12 units + 11 gutters), 2 (6 units + 5 gutters),
- * 3 ( 4 units + 3 gutters) and 4 (3 units + 2 gutters).
- *
- * When 1 unit = 60px, 1 gutter = 20px
- *
- * @project		Ubuntu Core Front-End Framework
- * @author		Web Team at Canonical Ltd
- * @copyright	2012 Canonical Ltd
- *
- * @see			http://gridinator.com/
- */
-/**
- * Table of contents
- *
- * Main containers
- * Columns
- * Empty columns
- * Borders
- * Push and pull
- * Verticla gutter
- * Last
- * Clearing
+@charset 'UTF-8';
 
-	one-col			60
-	two-col			140
-	three-col		220
-	four-col		300
-	five-col		380
-	six-col			460
-	seven-col		540
-	eight-col		630
-	nine-col		700
-	ten-col			780
-	eleven-col	860
-	twelve-col	940
+////
 
-*/
+/// Ubuntu Core Front-End Framework
+///
+/// Grid file part of the Ubuntu Core Front-End Framework
+///
+/// This grid is composed by 14 columns (units) separated by 13 gutters (1/3 unit).
+/// The first and last column are for padding purposes only.
+/// The content fits in the middle 12 columns.
+/// Possible divisions: 1 (12 units + 11 gutters), 2 (6 units + 5 gutters),
+/// 3 ( 4 units + 3 gutters) and 4 (3 units + 2 gutters).
+///
+/// When 1 unit = 60px, 1 gutter = 20px
+///
+/// @project    Ubuntu Core Front-End Framework
+/// @author    Web Team at Canonical Ltd
+/// @copyright  2012 Canonical Ltd
+///
+/// @see      http://gridinator.com/
 
-.fake { display: none; }
+/// Table of contents
+///
+/// Main containers
+/// Columns
+/// Empty columns
+/// Borders
+/// Push and pull
+/// Verticla gutter
+/// Last
+/// Clearing
+  
+///  one-col      60
+///  two-col      140
+///  three-col    220
+///  four-col    300
+///  five-col    380
+///  six-col      460
+///  seven-col    540
+///  eight-col    630
+///  nine-col    700
+///  ten-col      780
+///  eleven-col  860
+///  twelve-col  940
+
+////
+
+.fake { 
+  display: none; 
+}
 
 body {
-	font-size: 14px;
+  font-size: 14px;
 }
 
-.one-col, .two-col, .three-col, .four-col, .five-col, .six-col, .seven-col, .eight-col, .nine-col, .ten-col, .eleven-col, .twelve-col, .col {
-	@include box-sizing;
-	clear: none;
-	display: inline-block;
-	float: none;
-	margin-right: $gutter;
-	margin-bottom: 20px;
-	padding: 0;
-	position: relative;
-	width: 100%;
+.one-col, 
+.two-col, 
+.three-col, 
+.four-col, 
+.five-col, 
+.six-col, 
+.seven-col, 
+.eight-col, 
+.nine-col, 
+.ten-col, 
+.eleven-col, 
+.twelve-col, 
+.col {
+  box-sizing: border-box;
+  clear: none;
+  display: inline-block;
+  float: none;
+  margin-bottom: 20px;
+  margin-right: $gutter;
+  padding: 0;
+  position: relative;
+  width: 100%;
 }
 
 .twelve-col {
-	.one-col,
-	.two-col,
-	.three-col,
-	.four-col,
-	.five-col,
-	.six-col,
-	.seven-col,
-	.eight-col,
-	.nine-col,
-	.ten-col,
-	.eleven-col { width: 100%; }
+  .one-col,
+  .two-col,
+  .three-col,
+  .four-col,
+  .five-col,
+  .six-col,
+  .seven-col,
+  .eight-col,
+  .nine-col,
+  .ten-col,
+  .eleven-col { 
+    width: 100%; 
+  }
 }
 
-.last-col, .last { margin-right: 0; }
+.last-col, 
+.last { 
+  margin-right: 0; 
+}
 
-/**
- * Clearing
- *
- * Hard and soft clearing classes
- *
- * @section clearing
- */
+// Clearing
+// Hard and soft clearing classes
+// @section clearing
 
-.clearfix:after, .container:after {
+
+.clearfix:after,
+.container:after {
   clear: both;
-  content: "\0020";
+  content: '\0020';
   display: block;
   height: 0;
-  overflow:hidden;
+  overflow: hidden;
   visibility: hidden;
 }
 
-.clear { clear: both; }
-.clearfix { display: block; }
+.clear { 
+  clear: both; 
+}
 
+.clearfix { 
+  display: block; 
+}

sass/core/_core-mixins.scss

-/**
- * mixins
- *
- * @section mixins
- */
+////
+/// Mixins
+/// @section mixins
+////
 
+/// font size, default 16
 @mixin font-size ($size: 16) {
   font-size: ($size / $base)+em;
   margin-bottom: (12 / $size)+em;
 }
 
-@mixin box-sizing ($type: border-box) {
-	-webkit-box-sizing: $type;
-	-moz-box-sizing:    $type;
-	box-sizing:         $type;
-}
-
-@mixin rounded-corners($radius: 4px 4px 4px 4px) {
-  -webkit-border-radius: $radius;
-  -moz-border-radius: $radius;
-  border-radius: $radius;
-}
-
-@mixin box-shadow($shadow...) {
-  -moz-box-shadow: $shadow;
-  -webkit-box-shadow: $shadow;
-  box-shadow: $shadow;
-}
-
-@mixin gradient($from, $to) {
-  background-color: $to;
-  background-image: -moz-linear-gradient($from, $to);
-  background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from($from), to($to));
-  background-image: -webkit-linear-gradient($from, $to);
-  background-image: -o-linear-gradient($from, $to);
-}
-
+/// footer styles with parameterised backgrond image
 @mixin footer($background) {
   padding: $gutter-width $two-col $gutter-width $four-col;
   margin-bottom: 0;
-  background: url($background) no-repeat scroll $one-col center #F7F7F7;
+  background: url($background) no-repeat scroll $one-col center $light-grey;
 }
 
+/// clearfix
 @mixin clearfix() {
-  *zoom:1;
-
   &:before,
   &:after {
-      content:"";
-      display:table;
+    content: '';
+    display: table;
   }
+
   &:after {
-      clear:both;
+    clear: both;
   }
 }
-
-// CSS3 colunms
-@mixin columns($num: 3, $gap: 20) {
-  -moz-column-count: $num;
-  -moz-column-gap: ($gap / $base)em;
-  -webkit-column-count: $num;
-  -webkit-column-gap: ($gap / $base)em;
-  column-count: $num;
-  column-gap: ($gap / $base)em;
-}
-
-// background-size
-@mixin background-size($size: 100% 100%) {
-  -moz-background-size: $size;
-  -webkit-background-size: $size;
-  -o-background-size: $size;
-  background-size: $size;
-}
-
-// transitions
-@mixin transition($properties: all, $duration: .5s, $method: ease-out) {
-    -webkit-transition: $properties $duration $method;
-    -moz-transition: $properties $duration $method;
-    -ms-transition: $properties $duration $method;
-    -o-transition: $properties $duration $method;
-    transition: $properties $duration $method;
-}
-// usage: @include transition(all, 0.3s, ease-in-out);
\ No newline at end of file

sass/core/_core-templates.scss

-@charset "UTF-8";
+@charset 'UTF-8';
 
-@import "core-constants";
-@import "core-mixins";
+@import 'core-constants';
+@import 'core-mixins';
 
-/**
- * Ubuntu Super Patterns Stylesheet
- *
- * Contains audience related themes for site-wide application
- *
- * @project		Ubuntu Patterns
- * @author		Web Team at Canonical Ltd
- * @copyright	2012 Canonical Ltd
- *
- */
-
-/**
- * Audience specific
- *
- * @section audience
- */
-
-/* Voice */
-.voice-community { }
-.voice-canonical { }
-.voice-community.voice-canonical { }
-
-/*
- * Consumer
- */
-
-.audience-consumer{
-  color: $cool-grey;
-
-  .row-box, .main-content {
-    color: $cool-grey;
-  }
-
-  .inner-wrapper {
-    background: #fff;
-  }
-
-  .quote-right-top {
-    padding: 60px 60px 0 40px;
-    background: url("/sites/ubuntu/latest/u/img/patterns/quote-orange-br-287x287.png") no-repeat;
-    height: 287px;
-    position: absolute;
-    right:  -($gutter-width * 2);
-    text-align: left;
-    top: -($gutter-width * 4.5);
-    width: $four-col;
-
-    p {
-      @include font-size (16);
-      margin: (1.538em / 2);
-      padding-bottom: 0;
-      color: #fff;
-
-      cite {
-        @include font-size (12);
-        color: #fff;
-        padding: 0;
-      }
-    }
-  }
-  .quote-right-top p a,
-  .quote-right p a { color: #fff; }
-  .quote-right {
-    @include font-size (18);
-    color: #fff;
-    padding: 50px 100px 0 50px;
-    text-indent: -6px;
-    background: url("/sites/ubuntu/latest/u/img/patterns/quote-orange-bl-287x287.png") no-repeat;
-    min-height: 287px;
-    position: absolute;
-    right:  -$gutter-width;
-    text-align: left;
-    top: -($gutter-width * 4.5);
-    width: $four-col -(150/$base)em;
-
-    cite {
-      font-style: normal;
-      margin-left: 6px;
-    }
-  }
-  .quote-right-alt {
-    background: url(/sites/ubuntu/latest/u/img/patterns/quote-white-br-360x360.png) 0 -100px no-repeat;
-    color: $ubuntu-orange;
-    padding: 50px 50px 0 50px;
-  }
-  .quote-right-right { background: url("/sites/ubuntu/latest/u/img/patterns/quote-orange-br-287x287.png") no-repeat; }
-}
-
-/*
- * Enterprise
- */
-
-.audience-enterprise {
-
-  h1 { margin: 0 0 18px 0; }
-  td{ background: #fff; }
-
-  th, td {
-    padding: 6px 10px;
-    background: #fff;
-  }
-  th[scope="col"] {
-    background: #E2D4DC;
-    color: $canonical-aubergine;
-  }
-  tbody th[rowspan] { background: #F7F2F6; }
-  tfoot th[rowspan] { background: #dfdcd9; }
-  tfoot td, tfoot th {
-    font-weight: normal;
-    background: #dfdcd9;
-  }
-  .inner-wrapper {
-    background: $dark-aubergine;
-	  color: #fff;
-	}
-	.row-box {
-    background: #fff;
-    color: $cool-grey;
-  }
-  /*.row-quote {
-    background: none repeat scroll 0 0 #E2D4DC;
-    color: #772953;
-    margin-left: -1.125em;
-    padding-top: 1.25em;
-    width: 58.75em;
-  }
-  .row-quote blockquote,
-  .row-quote blockquote p {
-    color: inherit;
-    font-size: 1.313em;
-    margin: 0 0.563em;
-    padding: 0;
-    top: auto;
-    width: auto;
-  }
-  .row-quote blockquote p {
-    line-height: 1.3;
-    text-indent: -12px;
-  }
-  .row-quote blockquote cite {
-    @include font-size (12);
-    color: #656565;
-    font-style: normal;
-    margin-left: 12px;
-    text-indent: 0;
-  }*/
-}
+////
+/// Ubuntu Super Patterns Stylesheet
+/// Contains audience related themes for site-wide application
+/// @project    Ubuntu Patterns
+/// @author   Web Team at Canonical Ltd
+/// @copyright  2012 Canonical Ltd
+////
 
 .row-enterprise {
+  border-radius: 0;
   background: $canonical-aubergine;
-  color:#fff;
-  @include rounded-corners(0);
+  color: $white;
 
-  .box, div {
+  .box,
+  div {
     background: $canonical-aubergine;
-    color:#fff;
+    color: $white;
   }
+
   a {
-    color:#fff;
+    color: $white;
   }
 }
-/*
-.audience-consumer.audience-enterprise{
-
-  .inner-wrapper {
-    background: $mid-aubergine;
-    color: #fff;
-  }
-
-  .row-box,
-  .main-content {
-    background: #fff;
-    color: $cool-grey;
-  }
 
+.enterprise-dot-pattern {
+  background: url('/sites/ubuntu/latest/u/img/patterns/enterprise-dot-pattern.png');
 }
-*/
 
-.enterprise-dot-pattern { background:url('/sites/ubuntu/latest/u/img/patterns/enterprise-dot-pattern.png') }
-.developer-dot-pattern { background:url('/sites/ubuntu/latest/u/img/patterns/developer-dot-pattern.png') }
\ No newline at end of file
+.developer-dot-pattern {
+  background: url('/sites/ubuntu/latest/u/img/patterns/developer-dot-pattern.png');
+}

sass/core/core-print.scss

-@charset "UTF-8";
-/**
- * Ubuntu print Stylesheet
- *
- *
- * @project		Ubuntu Patterns
- * @author		Web Team at Canonical Ltd
- * @copyright	2012 Canonical Ltd
- *
- */
-
-* { background: #fff; color: #000; }
+@charset 'UTF-8';
+////
+/// Ubuntu print Stylesheet
+
+/// @project Ubuntu Patterns
+/// @author Web Team at Canonical Ltd
+/// @copyright 2012 Canonical Ltd
+
+////
+
+@import 'core-constants';
+
+* {
+  background: $white;
+  color: $black;
+}
 
 body {
-	background: white;
-	font-size: 16pt;
-	line-height: 1.5;
+  background: $white;
+  font-size: 16pt;
+  line-height: 1.5;
 }
 
-a:link, a:visited {
-	color: #898989;
-	background: transparent;
-	font-weight: bold;
-	text-decoration: underline;
+a:link,
+a:visited {
+  background: transparent;
+  color: $warm-grey;
+  font-weight: bold;
+  text-decoration: underline;
 }
 
 nav,
-#box-search,
 .cookie-policy,
 .link-top,
 footer {
-	display: none;
+  display: none;
 }
 
-nav.nav-secondary {
-	display: block;
+.nav-secondary {
+  display: block;
 }
 
 .wrapper {
-	width: auto;
-	margin: 0 5%;
-	padding: 0;
-	padding-top: 1em;
-	float: none !important;
+  float: none;
+  margin: 0 5%;
+  padding-top: 1em;
+  width: auto;
 }
-
-
-

sass/core/patterns/_arrows.scss

@@ -40,19 +40,11 @@
 
 div > .arrow-left { left: -10px; }
 
-@media only screen and (max-width : 768px) {
-
-} // end @media only screen and (max-width : 768px)
-
 @media only screen and (min-width : 769px) {
 
-  html.yui3-js-enabled .arrow {
+  .yui3-js-enabled .arrow {
     visibility: visible;
   }
 
 } // @media only screen and (min-width : 769px)
 
-@media only screen and (min-width: 984px) {
-
-} // end @media only screen and (min-width: 984px)
-

sass/core/patterns/_buttons.scss

 @charset 'UTF-8';
-
-a.link-cta-ubuntu,
-a.link-cta-canonical,
-a.link-cta-inverted,
-button.cta-ubuntu,
-button.cta-canonical,
-form button[type="submit"],
-form input[type="submit"] {
-	@include box-sizing();
-	@include font-size (16);
-	@include rounded-corners(3px);
-	background: $ubuntu-orange;
-	color: #fff;
-	text-decoration: none;
-	display: inline-block;
-	margin: 0;
-	font-family: Ubuntu, Arial, 'libra sans', sans-serif;
-	font-weight: 300;
-	-webkit-font-smoothing: subpixel-antialiased;
-	-moz-font-smoothing: subpixel-antialiased;
-	-o-font-smoothing: subpixel-antialiased;
-	font-smoothing: subpixel-antialiased;
-	padding: 8px 14px;
-	width: 100%;
-	text-align: center;
+////
+/// Ubuntu Patterns Stylesheet
+/// The CSS file required by Ubuntu patterns page
+/// @project     Ubuntu Patterns
+/// @author      Web Team at Canonical Ltd
+/// @copyright   2012 Canonical Ltd
+/// @see         http://design.ubuntu.com
+////
+
+/// cta button
+.link-cta-ubuntu,
+.link-cta-canonical,
+.link-cta-inverted,
+.cta-ubuntu,
+.cta-canonical,
+form [type="submit"] {
+  @include font-size (16);
+  box-sizing: border-box;
+  border-radius: 3px;
+  border: 0;
+  background: $brand-color;
+  color: $white;
+  text-decoration: none;
+  display: inline-block;
+  margin: 0;
+  outline: none;
+  font-family: Ubuntu, Arial, 'libra sans', sans-serif;
+  font-weight: 300;
+  font-smoothing: subpixel-antialiased;
+  padding: 8px 14px;
+  width: 100%;
+  text-align: center;
+
+  /// cta hover state
+  &:hover {
+    background: darken($base-color, 6.2%); // #c03f11
+    text-decoration: none;
+  }
 }
 
-a.cta-large,
-button.cta-large {
-	@include font-size (18);
-	padding: 10px 20px;
+/// cta large button
+.cta-large,
+.cta-large {
+  @include font-size (18);
+  padding: 10px 20px;
 }
 
-a.link-cta-canonical,
-button.cta-canonical,
-form button.cta-canonical[type="submit"],
-form input.cta-canonical[type="submit"] {
-	background: $canonical-aubergine;
-	color: #fff;
+/// Canonical cta colours
+.link-cta-canonical,
+.cta-canonical,
+form .cta-canonical[type="submit"],
+form .cta-canonical[type="submit"] {
+  background: $canonical-aubergine;
+  color: $white;
+
+  &:hover {
+    background: darken($canonical-aubergine, 6.2%); // #5f193e
+    text-decoration: none;
+  }
 }
 
-a.link-cta-inverted,
-button.cta-inverted {
-	background: #fff;
-	color: $cool-grey;
+/// Inverted colour style
+.link-cta-inverted,
+.cta-inverted {
+  background: $white;
+  color: $base-color;
+
+  &:hover {
+    background: $white;
+    text-decoration: underline;
+  }
 }
 
-.row-enterprise a.link-cta-canonical,
-.row-enterprise button.link-cta-canonical {
-  background: #fff;
+/// Enterprise cta colour style
+.row-enterprise .link-cta-canonical,
+.row-enterprise .link-cta-canonical {
+  background: $white;
   color: $canonical-aubergine;
-}
 
-a.link-cta-ubuntu:hover,
-a.link-cta-ubuntu:hover,
-button.cta-ubuntu:hover,
-form button[type="submit"]:hover,
-form input[type="submit"]:hover {
-	background: darken($ubuntu_orange, 6.2%); // #c03f11
-	text-decoration: none;
+  &:hover {
+    background: $white;
+    text-decoration: underline;
+  }
 }
 
-a.link-cta-canonical:hover,
-button.cta-canonical:hover {
-	background: darken($canonical-aubergine, 6.2%); // #5f193e
-  text-decoration: none;
+/// cta deactived style
+.cta-deactivated,
+.cta-deactivated:hover {
+  background: $cool-grey;
+  color: $white;
+  cursor: not-allowed;
 }
 
-a.link-cta-inverted:hover,
-.row-enterprise a.link-cta-canonical:hover,
-button.cta-inverted:hover,
-.row-enterprise button.cta-canonical:hover {
-  background: #fff;
-  text-decoration: underline;
+/// Medium breakpoint
+@media only screen and (min-width : 768px)  {
+  .link-cta-ubuntu,
+  .link-cta-canonical,
+  .link-cta-inverted,
+  .cta-ubuntu,
+  .cta-canonical,
+  form [type="submit"] {
+    width: auto;
+  }
 }
 
-a.cta-deactivated,
-a.cta-deactivated:hover,
-button.cta-deactivated,
-button.cta-deactivated:hover {
-  background: $box-solid-grey;
-  color: #fff;
-  cursor: not-allowed;
+/// Large breakpoint
+@media only screen and (min-width : 984px)  {
+  .link-cta-ubuntu,
+  .link-cta-canonical,
+  .link-cta-inverted,
+  .cta-ubuntu,
+  .cta-canonical,
+  form [type="submit"] {
+    width: auto;
+  }
 }
-
-@media only screen and (min-width : 768px) {
-
-	a.link-cta-ubuntu,
-	a.link-cta-canonical,
-	a.link-cta-inverted,
-	button.cta-ubuntu,
-	button.cta-canonical,
-	form button[type="submit"],
-	form input[type="submit"] {
-	  width: auto;
-	}
-
-} // end @media only screen and (max-width : 768px)
-
-@media only screen and (min-width : 769px) {
-} // @media only screen and (min-width : 769px)
-
-@media only screen and (min-width: 984px) {
-
-	a.link-cta-ubuntu,
-	a.link-cta-canonical,
-	a.link-cta-inverted,
-	button.cta-ubuntu,
-	button.cta-canonical,
-	form button[type="submit"],
-	form input[type="submit"] {
-	  width: auto;
-	}
-
-} // end @media only screen and (min-width: 984px)