Repo restructure
This commit is contained in:
		@@ -1,50 +0,0 @@
 | 
			
		||||
/*
 | 
			
		||||
* Ribs
 | 
			
		||||
* Skeleton is Copyright 2011, Dave Gamache
 | 
			
		||||
*
 | 
			
		||||
* Ribs is the evolution of Skeleton by Nick Pack
 | 
			
		||||
* Free to use under the MIT license.
 | 
			
		||||
* http://www.opensource.org/licenses/mit-license.php
 | 
			
		||||
*/
 | 
			
		||||
 | 
			
		||||
@import "_variables";
 | 
			
		||||
@import "normalize/_normalize";
 | 
			
		||||
@import "_mixins";
 | 
			
		||||
 | 
			
		||||
body {
 | 
			
		||||
  background: #fff;
 | 
			
		||||
  font: 14px/21px $body_font_family;
 | 
			
		||||
  color: #444;
 | 
			
		||||
  -webkit-text-size-adjust: 100%;
 | 
			
		||||
  -ms-text-size-adjust: 100%;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
hr {
 | 
			
		||||
  border: $hr_border;
 | 
			
		||||
  border-width: $hr_border_width;
 | 
			
		||||
  clear: both;
 | 
			
		||||
  margin: $hr_margin;
 | 
			
		||||
  height: 0;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
@import "_grid";
 | 
			
		||||
@import "_typography";
 | 
			
		||||
@import "_links";
 | 
			
		||||
@import "_lists";
 | 
			
		||||
@import "_forms";
 | 
			
		||||
@import "_images";
 | 
			
		||||
 | 
			
		||||
// Smaller than standard 960 (devices and browsers)
 | 
			
		||||
@media only screen and (max-width: 959px) {}
 | 
			
		||||
 | 
			
		||||
// Tablet Portrait size to standard 960 (devices and browsers)
 | 
			
		||||
@media only screen and (min-width: 768px) and (max-width: 959px) {}
 | 
			
		||||
 | 
			
		||||
// All Mobile Sizes (devices and browser)
 | 
			
		||||
@media only screen and (max-width: 767px) {}
 | 
			
		||||
 | 
			
		||||
// Mobile Landscape Size to Tablet Portrait (devices and browsers)
 | 
			
		||||
@media only screen and (min-width: 480px) and (max-width: 767px) {}
 | 
			
		||||
 | 
			
		||||
// Mobile Portrait Size to Mobile Landscape Size (devices and browsers)
 | 
			
		||||
@media only screen and (max-width: 479px) {}
 | 
			
		||||
							
								
								
									
										141
									
								
								scss/_forms.scss
									
									
									
									
									
								
							
							
						
						
									
										141
									
								
								scss/_forms.scss
									
									
									
									
									
								
							@@ -1,141 +0,0 @@
 | 
			
		||||
// #Buttons
 | 
			
		||||
// ==================================================
 | 
			
		||||
.button,
 | 
			
		||||
button,
 | 
			
		||||
input[type="submit"],
 | 
			
		||||
input[type="reset"],
 | 
			
		||||
input[type="button"] {
 | 
			
		||||
  @include vertical-gradient($form_button_gradient_start, $form_button_gradient_end);
 | 
			
		||||
  @include button_border($form_button_border_rightbottom, $form_button_border_topleft);
 | 
			
		||||
  @include border-radius($form_button_border_radius);
 | 
			
		||||
  color: $form_button_text_colour;
 | 
			
		||||
  display: inline-block;
 | 
			
		||||
  font-size: $form_button_font_size;
 | 
			
		||||
  font-weight: bold;
 | 
			
		||||
  text-decoration: none;
 | 
			
		||||
  text-shadow: $form_button_text_shadow;
 | 
			
		||||
  cursor: pointer;
 | 
			
		||||
  margin: $form_input_margin;
 | 
			
		||||
  line-height: $form_button_line_height;
 | 
			
		||||
  padding: $form_button_padding;
 | 
			
		||||
  font-family: $form_element_font;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.button:hover,
 | 
			
		||||
button:hover,
 | 
			
		||||
input[type="submit"]:hover,
 | 
			
		||||
input[type="reset"]:hover,
 | 
			
		||||
input[type="button"]:hover {
 | 
			
		||||
  @include vertical-gradient($form_button_hover_gradient_start, $form_button_hover_gradient_end);
 | 
			
		||||
  color: $form_button_hover_text_colour;
 | 
			
		||||
  @include button_border($form_button_hover_border_rightbottom, $form_button_hover_border_topleft);
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.button:active,
 | 
			
		||||
button:active,
 | 
			
		||||
input[type="submit"]:active,
 | 
			
		||||
input[type="reset"]:active,
 | 
			
		||||
input[type="button"]:active {
 | 
			
		||||
  @include vertical-gradient($form_button_active_gradient_start, $form_button_active_gradient_end);
 | 
			
		||||
  border: $form_button_active_border;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.button .full-width,
 | 
			
		||||
button.full-width,
 | 
			
		||||
input[type="submit"].full-width,
 | 
			
		||||
input[type="reset"].full-width,
 | 
			
		||||
input[type="button"].full-width {
 | 
			
		||||
  width: 100%;
 | 
			
		||||
  padding-left: 0;
 | 
			
		||||
  padding-right: 0;
 | 
			
		||||
  text-align: center;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
// Fix for odd Mozilla border & padding issues
 | 
			
		||||
button::-moz-focus-inner,
 | 
			
		||||
input::-moz-focus-inner {
 | 
			
		||||
  border: 0;
 | 
			
		||||
  padding: 0;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
// #Forms
 | 
			
		||||
// ==================================================
 | 
			
		||||
 | 
			
		||||
form {
 | 
			
		||||
  margin: $form_fieldset_margin;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
fieldset {
 | 
			
		||||
  margin: $form_fieldset_margin;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
input[type="search"],
 | 
			
		||||
input[type="url"] {
 | 
			
		||||
  -webkit-appearance: textfield;
 | 
			
		||||
  -moz-appearance: textfield; 
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
input[type="text"],
 | 
			
		||||
input[type="password"],
 | 
			
		||||
input[type="email"],
 | 
			
		||||
input[type="search"],
 | 
			
		||||
input[type="url"],
 | 
			
		||||
input[type="number"],
 | 
			
		||||
input[type="tel"],
 | 
			
		||||
textarea,
 | 
			
		||||
select {
 | 
			
		||||
  border: $form_input_border;
 | 
			
		||||
  padding: $form_input_padding;
 | 
			
		||||
  @include border-radius($form_input_border_radius);
 | 
			
		||||
  font: $form_input_font_size $form_element_font;
 | 
			
		||||
  color: $form_input_text_colour;
 | 
			
		||||
  width: $form_input_width;
 | 
			
		||||
  max-width: 100%;
 | 
			
		||||
  display: block;
 | 
			
		||||
  margin: $form_input_margin;
 | 
			
		||||
  background: $form_input_background;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
select {
 | 
			
		||||
  padding: $form_input_select_padding;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
input[type="text"]:focus,
 | 
			
		||||
input[type="password"]:focus,
 | 
			
		||||
input[type="email"]:focus,
 | 
			
		||||
input[type="search"]:focus,
 | 
			
		||||
input[type="url"]:focus,
 | 
			
		||||
input[type="number"]:focus,
 | 
			
		||||
input[type="tel"]:focus,
 | 
			
		||||
textarea:focus {
 | 
			
		||||
  border: $form_input_focus_border;
 | 
			
		||||
  color: $form_input_focus_text_colour;
 | 
			
		||||
  outline: $form_input_focus_outline;
 | 
			
		||||
  @include box-shadow($form_input_focus_box_shadow_x, $form_input_focus_box_shadow_y, $form_input_focus_box_shadow_blur, $form_input_focus_box_shadow_colour)
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
textarea {
 | 
			
		||||
  min-height: $form_textarea_min_height;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
label,
 | 
			
		||||
legend {
 | 
			
		||||
  display: block;
 | 
			
		||||
  font-weight: $legend_font_weight;
 | 
			
		||||
  font-size: $legend_font_size;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
select {
 | 
			
		||||
  width: $form_input_select_width;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
input[type="checkbox"] {
 | 
			
		||||
  display: $form_input_checkbox_display;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
label span,
 | 
			
		||||
legend span {
 | 
			
		||||
  font-weight: normal;
 | 
			
		||||
  font-size: $form_input_font_size;
 | 
			
		||||
  color: $form_label_legend_colour;
 | 
			
		||||
}
 | 
			
		||||
							
								
								
									
										117
									
								
								scss/_grid.scss
									
									
									
									
									
								
							
							
						
						
									
										117
									
								
								scss/_grid.scss
									
									
									
									
									
								
							@@ -1,117 +0,0 @@
 | 
			
		||||
.container {
 | 
			
		||||
  position: relative;
 | 
			
		||||
  margin: 0 auto;
 | 
			
		||||
  padding: 0;
 | 
			
		||||
  & .alpha { margin-left: 0; }
 | 
			
		||||
  & .omega { margin-right: 0; }
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.column, .columns {
 | 
			
		||||
  float: left;
 | 
			
		||||
  margin-left: $gutter/2;
 | 
			
		||||
  margin-right: $gutter/2;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.alpha-omega {
 | 
			
		||||
  margin-right: 0;
 | 
			
		||||
  margin-left: 0;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.row { margin-bottom: $gutter; }
 | 
			
		||||
 | 
			
		||||
@include grid($desktop-container-width, $column-count, $gutter);
 | 
			
		||||
 | 
			
		||||
//-----------------------------------------------------------------------
 | 
			
		||||
// #Tablet
 | 
			
		||||
@media only screen and (max-width: 959px) {
 | 
			
		||||
  @include grid($tablet-container-width, $column-count, $gutter);
 | 
			
		||||
 | 
			
		||||
  .container { 
 | 
			
		||||
    width: $tablet-container-width; 
 | 
			
		||||
    & .alpha { margin-right: 10px; }
 | 
			
		||||
    & .omega { margin-left: 10px; }
 | 
			
		||||
  }
 | 
			
		||||
}
 | 
			
		||||
//--------------------------------------------------------------------
 | 
			
		||||
// #Mobile
 | 
			
		||||
@media only screen and (max-width: 767px) {
 | 
			
		||||
  .container {
 | 
			
		||||
    width: $mobile-container-width;
 | 
			
		||||
    & .one,
 | 
			
		||||
    & .two,
 | 
			
		||||
    & .three,
 | 
			
		||||
    & .four,
 | 
			
		||||
    & .five,
 | 
			
		||||
    & .six,
 | 
			
		||||
    & .seven,
 | 
			
		||||
    & .eight,
 | 
			
		||||
    & .nine,
 | 
			
		||||
    & .ten,
 | 
			
		||||
    & .eleven,
 | 
			
		||||
    & .twelve,
 | 
			
		||||
    & .thirteen,
 | 
			
		||||
    & .fourteen,
 | 
			
		||||
    & .fifteen,
 | 
			
		||||
    & .sixteen,
 | 
			
		||||
    & .one-third,
 | 
			
		||||
    & .two-thirds,
 | 
			
		||||
    & .one-half,
 | 
			
		||||
    & .one-quarter,
 | 
			
		||||
    & .three-quarters 
 | 
			
		||||
    { width: $mobile-column-width; }
 | 
			
		||||
 | 
			
		||||
    .column, .columns {
 | 
			
		||||
      margin: 0;
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    .offset-by-one,
 | 
			
		||||
    .offset-by-two,
 | 
			
		||||
    .offset-by-three,
 | 
			
		||||
    .offset-by-four,
 | 
			
		||||
    .offset-by-five,
 | 
			
		||||
    .offset-by-six,
 | 
			
		||||
    .offset-by-seven,
 | 
			
		||||
    .offset-by-eight,
 | 
			
		||||
    .offset-by-nine,
 | 
			
		||||
    .offset-by-ten,
 | 
			
		||||
    .offset-by-eleven,
 | 
			
		||||
    .offset-by-twelve,
 | 
			
		||||
    .offset-by-thirteen,
 | 
			
		||||
    .offset-by-fourteen,
 | 
			
		||||
    .offset-by-fifteen { padding-left: 0; }
 | 
			
		||||
  }
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
// #Clearing
 | 
			
		||||
// ==================================================
 | 
			
		||||
 | 
			
		||||
.container:after { content: "\0020"; display: block; height: 0; clear: both; visibility: hidden; }
 | 
			
		||||
 | 
			
		||||
// Use clearfix class on parent to clear nested columns,
 | 
			
		||||
// or wrap each row of columns in a <div class="row">
 | 
			
		||||
.clearfix:before,
 | 
			
		||||
.clearfix:after,
 | 
			
		||||
.row:before,
 | 
			
		||||
.row:after {
 | 
			
		||||
  content: '\0020';
 | 
			
		||||
  display: block;
 | 
			
		||||
  overflow: hidden;
 | 
			
		||||
  visibility: hidden;
 | 
			
		||||
  width: 0;
 | 
			
		||||
  height: 0; }
 | 
			
		||||
  .row:after,
 | 
			
		||||
  .clearfix:after {
 | 
			
		||||
    clear: both; }
 | 
			
		||||
    .row,
 | 
			
		||||
    .clearfix {
 | 
			
		||||
      zoom: 1; }
 | 
			
		||||
 | 
			
		||||
// You can also use a <br class="clear" /> to clear columns
 | 
			
		||||
.clear {
 | 
			
		||||
  clear: both;
 | 
			
		||||
  display: block;
 | 
			
		||||
  overflow: hidden;
 | 
			
		||||
  visibility: hidden;
 | 
			
		||||
  width: 0;
 | 
			
		||||
  height: 0;
 | 
			
		||||
}
 | 
			
		||||
@@ -1,7 +0,0 @@
 | 
			
		||||
// #Images
 | 
			
		||||
// ==================================================
 | 
			
		||||
 | 
			
		||||
.scale-with-grid {
 | 
			
		||||
  max-width: 100%;
 | 
			
		||||
  height: auto;
 | 
			
		||||
}
 | 
			
		||||
@@ -1,16 +0,0 @@
 | 
			
		||||
// #Links
 | 
			
		||||
// ==================================================
 | 
			
		||||
a, a:visited {
 | 
			
		||||
  color: $link_colour;
 | 
			
		||||
  text-decoration: $link_decoration;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
a:hover, a:focus {
 | 
			
		||||
  color: $link_hover_colour;
 | 
			
		||||
  text-decoration: $link_hover_decoration;
 | 
			
		||||
  outline: $link_outline;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
p a, p a:visited {
 | 
			
		||||
  line-height: inherit;
 | 
			
		||||
}
 | 
			
		||||
@@ -1,48 +0,0 @@
 | 
			
		||||
// #Lists
 | 
			
		||||
// ==================================================
 | 
			
		||||
ul, ol {
 | 
			
		||||
  margin: $list_margin;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
ul {
 | 
			
		||||
  list-style: $ul_list_style;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
ol {
 | 
			
		||||
  list-style: $ol_list_style;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
ol, ul.square, ul.circle, ul.disc {
 | 
			
		||||
  margin: $list_styled_margin;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
ul.square {
 | 
			
		||||
  list-style: square $list_styled_position;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
ul.circle {
 | 
			
		||||
  list-style: circle $list_styled_position;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
ul.disc {
 | 
			
		||||
  list-style: disc $list_styled_position;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
ul ul, ul ol,
 | 
			
		||||
ol ol, ol ul {
 | 
			
		||||
  margin: $nested_list_margin;
 | 
			
		||||
  font-size: $nested_list_font_size;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
li {
 | 
			
		||||
  line-height: $list_item_line_height;
 | 
			
		||||
  margin: $list_item_margin;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.large li {
 | 
			
		||||
  line-height: $list_large_line_height;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
li p {
 | 
			
		||||
  line-height: $list_item_paragraph_line_height;
 | 
			
		||||
}
 | 
			
		||||
@@ -1,172 +0,0 @@
 | 
			
		||||
@mixin button_border($rightbottom, $topleft) {
 | 
			
		||||
  border: $rightbottom;
 | 
			
		||||
  border-top: $topleft;
 | 
			
		||||
  border-left: $topleft;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
@mixin col-count($colCount, $colSpacing) {
 | 
			
		||||
  -webkit-column-count: $colCount;
 | 
			
		||||
  -webkit-column-gap: $colSpacing;
 | 
			
		||||
  -moz-column-count: $colCount;
 | 
			
		||||
  -moz-column-gap: $colSpacing;
 | 
			
		||||
  column-count: $colCount;
 | 
			
		||||
  column-gap: $colSpacing;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
@mixin size($height, $width) {
 | 
			
		||||
  height: $height;
 | 
			
		||||
  width: $width;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
@mixin square($size) {
 | 
			
		||||
  @include size($size, $size);
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
@mixin border-radius($radius) {
 | 
			
		||||
  -webkit-border-radius: $radius;
 | 
			
		||||
  -moz-border-radius: $radius;
 | 
			
		||||
  border-radius: $radius;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
@mixin border-top-left-radius($radius) {
 | 
			
		||||
  -webkit-border-top-left-radius: $radius;
 | 
			
		||||
  -moz-border-radius-topleft: $radius;
 | 
			
		||||
  border-top-left-radius: $radius;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
@mixin border-top-right-radius($radius) {
 | 
			
		||||
  -webkit-border-top-right-radius: $radius;
 | 
			
		||||
  -moz-border-radius-topright: $radius;
 | 
			
		||||
  border-top-right-radius: $radius;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
@mixin border-bottom-right-radius($radius) {
 | 
			
		||||
  -webkit-border-bottom-right-radius: $radius;
 | 
			
		||||
  -moz-border-radius-bottomright: $radius;
 | 
			
		||||
  border-bottom-right-radius: $radius;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
@mixin border-bottom-left-radius($radius) {
 | 
			
		||||
  -webkit-border-bottom-left-radius: $radius;
 | 
			
		||||
  -moz-border-radius-bottomleft: $radius;
 | 
			
		||||
  border-bottom-left-radius: $radius;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
@mixin border-top-radius($radius) {
 | 
			
		||||
  @include border-top-right-radius($radius);
 | 
			
		||||
  @include border-top-left-radius($radius);
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
@mixin border-right-radius($radius) {
 | 
			
		||||
  @include border-top-right-radius($radius);
 | 
			
		||||
  @include border-bottom-right-radius($radius);
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
@mixin border-bottom-radius($radius) {
 | 
			
		||||
  @include border-bottom-right-radius($radius);
 | 
			
		||||
  @include border-bottom-left-radius($radius);
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
@mixin border-left-radius($radius) {
 | 
			
		||||
  @include border-top-left-radius($radius);
 | 
			
		||||
  @include border-bottom-left-radius($radius);
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
@mixin background-size($size){
 | 
			
		||||
  -webkit-background-size: $size;
 | 
			
		||||
  -moz-background-size: $size;
 | 
			
		||||
  -o-background-size: $size;
 | 
			
		||||
  background-size: $size;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
@mixin box-sizing($boxsize) {
 | 
			
		||||
  -webkit-box-sizing: $boxsize;
 | 
			
		||||
  -moz-box-sizing: $boxsize;
 | 
			
		||||
  -ms-box-sizing: $boxsize; 
 | 
			
		||||
  -o-box-sizing: $boxsize; 
 | 
			
		||||
  -khtml-box-sizing: $boxsize;
 | 
			
		||||
  box-sizing: $boxsize;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
@mixin horizontal-gradient($startColour, $endColour) {
 | 
			
		||||
  background-color: $fallback_hex_gradient_bg;
 | 
			
		||||
  background-image: linear-gradient(to right, $startColour, $endColour);
 | 
			
		||||
  background-image: -webkit-gradient(linear, 0 0, 100% 0, from($startColour), to($endColour));
 | 
			
		||||
  background-image: -webkit-linear-gradient(left, $startColour, $endColour);
 | 
			
		||||
  background-image: -moz-linear-gradient(left, $startColour, $endColour);
 | 
			
		||||
  background-image: -o-linear-gradient(left, $startColour, $endColour);
 | 
			
		||||
  background-repeat: repeat-x;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
@mixin vertical-gradient($startColour, $endColour) {
 | 
			
		||||
  background-color: $fallback_hex_gradient_bg;
 | 
			
		||||
  background-color: mix($startColour, $endColour, 60%);
 | 
			
		||||
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from($startColour), to($endColour));
 | 
			
		||||
  background-image: -webkit-linear-gradient(top, $startColour, $endColour);
 | 
			
		||||
  background-image: -moz-linear-gradient(top, $startColour, $endColour);
 | 
			
		||||
  background-image: -o-linear-gradient(top, $startColour, $endColour);
 | 
			
		||||
  background-image: linear-gradient(to bottom, $startColour, $endColour);
 | 
			
		||||
  background-repeat: repeat-x;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
@mixin box-shadow($a, $b, $c, $colour) {
 | 
			
		||||
  -moz-box-shadow: $a $b $c $colour;
 | 
			
		||||
  -webkit-box-shadow: $a $b $c $colour;
 | 
			
		||||
  box-shadow: $a $b $c $colour;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
@mixin grid($grid-container-width, $grid-column-count:$column-count, $grid-gutter:$gutter) {
 | 
			
		||||
 | 
			
		||||
  $grid-column-width: $grid-container-width/$grid-column-count;
 | 
			
		||||
 | 
			
		||||
  .container {
 | 
			
		||||
    width: $grid-container-width;
 | 
			
		||||
 | 
			
		||||
    .one         { width: (1*$grid-column-width - $grid-gutter); }
 | 
			
		||||
    .two         { width: (2*$grid-column-width - $grid-gutter); }
 | 
			
		||||
    .three       { width: (3*$grid-column-width - $grid-gutter); }
 | 
			
		||||
    .four        { width: (4*$grid-column-width - $grid-gutter); }
 | 
			
		||||
    .five        { width: (5*$grid-column-width - $grid-gutter); }
 | 
			
		||||
    .six         { width: (6*$grid-column-width - $grid-gutter); }
 | 
			
		||||
    .seven       { width: (7*$grid-column-width - $grid-gutter); }
 | 
			
		||||
    .eight       { width: (8*$grid-column-width - $grid-gutter); }
 | 
			
		||||
    .nine        { width: (9*$grid-column-width - $grid-gutter); }
 | 
			
		||||
    .ten         { width: (10*$grid-column-width - $grid-gutter); }
 | 
			
		||||
    .eleven      { width: (11*$grid-column-width - $grid-gutter); }
 | 
			
		||||
    .twelve      { width: (12*$grid-column-width - $grid-gutter); }
 | 
			
		||||
    .thirteen    { width: (13*$grid-column-width - $grid-gutter); }
 | 
			
		||||
    .fourteen    { width: (14*$grid-column-width - $grid-gutter); }
 | 
			
		||||
    .fifteen     { width: (15*$grid-column-width - $grid-gutter); }
 | 
			
		||||
    .sixteen     { width: (16*$grid-column-width - $grid-gutter); }
 | 
			
		||||
    .one-third   { width: ($grid-container-width/3) - $grid-gutter; }
 | 
			
		||||
    .two-thirds  { width: (($grid-container-width/3)*2) - $grid-gutter; }
 | 
			
		||||
    .one-half    { width: ($grid-container-width/2) - $grid-gutter; }
 | 
			
		||||
    .one-quarter { width: ($grid-container-width/4) - $grid-gutter; }
 | 
			
		||||
    .three-quarters { width: (($grid-container-width/4)*3) - $grid-gutter; }
 | 
			
		||||
 | 
			
		||||
    .offset-by-one      { padding-left: $grid-column-width; }
 | 
			
		||||
    .offset-by-two      { padding-left: $grid-column-width*2; }
 | 
			
		||||
    .offset-by-three    { padding-left: $grid-column-width*3; }
 | 
			
		||||
    .offset-by-four     { padding-left: $grid-column-width*4; }
 | 
			
		||||
    .offset-by-five     { padding-left: $grid-column-width*5; }
 | 
			
		||||
    .offset-by-six      { padding-left: $grid-column-width*6; }
 | 
			
		||||
    .offset-by-seven    { padding-left: $grid-column-width*7; }
 | 
			
		||||
    .offset-by-eight    { padding-left: $grid-column-width*8; }
 | 
			
		||||
    .offset-by-nine     { padding-left: $grid-column-width*9; }
 | 
			
		||||
    .offset-by-ten      { padding-left: $grid-column-width*10; }
 | 
			
		||||
    .offset-by-eleven   { padding-left: $grid-column-width*11; }
 | 
			
		||||
    .offset-by-twelve   { padding-left: $grid-column-width*12; }
 | 
			
		||||
    .offset-by-thirteen { padding-left: $grid-column-width*13; }
 | 
			
		||||
    .offset-by-fourteen { padding-left: $grid-column-width*14; }
 | 
			
		||||
    .offset-by-fifteen  { padding-left: $grid-column-width*15; }
 | 
			
		||||
  }
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
@mixin clearfix {
 | 
			
		||||
  clear: both;
 | 
			
		||||
  display: block;
 | 
			
		||||
  overflow: hidden;
 | 
			
		||||
  visibility: hidden;
 | 
			
		||||
  width: 0;
 | 
			
		||||
  height: 0;
 | 
			
		||||
}
 | 
			
		||||
@@ -1,117 +0,0 @@
 | 
			
		||||
// #Typography
 | 
			
		||||
// ==================================================
 | 
			
		||||
 | 
			
		||||
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
 | 
			
		||||
  font-weight: inherit;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
h1 {
 | 
			
		||||
  color: $heading_colour;
 | 
			
		||||
  font-family: $heading_font;
 | 
			
		||||
  font-weight: $heading_font_weight;
 | 
			
		||||
  font-size: $heading1_font_size;
 | 
			
		||||
  line-height: $heading1_line_height;
 | 
			
		||||
  margin: $heading1_margin;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
h2 {
 | 
			
		||||
  color: $heading_colour;
 | 
			
		||||
  font-family: $heading_font;
 | 
			
		||||
  font-weight: $heading_font_weight;
 | 
			
		||||
  font-size: $heading2_font_size;
 | 
			
		||||
  line-height: $heading2_line_height;
 | 
			
		||||
  margin: $heading2_margin;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
h3 {
 | 
			
		||||
  color: $heading_colour;
 | 
			
		||||
  font-family: $heading_font;
 | 
			
		||||
  font-weight: $heading_font_weight;
 | 
			
		||||
  font-size: $heading3_font_size;
 | 
			
		||||
  line-height: $heading3_line_height;
 | 
			
		||||
  margin: $heading3_margin;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
h4 {
 | 
			
		||||
  color: $heading_colour;
 | 
			
		||||
  font-family: $heading_font;
 | 
			
		||||
  font-weight: $heading_font_weight;
 | 
			
		||||
  font-size: $heading4_font_size;
 | 
			
		||||
  line-height: $heading4_line_height;
 | 
			
		||||
  margin: $heading4_margin;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
h5 {
 | 
			
		||||
  color: $heading_colour;
 | 
			
		||||
  font-family: $heading_font;
 | 
			
		||||
  font-weight: $heading_font_weight;
 | 
			
		||||
  font-size: $heading5_font_size;
 | 
			
		||||
  line-height: $heading5_line_height;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
h6 {
 | 
			
		||||
  color: $heading_colour;
 | 
			
		||||
  font-family: $heading_font;
 | 
			
		||||
  font-weight: $heading_font_weight;
 | 
			
		||||
  font-size: $heading6_font_size;
 | 
			
		||||
  line-height: $heading6_line_height;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.subheader {
 | 
			
		||||
  color: $subheader_colour;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
p {
 | 
			
		||||
  margin: $paragraph_margin;
 | 
			
		||||
  line-height: $paragraph_line_height;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
p img {
 | 
			
		||||
  margin: $paragraph_image_margin;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.lead {
 | 
			
		||||
  font-size: $paragraph_lead_font_size;
 | 
			
		||||
  line-height: $paragraph_lead_line_height;
 | 
			
		||||
  color: $paragraph_lead_colour;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
em {
 | 
			
		||||
  font-style: italic;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
strong {
 | 
			
		||||
  font-weight: bold;
 | 
			
		||||
  color: $strong_colour;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
small {
 | 
			
		||||
  font-size: 80%;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
blockquote, blockquote p {
 | 
			
		||||
  font-size: $blockquote_font_size;
 | 
			
		||||
  line-height: $blockquote_line_height;
 | 
			
		||||
  color: $blockquote_colour;
 | 
			
		||||
  font-style: $blockquote_font_style;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
blockquote {
 | 
			
		||||
  margin: $blockquote_margin;
 | 
			
		||||
  padding: $blockquote_padding;
 | 
			
		||||
  border-left: $blockquote_border_left;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
blockquote cite {
 | 
			
		||||
  display: block;
 | 
			
		||||
  font-size: $blockquote_cite_font_size;
 | 
			
		||||
  color: $blockquote_cite_colour;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
blockquote cite:before {
 | 
			
		||||
  content: "\2014 \0020";
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
blockquote cite a, blockquote cite a:visited, blockquote cite a:visited {
 | 
			
		||||
  color: $blockquote_cite_link_colour;
 | 
			
		||||
}
 | 
			
		||||
@@ -1,140 +0,0 @@
 | 
			
		||||
$gutter: 20px;
 | 
			
		||||
$column-count: 16;
 | 
			
		||||
$desktop-container-width: 960px;
 | 
			
		||||
$tablet-container-width: 768px;
 | 
			
		||||
$mobile-container-width: 90%;
 | 
			
		||||
$mobile-column-width: 100%;
 | 
			
		||||
$base_font_size: 14px;
 | 
			
		||||
 | 
			
		||||
$form_element_font: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
 | 
			
		||||
 | 
			
		||||
$form_button_border_radius: 3px;
 | 
			
		||||
$form_button_border_topleft: 1px solid #ccc;
 | 
			
		||||
$form_button_border_rightbottom: 1px solid #aaa;
 | 
			
		||||
$form_button_text_colour: #444;
 | 
			
		||||
$form_button_text_shadow: 0 1px rgba(255, 255, 255, .75);
 | 
			
		||||
$form_button_gradient_start: rgba(255, 255, 255, .2);
 | 
			
		||||
$form_button_gradient_end: rgba(0, 0, 0, .2);
 | 
			
		||||
$form_button_font_size: 11px;
 | 
			
		||||
$form_button_padding: 8px 10px;
 | 
			
		||||
$form_button_line_height: normal;
 | 
			
		||||
 | 
			
		||||
$form_button_hover_border_topleft: 1px solid #aaa;
 | 
			
		||||
$form_button_hover_border_rightbottom: 1px solid #888;
 | 
			
		||||
$form_button_hover_gradient_start: rgba(255, 255, 255, .3);
 | 
			
		||||
$form_button_hover_gradient_end: rgba(0, 0, 0, .3);
 | 
			
		||||
$form_button_hover_text_colour: #222;
 | 
			
		||||
 | 
			
		||||
$form_button_active_border: 1px solid #666;
 | 
			
		||||
$form_button_active_gradient_start: rgba(255, 255, 255, .2);
 | 
			
		||||
$form_button_active_gradient_end: rgba(0, 0, 0, .2);
 | 
			
		||||
 | 
			
		||||
$form_input_border: 1px solid #ccc;
 | 
			
		||||
$form_input_text_colour: #777;
 | 
			
		||||
$form_input_background: #fff;
 | 
			
		||||
$form_input_padding: 6px 4px;
 | 
			
		||||
$form_input_width: 210px;
 | 
			
		||||
$form_input_select_width: 220px;
 | 
			
		||||
$form_input_margin: 0 0 20px 0;
 | 
			
		||||
$form_input_font_size: 13px;
 | 
			
		||||
$form_input_border_radius: 2px;
 | 
			
		||||
 | 
			
		||||
$form_input_checkbox_display: inline;
 | 
			
		||||
 | 
			
		||||
$form_input_focus_border: 1px solid #aaa;
 | 
			
		||||
$form_input_focus_text_colour: #444;
 | 
			
		||||
$form_input_focus_outline: none;
 | 
			
		||||
$form_input_focus_box_shadow_x: 0;
 | 
			
		||||
$form_input_focus_box_shadow_y: 0;
 | 
			
		||||
$form_input_focus_box_shadow_blur: 3px;
 | 
			
		||||
$form_input_focus_box_shadow_colour: rgba(0, 0, 0, .2);
 | 
			
		||||
 | 
			
		||||
$form_input_select_padding: 10px;
 | 
			
		||||
 | 
			
		||||
$form_label_legend_colour: #444;
 | 
			
		||||
$form_fieldset_margin: 0 0 20px 0;
 | 
			
		||||
 | 
			
		||||
$legend_font_weight: bold;
 | 
			
		||||
$legend_font_size: $form_input_font_size;
 | 
			
		||||
 | 
			
		||||
$form_textarea_min_height: 60px;
 | 
			
		||||
 | 
			
		||||
$link_colour: #333;
 | 
			
		||||
$link_decoration: underline;
 | 
			
		||||
$link_outline: 0;
 | 
			
		||||
$link_hover_colour: #000;
 | 
			
		||||
$link_hover_decoration: none;
 | 
			
		||||
 | 
			
		||||
$heading_font: "Georgia", "Times New Roman", serif;
 | 
			
		||||
$heading_font_weight: normal;
 | 
			
		||||
$heading_colour: #181818;
 | 
			
		||||
 | 
			
		||||
$heading1_font_size: 46px;
 | 
			
		||||
$heading1_line_height: $heading1_font_size * 1.5;
 | 
			
		||||
$heading1_margin: 0 0 14px 0;
 | 
			
		||||
 | 
			
		||||
$heading2_font_size: 35px;
 | 
			
		||||
$heading2_line_height: $heading2_font_size * 1.5;
 | 
			
		||||
$heading2_margin: 0 0 10px 0;
 | 
			
		||||
 | 
			
		||||
$heading3_font_size: 28px;
 | 
			
		||||
$heading3_line_height: $heading3_font_size * 1.5;
 | 
			
		||||
$heading3_margin: 0 0 8px 0;
 | 
			
		||||
 | 
			
		||||
$heading4_font_size: 21px;
 | 
			
		||||
$heading4_line_height: $heading4_font_size * 1.5;
 | 
			
		||||
$heading4_margin: 0 0 4px 0;
 | 
			
		||||
 | 
			
		||||
$heading5_font_size: 17px;
 | 
			
		||||
$heading5_line_height: $heading5_font_size * 1.5;
 | 
			
		||||
 | 
			
		||||
$heading6_font_size: 14px;
 | 
			
		||||
$heading6_line_height: $heading6_font_size * 1.5;
 | 
			
		||||
 | 
			
		||||
$subheader_colour: #777;
 | 
			
		||||
 | 
			
		||||
$paragraph_margin: 0 0 20px 0;
 | 
			
		||||
$paragraph_image_margin: 0;
 | 
			
		||||
$paragraph_line_height: $base_font_size * 1.5;
 | 
			
		||||
 | 
			
		||||
$paragraph_lead_font_size: 21px;
 | 
			
		||||
$paragraph_lead_line_height: $paragraph_lead_font_size * 1.5;
 | 
			
		||||
$paragraph_lead_colour: #777;
 | 
			
		||||
 | 
			
		||||
$strong_colour: #333;
 | 
			
		||||
 | 
			
		||||
$blockquote_colour: #777;
 | 
			
		||||
$blockquote_border_left: 1px solid #ddd;
 | 
			
		||||
$blockquote_cite_colour: #555;
 | 
			
		||||
$blockquote_cite_link_colour: #555;
 | 
			
		||||
$blockquote_cite_font_size: 12px;
 | 
			
		||||
$blockquote_margin: 0 0 20px;
 | 
			
		||||
$blockquote_padding: 9px 20px 0 19px;
 | 
			
		||||
$blockquote_font_size: 17px;
 | 
			
		||||
$blockquote_line_height: 24px;
 | 
			
		||||
$blockquote_font_style: italic;
 | 
			
		||||
 | 
			
		||||
$hr_border: solid #ddd;
 | 
			
		||||
$hr_border_width: 1px 0 0;
 | 
			
		||||
$hr_margin: 10px 0 30px;
 | 
			
		||||
 | 
			
		||||
$body_font_family: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
 | 
			
		||||
 | 
			
		||||
$list_margin: 0 0 20px 0;
 | 
			
		||||
$list_large_line_height: 21px;
 | 
			
		||||
 | 
			
		||||
$ul_list_style: none outside;
 | 
			
		||||
$ol_list_style: decimal;
 | 
			
		||||
 | 
			
		||||
$list_styled_margin: 0 0 0 30px; // ul, ol with disc, square etc.
 | 
			
		||||
$list_styled_position: outside;  // List item bullet position 
 | 
			
		||||
 | 
			
		||||
$nested_list_margin: 4px 0 5px 30px;
 | 
			
		||||
$nested_list_font_size: 90%;
 | 
			
		||||
 | 
			
		||||
$list_item_line_height: 18px;
 | 
			
		||||
$list_item_margin: 0 0 12px 0;
 | 
			
		||||
$list_item_paragraph_line_height: 21px;
 | 
			
		||||
 | 
			
		||||
$fallback_hex_gradient_bg: #CCC;
 | 
			
		||||
 | 
			
		||||
		Reference in New Issue
	
	Block a user