﻿/*-----------------------------------------------------------------------------
 [TABLE OF CONTENTS]
    +common
    +header
        =logo
        =search
    +content
        +content-main
            =crumb
        +content-sidebar
            =help
            =new
            =ad-content-sidebar
            =hot-label
            =village-class
    +footer
        =link
        =copyright
-----------------------------------------------------------------------------*/

/* +common
*----------------------------------------------------------------------------*/

@import url(reset.css); /* css還原檔 */

body {
    min-width: 100%;
    color: #333;
    font: 13px/22px Arial, Helvetica, sans-serif;
    background: url(../i/bg-body-x.gif) repeat-x;
    behavior: url(c/csshover.htc);
}

html {
    min-width: 100%;
    color: #333;
    font: 13px/22px Arial, Helvetica, sans-serif;
    background: url(../i/bg-body-x.gif) repeat-x;
}

acronym {
    cursor: help;
}

abbr {
    cursor: help;
}

input {
	color: #2F0209;
	font: normal 12px Arial, Helvetica, sans-serif;
}

select {
	color: #2F0209;
	font: normal 12px Arial, Helvetica, sans-serif;
}

textarea {
	color: #2F0209;
	font: normal 12px Arial, Helvetica, sans-serif;
}

button {
	color: #2F0209;
	font: normal 12px Arial, Helvetica, sans-serif;
}

/**
*
* =anchor
*
**/

/* 去除連結虛線框 */
a:focus {
    blr:expression(this.onFocus=this.blur());
    -moz-outline-style: none; 
}

a {
    blr:expression(this.onFocus=this.blur());
    -moz-outline-style: none; 
}

/* 順序不能改變 */
a:link {
    text-decoration: none;
    color: #0085ec;
}

a:visited {
    text-decoration: none;
    color: #0085ec;
}

a:hover {
    text-decoration: underline;
    color: #ff6600;
}

a:active {
    text-decoration: none;
    color: #ff6600;
}


/**
*
* clear,clearfix
*
**/

/* regular clearing apply to column that should drop below previous ones. */
.clear {
    clear: both;
}

/* this needs to be first because FF3 is now supporting this */
.clearfix {
    display: inline-block;
}

/* clearing floats without extra markup */
.clearfix:after {
    display: block;
    visibility: hidden;
    clear: both;
    height: 0;
    font-size: 0;
    line-height: 0;
    content: ".";
}

/* hides from IE-mac \*/
* html .clearfix {
    height: 1%;
}

.clearfix {
    display: block;
}
/* end hide from IE-mac */


/**
*
* =form
*
**/

form .length-xxl {
    border: 1px double #a6a6a6;
    background-color: #fff;
    color: #000;
}

form .length-xl {
    border: 1px double #a6a6a6;
    background-color: #fff;
    color: #000;
}

form .length-l {
    border: 1px double #a6a6a6;
    background-color: #fff;
    color: #000;
}

form .length-m {
    border: 1px double #a6a6a6;
    background-color: #fff;
    color: #000;
}

form .length-s {
    border: 1px double #a6a6a6;
    background-color: #fff;
    color: #000;
}

form .length-xs {
    border: 1px double #a6a6a6;
    background-color: #fff;
    color: #000;
}

form .length-xxs {
    border: 1px double #a6a6a6;
    background-color: #fff;
    color: #000;
}

form .length-xxs {
    width: 50px;
}

form .length-xs {
    width: 100px;
}

form .length-s {
    width: 150px;
}

form .length-m {
    width: 200px;
}

form .length-l {
    width: 250px;
}

form .length-xl {
    width: 300px;
}

form .length-xxl {
    width: 400px;
}

input[type="image"] {
    cursor: pointer;
}

input[type="submit"] {
    cursor: pointer;
}

input[type="reset"] {
    cursor: pointer;
}

input[type="button"] {
    cursor: pointer;
}

option:focus {
    border: 1px double #333;
    background-color: #ffc;
}

select:focus {
    border: 1px double #333;
    background-color: #ffc;
}

textarea:focus {
    border: 1px double #333;
    background-color: #ffc;
}

input[type="password"]:focus {
    border: 1px double #333;
    background-color: #ffc;
}

input[type="text"]:focus {
    border: 1px double #333;
    background-color: #ffc;
}

input[type="password"]:focus {
    padding: 2px 1px;
}

input[type="text"]:focus {
    padding: 2px 1px;
}

textarea:focus {
    padding: 1px;
}





.tab-pager {
    float: left;
	clear: left;
	width: 100%;
	height: 24px;
    margin: 10px 0 10px 0;
    font: 12px/22px Arial;
    text-align: center;
}
.tab-pager ol {
    float:left;
    position:relative;
	left:50%;
	text-align:center;
}
.tab-pager ol li {
    float: left;
    position:relative;
	right:50%;
    margin: 0 4px 0 0;
    background: none;
    text-align: center;
    background: #fff;
    color: #666;
}
.tab-pager ol li a {
    float: left;
    display: block;
    height: 22px;
    padding: 0 6px;
    color: #666;
    border: solid 1px #e6e6e6;
}
.tab-pager ol li a:hover {
    border: solid 1px #999;
    text-decoration: none;
}
.tab-pager ol li.active {
    display: block;
    height: 22px;
    padding: 0 6px;
    color: #fff;
    background: #aaa;
    border: solid 1px #e6e6e6;
    font: bold 12px/22px Arial;
}
.tab-pager ol li.disabled {
    display: block;
    height: 22px;
    padding: 0 6px;
	border: solid 1px #eee;
	color: #ddd;
}

#content-main strong {	
	font: bold 17px/22px Arial;
    color: #ff7200;
}


/* +header
*----------------------------------------------------------------------------*/

#header .loginbar {
    width: 1000px;
    height: 20px;
    font: 12px/22px Arial, Helvetica, sans-serif;
}
#header .loginbar ul{
    float: right;
}
#header .loginbar ul li {
    float: left;
    padding: 0 0 0 8px;
    margin: 0 0 0 5px;
    font: 12px/22px Arial, Helvetica, sans-serif;
    color: #fff;
    background: url(../i/icon-loginbar-line.gif) no-repeat left center;
}
#header .loginbar ul li a {
    color: #fff;
}
#header .loginbar ul li.first {
    background: url(../i/icon-loginbar-arrow.gif) no-repeat left center;
}

/* +content
*----------------------------------------------------------------------------*/

/* +content-sidebar
*----------------------------------------------------------------------------*/

/* down-ad
*----------------------------------------------------------------------------*/

#down-ad .box {	
	float: left;
	width: 305px;
	margin: 5px 11px 10px 0;
	border-right: 1px dotted #d7d5c6;
}
#down-ad .box .photo {	
    float: left;
	width: 100px;
}
#down-ad .box .con {
    float: right;
	width: 205px;
}
#down-ad .box .con h3 {
    font: bold 15px/22px Arial, Helvetica, sans-serif;
}
#down-ad .box-list {	
	margin: 0 0 0 0;
	border-right: 0px double #fff;
}


/* down-ad
*----------------------------------------------------------------------------*/

#down-support .box {	
	float: left;
	width: 870px;
	height: 60px;
	margin: 5px 0 5px 0;
	padding: 0 0 0 30px;
}
#down-support .box .txt {	
	width: 70px;
    color: #71c6e1;
	
	display: table-cell; 
	*display: inline;
	zoom: 1;
	vertical-align: middle;
}
#down-support .box .con {
	width: 180px;
	
	display: table-cell; 
	*display: inline;
	zoom: 1;
	vertical-align: middle;
}
#down-support .box .max {
	width: 550px;
	
	display: table-cell; 
	*display: inline;
	zoom: 1;
	vertical-align: middle;
}

#down-support .box .con ul li {
    float: left;
    margin: 0 5px 0 0;
}
#down-support .box .con ul li.list {
    margin: 0 0 0 0;
}

/* +footer
*----------------------------------------------------------------------------*/

/**
 *
 * =link
 *
 *
#footer .link {
    padding: 10px 0 0 0;
    color: #fff;
    font: 12px/22px Arial, Helvetica, sans-serif;
}
#footer .link a {
    color: #fff;
}
*/

/**
 *
 * =copyright
 *
 **/


#footer .copyright {    
    padding: 20px 0 0 0;
    color: #fff;
    font: 12px/22px Arial, Helvetica, sans-serif;
}
#footer .copyright a {
    color: #fff;
}
