﻿.display-none, .hide {
	display: none !important;	
}

/* =============================================================================
   HSA Layout Helpers. Mostly used to align form elements and
   layout blocks next to eachother.
   ========================================================================== */
   
/* .group is useful for clearing floated elements. */
.group:before, .group:after { content:""; display:table; }
.group:after { clear:both; }
.group { zoom:1; /* For IE 6/7 (trigger hasLayout) */ }

/* Panes are ways to group content blocks */
.pane {	
	background: #f3f3f3;
	padding: 10px;
	position: relative;
	margin-bottom: 20px;
}
.alt-pane { /* Use to make a content block stick out from the rest */	
}

/* Use .region to apply the border-box attribute to a container */
.region {
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	box-sizing: border-box;         /* Opera/IE 8+ */
	padding: 0 10px;	
	margin: 10px 0;
}

/* Use these elements to float items next to eachother, % so that widths are not hardcoded */
.one-third { 	width: 33.333%; float: left; }
.two-third { 	width: 66.666%; float: left; }
.one-half { 	width: 50%; 	float: left; }
.one-fourth { 	width: 25%; 	float: left; }
.three-fourth{	width: 75%;		float: left; }



/* =============================================================================
	HSA Form Helpers. Our Forms our in list items.
   ========================================================================== */
   
/* We don't want our form lists to pick up the margins,padding,list-type of normal lists */
.hsa-list { margin: 0; padding: 0; }
.hsa-list li {	margin-bottom: 10px; list-style: none; }

/* Use .hsa-label on Labels (or spans that are pseudo labels) */
.hsa-label {
	display: block;	}
.hsa-label-check {	/* A Label that Needs extra left margin because it sits next to a check/radio input */
	margin-left: 5px;		
}	

.hsa-reminder { /* Reminders for Inputs (i.e. "Passwords must be 7 at least 7 characters." */
	display: block;	
}

/* We want our form elements to fill their containing region */
input[type="text"], input[type="password"], textarea, select {
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	box-sizing: border-box;         /* Opera/IE 8+ */
	width: 100%;
	max-width: 100%;
}
/* Add extra padding in case the skin doesn't call for it */
input[type="text"], input[type="password"], input[type="search"], input[type="email"], textarea {
	padding: 5px;	
}

/* Use .hsa-checks on asp checklist controls */
.hsa-checks {
	border-bottom: 1px solid #333;
	border-top: 1px solid #333;
}
.hsa-checks td {
	padding: 5px;
	vertical-align: top;
}

/* use .hsa-radio-list on asp radiolist controls */
.hsa-radio-list label {
	float: left;	
}
input[type="checkbox"], input[type="radio"] {
	float: left;	
	margin-right: 5px;
}

/* Required Fields */
.required-field, .hsa-required {
	color: #d02626;
	font-weight: 700;
	padding-bottom: 5px;	
}

.select-next {
	float: left;
	width: 60px;
	margin-right: 10px;	
}
	
	
/* =============================================================================
	HSA Buttons. Three Button Types
   ========================================================================== */
.hsa-button, .hsa-button-alt, .hsa-button-school {
	display: inline-block;
	cursor: pointer;
	padding: 10px;
	border: 0;	
	margin: 10px 10px 10px 0;	
	box-shadow: 0 1px 4px rgba(0,0,0,.3);	
}

.hsa-button { /* Typical Form Submit Style */
	background: #333;	
	color: #fff;	} 
.hsa-button-alt { /* Clear Form, Delete, etc */
	background: #eee;
	color: #444;
	} 
.hsa-button-school { /* Clickable links that you want to be buttons */
	background: #555;
	color: #fff;	
	}
	
/* Use this style to target tab "buttons" */
.hsa-button-tab {
	padding: 10px;
	border: 0;
	display: inline-block;
	margin: 10px 10px 0 0;
	background: #ccc;
	color: #444;	
}

/* Use this style to make a button smaller */
.hsa-button-small {
	padding: 3px;	
}


.top-right {
	position: absolute;
	top: 0;
	right: 0;	
}


	
/* Images */
.school-image {
	width: 100%;
	height: auto !important;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	padding: 5px;
	background: #eee;
	border: 1px solid #ccc;
}

/* Tables */
.data-table {
	width: 100%;
	word-wrap: break-word;
	border-spacing: 0;
	margin-bottom: 20px;	
}
.data-table th, .data-table td {
	padding: 5px;	
}
.data-table th {
	background: #eee;
	color: #444;
	font-size: 16px;
	text-align: left;	
}
.data-table-alt td {
	background: #f5f5f5;	
}



/* Pagination */
#pager {
	margin-bottom: 20px;	
}

ul.pages {
	margin: 0;
	padding: 0;
	overflow: hidden;	
}
ul.pages li {
	float: left;
	display: inline-block;
	background: #eee;
	color: #666;	
	line-height: 1;
	padding: 5px 8px;
	margin-right: 5px;
}
ul.pages li.pgEmpty {
	color: #ccc;
	cursor: auto;
}
ul.pages li.pgCurrent {
	background: #666;
	color: #fff;	
}

/* Tabs */
ul.ui-tabs-nav {
	margin: 0;
	overflow: hidden;
	padding: 10px 10px 0 10px;	
}
ul.ui-tabs-nav li {
	list-style: none;
	float: left; }
ul li.ui-tabs-selected .hsa-button-tab, ul li.selected .hsa-button-tab {
	background: #333;
	color: #fff;	
}
.ui-tabs-panel {
	border-left: 10px solid #eee;
	border-right: 1px solid #eee;
	border-bottom: 10px solid #eee;
	padding: 10px;
	background: #fff;	
}

.ui-tabs .ui-tabs-hide {
	display: none !important;
}

/* Show/Hide */
.NewNote {
	display: none;	
}

/* School Staff */

.school-staff {
	border-top: 5px solid #ccc;	
}

/* AutoComplete */
.autocomplete {
	background: #fff;
	box-shadow: 0 0 5px rgba(0,0,0,.3);
	padding: 10px;
	color: #444;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	overflow: auto;
}
.autocomplete div {
	padding: 3px;	
}
.autocomplete .selected {
	background: #eee;	
} 
/* Alerts */

.alert {
	display: block;
	padding: 20px;
	background: #f2d9d9;
	color: #732222;	
	border: 1px dashed #732222;
	margin-bottom: 20px;
}

.note {
	padding: 5px;
	border: 1px dashed #e6de11;
	background: #f1efbd;
	margin-bottom: 20px;
	display: block;
	color: #444;
}

.image-button {
	padding: 3px;	
}

/* Button Groups! */
.button-group {
	padding-top: 10px;
	border-top: 1px solid #ccc;	
}
.button-group input:nth-child(1), .button-group a:nth-child(1) {
	margin-left: 0;
}	

/* Text Alignment/Float Alignment */
.float-left {
	float: left;	
}
.float-right {
	float: right;	
}
.align-left {
	text-align: left;	
}
.align-center {
	text-align: center;	
}
.align-right {
	text-align: right;	
}
.margin-none {
	margin: 0;	
}


/* Supported Sports */

.hsa-sports-list {
	margin: 0;
	padding: 0;			
}
ul.hsa-sports-list li {
	list-style: none;	
}

/* School Social Links */
.hsa-button-twitter {
	background: url(../HSA-Schools/images/twitter.png) no-repeat 10px #2CAAE1;
	padding: 10px 10px 10px 38px;
	color: #fff !important;	
	text-decoration: none !important;
	margin: 0 10px 0 0;
	display: inline-block;
}
.hsa-button-facebook {
	margin: 0 10px 0 0;
	color: #fff !important;
	text-decoration: none !important;
	display: inline-block;
	background: url(../HSA-Schools/images/facebook.png) no-repeat #3C5A98;
	padding: 10px 10px 10px 46px;
		
}
.hsa-button-twitter:hover, .hsa-button-facebook:hover {
	text-shadow: none !important;	
}



