/*======================== Basic ========================*/
#DA-message {
	color: #cc0000;
	max-width: 640px;
}

#DA-message header {
	font-size: 10pt;
}

#DA-message div.image {
	text-align: center;
	margin: 1em auto;
	max-width: 280px;
}

#DA-message ul {
	margin-bottom: 0;
}

#errors {
	display: none;
}

#notes {
	display: none;
	text-decoration: none;
	list-style-type: decimal;
	font-size: 10pt;
}

.calculate {
	background: url("../../images/icon_16x16_calculator.png") no-repeat left center;
	padding-left: 20px;
	color: #5781ab;
	font-weight: normal;
}

.slider-container {
	display: none;
	width: 100px;
	padding: 1em 0.5em;
}

.unit {
	color: #444444;
	font-size: 10pt;
	vertical-align: middle;
}

.equals {
	display: inline-block;
	vertical-align: middle;
	font-size: 18pt;
	margin:0 10px;
}

#site-body-content h3 {
	margin-bottom: 0.25em;
}

.example-math {
	color: #336699;
	list-style-type: decimal;
	margin-top: 1em;
}

.example-math li strong {
	color: #333333;
}

.answer {
	display: none;
	margin-bottom: 2em;
}

/*======================== Input ========================*/
.input-label {
	text-align: left;
	font-weight: bold;
	color: #1d456e;
	font-size: 10pt;
	line-height: 1.5;
	display: block;
	margin-bottom: 0.5em;
}

.input-wrapper {
	margin-bottom: 1em;
}

.input-wrapper input.text {
	max-width: 5em;
}

.input-wrapper select {
	min-width: 5.3125em;
	max-width: 25em;
}

.input-group {
	/*border: 1px solid transparent;*/
	border-radius: 5px;
}


/*======================== Output ========================*/
.result-label {
	text-align: left;
	font-weight: bold;
	color: #222222;
	font-size: 10pt;
	line-height: 1.5;
	display: block;
	margin-bottom: 0.5em;
}

.result-wrapper {
	margin-bottom: 1em;
	text-align: left;
	min-height: 32px;
	line-height: 32px;
}

.result {
	font-size: 14pt;
	color: #476F99;
	font-weight: bold;
	vertical-align: middle;
}

.result-wrapper input.text {
	max-width: 5em;
}

.result-wrapper select {
	min-width: 5.3125em;
	max-width: 25em;
}

.result-group {
	background-color: #eef3f9;
	/*border: 1px solid transparent;*/
	border-radius: 5px;
}

.result-group .fr-n,
.result-group .fr-d {
	font-size: 50%;
	padding: 0 1px;
}

.result-group .page-layout-inner-padding {
	padding: 1em;
}

.result-group .fr-n {
	vertical-align: 1.5ex;
}

.result-group .fr-d {
	vertical-align: 0ex;
}


/*======================== Errors ========================*/
.error {
	position: relative;
}

.input-error,
.result-error,
.result-warning {
	color: #cc0000;
	cursor: help;
}

.result-warning {
	color: #FF9900;
}

.result-error-msg,
.input-error-msg {
	display: none;
	background: #ffd7c6;
	color: #cc0000;
	text-align: left;
	padding: 10px;
	position: relative;
	font-size: 10pt;
	margin-bottom: 1em;
	border-radius: 5px;
}

.result-error-msg:after,
.result-error-msg:before,
.input-error-msg:after,
.input-error-msg:before  {
	border-left: 10px solid transparent;
	border-right: 10px solid transparent;
	border-bottom: 10px solid #ffd7c6;
	top: -10px;
	content: '';
	left: 50px;
	margin-left: -30px;
	position: absolute;
}

.result-warning-msg,
.warning-message {
	display: none;
	background: #ffeeaa;
	color: #000000;
	text-align: left;
	padding: 10px;
	position: relative;
	font-size: 10pt;
	margin-bottom: 1em;
	border-radius: 5px;
}

.result-warning-msg:after,
.result-warning-msg:before  {
	border-left: 10px solid transparent;
	border-right: 10px solid transparent;
	border-bottom: 10px solid #ffeeaa;
	top: -10px;
	content: '';
	left: 50px;
	margin-left: -30px;
	position: absolute;
}

.note {
	font-size: 8pt;
	vertical-align: text-top;
	padding: 0 2px;
	white-space: nowrap;
	font-weight: normal;
	text-decoration: none;
	color: #CC6600;
	display: none;
}

/*======================== Index layout ========================*/
#mw-header {
	margin-bottom: 1em;
}

#mw-image {
	display: none;
	color: #555555;
}

#mw-image img {
	height: 150px;
}
	
.column {
	padding: 1em;
	border-radius: 5px;
	margin-bottom: 1em;
	background-color: #eeeeee;
}

.column h3 {
	color: #1d456e;
	margin-bottom: 0.5em;
}

.ie7 .column div {
	zoom: 1;
}

#category_select {
	display: block;
	margin-bottom: 1em;
}

#category_list {
	display: none;
}

.input-group .ui-text-help,
.result-group .ui-text-help {
	display: inline-block;
}

@media screen and (min-width: 641px) {

	#category_select {
		display: none;
	}
	
	#category_list {
		display: block;
	}
		
	.input-group .page-layout-inner-padding {
		padding: 1em;
	}
	
	.result-wrapper {
		text-align: left;
	}

	.result {
		font: 20pt Arial;
	}
		
	.column {
		float: left;
		width: 40%;
		margin-right: 1em;
		height: 234px;
	}
	
	#column-sizing-units {
		height: 516px;
	}
	
	.input-wrapper input.text,
	.result-wrapper input.text {
		max-width: 7em;
	}
	
	#DA-message header {
		font-size: 14pt;
		padding-left: 64px;
		background-image: url("../../images/icon_48x48_stop.png");
		background-repeat: no-repeat;
		background-position: left 0;
	}
	
	#DA-message div.image {
		max-width: 100%;
	}
		
}

@media screen and (min-width: 961px) {

	.slider-container {
		display: block;
		float: left;
		margin-right: 1em;
		padding: 0.5em 0 0 0;
	}
	
	.input-group {
		/*float: left;
		width: 75%;*/
		background: url("../../images/icon_48x48_input.png") no-repeat left top;
		padding-left: 50px;
	}
	
	.result-group {
		/*width: 50%;
		float: left;*/
		background: #eef3f9 url("../../images/icon_48x48_calculator.png") no-repeat left top;
		padding-left: 50px;
	}
			
	#mw-header,
	#mw-description {
		float: left;
		width: 80%;
	}
	
	#mw-description {
		margin: 0 0 1em 0;
	}
	
	#mw-image {
		display: block;
		float: right;
		width: 20%;
		padding-top: 4em;
		margin: 0 0 1em 0;
		padding-top: 4em;
	}
		
	#mw-image img {
		height: auto;
	}
	
	.column {
		float: left;
		min-height: 200px;
		width: 26%;
	}
}