@charset "UTF-8";
/* CSS Document */

:root {
    
    /* Font Family */
	--global--font-primary: var(--font-headings, -apple-system, "Open Sans", Helvetica, Arial, sans-serif);
	--global--font-secondary: var(--font-base, -apple-system, Merriweather, Georgia, 'EB Garamond', serif);
	--global--font-tertiary: var(--font-base, -apple-system, Montserrat, "Helvetica Neue", sans-serif);
	--global--font-monospace: var(--font-base, -apple-system, "Courier New", "Inconsolata", monospace);
	
	/* Colors */
	--white:	#ffffff;
	--grey:		#736F69; /* very close to #ccc */
	--ltgrey:	#E3E2E1; /* replaces eeeeee, efefef, f0f0f0, &c. */
	--mdltgrey:	#aba9a5;
	--mdgrey:	#96918d;
	--mddkgrey:	#66625f; /* replaces 515151, 555(555) (which are somewhat darker), &c. -- cooler version: #686868 -- medium grey */
	--charcoal:	#333333; /* replaces ??, &c. */
	
	--red:		#990000;
	--mdred:	#E71105; /* bright and ugly! */
	--dkred:	#760000; /* underutilized, very similar to red */
	--orange:	orange; /**/
	
	--yellow:	#FFFF33;
	--lemon:	#FFFF66;
	--green:	#42A406;
	--dkgreen:	#4d6600; /* olive-ish? army green? */
	
	/* Pastels */
	--minty:	#d9f2d9;
	--glacier:	#ccf5ff;
	
	
	--dustyblue: #6785ac; /* medium blue (extracted from old site header graphic) */
	--paledustyblue: #9DB1CA;
	
}

/*** ***/

.anchor_top {
	float: right;
}

.snippet .anchor_top {
	display: none;
}

.up {
	width: 0;
	height: 0;
	border-left: 6px solid transparent;
	border-right: 6px solid transparent;
	border-bottom: 10px solid #555;
	display: inline-block;
    margin-right: 0.2rem;
}

.symbol,
a.symbol {
    font-size: 3.5rem;
    text-decoration: none;
    border-bottom: none;
    padding: 0 1rem;
    font-weight: 900;
    vertical-align: middle;
    line-height: normal;
}

.action,
a.action {
    color: #E71105; /*var(--mdred);*/
}

.info {
	border: 1px solid var(--ltgrey);
    padding: 1rem;
    font-family: var(--global--font-monospace);
}

.important {
	font-weight: bold;
}

/** START WIP ***/
span.t1 {
	display: block;
	padding-left: 1rem;
}

span.t2 {
	display: block;
	padding-left: 2rem;
}

.empty {
	opacity: 0.5;
}

.code,
div.code {
	font-family: monospace;
	padding: 0.5rem;
    margin: 0.5rem 0;
    border: 1px solid var(--ltgrey);
}

.code.active {
	border: 2px solid;
}

.bold {
	font-weight: 700;
}

/* TMP/Transitional:
.sidebar .snippet,
.sidebar .snippet.widget {
	display: none;
}

.devmode .sidebar .snippet,
.devmode .sidebar .snippet.widget,
.admin-view .sidebar .snippet,
.admin-view .sidebar .snippet.widget,
.queenbee .sidebar .snippet,
.queenbee .sidebar .snippet.widget {
	display: block;
	opacity: 0.5;
}
*/

/** END WIP ***/

/* msg_bar styles */

.site.has_msg_bar {
    /*position: absolute;*/
    top: 50px;
    width: 100%;
}

.msg_bar {
	display: none;
	width: 100%;
    height: 6rem;
    margin: 0px auto 0 auto;
    padding: 0;
    background-color: var(--ltgrey);
    font-family: 'worksans-extralight', 'work sans', sans-serif;
	font-size: 1.3rem;
    font-weight: normal;
	text-align: center;
    line-height: normal;
}

.msg_bar div.post,
.msg_bar div.event {
	display: flex;
	justify-content: center;
	align-items: center;
	max-width: 90%;
	height: inherit;
}

.msg_bar p {
	width: inherit;
	margin: 0 auto;
	padding: 1rem;
}

.msg_bar .moretag {
	display: inline;
	margin: 0 1rem;
}

.msg_bar.greens {
    background-color: rgb(153, 204, 0, 0.5);
    color: var(--dkgreen);
}

.msg_bar.reds {
    background-color: rgb(156, 67, 22, 0.2);
    color: rgb(156, 67, 22);
}

.msg_bar_close {
    cursor: pointer;
    position: absolute;
    top: 0;
    right: 0;
    /*top: 1rem;
    right: 1rem;*/
    width: 6rem;
    max-width: 10%;
    height: 6rem;
    background-color: #cccbca;
}

.msg_bar_close:after {
    content: '×';
    display: block;
    font-family: helvetica,arial,sans-serif;
    font-size: 2rem;
    font-weight: 400;
    line-height: 5.5rem;
    letter-spacing: normal;
    padding: 0;
}

body.admin-bar .msg_bar_close {
    top: 46px;
}


/*** End msg_bar styles ***/

/*** Troubleshooting & Dev styles ***/
/* TODO: streamline, simplify */
.devinfo,
.devview,
.troubleshooting,
.troubleshooting.inline {
	display: none;
}

.troubleshooting,
.troubleshooting.inline,
.devwip {
    text-align: left;
	padding: 1rem;
	background-color: #d1fb9d;
	font-size: 0.9rem;
	font-family: monospace;
}

/*.devsite .troubleshooting,*/
.devmode .troubleshooting,
.queenbee .devinfo,
.queenbee .devview {
	display: block;
	margin: 0.5rem 0;
}

.troubleshooting.inline {
    background-color: transparent;
	color: #42A406;
	color: var(--green);
	padding: 0 1rem;
	margin-bottom: 0;
}

/*.devsite .troubleshooting.inline,*/
.devmode .troubleshooting.inline,
.queenbee span.devinfo,
.queenbee span.devview
.queenbee .devinfo.inline,
.queenbee .devview.inline {
	display: inline;
}

code, .code {
    background-color: transparent;
    padding: 0 1rem;
    font-size: 0.8rem;
    color: #5A5A5A;
    line-height: normal;
}

.code table.program tr td {
    border: 1px solid #cccccc;
    padding: 0.5rem;
}

.code table.program:last-child tr:last-child td {
    padding-bottom: 0.5rem;
}

/*** Tables ***/

table,
th,
td {
	border: 1px solid #d1d1d1;
}

table {
	border-collapse: separate;
	border-spacing: 0;
	border-width: 1px 0 0 1px;
	margin: 0 0 1.75em;
	table-layout: fixed;
	/* Prevents HTML tables from becoming too wide */
	width: 100%;
}

caption,
th,
td {
	font-weight: normal;
	text-align: left;
}

th {
	border-width: 0 1px 1px 0;
	font-weight: 700;
}

td {
	border-width: 0 1px 1px 0;
}

th,
td {
	padding: 0.4375em;
}

table tr td {
    vertical-align: top;
}

/*** Program Tables ***/

table.program/ {
	width: auto;
	border: none;
}

table.program.personnel {
    border-bottom: 1px solid rgb(0,0,0,.05);
    padding-bottom: 1rem;
}

.first_program_items table.program.personnel {
    border-top: 1px solid rgb(0,0,0,.05);
    padding-top: 1rem;
    border-bottom: 0;
    padding-bottom: 0;
}

.concert_program_personnel {
	text-align: center;
}

.left_aligned .concert_program_personnel {
    text-align: left;
}

.concert_program_personnel .person {

}

.concert_program_personnel .person_role {
	text-transform: lowercase;
	font-style: italic;
}

table.program tr td {
    border: none;
    padding: 0.2rem 1rem .5rem 0;
}

.concert_program table.program:not(.personnel) tr td/*,
table.program tr.grouping td*/ {
    padding-bottom: 2rem;
}


table.program tr.row_group:not(.last_in_group) td,
.concert_program table.program:not(.personnel) tr.row_group:not(.last_in_group) td {
    padding-bottom: 0.5rem;
}

table.subtle,
table.subtle tr,
table.subtle tr td,
table.program
/*table.program tr td*/ {
	width: auto;
	border: none;
}

table.program.draft {
    border: 1px solid var(--ltgrey);
    padding: 1rem;
}

table.subtle tr td {
	vertical-align: top;
}

table.cuepoints {
    border-width: 1px;
    margin: 1% auto;
    width: 98%;
}

table.program {
    margin: 1.5rem 0;
    width: 100%;
}

table.program:last-child {
    /*border-bottom: 1px solid var(--ltgrey);*/
}

table.program tr
/*table.cuepoints tr*/ {
	padding: 0;
	margin: 0;
}

table.program:last-child tr:last-child td {
    padding-bottom: 1.5rem;
}

.admin-view table.program tr.placeholder,
.admin-view table.program tr td.placeholder {
    color: #EE720C;
}

.admin-view table.program tr.update_required,
.admin-view table.program tr td.update_required {
    color: cadetblue;
}

td.padded {
	padding: 0.5rem;
}

.label,
td.program_label {
	font-weight: bold;
}

.concert_program td.program_label.no_label, 
.concert_program td.title_as_label {
    font-weight: normal;
}

.concert_program td.no_label,
.concert_program td.title_as_label {
    width: 60%;
}

td.program_label {
	/*width: 40%;*/
}

td.program_item {
	/*width: 60%;*/
}

.concert_program td.program_item {
    text-align: right;
}

.concert_program td.program_item.authorship,
.concert_program td.program_item.placeholder {
    font-style: italic;
}

.centered td.program_label {
    text-align: right;
}

.centered td.program_item {
    text-align: left;
}

/*tr.grouping td span.person_dates {
    display: block;
}*/
td span.arranger,
td span.transcriber,
td span.translator,
td span.librettist {
	display: block;
}

tr.hide_authorship td span.composer,
tr.hide_person_dates td span.person_dates {
    display: none;
}

table.program tr th {
    border: none;
    padding-left: 0;
}

table.program tr td.header {
    font-size: 1.3rem;
    font-weight: 300;
    padding: 1rem 0 0.7rem 0;
}

table.program tr td.program_note {
    font-style: italic;
}

table tr td.thumb {
	width: 150px;
}

.meta-box-sortables td input {
    width: 100%;
}

table.pre {
    font-family: monospace;
    font-size: 0.9rem;
}

table pre {
    border: none;
    padding: 1rem;
    line-height: normal;
}


/*** FORM STYLES ***/

form#select_ids {
	height: 5rem;
}

.sdg_merge_form {
	margin-bottom: 1rem;
}

.input-group {
	float: left;
}

.input-group label {
	font-size: 0.9rem;
}

input[type="text"].merge-input {
	width: 7rem;
}


/***** MUSIC LIBRARY *****/

table.choirplanner {
	font-family: 'Open Sans', 'Helvetica', 'Arial', sans-serif;
}

td.repertoire {
}

td.editions {
    text-align: right;
}

td.repertoire div.rep_item,
td.editions div.edition_info,
td.editions div.box_num  {
    display: inline-block;
    margin-bottom: 0.2rem;
}

td.editions div.edition_info,
td.editions div.box_num {
    padding: 0.4rem 0;
}

td.editions div.edition_info {
    width: 80%;
    float: left;
    text-align: left;
    font-size: 0.9rem;
    color: var(--mddkgrey);
}

td.repertoire span,
td.editions div.edition_info span,
td.editions div.box_num {
    font-size: inherit;
    font-weight: normal;
}

td.editions div.box_num {
    width: 20%;
    float: right;
    text-align: center;
    font-weight: 600;
}

td.repertoire span,
td.editions div.edition_info span {
    margin: 0.5rem 0.2rem 0.2rem 0;
    padding: 0.2rem 0.4rem;
    line-height: 2;
}

span.rep_category, 
span.season, 
span.liturgical_date, 
span.occasion, 
span.choir_forces, 
span.voicing, 
span.soloists, 
span.instrumentation, 
span.keys,
span.publisher, 
span.publication,
table.choirplanner span.category, 
table.choirplanner span.season, 
table.choirplanner span.liturgical_date, 
table.choirplanner span.occasion, 
table.choirplanner span.choir_forces, 
table.choirplanner span.voicing, 
table.choirplanner span.soloists, 
table.choirplanner span.instrumentation, 
table.choirplanner span.keys,
table.choirplanner span.publisher, 
table.choirplanner span.publication {
    white-space: nowrap;
}

span.rep_category, 
span.season, 
span.liturgical_date, 
span.occasion, 
span.choir_forces, 
span.voicing, 
span.soloists, 
span.instrumentation, 
span.keys,
table.choirplanner span.category, 
table.choirplanner span.season, 
table.choirplanner span.liturgical_date, 
table.choirplanner span.occasion, 
table.choirplanner span.choir_forces, 
table.choirplanner span.voicing, 
table.choirplanner span.soloists, 
table.choirplanner span.instrumentation, 
table.choirplanner span.keys {
    border-radius: 3px;
    -webkit-border-radius: 3px;
    box-shadow: 0 -1px 0 rgba(0,0,0,0.3) inset;
}

.counter,
td.editions div.edition_info span.counter {
    padding-right: 0;
}

span.rep_category,
table.choirplanner span.category {
    background-color: #e6f2ff;/*#EEC;*/
}

span.rep_category, 
span.season, 
span.liturgical_date, 
span.occasion, 
span.choir_forces, 
span.voicing, 
span.soloists, 
span.instrumentation, 
span.keys,
span.publisher, 
span.publication {
	margin-right: 0.3rem;
    border: 1px solid lightgrey;
    padding: 0.2rem;
}

table.choirplanner span.composer,
table.choirplanner span.anon_info,
table.choirplanner span.arranger,
table.choirplanner span.person_dates {
	margin: 0;
	padding: 0;
}

table.choirplanner span.person_dates {
	display: none;
}

table.choirplanner span.arranger {
	display: inline;
}

table.choirplanner span.excerpted_from {
	font-style: italic;
}

/** Edition Info -- single edition template **/

.edition_info td.label {
    width: 25%;
}

/** Edition Tags **/

span.season {
    background-color: var(--minty);
}

span.liturgical_date {
    background-color: var(--glacier);
}

span.occasion {
    background-color: #ffffcc;
}

span.choir_forces {
    background-color: #d4dbf7;
}

span.voicing {
    background-color: #ddccff;
}

span.soloists {
    background-color: #e6f9ff;
}

span.instrumentation {
    background-color: #ffebcc;
}

span.keys {
    background-color: #ffe6ee;
}

span.publisher {
    
}

span.publication {
    font-style: italic;
}

span.box_num {
    background-color: var(--ltgrey);
    -webkit-border-radius: 3px;
}


/*** CHOIRPLANNER ***/

.atc_search_form {
    margin-bottom: 1.5rem;
}

.atc_search_form input[type="text"],
.atc_search_form select,
.atc_search_form .custom-combobox input {
    background: #f7f7f7;
    background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0)) !important;
    border: 1px solid #d1d1d1;
    border-radius: 2px;
    color: var(--mddkgrey);
    line-height: normal;
    padding: 0.5rem 0.5rem;
    margin-bottom: 0.3rem;
    width: 280px;
}

.atc_search_form input[type="submit"] {
    margin: 1rem 0.3rem 0 0;
}

.atc_search_form ui-button,
.atc_search_form a.ui-button {
    height: 2rem;
}

select.advanced_search
select.advanced_search {
    max-width: 300px;
}

.ui-state-default, 
.ui-widget-content .ui-state-default, 
.ui-widget-header .ui-state-default {
    background: inherit;
}

.ui-autocomplete {
    max-height: 250px;
    overflow-y: auto;
    /* prevent horizontal scrollbar */
    overflow-x: hidden;
  }
  /* IE 6 doesn't support max-height
   * we use height instead, but this forces the menu to always be this tall
   */
  * html .ui-autocomplete {
    height: 250px;
  }

.ui-menu .ui-menu-item-wrapper {
    font-size: 0.9rem;
}

/***/

label.advanced_search,
label.advanced_search {
    width: 150px;
    display: inline-block;
}

input.simple_search,
input.advanced_search {
    width: 280px;
}

input.simple_search,
label.advanced_search {
    margin-right: 5px;
}


/*** Media Queries ***/

@media screen and (max-width: 600px) {

	.msg_bar p {
		font-size: 1rem;
		padding: 0.5rem;
	}
	
}

@media screen and (min-width: 44.375em) {

	/*body.admin-bar .msg_bar {
		padding-top: 46px;
	}*/
	
	body.admin-bar .msg_bar .msg_bar_close {
		top: 46px; /*top: calc(2rem + 46px);*/
	}
	
}

@media screen and (min-width: 48.9375em) {
	
	/*body.admin-bar .msg_bar {
		padding-top: 32px;
	}*/
	
	body.admin-bar .msg_bar .msg_bar_close {
		top: 32px; /*top: calc(2rem + 32px);*/
	}
	
}