html {
    -webkit-text-size-adjust: none;
}

body, div {
  margin: 0;
  padding: 0;
}

html, body {
	height: 100%;
}

body {
	font-family: 'latoregular', Arial, sans-serif;
	font-size: 16px;
	text-align: center;
	color: #282828;
	line-height: 1.6;
}

/* Main Wrapper */

#mainWrapper {
	height: 100%;
	min-width: 320px;
	text-align: left;
	font-size: 16px;
}

/* Login Page */

#loginBg {
	height: 100%;
	background: url(../images/login-bg.jpg) repeat-x;
	-webkit-background-size: 1px 100%;
	-moz-background-size: 1px 100%;
	background-size: 1px 100%;
}

#loginPage {
	position: relative;
	height: 100%;
/*	background: url(../images/background.jpg) no-repeat; 
	-webkit-background-size: auto 100%;
	-moz-background-size: auto 100%;
	background-size: auto 100%; */
	background: url(../images/gathering_place2a.jpg) no-repeat;
	-webkit-background-size: 100% auto;
	-moz-background-size: 100% auto;
	background-size: 100% auto;
}

#loginPage .form {
	position: absolute;
	right: 25px;
	bottom: 25px;
	width: 310px;
	padding: 20px 15px;
	background: url(../images/login-form-bg.png);
	-webkit-box-shadow: 5px 5px 5px 0 rgba(0,0,0,0.30);
	-moz-box-shadow: 5px 5px 5px 0 rgba(0,0,0,0.30);
	box-shadow: 5px 5px 5px 0 rgba(0,0,0,0.30);
}

#loginPage .form .caption {
	display: block;
	font-size: 25px;
	color: #666666;
	padding-left: 5px;
	margin: 0 0 17px;
}

#loginPage .form .textbox {
	width: 278px;
	height: 45px;
	padding: 0 15px;
	margin: 0 0 11px;
	font-family: Arial, sans-serif;
	font-size: 15px;
	color: #000;
	border: 1px solid #999999;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
}

#loginPage .form .loginBtn {
	position: relative;
	display: block;
	width: 142px;
	height: 42px;
	border: 1px solid #cccccc;
	background: #d6d6d6;
	font-size: 18px;
	color: #fff;
	box-shadow: 0 2px 1px 0 rgba(0,0,0,0.2);
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
}

#loginPage .form .loginBtn em {
	position: relative;
	display: block;
	font-style: normal;
	line-height: 42px;
	z-index: 1;
	text-align: center;
}

#loginPage .form .loginBtn span {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 50%;
	background: #cccccc;
	-webkit-border-top-left-radius: 7px;
	-webkit-border-top-right-radius: 7px;
	-moz-border-radius-topleft: 7px;
	-moz-border-radius-topright: 7px;
	border-top-left-radius: 7px;
	border-top-right-radius: 7px;
}

/* Top Bar */

#topBarWrapper {
	background: #282828;
	margin-bottom: 11px;
}

#topBar {
	padding-top: 11px;
	padding-bottom: 11px;
}

#topBar .logoutBtn {
	font-size: 0.75em; /* 12px */
	color: #fff;
	background: url(../images/logout-ico.png) no-repeat;
	padding-left: 20px;
	-webkit-background-size: auto 100%;
	-moz-background-size: auto 100%;
	background-size: auto 100%;
}

/* Intro */

#intro {
	margin-bottom: 22px;
}

#intro .leftSide .image {
	position: relative;
	height: 501px;
	border: 4px solid #e7e7e7;
	margin-right: -15px;
	text-align: center;
	overflow: hidden;
}

#intro .leftSide .image img {
	position: absolute;
	top: 0;
	left: 50%;
	height: 100%;
	margin-left: -446px;
}

#intro .rightSide {
	height: 501px;
}

#navi {
	margin: 0;
	padding: 13px 21px 10px;
	background: #f4f4f4;
	height: 100%;
}

#navi li {
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid #d6d6d6;
	line-height: 1.3;
}

#navi li:first-child {
	border-top: 0;
}

#navi li a {
	display: block;
	font-size: 0.875em; /* 14px */
	color: #282828;
	padding: 9.5px 0;
	text-transform: uppercase;
}



/* Gallery */

#gallery {
	margin-bottom: 34px;
}

#gallery h2 {	
	text-align: center;
}

#gallery a {
	display: block;
}

#gallery a img {
	display: block;
	width: 100%;
}

/* Footer */

#footerWrapper {
	background: #282828;
}

#footer {
	padding-top: 30px;
	padding-bottom: 16px;
}

#footer .social {
	display: block;
	color: #fff;
	font-size: 0.78125em; /* 12.5px */
	line-height: 35px;
	background-repeat: no-repeat;
}

#footer .social span {
	display: block;
	padding-left: 2.96em;
	background-repeat: no-repeat;
	background-position: 5px center;
	-webkit-background-size: 2em 1.84em;
	-moz-background-size: 2em 1.84em;
	background-size: 2em 1.84em;
}

#footer .facebook {
	background-image: url(../images/facebook-bg.png);
	background-color: #325295;
}

#footer .facebook span {
	background-image: url(../images/facebook-ico.png);
}

#footer .twitter {
	background-image: url(../images/twitter-bg.png);
	background-color: #00aced;
}

#footer .twitter span {
	background-image: url(../images/twitter-ico.png);
}

#footer .pinterest {
	background-image: url(../images/pinterest-bg.png);
	background-color: #c32128;
}

#footer .pinterest span {
	background-image: url(../images/pinterest-ico.png);
}

#footer .youtube {
	background-image: url(../images/youtube-bg.png);
	background-color: #b11d15;
}

#footer .youtube span {
	background-image: url(../images/youtube-ico.png);
}

#footer .copyright {
	margin: 0;
	padding-top: 18px;
	font-size: 0.875em; /* 14px */
	color: #bebebe;
	text-align: center;
}

/* Miscelleneous */

h2 {
	font-size: 1.875em; /* 30px */
	color: #34b6df;
	margin: 0 0 18px;
}

p {
	margin: 0 0 16px;
}

a,
a:hover,
a:active,
a:focus {
	text-decoration: none;
	outline: none;
	color: #0000ff;
}

img {
	border: 0;
}

.clear {
	clear: both;
}

input::-moz-focus-inner { 
    border: 0;
    padding: 0;
}

form {
	margin: 0;
	padding: 0;
}

input, select, textarea {
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
}

/* Media Queries */

@media only screen and (max-width : 1200px) {
	#mainWrapper {
		font-size: 12.7px;
	}
	
	#intro .leftSide .image,
	#intro .rightSide {
		height: 455px;
	}
		
	#noticeBoard {
		padding-left: 17.4667em;
	}
}


@media only screen and (max-width : 992px) {
	#mainWrapper {
		font-size: 16px;
	}
	
	#topBar .logoutBtn {
		margin-left: 0;
	}
	
	#intro .leftSide .image {
		margin-right: 0;
	}
	
	#intro .leftSide .image img {
		position: static;
		display: block;
		margin: 0;
		width: 100%;
		height: auto;
	}
	
	#welcomeWrapper {
		background: none;
	}
	
	#intro .leftSide .image, #intro .rightSide {
		height: auto;
	}
	
	#navi li a {
		text-align: center;
	}
	
	#footer .social,
	#gallery a {
		margin-bottom: 30px;
	}
	
	#footer .copyright {
		padding-top: 0;
	}
	
	#welcome h2 {
		text-align: center;
	}
	
	#noticeBoard {
		height: 317px;
		max-width: 523px;
		padding-left: 14.4667em;
		margin: 0 auto;
		margin-top: 20px;
	}
		
	#footer .social {
		width: 170px;
		margin: 0 auto 30px;
	}
}




@media only screen and (max-width : 767px) {
	#mainWrapper {
		font-size: 14px;
	}
	
	#noticeBoard {
		padding-left: 16.4667em;
	}
	
   #footer .social {
      color: #fff;
      font-size: 0.7em !important;
      line-height: 35px;
   }
   #footer .social span{
	   padding-left:2.5em !important;
}
}





/* 480px */

@media only screen and (max-width : 500px) {
	h2 {
		font-size: 1.4em;
	}
	
	#noticeBoard {
		background-position: 30% 0;
		padding-left: 12.4667em;
	}
}

@media only screen and (max-width : 440px) {
	#noticeBoard {
		background-position: 50% 0;
		padding-left: 8.4667em;
	}
}



@media only screen and (max-width : 386px) {
	#noticeBoard {
		background-position: 90% 0;
		padding-left: 0.666667em;
	}
}

/* 320px */

@media only screen and (max-width : 478px) { 

}

@media only screen and (min-width:310px) and (max-width:479px){


  .container{ width:303px !important; margin:0 auto !important; padding:0px !important;}
	  
	  
#noticeBoard span {
    font-size:1.1em !important;
    margin-bottom: 12px !important;
}
#footer .social {
    margin: 0 auto 30px !important;
    width:100% !important;
}
#noticeBoard {
    padding: 0 1.53333em 0.666667em 12em !important;
}
#footer{padding-top:15px !important;}

.row{margin-left:0px !important; margin-right:0px !important;}
#footer .social span{font-size:9px !important;}

#mainWrapper{min-width:100% !important;}

#footer .social {width: 100% !important; margin: 0 auto 30px !important;}

#lightbox-container-image > img{width:100% !important;}

#lightbox-container-image-box{width:100% !important; height:100% !important;}
}