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*/
7 background-color: white
;
8 font-family: "Helvetica Neue",Helvetica
,Arial
,sans-serif
;
21 dt
.sub
{ /* used for a second sublevel of dictionary terms */
26 /* where to put the title image */
42 vertical-align: middle
;
46 a
.toplink:link
, a
.toplink:visited
, a
.toplink:active
{
49 text-decoration: none
;
53 padding: 0px 0px 0px 0px;
54 text-decoration: underline
;
57 a
.mytools
, a
.mytools:link
, a
.mytools:visited
{
59 text-decoration: underline
;
61 padding: 0.1em 0.3em 0.1em 0.3em;
65 a
.external
, a
[href ^
="http:"] {
66 background: url
(/documents/img/external.png) center right no-repeat
;
76 background: url
(/documents/img/mail_icon.gif) center right no-repeat
;
81 border-top: 3px solid
#c0c0c0;
86 #pagefooter a
, #pagefooter
a:active
, #pagefooter
a:link
, #pagefooter
a:visited
{
91 margin: 10px 0px 0px 0px;
95 vertical-align: middle
;
101 vertical-align: middle
;
104 /* this is a centered page title, like 'BAC P00343' or 'Marker TM2' or whatever */
116 /* Developer Toolbar Style */
120 margin: -8px 0 13px -5px;
123 background-color: #eef;
124 border-bottom: 2px solid
#905;
126 /**Everything visible is in a table, use this to style fonts**/
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
{
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*/
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
{
159 span
.search_form_title
{
164 a
.search_form_random
{
167 a
.search_form_random:before
{
170 a
.search_form_random:after
{
174 /***************************** LINKS ************************************************************/
179 text-decoration:none
;
183 text-decoration:none
;
187 text-decoration:none
;
191 text-decoration:underline
;
195 text-decoration:none
;
197 a
.hidevisited:active
{
199 text-decoration:none
;
201 a
.hidevisited:visited
{
203 text-decoration:none
;
205 a
.hidevisited:hover
{
207 text-decoration:underline
;
211 /* background: #ccccff; */
212 /* border: 1px solid #9f9fc7; */
215 /*makes a submit button that looks more like a link*/
218 text-decoration:none
;
223 /*makes a submit button that looks more like a link*/
224 input
.linkstyle:hover
{
226 text-decoration:underline
;
232 /* for little "what's this" links leading to help pages */
235 letter-spacing: -1px;
238 a
.context_help:before
{
242 a
.context_help:after
{
247 /***************************** FONTS ************************************************************/
248 /*Don't add one if you can use one that's already here. It will keep our fonts more consistent. */
251 font-family: bitstream vera sans mono
, monospace
;
255 /* sequences should be displayed in a monospace font */
256 .sequence, .monospace {
257 font-family: bitstream vera sans mono
, monospace
;
259 .sequence .methionine {
263 .sequence .stop_codon {
270 .sequence .longest_orf {
273 .threeframe_translate .frame {
278 /*some old style used by koni in est.pl and unigene.pl*/
281 font-family: bitstream vera sans mono
, monospace
;
289 /* example text used in search pages */
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)
314 span.bgcolorselected a {
316 padding-right: 0.2em;
318 border: 1px solid #444444;
323 .bgcolorstatus1 a, .bgcolorstatus1 span.nolink {
324 background-color: #dddddd;
327 border: 1px solid black
;
329 .bgcolorstatus2 a, .bgcolorstatus2 span.nolink {
330 background-color: #ffff66;
333 border: 1px solid black
;
335 .bgcolorstatus3 a, .bgcolorstatus3 span.nolink {
336 background-color: #66ff66;
339 border: 1px solid black
;
341 .bgcolorstatus4 a, .bgcolorstatus4 span.nolink {
342 background-color: #9999ff;
345 border: 1px solid black
;
348 /*for lists of things with alternating colored backgrounds*/
350 background-color: #f5f5ff;
353 background-color: #fcfcff;
355 /*to discreetly highlight an item*/
357 background-color: #ccccff;
359 /*use class="sgnblue" instead of bgcolor="sgnblue"*/
361 background-color: #ccffcc;
363 /*important warning*/
367 background-color: #ff0000;
369 /*not quite so important warning*/
372 background-color: none
;
377 /* used to highlight things in yellow, like bad regions of sequences */
378 .highlighted, .badseq {
381 /* used to indicate something is disabled or relatively unimportant. just like, um, ghosts */
385 /* used for special notices that are unusual, and to which the user's attention should be drawn */
393 /* for things you want to put in a subtly set-off box */
395 border: 1px solid
#cccccc;
401 border:1px dashed
#772222;
402 background-color:#e5e5e5;
410 border-bottom: 1px dashed
#666;
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.
428 .infosectionhead_empty
,
429 .sub_infosectionhead
,
430 .sub_infosectionhead_empty
433 background: #e3e3cc; /* NOT SGN-blue! -- cassava blue! */
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
446 border-color: #c2c2c2;
450 /* empty infosections don't have such a big bottom margin */
451 .infosectionhead_empty
,
452 .sub_infosectionhead_empty
454 margin-bottom: 0.5em;
458 .sub_infosectiontitle
,
459 .infosectiontitle_empty
,
460 .sub_infosectiontitle_empty
463 vertical-align: middle
;
467 td
.infosectionsubtitle
,
468 td
.sub_infosectionsubtitle
,
469 td
.infosectionsubtitle_empty
,
470 td
.sub_infosectionsubtitle_empty
476 td
.infosectionsubtitle_empty
,
477 td
.sub_infosectionsubtitle_empty
482 div
.infosectioncontent
,
483 div
.sub_infosectioncontent
485 margin: 0.4em 1em 2em 2em;
487 td
.infosection_emptymessage
,
488 td
.sub_infosection_emptymessage
496 /************* COLLAPSIBLE THINGS (used by CXGN::Page::Widgets::collapser) ********************/
502 text-decoration: none
;
506 padding: 0 5px 0 2px;
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 */
524 td
.modesel_c
, td
.modesel_c_hi
{
526 vertical-align: middle
;
538 border-bottom: 2px solid
#c0c0c0;
541 a
.modesel
, a
.modesel:visited
, a
.modesel_hi
, a
.modesel_hi:visited
{
544 margin: -3px -2px -1px -2px;
546 /* position: absolute; */
549 a
.modesel:hover
, a
.modesel_hi:hover
{
550 text-decoration: none
;
556 td
.modesel_tl
, td
.modesel_tl_hi
{
571 td
.modesel_tr
, td
.modesel_tr_hi
{
588 td
.modesel_l
, td
.modesel_l_hi
{
594 td
.modesel_t
, td
.modesel_t_hi
{
600 td
.modesel_r
, td
.modesel_r_hi
{
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
; }
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
; }
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
;
645 -moz-border-radius: 3px;
646 -webkit-border-radius: 3px;
647 -khtml-border-radius: 3px;
649 padding: 2px 0 2px 0;
650 font-family: Arial
, sans-serif
;
652 text-decoration: none
;
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
{
670 div
.multilevel_modesel
, div
.multilevel_modesel_active
{
671 margin: -1px auto
0 auto
;
673 div
.multilevel_modesel td
, div
.multilevel_modesel_active td
{
677 div
.multilevel_modesel table
, div
.multilevel_modesel_active table
{
678 margin: 0 auto
0 auto
;
680 div
.multilevel_modesel
{
683 div
.multilevel_modesel_active
{
687 div
.multilevel_modesel_level_1
{
688 border: 1px solid black
;
689 background-color: #c2c2ff;
692 div
.multilevel_modesel_level_2
{
693 border: 1px solid black
;
694 background-color: #9797c7;
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
{
723 span
.paginate_nav_ghosted
{
726 span
.paginate_summary
{
728 span
.paginate_nav_currpage
{
730 border: 1px solid black
;
734 table
.columnar_table
{
735 border: 1px solid
#cccccc;
738 table
.columnar_table_noborder
{
741 td
.columnar_table
, th
.columnar_table
, th
.columnar_table_noborder
{
742 padding: 0.2em 0.6em 0.2em 0.6em;
747 border-bottom: 1px solid
#aaa;
750 caption
.columnar_table
{
756 /* styles for paginated search results pages like bacsearch.pl and markersearch.pl*/
761 text-decoration: none
;
768 /***************************** HOME PAGE STUFF *********************/
769 /*Feel free to use elsewhere if you like. */
777 border-bottom-width:1px;
778 border-top-width:0px;
779 border-left-width:0px;
780 border-right-width:0px;
781 border-color:#999999;
801 background-color:#ffffff;
807 background-color:#f0f0ff;
809 border-color:#999999;
815 background-color:#ccccff;
817 border-color:#999999;
824 background-color:#cccccc;
826 border-color:#999999;
832 background-color:#ffffff;
834 border-color:#999999;
839 background-color:#ffffaa;
841 border-color: #888888;
845 /*********** TOOLBARS W/DROPDOWN MENUS ****************/
848 margin: 0 auto
3px auto
;
860 td
.toolbar_l
, td
.toolbar_r
{
864 background: white url
(/documents/img/toolbar_content_back.gif) repeat-x top left
;
865 padding: 3px 23px 3px 4px;
869 font-family: "Bitstream Vera Sans",Arial
,Helvetica
,sans-serif
;
875 padding: 0 0.35em 0 1em;
878 a
.toolbar_menuname
, a
.toolbar_menuname:link
, a
.toolbar_menuname:visited
{
883 table
.toolbar_popmenu
{
887 border-top: 1px solid
#a6a6a6;
888 border-right: 1px solid
#666666;
889 border-bottom: 2px solid black
;
890 border-left: 1px solid
#666666;
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
;
901 border: 1px solid
#f2f2f2;
902 padding: 0.2em 0.5em 0.2em 0.5em;
909 td
.toolbar_item_title
{
910 padding: 4px 2px 2px 2px;
921 border-top: 1px solid
#cfcfcf;
924 a
.toolbar_item:hover
,
925 a
.toolbar_item_first:hover
{
927 border: 1px solid
#666666;
935 input
.quicksearch
.field
{
936 border: 1px solid
#a0a0a0;
938 padding: 0 0.1em 0 0.15em;
940 font-family: "Charter","Bitstream Vera Serif",Times
,serif
;
945 input
.quicksearch
.imgbutton
{
946 margin: 4px -11px 0 0;
952 /***************************** ODDS AND ENDS ****************************************************/
953 /*If you can't find what you need above, you can make a custom style here. */
959 background-color:#f0f0ff;
961 border-color:#ff0000;
965 table#developer_message_table
{
969 .invisible, .noshow {
975 margin: 0.2em 0 1.3em 0;
976 border: 1px solid gray
;
978 -moz-border-radius: 6px;
979 -webkit-border-radius: 6px;
982 div
.optional_show
> h3
{
991 div
.optional_show
> div
{
993 margin: 0 10px 10px 10px;
995 div
.optional_show
> h3
> .title
{
999 div
.optional_show
> h3
> .icon
{
1000 background-image: url
(/img
/ui-icons
.png
);
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
{
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;
1033 /* vertical-align: top; */
1039 /* font-style: italic; */
1043 margin-bottom: 0.4em;
1047 /* styles for displaying automatic (i.e. BLAST) annotation hits */
1049 vertical-align: middle
;
1052 span
.blasthit_type
{
1061 text-decoration: underline
;
1063 a
.blasthit_db:hover
{
1064 background: #eeeeff;
1067 background: #ccccff;
1068 padding-bottom: 3px;
1070 span
.blasthit_statname
{
1074 span
.blasthit_statname:after
{
1077 span
.blasthit_statval
{
1081 font-family: monospace
;
1086 background: #EDEDFF;
1087 vertical-align: middle
;
1089 td
.blasthit_defline
{
1092 background: #f8f8ff;
1093 font-family: monospace
;
1097 vertical-align: middle
;
1102 border: 1px solid
#cccccc;
1107 /* styles for little info tables generated with CXGN::FormattingHelpers::info_table_html */
1108 table
.sub_info_table
,
1110 border: 1px solid
#DDDDDD;
1114 table
.sub_info_table_noborder
,
1115 table
.info_table_noborder
{
1120 table
.sub_info_table
,
1121 table
.sub_info_table_noborder
{
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
{
1136 span
.sub_info_table_fieldname
{
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
{
1156 padding-left: 2.5em;
1160 caption
.sub_info_table
{
1161 caption-side: bottom
;
1163 span
.subinfo:after
{
1168 /* styles for numerical range input in FormattingHelpers */
1175 vertical-align: middle
;
1178 /* Styles for SOL forum */
1181 background-color:#f0f0ff;
1183 border-color:#999999;
1190 background-color:#ffffee;
1193 border-color:#999999;
1197 /* styles for gbrowse (CGI::Toggle) */
1198 .el_hidden {display:none
}
1199 .el_visible {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
{
1223 border: 1px solid gray
;
1227 div
.publication_embedded
.citation
{
1239 #affiliated_sites ul
{
1243 #affiliated_sites li
{
1244 padding-bottom: 1em;
1247 /* styles for standard renderings of CrossReference objects */
1253 list-style: none outside none
;
1256 div
.xref_rich_gbrowse2
{
1259 -moz-border-radius: 6px;
1260 -webkit-border-radius: 6px;
1261 border: 1px outset
#666;
1262 padding-bottom: 8px;
1265 div
.xref_rich_gbrowse2 hr
{
1269 div
.xref_rich_gbrowse2 img
{
1275 /* styles for jquery.simpletooltip */
1279 border: 1px solid
#A6A7AB;
1280 background: #F2F3F5;
1283 #page_report_a_problem {
1284 margin: 20px 0 -10px 1px;
1289 #page_report_a_problem a
{
1296 /* cassavabase additions */
1309 font-family: 'Lato', sans-serif
;
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
; }
1327 display: inline-block
;
1329 padding: 4px 10px 4px;
1337 vertical-align: middle
;
1339 background-color: #9E75BF;
1340 *background-color: #9E75BF;
1341 border: 1px solid
#cccccc;
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;
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
;
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
; }
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
; }
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
;
1415 .is-padded {padding: 20px 10px; }
1417 .photo {margin:20px;}
1419 .pull-right {float: right
;}
1420 .pull-left {float: left
;}
1423 background: url
("/static/img/cross-pattern.png") repeat
; color: #333333;