﻿.table_product_1 {
	background:#333;}
body { 
	margin: 0; 
	padding: 0; 
	background: #FFFFFF url(/files/image/design/background.gif) top left repeat; 
	color:#505050; 
	font-family: Tahoma, Arial, sans-serif; 
}
* { font-family: Tahoma, Arial, sans-serif; color: #505050; }

img {border:0; font-size: .3em;}
form {padding:0; margin:0;}
td, th { vertical-align: top; }

textarea, 
select, 
input[type=text] { 
	width: 100%;
	border: 1px solid #BBBBBB;
	background-color: #f6f6f6;
	padding: 2px 0px;
	display: block;
} 
input[type=radio] {
	margin: 0px 10px 5px 0;
}
input[type=checkbox] {
	margin: 0px 10px 5px 0;
}

.clear {clear: both; font-size: 0px; height: 0;}

.header { 
	margin: 45px auto 0 auto; 
	width: 1010px; 
}
.header a.logo { 
	background: transparent url(/files/image/design/Synology_logo.gif) top left no-repeat; 
	width: 163px; 
	height: 42px; 
	display: block; 
	margin: 7px 33px 0 0 ; 
	float: left; 
	text-indent: -1000px; 
	overflow: hidden; 
	position: relative;
	z-index: 20;
}
.header .slogan { 
	font-size: 10px; 
	letter-spacing:3px; 
	white-space:nowrap; 
	padding: 8px 0 5px 0; 
	color: #BBBBBB;
}

.topmenu ul#nav { 
	position: relative; 
	list-style: none; 
	margin: 0 auto; 
	padding: 0; 
	height: 20px; 
	z-index: 2;
}
.topmenu ul#nav li { 
	float: left; 
	padding: 3px 10px; 
	font-size: 13px; 
	border-left: 1px solid #BBBBBB;
}
.topmenu ul#nav li.over ul,
.topmenu ul#nav li:hover ul { 
	left: auto; 
	display: block;
}
.topmenu ul#nav li a { display: block; color: #666666; text-decoration: none; }
.topmenu ul#nav li a:hover { color: #ff9900; text-decoration: underline; }

.topmenu ul#nav li.on { font-weight: bold; }

.topmenu ul#nav li ul  { 
	display: none; 
	position: absolute; 
	margin: 0 0 0 -11px; 
	padding: 5px 0px 5px 0px; 
	background-color: #FFFFFF; 
	list-style: none; 
	border-left: 1px solid #BBBBBB; 
	border-bottom: 1px solid #BBBBBB;  
}
.topmenu ul#nav li ul li { 
	padding: 3px 10px; 
	font-size: 1em; 
	float: none; 
	border: none; 
	font-weight: normal 
}

.status { margin: 20px auto; width: 960px; background: #FFF;}
.status p { padding: 15px; font-size: .7em; }

.container { width: 1010px; margin: auto; margin-top: 15px; }

.container .content .main h2 { 
	margin: 1px; 
	border-bottom: 1px solid #BBBBBB; 
	font-size: .80em; 
	font-weight: normal; 
	padding: 4px 20px 4px 20px; 
	background-color: #F0F0F0;
}

.container .content .main .dunno { 
	width: 682px; 
	float: left; 
	border: 1px solid #BBBBBB; 
	height: 250px; 
	overflow: hidden; 
}
.container .content .main .dunno img { 
	padding: 0 0 0 1px;
}
.container .content .main .news { 
	width: 318px; 
	float: right; 
	border: 1px solid #BBBBBB; 
	margin: 0 0 5px 5px; 
	height: 250px; 
	overflow: auto; 
	background-color: #f6f6f6;
}
.container .content .main .news ul { 
	margin: 0; 
	padding: 10px 20px 10px 20px; 
	list-style: none; 
}
.container .content .main .news ul li { 
	padding: 0 0 5px 20px; 
	background: transparent url(/files/image/design/bullet.png) 0px 0px no-repeat; 
}
.container .content .main .news ul li span { color: #ff9900; }
.container .content .main .news ul li a { text-decoration: underline; font-weight: normal;  }
.container .content .main .news ul li a:hover { text-decoration: none; }

.container .content .main .award { 
	width: 223px; 
	float: left; 
	border: 1px solid #BBBBBB; 
	margin: 5px 5px 0 0; 
	height: 250px; 
	overflow: hidden; 
	background-color: #f6f6f6;
}

.container .content .main .award .padding { 
	text-align: center;
}
.container .content .main .solutions { 
	width: 318px; 
	float: right; 
	border: 1px solid #BBBBBB; 
	margin: 5px 0 0 0; 
	height: 250px; 
	overflow: hidden; 
	background-color: #f6f6f6;
}
.container .content .main .solutions ul { 
	margin: 0; 
	padding: 10px 20px 10px 20px; 
	list-style: none; 
}
.container .content .main .solutions ul li { 
	padding: 0 0 5px 20px; 
	background: transparent url(/files/image/design/bullet.png) 0px 0px no-repeat; 
}
.container .content .main .solutions ul li a { 
	text-decoration:  underline;
}
.container .content .main .solutions ul li a:hover { 
	text-decoration: none;  
}

.container .content .main .products { 
	display: block;
	width: 883px; 
	border: 1px solid #BBBBBB; 
	height: 165px; 
	background: #F0F0F0;
	width: 1008px;
}

.container .content .main .products .scroller {
	float: left;
	height: 165px;
	padding: 0;
	display: block;
	width: 1008px;
	_overflow: hidden;
}

.container .content .main .products table { 
	margin: 0;
	padding: 0;
	border: none;	
}
.container .content .main .products table.items td.product { 
    text-align: center;
    border: none;
} 
.container .content .main .products table.items td span { 
	display: none;
}
.container .content .main .products table.items td a img { 
	width: 150px;
	height: 120px;
	margin: 0 5px;
}
.container .content .main .products table.items td a { 
	text-decoration: none;
	font-weight: bold;
}
.container .content .main .products table.items td a span { 
	position: relative;
	top: 0px;
	display: block;
}
.container .content .main .products table.items td a:hover span { 
	color: #ff9900;
}

.container .left { 
	float: left; 
	width: 190px; 
}
.container .left h2 { 
	margin: 1px; 
	border-bottom: 1px solid #BBBBBB; 
	font-size: .80em; 
	font-weight: normal; 
	padding: 4px 20px 4px 20px; 
	background-color: #F0F0F0;
}
.container .left .menu { 
	border: 1px solid #BBBBBB; 
	background-color: #FAFAFA;
	margin-bottom: 6px;
}
.container .left .menu a { 
	color: #666666;
	text-decoration: none;
}
.container .left .menu a:hover { 
	color: #ff9900;
	text-decoration: underline;
}

.container .left .banner { margin: 0 0 6px 0;}
.container .left .banner img { display: block;}
.container .left .search { margin: 0 0 6px 0; border:1px solid #BBBBBB;}
.container .left .search input[type=text] { 
	margin: 10px; 
	width: 160px;
}
.container .left .search .btn { 
	margin: 0 0 10px 10px;
}
.container .left .search .btn input { 
	border: 1px outset ;
}
.container .left ul { list-style: none; margin: 0; padding: 10px;  }
.container .left ul li { 
	padding: 0px 15px 3px 15px; 
	margin: 3px 0 3px 0; 
	background: transparent url(/files/image/design/bullet.png) 0px -2px no-repeat; 
}

.container .left ul li.on { 
	background: transparent url(/files/image/design/bullit2.png) 0px -1px no-repeat; 
	font-weight: bold; 
}
.container .left ul li ul li { 
	background: none;
	font-weight: normal;
}
.container .left ul li ul li.on { 
	background: none;
	font-weight: bold;
}
.container .left ul li a { text-decoration: underline; }
.container .left ul li a:hover { text-decoration: none; }

.container .left ul li ul { 
	margin : 0; 
	padding: 5px 0 5px 15px;
}
.container .left ul li ul li { 
	padding: 2px 0 2px 0; 
	margin: 0; 
	background: none;
}
.container .left ul li ul li a { 
	background: none !important;
	text-indent: inherit !important;
	font-size: 1.2em; 
}

.container#typical .content { 
	width: 812px; 
	float: right; 
	background-color: #FFF; 
	border: 1px solid #BBBBBB; 
	min-height: 600px; 
}
.container#main .content { width: 1010px; }
.container .content .padding { padding: 20px; }

.container .content .title  { 
	margin: 1px; 
	padding: 4px 3px 4px 3px; 
	background: #F0F0F0; 
	border-bottom: 1px solid #BBBBBB; 
	color: #505050; 
	/* text-transform: uppercase;  */
	width: auto; 
}
.container .content .title h1 { 
	font-size: .80em; 
	margin: 0 0 0 15px; 
	padding: 0 15px 0 0; 
	width: auto; 
	float: left;  
	color: #505050;
}
.container .content .title h1 span { 
	/*border-left: 5px solid #FF9900; 
	padding: 0px 0px 0 10px; 
	color: #FF9900; 
	margin-right: 10px;*/ 
}

.container .content h1 { 
	color: #707070; 
	font-size: 1.3em; 
	font-weight: normal; 
	padding: 5px 0 15px 0; 
}
.container .content h2 { 
	color: #707070; 
	font-size: .9em; 
	font-weight: bold; 
	padding: 5px 0 5px 0;  
}

.container .content h2 a { text-decoration: none; }
.container .content h2 a:hover { text-decoration: underline; }
.container .content h2.border { 
	color: #666666; 
	background: #f6f6f6; 
	padding: 5px 3px 5px 3px; 
	font-size: .85em; 
	font-weight: normal; 
	text-transform: uppercase; 
	border-bottom: 1px solid #BBBBBB; 
	margin: 0 -9px 0 -9px;
}
.container .content h2.border span.date { /* border-left: 5px solid #FF9900; */padding: 0px 0px 0 10px; color: #FF9900; margin-right: 10px; }
.container .content h2.border a { color: #666666;  }
.container .content h2.border a:hover { text-decoration: none; }
.container .content h3 { font-size: .95em; font-weight: normal; padding: 5px 0 10px 0; color: blue; }
.container .content h4 { font-size: .95em; font-weight: normal; padding: 5px 0 10px 0; color: cyan; }

.container p, 
.container li, 
.container td, 
.container th { 
	font-size: .74em; 
}

.container .content p {
	/* text-indent:30px; */
}

.container a { color:#666666; }
.container a:hover { text-decoration: none; color: #505050; }

.container ul { 
	padding: 0 0 0 20px; 
	margin: 10px 0 10px 20px;
}
.container ul li { 
	padding: 0 0 5px 10px; 
	sbackground: transparent url(/files/image/design/bullet.png) 0px 3px no-repeat; 
}

.container ul.topic_list li { 
	padding: 0 0 5px 10px; 
	margin: 4px 0;
}


.container .content table {
	border-collapse: collapse;
	margin: 10px 0 25px 0;
}
.container .content table th {
	text-align: left;
	padding: 5px;
	border-bottom: 1px solid #BBBBBB;
	background-color: #F0F0F0;
}
.container .content table td {
	text-align: left;
	padding: 5px;
	background-color: #F0F0F0;
	vertical-align: top;
	border-bottom: 1px solid #BBBBBB;
}
.container .content table.table_product_1 td {
	text-align: center;
	padding: 5px;
	background-color: #f0f0f0;
	vertical-align: middle;
	border-left: 3px solid #f0f0f0;
	bord-right: 3px solid #f0f0f0;
	border-bottom: 3px solid #f0f0f0;
}
.container .content table tr.odd th,
.container .content table tr.odd td {
	background-color: #F9F9F9;
}

.container table ul { padding: 0 0 0 5px; margin-left: 0;}
.container table ul li { padding: 0 0 5px 15px; font-size: 1em;}

.container .content .sitemap {
	margin-top: 40px;
}

.container .content .news_block { padding: 0 0 10px 0; margin: 0 -8px 0 -8px; }
.container .content .news_block p { margin: 10px; }
.container .content .news_block p.desc img { float: right; margin: 0 0 10px 20px; }
.container .content .news_block p.more a { 
	color: #8f8f8f; 
	font-size: .9em; 
	padding: 0px 20px 0 0; 
	text-decoration: none; 
	background: transparent url(/files/image/design/bullet1.png) right 2px no-repeat;
}
.container .content .news_block p.more a:hover { text-decoration: underline; }

.container .content .news_block .file { float: left; width: 49%; padding: 5px 0px 5px 0px; min-height: 40px; }
.container .content .news_block .pdf { background: transparent url(/files/image/design/icon-pdf.png) 5px 12px no-repeat; }
.container .content .news_block .doc { background: transparent url(/files/image/design/icon-doc.png) 5px 12px no-repeat; }
.container .content .news_block .file p { margin: 5px 5px 5px 50px; }

.container .content .shops { }
.container .content .shops table { border-collapse: collapse; width: 100%; }
.container .content .shops table th { border: 1px solid #BBBBBB; background-color: #F0F0F0; text-align: left; font-weight: normal; padding: 3px 10px 3px 10px;}
.container .content .shops table td { border: 1px solid #BBBBBB; padding: 3px 10px 3px 10px;}
.container .content .shops table td div { margin-bottom: 4px; }

.container .content h1#citys_open { 
	cursor: pointer; 
	text-decoration: underline; 
	width: auto; 
	max-width: 300px; 
	margin-left: 25px;
}
.container .content .citys { 
	position: absolute; 
	padding: 10px; 
	border: 1px solid #F0F0F0; 
	margin: -70px 0 0 14px; 
	background: #F0F0F0; 
	display: none;
}
.container .content .citys h1 { margin: 0; }
.container .content .citys h2 { margin: 0; }
.container .content .citys table { border-collapse: collapse; margin: 0 0 30px 0;}
.container .content .citys td { border-bottom: 1px solid #BBBBBB; width: 150px; padding: 3px 3px 3px 10px; }
.container .content .citys table td a { text-decoration: none; }

.container .content .material_block {
	width: 186px;
	float: left;
	margin: 0 5px 5px 0;
	border: 1px solid #F0F0F0;
	overflow: hidden;
}
.container .content .material_block img.image {
	width: 170px;
	height: 170px;
	margin: 10px;
}
.container .content .material_block .desc {
	text-align: center;
	height: 40px;
}


.container .content .product_block { padding: 0 0 10px 0; margin: 0 -8px 0 -8px; }
.container .content .product_block h2 { 
	padding: 5px 3px 5px 10px; 
	background: #F0F0F0; 
	font-size: .85em; 
	border-bottom: 1px solid #BBBBBB; 
	color: #666666; 
	text-transform: uppercase; 
	font-weight: normal;
}

.container .content .product_block table { border-collapse: collapse; width: 100%; }
.container .content .product_block table th {  border-bottom: 1px solid #F0F0F0; border-right: 1px solid #F0F0F0; padding: 3px 5px 3px 10px; font-weight: normal; text-align: left; width: 45%;}
.container .content .product_block table td {  border-bottom: 1px solid #F0F0F0; padding: 3px 5px 3px 10px; font-weight: normal; text-align: left;  }

.container .content .pr_block h1 { font-weight: bold; }
.container .content .pr_block h2 { margin: 0; }
.container .content .pr_block h2.purpose { color: #666666;  }
.container .content .pr_block h2.target { color: #909090; }
.container .content .pr_block .img { 
	float: left;
	margin: 10px 40px 20px 0;
}

.container .content .pages { 
	margin-top: 20px -9px 0 -19px; 
	border:  1px solid #F0F0F0; 
	width: 100%; 
	font-size: .8em; 
}
.container .content .pages .mazafak { 
	margin: 2px; 
	padding: 5px 10px 5px 10px; 
	background-color: #F0F0F0; 
	text-align: right; 
}
.container .content .pages a { text-decoration: none;  }
.container .content .pages a.selected_1 { color: #666666; font-weight: bold; }

.footer { width: 1010px; margin: 5px auto 5px auto; padding: 10px 0 10px 0;}
.footer p { margin: 0; padding: 0; width:40%; float: right; font-size: .7em; color: #666666; text-align: right; }
.footer ul { margin: 0; padding: 0; list-style: none; width:60%; float: left; }
.footer ul li { float: left; font-size: .7em; padding: 0px 10px 0px 5px; margin: 0;}
.footer a { color: #666666; text-decoration: none; }
.footer a:hover { text-decoration: underline; }


.sitemap ul ul { margin: 10px; }
.sitemap li { font-size: .9em; }


.container .content label { font-size: .8em; color: #707070; display: block; line-height: 110%; padding-top:4px; }
.container .content label span { font-size: .8em; }

.container .content fieldset { 
	margin: 0 0 10px 0;
	padding: 5px;
	border: 1px solid #BBBBBB;
	width: 100%;
}

.container .content fieldset legend {
	padding: 2px 10px 2px 10px;
	margin: 0 0 0 5px;
/*	border-left: 5px solid #FF9900;*/
	font-size: .75em;
}

.container .content fieldset label,
.container .content .fieldset .select label,
.container .content .fieldset .input label {
	width: 37%;
	float: left;
	text-align: right; 
}

.container .content .fieldset .select .element,
.container .content .fieldset .input .element,
.container .content .fieldset .checkbox .element,
.container .content .fieldset .radio .element { 
	width: 60%; 
	float: right;
}

.container .content .fieldset .radio,
.container .content .fieldset .checkbox,
.container .content .fieldset .input {
 	padding: 3px; 
 	clear: both; 
}
 
.container .content .fieldset .input input[type=text] { width: 100% }
.container .content .fieldset .checkbox input[type=checkbox] { margin: 3px 0 0 0; }
.container .content .fieldset .radio input[type=radio] { margin: 3px 0 0 0; }

.container .content .fieldset .select { 
	padding: 10px; 
	clear: both; 
}
.container .content .fieldset .select .element { 
	width: 60%; 
	float: right; 
}

.container .content .fieldset .textarea { 
	padding: 10px; 
	clear: both; 
}
.container .content .fieldset .textarea label { width: 85%; float: right; text-align: left; margin: 0 0 3px 0;}
.container .content .fieldset .textarea .element { width: 85%; float: right; height: 150px; margin: 0 0 5px 0; }
.container .content .fieldset .textarea .element textarea { 
	height: 150px; 
	font-size: .76em;
}

.container .content .submit {
	text-align: right;
	margin: 10px 0 0 0;
}


ul.tabs { 
	list-style:none; 
	padding: 0 0 0 10px;
	background: #F6F6F6;
	height: 25px;
	border-bottom: 1px solid #bbbbbb;
	margin: 0 -19px 0 -19px;
}
ul.tabs li { 
	float:left;	 
	text-indent:0;
	padding:0;
	margin:0 !important;
	list-style-image:none !important; 
	background: none;
	font-size: .70em;
	padding: 4px 0 4px 0;
}
ul.tabs a { 
	font-size:1.2em;
	display:block;
	margin: 0 10px 0 10px;
	text-align:center;	
	text-decoration:none;
	position:relative;
}
ul.tabs a:hover { 
	text-decoration: underline;
}
ul.tabs a:active {
	outline:none;		
}
ul.tabs a.current, ul.tabs a.current:hover, ul.tabs li.current a {
	color: #FF9900;
}



/* Different widths for tabs: use a class name: w1, w2, w3 or w2 */


/* width 1 */
ul.tabs a.w1 			{ background-position: -519px 0; width:134px; }
ul.tabs a.w1:hover 	{ background-position: -519px -31px; }
ul.tabs a.w1.current { background-position: -519px -62px; }

/* width 2 */
ul.tabs a.w2 			{ background-position: -366px -0px; width:154px; }
ul.tabs a.w2:hover 	{ background-position: -366px -31px; }
ul.tabs a.w2.current { background-position: -366px -62px; }


/* width 3 */
ul.tabs a.w3 			{ background-position: -193px -0px; width:174px; }
ul.tabs a.w3:hover 	{ background-position: -193px -31px; }
ul.tabs a.w3.current { background-position: -193px -62px; }

/* width 4 */
ul.tabs a.w4 			{ background-position: -0px -0px; width:194px; }
ul.tabs a.w4:hover 	{ background-position: -0px -31px; }
ul.tabs a.w4.current { background-position: -0px -62px; }


/* initially all panes are hidden */ 
div.panes div.pane {
	display:none;		
}

.container .content table.compare { 
	border-collapse: collapse; 
	width: 100%; 
}
.container .content table.compare th { 
	border-bottom: 1px solid #666;
}
s.container .content table.compare td {  border-bottom: 1px solid #F0F0F0; padding: 3px 5px 3px 10px; font-weight: normal; text-align: left;  }

.container .content table.compare td ul {
	padding: 0;
	margin: 0 0 0 10px;
}
.container .content table.compare td ul li {
	margin: 0 5px 0 5px;
	padding: 0 0 0 5px;
	font-size: .8em;
}


.container .content table.products  {
	border-collapse: collapse;
}
.container .content table.products th {
	text-align: center;
	border: 1px solid #FFF;
}
.container .content table.products th.first {
	background: #cac0d4;
}
.container .content table.products th.second {
	background: #cad4c0;
}
.container .content table.products th.third {
	background: #c0d4e9;
}

.container .content table.products td {
	background:  #FFF;
	border: 1px solid #FFF;
}
.container .content table.products td.first {
	background:  #d6cce0;
	text-align: center;
}
.container .content table.products td.second {
	background: #d6e0cc;
	text-align: center;
}
.container .content table.products td.third {
	background: #cce0f5;
	text-align: center;
}


.container .content .cl_94 h1 {
	color: #f39800;
	padding-right: 100px;
}
.container .content h1 .stars {
	cursor: pointer;
}
.container .content .cl_94 h1 .stars {
	height: 20px;
	background: url(/files/image/design/star_3.gif) top right no-repeat; 
}

.container .content .cl_96 h1 {
	color: #24A2F4;
	padding-right: 100px;
}
.container .content .cl_96 h1 span.stars {
	background: url(/files/image/design/star_5.gif) top right no-repeat; 
}
.container .content .cl_95 h1 {
	color: #70b539;
}
.container .content .cl_100 h1 span.stars {
	background: url(/files/image/design/star_6.gif) top right no-repeat; 
}
.container .content .cl_100 h1 {
	color:#005ca2;
}
.container .content .cl_95 h1 span.stars {
	background: url(/files/image/design/star_4.gif) top right no-repeat; 
}

li.cl_92 ul {
	display: none;
}
li.cl_92.on ul {
	display: block;
}
li.cl_91 ul {
	display: none;
}
li.cl_91.on ul {
	display: block;
}

table.calc {
	width: 80%;
	margin: 0 auto;
}
table.calc td {
	background-color: #d6e0cc;
	vertical-align: middle !important;
}
table.calc td .submit {
	margin: 0 !important;
}
table.calc td label{
	font-size: 1.2em;
}
table.calc td span#results {
	font-weight: bold;
}
