/* 
The css rules in this file will override the default styling of CX epaper.
Generally, every styling in CX epaper may be altered to your desires. 
However, this document only provides the most common cases of styling adaptations (usually color changes).
Otherwise, we would have to document every single part of the master.css in the src/css folder.
If a certain styling parameter isn't covered in this document, please consult the master.css file or ask a person with css experience for help.

NOTICE: Since the html structure and dynamic behavior of CX epaper may change rapidly from version to version, it may be necessary to update your
        own styling when updating to a newer CX epaper version. No guarantee will be given that your own changes made on a previous version will still
        overwrite the css rules in the master.css in a newer version. The custom.css file in lib.custom.TEMPLATE will be updated regularly. So, you should
        do the same with your own custom.css in lib.custom or in any publication specific data folder.
*/


/*
Basics
*/

/*
Defines the background image of the publication area.
*/
.cxd-turnpag body > #canvas {
    background-image: url("custom-background.jpg");
    background-repeat: none;
}

/*
Defines the border around the publication area.
*/
.cxd-turnpag body > #canvas {
    border-top: 1px solid rgb(0, 99, 220);
}

/*
Defines the background color of the publication area.
*/
.cxd-turnpag body {
  background: #f4f4f4 none repeat scroll 0 0;
}

/*
Defines the logo in the top left corner.
*/
.cxd-turnpag header #logo {
    background-image: url("kyc_logo.png");
}

/*
Defines the default button color.
*/
.cxd-turnpag svg {
    fill: rgb(0, 99, 220);
}

/*
Defines the default background color of a button when hovering over it.
*/
.cxd-turnpag.no-touch button:hover,
.cxd-turnpag.touch button:active {
    background: rgba(0, 99, 220, 0.2) none repeat scroll 0 0;
}

/*
Defines the background color of a button (in the menu bar), whose associated functionality has been activated.
*/
.cxd-turnpag button[on="true"] {
    background-color: rgba(0, 99, 220, 0.3);
}


/*
Flipbook
*/

/*
Defines the background color of the flipbook area.
*/
.cxd-turnpag #flipbook {
    background-color: rgb(248, 248, 248);
}

/*
Defines the color of the next page and previous page button.
*/
.cxd-turnpag #btn-prev svg,
.cxd-turnpag #btn-next svg {
    fill: rgba(0, 99, 220, 0.2);
}

/*
Defines the color of the next page and previous page button when hovering over it.
*/
.cxd-turnpag.no-touch #btn-prev:hover svg,
.cxd-turnpag.no-touch #btn-next:hover svg,
.cxd-turnpag.touch #btn-prev:active svg,
.cxd-turnpag.touch #btn-next:active svg {
    fill: rgba(0, 99, 220, 0.8);
}


/*
PublicationsPanel
*/

/*
Defines the border and background color of the publications panel.
*/
.cxd-turnpag body #publicationsPanel {
    border-top: 1px solid rgb(0, 99, 220);
    background-color: rgba(128, 128, 128, 0.5);
}

/*
Defines the background color of the publications panel when hidden and therefore only displayed as a single thin line at the browser window's lower edge.
*/
.cxd-turnpag.no-touch body[publications-visible="false"] #publicationsPanel:hover,
.cxd-turnpag.touch body[publications-visible="false"] #publicationsPanel:active {
    background-color: rgba(0, 99, 220, 0.3);
}

/*
Defines the border color surrounding a publication image in the publications panel.
*/
.cxd-turnpag .pubThumbImage.currentPublication  {
    border-color: rgba(0, 99, 220, 0.3);
}

/*
Defines the border color surrounding a publication image in the publications panel when hovering over it.
*/
.cxd-turnpag.no-touch .pubThumbele > img:hover,
.cxd-turnpag.touch .pubThumbele > img:active {
    border-color: rgb(0, 99, 220);
}

/*
Defines the font family, font size, and font weight of a publication title in the publications panel.
*/
.cxd-turnpag .pubThumbTitle {
    font-family: "Open Sans Light", sans-serif;
    font-size: 21px;
    font-weight: normal;
}


/*
Thumbspanel
*/

/*
Defines the background color of the thumbs panel (section view).
*/
.cxd-turnpag #thumbspanel {
    background-color: #dfdfdf;
}

/*
Defines the border color when hovering over a thumbnail in the thumbs panel (section view)
*/
.cxd-turnpag.no-touch .pgThumbContainer:hover,
.cxd-turnpag.touch .pgThumbContainer:active {
    border-color: rgb(0, 99, 220, 0.8);
}

/*
Defines the border color of the current page in the thumbs panel (section view)
*/
.cxd-turnpag .pgThumbContainer.current {
    border-color: rgba(0, 99, 220, 0.3);
}

/*
Defines the background color of the section expand / section collapse button in the thumbs panel (section view)
*/
.cxd-turnpag .sectionHead > .sectionExpandBtn,
.cxd-turnpag .sectionHead > .sectionCollapseBtn {
    background-color: rgba(0, 99, 220, 0.5);
}

/*
Defines the background color of the section expand / section collapse button when hovering over it or clicking on in the thumbs panel (section view)
*/
.cxd-turnpag.no-touch .sectionHead > span:hover,
.cxd-turnpag.touch .sectionHead > span:active {
	background-color: rgba(0, 99, 220, 0.5);
}

/*
Defines the color of the horizontal lines bordering the thumbnails of a section in the thumbs panel (section view)
*/
.cxd-turnpag .sectionThumbs {
    border-color: rgba(0, 99, 220, 0.8);
}

/*
Search Panel
*/

/*
Defines the background color of the search button in the search panel.
*/
.cxd-turnpag body #searchpanel #searchBtn {
	background-color: rgba(0, 99, 220, 0.4);
}

/*
Defines the background color of the search button when hovering over or clicking on in the search panel.
*/
.cxd-turnpag.no-touch body #searchpanel #searchBtn:hover,
.cxd-turnpag.touch body #searchpanel #searchBtn:active {
	background-color: rgba(0, 99, 220, 0.8);
}

/*
Defines the background color of a search result when hovering over or clicking on.
*/
.cxd-turnpag.no-touch body #searchpanel .searchResult:hover,
.cxd-turnpag.touch body #searchpanel .searchResult:active {
	background-color: rgba(0, 99, 220, 0.4);
}

/*
Defines the background color of the search result, which is on the same page as currently visible in the flipbook.
*/
.cxd-turnpag body #searchpanel .searchResult.currentPage {
	background-color: rgba(0, 99, 220, 0.2);
}

/*
Defines the color in which a text match will be highlighted in the search panel.
*/
.cxd-turnpag body #searchpanel .matchingText > mark {
	background-color: rgba(0, 99, 220, 0.4);
}

/*
Defines the color of the horizontal line separating the input field from the search results in the search panel.
*/
.cxd-turnpag body #searchpanel #srLabel[hasResults="true"] {
	border-bottom: 2px solid rgba(0, 99, 220, 0.8);
}


/*
Modals
*/

/*
Defines the default color and border color of the close button in modal dialogs.
*/
.cxd-turnpag .modalBtn {
    border-color: rgba(0, 99, 220, 0.2);
    color: rgba(0, 99, 220, 0.2);
}

/*
Defines the background and border color of the header in modal dialogs.
*/
.cxd-turnpag .modal-dialog h2 {
  background-color: rgba(0, 99, 220, 0.2);
  border-color: rgba(0, 99, 220, 0.4);
}

/*
Defines the font color of a link in the about dialog.
*/
a {
    color: rgb(0, 99, 220);
}

/*
Defines the font color of a link in the about dialog when hovering over it or when it has been clicked already.
*/
a:hover,
a:active {
    color: rgb(0, 99, 220);
}

/*
Defines the border color of the images in the PDF dialog when hovering over or clicking on them.
*/
.cxd-turnpag.no-touch .thumbImage2:hover,
.cxd-turnpag.touch .thumbImage2:active {
    border: 9px solid rgba(0, 99, 220, 0.5);
}

/*
Article
 */

/*
Defines the color of a clickable article area.
*/
.cxd-turnpag .article {
    background-color: rgba(0, 99, 220, 0.2);
}

/*
Defines the color of a clickable article area when hovering over it.
*/
.cxd-turnpag .article:hover {
    background-color: rgba(0, 99, 220, 0.5);
}

/*
Defines the color of a clickable article area when hovering over it.
*/
.cxd-turnpag .article:hover {
    background-color: rgba(0, 99, 220, 0.5);
}

/*
Defines the width, height, and color of an article mark indicating the boundaries of a clickable article area.
*/
.cxd-turnpag .article-corner,
.cxd-turnpag .flipbook .page .article-corner img {
    height: 40px;
    width: 40px;
    stroke: rgb(0, 99, 220);
}