* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
*:before, *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; font-family: OpenSans-Regular; font-size: 16px; line-height: 26px; }
body { position: relative; }
@font-face { font-family: OpenSans-Light; src: url(font/OpenSans-Light.eot); src: local("☺"), url(font/OpenSans-Light.eot?#iefix) format("embedded-opentype"), url(font/OpenSans-Light.woff) format("woff"), url(font/OpenSans-Light.ttf) format("truetype"), url(font/OpenSans-Light.svg#webfontOTINA1xY) format("svg"); font-weight: 400; font-style: normal }
@font-face { font-family: OpenSans-Regular; src: url(font/OpenSans-Regular.eot); src: local("☺"), url(font/OpenSans-Regular.eot?#iefix) format("embedded-opentype"), url(font/OpenSans-Regular.woff) format("woff"), url(font/OpenSans-Regular.ttf) format("truetype"), url(font/OpenSans-Regular.svg#webfontOTINA1xY) format("svg"); font-weight: 400; font-style: normal }
@font-face { font-family: OpenSans-Semibold; src: url(font/OpenSans-Semibold.eot); src: local("☺"), url(font/OpenSans-Semibold.eot?#iefix) format("embedded-opentype"), url(font/OpenSans-Semibold.woff) format("woff"), url(font/OpenSans-Semibold.ttf) format("truetype"), url(font/OpenSans-Semibold.svg#webfontOTINA1xY) format("svg"); font-weight: 400; font-style: normal }
@font-face { font-family: Oswald-Regular; src: local('☺'), url('../../../../assets/font-face/Oswald-Regular.ttf') format('truetype'); font-weight: normal; font-style: normal; }
@font-face { font-family: Oswald-Light; src: local('☺'), url('../../../../assets/font-face/Oswald-Light.ttf') format('truetype'); font-weight: normal; font-style: normal; }
.fontOswald { font-family: Oswald-Regular; }
.textUpperCase { text-transform: uppercase; }
a { text-decoration: none; background-color: transparent; }
a.bluelink { color: #50a8e1; }
a.bluelink:hover { color: #61c2ec; }
img { vertical-align: middle; border: 0; }
.d-btn { display: inline-block; padding: 0 25px; height: 38px; line-height: 32px; color: #fe8e14; font-family: OpenSans-Semibold; font-size: 14px; text-align: center; cursor: pointer; border: solid 2px #fe8e14; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; -o-border-radius: 3px; -webkit-transition: all .2s ease-in-out; -moz-transition: all .2s ease-in-out; -ms-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out; transition: all .2s ease-in-out; }
.d-btn:link, .d-btn:visited { color: #fe8e14; }
.d-btn:hover { color: #ffae38; border: solid 2px #ffae38; }
.d-btn.lgBtn { height: 46px; line-height: 40px; }
.d-btn.mdBtn { height: 42px; line-height: 36px; }
.d-btn.smBtn { height: 38px; line-height: 32px; }
.d-btn.brBlue { border-color: #50a8e1; background: none; color: #50a8e1; }
.d-btn.brBlue:hover { border-color: #5bbfff; color: #5bbfff; }
.d-btn.bgOrange { background: #fe8e14; color: #fff; }
.d-btn.bgOrange:hover { background: #ffae38; }
.d-btn.bgBlue { border-color: #50a8e1; background: #50a8e1; color: #fff; }
.d-btn.bgBlue:hover { border-color: #61c2ec; background: #61c2ec; }
.d-btn.bgGray { background: #f5f5f5; border-color: #ddd; color: #606060; }
.d-btn.bgGray:hover { background: #fff; }
.clearfix:after { content:''; display:block; clear:both;}
.fl { float:left;}
.fr { float:right;}
/*====================================== header ======================================*/
#wrapper { height: 100%; }
#masterHeader { height: 70px; line-height: 70px; font-family: Oswald-Regular; }
#masterHeader .container { width: 980px; margin: 0 auto; }
#masterHeader .container:after { display: block; content: ''; clear: both; }
#masterHeader .ct-lt { float: left; }
#masterHeader .ct-lt:after { content: ''; display: block; clear: both; } 
#masterHeader h1 { float: left; font-size: 30px; margin: 0; font-weight: normal; font-family: Oswald-Light; }
#masterHeader .ct-lt .desc, .detail .desc { display: inline-block; margin: 0 10px 0 0; font-size: 14px; line-height: 35px; color: #aaa; }
#masterLeftBarNav .detail .desc { margin-top: 15px; }
#masterHeader .ct-rt { float: right; }
#masterHeader .d-btn { width: 140px; margin-top: 14px; padding: 0; font-size: 16px; border-radius: 0; font-family: Oswald-Regular; text-transform: uppercase; }
#masterHeader .d-btn.sdk { line-height: 38px; }/*===================================== leftBar ======================================*/
#masterLeftBar { position: fixed; z-index: 15; left: 0; top: 0; width: 330px; min-height: 100%; box-sizing: border-box; font-size: 14px; background: #323234; border-right: 1px solid #323234; }
#masterLeftBar:before { display: block; content: ''; clear: both; }
#masterLeftBar.shrink:before { display: none; }
#masterLeftBar .masterLeftBar-top { height: auto; /*border-bottom: 1px solid #ddd;*/ }
#masterLeftBar .masterLeftBar-top .logo-ds { display: inline-block; margin: 0 8px 0 0; }
#masterLeftBar .masterLeftBar-top .logo-ds img { width: 175px; height: 43px; }
#masterLeftBar .masterLeftBar-top .narrow { display: none; padding: 22px 0 22px 10px; font-size: 16px; line-height: 24px; color: #ffffff; }
#masterLeftBar.shrink .masterLeftBar-top .narrow { display: block; }
#masterLeftBar.shrink .masterLeftBar-top .wide { display: none; }
#masterLeftBar .masterLeftBar-top .wide { padding: 22px 0 15px 27px; font-size: 18px; line-height: 26px; color: #ffffff; }
#masterLeftBar .masterLeftBar-top .wide div { margin-top: 5px; }
#masterLeftBar.shrink { width: 80px; }
#masterLeftBar.shrink a .name { display: none; }
#masterLeftBar.shrink .hover .name { display: inline-block; position: absolute; left: 79px; bottom: 0px; height: 70px; border: 1px solid #454545; border-left: none; background: #454545; color: #ffffff; }
#masterLeftBar.shrink .selected.hover .name { background: #454545; }
#masterLeftBarNav a { display: block; position: relative; height: 70px; text-decoration: none; }
#masterLeftBarNav a:hover { background: #454545; }
#masterLeftBarNav a:hover span.name { color: #fe8e14; }
#masterLeftBarNav .selected { background: #454545; }
#masterLeftBarNav .selected > a { pointer-events: none; }
#masterLeftBar.shrink .selected { }
#masterLeftBarNav a span { display: inline-block; }

#masterLeftBar #masterLeftBarNav a .icon { display: none; float: left; width: 78px; height: 30px; margin-top: 20px; background: url(icons/leftMenuIcon.png) no-repeat center 0px; }
#masterLeftBar.shrink #masterLeftBarNav a .icon { display: block; }
#masterLeftBar.shrink #masterLeftBarNav .selected .icon { background: url(icons/leftMenuIcon_hover.png) no-repeat center 0px; }
#masterLeftBar.shrink #masterLeftBarNav .demo2 .icon { background-position: center -45px; }
#masterLeftBar.shrink #masterLeftBarNav .demo3 .icon { background-position: center -40px; }
#masterLeftBar.shrink #masterLeftBarNav .demo4 .icon { background-position: center -120px; }
/*#masterLeftBarNav .demo5 .icon { background-position: center -235px; }*/
#masterLeftBar.shrink #masterLeftBarNav .demo6 .icon { background-position: center -80px }
#masterLeftBar.shrink #masterLeftBarNav .demo7 .icon { background-position: center -346px; }
#masterLeftBar.shrink #masterLeftBarNav .demo9 .icon { background-position: center -160px }
#masterLeftBarNav .demo8 { display: inline-block; margin: 20px 0 0 25px; height: auto; line-height: 26px; }
#masterLeftBar.shrink .demo8 { margin-left: 14px; }
/*#masterLeftBarNav .selected .demo1 .icon, #masterLeftBarNav .hover .demo1 .icon { background-position: center 0; }*/
#masterLeftBarNav .selected .demo2 .icon, #masterLeftBarNav .hover .demo2 .icon { background-position: center -465px; }
/*#masterLeftBarNav .selected .demo3 .icon, #masterLeftBarNav .hover .demo3 .icon { background-position: center -526px; }*/
/*#masterLeftBarNav .selected .demo4 .icon, #masterLeftBarNav .hover .demo4 .icon { background-position: center -586px; }*/
/*#masterLeftBarNav .selected .demo5 .icon, #masterLeftBarNav .hover .demo5 .icon { background-position: center -655px; }*/
/*#masterLeftBarNav .selected .demo6 .icon, #masterLeftBarNav .hover .demo6 .icon { background-position: center -706px; }*/
#masterLeftBarNav .selected .demo7 .icon, #masterLeftBarNav .hover .demo7 .icon { background-position: center -766px; }
#masterLeftBarNav a .name { float: left; width: 100%; color: #ffffff; text-align: left; font-size: 18px; font-family: 'Oswald-Regular'; padding-left: 27px; line-height: 26px; height: 70px; line-height: 70px; }
#masterLeftBarNav .selected a .name { margin-top: 30px; height: auto; width: 100%; line-height: inherit; }
#masterLeftBar.shrink #masterLeftBarNav a .name { width: 220px; font-size: 16px; height: 70px; line-height: 70px; margin-top: 0px; padding-left: 0; }
#masterLeftBarNav .selected .name { color: #fe8e14; }
#masterLeftBarNav .detail { display:none; position: relative; top: -5px; padding: 0 15px 15px 27px; color: #ffffff; line-height: 24px; }
#masterLeftBarNav .detail p { margin:0;}
#masterLeftBarNav .selected .detail { display:block;}
#masterLeftBarNav .detail .downloadCode, #masterHeader .ct-lt .downloadCode { display: inline-block; padding-left: 20px; margin-top: 10px; height: auto; background: url(icn-downloadLink-16x15.png) no-repeat center left; font-family: OpenSans-Semibold; }
#masterHeader .ct-lt .downloadCode { background: url(download_arrow.png) no-repeat center right; margin-top: 28px; height: auto; width: 160px;padding-left: 28px; line-height: 24px; font-size: 16px; color: #FE8E14; text-transform: uppercase; font-family: Oswald-Regular; }
#masterHeader .ct-lt .downloadCode i { display: none; }
#masterHeader .ct-lt .downloadCode:hover {background: url(download_arrow_hover.png) no-repeat center right;color: #ffae38;}
#masterLeftBar.shrink .detail { display: none; }
#masterLeftBar #masterLeftBarNav .leftBar-toggle { position: absolute; top: 72px; right: 20px; height: 22px; cursor: pointer; }
#masterLeftBar.shrink #masterLeftBarNav .leftBar-toggle { top: 36px; right: 5px; }
#masterLeftBarNav .leftBar-toggle:hover { background: #323234; }
#masterLeftBarNav .leftBar-menu { width: 80px; height: 50px; background: url(icon-menu-19x16.png) no-repeat 26px -184px; cursor: default; }
#masterLeftBar.shrink .leftBar-menu { background-position: 26px 16px; }
#masterLeftBar.shrink .leftBar-menu:hover { background-position: 26px -84px; cursor: pointer; }
#masterLeftBar .leftBar-right-arrow { display: none; width: 13px; height: 22px; background: url(icons/rightArrow.png) no-repeat; }
#masterLeftBar .leftBar-left-arrow { display: block; width: 13px; height: 22px; background: url(icons/leftArrow.png) no-repeat; }
#masterLeftBar.shrink .leftBar-right-arrow { display: block; }
#masterLeftBar.shrink .leftBar-left-arrow { display: none; }
#masterLeftBarNav .leftBar-close { float: right; margin-right: 10px; width: 40px; height: 50px; background: url(icon-left-11x17.png) no-repeat center 17px; cursor: pointer; }
#masterLeftBarNav .leftBar-close:hover { background-position: center -83px; }
#masterLeftBar.shrink .leftBar-close { display: none; }
#masterLeftBarNav .desc a {float: right; margin-left: 10px;height: 40px;}
/*=================================== main content ===================================*/
#masterContent { position: relative; padding: 0 0 75px; margin: 0 0 0 320px; min-height: 100%; min-width: 1010px; background: #E4E4E4; }
#masterContent.shrink { margin: 0 0 0 80px; }
#demoContent { padding: 28px 15px 0; }
/*====================================== footer ======================================*/
#masterFooter { width: 980px; height: 70px; line-height: 66px; margin: 0 auto; left: 0; right: 0; position: absolute; bottom: 0; font-size: 14px; color: #606060; }
#masterFooter a { text-decoration: none; color: #606060; }
#masterFooter a:hover { text-decoration: none; color: #999; }
#masterFooter img { vertical-align: middle; border-width: 0; }