/* parts of the LIPU styles that are common to all looks, especially independent from the colours */

.bigCh {
	font-size:24px;
}

.noteCh {
	font-size:12px;
}

.selChStd {
	font-size: 13px;
}

.mywprc { width:100%; }

.iblk { display: inline-block; }

.iblkstd { display: inline-block; vertical-align:top; padding-top: 4px; padding-bottom:4px; }

.smallpad { padding: 4px 4px 4px 4px; }
.smallmg { margin: 4px 4px 4px 4px; }
.stdpadv { padding: 8px 0px 10px 0px; }
.bigpad { padding: 24px 24px 24px 24px; }

.talRight { text-align:right; }


.rcorners600 {
	border-radius: 22px 22px 22px 22px;
	padding: 24px;
	width: 600px;
	border: 1px solid #222222;
}

.prefmt     {
	font-family: "Lucida Console", Monospace;
	/* font-size: 14px; */
	display: block;
	unicode-bidi: embed;
	font-family: monospace;
	white-space: pre;
}

/* intended for the top of the page content, under the heading (NOT in the heading/top stripe) */

.lipuTopTitle {
	text-align: center;
	font-size: 24px;
	width:100%;
	border-bottom: 1px solid #b0b3a6;
	padding-top: 6px; padding-bottom:4px;
}

.lipuExpl {
	padding-left: 8px;
	padding-right: 8px;
	padding-top: 12px;
	padding-bottom: 4px;
	font-size: 16px;
}



/* these explicitely name the colours in the style names, so can stay here, in this common CSS */

.fgwhite { color: white; }

.myboxred200 {
	background-image: url("../gfx/redBox.roundCorners.200x200.png");
	background-repeat: no-repeat;
	min-width:606px; min-height:206px;
	width:606px; height:206px;
	max-width:606px; max-height:206px;
}

.myboxred600 {
	background-image: url("../gfx/redBox.roundCorners.600x200.png");
	background-repeat: no-repeat;
	min-width:606px; min-height:206px;
	width:606px; height:206px;
	max-width:606px; max-height:206px;
}

.myboxredmore {
	/* YESSS! This is the way to arrange a smart grid: use inline-block!
		Also see http://www.w3schools.com/css/css_inline-block.asp */
	display: inline-block;
	padding: 9px 9px 9px 9px;
	color: white;
}

/* background till 2022.06.06: #cd0d0d */

.gradRedDefault { background: #bd0d0d; background: linear-gradient(#f7021e, #d7021e); }

/* .gradRedH { background: #bd0d0d; background: linear-gradient(to right, #f7021e, #d7021e); } */

.gradRedH { background: #72130c; background: linear-gradient(to right, #b0150a, #72130c); }

.gradBlueLightH { background: #09a1b2; background: linear-gradient(to right, #09a1b2, #09c0a0); }

.gradBlueDarkH { background: #093466; background: linear-gradient(to right, #09a1b2, #093466); }

.lipuRed1 { background: #bd0d0d; color: white; }

.lipuRed2 { background: #b02d2d; color: #eeeeee; }

.criticalButton {
	display: inline-block; /* is it useful? Do I want it? */
	box-sizing: border-box;
	border: 1px solid #146ba6;
	background-color:#e42222; /* a shiny red */
	color: #dcfdfa;
	text-decoration: none;
	font-size: 16px;
	font-family: sans-serif;
	padding: 4px 6px 4px 6px;
	border-radius: 4px;
}

.criticalButton:hover {
	background-color:#fa1212; /* a shiny red */
}