img#menu-flag {
  
  border: solid 1px #ddd;
  
}

img#page-title {
  display: inline-block;
  vertical-align: bottom;
  margin: 0px 10px 0px 0px;
  width: 50px;
  border: none;
}


span#page-title{
  font-size: 26pt;
}

div.panel-title.home-caution {
  font-size: 2.0em;
}

div#home-img-masschrobook{
  width: 250px;
  background-color: #fffeee;
  border: none;
  padding: 0px 20px 10px 20px;
  margin: 0px 0px 10px 50px;
  float: left;
}

img#index-image-sample {
  border: solid 2px #ddd; 
  margin: 0px 0px 5px 0px;
}

img#fid-food-small {
  height: 80px;
  margin: 0px 10px 0px 10px;
}

img#fid-food-medium {
  height: 200px;
  margin: 0px 10px 0px 10px;
}

div.sample-image {
  
  font-size: 8pt;
}

table#fid-table-food-title {
  width: 100%;
  margin: 0px 0px 0px 10px;
  padding: 0px;
}

div#fid-food-title {
  
  font-size: 20pt;
}

div#fid-no-data-message{
  font-size: 20pt;
  color: #f00;
}

div#search-search-panel {
  float: left;
}

div#search-summary {
  margin: 0px 0px 0px 20px;
  float: left;
}
table#search-summary-table th {
  font-size: 9pt;
  padding: 0px;
}

table#search-summary-table td {
  font-size: 9pt;
  margin: 0px 0px 0px 10px;
  padding: 0px;
}

textarea#search-spectrum-input1 {
  width: auto;
  height: 10em;
}

 
table#result_table tr td.list-food-thumbnail {
  text-align: center;
  padding: 0px;
}

table#result_table tr td.list-food-thumbnail img{
  height: 45px;
  margin: 3px;
}

div.progress {
  height: 10px;
  margin: 3px 5px 0px 5px;
  padding: 0px;
}

span.exists-ms2 {
  font-size: 8pt;
  background-color: #633;
}

span.exists-ms3 {
  font-size: 8pt;
  background-color: #363;
}

span.exists-related-peaks {
  font-size: 8pt;
  background-color: #696;
}

span.peakinfo-current {
  font-size: 9pt;
  background-color: #f99;
  padding: 8px 8px 8px 8px;
}

div#mfsres {
  margin-top: 30px;
}

div#peakinfo_spectra_title {
  margin-top: 30px;
}

div#peakinfo_related_peaks {
  margin-top: 30px;
}

span#peakinfo_similar_peak_search_note1 {
  
}

/* ---- ABOUT API ------------- */

h3.api-group-title {
  margin: 30px 0px 20px 0px;
}

h4.api-title {
  color: #000;
}

table.api-method-table {
  margin: 0px 0px 30px 0px;
}

table.api-deprecated 
tbody td {
  background-color: #ddd;
  
}

table.api-method-table tr {
  border-bottom: 1px solid #ddd;
}

table.api-method-table th {
  white-space: nowrap;
  background-color: #eee;
  width: 60px;
}
span.api-var {
  font-weight: bold;
  color: #080; 
}

span.api-var-stat {
  font-weight: bold;
  color: #900; 
}

span.api-var-ex {
  font-weight: bold;
  color: #f00; 
}
/*---- Food table----------- */

table#food-table tr td{
  color: #999;
}

table#food-table tr.s1-published td{
  color: #000;
}

table#food-table tr.s1-published td.status{
  color: #f00;
}

table#food-table tr.s2-analyzed td.status{
  color: #090;
}

table#food-table tr.s3-prepared td.status{
  color: #00f;
}

table#food-table tr.s4-obtained td.status{
  color: #996;
}


table#food-table tr td.list-food-thumbnail {
  text-align: center;
  padding: 0px;
  
}

table#food-table tr td.list-food-thumbnail img{
  height: 45px;
  margin: 3px;
}

/* ----- Download Table -----  */

/**-- �悭�킩��Ȃ����ǁA����ݒ肵�Ȃ��Ɨ񕝂����������Ȃ�B-- */
table#dl-sample-list tr th.list-sample-thumbnail {
  min-width: 70px;
}

table#dl-sample-list tr td.list-sample-thumbnail {
  text-align: center;
  padding: 0px;
}

table#dl-sample-list tr td.list-sample-thumbnail img{
  height: 45px;
  margin: 3px;
  
}

/* ----- about us -----  */

span.about-us.obtained {
  color: #996;
}

span.about-us.not-obtained {
  color: #999;
}


td.intensity  {
    
    color: #fff;
    
}

button.peakbutton {
    
    color: #fff;
    
}

button.peakbutton:hover {
    
    color: #dd0;
    
}


button#type-current {
  cursor: default !important;
  background-color: #337AB7 !important;
}

button#type-link{
  
}

button#type-invalid {
  cursor: default !important;
  color: #999999;
  background-color: #eee !important;
}

button#type-invalid:hover{
  
}

.axis path,
.axis line{
    
    fill: none;
    stroke: black;
    shape-rendering: crispEdges;
}

.axis text {
    font-family: sans-serif;
    font-size: 11px;
}

div#mcvpanel {
    /** width: 500px; *//
    width: 100%;
    height: 300px;
    /** float: left; *// 
    border: solid 1px #bbb;
}

div.msnpanel {
    margin: 0px 0px 15px 0px;
    width: 300px;
    height: 150px;
    float: left; 
    border: solid 1px #bbb;
    pointer-events: none;
}

button.btn_spectrum_search {
    margin: 0px 0px 0px 15px;
}

div.msnlist-area {
    margin: 0px 0px 0px 15px;
    float: left; 
    
}

div.fs-result-area {
    margin: 20px 0px 0px 0px;
    clear: both;
    
}

span.mod {
  
  color: #f00;
}


html {
  height: 100%;
}

body {
  min-height: 100%;
  display: flex;
  flex-direction: column;
}

#main-container{
  flex: 1;
}

#page-footer{
  height: 30px;
  margin: 20px 0px 0px 0px;
  padding: 5px 10px;
  background-color: #eee;
}

/* ------ Peak List ------------------------- -------------- */

span.badge.peaklist {
  font-size: 0.7em;
}

span.badge.peaklist.db_all {
  background-color: #333;
}

span.badge.numN_zero {
  font-size: 0.9em;
  background-color: #99f;
}

span.badge.numN {
  font-size: 0.9em;
  background-color: #00f;
}

span.badge.numS_zero {
  font-size: 0.9em;
  background-color: #f99;
}

span.badge.numS {
  font-size: 0.9em;
  background-color: #f00;
}

span.badge.peakinfo {
 
}

span.badge.peakinfo.db_all {
  background-color: #333;
}

div#search-spectrum-query-spectra {
    margin: 0px 0px 0px 0px;
    width: 300px;
    height: 80px;
    float: left; 
    border: solid 1px #bbb;
    pointer-events: none;
}

tbody#table-search-spectrum-results
 div.search-spectrum-result div{
    margin: 0px 0px 0px 0px;
    width: 300px;
    height: 80px;
    float: left; 
    border: solid 1px #bbb;
    pointer-events: none;
}

tbody#search_neutralloss_result_peaks
 div.search-spectrum-result div{
    margin: 0px 0px 0px 0px;
    width: 300px;
    height: 80px;
    float: left; 
    border: solid 1px #bbb;
    pointer-events: none;
}

/* ------ shibata table -------------- */

table thead tr 
th.shibata_table_rt_header {
  text-align: center;
  padding-top: 1px;
  padding-bottom: 1px;
  padding-left: 1px;
  padding-right: 1px;
}

table tbody tr 
td.shibata_cell {
  padding-top: 1px;
  padding-bottom: 1px;
  padding-left: 1px;
  padding-right: 1px;
}

div.shibata_peak {
  
  padding: 0px 0px 0px 0px;
  margin: 0px 0px 0px 0px;
  width: 36px;
  height: 25px;
  
  border: solid 2px #fff;
  
  float: left;
  clear: both;
  
  color: #fefefe;
  font-size: 10px;
}

/** -- 15N -- */

div.shibata_peak_iso {
  
  padding: 0px 0px 0px 0px;
  margin: 0px 0px 0px 0px;
  width: 42px;
  height: 25px;
  
  border: solid 2px #fff;
  
  float: left;
  clear: both;
  
  color: #fefefe;
  font-size: 10px;
  
}

div.shibata_peak_main {
  
  float: left;
  
}

div.shibata_peak_side15N {
  
  margin: 0px 0px 0px 1px;
  width: 5px;
  height: 10px;
  float: left;
  background-color: #00f;
  
}

div.shibata_peak_side15N_default {
  
  margin: 0px 0px 0px 1px;
  width: 5px;
  height: 10px;
  float: left;
  background-color: #99f;
  
}

div.shibata_peak_side15N_none {
  
  margin: 0px 0px 0px 1px;
  width: 5px;
  height: 10px;
  float: left;
  background-color: #fff;
  
}

div.shibata_peak_side34S {
  
  margin: 1px 0px 0px 1px;
  width: 5px;
  height: 10px;
  float: left;
  background-color: #f00;
  
}

div.shibata_peak_side34S_default {
  
  margin: 1px 0px 0px 1px;
  width: 5px;
  height: 10px;
  float: left;
  background-color: #f99;
  
}

div.shibata_peak_side34S_none {
  
  margin: 1px 0px 0px 1px;
  width: 5px;
  height: 10px;
  float: left;
  background-color: #fff;
  
}

div.shibata_peak_15n {
  /** border-left: solid 2px #00f; */
  border-top: solid 2px #00f;
}

div.shibata_peak_34s {
  /** border-right: solid 2px #f00; */
  border-bottom: solid 2px #f00;
}

div.shibata_peak:hover {
  
  border: solid 2px #090;
  
}

div.shibata_peak_rt {
  
  padding: 1px 3px 0px 3px;
  margin: 0px 0px 0px 0px;
  width: 32px;
  height: 16px;
  
  text-align: center;
  clear: both;
  
  color: #fefefe;
  font-size: 11px;
}

div.shibata_peak_default {
  
  width: 8px;
  height: 5px;
  float: left;
  background-color: #ddd;
}

div.shibata_peak_ms2 {
  
  width: 8px;
  height: 5px;
  float: left;
  background-color: #f00;
}

div.shibata_peak_ms3 {
  
  width: 8px;
  height: 5px;
  float: left;
  background-color: #060;

}

div.shibata_peak_dbhit {
  
  width: 8px;
  height: 5px;
  float: left;
  background-color: #aaf;
}

div.shibata_peak_adduct_other {
  
  width: 8px;
  height: 5px;
  float: left;
  background-color: #fe0;
}

div.shibata_peak_adduct_peak_group {
  
  width: 8px;
  height: 5px;
  float: left;
  background-color: #00f;
}

div.shibata_peak_adduct_default {
  
  width: 8px;
  height: 5px;
  float: left;
  background-color: #ddd;
}

div.shibata_peak_fs_default {
  
  width: 8px;
  height: 5px;
  float: left;
  background-color: #ddd;
}

div.shibata_peak_fs_03 {
  
  width: 8px;
  height: 5px;
  float: left;
  background-color: #d9d;
}

div.shibata_peak_fs_05 {
  
  width: 8px;
  height: 5px;
  float: left;
  background-color: #d0d;

}



/** ----- shibata peak for help explanation -------------- */

div.shibata_peak_enlarged 
div.shibata_peak {
  
  padding: 0px 0px 0px 0px;
  margin: 0px 0px 0px 0px;
  width: 128px;
  height: 84px;
  
  float: left;
  clear: both;
  
  border: none;
  
  color: #fefefe;
  font-size: 16px;
}

div.shibata_peak_enlarged 
div.shibata_peak:hover {
  border: none;
}

div.shibata_peak_enlarged 
div.shibata_peak_lower {
  
  padding: 0px 0px 0px 0px;
  margin: 0px 10px 2px 0px;
  width: 128px;
  height: 20px;
  
  float: left;
  clear: both;
  
  color: #fefefe;
  font-size: 12px;
}

div.shibata_peak_enlarged 
div.shibata_peak_rt {
  
  padding: 1px 3px 0px 3px;
  margin: 0px 0px 0px 0px;
  width: 128px;
  height: 64px;
  
  text-align: center;
  clear: both;
  
  color: #fefefe;
  font-size: 44px;
}

div.shibata_peak_enlarged 
div.shibata_peak_default {
  
  width: 32px;
  height: 20px;
  float: left;
  color: #000;
  background-color: #ddd;
  text-align: center;
}

div.shibata_peak_enlarged 
div.shibata_peak_ms2 {
  
  width: 32px;
  height: 20px;
  float: left;
  background-color: #f00;
  text-align: center;
}

div.shibata_peak_enlarged 
div.shibata_peak_ms3 {
  
  width: 32px;
  height: 20px;
  float: left;
  background-color: #060;
  text-align: center;

}

div.shibata_peak_enlarged 
div.shibata_peak_dbhit {
  
  width: 32px;
  height: 20px;
  float: left;
  background-color: #aaf;
  text-align: center;
}

div.shibata_peak_enlarged 
div.shibata_peak_adduct_other {
  
  width: 32px;
  height: 20px;
  float: left;
  color: #000;
  background-color: #fe0;
  text-align: center;
}

div.shibata_peak_enlarged 
div.shibata_peak_adduct_default {
  
  width: 32px;
  height: 20px;
  float: left;
  color: #000;
  background-color: #ddd;
  text-align: center;
}

div.shibata_peak_enlarged 
div.shibata_peak_adduct_peak_group {
  
  width: 32px;
  height: 20px;
  float: left;
  color: #fff;
  background-color: #00f;
  text-align: center;
}

div.shibata_peak_enlarged 
div.shibata_peak_fs_default {
  
  width: 32px;
  height: 20px;
  float: left;
  color: #000;
  background-color: #ddd;
  text-align: center;
}

div.shibata_peak_enlarged 
div.shibata_peak_fs_03 {
  
  width: 32px;
  height: 20px;
  float: left;
  background-color: #d9d;
  text-align: center;
}

div.shibata_peak_enlarged 
div.shibata_peak_fs_05 {
  
  width: 32px;
  height: 20px;
  float: left;
  background-color: #d0d;
  text-align: center;

}

div.shibata_peak_enlarged_iso{
  padding: 0px 0px 0px 0px;
  margin: 0px 0px 0px 0px;
  width: 160px;
  height: 84px;
  
  float: left;
  clear: both;
  
  border: none;
  
  color: #fefefe;
  font-size: 16px;
}

div.shibata_peak_side15N_enlarged {
  
  margin: 0px 0px 0px 4px;
  width: 20px;
  height: 40px;
  float: left;
  background-color: #00f;
  color: #fefefe;
  text-align: center;
  
}

div.shibata_peak_side34S_enlarged {
  
  margin: 4px 0px 0px 4px;
  width: 20px;
  height: 40px;
  float: left;
  background-color: #f00;
  color: #fefefe;
  text-align: center;
  
}

/**  ----- till here ---------------------------*/

div.peak_color_bar 
div.bar {
  
  width: 128px;
  height: 20px;
  
  background: -moz-linear-gradient(to right,#0F0,#000 50%,#F00); 
  background: -webkit-linear-gradient(to right,#0F0,#000 50%,#F00); 
  background: linear-gradient(to right,#0F0,#000 50%,#F00); 
    
  float: left; 
}

div.peak_color_bar 
div.center_bar {
  
  margin: 0px 0px 0px 63px;
  width: 2px;
  height: 20px;
  
  background-color: #666;
}

div.peak_color_bar 
div.lower_caption {
  
  font-size: 8px;
  text-align: left;
}

div.peak_color_bar 
div.upper_caption {
  font-size: 8px;
  text-align: right;
}

div.peak_color_bar 
div.center_caption {
  font-size: 8px;
  text-align: center;
}

/** ----- Neutral loss ---------------------- */

table.search_nl_steps
{
  margin: 0px 15px 0px 0px;
}

table#search_nl_summary 
td#search_nl_summary_count_all {
  padding: 0px 30px 0px 15px;
  font-size: 1.2em;
}

table#search_nl_summary 
td#search_nl_summary_count_selected {
  padding: 0px 30px 0px 15px;
  font-size: 1.2em;
}

table#search_neutralloss_results 
td.search_nl_result_checkbox {
  text-align: center;
  vertical-align: middle;
}

input.search_nl_result_checkbox {
  
  -ms-transform: scale(1.4, 1.4);
  -webkit-transform: scale(1.4, 1.4);
  transform: scale(1.4);
}

input.search_checkbox {
  -ms-transform: scale(1.4, 1.4);
  -webkit-transform: scale(1.4, 1.4);
  transform: scale(1.4);
}

table#search_neutralloss_results tr td.list-food-thumbnail {
  text-align: center;
  padding: 0px;
}

table#search_neutralloss_results tr td.list-food-thumbnail img{
  height: 45px;
  margin: 3px;
}

table#search_neutralloss_result_peaks tr td.list-food-thumbnail {
  text-align: center;
  padding: 0px;
}

table#search_neutralloss_result_peaks tr td.list-food-thumbnail img{
  height: 45px;
  margin: 3px;
}

span#search_nl_select_count_over {
  color: #f00;
}

span.badge.pos {
  background-color: #f66;
  color: #fff;
}

span.badge.neg {
  background-color: #66f;
  color: #fff;
}