/* | |
* Set up the content for the root page. Note that the settings | |
* for the background images and navigation bar override | |
* settings in the shared CSS | |
*/ | |
body { | |
min-width : 611px; | |
/* since IE doesn't support min-width, try expression */ | |
width:expression(document.body.clientWidth < 611? "611px": "auto" ); | |
background-image : url(graphics/watermark/eclipse_logo.gif); | |
background-position : bottom left; | |
} | |
#presentation-header { | |
background-color : #BCCEE4; | |
min-width : 611px; | |
/* since IE doesn't support min-width, try expression */ | |
width:expression(document.body.clientWidth < 611? "611px": "auto" ); | |
} | |
.page-content { | |
min-width : 611px; | |
/* since IE doesn't support min-width, try expression */ | |
width:expression(document.body.clientWidth < 611? "611px": "auto" ); | |
} | |
#background { | |
background-color : #BCCEE4; | |
min-height : 10%; /* same as background-image top and variable-space height */ | |
} | |
#variable-space { | |
background-color : #BCCEE4; | |
height : 10%; /* same as background-image and background height */ | |
} | |
#background-image { | |
position : relative; | |
top : 10%; /* same as variable-space and background height */ | |
height : 253px; | |
width : 100%; | |
background-image : url(graphics/background/background.jpg); | |
background-repeat : repeat-x; | |
text-align : left; | |
} | |
#curve-image { | |
height : 253px; | |
width : 611px; | |
background-image : url(graphics/background/curve.gif); | |
background-repeat : no-repeat; | |
position : relative; | |
left : 50%; | |
margin-left : -305px; | |
} | |
/* | |
* Set up the navigation bar | |
*/ | |
#navigation-links { | |
position : relative; | |
top : 10%; | |
height : 253px; | |
width : 320px; | |
left : 50%; | |
margin-left : -160px; | |
} | |
#navigation-links a { | |
width : 80px; | |
height : 80px; | |
position : absolute; | |
top : -70px; | |
text-align : center; | |
} | |
#navigation-links a img { | |
height : 72px; | |
width : 72px; | |
vertical-align : middle; | |
} | |
#navigation-links a .link-label, #navigation-links a .text { | |
font-size : 10pt; | |
display : block; | |
} | |
#navigation-links a span { | |
display : block; | |
font-size : 10pt; | |
font-weight : normal; | |
color : #42454A; | |
} | |
/* hide the link description until users hover over the link */ | |
#navigation-links a p .text { display : none; } | |
#navigation-links a:hover { border-right : 5px; } | |
#navigation-links a:hover p .text { | |
display : block; | |
/* width should be same as navigation-links width */ | |
width : 320px; | |
position : relative; | |
top : 35px; | |
} | |
/* properties for each of the navigation-links */ | |
a#overview img { background-image : url(graphics/obj_64/overview_obj.gif); } | |
a#overview:hover img { background-image : url(graphics/obj_64/hovoverview_obj.gif); } | |
a#tutorials { left : 85px; } | |
a#tutorials img { background-image : url(graphics/obj_64/tutorials_obj.gif); } | |
a#tutorials:hover img { background-image : url(graphics/obj_64/hovtutorials_obj.gif); } | |
a#tutorials:hover p .text { left : -85px; } | |
a#samples { left : 165px;} | |
a#samples img { background-image : url(graphics/obj_64/examples_obj.gif); } | |
a#samples:hover img { background-image : url(graphics/obj_64/hovexamples_obj.gif); } | |
a#samples:hover p .text { left : -165px; } | |
a#news { left : 245px;} | |
a#news img { background-image : url(graphics/obj_64/whatsnew_obj.gif); } | |
a#news:hover img { background-image : url(graphics/obj_64/hovwhatsnew_obj.gif); } | |
a#news:hover p .text { left : -220px; width : 240px; } | |
a#workbench { | |
position : absolute; | |
top : 100px; | |
width : 200px; | |
left : 50%; | |
margin-left : -100px; | |
text-align : center; | |
} | |
a#workbench .link-label { display : inline; } | |
a#workbench img { | |
background-image : url(graphics/obj_48/workbench_obj.gif); | |
height : 56px; | |
width : 56px; | |
} | |
a#workbench:hover img { | |
background-image : url(graphics/obj_48/hovworkbench_obj.gif); | |
height : 56px; | |
width : 56px; | |
} | |
a#workbench:hover p .text { | |
width : 360px; | |
position : relative; | |
top : -105px; | |
left : 50%; | |
margin-left : -180px; | |
} |