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