/* Set up the body. */
body {
	background-color: white;
/*	background-image: url("../../image/image_psb.png");
	background-repeat: no-repeat; */
	margin-left: 5em;
	margin-right: 3em;
	margin-top: 2em;
	margin-bottom: 2em;
	font-family: sans-serif;
}


/* Set a default font for everything. */
body {
	font-size: 11px;
	font-family: sans-serif;
}


/*
Layout for the five main areas of the user interface.
*/


.AREA_HEADER {
	vertical-align: middle;
	text-align: center;
	/*height: 6em;*/
	/*display: none;
	We hide the header by using css. */
}


.AREA_BODY {
	position: relative;
}


.AREA_LEFT {	
	position: absolute; left: 0px; top: 0px; width: 0%; 
	display: none;
	/* We hide the left menu by using css. */
}

.AREA_MAIN {
	margin-left: 1%; margin-right: 1%; 
}


.AREA_RIGHT {
	position: absolute; left: 99%; top: 0px; width: 1%; 
	display: none;
	/* We hide the right menu by using css. */
}


.AREA_FOOTER {
	/*
	padding-left:10%;
	padding-right:10%;
	*/
}



/** Make forms look pretty. */

form {
	/* float: left; */
	width: 90%;
}

fieldset {
	width: auto;
	clear: both;
	margin: 1em;
	padding: 1em;
	border: 3px double #999;
	border-left-color: #ccc;
	border-top-color: #ccc;
}

legend {
	padding: .2em;
	background-color: #eed;
	font-weight: bold;
	font-size: 1.2em;
	border: 1px solid #999;
	border-left-color: #ccc;
	border-top-color: #ccc;
	text-align: center;
	left: 50%;
}	
/* 
	We make the label take in about 20% of the available space, 
	float it left and then align it to the left.
	Then we make the input take up the remaining space
*/
label, input, select, textarea {
	display: block;
	float: left;
}

label {
	display: block; 
	text-align: left;
	font-weight: bold;
	width:	90%; 
	float:	left;
	clear:	left;
	height: auto;
	margin-right: 	0.5em;	
	padding-right: 	0.5em;	
}

/* A break in a form gets rid of any floats that might be near */
form br {
	clear: left;
}

label:first-letter {
	text-transform: capitalize;
}

textarea, input, select {
	display: block; 
	padding-bottom: 0.5em;
	margin-bottom: 0.5em;
	font: 100% sans-serif;	
	background-color: #eed;
	width: 90%;
}

input {
	display: block; 
	padding-bottom: 0.5em;
	margin-bottom: 0.5em;
	font: 100% sans-serif;	
	background-color: #eed;
	width: auto;
}


/* Specially format submit boxes. */
input[type="text"] {
	width: auto;
}

/* Specially format submit boxes. */
input[type="submit"] {
	font-weight: 	bold;
	font-size: 		110%; 
	width: auto;
}  
/* Specially format hidden input. */
input[type="hidden"] {
	width: 0px; 
	height:0px;
	visibility: hidden;
}  

input[type="password"] {
	background-color: #edd;
}  

input[type="checkbox"] {
	width:auto;
	height:auto;
}  


input[type="radio"] {
	display: inline;
	float: none;
	width: auto;
	height:auto;
}  



select {
	/*padding: 3px;
	margin: 3px;*/
	width:	auto;	
}



input:active {
	background-color: #ff0;
}


/**
* Format the headings
*/

h1 {
	font-size: 200%;
	text-align: center;

}

h2 {
	font-size: large;
}

h3 {
	font-size: medium;
	font-weight: bold;
	text-decoration: underline;
    color: #FFFFBB;
	background: #0B7508;
	border-width: 2px;
	border-color: black;
	line-height: 2em;
	padding-left: 1em;
	border-style: solid;
}


th.main
{
	text-align: center;
	font-size: xx-large;
	font-weight: bold;
	vertical-align: middle;
}


td.navbar
{
	background: black;
	padding: 0px;
}

table.navbar
{
	border: 0px;
	width: 100%;
}

table.protocol
{
	margin-left: 5em;
}

p {
	text-align: justify;
}

p.logo {
	text-align: center;
	display: block;
}


img {
	border-width:0;
	vertical-align: middle;
}




/* Format the tables */
table {
	border-collapse: collapse; 
	padding: 1px;
	border: 1px solid black;
	vertical-align: top;
}

tr {
	border: 1px solid black;
}

th, td {
	padding: 2px;
	border: 1px solid black;
	vertical-align: top;
}

th {
	font-size: 10px;
	font-family: sans-serif;
	height: 5px;
	overflow: scroll;
}

thead {
}

/* Format the definition lists. We want our definition topic, dt, to be bolder.  */
dt {
	font-weight: bold;
}


/** Format the menu, which is usually an unformatted list. */

.menu {
	padding: 1px;
	margin: 1px;
}

/* Draw a nice box around the outer menu div. */
div.menu {
	float: left;
	clear: left;
	display: block;
	border: 3px double #999;
	border-left-color: #ccc;
	border-top-color: #ccc;
	margin: 1em;
	padding: 1em;
}

h1.menu, h2.menu, h3.menu {
	font-size: 100%;
	text-decoration: none;
	text-align: center;
}

ul.menu {
	/* display: block; */
	list-style-type: none;
	list-style-position: inside;
	/* marker-offset: 0; */
	/* border: solid 1px ; */
}

/**
* Special formatting for objects that should not take the whole width of the page.
*/

div.lesswide {
	width 	: 	80%		;
}


/**
* Special formatting for the login forms
**/

div.login {
	width 	: 	16em	;
	margin	: 	0px		;
	padding	:	0px		;	
}


div.login form {
	width: 100%;
}

div.login form label {
	width: 100%;
}

div.login form input {
	width: 100%;
}


/** 
*	Special formattting for the three sub-columns which should appear side by side. 
*   We could use tabluar display because this is the easiest way to archieve the desired effect, 
*   but it doesn't work in IE :p ...
**/

div.subgroup {
	/*position: table-row;*/
	left: auto; top: auto;
	width: 80em;
	height: 35em;
	position: relative;
}

div.subleft {
	position: absolute;
	left: 0;
	top:  0;
	width: 30%;
	/* position: table-cell;*/
}

div.submiddle {
	position: absolute;
	left: 35%;
	width: 30%;
	top:  0;
	/* position: table-cell;*/
}

div.subright {
	position: absolute;
	left: 70%;
	width: 30%;
	top:  0;
	/* position: table-cell; */
}


/** Allow dt lists to be numbered if they have the numbered class also, very useful and pretty.  **/
dl.numbered dt {
	display:		 list-item;
	list-style-type: decimal;	
	
}



/** Some small decorative elements for hovering over links, etc. **/

li.menu:hover {
	list-style-type: square;
	list-style-position: outside;
}

a:hover {
	color: green;
	/* text-decoration: none;
	   outline: thin solid red; */
}


/** Some decorative classes that make tables slightly more easy to read */
tr.row_0 {
	background-color: #fff;
}

tr.row_1 {
	background-color: #eed; /* Let's pain the ceiling beige... >_< */
}


/** Some decorative classes for a filetree display */
tbody.filetree tr td {
	border: 0px none;
}

tbody.filetree tr  {
	border: 0px none;
}

.filetree {
	border: 0px none;
}

.sampleform {
}

/** Some classes for a microtiter plate display */ 
/* Format the tables */
table.plate {
	border-collapse: collapse; 
	padding: 0px;
	margin: 0px;
	border: 1px solid black;
	vertical-align: top;
}

table[class=plate] button[type=button] {
	padding: 0px;
	margin:  0px;
    border: 0px none;
	text-decoration: none;
	background-color: inherit;
}


table[class=plate] button[type=button] img {
	padding: 0px;
	margin:  0px;
    border: 0px none;
}

td.plate {
	padding: 0px;
	margin: 0px;
}

tr.plate {
	padding: 0px;
	margin: 0px;
}

th.plate {
	font-size: 10px;
	font-family: sans-serif;
	padding: 0px;
	margin: 0px;
	overflow: scroll;
}

a.plate {
	color: white;
	text-decoration: none;
}

table[class=plate] a img {
	padding: 0px;
	margin:  0px;
    border: 0px none;
}



/** Special classes of formats that also carry some information. */

/* Negative score has a red background. */
.score_neg {
	background-color: #faa;
	font-style: italic;
}

/* Positive score has a light green background. */
.score_pos {
	background-color: #afa;
	font-weight: bold;
}

/* A gray background indicates missing data. */
.score_none {
	background-color: #ccc;
	font-weight: bold;
}

/* A yellow background indicates unlcear or unknown data. */
.score_unknown {
	background-color: #ffc;
	font-weight: bold;
}

/* Shorter versions of the score classes for use in big tables. */

/* A yellow background indicates unlcear or unknown data. */
.scun {
	background-color: #ffc;
	font-weight: bold;
}

/* Negative score has a red background. */
.scne {
	background-color: #faa;
	font-style: italic;
}

/* Positive score has a light green background. */
.scpo {
	background-color: #afa;
	font-weight: bold;
}

/* A gray background indicates missing data. */
.scno {
	background-color: #ccc;
	font-weight: bold;
}



/* Error messages are red and larger. */
.error {
	color: red;
	font-size: larger;


}