@import url("reset.css");
@import url("preset.css");


@import url("item.css");












/*
@import url("main_desktop.css") only screen and (min-width: 1025px);
@import url("main_tablet.css") only screen and (min-width: 1024px);
@import url("main_mobile.css") only screen and (max-width: 767px);
*/
@media only screen and (min-width: 1025px) {
  body {
    width:1000px;
    margin:auto;
  }
}
/*
 目標寬度 1024px ~ 768px
 */
@media only screen and (max-width: 1024px) {
  body {
    width:760px;/* Half Full HD 1920/2=960 */
    margin:auto;
  }
}
/*
 目標寬度 768px ~ 320px
 單欄 滿版
 */
@media only screen and (max-width: 767px) {
  body {
    width:auto;
    margin:auto;
  }
  #menubar wbr{
    display:block;
  }
  
}





















/* 預設鏈結格式 */
a:link,
a:visited{
  color:#ccc;
  text-decoration:none;
}
a:link:hover,
a:visited:hover{
  color:#fff;
  text-decoration:none;
}












/* 預設文字格式 */
body{
  font-size:12px;
  line-height:1;
  color:#999; /* 注意要讓黑底與白底都看的見 */
}













body > header,
body > nav,
body > section,
body > footer{
  width:100%;
}











body{
  background:black no-repeat fixed center center;
  background-size:contain;
}

  body > header{
    
    -background-image:linear-gradient(to bottom, rgba(255,255,255,0.2), rgba(0,0,0,0));
  }
    body > header > h1{
      font-size:50px;
      line-height:64px;
      letter-spacing:0.1em;
      text-shadow:1px 2px 8px #ccc;
      background:url("main/bg_bayuyuan_seal_64x64.png") no-repeat center left;
      margin:24px auto;
      width:64px;
      height:64px;
      overflow:hidden;
      text-indent:100%;
      white-space:nowrap;
    }
      body > header > h1 > a{
        display:block;
        color:#eee !important;
        text-decoration:none !important;
        padding:0 0 0 1.5em;
      }
        body > header > h1 > a:hover{
          color:#fff !important;
        }
.content body > section > main {
    float: none;
    width: auto;
}




























/* 選單列 */
#menubar{
  display:table;
  font-size:20px;
  -padding:20px 0 40px 0;
  margin:48px 0;
}
  #menubar > ul{
    display:table-row;
    padding:0;
    margin:0;
    width:100%;
  }
    #menubar > ul > li {
      display:table-cell;
      text-align:center;
    }
      #menubar > ul > li > a{
        color:#985;
        line-height:32px;
        vertical-align:middle;
      }
        #menubar > ul > li > a:hover{
          color:#c90 !important;
          text-decoration:none;
          text-shadow:0 0 0.5em rgba(100%,100%,100%,0.9);
        }
.content #menubar > ul > li > a {
  color:gray;
  
}

#about #menubar > ul > li.about > a,
#news #menubar > ul > li.news > a,
#item #menubar > ul > li.item > a,
#jade #menubar > ul > li.jade > a,
#article #menubar > ul > li.article > a,
#guestbook #menubar > ul > li.guestbook > a,
#contact #menubar > ul > li.contact > a{
  color:#da2;
  font-size:larger;
  text-shadow:0 0 0.5em rgba(100%,100%,100%,0.9);
}









































body > section > main > article{
  margin:48px 0;
}
  body > section > main > article a.header{
    display:block;
    width:auto;
    margin:40px auto;
    text-align:center;
  }
  body > section > main > article a.header:hover{
    text-decoration:none;
  }
    body > section > main > article a.header img{
      display:block;
      margin:0 auto;
      max-width:100%;
      max-height:480px;
      border:1px solid #666;
      border-width:1px 0;
    }
    body > section > main > article a.header p.desc{
      font-size:smaller;
      color:#666;
    }
    
  body > section > main > article > h1{
    color:#eee;
    font-size:36px;
    font-weight:normal;
    letter-spacing:0.2em;
    margin:0 0 20px 0;
    padding:0;
  }
  
ul.list > li{
  display:block;
  padding:10px;
}
ul.list > li > a{
  display:block;
  opacity:0.9;
  text-decoration:none;
}
ul.list > li > a:hover{
  outline:1px solid #111;
  opacity:1;
  text-decoration:none;
}
ul.list > li > a h2 {
  margin:5px 20px;
}
ul.list > li > a .thumbnail {
  width:128px;
  text-align:center;
}
ul.list > li > a .thumbnail img{
  max-width:128px;
  max-height:128px;
}
ul.list > li > a  p{
  margin:5px 20px;
}
/* 以下未確定 */








#search{
  position:absolute;
  top:0;
  left:0;
  width:100%;
}
  #search fieldset{
    border:0;
    width:1024px;
    margin:0 auto;
    text-align:right;
  }
  #search input{
    display:inline;
    border:0;
    margin:0;
    padding:0;
    width:10em;
    transition:width 0.5s;
  }
  #search input:focus{
    width:20em;
  }
  #search button{
    display:inline;
    border:0;
    margin:0;
    padding:0;
    vertical-align:top;
  }

select{
    background: none repeat scroll 0 0 transparent;
    border: medium none;
    border-radius: 2px;
    font-family: arial,sans-serif;
    font-size: 13px;
    height: 30px;
    margin: 0;
    outline: medium none;
    padding: 6px;
    width: 120px;
}
/* 主架構 */
        body > section > main > article > footer{
          padding:10px 20px;
          text-align:right;
        }
    
      body > section > aside > h2{
        background:#033;
        font-size:20px;
        font-weight:normal;
        color:#ccc;
        margin:0;
        padding:3px;
      }

  
#locbar > ul{
  display:table;
}
  #locbar > ul > li {
    display:table-cell;
    text-align:center;
  }
  #locbar > ul > li + li:before {
    content:"/";
    padding:0 0.5em;
  }

/* 物品清單 */

ul.item{
  padding:0 0 0 60px;
}
  ul.item > li{
    display:inline-block;
    width:24%;
    height:240px;
    margin:auto;
    overflow:hidden;
    text-align:center;
  }
  ul.item > li > a{
    display:block;
    color:#b80;
    text-decoration:none;
    text-align:left;
  }
  ul.item > li > a:hover{
    color:#b80;
    text-decoration:none;
  }
  ul.item > li > a:active {
    outline:0
  }
  ul.item > li > a > h2{
    margin-top:0;
    font-size:18px;
    font-weight:normal;
    letter-spacing:0.1em;
    line-height:1.2;
    text-align:center;
  }
  ul.item p{
    display:none;
  }
  ul.item .img-wrapper{
    display:block;
    width:200px;
    height:200px;
    line-height:200px;
    margin:auto;
    overflow:hidden;
    text-align:center;
  }
  ul.item img{
    max-width:200px;
    max-height:200px;
    margin:auto;
    vertical-align:middle;
    text-align:center;
    line-height:200px;
    backface-visibility:hidden;
    transition: all 0.4s ease 0s;
  }
  ul.item img:hover{
    transform: scale(1.05);
    z-index: 0;
  }
  
a#back-to-top{
  position:fixed;
  right:0;
  top:32px;
  display:block;
  width:83px;
  height:32px;
  padding:0;
  border-radius:2px 0 0 2px;
  text-align:center;
  vertical-align:middle;
  line-height:32px;
  color:#eee;
  background-color:#999;
  overflow:hidden;
  font-size:15px;
  opacity:0.2;
}
a#back-to-top:hover{
  opacity:1;
}


/*
main.php
*/














body > footer > ul{
  text-align:center;
}
body > footer > ul > li{
  display:inline;
  
  margin-left:0px;
  margin-right:0px;
  font-size:14px;
}
ul.button{
  display:block;
  margin:0;
  padding:20px 0 0 40px;
}
  ul.button li{
    display:block;
    float:left;
    
  }
  ul.button a{
    margin:3px 5px;
    padding:3px 5px;
    border-radius:3px;
  }


.product section p{
  margin:10px 20px;
}


blockquote{
  border-radius:9px;
  margin: 20px;
  padding:10px 60px 10px 60px;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.5);
  position:relative;
}
  blockquote:before,
  blockquote:after{
    color: #eee;
    display: block;
    font: italic 120px/1 Cochin,Georgia,"Times New Roman",serif;
    position:absolute;
      z-index:0;
      
  }
  blockquote:before {
      content: "“";
      margin-left:0;
      height:0;
      top:0;
      left:0;
  }
  blockquote:after {
      content: "”";
      margin:0;
      text-align:right;
      top:0;
      right:20px;
  }
  blockquote a{
    color:#069;
  }
  blockquote.guest{
    margin-right: 50px;
    border-right: 10px solid #ccc;
  }
  blockquote.admin{
    margin-left: 50px;
    border-left: 10px solid #ccc;
  }
  blockquote.admin footer{
    text-align:right;
  }
  
/*admin*/

table.list{
  -border-collapse:separate;
  -border-spacing: 1px;
  width:100%;
  background-color:#111;
  border:2px solid #000;
  border-radius:5px;
  overflow:hidden;
  box-shadow:0 0 10px #666;
}
  table.list th,
  table.list td{
    padding:5px;
  }
  table.list > thead th{
    background-color: #333;
    background-image: linear-gradient(to bottom, #555, #333);
  }
  table.list > thead > tr > th,
  table.list > thead > tr > td{
    padding:10px;
  }
  table.list > tbody > tr:nth-child(odd){
    background-color:#222;
  }
  table.list > tbody > tr:hover{
    background-color:#444;
  }

.admin fieldset{
  background-color:#111;
  border-radius:5px;
  padding:5px;
}
.admin fieldset h1{
  font-size:30px;
  color:#fff;
  margin:5px 0 0 0;
  padding:0 0 10px 10px;
  -border-bottom:1px solid #333;
}

.admin .buttons{
  margin-top:20px;
  padding-top:10px;
  clear:both;
}
.admin .buttons:after{
  content:' ';
  display:table;
  clear:both;
}

.admin a.button,
.admin button{
  padding:5px;
  background-color:#666;
  background-image: linear-gradient(to bottom, #666, #333);
  border-radius:5px;
  border:1px solid #333;
  color:#ddd;
}
.admin a.button:hover,
.admin button:hover{
  padding:5px;
  background-color:#666;
  background-image: linear-gradient(to bottom, #999, #666);
  border:1px outset #333;
  color:#fff;
  text-decoration:none;
}
.admin a.button:active,
.admin button:active{
  padding:5px;
  background-color:#666;
  background-image: linear-gradient(to bottom, #777, #555);
  border:1px inset #333;
  color:#eee;
  text-decoration:none;
}
.admin a.button.prev,
.admin button.prev{
  float:left;
  margin-right:5px;
}
.admin a.button.next,
.admin button.next{
  float:right;
  margin-left:5px;
}



.admin form.delete .description{
  display:none;
}

table.list .no_content{
  height:6em;
}







.top-round-shadow{
  padding:20px;
  border-radius:4px;
  background-image: linear-gradient(to bottom, #090909, #0c0c0c);
  background-color: #0c0c0c;
  box-shadow: 0px -10px 20px #111;
}





ul.news{

}
ul.news > li{
  list-style:none;
  margin-top:0px;
  margin-bottom:0px;
  border:1px solid #111;
  border-width: 0;
  
}
ul.news > li > a{
  display:block;
  padding:10px; 
}
ul.news > li > a:hover{
  color:#fff;
  background-color:#333;
}
ul.news li:nth-child(odd) a{
  background-color:#090909;
}
ul.news li:nth-child(odd) a:hover{
  color:#fff;
  background-color:#333;
}




p.copyright {
  text-align: center;
}

/*
 適用 大於1024*768px
 @media only screen and (min-width: 1024px), (min-device-width: 1024px) 
 */
#rotating_billboard{
  display:block;
  position:relative;
  width:100%;
  height:480px;
  max-height:100%;
  overflow:hidden;
  border:1px solid #333;
  border-width:1px 0;
  padding:12px 0;
}
  #rotating_billboard > ul{
    display:block;
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:100%;
    margin:0;
    padding:0;
    text-align:center;
  }
    #rotating_billboard > ul > li{
      display:block;
      position:absolute;
      left:0;
      top:0;
      width:100%;
      height:100%;
      margin:auto;padding:0;
    }
      #rotating_billboard > ul > li > a{
        display:block;
        position:relative;
        left:0;
        top:0;
        width:100%;
        height:100%;
        overflow:hidden;
        background-position: center center;
        background-repeat: no-repeat;
        background-size:cover;
      }
      #rotating_billboard > ul > li > a > img{
        max-width:100%;
        max-height:100%;
      }

#rotating_billboard_buttons{
  position:relative;
  left:0;
  top:0;
  width:100%;
  height:100%;
}
  #rotating_billboard_buttons > a{
    display:block;
    width:1em;
    margin-top:-0.5em;
    position:absolute;
    top:50%;
    color:white;
    color:rgba(255,255,255,0.7);
    font-size:2in;
    font-family:"Impact", "Charcoal", sans-serif
  }
    #rotating_billboard_buttons > a:hover{
      cursor:pointer;
      color:white;
      text-shadow:black 0px 0px 8px;
    }
    #rotating_billboard_buttons > a.prev{
      left:0;
      text-align:left;
    }
    #rotating_billboard_buttons > a.next{
      right:0;
      text-align:right;
    }

#rotating_billboard_marks{
  display:table;
  -height:1em;
  margin:0 auto;
  position:absolute;
  bottom:1em;
  left:0;right:0;
  text-align:center;
  list-style:inside disc;
}
  #rotating_billboard_marks > span{
    display:list-item;
    float:left;
    width:1em;
    height:1em;
    margin:0 auto;
    color:white;
    font-size:30px;
  }
/*以下20151219新增*/

.article.title{
    font-family: "標楷體", DFKai-sb, BiauKai;
    font-size:48px;
    color: DarkGoldenrod;
    text-shadow: 0px 2px 3px #555;
    letter-spacing:2px;
}
.article.summary{
  width:80%;
  text-align:left;
  font-size:16px;
  margin:4px auto;
}

#article .list li{
  margin-bottom:32px;
}

/* 2016-06-16 右下角 印 */
.floating-seal{
  display:block;
  position:fixed;
  right:16px;
  bottom:16px;
  width:64px;
  height:64px;
  background:url("../img/bg_bayuyuan_seal_64x64_silver.png") no-repeat right bottom;
}

.float-cols{
  display:block;
  clear:both;
}
  .float-cols:after{
    display:table;
    content:"";
    clear:both;
  }
.float-col{
  display:block;
  float:left;
}