@charset "utf-8";
body {	
	background-image:url(edit/bg.gif);
	background-color:#FFFFFF;
	background-repeat:repeat;
	margin-top:50px;
	margin-left:50px;
	margin-right:50px;
	margin-bottom:0px;
}
#head_bg
{
background-image:url(edit/Head_bg.png);
background-position:center;
text-align:center;
background-repeat:repeat-x;
height:157px;
}
#head_logo
{
background-image:url(logo.png);
width:200px;
height:200px;
background-repeat:no-repeat;
background-position:left;
position:absolute;
top: 5px;
left:30px;
}
#head_bg_l
{
background-image:url(edit/Head_bg_l.png);
background-position:right;
background-repeat:no-repeat;
height:157px;
width:20px;
}
#head_bg_r
{
background-image:url(edit/Head_bg_r.png);
background-position:left;
background-repeat:no-repeat;
height:157px;
width:20px;
}
.bar
{
font-size:14px;
font-family: verdana, sans-serif;
color:#0033FF;
background-image:url(edit/bar_bg.png);
background-repeat:repeat-x;
text-align:center;
height:37;
}
.bar_l
{
background-image:url(edit/bar_l.png);
background-repeat:no-repeat;
background-position:right;
height:37;
}
.bar_r
{
background-image:url(edit/bar_r.png);
background-repeat:no-repeat;
background-position:left;
height:37;
}
.bar a:link
{
color:#0033FF;
}
.bar a:hover
{
color:#FF0099;
text-decoration:underline;
}
.table_bg
{
background-color:#3FA9F5;
}
.table_l
{
background-image:url(edit/table_l.png);
background-repeat:repeat-y;
background-position:right;
}
.table_r
{
background-image:url(edit/table_r.png);
background-repeat:repeat-y;
background-position:left;
}


#bottomlogo
{
background-image:url(low_logo.png);
background-position:right;
background-repeat:no-repeat;
height:90px;
width:100%;
margin-top:-40px;
}

/*#bottomlogo a:link, a:visited
{
color:#0066FF;
}*/


#bottom_bg
{
background-image:url(edit/bottom_bg.png);
background-position:top;
text-align:center;
background-repeat:repeat-x;
height:98px;
}


.bottom_text{ color: #069; font: 12px Tahoma, Arial, sans-serif; padding: 10px 0; }
.bottom_text a {  color: #069; text-decoration: none; padding: 2px 6px 3px 6px; border: 0px solid #E2EFF3; }
.bottom_text a:hover { color: #003F5F; border-color: #B7D7E1; font: 14px Tahoma, Arial, sans-serif; text-shadow: 2px 2px 2px #96e2f5;}
.bottom_text font { font: 12px Tahoma, Arial, sans-serif; background: #F8FBFC; color: #CCCCCC; padding: 2px 6px 3px 6px; border: 1px solid #E2EFF3; }


#bottom_l
{
background-image:url(edit/bottom_l.png);
background-position:right;
background-repeat:no-repeat;
height:98px;
width:20px;
}
#bottom_r
{
background-image:url(edit/bottom_r.png);
background-position:top;
background-repeat:no-repeat;
height:98px;
width:20px;
}


.news
{
text-align:center;
color:#000000;
font-size:13px;
}
.news a:link
{
color:#0033FF;
text-decoration: underline;
}
.news a:hover
{
color:#FF0000;
}

.news div a img 
{
width:auto;
height:auto;
border:none;
}

/*ย่อขนาดภาพที่เอามาพรีวิว*/
.news div img 
{
border:solid 2px #FFFFFF;
width:auto; 
height:100px;
/*
width:0px;
height:0px;
*/
}


/*หัวของโมดูล*/
.mod_h
{
	background-image:url(edit/mod_top.png);
	background-position:top;
	background-repeat:no-repeat;
	width:170px;
	height:40px;
	margin:0px 0px -35px;
	/*border-left: thin solid #0070FF; 
	border-right: thin solid #0070FF;*/
	
}

/*พื้นหลังของโมดูล*/
.mod_bg
{
	/*background-color:#00C9F5;*/
	text-align:center;
	width:168px;
	border-left: thin solid #0070FF; 
	border-right: thin solid #0070FF; 
	/*height:30px;*/
}

.mod_b
{
	background-image:url(edit/mod_bottom.png);
	background-repeat:no-repeat;
	background-position:top;
	width:170px;
	height:40px;
}
/*โมดูลซ้าย*/
.mod_l
{
	background-color:#00C9F5;
    /*position:absolute;*/
	margin:0px 3px 0px -12px;
	width:170px;
	line-height: 200%;
	font-size:14px;
	font-weight:bold;

	/*border: thin solid #3FA9F5;*/
}
.mod_l div div
{
	background-color:#5CD6FF;
	padding: 3px 0px 3px;
	line-height: 150%;
	font-weight:normal;

}

/*โมดูลขวา*/
.mod_r_bg
{
	/*position:absolute;*/
	background:#3FA9F5 url(edit/mod_r_bg.png) left repeat-y;
	width:200px;
	padding:5px 0px 0px 5px;
	
}
.mod_r
{
	/*position:absolute;*/
	text-align:center;
	vertical-align:top;
	font-weight:bold;
	line-height: 200%;
	font-size:14px;
}
.mod_r div
{
	/*position:absolute;*/
	text-align:center;
	font-weight:normal;
	line-height: 150%;
}


/*เส้นคั่นแนวตั้ง*/
.line_body
{
	background-image:url(edit/line.png);
	background-color:#3FA9F5;
	background-position:center;
	background-repeat:repeat-y;
	width:2px;

}
.line_h
{
	background-image:url(edit/line_h.png);
	background-position:top;
	background-repeat:no-repeat;
	width:2px;
	height:5px;
	top:0px;
}
.line_b
{
	background-image:url(edit/line_b.png);
	background-position:bottom;
	background-repeat:no-repeat;
	width:2px;
	height:5px;
	bottom:0px;
}
#bottom_thank {
	position:absolute;
	text-align:right;
	font-size:12px;
	width:100%;
	height:12px;
	left:0px;
	z-index:3;
	background-color:#E6F4FE;
}






/* สร้างแท็บตามอินเด็ก */
div.example {border: #603 dotted; padding: 0.6em; margin: 1em 2em}

/* First example */
div.items p:not(:target) {display: none}
div.items p:target {display: block}
p.menu {margin: 0; padding: 0.4em; background: silver; color: black}
p.menu a {color: black; border: thin outset silver; padding: 0.1em 0.3em}
div.items p {height: 6em; overflow: auto; text-align: center; margin: 0}
#item1 {color: red}
#item2 {color: green}
#item3 {color: blue}

/* Tabbed example */
div.tabs {
  min-height: 7em;		/* No height: can grow if :target doesn't work */
  position: relative;		/* Establish a containing block */
  line-height: 1;		/* Easier to calculate with */
  z-index: 0}			/* So that we can put other things behind */
div.tabs > div {
  display: inline}		/* We want the buttons all on one line */
div.tabs > div > a {
  color: black;			/* Looks more like a button than a link */
  background: #CCC;		/* Active tabs are light gray */
  padding: 0.2em;		/* Some breathing space */
  border: 0.1em outset #BBB;	/* Make it look like a button */
  border-bottom: 0.1em solid #CCC} /* Visually connect tab and tab body */
div.tabs > div:not(:target) > a {
  border-bottom: none;		/* Make the bottom border disappear */
  background: #999}		/* Inactive tabs are dark gray */
div.tabs > div:target > a,	/* Apply to the targeted item or... */
:target #default2 > a {		/* ... to the default item */
  border-bottom: 0.1em solid #CCC; /* Visually connect tab and tab body */
  background: #CCC}		/* Active tab is light gray */
div.tabs > div > div {
  background: #CCC;		/* Light gray */
  z-index: -2;			/* Behind, because the borders overlap */
  left: 0; top: 1.3em;		/* The top needs some calculation... */
  bottom: 0; right: 0;		/* Other sides flush with containing block */
  overflow: auto;		/* Scroll bar if needed */
  padding: 0.3em;		/* Looks better */
  border: 0.1em outset #BBB}	/* 3D look */
div.tabs > div:not(:target) > div { /* Protect CSS1 & CSS2 browsers */
  position: absolute }		/* All these DIVs overlap */
div.tabs > div:target > div, :target #default2 > div {
  position: absolute;		/* All these DIVs overlap */
  z-index: -1}			/* Raise it above the others  */