/*
Document   : internet
Created on : 29.11.2007, 14:56:20
Author     : sv
Description: Styles used in Internet Frontend.
*/

body {
    font-family         : Verdana,Sans-serif;
    font-size           : 70%;
    color               : #4A7184;
    margin              : 0;
    padding             : 0;
    background-color    : #94908A;
    text-align          : center;
}

hr {
    background-color    : transparent;
    color               : #C1C6DC;
    height              : 1px;
    width               : 100%;
    border-top          : 0px dashed #989898;
    border-right        : 0px dashed #989898;
    border-bottom       : 1px dashed #989898;
    border-left         : 0px dashed #989898;
}

h1 {
    color               : #000000;
    font-size           : 200%;
    font-weight         : normal;
    margin              : 0px 0px 12px;
}

/* ===== Default anchors / hyperlinks ===== */
a:active { color: #4A7184; text-decoration: none; border: 0px solid transparent; }
a:hover { color: #4A7184; text-decoration: underline !important; border: 0px solid transparent; }
a:link { color: #4A7184; text-decoration: none; border: 0px solid transparent; }
a:visited { color: #4A7184; text-decoration: none; border: 0px solid transparent; }

/*
Styles for displaying push buttons.
Used in Advanced search page and tell a friend page.
*/
.button {
    color                : #4A7184;
    background-image     : url(/converis/images/button/primary-enabled.gif);
    background-color     : #E0E3EB;
    background-repeat    : repeat-x;
    background-position  : top left;
    background-attachment: scroll;
    border-color         : #83858C rgb(98, 101, 107) rgb(68, 70, 76);
    border-style         : solid;
    border-width         : 1px;
    font-size            : 11px;
    font-weight          : bold;
    text-align           : center;
    cursor               : pointer;
    /* Hack for invalid width of the buttons. */
    /* margin               : 0px 2px 0px 2px; */
    /* padding              : 1px 1px 1px 1px; */
    margin      : 0px;
    padding     : 1px 5px 1px 5px;
    width       : auto;
    overflow    : visible;
}
/* width:auto; works in ie; but not in a table. */
<!--[if IE]>
.button {
    width: 1;
}
<![endif]-->

/* Not used anymore */
.infomessage {
    background-color    : #e6e6e6;
    border              : #334390 solid 1px;
    color               : #334390;
    font-size           : 12px;
    padding             : 2px;
}

/*
Style for displaying a success-message component, when a user action is completed 
successfully.Used in Advanced search page and tell a friend page.
*/
.successmessage {
    background-color    : #E1FFE1;
    font-size           : 12px;
    color               : #008000;
    text-align          : left;
    vertical-align      : middle;
    border              : #008000 solid 1px;
    padding             : 2px;
}

/*
Style for displaying a error-message component, when a user action is not 
completed successfully.Used in MainContentOfSearchResults page.
*/
.errormessage {
    background-color    : #FFE1E1;
    font-size           : 12px;
    color               : #FF0000;
    text-align          : left;
    vertical-align      : middle;
    border              : #FF0000 solid 1px;
    padding             : 2px;
}

.errorHeader {
    background-color    : #334390;
    color               : white;
    margin-bottom       : 10px;
    padding             : 3px;
    text-align          : center;
    font-weight         : bold;
}
/*
Style for displaying a error-message component, when a user action is not 
completed successfully.Used in Advanced search page and tell a friend page.
*/
.errorvalidation {
    font-family         : Arial, Helvetica, sans-serif;
    font-size           : 11px;
    color               : #FF0000;
    vertical-align      : middle;
}

/*  
Used for formating of Left and right column components in panel grids.
Used in many detail and list pages, wherever panelgrids are used.
*/
.leftCol {
    background-color    : transparent;
    vertical-align      : top;
    padding-left        : 0px;
}
.rightCol {
    background-color    : transparent;
    vertical-align      : top;
    padding-left        : 10px;
}

/*
Used in tell a friend page for aligning the components in the panel grid as
left and right aligned.
*/
.leftAlignCol {
    background-color    : #FFFFFF;
    color               : #4A7184;
    font-size           : 100%;
    text-align          : left;
    vertical-align      : top;
    padding             : 5px;
}
.rightAlignCol {
    background-color    : #FFFFFF;
    color               : #4A7184;
    font-size           : 100%;
    text-align          : right;
    vertical-align      : top;
    padding             : 5px;
}

/* class for favorites box */
.favoritesCol {
    width               : 100%;
    text-align          : right;
}

/* class for favorites panel in infoobjectdetail page */
.favoritesPanel {
    width               : 100%;
    text-align          : right;
    float               : right;
    padding-bottom      : 1px;
    border-bottom       : 1px dashed #9C9D9F;
}

/* Used in Internet Header for displaying the date, links and the language bar. */
.headDatePanel {
    color               : #FFFFFF;
    background-color    : #34438F;
    font-size           : 11px;
    text-align          : left;
    height              : 18px;
    width               : 150px;
    padding-left        : 10px;   
    vertical-align      : middle;
}
.headLinksPanel {
    background-color    : #34438F;
    color               : #FFFFFF;
    height              : 18px;
    font-size           : 11px;
    text-align          : right;    
    padding-right       : 10px;
    vertical-align      : middle;
}
.headLangPanel {
    color               : #FFFFFF;
    background-color    : #34438F;
    font-size           : 11px;
    text-align          : right;
    height              : 18px;
    width               : 75px;
    padding-left        : 10px;
    padding-top         : 2px;
    padding-right       : 5px;
}

/* ===== Right Column Content ===== */
/*
Used in LastVisited pages for displaying the right column header.
This can be delted when lastvisitedpages is deleted.
*/
.rightBarMenuHeader {
    font-size           : 100%;
    color               : #463A3A;
    background-color    : #CCCCCB;
    text-align          : left;
    vertical-align      : middle;
    padding-left        : 5px;
}

/*
Styles for displaying each row inside the right column content box.
Used in displaying the different links in 
Overviews, Infobox, lastvisited pages and search subivew.
*/
.rightBarMenuRow {
    font-size           : 100%;
    font-weight         : normal;
    color               : #463A3A;
    text-align          : left;
    vertical-align      : middle;
}

/*
Styles for displaying the columns in a right column content box.
Used in Lastvisitedpages and infobox pages.
*/
.rightBarMenuColumn {
    padding             : 4px;
}

/* ===== Navigation tree links ===== */
/*
Style for the treenode if it is in the selected state.
*/
.treeNodeOnSelectedPath {
    color                 : #990000;
    font-weight           : bold;
    padding-left          : 0px;
    /*node icon will be set by a.TreeNodeExpandedIcon*/
    /* background-image     : url(/converis/images/internet/arrow_red.png); */ 
    background-color      : transparent;
}

/* 
Style for the SELECTED treenode when the mouse pointer is moved over it.
*/
.treeNodeOnSelectedPath:hover {
    color                : #990000;
}

/*
Style for the treenode if it is NOT in the selected state.
*/
.treeNodeNotOnSelectedPath {
    color                 : #4A7184;
    font-weight           : normal;
    padding-left          : 0px;
    /*node icon will be set by a.TreeNodeCollapsedIcon*/ 
    /*background-image     : url(/converis/images/internet/arrow_blue.png);*/
    background-color      : transparent;
}

/* 
Style for the UNSELECTED treenode when the mouse pointer is moved over it.
*/
.treeNodeNotOnSelectedPath:hover {
    color               : #990000;
}

/*
Text Style for the treenode, if it is top level node.
Used in Navigation tree.jsp
*/
.treeNodeBig {
    font-size           : 100%;
    font-weight         : bold;
    display             : block;
    padding             : 2px 0px;
}

/*
Text style for the treenode, if it is a second level node.
Used in Navigation tree controller.
*/
.treeNodeMedium {
    font-size           : 100%;
    font-weight         : normal;
    display             : block;
    padding             : 1px 0px;
}

/*
Text style for the all treenodes that are in level three or lower.
Used in Navigation tree controller.
*/
.treeNodeSmall {
    font-size           : 100%;
    display             : block;
    padding             : 1px 0px;
}

/* BreadCrumb individual Links */
/* Text stlye used for the text displayed in the breadcrumb. */
a.breadLinks {
    color               : #989898 !important;
    font-size           : 100%;
    text-decoration     : none;
}
a.breadLinks:hover {
    text-decoration     : underline;
}

/* Text stlye used for the text separator symbol displayed in the breadcrumb. */
.breadSeparator {
    color               : #00689F !important;
    font-weight         : bold;
}

/* ===== Global styles ===== */
a.globalmenuLink {
    color                : black;
}

/* Text stlye used for the text displayed as Infobox links. */
a.infoboxLink {
    color                : #4A7184;
    font-size            : 100%;
    background-color     : transparent;
}

/*
Text stlye used for the text displayed as Infobox links, 
when the mouse pointer is moved over it.
*/
a.infoboxLink:hover {
    text-decoration      : underline;
}

/* Toggle between Detail/List views link */
/* Used in Tree overview pages, Infobox and last visited pages.*/
a.toggleSwitch {
    color                : #4A7184;
    font-size            : 100%;
    padding              : 0px;
    background-color     : transparent;
    background-repeat    : no-repeat;
    background-attachment: scroll;
    background-position  : left 8px;
}
a.toggleSwitch:hover {
    text-decoration      : underline;
}

/* Links in the Right column */
.rightColumnLink, .rightColumnLink:visited {
    color                : #4A7184;
    font-weight          : normal;
    padding              : 0px;
    background-color     : transparent;
    background-repeat    : no-repeat;
    background-attachment: scroll;
    background-position  : left 8px;
}
.rightColumnLink:hover {
    text-decoration      : underline;
}

/* ===== Columns in tables so as to have padding-bottom ===== */
/* Used in all the rich:dataGrid components included in many subviews.  */
.tableColumn{
    vertical-align      : top;
    padding-left        : 4px;
}

/* ===== Links to another InfoObject Detail view ===== */

a.detailLink {
    color               : #00689f;    
    font-size           : 11px;
}
a.detailLink:hover {
    text-decoration      : underline;
}

/* ======= Styles for list views ======= */
/* Default styles for heading text in the list view. */
.listHeading{
    color               : #9D8A0A;
    font-weight         : bold;
    font-size           : 100%;
}

/*
Style for the any attribute value displayed in the list view. 
For example -- PROJ_DECRIPTION
*/
.listAttributeValue{
    color               : #4A7184;
    font-size           : 11px;
}

/*
Style for the any attribute name displayed in the list view. 
For example -- Project leader, Period
*/
.listAttributeName{
    color               : #4A7184;
    font-weight         : bold;
    font-size           : 11px;
}

/* ===== Links displayed in Overview pages ===== */
/* Default Text stlye used for the text displayed as Overview links. */
a.overviewLink {
    color                : #4A7184;
    font-size            : 100%;
    padding              : 0px;
    background-color     : transparent;
}
a.overviewLink:hover {
    text-decoration      : underline;
}

/* For every single cell in the Overviews.
    Style for individual tree nodes
    Used in tree view pages of person and organisation.
*/
.overviewCell {
    padding-bottom      : 5px       !important;
}

/* ====== Styles used in detail pages ======= */
/* Default page header. E.g.: Area title, Project title, etc */
.pageHeading {
    color               : #990000;
    font-size           : 170%;
    font-family         : Georgia,Times,serif;
}
/* ===== Attribute Names and values ===== */
.attributeName {
    font-weight         : bold;
    color               : #000000;
}
.attributeValue {
    font-size           : 100%;
    color               : #000000;
}

/* ===== Images in right column ===== */
/* Style for the panel group that holds the right column images. */
.rightColImgContainer {
    width               : 180px;
    padding             : 25px 2px 2px 2px;
    text-align          : left;
    margin              : 0px;
}

/* Style for the outer container that holds the rightColImgContainer */
.rightColImgOutCont {    
    width               : 185Px;
    padding             : 5px;
    margin              : 0px;
}

/* Style for the Caption that is displayed below the right column image. */
.relatedPicCaption {
    color               : #463A3A;
}

/*
Style for image in right column, used in following method:
com.converis.web.internet.controller.InternetInfoObjectHelper.getGroupRightColImages()
*/
.rightColImg {
    border          : 0px solid #FFFFFF;
    width           : 180px;
}

/* ===== StartPageObjects Styles ===== */
/*
SPO Container -- The container that holds all the SPO objects in the AREA page.
Used in StartpageObjects.jsp
*/
.spoContainer {
    background-color    : transparent;
    vertical-align      : top;
    text-align          : center;
}

/*
SPO Box -- Seperate boxes that hold the individual start page objects.
Used in the different IOT pages under /internet/subviews/startpageobjects.
*/
.spoBox {
    min-height          : 66px;
    border              : 1px solid #CCCCCB;
    background-color    : #FFFFFF;
    width               : 202px;
    padding             : 2px;
    margin-right        : 5px;
    margin-left         : 5px;
    margin-top          : 5px;
    text-align          : left;
    float               : left;
}

/* 
SPO Picture -- Style for the related picture of the IOT to be shown in SPO.
Used in the different IOT pages under /internet/subviews/startpageobjects.
*/
.spoPicture {
    width               : 60px;
    float               : left;    
    padding             : 1px;
    margin-right        : 5px;    
    border              : 1px solid #CCCCCB;
}
/* SPO Header -- Default Style for the heading in the SPO Box. */
.spoHeader {
    font-size           : 10px;
    font-weight         : bold;
    color               : #505040;
}
/* SPO Header -- Mouse-Over Style for the heading in the SPO Box. */
.spoHeader:hover {
    text-decoration      : underline;
}
/* SPO IOT Name -- Style for the IOT name displayed in the heading. */
.spoIOTName {
    color               : #505040;
}

/* ===== Photo of a Person ===== */
/* Style for a Person's' Picture in detail view. */
.personPicture {
    /* width               : 80px; */
    float               : left;
    padding             : 1px;
    border              : 1px solid #CCCCCB;
    background-color    : white;
}

/* ===== Pictures in list view ===== */
/* Style for all Pictures in list view */
.listViewPicture {
    width               : 60px;
    float               : left;
    padding             : 1px;
    border              : 1px solid #CCCCCB;
    background-color    : white;
}

/* ===== Alphabet list in  Overview links Style ===== */
.alphabetLink {
    margin              : 4px;
    font-weight         : bold;
}
.alphabetLink:hover {
    text-decoration     : underline;
}

/* Search Box */
.searchBox {
    font-size           : 100%;
    border-bottom       : 1px solid #CCCCCB;
    background-color    : #FFFFFF;
    padding-top         : 10px;
    padding-right       : 2px;
    padding-bottom      : 10px;
    padding-left        : 2px;
}
/* Search Picture */
.searchPicture {
    float               : left;
    padding             : 0px 5px 5px 0px;
}
/* Search Header */
.searchHeader {
    font-size           : 100%;
    font-weight         : bold;
    color               : #9D8A0A;
}
.searchHeader:hover {
    text-decoration     : underline;
}
/* Search IOT Name */
.searchIOTName {
    color               : #505040;
}
.searchAttributeName {
    color               : #4A7184;
    font-size           : 11px;
    font-weight         : bold;
}
.searchFragments {
    padding-top         : 5px;
}

/* ===== List view Styles ===== */
/* List Box -- Each list items are displayed inside this container*/
.listBox {
    clear               : both;
    border-bottom       : 1px solid #CCCCCB;
    background-color    : #FFFFFF;
    padding-top         : 5px;
    padding-right       : 2px;
    padding-bottom      : 2px;
    padding-left        : 2px;
}

/* ===== RichFaces Table styles ===== */
/* Hide borders (top/left) */
.dr-table {
    background-color    : transparent;
    border-left         : 0px solid #C0C0C0;
    border-top          : 0px solid #C0C0C0;
}
/* Hide borders (bottom/right) and remove padding */
.dr-table-cell {
    border-bottom       : 0px solid #C0C0C0;
    border-right        : 0px solid #C0C0C0;
    padding             : 0px 0px 0px 0px;
}
.dr-table-footer {
    background-color    : transparent;
}
.dr-table-footercell {
    border              : 0px none;
}


/* ===== RichFaces Tree styles ===== */
/* Text style, in order to break long lines */
.dr-tree-h-text {
    white-space         : normal  !important;
    padding-top         : 0px;
    padding-right       : 0px;
    padding-bottom      : 0px;
    padding-left        : 0px;
}
/* Highlighted text */
.dr-tree-i-hl {
    text-decoration     : none;
}
/* Selected text */
.dr-tree-i-sel {
    text-decoration     : none;
    border              : none;
}
/* Handle style, in order to hide the Expand/Collapse icons */
.dr-tree-h-ic {
    display             : none; 
}
/* Connecting lines */
.dr-tree-h-ic-line {
    background-image    : none;
    border-left         : 1px solid #C0C0C0;
}


/* ===== RichFaces TabPanel styles ===== */
.rich-tab-inactive {
    cursor              : pointer;
}
/* Left and right borders of Tabs */
.dr-tbpnl-tbbrdr {
    background-image    : url(/converis/images/internet/borders/dr-tbpnl-tbbrdr.gif);
}
/* Top border of Tabs */
.dr-tbpnl-tbtopbrdr {
    border-top-color    : #CCCCCB;
}
/* Bottom line of Tabs */
.dr-bottom-line {
    border-bottom       : 1px solid #CCCCCB;
}
/* TabPanel content borders */
.dr-tbpnl-cntnt {
    background-color    : #FFFFFF;
    border-right        : 1px solid #CCCCCB;
    border-bottom       : 1px solid #CCCCCB;
    border-left         : 1px solid #CCCCCB;
}
/* Active Tab */
.dr-tbpnl-tb-act {
    background-color    : #FFFFFF;
    background-image    : url(/converis/images/internet/tabPanel_active.png);
    border              : none;
    color               : #000000;
    font-size           : 100%;
    font-weight         : normal;
    padding             : 2px 5px;
}
/* In-active Tab */
.dr-tbpnl-tb-inact {
    /* font-weight         : bold; */
    background-color    : #C2C4C6;
    background-image    : url(/converis/images/internet/tabPanel_inactive.png);
    border              : none;
    color               : #000000;
    font-size           : 100%;
    cursor              : pointer;
    padding             : 2px 5px;
}
/* In-active Tab */
.dr-tbpnl-tb {
    padding             : 2px 5px;
}


/* ===== RichFaces DataScroller styles ===== */
/* Table holding the Scroller */
.dr-dscr-t {
    background-color    : transparent;
    color               : #4A7184;
    border              : none;
    font-size           : 12px;
    font-weight         : bold;
}
/* Active page */
.dr-dscr-act {
    border              : none;
    color               : #000000;
    width               : 20px;
    font-size           : 12px;
    font-weight         : bold;
}
/* In-active page */
.dr-dscr-inact {
    border              : none;
    color               : #4A7184;
    cursor              : pointer;
    text-align          : center;
    width               : 20px;
    font-size           : 12px;
    font-weight         : bold;
}
/* Button and separator */
.dr-dscr-button, .dr-dscr-sepctrl {
    border              : none;
    color               : #4A7184;
    background-color    : transparent;
    font-size           : 12px;
    cursor              : pointer;
    text-align          : center;
    width               : 15px;
}


/* ===== HTML Input elements ===== */
INPUT {
    border-color         : #C2C4C6;
    border-style         : solid;
    border-width         : 1px;
    font-family          : Verdana,Sans-serif;
    text-align           : left;
    font-size            : 11px;
}
/* SELECT OPTION */
SELECT {
    border-color         : #C2C4C6;
    border-style         : solid;
    border-width         : 1px;
    text-align           : left;
    padding              : 1px 0px 1px 0px;
    font-size            : 12px;
}
/* CHECKBOX & RADIO elements */
input[type=checkbox] {
    border               : 0px solid #FFFFFF;
    background           : none;
}
input[type=radio] {
    border              : 0px solid #FFFFFF;
    background          : none;
}

/* ===== Header image styles ===== */
.noRepeat {
    width               : 185px;
}

/* Repeat the header image to the width of the page or the box defined.
   Used in Internet header page. */
.repeatHeaderX {
    background-image     : url(/converis/images/header_repeat.png);
    background-color     : #FFFFFF;
    background-repeat    : repeat-x;
    background-position  : top left;
    background-attachment: scroll;
}

.regionalmenuheading {
    padding-right       : 2px;
    padding-left        : 0px;
    font-weight         : bold;
    font-size           : 140%;
    padding-bottom      : 10px;
    color               : #9D8A0A;
    padding-top         : 0px;
}

/*  Inherited from DIV#regionalmenu.
    Rule #1 from regionalmenu.css
*/
.regionalmenu {
    font-size           : 100%;
    position            : relative;
}

/* LOGIN / REGISTRATION / PASSWORD REMINDER related style classes. */
.LoginPageBody {
    background-color      : white;
    font-family           : Verdana,Sans-serif;
    font-size             : 12px;
    color                 : #000000;
    text-align            : center;
    margin                : 0;
    padding               : 0;
}
.loginPageRightAlign {
    background-color     : white;
    color                : black;
    font-family          : Verdana,Sans-serif;
    text-align           : right;
    padding              : 5px;
    border-top           : 1px solid #FFFFFF;
}

.loginPageLeftAlign {
    background-color     : white;
    color                : black;
    font-family          : Verdana,Sans-serif;
    text-align           : left;
    padding              : 5px;
    border-top           : 1px solid #FFFFFF;
}
.loginPageOuterBox {
    border       : 1px solid #2E4589;
}
.loginPageInnerBox {
    text-align   : center;
    margin-left  : 15px;
    margin-right : 15px;
    margin-bottom: 15px;
}
.loginPageUsernamePasswordTable {
    margin-left  : 100px;
    margin-right : 100px;
}
.loginPageLink {
    border          : 0px solid transparent !important;
    color           : blue !important;
    text-decoration : underline  !important;
}
.loginPageButton {
    color                 : #4A7184;
    background-image      : url(/converis/images/button/primary-enabled.gif);
    background-color      : #E0E3EB;
    background-repeat     : repeat-x;
    background-position   : top left;
    background-attachment : scroll;
    border-color          : #83858C rgb(98, 101, 107) rgb(68, 70, 76);
    border-style          : solid;
    border-width          : 1px;
    font-weight           : bold;
    margin                : 0px 2px 0px 2px;
    text-align            : center;
    padding               : 1px 5px 1px 5px;
}
/* Style used for disabled Buttons or Links, to override the global INPUT style. */
.loginPageButtonDisabled {
    color                : #78675D;
    border               : #BBBBBB solid 1px;
    text-align           : center;
    margin               : 0px 2px 0px 2px;
    padding              : 1px 5px 1px 5px;
}


/* ===== Printer styles ===== */
@media print{
    .layout #maincontainer {
        height              : 100%;
        width               : 100%;
        position            : relative;
        margin              : 0px;
        padding-top         : 10px;
        text-align          : left;
    }
    /* Hide the left column when printing */
    .layout #leftCol {
        display         : none;
    }
    /* Hide the right column when printing */
    .layout #rightCol {
        display         : none;
    }
    .layout #mainContent {
        width           : 100%;
        float           : none;
    }
}

.leftFloat {
    text-align: left;
}
.rightFloat {
    text-align: right;
}

.pageCount {
    color               : #555555;
    font-weight         : bold;
    font-size           : 11px;
}

.dr-table-cell {
    font-family         : Verdana,Sans-serif;
}