initial commit.

theme/css/combination_tracks.css

@@ -0,0 +1,38 @@
+
+.combination_track.empty, .combination_track.empty.pinned {
+    background: #aaa;
+    background: rgba(0,0,0,0.1);
+}
+
+.combinationDialog .formulaPreview {
+    text-align: center;
+    background-color: white;
+    border: 1px solid black;
+    padding: 20px 0;
+    line-height: 25px;
+}
+
+.formulaPreview .tree {
+}
+
+.formulaPreview .leaf {
+    /* background: #A1F0A1; */
+    /* /\* margin: 0 1px; *\/ */
+    padding: 0 4px;
+    text-decoration: underline;
+    /* border: 1px solid #0DCA0D; */
+    /* white-space: nowrap; */
+}
+
+.formulaPreview .leaf.highlighted {
+    background-color: #BBB;
+}
+
+.formulaPreview .op {
+    /* font-weight: bold; */
+    /* color: #FFF; */
+    /* background: #000; */
+    /* /\* padding: 0 7px; *\/ */
+    /* z-index: 10; */
+    /* font-size: 120%; */
+}

theme/css/export_dialog.css

@@ -0,0 +1,10 @@
+.export-view-dialog .dijitDialogPaneContent {
+    background: #fafafa;
+}
+
+.export-view-dialog .save {
+    display: inline-block;
+    border: 1px solid #AFAFAF;
+    padding: 2px 5px 2px 0px;
+}
+

theme/css/faceted_track_selector.css

@@ -0,0 +1,271 @@
+/* Dojo and Dijit stuff */
+
+@import url("src/dojox/grid/resources/tundraGrid.css");
+
+.dojoxGrid table {
+  margin: 0;
+}
+.dojoxGridRowSelectorStatusText {
+    display: none;
+}
+
+/* JBrowse stuff */
+
+#faceted_tracksel {
+    position: fixed;
+    top: 0;
+    left: 0;
+    height: 100%;
+}
+
+#faceted_tracksel.active {
+    -moz-box-shadow: 4px 4px 10px 3px rgba( 30, 30, 50, 0.3 );
+    -webkit-box-shadow: 4px 4px 10px 3px rgba( 30, 30, 50, 0.3 );
+    box-shadow: 4px 4px 10px 3px rgba( 30, 30, 50, 0.3 );
+}
+
+#faceted_tracksel button, #faceted_tracksel input {
+    font-size: 12px;
+}
+
+#faceted_tracksel div.mainContainer {
+    height: 100%;
+    width: 100%;
+}
+.tundra #faceted_tracksel div.mainContainer {
+    border-right: 2px solid #555;
+    background: #e9e9e9;
+}
+
+/* Track grid */
+
+#faceted_tracksel .dojoxGridCellFocus {
+    border-color: transparent;
+    border-color: transparent !important;
+}
+#faceted_tracksel .gridPane .gridControls {
+    padding: 2px 3px;
+    font-size: 110%;
+}
+.tundra #faceted_tracksel .gridPane .gridControls {
+    background: #e9e9e9;
+    border: 1px solid #aaa;
+    border-right: none;
+}
+
+#faceted_tracksel .gridPane .gridControls > * {
+    margin: 2px 3px;
+    display: inline-block;
+    vertical-align: middle;
+}
+#faceted_tracksel .gridPane .gridControls button {
+    height: 2.2em;
+    margin: 4px;
+    white-space: nowrap;
+}
+#faceted_tracksel .gridPane .gridControls button > * {
+    display: inline-block;
+    vertical-align: middle;
+}
+#faceted_tracksel .gridPane .gridControls button img {
+    padding: 0 0.4em 0 0;
+}
+#faceted_tracksel.busy .gridControls .busy_indicator {
+    visibility: visible;
+}
+#faceted_tracksel .gridControls .busy_indicator {
+    z-index: 20;
+    visibility: hidden;
+}
+
+
+#faceted_tracksel label.textFilterControl img.text_filter_clear {
+    display: none;
+}
+#faceted_tracksel label.textFilterControl.selected img.text_filter_clear {
+    display: block;
+}
+#faceted_tracksel label.textFilterControl input {
+    border-top: 3px solid transparent;
+    font-weight: bold;
+    padding: 0.2em;
+}
+#faceted_tracksel label.textFilterControl.selected input {
+    border-top: 3px solid #396494;
+    background: #D2E1F1;
+}
+
+/* Track selector title bar */
+#faceted_tracksel_top {
+    border-bottom: 1px solid #ccc;
+    padding: 5px;
+}
+.tundra #faceted_tracksel_top {
+    background: #396494;
+}
+.tundra #faceted_tracksel_top .topLink {
+    color: white;
+}
+
+#faceted_tracksel_top > * {
+    display: inline-block;
+    vertical-align: middle;
+    margin-left: 5px;
+}
+#faceted_tracksel_top .title {
+    padding: 0;
+    width: 185px;
+
+    font-weight: bold;
+    color: white;
+    font-size: 180%;
+}
+
+#faceted_tracksel .faceted_tracksel_on_off.tab {
+    position: absolute;
+    top: 5em;
+    left: 100%;
+    z-index: 5;
+
+    padding: 5px 0px;
+    white-space: nowrap;
+
+    cursor: pointer;
+
+    -moz-box-shadow: 4px 4px 10px 2px rgba( 80, 80, 80, 0.3 );
+    -webkit-box-shadow: 4px 4px 10px 2px rgba( 80, 80, 80, 0.3 );
+    box-shadow: 4px 4px 10px 2px rgba( 80, 80, 80, 0.3 );
+}
+#faceted_tracksel div.faceted_tracksel_on_off.tab > * {
+    display: inline-block;
+    vertical-align: middle;
+    padding: 0 6px;
+}
+.tundra #faceted_tracksel .faceted_tracksel_on_off.tab {
+    background: #e9e9e9 url("src/dijit/themes/tundra/images/titleBar.png") top repeat-x;
+    border: 2px solid #666;
+
+    border-top-right-radius: 5px;
+    border-bottom-right-radius: 5px;
+}
+
+
+#faceted_tracksel_top div.topLink {
+    position: absolute;
+    top: 0;
+    right: 0;
+
+    background: none;
+    border: none;
+    color: white;
+    padding: 3px 0.6em;
+
+    font-weight: bold;
+}
+
+
+/* Facet selection controls */
+
+#faceted_tracksel .facetSelect {
+    width: 100%;
+    border-spacing: 0;
+}
+#faceted_tracksel .facetSelect .facetValue {
+    padding: 0.1em 0.4em;
+    cursor: pointer;
+}
+#faceted_tracksel .facetSelect .facetValue > * {
+    vertical-align: top;
+}
+#faceted_tracksel .facetSelect .disabled {
+    color: gray;
+}
+
+#faceted_tracksel .facetSelect .facetValue.disabled {
+    display: none;
+}
+#faceted_tracksel .facetSelect .facetValue.disabled.selected {
+    display: table-row;
+}
+
+.tundra #faceted_tracksel .facetSelect .facetValue:hover {
+    background: #D2E1F1;
+}
+
+#faceted_tracksel .facetSelect .facetValue .count {
+    padding: 0 0.7em 0 0.4em;
+    color: #333;
+    text-align: right;
+}
+#faceted_tracksel .facetSelect .facetValue .value {
+    width: 80%;
+}
+
+#faceted_tracksel .facetSelect .selected {
+    background: #b1d3f6;
+}
+.tundra #faceted_tracksel .facetSelect .facetValue.selected,
+.tundra #faceted_tracksel .facetSelect .facetValue.selected:hover {
+    background: #AEC7E3;
+}
+
+
+#faceted_tracksel .dijitContentPane{
+    padding: 0;
+}
+#faceted_tracksel .dijitTitlePane .dijitTitlePaneTitle {
+    padding: 0;
+}
+#faceted_tracksel .dijitTitlePaneTitleFocus {
+    position: relative;
+}
+.tundra #faceted_tracksel .dijitTitlePaneTitleFocus {
+    border-top: 3px solid transparent;
+    padding: 2px 2px 2px 0.6em;
+    color: #1B3047
+}
+#faceted_tracksel .dijitOpen .facetTitle {
+    font-weight: bold;
+    color: black;
+}
+
+#faceted_tracksel .activeFacet .facetTitle {
+    font-weight: bold;
+    color: black;
+}
+.tundra #faceted_tracksel .activeFacet {
+    border-top: 3px solid #396494;
+    background-color: #AEC7E3;
+}
+
+#faceted_tracksel .facetTitle a {
+    position: absolute;
+    top: 2px;
+    right: -4px;
+    visibility: hidden;
+}
+#faceted_tracksel .activeFacet a.clearFacet {
+    visibility: visible;
+    padding: 1px 6px;
+}
+
+#faceted_tracksel .dijitTitlePaneContentInner {
+    padding: 0px;
+}
+
+
+/* styling specifically for the title of the first facet title, which is 'My Tracks' */
+.tundra #faceted_tracksel .myTracks .facetTitle:after {
+    content: url("src/dijit/themes/tundra/images/circleIcon.png");
+    margin-left: 7px;
+}
+#faceted_tracksel .myTracks .facetTitle {
+    color: black;
+    font-weight: bold;
+    padding-bottom: 6px;
+}
+
+/* style the 'empty' and similar messages that show up in the grid master pane */
+#faceted_tracksel .dojoxGridMasterMessages {
+    font-size: 16px;
+}

theme/css/file_dialog.css

@@ -0,0 +1,141 @@
+@import url("src/dojox/form/resources/UploaderFileList.css");
+.fileDialog {
+    color: #333;
+}
+
+.fileDialog label {
+    font-weight: bold;
+    padding: 0 0.5em;
+}
+.fileDialog th {
+    font-weight: bold;
+    border-bottom: 2px solid black;
+}
+.fileDialog .dijitDialogPaneContent > div.intro {
+    width: 27em;
+    text-align: justify;
+    position: relative;
+    left: 12%;
+    margin: 1.4em 0 2.4em 0;
+}
+
+.fileDialog .connector {
+    background: #333;
+    height: 6px;
+    width: 12px;
+    position: absolute;
+
+    bottom: -6px;
+    left: 50%;
+    margin-left: -6px;
+}
+
+.fileDialog h2, .fileDialog h3 {
+    margin: 0;
+    padding: 0;
+    font-size: 125%;
+}
+
+.fileDialog .dijitDialogPaneContent > div {
+    position: relative;
+
+    width: 40em;
+    padding: 0 0 0.75em 0;
+    margin: 6px 0;
+}
+.fileDialog div.aux {
+    text-align: center;
+    margin-bottom: 1em;
+}
+.fileDialog .resourceControls {
+    height: 10em;
+    position: relative;
+}
+.fileDialog .resourceControls > div {
+    width: 19.5em;
+    box-sizing: border-box;
+    height: 100%;
+}
+.fileDialog .resourceControls > div > h3 {
+    height: 19%;
+}
+
+.fileDialog .localFilesControl {
+    position: absolute;
+    top: 0;
+    left: 0;
+}
+
+.fileDialog .dijitUploader {
+    position: absolute;
+    margin: 0;
+}
+
+.fileDialog .remoteURLsControl textarea,
+.fileDialog .localFilesControl .dragArea {
+    height: 81%;
+    position: relative;
+    border: 1px solid #b3b3b3;
+    width: 100%;
+    box-sizing: border-box;
+}
+.fileDialog .localFilesControl .dragArea:hover {
+    border: 1px dashed green;
+}
+
+.fileDialog .localFilesControl .dragArea .dragMessage {
+    height: 2em;
+    position: absolute;
+    top: 60%;
+    font-weight: bold;
+    margin-top: -1em;
+    text-align: center;
+    width: 100%;
+}
+.fileDialog .remoteURLsControl textarea {
+    font-size: 10px;
+    background: #f2f2f2;
+}
+.fileDialog .remoteURLsControl textarea:hover {
+    background: white;
+    border-color: #333;
+}
+
+.fileDialog .remoteURLsControl {
+    position: absolute;
+    top: 0;
+    right: 0;
+}
+
+.fileDialog .resourceList {
+    background: #bcd3ef;
+}
+
+.fileDialog .dijitSelect td.dijitStretch {
+    width: 6em;
+}
+.fileDialog .resourceList > h3, .fileDialog .trackList > h3 {
+     padding: 0 0.6em;
+     line-height: 2.1;
+     margin-bottom: 0.5em;
+}
+
+.fileDialog .emptyMessage {
+    width: 100%;
+    font-size: 110%;
+    color: #686868;
+    font-weight: bold;
+    text-align: center;
+    line-height: 4;
+}
+
+.fileDialog .trackList {
+    background: #8cb1dd;
+}
+
+.fileDialog .resourceList > table, .fileDialog .trackList > table {
+    width: 95%;
+    padding: 0 0.75em 0.5em 0.75em;
+    margin: 0 auto;
+    border-collapse: collapse;
+}

theme/css/genome.css

@@ -0,0 +1,21 @@
+/* main application CSS styles */
+@import url("src/dijit/themes/tundra/tundra.css");
+@import url("src/dojo/resources/dojo.css");
+
+@import url("main.css");
+@import url("sequence.css");
+@import url("menubar.css");
+@import url("icons.css");
+@import url("tristate.css");
+@import url("file_dialog.css");
+@import url("combination_tracks.css");
+@import url("export_dialog.css");
+
+/* CSS styles for the various types of feature glyphs */
+@import url("track_styles.css");
+@import url("hierarchical_track_selector.css");
+@import url("faceted_track_selector.css");
+
+
+/* CSS styles specifically for MAKER output */
+@import url("maker.css");

theme/css/hierarchical_track_selector.css

@@ -0,0 +1,57 @@
+.jbrowseHierarchicalTrackSelector {
+    background: #fafafa;
+    overflow: auto;
+}
+.jbrowseHierarchicalTrackSelector > .header > h2.title {
+    padding: 7px 0 0.5em 6px;
+    margin: 0;
+}
+.jbrowseHierarchicalTrackSelector .trackCount {
+    display: inline-block;
+    float: right;
+}
+
+.jbrowseHierarchicalTrackSelector > .header > .textfilterContainer {
+    padding: 0 5px 5px 5px;
+}
+.jbrowseHierarchicalTrackSelector > .header > .textfilterContainer > .textfilter {
+    margin: 0;
+}
+
+.jbrowseHierarchicalTrackSelector .dijitTitlePaneTitle {
+    padding: 0 4px;
+}
+
+.jbrowseHierarchicalTrackSelector .dijitTitlePaneTitleFocus:focus {
+    outline: none;
+}
+
+.jbrowseHierarchicalTrackSelector label.tracklist-label {
+    display: block;
+}
+.jbrowseHierarchicalTrackSelector > .uncategorized {
+    background: white;
+    padding: 10px;
+    border: 1px solid #bfbfbf;
+}
+.jbrowseHierarchicalTrackSelector label.tracklist-label:hover {
+    background: #D2E1F1;
+}
+.jbrowseHierarchicalTrackSelector label.tracklist-label.collapsed {
+    display: none;
+}
+
+.jbrowseHierarchicalTrackSelector label.tracklist-label input.check {
+    position: relative;
+    top: 2px;
+    margin: 0 4px;
+}
+.dj_safari .jbrowseHierarchicalTrackSelector label.tracklist-label input.check {
+    top: 0;
+}
+
+#hierarchicalTrackPane_splitter {
+    background: #fafafa;
+    width: 5px;
+    border-right: 1px solid #555;
+}

theme/css/icons.css

@@ -0,0 +1,42 @@
+.jbrowseIconHelp,
+.jbrowseIconBusy,
+.jbrowseIconLink,
+.jbrowseIconCancel,
+.jbrowseIconHorizontalResize,
+.jbrowseIconVerticalResize
+{
+    background-image: url('img/commonIconsEnabled.png');
+    width: 16px;
+    height: 16px;
+}
+
+.dijitDisabled .jbrowseIconHelp,
+.dijitDisabled .jbrowseIconBusy,
+.dijitDisabled .jbrowseIconLink,
+.dijitDisabled .jbrowseIconCancel,
+.dijitDisabled .jbrowseIconHorizontalResize,
+.dijitDisabled .jbrowseIconVerticalResize
+{
+    background-image: url('img/commonIconsDisabled.png');
+    width: 16px;
+    height: 16px;
+}
+
+.jbrowseIconHelp {
+    background-position: 0;
+}
+.jbrowseIconLink {
+    background-position: -152px;
+}
+.jbrowseIconCancel {
+    background-position: -170px;
+}
+.jbrowseIconBusy {
+    background-image: url('img/spinner.gif');
+}
+.jbrowseIconHorizontalResize {
+    background-position: -209px;
+}
+.jbrowseIconVerticalResize {
+    background-position: -230px;
+}

theme/css/main.css

@@ -0,0 +1,1055 @@
+html, body {
+    height: 100%;
+    width: 100%;
+    padding: 0;
+    border: 0;
+    font-size: 12px;
+    font-family: Univers,Trebuchet MS,Helvetica,Arial,sans-serif;
+}
+
+
+.tundra .dijitDialogTitleBar {
+    padding-right: 25px;
+}
+
+.jbrowseStandaloneDatasetSelector {
+    margin-left: 2em;
+    font-size: 120%;
+}
+
+/* styles for the about JBrowse dialog */
+.about-dialog .default_about {
+    text-align: center;
+}
+.about-dialog .default_about * {
+    margin: 0.5em 0;
+}
+.about-dialog .default_about h1 {
+    margin-top: 0;
+}
+.about-dialog div.powered_by {
+    margin-top: 0.5em;
+    text-align: center;
+}
+
+/* styles for the highlight-setting dialog */
+.setHighlightDialog label {
+    padding-right: 0.5em;
+}
+
+.track .global_highlight {
+    position: absolute;
+    background: rgba( 255, 255, 0, 0.7 );
+    box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    -ms-box-sizing: border-box;
+
+    border: 1px solid rgb(255, 178, 13);
+    border-width: 0;
+}
+.track .global_highlight.left {
+    border-left-width: 1px;
+}
+.track .global_highlight.right {
+    border-right-width: 1px;
+}
+
+
+.tundra input {
+    outline: none;
+}
+
+.ghosted {
+    color: #aaa;
+}
+
+fieldset {
+    padding-left: 1em;
+    margin: 0.7em 0.5em;
+}
+fieldset > legend {
+    font-weight: bold;
+    margin-left: -1em;
+}
+
+.locString {
+    font-family: Courier New,monospace;
+}
+.fasta {
+    font-family: Courier New,monospace;
+    font-size: 14px;
+}
+
+/* styles for the autocomplete menu */
+.dijitComboBoxMenu .locString, .dijitComboBoxMenu .multipleLocations {
+    margin-left: 1em;
+}
+.dijitComboBoxMenu .multipleLocations {
+    color: #333;
+}
+
+/* location choice dialog */
+.locationChoiceDialog div.prompt {
+    margin: 0.3em 1em 1em 1em;
+}
+.locationChoiceDialog .dgrid-row .dijitButton {
+    margin: 0 0.5em;
+}
+.locationChoiceDialog .goButtonColumn,
+.locationChoiceDialog .showButtonColumn {
+    text-align: center;
+    white-space: nowrap;
+}
+
+
+.tundra .dijitDialogCloseIcon {
+    height: 25px;
+    width:  25px;
+    top:    0px;
+    right:  0px;
+    background: url("img/commonIconsEnabled.png") no-repeat -73px 6px;
+
+    border-left: 1px inset #fcfcfc;
+}
+.tundra .dijitDialogCloseIcon:hover {
+    background-position: -93px 6px;
+    border-left-color: #ccc;
+}
+.dijitDialogCloseIcon:focus {
+    outline: none;
+}
+
+.dijitDialogPaneActionBar {
+    text-align: center;
+    clear: both;
+    padding-top: 1em;
+}
+
+.nav {
+    vertical-align: middle;
+    z-index: 10;
+}
+
+input.icon {
+    display: -moz-inline-stack;
+    display: inline-block;
+    zoom: 1;
+}
+
+div.container {
+    position: absolute;
+    z-index: 0;
+}
+
+div.dragWindow {
+    position:absolute;
+    overflow: hidden;
+    z-index: 1;
+}
+
+div.vertical_scrollbar {
+    width: 6px;
+    background: #eee;
+    background: rgba(235, 235, 235, 0.62);
+    border-left: 1px solid #DDD9D9;
+}
+div.vertical_scrollbar .vertical_position_marker {
+    background: #555;
+    opacity: 0.8;
+    border-radius: 5px;
+    width: 100%;
+    border-right: 1px solid #ccc;
+}
+
+.draggable {
+    cursor: move;
+}
+.rubberBandAvailable {
+    cursor: crosshair;
+}
+
+#navbox {
+    padding-top: 3px;
+    position: relative;
+    text-align: center;
+}
+#navbox .dijitButton, #navbox .dijitToggleButton, #navbox .dijitTextBox, #navbox .dijitSelect, #navbox .dojoxTriStateCheckBox {
+    height: 20px;
+    box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    -ms-box-sizing: border-box;
+}
+
+#navbox .dijitSelectLabel {
+    padding: 0 2px;
+}
+
+#navbox .dijitTextBox .dijitInputField {
+    padding-left: 2px;
+}
+
+#navbox * {
+    font-size: 12px;
+    font-family: sans-serif;
+}
+
+.moreMatches {
+    font-style: italic;
+    color: #aaa;
+}
+.moreMatches.dijitMenuItemSelected {
+    background: none;
+    color: #ccc;
+    cursor: default;
+}
+
+div.locationTrapContainer {
+    position: absolute;
+    z-index: -11;
+    height: 100%;
+    width: 100%;
+    top: 0;
+    left: 0;
+    background-color: white;
+}
+
+div.locationTrap {
+    position: absolute;
+    z-index: -10;
+    height: 0;
+    top: 0;
+    left: 0;
+    border-color: transparent;
+    border-style: solid;
+    border-bottom-color: #A9C6EB;
+    border-top: 0px dotted transparent;
+}
+
+div.locationThumb {
+    position: absolute;
+    top: 0px;
+    /* if you change this border from 2px, change GenomeView.showTrap */
+    border: 2px solid red;
+    margin: 0px -2px 0px -2px;
+    height: 23px;
+    cursor: move;
+    background: rgba(0, 121, 245, 0.1);
+}
+
+div.locationThumb.dojoMoveItem {
+    cursor: move;
+}
+
+div.topLink {
+    position: absolute;
+    right: 0;
+    top: 0;
+    z-index: 50;
+    background: white;
+    border: 1px solid #888;
+    border-width: 0 0 1px 1px;
+}
+
+a.topLink {
+    padding: 0 0.5ex 0 0.5ex;
+    text-decoration: none;
+    color: blue;
+}
+
+div.overview {
+    position: relative;
+    width: 100%;
+    padding: 0;
+    z-index: -5;
+    display: block;
+    height: 23px;
+
+    background: #FAFAFA url(src/dijit/themes/tundra/images/titleBar.png) repeat-x top left;
+
+    border-style: solid;
+    border-width: 1px 0px 1px 0px;
+    border-color: #555;
+
+    color:#aaa;
+    text-align: center;
+    cursor: crosshair;
+}
+
+div.block {
+    position: absolute;
+    overflow: visible;
+    top: 0px;
+    height: 100%;
+}
+div.block.height_overflow .height_overflow_message {
+    position: absolute;
+    color: rgb(77,77,77);
+    border-bottom: 2px solid rgb(77,77,77);
+    text-shadow: white 0px 0px 1px;
+    white-space: nowrap;
+    width: 100%;
+    font-weight: bold;
+    text-align: center;
+    z-index: 2000;
+
+    box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    -ms-box-sizing: border-box;
+}
+div.block.timed_out {
+    background: #ddd;
+    background: rgba( 0,0,0, 0.1 );
+}
+
+div.track {
+    position: absolute;
+    left: 0px;
+    width: 100%;
+    padding: 0;
+    margin: 0;
+    z-index: 0;
+
+    border-top: 1px solid #fafafa;
+    box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    -ms-box-sizing: border-box;
+}
+div.pin_underlay {
+    width: 100%;
+    position: absolute;
+    background: white;
+    z-index: 6;
+
+    -moz-box-shadow: 0 0 10px 0 rgba( 30, 30, 50, 0.9 );
+    -webkit-box-shadow: 0 0 10px 0 rgba( 30, 30, 50, 0.9 );
+    box-shadow: 0 0 10px 0 rgba( 30, 30, 50, 0.9 );
+}
+div.track.pinned {
+    z-index: 20;
+}
+
+.track.dojoDndItemOver {
+    cursor: inherit;
+    background: inherit;
+}
+.track.dojoDndItemAnchor {
+    background: inherit;
+}
+.track.dojoDndItemSelected {
+    background: inherit;
+}
+
+.track.dojoDndItemBefore {
+    border-top: 3px solid #999;
+    margin-top: -3px;
+}
+
+.track.dojoDndItemAfter {
+    border-bottom: 3px solid #999;
+    margin-bottom: -3px;
+}
+
+div#static_track {
+    top: 0px;
+    position: absolute;
+    background: #FAFAFA url(src/dijit/themes/tundra/images/titleBar.png) repeat-x top left;
+    border-top: 1px solid #999;
+    border-bottom: 1px solid #444;
+    z-index: 20;
+}
+
+div.gridline {
+    position: absolute;
+    left: 0px;
+    top: 0px;
+    width: 0px;
+    height: 100%;
+    border-style: none none none solid;
+    border-width: 1px;
+    border-color: red;
+    z-index: 0;
+}
+div.gridline_major {
+    border-color: #bbb;
+}
+div.gridline_minor {
+    border-color: #eee;
+}
+
+div.pos-label {
+    position: absolute;
+    left: -0.35em;
+    top: 0px;
+    z-index: 100;
+    font-family: sans-serif;
+}
+
+div.overview-pos {
+    position: absolute;
+    left: 0px;
+    top: 0.27em;
+    color: black;
+    padding-left: 4px;
+    font-family: sans-serif;
+    border: 0;
+    z-index: 10;
+}
+div.overview-pos:first-child {
+    margin-left: 1px;
+}
+
+div.blank-block {
+    font-family: sans-serif;
+    position: absolute;
+    overflow: visible;
+    top: 0px;
+    height: 100%;
+    background-color: white;
+    z-index: 19;
+}
+
+div.track-border {
+    background: #eee;
+    width: 100%;
+    height: 2px;
+    top: -8px;
+}
+
+div.track-label, div.tracklist-label {
+    z-index: 20;
+
+    padding: 1px 6px;
+    overflow: hidden;
+    cursor: pointer;
+
+    border-width: 1px;
+    border-style: solid;
+    border-color: #999;
+
+    color: #111;
+    font-weight: bold;
+}
+
+div.tracklist-label {
+    white-space: nowrap;
+    overflow: hidden;
+    margin-top: -1px;
+}
+
+div.tracklist-label.collapsed {
+    height: 3px;
+    padding: 0;
+
+    box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    -ms-box-sizing: border-box;
+}
+
+/* NOTE: browsers that don't support rgba colors will fall back to all
+   track labels being #bcbcbc */
+
+.notfound-dialog .message {
+    margin: 1em;
+    text-align: center;
+}
+
+.track .loading {
+    background: #fafafa;
+    color: #777;
+    margin: 0;
+    font-weight: bold;
+    height: 100%;
+    width: 100%;
+    z-index: 15;
+    position: absolute;
+}
+.track .loading .text {
+    display: inline;
+    line-height: 40px;
+    margin: 1em;
+}
+
+div.track-label {
+    color: black;
+    margin: -1px 0 0 -1px;
+    overflow: visible;
+    background: white;
+    padding: 0 5px;
+
+    height: 23px;
+    line-height: 23px;
+
+    z-index: 20;
+    border-color: #eee;
+    opacity: 0.7;
+
+    /* setting white-space to "nowrap" prevents Chrome-specific bug with
+       label text sometimes disappearing after zoom in Chrome was
+       wrapping track-label text to next line, which falls outside of
+       track-label fixed height and therefore not seen. see chromium
+       bug report for more details on underlying issue:
+       http://code.google.com/p/chromium/issues/detail?id=138918
+    */
+    white-space: nowrap;
+}
+
+div.track-label .track-label-text {
+    display: inline-block;
+    white-space: nowrap;
+}
+div.track-label .track-close-button {
+    display: inline-block;
+    vertical-align: top;
+    position: relative;
+    top: 50%;
+    height: 20px;
+    width: 25px;
+    margin: -10px -3px -4px -6px;
+}
+div.track-label .track-menu-button {
+    display: inline-block;
+    position: relative;
+    vertical-align: top;
+    right: -5px;
+    top: 0px;
+
+    width: 24px;
+    height: 100%;
+
+    border-radius: 0 6px 6px 0;
+    border-left: 1px inset transparent;
+
+}
+div.track-label .feature-density {
+    font-size: 90%;
+    font-weight: normal;
+}
+.tundra div.track-label:hover .track-menu-button div {
+    height: 8px;
+    width: 8px;
+    position: absolute;
+    left: 8px;
+    top: 7px;
+    background: url("img/spriteArrows.png") no-repeat -28px 0;
+}
+
+.tundra div.track-label:hover .track-menu-button:hover {
+    background-color: rgba( 0, 0, 100, 0.05 );
+    border-left-color: #ccc;
+}
+.tundra div.track-label .track-close-button {
+    background: url("src/dijit/themes/tundra/images/tabClose.png") no-repeat 40% 50%;
+}
+.tundra div.track-label .track-close-button:hover {
+    background-image: url("src/dijit/themes/tundra/images/tabCloseHover.png");
+}
+.tundra div.track-label:hover .track-menu-button:hover div {
+    background-position-x: 0px;
+}
+div.track-label:hover {
+    background: #FAFAFA url(src/dijit/themes/tundra/images/titleBar.png) repeat-x top left;
+
+    border-width: 1px;
+    border-color: #666;
+    border-color: rgba( 0,0,0, 1);
+
+    background-color: #ddd;
+    opacity: 1.0;
+}
+
+div.tracklist-label {
+    padding: 3px;
+    background-color: #ddd;
+    background-color: rgba( 220, 220, 220, 0.9 );
+}
+div.tracklist-label:hover {
+    background-color:  #396494;
+    border: 1px solid black;
+}
+
+div.tracklist-container.dojoDndItemSelected {
+    background-color:  #396494;
+    background-color: rgb(110, 132, 156)
+}
+div.tracklist-container.dojoDndItemSelected .tracklist-label {
+    background-color: #b2c3d6;
+}
+
+.jbrowseSimpleTrackSelector {
+    background: #f2f2f2;
+    background-image: url('img/tracklist_bg.png');
+    background-repeat: repeat-y;
+    background-position: right;
+}
+.jbrowseSimpleTrackSelector h2 {
+    margin: 0.5em 0 0 0.5em;
+}
+
+div.textfilter {
+    margin: 0.5em 0 1em 0.3em;
+}
+div.textfilter input {
+    padding: 2px 0 2px 18px;
+    width: 100%;
+    height: 100%;
+
+    box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    -ms-box-sizing: border-box;
+}
+div.textfilter > div.jbrowseIconCancel {
+    position: absolute;
+    left: 5px;
+    margin-top: -6px;
+    top: 50%;
+}
+
+#trackPane_splitter {
+    background: #dcdcdc;
+    width: 5px;
+    border-right: 1px solid #555;
+}
+
+div.tracklist-container {
+    padding: 0 4px;
+}
+
+.tracklist-container.dojoDndItemBefore {
+    border-top: 3px solid #999;
+    padding-top: 2px;
+}
+
+.tracklist-container.dojoDndItemAfter {
+    border-bottom: 3px solid #999;
+    padding-bottom: 2px;
+}
+
+/* styles for feature labels */
+.feature-label {
+    position: absolute;
+    border: 0px;
+    margin: -2px 0px 0px 0px;
+    /* padding: 0px 0px 2px 0px; for more space below labels */
+    padding: 0px 0px 0px 0px;
+    /* font-size: 80%; */
+    white-space: nowrap;
+    z-index: 12;
+    cursor: pointer;
+}
+a.feature-label {
+    color: black;
+}
+.feature-description {
+    color: blue;
+    margin-top: -0.2em;
+}
+.feature-label.highlighted {
+    background: rgba( 255, 255, 0, 0.7 );
+    font-weight: bold;
+    border: 1px solid red;
+    padding: 0 2px;
+}
+
+.rubber-highlight {
+    border: 1px solid black;
+    height: 100%;
+    border-color: rgba( 0, 0, 0, 0.6 );
+    background-color: #8087ff;
+    background-color: rgba( 128, 136, 255, 0.6 );
+    padding: 0;
+    margin: 0;
+    overflow: hidden;
+    cursor: crosshair;
+}
+.rubber-highlight div {
+    color: white;
+    padding: 0;
+    margin-top: 30px;
+    font-size: 160%;
+    text-align: center;
+    font-weight: bold;
+    text-shadow: #6374AB 1px 1px 0;
+}
+div.overview .rubber-highlight {
+    font-size: 0;
+    height: 100%;
+    border-top: none;
+    border-bottom: none;
+}
+div.overview .rubber-highlight * {
+    display: none;
+}
+
+.icon.nav {
+    height: 30px !important;
+}
+
+
+#moveLeft, #moveRight, #bigZoomOut, #zoomOut, #bigZoomIn, #zoomIn, #moveLeftSmall, #moveRightSmall, #zoomInSmall, #zoomOutSmall{
+		background: url(img/scroll_zoom_sprites.png) top left no-repeat;
+		background-size: 50px 280px;
+		cursor: pointer;
+}
+
+
+#moveLeft{
+	background-position: 5px -35px;
+	width:55px;
+}
+
+#moveLeftSmall {
+	background-position: 0px -200px;
+	height: 20px !important;
+	width: 33px;
+}
+
+#moveRight{
+	background-position: 0px -135px;
+	width:55px;
+}
+
+#moveRightSmall {
+	background-position: 0px -220px;
+	height: 20px !important;
+	width: 33px;
+}
+
+#bigZoomOut{
+	background-position: 0px -168px;
+	width:35px;
+}
+
+#zoomOut{
+	background-position: 0px -100px;
+	width: 30px;
+}
+
+#zoomOutSmall{
+	background-position: 0px -240px;
+	height: 20px !important;
+	width: 20px;
+}
+
+
+#bigZoomIn{
+	background-position: 0px -69px;
+	width:35px;
+}
+
+#zoomIn{
+	background-position: 0px -2.5px;
+	width: 30px;
+}
+
+#zoomInSmall{
+	background-position: 0px -260px;
+	height: 20px !important;
+	width: 20px;
+}
+
+
+
+input.nav {
+    font-size: 9px !important;
+}
+
+.help_dialog ul {
+    padding-left: 0;
+}
+.help_dialog div.main {
+}
+.help_dialog div.main > dl {
+    width: 90%;
+    margin: 0 auto 1em auto;
+}
+.help_dialog dt {
+    font-weight: bold;
+    margin-top: 1em;
+}
+.help_dialog dd {
+    margin-left: 2em;
+}
+.help_dialog dl dl.searchexample dt,
+.help_dialog span.example {
+    font-weight: normal;
+    font-family: monospace;
+}
+
+.fatal_error {
+    font-size: 14px;
+    margin: 1em;
+}
+div.error, div.message {
+    margin: 1px 1em;
+    padding: 2px 6px;
+    border: 1px outset rgba( 0, 0, 0, 0.3 );
+}
+div.error {
+    background: #ff8888;
+}
+div.track > div.error {
+    width: 30em;
+    position: absolute;
+}
+div.error h2 {
+    margin-top: 0;
+}
+
+div.error .codecaption {
+    font-size: 90%;
+    font-weight: bold;
+    margin-top: 1em;
+    margin-left: 0.2em;
+}
+div.error code {
+    display: block;
+    font-size: 10px;
+    padding: 0.4em 1.2em;
+    margin: 0 0.3em 0.3em 0.3em;
+    overflow: auto;
+    max-height: 6em;
+}
+div.message {
+    background: #eee;
+}
+div.block > div.message {
+    margin: 1em 0;
+    position: absolute;
+}
+div.block:hover > div.message {
+    z-index: 30000;
+}
+
+.tundra .dijitDialogPaneContent {
+    border-top: 1px solid #acacac;
+    font-family: sans-serif;
+}
+
+/* styles dealing with popups launched by clicking on features */
+.popup-dialog-iframe .dijitDialogPaneContent {
+    padding: 0;
+}
+
+/* styles for popup dialogs */
+a.dialog-new-window {
+    padding-left: 1em;
+    font-size: 90%;
+}
+
+/* styles for popup feature detail dialogs from tracks */
+.feature-detail {
+    width: 50em;
+    color: #333;
+}
+.feature-detail .genotype_summary {
+    padding: 1em;
+}
+.feature-detail .genotype_summary table {
+    border-collapse: collapse;
+}
+.feature-detail .genotype_summary td {
+    padding: 0 1em;
+}
+.feature-detail .genotype_summary td.total {
+    font-weight: bold;
+    border-top: 1px solid #444;
+}
+.feature-detail .genotype_summary td.count, .feature-detail .genotype_summary td.pct {
+    text-align: right;
+}
+.feature-detail .genotype_summary td.category.level_1 {
+    padding-left: 2em;
+}
+.feature-detail .genotype_summary td.category.level_2 {
+    padding-left: 3em;
+}
+.feature-detail .genotype_summary td.category.level_3 {
+    padding-left: 4em;
+}
+.feature-detail .genotype_summary td.category.level_4 {
+    padding-left: 5em;
+}
+
+.feature-detail .subfeature-detail {
+    background: #fafafa;
+    background: rgba( 0, 0, 0, 0.1 );
+    border: 1px outset #B9B9B9;
+    padding: 0.6em;
+    margin-bottom: 0.8em;
+}
+
+.feature-detail .fastaView {
+    padding: 0;
+    border: 1px solid #aaa;
+}
+
+.feature-detail .fastaView .dijitToolbar {
+    text-align: right;
+}
+.feature-detail .fastaView textarea {
+    padding: 1em 1.5em;
+    margin: 0;
+    border: none;
+}
+
+
+.feature-detail div.core {
+    font-size: 110%;
+}
+
+.feature-detail div.core h2.sectiontitle {
+    margin-top: 0;
+}
+.feature-detail h2.sectiontitle {
+    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+    margin: 1em 0 0.7em 0;
+}
+
+.detail .value_container {
+    display: inline-block;
+    max-height: 20em;
+    overflow-y: auto;
+    box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    -ms-box-sizing: border-box;
+}
+.detail .value_container.big, .detail .value_container.dgrid {
+    border: 1px solid rgba(0,0,50,0.1);
+    margin-left: 1em;
+    margin-top: 0.3em;
+}
+
+.detail .multi_value .value {
+    border: 1px solid #ddd;
+    box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    -ms-box-sizing: border-box;
+}
+
+.detail .value {
+    display: inline-block;
+    vertical-align: top;
+    font-family: sans-serif;
+    padding: 0 0.7em;
+    line-height: 1.8;
+}
+.detail .field {
+    margin: 0;
+    display: inline-block;
+    min-width: 90px;
+    vertical-align: top;
+    padding: 2px 0.5em;
+    background: rgba( 50, 85, 255,0.1 );
+    border-bottom: 1px solid #D2D4E4;
+    border-bottom-color: rgba( 0, 0, 0, 0.1 );
+    font-size: 1.1667em;
+}
+/* field names that have tooltips */
+.detail .field[title], .detail .dgrid-cell[title] {
+    background: rgba( 255,245,50,0.3 );
+}
+.detail .field[title]:hover, .detail .dgrid-cell[title]:hover {
+    background: rgba( 255,255,50,0.7 );
+}
+/*
+ force long sequences in feature and alignment detail dialogs to
+ wrap at 45em
+*/
+.detail .value.seq,
+ .detail .value.sequence {
+    word-wrap: break-word;
+    width: 45em;
+}
+
+.detail .field_container {
+    margin-left: 1em;
+    margin-bottom: 2px;
+}
+.detail hr {
+    margin: 0.8em 4em 0.5em 0.7em;
+}
+
+.sharePane input {
+    padding: 1px 0 2px 1px;
+}
+.sharePane .copyReminder {
+    background-color:  #396494;
+    text-align: center;
+    width: 50%;
+    margin: 0 auto;
+    color: white;
+    padding: 2px;
+    font-weight: bold;
+}
+
+.tundra .sharePane input {
+    border: 1px solid #ccc;
+}
+
+/*styles for vertical line and BP label*/
+.basePairLabel {
+    color: black;
+    position: fixed;
+    font-weight: bold;
+    font-size: 9px;
+    display: none;
+    background: #fefefe;
+    padding: 0 0.7em;
+    z-index: 1000;
+    text-align: center;
+    cursor: crosshair;
+    border: 1px solid #888;
+}
+
+.basePairLabel.rubber {
+    z-index: 25;
+}
+
+.trackVerticalPositionIndicatorMain {
+    position: fixed;
+    display: none;
+    cursor: crosshair;
+    left: -2px;
+    height: 100%;
+    width: 1px;
+    background-color: #FF0000;
+    z-index: 15;
+    top: 0;
+}
+
+/* styles for per-base quality table in alignment detail pages */
+.baseQuality {
+    font-family: Courier New, monospace;
+}
+table.baseQuality {
+    margin-bottom: 1em;
+}
+table.baseQuality td {
+    padding: 0 0.2em;
+    line-height: 0.95;
+    text-align: center;
+}
+.baseQuality .basePosition {
+    display: inline-block;
+    padding: 0 0.3em 0.4em 0.3em;
+}
+.baseQuality .basePosition:hover {
+    background: #ccc;
+}
+.baseQuality span.seq {
+    display: block;
+    text-align: center;
+    font-weight: bold;
+}
+.baseQuality span.qual {
+    display: block;
+    text-align: center;
+}

theme/css/maker.css

@@ -0,0 +1,197 @@
+/*MAKER CSS with colors for common features*/
+
+/*SNAP*/
+.snap-exon,
+.plus-snap-exon,
+.minus-snap-exon,
+.snap-five_prime_UTR,
+.plus-snap-five_prime_UTR,
+.minus-snap-five_prime_UTR,
+.snap-three_prime_UTR,
+.plus-snap-three_prime_UTR,
+.minus-snap-three_prime_UTR {
+    position: absolute;
+    height: 7px;
+    background-color: #99FFCC;
+    border-style: solid;
+    border-color: #D88;
+    border-width: 2px 0px 2px 0px;
+    z-index: 8;
+    min-width: 1px;
+    cursor: pointer;
+}
+
+/*Augustus*/
+.augustus-exon,
+.plus-augustus-exon,
+.minus-augustus-exon,
+.augustus-five_prime_UTR,
+.plus-augustus-five_prime_UTR,
+.minus-augustus-five_prime_UTR,
+.augustus-three_prime_UTR,
+.plus-augustus-three_prime_UTR,
+.minus-augustus-three_prime_UTR {
+    position: absolute;
+    height: 7px;
+    background-color: #FFCCFF;
+    border-style: solid;
+    border-color: #D88;
+    border-width: 2px 0px 2px 0px;
+    z-index: 8;
+    min-width: 1px;
+    cursor: pointer;
+}
+
+/*GeneMark*/
+.genemark-exon,
+.plus-genemark-exon,
+.minus-genemark-exon,
+.genemark-five_prime_UTR,
+.plus-genemark-five_prime_UTR,
+.minus-genemark-five_prime_UTR,
+.genemark-three_prime_UTR,
+.plus-genemark-three_prime_UTR,
+.minus-genemark-three_prime_UTR {
+    position: absolute;
+    height: 7px;
+    background-color: #679B68;
+    border-style: solid;
+    border-color: #D88;
+    border-width: 2px 0px 2px 0px;
+    z-index: 8;
+    min-width: 1px;
+    cursor: pointer;
+}
+
+/*FGENESH*/
+.fgenesh-exon,
+.plus-fgenesh-exon,
+.minus-fgenesh-exon,
+.fgenesh-five_prime_UTR,
+.plus-fgenesh-five_prime_UTR,
+.minus-fgenesh-five_prime_UTR,
+.fgenesh-three_prime_UTR,
+.plus-fgenesh-three_prime_UTR,
+.minus-fgenesh-three_prime_UTR {
+    position: absolute;
+    height: 7px;
+    background-color: #FF99FF;
+    border-style: solid;
+    border-color: #D88;
+    border-width: 2px 0px 2px 0px;
+    z-index: 8;
+    min-width: 1px;
+    cursor: pointer;
+}
+
+/*protein2genome*/
+.protein2genome_part,
+.plus-protein2genome_part,
+.minus-protein2genome_part {
+    position: absolute;
+    height: 4px;
+    margin-top: -2px;
+    background-color: #FFFF00;
+    border-style: solid;
+    border-color: #6E6E6E;
+    border-width: 1px 1px 1px 1px;
+    z-index: 8;
+    min-width: 1px;
+    cursor: pointer;
+}
+
+/*BLASTN*/
+.blastn_part,
+.plus-blastn_part,
+.minus-blastn_part {
+    position: absolute;
+    height: 4px;
+    margin-top: -2px;
+    background-color: #66CC00;
+    border-style: solid;
+    border-color: #6E6E6E;
+    border-width: 1px 1px 1px 1px;
+    z-index: 8;
+    min-width: 1px;
+    cursor: pointer;
+}
+
+/*BLASTX*/
+.blastx_part,
+.plus-blastx_part,
+.minus-blastx_part {
+    position: absolute;
+    height: 4px;
+    margin-top: -2px;
+background-color: #FF00FF;
+    border-style: solid;
+    border-color: #6E6E6E;
+    border-width: 1px 1px 1px 1px;
+    z-index: 8;
+    min-width: 1px;
+    cursor: pointer;
+}
+
+/*TBLASTX*/
+.tblastx_part,
+.plus-tblastx_part,
+.minus-tblastx_part {
+    position: absolute;
+    height: 4px;
+    margin-top: -2px;
+    background-color: #663366;
+    border-style: solid;
+    border-color: #6E6E6E;
+    border-width: 1px 1px 1px 1px;
+    z-index: 8;
+    min-width: 1px;
+    cursor: pointer;
+}
+
+/*est2genome*/
+.est2genome_part,
+.plus-est2genome_part,
+.minus-est2genome_part {
+    position: absolute;
+    height: 4px;
+    margin-top: -2px;
+    background-color: #FAFAD2;
+    border-style: solid;
+    border-color: #6E6E6E;
+    border-width: 1px 1px 1px 1px;
+    z-index: 8;
+    min-width: 1px;
+    cursor: pointer;
+}
+
+/*repeat*/
+.repeat_part,
+.plus-repeat_part,
+.minus-repeat_part {
+    position: absolute;
+    height: 4px;
+    margin-top: -2px;
+    background-color: #FF0000;
+    border-style: solid;
+    border-color: #6E6E6E;
+    border-width: 1px 1px 1px 1px;
+    z-index: 8;
+    min-width: 1px;
+    cursor: pointer;
+}
+
+/*cdna2genome*/
+.cdna2genome_part,
+.plus-cdna2genome_part,
+.minus-cdna2genome_part {
+    position: absolute;
+    height: 4px;
+    margin-top: -2px;
+    background-color: #8C468C;
+    border-style: solid;
+    border-color: #6E6E6E;
+    border-width: 1px 1px 1px 1px;
+    z-index: 8;
+    min-width: 1px;
+    cursor: pointer;
+}

theme/css/menubar.css

@@ -0,0 +1,140 @@
+/* styles for the top menu bar */
+div.menuBar {
+    padding: 1px 0;
+    height: 25px;
+}
+.tundra .menuBar {
+    background: #396494;
+    text-align: right;
+}
+.tundra .menuBar a {
+    color: white;
+}
+div.topLink {
+    position: absolute;
+    right: 0;
+    top: 0;
+    z-index: 50;
+    background: white;
+    border: 1px solid #888;
+    border-width: 0 0 1px 1px;
+}
+div.menuBar a, .topLink a {
+    padding: 0 0.8ex;
+    text-decoration: none;
+}
+.menuBar .powered_by {
+    float: left;
+    font-size: 125%;
+    font-family: 'Helvetica Neue', Arial, Helvetica, 'Nimbus Sans L', sans-serif;
+    font-weight: bold;
+    line-height: 25px; /* note this line-height should be the same as the fixed height of the menuBar */
+    cursor: pointer;
+}
+
+.share .icon {
+    height: 8px;
+    width: 19px;
+    display: inline;
+    display: inline-block;
+    background: url("img/glyphs_white.png") no-repeat -149px -91px;
+    margin-right: 2px;
+    margin-top: -2px;
+}
+a.topLink, a.topLink * {
+    cursor: pointer;
+}
+.topLink .powered_by {
+    padding: 0 0.5em;
+    color: black;
+    text-decoration: none;
+}
+.menuBar * {
+    outline: none;
+}
+.tundra .menuBar .dijitButtonNode {
+    background: transparent;
+}
+
+.tundra .menuBar .dijitButtonNode {
+    border: 2px outset rgba( 120, 120, 120, 0.2 );
+}
+.tundra .menuBar .dijitButtonHover .dijitButtonNode,
+.tundra .menuBar .dijitDropDownButtonHover .dijitButtonNode {
+    background: rgba( 255, 255, 255, 0.07 );
+}
+.tundra .menuBar .dijitButtonActive .dijitButtonNode,
+.tundra .menuBar .dijitDropDownButtonActive .dijitButtonNode {
+    border: 2px inset rgba( 120, 120, 120, 0.2 );
+}
+
+.menuBar .dijitButtonNode {
+    padding: 0 1em;
+}
+
+.menuBar .dijitButtonNode * {
+    color: white;
+}
+.menuBar .config .icon {
+    height: 16px;
+    width: 16px;
+    margin-right: 2px;
+    margin-top: -2px;
+    display: inline;
+    display: inline-block;
+    background: url("img/glyphs_white.png") no-repeat -168px -27px;
+
+}
+
+
+/* dataset selector */
+.menuBar > .menu, .menuBar > .dataset_select {
+    float: left;
+    font-size: 120%;
+    color: white;
+}
+.menuBar > .dataset_select {
+    margin: 1px 0 0 1px;
+    font-weight: bold;
+    height: 100%;
+    background: transparent;
+    border: none;
+}
+.menuBar > .dataset_select .dijitSelectLabel {
+    padding: 0 0.5em;
+}
+.menuBar > .dataset_select.dijitSelectHover td {
+    color: white;
+}
+.menuBar > .dataset_select .dijitButtonContents {
+    background: transparent;
+    border-color: transparent;
+}
+.menuBar > .dataset_select .dijitArrowButtonInner {
+    background: url("img/spriteArrows.png") no-repeat scroll -56px center;
+}
+
+.tundra .globalMenu .dijitMenuItem td {
+    padding: 0.5em 2px 0.5em 5px;
+}
+
+.tundra .menuBar > .menu .dijitButtonNode {
+    border: none;
+}
+.tundra .menuBar > .menu.dijitDropDownButton,
+.tundra .menuBar > .menu.dijitDropDownButton * {
+    margin: 0;
+    padding: 0;
+    line-height: 25px;
+}
+.tundra .menuBar > .menu.dijitDropDownButton .dijitButtonNode {
+    padding: 0 1em 0 0.7em;
+    text-align: left;
+}
+
+.tundra .menuBar > .menu .dijitDropDownButtonHover .dijitButtonNode {
+    background: rgba( 255, 255, 255, 0.07 );
+}
+.tundra .menuBar > .menu .dijitDropDownButtonActive .dijitButtonNode {
+    border: none;
+}

theme/css/sequence.css

@@ -0,0 +1,124 @@
+table.sequence {
+    border-collapse: collapse;
+}
+
+div.sequence_blur {
+    /* background: url('img/sequence_blur.png') #eee repeat-x; */
+    background: #f5f5f5;
+    background: rgba( 50, 50, 50, 0.16 );
+    border: 0;
+    color: #575757;
+    height: 31px;
+    font-size: 12px;
+    text-align: center;
+    position: relative;
+}
+.sequence_blur > span {
+    top: 50%;
+    position: absolute;
+    width: 100%;
+    display: block;
+    left: 0;
+    margin-top: -8px;
+}
+
+table.sequence .highlighted {
+    background: #ff0;
+}
+table.sequence .revcom {
+    color: red;
+}
+table.sequence .base, table.sequence > tr, table.translatedSequence > tr, table.translatedSequence  {
+    height: 14px;
+    line-height: 14px;
+}
+
+table.sequence.big .base {
+    border-right: 1px solid #333;
+}
+
+.translatedSequence {
+    position: relative;
+    border-width: 0px;
+    border-collapse: collapse;
+    overflow: visible;
+}
+.translatedSequence table {
+    z-index: 10;
+}
+
+.translatedSequence.frame0 {
+    background-color: #929292;
+}
+
+.translatedSequence.frame1 {
+    background-color: #B0B0B0;
+}
+
+.translatedSequence.frame2 {
+    background-color: #E0E0E0;
+}
+.translatedSequence td.aminoAcid {
+    text-align: center;
+    z-index: 2000;
+
+    color: black;
+    font-family: Courier New,monospace;
+    font-weight: bold;
+    text-shadow: white 0px 0px 1px;
+}
+.translatedSequence.big, .translatedSequence.big td.aminoAcid {
+    border-right: 1px solid #777;
+}
+
+.translatedSequence.frame2 td.aminoAcid {
+    border-right-color: #979797;
+}
+.translatedSequence.frame1 td.aminoAcid {
+    border-right-color: #6d6d6d;
+}
+.translatedSequence.frame0 td.aminoAcid {
+    border-right-color: #5f5f5f;
+}
+
+.translatedSequence td.aminoAcid_\* {
+    background-color: #FF0000;
+}
+
+.translatedSequence td.aminoAcid_m {
+    background-color: #00FF00;
+}
+
+td.base {
+    text-align: center;
+    z-index: 2000;
+}
+.base {
+    color: black;
+    font-family: Courier New,monospace;
+    font-weight: bold;
+    text-shadow: white 0px 0px 1px;
+}
+
+/* colors for bases must be specified as hex or rgb/hsl strings, no named colors such as 'red' */
+.base_n {
+    background-color: #C6C6C6;
+}
+.base_a {
+    background-color: #00BF00;
+}
+.base_c {
+    background-color: #4747ff;
+}
+.base_t {
+    background-color: #f00;
+}
+.base_g {
+    background-color: #d5bb04;
+}
+.base_reference {
+    background-color: #bbb;
+}
+.base_deletion {
+    background-color: #999; 
+}

theme/css/track_styles.css

@@ -0,0 +1,516 @@
+/*
+  NOTES ON STYLING FEATURES:
+     - avoid using any margins in feature styles. Layout is done
+       by JBrowse.
+
+     - when possible, make all element heights an odd number of
+       pixels, so that vertical centering is possible with
+       pixel-perfect accuracy.
+*/
+
+.basic,
+.plus-basic,
+.minus-basic {
+    position: absolute;
+    cursor: pointer;
+    z-index: 10;
+    min-width: 1px;
+}
+
+.basicSubfeature {
+    position: absolute;
+    cursor: pointer;
+    z-index: 12;
+    min-width: 1px;
+}
+
+div.hist {
+    position: absolute;
+    z-index: 10;
+
+    box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    -ms-box-sizing: border-box;
+}
+
+.feature,
+.plus-feature,
+.minus-feature {
+    position:absolute;
+    height: 7px;
+    background-repeat: repeat-x;
+    cursor: pointer;
+    min-width: 1px;
+    z-index: 10;
+    background-color: #eee;
+
+    box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    -ms-box-sizing: border-box;
+}
+
+.plus-feature { background-image: url('img/plus-chevron3.png'); }
+.minus-feature { background-image: url('img/minus-chevron3.png'); }
+
+.subfeature,
+.plus-subfeature,
+.minus-subfeature {
+    position:absolute;
+    background-color: #dadada;
+    height: 7px;
+    min-width: 1px;
+    z-index: 12;
+
+    box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    -ms-box-sizing: border-box;
+}
+
+.alignment,
+.plus-alignment,
+.minus-alignment {
+    background-color: #ccc;
+
+    /* these should all 3 match */
+    height:      11px;
+    line-height: 11px;
+    font-size:   11px;
+}
+.plus-alignment {
+    background-color: #EC8B8B;
+}
+.minus-alignment {
+    background-color: #898FD8;
+}
+.alignment.missing_mate, .plus-alignment.missing_mate, .minus-alignment.missing_mate {
+    background-image: url('img/red_crosshatch_bg.png');
+}
+
+.alignment > .mismatch, .minus-alignment > .mismatch, .plus-alignment > .mismatch  {
+    height: 100%;
+}
+.alignment > .deletion, .minus-alignment > .deletion, .plus-alignment > .deletion {
+    background-color: black;
+    height: 100%;
+}
+.alignment > .deletion *, .plus-alignment > .deletion *, .minus-alignment > .deletion * {
+    color: white;
+}
+.alignment > .insertion, .plus-alignment > .insertion, .minus-alignment > .insertion {
+    background-color: white;
+    color: black;
+    height: 100%;
+}
+.alignment > .skip, .plus-alignment > .skip, .minus-alignment > .skip {
+    background: url('img/dark_20x3.png') repeat-x 0 50% white;
+    height: 100%;
+    opacity: 0.7;
+}
+
+div.feature-hist {
+    background-color: blue;
+    border-color: #5858C4;
+}
+
+.feature2, .plus-feature2, .minus-feature2 {
+    position:absolute;
+    height: 7px;
+    background-repeat: repeat-x;
+    cursor: pointer;
+    min-width: 1px;
+    z-index: 10;
+    background-color: #62d335;
+}
+
+.Boolean-transparent {
+    opacity: 0.2;
+}
+
+div.feature2-hist {
+    background-color: #9f9;
+    border-color: #ada;
+}
+
+.feature3, .plus-feature3, .minus-feature3 {
+    position:absolute;
+    height: 7px;
+    background-repeat: repeat-x;
+    cursor: pointer;
+    min-width: 1px;
+    z-index: 10;
+    background-color: goldenrod;
+}
+
+div.feature3-hist {
+    background-color: yellow;
+    border-color: black;
+}
+
+.feature4, .plus-feature4, .minus-feature4 {
+    position:absolute;
+    height: 11px;
+    background-repeat: repeat-x;
+    cursor: pointer;
+    min-width: 1px;
+    z-index: 10;
+    background: yellow;
+}
+
+div.feature4-hist {
+    background-color: yellow;
+    border-color: black;
+}
+
+.feature5, .plus-feature5, .minus-feature5 {
+    position:absolute;
+    height: 7px;
+    background-repeat: repeat-x;
+    cursor: pointer;
+    min-width: 1px;
+    z-index: 10;
+    background-color: blue;
+}
+
+div.feature5-hist {
+    background-color: blue;
+    border-color: lightblue;
+}
+
+div.exon-hist {
+    background-color: #4B76E8;
+    border-color: #00f;
+}
+
+.exon,
+.plus-exon,
+.minus-exon {
+    position: absolute;
+    height: 7px;
+    background-color: #4B76E8;
+    border-style: solid;
+    border-color: #00f;
+    border-width: 1px;
+    cursor: pointer;
+    z-index: 10;
+}
+
+div.est-hist {
+    background-color: #ED9185;
+    border-color: #c33;
+}
+
+.est,
+.plus-est,
+.minus-est {
+    position: absolute;
+    height: 7px;
+    background-color: #ED9185;
+}
+
+.dblhelix,
+.plus-dblhelix,
+.minus-dblhelix {
+    position:absolute;
+    height: 11px;
+    background-image: url('img/dblhelix-red.png');
+    background-repeat: repeat-x;
+    min-width: 1px;
+    cursor: pointer;
+    z-index: 10;
+}
+
+div.dblhelix-hist {
+    background-color: #fcc;
+    border-color: #daa;
+}
+
+.plus-helix,
+.minus-helix {
+    position:absolute;
+    height: 11px;
+    background-image: url('img/helix3-green.png');
+    background-repeat: repeat-x;
+    min-width: 1px;
+    cursor: pointer;
+    z-index: 10;
+}
+
+div.helix-hist {
+    background-color: #cfc;
+    border-color: #ada;
+}
+
+.loops, .minus-loops, .plus-loops {
+    position:absolute;
+    height: 13px;
+    background-image: url('img/loops.png');
+    background-repeat: repeat-x;
+    cursor: pointer;
+}
+
+.diamonds, .minus-diamonds, .plus-diamonds {
+
+
+    position:absolute;
+    height: 13px;
+    background-image: url('img/glyph-diamond.png');
+    background-repeat: repeat-x;
+    cursor: pointer;
+}
+
+.plus-cds, .minus-cds {
+    position:absolute;
+    height: 13px;
+    background-repeat: repeat-x;
+    cursor: pointer;
+    min-width: 1px;
+}
+
+.plus-cds_phase0 { background-image: url('img/plus-cds0.png'); }
+.plus-cds_phase1 { background-image: url('img/plus-cds1.png'); }
+.plus-cds_phase2 { background-image: url('img/plus-cds2.png'); }
+.minus-cds_phase0 { background-image: url('img/minus-cds0.png'); }
+.minus-cds_phase1 { background-image: url('img/minus-cds1.png'); }
+.minus-cds_phase2 { background-image: url('img/minus-cds2.png'); }
+
+div.cds-hist {
+    background-color: #fcc;
+    border-color: #daa;
+}
+
+.topbracket {
+    position:absolute;
+    height: 8px;
+    border-style: solid solid none solid;
+    border-width: 2px;
+    border-color: orange;
+    cursor: pointer;
+}
+
+.bottombracket {
+    position:absolute;
+    height: 8px;
+    border-style: none solid solid solid;
+    border-width: 2px;
+    border-color: green;
+    cursor: pointer;
+}
+
+.hourglass, .plus-hourglass, .minus-hourglass {
+    position:absolute;
+    height: 0px;
+    border-style: solid;
+    border-width: 6px 3px 6px 3px;
+    cursor: pointer;
+}
+
+.triangle, .plus-triangle, .minus-triangle {
+    position:absolute;
+    height: 0px;
+    border-style: solid;
+    border-width: 6px 3px 0px 3px;
+    cursor: pointer;
+}
+
+.hgred {
+    border-color: #f99 white #f99 white;
+}
+div.hgred-hist {
+    background-color: #daa;
+    border-color: #d44;
+}
+
+.hgblue {
+    border-color: #99f white #99f white;
+}
+div.hgblue-hist {
+    background-color: #aad;
+    border-color: #99f;
+}
+
+.ibeam, .plus-ibeam, .minus-ibeam {
+    position:absolute;
+    height: 2px;
+    background-color: blue;
+    border-style: solid;
+    border-width: 8px 4px 8px 4px;
+    border-color: white blue white blue;
+    cursor: pointer;
+
+    box-sizing: content-box;
+    -moz-box-sizing: content-box;
+    -webkit-box-sizing: content-box;
+    -ms-box-sizing: content-box;
+
+}
+
+div.transcript-hist {
+    background-color: #ddd;
+    border-color: #FF9185;
+}
+
+.transcript,
+.plus-transcript,
+.minus-transcript {
+    position: absolute;
+    height: 11px;
+    background: url('img/dark_20x3.png') repeat-x 0 4px white;
+    z-index: 6;
+    min-width: 1px;
+    cursor: pointer;
+}
+
+.plus-transcript-arrowhead,
+.plus-arrowhead {
+    position: absolute;
+    width: 9px;
+    height: 5px;
+    background-image: url('img/plus-arrowhead.png');
+    background-repeat: no-repeat;
+    z-index: 100;
+}
+
+.minus-transcript-arrowhead,
+.minus-arrowhead {
+    position: absolute;
+    width: 9px;
+    height: 5px;
+    background-image: url('img/minus-arrowhead.png');
+    background-repeat: no-repeat;
+    z-index: 100;
+}
+
+/* introns are hidden by default */
+.plus-intron, .minus-intron {
+    display: none;
+}
+/* can also set a class of 'hidden' to hide something */
+.hidden, .plus-hidden, .minus-hidden {
+    display: none;
+}
+
+.plus-CDS,
+.plus-transcript-CDS,
+.minus-CDS,
+.minus-transcript-CDS {
+    position: absolute;
+    height: 11px;
+    background: #F09A9A;
+    cursor: pointer;
+    z-index: 10;
+    min-width: 1px;
+}
+
+.plus-exon,
+.minus-exon,
+.plus-UTR,
+.minus-UTR,
+.plus-five_prime_UTR,
+.minus-five_prime_UTR,
+.plus-three_prime_UTR,
+.minus-three_prime_UTR {
+    position: absolute;
+    height: 7px;
+    background-color: #B66;
+    border-style: solid;
+    border-color: #D88;
+    border-width: 2px 0px 2px 0px;
+    z-index: 8;
+    min-width: 1px;
+    cursor: pointer;
+}
+
+.generic_parent,
+.plus-generic_parent,
+.minus-generic_parent {
+    position: absolute;
+    height: 4px;
+    background-color: #AAA;
+    z-index: 6;
+    min-width: 1px;
+    cursor: pointer;
+}
+
+div.generic_parent-hist {
+    background-color: #ddd;
+    border-color: #555;
+}
+
+.match_part,
+.plus-match_part,
+.minus-match_part {
+    position: absolute;
+    height: 4px;
+    background-color: #66B;
+    border-style: solid;
+    border-color: #88D;
+    border-width: 2px 0px 2px 0px;
+    z-index: 8;
+    min-width: 1px;
+    cursor: pointer;
+}
+
+.generic_part_a,
+.plus-generic_part_a,
+.minus-generic_part_a {
+    position: absolute;
+    height: 4px;
+    background-color: #6B6;
+    border-style: solid;
+    border-color: #8D8;
+    border-width: 2px 0px 2px 0px;
+    z-index: 8;
+    min-width: 1px;
+    cursor: pointer;
+}
+
+
+/* floating score display for wiggle tracks */
+.wiggleValueDisplay {
+    background: #FFFEF0;
+    border: 1px solid #aaa;
+    padding: 2px;
+    font-family: Courier New, monospace;
+    font-weight: bold;
+    cursor: default;
+
+    -moz-box-shadow: 4px 4px 10px 2px rgba( 80, 80, 80, 0.3 );
+    -webkit-box-shadow: 4px 4px 10px 2px rgba( 80, 80, 80, 0.3 );
+    box-shadow: 4px 4px 10px 2px rgba( 80, 80, 80, 0.3 );
+}
+.wiggleValueDisplay table {
+    border-spacing: 0;
+}
+.wiggleValueDisplay td {
+    padding: 0.2em 0.4em;
+}
+.wiggleValueDisplay td.count, .wiggleValueDisplay td.pct  {
+    text-align: right;
+}
+.wiggleValueDisplay tr.total > td {
+    border-top: 1px solid #aaa;
+    font-weight: bold;
+}
+
+.wigglePositionIndicator {
+    background: #333;
+    border: none;
+    width: 1px;
+    cursor: default;
+}
+
+.featureTooltip {
+    background: #FFFEF0;
+    border: 1px solid #aaa;
+    padding: 2px;
+    font-family: Courier New, monospace;
+    font-weight: bold;
+    cursor: default;
+
+    -moz-box-shadow: 4px 4px 10px 2px rgba( 80, 80, 80, 0.3 );
+    -webkit-box-shadow: 4px 4px 10px 2px rgba( 80, 80, 80, 0.3 );
+    box-shadow: 4px 4px 10px 2px rgba( 80, 80, 80, 0.3 );
+}

theme/css/tristate.css

@@ -0,0 +1,130 @@
+/* TriStateCheckBox
+ * 
+ * Styling TriStateCheckBox mainly includes:
+ * 
+ * 1. Containers
+ * 		.dojoxTriStateCheckBox|.dojoxTriStateCheckBoxIcon - for border, padding, width|height and background image
+ * 
+ * 2. Checked state
+ * 		.dojoxTriStateCheckBoxChecked - for checked background-color|image
+ * 		.dojoxTriStateCheckBoxMixed - for mixed background-color|image
+ * 
+ * 3. Hover state
+ * 		.dojoxTriStateCheckBoxHover|.dojoxTriStateCheckBoxCheckedHover|.dojoxTriStateCheckBoxMixedHover - for background image
+ * 
+ * 4. Disabled state
+ * 		.dojoxTriStateCheckBoxDisabled|.dojoxTriStateCheckBoxCheckedDisabled|.dojoxTriStateCheckBoxMixedDisabled - for background image
+ */
+.tundra .dojoxTriStateCheckBox,  .dojoxTriStateCheckBoxIcon {
+  background-image: url('img/tristate.png');
+  /* checkbox sprite image */
+
+  background-repeat: no-repeat;
+  width: 30px;
+  height: 22px !important;
+  margin: 0 2px 0 0;
+  padding: 5px 5px 5px 5px;
+}
+.dj_ie6 .tundra .dojoxTriStateCheckBox, .dj_ie6  .dojoxTriStateCheckBoxIcon {
+  background-image: url('img/tristate.png');
+  /* checkbox sprite image */
+
+}
+.tundra .dojoxTriStateCheckBox{
+  /* unchecked */
+
+  background-position: -30px;
+}
+.tundra .dojoxTriStateCheckBoxChecked{
+  /* checked */
+  background-position: 0px;
+}
+.tundra .dojoxTriStateCheckBoxMixed {
+  /* mixed */
+
+  background-position: -90px;
+}
+.tundra .dojoxTriStateCheckBoxDisabled {
+  /* disabled and unchecked */
+
+  background-position: -30px;
+}
+.tundra .dojoxTriStateCheckBoxCheckedDisabled {
+  /* disabled and checked */
+
+  background-position: 0px;
+}
+.tundra .dojoxTriStateCheckBoxMixedDisabled {
+  /* disabled and mixed */
+
+  background-position: -90px;
+}
+.tundra .dojoxTriStateCheckBoxHover {
+  /* hovering over and unchecked */
+
+  background-position: -60px;
+}
+.tundra .dojoxTriStateCheckBoxCheckedHover {
+  /* hovering over and checked */
+
+  background-position: 0px;
+}
+.tundra .dojoxTriStateCheckBoxMixedHover {
+  /* hovering over and mixed */
+
+  background-position: -120px;
+}
+
+.dijit_a11y .dojoxTriStateCheckBoxHover .dojoxTriStateCheckBoxInner,
+.dijit_a11y .dojoxTriStateCheckBoxFocused .dojoxTriStateCheckBoxInner{
+  /* focused or hovering over */
+  border: dashed;
+}
+
+.dijit_a11y .dojoxTriStateCheckBoxHover .dojoxTriStateCheckBoxInner,
+.dijit_a11y .dojoxTriStateCheckBoxFocused .dojoxTriStateCheckBoxInner{
+  /* focused or hovering over */
+  border: solid;
+}
+
+.dijit_a11y .dojoxTriStateCheckBoxDisabled .dojoxTriStateCheckBoxInner{
+  /* focused or hovering over */ 
+  opacity: 0.5;
+}
+
+.dj_ie .dijit_a11y .dojoxTriStateCheckBoxDisabled .dojoxTriStateCheckBoxInner{
+  /* disabled */
+}
+
+
+.dojoxTriStateCheckBoxInner{
+  /* inner text */
+
+  visibility: hidden;
+  display: none;
+  position: absolute;
+  text-align: center;
+}
+
+.dijit_a11y .dojoxTriStateCheckBoxInner{
+  /* inner text */
+  
+  visibility: visible;
+  display: block;
+}
+
+.dojoxTriStateCheckBoxInput {
+  /* place the actual input on top, but all-but-invisible */
+  opacity: 0.01;
+  padding: 0;
+  margin: 0;
+  border: 0;
+  width: 30px;
+  height: 22px;
+  background-position:center center;
+  background-repeat:no-repeat;
+}
+
+.dj_ie .dojoxTriStateCheckBoxInput {
+  filter: alpha(opacity=0);
+}

theme/jbrowse_config.js

@@ -0,0 +1,74 @@
+window.onerror=function(msg){
+    if( document.body )
+        document.body.setAttribute("JSError",msg);
+}
+
+        // puts the main Browser object in this for convenience.  feel
+        // free to move it into function scope if you want to keep it
+        // out of the global namespace
+var JBrowse;
+require(['JBrowse/Browser', 'dojo/io-query', 'dojo/json' ],
+        function (Browser,ioQuery,JSON) {
+                   // the initial configuration of this JBrowse
+                   // instance
+
+                   // NOTE: this initial config is the same as any
+                   // other JBrowse config in any other file.  this
+                   // one just sets defaults from URL query params.
+                   // If you are embedding JBrowse in some other app,
+                   // you might as well just set this initial config
+                   // to something like { include: '../my/dynamic/conf.json' },
+                   // or you could put the entire
+                   // dynamically-generated JBrowse config here.
+
+                   // parse the query vars in the page URL
+            var queryParams = ioQuery.queryToObject( window.location.search.slice(1) );
+
+            var config = {
+                containerID: "GenomeBrowser",
+
+                dataRoot: '/jbrowse/JBrowse-1.11.5/data',
+                browserRoot: '/jbrowse/JBrowse-1.11.5',
+                queryParams: queryParams,
+                location: queryParams.loc,
+                forceTracks: queryParams.tracks,
+                initialHighlight: queryParams.highlight,
+                show_nav: queryParams.nav,
+                show_tracklist: queryParams.tracklist,
+                show_overview: queryParams.overview,
+                stores: { url: { type: "JBrowse/Store/SeqFeature/FromConfig", features: [] } },
+                makeFullViewURL: function( browser ) {
+
+                           // the URL for the 'Full view' link
+                           // in embedded mode should be the current
+                           // view URL, except with 'nav', 'tracklist',
+                           // and 'overview' parameters forced to 1.
+
+                    return browser.makeCurrentViewURL({ nav: 1, tracklist: 1, overview: 1 });
+                },
+                updateBrowserURL: true
+            };
+
+                   //if there is ?addFeatures in the query params,
+                   //define a store for data from the URL
+            if( queryParams.addFeatures ) {
+                config.stores.url.features = JSON.parse( queryParams.addFeatures );
+            }
+
+                   // if there is ?addTracks in the query params, add
+                   // those track configurations to our initial
+                   // configuration
+            if( queryParams.addTracks ) {
+                config.tracks = JSON.parse( queryParams.addTracks );
+            }
+
+                   // if there is ?addStores in the query params, add
+                   // those store configurations to our initial
+                   // configuration
+            if( queryParams.addStores ) {
+                config.stores = JSON.parse( queryParams.addStores );
+            }
+
+                   // create a JBrowse global variable holding the JBrowse instance
+            JBrowse = new Browser( config );
+        });

theme/jbrowse_config.js~

@@ -0,0 +1,74 @@
+window.onerror=function(msg){
+    if( document.body )
+        document.body.setAttribute("JSError",msg);
+}
+
+        // puts the main Browser object in this for convenience.  feel
+        // free to move it into function scope if you want to keep it
+        // out of the global namespace
+var JBrowse;
+require(['JBrowse/Browser', 'dojo/io-query', 'dojo/json' ],
+        function (Browser,ioQuery,JSON) {
+                   // the initial configuration of this JBrowse
+                   // instance
+
+                   // NOTE: this initial config is the same as any
+                   // other JBrowse config in any other file.  this
+                   // one just sets defaults from URL query params.
+                   // If you are embedding JBrowse in some other app,
+                   // you might as well just set this initial config
+                   // to something like { include: '../my/dynamic/conf.json' },
+                   // or you could put the entire
+                   // dynamically-generated JBrowse config here.
+
+                   // parse the query vars in the page URL
+            var queryParams = ioQuery.queryToObject( window.location.search.slice(1) );
+
+            var config = {
+                containerID: "GenomeBrowser",
+
+                dataRoot: '/jbrowse/Medicago/data',
+                browserRoot: '/jbrowse/Medicago',
+                queryParams: queryParams,
+                location: queryParams.loc,
+                forceTracks: queryParams.tracks,
+                initialHighlight: queryParams.highlight,
+                show_nav: queryParams.nav,
+                show_tracklist: queryParams.tracklist,
+                show_overview: queryParams.overview,
+                stores: { url: { type: "JBrowse/Store/SeqFeature/FromConfig", features: [] } },
+                makeFullViewURL: function( browser ) {
+
+                           // the URL for the 'Full view' link
+                           // in embedded mode should be the current
+                           // view URL, except with 'nav', 'tracklist',
+                           // and 'overview' parameters forced to 1.
+
+                    return browser.makeCurrentViewURL({ nav: 1, tracklist: 1, overview: 1 });
+                },
+                updateBrowserURL: true
+            };
+
+                   //if there is ?addFeatures in the query params,
+                   //define a store for data from the URL
+            if( queryParams.addFeatures ) {
+                config.stores.url.features = JSON.parse( queryParams.addFeatures );
+            }
+
+                   // if there is ?addTracks in the query params, add
+                   // those track configurations to our initial
+                   // configuration
+            if( queryParams.addTracks ) {
+                config.tracks = JSON.parse( queryParams.addTracks );
+            }
+
+                   // if there is ?addStores in the query params, add
+                   // those store configurations to our initial
+                   // configuration
+            if( queryParams.addStores ) {
+                config.stores = JSON.parse( queryParams.addStores );
+            }
+
+                   // create a JBrowse global variable holding the JBrowse instance
+            JBrowse = new Browser( config );
+        });

theme/node--jbrowse-instance.tpl.php

@@ -0,0 +1,92 @@
+
+<script type="text/javascript" src="/jbrowse/Lentil/src/dojo/dojo.js" data-dojo-config="async: 1, baseUrl: '/jbrowse/Lentil/src'"></script>
+<script type="text/javascript" src="/jbrowse/Lentil/src/JBrowse/init.js"></script>
+
+<script type="text/javascript">
+    window.onerror=function(msg){
+        if( document.body )
+            document.body.setAttribute("JSError",msg);
+    }
+
+    // add this.resolveUrl() on 1537-1538 of src/JBrowse/Browser.js
+    // add /jbrowse/Lentil on 69 of src/dojo/dojo.js
+
+    // puts the main Browser object in this for convenience.  feel
+    // free to move it into function scope if you want to keep it
+    // out of the global namespace
+    var JBrowse;
+    require(['JBrowse/Browser', 'dojo/io-query', 'dojo/json' ],
+         function (Browser,ioQuery,JSON) {
+               // the initial configuration of this JBrowse
+               // instance
+
+               // NOTE: this initial config is the same as any
+               // other JBrowse config in any other file.  this
+               // one just sets defaults from URL query params.
+               // If you are embedding JBrowse in some other app,
+               // you might as well just set this initial config
+               // to something like { include: '../my/dynamic/conf.json' },
+               // or you could put the entire
+               // dynamically-generated JBrowse config here.
+
+               // parse the query vars in the page URL
+               var queryParams = ioQuery.queryToObject( window.location.search.slice(1) );
+
+               var config = {
+                   containerID: "JBrowseInstance",
+
+                   dataRoot: '/jbrowse/Lentil/data',
+                   browserRoot: '/jbrowse/Lentil',
+                   queryParams: queryParams,
+                   location: queryParams.loc,
+                   forceTracks: queryParams.tracks,
+                   initialHighlight: queryParams.highlight,
+                   show_nav: queryParams.nav,
+                   show_tracklist: queryParams.tracklist,
+                   show_overview: queryParams.overview,
+                   stores: { url: { type: "JBrowse/Store/SeqFeature/FromConfig", features: [] } },
+                   makeFullViewURL: function( browser ) {
+
+                       // the URL for the 'Full view' link
+                       // in embedded mode should be the current
+                       // view URL, except with 'nav', 'tracklist',
+                       // and 'overview' parameters forced to 1.
+
+                       return browser.makeCurrentViewURL({ nav: 1, tracklist: 1, overview: 1 });
+                   },
+                   updateBrowserURL: true
+               };
+
+               //if there is ?addFeatures in the query params,
+               //define a store for data from the URL
+               if( queryParams.addFeatures ) {
+                   config.stores.url.features = JSON.parse( queryParams.addFeatures );
+               }
+
+               // if there is ?addTracks in the query params, add
+               // those track configurations to our initial
+               // configuration
+               if( queryParams.addTracks ) {
+                   config.tracks = JSON.parse( queryParams.addTracks );
+               }
+
+               // if there is ?addStores in the query params, add
+               // those store configurations to our initial
+               // configuration
+               if( queryParams.addStores ) {
+                   config.stores = JSON.parse( queryParams.addStores );
+               }
+
+               // create a JBrowse global variable holding the JBrowse instance
+               JBrowse = new Browser( config );
+    });
+
+</script>
+
+<div id="node-<?php print $node->nid; ?>" class="<?php print $classes; ?> clearfix"<?php print $attributes; ?>>
+  <div class="content clearfix"<?php print $content_attributes; ?>>
+    <div id="JBrowse" style="height: 700px;">
+      <div id="JBrowseInstance" ></div>
+    </div>
+  </div>
+</div>

tripal_jbrowse.info

@@ -0,0 +1,4 @@
+name = Tripal-JBrowse Integration
+description = Integrates existing JBrowse instances into Tripal sites.
+core = 7.x
+package = Tripal Extensions

tripal_jbrowse.install

@@ -0,0 +1,465 @@
+<?php
+/**
+ * @file
+ * Install the module.
+ *
+ * Creates the JBrowse Instance content type using the method from 
+ * http://www.thecarneyeffect.co.uk/creating-custom-content-type-adding-fields-programmatically-drupal-7
+ */
+
+/**
+ * Implements hook_install().
+ */
+function tripal_jbrowse_install() {
+  $t = get_t();
+
+  /**** STEP 1: Create the content type ****/
+
+  // machine name of the content type
+  $name = 'jbrowse_instance';
+
+  // define the node type
+  $type = array(
+    'type' => $name,
+    'name' => $t('JBrowse Instance'),
+    'base' => 'node_content',
+    'title_label' => $t('Title'),
+    'description' => $t('Integrates an existing JBrowse instance within these nodes.'),
+    'custom' => TRUE,
+  );
+
+  // set other node defaults not declared above
+  $content_type = node_type_set_defaults($type);
+
+  // add the body field
+  node_add_body_field($content_type, $t('JBrowse Description'));
+
+  // save the content type
+  node_type_save($content_type);
+
+  // add peristant variables that control settings
+  variable_set('additional_settings__active_tab_' . $name, 'edit-menu');
+  variable_set('node_preview_' . $name, 2);
+  variable_set('node_options_' . $name, array(0 => 'status', 1 => 'promote'));
+  variable_set('node_submitted_' . $name, 0);
+  variable_set('menu_options_' . $name, array());
+  variable_set('menu_parent_' . $name, 'main-menu:0');
+
+
+  /**** STEP 2: Add Fields ****/
+
+  // create all the fields we are adding to our content type
+  foreach (_jbrowse_installed_fields() as $field) {
+    field_create_field($field);
+  }
+
+  // create all the instances for our fields
+  foreach (_jbrowse_installed_instances() as $instance) {
+    $instance['entity_type'] = 'node';
+    $instance['bundle'] = $type['type'];
+    field_create_instance($instance);
+  }
+}
+
+/**
+ * Implements hook_uninstall().
+ */
+function tripal_jbrowse_uninstall() {
+  // machine name of the content type
+  $name = 'jbrowse_instance';
+
+  // gather all job nodes created
+  $sql = 'SELECT nid FROM {node} n WHERE n.type = :type';
+  $result = db_query($sql, array(':type' => $name));
+  $nids = array();
+  foreach ($result as $row) {
+    $nids[] = $row->nid;
+  }
+
+  // delete all the job nodes at once
+  node_delete_multiple($nids);
+
+  // remove peristant variables that control settings
+  variable_del('additional_settings__active_tab_' . $name);
+  variable_del('node_preview_' . $name);
+  variable_del('node_options_' . $name);
+  variable_del('node_submitted_' . $name);
+  variable_del('menu_options_' . $name);
+  variable_del('menu_parent_' . $name);
+
+
+  // find all fields and delete them
+  foreach (array_keys(_jbrowse_installed_fields()) as $field) {
+    field_delete_field($field);
+  }
+
+  // find all fields and delete instance
+  $instances = field_info_instances('node', $name);
+  foreach ($instances as $instance_name => $instance) {
+    field_delete_instance($instance);
+  }
+
+  // delete our content type
+  node_type_delete($name);
+
+  // purge all field infromation
+  field_purge_batch(1000);
+}
+
+/**
+ * Defines all the fields needed for the jbrowse_instance content type.
+ *
+ * @return
+ *  An associative array specifying the fields we wish to add to our
+ *  new node type.
+ */
+function _jbrowse_installed_fields() {
+  return array(
+    'field_jburl' => array(
+  'translatable' => '0',
+  'entity_types' => array(),
+  'settings' => array(
+    'attributes' => array(
+      'target' => 'default',
+      'class' => '',
+      'rel' => '',
+    ),
+    'url' => 0,
+    'title' => 'optional',
+    'title_value' => '',
+    'title_maxlength' => 128,
+    'enable_tokens' => 1,
+    'display' => array(
+      'url_cutoff' => 80,
+    ),
+  ),
+  'storage' => array(
+    'type' => 'field_sql_storage',
+    'settings' => array(),
+    'module' => 'field_sql_storage',
+    'active' => '1',
+    'details' => array(
+      'sql' => array(
+        'FIELD_LOAD_CURRENT' => array(
+          'field_data_field_jburl' => array(
+            'url' => 'field_jburl_url',
+            'title' => 'field_jburl_title',
+            'attributes' => 'field_jburl_attributes',
+          ),
+        ),
+        'FIELD_LOAD_REVISION' => array(
+          'field_revision_field_jburl' => array(
+            'url' => 'field_jburl_url',
+            'title' => 'field_jburl_title',
+            'attributes' => 'field_jburl_attributes',
+          ),
+        ),
+      ),
+    ),
+  ),
+  'foreign keys' => array(),
+  'indexes' => array(),
+  'field_name' => 'field_jburl',
+  'type' => 'link_field',
+  'module' => 'link',
+  'active' => '1',
+  'locked' => '0',
+  'cardinality' => '1',
+  'deleted' => '0',
+  'columns' => array(
+    'url' => array(
+      'type' => 'varchar',
+      'length' => 2048,
+      'not null' => FALSE,
+      'sortable' => TRUE,
+    ),
+    'title' => array(
+      'type' => 'varchar',
+      'length' => 255,
+      'not null' => FALSE,
+      'sortable' => TRUE,
+    ),
+    'attributes' => array(
+      'type' => 'text',
+      'size' => 'medium',
+      'not null' => FALSE,
+    ),
+  ),
+  'bundles' => array(
+    'node' => array(
+      'jbrowse_instance',
+    ),
+  ),
+),
+    'field_jbloc' => array(
+  'translatable' => '0',
+  'entity_types' => array(),
+  'settings' => array(
+    'max_length' => '255',
+  ),
+  'storage' => array(
+    'type' => 'field_sql_storage',
+    'settings' => array(),
+    'module' => 'field_sql_storage',
+    'active' => '1',
+    'details' => array(
+      'sql' => array(
+        'FIELD_LOAD_CURRENT' => array(
+          'field_data_field_jbloc' => array(
+            'value' => 'field_jbloc_value',
+            'format' => 'field_jbloc_format',
+          ),
+        ),
+        'FIELD_LOAD_REVISION' => array(
+          'field_revision_field_jbloc' => array(
+            'value' => 'field_jbloc_value',
+            'format' => 'field_jbloc_format',
+          ),
+        ),
+      ),
+    ),
+  ),
+  'foreign keys' => array(
+    'format' => array(
+      'table' => 'filter_format',
+      'columns' => array(
+        'format' => 'format',
+      ),
+    ),
+  ),
+  'indexes' => array(
+    'format' => array(
+      'format',
+    ),
+  ),
+  'field_name' => 'field_jbloc',
+  'type' => 'text',
+  'module' => 'text',
+  'active' => '1',
+  'locked' => '0',
+  'cardinality' => '1',
+  'deleted' => '0',
+  'columns' => array(
+    'value' => array(
+      'type' => 'varchar',
+      'length' => '255',
+      'not null' => FALSE,
+    ),
+    'format' => array(
+      'type' => 'varchar',
+      'length' => 255,
+      'not null' => FALSE,
+    ),
+  ),
+  'bundles' => array(
+    'node' => array(
+      'jbrowse_instance',
+    ),
+  ),
+),
+    'field_jbtracks' => array(
+  'translatable' => '0',
+  'entity_types' => array(),
+  'settings' => array(),
+  'storage' => array(
+    'type' => 'field_sql_storage',
+    'settings' => array(),
+    'module' => 'field_sql_storage',
+    'active' => '1',
+    'details' => array(
+      'sql' => array(
+        'FIELD_LOAD_CURRENT' => array(
+          'field_data_field_jbtracks' => array(
+            'value' => 'field_jbtracks_value',
+            'format' => 'field_jbtracks_format',
+          ),
+        ),
+        'FIELD_LOAD_REVISION' => array(
+          'field_revision_field_jbtracks' => array(
+            'value' => 'field_jbtracks_value',
+            'format' => 'field_jbtracks_format',
+          ),
+        ),
+      ),
+    ),
+  ),
+  'foreign keys' => array(
+    'format' => array(
+      'table' => 'filter_format',
+      'columns' => array(
+        'format' => 'format',
+      ),
+    ),
+  ),
+  'indexes' => array(
+    'format' => array(
+      'format',
+    ),
+  ),
+  'field_name' => 'field_jbtracks',
+  'type' => 'text_long',
+  'module' => 'text',
+  'active' => '1',
+  'locked' => '0',
+  'cardinality' => '1',
+  'deleted' => '0',
+  'columns' => array(
+    'value' => array(
+      'type' => 'text',
+      'size' => 'big',
+      'not null' => FALSE,
+    ),
+    'format' => array(
+      'type' => 'varchar',
+      'length' => 255,
+      'not null' => FALSE,
+    ),
+  ),
+  'bundles' => array(
+    'node' => array(
+      'jbrowse_instance',
+    ),
+  ),
+),
+  );
+}
+
+/**
+ * Defines the field instances needed for the jbrowse_instance content type.
+ *
+ * @return
+ *  An associative array specifying the instances we wish to add to our new
+ *  node type.
+ */
+function _jbrowse_installed_instances() {
+  return array(
+    'field_jburl' => array(
+  'label' => 'Existing JBrowse URL',
+  'widget' => array(
+    'weight' => '1',
+    'type' => 'link_field',
+    'module' => 'link',
+    'active' => 0,
+    'settings' => array(),
+  ),
+  'settings' => array(
+    'validate_url' => 1,
+    'url' => 0,
+    'title' => 'none',
+    'title_value' => '',
+    'title_maxlength' => '128',
+    'enable_tokens' => 0,
+    'display' => array(
+      'url_cutoff' => '',
+    ),
+    'attributes' => array(
+      'target' => '_blank',
+      'rel' => '',
+      'class' => '',
+      'configurable_title' => 0,
+      'title' => '',
+    ),
+    'rel_remove' => 'default',
+    'user_register_form' => FALSE,
+  ),
+  'display' => array(
+    'default' => array(
+      'label' => 'above',
+      'type' => 'link_default',
+      'settings' => array(),
+      'module' => 'link',
+      'weight' => 3,
+    ),
+    'teaser' => array(
+      'type' => 'hidden',
+      'label' => 'above',
+      'settings' => array(),
+      'weight' => 0,
+    ),
+  ),
+  'required' => 1,
+  'description' => 'The URL for the existing JBrowse you wish to integrate into this page. This URL should not include any query parameters.',
+  'default_value' => NULL,
+  'field_name' => 'field_jburl',
+  'entity_type' => 'node',
+  'bundle' => 'jbrowse_instance',
+  'deleted' => '0',
+),
+    'field_jbloc' => array(
+  'label' => 'Start Location',
+  'widget' => array(
+    'weight' => '3',
+    'type' => 'text_textfield',
+    'module' => 'text',
+    'active' => 1,
+    'settings' => array(
+      'size' => '60',
+    ),
+  ),
+  'settings' => array(
+    'text_processing' => '0',
+    'user_register_form' => FALSE,
+  ),
+  'display' => array(
+    'default' => array(
+      'label' => 'above',
+      'type' => 'text_default',
+      'settings' => array(),
+      'module' => 'text',
+      'weight' => 1,
+    ),
+    'teaser' => array(
+      'type' => 'hidden',
+      'label' => 'above',
+      'settings' => array(),
+      'weight' => 0,
+    ),
+  ),
+  'required' => 0,
+  'description' => "<p>The initial genomic position which will be visible in the viewing field. Possible input strings are:</p>\r\n<strong>\"Chromosome\"+\":\"+ start point + \"..\" + end point</strong>\r\n<p>A chromosome name/ID followed by “:”, starting position, “..” and end position of the genome to be viewed in the browser is used as an input. Chromosome ID can be either a string or a mix of string and numbers. “CHR” to indicate chromosome may or may not be used. Strings are not case-sensitive. If the chromosome ID is found in the database reference sequence (RefSeq), the chromosome will be shown from the starting position to the end position given in URL.</p>\r\n<pre>     ctgA:100..200</pre>\r\n<p>Chromosome ctgA will be displayed from position 100 to 200.</p>\r\nOR <strong>start point + \"..\" + end point</strong>\r\n<p>A string of numerical value, “..” and another numerical value is given with the loc option. JBrowse navigates through the currently selected chromosome from the first numerical value, start point, to the second numerical value, end point.</p>\r\n<pre>     200..600</pre>\r\n<p>Displays position 200 to 600 of the current chromosome.</p>\r\nOR <strong>center base</strong>\r\n<p>If only one numerical value is given as an input, JBrowse treats the input as the center position. Then an arbitrary region of the currently selected gene is displayed in the viewing field with the given input position as basepair position on which to center the view.</p>\r\nOR <strong>feature name/ID</strong>\r\n<p>If a string or a mix of string and numbers are entered as an input, JBrowse treats the input as a feature name/ID of a gene. If the ID exists in the database RefSeq, JBrowser displays an arbitrary region of the feature from the the position 0, starting position of the gene, to a certain end point.</p>\r\n<pre>     ctgA</pre>\r\n<p>Displays an arbitrary region from the ctgA reference.</p>",
+  'default_value' => NULL,
+  'field_name' => 'field_jbloc',
+  'entity_type' => 'node',
+  'bundle' => 'jbrowse_instance',
+  'deleted' => '0',
+),
+    'field_jbtracks' => array(
+  'label' => 'Tracks to Display',
+  'widget' => array(
+    'weight' => '4',
+    'type' => 'text_textarea',
+    'module' => 'text',
+    'active' => 1,
+    'settings' => array(
+      'rows' => '2',
+    ),
+  ),
+  'settings' => array(
+    'text_processing' => '0',
+    'user_register_form' => FALSE,
+  ),
+  'display' => array(
+    'default' => array(
+      'label' => 'above',
+      'type' => 'text_default',
+      'settings' => array(),
+      'module' => 'text',
+      'weight' => 2,
+    ),
+    'teaser' => array(
+      'type' => 'hidden',
+      'label' => 'above',
+      'settings' => array(),
+      'weight' => 0,
+    ),
+  ),
+  'required' => 0,
+  'description' => "<p>A comma-delimited strings containing track names, each of which should correspond to the \"label\" element of the track information dictionaries that are currently viewed in the viewing field.</p>\r\n<pre>     DNA,knownGene,ccdsGene,snp131,pgWatson,simpleRepeat</pre>",
+  'default_value' => NULL,
+  'field_name' => 'field_jbtracks',
+  'entity_type' => 'node',
+  'bundle' => 'jbrowse_instance',
+  'deleted' => '0',
+),
+  );
+}

tripal_jbrowse.module

@@ -0,0 +1,50 @@
+<?php
+/**
+ * @file
+ * Core functions of this module.
+ */
+
+/**
+ * Implements hook_theme().
+ */
+function tripal_jbrowse_theme($existing, $type, $theme, $path) {
+
+  $items = array(
+    'node__jbrowse_instance' => array(
+      // Don't specify the path in the template name.
+      // Unless you have your template inside a directory within this module.
+      'template' =>  'theme/node--jbrowse-instance',
+      'variables' => array('node' => (object)array()),
+    ),
+  );
+
+  return $items;
+}
+
+/**
+ * Implements node preprocess hook.
+ */
+function tripal_jbrowse_preprocess_node(&$vars) {
+
+  if ($vars['node']->type == 'jbrowse_instance') {
+    $path = $vars['node']->field_jburl['und'][0]['url'];
+
+    $files = array(
+      'combination_tracks.css',
+      'faceted_track_selector.css',
+      'icons.css',
+      'maker.css',
+      'sequence.css',
+      'tristate.css',
+      'export_dialog.css',
+      'file_dialog.css',
+      'hierarchical_track_selector.css',
+      'main.css',
+      'menubar.css',
+      'track_styles.css'
+    );
+    foreach ($files as $filename) {
+      $sheets = drupal_add_css($path . '/' . $filename, array('group' => CSS_THEME, 'type' => 'external'));
+    }
+  }
+}