/***************
 *   Layout    *
 ***************/

html
{
	width: 100%;
	height: 100%;
	background: #A0F7FE;
}

body
{
	width: 100%;
	height: 100%;
	margin: 0px;
	padding: 0px;
	font-family: verdana;
	font-size: 80%;
	color: black;
}

#body
{
	position: relative;
	width: 1000px;
	min-height: 100%;
	margin: 0px auto 0px auto;
	padding: 0px 40px 1px 40px;
	background: url('./shadow-width.png') repeat-y top center;
}

#header
{
	width: 1000px;
	clear: both;
	position: relative;
	margin: 0px auto 0px auto;
	padding: 0px;
	background: #E0E0E0 url('./shadow-bottom.png') repeat-x bottom center;
}
#content
{
	width: 998px;
	min-height: 140px;
	clear: both;
	position: relative;
	margin: 0px;
	padding: 0px 0px 60px 0px;
}
#footer
{
	width: 1000px;
	height: 36px;
	clear: both;
	position: absolute;
	bottom: 0px;
	margin: 0px;
	padding: 4px 0px 4px 0px;
	font-size: 80%;
	text-align: center;
	background: #E0E0E0 url('./shadow-top.png') repeat-x top center;
}

#column_left
{
	margin: 0px;
	padding: 4px;
	width: 180px;
	position: relative;
	float: left;
}
#column_right
{
	margin: 0px;
	padding: 4px;
	width: 180px;
	position: relative;
	float: right;
}
#column_middle
{
	margin: 0px;
	padding: 4px;
	height: 100%;
	overflow: auto;
}

#overlay, .overlay::before
{
	z-index: 9000;
	position: fixed;
	top:0;
	bottom: 0;
	left: 0;
	right: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,0.5);
}
#overlay
{
	display:none;
}
.overlay::before
{
	content: '';
}

.box-container.cbox
{
	position: fixed;
	top: 0px;
	bottom: 0px;
	left: 0px;
	right: 0px;
	width: 100%;
	min-width: 900px;
	height: 100%;
	text-align: center;
}
.box-container.cbox::after
{
	display: inline-block;
	vertical-align: middle;
	height: 100%;
	content: '';
}
.box
{
	z-index: 9001;
	margin: auto;
	background-color:#FFFFFF;
	border: double #777777;
	width: 900px;
}
.bbox
{
	display: inline-block;
	vertical-align: middle;
	text-align: left;
}
.dbox
{
	position: absolute;
	top: -8px;
	left: 0px;
	right: 0px;
}
#dialog
{
	position: relative;
	max-height: 500px;
	overflow-y: auto;
}

#sticky {
	width: 100%;
	position: fixed;
	top: 0px;
	left: 0px;
	text-align: center;
	font-size: 80%;
}

#mask_container {
	position:absolute;
	right: 50%;
	top: 0;
	z-index:9000;
}
#mask {
	position:relative;
	left: 50%;
	background-color:#000000;
	z-index:9001;
	display:none;
}


.hidden {
	display: none;
}
.hidden .slide {
	display: none;
}
.slide {
	position: relative;
}

.vertical-center
{
	vertical-align:middle;
	display:inline-block;
	line-height:normal;
}


/***************
 *   Header    *
 ***************/

#header #action_menu {
	position: absolute;
	bottom: 0px;
	left: 0px;
}
#header #action_menu .option {
	float: left;
}

#header #user_menu {
	position: absolute;
	bottom: 0px;
	right: 0px;
}
#header #user_menu .option {
	float: right;
}

#header .option {
	height: 12px;
	padding: 4px;
	text-align: center;
	font-size: 80%;
	position: relative;
}
#header .option.large {
	width: 112px;
	background: url('./shadow-bottom.png') repeat-x bottom center, url('./tab-large.png') no-repeat bottom center;
}
#header .option.large.selected {
	background: url('./tab-large.png') no-repeat bottom center;
}
#header .option.medium {
	width: 72px;
	background: url('./shadow-bottom.png') repeat-x bottom center, url('./tab-medium.png') no-repeat bottom center;
}
#header .option.medium.selected {
	background: url('./tab-medium.png') no-repeat bottom center;
}
#header .option.icon {
	width: 24px;
	background: url('./shadow-bottom.png') repeat-x bottom center, url('./tab-icon.png') no-repeat bottom center;
}
#header .option.icon.selected {
	background: url('./tab-icon.png') no-repeat bottom center;
}


/***************
 *   Sticky    *
 ***************/

#sticky div {
	padding: 2px 4px 2px 4px;
	border-bottom: 1px solid;
	font-weight: bold;
}

#sticky .error {
	color: rgb(191, 0, 0);
	border-color: rgb(191, 0, 0);
	background-color: rgba(255, 31, 0, 0.7);
}
#sticky .warning {
	color: rgb(223, 127, 0);
	border-color: rgb(223, 127, 0);
	background-color: rgba(255, 223, 0, 0.7);
}
#sticky .info {
	color: rgb(0, 0, 223);
	border-color: rgb(0, 0, 223);
	background-color: rgba(63, 159, 255, 0.7);
}
#sticky .success {
	color: green;
	border-color: green;
	background-color: rgba(63, 255, 159, 0.7);
}


/***************
 *    Lists    *
 ***************/

table.list {
	margin-top: 20px;
	margin-bottom: 20px;
	width: 100%;
	border-collapse: collapse;
	border: double #777777;
}

table.list>tbody>tr
{
	margin: 0px;
	border: solid 1px #777777;
}
table.list>tbody>tr.display:hover
{
	background-color: #E6FDFF;
}
/*
table.list>tbody>tr.odd
{
	background-color: #FFFFFF;
}
table.list>tbody>tr.even
{
	background-color: #E6FDFF;
}
table.list>tbody>tr:nth-child(4n+1), table.list>tbody>tr:nth-child(4n+2)
{
	background-color: #FFFFFF;
}
table.list>tbody>tr:nth-child(4n+3), table.list>tbody>tr:nth-child(4n+4)
{
	background-color: #E6FDFF;
}
*/

table.list>tbody>tr>th
{
	margin: 0px;
	padding: 2px 8px 2px 8px;
	border-left:  solid 1px #BBBBBB;
	border-right: solid 1px #BBBBBB;
	background-color: #EEEEEE;
}
table.list>tbody>tr>tr.odd>th
{
	background-color: #F2F2F2;
}
table.list>tbody>tr.even>th
{
	background-color: #DAF0F2;
}

table.list>tbody>tr>td
{
	margin: 0px;
	padding: 2px 8px 2px 8px;
	border-left:  solid 1px #BBBBBB;
	border-right: solid 1px #BBBBBB;
}

table.list>tbody>tr>th.button, table.list>tbody>tr>td.button
{
	padding: 4px;
}
table.list>tbody>tr.display>td.button {
	vertical-align: top;
}
table.list>tbody>tr.edit>td.button {
	vertical-align: middle;
}


/***************
 *  Calendar   *
 ***************/

div.calendar.head
{
	margin-top: 20px;
	margin-left: 20px;
	margin-right: 20px;
	border-top: double #777777;
	border-left: double #777777;
	border-right: double #777777;
}
div.calendar.body
{
	margin-left: 20px;
	margin-right: 20px;
	margin-bottom: 20px;
	border-left: double #777777;
	border-right: double #777777;
	border-bottom: double #777777;
	height: 400px;
	resize: vertical;
	overflow-y: auto;
}

table.calendar, table.calendar>tbody>tr, table.calendar>tbody>tr>th, table.calendar>tbody>tr>td
{
	table-layout: fixed;
	border-collapse: collapse;
	margin: 0px;
	padding: 0px;
	overflow: hidden;
	border: dotted 1px #BBBBBB;
}
div.calendar.head table.calendar
{
	border: hidden;
	border-bottom: none;
}
div.calendar.body table.calendar
{
	border: hidden;
}

table.calendar>tbody>tr>th
{
	padding-top: 4px;
	padding-bottom: 4px;
	border:  dotted 1px #777777;
	border-bottom:  solid 1px #777777;
	background-color: #EEEEEE;
}
table.calendar>tbody>tr>th.thicker-left, table.calendar>tbody>tr>td.thicker-left
{
	border-left: solid 1px #777777;
}

table.calendar>tbody>tr>th.day, table.calendar>tbody>tr>td.day
{
	width: 160px;
	padding-right: 4px;
	padding-left: 4px;
}
table.calendar>tbody>tr>td.day.weekend
{
	border-top:  solid 1px #777777;
	border-bottom:  solid 1px #777777;
	background-color:#EEEEEE;
}

table.calendar>tbody>tr>th.slot, table.calendar>tbody>tr>td.slot
{
	width: 48px;
}
table.calendar>tbody>tr>th.slot div.rotate-wrap-wrap
{
	position:relative;
	width:48px;
	height:98px;
}
table.calendar>tbody>tr>th.slot div.rotate-wrap
{
	position:absolute;
	top: 0px;
	left: -25px;
	width: 98px;
	height: 98px;
	line-height:98px;
}
table.calendar>tbody>tr>th.slot div.rotate
{
	width: 98px;
	height: 98px;
	line-height:98px;
	font-weight: normal;
	filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
	-webkit-transform: rotate(-90deg);
	-moz-transform: rotate(-90deg);
	-ms-transform: rotate(-90deg);
	-o-transform: rotate(-90deg);
	transform: rotate(-90deg);
}
table.calendar>tbody>tr>td.slot
{
	text-align: center;
}

table.calendar>tbody>tr>td.dummy
{
	height: 8px;
}


/***************
 *    Forms    *
 ***************/

div.popup
{
	margin: 20px;
	padding: 0px;
}

form.form, div.form
{
	margin: 20px;
	padding: 0px;
	border: solid 1px #777777;
	background-color: #EEEEEE;
}

.form fieldset
{
	margin: 5px;
	border: solid 1px #777777;
}
.form fieldset legend
{
	font-size: 80%;
}

.form table {
	margin: 0px;
	padding: 0px;
	width: 100%;
}
.form table, .form tr, .form th, .form td {
	border-collapse:collapse;
	border: none;
	vertical-align: middle;
	padding: 0px;
	overflow:hidden;
}

.form tr.submit input {
	float: right;
}

.form td.label {
	padding: 4px;
	width: 300px;
	text-align: right;
}
.form td.input {
	padding: 4px;
}
.form td.info {
	padding: 4px;
	width: 20px;
	text-align: center;
}
.form td.warn {
	padding: 4px;
	width: 20px;
	text-align: center;
}

.form input.large, .form textarea.large , .form select.large {
	width: 100%;
	margin:0px;
	padding: 0px;
	resize: vertical;
}

.form td.border {
	padding: 2px 8px 2px 8px;
	border: solid 1px #777777;
}


/***************
 *   Status    *
 ***************/

.status-group
{
	float: right;
	border: solid 1px #777777;
}

.status
{
	position: relative;
	float: right;
	height: 60px;
	width: 160px;
	line-height: 60px;
	text-align: center;
}
.status.past
{
	background-color: #EEEEEE;
	color: #BBBBBB;
}
.status.current
{
	background-color: #DDDDDD;
	font-weight:bold;
}
.status.future
{
	background-color: #EEEEEE;
	font-style:italic;
}

.status.arrow::before
{
	position:absolute;
	top: 0px;
	right: -21px;
	height: 0px;
	width: 0px;
	border-style: solid;
	border-width: 30px 0px 30px 20px;
	border-color: transparent transparent transparent #BBBBBB;
	content: '';
}
.status.arrow::after
{
	position:absolute;
	top: 0px;
	right: -20px;
	height: 0px;
	width: 0px;
	border-style: solid;
	border-width: 30px 0px 30px 20px;
	border-color: transparent transparent transparent #EEEEEE;
	content: '';
}
.status.arrow.current::after
{
	position:absolute;
	top: 0px;
	right: -20px;
	height: 0px;
	width: 0px;
	border-style: solid;
	border-width: 30px 0px 30px 20px;
	border-color: transparent transparent transparent #DDDDDD;
	content: '';
}



/***************
 *    Text     *
 ***************/

h1
{
	margin: 0px;
	padding: 40px 50px 30px 50px;
	text-align: center;
}
h1, .h1
{
	font-family: georgia;
	font-size: 200%;
	font-weight: bold;
	color: #595a5e;
}
h2
{
	margin: 32px 0px 12px 0px;
	padding: 4px 8px 4px 8px;
}
h2, .h2
{
	font-family: georgia;
	font-size: 150%;
	font-weight: bold;
	color: #595a5e;
}
h3
{
	margin: 24px 0px 6px 0px;
	padding: 4px 8px 4px 8px;
}
h3, .h3
{
	font-family: georgia;
	font-size: 120%;
	font-weight: bold;
	color: #595a5e;
}
h4
{
	margin: 18px 0px 6px 0px;
	padding: 4px 8px 4px 8px;
	font-family: georgia;
	font-size: 100%;
	font-weight: bold;
}
h5
{
	margin: 12px 0px 6px 0px;
	padding: 4px 8px 4px 8px;
	font-family: georgia;
	font-size: 90%;
	font-weight: bold;
}

h6
{
	margin: 12px 0px 6px 0px;
	padding: 4px 8px 4px 8px;
	font-family: georgia;
	font-size: 80%;
	font-weight: bold;
}

p, .p
{
	margin: 12px 0px 4px 0px;
	padding: 0px 8px 0px 8px;
	text-align: justify;
}
ul
{
	margin: 0px;
	padding: 0px 8px 0px 24px;
	text-align: justify;
}
ul ul
{
	padding: 0px 8px 0px 40px;
}
li
{
	margin: 4px 0px 4px 0px;
	padding: 0px 8px 0px 8px;
	text-align: justify;
	list-style-position: outside;
}

a
{
	text-decoration: none;
	letter-spacing: 0px;
	color: #008F99;
}
a:visited {}
a:link {}
a:hover
{
	color: #00BECC;
}
a:active
{
	color: #00BECC;
}
a img
{
	border: 0px;
	vertical-align: middle;
}