﻿/**
 * This file is part of CSIE Core <Ver:1.35x> <csie.net>
 *
 *  CSIE Core Code is free software: you can redistribute it and/or modify
 *  it under the terms of the GNU Lesser Public License as published by
 *  the Free Software Foundation, either version 3 of the License, or
 *  (at your option) any later version.
 *  CSIE Core Code is distributed in the hope that it will be useful,
 *  but WITHOUT ANY WARRANTY; without even the implied warranty of
 *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 *  GNU Lesser Public License for more details.
 *  Team Web:csie
 *  You should have received a copy of the GNU Lesser Public License
 *  along with CSIE Core Code.  If not, see <http://www.gnu.org/licenses/>.
 *  Web build Peng Dabay @CSIE
 *  Web Core ANGCL Team @CSIE
 *  Updated on:09/2015
 */ 
/*底板與全域樣式*/

html{

}

body{
	background-image: url(http://www.cust.edu.tw/www/img/layout/public_style_01/body_bg.jpg);
	font-family: \5FAE\8EDF\6B63\9ED1\9AD4,\65B0\7D30\660E\9AD4,Tahoma,PMingLiU;
	padding: 0;
}

body:before{
	position: absolute;
	content: '';
	height: 300px;
	width: 100%;
	background-image: url(http://www.cust.edu.tw/www/img/layout/public_style_01/body_top_bg.jpg);
}

		.bar-inner{
			min-width: 970px;
		}

	#wrapper{
		position: relative;
		background-color: #fff;
		width: 970px;
		margin: 0 auto;
		box-shadow: 0 0 6px #888;
	}

		#header{
			position: relative;
			padding-top: 65px;
			background-image: url(http://www.cust.edu.tw/www/img/layout/public_style_01/header_bg.jpg);
			background-size: 100% 100%;
			background-repeat: no-repeat;
		}

			.title{
				display: inline-block;
				border-left: 10px solid #339cd8;
				padding-left: 15px;
			}

			.title:hover{
				border-left-color: #08c;
			}

				.title h1{
					font-size: 1.5em;
					font-weight: 500;
					color: #339cd8;
					letter-spacing: 1px;
					margin: 0;
				}

				.title:hover h1{
					color: #059;
				}

				.title p{
					margin: 5px 0 0;
					font-size: 0.8em;
					color: #555;
				}

				.title:hover p{
					color: #000;
				}

			.header_top_menu{
				position: absolute;
				right: 10px;
				top: 66px;
				padding: 6px 8px;
				background-color: #339cd8;
				border-radius: 5px; 
			}

				.header_top_menu li{
					display: inline;
					padding: 0 ;
				}

					.header_top_menu li a{
						vertical-align: top;
						font-size: 0.8em;
						padding: 0 10px 0 5px;
						border-right: 1px solid #fff;
						color: #fff;
						text-shadow: 1px 1px #059;
					}

					.header_top_menu li:last-child a{
						border-right: 0;
						padding-right: 5px;
					}

					.header_top_menu li a:hover{
						color: #f0f0f0;
					}

		nav{
			position: absolute;
			*position: relative;
			z-index: 1;
			width: 94%;
			margin-top: 20px;
			*margin-bottom: -20px;
			left: 3%;
			border-radius: 5px;
			color: #fff;
			background-color: #339cd8;
			background-image: -webkit-gradient(linear, center top, center bottom, color-stop(48%, #339cd8), color-stop(52%, #008bd8));
			background-image: -webkit-linear-gradient(top, #339cd8 48%, #008bd8 52%);
			background-image: -moz-linear-gradient(top, #339cd8 48%, #008bd8 52%);
			background-image: -ms-linear-gradient(top, #339cd8 48%, #008bd8 52%);
			background-image: -o-linear-gradient(top, #339cd8 48%, #008bd8 52%);
			background-image: linear-gradient(to bottom, #339cd8 48%, #008bd8 52%); 
			box-shadow: 0 3px 6px #059; 
		}

			.main_nav{
				width: 98%;
				margin: 0 auto;
			}

				.main_nav li{
					width: 12.5%;
					*width: 12.4%;
					float: left;
					text-align: center;
					position: relative;
				}

				.main_nav li:hover ul{
					display: block;
				}

				.main_nav li:first-child{
					border-radius: 5px 0 0 5px;
				}

				.main_nav li:nth-child(10){
					border-radius: 0 5px 5px 0;
				}

					.main_nav li:first-child:before{
						content: none;
						display: none;
					}

					.main_nav > li:before{
						position: absolute;
						content: '';
						width: 1px;
						height: 60%;
						left: 0;
						top: 20%;
						background-color: #007cb6;
					}

					.main_nav > li:after{
						position: absolute;
						content: '';
						width: 1px;
						height: 60%;
						right: 0;
						top: 20%;
						background-color: #33acff;
					}

					.main_nav li:hover:before{
						content: none;
						display: none;
					}

					.main_nav li:hover:after{
						content: none;
						display: none;
					}

					.main_nav li:last-child:after{
						content: none;
						display: none;
					}

					.main_nav a{
						display: block;
						width: 100%;
						padding: 10px 0;
						font-size: 0.9em;
						color: #fff;
						letter-spacing: 1px;
						text-shadow: 1px 1px #007cb6;
					}

					.main_nav > li > a:hover{
						background-color: #059;
						background-image: -webkit-gradient(linear, center top, center bottom, color-stop(96%, #059), color-stop(100%, #00386d));
						background-image: -webkit-linear-gradient(top, #059 96%, #00386d 100%);
						background-image: -moz-linear-gradient(top, #059 96%, #00386d 100%);
						background-image: -ms-linear-gradient(top, #059 96%, #00386d 100%);
						background-image: -o-linear-gradient(top, #059 96%, #00386d 100%);
						background-image: linear-gradient(to bottom, #059 96%, #00386d 100%);
					}

						.main_nav ul{
							display: none;
							position: absolute;
							left: 0;
							top: 100%;
							width: 100%;
							background-color: #059;
							background-image: -webkit-gradient(linear, center bottom, center top, color-stop(96%, #059), color-stop(100%, #00386d));
							background-image: -webkit-linear-gradient(bottom, #059 96%, #00386d 100%);
							background-image: -moz-linear-gradient(bottom, #059 96%, #00386d 100%);
							background-image: -ms-linear-gradient(bottom, #059 96%, #00386d 100%);
							background-image: -o-linear-gradient(bottom, #059 96%, #00386d 100%);
							background-image: linear-gradient(to top, #059 96%, #00386d 100%);
							box-shadow: 0 2px 4px #000;
						}

						.main_nav ul:hover{
							*display: block;
						}

							.main_nav ul li{
								width: 100%;
								float: none;
							}

								.main_nav ul a{
									width: 94%;
									margin: 6px auto;
									padding: 8px 0;
									border-radius: 5px;
								}

								.main_nav ul a:hover{
									background-color: #339cd8;
									text-shadow: 1px 1px #007cb6;
								}

							.main_nav ul:after{
								display: block;
								content: '';
								width: 100%;
								height: 4px;
								background-color: #008bd8;
							}

				.main_nav:after{
					display: block;
					content: '';
					height: 0;
					visibility: hidden;
					clear: both;
				}

		#container{
			width: 97%;
			margin: 38px auto 20px;
			*margin: 0 auto;
		}

			#pic{

			}

				.ctrl_dom{
					*width: 50px !important;
					*height: 50px !important;
				}

			.content{

			}

				.share{
					margin-top: 30px;
					margin-bottom: -30px;
				}

					.share li{
						width: 20px;
						float: right;
						margin-right: 16px;
					}

						.share a{
							display: block;
							height: 20px;
							width: 20px;
							background: #08c;
							border-radius: 2px;
							background-image: url(http://www.cust.edu.tw/www/img/layout/share.jpg);
							background-size: 300% 100%;
							background-repeat: no-repeat;
						}

						.twitter{
							background-position: 50% !important;
						}

						.google{
							background-position: 100% !important;
						}

						.facebook{
							background-position: 0;
						}

				.content hgroup{
					width: 100%;
					padding-top: 10px;
				}

				.content article{
					width: 98%;
					margin: 0 auto;
					padding-bottom: 10px;
					*margin-bottom: 10px;
				}

					.content article:after{
						display: block;
						content: '';
						height: 0;
						visibility: hidden;
						clear: both;
					}

				.content h3{
					font-size: 1.4em;
					font-weight: 500;
					color: #339cd8;
				}

					.content hgroup h3{
						margin: 18px 0;
						*margin: 22px 0 0;
					}

					.content hgroup h5{
						font-size: 1.2em;
						margin: 0 0 18px;
						*margin: 22px 0 0;
						color: #555;
						line-height: 1.4;
					}

				.content h4{
					font-size: 1.2em;
					font-weight: 500;
					color: #555;
				}

					.content article h4{
						margin: 30px 0 10px;
						font-weight: 600;
					}

					.content article h4:first-child{
						margin: 20px 0 10px;
					}

				.content h5{
					font-size: 1.3em;
					font-weight: 500;
					color: #339cd8;
				}

				.content p{
					font-size: 0.9em;
					text-indent: 2em;
					line-height: 1.4;
				}

					.content article p{
						
					}

						.content article p img{
							float: left;
							margin-right: 15px;
							margin-bottom: 5px;
						}

				.content img{
					border: 4px solid #fff;
					*border: 1px solid #fff;
					box-shadow: 0 0 6px #888;
				}

				.content > img{
					width: 80%;
					display: block;
					margin: 0 auto;
				}

				.content table{

				}

					.content th{
						background-color: #339cd8;
						color: #fff;
						padding: 5px 0;
						text-shadow: 1px 1px #059;
						text-align: left;
						font-size: 0.9em;
						text-indent: 0.9em;
					}

					.content td{

					}

					.content th,td{
						_padding: 10px 0;
					}

					.content article:after{
						display: block;
						content: '';
						height: 0;
						visibility: hidden;
						clear: both;
					}

				.content ul{

				}

					.content article ul{
						padding-left: 40px;
						list-style-type: square;
						line-height: 1.8;
					}

				.content:after{
					display: block;
					content: '';
					height: 0;
					visibility: hidden;
					clear: both;
				}

		#footer{
			position: relative;
			background-color: #f5f5f5;
			padding: 10px 0 20px;
			border-top: 1px solid #ddd;
		}

			#footer:before{
				display: block;
				position: absolute;
				content: '';
				width: 40px;
				height: 40px;
				top: 16px;
				left: 15px;
				background-image: url(http://www.cust.edu.tw/www/img/layout/s_logo.png);
				background-size: 100% 100%;
				background-repeat: no-repeat;

			}

			#footer ul{
				padding: 35px 0 0 70px;
			}

				#footer ul:before{
					position: absolute;
					display: block;
					content: 'design by computer center ; Gec maintain by Csie Core Processor 2.x';
					color: #aaa;
					height: 20px;
					top: 16px;
					left: 68px;
					border-bottom: 1px solid #ddd;
					letter-spacing: 1px;
				}

				#footer li{
					line-height: 1.4;
				}

					#footer a{

					}

/*index樣式*/

.main{
	width: 75%;
	float: left;
	_margin-top: -20px;
}

	.bulletin{
		position: relative;
		width: 96%;
		padding-bottom: 20px;
	}

	.bulletin:first-child{
		margin-top: 30px;
	}

		.bulletin h4{
			width: 92%;
			font-size: 1.4em;
			position: relative;
			z-index: 3;
			margin: 20px 0 2px;
			padding-bottom: 6px;
			border-bottom: 1px dotted #ddd;
		}

		.bulletin iframe{
			margin-top: -30px;
			width: 100%;
			height: 480px;
		}

		.bulletin ul{
			
		}

			.more{
				position: absolute;
				top: 0;
				*top: 10px;
				right: 0;
				font-size: 0.9em;
			}

				.more a{
					display: block;
					padding: 2px 8px;
					font-size: 0.9em;
					color: #fff;
					border-radius: 5px;
					background-color: #888;
				}

				.more a:hover{
					font-size: 0.9em;
					background-color: #555;
				}

	.bulletin_text{
		_overflow: hidden;
	}

			.bulletin_text li{
				padding: 10px 0;
				border-bottom: 1px dotted #ddd;
				overflow: hidden;
				white-space: nowrap; 
				text-overflow: ellipsis;
			}

				.bulletin_text li a{
					line-height: 1.4;
					color: #888;
				}

					.date{
						display: inline-block;
						margin-right: 10px;
						color: #08c;
					}

	.bulletin_pic{

	}

			.bulletin_pic li{
				width: 33.3%;
				float: left;
				margin: 10px 0;
			}

				.bulletin_pic li a{

				}

					.bulletin_pic img{
						display: block;
						width: 92%;
						border: 4px solid #fff;
						box-shadow: 0 0 4px #888;
						margin: 0 auto;
					}

					.bulletin_pic p{
						width: 96%;
						margin: 6px auto 0;
						height: 19px;
						overflow: hidden;
						white-space: nowrap; 
						text-overflow: ellipsis;
						text-indent: 0;
					}

		.bulletin_pic ul:after{
			display: block;
			content: '';
			height: 0;
			visibility: hidden;
			clear: both;
		}

.side{
	width: 25%;
	float: left;
}

	.block{
		position: relative;
		padding: 20px 0;
		background-color: #f0f0f0;
		margin: 10px 0;
	}

		.block > ul,.block > h5,.block > p{
			width: 90%;
			margin: 0 auto;
		}

		.block h5{
			margin-bottom: 2px;
			padding-bottom: 6px;
			border-bottom: 1px solid #339cd8;
		}

		.block .more{
			top: 20px;
			right: 10px;
		}

			.block .more a{
				background-color: #339cd8;
			}

			.block .more a:hover{
				background-color: #059;
			}

	.about{

	}

		.about img{
			float: left;
			max-width: 90px;
			border: 4px solid #fff;
			box-shadow: 0 0 4px #888;
			margin-right: 10px;
		}

		.about p{
			text-indent: 2em;
			line-height: 1.4;
			margin-top: 20px;
		}

	.links{

	}

		.links ul{
			padding-top: 6px;
		}

			.links li{
				padding: 10px 0;
			}

			.links li:last-child{
				padding-bottom: 0;
			}

				.links li a{
					color: #555;
				}

				.links li a:hover{
					color: #888;
				}

					.links img{
						display: block;
						width: 98%;
						margin: -6px auto;
						border: 1px solid #ddd;
						box-shadow: 0 0 4px #888
					}

	.pics{
		background-color: #fff;
		padding: 10px 0;
	}

		.pics li{
			padding: 4px 0;
			*padding: 2px;
		}

			.pics li a{
				
			}

				.pics img{
					display: block;
					margin: 0 auto;
					width: 92%;
					border: 4px solid #fff;
					box-shadow: 0 0 4px #888;
					*border: 0;
				}

/*text樣式*/

/*table樣式*/

/*list樣式*/

/*news樣式*/

article .bulletin_text{
	width: 100%;
	padding-bottom: 0;
}

	article .bulletin_text ul{
		padding-left: 0;
	}

		article .bulletin_text li{

		}

		article .bulletin_text li:last-child{
			border-bottom: 0;
		}

/*interduce樣式*/

.interduce{
	width: 439px;
	margin: 10px;
	_margin: 10px 6px;
	border: 1px solid #ddd;
	float: left;
	background-color: #f5f5f5;
}

	.interduce img{
		width: 110px !important;
		height: 130px !important;
		margin: 10px;
		float: left;
		*border: 1px solid #ddd;
	}

	.content .interduce ul{
		margin: 8px 10px;
		padding: 0;
		list-style: none;
		width: 280px;
		height: 215px;
		overflow: hidden;
		line-height: 1.3;
		*line-height: 1.2;
		float: left;
		font-size: 0.9em;
	}

		.interduce li{
			width: 100%;
			overflow: hidden;
			white-space: nowrap; 
			text-overflow: ellipsis;
		}

		.interduce li:first-child{
			font-size: 1.1em;
			line-height: 1.8;
			font-weight: 600;
		}

/*album樣式*/
.content .pic_pops img{
	width: 30%;
	margin: 10px;
}

	.img_href{
		display: block;
		width: 25%;
		*width: 24.9%;
		padding: 10px 0;
		float: left;
	}

		.img_href div{
			width: 90%;
			height: 120px;
			margin: 0 auto;
			border: 5px solid #fff;
			border-bottom: 26px solid #fff;
			box-shadow: 0 0 4px #888;
			*border: 1px solid #888;
			background-size: cover;
			background-position: center;
			background-repeat: no-repeat;
		}
				/*-------------[GEC Processor by CSIE Core 2015]-------------*/
							.main_nav ul ul {
			display: block;
            position: absolute;
            left: 100%;
            top: 0;
            }
            .main_nav ul a {
			width: 94%;
			margin: 6px auto;
			padding: 8px 0;
			border-radius: 5px;
 		}
 		.main_nav ul li:hover > ul{
			display: block;
			width: 94%;
			margin: 6px auto;
			padding: 8px 0;
			border-radius: 5px;
}
				.main_nav li:hover ul ul{
					display: block;
					}
			.main_nav ul{
				display: none;
				float: left;
				position: absolute;			
				left: 0;	
				margin: 0;
			}
