@charset "utf-8";
/* Master Joby CSS Document 
-----------------------------
	Joby, Inc.
	Author: 	Peter Berg
	Editor:		Michael Huang
	Version: 	20 July 2007
------------------------------ */


/* Common Page Structure 
--------------------------- */	
body { margin: 0px; font-family: Helvetica, Arial, sans-serif; font-size: 0.75em; color: #333; background-color: #fff;}
body:lang(zh), body.zh { font-family:"宋体",Helvetica, Arial, sans-serif;  }
body:lang(jp), body.jp { font-family:"Kozuka Gothic Pro","Lucida Grande","Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W3","ＭＳ Ｐゴシック",Geneva,Arial,Verdana,sans-serif; }

a { color: #000; text-decoration: underline; }
a:visited { color: #000; }
a:hover { color: #666; text-decoration: none; }

img { border:0; padding:0; margin:0; }

#frame { width: 850px; margin: 0px auto; border-width: 0px 1px 1px 1px; border-color: #ccc; border-style: solid;}

/* Header section */
#header { width: 850px; }

/* Language Selector */
.lang_selector { color: #666; font-size: 10px; font-family:Verdana, Arial, Helvetica, sans-serif; padding: 2px 5px 0px; }
.lang_selector select { font-size: 11px; color: #666; border: 1px solid #999; }
.lang_selector a { color: #bbb; padding:0 .25em; text-decoration:none; border:0; }
.lang_selector a.selected { color:#777 !important; }
#header .lang_selector { text-align:right; }
#footer .lang_selector { text-align:center; }

/* Joby Logo */
#logo { width: 255px; float: left; }
#logo a { display: block; width: 255px; height: 90px; padding: 0px; margin-left: 15px; background: url(../images/head-blank_01.gif) top left no-repeat #fff; }
#logo a b { display: none; }


/* Main Navigation */
#nav { width: 560px; float: right; margin-top: 13px; /* background-color:#66CCFF; */ }
#nav ul#navlist { display: block; float: right; width: 560px; list-style: none; padding: 0px; margin: 0px;  position:relative; }
#nav ul#navlist li { list-style: none; padding: 0px 0px 0px 3px; margin: 0px; display: block; float:left; background: url(../images/navtab-left-3.png) no-repeat top left; }
#nav ul#navlist li.first { background: url(../images/navtab-left-3.png) no-repeat 0px top; }
#nav ul#navlist li a { display: block; width: 109px; height: 22px; padding-top: 10px; /* margin-left: 3px; */ font-family: Arial, sans-serif; font-size: 140%; font-weight: normal; color: #777; 
	text-align: center; text-decoration: none; float: left; background: url(../images/navtab-unsel-combo.png) no-repeat top; background-position:-91px 0 }
#nav ul#navlist li:hover a.main_nav, 
#nav ul#navlist li.over a.main_nav { color: #000; background: /* url(../images/navtab-right-3-over.png) */ url(../images/navtab-unsel-combo.png) no-repeat top right; }

#nav ul#navlist li.selected { background: url(../images/navtab-left-3-selected.png) no-repeat 0px top; }
#nav ul#navlist li.selected a.main_nav { background: url(../images/navtab-right-3-selected.png) no-repeat top right; color: #000; }
#nav ul#navlist li.selected:hover a.main_nav, 
#nav ul#navlist li.selected a.main_nav { background: url(../images/navtab-right-3-selected.png) no-repeat top right; }


/* Subnavigation */
#nav ul#navlist li ul { background: url(../images/subnav.png) top left no-repeat #fff; height: 35px; width: 560px; clear: both; left:0; position:absolute; top:32px; padding: 0px; margin: 0px; list-style: none; display:none;	}
#nav ul#navlist li ul li.first { background:none; }
#nav ul#navlist li.selected ul { display:block; }
#nav ul#navlist li:hover ul, 
#nav ul#navlist li.over ul  { display:block; z-index:999; }

#nav ul#navlist li ul li { list-style: none; padding: 0px; margin: 0px; background: none; display: inline;/* display: block; float: left; width: 175px; */ }
#nav ul#navlist li ul li a { font-size: 95%; color: #333; font-weight: normal; display: inline; padding: 3px 8px 0px 7px; width: auto; height: 12px; background: none; }
.ru #nav ul#navlist li ul li a { padding: 3px 6px 0px 6px; }
.zh #nav ul#navlist li ul li a { font-size: 100%; }
#nav ul#navlist li ul li a:hover { color: #000; text-decoration: underline; }
.zh #nav ul#navlist li ul li a:hover { text-decoration:none; }
#nav ul#navlist li ul li.first a { padding-left: 15px; }
#nav ul#navlist li ul li.selected a { color: #CC6600; font-weight: bold; }
.zh #nav ul#navlist li ul li.selected a { font-weight: normal; }
#nav ul#navlist li.selected ul li { background:none; } 
#nav ul#navlist li.selected ul li a { background:none; } #nav ul#navlist li.selected ul li { background:none; } 
#nav ul#navlist li.selected ul li a { background:none; } 

#nav ul#navlist li a.store_head_jp { font-size: 90%; }

/* Gpod subnavigation spacing */
#nav ul#navlist li ul#gpod li a { padding: 3px 5px 0px 4px; }

#nav ul li a span.sup-new, #nav ul li a:hover span.sup-new { position: relative; top: -5px; font-size: 5px; font-family: Helvetica, Arial, sans-serif; font-weight: normal; color: red; text-decoration: none; }

/* Main section of the page */
#main { clear: both; }

#content { padding: 0px; } /* */
#content p { 
	font-family: Verdana, Arial, Helvetica, sans-serif; 
	line-height: 150%; 
	color: #444; 
	padding: 0px 25px; 
	}
#content h1 {  
	color: #999; 
	font-weight: normal; 
	font-size: 320%;
	padding-left: 25px;
	margin-bottom: 0.5em;
	}
#content h1 span.noshow { display: none; } 

h1 { 
	color: #999; 
	font-weight: normal; 
	font-size: 320%;
	padding-left: 25px;
	margin-bottom: 0.5em;
	}
h1:lang(zh), .zh h1 {
	font-family:"黑体",Arial,sans-serif;
	}
h1 span:lang(en), h2 span:lang(en), h1 span.en, h2 span.en, span.en, h3.en, h1.en, h2.en  {
	font-family:Helvetica, Arial, sans-serif !important;
	}
#content h2 {
	margin-top: 25px;
	margin-left: 25px; 
	margin-bottom: 12px;
	}

#content h3 { 
	margin-bottom: 10px;
	margin-left: 25px;
	}
#content h4 { 
	margin-bottom: 5px;
	margin-left: 25px; 
	}
	
#content a { color: #000; text-decoration: underline; }
#content a:hover { color: #666; text-decoration: none; }
.zh a { text-decoration: none; }
.zh a:hover { text-decoration: underline; }

#content ul li { line-height: 140%; font-family:Verdana, Arial, Helvetica, sans-serif; }
#content ol li { line-height: 140%; font-family:Verdana, Arial, Helvetica, sans-serif; }

/* File path navigation across the top of the page content */
#content .navpath {
	font-size: 95%;
	border-width: 1px 0px; 
	border-style: solid; 
	border-color: #ccc; 
	background-color: #f6f6f6; 
	padding: 5px 10px 3px 30px;
	}
#content .navpath a { color: #555;	padding: 0px 5px; }
#content .navpath span { padding: 0px 5px; }


/* --------------- */
/* SIDEBAR STYLING */
/* --------------- */

#sidebar {float: right; width: 220px; margin: 0px 3px 20px 15px; background: url(../images/sidebar_round_top.png) 0px top no-repeat; padding: 9px 0px 0px 0px; }
#sidebar_content { float: right; width: 220px; margin: 0px 0px 0px 0px; padding: 5px 0px 10px 0px; 
	border-width: 0px 0px 0px 0px; border-style: solid; border-color: #999; background: url(../images/sidebar_round_bot.png) 0px bottom no-repeat #eee; }
#sidebar_round_bot {  margin: 0px; padding: 0px; }

#sidebar h4 { 
	background: url(../images/sidebar_header_top.png) no-repeat top left #f6f6f6; 
	border-width: 0px 0px; 
	border-color: #999; 
	border-style: solid; 
	padding: 7px 0px 0px 0px;
	margin: 2px 1px;
	text-align: center; 
	line-height: 130%; 
	font-size: 110%; 
	color: #666; 
	}
#sidebar h4 em { display: block; font-style: normal; background: url(../images/sidebar_header_bot.png) no-repeat bottom left #f6f6f6; padding: 0px 0px 7px; }
#sidebar h4 a { text-decoration:none; }
#sidebar h4 a:hover { text-decoration:underline; }

.zh #sidebar h4 em {
	font-size:126%;
}
#sidebar h4 em.orange { color: #CC6600; }

#sidebar p { line-height: 130%; padding: 4px 5px 4px 7px; margin: 0px; }
#sidebar p.small { font-size: 90%; line-height: 130%; padding: 0px 5px 0px 7px; margin: 0px; }


.bg-3col {
	background: url(../images/bg-3col.png) top left repeat-y;
	margin: 0px;
	padding: 0px;
	/* border-left: 1px solid #456; */
	}

.col3-1, .col3-2, .col3-3 { 
	width: 283px;
	margin: 0px 0px 0px 0px; 
	padding: 0px; 
	float: left;
	overflow: hidden; 
	/* background-color: #faf; */
	}
.col3-1 p, .col3-2 p, .col3-3 p { 
	margin: 5px 5px; 
	line-height: 150%; 
/*	background-color: #afa; */
	}
.col5-1, .col5-2, .col5-3, .col5-4, .col5-5, .col5-1x3, .col5-3x2 {
	width: 170px;
	margin: 0px 0px 0px 0px; 
	padding: 0px; 
	float: left;
	overflow: hidden; 
	}
.col5-1x3 {
	width: 510px;
	} 
.col5-3x2 {
	width: 340px;
	}
.col2-1 {
	width: 420px;
	float: left;
	padding: 0px;
	margin: 0px;
	}
.col2-2 {
	width: 420px;
	float: right;
	padding: 0px;
	margin: 0px;
	}
.col2-1 p, .col2-2 p {
	margin: 5px 10px;
	line-height: 150%;
	}


#footer { clear:both; padding: 10px 0px; background-color: #eee; text-align: center; font-size: 95%; line-height: 200%; color: #666; border-top: 1px solid #ccc; }
#footer a { color: #444; text-decoration: none; padding-right: 20px; }
#footer a:hover { color: #999; text-decoration: underline; }


ul#sitemap li { line-height: 170%; }

/* ------------- */
/* TABLE STYLING */
/* ------------- */

table {
	border-collapse: collapse;
	border: 0px;
	padding: 0px;
	}
table tr {
	padding: 0px;
	}
table tr td, table tr th {
	vertical-align: top;
	padding: 3px 3px 3px 5px;
	}

table.bdr {
	border-width: 0px 1px 1px 0px; 
	border-color: #ccc;
	border-style: solid;
	}
table.bdr tr td { 
	border-width: 1px 0px 0px 1px;
	border-color: #ccc;
	border-style: solid;
	}

tr.even { background-color: #eee; }
tr.odd { background-color: #fff; }

table.rowbdr tr { border-style: solid; border-color: #ccc; border-width: 1px; } 
table.storeList { table-layout:fixed; }
table.storeList { margin: 0 25px; /* width: 700px; */ }
table.storeList thead td { border-bottom: 1px solid #ccc; color: #aaa; vertical-align:bottom; padding-bottom:0; }
table.storeList thead th { border-bottom: 1px solid #ccc; color: #aaa; vertical-align:bottom; padding-bottom:0; font-weight:normal; text-align:left; }
table.storeList tr { border-style: solid; border-color: #ccc; border-width:0; } 
table.storeList tr.even { background-color: #fff; }
table.storeList thead .cityname { font-size:125%; width:182px; padding-top:1.75em; color: #666; font-weight: bold;  }
table.storeList thead .address1 { width:151px; }
table.storeList thead .address2 { width:133px; } 
table.storeList thead .phone { width:90px;    }
table.storeList thead .fax { width:98px;   }
table.storeList thead .map {  }
/* brits */
table.storeList thead .address { width:134px;  }
table.storeList thead .locality { width:105px;   }
table.storeList thead .posttown { width:127px;  }
table.storeList thead .postcode { width:75px;   } 
/* us */
table.storeList td.retailername { padding-right:1.5em; }
table.storeList td.address-us { padding-right:1.5em; }
table.storeList tr.paddedbottom td { padding-bottom:1.5em; } 
/* --------------------- */
/* FORM and INPUT STYLES */
/* --------------------- */
form { margin: 0px; padding: 0px; }



/* ----------------- */
/* UNIVERSAL STYLING */
/* ----------------- */

.price_big { font-size: 200%; font-weight: bold; font-family: Helvetica, Arial, sans-serif; padding-bottom: 10px; text-align: center;}
.clr { clear: both; }
br.clr { height: 1px; line-height: 1px; }
.lefty { float: left; }
.righty { float: right; }

.alert { background: #ffd url(../images/icons/alert_32.gif) 10px 0.5em no-repeat; border-width: 1px; border-color: #CC3333; border-style: solid; padding: 20px 20px 20px 50px; margin: 10px 20px; }

/* TEXT ALIGNMENT */
.txt_c { text-align: center; }
.txt_r { text-align: right; }
.txt_l { text-align: left; }


/* TEXT SIZE */
.t_80 { font-size: 80%; }
.t_85 { font-size: 85%; }
.t_90 { font-size: 90%; }
.t_95 { font-size: 95%; }
.t_120 { font-size: 120%; }
.t_130 { font-size: 130%; }
.t_140 { font-size: 140%; }
.t_150 { font-size: 150%; }
.t_175 { font-size: 175%; }

.disclaimer {font-size: 90%;}

/* WIDTH STYLES (good for form text fields) */
.w10 { width: 10px; }
.w20 { width: 20px; }
.w30 { width: 30px; }
.w40 { width: 40px; }
.w50 { width: 50px; }
.w60 { width: 60px; }
.w70 { width: 70px; }
.w75 { width: 75px; }
.w80 { width: 80px; }
.w90 { width: 90px; }
.w100 { width: 100px; }
.w110 { width: 110px; }
.w120 { width: 120px; }
.w150 { width: 150px; }
.w175 { width: 175px; }
.w200 { width: 200px; }
.w220 { width: 220px; }
.w250 { width: 250px; }
.w300 { width: 300px; }
.w350 { width: 350px; }
.w400 { width: 400px; }
.w450 { width: 450px; }
.w500 { width: 500px; }
.w550 { width: 550px; }
.w600 { width: 600px; }
.w650 { width: 650px; }
.w700 { width: 700px; }


/* Big Orange Text (for sales links) */
.bigo { font-weight: bold; color: #CC6600; }
#content a.bigo, a.bigo { font-weight: bold; color: #c60; }

/* Input Form Elements */
.inlg { height: 17px; width: 17px; }


/* MARGIN CLASSES */
.mr5 { margin-right: 5px; } /* mr5 = Margin Right 5 px */
.mr10 { margin-right: 10px; } /* mr10 = Margin Right 10 px */
.mr15 { margin-right: 15px; } /* mr15 = Margin Right 15 px */
.mr20 { margin-right: 20px; } /* ml15 = Margin Left 15 px */
.mr25 { margin-right: 25px; } /* ml15 = Margin Left 15 px */

.ml5 { margin-left: 5px; } /* ml5 = Margin Left 5 px */
.ml10 { margin-left: 10px; } /* ml10 = Margin Left 10 px */
.ml15 { margin-left: 15px; } /* ml15 = Margin Left 15 px */
.ml20 { margin-left: 20px; } /* ml15 = Margin Left 15 px */
.ml25 { margin-left: 25px; } /* ml15 = Margin Left 15 px */
.ml30 { margin-left: 30px; } /* ml15 = Margin Left 15 px */

.mb5 { margin-bottom: 5px; } /* mb5 = Margin Bottom 5 px */
.mb10 { margin-bottom: 10px; } 
.mb15 { margin-bottom: 15px; }
.mb20 { margin-bottom: 20px; }
.mb25 { margin-bottom: 25px; }

.mt5 { margin-top: 5px; } /* mb5 = Margin top 5 px */
.mt10 { margin-top: 10px; } 
.mt15 { margin-top: 15px; }
.mt20 { margin-top: 20px; }
.mt25 { margin-top: 25px; }