@charset "utf-8";
/* CSS Document */
/*
ul, li, img{
list-style:none;
margin:0;
padding:0;
}
*/
body{
background-image:url(../images/bg0.jpg);
background-repeat:repeat-x;
background-color:#000;
}
#HeaderBG{
background-image:url(../images/lbg.png);
background-repeat:repeat-x;
padding-bottom:10px;
padding-top:10px;
}
#tBG{
background-image:url(../images/tbg.png);
background-repeat:no-repeat;
height:34px;
width:980px;
}
#wrapper{
position:relative;
width:980px;
height: auto;
margin:0px;
padding-left:0px;
padding-right:0px;
padding-bottom:15px;
background-image:url(../images/mbg.png);
background-repeat:repeat-y;
}
/*.....เริ่มต้นแบนเนอร์........*/

#s3slider { 

   width: 940px; /* important to be same as image width */ 
   height: 300px; /* important to be same as image height */
   position: relative; /* important */
   overflow: hidden; /* important */
   /*background-image:url(../images/bnBG.png);
   background-repeat:repeat-x;  */
}

#s3sliderContent {
   width: 940px; /* important to be same as image width or wider */
   position: relative; /* important */
   top: 0; /* important */
   margin-left: -40px; /* important */
   text-align:left;
}

.s3sliderImage {
   margin:0;
   float: left; /* important */
   position: relative; /* important */
   display: none; /* important */
   left:0px;
}

.s3sliderImage span {
   position: absolute; /* important */
   left:0px;
   float:left;
   font: 14px/15px Arial, Helvetica, sans-serif;
   padding-left:20px;
   padding-right:20px;
   padding-bottom:10px;
   padding-top:10px;
   width: 938px;
   height:100px;
   background-color: #000;
   filter: alpha(opacity=50); /* here you can set the opacity of box with text */
   -moz-opacity: 0.5; /* here you can set the opacity of box with text */
   -khtml-opacity: 0.5; /* here you can set the opacity of box with text */
   opacity: 0.7; /* here you can set the opacity of box with text */
   color: #fff;
   display: none; /* important */
   bottom: 0;

   /*
       if you put
       top: 0; -> the box with text will be shown at the top of the image 
       if you put
       bottom: 0; -> the box with text will be shown at the bottom of the image
   */
}

.clear {
   clear: both;
} + show all of the code

/*.....จบแบนเนอร์........*/

/*.....เริ่มต้นเมนูหลัก........*/

#mainmenu{
/*position:relative;*/
margin:0;
margin-left:50px;
padding-bottom:5px;
border-bottom:1px solid #FFFFFF;
}
#leftmenu{
/*position:relative;*/
width: auto;
margin:0;
}

.kwicks {
	/* recommended styles for kwicks ul container */
	list-style: none;
	position: relative;
	margin: 0;
	margin-left:10px;
	padding: 0;
	font-size:14px;
}
.kwicks li{
	/* these are required, but the values are up to you (must be pixel) */
	width: 125px;
	height: 100px;

	/*do not change these */
	display: block;
	overflow: hidden;
	padding: 0;  /* if you need padding, do so with an inner div (or implement your own box-model hack) */
}
.kwicks.horizontal li {
	/* This is optional and will be disregarded by the script.  However, it should be provided for non-JS enabled browsers. */
	position:relative;
	margin-right: 0px; /*Set to same as spacing option. */	
	/*margin-left:20px;*/
	left:80px;
	margin-top:5px;
	float: left;
}
.kwicks.horizontal p, .kwicks.horizontal a {
position:relative;
padding-top:0px;
color:#0066FF;
text-decoration:none;
}
.kwicks.horizontal a:hover {
color: #900;
}

.kwicks.vertical  li{
	/* This is optional and will be disregarded by the script.  However, it should be provided for non-JS enabled browsers. */
	margin-bottom: 2px; /*Set to same as spacing option. */	
	/*left:10px;*/
	height:110px;
}
.kwicks.vertical p, .kwicks.vertical a {
padding-top:0px;
color:#0066FF;
text-decoration:none;
}

#kwick_1 { 
	background-image:url(../images/mnbg.png);
	background-repeat:repeat-x;
	position:relative;
}
#kwick_1:hover { 
	background-image:url(../images/mnbgHover.png);
	background-repeat:repeat-x;
	position:relative;
	color:#900;
}
#kwick_2 {
	background-image:url(../images/mnbg.png);
	background-repeat:repeat-x;
	position:relative;
}
#kwick_2:hover { 
	background-image:url(../images/mnbgHover.png);
	background-repeat:repeat-x;
	position:relative;
	color:#900;
}
#kwick_3 {
	background-image:url(../images/mnbg.png);
	background-repeat:repeat-x;
	position:relative;
}
#kwick_3:hover { 
	background-image:url(../images/mnbgHover.png);
	background-repeat:repeat-x;
	position:relative;
	color:#900;
}
#kwick_4 { 
	background-image:url(../images/mnbg.png);
	background-repeat:repeat-x;
	position:relative;
	border-right:1px solid #FFFFFF;
}
#kwick_4:hover { 
	background-image:url(../images/mnbgHover.png);
	background-repeat:repeat-x;
	position:relative;
	color:#900;
	border-right:1px solid #FFFFFF;
}
.kwicks.horizontal #kwick_4 {
	margin-right: none; /* cancel margin on last kiwck (if you set a margin above) */
}
.kwicks.vertical #kwick_9{
	margin-bottom: none; /* cancel margin on last kiwck (if you set a margin above) */
}
#kwick_5 { 
	background-color:none;
	position:relative;
	border-top:1px solid #CCCCCC;
	width:107px;
	height:125px;
	text-align:center;
	/*border-left:1px solid #FFFFFF;
	border-right:1px solid #FFFFFF;*/
}
#kwick_6 { 
	background-color:none;
	position:relative;
	border-top:1px solid #CCCCCC;
	width:107px;
	height:130px;
	text-align:center;
	/*border-left:1px solid #FFFFFF;
	border-right:1px solid #FFFFFF;	*/
}
#kwick_7 { 
	background-color:none ;
	position:relative;
	border-top:1px solid #CCCCCC;
	width:107px;
	height:130px;
	text-align:center;
	/*border-left:1px solid #FFFFFF;
	border-right:1px solid #FFFFFF;*/
}
#kwick_8 { 
	background-color:none;
	position:relative;
	border-top:1px solid #CCCCCC;
	width:107px;
	height:130px;
	text-align:center;
	/*border-bottom:1px solid #FFFFFF;
	border-left:1px solid #FFFFFF;
	border-right:1px solid #FFFFFF;*/
}
#kwick_9 { 
	background-color:none;
	position:relative;
	border-top:1px solid #CCCCCC;
	border-bottom:1px solid #CCCCCC;
	width:107px;
	height:135px;
	text-align:center;
	/*border-left:1px solid #FFFFFF;
	border-right:1px solid #FFFFFF;*/
}

/*.....จบเมนูหลัก........*/

img{
border:none;
}

.container
{
	/*position:relative;
	margin-top:-480px;
	margin-right:25px;
	float:right;*/
	width:95%;
	height:auto;
	/*padding: 10px 10px;*/
	border: 10px solid #fff;
	color: #fff;
	font-size: .75em;
	/*line-height: 2em;*/
}

.container h2
{
	padding: 2px 10px 2px 10px;
	width: auto;
	font-family: Tahoma, Geneva, sans-serif;
	font-size:12pt;
	float:left;
}

#home		{
			width:95%;
			/*background-image: url(../images/dt_bg.png);
			background-repeat:repeat-x;
			/*background-color:#fafcfa;*/
}
#home h2	{
	background-image:url(../images/hBG.png); 
	background-repeat:repeat-x; 
	color: #900;
	border:1px solid #CCC;
	}

#footer {
background-image: url(../images/fbg.png);
background-repeat:no-repeat;
height:34px;
width:980px;
}

.lang{
position:relative;
list-style:none;
float:right;
margin-right:30px;
margin-top:15px;
padding-left:10px;
padding-right:10px;
}  
.lang li{
list-style:none;
float:right;
margin-right:20px;
border:1px solid #FFFFFF;
} 
.lang a{
font-family:AngsanaUPC;
font-size:16px;
color:#990000;
text-decoration:none;
}
.lang a:hover{
font-family:AngsanaUPC;
font-size:16px;
color: #006600;
/*margin-right:30px;*/
text-decoration:none;
}

#text1{
position:relative;
float:left;
margin-left:0px;
width:545px;
height: auto;
padding-top:10px;
padding-bottom:10px;
margin-bottom:10px;
border:5px solid #FFFFFF;
}
#text1 h2	{
	background-image:url(../images/hBG.png); 
	background-repeat:repeat-x; 
	color: #900;
	border:1px solid #CCC;
	padding-top:10px;
	padding-bottom:10px;
	font-family:Tahoma, Geneva, sans-serif;
	font-size:14px;
	text-align:center;
	width:auto;
	}
	
	#text1 h4{
	float:left;
	color:#03F;
	font-size:12px;
}
#text1 h5{
	float:left;
	color:#03F;
}
#text1 p{
position:relative;
color: #06F;;
text-indent: 15px;
font-size:12px;
text-align:left;
}
#text2{
position:relative;
margin-right:0px;
margin-bottom:3px;
/*float:right;*/
width:240px;
height: auto;
background-image:url(../images/dt_bg.png);
background-repeat: repeat-x;
border:5px solid #FFFFFF;

}
#text2 h5{
position:relative;
margin-top:0px;
padding:2px;
color:#990000;
width: 200px;
font-family:Tahoma, Geneva, sans-serif;
font-size:12px;
font-weight:bold;
text-align:center;
background-image:url(../images/hBG.png);
background-color: #FFFFFF;
border:1px solid #CCC;
border-top:none;
}
#text2 h6{
position:relative;
font-family: Tahoma, Geneva, sans-serif;
color: #03F;
font-size:12px;
background-color:#CCC;
padding:4px;
border:1px inset #333;
width:230px;
text-align:center;
}
#text2 b{
position:relative;
font-family:Tahoma;
color: #03F;
font-size:12px;
padding:4px;
}

#text2 p{
position:relative;
margin-top:0px;
font-size:12px;
font-family:Tahoma, Geneva, sans-serif;
text-align:left;
table-layout:auto;
color: #000;
font-weight:bold;
padding:5px;

}
#text3{
	position:relative;
	margin-top:5px;
	font-size:14px;
	text-align:left;
	color: #06F;
	border:1px solid #CCC;
	padding-left:10px;
}
#text3 img{
	padding-top:10px;
	width:100px;
	height:200px;
	border:1px solid #999;
	margin-right:2px;
	text-align:center;
}
#text3 p{
	margin-top:60px;
	text-indent:20px;
}
#text_cd{
	position:relative;
	margin-top:70px;
	font-size:12px;
	text-align:left;
	color: #06F;
	border-bottom:1px solid #999;
}

#vinyl img{
	padding-top:10px;
	width:100px;
	height:200px;
	border:1px solid #999;
	margin-right:2px;
	text-align: left;
}
#text_cd p{
	position:relative;
	/*margin-top:80px;*/
	font-size:12px;
	text-align:left;
	color: #06F;
}
#text_cd b{
	color:#900;
}
#text_cd h2{
	position:relative;
	margin-top:-32px;
	margin-bottom:2px;
	font-size:14px;
}

.promotion{
/*margin-left:-270px;*/
margin-bottom:5px;
margin-left:0px;
margin-right:10px;
position:relative;
width:255px;
height:auto;
float: left;
color: #000000;
background-image:url(../images/leafletBG.png);
background-position:bottom;
background-repeat:no-repeat;
background-color: #e8e7e7;
text-align: left;
padding-left:5px;
border:1px solid #666;
}

.promotion b{
position:relative;
color:#990000;
font-size:14px;
}
.promotion p{
position:relative;
margin-top:10px;
font-family:Tahoma, Geneva, sans-serif;
font-size:12px;
color: #060;
}

.promotion h2{
	/*padding: 5px 5px;
	width: auto;*/
	padding-bottom:2px;
	position:relative;
	font-family:Tahoma, Geneva, sans-serif;
	font-size:14px;
	/*float:left;
	text-align: center;*/
}
.promotion h3{
	position:relative;
	font-family: Tahoma, Geneva, sans-serif;
	color: #03F;
	font-size:12px;
	background-color:#CCC;
	padding:4px;
	padding-top:0px;
	border:1px inset #333;
	text-align:center;
	width:95%;
}
.promotion hr{
	width:98%;
}

.pro1{
/*margin-left:-270px;*/
margin-bottom:5px;
margin-left:0px;
margin-right:10px;
position:relative;
width:386px;
height:225px;
float: left;
color: #000000;
/*background-image:url(../images/leafletBG1.png);
background-position:bottom;*/
background-repeat:no-repeat;
background-color: #FFC;
text-align: left;
padding-left:5px;
border:1px solid #666;
}

.pro1 b{
position:relative;
color:#990000;
font-size:14px;
}
.p1{
position:relative;
margin-top:30px;
font-family:Tahoma, Geneva, sans-serif;
font-size:12px;
width:50%;
/*padding-right:5px;*/
color:#06F;
}

.pro1 h2{
	padding: 5px 5px;
	width: auto;
	font-family:Tahoma, Geneva, sans-serif;
	font-size:14pt;
	float:left;
	text-align: center;
}
.pro1 h3{
	position:relative;
	font-family: Tahoma, Geneva, sans-serif;
	color: #03F;
	font-size:14px;
	background-color:#CCC;
	padding:4px;
	border:1px inset #333;
	text-align:left;
	width:96%;
}
.pro1 hr{
	width:98%;
}
.pro1 h5{
	font-size:14px;
}

.p2{
	position:relative;
	left:210px;
	top:-90px;
	font-family:Tahoma, Geneva, sans-serif;
	font-size:12px;
	padding-left:10px;
	border-left:1px solid #06F;
}

.contact{
	padding-top:10px;
	padding-left:10px;
	font-weight:bold;
	text-align:left;
	font-size:14px;
	color:#900;
}

/*showcase*/
.showcase {
	/*margin: 20px auto;*/
	margin-top:10px;
	padding: 0;
	width: 700px;
	font: 75%/120% Arial, Helvetica, sans-serif;
	float:left;
}

.thumbs img {
	float:left;
	margin-left:2px;
	margin-bottom:2px;
	margin-top:auto;
	border: solid 1px #ccc;
	width: 100px;
	height: 100px;
	padding: 4px;
}
.thumbs img:hover {
	border-color: #FF9900;
}
.thumbs b{
	position:relative;
	float:left;
	margin-left:2px;
	margin-top:5px;
	margin-bottom:5px;
	font-family:Tahoma, Geneva, sans-serif;
	font-size:12px;
	font-weight:bold;
	color:#06F;
	border-bottom:1px solid #900;
}

/*samples*/
.sample {
	/*margin: 20px auto;*/
	margin-top:10px;
	padding: 0;
	width: 790px;
	font: 75%/120% Arial, Helvetica, sans-serif;
	float:left;
}
.sampletxt {
	position: relative;
	margin-left:10px;
	margin-bottom:10px;
	border:1px solid #FFF;
	padding: 10px;;
	width: 360px;
	float:left;
}

.sampletxt h4 {
		font: Tahoma, Geneva, sans-serif;
		text-align:center;
		font-size:14px;
		color:#333;
}

/*samples1*/

.sampletxt1 {
	position: relative;
	margin-left:5px;
	margin-bottom:5px;
	border:1px solid #666;
	padding: 5px;;
	width: 250px;
	float:left;
}

.sampletxt1 h4 {
		font: Tahoma, Geneva, sans-serif;
		text-align:center;
		font-size:12px;
		color:#333;
}

.payment {
	/*margin: 20px auto;*/
	margin-top:10px;
	padding-left:20px;
	width: 790px;
	font: 85% Arial, Helvetica, sans-serif;
	color: #06F;
	float:left;
}

.thumbs0 img {
	float:left;
	margin-left:30px;
	margin-bottom:10px;
	margin-top:auto;
	border: solid 1px #ccc;
	width: 300px;
	height: 200px;
	padding: 4px;
}
.thumbs0 img:hover {
	border-color: #FF9900;
}
.thumbs0 b{
	position:relative;
	float:left;
	margin-left:2px;
	margin-top:5px;
	margin-bottom:5px;
	font-family:Tahoma, Geneva, sans-serif;
	font-size:12px;
	font-weight:bold;
	color:#06F;
	border-bottom:1px solid #900;
}

/*pics*/

.thumbs1 img {
	float:left;
	margin-left:10px;
	margin-bottom:5px;
	margin-top:auto;
	border: solid 1px #ccc;
	width: 220px;
	height: 150px;
	padding: 4px;
}
.thumbs1 img:hover {
	border-color: #FF9900;
}
.thumbs1 b{
	position:relative;
	float:left;
	margin-left:2px;
	margin-top:5px;
	margin-bottom:5px;
	font-family:Tahoma, Geneva, sans-serif;
	font-size:12px;
	font-weight:bold;
	color:#06F;
	border-bottom:1px solid #900;
}

.form{
	position:relative;
	margin-top:60px;
	color:#06F;
	font-size:12px;
	text-align:left;
	width:700px;
	height:auto;
}
.form input{
	position:relative;
	width:300px;
	margin-bottom:2px;
	float:left;
}
.form textarea{
	position:relative;
	width:300px;
	float:left;
}


UL.tabNavigation {
list-style: none;
margin: 0;
padding: 0;
font-size:14px;
}

UL.tabNavigation LI {
display: inline;
margin-left:2px;
}

UL.tabNavigation LI A {
padding: 3px 5px;
background-color: #ccc;
color: #900;
text-decoration: none;
background-image:url(../images/hBG.png);
}

UL.tabNavigation LI A.selected,
UL.tabNavigation LI A:hover {
background-color: #333;
color: #00F;
padding-top: 7px;
background-image:url(../images/hBGhv.png);
}

UL.tabNavigation LI A:focus {
outline: 0;
}

div.tabs > div {
padding: 5px;
margin-top: 3px;
border: 5px solid #CCC;
color:#06F;
font-size:14px;
}

div.tabs > div h2 {
margin-top: 0;
}

div.tabs > div img {
	margin-top:35px;
	width:250px;
	height:250px;
	padding:10px;
	border:1px solid #999;
	margin-right:5px;
	margin-left: auto;
}
div.tabs > div p {
	position:relative;
	margin-top: auto;
	text-indent:10px;
	text-align:left;
}
div.tabs > div h5 {
	color:#900;
}




.waste {
min-height: 100px;
}

.pro_vinyl{
border:1px solid #F00; 
padding:10px 10px 10px 10px; 
color:#F00; text-align:left; 
font-size:18px;
}
.pro_vinyl1{
position:relative;
width:85%; 
padding:10px 10px 10px 10px; 
color:#F00; text-align:left; 
font-size:20px;
}