Monday 8 April 2013

Quick Access menu for Visual Force pages


Hi Developers,

  1. I think some of us aware about Quick Access Menu (QAM) on record detail page and on object tab page.
  2. But it is wondering for me if I can access this Quick Access menu on our Visual Force Page also.
  3. So I tried a lot to get this QAM on VFP by any setting but in salesforce there is no option for that so I Create Custom  QMA Component to fullfill my requirment. So I am sharing compontent.
My Page On which QMA Will show: -




<apex:page standardController="SalesForceApp__c"   showChat="false" showHeader="false" sidebar="false" standardStylesheets="false" >
       <c:SideSliderCom componentInf="pageBlockSectionItem,pageBlock,pageBlockSection," />
       <apex:pageBlock >
           <apex:pageBlockSection >
              <apex:pageBlockSectionItem ></apex:pageBlockSectionItem>
          </apex:pageBlockSection>
       </apex:pageBlock>
</apex:page>



Compoent SideSliderCom code: 

<apex:component controller="ComponentControllerSlide">
 <apex:attribute type="string" name="componentInf" description="provide compent name and get info that info" assignTo="{!ComponentName}"/>

 <Style>
 Please Add the style. Style code also proivide in the My Bolg.
 </style>
 
 
 <script>
    function HideShowHandle(){
       var d = document.getElementById('devSlide1');
       if(d.className =='')
       {
           d.style.right='-2px';
           d.className ='expanded';
       }
       else if(d.className =='expanded'){
           d.style.right='-230px';
           d.className ='';
       }
    }
</script>
    
<div id="devSlide1" style="display: block; right: -230px;background: rgb(226, 13, 13);" class="">
    <div class="handle" onclick="HideShowHandle()">
        <img src="/s.gif" alt="Collapse Force.com Quick Access Menu" class="menuArrow1" onblur="this.className = 'menuArrow1';" onfocus="this.className = 'menuArrowOn1';" onmouseout="this.className = 'menuArrow1';" onmouseover="this.className = 'menuArrowOn1';" title="Collapse Force.com Quick Access Menu"/>
    </div>
    <div class="slideContainer">
        <div class="header">
            <a href="/setup/forcecomHomepage.apexp" TARGET="_BLANK" title="Setup" id="forceLogoLink">
                <img src="/s.gif" alt="Go to Setup" class="forceLogo" onblur="this.className = 'forceLogo';" onfocus="this.className = 'forceLogoOn';" onmouseout="this.className = 'forceLogo';" onmouseover="this.className = 'forceLogoOn';" title="Go to Setup"/>
            </a>
            <a href="" title="Help" style="float: right;margin-top: 5px;">
                <img src="/s.gif" alt="Help" class="helpIcon" title="Help"/>
            </a>
        </div>
        <div class="slideBody">
            <ul class="slideList">
                <apex:repeat value="{!myLinks}" var="t">
                <li class="">
                <apex:outputPanel rendered="{!if(t.ActiveUrl==true,'true','false')}">
                    <a class="toolLink" href="{!t.UrlLink}" title="" target="_blank">{!t.LinkTitle}</a>
                    <div class="clearingBox"></div>
                </apex:outPutPanel>
                <apex:outputPanel rendered="{!if(t.ActiveUrl==false,'true','false')}">
                    <div><span style="margin-left: 3%;color: green;font-size: 17px;">{!t.UrlLink}</span>&nbsp;<span style="color:red"> {!t.LinkTitle}</span></div>
                </apex:outPutPanel>
                </li>
                <hr class="divider"/>
                </apex:repeat>
            </ul>
            
      </div>
        <div class="footer">
           <a href="http://salesforcenow.blogspot.in/" style="color:white" target="_blank">Ashlekh Gera</a>
       </div>
   </div>
</div>
    
</apex:component>

Style Code which have to add in Component or write style code in file and than 
include that  file in component.

<style> 
 #devSlide1{position:fixed;width:270px;top:160px;right:-230px;z-index:7;-webkit-transition:all 0.5s ease-out;-moz-transition:all 0.5s ease-out;-transition:all 0.5s ease-out;display:none}
 #devSlide1 .handle{position:absolute;width:20px;top:0;left:20px;background-color:#226B86;border-width:4px;border-style:solid;border-right-style:none;border-color:#FFF;padding:7px 0;padding-right:2px;text-align:left;color:white;-moz-border-radius-topleft:5px;-moz-border-radius-bottomleft:5px;border-top-left-radius:5px;border-bottom-left-radius:5px;-moz-box-shadow:-2px 0 2px #A0A6AB;box-shadow:-2px 0 2px #A0A6AB;z-index:10}
 #devSlide1 .header{padding-bottom:2px}
 #devSlide1 .slideContainer{position:absolute;right:-2px;top:0;width:210px;background-color:#226B86;border:4px solid #FFF;padding:6px;padding-top:3px;margin:0;-moz-border-radius-bottomleft:5px;border-bottom-radius-left:5px;-moz-box-shadow:0 0 2px #A0A6AB;-webkit-box-shadow:0 0 2px #A0A6AB;box-shadow:0 0 2px #A0A6AB;z-index:9}
 #devSlide1 .slideBody{background-color:white;-moz-border-radius:5px;border-radius:5px;border:3px solid #FFF}
 #devSlide1 .slideList{background-color:white;margin:0;padding:0}#devSlide1 hr{margin-left:3px;margin-right:3px;clear:both;color:#ccc}
 #devSlide1 .slideList li{list-style-type:none;margin:1px;-moz-border-radius:9x;border-radius:9px;clear:both}
 #devSlide1 .slideList li a{line-height:1.3em;padding:5px}
 #devSlide1 .helpIcon{background:transparent url(/img/alohaSkin/help_grey.png) no-repeat}
 #devSlide1 .slideList li.hover{background-color:#cfeef8}#devSlide1 .slideList li.hover .toolLink{text-decoration:underline}
 #devSlide1 .slideList li.hover .toolNewLink{text-decoration:none}
 #devSlide1 .toolLink{color:#096186;text-decoration:none;float:left}
 #devSlide1 .toolNewLink{color:#096186;margin-left:3px;padding-left:2px;display:none;float:right}
 #devSlide1 .toolNewLink img{margin-right:2px;vertical-align:text-bottom}
 #devSlide1 .hover .toolNewLink{display:block}
 #devSlide1 .footer{text-align:right;padding:3px 1px}
 #devSlide1.footer a{color:white;font-weight:bold;text-decoration:none}
 #devSlide1 .footer a:hover{text-decoration:underline}
 #devSlide1 .helpLink{float:right;margin-top:5px}
 .menuArrow1{background-image:url(/img/dcm/menuArrow_sprite.gif);background-position:0 0;width:16px;height:20px;background-position:0 0}
.menuArrowOn1{background-image:url(/img/dcm/menuArrow_sprite.gif);background-position:0 0;width:16px;height:20px;background-position:0 -20px}
.expanded .menuArrow1{background-image:url(/img/dcm/menuArrow_sprite.gif);background-position:0 0;width:16px;height:20px;background-position:0 -40px}
.expanded .menuArrowOn1{background-image:url(/img/dcm/menuArrow_sprite.gif);background-position:0 0;width:16px;height:20px;background-position:0 -60px}
.rtl .menuArrow1{background-image:url(/img/dcm/menuArrow_sprite.gif);background-position:0 0;width:16px;height:20px;background-position:0 -40px}
.rtl .menuArrowOn1{background-image:url(/img/dcm/menuArrow_sprite.gif);background-position:0 0;width:16px;height:20px;background-position:0 -60px}
.expanded .rtl .menuArrow1{background-image:url(/img/dcm/menuArrow_sprite.gif);background-position:0 0;width:16px;height:20px;background-position:0 0}
.expanded .rtl .menuArrowOn1{background-image:url(/img/dcm/menuArrow_sprite.gif);background-position:0 0;width:16px;height:20px;background-position:0 -20px}
.forceLogo{background-image:url(/img/forceMenuLogo.gif);background-position:0 0;width:91px;height:31px;background-position:0 0}
.forceLogoOn,a#forceLogoLink:focus .forceLogo{background-image:url(/img/forceMenuLogo.gif);background-position:0 0;width:91px;height:31px;background-position:0 -31px}
.helpIcon{background:transparent url(/img/alohaSkin/help_orange.png) no-repeat;vertical-align:bottom}
.infoIcon{background-image:url(/img/alohaSkin/info_sprite.png);background-position:left top;height:15px}
.zen ul,.zen ol,.zen li,.zen h1,.zen h2,.zen h3,.zen h4,.zen h6,.zen form,.zen fieldset,.zen legend,.zen input,.zen textarea,.zen p,.zen blockquote{margin:0;padding:0}.zen h1,.zen h2,.zen h3,.zen h4,.zen h5,.zen h6{display:block}.zen li{list-style:none}.zen table{border-collapse:collapse;border-spacing:0}.zen fieldset,.zen img{border:0}.zen input,.zen textarea,.zen select{font-family:inherit;font-size:inherit;font-weight:inherit}.zen legend{color:#222}.zen a{color:#015BA7;text-decoration:none}.zen-headerTop a{color:#015BA7;text-decoration:none}.zen-headerTop a:hover,.zen-headerTop a:focus{text-decoration:underline}.zen .zen-line:after{clear:both;display:block;visibility:hidden;overflow:hidden;height:0 !important;line-height:0;content:"."}.zen .zen-unit,.zen .zen-start{float:left}.zen .zen-unitExt,.zen .zen-end{float:right}.zen .zen-size1of1{float:none}.zen .zen-size1of2{width:50%}.zen .zen-size1of3{width:33.33333%}.zen .zen-size2of3{width:66.66666%}.zen .zen-size1of4{width:25%}.zen .zen-size3of4{width:75%}.zen .zen-size1of5{width:20%}.zen .zen-size2of5{width:40%}.zen .zen-size3of5{width:60%}.zen .zen-size4of5{width:80%}.zen .zen-lastUnit{float:none;display:table-cell;width:9999em}.zen .zen-body{display:table;vertical-align:top}.zen .zen-body,.zen .zen-footer,.zen .zen-header{display:table;width:100%;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}.zen .zen-body.zen-cropH,.zen .zen-body.zen-cropMe{display:block}.zen .zen-footer{text-align:center}.zen .zen-inner:after,.zen .zen-header:after,.zen .zen-body:after,.zen .zen-footer:after{clear:both;display:block;visibility:hidden;overflow:hidden;height:0 !important;line-height:0;content:"."}.zen .zen-inner{position:relative}.zen .zen-arrow{display:block;background-repeat:no-repeat;font-size:.01em;position:relative;z-index:10}.zen .zen-basic{-moz-border-radius:7px;border-radius:7px;background-color:#fff}.zen .zen-basic .zen-header{-moz-border-radius-topleft:7px;-moz-border-radius-topright:7px;border-top-left-radius:7px;border-top-right-radius:7px}.zen .zen-simple{border:1px solid #eaeaea;-moz-border-radius:4px;border-radius:4px}.zen .zen-faq .zen-topRight{background-image:url(/img/oocss/box_faq_folded_corner.png);background-color:#fff;width:18px;height:18px}.zen .zen-themed{border:1px solid #eaeaea;-moz-border-radius:4px;border-radius:4px;border-top-width:3px}.zen .zen-chart{border:2px solid #dcdcdc;-moz-border-radius:0;border-radius:0}.zen .zen-stats{-moz-border-radius:8px;border-radius:8px;border:1px solid #eaeaea}.zen .zen-instructions{border:1px solid #eaeaea;-moz-border-radius:0;border-radius:0}.zen .zen-chattyBackground{background:#fff5db;background:-moz-linear-gradient(top,#fff5db 0,#ffe5a9 100%);background:-webkit-linear-gradient(top,#fff5db 0,#ffe5a9 100%);background:-ms-linear-gradient(top,#fff5db 0,#ffe5a9 100%)}.zen .zen-standardBackground{background-color:#f8f8f8}.zen .zen-wizardBackground{color:#fff;background-color:#1797c0}.zen .zen-instructionsBackground{background-color:#ffc}.zen .zen-chartBackground{background-color:#dcdcdc}.zen .zen-recycleBackground{background-color:#dcfbdc}.zen .zen-alertBackground{background-color:#fdedea}.zen .zen-warnBackground{background-color:#ffffdc}.zen .zen-confirmBackground{background-color:#edfff1}.zen .zen-infoBackground{background-color:#f5fcff}.zen .zen-faqBackground{background:-moz-linear-gradient(top,#fff7c1,#fff 60px);background:-webkit-linear-gradient(top,#fff7c1,#fff 60px);background:-ms-linear-gradient(top,#fff7c1,#fff 60px)}.zen .zen-innerBackground{background-color:#fff}.zen .zen-header .zen-boxHeading{font-size:1.167em}.zen .zen-pageBoxHeader{border-bottom:1px solid #fff;-moz-box-shadow:inset 0 -1px 0 #dbdbdb;-webkit-box-shadow:inset 0 -1px 0 #dbdbdb;box-shadow:inset 0 -1px 0 #dbdbdb}.zen .zen-stepsHeader{background-color:#fff9d6;border-bottom:1px solid #dbdbdb}.zen .zen-stepsHeader .zen-boxHeading{font-size:1.083em}.zen .zen-importHeader{background-color:#7b80b9;border-bottom:1px solid #767cB6}.zen .zen-importHeader .zen-boxHeading{color:#fff;font-size:1.083em}.zen .zen-chartHeader{background-color:#dcdcdc}.zen .zen-chartHeader .zen-boxHeading{color:#30519d;font-size:1.083em}.zen .zen-popHeader{background-color:#ebeeef;background:-moz-linear-gradient(top,#fdfdfd 0,#ebeeef 100%);background:-webkit-linear-gradient(top,#fdfdfd 0,#ebeeef 100%);background:-ms-linear-gradient(top,#fdfdfd 0,#ebeeef 100%)}.zen .simpleHeader{color:#000;font-weight:bold;font-size:1em}.zen .zen-simpleHeader .zen-boxHeading{font-size:1em}.zen .zen-themed .zen-boxHeading{font-size:1.167em}.zen .zen-emphasisHeader .zen-boxHeading{font-size:1.3em;color:000;font-weight:bold}.zen .zen-pageBoxFooter{border-top:1px solid #dbdbdb;-moz-box-shadow:inset 0 1px 0 #fff;-webkit-box-shadow:inset 0 1px 0 #fff;box-shadow:inset 0 1px 0 #fff}.zen .zen-quickHeader .zen-boxHeading{color:#fff;font-size:1em}.zen .zen-quick .zen-header,.zen .zen-quick .zen-body{padding:0 9px;-moz-border-radius:7px;border-radius:7px;background-color:#1797c0}.zen .zen-quick .zen-body{background-color:#cfeef8;margin-top:3px}.overlayDialog .zen-boxHeading{margin:0}.zen .zen-message{border:1px solid #000;background-color:#E2E2E2;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;-moz-box-shadow:inset 0 3px 0 -2px #FFF;-webkit-box-shadow:inset 0 3px 0 -2px #FFF;box-shadow:inset 0 3px 0 -2px #FFF}.zen .zen-alert{border-color:#F2A199;background-color:#FDEDEA}.zen .zen-warn{border-color:#F8E38E;background-color:#FFFFDC}.zen .zen-confirm{border-color:#9BEBB3;background-color:#EDFFF1}.zen .zen-info{border-color:#BEE6FF;background-color:#F5FCFF}.zen .zen-toggle .zen-body{display:none}.zen .zen-toggleOpen .zen-body{display:block}.zen .zen-toggleArrow{float:left;display:block;width:0;height:0;border-style:solid;margin-right:10px;margin-top:2px}.zen .zen-toggleOpen .zen-toggleArrow{margin-top:4px}.zen .zen-toggleArrow{border-width:5px;border-right-width:0;border-color:transparent;border-left-color:#464646}.zen .open .zen-toggleArrow{border-width:5px 5px 0 5px;border-color:#464646 transparent transparent}.zen .zen-toggle{border-top:3px solid #1797c0}.zen .zen-toggleShowAll{border-top:0}.zen .zen-toggleShowAll .zen-header{border-bottom:1px solid gray}.zen .zen-tabs .zen-header{z-index:5;padding:0;position:relative;overflow:visible}.zen .zen-tabs .zen-header:after{content:""}.zen .zen-tabs .zen-header ul{padding:0 5px;margin:0}.zen .zen-tabs .zen-header li{float:left}.zen .zen-tabs .zen-body{position:relative;z-index:4;display:block}.zen .zen-tabControl a{display:inline-block;padding:7px 10px 3px 10px}.zen .zen-tabControl .zen-current{z-index:1;position:relative;top:4px}.zen .zen-tabControl .zen-current a{cursor:default}.zen .zen-tabs .zen-tabBody li{display:none}.zen .zen-tabs .zen-tabBody li li{display:block}.zen .zen-tabs .zen-tabBody .zen-current{display:block}.zen .zen-simpleTabs .zen-tabControl .zen-current{top:2px}.zen .zen-tabs a{font-weight:normal;color:#333}.zen .zen-tabs .zen-body{border:1px solid #eaeaea;-moz-border-radius:4px;border-radius:4px;border-top-width:3px;border-top-color:#1797c0;background-color:#f8f8f8}.zen .zen-tabControl a{text-decoration:none}.zen .zen-tabControl li{border:1px solid #e0e0e0;border-bottom:0;background-color:#efefef;-moz-border-radius-topleft:7px;-moz-border-radius-topright:7px;border-top-left-radius:7px;border-top-right-radius:7px;-moz-box-shadow:inset 0 0 2px #f6f6f6;-webkit-box-shadow:inset 0 0 2px #f6f6f6;box-shadow:inset 0 0 2px #f6f6f6}.zen .zen-tabControl .zen-current{background-color:#f7f7f7;-moz-box-shadow:2px -2px 2px #c8c8c8,-2px -2px 2px #c8c8c8,inset 0 3px 5px #e0e0e0;-webkit-box-shadow:2px -2px 2px #c8c8c8,-2px -2px 2px #c8c8c8,inset 0 3px 5px #e0e0e0;box-shadow:2px -2px 2px #c8c8c8,-2px -2px 2px #c8c8c8,inset 0 3px 5px #e0e0e0;border-width:0}.zen .zen-tabs .zen-header li:hover{background-color:#fff}.zen .zen-tabs .zen-header .zen-current:hover{background-color:#efefef}.zen .zen-simpleTabs .zen-body{border-top:1px solid #eaeaea}.zen .zen-callout{margin:5px;position:relative}.zen .zen-callout .zen-arrow{position:absolute;background-repeat:no-repeat}.zen .zen-callout .zen-inner{-moz-border-radius:5px;border-radius:5px;overflow:hidden}.zen .zen-sideNorth{margin-top:20px}.zen .zen-sideEast{margin-right:16px}.zen .zen-sideSouth{margin-bottom:16px}.zen .zen-sideWest{margin-left:16px}.zen .zen-sideNorth .zen-arrow,.zen .zen-sideSouth .zen-arrow{width:25px;height:16px}.zen .zen-sideEast .zen-arrow,.zen .zen-sideWest .zen-arrow{width:16px;height:25px}.zen .zen-sideNorth .zen-arrow{background-position:1px -91px;top:-14px}.zen .zen-sideEast .zen-arrow{background-position:1px -28px;right:-13px}.zen .zen-sideSouth .zen-arrow{background-position:2px -60px;bottom:-14px}.zen .zen-sideWest .zen-arrow{background-position:-2px 1px;left:-13px}.zen .zen-arrowLeft .zen-arrow{left:15px}.zen .zen-arrowCenter .zen-arrow{left:50%;margin-left:-13px}.zen .zen-arrowRight .zen-arrow{right:15px}.zen .zen-arrowTop .zen-arrow{top:15px}.zen .zen-arrowMiddle .zen-arrow{top:50%;margin-top:-13px}.zen .zen-arrowBottom .zen-arrow{bottom:15px}.zen .zen-callout{border:1px solid #c1C1C1;background-color:#fff;-moz-border-radius:5px;border-radius:5px;-moz-box-shadow:0 2px 5px #a0a6ab;-webkit-box-shadow:0 2px 5px #a0a6ab;box-shadow:0 2px 5px #a0a6ab}.zen .zen-callout .zen-arrow{background-image:url(/img/sprites/callout_arrows.png)}.zen .zen-hasActionsInHead .zen-header,.zen .zen-hasActionsInFoot .zen-footer{background-color:#e9eaea}.zen .zen-hasActionsInHead .zen-arrow{background-position:1px -119px}.zen .zen-hasActionsInFoot .zen-arrow{background-position:1px -148px}.zen .zen-guidedTour .zen-arrow{background-image:url(/img/sprites/callout_arrows_guided_tours.png)}.zen .zen-guidedTour .zen-inner{border:2px solid #fff;background-color:#fedF95}.zen .zen-callout .chatterHover{min-width:272px;padding:10px}.zen .zen-callout .chatterHover .zen-mediaBody{width:auto;max-width:191px}.zen .zen-callout .chatterHover .name{font-size:1.2em;color:#015ba7}.zen .zen-media:after,.zen .zen-mediaBody:after{clear:both;display:block;visibility:hidden;overflow:hidden;height:0 !important;line-height:0;content:"."}.zen .zen-mediaBody{display:table-cell;width:1000em}.zen .zen-img{float:left;background-repeat:no-repeat;margin-right:10px}.zen .zen-img img{display:block}.zen .zen-imgExt{float:right;margin-left:10px}.zen .zen-mediaExt{white-space:nowrap}.zen .zen-mediaExt,.zen .zen-mediaExt .zen-img,.zen .zen-mediaExt img,.zen .zen-mediaExt .zen-imgExt,.zen .zen-mediaExt .zen-mediaBody{display:inline;display:inline-block;vertical-align:middle;width:auto}.zen .zen-mediaExt:after,.zen .zen-mediaExt .zen-mediaBody:after{content:""}.zen .zen-mediaExt .zen-img{margin:0;margin-right:5px;float:none}.zen .zen-mediaExt .zen-imgExt{margin:0;margin-left:5px;float:none}.zen .zen-mediaExt a,.zen .zen-mediaExt img{vertical-align:middle;display:inline}.zen .zen-label,.zen .zen-form label{color:#4a4a56;font-size:.917em;font-weight:bold}.zen .zen-form label,.zen .zen-form .zen-label{width:200px;display:inline-block;text-align:right;vertical-align:middle;margin-top:5px;margin-right:20px;float:left;clear:left}.zen .zen-form:before,.zen .zen-form:after{content:"";display:table}.zen .zen-form:after{clear:both}.zen .zen-labelSmall label,.zen .zen-labelSmall .zen-label{width:65px}.zen .zen-labelMedium label,.zen .zen-labelMedium .zen-label{width:120px}.zen .zen-labelLarge label,.zen .zen-labelLarge .zen-label{width:280px}.zen .zen-inlineForm .zen-label,.zen .zen-inlineForm label{width:auto;margin-right:5px}.zen .zen-skinnyForm .zen-label,.zen .zen-skinnyForm label{width:auto;display:block;text-align:left;float:none;margin-bottom:2px}.zen .zen-skinnyForm .zen-help{margin-left:5px}.zen .zen-formBody{display:inline-block}.zen .zen-input{box-sizing:border-box;padding:3px;margin:1px 0}.zen .zen-inputTiny{width:30px}.zen .zen-inputSmall{width:150px}.zen .zen-inputMedium{width:250px}.zen .zen-inputLarge{width:350px}.zen .zen-inputFull{width:100%}.zen .zen-form textarea{vertical-align:top;padding:4px;box-sizing:border-box}.zen .zen-form .zen-input,.zen .zen-form textarea{-moz-border-radius:4px;-webkit-border-radius:4px;border-radius:4px;-moz-box-shadow:inset 0 1px 0 #c3c3c3;-webkit-box-shadow:inset 0 1px 0 #c3c3c3;box-shadow:inset 0 1px 0 #c3c3c3;border:1px solid gray;border-color:#7c7c7c #c3c3c3 #ddd}.zen .zen-form .zen-requiredMark{color:#C00;padding-right:1px}.zen .zen-help{margin-top:3px;clear:left;color:#767676}.zen .zen-errorMessage{color:#d74c3b;margin-top:3px}.zen .zen-formFieldInfo{vertical-align:top;margin-top:4px}.zen .zen-formFieldAction{margin:4px;position:relative}.zen .zen-formFieldAction img{vertical-align:middle}.zen .zen-formFieldAction:active{bottom:-1px}.zen .zen-checkGroup label{float:none;width:auto;text-align:left;margin-top:0;font-weight:normal}.zen .zen-checkGroup>ul{margin-top:0;margin-bottom:0}.zen .zen-progress{display:inline-block;-moz-border-radius:7px;-webkit-border-radius:7px;border-radius:7px;background-color:#ccc;-moz-box-shadow:inset 1px 1px 3px #8d8d8d;-webkit-box-shadow:inset 1px 1px 3px #8d8d8d;box-shadow:inset 1px 1px 3px #8d8d8d;width:50px}.zen .zen-value{display:inline-block;-moz-border-radius:7px;-webkit-border-radius:7px;border-radius:7px;-moz-box-shadow:inset 1px 1px 3px #8d8d8d;-webkit-box-shadow:inset 1px 1px 3px #8d8d8d;box-shadow:inset 1px 1px 3px #8d8d8d;visibility:hidden}.zen .zen-valueNotOk{width:25%;background-color:#c33929;visibility:visible}.zen .zen-valueOk{width:50%;background-color:#f8c933;visibility:visible}.zen .zen-valueStrong{width:100%;background-color:#74c205;visibility:visible}.zen .zen-field{margin:10px 0}.zen .zen-fieldSmall{margin:5px 0}.zen .zen-fieldMedium{margin:16px 0}.zen .zen-fieldLarge{margin:22px 0}.zen .zen-select{width:200px;position:relative;margin:0 10px;z-index:99}.zen .zen-select .zen-trigger{text-align:left;display:block}.zen .zen-select .zen-selectArrow{float:right;display:block;width:0;height:0;margin-top:5px}.zen .zen-options{position:absolute;top:100%;left:3px;margin:0;display:none;overflow:hidden}.zen .zen-open .zen-options{display:block}.zen .zen-options a{display:block;padding:3px}.zen .zen-select .zen-selectArrow{border-style:solid;border-width:5px 4px 0;border-color:#fff transparent transparent}.zen .zen-options{border:1px solid #4997bf;background-color :#fff;-moz-box-shadow:0 0 4px #b1b2b4;-webkit-box-shadow:0 0 4px #b1b2b4;box-shadow:0 0 4px #b1b2b4;width:192px}.zen .zen-select.zen-open{z-index:100}.zen .zen-open .zen-options{display:block}.zen .zen-options a{color:#000;text-decoration:none}.zen .zen-options a:hover,.zen .zen-options a:focus{color:#015ba7;background-color:#e3f3ff;text-decoration:none;outline:none}.zen .zen-options .zen-disabled{color:#c2c2c2}.zen h1 strong,.zen .h1 strong{display:block;padding-left:1px}.zen .zen-inlineHeading{margin:0;display:inline-block}.zen h1,.zen h2,.zen h3,.zen h4,.zen h5,.zen h6,.zen .zen-h1,.zen .zen-h2,.zen .zen-h3,.zen .zen-h4,.zen .zen-h5,.zen .zen-h6{font-weight:bold}.zen h1,.zen .zen-h1{font-size:1.833em;font-weight:normal}.zen h1 strong,.zen .zen-h1 strong{font-size:.5em;font-weight:bold;margin-bottom:-3px}.zen h2,.zen .zen-h2{font-size:1.667em}.zen h3,.zen .zen-h3{font-size:1.5em}.zen h4,.zen .zen-h4{font-size:1.333em}.zen h5,.zen .zen-h5{font-size:1.167em}.zen h6,.zen .zen-h6{font-size:1em}.zen h1,.zen h2,.zen h3,.zen h4,.zen h5,.zen h6,.zen dl,.zen p,.zen blockquote,.zen .zen-box,.zen pre{margin:10px 0}.zen .zen-header h1,.zen .zen-header h2,.zen .zen-header h3,.zen .zen-header h4,.zen .zen-header h5,.zen .zen-header h6{margin:5px 0}.zen h1,.zen h2,.zen h3,.zen h4,.zen h5,.zen h6,.zen img{padding-bottom:0}.zen table h1,.zen table h2,.zen table h3,.zen table h4,.zen table h5,.zen table h6,.zen table p,.zen table ul,.zen table ol,.zen table dl{padding:0}.zen .zen-header,.zen .zen-body,.zen .zen-footer,.zen .zen-intro{padding:0 7px}.zen .zen-ptn,.zen .zen-pvn,.zen .zen-pan{padding-top:0 !important}.zen .zen-pts,.zen .zen-pvs,.zen .zen-pas{padding-top:5px !important}.zen .zen-ptm,.zen .zen-pvm,.zen .zen-pam{padding-top:10px !important}.zen .zen-ptl,.zen .zen-pvl,.zen .zen-pal{padding-top:20px !important}.zen .zen-prn,.zen .zen-phn,.zen .zen-pan{padding-right:0 !important}.zen .zen-prs,.zen .zen-phs,.zen .zen-pas{padding-right:5px !important}.zen .zen-prm,.zen .zen-phm,.zen .zen-pam{padding-right:10px !important}.zen .zen-prl,.zen .zen-phl,.zen .zen-pal{padding-right:20px !important}.zen .zen-pbn,.zen .zen-pvn,.zen .zen-pan{padding-bottom:0 !important}.zen .zen-pbs,.zen .zen-pvs,.zen .zen-pas{padding-bottom:5px !important}.zen .zen-pbm,.zen .zen-pvm,.zen .zen-pam{padding-bottom:10px !important}.zen .zen-pbl,.zen .zen-pvl,.zen .zen-pal{padding-bottom:20px !important}.zen .zen-pln,.zen .zen-phn,.zen .zen-pan{padding-left:0 !important}.zen .zen-pls,.zen .zen-phs,.zen .zen-pas{padding-left:5px !important}.zen .zen-plm,.zen .zen-phm,.zen .zen-pam{padding-left:10px !important}.zen .zen-pll,.zen .zen-phl,.zen .zen-pal{padding-left:20px !important}.zen .zen-mtn,.zen .zen-mvn,.zen .zen-man{margin-top:0 !important}.zen .zen-mts,.zen .zen-mvs,.zen .zen-mas{margin-top:5px !important}.zen .zen-mtm,.zen .zen-mvm,.zen .zen-mam{margin-top:10px !important}.zen .zen-mtl,.zen .zen-mvl,.zen .zen-mal{margin-top:20px !important}.zen .zen-mrn,.zen .zen-mhn,.zen .zen-man{margin-right:0 !important}.zen .zen-mrs,.zen .zen-mhs,.zen .zen-mas{margin-right:5px !important}.zen .zen-mrm,.zen .zen-mhm,.zen .zen-mam{margin-right:10px !important}.zen .zen-mrl,.zen .zen-mhl,.zen .zen-mal{margin-right:20px !important}.zen .zen-mbn,.zen .zen-mvn,.zen .zen-man{margin-bottom:0 !important}.zen .zen-mbs,.zen .zen-mvs,.zen .zen-mas{margin-bottom:5px !important}.zen .zen-mbm,.zen .zen-mvm,.zen .zen-mam{margin-bottom:10px !important}.zen .zen-mbl,.zen .zen-mvl,.zen .zen-mal{margin-bottom:20px !important}.zen .zen-mln,.zen .zen-mhn,.zen .zen-man{margin-left:0 !important}.zen .zen-mls,.zen .zen-mhs,.zen .zen-mas{margin-left:5px !important}.zen .zen-mlm,.zen .zen-mhm,.zen .zen-mam{margin-left:10px !important}.zen .zen-mll,.zen .zen-mhl,.zen .zen-mal{margin-left:20px !important}.zen .zen-lowlight{}.zen .zen-midlight{font-weight:bold}.zen .zen-highlight{}.zen .zen-healthyPlanet{color:#360}.zen .zen-goToRecord{color:#222;font-weight:normal;text-decoration:underline}a.zen-goToRecord:hover{color:#2861a1}.zen strong{font-weight:bold}.zen em{font-style:italic}.zen .zen-date{color:gray;font-size:.917em}.zen .zen-note{color:gray;font-style:italic}.zen .zen-legal{font-size:.917em}.zen .zen-deemphasize{font-size:.917em}.zen .zen-list{margin:10px 0}.zen .zen-list li{padding:.2em 0}.zen .zen-inlineList li{display:inline-block;padding-right:.5em;vertical-align:top}.zen .zen-inlineListExt li{display:inline}.zen .zen-inlineListExt>li:after{content:"\2022";padding:0;padding-right:4px;padding-left:6px}.zen .zen-inlineListExt li:last-child:after{content:""}.zen .zen-commentList ul{clear:both}.zen .zen-commentList li{padding:4px}.zen .zen-commentList .zen-arrowUp{float:left;display:block;width:0;height:0;margin-left:10px}.zen .zen-breadcrumbList{padding:2px 0 0;font-size:.917em;display:inline-block}.zen .zen-breadcrumbList li{display:inline-block}.zen .zen-breadcrumbList li:before{content:"\003E";display:inline-block;padding:0;padding-right:7px;padding-left:4px}.zen .zen-breadcrumbList li:first-child:before{content:"";padding:0}.zen .zen-checkList li{margin:5px 0;padding-left:2em}.zen .zen-subcheckList{padding-left:3em}.zen .zen-subcheckList li{list-style:disc outside none;background:none;padding-left:0}.zen .zen-subcheckList .zen-done{text-align:left}.zen .zen-numberedList{padding-left:20px}.zen .zen-numberedList li{list-style:decimal outside;margin:3px 0}.zen .zen-bulletedList{padding-left:20px}.zen .zen-bulletedList li{list-style:disc outside;margin:3px 0}.zen .zen-ideaList ul{margin:4px}.zen .zen-ideaList li{padding:15px;padding-left:3px}.zen .zen-pipedList li{box-sizing:border-box;display:inline-block;padding:0 5px}.zen .zen-pipedList:before,.zen .zen-pipedList:after{content:"";display:table}.zen .zen-pipedList:after{clear:both}.zen .zen-pipedList .zen-img,.zen .zen-pipedList .zen-imgExt{float:none}.zen .zen-pipedList .zen-lastItem{position:relative;top:-1px}.zen .zen-detailList{overflow:auto}.zen .zen-detailList dt{padding-top:.3em;color:#4a4a56;font-weight:bold;font-size:.917em;width:200px;float:left;clear:left;padding-right:20px;text-align:right}.zen .zen-detailList dd{padding-top:.3em}.zen .zen-labelSmall dt{width:65px}.zen .zen-labelMedium dt{width:120px}.zen .zen-labelLarge dt{width:280px}.zen .zen-detailListExt dd{border-bottom:1px solid #ececec}.zen .zen-detailListExt dd,.zen .zen-detailListExt dt{padding-top:5px;padding-bottom:5px}.zen .zen-listSmall li{margin:5px 0}.zen .zen-listSmall dt,.zen .zen-listSmall dd{padding-top:5px;padding-bottom:5px}.zen .zen-listMedium li{margin:10px 0}.zen .zen-listMedium dt,.zen .zen-listMedium dd{padding-top:10px;padding-bottom:10px}.zen .zen-listLarge li{margin:20px 0}.zen .zen-listLarge dt,.zen .zen-listLarge dd{padding-top:20px;padding-bottom:20px}#rcCatcher{padding:1px;margin:1px;display:none !important;width:0 !important;height:0 !important}#rcCatcher{margin:3px}#rcCatcher{padding:2px}.zen .zen-commentList>ul{border-top:1px solid #dee5ea}.zen .zen-commentList>ul>li{border-top:1px solid #FFF;border-bottom:1px solid #dee5ea;background-color:#eff7fa;padding:5px;margin:0}.zen .zen-commentList .zen-arrowUp{padding-top:5px;border-style:solid;border-width:0 5px 5px 5px;border-color:transparent transparent #dee5ea}.zen .zen-breadcrumbList a{color:#797979}.zen .zen-checkList li{background:url(/img/oocss/dot.png) no-repeat}.zen .zen-checkList .zen-done{background-image:url(/img/chatter/wtdn_checked.png)}.zen .zen-subcheckList{color:#7d7d84}.zen .zen-subcheckList .zen-done{text-decoration:line-through;background:none}.zen .zen-subcheckList .zen-done a{color:#7d7d84}.zen .zen-ideaList li{border-bottom:1px solid #e9eaea}.zen .zen-ideaList li:last-child{border-bottom:0}.zen .zen-pipedList li{border-left:1px solid #7d7d84}.zen .zen-pipedList li:first-child,.zen .zen-pipedList .zen-firstItem{border-left:0}.zen .zen-hoverList li:hover,.zen .zen-hoverList li:focus{background-color:#e3f3ff}.zen .zen-hoverList a,.zen .zen-hoverList a:link{color:#000;text-decoration:none}.zen .zen-hoverList a:hover{color:#015ba7}.zen .zen-chatterList{margin-top:12px;margin-bottom:12px}.zen .zen-chatterList li{padding:4px}.zen .zen-chatterList .zen-chatterActive{background-color:#c4e7f2;-moz-border-top-left-radius:5px;-moz-border-bottom-left-radius:5px;border-top-left-radius:5px;border-bottom-left-radius:5px}.zen .zen-chatterFeedList>li{border-bottom:1px solid #e9eaea;padding-bottom:9px;padding-top:9px}.zen hr{height:0;border:0;margin:5px 0}.zen .zen-divider{border-top:1px dotted #d9d9d9}.zen .zen-dividerStrong{border-top:2px solid #000}.zen .zen-data{position:relative;zoom:1;text-align:left}.zen .zen-data table{width:100%}.zen .zen-data tr{vertical-align:top}.zen .zen-textCenter,.zen table .zen-textCenter,.zen table tr .zen-textCenter{text-align:center}.zen .zen-textLeft,.zen table .zen-textLeft,.zen table tr .zen-textLeft{text-align:left}.zen .zen-textRight,.zen table .zen-textRight,.zen table tr .zen-textRight{text-align:right}.zen .zen-textTop,.zen table .zen-textTop,.zen table tr .zen-textTop{vertical-align:top}.zen .zen-textBottom,.zen table .zen-textBottom,.zen table tr .zen-textBottom{vertical-align:bottom}.zen .zen-textMiddle,.zen table .zen-textMiddle,.zen table tr .zen-textMiddle{vertical-align:middle}.zen .zen-data th,.zen .zen-data td{padding:4px 7px}.zen .zen-data thead th,.zen .zen-data thead td{white-space:nowrap}.zen .zen-columnSort th,.zen .zen-columnSort td{border:1px solid #F2F3F3;border-top-width:0;border-left-width:0}.zen .zen-columnSort table{background-color:#fff;border:1px solid #c9dce2;border-right-width:0;border-bottom-width:0;border-top:3px solid #1797c0;-moz-border-radius:4px;border-radius:4px;border-collapse:separate}.zen .zen-themed .zen-inner .zen-columnSort table{border-top:1px solid #F2F3F3}.zen .zen-columnSort thead tr{background:#F2F3F3}.zen .zen-columnSort th.zen-sortable:hover{background:#E6EAEA;color:#015ba7}.zen .zen-columnSort .zen-sorted{background-color:#E0E3E6}.zen .zen-columnSort .zen-sorted:after{background-color:#E0E3E6;-moz-border-radius:7px;border-radius:7px;padding:1px 4px 2px;display:inline-block;margin-left:5px}.zen .zen-columnSort .zen-ascending:after{content:"\2191"}.zen .zen-columnSort .zen-descending:after{content:"\2193";color:#222}.zen .zen-columnSort thead .zen-selected{display:block;border:1px solid #55C8ed;-moz-border-radius:3px;border-radius:3px;background-color:#E0E3E6;color:#015ba7;margin:1px;margin-right:0}.zen .zen-columnSort tfoot tr{background:#fefefe;background:-moz-linear-gradient(top,#fefefe 0,#f6f5f5 100%);background:-webkit-linear-gradient(top,#fefefe 0,#f6f5f5 100%);background:-ms-linear-gradient(top,#fefefe 0,#f6f5f5 100%)}.zen .zen-columnSort tfoot td{border-right:0}.zen .zen-columnSort tfoot td:last-child{border-right:1px solid #c9dce2}.zen .zen-columnSort table :first-child tr:first-child th:first-child,.zen .zen-columnSort table :first-child tr:first-child td:first-child{-moz-border-radius-topleft:4px;border-top-left-radius:4px}.zen .zen-columnSort table :first-child tr:first-child th:last-child,.zen .zen-columnSort table :first-child tr:first-child td:last-child{-moz-border-radius-topright:4px;border-top-right-radius:4px}.zen .zen-columnSort table :last-child tr:last-child th:first-child,.zen .zen-columnSort table :last-child tr:last-child td:first-child{-moz-border-radius-bottomleft:4px;border-bottom-left-radius:4px}.zen .zen-columnSort table :last-child tr:last-child th:last-child,.zen .zen-columnSort table :last-child tr:last-child td:last-child{-moz-border-radius-bottomright:4px;border-bottom-right-radius:4px}.zen .zen-detailTable th{text-align:right;font-weight:bold;width:33%;padding:5px 10px 5px 2px}.zen .zen-detailTable td{padding:5px 2px 5px 10px}.zen .zen-detailTable tr{border-bottom:1px solid #ececec}.zen .zen-detailTable tr:last-child{border-bottom:0}.zen .zen-btn{overflow:visible;cursor:pointer;display:inline-block;position:relative;padding:2px 3px;margin:1px}.zen .zen-btn:active{bottom:-1px}.zen .zen-closeBtn{height:16px;line-height:16px;width:16px;display:block;text-align:center;padding:0;margin:0}.zen .zen-btn.zen-disabledBtn,.zen .zen-btn[disabled]{bottom:0}.zen .zen-btn{padding:3px 6px}.zen .zen-closeBtn{padding:0;margin:0}.zen .zen-btn{color:#222;border:1px solid #c3c3c3;border-color:#c3c3c3 #aaa #909090;font-size:.917em;font-weight:bold;text-decoration:none;-moz-border-radius:3px;border-radius:3px;background:#f0f0f0;background:-moz-linear-gradient(#fff,#f0f0f0);background:-webkit-linear-gradient(#fff,#f0f0f0);background:-ms-linear-gradient(#fff,#f0f0f0)}.zen .zen-btn:hover,.zen .zen-btn:focus{background:#e4f5ff;background:-moz-linear-gradient(#fff,#e4f5ff 60%);background:-webkit-linear-gradient(#fff,#e4f5ff 60%);background:-ms-linear-gradient(#fff,#e4f5ff 60%)}.zen .zen-btn:active{border-color:#6a6a6a #888 #a5a5a5;background:#cbcbcb;background:-moz-linear-gradient(#cbcbcb,#e5e5e5 10%,#f8f8f8);background:-webkit-linear-gradient(#cbcbcb,#e5e5e5 10%,#f8f8f8);background:-ms-linear-gradient(#cbcbcb,#e5e5e5 10%,#f8f8f8)}.zen .zen-primaryBtn{background:#eaf9ff;background:-moz-linear-gradient(top,#eaf9ff 0,#ccedfb 68%,#bee9f8 100%);background:-webkit-linear-gradient(top,#eaf9ff 0,#ccedfb 68%,#bee9f8 100%);background:-ms-linear-gradient(top,#eaf9ff 0,#ccedfb 68%,#bee9f8 100%)}.zen .zen-primaryBtn:hover,.zen .zen-primaryBtn:focus{background:#d3f2fd;background:-moz-linear-gradient(top,#f9fdff 0,#d3f2fd 100%);background:-webkit-linear-gradient(top,#f9fdff 0,#d3f2fd 100%);background:-ms-linear-gradient(top,#f9fdff 0,#d3f2fd 100%)}.zen .zen-primaryBtn:active{background:#bee7f6}.zen .zen-promoBtn{color:#fff;padding:5px 7px;font-size:1em;border:2px solid #fff;-moz-border-radius:7px;border-radius:7px;-moz-box-shadow:0 1px 3px 1px rgba(0,0,0,.15);-webkit-box-shadow:0 1px 3px 1px rgba(0,0,0,.15);box-shadow:0 1px 3px 1px rgba(0,0,0,.15);background:#6bc7e4;background:-moz-linear-gradient(#6bc7e4,#0599cc 65%);background:-webkit-linear-gradient(#6bc7e4,#0599cc 65%);background:-ms-linear-gradient(#6bc7e4,#0599cc 65%)}.zen .zen-promoBtn:hover,.zen .zen-promoBtn:focus,.zen .zen-promoBtn:active{background:#1b99c3;border-color:#fff}.zen .zen-closeBtn{color:#707474;border:0;background:#f6f7f7;font-size:1em;font-family:Verdana,Arial,Helvetica,sans-serif;-moz-border-radius:4px;border-radius:4px;-moz-box-shadow:inset 0 1px 0 0 #e4e4e4;-webkit-box-shadow:inset 0 1px 0 0 #e4e4e4;box-shadow:inset 0 1px 0 0 #e4e4e4}.zen .zen-highlightBtn{font-family:Arial;font-size:1.08em;background-color:#8ab529;border:1px solid #6c8049;background-image:-ms-linear-gradient(top,#8AB529 0,#87AC31 100%);background-image:-moz-linear-gradient(top,#8AB529 0,#87AC31 100%);background-image:-webkit-linear-gradient(top,#8AB529 0,#87AC31 100%);background-image:linear-gradient(top,#8AB529 0,#87AC31 100%);display:inline-block;padding-top:0;padding-bottom:1px;padding-left:10px;padding-right:10px;height:30px;color:#fff;-moz-border-radius:3px;border-radius:2px;-moz-box-shadow:0 1px 2px 0 #adadad;-webkit-box-shadow:0 1px 2px 0 #adadad;box-shadow:0 1px 2px 0 #adadad;margin:0}.zen .zen-btn.zen-highlightBtn:hover,.zen .zen-btn.zen-highlightBtn.onHover{background-color:#a0cb3d;background-image:-ms-linear-gradient(top,#a5cd48 0,#97bf3a 100%);background-image:-moz-linear-gradient(top,#a5cd48 0,#97bf3a 100%);background-image:-webkit-linear-gradient(top,#a5cd48 0,#97bf3a 100%);background-image:linear-gradient(top,#a5cd48 0,#97bf3a 100%)}.zen .zen-highlightBtn:active{background-color:#769b24;background-image:-ms-linear-gradient(top,#7ba229 0,#8ab237 100%);background-image:-moz-linear-gradient(top,#7ba229 0,#8ab237 100%);background-image:-webkit-linear-gradient(top,#7ba229 0,#8ab237 100%);background-image:linear-gradient(top,#7ba229 0,#8ab237 100%)}.zen .zen-highlightBtn:focus{background-color:#8AB529;background-image:-ms-linear-gradient(top,#8AB529 0,#87AC31 100%);background-image:-moz-linear-gradient(top,#8AB529 0,#87AC31 100%);background-image:-webkit-linear-gradient(top,#8AB529 0,#87AC31 100%);background-image:linear-gradient(top,#8AB529 0,#87AC31 100%)}.zen .zen-btn.zen-highlightBtn[disabled]{background:#dcdfe0;color:#fff;border:1px solid #c7ccce;-moz-box-shadow:none;-webkit-box-shadow:none;box-shadow:none}.zen .zen-closeBtn:hover,.zen .zen-closeBtn:focus{color:#015ba7;background:#e3f3ff;-moz-box-shadow:inset 0 1px 0 0 #d2d2d2;-webkit-box-shadow:inset 0 1px 0 0 #d2d2d2;box-shadow:inset 0 1px 0 0 #d2d2d2}.zen .zen-closeBtn:active{background:#dadfdf;-moz-box-shadow:inset 0 1px 0 0 #c7c7c7;-webkit-box-shadow:inset 0 1px 0 0 #c7c7c7;box-shadow:inset 0 1px 0 0 #c7c7c7}.zen .zen-btn[disabled],.zen .zen-btn.zen-disabledBtn{cursor:default;color:#c2c2c2;border-color:#e2e2e2;background:#fafafa}.zen .zen-promoBtn[disabled],.zen .zen-promoBtn.zen-disabledBtn{color:#fff;border-color:#fff;background:#e9e8e8}.zen .zen-closeBtn[disabled],.zen .zen-closeBtn.zen-disabledBtn{color:#bcbcbc;background:#f0f1f1}.zen .zen-promoBtn,.zen .zen-promoBtn:hover,.zen .zen-promoBtn:focus,.zen .zen-promoBtn:active{padding:5px 14px}.zen .zen-tooltip{position:relative}.zen .zen-tooltipBox{display:inline-block;position:relative}.zen .zen-tooltip .zen-tooltipBox{display:none;position:absolute}.zen .zen-tooltip:focus .zen-tooltipBox{display:inline-block;padding:6px;width:200px}.zen .zen-tooltip:hover .zen-tooltipBox{display:inline-block;padding:6px;width:200px}.zen .zen-tooltip .zen-tooltipBox.zen-tooltipTop{bottom:1.4em;left:0}.zen .zen-tooltip .zen-tooltipBox.tooltipBottom{top:1.4em;left:0}.zen.zen-popup{background:0}.zen body.zen-popupBody{overflow:hidden}.zen .zen-popupOverlay{position:fixed;top:0;left:0;z-index:100;width:100%;height:100%;background-color:hsla(0,0%,0%,.75)}.zen .zen-centerPopup{position:absolute;top:40%;left:35%;width:400px}.zen .zen-cropMe,.zen .zen-cropH{overflow-x:hidden !important}.zen .zen-cropMe,.zen .zen-cropV{overflow-y:hidden !important}.zen .zen-cropEllipsis{overflow:hidden;text-overflow:ellipsis;-moz-binding:url(/sync/ellipsis.xml#ellipsis)}.zen .zen-assistiveText{position:absolute !important;height:1px;width:1px;overflow:hidden;clip:rect(1px 1px 1px 1px);clip:rect(1px,1px,1px,1px)}.zen .zen-assistiveLink{padding:0 !important;margin:0 !important;height:1px !important;width:1px !important;line-height:0 !important;background-color:transparent !important;overflow:visible !important;text-decoration:none;color:#222}.helpIcon{background-image:url(/img/sprites/master.png);background-position:0 -142px;width:16px;height:16px}.recycleIcon{background-image:url(/img/func_icons/util/recycle.gif);background-position:0 0;width:19px;height:19px}.datePickerIcon{background-image:url(/img/func_icons/util/datePicker16.gif);background-position:0 0;width:16px;height:16px}.escalatedLarge{background-image:url(/img/func_icons/util/escalation16.gif);background-position:0 0;width:16px;height:16px}.printerIcon{background-image:url(/img/func_icons/util/print20.gif);background-position:0 0;width:20px;height:20px}.alertIcon{background-image:url(/img/func_icons/util/alert16.gif);background-position:0 0;width:16px;height:16px}.checkmarkIcon{background-image:url(/img/func_icons/util/checkmark16.gif);background-position:0 0;width:16px;height:16px}.groupEventIcon{background-image:url(/img/group_event.gif);background-position:0 0;width:16px;height:16px}.doubleArrowUp{background-image:url(/img/double_arrow_up.gif);background-position:0 0;width:24px;height:20px}.doubleArrowDwn{background-image:url(/img/double_arrow_dwn.gif);background-position:0 0;width:24px;height:20px}.colorPickerIcon{background-image:url(/img/func_icons/util/colorPicker16.gif);background-position:0 0;width:16px;height:16px}.downArrowIcon{background-image:url(/img/arrow_dwn.gif);background-position:0 0;width:24px;height:20px}.leftArrowIcon{background-image:url(/img/arrow_lt.gif);background-position:0 0;width:24px;height:20px}.rightArrowIcon{background-image:url(/img/arrow_rt.gif);background-position:0 0;width:24px;height:20px}.upArrowIcon{background-image:url(/img/arrow_up.gif);background-position:0 0;width:24px;height:20px}.unresolvedIcon{background-image:url(/img/icon/unresolved16.png);background-position:0 0;width:16px;height:16px}.escalatedLarge{background-image:url(/img/func_icons/util/escalation16.gif);background-position:0 0;width:16px;height:16px}.escalatedSmall{background-image:url(/img/func_icons/util/escalation12.gif);background-position:0 0;width:12px;height:12px}.infoIcon{background-image:url(/img/sprites/master.png);background-position:0 -162px;width:16px;height:16px}.mailCloseIcon{background-image:url(/img/func_icons/util/mailCloseEnv16.gif);background-position:0 0;width:16px;height:16px}.mailOpenIcon{background-image:url(/img/func_icons/util/mailOpenEnv16.gif);background-position:0 0;width:16px;height:16px}.mailFrontIcon{background-image:url(/img/func_icons/util/mailFrontEnv16.gif);background-position:0 0;width:16px;height:16px}.editLayoutIcon{background-image:url(/img/func_icons/util/editLayout20.gif);background-position:0 0;width:20px;height:20px}.alertIcon{background-image:url(/img/func_icons/util/alert16.gif);background-position:0 0;width:16px;height:16px}.checkmarkIcon{background-image:url(/img/func_icons/util/checkmark16.gif);background-position:0 0;width:16px;height:16px}.printerIconOn{background-image:url(/img/func_icons/util/print20.gif);background-position:0 0;width:20px;height:20px;background-position:0 -20px}.printerIconDisabled{background-image:url(/img/func_icons/util/print20.gif);background-position:0 0;width:20px;height:20px;background-position:0 -40px}.removeIcon{background-image:url(/img/func_icons/remove12.gif);background-position:0 0;width:12px;height:12px;background-position:top left}.removeIconOn{background-image:url(/img/func_icons/remove12_on.gif);background-position:0 0;width:12px;height:12px;background-position:top right}.dialogCloseIcon{background-image:url(/img/func_icons/util/dialogClose16.gif);background-position:0 0;width:16px;height:16px;background-position:top left}.dialogCloseIconOn{background-position:top right}.lookupIcon{background-image:url(/img/func_icons/util/lookup20.gif);background-position:0 0;width:20px;height:20px;background-position:top left}.lookupIconOn{background-image:url(/img/func_icons/util/lookup20.gif);background-position:0 0;width:20px;height:20px;background-position:top right}.closeIcon{background-image:url(/img/func_icons/closeSprite16.gif);background-position:0 0;width:16px;height:16px;cursor:pointer;background-position:top left}.closeIconOn{background-image:url(/img/func_icons/closeSprite16.gif);background-position:0 0;width:16px;height:16px;cursor:pointer;background-position:0 -16px}.closeNone{display:none}.searchIcon{background-image:url(/img/func_icons/util/search20.gif);background-position:0 0;width:20px;height:20px;background-position:top left}.searchIconOn{background-image:url(/img/func_icons/util/search20.gif);background-position:0 0;width:20px;height:20px;background-position:top right}.trashIcon{background-image:url(/img/func_icons/util/trash20.gif);background-position:0 0;width:20px;height:20px;background-position:top left}.trashIconOn{background-image:url(/img/func_icons/util/trash20.gif);background-position:0 0;width:20px;height:20px;background-position:top right}.comboboxIcon{background-image:url(/img/func_icons/util/combobox20.gif);background-position:0 0;width:20px;height:20px;background-position:top left}.comboboxIconOn{background-image:url(/img/func_icons/util/combobox20.gif);background-position:0 0;width:20px;height:20px;background-position:top right}.customizePageIcon{background-image:url(/img/func_icons/util/customize20.gif);background-position:0 0;width:20px;height:20px;background-position:top left}.customizePageIconOn{background-image:url(/img/func_icons/util/customize20.gif);background-position:0 0;width:20px;height:20px;background-position:top right}.editLayoutIcon{background-image:url(/img/func_icons/util/editLayout20.gif);background-position:0 0;width:20px;height:20px}.linkIcon{background-image:url(/img/func_icons/util/link20.gif);background-position:0 0;width:20px;height:20px;background-position:top left}.linkIconOn{background-image:url(/img/func_icons/util/link20.gif);background-position:0 0;width:20px;height:20px;background-position:top right}.videoPlay{background-image:url(/img/func_icons/videoPlay.png);background-position:0 0;width:24px;height:24px;background-position:top left}.videoPlayOn{background-image:url(/img/func_icons/videoPlay.png);background-position:0 0;width:24px;height:24px;background-position:top right}
.menuArrow1{background-image:url(/img/dcm/menuArrow_sprite.gif);background-position:0 0;width:16px;height:20px;background-position:0 0}
.menuArrowOn1{background-image:url(/img/dcm/menuArrow_sprite.gif);background-position:0 0;width:16px;height:20px;background-position:0 -20px}
.expanded .menuArrow1{background-image:url(/img/dcm/menuArrow_sprite.gif);background-position:0 0;width:16px;height:20px;background-position:0 -40px}
.expanded .menuArrowOn1{background-image:url(/img/dcm/menuArrow_sprite.gif);background-position:0 0;width:16px;height:20px;background-position:0 -60px}
.rtl .menuArrow1{background-image:url(/img/dcm/menuArrow_sprite.gif);background-position:0 0;width:16px;height:20px;background-position:0 -40px}
.rtl .menuArrowOn1{background-image:url(/img/dcm/menuArrow_sprite.gif);background-position:0 0;width:16px;height:20px;background-position:0 -60px}
.expanded .rtl .menuArrow1{background-image:url(/img/dcm/menuArrow_sprite.gif);background-position:0 0;width:16px;height:20px;background-position:0 0}
.expanded .rtl .menuArrowOn1{background-image:url(/img/dcm/menuArrow_sprite.gif);background-position:0 0;width:16px;height:20px;background-position:0 -20px}
.forceLogo{background-image:url(/img/forceMenuLogo.gif);background-position:0 0;width:91px;height:31px;background-position:0 0}
.forceLogoOn,a#forceLogoLink:focus .forceLogo{background-image:url(/img/forceMenuLogo.gif);background-position:0 0;width:91px;height:31px;background-position:0 -31px}
.helpIcon{background:transparent url(/img/alohaSkin/help_orange.png) no-repeat;vertical-align:bottom}
.infoIcon{background-image:url(/img/alohaSkin/info_sprite.png);background-position:left top;height:15px}
ul, menu, dir {
display: block;
list-style-type: disc;
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
-webkit-padding-start: 40px;
}
</style>


Compoent Controller Code: 

public with sharing class ComponentControllerSlide 
{
    //Hold the page info like page name and controller type and name
    ApexPage apxPg =  null;
    //Hold the page name where this component use
    public String PageName{set;get;}
    //single link which we have to show
    //public String showLink{set;get;}
    
    public String ComponentName{set;get;}
    
  
    
   public List<LinksWrapper> getmyLinks()
    {
        
        String PgName =ApexPages.currentPage().getUrl();
        List<LinksWrapper> local = new List<LinksWrapper>(); 
        String thisReturn ='';
        if(PgName.containsIgnoreCase('/apex/'))
        {
            PgName = PgName.replaceAll('/apex/','');
            for(ApexPage tempIns :[ select  name,Markup,ControllerKey,ControllerType from ApexPage where name =:PgName])
                apxPg = tempIns;
         
            if(apxPg != null)
            {
                if(apxPg.ControllerType =='0')  //it means no controller and standard controller bind
                {   
                    PageName = PgName;
                    local.add(new LinksWrapper('','Not Found Controller',false));
                    
                }
                else if (apxPg.ControllerType =='1') // its mean standard controller included it may be standard obj or custom object
                {
   
                      Map<String, Schema.SObjectType> gd = Schema.getGlobalDescribe();
                      Schema.DescribeSObjectResult r =  gd.get(apxPg.ControllerKey).getDescribe();
                      PageName = r.getLabel();
                      thisReturn= '/'+r.getKeyPrefix()+'/o';
                      local .add(new LinksWrapper('/'+r.getKeyPrefix()+'/o','List Of Record',true));
                      local .add(new LinksWrapper('/'+r.getKeyPrefix()+'/e','Create new Record',true));
                }
                else if (apxPg.ControllerType =='2') // we are using controller 
                {
                    PageName = apxPg.ControllerKey;
                    local.add(new LinksWrapper('/'+apxPg.id,'You are using class',true));
                }
            }
        }
        Map<String ,String> co = new Map<String,String>();
        co = pageInfomation(ComponentName,apxPg.Markup);
        if(co.size()>0)
        {
            for(String x : co.keySet())
            local.add(new LinksWrapper(x,co.get(x),false) ) ;
        }
        return local ;
        
    }
    
    //Wrapper Class contain link n title of url
    public Class LinksWrapper{
        public String UrlLink{set;get;}
        public String LinkTitle{set;get;}
        public Boolean ActiveUrl{set;get;}
        
        public LinksWrapper(String uL,String lt,boolean au)
        {
                UrlLink   = uL; 
                LinkTitle = lt;
                ActiveUrl = au;
        }
    }
    
    public Map<String ,string> pageInfomation (String CompoNames,String pCode){
            Set<String>  compoNameSet = new Set<String>();
            List<String> compoNameList = new List<String>();
            Map<String,String>  compoNameListWithApex = new Map<String,String>();
            String Prefix ='<apex:';
        if(CompoNames !=null && CompoNames!='')
        {
            if(CompoNames.contains(','))
            {
                compoNameList = CompoNames.split(',');
            }else{
                if(CompoNames != null && CompoNames.trim() !='')
                compoNameList.add(CompoNames);
            }
            compoNameSet.addAll(compoNameList);
            for(String s :compoNameSet){
                if(pCode.contains(Prefix+s))
                {
                    Integer x = pcode.countMatches(Prefix+s);
                    compoNameListWithApex.put(s,''+x);
                }
                
            }
            compoNameSet =null;
        }
            return compoNameListWithApex;
        
    }
    
}

try this all thing in your end and see the magic.......

Thanks
Ashlekh Gera