/* 

	Table of Contents 

	: Brand Color Swatches
	: Header/Navigation Styles
	: Content Block Styles
	: Button Styles
	: Form Styles
	: Module Styles
	: Modal Styles
	: Boingo Icons Syles
	: Footer Styles

*/


/*
 * Mobile-First 
 *
 * The following css has be structured according to a mobile-first content strategy
 * Thus Mobile css is defined first, followed my Media Queries which define css using min-width 
 *
 * Detailed information about this at: http://static.lukew.com/MobileFirst_LukeW.pdf
 *
 */


/* =============================================================================
   Color Key
   ========================================================================== */

/*
* Primary Red: #D52B1E
* Alternative Dark Red: #C61D15
* Secondary Blue: #35C0E2
* Dark Grey: #545861
* Light Grey: #CFCFCF
*/

.color_key li div {
	height: 4em;
	border: 2px solid #fff;
	-webkit-box-shadow: 0 1px 2px 1px rgba(0,0,0,.25);
	-moz-box-shadow: 0 1px 2px 1px rgba(0,0,0,.25);
	box-shadow: 0 1px 2px 1px rgba(0,0,0,.25);
}

.color_key li:nth-child(1) div { background-color: #D52B1E; }
.color_key li:nth-child(2) div { background-color: #B4261E; }
.color_key li:nth-child(3) div { background-color: #35C0E2; }
.color_key li:nth-child(4) div { background-color: #545861; }
.color_key li:nth-child(5) div { background-color: #CFCFCF; }




/* Media Query for Navigation */

@media only screen and (min-width: 769px) {
	
	/* Reveal Tablet/Laptop/Desktop Navigation */	
	.primary-nav { display: block; }
	
	
	/* Hide Mobile Off-Canvas Toggle and Navigation */
	a#mobile-nav_toggle,
	.mobile-nav { display: none; }

}



/* =============================================================================
   Content Block Styles
   ========================================================================== */
   
/* Primary Typeface
* Our Primary Brand Typeface is Avenir
* We are a hosted web solution for Avenir due to font liscensing restrictions: http://www.fonts.com/font/linotype/avenir?SortColumn=name_ascending&QueryFontType=Web&SortDirection=Ascending&page=1#product_top
*/

/* Note: Fallback font will revert to closest relative weight if loaded */

.primary-font_thin { 
	font-family:'AvenirLTStd-Light', 'Helvetica Neue', Helvetica, Arial, sans-serif;
	font-weight: normal; 
}

.primary-font_med { 
	font-family:'AvenirLTStd-Roman', 'Helvetica Neue', Helvetica, Arial, sans-serif;
	font-weight: normal; 
}

.primary-font_black { 
	font-family:'Avenir LT W01 85 Heavy', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

.AV_85h   {font-family: "AvenirLTStd-85Heavy", Arial, Helvetica, sans-serif;}

.AV_95b   {font-family: "AvenirLTStd-95Black", Arial, Helvetica, sans-serif;}

.museo-font-900{
	font-family: 'MuseoSlab-900';
}
.museo-font-900Italic{
	font-family: 'MuseoSlab-900Italic';
}
.museo-font-100{
	font-family: 'MuseoSlab-100';
}
.museo-font-300{
	font-family: 'MuseoSlab-300';
}
.museo-font-500Italic{
	font-family: 'MuseoSlab-500Italic';
}


/* /End Custom Fonts */


/* Font Colors */
.red { color: #d52b1e; }
.sky-blue { color: #35C0E2; }
.dark-grey{ color: #545861; }
.light-grey{ color: #aaa;}
.white{ color: #fff;}

/* Font Sizes */
.small { font-size: .75em; } /* 12px / 16px */
.medium{ font-size: 1.125em;} /*16px / 18px*/
.large{ font-size: 1.65em;}

/* Other Font Styles */
.cap { text-transform: uppercase; }
.italic{ font-style: italic;}

.small.no-padding{ padding: 0;}


/* =============================================================================
   Button Styles
================================================================================ */

/* 
* Base Button 
*/

a.button, input.button, button {
	display: block;
	cursor: pointer; 
	padding: .6em 0;
	font-size: 1.2em;
	text-align: center;
	font-weight: bold;
	line-height: 1;
	color: #555;
	height: inherit;
	
	-webkit-border-radius: .25em;
	-moz-border-radius: .25em;
	-ms-border-radius: .25em;
	-o-border-radius: .25em;
	border-radius: .25em;
	
	-moz-text-shadow: 0 1px 0 #fff;
	-webkit-text-shadow: 0 1px 0 #fff;
	text-shadow: 0 1px 0 #fff;	
	
	-moz-box-shadow: 0 1px 1px 0 rgba(0,0,0,.5);
	-webkit-box-shadow: 0 1px 1px 0 rgba(0,0,0,.5);
	box-shadow: 0 1px 1px 0 rgba(0,0,0,.5);
}

a.button:hover, input.button:hover, button:hover { text-decoration: none; }

a.button:active, button:active { 
	-webkit-box-shadow: inset 0 1px 3px rgba(0,0,0,.5);
	-moz-box-shadow: inset 0 1px 3px rgba(0,0,0,.5);
	box-shadow: inset 0 1px 3px rgba(0,0,0,.5);	
}


/* 
* Button Color Variations 
*/


/* Primary */

a.primary, input.primary, button.primary {
	color: #fff;
	border: 0;
	
	-moz-text-shadow: 0 -1px 1px rgba(0,0,0,.5);
	-webkit-text-shadow: 0 -1px 1px rgba(0,0,0,.5); 
	text-shadow: 0 -1px 1px rgba(0,0,0,.5);
	
	background: #e13827; /* Old browsers */
	background: -moz-linear-gradient(top,  #e13827 0%, #c61d15 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e13827), color-stop(100%,#c61d15)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #e13827 0%,#c61d15 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #e13827 0%,#c61d15 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #e13827 0%,#c61d15 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #e13827 0%,#c61d15 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e13827', endColorstr='#c61d15',GradientType=0 ); /* IE6-8 */
}

a.primary:hover, input.primary:hover, button.primary:hover { background: #ca2c25; border: 0; }

input.primary:disabled {
	background: #acacac;
}
input.primary:hover:disabled { background: #acacac; border: 0; }

input.primary.non-active:disabled{background: #ca2c25; text-indent: -9999px; }
input.primary.non-active:hover:disabled{ background:#ca2c25 ;}

/* Secondary */

a.secondary, input.secondary, button.secondary { 
	color: #fff;
	
	-moz-text-shadow: 0 -1px 1px rgba(0,0,0,.5);
	-webkit-text-shadow: 0 -1px 1px rgba(0,0,0,.5); 
	text-shadow: 0 -1px 1px rgba(0,0,0,.5);
		
	background: rgb(70,212,235); /* Old browsers */
	background: -moz-linear-gradient(top,  rgba(70,212,235,1) 0%, rgba(38,174,218,1) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(70,212,235,1)), color-stop(100%,rgba(38,174,218,1))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  rgba(70,212,235,1) 0%,rgba(38,174,218,1) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  rgba(70,212,235,1) 0%,rgba(38,174,218,1) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  rgba(70,212,235,1) 0%,rgba(38,174,218,1) 100%); /* IE10+ */
	background: linear-gradient(to bottom,  rgba(70,212,235,1) 0%,rgba(38,174,218,1) 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#46d4eb', endColorstr='#26aeda',GradientType=0 ); /* IE6-8 */
 
}

a.secondary:hover, input.secondary:hover, button.secondary:hover { background: #32b7d8; }


/* Tertiary */

a.tertiary, input.tertiary, button.tertiary{	
	border-top: 1px solid #eee;
	background: rgb(254,254,254); /* Old browsers */
	background: -moz-linear-gradient(top,  rgba(254,254,254,1) 0%, rgba(236,236,236,1) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(254,254,254,1)), color-stop(100%,rgba(236,236,236,1))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  rgba(254,254,254,1) 0%,rgba(236,236,236,1) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  rgba(254,254,254,1) 0%,rgba(236,236,236,1) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  rgba(254,254,254,1) 0%,rgba(236,236,236,1) 100%); /* IE10+ */
	background: linear-gradient(to bottom,  rgba(254,254,254,1) 0%,rgba(236,236,236,1) 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fefefe', endColorstr='#ececec',GradientType=0 ); /* IE6-8 */
}

a.tertiary:hover, input.tertiary:hover, button.tertiary { background: #eee; }



/* 
* Button Size Variations 
*/


/* Small Button */

a.small, input.small { 
	padding: .6em 1.75em; 
	font-size: 1em;
}


/* Large Button */

a.large, input.large { padding: 1.25em 1.75em; }



/* 
* Button Style Variations
*/


/* Chevron Style */

a.chevron { 
	position: relative;	
	padding: 0;
	height: 2.45em;
}

a.chevron em {
	font-style: normal;
	float: left;
	padding-left: 1em;
	line-height: 2.4;
}

a.chevron span { 
	position: absolute;	
	right: .75em;
	top: 1.1em;
	font-size: .825em;
}


/* Icon Style */

a.split { 
	position: relative; 
	padding: 0;
	height: 2.45em;
}

a.split em {
	padding-left: 2.5em;
	line-height: 2.4;
	font-style: normal;
}

a.split span { 
	position: absolute;
	left: 0;
	height: 100%;
	padding: .75em;
	border-right: 1px solid rgba(0,0,0,.25);
	box-shadow: 1px 0 0 rgba(255,255,255,.25);
}


/* =============================================================================
   Form Styles
================================================================================ */

input {
	position: relative;
	width: 100%;
	border: 1px solid #acacac;
	padding: 0 .938em;
	height: 3.75em;
	
	font-size: 1em;
	font-weight: normal;
	color: #999;
	
	-moz-border-radius: .7em;
	-webkit-border-radius: .7em;
	-ms-border-radius: .7em;
	-webkit-border-radius: .7em;
	border-radius: .7em;
}

input[type="text"] {
	-webkit-appearance: none;
	-moz-appearance: none;
}

input:hover { border: 1px solid #afafaf; }

input[type="checkbox"],
input[type="radio"] { 
	width: auto;
	border: none;
	height: auto; 	
}

input:focus,
select:focus { outline: 0; }



/* Custom Input Style */
input.not-mobile::-webkit-input-placeholder { color: #fff; }
input.not-mobile:-moz-placeholder { /* Firefox 18- */ color: #fff; }
input.not-mobile::-moz-placeholder {  /* Firefox 19+ */ color:#fff; }
input.not-mobile:-ms-input-placeholder {   color: #fff; }




/* Input Error */
input.error { border: 1px solid #D52B1E; }

.errorMsg { 
	padding-top: .5em;
	color: #D52B1E; 
	font-size: .75em; /* 12px / 16px */
}

/* Input Success */

input.success { border: 1px solid #35C0E2; }
.successMsg { 
	padding-top: .5em;
	color: #35C0E2; 
	font-size: .75em; /* 12px / 16px */
}








/* =============================================================================
   Footer Styles
================================================================================ */

footer[role="contentinfo"] {
	padding: 1em 0 3em;
	font-size: .75em;
}

/* Footer Link Vertical Rules */
footer[role="contentinfo"] a:after {
	content: "|";
	display: inline;
	padding-left: .25em;	
}

footer[role="contentinfo"] a:last-child:after { content: ""; } 

footer[role="contentinfo"] > p { float: left; }

footer[role="contentinfo"] p:last-child { float: right; }



/* =============================================================================
   Media Queries
================================================================================ */

@media only screen and (max-width: 767px){
      input{
        font-size: .9em;
      }

	/* Custom Input Style */
	input.not-mobile::-webkit-input-placeholder {  color: #bbb;}
	input.not-mobile:-moz-placeholder { /* Firefox 18- */   color: #bbb; }
	input.not-mobile::-moz-placeholder {  /* Firefox 19+ */   color:#bbb; }
	input.not-mobile:-ms-input-placeholder { color: #bbb;}

  }