/* 
 * 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; }