/* CSS Document */
body {margin: 0; padding: 0; width: 100%; background: url(../images/bg.gif) #fff repeat-x left top; font: normal 11px "Verdana"; color: #333333;}
A:link {color: #3b5998; text-decoration: none;}
A:visited {color: #3b5998; text-decoration: none;}
A:active {color: #009900; text-decoration: none;}
A:hover {color: #009900; text-decoration: none;}
form {padding: 0; margin: 0;}

#body {width:1002px; padding:0; margin: auto;}

#header {float: left; width: 1002px; margin: 0 0 10px 0; padding: 0;}
#header #logo {float: left; width: 354px; margin: 0 auto; padding: 15px 0 10px 14px;}
#header #option {float: right; width: 634px; margin: 0 auto; padding: 35px 0 0 0; margin: 0;}

#header #option ul {float: right; position:relative; display: block; padding: 0; margin: 0;}
#header #option ul li {float: left; position:relative; list-style: none; padding: 0; margin: 0 0 0 8px;}
#header #option a {float: left; border: 1px solid #1d4088; background-color: #4b67a1; padding: 5px;}
#header #option A:link {float: left; color: #fff; text-decoration: none; background-color: #4b67a1;}
#header #option A:visited {float: left; color: #fff; text-decoration: none; background-color: #4b67a1;}
#header #option A:active {float: left; color: #fff; text-decoration: none; background-color: #627aad;}
#header #option A:hover {float: left; color: #fff; text-decoration: none; background-color: #627aad;}

/*#header #option ul ul {float: left; display: block; width: 188px; padding: 5px 0; margin: 0; border: 1px solid #1d4088; visibility:hidden; position:absolute; top: 24px; left: -150px; background-color: #4b67a1; }*/
#header #option ul ul {float: left; display: block; width: 188px; padding: 5px 0; margin: 0; border: 1px solid #1d4088; visibility:hidden; position:absolute; top: 24px; left: -150px; background-color: #fff; }

#header #option ul ul A:link {float: left; color: #000; text-decoration: none; background-color: #fff; border: 1px solid #fff;}
#header #option ul ul A:visited {float: left; color: #000; text-decoration: none; background-color: #fff; border: 1px solid #fff;}
#header #option ul ul A:active {float: left; color: #000; text-decoration: none; background-color: #627aad; color: #fff; border: 1px solid #1d4088;}
#header #option ul ul A:hover {float: left; color: #000; text-decoration: none; background-color: #627aad; color: #fff; border: 1px solid #1d4088;}
#header #option ul ul hr {float: left; position:relative; width: 178px; padding: 0; margin: 3px 0; border-bottom: 1px solid #345394; border-top: 1px solid #fff; border-left: 1px solid #fff; border-right: 1px solid #fff; height: 1px; background-color: #fff;}
#header #option ul ul li {float: left; display: block; padding: 0 5px; margin: 0;}
#header #option ul ul a {float: left; white-space: nowrap; width: 168px; border: none; padding: 5px;}
#header #option table {position:absolute; top:0; left:0; border-collapse:collapse;;}
#header #option ul li:hover ul,
#header #option ul a:hover ul{visibility:visible; }
/* keep the third level hidden when you hover on first level list OR link */
#header #option ul :hover ul ul{visibility:hidden;}
/* make the third level visible when you hover over second level list OR link */
#header #option ul :hover ul :hover ul{ visibility:visible;}

/*
{float: left; width: 1024px; margin: 0; padding: 0;}
.sidebar {float: left; width: 210px; background-color: #ff0000;}
.article {float: left; width: 792px; background-color: #ff00ff;}
*/

#nav {float: left; width: 1002px; margin: 0 0 10px 0; padding: 0;}
#nav #menu ul {float: left; position:relative; display: block; width: 199px; padding: 0; margin: 0 0 0 3px; font: bold 11px "Verdana";}
#nav #menu ul li {float: left; position:relative; list-style: none; padding: 0; margin: 0;}
#nav #menu a {float: left; border: 1px solid #1d4088; background-color: #4b67a1; width: 187px; padding: 5px;}
#nav #menu A:link {float: left; color: #fff; text-decoration: none; background-color: #4b67a1;}
#nav #menu A:visited {float: left; color: #fff; text-decoration: none; background-color: #4b67a1;}
#nav #menu A:active {float: left; color: #fff; text-decoration: none; background-color: #627aad;}
#nav #menu A:hover {float: left; color: #fff; text-decoration: none; background-color: #627aad;}

/*#nav #menu ul ul {float: left; display: block; width: 188px; padding: 5px 0; margin: 0; border: 1px solid #1d4088; visibility:hidden; position:absolute; top: 24px; left: -150px; background-color: #4b67a1; }*/
#nav #menu ul ul {float: left; display: block; width: 197px; padding: 5px 0; margin: 0; border: 1px solid #1d4088; visibility:hidden; position:absolute; top: 24px; left: 0; background-color: #fff; }

#nav #menu ul ul A {font: normal 11px "Verdana";}
#nav #menu ul ul A:link {float: left; color: #000; text-decoration: none; background-color: #fff; border: 1px solid #fff;}
#nav #menu ul ul A:visited {float: left; color: #000; text-decoration: none; background-color: #fff; border: 1px solid #fff;}
#nav #menu ul ul A:active {float: left; color: #000; text-decoration: none; background-color: #627aad; color: #fff; border: 1px solid #1d4088;}
#nav #menu ul ul A:hover {float: left; color: #000; text-decoration: none; background-color: #627aad; color: #fff; border: 1px solid #1d4088;}
#nav #menu ul ul hr {float: left; position:relative; width: 167px; padding: 0; margin: 3px 0; border-bottom: 1px solid #345394; border-top: 1px solid #fff; border-left: 1px solid #fff; border-right: 1px solid #fff; height: 1px; background-color: #fff;}
#nav #menu ul ul li {float: left; display: block; padding: 0 5px; margin: 0;}
#nav #menu ul ul a {float: left; white-space: nowrap; width: 177px; border: none; padding: 5px;}
#nav #menu table {position:absolute; top:0; left:0; border-collapse:collapse;;}
#nav #menu ul li:hover ul,
#nav #menu ul a:hover ul{visibility:visible; }
/* keep the third level hidden when you hover on first level list OR link */
#nav #menu ul :hover ul ul{visibility:hidden;}
/* make the third level visible when you hover over second level list OR link */
#nav #menu ul :hover ul :hover ul{ visibility:visible;}

/*===== Level 2 =====*/
/*#nav #menu ul ul {float: left; display: block; width: 188px; padding: 5px 0; margin: 0; border: 1px solid #1d4088; visibility:hidden; position:absolute; top: 24px; left: -150px; background-color: #4b67a1; }*/
#nav #menu ul ul ul {float: left; display: block; width: 197px; padding: 5px 0; margin: 0; border-top: 1px solid #1d4088; border-right: 1px solid #1d4088; border-bottom: 1px solid #1d4088; border-left: 1px solid #fff; visibility:hidden; position:absolute; top: -5px; left: 197px; background-color: #fff; z-index: 5;}

#nav #menu ul ul ul A {font: normal 11px "Verdana";}
#nav #menu ul ul ul A:link {float: left; color: #000; text-decoration: none; background-color: #fff; border: 1px solid #fff;}
#nav #menu ul ul ul A:visited {float: left; color: #000; text-decoration: none; background-color: #fff; border: 1px solid #fff;}
#nav #menu ul ul ul A:active {float: left; color: #000; text-decoration: none; background-color: #627aad; color: #fff; border: 1px solid #1d4088;}
#nav #menu ul ul ul A:hover {float: left; color: #000; text-decoration: none; background-color: #627aad; color: #fff; border: 1px solid #1d4088;}
#nav #menu ul ul ul hr {float: left; position:relative; width: 167px; padding: 0; margin: 3px 0; border-bottom: 1px solid #345394; border-top: 1px solid #fff; border-left: 1px solid #fff; border-right: 1px solid #fff; height: 1px; background-color: #fff;}
#nav #menu ul ul ul li {float: left; display: block; padding: 0 5px; margin: 0;}
#nav #menu ul ul ul a {float: left; white-space: nowrap; width: 177px; border: none; padding: 5px;}
/*===== End Level 2 =====*/


#nav #status {float: left; border: 1px solid #dddddd; width: 780px; padding: 2px; margin-left: 5px; font: bold 11px "Verdana";}
#nav #status P {padding: 3px; margin: 0; background-color: #f2f2f2;}
.multi-link {background: url(../images/arrow.gif) no-repeat 180px center;}


.ok {float: left; border: 1px solid #006600; width: 780px; padding: 2px; color: #fff;}
.ok P {float: left; padding: 3px; margin: 0; background-color: #006600;}
.error {float: left; border: 1px solid #ff0000; width: 780px; padding: 2px; color: #fff;}
.error P {float: left; padding: 3px; margin: 0; background-color: #ff0000;}


.mydefault {font: normal 11px "Verdana";}
.mydefault UL {display: block; list-style: none; padding: 0; margin: 0;}
.mydefault UL LI {padding: 3px 0 3px 20px;}



.article {float: left; width: 1002px; margin: 0 auto; padding: 0;}
.article .signin {float: left; width: 600px; margin: 50px 175px 0 175px; padding: 25px; border: 1px solid #dddddd; background-color: #f2f2f2;}
.article .signin DL {float: left; padding: 0; margin: 0;}
.article .signin DL DT {float: left; padding: 5px 5px 0 0; margin: 0 0 2px 0; width: 215px; text-align: right;}
.article .signin DL DD {float: left; padding: 0; margin: 0 0 2px 0; width: 380px;}
.article .signin .input {border: 1px solid #bdc7d8; padding: 2px; width: 180px; font: normal 11px "Verdana";}
.article .signin .submit {border: 1px solid #1a356e; background-color: #5c74a9; color: #fff; padding: 3px 10px; font: bold 11px "Verdana"; text-decoration:none; cursor: hand;}

.article .io {float: left; width: 600px; margin: 50px 0 0 0; padding: 25px; border: 1px solid #dddddd; background-color: #f2f2f2;}
.article .io DL {float: left; padding: 0; margin: 0;}
.article .io DL DT {float: left; padding: 5px 5px 0 0; margin: 0 0 2px 0; width: 215px; text-align: right;}
.article .io DL DD {float: left; padding: 0; margin: 0 0 2px 0; width: 380px;}
.article .io .input {border: 1px solid #bdc7d8; padding: 2px; width: 180px; font: normal 11px "Verdana";}
.article .io .submit {border: 1px solid #1a356e; background-color: #5c74a9; color: #fff; padding: 3px 10px; font: bold 11px "Verdana"; text-decoration:none; cursor: hand;}

.article P {float: left; padding: 25px 25px 0 25px; margin: 0;}

.font_red {color: #ff0000;}
.font_blue {color: #6698ff;}
.font_green {color: #006600;}
.font_yellow {color: #ffcc00;}

/*=== OVERVIEW ===*/
.overview {font: normal 11px "Verdana"; width: 950px; padding: 2px 0; margin: 0 auto;}
.overview .submenu {float: left; font: normal 11px "Verdana"; width: 550px; padding: 2px 0}
.overview .publish {float: right; font: normal 11px "Verdana"; width: 400px; padding: 2px 0; text-align: right;}
/*=== END OVERVIEW ===*/


/*=== CONTENT ===*/
.list-data {float: left; font: normal 11px "Verdana"; width: 950px; border: 1px solid #dddddd; padding: 2px; margin-left: 23px;}
.list-data .myform {display: block; width: 940px; padding: 5px; margin: 0; list-style: none; background-color: #f2f2f2;}
.list-data .myform .fromdata {padding: 3px 0 0 5px; width: 290px; font: normal 11px "Verdana";}
.list-data .myform .fromdata-large {padding: 3px 0 0 5px; width: 780px; font: normal 11px "Verdana";}
.list-data .myform .textfrom {border: 1px solid #bdc7d8; padding: 2px; width: 180px; font: normal 11px "Verdana";}
.list-data .myform .listform {border: 1px solid #bdc7d8; padding: 2px; font: normal 11px "Verdana";}
.list-data .myform .submit {border: 1px solid #1a356e; background-color: #5c74a9; color: #fff; padding: 3px 10px; font: bold 11px "Verdana"; text-decoration:none; cursor: hand;}


.list-data .data-header {float: left; display: block; width: 938px; padding: 8px 5px; margin: 0; list-style: none; background: url(../images/bar.gif) #f2f2f2 repeat-x left top; border: 1px solid #cccccc; font-weight: bold;}
.list-data .data-header .header-title {float: left; margin: 0; width: 728px;}
.list-data .data-header .header-close {float: right; padding-top: 3px; margin: 0; width: 200px; text-align: right;}

/*max width: 938px remain 919px;*/
.list-data .data-header .checker {float: left; width: 19px; padding: 0;}
.list-data .data-header .block {float: left; padding-left: 4px; border-left: 1px solid #fff;} /* used : 5px */
.list-data .data-header .block-non {float: left; padding-left: 0;} /* used : 5px */

/*max width: 950px remain 925px;*/
.list-data .preview {float: left; display: block; width: 950px; padding: 0; margin: 0; list-style: none; background-color: #f2f2f2; border-bottom: 1px solid #ddd;}
.list-data .preview .checker {float: left; width: 19px; padding: 3px;} /* 25px */
.list-data .preview .block {float: left; padding-left: 4px; margin: 5px 0; border-left: 1px solid #ddd;} /* used : 5px */
.list-data .preview .block-non {float: left; padding-left: 5px; margin: 5px 0;} /* used : 5px */
.list-data .preview .block-color {float: left; padding: 5px 0 5px 5px; background-color: #fff} /* used : 5px */




.list-data .data-head-sub {float: left; display: block; width: 938px; padding: 5px; margin: 0; list-style: none; background-color: #e8e8e8; border: 1px solid #f2f2f2; font-weight: bold;}
.list-data .data-head-sub .header-title {float: left; margin: 0; width: 728px;}
.list-data .data-head-sub .header-close {float: right; padding-top: 3px; margin: 0; width: 200px; text-align: right;}

/*max width: 938px remain 919px;*/
.list-data .data-head-sub .checker {float: left; width: 19px; padding: 0;}
.list-data .data-head-sub .block {float: left; padding-left: 4px; border-left: 1px solid #ddd;} /* used : 5px */
.list-data .data-head-sub .block-non {float: left; padding-left: 0;} /* used : 5px */

.list-data .room-bed {font: normal 11px "Verdana";}
.list-data .room-bed TD {font: normal 11px "Verdana"; border-bottom: 1px solid #ddd;}

.list-data .nonborder {border: none; background-color: #f2f2f2;}

.module {float: left; border: 1px solid #1d4088; padding: 5px 3px; width: 950px; font: bold 11px "Verdana"; margin: 0 23px 5px 23px; background-color: #4b67a1; color: #fff;}
.module .header {float: left; margin: 0; width: 744px;}
.module .arrow {float: right; margin: 0; width: 200px; text-align: right;}

.section {padding-bottom: 15px;}

.line {background: url(../images/line.gif) repeat-x left center; padding: 5px;}
.fila {padding-top: 5px; padding-bottom: 2px; border-bottom: 1px solid #dddddd;}

.empty {border: none; background-color: #f2f2f2; padding: 55px 0; text-align: center; font: normal 10px "Verdana"; color: #999;}
/*=== END CONTENT ===*/

.nonborder {float: left; display: block; width: 950px; padding: 5px 0; }
.loading {float: left; display: block; padding: 5px 0; text-align: center;}
#room-loading {display: block; padding: 5px 0; text-align: center;}
#bed-loading {display: block; padding: 5px 0; text-align: center;}

#footer {float: left; width: 1002px; margin: 30px 0 0 0; padding: 0; border-top: 1px solid #b3b3b3; font: normal 10px "Verdana";}
#footer P {padding: 10px 0 15px 0; margin: 0;}

/* Change Class */
.c-input {border: 2px solid #bdc7d8; padding: 2px; width: 180px; font: normal 11px "Verdana"; background-color: #fff;}
.input {border: 1px solid #bdc7d8; padding: 2px; width: 180px; font: normal 11px "Verdana"; background-color: #fff;}

.result-completed {float: left; border: 1px solid #006600; color: #fff; padding: 1px; width: 950px; margin: 0 0 3px 0; text-align: left; font: bold 11px "Verdana";}
.result-completed2 {background-color: #006600; color: #fff; padding: 3px; margin: 0;}
.result-error {float: left; border: 1px solid  #ff0000; color: #fff; padding: 1px; width: 950px; text-align: left; margin: 0 0 3px 0; font: bold 11px "Verdana";}
.result-error2 {background-color: #ff0000; color: #fff; padding: 3px; margin: 0;}

/* Form */
.checkbox, .radio {
	width: 19px;
	height: 25px;
	padding: 0 5px 0 0;
	background: url(../images/checkbox.gif) no-repeat;
	display: block;
	clear: left;
	float: left;
}
.radio { background: url(../images/radio.gif) no-repeat;}
.select {
	position: absolute;
	width: 158px; /* With the padding included, the width is 190 pixels: the actual width of the image. */
	height: 21px;
	padding: 0 24px 0 8px;
	color: #fff;
	font: 12px/21px arial,sans-serif;
	background: url(select.gif) no-repeat;
	overflow: hidden;
}

/* Password */
#passwordBlock {display:block; float:left; border: 1px solid #bdc7d8; width:256px; padding: 1px;}
#passwordStrength {padding: 2px; display:block; float:left; border: 1px solid #fff; font: bold 10px "Verdana"; color: #000;}
.strength0 {background:#dbdbdb; width:80px;}
.strength1 {background:#c7c7c7; width:114px;}
.strength2 {background:#ff0000; width:148px;}
.strength3 {background:#ffde00; width:182px;}
.strength4 {background:#ffcc00; width:216px;}
.strength5 {background:#009900; width:250px;}
.strength-out {font: bold 10px "Verdana"; width: 0; background:#f2f2f2;}

/*=== CONTENT SUB ===*/
.sub-data {float: left; font: normal 11px "Verdana"; width: 550px; border: 1px solid #dddddd; padding: 2px; margin-left: 23px;}
.sub-data .myform {display: block; width: 540px; padding: 5px; margin: 0; list-style: none; background-color: #f2f2f2;}
.sub-data .myform .fromdata {padding: 3px 0 0 5px; width: 290px; font: normal 11px "Verdana";}
.sub-data .myform .fromdata-large {padding: 3px 0 0 5px; width: 380px; font: normal 11px "Verdana";}
.sub-data .myform .textfrom {border: 1px solid #bdc7d8; padding: 2px; width: 180px; font: normal 11px "Verdana";}
.sub-data .myform .listform {border: 1px solid #bdc7d8; padding: 2px; font: normal 11px "Verdana";}
.sub-data .myform .submit {border: 1px solid #1a356e; background-color: #5c74a9; color: #fff; padding: 3px 10px; font: bold 11px "Verdana"; text-decoration:none; cursor: hand;}

.sub-data .data-header {float: left; display: block; width: 538px; padding: 8px 5px; margin: 0; list-style: none; background: url(../images/bar.gif) #f2f2f2 repeat-x left top; border: 1px solid #cccccc; font-weight: bold;}
.sub-data .data-header .header-title {float: left; margin: 0; width: 328px;}
.sub-data .data-header .header-close {float: right; padding-top: 3px; margin: 0; width: 200px; text-align: right;}

/*max width: 938px remain 919px;*/
.sub-data .data-header .checker {float: left; width: 19px; padding: 0;}
.sub-data .data-header .block {float: left; padding-left: 4px; border-left: 1px solid #fff;} /* used : 5px */

/*max width: 950px remain 925px;*/
.sub-data .preview {float: left; display: block; width: 550px; padding: 0; margin: 0; list-style: none; background-color: #f2f2f2; border-bottom: 1px solid #ddd;}
.sub-data .preview .checker {float: left; width: 19px; padding: 3px;} /* 25px */
.sub-data .preview .block {float: left; padding-left: 4px; margin: 5px 0; border-left: 1px solid #ddd;} /* used : 5px */




.sub-data .data-head-sub {float: left; display: block; width: 538px; padding: 5px; margin: 0; list-style: none; background-color: #e8e8e8; border: 1px solid #f2f2f2; font-weight: bold;}
.sub-data .data-head-sub .header-title {float: left; margin: 0; width: 328px;}
.sub-data .data-head-sub .header-close {float: right; padding-top: 3px; margin: 0; width: 200px; text-align: right;}

/*max width: 938px remain 919px;*/
.sub-data .data-head-sub .checker {float: left; width: 19px; padding: 0;}
.sub-data .data-head-sub .block {float: left; padding-left: 4px; border-left: 1px solid #ddd;} /* used : 5px */

#footer-sub {float: left; width: 550px; margin: 30px 0 0 0; padding: 0; border-top: 1px solid #b3b3b3; font: normal 10px "Verdana";}
#footer-sub P {padding: 10px 0 15px 0; margin: 0;}

#menu-sub {display: none;}
#preview-contact {float: left; display: none; padding-bottom: 5px;}

.view-center {padding: 10px 0; text-align: center;}
.view-default {padding: 0; text-align: left;}

#target-process {width: 956px; margin-left: 23px; padding: 0;}

.page {float: left; padding: 5px 3px; width: 950px; font: normal 11px "Verdana"; margin: 0 23px 5px 23px;}
.page .rect {float: right; margin: 0; padding-top: 3px; padding-right: 5px;}

.page .rect-memu {float: right; margin: 0;}
.page .listform {border: 1px solid #bdc7d8; padding: 2px; font: normal 11px "Verdana";}