@charset "utf-8";
body {
	font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
	margin: 0;
	padding: 0;
	color: #000;
}

/* ~~ 這個固定寬度的容器環繞著所有其他 Div ~~ */
.container {
	width: 942px; /* 兩側的自動值與寬度結合後，版面便會置中對齊 */
	overflow: hidden; /* 這個宣告可以讓 .container 辨識內部浮動的欄結束於何處以及包含欄的位置 */
	margin-top: 0;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
	padding-left: 30px;
	padding-right: 30px;
}

/* ~~ 這是版面的欄位。~~ 

1) 欄位間隔只會置於 Div 的頂端或底部。這些 Div 內的元素在兩側會有欄位間隔，可讓您不需進行「方塊模型計算」。請記住，如果對 Div 本身加入任何側邊的欄位間隔或邊框，在計算「總」寬度時，就會將這些加入您定義的寬度。您也可以選擇移除 Div 中元素的欄位間隔，然後在其中放置沒有寬度的第二個 Div，並依設計所需放置欄位間隔。

2) 尚未為這些欄位提供邊界，因為它們全都是浮動的。如果必須加入邊界，請避免將其放在浮動方向的一側 (例如將右邊界放在設定為向右浮動的 Div 上)。在許多時候，您都可以改用欄位間隔。對於必須違反此規則的 Div，您應該在 Div 的規則中加入 "display:inline" 宣告，以防止某些版本的 Internet Explorer 將邊界加倍。

3) 因為可在文件中多次使用類別 (也可對單一的元素套用多個類別)，所以已為欄位指定類別名稱，而非 ID。例如，您可在必要時將兩個側邊列 Div 堆疊起來。如有需要，也可以將這些名稱輕鬆地變更為 ID (只要您在每份文件中只使用一次)。

4) 如果想要將導覽放在右方而非左方，只要將這些欄設定為往反方向浮動 (全部往右，而非全部往左)，它們就會以相反順序呈現。您不需要在 HTML 原始碼中移動 Div。

*/
.sidebar1 {
	float: left;
	width: 231px;
	padding-bottom: 10px;
	margin-top: 10px;
	margin-left: 5px;
}
.content {
	width: 448px;
	float: left;
	padding-top: 10px;
	padding-right: 0;
	padding-bottom: 10px;
	padding-left: 0;
	margin-right: 12px;
	margin-left: 13px;
}
.content02 {
	width: 684px;
	float: left;
	padding-top: 10px;
	padding-right: 0;
	padding-bottom: 10px;
	padding-left: 0;
	margin-right: 0px;
	margin-left: 20px;
}
.sidebar2 {
	float: left;
	width: 231px;
	padding-top: 10px;
	padding-right: 0;
	padding-bottom: 10px;
	padding-left: 0;
}

/* ~~ 其他 float/clear 類別 ~~ */
.fltrt {  /* 這個類別可用來讓元素在頁面中浮動，浮動的元素必須位於頁面上相鄰的元素之前。 */
	float: right;
	margin-left: 8px;
}
.fltlft { /* 這個類別可用來讓元素在頁面左方浮動，浮動的元素必須位於頁面上相鄰的元素之前。 */
	float: left;
	margin-right: 8px;
}
.clearfloat { /* 這個類別可放置在 <br /> 或空白的 Div 上，當做接在 #container 內最後一個浮動 Div 後方的最後一個元素 (如果已移除 .container 上的 overflow:hidden) */
	clear:both;
	height:0;
	font-size: 1px;
	line-height: 0px;
}
/* ====================================
     Button structure 按鈕用的
===================================== */

.zocial,
a.zocial {
	border: 1px solid #777;
	border-color: rgba(0,0,0,0.2);
	border-bottom-color: #333;
	border-bottom-color: rgba(0,0,0,0.4);
	color: #fff;
	-moz-box-shadow: inset 0 0.08em 0 rgba(255,255,255,0.4), inset 0 0 0.1em rgba(255,255,255,0.9);
	-webkit-box-shadow: inset 0 0.08em 0 rgba(255,255,255,0.4), inset 0 0 0.1em rgba(255,255,255,0.9);
	box-shadow: inset 0 0.08em 0 rgba(255,255,255,0.4), inset 0 0 0.1em rgba(255,255,255,0.9);
	cursor: pointer;
	display: inline-block;
	font: bold 100%/2.1 "Lucida Grande", Tahoma, sans-serif;
	padding: 0 .95em 0 0;
	text-align: center;
	text-decoration: none;
	text-shadow: 0 1px 0 rgba(0,0,0,0.5);
	white-space: nowrap;
	-moz-user-select: none;
	-webkit-user-select: none;
	user-select: none;
	position: relative;
	-moz-border-radius: .3em;
	-webkit-border-radius: .3em;
	border-radius: .3em;
}

.zocial:before {
	content: "";
	float:left;
	border-right: 0.075em solid rgba(0,0,0,0.1);
	margin: 0 0.5em 0 0;
	padding: 0 0.5em;
	text-align: center;
	-moz-box-shadow: 0.075em 0 0 rgba(255,255,255,0.25);
	-webkit-box-shadow: 0.075em 0 0 rgba(255,255,255,0.25);
	/* box-shadow: 0.075em 0 0 rgba(255,255,255,0.25); */
	-moz-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
	font-smoothing: antialiased;
	 padding-top:5px; height:28px;
}

.zocial:active {outline: none; /* outline is visible on :focus */}

.zocial:hover,.zocial:focus {color: #fff;}



.zocial.green { background-color: #60af00;}
.zocial.green:before { content:url(../images/profile-user.png);}

.zocial.orange { background-color: #ff7f25;}
.zocial.orange:before{ content:url(../images/icon.png);}


.zocial.blue { background-color: #3178bd;}
.zocial.blue:before{ content:url(../images/menu.png);}