WebSVN - LCARS - Diff - Rev 116 and 117 - /trunk/styles/lcars22.css


<?php
\header('Last-Modified: ' . gmdate('D, d M Y H:i:s', @filemtime(__FILE__)) . ' GMT');
 
/* Resource expires in HTTP/1.1 caches 24h after last retrieval */
\header('Cache-Control: max-age=86400, s-maxage=86400, must-revalidate, proxy-revalidate');

/* Resource expires in HTTP/1.0 caches 24h after last retrieval */
\header('Expires: ' . gmdate('D, d M Y H:i:s', time() + 86400) . ' GMT');
 
\header('Content-Type: text/css; charset=UTF-8');
?>@charset "UTF-8";

<?php
  if (!isset($_GET['ani']) || $_GET['ani'] !== '0')
  {
?>
@import url("/styles/lcars-ani.css");
<?php
  }
?>

body {
  margin-top: 12em;
  margin-left: 22em;
  margin-right: 0.2em;
  margin-bottom: 0.2em;
}

/* HTML5 elements */

nav
{
  display: block;
}

/* Bow (main) and elbo (multi-view) */

#LCARS {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  padding: 0.2em;
  background-color: #000;
  z-index: 1701;
}

#bow {
  position: absolute;
  left: 0.2em;
  top: 0.2em;
  right: 0.2em;
  height: 2.4em;
  padding-bottom: 0.2em;
  background-color: #000;
}

#bow-top {
  /* NOTE: position: absolute is needed for animation */
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  min-width: 15.4em;
  height: 2em;
  background-color: #999;
  border-top-left-radius: 2.4em;
  border-top-right-radius: 1.2em;
  border-bottom-right-radius: 1.2em;
  line-height: 0.9;
}

.empty #bow-top {
  border-top-left-radius: 1.2em;
  border-bottom-left-radius: 1.2em;
  min-width: 10em;
}


#bow-top .text {
  position: absolute;
  margin: 0;
  left: 4.33em;
  top: 0;
  right: 0.75em;
  height: 1em;
  text-align: right;
  color: #fc0;
  font-size: 2.4em;
  padding-right: 0.1em;
  overflow: hidden;
  text-overflow: ellipsis;
}

.empty #bow-top .text {
  left: 0.93em;
}



#bow-top .text span {
  padding-right: 0.1em;
  background-color: #000;
  padding-left: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
}

.empty #footer-container {
  position: fixed;
  left: 0.2em;
  bottom: 0;
  right: 0.2em;
  min-height: 2.4em;
  padding-top: 0.2em;
  padding-bottom: 0.2em;
  background-color: #000;
}


.empty #footer {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2em;
  min-width: 10em;
  margin-bottom: 0.2em;
  background-color: #999;
  border-radius: 1.2em;
  line-height: 0.9;
}

.empty #footer .text {
  position: absolute;
  margin: 0;
  left: 0.93em;
  top: 0;
  right: 0.75em;
  height: 1em;
  background-color: transparent;
  color: #fc0;
  font-size: 2.4em;
  padding-right: 0.1em;
  overflow: hidden;
  text-overflow: ellipsis;
}

.empty #footer .text span {
  padding-right: 0.1em;
  background-color: #000;
  padding-left: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
}

.empty .separator-left {
  position: absolute;
  left: 2em;
  height: 2em;
  width: 0.25em;
  background-color: #000;
}

.empty .separator-right {
  position: absolute;
  right: 2em;
  height: 2em;
  width: 0.25em;
  background-color: #000;
}

.bow {
  background-color: #999;
}

#bow-top-left {
  position: absolute;
  top: 2em;
  left: 0;
  right: 0;
  height: 4.4em;
  width: 9.2em;
  background-color: #999;
  overflow: hidden;
}

.empty #bow-top-left {
  display: none;
}

#bow-top-left .concave {
  position: absolute;
  top: 0;
  left: 8em;
  height: 4.4em;
  width: 1.2em;
  background-color: #000;
  border-top-left-radius: 1.2em;
}

.empty #bow-top-left-concave {
  display: none;
}

.menu-container {
  position: fixed;
  left: 0.2em;
  top: 6.8em;
  width: 8em;
  bottom: 2.8em;
  background-color: #999;
  overflow: auto;
  overflow-x: hidden;
  overflow-y: auto;
}

.menu
{
  height: 20em;
  background-color: #000;
}

.menu ul {
  margin: 0 0.2em 0 0;
  padding: 0;
}

.menu li {
  margin: 0;
}

#bow #bottom
{
  position: fixed;
  left: 0;
  bottom: 0;
  width: 20.8em;
  height: 2.4em;
  background-color: #000;
  z-index: 1701;
}

#bow-bottom {
  position: absolute;
  bottom: 0.2em;
  left: 0.2em;
  width: 20.6em;
  height: 2.4em;
  border-bottom-left-radius: 2.4em;
  border-bottom-right-radius: 2em;
  background-color: #999;
}

.empty #bow-bottom {
  display: none;
}

#bow-bottom .concave {
  position: absolute;
  margin-left: 0.2em;
  margin-bottom: 0.2em;
  bottom: 0.3em;
  left: 7.8em;
  height: 2.1em;
  width: 7.6em;
  border-bottom-left-radius: 1.2em;
  border-bottom-right-radius: 1em;
  background-color: #000;
}

#bow-bottom .spacer {
  position: absolute;
  left: 10.2em;
  bottom: 0;
  width: 0.2em;
  height: 0.5em;
  background-color: black;
}

.empty #bow-bottom-left-concave {
  display: none;
}

/* Controls */

.button:visited,
.button
{
  position: relative;
  display: inline-block;
  margin-right: 0.2em;
  margin-bottom: 0.2em;
  width: 5em;
  height: 2em;
  background-color: #7d7d7d; /* c9c */
  color: #000 !important;
  text-decoration: none !important;
  text-transform: uppercase;
  overflow: hidden;
  cursor: pointer !important;
}

.button .text {
  position: absolute;
  bottom: 0;
  right: 0.5em;
  cursor: pointer !important;
}

.button.command {
  border-radius: 1.2em;
}

.button.command .text {
  position: absolute;
  bottom: 0;
  right: 1em;
}

.button:hover,
.button:focus,
.button.selected:hover,
.button.selected:focus,
.group .button:hover,
.group .button:focus,
.group .button:visited:hover,
.group .button:visited:focus
{
  background-color: #f90 !important;
  color: #000 !important;
}

.button:active,
.button.selected:active,
.group .button:active,
.group .button:visited:active
{
  background-color: #fff !important;
  color: #000 !important;
}

.menu .button {
  display: block;
  width: 8em;
  height: 1em;
  line-height: 1;
  background-color: #9cf;
  color: #000 !important;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#connectors {
  position: fixed;
  left: 8.4em;
  top: 5.6em;
}

.multi-display
{
  position: fixed;
  top: 2.6em;
  left: 15.8em;
  right: 0;
}

.multi-display .button
{
  width: 5em !important;
}

.multi-display .upper
{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;  
  height: 7.5em;  
  padding-right: 0.2em;
  background-color: black;
}

.multi-display .upper .content
{
  position: absolute;
  top: 0;
  left: 6em;
  bottom: 1.3em;
  right: 0.2em;
  background-color: black;
  color: white;
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
}

.multi-display .upper .content .title
{
  position: absolute;
  top: 0;
  left: 0;
  height: 1em;
  right: 0;
  background-color: black;
  color: white;
  font-size: 2.4em;
  text-transform: uppercase;
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
}

.multi-display .upper .content .title span
{
  white-space: nowrap;
}

.multi-display .upper .content .analysis {
  position: absolute;
  top: 2.4em;
  bottom: 0;
  right: 11em;
  left: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: left;
}

.multi-display .upper .content .commands
{
  position: absolute;
  margin: 0;
  padding: 0;
  top: 2.4em;
  right: 0;
  height: 3.8em;
  width: 10.2em;
  list-style: none;
}

.multi-display .upper .content .commands li
{
  position: absolute;
  margin: 0;
  width: 5em;
  height: 1.8em;
}

.multi-display .upper .content .commands .button
{
  position: absolute;
  top: 0;
  left: 0;
  margin: 0;
  height: 1.8em;
  border-radius: 0.9em;
  text-transform: none;
}

.multi-display .upper .content .commands .button .text {
  right: 1em;
}

.multi-display .upper .content #cmd1
{
  top: 0;
  right: 5.2em;
}

.multi-display .upper .content #cmd2
{
  top: 0;
  right: 0;
}

.multi-display .upper .content #cmd3
{
  top: 2em;
  right: 0;
}

.multi-display .upper .content #cmd4
{
  top: 2em;
  right: 5.2em;
}

.multi-display .upper .elbo-button
{
  position: absolute;
  top: 0;
  left: 0;
  width: 5em;
  height: 4em;
  background-color: #c9c !important;
  color: #000 !important;
  cursor: default;
}

.multi-display .upper .elbo-button .text
{
  position: absolute;
  bottom: 0;
  right: 0.2em;
  max-width: 4em;
  max-height: 3.6em;
  text-align: right;
  overflow: hidden;
}

.multi-display .upper .elbo
{
  position: absolute;
  left: 0;
  top: 4.2em;
  width: 6em;
  height: 3.2em;
  border-bottom-left-radius: 2em;
  background-color: #9cf;
  color: #000;
}

.multi-display .upper .elbo .text
{
  position: absolute;
  top: 0;
  right: 1.2em;
  max-width: 4em;
  max-height: 2.2em;
  text-align: right;
  overflow: hidden;
  cursor: default;
}

.elbo [title],
.button [title]
{
  border-bottom: none;
}

.multi-display .upper .elbo .concave
{
  position: absolute;
  left: 5em;
  top: 0;
  width: 1.1em;
  height: 2.2em;
  border-bottom-left-radius: 1em;
  background-color: black;
}

.multi-display .border
{
  height: 1em;
}

.multi-display .upper .border
{
  position: absolute;
  top: 6.4em;
  left: 6em;
  right: 0.2em;
}

.multi-display .border div
{
  position: absolute;
  top: 0;
  height: 1em;
}

.multi-display .upper .border div
{
  background-color: #9cf;
}

.multi-display .upper .border .left
{
  left: 0;
  right: 5.2em;
  height: 1em;
}
 
.multi-display .upper .border .right
{
  width: 5em;
  right: 0;
}
 
.multi-display .lower
{
  position: absolute;
  top: 7.5em;
  left: 0;
  height: 0.1em;
  right: 0;
  background-color: black;
}

.multi-display .lower .elbo
{
  position: absolute;
  top: 0.1em;
  left: 0;
  width: 6em;
  height: 3em;
  border-top-left-radius: 2em;
  background-color: #fc6;
}

.multi-display .lower .elbo .concave
{
  position: absolute;
  left: 5em;
  top: 1em;
  width: 1.1em;
  height: 2.1em;
  background-color: black;
  border-top-left-radius: 1em;
}

.multi-display .lower .bg
{
  position: fixed;
  top: 13.4em;
  bottom: 2.8em;
  width: 5em;
  background-color: #fc6;
}

.multi-display .lower .border-container
{
  position: absolute;
  top: 0.1em;
  left: 6em;
  right: 0;
  height: 1.2em;
  background-color: black;
}

.multi-display .lower .border
{
  position: absolute;
  left: 0;
  right: 0.2em;
}

.multi-display .lower .border div
{
  background-color: #fc6;
}

.multi-display .lower .border .left
{
  left: 0;
  right: 5.2em;
}

.multi-display .lower .border .right
{
  width: 5em;
  right: 0;
}

.menu .button.secondary,
.multi-display .lower .elbo.secondary,
.multi-display .lower .bg.secondary,
.multi-display .lower .border.secondary
{
  background-color: #f96;
}

.menu .button.ancillary,
.multi-display .lower .elbo.ancillary,
.multi-display .lower .bg.ancillary,
.multi-display .lower .border.ancillary
{
  background-color: #c9c;
}

.menu .button.database,
.multi-display .lower .elbo.database,
.multi-display .lower .bg.database,
.multi-display .lower .border.database
{
  background-color: #c66;
}

.menu .button .text {
  position: static;
  margin: 0 0.25em;
}

.button.selected {
  background-color: #fc6 !important;
  color: #000 !important;  
}

.group {
  margin: 0 auto;
  position: relative;
  width: 7.7em;
}

.group .separator {
  float: left;
  position: absolute;
  top: 0;
  left: 0;
  width: 1.5em;
  height: 100%;
  background-color: #c66;
  color: #000;
}

.group .separator:after {
  position: absolute;
  width: 0.8em;
  height: 0.5em;
  bottom: 0.25em;
  left: 0.25em;
  background-color: #000;
  content: "\a0";
}

.group ul {
  margin-left: 1.7em;
}

.group li {
  margin-bottom: 0;
}

.group .button:visited,
.group .button
{
  display: block;
  position: relative;
  width: 6em;
  background-color: #99f !important;
}

.group li:last-child .button
{
  margin-bottom: 0;
}

.button.right {
  border-top-right-radius: 1em;
  border-bottom-right-radius: 1em;
}

.button.right .text {
  right: 1em;
}

.button.left {
  border-top-left-radius: 1em;
  border-bottom-left-radius: 1em;
}

.group .button .key {
  display: inline-block;
  position: absolute;
  left: 0.2em;
  top: 0;
  bottom: 0;
  padding: 0 0.1em;
  background-color: #000;
  color: #f90;
  font-size: 2.4em;
  text-transform: uppercase;
  line-height: 0.9;
}

Rev 116	Rev 117
1	<?php	1	<?php
2	\header('Last-Modified: ' . gmdate('D, d M Y H:i:s', @filemtime(__FILE__)) . ' GMT');	2	\header('Last-Modified: ' . gmdate('D, d M Y H:i:s', @filemtime(__FILE__)) . ' GMT');
3		3
4	/* Resource expires in HTTP/1.1 caches 24h after last retrieval */	4	/* Resource expires in HTTP/1.1 caches 24h after last retrieval */
5	\header('Cache-Control: max-age=0, s-maxage=86400, must-revalidate, proxy-revalidate');	5	\header('Cache-Control: max-age=86400, s-maxage=86400, must-revalidate, proxy-revalidate');
6		6
7	/* Resource expires in HTTP/1.0 caches 24h after last retrieval */	7	/* Resource expires in HTTP/1.0 caches 24h after last retrieval */
8	\header('Expires: ' . gmdate('D, d M Y H:i:s', time() + 86400) . ' GMT');	8	\header('Expires: ' . gmdate('D, d M Y H:i:s', time() + 86400) . ' GMT');
9		9
10	\header('Content-Type: text/css; charset=UTF-8');	10	\header('Content-Type: text/css; charset=UTF-8');
11	?>@charset "UTF-8";	11	?>@charset "UTF-8";
12		12
13	<?php	13	<?php
14	if (!isset($_GET['ani']) \|\| $_GET['ani'] !== '0')	14	if (!isset($_GET['ani']) \|\| $_GET['ani'] !== '0')
15	{	15	{
16	?>	16	?>
17	@import url("/styles/lcars-ani.css");	17	@import url("/styles/lcars-ani.css");
18	<?php	18	<?php
19	}	19	}
20	?>	20	?>
21		21
22	body {	22	body {
23	margin-top: 12em;	23	margin-top: 12em;
24	margin-left: 22em;	24	margin-left: 22em;
25	margin-right: 0.2em;	25	margin-right: 0.2em;
26	margin-bottom: 0.2em;	26	margin-bottom: 0.2em;
27	}	27	}
28		28
29	/* HTML5 elements */	29	/* HTML5 elements */
30		30
31	nav	31	nav
32	{	32	{
33	display: block;	33	display: block;
34	}	34	}
35		35
36	/* Bow (main) and elbo (multi-view) */	36	/* Bow (main) and elbo (multi-view) */
37		37
38	#LCARS {	38	#LCARS {
39	position: fixed;	39	position: fixed;
40	left: 0;	40	left: 0;
41	top: 0;	41	top: 0;
42	right: 0;	42	right: 0;
43	padding: 0.2em;	43	padding: 0.2em;
44	background-color: #000;	44	background-color: #000;
45	z-index: 1701;	45	z-index: 1701;
46	}	46	}
47		47
48	#bow {	48	#bow {
49	position: absolute;	49	position: absolute;
50	left: 0.2em;	50	left: 0.2em;
51	top: 0.2em;	51	top: 0.2em;
52	right: 0.2em;	52	right: 0.2em;
53	height: 2.4em;	53	height: 2.4em;
54	padding-bottom: 0.2em;	54	padding-bottom: 0.2em;
55	background-color: #000;	55	background-color: #000;
56	}	56	}
57		57
58	#bow-top {	58	#bow-top {
59	/* NOTE: position: absolute is needed for animation */	59	/* NOTE: position: absolute is needed for animation */
60	position: absolute;	60	position: absolute;
61	top: 0;	61	top: 0;
62	left: 0;	62	left: 0;
63	right: 0;	63	right: 0;
64	min-width: 15.4em;	64	min-width: 15.4em;
65	height: 2em;	65	height: 2em;
66	background-color: #999;	66	background-color: #999;
67	border-top-left-radius: 2.4em;	67	border-top-left-radius: 2.4em;
68	border-top-right-radius: 1.2em;	68	border-top-right-radius: 1.2em;
69	border-bottom-right-radius: 1.2em;	69	border-bottom-right-radius: 1.2em;
70	line-height: 0.9;	70	line-height: 0.9;
71	}	71	}
72		72
73	.empty #bow-top {	73	.empty #bow-top {
74	border-top-left-radius: 1.2em;	74	border-top-left-radius: 1.2em;
75	border-bottom-left-radius: 1.2em;	75	border-bottom-left-radius: 1.2em;
76	min-width: 10em;	76	min-width: 10em;
77	}	77	}
78		78
79		79
80	#bow-top .text {	80	#bow-top .text {
81	position: absolute;	81	position: absolute;
82	margin: 0;	82	margin: 0;
83	left: 4.33em;	83	left: 4.33em;
84	top: 0;	84	top: 0;
85	right: 0.75em;	85	right: 0.75em;
86	height: 1em;	86	height: 1em;
87	text-align: right;	87	text-align: right;
88	color: #fc0;	88	color: #fc0;
89	font-size: 2.4em;	89	font-size: 2.4em;
90	padding-right: 0.1em;	90	padding-right: 0.1em;
91	overflow: hidden;	91	overflow: hidden;
92	text-overflow: ellipsis;	92	text-overflow: ellipsis;
93	}	93	}
94		94
95	.empty #bow-top .text {	95	.empty #bow-top .text {
96	left: 0.93em;	96	left: 0.93em;
97	}	97	}
98		98
99		99
100		100
101	#bow-top .text span {	101	#bow-top .text span {
102	padding-right: 0.1em;	102	padding-right: 0.1em;
103	background-color: #000;	103	background-color: #000;
104	padding-left: 0.1em;	104	padding-left: 0.1em;
105	text-transform: uppercase;	105	text-transform: uppercase;
106	white-space: nowrap;	106	white-space: nowrap;
107	}	107	}
108		108
109	.empty #footer-container {	109	.empty #footer-container {
110	position: fixed;	110	position: fixed;
111	left: 0.2em;	111	left: 0.2em;
112	bottom: 0;	112	bottom: 0;
113	right: 0.2em;	113	right: 0.2em;
114	min-height: 2.4em;	114	min-height: 2.4em;
115	padding-top: 0.2em;	115	padding-top: 0.2em;
116	padding-bottom: 0.2em;	116	padding-bottom: 0.2em;
117	background-color: #000;	117	background-color: #000;
118	}	118	}
119		119
120		120
121	.empty #footer {	121	.empty #footer {
122	position: absolute;	122	position: absolute;
123	bottom: 0;	123	bottom: 0;
124	left: 0;	124	left: 0;
125	right: 0;	125	right: 0;
126	height: 2em;	126	height: 2em;
127	min-width: 10em;	127	min-width: 10em;
128	margin-bottom: 0.2em;	128	margin-bottom: 0.2em;
129	background-color: #999;	129	background-color: #999;
130	border-radius: 1.2em;	130	border-radius: 1.2em;
131	line-height: 0.9;	131	line-height: 0.9;
132	}	132	}
133		133
134	.empty #footer .text {	134	.empty #footer .text {
135	position: absolute;	135	position: absolute;
136	margin: 0;	136	margin: 0;
137	left: 0.93em;	137	left: 0.93em;
138	top: 0;	138	top: 0;
139	right: 0.75em;	139	right: 0.75em;
140	height: 1em;	140	height: 1em;
141	background-color: transparent;	141	background-color: transparent;
142	color: #fc0;	142	color: #fc0;
143	font-size: 2.4em;	143	font-size: 2.4em;
144	padding-right: 0.1em;	144	padding-right: 0.1em;
145	overflow: hidden;	145	overflow: hidden;
146	text-overflow: ellipsis;	146	text-overflow: ellipsis;
147	}	147	}
148		148
149	.empty #footer .text span {	149	.empty #footer .text span {
150	padding-right: 0.1em;	150	padding-right: 0.1em;
151	background-color: #000;	151	background-color: #000;
152	padding-left: 0.1em;	152	padding-left: 0.1em;
153	text-transform: uppercase;	153	text-transform: uppercase;
154	white-space: nowrap;	154	white-space: nowrap;
155	}	155	}
156		156
157	.empty .separator-left {	157	.empty .separator-left {
158	position: absolute;	158	position: absolute;
159	left: 2em;	159	left: 2em;
160	height: 2em;	160	height: 2em;
161	width: 0.25em;	161	width: 0.25em;
162	background-color: #000;	162	background-color: #000;
163	}	163	}
164		164
165	.empty .separator-right {	165	.empty .separator-right {
166	position: absolute;	166	position: absolute;
167	right: 2em;	167	right: 2em;
168	height: 2em;	168	height: 2em;
169	width: 0.25em;	169	width: 0.25em;
170	background-color: #000;	170	background-color: #000;
171	}	171	}
172		172
173	.bow {	173	.bow {
174	background-color: #999;	174	background-color: #999;
175	}	175	}
176		176
177	#bow-top-left {	177	#bow-top-left {
178	position: absolute;	178	position: absolute;
179	top: 2em;	179	top: 2em;
180	left: 0;	180	left: 0;
181	right: 0;	181	right: 0;
182	height: 4.4em;	182	height: 4.4em;
183	width: 9.2em;	183	width: 9.2em;
184	background-color: #999;	184	background-color: #999;
185	overflow: hidden;	185	overflow: hidden;
186	}	186	}
187		187
188	.empty #bow-top-left {	188	.empty #bow-top-left {
189	display: none;	189	display: none;
190	}	190	}
191		191
192	#bow-top-left .concave {	192	#bow-top-left .concave {
193	position: absolute;	193	position: absolute;
194	top: 0;	194	top: 0;
195	left: 8em;	195	left: 8em;
196	height: 4.4em;	196	height: 4.4em;
197	width: 1.2em;	197	width: 1.2em;
198	background-color: #000;	198	background-color: #000;
199	border-top-left-radius: 1.2em;	199	border-top-left-radius: 1.2em;
200	}	200	}
201		201
202	.empty #bow-top-left-concave {	202	.empty #bow-top-left-concave {
203	display: none;	203	display: none;
204	}	204	}
205		205
206	.menu-container {	206	.menu-container {
207	position: fixed;	207	position: fixed;
208	left: 0.2em;	208	left: 0.2em;
209	top: 6.8em;	209	top: 6.8em;
210	width: 8em;	210	width: 8em;
211	bottom: 2.8em;	211	bottom: 2.8em;
212	background-color: #999;	212	background-color: #999;
213	overflow: auto;	213	overflow: auto;
214	overflow-x: hidden;	214	overflow-x: hidden;
215	overflow-y: auto;	215	overflow-y: auto;
216	}	216	}
217		217
218	.menu	218	.menu
219	{	219	{
220	height: 20em;	220	height: 20em;
221	background-color: #000;	221	background-color: #000;
222	}	222	}
223		223
224	.menu ul {	224	.menu ul {
225	margin: 0 0.2em 0 0;	225	margin: 0 0.2em 0 0;
226	padding: 0;	226	padding: 0;
227	}	227	}
228		228
229	.menu li {	229	.menu li {
230	margin: 0;	230	margin: 0;
231	}	231	}
232		232
233	#bow #bottom	233	#bow #bottom
234	{	234	{
235	position: fixed;	235	position: fixed;
236	left: 0;	236	left: 0;
237	bottom: 0;	237	bottom: 0;
238	width: 20.8em;	238	width: 20.8em;
239	height: 2.4em;	239	height: 2.4em;
240	background-color: #000;	240	background-color: #000;
241	z-index: 1701;	241	z-index: 1701;
242	}	242	}
243		243
244	#bow-bottom {	244	#bow-bottom {
245	position: absolute;	245	position: absolute;
246	bottom: 0.2em;	246	bottom: 0.2em;
247	left: 0.2em;	247	left: 0.2em;
248	width: 20.6em;	248	width: 20.6em;
249	height: 2.4em;	249	height: 2.4em;
250	border-bottom-left-radius: 2.4em;	250	border-bottom-left-radius: 2.4em;
251	border-bottom-right-radius: 2em;	251	border-bottom-right-radius: 2em;
252	background-color: #999;	252	background-color: #999;
253	}	253	}
254		254
255	.empty #bow-bottom {	255	.empty #bow-bottom {
256	display: none;	256	display: none;
257	}	257	}
258		258
259	#bow-bottom .concave {	259	#bow-bottom .concave {
260	position: absolute;	260	position: absolute;
261	margin-left: 0.2em;	261	margin-left: 0.2em;
262	margin-bottom: 0.2em;	262	margin-bottom: 0.2em;
263	bottom: 0.3em;	263	bottom: 0.3em;
264	left: 7.8em;	264	left: 7.8em;
265	height: 2.1em;	265	height: 2.1em;
266	width: 7.6em;	266	width: 7.6em;
267	border-bottom-left-radius: 1.2em;	267	border-bottom-left-radius: 1.2em;
268	border-bottom-right-radius: 1em;	268	border-bottom-right-radius: 1em;
269	background-color: #000;	269	background-color: #000;
270	}	270	}
271		271
272	#bow-bottom .spacer {	272	#bow-bottom .spacer {
273	position: absolute;	273	position: absolute;
274	left: 10.2em;	274	left: 10.2em;
275	bottom: 0;	275	bottom: 0;
276	width: 0.2em;	276	width: 0.2em;
277	height: 0.5em;	277	height: 0.5em;
278	background-color: black;	278	background-color: black;
279	}	279	}
280		280
281	.empty #bow-bottom-left-concave {	281	.empty #bow-bottom-left-concave {
282	display: none;	282	display: none;
283	}	283	}
284		284
285	/* Controls */	285	/* Controls */
286		286
287	.button:visited,	287	.button:visited,
288	.button	288	.button
289	{	289	{
290	position: relative;	290	position: relative;
291	display: inline-block;	291	display: inline-block;
292	margin-right: 0.2em;	292	margin-right: 0.2em;
293	margin-bottom: 0.2em;	293	margin-bottom: 0.2em;
294	width: 5em;	294	width: 5em;
295	height: 2em;	295	height: 2em;
296	background-color: #7d7d7d; /* c9c */	296	background-color: #7d7d7d; /* c9c */
297	color: #000 !important;	297	color: #000 !important;
298	text-decoration: none !important;	298	text-decoration: none !important;
299	text-transform: uppercase;	299	text-transform: uppercase;
300	overflow: hidden;	300	overflow: hidden;
301	cursor: pointer !important;	301	cursor: pointer !important;
302	}	302	}
303		303
304	.button .text {	304	.button .text {
305	position: absolute;	305	position: absolute;
306	bottom: 0;	306	bottom: 0;
307	right: 0.5em;	307	right: 0.5em;
308	cursor: pointer !important;	308	cursor: pointer !important;
309	}	309	}
310		310
311	.button.command {	311	.button.command {
312	border-radius: 1.2em;	312	border-radius: 1.2em;
313	}	313	}
314		314
315	.button.command .text {	315	.button.command .text {
316	position: absolute;	316	position: absolute;
317	bottom: 0;	317	bottom: 0;
318	right: 1em;	318	right: 1em;
319	}	319	}
320		320
321	.button:hover,	321	.button:hover,
322	.button:focus,	322	.button:focus,
323	.button.selected:hover,	323	.button.selected:hover,
324	.button.selected:focus,	324	.button.selected:focus,
325	.group .button:hover,	325	.group .button:hover,
326	.group .button:focus,	326	.group .button:focus,
327	.group .button:visited:hover,	327	.group .button:visited:hover,
328	.group .button:visited:focus	328	.group .button:visited:focus
329	{	329	{
330	background-color: #f90 !important;	330	background-color: #f90 !important;
331	color: #000 !important;	331	color: #000 !important;
332	}	332	}
333		333
334	.button:active,	334	.button:active,
335	.button.selected:active,	335	.button.selected:active,
336	.group .button:active,	336	.group .button:active,
337	.group .button:visited:active	337	.group .button:visited:active
338	{	338	{
339	background-color: #fff !important;	339	background-color: #fff !important;
340	color: #000 !important;	340	color: #000 !important;
341	}	341	}
342		342
343	.menu .button {	343	.menu .button {
344	display: block;	344	display: block;
345	width: 8em;	345	width: 8em;
346	height: 1em;	346	height: 1em;
347	line-height: 1;	347	line-height: 1;
348	background-color: #9cf;	348	background-color: #9cf;
349	color: #000 !important;	349	color: #000 !important;
350	text-overflow: ellipsis;	350	text-overflow: ellipsis;
351	white-space: nowrap;	351	white-space: nowrap;
352	}	352	}
353		353
354	#connectors {	354	#connectors {
355	position: fixed;	355	position: fixed;
356	left: 8.4em;	356	left: 8.4em;
357	top: 5.6em;	357	top: 5.6em;
358	}	358	}
359		359
360	.multi-display	360	.multi-display
361	{	361	{
362	position: fixed;	362	position: fixed;
363	top: 2.6em;	363	top: 2.6em;
364	left: 15.8em;	364	left: 15.8em;
365	right: 0;	365	right: 0;
366	}	366	}
367		367
368	.multi-display .button	368	.multi-display .button
369	{	369	{
370	width: 5em !important;	370	width: 5em !important;
371	}	371	}
372		372
373	.multi-display .upper	373	.multi-display .upper
374	{	374	{
375	position: absolute;	375	position: absolute;
376	top: 0;	376	top: 0;
377	left: 0;	377	left: 0;
378	right: 0;	378	right: 0;
379	height: 7.5em;	379	height: 7.5em;
380	padding-right: 0.2em;	380	padding-right: 0.2em;
381	background-color: black;	381	background-color: black;
382	}	382	}
383		383
384	.multi-display .upper .content	384	.multi-display .upper .content
385	{	385	{
386	position: absolute;	386	position: absolute;
387	top: 0;	387	top: 0;
388	left: 6em;	388	left: 6em;
389	bottom: 1.3em;	389	bottom: 1.3em;
390	right: 0.2em;	390	right: 0.2em;
391	background-color: black;	391	background-color: black;
392	color: white;	392	color: white;
393	text-align: right;	393	text-align: right;
394	overflow: hidden;	394	overflow: hidden;
395	text-overflow: ellipsis;	395	text-overflow: ellipsis;
396	}	396	}
397		397
398	.multi-display .upper .content .title	398	.multi-display .upper .content .title
399	{	399	{
400	position: absolute;	400	position: absolute;
401	top: 0;	401	top: 0;
402	left: 0;	402	left: 0;
403	height: 1em;	403	height: 1em;
404	right: 0;	404	right: 0;
405	background-color: black;	405	background-color: black;
406	color: white;	406	color: white;
407	font-size: 2.4em;	407	font-size: 2.4em;
408	text-transform: uppercase;	408	text-transform: uppercase;
409	text-align: right;	409	text-align: right;
410	overflow: hidden;	410	overflow: hidden;
411	text-overflow: ellipsis;	411	text-overflow: ellipsis;
412	}	412	}
413		413
414	.multi-display .upper .content .title span	414	.multi-display .upper .content .title span
415	{	415	{
416	white-space: nowrap;	416	white-space: nowrap;
417	}	417	}
418		418
419	.multi-display .upper .content .analysis {	419	.multi-display .upper .content .analysis {
420	position: absolute;	420	position: absolute;
421	top: 2.4em;	421	top: 2.4em;
422	bottom: 0;	422	bottom: 0;
423	right: 11em;	423	right: 11em;
424	left: 0;	424	left: 0;
425	overflow: hidden;	425	overflow: hidden;
426	text-overflow: ellipsis;	426	text-overflow: ellipsis;
427	text-align: left;	427	text-align: left;
428	}	428	}
429		429
430	.multi-display .upper .content .commands	430	.multi-display .upper .content .commands
431	{	431	{
432	position: absolute;	432	position: absolute;
433	margin: 0;	433	margin: 0;
434	padding: 0;	434	padding: 0;
435	top: 2.4em;	435	top: 2.4em;
436	right: 0;	436	right: 0;
437	height: 3.8em;	437	height: 3.8em;
438	width: 10.2em;	438	width: 10.2em;
439	list-style: none;	439	list-style: none;
440	}	440	}
441		441
442	.multi-display .upper .content .commands li	442	.multi-display .upper .content .commands li
443	{	443	{
444	position: absolute;	444	position: absolute;
445	margin: 0;	445	margin: 0;
446	width: 5em;	446	width: 5em;
447	height: 1.8em;	447	height: 1.8em;
448	}	448	}
449		449
450	.multi-display .upper .content .commands .button	450	.multi-display .upper .content .commands .button
451	{	451	{
452	position: absolute;	452	position: absolute;
453	top: 0;	453	top: 0;
454	left: 0;	454	left: 0;
455	margin: 0;	455	margin: 0;
456	height: 1.8em;	456	height: 1.8em;
457	border-radius: 0.9em;	457	border-radius: 0.9em;
458	text-transform: none;	458	text-transform: none;
459	}	459	}
460		460
461	.multi-display .upper .content .commands .button .text {	461	.multi-display .upper .content .commands .button .text {
462	right: 1em;	462	right: 1em;
463	}	463	}
464		464
465	.multi-display .upper .content #cmd1	465	.multi-display .upper .content #cmd1
466	{	466	{
467	top: 0;	467	top: 0;
468	right: 5.2em;	468	right: 5.2em;
469	}	469	}
470		470
471	.multi-display .upper .content #cmd2	471	.multi-display .upper .content #cmd2
472	{	472	{
473	top: 0;	473	top: 0;
474	right: 0;	474	right: 0;
475	}	475	}
476		476
477	.multi-display .upper .content #cmd3	477	.multi-display .upper .content #cmd3
478	{	478	{
479	top: 2em;	479	top: 2em;
480	right: 0;	480	right: 0;
481	}	481	}
482		482
483	.multi-display .upper .content #cmd4	483	.multi-display .upper .content #cmd4
484	{	484	{
485	top: 2em;	485	top: 2em;
486	right: 5.2em;	486	right: 5.2em;
487	}	487	}
488		488
489	.multi-display .upper .elbo-button	489	.multi-display .upper .elbo-button
490	{	490	{
491	position: absolute;	491	position: absolute;
492	top: 0;	492	top: 0;
493	left: 0;	493	left: 0;
494	width: 5em;	494	width: 5em;
495	height: 4em;	495	height: 4em;
496	background-color: #c9c !important;	496	background-color: #c9c !important;
497	color: #000 !important;	497	color: #000 !important;
498	cursor: default;	498	cursor: default;
499	}	499	}
500		500

Subversion Repositories LCARS

(root)/trunk/styles/lcars22.css - Rev 116 → 117