/*--------------------- Last Modified  2006.11.10 ---------------------*/
/*-------------------------------------------------------------------------------------*/
/*------------------------------------------------------------------------------------
  Copyright Einstein Industries 2006. Used with Permission.                             
  May not be duplicated or reproduced.
  Please check for cross-browser compatibility prior to making changes
  MINIMUM BROWSER CHECK :: IE5.x/IE6/Firefox/Safari
  CSS Document - layout.css
/*-------------------------------------------------------------------------------------*/
/* undo some default styling of common (X)HTML browsers
/*------------------------------------------------------------------------------------*/

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,p,blockquote,th,td,html,label,table,tr,td {margin:0;padding:0;}
table{border-collapse:collapse;border-spacing:0;}
fieldset,img,a img,:link img,:visited img {border:0;}
address,caption,cite,code,dfn,th,var {font-style:normal;font-weight:normal;}
ol,ul {list-style:none;}
caption,th {text-align:left;}
h1,h2,h3,h4,h5,h6 {font-size:100%;}
q:before,q:after {content:'';}

/* ------------------------ GLOBAL ELEMENTS ------------------------ */

.client_to_do,
.eii_to_do {
  border:1px solid #1b145f;
  font-weight:bold;
  font-size:1.4em;
  line-height:2em;
  text-align:center;
}

.client_to_do { background-color:#c2e0b9; }
.eii_to_do { background-color:#cee4ea; }

/* ------------------------ type selectors ------------------------ */
body {
  background:#FFF url("../images/bg-body.jpg") top repeat-x;
  text-align:center;
  font:11px/15px Arial, Helvetica, sans-serif;
  color:#0e005a;
}



h1 {
  font-size:1.5em;
  color:#0e005a;
}

legend,
h2 { font-size:1.1em; }

legend { font-weight:bold; }

h3 { font-size:1.0em; }

h6 { font-size:3.0em; }

a {cursor:default !important;}

a:link,
a:visited {
  color:#0e005a;
  text-decoration:underline;
  outline:none;
}

a:hover,
a:active {
  color:#0e005a;
  text-decoration:none;
  outline:none;
}

/* ------------------------ classes ------------------------ */
.clear-original { clear:both; }

div.clear {
  height:.01em;
  overflow:hidden;
}

p.back-to-top {
  text-align:right;
  display:block;
  padding-right:15px;
  background:url("../images/bullet-back-to-top.jpg") right no-repeat;
}

img.img-left {
  float:left;
  margin:0 10px 0 0;
}

img.img-right {
  float:right;
  margin:0 0 0 10px;
}

p.google-directions {
	text-align:center;
	}
	
img.google-map {
	margin:20px 0px 0px 178px;
	}
#column-right p.add-margin-top {
	margin-top:20px;
	}		

/* ------------------------ form elements ------------------------ */
fieldset {
  display: block;
  margin-bottom: 10px;
}

input,
textarea,
select {
  background-color:#f6f5e9 !important; /* to prevent highlighting by Google Toolbar */
  border:1px solid #dad9cb;
  color:#1e1b45;
  width:195px;
  height:18px;
  line-height:18px;
  vertical-align: middle;
  padding:1px 0 0;
  font-family:Arial, Helvetica, sans-serif;
  font-size:1.0em;
}

legend {
  font-size: 1.3em;
  line-height: 24px;
  margin-left: 10px;
  padding: 0 5px 0 5px;
}

input.submit {
	width:60px;
  height:21px;
}
select {
  width:200px;
  padding:0;
}

textarea {
  height:90px;
  overflow:auto;
}

#contact_business { display: none; } /* do not remove */


#column-right form fieldset dl dt {
  clear:both;
  diplay:block;
  float:left;
  text-align:right;
  width:220px;
}

#column-right form dl dd {
  background:none;
  diplay:block;
  padding:7px 0 0;
  margin: 0 0 0 235px;
}


/* ------------------------------- CONTENT FRAMEWORK ------------------------------- */

/* ------------------------ main framework ------------------------ */
#wrap {
  background:#f1f0e0 url("../images/bg-wrap.jpg") repeat-y;
  width:834px;
  margin:0 auto;
  text-align:left;
}

/* ------------------------ masthead framework ------------------------ */
#masthead {
  position:relative;
  background:url("../images/masthead.jpg");
  height:37px;
}

#masthead a {
  position:absolute;
  left:29px;
  width:228px;
  top:0;
  height:85px;
}

#masthead a span { display:none; }




#index_info {
  background:url("../images/index_info.jpg") 0px 0;
  height:279px;
  position:relative;
  z-index:0;
}

#index_info #info_content {
	left:41px;
	overflow:auto;
	position:absolute;
	top:92px;
	width:320px;
	z-index:0;
}

.btn-read-more {
  background-image:url("../images/btn-read-more.jpg");
  display:block;
  height:20px;
  margin-top:5px;
  width:73px;
}
	.btn-read-more:hover { background-position:-73px 0; }
	.btn-read-more span { display:none; }

.btn-product {
	height:99px;
  float:left;
  position:relative;
  width:278px;
}

#btn-promo {
	background:url("../images/btn-promo.jpg");
}

#btn-mesok {
	background:url("../images/btn-mesok.jpg");
}

#btn-srs {
	background:url("../images/btn-srs.jpg");
}

#btn-skintech {
	background:url("../images/btn-skintech.jpg");
}
#btn-eco2gel {
	background:url("../images/btn-eco2gel.jpg");
}
#btn-ba {
	background:url("../images/btn-ba.jpg");
}
#btn-siax {
	background:url("../images/btn-siax.jpg");
}
#btn-melsmon {
	background:url("../images/btn-melsmon.jpg");
}
#btn-bio {
	background:url("../images/btn-bio.jpg");
}

#btn-novatox {
	background:url("../images/btn-novatox.jpg");
}

#btn-visagel {
	background:url("../images/btn-visagel.jpg");
}

#btn-news {
	background:url("../images/btn-news.jpg");
}
.btn-product {
	background:url("../images/btn-product.jpg");
}

.btn-product a {
  left:187px;
  height:19px;
  position:absolute;
  top:73px;
  width:72px;
}

.btn-product a:hover { background:url("../images/btn-read-more.jpg") -73px 0; }

  
#news {
  clear:both;
}

#news_header {
	position:relative;
	background:url("../images/news_header.jpg") no-repeat;
	height:49px;
	}
	#news_header a#news-link {
	position:absolute;
	left:21px;
	top:4px;
	width:146px;
	height:40px;
		}
	#news_header span {
	position:absolute;
	top:14px;
	left:169px;
	width:650px;
	height:20px;
	}
	
	#contact_header {
	background:url("../images/contact_header.jpg") no-repeat 0 0px;
	height:46px;
  clear:both;
}
	#news_header strong,
  #contact_header strong { display:none; }

#news p.news,
#news ul {
	margin:0 26px;
  width:782px;
}

#news ul li {
	float:left;
  width:195px;
}

#contact_one {
	background:url("../images/contact_bg.jpg") repeat-y;
	float:left;
  width:300px;
}
	#contact_one img.img-left {
  	margin-left:30px;
  }
#contact_two {
	float:left;
  width:275px;
}
#contact_three {
	float:right;
  width:250px;
}

#news_footer,
#contact_footer {
  background:url("../images/contact_footer.jpg") no-repeat;
  clear:both;
  height:104px;
  position:relative;
}
	#news_footer {
  	height:13px;
  }
	#contact_footer a {
  	left:746px;
    height:20px;
  	position:absolute;
    top:16px;
    width:73px;
  }
  
/* ------------------------ header framework ------------------------ */
#header-graphic {
	background:url("../images/header.jpg");
	height:171px;
}

#header-graphic h1 {
  padding:96px 0 0 42px;
}

/* ------------------------ column-left framework ------------------------ */
#column-left {
  background:url("../images/bg-column-left.jpg") 0 0 no-repeat;
  float:left;
  width:238px;
}

#column-left p,
#column-left h2,
#column-left h3,
#column-left ul,
#column-left dl {
  margin:0 25px 10px 26px;
  text-align:center;
}

#column-left h2,
#column-left h3 { margin-bottom:2px; }



	
	
	
#column-left #btn-radiesse {
  background:url("../images/btn-radiesse.jpg") 0 0 no-repeat;
  height:159px;
  margin-left:21px;
  margin-right:0;
  position:relative;
  width:194px; 
  z-index:0; 
}
#btn-radiesse a {
  left:61px;
  height:20px;
  position:absolute;
  top:132px;
  width:73px;
}
#btn-radiesse a:hover { background:url("../images/btn-radiesse.jpg") -255px -132px no-repeat; }
#btn-radiesse a span { display:none; }

/* ------------------------ column-right framework ------------------------ */
#column-right {
  background:url("../images/bg-column-right.jpg") right 0 no-repeat;
  width:596px;
  float:left;
}

#column-right p,
#column-right h2,
#column-right h3,
#column-right ul,
#column-right dl { margin:0 39px 10px 2px; }

#column-right .img-right { margin:0 39px 10px 15px; }
#column-right h3 { margin-bottom:0; }

#column-right ul li {
  background:transparent url("../images/bullet.jpg") 0px 4px no-repeat;
  margin-bottom:1px;
  padding-left:10px;
}

#column-right dl dt {
	margin-top:10px;
	font-weight:bold;
}

#column-right dl dd {
  background:transparent url("../images/bullet.jpg") 0px 4px no-repeat;
  margin-bottom:1px;
  margin-left:5px;
  padding-left:10px;
}

.post {
	margin-bottom:15px;
}
#bottom-wrap {
  background:url("../images/bottom-wrap.jpg");
  width:100%; /* fix for Safar */
  height:10px;
  clear:both; /* important - do not remove */
}

/* ------------------------footer framework ------------------------ */
#footer {
  width:834px;
  margin:32px auto 0;
  text-align:center;
  color:#241f4d;
}

#footer p {
  margin-bottom:10px;
}

#footer a:link,
#footer a:visited { color:#241f4d; }

#footer a:hover,
#footer a:active { color:#241f4d; }

#footer ul { margin-bottom:10px; }

#footer li {
  padding:0 5px 0 7px;
  display: inline;
  border-left: 1px solid #241f4d;
}

#footer li.first { border: none; }

/*--------------------------- Navigation framework -----------------------------------*/

#nav { 
  background:url("../images/nav.jpg") no-repeat; 
  height:40px; 
  width:834px; 
  margin:0;
  padding:0; 
  position:relative;
  z-index:2;
}

#nav span { display: none; }

#nav li,
#nav a {
  height:40px;
  display:block;
}

#nav li {
	float:left;
	list-style:none;
	_display:inline;
	position:relative;
}

#nav li ul li.drop-no-link span{
	display:block;
	height:25px;
	color:#ffffff;
	padding-left:5px;
	padding-top:5px;
	cursor:default !important;
	}
#nav li ul li.drop-no-link ul li span {padding-top:0px;}


#nav-01 { width: 62px; margin-left: 22px;}
#nav-02 { width: 79px;}
#nav-03 { width: 75px;}
#nav-04 { width: 80px;}
#nav-05 { width: 73px;}
#nav-06 { width: 85px;}

#nav-07 {width: 85px;}                       /*----新增目錄選項medical info---*/


/*-------------- (-79px) X position of button / (-30px) height of image from above ------------- */
#nav-01 a:hover { background:url("../images/nav.jpg") -22px -40px no-repeat; }
#nav-02 a:hover { background:url("../images/nav.jpg") -84px -40px no-repeat; }
#nav-03 a:hover { background:url("../images/nav.jpg") -163px -40px no-repeat; }
#nav-04 a:hover { background:url("../images/nav.jpg") -238px -40px no-repeat; }
#nav-05 a:hover { background:url("../images/nav.jpg") -318px -40px no-repeat; }
#nav-06 a:hover { background:url("../images/nav.jpg") -391px -40px no-repeat; }
#nav-07 a:hover { background:url("../images/nav.jpg") -476px -40px no-repeat; }
       
body#index #nav-01 { background:url("../images/nav.jpg") -22px -40px no-repeat; }
.about #nav-02 { background:url("../images/nav.jpg") -84px -40px no-repeat; }
.products #nav-03 { background:url("../images/nav.jpg") -163px -40px no-repeat; }
.openday #nav-04 { background:url("../images/nav.jpg") -238px -40px no-repeat; }
.media #nav-05 { background:url("../images/nav.jpg") -318px -40px no-repeat; }
.medicalinfo #nav-06 { background:url("../images/nav.jpg") -391px -40px no-repeat; }
#contact_pg #nav-07 { background:url("../images/nav.jpg") -476px -40px no-repeat; }

#nav li ul {
	position:absolute;
	left:-9999px;
	padding-right:1px;
	background-color:#1C145F;
	z-index:999;
	margin-top:40px;
	}

#nav li ul li { 
	height:25px; /* Height of each drop down nav item */
	border:1px solid #000007;
	border-top:none;
	}	

#nav li ul li a {
	width:100%;
	height:25px;	/* Height of each drop down nav item, should match above */
	line-height:25px;	 /* Height of each drop down nav item again, should match above */
	}

#nav #pipeline {
	width:100%;
	height:25px;	/* Height of each drop down nav item, should match above */
	line-height:25px;	 /* Height of each drop down nav item again, should match above */
	color:#ffffff;
	}
#nav #pipeline span {
	display:block;
	padding-left:5px;
	}

#nav li ul li a span, #nav li ul li ul li a span {
	display:block;
	padding-left:5px;
	}

/* Drop down link styles */
#nav a:link, #nav a:visited, #nav a:hover, #nav a:active {
	font-size:1.0em;
	color:#FFFFFF;
	text-decoration:none;
	}
#nav li ul li ul li a:link,
#nav li ul li ul li a:visited {color:#08062B;}
#nav li ul li ul li a:hover {color:#ffffff;}
/*-------------- sub drop downs -------------------*/
#nav li ul ul {
position:absolute;
background-color:#b0a69c;
border-top:1px solid #000007;
margin:-25px 0pt 0pt 155px;
display:none;
}

#nav ul li:hover ul, #nav ul li.sfHover ul  {
display:block;
}

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

#nav li:hover ul, #nav li.sfHover ul { left: auto; }

/* Hover styles for drop down items */
#nav-02 ul a:hover, 
#nav-03 ul a:hover, 
#nav-04 ul a:hover, 
#nav-05 ul a:hover { 
	background-image:none;
	background-color:#08062B;
	color:#FFFFFF;
	text-decoration:none;
	}

/* width of drop down nav - choose width that allows items to display on one line */
#nav-02 ul, #nav-02 li { width:154px; }
#nav-03 ul, #nav-03 li { width:155px; }
#nav-04 ul, #nav-04 li { width:153px; }
#nav-05 ul, #nav-05 li { width:158px; }

/* ------------------------ vertical sprite nav ------------------------ */
#column-left ul#sub-nav {
	
	width:193px;	/* Width of buttons, not entite image (or half of entire image) */
	height:105px;	 /* Height of entire image */
	margin:0;
	padding:0;
	margin-left:22px;

	}


ul#sub-nav li { 
float:left; 
list-style:none; 
position:relative; 
width:193px;
}

#sub-nav li a,
#sub-nav li.first a,
#sub-nav li.last a {background: url("../images/sub-nav-li.jpg") no-repeat; }

#sub-nav li a {
	line-height: 28px;
	}

#sub-nav li a:hover,
#sub-nav li.first a:hover,
#sub-nav li.last a:hover {background-position:-193px 0px;}

#sub-nav li.active_page a {background-position:-193px 0px;}

#sub-nav li, #sub-nav a { 
	height:28px;	/* Each button must have the same height, define it here */
	display:block;
	}
#sub-nav li.first a {background: url("../images/sub-nav-li-first.jpg"); height:30px; padding-top:3px;}
#sub-nav li.last a {background: url("../images/sub-nav-li-last.jpg"); height:35px; line-height: 31px;}




/* ------------------------ son of suckerfish: vertical sprite nav ------------------------ */
#sub-nav li ul {
	position:absolute;
	left:-9999px;
	background-color:#DBEEF2;	/* Background color of drop down nav - add more styles (i.e. background image) if you want */
	margin-left:193px; /* Set to same width as in #sub-nav */
	_margin-left:97px;
	margin-top:-30px; /* Set to each button height, same as used above */
	width:160px;
	padding-right:1px;
	z-index:9999;
	}

#sub-nav li ul li {
	height:25px; /* Height of each drop down nav item */
	border:1px solid #140D40;
	width:160px;
	margin-bottom:-1px;
	}

#sub-nav li ul li a,
#sub-nav li.first ul li a,
#sub-nav li.last ul li a {
	background-image:none;
	width:100%;
	height:25px; /* Height of each drop down nav item, should match above */
	line-height:25px;	 /* Height of each drop down nav item again, should match above */
	}

#sub-nav li ul li a span {
	display:block;
	padding-left: 5px;
	}

/* Drop down link styles */
#sub-nav a:link, #sub-nav a:visited, #sub-nav a:hover, #sub-nav a:active {
	font-size:1.0em;
	text-decoration:none;
	}

#sub-nav li:hover ul, #sub-nav li.sfHover ul	{ left: auto; }

/* Hover styles for drop down items */
#sub-nav ul a:hover{ 
	background-image:none;
	background-color:#140D40;
	color:#FFFFFF;
	text-decoration:none;
	}