@media screen {
/*._prt_yes { display:none; }*/
._prt_break { display:none; }
._prt_watermark { display:none; }
}

/* for printing */
@media print {
._prt_yes { display:block; }
._prt_no { display:none; }
._prt_break  { display:block; page-break-before:always; }
._prt_watermark {display:block;}
}

/*-- badge styling --------------------*/
.badge-style {
   position:relative;
}
.badge-style[data-badge]:after {
   content:attr(data-badge);
   position:absolute;
   top:-10px;
   right:-7px;
   font-size:.7em;
   background:green;
   color:white;
   width:18px;height:18px;
   text-align:center;
   line-height:18px;
   border-radius:50%;
   box-shadow:0 0 1px #333;
}

/* hide the badge if no content */
.badge-style[data-badge=""]:after {
content: none;

}
/*-----------------------------------*/


/*-- nav ------------------------------*/
.list-grid {
list-style-type:none;
margin:0;
padding:0;
}

.list-grid > li {
display: inline-block;
*display:inline; /* ie7 */
}

.nav-desktop, .nav-mobile {
margin:0;
}

.nav-list,
.nav-list ul,
.nav-list li {
margin:0; padding:0;
}

.nav-list li {	
	list-style: none;
	display: inline-block;
	*display:inline; /* ie7 */
}

.nav-list a {
	padding:0;
	text-decoration: none;
	color: #999;
	line-height: 100%;
	text-shadow:none;
}

.nav-list a:hover {
	color: #000;
}

/*-----------------------------------*/


/* sub-nav menu desktop css */
.sub-nav-desktop {
	margin: 20px 0;
}
.sub-nav-desktop ul {
	margin: 0;
	padding: 0;
}
.sub-nav-desktop li {
	margin: 0 5px 10px 0;
	padding: 0;
	list-style: none;
	display: inline-block;
	*display:inline; /* ie7 */
}
.sub-nav-desktop a {
	padding: 3px 12px;
	text-decoration: none;
	color: #999;
	line-height: 100%;
	text-shadow:none;
}
.sub-nav-desktop a:hover {
	color: #000;
}

.sub-nav-desktop .current a {
	background: #999;
	color: #ffffff !important;
	border-radius: 5px;
}

/* right nav */
.sub-nav-desktop.right ul {
	text-align: right;
}

/* center nav */
.sub-nav-desktop.center ul {
	text-align: center;
}

/*
sub-nav Mobile
*/
.sub-nav-mobile {
	position: relative;
	min-height: 40px;
	margin: 20px 0;
}

.sub-nav-mobile ul {
	margin: 0;
	width: 100%; /* 180px */
	padding: 5px 0;
	position: absolute;
	top: 0;
	left: 0;
	border: solid 1px #aaa;
	background: #fff url(/s/sh/icon/icon-menu.png) no-repeat 10px 11px;
	border-radius: 5px;
	box-shadow: 0 1px 2px rgba(0,0,0,.3);
}

.sub-nav-mobile li {
	display: none; /* hide all <li> items */
	margin: 0;
}

.sub-nav-mobile .current {
	display: block; /* show only current <li> item */
	pointer-events: none;
   cursor: default;
}

.sub-nav-mobile a {
	display: block;
	padding: 5px 5px 5px 32px;
	text-align: left;
	
	text-decoration: none;
	color: #999;
	line-height: 100%;
	text-shadow:none;
}

.sub-nav-mobile .current a {
	background: none;
	color: #666;
}

/* hover */
.sub-nav-mobile ul:hover, .sub-nav-mobile ul.hover {
	background-image: none;
}

.sub-nav-mobile ul:hover li, .sub-nav-mobile ul.hover li {
	display: block;
	margin: 0 0 5px;
}

.sub-nav-mobile ul:hover .current, .sub-nav-mobile ul.hover .current {
	background: url(/s/sh/icon/icon-check.png) no-repeat 10px 7px;
	
	pointer-events: auto;
   cursor: pointer;
	cursor: hand;
}

/* right nav */
.sub-nav-mobile.right ul {
	left: auto;
	right: 0;
}

/* center nav */
.sub-nav-mobile.center ul {
	left: 50%;
	margin-left: -90px;
}



/*---------------------------------------*/
/* my font style */
//h2 { color:#009700; font-family: Tahoma, Geneva, sans-serif; font-weight:normal; margin:0;} /*color:#009700; dark green */

p, .p2 { font-family: 'Open Sans', sans-serif; font-size:1.071em; line-height:1.429em; margin:0; }

.p2 {
font-size:0.786em;
line-height:1.286em;
font-weight:normal;
}

.sans_font {
font-family: sans-serif;
font-size:1.071em;
}


/* Basic styles */


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


/*Safari & Chrome*/
::-webkit-input-placeholder{
	text-transform: none;
	font-size:14px;
	color:#BBBBBB;
	padding-top:2px; /* so far only has effect in mobile */
} 
/*Firefox 19+*/
::-moz-placeholder{
	text-transform: none;
	font-size:14px;
	color:#BBBBBB;
	padding-top:2px;
}
/*Firefox 18-*/
:-moz-placeholder{
	text-transform: none;
	font-size:14px;
	color:#BBBBBB;
	padding-top:2px;
}
/*IE*/
:-ms-input-placeholder {
	text-transform: none;
	font-size:14px;
   color:#BBBBBB;
	padding-top:2px;
}
/*---------------------------------------*/
/* for multi lines ellipsis. require another jquery to function
*/
.ellipsis {
	white-space: nowrap;
	overflow: hidden;
	text-overflow:ellipsis;
}

.ellipsis.multiline {
	white-space: normal;
}

.strike-center {
    position: relative;
    white-space: nowrap; /* would center line-through in the middle of the wrapped lines */
}

.strike-center:after {
    border-top: 1px solid #000000;
    position: absolute;
    content: "";
    right: 0;
    top:48%;
    left: 0;
}


.item_title {
color:#062f88;
}

/*---------------------------------------*/
/* price style
*/
.price_old {
color:#c0c0c0;
text-decoration: line-through;
}

.price_new {
color:#c40000;
font-weight:bold;
}

/*---------------------------------------*/
html,body {
margin:0px; padding:0px; height:100%;
}

/*---------------------------------------*/
/* for equal width of each li
*/
.ul_2col > li { width:50%;} /* 2 col */
.ul_3col li { width:33.333%; } /* 3 col */
.ul_4col li { width:25%; } /* 4 col */
.ul_6col li { width:16.666%; } /* 6 col */
.ul_8col li { width:12.5%; }


/*---------------------------------------*/
/* bootstrap.css
temp use table css from bootstrap */
table {
  max-width: 100%;
  background-color: transparent;
  border-collapse: collapse;
  border-spacing: 0;
}

.table {
  width: 100%;
  margin-bottom: 20px;
}

.table th,
.table td {
  padding: 8px;
  line-height: 20px;
  text-align: left;
  vertical-align: top;
  border-top: 1px solid #dddddd;
}

.table th {
  font-weight: bold;
}

.table thead th {
  vertical-align: bottom;
}

.table caption + thead tr:first-child th,
.table caption + thead tr:first-child td,
.table colgroup + thead tr:first-child th,
.table colgroup + thead tr:first-child td,
.table thead:first-child tr:first-child th,
.table thead:first-child tr:first-child td {
  border-top: 0;
}

.table tbody + tbody {
  border-top: 2px solid #dddddd;
}

.table .table {
  background-color: #ffffff;
}

.table-condensed th,
.table-condensed td {
  padding: 4px 5px;
}

.table-bordered {
  border: 1px solid #dddddd;
  border-collapse: separate;
  *border-collapse: collapse;
  border-left: 0;
  -webkit-border-radius: 4px;
     -moz-border-radius: 4px;
          border-radius: 4px;
}

.table-bordered th,
.table-bordered td {
  border-left: 1px solid #dddddd;
}

.table-bordered caption + thead tr:first-child th,
.table-bordered caption + tbody tr:first-child th,
.table-bordered caption + tbody tr:first-child td,
.table-bordered colgroup + thead tr:first-child th,
.table-bordered colgroup + tbody tr:first-child th,
.table-bordered colgroup + tbody tr:first-child td,
.table-bordered thead:first-child tr:first-child th,
.table-bordered tbody:first-child tr:first-child th,
.table-bordered tbody:first-child tr:first-child td {
  border-top: 0;
}

.table-bordered thead:first-child tr:first-child > th:first-child,
.table-bordered tbody:first-child tr:first-child > td:first-child,
.table-bordered tbody:first-child tr:first-child > th:first-child {
  -webkit-border-top-left-radius: 4px;
          border-top-left-radius: 4px;
  -moz-border-radius-topleft: 4px;
}

.table-bordered thead:first-child tr:first-child > th:last-child,
.table-bordered tbody:first-child tr:first-child > td:last-child,
.table-bordered tbody:first-child tr:first-child > th:last-child {
  -webkit-border-top-right-radius: 4px;
          border-top-right-radius: 4px;
  -moz-border-radius-topright: 4px;
}

.table-bordered thead:last-child tr:last-child > th:first-child,
.table-bordered tbody:last-child tr:last-child > td:first-child,
.table-bordered tbody:last-child tr:last-child > th:first-child,
.table-bordered tfoot:last-child tr:last-child > td:first-child,
.table-bordered tfoot:last-child tr:last-child > th:first-child {
  -webkit-border-bottom-left-radius: 4px;
          border-bottom-left-radius: 4px;
  -moz-border-radius-bottomleft: 4px;
}

.table-bordered thead:last-child tr:last-child > th:last-child,
.table-bordered tbody:last-child tr:last-child > td:last-child,
.table-bordered tbody:last-child tr:last-child > th:last-child,
.table-bordered tfoot:last-child tr:last-child > td:last-child,
.table-bordered tfoot:last-child tr:last-child > th:last-child {
  -webkit-border-bottom-right-radius: 4px;
          border-bottom-right-radius: 4px;
  -moz-border-radius-bottomright: 4px;
}

.table-bordered tfoot + tbody:last-child tr:last-child td:first-child {
  -webkit-border-bottom-left-radius: 0;
          border-bottom-left-radius: 0;
  -moz-border-radius-bottomleft: 0;
}

.table-bordered tfoot + tbody:last-child tr:last-child td:last-child {
  -webkit-border-bottom-right-radius: 0;
          border-bottom-right-radius: 0;
  -moz-border-radius-bottomright: 0;
}

.table-bordered caption + thead tr:first-child th:first-child,
.table-bordered caption + tbody tr:first-child td:first-child,
.table-bordered colgroup + thead tr:first-child th:first-child,
.table-bordered colgroup + tbody tr:first-child td:first-child {
  -webkit-border-top-left-radius: 4px;
          border-top-left-radius: 4px;
  -moz-border-radius-topleft: 4px;
}

.table-bordered caption + thead tr:first-child th:last-child,
.table-bordered caption + tbody tr:first-child td:last-child,
.table-bordered colgroup + thead tr:first-child th:last-child,
.table-bordered colgroup + tbody tr:first-child td:last-child {
  -webkit-border-top-right-radius: 4px;
          border-top-right-radius: 4px;
  -moz-border-radius-topright: 4px;
}

.table-striped tbody > tr:nth-child(odd) > td,
.table-striped tbody > tr:nth-child(odd) > th {
  background-color: #f9f9f9;
}

.table-hover tbody tr:hover > td,
.table-hover tbody tr:hover > th {
  background-color: #f5f5f5;
}

table td[class*="span"],
table th[class*="span"],
.row-fluid table td[class*="span"],
.row-fluid table th[class*="span"] {
  display: table-cell;
  float: none;
  margin-left: 0;
}

.table td.span1,
.table th.span1 {
  float: none;
  width: 44px;
  margin-left: 0;
}

.table td.span2,
.table th.span2 {
  float: none;
  width: 124px;
  margin-left: 0;
}

.table td.span3,
.table th.span3 {
  float: none;
  width: 204px;
  margin-left: 0;
}

.table td.span4,
.table th.span4 {
  float: none;
  width: 284px;
  margin-left: 0;
}

.table td.span5,
.table th.span5 {
  float: none;
  width: 364px;
  margin-left: 0;
}

.table td.span6,
.table th.span6 {
  float: none;
  width: 444px;
  margin-left: 0;
}

.table td.span7,
.table th.span7 {
  float: none;
  width: 524px;
  margin-left: 0;
}

.table td.span8,
.table th.span8 {
  float: none;
  width: 604px;
  margin-left: 0;
}

.table td.span9,
.table th.span9 {
  float: none;
  width: 684px;
  margin-left: 0;
}

.table td.span10,
.table th.span10 {
  float: none;
  width: 764px;
  margin-left: 0;
}

.table td.span11,
.table th.span11 {
  float: none;
  width: 844px;
  margin-left: 0;
}

.table td.span12,
.table th.span12 {
  float: none;
  width: 924px;
  margin-left: 0;
}

.table tbody tr.success > td {
  background-color: #dff0d8;
}

.table tbody tr.error > td {
  background-color: #f2dede;
}

.table tbody tr.warning > td {
  background-color: #fcf8e3;
}

.table tbody tr.info > td {
  background-color: #d9edf7;
}

.table-hover tbody tr.success:hover > td {
  background-color: #d0e9c6;
}

.table-hover tbody tr.error:hover > td {
  background-color: #ebcccc;
}

.table-hover tbody tr.warning:hover > td {
  background-color: #faf2cc;
}

.table-hover tbody tr.info:hover > td {
  background-color: #c4e3f3;
}

/*---------------------------------------*/
/* 
Sans Serif Web Safe Font Stacks
Sans serif text is good for reading on web pages because there are no serifs to get blurry on the screen. 

Serif Web Safe Font Stacks
Serif fonts work great for headlines. The larger type of headlines means the serifs won't get blurry on monitors. 

Monospace Font Stacks
Monospace fonts are usually used to render code and other type that looks best in a font where all the characters are the same width — like typewriter fonts. 

*/


/*---------------------------------------*/
/* Vertical Middle align
Need 2 DIV and content/text can be either DIV/SPAN
display:table Not supported in IE8 and below */

._verticalMiddle {
display:table;
height:100%;
width:100%;
//position:relative;
overflow:hidden;
background-color:#00ff99;
}


._verticalMiddle > div {
/* can use left or right to make it looks like float. */
/*position:absolute;
top:50%;*/
display:table-cell;
vertical-align:middle;
width:100%;
}

/* inside span must not contain background-color */
._verticalMiddle > div > span {
display:inline-block;
//position:relative;
//top:-50%;
}
/*---------------------------------------*/

._boxsizing {
/* make browser to calculate proper content pixel */
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box;    /* Firefox, other Gecko */
box-sizing: border-box;         /* Opera/IE 8+ */
}

._boxsize {
/* to make input liquid */
/*width:100%; <-- NOT include this will solve IE8 problem. */
padding: 0.2em;
/*border: 1px #97cbff solid; */

-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box;    /* Firefox, other Gecko */
box-sizing: border-box;         /* Opera/IE 8+ */  
}


/*---------------------------------------*/
/* imgLiquid CSS 
 */
.imgLiquid_container {
/*
width value can change here.
height must NOT use here. it is control in child div */
	border:1px solid #ddd;
	margin:0;
	padding:0;
	float:left;
	width:100%;
	background-color:#f7f7f7;
}

.imgLiquid {
/* to change width, specify in immediate parent container else on imgLiquidFill, image won't fill properly. */
	width: 100%;
	height: 300px; /* default height incase no height specified */
}
/*---------------------------------------*/


/*-- UL ---------------------------------------
UL, LI
*/
._ulnone {
list-style-type:none;
margin:0;
padding:0;
}

.list-inline { list-style-type:none; margin:0; padding:0; border:0; }
.list-inline > li { display:inline-block; margin:0; }

/*-- INPUT ------------------------------------
for all input css fields
*/

/* form input */
._input {
font-family:sans-serif;
color:#000000;
padding:0;
margin:0;
/*border: 2px #000 solid;*/
font-size:1em;
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box;    /* Firefox, other Gecko */
box-sizing: border-box;         /* Opera/IE 8+ */  
}

/* input hover background */
._input:hover {
background-color:#f0ffff;
}

._input:focus {
background-color:#f0ffff; /* works in FF. not ie. */
}



/* to solve fluid problem. now can use width 100% */
textarea { 
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box;    /* Firefox, other Gecko */
box-sizing: border-box;         /* Opera/IE 8+ */
}



._placeholder {
color:#c0c0c0;
font-weight:normal;
}

/*---------------------------------------*/



/* normal status */
._textlink {
color:#0080c0; /*#009eea,#062f88*/
}

/* when mouse over */
._textlink:hover {
color:#004a6f;
text-decoration:underline;
cursor:pointer;
cursor:hand;
}

/* when click is down */
._textlink:active {
color:#808080;
}

._cursor {
cursor:default;
}

._cursor:hover {
cursor:pointer;
cursor:hand;
}

/*-- buttons ------------------------------------
make it standard css button style
*/
._btn {
display:inline-block;
border:1px solid #c0c0c0;
background-color:#f2f2f2;
font-family:sans-serif;
font-size:1em;
color:#000000;
padding-left:0.85em;
padding-right:1em;
padding-top:0.3em;
padding-bottom:0.3em;
text-decoration:none;
cursor:default;
}


._btn:hover {
background-color:#b3ffb3;
cursor:pointer;
cursor:hand;
}

/* :active also as onMouseDown in FireFox. IE not working. */
._btn:active {
color:#ffffff;
}

._textwrap {
white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

._wordbreak{
    -ms-word-break: break-all;
    word-break: break-all;
	 
 /* Non standard for webkit */
     word-break: break-word;

    -webkit-hyphens: auto;
       -moz-hyphens: auto;
        -ms-hyphens: auto;
            hyphens: auto;
}

._wordwrap {
word-wrap:break-word;
overflow-wrap:break-word;
}

/*-- Pagination ---------------------------------
*/

._pagination {
font-family: arial,sans-serif;
font-size:0.8em;
color:#6a6a6a;
border:1px solid #c0c0c0;
background-color:#f5f5f5;
text-decoration:none;
margin:2px;
padding-top:1px;
padding-bottom:1px;
padding-left:4px;
padding-right:3px;
}

._pagination:hover {
background-color:#ffffff;
}



/*---------------------------------*/


/* standard font */
._font {
font-family:sans-serif,Helvetica,Tahoma,Verdana;
font-size:0.8em;
}


._clearfloat {
visibility:hidden; clear:both; height:0px; margin:0px; padding:0px;
}



/* border radius */
._radius{
/* must to be in such order.
Four values apply to the top-left, top-right, bottom-right, bottom-left corner in that order.
*/
  /* Safari 3-4, iOS 1-3.2, Android 1.6- */
  -webkit-border-radius: 7px; 

  /* Firefox 1-3.6 */
  -moz-border-radius: 7px; 
  
  /* Opera 10.5, IE 9, Safari 5, Chrome, Firefox 4, iOS 4, Android 2.1+ */
  border-radius: 7px; 
}


.input_radius{
/* must to be in such order.
Four values apply to the top-left, top-right, bottom-right, bottom-left corner in that order.
*/
  /* Safari 3-4, iOS 1-3.2, Android 1.6- */
  -webkit-border-radius: 5px; 

  /* Firefox 1-3.6 */
  -moz-border-radius: 5px; 
  
  /* Opera 10.5, IE 9, Safari 5, Chrome, Firefox 4, iOS 4, Android 2.1+ */
  border-radius: 5px; 
}

/* message with icon */
._msgicon{
background-image: url('/sh/icon/alert_16x16.gif');
background-position: 5px top; /* left top/center */
background-repeat: no-repeat;
padding-left:25px;
}