/*=======================================
* BLUE: CSS for Lead Story Carousel Element
* =======================================*/  
#lead-stories { position:relative; overflow:hidden; height:auto !important; height:430px; min-height:430px; }
.lead-stories-header { position:absolute; top:0; left:0; background:#51504A; height:30px; width:100%; overflow:visible; z-index:2; }
/* Attributes added by HCl for Standalone CR to make the title length fixed*/
#home div#content div.column .lead-stories-header h2.nomargin { line-height:1em; font-size:1.4em; padding:0 12px; font-family:Arial, Helvetica, sans-serif; color:#fff; background:none; height:16px; max-width:206px; overflow:hidden; }
#lead-stories .slideContainer { position:absolute; z-index:1; }
/* Removed z-index:9999; to solve overlapping of elements on comments form popup */
#lead-stories .story { background:#fff; float:left; margin-top:30px; position:relative; height:400px; min-height:400px; }
#lead-stories .story-thumbnail { height:auto !important; height:204px; min-height:204px;  }
#lead-stories .story h1 { height:61px; overflow:hidden; margin-top:10px; line-height:1.2em; }
#lead-stories .story p, #lead-stories .related-link { background:#fff; display:block; margin:10px 17px 13px 12px }
#lead-stories p.byline { display:block; color:#9E9C92; font-size:1.1em; line-height:11px; margin:0 17px 7px 12px; }
#lead-stories p.short-description { height:30px; overflow:hidden; margin-top:0; margin-bottom:0;  } 
#lead-stories .related-links { height:55px; position:absolute; bottom:0; left:0; width:100%; }
#lead-stories .related-link { margin:0 0 1px; padding-left:30px; width:280px; float:none; background-color:#F4F1E8; line-height:27px; height:27px; overflow:hidden; }
#lead-stories .related-link a { font-size:1.16em; }
#lead-stories .video-link { background-image:url(../img/icons.gif); background-position:5px -4px; background-repeat:no-repeat; }
#lead-stories .photo-link { background-image:url(../img/icons.gif); background-position:5px -26px; background-repeat:no-repeat; }
#lead-stories .text-link { background-image:url(../img/texticon.gif); background-position:10px; background-repeat:no-repeat; }
#lead-stories .button-controls { z-index:2; float:right; padding-right:4px; }
#lead-stories .button-controls div.button { font-weight:bold; float:left; display:inline; position:relative; text-decoration:none; font-size:1.4em; line-height:30px; text-align:center; height:30px; overflow:visible; width:14px; font-weight:bold; }
#lead-stories .button-controls div.number { margin-left:1px; background:url(../img/leadstory-divider.gif) right center no-repeat; width:23px }
#lead-stories .button-controls div.last { background:none; }
#lead-stories .button-controls div a { display:block; position:absolute; z-index:3; top:0; left:0; width:100%; color:#818077; height:36px; font-weight:normal; }
#lead-stories .button-controls div a { outline:none; }
#lead-stories .button-controls div a.next { background:url(../img/arrows.gif); background-position:-88px 2px; text-indent:-9999999px; height:28px; }
#lead-stories .button-controls div a.prev { background:url(../img/arrows.gif); background-position:-56px 2px; text-indent:-9999999px; height:28px; }
#lead-stories .button-controls a:hover.next { background-position:-88px -91px; }
#lead-stories .button-controls a:hover.prev { background-position:-56px -91px; }
#lead-stories .button-controls a:hover { text-decoration:none; color:#fff; }
#lead-stories .button-controls a.selected { color:#fff; background:url(../img/leadstory-selected.gif) center bottom no-repeat; }
/* Added by HCL for fixing issue with the related links jump happening in Safari and Chrome browsers*/
#lead-stories .story-wrapper {width:100%; height:100%; position:relative;}

/*=======================================
* Tooltips
* ======================================*/
.tooltip { position: absolute; z-index:999999; background:url(../img/leadstory-tooltip.gif) center top no-repeat; }
.tooltip .tooltip-content { font-weight:bold; margin-top:6px; padding:7px 5px; background-color:#F4F1E8; line-height: 1.05em; text-align: center; }
.tooltip h3 { margin: 0 0 5px; text-align: left; }
.hidden-tooltip { display:none !important; }
/*=====================================
RESET
* =====================================*/
/* Removed by HCL the below code as it was conflicting with indexelement and multiindex element
div.wrapper_twothirds div.hr, div.half div.hr { border-width: 10px 10px 0 0; height:10px; width:650px; }*/