@charset "UTF-8";

body {
	background-color: #eeeeee;
}

/*************************************************************************************
 * Home of institute
 */

/* All containers */
div.container-center {
	width: 820px;
	padding: 0px;
	background-color: white;
}
div.content-center {
	margin: 0px;
	width: 100%;
	max-width: 800px;
	padding: 20px 10px 20px 10px;
}
div.content-full {
	margin: 0px;
	padding: 0px;
	width: 100%;
	max-width: 800px;
}
@media only screen and (max-width : 819px) {
	div.container-center {
		width: 100%;
		padding: 0px;
		margin: 0px;
	}
	div.content-full {
		width: 90%;
		margin: 0px;
		padding-left: 5%;
		padding-right: 5%;
	}
	div.content-center {
		margin: 0px;
		width: 90%;
		padding: 5%;
	}
}


/* Cover */
div.cover div.content-full {
	margin: 0px;
	padding: 0px;
	height: 312px;
	background-size: contain;
	background-repeat: no-repeat;
	
}

div.c-2 {
	padding: 10px;
	margin: auto;
	text-align: left;
}

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

	div.c-2 {
		padding: 0px 10px 0px 0px;
		margin: auto;
		text-align: left;
		float: none;
	}
}


/**
 * Team Info
 */
div.team-info {
	background-image: linear-gradient(to right, #073660, #0E5A8E);	
}



/**
 * Action
 */
div.container-full.action {
	background-color: #4989F5;
	background-image: linear-gradient(to right, #073660, #0E5A8E);
}
div.container-full.action div.c-2 {
	width: 50%; 
}
div.container-full.action div.call-for-action {
	padding: 10px 0px 0px 0px;
	color: white;
	font-size: 1.4rem;
	text-align: center;
}

div.container-full.action div.action {
	padding: 10px 0px 10px 0px;
	text-align: left;
}
div.container-full.action div.action a {
	text-decoration: none;
	margin-right: 15px;
}




/**********************************************************************************
 * Tablets
 */ 
@media only screen and (max-width : 991px) {
	
	/**
	 * Action
	 */

	div.container-full.action div.call-for-action {
		font-size: 2.1vw;
		font-size: calc(10px + 0.8vw);
	}	
	div.container-full.action div.action a {
		font-size: 1.9vw;
		font-size: calc(12px + 0.3vw);
		margin-right: 5px;
	}
}




/**********************************************************************************
 * Smartphones
 */ 
@media only screen and (max-width : 639px) {
	
	/**
     * Action
     */
	div.container-full.action div.c-2 {
		width: 100%;
		text-align: center;
	}	
	div.container-full.action div.call-for-action {
		text-align: center;
		font-size: 1rem;
	}	
	div.container-full.action  div.action a {
		font-size: 0.9rem;
		font-weight: 500;
		margin-right: 15px;
	}

	
	div.news.container table {
		width: 100%;
	}
	div.announcement.container1 table td {
		font-size: smaller;
	}
}


/*************************************************************************************
 * Form and Fields
 * Button is defined in max-height: .css;
 */

form { 
	padding: 0px;
	margin: 0px;
	text-align: center;
	font-family: 'Sarabun', sans-serif, Tahoma;
}
form div.title {
	font-weight: 500;
	font-size: 1.2rem;
}
form div.container-center.field {
	padding-top: 20px;
	padding-bottom: 20px;
	text-align: center;
}

form div.field-label  {
	width: 40%;
	min-width: 320px;
	text-align: right;
	color: #004371;
}

form div.field-content  {
	width: 40%;
	min-width: 320px;
	text-align: left;
}

form div.field div.label {
	font-weight: 500;
}

form div.field div.info {
	font-size: smaller;
}
form div.field div.error {
	font-size: smaller;
}

form input[type="password"] {

	margin: 0px;
	padding: 8px;
	font-size: 1rem;
	font-weight: 300; 
	line-height: 150%; 
	overflow: visible;	
	font-family: 'Sarabun', sans-serif, Tahoma;
	border: 1px solid #073B91;
	width: 250px;

}
form input[type='text'] {
	margin: 0px;
	padding: 8px;
	font-size: 1rem;
	font-weight: 300; 
	line-height: 150%; 
	overflow: visible;	
	font-family: 'Sarabun', sans-serif, Tahoma;
	border: 1px solid #073B91;
	width: 250px;

}

form input[type='file'] {
	display: inline-block;
	margin: 0px;
	padding: 0px;
	width: 250px;
	opacity: 1;
	overflow: hidden;
}


form select {
	margin: 0px;
	padding: 8px;
	font-size: 0.9rem;
	font-weight: 300; 
	line-height: 150%; 
	overflow: visible;
	font-family: 'Sarabun', sans-serif, Tahoma;
	border: 1px solid #073B91; 
	width: 250px;
}

form textarea {
	margin: 0px;
	padding: 8px;
	font-size: 0.9rem;
	font-weight: 300; 
	line-height: 120%; 
	overflow: visible;
	font-family: 'Sarabun', sans-serif, Tahoma;
	border: 1px solid #073B91;
	width: 250px;
	height: 300px;
}

 
form input.button {
}

@media only screen and (max-width : 819px) {
	form div.field-label  {
		padding-top: 20px !important;
		text-align: left;
	}

	form div.field-content  {
		padding-bottom: 0px !important;
	}
}