/* General setup: default colors and fonts, and main page divisions */
body
{
	margin: 0px;
	padding: 0;
	color: #001;
	background: #DDD;
	font-family: georgia, "Palatino Linotype", "Book Antiqua", Palatino, serif;
}

/* page-content: main page content.  Appears to right of navigation bar.
   Width adjusts if browser window is resized.  220 px left margin makes
   room for navigation bar.
*/

#page-content
{
	margin: 0 20px 20px 220px;
	padding: 20px;
	color: #000;
	background: #DDD;
}

/* Fix IE6 peekaboo bug behavior; see  */
/* http://www.positioniseverything.net/articles/hollyhack.html */
/* Hides from IE5-mac \*/
* html #page-content { height: 1%; }

/* End hide from IE5-mac */

/* This is supposed to fix an IE bug */
         
 ul, ol, dl {
              position: relative;  
 }


/* page-title: within page-content.  Inverse text (light letters 
   with dark background, in sans-serif font.
   Height set to be the same as the YJM789 license plate logo (101px).
   This means the page title should be short enough to avoid line wrap.
*/

#page-title
{
	margin: 0px 10px 0px 0px;
	line-height: 95px;
	/* aligns end of title with lic. plate */
	font-family: verdana, arial, helvetica, sans-serif;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	color: #ffffff;
	background: #999999;
}

/* page-subtitle (for subordinate pages): within page-content.  Regular text 
   sans-serif font, borders like major-header.
   Height set to be the same as the YJM789 license plate logo (101px).
   This means the page subtitle should be short enough to avoid line wrap.
*/

#page-subtitle
{
	margin: 0px 10px 0px 0px;
	line-height: 95px;
	/* aligns end of title with lic. plate */
	font-family: verdana, arial, helvetica, sans-serif;
	border-width: thick 0 thick 0;
	border-color: #999;
	border-style: solid;
	color: #000;
	background: #DDD;
}

#image-subtitle
{
	margin: 0px 0px 0px 0px;
	line-height: 45px;
	/* aligns end of title with lic. plate */
	font-family: verdana, arial, helvetica, sans-serif;
	border-width: thick 0 thick 0;
	border-color: #999;
	border-style: solid;
	color: #000;
	background: #DDD;
	text-align: center;
}

/* Navigation bar: 200 px wide, with 20px gutter between it and page-content.
*/

#navbar
{
	position: absolute;
	top: 20px;
	left: 20px;
	width: 200px;
	margin: 0px;
	padding: 0px;
	color: #000;
	background: #DDD;
}

#subnavbar
{
	top: 20px;
	left: 20px;
	width: 160px;
	margin: 0px;
	padding: 0px;
	color: #000;
	background: #DDD;	
}




/* navheader class is used for the license plate logo */
.navheader
{
	clear: both;
	border: 0;
}

/* Local nav header: for links back to contig or chromosome page */
.localnavh
{
	font-family: verdana, arial, helvetica, sans-serif;
	font-size: 10pt;
	padding-top: 5pt;
}

/* This is used for the sequence version badges appearing below the 
   navigation links on most pages. 
*/

div.vlogo-badges
{
	margin-top: 30px;
	font-family: verdana, arial, helvetica, sans-serif;
	font-size: 8pt;
}

/* This is used for HTML and CSS validation logos and links
   in the navigation bar
*/

div.validation
{
	margin-top: 30px;
	font-family: verdana, arial, helvetica, sans-serif;
	font-size: 8pt;
}

div.validation img { border: 0; }

/* author and mod date */
div.authorship
{
	margin-top: 30px;
	font-family: verdana, arial, helvetica, sans-serif;
	font-size: 8pt;
}

/* ------------------------------------------------------------
   Link appearance

   In general, links are dimmer after being visited, and inverse when 
   hovered over.  
*/

a:link
{
	color: #000000;
	background: #DDD;
}

a:visited
{
	color: #606;
	background: #DDD;
}

a:hover
{
	color: #ffffff;
	background: #CCC;
}

a:visited:hover
{
	color: #ffffff;
	background: #CCC;
}

a:focus
{
	color: #ffffff;
	background: #DDD;
}

/* Link appearance exceptions:
   Navbar links have borders, and are fixed-width blocks.
   Why do I need the -40px margin to make them line up the way I want?
*/

#navbar ul li a
{
	border-bottom: 1px solid #000;
	display: block;
	text-decoration: none;
	width: 200px;
	padding: 0;
	margin: 0 0 0 -40px;
}

#subnavbar ul li a
{
	border-bottom: 1px solid #000000;
	display: block;
	text-decoration: none;
	width: 160px;
	padding: 0;
	margin: 0 0 0 -40px;
		overflow: visible;
}

/* Used instead of <a>...</a> for nav links that point to this page */
#navbar span.here
{
	border-bottom: 1px solid #000;
	display: block;
	text-decoration: none;
	width: 200px;
	padding: 0;
	margin: 0 0 0 -40px;
	color: #000;
	background: #DDD;
}

#subnavbar span.here
{
	border-bottom: 1px solid #000;
	display: block;
	text-decoration: none;
	width: 160px;
	padding: 0;
	margin: 0 0 0 -40px;
	color: #000000;
	background: #DDD;
}

/* I prefer to have a line above the column of links as well as below it: */
#navbar ul li:first-child a { border-top: 1px solid #609; }

/* In the navigation bar, don't dim visited links: */
#navbar ul li a:visited
{
	color: #000;
	background: #ddd;
}

/* ...but do invert them when hovered over */
#navbar ul li a:visited:hover
{
	color: #ffffff;
	background: #ccc;
}

/* Override the usual navbar link appearance for the sequence version badges,
    which are just images that should be treated as ordinary links */

#navbar div.vlogo-badges ul li a
{
	color: #609;
	background: #fff;
	text-decoration: none;
	display: inline;
	margin: 30px 0 0 0;
	border: 0;
}

#navbar div.vlogo-badges ul li a:hover
{
	color: #609;
	background: #ccc;
}

/* Same for validation logos */
#navbar div.validation ul li a
{
	color: #609;
	background: #fff;
	text-decoration: none;
	display: inline;
	margin: 30px 0 0 0;
	border: 0;
}

#navbar div.validation ul li a:hover
{
	color: #609;
	background: #fff;
}

/* ------------------------------------------------------------
   General formatting.

   Headers:
   Except for the page header and the small header for the version badges,
   these are in the usual serif font.
*/

h1,h2,h3,h4,h5,h6
{
	font-family: georgia, "Palatino Linotype", "Book Antiqua", Palatino, serif;
	margin: 1.25em 0 0.75em 0;
}

h1
{
	font-size: 249%;
	clear: both;
}

h2
{
	font-size: 207%;
	clear: both;
}

h3
{
	font-size: 173%;
	clear: both;
		vertical-align: middle;
}

h4
{
	font-size: 144%;
	clear: both;
}

h5
{
	font-size: 120%;
	clear: both;
}

h6
{
	font-size: 100%;
	clear: both;
}

/* Headers designated as "major" get a border like this:

    ------
    header
    ------

    with color matching the page-header background
*/


.major-header
{
	margin-top: 40px;
	margin-bottom: 10px;
	border-width: medium 0 medium 0;
	border-color: #999;
	border-style: solid;
	padding: 0.75em 0 0.0em 0;
	vertical-align: middle;
	font-size: x-large;
}


.major-footer
{
	margin-top: 10px;
	margin-bottom: 10px;
	border-width: medium 0 medium 0;
	border-color: #999;
	border-style: solid;
	padding: 0.1em 0.5em 0.1em 0.5em;
}

/* This apparatus is used to display logos inside major headers, like this:

   ---------------------------------
   header                       logo
   ---------------------------------

   the Header goes in a span.left, and the logo in a span.right.  Because
   they both float, they need to be bracketed by spacers (below) to make
   the borders look right.
*/

.major-header span.left
{
	text-align: left;
	float: left;
	font-weight: bold;
	vertical-align: middle;
}

.major-header span.right
{
	float: right;
	text-align: right;
	vertical-align: middle;
	font-weight: bold;
}



.major-footer span.left
{
	text-align: left;
	float: left;
	font-weight: bold;
}

.major-footer span.right
{
	float: right;
	text-align: right;
	vertical-align: middle;
}
.major-footer span.center
{
	float: none;
	text-align: center;
	vertical-align: middle;
	
}

#page-title span.left
{
	text-align: left;
	float: left;
}

#page-title span.right
{
	float: right;
	text-align: right;
	vertical-align: middle;
}

/* Version logos displayed with the above apparatus need to be moved
   down a bit.
*/

.intitle-version-logo { margin-top: 0.5em; }

/* For version logos inline in text */
.inline-version-logo { vertical-align: bottom; }

/* ----------------------------------------
   Spacers
*/

div.spacer { clear: both; }

div.cram-spacer
{
	clear: both;
	margin-top: 0;
	margin-bottom: 0;
}

/* ----------------------------------------
   List formatting
*/

/* I hate bullets */
ul { list-style-type: none; }

/* "Plain" lists.  Adjust padding so first line of each item is flush left 
    Later lines are indented 2em */

ul.plainlist
{
	padding-left: 4em;
	text-indent: -2em;
}

/* Open up the plainlist vertical spacing a little bit... */
.plainlist li { margin-bottom: 0.2em; }

/* ... except in the navbar */
#navbar .plainlist li { margin-bottom: 0; }

/* Multi-column list.  The items float, so spacers are needed as with 
   the logo headers, or whatever comes next is too close to the list */

ul.mclist
{
	padding-left: 0em;
	margin: 0 0 1em 0;
}

ul.mclist li
{
	float: left;
	width: 300px;
	height: 300px;
	vertical-align: text-bottom;
	vertical-align: middle;
	display: block;
	margin-left: auto;
	margin-right: auto;
	border-color: #033;
	border-width: 1px;
	border-style: solid;
}


ul.mclist li p
{
	text-align: center;
	vertical-align: bottom;
		vertical-align: text-bottom;
}

/*  table for photos
*/



div.singlePhoto
{
	
	border-color: black;
	border-style: none;
	border-width: 5px;
	width: 600px;
	height: 620px;
	overflow: visible;
	text-align: center;
	vertical-align: text-bottom;
	
}

div.singleMatt
{
	
	width: 400px;
	height: 600px;
	border-color: black;
	border-width: 3px;
	border-style: solid;

    vertical-align: middle
   

}

div.singlePhoto p
{
	text-align: center;
	vertical-align: text-bottom;
	margin-top: 0;
}


div.photo
{
	float: left;
	border-color: black;
	border-style: none;
	width: 255px;
	height: 300px;
	overflow: hidden;
	margin: 0 5px 0 5px;
}


div.ct1
{
	float: left;
	border-color: black;
	border-style: none;
	width: 550px;
	height: 327px;
	overflow: hidden;
	margin: 0 5px 0 5px;
	clear: none;
}
div.test
{
	float: left;
	border-color: black;
	border-style: none;
	width: 550px;
	height: 436px;
	overflow: hidden;
	margin: 0 5px 0 5px;
	clear: none;
}
div.flyer
{
	float: left;
	border-color: black;
	border-style: none;
	width: 600px;
	height: 800px;
	overflow: hidden;
	margin: 0 5px 0 5px;
	clear: none;
}

div.matt
{
	
	width: 255px;
	height: 255px;
	border-color: black;
	border-width: 1px;
	border-style: none;

    vertical-align: middle
   

}

  
div.photo p
{
	text-align: center;
	
}

div.photo p
{
	text-align: center;
	vertical-align: text-bottom;
}

div.photo img
{
	border-color: #444444;
	border-width: 4px;
	border-style: groove;
	vertical-align: middle;
	display: block;
	margin-left: auto;
	margin-right: auto;
	
}


div.matt img
{
	border-color: black;
	border-width: 3px;
	border-style: groove;
	vertical-align: middle;
	  display: block;
    margin-left: auto;
    margin-right: auto
	
}

img.displayed
{
	border-color: black;
	border-width: 3px;
	border-style: groove;
	vertical-align: middle;
	display: block;
	margin-left: auto;
	margin-right: auto;
	padding: 15px;
}

div.photo  a
{

	/*  text-decoration: none;*/
	
	
}


div.photo  a:link
{
	color: #000000;
	background: #DDD;
}

div.photo  a:visited
{
	color: #666;
	background: #DDD;
}

div.photo a:hover
{
	color: #ffffff;
	background: #DDD;
}

div.photo a:visited:hover
{
	color: #ffffff;
	background: #DDD;
}

div.photo a:focus
{
	color: #ffffff;
	background: #DDD;
}



/* ----------------------------------------
   Not clear whether I really want these.  The idea was to have a way to cram 
   boxes closer together.  
*/

div.cram
{
	margin-top: 0em;
	margin-bottom: 0em;
}

div.cram h6
{
	margin-top: 0;
	margin-bottom: 0;
}

div.cram ul.mclist { margin-top: 0; }

/* ---------------------------------------------------------------------- */
/* Formatting for plasmid pages */
div.plasmid-external { }
div.plasmid-external h4 { }
div.plasmid-internal { }
div.plasmid-internal h4 { }

/* ---------------------------------------------------------------------- */
/* For match pages, reworked from old matchstyle.css */
/* Generic */
div.match
{
	color: #000;
	background: #fff;
	font-family: Verdana, Arial, Helvetica, sans-serif;
}

div.match h4 { font-size: 120%; }
div.match h5 { font-size: 100%; }

div.match h4, div.match h5
{
	font-family: Verdana, Arial, Helvetica, sans-serif;
	margin-bottom: 0;
	margin-left: -0.25em;
}

/* Style for region/match/detail lines in fmatch/gmatch files */
div.region
{
	border: solid;
	border-width: thin;
	border-color: #099;
	margin-bottom: 1em;
	padding: 0 0.25em 0.25em 0.75em;
}

/* Colors for annotated repeat matches */
div.fmatch h5.LTR { color: blue; }
div.fmatch h5.feature { color: red; }
div.fmatch h5.repeat { color: teal; }
div.fmatch h5.RNA { color: fuchsia; }
div.fmatch h5.tRNA { color: purple; }
div.gmatch h5 { color: green; }
div.gmatch h5:before { content: "Repeat: "; }

div.fmatch p, div.gmatch p
{
	text-indent: -0.25em;
	margin-top: 0;
	margin-bottom: 0.5em;
	font-family: Garamond, "Palatino Linotype", "Book Antiqua", Palatino, "Times New Roman", Times, serif;
	font-size: 90%;
}

p.rmatch
{
	padding-left: 1em;
	text-indent: 1em;
	margin-top: 0;
}

img.info
{
	vertical-align: top;
	display: inline;
	white-space: normal;
	float: left;
}

p.info
{
	vertical-align: top;
	display: inline;
	white-space: normal;
	float: left;
	padding: 0 0 0 20px;
}

div.printinfo
{
	width: 95%;
	clear: both;
}

table.printinfo 
{
	border-style: none;
	text-align: center;
	float: left;
	
	margin: 0 0 12px 25px;
	width: auto;
}

table.printinfo th
{
	border-width: thin;
	border-style: none;
	text-align: center;
	padding: 12px 24px 12px 24px;
	margin: 0 12px 0 12px;
}

table.printinfo td
{
	border-width: thin;
	border-style: none;
	text-align: center;
	padding: 6px;
	margin: 12px;
}

/* ---------------------------------------------------------------------- */
/* Header for alignment pages and others that are mostly monospaced text  */
#wholepage-title
{
	font-family: Verdana, Arial, Helvetica, sans-serif;
	border-width: 0 0 thin 0;
	border-color: #099;
	border-style: solid;
	margin-bottom: 24pt;
	padding: 0 0 1em 1em;
	color: #000;
	background: #fff;
}

div.wholepage-text { margin-left: 24pt; }

/* Contig alignment table */
.formatted-text { font-family: monospace; }

.formatted-text p
{
	padding-left: 2em;
	text-indent: -2em;
}

.contig-layout-img { margin-bottom: 24pt; }

/* ---------------------------------------------------------------------- */
/* Colors for ORF match pages  */
span.nomatch { color: purple; }
span.single { color: fuchsia; }
span.multiple { color: teal; }