/* CSS Document for all Labome html */


/*GENERAL STYLES*/
body { 
	background-color:#FFF; 
	color:	#333; 
	margin: 0px auto;
	padding: 0px;
	height: 100%;
	font-family: Arial, Helvetica, Veranda, sans-serif;
	font-size: 12px;
	width: 100%;
    min-width: 280px;
	text-align:center; 
/*	line-height: normal; */
}


a { color: #002bb8; text-decoration: none; }
a:visited { color: #663399; text-decoration: none; }
a:hover { color: #000099; text-decoration:underline; }
a:active { color: #CC0000; text-decoration: none; }

a.external {
	background: url("//aws.labome.com/img/ex.png") center right no-repeat;
	padding: 0px 10px;
	font-size:0.75em;
}

a.external_b {
	background: url("//aws.labome.com/img/ex.png") center right no-repeat;
	padding: 0px 6px;
}
a.mag {
	background: url("//aws.labome.com/img/mag.png") center right no-repeat;
	padding: 0px 6px;
}

a.photo
{
	background: url("//aws.labome.com/img/photo.png") center right no-repeat;
	padding: 0px 6px;
}

.vad0, .vad1, .vad2 {
/*	padding: 0px 6px; */
}
.vad1 {
    background-color: silver;
/*	background: url("//aws.labome.com/img/s.png") center right no-repeat; */
}
.vad2 {
    background-color: gold;
/*	background: url("//aws.labome.com/img/g.png") center right no-repeat; */
}



input {
    vertical-align:middle; 
}

input[type="submit"]{
  background: #fff;
  border: 1px solid #000;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius:6px;
#  text-shadow: 1px 1px 1px #000;
}


em{
       font-weight: bold; 
       font-style: normal; 
}
/* need to block out here to remove the >> sine in menu */
ul { 
	list-style-type: none;
	padding: 7px 0px 4px 0px;
	margin: 0px;
}

/* hanging indent */
ul li {
	list-style-type: none;
	text-indent: -10px;
	padding-left: 15px;
	padding-top: 4px; 
}

ol {
	padding: 0px 0px 0px 25px;  
	margin: 0 0 0 5px;
	overflow: hidden; 
}

ol li {
	list-style-type:decimal;
	padding: 0px 0px 10px 0px; 
	margin: 0px 0px 0px 5px;
}

img {
	border: 0px;
}

form {
	padding: 0px;
	margin: 0px;
}

.tr0{
}

.tr1{
	background:  #f7f7f7; 
}

.sep2{
    margin:0px 5px; 
    float:left; 
    width:48.5%; 
}
.sep3{
    margin:0px 5px; 
    float:left; 
    width:32%; 
}
.sep4{
    margin:0px 5px; 
    float:left;
    width:23.75%; 
}
.sep5{
    margin:0px 5px; 
    float:left;
    width:18.0%; 
}
.sep8{
    margin:0px 5px; 
    float:left;
    width:11.37%; 
}

/*Outer Wrapper* as opposed to main footer */
#outerdiv {
/*        position: fixed;  */
/*	left: 10px;  */
    margin: 0px auto;
	max-width: 960px;
/*	min-width: 790px; */
	border: 0px #20396C solid;
	text-align: left; 
}

/*HEADER STYLES*/
#header {
    width: 100%;
	padding: 0px;
	margin: auto;
}

#header_bg {
	background-image: url('//aws.labome.com/img/head_mid_bg.gif');
	background-repeat:repeat-x;
	width: 100%;
	height: 65px;
	display: flex;
	align-items:  center;
}

#header_logo {
    max-width: 506px;
	height: auto;  
}

#header_logo img{
    max-width: 506px;
    height: auto;  
}


/* header search */
#header_search {
    width: auto;
    position: relative;
    padding-left: 0;
    top: 0;
    align-items: center;
}

#searchbox {
	width: 200px; 
	height:20px;
	border:1px #494949 solid;
	color: #494949;
	font-family: Arial, Helvetica, Verdana, sans-serif;
	padding: 1px 0px 1px 1px;
}

#nav_bar {
	font-family: Georgia, serif;
	font-size: 11px; 
	text-align: left;
	padding-bottom: 5px; 
}

#content {
	clear:both;
	margin: 0px 0px;
}

#tbl {
	width: 100%;
	text-align: justify; 
}

#tbl td {
	vertical-align: top;
	padding: 0px; 
	
}

th {text-align:center}; 

#right_td {
  	width: 200px;
	padding-left: 7px; 
	float: right; 
	text-align: left; 
}

.box {
     	clear: both;
	background: #FFF;
	display: inline;
	margin: 0px 2px 2px 0px; 
}

.box_header {
/*	font-family: Georgia, Times, serif; */
        font-size: 13px; 
	color: #20396C;
	background: #f7f7f7; 
	margin-top: 15px;
	padding: 2px 2px;
        font-weight: bold; 
}


.box_content {
/*	padding: 0px 6px; */
	margin: 3px 0px;
/*	text-align:justify; */ 
}

/* footer main */
#footer {
	text-align: center;
	margin: 0px auto;
	padding:  0px;
}

#footer_link {
}


#date {
	color: #666; 
/*	font-size: 0.78em;  */
	font-family: Arial, Helvetica, Verdana, sans-serif; 
	font-weight: normal;
	font-style: italic; 
	padding: 0px; 
	margin: 0px; 
	line-height:normal;
}

#choice {
        padding-top:10px; 
	padding-right:10px; 
        font-style:italic; 
        font-size: 0.8em;
        text-align:right;
}

#notice {

        padding:5px; 
        text-align: center; 
        color: red; 
}

.hr {
	height: 1px; 
	background: #E0E0E0; 
	font-size: 1px; 
	padding: 0;
	margin: 6px 10px;
	line-height: 0px;
}


/* gene and others*/

#g{
    padding-left: 10px; 
    padding-top: 10px; 
}

.pl, .rl {

       white-space: nowrap; 
}
.gl {
       padding-top: 10px; 
}

.gle {
      padding-left: 15px; 
}
.gln {
      font-style:italic; 
      font-size: 0.9em; 
}

.glv {
     padding-left: 15px;
     font-size: 0.9em; 
}
.glt {
      font-weight:bold;
}

#filter {
      font-size: 11px;
      background-color: white;
      border: 1px solid gray; 
      width: 95%; 
      padding: 5px;
      margin: 5px; 
}

#filter_submit {
    text-align:right;
    margin-right: 10px; 
}

.filter_n {
      text-align:right; 
      float:left; 
      width:15%; 
}

.filter_v {
      text-align:left;
      float:left;
      width:85%;
}

#filter_co {
      font-size: 11px;
      line-height:1; 
      border: 1px solid gray; 
      margin: 5px 25px 5px 25px;
      width: 90%;  
}
#filter_co ul {
    padding:0px; 
}

#filter_co ul li {
    display:block; 
    list-style-type: none;
    text-indent: -15px;
    padding: 0 0 0 10px;
    margin-left:5px; 
}

ul.filter_v {
    list-style-type: none;
    padding: 0;
}

ul.filter_v li {
    display: inline;
    text-indent: 0px;
    padding: 0 20px 0 0; 
}

.filter_co_sep2{
    width:45%; 
    margin:0px 5px; 
    float:left;    
}

#el {
border: 1px solid #999999;
text-align:center;
margin: 15px;
padding: 5px;  
width: 80%;
}


/* product */

/* product box */
#pd_list{
font-size: 12px;
background-color: white;
padding: 5px; 
}

ul#pd_list li {
	list-style-type: none;
	text-indent: 0px;
	padding-left: 0px;
	padding-top: 8px; 
}

#compare_header{
text-align:left; 
font-weight:bold;
font-size: 12px; 
padding-top: 5px;  
}

/* can not put margin or padding here not workin in IE */ 
.pd {
font-size: 12px;
}

.pd_checkbox {
    width:5%;
    float:left;   
}
.pd_sep3{
    width:29%;float:left;margin:0px 5px;  
}
.pn {
text-align:left; 
}
.co{
text-align:left; 
font-weight:bold; 
}
.co_tag{
text-align:left;
font-size: 11px; 
}

.more{
text-align:center;
font-size: 11px; 
}


/* product line */

#pd_line td{
padding-left: 15px; 
padding-top: 3px; 
white-space: nowrap; 
}



/* product full */

#pf{
    font-size:14px; 
    line-height:1.5;     
}

.pfn {
    width: 25%;
    text-align:right;
    float:left;
 }

.pfv {
    width:73%;
    float:right;
    text-align:left;
}



/* product company */
#pd_co{
   font-size: 12px; 
}

#pd_co_logo{
    width:300px;
    float:left;
    text-align:center;
}
#pd_co_info{
    width:430px;
    float:right;
    text-align:left;
}

#pd_co_ti {
    font-weight: bold; 
}

#pd_co_detail{
}

#pd_distri_header {
    font-style:italic;
}

#pd_co_desc {
    padding-top:10px;
 font-size: 11px;
 font-style:italic;
}

#pd_co_desc p {
    padding:10px 0 0 0;
    font-size: 11px;
    line-height:1.5;
    font-style:italic;
}

/* webpage */
#wp {

}

.wl { 
padding-top:15px; 
}

.wp_ti { 

}
.wp_pd_link {
font-size: 10px; 
padding-left:15px
}

.wp_txt {

}

.wp_url {
font-size: 10px; 
}

.similar {
font-size: 10px; 
padding-left:15px
}


/* review */
#e{

}
#e td{
    padding-top:5px; 
}

#es, #ea{
    padding: 15px 15px 0px 15px;
    font-size: 14px; 
    font-family: arial;
    line-height:1.5;
}

.re_new{
    font-size: 14px;
    font-family: arial;
    line-height:1.5;
    text-align:justify;
}

.re_ti{
    margin-right: 10px;
    font-style: italic;
    font-weight: bold; 
    font-size: small; 
}
.re_t {
    margin: 0;
}


.rs {
padding-left: 15px; 
font-size: 0.8em;   
}

.rsp, .er_num{
padding-left: 15px; 
font-size: 0.9em;   
}

#pub {

}

.pub_add{
font-size: 0.9em;  
}
.ar_add {
padding-left: 20px; 
font-size: 0.9em; 
}

/* review figure*/
/* review figure gallery*/

#gallery {
    margin:2px;
    height:auto;
    width:auto;
    text-align:center;
}
#gallery img  {
    display:inline;
    margin:3px;
    border:1px solid #ffffff;
}
#gallery a:hover img
{
    border:1px solid #0000ff;
}
#gallery .desc
{
    text-align:center;
    font-size:0.5em;
    width:100px;
    margin:2px;
}

/* review figure full*/
.figure  {
    margin:20px;
    height:auto;
    width:auto;
    text-align:center; 
 }

.figure img  {
    display:inline;
    margin:3px;
    border:1px solid #ffffff;
}

.figure .title {
    font-weight:bold; 
    line-height:1.5; 
}

.figure .legend
{
    text-align:left;
    font-size:0.875em;
    margin:2px 75px;
    line-height:1.5; 
}

.figure .attr
{
    text-align:left;
    font-size:0.875em;
    font-style:italic;
    margin:10px 50px;
}


#protocol {
}

ol.ol_l1 {list-style-type:decimal;}
ol.ol_l2 {list-style-type:upper-alpha;}
ol.ol_l3 {list-style-type:lower-alpha;}
ol.ol_l4 {list-style-type:upper-roman;}
ol.ol_l5 {list-style-type:lower-roman;}

#protocol table
{
border-collapse:collapse;
width:100%;
}

#protocol th
{
font-style:italic;
border-bottom:1px solid black; 
}

#protocol td
{
width:50%;
border-bottom:1px dotted black; 
}

#protocol .ts_title{
}

.tx_line {
 padding-top:15px
}

.tx_tm {
font-weight: bold; 
}

.tx_syn {

}
.tx_syn_ti{
font-style: italic; 
font-size: 0.8em; 

}

.tx_syn_txt {
font-size: 0.8em;
padding-left:15px 
}

.com_e {
padding-top: 5px; 
padding-left: 2px; 
word-wrap: break-word;
}

.com_ip {
font-size: 0.8em; 
font-style:italic;
text-align:right; 
}

.com_txt {

}

.com_more{
text-align: right; 
font-size: 0.8em; 
text-align:right; 
}


/* browse */
#browse_tbl {
    padding-top: 10px; 
}

#browse_tbl td {
    padding: 2px; 
}

#browse_tbl_th{
    font-style: italic; 
    text-decoration: underline; 
}
.browse_desc{
    font-size:11px; 
}

.browse_pd{
    font-size:11px; 
}

.browse_p_n{
    font-size:9px; 
}
.browse_p_t {
    font-size:11px; 
    line-height:14px; 
}
.browse_p_s{
    font-size:11px; 
    line-height:14px; 
}
/* new */
.clear {
    clear: both;
    height: 1px;
    overflow: hidden;
}
.h2 {font: bold 12px/15px arial,Helvetica,Utkal,sans-serif; margin-top:10px;margin-left:3px;  padding: 0;}
.h1 {font: bold 14px/16px arial,Helvetica,Utkal,sans-serif; margin-top:10px;margin-left:3px;  padding: 0; text-align:center;}

p {
    font-size: 14px;
    margin: 0;
    padding: 10px; 
    line-height:1.5;
    text-align:justify;
}
.divline {
    background-color: #E5E5E5;
    height: 1px;
    overflow: hidden;
    margin-right:20px; 
    margin-left:20px; 
}

#left {display: inline; float: left; margin: 0 0 0 5px; max-width: 745px; width:79%;}
#right{float:left; width:200px;margin:0px 5px;}

/* social media separation */

#social_f {padding: 0 47px 0 0;}
.connect_widget_button_count_excluding {display: none;}
#social_g, #social_l {padding: 0 50px 0 0;}
.pad10 {padding: 10px 0 0 0;}
.pad20 {padding: 20px 0 0 0;}

/* method article */
.c_ti {
    font-size:20px; 
    font-weight:bold; 
    padding-top:20px; 
}

/* author */
.au_tr,.c_txt,.doi,.au_ad,.au_c_txt {
    padding-top: 10px;
    clear:both;
}

.au_tr, .pub_dt, .cite {
    clear:both; 
}

.au_ad_f,.doi_f,.pub_dt_f, .cite_f {
    padding-left:30px;
    float:left;
    font-weight:bold;
}

.au_ad_v, .doi_v, .pub_dt_v, .cite_v {
    padding-left:10px;
    float:left;
}

.au_ad_v li {
    padding:0px;
    list-style-type:none; 
    clear:both;
}
/* for translator */
.au_ad_tr_f {
    font-weight:bold;
    padding-top: 10px; 
}
.c_txt ul li {
    padding-left:30px;
    font-size:14px; 
    line-height:1.5;

}
.c_au {
    padding-top: 10px; 
    padding-left:10px; 
}
.c_f{
    float:left;
}
.c_xm{
    padding-left: 10px; 
    float:left; 
    font-weight:bold;
}
.c_em{
    float:left; 
    font-style:italic;
    padding-left:10px; 
}
.c_ad {
    float:left;
    padding-left:50px;
}
.au_c_txt{
    margin-left: 50px;
}
/* venue */

.c_event {
    clear: both; 
    padding-top: 20px;
}

.venue,.organizer,.dates {
    clear:both;
}

.venue_f,.org_f,.dt_f {
    padding-left: 10px; 
    float:left;
    font-weight:bold;
}

.venue_v,.org_v,.dt_v {
    padding-left:10px;
    float:left;
}

.ev_l {
    padding-top: 10px;
}
/* article abstract */
.c_desc, .c_desc_en{
    clear: both;
    padding: 10px;
    line-height: 1.5;
    font-size: 14px;
}
.c_desc_f, .c_desc_en_f{
    float: left;
    font-weight: bold;
    margin-right: 20px;
}

/* references */
.c_ref {
    padding-top:20px; 
}
.c_re_ti{
    font-weight:bold; 
}

.pm_cite {
    font-size:11px;
    color:gray;
}

/* weibo */

.wb_f {
    float: left; 
    line-height: 200%; 
    margin-top:0px; 
    width: 55px;
}



/* method */ 

.me_tbl {
    border: 1px solid grey; 
    border-spacing: 0px;
    padding: 5px; 
}

table.me_tbl td {
    padding: 5px 5px; 
}
table.me_tbl th {
    padding: 5px 5px; 
    vertical-align: top;
}
table.me_tbl .thcspan {
    text-align:center;
}

/*THUMBNAIL HOVERPOPUPS*/

.thumbnail  {
	position: relative;
	float: right;
	padding-right: 15px;
}

.thumbnail:hover {
	background-color: #e9e9e2;
	color: #335500;
	text-decoration: none;
}

.thumbnail span { /*CSS for enlarged image*/
	position: absolute;
	background-color: #e5e5e5;
	padding: 5px;
	border: 1px solid #666;
	visibility: hidden;
	color: black;
	text-decoration: none;
	text-align: center; 
}

.thumbnail span img { /*CSS for enlarged image*/
	border-width: 0px; 
}

.thumbnail:hover span { /*CSS for enlarged image on hover*/
	visibility: visible; 
	top: -50px; /* /* use IF IE6 style to correct IE6 positions of larger image relative to thumb */
	left: -400px; /*position where enlarged image should offset horizontally */
}
/*css for new structure*/
/*Css for responsive design*/
@media screen and (max-width: 1024px){
    #outerdiv{
        margin: 0 20px 0 20px;
    }

    #header_search{
        position: absolute;
        /*right: 20px;*/
        padding-left: 0 !important;

    }
    #left {display: inline; float: left; margin: 0 0 0 5px; width: 70%;}
    #right{float:left; width:28%; margin:0px 5px;}

    #pd_co_info{
        width: 100%;
    }

}

@media screen and (min-width: 815px) and (max-width: 1024px){

    #header_search{
        position: absolute;
        right: 20px;
        padding-left: 0 !important;

    }

}

@media screen and (max-width: 815px){
    #left {display: inline; float: left; margin: 0 0 0 5px; width: 99%;}
    #right{float:left; width:99%; margin:0px 5px;}
        .box_header{
        padding: 10px;
    } 
    #left img{
        display: block;
        margin: 10px auto;
        width: 90%;
        height: auto;
        clear: both;
    }

    textarea{
        width: 99%;
        margin-bottom: 10px
    }
    #header_search {
        padding-left: 0 !important;
        position: relative !important;
        top: -40px;
        width: 100%;
    }
    #header_search input[type=text]{
        width: 70%;
        display: block;
        margin: 10px auto;
    }
    #header_search input[type=submit]{
        width: 70px;
        display: block;
        margin: 10px auto;
        padding: 2px 5px 5px 2px;
    }

}
/*when on mobile*/
@media screen and (max-width: 815px){

    #header_logo{
        display: none;
    }
    .redTextHome{
        display: none;
    }
    #header{
        height: 105px;
    }
    .hr{
        margin-top: 30px;
    }
    #header_search {
        top: 0;
        margin-top: 45px;
        width: 100%;
    }
}


@media screen and (min-width: 814px) and (max-width: 925px){
     .pd_sep3{
        width: 25%;
    }
}
@media screen and (min-width: 560px) and (max-width: 673px){
    .pd_sep3 {
    width: 25%;
    }
    .pd input[type=checkbox]{
        margin-right: 10px;
    }
}

@media screen and (max-width: 768px){

      #header_logo img{
        max-width: 386px;
        height: auto;  
        display: block;
        margin-left:-60px;
    }

    table{
        display: block;
        clear: both;
        float: none;
        margin: 10px 5px 10px 5px !important;
    }
    #left table{
        display: block;
        width: 100%;
        clear: both;
        font-size: 12px;
        overflow-y:hidden; 
    }
    #left table td{
        width: 20%;
    }

 
}


@media screen and (max-width: 560px){


    .pd_sep3{
        width: 25%;
    }
    input{
        margin: 10px;
    }
    input[type=submit]{

        padding: 5px;

    }
    body{
        font-size: 15px;
    }  


   /* #header_search{
        right: 15%;
        top: 80px;


    }*/
    #header_search input[type=text]{

    }  

}
@media screen and (max-width: 475px){

    #footer_links a{
        display: block;
        width: 100%;
        text-align: center;
        padding: 5px 0 15px 0;
        border-bottom: 1px #f1f1f1 solid;
    }  
    #footer_links span{
        display: none
    }

}        

@media screen and (max-width: 400px){
    #outerdiv{
        margin: 0 5px 0 5px;
    }
      #header_logo img{
        max-width: 350px;
        height: auto;  
        display: block;
        margin-left: -40px;
 
    }


}
@media screen and (max-width: 380px){

    input{
        padding: 5px;
        margin: 10px;
    }
    #left table{
        margin-left: -5px;
    }
      #smallTable{
        width: 100% !important;
        min-width: 100% !important;
        margin: 0 auto;
        clear: both;
        float: none
    }
    #smallTable td{
        width: 40%;
    }
     .pd input[type=checkbox]{
        margin-left: -8px;
    }


}