@charset "utf-8";
/* CSS Document */
html
{
	background-color:#FFF;
	font-family:Verdana, Geneva, sans-serif;
}

#container
{
	background-color:#6bb5d0;
	width:1000px;
	box-shadow:1px 1px 5px gray;
	padding:0px;
	margin:auto;
}

h1
{
	margin:0.2em 0em;
}

a img
{
	border:none;
}

a:visited
{
	color:blue;
}

a:focus,
a:active,
a:hover
{
	color:green;
}

input, textarea
{
	margin:0em; /* to solve a bug(?) in Chrome, explicitely set margin to 0 */
	margin-bottom:0.2em;
}

input.small
{
	width:4em;
}

input.medsmall
{
	width:7em;
}

input.medium
{
	width:10em;
}

input.large
{
	width:14em;
}

input:focus
{
	border:2px green solid;
}

select
{
	margin-left:0em;
}

#header
{
	height:110px;
	padding:0.2em;
}

#header > a
{
	position:absolute;
	margin-bottom:2em;
}

#header h1
{
	font-size:40px;
	font-weight:bold;
	margin:0em;
	margin-left:3.5em;
	width:10em;
}

#header h2
{
	font-weight:bold;
	margin:0em;
	margin-left:4em;
	display:inline-block;
}

#Login,
#userinfo
{
	background-color:#FFF;
	float:right;
	display:inline-block;
	margin-top:-2.2em;
	padding:0.3em;
	border-radius:0.3em;
	box-shadow:1px 1px 3px gray;
}

#Login,
#userinfo a
{
	margin-left:0.5em;
}

#userinfo a
{
	font-weight:bold;
	font-size:1.2em;
	vertical-align:top;
}

#useravatar
{
	max-height:5em;
	max-width:3em;
	vertical-align:top;
}

#Login label
{
	text-align:right;
	display:inline-block;
	width:10em;
}

#Loginbtn
{
	display:block;
	text-align:center;
}

#logUsername, #logPassword
{
	width:10em;
}

#join
{
	display:inline-block;
	margin-bottom:0.2em;
	font-size:0.8em;
	padding:2px 6px 1px;
	border:2px buttonface outset;
	color:buttontext;
	background-color:buttonface;
	text-align:center;
	border-radius:0.3em;
	text-decoration:none;
	appearance:push-button;
	-moz-appearance:button;
	-webkit-appearance:push-button;
	vertical-align:bottom;
}

#logSubmit:hover,
#join:hover
{
	background-color:#96EAFC;
}

#menu
{
	width:100%;
	clear:both;
}

#menu ul
{
	list-style:none;
	padding:0px;
	margin:0em;
}

#menu > ul
{
	margin-left:1em;
}

#menu a 
{
	display: inline-block;
	color:#FFF;
	text-decoration: none;
}

#menu a:hover 
{
	color:#FC0;
}

#menu li 
{
	display:inline-block;
	padding:0.2em 0em;
	margin:0px;
	width:11.6%;
	text-align:center;
	font-size:17px;
	font-weight:bold;
	position:relative;
	cursor:pointer;
	z-index:100;
	color:#FFF;
}

#menu ul.TH > li
{
	width:13.6%;
}

#menu ul ul
{
	display:none;
	position:absolute;
	top:96%;
	width:10em;
	left:-5em;
	margin-left:50%;
	z-index:99;
	border:3px #fff solid;
	border-top:none;
	background-color:#6bb5d0;
}

#menu ul ul li
{
  width:100%;
	padding:0.2em 0em;
}

#menu ul li:hover ul
{
	display:block;
}

#content
{
	background-color:#FFF; 
	border-radius:0.5em 0.5em 0em 0em;
	box-shadow:1px 1px 3px gray;
	margin:0em;
	padding:0.5em 0em 0.8em;
	min-height:30em;
}

#footer
{
	clear:both;
	font-weight:bold;
	text-align:center;
	margin-top:0.5em;
}

.icon
{
	max-height:1em;
	max-width:1em;
	cursor:pointer;
	margin:0.1em;
}

.link
{
	cursor:pointer;
	color:#00C;
	font-weight:bold;
	text-decoration:underline;
}

.modal
{
	background-image:url(../img/bgAbsolute.png);
	position:fixed;
	display:block;
	width:100%;
	height:100%;
	margin:auto;
	top:0em;
	left:0em;
	z-index:1000000;
	min-width:60em;
	animation: grow 1.5s;
	-moz-animation: grow 1.5s;
	-webkit-animation: grow 1.5s;
	-o-animation: grow 1.5s;
	-ms-animation: grow 1.5s;
}

@keyframes grow
{
	0% { transform:scale(0,0); opacity:0;}
	100% { transform:scale(1,1) transform:scale(1,1); }
}

@-webkit-keyframes grow
{
	0% { transform:scale(0,0); -webkit-transform:scale(0,0);opacity:0;}
	100% { transform:scale(1,1);  -webkit-transform:scale(1,1);}
}

@-moz-keyframes grow
{
	0% { transform:scale(0,0) -moz-transform:scale(0,0); opacity:0;}
	100% { transform:scale(1,1) -moz-transform:scale(1,1); }
}

@-o-keyframes grow
{
	0% { transform:scale(0,0) -o-transform:scale(0,0);  opacity:0;}
	100% { transform:scale(1,1) -o-transform:scale(1,1); }
}

@-ms-keyframes grow
{
	0% { transform:scale(0,0) -ms-transform:scale(0,0); opacity:0; }
	100% { transform:scale(1,1) -ms-transform:scale(1,1); }
}

.shrink
{
	animation: shrink 1.5s;
	-moz-animation: shrink 1.5s;
	-webkit-animation: shrink 1.5s;
	-o-animation: shrink 1.5s;
	-ms-animation: shrink 1.5s;
}

@keyframes shrink
{
	0% { transform:scale(1,1);}
	100% { transform:scale(0,0) transform:scale(0,0); opacity:0; }
}

@-webkit-keyframes shrink
{
	0% { transform:scale(1,1); -webkit-transform:scale(1,1);}
	100% { transform:scale(0,0);  -webkit-transform:scale(0,0); opacity:0;}
}

@-moz-keyframes shrink
{
	0% { transform:scale(1,1) -moz-transform:scale(1,1);}
	100% { transform:scale(0,0) -moz-transform:scale(0,0);  opacity:0;}
}

@-o-keyframes shrink
{
	0% { transform:scale(1,1) -o-transform:scale(1,1);}
	100% { transform:scale(0,0) -o-transform:scale(0,0); opacity:0; }
}

@-ms-keyframes shrink
{
	0% { transform:scale(1,1) -ms-transform:scale(1,1); }
	100% { transform:scale(0,0) -ms-transform:scale(0,0); opacity:0; }
}

.modal > span,
.modal > div,
.modal > li
{
	background-color:white;
	border-radius:0.5em;
	padding:1em;
	display:block;
	width:42em;
	margin:2em auto;
	position:relative;
	max-height:35em;
	overflow-y:auto;
}

.modal .heading
{
	background-color:#6CC;
}

.modal #imgclose
{
	height:2em;
	width:2em;
	position:absolute;
	right:1em;
	top:0.5em;
}

.modal .heading #imgclose
{
	margin-right:1em;
	margin-top:0.5em;
}

#imgmainhold
{
	max-height:30em;
	min-height:24em;
	margin-top:0.3em;
	width:auto;
	max-width:80%;
	text-align:center;
}

#imgmainhold img
{
	max-width:80em;
}

#imgmainthumbs
{
	position: absolute;
  bottom: 0em;
  width: 98.5%;
  max-width: 98.5%;
  margin: auto;
	padding:0.1em 0.3em;
	overflow-x:auto;
	white-space:nowrap;
}

#imgmainthumbs img
{
	max-height:5em;
	max-width:6em;
	cursor:pointer;
	border:2px transparent solid;
	margin-right:0.2em;
}

#imgmainthumbs img:hover
{
	border-color:blue;
}

#imgmainthumbs img.selected
{
	border-color:red;
}

#lang
{
	position:relative;
	display:inline-block;
	z-index:101;
	bottom:3em;
	margin-left:4em;
	text-align:center;
}

#lang img
{
	margin-left:0.1em;
	cursor:pointer;
}

.EN .lang:not(.EN)
{
	display:none !important;
}


.TH .lang:not(.TH)
{
	display:none !important;
}

#iconLoad
{
	max-height:2em;
	max-width:2em;
	position:absolute;
	bottom:0em;
	right:0em;
}

.avatar
{
	max-height:5em;
	max-width:5em;
}

#cart
{
	width:14em;
	border-radius:0.3em;
	box-shadow:1px 1px 3px gray;
	padding:0.2em;
	margin-top:0.3em;
}

#cart img
{
	margin-left:1.5em;
}

#cart h1
{
	font-size:0.8em;
	margin:0em;
	color:blue;
}

#cart #cartItems
{
	float:left;
}

#cart #cartPrice
{
	float:right;
}

img.fade
{
	transition:all 1s ease-out;
	-webkit-transition:all 1s ease-out;
	opacity:0;
}

#imgloading
{
	position:absolute;
	top:0em;
	right:0em;
}

#addresslist
{
	position:absolute;
	background-color:white;
	box-shadow:1px 1px 3px gray;
	padding:0.3em;
	max-height:8em;
	overflow-y:auto;
	z-index:1000;
	width:35em;
}

#addresslist p
{
	margin-top:0em;
}

#addresslist > div
{
	margin-bottom:0.2em;
	padding-bottom:0.2em;
}

#addresslist span
{
	padding-left:0.2em;
}


#addresslist span:after
{
	content:",";
}


#addresslist span:last-child:after
{
	content:"";
}