/**
 * default.css
 *
 * These are styles which are normally necessary when using this framework.
 * You can customize this file as you see fit.
 *
 * @author Nicholas Piasecki <npiasecki@shepherdmed.com>
 */
 
html, body {
	
}

	#body-wrapper,
	#body-wrapper th,
	#body-wrapper td {
		font-size: 1.3em;
	}

	form {
		margin-left: 1em;
	}
	
			form h1, form h2, form h3 {
				border-bottom: 1px solid black;
				font-size: 1em;
				margin: 1em 0 0 -1em;
				padding: 0 0 0.5em 0;
			}
			
			form p.buttons-row {
				margin-top: 1em;
			}
			
			form .invalid {
				color: red;
			}
			
				form label.invalid,
				form label.required.invalid {
					background: url( "../../media/library/icons/error.png" ) no-repeat bottom left !important; /* IE needs the important */
					padding-left: 19px;
				}
			
			form input,
			form select,
			form textarea {
				font: 9pt Helvetica, Arial, sans-serif;
				padding-left: 2px;
			}
			
				form input.required,
				form select.required,
				form textarea.required {
					background-color: #FFED99;
				}
				
				form textarea {
					font: 9pt "Courier New", sans-serif;
				}
		
			form label {
				display: block;
				margin: 0.5em 0 0 0;
			}
			
				form label.option {
					display: inline;
					margin: 0 1em 0 0;
					vertical-align: top;
				}
				
				form label.required {
					background: url( "../../media/library/icons/asterisk_yellow.png" ) no-repeat bottom left;
					font-weight: bold;
					padding-left: 19px;
				}
				
	.js-datepicker-calendar {
		border: 2px solid black;
		font-size: 1.15em;
		width: 20em;
	}
	
		.js-datepicker-calendar a {
			text-decoration: none;
		}
		
		.js-datepicker-calendar div {
			background-color: black;
			color: white;
			font-weight: bold;
			padding: 1em 0;
		}
		
			.js-datepicker-calendar div a {
				color: white !important; /* IE 6 */
			}
			
				.js-datepicker-calendar a.close-link {
					margin: 0 0.25em 0 0.5em;
				}
	
		.js-datepicker-calendar table {
			font-size: 1.15em;
			text-align: center;
			width: 100%;
		}
		
			.js-datepicker-calendar table td {
				
			}
			
				.js-datepicker-calendar table td.outside-month {
					background-color: gray;
				}
		
				.js-datepicker-calendar table td a {
					display: block;
					padding: 1em;
				}
				
					.js-datepicker-calendar table td a:hover {
						background-color: #FFED99;
					}

	.message {
		margin: 1em 0;
		padding: 1em;
		width: 40em;
	}
	
		.message h2 {
			margin-top: 0;
		}
		
		.message.error {
			border: 1px solid red;
		}
	
		.message.info {
			border: 1px solid green;
		}
		
		.message.question {
			border: 1px solid yellow;
		}
		
		.message.warning {
			border: 1px solid orange;
		}
		
	strong {
		background-color: #FFED99;
		font-weight: normal;
		padding: 0 0.25em;
	}