#main{
		margin: 7.1em 0px 0px 0px !important;
	}
	.tab a.active::before {
		position: absolute;
		content: " ";
		left: 0;
		width: 8px;
		height: 12px;
		top: 13px;
		border-top: 5px solid transparent;
		border-left: 10px solid #f39d01;
		border-bottom: 5px solid transparent;
	}
	#dummy{

	}

	.pagination>li>a, .pagination>li>span{
		color: #000 !important;
	}
	.pagination>.active>a, .pagination>.active>span, .pagination>.active>a:hover, .pagination>.active>span:hover, .pagination>.active>a:focus, .pagination>.active>span:focus{
		color:white !important;
	}

 	.submenuBar{
    	float:none;
 		background-color: #FFF;
 		width: 100%;
		margin-top: 1em;
		margin-bottom: 1em;
		font-size: 16px;
 	}

	.sharesocial{
		font-size: 24px !important;
	}

	.contentContainer{
  /*  padding: 1em;*/
		width: 100%;
		overflow:auto;
	}

	.featuredEvent h3{
		margin: 1em;
		margin-bottom: 2em;
	}
	
	.upcomingEvent h3{
		margin: 1em;
		margin-bottom: 2em;
	}

	.join_btn{
		float: right;
		font-size: 26px !important;
		background-color: #DCDCDC !important;
		border-radius: 3px !important;
		padding: 8px !important;
		height: 2em !important;
	}
	.btn{
		padding: 6px 12px 3px 12px !important;
	}
	
	.eventContent{
		width: 100%;
	}

 	.leftContainer{
 		width: 69%;
 		display: inline-block;
 		float:left;
		font-size: 16px;
 	}
	
 	.leftContainer h2{
 		margin-bottom: 2em;
		font-size: 16px;
 	}

 	.rightContainer{
 		width: 27%;
 		float:right;
 		display: inline-block;
 	}

	.ui-datepicker-calendar {
		display: none;
	}

 	.pageNumberContainer{
 		width: 100%;
 		text-align: center;
 		margin: 10px;
 	}

 	.calendar{   
 		width: 100% !important;
    	margin-top: 0px !important; 
		margin-bottom: 20px !important;
    	padding: 5px !important;
    	/*border-top: 0px none !important;*/
		border: 1px solid black;
    	height: auto !important;
    	display: inline-block;
		box-shadow: 1px 1px 1px #616161;
	}

	.featuredEvent{
		width: 100%; 
		margin-bottom: 20px;
	}

	.upcomingEvent {
		width: 100%; /*  215 px*/ 
		margin-bottom: 20px;
	}

	.eventGrid{
		background-color: #ddd;
		display: inline-block;
		width: 300px;
		margin-left: 2px;
		margin-top: 5px;
		margin-bottom: 5px;
		line-height: 1;
	}

	.eventGrid img{
		width: 300px;
	}

	.eventGrid #eventTitle{
		overflow: hidden;
		padding: 5px;
		width: 100%;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.eventGrid #eventDate{
    	white-space: normal; 
		width: 100%;
		padding: 5px;
	}

	.eventGrid #eventLocation{
    	overflow: hidden;
		width: 200px;
		margin-left: 3px;
    	padding-left: : 8px;
    	padding-right: 8px;
    	padding-bottom: 8px;
    	white-space: nowrap; 
		text-overflow: ellipsis;
	}

	.eventTable{
		margin-top: -25px;
		width: 215px; 
		border: 0px;
	} 
	
	.eventTable #eventTitle{
    	overflow: hidden;
    	padding-top: 4px;
    	padding-left: : 8px;
    	padding-right: 8px;
		width: 215px; 
    	white-space: nowrap; 
		text-overflow: ellipsis;
	}

	.reserved{
		background-color: #ccc;
		width: 100%; 
		height: 148px;
	}
	
	.calendar-dow {
		border: 0px !important;
	}
	.panel-container{
		width: 100% !important;
	}

	.event{
		margin: 0em 0em 0em 0em !important;
		float: none !important;
		width: 100%;
	}	

	.etabs {
		margin: 0em 0px 0px 0em !important;
	    display: inline;
	}

	.tab { 
		display: inline-block; 
		zoom:1; 
		*display:inline; 
		background: #fff; 
		border: solid 0px #999; 
		border-bottom: none; 
		-moz-border-radius: 4px 4px 0 0; 
		-webkit-border-radius: 4px 4px 0 0; 
	}
	.tab li{
		list-style-type:square !important;
	}

	.tab a { 
		font-size: 14px; 
		line-height: 2em; 
		display: block; 
		padding: 0 10px; 
		outline: none; 
	}
	
	.tab a:hover { 
		text-decoration: underline; 
	}
	
	.tab.active { 
		background: #fff; 
		padding-top: 6px; 
		position: relative; 
		top: 1px; 
		border-color: #666; 
	}
	
	.tab a.active { 
		font-weight: bold; 

	}
	
	.tab-container .panel-container { 
		background: #fff; 
		border: solid #666 0px; 
		padding: 1px;  
	}
	
	.page{
		overflow: hidden;
	}
	
	h1{
		letter-spacing: 0em !important;
		margin: 0px !important;
		padding: 0.6em 0px !important;
	}

	h2, h3, h4, h5, h6 {
		letter-spacing: 0em !important;
		margin: 0px ;
	}
	
	.col-md-8{
		width:650px !important;
	}

	.descriptionContent tr{
	}

	.desHeader {
		width: 25%;
	}

	.desImage{
	}
	/*
	input[type="submit"]:hover, input[type="reset"]:hover, input[type="button"]:hover, button:hover, .button:hover {
		color: #dda400 !important;
		box-shadow: inset 0 0 0 2px #dda400;
	}
	*/

	.error_input{
		color: red;
	}

	@media screen and (max-width: 980px) {
		#main {
			margin: 0px !important;
		}
		.sidemenu{
			display: none;
		}
		.content{
			width: 100%;
		}
		
		.page{
			overflow: hidden;
			padding: 0em;
		}
		
		.listview{
			width: 100%;
		}
		
		.rightContainer{
			float: right;
		}
		
		.leftContainer{
			float: left;
		}
	}

	.calendar-month-header{
		/*background-image: url('/20201208130549oe_/https://alumni.cuhk.edu.hk/themes/cuaao/images/eventcalendar/calendarHeader.png') !important;
		background-color: transparent !important;*/
	}

	div.zabuto_calendar .table tr.calendar-month-header th{
		background-color: transparent !important;
	}

	div.zabuto_calendar .table tr th, div.zabuto_calendar .table tr td {
		background-color: transparent !important;
	}

	@media screen and (max-width: 876px) {
		.eventGrid{
			width: 100%;
		}
		.eventGrid img{
			width: 100%;
		}
		.eventDate{
			text-align: center;
		}
		.eventTitle{
			text-align: center;
		}

	}

	@media screen and (max-width: 736px) {
		#main {
			padding: 0em !important;
		}
		
		.contentContainer{
			overflow: hidden;
		}
		
		.leftContainer{
			overflow: hidden;
			width:100%;
			margin: 0px;
			float: none;
		}
		
		.rightContainer{
			overflow: hidden;
			width:100%;
			margin: 0px;
			float: none;	
		}
		
		.page{
			overflow: hidden;
			padding: 0em;
		}
		
		.eventContent{
			width:100%;
		}
		
		.calendar{
			width:100%;
		}
		
		.featuredEvent{
			width:100%;
		}
		
		.upcomingEvent{
			width:100%;
		}

		.join_btn {
			float: left;
		}
	}