/*
	Design Notes: These styles have been designed to be used by all Simply Logical development projects.
	              Leave the style names and widths as they help ensure development consistancy from app to app.
	              Change the fonts and colours to suit the application.
	
	              Link to this file first so subsequent files can overrule the formatting.
*/

.block {
	display: block;
}

.inline {
	display: inline;
}

.noScroll {
	overflow: hidden !important;
}

.noScrollHorz {
	overflow-x: hidden;
}

/* Standard Controls */
.label {
	/* Change formatting as required */
	display: inline-block;
}

.textBox {
	/* Change formatting as required */
}

.leftAligned {
	text-align: left;
}

.rightAligned {
	text-align: right;
}

.centered {
	text-align: center;
}

.horizontallySpacedRight {
	margin-right: 5px;
}

.bold {
	font-weight: bold;
}


/* Classes for creating tables with divs and spans */
.rowContainer, .columnContainer {
	/* Change formatting as required */
}

	.rowContainer > div, .rowContainer > span, .rowContainer > fieldset {
		display: inline-block;
		vertical-align: top;
	}

	.rowContainer > div.hidden, .rowContainer > span.hidden, .rowContainer > fieldset.hidden {
		display: none;
	}

	.columnContainer > div, .columnContainer > span, .columnContainer > fieldset {
		display: block;
		margin-bottom: 2px;
	}

	.columnContainer > div.hidden, .columnContainer > span.hidden, .columnContainer > fieldset.hidden {
		display: none;
	}

.verticallySpaced {
	margin-top: 3px;
	margin-bottom: 6px;
}

/* Width Classes */
.fullWidth, .width100 {
	width: 100%;
	margin: 0;
}

.halfWidth, .width50 {
	width: 50%;
}

.narrow {
	width: 100px;
}

.standardWidth {
	width: 250px;
}

.wide {
	width: 500px;
}

.width1, .width2, .width3, .width4, .width5, .width6, .width7, .width8, .width25, .width33, .width40, .width49, .width60, .width75, .width98, .width200 {
	box-sizing:border-box;
	-moz-box-sizing:border-box; /* Firefox */
}

.width25 {
	width: 25%;
}

.width33 {
	width: 33.33%;
}

.width66 {
	width: 66.67%;
}

.width40 {
	width: 40%;
}

.width49 {
	width: 49%;
}

.width60 {
	width: 60%;
}

.width75 {
	width: 75%;
}

.width98 {
	width: 98%;
}

.width200 {
	width: 200px;
}

/* Standard Heights */
.autoShrinkHeight {
	min-height: initial;
}

.standardHeight, .tall, .veryTall, .ultraTall, .height180, .height440 {
	overflow-y: auto;
}

.autosize, .autosize1, .autosize2, .autosize3, .autosize4 {
	overflow-y: auto;
	resize: none;
}

.standardHeight, .autosize1 {
	min-height: 40px;
	max-height: 40px;
}

.tall, .autosize2 {
	min-height: 80px;
	max-height: 80px;
}

.veryTall, .autosize3 {
	min-height: 120px;
	max-height: 120px;
}

.height180 {
	min-height: 180px;
	max-height: 180px;
}

.ultraTall, .autosize4 {
	min-height: 240px;
	max-height: 240px;
}

.height440 {
	min-height: 440px;
	max-height: 440px;
}

.maxHeight600 {
	max-height: 600px;
	overflow: auto;
}

.autosize1 {
	max-height: 120px;
}

.autosize2 {
	max-height: 160px;
}

.autosize3 {
	max-height: 240px;
}

.autosize4 {
	max-height: 320px;
}

/* Box Formatting */
.bordered {
	border: 1px solid #808080;
	padding-left: 5px;
	padding-right: 5px;
	margin: 0;
}

.shadowed {
	padding: 5px;
	border: 1px solid #808080;
	margin-bottom: 20px;
	box-shadow: rgba(0,0,0, .15) 3px 3px 6px;
	-moz-box-shadow: rgba(0,0,0, .15) 3px 3px 6px;
	-webkit-box-shadow: rgba(0,0,0, .15) 3px 3px 6px;
}

.valigned,.valigned td {
	vertical-align: top;
}