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

Subversion Repositories LCARS

(root)/branches/live/styles/lcars21.css - Rev 73 → 198