﻿
/* Shop Recommendation Style for Theme 019 */

/* Default.aspx page */
#blur { position:absolute; z-index:998; top:0; right:0; background-color:#000; }
#clickMeRecommend { display:none; position:fixed; left:-420px; top:250px; width:420px; background-color:#fff; color:#555; padding:16px 10px;
                    border-top:solid 3px #496161; border-bottom:solid 3px #496161; border-right:solid 1px #496161; box-shadow:2px 0px 3px #999; border-radius: 0 5px 5px 0; }
#clickMeRecommend .ico { background:url('/svg/productrecommendation-icon.svg') no-repeat; width:79px; height:66px; float:left; margin-right:10px; }
#clickMeRecommend .content { width:400px !important; height:66px !important; background-color:transparent; padding:0;
                             cursor:pointer; position:relative; text-align:left; }  
#clickMeRecommend .content .act { position:absolute; bottom:-5px; right:-5px; font-size:9px; }
#clickMeRecommend #arrow-right { position:absolute; top:0px; right:0px; background-color:#f0f0f0; width:20px; height:98px; 
                                 cursor:pointer; border-radius: 0 3px 3px 0; }
#clickMeRecommend #arrow-left { position:absolute; top:0px; right:0px; background-color:#eaeaea; width:20px; height:98px; 
                                cursor:pointer; display:none; border-radius: 0 3px 3px 0; }
#clickMeRecommend .ico-right { background:url('../../images/MasterImage(SBuy).png') no-repeat -743px -326px; width:14px; height:16px; position:absolute; top:3px; right:3px; }
#clickMeRecommend .ico-left { background:url('../../images/MasterImage(SBuy).png') no-repeat -757px -326px; width:14px; height:16px; position:absolute; top:3px; right:3px; } 

/* For side panel and iframe header text */
.ttl { font-family:Arial; font-size:16px; letter-spacing:-0.01em;
        height:20px; margin-bottom:4px; font-weight:bold; color:#494949; }
.desc { font-family:Verdana; font-size:12px; line-height:18px; color:#666; }

/* Iframe Question & Answer */
.q { font-family: 'Courgette', '微软雅黑' , cursive; font-size: 36px; line-height:40px; 
     color:#666; }                                                       /* can be changed */
.ans { width:100%; }
.ans  input[type="radio"] { display:none; }
.ans label { display:block; padding:10px 15px; cursor:pointer; background-color:#fcfcfc; border:solid 1px #eaeaea; 
             font-size:16px; border-radius: 5px; }
.ans label:hover,
.ans label:focus { background-color:#8AA5A5; color:#fff;                                /* can be changed */
                  -moz-transition: all 0.5s ease-in-out 0s;
                  -webkit-transition: all 0.5s ease-in-out 0s;
                  -o-transition: all 0.5s ease-in-out 0s; }

a.restart { color:#71817e; }                                                /* can be changed */
                  
/* Iframe product recommendation table */
.rp { border-collapse:collapse; }
.rp td { width:180px; border:solid 1px #eaeaea; text-align:center; }
.rp td a { position:relative; color:#000; font-size:12px; }
.rp .r-outer { display: table; #position: relative; height: 230px; width: 180px; }
.rp .r-middle { display: table-cell; #position: absolute; #top: 50%; #left:50%; vertical-align: middle; text-align:center; }
.rp .r-inner { #position: relative;	#top: -50%; #left:-50%; }
.rp img { max-height: 230px; max-width:180px; }
.rp b { color:#333; display:block; margin-bottom:3px; line-height:normal; }                  
.rp .see-details { display:inline-block; background-color:#666; color:#fff;              /* can be changed */
                   border-radius:5px; padding:2px 8px; font-size:10px;
                   -moz-transition: all 0.5s ease-out 0s;
                   -webkit-transition: all 0.5s ease-out 0s;
                   -o-transition: all 0.5s ease-out 0s; }
.rp td a:hover .see-details { background-color:#000; }
