WebSVN - LCARS - Diff - Rev 43 and 50 - /trunk/styles/lcars22.css


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

@import url("/styles/lcars-ani.css");

/* Basic fonts */

@font-face {
  font-family: "LCARS";
  font-style: normal;
  font-weight: normal;
  src: local("LCARS"), url(fonts/LCARS.ttf);
}

/* EOT font created with WEFT on 2002-03-23 */
@font-face {
  font-family: "Downloadable Haettenschweiler";
  font-style: normal;
  font-weight: normal;
  src: url(fonts/HAETTEN0.eot), url(fonts/HAETTENS.ttf);
}

/*
@font-face {
  font-family:Webdings;
  font-style:normal;
  font-weight:normal;
  src:url(fonts/WEBDING0.eot);
}
*/

@font-face {
  font-family: "Downloadable Zurich XCn BT";
  font-style: normal;
  font-weight: normal;
  src: url(fonts/ZurichXCn.pfr);
}

/* Basic display */

* {
  font-family: "LCARS",
    Haettenschweiler, "Downloadable Haettenschweiler",
    "Zurich XCn BT", "Downloadable Zurich XCn BT",
    impact, Verdana, Geneva, Arial, Helvetica, sans-serif;
  font-weight: normal;
}

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

  background-color: #000;
  color: #99f;
  font-size: 131%;
  overflow: auto;
}

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
body.empty {
  margin-top: 3em;
  margin-left: 0.2em;
  margin-bottom: 3em;
}

body.multi {
  /* TODO from lcars21.css, use `em' instead */
}

#content {
  /* position: relative; */
  margin-right: 1em;
}

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
a {
  text-decoration: none;
}

a:link:hover,
a:link:focus
{
  background-color:#000;
  color: #f90;
}

a:link:active {
  background-color:#000;
  color: #fff;
}

a:link {
  background-color:#000;
  color:#fc9;
}

a:visited:hover,
a:visited:focus
{
  background-color:#000;
  color:#f90;
}

a:visited:active {
  background-color:black;
  color:#fff;
}

a:hover,
a:focus,
a:active
{
  text-decoration: underline;
}

a:visited {
  background-color:black;
  color:#c9c;
}

h2 {
  background-color: #000;
  color: #fff;
  font-size: 136%;
}

p {
  margin-top: 1em;
  margin-bottom: 0;
  line-height: 1.5;
  text-align: justify;
}

li p {
  line-height: normal;
}

p:first-child {
  margin-top: 0;
}

.instruction {
  background-color: #000;
  color: #f90;
  font-size: 136%;
}

/* Language support */

[lang^="x-vulcan-latin"] {
  font-family: "URW Chancery L", "Matura MT Script Capitals",
    Haettenschweiler, Haettens, "Zurich XCn BT", impact, Verdana,
    Geneva, Arial, Helvetica, sans-serif;
}

/* 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-top-left {
  position: absolute;
  top: 2em;
  left: 0;
  right: 0;
  height: 3.2em;
  width: 9.2em;
  background-color: #999;
}

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

#bow-top-left .concave {
  position: absolute;
  top: 0;
  left: 8em;
  height: 3.2em;
  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: 5.6em;
  width: 8em;
  bottom: 2.8em;
  background-color: #999;
  overflow: auto;
}

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

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
.menu ul {
  margin: 0 0.2em 0.2em 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: 0em;
  width: 0.2em;
  height: 0.5em;
  background-color: black;
}

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

/* Controls */

.button:visited:hover,
.button:visited,
.button:hover,
.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;
}

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

.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;
}

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

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

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

.multi-display .upper .button
{
  height: 3.8em;
  background-color: #c9c !important;
}

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

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

.multi-display .upper .border
{
  position: fixed;
  top: 9em;
  left: 21.8em;
  right: 0.2em;
  height: 1em;
  background-color: #9cf;
}
 
.multi-display .lower
{
  position: absolute;
  top: 7.3em;
  left: 0;
  padding-top: 0.1em;
  background-color: black;
}

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

.multi-display .lower .elbo .concave
{
  position: absolute;
  left: 5em;
  top: 1em;
  width: 1em;
  height: 2em;
  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: fixed;
  top: 10.2em;
  left: 21.8em;
  right: 0em;
  height: 1.2em;
  background-color: black;
}

.multi-display .lower .border
{
  position: absolute;
  top: 0;
  left: 0;
  right: 0.2em;
  height: 1em;
  background-color: #fc6;
}

.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 43	Rev 50
-		1	<?php
-		2	// \header('Last-Modified: ' . gmdate('D, d M Y H:i:s', @filemtime(__FILE__)) . ' GMT');
-		3	//
-		4	// /* Cached resource expires in HTTP/1.1 caches 24h after last retrieval */
-		5	// \header('Cache-Control: max-age=86400, s-maxage=86400, must-revalidate, proxy-revalidate');
-		6	//
-		7	// /* Cached 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');
-		9
-		10	\header('Content-Type: text/css; charset=UTF-8');
-		11	?>
1	@CHARSET "UTF-8";	12	@CHARSET "UTF-8";
2		13
-		14	@import url("/styles/lcars-ani.css");
-		15
3	/* Basic fonts */	16	/* Basic fonts */
4		17
5	@font-face {	18	@font-face {
6	font-family: "LCARS";	19	font-family: "LCARS";
7	font-style: normal;	20	font-style: normal;
8	font-weight: normal;	21	font-weight: normal;
9	src: local("LCARS"), url(fonts/LCARS.ttf);	22	src: local("LCARS"), url(fonts/LCARS.ttf);
10	}	23	}
11		24
12	/* EOT font created with WEFT on 2002-03-23 */	25	/* EOT font created with WEFT on 2002-03-23 */
13	@font-face {	26	@font-face {
14	font-family: "Downloadable Haettenschweiler";	27	font-family: "Downloadable Haettenschweiler";
15	font-style: normal;	28	font-style: normal;
16	font-weight: normal;	29	font-weight: normal;
17	src: url(fonts/HAETTEN0.eot), url(fonts/HAETTENS.ttf);	30	src: url(fonts/HAETTEN0.eot), url(fonts/HAETTENS.ttf);
18	}	31	}
19		32
20	/*	33	/*
21	@font-face {	34	@font-face {
22	font-family:Webdings;	35	font-family:Webdings;
23	font-style:normal;	36	font-style:normal;
24	font-weight:normal;	37	font-weight:normal;
25	src:url(fonts/WEBDING0.eot);	38	src:url(fonts/WEBDING0.eot);
26	}	39	}
27	*/	40	*/
28		41
29	@font-face {	42	@font-face {
30	font-family: "Downloadable Zurich XCn BT";	43	font-family: "Downloadable Zurich XCn BT";
31	font-style: normal;	44	font-style: normal;
32	font-weight: normal;	45	font-weight: normal;
33	src: url(fonts/ZurichXCn.pfr);	46	src: url(fonts/ZurichXCn.pfr);
34	}	47	}
35		48
36	/* Basic display */	49	/* Basic display */
37		50
38	* {	51	* {
39	font-family: "LCARS",	52	font-family: "LCARS",
40	Haettenschweiler, "Downloadable Haettenschweiler",	53	Haettenschweiler, "Downloadable Haettenschweiler",
41	"Zurich XCn BT", "Downloadable Zurich XCn BT",	54	"Zurich XCn BT", "Downloadable Zurich XCn BT",
42	impact, Verdana, Geneva, Arial, Helvetica, sans-serif;	55	impact, Verdana, Geneva, Arial, Helvetica, sans-serif;
43	font-weight: normal;	56	font-weight: normal;
44	}	57	}
45		58
46	body {	59	body {
47	margin-top: 12em;	60	margin-top: 12em;
48	margin-left: 22em;	61	margin-left: 22em;
49	margin-right: 0.2em;	62	margin-right: 0.2em;
50	margin-bottom: 0.2em;	63	margin-bottom: 0.2em;
51		64
52	background-color: #000;	65	background-color: #000;
53	color: #99f;	66	color: #99f;
54	font-size: 131%;	67	font-size: 131%;
55	overflow: auto;	68	overflow: auto;
56	}	69	}
57		70
58	/* 0.0 to 1.0 s */	-
59	@-webkit-keyframes fade-in {	-
60	from {	-
61	opacity: 0;	-
62	}	-
63		-
64	/* at 0.25 s */	-
65	25% {	-
66	opacity: 0;	-
67	}	-
68		-
69	to {	-
70	opacity: 1;	-
71	}	-
72	}	-
73		-
74	body.fade-in {	-
75	/* TODO: Step-by-step display instead */	-
76	/-webkit-animation-name: fade-in;/	-
77	/* -webkit-animation-iteration-count: infinite; */	-
78	}	-
79		-
80	body.empty {	71	body.empty {
81	margin-top: 3em;	72	margin-top: 3em;
82	margin-left: 0.2em;	73	margin-left: 0.2em;
83	margin-bottom: 3em;	74	margin-bottom: 3em;
84	}	75	}
85		76
86	body.multi {	77	body.multi {
87	/* TODO from lcars21.css, use `em' instead */	78	/* TODO from lcars21.css, use `em' instead */
88	}	79	}
89		80
90	#content {	81	#content {
91	/* position: relative; */	82	/* position: relative; */
92	margin-right: 1em;	83	margin-right: 1em;
93	}	84	}
94		85
95	/* 0.0 to 0.6 s */	-
96	@-webkit-keyframes content {	-
97	from {	-
98	opacity: 0;	-
99	}	-
100		-
101	/* 0.6 s */	-
102	99% {	-
103	opacity: 0;	-
104	}	-
105	}	-
106		-
107	.empty.fade-in #content {	-
108	-webkit-animation-name: content;	-
109	-webkit-animation-duration: 0.6s;	-
110	-webkit-animation-timing-function: linear;	-
111	}	-
112		-
113	a {	86	a {
114	text-decoration: none;	87	text-decoration: none;
115	}	88	}
116		89
117	a:link:hover,	90	a:link:hover,
118	a:link:focus	91	a:link:focus
119	{	92	{
120	background-color:#000;	93	background-color:#000;
121	color: #f90;	94	color: #f90;
122	}	95	}
123		96
124	a:link:active {	97	a:link:active {
125	background-color:#000;	98	background-color:#000;
126	color: #fff;	99	color: #fff;
127	}	100	}
128		101
129	a:link {	102	a:link {
130	background-color:#000;	103	background-color:#000;
131	color:#fc9;	104	color:#fc9;
132	}	105	}
133		106
134	a:visited:hover,	107	a:visited:hover,
135	a:visited:focus	108	a:visited:focus
136	{	109	{
137	background-color:#000;	110	background-color:#000;
138	color:#f90;	111	color:#f90;
139	}	112	}
140		113
141	a:visited:active {	114	a:visited:active {
142	background-color:black;	115	background-color:black;
143	color:#fff;	116	color:#fff;
144	}	117	}
145		118
146	a:hover,	119	a:hover,
147	a:focus,	120	a:focus,
148	a:active	121	a:active
149	{	122	{
150	text-decoration: underline;	123	text-decoration: underline;
151	}	124	}
152		125
153	a:visited {	126	a:visited {
154	background-color:black;	127	background-color:black;
155	color:#c9c;	128	color:#c9c;
156	}	129	}
157		130
158	h2 {	131	h2 {
159	background-color: #000;	132	background-color: #000;
160	color: #fff;	133	color: #fff;
161	font-size: 136%;	134	font-size: 136%;
162	}	135	}
163		136
164	p {	137	p {
165	margin-top: 1em;	138	margin-top: 1em;
166	margin-bottom: 0;	139	margin-bottom: 0;
167	line-height: 1.5;	140	line-height: 1.5;
168	text-align: justify;	141	text-align: justify;
169	}	142	}
170		143
171	li p {	144	li p {
172	line-height: normal;	145	line-height: normal;
173	}	146	}
174		147
175	p:first-child {	148	p:first-child {
176	margin-top: 0;	149	margin-top: 0;
177	}	150	}
178		151
179	.instruction {	152	.instruction {
180	background-color: #000;	153	background-color: #000;
181	color: #f90;	154	color: #f90;
182	font-size: 136%;	155	font-size: 136%;
183	}	156	}
184		157
185	/* Language support */	158	/* Language support */
186		159
187	[lang^="x-vulcan-latin"] {	160	[lang^="x-vulcan-latin"] {
188	font-family: "URW Chancery L", "Matura MT Script Capitals",	161	font-family: "URW Chancery L", "Matura MT Script Capitals",
189	Haettenschweiler, Haettens, "Zurich XCn BT", impact, Verdana,	162	Haettenschweiler, Haettens, "Zurich XCn BT", impact, Verdana,
190	Geneva, Arial, Helvetica, sans-serif;	163	Geneva, Arial, Helvetica, sans-serif;
191	}	164	}
192		165
193	/* Bow (main) and elbo (multi-view) */	166	/* Bow (main) and elbo (multi-view) */
194		167
195	#LCARS {	168	#LCARS {
196	position: fixed;	169	position: fixed;
197	left: 0;	170	left: 0;
198	top: 0;	171	top: 0;
199	right: 0;	172	right: 0;
200	padding: 0.2em;	173	padding: 0.2em;
201	background-color: #000;	174	background-color: #000;
202	z-index: 1701;	175	z-index: 1701;
203	}	176	}
204		177
205	#bow {	178	#bow {
206	position: absolute;	179	position: absolute;
207	left: 0.2em;	180	left: 0.2em;
208	top: 0.2em;	181	top: 0.2em;
209	right: 0.2em;	182	right: 0.2em;
210	height: 2.4em;	183	height: 2.4em;
211	padding-bottom: 0.2em;	184	padding-bottom: 0.2em;
212	background-color: #000;	185	background-color: #000;
213	}	186	}
214		187
215	#bow-top {	188	#bow-top {
216	/* NOTE: position: absolute is needed for animation */	189	/* NOTE: position: absolute is needed for animation */
217	position: absolute;	190	position: absolute;
218	top: 0;	191	top: 0;
219	left: 0;	192	left: 0;
220	right: 0;	193	right: 0;
221	min-width: 15.4em;	194	min-width: 15.4em;
222	height: 2em;	195	height: 2em;
223	background-color: #999;	196	background-color: #999;
224	border-top-left-radius: 2.4em;	197	border-top-left-radius: 2.4em;
225	border-top-right-radius: 1.2em;	198	border-top-right-radius: 1.2em;
226	border-bottom-right-radius: 1.2em;	199	border-bottom-right-radius: 1.2em;
227	line-height: 0.9;	200	line-height: 0.9;
228	}	201	}
229		202
230	.empty #bow-top {	203	.empty #bow-top {
231	border-top-left-radius: 1.2em;	204	border-top-left-radius: 1.2em;
232	border-bottom-left-radius: 1.2em;	205	border-bottom-left-radius: 1.2em;
233	min-width: 10em;	206	min-width: 10em;
234	}	207	}
235		208
236	/* 0.0 to 0.5 s */	-
237	@-webkit-keyframes bow-top {	-
238	from {	-
239	left: 90%;	-
240	border-top-left-radius: 0;	-
241	border-bottom-left-radius: 0;	-
242	}	-
243	}	-
244		-
245	.fade-in #bow-top {	-
246	-webkit-animation-name: bow-top;	-
247	-webkit-animation-duration: 0.5s;	-
248	-webkit-animation-timing-function: linear;	-
249	}	-
250		209
251	#bow-top .text {	210	#bow-top .text {
252	position: absolute;	211	position: absolute;
253	margin: 0;	212	margin: 0;
254	left: 4.33em;	213	left: 4.33em;
255	top: 0;	214	top: 0;
256	right: 0.75em;	215	right: 0.75em;
257	height: 1em;	216	height: 1em;
258	text-align: right;	217	text-align: right;
259	color: #fc0;	218	color: #fc0;
260	font-size: 2.4em;	219	font-size: 2.4em;
261	padding-right: 0.1em;	220	padding-right: 0.1em;
262	overflow: hidden;	221	overflow: hidden;
263	text-overflow: ellipsis;	222	text-overflow: ellipsis;
264	}	223	}
265		224
266	.empty #bow-top .text {	225	.empty #bow-top .text {
267	left: 0.93em;	226	left: 0.93em;
268	}	227	}
269		228
270	/* 0.0 to 0.5 s */	-
271	@-webkit-keyframes bow-top-text {	-
272	from {	-
273	opacity: 0;	-
274	}	-
275		229
276	/* shortly before 1.0 s */	-
277	99% {	-
278	opacity: 0;	-
279	}	-
280	}	-
281		-
282	.fade-in #bow-top .text {	-
283	-webkit-animation-name: bow-top-text;	-
284	-webkit-animation-duration: 0.5s;	-
285	-webkit-animation-timing-function: linear;	-
286	}	-
287		230
288	#bow-top .text span {	231	#bow-top .text span {
289	padding-right: 0.1em;	232	padding-right: 0.1em;
290	background-color: #000;	233	background-color: #000;
291	padding-left: 0.1em;	234	padding-left: 0.1em;
292	text-transform: uppercase;	235	text-transform: uppercase;
293	white-space: nowrap;	236	white-space: nowrap;
294	}	237	}
295		238
296	.empty #footer-container {	239	.empty #footer-container {
297	position: fixed;	240	position: fixed;
298	left: 0.2em;	241	left: 0.2em;
299	bottom: 0;	242	bottom: 0;
300	right: 0.2em;	243	right: 0.2em;
301	min-height: 2.4em;	244	min-height: 2.4em;
302	padding-top: 0.2em;	245	padding-top: 0.2em;
303	padding-bottom: 0.2em;	246	padding-bottom: 0.2em;
304	background-color: #000;	247	background-color: #000;
305	}	248	}
306		249
307	/* 0.0 to 0.5 s */	-
308	@-webkit-keyframes footer {	-
309	from {	-
310	left: 90%;	-
311	border-top-left-radius: 0;	-
312	border-bottom-left-radius: 0;	-
313	}	-
314	}	-
315		-
316	.empty.fade-in #footer {	-
317	-webkit-animation-name: footer;	-
318	-webkit-animation-duration: 0.5s;	-
319	-webkit-animation-timing-function: linear;	-
320	}	-
321		250
322	.empty #footer {	251	.empty #footer {
323	position: absolute;	252	position: absolute;
324	bottom: 0;	253	bottom: 0;
325	left: 0;	254	left: 0;
326	right: 0;	255	right: 0;
327	height: 2em;	256	height: 2em;
328	min-width: 10em;	257	min-width: 10em;
329	margin-bottom: 0.2em;	258	margin-bottom: 0.2em;
330	background-color: #999;	259	background-color: #999;
331	border-radius: 1.2em;	260	border-radius: 1.2em;
332	line-height: 0.9;	261	line-height: 0.9;
333	}	262	}
334		263
335	.empty #footer .text {	264	.empty #footer .text {
336	position: absolute;	265	position: absolute;
337	margin: 0;	266	margin: 0;
338	left: 0.93em;	267	left: 0.93em;
339	top: 0;	268	top: 0;
340	right: 0.75em;	269	right: 0.75em;
341	height: 1em;	270	height: 1em;
342	background-color: transparent;	271	background-color: transparent;
343	color: #fc0;	272	color: #fc0;
344	font-size: 2.4em;	273	font-size: 2.4em;
345	padding-right: 0.1em;	274	padding-right: 0.1em;
346	overflow: hidden;	275	overflow: hidden;
347	text-overflow: ellipsis;	276	text-overflow: ellipsis;
348	}	277	}
349		278
350	/* 0.0 to 0.5 s */	-
351	@-webkit-keyframes footer-text {	-
352	from {	-
353	opacity: 0;	-
354	}	-
355		-
356	/* shortly before 0.5 s */	-
357	99% {	-
358	opacity: 0;	-
359	}	-
360	}	-
361		-
362	.empty.fade-in #footer .text {	-
363	-webkit-animation-name: footer-text;	-
364	-webkit-animation-duration: 0.5s;	-
365	-webkit-animation-timing-function: linear;	-
366	}	-
367		-
368	.empty #footer .text span {	279	.empty #footer .text span {
369	padding-right: 0.1em;	280	padding-right: 0.1em;
370	background-color: #000;	281	background-color: #000;
371	padding-left: 0.1em;	282	padding-left: 0.1em;
372	text-transform: uppercase;	283	text-transform: uppercase;
373	white-space: nowrap;	284	white-space: nowrap;
374	}	285	}
375		286
376	.empty .separator-left {	287	.empty .separator-left {
377	position: absolute;	288	position: absolute;
378	left: 2em;	289	left: 2em;
379	height: 2em;	290	height: 2em;
380	width: 0.25em;	291	width: 0.25em;
381	background-color: #000;	292	background-color: #000;
382	}	293	}
383		294
384	.empty .separator-right {	295	.empty .separator-right {
385	position: absolute;	296	position: absolute;
386	right: 2em;	297	right: 2em;
387	height: 2em;	298	height: 2em;
388	width: 0.25em;	299	width: 0.25em;
389	background-color: #000;	300	background-color: #000;
390	}	301	}
391		302
392	#bow-top-left {	303	#bow-top-left {
393	position: absolute;	304	position: absolute;
394	top: 2em;	305	top: 2em;
395	left: 0;	306	left: 0;
396	right: 0;	307	right: 0;
397	height: 3.2em;	308	height: 3.2em;
398	width: 9.2em;	309	width: 9.2em;
399	background-color: #999;	310	background-color: #999;
400	}	311	}
401		312
402	/* 0.0 to 0.625 s */	-
403	@-webkit-keyframes bow-top-left {	-
404	from {	-
405	height: 0;	-
406	}	-
407		-
408	/* at 0.5 s */	-
409	80% {	-
410	height: 0;	-
411	}	-
412	}	-
413		-
414	.fade-in #bow-top-left {	-
415	-webkit-animation-name: bow-top-left;	-
416	-webkit-animation-duration: 0.625s;	-
417	-webkit-animation-timing-function: linear;	-
418	}	-
419		-
420	.empty #bow-top-left {	313	.empty #bow-top-left {
421	display: none;	314	display: none;
422	}	315	}
423		316
424	#bow-top-left .concave {	317	#bow-top-left .concave {
425	position: absolute;	318	position: absolute;
426	top: 0;	319	top: 0;
427	left: 8em;	320	left: 8em;
428	height: 3.2em;	321	height: 3.2em;
429	width: 1.2em;	322	width: 1.2em;
430	background-color: #000;	323	background-color: #000;
431	border-top-left-radius: 1.2em;	324	border-top-left-radius: 1.2em;
432	}	325	}
433		326
434	.empty #bow-top-left-concave {	327	.empty #bow-top-left-concave {
435	display: none;	328	display: none;
436	}	329	}
437		330
438	#LCARS .menu-container {	331	.menu-container {
439	position: fixed;	332	position: fixed;
440	left: 0.2em;	333	left: 0.2em;
441	top: 5.6em;	334	top: 5.6em;
442	width: 8em;	335	width: 8em;
443	bottom: 2.8em;	336	bottom: 2.8em;
444	background-color: #999;	337	background-color: #999;
445	overflow: auto;	338	overflow: auto;
446	}	339	}
447		340
448	#LCARS .menu	341	.menu
449	{	342	{
450	height: 17.6em;	343	height: 17.6em;
451	background-color: #000;	344	background-color: #000;
452	}	345	}
453		346
454	/* 0.0 to 1.125 s */	-
455	@-webkit-keyframes bow-menu {	-
456	from {	-
457	opacity: 0;	-
458	}	-
459		-
460	/* at ca. 0.61875 s */	-
461	55% {	-
462	opacity: 0;	-
463	}	-
464		-
465	56% {	-
466	opacity: 1;	-
467	}	-
468	}	-
469		-
470	.fade-in #LCARS .menu	-
471	{	-
472	-webkit-animation-name: bow-menu;	-
473	-webkit-animation-duration: 1.125s;	-
474	-webkit-animation-timing-function: linear;	-
475	}	-
476		-
477	.menu ul {	347	.menu ul {
478	margin: 0 0.2em 0.2em 0;	348	margin: 0 0.2em 0.2em 0;
479	padding: 0;	349	padding: 0;
480	}	350	}
481		351
482	.menu li {	352	.menu li {
483	margin: 0;	353	margin: 0;
484	}	354	}
485		355
486	#bow #bottom	356	#bow #bottom
487	{	357	{

Subversion Repositories LCARS

(root)/trunk/styles/lcars22.css - Rev 43 → 50