﻿
.buttonS, .buttonM, .buttonL, .buttonXL, fGray{ 
font-family:微軟正黑體, Arial;
margin: 5px; 
*margin: 5px;
font-weight: normal; 
display: inline-block; 
border-radius: 3px; 
-webkit-border-radius: 3px; /*safari, google chrome */
-moz-border-radius: 3px; /*firefox */
text-decoration: none; 
z-index:1;
position:relative;
text-align:center;
}
.buttonS i, .buttonM i, .buttonL i, .buttonXL i {margin-right:0.5em;*margin-right:0;}

.buttonS { padding: 2px 6px; font-size: 12px; text-align:center;}
.buttonM { padding: 3px 12px;  font-size:14px; text-align:center; *margin:0 5px 0 0;}
.buttonL { padding: 6px 16px; font-size: 18px; text-align:center;}
.buttonXL{ padding: 12px 20px; font-size: 20px; text-align:center;}

/*-----White------*/
input[type=submit].bWhite, input[type=button].bWhite, 
.bWhite{ 
	border: 1px solid #c3c3c3; 
	box-shadow:0 1px 2px #e2e2e2,0 1px 1px #999; 
	-webkit-box-shadow: 0 1px 2px #e2e2e2,0 1px 1px #999;  
	-moz-box-shadow:0 1px 2px #e2e2e2,0 1px 1px #999; 
	color: #666 ;
	background: #f8f8f8;
    behavior: url(/inc/css/PIE.htc);
}
input[type=submit].bWhite:hover, input[type=button].bWhite:hover, 
.bWhite:hover{ 
   text-decoration:none;
    background: #eee; 
    color: #000; 
    border-color: #999; 
     box-shadow: 0 0 5px #e2e2e2 , 0 1px 1px #999; 
	-webkit-box-shadow: 0 0 5px #e2e2e2, 0 1px 1px #999; 
	-moz-box-shadow: 0 0 5px #e2e2e2, 0 1px 1px #999; 
    -o-transition: color .20s linear, background-color .20s linear, border-color .20s linear;
   -webkit-transition: color .20s linear, background-color .20s linear, border-color .20s linear;
   -moz-transition: color .20s linear, background-color .20s linear, border-color .20s linear;
   transition: color .20s linear, background-color .20s linear, border-color .20s linear;

}
input[type=submit].bWhite:active, input[type=button].bWhite:active, 
.bWhite:active{ 
background: #eee; color: #000; 
border-color: #999; 
box-shadow: 0 0 8px #999 inset, 0 1px 1px #999; 
-webkit-box-shadow: 0 0 8px #999 inset, 0 1px 1px #999; 
-moz-box-shadow: 0 0 8px #999 inset, 0 1px 1px #999; 
 }


/*-----Red------*/
input[type=submit].bRed, input[type=button].bRed, 
.bRed{ /*text-shadow: 1px 1px 0 #980c10;*/
	border: 1px solid #980c10 ; 
	box-shadow:0 1px 2px #e2e2e2,0 1px 1px #999; 
	-webkit-box-shadow: 0 1px 2px #e2e2e2,0 1px 1px #999;  
	-moz-box-shadow:0 1px 2px #e2e2e2,0 1px 1px #999; 
	color: #fff;
	background: #d81b21;
    behavior: url(/inc/css/PIE.htc);
}

input[type=submit].bRed:hover, input[type=button].bRed:hover, 
.bRed:hover{
    text-decoration:none;
	background: #ff1f0e; 
	color: #fff; 
	border-color: #e63123; 
	box-shadow: 0 0 5px #e2e2e2 , 0 1px 1px #999; 
	-webkit-box-shadow: 0 0 5px #e2e2e2, 0 1px 1px #999; 
	-moz-box-shadow: 0 0 5px #e2e2e2, 0 1px 1px #999; 
     -o-transition: color .20s linear, background-color .20s linear, border-color .20s linear;
   -webkit-transition: color .20s linear, background-color .20s linear, border-color .20s linear;
   -moz-transition: color .20s linear, background-color .20s linear, border-color .20s linear;
   transition: color .20s linear, background-color .20s linear, border-color .20s linear;
        	}

input[type=submit].bRed:active, input[type=button].bRed:active, 
.bRed:active{ 
    text-decoration:none;
	background: #d81b21; 
	color: #fff; 
	border-color: #810b0e; 
	box-shadow: 0 0 8px #810b0e inset, 0 1px 1px #999; 
    -webkit-box-shadow: 0 0 8px #810b0e inset, 0 1px 1px #999; 
    -moz-box-shadow: 0 0 8px #810b0e inset, 0 1px 1px #999;
	
	}

/*-----blue------*/
input[type=submit].bBlue, input[type=button].bBlue,
.bBlue{ 
	border: 1px solid #3498db; 
	box-shadow:0 1px 2px #e2e2e2,0 1px 1px #999; 
	-webkit-box-shadow: 0 1px 2px #e2e2e2,0 1px 1px #999;  
	-moz-box-shadow:0 1px 2px #e2e2e2,0 1px 1px #999; 
	color: #fff;
	background: #2980b9;
    behavior: url(/inc/css/PIE.htc);
}
input[type=submit].bBlue:hover, input[type=button].bBlue:hover, 
.bBlue:hover{
    text-decoration:none;
	background: #3498db; 
	color: #fff; 
	border-color: #2980b9; 
	box-shadow: 0 0 5px #e2e2e2 , 0 1px 1px #999; 
	-webkit-box-shadow: 0 0 5px #e2e2e2, 0 1px 1px #999; 
	-moz-box-shadow: 0 0 5px #e2e2e2, 0 1px 1px #999;
     -o-transition: color .20s linear, background-color .20s linear, border-color .20s linear;
   -webkit-transition: color .20s linear, background-color .20s linear, border-color .20s linear;
   -moz-transition: color .20s linear, background-color .20s linear, border-color .20s linear;
   transition: color .20s linear, background-color .20s linear, border-color .20s linear; 

}
input[type=submit].bBlue:active, input[type=button].bBlue:active,
.bBlue:active{ 
    text-decoration:none;
	background: #55b9fc; 
	color: #fff; 
	border-color: #0076a3; 
	box-shadow: 0 0 5px #0076a3 inset, 0 1px 1px #999; 
    -webkit-box-shadow: 0 0 5px #0076a3 inset, 0 1px 1px #999; 
    -moz-box-shadow: 0 0 5px #0076a3 inset, 0 1px 1px #999;  
	}

/*-----orange{------*/
input[type=submit].bOrange, input[type=button].bOrange,
.bOrange{ 
    background: #f39c12;
	border: 1px solid #da7c0c ; 
	box-shadow:0 1px 2px #e2e2e2,0 1px 1px #999; 
	-webkit-box-shadow: 0 1px 2px #e2e2e2,0 1px 1px #999;  
	-moz-box-shadow:0 1px 2px #e2e2e2,0 1px 1px #999; 
	color: #fff;	
    behavior: url(/inc/css/PIE.htc);
    
}
input[type=submit].bOrange:hover, input[type=button].bOrange:hover, 
.bOrange:hover{
	background: #ffb237; 
	color: #fff; 
	border-color: #ffb136; 
	box-shadow: 0 0 5px #e2e2e2 , 0 1px 1px #999; 
	-webkit-box-shadow: 0 0 5px #e2e2e2, 0 1px 1px #999; 
	-moz-box-shadow: 0 0 5px #e2e2e2, 0 1px 1px #999; 
     -o-transition: color .20s linear, background-color .20s linear, border-color .20s linear;
   -webkit-transition: color .20s linear, background-color .20s linear, border-color .20s linear;
   -moz-transition: color .20s linear, background-color .20s linear, border-color .20s linear;
   transition: color .20s linear, background-color .20s linear, border-color .20s linear;
}
input[type=submit].bOrange:active, input[type=button].bOrange:active,
.bOrange:active{ 
	background: #f39c12; 
	color: #fff; 
	border-color: #da7c0c; 
	box-shadow: 0 0 8px #da7c0c inset, 0 1px 1px #999; 
    -webkit-box-shadow: 0 0 8px #da7c0c inset, 0 1px 1px #999; 
    -moz-box-shadow: 0 0 8px #da7c0c inset, 0 1px 1px #999; 
	}
/*-----green------*/
input[type=submit].bGreen, input[type=button].bGreen,
.bGreen{ 
    background: #27ae60;
	border: 1px solid #138c46; 
	box-shadow:0 1px 2px #e2e2e2,0 1px 1px #999; 
	-webkit-box-shadow: 0 1px 2px #e2e2e2,0 1px 1px #999;  
	-moz-box-shadow:0 1px 2px #e2e2e2,0 1px 1px #999; 
	color: #fff;	
    behavior: url(/inc/css/PIE.htc);
}
input[type=submit].bGreen:hover, input[type=button].bGreen:hover, 
.bGreen:hover{
	background:#2ecc71; 
	color: #fff; 
	border-color: #27ae60; 
	box-shadow: 0 0 5px #e2e2e2 , 0 1px 1px #999; 
	-webkit-box-shadow: 0 0 5px #e2e2e2, 0 1px 1px #999; 
	-moz-box-shadow: 0 0 5px #e2e2e2, 0 1px 1px #999; 
      -o-transition: color .20s linear, background-color .20s linear, border-color .20s linear;
   -webkit-transition: color .20s linear, background-color .20s linear, border-color .20s linear;
   -moz-transition: color .20s linear, background-color .20s linear, border-color .20s linear;
   transition: color .20s linear, background-color .20s linear, border-color .20s linear;
   
}
input[type=submit].bGreen:active, input[type=button].bGreen:active,
.bGreen:active{ 
	background: #2ecc71; 
	color: #fff; 
	border: 1px solid #27ae60; 
	box-shadow: 0 0 5px #19743f inset, 0 1px 1px #999; 
    -webkit-box-shadow: 0 0 5px #19743f inset, 0 1px 1px #999; 
    -moz-box-shadow: 0 0 5px #19743f inset, 0 1px 1px #999; 
	}
/*-----green2------*/
input[type=submit].bGreen2, input[type=button].bGreen2,
.bGreen2{ 
    background: #16a085;
	border: 1px solid #0a7963; 
	box-shadow:0 1px 2px #e2e2e2,0 1px 1px #999; 
	-webkit-box-shadow: 0 1px 2px #e2e2e2,0 1px 1px #999;  
	-moz-box-shadow:0 1px 2px #e2e2e2,0 1px 1px #999; 
	color: #fff;	
    behavior: url(/inc/css/PIE.htc);
}
input[type=submit].bGreen2:hover, input[type=button].bGreen2:hover, 
.bGreen2:hover{
	background:#1abc9c; 
	color: #fff; 
	border-color: #16a085; 
	box-shadow: 0 0 5px #e2e2e2 , 0 1px 1px #999; 
	-webkit-box-shadow: 0 0 5px #e2e2e2, 0 1px 1px #999; 
	-moz-box-shadow: 0 0 5px #e2e2e2, 0 1px 1px #999; 
      -o-transition: color .20s linear, background-color .20s linear, border-color .20s linear;
   -webkit-transition: color .20s linear, background-color .20s linear, border-color .20s linear;
   -moz-transition: color .20s linear, background-color .20s linear, border-color .20s linear;
   transition: color .20s linear, background-color .20s linear, border-color .20s linear;
}
input[type=submit].bGreen2:active, input[type=button].bGreen2:active,
.bGreen2:active{ 
	background: #16a085; 
	color: #fff; 
	border: 1px solid #16a085;
	box-shadow: 0 0 5px #19743f inset, 0 1px 1px #999; 
    -webkit-box-shadow: 0 0 5px #19743f inset, 0 1px 1px #999; 
    -moz-box-shadow: 0 0 5px #19743f inset, 0 1px 1px #999; 
	}
/*-----frame ------*/
.fGray{ 
font-family:微軟正黑體, Arial;
font-weight: normal; 
display: inline-block; 
border-radius: 3px; 
-webkit-border-radius: 3px; /*safari, google chrome */
-moz-border-radius: 3px; /*firefox */
text-decoration: none; 
padding:0 2px 1px 5px;
*padding:0px 5px 0px 5px;
*margin:0 5px 0 0;
}

/*-----Gray ------*/
.fGray {
    border: 1px solid #c3c3c3;
    box-shadow: 0 1px 2px #e2e2e2,0 1px 1px #999;
    -webkit-box-shadow: 0 1px 2px #e2e2e2,0 1px 1px #999;
    -moz-box-shadow: 0 1px 2px #e2e2e2,0 1px 1px #999;
    background: #fff;
    behavior: url(/inc/css/PIE.htc);
}
.fGray:hover {
    border: 1px solid #999;
    box-shadow: 0 1px 2px #e2e2e2 inset,0 1px 1px #999;
    -webkit-box-shadow: 0 1px 2px #e2e2e2 inset,0 1px 1px #999;
    -moz-box-shadow: 0 1px 2px #e2e2e2 inset,0 1px 1px #999;
    
}
.fGray input {  
    border:0;}

/*-----logout ------*/
.bRed2{ 
font:14px/1.5 微軟正黑體,Arial;
margin: 5px 1px; 
*margin: 5px 1px;
font-weight: normal; 
display: inline-block;
border:2px solid #e57079; 
border-radius: 50px; 
-webkit-border-radius:100px; /*safari, google chrome */
-moz-border-radius: 100px; /*firefox */
text-decoration: none; 
z-index:1;
position:relative;
text-align:center;
padding: 5px 20px;  
text-align:center;
color: #FFF;
background:#c6000f;
behavior: url(/inc/css/PIE.htc);
}

.bRed2:hover{ 
   text-decoration:none;
    background:#d4404b;
    border-color: #c6000f; 
    -o-transition: color .20s linear, background-color .20s linear, border-color .20s linear;
   -webkit-transition: color .20s linear, background-color .20s linear, border-color .20s linear;
   -moz-transition: color .20s linear, background-color .20s linear, border-color .20s linear;
   transition: color .20s linear, background-color .20s linear, border-color .20s linear;

}