/* ---------------------------------- import reset screen components onto it */
@import "../../screen_reset.css";


/* -------------------------------------- setting typograpgy and general tag */

html, body {height: 100%; background: #FFFFFF;}
body, th, td, input, select, textarea {font: 100%/1.4 Tahoma, "Lucida Grande", Thonburi, Loma, sans-serif;}

body, #container {min-height: 100%; height: auto;}

body {text-align: center;}
#container {text-align: left;}

pre, code, kbd, samp, tt, xmp {font-family: monospace; line-height: 99%;}
abbr, acronym {font-variant: small-caps; letter-spacing: 0.1em;}
blockquote {margin: 0 40px;}
del  {text-decoration: line-through;}
ins {text-decoration: underline;}
em {font-style: italic;}
strong {font-weight: bold;}
sub {vertical-align: sub; font-size: 0.75em;}
sup {vertical-align: super; font-size: 0.75em;}
p {text-indent: 20px;}

h1 {font-size: 1.35em;}
h2 {font-size: 1.25em;}
h3 {font-size: 1.15em;}
h4 {font-size: 1em;}
h5 {font-size: 0.85em;}
h6 {font-size: 0.7em;}

ol {list-style-type: decimal; list-style-position: inside;}
ul {list-style-type: square; list-style-position: inside;}
li {line-height: 150%;}
li.question {cursor: pointer; cursor: hand; list-style-type: circle;}
li.question:hover {color: #3333CC;}
li.answer {display: none; visibility: hidden; list-style-type: none; padding: 5px 20px; background-color: #EEEEFF;}
dl ol {margin-left: 20px;}
dl {padding-bottom: 10px;}

hr {border: none; margin-top: 20px; background-color: #FF9966; color: #FF9966; width: 94%; height: 1px;}

a {text-decoration: none; color: #0033CC;}
a:hover {color: #FF6600;}


/* ----------------------------------------------------------- setting table */

table {width: 100%; border-collapse: collapse; font-size: inherit; font: 100%;}

caption {text-align: center;}
thead {}
tbody {}
tfoot {}

th, td {border: 1px solid #FFFFFF; padding: 1px;}
th {text-align: center; font-weight: bold;}
th.vertical {text-align: left;}
td.number {text-align: right;}
tr.odd {background: #EFEFF1;}
tr.even {background: #F6F6FA;}


/* ------------------------------------------------------------ setting form */

form {margin: 10px 5px 10px 5px;}

fieldset {}
legend {text-align: right;}
label {display: block;}

input, select, textarea {background: #FFFFFF; border: 1px solid #777777;}
textarea {height: 160px;}
input.button, button {
	clear: both;
	margin: 5px 15px; 
	text-align: center;
	font-weight: bold;
	color: #FFFFFF;
	background: #EC8000;
	border: 1px solid #EDEDED;
	cursor: pointer;
	cursor: hand;
}
input.navbutton {background-color: #EC8000; color: #FFFFFF; cursor: pointer; cursor: hand;}
input.button:hover, input.navbutton:hover,  button:hover {background: #F8981D;}

#searchbox {width: 245px; clear: both; float: right; margin-top: 15px; background: #EEF0FF; color: #000000;}
#searchbox label {margin-left: 15px;}
#searchbox input, #searchbox select {width: 200px; margin: 0 0 5px 15px;}
#searchbox input.button {width: 80px;}

.bannerright {width: 245px; clear: both; float: right; margin-top: 5px;}

#newsletterbox {
	width: 170px;
	clear: both;
	margin: 15px 5px;
	background: #EEF0FF url("../images/bg_newsletter.png") no-repeat;
	color: #000000;
}
#newsletterbox h4 {text-align: center; background: #BABADA;}
#newsletterbox label {clear: left; margin: 10px 0 0 15px; font-size: 0.85em;}
#newsletterbox input {width: 135px; margin: 0 0 5px 15px; font-size: 0.85em;}
#newsletterbox label.inlinetext {width: 125px; margin: 2px 0;}
#newsletterbox input.inlinechoice {width: 20px; margin: 5px 0 0 12px;}
#newsletterbox input.button {clear: both; width: 95px; margin-bottom: 15px;}

#questionaire {clear: both; margin-top: 10px;}
#questionaire th {text-align: left;}
#questionaire input.choice {text-align: right;}
#questionaire input.button {width: 110px;}

#contactform {width: 480px; padding: 10px; background: #EEEEFF;}
#contactform h3 {font-weight: bold; color: #00129D;}
#contactform input, #contactform textarea {width: 420px; margin-bottom: 5px;}
#contactform input.button {width: 100px;}

.short {width: 60px;}
.small {width: 100px; height: 100px; display: inline;} /* small textarea */
.big {width: 450px; height: 300px;} /* big textarea */
.inlinechoice {clear: left; float: left;} /* radio and checkbox element */
.inlinetext {float: right; text-align: left;} /* radio and checkbox text label */


/* ---------------------------------------------------------- setting header */

#header {margin: 0 auto;width: 970px; height: 120px; font-size: 0.8em;}
#logo {float: left; width: 220px; height: 120px; background-color: #FFFFFF;}
#branding1 {float: left; width: 550px; height: 120px; background-color: #99CFFF; }
#branding2 {float: left; width: 200px; height: 120px; background-color: #99CFFF ;}


#langnav {width: 200px; height: 24px; background-color: #99CFFF ; }
#langnav ul {list-style: none; text-align: right;}
#langnav ul li {float: left; width: 80px; font-weight: bold;}

#mainnav {width: 550px; height: 24px; background-color: #99CFFF ; }
#mainnav ul {list-style: none; text-align: right;}
#mainnav ul li {float: left; width: 100px; font-weight: bold; padding-right: 5px; }
#mainnav ul li:hover { font-weight: bolder; background-color: #CEE8FF ;border-bottom: 2px solid red; }
#mainnav ul li.current { font-weight: bolder; background-color: #DFF7F7 ;border-bottom: 2px solid red; }
#mainnav ul li.current:hover {}

/* -------------------------------------------------- setting all navigation */


/*  ============================================  */
#contentcontainer {
	background: #FFFFFF url( '../images/background.jpg' ) repeat-y ;  
	clear:both; 
	margin: 0 auto; 
	width: 970px; 
	height: 100% auto;
	font-size: 0.85em; 
	display: block;
	overflow: visible;
}
#maincontent1 {float: left; width: 220px; background-color: #FFD982; text-indent: 1em; height: 100% auto; }
#maincontent2 {float: left; width: 550px; background-color: #FFF3D9; text-indent: 2em; height: 100% auto; }
#maincontent3 {float: left; width: 200px; background-color: #FFFFFF; text-indent: 1em; height: 100% auto; }
/* padding: 5px 0 5px 0; text-indent: 1em; */
/* padding: 5px 0 5px 0; text-indent: 2em; */

#maincontent3 ul {list-style: none;}
#maincontent3 h4 { color: #660099; font-weight: bolder;}

#maincontent1 h4 { color: #660099; font-weight: bolder;}
#maincontent1 ul ul { padding-left: 24px; }
/*#maincontent1 ul .productSubCat { display: none; }*/

/* main content : product list // ++++++++++++++++++++++++++++++++ // start */
.productList { list-style: none; clear: both; }
.productList li { clear: both; float: none; width: 550px; display: block ; height: 120px; overflow: visible; margin: 5px 0 3px 0; }
.productList li .thumbNailImage { background-color: #FFFFFF; width: 100px; height: 100px; float: left; padding: 0; text-indent: 0; }
.productList li .productcontent { width: 280px; float: left; text-indent: 1em; padding: 5px; border-top: 2px solid #669999; }
.productList li .price { width: 130px; float: left; text-align: right; border-top: 2px solid #669999; }

#maincontent2 h2 { font-weight: bolder; }
#maincontent2 h3 { font-size: 0.96em; font-weight: bold; }
#partnerList { background-color: #FFFBF2; clear: both; float: none; }
#maincontent2 h3.heading { padding: 3px; background: #FFFFFF url('../images/_MetalBare0084_7_S.jpg') ; }

p.address {color: #111111; text-indent: 0; font-size: 0.92em;}

/* main content : product list // ++++++++++++++++++++++++++++++++ // end */

.headingImage { width: 550px; background-color: #FFFFFF; padding: 0; text-indent: 0; margin: 0; }
.price {}
.content {padding: 16px;}
.paginate { clear: both; float: none; width: 550px; font-size: 0.84em; }
.paginate a:hover { background-color: #CCFFFF; }

#gallery { list-style: none; }
#gallery li { width:100px; height: 100px; float: left; padding: 3px; }

#productPromotion { clear: both; }
/*  ============================================  */



/* sponsor // ++++++++++++++++++++++ : start */
#sponsor {list-style: none;}
#sponsor li { width: 100px; padding: 4px 0 0 0;  }
/* sponsor // ++++++++++++++++++++++ : end */


/* ---------------------------------------------------------- setting footer : start */
#footer {
	clear: both;
	margin: 0 auto;
	width: 970px; height: 100px;
	background-color: #EEEEFF;
} /* background: #00129D url("../images/bg_footer.jpg") repeat-x; */
#footer p {float: left; margin-top: 6px; width: 800px; font-size: 0.7em; color: #666666;}
#footer p.address {color: #111111; margin-left: 20px; text-indent: 0; font-size: 0.65em;}
#footer img {float: right; margin: 7px 10px;} /* izzisoft webbutton */

#footnav, #subnav {
	clear: both;
	margin: 0 auto;
	width: 970px; height: 25px;
	color: #DEDEDE;
	background: #99CFFF;
}
#footnav li, #subnav li {list-style-type: none; float: left; margin-left: 20px; font-size: 0.85em; line-height: 25px;}
#footnav li.current, #subnav li.current {font-weight: normal;}
#footnav a, #subnav a {color: #FFFFFF;}
#footnav a:hover {color: #FF6666;}
/* ---------------------------------------------------------- setting footer : end */


/* -------------------------------------------------------- setting lightbox */

#lightboxbg {
	display: none; visibility: hidden;
	position: absolute;
	top:0; left:0;
	width: 100%; height: 100%;
	z-index: 1000;
	background-color: #AAAAAA;
	opacity: .70;
	filter: alpha(opacity=70);
}

#lightbox {
	display: none; visibility: hidden;
	overflow: auto;
	z-index: 1010;
	position: absolute;
	top: 50%; left: 50%;
	margin: -170px 0 0 -250px; padding: 0;
	width: 500px; height: 300px;
	border: 6px solid #EC8000;
	text-align: left;
	background-color: #FFFFFF;
	color: #222222;
}

#lightbox .closebutton {
	background-color: #DEDEDE;
	text-align: right;
	cursor: pointer;
	cursor: hand;
}
#lightbox h4 {margin-left: 10px; font-weight: bold;}
#lightbox p {text-indent: 0; margin-left: 10px; font-size: 0.9em;}
#lightbox li {list-style-type: none; display: inline;}

#lightboxgallery li {list-style-type: none; width: 100px; height: 100px; margin: 10px 10px;}

#ajaxcalendar {
	display: none; visibility: hidden;
	z-index: 2000;
	width: 200px;
	background-color: #BBBBBB;
	opacity: .85;
	filter: alpha(opacity=85);
}
#ajaxcalendar .closebutton {
	display: none; visibility: hidden;
	overflow: auto;
	background-color: #DEDEDE;
	text-align: right;
	cursor: pointer;
	cursor: hand;
}
#ajaxcalendarcontent {font-size: 0.8em;}
#ajaxcalendarcontent table {border-collapse: collapse;}
#ajaxcalendarcontent table th, #ajaxcalendarcontent table td {border: 1px solid #BBBBBB;}
#ajaxcalendarcontent table th {background-color: #FFCC00;}
#ajaxcalendarcontent table a {display: block; background-color: #FFFFCC;}
#ajaxcalendarcontent table a:hover {background-color: #EFD560;}


/* ------------------------------------------------------------------ bbcode */

.bbctext {clear: both; padding-top: 20px; font-size: 0.95em; line-height: 140%;} /* span around user text */
.bbctext ul, .bbctext ol {list-style-position: outside; margin-left: 20px;}
.bbctext ul {list-style: circle;}
.bbctext li {font-size: 1em;}

.bbcunderline {text-decoration: underline;}
.bbcbig {font-size: 1.15em;}
.bbcsmall {font-size: 0.85em;}

.bbcwhite {color: #FFFFFF;}
.bbcblack {color: #000000;}
.bbcred {color: #FF0000;}
.bbcblue {color: #330099;}
.bbcyellow {color: #FFFF00;}
.bbcorange {color: #FF7E00;}
.bbcgreen {color: #99FF66;}
.bbccyan {color: #333399;}
.bbcviolet {color: #CC00FF;}
.bbcpink {color: #FF99FF;}
.bbcgrey {color: #666666;}
.bbcbrown {color: #993300;}