/* 
    Document   : oden3cda
    Created on : 2009-sep-12, 06:14:48
    Author     : Stefan Lindberg SLC
    Description:
        Stylesheet for the cda side of Oden3.
        This style sheet only contains the differences
        we want from the regular screen style sheet that
        is used for both sides Oden3.

        ALL CSS-FILES MUST BE REGISTRED IN THE 
        INSTANCE-CONFIG-FILE FOR THAT INSTANCE OF ODEN3.
        For each instance, we can have up to four css-files for the
        cda side and four css-files for the cms (admin) side. 
        (SL 19-12-20)
*/
root { 
    display: block;
}

/* ------------------ ODEN3 CDA SYSTEM ------------------ */
/*
h3 {
    text-decoration: none;
    font-size: 1.6em;
    font-weight: normal;
}
*/
a:link {                    /* for unvisited links */
    color: rgb(0, 0, 0)
}
a:visited {                 /* for visited links */
    color: rgb(0, 0, 0)
}
a:active {                  /* when link is clicked */
    color: rgb(0, 0, 0)
}
a:hover {                   /* when mouse is over link */
    color: rgb(0, 96, 255)
}

a.plain {
    text-decoration: none;
    font-size: 1em;
}

/* For Google Chrome: Disable textarea resizing. We do our own */
textarea {
    resize: none;
    margin: 0;
}

@media screen {
    #cdaBody {
        padding: 0;
        margin: 0;
        background: url("../../img/oden3_cda_header_side_fill_mucf.png") repeat-x ;
        background-color: #DDD;
    }
}
@media print {
    #cdaBody {
        padding: 0;
        margin: 0;
        background-color: #FFF;
    }
}

#ajaxCdaProcessingIndicator {
    position:absolute;
    left:93px; top:3px;
    display: none;
}
/* The background image of the header is set in the div with 'style'.
   It will be different for different instances of Oden3.
   The height of the header governs how hight up the contant frame will be placed.
*/
#cdaHeader {
    /* margin:0 auto; */
    margin-left: 25px; /* was 15 */
    width: 740px;
    height: 78px;
    display: block;
}
#cdaHeaderWrapper {
    text-align: left;
}

@media screen {
    #cdaContentFrame {
        margin-left: 25px; /* was 15 */
        margin-top: 0;
        background-color: #FFF;
        border: thin solid black;
        width: 740px;
    }
}
@media print {
    #cdaContentFrame {
        margin-left: 25px; /* was 15 */
        margin-top: 0;
        background-color: #FFF;
        border: none;
        width: 740px;
    }
}

#cdaContent {
    min-height: 700px;  /* was 600 */
    width: 710px;
    padding: 10px;
    margin-top: 0;
    border: none;   
    display: block;
}

/* Used on the public start page */
#ourApplications {
    width: 710px;
    padding: 10px;
    margin-top: 0;
    border: none;
    display: block;
}

/* Used on the public start page */
#ourApplicationsList {
    width: 720px;
    padding: 10px;
    padding-left: 0;
    margin-top: 0;
    border: none;
    display: block;
}

/* Used on the public start page */
#currentProgrammes {
    padding-left: 0;
    padding-right: 0;
    width: 740px;
    min-height: 700px; 
    margin-top: 0;
    border: none;
    display: block;
}
#cdaContentOverButtonRow {
    min-height: 450px;
    padding: 0;
    margin: 0;
    border: none;
}

/* Wrapper around the floating left and right column (if columns are used) */
#cdaContentColumnsWrapper {
    float: left;
    padding: 0;
    margin: 0;
    margin-top: 15px;
    margin-bottom: 15px;
    width: 100%;
}

#cdaContentLeftColumn {
    float: left;
    width: 48%;
    /*border: thin solid green;*/
}

#cdaContentRightColumn {
    float: right;
    width: 48%;
    /*border: thin solid blue;*/
}

/* Row of action buttons (Save, Cancel etc.) */
#cdaActionButtons {
    margin-top: 25px;
}
/* Add some space between the buttons. */
#cdaActionButtons .notLeftMostButton {
    margin-left: 10px;
}

#cdaLinkToInstructionPage {
    position: relative;
    left: 610px;
    top: 40px;
    white-space: nowrap;
    margin: 0;
    padding: 0;
    display: inline-block;
}

#cdaFooter{
    border-top: thin solid black;
}

#cdaShortHR {
    text-align: left;           /* Put in to the left side: only works in IE. */
    width: 75%;
    margin-left: 0;             /* Put in to the left side: works for Chrome and Firefox. */
    margin-top: 20px;
    margin-bottom: 20px;
    color: #ffd680;             /* US Yellow */
    border-color: #ffd680;      /* US Yellow */
    background-color: #ffd680;  /* US Yellow */
    border-top: none;
}
#logInAndOutFromPublicCda {
    height: 28px;
    padding-left: 5px;
    padding-right: 5px;
    padding-top: 4px;
    margin-bottom: 0;
    background-color: #EEE;
    /* border-bottom: thin solid #ffd680; (yellow) */
    border-bottom: thin solid #009cda;  /* Lighter blue */
}

/* This version of the table has a thin gray border and a gray th background */
.cdaContactPersonTable {
    border-collapse:collapse;
    border: none;
    width: 340px;
    clear: both;
}

.cdaContactPersonTable th {
    border: thin solid gray;
    width: 110px;
    text-align: left;
    text-decoration: none;
    font-weight: normal;
    font-size: 1em;
    padding-left: 5px;
    padding-right: 5px;
    background-color: #eee;
}

.cdaContactPersonTable td {
    border: thin solid gray;
    width: 210px;
    text-align: left;
    font-weight: normal;
    font-size: 1em;
    padding-left: 5px;
    padding-right: 5px;
    background-color: white;
}

/* This version of the table has a thin gray border and a gray th background */
.cdaOrganisationTable {
    border-collapse:collapse;
    border: none;
    width: 340px;
    clear: both;
}

.cdaOrganisationTable th {
    border: thin solid gray;
    width: 110px;
    text-align: left;
    text-decoration: none;
    font-weight: normal;
    font-size: 1em;
    padding-left: 5px;
    padding-right: 5px;
    background-color: #eee;
}

.cdaOrganisationTable td {
    border: thin solid gray;
    width: 210px;
    text-align: left;
    font-weight: normal;
    font-size: 1em;
    padding-left: 5px;
    padding-right: 5px;
    background-color: white;
}

.cdaOrganisationTable th.emptyRow {
    border: none;
    background-color: white;
}

.cdaOrganisationTable td.emptyRow {
    border: none;
    background-color: white;
}

#instructionsInclude {

}

@media screen {
    #cdaPrintPageOverlay {
        position: absolute;
        margin: auto;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 9999;
        border: 0;
        background-color: #000!important;
    }
}

@media screen {
    #cdaPrintPageOverlay[id] { position: fixed; }
}

@media print {
    #cdaPrintPageGoBackButtonDiv {
        display: none;
    }
}
/* A div that holds the "goback" button and rests ontop of the overlay */
@media screen {
    #cdaPrintPageGoBackButtonDiv {
        position: absolute;
        top: 30px;
        left: 650px;
        z-index: 10000;
    }
}
@media screen {
    #cdaPrintPageGoBackButtonDiv[id] {
        position: fixed;
    }
}
@media print {
    #cdaPrintPageGoBackButton {
        display: none;
    }
}
/* The "goback" button itsleft. It must be large and easy to spot! */
#cdaPrintPageGoBackButton {
    width: 90px;
    height: 40px;
    font-size: 1.3em;
}

/* -------------------------------------------------------------------------------------------*/
/* ---------------------------- Meny tabs for use in MyAccount ------------------------------ */
/* New list based menu stuff. From the article at http://alistapart.com/articles/slidingdoors */
/* -------------------------------------------------------------------------------------------*/
#pageMenuCSS {
        float: left;
        width: 100%;
        background: url("../../img/menu_bg.gif") repeat-x bottom;   /* removed #DAE0D2 */
        font-size: 93%;
        line-height: normal;
        }
/* This is for holing the tabs together so that they don't 'fold' when the window shrinks. */
#pageMenuCSSSolidFrame {
        float: left;
        width: 850px;       /** Expanded from 750px */
        margin: 0;
        padding: 0;
        }
#pageMenuCSS ul {
        margin: 0;
        padding: 10px 10px 0;
        list-style: none;
        }
#pageMenuCSS li {
        float: left;
        background: url("../../img/menu_tab_left.gif") no-repeat left top;
        margin: 0;
        padding: 0 0 0 9px;
        }
#pageMenuCSS a {
        float: left;        /* For IE5Mac */
        display: block;
        background: url("../../img/menu_tab_right.gif") no-repeat right top;
        padding: 5px 15px 4px 6px;
        text-decoration: none;
        font-weight: bold;
        color: #765;
        }


/* Commented Backslash Hack
     hides rule from IE5-Mac \*/
#header a {float: none;}
  /* End IE5-Mac hack */

#pageMenuCSS #inactive {
        float: left;        /* For IE5Mac */
        display: block;
        background: url("../../img/menu_tab_right.gif") no-repeat right top;
        padding: 5px 15px 4px 6px;
        text-decoration: none;
        font-weight: bold;
        color: #AAAAAA;
        }

/* Commented Backslash Hack
     hides rule from IE5-Mac \*/
#header #inactive {float: none;}
  /* End IE5-Mac hack */

#pageMenuCSS a:hover {
        color: #333;
        }
#pageMenuCSS #currentPageMenuTab {
        background-image: url("../../img/menu_tab_left_on.gif");
        }
#pageMenuCSS #currentPageMenuTab a {
        background-image: url("../../img/menu_tab_right_on.gif");
        color: #333;
        padding-bottom: 5px;
        }

#pageMenuCSS #currentPageMenuTab #inactive {
        background-image: url("../../img/menu_tab_right_on.gif");
        color: #AAAAAA;
        padding-bottom: 5px;
        }

#nopageMenuCSS {
        width: 100%;
        padding-top: 20px;
        margin-bottom: 5px;
        background: url("../../img/menu_bg.gif") repeat-x bottom;   /* removed #DAE0D2 */
        font-size: 93%;
        line-height: normal;
        }

/* When displaying the printer friendly view of the form,
   use this p-class to frame the text that usually is in a text area.
   Used in the jsp-tag 'textarea.tag'. */
p.text_area_when_printing {
    width: 90%;
    margin-top: 5px;
    border: thin solid;
    border-color: #CCCCCC;
    background-color: white;
    padding-left: 5px;
    padding-right: 5px;
    padding-top: 3px;
    padding-bottom: 3px;
}

/* When displaying the printer friendly view of the form,
   use this p-class to frame the text that usually is in a text field.
   Used in the jsp-tab 'text.tag'. */
p.text_field_when_printing {
    display: inline-block;
    margin-top: 0px;
    margin-bottom: 0px;
    border: thin solid;
    border-color: #CCCCCC;
    background-color: white;
    padding-left: 2px;
    padding-right: 2px;
    padding-top: 1px;
    padding-bottom: 1px;
}

/* Used in the select tag (od-form:select) */
span.text_field_when_printing {
    display: inline-block;
    margin-top: 0px;
    margin-bottom: 0px;
    margin-right: 4px;
    border: thin solid;
    border-color: #CCCCCC;
    background-color: white;
    padding-left: 2px;
    padding-right: 2px;
    padding-top: 1px;
    padding-bottom: 1px;
}

/* -- A fixed menu (floating on top) for the application/report combo -- */

@media screen {
    #floatingFormMenuFrame[id] {
        position: fixed;
    }
}

@media screen {
    #floatingFormMenuFrame {
        position: absolute;
        top: 98px;
        left: 770px;
        z-index: 700;
        border: 1px solid #bbb;
        background-color: #fff;
    }
}

@media print {
    #floatingFormMenuFrame {
        display: none;
    }
}

.floatingFormMenuItem {
    display: block;
    margin: 5px;
    /* padding: 5px; */
    width: 80px;
    border-top: 1px solid #aaa;
    border-bottom: 1px solid #aaa;
    border-left: 1px solid #aaa;
    border-right: 1px solid #aaa;
    font-family: helvetica,arial,sans-serif;
    font-size: 100%;
    font-weight: bold;
    text-align: center;
    vertical-align: middle;
    line-height: 30px;
}
.floatingFormMenuItem a {
    display: block;
    width: 100%;
    /* color: #777; */
    color: #000;
}
.floatingFormMenuItem a:link,
.floatingFormMenuItem a:visited {
    text-decoration: none;
}
.floatingFormMenuItem a:hover {
    color: #000;
    text-decoration: none;
}
#currentFloatingFormMenuItem {
    /* background-color: #fff; If we want the selected meny tab to be white... */
    border-top: 2px solid #aaa;
    border-bottom: 2px solid #aaa;
    border-left: 2px solid #aaa;
    border-right: 2px solid #aaa;
}
#currentFloatingFormMenuItem a {
    color: #000;
}

/* HELP AND INSTRUCTIONS link in the header */
#cdaHeaderHelpAndInstructionsLink:link {
    color: rgb(255, 255, 255);
}
#cdaHeaderHelpAndInstructionsLink:visited {
    color: rgb(255, 255, 255);
}
#cdaHeaderHelpAndInstructionsLink:active {
    color: rgb(255, 255, 255);
}
#cdaHeaderHelpAndInstructionsLink:hover {
    color: rgb(255, 255, 255);
}


/* Automatic Logout */
@media screen {
    #floatingAutoLogoutFrame[id] {
        position: fixed;
    }
}

@media screen {
    #floatingAutoLogoutFrame {
        position: absolute;
        top: 200px;
        left: 120px;
        width: 520px;
        height: 160px;
        z-index: 10010;     /* Modalbox is 10000 */
        border: 4px solid #ecc66b;
        background-color: #fff;
        padding: 15px;
    }
}

/* TESTING */
@media screen {
    #floatingTestingFrame[id] {
        position: fixed;
    }
}

@media screen {
    #floatingTestingFrame {
        position: absolute;
        top: 300px;
        left: 780px;
        width: 400px;
        height: 160px;
        z-index: 10011;     /* Modalbox is 10000 */
        border: 1px solid black;
        background-color: #fff;
        padding: 5px;
    }
}

.StartPageProgramTable {
    width: 100%;
    border-collapse:collapse;
    border: none;
}

.StartPageOddEvenTable tr:nth-child(even) {
    background-color: #ffffff;
}

.StartPageOddEvenTable tr:nth-child(odd) {
    background-color: #eaeaea;
}

.StartPageOddEvenTable .leftColumn {
    vertical-align: top;
    padding-bottom: 15px;
    padding-top: 7px;
    padding-left: 10px;
    border-top: thin solid blue;
    border-bottom: thin solid blue;
    /* border-bottom: thin dashed gray; */
}
.StartPageOddEvenTable .rightColumn {
    text-align: right;
    width: 80px;
    vertical-align: top;
    padding-bottom: 15px;
    padding-top: 7px;
    padding-right: 10px;
    border-top: thin solid blue;
    border-bottom: thin solid blue;
    /* border-bottom: thin dashed gray; */
}

.myAppsTable {
    width: 100%;
    border-collapse:collapse;
    border: none;
}
.myAppsTableLeftColumn {
    vertical-align: top;
    padding-bottom: 15px;
    padding-left: 5px;
    padding-top: 5px;
    border-top: thin dashed gray;
    border-bottom: thin dashed gray;
}

.myAppsTableMiddleColumn {
    vertical-align: top;
    padding-bottom: 15px;
    padding-top: 5px;
    border-top: thin dashed gray;
    border-bottom: thin dashed gray;
}
.myAppsTableRightColumn {
    text-align: right;
    vertical-align: top;
    padding-bottom: 15px;
    padding-top: 5px;
    padding-right: 0;
    border-top: thin dashed gray;
    border-bottom: thin dashed gray;
}

.StartPageLastSelectedApp {
    width: 7px;
    border: none;
    border-top: thin solid #A0C8FF;
    border-bottom: thin solid #A0C8FF;
    background-color: #A0C8FF;
}
.StartPageNotLastSelectedApp {
    width: 7px;
    border: none;
    background-color: transparent;
}