/* html5 elements 2 block, voor mideleeuwse browsers */
article, footer, header, mark, nav, section {display:block;}

/* Taart! Martin */
* { margin: 0; padding: 0; outline: 0; }

body { font-family: Arial, serif; color:black; font-size: 9pt; background: #343434; text-rendering: optimizeLegibility; }
textarea, select, input, button { font-family: Arial, serif;}

/* Frequently used styles */
.left 		{ float: left; }
.right 		{ float: right; }
.center 	{ margin: 0 auto; }
.fullwidth  { width: 100%; }
.inactive 	{ opacity: 0.2; }
.clear      { clear:both; }
.display-block{ display:block;}
.display-none,
.htf        { display:none;}
.loading-icon {vertical-align:-15%;margin-left:5px;display:none;}
.icon       {vertical-align:-15%;}

/* Button styles. Note: Button is also declared at gradient */
.btn {
	padding: 3px 8px;
	border-radius: 7px;
	color: #000;
	border: 1px solid #D6D5D5;
	box-shadow: 0px 1px 0px #AAA9A9;
}
.btn-small { padding: 0; }
.btn:hover { color: #000; border-bottom: 1px solid #D6D5D5; cursor: pointer; }
.btn-sq {
	border-radius: 0;
	box-shadow: 0;
}

/* Common elements */
form * { font-family: Arial, serif; font-size: 9pt; } /* NATHAN: Blergh*/
input[type="submit"], button[type="submit"]:hover{ cursor: pointer; }

a		{ color: #FFF; text-decoration: none;}
a:hover{ color: #AAA9A9; text-decoration: underline;}
a img 	{ border: 0 none; }

/* NATHAN: This makes me very unhappy */
h1, h2, h3, h4, h5, h6 {
	font-size: 13pt;
	margin: 20px 0 20px 20px;
}

/* Header styles */
header div#identity {
    display: flex;
    padding:15px 30px;
    height: 50px;
    background-color: #FFF;
    overflow:hidden;
}
header div#identity a {
    display:block;
}
header div#identity a:first-child {
    max-width:150px;
    height:50px;
}
header div#identity a:first-child:hover {
    border: 0 none;
}
header div#identity a:first-child img {
    object-fit: scale-down;
    width:100%;
    height:100%;
}

@media only screen and (max-width: 599px) {
    /* Add your CSS rules here */
    header div#identity a {
        width: 69px;
    }

    header div#identity form#search input[type="text"] {
        width: 69px !important;
    }
}

header div#identity p {
    color: #9A9A9A;
    font-size: 20px;
    margin: 20px 0 0;
    border-left: 1px solid #D3D3D3;
    padding: 0 0 0 15px;
    height: 35px;
    line-height: 35px;
}

header div#identity form#search {
    margin: 10px 0 0 25px;
    position: relative;
}
header div#identity form#search input[type="text"] {
    width: 133px;
    height: 28px;
    border: 1px solid #C3C2C2;
    padding: 1px 40px 0 20px;
    color: #000;
    font-size: 10pt;
    border-radius: 16px;
    box-shadow: inset 2px 2px 3px #CCC;
}

header div#identity form#search input[type="submit"] {
    width: 31px;
    height: 21px; 
    border: 0 none;
    text-indent: -9999em;
    position: absolute;
    right: 8px;
    top: 5px;
    border-radius: 15px;
    
    background: url('/img/search.png') #D4D4D4 no-repeat;
}

header div#identity a#upload {
    min-width: 90px;
    height: 25px;
    font-size: 9pt;
    margin: 10px 0 0 25px;
    padding: 4px 10px 0 0;
    color: #445561;
    border: 1px solid #D6D5D5;
    line-height: 21px;
    border-radius: 16px;
    
    white-space:nowrap;
}

header div#identity a#upload img {
    float: left;
    margin: 3px 5px 0 15px;
}

/* Content styles */
section#content {
	background: url('/img/bkg-content.jpg') #EAECED repeat-x;
	position: relative;
}

/* Left column */
section#content div#leftcol {
    padding-top:7px;
    width: 60px;
    background: #FFF;
    font-size: 10px;
    position: absolute;
    top: 0;
    bottom: 0;
}

/* Right column */
section#content div#rightcol {
    margin-left: 60px;
}

section#content div#rightcol div#layout {
    border-left: 1px solid #D3D3D3;
    width: 99.9%; /* NOTICE: Dit kan niet de bedoeling zijn TODO: Goed */ 
    min-height: 550px; /* NOITCE: Should be the height off the leftbar with all buttons (aka all modules active) TODO: Scale by child height*/
    position: relative;
}
div#layout div#topbar {
    height: 40px;
    padding: 20px 0 10px 20px;
    width: 96%;
}

div.layout-content {
    padding: 20px;
}

div.layout-content p {
    text-align: justify;
    line-height: 14px;
}

div.homepage p {
    margin-bottom: 20px;
}

div.layout-content h1 {
    margin-top: 0;
    margin-left: 0;
}

section#content div#rightcol div#layout div#user-settings p.label {
    width: 100px;
}

/* Horizontal separator line for content */
section#content div#rightcol div.separator {
    width: 99.9%;
    height: 1px;
    background: #D3D3D3;
    border-bottom: 1px solid #FFF;
    margin: 25px 0 25px 0px;
} 

/* Breadcrumb styles */
section#content div#rightcol div#breadcrumb {
    height: 56px;
    background: url('/img/content-corner.jpg') top left no-repeat;
    line-height: 27px;
    overflow:hidden;
}

div#breadcrumb div#breadcrumb-wrapper {
    height: 56px;
    box-sizing: border-box;
    padding: 15px 0 0 23px;
    font-size: 15pt;
    font-weight: bold;
    
    font-weight: normal;
    font-size: 12pt;
    margin: 1px 12px 0 0;
    color: #000;
}

div#breadcrumb a {
    color: #000;
    margin: 0 12px 0 0;
    white-space:nowrap;
}
div#breadcrumb a:last-child {
    font-size: 12pt;
    font-weight:normal;
    text-decoration: none;
    cursor:default;
}
/** NOTICE: If there is but one child this will overwrite the "last-child"
* That's exactly what we want
**/
div#breadcrumb a:first-child {
    font-size: 14pt;
    font-weight:bold;
    text-decoration: underline;
    cursor:pointer;
}

/** Wicked only child selector !*/
div#breadcrumb a:only-child {
    text-decoration: none;
    cursor:default;
}

div#breadcrumb span {
    margin: 1.5px 12px 0 0;
}

/* Footer partial styles */
footer {
    font-size: 11px;
	height: 40px;
	line-height:40px;
	padding:0 20px;
	
	overflow:hidden;
	color:#fefefe;
	box-sizing: border-box;
	
    background: #383838; /* fallback */
	background: linear-gradient(#828282,#343434); /* W3C */
}

footer a {
    text-decoration:underline; /*overwrite*/
}

/* Gradient classes */
.gr-whitegrey,  .btn {
	background: #ffffff; /* Fallback */
	background: linear-gradient(to bottom,  #ffffff 0%,#efefef 50%,#e8e8e8 50%,#c9c8c8 100%); /* W3C */
}

.gr-greydark {
	background: #fefefe; /* Fallback */
	background: linear-gradient(to bottom,  #fefefe 0%,#d4d4d4 100%); /* W3C */
}

/* Gradient hovers */
header div#identity a#upload:hover,
.btn:hover,
.btn.current {
	background: #FEFEFE; /* Fallback */
	background: linear-gradient(to bottom,  #fefefe 0%,#d8d8d8 50%,#bdbcbc 50%,#8b8b8b 100%); /* W3C */
	
	/* Gradient cannot be placed in class because of hover */
	text-shadow: 0 1px 0 #E0E0E0;
	text-decoration:none;
}

/* theme button general styles*/
.btn-theme {
    border: 0;
    box-shadow: inset 0px 0px 1px rgba(0, 0, 0, 0.7); /* create the illusion of a theme color border */
    color: #FFF; /* text color can not be themed and therefor will limit theme colors **/
    padding: 5px;
    border-radius: 5px;
    font-size: 12px;
    background-image:linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.3));/* fake a color gradient by applying a black one with opacity 0 to 0.3*/
}

.btn-theme:hover {
    background-image:linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.5));
}

/* speech bubbles for tooltips */
.speech-bubble:after {
    border-style: solid;
    content: "";
    display: block;
    position: absolute;
    width: 0;
    
    border-color: #FFFFFF transparent;
    border-width: 0 10px 10px;
    bottom: auto;
    left: 10px;
    right: auto;
    top: -10px;
}

.speech-bubble {
    background-color: #ffffff;
    margin:0;
    padding: 10px;
    position: relative;
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.25);
}

/* general feedback styling */
.feedback-container
{
    clear: both;
    position: relative;
    display: block;
}
.feedback-container .messenger {
    display:block;
    padding:15px;
    padding-left:45px;
    margin-bottom:15px;
    margin-right:10px;
    border-radius:5px;
    background:#5CB85C url('/img/icon-fb-success.png') no-repeat 15px center;
    
    color:white;
    font-size:14px;
    
    overflow:hidden;
    /*position: absolute;*/
    /*float: left;*/
    width: calc(100% - 10px); /* width - margin right */
    box-sizing: border-box;
    
    cursor:pointer;
}
.feedback-container .messenger.err {
    background-color:#D9534F;/* overwrites */
    background-image:url('/img/icon-fb-error.png');
}

.feedback-container .messenger.notice {
    background-color:#2986ce;/* overwrites */
    background-image:url('/img/icon-fb-info.svg');
}

.feedback-container .messenger::after {
    content: 'X';
    position: absolute;
    right: 25px;
}

/* GENERAL for the dialog - bit overkill to introduce a diffrent file for this */
.bbdialog {
    background-color:white;
    border-radius: 5px;
    box-shadow: 0 0 2px #373737;
    padding:10px;
}

.ui-dialog {
    /* Joe important. Override default jquery ui dialog z-index */
    /* NATHAN 2017-06: Red flag, red flag! Why?? */
    z-index: 110000 !important;
}

/* NATHAN 2017-06: This is done to make sure the dialog is on top (see above) */
/* Jquery ui puts this on "z-index: 9999;" which is pretty FUBAR */
.ui-tooltip {
    z-index: 109999 !important;
}

.left-menu-tooltip {
    background-color: #fff;
    font-weight:bold;
}

.bbdialog .ui-dialog-title {
    height:20px;
    line-height:20px;
    color:black;
    font-size: 18px;
}

.bbdialog .ui-dialog-titlebar-close {
    background:white url('/img/icon-dialog-close.png') no-repeat center center;
    border:0;
    right:10px;
}

.bbdialog .ui-dialog-buttonset .ui-button {

    color: #525252;
    height: 22px;

    border: 1px solid #D6D5D5;
    border-radius: 3px;
    padding: 0 5px;

    background: linear-gradient(to bottom, #FFFFFF 0%, #EFEFEF 50%, #E8E8E8 50%, #C9C8C8 100%) repeat scroll 0 0 rgba(0, 0, 0, 0);
    
    font-family: Arial,serif;
    font-size: 9pt;
}

.bbdialog .ui-dialog-buttonset .ui-button:hover {
	background: #FEFEFE; /* Old browsers */
	background: linear-gradient(to bottom,  #fefefe 0%,#d8d8d8 50%,#bdbcbc 50%,#8b8b8b 100%); /* W3C */
	text-shadow: 0 1px 0 #E0E0E0;
	text-decoration:none;
}

/* maar natuurlijk staat dit buiten de container waaraan de custom style class "bbdialog" wordt toegekend ...*/
.ui-widget-overlay {
    background-color:black;
    opacity: .5;
}

/* SPECIFICS for the dialog - bit overkill to introduce a different file for this*/
.bbdialog #dialog-add-filetag input[type=text],
.bbdialog #dialog-add-filefolder input[type=text] {
    width:470px;
    height:24px;
    border:solid 1px #d5d4d4;
    border-radius:3px;
    margin:15px 0;
}

/* HACK: This is for dialog (popins). The confirm buttons are renderd left from the cancel button
    to make sure on enter we confirm, not cancel. Here we now place the confirm button on the right: */
.bbdialog .ui-dialog-buttonset button:first-child {
    float:right;
}

/* Styles and overwrites for jquery ui datepicker */
#ui-datepicker-div {
    background-color:white;
    font-weight:bold;
    color:#565555;
    font-size:12px;
    border-radius:5px;
    box-shadow:0px 2px 5px 0px rgba(0, 0, 0, 0.3);
}

#ui-datepicker-div table {
    font-size:inherit;
}

#ui-datepicker-div a {
    font-weight:inherit;
    color:inherit;
}

#ui-datepicker-div table {
    font-size:inherit;
}

#ui-datepicker-div table tbody td a,
#ui-datepicker-div table tbody td span {
    text-align: center;
}

#ui-datepicker-div table tbody td.ui-state-disabled span {
    font-weight:normal;
    color:#b7b6b6;
}

#ui-datepicker-div .ui-datepicker-calendar thead th {
    color:#b7b6b6;
    font-weight:normal;
}

#ui-datepicker-div .ui-datepicker-prev a, 
#ui-datepicker-div .ui-datepicker-next a {
    cursor:pointer;
}

#ui-datepicker-div .ui-datepicker-prev span.ui-icon,
#ui-datepicker-div .ui-datepicker-next span.ui-icon {
    color:#565555;
    text-indent:0; /* Don't ask me why but jqueryUi defaults this to -99999 */
    cursor:pointer;
    /*font-size:16px;*/
}

#ui-datepicker-div .ui-datepicker-today,
#ui-datepicker-div .ui-datepicker-current-day {
    border-radius:5px;
    background-color:#d3d3d3;
    color:white;
}

#ui-datepicker-div .ui-datepicker-prev-hover,
#ui-datepicker-div .ui-datepicker-next-hover {
    /* Don't ask my why but jquery ui sets these to 2px and to 1px on hover */
	top: 2px;
}

.ui-datepicker .ui-datepicker-prev-hover {
    /* Don't ask my why but jquery ui sets these to 2px and to 1px on hover */
	left: 2px;
}
.ui-datepicker .ui-datepicker-next-hover {
    /* Don't ask my why but jquery ui sets these to 2px and to 1px on hover */
	right: 2px;
}