@import http://fonts.googleapis.com/css?family=Raleway;
/*
//==========================================================================================================================
// Intranet core styling.
//
// Last modified: 01.12.17
// Author: Romet Saarna (aka TheKuru) http://wizil.ee
//==========================================================================================================================
*/


/* -------------------------------------------------------------------------------------------------- */
/* Body styling used throughout entire intranet */
/* -------------------------------------------------------------------------------------------------- */
html, body {
 background-color: #000000;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
 color: #C0C0C0;
 opacity: 1;
 filter: alpha(opacity=100);
 height: 100%;
 min-height: 100%;
 padding: 0;
 margin: 0;
}
/* -------------------------------------------------------------------------------------------------- */


/* -------------------------------------------------------------------------------------------------- */
/* MAIN MENU; main_page.php */
/* -------------------------------------------------------------------------------------------------- */
/* holds main menu */
.mainpage-mainmenu-container {
 top: 0px;
 width: 100%;
 background-color: #333;
 overflow: hidden;
}

/* define some default values */
.mainpage-mainmenu {
 font-size: 10px;
 font-weight: 700;
 font-family: helvetica, arial, sans-serif;
 text-transform: uppercase;
}

/* left side container */
.mainpage-mainmenu-leftside {
 position: relative;
 float: left;
 display: inline-block;
}

/* right side container */
.mainpage-mainmenu-rightside {
 position: relative;
 float: right;
 display: inline-block;
}

/* menu item */
.mainpage-mainmenu-item {
 display: inline-block;
 width: 100px;
 background-color: #333;
 text-align: center;
 color: #FAF0E6;
 padding-bottom: 5px;
}
.mainpage-mainmenu-item:hover {
 background-color: #708090;
 color: #FAF0E6;
 text-decoration: none;
}
.mainpage-mainmenu-item.mainpage-mainmenu-item-exit:hover {
 background-color: red;
 color: #FAF0E6;
 text-decoration: none;
}
.mainpage-mainmenu-item-globalsearch {
 display: inline-block;
 background-color: #333;
 text-align: left;
 color: #FAF0E6;
}

/* make menu item active */
.mainpage-mainmenu-item-active {
 background-color: #4CAF50;
}

/* left menu items uses right border */
.mainpage-mainmenu-item-rightborder {
 border-right: 1px solid #bbb;
}
/* right menu items uses left border */
.mainpage-mainmenu-item-leftborder {
 border-left: 1px solid #bbb;
}

/* change font awesome icon size */
.mainpage-mainmenu-item-icon {
 font-size: 27px;
}

/* main menu global search */
.mainpage-mainmenu-item-globalsearch-box {
 display: inline-block;
 position: absolute;
 margin-top: -50px;
 width: 150px;
 box-sizing: border-box;
 border: 2px solid #ccc;
 border-radius: 4px;
 font-size: 16px;
 background-color: white;
 background-image: url('../images/searchicon.png');
 background-position: 10px 10px; 
 background-repeat: no-repeat;
 padding: 12px 20px 12px 40px;
 -webkit-transition: width 0.4s ease-in-out;
 transition: width 0.4s ease-in-out;
 font-size: 12px;
 color: black;
}
.mainpage-mainmenu-item-globalsearch-box:focus {
 width: 350px;
}
/* -------------------------------------------------------------------------------------------------- */


/* -------------------------------------------------------------------------------------------------- */
/* MAIN IFRAME; main_page.php */
/* -------------------------------------------------------------------------------------------------- */
.mainpage-iframe-container {
 top: 75px;
 left: 0;
 width: 100%;
 height: -webkit-calc(100% - 100px);
 height: -moz-calc(100% - 100px);
 height: calc(100% - 100px);
}
.mainpage-iframe {
 width: 100%;
 height: 100%;
 overflow: auto;
}
/* -------------------------------------------------------------------------------------------------- */


/* -------------------------------------------------------------------------------------------------- */
/* Header used to describe every intranet section */
/* -------------------------------------------------------------------------------------------------- */
.mainframeheader {
 width: -webkit-calc(100% - 20px);
 width: -moz-calc(100% - 20px);
 width: calc(100% - 20px);
 margin-left: 10px;
 margin-top: 10px;
 border-bottom: 2px solid #CCC;
 padding-bottom: 3px;
 font-family: Tahoma, Geneva, Arial, sans-serif;
 color: #FFF8DC;
 font-size: 34px;
 font-weight: normal;
 letter-spacing: 0.2em;
 box-sizing: border-box;
}


/* -------------------------------------------------------------------------------------------------- */
/* Footer that is used to display copyright notes and module versions throughout entire intranet */
/* -------------------------------------------------------------------------------------------------- */
p.signature_fixedatbottom {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  font-family: Tahoma, Geneva, Arial, sans-serif;
  color: #F5F5DC;
  font-size: 11px;
  text-decoration: none;
  font-weight: normal;
}
p.signature_fixedatbottom  a {
  color: #F5F5DC;
  background-color: transparent;
  text-decoration: none;
}
p.signature_fixedatbottom a:hover {
  color: red;
  background-color: transparent;
  text-decoration: underline;
}

p.signature_dynamic {
  position: relative;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 0%);
  margin-top: 50px;
  text-align: center;
  font-family: Tahoma, Geneva, Arial, sans-serif;
  color: #F5F5DC;
  font-size: 11px;
  text-decoration: none;
  font-weight: normal;
}
p.signature_dynamic  a {
  color: #F5F5DC;
  background-color: transparent;
  text-decoration: none;
}
p.signature_dynamic a:hover {
  color: red;
  background-color: transparent;
  text-decoration: underline;
}

p.global-footer-fixedandvisible {
 position: fixed; 
 bottom: 0px; 
 width: 100%; 
 height: 15px; 
 background-color: black;
 color: #FFF5EE;
 text-align: center;
 font-family: Tahoma, Geneva, Arial, sans-serif;
 color: #F5F5DC;
 font-size: 11px;
 text-decoration: none;
 font-weight: normal;
 padding-top: 5px;
}
p.global-footer-fixedandvisible  a {
  color: #F5F5DC;
  background-color: transparent;
  text-decoration: none;
}
p.global-footer-fixedandvisible a:hover {
  color: red;
  background-color: transparent;
  text-decoration: underline;
}
/* -------------------------------------------------------------------------------------------------- */


/* -------------------------------------------------------------------------------------------------- */
/* Drop down pointy menu */
/* -------------------------------------------------------------------------------------------------- */
.dropdownmenu-pointy > ul  > li {
 position: relative;
 list-style-type: none;
 list-style: none;
 left: 0;
 margin-left: 0;
 display: inline-block;
 text-align: center;
}
.dropdownmenu-pointy > ul  > li:hover {
 outline: 1px solid red;
}

.dropdownmenu-pointy > ul > li > a{
 color: inherit;
 text-decoration: none !important;
 font-size: 24px;
 padding: 25px;
}

.dropdownmenu-pointy li ul{
 position: absolute;
 list-style: none;
 text-align: center;
 width: 180px;
 margin-top: -15px;
 font: bold 12px 'Open Sans Condensed', sans-serif;
 display: block;
 /* This is important for the show/hide CSS animation */
 max-height: 0px;
 overflow: hidden;
 -webkit-transition: max-height 0.4s linear;
 -moz-transition: max-height 0.4s linear;
 transition: max-height 0.4s linear;
 z-index: 9999;
}
.dropdownmenu-pointy li ul.center{
 left: 0;
 transform: translate(-50%, 0%);
}
.dropdownmenu-pointy li ul.left{
 margin-left: -200px;
}
.dropdownmenu-pointy li ul.right{
 margin-left: -55px;
}

.dropdownmenu-pointy li ul li{
 background-color: #313131;
}

.dropdownmenu-pointy li ul li a{
 padding: 12px;
 color: #fff !important;
 text-decoration: none !important;
 display: block;
}
/* zebra stripes */
.dropdownmenu-pointy li ul li:nth-child(odd){
 background-color: #363636;
}

.dropdownmenu-pointy li ul li:hover{
 background-color: #444;
}

.dropdownmenu-pointy li ul li:first-child{
 border-radius: 3px 3px 0 0;
 margin-top: 25px;
 position: relative;
}
/* the pointer tip center */
.dropdownmenu-pointy li ul.center li:first-child:before{
 content: '';
 position: absolute;
 width: 1px;
 height: 1px;
 border: 5px solid transparent;
 border-bottom-color: #313131;
 left: 50%;
 top: -10px;
 margin-left: -5px;
}
/* the pointer tip left */
.dropdownmenu-pointy li ul.left li:first-child:before{
 content: '';
 position: absolute;
 width: 1px;
 height: 1px;
 border: 5px solid transparent;
 border-bottom-color: #313131;
 left: 90%;
 top: -10px;
 margin-left: -5px;
}
/* the pointer tip left */
.dropdownmenu-pointy li ul.right li:first-child:before{
 content: '';
 position: absolute;
 width: 1px;
 height: 1px;
 border: 5px solid transparent;
 border-bottom-color: #313131;
 left: 10%;
 top: -10px;
 margin-left: -5px;
}

.dropdownmenu-pointy li ul li:last-child{
 border-bottom-left-radius: 3px;
 border-bottom-right-radius: 3px;
}

/* This will trigger the CSS transition animation on hover */
.dropdownmenu-pointy li:hover ul{
 max-height: 380px; /* Increase when adding more dropdown items */
}

/* -------------------------------------------------------------------------------------------------- */


/* -------------------------------------------------------------------------------------------------- */
/* Tooltip on mouse hoover */
/* -------------------------------------------------------------------------------------------------- */
a.tooltip {
 position: relative; /*this is the key*/
 z-index: 24;
 font-family: Tahoma, Geneva, Arial, sans-serif;
 text-decoration: none;
 font-weight: normal;
 cursor: help;
 -webkit-transition-duration: 0.4s;
 transition-duration: 0.4s;
}
a.tooltip:hover{
 z-index: 25;
 font-weight: bold;
}

.tooltip-color-navy {
 color: navy;
}

.tooltip-color-red {
 color: red;
}

.tooltip-color-white {
 color: white;
}


a.tooltip span{
  display: none;
}
a.tooltip:hover span{ /*the span will display just on :hover state*/
  display: block;
  position: absolute;
  top: 1.5em;
  left: -12em;
  width: 15em;
  border: 2px solid white;
  background-color: #1F1F1F;
  color: white;
  text-align: center;
  font-weight: normal;
}
/* -------------------------------------------------------------------------------------------------- */


.globaldebugmsg {
 font-family: "Courier New", Courier, monospace;
 font-size: 12px;
 color: white;
}
.globaldebugmsg-table table {
 border-collapse: collapse;
 border: none;
 font-family: "Courier New", Courier, monospace;
 font-size: 12px;
 color: white;
}
.globaldebugmsg-table td {
 border-collapse: collapse;
 border: none;
 font-family: "Courier New", Courier, monospace;
 font-size: 12px;
 color: white;
}
.globaldebugmsg-table th {
 border-collapse: collapse;
 border: none;
 font-family: "Courier New", Courier, monospace;
 font-size: 12px;
 color: white;
}
.globaldebugmsg-table tr {
 border-collapse: collapse;
 border: none;
 font-family: "Courier New", Courier, monospace;
 font-size: 12px;
 color: white;
}



/* ---Dividing line --- */
.linedevider {
  width: 100%;
  align: left;
}




/* -------------------------------------------------------------------------------------------------- */
/* avatar image uploader popup
/* -------------------------------------------------------------------------------------------------- */
/* Fog out entire page */
#popup-fogout-avataruploader {
 width: 100%;
 height: 100%;
 opacity: 0.97;
 top: 0;
 left: 0;
 display: none;
 position: fixed;
 background-color: #313131;
 overflow: auto
}

/* add/edit news popup window itself */
div#popup-border-avataruploader {
 position: absolute;
 top: 0px;
 left: 50%;
 transform: translate(-50%, 0);
 width: 218px;
 height: 450px;
 margin-top: 30px;
 border: 2px solid white;
 background-color: black;
}

div#popup-captionbar-avataruploader {
 background-color: #1162c5;
 width: 218px;
 height: 40px;
 left: 0;
 top: 0;
 border-bottom: 2px solid white;
}

iframe#popup-iframe-avataruploader {
 width: 100%;
 height: 350px;
 /*height: 400px;*/
 top: 0;
 margin-top: 30px;
 margin-bottom: 30px;
 padding: 0px;
 border: none;
 vertical-align: middle;
}

/* Close button on the right top corner */
img#close-button-orange {
 position:absolute;
 right:-14px;
 top:-14px;
 cursor:pointer;
}

/* Close button on the right top corner */
img#close-button-red {
 position: absolute;
 right: 4px;
 top: 4px;
 cursor: pointer;
 -webkit-transition-duration: 0.4s;
 transition-duration: 0.4s;
}
img#close-button-red:hover {
 opacity: 0.6;
 filter: alpha(opacity=60);
}
/* -------------------------------------------------------------------------------------------------- */


/* main.php */
#statisticsheader {
 width: 100%;
 left: 0;
 border-bottom: 1px solid #CCC;
 padding-bottom: 3px;
 font-family: Tahoma, Geneva, Arial, sans-serif;
 color: #FFF8DC;
 font-size: 13px;
 font-weight: bold;
}

#statisticsbody {
 font-family: Tahoma, Geneva, Arial, sans-serif;
 color: #FFF8DC;
 font-size: 11px;
 font-weight: normal;
}

#statisticsversion {
 width: 100%;
 left: 0;
 border-bottom: 1px solid #CCC;
 padding-bottom: 3px;
 font-family: Tahoma, Geneva, Arial, sans-serif;
 color: #F5F5DC;
 font-size: 11px;
 text-decoration: none;
 font-weight: normal;
 text-align: right;
}





/* -------------------------------------------------------------------------------------------------- */
/* Avatar uploader modal popup form */
/* -------------------------------------------------------------------------------------------------- */
/* Popup background, fogout */
.avatarmodalpopup {
 display: none; /* Hidden by default */
 position: fixed; /* Stay in place */
 z-index: 1; /* Sit on top */
 padding-top: 70px; /* Location of the box */
 left: 0;
 top: 0;
 width: 100%; /* Full width */
 height: 100%; /* Full height */
 overflow: auto; /* Enable scroll if needed */
 background-color: rgb(0,0,0); /* Fallback color */
 background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
 z-index: 999;
}

/* Content */
.avatarmodalpopup-content {
 position: relative;
 background-color: #fefefe;
 margin: auto;
 padding: 0;
 border: 1px solid #888;
 width: 60%;
 box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
 -webkit-animation-name: avatarmodalpopupanimatetop;
 -webkit-animation-duration: 0.4s;
 animation-name: avatarmodalpopupanimatetop;
 animation-duration: 0.4s
 z-index: 9999;
}

/* Add Animation */
@-webkit-keyframes avatarmodalpopupanimatetop {
 from {top:-300px; opacity:0}
 to {top:0; opacity:1}
}
@keyframes avatarmodalpopupanimatetop {
 from {top:-300px; opacity:0}
 to {top:0; opacity:1}
}

/* Close button */
.avatarmodalpopup-closebutton {
 color: white;
 float: right;
 font-size: 28px;
 font-weight: bold;
}
.avatarmodalpopup-closebutton:hover, .avatarmodalpopup-closebutton:focus {
 color: #000;
 text-decoration: none;
 cursor: pointer;
}

/* Header */
.avatarmodalpopup-header {
 padding: 2px 16px;
 background-color: #5cb85c;
 color: white;
}

/* Body */
.avatarmodalpopup-body {
 padding: 2px 16px;
 height: 340px;
 max-height: 350px;
 overflow-y: auto;
 background-color: silver;
}

/* Iframe, if used */
.avatarmodalpopup-iframe {
 width: 100%;
 height: 98%;
 border: none;
}

/* Footer */
.avatarmodalpopup-footer {
 padding: 2px 16px;
 background-color: #5cb85c;
 color: white;
}
/* -------------------------------------------------------------------------------------------------- */


/* -------------------------------------------------------------------------------------------------- */
/* Contact card modal popup form */
/* -------------------------------------------------------------------------------------------------- */
/* Popup background, fogout */
.contactcardmodalpopup {
 display: none; /* Hidden by default */
 position: fixed; /* Stay in place */
 z-index: 1; /* Sit on top */
 padding-top: 10px; /* Location of the box */
 left: 0;
 top: 0;
 width: 100%; /* Full width */
 height: 100%; /* Full height */
 overflow: auto; /* Enable scroll if needed */
 background-color: rgb(0,0,0); /* Fallback color */
 background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
 z-index: 999;
}

/* Content */
.contactcardmodalpopup-content {
 position: relative;
 background-color: #fefefe;
 margin: auto;
 padding: 0;
 border: 1px solid #888;
 width: 330px;
 box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
 -webkit-animation-name: contactcardmodalpopupanimatetop;
 -webkit-animation-duration: 0.4s;
 animation-name: contactcardmodalpopupanimatetop;
 animation-duration: 0.4s
 z-index: 9999;
}

/* Add Animation */
@-webkit-keyframes contactcardmodalpopupanimatetop {
 from {top:-300px; opacity:0}
 to {top:0; opacity:1}
}
@keyframes contactcardmodalpopupanimatetop {
 from {top:-300px; opacity:0}
 to {top:0; opacity:1}
}

/* Close button */
.contactcardmodalpopup-closebutton {
 color: white;
 float: right;
 font-size: 28px;
 font-weight: bold;
}
.contactcardmodalpopup-closebutton:hover, .contactcardmodalpopup-closebutton:focus {
 color: #000;
 text-decoration: none;
 cursor: pointer;
}

/* Header */
.contactcardmodalpopup-header {
 padding: 2px 16px;
 background-color: #5cb85c;
 color: white;
}

/* Body */
.contactcardmodalpopup-body {
 padding: 2px 16px;
 height: 590px;
 max-height: 600px;
 overflow-y: auto;
 background-color: silver;
}

/* Iframe, if used */
.contactcardmodalpopup-iframe {
 width: 100%;
 height: 98%;
 border: none;
}

/* Footer */
.contactcardmodalpopup-footer {
 padding: 2px 16px;
 background-color: #5cb85c;
 color: white;
}
/* -------------------------------------------------------------------------------------------------- */


/* -------------------------------------------------------------------------------------------------- */
/* Rules modal popup form */
/* -------------------------------------------------------------------------------------------------- */
/* Popup background, fogout */
.rulesmodalpopup {
 display: none; /* Hidden by default */
 position: fixed; /* Stay in place */
 z-index: 1; /* Sit on top */
 padding-top: 60px; /* Location of the box */
 left: 0;
 top: 0;
 width: 100%; /* Full width */
 height: 100%; /* Full height */
 overflow: auto; /* Enable scroll if needed */
 background-color: rgb(0,0,0); /* Fallback color */
 background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
 z-index: 999;
}

/* Content */
.rulesmodalpopup-content {
 position: relative;
 background-color: #fefefe;
 margin: auto;
 padding: 0;
 border: 1px solid #888;
 width: 70%;
 box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
 -webkit-animation-name: rulesmodalpopupanimatetop;
 -webkit-animation-duration: 0.4s;
 animation-name: rulesmodalpopupanimatetop;
 animation-duration: 0.4s
 z-index: 9999;
}

/* Add Animation */
@-webkit-keyframes rulesmodalpopupanimatetop {
 from {top:-300px; opacity:0}
 to {top:0; opacity:1}
}
@keyframes rulesmodalpopupanimatetop {
 from {top:-300px; opacity:0}
 to {top:0; opacity:1}
}

/* Close button */
.rulesmodalpopup-closebutton {
 color: white;
 float: right;
 font-size: 28px;
 font-weight: bold;
}
.rulesmodalpopup-closebutton:hover, .rulesmodalpopup-closebutton:focus {
 color: #000;
 text-decoration: none;
 cursor: pointer;
}

/* Header */
.rulesmodalpopup-header {
 padding: 2px 16px;
 background-color: #5cb85c;
 color: white;
}

/* Body */
.rulesmodalpopup-body {
 padding: 2px 16px;
 height: 460px;
 max-height: 470px;
 overflow-y: auto;
 background-color: silver;
}

/* Iframe, if used */
.rulesmodalpopup-iframe {
 width: 100%;
 height: 98%;
 border: none;
}

/* Footer */
.rulesmodalpopup-footer {
 padding: 2px 16px;
 background-color: #5cb85c;
 color: white;
}
/* -------------------------------------------------------------------------------------------------- */


/* -------------------------------------------------------------------------------------------------- */
/* Priority dots used module wide */
/* -------------------------------------------------------------------------------------------------- */
.dot {
 width: 8px;
 height: 8px;
 border-radius: 50%;
 display: inline-block;
}
.dot-priority-0 {
 background: #C0C0C0 !important;
}
.dot-priority-1 {
 background: #005BFF !important;
}
.dot-priority-2 {
 background: #0090FF !important;
}
.dot-priority-3 {
 background: #00C6FF !important;
}
.dot-priority-4 {
 background: #00FFFF !important;
}
.dot-priority-5 {
 background: #00FF00 !important;
}
.dot-priority-6 {
 background: #FFFF00 !important;
}
.dot-priority-7 {
 background: #FFC600 !important;
}
.dot-priority-8 {
 background: #FF9000 !important;
}
.dot-priority-9 {
 background: #FF0000 !important;
}
/* -------------------------------------------------------------------------------------------------- */