/* CSS for Huetronworld.com */

/* review */
.review-box {
  margin: -80px 0px 0px 0px;
}

/* video guide */
.video-guide-box {
  margin: -80px 0px 0px 0px;
  padding: 20px;
  background: url("http://lib.store.yahoo.net/lib/yhst-16094566549994/main-free.jpg") left top no-repeat;

}  

#hor-line {
  margin-top: -7px;
  margin-bottom: -6px;
}

#right-nav {
  list-style: none;
  float: right;
  width:180px;
  margin-left: 0px;
}

#tab-box {
  list-style: none;
  float: left;
  width:600px;
  margin-left: 5px;
}

#tab-box h2,
#tab-box h3 { 
  display:none; 
}

#tab-box ul {
  font-size: 14px;
  font-family: arial, "Century Gothic";
  height: 30px;
}

#tab-box ul li {
  list-style: none;
  float: left;
  margin: 0px 0px -2px 3px; 
  position:relative; 
  top: 0px;
  background: url("http://lib.store.yahoo.net/lib/yhst-16094566549994/off-left.jpg") left top no-repeat;
  padding: 0px 0px 0px 14px;
}

#tab-box ul li a {
  display:block;
/*  padding:.25em .75em;
  line-height:1.5; 
  border:1px solid #1593DF; 
  text-decoration:none;
  background:#aaa; 
  color:#fff; */

/*  height: 30px; */
  background: url("http://lib.store.yahoo.net/lib/yhst-16094566549994/off-right.jpg") right top no-repeat;
  padding: 8px 14px 7px 5px;
  text-decoration: none;
  margin-left: -6px;
}

#tab-box ul li a:hover,
#tab-box ul li a:focus{
}

#tab-box ul li.tabs-selected {
  background: url("http://lib.store.yahoo.net/lib/yhst-16094566549994/on-left.jpg") left top no-repeat;
  text-decoration: none;
}

#tab-box ul li.tabs-selected a {
/*  border-bottom:1px solid #fff;
  background:#fff; 
  color:#f60; */
  background: url("http://lib.store.yahoo.net/lib/yhst-16094566549994/on-right.jpg") right top no-repeat;
  color: #FFFF00;
  text-decoration: none;
  margin-left: -6px;
}


#tab-box div {
  clear:left;
  padding-top:1em;
  background: url("http://lib.store.yahoo.net/lib/yhst-16094566549994/bodytop.jpg") right top repeat-x;
/*  border-color: #CCCCCC #CCCCCC #CCCCCC; */
  border-color: #CCCCCC #CCCCCC #CCCCCC; 
  border-style: none solid solid;
  border-width: 0pt 1px 1px;
} /* IE6 ¸¶Áø ¹ö±× */

#tab-box div.tabs-selected { display:block; }
#tab-box div.tabs-hide { display:none; }
#tab-box ol { margin-top:0; } /* IE6 ¸¶Áø ¹ö±× */
#tab-box ol li { line-height:2; }

/* thick box start*/
#TB_window {
color:#333333;
font-family:Arial,Helvetica,sans-serif;
font-size:12px;
font-size-adjust:none;
font-stretch:normal;
font-style:normal;
font-variant:normal;
font-weight:normal;
line-height:normal;
}
#TB_secondLine {
color:#666666;
font-family:Arial,Helvetica,sans-serif;
font-size:10px;
font-size-adjust:none;
font-stretch:normal;
font-style:normal;
font-variant:normal;
font-weight:normal;
line-height:normal;
}
#TB_window a:link {
color:#666666;
}
#TB_window a:visited {
color:#666666;
}
#TB_window a:hover {
color:#000000;
}
#TB_window a:active {
color:#666666;
}
#TB_window a:focus {
color:#666666;
}
#TB_overlay {
height:100%;
left:0px;
position:fixed;
top:0px;
width:100%;
z-index:100;
}
.TB_overlayMacFFBGHack {
background:transparent url(macFFBgHack.png) repeat scroll 0%;
}
.TB_overlayBG {
background-color:#000000;
opacity:0.75;
}
* html #TB_overlay {
position:absolute;
}
#TB_window {
background:#FFFFFF none repeat scroll 0%;
border:4px solid #525252;
color:#000000;
display:none;
left:50%;
position:fixed;
text-align:left;
top:50%;
z-index:102;
}
* html #TB_window {
position:absolute;
}
#TB_window img#TB_Image {
border-color:#666666 rgb(204, 204, 204) rgb(204, 204, 204) rgb(102, 102, 102);
border-style:solid;
border-width:1px;
display:block;
margin:15px 0pt 0pt 15px;
}
#TB_caption {
float:left;
height:25px;
padding:7px 30px 10px 25px;
}
#TB_closeWindow {
float:right;
height:25px;
padding:11px 25px 10px 0pt;
}
#TB_closeAjaxWindow {
float:right;
margin-bottom:1px;
padding:7px 10px 5px 0pt;
text-align:right;
}
#TB_ajaxWindowTitle {
float:left;
margin-bottom:1px;
padding:7px 0pt 5px 10px;
}
#TB_title {
background-color:#E8E8E8;
height:27px;
}
#TB_ajaxContent {
clear:both;
line-height:1.4em;
overflow:auto;
padding:2px 15px 15px;
text-align:left;
}
#TB_ajaxContent.TB_modal {
padding:15px;
}
#TB_ajaxContent p {
margin:0pt;
padding:5px 0px;
}
#TB_load {
display:none;
height:13px;
left:50%;
margin:-6px 0pt 0pt -104px;
position:fixed;
top:50%;
width:208px;
z-index:103;
}
* html #TB_load {
position:absolute;
}
#TB_HideSelect {
background-color:#FFFFFF;
border:medium none;
height:100%;
left:0pt;
opacity:0;
position:fixed;
top:0pt;
width:100%;
z-index:99;
}
* html #TB_HideSelect {
position:absolute;
}
#TB_iframeContent {
border:medium none;
clear:both;
margin-bottom:-1px;
margin-top:1px;
}
/* thick box end */

#system_content {
       background-image: url(http://lib.store.yahoo.net/lib/yhst-16094566549994/BGImageForFlashMenu673x80.jpg);
       width: 670px;
       height: 80px;
       float: left;
       display: block;
}

.system_content_links {
       background-image: url(http://lib.store.yahoo.net/lib/yhst-16094566549994/BGImageForFlashMenu673x80.jpg);
       width: 670px;
       height: 80px;
       font-size: 14px;
       float: right;
       font-family: Arial, "Century Gothic";
       text-align: right;
}


#brand_content {
  background-image: url(http://lib.store.yahoo.net/lib/yhst-16094566549994/bluebar2-950x46.jpg); 
 /* display: inline; */
  height: 46px;
  text-align: center;
  position: relative;
  width: 950px;
}


#brand_content a {
	color: #FFFFFF;
	text-decoration: none;
}



#brand_content a:hover {
	color: #FF9900;
	text-decoration: none;
}


#brand_content3, #brand_content3 a {
	color: #FFFFFF;
	text-decoration: none;
}

#brand_content3 a:hover {
	color: #FF9900;
	text-decoration: none;
}


.brand_content_links {
	color: #FFFFFF;
 	/* float: left; */
	text-align: center;
	font-size: 14px;
	/* font-weight: bold; */
	height: 46px;
	vertical-align: absmiddle; 
	text-decoration: none;
	width: 950px;
	font-family: Arial, "Century Gothic";
         position: relative; 
	background-image: url(http://lib.store.yahoo.net/lib/yhst-16094566549994/bluebar2-950x46.jpg);  
}

.brand_content_links2 {
	color: #FFFFFF;
 	/* float: left; */
	text-align: center;
	font-size: 14px;
	/* font-weight: bold; */
	height: 46px;
	vertical-align: absmiddle; 
	text-decoration: none;
	width: 950px;
	font-family: Arial, "Century Gothic";
         position: relative; 
	background-image: url(http://lib.store.yahoo.net/lib/yhst-16094566549994/MenuMid-blue1x46.jpg);  
         background-repeat: repeat-x;
}

.brand_content_links3 {
	color: #FFFFFF;
	text-decoration: none;
}


#brand_content_footer {
  background-image: url(http://lib.store.yahoo.net/lib/yhst-16094566549994/bluebar2-footer950x40.jpg); 
 /* display: inline; */
  height: 40px;
  text-align: center;
  position: relative;
  width: 950px;
}


#brand_content_footer a {
	color: #FFFFFF;
	text-decoration: none;
}



#brand_content_footer a:hover {
	color: #FF9900;
	text-decoration: none;
}


.brand_content_links_footer {
	color: #FFFFFF;
 	/* float: left; */
	text-align: center;
	font-size: 14px;
	/* font-weight: bold; */
	height: 40px;
	vertical-align: absmiddle; 
	text-decoration: none;
	width: 950px;
	font-family: Arial, "Century Gothic";
         position: relative; 
	background-image: url(http://lib.store.yahoo.net/lib/yhst-16094566549994/bluebar2-footer950x40.jpg);  
}

#end_caption {
         background-image: url(http://lib.store.yahoo.net/lib/yhst-16094566549994/graybg-950x20.jpg);
         width: 950px;
         height: 20px;
         background-repeat: no-repeat;
}


#av_products_bg {
         background-image: url(http://images.huetronworld.com/body/av150x25_blue.jpg);
         width: 150px;
         height: 25px;
         background-repeat: no-repeat;
}


#mp3_accessories_bg {
         background-image: url(http://images.huetronworld.com/body/mp3players150x25_blue.jpg);
         width: 150px;
         height: 25px;
         background-repeat: no-repeat;
}

#games_bg {
         background-image: url(http://lib.store.yahoo.net/lib/yhst-16094566549994/game150x25blue.jpg);
         width: 150px;
         height: 25px;
         background-repeat: no-repeat;
}

#phones_bg {
         background-image: url(http://images.huetronworld.com/body/PHONES150x25_blue.jpg);
         width: 150px;
         height: 25px;
         background-repeat: no-repeat;
}

#charms_bg {
         background-image: url("http://lib.store.yahoo.net/lib/yhst-16094566549994/FUNSTUFF150x25-blue.jpg");
         width: 150px;
         height: 25px;
         background-repeat: no-repeat;
}

#others_bg {
         background-image: url(http://images.huetronworld.com/body/others150x25_blue.jpg);
         width: 150px;
         height: 25px;
         background-repeat: no-repeat;
}

#aboutus_bg {
         background-image: url(http://images.huetronworld.com/body/about-us150x25_blue2.jpg);
         width: 150px;
         height: 25px;
         background-repeat: no-repeat;
}

#testimonial_bg {
         background-image: url(http://images.huetronworld.com/body/test-us150x25_blue2.jpg);
         width: 145px;
         height: 25px;
         background-repeat: no-repeat;
}

/* CSS Document */
/* 092506 0.02*/
/*Note to Merchants: If you wish to make edits to your CSS, we suggest you make them in the css-edits stylesheet or another css file that you create and reference in 

your template. By doing so you will ensure that you are not introducing errors into the main stylesheets, which you could not recover if you edited them directly. This 

also allows Yahoo! to potentilly release fixes (if necessary) by you copying in the newlt revised files without overwriting any of your subsequent edits.*/

/*

/* Elements */
a{color:#98a280}
a:visited{/*color:#98a280*/}
* {padding:0; /*margin:0;*/}

td {
   font-size: 12px ; 
   color:#000000; 
   /* original padding:0; */
   /* padding: 2pt 12pt 2pt 0pt; */
   padding:0px 5px 0px 0px;
   margin:0;
}

h2, h3 {
   margin-left: 10px;
}

h1 {
    color: #FF6600;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 28px;
    font-weight: bold;
    text-align: center;
    line-height: 32px;
    margin: 1px;
}

body {background-color: #eceddc; background-image:url('') ; font:normal 12px Arial, Helvetica, sans-serif; text-align:center; 

width:100%;margin:0;color:#000000; }

/* Classes */
.boxclose {zoom:1;}

.breadcrumbs {
   font-size: 10px;
   margin-left: 10px;
   margin-top: 4px;
   margin-bottom: 4px;
}
.clear {clear:both; display:block; font-size:1px; height:1px; line-height:-1;}
.last {border:0 solid;}
  /* Form Buttons */

.ys_primary{ background:#b3504a;color:#ffffff;font:bold 11px Arial,verdana,sans-serif;padding:1px 5px;text-

align:center;cursor:pointer; display:block; margin-top:10px;}
/*input.ys_primary{ background:#66A5FF;color:#FFF;font:bold 11px Arial,verdana,sans-serif;padding:1px 5px;text-align:center;cursor:pointer; }*/
/*input.add2cartsubmit {background-color:#888; border-color:#DDD #AAA #555; border-style:solid; border-width:1px 1px 1px; color:#fff; font-weight:bold; 

outline:#000 solid 0px; padding:0 2px;}*/
label.add2cartlabel {border:1px solid #000;}
/*input.buttonsubmit {background-color:#888; border-color:#DDD #AAA #555; border-style:solid; border-width:1px 1px 1px; color:#fff; font-size:0.8em font-

weight:bold; outline:#000 solid 0px; padding:0 2px; text-transform:uppercase;}*/
/*label.buttonlabel {border:1px solid #000;}*/
.buttonlabel {margin-left:4px}

/* IDs */
#info-div{
	background-color:#FFFFFF;
	padding:0px;
	zoom:1;
}
#info-div:after{clear:both; content:"."; display:block; height:0; visibility:hidden;}
#accessorytitle {}
	#itemtype #accessorytitle {background:none; color:#b3504a; font:bold 14px Tahoma, Geneva, Verdana, sans-serif; 

padding:2px 10px 8px;}

#bodycontent {
     float:right; 
     width:800px;
} /* 150 + 800 = 950 */ 
  /* The Min-width is needed for Moz to stretch the bodycontent that is shrinkwrapping content due to 
floats. This is only necessary on pages without Tables in the contents. Min-width breaks Opera's layout so Width:100% is used instead of Min-width. */

#bodyshell {background-color:#ffffff; border-left:150px solid #f1f2ed; float:left; zoom:1; margin:0;} /*Left 

Column Color*/ /* Background color is needed to counter an IE rendering bug that erases the left column bgcolor */ /* float:left is needed in Moz to handle extra wide 

cntent that breaks the width */ /* Left/Right Margin was removed due to expanded content errors in Moz, this was used to push the nav/content area in to match the 

mock-up */

*:first-child+html #bodyshell { 
                        width:800px;
}

#bodyshell:after {clear:both; content:"."; display:block; height:0; visibility:hidden;}

#brandmark {float:left; font:normal 10px Tahoma, Geneva, Verdana, sans-serif; width:200px;} /* 510 + 250 = 760 */

#brandmark a {color:#98a280; display:block; padding:0 0 0px 0px; text-decoration:none;}

#caption {zoom:1;}
#caption:after {clear:both; content:"."; display:block; height:0; visibility:hidden;}
#contentarea #caption {
    margin-bottom: 5px;  
    margin-left: 5px;
    margin-right: 0px;
}

#image-bar{
    margin-left: 5px;
    margin-right: 0px;
}

.image-bar{
    margin-left: 5px;
    margin-right: 0px;
}

#itemtype #caption {/*padding:0 10px;*/}
#maintype #caption {background-color:#fff; padding:0px;}

#captionarea, #info-div {margin:0px 0px 0px; /*border-bottom:1px #fff solid;*/} /* 1px is used to prevent Margin Folding */

#messagearea {
    margin-bottom: -20px;
}

/*#captionarea, #messagearea, #info-div {margin:0px 0px 0px; /*border-bottom:1px #fff solid;*/} /* 1px is used to prevent Margin Folding */*/


#messagearea #messagetitle{background:#f1f2ed url('') ; color:#b3504a; font:bold 

14px Tahoma, Geneva, Verdana, sans-serif; padding:4px 15px 6px;}
#itemtype #contentarea #itempage-captiontitle {
                           /* original 
                           margin:15px 0 10px; */
                           margin:15px 10px 10px;
                           padding:0 2px;
}

#itemtype #itempage-captiontitle {background:none; color:#000000; font:bold 14px Tahoma, Geneva, Verdana, sans-serif; margin:0; 

padding:2px 2px 8px;} /*The Left/Right Padding is smaller because the Caption Title needs to be nested within the Caption on Item pages, but not on Section pages 

*/

#container {margin:0 auto; text-align:left; width:960px; border:solid 1px #98a280; background-color: #ffffff;} /* This "container" is 

needed as IE produces resize induced rendering errors when using the BODY element for a container. */ 

#contentarea {
/*    margin:0 0 10px 0; */
     margin: 0px;
}

#section-contenttitle {
  background-color:#ffffff; 
  color:#d44225; 
  font:bold 20px Arial, Helvetica, sans-serif; 
  text-align: left;
  margin-left: 10px; 
  margin-bottom: 4px;
  padding: 0px 0px 0px;}

#bodyContent #info-div #searchpageHeader {
     background-color:#ffffff; 
     color:#d44225; 
     font:bold 20px 
title-text-font; 
     margin:0; 
     padding:4px 15px 6px;
}

#item-contenttitle {
/*   background-color:#ffffff; */
   background-color: #85B0FC;
/*   color:#d44225; */
   color: #000000;
   font: 22px Arial, Helvetica, sans-serif; 
   font-weight: bold;
   text-align: left;
/*   margin:0 15px;  */
   margin: 0pt 5px 0px 10px;
/*   padding:4px 1px 6px; */
   padding: 5px 10px;
}

#specialstitle {background:#f1f2ed url('') ; color:#b3504a; font:bold 14px 

Tahoma, Geneva, Verdana, sans-serif; margin:0 10px; padding:4px 15px 6px;}

/* original 
#copyright {
     color:#f1f2ed; 
     display:block; 
     font:normal xx-small/1.2 verdana, sans-serif;
     padding:0 15px 15px; 
     text-align:right;
} */

#copyright {
     color:#f1f2ed; 
     display:block; 
     font:normal xx-small/1.2 verdana, sans-serif;
     padding:0 15px 15px -5px; 
     text-align:center;
     float: left;
}


#finaltext, #introtext {margin:10px;}

#footer {
   /* original
   background:#98a280 url('') ; */
   clear:both;zoom:1;
   /* original
   margin: 0px; */
   margin: 0px 0px 0px 0px;
}
#footer-links {color:#f1f2ed; display:block; font-weight:bold; font-size:11px; padding:10px 0 15px; text-align:center;}
#footer-links a {color:#f1f2ed; text-decoration:none; text-transform:uppercase;}
#footer-links a:hover {text-decoration:underline;}

#header {background:#ffffff url('') ;zoom:1; min-height:120px; height:155px !important; 

height:120px;} /* _height and zoom are MS hacks */
#header:after {clear:both; content:"."; display:block; height:0; visibility:hidden;}

/* Search Page Styles */
#info-div form, 
     .infoText div {margin:0 10px;}
#info-div form table td a img {margin-right:5px;}
#info-div form table td b {display:block; padding:15px 0 5px;}
#info-div form table td font {font-size:1em;}
/* !Search Page Styles */

#introtext {} /* REF: #finaltext */
	

#itemarea {
    background-color:#fff; 
    margin:0px 5px 0px 10px;
    padding:0px; 
/*    zoom:1;  */
    width: auto;
    border: 1px solid #C9C9C9;
}

/* original
#itemarea {
	background-color: #FFFFFF;
	margin: 0px 15px 0px;
	padding: 10px;
} 
original */


.orderbox {
   text-align: right;
   background-color:#FFFFFF;
/*   border-bottom-color:#C9C9C9; 
   border-bottom-style:solid;
   border-bottom-width:1px;
   border-left-color:#C9C9C9;
   border-left-style:solid;
   border-left-width:1px;
   border-right-color:#C9C9C9;
   border-right-style:solid;
   border-right-width:1px;
   border-top-color:#C9C9C9;
   border-top-style:solid;
   border-top-width:1px;  */
/*   margin-bottom:10px; */
/*   padding: 10px 50px 10px 10px; */
   margin-bottom: 0px;
   padding: 10px 50px 0px 10px;
}



#itemarea:after {clear:both; content:"."; display:block; height:0; visibility:hidden;}

#nav-general {
    clear:both; 
    float:right; 
    display:block; 
    list-style:none; 
    margin:0px 5px -30px 0px; 
}

#nav-general li {background-color:#ffffff; border:1px solid #ffffff; border-top:0; float:left; margin:0 2px;} /* 

General Link Colors */

#nav-general li a {color:#b3504a; display:block; font-size:13px; font-weight:bold; padding:4px 20px 6px; text-

align:center; text-decoration:none; white-space:nowrap;}

#nav-general li a:hover {background-color:#ffffff; color:#98a280;}

#nav-general a.linkcheckout {background:transparent url('') 90% 0 no-repeat; padding-right:35px;}	

#nav-product {_display:inline; float:left; margin-left:-150px; overflow:hidden; position:relative; width:150px; z-index:100;} /* IE Experiences the pixel doubling bug 

here. "display: inline;" fixes this. Position Relative and Z-Index are needed for IE in order to display the background colors */

#nav-product ul li a {border-bottom:1px solid #b4bbab; color:#b3504a; display:block; font-weight:bold; 

font-size:10px; height:14px; margin:0; min-height:14px; padding:0px 0px 0px 0px; text-decoration:none;width:150px;}

html>body #nav-product a {height:auto;}

#nav-product ul li a:hover {background-color:#f1f2ed; color:#98a280;}

#nav-product li {margin:0;}

#nav-product ul {list-style:none;}

 * html #nav-product ul li a {  /* make hover effect work in IE */
	width: 150px;
}
#htmltop, #htmlbottom, #htmltop a, #htmlbottom a{padding:5px;color:#000000}

#nav-product ul li a{width:150px; background-color: #f1f2ed;}

* html #nav-product ul li a{width:150px; height:100%; overflow:hidden; background-color: #f1f2ed; overflow:hidden;}

* html #nav-product { overflow:visible; width:150px; }

#hw-searchx {
height:0px;
left:00px;
margin:0px;
padding:3px;
position:absolute;
top:1350px;
width:150px;
}

#searcharea {background:#98a280 url('') ; display:block; margin:0 0 0;}
#searcharea input {font-size:1.0em;}
#searcharea fieldset {border:0 solid; display:block; padding:10px 0 10px 13px;}
#searcharea label {color:#f1f2ed; font-size:0.85em; font-weight:bold; text-transform:uppercase;}
#searcharea label span, #searcharea label input {vertical-align:middle}
#searchsubmit{ background:#98a280 url('') ;color:#f1f2ed;font:bold 11px Arial,verdana,sans-

serif;padding:1px 5px;text-align:center;cursor:pointer;display:inline; margin:0;}
#searchpageHeader {background-color:#ffffff; color:#d44225; font:bold 20px Arial, Helvetica, sans-serif; margin:0; 

padding:4px 15px 6px;}
input#query {margin-left:4px;}
#query {padding:2px}

#slogan {color:#98a280; display:block; float:right; font:normal 12px Tahoma, Geneva, Verdana, sans-serif; padding:2.7em 15px 10px 10px; 

width:225px; text-align:right;} /* 225 + 25= 250 */

*:first-child+html #info-div,
*:first-child+html #specialtitle,
*:first-child+html #messagearea { width:780px; } 
/* *:first-child+html #itemarea { width:760px; } */
*:first-child+html #itemarea { width:auto; }

#badge { margin: 15px auto; }

* html #badge { width:136px; text-align:center; }