info
[sgn.git] / static / css / nextgen-cassava-base.css
blobfcc95c5b5978ceb9328ebfc63f8b553041736a2b
1 /* NOTE: SGN blue is #ccccff */
2 /******************** GENERAL SITE STYLES **********************/
3 /*various places on the site use various headline size tags, so let's try to make them all the same*/
4 @charset "UTF-8";
6 body {
7 background-color: white;
8 font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
9 font-size: 14px;
10 line-height: 18px;
11 margin: 0;
13 dt {
14 font-weight: bold;
15 margin-bottom: 0.1em;
17 dd {
18 margin-bottom: 0.5em;
19 margin-left: 2.5em;
21 dt.sub { /* used for a second sublevel of dictionary terms */
22 font-weight: normal;
23 font-style: italic;
26 /* where to put the title image */
27 td.sgnlogo {
28 vertical-align: top;
30 img {
31 border: 0;
34 img#sgnlogo {
35 margin: -7px 6px 0 0;
37 img#sgntext {
38 margin: 0 0 2px 12px;
40 td.toplink {
41 text-align: right;
42 vertical-align: middle;
43 padding: 0 18px 0 0;
44 white-space: nowrap;
46 a.toplink:link, a.toplink:visited, a.toplink:active {
47 color: black;
48 padding: 0;
49 text-decoration: none;
50 line-height: 1.1;
52 a.toplink:hover {
53 padding: 0px 0px 0px 0px;
54 text-decoration: underline;
57 a.mytools, a.mytools:link, a.mytools:visited {
58 font-weight: bold;
59 text-decoration: underline;
60 color: black;
61 padding: 0.1em 0.3em 0.1em 0.3em;
62 line-height: 1.38;
63 margin-left: 1em;
65 a.external, a[href ^="http:"] {
66 background: url(/documents/img/external.png) center right no-repeat;
67 padding-right: 13px;
70 a.footer {
71 background: none;
72 padding-right: 2px;
75 a[href ^="mailto:"] {
76 background: url(/documents/img/mail_icon.gif) center right no-repeat;
77 padding-right: 16px;
79 #pagefooter {
80 line-height: 1.5;
81 border-top: 3px solid #c0c0c0;
82 padding-top: 12px;
83 margin-top: 15px;
86 #pagefooter a, #pagefooter a:active, #pagefooter a:link, #pagefooter a:visited {
87 color: #666666;
90 #quicksearch_form {
91 margin: 10px 0px 0px 0px;
94 td.clonecart {
95 vertical-align: middle;
96 text-align: center;
98 #clone_shoppingcart {
99 text-align: center;
100 white-space: nowrap;
101 vertical-align: middle;
104 /* this is a centered page title, like 'BAC P00343' or 'Marker TM2' or whatever */
105 #pagetitle {
106 text-align: center;
107 margin: 0;
108 padding: 0;
110 #pagetitle > h3 {
111 text-align: center;
112 margin-top: 0;
113 padding: 0;
116 /* Developer Toolbar Style */
117 div.devbar {
118 width: 100%;
119 padding: 5px;
120 margin: -8px 0 13px -5px;
122 text-align: center;
123 background-color: #eef;
124 border-bottom: 2px solid #905;
126 /**Everything visible is in a table, use this to style fonts**/
127 table.devbar {
128 font-size:1.0em;
131 /* general div to make something a little more indented */
132 div.indentedcontent, div.indented_content, div.page_introduction {
133 margin: 0.3em 1em 2em 2em;
135 div.page_introduction {
136 padding: 0.3em;
139 /* same effect as above, except for table cells. Don't make new pages that use this. */
140 td.indentedcontent, td.indented_content {
141 padding: 1em 1em 2em 2em;
143 /*generic text-align tags*/
144 .center {
145 text-align:center;
147 .right {
148 text-align:right;
150 .left {
151 text-align:left;
154 /* the little tables at the top of search forms with */
155 /* the title of the search and a "select random" link */
156 table.search_form_title {
157 width: 100%;
159 span.search_form_title {
160 font-weight: bold;
161 margin-bottom: 1em;
162 display: block;
164 a.search_form_random {
165 font-size: 75%;
167 a.search_form_random:before {
168 content: '[';
170 a.search_form_random:after {
171 content: ']';
174 /***************************** LINKS ************************************************************/
175 /* */
177 a:link {
178 color:#954A09;
179 text-decoration:none;
181 a:active {
182 color:#954A09;
183 text-decoration:none;
185 a:visited {
186 color:#CE8E00;
187 text-decoration:none;
189 a:hover {
190 color:#CE8E00;
191 text-decoration:underline;
193 a.hidevisited:link {
194 color:#954A09;
195 text-decoration:none;
197 a.hidevisited:active {
198 color:#954A09;
199 text-decoration:none;
201 a.hidevisited:visited {
202 color:#954A09;
203 text-decoration:none;
205 a.hidevisited:hover {
206 color:#954A09;
207 text-decoration:underline;
209 a.quicksearch_hit {
210 font-weight: bold;
211 /* background: #ccccff; */
212 /* border: 1px solid #9f9fc7; */
215 /*makes a submit button that looks more like a link*/
216 input.linkstyle {
217 color:#954A09;
218 text-decoration:none;
219 background:#ffffff;
220 border:0;
221 font-size:12px;
223 /*makes a submit button that looks more like a link*/
224 input.linkstyle:hover {
225 color:#954A09;
226 text-decoration:underline;
227 background:#ffffff;
228 border:0;
229 font-size:12px;
232 /* for little "what's this" links leading to help pages */
233 a.context_help {
234 font-size: 80%;
235 letter-spacing: -1px;
236 font-weight: normal;
238 a.context_help:before {
239 content: '(';
240 color: black;
242 a.context_help:after {
243 content: ')';
244 color: black;
247 /***************************** FONTS ************************************************************/
248 /*Don't add one if you can use one that's already here. It will keep our fonts more consistent. */
250 pre {
251 font-family: bitstream vera sans mono, monospace;
252 font-size: 12px;
253 line-height: 13px;
255 /* sequences should be displayed in a monospace font */
256 .sequence, .monospace {
257 font-family: bitstream vera sans mono, monospace;
259 .sequence .methionine {
260 color: #0033cc;
261 font-weight: bold;
263 .sequence .stop_codon {
264 color: red;
265 font-weight: bold;
267 .sequence .orf {
268 background: #ddd;
270 .sequence .longest_orf {
271 background: yellow;
273 .threeframe_translate .frame {
274 font-weight: bold;
278 /*some old style used by koni in est.pl and unigene.pl*/
279 .fix {
280 letter-spacing: 0px;
281 font-family: bitstream vera sans mono, monospace;
282 font-size: 12px;
283 line-height: 13px;
285 .fieldname {
286 font-weight: bold;
287 line-height: 1.2;
289 /* example text used in search pages */
290 .searchexample {
291 font-style: italic;
292 font-size: 10px;
294 .tinytype {
295 font-size: 10px;
297 .notes {
298 font-style:italic;
300 .mono {
301 font-family: monospace;
304 /***************************** TEXT AND BACKGROUND COLORS ***************************************/
305 /*Don't add one if you can use one that's already here. It will keep our color scheme more consistent. */
307 /*bgcolorstatuses 1-4 show statuses with color (used on BAC registry, for instance)
309 span.bgcolorstatus1,
310 span.bgcolorstatus2,
311 span.bgcolorstatus3,
312 span.bgcolorstatus4,
313 span.bgcoloralt,
314 span.bgcolorselected a {
315 padding-left: 0.2em;
316 padding-right: 0.2em;
317 line-height: 1.3;
318 border: 1px solid #444444;
323 .bgcolorstatus1 a, .bgcolorstatus1 span.nolink {
324 background-color: #dddddd;
325 margin: 0;
326 padding: 2px;
327 border: 1px solid black;
329 .bgcolorstatus2 a, .bgcolorstatus2 span.nolink {
330 background-color: #ffff66;
331 margin: 0;
332 padding: 2px;
333 border: 1px solid black;
335 .bgcolorstatus3 a, .bgcolorstatus3 span.nolink {
336 background-color: #66ff66;
337 margin: 0;
338 padding: 2px;
339 border: 1px solid black;
341 .bgcolorstatus4 a, .bgcolorstatus4 span.nolink {
342 background-color: #9999ff;
343 margin: 0;
344 padding: 2px;
345 border: 1px solid black;
348 /*for lists of things with alternating colored backgrounds*/
349 .bgcoloralt2 {
350 background-color: #f5f5ff;
352 .bgcoloralt1 {
353 background-color: #fcfcff;
355 /*to discreetly highlight an item*/
356 .bgcolorselected {
357 background-color: #ccccff;
359 /*use class="sgnblue" instead of bgcolor="sgnblue"*/
360 .sgnblue {
361 background-color: #ccffcc;
363 /*important warning*/
364 .alert {
365 font-weight: bolder;
366 color: #ffffff;
367 background-color: #ff0000;
369 /*not quite so important warning*/
370 .warning {
371 color: #d22;
372 background-color: none;
374 .news {
375 color: #ff0000;
377 /* used to highlight things in yellow, like bad regions of sequences */
378 .highlighted, .badseq {
379 background: yellow;
381 /* used to indicate something is disabled or relatively unimportant. just like, um, ghosts */
382 .ghosted {
383 color: gray;
385 /* used for special notices that are unusual, and to which the user's attention should be drawn */
386 .specialnote {
387 font-size: 110%;
389 div.specialnote {
390 margin-top: 1em;
391 margin-bottom: 1em;
393 /* for things you want to put in a subtly set-off box */
394 div.minorbox {
395 border: 1px solid #cccccc;
397 div.deprecated {
398 padding:3px;
399 margin-left:5px;
400 margin-bottom:10px;
401 border:1px dashed #772222;
402 background-color:#e5e5e5;
403 color:#600;
404 text-align:center;
405 font-size:1.2em;
408 span.help {
409 cursor: help;
410 border-bottom: 1px dashed #666;
413 span.toolbar_help {
414 /*nothing different*/
417 /***************************** INFO SECTIONS *******************************************************/
419 You will probably not need these, because you can
420 just call the info_section_html() function that uses them
424 these make a blue box like we like to use to divide
425 info pages into sections.
427 .infosectionhead,
428 .infosectionhead_empty,
429 .sub_infosectionhead,
430 .sub_infosectionhead_empty
432 width: 99%;
433 background: #e3e3cc; /* NOT SGN-blue! -- cassava blue! */
434 text-align:left;
435 margin-bottom: 6px;
436 margin-left: 5px;
437 padding: 1px 0px 3px 2px;
438 /* margin-right: 1em; */
439 border: 1px solid #9f9fc7;
441 /* sub-infosections have a gray heading */
442 .sub_infosectionhead,
443 .sub_infosectionhead_empty
445 background: #efefef;
446 border-color: #c2c2c2;
447 border-width: 1px;
450 /* empty infosections don't have such a big bottom margin */
451 .infosectionhead_empty,
452 .sub_infosectionhead_empty
454 margin-bottom: 0.5em;
457 .infosectiontitle,
458 .sub_infosectiontitle,
459 .infosectiontitle_empty,
460 .sub_infosectiontitle_empty
462 font-weight: bold;
463 vertical-align: middle;
464 color: black;
465 font-size: 12px;
467 td.infosectionsubtitle,
468 td.sub_infosectionsubtitle,
469 td.infosectionsubtitle_empty,
470 td.sub_infosectionsubtitle_empty
472 width: 10%;
473 white-space: nowrap;
474 text-align: right;
476 td.infosectionsubtitle_empty,
477 td.sub_infosectionsubtitle_empty
479 color: #444444;
480 font-size: 90%;
482 div.infosectioncontent,
483 div.sub_infosectioncontent
485 margin: 0.4em 1em 2em 2em;
487 td.infosection_emptymessage,
488 td.sub_infosection_emptymessage
490 color: #444444;
491 width: 200px;
492 padding-left: 2em;
496 /************* COLLAPSIBLE THINGS (used by CXGN::Page::Widgets::collapser) ********************/
498 a.collapser {
499 color: black;
501 a.collapser:hover {
502 text-decoration: none;
504 a.collapser img {
505 border: 0;
506 padding: 0 5px 0 2px;
507 position: relative;
508 top: 1px;
511 /************* TABBED PAGES ********************/
512 /* You will probably not need these, because you can
513 just call the tabset function that uses them */
515 /* styles for a set of tabs generated with SGN::tabset */
516 /* like those on bulk download and direct search */
517 /* classes to make a rounded box with some fill around an */
518 /* element */
520 table.modesel {
521 padding: 0;
524 td.modesel_c, td.modesel_c_hi {
525 text-align: center;
526 vertical-align: middle;
527 /* width: 8em; */
529 td.modesel_spacer {
530 padding: 0;
531 height: 6px;
532 font-size: 1px;
533 width: 15px;
534 line-height: 0.1;
536 hr.modesel {
537 border: 0;
538 border-bottom: 2px solid #c0c0c0;
539 margin-top: 15px;
541 a.modesel, a.modesel:visited, a.modesel_hi, a.modesel_hi:visited {
542 display: block;
543 color: #202020;
544 margin: -3px -2px -1px -2px;
545 padding: 2px;
546 /* position: absolute; */
547 z-index: 30;
549 a.modesel:hover, a.modesel_hi:hover {
550 text-decoration: none;
552 a.modesel_hi {
553 color: black;
556 td.modesel_tl, td.modesel_tl_hi {
557 padding: 0;
558 height: 7px;
559 width: 6px;
561 td.modesel_bl {
562 padding: 0;
563 height: 7px;
564 width: 6px;
566 td.modesel_bl_hi {
567 padding: 0;
568 height: 7px;
569 width: 6px;
571 td.modesel_tr, td.modesel_tr_hi {
572 padding: 0;
573 height: 7px;
574 width: 6px;
575 font-size: 1px;
576 line-height: 0.1;
578 td.modesel_br {
579 padding: 0;
580 height: 7px;
581 width: 6px;
583 td.modesel_br_hi {
584 padding: 0;
585 height: 7px;
586 width: 6px;
588 td.modesel_l, td.modesel_l_hi {
589 padding: 0;
590 width: 6px;
591 height: 10px;
592 vertical-align: top;
594 td.modesel_t, td.modesel_t_hi {
595 padding: 0;
596 height: 7px;
597 font-size: 1px;
598 line-height: 0.1;
600 td.modesel_r, td.modesel_r_hi {
601 padding: 0;
602 width: 6px;
603 height: 10px;
604 vertical-align: top;
606 td.modesel_b {
607 padding: 0;
609 height: 7px;
610 font-size: 1px;
611 line-height: 0.1;
613 td.modesel_b_hi {
614 padding: 0;
616 height: 7px;
617 font-size: 1px;
618 line-height: 0.1;
621 /* now for the background images */
622 td.modesel_l_hi { background: url(/documents/img/modesel_l_back_hi.gif) repeat-y top right; }
623 td.modesel_r_hi { background: url(/documents/img/modesel_r_back_hi.gif) repeat-y top left; }
624 td.modesel_t_hi { background: url(/documents/img/modesel_t_hi.gif) repeat-x bottom left; }
625 td.modesel_b_hi { background: url(/documents/img/modesel_b_hi.gif) repeat-x top left; }
626 td.modesel_c_hi {
627 background: #bbbbe5 url(/documents/img/modesel_content_back_hi.gif) repeat-x top left;
628 /* padding-top: 2px; */
630 td.modesel_l { background: url(/documents/img/modesel_l_back.gif) repeat-y top left; }
631 td.modesel_r { background: url(/documents/img/modesel_r_back.gif) repeat-y top left; }
632 td.modesel_t { background: url(/documents/img/modesel_t.gif) repeat-x bottom left; }
633 td.modesel_b { background: url(/documents/img/modesel_b.gif) repeat-x top left; }
634 td.modesel_c {
635 background: #dbdbdb url(/documents/img/modesel_content_back.gif) repeat-x top left;
638 /***************************** MULTILEVEL SELECT BOX *****************************************/
640 a.multilevel_modesel, a.multilevel_modesel:visited, a.multilevel_modesel_active, a.multilevel_modesel_active:visited,
641 a.multilevel_modesel_parent, a.multilevel_modesel_parent:visited, a.multilevel_modesel_parent_active, a.multilevel_modesel_parent_active:visited
643 border: 1px solid black;
644 border-radius: 3px;
645 -moz-border-radius: 3px;
646 -webkit-border-radius: 3px;
647 -khtml-border-radius: 3px;
648 font-size: 14px;
649 padding: 2px 0 2px 0;
650 font-family: Arial, sans-serif;
651 margin-bottom: 1px;
652 text-decoration: none;
653 color: black;
654 display: block;
655 width: 90%;
656 background: #e6e6e6 url(/documents/img/gr_wht_trans.png) top left repeat-x;
659 a.multilevel_modesel, a.multilevel_modesel:visited,
660 a.multilevel_modesel_parent, a.multilevel_modesel_parent:visited {
661 background: #e6e6e6 url(/documents/img/gr_wht_trans_2.png) top left repeat-x;
664 a.multilevel_modesel_parent_active {
665 position: relative;
666 top: 4px;
667 height: 24px;
670 div.multilevel_modesel, div.multilevel_modesel_active {
671 margin: -1px auto 0 auto;
673 div.multilevel_modesel td, div.multilevel_modesel_active td {
674 text-align: center;
675 vertical-align: top;
677 div.multilevel_modesel table, div.multilevel_modesel_active table {
678 margin: 0 auto 0 auto;
680 div.multilevel_modesel {
681 display: none;
683 div.multilevel_modesel_active {
684 position: relative;
687 div.multilevel_modesel_level_1 {
688 border: 1px solid black;
689 background-color: #c2c2ff;
690 z-index: 1;
692 div.multilevel_modesel_level_2 {
693 border: 1px solid black;
694 background-color: #9797c7;
695 z-index: 2;
698 div.multilevel_modesel_level_0 a.multilevel_modesel_active,
699 div.multilevel_modesel_level_0 a.multilevel_modesel_parent_active {
700 background-color: #c2c2ff;
702 div.multilevel_modesel_level_1 a.multilevel_modesel_active,
703 div.multilevel_modesel_level_1 a.multilevel_modesel_parent_active {
704 background-color: #9797c7;
707 div.multilevel_modesel_level_2 a.multilevel_modesel_active,
708 div.multilevel_modesel_level_2 a.multilevel_modesel_parent_active {
709 background-color: #76769b;
713 /***************************** PAGINATED SEARCH RESULTS *****************************************/
715 /* for pagination next page and previous page */
716 /* buttons on search pages */
717 a.paginate_nav, span.paginate_nav_currpage, span.paginate_nav_ghosted {
718 padding: 0.16em;
719 font-size: larger;
720 font-weight: bold;
721 line-height: 2.1;
723 span.paginate_nav_ghosted {
724 color: #cccccc;
726 span.paginate_summary {
728 span.paginate_nav_currpage {
729 font-weight: bolder;
730 border: 1px solid black;
731 color: #c00000;
734 table.columnar_table {
735 border: 1px solid #cccccc;
736 clear: both;
738 table.columnar_table_noborder {
739 clear: both;
741 td.columnar_table, th.columnar_table, th.columnar_table_noborder {
742 padding: 0.2em 0.6em 0.2em 0.6em;
743 margin: 0;
744 line-height: 1.4;
746 th.columnar_table {
747 border-bottom: 1px solid #aaa;
750 caption.columnar_table {
751 font-weight: bold;
752 text-align: left;
753 padding: 2px;
756 /* styles for paginated search results pages like bacsearch.pl and markersearch.pl*/
757 #searchresults {
758 text-align: center;
760 a.stealth {
761 text-decoration: none;
762 color: black;
764 .hilite {
765 background: yellow;
768 /***************************** HOME PAGE STUFF *********************/
769 /*Feel free to use elsewhere if you like. */
770 .boxheading
772 font-size:14px;
773 color: #A2AD00;
774 line-height:16px;
775 font-weight:bolder;
776 border-style:solid;
777 border-bottom-width:1px;
778 border-top-width:0px;
779 border-left-width:0px;
780 border-right-width:0px;
781 border-color:#999999;
783 .boxcontent
785 margin-top:10px;
786 margin-left:10px;
788 .boxsubcontent
790 margin-top:7px;
791 margin-left:7px;
792 margin-bottom:12px;
794 .subheading
796 font-weight:bolder;
798 .boxbgcolor1
800 padding:10px;
801 background-color:#ffffff;
803 .boxbgcolor2
805 padding:10px;
806 padding-bottom:0px;
807 background-color:#f0f0ff;
808 border-style:solid;
809 border-color:#999999;
810 border-width:1px;
812 .boxbgcolor3
814 padding:10px;
815 background-color:#ccccff;
816 border-style:solid;
817 border-color:#999999;
818 border-width:1px;
819 height:190px;
821 .boxbgcolor4
823 padding:10px;
824 background-color:#cccccc;
825 border-style:solid;
826 border-color:#999999;
827 border-width:1px;
829 .boxbgcolor5
831 padding:10px;
832 background-color:#ffffff;
833 border-style:solid;
834 border-color:#999999;
835 border-width:1px;
837 .boxbgcolor6
838 { padding:10px;
839 background-color:#ffffaa;
840 border-style:solid;
841 border-color: #888888;
842 border-width: 1px;
845 /*********** TOOLBARS W/DROPDOWN MENUS ****************/
847 table#siteheader {
848 margin: 0 auto 3px auto;
849 width: 740px;
852 table.toolbar {
853 width: 100%;
854 margin: 0;
855 background: none;
856 border: none;
857 box-shadow:none;
860 td.toolbar_l, td.toolbar_r {
861 width: 10px;
863 td.toolbar_content {
864 background: white url(/documents/img/toolbar_content_back.gif) repeat-x top left;
865 padding: 3px 23px 3px 4px;
866 color: black;
867 font-size: 125%;
868 text-align: left;
869 font-family: "Bitstream Vera Sans",Arial,Helvetica,sans-serif;
871 td.toolbar_search {
872 text-align: right;
873 width: 1%;
874 white-space: nowrap;
875 padding: 0 0.35em 0 1em;
876 vertical-align: top;
878 a.toolbar_menuname, a.toolbar_menuname:link, a.toolbar_menuname:visited {
879 color: black;
880 display: block;
883 table.toolbar_popmenu {
884 position: absolute;
885 visibility: hidden;
886 z-index: 99;
887 border-top: 1px solid #a6a6a6;
888 border-right: 1px solid #666666;
889 border-bottom: 2px solid black;
890 border-left: 1px solid #666666;
891 text-align: left;
892 margin-left: auto;
893 margin-right: auto;
894 background: #f2f2f2;
895 line-height: 1.1;
897 a.toolbar_item_first, a.toolbar_item_first:link, a.toolbar_item_first:visited, a.toolbar_item_first:active,
898 a.toolbar_item, a.toolbar_item:link, a.toolbar_item:visited, a.toolbar_item:active, span.toolbar_item {
899 text-decoration: none;
900 color: #222;
901 border: 1px solid #f2f2f2;
902 padding: 0.2em 0.5em 0.2em 0.5em;
903 margin: 0;
904 display: block;
905 font-size: 12px;
906 white-space: nowrap;
909 td.toolbar_item_title {
910 padding: 4px 2px 2px 2px;
911 font-weight: bold;
912 color: #373737;
915 span.toolbar_item {
916 font-weight: bold;
917 padding-left: 0.1em;
920 td.toolbar_item {
921 border-top: 1px solid #cfcfcf;
924 a.toolbar_item:hover,
925 a.toolbar_item_first:hover {
926 background: #ccccff;
927 border: 1px solid #666666;
928 color: black;
931 form.quicksearch {
932 margin: 0;
933 padding: 0;
935 input.quicksearch.field {
936 border: 1px solid #a0a0a0;
937 background: white;
938 padding: 0 0.1em 0 0.15em;
939 height: 18px;
940 font-family: "Charter","Bitstream Vera Serif",Times,serif;
941 font-size: 13px;
942 margin-top: 3px;
943 vertical-align: top;
945 input.quicksearch.imgbutton {
946 margin: 4px -11px 0 0;
947 z-index: 2;
948 position: relative;
952 /***************************** ODDS AND ENDS ****************************************************/
953 /*If you can't find what you need above, you can make a custom style here. */
955 .developererrorbox
957 width:740px;
958 padding:10px;
959 background-color:#f0f0ff;
960 border-style:solid;
961 border-color:#ff0000;
962 border-width:1px;
965 table#developer_message_table {
966 width: 740px;
967 margin-bottom: 7px;
969 .invisible, .noshow {
970 display: none;
973 div.optional_show
975 margin: 0.2em 0 1.3em 0;
976 border: 1px solid gray;
977 border-radius: 6px;
978 -moz-border-radius: 6px;
979 -webkit-border-radius: 6px;
980 background: #eee;
982 div.optional_show > h3 {
983 font-weight: normal;
984 padding: 6px 15px;
985 margin: 0;
986 padding: 3px;
987 padding-bottom: 6px;
988 font-size: 100%;
989 cursor: pointer;
991 div.optional_show > div {
992 background: white;
993 margin: 0 10px 10px 10px;
995 div.optional_show > h3 > .title {
996 margin-left: 20px;
999 div.optional_show > h3 > .icon {
1000 background-image: url(/img/ui-icons.png);
1001 width: 16px;
1002 height: 16px;
1003 position: absolute;
1004 background-position: -32px -16px;
1006 div.optional_show > h3.active > .icon {
1007 background-position: -64px -16px;
1011 /*style for displaying a link instead of a button for 'optional_show' contents */
1012 a.abstract_optional_show {
1013 color: blue;
1014 cursor: pointer;
1015 white-space: nowrap;
1017 div.abstract_optional_show {
1018 background: #f0f0ff;
1019 border: 1px solid #9F9FC7;
1020 margin: 0.2em 1em 0.2em 1em;
1021 padding: 0.2em 0.5em 0.2em 1em;
1024 /* style for displaying lists of links to file folders */
1025 /* currently used on bulk download ftp listing */
1026 a.folderlink:before {
1027 content: url(/documents/img/folder_yellow_3.png);
1028 vertical-align: -8px;
1030 a.folderlink {
1031 font-weight: bold;
1032 margin-bottom: 2em;
1033 /* vertical-align: top; */
1035 .folderdesc {
1036 margin-left: 50px;
1037 color: #999999;
1038 font-size: smaller;
1039 /* font-style: italic; */
1042 li.folderlink {
1043 margin-bottom: 0.4em;
1047 /* styles for displaying automatic (i.e. BLAST) annotation hits */
1048 td.blasthit_type {
1049 vertical-align: middle;
1050 text-align: right;
1052 span.blasthit_type {
1053 font-size: smaller;
1055 span.blasthit_db,
1056 a.blasthit_db {
1057 font-weight: bold;
1059 a.blasthit_db {
1060 color: black;
1061 text-decoration: underline;
1063 a.blasthit_db:hover {
1064 background: #eeeeff;
1066 td.blasthit_db {
1067 background: #ccccff;
1068 padding-bottom: 3px;
1070 span.blasthit_statname {
1071 font-weight: bold;
1072 margin-left: 0.5em;
1074 span.blasthit_statname:after {
1075 content: ':';
1077 span.blasthit_statval {
1080 span.blasthit_id {
1081 font-family: monospace;
1083 td.blasthit_id {
1084 padding: 6px;
1085 padding-left: 8px;
1086 background: #EDEDFF;
1087 vertical-align: middle;
1089 td.blasthit_defline {
1090 padding: 3px;
1091 padding-left: 8px;
1092 background: #f8f8ff;
1093 font-family: monospace;
1095 td.blasthit_stats {
1096 padding: 3px;
1097 vertical-align: middle;
1098 font-size: smaller;
1100 table.blasthit {
1101 margin: 4px;
1102 border: 1px solid #cccccc;
1107 /* styles for little info tables generated with CXGN::FormattingHelpers::info_table_html */
1108 table.sub_info_table,
1109 table.info_table {
1110 border: 1px solid #DDDDDD;
1111 margin: 0.1em;
1114 table.sub_info_table_noborder,
1115 table.info_table_noborder {
1116 border: 0;
1117 padding: 0;
1118 margin: 0;
1120 table.sub_info_table,
1121 table.sub_info_table_noborder {
1124 th.sub_info_table,
1125 th.info_table {
1126 /* padding: 0 0.3em 0.4em 0.3em; */
1127 padding: 0.2em 0.2em 0.1em 0.3em;
1128 white-space: nowrap;
1129 border-bottom: 1px solid #DDDDDD;
1130 background: #F5F5F5;
1133 span.info_table_fieldname {
1134 font-weight: bold;
1136 span.sub_info_table_fieldname {
1137 font-size: 90%;
1138 font-weight: bold;
1139 color: #333333;
1142 td.info_table_field {
1143 padding: 0.6em 0.5em 0.3em 1em;
1145 td.sub_info_table_field {
1146 padding: 0 0.3em 0.3em 0;
1149 div.sub_info_table_fieldval,
1150 div.info_table_fieldval {
1151 /* font-family: monospace; */
1152 margin: 0.3em 0 0 0.6em;
1154 div.info_table_fieldval > ul {
1155 margin: 0;
1156 padding-left: 2.5em;
1159 caption.info_table,
1160 caption.sub_info_table {
1161 caption-side: bottom;
1163 span.subinfo:after {
1164 content: ': ';
1168 /* styles for numerical range input in FormattingHelpers */
1169 table.nri {
1170 display: inline;
1172 span.nri_units {
1173 margin: 0;
1174 line-height: 1.0;
1175 vertical-align: middle;
1178 /* Styles for SOL forum */
1179 .topicbox {
1180 padding:1px;
1181 background-color:#f0f0ff;
1182 border-style:solid;
1183 border-color:#999999;
1184 border-width:1px;
1188 .topicdescbox {
1189 padding:1px;
1190 background-color:#ffffee;
1191 border-style:solid;
1192 border-top:0px;
1193 border-color:#999999;
1194 border-width:1px;
1197 /* styles for gbrowse (CGI::Toggle) */
1198 .el_hidden {display:none}
1199 .el_visible {display:inline}
1200 .ctl_hidden {
1201 cursor: pointer;
1202 display: none;
1204 .ctl_visible {
1205 cursor: pointer;
1206 display: inline;
1208 .tctl { text-decoration:underline; }
1211 /* Re-style the inline MochiKit Logging Pane!: */
1212 div#_MochiKit_LoggingPane {
1213 text-align:left; /* appears centered otherwise, weird */
1217 div.publication_embedded {
1218 text-align: justify;
1220 /* publication styles */
1221 div.publication_embedded .detail {
1222 padding: 0.5em 2em;
1223 border: 1px solid gray;
1224 background: #eee;
1227 div.publication_embedded .citation {
1228 font-weight: bold;
1229 font-style: italic;
1230 background: #ddd;
1231 padding: 0.3em 4px;
1234 .species_binomial {
1235 font-style: italic;
1239 #affiliated_sites ul {
1240 margin: 0;
1241 padding-left: 1em;
1243 #affiliated_sites li {
1244 padding-bottom: 1em;
1247 /* styles for standard renderings of CrossReference objects */
1249 ul.xref_link {
1250 padding-left: 0;
1252 ul.xref_link li {
1253 list-style: none outside none;
1256 div.xref_rich_gbrowse2 {
1257 clear: both;
1258 border-radius: 6px;
1259 -moz-border-radius: 6px;
1260 -webkit-border-radius: 6px;
1261 border: 1px outset #666;
1262 padding-bottom: 8px;
1263 margin: 10px;
1265 div.xref_rich_gbrowse2 hr {
1266 width: 95%;
1269 div.xref_rich_gbrowse2 img {
1270 margin-top: 12px;
1271 border: 0;
1275 /* styles for jquery.simpletooltip */
1277 #simpleTooltip {
1278 padding: 7px;
1279 border: 1px solid #A6A7AB;
1280 background: #F2F3F5;
1283 #page_report_a_problem {
1284 margin: 20px 0 -10px 1px;
1285 text-align: left;
1286 font-size: 90%;
1287 clear: both;
1289 #page_report_a_problem a {
1290 padding: 1px;
1291 color: #666;
1296 /* cassavabase additions */
1299 /* CSS Document */
1307 h6 {
1308 margin: 10px 0;
1309 font-family: 'Lato', sans-serif;
1310 font-weight: bold;
1311 color: #A2AD00;
1312 text-rendering: optimizelegibility;
1315 h1 {font-size: 22px; line-height: 32px; margin: 0;}
1316 h2 {font-size: 18px; line-height: 28px; }
1317 h3 {font-size: 16px; line-height: 26px; }
1320 h6 {line-height: 18px; }
1321 h4 {font-size: 14px; }
1322 h5 {font-size: 12px; }
1323 h6 {font-size: 11px; color: #999999; text-transform: uppercase; }
1325 a.btn {
1326 background: none;
1327 display: inline-block;
1328 *display: inline;
1329 padding: 4px 10px 4px;
1330 margin-bottom: 0;
1331 *margin-left: .3em;
1332 font-size: 13px;
1333 line-height: 18px;
1334 *line-height: 20px;
1335 color: #fff;
1336 text-align: center;
1337 vertical-align: middle;
1338 cursor: pointer;
1339 background-color: #9E75BF;
1340 *background-color: #9E75BF;
1341 border: 1px solid #cccccc;
1342 *border: 0;
1343 border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
1344 border-color: #e6e6e6 #e6e6e6 #bfbfbf;
1345 border-bottom-color: #b3b3b3;
1346 *zoom: 1;
1350 -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
1351 -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
1352 box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
1353 -webkit-transition: background-color .3s ease;
1357 a.btn:hover {
1358 color: #333333;
1359 background: none;
1360 text-decoration: none;
1361 background-color: #e6e6e6;
1362 *background-color: #d9d9d9;
1363 /* Buttons in IE7 don't get borders, so darken on hover */
1365 background-position: 0 -15px;
1366 -webkit-transition: background-position 0.1s linear;
1367 -moz-transition: background-position 0.1s linear;
1368 -ms-transition: background-position 0.1s linear;
1369 -o-transition: background-position 0.1s linear;
1370 transition: background-position 0.1s linear;
1373 a {color: #954A09; text-decoration: none; background: none;}
1374 a:hover {color: #CE8E00; text-decoration: underline; }
1376 hr {
1377 margin: 18px 0;
1378 border: 0;
1379 border-top: 1px solid #eeeeee;
1380 border-bottom: 1px solid #ffffff;
1385 #header {width:100%; background-color:#FFFFFF; color:#fff; height:45px;}
1386 #footer {width:960px; min-height:60px; margin:0px auto; }
1388 #footer.white {background-color:#fff;}
1390 #footer.earth {background-color:#472A2B; width:100%;}
1391 #footer.earth p {color:#e6e4d1;}
1392 #footer.earth a {color:#f2f2f2;}
1393 #footer.earth a:hover {color:#fff;}
1396 #footer .block {margin-left:30px; float:left;}
1397 #footer .first {margin-left:0 !important;}
1398 #footer .wide {width:460px;}
1399 #footer .small {width:220px;}
1401 #footer ul {padding:0;}
1402 #footer ul li {list-style: none outside none;margin: 0 0 6px 0; padding: 0;}
1404 .container { width:960px; margin:0px auto; }
1406 .well {
1407 background-color: #F5F5F5;
1408 border: 1px solid rgba(0, 0, 0, 0.05);
1409 border-radius: 4px 4px 4px 4px;
1410 box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05) inset;
1411 margin: 20px 0;
1412 min-height: 600px;
1413 padding: 19px;
1415 .is-padded {padding: 20px 10px; }
1417 .photo {margin:20px;}
1419 .pull-right {float: right;}
1420 .pull-left {float: left;}
1422 .divider {
1423 background: url("/static/img/cross-pattern.png") repeat; color: #333333;