@import "html5Reset.css";
/*@import "colorbox.css";*/
/*=================================================
	 * Primary styles
	 *
	 * Author: Cizoo
	 *
	 * Last edited date: 2011/12/09
===================================================*/

/* ******************************************************************** */ 
/*                              font-face                               */
/* ******************************************************************** */

@import url(https://fonts.googleapis.com/css?family=Josefin+Sans:700);
/*@import url(http://fonts.googleapis.com/css?family=Acme);*/
@import url(https://fonts.googleapis.com/css?family=Paytone+One);

/* ******************************************************************** */ 
/*                          Basic Structure                             */
/* ******************************************************************** */

.content .item a{
	text-decoration:underline;
	color:#555;
}

nav a{
	color:#fff;
	-webkit-transition: all 300ms linear; /*safari and chrome */
	-moz-transition: all 300ms linear; /* firefox */
	-o-transition: all 300ms linear; /* opera */
	transition: all 300ms linear;
}

body{
	font-family: Helvetica, "Helvetica Neue", Arial, sans-serif;
	font-family: "微軟正黑體", "Microsoft JhengHei", simhei,"新細明體", "PMingLiU", "細明體", "MingLiU", Helvetica, "Helvetica Neue", Arial, sans-serif\9;
	letter-spacing:2px;
	line-height:1.5em;
	font-size:0.875em;
	color: #555;
	background:#fff;
	height:100%;
	overflow-y: scroll;
}

ul li{
	
	line-height:1.4em;
}

table{
	width:100%;
	border-collapse: separate;
	border-spacing: 5px;
}

table th.grade, table th.module{
	background: #555;
	color:#fff;
}

table th.grade{
	width:23%;
}

table th.module{
	width:8%;
}

table tr th, table tr td{
	padding:5px;
}

table tr td{
	border: 1px solid #ccc;
	font-size:0.875em;
}


#wrap{
    margin: 0 auto;
    position: relative;
    width: 1000px;
}

/*-------------------- header---------------------- */
.branding{
	width: 100%;
	height:100px;
	margin-top:10px;
	background: url(../images/logo.png) no-repeat -20px;
	text-indent:-9999px;
}

.branding a{
	width:398px;
	height:101px;
	display:block;
}

.menu{
	width: 220px;
	/*height:600px;*/
	padding:10px;
	-moz-box-shadow: 5px 5px 5px rgba(0,0,0,0.3);
	-webkit-box-shadow: 5px 5px 5px rgba(0,0,0,0.3);
	box-shadow: 5px 5px 5px rgba(0,0,0,0.3);
}


hgroup, .menu, #side-copyright, .plus{
	font-family: 'Josefin Sans',  Arial, Helvetica, sans-serif;
	float:left;
}

/*-------------------- content---------------------- */

.content, ul.content_nav{
	float:left;
	width:740px;
	margin-left:20px;
	position:relative;	
}

/*.content{
	height: 555px;
}*/

.mainCol{
	float:left;
	width: 480px;
	margin-left:20px;
}

aside .item{
	width: 180px;
}

#featuredAlumi img{
	width: 180px;
	height:auto;
}


.item{
	overflow:hidden;
	background-color:rgba(255,255,255,0.9);
	position:relative;
	-moz-box-shadow: 5px 5px 5px rgba(0,0,0,0.3);
	-webkit-box-shadow: 5px 5px 5px rgba(0,0,0,0.3);
	box-shadow: 5px 5px 5px rgba(0,0,0,0.3);
	/* For IE 8 */
	-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=3, Direction=135, Color='#000000')";
	/* For IE 5.5 - 7 */
	filter: progid:DXImageTransform.Microsoft.Shadow(Strength=3, Direction=135, Color='#000000');
	margin-bottom:20px;
	padding:20px;
	float:left;
	margin-right:20px;
	background-color:#fff\9;
}


ul.content_nav li{
	padding:15px 5px;
	margin-right:15px;
	float:left;
	font-size:18px;
	font-weight:bold;
}

ul.content_nav li a{
	color:#fff;
	text-shadow: 1px 1px 1px rgba(100,100,100,0.5);
	-ms-filter:"progid:DXImageTransform.Microsoft.Shadow(Strength=6, Direction=30, Color='#436EEE')";
} 


#pagination{
	position:absolute;
	top:0%;
	right:0px;
	text-align:center;
}


.pages li a, .pages .active{
	/*width: 20px;*/
	padding: 5px 8px;
	box-shadow: 3px 3px 3px rgba(0,0,0,0.3);
	/* For IE 8 */
	-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=3, Direction=135, Color='#000000')";
	/* For IE 5.5 - 7 */
	filter: progid:DXImageTransform.Microsoft.Shadow(Strength=3, Direction=135, Color='#000000');
}

.pages li a {
	display: block;
	background: #FFF;
	color:#555;
	min-width: 20px;
}

.pages li a:hover {
	text-decoration: none;
	background:#555;
	color: #FFF;
}

.pages .active {
	font-weight: bold;
	background:#555;
	color: #FFF;
	min-width: 20px;
}


/*#detail{
	color:#999;
}*/

#detail div{
	margin-bottom:20px;
}

#detail h1{
	line-height:30px;
	font-size:24px;
	margin-bottom:10px;
	/*padding:4% 0 0 3%;*/
}

#detail h2{
	padding-bottom:10px;
	font-size:14px;
	line-height:14px;
	/*background: rgb(252,189,0);*/
	border-bottom: 1px solid #333;
	margin-bottom:10px;
	color:#333;
}


#detail h1 span{
	color:#CCC;
/*	font-size:13px;*/
}

#detail h1 span.title{
	margin-left:20px;
	color:#333;
}

span.type{
	margin-left:5px;
}

.content .item span.type a{
	text-decoration:none;
}


#detail .item{
	width:100%;
}

#detail .dl{
	width:20%;
	margin-right:3%;
	/*padding:2% 1% 2% 3%;*/
	float:left;
	/*overflow:hidden;*/
}

#detail .dl span{
	display:block;
}

#detail .dr{
	width:77%;
	float:right;
	/*padding:2% 3% 2% 1%;*/
}

#detail .dr img{
	width:570px;
	height:auto;
}

#subjectList table a{
	color:#888;
	text-decoration:none;
}

span.obligatory, #subjectList table span.obligatory a{
	color:#555;
}

/*-------------------- 2col List---------------------- */

.twoCol .item{
	width:305px;
	padding:15px; 
	position: relative; 
	float:left;  
}

#newsList .item{
	height:125px;
}

#newsContent .item a.newsfile {
	text-decoration:none;
	height:20px;
	display:block;
	line-height:20px;
	padding-left:23px;
	background:url(../images/paperclip.png) no-repeat;
}

#newsContent .item, #detail .item{
	width:100%;
	min-height:315px;
}

#newsList .item div{
	max-height:4.5em;
	overflow:hidden;
}

#newsList .item div p{
	margin-bottom:0px;
}

#facilitiesList .item{
	height:200px;
}

#facilitiesList .item img{
	max-width:305px;
	height:auto;
}

#facilities #detail .item img{
	max-width:740px;
	height:auto;
}
				
.caption{
	position: absolute; 
	top:15px;
	left:15px;
	/*opacity: .8; */
	/* For IE 5-7 */
	filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=30);
	/* For IE 8 */
	-MS-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
}

#staffList .item .caption{
	height:135px;
	width: 135px;
	background: rgba(0,0,0, 0.35);
}

#gallery .item .caption{
	height:135px;
	width: 135px;
	background: rgba(0,0,0, 0.35);
}

#facilities .item .caption{
	width: 305px;
	height:203px;
	background: rgba(0,0,0, 0.35);
}

	
.item .caption h4{
	padding:6px 10px;
	color:#FFF;
}

aside{
	float:left;
	width: 220px;
}


	

/*--------------------4col List---------------------- */



.fourCol .item{
	width:135px;
	height:135px;
	padding:15px;
	margin-right:10px;
}

.fourCol .item img{
	width:135px;
	height:135px;
}

#projectList .item{
	overflow:visible;
}


#staffList .item a{
	display:block;
	width:135px;
	height:135px;
	color:#555;
}


/* Footer */
footer{
	float:left;
	width: 220px;
	position:absolute;
	top: 680px;
	padding: 10px;
	text-align:left;
	color:#FFF;
	font-family: Helvetica, "Helvetica Neue", Arial, sans-serif;
	font-size:0.875em;
}

section{
}

.awards{
    position: absolute;
	left: -11px;
    top: -10px;
    z-index: 100;
    background: url("../images/awards.png") no-repeat scroll 0 0 transparent;
    display: block;
    width: 110px;
    height: 110px;
    overflow: hidden;
    text-indent: -8000px;
}


footer a{
	color:#fff;}
/* ******************************************************************** */ 
/*                               Styling                                */
/* ******************************************************************** */



ul li{
	padding:2px 0;
}
nav ul li{
	padding:0;
}

nav ul li span{
	font-size:12px;
	margin-left:5px;
}

nav a{
	color:#888;
	padding:10px 0 7px 0;
	text-transform: uppercase;
	font-size:24px;
	display: inline-block;
	letter-spacing:2px;
	border-bottom:2px solid #888;
	text-shadow:1px 1px 1px #fff;
}

nav a:hover{
	color:#555;
	border-bottom:2px solid #555;
}

section h1{
	font-size:18px;
	letter-spacing:0.1em;
	margin-bottom:10px;
}

article h1{
	font-size:18px;
	padding:5px 0;
}

#newsList article h1{
	font-size:14px;
}

#newsList article h1 a{
	text-decoration:none;
}

p{
	margin-bottom:10px;
}

 body#about #contact a{
	 color:#555;
	}

body#about .actived a, body#about section h1, body#about #contact a:hover{
	color:rgb(153,153,0);
}



body#news .actived a, body#news article h1, body#news article span.type, body#news article a, body#news .content_nav li a:hover{
	color:rgb(255,102,51);
}



body#gallery .actived a, body#gallery h1{
	color:rgb(49,193,212);
}

body#staff .actived a, body#staff article h1, body#staff #detail a,body#staff .content_nav li a:hover{
	color:rgb(255,102,102);
}

body#admissions .actived a, body#admissions h1{
	color:rgb(0,128,255);
}

body#subject .actived a, body#subject h1, body#subject .content_nav li a:hover{
	color:rgb(100,54,25);
}

body#facilities .actived a, body#facilities h1, body#facilities .content_nav li a{
	color:rgb(115,93,14);
}

body#download .actived a{color:rgb(80,76,77);}


/*body #wrap ul.content_nav li a:hover, body #wrap ul.content_nav li.actived a{
	color:#555;
}*/

body#download h1{
	color:rgb(110,104,105);
}

body#about{
	background:rgb(243,234,182);
}

body#about .menu{
	background:rgba(243,234,182,.8);
	background:none\9;
	-ms-filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#CCF3EAB6,endColorstr=#CCF3EAB6);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#CCF3EAB6,endColorstr=#CCF3EAB6);
	zoom: 1\9;
}
body#news{background:rgb(250,223,179);}
body#news .menu{
	background:rgba(250,223,179,.8);
	background:none\9;
	-ms-filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#CCFADFB3,endColorstr=#CCFADFB3);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#CCFADFB3,endColorstr=#CCFADFB3);
	zoom: 1\9;
}
body#gallery{background:rgb(234,218,199);}
body#gallery .menu{
	background:rgba(234,218,199,.8);
	background:none\9;
	-ms-filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#CCEADAC7,endColorstr=#CCEADAC7);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#CCEADAC7,endColorstr=#CCEADAC7);
	zoom: 1\9;
}
body#staff{background:rgb(252,225,214);}
body#staff .menu{
	background:rgba(252,225,214,.8);
	background:none\9;
	-ms-filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#CCFCE1D6,endColorstr=#CCFCE1D6);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#CCFCE1D6,endColorstr=#CCFCE1D6);
	zoom: 1\9;
}
body#subject{background:rgb(230,220,212);}
body#subject .menu{
	background:rgba(230,220,212,.8);
	background:none\9;
	-ms-filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#CCE6DCD4,endColorstr=#CCE6DCD4);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#CCE6DCD4,endColorstr=#CCE6DCD4);
	zoom: 1\9;
}
body#facilities{background:rgb(223, 208, 110);}
body#facilities .menu{
	background:rgba(223, 208, 110, .8);
	background:none\9;
	-ms-filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#CCDFD06E,endColorstr=#CCDFD06E);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#CCDFD06E,endColorstr=#CCDFD06E);
	zoom: 1\9;
}
body#download{background:rgb(251,189,142);}
body#download .menu{
	background:rgba(251,189,142,.8);
	background:none\9;
	-ms-filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#CCFBBD8E,endColorstr=#CCFBBD8E);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#CCFBBD8E,endColorstr=#CCFBBD8E);
	zoom: 1\9;
}

body#admissions{
   background:rgb(248, 219, 189);
}

ol{
	padding-left:20px;
}



.plus{
	width:21px;
	height:21px;
	position: absolute;
	top:10px;
	right:7px;
	background:url(/assets/css/images/plus.png) 0 0 no-repeat;
	z-index:100;
}

.plus:hover{
	background-position: bottom;
}


.close{
	width:21px;
	height:21px;
	position: absolute;
	top:10px;
	right:7px;
	background:url(images/close.png) 0 0 no-repeat;
}

.close:hover{
	background-position: bottom;
}

.file{
	width:21px;
	height:21px;
	position: absolute;
	top:10px;
	right:7px;
	background:url(images/file.png) 0 0 no-repeat;
}

.file:hover{
	background-position: bottom;
}

.arrow-right {
	width: 0;
	height: 0;
	border-top: 30px solid transparent;
	border-bottom: 30px solid transparent;
	border-left: 40px solid rgba(255,255,255,0.5);
	position: absolute;
	bottom:3%;
	right:-15px;
}

.arrow-left {
	width: 0;
	height: 0;
	border-top: 30px solid transparent;
	border-bottom: 30px solid transparent;
	border-right: 40px solid rgba(255,255,255,0.5);
	position: absolute;
	bottom:3%;
	left:-55px;
}

.arrow-left:hover {
	border-right: 40px solid rgba(70,70,70,0.5);
}

.arrow-right:hover {
	border-left: 40px solid rgba(70,70,70,0.5);
}

.hidden{
	display: none;
}

/* ******************************************************************** */ 
/*                               Slideshow                              */
/* ******************************************************************** */

.faciSlider {
  position: relative;
  list-style: none;
  overflow: hidden;
  width: 740px;
  height:494px;
  }

.faciSlider li {
  position: absolute;
  display: none;
  width: 100%;
  left: 0;
  top: 0;
  }

.faciSlider li:first-child {
  position: relative;
  display: block;
  float: left;
  }

.faciSlider img {
  display: block;
  height: auto;
  float: left;
  width: 100%;
  border: 0;
  }
  
/* ******************************************************************** */ 
/*                               Supersized                             */
/* ******************************************************************** */

/*

	Supersized - Fullscreen Slideshow jQuery Plugin
	Version : 3.2.4
	Site	: www.buildinternet.com/project/supersized
	
	Author	: Sam Dunn
	Company : One Mighty Roar (www.onemightyroar.com)
	License : MIT License / GPL License
	
*/
	
	#supersized-loader { position:absolute; top:50%; left:50%; z-index:0; width:60px; height:60px; margin:-30px 0 0 -30px; text-indent:-999em; background:url(/assets/images/progress.gif) no-repeat center center;}
	
	#supersized {  display:block; position:fixed; left:0; top:0; overflow:hidden; z-index:-999; height:100%; width:100%; }
		#supersized img { width:auto; height:auto; position:relative; display:none; outline:none; border:none; }
			#supersized.speed img { -ms-interpolation-mode:nearest-neighbor; image-rendering: -moz-crisp-edges; }	/*Speed*/
			#supersized.quality img { -ms-interpolation-mode:bicubic; image-rendering: optimizeQuality; }			/*Quality*/
		
		#supersized li { display:block; list-style:none; z-index:-30; position:fixed; overflow:hidden; top:0; left:0; width:100%; height:100%; background:#111; }
		#supersized a { width:100%; height:100%; display:block; }
			#supersized li.prevslide { z-index:-20; }
			#supersized li.activeslide { z-index:-10; }
			#supersized li.image-loading { background:#111 url(../images/progress.gif) no-repeat center center; width:100%; height:100%; }
				#supersized li.image-loading img{ visibility:hidden; }
			#supersized li.prevslide img, #supersized li.activeslide img{ display:inline; }



#ieworning{
	
	background: #414042;
	color: white;
	text-align: center;
	width:350px;
	height: 160px;
	position: absolute;
	left:50%;
	margin-left: -175px;
	top:50%;
	margin-top: -125px;
	display: block;
	z-index: 999;
	letter-spacing: 1px;
	font-style: 14px;
	padding-top:40px;
	-webkit-box-shadow:  5px 5px 10px 2px rgba(1, 1, 1, 0.7);
        
        box-shadow:  5px 5px 10px 2px rgba(1, 1, 1, 0.7);

}

#worningclose{

	position: relative;
	top:-170px;
	left:155px;
	cursor: pointer;
}

#home{
	background: rgb(248, 219, 189);
}