/* CSS Document */
body {
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	background-color: #333333;
}
.large {
	font-size: 24px;
	font-weight: bold;
	font-family: Tahoma;
	color: #C0E6F3;
}
.med {
	font-size: 18px;
	font-family: tahoma;
	color: #FFFFFF;
}
.meddblue {
	font-size: 18px;
	font-family: tahoma;
	color: #186785;
}
.medblue {
	font-size: 18px;
	font-family: tahoma;
	color: #C0E6F3;
}
.sml {
	font-size: 12px;
	font-family: tahoma;
	color: #FFFFFF;
}
.smlblk {
	font-size: 12px;
	font-family: tahoma;
	color: #000000;
}
a:link {color: #C0E6F3; text-decoration:underline}
a:hover {color: #C0E6F3; text-decoration:none}
a:visited {color: #C0E6F3;}
a:active {color: #C0E6F3;}

a.rollover {
	display: block;
	width: 110px;
	height: 26px;
	text-decoration: none;
	background: url("images/home_button.jpg");
	}
a.rollover:hover {
	background-position: -110px 0;
	}
.displace {
	position: absolute;
	left: -5000px;
	}
a.rollover2 {
	display: block;
	width: 103px;
	height: 26px;
	text-decoration: none;
	background: url("images/lessons_button.jpg");
	}
a.rollover2:hover {
	background-position: -103px 0;
	}
a.rollover3 {
	display: block;
	width: 101px;
	height: 26px;
	text-decoration: none;
	background: url("images/gallery_button.jpg");
	}
a.rollover3:hover {
	background-position: -101px 0;
	}
a.rollover4 {
	display: block;
	width: 102px;
	height: 26px;
	text-decoration: none;
	background: url("images/huahin_button.jpg");
	}
a.rollover4:hover {
	background-position: -102px 0;
	}
a.rollover5 {
	display: block;
	width: 103px;
	height: 26px;
	text-decoration: none;
	background: url("images/chumphon_button.jpg");
	}
a.rollover5:hover {
	background-position: -103px 0;
	}
a.rollover6 {
	display: block;
	width: 102px;
	height: 26px;
	text-decoration: none;
	background: url("images/phuket_button.jpg");
	}
a.rollover6:hover {
	background-position: -102px 0;
	}
a.rollover7 {
	display: block;
	width: 102px;
	height: 26px;
	text-decoration: none;
	background: url("images/contact_button.jpg");
	}
a.rollover7:hover {
	background-position: -102px 0;
	}
a.rollover8 {
	display: block;
	width: 102px;
	height: 26px;
	text-decoration: none;
	background: url("images/faq_button.jpg");
	}
a.rollover8:hover {
	background-position: -102px 0;
	}

.menu_container {margin:0 auto 20px auto; position:relative; left:20px; width:900px; height:10px; z-index:100;}
.menu, .menu ul {padding:0; margin:0; list-style: none; position:absolute;}

.menu ul {left:-9999px; width:150px; padding:0 20px 20px 20px; background:url(trans.gif); opacity:0; -o-transition: opacity 0.6s ease-in-out; -moz-transition: opacity 0.6s ease-in-out; -webkit-transition: opacity 0.6s ease-in-out;}
.menu ul ul {padding:20px 20px 20px 0;}

.menu a {display:block; width:130px; padding-left:0px; font:normal bold 12px/25px arial,sans-serif; color:#FFFFFF; text-decoration:none; border:1px solid #fff; margin:0 -1px -1px 0; background:#186785;}

.menu li {float:left;}
.menu li.fly > a {background:#186785 url(basic/arrow.gif) no-repeat 130px center;}
.menu li:hover {position:relative; z-index:100;}
.menu li:hover > a {background-color:#C0E6F3; color:#186785; border-color:#dadada;}
.menu li:hover > ul {top:26px; left:-20px; z-index:-1; opacity:1;}
.menu li:hover li:hover > ul {left:145px; top:-20px; z-index:100; opacity:1;}
.menu li.right:hover li:hover > ul {left:-165px; top:-20px; z-index:100; padding:20px 0 20px 20px; opacity:1;}