/* andreas08 - an open source xhtml/css website layout by Andreas Viklund - http://andreasviklund.com . Free to use in any way and for any purpose as long as the proper credits are given to the original designer. Version: 1.0, November 28, 2005 */
/* Edited by Ngoc DAO Thanh */
/**************** Body and tag styles ****************/

#header * {
  margin:0; padding:0;
}

p, ul, ol, li {
  margin:0; padding:0;
}

body {
  font: 12px sans-serif,Arial,Verdana,Tahoma;
  line-height:1.4em;
  text-align:center;
  color:#303030;
  background:#fff;
  margin:0;
  border:0px;
  padding:0px;
}

input, input.button, input.text {
  font: 13px Verdana,Tahoma,Arial,sans-serif;
}

a {
  color:#004D99;
  font-weight:bold;
  text-decoration:none;
  background-color:inherit;
}
a:hover {
  color:#CC0000;
  text-decoration:none;
  background-color:inherit;
}
a.logout {
  color: #FFFFFF;
  text-decoration: none;
}
a.logout:hover {
  color: #FFFFFF;
  text-decoration: underline;
}
a img{
  border:none;
}

p {
  margin:0 0 1em 0;
}
p form{
  margin-top:0; margin-bottom:20px;
}

img.left,img.center,img.right {
  padding:4px;
  border:1px solid #a0a0a0;
}
img.left {
  float:left;
  margin:0 12px 5px 0;
}
img.center {
  display:block;
  margin:0 auto 5px auto;
}
img.right {
  float:right;
  margin:0 0 5px 12px;
}

/**************** Header and main_menu styles ****************/

#container {
  width:100%;
  min-width:750px;
  margin:0;
  padding:0;
  text-align:left;
  background:#ffffff;
  color:#303030;
}

#header {
  height:60px;
  margin:0;
  background:#467aa7;
  color:#ffffff;
  margin-bottom:1px;
}

#header1 {
  height:90px;
  margin:0;
  background:#467aa7;
  color:#ffffff;
  margin-bottom:1px;
}

#header h1 {
  padding:10px 0 0 20px;
  font-size:1.9em;
  background-color:inherit;
  color:#fff;
  letter-spacing:-1px;
  font-weight:bold;
  font-family: Trebuchet MS,Georgia,"Times New Roman",serif;
}

#header h2 {
  margin:3px 0 0 40px;
  font-size:1.4em;
  background-color:inherit;
  color:#f0f2f4;
  letter-spacing:-1px;
  font-weight:normal;
  font-family: Trebuchet MS,Georgia,"Times New Roman",serif;
}

#main_menu {
  height:2.2em;
  line-height:2.2em;
  margin:0;
  background:#578bb8;
  color:#ffffff;
}

#main_menu li {
  float:left;
  list-style-type:none;
  border-right:1px solid #ffffff;
  white-space:nowrap;
}

#main_menu li.right {
  float:right;
  list-style-type:none;
  border-right:0;
  border-left:1px solid #ffffff;
  white-space:nowrap;
}

#main_menu li a {
  display:block;
  padding:0px 10px 0px 22px;
  font-size:14px;
  font-weight:normal;
  text-decoration:none;
  background-color:inherit;
  color: #ffffff;
}

#main_menu li.submenu {
  //background:url(../images/arrow_down.png) 96% 80% no-repeat;
}
#main_menu li.submenu a {
  padding:0px 16px 0px 22px;
}
* html #main_menu a {
  width:1%;
}

#main_menu a:hover {
  color:#ffffff;
  text-decoration:none;
  background-color: #80b0da;
}

#main_menu .selected {
  text-decoration:none;
  background-color:#fff;
  color: #375700;
}

#main_menu li.selected {
  display:block;
  padding:0px 10px 0px 22px;
  font-size:14px;
  font-weight:normal;
  text-decoration:none;
  background-color:#fff;
  color: #375700;
}

/**************** Icons *******************/
.icon {
  background-position: 0% 40%;
  background-repeat: no-repeat;
  padding-left: 20px;
  padding-top: 2px;
  padding-bottom: 3px;
  vertical-align: middle;
}

#main_menu .icon {
  background-position: 4px 50%;
}

.icon22 {
  background-position: 0% 40%;
  background-repeat: no-repeat;
  padding-left: 26px;
  line-height: 22px;
  vertical-align: middle;
  font-size:16px;
}

.icon-operator { background-image: url(../images/16x16/operator.png); }
.icon-group-searcher { background-image: url(../images/16x16/operator.png); }
.icon-mobile_phone { background-image: url(../images/16x16/mobile_phone.png); }
.icon-department { background-image: url(../images/16x16/department.png); }
.icon-news { background-image: url(../images/16x16/news.png); }
.icon-faq { background-image: url(../images/16x16/faq.png); }
.icon-user { background-image: url(../images/16x16/user.png); }
.icon-my_spot { background-image: url(../images/16x16/my_spot.png); }
.icon-friend { background-image: url(../images/16x16/friend.png); }
.icon-search_record { background-image: url(../images/16x16/search_record.png); }
.icon-location { background-image: url(../images/16x16/location.png); }
.icon-sos { background-image: url(../images/16x16/sos.png); }
.icon-sos_record { background-image: url(../images/16x16/sos_record.png); }
.icon-loginout { background-image: url(../images/16x16/loginout.png); }
.icon-content { background-image: url(../images/16x16/content.png); }
.icon-config { background-image: url(../images/16x16/config.png); }
.icon-search-history { background-image: url(../images/16x16/search_history.png); }
.icon-statistical { background-image: url(../images/16x16/statistical.png); }
.icon-search_limit { background-image: url(../images/16x16/sc_limit.png); }
.icon-template { background-image: url(../images/16x16/template.png); }

.icon22-login { background-image: url(../images/22x22/login.png); }


/**************** Content styles ****************/

html>body #content {
  height: auto;
  min-height: 500px;
}

#content {
  width: auto;
  height: 500px;
  /*font-size: 14px;*/
  padding: 10px 10px 10px 10px;
  margin-left: 170px;
}

#content h2 {
  display:block;
  margin:0 0 16px 0;
  font-size:1.7em;
  font-weight:normal;
  letter-spacing:-1px;
  color:#606060;
  background-color:inherit;
  font-family: Trebuchet MS,Georgia,"Times New Roman",serif;
}

#content h2 a {
  font-weight:normal;
}
#content h3 {
  margin:0 0 12px 0;
  font-size:1.4em;
  color:#707070;
  font-family: Trebuchet MS,Georgia,"Times New Roman",serif;
}
#content h4 {
  font-size: 1em;
  margin-bottom: 12px;
  margin-top: 20px;
  font-weight: normal;
  border-bottom: dotted 1px #c0c0c0;
}
#content a:hover,#submenu a:hover {
  text-decoration:underline;
}
#content ul,#content ol {
  margin:0 5px 16px 35px;
}
#content dl {
  margin:0 5px 10px 25px;
}
#content dt {
  font-weight:bold;
  margin-bottom:5px;
}
#content dd {
  margin:0 0 10px 15px;
}

#content .tabs{height: 2.6em;}
#content .tabs ul{margin:0;}
#content .tabs ul li {
  float:left;
  list-style-type:none;
  white-space:nowrap;
  margin-right:8px;
  background:#fff;
}
#content .tabs ul li a {
  display:block;
  font-size: 14px;
  text-decoration:none;
  line-height:1em;
  padding:4px;
  border: 1px solid #c0c0c0;
}

#content .tabs ul li a.selected, #content .tabs ul li a:hover {
  background-color: #80b0da;
  border: 1px solid #80b0da;
  color: #fff;
  text-decoration:none;
}


#content2 {
  width: auto;
  height:auto;
  padding: 5px 5px 5px 5px;
  margin-right:2px;
  margin-bottom:1px;
}

#content2 h3 {
  margin:0 0 12px 0;
  font-size:1.4em;
  color:#707070;
  font-family: Trebuchet MS,Georgia,"Times New Roman",serif;
}

/*==========  Drop down menu  ==============*/
div.menu {
  background-color: #FFFFFF;
  border-style: solid;
  border-width: 1px;
  border-color: #7F9DB9;
  position: absolute;
  top: 0px;
  left: 0px;
  padding: 0;
  visibility: hidden;
  z-index: 101;
}

div.menu a.menuItem {
  font-size: 14px;
  font-weight: normal;
  line-height: 2.2em;
  color: #000000;
  background-color: #FFFFFF;
  display: block;
  padding: 0 20px;
  margin: 1px;
  border: 0;
  text-decoration: none;
  white-space: nowrap;
}

div.menu a.menuItem:hover, div.menu a.menuItemHighlight {
  background-color: #80b0da;
  color: #ffffff;
}

div.menu a.menuItem span.menuItemText {}

div.menu a.menuItem span.menuItemArrow {
  margin-right: -.75em;
}

/* Sidebar */
#side {
  float: left;
  width: 170px;
  margin-top: 10px;
}

#nav {
  background: #E0E9E9; /* url("/images/menu_back.gif") right repeat-y; */
}

#nav, #nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
#nav {
  margin-bottom: 0.5em;
}
#nav li {
  display: inline;
  padding: 0;
  margin: 0;
}

#nav li span { /* used for un-linked menu items */
  display: block;
  padding: 6px 10px;
}

#nav li span#configParent, #nav li span #configuration {
  display: inline;
  font-weight: normal;
  padding: 0;
}

#nav li a {
  font-size:14px;
  display: block;
  padding: 4px 10px;
  text-decoration: none;
  font-weight:normal;
  background: #EDF2F2;
  border-bottom: 1px solid #ddd;
  border-top: 1px solid #fff;
  border-right: 1px solid #ddd;
  color:#22229C;
}

#nav li a:hover {
  background: #E0E9E9;
  color:#D41B2A;
}

#nav li li span { /* used for un-linked menu items */
  padding: 4px 8px 4px 20px;
}

#nav li li a {
  padding: 6px 8px 6px 20px;
}


/***********************************************/

form {
  display: inline;
}
blockquote {
  padding-left: 6px;
  border-left: 2px solid #ccc;
}
input, select {
  vertical-align: middle;
}

input.button-small {
  font-size: 0.8em;
}
.select-small {
  font-size: 0.8em;
}
label {
  font-weight: bold;
  font-size: 14px;
  color: #505050;
}
fieldset {
  border:1px solid #c0c0c0;
  padding: 6px;
}
legend {
  color: #505050;
}
.required {
  color: #bb0000;
}
.odd {
  background-color:#f6f7f8;
}
.even {
  background-color: #fff;
}
hr {
  border:none;
  border-bottom: dotted 1px #c0c0c0;
}
table p {
  margin:0;
  padding:0;
}

div.square {
  border: 1px solid #999;
  float: left;
  margin: .4em .5em 0 0;
  overflow: hidden;
  width: .6em; height: .6em;
}

ul.documents {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

ul.documents li {
  background-image: url(../images/32x32/file.png);
  background-repeat: no-repeat;
  background-position: 0 1px;
  padding-left: 36px;
  margin-bottom: 10px;
  margin-left: -37px;
}

/********** Table used to display lists of things ***********/

table.list {
  border-collapse: collapse;
  border: 1px solid #d0d0d0;
  padding: 3px;
  font-size: 12px;
}

table.list td {
  border: 1px solid #d0d0d0;
  padding: 3px;
}

table.list tbody th {
  border: 1px solid #d0d0d0;
  padding: 3px;
  font-weight: normal;
  background: #578bb8;
  color:#fff;
  text-align:center;
}

table.search_condition {
  border-collapse: collapse;
  padding: 3px;
}

table.search_condition td {
  padding: 3px;
}

table.search_condition tbody th {
  padding: 3px;
  font-weight: normal;
  text-align:left;
}

/********** Validation error messages *************/
#errorExplanation {
  width: 600px;
  border: 0;
  padding: 7px;
  padding-bottom: 3px;
  margin-bottom: 0px;
}

#errorExplanation h2 {
  text-align: left;
  font-weight: bold;
  padding: 5px 5px 10px 26px;
  font-size: 1em;
  margin: -7px;
  background: url(../images/alert.png) no-repeat 6px 6px;
}

#errorExplanation p {
  color: #333;
  margin-bottom: 0;
  padding: 5px;
  margin: 0px;
}

#errorExplanation ul li {
  font-size: 1em;
  list-style: none;
  margin-left: -16px;
}


/**************** Sidebar styles ****************/

#submenu {
  position: absolute;
  left: 0px;
  width: 150px;
  padding: 20px 20px 10px 5px;
  border-right: 1px dashed #c0c0c0;
}

#submenu h2 {
  display:block;
  margin:0 0 5px 0;
  font-size:14px;
  font-weight:bold;
  text-align:left;
  color:#606060;
  background-color:inherit;
  font-family: Trebuchet MS,Georgia,"Times New Roman",serif;
}

#submenu p {
  margin:0 0 16px 0;
  font-size:14px;
}

/**************** Menublock styles ****************/

.menublock{margin:0 0 20px 8px; font-size:14px;}
.menublock li{list-style:none; display:block; padding:1px; margin-bottom:0px;}
.menublock li a{font-weight:bold; text-decoration:none;}
.menublock li a:hover{text-decoration:none;}
.menublock li ul{margin:0; font-size:14px; font-weight:normal;}
.menublock li ul li{margin-bottom:0;}
.menublock li ul a{font-weight:normal;}

/**************** Misc classes and styles ****************/

.splitcontentleft{float:left; width:49%;}
.splitcontentright{float:right; width:49%;}
.clear{clear:both;}
.small{font-size:13px;line-height:1.4em;padding:0 0 0 0;}
.hide{display:none;}
.textcenter{text-align:center;}
.textright{text-align:right;}
.important{color:#f02025; background-color:inherit; font-weight:bold;}

.box {
  margin:0px 0px 5px 0px;
  padding:10px;
  border:1px solid #c0c0c0;
  background-color:#fafbfc;
  color:#505050;
}

a.close-icon {
  display:block;
  margin-top:3px;
  overflow:hidden;
  width:12px;
  height:12px;
  background-repeat: no-repeat;
  cursor:pointer;
  background-image:url('../images/close.png');
}

a.close-icon:hover {
  background-image:url('../images/close_hl.png');
}

.rightbox {
  background: #fafbfc;
  border: 1px solid #c0c0c0;
  float: right;
  padding: 8px;
  position: relative;
  margin: 0 5px 5px;
}

.layout-active {
  background: #ECF3E1;
}

.block-receiver {
  border:1px dashed #c0c0c0;
  margin-bottom: 20px;
  padding: 15px 0 15px 0;
}

.mypage-box {
  margin:0 0 20px 0;
  color:#505050;
  line-height:1.5em;
}

.handle {
  cursor: move;
}

img.calendar-trigger {
  cursor: pointer;
  vertical-align: middle;
  margin-left: 4px;
}

#history p {
  margin-left: 34px;
}

/***** Contextual links div *****/
.contextual {
  float: right;
  font-size: 14px;
  line-height: 16px;
  padding: 2px;
}

.contextual select, .contextual input {
  font-size: 14px;
}

/***** Gantt chart *****/
.gantt_hdr {
  position:absolute;
  top:0;
  height:16px;
  border-top: 1px solid #c0c0c0;
  border-bottom: 1px solid #c0c0c0;
  border-right: 1px solid #c0c0c0;
  text-align: center;
  overflow: hidden;
}

.task {
  position: absolute;
  height:8px;
  font-size:14px;
  color:#888;
  padding:0;
  margin:0;
  line-height:0.8em;
}

.task_late { background:#f66 url(../images/task_late.png); border: 1px solid #f66; }
.task_done { background:#66f url(../images/task_done.png); border: 1px solid #66f; }
.task_todo { background:#aaa url(../images/task_todo.png); border: 1px solid #aaa; }

/***** Tooltips ******/
.tooltip{position:relative;z-index:24;}
.tooltip:hover{z-index:25;color:#000;}
.tooltip span.tip{display: none}

div.tooltip:hover span.tip {
  display:block;
  position:absolute;
  top:12px; left:24px; width:270px;
  border:1px solid #555;
  background-color:#fff;
  padding: 4px;
  font-size: 0.8em;
  color:#505050;
}

/***** CSS FORM ******/
.tabular {
}

.tabular p {
  margin: 0;
  padding: 5px 0 8px 0;
  padding-left: 180px; /*width of left column containing the label elements*/
  height: 1%;
}

.tabular label {
  font-weight: bold;
  float: left;
  margin-left: -180px; /*width of left column*/
  width: 175px; /*width of labels. Should be smaller than left column to create some right margin*/
}

.error {
  color: #cc0000;
}


/*.threepxfix class below:
Targets IE6- ONLY. Adds 3 pixel indent for multi-line form contents.
to account for 3 pixel bug: http://www.positioniseverything.net/explorer/threepxtest.html
*/

* html .threepxfix {
  margin-left: 3px;
}
table.TableText{
    margin:0px 0px 10px 0px;
    border-collapse: collapse;
    border:1px solid #cccccc;
}
table.TableText th,
table.TableText td{
    border:1px solid #cccccc;
    vertical-align: center;
    font-weight: normal;
    font-size: 14px;
    text-align: left;
}
table.TableText th{
    background-color:#f2f2f2;
    /*font-weight: bold;*/
    padding:3px 4px 1px 4px;
}
table.TableText td{
    background-color:#ffffff;
    padding:4px 4px 1px 4px;
}

table.login {
  border:0;
    width:360px;
}

table.login tr td {
    padding:5px;
}

input.flat, select.flat {
    font-size:14px;
    height:22px;
    color:#333333;
    background-color:#EDF5FB;
    border-style:solid;
    border-width:1px;
    border-color:#6D90B0;
    vertical-align:middle;
    padding:2px;
}
input.submit {
    font-size: 14px;
    font-weight: bold;
    color: #0066FF;
    background-color: #e5e5ff;
    height: auto;
    padding-top: 4px;
    padding-right: 10px;
    padding-bottom: 2px;
    padding-left: 10px;
    border: 2px solid #999999;
    width: 100px;
}
span.info {
  font-size: 14px;
  color: blue;
}
span.small {
  font-size: 13px;
}
.back-menu .x-btn-text {
  background-image: url(../images/16x16/back.png);
}
.forward-menu .x-btn-text {
  background-image: url(../images/16x16/mail_forward.png);
}
.refresh-menu .x-btn-text {
  background-image: url(../images/16x16/viewmag.png);
}
.smenu .x-btn-text {
  background-image: url(../images/16x16/viewmag.png);
}
.close-menu .x-btn-text {
  background-image: url(../images/16x16/close.png);
}
.progressBar img, .percentImage img {
     background: white url(../images/percentImage_bg.png) top left no-repeat;
     padding: 0;
     margin: 5px 0 0 0;
     background-position: 1px 0;
}
span.progress-bar {
    font-size:14px;
}
table.info {
  border:1px solid #CCCCCC;
  border-collapse:collapse;
  margin:0px;
}

table.info th {
  background-color:#F2F2F2;
}

table.info td {
  background-color:#fff;
}

table.info th, table.info td {
  border:1px solid #CCCCCC;
  font-weight:normal;
  text-align:left;
  padding:3px 3px 3px 3px;
}

textarea.flat {
  font-size:14px;
  padding:2px;
}