WebSVN - LCARS - Diff - Rev 36 and 73 - /trunk/styles/lcars21.css


<?php \header('Content-Type: text/css; charset=UTF-8'); ?>
/*
 * <title>CSS for PointedEars' LCARS, version 2.1, stardate 201012.30</title>
 */

/* 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 {
  position: absolute;
  left: 204px;
  top: 216px;
  right: 0px;
  bottom: 0;
 
  /* IE 5.5+ scrollbar colors */
/* from Mozilla LCARS Theme (2D style) */
  scrollbar-3dlight-color:#000;
  scrollbar-arrow-color:#000;
  scrollbar-base-color:#000;
  scrollbar-darkshadow-color:#000;
  scrollbar-face-color:#99f;
  scrollbar-highlight-color:#99f;
  scrollbar-track-color:#000;
  scrollbar-shadow-color:#99f;

  background-color: #000;
  color: #99f;
  font-size: 131%; /* 134% */
}

h1, h2 {
  margin-top: 0;
  font-size: 120%;
  font-weight: normal;
}

#LCARS {
/*   position: relative; */
  position: fixed;
  left: 4px;
  top: 0;
  right: 4px;
}

.button {
  width: 100px;
  min-height: 40px;
  background-color: #c9c;
  color: #000;
  text-decoration: none;
  overflow: hidden;
}

#upper {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  height: 180px;
 
  /* Prevents body text above */
  /* padding-top: 4px; */
  background-color: #c00;  
  color: #fff;  
}

.elbo {
  position: relative;
  width: 100px;
  height: 62px;
  text-align: right;
}

.elbo-button {
  position: relative;
  margin-top: 4px;
  height: 40px;
  overflow: hidden;
}

.elbo span {
  position: relative;
  right: 4px;
}

@-webkit-keyframes swish-down-up {
  0% {
    height: 0;
    top: 84px;
  }

  100% {
  }
}

#upper .elbo-button {
  position: absolute;
  min-height: 0;
  height: 84px;
 
  /* -webkit-animation-name: swish-down-up; */
  /* -webkit-animation-iteration-count: 1; */
  -webkit-animation-delay: 1s;
  -webkit-animation-duration: 1s;
}

#upper .elbo-button span {
  position: absolute;
  right: 4px;
  bottom: 4px;
}

#upper-elbo {
  position: absolute;
  top: 92px;
}

#upper-elbo .elbo {
  height: 62px;
  background-color: #9cf;
  color: #000;
}

@-webkit-keyframes swish-right-left {
  0% {
    width: 0px;
    /* height: 0px; */
    left: 100px;
    /* top: 62px; */
  }

  100% {
  }
}

#upper-elbo .elbo.left {
  -moz-border-radius: 0 0 0 32px;
  -webkit-border-radius: 0 0 0 32px;
  border-radius: 0 0 0 32px;
  /* -webkit-animation-name: swish-right-left; */
  -webkit-animation-duration: 1s;
}

#upper-elbo .elbo.left span {
  top: 4px;
}

#upper-elbo .elbo.right {
  position: absolute;
  left: 100px;
  top: 0;
  width: 78px;
  right: 0;
}

#upper-elbo .elbo.right .black {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 44px;
  background-color: #000;
  -moz-border-radius: 0 0 0 16px;
  -webkit-border-radius: 0 0 0 16px;
  border-radius: 0 0 0 16px;
}

#upper-elbo .elbo.right .terminator {
  position: absolute;
  left: 82px;
  top: 44px;
  width: 18px;
  height: 18px;
  background-color: #f90;  
}

#lower {
  position: absolute;
  top: 158px;
}

#lower-elbo {
  position: absolute;
}

#lower-elbo .elbo {
  background-color: #c66;
  color: #000;
}

#lower-elbo .elbo.left {
  -moz-border-radius: 32px 0 0 0;
  -webkit-border-radius: 32px 0 0 0;
  border-radius: 32px 0 0 0;
}

#lower-elbo .elbo.left span {
  position: absolute;
  bottom: 4px;
}

#lower-elbo h2.elbo.left  {
  margin-bottom: 0;
}

#lower-elbo .elbo.right {
  position: absolute;
  left: 100px;
  top: 0;
  width: 100px;
}

#lower-elbo .elbo.right .black {
  position: absolute;
  left: 0px;
  top: 18px;
  width: 100%;
  height: 45px;
  background-color: #000;
  -webkit-border-radius: 16px 0 0 0;
  border-radius: 16px 0 0 0;
}

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

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

#content {
  /* position: relative; */
}

#content a {
  text-decoration: none;
}

#content #heading1 {
  position: fixed;
  left: 204px;
  top: 180px;
  right: 4px;
  height: 42px;
  background-color: rgba(255, 0, 0, 0.5);
  color: white;
  text-align: right;
}

#content #heading1 h1 {
  position: absolute;
  bottom: 6px;
  right: 0;
  margin-bottom: 0;
  padding-right: 4px;
}

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

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

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

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

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

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

Rev 36	Rev 73
-		1	<?php \header('Content-Type: text/css; charset=UTF-8'); ?>
1	/*	2	/*
2	* <title>CSS for PointedEars' LCARS, version 2.1, stardate 201012.30</title>	3	* <title>CSS for PointedEars' LCARS, version 2.1, stardate 201012.30</title>
3	*/	4	*/
4		5
5	/* basic fonts */	6	/* basic fonts */
6		7
7	@font-face {	8	@font-face {
8	font-family: "LCARS";	9	font-family: "LCARS";
9	font-style: normal;	10	font-style: normal;
10	font-weight: normal;	11	font-weight: normal;
11	src: local("LCARS"), url(fonts/LCARS.ttf);	12	src: local("LCARS"), url(fonts/LCARS.ttf);
12	}	13	}
13		14
14	/* EOT font created with WEFT on 2002-03-23 */	15	/* EOT font created with WEFT on 2002-03-23 */
15	@font-face {	16	@font-face {
16	font-family: "Downloadable Haettenschweiler";	17	font-family: "Downloadable Haettenschweiler";
17	font-style: normal;	18	font-style: normal;
18	font-weight: normal;	19	font-weight: normal;
19	src: url(fonts/HAETTEN0.eot), url(fonts/HAETTENS.ttf);	20	src: url(fonts/HAETTEN0.eot), url(fonts/HAETTENS.ttf);
20	}	21	}
21		22
22	/*	23	/*
23	@font-face {	24	@font-face {
24	font-family:Webdings;	25	font-family:Webdings;
25	font-style:normal;	26	font-style:normal;
26	font-weight:normal;	27	font-weight:normal;
27	src:url(fonts/WEBDING0.eot);	28	src:url(fonts/WEBDING0.eot);
28	}	29	}
29	*/	30	*/
30		31
31	@font-face {	32	@font-face {
32	font-family: "Downloadable Zurich XCn BT";	33	font-family: "Downloadable Zurich XCn BT";
33	font-style: normal;	34	font-style: normal;
34	font-weight: normal;	35	font-weight: normal;
35	src: url(fonts/ZurichXCn.pfr);	36	src: url(fonts/ZurichXCn.pfr);
36	}	37	}
37		38
38	/* basic display */	39	/* basic display */
39		40
40	* {	41	* {
41	font-family: "LCARS",	42	font-family: "LCARS",
42	Haettenschweiler, "Downloadable Haettenschweiler",	43	Haettenschweiler, "Downloadable Haettenschweiler",
43	"Zurich XCn BT", "Downloadable Zurich XCn BT",	44	"Zurich XCn BT", "Downloadable Zurich XCn BT",
44	impact, Verdana, Geneva, Arial, Helvetica, sans-serif;	45	impact, Verdana, Geneva, Arial, Helvetica, sans-serif;
45	font-weight: normal;	46	font-weight: normal;
46	}	47	}
47		48
48	body {	49	body {
49	position: absolute;	50	position: absolute;
50	left: 204px;	51	left: 204px;
51	top: 216px;	52	top: 216px;
52	right: 0px;	53	right: 0px;
53	bottom: 0;	54	bottom: 0;
54		55
55	/* IE 5.5+ scrollbar colors */	56	/* IE 5.5+ scrollbar colors */
56	/* from Mozilla LCARS Theme (2D style) */	57	/* from Mozilla LCARS Theme (2D style) */
57	scrollbar-3dlight-color:#000;	58	scrollbar-3dlight-color:#000;
58	scrollbar-arrow-color:#000;	59	scrollbar-arrow-color:#000;
59	scrollbar-base-color:#000;	60	scrollbar-base-color:#000;
60	scrollbar-darkshadow-color:#000;	61	scrollbar-darkshadow-color:#000;
61	scrollbar-face-color:#99f;	62	scrollbar-face-color:#99f;
62	scrollbar-highlight-color:#99f;	63	scrollbar-highlight-color:#99f;
63	scrollbar-track-color:#000;	64	scrollbar-track-color:#000;
64	scrollbar-shadow-color:#99f;	65	scrollbar-shadow-color:#99f;
65		66
66	background-color: #000;	67	background-color: #000;
67	color: #99f;	68	color: #99f;
68	font-size: 131%; /* 134% */	69	font-size: 131%; /* 134% */
69	}	70	}
70		71
71	h1, h2 {	72	h1, h2 {
72	margin-top: 0;	73	margin-top: 0;
73	font-size: 120%;	74	font-size: 120%;
74	font-weight: normal;	75	font-weight: normal;
75	}	76	}
76		77
77	#LCARS {	78	#LCARS {
78	/* position: relative; */	79	/* position: relative; */
79	position: fixed;	80	position: fixed;
80	left: 4px;	81	left: 4px;
81	top: 0;	82	top: 0;
82	right: 4px;	83	right: 4px;
83	}	84	}
84		85
85	.button {	86	.button {
86	width: 100px;	87	width: 100px;
87	min-height: 40px;	88	min-height: 40px;
88	background-color: #c9c;	89	background-color: #c9c;
89	color: #000;	90	color: #000;
90	text-decoration: none;	91	text-decoration: none;
91	overflow: hidden;	92	overflow: hidden;
92	}	93	}
93		94
94	#upper {	95	#upper {
95	position: absolute;	96	position: absolute;
96	left: 0;	97	left: 0;
97	top: 0;	98	top: 0;
98	right: 0;	99	right: 0;
99	height: 180px;	100	height: 180px;
100		101
101	/* Prevents body text above */	102	/* Prevents body text above */
102	/* padding-top: 4px; */	103	/* padding-top: 4px; */
103	background-color: #c00;	104	background-color: #c00;
104	color: #fff;	105	color: #fff;
105	}	106	}
106		107
107	.elbo {	108	.elbo {
108	position: relative;	109	position: relative;
109	width: 100px;	110	width: 100px;
110	height: 62px;	111	height: 62px;
111	text-align: right;	112	text-align: right;
112	}	113	}
113		114
114	.elbo-button {	115	.elbo-button {
115	position: relative;	116	position: relative;
116	margin-top: 4px;	117	margin-top: 4px;
117	height: 40px;	118	height: 40px;
118	overflow: hidden;	119	overflow: hidden;
119	}	120	}
120		121
121	.elbo span {	122	.elbo span {
122	position: relative;	123	position: relative;
123	right: 4px;	124	right: 4px;
124	}	125	}
125		126
126	@-webkit-keyframes swish-down-up {	127	@-webkit-keyframes swish-down-up {
127	0% {	128	0% {
128	height: 0;	129	height: 0;
129	top: 84px;	130	top: 84px;
130	}	131	}
131		132
132	100% {	133	100% {
133	}	134	}
134	}	135	}
135		136
136	#upper .elbo-button {	137	#upper .elbo-button {
137	position: absolute;	138	position: absolute;
138	min-height: 0;	139	min-height: 0;
139	height: 84px;	140	height: 84px;
140		141
141	/* -webkit-animation-name: swish-down-up; */	142	/* -webkit-animation-name: swish-down-up; */
142	/* -webkit-animation-iteration-count: 1; */	143	/* -webkit-animation-iteration-count: 1; */
143	-webkit-animation-delay: 1s;	144	-webkit-animation-delay: 1s;
144	-webkit-animation-duration: 1s;	145	-webkit-animation-duration: 1s;
145	}	146	}
146		147
147	#upper .elbo-button span {	148	#upper .elbo-button span {
148	position: absolute;	149	position: absolute;
149	right: 4px;	150	right: 4px;
150	bottom: 4px;	151	bottom: 4px;
151	}	152	}
152		153
153	#upper-elbo {	154	#upper-elbo {
154	position: absolute;	155	position: absolute;
155	top: 92px;	156	top: 92px;
156	}	157	}
157		158
158	#upper-elbo .elbo {	159	#upper-elbo .elbo {
159	height: 62px;	160	height: 62px;
160	background-color: #9cf;	161	background-color: #9cf;
161	color: #000;	162	color: #000;
162	}	163	}
163		164
164	@-webkit-keyframes swish-right-left {	165	@-webkit-keyframes swish-right-left {
165	0% {	166	0% {
166	width: 0px;	167	width: 0px;
167	/* height: 0px; */	168	/* height: 0px; */
168	left: 100px;	169	left: 100px;
169	/* top: 62px; */	170	/* top: 62px; */
170	}	171	}
171		172
172	100% {	173	100% {
173	}	174	}
174	}	175	}
175		176
176	#upper-elbo .elbo.left {	177	#upper-elbo .elbo.left {
177	-moz-border-radius: 0 0 0 32px;	178	-moz-border-radius: 0 0 0 32px;
178	-webkit-border-radius: 0 0 0 32px;	179	-webkit-border-radius: 0 0 0 32px;
179	border-radius: 0 0 0 32px;	180	border-radius: 0 0 0 32px;
180	/* -webkit-animation-name: swish-right-left; */	181	/* -webkit-animation-name: swish-right-left; */
181	-webkit-animation-duration: 1s;	182	-webkit-animation-duration: 1s;
182	}	183	}
183		184
184	#upper-elbo .elbo.left span {	185	#upper-elbo .elbo.left span {
185	top: 4px;	186	top: 4px;
186	}	187	}
187		188
188	#upper-elbo .elbo.right {	189	#upper-elbo .elbo.right {
189	position: absolute;	190	position: absolute;
190	left: 100px;	191	left: 100px;
191	top: 0;	192	top: 0;
192	width: 78px;	193	width: 78px;
193	right: 0;	194	right: 0;
194	}	195	}
195		196
196	#upper-elbo .elbo.right .black {	197	#upper-elbo .elbo.right .black {
197	position: absolute;	198	position: absolute;
198	left: 0;	199	left: 0;
199	top: 0;	200	top: 0;
200	width: 100%;	201	width: 100%;
201	height: 44px;	202	height: 44px;
202	background-color: #000;	203	background-color: #000;
203	-moz-border-radius: 0 0 0 16px;	204	-moz-border-radius: 0 0 0 16px;
204	-webkit-border-radius: 0 0 0 16px;	205	-webkit-border-radius: 0 0 0 16px;
205	border-radius: 0 0 0 16px;	206	border-radius: 0 0 0 16px;
206	}	207	}
207		208
208	#upper-elbo .elbo.right .terminator {	209	#upper-elbo .elbo.right .terminator {
209	position: absolute;	210	position: absolute;
210	left: 82px;	211	left: 82px;
211	top: 44px;	212	top: 44px;
212	width: 18px;	213	width: 18px;
213	height: 18px;	214	height: 18px;
214	background-color: #f90;	215	background-color: #f90;
215	}	216	}
216		217
217	#lower {	218	#lower {
218	position: absolute;	219	position: absolute;
219	top: 158px;	220	top: 158px;
220	}	221	}
221		222
222	#lower-elbo {	223	#lower-elbo {
223	position: absolute;	224	position: absolute;
224	}	225	}
225		226
226	#lower-elbo .elbo {	227	#lower-elbo .elbo {
227	background-color: #c66;	228	background-color: #c66;
228	color: #000;	229	color: #000;
229	}	230	}
230		231
231	#lower-elbo .elbo.left {	232	#lower-elbo .elbo.left {
232	-moz-border-radius: 32px 0 0 0;	233	-moz-border-radius: 32px 0 0 0;
233	-webkit-border-radius: 32px 0 0 0;	234	-webkit-border-radius: 32px 0 0 0;
234	border-radius: 32px 0 0 0;	235	border-radius: 32px 0 0 0;
235	}	236	}
236		237
237	#lower-elbo .elbo.left span {	238	#lower-elbo .elbo.left span {
238	position: absolute;	239	position: absolute;
239	bottom: 4px;	240	bottom: 4px;
240	}	241	}
241		242
242	#lower-elbo h2.elbo.left {	243	#lower-elbo h2.elbo.left {
243	margin-bottom: 0;	244	margin-bottom: 0;
244	}	245	}
245		246
246	#lower-elbo .elbo.right {	247	#lower-elbo .elbo.right {
247	position: absolute;	248	position: absolute;
248	left: 100px;	249	left: 100px;
249	top: 0;	250	top: 0;
250	width: 100px;	251	width: 100px;
251	}	252	}
252		253
253	#lower-elbo .elbo.right .black {	254	#lower-elbo .elbo.right .black {
254	position: absolute;	255	position: absolute;
255	left: 0px;	256	left: 0px;
256	top: 18px;	257	top: 18px;
257	width: 100%;	258	width: 100%;
258	height: 45px;	259	height: 45px;
259	background-color: #000;	260	background-color: #000;
260	-webkit-border-radius: 16px 0 0 0;	261	-webkit-border-radius: 16px 0 0 0;
261	border-radius: 16px 0 0 0;	262	border-radius: 16px 0 0 0;
262	}	263	}
263		264
264	p {	265	p {
265	margin-top: 1em;	266	margin-top: 1em;
266	margin-bottom: 0;	267	margin-bottom: 0;
267	line-height: 1.5;	268	line-height: 1.5;
268	text-align: justify;	269	text-align: justify;
269	}	270	}
270		271
271	p:first-child {	272	p:first-child {
272	margin-top: 0;	273	margin-top: 0;
273	}	274	}
274		275
275	#content {	276	#content {
276	/* position: relative; */	277	/* position: relative; */
277	}	278	}
278		279
279	#content a {	280	#content a {
280	text-decoration: none;	281	text-decoration: none;
281	}	282	}
282		283
283	#content #heading1 {	284	#content #heading1 {
284	position: fixed;	285	position: fixed;
285	left: 204px;	286	left: 204px;
286	top: 180px;	287	top: 180px;
287	right: 4px;	288	right: 4px;
288	height: 42px;	289	height: 42px;
289	background-color: rgba(255, 0, 0, 0.5);	290	background-color: rgba(255, 0, 0, 0.5);
290	color: white;	291	color: white;
291	text-align: right;	292	text-align: right;
292	}	293	}
293		294
294	#content #heading1 h1 {	295	#content #heading1 h1 {
295	position: absolute;	296	position: absolute;
296	bottom: 6px;	297	bottom: 6px;
297	right: 0;	298	right: 0;
298	margin-bottom: 0;	299	margin-bottom: 0;
299	padding-right: 4px;	300	padding-right: 4px;
300	}	301	}
301		302
302	#content a:link:hover,	303	#content a:link:hover,
303	#content a:link:focus	304	#content a:link:focus
304	{	305	{
305	background-color:#000;	306	background-color:#000;
306	color: #f90;	307	color: #f90;
307	}	308	}
308		309
309	#content a:link:active {	310	#content a:link:active {
310	background-color:#000;	311	background-color:#000;
311	color: #fff;	312	color: #fff;
312	}	313	}
313		314
314	#content a:link {	315	#content a:link {
315	background-color:#000;	316	background-color:#000;
316	color:#fc9;	317	color:#fc9;
317	}	318	}
318		319
319	#content a:visited:hover,	320	#content a:visited:hover,
320	#content a:visited:focus	321	#content a:visited:focus
321	{	322	{
322	background-color:#000;	323	background-color:#000;
323	color:#f90;	324	color:#f90;
324	}	325	}
325		326
326	#content a:visited:active {	327	#content a:visited:active {
327	background-color:black;	328	background-color:black;
328	color:#fff;	329	color:#fff;
329	}	330	}
330		331
331	#content a:visited {	332	#content a:visited {
332	background-color:black;	333	background-color:black;
333	color:#c9c;	334	color:#c9c;
334	}	335	}
335		336

Subversion Repositories LCARS

(root)/trunk/styles/lcars21.css - Rev 36 → 73