/* these TTF fonts are used only for lyrics display, so we can measure text for ChordPro positioning: */
@font-face {
	font-family: DejaVuSans; /* 1 - proportional sans */
	src: url(/thirdparty/fonts/DejaVuSans.ttf);
}
@font-face {
	font-family: DejaVuSerif; /* 2 - proportional serif */
	src: url(/thirdparty/fonts/DejaVuSerif.ttf);
}
@font-face {
	font-family: FreeMono; /* 3 - monospace serif */
	src: url(/thirdparty/fonts/FreeMono.ttf); /* DejaVu doesn't have a monospace serif font */
}
@font-face {
	font-family: DejaVuSansMono; /* 4 - monospace sans */
	src: url(/thirdparty/fonts/DejaVuSansMono.ttf);
}

.title {
	font-family: Arial, sans-serif;
	font-size: 18px;
	line-height: 18px;
	font-weight: bold;
	color: #000000;
	margin: 0px 0px 12px 0px;
	text-transform: uppercase;
}

.heading {
	font-family: Arial, sans-serif;
	font-size: 15px; /* was 12 */
	line-height: 15px; /* was 12 */
	font-weight: bold;
	color: #1B75BB;
	margin: 0px 0px 12px 0px;
	text-transform: uppercase;
}
#sidebar .heading {
	font-family: Impact, HelveticaNeue-CondensedBlack, Roboto Condensed, sans-serif-condensed;
	font-size: 22px;
	line-height: 22px;
	font-weight: normal;
	margin: 0px 0px 20px 0px;
	text-transform: uppercase;
}
#page.public #sidebar .heading {
	color: #FFFFFF;
}
.sidebar_menu_heading {
	font-family: Arial, sans-serif;
	font-size: 13px; /* was 12 */
	line-height: 13px; /* was 12 */
	font-weight: bold;
	color: #FFFFFF;
	margin: 24px 0px 12px 0px;
	text-transform: uppercase;
}
.tldr .heading {
	font-size: 14px;
	font-style: italic;
}

.subheading {
	font-family: Arial, sans-serif;
	font-size: 13px; /* was 12 */
	line-height: 13px; /* was 12 */
	font-weight: bold;
	color: #000000;
	margin: 0px 0px 12px 0px;
	text-transform: uppercase;
}
.subheading.highlighted {
	color: #1B75BB;
}
#sidebar .subheading {
	text-transform: none;
}
#sidebar .callout .subheading {
	color: #1B75BB !important;
}
#popup_top_toolbar .subheading {
	color: #1B75BB;
	text-transform: none;
}
#page.public #sidebar .subheading {
	font-family: Impact, HelveticaNeue-CondensedBlack, Roboto Condensed, sans-serif-condensed;
	font-size: 18px;
	line-height: 18px;
	font-weight: normal;
	color: #99C6E4;
}

.body, .page_menu, .contemplate_search_results_heading, .contemplate_search_results_preview {
	font-family: Arial, sans-serif;
	font-size: 12px; /* was 11 */
	line-height: 18px; /* was 17 */
	font-style: normal;
	font-weight: normal;
	color: #000000;
	margin: 0px 0px 14px 0px;
}
#page.public #sidebar .body {
	color: #FFFFFF;
}
#sidebar .callout .body {
	line-height: 14px;
	color: #1B75BB !important;
}
#sidebar .callout .body a {
	color: #1B75BB !important;
	text-decoration-color: #1B75BB;
}
.tldr .body {
	font-size: 13px;
}
.contemplate_search_results_link {
	text-transform: uppercase;
	font-weight: bold;
}

.body_large {
	font-family: Arial, sans-serif;
	font-size: 14px !important;
	line-height: 20px;
	font-style: normal;
	font-weight: normal;
	color: #000000;
	margin-top: 0px;
}

a, .body a, .body_large a {
	color: #1B75BB;
	text-decoration: underline;
	text-decoration-color: #3D9AE3;
}
a:hover, .body a:hover, .body_large a:hover {
	color: #99C6E4;
	text-decoration-color: #99C6E4;
}
#page.public #sidebar .body a {
	color: #FFFFFF;
	text-decoration-color: #FFFFFF;
}
a.invert {
	background: #1B75BB;
	color: #FFFFFF;
	padding: 2px 3px;
	margin: -2px -3px;
	border-radius: 4px;
}
a.fade {
	color: #CCCCCC;
	text-decoration-color: #CCCCCC;
}
a.disabled, .disabled a {
	/* this also gets some attributes from the .disabled class */
	pointer-events: none;
	/* this looks better on the view and edit pages, but without looks better on the list pages:
	opacity: 1.0;
	filter: alpha(opacity=100);
	color: #AAAAAA;
	*/
	text-decoration: none;
}

.note_strong {
	font-family: Arial, sans-serif;
	font-size: 12px;
	font-weight: bold;
	margin-top: 0px;
	color: #1B75BB;
}
.note_strong a {
	color: #1B75BB;
	text-decoration-color: #1B75BB;
}

.note {
	font-family: Arial, sans-serif;
	font-size: 12px;
	font-style: italic;
	margin-top: 0px;
	color: #999999;
}
.note a {
	color: #476E83;
	text-decoration-color: #476E83;
}

.highlight {
	background: #FFFF00;
}
#sidebar .highlight {
	color: #000000;
}
input.highlight, textarea.highlight, #contacts_table span.highlight {
	background: #FFFFCC;
}

.warning {
	color: #CC0000;
}
.ready {
	color: #00CC00;
}

.fade {
	color: #CCCCCC;
}
#popover .fade {
	color: #999999;
}
#page.info .fade {
	color: #999999;
}

.uppercase {
	text-transform: uppercase !important;
}

.tooltip {
	cursor: pointer;
	text-decoration: underline;
	text-decoration-style: dashed;
}

.code {
	font-family: "Courier New", Courier, monospace;
	background: #EEEEEE;
}

#photo_reposition_viewer {
	position: relative;
	width: 100%;
	aspect-ratio: 1;
	background: #CCCCCC;
	overflow: hidden;
}

#photo_reposition_handler {
	position: relative;
	background-size: cover;
	background-repeat: no-repeat;
	-webkit-transform-origin: top left; /* this doesn't look as nice as zooming from the center, but the calculations need some complicated adjusting if we zoom from the center; I think we need to update the top and left variables after each zoom */
}

.chords_content {
	font-size: 16px;
	line-height: 20px;
	font-style: normal;
	font-weight: normal;
	color: #000000;
}
.chords_content.serif {
	font-family: "Courier New", Courier, monospace;
}
.chords_content.sans {
	font-family: "Menlo", Monaco, monospace;
}

.lyrics_content {
	font-size: 16px; /* this is also set as the default argument value in applyChordFormatting */
	line-height: 20px;
	font-style: normal;
	font-weight: normal;
	color: #000000;
}
.lyrics_content.proportional_sans {
	font-family: DejaVuSans, Helvetica, Arial, sans-serif;
}
.lyrics_content.proportional_serif {
	font-family: DejaVuSerif, Georgia, "Times New Roman", Times, serif;
}
.lyrics_content.monospace_serif {
	font-family: FreeMono, "Courier New", Courier, monospace;
}
.lyrics_content.monospace_sans {
	font-family: DejaVuSansMono, "Menlo", Monaco, monospace;
}

/* tinyMCE content (inside its iframe) */
body#tinymce {
	font-size: 12px;
}
.mce-item-anchor {
	background-image: url("/thirdparty/tinymce_plugins/marker/img/marker_button.svg") !important;
	background-position: left 2px !important;
}
.mce-content-body .mce-item-anchor:empty {
	width: 10px !important;
}

.details {
	color: #999999;
}

.centered {
	text-align: center;
}

.right {
	text-align: right;
}

/* the songs and events have separate styles, so we could define a separate set of colors; but more likely we could rename the labels to not be song or event specific and then use the same set of labels for both */
.song_label_0, .song_label_0 a, .event_label_0, .event_label_0 a, .contact_label_0, .contact_label_0 a {
	color: #000000 !important; /* black */
	text-decoration-color: #000000;
}
.song_label_0 a:hover, .event_label_0 a:hover, .contact_label_0 a:hover {
	text-decoration-color: #000000;
}
.song_label_1, .song_label_1 a, .event_label_1, .event_label_1 a, .contact_label_1, .contact_label_1 a {
	color: #D72629 !important; /* red */
	text-decoration-color: #D72629;
}
.song_label_1 a:hover, .event_label_1 a:hover, .contact_label_1 a:hover {
	text-decoration-color: #D72629;
}
.song_label_2, .song_label_2 a, .event_label_2, .event_label_2 a, .contact_label_2, .contact_label_2 a {
	color: #F68B27 !important; /* orange */
	text-decoration-color: #F68B27;
}
.song_label_2 a:hover, .event_label_2 a:hover, .contact_label_2 a:hover {
	text-decoration-color: #F68B27;
}
.song_label_7, .song_label_7 a, .event_label_7, .event_label_7 a, .contact_label_7, .contact_label_7 a {
	color: #F0BE03 !important; /* yellow */
	text-decoration-color: #F0BE03;
}
.song_label_7 a:hover, .event_label_7 a:hover, .contact_label_7 a:hover {
	text-decoration-color: #F0BE03;
}
.song_label_3, .song_label_3 a, .event_label_3, .event_label_3 a, .contact_label_3, .contact_label_3 a {
	color: #51C93E !important; /* green; it's 51D43E everywhere else, but this color looks a little better in website lists */
	text-decoration-color: #51C93E;
}
.song_label_3 a:hover, .event_label_3 a:hover, .contact_label_3 a:hover {
	text-decoration-color: #51C93E;
}
.song_label_14, .song_label_14 a, .event_label_14, .event_label_14 a, .contact_label_14, .contact_label_14 a {
	color: #199002 !important; /* dark green */
	text-decoration-color: #199002;
}
.song_label_14 a:hover, .event_label_14 a:hover, .contact_label_14 a:hover {
	text-decoration-color: #199002;
}
.song_label_4, .song_label_4 a, .event_label_4, .event_label_4 a, .contact_label_4, .contact_label_4 a {
	color: #32C1F1 !important; /* blue */
	text-decoration-color: #32C1F1;
}
.song_label_4 a:hover, .event_label_4 a:hover, .contact_label_4 a:hover {
	text-decoration-color: #32C1F1;
}
.song_label_8, .song_label_8 a, .event_label_8, .event_label_8 a, .contact_label_8, .contact_label_8 a {
	color: #247CBF !important; /* dark blue */
	text-decoration-color: #247CBF;
}
.song_label_8 a:hover, .event_label_8 a:hover, .contact_label_8 a:hover {
	text-decoration-color: #247CBF;
}
.song_label_5, .song_label_5 a, .event_label_5, .event_label_5 a, .contact_label_5, .contact_label_5 a {
	color: #8D22FF !important; /* purple */
	text-decoration-color: #8D22FF;
}
.song_label_5 a:hover, .event_label_5 a:hover, .contact_label_5 a:hover {
	text-decoration-color: #8D22FF;
}
.song_label_12, .song_label_12 a, .event_label_12, .event_label_12 a, .contact_label_12, .contact_label_12 a {
	color: #FF6EC7 !important; /* pink */
	text-decoration-color: #FF6EC7;
}
.song_label_12 a:hover, .event_label_12 a:hover, .contact_label_12 a:hover {
	text-decoration-color: #FF6EC7;
}
.song_label_6, .song_label_6 a, .event_label_6, .event_label_6 a, .contact_label_6, .contact_label_6 a {
	color: #999999 !important; /* gray */
	text-decoration-color: #999999;
}
.song_label_6 a:hover, .event_label_6 a:hover, .contact_label_6 a:hover {
	text-decoration-color: #999999;
}
.song_label_9, .song_label_9 a, .event_label_9, .event_label_9 a, .contact_label_9, .contact_label_9 a {
	color: #595959 !important; /* dark gray */
	text-decoration-color: #595959;
}
.song_label_9 a:hover, .event_label_9 a:hover, .contact_label_9 a:hover {
	text-decoration-color: #595959;
}
.song_label_13, .song_label_13 a, .event_label_13, .event_label_13 a, .contact_label_13, .contact_label_13 a {
	color: #874B12 !important; /* brown */
	text-decoration-color: #874B12;
}
.song_label_13 a:hover, .event_label_13 a:hover, .contact_label_13 a:hover {
	text-decoration-color: #874B12;
}
.song_label_10, .song_label_10 a, .event_label_10, .event_label_10 a, .contact_label_10, .contact_label_10 a {
	color: #000000 !important; /* black */
	text-decoration-color: #000000;
}
.song_label_10 a:hover, .event_label_10 a:hover, .contact_label_10 a:hover {
	text-decoration-color: #000000;
}

/* tweak some styles for the on-screen print preview; we'll tweak them further in the print stylesheet for actual printing */
/* this isn't really needed anymore since we're setting all the text sizes on the fly in attachments_list, right? */
/* share set list: */
#page.set_list_share_songs .title.toc_title, #page.smart_list_share_songs .title.toc_title, #page.song_share_songs .title.toc_title {
	font-size: 32px !important;
}
#page.set_list_share_set_list .title, #page.smart_list_share_set_list .title, #page.set_list_share_songs .title, #page.smart_list_share_songs .title, #page.song_share_songs .title {
	font-size: 32px;
	line-height: 100%;
	text-transform: none;
}
#page.set_list_share_set_list .subtitle, #page.smart_list_share_set_list .subtitle {
	font-size: 14px;
	line-height: 100%;
	padding-top: 4px; /* this is the title height minus 2x the subtitle height */
	font-weight: bold;
}
#page.set_list_share_set_list .subheading, #page.smart_list_share_set_list .subheading {
	font-size: 15px;
	line-height: 100%;
}
#page.set_list_share_set_list tr.labels, #page.smart_list_share_set_list tr.labels {
	border-bottom: 1px solid #000000;
}
tr.labels.top_border {
	border-top: 2px solid #000000;
}
#page.set_list_share_set_list #songs_list td.label, #page.smart_list_share_set_list #songs_list td.label {
	font-family: Arial, sans-serif;
	font-size: 14px;
	line-height: 14px;
	padding: 3px 8px 2px 8px;
	font-style: normal;
	font-weight: normal;
	color: #000000;
}
#page.set_list_share_set_list #songs_list td, #page.smart_list_share_set_list #songs_list td {
	padding: 8px 8px 7px 8px;
	height: auto;
	border-bottom: none;
}
#page.set_list_share_set_list #songs_list tr.row_section, #page.smart_list_share_set_list #songs_list tr.row_section {
	height: auto !important; /* this lets the height change to match the subheading text size */
}
#page.set_list_share_set_list #songs_list tr.row_section th, #page.smart_list_share_set_list #songs_list tr.row_section th {
	padding: 4px 8px;
	height: 12px; /* this sets a minimum height when the text gets real small, but we should probably scale it with the text size */
}
#page.set_list_share_set_list #songs_list tr.pause_default td, #page.smart_list_share_set_list #songs_list tr.pause_default td {
	padding: 0 0 5px 0 !important;
	height: 0px;
	background: #777777;
}
#page.set_list_share_set_list #songs_list tr.pause_name td, #page.smart_list_share_set_list #songs_list tr.pause_name td {
	padding: 2px 8px;
	height: 12px; /* this sets a minimum height when the text gets real small, but we should probably scale it with the text size */
	color: #000000;
	background: none;
	border-top: 2px solid #777777;
	border-bottom: 2px solid #777777;
}
#page.set_list_share_set_list #songs_list td.body, #page.smart_list_share_set_list #songs_list td.body {
	font-size: 16px;
	line-height: 100%;
}
#page.set_list_share_set_list #songs_list .notes_label, #page.smart_list_share_set_list #songs_list .notes_label {
	font-family: Arial, sans-serif;
	font-size: 16px;
	font-weight: bold;
	line-height: 100%;
	margin: 16px 0 0 0;
}
#page.set_list_share_set_list #songs_list .notes, #page.smart_list_share_set_list #songs_list .notes {
	font-family: Arial, sans-serif;
	font-size: 16px;
	line-height: 100%;
	margin-top: 2px;
}
#page.set_list_share_set_list #songs_list .set_list_footer, #page.smart_list_share_set_list #songs_list .set_list_footer {
	font-family: Arial, sans-serif;
	font-size: 12px;
	line-height: 100%;
	text-align: right;
}
/* share songs: */
#page.set_list_share_songs #songs_list p, #page.smart_list_share_songs #songs_list p {
	color: #000000;
	margin: 0;
}
#page.set_list_share_songs #songs_list .title, #page.smart_list_share_songs #songs_list .title {
	font-family: Arial, sans-serif;
	font-size: 20px;
	font-weight: bold;
	padding-bottom: 4px;
}
#page.set_list_share_songs #songs_list .break, #page.smart_list_share_songs #songs_list .break {
	font-family: Arial, sans-serif;
	font-size: 24px;
	font-weight: bold;
	text-align: center;
}
#page.set_list_share_songs #songs_list .pause, #page.smart_list_share_songs #songs_list .pause {
	font-family: Arial, sans-serif;
	font-size: 20px;
	font-weight: bold;
	font-style: italic;
	text-align: center;
}
#page.set_list_share_songs #songs_list .label, #page.smart_list_share_songs #songs_list .label {
	font-family: Arial, sans-serif;
	font-size: 12px;
	font-weight: bold;
	padding-bottom: 2px;
}
#page.set_list_share_songs #songs_list .field, #page.smart_list_share_songs #songs_list .field {
	font-family: Arial, sans-serif;
	font-size: 12px;
	padding-bottom: 2px;
}
#page.set_list_share_songs #songs_list .notes, #page.smart_list_share_songs #songs_list .notes {
	font-family: Arial, sans-serif;
}
#page.set_list_share_songs #songs_list .notes, #page.smart_list_share_songs #songs_list .notes, #page.set_list_share_songs #songs_list .lyrics, #page.smart_list_share_songs #songs_list .lyrics, #page.set_list_share_songs #songs_list .chords, #page.smart_list_share_songs #songs_list .chords {
	font-size: 12px;
}
#page.set_list_share_songs #songs_list .songs_list_footer, #page.smart_list_share_songs #songs_list .songs_list_footer {
	font-family: Arial, sans-serif;
	font-size: 10px;
	color: #000000;
}
#page.set_list_share_songs #songs_list .songs_list_footer .center, #page.smart_list_share_songs #songs_list .songs_list_footer .center {
	width: 20%;
	margin: 0 auto;
	text-align: center;
}
#page.set_list_share_songs #songs_list .songs_list_footer .right, #page.smart_list_share_songs #songs_list .songs_list_footer .right {
	width: 40%;
	float: right;
}
#page.set_list_share_songs #songs_list hr, #page.smart_list_share_songs #songs_list hr {
	height: 1px;
	border: 0;
	color: #000000;
	background-color: #000000;
	margin: 4px 0;
}

.footer {
	font-family: Arial, sans-serif;
	font-size: 11px; /* was 8, then 10 */
	line-height: 16px; /* was 13, then 15 */
	color: #D0D2D3;
	margin: 0px;
}
.footer a {
	text-decoration: none;
	color: #D0D2D3;
	text-decoration-color: #D0D2D3;
}
.footer a:hover {
	color: #FFFFFF;
}

.menu, .submenu {
	font-family: Arial, sans-serif;
	font-size: 13px; /* was 12 */
	line-height: 13px;  /* was 12 */
	margin: 0;
	color: #404041;
	text-transform: uppercase;
}
.submenu {
	font-size: 12px; /* was 11 */
	text-transform: none;
}
#login_menu.menu, #login_menu.menu a {
	color: #D0D2D3;
	text-decoration-color: #D0D2D3;
}
#login_menu .menu_disclosure {
	padding-right: 16px;
	background-image: url(/images/templates/menu_disclosure_0.png);
	background-size: 12px 6px;
	background-repeat: no-repeat;
	background-position: center right;
}
#login_menu .menu_disclosure:hover {
	background-image: url(/images/templates/menu_disclosure_1.png);
}
#login_menu .menu_disclosure .popover {
	text-transform: none;
	color: #000000;
}
#login_menu .menu_disclosure .popover a {
	color: #000000;
	text-decoration-color: #000000;
}
#login_menu .menu_disclosure:hover .popover {
	display: block;
	z-index: 100;
}
.menu a, .submenu a {
	text-decoration: none;
	color: #404041;
	text-decoration-color: #404041;
}
.menu a:hover, .submenu a:hover, #login_menu.menu a:hover {
	color: #1B75BB;
}
.menu_item.active, .submenu_item.active {
	font-weight: bold;
	color: #404041;
}
#account_menu .menu_item.active {
	background: url(/images/templates/menu_pointer.png) center bottom no-repeat;
	background-size: 12px 4px;
}
#login_menu .menu_item.active {
	background: url(/images/templates/menu_pointer_gray.png) center bottom no-repeat;
	background-size: 12px 4px;
}
#login_menu .menu_item.project_picker {
	font-size: 14px;
	text-transform: none;
}

.sidebar_menu {
	font-family: Arial, sans-serif;
	font-size: 12px; /* was 11 */
	line-height: 15px; /* was 14 */
	font-style: normal;
	font-weight: normal;
	color: #A4C8E4;
	margin-top: 0px;
}
.sidebar_menu a {
	color: #A4C8E4;
	text-decoration: none;
}
.sidebar_menu a.active, .sidebar_menu a:hover {
	color: #FFFFFF;
}
.sidebar_menu img {
	margin-bottom: -3px;
	margin-right: 2px;
	opacity: .6;
}
.sidebar_menu a.active img, .sidebar_menu a:hover img {
	opacity: 1.0;
}

.page_menu {
	padding: 2px 0 3px 0;
	margin-bottom: 16px;
	border-top: 1px solid black;
	border-bottom: 1px solid black;
}

.segmented_buttons {
	font-size: 15px;
	margin-top: 10px;
	margin-bottom: 30px;
	text-transform: none;
}
.segmented_buttons a {
	padding: 4px 8px;
	background: #DDDDDD;
	border-right: 1px solid #AAAAAA;
	text-decoration: none;
}
.segmented_buttons a:hover {
	color: #1B75BB;
	background: #F6F6F6;
}
.segmented_buttons a.selected {
	background: #F6F6F6;
}
.segmented_buttons a.first {
	border-radius: 10px 0 0 10px;
}
.segmented_buttons a.last {
	border-radius: 0 10px 10px 0;
	border-right: none;
}

a.button, input.button {
	display: block; /* this lets us control the width of the buttons */
	/* float: left; this lets us place more than one on a line, which we can also do with the inline style, below */
	text-decoration: none;
	border-radius: 10px;
}
input.button {
	border: 0;
	cursor: pointer;
}
a.button.inline, input.button.inline {
	display: inline !important;
	width: auto !important;
}

a.button.large, input.button.large {
	background: #D0D2D3;
	color: #404041;
	box-shadow: 0 0 12px #333333;
	width: 112px; /* 112 - 34 padding (padding is ignored for inline elements); this is a default; we may have to override it for particular buttons */
	padding: 7px 17px; /* added to the line height, this gives a total height of 28px */
	font-family: Arial, sans-serif;
	font-weight: bold;
	font-size: 12px;
	line-height: 12px;
	text-align: center;
	text-transform: uppercase;
}
a.button.medium, input.button.medium {
	background-color: #F0F0F0; 
	/* thanks http://css-tricks.com/css3-gradients/ */
	background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#FFFFFF), to(#F0F0F0));
	background-image: -webkit-linear-gradient(top, #FFFFFF, #F0F0F0); 
	background-image:    -moz-linear-gradient(top, #FFFFFF, #F0F0F0);
	background-image:     -ms-linear-gradient(top, #FFFFFF, #F0F0F0);
	background-image:      -o-linear-gradient(top, #FFFFFF, #F0F0F0);
	border: 1px solid #E6E6E6;
	color: #1B75BB;
	width: 90px; /* 90 - 20 padding (padding is ignored for inline elements); this is a default; we may have to override it for particular buttons */
	padding: 5px 10px 6px 10px; /* added to the line height, this gives a total height of 22px */
	font-family: Arial, sans-serif;
	font-weight: bold;
	font-size: 11px; /* was 10 */
	line-height: 11px;
}
a.button.medium.collapsible, input.button.medium.collapsible {
	width: auto;
}
a.button.medium.double, input.button.medium.double {
	/* this makes one button that spans the width of two buttons with a stack_left sized margin */
	width: 200px;
}
a.button.medium.full, input.button.medium.full {
	width: 100%;
}
a.button.small, input.button.small {
	background: #FFFFFF;
	border: 1px solid #E6E6E6;
	color: #1B75BB;
	width: 85px; /* 85 - 20 padding (padding is ignored for inline elements); this is a default; we may have to override it for particular buttons */
	padding: 6px 10px; /* added to the line height, this gives a total height of 22px */
	font-family: Arial, sans-serif;
	font-weight: normal;
	font-size: 10px;
	line-height: 10px;
}
input.button.small.invert {
	background: #1B75BB;
	color: #FFFFFF;
}
a.button.tiny, input.button.tiny {
	background: #FFFFFF;
	border: 1px solid #E6E6E6;
	color: #1B75BB;
	width: 80px; /* 80 - 20 padding (padding is ignored for inline elements); this is a default; we may have to override it for particular buttons */
	padding: 3px 6px 4px 6px; /* added to the line height, this gives a total height of 18px */
	font-family: Arial, sans-serif;
	font-weight: normal;
	font-size: 10px;
	line-height: 10px;
}

a:hover.button.large, input:hover.button.small {
	background: #AAAAAA;
}
a:hover.button.medium, input:hover.button.medium {
	background-color: #E0E0E0; 
	/* thanks http://css-tricks.com/css3-gradients/ */
	background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#FFFFFF), to(#E0E0E0));
	background-image: -webkit-linear-gradient(top, #FFFFFF, #E0E0E0); 
	background-image:    -moz-linear-gradient(top, #FFFFFF, #E0E0E0);
	background-image:     -ms-linear-gradient(top, #FFFFFF, #E0E0E0);
	background-image:      -o-linear-gradient(top, #FFFFFF, #E0E0E0);
}
a:hover.button.small, input:hover.button.small {
	background: #E6E6E6;
}
input:hover.button.small.invert {
	background: #145588; /* or 176099 */
}

a.button.medium.destructive, input.button.medium.destructive {
	color: #EB5932;
}
a.button.medium.fade, input.button.medium.fade {
	color: #CCCCCC;
}
a.button.small.fade, input.button.small.fade {
	color: #CCCCCC;
}

.button_text_align.medium {
	padding-top: 4px;
}
.button_text_align.small {
	padding-top: 3px;
}

a.button.add {
	display: inline-block;
	padding: 4px 0 4px 24px;
	background: url(/images/templates/icon_add.png) left no-repeat;
	background-size: 16px 16px;
	font-style: italic;
	color: #999999;
	margin-right: 20px; /* this lets us stack the pause button next to the songs button */
}
a.button.add:hover {
	color: #1B75BB;
}

a.button.remove {
	padding: 4px 0;
	background: url(/images/templates/icon_remove.png) left no-repeat;
	background-size: 16px 16px;
}
.remove_placeholder {
	/* this lets us size a row without a remove button to be the same height as a row with a remove button */
	display: inline-block;
	height: 12px;
}

a.button.text, a.text_button {
	font-weight: bold;
	text-decoration: none;
}
#popup_top_toolbar a.text_button {
	font-weight: normal;
}

a.button.text.previous {
	font-size: 11px; /* same as button.medium */
	width: 90px; /* same as button.medium */
	text-align: right;
}
a.button.text.next {
	font-size: 11px; /* same as button.medium */
	margin-left: -5px; /* same as button_medium_accessory */
}
a.button.text.previous img, a.button.text.next img {
	margin-bottom: -2px; /* align the arrow icons */
	border: 0; /* needed for IE */
}

a.button_medium_accessory {
	display: inline-block;
	font-size: 11px;
	margin-top: 5px;
	margin-left: -5px;
	text-decoration: none;
}
#page.stage_plot_layout_edit a.button_medium_accessory {
	margin-left: 17px; /* or 3px to align with the left edge of the Download button */
}
/*
a.button_medium_accessory.destructive {
	color: #EB5932;
}
*/
a.button_medium_accessory.fade {
	color: #CCCCCC;
}
/*
a#smart_copy_button {
	margin-top: -10px;
	margin-left: 0;
	width: 90px; /* same as button.medium * /
	text-align: center;
}
*/

/* this is different from the #popover style in templates/popup.css */
.popover {
	position: absolute;
	padding: 10px;
	min-width: 120px;
	background: #E6E6E6;
	box-shadow: 0 0 12px 2px #BBBBBB;
	border-radius: 10px;
	display: none;
}

.no_bottom {
	margin-bottom: 0px !important;
}

.no_top {
	margin-top: 0px !important;
}

.small_bottom {
	margin-bottom: 4px !important;
}

.small_top {
	margin-top: 4px !important;
}

.body_bottom {
	margin-bottom: 14px !important;
}

.big_bottom {
	margin-bottom: 20px !important;
}

.big_top {
	margin-top: 20px !important;
}

.negative_top {
	display: block;
	margin-top: -12px !important;
}

.indent {
	float: left; /* this lets us set a width without forcing a newline */
	/*padding-top: 4px; /* this is required to keep the vertical alignment when floating */
	width: 60px;
}

.bullet_width {
	display: inline-block;
	width: 12px;
	text-align: left;
}

.list_item_large {
	clear: left;
	min-height: 165px; /* photo height */
	margin-bottom: 16px;
}
.list_item_medium {
	clear: left;
	min-height: 165px; /* photo height */
	margin-bottom: 16px;
}
.list_item_small {
	clear: left;
	min-height: 70px; /* photo height */
	margin-bottom: 20px;
}

.photo_margin_large {
	margin-left: 266px; /* 250 photo + 16 margin */
}
.photo_margin_medium {
	margin-left: 181px; /* 165 photo + 16 margin */
}
.photo_margin_small {
	margin-left: 90px; /* 70 photo + 20 margin */
}

.option_multiline {
	float: left; /* this lets us set up a multi-line label with a hanging indent */
}
.option_multiline_margin {
	margin-left: 22px;
}
.option_multiline_margin_large {
	margin-left: 38px;
}
.option_singleline_right {
	float: right;
	margin-top: -18px;
}

.scrolling_options {
	width: 120px; /* we'll override this with a form_element style */
	height: 80px; /* we can override this on each page if needed */
	resize: vertical; /* apparently this isn't supported in IE */
	overflow: scroll;
	overflow-x: hidden;
	overflow-y: scroll;
	border: 1px solid #CCCCCC;
	border-radius: 5px 0 0 5px; /* rounding the right side would interfere with the scroll bar graphic */
	margin-bottom: 10px !important; /* since the form_element styles have a margin of 0 */
}
#page.song_view .scrolling_options {
	height: 180px;
}
#page.songs_spreadsheet .scrolling_options, #page.events_spreadsheet .scrolling_options, #page.contacts_spreadsheet .scrolling_options, #page.transactions_spreadsheet .scrolling_options {
	height: 56px;
}

.scrolling_spreadsheet {
	overflow-x: scroll;
	/*margin-left: 129px;*/
}

th.fixed_column, td.fixed_column {
	/*position: absolute;*/
	position: -webkit-sticky;
	position: sticky;
	width: 114px;
	left: 0px;
	background-color: #FFFFFF;
	z-index: 100;
}

#sidebar hr {
	border: 0;
	height: 1px;
	background-image: none;
	margin: 20px 0;
	background-color: #99C6E4;
	clear: both;
}

ul, ol {
	padding-left: 20px;
}

li {
	margin-bottom: 5px;
}

li ol, li ul {
	margin-top: 5px;
}

table {
	border-collapse: collapse;
	margin-bottom: 10px;
}

th {
	background-color: #F0F0F0;
	text-align: left;
	padding: 10px 12px 9px 12px;
}
th.plain {
	background: none;
	padding: 6px 12px 6px 12px;
}
th:first-child {
	border-top-left-radius: 10px;
}
th:last-child {
	border-top-right-radius: 10px;
}
/* don't round the corners on subheadings inside picker windows (I think this only affects the song picker) */
#popup_list th {
	border-radius: 0;
}
/* don't round the corners on the share pages unless we add that to the printed set lists */
#page.set_list_share_set_list th, #page.smart_list_share_set_list th {
	border-radius: 0;
}
th.centered {
	text-align: center;
}
th.right {
	text-align: right;
}

td {
	padding: 10px 12px 9px 12px;
	/*
	font-size: 11px !important;
	line-height: 11px !important;
	*/
}

/* we're using the "first visible" style in tables with a transparent heading to round the corners of the first visible row */
tr:first-child td:first-child, tr.first_visible td:first-child {
	border-top-left-radius: 10px;
}
tr:first-child td:first-child, tr.first_visible td:last-child {
	border-top-right-radius: 10px;
}
tr:last-child td:first-child {
	border-bottom-left-radius: 10px;
}
tr:last-child td:last-child {
	border-bottom-right-radius: 10px;
}
/* don't round the corners on the share pages unless we add that to the printed set lists */
#page.set_list_share_set_list tr:last-child td, #page.smart_list_share_set_list tr:last-child td {
	border-radius: 0;
}
#page.checklist_items_edit table.checklist tr:first-child td:first-child {
	border-top-left-radius: 10px;
}
#page.checklist_items_edit table.checklist tr:first-child td:last-child {
	border-top-right-radius: 10px;
}
/* don't round the corners in plain tables */
table.plain tr td {
	border-radius: 0 !important;
}

table.features td {
	padding: 2px;
}
table.features td img {
	margin-left: 2px;
	margin-right: 2px;
}

table.comparison {
	border-collapse: collapse;
	margin: 12px auto;
	min-width: 550px;
	/* width: 680px; too bad a simple 100% doesn't respect the container padding */
}
/*
#page.pricing table.comparison {
	min-width: 600px;
}
*/
table.comparison td {
	background: #F6F6F6;
	border-right: 1px solid white;
	border-bottom: 1px solid white;
	padding: 20px 15px;
	font-family: Arial, sans-serif;
	font-size: 17px;
	line-height: 17px;
	font-weight: bold;
	color: #888888;
	text-align: center;
}
table.comparison td.header, table.comparison td.action {
	background: transparent;
	font-size: 12px;
	line-height: 12px;
	color: #000000;
}
table.comparison td.header {
	padding: 10px;
	text-transform: uppercase;
}
#page.pricing td.header, #page.pricing_upcoming td.header {
	padding-bottom: 0;
}
table.comparison td.detail {
	background: transparent;
	font-size: 12px;
	line-height: 12px;
	color: #888888;
	text-transform: none;
	padding: 10px;
}
table.comparison td a.action {
	font-size: 11px;
	margin-top: 10px;
}
table.comparison td.yes {
	color: #00CC00;
}
table.comparison td.label {
	font-size: 12px;
	line-height: 12px;
	color: #1B75BB;
	text-transform: uppercase;
}
#page.pricing table.comparison td.label {
	font-size: 15px;
}
table.comparison td .smaller {
	font-size: 12px;
	font-style: none;
}
table.comparison span.body {
	display: inline-block;
	margin-top: 10px;
	margin-bottom: 0;
	text-transform: none;
}
table.comparison td .note {
	display: inline-block;
	margin-top: 4px;
	font-weight: medium; /* this renders the same as bold, maybe because we're also using italics */
}

table.list th {
	/*border: 1px solid #E6E6E6;*/
}
table.list th {
	background-color: #F0F0F0; 
	/* thanks http://css-tricks.com/css3-gradients/
	background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#FFFFFF), to(#F0F0F0));
	background-image: -webkit-linear-gradient(top, #FFFFFF, #F0F0F0); 
	background-image:    -moz-linear-gradient(top, #FFFFFF, #F0F0F0);
	background-image:     -ms-linear-gradient(top, #FFFFFF, #F0F0F0);
	background-image:      -o-linear-gradient(top, #FFFFFF, #F0F0F0);
	*/
	/*border-right: 1px solid #D6D6D6;*/
	padding: 6px;
	text-transform: none;
}
table.list th:last-child {
	/*border-right: none;*/
}
table.list th.clickable {
	/*
	border-left: 1px solid #D6D6D6;
	border-right: 1px solid #D6D6D6;
	*/
	cursor: pointer;
}
table.list th.clickable.active_asc {
	box-shadow: inset 0px -2px 0px #D6D6D6;
}
table.list th.clickable.active_desc {
	box-shadow: inset 0px 3px 0px #D6D6D6;
}
table.list th.clickable:hover {
	background-color: #E0E0E0; 
	/* thanks http://css-tricks.com/css3-gradients/
	background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#FFFFFF), to(#E0E0E0));
	background-image: -webkit-linear-gradient(top, #FFFFFF, #E0E0E0); 
	background-image:    -moz-linear-gradient(top, #FFFFFF, #E0E0E0);
	background-image:     -ms-linear-gradient(top, #FFFFFF, #E0E0E0);
	background-image:      -o-linear-gradient(top, #FFFFFF, #E0E0E0);
	*/
}
table.list th input[type=checkbox] {
	margin-top: 0;
	margin-bottom: 0;
}
table.list th a {
	color: #000000;
	text-decoration: none;
}
table.list tr {
	border-bottom: 1px solid #D6D6D6;
}
table.list tr.divider {
	border-bottom: 4px solid #E9E9E9;
	border-right: 0; /* avoid a conflict with .divider, until we rename it to .column_divider */
}
table tr.draggable:hover {
	color: #E0E0E0;
}
table.list td {
	background-color: #FCFCFC;
	padding: 6px;
}
table.list td img {
	/* align an icon with text in a table cell */
	margin: -4px 8px -4px 0;
}
table.list tr:last-child {
	border-bottom: none;
}
table.list tr:last-child td:first-child {
	border-bottom-left-radius: 10px;
}
table.list tr:last-child td:last-child {
	border-bottom-right-radius: 10px;
}

table.plain {
	border-bottom: 0;
}
table.plain td {
	padding: 2px 4px 2px 0;
}

tr.row_section th, p.row_section {
	padding: 4px; /* was 0px 4px; do we need that anywhere? if not, we can eliminate the separate padding rule for row_section th below */
	/*height: 22px;*/
	background: #2678B7;
}
table.set_list tr.row_section {
	height: 34px; /* 34 - 8 padding */
}
/* round the corners of the first song if there's only one set and we're not showing the set heading */
#page.set_list_view tr.first_in_set_list td:first-child {
	border-top-left-radius: 10px;
}
#page.set_list_view tr.first_in_set_list td:last-child {
	border-top-right-radius: 10px;
}
/* don't round the corners on the share pages unless we add that to the printed set lists */
#page.set_list_share_set_list tr.row_section th, #page.smart_list_share_set_list tr.row_section th {
	border-radius: 0;
}
table.set_list tr, #page.checklist_items_edit table.checklist tr {
	background-color: #FCFCFC;
}
table.set_list td, #page.checklist_items_edit table.checklist td {
	padding: 2px 4px;
	height: 37px;
	border-bottom: 1px solid #D6D6D6;
}
table.set_list tr.song_link_after td {
	/*border-bottom: 1px dashed #D6D6D6;*/
	border-bottom: none;
	/* this gives us wider spaces between the dashes: */
	/* this works, but we'll just use no border now:
	background-image: linear-gradient(to right, #D6D6D6 50%, transparent 50%);
	background-position: bottom;
	background-repeat: repeat-x;
	background-size: 10px 1px;
	*/
}
table.set_list tr.song_link td, span.song_link { /* the span style is used with the set_columns option; pauses use p tags with the set_columns option, but that seems wrong since the songs are separated by line breaks */
	height: 9px;
	line-height: 9px;
	padding: 0px;
	border-bottom: none;
	opacity: 67%; /* this makes the color of the graphic similar to the color of the pause rows */
}
table.set_list span.song_link {
	display: inline-block;
	padding-top: 2px;
	padding-bottom: 2px;
}
#page.set_list_share_songs p.song_link { /* is this used for anything? */
	text-align: right;
}
/* give a little extra side padding to the set list table */
table.set_list th:first-child, table.set_list td:first-child {
	padding-left: 8px;
	padding-right: 0px;
}
table.set_list th:last-child, table.set_list td:last-child {
	padding-left: 0px;
	padding-right: 8px;
}
/* this eliminates the border from below pause rows */
table.set_list tr.pause_default td, table.set_list tr.pause_name td {
	border-bottom: 0;
}
/* this eliminates the border from below section headings and add rows */
table.set_list tr.row_section th, table.set_list tr#songs_add td, #page.checklist_items_edit table.checklist tr#items_add td {
	border-bottom: 0;
}
/* this eliminates the border from below songs before pauses and the last song in each set */
/* we need double rules because the set list view and edit pages put the border on the cell and the set list share page puts the border on the row */
/* we don't want to remove the pause border on the set list edit page because the pause doesn't have a special style there */
#page.set_list_view table.set_list tr.last_in_group td, table.set_list tr.last_in_set td, table.set_list tr.last_in_group, table.set_list tr.last_in_set {
	border-bottom: 0;
}
/* this was an attempt to put space between the sections without adding a spacer row:
table.set_list tr.last_in_set {
	border-bottom: 20px solid transparent;
}
*/
table.set_list .row_spacer {
	background-color: transparent;
	border-bottom: none;
}
table.set_list tr.row_spacer td {
	border-bottom: none;
	height: 20px;
}
table.set_list tr.last_in_set td:first-child {
	border-bottom-left-radius: 10px;
}
table.set_list tr.last_in_set td:last-child {
	border-bottom-right-radius: 10px;
}
/* don't round the corners on the share pages unless we add that to the printed set lists */
#page.set_list_share_set_list table.set_list tr.last_in_set td, #page.smart_list_share_set_list table.set_list tr.last_in_set td {
	border-radius: 0;
}
table.set_list p.subheading {
	padding: 4px;
	background: #2678B7;
	margin: 2px 0;
}
tr.row_section .subheading, table.set_list tr.pause_name .subheading, table.set_list p.subheading { /* the p style is used with the set_columns option */
	font-size: 14px;
	color: #FFFFFF;
	text-transform: none;
}
tr.row_section .subheading a {
	color: #FFFFFF;
	text-decoration-color: #FFFFFF;
}
table.set_list tr.pause_default td, table.set_list p.pause_default { /* the p style is used with the set_columns option */
	padding: 0 0 4px 0;
	height: 0px;
	line-height: 0px;
	background: #777777;
}
table.set_list p.pause_default { /* the p style is used with the set_columns option */
	height: 4px;
	margin: 2px 0;
}
table.set_list tr.pause_name td, table.set_list p.pause_name { /* the p style is used with the set_columns option */
	padding: 3px 4px;
	height: 12px;
	background: #777777;
	color: #FFFFFF;
	font-weight: bold;
	font-style: italic;
}
table.set_list p.pause_name { /* the p style is used with the set_columns option */
	padding: 0 4px;
	margin: 2px 0;
	height: 20px;
	font-size: 14px;
	line-height: 20px;
	font-weight: normal;
}
#page.set_list_songs_edit table.set_list tr.pause_name td {
	background: #E9E9E9;
	color: #000000;
}
#page.checklist_items_edit .indent_spacer, #page.checklist_view .indent_spacer {
	float: left;
	height: 35px;
}
#page.checklist_view td {
	padding: 2px 6px;
}
.button_progress {
	margin-top: 3px;
}
#page.checklist_view td.body {
	/* not sure if this is worth it: */
	font-size: 13px;
	font-weight: bold;
}
#page.checklist_view td.body .details {
	/* cancel the changes above for the details line: */
	font-size: 12px;
	font-weight: normal;
}

.dragging {
	background: #F6F6F6 !important;
	/*
	opacity: .5;
	filter: alpha(opacity=50); / * IE * /
	*/
	/*
	border-top: 1px solid #CCCCCC;
	border-bottom: 1px solid #CCCCCC;
	*/
	/*
	position: relative;
	top: 5px;
	left: 5px;
	*/
}

/* this will still show the table background color for clear rows, but we'll remove that in the print stylesheet */
#page.set_list_share_set_list .row_colored, #page.smart_list_share_set_list .row_colored {
	background-color: #F2F2F2;
}

tr:last-child {
	border-bottom: none;
}
.row_spacer td {
	line-height: 6px;
}
.attachment_selected {
	background-color: #F2F2F2;
	/*border-bottom: 1px solid #CCCCCC;*/
}
.row_indent td.main_cell {
	padding-left: 24px;
}
.row_inactive {
	opacity: .4; /* it would be nice if this changed the opacity of the contents but not the background */
	filter: alpha(opacity=40); /* IE */
}
.row_inactive .button_progress {
	pointer-events: none;
	cursor: default;
}
.row_editing {
	/* override the inactive style */
	opacity: 1.0;
	filter: alpha(opacity=100); /* IE */
}
.row_pending td {
	font-style: italic;
}
.row_no_project td {
	background-color: #F2F2F2 !important;
}
table.list tr.row_total {
	border-top: 2px solid #BBBBBB; /* we wanted this to be 1px 000000, but then the bottom border of the previous row overrides it */
	border-bottom: none;
}

.report_bar {
	height: 10px;
	margin-top: 4px;
	background: #1B75BB;
}

table.calendar {
	border-collapse: separate;
	border-spacing: 4px;
}
table.calendar th, table.calendar td {
	padding: 6px;
	width: 14%;
	border-radius: 10px;
	font-size: 11px;
	line-height: 11px;
}
table.calendar th {
	background: #E0E0E0;
	text-transform: none;
}
table.calendar td {
	height: 80px;
}
table.calendar td .date {
	font-weight: bold;
	margin: -6px -6px 4px -6px;
	padding: 6px 6px 4px 6px;
}
table.calendar td .add_button {
	font-weight: normal;
	float: right;
}
table.calendar td p {
	margin: 0 0 4px 0;
}
table.calendar td a {
	color: #000000;
	text-decoration: none;
}
table.calendar td a:hover {
	color: #99C6E4;
}
table.calendar td.calendar_cell_current_day .date {
	background: #2678B7;
	border-radius: 10px 10px 0 0;
}
table.calendar td.calendar_cell_current_month, table.calendar td.calendar_cell_current_day {
	background: #F0F0F0;
}
table.calendar td.calendar_cell_extra {
	border: 2px solid #F0F0F0;
}

#page.events #list .heading {
	/* make room for the floats on the left and right; this also sets the spread of the previous/next buttons */
	margin-left: 260px;
	margin-right: 260px;
	padding-top: 8px;
}
#page.events #list p.float_left, #page.events #list p.float_right {
	/* left and right floats */
	width: 240px;
}
#page.events #list #month_menu {
	/* was +8px before we added the Today button */
	margin-top: -12px;
}
#page.events #list .heading img {
	/* next/previous buttons */
	margin-bottom: -1px;
	padding: 0 6px; /* this makes the clickable area larger */
}
table.calendar td img {
	/* small alert icons */
	margin-top: -5px;
}

.pagination_numbers, .pagination_all {
	font-family: Arial, sans-serif;
	font-size: 14px;
	line-height: 14px;
	font-weight: bold;
	color: #000000;
	float: left;
	margin-right: 10px;
}
.pagination_numbers a, .pagination_all a {
	text-decoration: none;
}

.pagination_previous, .pagination_next {
	padding-left: 6px;
	width: 0px;
	float: left;
	margin-right: 10px;
	margin-top: 1px;
	overflow: hidden; /* this lets us leave the text there but hide it from view */
}

.pagination_previous {
	background: url(/images/templates/icon_previous.png) no-repeat;
	background-size: 6px 12px;
}

.pagination_next {
	background: url(/images/templates/icon_next.png) no-repeat;
	background-size: 6px 12px;
}

input[type=text], input[type=password] {
	height: 13px; /* 19 - padding - border */
	padding: 2px;
	border: 1px solid #CCCCCC;
	border-radius: 5px;
}
textarea {
	padding: 2px;
	border: 1px solid #CCCCCC;
	resize: vertical;
	border-radius: 5px 5px 0 5px; /* rounding the bottom right corner would interfere with the resize graphic */
}
input.import_files {
	width: 120px; /* until a file is selected, just show the button but hide the field; this was 78 in English, but needs to be wider for other languages */
	color: transparent;
}
input.import_files.selected {
	width: 220px;
	color: #000000;
}
@-moz-document url-prefix() {
	/* don't set this width for Firefox, where it doesn't work */
	input.import_files {
		width: auto;
	}
}
/* this overrides macOS dark mode, but it puts an ugly border around the select menu; and this really shouldn't be needed since the dark mode isn't inverting any other colors:
select {
	background-color: #FFFFFF;
}
*/

.form_element_max {
	width: 100%;
}

.form_element_extra {
	width: calc(66% - 20px); /* this is the same as two column_thirds */
	margin: 0;
}

.form_element_full {
	width: 420px;
	margin: 0;
}
input[type=text].form_element_full, input[type=password].form_element_full, textarea.form_element_full {
	width: 414px; /* 420 - padding - border */
	margin: 0;
}

.form_element_twothirds {
	width: 266px;
	margin: 0;
}
input[type=text].form_element_twothirds, input[type=password].form_element_twothirds, textarea.form_element_twothirds {
	width: 260px; /* 266 - padding - border */
	margin: 0;
}

.form_element_half {
	width: 200px;
	margin: 0;
}
.column_third .form_element_half {
	width: 100%;
}
.column_two_thirds .column_half .form_element_half {
	/* treat a half column inside a two-thirds column the same as a third column; only song_edit and midi_preset_edit needs this */
	width: 100%;
}
input[type=text].form_element_half, input[type=password].form_element_half, textarea.form_element_half {
	width: 194px; /* 200 - padding - border */
	margin: 0;
}
.column_third input[type=text].form_element_half, .column_third input[type=password].form_element_half, .column_third textarea.form_element_half {
	width: calc(100% - 6px); /* subtract padding and border */
}
.column_two_thirds .column_half input[type=text].form_element_half, .column_two_thirds .column_half input[type=password].form_element_half, .column_two_thirds .column_half textarea.form_element_half {
	/* treat a half column inside a two-thirds column the same a as a third column; only midi_preset_edit needs this */
	width: calc(100% - 6px); /* subtract padding and border */
}

.form_element_third {
	width: 120px;
	margin: 0;
}
input[type=text].form_element_third, input[type=password].form_element_third, textarea.form_element_third {
	width: 114px; /* 120 - padding - border */
	margin: 0;
}
#sidebar .callout .form_element_third {
	width: 160px;
	margin: 0;
}

.form_element_sixth {
	width: 60px;
	margin: 0;
}
.column_third .form_element_sixth {
	width: calc(33% - 10px); /* we'll only subtract half the margin here assuming the second container will be stack_flush */
}
.form_element_quarter {
	width: 90px;
	margin: 0;
}
.column_third .form_element_quarter {
	width: calc(50% - 10px); /* we'll only subtract half the margin here assuming the second container will be stack_flush */
}
.column_third .stack_left .form_element_quarter {
	/* with proportional sizing, if we have a form_element_quarter inside a stack_left inside a column_third, we need to apply a 50% width to the stack_left, and set this to 100% of that */
	/* another approach would be applying form_element_quarter to the p.stack_left, but that would require changing the markup and being inconsistent with the way other form elements are styled */
	width: 100%;
}
input[type=text].form_element_quarter, input[type=password].form_element_quarter, textarea.form_element_quarter {
	width: 84px; /* 90 - padding - border */
	margin: 0;
}
.column_third input[type=text].form_element_quarter, .column_third input[type=password].form_element_quarter, .column_third textarea.form_element_quarter {
	width: calc(50% - 26px); /* subtract gutter, padding and border */
}
.column_third .stack_left input[type=text].form_element_quarter, .column_third .stack_left input[type=password].form_element_quarter, .column_third .stack_left textarea.form_element_quarter {
	width: calc(100% - 6px); /* subtract padding and border */
}

.form_element_sixth {
	width: 53px;
	margin: 0;
}
input[type=text].form_element_sixth, input[type=password].form_element_sixth, textarea.form_element_sixth {
	width: 47px; /* 90 - padding - border */
	margin: 0;
}

.form_element_date_menus {
	width: 64px;
	margin: 0;
}
.form_element_time_menus {
	width: 62px; /* this is a little smaller because of the colon between the hours and minutes */
	margin: 0;
}

/* position accessory buttons across from the field label and right-aligned with the field */
.field_label_with_buttons {
	position: relative;
}
.field_label_buttons {
	/* if we also add a form_element_* class to this element, we'll get the correct width */
	/* actually that with proportional column widths we can just add width=100% here */
	position: absolute;
	right: 0;
	width: calc(100% - 80px) !important; /* this only works if the parent container has field_label_with_buttons; the -80 avoids an overlap with the field label, which only matters if we want to put a link on it, as with the Shares list on the event edit page */
	text-align: right;
	font-size: 10px;
}

/* format the accessory buttons and the Today and Clear links in the date and time menus */
.field_label_buttons a, .date_menus a, .time_menus a {
	font-size: 10px;
	text-decoration: none;
}
.date_menus span, .time_menus span {
	top: -20px !important;
}

#availability_label {
	display: inline-block;
	float: right;
}

#filter_results {
	margin-top: -18px;
	margin-bottom: 10px;
	height: 14px;
}

.attachment_list {
	/*width: 270px;*/
	width: 100%;
}
/*
#filters .attachment_list {
	width: auto;
}
#page.display .attachment_list, #page.contact_edit #documents_list.attachment_list, #page.contact_view #documents_list.attachment_list, #page.transaction_edit #user_share_set_lists_list.attachment_list {
	width: 200px;
}
*/

#popup_list {
	/* this is sized for a 400h popup with a search field on top and buttons underneath */
	border: 1px solid #E6E6E6;
	border-radius: 5px 0 0 5px; /* rounding the right side would interfere with the scroll bar graphic */
	margin-bottom: 14px;
	height: 286px; /* 302 would make the bottom margin match the other vertical margins, but this matches the side margins */
	overflow: auto;
}
#popup_wrapper.popup_list_large #popup_list {
	/* we can use this to override the list height for larger popups */
	height: 492px !important;
}

#page.stage_plot_layout_edit #content_view {
	border: 1px solid black;
}

#page.layout_layout_edit #content_view {
	border: 1px solid black;
	border-radius: 10px;
	overflow: hidden; /* this tucks any layout items into the rounded corners */
}

table.layout_song_list {
	width: calc(100% - 10px); /* subtract the container padding */
}

.layout_song_list th, .layout_song_list td {
	padding: 5px !important;
	white-space: nowrap;
	overflow: hidden;
}

.layout_song_list .set_name {
	font-family: Arial, sans-serif;
	font-size: 44px; /* we'll override this from layout_layout_edit.php */
	font-weight: bold;
	color: #FFFFFF;
}

.layout_song_list .set_details {
	font-family: Arial, sans-serif;
	font-size: 22px; /* we'll override this from layout_layout_edit.php */
	font-weight: bold;
	color: #FFFFFF;
}

.layout_song_list .pause {
	font-family: Arial, sans-serif;
	font-size: 22px; /* we'll override this from layout_layout_edit.php */
	font-weight: bold;
	font-style: normal !important;
	color: #FFFFFF;
	padding: 2px 5px !important;
}

.layout_song_list .name {
	font-family: Arial, sans-serif;
	font-size: 44px; /* we'll override this from layout_layout_edit.php */
	font-weight: bold;
	color: #000000;
}

.layout_song_list .details {
	font-family: Arial, sans-serif;
	font-size: 22px; /* we'll override this from layout_layout_edit.php */
	font-weight: bold;
	color: #808080;
}

.layout_song_list .song_button {
	/* we'll scale this entire element from layout_layout_edit.php */
	/* the image size is 40, but when we apply the layout scale, that seems too small for some reason, so we're bumping it up to 36 here */
	width: 48px;
	height: 48px;
	background-size: contain;
	background-repeat: no-repeat;
	margin: 0 0 0 15px;
}

.song_button.notes_button {
	background-image: url(/images/items_layout/notesButton.png);
}
.song_button.document_button {
	background-image: url(/images/items_layout/documentButton.png);
}
.song_button.midi_button {
	background-image: url(/images/items_layout/midiButton.png);
}
.song_button.tempo_button {
	background-image: url(/images/items_layout/tempoButton.png);
}
.song_button.pitch_button {
	background-image: url(/images/items_layout/pitchButton.png);
}
.song_button.recording_button {
	background-image: url(/images/items_layout/recordingButton.png);
}
.song_button.automation_button {
	background-image: url(/images/items_layout/automationButton.png);
}

.layout_song_list .song_number {
	/* we'll scale this entire element from layout_layout_edit.php */
	/* the image size is 32, but when we apply the layout scale, that seems too small for some reason, so we're bumping it up to 36 here */
	width: 36px;
	height: 36px;
	margin: 0 5px 20px 0;
	background: url(/images/items_layout/iconNumbered.png) no-repeat;
	background-size: contain;
	font-family: Arial, sans-serif;
	font-size: 24px;
	line-height: 36px;
	color: #000000;
	text-align: center;
}

.layout_toolbar {
	border-top: 1px solid gray;
	background-color: #F3F3F3;
}

.layout_toolbar_field {
	margin: 0px 5px 0px 5px;
}

.layout_toolbar_name {
	/* should we load our app font here? */
	font-family: Arial, sans-serif;
	font-size: 12px;
	color: #666666;
	margin: 3px 0 1px 0;
}

.layout_toolbar_value {
	/* should we load our app font here? */
	font-family: Arial, sans-serif;
	font-size: 25px;
	color: #000000;
	margin: 0px;
}

#start_hint img {
	margin-right: 20px;
}
#start_hint {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
}
.stage_plot_start_hint {
	font-family: Arial, sans-serif;
	font-size: 26px;
	font-weight: normal;
	font-style: italic;
	color: #000000;
}

.stage_plot_heading {
	font-family: Arial, sans-serif;
	font-size: 32px; /* we'll override this from stage_plot_layout_edit.php */
	font-weight: normal;
	color: #000000;
	position: absolute;
}

.stage_plot_text {
	font-family: Arial, sans-serif;
	font-size: 16px; /* we'll override this from stage_plot_layout_edit.php */
	font-weight: normal;
	color: #000000;
	position: absolute;
}
.stage_plot_text a {
	color: #000000;
	text-decoration: none;
}

#mailing_label_preview {
	width: 250px;
	height: 75px;
	border: 1px solid black;
	border-radius: 10px;
	padding: 5px 10px 10px 10px;
	font-family: Arial, sans-serif;
	font-size: 14px;
}

/*
.thumbnail_group {
	margin-bottom: 20px;
}

.thumbnail_image {
	float: left;
	border: 1px solid #000000;
}

.thumbnail_text {
	margin-left: 120px;
}
.thumbnail_text .body, .thumbnail_text .body a {
	font-size: 14px;
	margin-bottom: 0;
}

/* for some reason this is needed to top-align the text and the thumbnail * /
.thumbnail_image {
	margin-top: 4px;
}
.thumbnail_text .subheading {
	margin-top: -4px;
}
*/

.product_thumbnail {
	width: 175px;
	text-align: center;
	margin-bottom: 20px;
}

.product_description {
	width: 440px;
}

.product_description .subheading {
	margin-top: 0;
	margin-bottom: 4px;
}

.progress_icon {
	padding: 80px 0;
	background: url(/images/templates/progress.gif) center center no-repeat;
}

.stack_left {
	float: left;
	margin-right: 20px;
	margin-bottom: 14px; /* this matches the bottom margin of a body paragraph */
}
.column_third .stack_left {
	/* if we have a stack_left inside a column_third, we'll assume we want to split the column in half */
	/* we need to apply that width here so we can size a form element inside the stack_left relative to this */
	width: calc(50% - 10px); /* we'll only subtract half the margin here assuming the second container will be stack_flush */
}

.stack_left.minimize {
	width: -webkit-min-content;
	width: -moz-min-content;
	width: min-content;
}

.stack_left.stack_tight {
	margin-right: 5px;
	margin-bottom: 5px;
}

.stack_left.stack_tighter {
	margin-right: 2px;
	margin-bottom: 2px;
}

.stack_left.stack_flush {
	margin-right: 0;
	margin-bottom: 0;
}

.stack_right {
	float: right;
	margin-left: 20px;
	margin-bottom: 20px;
}

.stack_right.minimize {
	width: -webkit-min-content;
	width: -moz-min-content;
	width: min-content;
}

.stack_right.stack_tight {
	margin-left: 5px;
	margin-bottom: 5px;
}

.stack_right.stack_tighter {
	margin-left: 2px;
	margin-bottom: 2px;
}

.stack_right.stack_flush {
	margin-left: 0;
	margin-bottom: 0;
}

.stack_flush_container {
	/* make a container that exceeds its normal size by the amount of the stack margin, to give the appearance of removing the final margin */
	margin-right: -16px;
}

.column_two_thirds {
	float: left;
	margin-right: 40px;
	width: calc(66% - 13px); /* we'll only subtract what's left of the margin here after a one third column assuming the last container will be stack_flush */
}
#popup.song_edit_popup .column_two_thirds {
	/* on the song edit popup, we'll place the wide fields into a double-wide column on the right */
	margin-right: 40px;
	width: calc(50% - 20px);
}

.column_half {
	float: left;
	margin-right: 40px;
	width: calc(50% - 20px); /* we'll only subtract half of the margin here assuming the last container will be stack_flush */
}

.column_third {
	float: left;
	margin-right: 40px;
	width: calc(33% - 27px); /* we'll only subtract two thirds of the margin here assuming the last container will be stack_flush */
}

.column_fourth {
	float: left;
	margin-right: 40px;
	width: calc(25% - 30px); /* we'll only subtract three fourths of the margin here assuming the last container will be stack_flush */
}

.column_fifth {
	float: left;
	margin-right: 40px;
	width: calc(20% - 32px); /* we'll only subtract four fifths of the margin here assuming the last container will be stack_flush */
}

.column_last {
	margin-right: 0 !important;
}

.columns_flush_container {
	/* make a container that exceeds its normal size by the amount of the column gutter, to give the appearance of removing the final gutter */
	margin-right: -40px;
}

/* it would be good to rename these column_divider to avoid a conflict with tr.divider */
.divider {
	margin-right: 20px;
	padding-right: 19px;
	border-right: 1px solid #CCCCCC;
}
.divider_left {
	margin-left: -20px;
	padding-left: 19px;
	border-left: 1px solid #CCCCCC;
}

.icon_overlap {
	/* move the image to the left to overlap the field */
	position: absolute;
	right: 3px;
	top: 20px;
}
#popup.attachments_add_popup .icon_field_align {
	top: 2px;
}
.icon_overlap_parent {
	/* put this on the parent element of the icon we're overlapping */
	position: relative;
}

.shrink_to_fit {
	float: left;
}

.centered_fixed {
	margin-left: auto !important;
	margin-right: auto !important;
}

.centered_float {
	position: relative;
	float: right;
	left: -50%;
}

.centered_float_inner {
	position: relative;
	float: left;
	left: 50%;
}

.centered_vertical {
	position: relative;
}

.centered_vertical_inner {
	position: absolute;
	top: 50%;
}

.reset {
	clear: both;
}

.reset_left {
	clear: left;
}

.reset_right {
	clear: right;
}

.page_break {
	margin: 20px 0;
	border: 1px dashed gray;
	page-break-after: always;
}

.hide {
	display: none !important;
}

.transparent {
	opacity: 0.0;
	filter: alpha(opacity=0); /* IE */
}

.disabled {
	opacity: 0.5;
	filter: alpha(opacity=50); /* IE */
}
.setup_checklist .disabled {
	opacity: 0.3;
	filter: alpha(opacity=30); /* IE */
}

.submit_hack {
	/* this allows us to add a standard submit button to all our forms so that IE and Firefox will submit when pressing Enter, and hide the button from users but not from the browsers */
	width:0px;
	height:0px;
	position: absolute;
	top: -1000px;
	left: -1000px;
}

.feedback_positive, .feedback_negative, .tip_banner, .alert_banner {
	font-family: Arial, sans-serif;
	font-size: 13px;
	line-height: 22px;
	font-style: normal;
	font-weight: normal;
	text-align: center;
	color: #FFFFFF;
	margin: 0;
	padding: 0 5px 0 5px;
}
.tip_banner {
	font-size: 14px;
	line-height: 24px;
	padding: 6px 5px 4px 5px;
}
#promo_code_feedback .feedback_positive, #promo_code_feedback .feedback_negative {
	padding: 2px 4px 2px 4px;
}

.feedback_positive img, .feedback_negative img, .tip_banner img {
	margin: -2px 6px 0 0;
}

.feedback_positive {
	background: #0A75BA;
}
.feedback_positive a {
	color: #FFFFFF;
	text-decoration-color: #FFFFFF;
}

.feedback_negative, .alert_banner {
	background: #F15A24;
}
.feedback_negative a, .alert_banner a {
	color: #FFFFFF;
	text-decoration-color: #FFFFFF;
}

.tip_banner {
	background: #6DBC36; /* the green icon color is 7AC943, but this gives more contrast */
}
.tip_banner a {
	color: #FFFFFF;
	text-decoration-color: #FFFFFF;
}

.debug {
	font-family: Helvetica, Arial, sans-serif;
	font-size: 10px;
	color: #999999;
}
.debug a {
	color: #999999;
	text-decoration-color: #999999;
}