@font-face {font-family: 'myfont'; font-style: normal; font-weight: 400; src: local('Open Sans Regular'), local('OpenSans-Regular'), url(open-sans-regular.woff) format('woff');}
* {font-family:"myfont", Segoe UI, SegoeUI, Verdana, Arial, Helvetica, Sans-serif;}

html{height:100%;}
body{margin:0;padding:0;height:100%; background-color:white; font-size:15px;}
img {border:0;filter:drop-shadow(2px 2px 2px #999);}
a {color:#0076d7;transition:color 0.2s;}
a:visited {color:#004d8a;}
a:hover{color:#ff6600;}
h1, h2, h3, h4 {margin:0 0 8px 0; color:#2e9e2e;}
h1 {font-size:1.8em;}
h2 {font-size:1.4em;}
h3 {font-size:1.2em;}
h4 {font-size:1.0em;}
input, textarea{font-size:1.0em;border:1px solid #999;padding:4px;}
select{font-size:1.0em;padding:4px;}
input[type="submit"],input[type="reset"],input[type="button"]{cursor:pointer;background-color:#efefef;min-width:100px;padding:0.2em;transition:background 0.2s;}
input[type="submit"]:hover,input[type="reset"]:hover,input[type="button"]:hover{background-color:#fff;}

/*offset fixed anchor*/
.anchor{display:block; position:relative; top:-60px;visibility:hidden;}

ol{overflow:hidden;list-style-type:none; padding-left:2.0em;margin:0; counter-reset:num;}
ul{overflow:hidden;list-style-type:none; padding-left:1.2em;margin:0; }
li {margin:0.5em 0;}
li:before{position:absolute;background:#0076d7;color:white;border:0;text-align:center;transition:all 0.2s;}
ol>li:before{content:counter(num); counter-increment:num;line-height:1.6em;height:1.6em; width:1.6em;margin:0.1em 0 0.1em -2.0em; border-radius: 50%;}
ul>li:before{height:0.6em; width:0.6em;margin:0.4em 0 0.3em -1.1em;content:""; border-radius: 50%;}
li:hover::before{}
ul>li:hover::before{height:0.8em;width:0.8em;margin:0.3em 0em 0.2em -1.2em;}
.s_sline>li{display:inline-block;}
.s_sline>li{padding-right:3.6em;}
ul.compact{font-size:0.9em;}
ul.compact li{margin:0 !important;}

/* switch panel with content, work along with js. layout should a ul with multiple divs.
   the ul will be hidden in small view, so each of divs should normally have a title. */
div.s_switch {overflow:hidden; margin:1em 0;}
div.s_switch>ul{float:left;min-width:160px;max-width:30%;font-size:0.9em;padding-left:0;margin:0 2em 0 0;text-align:right;}
div.s_switch>ul>li:before{content:inherit;}
div.s_switch>ul>li{cursor:pointer;margin:0;padding:0.5em 0.5em;margin-bottom:1em;background-color:#efefef;border:1px solid #adadad;border-radius:3px;}
div.s_switch>ul>li.show{background-color:#fff;}
div.s_switch>div{overflow:hidden;z-index:0;display:none;visibility:hidden;}
div.s_switch>div.show{z-index:1;display:block;visibility:visible;}
div.s_switch>div>p:first-child{margin-top:0;}

/*layout:
g_header
	g_fw
g_main
	g_tb
	g_fw
	--contents here--
g_footer
	g_fw

note: g_tb take same place of g_header.
*/

/*fixed width and can be changed by @media*/
.g_fw {width:940px; padding:0 15px; margin:0 auto;}

.g_header {z-index:8; position:fixed; width:100%; left:0; top:0; padding-top:9px; height:51px; font-size:0.9em; color:white;background-color:#107c10; white-space:nowrap;overflow:hidden;}
.g_header a {color:white; text-decoration:none;}
.g_header a:hover {color:yellow;}
.g_header .logo {margin-right:20px; filter:none !important;}
.g_header .button {display:inline-block; margin:23px 10px 0 10px; height:28px;vertical-align: top;}
.g_header .button .menu {z-index:9; display: none; position:fixed; top:60px; background-color: #0c5c0c; margin-left:0px; min-width: 160px; border:1px solid #88be88; box-shadow:1px 1px 5px #88be88;}
.g_header .button:hover .menu {display: block;}
.g_header .button:hover>a{color:yellow;}
.g_header .menuitem {margin:1px;transition:background 0.2s;}
.g_header .menuitem:hover {background-color:#2e9e2e;}
.g_header .menuitem a{display:block;padding:10px;}

.g_main {background-color:transparent; min-height:100%;}
.g_tb {height:60px; background-color:transparent;}
.g_main .g_fw{padding-top:2em;padding-bottom:4em;}

.g_footer {height:2.7em;margin-top:-2.7em;background-color:#d1e7f8; color:#333333;}
.g_footer .g_fw {white-space:nowrap;text-align:right;overflow:hidden;position:relative;top:0.8em;}
.g_footer p {text-align:right;margin:0; font-size:0.8em;}
.g_footer p:first-child{float:left;margin-right:1em;}
.g_footer a {color:#333333; text-decoration:none; margin:0 6px;}
.g_footer a:hover {text-decoration:underline;}
.g_footer a:last-child {margin-right:0;}

/*product title with info on left and img on right*/
.s_title {position:relative; margin-right:-10px;overflow:hidden;}
.s_title>div:first-child{max-width:58%; float:left;}
.s_title>div:last-child{max-width:40%; float:right; padding-right:10px;}
.s_title img{max-width:100%;}

/*normal float right or left img, always use actual size*/
.s_float_r{float:right; margin:0 0 1.0em 1.0em;}
.s_float_l{float:left; margin:0 1.0em 1.0em 0;}

/*float right or left img, 30% for img. this is for large images and won't use s_title*/
.s_float_r2{float:right; margin:0 0 1.0em 1.0em; max-width:30%;}
.s_float_l2{float:left; margin:0 1.0em 1.0em 0;max-width:30%;}

/*buttons (a link or a span)*/
.s_button {min-width:100px; display:inline-block; text-align:center; text-decoration:none;color:white; background-color:#2a874b; transition:background 0.2s; margin:8px 18px 8px 0; padding:5px 8px;border-radius:3px;}
.s_button:visited {color:white; background-color:#2a874b;}
.s_button:hover {color:white; background-color:#1d5d34;}
.s_buttonsmall, .s_buttonsmall:visited{display:inline-block; text-decoration:none;background-color:#efefef;border:1px solid #adadad;border-radius:3px;margin:3px 0;padding:3px;}
.s_button2, .s_button2:visited{background-color:#d6750a;}
.s_button2:hover{background-color:#b76409;}
.s_button3, .s_button3:visited{background-color:#0071c5;}
.s_button3:hover{background-color:#005a9d;}

/*tip box*/
.s_tip {font-size:0.9em; background-color:#efefef; border:1px solid #adadad; border-radius:3px; padding:8px; margin:8px 0;}
.s_tip:before{content:"i";display:inline-block;line-height:1.4em; width:1.4em; text-align:center; margin-right:0.1em;color:white;background-color:#0076d7;border-radius:50%;}

.s_sp {clear:both; height:1px; background-color:#76b900; margin:1.4em 0;}
.s_sp2 {clear:both; height:0; margin:1.4em 0;}
.s_smallfont{font-size:0.8em;}
.s_onelineinfo{font-size:0.8em;text-align:center;white-space:nowrap;overflow:hidden;}

/*enlarge when over, for img*/
div.s_enlarge {overflow: hidden;}
div.s_enlarge img {transition: all 0.6s;}
div.s_enlarge img:hover{transform: scale(1.16);}

/*flex n columns*/
.sr{display:flex;display:-webkit-flex;justify-content:center;}
.sr>*{flex:1;}
.sr>*{padding:0 0.5em;margin:1em 0;}

@media screen and (max-width:768px) {
  .g_fw{width:auto;}
  .s_title{margin-right:0;}
  .s_title>div{float:none !important;max-width:100% !important; padding-right:0 !important;}
  .s_float_r, .s_float_l{float:none;margin:0 !important;}
  .s_float_r2,.s_float_l2{float:none;max-width:100%;margin:0 !important;}
  .sr{display:block !important;}
  .sr>*{width:auto !important;max-width:100% !important;}
  div.s_switch>ul{display:none !important;}
  div.s_switch>div{display:block !important; visibility:visible !important;}
}
@media screen and (min-width:768px) {.g_fw{width:720px;}}
@media screen and (min-width:1100px) {.g_fw{width:940px;}}
@media screen and (min-width:1300px) {.g_fw{width:1140px;}}

/*wait for delete*/
.vcenter {vertical-align: middle;}