
	/*Gallery*/
	#gallery {
		height:496px;
		overflow:hidden;
		background:url(../images/gallerry-bg.gif) 0 0 repeat-x;
	}
	
	/* Sidebar */
	aside{
		float: left;
		width: 260px;
		margin-right:52px;
	}

/* Left & Right alignment */

.fleft { float:left;}
.fright { float:right;}
.clear { clear:both;}

.col-1, .col-2, .col-3 { float:left;}

.alignright { text-align:right;}
.aligncenter { text-align:center;}


/* The inside class provides consistent padding. To be used often! */
/*.inside{ padding: 32px 37px 50px 37px; }*/
.inside{ padding: 32px 37px 50px 37px; }


/*----- form defaults -----*/
input, select, textarea { 
	font-family:Arial, Helvetica, sans-serif;
	font-size:1em;
	vertical-align:middle;
	font-weight:normal;
}

/*----- other -----*/
figure { margin-bottom:18px;}

.img-indent { 
	margin:0 20px 0 0; 
	float:left;
}
.img-box { 
	width:100%; 
	overflow:hidden; 
	padding-bottom:15px;
}
	.img-box figure { 
		float:left; 
		margin:0 20px 0 0;
		padding:0;
	}

.extra-wrap { 
	overflow:hidden;
}

p {margin-bottom:18px;}
.p1 { margin-bottom:9px;}
.p2 { margin-bottom:18px;}
.p3 { margin-bottom:27px;
}


/*----- txt, links, lines, titles -----*/


h1 {
	font-size:34px;
	line-height:1.2em;
	font-family:"Microsoft Yahei", "微軟雅黑字體", "微軟正黑體", "Microsoft JhengHei", "新細明體", "Century Gothic";
	color:#fff;
	font-weight:normal;
	/*background:url(../images/logo.jpg) no-repeat 0 0;*/
	/*background:url(../images/im2.png) no-repeat 0 0;*/
	padding:6px 0 8px 69px;
	position:absolute;
	left:39px;
	top:-10px;
}
	h1 a {
		color:#fff;
		text-decoration:none;
	}
h2 {
	font-size:30px;
	font-family:"Microsoft Yahei", "微軟雅黑字體", "微軟正黑體", "Microsoft JhengHei", "新細明體", "Century Gothic";
	line-height:1.2em;
	font-weight:normal;
	color:#212222;
/*	margin-bottom:22px;*/
}
	h2 span {
		color:#8a8a8a;
	}
h3 {
	font-size:1em;
	margin-bottom:6px;
}
	h3 a { color:#242424; }
	h3 a:hover {
		text-shadow: 1px 1px 1px #888; 
	}




/*==================boxes====================*/
.main-box {
	/*border-top:5px solid #eaeaea;*/
	background:#fff;
	width:100%;
	min-height:100%;
	margin:0 0 0 0;
}


.contacts {
	padding-bottom:20px;
}
	.contacts li {
		width:100%;
		overflow:hidden;
	}
		.contacts li strong {
			float:left;
			width:95px;
		}


.list1 {
	margin-left:12px;
	padding-bottom:18px;
}
.list1 li {
	background:url(../images/arrow1.gif) no-repeat 0 6px;
	padding:0 0 0 12px;
}



/*===== header =====*/


/*===== gallery =====*/
.roundabout-holder  { 
	width:850px;
	height:496px;
	margin:0 auto;
}
.roundabout-moveable-item {
   width: 646px;
   height: 416px;
   cursor: pointer;
	 border:3px solid #ccc;
	 border:3px solid rgba(0, 0, 0, 0.08);
   border-radius:4px;
	 -moz-border-radius:4px;
	 -webkit-border-radius:4px;
}
	.roundabout-moveable-item img{
		width:100%;
	}
.roundabout-in-focus {
	border:3px solid rgba(0, 0, 0, 0.2);
}


/*===== content =====*/
#content {
	
}
	#content img, aside img {
		border:3px solid #ebebeb;
		border-radius:4px;
		-moz-border-radius:4px;
		-webkit-border-radius:4px;
	}
	#content img:hover {
		border-color:#bbb;
	}
	

/*--- news list styles ---*/
	.news li {
		overflow:hidden;
		position:relative;
		padding:0 0 26px 84px;
	}
	.news li:last-child {
		padding-bottom:0;
	}
	
		.news li figure {
			width:59px;
			height:59px;
			background:url(../images/date-bg1.gif) no-repeat 0 0;
			position:absolute;
			left:0;
			top:0;
			text-align:center;
			border:3px solid #ebebeb;
			border-radius:4px;
			-moz-border-radius:4px;
			-webkit-border-radius:4px;
			font-size:10px;
			color:#fff;
			text-transform:uppercase;
		}
			.news li figure strong {
				display:block;
				font-size:24px;
				line-height:1.2em;
				margin-bottom:-7px;
				padding-top:4px;
			}
		
		.news li:nth-of-type(4n+2) figure {
			background:url(../images/date-bg2.gif) no-repeat 0 0;
		}
		.news li:nth-of-type(4n+3) figure {
			background:url(../images/date-bg3.gif) no-repeat 0 0;
		}
		.news li:nth-of-type(4n+4) figure {
			background:url(../images/date-bg4.gif) no-repeat 0 0;
		}




.team-list li {
	width:100%;
	overflow:hidden;
	padding-bottom:43px;
}
.team-list li:last-child {
	padding-bottom:0;
}
	.team-list li figure {
		float:left;
		margin:0 20px 0 0;
		padding:0;
	}


/*--- loopedSlider styles ---*/
/*
 * Required 
*/
#loopedSlider .wrap { width:295px; height:295px; overflow:hidden; position:relative;}
#loopedSlider .slides { position:absolute; top:0; left:0; }
#loopedSlider .slides div { position:absolute; top:0; width:295px; display:none; }
/*
 * Optional
*/
#loopedSlider { width:295px; position:relative; clear:both; }
#loopedSlider .nav-controls {
	width:100%;
	overflow:hidden;
	padding-top:10px;
}
#loopedSlider li {
	display:inline;
}
#loopedSlider li a.previous {
	float:left;
}
#loopedSlider li a.next {
	float:right;
}




/*===== footer =====*/
footer {
	color:#fff;
}
	footer .fleft {
		padding-left:40px;
	}
	footer .fright {
		padding-right:40px;
		font-family:"Microsoft Yahei", "微軟雅黑字體", "微軟正黑體", "Microsoft JhengHei", "新細明體", "Century Gothic";
	}


/*----- forms -----*/
#contacts-form { 
	clear:right;
	width:100%;
	overflow:hidden;
}
	#contacts-form fieldset { 
		border:none;
		float:left;
	}
		#contacts-form .field { 
			clear:both;
		}
			#contacts-form label { 
				float:left;
				width:110px;
				line-height:18px;
				padding-bottom:6px;
				font-weight:bold;
			}
			#contacts-form input {
				width:205px;
				padding:1px 0 1px 3px;
				background:none;
				border:1px solid #e5e5e5;
				color:#616161;
				float:left
			}
			#contacts-form input:invalid {
				border-color:red;
			}
			#contacts-form textarea { 
				width:450px;
				height:215px;
				padding:1px 0 1px 3px;
				background:none;
				border:1px solid #e5e5e5;
				color:#616161;
				margin-bottom:12px;
				overflow:auto;
				float:left;
			}
			#contacts-form div:last-child {
				padding-left:110px;
			}

/*Servers Item*/
.PicArticle{overflow:hidden;}
.PicArticle li{

	padding:2px;
	margin:0 40px 20px 40px;
	position:relative;
	float:left;
	text-align:center;

}
/*.PicArticle li:hover{border:1px solid #888;}
.PicArticle li span{position:absolute;bottom:2px;left:2px;height:24px;width:136px;background:#000;opacity:0.75;line-height:24px;overflow:hidden;}
.PicArticle li a{color:#fff;text-decoration:none;}

.PicArticle a strong {display: inline;}
.PicArticle li a:hover strong {display: inline;background: transparent url(images/viewproject_black2.png) no-repeat top left;width: 136px;height: 121px;display: block;position: relative;left: 0;bottom: 0;z-index: 900;text-indent: -9999px;}*/

.PicArticle li div {
	margin-right:3px;
	margin-bottom:3px;
	float:left;
	width:136px;
	height:100px;
	border:1px solid #999;
	position:relative;
	/*overflow:hidden;*/
}
/*Servers Item*/

/*MenuBar*/
div#menu {
margin-left:480px;
position:relative;
top:30px;
}

/* menu::base */
div#menu {
    height: 46px;
    padding-left: 22px;
    background: url(../images/menu/left.png) no-repeat;
    _background: url(../images/menu/left.gif) no-repeat;
    width:auto;
    font-family:"Microsoft Yahei", "微軟雅黑字體", "微軟正黑體", "Microsoft JhengHei", "新細明體", "Century Gothic";
    font-size:12px;
}

div#menu ul {
    margin: 0;
    padding: 0;
    list-style: none;
    float: left;
}
div#menu ul.menu {
    padding-right: 24px;
    background: url(../images/menu/right.png) no-repeat right 0;
    _background: url(../images/menu/right.gif) no-repeat right 0;    
}

div#menu li {
    position: relative;
    margin: 0;
    padding: 0;
    display: block;
    float: left;
    z-index: 9;
    width: auto;
}
div#menu ul ul li {
    z-index: 9;
}
div#menu li div {
    list-style: none;
    float: left;
    position: absolute;
    z-index: 11;
    top: 39px;
    left: -18px;
    -left: 4px;
    visibility: hidden;
    width: 180px;
	  margin: 0px 0 0 -4px;
    padding: 0; 
    background: url(../images/menu/submenu-top.png) no-repeat 0px 0;
    -background: url(../images/menu/submenu-top.gif) no-repeat 0px 0; 
}
div#menu ul ul {
	  z-index: 12;
	  width: 180px;
    padding: 0px 0px 12px 0px;
    -padding: 0px 0px 3px 0px;    
    background: url(../images/menu/submenu-bottom.png) no-repeat 0px bottom;
    -background: #E4E4E2 none;        
    margin: 14px 0 0 0;   
    -margin: 5px 0 0 0;      
}
div#menu li:hover>div {
    visibility: visible;
}

div#menu a {
    position: relative;
    z-index: 10;
    height: 38px;
    display: block;
    float: left;
    line-height: 38px;
    text-decoration: none;
    margin-top: 1px;
    white-space: nowrap;
    width: auto;
    padding-right:5px;
    text-align:center;
}
div#menu span {
    margin-top: 2px;
    padding-left: 15px;
    color: #fff;
    font: normal 13px Tahoma;
    background: none;
    line-height: 38px;	
    display: block;
    cursor: pointer;
    background-repeat: no-repeat;
    background-position: 95% 0;
    text-align: center;
}

/* menu::level1 */
div#menu a {
    padding: 0 15px 0 0;
    line-height: 38px;
    height: 46px;
    _margin-right: 1px;
    background: none;
    font-weight:bold;

}
div#menu span {
    font-weight:bold; 
}
div#menu a:hover{
    background-image: url(../images/menu/selected-sub.png);
    background-repeat: repeat-x;
    background-position: right -1px;    
    -background: url(../images/menu/selected-sub.gif) repeat-x right -1px; 
}
div#menu li.current a,
div#menu ul.menu>li:hover>a {
    background-image: url(../images/menu/selected-sub.png);
    background-repeat: repeat-x;
    background-position: right -1px;  
    -background: url(../images/menu/selected-sub.gif)  repeat-x right -1px; 
}

div#menu .current {
    background-image: url(../images/menu/selected-sub.png);
    background-repeat: repeat-x;
    background-position: right -1px;  
    -background: url(../images/menu/selected-sub.gif)  repeat-x right -1px; 
}


div#menu a:hover span{
	  color: #000000;
}	
div#menu ul.menu>li:hover>a span {
	  color: #000000;
}
div#menu li {}
div#menu li.last { background: none; }

/*MenuBar*/


/*==========================================*/

