These are some of the CSS styling I believe might be most requested for implementation. This is by no means an extensive list. View the annotation css for annotation specifics. Below there is a table with CSS. See the css examples section for examples of implementation.

Selected CSS fields

section CSS attribute defaults mobile settings fullpage settings comments
#storyboard_viewer #storyboard_viewer padding-bottom: 50px; position: relative; none none This encompasses the entire view including the annotation.
.storyboard_viewer .storyboard_viewer padding-bottom: 50px; position: relative; none none This encompasses the entire view including the annotation. Is the same element as #storyboard_viewer; this will change to fullscreen when toggled to fullpage or fullscreen.
.fullpage .fullpage position: fixed; top: 0; bottom: 0; left: 0; right: 0; width: 100%; height: 100%; background: #000; border: 1px solid #000; z-index: 102; font-size: 30px; none none This encompasses the entire view including the annotation. Is the same element as #storyboard_viewer; this will only be avaliable when toggled to fullpage or fullscreen.
.seadragonbox .seadragonbox width: 100%; display: inline-block; height:600px; none none Child elements are the #header_toolbar and openseadragon element. This does not change any annotation css
#header_toolbar #header_toolbar width: 100%; display: flex; none margin: 0px; none
#autoRunButton #autoRunButton none none none to hide add display: none; to css
#infoButton #infoButton none none none to hide add display: none; to css
#tagsButton #tagsButton none none none to hide add display: none; to css
#overlayButton #overlayButton none none none to hide add display: none; to css
#zoomInButton #zoomInButton none none none to hide add display: none; to css
#zoomOutButton #zoomOutButton none none none to hide add display: none; to css
#homeZoomButton #homeZoomButton none none none to hide add display: none; to css
#previousButton #previousButton none none none to hide add display: none; to css
#nextButton #nextButton none none none to hide add display: none; to css
#fullScreenButton #fullScreenButton none none none to hide add display: none; to css
#infoButton .toolbarButton font-size: 1.5rem; background-color: #F0F0F0; border: 2px solid #D3D3D3; width: 100%; position: relative; margin-right: 2px; (except for last button) margin: 0px!important; font-size: .79rem; margin-right: 5px; (execept for last button) This is the class on all the buttons, not just the info button
.annotation .annotation width: 20%; resize: both; border: 2px solid black; background: white; position: absolute; top: 75px; z-index: 2000; max-width: calc(100% - 20px); max-height: calc(100% - 75px); height: auto; overflow: scroll; margin-left: 20px; word-wrap: break-word; width: calc(100% - 4px); resize: both; border: 2px solid black; background: white; position: absolute; font-size: 14px!important; top: calc(.79rem + 6px)!important; z-index: 2000; max-width: 100%; height: auto!important; overflow: scroll; margin-left: 0px; word-wrap: break-word; max-height: 33%!important; top: 55px; max-height: calc(100% - 110px); none
#annotation_controls #annotation_controls display: flex; background: black; position: -web-sticky; position: sticky; top: 0; flex-wrap: wrap; none none none
#annotation_text #annotation_text none none none none