/* 
* Skeleton V1.0.2
* Copyright 2011, Dave Gamache
* www.getskeleton.com
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
* 5/20/2011
*/


/* Table of Content
==================================================
	#Reset & Basics
	#Basic Styles
	#Site Styles
	#Typography
	#Links
	#Lists
	#Images
	#Buttons
	#Tabs
	#Forms
	#Misc */


/* #Reset & Basics (Inspired by E. Meyers)
================================================== */
	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;
		vertical-align: baseline; }
	article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
		display: block; }
	body {
		line-height: 1; }
	ol, ul {
		list-style: none; }
	blockquote, q {
		quotes: none; }
	blockquote:before, blockquote:after,
	q:before, q:after {
		content: '';
		content: none; }
	table {
		border-collapse: collapse;
		border-spacing: 0; }
		
		
/* #Basic Styles
================================================== */
	body { 
		font: 14px/21px "Calibre", 'Arial Narrow', Arial, sans-serif;
        font-stretch: condensed;
		color: #444444; 
		-webkit-font-smoothing: antialiased; /* Fix for webkit rendering */
		-webkit-text-size-adjust: none;
 }
	

/* #Typography
================================================== */
	h1, h2, h3, h4, h5, h6 { 
		color: #444444; font-family: "Calibre", 'Arial Narrow', Arial, sans-serif; font-stretch: condensed; }
	h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { font-weight: inherit; }
	h1 { font-size: 38px; line-height: 44px; margin-bottom: 12px;}
	h2 { font-size: 33px; line-height: 38px; margin-bottom: 10px; }
	h3 { font-size: 28px; line-height: 34px; margin-bottom: 8px; }
	h4 { font-size: 21px; line-height: 30px; margin-bottom: 4px; }
	h5 { font-size: 17px; line-height: 24px; }
	h6 { font-size: 14px; line-height: 21px; }
	.subheader { color: #777; }

	p { margin: 0 0 20px 0; line-height: 17px; font-size: 13px; font-family: "Calibre", 'Arial Narrow', Arial, Helvetica; font-stretch: condensed; }
	p img { margin: 0; }
	p.lead { font-size: 21px; line-height: 27px; color: #777;  }
	
	em, i { font-style: italic; }
	strong, b { font-weight: bold; color: #444444; }
	small { font-size: 80%; }
	
/*	Blockquotes  */
	blockquote, blockquote p { font-size: 17px; line-height: 24px; color: #777; font-style: italic; }
	blockquote { margin: 0 0 20px; padding: 9px 20px 0 19px; border-left: 1px solid #ddd; }
	blockquote cite { display: block; font-size: 12px; color: #555; }
	blockquote cite:before { content: "\2014 \0020"; }
	blockquote cite a, blockquote cite a:visited, blockquote cite a:visited { color: #555; }
	
	hr { border: solid #ddd; border-width: 1px 0 0; clear: both; margin: 10px 0 30px; height: 0; }


/* #Links
================================================== */
	a, a:visited { color: #444444; text-decoration: underline; outline: 0; }
	a:hover, a:focus { color: #444444; }
	p a, p a:visited { line-height: inherit; }
	

/* #Lists
================================================== */
	ul, ol { margin-bottom: 20px; }
	ul { list-style: none outside; }
	ol { list-style: decimal; }
	ol, ul.square, ul.circle, ul.disc { margin-left: 30px; }
	ul.square { list-style: square outside; }
	ul.circle { list-style: circle outside; }
	ul.disc { list-style: disc outside; }
	ul ul, ul ol,
	ol ol, ol ul { margin: 4px 0 5px 30px; font-size: 100%;  }
	ul ul li, ul ol li,
	ol ol li, ol ul li { margin-bottom: 6px; }
	li { line-height: 18px; margin-bottom: 12px; }
	ul.large li { line-height: 21px; }
	li p { line-height: 21px; }
	
/* #Images
================================================== */
/*
	The purpose of the below declaration is to make sure images don't 
	exceed the width of columns they are put into when resizing window. 
	Unfortunately, this declaration breaks certain lightbox, slider or other plugins,
	so the best solution is to individually call these properties on images that 
	are children of the grid that you want to resize with grid. 

	img { 
		max-width: 100%;
		height: auto; }
		
*/


/* #Buttons
================================================== */
	
	a.button, 
	button,
	input[type="submit"],
	input[type="reset"],
	input[type="button"] {
		background: #006a4c; /* Old browsers */
      border: none;
	  padding: 4px;
	  color: #ffffff;
	  display: inline-block;
	  font-size: 18px;
	  font-weight: normal;
	  text-decoration: none;
      padding: 10px 18px;
	  cursor: pointer;
	  margin-bottom: 20px;
	  line-height: 21px;
	  font-family: "Calibre", 'Arial Narrow', Arial, sans-serif; 
      font-stretch: condensed;
	}
		a.button:hover,
		button:hover,
		input[type="submit"]:hover,
		input[type="reset"]:hover,
		input[type="button"]:hover {
			background: #17E88F; /* Old browsers */
			color: #003f2D;
		}
		a.button:active,
		button:active,
		input[type="submit"]:active,
		input[type="reset"]:active,
		input[type="button"]:active {
			background: #17E88F; /* Old browsers */
			color: #003f2D;
		}
	
	.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 !important;
		padding-right: 0 !important;
		text-align: center; }
	input[type=search] {
	    -webkit-appearance: textfield;
	    -webkit-box-sizing: content-box;
	    font-family: inherit;
	    font-size: 100%;
    }
    input::-webkit-search-decoration,
    input::-webkit-search-cancel-button {
	    display: none;
    }
    .header input[type=search],
    .footer input[type=search]
    {
        background-color: #ededed;
        border: solid 1px #cccccc;
        border-right: none;
        padding: 0px 0px 0px 10px;
        width: 250px;
        /*
        -webkit-border-radius: 10em 0 0 10em;
        -moz-border-radius: 10em 0 0 10em;
        border-radius: 10em 0 0 10em;
        */
    }
    .header input.searchbtn,
    .footer input.searchbtn
    {
        border: none;
        padding: 0;
        margin: 0;
        background: none;
        background: #ededed url(../images/search.png) no-repeat right center;
        /*
        -webkit-border-radius: 0 10em 10em 0;
        -moz-border-radius: 0 10em 10em 0;
        border-radius: 0 10em 10em 0;
        */
        border: solid 1px #cccccc;
        border-left: none;
        float: left;
        margin-top: 45px;
        width: 30px;
        height: 27px;
    }
    /* All Mobile Sizes (devices and browser) */
	@media only screen and (max-width: 767px) 
	{
	    .header input[type=search],
        .footer input[type=search]
        {
            width: 55px;
            -webkit-transition: all .5s;
            -moz-transition: all .5s;
            transition: all .5s;
            margin-top: 10px;
            margin-left: 15px;
        }
        .header input.searchbtn, 
        .footer input.searchbtn
        {
            margin-top: 10px;
        }
	}
	@media only screen and (min-width: 480px) and (max-width: 767px) 
	{
	    .header input[type=search]:focus,
        .footer input[type=search]:focus
        {
            width: 225px;
        }
	}
	@media only screen and (max-width: 479px) 
	{
	    .header input[type=search]:focus,
        .footer input[type=search]:focus
        {
            width: 175px;
        }
	}
	
/* #Tabs (activate in app.js)
================================================== */
	ul.tabs { 
		display: block;
		margin: 0 0 20px 0;
		padding: 0;
		border-bottom: solid 1px #ddd; }
	ul.tabs li { 
		display: block;
		width: auto;
		height: 30px;
		padding: 0;
		float: left;
		margin-bottom: 0; }
	ul.tabs li a { 
		display: block; 
		text-decoration: none;
		width: auto; 
		height: 29px; 
		padding: 0px 20px; 
		line-height: 30px; 
		border: solid 1px #ddd;
		border-width: 1px 0 0 1px; 
		margin: 0;  
		background: #f5f5f5;
		font-size: 13px; }
	ul.tabs li a.active { 
		background: #fff; 
		height: 30px;
		position: relative;
		top: -4px;
		padding-top: 4px;
		border-right-width: 1px;
		margin: 0 -1px 0 0;
		color: #111;
		-moz-border-radius-topleft: 2px;
		-webkit-border-top-left-radius: 2px;
		border-top-left-radius: 2px;
		-moz-border-radius-topright: 2px;
		-webkit-border-top-right-radius: 2px;
		border-top-right-radius: 2px; }
	ul.tabs li:first-child a {
		-moz-border-radius-topleft: 2px;
		-webkit-border-top-left-radius: 2px;
		border-top-left-radius: 2px; }
	ul.tabs li:last-child a {
		border-width: 1px 1px 0 1px;
		-moz-border-radius-topright: 2px;
		-webkit-border-top-right-radius: 2px;
		border-top-right-radius: 2px; }
	
	ul.tabs-content { margin: 0; display: block; }
	ul.tabs-content > li { display:none; }
	ul.tabs-content > li.active { display: block; }
		
	/* Clearfixing tabs for beautiful stacking */
	ul.tabs:before,
	ul.tabs:after {
	  content: '\0020';
	  display: block;
	  overflow: hidden;
	  visibility: hidden;
	  width: 0;
	  height: 0; }
	ul.tabs:after {
	  clear: both; }
	ul.tabs {
	  zoom: 1; }
			
			
/* #Forms
================================================== */

	form { 
		margin-bottom: 20px; }
	fieldset { 
		margin-bottom: 20px; }
	input[type="text"], 
	input[type="password"],
	input[type="email"],
	textarea, 
	select {
		border: 1px solid #000;
		padding: 6px 4px;
		outline: none;
		font: 13px "Calibre", 'Arial Narrow', Arial, sans-serif;
        font-stretch: condensed;
		color: #444444;
		margin: 0;
		width: 210px;
		max-width: 100%;
		display: block;
		background: transparent; }
	select { 
		padding: 6px 4px; }
	input[type="text"]:focus,
	input[type="password"]:focus,
	input[type="email"]:focus, 
	textarea:focus {
		border: 1px solid #aaa;
 		color: #444;
 		-moz-box-shadow: 0 0 3px rgba(0,0,0,.2);
		-webkit-box-shadow: 0 0 3px rgba(0,0,0,.2);
		box-shadow:  0 0 3px rgba(0,0,0,.2); }
	textarea {
		min-height: 60px; }
	label,
	legend { 
		display: block;
		font-weight: bold;
		font-size: 13px;  }
	select { 
		width: 220px; }
	input[type="checkbox"] {
		display: inline; }
	label span,
	legend span {
		font-weight: normal;
		font-size: 13px;
		color: #444444; }
		
/* #Misc
================================================== */
	.remove-bottom { margin-bottom: 0 !important; }
	.half-bottom { margin-bottom: 10px !important; }
	.add-bottom { margin-bottom: 20px !important; }