|
1 /* |
|
2 * Set up general font colours, sizes, etc. Some of these will override |
|
3 * settings from the shared CSS |
|
4 */ |
|
5 .intro-header H1 { |
|
6 font-family: Arial, Helvetica, sans-serif; |
|
7 font-size: 20px; |
|
8 color: #00A1D0; |
|
9 /* font-size : 18pt; */ |
|
10 } |
|
11 #page-links a .link-label, #action-links a .link-label { |
|
12 font-size : 13pt; |
|
13 font-weight : 600; |
|
14 color : #1B1B1B; |
|
15 } |
|
16 #page-links a p .text, #action-links a p .text { |
|
17 font-size : 13pt; |
|
18 font-weight : 500; |
|
19 color : #1B1B1B; |
|
20 } |
|
21 /* |
|
22 * Set up the content for the root page. |
|
23 */ |
|
24 body { |
|
25 min-width : 770px; |
|
26 /* since IE doesn't support min-width, use expression */ |
|
27 width:expression(document.body.clientWidth < 770? "770px": "auto" ); |
|
28 /* swapped Eclipse background image for Carbide version */ |
|
29 background-image : url(graphics/rootpage/background_carbide.jpg); |
|
30 background-repeat : no-repeat; |
|
31 background-position : top left; |
|
32 background-color : #CCC; |
|
33 } |
|
34 #root { |
|
35 /* Carbide branding mod */ |
|
36 /* swapped Eclipse background image for Carbide version */ |
|
37 /* background-image : url(graphics/rootpage/brandmark.gif); */ |
|
38 /* background-image : url(graphics/rootpage/brandmark.png); */ |
|
39 background-repeat : no-repeat; |
|
40 background-position : bottom left; |
|
41 min-height : 450px; |
|
42 height : 100%; |
|
43 height : expression(document.body.clientHeight < 450? "450px": "100%" ); |
|
44 } |
|
45 /* |
|
46 * Set up the navigation bar. It should be centered in the middle |
|
47 * of the page |
|
48 */ |
|
49 #links-background { |
|
50 /* removed dot graphic that ran across page! */ |
|
51 width : 100%; |
|
52 height : 177px; |
|
53 margin-top : 18%; |
|
54 margin-bottom : auto; |
|
55 text-align : center; |
|
56 } |
|
57 /* specify a width for Moz so we can center. |
|
58 * **Important** If additional links are added, we will have to increase this width |
|
59 * to accomodate them, otherwise they will wrap to a new line |
|
60 */ |
|
61 #links-background > #page-links { |
|
62 width : 33em; |
|
63 margin : 0 auto; |
|
64 } |
|
65 #page-links { |
|
66 position : relative; |
|
67 top : 50px; |
|
68 } |
|
69 #page-links a { |
|
70 position : relative; |
|
71 width : 86px; |
|
72 margin-left : 1em; |
|
73 margin-right : 1em; |
|
74 text-align : center; |
|
75 vertical-align : top; |
|
76 } |
|
77 /* float left for Moz so the items all appear inline */ |
|
78 #page-links > a { |
|
79 float : left; |
|
80 position : relative; |
|
81 } |
|
82 #page-links a img { |
|
83 height : 72px; /* was 82 */ |
|
84 width : 72px; /* was 82 */ |
|
85 vertical-align : middle; |
|
86 } |
|
87 /* remove the hover image from the flow of the document, |
|
88 so it doesn't take up space and change the position |
|
89 of the link label and descriptions */ |
|
90 #page-links a .background-image { |
|
91 position : absolute; |
|
92 } |
|
93 /* properly align the link label and text based on class (left vs. right) */ |
|
94 #page-links a:hover { |
|
95 /* This is needed for IE to force the hover pseudo selectors below to work.*/ |
|
96 padding : 0 em; |
|
97 } |
|
98 /* Hide both the label and the description of the link and remove them from static HTML flow, until user hovers over link */ |
|
99 /* First, set the width of both the label and the description to a max of 15 em. */ |
|
100 /* This can be changed when translated to different country locals. */ |
|
101 #page-links a span { |
|
102 width : 16em; |
|
103 } |
|
104 /* Set up left links orientation first. */ |
|
105 #page-links a.left:link .link-label, |
|
106 #page-links a.left:visited .link-label { |
|
107 display: none; |
|
108 } |
|
109 #page-links a.left:hover .link-label, |
|
110 #page-links a.left:focus .link-label, |
|
111 #page-links a.left:active .link-label { |
|
112 text-align: left; |
|
113 display: block; |
|
114 position: absolute; |
|
115 top : 120 %; |
|
116 left : 0; |
|
117 } |
|
118 /* hide description and remove it from static HTML flow, until user hovers over link */ |
|
119 #page-links a.left:link .text, |
|
120 #page-links a.left:visited .text { |
|
121 display: none; |
|
122 } |
|
123 #page-links a.left:hover .text, |
|
124 #page-links a.left:focus .text, |
|
125 #page-links a.left:active .text { |
|
126 text-align: left; |
|
127 display: block; |
|
128 position: absolute; |
|
129 left : 0; |
|
130 top: 145%; |
|
131 } |
|
132 /* Set up right links orientation now. */ |
|
133 #page-links a.right:link .link-label, |
|
134 #page-links a.right:visited .link-label { |
|
135 display: none; |
|
136 } |
|
137 #page-links a.right:hover .link-label, |
|
138 #page-links a.right:focus .link-label, |
|
139 #page-links a.right:active .link-label { |
|
140 text-align: right; |
|
141 display: block; |
|
142 position: absolute; |
|
143 top : 120 %; |
|
144 right : 0; |
|
145 } |
|
146 /* hide description and remove it from static HTML flow, until user hovers over link */ |
|
147 #page-links a.right:link .text, |
|
148 #page-links a.right:visited .text { |
|
149 display: none; |
|
150 } |
|
151 #page-links a.right:hover .text, |
|
152 #page-links a.right:focus .text, |
|
153 #page-links a.right:active .text { |
|
154 text-align: right; |
|
155 display: block; |
|
156 position: absolute; |
|
157 right : 0; |
|
158 top: 145%; |
|
159 } |
|
160 /* properties for each of the page-links */ |
|
161 a#overview .background-image { |
|
162 background-image : url(graphics/icons/ctool/overview72.gif); |
|
163 visibility : hidden; |
|
164 } |
|
165 a#tutorials .background-image { |
|
166 background-image : url(graphics/icons/ctool/tutorials72.gif); |
|
167 visibility : hidden; |
|
168 } |
|
169 a#samples .background-image { |
|
170 background-image : url(graphics/icons/ctool/samples72.gif); |
|
171 visibility : hidden; |
|
172 } |
|
173 a#news .background-image { |
|
174 background-image : url(graphics/icons/ctool/whatsnew72.gif); |
|
175 visibility : hidden; |
|
176 } |
|
177 /* show the hover image on hover, focus, and active */ |
|
178 #page-links a:hover .background-image, |
|
179 #page-links a:focus .background-image, |
|
180 #page-links a:active .background-image { |
|
181 visibility : visible; |
|
182 } |
|
183 /* |
|
184 * Set up the action links |
|
185 */ |
|
186 #action-links { |
|
187 width : 98%; |
|
188 position : absolute; |
|
189 left : 0px; |
|
190 top : 20px; |
|
191 } |
|
192 #action-links a#workbench { |
|
193 position : absolute; |
|
194 top : -16px; |
|
195 right : -8px; |
|
196 text-align : right; |
|
197 } |
|
198 #action-links a .background-image, |
|
199 #action-links a #workbench_img { |
|
200 height : 53px; |
|
201 width : 53px; |
|
202 text-align : center; |
|
203 vertical-align : top; |
|
204 } |
|
205 /* special case for mozilla */ |
|
206 #action-links a > .background-image, |
|
207 #action-links a > #workbench_img { |
|
208 vertical-align : middle; |
|
209 } |
|
210 /* remove the hover image from the flow of the document, |
|
211 so it doesn't take up space and change the position |
|
212 of the main image */ |
|
213 #action-links a .background-image { |
|
214 position : absolute; |
|
215 } |
|
216 #action-links a#workbench .background-image { |
|
217 background-image : url(graphics/icons/ctool/wb48.gif); |
|
218 visibility : hidden; |
|
219 } |
|
220 #action-links a#workbench:hover .background-image, |
|
221 #action-links a#workbench:focus .background-image, |
|
222 #action-links a#workbench:active .background-image { |
|
223 visibility : visible; |
|
224 position: absolute; |
|
225 top: 0px; |
|
226 right: 0px; |
|
227 } |
|
228 /* hide the link and description until users hover over the link */ |
|
229 #action-links a p .text, #action-links a .link-label { |
|
230 display : none; |
|
231 } |
|
232 #action-links a:hover .link-label, |
|
233 #action-links a:focus .link-label, |
|
234 #action-links a:active .link-label { |
|
235 display : block; |
|
236 width : 16em; |
|
237 margin-left : 10px; |
|
238 } |
|
239 #action-links a:hover p .text, |
|
240 #action-links a:focus p .text, |
|
241 #action-links a:active p .text { |
|
242 display : block; |
|
243 width : 16em; |
|
244 } |
|
245 #action-links a:hover, |
|
246 #action-links a:focus, |
|
247 #action-links a:active { |
|
248 border : 0px; |
|
249 } |