/*========== HEADER ==========*/
#header {
	background-color: #f0f0f0;
	box-shadow: 0 0 10px rgba(0,0,0,.5);
	padding: 1.5em;
}

#header a { display: block; }
.ie6 #header a { display: block; }




/*========== FOOTER ==========*/
#footer {
	border-top: dashed 1px #ddd;
	padding: 1.5em;
}




/*========== CONETNT ==========*/
#content {
	padding: 1.5em;
	max-width: 800px;
	min-height: 500px;
}

body[data-controller=report][data-action=index] #content {
	max-width: none;
}

#content h2,
#content h3 { color: #996c2b; font-weight: normal; }

#content fieldset>legend { color: #6dbc2f; }

#content form label.radio,
#content form label.checkbox {
	-webkit-transition: background-color .5s;
	   -moz-transition: background-color .5s;
	        transition: background-color .5s;
}
#content form label.radio.active,
#content form label.checkbox.active {
	font-weight: bold;
	text-decoration: underline;
}




/*========== CONTENT : EVENT DETAIL ==========*/
#event-detail .row-fluid { margin-top: .5em; }
#event-detail .row-fluid:first-child { margin-top: 0; }




/*========== CONTENT : REGISTRATION FORM ==========*/
#content .control-label { font-weight: bold !important; }
#content .controls code { position: relative; top: 3px; }
#content .controls code.help { display: inline-block; white-space: normal; }




/*========== OTHER : JQUERY VALIDATION ==========*/
#content label.error {
	color: #b94a48;
	float: right;
	font-size: .8em;
}




/*========== CONTENT : REPORT ==========*/
#report-download .btn { margin-top: 5px; }




/*========== RESPONSIVE ==========*/
@media (max-width: 480px) {

	/* general */
	body { padding: 0; }

	/* header */
	#header { padding: 1em; }

	/* footer */
	#footer { text-align: center; }

	/* modal */
	.modal .modal-body { height: 280px; }
	.modal .modal-footer { margin-top: 0; }

	/* content */
	#content h2,
	#content h3 { font-size: 1.5em; text-align: center; }
	#content form [type=submit] { width: 100%; }

	/* form (both modal & content) */
	input,
	select,
	textarea { font-size: 16px !important; }

	input[type=text],
	input[type=password],
	input[type=email] { padding: 1.5em 0 !important; }
	select { height: 3em !important; /*padding: 1.5em 0 !important;*/ }

	label.radio,
	label.checkbox,
	label.inline.radio,
	label.inline.checkbox {
		background-color: #eee;
		border-radius: 3px;
		border: solid 1px silver;
		display: block;
		margin: 0 0 3px 0;
		padding: 10px;
		text-align: center;
	}

	label.radio.active,
	label.checkbox.active { background-color: #ccc; text-decoration: none !important; }
	label.radio input,
	label.checkbox input { margin-left: 0 !important; }

}




/*========== FIX MODAL HEIGHT ISSUE IN IPHONE ==========*/

/*
http://stackoverflow.com/questions/12067802/modal-box-on-iphone-no-scroll
Now adjust the height so it handles various screen sizes & orientations
You could make this as granular as you like, or have it more granular at common screen sizes
but it should start at the height we set on .modal (i.e. 500px) & work down
*/