@keyframes confirm { from { opacity: 0; transform: scale(0.5); } to { opacity: 1; transform: scale(1); } } .confirm{ animation: confirm 0.3s ease 1 forwards; background-color: #191919; border-radius: 5px; max-width: 600px; min-width: 200px; margin: auto; box-shadow: 0 0 10px #21333E; border: 1px solid #444f53; } .confirm_block{ position:absolute; width:90%; top:10%; right: 5%; left: 5%; text-align:center; line-height: 25px; } .confirm_title{ font-size: 18pt; padding:20px 10px; color:#FFF; } .confirm_contentA{ font-size: 12pt; padding:0 15px 20px; color:#B8B8B8; text-align:left; } .confirm_contentB{ font-size: 12pt; padding:0 15px 20px; color:#B8B8B8; text-align:left; line-height:22px; } .confirm_contentC{ font-size: 12pt; padding:0 15px 20px; color:#FFCC00; text-align:left; } .confirm_contentD{ font-size: 10pt; padding:0 15px 20px; color:#B8B8B8; text-align:left; } .confirm_button{ cursor:pointer; vertical-align:middle; border-top: 1px solid #B4B4B4; display:table-cell; background: transparent; color: #FFF; width: 50%; height: 60px; font-size: 14pt; } .confirm_button:focus, .confirm_button:hover { background: #6699CC; font-size: 16pt; } .confirm_button:active { background: #6699CC; font-size: 16pt; } .confirm_button_left{ border-right: 1px solid #B4B4B4; } .confirm_button_left:focus, .confirm_button_left:hover, .confirm_button_left:active{ border-bottom-left-radius: 10px; } .confirm_button_right:focus, .confirm_button_right:hover, .confirm_button_right:active{ border-bottom-right-radius: 10px; } .confirm_button_gen_long_left{ font-weight: bolder; text-shadow: 1px 1px 0px black; background: #121C1E; background: -webkit-linear-gradient(#233438 0%, #0F1011 100%); background: -o-linear-gradient(#233438 0%, #0F1011 100%); background: linear-gradient(#233438 0%, #0F1011 100%); -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; border:0; color: #FFFFFF; width:155px; height:34px; text-align:center; line-height:34px; margin:10px; font-family:Verdana; font-size:12px; overflow:visible; cursor:pointer; outline: none; /* for Firefox */ hlbr:expression(this.onFocus=this.blur()); /* for IE */ white-space:normal; } .confirm_button_gen_long_left:hover /*, .button:active*/{ background: #085F96; background: -webkit-linear-gradient(#09639C 0%, #003047 100%); background: -o-linear-gradient(#09639C 0%, #003047 100%); background: linear-gradient(#09639C 0%, #003047 100%); border:0; color: #FFFFFF; height:34px; font-family:Verdana; font-size:12px; width:155px; overflow:visible; cursor:pointer; outline: none; /* for Firefox */ hlbr:expression(this.onFocus=this.blur()); /* for IE */ white-space:normal; } .confirm_button_gen_long_left_rog{ font-weight: bolder; text-shadow: 1px 1px 0px black; background: rgb(145,7,31); -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; border:0; color: #FFFFFF; width:155px; height:34px; text-align:center; line-height:34px; margin:10px; font-family:Verdana; font-size:12px; overflow:visible; cursor:pointer; outline: none; /* for Firefox */ hlbr:expression(this.onFocus=this.blur()); /* for IE */ white-space:normal; } .confirm_button_gen_long_left_rog:hover /*, .button:active*/{ background: rgba(207,10,44,1); border:0; color: #FFFFFF; height:34px; font-family:Verdana; font-size:12px; width:155px; overflow:visible; cursor:pointer; outline: none; /* for Firefox */ hlbr:expression(this.onFocus=this.blur()); /* for IE */ white-space:normal; } .confirm_button_gen_long_left_tuf{ font-weight: bolder; text-shadow: 1px 1px 0px black; background: rgb(255,165,35); -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; border:0; color: #FFFFFF; width:155px; height:34px; text-align:center; line-height:34px; margin:10px; font-family:Verdana; font-size:12px; overflow:visible; cursor:pointer; outline: none; /* for Firefox */ hlbr:expression(this.onFocus=this.blur()); /* for IE */ white-space:normal; } .confirm_button_gen_long_left_tuf:hover /*, .button:active*/{ background: #D0982C; border:0; color: #FFFFFF; height:34px; font-family:Verdana; font-size:12px; width:155px; overflow:visible; cursor:pointer; outline: none; /* for Firefox */ hlbr:expression(this.onFocus=this.blur()); /* for IE */ white-space:normal; } .confirm_button_gen_long_right{ font-weight: bolder; text-shadow: 1px 1px 0px black; background: #121C1E; background: -webkit-linear-gradient(#233438 0%, #0F1011 100%); background: -o-linear-gradient(#233438 0%, #0F1011 100%); background: linear-gradient(#233438 0%, #0F1011 100%); -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; border:0; color: #FFFFFF; width:155px; height:34px; text-align:center; line-height:34px; margin:10px; font-family:Verdana; font-size:12px; overflow:visible; cursor:pointer; outline: none; /* for Firefox */ hlbr:expression(this.onFocus=this.blur()); /* for IE */ white-space:normal; } .confirm_button_gen_long_right:hover /*, .button:active*/{ background: #085F96; background: -webkit-linear-gradient(#09639C 0%, #003047 100%); background: -o-linear-gradient(#09639C 0%, #003047 100%); background: linear-gradient(#09639C 0%, #003047 100%); border:0; color: #FFFFFF; height:34px; font-family:Verdana; font-size:12px; width:155px; overflow:visible; cursor:pointer; outline: none; /* for Firefox */ hlbr:expression(this.onFocus=this.blur()); /* for IE */ white-space:normal; } .confirm_button_gen_long_right_rog{ font-weight: bolder; text-shadow: 1px 1px 0px black; background: rgb(145,7,31); -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; border:0; color: #FFFFFF; width:155px; height:34px; text-align:center; line-height:34px; margin:10px; font-family:Verdana; font-size:12px; overflow:visible; cursor:pointer; outline: none; /* for Firefox */ hlbr:expression(this.onFocus=this.blur()); /* for IE */ white-space:normal; } .confirm_button_gen_long_right_rog:hover /*, .button:active*/{ background: rgba(207,10,44,1); border:0; color: #FFFFFF; height:34px; font-family:Verdana; font-size:12px; width:155px; overflow:visible; cursor:pointer; outline: none; /* for Firefox */ hlbr:expression(this.onFocus=this.blur()); /* for IE */ white-space:normal; } .confirm_button_gen_long_right_tuf{ font-weight: bolder; text-shadow: 1px 1px 0px black; background: rgb(255,165,35); -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; border:0; color: #FFFFFF; width:155px; height:34px; text-align:center; line-height:34px; margin:10px; font-family:Verdana; font-size:12px; overflow:visible; cursor:pointer; outline: none; /* for Firefox */ hlbr:expression(this.onFocus=this.blur()); /* for IE */ white-space:normal; } .confirm_button_gen_long_right_tuf:hover /*, .button:active*/{ background: #D0982C; border:0; color: #FFFFFF; height:34px; font-family:Verdana; font-size:12px; width:155px; overflow:visible; cursor:pointer; outline: none; /* for Firefox */ hlbr:expression(this.onFocus=this.blur()); /* for IE */ white-space:normal; } .ribbon-wrapper-red { width: 85px; height: 88px; overflow: hidden; position: absolute; top: -3px; right: -3px; } .ribbon-red { font: bold 15px Sans-Serif; color: #FFFFFF; text-align: center; text-shadow: rgba(0,0,0,0.5) 0px 1px 0px; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); position: relative; padding: 7px 0; left: -5px; top: 15px; width: 120px; background-color: #A50000; background-image: -webkit-gradient(linear, left top, left bottom, from(#A50000), to(#A40C0C)); background-image: -webkit-linear-gradient(top, #A50000, #A40C0C); background-image: -moz-linear-gradient(top, #A50000, #A40C0C); background-image: -ms-linear-gradient(top, #A50000, #A40C0C); background-image: -o-linear-gradient(top, #A50000, #A40C0C); -webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.3); -moz-box-shadow: 0px 0px 3px rgba(0,0,0,0.3); box-shadow: 0px 0px 3px rgba(0,0,0,0.3); } .ribbon-red:before, .ribbon-red:after { content: ""; border-top: 3px solid #3C0505; border-left: 3px solid transparent; border-right: 3px solid transparent; position:absolute; bottom: -3px; } .ribbon-red:before { left: 0; } .ribbon-red:after { right: 0; } .title_num_div { vertical-align:top; padding-top:14px; padding-left:14px; } .title_num { display: block; width: 21px; height: 21px; line-height: 22px; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; background-color: #C0C0C0; text-align: center; font-weight: 700; font-family: sans-serif; color: #4D595D; font-size: 16px; }