﻿
.clear {clear:both; }
li { list-style: none;}

/* -- train filter -- */
.listFilter {margin:0 auto 5px;border:2px solid #D8D8D8;border-collapse:collapse;font-size:12px;}
.listFilter th {border:1px solid #FFF;padding:2px 8px;width:160px;background:#F2F2F2;font-weight:normal;text-align:right;vertical-align:top;}
.listFilter td {border:1px solid #FFF;padding:2px 8px;width:943px;}
.listFilter label {margin-right:25px;}
.listFilter .sel {color:#090;}
.listFilter .disable {color:#999;}

/* --- pop window --- */
.listOpBox {margin:0; padding:0; height:36px; display:none;}
.listOpBox .listOpMenu {float:left;width:100%; position:relative;}
.listOpBox .listOpMenu .listOpMenuBody {border:1px solid #d1d1d1; height:34px; line-height:34px; cursor:pointer; background:#f2f2f2 url("https://data.travelchinaguide.com/images/tcg/china-trains/v2015/icon_pull_down_menu.png") no-repeat right 10px center; padding-left:20px; color:#000;}
.listOpBox .popFilterWin .listOpMenuBody { border: 1px solid #d1d1d1;
    height: 34px; line-height: 34px; cursor: pointer;padding-left: 20px; color: #000;
    background: #f2f2f2 url(https://data.travelchinaguide.com/images/tcg/china-trains/v2015/icon_pull_down_menu.png) no-repeat right 10px center; }

.listOpBox .listOpMenu .listOpItem {position:absolute; left:0; top:36px; width:100%; background:#fff; box-shadow:5px 5px rgba(0,0,0,.4); display:none; z-index:2;}
.listOpBox .listOpMenu .listOpItem ul {margin:0; padding:0; border-left:1px solid #d1d1d1;border-right:1px solid #d1d1d1;}
.listOpBox .listOpMenu .listOpItem li {padding:10px 16px; border-bottom:1px solid #d1d1d1;}
.listOpBox .listOpMenu .listOpItem li.checked {background:url("https://data.travelchinaguide.com/images/tcg/china-trains/2014/icon-yes.png") no-repeat right 10px center;}

.mobile_filter_box {background:#fff; position:relative; padding:16px 0 0;}
.mobile_filter_box_close {position: absolute;width: 50px;height: 50px;top: -15px;right: -10px;background: url("https://data.travelchinaguide.com/images/tcg/picture/bg/icon-close01.png") no-repeat;cursor: pointer;}

.mobile_filter_box_buttons {padding:8px 0; text-align:center; background:#f2f2f2; position:absolute; left:0; bottom:0; width:100%;}
.mobile_filter_box_buttons div {width:100px; height:34px; display:inline-block; border-radius:5px; cursor:default; line-height:34px;border:1px solid #d1d1d1; background:#fff; color:#c10; font-size:16px; text-align:center;}

.mobile_filter_box .listFilter {border:none; margin:0 8px; display:table;}
.mobile_filter_box .listFilter th {display:block; width:auto; height:34px; line-height:34px; text-align:left; background:none; font-size:14px; padding:0;}
.mobile_filter_box .listFilter td {display:block; width:auto; padding:0 16px 8px; border-bottom:1px solid #d1d1d1;}
.mobile_filter_box .listFilter tr:last-child td {border:none;}
.mobile_filter_box .listFilter td label {display:inline-block; width:49%; margin:0; padding:3px 0;}
.mobile_filter_box .listFilter tr:first-child td label {width:100%;}

/* -- train list -- */
.sortable {width:100%;text-align:center;border-collapse:collapse;border:1px solid #e5e5e5;border-width:0 1px;margin:1px 0 20px;}
.sortable th {border:#E5E5E5 solid 1px;padding:5px 0;line-height:1.1em;background:#E0EAEC url(https://data.travelchinaguide.com/images/tcg/china-trains/2014/sortthbg.jpg) repeat-x;color:#000;font-size:13px;font-weight:normal;}
.sortable th div {background:url(https://data.travelchinaguide.com/images/tcg/china-trains/2014/sort.png) no-repeat right center; padding-right:26px;}
.sortable th div.sortup {background:url(https://data.travelchinaguide.com/images/tcg/china-trains/2014/sortup.png) no-repeat right center; padding-right:26px;}
.sortable th div.sortdown {background:url(https://data.travelchinaguide.com/images/tcg/china-trains/2014/sortdown.png) no-repeat right center;padding-right:26px;}
.sortable td {border:#E5E5E5 solid 1px;font-size:12px;padding:10px 3px; vertical-align:top;}
.sortable .tdBg{background:#F1F1F1;}
.sortable .select{float:right;width:60px;height:18px;line-height:18px;margin-left:10px;background:url("https://data.travelchinaguide.com/images/tcg/china-trains/p009.png") no-repeat 0 -29px;color:#FFF;text-decoration:none;}
.sortable .noTicket{color:#B5B5B5;}
.sortable .noTicket .select{background-position:0 -47px;}
.sortable .red{color:#F60;}
.sortable .downArr{padding:1px 0 1px 20px;background:url("https://data.travelchinaguide.com/images/background/arrow/hp014-down.png") no-repeat;cursor:pointer;text-decoration:underline;color:#36C;}
.sortable .nobooking{color:#999;}
.sortable .selectArr:hover{text-decoration:none;color:#F60;}
.sortable .help{position:absolute;right:2px;top:-10px;width:20px;height:17px;background:url("https://data.travelchinaguide.com/images/tcg/china-trains/p008.png") no-repeat;}
.sortable .prebook {display:none;}
.sortable .trainTime {font-size:16px; padding-bottom:5px; position:relative;}
.sortable .travelTime {color:#999; display:none;}

.sortable .cs1, .sortable .cs2 {text-align:left; padding:10px 0 10px 10px;}
.sortable .cssExtST {text-align:left; text-indent:8px;}
.sortable .cssExtP {text-align:center;}

.sortable.mobileListHeader {display:none; margin-bottom:0;}

.sortable td.cTrainNo .trainNoMobile {display:none; font-size:14px;padding-left:5px;}
.sortable td.cTrainNo .trainNoMobile div {font-size:12px; color:#999;}
.sortable td.cTrainNo a {color:#36c;}
.sortable td.cTrainNo a:hover {color:#f60;}

.pricelist th {background:#e2e2e3; color:#757575; font-size:11px; text-align:left; border:none; display:none;}
.pricelist td {padding:3px 0 3px 2px;border:none;border-top:1px dashed #ccc;}
.pricelist .first td {border-top:none;}
.pricelist .pSeatName {width:auto; text-align:left;}
.pricelist .pSeatPrice {width:120px; text-align:left; }
.pricelist .pSeatTickets {width:90px;}
.pricelist .pSeatBook {width:70px;}
.pricelist .pSeatNext {width:70px; display:none;}

.pricelist .longName {display: inline-block;}
.pricelist .shortName {display:none; min-width:90px; padding-right:3px;}
.pricelist .btnBookNext {height:28px;min-width:26px;background:url("https://data.travelchinaguide.com/images/background/icon/icon_arrow_right_orange.png") no-repeat center center;}
.pricelist .btnBookNext.disabled {background-image:url("https://data.travelchinaguide.com/images/background/icon/icon_arrow_right_gray.png");}
.classShow {
    width: 17px;
    height: 14px;
    background: url(https://data.travelchinaguide.com/images/tcg/china-trains/seats/icon-pic.png) no-repeat 0 -14px;
    display: inline-block;
    margin-right: 5px;
    cursor: pointer;
}

/* --- train station list --- */
.tsListBox {display:none;position:absolute;background:#fffac9;text-align:left;border:1px solid #e3e3e3; }
.tsListBox .tsListBoxClose {position:absolute; top:0; right:0; width:36px; height:36px; cursor:pointer; background:#fff url("https://data.travelchinaguide.com/images/tcg/tour/2016/icon_close_36.png") no-repeat;}
.tsListBox .tsListBoxTitle {height:36px; line-height:36px; font-size:16px; padding:0 40px 0 10px;}
.tsListBox .tsListDetails {overflow-y: auto; }
.tsListBox .tsListBoxWaiting {text-align:center;margin-top:100px;}

.tsListBox table {width:100%;}
.tsListBox th { text-align:left; padding:8px 4px;border:0px; background:#418fb6; color:#fff;  font-weight:normal;font-size:14px;}
.tsListBox td { text-align:left; padding:8px 4px; border:0px; border-bottom:1px solid #d1d1d1; font-size:14px;}
.tsListBox tr.gray td {background:#eee;}
.tsListBox .idx {width:20px; text-align:center;}
.tsListBox .at, .tsListBox .dt {width:60px;}
.tsListBox .blank {width:12px; overflow:hidden;}

.btnBook { background: url(https://data.travelchinaguide.com/images/background/button/booksmall.gif) no-repeat;
    width: 55px; height: 23px; border: 0px; cursor: pointer;}

#mask{ display:none; position:absolute; left:0; top:0;  background:#0b0b0b; opacity:0.4; filter:alpha(opacity=40); z-index:765;}
.textInput { border: 1px solid #d1d1d1; height: 34px; line-height: 34px; text-indent: 5px; font-size: 14px;}
.Wdate11 {
    background: #fff url(https://data.travelchinaguide.com/images/tcg/china-trains/v2015/icon-calendar.png) no-repeat scroll right center;
    cursor: default;
}
.closePop { position: absolute; top: -20px; right: -20px; width: 50px; height: 49px; cursor: pointer; z-index: 1000;
    background: url(https://data.travelchinaguide.com/images/tcg/china-trains/book/icon-close01.png) no-repeat;}
.TrainSearch {width:220px; z-index:870; position:absolute;border:0px solid red; padding:10px; color:#000; background:#fff; }
.TrainSearch .flrow { margin: 8px 0; text-align: center;}
.TrainSearch .flrow .divLoading {display:none; background: url(https://data.travelchinaguide.com/images/background/icon/loading2.gif) no-repeat 5px;
    height: 30px;
    border: 0px solid red;
    line-height: 30px;
    width: 80%;
    margin: 0 auto;}
.TrainSearch .flrow .divFail { display: none; }
.TrainSearch .flrow label { text-align: left;  display: block; padding-bottom: 3px; line-height: 28px; text-indent: 15px;}
.TrainSearch .submit { background: url(https://data.travelchinaguide.com/images/tcg/china-trains/book/new.png) no-repeat;
    width: 127px;height: 39px; border: none; cursor: pointer;}


/* --- seat photo --- */
.seatPhoto {padding:10px; position:relative; background:#fff; z-index:899; position:fixed; display:none;height:490px; width:750px;}
.seatPhoto .close {background:url(https://data.travelchinaguide.com/images/tcg/china-trains/seats/btn-close.png) no-repeat; width:28px; height:28px; position:absolute; top:10px; right:10px; cursor:pointer;}
.seatPhoto .seatTitle {height:40px; line-height:40px; font-size:18px; padding-left:10px;}
.seatPhoto .seatInfo {padding:0 0 10px 10px; font-size:13px;}

.classShow {width:17px; height:14px; background:url("https://data.travelchinaguide.com/images/tcg/china-trains/seats/icon-pic.png") no-repeat 0 -14px; display:inline-block; margin-right:5px; cursor:pointer;}
.classShow:hover {background-position:0 0;}

.divTrainMoreBtm {
    color: #fff;
    width: 200px;
    background: #3083c7;
    font-size: 16px;
    text-align: center;
    border-radius: 5px;
    cursor: pointer; margin:15px auto;
}
.divTrainMoreBtm div {padding:10px 0px;}
@media screen and (max-width: 1024px) {
    .sortable .cs1, .sortable .cs2 {width: 90px;}

}

@media screen and (max-width: 770px) {
    .page .c_path {padding: 12px 5px;}
    .page .c_title {padding: 15px 5px;}

    .listFilter {display:none;}
    .listOpBox {display:block; margin-top:16px;}
	.listHeader {color:#999; text-align:left;}
	.mobile_filter_box .listFilter tr:last-child {display:none;}
	
	.sortable {border:none;}
	.sortable thead {display:none;}
	.sortable tr {position:relative; overflow:hidden;}
	.sortable td {border:none; padding:0; vertical-align:top;}
	.sortable td .tdpb {padding:5px 16px 5px 0;}
	
	.sortable td.cTrainNo {width:30%; text-align:left;}
	.sortable td.cTrainNo a {font-size:18px; display:inline-block; text-decoration: underline;}
	.sortable td.cTrainNo .tdpb {padding-left:8px;}
	.sortable td.cTrainNo .travelTime {display:block;}
    .sortable td.cTrainNo, .sortable .cs1, .sortable .cs2, .sortable .cs3, .sortable .cs5 {display:block; float:left;}
	.sortable .cs1, .sortable .cs2 {width:35%;}
	.sortable .cs3 {display:none;}
	.sortable .cs5 {width:40%;}
	.sortable .cs5 .tdpb {padding-right:0;}
	

    .pricelist th {display:table-cell;}
	.pricelist td {border:none;padding:0; }
	.pricelist .pSeatName {width:auto;}
	.pricelist .longName {display:none;}
	.pricelist .shortName {display:block;}
	.pricelist .pSeatPrice {width:auto;}
	.pricelist .pSeatBook {width:auto;}
	.pricelist .pSeatTickets {color:#c10; width:60px;}
	.pricelist .pSeatNext {display:table-cell; width:44px;}

	
	
	.sortable.mobileListHeader {display:table;border-bottom:1px solid #d1d1d1; }
	.sortable.mobileListHeader td {color:#000; padding:5px 0; margin:0; text-align:left; }
	.sortable.mobileListHeader td.cs2 {width:30%;}
	.sortable.mobileListHeader td.cs5 {display:none;}
	
	.sortable:not(.mobileListHeader) td {border-bottom:1px solid #d1d1d1; height:55px; padding:8px 0; margin:0;}
	.sortable:not(.mobileListHeader) td.cs2 {
		background:none;
		/*url("https://data.travelchinaguide.com/images/tcg/china-trains/v2015/icon_pull_down.png") no-repeat right 10px center; padding-right:10%;*/}
	.sortable:not(.mobileListHeader) .cs5 { width:auto; float:none; height:auto; clear:left; padding:0 8px; display:none;}
	.sortable:not(.mobileListHeader) tr.showCol td {background:#f2f2f2; border:none;}
	.sortable:not(.mobileListHeader) tr.showCol .cs5 {display:block; border-bottom:1px solid #d1d1d1;}
	
	.sortable:not(.mobileListHeader) .pricelist tr {display:table-row;}
	.sortable:not(.mobileListHeader) .pricelist td {height:auto; display:table-cell; float:none; padding:4px 0; }
	.sortable:not(.mobileListHeader) .pricelist td.pSeatNext {display:none;}
    
    .tsListDetails td {padding: 8px 4px !important; height: 19px !important; border-bottom:1px solid #d1d1d1;}
    .tsListDetails td.sn {width:auto;}
    .classShow {display:none;}
}
@media screen and (max-width: 425px) {
    .content {padding:0 8px !important;}
    .sortable td.cTrainNo .tdpb {padding-left:0px;}
    .sortable td.cTrainNo {width:26%;}
    .sortable .cs1, .sortable .cs2 {width:37%;}
}
@media screen and (max-width: 380px) {
    .listOpBox .listOpMenu .listOpMenuBody {padding-left:5px; }
    .sortable:not(.mobileListHeader) td {height:65px; line-height:1.4;}
}
