WebSVN - LCARS - Blame - Rev 182 - /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	{
167	PointedEar	307	height: 23.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;
		434	text-transform: uppercase;
139	PointedEar	435	/* overflow: hidden; */
83	PointedEar	436	cursor: pointer !important;
37	PointedEar	437	}
		438
		439	.button .text {
		440	position: absolute;
		441	bottom: 0;
		442	right: 0.5em;
83	PointedEar	443	cursor: pointer !important;
37	PointedEar	444	}
		445
		446	.button.command {
		447	border-radius: 1.2em;
		448	}
		449
		450	.button.command .text {
		451	position: absolute;
		452	bottom: 0;
		453	right: 1em;
		454	}
		455
		456	.button:hover,
		457	.button:focus,
		458	.button.selected:hover,
		459	.button.selected:focus,
		460	.group .button:hover,
		461	.group .button:focus,
		462	.group .button:visited:hover,
		463	.group .button:visited:focus
		464	{
		465	background-color: #f90 !important;
		466	color: #000 !important;
		467	}
		468
		469	.button:active,
		470	.button.selected:active,
		471	.group .button:active,
		472	.group .button:visited:active
		473	{
		474	background-color: #fff !important;
		475	color: #000 !important;
		476	}
		477
175	PointedEar	478	.menu bow {
		479	width: 8em;
		480	}
		481
43	PointedEar	482	.menu .button {
37	PointedEar	483	display: block;
		484	width: 8em;
		485	height: 1em;
		486	line-height: 1;
		487	background-color: #9cf;
		488	color: #000 !important;
50	PointedEar	489	text-overflow: ellipsis;
		490	white-space: nowrap;
37	PointedEar	491	}
		492
58	PointedEar	493	#connectors {
		494	position: fixed;
		495	left: 8.4em;
		496	top: 5.6em;
		497	}
		498
119	PointedEar	499	#connectors div {
		500	position: absolute;
		501	}
		502
		503	#connectors .top {
		504	top: 0;
		505	height: 1em;
		506	}
		507
		508	#connectors .mid {
		509	top: 13.6em;
		510	height: 0.8em;
		511	}
		512
		513	#connectors .left {
		514	left: 0;
		515	width: 2em;
		516	}
		517
		518	#connectors .right {
		519	left: 2.2em;
		520	width: 0em;
		521	}
		522
37	PointedEar	523	.multi-display
		524	{
		525	position: fixed;
74	PointedEar	526	top: 2.6em;
119	PointedEar	527	left: 10.6em;
94	PointedEar	528	right: 0;
37	PointedEar	529	}
		530
		531	.multi-display .button
		532	{
		533	width: 5em !important;
		534	}
		535
179	PointedEar	536	#content.fixed {
		537	position: fixed;
		538	margin-right: 0.2em;
		539	top: 12em;
		540	right: 0;
		541	bottom: 0.2em;
		542	left: 16.8em;
		543	overflow: hidden;
		544	}
		545
37	PointedEar	546	.multi-display .upper
		547	{
		548	position: absolute;
		549	top: 0;
		550	left: 0;
		551	right: 0;
94	PointedEar	552	height: 7.5em;
37	PointedEar	553	padding-right: 0.2em;
		554	background-color: black;
		555	}
		556
74	PointedEar	557	.multi-display .upper .content
72	PointedEar	558	{
		559	position: absolute;
		560	top: 0;
74	PointedEar	561	left: 6em;
94	PointedEar	562	bottom: 1.3em;
72	PointedEar	563	right: 0.2em;
		564	background-color: black;
		565	color: white;
74	PointedEar	566	text-align: right;
		567	overflow: hidden;
		568	text-overflow: ellipsis;
		569	}
		570
		571	.multi-display .upper .content .title
		572	{
		573	position: absolute;
		574	top: 0;
94	PointedEar	575	left: 0;
74	PointedEar	576	height: 1em;
94	PointedEar	577	right: 0;
74	PointedEar	578	background-color: black;
		579	color: white;
72	PointedEar	580	font-size: 2.4em;
		581	text-transform: uppercase;
		582	text-align: right;
74	PointedEar	583	overflow: hidden;
72	PointedEar	584	}
		585
74	PointedEar	586	.multi-display .upper .content .title span
37	PointedEar	587	{
74	PointedEar	588	white-space: nowrap;
		589	}
		590
90	PointedEar	591	.multi-display .upper .content .analysis {
		592	position: absolute;
		593	top: 2.4em;
		594	bottom: 0;
		595	right: 11em;
		596	left: 0;
		597	overflow: hidden;
		598	text-align: left;
118	PointedEar	599	cursor: default;
90	PointedEar	600	}
		601
118	PointedEar	602	.multi-display .upper .content .analysis table {
		603	border-collapse: collapse;
		604	line-height: 1.2;
119	PointedEar	605	max-width: 100%;
118	PointedEar	606	}
148	PointedEar	607
118	PointedEar	608	.multi-display .upper .content .analysis th {
120	PointedEar	609	padding: 0 0.4em 0 0.1em;
118	PointedEar	610	font-weight: normal;
		611	text-align: left;
		612	text-transform: uppercase;
		613	white-space: nowrap;
		614	vertical-align: baseline;
		615	}
		616
182	PointedEar	617	.multi-display .upper .content .analysis th:nth-child(3) {
		618	padding-left: 0.7em;
		619	}
		620
118	PointedEar	621	.multi-display .upper .content .analysis td {
120	PointedEar	622	padding: 0 0.1em 0 0.1em;
118	PointedEar	623	text-overflow: ellipsis;
		624	white-space: nowrap;
		625	vertical-align: baseline;
		626	text-overflow: ellipsis;
		627	}
		628
		629	.multi-display .upper .content .analysis td sup {
		630	line-height: 1;
		631	font-weight: 500;
		632	}
		633
92	PointedEar	634	.multi-display .upper .content .commands
74	PointedEar	635	{
		636	position: absolute;
92	PointedEar	637	margin: 0;
		638	padding: 0;
		639	top: 2.4em;
94	PointedEar	640	right: 0;
92	PointedEar	641	height: 3.8em;
		642	width: 10.2em;
		643	list-style: none;
		644	}
		645
		646	.multi-display .upper .content .commands li
		647	{
		648	position: absolute;
		649	margin: 0;
		650	width: 5em;
74	PointedEar	651	height: 1.8em;
92	PointedEar	652	}
		653
		654	.multi-display .upper .content .commands .button
		655	{
		656	position: absolute;
		657	top: 0;
		658	left: 0;
		659	margin: 0;
		660	height: 1.8em;
		661	border-radius: 0.9em;
74	PointedEar	662	text-transform: none;
		663	}
		664
92	PointedEar	665	.multi-display .upper .content .commands .button .text {
101	PointedEar	666	right: 1em;
74	PointedEar	667	}
		668
		669	.multi-display .upper .content #cmd1
		670	{
92	PointedEar	671	top: 0;
74	PointedEar	672	right: 5.2em;
		673	}
		674
		675	.multi-display .upper .content #cmd2
		676	{
92	PointedEar	677	top: 0;
74	PointedEar	678	right: 0;
		679	}
		680
		681	.multi-display .upper .content #cmd3
		682	{
92	PointedEar	683	top: 2em;
		684	right: 0;
74	PointedEar	685	}
		686
		687	.multi-display .upper .content #cmd4
		688	{
92	PointedEar	689	top: 2em;
		690	right: 5.2em;
74	PointedEar	691	}
		692
		693	.multi-display .upper .elbo-button
		694	{
		695	position: absolute;
		696	top: 0;
		697	left: 0;
		698	width: 5em;
		699	height: 4em;
37	PointedEar	700	background-color: #c9c !important;
72	PointedEar	701	color: #000 !important;
83	PointedEar	702	cursor: default;
37	PointedEar	703	}
		704
74	PointedEar	705	.multi-display .upper .elbo-button .text
72	PointedEar	706	{
		707	position: absolute;
		708	bottom: 0;
		709	right: 0.2em;
102	PointedEar	710	max-width: 4em;
72	PointedEar	711	max-height: 3.6em;
		712	text-align: right;
		713	overflow: hidden;
		714	}
		715
37	PointedEar	716	.multi-display .upper .elbo
		717	{
		718	position: absolute;
		719	left: 0;
74	PointedEar	720	top: 4.2em;
37	PointedEar	721	width: 6em;
		722	height: 3.2em;
		723	border-bottom-left-radius: 2em;
		724	background-color: #9cf;
72	PointedEar	725	color: #000;
37	PointedEar	726	}
		727
72	PointedEar	728	.multi-display .upper .elbo .text
		729	{
		730	position: absolute;
		731	top: 0;
		732	right: 1.2em;
102	PointedEar	733	max-width: 4em;
72	PointedEar	734	max-height: 2.2em;
		735	text-align: right;
		736	overflow: hidden;
83	PointedEar	737	cursor: default;
72	PointedEar	738	}
		739
101	PointedEar	740	.elbo [title],
		741	.button [title]
		742	{
		743	border-bottom: none;
		744	}
		745
37	PointedEar	746	.multi-display .upper .elbo .concave
		747	{
		748	position: absolute;
		749	left: 5em;
		750	top: 0;
103	PointedEar	751	width: 1.1em;
37	PointedEar	752	height: 2.2em;
		753	border-bottom-left-radius: 1em;
		754	background-color: black;
		755	}
		756
80	PointedEar	757	.multi-display .border
		758	{
		759	height: 1em;
		760	}
		761
37	PointedEar	762	.multi-display .upper .border
		763	{
94	PointedEar	764	position: absolute;
		765	top: 6.4em;
		766	left: 6em;
37	PointedEar	767	right: 0.2em;
79	PointedEar	768	}
		769
		770	.multi-display .border div
		771	{
		772	position: absolute;
		773	top: 0;
		774	height: 1em;
		775	}
		776
		777	.multi-display .upper .border div
		778	{
37	PointedEar	779	background-color: #9cf;
80	PointedEar	780	}
79	PointedEar	781
		782	.multi-display .upper .border .left
		783	{
		784	left: 0;
		785	right: 5.2em;
		786	height: 1em;
37	PointedEar	787	}
		788
79	PointedEar	789	.multi-display .upper .border .right
		790	{
		791	width: 5em;
		792	right: 0;
		793	}
		794
37	PointedEar	795	.multi-display .lower
		796	{
		797	position: absolute;
74	PointedEar	798	top: 7.5em;
37	PointedEar	799	left: 0;
94	PointedEar	800	height: 0.1em;
		801	right: 0;
37	PointedEar	802	background-color: black;
		803	}
		804
		805	.multi-display .lower .elbo
		806	{
94	PointedEar	807	position: absolute;
		808	top: 0.1em;
		809	left: 0;
37	PointedEar	810	width: 6em;
		811	height: 3em;
		812	border-top-left-radius: 2em;
		813	background-color: #fc6;
		814	}
		815
		816	.multi-display .lower .elbo .concave
		817	{
		818	position: absolute;
		819	left: 5em;
		820	top: 1em;
103	PointedEar	821	width: 1.1em;
		822	height: 2.1em;
37	PointedEar	823	background-color: black;
		824	border-top-left-radius: 1em;
		825	}
		826
		827	.multi-display .lower .bg
		828	{
		829	position: fixed;
		830	top: 13.4em;
119	PointedEar	831	bottom: 0.2em;
37	PointedEar	832	width: 5em;
		833	background-color: #fc6;
		834	}
		835
		836	.multi-display .lower .border-container
		837	{
94	PointedEar	838	position: absolute;
		839	top: 0.1em;
		840	left: 6em;
		841	right: 0;
37	PointedEar	842	height: 1.2em;
		843	background-color: black;
		844	}
		845
		846	.multi-display .lower .border
		847	{
80	PointedEar	848	position: absolute;
37	PointedEar	849	left: 0;
		850	right: 0.2em;
79	PointedEar	851	}
		852
		853	.multi-display .lower .border div
		854	{
37	PointedEar	855	background-color: #fc6;
		856	}
		857
79	PointedEar	858	.multi-display .lower .border .left
		859	{
		860	left: 0;
80	PointedEar	861	right: 5.2em;
79	PointedEar	862	}
		863
		864	.multi-display .lower .border .right
		865	{
		866	width: 5em;
80	PointedEar	867	right: 0;
79	PointedEar	868	}
		869
43	PointedEar	870	.menu .button.secondary,
		871	.multi-display .lower .elbo.secondary,
		872	.multi-display .lower .bg.secondary,
		873	.multi-display .lower .border.secondary
		874	{
		875	background-color: #f96;
		876	}
		877
		878	.menu .button.ancillary,
		879	.multi-display .lower .elbo.ancillary,
		880	.multi-display .lower .bg.ancillary,
		881	.multi-display .lower .border.ancillary
		882	{
		883	background-color: #c9c;
		884	}
		885
		886	.menu .button.database,
		887	.multi-display .lower .elbo.database,
		888	.multi-display .lower .bg.database,
		889	.multi-display .lower .border.database
		890	{
37	PointedEar	891	background-color: #c66;
		892	}
		893
43	PointedEar	894	.menu .button .text {
37	PointedEar	895	position: static;
		896	margin: 0 0.25em;
		897	}
		898
		899	.button.selected {
		900	background-color: #fc6 !important;
		901	color: #000 !important;
		902	}
		903
		904	.group {
		905	margin: 0 auto;
		906	position: relative;
38	PointedEar	907	width: 7.7em;
37	PointedEar	908	}
		909
		910	.group .separator {
		911	float: left;
		912	position: absolute;
38	PointedEar	913	top: 0;
		914	left: 0;
		915	width: 1.5em;
37	PointedEar	916	height: 100%;
		917	background-color: #c66;
		918	color: #000;
		919	}
		920
		921	.group .separator:after {
		922	position: absolute;
38	PointedEar	923	width: 0.8em;
		924	height: 0.5em;
		925	bottom: 0.25em;
		926	left: 0.25em;
37	PointedEar	927	background-color: #000;
		928	content: "\a0";
		929	}
		930
		931	.group ul {
38	PointedEar	932	margin-left: 1.7em;
37	PointedEar	933	}
		934
		935	.group li {
38	PointedEar	936	margin-bottom: 0;
37	PointedEar	937	}
		938
		939	.group .button:visited,
		940	.group .button
		941	{
38	PointedEar	942	display: block;
37	PointedEar	943	position: relative;
38	PointedEar	944	width: 6em;
37	PointedEar	945	background-color: #99f !important;
		946	}
		947
38	PointedEar	948	.group li:last-child .button
		949	{
		950	margin-bottom: 0;
37	PointedEar	951	}
		952
38	PointedEar	953	.button.right {
		954	border-top-right-radius: 1em;
		955	border-bottom-right-radius: 1em;
37	PointedEar	956	}
		957
38	PointedEar	958	.button.right .text {
		959	right: 1em;
		960	}
		961
		962	.button.left {
		963	border-top-left-radius: 1em;
		964	border-bottom-left-radius: 1em;
		965	}
		966
37	PointedEar	967	.group .button .key {
		968	display: inline-block;
		969	position: absolute;
38	PointedEar	970	left: 0.2em;
37	PointedEar	971	top: 0;
		972	bottom: 0;
38	PointedEar	973	padding: 0 0.1em;
37	PointedEar	974	background-color: #000;
		975	color: #f90;
38	PointedEar	976	font-size: 2.4em;
37	PointedEar	977	text-transform: uppercase;
38	PointedEar	978	line-height: 0.9;
119	PointedEar	979	}
		980
175	PointedEar	981	<?php require_once 'lcars-responsive.css'; ?>

Subversion Repositories LCARS

(root)/trunk/styles/lcars22.css - Rev 182