/* ***************************************************************************
 *
 * Lemontea Website Version 5 Stylesheet
 * 
 * ***************************************************************************/

/* Global Style */

@import url('http://fonts.googleapis.com/css?family=Open+Sans:400,700&subset=latin,latin-ext');

html, body		{margin: 0; padding: 0; width: 100%; height: 100%;}
html, body, input, textarea {font-family: 'Open Sans', Helvetica, "Microsoft JhengHei", "微軟正黑體", Tahoma}
table			{border-collapse: collapse; border-style: none}
td				{vertical-align: top}
h1				{margin: 0px 10px; color: #333333; padding: 25px 0px 15px 0px; font-size: 24px}
h2				{margin: 0px 10px; color: #666666; padding: 15px 0px; font-size: 16px; font-weight: 400; line-height: 22px; letter-spacing: 3px}
p				{margin: 2px 10px; font-size: 12px; color: #4B4B4B; line-height: 18px; text-align: justify}
img 			{border-style: none}
a				{text-decoration: none; color: inherit; font-size: 12px}
*:first-child+html a, * html a {color: #4b4b4b}
.right			{float:right}


/* Table */

table.inline {
	width: 100%;
}

table.inline tr.title {
	border-bottom: 1px dotted #eee; 
	font-weight: 700;
}

table.inline td {
	padding: 0 4px; 
	border-right: 1px dotted #ddd;
}

table.inline tr td:first-child {
	padding-left: 0;
}

/* Useful Style */

div.quote	{position: relative; border: 1px solid #cccccc; background-color: #eeeeee;  -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; padding: 2px 4px}
span.keyword {padding: 0px 5px; font-weight: 700; background-color: #f0f0f0;  -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px;}
span.keyword.reverse {color: #f0f0f0; background-color: #4b4b4b}
span.keyword u:not(.ie) {padding: 0px 3px; margin: 0px 3px; text-decoration: none;  -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; border: 1px none #666666; border-left-style: solid; border-right-style: solid}
span.code	{padding: 0 .4em; color: #d99e42; background-color: #666666; color: #EEEEEE;  -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; }
span.code.new { background-color: #cc0000; color: white}

/* jQuery-UI Fixes */

.ui-tabs .ui-tabs-panel p {margin: 2px}
.ui-tabs .ui-tabs-panel h2 {margin: 2px}
.ui-accordion .ui-accordion-content p {margin: 2px}
.ui-accordion .ui-accordion-content h2 {margin: 2px}

/* Page Layouts */

table#top {height: 100%}
table#top td.content {height: 100%; padding: 30px 0px 5px 0px; background: no-repeat; border-right: 1px dashed white}
*:first-child+html table#top td.content, * html table#top td.content {border-right: 1px dashed #999999}
table#top td.content.odd {background-image: url('images/leaflet-rt.png')}
table#top td.content.even {background-image: url('images/leaflet-lt.png')}
table#top td.content.double.odd {background-image: url('images/leaflet-rlt.png')}
table#top td.content.double.even {background-image: url('images/leaflet-lrt.png')}
table#top td.content > div {position: relative; height: 100%; background: white; width: 300px; overflow: hidden}
table#top td.content.double > div {width: 600px}
table#top td.content.leaftop > div {background: transparent}

/* Section: Top */

div.leaftop	{position: absolute; top: 0; left: 0; width: 300px; height: 30px; background: no-repeat}
div.leaftop.odd	{background-image: url('images/leaflet-rtb.png')}
div.leaftop.even {background-image: url('images/leaflet-ltb.png')}

div#logo {background: url('images/logo-lemon.png') no-repeat; width: 300px; height: 75px}
div#button {text-align: right; padding-right: 10px}

/* Section: Books */

p#prev-book-thumb {overflow-x: scroll; white-space: nowrap}
#prev-book-list tr.hover {background:#eee}
#prev-book-list tr.hover p {color: #c00}
div.bookThumb img {cursor: pointer; background-color: #fafafa; border: 2px solid #dddddd; padding: 2px; margin: 1px}
div.bookThumb a:hover img {background-color: #dddddd; border: 2px solid #4b4b4b}
img.bookCover {cursor: pointer}
.noStock {text-decoration:line-through;}

#prev-book-thumb::-webkit-scrollbar {
	width: 5px;
	height: 5px;
}
 
#prev-book-thumb::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    -webkit-border-radius: 10px;
    border-radius: 10px;
}
 
#prev-book-thumb::-webkit-scrollbar-thumb {
    -webkit-border-radius: 10px;
    border-radius: 10px;
    background: #999999; 
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
}

#prev-book-thumb::-webkit-scrollbar-thumb:window-inactive {
	background: #fafafa; 
}


/* Section: Products */

div.productGroup {padding-top: 10px; width: 284px}
div.productGroup a.product {text-shadow: white 0px 0px 2px; overflow: visible;position: relative; margin: 2px 0px ;display: block; height: 100px; border: 1px solid #cccccc; background: #eeeeee top right no-repeat;  -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; padding: 2px 4px}
div.productGroup a.product span.code {text-shadow: none}
div.productGroup a.product span.price {float: right; font-weight: 700}
div.productGroup a.product img {position: absolute; right : -1px; top: -1px; z-index: 1001; border: 1px solid #cccccc; display: none}
div.productGroup a.product:hover img {display: inline}

/* Section: Order */

input[type=text] {width: 480px; height: 14px; border: 1px none #999999; background: transparent; padding: 2px 4px; border-bottom-style: solid}
input[type=text]:not(.ie) { -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px;  border-left-style: solid; border-right-style: solid; border-bottom-style: none}
input.default {color: #999999}
input.float {position: absolute; right: 5px; top: 5px; height: 96px; width: 50px; color: black; cursor: pointer; border: 1px solid #cccccc; background: white;  -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; padding: 2px 4px}
input.float.active {font-weight: 700; border-color: #666666}

input.loading { background: white url('images/loading.gif') no-repeat center center; color: transparent; cursor: default;}
input.loading.active {border-color: #cccccc;}

p.red {color: red; font-weight: 700}
p.error {color: #CC0000; font-weight: 700}
p.error input {border-color: #CC0000}

p.orderList span {display: inline-block}
p.orderList span.name {width: 100px; font-weight: 700}
p.orderList span.product {width: 300px}
p.orderList span.note {width: 100px}
p.orderList span.price {width: 80px; text-align: right}
p.orderList span.id {float: right; padding: 0px 2px; color: #999999}
p.orderList span.date{float: right; padding: 0px 2px}

p.orderList.comment {padding-left: 100px; font-size: 80%}
p.orderList.reply {padding-left: 120px; background: url('images/p-orderlist-reply.png') no-repeat 100px 0px}

p.orderList.category {font-weight: 700; text-align: center; padding: 2px; background-color: #eeeeee; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px}
p.orderList.category span {display: none}
p.orderList.category span.name {display: inline-block; width: 100%}

div.loading { height: 100px; background: white url('images/ajaxLoader.gif') no-repeat center center; }
div.loading p { display: none; }

div#tabs-history input.float {height: 38px}
div#tabs-history div.quote {margin-top: 5px}
div#tabs-history p.orderList span.name {display: inline; padding-left: 20px; background: url('images/p-orderlist-comment.png') no-repeat 0px 2px}
div#tabs-history p.orderList.comment {background-color: #fdfdfd; border: 1px solid #eeeeee; padding: 3px}
div#tabs-history p.orderList.reply {margin-left: 20px; background-position: center left; background-color: #fdfdfd; border: 1px solid #eeeeee; padding: 3px 3px 3px 23px}

/* Pagination */

div.paginationWrapper {height: 30px}

/* Navigation Menu */

div#nav {position: absolute; right: 20px; bottom: 20px; opacity: 1}
div#nav a {position: relative; display: block; cursor: pointer; padding: 2px 5px; text-align: right; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px}
div#nav a:hover { color: #cc0000; }
div#nav a:hover span.keyword.reverse { background-color: #cc0000; }
div#nav .ui-icon { display: inline-block; position: relative; top: 3px; }