@charset "UTF-8";

/*
	
	search.css - 2011-11-22. 
	
	We are creating a new search engine based on the postgresql database that 
	contains all the information from the metabolomics NMR-STAR files.
	
	NOTE:
	<!-- margin:0 auto; just doesn't work! -->
*/

body  {  
    font-family: Arial, Verdana, Helvetica, sans-serif; 
    font-size: 100%; 
    color: #000000 ; 
    background-color: #FFFFFF; 
    margin-left: 1em; 
    margin-right: 1em; 
    margin-top:0 
}

.title_head {
    width: 99%;
    padding-left: 1em;
    margin-top: 0.5em;
    margin-bottom: 0.25em;
    margin-right: 1em;
    color: #000;
/* 
    background-color: #cbdbcb;
 */
    background-color: #cbdbff;
    border: solid 2px #33527b;
    -webkit-border-radius: 5px 5px 5px 5px;
    -khtml-border-radius: 5px 5px 5px 5px;
    border-radius: 5px 5px 5px 5px;
}


.left_col_bg{
    background-color: #ededed;
}

/* menu column */

#leftcol {
    margin: 0 0 0 0;
    padding: 1em 1em 0.5em 10px;
    text-align: left;
    vertical-align: top;
    background-color: #ededed;
    border-left: solid 2px #33527b;
    border-right: solid 2px #33527b;
    border-bottom: solid 2px #33527b;
    -moz-border-radius: 0px 0px 5px 5px;
    -webkit-border-radius: 0px 0px 5px 5px;
    -khtml-border-radius: 0px 0px 5px 5px;
    border-radius: 0px 0px 5px 5px;

}


A:active     { color: #920000 }
A:link       { color: #330000 }
A:visited    { color: #920000 }
A:hover      { color: #BB2200 }

.emph {
	font-size: 110%;
	font-weight:bold;
}

.searchButton {
/* 
	clear: left;
	display: block;
 */
	padding-top: 1.5em;
	padding-left: 0.5em;
	padding-right: 0.5em;
}



/* 
The results of a query will be shown in a table (one of the good things 
done with tables). I've tried to group the basic display modules together
so it should be straight forward to keep a consistent look and feel.
 */
TD.qDisplay {
	border-bottom: 1px solid #000; 
	border-left: 1px solid #000; 
	text-align: center;
	padding-left: 0.5em;
	padding-right: 0.5em;
}

TD.qDisplayLeft {
	border-bottom: 1px solid #000; 
	border-left: 1px solid #000; 
	text-align: center;
}

.qDisplay{
    background-color: #FFFFFF; 
    width: 100%;
}

TH.qDisplay {
/* 
    font-size:90%;
 */
/* 
    color:#000;
    background-color: #cbdbcb; 
 */
    color:#000;
    background-color: #cbdbff; 
	border-left: 1px solid #ccc; 
	border-bottom: 1px solid #ccc; 
}

TH {
   background-color: transparent;
}

/* 
not sure why this is here?
h3.colspan {
    -webkit-column-span:all;  - for chrome 
    column-span:all;
}
 */

/* 
 Hide a row by clicking on a cell -- this is mine 
 */
.hide_cell {
	text-align: center;
}

span.hide_cell {
	font-size:80%;
/* 
	color: #EDDA74;
    background-color:#566D7E;
 */
	color: #000;
    background-color:#99BBEE;
    
    border-top:2px solid #CCC;
    border-left:2px solid #CCC;
    border-bottom: 2px solid #000; 
    border-right: 2px solid #000; 
    -moz-border-radius: 4px;
    border-radius: 4px;
    
    padding-top: 0.15em;
    padding-bottom: 0.15em;
    padding-left: 0.75em;
    padding-right: 0.75em;
}

span.hide_cell:hover {
/* 
	font-size:80%;
 */
/* 
	color: #35483C;
    background-color:#ABABAB;
 */
	color: #223377;
    background-color:#cbdbff;
    
    border-top:2px solid #CCC;
    border-left:2px solid #CCC;
    border-bottom: 2px solid #000; 
    border-right: 2px solid #000; 
/* 
    -moz-border-radius: 4px;
    border-radius: 4px;

    padding-top: 0.15em;
    padding-bottom: 0.15em;
    padding-left: 0.75em;
    padding-right: 0.75em;
 */
}

td.hide_cell{
	width:1px;
}

/* 
.csvExport {
	color: #000;
    background-color:#99BBEE;
    
	text-decoration:none;
	text-align: center;
	font-size: 110%;
    padding-left: 0.75em;
    padding-right: 0.75em;
    -moz-border-radius: 4px;
    border-radius: 4px;
    
    border-top:2px solid #CCC;
    border-left:2px solid #CCC;
    border-bottom: 2px solid #000; 
    border-right: 2px solid #000; 
}
A.csvExport:hover {
	color: #223377;
    background-color:#cbdbff;
    border-top:2px solid #CCC;
    border-left:2px solid #CCC;
    border-bottom: 2px solid #000; 
    border-right: 2px solid #000; 
}
 */

/* 
csv export:
 */
#csvExport {
/* 
	color: #EDDA74;
    background-color:#566D7E;
 */
	color: #000;
    background-color:#99BBEE;
    
	text-decoration:none;
	text-align: center;
	font-size: 110%;
    padding-left: 0.75em;
    padding-right: 0.75em;
    -moz-border-radius: 4px;
    border-radius: 4px;
    
    border-top:2px solid #CCC;
    border-left:2px solid #CCC;
    border-bottom: 2px solid #000; 
    border-right: 2px solid #000; 
}


A#csvExport:hover {
/* 
	color: #35483C;
    background-color:#ABABAB;
 */
	color: #223377;
    background-color:#cbdbff;
    border-top:2px solid #CCC;
    border-left:2px solid #CCC;
    border-bottom: 2px solid #000; 
    border-right: 2px solid #000; 
}

/* 
showhidden: 
 */
#showhidden {
	text-decoration:none;
	text-align: center;
	font-size: 110%;
    padding-left: 0.75em;
    padding-right: 0.75em;
    -moz-border-radius: 4px;
    border-radius: 4px;
}


A.showhidden_active {
/* 
	color: #EDDA74;
    background-color:#566D7E;
 */
	color: #000;
    background-color:#99BBEE;
    
    border-top:2px solid #CCC;
    border-left:2px solid #CCC;
    border-bottom: 2px solid #000; 
    border-right: 2px solid #000; 
}
A.showhidden_active:hover {
/* 
	color: #35483C;
    background-color:#ABABAB;
 */
	color: #223377;
    background-color:#cbdbff;
    border-top:2px solid #CCC;
    border-left:2px solid #CCC;
    border-bottom: 2px solid #000; 
    border-right: 2px solid #000; 
}

A.showhidden_passive{
	color: #ababab;
    background-color:#dcdcec;
    border-top:2px solid #CCC;
    border-left:2px solid #CCC;
    border-bottom: 2px solid #333; 
    border-right: 2px solid #333; 
}


/*
The general box that surrounds all forms
#forms and #output are the two major display elements 
*/
#forms {
	float:left;
	display: inline;
	width:45%;
    background-color: #FFFFFF; 
    padding-top: 0.5em;
    margin: 0.25em 0 0 0;
    text-align: center;
}


/*
formatting the output
*/

#output {
	float: left;
	width: 48%;
	margin-top:1em;
	margin-left: 2em;
}

/*
Input text manipulation
*/
.inputText {
	margin: 1.0em;
/*
	padding-top:1.5em;
	padding-bottom: 1.5em;
*/
}

/*
 This controls the layout for the combination solvent/field 
 strength checkboxes 
*/
.comboCheckBoxes {
	text-align:left; 
	float:left; 
	width: 40%;
}

/* The following definitions create a pseudo-button for building a structure */
#structureSearch {
    margin:0px auto;
}

A.structureSearch:active, A.structureSearch:link, A.structureSearch:visited, A.structureSearch:hover {
/*
	font-size:1.5em;
*/
	font-style:italic; 
    text-decoration:none; 
}

A.structureSearch:link, A.structureSearch:visited, A.structureSearch:active  {
	color: #920000;
    background-color:#BBBBCC;
    border-top:2px solid #CCC;
    border-left:2px solid #CCC;
    border-bottom: 2px solid #000; 
    border-right: 2px solid #000; 
}

A.structureSearch:hover  {
	color: #223377;
    background-color:#CCBBBB;
    border-top:2px solid #000;
    border-left:2px solid #000;
    border-bottom: 2px solid #DDD; 
    border-right: 2px solid #DDD; 
}


/*
We are doing a similar thing for the hide/show buttons as we did for the 
structure search. We use css to set the look and properties.
*/

.hideshowbutton {
    margin: 0 auto;
    width: 25%;
	padding-left: 0.5em;
    padding-right: 0.5em;
    text-align: center;

    -moz-border-radius: 4px;
    border-radius: 4px;
}
A.hideshowbutton:active, A.hideshowbutton:link, A.hideshowbutton:visited, A.hideshowbutton:hover {
	font-style:oblique; 
    text-decoration:none; 
}


A.hideshowbutton:link, A.hideshowbutton:visited, A.hideshowbutton:active  {
/* 
	color: #EDDA74;
    background-color:#566D7E;
 */
	color: #000;
    background-color:#99BBEE;
    border-top:2px solid #DDD;
    border-left:2px solid #DDD;
    border-bottom: 2px solid #000; 
    border-right: 2px solid #000; 
}

A.hideshowbutton:hover  {
	color: #35483C;
    background-color:#ABABAB;
/* 
	color: #223377;
    background-color:#cbdbff;
 */
    border-top:2px solid #000;
    border-left:2px solid #000;
    border-bottom: 2px solid #DDD; 
    border-right: 2px solid #DDD; 
}

/*
small buttons to check/uncheck checkboxes 
*/

.checkUncheckButton {
    margin: 0 auto;
	font-size:0.75em; 
	padding-left: 0.5em;
    padding-right: 0.5em;
    text-align: center;
}

A.checkUncheckButton:active, A.checkUncheckButton:link, A.checkUncheckButton:visited, A.checkUncheckButton:hover {
	font-style:oblique; 
    text-decoration:none; 
}


A.checkUncheckButton:link, A.checkUncheckButton:visited, A.checkUncheckButton:active  {
	color: #EDDA74;
    background-color:#566D7E;
    border-top:2px solid #DDD;
    border-left:2px solid #DDD;
    border-bottom: 2px solid #000; 
    border-right: 2px solid #000; 
}

A.checkUncheckButton:hover  {
	color: #35483C;
    background-color:#ABABAB;
    border-top:2px solid #000;
    border-left:2px solid #000;
    border-bottom: 2px solid #DDD; 
    border-right: 2px solid #DDD; 
}

/*
And now, a help button and page
*/

.help_page {
	margin: 3em;
}

.helpButton {
    float: right;
	padding-left: 0.5em;
    padding-right: 0.5em;
    text-align: center;
}
A.helpButton:active, A.helpButton:link, A.helpButton:visited, A.helpButton:hover {
	font-style:oblique; 
    text-decoration:none; 
}


A.helpButton:link, A.helpButton:visited, A.helpButton:active  {
	color: #EEEEEE;
    background-color:#AAAAAA;
    border-top:2px solid #DDD;
    border-left:2px solid #DDD;
    border-bottom: 2px solid #000; 
    border-right: 2px solid #000; 
}

A.helpButton:hover  {
	color: #35483C;
    background-color:#A0A0A0;
    border-top:2px solid #000;
    border-left:2px solid #000;
    border-bottom: 2px solid #DDD; 
    border-right: 2px solid #DDD; 
}