@import url("reset.css");



#WRAPPER{ width:100%; font-family:Arial, Helvetica, sans-serif; background:#FFF; margin:0 auto; position:relative;}

#TITLE_DATA_BOX{ width:100%; height:28px; line-height:28px; background:url(../images/title_bkere.gif) repeat-x; float:left;}
#TITLE_DATA_BOX2{ width:100%; height:30px; text-align:center; background:url(../images/title_bkere.gif) repeat-x; float:left;}

#TITLE_TXT{ height:28px; line-height:28px; font-size:12px; text-shadow:1px 1px 0 #f2f9ff; float:right; margin:0 20px 0 0;}
#TITLE_TXT a{ text-decoration:none; color:#666;}
#TITLE_TXT a:hover{ color:#33ccff;}


#NAME_DATA_BOX{ width:90%; height:20px; line-height:20px; font-size:14px; color:#5d77a1; margin:10px 0 0 25px; float:left;}


#TALK_DATA_BOX_L{ width:90%; margin:0 0 10px 20px; float:left;}
#TALK_DATA_BOX_L table{ width:100%; font-size:12px; color:#afb4bb; /* border:solid 1px #006;*/}

#TALK_DATA_BOX_R{ width:90%; margin:10px 20px 20px 0; float:right;}
#TALK_DATA_BOX_R table{ width:100%; font-size:12px; color:#afb4bb; /*border:solid 1px #006;*/}

#THEM_DATA_BOX{ max-width:70%; line-height:16px; font-size:12px; border:solid 1px #b5bbc6; border-radius:15px; color:#000; padding:8px 12px; box-shadow:inset 0 0 5px #fdfefe, 0 1px #e6eaee;
background: rgb(253,254,254); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(253,254,254,1) 0%, rgba(249,250,251,1) 45%, rgba(241,244,247,1) 46%, rgba(236,240,244,1) 90%, rgba(239,242,246,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(253,254,254,1)), color-stop(45%,rgba(249,250,251,1)), color-stop(46%,rgba(241,244,247,1)), color-stop(90%,rgba(236,240,244,1)), color-stop(100%,rgba(239,242,246,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(253,254,254,1) 0%,rgba(249,250,251,1) 45%,rgba(241,244,247,1) 46%,rgba(236,240,244,1) 90%,rgba(239,242,246,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(253,254,254,1) 0%,rgba(249,250,251,1) 45%,rgba(241,244,247,1) 46%,rgba(236,240,244,1) 90%,rgba(239,242,246,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(253,254,254,1) 0%,rgba(249,250,251,1) 45%,rgba(241,244,247,1) 46%,rgba(236,240,244,1) 90%,rgba(239,242,246,1) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(253,254,254,1) 0%,rgba(249,250,251,1) 45%,rgba(241,244,247,1) 46%,rgba(236,240,244,1) 90%,rgba(239,242,246,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fdfefe', endColorstr='#eff2f6',GradientType=0 ); /* IE6-9 */ position:relative; word-break:break-word; float:left;}
/*#THEM_DATA_BOX:hover{ text-shadow:1px 1px 0 #FFF; border:solid 1px #95b3d1; color:#069; background:#f8f9fa; box-shadow:inset 1px 1px 2px #eaeaea;}*/
#THEM_DATA_BOX:before{ content:""; width:19px; height:13px; background:url(../images/angle.jpg); position:absolute; top:-1px; left:-7px;}
#THEM_DATA_BOX img{ max-width:100%;}

#OUR_DATA_BOX{ max-width:70%; line-height:16px; font-size:12px; border:solid 1px #87ce4e; border-radius:15px; color:#000; padding:8px 12px; box-shadow:inset 0 0 5px #d5f6b1, 0 1px #e8e9e8;
background: rgb(196,241,147); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(196,241,147,1) 0%, rgba(185,239,130,1) 45%, rgba(175,235,117,1) 46%, rgba(175,235,117,1) 90%, rgba(160,232,96,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(196,241,147,1)), color-stop(45%,rgba(185,239,130,1)), color-stop(46%,rgba(175,235,117,1)), color-stop(90%,rgba(175,235,117,1)), color-stop(100%,rgba(160,232,96,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(196,241,147,1) 0%,rgba(185,239,130,1) 45%,rgba(175,235,117,1) 46%,rgba(175,235,117,1) 90%,rgba(160,232,96,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(196,241,147,1) 0%,rgba(185,239,130,1) 45%,rgba(175,235,117,1) 46%,rgba(175,235,117,1) 90%,rgba(160,232,96,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(196,241,147,1) 0%,rgba(185,239,130,1) 45%,rgba(175,235,117,1) 46%,rgba(175,235,117,1) 90%,rgba(160,232,96,1) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(196,241,147,1) 0%,rgba(185,239,130,1) 45%,rgba(175,235,117,1) 46%,rgba(175,235,117,1) 90%,rgba(160,232,96,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c4f193', endColorstr='#a0e860',GradientType=0 ); /* IE6-9 */ position:relative; float:right; word-break:break-word;}
/*#OUR_DATA_BOX:hover{ text-shadow:1px 1px 0 #3e80bd; color:#FFF; box-shadow:inset 0 0 10px #346693; background:#549cde;}*/
#OUR_DATA_BOX:before{ content:""; width:19px; height:13px; background:url(../images/angle.jpg) 0 13px; position:absolute; top:-1px; right:-7px;}




#OUR_DATA_BOX:hover::afte{ display:block; width:550px; height:150px; background:#09F;  position:absolute; left: 0%;}

#LINE_DATA_BOX{ width:100%; height:20px; margin:0 0; float:left;}
#TIME_DATA_BOX{ width:100px; height:20px; line-height:20px; font-size:12px; text-align:center; border-radius:10px; color:#98a0ab; background:#f9f9fb; padding:0 12px; margin:0 auto;}










#IMPORT_DATA_BOX{ width:100%; height:72px; background:url(../images/import_bkere.gif) repeat-x; float:left;	}

#IMPORT_TYPE table{ width:100%}

#IMPORT_BBTER{ font-size:16px; margin:10px 0 0 0;}
#IMPORT_BBTER a{ display:block; width:52px; height:25px; text-decoration:none; text-align:center; text-shadow:1px 1px 0 #f2f9ff; font-weight:bold; 
border:solid 1px #94b3d2; border-radius:4px; color:#47abf9; box-shadow:inset 1px 1px 0 #FFF, 1px 1px 0 #FFF; 
background:url(../images/bbt_bkere.gif) repeat-x; padding:25px 0 0 0;}
#IMPORT_BBTER a:hover{ color:#00388d; background-position:0 -50px;}

#IMPORT_TYPE{ width:100%; margin:10px 10px 0 0;}
#IMPORT_TYPE textarea{ width:99%; height:44px; font-family:微軟正黑體, Arial, Helvetica, sans-serif; font-size:12px; border:solid 1px #94b3d2; border-radius:4px; box-shadow:inset 1px 1px 5px #e6eefb, 1px 1px 0 #FFF; outline:none; padding:3px 5px;}



.form-container{ width:300px; text-decoration:none; border:2px solid #aacbeb; font-family:'Helvetica Neue',Helvetica,sans-serif; vertical-align:middle;

   background:url(../images/login_bkere.gif) repeat-x;
   -webkit-border-radius: 12px;
   -moz-border-radius: 12px;
   border-radius: 12px;

   -webkit-box-shadow: rgba(000,000,000,0.5) 0 3px 2px, inset rgba(255,255,255,0.4) 0 0px 2px;
   -moz-box-shadow: rgba(000,000,000,0.5) 0 3px 2px, inset rgba(255,255,255,0.4) 0 0px 2px;
   box-shadow: rgba(000,000,000,0.5) 0 1px 3px, inset rgba(255,255,255,0.4) 0 0px 2px;

   padding:20px; margin:50px auto; position:relative;}

.form-container:before{ display:block; /*width:330px;*/ height:80px; line-height:50px; font-size:9px; content:"1"; text-align:left; color:#e4f0f9; border-radius:8px; 
background: -moz-linear-gradient(top,  rgba(255,255,255,0.5) 0%, rgba(255,255,255,0) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0.5)), color-stop(100%,rgba(255,255,255,0))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#80ffffff', endColorstr='#00ffffff',GradientType=0 ); /* IE6-9 */
position:absolute; top:5px; left:5px;}
   
   
   

.form-field{ width:90%; color:#069; border:1px solid #99dfff; background:#fff;
 border-radius:8px; -webkit-border-radius:8px; -moz-border-radius:8px;
box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(000,000,000,0.7) 0 0px 0px; -webkit-box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(000,000,000,0.7) 0 0px 0px; 
-moz-box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(000,000,000,0.7) 0 0px 0px;
 padding:8px; margin-bottom:20px;}

.form-field:focus{ color:#fff; background:#6CF; outline:none;}

.form-container h2{ font-size:20px; font-weight:bold; text-align:center; text-decoration:underline; text-shadow:0 1px 0 #ffffff; margin:0 0 10px 0;}

.form-title{ text-shadow:1px 1px 0 #fff; color:#0065ad; margin-bottom:5px;}

.submit-container{ text-align:right; margin:0 0 8px 0; outline:none;}

.submit-button{ font-size:14px; font-family: helvetica, serif; font-weight:bold; text-decoration:none; text-shadow:1px 1px 0 #f2f9ff; vertical-align:middle; color:#47abf9;
border:solid 1px #94b3d2; border-radius:4px; -webkit-border-radius:4px; -moz-border-radius:4px; border-radius:4px;
background:url(../images/bbt_bkere.gif) repeat-x;
box-shadow:inset 1px 1px 0 #FFF, 1px 1px 0 #FFF; -webkit-box-shadow:inset 1px 1px 0 #FFF, 1px 1px 0 #FFF; -moz-box-shadow:inset 1px 1px 0 #FFF, 1px 1px 0 #FFF; 
padding:8.5px 18px; margin:0 10px 0 0;}

.submit-button:hover{ text-shadow:0 1px 0 #CFF; border:1px solid #9CF; color:#00388d; background-position:0 -50px;}














#LOGIN_ZONE_BOX{ width:100%; height:100%; background:url(file:///C|/Users/ProgKing/Documents/talk/images/bkere.gif) no-repeat;
border-bottom: solid dashed 1px #999; }







#LOGIN_ZONE_BOX{ width:150px; height:200px; border-radius:10px; background:#CCC; padding:5px; margin:50px auto; position:relative;}

#LOGIN_ZONE_BOX:before{ display:block; width:150px; height:30px; line-height:30px; content:""; text-align:center; color:#FFF; border-radius:8px; 
background: -moz-linear-gradient(top,  rgba(255,255,255,0.5) 0%, rgba(255,255,255,0) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0.5)), color-stop(100%,rgba(255,255,255,0))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#80ffffff', endColorstr='#00ffffff',GradientType=0 ); /* IE6-9 */}

#LOGIN_ZONE_BOX:after{ display:block; width:150px; height:50px; line-height:30px; content:""; text-align:center; color:#FFF; border-radius:8px; 
background: -moz-linear-gradient(top,  rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.8) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0.05)), color-stop(100%,rgba(255,255,255,0.8))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(255,255,255,0.05) 0%,rgba(255,255,255,0.8) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(255,255,255,0.05) 0%,rgba(255,255,255,0.8) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(255,255,255,0.05) 0%,rgba(255,255,255,0.8) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(255,255,255,0.05) 0%,rgba(255,255,255,0.8) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0dffffff', endColorstr='#ccffffff',GradientType=0 ); /* IE6-9 */
position:absolute; bottom:5px
}


#OUR_DATA_R_TIME, #OUR_DATA_L_TIME, .DATA_BOX_R{ font-size:12px; color:#afb4bb; min-width:60px; float: right; display: inline-block; position: absolute; left: -60px; bottom: 5px;}
.DATA_BOX_L{ font-size:12px; color:#afb4bb; min-width:60px; float: left; display: inline-block; position: absolute; right: -70px; bottom: 5px;}


#OUR_DATA_R_TIME{ margin:0 0 6px 0;}
#OUR_DATA_L_TIME{ margin:0 0 6px 0;}


#txt_msg {resize: none;}

/*
#guestFormDiv { margin:60px; border:1px solid; padding:20px 0 20px 50px; }*/
#guestFormDiv { border:1px solid; width:80%; max-width:500px; margin:20px auto; }
#guestFormDiv label{display:block; margin:5px;}
#guestFormDiv input{display:block; margin:0 0 15px 0;}
#guestFormDiv input[type='submit']{width:100px;}