/*Includes*/

/*Definions*/
@font-face {
	font-family: "HYQiHei 65J";
	src: url("/static/css/hkrpg.css");
}
/*General Styles*/
a{
	text-decoration: none;
	color: inherit;
}
a:link{
	text-decoration: none;
	color: inherit;
}
a:hover{
	text-decoration: none;
	cursor: pointer;
}
a:visited{
	text-decoration: none;
	color: inherit;
}
ul li{
	list-style: none;
}


/*App Layout*/
*{
	margin: 0;
	padding: 0;
}

html,body{
	width: 100%;
	height: 100%;
	display: flex;
}

body{
	margin: 2px;
	display: flex;
	justify-content: center;
	flex: 1;
}

body > #app > *{
	display: flex;
	font-family: "HYQiHei 65J";
	/* border: 1px solid; */ /*test only*/
}

#app{
	margin: 10px;
	display: flex;
	flex-direction: column;
	flex:1;
	max-width: 1000px;
}

/*<header>*/
#app > header{
	width: 100%;
	height: 60px;
	/* flex-direction: column; */
	justify-content: center;
	align-items: center;
	margin-bottom: 20px;
}
#top{
	display: flex;
	font-size: 30pt;
	margin-right: 20px;
}

#siteMenu{
	display: flex;
	flex: 1;
	align-items: center;
}
#siteMenu > p{
	display: inline-flex;
	margin: 2px 10px;
	font-size: 20pt;
	line-height: 50px;
	width: 100%;
	height: inherit;
	justify-content: center;
	animation: tabOut 0.5s ease-out;
}
#siteMenu > p:hover{
	animation: tabIn 0.5s ease-in;
	background-color: #00aaff;
	color: white;
}
#siteMenu > p >a:hover{
	color: white;
}

/*Normal Index Card*/
.subShowBox{
	display: flex;
	flex-direction: column;
	flex:1;
	height: 400px;
	align-items: center;
	background-color: #cfcfcf;
	margin-right: 10px;
}
.subShowBoxTitle{
	font-size: 20pt;
}
.subShowBoxText{
	margin: 10px;
	text-indent: 2em;
}
.subShowBoxLearnMore{
	
}
.subShowBoxPic > img{
	margin-top: 10px;
	width: 100%;
	height: 150px
}

/*Activity Index Card*/
.ac_subShowBox{
    display: flex;
	flex:1;
	height: 300px;
	/* align-items: flex-start; */
	background-color: #cfcfcf;
	margin-top: 10px;
    margin-bottom: 10px;
	background-image: linear-gradient(270deg,#FFFFFF7D,#FFFFFF00);
	background-blend-mode: overlay;
	background-size: cover;
}
.ac_left{
    display: flex;
    flex:40%;
    padding: 10px;
}

.ac_right{
    display: flex;
    flex:60%;
    /* margin: 10px; */
    padding: 10px;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
}

/*Titles*/
.majorSectTitle{
	display: flex;
	font-size: 16pt;
	margin-top: 20px;
}
.majorSectTitle > *{
	margin-right: 20px;
}
.majorSectTitleHr{
	width:80%;
	height: 4px;
	border: 0;
	background-color: #00aaff;
	margin:0px 0px 10px 0px;
}

/*Main*/
main{
	display: flex;
	flex-direction: column;
}

/*<footer>*/
#app > footer{
	width: 100%;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	background-color: #cfcfcf;
}

#app > footer > *{
	color: #5f5f5f;
}

/*Beian Infomation*/
.beian:hover{
	color: purple;
	text-decoration: underline;
}
.beian:active{
	color: yellow;
	text-decoration: underline;
}
#policeBeian{
	line-height: inherit;
	height: inherit;
}
#policeBeian::before{
	content: url("/static/img/police.png");
}