blob: ea4ca8da85a7fbb6448955022eac49f065cc7579 [file] [log] [blame]
/*
* 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;
}
/* 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,
#page-links a:active { 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 img { background-image : url(graphics/icons/etool/overview72.gif); }
a#overview:hover img,
a#overview:focus img,
a#overview:active img { background-image : url(graphics/icons/ctool/overview72.gif); }
a#tutorials img { background-image : url(graphics/icons/etool/tutorials72.gif); }
a#tutorials:hover img,
a#tutorials:focus img,
a#tutorials:active img { background-image : url(graphics/icons/ctool/tutorials72.gif); }
a#samples img { background-image : url(graphics/icons/etool/samples72.gif); }
a#samples:hover img,
a#samples:focus img,
a#samples:active img { background-image : url(graphics/icons/ctool/samples72.gif); }
a#news img { background-image : url(graphics/icons/etool/whatsnew72.gif); }
a#news:hover img,
a#news:focus img,
a#news:active img { background-image : url(graphics/icons/ctool/whatsnew72.gif); }
/*
* Set up the action links
*/
#action-links {
width : 98%;
position : absolute;
left : 0px;
top : 20px;
}
a#workbench {
position : absolute;
top : -16px;
right : -8px;
text-align : right;
}
a#workbench img {
background-image : url(graphics/icons/etool/wb48.gif);
height : 56px;
width : 56px;
text-align : center;
}
a#workbench:hover img,
a#workbench:focus img,
a#workbench:active img {
background-image : url(graphics/icons/ctool/wb48.gif);
height : 56px;
width : 56px;
}
/* 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; }