﻿﻿/*reset*/
body{ font:12px/1 '微软雅黑', '黑体', tahoma, arial, 宋体b8b\4f53; background:#fff; margin:0; }
a{ color:inherit; text-decoration: none; }
h1, h2, h3, h4, h5, h6{ font-size: 100%; font-weight: normal; margin-top:0; margin-bottom: 0; }
p{ margin-top:0; margin-bottom:0; }
dl, ul, ol{ margin-top:0; margin-bottom:0; margin-left:0; padding-left:0; list-style:none; }
dd{ margin-left:0; }
img{ border:none; }
form{ margin:0; }
fieldset{ margin:0; padding:0; }
legend{ padding:0; *margin:0 -6px; }
label, button, input[type="submit"]{ cursor:pointer; }
label{ vertical-align: -3px; }
input, button, option, select{ font-size:12px; font-family: Tahoma, Arial; text-align: left; border:none; outline:none; margin:0; padding:0; vertical-align: middle; }
button, input[type="submit"]{ text-align: center; }
input[type="checkbox"]{ margin:0; }
input[type="radio"]{ margin:0; padding:0; }
select{ padding:0; }
option{ background:#fff; padding:0; }

/*common*/
.nodis, #level2 .desc, #myChannel .desc { display: none; }
.errorMsg, .waiting{ height:15px; line-height: 15px; margin:20px 0; }
.errorMsg{ color:red; }

/*components*/
html{ min-height: 650px; height: 100%; }
body{ min-height: 650px; height:100%; width:100%; background:#fafafa; position: relative; }

/*headerBar*/
.headerBar{ position: relative; color:#fff; font-family: '微软雅黑', '黑体', arial, tahoma, verdana, sans-serif; font-size:16px; background: url('../images/playback.jpg') 0 -200px repeat-x; 
margin-bottom:20px; height:48px; padding-bottom: 2px; z-index: 8; }
.header{ height:20px; width:100%; min-width:912px; max-width: 1282px; box-sizing:border-box; padding:0 65px; margin:0 auto; }
.logo{  line-height: 32px; height:31px;  margin:8px 0 7px 0; float: left; }
.logo a{background: url('../images/playback.jpg') -119px 1px no-repeat;padding-left:45px; display: block; color:#fff;}
.settings{ line-height: 20px; height: 20px; margin-top:18px; float:right; }
.set{ display: inline-block; vertical-align: top; margin-left:25px; position: relative; }
.set ul{ margin-top:10px; color:#2280bd; border:1px solid #2280bd; border-top-style:none; width:100px; padding:0 6px; background-color:#fff; position: absolute; font-size: 12px; display: none; }
.set li{ cursor: pointer; margin:5px 0; }
.set h4{ line-height: 24px; }
.username{ background: url('../images/playback.jpg') -122px -38px no-repeat; height: 21px; padding:0 0 0 32px; cursor:pointer; }
.tools{ padding:0 0 0 24px; height: 20px; background:url('../images/playback.jpg') -133px -69px no-repeat; cursor: pointer; }

/*content*/
.content{ background:#fff; width:100%; box-sizing:border-box; min-width:912px; max-width:1282px; height:100%; padding:20px 65px 40px 65px; margin:0 auto; border:1px solid #f3f3f3; overflow: hidden; position: absolute; left:0; z-index:1; }
#play.content{ padding:240px 0 40px 65px; }
#play.content .titleBar{ position: relative; margin-top:-220px; margin-right:65px; }
#sideBar.content{ background-color:#555; opacity: 0.6; display: none; z-index: 6; }
/*titleBar*/
.titleBar{ color:#6d6d6d; font-family: '微软雅黑', '黑体', arial, tahoma, verdana, sans-serif; line-height: 22px; height:22px; border-bottom:1px solid #e5e5e5; padding-bottom:5px; margin-bottom:25px; }
.state{ font-size:16px; float:left; }
.returnHome{ width:22px; height:22px; overflow: hidden; cursor:pointer; float:right; }
.returnHome{ background:url('../images/playback.jpg') -125px -130px no-repeat; line-height: 10em; }

/*contents*/
.contentContainer{ position:relative; width:100%; height:100%; min-width:912px; max-width: 1282px; box-sizing:border-box; margin:-70px auto 0 auto; padding-top:70px; overflow: hidden; }
.contentContainer2{margin:0 auto; width:100%; height:100%; min-width: 912px; max-width: 1282px; overflow: hidden; position: relative; box-sizing:border-box; top:-70px; padding-top:70px;}
.form{ width:420px; border-right:1px dotted #ccc; margin-right:60px; margin-bottom:65px; float:left; }
.form dt{ color:#818181; margin-top:8px; margin-bottom:8px; }
.form input[type="text"], .form input[type="password"]{ line-height: 21px; padding:2px; height:26px; width:311px; border-radius: 2px; border:1px solid #CCD1D5; }
.submit_btn{ color:#fff; background-color:#fff; background:url('../images/playback.jpg') 0 -130px no-repeat; line-height: 30px; height:30px; width:88px; margin-right:35px; display: inline-block; *display: inline; *zoom:1; }
input[type="checkbox"].autoLogin, .al_label{ line-height: 30px; vertical-align: middle; margin-right:5px; }
.validata{ color:#547AE7; }
#validata{ width:198px; margin-right: 20px; vertical-align: bottom; display: inline-block; }
.thirdPartLogin{ padding-top:8px; margin-left:480px; }
.thirdPartLogin dt{ margin-bottom:20px; line-height: 1.5; }
.thirdPartLogin dd{ background:url('../images/thirdpartlogin.jpg') 0 2px no-repeat; line-height: 20px; height:20px; padding-left:22px; float:left; width:48%; box-sizing:border-box; cursor: pointer; }
.thirdPartLogin dd.sina{ background-position: 0 -18px; }
.thirdPartLogin .linking{ color:red; background:none; padding-left:0; margin-top:10px; display: none; }

.account{ clear:both; }
.account a{ color:#64B5E9; }

	/*recommand*/
.recommands{ overflow: hidden; *zoom:1; height:450px; position: relative; top:20px;}
.recommand{ display: inline-block; height:195px; margin-right:1%; margin-bottom:30px; width:32%;}
.rec-content{ margin-top:144px; }
.recommand dd{ margin-top:-194px; }
.rec-title{ color:#444; font-weight: bold; line-height: 15px; width:244px; margin: 15px 0 10px 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor:pointer; }
.recommand img{ cursor: pointer; max-width: 100%; max-height: 141px;}
.rec-times{ margin-right:20px; }

	/*play*/
.buffer, .buffering, .playing{ height:18px; border-radius:4px; position: absolute; }
.bufferC{padding:0 0 0 274px; }
.buffer{ background-color:#EBEBEB; width:100%; margin-top:10px; position: relative; }
.buffering{ background-color:#ACB1B4; width: 100%;}
.playing{ background-color:#008DD1; }
.playControl{position: absolute; top:15px; left:110px;}
.modeControls{position: absolute; right:0; bottom:10px;}
.playControl li, .modeControls li{ float:left; margin-right:15px;}
.playControl li{width:40px; height:40px;  overflow:hidden;}
.modeControls li{height:24px;}
.playControl li a, .modeControls li a{display: block; background:url('../images/playcontrol.png') 0 0 no-repeat;cursor: pointer;}

.playControl li a{width:40px; height:40px;}
.playControl li.pause a{ background-position: -120px 0;}
.playControl li.pre, .playControl li.next{width:32px;}
.playControl li.pre a{ background-position: -40px 0; width:32px;}
.playControl li.next a{ background-position: -80px 0; width:32px;}
.playControl li a:hover{ background-position: 0px -40px;}
.playControl li.pause a:hover{ background-position: -120px -40px;}
.playControl li.pre a:hover{ background-position: -40px -40px;}
.playControl li.next a:hover{ background-position: -80px -40px;}

.modeControls li a{height:24px;}
.modeControls li{width:22px;}
.modeControls li#repeatControl{width:29px;}
.modeControls li.repeat a{background-position: -220px 0;}
.modeControls li.repeated a{background-position: -250px 0;}
.modeControls li.repeat a:hover{background-position: -220px -40px;}
.modeControls li.repeated a:hover{background-position: -250px -40px;}
#flashPlayer{ width:0; height:0; }


	/*sideNav*/
.sideNav{min-width:320px; width:320px; height:100%; border:1px solid #d3d3d3; border-right:none; position: absolute; margin-bottom:80px;left:-320px; padding-bottom:40px; padding-right:3px; z-index: 7; background:#fff url("../images/left-shadow.png") right 0 repeat-y; }
.contentContainer2 .sideNav{padding-bottom:60px;}
.sn-titleBar{ font-size: 16px; font-family: '微软雅黑', '黑体', arial, tahoma, verdana, sans-serif; margin:20px 0  25px 0; padding-bottom:10px; border-bottom:1px solid #E5E5E5; }
#level1 .sn-titleBar{margin:10px 40px; }
.list dl{ height:60px; }
.list dl dt, #subChannel dt{ font-family: '微软雅黑', '黑体', arial, tahoma, verdana, sans-serif; font-size:14px; }
.list dl dt a{ display: block; padding-left:30px; cursor: pointer; }
.list dl dd{ line-height: 1.2; color:#999; font-size:12px; margin:5px 20px 0 25px; }
#level1 .list dl{ height:auto; min-height: 42px; padding:5px 0 5px 58px; position: relative; margin-bottom:5px; overflow: hidden; }
#level1 .list dl:hover{ color:#fff; background-color:#2E9DE1; cursor: pointer; }
#level1 .list dl:hover dd{ color:#fff; }
.list dl dd.channelImg{position: absolute; top:5px; left:10px; margin:0; width: 68px; height:100%; text-align:right;}
.channelImg img{ width:48px; height:48px;}
#en .index0 img{margin-top:-8px;}
#en .index1 img{margin-top:-3px;}
#en .index2 img{margin-top:-6px;}
#en .index3 img{margin-top:-3px;}
#en .index4 img{margin-top:-3px;}
#en .index5 img{margin-top:-9px;}
#de .index0 img{margin-top:-8px;}
#de .index1 img{margin-top:-6px;}
#de .index2 img{margin-top:-3px;}
#de .index3 img{margin-top:-3px;}
#de .index4 img{margin-top:-10px;}
#de .index5 img{margin-top:-8px;}
#fr .index0 img{margin-top:-8px;}
#fr .index1 img{margin-top:-6px;}
#fr .index2 img{margin-top:-3px;}
#fr .index3 img{margin-top:-10px;}
#fr .index4 img{margin-top:-3px;}
#fr .index5 img{margin-top:-9px;}
#es .index0 img{margin-top:-8px;}
#es .index1 img{margin-top:-3px;}
#es .index2 img{margin-top:-9px;}
#es .index3 img{margin-top:-8px;}
#es .index4 img{margin-top:-3px;}
#es .index5 img{margin-top:-6px;}

#subChannel{ width:240px; position: absolute; margin:20px 40px 0 40px; padding-top:15px; border-top:1px solid #E5E5E5; bottom:160px; }
#subChannel dt{ display: inline-block; cursor: pointer; }
#subChannel dd{ margin-left:5px; text-align: center; width:18px; height:18px; line-height: 18px; display: inline-block; color:#ededed; background-color:#3FA7E3; border-radius: 3px; cursor: pointer; }


	/*level2*/
.navSub{ display: none; margin-top:-100px; padding-top:100px; }
.itemState{ text-align: center; position: absolute; bottom:170px; left:50%; margin-left:-71px; background-color: #fff;}
.recommands .itemState, #level1 .itemState, .article .itemState, .playInfo .itemState{ position: absolute; top:50%; left:50%; margin-left:-48px; margin-top:-22px; }
.playInfo .itemState{ z-index: 5; margin-top:-10px; }
.tipText { margin-top:5px; }
.itemMore{ padding:10px; width:10em; margin:0 auto; border:1px solid #ddd; border-radius: 5px; cursor: pointer; }
.navItem{ overflow-y:auto; }
.navSub .sn-titleBar{ margin-left:25px; margin-right:25px; }
.sn-titleBar h3{ padding-left:25px; cursor: pointer; }
.arrowRight, .arrowRightAside{ width:0; left:0; border:12px dashed transparent; border-right:12px solid #C9C9C9; vertical-align:middle; overflow: hidden; position: absolute; left:15px; top:17px; }
.arrowRightAside{ border-right-color: #fff; left:21px; }
.special{ color:#788087; position: relative; height:58px; cursor: pointer; }
.special:hover .sp-title.cur,.special:hover{ color:#fff; background-color:#2E9DE1; }
.sp-title{ line-height: 1.2em; width:190px; margin-right:25px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; position: absolute; top:5px; left:105px; }
.sp-title.cur{color:#2E9DE1;}
.sp-image{ position: absolute; top:5px; left:20px; }
.sp-image img{ width:68px; height:48px; }
.isvip1{ position: absolute; width:30px; height:30px; top:0; right:0; background:url('../images/channel_list_vip.png') 0 0  no-repeat; }
.isvip1.vip{ background-position: 0 -30px; }
.sp-relative{position: absolute; width:100%; height:12px; bottom:5px; }
.channel-relative{width:100%; height:12px;}
.spr-times, .spr-date, .rec-times, .rec-date{ background:url('../images/playback.jpg') -138px -160px no-repeat; padding-left:16px; display: inline-block; *display: inline; *zoom:1; }
.spr-times{position: absolute; left:105px;}
.spr-date{position: absolute; right:2px;}
.channel-relative .spr-times{left:0;}
.channel-relative .spr-date{right:165px;}
.spr-date, .rec-date{ background-position: -138px -180px; margin-left:15px; }

#click-more{ color:#788087; text-align: center; margin:20px; padding:8px 0; border-radius: 4px; cursor:pointer; }
#click-more:hover{ color:#6D6D6D; }

	/*slideWidget*/
.slideWidget{ background:url('../images/channel_list_vip.png') -30px 0 no-repeat; width:14px; height:92px; position: absolute; top:50%; margin-top:-116px; right:-12px; cursor:pointer; }
.slideOut, .slideIn{ width: 0; height: 0; border: 4px dashed transparent; vertical-align: middle; overflow: hidden; position: absolute; top:50%; margin-top:-4px; left:50%; margin-left:-2px; }
.slideOut { border-left: 4px solid #2E9DE1; }
.slideIn { border-right: 4px solid #2E9DE1; margin-left: -6px; }
.slideWidget:hover .slideOut{ border-left-color:#FFA957; }
.slideWidget:hover .slideIn { border-right-color: #ffa957; }
#slidetip{position: absolute; left:330px; top:50%; padding:5px; background-color: #fff8cc; width:170px; height: 55px; border-radius: 3px;
font-size: 12px; color:#333; line-height: 1.4; margin-top:-20px; display: none;}
#slidetip .slideIn, #slidetip .slideOut{position: absolute; left:50%; top:50%;}
#slidetip a{text-align: right; display: block; text-decoration: underline; cursor: pointer; color:#2280BD; margin:5px;}
#slidetip .hold{border:1px solid #eee; background-color:#fff; width:10px; height: 10px; display: inline-block; margin:0 2px -2px 2px; position: relative;
border-radius: 2px;}

/*article*/
.article{ height:100%; position: relative; overflow: hidden; }
.playTip{ background-color:#2280BD; color:#fff; padding:3px 10px; line-height: 18px; border-radius: 5px; display: none; position: absolute; left:210px; }
.contentInfo{ width:280px; float:left; display: none; margin-right:10px; height:100%;}
.sentence{ cursor:pointer; padding:1px; }
.high_light{ color:#fff; background-color:#2280BD; }
.sentence:hover{ background-color:#eee; border-radius:3px; padding:1px; }
.sentence.high_light:hover{ background-color:#2280bd; }
.playInfo{background-color: #76ac34; border-top: 1px solid #fff; color: #fff; height: 71px; width:100%; display: none; position: fixed; bottom:20px; z-index: 4;}
.playContent{display: none; overflow: hidden; position: relative; height:70px; margin:0 65px; padding:0 80px 0 0;}
.contentImg{height:135px; margin-bottom: 20px;}
.title{ color:#525252; font-weight: bold; font-size:18px; line-height: 20px; margin-bottom:12px; }
.channelInfo{ min-height:40px; margin:-20px 0 6px 0; padding:0 30px 30px 20px;border-bottom:1px solid #ccc; position: relative; }
.channelInfo .title{ margin-bottom:6px; }
.channelInfo .desc{line-height: 1.5; overflow: hidden; height:55px;}
.channelInfo ul{ margin:6px 0 0 0; position: absolute; bottom:10px; }
#subControl{ text-align: center; width:5.5em; height:20px; line-height: 20px; position: absolute; bottom:5px; right:20px; cursor:pointer; border:1px solid #ccc; border-radius: 3px; }
#subControl.sub{ color:#788087; background-color:#fff; }
#subControl.subed{ color:#fff; background-color:#2E9DE1; }
.dateTime{ color:#999; }
.contents{ color:#6d6d6d; font-size:16px; line-height: 1.5;height:100%; display: none; }
.wrap{ position: relative; min-width: 490px; padding-right:60px; margin-right:5px; height: 100%; overflow-y: auto; }
.copyright{text-align: right;}
.contents p{ margin-bottom:0.5em; }
.content p.chinese{ color:#a0a0a0; }
.arrow{ position: relative; left:-15px; top:4px; }
.arrSide, .arrRight { width: 0; left: 0; border: 8px dashed transparent; border-left: 8px solid #fff; vertical-align: middle; overflow: hidden; position: absolute; left: 16px; }
.arrSide { border-left-color: #a0a0a0; left: 20px; }

.playImg{height:46px; position: absolute; top:50%; left:0; margin-top:-23px; border-radius: 2px;}
.playInfo .title{color: #fff; font-size: 14px; line-height: 14px; margin-top: 16px; height: 14px; padding: 0 0 0 274px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}

body{*position:relative;}
.contentContainer, .content, .playInfo{min-width:760px;}
.wrap{min-width:330px;}
.headerBar{position: absolute; width:100%; *left:0; *overflow: hidden;}
.contentContainer{margin:0 auto; *position:relative;}
#play.content .titleBar{*margin-right:130px;}
.contentInfo{*display: inline;}.content{*margin-top:-30px;}
.playControl li{*display:inline;}
.contentInfo{*position:relative;}
.softWare a{background:none;}
.contentInfo, .contents, .playInfo{display: block;}
.playInfo{position: absolute;}
.itemState{display: none;}
.high_light{color:#058cf5; background-color:#fff;}
.sentence.high_light:hover{background-color:#fff;}
@-moz-document url-prefix(){
	.titleBar{margin-right:130px !important;}

}

@media screen and (-webkit-min-device-pixel-ratio:0)
{
	
}
.artical-info{display: none;}
.softWare{position: absolute;font-size:14px; bottom:0;}
.softWare .link{display: block; width:250px; height: 125px; position: absolute; left: 0; bottom:0; z-index: 5;}
.softWare dd{float:left;  margin:10px 45px 10px 0; }
.softWare dd .img{background:url('../images/version.gif') 10px 0 no-repeat; 
width:80px; height:40px; display: block; margin:0 0 10px 0;}
.softWare dd.phone .img{background-position: -90px 0;}

.modeControls li{margin-right:0;}
.duration{position: absolute; bottom:14px; right:35px;}
.bufferC{padding:0 35px 0 274px !important;}





@media screen and (max-width:768px){
html,body{
	min-height:100%;
	}
.contentContainer, .content, .playInfo {
    min-width: auto;
	bottom:0;
	position: fixed;
}
.header{
	min-width:auto;
	}
.headerBar {
    /position:fixed;
    width: 100%;
}
.playContent {
    display: none;
    overflow: hidden;
    position: relative;
    height: 70px;
    margin: 0 0;
    padding: 0 0 0 0;
}
.playControl {
    position: absolute;
    top: 15px;
    left: 10px;
}
.playInfo .title {
    color: #fff;
    font-size: 14px;
    line-height: 14px;
    margin-top: 16px;
    height: 14px;
    padding: 0 0 0 166px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: normal;
}
.bufferC {
    padding: 0 35px 0 164px !important;
}
.modeControls {
    position: absolute;
    right: 5px;
    bottom: 6px;
}
.duration {
    position: absolute;
    bottom: 12px;
    right: 45px;
	font-size:12px;
}
.buffer, .buffering, .playing {
    height: 20px;
	line-height:20px;
}
#play.content{
	padding:0;
	position: relative;
	}
.contentInfo{
	height: auto;
    width: 100%;
    margin: 0;
    box-shadow: 0 0 12px #ccc4c4;
    position: relative;
    z-index: 9999999999;
    border-bottom: #f3f3f3 1px solid;
	display:none;
	}
.contentInfo .title{
    line-height: 36px;
    margin: 0;
    height: 36px;
    overflow: hidden;
    border-bottom: #e5e5e5 1px solid;
    background-color: #fdfdfd;
	font-weight: normal;
    padding: 0 10px;
	}
.softWare{
    position: fixed !important;
    bottom: 77px;
    width: 100%;
	display:none;
	}
.softWare p{
	line-height:32px;
	overflow:hidden;
	margin: 0 5px;
	}
.softWare .link{
	width:100% !important;
	}
.softWare dl{
    padding: 5px 0;
    background-color: #f5f5f5;
    border: #f1f1f1 1px solid;
    border-radius: 4px;
    margin: 5px 5px;
    font-size: 12px;
	}
.softWare dt{
	display:inline-block;
	width:33.333333%;
	text-align:center;
	}
.softWare dd{
	margin:0 !important;
	width:33.333333%;
	text-align:center;
	}
.softWare dd .img{
	display:none !important;
	}
#play.content .titleBar{
    margin: 0;
    border-bottom: #f5f5f5 1px dotted;
    background-color: #fdfdfd;
    padding: 0 10px;
	}
.wrap{
	padding:0 10px;
	}
.contentInfo, .contents, .playInfo {
    display: inline-block;
    width: 100%;
}
.contents {
    color: #6d6d6d;
    font-size: 16px;
    line-height: 1.5;
    height: 100%;
}
.contentContainer {
    bottom: 0;
    position: relative;
    height: calc( 100% - 80px);
}
	
	}
	