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

.comment { width:650px; display:inline; float:left; }

#comment { clear:both; }

#comment .zone-login { overflow:hidden; }
#comment .zone-login h4.mkapook { display:inline; float:left; padding:5px 10px; background:#8AFF11; box-shadow:0 -8px 8px rgba(0,0,0,0.1) inset; font-size:15px; font-family:Tahoma, Geneva, sans-serif; color:#000; text-shadow:0 0 1px #FFF; border-radius:10px 10px 0 0; }
#comment .zone-login a.mfacebook { display:inline; float:right; padding:5px 15px; background:#06448F; color:#FFF; text-decoration:none; font-size:15px; font-weight:bold; border-radius:5px 5px 0 0;  }
#comment .zone-login form { display:block; clear:both; padding:5px; }
#comment .zone-login form label { display:inline-block; margin-left:15px; font-size:13px; font-weight:bold; color:#060; }
#comment .zone-login form input.text { width:120px; border:1px solid #999; padding:4px; font-size:13px; }
#comment .zone-login form input.btn { padding:3px 5px; border-radius:5px; background:#D6D6D6; border:1px solid #FFF; box-shadow:0 0 3px #000; text-shadow:0 0 2px #FFF; font-weight:bold; }
#comment .zone-login form a { font-size:12px; display:inline-block; padding:0 5px; color:#333; }
#comment .zone-login form#login_u { background:#8AFF11; box-shadow:0 -8px 8px rgba(0,0,0,0.1) inset; }

#comment .zone-middle { border:1px solid #E4E4E4; border-radius:0 0 5px 5px; border-bottom:5px solid #8AFF11; overflow:hidden; background:url(../images_hl/bg-shadows.jpg) top center no-repeat; }

.user_details { width:100px; height:auto; float:left; display:inline; }
.user_details ul { margin-top:20px; }
.user_details ul li { padding:5px 5px; border-bottom:1px #e0e0e0 dotted; list-style:none }
.user_details ul li a { font-size:12px; color:#666666 }
.user_details ul li a strong { color:#e65c00; font-weight:bold;}
.user_details ul li a img { width:90px; height:90px; margin:0 auto; display:block; border-radius:100%; }

#comment .zone-middle .zone-comment { display:inline; float:left; width:530px; text-align:center; padding:9px; }
#comment .zone-middle .zone-comment h4 { font-size:36px; color:#666; font-weight:normal; }
#comment .zone-middle .zone-comment>span { display:block; font-size:13px; color:#999; }
#comment .zone-middle .zone-comment textarea { width:98%; padding:1%; height:170px; border:1px solid #E2E2E2; margin:5px auto 0;  }
#comment .zone-middle .zone-comment p { font-style:normal; font-size:11px; color:#066ACC; display:block; }
#comment .zone-middle .zone-comment .namepost { padding:5px; }
#comment .zone-middle .zone-comment .namepost label { display:inline-block; margin-left:10px; font-size:12px; }
#comment .zone-middle .zone-comment .namepost input.text { width:80px; padding:3px 3px; border:1px solid #C2C2C2; }
#comment .zone-middle .zone-comment .namepost span { font-size:11px; color:#900; display:block; padding:2px 0 0; }
#comment .zone-middle .zone-comment input.submitpost { background:#7DE700; margin:5px auto; cursor:pointer; color:#234E00; text-shadow:0 0 3px #FFF; padding:5px 15px; border-radius:10px; border:1px solid #6DBF03; font-size:15px; font-weight:bold; box-shadow:0 15px 10px rgba(255,255,255,.2) inset; }
#comment .zone-middle .zone-comment em { color:#999; font-style:normal; font-size:11px; display:block; }

#comment .zone-middle .zone-comment.wd_comment { display:block; float:none; width:628px; text-align:center; padding:10px; }


#comment .zone-middle .zone-dookdik { display:inline; float:right; width:223px; margin:7px 5px 0 0; }
#comment .zone-middle .zone-dookdik ul { overflow:hidden; }
#comment .zone-middle .zone-dookdik>ul>li { display:inline; float:left; list-style:none; }
#comment .zone-middle .zone-dookdik>ul>li a { padding:8px 13px 8px 14px; display:block; font-size:12px; color:#FFF; font-weight:bold; text-decoration:none; }
#comment .zone-middle .zone-dookdik>ul>li.pick a { background:#E20000; }
#comment .zone-middle .zone-dookdik>ul>li.dook a { background:#FFD817; color:#865C08; }
#comment .zone-middle .zone-dookdik>ul>li.text a { background:#17B1D7; }
#comment .zone-middle .zone-dookdik .dookdik { overflow:hidden; border:4px solid #999; }
#comment .zone-middle .zone-dookdik .dookdik ul { height:280px !important; overflow:scroll; overflow-x:none; }
#comment .zone-middle .zone-dookdik .dookdik ul li { display:inline; float:left; width:65px; background:#F6F6F6; margin:1px 1px 0 0; text-align:center; height:60px; padding:5px 0 0 0; }
#comment .zone-middle .zone-dookdik .dookdik ul li img { max-width:60px; max-height:60px; }
#comment .zone-middle .zone-dookdik .dookdik ul li a { color:#666; }
#comment .zone-middle .zone-dookdik .dookdik .pages { clear:both; padding:3px 0 5px; text-align:center; }
#comment .zone-middle .zone-dookdik .dookdik .pages a { display:inline-block; background:#CCCCCC; width:20px; height:20px; line-height:20px; color:#333; font-size:12px; text-decoration:none;  }
#comment .zone-middle .zone-dookdik>.pick { border:4px solid #E20000; } 
#comment .zone-middle .zone-dookdik>.dook { border:4px solid #FFD817; } 
#comment .zone-middle .zone-dookdik>.text { border:4px solid #17B1D7; } 
#comment .zone-middle .zone-dookdik>.mores { text-align:center; padding:8px 0; }
#comment .zone-middle .zone-desc { background:url(../images_hl/bg-shadows.jpg) top center no-repeat; display:block; clear:both; padding:10px; }
#comment .zone-middle .zone-desc p strong { font-size:12px; display:block; }
#comment .zone-middle .zone-desc p { font-size:11px; color:#666; display:inline; float:left; width:69%; padding:8px 0; }
#comment .zone-middle .zone-desc a { background:#CFF6A0; width:30%; text-align:center; margin-top:10px; display:inline; float:right; color:#508A0C; font-size:11px; display:block; text-decoration:none; padding:5px 0; border:1px dashed #009900; border-radius:5px; } 

#reply { width:650px; margin:10px 0 0; }
#reply section { overflow:hidden; position:relative; }
#reply section article { position:relative; width:100%; margin:10px auto; clear:both; }
#reply section article .comments { background:#EFEFEF; overflow:hidden; border-radius:10px; padding:0 0 5px; border-bottom:2px solid #FFF; position:relative; z-index:2; }
#reply section article .comments header { padding:10px 5px 10px 20px; }
#reply section article .comments .avatar { display:inline; float:left; width:80px; margin-left:10px; text-align:center; }
#reply section article .comments .avatar a { color:#477C20; font-weight:bold; }
#reply section article .comments .avatar a img { border:2px solid #FFF; box-shadow:0 0 2px #ccc; }
#reply section article .comments p { display:inline; float:right; width:520px; min-height:50px; border:1px solid #D2D2D2; margin-right:10px; background:#FFFFFF; padding:10px; border-radius:10px; position:relative; }
#reply section article .comments p:before { position:absolute; display:block; content:""; width:1px; height:1px; border-right:12px solid #D2D2D2; border-top:10px solid transparent; border-bottom:10px solid transparent; top:12px; left:-13px; }
#reply section article .comments p:after { position:absolute; display:block; content:""; width:1px; height:1px; border-right:11px solid #FFF; border-top:9px solid transparent; border-bottom:9px solid transparent; top:13px; left:-12px; }
#reply section article .comments em { display:inline; float:right; width:520px; margin-right:25px; font-style:normal; font-size:11px; color:#999; }

.navi { overflow:hidden; text-align:center; padding:20px 0; }
.navi a { display:inline-block; margin:0 2px; background:#FFF; border:1px solid #CCC; width:24px; height:24px; font-size:14px; line-height:24px; color:#666; }
.navi a.here { background:#CCC; color:#333; }