body {
    margin: 0;    
    padding: 0;   
    background-color: #ececec;  
    font-family: Optima, "Microsoft Sans Serif", sans-serif;   
    font-size: 1em;
}

.container {    
	/* margin: 0em 1em 0em 1em; */
}

.bodyContent {
    border: 1px solid #a6a6a6;
    background-color: white;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
}
.tr {padding:10px;} /* padding goes at the end div */

a, a:visited, a:hover {
	font-size:12pt;
	color:SlateGray;
	text-decoration:none;
	font-weight:normal;
}
a:hover {
	text-decoration:underline;
}

a.headLink:link, a.headLink:visited, a.headLink:hover {
	font-size: 10pt;
	color: white;
	text-decoration: none;
	font-weight: bold;
}
a.headLink:hover {
	text-decoration: underline;
}

a.headLinkSelected {
	font-size: 10pt;
	color: yellow;
	font-weight: bold;
}

.headLabelLt {font-size:10pt;color:yellow;font-weight:bold;font-style: italic;}

/* misc form hints content */
.hk {font-size:12pt;color:#ffffff;}
.hkb {font-size:12pt;color:#000000;}
.hkgry {font-size:12pt;color:#666666;}
.hkgrn {font-size:12pt;color:SlateGray;}

.tagline {font-size: 12pt;color: #ffffff;text-decoration: none;font-weight: bold;font-style: italic;}
.footnote {font-size: 12pt;color: #666666;font-weight:normal;}

/* main content 10pt normal */
.content {font-size: 12pt;color: #000000;font-weight:normal;}
.contentGry {font-size: 12pt;color: #666666;font-weight:normal;}
.contentGrn {font-size: 12pt;color: SlateGray;font-weight:normal;}
.contentRed {font-size: 12pt;color: #ff0000;font-weight:normal;}

/* main content 10pt bold*/
.contentBold {font-size: 12pt;color: #000000;font-weight:bold;}
.contentBoldGry {font-size: 12pt;color: #666666;font-weight:bold;}
.contentBoldGrn {font-size: 12pt;color: SlateGray;font-weight:bold;}

/* large content titles, keep normal don't bold */
.contentTitleGrn {color:SlateGray;font-size:2em;font-weight:normal;} /* dashboard title */
.contentTitleBlk {color:#000000;font-size:2em;font-weight:normal;} /* dashboard totals */
.contentTitleGry {color:#666666;font-size:2em;font-weight:normal;} /* dashboard totals */

/* header titles 10pt normal*/
.title {font-size:12pt;color:SlateGray;font-weight:normal;}
.titleBlk {font-size:12pt;color:#000000;font-weight:normal;}
.titleGry {font-size:12pt;color:#666666;font-weight:normal;}

/* header titles 12pt bold */
.titleBold {font-size:12pt;color:SlateGray;font-weight:bold;}
.titleBoldBlk {font-size:12pt;color:#000000;font-weight:bold;}
.titleBoldGry {font-size:12pt;color:#666666;font-weight:bold;}

.formLabelRequired {
	font-weight: bold;
	text-decoration:underline;
}

div.headerButtons {
	color: white;
}
div.headerButtons a {
	color: white;
	text-decoration: none;
	border: 1px solid white;
	border-radius: 6px;
	padding:0 16px;
}
div.headerButtons a:hover {
	-moz-box-shadow: 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(255,255,255,0.7) inset;
	-webkit-box-shadow: 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(255,255,255,0.7) inset;
	box-shadow: 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(255,255,255,0.7) inset;
}
div.headerButtons a.inverted {
	background-color: white;
	color: #003300;
}
div.headerButtons a.inverted:hover {
	-moz-box-shadow: 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(255,255,255,0.7) inset;
	-webkit-box-shadow: 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(255,255,255,0.7) inset;
	box-shadow: 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(255,255,255,0.7) inset;
}

/* Right-aligned modal window */
.modalRight {
	position: fixed;
	top: 0px; 
	right: 0px; 
    overflow-y: scroll;
    height: 100%;
}

.editDialog {
	margin:0.5em;
}
.dialogLeftColumn {
	float:left;
	width:20%;
	padding:0.25em;
}
.dialogRightColumn {
	float:left;
	padding:0.25em;
}
.dialogRightColumnContinued {
	float:left;
	padding:0.25em 0.25em 0.25em 1em;
}

.formLeftColumn {
	float:left;
	width:5em;
	padding:0.25em;
}
.formRightColumn {
	float:left;
	padding:0.25em;
}
.formRightColumnContinued {
	float:left;
	padding:0.25em 0.25em 0.25em 1em;
}

.formControls {
	margin:1em 1em 0em 1em;
}
.resultsPerPage {
	float:right;
}
.margin {
	margin:1em 1em 1em 1em;
}
.smallMargin {
	margin:0.5em 0.5em 0.5em 0.5em;
}


/* Wicket Auto-Complete styles */
div.wicket-aa {font-size: 12pt;background-color: white;border-width: 1px;border-color: #cccccc;
	border-style: solid;padding: 0px;margin: 1px black;text-align: left;}
div.wicket-aa ul {list-style: none;padding: 0px;margin: 0;}
div.wicket-aa ul li.selected {background-color: #cccccc;padding: 0px;margin: 0;}

table.panelTable {
	border-collapse: collapse;
	font-size: 0.9em;
    padding: 0 2em 0 2em;
}
table.panelTable tr {
}
table.panelTable tr:nth-child(even) {
	background-color: white;
}
table.panelTable td {
    padding: 0.25em 0.75em 0.25em 0.75em;
}

/* DataView */
table.dataview {color:black;font-size:10pt;border-bottom:1px solid #ffffff;;} /* results bottom border*/
table.dataview caption {text-align: left;color:orange;}
table.dataview a {font-size:10pt}

table.dataview tr.even {background-color: #ffffff;}
table.dataview tr.odd {background-color: #e8e8e8;}

table.dataview tr th {font-weight:normal;font-size:10pt;padding-top:3px;padding-bottom:3px;padding-left:3px;padding-right:10px;background-color:#ffffff;
					  border-top: 1px solid #cccccc;border-bottom: 1px solid #cccccc;border-left: 1px solid #cccccc;border-right: 1px solid #cccccc;
					  text-align:left;white-space:nowrap;vertical-align:middle; background-position:right;background-repeat:no-repeat;color:black;} /* results header*/
table.dataview tr th.wicket_orderDown {background-color: #ffffff;background-image: url(images/arrow_down.png);}
table.dataview tr th.wicket_orderUp {background-color: #ffffff;background-image: url(images/arrow_up.png);}
table.dataview tr th.wicket_orderNone {background-image: url(images/arrow_off.png);color:pink;}
table.dataview tr th a {font-weight:normal;color:black;font-size:10pt;} /* results header publish date author source */

table.dataview #message {padding-left: 3px;}
table.dataview caption {padding-bottom: 2px;}

table.dataview td {text-align:left;padding-left:3px;padding-right:10px;} /* padding should match the header row */
					  
/* Customize column widths for Events + Awards screens */					  
table.dataview td.id {width: 3%;}
table.dataview td.deadline {width: 8%}
table.dataview td.start {width: 8%;}
table.dataview td.end {width: 8%;}

/* Notes column needs to highlight hyperlinks */
table.dataview td.notes a {font-size:10pt;color:SlateGray;text-decoration:none;font-weight:normal;}/*vs*/
table.dataview td.notes a:hover {font-size:10pt;color:SlateGray;text-decoration:underline;font-weight:normal;}/*vs*/
table.dataview td.notes a:visited{font-size:10pt;color:SlateGray;text-decoration:none;font-weight:normal;}/*vs*/

/* NAVIGATION */
table.grid tr.navigation {text-align:left;color:blue;}
table.grid tr.navigation td {padding-right:0px;color:blue;}

.environmentLabel {
	color:yellow; 
	font-size:14px;
	font-weight:bold;
}

.screen-veil {	
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    text-align: center;
    z-index: 1000;
    opacity: 0.7;
}

div.overlay {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    text-align: center;
    z-index: 1000;
    opacity: 0.7;
    background: #fff url('../images/loading-circle.gif') no-repeat center center;   
}

/* MESSAGE BAR STYLES (for bar between header and main body, used for one-time alerts and such) */

.dialogMessageBar {
	padding: 0.5em;
}

div.messageBar {
    text-align: center;
    padding: 10px 8px;
    font-weight: bold;
    font-size: 16px;
    background-color: yellow;
    box-shadow: 0px 2px 8px #999;
    -moz-box-shadow: 0px 2px 8px #999;
    -webkit-box-shadow: 0px 2px 8px #999;
}

div.messageBar div.closeMessageBar {
    float: right;
    margin-right: 4px
}

div.messageBar div.closeMessageBar a {
    text-decoration: none;
    color: #222;
    -moz-text-shadow: 1px 1px 2px #666;
    -webkit-text-shadow: 1px 1px 2px #666;
    text-shadow: 1px 1px 2px #666;  
}

/* END MESSAGE BAR STYLES */

.requiredField {
	background-color: yellow;
	padding: 0.25em;
}

.highlightedField {
	background-color: yellow;
	font-weight: bold;
}

/* MODAL DIALOG STYLES */

div.modalHeader {
    font-size: 24px;
    font-weight: bold;
    text-align: center;
}

div.modalLoading {
    background: transparent url('../images/loading-circle.gif') no-repeat center center;
    height: 32px;
    padding: 20px 0px;
}

span.feedback {
    font-weight: bold;
    font-size: 20px;
    text-align: center;
    padding: 20px;
    color: SlateGray;
}
span.feedback ul {
    list-style: none;   
}

div.modalForm {     
    margin-left: auto;  
    margin-right: auto; 
    height: 30em;   
    width: 40em;   
    padding: 0em 3em 3em 3em;
}

div.modalFormWide {     
    margin-left: auto;  
    margin-right: auto; 
    width: 45em;   
}

div.modalForm span.error {
    font-size: 20px;
    padding-bottom: 20px;
}
div.modalForm span.error ul {
    list-style: none;
}

div.modalFooter {
    font-size: 12px;
    font-weight: bold;
    font-style: italic;
	text-align: right;
    padding-top: 6px;
    border-top: 1px solid #999;
}

/* END MODAL DIALOG STYLES */

/* HALF-FORM STYLES - USED FOR LOGIN, FORGOT PASSWORD, RESET PASSWORD, AND MODAL DIALOGS */

div.halfForm div.explanation {
    font-size: 14px;
    font-style: italic;
    padding-bottom: 12px;
}

div.halfForm div.separator {
    height: 2px;
    background: #a6a6a6;
    margin: 12px 0px 24px 0px;
}

div.halfForm label.above {
    font-size: 20px;
    font-weight: bold;
    display: block;
    padding: 0px;
}

div.halfForm label.after {
    font-size: 14px;
    font-weight: bold;
}

div.halfForm .halfFormBox {
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    padding: 4px;
    border: 1px solid #a6a6a6;
    font-size: 20px;
    width: 390px;   
}

div.halfForm .halfFormLabel {
    padding: 4px;
    font-size: 20px;
    width: 390px;   
}

div.halfForm div.halfFormRow {
    padding-bottom: 12px;
}

div.halfForm div.halfFormBottom {   
    text-align: right;      
}

div.halfForm label.inline {
    font-size: 20px;
    font-weight: bold;  
}

div.halfForm input.halfFormCheckbox {
    font-size: 20px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;         
    border: 1px solid #a6a6a6;  
}

div.halfForm textarea.halfFormBox {
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    padding: 4px;
    border: 1px solid #a6a6a6;
    font-size: 20px;
    width: 390px;   
    height: 120px;
}

div.halfForm select.halfFormBox {
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    padding: 4px;
    border: 1px solid #a6a6a6;
    font-size: 20px;    
}

div.halfForm div.error {
    font-size: 20px;
    padding-bottom: 12px;
}

/* BUTTON STYLES */

.bigButton, .bigButton:visited, .bigButton:hover {	
	color: white;
	font-size: 18px;
	font-weight: bold;
	line-height: 32px;
	text-align: center;
	text-decoration: none;
	text-shadow: 0 1px 1px rgba(255,255,255,0.37);
	background-color: SlateGray;
	border: 1px solid #2a3f56;
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	border-radius: 6px;
	margin: 6px auto 0 12px;
	padding:0 16px;
	cursor: pointer;
	display: inline-block;
	position: relative;
	-moz-background-clip: padding-box;
	-webkit-background-clip: padding-box;
	background-clip: padding-box;
	height: 32px;
	white-space: nowrap;
	outline-width: 0;	
}

.bigButton:hover {
	-moz-box-shadow: 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(255,255,255,0.7) inset;
	-webkit-box-shadow: 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(255,255,255,0.7) inset;
	box-shadow: 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(255,255,255,0.7) inset;
}	

.bigButton:active {
	-moz-box-shadow: 0 1px 0 rgba(255,255,255,0.3),0 1px 3px rgba(0,0,0,0.7) inset;
	-webkit-box-shadow: 0 1px 0 rgba(255,255,255,0.3),0 1px 3px rgba(0,0,0,0.7) inset;
	box-shadow: 0 1px 0 rgba(255,255,255,0.3),0 1px 3px rgba(0,0,0,0.7) inset;	
}

.littleButton, .littleButton:visited, .littleButton:hover {
	color: white;
	font-size: 11px;
	font-weight: bold;
	line-height: 18px;
	text-align: center;
	text-decoration: none;
	text-shadow: 0 1px 1px rgba(255,255,255,0.37);
	background-color: SlateGray;
	border: 1px solid #2a3f56;
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	border-radius: 6px;
	margin: 0px;
	padding: 0px 8px;
	cursor: pointer;
	display: inline-block;
	position: relative;
	-moz-background-clip: padding-box;
	-webkit-background-clip: padding-box;
	background-clip: padding-box;
	height: 18px;
	white-space: nowrap;
	outline-width: 0;	
}

.littleButton:hover {
	-moz-box-shadow: 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(255,255,255,0.7) inset;
	-webkit-box-shadow: 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(255,255,255,0.7) inset;
	box-shadow: 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(255,255,255,0.7) inset;
}
	
.littleButton:active {
	-moz-box-shadow: 0 1px 0 rgba(255,255,255,0.3),0 1px 3px rgba(0,0,0,0.7) inset;
	-webkit-box-shadow: 0 1px 0 rgba(255,255,255,0.3),0 1px 3px rgba(0,0,0,0.7) inset;
	box-shadow: 0 1px 0 rgba(255,255,255,0.3),0 1px 3px rgba(0,0,0,0.7) inset;	
}

.littleButtonGrey {
	background-color: #dedede;
	border: 1px solid #666;
}

.littleButtonOff {
	padding-left: 21px;
	padding-right: 6px;	
	margin-left: 8px;	
}

.littleButtonOn {
	background-image: url('../images/check.png');
	background-repeat: no-repeat;
	background-position: 5px center;
	padding-left: 21px;
	padding-right: 6px;	
	margin-left: 8px;	
}

.littleButtonMarginRight {
	margin-right: 12px;
}

.buttonInverted {
	color: SlateGray;
	background-color: white;
}
	
/* END BUTTON STYLES */

.formRow {
	padding: 1em;
	border-top: 1px solid #666;
}
.buttonRow {
	padding: 0.5em;
	width:50%;
	margin:auto;
}

.modeHeader {	
	background-color:SlateGray;
	padding:0.25em;
}

.modeSubheader {	
	background-color:black;
	padding:0.5em;
}

/* JQUERY UI STYLES */

/*
.ui-widget {
	font-size: 1em;	
}
*/

.ui-button-text {
	font-size: 0.769em;	
}

.ui-tooltip {
    z-index: 50000;
    border: none;
	/*border: 0.077em solid white;*/
    background: #111;
    color: white;
}

.ui-selectmenu-menu {
	/* So that it can be used in modal dialogs */
    z-index: 40000;
}

.modeHeader .ui-selectmenu-button {
	background-image: none;
	background-color: white;
	font-weight: bold;
	font-size: 0.8em;
}

/* END JQUERY UI STYLES */

div.verticalCenter {
	display:inline;
	vertical-align:-50%;
}