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

body { font-family:tahoma; font-size:13px; color:#FFFFFF;  }
a { text-decoration:none; color:#FFFFFF; }
a:hover img { opacity: 0.8; filter: alpha(opacity=1);  }
a:hover { text-decoration:none; color:#000; }
h1, h2 {font-size:14px; color:#ffcc00; display:inline;  }
h3 {font-size:13px; font-weight:normal; }
<!--ul, li { list-style:none; }-->
.left { float:left; }
.right { float:right; }
.clear { clear:both; }



/*slidebox3*/
.button_sliding_bg3 {
    color: #FFF;
    background: #000000;
    padding: 1px 0px 40px 1px;
    margin: 0px;
    text-transform: inherit;
    border-radius: 0px;
    text-align: center;
    cursor: pointer;
    box-shadow: inset 0 0 0 0 #c3d006;
    -webkit-transition: all ease 0.5s;
    -moz-transition: all ease 0.5s;
    transition: all ease 0.5  s;
}
.button_sliding_bg3:hover {
    box-shadow: inset 0 400px 0 0 #c3d006;
	color:#000;
	
}

/*slidebox4*/
.button_sliding_bg4 {
    color: #FFF;
    background: #000000;
    padding: 1px 0px 40px 1px;
    margin: 0px;
    text-transform: inherit;
    border-radius: 0px;
    text-align: center;
    cursor: pointer;
    box-shadow: inset 0 0 0 0 #0592a2;
    -webkit-transition: all ease 0.5s;
    -moz-transition: all ease 0.5s;
    transition: all ease 0.5  s;
}
.button_sliding_bg4:hover {
    box-shadow: inset 0 400px 0 0 #0592a2;
	color:#000;
	
}



/*slidebox5*/
.button_sliding_bg5 {
    color: #000;
    background: #000000;
    padding: 1px 0px 90px 1px;
    margin: 0px;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow: inset 0 0 0 0 #ac1e25;
    -webkit-transition: all ease 0.5s;
    -moz-transition: all ease 0.5s;
    transition: all ease 0.5s;
}
.button_sliding_bg5:hover {
    box-shadow: inset 1px 200px 0px 1px #ac1e25;
    color: #000;
	
}


/*container*/
#container {
width: 1000px;
margin: 0 auto;
background:#000000;

}
.left {
width: 50px;
float: left;
}
.right {
width: 50px;
float: right;
background-image:url(images/tab.jpg); background-repeat:repeat; 
}

/*end container*/


/*top header*/
#topheader{padding:20px 0px 0px 0px; display:inline; }
.head_halloween{background:url(images/head.jpg) center top #000000; margin:auto; width:1000px; height:262px; }


/*content*/
.content {width: 500px; height:100px;  margin:auto; background-color:#000; float: left; }
.content p {width: 600px; height:70px; font-size:14px; color:#FFFFFF;  line-height:20px; }


/*history*/
.history { width:501px;  float:left; padding: 0px 0px 0px 4px; } 
.history h3 { width:338px; background:url(images/history.png) top left no-repeat; padding:75px 0 10px 50px; }
.history ul { overflow:hidden; }
.history li { display:inline; float:left; width:145px; margin:11px; }
.history li a { display:block; height:154px; text-align:center; box-shadow: inset 0 0 0 0 #ffc018; -webkit-transition: all ease 0.5s; -moz-transition: all ease 0.5s; transition: all ease 0.5s; }
.history li a:hover { box-shadow: inset 0 200px 0 0 #ffc018; }
.history li a img { border:2px solid #ffc018; margin-bottom:4px; width:141px; height:95px; }

/*story*/
.story { width:473px; float:right; } 
.story h3 { width:363px; background:url(images/story.png) top left no-repeat; padding:75px 0 15px 50px; margin-left:20px; }
.story ul { overflow:hidden; }
.story li { display:inline; float:left; width:137px; margin:6px 10px; }
.story li a { display:block; height:150px; text-align:center; box-shadow: inset 0 0 0 0 #cb5c00; -webkit-transition: all ease 0.5s; -moz-transition: all ease 0.5s; transition: all ease 0.5s; }
.story li a:hover { box-shadow: inset 0 200px 0 0 #cb5c00; }
.story li a img { margin-bottom:4px; width:137px; height:94px; }


/*activity*/
/*.activity { width:500px;  float:left; } 
.activity h3 {width:450px; background:url(images/activity.png) top left no-repeat; padding:90px 0 10px 70px;}
.activity ul { overflow:hidden; }
.activity li { display:inline; float:left; width:200px; margin:6px 10px;  }
.activity li a { display:block; height:170px; text-align:center; box-shadow: inset 0 0 0 0 #c3d006; -webkit-transition: all ease 0.5s; -moz-transition: all ease 0.5s; transition: all ease 0.5s; }
.activity li a:hover { box-shadow: inset 0 200px 0 0 #c3d006; }
.activity li a img { margin-bottom:4px; width:200px; height: 124px; }*/

.activity { width:500px;  float:left; } 
.activity h3 {width:450px; background:url(images/activity.png) top left no-repeat; padding:90px 0 10px 70px;}
.activity ul { overflow:hidden; }
.activity li { display:inline; float:left; width:457px; margin:6px 10px;   }
.activity li a { display:block; height:180px; text-align:center; box-shadow: inset 0 0 0 0 #c3d006; -webkit-transition: all ease 0.5s; -moz-transition: all ease 0.5s; transition: all ease 0.5s; }
.activity li a:hover { box-shadow: inset 0 200px 0 0 #c3d006; }
.activity li a img { margin-bottom:7px; width:453px; height:147px;  border:2px solid #c3d006}




/*makeup*/
.makeup { width:490px; float: left;  padding: 10px 0px 0px 0px;} 
.makeup h3 { width:400; background:url(images/makeup.png) top left no-repeat; padding:90px 0 10px 80px; margin-left:20px; }
.makeup ul { overflow:hidden; }
.makeup li { display:inline; float:left; width:137px; margin:6px 10px; }
.makeup li a { display:block; height:150px; text-align:center; box-shadow: inset 0 0 0 0 #0592a2; -webkit-transition: all ease 0.5s; -moz-transition: all ease 0.5s; transition: all ease 0.5s; }
.makeup li a:hover { box-shadow: inset 0 200px 0 0 #0592a2; }
.makeup li a img { margin-bottom:4px; width:137px; height:94px; }



/*game*/
.game { width:480px; float: left ; padding:20px 0px 0px 0px;} 
.game h3 { width:400; background:url(images/game.png) top left no-repeat; padding:70px 0 12px 80px; margin-left:20px; }
.game ul { overflow:hidden; }
.game li { display:inline; float:left; width:141px; margin:6px 9px; }
.game li a { display:block; height:168px; text-align:center; box-shadow: inset 0 0 0 0 #ac1e25; -webkit-transition: all ease 0.5s; -moz-transition: all ease 0.5s; transition: all ease 0.5s; }
.game li a:hover { box-shadow: inset 0 200px 0 0 #ac1e25;}
.game li a img { margin-bottom:4px; width:137px; height:94px; }


/*glitter*/
.glitter { width:480px; float:right; } 
.glitter  h3 { width:400; background:url(images/glitter.png) top left no-repeat; padding:80px 0 12px 80px; margin-left:20px; }
.glitter  ul { overflow:hidden; }
.glitter  li { display:inline; float:left; width:141px; margin:6px 9px; }
.glitter  li a { display:block; height:150px; text-align:center; }
.glitter li a:hover { opacity: 0.8; filter: alpha(opacity=1);  }
.glitter li a img { margin-bottom:4px; width:137px; height:94px; }


/*glitter*/
.glitter2 { width:980px; float:right; } 
.glitter2  h3 { width:400; background:url(images/glitter.png) top left no-repeat; padding:80px 0 12px 80px; margin-left:20px; }
.glitter2  ul { overflow:hidden; }
.glitter2  li { display:inline; float:left; width:141px; margin:6px 9px; }
.glitter2  li a { display:block; height:150px; text-align:center; }
.glitter2 li a:hover { opacity: 0.8; filter: alpha(opacity=1);  }
.glitter2 li a img { margin-bottom:4px; width:137px; height:94px; }



/*movie*/
.movie { width:500px; float: right; padding: 10px 0px 0px 10px; height:350px } 
.movie h3 { width:400px; background:url(images/movie.png) top left no-repeat; padding:85px 0 12px 70px; margin-left:20px; }
.movie ul { overflow:hidden; }
.movie li { display:inline; float:left; width:125px;  margin:9px 13px; padding:0px 0px 0px 15px; }
.movie li a { display:block; height:260px; text-align:center; box-shadow: inset 0 0 0 0 #ce5d01; -webkit-transition: all ease 0.5s; -moz-transition: all ease 0.5s; transition: all ease 0.5s; }
.movie li a:hover { box-shadow: inset 0 235px 0 0 #ce5d01; }
.movie li a img { margin-bottom:4px; width:125px; height:171px;  }



/*?Share Photo*/

.share2 { width:485px; padding:0px 0px 0px 5px; float: right;} 
.share2 h3 { width:400; background:url(images/share.png) top left no-repeat; padding:90px 0 12px 70px; margin-left:20px; }
.share2 ul { overflow:hidden; }
.share2 li { display:inline; float:left; width:125px;  margin:14px 18px;  }
.share2 li a { display:block; height:135px; text-align:center; box-shadow: inset 0 0 0 0 #ce5d01; -webkit-transition: all ease 0.5s; -moz-transition: all ease 0.5s; transition: all ease 0.5s; }
.share2 li a:hover { opacity: 0.8; filter: alpha(opacity=1); }
.share2 li a img { margin-bottom:4px; width:135px; height:135px;  }

/*?Share Photo New Tab*/
.share3 {float: left;}
.share3 h3 { width:450; background:url(images/share_menu02.png) top left no-repeat; padding:100px 0 12px 130px; margin-left:20px; }
.share3 ul { overflow:hidden; padding:0px 0px 30px 10px; }
.share3 li { display:inline; float:left; width:125px;  margin:15px 18px;  }



.share_inside { width:980px; padding:0px 0px 0px 5px; float: right;} 
.share_inside h3 { width:400; background:url(images/share.png) top left no-repeat; padding:90px 0 12px 70px; margin-left:20px; }
.share_inside .wrap_share { text-align:center; width:800px; display:block;}

.share_inside .wrap_share  img { display:block; margin:0 auto; width:600px; height:600px;  }

/*Story Ghost*/

.story2 {width:480px; float:left; padding: 20px 0px 0px 0px;} 
.story2 h3 { width:400; background:url(images/story_ghost.png) top left no-repeat; padding:90px 0 10px 80px; margin-left:20px; }
.story2 ul { overflow:hidden; }
.story2 li { display:inline; float:left; width:137px; margin:6px 10px; }
.story2 li a { display:block; height:150px; text-align:center; box-shadow: inset 0 0 0 0 #c3d006; -webkit-transition: all ease 0.5s; -moz-transition: all ease 0.5s; transition: all ease 0.5s; }
.story2 li a:hover { box-shadow: inset 0 200px 0 0 #c3d006; }
.story2 li a img { margin-bottom:4px; width:137px; height:94px; }


/*picture festival*/
.festival {width:480px; float:right; padding: 20px 0px 0px 20px;} 
.festival h3 { width:400; background:url(images/festival.png) top left no-repeat; padding:80px 0 10px 60px; margin-left:20px; }
.festival ul { overflow:hidden; }
.festival li { display:inline; float:left; width:131px; margin:9px 11px; }
.festival li a { display:block; height:162px; text-align:center; box-shadow: inset 0 0 0 0 #eb4f32; -webkit-transition: all ease 0.5s; -moz-transition: all ease 0.5s; transition: all ease 0.5s; }
.festival li a:hover { box-shadow: inset 0 220px 0 0 #eb4f32; }
.festival li a img { margin-bottom:4px; width:131px; height:85px; }


/*clip*/
.clip { width:480px; padding:20px 0px 0px 0px; float:left;} 
.clip h3 { width:400; background:url(images/clip.png) top left no-repeat; padding:80px 0 10px 60px; margin-left:20px; }
.clip ul { overflow:hidden; }
.clip li { display:inline; float:left; width:131px; margin:9px 13px; }
.clip li a { display:block; height:155px; text-align:center; box-shadow: inset 0 0 0 0 #0592a2; -webkit-transition: all ease 0.5s; -moz-transition: all ease 0.5s; transition: all ease 0.5s; }
.clip li a:hover { box-shadow: inset 0 220px 0 0 #0592a2; }
.clip li a img { margin-bottom:4px; width:131px; height:85px; }


.wrap_share { width:320px; float:right; display:inline-block; margin:8px 40px 0 0}
.wrap_share span { font-family:Tahoma; font-size:20px; position:relative; margin:0 0 0px; color:#000; text-align:center; padding:4px 0; display:block; background:#FFF; }
.wrap_share a { text-align:center; font-weight:bold; font-size:15px; }
.wrap_share .fb-share { width:145px; display:inline; float:left; margin:0 3px; border:3px #3b5998 solid }
.wrap_share .fb-share a { display:block; padding:4px 0; background:#3b5998; color:#FFF; text-align:left;height:27px;}
.wrap_share .fb-share a img { float:left; display:inline-block; margin:0 5px 0 18px}
.wrap_share .fb-share a:before { content:"Share"; font-size:21px; font-weight:normal;  line-height:27px}
.wrap_share .tw-share { width:145px; display:inline; float:left; margin:0 3px; border:3px #00b6dd solid}
.wrap_share .tw-share a { display:block; padding:4px 0; background:#00b6dd; color:#FFF;   text-align:left;height:27px;}
.wrap_share .tw-share a img { float:left; display:inline-block; margin:0 5px 0 13px}
.wrap_share .tw-share a:before { content:"Retweet";  font-size:21px; font-weight:normal}
.wrap_share .fb-share a:hover:before { content:"แชร์ไปยังเฟซบุ๊ก";  font-size:15px; display:block; margin:0 auto; text-align:center; font-weight:bold;  height:30px;  line-height:25px}
.wrap_share .tw-share a:hover:before { content:"รีทวีตสู่ทวิตเตอร์"; font-size:15px; display:block; margin:0 auto ;  text-align:center; font-weight:bold;  height:30px; line-height:25px}
.wrap_share .fb-share a:hover img { display:none}
.wrap_share .tw-share a:hover img { display:none}