@charset "utf-8";
/* CSS Document */

body {font-family:"ms Sans Serif", sans-serif, tahoma;  font-size:11pt; color:#000000; margin:0px; background:url(images/bgindex.jpg); }

/* font */
#topic{ font-size:12pt;font-weight:bold;}
#content{ width:600px; text-indent:0.3in; text-align:justify; margin-bottom:30px;}

/*  menu top*/	
ul.navitop {list-style-type: none; width: 100%; margin:1px; padding:1px;}
 ul.navitop li { display: inline; margin-right:15px; }     
 ul.navitop li  a{ text-decoration: none;  text-decoration: none; padding:1px;  color:#FFFFFF; }
 ul.navitop li  a:hover { color:#333333; background-color:#FF9900;}
 ul.navitop li a:visited {color:#FFFFFF; } 
 
 /*  linkleft */	
ul.linkleft li  a{ text-decoration: none;  text-decoration: none; margin:1px; padding:1px; font-weight:bold; font-size:11pt;}
ul.linkleft li	 a:hover { color:#FFFFFF; background-color:#FF9900; }
ul.linkleft li	 a:visited {color:#333333; } 
ul.linkleft {list-style:none; padding-left:0px; margin-left:15px;}
ul.linkleft li { font-size:11pt; padding-left:5px; padding-right:5px;}

/* ul ol contact */
ul.contact {margin:10px; padding-bottom:15px;}
ul.contact li {margin-bottom:10px;}
table.contact {width:600; padding-left:40px;}
table.contact td{border-bottom:#333333 dotted 1px; padding:5px;}

/* ul ol regisForm */
ol.regisForm {margin:10px; padding-bottom:15px;}
ol.regisForm li {margin-bottom:10px;}
/* plan */

#lineBottom {border-bottom:#333333 dotted 1px;}

/* ul ol contentPage */
ul.contentPage {margin:10px; padding-bottom:15px; }
ul.contentPage li {margin-bottom:10px;}
ol.contentPage {margin:10px; padding-bottom:15px; }
ol.contentPage li {margin-bottom:10px;}
/* ul ol course*/
ul.course {margin:5px; padding-bottom:5px;}
ul.course li {margin-bottom:5px;}
ol.course {margin:5px; padding-bottom:5px;}
ol.course li {margin-bottom:5px;}
/*  link */
a{ text-decoration: none;  text-decoration: none; margin:1px; padding:1px; font-weight:bolder;  }
a:hover { color:#FFFFFF; background-color:#FC6;}
a:visited {color:#333333; } 

/* ฟอร์มรับข้อมูลสมัครเรียน และ กรอกข้้อมูลประวัติ*/
table.inputForm {width:600px; border:none; padding:5px;}
table.inputForm tr{height:30px;}
table.inputForm td{ vertical-align:middle;}
input { background-color:#E6FFFF; width:200px; height:20px;}
input.button{  background-color:#CCCCCC; width:100px; height:30px;}
select { background-color:#E6FFFF; width:200px;}
fieldset{margin-top:11px; margin-bottom:5px; padding:5px; border:groove #999999; width:925px;}
legend{margin-top:5px; margin-bottom:5px; font-size:11pt;background-color:#67D2FE; border-bottom:outset #000000; border-right:outset #000000;}


<!-----------กรอบรูป------------------>
.photo {
	margin: 30px;
	position: relative;
	width: 180px;
	height: 130px;
	float: left;
}
.photo img {
	background: #fff;
	border: solid 1px #ccc;
	padding: 4px;
}
.photo span {
	width: 20px;
	height: 18px;
	display: block;
	position: absolute;
	top: 12px;
	left: 12px;
	background: url(images/digg-style.gif) no-repeat;
}
.photo a {
	text-decoration: none;
}

.sample1 span {
	width: 28px;
	height: 21px;
	display: block;
	position: absolute;
	top: -12px;
	left: 90px;
	background: url(images/pin.png) no-repeat;
}

.sample2 span {
	width: 77px;
	height: 27px;
	display: block;
	position: absolute;
	top: -12px;
	left: 50px;
	background: url(images/tape.png) no-repeat;
}

.sample3 span {
	width: 30px;
	height: 60px;
	display: block;
	position: absolute;
	top: -5px;
	left: -2px;
	background: url(images/paper-clip.png) no-repeat;
}

.sample4 span {
	width: 115px;
	height: 32px;
	display: block;
	position: absolute;
	top: -13px;
	left: 30px;
	background: url(images/tape2.png) no-repeat;
}

.sample5 span {
	width: 216px;
	height: 166px;
	display: block;
	position: absolute;
	top: -17px;
	left: -18px;
	background: url(images/gold-frame.png) no-repeat;
}

.sample6 span {
	width: 189px;
	height: 137px;
	display: block;
	position: absolute;
	top: -5px;
	left: -5px;
	background: url(images/cut-corner.png) no-repeat;
}

.sample7 span {
	width: 170px;
	height: 120px;
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	background: url(images/round-corner.png) no-repeat;
}
.sample7 img {
	border: none;
	padding: 0;
}

.sample8 span {
	width: 170px;
	height: 120px;
	display: block;
	position: absolute;
	top: 5px;
	left: 6px;
	background: url(images/round-corner.png) no-repeat;
}
.sample8 img {
	border: none;
	padding: 5px 6px 6px;
	background: url(images/round-bg.gif) no-repeat;
}

.sample9 span {
	width: 170px;
	height: 120px;
	display: block;
	position: absolute;
	top: 6px;
	left: 7px;
	background: url(images/stamp-pattern.png) no-repeat;
}
.sample9 img {
	border: none;
	padding: 6px 7px 7px;
	background: url(images/stamp-bg.gif) no-repeat;
}

.sample10 span {
	width: 181px;
	height: 134px;
	display: block;
	position: absolute;
	top: -6px;
	left: -6px;
	background: url(images/brush-border.png) no-repeat;
}
.sample10 img {
	border: none;
	padding: 0;
}

.sample11 span {
	width: 122px;
	height: 72px;
	display: block;
	position: absolute;
	top: -22px;
	left: -15px;
	background: url(images/floral-corner.png) no-repeat;
}

.sample12 span {
	width: 186px;
	height: 137px;
	display: block;
	position: absolute;
	top: 2px;
	left: 2px;
	background: url(images/watercolor-top.png) no-repeat;
}
.sample12 img {
	border: none;
	padding: 9px 12px 12px 11px;
	background: url(images/watercolor-bg.png) no-repeat;
}

.sample13 span {
	width: 170px;
	height: 120px;
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	background: url(images/mask.png) no-repeat;
}
.sample13 img {
	border: none;
	padding: 0;
}

.sample14 span {
	width: 170px;
	height: 84px;
	display: block;
	position: absolute;
	top: 5px;
	left: 5px;
	background: url(images/glossy-gradient.png);
}


/*ริบบิ้นสีดำไว้ทุกข์มุมขาวบน*/

.black-ribbon {
  position: fixed;
  z-index: 9999;
  width: 70px;
}
@media only all and (min-width: 768px) {
  .black-ribbon {
    width: auto;
  }
}

.stick-left { left: 0; }
.stick-right { right: 0; }
.stick-top { top: 0; }
.stick-bottom { bottom: 0; }