body {
	background-image: url('../images/bodybg.png');
	background-repeat: repeat-both;
	text-align: center;
	margin: 8px;
	font-family: sans-serif;
	font-size: 1.0em;
	font-style: normal;
	font-variant: normal;
	font-weight: normal;
}
.bodyLRLayoutTable {
	width: 100%;
	display: table;
}
.bodyLRLayoutTR {
	display: table-row;
}
.bodyLRLayoutTD {
	display: table-cell;
	vertical-align: top;
}
.leftSide, .rightSide {
	display: table;
	margin: 0 auto;
	margin-top: 50px;
	min-width: 60px;
}
.outerCont {
	background: #ffffff;
	margin: 0 auto;
	text-align: left;
	border: 1px solid grey;
	border-top: none;
}
.topNavTable {
	display: table;
	width:100%;
	height: 42px;
	background-image: url(images/navGradient.jpg);
	background-repeat: repeat-x;
	border: none;
}
.topNavTR {
	display: table-row;
}
.topNavTD {
	display: table-cell;
}
#topNavTable a, #topNavTable a:active, #topNavTable a:link, #topNavTable a:visited, #topNavTable a:focus, #topNavTable a:hover {
	text-decoration: none;
	font: 1.0em Sans-Serif;
	font-weight: bold;
	color: #e0e0e0;
	outline: 0;
}
#topNavTable a:active {
	color: #c0c0c0;
}
#topLogo {
	border: none;
	height: 42px;
	background-image: url('images/logosmall.jpg');
	background-repeat: no-repeat;
	font: 1.4em Sans-Serif;
	font-weight: bold;
	font-style: italic;
	color: #e0e0d0;
	text-shadow: lightgray 0.075em 0.075em 0.15em;
	padding: 0px;
	padding-left: 60px;
	padding-bottom: 6px;
	background-position: 4px 4px;
	background-size: 50px 33px;
	display: table-cell;
	vertical-align: bottom;
}
#topNavCont {
	padding: 4px 15px 8px 4px;
	text-align: right;
	vertical-align: bottom;
	color: #f0f0f0;
	background-color: transparent;
	border: none;
	height: auto;
	margin: 0;
}
.content {
	min-height: 600px;
	border: none;
	margin: 4px;
	font: 1.0em Sans-Serif;
}
.footer {
	text-align: center;
	font: 0.75em Sans-Serif;
}
a, a:active, a:link, a:visited, a:focus, a:hover {
	color: blue;
	text-decoration: none;
}
.errorMsg, .successMsg {
	font: 1.2em/1.2em Tahoma, Arial, sans-serif;
	font-weight: bold;
}
.errorMsg {
	color: #ff0000;
}
.successMsg {
	color: #009900;
}

/* Style buttons. */
input[type='button'], input[type='submit'] {
/*	background-image:url('images/topgradient.png');
	background-position:top;
	background-repeat:repeat-x;*/
/*	-moz-border-radius: 7px;*/
	border-radius: 7px;
	border:2px outset lightgray;
}

/* Style active button. */
input[type='button']:active, input[type='submit']:active {
	border:2px inset lightgray;
	color: #404040;
}

/* Style select elements. */
select {
	background-color:#ffffff;
/*	-moz-border-radius: 7px;*/
	border-radius: 7px;
	border:2px outset lightgray;
}

/* Style non-multiple select elements which don't have a size, or have size = 1 (default). */
select:not([multiple]):not([size]), select:not([multiple])[size='1'] {
/*	background-image:url('images/topgradient.png');
	background-position:top;
	background-repeat:repeat-x;*/
}

/* Reduce the height of the jQuery-UI select2 component; apply nice border and border radius. */
.select2-container .select2-choice {
	border:2px outset lightgray;
/*	-moz-border-radius: 7px;*/
	border-radius: 7px;
	height:18px;
	line-height:18px;
}

/* Remove bottom border from jQuery-UI select2 main component when drop-down is showing. */
.select2-container.select2-dropdown-open .select2-choice {
	border-bottom-left-radius:0;
	border-bottom-right-radius:0;
	border-bottom:0;
}

/* Remove top border from jQuery-UI select2 drop-down; apply nice border and border radius. */
.select2-container .select2-drop {
	border:2px outset lightgray;
/*	-moz-border-radius: 7px;*/
	border-radius: 7px;
	border-top-left-radius:0;
	border-top-right-radius:0;
	border-top:0;
}

/* Apply background color to drop-down arrow in jQuery-UI select2 component; move arrow image up to correct for reduced height. */
.select2-container .select2-choice div b {
	background: url('../jax/jquery/css/select2/select2.png') no-repeat 0 -3px;
	background-color: #f8de87;
}

/* Move X image (for deleting selection) up in jQuery-UI select2 component to correct for reduced height. */
.select2-container .select2-choice abbr {
	top: 3px;
}

.saveButton {
	background-color: #40ff40;
	color: #000000;
	font-family: Arial, Helvetica, Sans-Serif;
	font-size: 16px;
	font-weight: bold;
	border: 2px outset lightgray;
	border-radius: 7px;
	padding-left: 10px;
	padding-right: 10px;
	padding-top: 6px;
	padding-bottom: 6px;
}
.saveButton:active {
	border: 2px inset lightgray;
	color: #404040;
}

input[type='button'].crudSaveButton, input[type='button'].crudKeepButton, input[type='button'].crudDoneViewingButton {
	background-image:none;
	background-color:#a0ffa0;
	font-weight:bold;
}
input[type='button'].crudAbandonButton, input[type='button'].crudDeleteButton {
	background-image:none;
	background-color:#ffa0a0;
	font-weight:bold;
}

thead {
	background-image: url(images/navGradient.jpg);
	background-repeat: repeat-x;
	background-size: contain;
	color: #e0e0d0;
}

.ui-accordion-header {
	padding-left:30px;
}

/* The following styles are specific to puzzle sites: */
#recommend {
	margin: 0 auto;
	height: 50px;
}
.rightSide {
	/* Remove margin because the recommend div above the right ad code takes care of this. */
	margin-top: 0;
}
.activePuzzleNumber {
	color: #009900;
	border: 1px solid grey;
	padding-left: 4px;
	padding-right: 4px;
}