@charset "utf-8";
/* CSS Document */
<style type="text/css">
	/*custom font for text*/
	@import url(http://fonts.googleapis.com/css?family=Nunito);
	/*CSS file for fontawesome - an iconfont we will be using. This CSS file imported contains the font-face declaration. More info: http://fortawesome.github.io/Font-Awesome/ */
	@import url(http://thecodeplayer.com/uploads/fonts/fontawesome/css/font-awesome.min.css);
	
	/*Basic reset*/
	* {margin: 0; padding: 0;}
	
	body {
		background: linear-gradient(to right, #ffa69e, #faf3dd, #FFF7C4, #FEE798);
		font-family: "TH SarabunPSK";
		font-size:16px;
	}
	#accordian {
		background: #004050;
		width: 250px;
		/*margin: 100px auto 0 auto;*/
		color: white;
		/*Some cool shadow and glow effect*/
		box-shadow: 
			0 5px 15px 1px rgba(0, 0, 0, 0.6), 
			0 0 200px 1px rgba(255, 255, 255, 0.5);
	}
	/*heading styles*/
	#accordian h3 {
		font-size: 16px;
		line-height: 34px;
		padding: 0 10px;
		cursor: pointer;
		/*fallback for browsers not supporting gradients*/
		background: #003040; 
		background: linear-gradient(#003040, #002535);
	}
	/*heading hover effect*/
	#accordian h3:hover {
		text-shadow: 0 0 1px rgba(255, 255, 255, 0.7);
	}
	/*iconfont styles*/
	#accordian h3 span {
		font-size: 16px;
		margin-right: 10px;
	}
	/*list items*/
	#accordian li {
		list-style-type: none;
	}
	/*links*/
	#accordian ul ul li a {
		color: white;
		text-decoration: none;
		font-size: 16px;
		line-height: 27px;
		display: block;
		padding: 0 15px;
		/*transition for smooth hover animation*/
		transition: all 0.15s;
	}
	/*hover effect on links*/
	#accordian ul ul li a:hover {
		background: #003545;
		border-left: 5px solid lightgreen;
	}
	/*Lets hide the non active LIs by default*/
	#accordian ul ul {
		display: none;
	}
	#accordian li.active ul {
		display: block;
	}
	#rcorners1 {
		border-radius: 0px 0px 70px 70px;
		background: #1B5453;
		padding: 20px;     
	}
	#rcorners2 {
		border-radius: 0px 50px 0px 50px;
		background: #066648;
		padding: 10px;   
		font-size:22px; 
		color:#FFFFFF; 
	}
	a:link {
	  color: #FFFFFF;
	  background-color: transparent;
	  text-decoration: none;
	}
	a:visited {
	  color: #FFFFFF;
	  background-color: transparent;
	  text-decoration: none;
	}
	a:hover {
	  color: #CCFF66;
	  background-color: transparent;
	  text-decoration: underline;
	  font-size:24px;
	}
	a:active {
	  color: #FFCCCC;
	  background-color: transparent;
	  text-decoration: underline;
	}
</style>