* {
    margin: 0;
    padding: 0;
    /*border: 0;*/
    background-color: transparent;
}
body#editor {
    /* min-width: 1650px; */
	text-align: left;
    font-size: 12px;
    font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'PingFang SC', 'Microsoft YaHei', 'Source Han Sans SC', 'Noto Sans CJK SC', 'WenQuanYi Micro Hei', sans-serif;
}
textarea {
	width: 100%;
	border: 0 none;
	overflow: auto;
	resize: none;
	outline: none;
}
a {
	color: #333;
	text-decoration: none;
	margin: 0;
	padding: 0;
	word-wrap: break-word;
	font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'PingFang SC', 'Microsoft YaHei', 'Source Han Sans SC', 'Noto Sans CJK SC', 'WenQuanYi Micro Hei', sans-serif;
}
ol, ul {
    list-style: none;
}

.fl { float: left; }
.fr { float: right; }
.clearfix::after { content: ""; display: block; clear: both; }

.text-center { text-align: center; }

img { vertical-align: middle; border: none; }

.try-content { position: relative; }

.content .textbox {	
	padding-left:5px;
	border:1px #d1d1d1 solid;
	background: url(inpbg.png) #fff no-repeat;
	overflow:hidden;	
}
.content .textbox div textarea {
	padding:5px 0;
	width:100%;
	background: url(inpbg.png) no-repeat -4px 0;
}
.content #code {
	left:25px;
	right:25px;
	height:99%;
}
.content #code textarea {
	height:430px;	
}
/* 头部 */
#try-header {
    width: 100%;
    height: 80px;
    border-bottom: 1px solid #CCC;
    background-color: #F5F5F5;
}
#header_index {
    width: 100%;
    min-width: 1129px;
    padding: 0 20px;
    height: 80px;
    line-height: 80px;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
}
#header-l {
    float: left;
}
#header_index .logo {
    float: left;
    height: 80px;
}
#header_index .logo img {
    display: block;
    width: 206px;
    height: 36px;
    margin: 22px 0;
}
/* ------- 新版头部侧边信息栏 ------- */
.h-right a { color: inherit; -webkit-transition: color .24s ease; transition: color .24s ease; }
.h-right a:hover { color: #fe6a00; }

/* 下拉菜单 */
.dropdown { position: absolute; top: 100%; right: 0; z-index: 99; overflow: hidden; background-color: transparent; transition: height 0.24s ease; }
.dropdown-inner { position: relative; margin: 12px 4px 4px; background-color: #fff; box-shadow: 0 1px 4px #aaa; border-radius: 4px; }
.dropdown-inner::before { content: ""; position: absolute; top: -6px; right: 50%; z-index: 1; width: 16px; height: 16px; background-color: #fff; box-shadow: -2px -2px 4px #ddd;
    -webkit-transform: translateX(50%) rotate(45deg);
       -moz-transform: translateX(50%) rotate(45deg);
        -ms-transform: translateX(50%) rotate(45deg);
            transform: translateX(50%) rotate(45deg);
}
.dropdown-content { position: relative; z-index: 2; overflow: hidden; background-color: #fff; border-radius: 4px; }

/* 头部右侧 */
.h-right { margin-top: 22px; font-size: 14px; line-height: 36px; }
.h-right .link { padding: 0 8px; }

.h-right .mobile { position: relative; margin-right: 24px; }
.h-right .mobile .link { display: block; }
.h-right .mobile .i-icon { margin-right: 3px; font-size: 22px; color: #fe6a00; }

.h-right .mobile .dropdown { width: 178px; height: 0; right: -48px; }
.h-right .mobile:hover .dropdown { height: 204px; }
.h-right .mobile .dropdown-content { padding: 0 10px; }
.h-right .mobile .dropdown-content .qrcode { margin: 8px 0 12px; }
.h-right .mobile .dropdown-content .qrcode > p { margin: 4px 0 0; padding: 0; font-size: 14px; line-height: 1; }


/* 登录后 */
.site-userInfo .i-icon { color: #777; }
.site-userInfo .notice .i-icon { font-size: 18px; }
.site-userInfo .notice .badge { margin-left: 4px; padding: 0 6px; font-size: 12px; line-height: 1; color: #fff; border-radius: 8px; background-color: #999; }
.site-userInfo .notice .badge.danger { background-color: #fe6a00; }

.site-userInfo .user { position: relative; cursor: pointer; }
.site-userInfo .user-avatar > .img { border-radius: 50%; }
.site-userInfo .user-vip { padding: 0; }

.site-userInfo .user .dropdown { width: 104px; height: 0; }
.site-userInfo .user:hover .dropdown { height: 144px; }
.site-userInfo .user .dropdown-content a { display: block; line-height: 32px; transition: background-color .24s ease, color .24s ease; }
.site-userInfo .user .dropdown-content .i-icon { margin-right: 6px; font-size: 14px; vertical-align: baseline; -webkit-transition: color .24s ease; transition: color .24s ease; }
.site-userInfo .user .dropdown-content a:hover { background-color: #f5f5f5; }
.site-userInfo .user .dropdown-content a:hover .i-icon { color: #fe6a00; }
/* 头部结束 */

/* 头部广告 */
.try-abox {float: left;width: 60%;height: 70px;margin: 5px 0 5px 15px;overflow: hidden;}
.try-abox img {display: inline-block; height: 100%;}

/* tryrun实例代码、运行结果 */
.container-fluid {
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    flex-direction: row;
    -webkit-box-align: center;
    align-items: flex-end;
    -webkit-box-pack: center;
    justify-content: center;
    width: 100%;
    padding: 24px 24px 36px;
    box-sizing: border-box;
    -webkit-box-pack: justify;
    justify-content: space-between;
}
.editor-box {
    width: 50%;
    padding-right: 12px;
    box-sizing: border-box;
}
.editor-wrap .top-con-text h1 {
    font-size: 22px;
    padding:0;
    margin:0;
    display:inline;
}

/* 手机端样式 */
@media screen and (max-width: 480px) {
    .editor-wrap .top-con-text h1 {
        font-size: 12px;
    }
}

.result-box {
    width: 50%;
    padding-left: 12px;
    box-sizing: border-box;
}
.text-wrap {
    width: 100%;
    position: relative;
}
.top-con {
    background-color: #fff;
    height: 60px;
    box-sizing: border-box;
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    flex-direction: row;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    -webkit-box-pack: justify;
    justify-content: space-between;
}
.top-con .top-con-text {
    margin-left: 10px;
}
.top-con .top-con-text span {
    font-size: 14px;
    color: #333;
    font-weight: 700;
}
.top-con .i-icon {
    padding-right: 5px;
}
.top-con .top-con-text .i-icon {
    font-size: 22px;
}
/* 手机端样式 */
@media screen and (max-width: 480px) {
    .top-con .top-con-text .i-icon {
        font-size: 12px;
    }
}
.top-con .top-con-text .i-icon-eye {
    font-size: 18px;
}
.top-con .top-con-text #sellang {
    margin-left: 12px;
    height: 26px;
    border-radius: 2px;
}
.top-con .top-con-btn .btn {
    display: inline-block;
    background-color: #fff;
    border: 1px solid #ccc;
    color: #333;
    border-radius: 4px; 
    padding: 6px 12px;
  	font-size: 14px;
  	margin: 0 0 0 5px;
  	text-align: center;
}
.top-con .top-con-btn .btn:hover {
    background-color:#ebebeb;
}
.top-con .top-con-btn .btn-run {
	background-color: #5cb85c;
    border-color:#4cae4c;
    color: #fff;
    transition: all 0.14s ease-out;
}
.top-con .top-con-btn .btn-run:hover {
    background-color:#47a447;
    border-color:#398439
}
.top-con .top-con-device .btn.active {
	background-color: #5bc0de;
    border-color: #46b8da;
    color: #fff;
}
.top-con .top-con-device .btn.active:hover {
    background-color:#39b3d7;
    border-color:#269abc;
}

.top-con .top-con-btn .input-btn {
    background: #fe6a00;
    color: #fff;
    padding: 8px 12px;
    border-radius: 4px;
    font-size: 14px;
    border: 1px solid #ccc;
    cursor: pointer;
    transition: all 0.14s ease-out;
}

.top-con .top-con-btn .input-btn:hover {
    background: #e66000;
}


.text-panel {
    width: 100%;
    height: 530px;
    overflow: auto;
    border: 1px solid #ddd;
    border-image: none;
    font: 14px "Courier New",Courier,monospace;  
}
#result-iframe {
    width: 100%;
    height: 100%;
}
#demotype.pc {
    box-sizing: border-box;
    overflow-x: hidden;
    background: rgba(0, 0, 0, 0);
    width: 100%;
    height: 100% !important;
    margin: 0 auto;
    padding: 5px;
}
#demotype.pad {
	background: rgba(0, 0, 0, 0) url("//7nsts.w3cschool.cn/img/tryrun_shouji.png") no-repeat scroll 44px 3px;
    height: 627px !important;
    margin: 40px auto;
    padding: 73px 17px 102px 61px;
    width: 490px;
}
#demotype.mobile {
	background: rgba(0, 0, 0, 0) url(//7n.w3cschool.cn/statics/images/tryrun-device.png) no-repeat scroll -650px -559px;
    height: 574px !important;
    margin: 40px auto 0;
    padding: 43px 15px 13px 12px;
    width: 280px;
}

.parameter-input-box {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #F8FAFC;
    border: 1px solid #f5f5f5;
    border-radius: 8px;
    box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.2);
    z-index: 9;
}

.parameter-input-box .parameter-input-head {
    padding: 15px;
}

.parameter-input-box .parameter-input-head i {
    float: right;
    font-size: 20px;
    color: #666666;
    cursor: pointer;
    transition: all 0.14s ease-out;
}

.parameter-input-box .parameter-input-head i:hover {
    color: #4d4d4d;
}

.parameter-input-box .parameter-input-body, .parameter-input-box .parameter-input-foot {
    text-align: center;
}

.parameter-input-box .parameter-input-body h3 {
    font-size: 20px;
    font-weight: 500;
    letter-spacing: 1px;
}

textarea::-webkit-scrollbar {
    background-color: transparent;
    width: 7px;
}

textarea::-webkit-scrollbar-thumb {
    background-color: #dadae4;
    border-radius: 8px;
}

.parameter-input-box .parameter-input-body textarea {
    border: 1px solid #ddd;
    border-radius: 8px;
    width: 80%;
    height: 15vw;
    margin: 20px auto;
    padding: 15px;
    font-size: 16px;
}

.parameter-input-box .parameter-input-body textarea:focus {
    border-color: #b5b5b5;
}

.parameter-input-box .parameter-input-foot {
    display: block;
    margin: 20px auto 40px;
    font-size: 16px;
    background: #597EF7;
    padding: 10px 25px;
    border-radius: 6px;
    color: #fff;
    border-color: transparent;
    cursor: pointer;
    transition: all 0.14s ease-out;
}

.parameter-input-box .parameter-input-foot:hover {
    background: #2455f4;
}

/* 自适应样式 */
@media (max-width:1024px) { 
    * {
        box-sizing: border-box;
        -webkit-tap-highlight-color: transparent;
        -webkit-touch-callout: none;
    } 
    html {
        font-size: 20px;
    }
    body {
        background-color: #fff;
    }
    /* 头部导航 */
    .play-bar-nav {
        display: block !important;
    }
    .aui-bar.play-bar-nav {
        position: fixed;
        top: 0;
        right: 0;
        left: 0;
        z-index: 10;
        width: 100%;
        min-height: 2.25rem;
        font-size: 0.9rem;
        text-align: center;
        display: table;
    }
    .aui-bar-nav.play-bar-nav {
        top: 0;
        line-height: 2.25rem;
        background-color: #ffffff;
        color: #212121;
    }
    .play-bar-nav .aui-pull-left {
        float: left;
        padding: 0 0.5rem;
        font-size: 0.8rem;
        font-weight: 400;
        z-index: 2;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        display: -webkit-box;
        display: -webkit-flex;
        display: flex;
        -webkit-align-items: center;
        align-items: center;
    }
    .play-bar-nav .aui-icon-left {
        display: inline-block;
        width: 1.0rem;
        height: 1.0rem;
        background-image: url("//7nsts.w3cschool.cn/images/w3cschool_mobile/prev.png");
        background-size: 100%;
        margin-top: 0.6rem;
    }
    .play-bar-nav .aui-title {
        min-height: 2.25rem;
        position: absolute;
        margin: 0;
        text-align: center;
        white-space: nowrap;
        right: 5rem;
        left: 5rem;
        width: auto;
        overflow: hidden;
        text-overflow: ellipsis;
        z-index: 2;
    }
    #try-header, .btnbar, #edittry, .top-con .top-con-device {
        display: none;
    }
    .container-fluid {
        display: block;
        margin-top: 2.25rem;
        padding: 0 0.75rem 1.75rem;
    }
    .editor-box,.result-box {
        width: 100%;
    }
    .editor-box {
        padding-right: 0;
    }
    .result-box {
        padding-left: 0;
    }
    .top-con .top-con-text {
        margin-left: 0;
    }
    .text-panel {
        height: 265px;
        -webkit-overflow-scrolling:touch;
        overflow:auto;
    }

}

@media (max-width: 767px) {
    .parameter-input-box {
        left: 8%;
        right: 8%;
        transform: translateY(-50%);
    }
    .parameter-input-box .parameter-input-head {
        padding: 10px;
    }
    .parameter-input-box .parameter-input-body h3 {
        font-size: 16px;
    }
    .parameter-input-box .parameter-input-body textarea {
        margin: 15px auto;
        height: 24vw;
        font-size: 12px;
    }
    .parameter-input-box .parameter-input-foot {
        margin: 5px auto 20px;
        font-size: 14px;
        padding: 8px 15px;
    }
}