/*========================================================================
	Reset CSS
========================================================================*/
@media screen{
	html, body, div, span, applet, object, iframe,
	h1, h2, h3, h4, h5, h6, p, blockquote, pre,
	a, abbr, acronym, address, big, cite, code,
	del, dfn, em, font, img, ins, kbd, q, s, samp,
	strike, strong, sub, sup, tt, var,
	b, u, i, center,
	dl, dt, dd, ol, ul, li,
	fieldset, form, label, legend,
	table, caption, tbody, tfoot, thead, tr, th, td {
		margin: 0;
		padding: 0;
		border: 0;
		outline: 0;
		font-size: 100%;
		vertical-align: baseline;
		background: transparent;
	}
	body {
		line-height: 1.2em;
	}
	ol, ul {
		list-style: none;
	}
	blockquote, q {
		quotes: none;
	}
	blockquote:before, blockquote:after,
	q:before, q:after {
		content: '';
		content: none;
	}
	/* remember to define focus styles! */
	:focus {
		outline: 0;
	}
	/* tables still need 'cellspacing="0"' in the markup */
	table {
		border-collapse: collapse;
		border-spacing: 0;
	}
	.clear{
		clear: both;
	}
	.image-replacement{
		position: relative;
		text-indent: -9999px;
	}
}
/*========================================================================
	General + background
========================================================================*/
@media screen{
	html{
		background: white url(../images/background.png) repeat-x scroll center bottom;
		background-attachment: fixed;
		height: 100%;
	}
	body{
		background: url(../images/background_top.png) repeat-x scroll center top;	/* background: sky */
		font-family:"微軟正黑體","儷黑Pro","Lucida Grande","Lucida Sans Unicode",Arial,Verdana,sans-serif;
		text-align: center;
		min-height: 100%;
		height: 100%;
	}
}
/*========================================================================
	wrapper + page
========================================================================*/
@media screen{
	#wrapper{
		background: url(../images/menu_bg.png) repeat-y scroll left top;
		width: 60em;
		min-height: 100%;
		height: auto !important;
		height: 100%;
		margin: 0 auto -84px;
	}
	#cloud{
		background: url(../images/wrapper_bg.png) no-repeat scroll right top;	/* background: cloud */
		width: 33.625em;	height: 4.188em;
		position: absolute;
		right: 0;
	}
	#page{
		background: url(../images/menu_bg.png) repeat-y scroll left top;
		/* margin: 0 auto -341px; */
		margin: 0 auto -84px;
		text-align: left;
		min-width: 960px;
		width: 60em;
		min-height: 100%;
		height: auto !important;
		height: 100%;
	}
}
/*========================================================================
	header
========================================================================*/
@media screen{
	#header{
		background: url(../images/header_bg.png) no-repeat scroll right top;
		height: 17.125em;
		position: relative;
	}
	.logo{
		background: url(../images/sykg_logo.png) no-repeat scroll left top;
		margin: 0 auto;
		width: 29.875em; height: 3.813em;
		top: 0.25em; left: -7.313em;
	}
	#banners{
		position: absolute;
		width: 100%;	height: 12.5em;
		top: 4.688em;
	}
	#kite{
		background: url(../images/kite.png) no-repeat scroll left top;
		width: 14.813em;	height: 14.75em;
		top: 183px; left: 47.5em;
		position: absolute;
	}
}
/*========================================================================
	header - banners
========================================================================*/
@media screen{
	#banner1_wrapper, #banner2_wrapper, #banner3_wrapper, #banner4_wrapper, #banner5_wrapper, #banner6_wrapper{
		height: 200px;
		top: 0px;
		position: absolute;
	}
	#banner1_wrapper{
		width: 130px;
	}
	#banner2_wrapper{
		width: 110px;
		left: 132px;
	}
	#banner3_wrapper{
		width: 162px;
		left: 244px;
	}
	#banner4_wrapper{
		width: 214px;
		left: 408px;
	}
	#banner5_wrapper{
		width: 132px;
		left: 624px;
	}
	#banner6_wrapper{
		width: 202px;
		left: 758px;
	}
	#banner_mask{
		background: url(../images/banner_mask.png) no-repeat scroll left top;
		width: 960px;	height: 200px;
		position: absolute;
	}
}
/*========================================================================
	menu
========================================================================*/
@media screen{
	#menu{
		width: 14.375em;
		float: left;
		min-height: 320px;
	}
	#menu a{
		width: 14.375em;	height: 2em;
		display: block;
	}
	#menu .submenu{
		height: 25px;
	}
	#menu .submenu a{
		margin-left: 82px;
		width: 148px;
		height: 25px;
	}
 	#menu .about a{
		background: url("../images/menu_about.png") no-repeat;
	}
	#menu .about1 a{
		background: url("../images/menu_about1.png") no-repeat;
	}
	#menu .about2 a{
		background: url("../images/menu_about2.png") no-repeat;
	}
	#menu .about3 a{
		background: url("../images/menu_about3.png") no-repeat;
	}
	#menu .about4 a{
		background: url("../images/menu_about4.png") no-repeat;
	}
	#menu .about5 a{
		background: url("../images/menu_about5.png") no-repeat;
	}
	#menu .contact a{
		background: url("../images/menu_contact.png") no-repeat;
	}
	#menu .contact1 a{
		background: url("../images/menu_contact1.png") no-repeat;
	}
	#menu .contact2 a{
		background: url("../images/menu_contact2.png") no-repeat;
	}
	#menu .parents a{
		background: url("../images/menu_parents.png") no-repeat;
	}
	#menu .parents1 a{
		background: url("../images/menu_parents1.png") no-repeat;
	}
	#menu .parents2 a{
		background: url("../images/menu_parents2.png") no-repeat;
	}
	#menu .parents3 a{
		background: url("../images/menu_parents3.png") no-repeat;
	}
	#menu .campus a{
		background: url("../images/menu_campus.png") no-repeat;
	}
	#menu .campus1 a{
		background: url("../images/menu_campus1.png") no-repeat;
	}
	#menu .campus2 a{
		background: url("../images/menu_campus2.png") no-repeat;
	}
	#menu .campus3 a{
		background: url("../images/menu_campus3.png") no-repeat;
	}
	#menu .campus4 a{
		background: url("../images/menu_campus4.png") no-repeat;
	}
	#menu .activities a{
		background: url("../images/menu_activities.png") no-repeat;
	}
	#menu .activities1 a{
		background: url("../images/menu_activities1.png") no-repeat;
	}
	#menu .activities2 a{
		background: url("../images/menu_activities2.png") no-repeat;
	}
	#menu .activities3 a{
		background: url("../images/menu_activities3.png") no-repeat;
	}
	#menu .photos a{
		background: url("../images/menu_photos.png") no-repeat;
	}
	#menu .photos1 a{
		background: url("../images/menu_photos1.png") no-repeat;
	}
	#menu .photos2 a{
		background: url("../images/menu_photos2.png") no-repeat;
	}
	#menu .photos3 a{
		background: url("../images/menu_photos3.png") no-repeat;
	}
	#menu a{
		background: no-repeat scroll left top;
	}
	#menu a:hover, #menu a.current{
		background-position: left bottom;
	}
}
/*========================================================================
	content
========================================================================*/
@media screen{
	#contents{
		min-height: 100%;
		width: 550px;	/* orignal: 580px */
		float: right;
		margin: 0px 130px 150px 50px;
		font-size: 1em;
	}
	#contents h1{
		font-size: 1.1em;
		margin-top: 1.875em;
		margin-bottom: 0.625em;
	}
	#contents p, #contents iframe, #contents td{
		padding-top: 20px;
		line-height: 1.358em;
	}
	#contents  .table_with_borders td{
		border: 1px solid black;
	}
	
	#contents td{
		padding: 0px 13px;
	}
	#contents.about1 td{
		width: 278px;
	}
	#contents.about1 h1, #contents.about2 h1, #contents.about3 h1, #contents.about4 h1, #contents.about5 h1{
		color: blue;
	}
	#contents.about1 td.date{
		width: 148px;
		text-align: right;
	}
	#contents.about2 td{
		border: 1px solid;
	}
	#contents.about1 img.photo, #contents.about3 img.photo, #contents.about4 img.photo{
		width: 165px; height: 119px;
	}
	#contents.about4 img.photo2{
		width: 275px; height: 196px;
	}
	#contents.about5 img.photo{
		width: 240px; height: 180px;
	}
	#contents.photoalbum div.photo_holder{
		width: 162px;
		float: left;
		text-align: center;
	}
	#contents.photoalbum img{
		width: 150px;
		margin: 1px 1px;
		border: 5px solid white;
	}
	
	/* subtitles image-replacement */
	#contents.about1 #about1_01{
		background: url("../images/subtitle_about1_01.png") no-repeat;
		width: 300px; height: 55px;
	}
	#contents.about1 #about1_02{
		background: url("../images/subtitle_about1_02.png") no-repeat;
		width: 202px; height: 41px;
	}
	#contents.about1 #about1_03{
		background: url("../images/subtitle_about1_03.png") no-repeat;
		width: 234px; height: 43px;
	}
	#contents.about1 #about1_04{
		background: url("../images/subtitle_about1_04.png") no-repeat;
		width: 233px; height: 42px;
	}
	#contents.about1 #about1_06{
		background: url("../images/subtitle_about1_06.png") no-repeat;
		width: 274px; height: 58px;
	}
	#contents.about2 #about2_01{
		background: url("../images/subtitle_about2_01.png") no-repeat;
		width: 309px; height: 57px;
	}
	#contents.about2 #about2_02{
		background: url("../images/subtitle_about2_02.png") no-repeat;
		width: 207px; height: 53px;
	}
	#contents.about2 #about2_03{
		background: url("../images/subtitle_about2_03.png") no-repeat;
		width: 309px; height: 57px;
	}
	#contents.about2 #about2_04{
		background: url("../images/subtitle_about2_04.png") no-repeat;
		width: 223px; height: 56px;
	}
	#contents.about3 #about3_01{
		background: url("../images/subtitle_about3_01.png") no-repeat;
		width: 252px; height: 80px;
	}
	#contents.about3 #about3_02{
		background: url("../images/subtitle_about3_02.png") no-repeat;
		width: 333px; height: 49px;
	}
	#contents.about3 #about3_03{
		background: url("../images/subtitle_about3_03.png") no-repeat;
		width: 224px; height: 80px;
	}
	#contents.about3 #about3_04{
		background: url("../images/subtitle_about3_04.png") no-repeat;
		width: 187px; height: 76px;
	}
	#contents.about3 #about3_05{
		background: url("../images/subtitle_about3_05.png") no-repeat;
		width: 204px; height: 83px;
	}
	#contents.about3 #about3_06{
		background: url("../images/subtitle_about3_06.png") no-repeat;
		width: 167px; height: 78px;
	}
	#contents.about3 #about3_07{
		background: url("../images/subtitle_about3_07.png") no-repeat;
		width: 193px; height: 33px;
	}
	#contents.about3 #about3_08{
		background: url("../images/subtitle_about3_08.png") no-repeat;
		width: 190px; height: 62px;
	}
	#contents.about3 #about3_09{
		background: url("../images/subtitle_about3_09.png") no-repeat;
		width: 230px; height: 78px;
	}
	#contents.about4 #about3_01{
		background: url("../images/subtitle_about4_01.png") no-repeat;
		width: 190px; height: 70px;
	}
	#contents.about4 #about4_02{
		background: url("../images/subtitle_about4_02.png") no-repeat;
		width: 248px; height: 95px;
	}
	#contents.about4 #about4_03{
		background: url("../images/subtitle_about4_03.png") no-repeat;
		width: 284px; height: 74px;
	}
	#contents.about4 #about4_04{
		background: url("../images/subtitle_about4_04.png") no-repeat;
		width: 263px; height: 49px;
	}
	#contents.about5 #about5_01{
		background: url("../images/subtitle_about5_01.png") no-repeat;
		width: 281px; height: 64px;
	}
	#contents.about5 #about5_02{
		background: url("../images/subtitle_about5_02.png") no-repeat;
		width: 255px; height: 63px;
	}
	#contents.about5 #about5_03{
		background: url("../images/subtitle_about5_03.png") no-repeat;
		width: 260px; height: 70px;
	}
	#contents.contact1 #contact1_01{
		background: url("../images/subtitle_contact1_01.png") no-repeat;
		width: 210px; height: 81px;
	}
	#contents.contact2 #contact2_01{
		background: url("../images/subtitle_contact2_01.png") no-repeat;
		width: 209px; height: 60px;
	}
}
/*========================================================================
	floor plan
========================================================================*/
@media screen{
	#floorPlan{
		width: 508px;	height: 464px;
		position: relative;
	}
	#floorPlan a{
		position: absolute;
		display: block;
		text-indent: -1000em;
		background: url("../images/blank.png");
	}
	#floorPlan a:hover{
		border: 1px solid #fff;
	}
	#floorPlan .fp01 a{
		top: 230px;		left: 235px;
		width: 70px;	height: 65px;
	}
	#floorPlan .fp02 a{
		top: 118px;		left: 110px;
		width: 122px;	height: 116px;
	}
	#floorPlan .fp08 a{
		top: 293px;		left: 140px;
		width: 100px;	height: 71px;
	}
	#floorPlan .fp09 a{
		top: 365px;		left: 140px;
		width: 100px;	height: 60px;
	}
	#floorPlan .fp10 a{
		top: 425px;		left: 140px;
		width: 100px;	height: 35px;
	}
	#floorPlan .fp11 a{
		top: 102px;		left: 232px;
		width: 272px;	height: 30px;
	}
	#floorPlan .fp12 a{
		top: 134px;		left: 470px;
		width: 35px;	height: 100px;
	}
	#floorPlan .fp13 a{
		top: 2px;		left: 470px;
		width: 35px;	height: 100px;
	}
	#floorPlan .fpc1 a{
		top: 364px;		left: 1px;
		width: 100px;	height: 97px;
	}
	#floorPlan .fpc2 a{
		top: 267px;		left: 1px;
		width: 100px;	height: 97px;
	}
	#floorPlan .fpc3 a{
		top: 134px;		left: 297px;
		width: 87px;	height: 100px;
	}
	#floorPlan .fpc4 a{
		top: 134px;		left: 384px;
		width: 86px;	height: 100px;
	}
	#floorPlan .fpc5 a{
		top: 2px;		left: 400px;
		width: 70px;	height: 100px;
	}
}
/*========================================================================
	footer
========================================================================*/
@media screen{
	#footer, .push{
		/* height: 341px; */
		height: 84px;
	}
	#footer{
		position: relative;
		margin: 0 auto;
		text-align: center;
	}
	#footer_wrapper{
		/* margin: 0 auto -341px; */
		margin: 0 auto -84px;
		text-align: left;
		min-width: 960px;
		width: 60em;
		/* min-height: 341px; */
		min-height: 84px;
		height: auto !important;
		/* height: 341px; */
		height: 84px;
		position: relative;
	}
	#footer_wrapper p{
		position: absolute;
		top: 46px;	left: 300px;
	}
	#footer{
		background: url(../images/background_bottom.png) no-repeat scroll center bottom;
	}
	#boy{
		background: url(../images/boy.png) no-repeat scroll right top;
		width: 3.125em;	height: 5.375em;
		top: -28px; left: 3.125em;
		position: absolute;
	}
	#boy:hover{
		background-position: left top;
	}
	#penguin{
		background: url(../images/penguin.png) no-repeat scroll left top;
		width: 113px;	height: 315px;
		top: -257px;	left: 824px;
		position: absolute;
	}
	#crocodile{
		background: url(../images/crocodile.png) no-repeat scroll left top;
		width: 133px;	height: 178px;
		top: -120px;	left: 733px;
		position: absolute;
	}
	#crocodile:hover{
		background-position: right top;
	}
}

/*========================================================================
	for browsers fix
========================================================================*/
@media screen{
	/* Opera Fix */
 	body: before{
		content: "";
		height: 100%;
		float: left;
		width: 0;
		margin-top: -2047.938.em;
	}
}
/*========================================================================
	for print
========================================================================*/
@media print {
	ul, #sidebar{
		display: none;
	}
	#content ul{
		display: block;
	}
}