@charset "UTF-8";

* { margin:0; padding:0; }

.content { max-width:900px; margin:auto; color:#333; }
.title2 { font-family:'jaf-bernino-sans-condensed'; font-weight:300; font-size:42px; text-align:center; padding-bottom:10px; }
.toggle { font-family:'jaf-bernino-sans-condensed'; font-weight:800; font-size:18px; text-align:center; padding-top:15px; color:#ff5500; transition: all 0.4s; overflow:hidden; max-height:65px; cursor:pointer; }
.toggle.hide { max-height:0; }
.vertical_right { display:block;  }
p { font-family:'jaf-facitweb'; font-size:16px; line-height:24px; text-align:center; }
p a { color:#ff5500; font-weight:bold; text-decoration:none; }

#header_content { font-family:'jaf-bernino-sans-condensed'; font-weight:700; background:#fff; width:100%; text-align:center;  }
#header_content h1 { font-size:56px; padding:30px 0; color:#333; }
#header_content h1 img { vertical-align:middle; padding-right:30px; width: 140px; }

.x { margin:0 auto; border:1px solid #ddd; border-radius:5px; position:relative; transition: all 0.6s; left:0;  }
#latest_content { background:#ddd; padding:60px 0; }
#results_archive_content { background:#fff; padding:45px 0; }
#points_archive_content { background:#ddd; padding:45px 0; }
#roll_content { background:#fff; padding:60px 0; }

.result { border-top:none; padding:0; transition: all 0.4s; overflow:hidden; max-height:0; text-align: center; }
.result > div { display:inline-block; vertical-align:top; margin: 0 15px; }
.result.show { max-height:1000px; padding:50px 0; border-top:1px solid #bbb; }
.result.last { padding-bottom:0; }
.result .panel { max-width:570px; text-align:left; }
.result .panel .title2 { text-align:left; font-weight:800; font-size:36px; padding:10px 0; }
.result .panel .introduction { padding: 10px 0 25px; font-family:'jaf-facitweb'; font-size:16px; line-height:24px; }
.result .panel button { text-align:center;  font-family:'jaf-bernino-sans-condensed'; font-weight:800; font-size:18px; color:#fff; width:270px; line-height:50px; background:#f50; border-radius:3px; border:none; cursor:pointer; }
.result .thumbnail { width:270px; height:205px; line-height:205px; background:#fff; text-align:center; border-radius:5px; overflow:hidden; }
.result img { width:270px; vertical-align:middle;}

.category { padding:0; transition: all 0.4s; overflow:hidden; max-height:0; }
.category.show { max-height:9999px; max-width: 570px; margin: 0 auto 40px; }
.category.last { margin-bottom:0; }
.category .info { background-color: #333; cursor: pointer; }
.category .info > div { display:inline-block; vertical-align:middle; color: #fff;}
.category .info img { width:125px; max-height:80px; vertical-align:middle; border-radius: 5px; display: block; }
.category .info .thumbnail { margin:10px; line-height:80px; width:125px; }
.category .info .title2 { padding:10px; text-align:left; font-weight:800; font-size:22px; }
.category .info ._btn { float: right; padding: 40px 20px 0 0; text-align: center; }
.category .info ._btn.show svg { -webkit-transform: rotate(180deg); transform:rotate(180deg); }

.category .archive { color: #000; }
.category .archive div { cursor: pointer; }
.category .archive div .year_arrow { float: right }
.category .archive div .year_arrow.clicked { -webkit-transform: rotate(180deg); transform: rotate(180deg); }
.category .archive div div { background-color: #fff; overflow:hidden; max-height: 0; transition: all 0.6s; max-width: 540px; padding: 0 20px; border: 1px solid #333; border-top: 0px; margin:-1px auto;font-family: 'jaf-facitweb'; font-weight: 400; font-size: 18px; color: #000;}
.category .archive div div:hover { background-color: #f50; color: #fff; }
.category .archive.show div div { max-height:100px; padding: 12px 20px; margin:0 auto; }
.category .archive.show div div.eventname { max-height:0; padding: 0 20px; margin:-1px auto; }
.category .archive.show div div.eventname.show { max-height:100px; padding: 12px 20px; margin:0 auto; }
.category .archive.show div div.last { margin-bottom: 0; }
.category .archive a { color: inherit; text-decoration:none; display: block; }

.honour { padding:0; transition: all 0.4s; overflow:hidden; max-height:0; font-family: 'jaf-bernino-sans-condensed'; }
.honour.show { max-height:9999px; margin: 0 auto; }
.honour .rank { text-align: right; display: inline-block; }
.honour .rank * { width: 30px; height: 30px; text-align: center; border-radius: 15px; line-height: 30px; display: inline-block; margin: 0 80px; font-size: small; }
.honour .rank .tie { visibility: collapse; }
.honour .r1 { background-color: gold; }
.honour .r2 { background-color: silver; }
.honour .r3 { background-color: sienna; }
.honour .name_bar { padding: 0 15px 20px; }
.honour .name_bar .name { display:inline-block; font-size:24px; }
.honour .name_bar .down { display:inline-block; padding: 5px;  }
.honour .name_bar .down.up {transform: rotate(180deg);}
.honour .scoreboard { padding: 5px; margin: 10px; text-align: right; }
.honour .scoreboard:hover { background-color: #eee; }
.honour .scoreboard .name { font-size: 22px; font-weight: bold; display: inline-block; width: 300px; padding-left: 30px; vertical-align: top; text-align: left; }
.honour .scoreboard .winner { display: inline-block; width: 190px; padding-top: 15px; vertical-align: top; text-align: center; }
.honour .scoreboard .winner div { display: inline-block; font-weight: bold; }
.honour .scoreboard .winner .m { width: 30px; height: 30px; text-align: center; border-radius: 15px; line-height: 30px; float:left; font-size: small; margin-top: 10px; display:none; }
.honour .scoreboard .winner .m.tie { visibility: collapse; }
@media screen and (max-width:899px){
	.result .panel .title2 { text-align: center; }
	.result .panel ._btn { text-align: center; }
}

@media screen and (max-width:910px){
	.honour.show { max-width: 620px; }
	.honour .rank { text-align:left; }
	.honour .scoreboard .name { display:block; padding-bottom: 10px; }
}
@media screen and (max-width: 700px){
	#header_content h1 { font-size:32px; }
	#header_content h1 img { padding-right:10px; width:60px; }
	.title2 { font-size: 28px; }
	.result .panel .title2 { font-size: 28px; }
	#latest_content, #results_archive_content, #points_archive_content, #roll_content { padding: 30px 0; }
}
@media screen and (max-width:620px){
	.honour.show { max-width: 400px; }
	.honour .rank { display: none;}
	.honour .scoreboard { text-align: center; }
	.honour .scoreboard .name { text-align: center; padding-left: 0px; margin: 0 auto; }
	.honour .scoreboard .winner { width: 290px; }
	.honour .scoreboard .winner .m  { display: inline-block; }
}