/* Artfully masterminded by ZURB  */

/* -------------------------------------------------- 
   Table of Contents
-----------------------------------------------------
:: Shared Styles
:: Page Name 1
:: Page Name 2
*/


/* -----------------------------------------
   Shared Styles
----------------------------------------- */

@import url(http://fonts.googleapis.com/css?family=Open+Sans:300,400,700);
@import url(../fonts/pictos.css);
@import url(slimbox2.css);

body { padding-top: 82px; font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial,"黑体",新細明體,mingliu; }

h1, h2, h3, h4, h5 {
	/*font-family: 'Open Sans', sans-serif;*/
	/*font-weight: 300;*/
}

h1 {
	font-size: 2.5em;
}

h1 .trans {
	font-weight: normal;
	display: block;
	color: #7abc34;
}


h2 {
	font-size: 1.6em;
}

h2 .trans {
	font-weight: normal;
}

/*.row { max-width: 940px; min-width: 940px; width: 940px; }*/

#header {
	position: fixed;
	z-index: 10;
	width: 100%;
	top: 0;
	background: #fff;
	z-index: 5;
	/*border-bottom: 1px solid #ddd;*/
	-webkit-box-shadow: 0 0 5px rgba(0,0,0,.4); -moz-box-shadow: 0 0 5px rgba(0,0,0,.4); box-shadow: 0 0 5px rgba(0,0,0,.4);
	padding: 0;
	height: 82px;
}
#header ul {
	list-style-type: none;
	margin: 0 0 0 50px;
}
#header li {
	font-size: 1em;
	width: 33%;
	float: left;
}
#header li:nth-child(2) {
	width: 34%;
}

#header .logo {
	display: block;
	position: relative;
	margin: 10px 0 0 0;
	width: 140px;
	height: 66px;
	text-indent: -9999px;
	background: url(../images/iBIMS_logo.png) no-repeat 0 0;
}

#header .logo:hover:after {
	content: "Home \a 首頁";
	white-space: pre;
	text-align: center;
	position: absolute;
	bottom: 0;
	top: 0;
	left: 0;
	right: 0;
	padding: 5px 0 0 0;
	background: rgba(255,255,255,.6);
	color: #000;
	text-indent: 0;
	font-size: 1em;
	line-height: 1.5;
	font-weight: bold;
}

#header nav a {
	display: block;
	text-align: center;
	color: #000;
	font-weight: bold;
	margin: 0 30px;
	padding: 15px 0 15px 0;
	height: 82px;
	border-bottom: 8px solid transparent;
	-webkit-transition: all .1s ease-out; -moz-transition: all .1s ease-out; -o-transition: all .1s ease-out; transition: all .1s ease-out;  
}

#header nav a .trans {
	display: block;
	font-weight: bold;
	color: #aaa;
}

#header a.about.selected, #header a.about:hover { border-color: #7abc34; }
#header a.events.selected, #header a.events:hover { border-color: #ff8400; }
#header a.noticeboard.selected, #header a.noticeboard:hover { border-color: #02a3ff; }

#header a.about.selected .trans, #header a.about:hover .trans { color: #7abc34; }
#header a.events.selected .trans, #header a.events:hover .trans { color: #ff8400; }
#header a.noticeboard.selected .trans, #header a.noticeboard:hover .trans { color: #02a3ff; }

#content {
	/*background: #fafafa url(../images/content_bg.png) repeat-x 0 0;*/
	background: #f8f8f8;
	padding: 30px 0;
}

#footer {
	background: #fff;
	position: relative;
	z-index: 6;
	border-top: 1px solid #ddd;
	padding: 20px 25px 5px 25px;
	color: #bbb;
	text-align: left;
	font-size: 0.9em;
}

#footer p {
	/*font-size: 0.9em;*/
	font-weight: bold;
}

#footer ul {
	list-style-type: none;
}

#footer li {
	display: inline-block;
	padding: 0 25px;
	border-left: 1px solid #bbb;
	line-height: 1;
}

#footer li:first-child {
	border: none;
}

#footer a {
	-webkit-transition: all .2s ease-in; -moz-transition: all .2s ease-in; -o-transition: all .2s ease-in; transition: all .2s ease-in;  
	color: #666;
}

#footer a:hover {
	color: #000;
}


.button {
	border: 1px solid #b6b6b6;
	-webkit-box-shadow: inset 0 1px 0 #fff; -moz-box-shadow: inset 0 1px 0 #fff; box-shadow: inset 0 1px 0 #fff;
	background-color: #fcfcfc;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#fcfcfc), to(#f5f5f5));
	background-image: -webkit-linear-gradient(top, #fcfcfc, #f5f5f5);
	background-image: -moz-linear-gradient(top, #fcfcfc, #f5f5f5);
	background-image: -o-linear-gradient(top, #fcfcfc, #f5f5f5);
	background-image: -ms-linear-gradient(top, #fcfcfc, #f5f5f5);
	background-image: linear-gradient(top, #fcfcfc, #f5f5f5);
	filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#fcfcfc', EndColorStr='#f5f5f5');
	-webkit-transition: border .2s ease-in; -moz-transition: border .2s ease-in; -o-transition: border .2s ease-in; transition: border .2s ease-in;
}

.button:hover {
	background-color: #ffffff;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#f8f8f8));
	background-image: -webkit-linear-gradient(top, #ffffff, #f8f8f8);
	background-image: -moz-linear-gradient(top, #ffffff, #f8f8f8);
	background-image: -o-linear-gradient(top, #ffffff, #f8f8f8);
	background-image: -ms-linear-gradient(top, #ffffff, #f8f8f8);
	background-image: linear-gradient(top, #ffffff, #f8f8f8);
	filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#ffffff', EndColorStr='#f8f8f8');
	border-color: #555;
}

.button:active {
	-webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.2); -moz-box-shadow: inset 0 1px 2px rgba(0,0,0,.2); box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
	background-color: #b6b6b6;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#f5f5f5), tcfcfcf5f5));
	background-image: -webkit-linear-gradient(top, #f5f5f5, #fcfcfc);
	background-image: -moz-linear-gradient(top, #f5f5f5, #fcfcfc);
	background-image: -o-linear-gradient(top, #f5f5f5, #fcfcfc);
	background-image: -ms-linear-gradient(top, #f5f5f5, #fcfcfc);
	background-image: linear-gradient(top, #f5f5f5, #fcfcfc);
	filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#f5f5f5', EcfcfcorStr='#f5f5f5');
}

label {
	color: #000;
	font-weight: bold;
	margin: 15px 0 5px 0;
}

label .trans {
	color: #3e7900;
	/*color: #bbb;*/
	margin: 0 0 0 5px;
}

label.required:after {
	content: '*';
	margin: 0 0 0 3px;
	color: #f00;
}

input[type=submit] {
	font-size: 1.1em;
	padding: 10px 30px;
	border: 1px solid #59931c;
	color: #fff;
	font-weight: bold;
	text-shadow: 0 1px 0 rgba(0,0,0,.3);
	-webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.4); -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,.4); box-shadow: inset 0 1px 0 rgba(255,255,255,.4);
	background-color: #74cb17;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#74cb17), to(#67b414));
	background-image: -webkit-linear-gradient(top, #74cb17, #67b414);
	background-image: -moz-linear-gradient(top, #74cb17, #67b414);
	background-image: -o-linear-gradient(top, #74cb17, #67b414);
	background-image: -ms-linear-gradient(top, #74cb17, #67b414);
	background-image: linear-gradient(top, #74cb17, #67b414);
	filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#74cb17', EndColorStr='#67b414');
	-webkit-transition: border .2s ease-in; -moz-transition: border .2s ease-in; -o-transition: border .2s ease-in; transition: border .2s ease-in;
}

input[type=submit]:hover {
	background-color: #67b414;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#67b414), to(#5a9d11));
	background-image: -webkit-linear-gradient(top, #67b414, #5a9d11);
	background-image: -moz-linear-gradient(top, #67b414, #5a9d11);
	background-image: -o-linear-gradient(top, #67b414, #5a9d11);
	background-image: -ms-linear-gradient(top, #67b414, #5a9d11);
	background-image: linear-gradient(top, #67b414, #5a9d11);
	filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#67b414', EndColorStr='#5a9d11');
	border-color: #325310;
}
input[type=submit]:active {
	box-shadow: inset 0 1px 3px rgba(0,0,0,.4);
}

.note_required { font-size: .8em; color: #888; }
.note_required .asterisk { color: #f00; }

.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
.clearfix { display:inline-block; }
.clearfix { display:block; }
* html .clearfix {height: 1%;}

/*
input[type=text] {
	border-radius: 0;
	-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.1); -moz-box-shadow: 0 2px 3px rgba(0,0,0,.1); box-shadow: 0 2px 3px rgba(0,0,0,.1);
}

textarea {
	border-radius: 0;
	-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.1); -moz-box-shadow: 0 2px 3px rgba(0,0,0,.1); box-shadow: 0 2px 3px rgba(0,0,0,.1);
}
*/
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5)
{
	#header .logo {
		background: url(../images/iBIMS_logo@2x.png) no-repeat 0 0;
		background-size: 140px 66px;
	}
}

@media only screen and (max-width: 767px) {
	body { padding-top: 0; }

	h1 {
	font-size: 2em;
	}

	#content {
		padding: 20px 0;
	}

	#header {
		position: relative;
		z-index: 10;
		height: auto;
	}
	#header .logo {
		margin: 10px auto -5px auto;
	}
	#header .columns {
		padding: 0;
	}
	#header ul {
		margin: 0;
	}
	#header nav a {
		border-bottom-width: 5px;
		margin: 0 1px;
		padding: 5px 0;
		height: 62px;
	}
	#header .language_selector { display: none; }

	#footer {
		padding: 20px 0 5px 0;
		text-align: center;
	}
	#footer nav {
		margin: 0;
		padding: 0;
	}
	#footer nav li {
		padding: 0 15px;
	}
}

/* -----------------------------------------
   Home
----------------------------------------- */

#homepage {
	text-align: center;
	padding: 0;
}

#gateway {
	position: relative;
	background: #f8f8f8;
	padding: 80px 0 100px 0;
	color: #555;
	overflow: hidden;
}

#gateway h1 {
	padding: 0;
	margin: 0 auto;
	height: 140px;
	width: 289px;
	background: url(../images/iBIMS_logo_home.png) no-repeat 0 0;
	text-indent: -9999px;
}

#gateway .title {
	position: relative;
	z-index: 3;
}

#gateway .title p {
	padding: 0;
	margin: -20px 0 0 0;
	font-weight: bold;
	font-size: 1.2em;
}
#gateway .title p.trans {
	font-weight: normal;
	margin: 0 0 20px 0;
}

#gateway .libraries {
	position: relative;
	z-index: 3;
	list-style-type: none;
}

#gateway .libraries li {
	display: inline-block;
	margin: 0 15px;
	height: 128px;
	width: 128px;
	position: relative;
}

#gateway .libraries li:hover:after {
	content: 'Click to Enter \a 由此進入';
	white-space: pre;
	font-weight: bold;
	position: absolute;
	bottom: -10px;
	height: 1px;
	overflow: visible;
	width: 100%;
	left: 50%;
	font-size: 0.9em;
	line-height: 1.4;
	margin: 0 0 0 -64px;
}

#gateway .libraries a {
	display: block;
	height: 128px;
	width: 128px;
	text-indent: -9999px;
	background-position: 50% 50%;
	background-repeat: no-repeat;
}

#gateway .libraries a.willoughby {
	background-image: url(../images/btn_ibims.png);
}

#gateway .libraries a.rockdale {
	background-image: url(../images/btn_rockdale.png);
}

#competition_badge {
	position: absolute;
	z-index: 4;
	bottom: -50px;
	left: 50%;
	margin: 0 0 0 148px;
	display: block;
	height: 202px;
	width: 202px;
	text-indent: -9999px;
	background: url(../images/badge_chinesenaming.png) no-repeat 0 0;
	-webkit-transition: all .2s ease-in-out; -moz-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out; transition: all .2s ease-in-out;  
}

#competition_badge:hover {
	bottom: -20px;
}

#homepage_nav {
	position: relative;
	background: #fff;
	z-index: 5;
	-webkit-box-shadow: 0 -1px 6px rgba(0,0,0,.2); -moz-box-shadow: 0 -1px 6px rgba(0,0,0,.2); box-shadow: 0 -1px 6px rgba(0,0,0,.2);
	padding: 0;
}
#homepage_nav ul {
	list-style-type: none;
	margin: 0 100px;
}
#homepage_nav li {
	font-size: 1.2em;
}

#homepage_nav a {
	display: block;
	color: #000;
	font-weight: bold;
	margin: 0 30px;
	padding: 10px 0 60px 0;
	border-top: 8px solid transparent;
	-webkit-transition: all .1s ease-out; -moz-transition: all .1s ease-out; -o-transition: all .1s ease-out; transition: all .1s ease-out;  
}

#homepage_nav a.about:hover { border-color: #7abc34; }
#homepage_nav a.events:hover { border-color: #ff8400; }
#homepage_nav a.noticeboard:hover { border-color: #02a3ff; }
#homepage_nav a.about:hover .trans { color: #7abc34; }
#homepage_nav a.events:hover .trans { color: #ff8400; }
#homepage_nav a.noticeboard:hover .trans { color: #02a3ff; }

#homepage_nav a .trans {
	display: block;
	font-weight: bold;
	color: #aaa;
}

#gateway .background {
	position: absolute;
	z-index: 1;
	list-style-type: none;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	font-size: 1.2em;
}

#gateway .background p {
	padding: 0;
	margin: 0;
	position: absolute;
	white-space: nowrap;
	line-height: 1.2;
	opacity: 0.15;
	filter: alpha(opacity = 15);
	-webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -o-user-select: none; user-select: none;
	-webkit-transition: all .4s ease-out; -moz-transition: all .4s ease-out; -o-transition: all .4s ease-out; transition: all .4s ease-out;  
	left: auto;
	right: auto;
}

#gateway .background .trans {
	display: block;
	font-weight: bold;
}

#gateway .background .c1 { font-size: 1.1em; top: 20%; left: 5%; }
#gateway .background .c2 { font-size: 1.8em; top: 36%; left: 9%; }
#gateway .background .c3 { font-size: 1.6em; top: 63%; right: 5%; }
#gateway .background .c4 { font-size: 1.6em; top: 3%; right: 5%; }
#gateway .background .c5 { font-size: 2.1em; top: 220px; right: 2%; }
#gateway .background .c6 { font-size: 1.2em; top: 60%; left: 5%; }
#gateway .background .c7 { font-size: 1.8em; top: 80%; left: 30%; }
#gateway .background .c8 { font-size: 1.8em; top: 25%; right: 15%; }
#gateway .background .c9 { font-size: 1.9em; top: 70%; left: 15%; }
#gateway .background .c10 { font-size: 1.6em; top: 80%; right: 8%; }
#gateway .background .c11 { font-size: 1.2em; top: 0%; left: 20%; }

/*.animate_pre #gateway .background p {
	font-size: .5em; top: 30%; left: 50%;
	opacity: 0;
	-webkit-transition: none; -moz-transition: none; -o-transition: none; transition: none;  
}
.animate_pre #gateway .background p.r {
	right: 50%; left: auto;
}
*/

.animate_pre #competition_badge {
	bottom: -200px;
	-webkit-transition: none; -moz-transition: none; -o-transition: none; transition: none;  
}

.animating #competition_badge {
	/*-webkit-transition: all .8s ease-in-out; -moz-transition: all .8s ease-in-out; -o-transition: all .8s ease-in-out; transition: all .8s ease-in-out;  */
	-webkit-transition: none; -moz-transition: none; -o-transition: none; transition: none;  	
}

@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5)
{
	#gateway h1 {
		background-image: url(../images/iBIMS_logo_home@2x.png);
		background-size: 289px 140px;
	}
	#gateway .libraries a.willoughby {
		background-image: url(../images/btn_ibims@2x.png);
		background-size: 94px 94px;
	}
	#gateway .libraries a.rockdale {
		background-image: url(../images/btn_rockdale@2x.png);
		background-size: 94px 94px;/*53px 106px*/
	}
	#competition_badge {
		background-image: url(../images/badge_chinesenaming@2x.png);
		background-size: 202px 202px;
	}
}

@media only screen and (max-width: 767px) {
	#gateway {
		padding-bottom: 140px;
	}
	#competition_badge {
		margin: 0 0 0 -101px;
	}
	#homepage_nav .columns {
		padding: 0;
	}
	#homepage_nav ul {
		margin: 0;
	}
	#homepage_nav li {
		border-top: 1px solid #ddd;
	}
	#homepage_nav a {
		text-align: left;
		border-top: none;
		border-left: 5px solid transparent;
		margin: 0;
		padding: 15px 20px;
	}
	#homepage_nav a .trans {
		display: inline;
	}
	#gateway .background .mobile_hide {
		display: none;
	}
}

/* -----------------------------------------
   About
----------------------------------------- */

#about h1 .trans {
	color: #7abc34;
}

#about .tagline {
	text-indent: -9999px;
	width: 288px;
	height: 335px;
	margin: 30px auto 0 auto;
	background: url(../images/tagline.png) no-repeat 0 0;
}

#about .stats {
	 list-style-type: none;
	 margin: 20px 0;
}

#about .stats li {
	position: relative;
	border-top: 1px solid #d4d7db;
	margin: 0;
	padding: 25px 0 25px 120px;
}

#about .stats li:first-child {
	border: none;
}

#about .stats li:before {
	position: absolute;
	height: 70px;
	width: 70px;
	top: 27px;
	left: 25px;
	background: url(../images/about_icons.png) no-repeat 0 0;
	content: '';
}

#about .stats .visitors:before {
	background-position: 0 0;
}

#about .stats .pageviews:before {
	background-position: 0 -70px;
}

#about .stats .itemsaccessed:before {
	background-position: 0 -140px;
}

#about .stats .age:before {
	background-position: 0 -210px;
}


#about .stats h3 {
	color: #c0c0c0;
	font-size: 1.4em;
	font-weight: bold;
	margin: 0;
	line-height: 1.2;
}

#about .stats sup {
	font-size: 0.6em;
	font-weight: bold;
}
#about .stats sup:before { content: ' '; }

#about .stats p {
	color: #86c106;
	font-size: 3em;
	font-weight: bold;
	margin: 0;
	line-height: 1.2;
}

#about .learnmore {
	margin: 25px 0;
}

#about .learnmore a {
	display: block;
	position: relative;
	padding: 20px 10px 20px 120px;
	color: #304157;
	font-size: 2em;
	font-weight: bold;
	line-height: 1.2;
}

#about .learnmore a span {
	display: block;
	font-size: 0.5em;
	margin: 5px 0 0 0;
	color: #c0c0c0;
	font-weight: bold;
}

#about .learnmore a:before {
	position: absolute;
	height: 70px;
	width: 70px;
	top: 17px;
	left: 25px;
	background: url(../images/about_icons.png) no-repeat 0 -280px;
	content: '';
}

#about .notes {
	color: #304057;
	font-size: .85em;
	/*font-weight: bold;*/
}

#about .notes sup {
	font-weight: normal;
}

#about .details {
	font-size: 1.2em;
	float:left;
}

#about .hl {
	font-weight: bold;
	color: #ca4097;/*#ca4097*/
	white-space: nowrap;
}

@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5)
{
	#about .tagline {
		background-image: url(../images/tagline@2x.png);
		background-size: 288px 335px;
	}
	#about .stats li:before, #about .learnmore a:before {
		background-image: url(../images/about_icons@2x.png);
		background-size: 70px 350px;
	}
}

@media only screen and (max-width: 767px) {
	#about .tagline {
		height: 302px;
		width: 260px;
		background-size: 260px 302px;
	}
	#about .stats {
		margin: 0;
		font-size: 0.9em;
	}
	#about .stats li {
		padding-left: 90px;
		padding-top: 20px;
		padding-bottom: 20px;
	}
	#about .stats li:before {
		left: 0;
		top: 20px;
	}
	#about .stats h3 {
		font-size: 1.3em;
	}
}


/* -----------------------------------------
   Events
----------------------------------------- */

#events h1 .trans {
	color: #ff8400;
}

#events .events_list {
	list-style-type: none;
	margin: 50px 0;
	max-width: 820px
}

#events .events_list li {
	position: relative;
	padding: 0 0 0 120px;
	margin: 0 0 30px 0;
	min-height: 3em;
}

#events .events_list h3 {
	position: absolute;
	top: 0;
	left: 0;
	margin: 0;
	color: #ff8400;
	font-size: 3em;
	line-height: 1;
	font-family: 'Open Sans', sans-serif;
	font-weight: 300;
}

#events .events_list p {
	margin: 10px 0 0 0;
}

#events .events_list p a {
	color: #6a5900;
	font-weight: bold;
	background: #fee246;
	padding: 3px 8px;
	margin: 0;
	white-space: nowrap;
}

#events .events_list p a:after {
	content: ' »';
	font-weight: bold;
	font-size: 1.2em;
}

#events .events_list p a:hover {
	color: #000;
}


/* -----------------------------------------
   Noticeboard
----------------------------------------- */

#noticeboard h1 {
	color: #fff;
	/*font-size: 4em;*/
	text-shadow: 0 1px 5px rgba(0,0,0,.4);
}

#noticeboard h1 .trans {
	/*color: #02a3ff;*/
	color: #fff;
}

#noticeboard #content {
	background: url(../images/poinboard_bg.jpg) repeat 0 0;
	padding-bottom: 70px;

}
#pinboard {
	/*background: url(../images/poinboard_bg.jpg) repeat 0 0;*/
	/*padding: 20px 20px 20px 20px;*/
}


#pinboard .post {
	position: relative;
	margin: 10px;
	background: #ffffff;
	line-height: 1.4;
	font-size: 0.8em;
	float: left;
	width: 270px;
	padding: 10px;
	-webkit-box-shadow: 0px 2px 10px -2px rgba(0,0,0,.9); -moz-box-shadow: 0px 2px 10px -2px rgba(0,0,0,.9); box-shadow: 0px 2px 10px -2px rgba(0,0,0,.9);
	/*-webkit-transition: all .2s ease-out; -moz-transition: all .2s ease-out; -o-transition: all .2s ease-out; transition: all .2s ease-out;  */
}

#pinboard .post .image {
	position: relative;
	z-index: 1;
	display: block;
	background: #bbb;
	min-height: 200px;
}

#pinboard .post img {
	display: block;
	width: 100%;
}

#pinboard .post p {
	margin: 10px 0 0 0;
}

#pinboard .post .zoom {
	color: #777;
	display: inline-block;
	font-weight: bold;
}

#pinboard .post .zoom:before {
	font-family: 'Pictos';
	font-size: 0.8em;
	font-weight: normal;
}

#pinboard .post .zoom:hover {
	color: #000;
}

#pinboard .post .download {
	color: #777;
	display: inline-block;
	font-weight: bold;
}

#pinboard .post .download:hover {
	color: #000;
}

#pinboard .post:after {
	content: '';
	width: 32px;
	height: 45px;
	margin: 0 0 0 -16px;
	top: -5px;
	left: 50%;
	background: url(../images/pins.png) no-repeat 0 0;
	position: absolute;
	z-index: 4;
}

#pinboard .post.purple:after {
	background-position: 0 0;
}

#pinboard .post.green:after {
	background-position: 0 -50px;
}

#pinboard .post.blue:after {
	background-position: 0 -100px;
}

#pinboard .post.yellow:after {
	background-position: 0 -150px;
}

#pinboard .post.left:after {
	top: -15px;
	margin: 0 0 0 -20px;
}

#pinboard .post.right:after {
	top: -15px;
	margin: 0 0 0 -10px;
}

#pinboard .post.purple.left:after {
	background-position: 0 -200px;
}

#pinboard .post.green.left:after {
	background-position: 0 -250px;
}

#pinboard .post.blue.left:after {
	background-position: 0 -300px;
}

#pinboard .post.yellow.left:after {
	background-position: 0 -350px;
}

#pinboard .post.purple.right:after {
	background-position: 0 -400px;
}

#pinboard .post.green.right:after {
	background-position: 0 -450px;
}

#pinboard .post.blue.right:after {
	background-position: 0 -500px;
}

#pinboard .post.yellow.right:after {
	background-position: 0 -550px;
}



@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5)
{
	#pinboard .post:after {
		background-image: url(../images/pins@2x.png);
		background-size: 32px 648px;
	}
	#noticeboard #content  {
		background-image: url(../images/poinboard_bg@2x.jpg);
		background-size: 250px 250px;
	}
}


/* -----------------------------------------
   Enquiry
----------------------------------------- */

#enquiry .enquiry {
	padding: 0;
	margin: 30px 0;
	max-width: 450px;
}

#enquiry .info {
	font-style: normal;
	margin: 50px 0 0 0;
	padding: 0 0 0 30px;
	border-left: 5px solid #7abc34;
}

#enquiry .info  p {
	font-style: normal;
}


/* -----------------------------------------
   Competition
----------------------------------------- */

#competition h1 {
	font-size: 2.2em;
	border-bottom: 5px solid #7ABC34;
	padding-bottom: 20px;
}

#competition h1 .trans {
	font-weight: bold;
	margin: 0 0 0 0;
}

#competition h3 {
	color: #ca4097;
	border-bottom: 1px solid #ca4097;
	font-size: 1.3em;
	padding: 0 0 8px 0;
	margin: 30px 0 15px 0;
}

#competition .closingsoon {
	position: absolute;
	top: 0;
	right: -20px;
	text-indent: -9999px;
	height: 176px;
	width: 310px;
	background: url(../images/competition_closingsoon.png) no-repeat 0 0;
}


@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5)
{
	#competition .closingsoon {
		background-image: url(../images/competition_closingsoon@2x.png);
		background-size: 310px 176px;
	}
}



#competition .mandatory {
	float: right;
	margin: -38px 0 0 0;
	font-size: 0.8em;
	color: #888;
	font-weight: bold;
}

#competition .mandatory .trans {
	font-weight: normal;
}

#competition .mandatory sup {
	color: #f00;
	font-size: 1em;
}


#competition h3 .trans {
	font-weight: normal;
}

#competition .prizes {
	margin-top: 40px;
}

#competition form small.error { background: none; color: #c60e13; margin: 0 0 0 140px; padding: 3px 0; }

#competition form .item {
	position: relative;
	clear: both;
	margin: 15px 0;
}

#competition form .item label {
	position: absolute;
	top: 0; left: 0;
	margin: 0;
	line-height: 1.4;
}

#competition form .item label .trans {
	display: block;
	margin: 0;
}

#competition form .item label.required:after {
	position: absolute;
	top: 0; right: -10px;
}

#competition form .item input[type="text"], #competition form .item textarea {
	margin: 0 0 0 140px;
	/*max-width: 300px;*/
	/*min-width: 180px;*/
	width: 400px;
}

@media only screen and (max-width: 600px) {
	#competition form .item input[type="text"], #competition form .item textarea {
		width: 300px;
	}
}

@media only screen and (max-width: 500px) {
	#competition form .item input[type="text"], #competition form .item textarea {
		width: 200px;
	}
	#competition .mandatory {
		float: none;
		margin: 0;
	}
}

@media only screen and (max-width: 350px) {
	#competition form .item input[type="text"], #competition form .item textarea {
		width: 150px;
	}
}

#competition form .item input[type="text"] {
	height: 35px;
}

#competition form .item .radios {
	list-style-type: none;
}

#competition form .item.tworows label {
	position: relative;
	display: inline-block;
}

#competition form .item.ismember {
	margin-top: 30px;
}

#competition form .item.tworows .radios {
	clear: both;
	padding: 10px 0 0 0;
}

#competition form .item.tworows .radios li {
	position: relative;
	width: 50%;
	display: block;
	float: left;
}
#competition form .item.tworows .radios label {
	padding: 0 0 0 20px;
	font-weight: normal;
}
#competition form .item.tworows .radios label .trans {
	color: #000;
}

#competition form .item.tworows .radios li.no {
	width: 120px;
}

#competition form .item.tworows .radios li.yes {
	width: 300px;
}

#competition form .item.tworows .radios li input {
	margin: 0 0 0 20px;
}

#competition form .item.tworows .radios li input[type=radio] {
	position: absolute;
	top: 0; left: 0;
	margin: 0;
}

#competition form .item.tworows .radios li small.error {
	position: absolute;
	top: 35px;
	margin: 0;
}

#competition form .item.tworows.whichlibrary li small.error {
	top: 15px;
}



#competition form .asterisk { color: #f00; }

#competition form .checkbox input { position: absolute; top: 0; left: 0; }
#competition form .checkbox label { padding: 0 0 0 25px; position: relative; font-weight: normal; display: inline-block; }
#competition form .checkbox label .trans { color: #000; }
#competition form .checkbox label a { border-bottom: 1px dotted #bbb; }

#competition form .namesuggestion label { margin-bottom: 15px; }
#competition form .ibims_name { position: relative; }
#competition form .ibims_name strong { position: absolute; top: 0; left: 0; height: 35px; width: 35px; background: #bbb; color: #fff; display: inline-block; line-height: 35px; text-align: center; font-weight: bold; font-size: 1.2em;}
#competition form .ibims_name input[type=text] { margin: 0 0 0 35px; border-left: none; width: 250px; border-bottom-left-radius: 0; border-top-left-radius: 0; }

#competition form .checkbox small.error {
	position: absolute;
	top: 35px;
	margin: 0;
}
#competition form .tcagree label { font-weight: bold; }

#competition .books {
	background: url(../images/books.png) no-repeat 0 0;
	height: 810px;
}

#competition .thankyou h2 {
	margin: 40px 0 17px 0;
}

#competition .thankyou .hl {
	color: #ca4097;
	font-weight: bold;
}

#competition_form { position: relative; }
#competition_form .competition_closed { position: absolute; top: -80px; bottom: 0; left: 0; right: 0; background: #f8f8f8; opacity: 0.85; }
#competition_form .competition_closed_sticker {
	position: absolute; top: -45px; left: 30px;
	text-indent: -9999px;
	width: 539px;
	height: 254px;
	background: url(../images/competition_closed_sticker.png) no-repeat 0 0;
}
#competition_form .competition_closed_terms {
	position: absolute; top: 220px; left: 0;
	line-height: 1.5; font-weight: bold;
}

@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5)
{
	#competition_form .competition_closed_sticker {
		background-image: url(../images/competition_closed_sticker@2x.png);
		background-size: 539px 254px;
	}
}

/* -----------------------------------------
   Terms / Privacy
----------------------------------------- */

#terms h2,
#privacy h2 {
	margin-top: 40px;
}

#terms #content p,
#privacy #content p {
	margin: 17px 0;
}

#terms h2 {
	text-transform: uppercase;
}

#terms #content ol,
#privacy #content ol {
	list-style-type: upper-alpha;
	margin: 0 0 0 50px;
}

#terms #content ol li,
#privacy #content ol li {
	margin: 0 0 10px 0;
}

#terms #content ul,
#privacy #content ul {
	list-style-type: disc;
	margin: 0 0 0 50px;
}

#terms #content ul li {
	margin: 0 0 10px 0;
}

#privacy #content ul li {
	margin: 0 0 5px 0;
}

/* -----------------------------------------
   Competition Ceremony
----------------------------------------- */

#competition_ceremony h1 {
	font-size: 2em;
	border-bottom: 5px solid #7ABC34;
	padding-bottom: 20px;
	color: #555;
}

#competition_ceremony h1 .trans {
	font-weight: bold;
	margin: 0 0 0 0;
}

#competition_ceremony h3 {
	color: #ca4097;
	border-bottom: 1px solid #ca4097;
	font-size: 1.3em;
	padding: 0 0 8px 0;
	margin: 30px 0 15px 0;
}

#competition_ceremony sup {
	line-height: 1;
}

#competition_ceremony .books {
	background: url(../images/books.png) no-repeat 0 0;
	height: 810px;
}

#competition_ceremony .intro {
	font-size: 1.2em;
}


#competition_ceremony .intro .hl {
	font-weight: bold;
}

#competition_ceremony .intro.chinese {
	letter-spacing: 1px;
	font-size: 1.3em;
	color: #3e7900;
	/*color: #ca4097;*/
}

#competition_ceremony .intro p {
	text-align: justify;
}

#competition_ceremony .intro.chinese p {
	font-weight: bold;
}

#competition_ceremony .intro.english:before {
	float: right;
	content: ' ';
	display: block;
	height: 250px;
	width: 125px;
	position: relative;
	z-index: 1;
	margin-top: 15px;
}

#competition_ceremony .intro.chinese:before {
	float: left;
	content: ' ';
	display: block;
	height: 250px;
	width: 125px;
	position: relative;
	z-index: 1;
	margin-top: 15px;
}

#competition_ceremony .intro_text {
	clear: both;
	position: relative;
	padding: 0 15px;
}

#competition_ceremony .intro_text .freebooks {
	position: absolute;
	top: 15px;
	left: 50%;
	margin-left: -125px;
	height: 250px;
	width: 250px;
	background: url(../images/freebooks.png) no-repeat 0 0;
	z-index: 2;
}

#competition_ceremony .intro_text .asterisk {
	font-weight: bold;
}


#competition_ceremony .details {
	padding: 0 15px;
	line-height: 1.3;
	font-size: 1.1em;
}

#competition_ceremony .details h2 {
	margin-top: 0;
}

#competition_ceremony .details h2 .trans {
	color: #ca4097;
	margin-top: 4px;
	display: block;
}

#competition_ceremony .details .box {
	padding: 20px;
	background: #eee;
}

#competition_ceremony .details .field {
	margin-bottom: 7px;
}

#competition_ceremony .details .field.first {
	margin-top: 20px;
}

#competition_ceremony .details .label {
	font-weight: bold;
	white-space: nowrap;
}

#competition_ceremony .details .row.trans {
	font-size: 1.1em;
	letter-spacing: 1px;
}

#competition_ceremony .details ol {
	margin-top: 5px;
}

#competition_ceremony .details .trans ol {
	margin-left: 23px;
}

#competition_ceremony .details p {
	margin-top: 3px;
}

#competition_ceremony .details .tradepromotion {
	margin-top: 20px;
	color: #888;
	font-size: 0.8em;
}

#competition_ceremony .prizelist {
	font-family: 'Open Sans', sans-serif;
	margin: 10px 0 35px 0;
	list-style-type: none;
	font-size: 1.3em;
}

#competition_ceremony .prizelist li {
	border-top: 1px dotted #ccc;
	padding: 8px 0;
}

#competition_ceremony .prizelist li:first-child {
	border: none;
}

#competition_ceremony .prizelist li p {
	margin: 0;
	display: inline-block;
}

#competition_ceremony .prizelist strong {
	color: #ca4097;
	display: inline-block;
	width: 160px;
}

#competition_ceremony .prizelist .chi strong {
	width: 60px;
}


@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5)
{
	#competition_ceremony .intro_text .freebooks {
		background-image: url(../images/freebooks@2x.png);
		background-size: 250px 250px;
	}
}

@media only screen and (max-width: 767px) {
	#competition_ceremony .intro_text .freebooks {
		position: static;
		margin: 10px auto;
	}
	#competition_ceremony .intro.english:before,
	#competition_ceremony .intro.chinese:before {
		display: none;
	}
}


/* -----------------------------------------
   Competition Results
----------------------------------------- */

#competition_results h1 {
	font-size: 1.8em;
	border-bottom: 5px solid #7ABC34;
	padding-bottom: 20px;
	color: #555;
}

#competition_results h1 .trans {
	font-weight: bold;
	margin: 0 0 0 0;
	font-size: 1.3em;
	letter-spacing: 1px;
}

#competition_results h3 {
	color: #ca4097;
	border-bottom: 1px solid #ca4097;
	font-size: 1.3em;
	padding: 0 0 8px 0;
	margin: 30px 0 15px 0;
}

#competition_results sup {
	line-height: 1;
}

#competition_results .books {
	background: url(../images/books.png) no-repeat 0 0;
	height: 810px;
}

#competition_results .intro {
	font-size: 1.15em;
}


#competition_results .intro .hl {
	font-weight: bold;
}

#competition_results .intro.chinese {
	letter-spacing: 2px;
	font-size: 1.3em;
	color: #3e7900;
	/*color: #ca4097;*/
}

#competition_results .intro p {
	text-align: justify;
}

#competition_results .intro.chinese p {
	font-weight: bold;
}

#competition_results .intro.english:before {
	float: right;
	content: ' ';
	display: block;
	height: 360px;
	width: 164px;
	position: relative;
	z-index: 1;
	margin-top: 15px;
}

#competition_results .intro.chinese:before {
	float: left;
	content: ' ';
	display: block;
	height: 360px;
	width: 164px;
	position: relative;
	z-index: 1;
	margin-top: 15px;
}

#competition_results .intro_text {
	clear: both;
	position: relative;
	padding: 0 15px;
}

#competition_results .intro_text .photo {
	position: absolute;
	top: 5px;
	left: 50%;
	margin-left: -164px;
	/*height: 244px;*/
	width: 328px;
	/*width: 250px;*/
	z-index: 2;
}
#competition_results .intro_text .photo img {
	display: block;
}
#competition_results .intro_text .photo .caption {
	padding: 8px 10px;
	margin: 2px 0 0 0;
	background: #000;
	color: #fff;
	font-weight: bold;
	/*height: 120px;*/
}

#competition_results .intro_text .asterisk {
	font-weight: bold;
}

#competition_results .results {
	padding: 0 15px;
}

#competition_results .prizelist {
	margin: 10px 0 20px 0;
	list-style-type: none;
	font-size: 1.2em;
}

#competition_results .prizelist li {
	border-top: 1px dotted #ccc;
	padding: 8px 0 8px 160px;
	position: relative;
}

#competition_results .prizelist li:first-child {
	border: none;
}

#competition_results .prizelist li p {
	margin: 0;
	display: inline-block;
	line-height: 1.6;
}

#competition_results .prizelist strong {
	color: #ca4097;
	display: inline-block;
	width: 160px;
	position: absolute;
	left: 0;
}

#competition_results .prizelist .chi strong {
	width: 60px;
}


#competition_results .finalists {
	padding: 0 15px;
}

#competition_results .finalists ul {
	list-style: none;
	margin: 10px 0;
	font-size: 1.2em;
	/*margin: 0 0 0 25px;*/
}
#competition_results .finalists li {
	padding: 0 0 0 15px;
	margin: 5px 0;
	position: relative;
}
#competition_results .finalists li:before {
	content: "• ";
	font-size: 1.6em;
	line-height: 1;
	color: #ca4097;
	position: absolute;
	top: 0;
	left: 0;
}

#competition_results h2 {
	line-height: 1.3;
}
#competition_results h3 {
	line-height: 1.3;
	font-size: 1.25em;
}
#competition_results h3 .trans, #competition_results h2 .trans {
	margin-top: 0.2em;
	display: block;
}
#competition_results .finalists h3 {
	margin-top: 20px;
}

#competition_results .bye {
	margin-top: 20px;
	padding: 0 15px;
}

#competition_results .bye p {
	font-size: 1.2em;
}

@media only screen and (max-width: 767px) {
	#competition_results .intro_text .photo {
		position: static;
		margin: 10px auto;
	}
	#competition_results .intro.english:before,
	#competition_results .intro.chinese:before {
		display: none;
	}
}


/* -----------------------------------------
   Competition RSVP
----------------------------------------- */

#rsvp h1 {
	font-size: 2.2em;
	border-bottom: 5px solid #7ABC34;
	padding-bottom: 20px;
}

#rsvp h1 .trans {
	font-weight: bold;
	margin: 0 0 0 0;
}

#rsvp h3 {
	color: #ca4097;
	border-bottom: 1px solid #ca4097;
	font-size: 1.3em;
	padding: 0 0 8px 0;
	margin: 30px 0 15px 0;
}

#rsvp .mandatory {
	float: right;
	margin: -38px 0 0 0;
	font-size: 0.8em;
	color: #888;
	font-weight: bold;
}

#rsvp .mandatory .trans {
	font-weight: normal;
}

#rsvp .mandatory sup {
	color: #f00;
	font-size: 1em;
}

#rsvp h3 .trans {
	font-weight: normal;
}

#rsvp form small.error { background: none; color: #c60e13; margin: 0 0 0 160px; padding: 3px 0; }

#rsvp form .item {
	position: relative;
	clear: both;
	margin: 15px 0;
}

#rsvp form .item label {
	position: absolute;
	top: 0; left: 0;
	margin: 0;
	line-height: 1.4;
}

#rsvp form .item label .trans {
	display: block;
	margin: 0;
}

#rsvp form .item label.required:after {
	position: absolute;
	top: 0; right: -10px;
}

#rsvp form .item input[type="text"], #rsvp form .item textarea {
	margin: 0 0 0 160px;
	/*max-width: 300px;*/
	/*min-width: 180px;*/
	width: 400px;
}

@media only screen and (max-width: 600px) {
	#rsvp form .item input[type="text"], #rsvp form .item textarea {
		width: 300px;
	}
}

@media only screen and (max-width: 500px) {
	#rsvp form .item input[type="text"], #rsvp form .item textarea {
		width: 200px;
	}
	#rsvp .mandatory {
		float: none;
		margin: 0;
	}
}

@media only screen and (max-width: 350px) {
	#rsvp form .item input[type="text"], #rsvp form .item textarea {
		width: 150px;
	}
}

#rsvp form .item input[type="text"] {
	height: 35px;
}

#rsvp form .radios {
	list-style-type: none;
}

#rsvp form .item.tworows label {
	position: relative;
	display: inline-block;
}

#rsvp form .item.ismember {
	margin-top: 30px;
}


#rsvp form .asterisk { color: #f00; }

#rsvp form .checkbox input { position: absolute; top: 0; left: 0; }
#rsvp form .checkbox label { padding: 0 0 0 25px; position: relative; font-weight: normal; display: inline-block; }
#rsvp form .checkbox label .trans { color: #000; }
#rsvp form .checkbox label a { border-bottom: 1px dotted #bbb; }

#rsvp form .checkbox small.error {
	position: absolute;
	top: 35px;
	margin: 0;
}

#rsvp form .isattending { margin-top: 40px; }
#rsvp form .isattending .radios li input[type=radio] {
	position: absolute;
	top: 3px; left: 0;
	margin: 0;
}

#rsvp form .isattending .radios label .trans {
	color: #000;
	display: inline-block;
}

#rsvp form .isattending .radios label {
	font-weight: normal;
	padding: 0 0 0 20px;
	position: relative;
}

#rsvp form .isattending ul { margin: 15px 0; }
#rsvp form .isattending li { margin: 7px 0; }
#rsvp form .isattending small.error { display: inline;  margin: 0; position: absolute; left: 100px; width: 130px; }

#rsvp form .isattending_kairos { margin-top: -16px; }
#rsvp form .isattending_kairos .radios label .trans { display: block; }

#rsvp form .tcagree label { font-weight: bold; }

#rsvp #representative { padding: 5px 14px 10px 14px; border: 1px solid #ddd; margin: -20px -15px 30px -15px; background: #f4f4f4; }
#rsvp #representative .radios { margin: 0; }
#rsvp #representative .item label { left: 20px; }
#rsvp #representative .radios li { margin-top: 0; }
#rsvp #representative .radios label { margin-top: 5px; }
#rsvp .framiliesnfriends { display: block; margin-top: 7px; font-size: 0.8em; line-height: 1.5; }

#rsvp #howtowin { font-style: italic; font-size: 0.9em; }
#rsvp #howtowin .trans { display: block; }
#rsvp #form_guests { width: 50px; }

#rsvp .ref { font-size: .7em; color: #000; font-style: italic; font-weight: bold; }

#rsvp.thankyou .thankyou {
	font-size: 1.2em;
}
#rsvp.thankyou .thankyou h2 {
	margin: 40px 0 17px 0;
}

#rsvp.thankyou .thankyou .hl {
	color: #ca4097;
	font-weight: bold;
}

#rsvp.thankyou .thankyou .chi { letter-spacing: 1px; }

#rsvp .books {
	background: url(../images/books.png) no-repeat 0 0;
	height: 810px;
}