WebSVN - LCARS - Blame - Rev 231 - /trunk/styles/lcars22.css

Rev	Author	Line No.	Line
50	PointedEar	1	<?php
125	PointedEar	2	@\header('Last-Modified: ' . gmdate('D, d M Y H:i:s', @filemtime(__FILE__)) . ' GMT');
50	PointedEar	3
116	PointedEar	4	/* Resource expires in HTTP/1.1 caches 24h after last retrieval */
125	PointedEar	5	@\header('Cache-Control: max-age=86400, s-maxage=86400, must-revalidate, proxy-revalidate');
58	PointedEar	6
116	PointedEar	7	/* Resource expires in HTTP/1.0 caches 24h after last retrieval */
125	PointedEar	8	@\header('Expires: ' . gmdate('D, d M Y H:i:s', time() + 86400) . ' GMT');
58	PointedEar	9
125	PointedEar	10	@\header('Content-Type: text/css; charset=UTF-8');
119	PointedEar	11
		12	require_once 'css/least/Mixins.php';
169	PointedEar	13	use de\pointedears\css\least\Mixins;
79	PointedEar	14	?>@charset "UTF-8";
37	PointedEar	15
58	PointedEar	16	<?php
		17	if (!isset($_GET['ani']) \|\| $_GET['ani'] !== '0')
		18	{
123	PointedEar	19	/* Optional general animations */
58	PointedEar	20	?>
79	PointedEar	21	@import url("/styles/lcars-ani.css");
58	PointedEar	22	<?php
		23	}
		24	?>
123	PointedEar	25
		26	<?php
		27	/* Non-optional content-specific animations */
		28	Mixins::keyframes('analysis', <<<CSS
		29	from, 74% {
		30	opacity: 0;
		31	}
		32
		33	75%, to {
		34	opacity: 1;
		35	color: #fc6;
		36	}
		37	CSS
		38	);
		39	?>
		40
		41	<?php
		42	Mixins::keyframes('analysis-scan', <<<CSS
		43	from, 25% {
		44	color: #fc6;
		45	}
		46
		47	26%, to {
		48	color: #fff;
		49	}
		50	CSS
		51	);
		52
		53	/* FIXME: :hover hides first row */
		54	/*
		55	.multi-display .upper .content .analysis:hover tr {
		56	<?php
		57	Mixins::animation('-play-state', 'paused');
148	PointedEar	58	?>
123	PointedEar	59	}
		60	*/
148	PointedEar	61	?>
		62
		63	.multi-display .upper .content .analysis tr:hover
		64	{
		65	color: #f90 !important;
		66	}
		67
123	PointedEar	68	/* Blink rate 1 Hz should be safe for people with photosensitive epilepsy */
148	PointedEar	69	.multi-display .upper .content .analysis tr:nth-child(1)
123	PointedEar	70	{
		71	<?php
		72	Mixins::animation('', 'analysis 1.5s linear 0s, analysis-scan 4s linear 2.0s infinite');
		73	?>
		74	}
		75
148	PointedEar	76	.multi-display .upper .content .analysis tr:nth-child(2)
123	PointedEar	77	{
		78	<?php
		79	Mixins::animation('', 'analysis 1.5s linear 0.25s, analysis-scan 4s linear 3.0s infinite');
		80	?>
		81	}
		82
148	PointedEar	83	.multi-display .upper .content .analysis tr:nth-child(3)
123	PointedEar	84	{
		85	<?php
		86	Mixins::animation('', 'analysis 1.5s linear 0.5s, analysis-scan 4s linear 4.0s infinite');
		87	?>
		88	}
		89
144	PointedEar	90	<?php
		91	Mixins::keyframes('analysis-offline', <<<CSS
		92	from, 33% {
		93	color: #300;
		94	}
		95
		96	34%, to {
		97	color: #f00;
		98	}
		99	CSS
		100	);
		101	?>
		102
		103	.offline {
		104	<?php
		105	Mixins::animation('', 'analysis-offline 3s linear 2.0s infinite');
		106	?>
		107	}
		108
37	PointedEar	109	body {
		110	margin-top: 12em;
119	PointedEar	111	margin-left: 16.8em;
37	PointedEar	112	margin-right: 0.2em;
		113	margin-bottom: 0.2em;
		114	}
		115
116	PointedEar	116	/* HTML5 elements */
		117
		118	nav
		119	{
		120	display: block;
		121	}
		122
37	PointedEar	123	/* Bow (main) and elbo (multi-view) */
		124
		125	#LCARS {
		126	position: fixed;
		127	left: 0;
		128	top: 0;
		129	right: 0;
		130	padding: 0.2em;
		131	background-color: #000;
		132	z-index: 1701;
		133	}
		134
		135	#bow {
		136	position: absolute;
		137	left: 0.2em;
		138	top: 0.2em;
		139	right: 0.2em;
		140	height: 2.4em;
		141	padding-bottom: 0.2em;
		142	background-color: #000;
		143	}
		144
		145	#bow-top {
		146	/* NOTE: position: absolute is needed for animation */
		147	position: absolute;
		148	top: 0;
		149	left: 0;
		150	right: 0;
		151	min-width: 15.4em;
		152	height: 2em;
		153	background-color: #999;
		154	border-top-left-radius: 2.4em;
		155	border-top-right-radius: 1.2em;
		156	border-bottom-right-radius: 1.2em;
		157	line-height: 0.9;
		158	}
		159
		160	.empty #bow-top {
		161	border-top-left-radius: 1.2em;
		162	border-bottom-left-radius: 1.2em;
38	PointedEar	163	min-width: 10em;
37	PointedEar	164	}
		165
		166
		167	#bow-top .text {
		168	position: absolute;
		169	margin: 0;
		170	left: 4.33em;
		171	top: 0;
40	PointedEar	172	right: 0.75em;
37	PointedEar	173	height: 1em;
		174	text-align: right;
		175	color: #fc0;
		176	font-size: 2.4em;
		177	padding-right: 0.1em;
		178	overflow: hidden;
		179	text-overflow: ellipsis;
		180	}
		181
38	PointedEar	182	.empty #bow-top .text {
		183	left: 0.93em;
		184	}
		185
37	PointedEar	186
		187
		188	#bow-top .text span {
		189	padding-right: 0.1em;
		190	background-color: #000;
		191	padding-left: 0.1em;
		192	text-transform: uppercase;
		193	white-space: nowrap;
		194	}
		195
38	PointedEar	196	.empty #footer-container {
		197	position: fixed;
		198	left: 0.2em;
		199	bottom: 0;
		200	right: 0.2em;
		201	min-height: 2.4em;
		202	padding-top: 0.2em;
		203	padding-bottom: 0.2em;
		204	background-color: #000;
		205	}
		206
40	PointedEar	207
38	PointedEar	208	.empty #footer {
		209	position: absolute;
		210	bottom: 0;
		211	left: 0;
		212	right: 0;
		213	height: 2em;
40	PointedEar	214	min-width: 10em;
38	PointedEar	215	margin-bottom: 0.2em;
		216	background-color: #999;
		217	border-radius: 1.2em;
40	PointedEar	218	line-height: 0.9;
38	PointedEar	219	}
		220
		221	.empty #footer .text {
		222	position: absolute;
40	PointedEar	223	margin: 0;
		224	left: 0.93em;
		225	top: 0;
		226	right: 0.75em;
		227	height: 1em;
		228	background-color: transparent;
38	PointedEar	229	color: #fc0;
40	PointedEar	230	font-size: 2.4em;
38	PointedEar	231	padding-right: 0.1em;
		232	overflow: hidden;
		233	text-overflow: ellipsis;
		234	}
		235
		236	.empty #footer .text span {
		237	padding-right: 0.1em;
40	PointedEar	238	background-color: #000;
38	PointedEar	239	padding-left: 0.1em;
		240	text-transform: uppercase;
		241	white-space: nowrap;
		242	}
		243
37	PointedEar	244	.empty .separator-left {
		245	position: absolute;
		246	left: 2em;
		247	height: 2em;
		248	width: 0.25em;
		249	background-color: #000;
		250	}
		251
		252	.empty .separator-right {
		253	position: absolute;
		254	right: 2em;
		255	height: 2em;
		256	width: 0.25em;
		257	background-color: #000;
		258	}
		259
58	PointedEar	260	.bow {
		261	background-color: #999;
		262	}
		263
37	PointedEar	264	#bow-top-left {
		265	position: absolute;
		266	top: 2em;
		267	left: 0;
		268	right: 0;
109	PointedEar	269	height: 4.4em;
37	PointedEar	270	width: 9.2em;
		271	background-color: #999;
109	PointedEar	272	overflow: hidden;
37	PointedEar	273	}
		274
		275	.empty #bow-top-left {
		276	display: none;
		277	}
		278
		279	#bow-top-left .concave {
		280	position: absolute;
		281	top: 0;
		282	left: 8em;
109	PointedEar	283	height: 4.4em;
37	PointedEar	284	width: 1.2em;
		285	background-color: #000;
		286	border-top-left-radius: 1.2em;
		287	}
		288
		289	.empty #bow-top-left-concave {
		290	display: none;
		291	}
		292
50	PointedEar	293	.menu-container {
43	PointedEar	294	position: fixed;
		295	left: 0.2em;
109	PointedEar	296	top: 6.8em;
43	PointedEar	297	width: 8em;
		298	bottom: 2.8em;
		299	background-color: #999;
37	PointedEar	300	overflow: auto;
109	PointedEar	301	overflow-x: hidden;
		302	overflow-y: auto;
37	PointedEar	303	}
		304
50	PointedEar	305	.menu
43	PointedEar	306	{
231	PointedEar	307	height: 20.6em;
43	PointedEar	308	background-color: #000;
		309	}
		310
		311	.menu ul {
103	PointedEar	312	margin: 0 0.2em 0 0;
37	PointedEar	313	padding: 0;
		314	}
		315
175	PointedEar	316	.menu ul:first-child {
		317	padding-top: 1em;
		318	}
		319
43	PointedEar	320	.menu li {
37	PointedEar	321	margin: 0;
		322	}
		323
		324	#bow #bottom
		325	{
		326	position: fixed;
		327	left: 0;
		328	bottom: 0;
119	PointedEar	329	width: 10.4em;
37	PointedEar	330	height: 2.4em;
		331	background-color: #000;
		332	z-index: 1701;
		333	}
		334
		335	#bow-bottom {
		336	position: absolute;
		337	bottom: 0.2em;
		338	left: 0.2em;
119	PointedEar	339	width: 8em;
167	PointedEar	340	height: 2.4em;
119	PointedEar	341	border-bottom-left-radius: 0em;
		342	border-bottom-right-radius: 0em;
37	PointedEar	343	background-color: #999;
		344	}
		345
		346	.empty #bow-bottom {
		347	display: none;
		348	}
		349
		350	#bow-bottom .concave {
		351	position: absolute;
		352	margin-left: 0.2em;
		353	margin-bottom: 0.2em;
		354	bottom: 0.3em;
		355	left: 7.8em;
		356	height: 2.1em;
119	PointedEar	357	width: 2.2em;
37	PointedEar	358	border-bottom-left-radius: 1.2em;
		359	border-bottom-right-radius: 1em;
		360	background-color: #000;
		361	}
		362
38	PointedEar	363	#bow-bottom .spacer {
37	PointedEar	364	position: absolute;
38	PointedEar	365	left: 10.2em;
94	PointedEar	366	bottom: 0;
38	PointedEar	367	width: 0.2em;
		368	height: 0.5em;
		369	background-color: black;
37	PointedEar	370	}
		371
38	PointedEar	372	.empty #bow-bottom-left-concave {
		373	display: none;
37	PointedEar	374	}
		375
		376	/* Controls */
		377
179	PointedEar	378	input,
		379	select
		380	{
		381	margin: 0 0.2em 0.2em 0;
		382	font-size: 1em;
		383	}
		384
		385	input
		386	{
		387	min-width: 4.875em;
		388	border: 1px solid #7d7d7d;
		389	padding: 0 0.125em;
		390	background-color: #000;
		391	color: #fff;
		392	}
		393
		394	input:focus
		395	{
		396	border-color: #f90;
		397	}
		398
		399	select
		400	{
		401	min-width: 5em;
		402	background-color: #7d7d7d;
		403	color: #000 !important;
		404	border: none;
		405	}
		406
		407	select:focus
		408	{
		409	background-color: #f90;
		410	color: #000;
		411	}
		412
		413	option {
		414	background-color: #000;
		415	color: #fff;
		416	}
		417
		418	option:checked {
		419	color: #fc6;
		420	}
		421
37	PointedEar	422	.button:visited,
		423	.button
		424	{
		425	position: relative;
		426	display: inline-block;
		427	margin-right: 0.2em;
		428	margin-bottom: 0.2em;
		429	width: 5em;
		430	height: 2em;
		431	background-color: #7d7d7d; /* c9c */
		432	color: #000 !important;
		433	text-decoration: none !important;
139	PointedEar	434	/* overflow: hidden; */
83	PointedEar	435	cursor: pointer !important;
37	PointedEar	436	}
		437
		438	.button .text {
		439	position: absolute;
		440	bottom: 0;
		441	right: 0.5em;
210	PointedEar	442	max-width: 3.5em;
		443	overflow: hidden;
83	PointedEar	444	cursor: pointer !important;
210	PointedEar	445	text-overflow: ellipsis;
		446	text-transform: uppercase;
		447	white-space: nowrap;
37	PointedEar	448	}
		449
		450	.button.command {
		451	border-radius: 1.2em;
		452	}
		453
		454	.button.command .text {
		455	position: absolute;
		456	bottom: 0;
		457	right: 1em;
		458	}
		459
		460	.button:hover,
		461	.button:focus,
		462	.button.selected:hover,
		463	.button.selected:focus,
		464	.group .button:hover,
		465	.group .button:focus,
		466	.group .button:visited:hover,
		467	.group .button:visited:focus
		468	{
		469	background-color: #f90 !important;
		470	color: #000 !important;
		471	}
		472
		473	.button:active,
		474	.button.selected:active,
		475	.group .button:active,
		476	.group .button:visited:active
		477	{
		478	background-color: #fff !important;
		479	color: #000 !important;
		480	}
		481
175	PointedEar	482	.menu bow {
		483	width: 8em;
		484	}
		485
43	PointedEar	486	.menu .button {
37	PointedEar	487	display: block;
		488	width: 8em;
		489	height: 1em;
		490	line-height: 1;
		491	background-color: #9cf;
		492	color: #000 !important;
50	PointedEar	493	text-overflow: ellipsis;
		494	white-space: nowrap;
37	PointedEar	495	}
		496
58	PointedEar	497	#connectors {
		498	position: fixed;
		499	left: 8.4em;
		500	top: 5.6em;
		501	}
		502
119	PointedEar	503	#connectors div {
		504	position: absolute;
		505	}
		506
		507	#connectors .top {
		508	top: 0;
		509	height: 1em;
		510	}
		511
		512	#connectors .mid {
231	PointedEar	513	top: 10.4em;
119	PointedEar	514	height: 0.8em;
		515	}
		516
		517	#connectors .left {
		518	left: 0;
		519	width: 2em;
		520	}
		521
		522	#connectors .right {
		523	left: 2.2em;
		524	width: 0em;
		525	}
		526
37	PointedEar	527	.multi-display
		528	{
		529	position: fixed;
74	PointedEar	530	top: 2.6em;
119	PointedEar	531	left: 10.6em;
94	PointedEar	532	right: 0;
37	PointedEar	533	}
		534
		535	.multi-display .button
		536	{
		537	width: 5em !important;
		538	}
		539
179	PointedEar	540	#content.fixed {
		541	position: fixed;
		542	margin-right: 0.2em;
		543	top: 12em;
		544	right: 0;
		545	bottom: 0.2em;
		546	left: 16.8em;
		547	overflow: hidden;
		548	}
		549
37	PointedEar	550	.multi-display .upper
		551	{
		552	position: absolute;
		553	top: 0;
		554	left: 0;
		555	right: 0;
94	PointedEar	556	height: 7.5em;
37	PointedEar	557	padding-right: 0.2em;
		558	background-color: black;
		559	}
		560
74	PointedEar	561	.multi-display .upper .content
72	PointedEar	562	{
		563	position: absolute;
		564	top: 0;
74	PointedEar	565	left: 6em;
94	PointedEar	566	bottom: 1.3em;
72	PointedEar	567	right: 0.2em;
		568	background-color: black;
		569	color: white;
74	PointedEar	570	text-align: right;
		571	overflow: hidden;
		572	text-overflow: ellipsis;
		573	}
		574
		575	.multi-display .upper .content .title
		576	{
		577	position: absolute;
		578	top: 0;
94	PointedEar	579	left: 0;
74	PointedEar	580	height: 1em;
94	PointedEar	581	right: 0;
74	PointedEar	582	background-color: black;
		583	color: white;
72	PointedEar	584	font-size: 2.4em;
		585	text-transform: uppercase;
		586	text-align: right;
74	PointedEar	587	overflow: hidden;
72	PointedEar	588	}
		589
74	PointedEar	590	.multi-display .upper .content .title span
37	PointedEar	591	{
74	PointedEar	592	white-space: nowrap;
		593	}
		594
90	PointedEar	595	.multi-display .upper .content .analysis {
		596	position: absolute;
		597	top: 2.4em;
		598	bottom: 0;
		599	right: 11em;
		600	left: 0;
		601	overflow: hidden;
		602	text-align: left;
118	PointedEar	603	cursor: default;
90	PointedEar	604	}
		605
118	PointedEar	606	.multi-display .upper .content .analysis table {
		607	border-collapse: collapse;
		608	line-height: 1.2;
119	PointedEar	609	max-width: 100%;
118	PointedEar	610	}
148	PointedEar	611
118	PointedEar	612	.multi-display .upper .content .analysis th {
120	PointedEar	613	padding: 0 0.4em 0 0.1em;
118	PointedEar	614	font-weight: normal;
210	PointedEar	615	background-color: #000;
		616	color: #fc0;
118	PointedEar	617	text-align: left;
		618	text-transform: uppercase;
		619	white-space: nowrap;
		620	vertical-align: baseline;
		621	}
		622
182	PointedEar	623	.multi-display .upper .content .analysis th:nth-child(3) {
		624	padding-left: 0.7em;
		625	}
		626
118	PointedEar	627	.multi-display .upper .content .analysis td {
120	PointedEar	628	padding: 0 0.1em 0 0.1em;
118	PointedEar	629	text-overflow: ellipsis;
		630	white-space: nowrap;
		631	vertical-align: baseline;
		632	text-overflow: ellipsis;
		633	}
		634
		635	.multi-display .upper .content .analysis td sup {
		636	line-height: 1;
		637	font-weight: 500;
		638	}
		639
92	PointedEar	640	.multi-display .upper .content .commands
74	PointedEar	641	{
		642	position: absolute;
92	PointedEar	643	margin: 0;
		644	padding: 0;
		645	top: 2.4em;
94	PointedEar	646	right: 0;
92	PointedEar	647	height: 3.8em;
		648	width: 10.2em;
		649	list-style: none;
		650	}
		651
		652	.multi-display .upper .content .commands li
		653	{
		654	position: absolute;
		655	margin: 0;
		656	width: 5em;
74	PointedEar	657	height: 1.8em;
92	PointedEar	658	}
		659
		660	.multi-display .upper .content .commands .button
		661	{
		662	position: absolute;
		663	top: 0;
		664	left: 0;
		665	margin: 0;
		666	height: 1.8em;
		667	border-radius: 0.9em;
74	PointedEar	668	}
		669
210	PointedEar	670	.multi-display .commands .button .text
		671	{
		672	text-transform: none !important;
		673	}
		674
92	PointedEar	675	.multi-display .upper .content .commands .button .text {
101	PointedEar	676	right: 1em;
74	PointedEar	677	}
		678
		679	.multi-display .upper .content #cmd1
		680	{
92	PointedEar	681	top: 0;
74	PointedEar	682	right: 5.2em;
		683	}
		684
		685	.multi-display .upper .content #cmd2
		686	{
92	PointedEar	687	top: 0;
74	PointedEar	688	right: 0;
		689	}
		690
		691	.multi-display .upper .content #cmd3
		692	{
92	PointedEar	693	top: 2em;
		694	right: 0;
74	PointedEar	695	}
		696
		697	.multi-display .upper .content #cmd4
		698	{
92	PointedEar	699	top: 2em;
		700	right: 5.2em;
74	PointedEar	701	}
		702
		703	.multi-display .upper .elbo-button
		704	{
		705	position: absolute;
		706	top: 0;
		707	left: 0;
		708	width: 5em;
		709	height: 4em;
37	PointedEar	710	background-color: #c9c !important;
72	PointedEar	711	color: #000 !important;
83	PointedEar	712	cursor: default;
37	PointedEar	713	}
		714
74	PointedEar	715	.multi-display .upper .elbo-button .text
72	PointedEar	716	{
		717	position: absolute;
		718	bottom: 0;
		719	right: 0.2em;
102	PointedEar	720	max-width: 4em;
72	PointedEar	721	max-height: 3.6em;
		722	text-align: right;
		723	overflow: hidden;
		724	}
		725
37	PointedEar	726	.multi-display .upper .elbo
		727	{
		728	position: absolute;
		729	left: 0;
74	PointedEar	730	top: 4.2em;
37	PointedEar	731	width: 6em;
		732	height: 3.2em;
		733	border-bottom-left-radius: 2em;
		734	background-color: #9cf;
72	PointedEar	735	color: #000;
37	PointedEar	736	}
		737
72	PointedEar	738	.multi-display .upper .elbo .text
		739	{
		740	position: absolute;
		741	top: 0;
		742	right: 1.2em;
102	PointedEar	743	max-width: 4em;
72	PointedEar	744	max-height: 2.2em;
		745	text-align: right;
		746	overflow: hidden;
83	PointedEar	747	cursor: default;
72	PointedEar	748	}
		749
101	PointedEar	750	.elbo [title],
		751	.button [title]
		752	{
		753	border-bottom: none;
		754	}
		755
37	PointedEar	756	.multi-display .upper .elbo .concave
		757	{
		758	position: absolute;
		759	left: 5em;
		760	top: 0;
103	PointedEar	761	width: 1.1em;
37	PointedEar	762	height: 2.2em;
		763	border-bottom-left-radius: 1em;
		764	background-color: black;
		765	}
		766
80	PointedEar	767	.multi-display .border
		768	{
		769	height: 1em;
		770	}
		771
37	PointedEar	772	.multi-display .upper .border
		773	{
94	PointedEar	774	position: absolute;
		775	top: 6.4em;
		776	left: 6em;
37	PointedEar	777	right: 0.2em;
79	PointedEar	778	}
		779
		780	.multi-display .border div
		781	{
		782	position: absolute;
		783	top: 0;
		784	height: 1em;
		785	}
		786
		787	.multi-display .upper .border div
		788	{
37	PointedEar	789	background-color: #9cf;
80	PointedEar	790	}
79	PointedEar	791
		792	.multi-display .upper .border .left
		793	{
		794	left: 0;
		795	right: 5.2em;
		796	height: 1em;
37	PointedEar	797	}
		798
79	PointedEar	799	.multi-display .upper .border .right
		800	{
		801	width: 5em;
		802	right: 0;
		803	}
		804
37	PointedEar	805	.multi-display .lower
		806	{
		807	position: absolute;
74	PointedEar	808	top: 7.5em;
37	PointedEar	809	left: 0;
94	PointedEar	810	height: 0.1em;
		811	right: 0;
37	PointedEar	812	background-color: black;
		813	}
		814
		815	.multi-display .lower .elbo
		816	{
94	PointedEar	817	position: absolute;
		818	top: 0.1em;
		819	left: 0;
37	PointedEar	820	width: 6em;
		821	height: 3em;
		822	border-top-left-radius: 2em;
		823	background-color: #fc6;
		824	}
		825
		826	.multi-display .lower .elbo .concave
		827	{
		828	position: absolute;
		829	left: 5em;
		830	top: 1em;
103	PointedEar	831	width: 1.1em;
		832	height: 2.1em;
37	PointedEar	833	background-color: black;
		834	border-top-left-radius: 1em;
		835	}
		836
		837	.multi-display .lower .bg
		838	{
		839	position: fixed;
		840	top: 13.4em;
119	PointedEar	841	bottom: 0.2em;
37	PointedEar	842	width: 5em;
		843	background-color: #fc6;
		844	}
		845
		846	.multi-display .lower .border-container
		847	{
94	PointedEar	848	position: absolute;
		849	top: 0.1em;
		850	left: 6em;
		851	right: 0;
37	PointedEar	852	height: 1.2em;
		853	background-color: black;
		854	}
		855
		856	.multi-display .lower .border
		857	{
80	PointedEar	858	position: absolute;
37	PointedEar	859	left: 0;
		860	right: 0.2em;
79	PointedEar	861	}
		862
		863	.multi-display .lower .border div
		864	{
37	PointedEar	865	background-color: #fc6;
		866	}
		867
79	PointedEar	868	.multi-display .lower .border .left
		869	{
		870	left: 0;
80	PointedEar	871	right: 5.2em;
79	PointedEar	872	}
		873
		874	.multi-display .lower .border .right
		875	{
		876	width: 5em;
80	PointedEar	877	right: 0;
79	PointedEar	878	}
		879
43	PointedEar	880	.menu .button.secondary,
		881	.multi-display .lower .elbo.secondary,
		882	.multi-display .lower .bg.secondary,
		883	.multi-display .lower .border.secondary
		884	{
		885	background-color: #f96;
		886	}
		887
		888	.menu .button.ancillary,
		889	.multi-display .lower .elbo.ancillary,
		890	.multi-display .lower .bg.ancillary,
		891	.multi-display .lower .border.ancillary
		892	{
		893	background-color: #c9c;
		894	}
		895
		896	.menu .button.database,
		897	.multi-display .lower .elbo.database,
		898	.multi-display .lower .bg.database,
		899	.multi-display .lower .border.database
		900	{
37	PointedEar	901	background-color: #c66;
		902	}
		903
43	PointedEar	904	.menu .button .text {
37	PointedEar	905	position: static;
		906	margin: 0 0.25em;
		907	}
		908
		909	.button.selected {
		910	background-color: #fc6 !important;
		911	color: #000 !important;
		912	}
		913
		914	.group {
		915	margin: 0 auto;
		916	position: relative;
38	PointedEar	917	width: 7.7em;
37	PointedEar	918	}
		919
		920	.group .separator {
		921	float: left;
		922	position: absolute;
38	PointedEar	923	top: 0;
		924	left: 0;
		925	width: 1.5em;
37	PointedEar	926	height: 100%;
		927	background-color: #c66;
		928	color: #000;
		929	}
		930
231	PointedEar	931	.group .separator.right
		932	{
		933	left: auto;
		934	right: 0;
		935	}
		936
37	PointedEar	937	.group .separator:after {
		938	position: absolute;
38	PointedEar	939	width: 0.8em;
		940	height: 0.5em;
		941	bottom: 0.25em;
		942	left: 0.25em;
37	PointedEar	943	background-color: #000;
		944	content: "\a0";
		945	}
		946
		947	.group ul {
38	PointedEar	948	margin-left: 1.7em;
37	PointedEar	949	}
		950
231	PointedEar	951	.group ul.left
		952	{
		953	margin-left: 0;
		954	}
		955
37	PointedEar	956	.group li {
38	PointedEar	957	margin-bottom: 0;
37	PointedEar	958	}
		959
		960	.group .button:visited,
		961	.group .button
		962	{
38	PointedEar	963	display: block;
37	PointedEar	964	position: relative;
38	PointedEar	965	width: 6em;
37	PointedEar	966	background-color: #99f !important;
		967	}
		968
38	PointedEar	969	.group li:last-child .button
		970	{
		971	margin-bottom: 0;
37	PointedEar	972	}
		973
231	PointedEar	974	.button.right,
		975	.group ul .button,
		976	.group ul.left .button.right
		977	{
		978	border-top-left-radius: 0;
38	PointedEar	979	border-top-right-radius: 1em;
		980	border-bottom-right-radius: 1em;
231	PointedEar	981	border-bottom-left-radius: 0;
37	PointedEar	982	}
		983
231	PointedEar	984	.button.right .text,
		985	.group ul .button .text,
		986	.group ul.left .button.right .text
		987	{
		988	left: auto;
38	PointedEar	989	right: 1em;
		990	}
		991
231	PointedEar	992	.group ul.left .button .text
		993	{
		994	left: 1em;
		995	right: auto;
		996	}
		997
		998	.button.left,
		999	.group ul.left .button
		1000	{
38	PointedEar	1001	border-top-left-radius: 1em;
231	PointedEar	1002	border-top-right-radius: 0;
		1003	border-bottom-right-radius: 0;
38	PointedEar	1004	border-bottom-left-radius: 1em;
		1005	}
		1006
231	PointedEar	1007	.group .button .key,
		1008	.group ul.left .button.right .key
		1009	{
37	PointedEar	1010	display: inline-block;
		1011	position: absolute;
38	PointedEar	1012	left: 0.2em;
37	PointedEar	1013	top: 0;
231	PointedEar	1014	right: auto;
37	PointedEar	1015	bottom: 0;
38	PointedEar	1016	padding: 0 0.1em;
37	PointedEar	1017	background-color: #000;
		1018	color: #f90;
38	PointedEar	1019	font-size: 2.4em;
231	PointedEar	1020	text-transform: uppercase !important;
38	PointedEar	1021	line-height: 0.9;
119	PointedEar	1022	}
		1023
231	PointedEar	1024	.group ul.left .button .key
		1025	{
		1026	left: auto;
		1027	right: 0.2em;
		1028	}
		1029
		1030	<?php require_once 'lcars-responsive.css'; ?>

Subversion Repositories LCARS

(root)/trunk/styles/lcars22.css @ 165 - Rev 231