fix conflicts.
[sgn.git] / static / css / sgn.css
blob466262521b2b85500f8171b78534092cc05d5245
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;
10 #outercontainer {
12 #pagecontent_t {
13 margin: auto;
14 width: 730px;
16 #xtratbl {
17 background-color:#CCCCFF;
18 border: 1px solid #C0C0C0;
20 #org_content{
21 border:1px solid #C0C0C0;
23 table {
24 font-family: verdana, arial, helvetica, sans-serif;
25 font-size: 12px;
26 text-align: left;
27 padding: 0;
28 border: 0;
29 border-collapse: separate;
31 input, select, textarea {
32 background: #EEEEFF;
33 font-size: 12px;
35 li {
36 margin-bottom: 0.25em;
38 td {
39 vertical-align: top;
42 /*various places on the site use various headline size tags, so let's try to make them all the same*/
43 h1,h2,h3,h4,h5,h6 {
44 font-family: verdana, arial, helvetica, sans-serif;
45 font-size: 14px;
46 line-height: 16px;
48 dt {
49 font-weight: bold;
50 margin-bottom: 0.1em;
52 dd {
53 margin-bottom: 0.5em;
54 margin-left: 2.5em;
56 dt.sub { /* used for a second sublevel of dictionary terms */
57 font-weight: normal;
58 font-style: italic;
61 /* where to put the title image */
62 td.sgnlogo {
63 vertical-align: top;
65 img {
66 border: 0;
69 img#sgnlogo {
70 margin: -7px 6px 0 0;
72 img#sgntext {
73 margin: 0 0 2px 12px;
75 td.toplink {
76 text-align: right;
77 vertical-align: middle;
78 padding: 0 18px 0 0;
79 white-space: nowrap;
81 a.toplink:link, a.toplink:visited, a.toplink:active {
82 color: black;
83 padding: 0;
84 text-decoration: none;
85 line-height: 1.1;
86 font-family: "Bitstream Vera Sans",Arial,Helvetica,sans-serif;
88 a.toplink:hover {
89 padding: 0px 0px 0px 0px;
90 text-decoration: underline;
92 a.mytools, a.mytools:link, a.mytools:visited {
93 font-weight: bold;
94 text-decoration: underline;
95 color: black;
96 padding: 0.1em 0.3em 0.1em 0.3em;
97 line-height: 1.38;
98 margin-left: 1em;
100 a.external, a[href ^="http:"] {
101 background: url(/documents/img/external.png) center right no-repeat;
102 padding-right: 13px;
105 a.footer {
106 background: none;
107 padding-right: 2px;
110 a[href ^="mailto:"] {
111 background: url(/documents/img/mail_icon.gif) center right no-repeat;
112 padding-right: 16px;
114 #pagefooter {
115 line-height: 1.5;
116 border-top: 3px solid #c0c0c0;
117 padding-top: 12px;
118 margin-top: 15px;
121 #pagefooter a, #pagefooter a:active, #pagefooter a:link, #pagefooter a:visited {
122 color: #666666;
125 #quicksearch_form {
126 margin: 10px 0px 0px 0px;
129 td.clonecart {
130 vertical-align: middle;
131 text-align: center;
133 #clone_shoppingcart {
134 text-align: center;
135 white-space: nowrap;
136 vertical-align: middle;
139 /* this is a centered page title, like 'BAC P00343' or 'Marker TM2' or whatever */
140 #pagetitle {
141 text-align: center;
142 margin: 0;
143 padding: 0;
145 #pagetitle > h3 {
146 text-align: center;
147 margin-top: 0;
148 padding: 0;
151 /* Developer Toolbar Style */
152 div.devbar {
153 width: 100%;
154 padding: 5px;
155 margin: -8px 0 13px -5px;
157 text-align: center;
158 background-color: #eef;
159 border-bottom: 2px solid #905;
161 /**Everything visible is in a table, use this to style fonts**/
162 table.devbar {
163 font-size:1.0em;
166 /* general div to make something a little more indented */
167 div.indentedcontent, div.indented_content, div.page_introduction {
168 margin: 0.3em 1em 2em 2em;
170 div.page_introduction {
171 padding: 0.3em;
174 /* same effect as above, except for table cells. Don't make new pages that use this. */
175 td.indentedcontent, td.indented_content {
176 padding: 1em 1em 2em 2em;
178 /*generic text-align tags*/
179 .center {
180 text-align:center;
182 .right {
183 text-align:right;
185 .left {
186 text-align:left;
189 /* the little tables at the top of search forms with */
190 /* the title of the search and a "select random" link */
191 table.search_form_title {
192 width: 100%;
194 span.search_form_title {
195 font-weight: bold;
196 margin-bottom: 1em;
197 display: block;
199 a.search_form_random {
200 font-size: 75%;
202 a.search_form_random:before {
203 content: '[';
205 a.search_form_random:after {
206 content: ']';
209 /***************************** LINKS ************************************************************/
210 /* */
212 a:link {
213 color:#0000ff;
214 text-decoration:none;
216 a:active {
217 color:#0000ff;
218 text-decoration:none;
220 a:visited {
221 color:#3333ff;
222 text-decoration:none;
224 a:hover {
225 text-decoration:underline;
227 a.hidevisited:link {
228 color:#0000ff;
229 text-decoration:none;
231 a.hidevisited:active {
232 color:#0000ff;
233 text-decoration:none;
235 a.hidevisited:visited {
236 color:#0000ff;
237 text-decoration:none;
239 a.hidevisited:hover {
240 color:#0000ff;
241 text-decoration:underline;
243 a.quicksearch_hit {
244 font-weight: bold;
245 /* background: #ccccff; */
246 /* border: 1px solid #9f9fc7; */
249 /*makes a submit button that looks more like a link*/
250 input.linkstyle {
251 color:#0000ff;
252 text-decoration:none;
253 background:#ffffff;
254 border:0;
255 font-size:12px;
257 /*makes a submit button that looks more like a link*/
258 input.linkstyle:hover {
259 color:#0000ff;
260 text-decoration:underline;
261 background:#ffffff;
262 border:0;
263 font-size:12px;
266 /* for little "what's this" links leading to help pages */
267 a.context_help {
268 font-size: 80%;
269 letter-spacing: -1px;
270 font-weight: normal;
272 a.context_help:before {
273 content: '(';
274 color: black;
276 a.context_help:after {
277 content: ')';
278 color: black;
281 /***************************** FONTS ************************************************************/
282 /*Don't add one if you can use one that's already here. It will keep our fonts more consistent. */
284 pre {
285 font-family: bitstream vera sans mono, monospace;
286 font-size: 12px;
287 line-height: 13px;
289 /* sequences should be displayed in a monospace font */
290 .sequence, .monospace {
291 font-family: bitstream vera sans mono, monospace;
293 .sequence .methionine {
294 color: #0033cc;
295 font-weight: bold;
297 .sequence .stop_codon {
298 color: red;
299 font-weight: bold;
301 .sequence .orf {
302 background: #ddd;
304 .sequence .longest_orf {
305 background: yellow;
307 .threeframe_translate .frame {
308 font-weight: bold;
312 /*some old style used by koni in est.pl and unigene.pl*/
313 .fix {
314 letter-spacing: 0px;
315 font-family: bitstream vera sans mono, monospace;
316 font-size: 12px;
317 line-height: 13px;
319 .fieldname {
320 font-weight: bold;
321 line-height: 1.2;
323 /* example text used in search pages */
324 .searchexample {
325 font-style: italic;
326 font-size: 10px;
328 .tinytype {
329 font-size: 10px;
331 .notes {
332 font-style:italic;
334 .mono {
335 font-family: monospace;
338 /***************************** TEXT AND BACKGROUND COLORS ***************************************/
339 /*Don't add one if you can use one that's already here. It will keep our color scheme more consistent. */
341 /*bgcolorstatuses 1-4 show statuses with color (used on BAC registry, for instance)
343 span.bgcolorstatus1,
344 span.bgcolorstatus2,
345 span.bgcolorstatus3,
346 span.bgcolorstatus4,
347 span.bgcoloralt,
348 span.bgcolorselected a {
349 padding-left: 0.2em;
350 padding-right: 0.2em;
351 line-height: 1.3;
352 border: 1px solid #444444;
357 .bgcolorstatus1 a, .bgcolorstatus1 span.nolink {
358 background-color: #dddddd;
359 margin: 0;
360 padding: 2px;
361 border: 1px solid black;
363 .bgcolorstatus2 a, .bgcolorstatus2 span.nolink {
364 background-color: #ffff66;
365 margin: 0;
366 padding: 2px;
367 border: 1px solid black;
369 .bgcolorstatus3 a, .bgcolorstatus3 span.nolink {
370 background-color: #66ff66;
371 margin: 0;
372 padding: 2px;
373 border: 1px solid black;
375 .bgcolorstatus4 a, .bgcolorstatus4 span.nolink {
376 background-color: #9999ff;
377 margin: 0;
378 padding: 2px;
379 border: 1px solid black;
382 /*for lists of things with alternating colored backgrounds*/
383 .bgcoloralt2 {
384 background-color: #f5f5ff;
386 .bgcoloralt1 {
387 background-color: #fcfcff;
389 /*to discreetly highlight an item*/
390 .bgcolorselected {
391 background-color: #ccccff;
393 /*use class="sgnblue" instead of bgcolor="sgnblue"*/
394 .sgnblue {
395 background-color: #ccccff;
397 /*important warning*/
398 .alert {
399 font-weight: bolder;
400 color: #ffffff;
401 background-color: #ff0000;
403 /*not quite so important warning*/
404 .warning {
405 color: #d22;
406 background-color: none;
408 .news {
409 color: #ff0000;
411 /* used to highlight things in yellow, like bad regions of sequences */
412 .highlighted, .badseq {
413 background: yellow;
415 /* used to indicate something is disabled or relatively unimportant. just like, um, ghosts */
416 .ghosted {
417 color: gray;
419 /* used for special notices that are unusual, and to which the user's attention should be drawn */
420 .specialnote {
421 font-size: 110%;
423 div.specialnote {
424 margin-top: 1em;
425 margin-bottom: 1em;
427 /* for things you want to put in a subtly set-off box */
428 div.minorbox {
429 border: 1px solid #cccccc;
431 div.deprecated {
432 padding:3px;
433 margin-left:5px;
434 margin-bottom:10px;
435 border:1px dashed #772222;
436 background-color:#e5e5e5;
437 color:#600;
438 text-align:center;
439 font-size:1.2em;
442 span.help {
443 cursor: help;
444 border-bottom: 1px dashed #666;
447 span.toolbar_help {
448 /*nothing different*/
451 /***************************** INFO SECTIONS *******************************************************/
453 You will probably not need these, because you can
454 just call the info_section_html() function that uses them
458 these make a blue box like we like to use to divide
459 info pages into sections.
461 .infosectionhead,
462 .infosectionhead_empty,
463 .sub_infosectionhead,
464 .sub_infosectionhead_empty
466 width: 99%;
467 background: #ccccff; /* this is "SGN blue" */
468 text-align:left;
469 margin-bottom: 6px;
470 margin-left: 5px;
471 padding: 1px 0px 3px 2px;
472 /* margin-right: 1em; */
473 border: 1px solid #9f9fc7;
475 /* sub-infosections have a gray heading */
476 .sub_infosectionhead,
477 .sub_infosectionhead_empty
479 background: #efefef;
480 border-color: #c2c2c2;
481 border-width: 1px;
484 /* empty infosections don't have such a big bottom margin */
485 .infosectionhead_empty,
486 .sub_infosectionhead_empty
488 margin-bottom: 0.5em;
491 .infosectiontitle,
492 .sub_infosectiontitle,
493 .infosectiontitle_empty,
494 .sub_infosectiontitle_empty
496 font-weight: bold;
497 vertical-align: middle;
498 color: black;
499 font-size: 12px;
501 td.infosectionsubtitle,
502 td.sub_infosectionsubtitle,
503 td.infosectionsubtitle_empty,
504 td.sub_infosectionsubtitle_empty
506 width: 10%;
507 white-space: nowrap;
508 text-align: right;
510 td.infosectionsubtitle_empty,
511 td.sub_infosectionsubtitle_empty
513 color: #444444;
514 font-size: 90%;
516 div.infosectioncontent,
517 div.sub_infosectioncontent
519 margin: 0.4em 1em 2em 2em;
521 td.infosection_emptymessage,
522 td.sub_infosection_emptymessage
524 color: #444444;
525 width: 200px;
526 padding-left: 2em;
530 /************* COLLAPSIBLE THINGS (used by CXGN::Page::Widgets::collapser) ********************/
532 a.collapser {
533 color: black;
535 a.collapser:hover {
536 text-decoration: none;
538 a.collapser img {
539 border: 0;
540 padding: 0 5px 0 2px;
541 position: relative;
542 top: 1px;
545 /************* TABBED PAGES ********************/
546 /* You will probably not need these, because you can
547 just call the tabset function that uses them */
549 /* styles for a set of tabs generated with SGN::tabset */
550 /* like those on bulk download and direct search */
551 /* classes to make a rounded box with some fill around an */
552 /* element */
554 table.modesel {
555 padding: 0;
558 td.modesel_c, td.modesel_c_hi {
559 text-align: center;
560 vertical-align: middle;
561 /* width: 8em; */
563 td.modesel_spacer {
564 padding: 0;
565 height: 6px;
566 font-size: 1px;
567 width: 15px;
568 line-height: 0.1;
570 hr.modesel {
571 border: 0;
572 border-bottom: 2px solid #c0c0c0;
573 margin-top: 15px;
575 a.modesel, a.modesel:visited, a.modesel_hi, a.modesel_hi:visited {
576 display: block;
577 color: #202020;
578 margin: -3px -2px -1px -2px;
579 padding: 2px;
580 /* position: absolute; */
581 z-index: 30;
583 a.modesel:hover, a.modesel_hi:hover {
584 text-decoration: none;
586 a.modesel_hi {
587 color: black;
590 td.modesel_tl, td.modesel_tl_hi {
591 padding: 0;
592 height: 7px;
593 width: 6px;
595 td.modesel_bl {
596 padding: 0;
597 height: 7px;
598 width: 6px;
600 td.modesel_bl_hi {
601 padding: 0;
602 height: 7px;
603 width: 6px;
605 td.modesel_tr, td.modesel_tr_hi {
606 padding: 0;
607 height: 7px;
608 width: 6px;
609 font-size: 1px;
610 line-height: 0.1;
612 td.modesel_br {
613 padding: 0;
614 height: 7px;
615 width: 6px;
617 td.modesel_br_hi {
618 padding: 0;
619 height: 7px;
620 width: 6px;
622 td.modesel_l, td.modesel_l_hi {
623 padding: 0;
624 width: 6px;
625 height: 10px;
626 vertical-align: top;
628 td.modesel_t, td.modesel_t_hi {
629 padding: 0;
630 height: 7px;
631 font-size: 1px;
632 line-height: 0.1;
634 td.modesel_r, td.modesel_r_hi {
635 padding: 0;
636 width: 6px;
637 height: 10px;
638 vertical-align: top;
640 td.modesel_b {
641 padding: 0;
643 height: 7px;
644 font-size: 1px;
645 line-height: 0.1;
647 td.modesel_b_hi {
648 padding: 0;
650 height: 7px;
651 font-size: 1px;
652 line-height: 0.1;
655 /* now for the background images */
656 td.modesel_l_hi { background: url(/documents/img/modesel_l_back_hi.gif) repeat-y top right; }
657 td.modesel_r_hi { background: url(/documents/img/modesel_r_back_hi.gif) repeat-y top left; }
658 td.modesel_t_hi { background: url(/documents/img/modesel_t_hi.gif) repeat-x bottom left; }
659 td.modesel_b_hi { background: url(/documents/img/modesel_b_hi.gif) repeat-x top left; }
660 td.modesel_c_hi {
661 background: #bbbbe5 url(/documents/img/modesel_content_back_hi.gif) repeat-x top left;
662 /* padding-top: 2px; */
664 td.modesel_l { background: url(/documents/img/modesel_l_back.gif) repeat-y top left; }
665 td.modesel_r { background: url(/documents/img/modesel_r_back.gif) repeat-y top left; }
666 td.modesel_t { background: url(/documents/img/modesel_t.gif) repeat-x bottom left; }
667 td.modesel_b { background: url(/documents/img/modesel_b.gif) repeat-x top left; }
668 td.modesel_c {
669 background: #dbdbdb url(/documents/img/modesel_content_back.gif) repeat-x top left;
672 /***************************** MULTILEVEL SELECT BOX *****************************************/
674 a.multilevel_modesel, a.multilevel_modesel:visited, a.multilevel_modesel_active, a.multilevel_modesel_active:visited,
675 a.multilevel_modesel_parent, a.multilevel_modesel_parent:visited, a.multilevel_modesel_parent_active, a.multilevel_modesel_parent_active:visited
677 border: 1px solid black;
678 border-radius: 3px;
679 -moz-border-radius: 3px;
680 -webkit-border-radius: 3px;
681 -khtml-border-radius: 3px;
682 font-size: 14px;
683 padding: 2px 0 2px 0;
684 font-family: Arial, sans-serif;
685 margin-bottom: 1px;
686 text-decoration: none;
687 color: black;
688 display: block;
689 width: 90%;
690 background: #e6e6e6 url(/documents/img/gr_wht_trans.png) top left repeat-x;
693 a.multilevel_modesel, a.multilevel_modesel:visited,
694 a.multilevel_modesel_parent, a.multilevel_modesel_parent:visited {
695 background: #e6e6e6 url(/documents/img/gr_wht_trans_2.png) top left repeat-x;
698 a.multilevel_modesel_parent_active {
699 position: relative;
700 top: 4px;
701 height: 24px;
704 div.multilevel_modesel, div.multilevel_modesel_active {
705 margin: -1px auto 0 auto;
707 div.multilevel_modesel td, div.multilevel_modesel_active td {
708 text-align: center;
709 vertical-align: top;
711 div.multilevel_modesel table, div.multilevel_modesel_active table {
712 margin: 0 auto 0 auto;
714 div.multilevel_modesel {
715 display: none;
717 div.multilevel_modesel_active {
718 position: relative;
721 div.multilevel_modesel_level_1 {
722 border: 1px solid black;
723 background-color: #c2c2ff;
724 z-index: 1;
726 div.multilevel_modesel_level_2 {
727 border: 1px solid black;
728 background-color: #9797c7;
729 z-index: 2;
732 div.multilevel_modesel_level_0 a.multilevel_modesel_active,
733 div.multilevel_modesel_level_0 a.multilevel_modesel_parent_active {
734 background-color: #c2c2ff;
736 div.multilevel_modesel_level_1 a.multilevel_modesel_active,
737 div.multilevel_modesel_level_1 a.multilevel_modesel_parent_active {
738 background-color: #9797c7;
741 div.multilevel_modesel_level_2 a.multilevel_modesel_active,
742 div.multilevel_modesel_level_2 a.multilevel_modesel_parent_active {
743 background-color: #76769b;
747 /***************************** PAGINATED SEARCH RESULTS *****************************************/
749 /* for pagination next page and previous page */
750 /* buttons on search pages */
751 a.paginate_nav, span.paginate_nav_currpage, span.paginate_nav_ghosted {
752 padding: 0.16em;
753 font-size: larger;
754 font-weight: bold;
755 line-height: 2.1;
757 span.paginate_nav_ghosted {
758 color: #cccccc;
760 span.paginate_summary {
762 span.paginate_nav_currpage {
763 font-weight: bolder;
764 border: 1px solid black;
765 color: #c00000;
768 table.columnar_table {
769 border: 1px solid #cccccc;
770 clear: both;
772 table.columnar_table_noborder {
773 clear: both;
775 td.columnar_table, th.columnar_table, th.columnar_table_noborder {
776 padding: 0.2em 0.6em 0.2em 0.6em;
777 margin: 0;
778 line-height: 1.4;
780 th.columnar_table {
781 border-bottom: 1px solid #aaa;
784 caption.columnar_table {
785 font-weight: bold;
786 text-align: left;
787 padding: 2px;
790 /* styles for paginated search results pages like bacsearch.pl and markersearch.pl*/
791 #searchresults {
792 text-align: center;
794 a.stealth {
795 text-decoration: none;
796 color: black;
798 .hilite {
799 background: yellow;
802 /***************************** HOME PAGE STUFF *********************/
803 /*Feel free to use elsewhere if you like. */
804 .boxheading
806 font-size:14px;
807 line-height:16px;
808 font-weight:bolder;
809 border-style:solid;
810 border-bottom-width:1px;
811 border-top-width:0px;
812 border-left-width:0px;
813 border-right-width:0px;
814 border-color:#999999;
816 .boxcontent
818 margin-top:10px;
819 margin-left:10px;
821 .boxsubcontent
823 margin-top:7px;
824 margin-left:7px;
825 margin-bottom:12px;
827 .subheading
829 font-weight:bolder;
831 .boxbgcolor1
833 padding:10px;
834 background-color:#ffffff;
836 .boxbgcolor2
838 padding:10px;
839 padding-bottom:0px;
840 background-color:#f0f0ff;
841 border-style:solid;
842 border-color:#999999;
843 border-width:1px;
845 .boxbgcolor3
847 padding:10px;
848 background-color:#ccccff;
849 border-style:solid;
850 border-color:#999999;
851 border-width:1px;
852 height:190px;
854 .boxbgcolor4
856 padding:10px;
857 background-color:#cccccc;
858 border-style:solid;
859 border-color:#999999;
860 border-width:1px;
862 .boxbgcolor5
864 padding:10px;
865 background-color:#ffffff;
866 border-style:solid;
867 border-color:#999999;
868 border-width:1px;
870 .boxbgcolor6
871 { padding:10px;
872 background-color:#ffffaa;
873 border-style:solid;
874 border-color: #888888;
875 border-width: 1px;
878 /*********** TOOLBARS W/DROPDOWN MENUS ****************/
880 table#siteheader {
881 margin: 0 auto 3px auto;
882 width: 740px;
885 table.toolbar {
886 width: 100%;
887 margin: 0;
888 background: none;
889 border: none;
890 box-shadow:none;
893 td.toolbar_l, td.toolbar_r {
894 width: 10px;
896 td.toolbar_content {
897 background: white url(/documents/img/toolbar_content_back.gif) repeat-x top left;
898 padding: 3px 23px 3px 4px;
899 color: black;
900 font-size: 125%;
901 text-align: left;
902 font-family: "Bitstream Vera Sans",Arial,Helvetica,sans-serif;
904 td.toolbar_search {
905 text-align: right;
906 width: 1%;
907 white-space: nowrap;
908 padding: 0 0.35em 0 1em;
909 vertical-align: top;
911 a.toolbar_menuname, a.toolbar_menuname:link, a.toolbar_menuname:visited {
912 color: black;
913 display: block;
916 table.toolbar_popmenu {
917 position: absolute;
918 visibility: hidden;
919 z-index: 99;
920 border-top: 1px solid #a6a6a6;
921 border-right: 1px solid #666666;
922 border-bottom: 2px solid black;
923 border-left: 1px solid #666666;
924 text-align: left;
925 margin-left: auto;
926 margin-right: auto;
927 background: #f2f2f2;
928 line-height: 1.1;
930 a.toolbar_item_first, a.toolbar_item_first:link, a.toolbar_item_first:visited, a.toolbar_item_first:active,
931 a.toolbar_item, a.toolbar_item:link, a.toolbar_item:visited, a.toolbar_item:active, span.toolbar_item {
932 text-decoration: none;
933 color: #222;
934 border: 1px solid #f2f2f2;
935 padding: 0.2em 0.5em 0.2em 0.5em;
936 margin: 0;
937 display: block;
938 font-size: 12px;
939 white-space: nowrap;
942 td.toolbar_item_title {
943 padding: 4px 2px 2px 2px;
944 font-weight: bold;
945 color: #373737;
948 span.toolbar_item {
949 font-weight: bold;
950 padding-left: 0.1em;
953 td.toolbar_item {
954 border-top: 1px solid #cfcfcf;
957 a.toolbar_item:hover,
958 a.toolbar_item_first:hover {
959 background: #ccccff;
960 border: 1px solid #666666;
961 color: black;
964 form.quicksearch {
965 margin: 0;
966 padding: 0;
968 input.quicksearch.field {
969 border: 1px solid #a0a0a0;
970 background: white;
971 padding: 0 0.1em 0 0.15em;
972 height: 18px;
973 font-family: "Charter","Bitstream Vera Serif",Times,serif;
974 font-size: 13px;
975 margin-top: 3px;
976 vertical-align: top;
978 input.quicksearch.imgbutton {
979 margin: 4px -11px 0 0;
980 z-index: 2;
981 position: relative;
985 /***************************** ODDS AND ENDS ****************************************************/
986 /*If you can't find what you need above, you can make a custom style here. */
988 .developererrorbox
990 width:740px;
991 padding:10px;
992 background-color:#f0f0ff;
993 border-style:solid;
994 border-color:#ff0000;
995 border-width:1px;
998 table#developer_message_table {
999 width: 740px;
1000 margin-bottom: 7px;
1002 .invisible, .noshow {
1003 display: none;
1006 div.optional_show
1008 margin: 0.2em 0 1.3em 0;
1009 border: 1px solid gray;
1010 border-radius: 6px;
1011 -moz-border-radius: 6px;
1012 -webkit-border-radius: 6px;
1013 background: #eee;
1015 div.optional_show > h3 {
1016 font-weight: normal;
1017 padding: 6px 15px;
1018 margin: 0;
1019 padding: 3px;
1020 padding-bottom: 6px;
1021 font-size: 100%;
1022 cursor: pointer;
1024 div.optional_show > div {
1025 background: white;
1026 margin: 0 10px 10px 10px;
1028 div.optional_show > h3 > .title {
1029 margin-left: 20px;
1032 div.optional_show > h3 > .icon {
1033 background-image: url(/img/ui-icons.png);
1034 width: 16px;
1035 height: 16px;
1036 position: absolute;
1037 background-position: -32px -16px;
1039 div.optional_show > h3.active > .icon {
1040 background-position: -64px -16px;
1044 /*style for displaying a link instead of a button for 'optional_show' contents */
1045 a.abstract_optional_show {
1046 color: blue;
1047 cursor: pointer;
1048 white-space: nowrap;
1050 div.abstract_optional_show {
1051 background: #f0f0ff;
1052 border: 1px solid #9F9FC7;
1053 margin: 0.2em 1em 0.2em 1em;
1054 padding: 0.2em 0.5em 0.2em 1em;
1057 /* style for displaying lists of links to file folders */
1058 /* currently used on bulk download ftp listing */
1059 a.folderlink:before {
1060 content: url(/documents/img/folder_yellow_3.png);
1061 vertical-align: -8px;
1063 a.folderlink {
1064 font-weight: bold;
1065 margin-bottom: 2em;
1066 /* vertical-align: top; */
1068 .folderdesc {
1069 margin-left: 50px;
1070 color: #999999;
1071 font-size: smaller;
1072 /* font-style: italic; */
1075 li.folderlink {
1076 margin-bottom: 0.4em;
1080 /* styles for displaying automatic (i.e. BLAST) annotation hits */
1081 td.blasthit_type {
1082 vertical-align: middle;
1083 text-align: right;
1085 span.blasthit_type {
1086 font-size: smaller;
1088 span.blasthit_db,
1089 a.blasthit_db {
1090 font-weight: bold;
1092 a.blasthit_db {
1093 color: black;
1094 text-decoration: underline;
1096 a.blasthit_db:hover {
1097 background: #eeeeff;
1099 td.blasthit_db {
1100 background: #ccccff;
1101 padding-bottom: 3px;
1103 span.blasthit_statname {
1104 font-weight: bold;
1105 margin-left: 0.5em;
1107 span.blasthit_statname:after {
1108 content: ':';
1110 span.blasthit_statval {
1113 span.blasthit_id {
1114 font-family: monospace;
1116 td.blasthit_id {
1117 padding: 6px;
1118 padding-left: 8px;
1119 background: #EDEDFF;
1120 vertical-align: middle;
1122 td.blasthit_defline {
1123 padding: 3px;
1124 padding-left: 8px;
1125 background: #f8f8ff;
1126 font-family: monospace;
1128 td.blasthit_stats {
1129 padding: 3px;
1130 vertical-align: middle;
1131 font-size: smaller;
1133 table.blasthit {
1134 margin: 4px;
1135 border: 1px solid #cccccc;
1140 /* styles for little info tables generated with CXGN::FormattingHelpers::info_table_html */
1141 table.sub_info_table,
1142 table.info_table {
1143 border: 1px solid #DDDDDD;
1144 margin: 0.1em;
1147 table.sub_info_table_noborder,
1148 table.info_table_noborder {
1149 border: 0;
1150 padding: 0;
1151 margin: 0;
1153 table.sub_info_table,
1154 table.sub_info_table_noborder {
1157 th.sub_info_table,
1158 th.info_table {
1159 /* padding: 0 0.3em 0.4em 0.3em; */
1160 padding: 0.2em 0.2em 0.1em 0.3em;
1161 white-space: nowrap;
1162 border-bottom: 1px solid #DDDDDD;
1163 background: #F5F5F5;
1166 span.info_table_fieldname {
1167 font-weight: bold;
1169 span.sub_info_table_fieldname {
1170 font-size: 90%;
1171 font-weight: bold;
1172 color: #333333;
1175 td.info_table_field {
1176 padding: 0.6em 0.5em 0.3em 1em;
1178 td.sub_info_table_field {
1179 padding: 0 0.3em 0.3em 0;
1182 div.sub_info_table_fieldval,
1183 div.info_table_fieldval {
1184 /* font-family: monospace; */
1185 margin: 0.3em 0 0 0.6em;
1187 div.info_table_fieldval > ul {
1188 margin: 0;
1189 padding-left: 2.5em;
1192 caption.info_table,
1193 caption.sub_info_table {
1194 caption-side: bottom;
1196 span.subinfo:after {
1197 content: ': ';
1201 /* styles for numerical range input in FormattingHelpers */
1202 table.nri {
1203 display: inline;
1205 span.nri_units {
1206 margin: 0;
1207 line-height: 1.0;
1208 vertical-align: middle;
1211 /* Styles for SOL forum */
1212 .topicbox {
1213 padding:1px;
1214 background-color:#f0f0ff;
1215 border-style:solid;
1216 border-color:#999999;
1217 border-width:1px;
1221 .topicdescbox {
1222 padding:1px;
1223 background-color:#ffffee;
1224 border-style:solid;
1225 border-top:0px;
1226 border-color:#999999;
1227 border-width:1px;
1230 /* styles for gbrowse (CGI::Toggle) */
1231 .el_hidden {display:none}
1232 .el_visible {display:inline}
1233 .ctl_hidden {
1234 cursor: pointer;
1235 display: none;
1237 .ctl_visible {
1238 cursor: pointer;
1239 display: inline;
1241 .tctl { text-decoration:underline; }
1244 /* Re-style the inline MochiKit Logging Pane!: */
1245 div#_MochiKit_LoggingPane {
1246 text-align:left; /* appears centered otherwise, weird */
1250 div.publication_embedded {
1251 text-align: justify;
1253 /* publication styles */
1254 div.publication_embedded .detail {
1255 padding: 0.5em 2em;
1256 border: 1px solid gray;
1257 background: #eee;
1260 div.publication_embedded .citation {
1261 font-weight: bold;
1262 font-style: italic;
1263 background: #ddd;
1264 padding: 0.3em 4px;
1267 .species_binomial {
1268 font-style: italic;
1272 #affiliated_sites ul {
1273 margin: 0;
1274 padding-left: 1em;
1276 #affiliated_sites li {
1277 padding-bottom: 1em;
1280 /* styles for standard renderings of CrossReference objects */
1282 ul.xref_link {
1283 padding-left: 0;
1285 ul.xref_link li {
1286 list-style: none outside none;
1289 div.xref_rich_gbrowse2 {
1290 clear: both;
1291 border-radius: 6px;
1292 -moz-border-radius: 6px;
1293 -webkit-border-radius: 6px;
1294 border: 1px outset #666;
1295 padding-bottom: 8px;
1296 margin: 10px;
1298 div.xref_rich_gbrowse2 hr {
1299 width: 95%;
1302 div.xref_rich_gbrowse2 img {
1303 margin-top: 12px;
1304 border: 0;
1308 /* styles for jquery.simpletooltip */
1310 #simpleTooltip {
1311 padding: 7px;
1312 border: 1px solid #A6A7AB;
1313 background: #F2F3F5;
1316 #page_report_a_problem {
1317 margin: 20px 0 -10px 1px;
1318 text-align: left;
1319 font-size: 90%;
1320 clear: both;
1322 #page_report_a_problem a {
1323 padding: 1px;
1324 color: #666;