| /* |
| * 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 otdt-root page. |
| */ |
| body { |
| padding:1em; |
| min-width : 770px; |
| /* since IE doesn't support min-width, use expression */ |
| width:expression(document.body.clientWidth < 770? "770px": "auto" ); |
| background-image : url(graphics/otdt-rootpage/background.jpg); |
| background-repeat : no-repeat; |
| background-position : top left; |
| background-color : #FFFFFF; |
| |
| } |
| |
| #otdt-root { |
| background-image : url(graphics/otdt-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/otdt-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; } |