/* Infrasturcture : body and anchors */
body {
    background: white;
    color: #454545;
    font: 62.5% Verdana, "Helvetica Neue", Helvetica, Arial, sans-serif; /*"Microsoft YaHei", */
}

a {
    text-decoration: none;
    color: #391212;
}

a:hover {
    text-decoration: underline;
}

a:visited {
    color: #391212;
}

/*
 * Commons
 */
.msg {
    font-size: 1.2em;
}

.fir {
    display: inline-block;
    text-indent: -9999px;
    overflow: hidden;
}

.note {
    margin: 20px 10px;
}

.warning {
    border: 1px solid #9e1d20;
    padding: 15px;
    color: #9e1d20;
    font-weight: bolder;
    text-align: center!important;
}

ul, ul li {
    margin: 0;
    padding: 0;
    list-style: none;
}

#overlay {
    position: absolute;
    z-index: 100;
    width: 698px;
    height: 100%;
    top: 0px;
    left: 0;
    border: 1px solid #b4b4b4;
    background: white;
}

#overlay #loading {
    margin: 200px auto 0 auto;
    background: url(../images/loading.gif) no-repeat 35px 0px;
    display: block;
    width: 110px;
    line-height: 32px;
    padding-top: 45px;
    text-align: center;
    font-weight: bolder;
}

.opacity {
    filter: alpha(opacity = 80);
    -moz-opacity: 0.8;
    opacity: 0.8;
}

/*
 * Basic Font
 */
#top, #content {
    font-size: 1.4em /* displayed at 14px */
}

#footer {
    font-size: 1em; /* displayed at 10px */
}

H1 {
    font-size: 2em
}

/* displayed at 24px */
H2 {
    font-size: 1.5em
}

/* displayed at 18px */
H3 {
    font-size: 1.25em
}

/* displayed at 15px */
H4 {
    font-size: 1em
}

/* displayed at 12px */
INPUT, SELECT, TH, TD {
    font-size: 1em
}

/*
 * Top Section
 */
#top {
    background: url(../images/gradient.gif) repeat-x;
    color: #aa3939;
    font-weight: bolder;
    height: 90px;
}

#logo {
    background: url(../images/logo.gif) no-repeat;
    height: 90px;
}

#top .userLogout {
	display: none;
}

#accountAction {
    text-align: right;
    line-height: 3em;
}

#accountAction a, #accountAction a:visited {
    font-weight: bolder;
    border-bottom: 1px solid #aa3939;
    color: #aa3939;
    text-decoration: none;
}

#accountAction a:hover {
    color: white;
    text-decoration: none;
    border-color: white;
}

#navBar {
    position: relative;
}

#navBar ul {
    height: 30px;
    position: absolute;
    top: 10px;
    right: 0px;
    display: block;
}

#navBar ul li {
    float: left;
}

#navBar ul li a {
    width: 130px;
    height: 30px;
    display: block;
    background: url(../images/nav_bar.gif) no-repeat;
    margin-left: 10px;
}

#navBar a.goUserPanel {
    background-position: -130px 0px;
    display: none;
}

#navBar a.goSupport {
    background-position: -260px 0px;
}

#navBar a.goHome {
    background-position: 0px 0px;
}

#navBar a.goUserPanel:hover, #navBar a.goUserPanel.current {
    background-position: -130px -30px;
}

#navBar a.goSupport:hover, #navBar a.goSupport.current {
    background-position: -260px -30px;
}

#navBar a.goHome:hover, #navBar a.goHome.current {
    background-position: 0px -30px;
}

/*
 * Main Content
 */
#main {
    position: relative;
}

#mapAction {
    display: block;
    background: url(../images/left-action-bar.gif) no-repeat;
    width: 220px;
    height: 270px;
}

#mapAction a {
    width: 220px;
    height: 54px;
    display: block;
}

#mapAction a:hover, #mapAction a.current {
    background: url(../images/left-action-bar.gif) no-repeat;
}

#mapAction a.roam:hover, #mapAction a.roam.current {
    background-position: -220px 0px;
}

#mapAction a.findNode:hover, #mapAction a.findNode.current {
    background-position: -220px -54px;
}

#mapAction a.findPath:hover, #mapAction a.findPath.current {
    background-position: -220px -108px;
}

#mapAction a.shareNode:hover, #mapAction a.shareNode.current {
    background-position: -220px -162px;
}

#mapAction a.sharePath:hover, #mapAction a.sharePath.current {
    background-position: -220px -216px;
}

#mapInfo, #unitBusket {
    border: 1px solid #b4b4b4;
    margin-top: 20px;
    height: 465px;
    display: none;
}

#mapInfo h2, #unitBusket h2 {
    background: url(../images/titles.gif) 0px -60px no-repeat;
    height: 18px;
    width: 72px;
    margin: 15px auto;
    display: block;
}

#mapInfo .detail {
    border-top: 1px solid #b4b4b4;
    overflow: auto;
    height: 415px;
}

#mapInfo .detail a.title {
    font-weight: bolder;
    display: block;
}

#mapInfo .detail ol {
    padding: 10px;
}

#mapInfo .detail .desc {
    font-size: 0.8em;
}

#mapInfo .indicator {
    padding: 10px;
    margin: 0;
}

#mapInfo .list .resultContent {
    padding: 5px 10px 5px 20px;
}

#mapInfo .list .resultContent .resultTitle {
    line-height: 20px;
    font-weight: bolder;
}

#mapInfo .list .resultContent .resultConfirm {
    font-size: 0.8em;
}

#recommendation {
    border: 1px solid #b4b4b4;
    border-bottom: none;
    
}

#recommendation h3 {
    color: #7d7d7d;
    padding-left: 15px;
    font-size: 1.2em;
}

#nodeList {
    float: right;
    width: 165px;
    padding: 26px 26px 0px 0px;
}

#pathList {
    float: left;
    width: 455px;
    padding: 26px 0px 0px 26px;
}

ul.listshow {
    border-top: 3px solid #ad5353;
    padding-bottom: 30px;
}

ul.listshow li {
    border-bottom: 1px solid #cccccc;
    padding: 15px;
    background: #fff8e6;
    position: relative;
}

ul.listshow li .pathNodes, ul.listshow li .desc, ul.listshow li .nodeType {
    font-size: 0.8em;
}

ul.listshow li.odd {
    background: white;
}

ul.listshow li a {
    color: #930606;
}

ul.listshow li a.title, ul.listshow span.title {
    font-size: 1em;
    line-height: 20px;
    display: block;
}

ul.listshow li .pathNodes {
    display: inline-block;
    width: 300px;
}

ul.listshow span.title {
}

#pathList .desc {
    position: absolute;
    right: 15px;
    bottom: 15px;
}

#searchOptions {
    border: 1px solid #b4b4b4;
    border-bottom: none;
    position: relative;
    height: 100px;
    display: none;
    padding: 20px;
    overflow: hidden;
}

#searchOptions h3 {
    font-size: 1.2em;
}

h2#viewTitle {
    margin: 15px;
    height: 18px;
    line-height: 18px;
    display: block;
}

#searchOptions ul {
    display: block;
    position: absolute;
    top: 0px;
    right: 0px;
}

#selectArea, #selectType {
    float: left;
}

#selectType {
    width: 160px;
    float: right;
}

#goFind {
    width: 100px;
    margin-top: 10px;
    font-size: 1em;
}

.mapWrapper {
    border: 1px solid #b4b4b4;
    height: 560px;
    width: 698px;
    position: relative;
    z-index: 10;
}

#mapCanvas {
    width: 100%;
    height: 100%;
}

/* Unit Result */
#unitResults {
    display: none;
    border: 1px solid #b4b4b4;
    border-top: none;
    padding: 25px;
    min-height: 239px;
    /* min-height hack for ie6 */
    height: auto !important;
    height: 239px;
    overflow: visible;
}

#unitResults h3,
#pathResults h3 {
    font-size: 1.2em;
}

#unitResults h3 span,
#pathResults h3 span {
    background: #930606;
    color: white;
    padding: 5px;
}

#addressList li.local-result {
    display: block;
    position: relative;
    margin-bottom: 20px;
}

#addressList h4 {
    font-size: 1em;
    font-weight: bolder;
    margin: 10px 0 5px 0;
    line-height: 1.8em;
    color: #930606;
	
}

#addressList li span.desc {
    line-height: 1.8em;
    padding-bottom: 10px;
    position: absolute;
    top: 0;
    right: 0;
}

#addressList ul.unitList {
    display: block;
    margin-top: 10px;
}

#addressList ul li {
    width: 200px;
    float: left;
    border: 1px solid #b4b4b4;
    font-size: 1em;
    margin-right: 20px;
}

#addressList ul li.ex {
    margin-right: 0;
}

#addressList ul li.hover {
    border: 1px solid #930606;
}

#addressList ul li h5 {
    background: #b4b4b4;
    font-size: 1em;
    padding: 5px;
    margin: 0;
    cursor: hand;
    color: white;
    font-weight: bolder;
}

#addressList ul li.hover h5 {
    background: #930606;
}

#addressList ul li p.meta,
#tourList ol li p.meta {
    padding: 5px 5px 0px 5px;
    margin: 0;
    font-size: 0.9em;
}

#addressList ul li p.meta span,
#tourList ol li p.meta span {
    color: #930606;
    font-weight: bolder;
}

#addressList ul li p.desc {
    padding: 5px;
    margin: 0;
    font-size: 0.9em;
}

#addressList ul li p.desc a.more {
    padding-left: 10px;
    font-weight: bolder;
    color: #930606;
}


#unitResults a.viewMore {
	display: block;
	padding: 10px;
	background: #930606;
	color: white;
	font-size: 1.2em;
	text-align: center;
}

#unitResults a.viewMore span {
	font-weight: bolder;
	
}

#pathResults a.viewMore {
	display: inline-block;
	padding: 10px;
	width: 100px;
	background: #930606;
	color: white;
	font-size: 1.2em;
	text-align: center;
	margin-right: 20px;
}


/* Path Results */
#pathResults {
	border: 1px solid #c7c7c7;
	border-top: none;
	padding: 25px;
	min-height: 239px;
	/* min-height hack for ie6 */
	height: auto !important;
	height: 239px;
	overflow: visible;
	display: none;
}

#tourList li.path-result {
	border: 1px solid #c7c7c7;
	position: relative;
	margin-bottom: 20px;
}

#tourList li h4 {
	
	font-weight: bolder;
	font-size: 1em;
	background: #c7c7c7;
	padding: 5px;
	margin: 0;
}

#tourList li.hover{
	border-color: #930606;
}

#tourList li.hover h4 {
	background: #930606;
}

#tourList li.path-result span.more {
	position: absolute;
	right: 5px;
	top: 5px;
	color: white;
	
}

#tourList li.path-result span.more a,
#tourList li.path-result h4 a  {
	color: white;
	font-weight: bolder;
}

#tourList li.hover h4 a
,  #tourList li.hover span.more a{
	color: white;
}

#tourList ol {
	margin: 0;
}

#tourList ol li {
	list-style: none;
	padding: 13px;
	float: left;
	border-right: 1px dotted #c7c7c7;
	border-bottom: 1px dotted #c7c7c7;
	position: relative;
}

#tourList ol li span.number {
	position: absolute;
	z-index: -1;
	color: #c7c7c7;
	font-family: Georgia, cursive;
	font-size: 2.4em;
	left: 100px;
	top: 5px;
}

#tourList li.hover span.number {
	color: #E69793;	
}

#tourList ol li p.meta {
	padding: 0;
}

#tourList ol li.ex {
	border-right: none;
}

#tourList ol li.last {
	border-bottom: none;
}

#tourList ol li h5 {
	color: #930606;
	font-size: 1em;
	margin: 0;
	margin-bottom: 5px;
}




/* Unit Busket */
#unitBusket h2 {
    background: url(../images/titles.gif) 0px -90px;
}

#unitBusket .detail {
    border-top: 1px solid #b4b4b4;
    padding: 10px;
}

#unitBusket .list {
    height: 375px;
    margin: 0;
    overflow: auto;
}

#unitBusket .list li {
    margin-bottom: 10px;
}

#unitBusket li a.cancel {
    background: url(../images/close.png) no-repeat 0px 4px;
    width: 11px;
    height: 17px;
    float: right;
    margin: 0px 0px 5px 5px;
}

#unitBusket .busketAction {
    width: 120px;
    text-align: center;
    display: none;
    padding: 5px;
    font-weight: bolder;
}

#unitBusket a#submitBusket {
    color: white;
    background: #930606;
}

/* Step Instructions */
#steps {
    padding-left: 20px;
    border: 1px solid #b4b4b4;
    border-bottom: none;
    display: none;
}

.stepList {
    margin: 0;
    display: block;
}

.stepList li {
    float: left;
    padding: 18px;
    padding-left: 0px;
}

.stepList li.current {
    color: #391212;
    font-weight: bolder;
}

/*
 * Dynamics
 * Hide some elements for app
 */
#dynamics {
    display: none;
}

/*
 * Login View and Registration View
 */
.lightbox {
    font-size: 1.4em;
    margin: 0px auto;
}
.lightbox h3 {
	text-align: center;
}

.lightbox label {
    padding: 5px;
    display: block;
    margin: 15px 0px;
}

.lightbox label.box {
    border: 1px solid #b4b4b4;
}

.lightbox label span {
    font-weight: bolder;
    padding-right: 10px;
	vertical-align: top;
}

.lightbox label input.text {
    border: none;
}

.lightbox button {
    font-size: 1em;
    font-weight: bolder;
}

.registerWin, .loginWin {
	width: 300px;
}

.loginWin button, .registerWin button {
	width: 70px;
}
.loginWin button {
    position: absolute;
    top: -40px;
    left: 80px;
}

.lightbox span.wrapper {
    position: relative;
}

#verifyCode {
    display: inline-block;
}

#verifyCodeWrapper span {
    display: inline-block;
}

#verifyCodeWrapper input {
    width: 160px;
}

.pathDetail .mini-map {
	width: 600px;
	height:260px;
}


.pathDetail .detailForm {
	width: 500px;
	margin: 0 auto;
}

.pathDetail .detailForm p {
	text-align: right;
}

.unitDetail {
	width: 520px;
}

.unitDetail input, .unitDetail textarea,
.pathDetail .detailForm input, .pathDetail .detailForm textarea {
    width: 400px;
    padding: 3px;
}


.unitDetail textarea, .pathDetail .detailForm textarea {
    height: 200px;
}

.unitDetail label {
    display: block;
    vertical-align: top;
    margin: 10px 0px;
}

.unitDetail .nodeId {
    display: none;
}

.unitDetail span {
    font-weight: bolder;
    padding-right: 10px;
    display: inline-block;
    width: 60px;
    text-align: right;
    vertical-align: top;
}

.unitDetail p {
    text-align: right;
}

/*
 * Footer
 */
#footer {
    background: #454545;
    clear: both;
    margin-top: 20px;
    height: 95px;
}

#pageAction a {
    width: 180px;
    height: 40px;
    background: url(../images/buttons.gif) no-repeat;
    display: block;
    margin: 25px 20px 20px 0px;
    float: left;
}

#pageAction a.copyurl {
    background-position: 0px -40px;
}

#copyrights {
    text-align: right;
    padding-top: 20px;
}

#copyrights a {
    font-weight: bolder;
}

#copyrights p, #copyrights p a {
    color: #B4B4B4;
}

#copyrights span, #copyrights span a {
    color: #707070;
}

#copyrights a:hover {
    color: #391212;
}

.radius {
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}

.confirmRepeat ul {
	margin-bottom: 20px;
}

.confirmRepeat ul li {
	padding-left: 10px;
	color: gray;
}

.confirmRepeat a.confirm {
	padding: 5px;
	color: white;
	margin-right: 20px;
	background: #930606;
	font-weight: bolder;
}

/*
 * Map Elements
 */
.nodeResult .desc {
    padding-right: 10px;
    display: block;
}

span.nodeTitle {
    margin-bottom: 10px;
}

a.nodeTitle, a.resultConfirm, span.nodeTitle {
    color: #391212;
    display: block;
    font-size: 1em;
    font-weight: bolder;
}

span.nodeAddress, span.resultConfirm {
    display: block;
    margin-bottom: 1em;
}

.nodeContent ul a {
    color: #b4b4b4;
}

/* Bubble */
.bubble-box {
	border: 5px solid #550202;
	padding: 10px;
	position: absolute;
	background: #FDF4DD;
	font-weight: bolder;
	font-size: 12px;
	z-index: 100;
	
}

.bubble-arrow {
	background: url(../images/bubble_arrow.gif) no-repeat;
	position: absolute;
	width: 46px;
	height: 30px;
}