@charset "utf-8";

/* Common Styles */
body { background: #f9fafa; color: #222; margin: 0px; padding: 0px; text-align: center;}
h1,h2,h3,h4,h5,h6,p,ol,ul,li,dl,dt,dd,td,th { margin: 0px; padding: 0px; font-size: 10pt; font-weight: normal; font-family: sans-serif; line-height: 1.4em;}
input,textarea { font-size: 10pt;}
p { margin-bottom: 1em;}
li { margin-left: 20px;}
img { border: 0px;}
hr { display: none;}
.hide { display: none;}
.clear { height: 1px; clear: both;}
.clearFloat { zoom: 100%;}
.clearFloat:after { content: "."; display: block; clear: both; height: 1px; visibility: hidden;}
a:link,a:visited { color: #1076a1; text-decoration: underline;}
a:hover { color: #f40000; text-decoration: none;}

/* Containers */
.container { width: 900px; margin: 0 auto; padding: 15px 0px; text-align: left;}
.container:after { content: "."; display: block; height: 1px; clear: both; visibility: hidden;}

/* Header */
#header-text { background: #72903f;}
#header-text h1 { width: 900px; margin: 0 auto; font-size: 11px; color: #fff; line-height: 20px; text-align: right;}
#page-index #header { background: url(../images/bg_main.jpg) repeat-x; margin-bottom: 5px;}
#page-index #header .inner { width: 900px; height: 360px; margin: 0 auto; background: url(../images/bg_tophead.jpg) no-repeat 0px 239px; position: relative;}
#page-index #header .inner h1 { width: 457px; height: 133px; position: absolute; top: 96px; left: 0px; background: url(../images/sitelogo.jpg) no-repeat left top; line-height: 999px; overflow: hidden;}
#page-index #header .inner h1 a { display: block; width: 457px; height: 133px;}
#page-index #header .inner .photo-flash { position: absolute; left: 480px; width: 416px; height: 323px; margin-top: 29px; /*background: url(../images/bg_flash.jpg) no-repeat;*/}
#pages #header { background: url(../images/bg_pageheader.jpg) repeat-x left top; height: 160px;}
#pages #header .inner { width: 900px; height: 160px; margin: 0 auto; background: url(../images/bg_pageshead.jpg) no-repeat 0px 124px;}
#pages #header .inner h1 { width: 242px; height: 124px; float: left; background: url(../images/sitelogo_pages.jpg) no-repeat left top; line-height: 999px; overflow: hidden;}
#pages #header .inner h1 a { display: block; width: 242px; height: 124px;}
#pages #header .inner .page-image { width: 640px; padding-left: 8px; height: 160px; float: right; background: url(../images/bg_pageimage.jpg) no-repeat left top;}

/* Footer & Footer navigation */
#footer-nav { clear: both; background: url(../images/bg_footnav.jpg) repeat-x left bottom #eefbeb; padding: 10px 0px 20px 10px;}
#footer-nav p { width: 900px; margin: 0 auto; text-align: left; font-size: 10px; line-height: 1.8em;}
#footer-nav p a { color: #444;}
#footer { padding-bottom: 15px;}

/* Main Navigation */
#page-index #nav { clear: both; background: url(../images/bg_nav.jpg) repeat-x left top; height: 74px;}
#pages #nav { width: 150px; margin-left: 35px; padding-left: 5px; }
#page-index #nav ul { border-top: 5px solid #a6ba83; border-bottom: 5px solid #a6ba83; width: 900px; height: 55px; margin: 0 auto;}
#pages #nav ul { margin-bottom: 10px; padding-left: 0px; width:150px;}
#pages #nav li { margin: 0px; padding: 0px; width: 150px; }
#nav ul.main-pages li { width: 150px; height: 55px; list-style-type: none; margin-left: 0px; padding-left: 0px;}
#page-index #nav ul.main-pages li { float: left; }
#nav ul.main-pages li a { display: block; width: 150px; height: 55px; text-decoration: none; text-indent: -99999px; }
#nav li.n01 a { background: url(../images/nav_gallery.jpg) no-repeat;}
#nav li.n02 a { background: url(../images/nav_cocoblog.jpg) no-repeat;}
/*#nav li.n03 a { background: url(../images/nav_bfmap.jpg) no-repeat;}*/
#nav li.n03 a { background: url(../images/nav_event.jpg) no-repeat;}
#nav li.n04 a { background: url(../images/nav_bbs.jpg) no-repeat;}
#nav li.n05 a { background: url(../images/nav_goods.jpg) no-repeat;}
/*#nav li.n05 a { background: url(../images/nav_supports.jpg) no-repeat;}*/
#nav li.n06 a { background: url(../images/nav_coco.jpg) no-repeat;}
#nav li.n01 a:hover { background: url(../images/nav_gallery_ov.jpg) no-repeat;}
#nav li.n02 a:hover { background: url(../images/nav_cocoblog_ov.jpg) no-repeat;}
/*#nav li.n03 a:hover { background: url(../images/nav_bfmap_ov.jpg) no-repeat;}*/
#nav li.n03 a:hover { background: url(../images/nav_event_ov.jpg) no-repeat;}
#nav li.n04 a:hover { background: url(../images/nav_bbs_ov.jpg) no-repeat;}
#nav li.n05 a:hover { background: url(../images/nav_goods_ov.jpg) no-repeat;}
/*#nav li.n05 a:hover { background: url(../images/nav_supports_ov.jpg) no-repeat;}*/
#nav li.n06 a:hover { background: url(../images/nav_coco_ov.jpg) no-repeat;}
#pages #nav ul.other-pages li { list-style-type: none; background: url(../images/icon_gold_s.jpg) no-repeat 0px 0px; margin-left: 0px; padding: 0px 10px 0px 25px; line-height: 20px; margin-bottom: 8px;width:125px;}
#pages #nav ul.other-pages li a { color: #333;}

/* Top page */
#page-index .container { padding-bottom: 0px;}
#page-index #main { width: 640px; float: left; padding: 0 20px;}
#page-index #main p { padding-left: 15px;}
#page-index #main .information { margin-left: 30px;}
#page-index #main .information th { white-space: nowrap; color: #bf4800; vertical-align: top; padding-right: 1em; border: 0px; font-weight: normal;}
#page-index #main .information td { vertical-align: top; padding-bottom: 10px; border: 0px; background: none;}
#page-index #main th { background: none;}
#page-index #main #about-cocolife { margin-left: 30px; padding-bottom: 30px;}
#page-index #main #about-cocolife .cover { width: 180px; float: left;}
#page-index #main #about-cocolife .cover img { border: 1px solid #999;}
#page-index #main #about-cocolife .text { width: 420px; float: right;}
#page-index #main #about-cocolife:after { content: "."; display: block; height: 1px; clear: both; visibility: hidden;}
/* \*/ * html #page-index #main #about-cocolife { height: 1%;} /* */
#page-index #main #about-cocolife h1 { font-weight: bold; font-size: 1.1em;}
#page-index #main #about-cocolife h2 { font-weight: bold; margin-left: 0px;}
#page-index #main #about-cocolife ul { margin-left: 0px;}
#page-index #side { width: 220px; float: right;}
#page-index #side .post-button { margin: 0 0 5px 0;}
#page-index #side .box { background: #fff; padding: 10px; margin-bottom: 20px; color: #333; border: 1px solid #749530;}
#page-index #side .box dd { margin-bottom: 5px;}
#page-index #side .rss-list li { background: url(../images/icon_rss.jpg) no-repeat left top; padding-left: 25px; margin: 0px 0px 8px 0px; list-style-type: none;}
#page-index #side .rss-list li a { color: #333;}
#top-banners { width: 900px; margin: 0 auto; text-align: left; padding-bottom: 10px;}
#cocolife-description { margin-bottom: 10px; margin-left: 30px;}
#company-introduce { width: 900px; margin: 0 auto; text-align: left; }
#company-introduce .inner { padding: 10px 25px;}
#company-introduce .company-indiv { width: 388px; float: left; border: 1px solid #e2e2e2; padding: 5px; background: url(../images/bg_companyintro.jpg) repeat-x left bottom #fff; margin-bottom: 20px;}
#company-introduce .company-indiv h3 { font-size: 12pt;}
#company-introduce .company-indiv .left { width: 258px; float: left;}
#company-introduce .company-indiv .right { width: 120px; float: right;}
#company-introduce .box-padding { margin-right: 30px;}
#company-introduce .clear { font-size: 1px; height: 1px;}

/* Other Pages Common */
#pages #main { width: 640px; float: right; }
#pages #side { width: 242px; float: left;}
#pages .container {background: url(../images/bg_pagesnav.jpg) repeat-y 35px 0px; }
#pages .sub-header { background: url(../images/icon_header.jpg) no-repeat left center; padding: 5px 0px 5px 34px; font-size: 1.2em; font-weight: bold; color: #ca790d; margin-bottom: 10px;}
#pages .sub-header2 { background: url(../images/icon_header.jpg) no-repeat left center; padding-left: 24px; font-size: 1.1em; font-weight: bold; color: #ca790d; margin-bottom: 10px;}
#pages .note { font-size: 0.8em; color: #666;}
#pages .page-name { width: 640px; height: 54px; text-indent: -99999px;}
#pages .trackbacks { margin-bottom: 20px;}
#pages .entry-body dt {font-weight: bold;}
#pages .entry-body dd { margin-left: 30px; margin-bottom: 10px;}
.ratingblock { margin-bottom: 20px;}
#topic-path { font-size: 9pt;}
.container table { border-collapse: collapse; margin-bottom: 20px;}
.container th { color: #55780f; font-weight: bold; padding: 3px; background: #f1fae0; vertical-align: top; border: 1px solid #466310;}
.container td { padding: 3px; vertical-align: top; background: #fff; border: 1px solid #466310;}
.container .required { color: #cc0000;}
.error { padding: 5px 5px 5px 45px; color: #d00; background: #f8d1d1; border: 1px dotted #480000; margin-bottom: 20px; min-height: 40px; font-size: 10pt;}
.error2 { color: #d00; font-weight: bold; line-height: 36px; margin: 0;}
.ask { color: #b0b000; font-weight: bold; font-size: 1.1em;}
.ptop { clear: both; padding-top: 20px; text-align: right;}

.container .article-nav { border: 1px solid #55780F; padding: 5px 10px; background: #F1FAE0; margin-bottom: 10px;}
.container .article-nav p { margin: 0 0 5px 0;}
.container .page-nav { clear: both; margin-top: 20px; border: 1px solid #366878; padding: 5px 10px; background: #15282e; text-align: center;}

.container .item-list { clear: both; }
.container .item-list p { margin: 0px;}
.container .item-list .box { width: 150px; float: left; background: url(../images/bg_itemlist.jpg) no-repeat left top; margin-bottom: 15px;}
.container .item-list .box .title { padding: 15px 18px 5px;}
.container .item-list .box .photo { padding: 0px 15px; width: 120px; height: 120px; overflow: hidden;}
.container .item-list .box .author { margin: 0px; background: url(../images/bg_itemlist_btm.jpg) no-repeat left bottom; padding: 5px 15px 13px 15px;}

.review-form dd { margin-left: 20px; margin-bottom: 5px;}
.review-form-left { width: 280px; float: left;}
.review-form-right { width: 320px; float: left;}
.review-form-right textarea { width: 350px; height: 200px;}
.form-buttons { clear: both; background: #f1fae0; padding: 5px 10px; text-align: center;}
.form-buttons form { display: inline;}
.form-buttons #review-post { font-weight: bold;}

.comment {border-bottom: 1px dotted #366878; margin-bottom: 10px;}
.comment-footer { text-align: right;}

.detail-data { width: 640px;}
.detail-data th { white-space: nowrap; width: 80px;}
.detail-data th.comment { white-space: nowrap; width: 400px; }

.post-header { font-weight: bold; font-size: 1.1em; border-bottom: 1px solid #005e49; margin-bottom: 10px; background: url(../images/icon_header.jpg) no-repeat left center; margin-left: 0px; padding-left: 25px; line-height: 20px;}
.post-table { margin-bottom: 20px; margin-left: 10px; border-collapse: separate; width: 620px;}
.post-table th { white-space: nowrap; width: 130px;}

/* Contribution */
#page-id1 .page-name { background: url(../images/head_contribution.jpg) no-repeat left top;}
#page-id1 .readmore { text-align: right; clear: both; margin-bottom: 20px;}
#page-id1 .entry-body {margin: 20px 0px;}
#page-id1 .contribute-form { margin-bottom: 20px;}
#page-id1 .contribute-form dd { margin-left: 20px; margin-bottom: 10px;}
#page-id1 #side p { padding: 0 40px;}
#page-id1 .author-name { font-weight: bold; margin-bottom: 5px;}

/* barrier-free map */
#page-id4 .page-name { background: url(../images/head_bfmap.jpg) no-repeat left top;}
#page-id4 .post-table th { white-space: normal;}
#page-id4 .tbl-detail th, #page-id4 .tbl-detail td { border: 1px solid #666;}
#page-id4 .photo { width: 200px; float: left; padding-bottom: 20px;}
#page-id4 .photo #mainPhoto { width: 240px; height: 320px; margin-bottom: 10px; background: #f1fae0; border: 2px solid #111;}
#page-id4 .detail1 { width: 380px; float: right;}
#page-id4 .detail2 { clear: both; width: 100%;}
#page-id4 .tbl-list { width: 100%; border-collapse: collapse; margin-bottom: 20px;}
#page-id4 .tbl-list th,
#page-id4 .tbl-list td { vertical-align: middle;}
#page-id4 .search { border: 1px solid #cafa70; background: #f1fae0; padding: 5px; margin-bottom: 20px;}
#page-id4 .search-tbl td { border: 0px; background: none;}
#page-id4 .search-tbl th { white-space: nowrap; vertical-align: top; border: 0px; background: none;}
#page-id4 #side p { padding: 0 40px;}

/* Blogs */
#page-id3 .page-name { background: url(../images/head_blogs.jpg) no-repeat left top;}
#page-id3 .wrapper { clear: both; margin-bottom: 20px;}
#page-id3 .right { border-left: 3px solid #15282e; padding-left: 10px;}
#page-id3 .box { width: 300px; float: left; margin-right: 10px;}
#page-id3 .box li { margin-bottom: 10px; background: url(../images/icon_arrow.jpg) no-repeat 0px 3px; list-style-type: none; padding-left: 15px;}
#page-id3 .box .title { font-size: 1.2em; background: url(../images/icon_header.jpg) no-repeat left center; padding-left: 25px; }
#page-id3 .box .author { text-align: right;}
#page-id3 .blog-date { padding-left: 10px; color: #666;}
#page-id3 .blog-title { font-weight: bold; font-size: 110%;}

/* Support */
#page-id2 .page-name { background: url(../images/head_supports.jpg) no-repeat left top;}
#page-id2 .list dt { font-size: 1.2em; font-weight: bold; background: url(../images/icon_header_m.jpg) no-repeat left center; padding-left: 25px; line-height: 20px;}
#page-id2 .list dd { margin-bottom: 10px; padding-left: 25px;}

/* Links */
#page-id5 .page-name { background: url(../images/head_links.jpg) no-repeat left top;}
#page-id5 dt { background: url(../images/icon_arrow.jpg) no-repeat left top; padding-left: 15px;}
#page-id5 dd { margin-left: 25px;}

/* Information */
#page-id7 .page-name { background: url(../images/head_info.jpg) no-repeat left top;}
#page-id7 .info-list li { list-style-type: none; padding: 5px; border: 1px solid #005e49; margin-bottom: 15px; margin-left: 0px;}
#page-id7 .info-list h2 { font-size: 1.1em; font-weight: bold;background: url(../images/icon_gold_m.jpg) no-repeat left center; padding-left: 25px;}
#page-id7 .info-list p.date { margin: 0px; text-align: right; color: #999;}
#page-id7 .info-list .entry-body { margin-left: 25px;}

/* Gallery */
#page-id8 .box { margin-bottom: 30px;}
#page-id8 .box h3 { background: url(../images/icon_header_m.jpg) no-repeat left center; font-weight: bold; padding-left: 25px; margin-bottom: 5px;}
#page-id8 .page-name { background: url(../images/head_gallery.jpg) no-repeat left top;}
#page-id8 .gallery-list li { list-style-type: none; background: url(../images/icon_header_m.jpg) no-repeat left top; padding-left: 20px; margin-bottom: 10px;}
#page-id8 .gallery-list li a { font-weight: bold; font-size: 1.2em;}
#page-id8 .item-list { clear: both;}
#page-id8 #side p { padding: 0 40px;}

/* Co-Co Life */
#page-id9 .page-name { background: url(../images/head_cocolife.jpg) no-repeat left top;}
#page-id9 .entry-body { margin-bottom: 20px;}
#page-id9 .entry-body .photo { width: 240px; float: left;}
#page-id9 .entry-body .photo img { border: 1px solid #999;}
#page-id9 .entry-body .text  { width: 400px; float: right;}
#page-id9 .entry-body h1 { font-size: 1.2em; font-weight: bold;}
#page-id9 .entry-body h2 { font-size: 1.1em; font-weight: bold;}
#page-id9 .nav-link { clear: both; padding-top: 10px;}
#page-id9 .indent { margin-left: 20px;}
#page-id9 .subscribe-form { width: 100%;}
#page-id9 td,
#page-id9 th { border-bottom: 1px solid #2b525f; padding: 5px;}
#page-id9 .box { padding: 5px; border-left: 5px solid #c1e978; padding-left: 10px; margin-bottom: 30px;}
#page-id9 .box h3 { font-weight: bold; color: #31450b;}
#page-id9 #cocolife-description { margin-left: 0px;}

/* Staff Blog */
#page-id10 .page-name { background: url(../images/head_editorblog.jpg) no-repeat left top;}
#page-id10 .entry-header { margin-bottom: 10px; background: url(../images/bg_blogheader.jpg) no-repeat left top; height: 51px; padding-left: 30px; padding-top: 6px;}
#page-id10 .entry-header h2 { font-size: 1.1em; font-weight: bold; }
#page-id10 .entry-tags p { display: inline; margin: 0px;}
#page-id10 .entry-tags ul { display: inline;}  
#page-id10 .entry-tags li { display: inline; }
#page-id10 .entry-footer { color: #aaa; padding: 10px 0px; text-align: right;}
#page-id10 #side  p { margin-left: 40px;}
#page-id10 #side .side-box { margin-left: 40px; width: 150px; margin-bottom: 20px;}
#page-id10 #side .side-box h2 { margin-bottom: 5px; }
#page-id10 #side .side-box ul { margin-left: 5px; }
#page-id10 #side .side-box li { background: url(../images/icon_arrow.jpg) no-repeat 0px 3px; list-style-type: none; padding-left: 15px; margin: 0px 0px 5px 0px;}
#page-id10 .entry-nav { text-align: center; background: #f1fae0; padding: 5px; font-size: 9pt;}

/* Static Pages */
#page-id6 .entry-body ul { margin: 5px 0px 20px 20px;}
#page-id6 .entry-body ol { margin: 5px 0px 20px 20px;}
#page-id6 .entry-body h1 { font-size: 102%; font-weight: bold; margin-bottom: 20px;}
#page-id6 .entry-body h2 { font-size: 102%; font-weight: bold;}

#staff-entry { border: 1px solid #ccc; padding: 10px;}
#staff-entry h3 { font-weight: bold; }


/* goods */
#page-goods { background: url(../images/header_goods.jpg) no-repeat left top;}
#goods-list .goods-item { padding: 10px 0px; border-bottom: 1px dotted #aaa; zoom: 100%;}
#goods-list .goods-item:after { content: "."; display: block; clear: both; height: 1px; visibility: hidden;}
#goods-list .goods-item .photo { width: 160px; float: left;}
#goods-list .goods-item .photo div { margin-bottom: 5px;}
#goods-list .goods-item .text { width: 440px; float: right;}
#goods-list .goods-item .postmetadata { text-align: right;}
#goods-list .goods-item h3 { font-weight: bold;}
#goods-list .navigation { text-align: center; margin: 20px;}
#goods-list .category-list { text-align: center; border: 1px solid #ccc; padding: 5px;}
#goods-list .category-list form { margin: 0px; padding: 0px;}
#respond p { margin-bottom: 5px;}

/* monitoring */
#page-id13 .page-name { background: url(../images/header_monitoring.jpg) no-repeat left top;}
#page-id13 .monitoring-item { width: 200px; float: left; padding-bottom: 20px; margin-right: 10px;}
#page-id13 .monitoring-item p { margin-bottom: 3px; text-align: center;}
#page-id13 #monitoring-list { zoom: 100%;}
#page-id13 #monitoring-list:after { content: "."; display: block; clear: both; height: 1px; visibility: hidden;}
#page-id13 .monitoring-item .item-name { font-weight: bold; color: #3a510e;}
#page-id13 #monitoring-item-detail .photo { width: 350px; float: left;}
#page-id13 #monitoring-item-detail .item-detail { width: 290px; float: right;}
#page-id13 #monitoring-item-detail form { display: inline;}
#page-id13 .nav-return { border-top: 1px solid #ccc; padding-top: 20px; margin-top: 20px;}
#monitoring-application-form dt { font-weight: bold;}
#monitoring-application-form dd { margin-left: 30px; margin-bottom: 5px;}
#page-id13 .page-nav { background: none; border: none; border-top: 1px solid #ccc;}

/* event */
#page-id15 .page-name { background: url(../images/header_event_text.jpg) no-repeat left top;}
#page-id15 .box { padding: 10px; border-bottom: 2px dotted #aaa; zoom: 100%;}
#page-id15 .box:after { content: "."; display: block; clear: both; height: 1px; visibility: hidden;}
#page-id15 .box .data { width: 470px; float: left;}
#page-id15 .box .pic { width: 120px; float: right;}
#page-id15 .box h3 { font-weight: bold; font-size: 1.1em;}
#page-id15 .box dt { color: #3c5214;}
#page-id15 .box dd { margin-left: 30px;}
#page-id15 .box .term { font-weight: bold; margin: 0px;}
#page-id15 .box .type { color: #522514; margin-bottom: 10px;}
#page-id15 .search { border: 1px solid #cafa70; background: #f1fae0; padding: 10px;}
#page-id15 .search-tbl { width: 600px; margin-bottom: 10px;}
#page-id15 .search-tbl td { border: 0px; background: none;}
#page-id15 .search-tbl th { white-space: nowrap; vertical-align: top; border: 0px; background: none;}
#page-id15 .search p { margin: 0px;}
#page-id15 #tab-search { margin: 0px; width: 90px;}
#page-id15 #tab-search a { display: block; border: 1px solid #cafa70; background: #daf2ad; width: 80px; height: 16px; padding: 5px;  color: #456110; text-decoration: none;}
#page-id15 #tab-search a:hover { background: #e8f2ad; border-color: #ebe684;}
#page-id15 .page-count { margin-top: 20px;}
#page-id15 .empty { padding: 30px;}
#event-detail .left { width: 380px; float: left;}
#event-detail .right { width: 240px; float: right;}
#event-detail dl dt { font-weight: bold; color: #3f6005; border-bottom: 1px solid #b9df7b; margin-bottom: 4px;}
#event-detail dl dd { margin: 0px 0px 10px 30px;}
#event-comment { border: 1px solid #c0f764; padding: 10px; margin-top: 20px;}
#event-detail .right li { list-style: none; margin-bottom: 10px; margin-left: 0px;}