@charset "utf-8";

/* CSS Document */
html {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    /* Firefox */
    -webkit-box-sizing: border-box;
    /* Safari */
}

body {
    margin: 0;
    padding: 0;
    font-size: 12px;
    /* [disabled]line-height:1.6em;
*/
    font-family: Verdana, 'Segoe UI', Arial, Tahoma, Helvetica, sans-serif;
    color: #052840;
    background: url(/images/home/header-background.png) repeat-x center top #fff;
    height: 100%;
    width: 100%;
}

html,
body,
ul,
ol,
li,
dl,
dt,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
form,
p,
blockquote,
fieldset,
img {
    margin: 0px;
    padding: 0px;
    -webkit-text-size-adjust: none;
}

html {
    -webkit-text-size-adjust: none;
}

ul,
ul li,
dl,
dt,
dd {
    list-style: none;
}

ol {
    list-style-type: decimal;
    list-style-position: inside;
}

input,
select,
option {
    font-family: Verdana, 'Segoe UI', Arial, Tahoma, Helvetica, sans-serif;
    font-size: 12px;
    margin: 0;
}

img {
    border: 0px;
    vertical-align: middle;
    max-width: 100%;
}

a,
a:link {
    color: #0552BE;
    text-decoration: none;
    word-wrap: break-word
}

a:visited: {
    color: #ff0;
}

a:hover {
    color: #007fff;
    text-decoration: underline;
}

a:active {
    color: #007fff;
    text-decoration: underline;
}

a,
area {
    blr: expression(this.onFocus=this.blur())
}

/* for IE */
:focus {
    -moz-outline-style: none;
}

/* for Firefox */
.clear {
    clear: both;
}

.tc {
    text-align: center;
}

.tr {
    text-align: right;
}

.tl {
    text-align: left;
}

/*==== Share ====*/
.clear,
.clearer {
    clear: both;
}

.clearFix {
    clear: both;
    font-size: 0;
    height: 0;
    line-height: 0;
}

@media only screen and (max-width: 768px) {
    .crumb {
        display: none !important;
    }
}

.crumb-content {
    max-width: 1440px;
    margin: 0 auto;
}

.crumb {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    /* Firefox */
    -webkit-box-sizing: border-box;
    /* Safari */
    width: 100%;
    margin: 5px auto;
    padding: 5px 5px 10px 24px;
    font-family: Verdana, 'Segoe UI', Arial, Tahoma, Helvetica, sans-serif;
    max-width: 1440px;
    line-height: 1.5;
	border-bottom: 1px solid #eee;
}

.crumb span {
    display: inline-block;
    background: url(/images/style/crumb_jt.png) no-repeat;
    width: 6px;
    height: 12px;
    margin: 5px 5px -2px;
}

.crumb a {
    color: #3e4e57;
    text-decoration: none;
    font-weight: bold;
}

.crumb a:hover {
    color: #007fff;
    text-decoration: underline;
}

.crumb strong {
    font-weight: normal;
}

.crumb h1 {
    font-size: 12px;
    display: inline;
    font-weight: normal;
}

del {
    color: #8F8F8F;
    font-size: 12px;
}

.fl {
    float: left;
}

.fr {
    float: right;
}

.ar {
    text-align: right;
}

.line {
    border-bottom: dashed 1px #ccc;
    height: 20px;
    margin-bottom: 20px;
}

.line2 {
    border-bottom: dashed 1px #ccc;
}

.mt15 {
    margin-top: 15px !important;
}

/*==== end Share ====*/
/*btn*/
.btn_a {
    background: url(/images/style/li_dot.png) no-repeat right -104px;
    _background: url(/images/style/li_dot.png) no-repeat right -102px;
    padding: 0 8px 0 0;
}

.btn_aTrial {
    background: url(/images/style/icon_down.png) no-repeat right 4px;
    _background: url(/images/style/icon_down.png) no-repeat right 7px;
    padding: 0 12px 0 0;
}

a.btn_trial {
    width: 65px;
    height: 25px;
    background-position: 0 -80px;
    padding: 0 0 0 35px;
    line-height: 24px;
    color: #fff;
    text-decoration: none;
}

a.btn_trial:hover {
    background-position: -160px -80px;
    text-decoration: none;
    color: #fff;
}

a.btn_buy {
    width: 65px;
    height: 25px;
    background-position: 0 -120px;
    padding: 0 0 0 35px;
    line-height: 24px;
    color: #fff;
    text-decoration: none;
}

a.btn_buy:hover {
    background-position: -160px -120px;
    text-decoration: none;
    color: #fff;
}

a.btn_trial2 {
    width: 70px;
    height: 22px;
    line-height: 18px;
    background-position: 0 -200px;
    text-align: center;
    color: #fff;
    text-decoration: none;
}

a.btn_trial2:hover {
    background-position: -160px -200px;
    text-decoration: none;
    color: #fff;
}

a.btn_buy2 {
    width: 70px;
    height: 22px;
    line-height: 18px;
    background-position: 0 -240px;
    text-align: center;
    color: #fff;
    text-decoration: none;
}

a.btn_buy2:hover {
    background-position: -160px -240px;
    text-decoration: none;
    color: #fff;
}

a.btn_add {
    width: 70px;
    height: 22px;
    line-height: 16px;
    background-position: 0 -280px;
    text-align: center;
    color: #fff;
    text-decoration: none;
}

a.btn_add:hover {
    background-position: -160px -280px;
    text-decoration: none;
    color: #fff;
}

/*header*/
#logo span,
.language_btn .us,
.language_btn .language_list,
.top_nav,
.top_nav .nav_r,
.top_nav span,
.top_nav .cart,
.top_nav .newsletter,
.livechat,
.header_right .download {
    background: url(/images/style/header_img.png) no-repeat;
}

#header {
    width: 966px;
    margin: 0 auto;
    height: 86px;
}

#logo {
    float: left;
    height: 50px;
    padding: 16px 0 0 10px;
    width: 180px;
}

#logo a {
    float: left;
    display: block;
    background: url(/images/style/aolor-logo.png) no-repeat;
    width: 180px;
    height: 50px;
    text-indent: -9999px;
    overflow: hidden;
}

#slogan {
    float: left;
    line-height: 16px;
    text-align: left;
    padding-top: 34px;
    color: #3e4e57;
    font-size: 12px;
    background: none;
    width: 400px;
    margin-left: 4px;
}

/*.language_btn {height:30px; width:126px; position:relative; float:left; cursor:pointer; line-height:14px;  color:#3e4e57;}
.language_btn .us{background-position:2px -80px; z-index:15; width:95px; height:18px; padding:3px 0 0 33px;position:absolute; left:0; top:0;}
.language_btn .language_list {visibility:hidden;position:absolute; left:0; top:20px; width:126px; height:110px;  background-position: -160px -80px; padding-top:14px; z-index:14; font-size:11px;}
.language_btn .language_list p a{ padding-left:14px;}
.language_btn .language_list a { display:block; padding:0 0 2px 31px; height:16px;text-decoration:none; color:#3e4e57;}
.language_btn .language_list a:hover {text-decoration:underline; color:#3e4e57;}
.language_btn:hover div{visibility:visible;}*/



/*.showlist{visibility:hidden;position:absolute;background:#3e4e57;border:1px solid #434343;width:275px;z-index:99;right:-5px;top:18px;padding:10px;}
.showlist dt{color:#fff;font-weight:bold;padding:0 0 5px 0;}
.showlist dd{color:#999; font-size:12px;}
.showlist .k1{background:url(/images/style/icon6.png) no-repeat 0 3px;padding:0 0 20px 30px;border-bottom:1px dashed #ccc;}
.showlist .k2{background:url(/images/style/icon5.png) no-repeat 0 13px;padding:10px 0 0 30px;}
.showlist dd a{color:#85AA10;font-size:12px;}
.showlist dd a:hover{color:#85AA10;}
.livechat{position:relative; width:68px; float:left; background-position:-517px -57px; padding:1px 0 0 22px; cursor:pointer;}
.livechat img{ padding-bottom:2px;}
.livechat:hover div{visibility:visible;}
.top_nav .showlist .k1 span{ text-indent:0; background:none; width:245px;}*/



#searchposition {
    width: 148px;
    float: right;
    margin-right: 5px;
}

#search {
    float: right;
    background: url(/images/style/header_img.png) no-repeat 0 0;
    width: 148px;
    height: 21px;
    padding: 0;
    margin: 7px 10px 0 0;
}

#search .searchInput {
    float: left;
    width: 113px;
    _width: 113px;
    border: none;
    color: #000000;
    padding: 3px 0 0 8px;
    background-color: #ffffff;
    margin-left: 5px;
}

#search .searchr {
    background: url(/images/style/searchBtn.png) no-repeat 0 -1px;
    width: 21px;
    height: 21px;
    border: none;
}

#search .searchr:hover {
    cursor: pointer;
}

/*
input.gsc-input{ float:left; width:113px; _width:113px; border:none; color:#fff; padding:4px 0 0 8px; background-color:#3D4E56;}
input.gsc-search-button{margin-left:0 !important;}
#searchbutton, .searchbutton, .cse input.gsc-search-button, input.gsc-search-button{background:url(/images/style/searchBtn.png) no-repeat; width:21px; height:21px; border:none !important; text-indent:-1000px; background-color:transparent !important;}
form.gsc-search-box{float:right;}
#post-45206 .gsc-search-box, .gsc-clear-button{ display:none !important; }*/


/*new-nav*/

#mainHeader {
    width: 100%;
    z-index: 8;
    position: relative;
    margin: 0 auto;
}

#mainHeader ul,
#mainHeader li {
    position: relative;
    margin: 0;
    padding: 0;
    list-style: none;
    z-index: 9;
    margin: 0 auto;
}

#headerBottom {
    border-top: 1px solid #4f4f4f;
    border-bottom: 1px solid #000;
    position: relative;
    height: 34px;
    background: #2c2c2c;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #3c3c3c), to(#1d1d1d));
    background: linear-gradient(top, #3c3c3c 0, #1d1d1d 100%);
    background: -moz-linear-gradient(top, #3c3c3c 0, #1d1d1d 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #3c3c3c), color-stop(100%, #1d1d1d));
}

#nav_search {
    width: 960px;
    margin: 0 auto;
}

#navmenu {
    position: relative;
    font-size: 14px;
    font-family: Verdana, 'Segoe UI', Arial, Tahoma, Helvetica, sans-serif;
}

#navmenu li {
    display: block;
    position: relative;
    float: left;
    border-top: 0;
    border-left: 1px solid #454545;
    border-bottom: 0;
    border-right: 1px solid #151515;
    xheight: 18px;
}

#navmenu li a {
    text-shadow: 1px 1px 1px black;
    display: block;
    padding: 8px 18px;
    color: #fff;
    text-decoration: none;
    white-space: nowrap;
}

#navmenu li a:hover {
    padding-top: 5px;
    border-top: 3px solid #007fff;
    color: #007fff;
}

.downArrow {
    display: block;
    border-color: #fff transparent transparent transparent;
    border-style: solid;
    border-width: 3px;
    height: 0;
    width: 0;
    position: absolute;
    top: 16px;
    right: 8px;
    _border: none;
}

#navmenu div {
    position: absolute;
    visibility: hidden;
    padding: 0;
    margin-left: -1px;
    margin-top: 0;
    background: #313131;
    border: 1px solid #222;
    width: 230px;
}

#navmenudiv a {
    position: relative;
    display: block;
    margin: 0;
    padding: 8px 10px;
    border-bottom: 1px solid #fff;
    width: auto;
    white-space: nowrap;
    text-align: left;
    text-decoration: none;
    background: #666;
    color: #fff;
}

#navmenu div a:hover {
    background: #222;
    border-top: none;
    border-left: 3px solid #007fff;
    color: #007fff;
    padding: 8px 10px;
}

.totop {
    text-align: right;
    padding: 3px 10px 0 0;
    width: 100%;
    margin: 0 auto;
}

#main3 {
    background: #fff;
    width: 100%;
	max-width: 960px;
    margin: 0 auto;
}

@media screen and (min-width: 1440px) {
    #main3 h1 {
        max-width: 1440px;
        margin: 0 auto;
    }
}

#main3 h1 {
    border-bottom: 1px solid #e7e7e7;
    font-size: 24px;
    font-size: 1.5rem;
    font-weight: bold;
    line-height: 1.2;
    padding: 10px 0 10px 24px;
}

#content3 {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    color: #333;
    position: relative;
    font-size: 14px;
    line-height: 1.5;
    padding: 10px 0 20px 30px;
}

@media screen and (max-width:640px) {
    #content3 {
        padding: 10px 8px 20px 8px;
    }

    #main3 h1 {
        padding: 14px 8px 10px 8px;
    }
}

@media screen and (min-width:641px) and (max-width:959px) {
    #content3 {
        padding: 10px 12px 20px 12px;
    }

    #main3 h1 {
        padding: 14px 12px 10px 12px;
    }
}

@media screen and (min-width:960px) {
    #content3 {
        padding: 10px 24px 20px 24px;
    }

    #main3 h1 {
        padding: 14px 24px 10px 24px;
    }
}

#content3 p {
    padding: 5px 0;
}

#content3 .bottomline {
    border-bottom: 1px dashed #CCCCCC;
    padding: 15px 0;
}

/*sidebar*/
@media screen and (max-width: 768px) {
    #sidebarguide {
        margin-right: -12px;
        margin-left: -12px;
    }
}

@media screen and (min-width: 769px) {
    #sidebarguide {
        margin-right: -30px;
        margin-left: -30px;
    }
}

.userguideslist {
    padding: 12px 16px;
}

.userguideslist li {
    background: url(/images/style/pagesign.png) left 4px no-repeat;
    padding: 0px 0px 4px 19px;
}

.userguideslist li a {
    color: #0046a8;
    font-size: 13px;
}

@media only screen and (max-width: 639px) {
    .drcoupon {
        float: none;
        width: 100%;
    }
}

@media only screen and (min-width: 640px) and (max-width: 1440px) {
    .drcoupon {
        float: left;
        width: 50%;
    }
}

.drcoupon {
    max-width: 1440px;
}

.userarticlestitle {
    max-width: 1440px;
    background: url(/images/style/userarticlestitle.png) top left repeat-x;
    height: 34px;
    border-top: 1px solid #f0f0f0;
}

.userarticlestitle h3 {
    line-height: 33px;
    font-size: 14px;
    padding-left: 16px;
    font-weight: bold;
    color: #575757;
    font-family: Verdana, 'Segoe UI', Arial, Tahoma, Helvetica, sans-serif;
}

.userarticlestitle h3 a,
.otherfiletitle h3.windows a,
.otherfiletitle h3.mac a,
.otherfiletitle h3.solution a {
    color: #575757;
}

.userarticlestitle h3 a:hover,
.otherfiletitle h3.windows a:hover,
.otherfiletitle h3.mac a:hover,
.otherfiletitle h3.solution a:hover {
    color: #007fff;
}

.userarticlestitle h3.mac,
.otherfiletitle h3.mac {
    background: url(/images/style/icon-mac-sidebar.png) 10px center no-repeat;
    padding-left: 34px
}

.userarticlestitle h3.windows,
.otherfiletitle h3.windows {
    background: url(/images/style/icon-win-sidebar.png) 10px center no-repeat;
    padding-left: 34px
}

.userarticlestitle h3.solution,
.otherfiletitle h3.solution {
    background: url(/images/style/solution.png) 10px center no-repeat;
    padding-left: 34px
}

.userarticlestitle h3.coupon,
.otherfiletitle h3.coupon {
    background: url(/images/style/coupon.png) 24px 6px no-repeat;
    padding-left: 48px
}

#contentguide {
    width: 656px;
    margin: 12px 25px;
    float: left;
}

#contentguide p,
#contentguide ul {
    margin: 12px 0px;
}

#contentguide ul li {
    background: url(/images/style/dotted.gif) left 9px no-repeat;
    padding: 0px 0px 4px 9px;
}

#contentguide h2 {
    color: #153980;
    font-size: 16px;
    font-weight: bold;
}

#contentguide h3 {
    color: #153980;
    font-size: 14px;
    font-weight: bold;
}

#contentguide h4 {
    color: #153980;
    font-size: 14px;
    font-weight: bold;
}

#contentguide a {
    color: #153980;
}

#contentguide span {
    color: #f00a0a;
}

/* float fix */

#sidebarpromac:after,
#sidebarpromac ul:after,
#sidebarprowin:after,
#sidebarprowin ul:after,
#sidebarprosolution:after,
#sidebarprosolution ul:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

#sidebarpromac,
#sidebarpromac ul,
#sidebarprowin,
#sidebarprowin ul,
#sidebarprosolution,
#sidebarprosolution ul {
    display: block;
}

/*  \*/

#sidebarpromac,
#sidebarpromac ul,
#sidebarprowin,
#sidebarprowin ul,
#sidebarprosolution,
#sidebarprosolution ul {
    min-height: 1%;
}

* html #sidebarpromac,
* html #sidebarpromac ul,
* html #sidebarprowin,
* html #sidebarprowin ul,
* html #sidebarprosolution,
* html #sidebarprosolution ul {
    height: 1%;
}

/*  */

#sidebarpromac ul,
#sidebarprowin ul,
#sidebarprosolution ul {
    display: none;
}

.uppercase {
    text-transform: uppercase
}

/* sidebar pro list
---------------------------------------------- */

#sidebarpromac,
#sidebarprowin,
#sidebarprosolution {
    padding: 12px 13px;
}

#sidebarpromac li,
#sidebarprowin li,
#sidebarprosolution li {
    line-height: 20px;
    margin-top: 1px;
    position: relative;
    width: 100%;
}

#sidebarpromac li a,
#sidebarprowin li a,
#sidebarprosolution li a {
    font-size: 12px;
    color: #444444;
    font-weight: bold;
    padding-left: 22px;
}

#sidebarpromac li li a,
#sidebarprowin li li a,
#sidebarprosolution li li a {
    font-weight: normal;
    padding-left: 13px;
    display: block;
}

#sidebarpromac li a:hover,
#sidebarprowin li a:hover,
#sidebarprosolution li a:hover,
#sidebarpromac li li a:hover,
#sidebarprowin li li a:hover,
#sidebarprosolution li li a:hover {
    color: #007fff;
}

/* IE leaves a blank space where span is added so this is to avoid that */

* html #sidebarpromac li,
* html #sidebarprowin li,
* html #sidebarprosolution li {
    float: left;
    display: inline;
}

#sidebarpromac li span,
#sidebarprowin li span,
#sidebarprosolution li span {
    float: left;
    position: absolute;
    top: 5px;
    left: 5px;
    width: 13px;
    height: 13px;
    cursor: auto;
    font-size: 0;
}

#sidebarpromac li span,
#sidebarpromac li span.collapsed,
#sidebarprowin li span,
#sidebarprowin li span.collapsed,
#sidebarprosolution li span,
#sidebarprosolution li span.collapsed {
    background: url(/images/style/collapsed.gif) left top no-repeat;
}

#sidebarpromac li span.expanded,
#sidebarprowin li span.expanded,
#sidebarprosolution li span.expanded {
    background: url(/images/style/expanded.gif) left top no-repeat;
}

/* sub levels */

#sidebarpromac li ul,
#sidebarprowin li ul,
#sidebarprosolution li ul {
    margin-left: 22px;
}

#sidebarpromac li li,
#sidebarprowin li li,
#sidebarprosolution li li {
    background: url(/images/style/arrow-7.png) 0 7px no-repeat;
}

/* etc. */

/* float fix */

#sidebarpromac:after,
#sidebarpromac ul:after,
#sidebarprowin:after,
#sidebarprowin ul:after,
#sidebarprosolution:after,
#sidebarprosolution ul:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

#sidebarpromac,
#sidebarpromac ul,
#sidebarprowin,
#sidebarprowin ul,
#sidebarprosolution,
#sidebarprosolution ul {
    display: block;
}

/*  \*/

#sidebarpromac,
#sidebarpromac ul,
#sidebarprowin,
#sidebarprowin ul,
#sidebarprosolution,
#sidebarprosolution ul {
    min-height: 1%;
}

* html #sidebarpromac,
* html #sidebarpromac ul,
* html #sidebarprowin,
* html #sidebarprowin ul,
* html #sidebarprosolution,
* html #sidebarprosolution ul {
    height: 1%;
}

/*  sidebar coupon */
.sidebarcoupon {
    padding: 12px 28px;
}

ul.sidebarcoupon {margin-top:0;}

.sidebarcoupon li {
    line-height: 1.5;
    margin-top: 1px;
    position: relative;
    width: 100%;
    background: url(/images/style/arrow-7.png) 0 9px no-repeat;
    padding: 0 15px;
}

.sidebarcoupon li a:link {
    color: #444444;
}

.sidebarcoupon li a:hover {
    color: #007fff;
}

.sidebarcoupon li .red {
    color: red;
}

.h16 {
    height: 16px;
}

.h1 {
    height: 1px;
}

.otherfiletitle {
    background: url("/images/style/otherfiletitle.gif") repeat-x scroll left top transparent;
    height: 34px;
}

.otherfiletitle h3 {
    color: #575757;
    font-size: 14px;
    font-weight: bold;
    line-height: 34px;
    padding-left: 16px;
}

.otherfilecontent {
    color: #005AAB;
    padding: 16px;
}

.otherfilecontent a,
.otherfilecomparison li a,
.comparisondescription a {
    color: #005AAB;
}

.otherfilecomparison {
    clear: both;
    color: #666666;
    height: auto;
    padding: 16px;
}

.otherfilecomparison li {
    float: left;
    width: 50%;
}

@media screen and (max-width: 768px) {
    #tutorial {
        padding: 10px 12px 20px 12px;
    }
}

@media screen and (min-width: 769px) {
    #tutorial {
        padding: 10px 30px 20px 30px;
    }

}

@media screen and (min-width: 1440px) {
    #tutorial {
        max-width: 1440px;
        margin: 0 auto;
    }
}

#main3 #tutorial {
    width: 100%;
    color: #333333;
    font-size: 16px;
    font-size: 1rem;
    position: relative;
    line-height: 1.5;
}

#main3 #tutorial .postinfo {
    border-bottom: 1px solid #EAEAEA;
    margin-bottom: 10px;
    padding-bottom: 10px;
    overflow: hidden;
}

#main3 #tutorial h2 {
    color: #333333;
    font-size: 20px;
    font-weight: normal;
    line-height: 1.5;
    margin-top: 40px;
    margin-top: 2.5rem;
}

#main3 #tutorial h3 {
    color: #333333;
    font-size: 16px;
    line-height: 2;
}

#main3 #tutorial a.highslide {
    display: block;
    text-align: center;
    clear: both;
}

#main3 #tutorial img {
    text-align: center;
    clear: both;
    display: block;
    margin: 24px auto;
}

#main3 #tutorial .number {
    background: url("/images/style/step.png") no-repeat scroll 0 0 transparent;
    color: #FFFFFF;
    float: left;
    font-size: 15px;
    font-weight: bold;
    height: 32px;
    line-height: 1.6;
    margin-right: 3px;
    padding-left: 8px;
    width: 35px;

}

#main3 #tutorial .steps {
    background: url("/images/style/steps.jpg") no-repeat scroll 0 2px transparent;
    color: #FFFFFF;
    float: left;
    font-size: 13px;
    font-weight: bold;
    height: 34px;
    line-height: 28px;
    margin-right: 10px;
    padding: 0;
    text-align: center;
    width: 62px;
}

#main3 #tutorial .links {
    padding: 8px 8px 8px 0;
    width: 260px;
}

#main3 #tutorial .links a {
    color: #000000;
    float: left;
    font-size: 14px;
    line-height: 24px;
    text-decoration: underline;
}

#main3 #tutorial .links a:hover {
    color: #007fff;
}

#main3 #tutorial .links .buynow {
    padding-left: 28px;
    margin-right: 20px;
    background: transparent url("/images/icon/product-shopping.png") no-repeat scroll 0 0;
}

#main3 #tutorial .links .down {
    padding-left: 28px;
    background: transparent url("/images/icon/product-download.png") no-repeat scroll 0 0;
}

#main3 #tutorial .downloadbuy {
    padding: 15px 0;
}

#main3 #tutorial .downloadbuy img {
    margin: 16px auto;

}

#main3 #tutorial img.inlineicon {
    display: inline;

}

#main3 #tutorial .button {
    margin: 20px 0;

}

#main3 #tutorial .button a {
    text-decoration: none;
}

#main3 #tutorial .tips {
    background: none repeat scroll 0 0 #FBFCC0;
    border: 1px solid #CCCCCC;
    padding: 10px;
}

#main3 #tutorial .related {
    border-bottom: 1px dashed #CCCCCC;
    font-size: 16px;
    font-weight: bold;
    padding: 20px 0 5px;
    margin: 10px 0;
}

#main3 #tutorial a {
    word-wrap: break-word;
}

#main3 #tutorial .btn {
    margin: 0px;
    padding: 8px 0;
    width: 180px;
}

#main3 #tutorial .btn a {
    color: #0552BE;
    display: block;
    line-height: 20px;
    margin: 0 auto;
    padding-left: 18px;
    text-decoration: underline;
}

#main3 #tutorial .btn a:hover {
    color: #0099FF;
    margin: 0 auto;
    text-decoration: underline;
}

#main3 #tutorial .btn a.win {
    background: url("/images/style/icon-win-14.png") no-repeat scroll left center transparent;
}

#main3 #tutorial .btn a.mac {
    background: url("/images/style/icon-mac-14.png") no-repeat scroll left center transparent;
    float: right;
}

#main3 #tutorial .wallpaper {
    margin: 12px auto;
}

#main3 #tutorial .wallpaper h2 {
    font-size: 16px;
    line-height: 1.5;
    font-weight: bold;
    padding: 12px 0;
}

#main3 #tutorial .wallpaper img {
    clear: both;
    margin: 8px 0;
}

/*rating stars*/
.classification {
    position: relative;
    width: 91px;
    height: 17px;
}

.classification .cover {
    position: absolute;
    background: transparent url(/images/style/stars_null.png) 0 4px no-repeat;
    top: 0px;
    left: 0px;
    width: 91px;
    height: 14px;
    z-index: 101;
}

.classification .progress {
    position: absolute;
    background: transparent url(/images/style/stars_full.png) 0 4px no-repeat;
    top: 0px;
    left: 0px;
    height: 24px;
    z-index: 102;
}

/*rating stars -----end*/

.center {
    text-align: center;
}

.mr10 {
    margin-right: 10px
}

.red {
    color: #F00;
}

.mb15 {
    margin-bottom: 15px;
}

/*download dropdown menu*/
.freeBtn-info {
    display: block;
    height: 48px;
    margin-right: 12px;
    line-height: 14px;
    position: relative;
    float: left;
}

.freeBtn-info:hover div {
    display: block;
}

.freeBtn-info div {
    text-align: left;
    display: none;
    width: 230px;
    position: absolute;
    z-index: 3;
    left: 50%;
    margin-left: -78px;
    top: 45px;
    text-indent: 0;
    background: url(../images/style/download-drop-bg.png) repeat-x #FEFEFE 0 100%;
    border: 1px solid #DDD;
    border-radius: 5px;
    padding: 10px;
    text-shadow: 0 0 0;
    color: #777;
}

.freeBtn-info div p {
    display: block;
    -webkit-margin-before: 1em;
    -webkit-margin-after: 1em;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
}

.freeBtn-info div p .clr {
    clear: both;
    height: 0;
    overflow: hidden;
}

.freeBtn-info div .dot {
    background: url(../images/style/download-drop-dot.png) no-repeat 50% 0;
    display: block;
    width: 60px;
    height: 8px;
    position: absolute;
    z-index: 3;
    top: -8px;
    left: 90px;
}

.freeBtn-info div ul {
    margin-top: 5px;
    list-style: none;
    display: block;
    -webkit-margin-before: 1em;
    -webkit-margin-after: 1em;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
    -webkit-padding-start: 0;
}

.freeBtn-info div ul li {
    display: list-item;
    text-align: -webkit-match-parent;
    line-height: 1.6em;
    float: left;
}

.freeBtn-info div li a {
    display: block;
    width: 270px;
    line-height: 26px;
    height: 26px;
    color: #3d4f58;
    font-style: italic;
    padding-left: 5px;
    font-size: 12px;
    text-decoration: none;
}

.freeBtn-info div li a:hover {
    background: #8db411;
    text-decoration: none;
}

.freeBtn-info .button {
    margin: 20px 0;
}

.btnDropList div ul li.fl {
    width: 103px;
    overflow: hidden;
}

.red {
    color: red;
}

.totop {
    display: none;
    background: url(/images/icon/bg_topbutton.png);
    position: fixed;
    z-index: 999;
    width: 48px;
    height: 48px;
    bottom: 30px;
    right: 30px;
    text-indent: -9999px;
    background-size: 100% 100%;
}

.video-container {
    overflow: hidden;
    position: relative;
    width: 100%;
    max-width: 720px;
    margin-right:auto;
    margin-left:auto;
}

.video-container::after {
    padding-top: 56.25%;
    display: block;
    content: '';
}

.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}


/* collapsible titles 20201121 */
.collapsible {
  background-color: #777;
  color: white;
  cursor: pointer;
  padding: 18px;
  margin-bottom: 0;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 4.8rem;
  font-feature-settings: "lnum";
  font-variant-numeric: lining-nums;
  font-weight: 700;
  letter-spacing: -0.0415625em;
  line-height: 1.25;
  
}

.coll-active, .collapsible:hover {
  background-color: #555;
}

.collapsible:after {
  content: '\002B';
  color: white;
  font-weight: bold;
  float: right;
  margin-left: 5px;
}

.coll-active:after {
  content: "\2212";
}

.coll-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
  background-color: #f1f1f1;
  padding: 0 16px;
}
.coll-content h2 {
    margin-top: 3rem;
    margin-bottom: 3rem;
}

.coll-content li.no {
    list-style-type: none;
}
.imgc {margin-left: auto; margin-right: auto;}