/**************************************
* 標題類
 <h3 class="user_title STYLExx COLOR">
	<span class="title"> ... </span>  
 </h3>
style01 : 左、右半圓標題
style02 : 前有 icon font，標題後有漸淡線條
style03 : 標題有背景顏色，上下有框線
***************************************/

/***************************************
 左、右半圓標題
 <h3 class="user_title style01">
	<span class="title"> ... </span>
 </h3>	
****************************************/
.user_title .date {
	font-size: 70%;
	margin-top: .5em;
	opacity: .8;
}

.user_title.style01 {
	display: inline-block;
	position: relative;
	padding: 0 1em;			/* padding #1 */
	margin-bottom: .7em;
}

.user_title.style01 .title {
	display: inline-block;
	padding: .3em .7em .2em; 
	background: transparent;
	border-style: solid;
	border-width: 1px 0; 
	border-color: rgba(127,127,127,1);		/* color #1 */
}

.user_title.style01:before,
.user_title.style01:after {
	content: '';
	position: absolute;
	width: 1em;
	height: 100%;
	border-style: solid;
	border-color: rgba(127,127,127,1);		/* color #1 */
}

.user_title.style01:before {
	top: 0;
	left: 0;
	border-width: 1.04em 0 0 1.04em;	/* padding #1 */
	border-radius: 1.04em 0 0 1.04em;	/* padding #1 */
}

.user_title.style01:after {
	top: 0;
	right: 0;
	border-width: 0 1.04em 1.04em 0;	/* padding #1 */
	border-radius: 0 1.04em 1.04em 0;	/* padding #1 */
}

/*** 藍色 ***/
.user_title.style01.blue .title {
	color: rgba(9,54,90,1);	/* #09365A;*/
	background: rgba(171,211,254,.2);
	border-color: rgba(9,54,90,.7);
}

.user_title.style01.blue:before,
.user_title.style01.blue:after {
	border-color: rgba(23,91,150,1);
}

/*** 紅色 ***/
.user_title.style01.red .title {
	color: rgba(143,0,0,1);	/* #8F0000; */
	background: rgba(255,214,214,.2);	/* #FFD6D6 */
	border-color: rgba(143,0,0,.7);	/* #8F0000 */
}

.user_title.style01.red:before,
.user_title.style01.red:after {
	border-color: rgba(172,22,22,1);	/* #AC1616 */
}

/*** 綠色 ***/
.user_title.style01.green .title {
	color: rgba(23,92,0,1);	/* #175C00; */
	background: rgba(207,255,191,.2);	/* #CFFFBF */
	border-color: rgba(23,92,0,.7);	/* #175C00;*/
}

.user_title.style01.green:before,
.user_title.style01.green:after {
	border-color: rgba(0,97,0,1);	/* #006100 */
}

/*** 橙色 ***/
.user_title.style01.orange .title {
	color: rgba(133,42,0,1);	/* #852A00; */
	background: rgba(255,222,189,.2);	/* #FFDEBD */
	border-color: rgba(255,165,0,1);	/* #FFA500 */
}

.user_title.style01.orange:before,
.user_title.style01.orange:after {
	border-color: rgba(255,165,0,1);	/* #FFA500 */
}

/*** 橙色 ***/
.user_title.style01.brown .title {
	color: rgba(112,37,0,1);	/* #702500; */
	background: rgba(245,234,234,.2);	/* #F5EAEA	*/
	border-color: rgba(112,37,0,1);	/* #702500; */
}

.user_title.style01.brown:before,
.user_title.style01.brown:after {
	border-color: rgba(102,26,0,1);	/* #661A00	*/
}

/***************************************
 前有 icon font，標題後有漸淡線條
 <h3 class="user_title style02">
	<span class="title"> ... </span>
 </h3>	
****************************************/
.user_title.style02 {
	position: relative;
	padding: 0;
	margin: 0 0 .7em;
	display: block;
    border-style: solid;
    border-width: 0;
    border-color: transparent; 
	overflow: hidden;
}

.user_title.style02 span.title {
	display: inline-block;
    border-style: solid;
    border-width: 0;
    border-color: transparent; 
}

.user_title.style02 span.title:before {
	font-family:'FontAwesome';
	content: '\f013';	/*** fa fa-cog ***/
	padding-right: .5em;
}

.user_title.style02 span.title:after {
	position: absolute; 
	content: "";
	display: inline-block;
	height: 1px;
	width: 80%;
	top: 50%;
	margin-left: .5em;
}

/*** 灰色 ***/
.user_title.style02.gray span.title,
.user_title.style02.gray span.title:before {
	color: rgba(89,89,89,1);	/* #5595959 */
}

.user_title.style02.gray span.title:after {
	background-image: -webkit-gradient(linear, 0 0, 100% 0, from( rgba(124,124,124,1) ), to( rgba(124,124,124,0)) ); 
	background-image: -webkit-linear-gradient(left, rgba(124,124,124,1), rgba(124,124,124,0) ); 
	background-image: -moz-linear-gradient(left, rgba(124,124,124,1), rgba(124,124,124,0) ); 
	background-image: -o-linear-gradient(left, rgba(124,124,124,1), rgba(124,124,124,0) );
}

/*** 藍色 ***/
.user_title.style02.blue span.title, 
.user_title.style02.blue span.title:before {
	color: rgba(23,91,150,1);	/* #175B96 */
}

.user_title.style02.blue.blue span.title:after {
	background-image: -webkit-gradient(linear, 0 0, 100% 0, from( rgba(23,91,150,1) ), to( rgba(124,124,124,0)) ); 
	background-image: -webkit-linear-gradient(left, rgba(23,91,150,1)), rgba(124,124,124,0) ); 
	background-image: -moz-linear-gradient(left, rgba(23,91,150,1), rgba(124,124,124,0) ); 
	background-image: -o-linear-gradient(left, rgba(23,91,150,1), rgba(124,124,124,0) );
}

/*** 紅色 ***/
.user_title.style02.red span.title ,
.user_title.style02.red span.title:before {
	color: rgba(172,22,22,1);	/* #AC1616 */
}

.user_title.style02.red span.title:after {
	background-image: -webkit-gradient(linear, 0 0, 100% 0, from( rgba(172,22,22,1) ), to( rgba(124,124,124,0)) ); 
	background-image: -webkit-linear-gradient(left, rgba(172,22,22,1)), rgba(124,124,124,0) ); 
	background-image: -moz-linear-gradient(left, rgba(172,22,22,1), rgba(124,124,124,0) ); 
	background-image: -o-linear-gradient(left, rgba(172,22,22,1), rgba(124,124,124,0) );
}

/*** 綠色 ***/
.user_title.style02.green span.title ,
.user_title.style02.green span.title:before {
	color: rgba(0,97,0,1);	/* #006100 */
}

.user_title.style02.green span.title:after {
	background-image: -webkit-gradient(linear, 0 0, 100% 0, from( rgba(0,97,0,1) ), to( rgba(124,124,124,0)) ); 
	background-image: -webkit-linear-gradient(left, rgba(rgba(0,97,0,1)), rgba(124,124,124,0) ); 
	background-image: -moz-linear-gradient(left, rgba(0,97,0,1), rgba(124,124,124,0) ); 
	background-image: -o-linear-gradient(left, rgba(0,97,0,1), rgba(124,124,124,0) );
}

/*** 棕色 ***/
.user_title.style02.brown span.title ,
.user_title.style02.brown span.title:before {
    color: rgba(102,26,0,1);	/* #661A00 */
}

.user_title.style02.brown span.title:after {
	background-image: -webkit-gradient(linear, 0 0, 100% 0, from( rgba(102,26,0,1) ), to( rgba(124,124,124,0)) ); 
	background-image: -webkit-linear-gradient(left, rgba(102,26,0,1)), rgba(124,124,124,0) ); 
	background-image: -moz-linear-gradient(left, rgba(102,26,0,1), rgba(124,124,124,0) ); 
	background-image: -o-linear-gradient(left, rgba(102,26,0,1), rgba(124,124,124,0) );
}


/***************************************
 標題有背景顏色，上下有框線
 <h3 class="user_title style03">
	<span class="title"> ... </span>
 </h3>	
****************************************/
.user_title.style03 {
	display: block;
	padding: .4em .5em .3em;
	margin: 0 0 .7em;
    border-style: solid;
	border-width: 4px 0 1px 0;
    border-color: transparent; 
	overflow: hidden;
}

.user_title.style03 span.title {
/*	display: inline-block; */
}

/*** 灰色 ***/
.user_title.style03.gray {
	border-top-color: rgba(127,127,127,.2);
	border-bottom-color: rgba(127,127,127,.5);
	background: rgba(227,227,227,1);	/* #E3E3E3 */
	color: rgba(69,69,69,1);	/* #454545 */

}

/*** 藍色 ***/
.user_title.style03.blue {
	border-top-color: rgba(23,91,150,.2);	/* #175B96 */
	border-bottom-color: rgba(23,91,150,.5);	/* #175B96 */
	background: rgba(171,211,254,1);	/* #ABD3FE */
	color: rgba(9,54,90,1);	/* #09365A	*/
}

/*** 紅色 ***/
.user_title.style03.red {
	border-top-color: rgba(172,22,22,.2);	/* #AC1616 */
	border-bottom-color: rgba(172,22,22,.5);	/* #AC1616 */
	background: rgba(255,214,214,1);	/* #FFD6D6 */
	color: rgba(143,0,0,1);	/* #8F0000	*/
}

/*** 綠色 ***/
.user_title.style03.green {
	border-top-color: rgba(0,97,0,.2);	/* #006100 */
	border-bottom-color: rgba(0,97,0,.5);	/* #006100 */
	background: rgba(207,255,191,1);	/* #CFFFBF */
	color: rgba(23,92,0,1);	/* #175C00 */
}
	
/*** 橙色 ***/
.user_title.style03.orange {
	border-top-color: rgba(255,165,0,.2);	/* #FFA500 */
	border-bottom-color: rgba(255,165,0,.5);	/* #FFA500 */
	background: rgba(255,222,189,1);	/* #FFDEBD */
	color: rgba(133,42,0,1);	/* #852A00 */
}

/***************************************
 左邊框 8px，其它邊框 1px
 <h3 class="user_title style04">
	<span class="title"> ... </span>
 </h3>	
****************************************/
.user_title.style04 {
	display: block;
	margin: 0 0 .5em;
}

.user_title.style04 .title {
	display: inline-block;
	padding: .4em .5em .3em;
    border-style: solid;
	border-width: 1px 1px 1px 8px;
	overflow: hidden;
}

.user_title.style04.blue .title {
	border-color: rgba(23,91,150,.5) rgba(23,91,150,.5) rgba(23,91,150,.5) rgba(23,91,150,1);
	color: rgba(9,54,90,1);	/* #09365A	*/
}

.user_title.style04.red .title {
	border-color: rgba(143,0,0,.5) rgba(143,0,0,.5) rgba(143,0,0,.5) rgba(143,0,0,1);
	color: rgba(143,0,0,1);	/* #8F0000	*/
}

.user_title.style04.green .title {
	border-color: rgba(23,92,0,.5) rgba(23,92,0,.5) rgba(23,92,0,.5) rgba(23,92,0,1);
	color: rgba(23,92,0,1);	/* #175C00 */
}

.user_title.style04.orange .title {
	border-color: rgba(133,42,0,.5) rgba(133,42,0,.5) rgba(133,42,0,.5) rgba(133,42,0,1);
	color: rgba(133,42,0,1);	/* #852A00 */
}

/***************************************
 同按鈕樣式，顏色設定同 cus_btn
 <h3 class="user_title style05">
	<span class="title"> ... </span>
 </h3>	
****************************************/
.user_title.style05 {
	display: block;
	margin: 0 0 .7em;
}

.user_title.style05 .title {
	display: inline-block;
	padding: .4em .5em .3em;
    border-style: solid;
	border-width: 1px;
	border-radius: 4px;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	-ms-border-radius: 4px;
	-o-border-radius: 4px;
}

/*************************************
 副標題
 <h4 class="sub_title">
 	<span class="title">...</span>
 </h4>	
*************************************/ 
.sub_title {
	margin-bottom: .5em;
}

.sub_title .title {
	display: inline-block;
	border: none;
	padding: 0 0 .188em 0;	/** .188em = 3px **/
}

.sub_title.blue .title {
	color: #175B96;
	border-color: #175B96;
}

.sub_title.red .title {
	color: #AC1616;
	border-color: #AC1616;
}

.sub_title.green .title {
	color: #006100;
	border-color: #006100;
}

.sub_title.brown .title {
	color: #661A00;
	border-color: #661A00;
}


/*************************
 訊息盒子
*************************/
.box {
	padding: 1em;
	margin-bottom: 1em;
	border-style: solid;
	border-width: 1px;
	border-color: rgba(127,127,127,.3);
	border-radius: 4px;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	-ms-border-radius: 4px;
	-o-border-radius: 4px;

	line-height: 1.2;
}

.box.blue.light {
	background-color: rgba(171,211,254,.4);	/* #ABD3FE */
	color: #09365A;				/* rgba(9,54,90,1) */
	border-color: #ABD3FE;
}
.box.blue.light a {
	color: #333;
}
.box.blue.light a:hover {
	color:  #AC1616;
}