added location autocomplete
[sgn.git] / static / css / nextgen-cassava-base-new.css
blob05b613c65ba2382ff78bcc8216fdd67c2ce6263e
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;
68 }*/
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;*/
440 width: 100%;
441 margin-bottom: 10px;
442 padding-left: 10px;
443 border-bottom-style: solid;
444 border-width: 1px;
445 border-color: #ccc;
447 /* sub-infosections have a gray heading */
448 .sub_infosectionhead,
449 .sub_infosectionhead_empty
451 /* background: #efefef;
452 border-color: #c2c2c2;
453 border-width: 1px;*/
454 width: 100%;
455 border-bottom-style: solid;
456 border-width: 1px;
457 border-color: #ccc;
460 /* empty infosections don't have such a big bottom margin */
461 .infosectionhead_empty,
462 .sub_infosectionhead_empty
464 margin-bottom: 0.5em;
467 .infosectiontitle,
468 .sub_infosectiontitle,
469 .infosectiontitle_empty,
470 .sub_infosectiontitle_empty
472 font-weight: bold;
473 vertical-align: middle;
474 color: black;
475 font-size: 12px;
477 td.infosectionsubtitle,
478 td.sub_infosectionsubtitle,
479 td.infosectionsubtitle_empty,
480 td.sub_infosectionsubtitle_empty
482 width: 10%;
483 white-space: nowrap;
484 text-align: right;
486 td.infosectionsubtitle_empty,
487 td.sub_infosectionsubtitle_empty
489 color: #444444;
490 font-size: 90%;
492 div.infosectioncontent,
493 div.sub_infosectioncontent
495 margin: 0.4em 1em 2em 2em;
497 td.infosection_emptymessage,
498 td.sub_infosection_emptymessage
500 color: #444444;
501 width: 200px;
502 padding-left: 2em;
506 /************* COLLAPSIBLE THINGS (used by CXGN::Page::Widgets::collapser) ********************/
508 a.collapser {
509 color: black;
511 a.collapser:hover {
512 text-decoration: none;
514 a.collapser img {
515 border: 0;
516 padding: 0 5px 0 2px;
517 position: relative;
518 top: 1px;
521 /************* TABBED PAGES ********************/
522 /* You will probably not need these, because you can
523 just call the tabset function that uses them */
525 /* styles for a set of tabs generated with SGN::tabset */
526 /* like those on bulk download and direct search */
527 /* classes to make a rounded box with some fill around an */
528 /* element */
530 table.modesel {
531 padding: 0;
534 td.modesel_c, td.modesel_c_hi {
535 text-align: center;
536 vertical-align: middle;
537 /* width: 8em; */
539 td.modesel_spacer {
540 padding: 0;
541 height: 6px;
542 font-size: 1px;
543 width: 15px;
544 line-height: 0.1;
546 hr.modesel {
547 border: 0;
548 border-bottom: 2px solid #c0c0c0;
549 margin-top: 15px;
551 a.modesel, a.modesel:visited, a.modesel_hi, a.modesel_hi:visited {
552 display: block;
553 color: #202020;
554 margin: -3px -2px -1px -2px;
555 padding: 2px;
556 /* position: absolute; */
557 z-index: 30;
559 a.modesel:hover, a.modesel_hi:hover {
560 text-decoration: none;
562 a.modesel_hi {
563 color: black;
566 td.modesel_tl, td.modesel_tl_hi {
567 padding: 0;
568 height: 7px;
569 width: 6px;
571 td.modesel_bl {
572 padding: 0;
573 height: 7px;
574 width: 6px;
576 td.modesel_bl_hi {
577 padding: 0;
578 height: 7px;
579 width: 6px;
581 td.modesel_tr, td.modesel_tr_hi {
582 padding: 0;
583 height: 7px;
584 width: 6px;
585 font-size: 1px;
586 line-height: 0.1;
588 td.modesel_br {
589 padding: 0;
590 height: 7px;
591 width: 6px;
593 td.modesel_br_hi {
594 padding: 0;
595 height: 7px;
596 width: 6px;
598 td.modesel_l, td.modesel_l_hi {
599 padding: 0;
600 width: 6px;
601 height: 10px;
602 vertical-align: top;
604 td.modesel_t, td.modesel_t_hi {
605 padding: 0;
606 height: 7px;
607 font-size: 1px;
608 line-height: 0.1;
610 td.modesel_r, td.modesel_r_hi {
611 padding: 0;
612 width: 6px;
613 height: 10px;
614 vertical-align: top;
616 td.modesel_b {
617 padding: 0;
619 height: 7px;
620 font-size: 1px;
621 line-height: 0.1;
623 td.modesel_b_hi {
624 padding: 0;
626 height: 7px;
627 font-size: 1px;
628 line-height: 0.1;
631 /* now for the background images */
632 td.modesel_l_hi { background: url(/documents/img/modesel_l_back_hi.gif) repeat-y top right; }
633 td.modesel_r_hi { background: url(/documents/img/modesel_r_back_hi.gif) repeat-y top left; }
634 td.modesel_t_hi { background: url(/documents/img/modesel_t_hi.gif) repeat-x bottom left; }
635 td.modesel_b_hi { background: url(/documents/img/modesel_b_hi.gif) repeat-x top left; }
636 td.modesel_c_hi {
637 background: #bbbbe5 url(/documents/img/modesel_content_back_hi.gif) repeat-x top left;
638 /* padding-top: 2px; */
640 td.modesel_l { background: url(/documents/img/modesel_l_back.gif) repeat-y top left; }
641 td.modesel_r { background: url(/documents/img/modesel_r_back.gif) repeat-y top left; }
642 td.modesel_t { background: url(/documents/img/modesel_t.gif) repeat-x bottom left; }
643 td.modesel_b { background: url(/documents/img/modesel_b.gif) repeat-x top left; }
644 td.modesel_c {
645 background: #dbdbdb url(/documents/img/modesel_content_back.gif) repeat-x top left;
648 /***************************** MULTILEVEL SELECT BOX *****************************************/
650 a.multilevel_modesel, a.multilevel_modesel:visited, a.multilevel_modesel_active, a.multilevel_modesel_active:visited,
651 a.multilevel_modesel_parent, a.multilevel_modesel_parent:visited, a.multilevel_modesel_parent_active, a.multilevel_modesel_parent_active:visited
653 border: 1px solid black;
654 border-radius: 3px;
655 -moz-border-radius: 3px;
656 -webkit-border-radius: 3px;
657 -khtml-border-radius: 3px;
658 font-size: 14px;
659 padding: 2px 0 2px 0;
660 font-family: Arial, sans-serif;
661 margin-bottom: 1px;
662 text-decoration: none;
663 color: black;
664 display: block;
665 width: 90%;
666 background: #e6e6e6 url(/documents/img/gr_wht_trans.png) top left repeat-x;
669 a.multilevel_modesel, a.multilevel_modesel:visited,
670 a.multilevel_modesel_parent, a.multilevel_modesel_parent:visited {
671 background: #e6e6e6 url(/documents/img/gr_wht_trans_2.png) top left repeat-x;
674 a.multilevel_modesel_parent_active {
675 position: relative;
676 top: 4px;
677 height: 24px;
680 div.multilevel_modesel, div.multilevel_modesel_active {
681 margin: -1px auto 0 auto;
683 div.multilevel_modesel td, div.multilevel_modesel_active td {
684 text-align: center;
685 vertical-align: top;
687 div.multilevel_modesel table, div.multilevel_modesel_active table {
688 margin: 0 auto 0 auto;
690 div.multilevel_modesel {
691 display: none;
693 div.multilevel_modesel_active {
694 position: relative;
697 div.multilevel_modesel_level_1 {
698 border: 1px solid black;
699 background-color: #c2c2ff;
700 z-index: 1;
702 div.multilevel_modesel_level_2 {
703 border: 1px solid black;
704 background-color: #9797c7;
705 z-index: 2;
708 div.multilevel_modesel_level_0 a.multilevel_modesel_active,
709 div.multilevel_modesel_level_0 a.multilevel_modesel_parent_active {
710 background-color: #c2c2ff;
712 div.multilevel_modesel_level_1 a.multilevel_modesel_active,
713 div.multilevel_modesel_level_1 a.multilevel_modesel_parent_active {
714 background-color: #9797c7;
717 div.multilevel_modesel_level_2 a.multilevel_modesel_active,
718 div.multilevel_modesel_level_2 a.multilevel_modesel_parent_active {
719 background-color: #76769b;
723 /***************************** PAGINATED SEARCH RESULTS *****************************************/
725 /* for pagination next page and previous page */
726 /* buttons on search pages */
727 a.paginate_nav, span.paginate_nav_currpage, span.paginate_nav_ghosted {
728 padding: 0.16em;
729 font-size: larger;
730 font-weight: bold;
731 line-height: 2.1;
733 span.paginate_nav_ghosted {
734 color: #cccccc;
736 span.paginate_summary {
738 span.paginate_nav_currpage {
739 font-weight: bolder;
740 border: 1px solid black;
741 color: #c00000;
744 table.columnar_table {
745 border: 1px solid #cccccc;
746 clear: both;
748 table.columnar_table_noborder {
749 clear: both;
751 td.columnar_table, th.columnar_table, th.columnar_table_noborder {
752 padding: 0.2em 0.6em 0.2em 0.6em;
753 margin: 0;
754 line-height: 1.4;
756 th.columnar_table {
757 border-bottom: 1px solid #aaa;
760 caption.columnar_table {
761 font-weight: bold;
762 text-align: left;
763 padding: 2px;
766 /* styles for paginated search results pages like bacsearch.pl and markersearch.pl*/
767 #searchresults {
768 text-align: center;
770 a.stealth {
771 text-decoration: none;
772 color: black;
774 .hilite {
775 background: yellow;
778 /***************************** HOME PAGE STUFF *********************/
779 /*Feel free to use elsewhere if you like. */
780 .boxheading
782 font-size:14px;
783 color: #A2AD00;
784 line-height:16px;
785 font-weight:bolder;
786 border-style:solid;
787 border-bottom-width:1px;
788 border-top-width:0px;
789 border-left-width:0px;
790 border-right-width:0px;
791 border-color:#999999;
793 .boxcontent
795 margin-top:10px;
796 margin-left:10px;
798 .boxsubcontent
800 margin-top:7px;
801 margin-left:7px;
802 margin-bottom:12px;
804 .subheading
806 font-weight:bolder;
808 .boxbgcolor1
810 padding:10px;
811 background-color:#ffffff;
813 .boxbgcolor2
815 padding:10px;
816 padding-bottom:0px;
817 background-color:#f0f0ff;
818 border-style:solid;
819 border-color:#999999;
820 border-width:1px;
822 .boxbgcolor3
824 padding:10px;
825 background-color:#ccccff;
826 border-style:solid;
827 border-color:#999999;
828 border-width:1px;
829 height:190px;
831 .boxbgcolor4
833 padding:10px;
834 background-color:#cccccc;
835 border-style:solid;
836 border-color:#999999;
837 border-width:1px;
839 .boxbgcolor5
841 padding:10px;
842 background-color:#ffffff;
843 border-style:solid;
844 border-color:#999999;
845 border-width:1px;
847 .boxbgcolor6
848 { padding:10px;
849 background-color:#ffffaa;
850 border-style:solid;
851 border-color: #888888;
852 border-width: 1px;
855 /*********** TOOLBARS W/DROPDOWN MENUS ****************/
857 table#siteheader {
858 margin: 0 auto 3px auto;
859 width: 740px;
862 table.toolbar {
863 width: 100%;
864 margin: 0;
865 background: none;
866 border: none;
867 box-shadow:none;
870 td.toolbar_l, td.toolbar_r {
871 width: 10px;
873 td.toolbar_content {
874 background: white url(/documents/img/toolbar_content_back.gif) repeat-x top left;
875 padding: 3px 23px 3px 4px;
876 color: black;
877 font-size: 125%;
878 text-align: left;
879 font-family: "Bitstream Vera Sans",Arial,Helvetica,sans-serif;
881 td.toolbar_search {
882 text-align: right;
883 width: 1%;
884 white-space: nowrap;
885 padding: 0 0.35em 0 1em;
886 vertical-align: top;
888 a.toolbar_menuname, a.toolbar_menuname:link, a.toolbar_menuname:visited {
889 color: black;
890 display: block;
893 table.toolbar_popmenu {
894 position: absolute;
895 visibility: hidden;
896 z-index: 99;
897 border-top: 1px solid #a6a6a6;
898 border-right: 1px solid #666666;
899 border-bottom: 2px solid black;
900 border-left: 1px solid #666666;
901 text-align: left;
902 margin-left: auto;
903 margin-right: auto;
904 background: #f2f2f2;
905 line-height: 1.1;
907 a.toolbar_item_first, a.toolbar_item_first:link, a.toolbar_item_first:visited, a.toolbar_item_first:active,
908 a.toolbar_item, a.toolbar_item:link, a.toolbar_item:visited, a.toolbar_item:active, span.toolbar_item {
909 text-decoration: none;
910 color: #222;
911 border: 1px solid #f2f2f2;
912 padding: 0.2em 0.5em 0.2em 0.5em;
913 margin: 0;
914 display: block;
915 font-size: 12px;
916 white-space: nowrap;
919 td.toolbar_item_title {
920 padding: 4px 2px 2px 2px;
921 font-weight: bold;
922 color: #373737;
925 span.toolbar_item {
926 font-weight: bold;
927 padding-left: 0.1em;
930 td.toolbar_item {
931 border-top: 1px solid #cfcfcf;
934 a.toolbar_item:hover,
935 a.toolbar_item_first:hover {
936 background: #ccccff;
937 border: 1px solid #666666;
938 color: black;
941 form.quicksearch {
942 margin: 0;
943 padding: 0;
945 input.quicksearch.field {
946 border: 1px solid #a0a0a0;
947 background: white;
948 padding: 0 0.1em 0 0.15em;
949 height: 18px;
950 font-family: "Charter","Bitstream Vera Serif",Times,serif;
951 font-size: 13px;
952 margin-top: 3px;
953 vertical-align: top;
955 input.quicksearch.imgbutton {
956 margin: 4px -11px 0 0;
957 z-index: 2;
958 position: relative;
962 /***************************** ODDS AND ENDS ****************************************************/
963 /*If you can't find what you need above, you can make a custom style here. */
965 .developererrorbox
967 width:740px;
968 padding:10px;
969 background-color:#f0f0ff;
970 border-style:solid;
971 border-color:#ff0000;
972 border-width:1px;
975 table#developer_message_table {
976 width: 740px;
977 margin-bottom: 7px;
979 .invisible, .noshow {
980 display: none;
983 div.optional_show
985 margin: 0.2em 0 1.3em 0;
986 border: 1px solid gray;
987 border-radius: 6px;
988 -moz-border-radius: 6px;
989 -webkit-border-radius: 6px;
990 background: #eee;
992 div.optional_show > h3 {
993 font-weight: normal;
994 padding: 6px 15px;
995 margin: 0;
996 padding: 3px;
997 padding-bottom: 6px;
998 font-size: 100%;
999 cursor: pointer;
1001 div.optional_show > div {
1002 background: white;
1003 margin: 0 10px 10px 10px;
1005 div.optional_show > h3 > .title {
1006 margin-left: 20px;
1009 div.optional_show > h3 > .icon {
1010 background-image: url(/img/ui-icons.png);
1011 width: 16px;
1012 height: 16px;
1013 position: absolute;
1014 background-position: -32px -16px;
1016 div.optional_show > h3.active > .icon {
1017 background-position: -64px -16px;
1021 /*style for displaying a link instead of a button for 'optional_show' contents */
1022 a.abstract_optional_show {
1023 color: blue;
1024 cursor: pointer;
1025 white-space: nowrap;
1027 div.abstract_optional_show {
1028 background: #f0f0ff;
1029 border: 1px solid #9F9FC7;
1030 margin: 0.2em 1em 0.2em 1em;
1031 padding: 0.2em 0.5em 0.2em 1em;
1034 /* style for displaying lists of links to file folders */
1035 /* currently used on bulk download ftp listing */
1036 a.folderlink:before {
1037 content: url(/documents/img/folder_yellow_3.png);
1038 vertical-align: -8px;
1040 a.folderlink {
1041 font-weight: bold;
1042 margin-bottom: 2em;
1043 /* vertical-align: top; */
1045 .folderdesc {
1046 margin-left: 50px;
1047 color: #999999;
1048 font-size: smaller;
1049 /* font-style: italic; */
1052 li.folderlink {
1053 margin-bottom: 0.4em;
1057 /* styles for displaying automatic (i.e. BLAST) annotation hits */
1058 td.blasthit_type {
1059 vertical-align: middle;
1060 text-align: right;
1062 span.blasthit_type {
1063 font-size: smaller;
1065 span.blasthit_db,
1066 a.blasthit_db {
1067 font-weight: bold;
1069 a.blasthit_db {
1070 color: black;
1071 text-decoration: underline;
1073 a.blasthit_db:hover {
1074 background: #eeeeff;
1076 td.blasthit_db {
1077 background: #ccccff;
1078 padding-bottom: 3px;
1080 span.blasthit_statname {
1081 font-weight: bold;
1082 margin-left: 0.5em;
1084 span.blasthit_statname:after {
1085 content: ':';
1087 span.blasthit_statval {
1090 span.blasthit_id {
1091 font-family: monospace;
1093 td.blasthit_id {
1094 padding: 6px;
1095 padding-left: 8px;
1096 background: #EDEDFF;
1097 vertical-align: middle;
1099 td.blasthit_defline {
1100 padding: 3px;
1101 padding-left: 8px;
1102 background: #f8f8ff;
1103 font-family: monospace;
1105 td.blasthit_stats {
1106 padding: 3px;
1107 vertical-align: middle;
1108 font-size: smaller;
1110 table.blasthit {
1111 margin: 4px;
1112 border: 1px solid #cccccc;
1117 /* styles for little info tables generated with CXGN::FormattingHelpers::info_table_html */
1118 table.sub_info_table,
1119 table.info_table {
1120 border: 1px solid #DDDDDD;
1121 margin: 0.1em;
1124 table.sub_info_table_noborder,
1125 table.info_table_noborder {
1126 border: 0;
1127 padding: 0;
1128 margin: 0;
1130 table.sub_info_table,
1131 table.sub_info_table_noborder {
1134 th.sub_info_table,
1135 th.info_table {
1136 /* padding: 0 0.3em 0.4em 0.3em; */
1137 padding: 0.2em 0.2em 0.1em 0.3em;
1138 white-space: nowrap;
1139 border-bottom: 1px solid #DDDDDD;
1140 background: #F5F5F5;
1143 span.info_table_fieldname {
1144 font-weight: bold;
1146 span.sub_info_table_fieldname {
1147 font-size: 90%;
1148 font-weight: bold;
1149 color: #333333;
1152 td.info_table_field {
1153 padding: 0.6em 0.5em 0.3em 1em;
1155 td.sub_info_table_field {
1156 padding: 0 0.3em 0.3em 0;
1159 div.sub_info_table_fieldval,
1160 div.info_table_fieldval {
1161 /* font-family: monospace; */
1162 margin: 0.3em 0 0 0.6em;
1164 div.info_table_fieldval > ul {
1165 margin: 0;
1166 padding-left: 2.5em;
1169 caption.info_table,
1170 caption.sub_info_table {
1171 caption-side: bottom;
1173 span.subinfo:after {
1174 content: ': ';
1178 /* styles for numerical range input in FormattingHelpers */
1179 table.nri {
1180 display: inline;
1182 span.nri_units {
1183 margin: 0;
1184 line-height: 1.0;
1185 vertical-align: middle;
1188 /* Styles for SOL forum */
1189 .topicbox {
1190 padding:1px;
1191 background-color:#f0f0ff;
1192 border-style:solid;
1193 border-color:#999999;
1194 border-width:1px;
1198 .topicdescbox {
1199 padding:1px;
1200 background-color:#ffffee;
1201 border-style:solid;
1202 border-top:0px;
1203 border-color:#999999;
1204 border-width:1px;
1207 /* styles for gbrowse (CGI::Toggle) */
1208 .el_hidden {display:none}
1209 .el_visible {display:inline}
1210 .ctl_hidden {
1211 cursor: pointer;
1212 display: none;
1214 .ctl_visible {
1215 cursor: pointer;
1216 display: inline;
1218 .tctl { text-decoration:underline; }
1221 /* Re-style the inline MochiKit Logging Pane!: */
1222 div#_MochiKit_LoggingPane {
1223 text-align:left; /* appears centered otherwise, weird */
1227 div.publication_embedded {
1228 text-align: justify;
1230 /* publication styles */
1231 div.publication_embedded .detail {
1232 padding: 0.5em 2em;
1233 border: 1px solid gray;
1234 background: #eee;
1237 div.publication_embedded .citation {
1238 font-weight: bold;
1239 font-style: italic;
1240 background: #ddd;
1241 padding: 0.3em 4px;
1244 .species_binomial {
1245 font-style: italic;
1249 #affiliated_sites ul {
1250 margin: 0;
1251 padding-left: 1em;
1253 #affiliated_sites li {
1254 padding-bottom: 1em;
1257 /* styles for standard renderings of CrossReference objects */
1259 ul.xref_link {
1260 padding-left: 0;
1262 ul.xref_link li {
1263 list-style: none outside none;
1266 div.xref_rich_gbrowse2 {
1267 clear: both;
1268 border-radius: 6px;
1269 -moz-border-radius: 6px;
1270 -webkit-border-radius: 6px;
1271 border: 1px outset #666;
1272 padding-bottom: 8px;
1273 margin: 10px;
1275 div.xref_rich_gbrowse2 hr {
1276 width: 95%;
1279 div.xref_rich_gbrowse2 img {
1280 margin-top: 12px;
1281 border: 0;
1285 /* styles for jquery.simpletooltip */
1287 #simpleTooltip {
1288 padding: 7px;
1289 border: 1px solid #A6A7AB;
1290 background: #F2F3F5;
1293 #page_report_a_problem {
1294 margin: 20px 0 -10px 1px;
1295 text-align: left;
1296 font-size: 90%;
1297 clear: both;
1299 #page_report_a_problem a {
1300 padding: 1px;
1301 color: #666;
1306 /* cassavabase additions */
1309 /* CSS Document */
1317 h6 {
1318 margin: 10px 0;
1319 font-family: 'Lato', sans-serif;
1320 font-weight: bold;
1321 color: #A2AD00;
1322 text-rendering: optimizelegibility;
1325 h1 {font-size: 22px; line-height: 32px; margin: 0;}
1326 h2 {font-size: 18px; line-height: 28px; }
1327 h3 {font-size: 16px; line-height: 26px; }
1330 h6 {line-height: 18px; }
1331 h4 {font-size: 14px; }
1332 h5 {font-size: 12px; }
1333 h6 {font-size: 11px; color: #999999; text-transform: uppercase; }
1335 a.btn_purple {
1336 background: none;
1337 display: inline-block;
1338 *display: inline;
1339 padding: 4px 10px 4px;
1340 margin-bottom: 0;
1341 *margin-left: .3em;
1342 font-size: 13px;
1343 line-height: 18px;
1344 *line-height: 20px;
1345 color: #fff;
1346 text-align: center;
1347 vertical-align: middle;
1348 cursor: pointer;
1349 background-color: #9E75BF;
1350 *background-color: #9E75BF;
1351 border: 1px solid #cccccc;
1352 *border: 0;
1353 border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
1354 border-color: #e6e6e6 #e6e6e6 #bfbfbf;
1355 border-bottom-color: #b3b3b3;
1356 *zoom: 1;
1360 -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
1361 -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
1362 box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
1363 -webkit-transition: background-color .3s ease;
1367 a.btn:hover {
1368 color: #333333;
1369 background: none;
1370 text-decoration: none;
1371 background-color: #e6e6e6;
1372 *background-color: #d9d9d9;
1373 /* Buttons in IE7 don't get borders, so darken on hover */
1375 background-position: 0 -15px;
1376 -webkit-transition: background-position 0.1s linear;
1377 -moz-transition: background-position 0.1s linear;
1378 -ms-transition: background-position 0.1s linear;
1379 -o-transition: background-position 0.1s linear;
1380 transition: background-position 0.1s linear;
1383 a {color: #954A09; text-decoration: none; background: none;}
1384 a:hover {color: #CE8E00; text-decoration: underline; }
1386 hr {
1387 margin: 18px 0;
1388 border: 0;
1389 border-top: 1px solid #eeeeee;
1390 border-bottom: 1px solid #ffffff;
1395 #header {width:100%; background-color:#FFFFFF; color:#fff; height:45px;}
1396 #footer {width:960px; min-height:60px; margin:0px auto; }
1398 #footer.white {background-color:#fff;}
1400 #footer.earth {background-color:#472A2B; width:100%;}
1401 #footer.earth p {color:#e6e4d1;}
1402 #footer.earth a {color:#f2f2f2;}
1403 #footer.earth a:hover {color:#fff;}
1406 #footer .block {margin-left:30px; float:left;}
1407 #footer .first {margin-left:0 !important;}
1408 #footer .wide {width:460px;}
1409 #footer .small {width:220px;}
1411 #footer ul {padding:0;}
1412 #footer ul li {list-style: none outside none;margin: 0 0 6px 0; padding: 0;}
1414 .container { width:960px; margin:0px auto; }
1417 .is-padded {padding: 20px 10px; }
1419 .photo {margin:20px;}
1421 .pull-right {float: right;}
1422 .pull-left {float: left;}
1424 .divider {
1425 background: url("/static/img/cross-pattern.png") repeat; color: #333333;