/*--------------------------------------------------------------------------------------------------
ccdisplay.css: This file is used to format the Committee Room Display HTML pages for both chambers
Revision History: (PLEASE ADD A COMMENT EVERY TIME A CHANGE IS MADE TO THIS FILE
05Nov2014 Mike Richard - Cleaned up and reformatted some stuff to better align with lpdisplay.css
05Nov2014 Mike Richard - Changed calslideshow to cal-list to better reflect actual purpose
06Nov2014 Mike Richard - Changed radius from 25px to 24px, fixed msg-box & added fixed header-box
06Nov2014 Mike Richard - Replaced msg-box with footer-box to be more generic
06Nov2014 Mike Richard - Replaced cal-heading with header-content to be more generic
08Jan2015 Mike Richard - Updated multicolumn formatting to work with Mozilla Firefox
16Jan2015 Mike Richard - Increased font sizes to compensate for browser zoom level going from 125% to 100%
02Feb2015 Mike Richard - Commented out font size changes as they are not wanted at this time
02Feb2015 Mike Richard - Added .body-display class to prevent scrollbars on displays
02Feb2015 Mike Richard - Added .hidden class to enable hiding older items
12Feb2015 Mike Richard - Added list-style-position to format bullet items properly in all browsers
11Mar2015 Mike Richard - Added overrides for House Lobby bottom half of portrait display
11Mar2015 Mike Richard - Replaced all px units with em or % for scaleability except for fonts & borders
12Mar2015 Mike Richard - Increased max-height from 18em to 21em as data was reported missing from display
12Mar2015 Mike Richard - Increased max-height from 21em to 30em as data was reported missing from display again
13Mar2015 Mike Richard - Increased footer height from 2em to 2.7em for message
17Mar2015 Mike Richard - Added formatting for (before and after) ellipsis divs
19Mar2015 Mike Richard - Adjusted various header & footer heights with matching body-box margins
19Mar2015 Mike Richard - Adjusted again to use new CSS3 rem units instead of px & em
20Mar2015 Mike Richard - More fine tuning & switched from h2 & h3 tags to cmte-hdr & agenda-item div classes
20Mar2015 Mike Richard - Added cmte-ftr to end of each item for better spacing
30Mar2015 Mike Richard - Forced 10px base font to correct for xpage issues
31Mar2015 Mike Richard - Added nothing-box & nothing-msg divs for nothing scheduled msgs
29Apr2015 Mike Richard - Reduced max-height for the House Lobby display
15Dec2015 Mike Richard - Removed -webkit-transform for newer version of Chrome (will need to upgrade Chrome!)
19Jan2016 Mike Richard - Changed footer-box bottom from 0 to 5px
28Jan2016 Mike Richard - Added #title and #datetime id formatting for heading
29Jan2016 Mike Richard - Increased all (almost) rem sizes by .2
29Jan2016 Mike Richard - Removed unused .hangingindent class
29Jan2016 Mike Richard - Adjusted .agenda-item class indent to be more prominent
29Jan2016 Mike Richard - Added text-indent to .cmte-hdr class for easier readability
29Jan2016 Mike Richard - Tweaked the margins for various things
29Jan2016 Mike Richard - Set all line-height to match font-size
29Jan2016 Mike Richard - Replaced most px units with rem units
15Mar2016 Mike Richard - Changed all vertical padding from % to rem
29Mar2016 Mike Richard - Increased max-height for the House Lobby display back to 50rem
29Mar2016 Mike Richard - Increased max-height for the House Lobby display up to 60rem
27Apr2016 Mike Richard - Reduced agenda-item & cmte-hdr width to 92.5% to eliminate overflow
29Oct2018 Mike Richard - Removed text decoration & color for anchor tags
29Oct2018 Mike Richard - Changed max-height to 40
08Nov2018 Mike Richard - Hid audio links for displays
13Nov2018 Mike Richard - Changed max-height to 50
17Jan2019 Mike Richard - Changed message text to yellow
26Oct2023 Mike Richard - Adjusted nothing msg text size based on screen size
14Jan2025 Mike Richard - Adjusted max-height to 55 to get more text on screen per request from Anita
20Jan2026 Mike Richard - Adjusted font-size values to better match live proceedings
26Jan2026 Mike Richard - Removed tags and only used class for most items
09Sep2026 Mike Richard - Removed obsolete column-break-inside tags
--------------------------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------------------------
	Define global formatting of page
--------------------------------------------------------------------------------------------------*/
html, body{
	/* override browser default values */
	margin:0;
	padding:0;
	/* start making it look like we want it */
	width:100%; /* eliminate horizontal scrollbars */
	color:#FFF; /* white */
	background-color:#000; /* black */
	font-family:arial,helvetica,sans-serif;
/*	font-size:62.5%;*/ /* set base font size to 10px = 62.5% of 16px (default) */
	font-size:10px; /* force base font size to 10px to correct for xpage issues */
	line-height:1rem; /* set base line-height to 1 rem */
}
a{
	text-decoration: none;
	color:inherit;
}
.audio-link{ /* class for audio links */
	display:none;
}
.hidden{ /* class for hiding past items from the display */
	display:none;
}
.ellipsis-past-hidden{ /* default ellipsis class for past items that are hidden */
	display:none;
}
.ellipsis-past{ /* ellipsis class for indicating past items are not being displayed */
	display:inline;
	background-color:tan; /* tan */
	color:black; /* black */
	border-bottom-right-radius:1.6rem; /* should match ... */
	font-size:2.4rem; line-height:2.4rem;
	margin:0; /* compensate for border thickness */
	padding:0 2%;
	width:96%; /* 100% - 2% padding on left & 2% padding on right */
}
.ellipsis-more{ /* ellipsis class for hidden overflow condition, updated by showmore.js */
	position:absolute;
	bottom:0;
	right:0;
	width:5em; /* wide enough for (more...) text */
	text-align:center;
	background-size:100% 100%;
	background-color:tan; /* tan */
	color:black;
	border-top-left-radius:1.6rem;
	font-size:2.4rem; line-height:2.4rem;
	color:black;
	display:none; /* default to hidden, showmore.js will set this appropriately */
}
.body-display{ /* define fixed window for displays (not users) to eliminate scrollbars */
	position:fixed;
	width:100%;
	height:100%;
	padding:0;
	margin:0;
	overflow:hidden;
}
/*--------------------------------------------------------------------------------------------------
	Define boxes to fill the screen
--------------------------------------------------------------------------------------------------*/
#header-box{
	position:fixed;
	left:0;
	top:0;
	width:100%;
	padding:0;
	height:5.4rem; /* plus margin = as body-box margin-top */
	margin:0 0 .1rem 0;
	z-index:9;
}
#body-box{
	position:absolute;
	position:fixed;
	position:static;
	width:100%;
	padding:0;
	margin-top:5.5rem; /* same as header-box height plus margin(s)*/
}
#footer-box{
	position:fixed;
	bottom:0;
	left:0;
	width:100%;
	padding:0;
	height:6rem; /* plus margin = .footer-box-margin margin-bottom */
	margin:0;
	z-index:8;	/* make sure this message stays on top of everything else */
}
.footer-box-margin{ /* class override to compensate for footer-box when used */
	margin-bottom:6rem; /* same as footer-box height plus margin(s)*/
}
/*--------------------------------------------------------------------------------------------------
	Define content formatting for header-box
--------------------------------------------------------------------------------------------------*/
#header-content{
	font-size:2.8rem; line-height:2.8rem;
	font-weight:bold;
	margin:0;
	padding:0.7rem 0;
	width:99.9%;
	color:#FFF; /* white */
	border-radius:2.8rem;
	text-align:center;
	overflow:hidden;
	border:0.2rem solid #000; /* black */
	background-color:#000; /* black */
}
#date{
	position:absolute;
	left:2rem;
}
#time{
	position:absolute;
	right:2rem;
}
#header-text{
	text-align:center;
}
#title{
	position:absolute;
	left:2rem;
}
#datetime{
	position:absolute;
	right:2rem;
	color:#FFF;	/* white */
}
/*--------------------------------------------------------------------------------------------------
	Define content formatting for body-box
--------------------------------------------------------------------------------------------------*/
h2{ /* cmte header */
	margin:-.2rem 0 0 0; /* compensate for border thickness */
	padding:0.7rem 2%;
	width:96%; /* 100% - 2% padding on left & 2% padding on right */
	font-size:3.5rem; line-height:3.5rem;
	border-top-left-radius:2.8rem;
	border-top-right-radius:2.8rem;
}
h3{ /* bill/item */
	margin:0.7rem 0 0 1.7rem;
	padding:0;
	font-size:3.2rem; line-height:3.2rem;
	font-weight:normal;
}
.cmte-hdr{ /* cmte header */
	color:#FFF; /* white */
	margin:-.2rem 0 0 0; /* compensate for border thickness */
	padding:0.7rem 6% 0.7rem 5.5%; text-indent:-4%; /* right padding doesn't seem to have any effect w/ text-indent */
	width:92.5%; /* Best=92.5%! 100% - left & right padding plus text-indent (was 97) */
	font-size:2.6rem; line-height:2.6rem;
	font-weight:bold;
	border-top-left-radius:2.6rem;
	border-top-right-radius:2.6rem;
}
.agenda-item{ /* bill/item */
	margin:0;
	padding:0.7rem 6% 0 5.5%; text-indent:-4%; /* right padding doesn't seem to have any effect w/ text-indent */
	width:92.5%; /* Best=92.5%! 100% - left & right padding plus text-indent (was 97.5) */
	font-size:2.4rem; line-height:2.4rem;
	font-weight:normal;
}
.cal-item{
	max-height:55rem; /* 50rem includes heading (overridden in cruser.css for users) */
	position:relative; /* allow absolute positioning within cal-item for ellipsis-more class */
	/*-webkit-transform:translateZ(0);*/ /* work-around for Chrome multicolumn visibility bug */
	overflow:hidden;
	border-radius:2.8rem;
	margin-bottom:0.45rem;
	break-inside: avoid-column;
	-webkit-break-inside:avoid;
	-moz-break-inside:avoid;
}
/* calendar list */
#cal-list{
	width:100%;
}
#cal-list ul{
	margin:0;
	padding:0;
	list-style-type:none;
}
#cal-list ul:after{
	content:".";
	clear:both;
	display:block;
	height:0;
	visibility:hidden;
}
li{ /* used by vote rcds & msgs */
	margin:0;
	padding:0;
	font-size:2.6rem; line-height:2.6rem;
	padding-left:3.5%; text-indent:-1%; /* same as agenda-item (padding-left - text-indent) */
	list-style-position:inside;
}
.pass{
	color:#0F0;	/* green */
	list-style-type:disc;
}
.fail{
	color:#F00;	/* red */
	list-style-type:square;
}
.unknown{
	color:#BBB;	/* gray */
	list-style-type:circle;
}
#body-box ul.action{
	margin-left:2.2rem !important;
}
.cal-item .cal{
	margin:0.5em;
	padding:0;
	font-size:3.0rem; line-height:3.0rem;
	-webkit-margin-before:0.45rem;	/* default is 1em */
	-webkit-margin-after:0.45rem;	/* default is 1em */
}
p.cur{
	margin:0.7rem;
	padding:0;
	font-size:2.8rem; line-height:2.8rem;
	-webkit-margin-before:0.45rem;	/* default is 1em */
	-webkit-margin-after:0.45rem;	/* default is 1em */
}
/*--------------------------------------------------------------------------------------------------
	Define content formatting for footer-box
--------------------------------------------------------------------------------------------------*/
.msg-item{
	color:#FF0;				/* yellow */
	background-color:#000;	/* black */
	border-radius:2.6rem;
	margin:0;
	padding:1rem 2rem 1rem 4rem; text-indent:-2rem;
	font-size:2.6rem; line-height:2.6rem;
}
.nothing-box{ /* nothing box */
	text-align:center;
}
.nothing-msg{ /* nothing message */
	margin:0;
	padding:0.5rem 3rem;
	display:inline-block;
	text-align:center;
	font-size:2.6rem; line-height:2.6rem;
	font-weight:normal;
	border:0.2rem solid #FF0; /* yellow */
	border:0.2rem solid #000; /* black */
	border-radius:2.6rem;
	background-color:#FF0; /* yellow */
	color:#000; /* white - overridden by crdisplay(house/senate)colors.css */
}
/* ---------------------------------------------------- */
/* SLIDESHOW > GLOBAL
/* ---------------------------------------------------- */
#msgslideshow{
	width:100%;
	position:absolute;
	left:0;
	bottom:0;
}
#msgslideshow ul{
	margin:0;
	padding:0;
	list-style-type:none;
}
#msgslideshow ul:after{
	content:".";
	clear:both;
	display:block;
	height:0;
	visibility:hidden;
}
/* ---------------------------------------------------- */
/* SLIDESHOW > SLIDES
/* ---------------------------------------------------- */
#msg-slideshow .msg-slides{
	overflow:hidden;
	width:100%;
}
#msgslideshow .msg-slides ul{
	width:100%;
}
#msgslideshow .msg-slides li{
	width:100%;
	float:left;
	padding:0;
}
p.msg{
	margin:0;
	padding:0 1.2rem;
	font-size:2.8rem; line-height:2.8rem;
}
.multicolumn{
	max-height:97.25%; /* about 1050px/1080px - compensate for footer msg */
	margin:0;
	column-count:2;
	-webkit-column-count:2;
	-moz-column-count:2;
	column-gap:0.6rem;
	-webkit-column-gap:0.6rem;
	-moz-column-gap:0.6rem;
	column-fill:balance;
	-webkit-column-fill:balance;
	-moz-column-fill:balance;
/*	-moz-column-fill:auto;*/	/* doesn't seem to work properly in Firefox */
}
.multicolumn div{
	break-inside:avoid;
	-webkit-break-inside:avoid;
	page-break-inside:avoid; /* for Mozilla */
}
/*--------------------------------------------------------------------------------------------------
	Define House Lobby overrides (bottom half of portrait display is 1080x956.734)
--------------------------------------------------------------------------------------------------*/
@media screen and (max-width:1800px){ /* larger than 1080 for other tablets */
	#header-box{
		height:4.2rem; /* same as body-box margin-top (based on height of header-content) */
		margin:0 0 .1rem 0;
	}
	#header-content{
		font-size:2.8rem; line-height:2.8rem;
		padding:0.6rem 0;
	}
	#body-box{
		margin-top:4.3rem; /* same as header-box height (based on height of header-content) */
	}
	h2{
		font-size:2.6rem; line-height:2.6rem;
	}
	.cal-item{
		border-radius:2.6rem; /* same as cmte-hdr radius */
		max-height:55rem; /* 60rem includes heading (overridden in cruser.css for users) */
	}
	h3{
		font-size:2.4rem; line-height:2.4rem;
	}
	li{
		font-size:2.3rem; line-height:2.3rem;
	}
	.cmte-hdr{ /* cmte header */
		font-size:2.6rem; line-height:2.6rem;
		border-top-left-radius:2.6rem; /* same as cal-item radius */
		border-top-right-radius:2.6rem; /* same as cal-item radius */
	}
	.agenda-item{
		font-size:2.4rem; line-height:2.4rem;
	}
	.ellipsis-past{ /* ellipsis class for indicating past items are not being displayed */
		font-size:2.2rem; line-height:2.2rem;
	}
	.ellipsis-more{ /* ellipsis class for hidden overflow condition, updated by showmore.js */
		font-size:2.2rem; line-height:2.2rem;
	}
	#footer-box{
		height:3.5rem; /* same as footer-box-margin margin-bottom (based on height of msg-item) */
	}
	.footer-box-margin{ /* class override to compensate for footer-box when used */
		margin-bottom:3.5rem; /* same as footer-box height (based on height of msg-item) */
	}
	.msg-item{
		font-size:2.4rem; line-height:2.4rem;
	}
	.nothing-msg{
		font-size:2.4rem; line-height:2.4rem;
	}
}
/*--------------------------------------------------------------------------------------------------
	Define user orientation overrides (for iPad)
--------------------------------------------------------------------------------------------------*/
@media screen and (max-width:1024px){ /* landscape */
	#header-box{
		height:4.0rem; /* same as body-box margin-top (based on height of header-content) */
		margin:0 0 .1rem 0;
	}
	#header-content{
		font-size:2.6rem; line-height:2.6rem;
		padding:0.5rem 0;
	}
	#body-box{
		margin-top:4.1rem; /* same as header-box height (based on height of header-content) */
	}
	h2{
		font-size:2.5rem; line-height:2.5rem;
	}
	h3{
		font-size:2.4rem; line-height:2.4rem;
	}
	li{
		font-size:2.3rem; line-height:2.3rem;
	}
	.cal-item{
		border-radius:2.5rem; /* same as cmte-hdr radius */
	}
	.cmte-hdr{ /* cmte header */
		font-size:2.5rem; line-height:2.5rem;
		border-top-left-radius:2.5rem; /* same as cal-item radius */
		border-top-right-radius:2.5rem; /* same as cal-item radius */
	}
	.agenda-item{
		font-size:2.4rem; line-height:2.4rem;
	}
	.ellipsis-past{ /* ellipsis class for indicating past items are not being displayed */
		font-size:2.2rem; line-height:2.2rem;
	}
	.ellipsis-more{ /* ellipsis class for hidden overflow condition, updated by showmore.js */
		font-size:2.2rem; line-height:2.2rem;
	}
	#footer-box{
		height:3.5rem; /* same as footer-box-margin margin-bottom (based on height of msg-item) */
	}
	.footer-box-margin{ /* class override to compensate for footer-box when used */
		margin-bottom:3.5rem; /* same as footer-box height (based on height of msg-item) */
	}
	.msg-item{
		font-size:2.4rem; line-height:2.4rem;
	}
	.nothing-msg{
		font-size:2.4rem; line-height:2.4rem;
	}
}
@media screen and (max-width:768px){ /* portrait */
	#header-box{
		height:3.4rem; /* same as body-box margin-top (based on height of header-content) */
		margin:0 0 .1rem 0;
	}
	#header-content{
		font-size:2.0rem; line-height:2.0rem;
		padding:0.4rem 0;
	}
	#body-box{
		margin-top:3.5rem; /* same as header-box height (based on height of header-content) */
	}
	h2{
		font-size:2.0rem; line-height:2.0rem;
	}
	h3{
		font-size:2.0rem; line-height:2.0rem;
	}
	li{
		font-size:2.0rem; line-height:2.0rem;
	}
	.cal-item{
		border-radius:1.4rem; /* same as cmte-hdr radius */
	}
	.cmte-hdr{ /* cmte header */
		font-size:2.0rem; line-height:2.0rem;
		border-top-left-radius:1.4rem; /* same as cal-item radius */
		border-top-right-radius:1.4rem; /* same as cal-item radius */
	}
	.agenda-item{
		font-size:2.0rem; line-height:2.0rem;
	}
	.ellipsis-past{ /* ellipsis class for indicating past items are not being displayed */
		font-size:1.9rem; line-height:1.9rem;
	}
	.ellipsis-more{ /* ellipsis class for hidden overflow condition, updated by showmore.js */
		font-size:1.9rem; line-height:1.9rem;
	}
	#footer-box{
		height:3.3rem; /* same as footer-box-margin margin-bottom (based on height of msg-item) */
	}
	.footer-box-margin{ /* class override to compensate for footer-box when used */
		margin-bottom:3.3rem; /* same as footer-box height (based on height of msg-item) */
	}
	.msg-item{
		font-size:1.8rem; line-height:1.8rem;
	}
	.nothing-msg{
		font-size:1.8rem; line-height:1.8rem;
	}
}
.now{
	color:#FF0;	/* yellow */
}
.done{
	color:#BBB;	/* gray */
}
.cmte-ftr{	/* cmte footer blank line for better spacing */
	line-height:0.7rem;
}