/* RVBD: 
      Style all icons. The rvbd-fonts.css handles importing text and icon fonts.
      Find HTML entity and Unicode values for these icons by importing the icon font .svg file into the icomoon app at icomoon.io. 
      Follow the instructions in the icomoon documentation.
*/

/* RVBD: Add global style for icons */
[data-icon]::before {
    display: inline-block;
    width: 24px;
    height: 25px;
    line-height: 1;
    font-family: "icomoon" !important;
    speak: none;
    font-size: 24px;
    font-weight: 400;
    font-style: normal;
    font-variant: normal;
    text-transform: none;
    color: #bcc2c7;
    padding: 5px;
    vertical-align: middle;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

[data-icon]:hover::before {
    color: #545b5b;
}

.ww_skin_toolbar_button_disabled [data-icon]::before {
    color: #ebeff1;
}

/* RVBD: Add global style for invisible element containing text-reader content */
.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

/* RVBD: Add Unicode value for left-side icons. */
[data-icon="toc"]::before {
    content: "\ec71";
}

/* 
   RVBD: 
     Add padding and font-size for search icon in all layouts
     execpt layouts where the search form is not visible.
     Add additional styles for narrow layouts, and search page overlay layout
     where the magnifying glass is replaced with the Return icon.
*/
[data-icon="search"]::before {
    content: "\eb30";
    padding-top: 10px;
    padding-left: 10px;
    font-size: 16px;
}

.panel_overlay [data-icon="search"]::before {
    content: "\eaab";
    font-size: 24px;
    padding-top: 5px;
}
.layout_narrow [data-icon="search"]::before {
    font-size: 24px;
    padding-top: 5px;
}

/* Add Unicode values for right-side icons */
[data-icon="previous"]::before {
    content: "\edd2";
}

[data-icon="next"]::before {
    content: "\edce";
}

[data-icon="home"]::before {
    content: "\e900";
}

[data-icon="feedback"]::before {
    content: "\ea34";
}

[data-icon="print"]::before {
    content: "\ea69";
}

[data-icon="twitter"]::before {
    content: "\ea96";
}

[data-icon="facebook"]::before {
    content: "\ea91";
}

[data-icon="linked-in"]::before {
    content: "\eaca";
}

[data-icon="google-plus"]::before {
    content: "\ea8c";
}

/* RVBD: Add icon for back_to_top. rvbd-layout.css contains styling for the back_to_top element */
[data-icon="back-to-top"]::before {
    content: "\ee37";
    font-size: 26px;
    opacity: 0.75;
    margin-bottom: 60px;
}

/* RVBD:
    Replace title attributes in Connect.asp, Page.asp, *.asp with data-title attributes to control tooltips style.
    Add global styles for data-title attr.
    Add hover styles for data-title attr.
    Add title-specific content and left position.
*/
[data-title]::after {
    position: absolute;
    background-color: #fff;
    color: #545b5b;
    font-family: "MuseoSans-300", Arial, sans-serif;
    font-size: 12px;
    padding: 1px 5px 2px 5px;
    white-space: nowrap;
    border: 1px solid #bcc2c7;
    z-index: 99999;
    visibility: hidden;
}

[data-title]:hover::after {
    top: 128px;
    opacity: 0.8;
    transition: all 0.1s ease 0.5s;
    visibility: visible;
}

[data-title="logo"]:hover::after {
    content: "The Digital Performance Company";
    top: 50px; 
    left: 10%;
}

.layout_narrow [data-title="logo"]:hover::after {
    left: 38%;
}

[data-title="toc"]:hover::after {
    content: "Show or hide table of contents";    
    left: 30px;
}

[data-title="search"]:hover::after {
    content: "Search this document";
    left: 260px;
}

.layout_narrow [data-title="search"]:hover::after {
    left: 60px;
}

.panel_overlay [data-title="search"]:hover::after {
    content: "Return to previous view";
    left: 60px;
}

[data-title="previous"]:hover::after {
    content: "View previous page";
    right: 100px;
}

[data-title="next"]:hover::after {
    content: "View next page";
    right: 60px;
}

[data-title="home"]:hover::after {
    content: "Return to start";
    right: 28px;
}

[data-title="feedback"]:hover::after {
    content: "Send us your feedback";
    position: relative;
    top: 32px;
    right: 120px;
}

[data-title="print"]:hover::after {
    content: "Print this page";
    position: relative;
    top: 32px;
    right: 80px;
}

[data-title="linkedin"]:hover::after {
    content: "Share on LinkedIn";
    position: relative;
    top: 32px;
    right: 34px;
}

[data-title="facebook"]:hover::after {
    content: "Share on Facebook";
    position: relative;
    top: 32px;
    right: 34px;
}

[data-title="back-to-top"]:hover::after {
    content: "Return to top of page";
    position: relative;
    top: 32px;
    float: left;
}