/*
	SCREEN.CSS
	This is where styles for on-screen media are declaired.
	This style sheet establishes the core styles used for all resolutions before declaring the baseline 320px mobile layout.
	
	--------------------------------------------------------------------------------------------------------------------------
	FILE INFO
	Last updated:     2012/03/09
	Last updated by:  Matt Wilcox

	--------------------------------------------------------------------------------------------------------------------------
	STYLEGUIDE
	Indentation uses tabs [why: http://lea.verou.me/2012/01/why-tabs-are-clearly-superior/]

	Rules obey the following anatomy:

		selector {
			POSITIONING LINE [position,top,left,clear, ETC]
			BOX MODEL LINE [display,margin,border,padding,width, ETC]
			TYPOGRAPHY LINE [font,text-indent,font-style, ETC]
			PREFIXED PROPERTIES [-moz-,-webkit-, ETC] }

	This file is divided into the following sections:

		=global_reset         |  Brings all browsers into line 
		=vendor_enhancements  |  Fix various issues and/or enable enhancements
		=typography           |  How type looks and behaves
		=base_rules           |  Styling of raw elments
		=modules              |  Discrete components of a page [sub-divided]
		=layout               |  How modules are laid out on given pages [sub-divided]
		=page_styles          |  Over-rides for specific pages [shouldn't be used often]

	Units of measurement should always be:

		LAYOUT:       % or no unit - you do not know where your module is going on a page, so you don't know its absolute size.
		LINE-HEIGHTS: unitless, so the line height is a multiple of the current element's font-size
		TYPE:         rems for type, with em fallbacks

		See http://csswizardry.com/2011/12/measuring-and-sizing-uis-2011-style/ for details.

	----------------------------------------------------------------------------------------------------------------------- */
	
/*
	=global_reset ---------------------------------------------------------------------------------------------------------
	NOTE:       Based on Eric Meyers CSS Reset 2.0 - with a couple of edits to make it less draconian
	REFERENCE:  http://meyerweb.com/eric/tools/css/reset/
	----------------------------------------------------------------------------------------------------------------------- */
	html, body, div, span, applet, object, iframe,
	h1, h2, h3, h4, h5, h6, p, blockquote, pre,
	a, abbr, acronym, address, big, cite, code,
	del, dfn, em, img, ins, kbd, q, s, samp,
	small, strike, strong, sub, sup, tt, var,
	b, u, i, center,
	dl, dt, dd, ol, ul, li,
	fieldset, form, label, legend,
	table, caption, tbody, tfoot, thead, tr, th, td,
	article, aside, canvas, details, embed, 
	figure, figcaption, footer, header, hgroup, 
	menu, nav, output, ruby, section, summary,
	time, mark, audio, video {
		margin: 0; padding: 0; border: 0;
		font-size: 100%; font: inherit; }
	
	/* HTML5 display-role reset for older browsers */
	article, aside, details, figcaption, figure, 
	footer, header, hgroup, menu, nav, section {
		display: block; }
	table {
		border-collapse: collapse; border-spacing: 0; }

	/* form resets */
	input,
	textarea {
		border: 0; }
	
	/* lets use a sensible box model
	   REFERENCE: http://paulirish.com/2012/box-sizing-border-box-ftw */
	* {
		-moz-box-sizing    : border-box;
		-webkit-box-sizing : border-box; /* iOS4 */
		box-sizing         : border-box;
		*behavior: url(http://www.xwalacktun.ca/javascript/polyfills/boxsizing.htc); /* hack for IE7 */ }

/*
	=vendor_enhancements --------------------------------------------------------------------------------------------------
	NOTE: Fix various browser issues, and switch some vendor specific nicities on/off
	----------------------------------------------------------------------------------------------------------------------- */
	html {
		-webkit-text-size-adjust: 100%;
		-ms-text-size-adjust: 100%;
		text-rendering: optimizeLegibility; /* using kerning and ligatures http://www.aestheticallyloyal.com/public/optimize-legibility/ */ }

	/* fix webkit to stop it rendering text too thickly in cases where there is light text on dark backgrounds
	   http://orderedlist.com/our-writing/blog/articles/webkit-font-smoothing/ */
	
	a:link { -webkit-tap-highlight-color : #999; }
	
	/* Don't collapse these into one ruleset. When a browser doesn't recognise a selector it discards the whole ruleset.
	   By using vendor selectors in one ruleset you guarentee nothing will be applied */
	::-webkit-selection { background-color: #999; color: #fff; }
	::-moz-selection    { background-color: #999; color: #fff; }
	::selection         { background-color: #999; color: #fff; }

	::-webkit-input-placeholder { }
	input:-moz-placeholder      { }
	 
	/* kill input=search default styling on webkit
	input[type=search] { -webkit-appearance : none; }
	input[type="search"]::-webkit-search-decoration, 
	input[type="search"]::-webkit-search-cancel-button {
		display: none; } */
	
	input, textarea {
		-webkit-box-sizing: border-box;
		-moz-box-sizing   : border-box;
		-o-box-sizing     : border-box;
		-ms-box-sizing    : border-box;
		box-sizing        : border-box; }
		 
/*
	=typography -----------------------------------------------------------------------------------------------------------
	NOTE:       I've found that margin-top applied to everything is a pain - it often messes up layout and requires jumping
	            through hoops to fix, so I've stopped doing this as a default and now add top margin manually when required.
	REFERENCE:  Based on http://alistapart.com/articles/settingtypeontheweb/
	                     http://24ways.org/2006/compose-to-a-vertical-rhythm/
	----------------------------------------------------------------------------------------------------------------------- */
	
	 
	html,	input, select, textarea { /* font-size: 16px, line-height: 22px */
		font: 100%/1.75 Georgia, "Times New Roman", serif; }
		 
	h1, h2, h3, h4, h5, h6 {
		/* em fallback */ margin-top: 1.375em; margin-bottom : 1.375em;
		margin-top: 1.375rem; margin-bottom : 1.375rem;
		font-family: "Merienda One", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: normal;
		/* http://blogs.msdn.com/b/ie/archive/2012/01/09/css-corner-using-the-whole-font.aspx */
		-moz-font-feature-settings    : "liga=1, dlig=1";
		-ms-font-feature-settings     : "liga", "dlig";
		-webkit-font-feature-settings : "liga", "dlig";
		-o-font-feature-settings      : "liga", "dlig";
		font-feature-settings         : "liga", "dlig"; }
	
	h1 {
		/* em fallback */ font-size: 2em;
		font-size: 2rem; line-height: 1.375; letter-spacing: 0.18em;}
		
	h1:first-letter {
		font-size:200%;
		color:#F90;
	}
	
	h2 {
		/* em fallback */ font-size: 1.75em;
		font-size: 1.75rem; line-height: 1.5714285714; }
	h3, h4, h5, h6 {
		/* em fallback */ font-size: 1.375em;
		font-size: 1.375rem; line-height : 1; }
	p, ul, blockquote { 
		/* em fallback */ margin-bottom: 1.375em;
		margin-bottom: 1.375rem; }
	 
/*
	=base_rules -----------------------------------------------------------------------------------------------------------
	NOTE:  This section styles "default" elements, that is, how a <p> or <em> etc look by default, without
	       any page or class specific over-rides.
	----------------------------------------------------------------------------------------------------------------------- */
	
/*
	=html =body */

	body {
		background-color: #111;
		color: #fff;
		width : auto; margin : 0 auto; }

/*
	=q */
	q,
	blockquote > p:first-child,
	blockquote > p:last-child {
		quotes: '“' '”' '‘' '’'; } /* open then close, then new nesting level */
	q:before,
	blockquote > p:first-child:before {
		content: open-quote; }
	q:after,
	blockquote > p:last-of-type:after {
		content: close-quote; }

/*
	=blockquote */
	blockquote {
		padding : 1.375em 1em; border-left: .5em solid #999;
		background: #fff; }
	blockquote footer {
		display: block; margin-top: 1.375em; padding-top: 1.3125em; border-top: 0.0625em dotted #999; }

/*
	=sup */
	sup {
		vertical-align : top; font-size : .75em; }

	strong { font-weight: bold; }

/*
	=sub */
	sub {
		vertical-align : bottom; font-size : .75em; }

/*
	=code */
	code {
		font: .85em/1 Courier, monospace; color: #006; }
	 
/*
	=a */
	a {
		font-family: "Merienda One", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: normal;
		-webkit-transition : box-shadow linear 0.2s, background-color linear 0.2s;
		-moz-transition    : box-shadow linear 0.2s, background-color linear 0.2s;
		-o-transition      : box-shadow linear 0.2s, background-color linear 0.2s;
		-ms-transition     : box-shadow linear 0.2s, background-color linear 0.2s;
		transition         : box-shadow linear 0.2s, background-color linear 0.2s; }
	a:link    { color: #F90; text-decoration : none; }
	a:visited { color: #F90; text-decoration : none; }
	a:hover   { text-decoration : underline; }
	a:focus   { box-shadow: 0 0 6px rgba(255,255,255,1); background-color: #fff; outline: 0; }
	a:active  {  }
	/* :target   { background-color : #ff6; } */
	 
/*
  =img */
	img {
		max-width : 100%; }
	#target_hilight {
		position : absolute; }
	a img {
		margin : 0; }

/*
	=table */
	tbody tr:nth-child(2n+1) {
		background-color: rgba(0,0,0,.1); }

/*
	=forms */
	input[type="text"],
	input[type="email"],
	input[type="search"],
	textarea {
		border: 1px solid rgba(0,0,0,.9); /* 1px */
		background: rgba(76,76,76,.7); border-radius: 9px; }
	input[type="text"]:focus,
	input[type="email"]:focus,
	input[type="search"]:focus,
	textarea:focus {
		border-color: #fff;
		outline: 0; }
	
	label.focus span {
		color : #000; }

/* =div */
	
/* =span */
	label span {
		display : block; }
	label.boolean span {
		display : inline; }

/*
  =display-classes ---------------------------------------------------------------------------------------------------------
  NOTE: These are to be avoided if at all possible, it is rare they are acceptable. Do not use them for page layout!
  ----------------------------------------------------------------------------------------------------------------------- */
	.dc_left   { float: left; margin-right: 1em; }
	.dc_right  { float: right; margin-left: 1em; }

	.dc_small  { width: 20%; }
	.dc_medium { width: 40%; }
	.dc_large  { width: 60%; }

/*
  =modules --------------------------------------------------------------------------------------------------------------
  NOTE: Modules are discrete sections of data that may be used on any page, e.g., "Latest News"
  ----------------------------------------------------------------------------------------------------------------------- */    

/*
	=website header */
	#site_context  {
		margin-bottom : 0; }
	#site_context .title {
		margin : 0; }

	.banner_text {
		font-family: Helvetica, Arial, sans-serif; 
		text-shadow: 1px 1px 0 rgba(0,0,0,.25), 2px 2px 0 rgba(0,0,0,.25), 3px 3px 0 rgba(255,255,255,.25);}
		 
/*
	=website footer */
	#content {
		margin-top : 2em; padding-top : 1.5em; border-top : 1px solid #fff; }