/*
	LAYOUT.CSS

	Extensions to the default Bootstrap layout handling
*/

/* 
	Finer max-width handling to avoid too much white space at sides of screen 
*/

@media (min-width: 400px) {
	.container {
		max-width: 380px;
	}
}

@media (min-width: 500px) {
	.container {
		max-width: 480px;
	}
}

@media (min-width: 600px) {
	.container {
		max-width: 580px;
	}
}

@media (min-width: 700px) {
	.container {
		max-width: 680px;
	}
}

@media (min-width: 800px) {
	.container {
		max-width: 780px;
	}
}

@media (min-width: 900px) {
	.container {
		max-width: 880px;
	}
}

@media (min-width: 1000px) {
	.container {
		max-width: 980px;
	}
}

@media (min-width: 1100px) {
	.container {
		max-width: 1080px;
	}
}

@media (min-width: 1200px) {
	.container {
		max-width: 1180px;
	}
}

@media (min-width: 1300px) {
	.container {
		max-width: 1280px;
	}
}

@media (min-width: 1400px) {
	.container {
		max-width: 1380px;
	}
}

@media (min-width: 1500px) {
	.container {
		max-width: 1480px;
	}
}

@media (min-width: 1600px) {
	.container {
		max-width: 1580px;
	}
}

/*
	Minimum height for content on short pages
	- wrap content in <div class="shortContent"><div class="content"></div></div>
	- min-height will have to be adjusted when second menu line added
*/
@media (min-height: 450px) {
	.shortContent > .content {
		min-height: 250px !important;
	}
}
@media (min-height: 500px) {
	.shortContent > .content {
		min-height: 300px !important;
	}
}
@media (min-height: 550px) {
	.shortContent > .content {
		min-height: 350px !important;
	}
}
@media (min-height: 600px) {
	.shortContent > .content {
		min-height: 400px !important;
	}
}

@media (min-height: 650px) {
	.shortContent > .content {
		min-height: 450px !important;
	}
}

@media (min-height: 700px) {
	.shortContent > .content {
		min-height: 500px !important;
	}
}

@media (min-height: 750px) {
	.shortContent > .content {
		min-height: 550px !important;
	}
}

@media (min-height: 800px) {
	.shortContent > .content {
		min-height: 600px !important;
	}
}

@media (min-height: 850px) {
	.shortContent > .content {
		min-height: 650px !important;
	}
}

/* 
	Override the default bootstrap behavior where horizontal description lists 
   will truncate terms that are too long to fit in the left column 
*/
.dl-horizontal dt {
	white-space: normal;
}

/*
	Full width footer
*/

footer {
	margin: 0px;
	padding: 0px;
	width: 100%;
}

/* 
	Set widths on the form inputs since otherwise they're 100% wide
	Note: May want to change this
*/
input[type="text"],
input[type="password"],
input[type="email"],
input[type="tel"],
input[type="select"] {
	/*max-width: 280px;*/
}

/* 
	Styles to override default 30px Bootstrap gutter. Simply add gutter-20 etc. to class for row
	e.g. <div class="content"><div class="gutter-20 row"> ... bootstrap columns ... </div></div>
*/

.gutter-20.row {
	margin-right: -10px;
	margin-left: -10px;
}

.gutter-20 > [class^="col-"], .gutter-20 > [class^=" col-"] {
	padding-right: 10px;
	padding-left: 10px;
}

.gutter-10.row {
	margin-right: -5px;
	margin-left: -5px;
}

.gutter-10 > [class^="col-"], .gutter-10 > [class^=" col-"] {
	padding-right: 5px;
	padding-left: 5px;
}

.gutter-0.row {
	margin-right: 0;
	margin-left: 0;
}

.gutter-0 > [class^="col-"], .gutter-0 > [class^=" col-"] {
	padding-right: 0;
	padding-left: 0;
}

/*
	Space content in rows and columns
*/

.row > div[class^="col-"]:nth-last-of-type(n+2) {
	margin-bottom: 20px;
}

div[class^="col-"] > div:nth-last-of-type(n+2) {
	margin-bottom: 20px;
}

.container > .row > div[class^="col-"]:last-of-type > div:last-of-type {
	margin-bottom: 20px;
}

/*
	Text alignment handling
*/
.text-left-not-xs, .text-left-not-sm, .text-left-not-md, .text-left-not-lg {
	text-align: left;
}

.text-center-not-xs, .text-center-not-sm, .text-center-not-md, .text-center-not-lg {
	text-align: center;
}

.text-right-not-xs, .text-right-not-sm, .text-right-not-md, .text-right-not-lg {
	text-align: right;
}

.text-justify-not-xs, .text-justify-not-sm, .text-justify-not-md, .text-justify-not-lg {
	text-align: justify;
}

@media (max-width: 767px) {
	.text-left-not-xs, .text-center-not-xs, .text-right-not-xs, .text-justify-not-xs {
		text-align: inherit;
	}

	.text-left-xs {
		text-align: left;
	}

	.text-center-xs {
		text-align: center;
	}

	.text-right-xs {
		text-align: right;
	}

	.text-justify-xs {
		text-align: justify;
	}
}

@media (min-width: 768px) and (max-width: 991px) {
	.text-left-not-sm, .text-center-not-sm, .text-right-not-sm, .text-justify-not-sm {
		text-align: inherit;
	}

	.text-left-sm {
		text-align: left;
	}

	.text-center-sm {
		text-align: center;
	}

	.text-right-sm {
		text-align: right;
	}

	.text-justify-sm {
		text-align: justify;
	}
}

@media (min-width: 992px) and (max-width: 1199px) {
	.text-left-not-md, .text-center-not-md, .text-right-not-md, .text-justify-not-md {
		text-align: inherit;
	}

	.text-left-md {
		text-align: left;
	}

	.text-center-md {
		text-align: center;
	}

	.text-right-md {
		text-align: right;
	}

	.text-justify-md {
		text-align: justify;
	}
}

@media (min-width: 1200px) {
	.text-left-not-lg, .text-center-not-lg, .text-right-not-lg, .text-justify-not-lg {
		text-align: inherit;
	}

	.text-left-lg {
		text-align: left;
	}

	.text-center-lg {
		text-align: center;
	}

	.text-right-lg {
		text-align: right;
	}

	.text-justify-lg {
		text-align: justify;
	}
}

*/
/*
	Form handling
*/
.form-horizontal {
	max-width: 750px;
	margin-left: auto;
	margin-right: auto;
}

.form-horizontal .form-group {
	margin: 10px 0px;
}

/*
	Other layout styles
*/

.center {
	display: table-cell;
	float: none;
	text-align: center;
	vertical-align: middle;
	width: 100%;
}

.centerHorizontal {
	display: table-cell;
	float: none;
	text-align: center;
	width: 100%;
}

.centerVertical {
	display: table-cell;
	float: none;
	vertical-align: middle;
	width: 100%;
}

.img-responsive {
	width: auto;
	height: auto;
}

/* 
	Bootstrap does not float 12 column styles, which means
	that they cover instead of wrapping when combined with
	other floats. Add this style to a row to counter this 
	behaviour and allow 12's to wrap when used inside a large 
	group with other float.
*/
.large-group .col-lg-12 {
	float: left;
}
.large-group .col-md-12 {
	float: left;
}
.large-group .col-sm-12 {
	float: left;
}
.large-group .col-xs-12 {
	float: left;
}


margin-0 {
	margin: 0px;
}

.padding-0 {
	padding: 0px;
}

.padding-5 {
	padding: 5px;
}

.paddingLeftRight-5 {
	padding-left: 5px;
	padding-right: 5px;
}

.padding-10 {
	padding: 10px;
}

.paddingLeftRight-10 {
	padding-left: 10px;
	padding-right: 10px;
}

.padding-20 {
	padding: 20px;
}

.paddingLeftRight-20 {
	padding-left: 20px;
	padding-right: 20px;
}


.padding-30 {
	padding: 30px;
}

.paddingLeftRight-30 {
	padding-left: 30px;
	padding-right: 30px;
}

.videocontainer640360 {
	position: relative;
	width: 100%;
	height: 0;
	padding-bottom: 56.25%; /* This should be set to the aspect ratio of the video (percent height is of the width) */
}

.videocontainer640480 {
	position: relative;
	width: 100%;
	height: 0;
	padding-bottom: 75%; /* This should be set to the aspect ratio of the video (percent height is of the width) */
}

.video {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}