static/css/new_sgn.css

   1 /* NOTE: SGN blue is #ccccff */
   2 /********************     GENERAL SITE STYLES     **********************/
   3 /*body {
   4   color: black;
   5   background-color: white;
   6   font-family: verdana, arial, helvetica, sans-serif;
   7   font-size: 12px;
   8   line-height: 1.25;
   9 }
  10 */
  11
  12 /*#sgn_container {
  13   max-width:1000px;
  14   margin-left: auto;
  15   margin-right: auto;
  16   padding: 0px;
  17 }
  18 */
  19
  20 /*#pagecontent_t {
  21   margin: auto;
  22   width: 730px;
  23 }
  24 */
  25
  26 /*
  27 #wrapper {
  28     min-height:100%;
  29 }
  30
  31 #main_row {
  32     overflow:auto;
  33     padding-bottom:275px;
  34 }
  35
  36 /*Opera Fix Footer at bottom*/
  37 /*body:before {
  38   content:"";
  39   height:100%;
  40   float:left;
  41   width:0;
  42   margin-top:-32767px;
  43 }
  44 */
  45
  46
  47
  48 #list_dialog, #list_item_dialog { overflow-y:scroll }
  49
  50 table.borderless td,table.borderless th{
  51      border: none !important;
  52 }
  53
  54 #list_item_dialog_datatable_filter input, #public_list_item_dialog_datatable_filter input, #public_list_data_table_filter input, #private_list_data_table_filter input {
  55   width: 140px;
  56   height: 30px;
  57   padding: 6px 12px;
  58   font-size: 12px;
  59   line-height: 1.42857143;
  60   color: #555;
  61   background-color: #fff;
  62   background-image: none;
  63   border: 1px solid #ccc;
  64   border-radius: 4px;
  65   -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
  66           box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
  67   -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
  68        -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
  69           transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
  70 }
  71
  72 .modal-body {
  73   max-height: calc(100vh - 212px);
  74   overflow-y: auto;
  75 }
  76
  77 #xtratbl {
  78 background-color:#CCCCFF;
  79 border: 1px solid #C0C0C0;
  80 }
  81 #org_content{
  82 border:1px solid #C0C0C0;
  83 }
  84 table {
  85   font-family: verdana, arial, helvetica, sans-serif;
  86   font-size: 12px;
  87   text-align: left;
  88   padding: 0;
  89   border: 0;
  90   border-collapse: separate;
  91 }
  92 input, select, textarea {
  93   background: #EEEEFF;
  94   font-size: 12px;
  95 }
  96 li {
  97   margin-bottom: 0.25em;
  98 }
  99 td {
 100   vertical-align: top;
 101 }
 102
 103 /*various places on the site use various headline size tags, so let's try to make them all the same*/
 104 h1,h2,h3,h4,h5,h6 {
 105   font-family: verdana, arial, helvetica, sans-serif;
 106   font-size: 14px;
 107   line-height: 16px;
 108 }
 109 dt {
 110   font-weight: bold;
 111   margin-bottom: 0.1em;
 112 }
 113 dd {
 114   margin-bottom: 0.5em;
 115   margin-left: 2.5em;
 116 }
 117 dt.sub { /* used for a second sublevel of dictionary terms */
 118   font-weight: normal;
 119   font-style: italic;
 120 }
 121
 122 /* where to put the title image  */
 123 td.sgnlogo {
 124   vertical-align: top;
 125 }
 126 img {
 127   border: 0;
 128 }
 129
 130 img#sgnlogo {
 131   margin: -7px 6px 0 0;
 132 }
 133 img#sgntext {
 134   margin: 0 0 2px 12px;
 135 }
 136 td.toplink {
 137   text-align: right;
 138   vertical-align: middle;
 139   padding: 0 18px 0 0;
 140   white-space: nowrap;
 141 }
 142 a.toplink:link, a.toplink:visited, a.toplink:active {
 143   color: black;
 144   padding: 0;
 145   text-decoration: none;
 146   line-height: 1.1;
 147   font-family: "Bitstream Vera Sans",Arial,Helvetica,sans-serif;
 148 }
 149 a.toplink:hover {
 150   padding: 0px 0px 0px 0px;
 151   text-decoration: underline;
 152 }
 153 a.mytools, a.mytools:link, a.mytools:visited {
 154   font-weight: bold;
 155   text-decoration: underline;
 156   color: black;
 157   padding: 0.1em 0.3em 0.1em 0.3em;
 158   line-height: 1.38;
 159   margin-left: 1em;
 160 }
 161
 162 /*a.external, a[href ^="http:"] {
 163   background: url(/documents/img/external.png) center right no-repeat;
 164   padding-right: 13px;
 165 }
 166 */
 167 a.footer {
 168         background: none;
 169         padding-right: 2px;
 170 }
 171
 172 a[href ^="mailto:"]  {
 173         background: url(/documents/img/mail_icon.gif) center right no-repeat;
 174         padding-right: 16px;
 175 }
 176
 177 /*
 178 #pagefooter {
 179   margin: -275px 0px 0px 0px;
 180   position:relative;
 181   height:275px;
 182   clear:both;
 183 }
 184 */
 185
 186 #pagefooter a, #pagefooter a:active, #pagefooter a:link, #pagefooter a:visited {
 187   color: #666666;
 188 }
 189
 190 #quicksearch_form {
 191   margin: 10px 0px 0px 0px;
 192 }
 193
 194 td.clonecart {
 195   vertical-align: middle;
 196   text-align: center;
 197 }
 198 #clone_shoppingcart {
 199   text-align: center;
 200   white-space: nowrap;
 201   vertical-align: middle;
 202 }
 203
 204 /* this is a centered page title, like 'BAC P00343' or 'Marker TM2' or whatever */
 205 #pagetitle {
 206   text-align: center;
 207   margin: 0;
 208   padding: 0;
 209 }
 210 #pagetitle > h3 {
 211   text-align: center;
 212   margin-top: 0;
 213   padding: 0;
 214 }
 215
 216 /* Developer Toolbar Style */
 217 div.devbar {
 218         width: 100%;
 219         padding: 5px;
 220         margin: -8px 0 13px -5px;
 221
 222         text-align: center;
 223         background-color: #eef;
 224         border-bottom: 2px solid #905;
 225 }
 226 /**Everything visible is in a table, use this to style fonts**/
 227 table.devbar {
 228         font-size:1.0em;
 229 }
 230
 231 /* general div to make something a little more indented */
 232 div.indentedcontent, div.indented_content, div.page_introduction {
 233   margin: 0.3em 1em 2em 2em;
 234 }
 235 div.page_introduction {
 236   padding: 0.3em;
 237 }
 238
 239 /* same effect as above, except for table cells.  Don't make new pages that use this. */
 240 td.indentedcontent, td.indented_content {
 241   padding: 1em 1em 2em 2em;
 242 }
 243 /*generic text-align tags*/
 244 .center {
 245   text-align:center;
 246 }
 247 .right {
 248   text-align:right;
 249 }
 250 .left {
 251   text-align:left;
 252 }
 253
 254 /* the little tables at the top of search forms with */
 255 /* the title of the search and a "select random" link */
 256 table.search_form_title {
 257   width: 100%;
 258 }
 259 span.search_form_title {
 260   font-weight: bold;
 261   margin-bottom: 1em;
 262   display: block;
 263 }
 264 a.search_form_random {
 265   font-size: 75%;
 266 }
 267 a.search_form_random:before {
 268   content: '[';
 269 }
 270 a.search_form_random:after {
 271   content: ']';
 272 }
 273
 274 /*****************************     LINKS     ************************************************************/
 275 /*                                                                                                      */
 276
 277 a:link  {
 278   color:#0000ff;
 279   text-decoration:none;
 280 }
 281 a:active  {
 282   color:#0000ff;
 283   text-decoration:none;
 284 }
 285 a:visited  {
 286   color:#3333ff;
 287   text-decoration:none;
 288 }
 289 a:hover {
 290   text-decoration:underline;
 291 }
 292 a.hidevisited:link  {
 293   color:#0000ff;
 294   text-decoration:none;
 295 }
 296 a.hidevisited:active {
 297   color:#0000ff;
 298   text-decoration:none;
 299 }
 300 a.hidevisited:visited  {
 301   color:#0000ff;
 302   text-decoration:none;
 303 }
 304 a.hidevisited:hover {
 305   color:#0000ff;
 306   text-decoration:underline;
 307 }
 308 a.quicksearch_hit {
 309   font-weight: bold;
 310 /*   background: #ccccff;  */
 311 /*   border: 1px solid #9f9fc7; */
 312 }
 313
 314 /*makes a submit button that looks more like a link*/
 315 input.linkstyle {
 316   color:#0000ff;
 317   text-decoration:none;
 318   background:#ffffff;
 319   border:0;
 320   font-size:12px;
 321 }
 322 /*makes a submit button that looks more like a link*/
 323 input.linkstyle:hover {
 324   color:#0000ff;
 325   text-decoration:underline;
 326   background:#ffffff;
 327   border:0;
 328   font-size:12px;
 329 }
 330
 331 /* for little "what's this" links leading to help pages */
 332 a.context_help {
 333   font-size: 80%;
 334   letter-spacing: -1px;
 335   font-weight: normal;
 336 }
 337 a.context_help:before {
 338   content: '(';
 339   color: black;
 340 }
 341 a.context_help:after {
 342   content: ')';
 343   color: black;
 344 }
 345
 346 /*****************************     FONTS     ************************************************************/
 347 /*Don't add one if you can use one that's already here. It will keep our fonts more consistent.         */
 348
 349 pre {
 350         font-family: bitstream vera sans mono, monospace;
 351         font-size: 12px;
 352         line-height: 13px;
 353 }
 354 /* sequences should be displayed in a monospace font */
 355 .sequence, .monospace {
 356         font-family: bitstream vera sans mono, monospace;
 357 }
 358 .sequence .methionine {
 359   color: #0033cc;
 360   font-weight: bold;
 361 }
 362 .sequence .stop_codon {
 363   color: red;
 364   font-weight: bold;
 365 }
 366 .sequence .orf {
 367   background: #ddd;
 368 }
 369 .sequence .longest_orf {
 370   background: yellow;
 371 }
 372 .threeframe_translate .frame {
 373   font-weight: bold;
 374 }
 375
 376
 377 /*some old style used by koni in est.pl and unigene.pl*/
 378 .fix {
 379         letter-spacing: 0px;
 380         font-family: bitstream vera sans mono, monospace;
 381         font-size: 12px;
 382         line-height: 13px;
 383 }
 384 .fieldname {
 385         font-weight: bold;
 386         line-height: 1.2;
 387 }
 388 /* example text used in search pages */
 389 .searchexample {
 390         font-style: italic;
 391         font-size: 10px;
 392 }
 393 .tinytype {
 394         font-size: 10px;
 395 }
 396 .notes {
 397         font-style:italic;
 398 }
 399 .mono {
 400         font-family: monospace;
 401 }
 402
 403 /*****************************     TEXT AND BACKGROUND COLORS     ***************************************/
 404 /*Don't add one if you can use one that's already here. It will keep our color scheme more consistent.  */
 405
 406 /*bgcolorstatuses 1-4 show statuses with color (used on BAC registry, for instance)
 407
 408 span.bgcolorstatus1,
 409 span.bgcolorstatus2,
 410 span.bgcolorstatus3,
 411 span.bgcolorstatus4,
 412 span.bgcoloralt,
 413 span.bgcolorselected a {
 414   padding-left: 0.2em;
 415   padding-right: 0.2em;
 416   line-height: 1.3;
 417   border: 1px solid #444444;
 418 }
 419
 420 */
 421
 422 .bgcolorstatus1 a, .bgcolorstatus1 span.nolink {
 423         background-color: #dddddd;
 424         margin: 0;
 425         padding: 2px;
 426         border: 1px solid black;
 427 }
 428 .bgcolorstatus2 a, .bgcolorstatus2 span.nolink {
 429         background-color: #ffff66;
 430         margin: 0;
 431         padding: 2px;
 432         border: 1px solid black;
 433 }
 434 .bgcolorstatus3 a, .bgcolorstatus3 span.nolink {
 435         background-color: #66ff66;
 436         margin: 0;
 437         padding: 2px;
 438         border: 1px solid black;
 439 }
 440 .bgcolorstatus4 a, .bgcolorstatus4 span.nolink {
 441         background-color: #9999ff;
 442         margin: 0;
 443         padding: 2px;
 444         border: 1px solid black;
 445 }
 446
 447 /*for lists of things with alternating colored backgrounds*/
 448 .bgcoloralt2 {
 449         background-color: #f5f5ff;
 450 }
 451 .bgcoloralt1 {
 452         background-color: #fcfcff;
 453 }
 454 /*to discreetly highlight an item*/
 455 .bgcolorselected {
 456         background-color: #ccccff;
 457 }
 458 /*use class="sgnblue" instead of bgcolor="sgnblue"*/
 459 .sgnblue {
 460         background-color: #ccccff;
 461 }
 462 /*important warning*/
 463 .alert {
 464         font-weight: bolder;
 465         color: #ffffff;
 466         background-color: #ff0000;
 467 }
 468 /*not quite so important warning*/
 469 .warning {
 470     color: #d22;
 471     background-color: none;
 472 }
 473 .news {
 474         color: #ff0000;
 475 }
 476 /* used to highlight things in yellow, like bad regions of sequences */
 477 .highlighted, .badseq {
 478         background: yellow;
 479 }
 480 /* used to indicate something is disabled or relatively unimportant. just like, um, ghosts */
 481 .ghosted {
 482   color: gray;
 483 }
 484 /* used for special notices that are unusual, and to which the user's attention should be drawn */
 485 .specialnote {
 486   font-size: 110%;
 487 }
 488 div.specialnote {
 489   margin-top: 1em;
 490   margin-bottom: 1em;
 491 }
 492 /* for things you want to put in a subtly set-off box */
 493 div.minorbox {
 494   border: 1px solid #cccccc;
 495 }
 496 div.deprecated {
 497         padding:3px;
 498         margin-left:5px;
 499         margin-bottom:10px;
 500         border:1px dashed #772222;
 501         background-color:#e5e5e5;
 502         color:#600;
 503         text-align:center;
 504         font-size:1.2em;
 505 }
 506
 507 span.help {
 508   cursor: help;
 509   border-bottom: 1px dashed #666;
 510 }
 511
 512 span.toolbar_help {
 513 /*nothing different*/
 514 }
 515
 516 /*****************************     INFO SECTIONS     *******************************************************/
 517
 518 /* plus and minus image in collapsible sections */
 519 .collapser_img {
 520   height: 15px;
 521   margin-bottom: 5px;
 522 }
 523
 524 /*
 525    You will probably not need these, because you can
 526    just call the info_section_html() function that uses them
 527 */
 528
 529 /*
 530   these make a blue box like we like to use to divide
 531   info pages into sections.
 532 */
 533 .infosectionhead,
 534 .infosectionhead_empty,
 535 .sub_infosectionhead,
 536 .sub_infosectionhead_empty
 537 {
 538   width: 100%;
 539   /*background: #ccccff;*/  /* this is "SGN blue" */
 540   text-align:left;
 541   margin-bottom: 10px;
 542 /*  margin-left: 5px;*/
 543   padding-left: 10px;
 544 /*         margin-right: 1em; */
 545   border-bottom-style: solid;
 546   border-width: 1px;
 547   border-color: #ccc;}
 548
 549 /* sub-infosections have a gray heading */
 550 .sub_infosectionhead,
 551 .sub_infosectionhead_empty
 552 {
 553   width: 100%;
 554   border-bottom-style: solid;
 555   border-width: 1px;
 556   border-color: #ccc;}
 557 }
 558
 559 /* empty infosections don't have such a big bottom margin */
 560 .infosectionhead_empty,
 561 .sub_infosectionhead_empty
 562 {
 563   margin-bottom: 0.5em;
 564 }
 565
 566 .infosectiontitle,
 567 .sub_infosectiontitle,
 568 .infosectiontitle_empty,
 569 .sub_infosectiontitle_empty
 570 {
 571   font-weight: bold;
 572   vertical-align: middle;
 573   color: black;
 574   font-size: 12px;
 575 }
 576 td.infosectionsubtitle,
 577 td.sub_infosectionsubtitle,
 578 td.infosectionsubtitle_empty,
 579 td.sub_infosectionsubtitle_empty
 580  {
 581   width: 10%;
 582   white-space: nowrap;
 583   text-align: right;
 584 }
 585 td.infosectionsubtitle_empty,
 586 td.sub_infosectionsubtitle_empty
 587 {
 588   color: #444444;
 589   font-size: 90%;
 590 }
 591 div.infosectioncontent,
 592 div.sub_infosectioncontent
 593 {
 594   margin: 0.4em 2em 2em 2em;
 595 }
 596 td.infosection_emptymessage,
 597 td.sub_infosection_emptymessage
 598 {
 599   color: #444444;
 600   width: 200px;
 601   padding-left: 2em;
 602 }
 603
 604
 605 /*************     COLLAPSIBLE THINGS (used by CXGN::Page::Widgets::collapser)     ********************/
 606
 607 a.collapser {
 608   color: black;
 609 }
 610 a.collapser:hover {
 611   text-decoration: none;
 612 }
 613 a.collapser img {
 614   border: 0;
 615   padding: 0 5px 0 2px;
 616   position: relative;
 617   top: 1px;
 618 }
 619
 620 /*************     TABBED PAGES     ********************/
 621 /* You will probably not need these, because you can
 622    just call the tabset function that uses them        */
 623
 624 /*  styles for a set of tabs generated with SGN::tabset  */
 625 /*  like those on bulk download and direct search  */
 626 /*  classes to make a rounded box with some fill around an */
 627 /*  element  */
 628
 629 table.modesel {
 630   padding: 0;
 631
 632 }
 633 td.modesel_c,  td.modesel_c_hi {
 634   text-align: center;
 635   vertical-align: middle;
 636 /*   width: 8em; */
 637 }
 638 td.modesel_spacer {
 639   padding: 0;
 640   height: 6px;
 641   font-size: 1px;
 642   width: 15px;
 643   line-height: 0.1;
 644 }
 645 hr.modesel {
 646   border: 0;
 647   border-bottom: 2px solid #c0c0c0;
 648   margin-top: 15px;
 649 }
 650 a.modesel, a.modesel:visited, a.modesel_hi, a.modesel_hi:visited {
 651   display: block;
 652   color: #202020;
 653   margin: -3px -2px -1px -2px;
 654   padding: 2px;
 655 /*   position: absolute; */
 656   z-index: 30;
 657 }
 658
 659 button.modesel_hi {
 660   color: #ffffff;  background-color: #337ab7;  border-color: #2e6da4;
 661 }
 662
 663 button.modesel_hi:hover {
 664   color: #333333;  background-color: #e6e6e6;  border-color: #adadad;
 665 }
 666
 667 a.modesel:hover, a.modesel_hi:hover {
 668   text-decoration: none;
 669 }
 670
 671 /*a.modesel_hi {
 672   color: black;
 673 }*/
 674
 675 button.modesel {
 676   color: #ffffff; background-color: #5bc0de; border-color: #46b8da;
 677 }
 678
 679 button.modesel:hover {
 680   color: #ffffff;  background-color: #31b0d5;  border-color: #269abc;
 681 }
 682
 683 td.modesel_tl, td.modesel_tl_hi {
 684   padding: 0;
 685   height: 7px;
 686   width: 6px;
 687 }
 688 td.modesel_bl {
 689   padding: 0;
 690   height: 7px;
 691   width: 6px;
 692 }
 693 td.modesel_bl_hi {
 694   padding: 0;
 695   height: 7px;
 696   width: 6px;
 697 }
 698 td.modesel_tr, td.modesel_tr_hi {
 699   padding: 0;
 700   height: 7px;
 701   width: 6px;
 702   font-size: 1px;
 703   line-height: 0.1;
 704 }
 705 td.modesel_br {
 706   padding: 0;
 707   height: 7px;
 708   width: 6px;
 709 }
 710 td.modesel_br_hi {
 711   padding: 0;
 712   height: 7px;
 713   width: 6px;
 714 }
 715 td.modesel_l, td.modesel_l_hi {
 716   padding: 0;
 717   width: 6px;
 718   height: 10px;
 719   vertical-align: top;
 720 }
 721 td.modesel_t, td.modesel_t_hi {
 722   padding: 0;
 723   height: 7px;
 724   font-size: 1px;
 725   line-height: 0.1;
 726 }
 727 td.modesel_r, td.modesel_r_hi {
 728   padding: 0;
 729   width: 6px;
 730   height: 10px;
 731   vertical-align: top;
 732 }
 733 td.modesel_b {
 734   padding: 0;
 735
 736   height: 7px;
 737   font-size: 1px;
 738   line-height: 0.1;
 739 }
 740 td.modesel_b_hi {
 741   padding: 0;
 742
 743   height: 7px;
 744   font-size: 1px;
 745   line-height: 0.1;
 746 }
 747
 748 /* now for the background images */
 749 td.modesel_l_hi {       background: url(/documents/img/modesel_l_back_hi.gif) repeat-y top right; }
 750 td.modesel_r_hi {       background: url(/documents/img/modesel_r_back_hi.gif) repeat-y top left; }
 751 td.modesel_t_hi {       background: url(/documents/img/modesel_t_hi.gif) repeat-x bottom left; }
 752 td.modesel_b_hi {       background: url(/documents/img/modesel_b_hi.gif) repeat-x top left; }
 753 td.modesel_c_hi {
 754   background: #bbbbe5 url(/documents/img/modesel_content_back_hi.gif) repeat-x top left;
 755 /*   padding-top: 2px; */
 756 }
 757 td.modesel_l {       background: url(/documents/img/modesel_l_back.gif) repeat-y top left; }
 758 td.modesel_r {       background: url(/documents/img/modesel_r_back.gif) repeat-y top left; }
 759 td.modesel_t {       background: url(/documents/img/modesel_t.gif) repeat-x bottom left; }
 760 td.modesel_b {       background: url(/documents/img/modesel_b.gif) repeat-x top left; }
 761 td.modesel_c {
 762   background: #dbdbdb  url(/documents/img/modesel_content_back.gif) repeat-x top left;
 763 }
 764
 765 /*****************************     MULTILEVEL SELECT BOX     *****************************************/
 766
 767 a.multilevel_modesel, a.multilevel_modesel:visited, a.multilevel_modesel_active,  a.multilevel_modesel_active:visited,
 768 a.multilevel_modesel_parent, a.multilevel_modesel_parent:visited, a.multilevel_modesel_parent_active,  a.multilevel_modesel_parent_active:visited
 769  {
 770   border: 1px solid black;
 771   border-radius: 3px;
 772   -moz-border-radius: 3px;
 773   -webkit-border-radius: 3px;
 774   -khtml-border-radius: 3px;
 775   font-size: 14px;
 776   padding: 2px 0 2px 0;
 777   font-family: Arial, sans-serif;
 778   margin-bottom: 1px;
 779   text-decoration: none;
 780   color: black;
 781   display: block;
 782   width: 90%;
 783   background: #e6e6e6 url(/documents/img/gr_wht_trans.png) top left repeat-x;
 784 }
 785
 786 a.multilevel_modesel, a.multilevel_modesel:visited,
 787 a.multilevel_modesel_parent, a.multilevel_modesel_parent:visited {
 788   background: #e6e6e6 url(/documents/img/gr_wht_trans_2.png) top left repeat-x;
 789 }
 790
 791 a.multilevel_modesel_parent_active {
 792   position: relative;
 793   top: 4px;
 794   height: 24px;
 795 }
 796
 797 div.multilevel_modesel, div.multilevel_modesel_active {
 798   margin: -1px auto 0 auto;
 799 }
 800 div.multilevel_modesel td, div.multilevel_modesel_active td {
 801   text-align: center;
 802   vertical-align: top;
 803 }
 804 div.multilevel_modesel table, div.multilevel_modesel_active table {
 805   margin: 0 auto 0 auto;
 806 }
 807 div.multilevel_modesel {
 808   display: none;
 809 }
 810 div.multilevel_modesel_active {
 811   position: relative;
 812 }
 813
 814 div.multilevel_modesel_level_1 {
 815   border: 1px solid black;
 816   background-color: #c2c2ff;
 817   z-index: 1;
 818 }
 819 div.multilevel_modesel_level_2 {
 820   border: 1px solid black;
 821   background-color: #9797c7;
 822   z-index: 2;
 823 }
 824
 825 div.multilevel_modesel_level_0 a.multilevel_modesel_active,
 826 div.multilevel_modesel_level_0 a.multilevel_modesel_parent_active {
 827   background-color: #c2c2ff;
 828 }
 829 div.multilevel_modesel_level_1 a.multilevel_modesel_active,
 830 div.multilevel_modesel_level_1 a.multilevel_modesel_parent_active {
 831  background-color: #9797c7;
 832 }
 833
 834 div.multilevel_modesel_level_2 a.multilevel_modesel_active,
 835 div.multilevel_modesel_level_2 a.multilevel_modesel_parent_active {
 836   background-color: #76769b;
 837 }
 838
 839
 840 /*****************************     PAGINATED SEARCH RESULTS     *****************************************/
 841
 842 /* for pagination next page and previous page */
 843 /* buttons on search pages */
 844 a.paginate_nav, span.paginate_nav_currpage, span.paginate_nav_ghosted {
 845   padding: 0.16em;
 846   font-size: larger;
 847   font-weight: bold;
 848   line-height: 2.1;
 849 }
 850 span.paginate_nav_ghosted {
 851   color: #cccccc;
 852 }
 853 span.paginate_summary {
 854 }
 855 span.paginate_nav_currpage {
 856   font-weight: bolder;
 857   border: 1px solid black;
 858   color: #c00000;
 859 }
 860
 861 table.columnar_table {
 862   border: 1px solid #cccccc;
 863   clear: both;
 864 }
 865 table.columnar_table_noborder {
 866     clear: both;
 867 }
 868 td.columnar_table, th.columnar_table, th.columnar_table_noborder {
 869   padding: 0.2em 0.6em 0.2em 0.6em;
 870   margin: 0;
 871   line-height: 1.4;
 872 }
 873 th.columnar_table {
 874   border-bottom: 1px solid #aaa;
 875 }
 876
 877 caption.columnar_table {
 878   font-weight: bold;
 879   text-align: left;
 880   padding: 2px;
 881 }
 882
 883 /* styles for paginated search results pages like bacsearch.pl and markersearch.pl*/
 884 #searchresults {
 885   text-align: center;
 886 }
 887 a.stealth {
 888   text-decoration: none;
 889   color: black;
 890 }
 891 .hilite {
 892   background: yellow;
 893 }
 894
 895 /*****************************     HOME PAGE STUFF     *********************/
 896 /*Feel free to use elsewhere if you like.                                  */
 897 .boxheading
 898 {
 899         font-size:14px;
 900         line-height:16px;
 901         font-weight:bolder;
 902         border-style:solid;
 903         border-bottom-width:1px;
 904         border-top-width:0px;
 905         border-left-width:0px;
 906         border-right-width:0px;
 907         border-color:#999999;
 908 }
 909 .boxcontent
 910 {
 911         margin-top:10px;
 912         margin-left:10px;
 913 }
 914 .boxsubcontent
 915 {
 916         margin-top:7px;
 917         margin-left:7px;
 918         margin-bottom:12px;
 919 }
 920 .subheading
 921 {
 922         font-weight:bolder;
 923 }
 924 .boxbgcolor1
 925 {
 926         padding:10px;
 927         background-color:#ffffff;
 928 }
 929 .boxbgcolor2
 930 {
 931         padding:10px;
 932         padding-bottom:0px;
 933         background-color:#f0f0ff;
 934         border-style:solid;
 935         border-color:#999999;
 936         border-width:1px;
 937 }
 938 .boxbgcolor3
 939 {
 940         padding:10px;
 941         background-color:#ccccff;
 942         border-style:solid;
 943         border-color:#999999;
 944         border-width:1px;
 945         height:190px;
 946 }
 947 .boxbgcolor4
 948 {
 949         padding:10px;
 950         background-color:#cccccc;
 951         border-style:solid;
 952         border-color:#999999;
 953         border-width:1px;
 954 }
 955 .boxbgcolor5
 956 {
 957         padding:10px;
 958         background-color:#ffffff;
 959         border-style:solid;
 960         border-color:#999999;
 961         border-width:1px;
 962 }
 963 .boxbgcolor6
 964 {       padding:10px;
 965         background-color:#ffffaa;
 966         border-style:solid;
 967         border-color: #888888;
 968         border-width: 1px;
 969 }
 970
 971 /***********   TOOLBARS W/DROPDOWN MENUS ****************/
 972
 973 table#siteheader {
 974   margin: 0 auto 3px auto;
 975   width: 740px;
 976 }
 977
 978 table.toolbar {
 979   width: 100%;
 980   margin: 0;
 981   background: none;
 982   border: none;
 983   box-shadow:none;
 984 }
 985
 986 td.toolbar_l, td.toolbar_r {
 987   width: 10px;
 988 }
 989 td.toolbar_content {
 990   background: white url(/documents/img/toolbar_content_back.gif) repeat-x top left;
 991   padding: 3px 23px 3px 4px;
 992   color: black;
 993   font-size: 125%;
 994   text-align: left;
 995   font-family: "Bitstream Vera Sans",Arial,Helvetica,sans-serif;
 996 }
 997 td.toolbar_search {
 998   text-align: right;
 999   width: 1%;
1000   white-space: nowrap;
1001   padding: 0 0.35em 0 1em;
1002   vertical-align: top;
1003 }
1004 a.toolbar_menuname, a.toolbar_menuname:link, a.toolbar_menuname:visited {
1005   color: black;
1006   display: block;
1007 }
1008
1009 table.toolbar_popmenu {
1010   position: absolute;
1011   visibility: hidden;
1012   z-index: 99;
1013   border-top: 1px solid #a6a6a6;
1014   border-right: 1px solid #666666;
1015   border-bottom: 2px solid black;
1016   border-left: 1px solid #666666;
1017   text-align: left;
1018   margin-left: auto;
1019   margin-right: auto;
1020   background: #f2f2f2;
1021   line-height: 1.1;
1022 }
1023 a.toolbar_item_first, a.toolbar_item_first:link, a.toolbar_item_first:visited, a.toolbar_item_first:active,
1024 a.toolbar_item, a.toolbar_item:link, a.toolbar_item:visited, a.toolbar_item:active, span.toolbar_item {
1025   text-decoration: none;
1026   color: #222;
1027   border: 1px solid #f2f2f2;
1028   padding: 0.2em 0.5em 0.2em 0.5em;
1029   margin: 0;
1030   display: block;
1031   font-size: 12px;
1032   white-space: nowrap;
1033 }
1034
1035 td.toolbar_item_title {
1036   padding: 4px 2px 2px 2px;
1037   font-weight: bold;
1038   color: #373737;
1039 }
1040
1041 span.toolbar_item {
1042   font-weight: bold;
1043   padding-left: 0.1em;
1044 }
1045
1046 td.toolbar_item {
1047   border-top: 1px solid #cfcfcf;
1048 }
1049
1050 a.toolbar_item:hover,
1051 a.toolbar_item_first:hover {
1052   background: #ccccff;
1053   border: 1px solid #666666;
1054   color: black;
1055 }
1056
1057 form.quicksearch {
1058   margin: 0;
1059   padding: 0;
1060 }
1061 input.quicksearch.field {
1062   border: 1px solid #a0a0a0;
1063   background: white;
1064   padding: 0 0.1em 0 0.15em;
1065   height: 18px;
1066   font-family: "Charter","Bitstream Vera Serif",Times,serif;
1067   font-size: 13px;
1068   margin-top: 3px;
1069   vertical-align: top;
1070 }
1071 input.quicksearch.imgbutton {
1072   margin: 4px -11px 0 0;
1073   z-index: 2;
1074   position: relative;
1075 }
1076
1077
1078 /*****************************     ODDS AND ENDS     ****************************************************/
1079 /*If you can't find what you need above, you can make a custom style here.                              */
1080
1081 .developererrorbox
1082 {
1083     width:740px;
1084     padding:10px;
1085     background-color:#f0f0ff;
1086     border-style:solid;
1087     border-color:#ff0000;
1088     border-width:1px;
1089 }
1090
1091 table#developer_message_table {
1092   width: 740px;
1093   margin-bottom: 7px;
1094 }
1095 .invisible, .noshow {
1096   display: none;
1097 }
1098
1099 div.optional_show
1100 {
1101   margin: 0.2em 0 1.3em 0;
1102   border: 1px solid gray;
1103   border-radius: 6px;
1104   -moz-border-radius: 6px;
1105   -webkit-border-radius: 6px;
1106   background: #eee;
1107 }
1108 div.optional_show > h3 {
1109   font-weight: normal;
1110   padding: 6px 15px;
1111   margin: 0;
1112   padding: 3px;
1113   padding-bottom: 6px;
1114   font-size: 100%;
1115   cursor: pointer;
1116 }
1117 div.optional_show > div {
1118   background: white;
1119   margin: 0 10px 10px 10px;
1120 }
1121 div.optional_show > h3 > .title {
1122   margin-left: 20px;
1123 }
1124
1125 div.optional_show > h3 > .icon {
1126   background-image: url(/img/ui-icons.png);
1127   width: 16px;
1128   height: 16px;
1129   position: absolute;
1130   background-position: -32px -16px;
1131 }
1132 div.optional_show > h3.active > .icon {
1133   background-position: -64px -16px;
1134 }
1135
1136
1137 /*style for displaying a link instead of a button for 'optional_show' contents */
1138 a.abstract_optional_show {
1139   color: blue;
1140   cursor: pointer;
1141   white-space: nowrap;
1142 }
1143 div.abstract_optional_show {
1144   background: #f0f0ff;
1145   border: 1px solid #9F9FC7;
1146   margin: 0.2em 1em 0.2em 1em;
1147   padding: 0.2em 0.5em 0.2em 1em;
1148 }
1149
1150 /* style for displaying lists of links to file folders */
1151 /* currently used on bulk download ftp listing */
1152 a.folderlink:before {
1153         content:   url(/documents/img/folder_yellow_3.png);
1154         vertical-align: -8px;
1155 }
1156 a.folderlink {
1157         font-weight: bold;
1158         margin-bottom: 2em;
1159         /*   vertical-align: top; */
1160 }
1161 .folderdesc {
1162         margin-left: 50px;
1163         color: #999999;
1164         font-size: smaller;
1165         /*   font-style: italic; */
1166 }
1167
1168 li.folderlink {
1169         margin-bottom: 0.4em;
1170 }
1171
1172
1173 /* styles for displaying automatic (i.e. BLAST) annotation hits */
1174 td.blasthit_type {
1175   vertical-align: middle;
1176   text-align: right;
1177 }
1178 span.blasthit_type {
1179   font-size: smaller;
1180 }
1181 span.blasthit_db,
1182 a.blasthit_db     {
1183   font-weight: bold;
1184 }
1185 a.blasthit_db {
1186   color: black;
1187   text-decoration: underline;
1188 }
1189 a.blasthit_db:hover {
1190   background: #eeeeff;
1191 }
1192 td.blasthit_db {
1193   background: #ccccff;
1194   padding-bottom: 3px;
1195 }
1196 span.blasthit_statname {
1197   font-weight: bold;
1198   margin-left: 0.5em;
1199 }
1200 span.blasthit_statname:after {
1201   content: ':';
1202 }
1203 span.blasthit_statval {
1204
1205 }
1206 span.blasthit_id {
1207   font-family: monospace;
1208 }
1209 td.blasthit_id {
1210   padding: 6px;
1211   padding-left: 8px;
1212   background: #EDEDFF;
1213   vertical-align: middle;
1214 }
1215 td.blasthit_defline {
1216   padding: 3px;
1217   padding-left: 8px;
1218   background: #f8f8ff;
1219   font-family: monospace;
1220 }
1221 td.blasthit_stats {
1222   padding: 3px;
1223   vertical-align: middle;
1224   font-size: smaller;
1225 }
1226 table.blasthit {
1227   margin: 4px;
1228   border: 1px solid #cccccc;
1229
1230 }
1231
1232
1233 /* styles for little info tables generated with CXGN::FormattingHelpers::info_table_html */
1234 table.sub_info_table,
1235 table.info_table {
1236   border: 1px solid #DDDDDD;
1237   margin: 0.1em;
1238 }
1239
1240 table.sub_info_table_noborder,
1241 table.info_table_noborder {
1242   border: 0;
1243   padding: 0;
1244   margin: 0;
1245 }
1246 table.sub_info_table,
1247 table.sub_info_table_noborder {
1248 }
1249
1250 th.sub_info_table,
1251 th.info_table {
1252 /*   padding: 0 0.3em 0.4em 0.3em; */
1253   padding: 0.2em 0.2em 0.1em 0.3em;
1254   white-space: nowrap;
1255   border-bottom: 1px solid #DDDDDD;
1256   background: #F5F5F5;
1257 }
1258
1259 span.info_table_fieldname {
1260   font-weight: bold;
1261 }
1262 span.sub_info_table_fieldname {
1263   font-size: 90%;
1264   font-weight: bold;
1265   color: #333333;
1266 }
1267
1268 td.info_table_field {
1269   padding: 0.6em 0.5em 0.3em 1em;
1270 }
1271 td.sub_info_table_field {
1272   padding: 0 0.3em 0.3em 0;
1273 }
1274
1275 div.sub_info_table_fieldval,
1276 div.info_table_fieldval {
1277 /*   font-family: monospace; */
1278   margin: 0.3em 0 0 0.6em;
1279 }
1280 div.info_table_fieldval > ul {
1281     margin: 0;
1282     padding-left: 2.5em;
1283 }
1284
1285 caption.info_table,
1286 caption.sub_info_table {
1287   caption-side: bottom;
1288 }
1289 span.subinfo:after {
1290   content: ': ';
1291 }
1292
1293
1294 /* styles for numerical range input in FormattingHelpers */
1295 table.nri {
1296   display: inline;
1297 }
1298 span.nri_units {
1299   margin: 0;
1300   line-height: 1.0;
1301   vertical-align: middle;
1302 }
1303
1304 /* Styles for SOL forum */
1305 .topicbox {
1306         padding:1px;
1307         background-color:#f0f0ff;
1308         border-style:solid;
1309         border-color:#999999;
1310         border-width:1px;
1311
1312 }
1313
1314 .topicdescbox {
1315         padding:1px;
1316         background-color:#ffffee;
1317         border-style:solid;
1318         border-top:0px;
1319         border-color:#999999;
1320         border-width:1px;
1321 }
1322
1323 /* styles for gbrowse (CGI::Toggle) */
1324 .el_hidden  {display:none}
1325 .el_visible {display:inline}
1326 .ctl_hidden {
1327   cursor: pointer;
1328   display: none;
1329 }
1330 .ctl_visible {
1331   cursor: pointer;
1332   display: inline;
1333 }
1334 .tctl      {  text-decoration:underline; }
1335
1336
1337 /* Re-style the inline MochiKit Logging Pane!: */
1338 div#_MochiKit_LoggingPane {
1339         text-align:left; /* appears centered otherwise, weird */
1340 }
1341
1342
1343 div.publication_embedded {
1344   text-align: justify;
1345 }
1346 /* publication styles */
1347 div.publication_embedded .detail {
1348   padding: 0.5em 2em;
1349   border: 1px solid gray;
1350   background: #eee;
1351 }
1352
1353 div.publication_embedded .citation {
1354   font-weight: bold;
1355   font-style: italic;
1356   background: #ddd;
1357   padding: 0.3em 4px;
1358 }
1359
1360 .species_binomial {
1361   font-style: italic;
1362 }
1363
1364
1365 #affiliated_sites ul {
1366   margin: 0;
1367   padding-left: 1em;
1368 }
1369 #affiliated_sites li {
1370   padding-bottom: 1em;
1371 }
1372
1373 /* styles for standard renderings of CrossReference objects */
1374
1375 ul.xref_link {
1376   padding-left: 0;
1377 }
1378 ul.xref_link li {
1379   list-style: none outside none;
1380 }
1381
1382 div.xref_rich_gbrowse2 {
1383   clear: both;
1384   border-radius: 6px;
1385   -moz-border-radius: 6px;
1386   -webkit-border-radius: 6px;
1387   border: 1px outset #666;
1388   padding-bottom: 8px;
1389   margin: 10px;
1390 }
1391 div.xref_rich_gbrowse2 hr {
1392   width: 95%;
1393 }
1394
1395 div.xref_rich_gbrowse2 img {
1396   margin-top: 12px;
1397   border: 0;
1398 }
1399
1400
1401 /* styles for jquery.simpletooltip */
1402
1403 #simpleTooltip {
1404     padding: 7px;
1405     border: 1px solid #A6A7AB;
1406     background: #F2F3F5;
1407 }
1408
1409 #page_report_a_problem {
1410     margin: 20px 0 -10px 1px;
1411     text-align: left;
1412     font-size: 90%;
1413     clear: both;
1414 }
1415 #page_report_a_problem a {
1416     padding: 1px;
1417     color: #666;
1418 }
1419