/* -----------------------------------------------------------------------------------------
   $Id: stylesheet.css,v 1.2 2004/01/25 12:01:17 oldpa Exp $   

   TWE-Commerce - community made shopping
   http://www.oldpa.com.tw
   Copyright (c) 2003 TWE-Commerce 
   -----------------------------------------------------------------------------------------
   based on: 
   (c) 2000-2001 The Exchange Project  (earlier name of osCommerce)
   (c) 2002-2003 osCommerce(stylesheet.css,v 1.54 2003/05/27); www.oscommerce.com 
   (c) 2003	 nextcommerce (stylesheet.css,v 1.7 2003/08/13); www.nextcommerce.org   
   (c) 2003	 xt-commerce  www.xt-commerce.com
   Released under the GNU General Public License 
---------------------------------------------------------------------------------------*/
@charset "UTF-8";
.boxText { font-family: Verdana, Arial, sans-serif; font-size: 12px; }
.errorBox { font-family : Verdana, Arial, sans-serif; font-size : 12px; background: #fc8b40; font-weight: bold; }
.stockWarning { font-family : Verdana, Arial, sans-serif; font-size : 12px; color: #cc0033; }
.productsNotifications { background: #f2fff7; }
.orderEdit { font-family : Verdana, Arial, sans-serif; font-size : 12px; color: #70d250; text-decoration: underline; }
.bodyline{background:#fbfbfb;border:1px solid #C5C5C5}

BODY {
  background: #FFFFFF;
  color: #656644;
  margin: 0px;
}

center {
  background: #ffffff;
  color: #656644;
  margin: 5px;
}

A {
  color: #656644;
  text-decoration: none;
}

A:hover {
  color: #EA992F;
  text-decoration: underline;
}

FORM {
	display: inline;
}

TR.header {
  background: #ffffff;
}

TR.headerNavigation {
  background: #F6F6F6;
}

TD.headerNavigation {
  font-family: Verdana, Arial, sans-serif;
  font-size: 10px;
  background: #F6F6F6;
  color: #656644;
  font-weight : bold;
  border-bottom: 1px solid;
  border-color: #C5C5C5;
}

A.headerNavigation { 
  color: #656644; 
}

A.headerNavigation:hover {
  color: #656644;
}

TR.headerError {
  background: #ff0000;
}
.moduleHeading {
	font-family: Verdana, Arial, sans-serif;
	font-size: small;
	font-weight: bold;
	padding-bottom: 10px;
}

TD.headerError {
  font-family: Tahoma, Verdana, Arial, sans-serif;
  font-size: 12px;
  background: #ff0000;
  color: #ffffff;
  font-weight : bold;
  text-align : center;
}

TR.headerInfo {
  background: #00ff00;
}

TD.headerInfo {
  font-family: Tahoma, Verdana, Arial, sans-serif;
  font-size: 12px;
  background: #00ff00;
  color: #ffffff;
  font-weight: bold;
  text-align: center;
}

TR.footer {
  background: #bbc3d3;
}

TD.footer {
  font-family: Verdana, Arial, sans-serif;
  font-size: 10px;
    background: #F6F6F6;
  color: #656644;
  font-weight : bold;
  border-bottom: 1px solid;
  border-color: #C5C5C5;
}

.infoBox {
  border-top: 1px solid;
 
  border-color: #C5C5C5;
}

.infoBoxContents {
  background: #FFFFFF;
  font-family: Verdana, Arial, sans-serif;
  font-size: 10px;
}

.infoBoxNotice {
  background: #FF8E90;
}

.infoBoxNoticeContents {
  background: #FFE6E6;
  font-family: Verdana, Arial, sans-serif;
  font-size: 10px;
}

TD.infoBoxHeading {
  font-family: Verdana, Arial, sans-serif;
  font-size: 11px;
  font-weight: bold;
  line-height:2;
}

TD.infoBoxHeading_right {
  font-family: Verdana, Arial, sans-serif;
  font-size: 11px;
  font-weight: bold;
  line-height:2;
  color: #656644;
  }

TD.infoBox, SPAN.infoBox {
  font-family: Verdana, Arial, sans-serif;
  font-size: 10px;
  }

TD.infoBox_right, SPAN.infoBox_right {
  font-family: Verdana, Arial, sans-serif;
  font-size: 10px;
  border-top: 1px solid; 
  border-color: #C5C5C5;

}

TR.accountHistory-odd, TR.addressBook-odd, TR.alsoPurchased-odd, TR.payment-odd, TR.productListing-odd, TR.productReviews-odd, TR.upcomingProducts-odd, TR.shippingOptions-odd {
  background: #f8f8f9;
}

TR.accountHistory-even, TR.addressBook-even, TR.alsoPurchased-even, TR.payment-even, TR.productListing-even, TR.productReviews-even, TR.upcomingProducts-even, TR.shippingOptions-even {
  background: #f8f8f9;
}

TABLE.productListing {
  border: 1px;
  border-style: solid;
  border-color: #C5C5C5;
  border-spacing: 1px;
}

.productListing-heading {
  font-family: Verdana, Arial, sans-serif;
  font-size: 10px;
  background: #097b14;
  color: #FFFFFF;
  font-weight: bold;
}

TD.productListing-data {
  font-family: Verdana, Arial, sans-serif;
  font-size: 10px;
}

A.pageResults {
  color: #EA992F;
}

A.pageResults:hover {
  color: #EA992F;
  background: #FFFF33;
}

TD.pageHeading, DIV.pageHeading {
  font-family: Verdana, Arial, sans-serif;
  font-size: 16px;
  font-weight: bold;
  color: #656644;
}

TR.subBar {
  background: #f4f7fd;
}

TD.subBar {
  font-family: Verdana, Arial, sans-serif;
  font-size: 10px;
  color: #656644;
}

TD.main, P.main {
  background: #ffffff;

  font-family: Verdana, Arial, sans-serif;
  font-size: 11px;
  line-height: 1.5;
}

TD.smallText, SPAN.smallText, P.smallText {
  font-family: Verdana, Arial, sans-serif;
  font-size: 10px;
}

TD.accountCategory {
  font-family: Verdana, Arial, sans-serif;
  font-size: 13px;
  color: #bbddaa;
}

TD.fieldKey {
  font-family: Verdana, Arial, sans-serif;
  font-size: 12px;
  font-weight: bold;
}

TD.fieldValue {
  font-family: Verdana, Arial, sans-serif;
  font-size: 12px;
}

TD.tableHeading {
  font-family: Verdana, Arial, sans-serif;
  font-size: 12px;
  font-weight: bold;
}

SPAN.newItemInCart {
  font-family: Verdana, Arial, sans-serif;
  font-size: 10px;
  color: #ff0000;
}

CHECKBOX, INPUT, RADIO, SELECT {
  font-family: Verdana, Arial, sans-serif;
  font-size: 11px;
}

TEXTAREA {
  width: 100%;
  font-family: Verdana, Arial, sans-serif;
  font-size: 11px;
}

SPAN.greetUser {
  font-family: Verdana, Arial, sans-serif;
  font-size: 12px;
  color: #f0a480;
  font-weight: bold;
}

TABLE.formArea {
  background: #f1f9fe;
  border-color: #C5C5C5;
  border-style: solid;
  border-width: 1px;
}

TD.formAreaTitle {
  font-family: Tahoma, Verdana, Arial, sans-serif;
  font-size: 12px;
  font-weight: bold;
}

SPAN.markProductOutOfStock {
  font-family: Tahoma, Verdana, Arial, sans-serif;
  font-size: 12px;
  color: #c76170;
  font-weight: bold;
}

SPAN.productSpecialPrice {
  font-family: Verdana, Arial, sans-serif;
  color: #ff0000;
}

SPAN.errorText {
  font-family: Verdana, Arial, sans-serif;
  color: #ff0000;
}

SPAN.productDiscountPrice {
  font-family: Verdana, Arial, sans-serif;
  color: #ff0000;
  font-weight: bold;
}

.moduleRow { 
  font-family: Verdana, Arial, sans-serif;
  font-size: 11px;
  line-height: 1.5;

}
.moduleRowOver { 
	background-color: #dff7d7; 
	border-color: #ffffff;
	font-family: Verdana, Arial, sans-serif;
    font-size: 11px;
    line-height: 1.5; 
	
	}
.moduleRowSelected { background-color: #e9fcec; }

.checkoutBarFrom, .checkoutBarTo { font-family: Verdana, Arial, sans-serif; font-size: 10px; color: #8c8c8c; }
.checkoutBarCurrent { font-family: Verdana, Arial, sans-serif; font-size: 10px; color: #656644; }


/* sitewide font classes */
/* Note: heading<Number> equals <font size="Number"> */
.heading1 { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 7pt; }
.heading2 { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 9pt; }
.heading3 { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10pt; font-weight:bold }
.heading4 { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12pt; }
.heading5 { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 16pt; }

/* Sitemap Tables */
.sitemap_heading {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10pt; color: #FFFFFF; 
	background-color: #666666; 
	padding-top: 2px; padding-bottom: 2px;}
.sitemap_heading a {color:#FFFFFF;}
.sitemap_heading a:hover {color:#CCCCCC; text-decoration:none;}

.sitemap_sub {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 9pt; color: #656644; background-color: #E6E6E6; padding: 2px 2px;}
.sitemap_sub a {color:#656644;}
.sitemap_sub a:hover {color:#999999; text-decoration:none;}

/* message box */

.messageBox { font-family: Verdana, Arial, sans-serif; font-size: 10px; }
.messageStackError, .messageStackWarning { font-family: Verdana, Arial, sans-serif; font-size: 10px; background-color: #fc8b40; }
.messageStackSuccess { font-family: Verdana, Arial, sans-serif; font-size: 10px; background-color: #99ff00; }

/* input requirement */

.inputRequirement { font-family: Verdana, Arial, sans-serif; font-size: 10px; color: #ff0000; }

.tableShop {
border-left: 1px solid;
border-right: 1px solid;
border-color: #C5C5C5;
}

.navLeft {
border-right: 1px solid;
border-color: #C5C5C5;

}
.navRight {

}
.tableBody {
padding: 5px;
}

.poweredby {
  font-family: Verdana, Arial, sans-serif;
  font-size: 10px;
  color: #656644;
  font-weight: bold;
}


/* first or middle sibling, no children */
.ygtvtn { width:1em; height:20px; }

/* first or middle sibling, collapsable */
.ygtvtm { background: url(img/collapse.gif) 0 6px no-repeat; width:1em; height:22px; cursor:pointer }

/* first or middle sibling, collapsable, hover */
.ygtvtmh { background: url(img/collapseh.gif) 0 6px no-repeat; width:1em; height:22px; cursor:pointer }

/* first or middle sibling, expandable */
.ygtvtp { background: url(img/expand.gif) 0 6px no-repeat; width:1em; height:22px; cursor:pointer }

/* first or middle sibling, expandable, hover */
.ygtvtph { background: url(img/expandh.gif) 0 6px no-repeat; width:1em; height:22px; cursor:pointer }

/* last sibling, no children */
.ygtvln { width:1em; height:20px; }

/* Last sibling, collapsable */
.ygtvlm { background: url(img/collapse.gif) 0 6px no-repeat; width:1em; height:22px; cursor:pointer }

/* Last sibling, collapsable, hover */
.ygtvlmh { background: url(img/collapseh.gif) 0 6px no-repeat; width:1em; height:22px; cursor:pointer }

/* Last sibling, expandable */
.ygtvlp { background: url(img/expand.gif) 0 6px no-repeat; width:1em; height:22px; cursor:pointer }

/* Last sibling, expandable, hover */
.ygtvlph { background: url(img/expandh.gif) 0 6px no-repeat; width:1em; height:22px; cursor:pointer }

/* Loading icon */
.ygtvloading { background: url(img/loading.gif) 0 6px no-repeat; width:1em; height:22px; }

/* the style for the empty cells that are used for rendering the depth 
 * of the node */
.ygtvdepthcell { width:1em; height:20px; }

.ygtvblankdepthcell { width:1em; height:20px; }

/* the style of the div around each node */
.ygtvitem { border: 0px solid grey; }  

/* the style of the div around each node's collection of children */
.ygtvchildren { }  
* html .ygtvchildren { height:1%; }  

/* the style of the text label in ygTextNode */
.ygtvlabel, .ygtvlabel:link, .ygtvlabel:visited, .ygtvlabel:hover { 
	/*
	margin-left:2px;
	text-decoration: none;
	*/
	font-size: 12px;
}

.TabbedPanels {
	CLEAR: none; PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FLOAT: left; PADDING-BOTTOM: 0px; MARGIN: 0px; WIDTH: 100%; PADDING-TOP: 0px
}
.TabbedPanelsTabGroup {
	PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px
}
.TabbedPanelsTab {
	BORDER-RIGHT: #FFC9ED 1px solid; PADDING-RIGHT: 10px; BORDER-TOP: #999 1px solid; PADDING-LEFT: 10px; FLOAT: left; PADDING-BOTTOM: 4px; MARGIN: 0px 1px 0px 0px; FONT: 1.0em sans-serif; BORDER-LEFT: #ccc 1px solid; CURSOR: pointer; PADDING-TOP: 4px; BORDER-BOTTOM: #ccc 1px solid; LIST-STYLE-TYPE: none; POSITION: relative; TOP: 1px; BACKGROUND: url(img/taboffbg.gif) repeat-x 50% bottom; FLOAT: left; -moz-user-select: none
}
.TabbedPanelsTabHover {
	BACKGROUND: url(img/taboffbg.gif) repeat-x 50% bottom; FLOAT: left
}
.TabbedPanelsTabSelected {
	BORDER-BOTTOM: #FFF 1px solid; BACKGROUND: url(img/tabonbg.gif) repeat-x left top
}
.TabbedPanelsTab A {
	COLOR: black; TEXT-DECORATION: none
}
.TabbedPanelsContentGroup {
	CLEAR: both; BORDER-RIGHT: #999 1px solid; BORDER-TOP: #999 1px solid; BORDER-LEFT: #ccc 1px solid; BORDER-BOTTOM: #ccc 1px solid; BACKGROUND-COLOR: #fff
}
.TabbedPanelsContent {
	PADDING-RIGHT: 2px; PADDING-LEFT: 2px; PADDING-BOTTOM: 2px; PADDING-TOP: 2px
}
.TabbedPanelsContentVisible {
	
}



/* SpryValidationTextField.css - version 0.4 - Spry Pre-Release 1.6 */

/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */


/* These are the classes applied on the error messages
 * which prevent them from being displayed by default.
 */ 
.textfieldRequiredMsg, 
.textfieldInvalidFormatMsg, 
.textfieldMinValueMsg,
.textfieldMaxValueMsg,
.textfieldMinCharsMsg,
.textfieldMaxCharsMsg,
.textfieldValidMsg {
	display: none;
	font-size: 12px;
	
}

/* These selectors change the way messages look when the widget is in one of the error states.
 * These classes set a default red border and color for the error text.
 * The state class (e.g. .textfieldRequiredState) is applied on the top-level container for the widget,
 * and this way only the specific error message can be shown by setting the display property to "inline".
 */
.textfieldRequiredState .textfieldRequiredMsg, 
.textfieldInvalidFormatState .textfieldInvalidFormatMsg, 
.textfieldMinValueState .textfieldMinValueMsg,
.textfieldMaxValueState .textfieldMaxValueMsg,
.textfieldMinCharsState .textfieldMinCharsMsg,
.textfieldMaxCharsState .textfieldMaxCharsMsg
{
	display: inline;
	color: #CC3333;
	border: 1px solid #CC3333;
	font-size: 12px;
}



/* The next three group selectors control the way the core element (INPUT) looks like when the widget is in one of the states: * focus, required / invalid / minValue / maxValue / minChars / maxChars , valid 
 * There are two selectors for each state, to cover the two main usecases for the widget:
 * - the widget id is placed on the top level container for the INPUT
 * - the widget id is placed on the INPUT element itself (there are no error messages)
 */
 
 /* When the widget is in the valid state the INPUT has a green background applied on it. */
.textfieldValidState input, input.textfieldValidState {
	background-color: #B8F5B1;
}

/* When the widget is in an invalid state the INPUT has a red background applied on it. */
input.textfieldRequiredState, .textfieldRequiredState input, 
input.textfieldInvalidFormatState, .textfieldInvalidFormatState input, 
input.textfieldMinValueState, .textfieldMinValueState input, 
input.textfieldMaxValueState, .textfieldMaxValueState input, 
input.textfieldMinCharsState, .textfieldMinCharsState input, 
input.textfieldMaxCharsState, .textfieldMaxCharsState input {
	background-color: #FF9F9F;
}

/* When the widget has received focus, the INPUT has a yellow background applied on it. */
.textfieldFocusState input, input.textfieldFocusState {
	background-color: #FFFFCC;
}

/* This class applies only for a short period of time and changes the way the text in the textbox looks like.
 * It applies only when the widget has character masking enabled and the user tries to type in an invalid character.
 */
.textfieldFlashText input, input.textfieldFlashText {
	color: red !important;
}

/* When the widget has the hint message on, the hint text can be styled differently than the user typed text. */
.textfieldHintState input, input.textfieldHintState {
	/*color: red !important;*/
}


/* 設定右下角圓角圖 */
.cssbox, .cssbox_body, .cssbox_head, .cssbox_head h2 {
background: transparent url(img/box1.png) no-repeat bottom right;
} 


/* 可固定寬度值 (例如 width: 335px;) 或刪除寬度改為隨內容伸展的彈性寬度 */
.cssbox {
width: 170px; /* IE Win = width - padding */
padding-right: 15px; /* 底圖右邊緣間距 */
margin: 0px auto; /* 地圖上下左右邊界 */
}

/* 設定右上角圓角圖 */
.cssbox_head {
background-position: top right;
margin-right: -15px; /* 右上角底圖向上拉高 15px */
padding-right: 10px; /* 右邊間距 = 圖片間隙 + 內側間距 */
}

/* 設定左上角圓角圖 */
.cssbox_head h2 {
font-family: Verdana, Arial, sans-serif;
font-weight: normal;
font-size: 80%;
background-position: top left;
margin: 0; /* 邊界設定為 0*/
border: 0; /* 框線設定為 0 */
padding: 2px 0 2px 10px; /* 左側間距 = 圖片間隙 + 內側間距 */
height: auto !important;
height: 1%; /* IE Holly Hack 修正 */
}

/* 設定左下角圓角圖 */
.cssbox_body {
font-family: Verdana, Arial, sans-serif;
font-size: 12px;
background-position: bottom left;
margin-right: 0px; /* 右邊間距 */
padding: 5px 0 5px 10px; /* 間距設定, 左側 40px 要與 .cssbox_head 相同 */
} 


/* 內文與標題間距修改 */
.cssbox_body p {
margin-top: 0 ;
}

div.RoundedCorner {background: #ADD6F2;margin-left: 5px;margin-right: 5px;}
b.rtop, b.rbottom {display:block;background: #FFF}
b.rtop b, b.rbottom b {display:block;height: 1px;overflow: hidden;
background: #ADD6F9}
b.r1{margin: 0 5px}
b.r2 {margin: 0 3px}
b.r3 {margin: 0 2px}
b.rtop b.r4, b.rbottom b.r4 {margin: 0 1px;height: 2px}

/* 設定右下角圓角圖 */
.cssbox1, .cssbox_body1, .cssbox_head1, .cssbox_head1 h2 {
background: transparent url(img/box.png) no-repeat bottom right;
} 


.cssbox1 { 
    width: 320px;
    padding-right: 15px; /* the gap on the right edge of the image (not content padding) */
    margin: 0px auto; /* use to position the box */ 
} 

/* set the top-right image */ 
.cssbox_head1 { 
    background-position: top right; margin-right: -15px; /* pull the right image over on top of border */
    padding-right: 40px; /* right-image-gap + right-inside padding */ 
} 

/* set the top-left image */ 
.cssbox_head1 h2 { 
    background-position: top left; 
    margin: 0; /* reset main site styles*/ 
    border: 0; /* ditto */ 
    padding: 10px 0 2px 40px; /* padding-left = image gap + interior padding ... no padding-right */ 
    height: auto !important; height: 1%; /* IE Holly Hack */ 
} 

/* set the lower-left corner image */ 
.cssbox_body1 { 
    background-position: bottom left; 
    margin-right: 5px; /* interior-padding right */ 
    padding: 2px 0 2px 40px; /* mirror .cssbox_head right/left */ 
}
.cssbox_body1 p {
margin-top: 10px ;
} 

#lightbox{
            position: absolute;
            top: 40px;
            left: 0;
            width: 100%;
            z-index: 100;
            text-align: center;
            line-height: 0;
            }
 
#lightbox a img{ border: none; }
 
#outerImageContainer{
            position: relative;
            background-color: #fff;
            width: 250px;
            height: 250px;
            margin: 0 auto;
            }
 
#imageContainer{
            padding: 10px;
            }
 
#loading{
            position: absolute;
            top: 40%;
            left: 0%;
            height: 25%;
            width: 100%;
            text-align: center;
            line-height: 0;
            }
#hoverNav{
            position: absolute;
            top: 0;
            left: 0;
            height: 100%;
            width: 100%;
            z-index: 10;
            }
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}
 
#prevLink, #nextLink{
            width: 49%;
            height: 100%;
            background: transparent url(../../images/blank.gif) no-repeat; /* Trick IE into showing hover */
            display: block;
            }
#prevLink { left: 0; float: left; background: url(../../images/prevlabel.gif) left 15% no-repeat; }
#nextLink { right: 0; float: right; background: url(../../images/nextlabel.gif) right 15% no-repeat; }
/*
#prevLink:hover, #prevLink:visited:hover { background: url(../images/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(../images/nextlabel.gif) right 15% no-repeat; }
*/ 
 
#imageDataContainer{
            font: 10px Verdana, Helvetica, sans-serif;
            background-color: #fff;
            margin: 0 auto;
            line-height: 1.4em;
            }
 
#imageData{
            padding:0 10px;
            }
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }  
#imageData #caption{ font-weight: bold;        }
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em;      }                                  
#imageData #bottomNavClose{ width: 66px; float: right;  padding-bottom: 0.7em;    }          
                        
#overlay{
            position: absolute;
            top: 0;
            left: 0;
            z-index: 90;
            width: 100%;
            height: 500px;
            background-color: #000;
            filter:alpha(opacity=60);
            -moz-opacity: 0.6;
            opacity: 0.6;
            }
            
 
.clearfix:after {
            content: "."; 
            display: block; 
            height: 0; 
            clear: both; 
            visibility: hidden;
            }
 
* html>body .clearfix {
            display: inline-block; 
            width: 100%;
            }
 
* html .clearfix {
            /* Hides from IE-mac \*/
            height: 1%;
            /* End hide from IE-mac */
            }