html {
	margin: 0;
	padding: 0;
}

body {
	font-family: verdana, tahoma, helvetica, arial, sans-serif;
	margin: 0;
	padding: 0 0 1em 0;
	background: #5C6481 url(img/blue_toast.png);
    -webkit-text-size-adjust: 100%;
}

a img {
	border: none;
}

h2 {
	font-weight: normal;
	font-size: x-large;
}

h3 {
	font-weight: normal;
	font-size: large;
}

h4 {
	margin-top: 0.0em;
	margin-bottom: 0.25em;
}

.hidden {
	display: none;
}

.center {
	text-align: center;
}

.smaller {
	font-size: 80%;
}

.readonly {
	background-color: #eee;
}

.warning {
	color: #FF8000;
	font-weight: bold;
}

.error {
	color: red;
	font-weight: bold;
}

p.debug {
	font-size: xx-small;
	border: 1px orange solid;
	background-color: Yellow;
	color: Red;
	margin: 0;
	padding: 2px;
}
p.debug label {
	font-size: xx-small;
	width: auto;
	margin: 0 0.5em 0 0;
	padding: 0;
}
page p.debug:first-of-type {
	border-top: 3px orange solid;
}
page p.debug:last-of-type {
	border-bottom: 3px orange solid;
}

#page {
	width: 980px;
	margin-left: auto;
	margin-right: auto;
}
#content {
	background: white;
	width: 750px;
	float: left;
	border: 1px #ccc solid;
	padding: 1em;
	border-radius: 8px;
	box-shadow: 2px 2px 5px #333;
	overflow: auto;
	margin-bottom: 2em;
}
#sidebar {
	padding: 0;
	color: #fff;
	background: #132 url(img/txture.png);
	width: 180px;
	float: right;
	border-radius: 8px;
	box-shadow: 2px 2px 5px #333;
	font-size: 0.75em;
	margin-bottom: 1em;
	position: relative;
	top: 0;
	z-index: 1;
}
#footer {
	clear: both;
	color: white;
	background: black url(img/txture.png);
	padding: 0.75em 1.25em;
	font-size: 80%;
	border-radius: 3px;
}

#content h3 {
	margin-bottom: 0.2em;
}

#sidebar h3 {
	font-size: 1.5em;
	padding: 0.25em 0.75em;
	margin: 0;
}
ul.navigation {
	color: #000;
	background: white;
	margin: 0;
	padding: 1em 1em .5em 1em;
	list-style-type: none;
}
ul.navigation li {
	padding-bottom: 0.5em;
}
ul.navigation li + li {
	padding: 0.5em 0;
	border-top: 1px #ccc solid;
}
ul.navigation li.sep + li {
	border-top: 0;
}
ul.navigation li.sep {
	border-top: 1px #ea6 solid;
	border-bottom: 1px #ea6 solid;
	height: 1px;
	padding: 0;
}
ul.navigation li a {
	color: #4368c8;
	text-decoration: none;
}
ul.navigation li a:hover {
	color: #0000ff;
}
ul.navigation li a img {
	border: none;
}
ul.navigation li.loc {
	font-weight: bold;
}

#content h2 {
	margin-top: 0;
}

#content table {
	font-size: 80%;
}
	
.header {
	background: white;
	border-radius: 0 0 8px 8px;
	padding: 1em;
	margin: 0 0 2em 0;
	background: #eef url(img/groovepaper.png);
/*
	box-shadow: 3px -5px 15px #111,
		-3px -5px 15px #111;
*/
	box-shadow: 2px 2px 5px #333
}

.header h1 {	
	font-family: arial;
	color: #101830;
	margin: 0;
/*
	text-shadow: 0 -1px #000, 
		1px 1px #fff;
*/
}

h1 {
	font-size: 2.5em;
	padding: 0;
	margin: 0 0 0.5em 0;
}

input.check {
	margin-top: 0.25em;
}

.label5 label {
	width: 5em;
}
.label6 label {
	width: 6em;
}
.label7 label {
	width: 7em;
}
.label8 label {
	width: 8em;
}
.label9 label{
	width: 9em;
}
.label10 label{
	width: 10em;
}
.label11 label{
	width: 11em;
}
.label12 label{
	width: 12em;
}
.label14 label{
	width: 14em;
}
.label16 label{
	width: 16em;
}
.label18 label{
	width: 18em;
}
.label20 label{
	width: 20em;
}
input.submit, input.button, input.normal {
	width: auto;
	display: inline;
	/* Just for fun, but it doesn't look so good on mobile safari and who knows what else? /
	font-size: 110%;
	color: white;
	font-weight: bold;
	background-color: #22cc44;
	border: 0px #444 solid;
	padding: 0.2em;
	border-radius: none;
	box-shadow: 2px 2px 4px #333;
	/ end of fun */
}

input[readonly], textarea[readonly], select[readonly] {
	background: #eee;
}

br {
	clear: both;
}

.mobile-header {
	display: none;
}

.mobile-link, .mobile-back {
	text-decoration: none;
	color: black;
}
.mobile-back { 
	display: none;
}
.table-wrapper {
	position: relative;
	margin: 0;/*5em 5%;*/
}
.table-menu-wrapper {
	position: absolute;
	top: -3em;
	right: 0;
}
.table-menu {
   position: absolute;
   background-color: #fff;
   padding: 10px;
   border: 1px solid #ccc;
   font-size: 1.2em;
   width: 12em;
   right: 0;
   left: auto;
}
.table-menu-hidden {
   left: -999em;
   right: auto;
}
.table-menu-btn {
   text-decoration: none;
   color: #333;
   font-size: 1.2em;
   padding: .3em 10px .3em 20px;
   border: 1px solid #ccc;
}
.table-menu li {
   padding: .3em 0;
}

.enhanced th,
.enhanced td {
	display: none;
}
.legacy-ie .enhanced th.essential, 
.legacy-ie .enhanced td.essential {
	display: inline;
}
.enhanced th.essential, 
.enhanced td.essential {
   display: table-cell;
}

@media screen and (min-width: 480px) {
	.legacy-ie .enhanced th.optional, 
	.legacy-ie .enhanced td.optional {
		display: inline;
	}
	.enhanced th.optional, 
	.enhanced td.optional {
		display: table-cell;
	}
}

@media screen and (min-width: 980px) {
	.legacy-ie .enhanced th, 
	.legacy-ie .enhanced td {
		display: inline;
	}
	.enhanced th, 
	.enhanced td {
		display: table-cell;
	}
}

@media screen and (max-width: 980px) {
	#page { width: 94%; }
	#content { width: 70%; }
	#sidebar { width: 20%; }
}
@media screen and (max-width: 740px) {
	#content { width: auto; float: none; clear: both; margin-top: 1em; }
	#sidebar { width: auto; float: none; font-size: 0.9em; }
	#sidebar ul.navigation { 
		display: block;
		position: relative;
		background: white;
		margin: 0;
		padding: 0.25em 1em;
		border-bottom: 1px black solid;
	}
	#sidebar ul.navigation li, #sidebar ul.navigation li + li { 
		display: inline-block;
		border: none;
		padding: 0 0.5em 0 0;
		margin: 0.25em 0 0 0.25em;
		line-height: 1.5;
	}
	#sidebar ul.navigation li.sep {
		display: block;
		height: 0px;
		border: none;
		border-top: 1px #aaa solid;
		/*width: 1px;*/
		padding: 0;
	}
	#sidebar ul.navigation li.loc {
		display: block;
	}
		
	.header h1 {
		font-size: 1.5em;
	}
	#sidebar ul.navigation li .long {
		display: none;
	}
	#page table td, #page table th {
		padding: 0.25em;
	}
}
@media screen and (max-width: 740px) {
	body { padding: 0 0 0 0; }
	#page { width: 100%; margin: 0; }
	.header { border-radius: 0; border-bottom: 1px #fff solid; }
	#sidebar { border-radius: 0; }
	#content { border-radius: 0; border: none; border-top: 1px #ccc solid; border-bottom: 1px #aaa solid; margin-bottom: 1em; }	
	.header { margin-bottom: 0; }
	#sidebar ul.nomobile { display: none; }
		
	.header h1 {
		font-size: 1.5em;
	}
	#sidebar h3 { display: none; }
	
	#page {
		font-size: 80%;
	}
	#page table td, #page table th {
		font-size: 125%;
		padding: 0.1em;
	}

	label, input, select, textarea {
		font-size: 16px; /* To prevent iPhone autozoom */
	}

	.mobile-header {
		display: block;
	}

	.mobile-link h3, .mobile-back h3 {
/*
		color: white;
		background-color: #3040FF;
		border: none;
*/

		border: 1px black solid;
		border-radius: 4px;

		padding: 0.3em;
		margin: 0; 
	}
	.mobile-link h3 {
		background-position: right center;
		background-image: url(img/arrow-right.png); 
		background-repeat: no-repeat;
	}
	.mobile-back h3 {
		background-position: left center;
		background-image: url(img/arrow-left.png); 
		background-repeat: no-repeat;
		padding-left: 26px;
	}
	.mobile-hidden {
		display: none;
	}
	.mobile-back {
		display: block;
	}		
}

#page table td.icon, #page table th.icon {
	padding: 0.2em;
}

li.ui-menu-item {
	border-bottom: 1px #ccc dashed;
}

li.ui-menu-item span {
	overflow: hidden;
}

.ui-widget {
	font-family: verdana, tahoma, helvetica, arial, sans-serif;
	font-size: 1.0em/*{fsDefault}*/;
}

.loading{
	background:url('img/indicator.gif') no-repeat right center;
}