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

body {
   overflow-x:hidden;
}

.dialog{
	width:408px;
	height:80px;
	font-family:"微軟正黑體";
	font-size:1.2em;
}

.greenDialog {
  position:absolute;
  padding:15px;
  margin:1em 0 3em;
  color:#000;
  background:#f3961c;
  background:-webkit-gradient(linear, 0 0, 0 100%, from(#c9ef85), to(#89d044));
  background:-moz-linear-gradient(#c9ef85, #89d044);
  background:-o-linear-gradient(#c9ef85, #89d044);
  background:linear-gradient(#c9ef85, #89d044);
  -webkit-border-radius:30px;
  -moz-border-radius:30px;
  border-radius:30px;
  right:50px;
  box-shadow:0px 2px 0px rgba(0%,0%,0%,0.7);
  -moz-box-shadow:0px 2px 0px rgba(0%,0%,0%,0.7);
  -webkit-box-shadow:0px 2px 0px rgba(0%,0%,0%,0.7);
  
  
}

.greenDialog p {font-size:1.25em;}
.greenDialog:before {
  content:"";
  position:absolute;
  z-index:-1;
  bottom:30px;
  right:-7px;
  height:30px;
  border-right:20px solid #b9e774;
  background:#b9e774;
  -webkit-border-bottom-right-radius:80px 80px;
  -moz-border-radius-bottomright:80px 80px;
  border-bottom-right-radius:80px 80px;
  -webkit-transform:translate(0, -2px);
  -moz-transform:translate(0, -2px);
  -ms-transform:translate(0, -2px);
  -o-transform:translate(0, -2px);
  transform:translate(0, -2px); 
  box-shadow:0px 1px 2px rgba(0%,0%,0%,0.7);
  -moz-box-shadow:0px 1px 2px rgba(0%,0%,0%,0.7);
  -webkit-box-shadow:0px 1px 2px rgba(0%,0%,0%,0.7);

  
}
.greenDialog:after {
  content:"";
  position:absolute;
  z-index:-1;
  bottom:43px;
  right:-42px;
  width:40px;
  height:20px;
  background:#c3c0b1;
  -webkit-border-bottom-right-radius:50px 50px;
  -moz-border-radius-bottomright:50px 50px;
  border-bottom-right-radius:50px 50px;
  -webkit-transform:translate(-30px, -2px);
  -moz-transform:translate(-30px, -2px);
  -ms-transform:translate(-30px, -2px);
  -o-transform:translate(-30px, -2px);
  transform:translate(-30px, -2px);
}


.whiteDialog {
  position:absolute;
  padding:15px;
  margin:1em 0 3em;
  color:#000;
  background:#f3961c;
  background:-webkit-gradient(linear, 0 0, 0 100%, from(#f9fafa), to(#dbdddf));
  background:-moz-linear-gradient(#f9fafa, #dbdddf);
  background:-o-linear-gradient(#f9fafa, #dbdddf);
  background:linear-gradient(#f9fafa, #dbdddf);
  -webkit-border-radius:30px;
  -moz-border-radius:30px;
  border-radius:30px;
  left:30px;
  margin-left:0px;
  box-shadow:0px 2px 0px rgba(0%,0%,0%,0.7);
  -moz-box-shadow:0px 2px 0px rgba(0%,0%,0%,0.7);
  -webkit-box-shadow:0px 2px 0px rgba(0%,0%,0%,0.7);
}
.whiteDialog p {font-size:1.25em;}
.whiteDialog:before {
  content:"";
  position:absolute;
  z-index:-1;
  bottom:30px;
  left:-7px;
  height:30px;
  border-left:20px solid #f3f4f5;
  background:#f3f4f5;
  -webkit-border-bottom-left-radius:80px 80px;
  -moz-border-radius-bottomleft:80px 80px;
  border-bottom-left-radius:80px 80px;
  -webkit-transform:translate(0, -2px);
  -moz-transform:translate(0, -2px);
  -ms-transform:translate(0, -2px);
  -o-transform:translate(0, -2px);
  transform:translate(0, -2px); 
  box-shadow:0px 1px 2px rgba(0%,0%,0%,0.7);
  -moz-box-shadow:0px 1px 2px rgba(0%,0%,0%,0.7);
  -webkit-box-shadow:0px 1px 2px rgba(0%,0%,0%,0.7);

  
}
.whiteDialog:after {
 content:"";
  position:absolute;
  z-index:-1;
  bottom:43px;
  left:20px;
  width:40px;
  height:20px;
  background:#c3c0b1;
  -webkit-border-bottom-left-radius:50px 50px;
  -moz-border-radius-bottomleft:50px 50px;
  border-bottom-left-radius:50px 50px;
  -webkit-transform:translate(-30px, -2px);
  -moz-transform:translate(-30px, -2px);
  -ms-transform:translate(-30px, -2px);
  -o-transform:translate(-30px, -2px);
  transform:translate(-30px, -2px);
}