1 /* NOTE: SGN blue is #ccccff */
2 /******************** GENERAL SITE STYLES **********************/
5 background-color: white
;
6 font-family: verdana
, arial
, helvetica
, sans-serif
;
17 background-color:#CCCCFF;
18 border: 1px solid
#C0C0C0;
21 border:1px solid
#C0C0C0;
24 font-family: verdana
, arial
, helvetica
, sans-serif
;
29 border-collapse: separate
;
31 input
, select
, textarea
{
36 margin-bottom: 0.25em;
42 /*various places on the site use various headline size tags, so let's try to make them all the same*/
44 font-family: verdana
, arial
, helvetica
, sans-serif
;
56 dt
.sub
{ /* used for a second sublevel of dictionary terms */
61 /* where to put the title image */
77 vertical-align: middle
;
81 a
.toplink:link
, a
.toplink:visited
, a
.toplink:active
{
84 text-decoration: none
;
86 font-family: "Bitstream Vera Sans",Arial
,Helvetica
,sans-serif
;
89 padding: 0px 0px 0px 0px;
90 text-decoration: underline
;
92 a
.mytools
, a
.mytools:link
, a
.mytools:visited
{
94 text-decoration: underline
;
96 padding: 0.1em 0.3em 0.1em 0.3em;
100 a
.external
, a
[href ^
="http:"] {
101 background: url
(/documents/img/external.png) center right no-repeat
;
110 a
[href ^
="mailto:"] {
111 background: url
(/documents/img/mail_icon.gif) center right no-repeat
;
116 border-top: 3px solid
#c0c0c0;
121 #pagefooter a
, #pagefooter
a:active
, #pagefooter
a:link
, #pagefooter
a:visited
{
126 margin: 10px 0px 0px 0px;
130 vertical-align: middle
;
133 #clone_shoppingcart {
136 vertical-align: middle
;
139 /* this is a centered page title, like 'BAC P00343' or 'Marker TM2' or whatever */
151 /* Developer Toolbar Style */
155 margin: -8px 0 13px -5px;
158 background-color: #eef;
159 border-bottom: 2px solid
#905;
161 /**Everything visible is in a table, use this to style fonts**/
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
{
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*/
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
{
194 span
.search_form_title
{
199 a
.search_form_random
{
202 a
.search_form_random:before
{
205 a
.search_form_random:after
{
209 /***************************** LINKS ************************************************************/
214 text-decoration:none
;
218 text-decoration:none
;
222 text-decoration:none
;
225 text-decoration:underline
;
229 text-decoration:none
;
231 a
.hidevisited:active
{
233 text-decoration:none
;
235 a
.hidevisited:visited
{
237 text-decoration:none
;
239 a
.hidevisited:hover
{
241 text-decoration:underline
;
245 /* background: #ccccff; */
246 /* border: 1px solid #9f9fc7; */
249 /*makes a submit button that looks more like a link*/
252 text-decoration:none
;
257 /*makes a submit button that looks more like a link*/
258 input
.linkstyle:hover
{
260 text-decoration:underline
;
266 /* for little "what's this" links leading to help pages */
269 letter-spacing: -1px;
272 a
.context_help:before
{
276 a
.context_help:after
{
281 /***************************** FONTS ************************************************************/
282 /*Don't add one if you can use one that's already here. It will keep our fonts more consistent. */
285 font-family: bitstream vera sans mono
, monospace
;
289 /* sequences should be displayed in a monospace font */
290 .sequence, .monospace {
291 font-family: bitstream vera sans mono
, monospace
;
293 .sequence .methionine {
297 .sequence .stop_codon {
304 .sequence .longest_orf {
307 .threeframe_translate .frame {
312 /*some old style used by koni in est.pl and unigene.pl*/
315 font-family: bitstream vera sans mono
, monospace
;
323 /* example text used in search pages */
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)
348 span.bgcolorselected a {
350 padding-right: 0.2em;
352 border: 1px solid #444444;
357 .bgcolorstatus1 a, .bgcolorstatus1 span.nolink {
358 background-color: #dddddd;
361 border: 1px solid black
;
363 .bgcolorstatus2 a, .bgcolorstatus2 span.nolink {
364 background-color: #ffff66;
367 border: 1px solid black
;
369 .bgcolorstatus3 a, .bgcolorstatus3 span.nolink {
370 background-color: #66ff66;
373 border: 1px solid black
;
375 .bgcolorstatus4 a, .bgcolorstatus4 span.nolink {
376 background-color: #9999ff;
379 border: 1px solid black
;
382 /*for lists of things with alternating colored backgrounds*/
384 background-color: #f5f5ff;
387 background-color: #fcfcff;
389 /*to discreetly highlight an item*/
391 background-color: #ccccff;
393 /*use class="sgnblue" instead of bgcolor="sgnblue"*/
395 background-color: #ccccff;
397 /*important warning*/
401 background-color: #ff0000;
403 /*not quite so important warning*/
406 background-color: none
;
411 /* used to highlight things in yellow, like bad regions of sequences */
412 .highlighted, .badseq {
415 /* used to indicate something is disabled or relatively unimportant. just like, um, ghosts */
419 /* used for special notices that are unusual, and to which the user's attention should be drawn */
427 /* for things you want to put in a subtly set-off box */
429 border: 1px solid
#cccccc;
435 border:1px dashed
#772222;
436 background-color:#e5e5e5;
444 border-bottom: 1px dashed
#666;
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.
462 .infosectionhead_empty
,
463 .sub_infosectionhead
,
464 .sub_infosectionhead_empty
467 background: #ccccff; /* this is "SGN blue" */
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
480 border-color: #c2c2c2;
484 /* empty infosections don't have such a big bottom margin */
485 .infosectionhead_empty
,
486 .sub_infosectionhead_empty
488 margin-bottom: 0.5em;
492 .sub_infosectiontitle
,
493 .infosectiontitle_empty
,
494 .sub_infosectiontitle_empty
497 vertical-align: middle
;
501 td
.infosectionsubtitle
,
502 td
.sub_infosectionsubtitle
,
503 td
.infosectionsubtitle_empty
,
504 td
.sub_infosectionsubtitle_empty
510 td
.infosectionsubtitle_empty
,
511 td
.sub_infosectionsubtitle_empty
516 div
.infosectioncontent
,
517 div
.sub_infosectioncontent
519 margin: 0.4em 1em 2em 2em;
521 td
.infosection_emptymessage
,
522 td
.sub_infosection_emptymessage
530 /************* COLLAPSIBLE THINGS (used by CXGN::Page::Widgets::collapser) ********************/
536 text-decoration: none
;
540 padding: 0 5px 0 2px;
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 */
558 td
.modesel_c
, td
.modesel_c_hi
{
560 vertical-align: middle
;
572 border-bottom: 2px solid
#c0c0c0;
575 a
.modesel
, a
.modesel:visited
, a
.modesel_hi
, a
.modesel_hi:visited
{
578 margin: -3px -2px -1px -2px;
580 /* position: absolute; */
583 a
.modesel:hover
, a
.modesel_hi:hover
{
584 text-decoration: none
;
590 td
.modesel_tl
, td
.modesel_tl_hi
{
605 td
.modesel_tr
, td
.modesel_tr_hi
{
622 td
.modesel_l
, td
.modesel_l_hi
{
628 td
.modesel_t
, td
.modesel_t_hi
{
634 td
.modesel_r
, td
.modesel_r_hi
{
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
; }
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
; }
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
;
679 -moz-border-radius: 3px;
680 -webkit-border-radius: 3px;
681 -khtml-border-radius: 3px;
683 padding: 2px 0 2px 0;
684 font-family: Arial
, sans-serif
;
686 text-decoration: none
;
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
{
704 div
.multilevel_modesel
, div
.multilevel_modesel_active
{
705 margin: -1px auto
0 auto
;
707 div
.multilevel_modesel td
, div
.multilevel_modesel_active td
{
711 div
.multilevel_modesel table
, div
.multilevel_modesel_active table
{
712 margin: 0 auto
0 auto
;
714 div
.multilevel_modesel
{
717 div
.multilevel_modesel_active
{
721 div
.multilevel_modesel_level_1
{
722 border: 1px solid black
;
723 background-color: #c2c2ff;
726 div
.multilevel_modesel_level_2
{
727 border: 1px solid black
;
728 background-color: #9797c7;
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
{
757 span
.paginate_nav_ghosted
{
760 span
.paginate_summary
{
762 span
.paginate_nav_currpage
{
764 border: 1px solid black
;
768 table
.columnar_table
{
769 border: 1px solid
#cccccc;
772 table
.columnar_table_noborder
{
775 td
.columnar_table
, th
.columnar_table
, th
.columnar_table_noborder
{
776 padding: 0.2em 0.6em 0.2em 0.6em;
781 border-bottom: 1px solid
#aaa;
784 caption
.columnar_table
{
790 /* styles for paginated search results pages like bacsearch.pl and markersearch.pl*/
795 text-decoration: none
;
802 /***************************** HOME PAGE STUFF *********************/
803 /*Feel free to use elsewhere if you like. */
810 border-bottom-width:1px;
811 border-top-width:0px;
812 border-left-width:0px;
813 border-right-width:0px;
814 border-color:#999999;
834 background-color:#ffffff;
840 background-color:#f0f0ff;
842 border-color:#999999;
848 background-color:#ccccff;
850 border-color:#999999;
857 background-color:#cccccc;
859 border-color:#999999;
865 background-color:#ffffff;
867 border-color:#999999;
872 background-color:#ffffaa;
874 border-color: #888888;
878 /*********** TOOLBARS W/DROPDOWN MENUS ****************/
881 margin: 0 auto
3px auto
;
893 td
.toolbar_l
, td
.toolbar_r
{
897 background: white url
(/documents/img/toolbar_content_back.gif) repeat-x top left
;
898 padding: 3px 23px 3px 4px;
902 font-family: "Bitstream Vera Sans",Arial
,Helvetica
,sans-serif
;
908 padding: 0 0.35em 0 1em;
911 a
.toolbar_menuname
, a
.toolbar_menuname:link
, a
.toolbar_menuname:visited
{
916 table
.toolbar_popmenu
{
920 border-top: 1px solid
#a6a6a6;
921 border-right: 1px solid
#666666;
922 border-bottom: 2px solid black
;
923 border-left: 1px solid
#666666;
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
;
934 border: 1px solid
#f2f2f2;
935 padding: 0.2em 0.5em 0.2em 0.5em;
942 td
.toolbar_item_title
{
943 padding: 4px 2px 2px 2px;
954 border-top: 1px solid
#cfcfcf;
957 a
.toolbar_item:hover
,
958 a
.toolbar_item_first:hover
{
960 border: 1px solid
#666666;
968 input
.quicksearch
.field
{
969 border: 1px solid
#a0a0a0;
971 padding: 0 0.1em 0 0.15em;
973 font-family: "Charter","Bitstream Vera Serif",Times
,serif
;
978 input
.quicksearch
.imgbutton
{
979 margin: 4px -11px 0 0;
985 /***************************** ODDS AND ENDS ****************************************************/
986 /*If you can't find what you need above, you can make a custom style here. */
992 background-color:#f0f0ff;
994 border-color:#ff0000;
998 table#developer_message_table
{
1002 .invisible, .noshow {
1008 margin: 0.2em 0 1.3em 0;
1009 border: 1px solid gray
;
1011 -moz-border-radius: 6px;
1012 -webkit-border-radius: 6px;
1015 div
.optional_show
> h3
{
1016 font-weight: normal
;
1020 padding-bottom: 6px;
1024 div
.optional_show
> div
{
1026 margin: 0 10px 10px 10px;
1028 div
.optional_show
> h3
> .title
{
1032 div
.optional_show
> h3
> .icon
{
1033 background-image: url
(/img
/ui-icons
.png
);
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
{
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;
1066 /* vertical-align: top; */
1072 /* font-style: italic; */
1076 margin-bottom: 0.4em;
1080 /* styles for displaying automatic (i.e. BLAST) annotation hits */
1082 vertical-align: middle
;
1085 span
.blasthit_type
{
1094 text-decoration: underline
;
1096 a
.blasthit_db:hover
{
1097 background: #eeeeff;
1100 background: #ccccff;
1101 padding-bottom: 3px;
1103 span
.blasthit_statname
{
1107 span
.blasthit_statname:after
{
1110 span
.blasthit_statval
{
1114 font-family: monospace
;
1119 background: #EDEDFF;
1120 vertical-align: middle
;
1122 td
.blasthit_defline
{
1125 background: #f8f8ff;
1126 font-family: monospace
;
1130 vertical-align: middle
;
1135 border: 1px solid
#cccccc;
1140 /* styles for little info tables generated with CXGN::FormattingHelpers::info_table_html */
1141 table
.sub_info_table
,
1143 border: 1px solid
#DDDDDD;
1147 table
.sub_info_table_noborder
,
1148 table
.info_table_noborder
{
1153 table
.sub_info_table
,
1154 table
.sub_info_table_noborder
{
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
{
1169 span
.sub_info_table_fieldname
{
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
{
1189 padding-left: 2.5em;
1193 caption
.sub_info_table
{
1194 caption-side: bottom
;
1196 span
.subinfo:after
{
1201 /* styles for numerical range input in FormattingHelpers */
1208 vertical-align: middle
;
1211 /* Styles for SOL forum */
1214 background-color:#f0f0ff;
1216 border-color:#999999;
1223 background-color:#ffffee;
1226 border-color:#999999;
1230 /* styles for gbrowse (CGI::Toggle) */
1231 .el_hidden {display:none
}
1232 .el_visible {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
{
1256 border: 1px solid gray
;
1260 div
.publication_embedded
.citation
{
1272 #affiliated_sites ul
{
1276 #affiliated_sites li
{
1277 padding-bottom: 1em;
1280 /* styles for standard renderings of CrossReference objects */
1286 list-style: none outside none
;
1289 div
.xref_rich_gbrowse2
{
1292 -moz-border-radius: 6px;
1293 -webkit-border-radius: 6px;
1294 border: 1px outset
#666;
1295 padding-bottom: 8px;
1298 div
.xref_rich_gbrowse2 hr
{
1302 div
.xref_rich_gbrowse2 img
{
1308 /* styles for jquery.simpletooltip */
1312 border: 1px solid
#A6A7AB;
1313 background: #F2F3F5;
1316 #page_report_a_problem {
1317 margin: 20px 0 -10px 1px;
1322 #page_report_a_problem a
{