/**
 * common.css
 *
 * Copyright (c) 2000-2012 John Willinsky
 * Distributed under the GNU GPL v2. For full terms see the file docs/COPYING.
 *
 * Site-wide shared stylesheet.
 *
 * Responsive refresh: same classes/IDs, modernized color and layout on
 * top of lib/pkp/styles/common.css's base rules.
 */

/**
 * Common HTML elements
 */

a:link, a:visited {
	color: var(--color-primary, #1c4e80);
}

a:active {
	color: var(--color-accent, #0f8b6c);
}

a:hover {
	color: var(--color-primary-dark, #123a61);
	background: transparent;
}


/**
 * Main layout elements
 */

#header {
	background-color: var(--color-primary-dark, #123a61);
	border-bottom: 1px solid var(--color-border, #dde1e7);
}

#header h1 {
	color: var(--color-primary-contrast, #fff);
}

#footer {
	background-color: var(--color-surface, #fff);
	border-top: 1px solid var(--color-border, #dde1e7);
	margin-top: 2em;
}

#footerContent {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1em;
	text-align: center;
}

#footerContent img {
	flex-shrink: 0;
}

#footerContent p {
	margin: 0;
	line-height: 1.6;
}

#footerContent a {
	color: var(--color-text-muted, #5b6473);
	text-decoration: underline;
}

#footerContent a:hover {
	color: var(--color-primary, #1c4e80);
}

@media (max-width: 480px) {
	#footerContent {
		flex-direction: column;
		gap: 0.5em;
	}
}

#main {
	width: 100%;
	margin: 0;
}


/**
 * Navigation bar
 */

#navbar a {
	font-size: 0.75em;
	letter-spacing: 0.05em;
}


/**
 * Announcements
 */

#announcementsHome {
	width: 100%;
	margin: 2em 0;
}

#announcementsHome h3 {
	text-align: left;
}

#announcements {
	width: 100%;
}

#announcements h3 {
	text-align: left;
}

table.announcements {
	width: 100%;
}

table.announcements td {
	padding: 0.5em;
}

table.announcements td.nodata {
	text-align: center;
	font-style: italic;
}

table.announcements td.headseparator,
table.announcements td.endseparator {
	border-top: 1px solid var(--color-border, #dde1e7);
	font-size: 0.1em;
	line-height: 1%;
}

table.announcements td.separator {
	border-top: 1px dotted var(--color-border, #dde1e7);
	font-size: 0.1em;
	line-height: 1%;
}

table.announcements tr.title {
	vertical-align: top;
}

table.announcements td.title {
	width: 85%;
}

table.announcements tr.description {
	vertical-align: top;
}

table.announcements td.description {
	width: 85%;
}

table.announcements tr.details {
	vertical-align: bottom;
}

table.announcements td.posted {
	padding-top: 1em;
	font-style: italic;
	color: var(--color-text-muted, #5b6473);
}

table.announcements td.more {
	width: 15%;
	text-align: right;
}

table.announcementsMore {
	width: 100%;
}

table.announcementsMore td {
	padding-top: 1.5em;
	text-align: right;
}


/**
 * Homepage image
 */

#homepageImage img {
	display: block;
	margin: 0 auto;
	max-width: 100%;
	height: auto;
	border: 0;
}

/**
 * Conference cover photos embedded directly in conference/scheduled
 * conference descriptions (shown both in the home page listing and on
 * each conference's own page) - each was uploaded at a different native
 * size, so normalize them to one consistent, responsive size instead.
 */
#content img[src*="/images/chair/"] {
	display: block;
	width: 100%;
	max-width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	margin: 0.75em 0;
	border: 0;
}


/**
 * Organizing Team Lists
 */

ol.organizingTeam li {
	list-style: none;
}

ol.organizingTeam, ol.organizingTeam li {
	margin-left: 0;
	padding-left: 0;
}


/**
 * Additional text styles
 */

pre {
	background-color: var(--color-bg, #f7f8fa);
	color: var(--color-text, #1f2530);
	font-size: 1.1em;
	padding: 0.75em;
	border-radius: var(--radius, 6px);
	overflow-x: auto;
}

/**
 * Table styles
 */

table.listing {
	border-collapse: collapse;
}

table.listing tr.data td.drag {
	cursor: move;
}


/**
 * Drag and drop styles
 */
.draggable {
	position: relative;
	cursor: move;
}

.borderBox {
	border-style: solid;
	border-color: var(--color-border, #dde1e7);
	border-width: 1px;
	border-radius: var(--radius, 6px);
	margin: 2px;
	padding: 8px;
}

.floatLeft {
	float: left;
}

/**
 * Scheduler styles
 */
.scrollContainer {
	overflow: auto;
}

.scheduleTable {
	min-width: 100%;
}

.schedulerEvent {
	color: #8a2c22;
	background-color: var(--color-surface, #fff);
}

.schedulerPresentation {
	color: #0f6b3f;
	background-color: var(--color-surface, #fff);
}

.schedulerEventHeader {
	color: #fff;
	background-color: #8a2c22;
}

.schedulerPresentationHeader {
	color: #fff;
	background-color: #0f6b3f;
}


td.hole {
	background-color: #8b96a5;
}

td.timeRowLabel {
	border-style: solid none none none;
	border-width: 1px;
	border-color: var(--color-border, #dde1e7);
}

.droppable {
}

td.notificationContent {
	padding-left: 5px;
	padding-right: 5px;
}

td.notificationFunction {
	padding-left: 5px;
	padding-right: 5px;
	text-align: right;
}

/* @group Font Sizer */

.smallFont, .defaultFont, .largeFont {
	outline: none;
	text-indent: -9999px;
	display: block;
	float: left;
	width: 20px;
	height: 23px;
	margin-right: 4px;
	background-repeat: no-repeat;
	background-position: center;
	opacity: 0.7;
}

.smallFont:hover, .defaultFont:hover, .largeFont:hover, a.smallFont:hover, a.defaultFont:hover, a.largeFont:hover {
	opacity: 1;
}

.smallFont {
	background-image: url(../lib/pkp/templates/images/icons/font-down.png);
	margin-left: 8px;
}

.defaultFont {
	background-image: url(../lib/pkp/templates/images/icons/font-default.png);
}

.largeFont {
	background-image: url(../lib/pkp/templates/images/icons/font-up.png);
}