/*********************************************
 * ITRG - InfoTip Reponsive Grid
 * (C) 2015 InfoTip Services
 * Version 0.3.0
 *
 * DO NOT EDIT THIS FILE!
 * USE A CUSTOM CSS INSTEAD!
 *********************************************/

/* Basic Styles */

html {
	font-size: 62.5%; /* 10 px for easier calculating */
}

body {
	font-size: 1.3em;
	line-height: 1.6;
	color: #333;
}

/* Create a row element with a nice clearfix to prevent floating errors */

.row:before,
.row:after {
    content: " ";
    display: table;
}
.row:after {
    clear: both;
}
.row {
	margin: 0 .748% !important;
}
.row .row {
	margin: 0 !important;
}

/* Columns contain the actual content */

.column,
.columns {
	margin-left: 1.99998%; /* never really complete 100 with multiple elements */
	float: left;
}
.column:first-child,
.columns:first-child {
	margin-left: 0 !important;
}
.column .row,
.columns .row {
	margin: 0 -.748%; /* eliminate margins when nested */
}
.column .border-box { /* requires an extra div! */
	border: 2px solid #bbb;
}

/* The Grid Elements */

.large-one {
	width: 8.2%;
}
.large-two {
	width: 18.4%;
}
.large-three {
	width: 28.6%;
}
.large-four {
	width: 38.8%;
}
.large-five {
	width: 49.0%;
}
.large-six {
	width: 59.2%;
}
.large-seven {
	width: 69.4%;
}
.large-eight {
	width: 79.6%;
}
.large-nine {
	width: 89.8%;
}
.large-ten {
	width: 100%;
}
.large-one-third {
	width: 32%;
}
.large-two-third {
	width: 66%;
}
.show-for-small,
.hide-for-large {
	display: none;
}
.show-for-large,
.hide-for-small {
	display: block;
}

@media (max-width: 800px) {
	.small-one {
		width: 8.2%;
	}
	.small-two {
		width: 18.4%;
	}
	.small-three {
		width: 28.6%;
	}
	.small-four {
		width: 38.8%;
	}
	.small-five {
		width: 49.0%;
	}
	.small-six {
		width: 59.2%;
	}
	.small-seven {
		width: 69.4%;
	}
	.small-eight {
		width: 79.6%;
	}
	.small-nine {
		width: 89.8%;
	}
	.small-ten {
		width: 100%;
	}
	.preserve-grid,
	.small-ten.column,
	.small-ten.columns {
		margin-left: 0 !important;
	}
	.small-one-third {
		width: 32.0%;
	}
	.small-two-third {
		width: 66.0%;
	}
	.show-for-small,
	.hide-for-large {
		display: block;
	}
	.show-for-small.inline {
		display: inline-block;
	}
	.hide-for-small,
	.show-for-large {
		display: none;
	}	
}


/*****************************************
 * Forms
 ****************************************/

/* Some helpers */
.full-width {
	width: 100%;
}

*:hover,
*:focus,
*:active {
	outline: 0;
}

/* First, reset Mozilla's awkward browser-internal stylings */
input::-moz-focus-inner {
	border: 0;
	padding: 0; 
}

label,
legend {
	display: block;
	margin-bottom: .5em;
	font-weight: bold;
}

/* make almost all of them look the same, even on browsers that don't support them */
/* except for those, which these settings would break, of course */
/*input[type="color"],*/
input[type="date"],
input[type="datetime"],
input[type="datetime-local"],
input[type="email"],
/*input[type="month"],*/
input[type="number"],
/*input[type="range"],*/
input[type="search"],
input[type="tel"],
input[type="text"],
input[type="time"],
input[type="url"],
/*input[type="week"],*/
textarea,
select {
	height: 30px; /* because of border, use pixel height */
	padding: 0 6px;
	background-color: #fff;
	border: 1px solid #bebebe;
	border-radius: 3px;
	box-sizing: border-box; /* height includes padding and margin */
}

textarea { /* three rows at least */
	min-height: 62px;
}

/*input[type="color"],*/
input[type="date"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="email"]:focus,
/*input[type="month"]:focus,*/
input[type="number"]:focus,
/*input[type="range"]:focus,*/
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="text"]:focus,
input[type="time"]:focus,
input[type="url"]:focus,
/*input[type="week"]:focus,*/
textarea:focus,
select:focus {
	border-color: blue;
}

.button,
button,
input[type="submit"],
input[type="reset"],
input[type="button"] {
	display: inline-block;
	height: 30px;
	padding: 0 6px;
	
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	box-sizing: border-box;
	border-radius: 3px;
	color: #fff;
	background-color: darkgray;
	border: 1px solid #ccc;
}

.button:hover,
button:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
input[type="button"]:hover,
.button:focus,
button:focus,
input[type="submit"]:focus,
input[type="reset"]:focus,
input[type="button"]:focus {
	color: #fff;
	background-color: darkblue;
	border-color: black;
}

.button.secondary,
button.secondary,
input[type="submit"].secondary,
input[type="reset"].secondary,
input[type="button"].secondary {
	color: #333;
	background-color: transparent;
	border: 1px solid #bebebe;
	
}

.button.secondary:hover,
button.secondary:hover,
input[type="submit"].secondary:hover,
input[type="reset"].secondary:hover,
input[type="button"].secondary:hover,
.button.secondary:focus,
button.secondary:focus,
input[type="submit"].secondary:focus,
input[type="reset"].secondary:focus,
input[type="button"].secondary:focus {
	color: #000;
	border-color: darkblue;
}