/* | |
* Set up general font colours, sizes, etc. Some of these will override | |
* settings from the shared CSS | |
*/ | |
.intro-header H1 { | |
font-size : 18pt; | |
} | |
#page-links a .link-label, #action-links a .link-label { | |
font-size : 13pt; | |
font-weight : 600; | |
color : #E5E5E5; | |
} | |
#page-links a p .text, #action-links a p .text { | |
font-size : 13pt; | |
font-weight : 500; | |
color : #E5E5E5; | |
} | |
/* | |
* Set up the content for the root page. | |
*/ | |
body { | |
min-width : 770px; | |
/* since IE doesn't support min-width, use expression */ | |
width:expression(document.body.clientWidth < 770? "770px": "auto" ); | |
background-image : url(graphics/rootpage/background.jpg); | |
background-repeat : no-repeat; | |
background-position : top left; | |
background-color : #7169D1; | |
} | |
#root { | |
background-image : url(graphics/rootpage/brandmark.gif); | |
background-repeat : no-repeat; | |
background-position : bottom left; | |
min-height : 450px; | |
height : 100%; | |
height : expression(document.body.clientHeight < 450? "450px": "100%" ); | |
} | |
/* | |
* Set up the navigation bar. It should be centered in the middle | |
* of the page | |
*/ | |
#links-background { | |
background-image : url(graphics/rootpage/dots.gif); | |
background-repeat : repeat-x; | |
width : 100%; | |
height : 177px; | |
margin-top : 18%; | |
margin-bottom : auto; | |
text-align : center; | |
} | |
/* specify a width for Moz so we can center. | |
* **Important** If additional links are added, we will have to increase this width | |
* to accomodate them, otherwise they will wrap to a new line | |
*/ | |
#links-background > #page-links { | |
width : 33em; | |
margin : 0 auto; | |
} | |
#page-links { position : relative; top : 50px; } | |
#page-links a { | |
position : relative; | |
width : 7em; | |
margin-left : 0.5em; | |
margin-right : 0.5em; | |
text-align : center; | |
vertical-align : top; | |
} | |
/* float left for Moz so the items all appear inline */ | |
#page-links > a { float : left; position : relative; } | |
#page-links a img { | |
height : 82px; | |
width : 82px; | |
vertical-align : middle; | |
} | |
/* remove the hover image from the flow of the document, | |
so it doesn't take up space and change the position | |
of the link label and descriptions */ | |
#page-links a .background-image { position : absolute; } | |
/* protect against very long labels in IE */ | |
#page-links a .link-label { word-wrap : break-word; } | |
#page-links a span { | |
display : block; | |
margin : 0px; | |
padding : 0px; | |
} | |
/* properly align the link text based on class (left vs. right) */ | |
#page-links a.left p { text-align : left;} | |
#page-links a.left span { text-align : left; margin-left : 15px; } | |
#page-links a.right p { text-align : right;} | |
#page-links a.right .link-label { text-align : right; margin-right : 15px; } | |
#page-links a.right p .text { position : relative; right : 15px;} | |
/* hide the link label until users hover over the link */ | |
#page-links a .link-label { padding-top : 20px; visibility : hidden; } | |
#page-links a:hover .link-label, | |
#page-links a:focus .link-label, | |
#page-links a:active .link-label { visibility : visible; } | |
/* hide the description until users hover over the link */ | |
#page-links a p .text { display : none; } | |
#page-links a:hover p .text { | |
display : block; | |
width : 15em; | |
position : absolute; | |
} | |
#page-links a:hover, | |
#page-links a:focus { border : 0px; } | |
#page-links a:hover p, | |
#page-links a:focus p, | |
#page-links a:active p { margin : 0px; padding : 0px; } | |
/* properties for each of the page-links */ | |
a#overview .background-image { background-image : url(graphics/icons/ctool/overview72.gif); visibility : hidden; } | |
a#tutorials .background-image { background-image : url(graphics/icons/ctool/tutorials72.gif); visibility : hidden; } | |
a#samples .background-image { background-image : url(graphics/icons/ctool/samples72.gif); visibility : hidden; } | |
a#news .background-image { background-image : url(graphics/icons/ctool/whatsnew72.gif); visibility : hidden; } | |
/* show the hover image on hover, focus, and active */ | |
#page-links a:hover .background-image, | |
#page-links a:focus .background-image, | |
#page-links a:active .background-image { visibility : visible; } | |
/* | |
* Set up the action links | |
*/ | |
#action-links { | |
width : 98%; | |
position : absolute; | |
left : 0px; | |
top : 20px; | |
} | |
#action-links a#workbench { | |
position : absolute; | |
top : -16px; | |
right : -8px; | |
text-align : right; | |
} | |
#action-links a .background-image, | |
#action-links a #workbench_img { | |
height : 53px; | |
width : 53px; | |
text-align : center; | |
vertical-align : top; | |
} | |
/* special case for mozilla */ | |
#action-links a > .background-image, | |
#action-links a > #workbench_img { vertical-align : middle; } | |
/* remove the hover image from the flow of the document, | |
so it doesn't take up space and change the position | |
of the main image */ | |
#action-links a .background-image { | |
position : absolute; | |
} | |
#action-links a#workbench .background-image { | |
background-image : url(graphics/icons/ctool/wb48.gif); | |
visibility : hidden; | |
} | |
#action-links a#workbench:hover .background-image, | |
#action-links a#workbench:focus .background-image, | |
#action-links a#workbench:active .background-image { | |
visibility : visible; | |
} | |
/* hide the link and description until users hover over the link */ | |
#action-links a p .text, #action-links a .link-label { display : none; } | |
#action-links a:hover .link-label, | |
#action-links a:focus .link-label, | |
#action-links a:active .link-label { display : block; width : 16em; } | |
#action-links a:hover p .text, | |
#action-links a:focus p .text, | |
#action-links a:active p .text { display : block; width : 16em; } | |
#action-links a:hover, | |
#action-links a:focus, | |
#action-links a:active { border-right : 0px; } | |