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

* { margin: 0; padding: 0; }
body { font-family: tahoma; font-size:14px; color: #000; background: url(../di/bg_read.png) repeat-x #f9f6f1; }
.body-index { background:url(../di/bg_index.png) repeat-x #f9f6f1; }
input, textarea { font-family: tahoma; font-size: 14px; color: #80654a; resize: none; }
input { vertical-align: middle;}
textarea { vertical-align: top;}
select { font-family: tahoma; color: #323232; font-size: 13px; }
img { border: none;}
ul, li { list-style: none; }
input:focus, textarea:focus, a, input { outline: none; }
/* Note: Make HTML 5 elements block-level for consistent styling */
header, nav, article, footer, address, section { display:block; }
/*layout*/
table,td { border-collapse: collapse;}
.wrapper { position: relative; width: 960px; margin: 0 auto;}
.header { position: relative; height: 271px; width:1136px; margin: 0; background: url(../di/bg-head.png) 0 0 no-repeat; }
.h-index { height: 337px; margin-bottom: 0; overflow: hidden; background-position: 0 0;}
.h-index p { position: absolute; text-indent: -9999px; }
.header iframe { position: absolute; background: #fff; bottom:5px; right: 0; }
.header h1 { text-indent: -9999px; }
.eventlogo a { position: absolute; top: 20px; left: 285px; display: block; width: 640px; height: 235px; }
.slogo { position: absolute; left: 16px; top: 16px; width: 116px; }
.slogo a { display: block; height: 95px; }
.contents { overflow: hidden; margin: 0 0 30px; }
.contents nav { overflow: hidden; margin: 0 0 7px; }
nav h2 { position: absolute; text-indent: -9999px; }
nav li { float: left; margin: 0 0 0 0;}
nav a { display: block; height: 55px; text-indent: -9999px; background: url(../di/bg-obj.png) no-repeat; }
.nav1 { width: 478px; }
.nav2 { width: 478px; margin-right: 0 !important; }
.nav2 a { background-position: -482px 0; }
.nav1 a:hover,.nav1 .current { background-position: 0 -55px; }
.nav2 a:hover,.nav2 .current { background-position: -482px -55px; }
.contents aside { }
aside h3 { height: 65px; margin: 0 0 8px; text-indent: -9999px;background: url(../di/bg-obj2.png) no-repeat; }
aside ol { width: 960px; overflow: hidden; margin: 0 auto 15px; }
aside li { width: 534px; height: 35px; display: block; float: left; text-indent: -9999px; background: url(../di/bg-obj2.png) -17px -116px no-repeat; }
aside li+li { width: 390px; background-position: -554px -74px; }
.step1 { background-position: -17px -116px; }
.step2 { background-position: -554px -74px;}
.event-diy-layout { overflow: hidden; padding: 0 0 20px 15px; background: url(../di/bg-frame.png); }
.songkran-diy { float: left; width: 460px; }
.songkran-diy h2 { text-indent: -9999px; }
.fm-step1 { position: relative;  overflow: hidden; }
.fm-step1 ul { }
.fm-step1 li { float: left; display: block; width: 120px; height: 125px; font-size: 20px; margin: 0 13px 15px; }
.fm-step1 li img { display: block; margin: 0 0 5px 0;}
.fm-step1 li label { display: block;  font-size: 14px; font-weight: 700; }
.fm-step1 li input { float: left; margin: 4px 5px 0 30px; #margin-top: 4px;}
.btn-nextstep { display: block; width: 194px; height: 37px; margin: 0 auto; text-indent: -9999px; background: url(../di/btn.png) 0 -88px no-repeat; }
.btn-nextstep:hover { background-position: 0 -125px; }
.btn-diy-new .btn-nextstep { width: 293px; background-position: 0 -255px; }
.btn-diy-new .btn-nextstep:hover { background-position:  -293px -255px; }
.btn-edit { display: block; width: 129px; height: 32px; text-indent: -9999px; background: url(../di/bg-obj.png) 0 -298px no-repeat; }
.btn-edit:hover { background-position: -129px -298px; }
.diy1 { margin: -5px 0 0 -3px;}
.diy1 .btn-nextstep { margin: 0 auto; }
.diy2 { width: 483px; }
.diy2 { height: auto; }
.diy-step2 { width: 488px; padding-top: 8px; margin-top: -7px; overflow: hidden; background: url(../di/bg-obj.png) no-repeat -1067px -7px; }
.card-layout { position: relative; width: 320px; height: 320px; overflow: hidden; } 
.diy-step2 .card-layout { width: 450px; height: 300px; margin: 0 0 0 8px; }
.diy-step2 .note { width: 326px; height: 61px; margin: 0 0 15px 0; text-indent: -9999px; background: url(../di/bg-obj.png) no-repeat -492px -280px; }
.btn-select1, .btn-select2 { float: left; width: 223px; height: 44px; display:block; text-indent: -9999px; background-image: url(../di/btn.png); }
.btn-select1:hover { background-position: 0 -44px;}
.btn-select2 { background-position: -223px 0; }
.btn-select2:hover { background-position: -223px -44px; }
.diy2 .btn-edit { float: left; margin: 0 5px 0 20px; }
.diy2 .btn-nextstep { float: left; margin: 0 5px;}
.diy3 .btn-edit { float: left; margin: 35px 5px 20px 80px;}
.diy3 .btn-nextstep { float: left; margin: 35px 5px 0;}
.diy4 .btn-edit { float: left; margin: 25px 5px 30px 100px;}
.diy4 .btn-sendcard { float: left; margin: 25px 0 30px;}
.diy2 .btn-select1 { margin: 0 14px 0 3px; }
.diy2 .btn-select2 { }
.songkran-diy-flow { overflow:hidden; background: url(../di/repeat-y.png) repeat-y;}
.mycard { margin: 0 0 15px 0; padding: 0 0 35px; overflow:hidden;  background:#f2e9e9; }
.mycard-tube { margin: 0 0 30px; background: url(../di/line-s.png) bottom repeat-x;}
.contents-flow { background: url(../di/bg-obj.png) no-repeat -2484px 100%; }
.contents-flow2 { background: url(../di/repeat-y.png) repeat-y -2000px 0; }
.btn-sendemail { display: block; width: 205px; height: 40px; text-indent: -9999px; background: url(../di/btn.png) -221px -44px no-repeat; }
.btn-sendemail:hover { background-position: -426px -44px; }
.btn-sendto { display: block; width: 531px; margin: 0 auto; overflow: hidden; }
.btn-sendto a,.mycard .btn-sendcard { display: block; float: left; width:262px; height: 44px; text-indent: -9999px; background: url(../di/btn.png) 0 -211px no-repeat;}
.btn-sendcard { display: block; float: left; text-indent: -9999px; background: url(../di/btn.png) -268px -211px no-repeat !important; }
.mycard .btn-sendcard { float: none; margin: 5px auto 0;}
.btn-sendcard:hover { background-position: -804px -211px !important; }
.btn-postonwall { margin: 0 5px 0 0; background-position: 0 -188px; }
.btn-postonwall:hover { background-position: -536px -211px !important; }
.diy-step4 .btn-sendemail { position: absolute; top: 386px; right: 29px; }
.btn-post { display: block; width: 96px; height: 32px; text-indent: -9999px; background: url(../di/btn.png) no-repeat -732px 0; }
.btn-post:hover { background-position: -828px 0;}
.diy-step4 .btn-post { position: absolute; left: 210px; top: -2px;}
.mycard table { width: 100%; text-align: center; background: url(../di/repeat-y.png) repeat-y; }
.mycard table th { height: 105px; padding: 0 0 15px 0 !important; font-size: 25px; font-weight: 100; color: #389797; }
.mycard td,.mycard th { background: url(../di/line-s.png) repeat-x;}
.mycard td { padding: 22px 0 28px 0; vertical-align: top; }
.mycard .col1 { width: 195px; padding-top: 25px; }
.mycard .col2 { width: 455px; }
.mycard td span { display: block; width: 372px; height: 245px; padding: 10px 0 0 0; margin: 0 auto; background: url(../di/bg-obj.png) no-repeat -1583px -5px; }
.pagination { width: 142px; margin: 0 auto; text-align: center; font-size: 18px; overflow: hidden;}
.btn-sendagain,.btn-createcard { display: block; float: left; width: 165px; height: 32px; text-indent: -9999px; background: url(../di/bg-obj.png) no-repeat; }
.btn-sendagain { background-position: 0 -362px; }
.btn-createcard { background-position: 0 -394px; }
.btn-sendagain:hover { background-position: -165px -362px;}
.btn-createcard:hover { background-position: -165px -394px; }
.btn-newcard { display: block; width: 272px; height: 54px; margin: 0 auto; text-indent: -9999px; background: url(../di/btn.png) no-repeat 0 -84px;  }
.btn-newcard:hover { background-position: -272px -84px;}
.previewcard  {overflow: hidden;}
.previewcard-tube  { padding: 0;overflow: hidden;  }
.previewcard-tube1 { padding: 24px 0; background: url(../di/bg-frame.png); }
.previewcard-tube2 { padding: 20px 0; background: url(../di/bg-frame-s.png); }
.previewframe { width: 450px; height: 300px; margin: 0 auto 54px; padding: 11px;  background: url(../di/bg-obj.png) no-repeat -1064px -4px;}
.previewcard-tube2 .previewframe { margin-bottom: 0; }
.share-arti { position: absolute; top: 80px; right: 54px;}
.otheract { position: relative; width: 642px; height: 279px; margin: 40px auto 45px; overflow: hidden;}
.otheract h2 { position: absolute; text-indent: -9999px;}
.otheract section { float: left; margin-bottom: 5px; background: url(../di/bg-otheract.jpg) no-repeat; }
.otheract section h3 { position: absolute; text-indent: -9999px;}
.otheract .o-horo { width: 315px !important; height: 136px; margin-right: 3px; }
.otheract .o-horo-hover { background-position: 0 -295px;}
.speeddate { width: 315px; height: 136px; margin-right: 3px; background-position: -325px 0 !important; }
.speeddate:hover { background-position: -325px -295px !important;}
.shopping { width: 315px; height: 136px; margin-right: 3px; background-position: 0 -141px !important; }
.shopping:hover { background-position: 0 -436px !important;}
.smm { width: 315px; height: 136px; margin-right: 0; background-position: -325px -141px !important; }
.smm:hover { background-position: -325px -436px !important; }
.otheract section a { display: block; float: left; text-indent: -9999px; width: 100%; height: 100%;}
.obj-horo p { text-indent: -9999px;}
.link-createcard,.link-shfb { position: absolute; display: block; }
.link-createcard { top: 324px; left: 480px; }
.link-shfb {position: absolute; top: 9px; left: 196px; display: block; width: 132px; height: 48px;}
.nav-share { position: absolute; top: 230px; left: 633px; top:174px; width: 300px; z-index: 20;}
.nav-share ul { overflow: hidden; position: relative; padding:4px 0 0 57px;}
.nav-share ul li { display: block; float: left; width: 60px; height: 63px; margin: 0 0 0 6px; background: url(../di/btn.png) no-repeat; }
.nav-share strong { float: left; font-weight: 100; font-size: 20px; color: #000;}
.nav-share ul li a { display: block; float: left; width: 23px; height: 23px; text-indent: -9999px; }
.sh-gp { width: 31px !important; background: none !important;}
.sh-fb { background-position: -672px -56px !important;}
.sh-tw { background-position: -741px -56px !important;}
.sh-em { background-position: -816px -56px !important;}
.footer-sec { padding: 33px 0 0 0; background: url(../di/line-footer.png) repeat-x #f88c9f;}
.footer-fixed { width: 960px; margin: 0 auto;}
.diy-nextstep1 { display: block; padding: 30px 0 0 0; margin: 5px 0 0; background: url(../di/line.png) repeat-x; }
.diy-tab { overflow: hidden; width: 460px; margin: 0 0 30px;}
.diy-tab li { float: left;}
.diy-tab li a { display: block; float: left; width: 222px; height: 54px; text-indent: -9999px; background: url(../di/btn.png) no-repeat; }
.idtab-theme a { margin: 0 1px 0 0; background-position: -195px -143px !important; }
.idtab-item a { width: 236px !important; background-position: -418px -143px !important; }
.idtab-theme a:hover, .idtab-theme a.selected { background-position: -195px -88px !important; }
.idtab-item a:hover, .idtab-item a.selected { background-position: -418px -88px !important; }
.theme-page { float: right; margin-right: 20px;}
.theme-page a { display: block; float: left; width: 24px; height: 32px; margin: 0 5px 0 0; text-align: center; color: #000; font-size: 18px; background: url(../di/bg-obj.png) no-repeat -1px -125px; #background-position: -1px -122px; }
.theme-page a:hover, .theme-page a.selected { background-position: -42px -125px; #background-position: -42px -122px;}
.pagination a,.pagination span { display: block; float: left; width: 24px; height: 32px; margin: 0 5px 0 0; text-align: center; color: #000; font-size: 18px; background: url(../di/bg-obj.png) no-repeat -1px -125px; #background-position: -1px -122px; }
.pagination span,.pagination a:hover { background-position: -42px -125px !important; #background-position: -42px -122px !important; }
.pagination em { margin: 0 5px 0 0; font-style: normal; float: left;}
#item li label { text-align: center;}
#item li img { cursor: pointer; background: #fff; }
#item li:hover img { opacity: .5;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; filter: alpha(opacity=50); }
.contents iframe { background: #fff; }
.truehits img { display: block; margin-top: 0; }