﻿@charset "utf-8";

/*---------global---------------------------------------*/
*{ padding:0; margin:0;}


ul{list-style-type:none;}

select,input{vertical-align:middle; }

a:link, a:visited, a:hover, a:active{ text-decoration:none;}
a img{ border:none;}

h1, h2, h3, h4, h5{ font-weight:normal;}
p{ text-align:left;}

/*---------Font for whole site---------------------------------------------------------------------------------------------------*/
body{font-size:15px; font-family:segoe UI,Segoe,Tahoma,sans-serif;}

.searchBox, .btnTopContactShow, .btnTopContactHide{ font-size:16px;}
.navUl li .navLink { font-size:18px; }
.proDropWrap h3{  font-size:30px; font-family:'Segoe UI Light';}
.proDropWrap ul a{ font-size:17px;}

.featureListUl .viewStyle{ font-size:14px; }
#commentsBoard div h3{ font-size:14px; }
#commentsBoard div span{ font-size:14px; }
#comments_form h3{ font-size:22px; }
#commentsAmount h4{ font-size:15px; }
.docTable thead td{ font-size:18px; }
.installStepContent h4 {	font-size:18px;}
.copyright{ font-size:14px;}

@media screen and (max-width: 500px) {
.sectionTitle, .pro_detail_title_wrapper h3, .pro_related_wrapper h2{ font-size:24px;  }   /*1st*/
.homeProTitle, .pro_title_wrapper h3 a, .rel_pro_title, .supportTitle, .FAQ_Q, .privacyTitle{ font-size:18px;}  /*2nd*/
.featureTitle, #comments_form h3{ font-size:20px;}
.FAQ_Q{ font-size:15px;}
}

@media screen and (min-width: 501px) and (max-width:800px) {
.sectionTitle, .pro_detail_title_wrapper h3, .featureTitle, .pro_related_wrapper h2{ font-size:34px;  font-family:'Segoe UI Light',segoe UI,Segoe,Tahoma,sans-serif; }   /*1st*/
.homeProTitle, .pro_title_wrapper h3 a, .rel_pro_title, .supportTitle, .FAQ_Q, .privacyTitle, #comments_form h3{ font-size:20px;}  /*2nd*/
}

@media screen and (min-width: 801px) {
.sectionTitle, .pro_detail_title_wrapper h3, .featureTitle, .pro_related_wrapper h2{ font-size:36px;  font-family:'Segoe UI Light',segoe UI,Segoe,Tahoma,sans-serif; }   /*1st*/

.homeProTitle, .pro_title_wrapper h3 a, .rel_pro_title, .supportTitle, .FAQ_Q, .privacyTitle{ font-size:20px;}  /*2nd*/

}

.icon_brochure, .icon_demo{ font-size:13px; }

.price .sybmol{  font-size:13px; }
.price .number{  font-size:22px;  }
.original_price{  font-size:14px; }
.per_server, .per_sitecollection{ font-size:13px;}

@media screen and (min-width: 801px) and (max-width: 1020px) { .tabList li .tabLink{ font-size:19px; }}
@media screen and (min-width: 1021px) {	.tabList li .tabLink{ font-size:19px; }} 	









/*----small than 600px------------------------------------------------------------------------*/
@media screen and (max-width: 600px) {
.topSection{width:100%; display: none; }
.topWrap{ width:100%; margin:auto; height:60px;   }
.headSection{ width:100%; }
.headWrap{ width:100%; margin:auto;  text-align:left; }
.navDropSection{ width:100%; height:0px; position:relative; z-index:20;}
.navDropWrap{ width:100%;  margin:auto; height:60px; position:relative;}
.bannerSection{width:100%;}
.bannerWrap{width:100%; margin:auto; }
.middleSection{width:100%; }
.middleWrap{width:96%; margin:auto; padding-bottom:10px; }
.footerSection{width:100%; background-color:#f5f5f5; }
.footerWrap{width:100%; margin:auto;  }	
}
/*----between 600px and 940px----*/
@media screen and (min-width: 601px) and (max-width: 940px) {
.topSection{width:100%; }
.topWrap{ width:100%; margin:auto;height:60px;  }
.headSection{width:100%; }
.headWrap{ width:100%; margin:auto;  text-align:left; }
.navDropSection{ width:100%; height:0px; position:relative; z-index:20;}
.navDropWrap{ width:100%;  margin:auto;  height:60px; position:relative;}
.bannerSection{width:100%; }
.bannerWrap{width:100%; margin:auto; }
.middleSection{width:100%; }
.middleWrap{width:96%; margin:auto; padding-bottom:10px; }
.footerSection{width:100%; background-color:#f5f5f5;  }
.footerWrap{width:96%; margin:auto;   }	
}
/*----wider than 1200px----*/
@media screen and (min-width: 941px) and (max-width: 1200px) {
.topSection{width:100%; }
.topWrap{ width:100%; margin:auto; max-width:1200px; height:60px; }
.headSection{width:100%; }
.headWrap{ width:100%; margin:auto; max-width:1200px; height:85px; }
.navDropSection{ width:100%; height:0px; position:relative; z-index:20;}
.navDropWrap{ width:100%;  margin:auto;  height:60px; position:relative;}
.bannerSection{ width:100%;}
.bannerWrap{width:100%; margin:auto;  }
.middleSection{width:100%; }
.middleWrap{width:96%;  margin:auto; }
.footerSection{width:100%; background-color:#f5f5f5; height:185px; }
.footerWrap{width:96%; max-width:1200px;  margin:auto; }	
}


@media screen and (min-width: 1201px) {
.topSection{width:100%; }
.topWrap{ width:100%; margin:auto; max-width:1200px; height:60px; }
.headSection{width:100%; }
.headWrap{ width:100%; margin:auto; max-width:1200px; height:85px; }
.navDropSection{ width:100%; height:0px; position:relative; z-index:20;}
.navDropWrap{ width:100%;  margin:auto; max-width:1200px; height:60px; position:relative;}
.bannerSection{ width:100%;}
.bannerWrap{width:100%; margin:auto;  }
.middleSection{width:100%; }
.middleWrap{width:100%; max-width:1200px;  margin:auto; }
.footerSection{width:100%; background-color:#f5f5f5; height:185px; }
.footerWrap{width:100%; max-width:1200px;  margin:auto;  }	
}



/*---------navigation ---------------------------------------------------------------------*/
.topSection, .headSection{ background-color:#f4f4f4;}
#home .topSection, #home .headSection{ background-color:#ffffff;}

.topContentWrap{ float:right; margin:17px 0 0 0;}
	.searchWrap{ width:270px; margin:0; float:left; height:30px;}
		.searchBox{  width:220px; height:30px; line-height:30px; background-color:#ffffff; float:left; border:solid 1px #999999;  padding:0 0 0 10px; color:#999999;}
		.searchBtn{ width:30px; height:30px; display:block; float:left; background:url(../images/icon_search.png) center center no-repeat; background-color:#333333; border:solid 1px #333333; }	
	.topContactWrap{ float:right; margin:0 0 0 5px;}
		.btnTopContactShow, .btnTopContactHide{ display:block; width:80px; height:30px; color:#666666; border:solid 1px #e7e7e7; line-height:30px; padding:0 12px 0 0; text-align:center;}
		.btnTopContactShow{ background:url(../images/icon_down.png) 72px 13px no-repeat #e7e7e7;}
		.btnTopContactHide{ background:url(../images/icon_up.png) 72px 13px no-repeat #e7e7e7;}



@media screen and (max-width: 600px) {
	.topContactWrap{ display:none;}
	.logo{margin:12px 0 0px 5px; width:78%;  height:65px; display:inline-block;  }
	.logo img{ width:100%; max-width:257px;}

	.btnNavNarrow{ display:inline-block; float:right; width:60px; height:68px; background:url(../images/btnNav.png) center center no-repeat #009ad5; margin:10px 0 0 0;}
	.navUl{  width:100%; margin:0px 0 0 0; display:none; }
		.navUl li { position:relative; display:block; width:100%;background-color:#009ad5; border-bottom:solid 1px #15aae3; padding:0; margin:0; }
		.navUl li .navLink {display: block; color:#ffffff;text-decoration:none; text-indent:6px;  height:60px;  line-height:60px;  width:100%;}
		.navUl li .navLink:hover, .drpArrow:hover{text-decoration:none; color:#ffffff; background-color:#15aae3; }
		.drpArrow{ position:absolute; top:0; right:0;  height:60px; width:30px; background:url(../images/nav_arrow_down.png) center center no-repeat; cursor:pointer;}
		.drpArrowMobileUp { background:url(../images/nav_arrow_up.png) center center no-repeat; }

		.mobileProDropdown, .supportDropWrap{ width:100%; display: none; }
			.navUl li .mobileProDropdown a,
			.navUl li .supportDropList a{ border-top:solid 1px #0079a7;  height:50px; line-height:50px; background-color:#0085b8; display:block; color:#f8f8f8; cursor:pointer; text-indent:6px;}
			
			.navUl li .mobileProDropdown a:hover,
			.navUl li .supportDropList a:hover{ background-color:#0079a7; }
		
	}

.visibleNavigation { display: block; }
.visibleMobileDropdown { display: block; }

@media screen and (min-width: 601px) and (max-width: 940px) {
	.logo{margin:18px 0 0 6px; margin-right:5%;}
	.btnNavNarrow{ display:none;}

    #productBody #nav #product .drpArrow,
    #supportBody #nav #support .drpArrow{ background:url(../images/icon_menu_down.png) 16px -25px no-repeat;  }

	.navUl{ height:60px;  width:100%; margin:16px 0 0 0; display: block; }
		.navUl li { text-align:center; float:left; width:16.6%; position:relative;}
		.navUl li:last-child{ width:17%;}
		.navUl li .navLink {display: block; color:#000000;text-decoration:none;  height:60px; line-height:60px; }
		.navUl li .highlightedNavLink{background-color:#009ad5;text-decoration:none; color:#ffffff;}
		
		.drpArrow{ position:absolute; top:0; right:2px;  height:60px; width:30px; background:url(../images/icon_menu_down.png) 16px 31px no-repeat; cursor:pointer;}
		.drpArrowUp, #productBody #nav #product .drpArrowUp, #supportBody #nav #support .drpArrowUp { background:url(../images/icon_menu_up.png) 16px -25px no-repeat;  }
        .drpArrowDown, #productBody #nav #product .drpArrowDown, #supportBody #nav #support .drpArrowDown { background:url(../images/icon_menu_down.png) 16px 31px no-repeat;  }
		
		.mobileProDropdown{ display:none; }
		
		.supportDropWrap{ width:1px; height:0px; position:relative; display: none; z-index: 20; }
        .visibleSupportDropdownWrap { display: block; }
		.supportDropList{ position:absolute; top:0; left:0;  width:200px;}
		.navUl li .supportDropList a{ height:50px; line-height:50px; background-color:#333; display:block; color:#bdbdbd; cursor:pointer;}
		.navUl li .supportDropList a:hover{ background-color:#4b4b4b; }
		
#home #nav #home a,
#productBody #nav #product > a,
#service #nav #service a,
#supportBody #nav #support > a,
#partner #nav #partner a,
#aboutus #nav #aboutus a,
#contactus #nav #contactus a {	background-color:#009ad5;text-decoration:none; color:#ffffff;}
	}
	
@media screen and (min-width: 941px) {
	.logo{margin:18px 0 0 0px; margin-right:5%; float:left; }
	.btnNavNarrow{ display:none;}
	
	#productBody #nav #product .drpArrow,
    #supportBody #nav #support .drpArrow{ background:url(../images/icon_menu_down.png) 16px -25px no-repeat;  }

	.navUl{ float:right;  width:65%; margin:25px 0 0 0; display: block; }
		.navUl li { text-align:center; float:left; width:16.6%; position:relative;  }
		.navUl li:last-child{ width:17%;}
		.navUl li .navLink {display: block; color:#000000;text-decoration:none; height:60px; line-height:60px;}
		.navUl li .highlightedNavLink{ background-color:#009ad5;text-decoration:none; color:#ffffff;}
		
		
		.drpArrow{ position:absolute; top:0; right:0;  height:60px; width:30px; background:url(../images/icon_menu_down.png) 14px 31px no-repeat; cursor:pointer;}
        .drpArrowUp, #productBody #nav #product .drpArrowUp, #supportBody #nav #support .drpArrowUp { background:url(../images/icon_menu_up.png) 14px -25px no-repeat;  }
        .drpArrowDown, #productBody #nav #product .drpArrowDown, #supportBody #nav #support .drpArrowDown { background:url(../images/icon_menu_down.png) 14px -25px no-repeat;  }
		
		.mobileProDropdown{ display:none;}
		
		.supportDropWrap{ width:1px; height:0px; position:relative; display: none; z-index: 20; }
        .visibleSupportDropdownWrap { display: block; }
	.supportDropList{ position:absolute; top:0; left:0;  width:200px;}
		.navUl li .supportDropList a{ height:50px; line-height:50px; background-color:#333; display:block; color:#bdbdbd; cursor:pointer;}
		.navUl li .supportDropList a:hover{ background-color:#4b4b4b; }
		
		
#home #nav #home a,
#productBody #nav #product > a,
#service #nav #service a,
#supportBody #nav #support > a,
#partner #nav #partner a,
#aboutus #nav #aboutus a,
#contactus #nav #contactus a{	background-color:#009ad5;text-decoration:none; color:#ffffff;}
}


.contactDropWrap{ width:240px; padding:20px; position:absolute; top:-12px; right:0; height:430px; background-color:#333; text-align:left;}
.contactDropWrap p{ color:#bdbdbd; margin:0 0 5px 0;}
.contactDropWrap a{ color:#ff9900; margin:0 0 20px 0; display:block;}
.topContactForm{ margin:10px 0 0 0;}
.topContactForm .formLable{ display:block; color:#bdbdbd; margin:5px 0 10px 0;}
.topContactForm .formInput{ border:solid 1px #bdbdbd; width:100%; height:26px;}
.topContactForm .formInput2{ border:solid 1px #bdbdbd; width:100%; height:46px;}
.topContactForm .btnSendMesg{ display:block; width:100px; height:30px; line-height:30px; background-color:#009ad5; color:#fff; text-align:center; margin:20px 0 0 0;}



.proDropWrap{ width:100%; position:absolute; top:0; left:0; height:390px; background-color:#333; text-align:left;}

	.navList1{ margin:0 0 30px 0;}
	.navList2{ margin:0 0 0px 0;}
	.navList301, .navList302{ width:49%;}
	.navList301{ float:left;}
	.navList302{ float:right;}
	
	.proDropWrap h3{ color:#ff9900;  text-align:left; padding:0 0 5px 0; }
	.proDropWrap ul li{  padding:4px;}
	.proDropWrap ul li:hover, .highlightedProduct { background-color:#4b4b4b; padding:4px;}
	.proDropWrap ul a{ color:#bdbdbd;  margin-right:4px;}
	
	.proDropWrap .section3 h3{ margin:0 0 0 30px;}
	.proDropWrap .section3 p{ margin:0 0 0 30px;  color:#bdbdbd;}


@media screen and (max-width: 600px) {

	}

@media screen and (min-width: 600px) and (max-width: 800px) {
	.proDropWrap{  height:560px; }
		.proDropWrap .section1{  width:96%; border-bottom:solid 1px #454545; margin:20px auto 0 auto; height:165px;  }
		.proDropWrap .section2{  width:96%; margin:15px auto 0 auto; }
		.proDropWrap .section3{ display:none;}		
		.slutionWrap{ float:left; width:49%; }
		.fieldWrap{ float:right; width:49%; }

	}
@media screen and (min-width: 800px) and (max-width: 1200px) {
.proDropWrap{  height:390px; }
	.proDropWrap .section1,
	.proDropWrap .section2{ margin:20px 10px; height:350px;}	
	.proDropWrap .section1{  float:left; width:30%; margin:20px 10px 20px 20px; }
	.proDropWrap .section2{  float:left; width:60%; margin:20px 10px 20px 10px; }
	.proDropWrap .section3{  display:none; }

	}
	
@media screen and (min-width: 1200px) {
.proDropWrap{  height:390px; }
	.proDropWrap .section1,
	.proDropWrap .section2,
	.proDropWrap .section3{ margin:20px 10px; height:350px;}
	
	.proDropWrap .section1{  float:left; width:260px; margin:20px 10px 20px 20px; }
	.proDropWrap .section2{  float:left; width:490px; margin:20px 10px 20px 10px; }
	.proDropWrap .section3{  float:right; width:360px; margin:20px 20px 20px 10px; border-left:solid 1px #999; }

	}



/*--------footer start-----------------------------------*/

@media screen and (max-width: 729px) {
.footerSection{width:100%; background-color:#333; padding:20px 0; float:left; }
.footerWrap{ margin:auto; text-align:center; }
		.msPtner{ margin:0px auto 20px auto; }
	
	.socialLinkWrap{ margin:0 auto; width:180px;  height:30px; text-align:center;}

	.footerNavList{ margin:17px auto 0 auto;  height:30px;  width:100%;}
		.footerNavList li{ float:left; width:30%;}
		.footerNavList li:first-child{ width:18%;}
		.footerNavList li:last-child{ width:22%;}
		.footerNavList li a{ display:block; padding:0 2px; border-right:solid 1px #999; color:#ccc;}
		.footerNavList li:first-child a{ padding:0 2px 0 0;}
		.footerNavList li:last-child a{ border:none;}
		
	.copyright{color:#666;  margin:0px 0 0 0; display:inline-block;}
}

@media screen and (min-width: 730px) {
.footerSection{width:100%; background-color:#333; height:160px; padding:20px 0 0 0; float:left; }
.footerWrap{max-width:1200px;  margin:auto; text-align:left; }
	.msPtner{ float:right; }
	
	.socialLinkWrap{ width:180px;  height:30px; text-align:left;}

	.footerNavList{ margin:17px 0 0 0;  height:30px;}
		.footerNavList li{ float:left;}
		.footerNavList li a{ display:block; padding:0 10px; border-right:solid 1px #999; color:#ccc;}
		.footerNavList li:first-child a{ padding:0 10px 0 0;}
		.footerNavList li:last-child a{ border:none;}
		
	.copyright{color:#666;  margin:17px 0 0 0; }
}



/*--------footer end-------------------------------------------*/
/*--------buttons----------------------------------------------*/


.odd_row{ background-color:white;}
.even_row{ background-color:#f8f8f8;}

.tagOffice365,
.tag2013ready,
.tag2016ready,
.tag2019ready,
.tagNew,
.tagHot,
.tagFree,
.tagHotFree{ height:13px; margin:0 4px 0 0; display:inline-block; }

.tagOffice365{ background:url(../images/icon_office365.png) top left no-repeat; width:53px; }
.tagNew{background:url(../images/icon_new.png) top left no-repeat; width:29px;}
.tagHot{background:url(../images/icon_hot.png) top left no-repeat; width:27px;}
.tagFree{background:url(../images/icon_free.png) top left no-repeat; width:28px;}
.tagHotFree{background:url(../images/icon_hot_free.png) top left no-repeat; width:59px;}
.tag2013ready{background:url(../images/icon_13ready.png) top left no-repeat; width:58px;}
.tag2016ready{background:url(../images/icon_16ready.png) top left no-repeat; width:58px;}
.tag2019ready{background:url(../images/icon_19ready.png) top left no-repeat; width:58px;}



.btn_buy{ width:125px; height:24px; display:inline-block; background:url(../images/btn_buynow.png) top left no-repeat;}
.btn_try{ width:125px; height:34px; display:inline-block; background:url(../images/btn_freetrial.png) top left no-repeat;}
.btn_download{ width:125px; height:24px; display:inline-block; background:url(../images/btn_download.png) top left no-repeat;}

.clear{clear:both;}


@media screen and (max-width: 600px) {
.sectionTitle{ color:#ff9900;   text-align:left; padding:15px 0; }
}

@media screen and (min-width: 601px) {
.sectionTitle{ color:#ff9900;   text-align:left; padding:30px 0; }
}
