/* *代表網頁中所有的元素 */
/* 設計 reset 重置歸零 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  /* 傳統的 box-sizing 是 content-box, 在寬度之外擴展出 padding、border */
  /* 新型的 box-sizing 是 border-box, 在寬度之內縮入 padding、border */
}

body {
  background-color: #fff;  /* 整頁背景顏色 */
  color: #333;             /* 整頁文字的預設顏色 */

  font-family: Arial, Helvetica, sans-serif;  /* 字體: 預設無襯線字體 */
  letter-spacing: 1px;       /* 可以預設整頁文字的字元間距: 1像素 */
  line-height: 1.5;          /* 可以預設整頁文字的一行高度: 1.5倍 */

  /* 以下是為了搭配 footer 的設計 ============================= */
  /* 因為當頁面內容不多時, 希望 footer 區域靠在頁面下方 */
  min-height: 100vh;         /* 最小高度: 相對螢幕畫面 100% */
  /* 為了配合 footer 需要設計成 position:absolute 絕對領域的定位 */
  position: relative;        /* 定位模式: 相對性 */
  /* 因為 footer 區域會向前浮出, 造成有些內容會在 footer 的後面 */
  padding-bottom: 100px;     /* 設計 body 下方留白 100像素 */
}

/* 
  CSS設計順序的建議參考： 
  (1) 背景：圖、色
  (2) 大小：寬、高
  (3) 邊界、距離
  (4) 內容：文字、插圖
  (5) 特殊編排、定位
*/

.container {
  /* background-color: rgba(0, 51, 255, 0.4);  建議先設計背景色, 方便觀察 */
  /* width: 100%;      段落式區域寬度預設 100% */
  /* width: 1200px;    這是固定寬度 */

  max-width: 1200px;   /* 限定最大寬度到1200px */
  margin-left: auto;   
  margin-right: auto;
  /* 段落式區域運用margin左右自動平均分配的方推動到置中 */
}

/* header 區域 ======================================================== */
header {
  background-image: url(../images_tea/header_bg.png);
  height: 260px;       /* 配合背景影像, 設定高度 */
}

header .container {
  background-image: url(../images_tea/header.png);
  background-repeat: no-repeat;
  background-position: right top;
  height: 260px;       /* 配合背景影像, 設定高度 */

  padding-top: 30px;   /* 配合 LOGO 需要的位置, 上方保留空間 */
  position: relative;  /* 定位方式: 相對的 */
  /* 上行是為了配合 nav 需要 position:absolute 絕對領域的定位 */
}

.logo {
  /* LOGO 的上方需要留白距離 */
  /* margin-top: 20px; */
  /* margin 有特殊狀況, 請慎用 */
  /* margin-top 指的是與上方物件的距離 */
  /* 沒有上方物件時, 會有狀況, margin 空間會與父層合併 */
  /* 就好像父層將 margin 搶去了 */
}

/* nav 區域 ======================================================== */
nav {
  /* background-color: rgba(255, 105, 180, 0.5);  設定背景顏色方便觀察 */
  /* margin-top: 40px;   這也算是一種設計的方法, 但設計的彈性不好 */
  /* 為了讓 nav 獨立不受周圍物件的推動影響, 設定為 absolute 絕對性領域的定位 */
  position: absolute;   /* 定位: 絕對性領域 */
  left: 0;              /* 距離左側: 0距離 */
  /* top: 158px; */     /* 可以設定到上方的距離 */
  bottom: 59px;         /* 也可以設定到下方的距離 */
}

nav a {
  /* 先設計背景影像, 方便決定一個按鈕的寬度、高度 */
  /* background-image: url(../images_tea/btn_hover.png); */
  width: 135px;
  height: 41px;
  /* 因為inline物件不能設計寬高 */
  /* 每個按鈕 (1)需要在同一行 inline (2)需要有 block 的能力 */
  display: inline-block;    /* 所以設定 顯示模式: inline-blick */
  color: #fff;            /* 文字顏色: 白色 */

  text-decoration: none;    /* 設定文字裝飾線條: 沒有 */
  text-align: center;       /* 設定內容的對齊: 置中 */
  font-size: 18px;          /* 設定文字大小: 18像素 */
  padding-top: 3px;         /* 設定上方留白空間: 3像素 */
}

/* 當<a>按鈕擁有 active 名稱時, 當按鈕 :hover 滑鼠滑入時, 同時設定這二種 */
nav a.active,
nav a:hover {
  background-image: url(../images_tea/btn_hover.png);
}

/* main 區域 ========================================================== */
main {
  /* float浮動排版會有後遺症: 也就是浮貼的物件下方會漂起來 */
  /* 如果有同層後方的元素不浮動了, 可以設定清除結束浮動 */
  /* clear: both; */
  /* 如果子元素皆為float浮動時, 則由父層元素設定以下二者選一 */
  overflow: auto;
  overflow: hidden;
}
main .container {
  /* background-color: rgba(0, 51, 255, 0.4); */
  min-height: 300px;    /* 目前這個區域沒有內容, 先設定最小的基本高度 */
}

main aside {
  float: left;  /* 為了左右分欄排版, 設定 浮動: 靠左 */
  width: 20%;
}

main aside img {
  width: 100%;          /* 設定圖片的寬度: 100% 符合所在範圍 */
  height: auto;         /* 設定高度: 依原圖寬高比例自動計算 */
  border-radius: 7px;   /* 設定邊框圓角: 7像素 */
  margin-bottom: 10px;  /* 設定圖片下方留白距離 */
}

main .content {
  float: right;  /* 為了左右分欄排版, 設定 浮動: 靠右 */
  width: 77%;
  padding-bottom: 30px;  /* 設定這個區域的下方留白邊界 */
}

main .content h1 {
  background-image: url(../images_tea/h1.png);
  background-repeat: no-repeat;
  background-position: right bottom;

  /* 由於 h1 是段落式區塊, 預設寬度是100%, 所以背景在最右邊的位置 */
  /* 那麼設定成 inline-block, 寬度則為內容文字的範圍, 背景就可以在文字的右下方了 */
  display: inline-block;
  /*
  合併縮寫的方式
  padding: 四周一致;
  padding: 上下一樣  左右一樣;
  padding: 上  右  下  左;
  padding: 上  右左一樣  下;
  */
  padding: 0 120px 25px 0;
  font-size: 1.7em;
  margin-bottom: 30px;
}

/* footer 區域 ======================================================== */
footer {
	background-image: url("../images_tea/footer.png");
	height: 55px;         /* 配合背景影像, 設定高度 */

	color: #E5F3DF;     /* 文字顏色 */
	text-align: center;   /* 內容對齊: 置中 */
	padding-top: 1em;     /* 文字上方留白空間 */
	
  /* 當一頁內容不太多時, 為了讓 footer 靠在頁面下方 */
	position: absolute;   /* 設定定位模式: 絕對領域的定位 */
	width: 100%;          /* 設定寬度: 100% */
	bottom: 0;            /* 設定距離下方: 0距離 */
}