/* CSS Document */
#page {margin:30px auto 100px;width:40%;min-width:800px;min-height:500px}
#page_content {margin-top:20px; margin-left:46px;}
#pageCaption {font-size:24px;font-weight:500;line-height:24px}
#pageDesc {color:#777;margin-top:5px;font-size:90%}

.exampleContainer {margin:-1px 0 50px}
.exampleContainer .exampleLive {padding:40px;font-size:14px}
.exampleContainer .exampleLive:after {content:'';clear:both;display:table}
.exampleContainer .exampleLive .exampleLiveTitle {border-left:5px solid #0084ff;margin:-20px -20px 20px;padding:10px 20px 10px 15px;font-size:20px;text-transform:uppercase}
.exampleContainer .exampleCode {background:#2b2f3b;padding:20px;overflow:auto}
.exampleContainer .exampleCode pre {line-height:0}
.exampleContainer .exampleCode code {white-space:pre-line}
.exampleContainer .exampleCode code * {font-family:consolas;font-size:13px}
.exampleContainer .exampleCode code > p {line-height:20px;color:#7993ad;display:inline-block}
.exampleContainer .exampleCode code .tab {padding-left:15px}
.exampleContainer .exampleCode code .tab2 {padding-left:30px}
.exampleContainer .exampleCode code .tab3 {padding-left:45px}
.exampleContainer .exampleCode code .tab4 {padding-left:60px}
.exampleContainer .exampleCode code .tag {color:#97e0e9}
.exampleContainer .exampleCode code .text {color:#fff}
.exampleContainer .exampleCode code .key {color:#bf5c5b}
.exampleContainer .exampleCode code .val {color:#fadf8c}
.exampleContainer .exampleCode code .var {color:#aae997}
.exampleContainer .exampleCode code .var2 {color:#b297e9}


/* btn */
.btn {display:inline-block;cursor:pointer;background:#fff;border:1px solid #bbb;height:34px;padding:6px 12px;font-size:14px;line-height:18px; text-transform:lowercase;}
.btn1 {display:inline-block;cursor:pointer;background:#fff;border:1px solid #bbb;height:20px;padding:6px 12px;font-size:14px;line-height:18px; text-transform:lowercase;}
.btn.btn-default {}
.btn.btn-default:hover {background:#eee;border-color:#bbb}
.btn.btn-default:focus {background:#ddd;border-color:#bbb}
.btn.btn-primary {background-color:#fff;border-color:#F3D066;color:#52575F; font-family:"Helvetica Neue",'Helvetica-Neue',sans-serif; border-radius:20px;}
.btn.btn-primary:hover {background-color:#52575F;border-color:#F3D066; color:#FFFFFF;}
.btn.btn-primary:focus {background-color:#52575F;border-color:#F3D066; color:#FFFFFF;}
.btn.btn-default[disabled] {background:#fafafa!important;border-color:#ccc!important;color:#aaa}
.btn.btn-primary[disabled] {background:#3F9DD0!important;border-color:#537FA9!important;color:#ACD3E8;box-shadow:none!important}

.btn.btn-left {float:left;margin:0 5px 0 0!important}


/* tabs */
.tabs_container {padding:10px 5px 0;border-bottom:1px solid #ddd}
.tabs_container:after {content:'';clear:both;display:table}
.tabs_container > .tab {float:left;line-height:40px;cursor:pointer;border-bottom:2px solid transparent;color:#555;margin:0 15px;margin-bottom:-1px;font-size:14px}
.tabs_container > .tab.active {border-color:#007ec4;color:#000}
.tabs_container > .tab:hover {color:#000}
.page_container {}
.page_container > .page {display:none}
.page_container > .page.active {display:block}


@media (max-width: 840px){
#page {width:auto;min-width:0;margin:20px 20px 100px}
}