@charset "UTF-8";
/* 
    ProdaXo core library - Webapplication Framework
    Copyright (C) 2008-2010 Network Design GmbH

    This program is free software: you can redistribute it and/or modify
    it under the terms of the GNU General Public License as published by
    the Free Software Foundation, either version 3 of the License, or
    (at your option) any later version.

    This program is distributed in the hope that it will be useful,
    but WITHOUT ANY WARRANTY; without even the implied warranty of
    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
    GNU General Public License for more details.

    You should have received a copy of the GNU General Public License
    along with this program.  If not, see <http://www.gnu.org/licenses/>.
*/


/*  MASTER LAYOUT STYLESHEET
    Do not make changes to this file! 
    If you like to adjust the layout place your own files in: 
     .../htdocs/template/default/css      (Application wide styles) 
     .../htdocs/{modulename}/default/css  (Module specific styles) 
*/

@font-face {
  font-family: 'Ubuntu';
  font-style: normal;
  font-weight: 400;
  src: local('Ubuntu'), url(../font/ubuntu/regular.woff) format('woff');
}
@font-face {
  font-family: 'Ubuntu bold';
  font-style: normal;
  font-weight: 700;
  src: local('Ubuntu Bold'), local('Ubuntu-Bold'), url(../font/ubuntu/bold.woff) format('woff');
}

/* BEGIN BASE LAYOUT SECTION */
/* layout container (encloses all other layout parts) */
/* body, textarea, input[type=text] {  */
body, textarea, input {  
    font-family: ubuntu, sans-serif;
}

body.pc, body.pc textarea, body.pc input {
    font-size: 10pt;
}

body.tablet, body.tablet textarea, body.tablet input, body.tablet button {
    font-size: 14pt;
}

a {
    text-decoration: none;
    /* color: #000000; */
}

a.Selected {
    font-weight: bold;
}

h1 {
    margin: 0px;
}

body.tablet h1 {
   font-size: 20pt; 
}

body.tablet h2 {
   font-size: 15pt; 
}

body {
    margin: 0px;
}

#divPage {
    /* position: absolute; */
    /* width: 960px; */
    /* top: 0px; */
    /* left: 50%; */
    /* margin-left: -480px; */
    /* margin-top: 80px; */
    /* background-color: #e6e6e6; */
    color: #333333; /* #000000; */ /* GR style */
}

#divPage.Test {
   /* background: url(../img/test.png) no-repeat center center; */
   /* background: url(../img/test.png); */
   outline: 5px solid red;
   /* border: 51px solid transparent;
   border-image: url(../img/test_b.png) 51 stretch; */
}

body.pc #divPage {
    position: absolute;
    width: 960px;
    /* height: 844px; */
    /* top: 0px;
    margin-top: 80px; */
    top: 50%;
    margin-top: -398px; /* -392px; */
    left: 50%;
    margin-left: -480px;
    /* background-color: red; */
}

@media screen and (max-height: 768px) {
    body.pc #divPage {
        top: 0px;
        margin-top: 0px;
    }
}

body.tablet #divPage {
    position: relative;
}

body.tablet.portrait #divPage {
    width: 768px;
    height: 928px;
}

body.tablet.landscape #divPage {
    width: 1024px;
    height: 672px;
}

/* @media screen and (orientation: landscape) {
    body.tablet #divPage {
        width: 1024px;
        height: 672px;
        background-color: red;
    }
} */

#divHeader, #divSubHeader {
    /* width: 960px; */
    height: 20px; /* 35px; */ /* 30px; */
    /* background-color: red; */
}

#divHeader a, #divSubHeader a {
    color: #1e0fbe;
}

body.pc #divHeader, body.pc #divSubHeader {
    max-width: 960px;
}

body.tablet.portrait, body.tablet.portrait #divSubHeader #divHeader {
    width: 768px; /* 640px; */
}

body.tablet.landscape #divHeader, body.tablet.landscape #divSubHeader {
    width: 1024px;
}

#divNavigations {
    float: left;
    width: 640px; /* 570px; */ /* 578px; */
    /* height: 100%; */
    /* background-color: yellow; */
}

#divNavigations div.Navigation {
    display: inline-block;
    height: 16px;
    padding: 2px 10px 2px 10px;
    float: left;
}

#divNavigations div.Navigation:not(:last-child) {
    border-right: 1px solid #1e0fbe;
}

#divNavigations div.Navigation.Selected {
    font-weight: bold;
}

#divLanguages {
    line-height: 20px; /* 39px; */
    /* margin-right: 0.25em; */ /* 10px; */
    float: left;
    /* background-color: green; */
}

#divLanguages div.DropDownStarter {
    width: 50px;
    /* text-align: center; */
    /* background-color: green; */
}

#divPrivacy {
    background: url(../img/app/eye.png) no-repeat left center;
    width: 29px;
    height: 20px;
    margin-left: 10px;
    float: left;
    cursor: pointer;
}

#divUser {
    float: right;
    line-height: 20px;
    margin-left: 0.25em;
}

#divUser div.MenuStarter {
    display: inline-block;
    color: #1e0fbe;
    width: 190px;
    margin-right: 3px;
    text-align: right;
    white-space: nowrap;
    overflow: hidden;
    float: left;
}

#divCommand {
    width: 320px;
    float: left;
}

#divCarousel {
    position: relative;
}

body.pc #divCarousel {
    /* width: 960px; */
    /* background-color: red; */
}

body.pc #divCarousel.c12 {
    height: 40px; /* 60px; */
    /* background-color: #00a0e5; */ /* #f4f4f4; */ /* GR style */
    background-image: linear-gradient(to right, #fff , #00a0e5);
    background-repeat: no-repeat;
    background-size: 854px 40px; /* 160px 60px; */
    background-position: 106px 0px;
}

/* #divCarousel.c12:after {
    content: " ";
    position: absolute;
    display: block;
    height: 40px;
    left: 180px;
    right: 0px;
    bottom: 10px;
    background-color: #00a0e5;;
} */

body.pc #divCarousel.c8 {
    height: 80px;
}

body.pc #divCarousel.c6 {
    height: 120px;
}

#divCarousel span.Information {
    position: absolute;
    top: 0px;
    left: 0px;
    bottom: 0px;
    text-align: center;
    font-size: 50px;
    background-size: contain;
    background-repeat: no-repeat;
    /* background-position: right center; */
}

body.pc #divCarousel.c12 span.Information {
    width: 160px;
}

body.pc #divCarousel.c8 span.Information {
    width: 240px;
}

body.pc #divCarousel.c6 span.Information {
    height: 320px;
}

#divCarousel div {
    /* background-color: yellow; */
    float: left;
}

body.pc #divCarousel.c12 div {
    width: 80px;
    height: 40px; /* 60px; */
}

body.pc #divCarousel.c8 div {
    width: 120px;
    height: 80px;
}

body.pc #divCarousel.c6 div {
    width: 160px;
    height: 120px;
}

/* #divCarousel div.c121 {
    background: url(../img/app/carousel/size12/p01.png) no-repeat left center;
}

#divCarousel div.c122 {
    background: url(../img/app/carousel/size12/p02.png) no-repeat left center;
} */

/* #divCarousel div.c123 {
    background: url(../img/app/carousel/size12/p03.png) no-repeat left center;
}

#divCarousel div.c124 {
    background: url(../img/app/carousel/size12/p04.png) no-repeat left center;
}

#divCarousel div.c125 {
    background: url(../img/app/carousel/size12/p05.png) no-repeat left center;
}

#divCarousel div.c126 {
    background: url(../img/app/carousel/size12/p06.png) no-repeat left center;
}

#divCarousel div.c127 {
    background: url(../img/app/carousel/size12/p07.png) no-repeat left center;
}

#divCarousel div.c128 {
    background: url(../img/app/carousel/size12/p08.png) no-repeat left center;
}

#divCarousel div.c129 {
    background: url(../img/app/carousel/size12/p09.png) no-repeat left center;
}

#divCarousel div.c1210 {
    background: url(../img/app/carousel/size12/p10.png) no-repeat left center;
}

#divCarousel div.c1211 {
    background: url(../img/app/carousel/size12/p11.png) no-repeat left center;
}

#divCarousel div.c1212 {
    background: url(../img/app/carousel/size12/p12.png) no-repeat left center;
} */

#divCarousel div.c81 {
    background: url(../img/app/carousel/size08/p01.png) no-repeat left center;
}

#divCarousel div.c82 {
    background: url(../img/app/carousel/size08/p02.png) no-repeat left center;
}

#divCarousel div.c83 {
    background: url(../img/app/carousel/size08/p03.png) no-repeat left center;
}

#divCarousel div.c84 {
    background: url(../img/app/carousel/size08/p04.png) no-repeat left center;
}

#divCarousel div.c85 {
    background: url(../img/app/carousel/size08/p05.png) no-repeat left center;
}

#divCarousel div.c86 {
    background: url(../img/app/carousel/size08/p06.png) no-repeat left center;
}

#divCarousel div.c87 {
    background: url(../img/app/carousel/size08/p07.png) no-repeat left center;
}

#divCarousel div.c88 {
    background: url(../img/app/carousel/size08/p08.png) no-repeat left center;
}

#divCarousel div.c61 {
    background: url(../img/app/carousel/size06/p01.png) no-repeat left center;
}

#divCarousel div.c62 {
    background: url(../img/app/carousel/size06/p02.png) no-repeat left center;
}

#divCarousel div.c63 {
    background: url(../img/app/carousel/size06/p03.png) no-repeat left center;
}

#divCarousel div.c64 {
    background: url(../img/app/carousel/size06/p04.png) no-repeat left center;
}

#divCarousel div.c65 {
    background: url(../img/app/carousel/size06/p05.png) no-repeat left center;
}

#divCarousel div.c66 {
    background: url(../img/app/carousel/size06/p06.png) no-repeat left center;
}

#divTabs {
    /* background-color: #ffffff; */
    /* width: 960px; */
    height: 20px; /* 35px; */ /* 40px; */
    float: left;
}

body.pc #divTabs {
    width: 640px; /* 960px; */
}

body.tablet.portrait #divTabs {
    width: 768px; /* 640px; */
}

body.tablet.landscape #divTabs {
    width: 1024px;
}

#divTabs div.Tab {
    display: inline-block;
    height: 16px;
    padding: 2px 10px 2px 10px;
    float: left;
}

#divTabs div.Tab:not(:last-child) {
    border-right: 1px solid #1e0fbe;
}

#divTabs div.Tab.Selected {
    /* background-color: #2cb3ea; */
    font-weight: bold;
}

#divListFilter {
    width: 240px;
    height: 19px;
    padding-top: 1px;
    float: left;
    background: url(../img/listfilter.png) no-repeat 1px center;
}

/* #divListFilter > span.ListFilterCount {
    background-color: yellow;
} */

#txtListFilter {
    width: 180px; /* 218px; */ /* 90%; */
    margin-left: 22px;
    border-style: none;
}

#divAction {
    display: inline-block;
    height: 16px;
    padding-top: 2px;
    padding-bottom: 2px;
    float: right;
    cursor: default;
}

#divActionStarter {
    width: 79px;
    text-align: right;
    color: #1e0fbe;
}

body.pc #divPage > div {
    box-sizing: border-box;
    width: 100%;
    float: left;
}

body.pc #divContainer.User {
    min-height: 727px; /* 723px; */
}

body.pc #divContainer.Guest {
    height: 632px; /* 672px; */ /* 595px; */
}

body.tablet.portrait #divContainer {
    height: 823px; /* 831px; */ /* 824px; */
    width: 768px; /* 640px; */
}

body.tablet.landscape #divContainer {
    height: 567px; /* 566px; */
    width: 1024px;
}

body.pc #divFooter {
    /* width: 958px; */
    height: 79px; /* 156px; */ /* 154px; */ /* 144px; */ /* GR style */
    /* padding-top: 20px; */ /* 8px; */
    /* border: 1px solid #cccccc; */ /* GR style */
    background-color: /* #ffffff; */ #f4f4f4; /* GR style */    
    color: #898f96; /* #6ab6fc; */
    text-align: center; /* GR style */
    font-size: 14px;
    padding-left: 4px;
    padding-top: 30px;
    /* background-image: url(../img/graylogo.png); */ /* GR style */
    /* background-image: url(../img/logo.png); */ /* GR style */
    /* background-size: 100px 60px; /* GR style */
    /* background-repeat: no-repeat; */ /* GR style */
    /* background-position: 850px 90px; */ /* 20px 0px; */ /* GR style */
}

/* GR style */
body.pc #divFooter > a {
    /* display: block; */
    color: #898f96; /* #6ab6fc; */
    letter-spacing: 0.5px;
}

body.pc #divFooter strong {
    font-size: 17px;
}

body.tablet #divFooter {
    /* width: 768px; */ /* 638px; */
    height: 30px;
    /* background-color: #ffffff; */
    /* font-size: 1.5em; */
    /* float: left; */
}

body.tablet.portrait #divFooter {
    width: 768px; /* 638px; */
}

body.tablet.landscape #divFooter {
    width: 1024px;
}

#divFunctions, #divProjects, #divWhoWeAre {
    /* width: 192px; */
    padding-left: 20px;
    height: 138px; /* 142px; */
    border-right: 1px solid #cccccc;
    float: left;
}

#divFunctions, #divProjects {
    width: 192px;
}

#divWhoWeAre {
    width: 193px;
}

body.pc #divLogo {
    width: 298px; /* 318px; */
    height: 140px;
    padding-left: 20px;
    background-image: url(../img/graylogo.png);
    background-repeat: no-repeat;
    background-position: 208px 85px; /* 20px 0px; */
    float: left;
}

body.tablet #divLogo {
    line-height: 30px;
    color: #555555;
    float: right;
}

#divLiteFooter {
    font-size: 12px;
    /* margin-top: 4px; */
    height: 21px; /* 16px; */
    line-height: 21px;
    border-top: 1px solid #aaaaaa;
}

#divLiteFooter a {
    color: #1e0fbe;
}

/*
    Page column layout 
*/
body.pc div.PageColumnPane {
    /* Column navigator has position: absolute,
     * so, this must be relative
     */
    position: relative;
    /* float: left; */
}

body.pc div.PageColumnPane.Filterless {
    height: 727px; /* 723px; */ /* 593px; */
    width: 960px;
    /* border: 1px solid black; */
    overflow: hidden;
    /* clear: both; */
}

body.tablet div.PageColumnPane {
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

body.tablet.portrait div.PageColumnPane {
    height: 780px;
    width: 768px;
}

body.tablet.landscape div.PageColumnPane {
    height: 523px;
    width: 1024px;
    /* background-color: yellow; */
}

body.pc div.PageColumnWithoutFilter {
    width: 309px; /* 304px; */
    height: 723px; /* 579px; */
    /* background-color: red; */
}

body.tablet.portrait div.PageColumnWithoutFilter {
    width: 368px;
    height: 807px;
}

body.tablet.landscape div.PageColumnWithoutFilter {
    width: 325px;
    height: 550px;
}

body.pc div.PageColumnWithFilter {
    width: 304px;
    height: 534px;
}

body.tablet.portrait div.PageColumnWithFilter {
    width: 368px;
    height: 763px;
}

body.tablet.landscape div.PageColumnWithFilter {
    width: 325px;
    height: 506px;
}

div.PageColumn {
    padding: 8px 3px 0px 8px;
    float: left;
}

div.PageColumn.Invisible {
    display: none;
}

div.PageColumnSection {
    margin-bottom: 8px;
}

div.PageColumnSection.Invisible {
    display: none;
}

div.ListCaption {
    margin-bottom: 5px;
    font-size: 14pt;
    font-weight: bold;
    color: #2cb3ea;
}

div.ListCaption button {
    float: right;
    margin-right: -5px;
}

div.PageColumn ul {
    margin: 0px;
    padding: 0px;
    list-style: none;
}

div.PageColumn ul li {
    margin: 0px;
    padding: 0px;
    height: 1.35em; /* 18px; */
    cursor: pointer;
}

div.PageColumn ul li.DisabledLogin {
    font-style: italic;
}

body.pc div.PageColumn ul li:hover {
    background-color: #dddddd;
}

span.ListColumn {
    display: inline-block;
    float: left;
}

body.pc div.PageColumn span.ListColumn {
    line-height: 16px;
}

body.tablet div.PageColumn span.ListColumn {
    line-height: 21px;
}

span.ListColumnNumber {
    text-align: right;
    margin-right: 4px;
}

span.ListColumnCheckbox {
    width: 1em;
    height: 1em;
    margin-top: 1px;
    border: 1px solid #999999;
}

span.ListColumnCheckboxChecked {
    background: url(../img/checkmark.png) no-repeat center center;
}

span.ListColumnDelete {
    width: 16px;
    text-align: center;
    float: right;
}

span.ListColumnDelete:hover {
    background-color: #bbbbbb;
}

span.Former, span.NotInUse, span.Inactive {
    color: #bbbbbb;
}

li.NotInUse span {
    color: #bbbbbb;
}

/* 
 * Tooltip gray
 */
/* div.Tooltip {
    display: none;
    position: absolute;
    border: 1px solid #000000;
    color: #000000;
    font-size: x-small;
    background-color: #bbbbbb !important;
}

table.AbsenceHistory tr.HistoryHeader {
    border-top: 1px solid gray;
    border-bottom: 1px solid gray;
}

table.AbsenceHistory tr:not(:first-child):not(:last-child) {
    border-bottom: 1px dotted gray;
}

table.AbsenceHistory th:not(:last-child), table.AbsenceHistory td:not(:last-child) {
    border-right: 1px dotted gray;
    text-align: center;
}

table.AbsenceHistory th {
    font-size: 8pt;
}

table.AbsenceHistory td.HistoryComment {
    width: 200px;
    overflow: wrap;
    text-align: left;
} */


/* 
 * Tooltip blue
 */
div.Tooltip {
    display: none;
    position: absolute;
    /* border: 1px solid #0000aa;
    color: #ffffff;
    background-color: #2cb3ea !important; */
    font-size: x-small;
    white-space: nowrap;
    overflow: hidden;
}

div.Tooltip.StandardColor {
    border: 1px solid #0000aa;
    color: #ffffff;
    background-color: #2cb3ea !important;
}

div.Tooltip.SimpleColor {
    border: 1px solid #888888;
    /* color: #ffffff; */
    background-color: #ffffff !important;
}

div.Tooltip.FarColor {
    border: 1px solid #0000aa;
    color: #000000;
    background-color: lightblue !important;
}

div.WarningTooltip {
    display: none;
    position: absolute;
    border: 1px solid #ffffff;
    color: #ffffff;
    background-color: red !important;
}

table.History {
    display: none;
}

table.History tr.HistoryHeader {
    border-top: 1px solid #ffffff;
    border-bottom: 1px solid #ffffff;
}

table.History tr:not(:first-child):not(:last-child) {
    border-bottom: 1px dotted #ffffff;
}

table.History th:not(:last-child), table.History td:not(:last-child) {
    border-right: 1px dotted #ffffff;
    text-align: center;
}

table.History th {
    font-size: 8pt;
}

table.History td.HistoryComment {
    width: 200px;
    white-space: normal;
    text-align: left;
}

table.History span.Lock {
    display: inline-block;
    width: 17px;
}

table.MarkExplanation {
    display: none;
}

table.MarkExplanation tr.Header {
    border-top: 1px solid #ffffff;
    border-bottom: 1px solid #ffffff;
}

table.MarkExplanation tr:not(:first-child):not(:last-child) {
    border-bottom: 1px dotted #ffffff;
}

table.MarkExplanation th.RightAlign,
table.MarkExplanation td.RightAlign {
    text-align: right;
}

/* table.MarkExplanation td:not(:last-child) { */
table.MarkExplanation td {
    border: 1px dotted #ffffff;
}

table.MarkExplanation th {
    font-size: 8pt;
}

table.MarkExplanation td.RowHeader {
    width: 80px;
}

table.MarkExplanation td.StudentDesc {
    min-width: 120px;
}

table.MarkExplanation td.Sum {
    width: 50px;
}

table.MarkExplanation td.Weight {
    width: 30px;
    vertical-align: bottom;
}

div.MsgBox #hErrorApologyCaption,
div.MsgBox #pErrorApologyBody,
div.MsgBox #pErrorApologyThanks {
    padding-left: 10px;
    max-width: 950px;
}