1 /******************************************************************************* |
|
2 * Copyright (c) 2005, 2006 IBM Corporation and others. |
|
3 * All rights reserved. This program and the accompanying materials |
|
4 * are made available under the terms of the Eclipse Public License v1.0 |
|
5 * which accompanies this distribution, and is available at |
|
6 * http://www.eclipse.org/legal/epl-v10.html |
|
7 * |
|
8 * Contributors: |
|
9 * IBM Corporation - initial API and implementation |
|
10 *******************************************************************************/ |
|
11 |
|
12 /* |
|
13 * Set up general font colours, sizes, etc. Some of these will override |
|
14 * settings from the shared CSS |
|
15 */ |
|
16 .intro-header H1 { |
|
17 font-family: Helvetica, sans-serif; |
|
18 font-size: 20px; |
|
19 color: #000000; |
|
20 } |
|
21 |
|
22 #page-links a .link-label, #action-links a .link-label { |
|
23 font-size : 13pt; |
|
24 font-weight : 600; |
|
25 color : #000000; |
|
26 } |
|
27 #page-links a p .text, #action-links a p .text { |
|
28 font-size : 13pt; |
|
29 font-weight : 500; |
|
30 color : #333333; |
|
31 } |
|
32 |
|
33 /* |
|
34 * Turn off shared backround image. |
|
35 */ |
|
36 |
|
37 .page { |
|
38 background-position:left-10 top-10; |
|
39 background-image: background.jpg; |
|
40 } |
|
41 |
|
42 /* |
|
43 * Set up the content for the root page. |
|
44 */ |
|
45 body { |
|
46 min-width : 770px; |
|
47 /* since IE doesn't support min-width, use expression */ |
|
48 width:expression(document.body.clientWidth < 770? "770px": "auto" ); |
|
49 /* background-image : url(../graphics/root/background.jpg); */ |
|
50 background-repeat : no-repeat; |
|
51 background-position : top left; |
|
52 /* background-color : #7169D1; */ |
|
53 } |
|
54 #root { |
|
55 /* |
|
56 /* background-image : url(../graphics/root/brandmark.gif); */ |
|
57 */ |
|
58 background-repeat : no-repeat; |
|
59 background-position : bottom left; |
|
60 min-height : 450px; |
|
61 height : 100%; |
|
62 height : expression(document.body.clientHeight < 450? "450px": "100%" ); |
|
63 } |
|
64 |
|
65 #branding { |
|
66 position: absolute; |
|
67 bottom : 10px; |
|
68 left : 10px; |
|
69 } |
|
70 |
|
71 /* |
|
72 * We will not use the general-purpose group1 used in |
|
73 * other pages for a curve image. |
|
74 */ |
|
75 |
|
76 #extra-group1 { |
|
77 display : none; |
|
78 } |
|
79 /* |
|
80 * Set up the navigation bar. It should be centered in the middle |
|
81 * of the page |
|
82 */ |
|
83 #links-background { |
|
84 /* background-image : url(../graphics/root/dots.gif); */ |
|
85 background-repeat : repeat-x; |
|
86 width : 100%; |
|
87 height : 177px; |
|
88 margin-top : 18%; |
|
89 margin-bottom : auto; |
|
90 text-align : center; |
|
91 } |
|
92 /* specify a width for Moz so we can center. |
|
93 * **Important** If additional links are added, we will have to increase this width |
|
94 * to accomodate them, otherwise they will wrap to a new line |
|
95 */ |
|
96 |
|
97 #links-background > #page-links { |
|
98 width: 33em; |
|
99 margin: 0 auto; |
|
100 } |
|
101 |
|
102 #page-links { |
|
103 position : relative; |
|
104 top : 50px; |
|
105 text-align: center; |
|
106 } |
|
107 #page-links a { |
|
108 position : relative; |
|
109 width : 86px; |
|
110 margin-left : 1em; |
|
111 margin-right : 1em; |
|
112 text-align : center; |
|
113 vertical-align : top; |
|
114 } |
|
115 /* float left for Moz so the items all appear inline */ |
|
116 #page-links > a { |
|
117 float : left; |
|
118 position : relative; |
|
119 } |
|
120 #page-links a img { |
|
121 height : 82px; |
|
122 width : 82px; |
|
123 vertical-align : middle; |
|
124 } |
|
125 |
|
126 /* remove the hover image from the flow of the document, |
|
127 so it doesn't take up space and change the position |
|
128 of the link label and descriptions */ |
|
129 #page-links a .background-image { |
|
130 position : absolute; |
|
131 } |
|
132 /* properly align the link label and text based on class (left vs. right) */ |
|
133 #page-links a:hover { |
|
134 /* This is needed for IE to force the hover pseudo selectors below to work.*/ |
|
135 padding : 0 em; |
|
136 } |
|
137 /* Hide both the label and the description of the link and remove them from static HTML flow, until user hovers over link */ |
|
138 /* First, set the width of both the label and the description to a max of 15 em. */ |
|
139 /* This can be changed when translated to different country locals. */ |
|
140 #page-links a span { |
|
141 width : 16em; |
|
142 } |
|
143 |
|
144 /* Set up left links orientation first. */ |
|
145 #page-links a.left:link .link-label, |
|
146 #page-links a.left:visited .link-label { |
|
147 display: none; |
|
148 } |
|
149 #page-links a.left:hover .link-label, |
|
150 #page-links a.left:focus .link-label, |
|
151 #page-links a.left:active .link-label { |
|
152 text-align: left; |
|
153 display: block; |
|
154 position: absolute; |
|
155 top : 120 %; |
|
156 left : 0; |
|
157 } |
|
158 |
|
159 /* hide description and remove it from static HTML flow, until user hovers over link */ |
|
160 #page-links a.left:link .text, |
|
161 #page-links a.left:visited .text { |
|
162 display: none; |
|
163 } |
|
164 #page-links a.left:hover .text, |
|
165 #page-links a.left:focus .text, |
|
166 #page-links a.left:active .text { |
|
167 text-align: left; |
|
168 display: block; |
|
169 position: absolute; |
|
170 left : 0; |
|
171 top: 145%; |
|
172 } |
|
173 /* Set up right links orientation now. */ |
|
174 #page-links a.right:link .link-label, |
|
175 #page-links a.right:visited .link-label { |
|
176 display: none; |
|
177 } |
|
178 #page-links a.right:hover .link-label, |
|
179 #page-links a.right:focus .link-label, |
|
180 #page-links a.right:active .link-label { |
|
181 text-align: right; |
|
182 display: block; |
|
183 position: absolute; |
|
184 top : 120 %; |
|
185 right : 0; |
|
186 } |
|
187 /* hide description and remove it from static HTML flow, until user hovers over link */ |
|
188 #page-links a.right:link .text, |
|
189 #page-links a.right:visited .text { |
|
190 display: none; |
|
191 } |
|
192 #page-links a.right:hover .text, |
|
193 #page-links a.right:focus .text, |
|
194 #page-links a.right:active .text { |
|
195 text-align: right; |
|
196 display: block; |
|
197 position: absolute; |
|
198 right : 0; |
|
199 top: 145%; |
|
200 } |
|
201 |
|
202 /* properties for each of the page-links */ |
|
203 #page-links a#overview img { background-image : url(../graphics/icons/etool/overview72.gif); } |
|
204 #page-links a:hover#overview img { background-image : url(../graphics/icons/ctool/overview72.gif); } |
|
205 |
|
206 #page-links a#tutorials img { background-image : url(../graphics/icons/etool/tutorials72.gif); } |
|
207 #page-links a:hover#tutorials img { background-image : url(../graphics/icons/ctool/tutorials72.gif); } |
|
208 |
|
209 #page-links a#samples img { background-image : url(../graphics/icons/etool/samples72.gif); } |
|
210 #page-links a:hover#samples img { background-image : url(../graphics/icons/ctool/samples72.gif); } |
|
211 |
|
212 #page-links a#whatsnew img { background-image : url(../graphics/icons/etool/whatsnew72.gif); } |
|
213 #page-links a:hover#whatsnew img { background-image : url(../graphics/icons/ctool/whatsnew72.gif); } |
|
214 |
|
215 #page-links a#firststeps img { background-image : url(../graphics/icons/etool/firsteps72.gif); } |
|
216 #page-links a:hover#firststeps img { background-image : url(../graphics/icons/ctool/firsteps72.gif); } |
|
217 |
|
218 #page-links a#webresources img { background-image : url(../graphics/icons/etool/webrsrc72.gif); } |
|
219 #page-links a:hover#webresources img { background-image : url(../graphics/icons/ctool/webrsrc72.gif); } |
|
220 |
|
221 #page-links a#migrate img { background-image : url(../graphics/icons/etool/migrate72.gif); } |
|
222 #page-links a:hover#migrate img { background-image : url(../graphics/icons/ctool/migrate72.gif); } |
|
223 |
|
224 /* |
|
225 * Set up the action links |
|
226 */ |
|
227 #action-links { |
|
228 width : 98%; |
|
229 position : absolute; |
|
230 left : 0px; |
|
231 top : 20px; |
|
232 } |
|
233 #action-links a#workbench { |
|
234 position : absolute; |
|
235 top : -16px; |
|
236 right : -8px; |
|
237 text-align : right; |
|
238 } |
|
239 #action-links a .background-image, |
|
240 #action-links a #workbench_img { |
|
241 height : 53px; |
|
242 width : 53px; |
|
243 text-align : center; |
|
244 vertical-align : top; |
|
245 } |
|
246 /* special case for mozilla */ |
|
247 #action-links a > .background-image, |
|
248 #action-links a > #workbench_img { |
|
249 vertical-align : middle; |
|
250 } |
|
251 /* remove the hover image from the flow of the document, |
|
252 so it doesn't take up space and change the position |
|
253 of the main image */ |
|
254 #action-links a .background-image { |
|
255 position : absolute; |
|
256 } |
|
257 |
|
258 #action-links a#workbench .background-image { |
|
259 background-image : url(../graphics/icons/etool/wb48.gif); |
|
260 } |
|
261 |
|
262 #action-links a#workbench:hover .background-image, |
|
263 #action-links a#workbench:focus .background-image, |
|
264 #action-links a#workbench:active .background-image { |
|
265 background-image : url(../graphics/icons/ctool/wb48.gif); |
|
266 visibility : visible; |
|
267 position: absolute; |
|
268 top: 0px; |
|
269 right: 0px; |
|
270 } |
|
271 /* hide the link and description until users hover over the link */ |
|
272 #action-links a p .text, #action-links a .link-label { |
|
273 display : none; |
|
274 } |
|
275 #action-links a:hover .link-label, |
|
276 #action-links a:focus .link-label, |
|
277 #action-links a:active .link-label { |
|
278 display : block; |
|
279 width : 16em; |
|
280 margin-left : 10px; |
|
281 } |
|
282 #action-links a:hover p .text, |
|
283 #action-links a:focus p .text, |
|
284 #action-links a:active p .text { |
|
285 display : block; |
|
286 width : 16em; |
|
287 } |
|
288 #action-links a:hover, |
|
289 #action-links a:focus, |
|
290 #action-links a:active { |
|
291 border : 0px; |
|
292 } |
|