/*	===============================================================
	© BRIDGINGUNIT
	http://www.bridgingunit.com

	Type:				Base stylesheet
	Build by:			BridgingUnit
	Creation Date:		31 August 2012
	---------------------------------------------------------------
	INDEX
	
	01. Reset
	02. Helper (Clearfix etc)
	03. Styles (for 320 and up)
	
			Web Fonts - should only be applied once hit device width likely to support (600px ?)
	
			Structure
	
				Grid
		
				Generic Component Layouts
					Header
					Navigation
					Siteinfo/footer
					etc.
			
				Page Specific Layouts
	
			Typography
			
				Headlines
				Links	
				Lists
				Forms
				Buttons
				Tables
				Other elements
	
			Misc classes
			
	04. Media-queries
	05. Print

	---------------------------------------------------------------
	COLOUR PALETTE
	
		Add references here - Hex and RGB (for use in CSS3)
	

	---------------------------------------------------------------
	GUIDELINES
	
	* 	Keep declarations flush left.
		Example:

		.something,
		.something-else {
			display: block;
		}
		
	* 	Indent where there is an implicit/explicit parent > child relationship.
		Example:
		
		ul{
			...
		}
			li{
				...
			}

	* 	Use pixels and progress to rems (font-size has been adjusted in the reset). 
	  	More info: http://snook.ca/archives/html_and_css/font-size-with-rem
	  	Example:

		body { 
			font-size: 14px; 
			font-size: 1.4rem; 
		}

	* Width in px or %. Heights auto or rems (with px fallback).
	
	* Add comments!
	
	===============================================================
	Version number: 	1.0
	Last edited:		31 August 2012
	===============================================================
	
	BASE				Provides a foundation:
						Resets basic browser styling,
	 					Sets some defaults,
						Imports further linked stylesheets
	
	--------------------------------------------------------------- 
*/
/* 
	---------------------------------------------------------------
	= 1. Reset styles 
	
	TODO: 
	Consider if want to keep deprecated elements in rather than out.
	---------------------------------------------------------------
*/

/* 
	html5doctor.com Reset Stylesheet (Eric Meyer's Reset Reloaded + HTML5 baseline)
	v1.6.1 Last Updated: 2010-09-17|
	Authors: Eric Meyer & Richard Clark
	http://meyerweb.com/eric/tools/css/reset/
	html5doctor.com/html-5-reset-stylesheet/
*/
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
	margin:0;
	padding:0;
	border:0;
	outline:0;
	font-size:100%;
	vertical-align:baseline;
	background:transparent;
	list-style:none;
}                  

/* 	Unitless line-height */
body {
	line-height: 1;
}

/* 	HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section { 
    display:block;
}

/* Remember to define focus styles! */
:focus {
outline: 0;
}

blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}

a {
    margin:0;
    padding:0;
    font-size:100%;/* TODO: check whether this is really necessary */
    vertical-align:baseline;
    background:transparent;
}

/* 	Change colours to suit your needs */
ins {
    background-color:#ff9;
    color:#000;
    text-decoration:none;
}

/* 	Change colours to suit your needs */
mark {
    background-color:#ff9;
    color:#000; 
    font-style:italic;
    font-weight:bold;
}

del {
	text-decoration: line-through;
}

/* 	Tables may still need 'cellspacing="0"' in the markup */
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* 	Change border colour to suit your needs */
hr {
    display:block;
    height:1px;
    border:0;   
    border-top:1px solid #CCC;
    margin:1em 0;
    padding:0;
}

input, select {
    vertical-align: middle;/* Was middle TODO: check which works best */
}
button, textarea {
	vertical-align: middle;/* Added */
}

/* 	
	BU: Adjusted rules 
*/

/* 	As per original Meyer reset */
ol, ul {
	list-style: none;
}

/* 	As per Boston Globe to add dotted only on hover */
abbr[title],
dfn[title] {
	border-bottom: none;
	cursor: help;
}
abbr[title]:hover,
dfn[title]:hover {
	border-bottom: 1px dotted;
}

/* 	
	BU: Additional rules 
*/


html{
	/* 	Root font size
		Use percentage as is most reliable unit. 
		Adjusted so that we're starting from a base of 10 for easy calculations. 
		Alternatively, adjust to whatever you want the base font size to be, 
		i.e. 75% (equivalent to 0.75em) for 12px, 87.5% (equivalent to 0.875em) for 14px etc. 
		And then we'll only need to style exceptions to this rule rather than all. 
		10px, 12px, 16px give rounded numbers if you need to use your Maths later. */
			
	font-size: 62.5%; 

	/* 	This forces a right scrollbar area to appear in 
	   	firefox even when content is less than the viewable 
	   	area, and prevents the page content jumping about. */
	overflow-y: scroll;
	
	/* 	Better anti-aliasing 
  	-webkit-font-smoothing: antialiased; */

	/* 	Improved handling of kerning pairs and ligatures in modern browsers */
  	text-rendering: optimizeLegibility; 

	/* 	Deal with Webkit browser's assumptions about text auto-sizing e.g. on orientation change. 
		For values use %. Never 'none' (disables user sizing text).
	-webkit-text-size-adjust: 100%; */
	
}

/*  Uncenter things */
caption, th, td {
	text-align: left;
	font-weight: normal;
}

/* 	Media to scale down to fit resized dimensions 
	NOTE: be wary about use of this on pages with widgets, e.g. Googlemaps, for which you will need to unset this rule.
	TODO: add rule for IE6 (width: 100%)
*/
img, 
embed, 
object, 
video { 
	max-width: 100%; 
}

/*  Encourage IE7 to scale images more smoothly */
.lt-ie7 img { 
	-ms-interpolation-mode: bicubic; 
}

/*  Get rid of blue borders */
a img{
	border: none;
}

/* 	Nicer code blocks */
pre, code, kbd, tt, samp {
	font-family: "andale mono", monospace;
	/* Might need to adjust font-size here for old Firefox/Safari*/
}
pre {
	white-space: pre;		/* CSS2 */
	white-space: pre-wrap;	/* CSS 2.1 */
	white-space: pre-line;	/* CSS 3 (and 2.1 as well, actually) */
	word-wrap: break-word;	/* IE */
}

address {
	font-style: normal;
}

/* 	Hand cursor for clickable elements */
label, 
input[type=button], 
input[type=submit], 
button { 
	cursor: pointer; 
}

/* 	Form element alignments - checkboxes, radios, text inputs */
input[type="radio"] { 
	vertical-align: text-bottom; 
}
input[type="checkbox"] { 
	vertical-align: bottom; 
}
.lt-ie7 input[type="checkbox"] {
	vertical-align: baseline;
}
.ie6 input { 
	vertical-align: text-bottom; 
}

/* 	Prevent word wrapping on buttons 
	TODO: check other scenarios for this too, plus in other frameworks */
button{
	white-space: nowrap;
}



/* 
	---------------------------------------------------------------
	= 2. Helper styles 
	---------------------------------------------------------------
*/

/*  Clearing 

	OLD: from http://html5boilerplate.com/
	
	Use New instead if prefer
*/
.clearfix:after {
	clear: both;
	content: ' ';
	display: block;
	visibility: hidden;
	height: 0;
	font-size:0;
}
.clearfix {
	display: inline-block;
} /* Hides from IE-mac \*/
* html .clearfix {
	height: 1%;
}
.clearfix {
	display: block;
}
/*
	NEW: from http://nicolasgallagher.com/micro-clearfix-hack/
	
	Add here if prefer
*/

/*
	Hiding things
	
	TODO: add rules to hide from specific device classes ala Bootstrap (?)
*/

/* 	Hidden from both screenreaders and browsers, hiding layout */
.hidden{
	display: none;
	visibility: hidden;
}

/* 	Hidden from both screenreaders and browsers, but retain layout */
.invisible{
	visibility: hidden;
}

/* 	Skip, hidden from browsers, available to screenreaders */
.skip {
       position: absolute;
       left: -999em;
       width: 990em;
       height:0;
}

/* 	Some typographic niceities */
.strike{ 
	text-decoration: line-through; 
}
.uppercase{ 
	text-transform: uppercase; 
}

/* 	Stop wrapping, i.e. to prevent wrapping of hyphenated words mid-word */
.nowrap {
    white-space: nowrap;
}



/* Rule for dealing with viewport scaling - equivalent to meta rule in markup itself 

TODO: test this properly

@-webkit-viewport { width : device-width; }
@-moz-viewport { width : device-width; }
@-ms-viewport { width : device-width; }
@-o-viewport { width : device-width; }
@viewport { width : device-width; }
*/

	
/* 
	---------------------------------------------------------------
	= 5. Print
	---------------------------------------------------------------
	Taken from 320 and Up
	
	TODO: 
		Review/amend/extend
		Use this as the base stylesheet for least capable displays/device before any media queries etc. (?)
	---------------------------------------------------------------
*/
@media print {
  * {
    background: transparent !important;
    color: black !important;
    box-shadow: none !important;
    text-shadow: none !important;
    filter: none !important;
    -ms-filter: none !important;
  }
  @page  {
    margin: 0.5cm;
  }
  h2,
  h3 {
    orphans: 3;
    widows: 3;
    page-break-after: avoid;
  }
  p {
    orphans: 3;
    widows: 3;
  }
  pre,
  blockquote {
    border: 1px solid #808080;
    page-break-inside: avoid;
  }
  abbr[title]:after {
    content: " (" attr(title) ")";
  }
  a,
  a:visited {
    text-decoration: underline;
  }
  a[href]:after {
    content: " (" attr(href) ")";
  }
  a[href^="javascript:"]:after,
  a[href^="#"]:after {
    content: "";
  }
  img {
    max-width: 100% !important;
    page-break-inside: avoid;
  }
  thead {
    display: table-header-group;
  }
  tr {
    page-break-inside: avoid;
  }
}