/*
	Theme Name: Southern Lakes Fire Training Theme
	Theme URI: http://www.southernlakesfiretraining.co.nz
	Author: Eoin Kelly
	Author URI: http://www.alittlelightisblinking.co.nz
	Description: A wordpress theme hand-made in Queenstown, New Zealand.
	Version: 1.0
	License:
	License URI:
	Tags:
*/
/*
	Page Layout
	===========

	* Page layout documentation is in _layout.scss


	CSS Selector Organisation
	=========================

	What possible categories of selectors do we have?
	*	selectors that match on *every* template on the site
	*	selectors that do match in 2 or more templates
	*	selectors used only on exactly one template (and one template only)
	*	selectors that are not used on any template (they should not be here at all!)

	Each template is a "selector root".

	SCSS Filename Prefix Guide
	==========================

	module- 		= a reusable OOCSS style module
	widget- 		= selectors that match a particular type of wordpress widget
	pt- 			= selectors that match only in a particular template
	mq-				= media query styles
	pt-many.scss	= selectors that match in 2+ templates
	pt-all.scss		= selectors that match in all templates

	lib- 			= this SCSS file is designed to be included and used as-is
	starter-		= this SCSS file provides sensible defaults but should not be used as-is

*/
/* Selectors used on all templates */
/* Selectors used on *every* template */
/* ********************************** */
/*
 *	These selctors MUST match on EVERY template of the site
 *	HTML element selectors do not belong here - they should be styled in _element-defaults.scss
 */
/* @group HTML Element Defaults */
/* **************************** */
/*
 * Only element & pseudo-class selectors in this section
 * Styles applied here will apply to *all* instances of these elements across the site.
 * Set sensible defaults here.
 * All our other CSS will depend on the environment setup in this section i.e. changes here will have far-reaching consequences!
 * Rule of thumb for adding styles here: "wherever this element is on the site, it should look like this"
 * These can be called "global" styles
 */
/* @group normalize.css */
/* normalize.css 2012-01-31T16:06 UTC - http://github.com/necolas/normalize.css */
/* =============================================================================
   HTML5 display definitions
   ========================================================================== */
/*
 * Corrects block display not defined in IE6/7/8/9 & FF3
 */
/* line 24, sass/_lib-normalize.scss */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
nav,
section {
  display: block;
}

/*
 * Corrects inline-block display not defined in IE6/7/8/9 & FF3
 */
/* line 34, sass/_lib-normalize.scss */
audio,
canvas,
video {
  display: inline-block;
  *display: inline;
  *zoom: 1;
}

/*
 * Prevents modern browsers from displaying 'audio' without controls
 */
/* line 44, sass/_lib-normalize.scss */
audio:not([controls]) {
  display: none;
}

/*
 * Addresses styling for 'hidden' attribute not present in IE7/8/9, FF3, S4
 * Known issue: no IE6 support
 */
/* line 53, sass/_lib-normalize.scss */
[hidden] {
  display: none;
}

/* =============================================================================
   Base
   ========================================================================== */
/*
 * 1. Corrects text resizing oddly in IE6/7 when body font-size is set using em units
 *    http://clagnut.com/blog/348/#c790
 * 2. Prevents iOS text size adjust after orientation change, without disabling user zoom
 *    www.456bereastreet.com/archive/201012/controlling_text_size_in_safari_for_ios_without_disabling_user_zoom/
 */
/* line 69, sass/_lib-normalize.scss */
html {
  font-size: 100%;
  /* 1 */
  -webkit-text-size-adjust: 100%;
  /* 2 */
  -ms-text-size-adjust: 100%;
  /* 2 */
}

/* 
 * Addresses font-family inconsistency between 'textarea' and other form elements.
 */
/* line 83, sass/_lib-normalize.scss */
html,
button,
input,
select,
textarea {
  font-family: sans-serif;
}

/*
 * Addresses margins handled incorrectly in IE6/7
 */
/* line 91, sass/_lib-normalize.scss */
body {
  margin: 0;
}

/* =============================================================================
   Links
   ========================================================================== */
/*
 * Addresses outline displayed oddly in Chrome
 */
/* line 104, sass/_lib-normalize.scss */
a:focus {
  outline: thin dotted;
}

/*
 * Improves readability when focused and also mouse hovered in all browsers
 * people.opera.com/patrickl/experiments/keyboard/test
 */
/* line 114, sass/_lib-normalize.scss */
a:hover,
a:active {
  outline: 0;
}

/* =============================================================================
   Typography
   ========================================================================== */
/*
 * Neutralise smaller font-size in 'section' and 'article' in FF4+, Chrome, S5
 * Fix IE6/7 heading font-size not being relative to the root font-size
 */
/* line 128, sass/_lib-normalize.scss */
h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/* line 133, sass/_lib-normalize.scss */
h2 {
  font-size: 1.5em;
  margin: 0.83em 0;
}

/* line 138, sass/_lib-normalize.scss */
h3 {
  font-size: 1.17em;
  margin: 1em 0;
}

/* line 143, sass/_lib-normalize.scss */
h4 {
  font-size: 1em;
  margin: 1.33em 0;
}

/* line 148, sass/_lib-normalize.scss */
h5 {
  font-size: 0.83em;
  margin: 1.67em 0;
}

/* line 153, sass/_lib-normalize.scss */
h6 {
  font-size: 0.75em;
  margin: 2.33em 0;
}

/*
 * Addresses styling not present in IE7/8/9, S5, Chrome
 */
/* line 162, sass/_lib-normalize.scss */
abbr[title] {
  border-bottom: 1px dotted;
}

/*
 * Addresses style set to 'bolder' in FF3+, S4/5, Chrome
*/
/* line 171, sass/_lib-normalize.scss */
b,
strong {
  font-weight: bold;
}

/* line 175, sass/_lib-normalize.scss */
blockquote {
  margin: 1em 40px;
}

/*
 * Addresses styling not present in S5, Chrome
 */
/* line 183, sass/_lib-normalize.scss */
dfn {
  font-style: italic;
}

/*
 * Addresses styling not present in IE6/7/8/9
 */
/* line 191, sass/_lib-normalize.scss */
mark {
  background: #ff0;
  color: #000;
}

/*
 * Corrects font family set oddly in IE6, S4/5, Chrome
 * en.wikipedia.org/wiki/User:Davidgothberg/Test59
 */
/* line 204, sass/_lib-normalize.scss */
pre,
code,
kbd,
samp {
  font-family: monospace, serif;
  _font-family: 'courier new', monospace;
  font-size: 1em;
}

/*
 * Improves readability of pre-formatted text in all browsers
 */
/* line 214, sass/_lib-normalize.scss */
pre {
  white-space: pre;
  white-space: pre-wrap;
  word-wrap: break-word;
}

/*
 * 1. Addresses CSS quotes not supported in IE6/7
 * 2. Addresses quote property not supported in S4
 */
/* 1 */
/* line 227, sass/_lib-normalize.scss */
q {
  quotes: none;
}

/* 2 */
/* line 234, sass/_lib-normalize.scss */
q:before,
q:after {
  content: '';
  content: none;
}

/* line 239, sass/_lib-normalize.scss */
small {
  font-size: 75%;
}

/*
 * Prevents sub and sup affecting line-height in all browsers
 * gist.github.com/413930
 */
/* line 249, sass/_lib-normalize.scss */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

/* line 256, sass/_lib-normalize.scss */
sup {
  top: -0.5em;
}

/* line 260, sass/_lib-normalize.scss */
sub {
  bottom: -0.25em;
}

/* =============================================================================
   Lists
   ========================================================================== */
/* line 270, sass/_lib-normalize.scss */
ul,
ol {
  margin-left: 0;
  padding: 0 0 0 40px;
}

/* line 275, sass/_lib-normalize.scss */
dd {
  margin: 0 0 0 40px;
}

/* line 280, sass/_lib-normalize.scss */
nav ul,
nav ol {
  list-style: none;
  list-style-image: none;
}

/* =============================================================================
   Embedded content
   ========================================================================== */
/*
 * 1. Removes border when inside 'a' element in IE6/7/8/9, FF3
 * 2. Improves image quality when scaled in IE7
 *    code.flickr.com/blog/2008/11/12/on-ui-quality-the-little-things-client-side-image-resizing/
 */
/* line 296, sass/_lib-normalize.scss */
img {
  border: 0;
  /* 1 */
  -ms-interpolation-mode: bicubic;
  /* 2 */
}

/*
 * Corrects overflow displayed oddly in IE9 
 */
/* line 305, sass/_lib-normalize.scss */
svg:not(:root) {
  overflow: hidden;
}

/* =============================================================================
   Figures
   ========================================================================== */
/*
 * Addresses margin not present in IE6/7/8/9, S5, O11
 */
/* line 318, sass/_lib-normalize.scss */
figure {
  margin: 0;
}

/* =============================================================================
   Forms
   ========================================================================== */
/*
 * Corrects margin displayed oddly in IE6/7
 */
/* line 331, sass/_lib-normalize.scss */
form {
  margin: 0;
}

/*
 * Define consistent border, margin, and padding
 */
/* line 339, sass/_lib-normalize.scss */
fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em;
}

/*
 * 1. Corrects color not being inherited in IE6/7/8/9
 * 2. Corrects text not wrapping in FF3 
 * 3. Corrects alignment displayed oddly in IE6/7
 */
/* line 351, sass/_lib-normalize.scss */
legend {
  border: 0;
  /* 1 */
  padding: 0;
  white-space: normal;
  /* 2 */
  *margin-left: -7px;
  /* 3 */
}

/*
 * 1. Corrects font size not being inherited in all browsers
 * 2. Addresses margins set differently in IE6/7, FF3+, S5, Chrome
 * 3. Improves appearance and consistency in all browsers
 */
/* line 367, sass/_lib-normalize.scss */
button,
input,
select,
textarea {
  font-size: 100%;
  /* 1 */
  margin: 0;
  /* 2 */
  vertical-align: baseline;
  /* 3 */
  *vertical-align: middle;
  /* 3 */
}

/*
 * Addresses FF3/4 setting line-height on 'input' using !important in the UA stylesheet
 */
/* line 379, sass/_lib-normalize.scss */
button,
input {
  line-height: normal;
  /* 1 */
}

/*
 * 1. Improves usability and consistency of cursor style between image-type 'input' and others
 * 2. Corrects inability to style clickable 'input' types in iOS
 * 3. Removes inner spacing in IE7 without affecting normal text inputs
 *    Known issue: inner spacing remains in IE6
 */
/* line 393, sass/_lib-normalize.scss */
button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
  cursor: pointer;
  /* 1 */
  -webkit-appearance: button;
  /* 2 */
  *overflow: visible;
  /* 3 */
}

/*
 * Re-set default cursor for disabled elements
 */
/* line 404, sass/_lib-normalize.scss */
button[disabled],
input[disabled] {
  cursor: default;
}

/*
 * 1. Addresses box sizing set to content-box in IE8/9
 * 2. Removes excess padding in IE8/9
 * 3. Removes excess padding in IE7
      Known issue: excess padding remains in IE6
 */
/* line 416, sass/_lib-normalize.scss */
input[type="checkbox"],
input[type="radio"] {
  box-sizing: border-box;
  /* 1 */
  padding: 0;
  /* 2 */
  *height: 13px;
  /* 3 */
  *width: 13px;
  /* 3 */
}

/*
 * 1. Addresses appearance set to searchfield in S5, Chrome
 * 2. Addresses box-sizing set to border-box in S5, Chrome (include -moz to future-proof)
 */
/* line 428, sass/_lib-normalize.scss */
input[type="search"] {
  -webkit-appearance: textfield;
  /* 1 */
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box;
  /* 2 */
  box-sizing: content-box;
}

/*
 * Removes inner padding and search cancel button in S5, Chrome on OS X
 */
/* line 440, sass/_lib-normalize.scss */
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
}

/*
 * Removes inner padding and border in FF3+
 * www.sitepen.com/blog/2008/05/14/the-devils-in-the-details-fixing-dojos-toolbar-buttons/
 */
/* line 450, sass/_lib-normalize.scss */
button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0;
}

/*
 * 1. Removes default vertical scrollbar in IE6/7/8/9
 * 2. Improves readability and alignment in all browsers
 */
/* line 460, sass/_lib-normalize.scss */
textarea {
  overflow: auto;
  /* 1 */
  vertical-align: top;
  /* 2 */
}

/* =============================================================================
   Tables
   ========================================================================== */
/* 
 * Remove most spacing between table cells
 */
/* line 474, sass/_lib-normalize.scss */
table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* END @group normalize.css */
/* line 24, sass/_element-defaults.scss */
html,
body {
  min-height: 100%;
  /* Fill the view-port even if there is not much content on the page */
  _height: 100%;
  /* @hack IE6 does not support min-height but treats height similarly to how modern browsers treat min-height */
}

/* line 35, sass/_element-defaults.scss */
body {
  color: #1d1d1b;
  background: #fcfced;
  font-size: 16px;
  font-family: "Segoe UI", Candara, "Bitstream Vera Sans", "DejaVu Sans", "Bitstream Vera Sans", "Trebuchet MS", Verdana, "Verdana Ref", sans-serif;
  font-weight: 400;
}

/* line 49, sass/_element-defaults.scss */
h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4,
h5, .h5,
h6, .h6 {
  color: #1d1d1b;
  background-color: transparent;
  font-family: "Segoe UI", Candara, "Bitstream Vera Sans", "DejaVu Sans", "Bitstream Vera Sans", "Trebuchet MS", Verdana, "Verdana Ref", sans-serif;
  font-weight: 400;
}

/* line 60, sass/_element-defaults.scss */
img,
embed,
object,
video {
  max-width: 100%;
  _width: 100%;
  /* IE6 does not support max-width */
}

/* line 69, sass/_element-defaults.scss */
blockquote {
  font-style: italic;
}

/* line 88, sass/_element-defaults.scss */
input[type="submit"] {
  cursor: pointer;
}

/* line 96, sass/_element-defaults.scss */
a:link {
  color: #e30613;
}
/* line 100, sass/_element-defaults.scss */
a:visited {
  color: #ec6608;
}
/* line 104, sass/_element-defaults.scss */
a:hover, a:focus {
  color: #f9b000;
  text-decoration: underline;
}

/*
 * Non-semantic helper classes
 *
 * Criteria for entry:
 *		No selectors that will automatically apply to elements - classes only!
 *		Should be reusable across many sites
 */
/* line 9, sass/_lib-helpers.scss */
.center-text {
  text-align: center;
}

/*
Add the .ir class to any element you are applying image-replacement to. 
Be sure to include background-image: url(pathtoimage.png); for that specific element so that image replacement can occur.

<a> can wrap other tags in HTML5
	The text content of the H1 will be replaced with the background image

	Logo Markup 
	===========

	Method 1: <h1> with a background style (Image replacement)
	---------------------------

	<a href="/" rel="home"> <h1 id="site-title" class="site-title ir"><?php bloginfo( 'name' ); ?></h1> </a>

	.site-title {
		background-image: url('path/to/image.jpg');
	}
	.ir {
		display: block : Without this, image-replacement won't work on inline elements (e.g. span)
		border: 0 : Remove the default border from elements like button
		text-indent: -999em : Hide the text off-screen
		overflow: hidden : Clip the text and prevent the focus outline from extending off-screen in some browsers.
		background-color: transparent : Hide the default background color on elements like button
		background-repeat: no-repeat : Prevent tiling of the background image
		text-align: left : Make sure the text is left aligned for the negative text-indent to work
		direction: ltr : Avoid problems with the off-screen text in rtl settings
		*line-height: 0 : hide text of submit inputs in ie6/7
		.ir br { display: none; } : hide line breaks within the element as these mess up the off-screen positioning of the text
	}

	Pros/Cons
	+	the text that users who can't see images see is in H1 tags to indicate it is important
	+	the logo is clickable
	=	the user can't right-click on the logo to download 
	-	the user who has CSS turned on will not see the text
	-	It might be seen by google as a trick; See http://www.youtube.com/watch?v=fBLvn_WkDJ4
	-	http://luigimontanez.com/2010/stop-using-text-indent-css-trick/
	-	http://maileohye.com/html-text-indent-not-messing-up-your-rankings/

	Method 2: Inline image
	----------------------

	<a href="/" rel="home">
		<img src="foo.jpg" alt="<?php bloginfo('name'); ?>">
		<!--
			* Only add this on pages where the foremost title on the page should be the same text as the logo - on other pages the h1 should be separate
		-->
		<h1 class="visuallyhidden focusable"><?php bloginfo('name'); ?>"></h1>
	</a>

	<a  class="visuallyhidden focusable" href="/" rel="home">
		<!--
			* Only add this on pages where the foremost title on the page should be the same text as the logo
			? should the visually hidden be on the a or the h1?
			the blockquote thing is andy malarkey
		-->
		<h1><?php bloginfo('name'); ?>"></h1>
		<blockquote>
			This is my logo tagline	
		</blockquote>
	</a>


	Pros/cons
	+	google likes this method
	+	allows the logo to persist regardless of styles
	+	means the logo is resizable (a background image cannot be resized as easily)


	http://csswizardry.com/2010/10/your-logo-is-an-image-not-a-h1/
		The organisation's logo is *content* not *style* - it does not depend on the look & feel of the site
		The <h1> tag is the uppermost, all encompassing title of a page - it might be the same words as the logo on a site homepage but probably not on other pages
		If I use <h1. for the logo, I have to start the page titles on <h2> and this is wrong.
		<h1> is one of 
		The homepage might not display a h1 but it should have on
		It needs the logo to be an image but it also needs a h1 tag somewhere - can use the 'visuallyhidden' class here to hide it from all but screen-readers

	Conclusion
	----------

	Inline image is best
*/
/* For image replacement */
/* line 99, sass/_lib-helpers.scss */
.ir {
  display: block;
  border: 0;
  text-indent: -999em;
  overflow: hidden;
  background-color: transparent;
  background-repeat: no-repeat;
  text-align: left;
  direction: ltr;
  *line-height: 0;
}

/* line 100, sass/_lib-helpers.scss */
.ir br {
  display: none;
}

/* Hide from both screenreaders and browsers: h5bp.com/u */
/* line 103, sass/_lib-helpers.scss */
.hidden {
  display: none !important;
  visibility: hidden;
}

/* Hide only visually, but have it available for screenreaders: h5bp.com/v */
/* line 106, sass/_lib-helpers.scss */
.visuallyhidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

/* Extends the .visuallyhidden class to allow the element to be focusable when navigated to via the keyboard: h5bp.com/p */
/* line 109, sass/_lib-helpers.scss */
.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus {
  clip: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  position: static;
  width: auto;
}

/* Hide visually and from screenreaders, but maintain layout */
/* line 112, sass/_lib-helpers.scss */
.invisible {
  visibility: hidden;
}

/* @group Clearfix
* ***************** */
/* line 7, sass/_lib-clearfix.scss */
.clearfix:before, .container:before, .site-header-container .site-header:before, .main:before, .site-footer-container .site-footer:before, .span-1:before, .site-header-container .site-header .search-container:before, .main .secondary:before, .span-2:before, .span-3:before, .span-4:before, .site-header-container .site-header .primary-menu:before, .site-header-container .site-header .secondary-menu:before, .main .primary:before, .span-5:before, .site-header-container:before, .site-footer-container:before, .menu:before, .search-form:before,
.clearfix:after,
.container:after,
.site-header-container .site-header:after, .site-header-container
.site-header:after,
.main:after,
.site-footer-container .site-footer:after, .site-footer-container
.site-footer:after,
.span-1:after,
.site-header-container .site-header .search-container:after, .site-header-container .site-header
.search-container:after,
.main .secondary:after, .main
.secondary:after,
.span-2:after,
.span-3:after,
.span-4:after,
.site-header-container .site-header .primary-menu:after, .site-header-container .site-header
.primary-menu:after,
.site-header-container .site-header .secondary-menu:after, .site-header-container .site-header
.secondary-menu:after,
.main .primary:after, .main
.primary:after,
.span-5:after,
.site-header-container:after,
.site-footer-container:after,
.menu:after,
.search-form:after {
  content: "";
  display: table;
}

/* line 11, sass/_lib-clearfix.scss */
.clearfix:after, .container:after, .site-header-container .site-header:after, .main:after, .site-footer-container .site-footer:after, .span-1:after, .site-header-container .site-header .search-container:after, .main .secondary:after, .span-2:after, .span-3:after, .span-4:after, .site-header-container .site-header .primary-menu:after, .site-header-container .site-header .secondary-menu:after, .main .primary:after, .span-5:after, .site-header-container:after, .site-footer-container:after, .menu:after, .search-form:after {
  clear: both;
}

/* line 14, sass/_lib-clearfix.scss */
.clearfix, .container, .site-header-container .site-header, .main, .site-footer-container .site-footer, .span-1, .site-header-container .site-header .search-container, .main .secondary, .span-2, .span-3, .span-4, .site-header-container .site-header .primary-menu, .site-header-container .site-header .secondary-menu, .main .primary, .span-5, .site-header-container, .site-footer-container, .menu, .search-form {
  *zoom: 1;
}

/* @group Grid
 * *********** */
/*
	Fluid Grid
	==========

	Symmetrical => All columns same width
	Fluid => All column widths specified as % of their container

	The grid is based on a content image 175 x 117 px (3:2 ratio, common output from SLR cameras)
	Grid type: Floating (all units floated left)
	Grid unit width: 175px
	Gutter: 35px (picked arbitrarily for niceness(TM), sensibleness(TM)). Gutter should be an odd number to allow for a 1px border in it
	Gutter position: Right side of column
	Number of Columns: 5
	Total width (5 columns + 4 gutters): 1015px
	Internal column left/right padding: 17px ( ~50% of gutter width)
	Nestable: No

	Our basic content image is 175 x 117 px

	We want 5 lines of text to be 117 px (arbitrary pick 5 because it is sensible(TM))
		=> our line height is 117/5 = 23.4px
		Note: This isn't a baseline grid - we are lining up the font em square (not the font baseline) with the content image.
	=> Line-height: 23.4px

	Our base font size is 16px (browser default, also readable, nice)

	Page Stucture Example
	---------------------
	.container
		div.span-1
			div.box
				{content}
		div.span-4.last
			{content}
		div.span-3
			{content}
		div.span-2.last
			{content}
*/
/*
	A block formatting context:
		contains it's floats
		prevent collapsing margins
		does not overlap any floats in the same block formatting context

*	These measurements should relate to each other

	Todo
	----
	*	Are there problem with sub-pixel rounding errors? @stubbornella fix?
		I might be able to hide the differences in the gutters?
	*	Do push/pull classes let you re-order the source?
	Reading
		http://www.stubbornella.org/content/2009/07/23/overflow-a-secret-benefit/
		http://www.stubbornella.org/content/2010/12/09/the-hacktastic-zoom-fix/
		http://stackoverflow.com/questions/6196725/how-does-the-css-block-formatting-context-work
*/
/* line 72, sass/_starter-grid-fluid.scss */
.container, .site-header-container .site-header, .main, .site-footer-container .site-footer {
  width: 90%;
  max-width: 1015px;
  margin: 0 auto;
}

/*

idea: make the last unit of each grid line be not floated but trigger a new formatting context

.line,.lastUnit{overflow:hidden; *overflow:visible;*zoom:1;}
.unit{float:left;}
.unitRight{float:right;}
.size1of1{float:none;}
.size1of2{width:50%;}
.size1of3{width:33.33333%;}
.size2of3{width:66.66666%;}
.size1of4{width:25%;}
.size3of4{width:75%;}
.size1of5{width:20%;}
.size2of5{width:40%;}
.size3of5{width:60%;}
.size4of5{width:80%;}
.lastUnit{float:none;width:auto;_position:relative;_left:-3px;_margin-right:-3px;}


*/
/* Sets up basic grid floating and margin. */
/* line 112, sass/_starter-grid-fluid.scss */
.span-1, .site-header-container .site-header .search-container, .main .secondary, .span-2, .span-3, .span-4, .site-header-container .site-header .primary-menu, .site-header-container .site-header .secondary-menu, .main .primary, .span-5 {
  float: left;
  margin-right: 3.448%;
  /* 35 / 1015 = 0.0344827586206897 */
}

/* line 119, sass/_starter-grid-fluid.scss */
.last, .site-header-container .site-header .search-container, .main .secondary {
  margin-right: 0;
}

/* line 132, sass/_starter-grid-fluid.scss */
.span-1, .site-header-container .site-header .search-container, .main .secondary {
  width: 17.241%;
}

/* 175 / 1015 = 0.1724137931034483 */
/* line 133, sass/_starter-grid-fluid.scss */
.span-2 {
  width: 37.931%;
}

/* 385 / 1015 =  0.3793103448275862 */
/* line 134, sass/_starter-grid-fluid.scss */
.span-3 {
  width: 58.621%;
}

/* 595 / 1015 = 0.5862068965517241 */
/* line 135, sass/_starter-grid-fluid.scss */
.span-4, .site-header-container .site-header .primary-menu, .site-header-container .site-header .secondary-menu, .main .primary {
  width: 79.31%;
}

/* 805 / 1015 = 0.7931034482758621 */
/* line 136, sass/_starter-grid-fluid.scss */
.span-5 {
  width: 100%;
  margin-right: 0;
}

/* line 139, sass/_starter-grid-fluid.scss */
.span-1 .box, .site-header-container .site-header .search-container .box, .main .secondary .box {
  /* 17 / 175 = 0.0971428571428571 */
  padding-left: 9.714%;
  padding-right: 9.714%;
}

/* line 144, sass/_starter-grid-fluid.scss */
.span-2 .box {
  /* 17 / 385 = 0.0441558441558442 */
  padding-left: 4.416%;
  padding-right: 4.416%;
}

/* line 149, sass/_starter-grid-fluid.scss */
.span-3 .box {
  /* 17 / 595 = 0.0285714285714286 */
  padding-left: 2.857%;
  padding-right: 2.857%;
}

/* line 154, sass/_starter-grid-fluid.scss */
.span-4 .box, .site-header-container .site-header .primary-menu .box, .site-header-container .site-header .secondary-menu .box, .main .primary .box {
  /* 17 / 805 = 0.0211180124223602 */
  padding-left: 2.112%;
  padding-right: 2.112%;
}

/* line 159, sass/_starter-grid-fluid.scss */
.span-5 .box {
  /* 17 / 1015 = 0.0167487684729064 */
  padding-left: 1.675%;
  padding-right: 1.675%;
}

/* line 169, sass/_starter-grid-fluid.scss */
.span-1 .box, .site-header-container .site-header .search-container .box, .main .secondary .box,
.span-2 .box,
.span-3 .box,
.span-4 .box,
.site-header-container .site-header .primary-menu .box, .site-header-container .site-header
.primary-menu .box,
.site-header-container .site-header .secondary-menu .box, .site-header-container .site-header
.secondary-menu .box,
.main .primary .box, .main
.primary .box,
.span-5 .box {
  margin-top: 1em;
  margin-bottom: 1em;
}

/*
	TODO
	add push, pull, prepend, append styles
		push = add X columns of extra margin
		pull = subtract x columns of extra margin
		append = add X columns of extra rhs padding
		prepend = add X columns of extra lhs padding
	tweak input, textarea to fit within the grid due to their content box model
	create a hanging line ruler hr
	the push/pull classes save me adding extra empty divs to my markup

*/
/*
	@group Page Layout
	==================

	html
	    body.{the usual WP classes}
	        div#site-header-container.site-header-container
	            header#site-header.site-header
	        div.main
	            div#primary.primary
	                div#content.content,role=main
	                    {custom stuff for each site}
	            div#secondary-content
	                {custom stuff for each site}
	            div.tertiary-content
	                {custom stuff for each site}
	        div#site-footer-container.site-footer-container
	            footer#site-footer.site-footer
	                {custom stuff for each site}
*/
/* Default Menu */
/* ************ */
/* line 32, sass/_module-menu.scss */
.menu {
  float: left;
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
  display: block;
}

/* line 41, sass/_module-menu.scss */
.menu li {
  float: left;
  position: relative;
  display: block;
}

/* line 46, sass/_module-menu.scss */
.menu a {
  display: block;
  float: left;
}

/* line 54, sass/_module-menu.scss */
.menu .sub-menu {
  -moz-box-shadow: 0px 0px 5px #333333;
  -webkit-box-shadow: 0px 0px 5px #333333;
  -o-box-shadow: 0px 0px 5px #333333;
  box-shadow: 0px 0px 5px #333333;
  margin: 0;
  padding: 0;
  display: none;
  float: left;
  position: absolute;
  top: 36px;
  left: 0;
  width: 188px;
  z-index: 99999;
  background-color: white;
}

/* line 71, sass/_module-menu.scss */
.menu .sub-menu .sub-menu {
  left: 100%;
  top: 0;
}

/* line 79, sass/_module-menu.scss */
.menu li:hover > ul {
  display: block;
}

/* line 88, sass/_module-menu.scss */
.menu a {
  padding: 0 8px;
  text-decoration: none;
  color: #cccccc;
  background-color: white;
  line-height: 22px;
  font-size: 14px;
}

/* line 97, sass/_module-menu.scss */
.menu li:hover > a,
.menu a:focus {
  text-decoration: underline;
}

/* line 133, sass/_module-menu.scss */
.menu .divider {
  float: left;
  line-height: 18px;
  font-weight: bold;
  color: #cccccc;
}

/* line 139, sass/_module-menu.scss */
.wf-inactive .menu .divider {
  line-height: 22px;
}

/* Full-width Menu */
/* *************** */
/* line 150, sass/_module-menu.scss */
.menu-full-width {
  float: none;
}

/* Large Menu */
/* ********** */
/* line 158, sass/_module-menu.scss */
.menu-large {
  text-transform: uppercase;
  font-family: "Segoe UI", Candara, "Bitstream Vera Sans", "DejaVu Sans", "Bitstream Vera Sans", "Trebuchet MS", Verdana, "Verdana Ref", sans-serif;
  font-weight: 400;
}

/* line 172, sass/_module-menu.scss */
.menu-large a:link,
.menu-large a:visited,
.menu-large a:hover,
.menu-large a:active {
  line-height: 36px;
  font-size: 12px;
  padding-left: 10px;
  padding-right: 10px;
  background-color: #f9b000;
  color: #1d1d1b;
}

/*
	Normally <li> elments are transparent so the user sees whatever rounded
	corners we specified for the container element. Since WP applies .current-menu-item
	to <Li> elements and we style it we need to re-specify our desired rounded corners
	as the background on the <li> will paint over any backgound we set on the container element.
*/
/* line 188, sass/_module-menu.scss */
.menu-large .current-menu-item {
  background-color: #1d1d1b;
  color: #f9b000;
}

/* line 199, sass/_module-menu.scss */
.menu-large li:hover > a,
.menu-large a:focus {
  text-decoration: none;
  color: white;
  background-color: #e30613;
}

/* Large Vertical Menu */
/* ******************* */
/* line 225, sass/_module-menu.scss */
.menu-large-vertical li {
  float: none;
}

/* line 228, sass/_module-menu.scss */
.menu-large-vertical a {
  float: none;
}

/* Medium Menu */
/* *********** */
/* line 249, sass/_module-menu.scss */
.menu-medium {
  text-transform: uppercase;
  font-family: "Segoe UI", Candara, "Bitstream Vera Sans", "DejaVu Sans", "Bitstream Vera Sans", "Trebuchet MS", Verdana, "Verdana Ref", sans-serif;
  font-weight: 400;
}

/* line 262, sass/_module-menu.scss */
.menu-medium a:link,
.menu-medium a:visited,
.menu-medium a:hover,
.menu-medium a:active {
  line-height: 36px;
  font-size: 12px;
  padding-left: 10px;
  padding-right: 10px;
  background-color: #999999;
  color: white;
}

/*
	Normally <li> elments are transparent so the user sees whatever rounded
	corners we specified for the container element. Since WP applies .current-menu-item
	to <Li> elements and we style it we need to re-specify our desired rounded corners
	as the background on the <li> will paint over any backgound we set on the container element.
*/
/* line 278, sass/_module-menu.scss */
.menu-medium .current-menu-item {
  background-color: #333333;
  color: white;
}

/* line 289, sass/_module-menu.scss */
.menu-medium li:hover > a,
.menu-medium a:focus {
  text-decoration: none;
  color: white;
  background-color: #111111;
}

/* 2011 menu code
-------------------------------------------------------------- */
/*
extending widgets based on their content type isn't the most reusable - they should be extended based on how they look on the page e.g. the links widget and seawrch widget might have the same look & feel. 
extending based on the PHP structures is transfering that layer into the CSS layer
so how do i go about styling the content of a module?

When you write this:
<classA> <classB> {
}
	you are saying "classB is connected to classA and will *never* appear without it
	you are saying: classB is part of the classA object and cannot exist on it's own


*/
/*
	Widget structure:

		<aside id="{unique-id}" class="widget {extension-class}">
			<h3 class="widget-title">Blogroll</h3>
			{widget-content}
		</aside>

	* We depend on this never changing
	* Our CSS classes should never affect {widget-content} 

A good test is that in the developer tools elements part of the widget structure should only get styles from this section or the defaults we setup
*/
/* line 51, sass/_widget-all.scss */
.widget .widget-title {
  margin: 5px;
}

/* line 56, sass/_widget-all.scss */
.widget {
  border-radius: 5px;
}

/* line 61, sass/_widget-all.scss */
.widget .widget-title {
  font-style: italic;
}

/* Assistive Text */
/* ************** */
/* line 11, sass/_assistive-text.scss */
.assistive-text {
  position: fixed !important;
  clip: rect(1px 1px 1px 1px);
  /* IE6, IE7 */
  clip: rect(1px, 1px, 1px, 1px);
  background: white;
  border: 1px solid #333333;
  color: black;
  font-size: 14px;
  top: 5%;
  left: 7.6%;
  z-index: 1000;
}

/* If an assistive-text hyperlink within a menu is active or gets focus, make it visible */
/* line 44, sass/_assistive-text.scss */
.menu a.assistive-text:active,
.menu a.assistive-text:focus {
  clip: auto !important;
  text-decoration: underline;
}

/**
 * Print styles.
 *
 * Inlined to avoid required HTTP connection: www.phpied.com/delay-loading-your-print-css/
 * Tweaked from https://github.com/h5bp/html5-boilerplate/blob/master/css/style.css
 */
@media print {
  /* line 11, sass/_mq-print.scss */
  a, a:visited {
    color: #444 !important;
    text-decoration: underline;
  }

  /* line 16, sass/_mq-print.scss */
  a[href]:after {
    content: " (" attr(href) ")";
  }

  /* line 19, sass/_mq-print.scss */
  abbr[title]:after {
    content: " (" attr(title) ")";
  }

  /* line 22, sass/_mq-print.scss */
  .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after {
    content: "";
  }

  /* Don't show links for images, or javascript/internal links. */
  /* line 25, sass/_mq-print.scss */
  pre, blockquote {
    border: 1px solid #999;
    page-break-inside: avoid;
  }

  /* line 26, sass/_mq-print.scss */
  thead {
    display: table-header-group;
  }

  /* css-discuss.incutio.com/wiki/Printing_Tables */
  /* line 27, sass/_mq-print.scss */
  tr, img {
    page-break-inside: avoid;
  }

  @page {
    margin: 0.5cm;
}

  /* line 29, sass/_mq-print.scss */
  p, h2, h3 {
    orphans: 3;
    widows: 3;
  }

  /* line 30, sass/_mq-print.scss */
  h2, h3 {
    page-break-after: avoid;
  }
}
/* Header Search Form */
/* ****************** */
/* line 27, sass/_pt-all.scss */
.search-form {
  margin-top: 5em;
  position: relative;
}
/* line 32, sass/_pt-all.scss */
.search-form .field {
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  -o-border-radius: 5px;
  -ms-border-radius: 5px;
  -khtml-border-radius: 5px;
  border-radius: 5px;
  padding: 3px;
  border: 1px solid #1d1d1b;
  width: 100%;
  font-size: 16px;
  font-family: "Segoe UI", Candara, "Bitstream Vera Sans", "DejaVu Sans", "Bitstream Vera Sans", "Trebuchet MS", Verdana, "Verdana Ref", sans-serif;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
  *behavior: url("js/box-sizing-polyfill/boxsizing.htc");
  /* @hack IE 6/7 box-sizing fix */
  line-height: 16px !important;
  /*
  Firefox UA stylesheet specifies
  	line-height: normal !important;
  and we can't override it so we have to use height here.
  really???
  More at http://www.cssnewbie.com/input-button-line-height-bug/
  */
  height: 30px;
}
/* line 60, sass/_pt-all.scss */
.search-form .submit {
  position: absolute;
  top: 8px;
  right: 5px;
  z-index: 1;
}

/* line 69, sass/_pt-all.scss */
.site-logo img {
  margin-top: 1em;
  width: 350px;
  margin-left: -1em;
}

/* line 74, sass/_pt-all.scss */
.flames-logo {
  width: 350px;
  position: absolute;
  bottom: 0;
  right: 0;
}

/* line 80, sass/_pt-all.scss */
.site-header-container {
  background-color: #1d1d1b;
}

/* line 83, sass/_pt-all.scss */
.site-header {
  position: relative;
}

/* line 86, sass/_pt-all.scss */
.site-footer-container {
  background-color: #fcfced;
}

/* line 89, sass/_pt-all.scss */
.primary-menu {
  position: relative;
  margin-top: 5em;
}

/* line 100, sass/_pt-all.scss */
.main .secondary .widget {
  margin-top: 1em;
}

@media screen and (max-width: 700px) {
  /* line 3, sass/_starter-media-queries.scss */
  .secondary img {
    border: 5px solid blue;
  }
}
/**
 * Media queries for responsive design.
 *
 * These follow after primary styles so they will successfully override.
 */
@media all and (orientation:portrait) {
  /* Style adjustments for portrait mode goes here. */
}
@media all and (orientation:landscape) {
  /* Style adjustments for landscape mode goes here. */
}
/* Grade-A Mobile Browsers (Opera Mobile, Mobile Safari, Android Chrome)
   consider this: www.cloudfour.com/css-media-query-for-mobile-is-fools-gold/ */
@media screen and (max-device-width: 480px) {
  /* line 27, sass/_starter-media-queries.scss */
  .secondary img {
    border: 5px solid blue;
  }

  /* Uncomment if you don't want iOS and WinMobile to mobile-optimize the text for you:
     j.mp/textsizeadjust */
  /* html { -webkit-text-size-adjust:none; -ms-text-size-adjust:none; } */
}
/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
  /* Styles */
}
/* Smartphones (landscape) ----------- */
@media only screen
and (min-width : 321px) {
  /* Styles */
}
/* Smartphones (portrait) ----------- */
@media only screen
and (max-width : 320px) {
  /* Styles */
}
/* iPads (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
  /* Styles */
}
/* iPads (landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
  /* Styles */
}
/* iPads (portrait) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
  /* Styles */
}
/* Desktops and laptops ----------- */
@media only screen
and (min-width : 1224px) {
  /* Styles */
}
/* Large screens ----------- */
@media only screen
and (min-width : 1824px) {
  /* Styles */
}
/* iPhone 4 ----------- */
@media only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5) {
  /* Styles */
}
/* Selectors used on 2+ templates */
/* Selectors that match on 2+ templates */
/* ************************************ */
/*
criteria for a style going in the base class
* Will *all* instances of this element have this style
* the goal is to make the CSS as lean as possible not follow a particular best practices that don't make sense in this case

* will the base calss be used on it's own? or will the user be forced to use base and an extension to get a usable button?
The base class should represent the _most_commonly_used_ variant of button.

default skins
+ you don't have to apply 2 classnames to your code - your base class is usable straight out of the box
- you might have to override more selectors in the classes that extend your base to change the look - this means more CSS text

So when choosing a name, instead of asking "what is the content here" (the semantic approach) I ask "what is the UI function here" (my OOCSS way).
IDs are for fragment identifiers (in-document permalinks)  and javascript getElementById() if you style on IDs you setup a dependency between JS and CSS - any changes to your CSS/markup force your JS to change too
 using a classname, however absurd you make it, will still carry less weight and will not override the cascade.

Your priorities should be:
1. productivity
2. reuse
3. cruft avoidance
*/
/* line 26, sass/_module-ctabutton.scss */
.ctabutton {
  display: inline-block;
  -webkit-box-shadow: 1px 1px 2px 0px rgba(0, 0, 0, 0.5);
  -moz-box-shadow: 1px 1px 2px 0px rgba(0, 0, 0, 0.5);
  box-shadow: 1px 1px 2px 0px rgba(0, 0, 0, 0.5);
  border-width: 0px;
  border-style: none;
  font-family: "Segoe UI", Candara, "Bitstream Vera Sans", "DejaVu Sans", "Bitstream Vera Sans", "Trebuchet MS", Verdana, "Verdana Ref", sans-serif;
  text-align: center;
  text-decoration: none;
  border-color: rgba(0, 0, 0, 0);
  cursor: pointer;
}

/* line 45, sass/_module-ctabutton.scss */
.ctabutton-large {
  padding: 0 1em;
  line-height: 2em;
  font-size: 1em;
}

/* line 55, sass/_module-ctabutton.scss */
.ctabutton-full-width {
  padding-left: 0;
  padding-right: 0;
  display: block;
}

/* line 67, sass/_module-ctabutton.scss */
.ctabutton-red {
  color: #1d1d1b;
  background: #f9b000;
}

/* line 76, sass/_module-ctabutton.scss */
.ctabutton-red:link,
.ctabutton-red:visited,
.ctabutton-red:hover,
.ctabutton-red:active {
  color: white;
  text-decoration: none;
  font-weight: bold;
  text-transform: uppercase;
}

/* line 82, sass/_module-ctabutton.scss */
.ctabutton-red:hover {
  background: #b2050e;
  /* Old browsers */
  background: -moz-linear-gradient(top, #b2050e 0%, #e30613 100%);
  /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #b2050e), color-stop(100%, #e30613));
  /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #b2050e 0%, #e30613 100%);
  /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #b2050e 0%, #e30613 100%);
  /* Opera 11.10+ */
  background: -ms-linear-gradient(top, #b2050e 0%, #e30613 100%);
  /* IE10+ */
  background: linear-gradient(top, #b2050e 0%, #e30613 100%);
  /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#b2050e', endColorstr='#e30613',GradientType=0 );
  /* IE6-9 */
  text-decoration: none;
  -webkit-box-shadow: inset 0px -1px 1px rgba(0, 0, 0, 0.09);
  -moz-box-shadow: inset 0px -1px 1px rgba(0, 0, 0, 0.09);
  box-shadow: inset 0px -1px 1px rgba(0, 0, 0, 0.09);
}

/*
User generated content is pulled into the theme via get_content();
Whatever wrapper you put on it is up to the theme author
WP default themes use .wysiwyg
what does the "entry" mean

http://codex.wordpress.org/CSS
http://codex.wordpress.org/Styling_Images_in_Posts_and_Pages

Our theme sets the width of user generated content areas to XXXX

Notes on TinyMCE generated content
----------------------------------

*   used <del> for strikethrough
*   sets <p style="text-align: justify|left|center|right;"> for alignment - creates the p tag if necessary
*   Indents in visual tab do <p style="padding-left: 30px;"> in 30px increments ? how do i change this metric?
*   preformatted style: puts text bwtween <pre>
*   address style: puts text between <address>

adding a caption to an image generates
    [caption id="attachment_204" align="alignnone" width="150" caption="Outdoors Mark"]
    <img class="size-full wp-image-204" title="Outdoors Mark Certified"
    src="http://www.canyonswing.co.nz/new/wp-content/uploads/2011/12/outdoors_mark.gif"
    alt="Outdoors Mark Certified" width="150" height="172" />[/caption]
which generates
    <div id="attachment_204" class="wp-caption alignnone" style="width: 160px">
    <img class="size-full wp-image-204" title="Outdoors Mark Certified"
    src="http://www.canyonswing.co.nz/new/wp-content/uploads/2011/12/outdoors_mark.gif" alt="Outdoors Mark Certified" width="150" height="172">
    <p class="wp-caption-text">Outdoors Mark</p></div>

*   inserted images get 3 classes applied:
        alignment: align{left|right|center|none}
        size: size-{thumbnail|medium|large|full}
        image id: wp-image-XXX
    they also get a width & a height applied to the <img element that can be used to shink it from it's original size
    <img class="alignment-class size-class wp-imageXXX" widht="specified width" height="specified-height" alt="alt-text" title="title-text">
    a center aligned image has aligncenter applied to it and <p style="text-align: center;"></p> wrapped around it.

*   We have to break the OOCSS class only selector rule here because we can't control
    the markup that TinyMCE generates.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
*/
/*
    This class is appled to all areas of the page that are created by TinyMCE.
    It is applied to the container element but does not style the container element. It
    only styles the content of that container.
    *   This allows this class to be applied to many types of containers.
    *   I called this class .wysiwyg because not all user generated content is from TinyMCE
        and these styles are just for TinyMCE content.
*/
/* line 56, sass/_module-wysiwyg.scss */
.wysiwyg {
  overflow: hidden;
  padding: 1em;
}
/* line 87, sass/_module-wysiwyg.scss */
.wysiwyg h1,
.wysiwyg h2,
.wysiwyg h3,
.wysiwyg h4,
.wysiwyg h5,
.wysiwyg h6 {
  clear: both;
}
/* line 100, sass/_module-wysiwyg.scss */
.wysiwyg img {
  margin: 1em;
  border: 1px solid #1d1d1b;
  padding: 0.5em;
}
/* line 108, sass/_module-wysiwyg.scss */
.wysiwyg .alignright {
  float: right;
  clear: both;
  margin-top: 0;
}
/* line 114, sass/_module-wysiwyg.scss */
.wysiwyg .alignleft {
  float: left;
  clear: both;
  margin-top: 0;
}
/* line 119, sass/_module-wysiwyg.scss */
.wysiwyg .aligncenter {
  display: block;
  margin: 1em auto;
}
/* line 124, sass/_module-wysiwyg.scss */
.wysiwyg .alignnone {
  margin: 1em 4em 4em 0;
}
/* line 131, sass/_module-wysiwyg.scss */
.wysiwyg .size-full {
  max-width: 100%;
}
/* line 136, sass/_module-wysiwyg.scss */
.wysiwyg .size-large {
  max-width: 100%;
}
/* line 140, sass/_module-wysiwyg.scss */
.wysiwyg .size-medium {
  max-width: 100%;
}
/* line 143, sass/_module-wysiwyg.scss */
.wysiwyg .size-thumbnail {
  max-width: 100%;
}
/* line 150, sass/_module-wysiwyg.scss */
.wysiwyg a img.alignright {
  float: right;
  margin: 1em 0 4em 4em;
}
/* line 154, sass/_module-wysiwyg.scss */
.wysiwyg a img.alignnone {
  margin: 1em 4em 4em 0;
}
/* line 157, sass/_module-wysiwyg.scss */
.wysiwyg a img.alignleft {
  float: left;
  margin: 1em 4em 4em 0;
}
/* line 161, sass/_module-wysiwyg.scss */
.wysiwyg a img.aligncenter {
  display: block;
  margin-left: auto;
  margin-right: auto;
}
/* line 170, sass/_module-wysiwyg.scss */
.wysiwyg .wp-caption {
  border: 1px solid #1d1d1b;
  max-width: 96%;
  padding: 5px 3px 10px;
  text-align: center;
  margin: 1em 0;
}
/* line 179, sass/_module-wysiwyg.scss */
.wysiwyg .wp-caption.alignnone {
  margin: 1em;
}
/* line 183, sass/_module-wysiwyg.scss */
.wysiwyg .wp-caption.alignleft {
  margin: 1em 1em 1em 0;
}
/* line 187, sass/_module-wysiwyg.scss */
.wysiwyg .wp-caption.alignright {
  margin: 1em 0 1em 1em;
}
/* line 191, sass/_module-wysiwyg.scss */
.wysiwyg .wp-caption img {
  border: 0 none;
  height: auto;
  margin: 0;
  max-width: 98.5%;
  padding: 0;
  width: auto;
}
/* line 199, sass/_module-wysiwyg.scss */
.wysiwyg .wp-caption p.wp-caption-text {
  font-size: 80%;
  line-height: 1;
  margin: 0;
  padding: 0 1em 1em 1em;
}
/* line 207, sass/_module-wysiwyg.scss */
.wysiwyg .wp-smiley {
  margin: 0 !important;
  max-height: 1em;
}

/* @group ALLIB Testimonial Widget */
/* ================================================ */
/* line 3, sass/_widget-allib-testimonial.scss */
.testimonial {
  margin: 20px 5px;
}

/* line 6, sass/_widget-allib-testimonial.scss */
.testimonial .quote {
  margin: 0;
}

/* line 9, sass/_widget-allib-testimonial.scss */
.testimonial .author {
  font-weight: bold;
  text-align: right;
}

/* @group ALLIB Contact Details Widget */
/* ================================================ */
/* line 13, sass/_widget-allib-contact-details.scss */
.contact-details dd {
  margin: 0 0 1em 0;
}

/* line 18, sass/_widget-allib-contact-details.scss */
.contact-details .label {
  font-weight: bold;
}

/* Search Widget */
/* ************* */
/* @group Comments taken straight from TwentyEleven */
/* ====================================== */
/* line 4, sass/_comments.scss */
#comments-title {
  color: #666;
  font-size: 10px;
  font-weight: 500;
  line-height: 2.6em;
  padding: 0 0 2.6em;
  text-transform: uppercase;
}

/* line 13, sass/_comments.scss */
.nopassword,
.nocomments {
  color: #aaa;
  font-size: 24px;
  font-weight: 100;
  margin: 26px 0;
  text-align: center;
}

/* line 20, sass/_comments.scss */
.commentlist {
  list-style: none;
  margin: 0 auto;
  width: 68.9%;
}

/* line 26, sass/_comments.scss */
.content .commentlist,
.page-template-sidebar-page-php .commentlist {
  width: 100%;
  /* reset the width for the one-column and sidebar page layout */
}

/* line 29, sass/_comments.scss */
.commentlist > li.comment {
  background: #f6f6f6;
  border: 1px solid #ddd;
  -moz-border-radius: 3px;
  border-radius: 3px;
  margin: 0 0 1.625em;
  padding: 1.625em;
  position: relative;
}

/* line 38, sass/_comments.scss */
.commentlist .pingback {
  margin: 0 0 1.625em;
  padding: 0 1.625em;
}

/* line 42, sass/_comments.scss */
.commentlist .children {
  list-style: none;
  margin: 0;
}

/* line 46, sass/_comments.scss */
.commentlist .children li.comment {
  background: #fff;
  border-left: 1px solid #ddd;
  -moz-border-radius: 0 3px 3px 0;
  border-radius: 0 3px 3px 0;
  margin: 1.625em 0 0;
  padding: 1.625em;
  position: relative;
}

/* line 55, sass/_comments.scss */
.commentlist .children li.comment .fn {
  display: block;
}

/* line 58, sass/_comments.scss */
.comment-meta .fn {
  font-style: normal;
}

/* line 61, sass/_comments.scss */
.comment-meta {
  color: #666;
  font-size: 12px;
  line-height: 2.2em;
}

/* line 66, sass/_comments.scss */
.commentlist .children li.comment .comment-meta {
  line-height: 1.625em;
  margin-left: 50px;
}

/* line 70, sass/_comments.scss */
.commentlist .children li.comment .comment-content {
  margin: 1.625em 0 0;
}

/* line 73, sass/_comments.scss */
.comment-meta a {
  font-weight: bold;
}

/* line 80, sass/_comments.scss */
.commentlist .avatar {
  -moz-border-radius: 3px;
  border-radius: 3px;
  -webkit-box-shadow: 0 1px 2px #ccc;
  -moz-box-shadow: 0 1px 2px #ccc;
  box-shadow: 0 1px 2px #ccc;
  left: -102px;
  padding: 0;
  position: absolute;
  top: 0;
}

/* line 91, sass/_comments.scss */
.commentlist > li:before {
  content: url(images/comment-arrow.png);
  left: -21px;
  position: absolute;
}

/* line 96, sass/_comments.scss */
.commentlist > li.pingback:before {
  content: '';
}

/* line 99, sass/_comments.scss */
.commentlist .children .avatar {
  background: none;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  left: 2.2em;
  padding: 0;
  top: 2.2em;
}

/* line 108, sass/_comments.scss */
a.comment-reply-link {
  background: #eee;
  -moz-border-radius: 3px;
  border-radius: 3px;
  color: #666;
  display: inline-block;
  font-size: 12px;
  padding: 0 8px;
  text-decoration: none;
}

/* line 120, sass/_comments.scss */
a.comment-reply-link:hover,
a.comment-reply-link:focus,
a.comment-reply-link:active {
  background: #888;
  color: #fff;
}

/* line 124, sass/_comments.scss */
a.comment-reply-link > span {
  display: inline-block;
  position: relative;
  top: -1px;
}

/* Post author highlighting */
/* line 132, sass/_comments.scss */
.commentlist > li.bypostauthor {
  background: #ddd;
  border-color: #d3d3d3;
}

/* line 136, sass/_comments.scss */
.commentlist > li.bypostauthor .comment-meta {
  color: #575757;
}

/* line 143, sass/_comments.scss */
.commentlist > li.bypostauthor:before {
  content: url(images/comment-arrow-bypostauthor.png);
}

/* Post Author threaded comments */
/* line 148, sass/_comments.scss */
.commentlist .children > li.bypostauthor {
  background: #ddd;
  border-color: #d3d3d3;
}

/* sidebar-page.php comments */
/* Make sure we have room for our comment avatars */
/* line 156, sass/_comments.scss */
.page-template-sidebar-page-php .commentlist > li.comment,
.page-template-sidebar-page-php.commentlist .pingback {
  margin-left: 102px;
  width: auto;
}

/* And a full-width comment form */
/* line 161, sass/_comments.scss */
.page-template-sidebar-page-php #respond {
  width: auto;
}

/* Comment Form */
/* line 166, sass/_comments.scss */
#respond {
  background: #ddd;
  border: 1px solid #d3d3d3;
  -moz-border-radius: 3px;
  border-radius: 3px;
  margin: 0 auto 1.625em;
  padding: 1.625em;
  position: relative;
  width: 68.9%;
}

/* line 177, sass/_comments.scss */
#respond input[type="text"],
#respond textarea {
  background: #fff;
  border: 4px solid #eee;
  -moz-border-radius: 5px;
  border-radius: 5px;
  -webkit-box-shadow: inset 0 1px 3px rgba(204, 204, 204, 0.95);
  -moz-box-shadow: inset 0 1px 3px rgba(204, 204, 204, 0.95);
  box-shadow: inset 0 1px 3px rgba(204, 204, 204, 0.95);
  position: relative;
  padding: 10px;
  text-indent: 80px;
}

/* line 192, sass/_comments.scss */
#respond .comment-form-author,
#respond .comment-form-email,
#respond .comment-form-url,
#respond .comment-form-comment {
  position: relative;
}

/* line 198, sass/_comments.scss */
#respond .comment-form-author label,
#respond .comment-form-email label,
#respond .comment-form-url label,
#respond .comment-form-comment label {
  background: #eee;
  -webkit-box-shadow: 1px 2px 2px rgba(204, 204, 204, 0.8);
  -moz-box-shadow: 1px 2px 2px rgba(204, 204, 204, 0.8);
  box-shadow: 1px 2px 2px rgba(204, 204, 204, 0.8);
  color: #555;
  display: inline-block;
  font-size: 13px;
  left: 4px;
  min-width: 60px;
  padding: 4px 10px;
  position: relative;
  top: 40px;
  z-index: 1;
}

/* line 214, sass/_comments.scss */
#respond input[type="text"]:focus,
#respond textarea:focus {
  text-indent: 0;
  z-index: 1;
}

/* line 218, sass/_comments.scss */
#respond textarea {
  resize: vertical;
  width: 95%;
}

/* line 223, sass/_comments.scss */
#respond .comment-form-author .required,
#respond .comment-form-email .required {
  color: #bd3500;
  font-size: 22px;
  font-weight: bold;
  left: 75%;
  position: absolute;
  top: 45px;
  z-index: 1;
}

/* line 233, sass/_comments.scss */
#respond .comment-notes,
#respond .logged-in-as {
  font-size: 13px;
}

/* line 236, sass/_comments.scss */
#respond p {
  margin: 10px 0;
}

/* line 239, sass/_comments.scss */
#respond .form-submit {
  float: right;
  margin: -20px 0 10px;
}

/* line 243, sass/_comments.scss */
#respond input#submit {
  background: #222;
  border: none;
  -moz-border-radius: 3px;
  border-radius: 3px;
  -webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3);
  -moz-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3);
  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3);
  color: #eee;
  cursor: pointer;
  font-size: 15px;
  margin: 20px 0;
  padding: 5px 42px 5px 22px;
  position: relative;
  left: 30px;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);
}

/* line 260, sass/_comments.scss */
#respond input#submit:active {
  background: #1982d1;
  color: #bfddf3;
}

/* line 264, sass/_comments.scss */
#respond #cancel-comment-reply-link {
  color: #666;
  margin-left: 10px;
  text-decoration: none;
}

/* line 270, sass/_comments.scss */
#respond .logged-in-as a:hover,
#respond #cancel-comment-reply-link:hover {
  text-decoration: underline;
}

/* line 273, sass/_comments.scss */
.commentlist #respond {
  margin: 1.625em 0 0;
  width: auto;
}

/* line 277, sass/_comments.scss */
#reply-title {
  color: #373737;
  font-size: 24px;
  font-weight: bold;
  line-height: 30px;
}

/* line 283, sass/_comments.scss */
#cancel-comment-reply-link {
  color: #888;
  display: block;
  font-size: 10px;
  font-weight: normal;
  line-height: 2.2em;
  letter-spacing: 0.05em;
  position: absolute;
  right: 1.625em;
  text-decoration: none;
  text-transform: uppercase;
  top: 1.1em;
}

/* line 298, sass/_comments.scss */
#cancel-comment-reply-link:focus,
#cancel-comment-reply-link:active,
#cancel-comment-reply-link:hover {
  color: #ff4b33;
}

/* line 301, sass/_comments.scss */
#respond label {
  line-height: 2.2em;
}

/* line 304, sass/_comments.scss */
#respond input[type=text] {
  display: block;
  height: 24px;
  width: 75%;
}

/* line 309, sass/_comments.scss */
#respond p {
  font-size: 12px;
}

/* line 312, sass/_comments.scss */
p.comment-form-comment {
  margin: 0;
}

/* line 315, sass/_comments.scss */
.form-allowed-tags {
  display: none;
}

/* @group Post navigation taken straight from TwentyEleven */
/* ====================================== */
/* line 3, sass/_post-navigation.scss */
#content nav {
  clear: both;
  overflow: hidden;
  padding: 0 0 1.625em;
}

/* line 8, sass/_post-navigation.scss */
#content nav a {
  font-size: 12px;
  font-weight: bold;
  line-height: 2.2em;
}

/* line 13, sass/_post-navigation.scss */
#nav-above {
  padding: 0 0 1.625em;
}

/* line 16, sass/_post-navigation.scss */
#nav-above {
  display: none;
}

/* line 19, sass/_post-navigation.scss */
.paged #nav-above {
  display: block;
}

/* line 22, sass/_post-navigation.scss */
.nav-previous {
  float: left;
  width: 50%;
}

/* line 26, sass/_post-navigation.scss */
.nav-next {
  float: right;
  text-align: right;
  width: 50%;
}

/* line 31, sass/_post-navigation.scss */
#content nav .meta-nav {
  font-weight: normal;
}

/* Singular navigation */
/* line 36, sass/_post-navigation.scss */
#nav-single {
  float: right;
  position: relative;
  top: -0.3em;
  text-align: right;
  width: 100%;
  z-index: 1;
}

/* line 45, sass/_post-navigation.scss */
#nav-single .nav-previous,
#nav-single .nav-next {
  float: none;
  width: auto;
}

/* line 49, sass/_post-navigation.scss */
#nav-single .nav-next {
  padding-left: .5em;
}

/*
 * Non-semantic helper classes
 *
 * Criteria for entry:
 *		No selectors that will automatically apply to elements - classes only!
 *		Should be reusable across many sites
 */
/* line 9, sass/_lib-helpers.scss */
.center-text {
  text-align: center;
}

/*
Add the .ir class to any element you are applying image-replacement to. 
Be sure to include background-image: url(pathtoimage.png); for that specific element so that image replacement can occur.

<a> can wrap other tags in HTML5
	The text content of the H1 will be replaced with the background image

	Logo Markup 
	===========

	Method 1: <h1> with a background style (Image replacement)
	---------------------------

	<a href="/" rel="home"> <h1 id="site-title" class="site-title ir"><?php bloginfo( 'name' ); ?></h1> </a>

	.site-title {
		background-image: url('path/to/image.jpg');
	}
	.ir {
		display: block : Without this, image-replacement won't work on inline elements (e.g. span)
		border: 0 : Remove the default border from elements like button
		text-indent: -999em : Hide the text off-screen
		overflow: hidden : Clip the text and prevent the focus outline from extending off-screen in some browsers.
		background-color: transparent : Hide the default background color on elements like button
		background-repeat: no-repeat : Prevent tiling of the background image
		text-align: left : Make sure the text is left aligned for the negative text-indent to work
		direction: ltr : Avoid problems with the off-screen text in rtl settings
		*line-height: 0 : hide text of submit inputs in ie6/7
		.ir br { display: none; } : hide line breaks within the element as these mess up the off-screen positioning of the text
	}

	Pros/Cons
	+	the text that users who can't see images see is in H1 tags to indicate it is important
	+	the logo is clickable
	=	the user can't right-click on the logo to download 
	-	the user who has CSS turned on will not see the text
	-	It might be seen by google as a trick; See http://www.youtube.com/watch?v=fBLvn_WkDJ4
	-	http://luigimontanez.com/2010/stop-using-text-indent-css-trick/
	-	http://maileohye.com/html-text-indent-not-messing-up-your-rankings/

	Method 2: Inline image
	----------------------

	<a href="/" rel="home">
		<img src="foo.jpg" alt="<?php bloginfo('name'); ?>">
		<!--
			* Only add this on pages where the foremost title on the page should be the same text as the logo - on other pages the h1 should be separate
		-->
		<h1 class="visuallyhidden focusable"><?php bloginfo('name'); ?>"></h1>
	</a>

	<a  class="visuallyhidden focusable" href="/" rel="home">
		<!--
			* Only add this on pages where the foremost title on the page should be the same text as the logo
			? should the visually hidden be on the a or the h1?
			the blockquote thing is andy malarkey
		-->
		<h1><?php bloginfo('name'); ?>"></h1>
		<blockquote>
			This is my logo tagline	
		</blockquote>
	</a>


	Pros/cons
	+	google likes this method
	+	allows the logo to persist regardless of styles
	+	means the logo is resizable (a background image cannot be resized as easily)


	http://csswizardry.com/2010/10/your-logo-is-an-image-not-a-h1/
		The organisation's logo is *content* not *style* - it does not depend on the look & feel of the site
		The <h1> tag is the uppermost, all encompassing title of a page - it might be the same words as the logo on a site homepage but probably not on other pages
		If I use <h1. for the logo, I have to start the page titles on <h2> and this is wrong.
		<h1> is one of 
		The homepage might not display a h1 but it should have on
		It needs the logo to be an image but it also needs a h1 tag somewhere - can use the 'visuallyhidden' class here to hide it from all but screen-readers

	Conclusion
	----------

	Inline image is best
*/
/* For image replacement */
/* line 99, sass/_lib-helpers.scss */
.ir {
  display: block;
  border: 0;
  text-indent: -999em;
  overflow: hidden;
  background-color: transparent;
  background-repeat: no-repeat;
  text-align: left;
  direction: ltr;
  *line-height: 0;
}

/* line 100, sass/_lib-helpers.scss */
.ir br {
  display: none;
}

/* Hide from both screenreaders and browsers: h5bp.com/u */
/* line 103, sass/_lib-helpers.scss */
.hidden {
  display: none !important;
  visibility: hidden;
}

/* Hide only visually, but have it available for screenreaders: h5bp.com/v */
/* line 106, sass/_lib-helpers.scss */
.visuallyhidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

/* Extends the .visuallyhidden class to allow the element to be focusable when navigated to via the keyboard: h5bp.com/p */
/* line 109, sass/_lib-helpers.scss */
.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus {
  clip: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  position: static;
  width: auto;
}

/* Hide visually and from screenreaders, but maintain layout */
/* line 112, sass/_lib-helpers.scss */
.invisible {
  visibility: hidden;
}

/* Selectors used on exactly 1 template (pt-{templatename}.php) */
/* @group pt-home.php
 * ****************** */
/*
 * Scope all styles under the class that WP applies to the body element.
 *	You can use .page-id-<ID> to scope selectors to a particular page -this
	replaces the need for an id tag on the body element.
 */