WebSVN - LCARS - Blame - Rev 235 - /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;
235	PointedEar	192	text-transform: uppercase !important;
37	PointedEar	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;
235	PointedEar	720	max-width: 4.2em;
72	PointedEar	721	max-height: 3.6em;
		722	text-align: right;
		723	overflow: hidden;
235	PointedEar	724	word-wrap: break-word;
72	PointedEar	725	}
		726
37	PointedEar	727	.multi-display .upper .elbo
		728	{
		729	position: absolute;
		730	left: 0;
74	PointedEar	731	top: 4.2em;
37	PointedEar	732	width: 6em;
		733	height: 3.2em;
		734	border-bottom-left-radius: 2em;
		735	background-color: #9cf;
72	PointedEar	736	color: #000;
37	PointedEar	737	}
		738
72	PointedEar	739	.multi-display .upper .elbo .text
		740	{
		741	position: absolute;
		742	top: 0;
		743	right: 1.2em;
235	PointedEar	744	max-width: 4.2em;
72	PointedEar	745	max-height: 2.2em;
		746	text-align: right;
		747	overflow: hidden;
83	PointedEar	748	cursor: default;
72	PointedEar	749	}
		750
101	PointedEar	751	.elbo [title],
		752	.button [title]
		753	{
		754	border-bottom: none;
		755	}
		756
37	PointedEar	757	.multi-display .upper .elbo .concave
		758	{
		759	position: absolute;
		760	left: 5em;
		761	top: 0;
103	PointedEar	762	width: 1.1em;
37	PointedEar	763	height: 2.2em;
		764	border-bottom-left-radius: 1em;
		765	background-color: black;
		766	}
		767
80	PointedEar	768	.multi-display .border
		769	{
		770	height: 1em;
		771	}
		772
37	PointedEar	773	.multi-display .upper .border
		774	{
94	PointedEar	775	position: absolute;
		776	top: 6.4em;
		777	left: 6em;
37	PointedEar	778	right: 0.2em;
79	PointedEar	779	}
		780
		781	.multi-display .border div
		782	{
		783	position: absolute;
		784	top: 0;
		785	height: 1em;
		786	}
		787
		788	.multi-display .upper .border div
		789	{
37	PointedEar	790	background-color: #9cf;
80	PointedEar	791	}
79	PointedEar	792
		793	.multi-display .upper .border .left
		794	{
		795	left: 0;
		796	right: 5.2em;
		797	height: 1em;
37	PointedEar	798	}
		799
79	PointedEar	800	.multi-display .upper .border .right
		801	{
		802	width: 5em;
		803	right: 0;
		804	}
		805
37	PointedEar	806	.multi-display .lower
		807	{
		808	position: absolute;
74	PointedEar	809	top: 7.5em;
37	PointedEar	810	left: 0;
94	PointedEar	811	height: 0.1em;
		812	right: 0;
37	PointedEar	813	background-color: black;
		814	}
		815
		816	.multi-display .lower .elbo
		817	{
94	PointedEar	818	position: absolute;
		819	top: 0.1em;
		820	left: 0;
37	PointedEar	821	width: 6em;
		822	height: 3em;
		823	border-top-left-radius: 2em;
		824	background-color: #fc6;
		825	}
		826
		827	.multi-display .lower .elbo .concave
		828	{
		829	position: absolute;
		830	left: 5em;
		831	top: 1em;
103	PointedEar	832	width: 1.1em;
		833	height: 2.1em;
37	PointedEar	834	background-color: black;
		835	border-top-left-radius: 1em;
		836	}
		837
		838	.multi-display .lower .bg
		839	{
		840	position: fixed;
		841	top: 13.4em;
119	PointedEar	842	bottom: 0.2em;
37	PointedEar	843	width: 5em;
		844	background-color: #fc6;
		845	}
		846
		847	.multi-display .lower .border-container
		848	{
94	PointedEar	849	position: absolute;
		850	top: 0.1em;
		851	left: 6em;
		852	right: 0;
37	PointedEar	853	height: 1.2em;
		854	background-color: black;
		855	}
		856
		857	.multi-display .lower .border
		858	{
80	PointedEar	859	position: absolute;
37	PointedEar	860	left: 0;
		861	right: 0.2em;
79	PointedEar	862	}
		863
		864	.multi-display .lower .border div
		865	{
37	PointedEar	866	background-color: #fc6;
		867	}
		868
79	PointedEar	869	.multi-display .lower .border .left
		870	{
		871	left: 0;
80	PointedEar	872	right: 5.2em;
79	PointedEar	873	}
		874
		875	.multi-display .lower .border .right
		876	{
		877	width: 5em;
80	PointedEar	878	right: 0;
79	PointedEar	879	}
		880
43	PointedEar	881	.menu .button.secondary,
		882	.multi-display .lower .elbo.secondary,
		883	.multi-display .lower .bg.secondary,
		884	.multi-display .lower .border.secondary
		885	{
		886	background-color: #f96;
		887	}
		888
		889	.menu .button.ancillary,
		890	.multi-display .lower .elbo.ancillary,
		891	.multi-display .lower .bg.ancillary,
		892	.multi-display .lower .border.ancillary
		893	{
		894	background-color: #c9c;
		895	}
		896
		897	.menu .button.database,
		898	.multi-display .lower .elbo.database,
		899	.multi-display .lower .bg.database,
		900	.multi-display .lower .border.database
		901	{
37	PointedEar	902	background-color: #c66;
		903	}
		904
43	PointedEar	905	.menu .button .text {
37	PointedEar	906	position: static;
		907	margin: 0 0.25em;
		908	}
		909
		910	.button.selected {
		911	background-color: #fc6 !important;
		912	color: #000 !important;
		913	}
		914
		915	.group {
		916	margin: 0 auto;
		917	position: relative;
38	PointedEar	918	width: 7.7em;
37	PointedEar	919	}
		920
		921	.group .separator {
		922	float: left;
		923	position: absolute;
38	PointedEar	924	top: 0;
		925	left: 0;
		926	width: 1.5em;
37	PointedEar	927	height: 100%;
		928	background-color: #c66;
		929	color: #000;
		930	}
		931
231	PointedEar	932	.group .separator.right
		933	{
		934	left: auto;
		935	right: 0;
		936	}
		937
37	PointedEar	938	.group .separator:after {
		939	position: absolute;
38	PointedEar	940	width: 0.8em;
		941	height: 0.5em;
		942	bottom: 0.25em;
		943	left: 0.25em;
37	PointedEar	944	background-color: #000;
		945	content: "\a0";
		946	}
		947
		948	.group ul {
38	PointedEar	949	margin-left: 1.7em;
37	PointedEar	950	}
		951
231	PointedEar	952	.group ul.left
		953	{
		954	margin-left: 0;
		955	}
		956
37	PointedEar	957	.group li {
38	PointedEar	958	margin-bottom: 0;
37	PointedEar	959	}
		960
		961	.group .button:visited,
		962	.group .button
		963	{
38	PointedEar	964	display: block;
37	PointedEar	965	position: relative;
38	PointedEar	966	width: 6em;
37	PointedEar	967	background-color: #99f !important;
		968	}
		969
38	PointedEar	970	.group li:last-child .button
		971	{
		972	margin-bottom: 0;
37	PointedEar	973	}
		974
231	PointedEar	975	.button.right,
		976	.group ul .button,
		977	.group ul.left .button.right
		978	{
		979	border-top-left-radius: 0;
38	PointedEar	980	border-top-right-radius: 1em;
		981	border-bottom-right-radius: 1em;
231	PointedEar	982	border-bottom-left-radius: 0;
37	PointedEar	983	}
		984
231	PointedEar	985	.button.right .text,
		986	.group ul .button .text,
		987	.group ul.left .button.right .text
		988	{
		989	left: auto;
38	PointedEar	990	right: 1em;
		991	}
		992
231	PointedEar	993	.group ul.left .button .text
		994	{
		995	left: 1em;
		996	right: auto;
		997	}
		998
		999	.button.left,
		1000	.group ul.left .button
		1001	{
38	PointedEar	1002	border-top-left-radius: 1em;
231	PointedEar	1003	border-top-right-radius: 0;
		1004	border-bottom-right-radius: 0;
38	PointedEar	1005	border-bottom-left-radius: 1em;
		1006	}
		1007
231	PointedEar	1008	.group .button .key,
		1009	.group ul.left .button.right .key
		1010	{
37	PointedEar	1011	display: inline-block;
		1012	position: absolute;
38	PointedEar	1013	left: 0.2em;
37	PointedEar	1014	top: 0;
231	PointedEar	1015	right: auto;
37	PointedEar	1016	bottom: 0;
38	PointedEar	1017	padding: 0 0.1em;
37	PointedEar	1018	background-color: #000;
		1019	color: #f90;
235	PointedEar	1020	font-family: "LCARS",
		1021	Haettenschweiler, "Downloadable Haettenschweiler",
		1022	"Zurich XCn BT", "Downloadable Zurich XCn BT",
		1023	impact, Verdana, Geneva, Arial, Helvetica, sans-serif;
38	PointedEar	1024	font-size: 2.4em;
231	PointedEar	1025	text-transform: uppercase !important;
38	PointedEar	1026	line-height: 0.9;
119	PointedEar	1027	}
		1028
231	PointedEar	1029	.group ul.left .button .key
		1030	{
		1031	left: auto;
		1032	right: 0.2em;
		1033	}
		1034
		1035	<?php require_once 'lcars-responsive.css'; ?>

Subversion Repositories LCARS

(root)/trunk/styles/lcars22.css @ 150 - Rev 235