body {
    font-family: Arial, Helvetica, sans-serif;
    background: #fff9d2;
}

body.cgi {
	margin: 0;
	padding: 0;
	background: #FFF9D2;
}

body.hgTracks {
	background: url("../../images/internal_bg1.jpg") repeat-x scroll left bottom #F9F9F7;
}

a:link {color: #121E9A;}

pre.code {
    font-family: Monaco,'andale mono','lucida console',monospace;
    font-size: 0.8em;
    width:800px;
    margin-left: 40px;
    overflow:auto;
    background-color: rgb(255,255,250);
    border: 1px dashed rgb(230,230,230);
    color: rgb(17,17,17);
    padding:5px;
}

span.inlineCode {
    display: inline;
    font-family: Monaco,'andale mono','lucida console',monospace;
    font-size: 0.9em;
}

.topBlueBar {   font-family: arial, Geneva, Helvetica, sans-serif; font-size: 15px; text-decoration: none; font-weight: bold;
                color: #D9E4F8; background-color:#2636D1; border: 1px solid black; height:28px; width:100%;
                text-align:center; vertical-align:middle; white-space:nowrap; padding: 0px 10px;}

/* CLASS DECLARATIONS TO MAKE NETSCAPE HAPPY */
.topbar {	font-family: arial, Geneva, Helvetica, sans-serif; font-size: 15px; text-decoration: none; font-weight: bold; color: #D9E4F8;}
.leftbar { text-decoration: none; font-family: arial, sans-serif; color: #FDFCEA; font-size: 10pt; font-weight: 600; }
.hiddenText {background-color: silver}
.normalText {background-color: white}

/* CLASS DECLARATIONS FOR THE REST OF THE BROWSERS */
.topbar { white-space: nowrap; padding: 0px 10px;}
A:link.topbar { text-decoration: none; font-family: arial, Geneva, Helvetica, sans-serif; color: #E0F0F0; font-size: 15px; }
A:visited.topbar { text-decoration: none; font-family: arial, Geneva, Helvetica, sans-serif; color: #E0F0F0; font-size: 15px; }
A:active.topbar { text-decoration: none; font-family: arial, Geneva, Helvetica, sans-serif; color: #E0F0F0; font-size: 15px; }
A:hover.topbar { text-decoration: none; font-family: arial, Geneva, Helvetica, sans-serif; color: #EAE360; font-size: 15px; }

A:link.leftbar { text-decoration: none; font-family: arial, sans-serif; color: #E0F0F0; font-size: 10pt; font-weight: 600; }
A:visited.leftbar { text-decoration: none; font-family: arial, sans-serif; color: #E0F0F0; font-size: 10pt; font-weight: 600; }
A:active.leftbar { text-decoration: none; font-family: arial, sans-serif; color: #E0F0F0; font-size: 10pt; font-weight: 600; }
A:hover.leftbar { text-decoration: none; font-family: arial, sans-serif; color: #FFFF99; font-size: 10pt; font-weight: 600; }
/*--  #FFFF00;  --*/

A:link.ug { text-decoration: none; font-family: arial, sans-serif; color: #888888; font-size: 11pt; font-weight: 600; }
A:visited.ug { text-decoration: none; font-family: arial, sans-serif; color: #888888; font-size: 11pt; font-weight: 600; }
A:active.ug { text-decoration: none; font-family: arial, sans-serif; color: #888888; font-size: 11pt; font-weight: 600; }
A:hover.ug { text-decoration: none; font-family: arial, sans-serif; color: #888888; font-size: 11pt; font-weight: 600; }

A:link.bigBlue { text-decoration: none; font-family: arial, sans-serif; color: #0000A0; font-size: 16pt; font-weight: 600; }
A:visited.bigBlue { text-decoration: none; font-family: arial, sans-serif; color: #A000A0; font-size: 16pt; font-weight: 600; }
A:active.bigBlue { text-decoration: none; font-family: arial, sans-serif; color: #A000A0; font-size: 16pt; font-weight: 600; }
A:hover.bigBlue { text-decoration: none; font-family: arial, sans-serif; color: #0000A0; font-size: 16pt; font-weight: 600; }
IMG.bigBlue {vertical-align: middle;}
TD.bigBlue {vertical-align: middle;}

A:link.toc { text-decoration: none; color: #0000CC;  }
A:visited.toc { text-decoration: none; color: #0000CC;  }
A:active.toc { text-decoration: none; color: #6666FF;  }
A:hover.toc { text-decoration: none; color: #6666FF; }

A:link IMG { border-width: 0px; padding: 0px; margin: 0px;}
A:visited IMG { border-width: 0px; padding: 0px; margin: 0px;}
A:active IMG {  border-width: 0px; padding: 0px; margin: 0px;}

/* A toggle bar can be seen in hgTracks, under the image groups that can be opened and closed. */
.blueToggleBar {font-weight: bold; color:#FFFFFF; background-color:#536ED3; height:28px; width:100%;
                text-align:center; vertical-align:middle; white-space:nowrap;}
.toggleButton  {height: 20px; width: 20px; vertical-align:middle;}


/* Web section styles - for use with functions webNewSectionDiv and webEndSectionTablesDiv */
.section {
    background-color: #fffee8; 
    border: 1px solid #888888;
    margin-bottom: 20px;
}

.subsection {
    padding:14px 13px 2px 14px;
}

.centeredStdTbl {
    margin: 10px auto; width: 98%;
}

.stdTblHead {
    background-color: #fcecc0;
}


/* A subheading bar is the light blue bar that appears at the top of web.c section boxes */
.subheadingBar {font-weight: bold; font-size:1.1em; color:#000000; background-color:#D9E4F8;
                width:100%; text-align:left; vertical-align:bottom;
                white-space:nowrap; text-indent:10px; padding-top:2px; }

/* OVERALL DEFINITIONS */
P	{	line-height: 1.2;
		text-align: left;
		color: black;
		margin-left: 0px;
}
P.two	{	line-height: 1.6;
		text-align: left;
		color: black;
		margin-left: 15px;
}
P.leftjustify{	line-height: 1.2;
		text-align: left;
		color: black;
		margin-left: 0px;

	}
UL	{}

TABLE{	border: 0;	}

LI {		line-height: 1.5;
	}


/*** used by CCDS, GENCODE, and other details page in hgc *** */

/* give the tables some breathing room and a consistent width */
TABLE.hgcCcds {
    margin-bottom: 30px;
    width: 500px;
}

TABLE.hgcCcds, TABLE.hgcCcds TH, TABLE.hgcCcds TD {
    border: 1px gray ridge;
    border-collapse: collapse;
    text-align: left;
    vertical-align: top;
    padding-left: 2px;
    padding-right: 4px
}
TABLE.hgcCcds TH {
    white-space: nowrap;
}
TABLE.hgcCcds TD {
    height: 1em;
}
/* table header has white text, include links */
TABLE.hgcCcds THEAD {
    background-color: #2636D1;
    color: #ffffff;
}
TABLE.hgcCcds THEAD * A {
    color: #ffffff;
}
TABLE.hgcCcds TR.hgcCcdsSub {
    background-color: #606ce2;
    color: #ffffff;
}
TABLE.hgcCcds TBODY {
    background-color: #D0FFD0;
}
TABLE.hgcCcds CAPTION {
    caption-side: top;
    text-align: left;
    font: medium bold;
}

/* used by transMap details page in hgc */
TABLE.transMap, TABLE.transMap TH, TABLE.transMap TD {
    border: 3px gray ridge;
    border-collapse: collapse;
    text-align: right;
    vertical-align: top;
}
TABLE.transMap THEAD {
    background-color: #a8c7ff;
    text-align: center;
}
TABLE.transMap TBODY {
    background-color: #D0FFD0;
}
TABLE.transMap CAPTION {
    caption-side: top;
    text-align: left;
    font: medium bold;
}
TABLE.transMapLayout TR TD {
    vertical-align: top;
}
TR.transMapLayout {
    vertical-align: top;
}
TR.transMapLeft TD {
    text-align: left;
}
.transMapNoWrap {
    white-space: nowrap;
}
.errorBg {
    background-color: #ff704f;
}
.warnBg {
    background-color: #f8ff30;
}


/* Used by LS-SNP protein structure mappings page in hgc.  Each row has
 * multiple columns that are grouped together with a seperator border */
TABLE.hgcLsSnp {
    border: 2px black solid;
    border-collapse: collapse;
    white-space: nowrap;
}
TABLE.hgcLsSnp TD.hgcLsSnpSep {
    border-right: 2px black solid;
    border-collapse: collapse;
}
TABLE.hgcLsSnp TR, TABLE.hgcLsSnp TD {
    border: 1px gray ridge;
    border-collapse: collapse;
    text-align: left;
    vertical-align: top;
    padding-left: 5px;
    padding-right: 5px;
}

/* for displaying a basic table - need to condense these to all just the .stdTbl class */
table.chainTbl, .descTbl, .stdTbl {border-collapse: collapse;}
table.chainTbl td, .descTbl td, .descTbl th, .stdTbl td, .stdTbl th {border: 1px solid #666; padding: 5px;}

/* --------------- Newer UI 2.0 styles --------------- */
.ghost { background-color: #EEEEEE; }
.pale  { background-color: #F8F8F8; }
.bgLevel1  { background-color: #FFFEE8; }
.bgLevel2  { background-color: #FFF9D2; }
.bgLevel3  { background-color: #FCECC0; }
.bgLevel4  { background-color: #EED5B7; }

/* Common boxes */
.inputBox  { border: 2px inset #CCCCCC; }
.lineOnTop { border-top: 1px solid #999999; }
.lineOnBottom { border-bottom: 1px solid #999999; }
.blueRoof  { border-top: 2px groove #000088; }
.greenRoof { border-top: 3px groove #008800; }
/*.greenFloor { border-bottom: 3px ridge #008800; }*/
.greenBox  { border: 5px outset #008800; }
.blueBox   { border: 4px inset #000088; } /* cfg box */
.redBox    { border: 3px ridge #AA0000; background-color: #FFF9D2; padding: 10px; margin: 10px; text-align: left; } /* Special alert */


/* Experiments with squeezing giant matrices */
.up45 { text-align: left; vertical-align: middle; width: 20px; margin: 0px; padding: 10px 3px 0px 3px; white-space: nowrap;
           position: relative; top: 0.8em;  left: -0.4em;
          -webkit-transform: rotate(-45deg); -webkit-transform-origin:0% 0%;/* for safari, chrome, etc. */
             -moz-transform: rotate(-45deg);    -moz-transform-origin:0% 0%;/* for firefox */
              -ms-transform: rotate(-45deg);     -ms-transform-origin:0% 0%;/* IE 9 */
               -o-transform: rotate(-45deg);      -o-transform-origin:0% 0%;/* Opera */
               display: none;  /* made visible in js code */
           /* filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); /* IE <9 90deg NOT SUPPORTED */
           /*filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.999884,M12=0.015230,M21=-0.015230,M22=0.999884);*/ /* IE<9 NOT SUPPORTED, conflits with IE9 */
         }
.dn45 { text-align: left; vertical-align: middle; width: 20px; margin: 0px; padding: 10px 3px 0px 3px; white-space: nowrap;
           position: relative; top: -1.4em; /* left: -0.1em; */
          -webkit-transform: rotate(45deg); -webkit-transform-origin:0% 100%;/* for safari, chrome, etc. */
             -moz-transform: rotate(45deg);    -moz-transform-origin:0% 100%;/* for firefox */
              -ms-transform: rotate(45deg);     -ms-transform-origin:0% 100%;/* IE 9 */
               -o-transform: rotate(45deg);      -o-transform-origin:0% 100%;/* Opera */
               display: none;  /* made visible in js code */
           /* filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1); /* IE <9 90deg NOT SUPPORTED */
           /* filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.999884,M12=-0.015230,M21=0.015230,M22=0.999884);*/ /* IE<9 NOT SUPPORTED, conflits with IE9 */
         }
/* For a cleaner site, we can remove underlines from links
a:link {text-decoration:none;}
a:visited {text-decoration:none;}
a:hover {text-decoration:underline;}
a:active {text-decoration:underline;}    */

a.cv:link {text-decoration:none;}
a.cv:visited {text-decoration:none;}
a.cv:hover {text-decoration:underline;}
a.cv:active {text-decoration:underline;}
.matCell  { border: 1px solid #FFFEE8; }
/*.matCell:hover  { background-color: #FCECC0; }*/

.hintCol { font-size: 70%; line-height: 80%; border-style: hidden; background-color: #FFF9D2; }
.hintRow { font-size: 70%; line-height: 80%; border-style: hidden; background-color: #FFF9D2; }
/* halfVis may need to be removed again, but I am hoping it works in DTD 4.01 transitional */
.halfVis { opacity: 0.5; filters.alpha.opacity:50; }

/* waitMask allows waiting on long running javascript using utils.js::waitOnFunction */
.waitMask { display: none; cursor: wait; z-index: 9999; position: absolute; top: 0; left: 0; height: 100%; width: 100%; background-color: #fff; }
.inOutButton { height: 24px; width: 24px; border-style: outset; } /* A [+][-] button can be toggled by waitOnFunction during long running scripts */

/* imageV2 */
div.dragZoom { cursor: text; }
img.sliceImg { position:relative; border:0; }
div.sliceDiv { overflow:hidden; }

/* These are for imageV2 sideButtons: */
.btn  { border-style: outset; background-color: #CCCCCC; border-color: #CCCCCC; } /* border-color: works for FF but screws up IE */
.btnN { border-width: 1px 1px 1px 1px; margin: 1px 1px 0px 1px; } /* connect none */
.btnU { border-width: 0px 1px 1px 1px; margin: 0px 1px 0px 1px; } /* connect up */
.btnD { border-width: 1px 1px 0px 1px; margin: 1px 1px 0px 1px; } /* connect down */
.btnL { border-width: 0px 1px 0px 1px; margin: 0px 1px 0px 1px; } /* connect linear */
.btnBlue { background-color:#91B3E6; }
.inset { border-style: inset; } /* Flatten button if not configurable */

/* These are for dragReorder: both in imageV2 and in hgTrackUi subtrack list */
.trDrag { background-color: #CCFFCC; }
.dragHandle { cursor: n-resize; }

/* in hgTracks imageV2, left label (and reverse rightLabel) now uses css for red line */
.tdLeft { border-right:1px solid #FFB4B4; }
.tdRight { border-left:1px solid #FFB4B4; }

/* These are duplicates of btnBlue and trDrag but allow useful highlighting to persist after hover */
.blueButtons { background-color:#91B3E6; }
.greenRows { background-color: #CCFFCC; }

/* The are for sortable tables */
table.subtracks { overflow: visible; white-space: nowrap; border: 1px solid #FFFEE8; }
tr.sortable { background-color: #FCECC0; }
th.sortable { color: #0000FF; }
th:hover.sortable { background-color: #CCFFCC; cursor: pointer; }
tbody.sorting { color: #DDDDDD; cursor: wait;  }

/* tr:hover.found { color: #000088; } */

.filterBy { display: none; } /* All filterBy's should be converted to dropdownchecklists by document.ready(). */

.noscript {
        background: none repeat scroll 0 0 #FFFF90;
        border-color: #CFCFCF;
        border-style: solid;
        border-width: 0 0 1px;
        color: #2F2F2F;
        font-size: 12px;
        line-height: 1.25;
        text-align: center;
        margin: 0;
        padding: 0;
}

.noscript .noscript-inner {
        background:url("/images/caution.gif") no-repeat scroll 20px 50% transparent;
        margin:0 auto;
        padding:12px 0;
        width:960px;
        text-align: center;
}

.noscript p {
        margin: 0;
        text-align: center;
}

.clickable:hover { cursor: pointer; }
.fauxInput  { border: 2px inset #CCCCCC; background-color: #fff; font-size: 10pt; display: inline-block; }
div.disabled  { border-color: gray; color: gray;  }
input.disabled  { opacity: 0.5; filters.alpha.opacity:50;  }
span.disabled   { opacity: 0.5; filters.alpha.opacity:50;  }

.positionDisplay {
		display: inline-block;
        padding: 5px; 
        border: lightgray 1px solid;
}

.positionInput {
        padding: 7px; -moz-border-radius: 3px; border-radius: 3px;
        border: gray 1px solid;
}

/*
   Styles for hgHubConnect (formerly in separate .css)
   by Greg Roe
   Last update: 2011-11-1 (greg)
*/

#tabs {
	font-size: 100%;
	margin-top: 5px;
}

.hubList table {
    width: 930px;
    border-collapse: collapse;
}

/* Creating rounded corners at the tops of tables - works with all CSS3 supporting browsers, degrades gracefully */
.hubList table tr:first-child th:first-child {-webkit-border-top-left-radius: 5px; -moz-border-radius-topleft: 5px; border-top-left-radius: 5px;}
.hubList table tr:first-child th:last-child {-webkit-border-top-right-radius: 5px; -moz-border-radius-topright: 5px; border-top-right-radius: 5px;}

/* Styling table cells */
.hubList tbody 	{font-size: 0.9em;}
.hubList table tr td:first-child {text-align: center;}
.hubList table#unlistedHubsTable tr td:last-child {text-align: center;}
.hubList th, .hubList td {padding: 2px 8px; text-align: left;}
.hubList th {background-color: #e5dfb1; height: 1.6em; vertical-align: middle;}
.hubList table tbody tr {background-color: #fffef8;}
.selectedRow {background-color: #99dd9a !important;}
.hoverRow {background-color: #fdffb7 !important;}
.hubList td {border-top: 1px solid #d5cd9e; border-bottom: 1px solid #d5cd9e;}
.centeredCol {text-align: center;}
#addHubBar {background-color: #bfbfb2; line-height: 2.3em;}
#hubURL {line-height: 0.9em; color: #1c1d22;}
.hubList input {margin: 3px; font-size: 0.8em;}
.submitHub {margin: 10px;}

.tabFooter {
    font-size: 100%;
    font-family: Verdana,Arial,sans-serif;
}

.tabFooter input {
    font-size: 0.8em;
    margin: 7px 0 7px 3px;
}
.tabFooter .small {margin: 2px 40px; font-size: 0.8em;}

.hubError {color: #F00000;}
/* END - hgHubConnect Styles */

/* User account login/signup styles */
.formBox a {text-decoration: none}
.formBox a:hover {text-decoration: underline;}
.centeredContainer {margin: 0 auto;}
.formBox {
    width: 400px;
    border: 2px solid #eed5b7;
    margin-top: 2.5em;
    padding: 0 30px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    background-color: #fff9d2;}
.formBox input {font-size: 1.04em;}
.formBox label {display: block; margin-top: 10px;}
.formBox label.radioLabel {display: inline; margin: 0;}
#helpBox {
    margin-top: 20px;
    padding: 20px 0 10px 0; 
    border-top: 1px solid #eed5b7;}
label small {
    font-style: italic;
    font-size: 0.9em;}
.highlightBox { /* combine with classes error, alert, or highlight */
	border: 2px solid;
    padding: 10px;}
.error { /* for use with highlightBox, when used for error msgs */
    border-color: #f00;
    background-color: #ffeded;
    color: #f00;}
.confirmationTxt {
    font-size: 1.2em;
    font-weight: normal;}
/* END - User account login/signup styles */

/* [+][-] buttons are no longer images but divs */
.pmButton { font-size: small; font-weight:bold; text-align:center; font-family: courier; color: black;
            display: inline-block; width:16px; height:16px; vertical-align: top;
            border: 2px outset lightGray; border-bottom-color:darkgray; border-right-color:darkgray;
            background-color:#F3EDED; cursor: pointer;}
.pmButton:hover { border-bottom-color:DarkBlue; border-right-color:DarkBlue; color: #0000AA; background-color:#AADDFF; }

/* Experimental hilighting of all buttons on hover */
/* input[type=submit]:hover,input[type=button]:hover { color: #0000AA; border:2px outset #008800; } */
/* img[src="../images/add_sm.gif"]:hover,img[src="../images/remove_sm.gif"]:hover { outline:#008800 outset 1px; } */

/* Styles for static pages with the "original" browser look */
body.oldStaticPage {
		background-color: rgb(255,249,210); /* #fff9d2 */
	}

body.oldStaticPage .nav {
	margin: 6px 0 6px;
}

body.oldStaticPage .section h1 {
	background-color: rgb(217,228,248); /* #d9e4f8 */
   	font-size: 1.1em;
	padding: 3px 14px;
	margin: 0;
}
	
body.oldStaticPage .sectionContent {
	padding: 0 14px;
}

#hgFindResults {
        padding: 1em;
}

#warnBox {
    background-color: Beige;
    border: 3px ridge DarkRed;
    width:640px;
    padding:10px; 
    margin:10px;
    text-align:left;
}

#warnHead {
    color: DarkRed;
}

.centeredImage
{
    text-align: center;
    margin-top: 0px;
    margin-bottom: 0px;
    padding: 0px;
}