/*! normalize.css v2.1.0 | MIT License | git.io/normalize */
/* ========================================================================== HTML5 display definitions ========================================================================== */
/** * Correct `block` display not defined in IE 8/9. */
article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary { display: block; } /** * Correct `inline-block` display not defined in IE 8/9. */
audio, canvas, video { display: inline-block; } /** * Prevent modern browsers from displaying `audio` without controls. * Remove excess height in iOS 5 devices. */
audio:not([controls]) { display: none; height: 0; } /** * Address styling not present in IE 8/9. */
[hidden] { display: none; } /* ========================================================================== Base ========================================================================== */
/** * 1. Set default font family to sans-serif. * 2. Prevent iOS text size adjust after orientation change, without disabling * user zoom. */
html { font-family: sans-serif; /* 1 */
-webkit-text-size-adjust: 100%; /* 2 */
-ms-text-size-adjust: 100%; /* 2 */
} /** * Remove default margin. */
body { margin: 0; } /* ========================================================================== Links ========================================================================== */
/** * Address `outline` inconsistency between Chrome and other browsers. */
a:focus { outline: thin dotted; } /** * Improve readability when focused and also mouse hovered in all browsers. */
a:active, a:hover { outline: 0; } /* ========================================================================== Typography ========================================================================== */
/** * Address variable `h1` font-size and margin within `section` and `article` * contexts in Firefox 4+, Safari 5, and Chrome. */
h1 { font-size: 2em; margin: 0.67em 0; } /** * Address styling not present in IE 8/9, Safari 5, and Chrome. */
abbr[title] { border-bottom: 1px dotted; } /** * Address style set to `bolder` in Firefox 4+, Safari 5, and Chrome. */
b, strong { font-weight: bold; } /** * Address styling not present in Safari 5 and Chrome. */
dfn { font-style: italic; } /** * Address differences between Firefox and other browsers. */
hr { -moz-box-sizing: content-box; box-sizing: content-box; height: 0; } /** * Address styling not present in IE 8/9. */
mark { background: #ff0; color: #000; } /** * Correct font family set oddly in Safari 5 and Chrome. */
code, kbd, pre, samp { font-family: monospace, serif; font-size: 1em; } /** * Improve readability of pre-formatted text in all browsers. */
pre { white-space: pre-wrap; } /** * Set consistent quote types. */
q { quotes: "\201C" "\201D" "\2018" "\2019"; } /** * Address inconsistent and variable font size in all browsers. */
small { font-size: 80%; } /** * Prevent `sub` and `sup` affecting `line-height` in all browsers. */
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sup { top: -0.5em; } sub { bottom: -0.25em; } /* ========================================================================== Embedded content ========================================================================== */
/** * Remove border when inside `a` element in IE 8/9. */
img { border: 0; } /** * Correct overflow displayed oddly in IE 9. */
svg:not(:root) { overflow: hidden; } /* ========================================================================== Figures ========================================================================== */
/** * Address margin not present in IE 8/9 and Safari 5. */
figure { margin: 0; } /* ========================================================================== Forms ========================================================================== */
/** * Define consistent border, margin, and padding. */
fieldset { border: 1px solid #c0c0c0; margin: 0 2px; padding: 0.35em 0.625em 0.75em; } /** * 1. Correct `color` not being inherited in IE 8/9. * 2. Remove padding so people aren't caught out if they zero out fieldsets. */
legend { border: 0; /* 1 */
padding: 0; /* 2 */
} /** * 1. Correct font family not being inherited in all browsers. * 2. Correct font size not being inherited in all browsers. * 3. Address margins set differently in Firefox 4+, Safari 5, and Chrome. */
button, input, select, textarea { font-family: inherit; /* 1 */
font-size: 100%; /* 2 */
margin: 0; /* 3 */
} /** * Address Firefox 4+ setting `line-height` on `input` using `!important` in * the UA stylesheet. */
button, input { line-height: normal; } /** * Address inconsistent `text-transform` inheritance for `button` and `select`. * All other form control elements do not inherit `text-transform` values. * Correct `button` style inheritance in Chrome, Safari 5+, and IE 8+. * Correct `select` style inheritance in Firefox 4+ and Opera. */
button, select { text-transform: none; } /** * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` * and `video` controls. * 2. Correct inability to style clickable `input` types in iOS. * 3. Improve usability and consistency of cursor style between image-type * `input` and others. */
button, html input[type="button"], /* 1 */
input[type="reset"], input[type="submit"] { -webkit-appearance: button; /* 2 */
cursor: pointer; /* 3 */
} /** * Re-set default cursor for disabled elements. */
button[disabled], html input[disabled] { cursor: default; } /** * 1. Address box sizing set to `content-box` in IE 8/9. * 2. Remove excess padding in IE 8/9. */
input[type="checkbox"], input[type="radio"] { box-sizing: border-box; /* 1 */
padding: 0; /* 2 */
} /** * 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome. * 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome * (include `-moz` to future-proof). */
input[type="search"] { -webkit-appearance: textfield; /* 1 */
-moz-box-sizing: content-box; -webkit-box-sizing: content-box; /* 2 */
box-sizing: content-box; } /** * Remove inner padding and search cancel button in Safari 5 and Chrome * on OS X. */
input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; } /** * Remove inner padding and border in Firefox 4+. */
button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; } /** * 1. Remove default vertical scrollbar in IE 8/9. * 2. Improve readability and alignment in all browsers. */
textarea { overflow: auto; /* 1 */
vertical-align: top; /* 2 */
} /* ========================================================================== Tables ========================================================================== */
/** * Remove most spacing between table cells. */
table { border-collapse: collapse; border-spacing: 0; } /* This is a very basic stylesheet for the date-picker. Feel free to create your own. */
/* Hide the input by using a className */
input.fd-hidden-input, select.fd-hidden-input { display:none; } /* Screen reader class - hides it from the visual display */
.fd-screen-reader { position:absolute; left:-999em; top:0; width:1px; height:1px; overflow:hidden; outline: 0 none; -moz-outline: 0 none; } /* Disabled datePicker and activation button */
.dp-disabled { opacity:.3 !important; /* This doesn't seem to work for IE... */
filter:alpha(opacity=30); } .dp-disabled, .dp-disabled td, .dp-disabled th, .dp-disabled th span { cursor:default !important; } a.date-picker-control:focus, div.datePicker table td:focus { overflow:hidden; outline:0 none; -moz-outline: 0 none; color:rgb(100,130,170); } /* The wrapper div */
div.datePicker { position:absolute; z-index:9999; text-align:center; /* Change the font-size to suit your design's CSS. The following line is for the demo that has a 12px font-size defined on the body tag */
font:900 11px/11px Open Sans, Sans-Serif; /* For Example: If using the YUI font CSS, uncomment the following line to get a 10px font-size within the datePicker */
/* font:900 77%/77% Verdana, sans-serif; */
/* Or, if you prefer a pixel precision */
/* font:900 12px/12px Verdana, sans-serif; */
background:transparent; /* Mozilla & Webkit extensions to stop text-selection. */
-moz-user-select:none; -khtml-user-select:none; } /* Styles for the static datePickers */
div.static-datepicker { position:relative; top:5px; left:0; } div.datePicker table { width:auto; height:auto; } /* Draggable datepickers */
div.datePicker tfoot th.drag-enabled, div.datePicker thead th.drag-enabled, div.datePicker thead th.drag-enabled span { cursor:move; } /* The iframe hack to cover selectlists in Internet Explorer <= v6 */
iframe.iehack { position:absolute; background:#fff; z-index:9998; padding:0; border:0; display:none; margin:0; } /* The "button" created beside each input for non-static datePickers */
a.date-picker-control:link, a.date-picker-control:visited { position:relative; /* Moz & FF */
display: -moz-inline-stack; border:0 none; padding:0; margin:4px 0 0 4px; background:transparent url(/gfx/datepicker/cal-grey.gif) no-repeat 50% 50%; min-width:16px; line-height:1; cursor:pointer; visibility:visible; text-decoration:none; vertical-align:top; } a.date-picker-control:hover, a.date-picker-control:active, a.date-picker-control:focus, a.dp-button-active:link, a.dp-button-active:visited, a.dp-button-active:hover, a.dp-button-active:active, a.dp-button-active:focus { background:transparent url(/gfx/datepicker/cal.gif) no-repeat 50% 50% !important; } /* Feed IE6 the following rule, IE7 should handle the min-width declared above */
* html a.date-picker-control { width:16px; } /* IE, Safari & Opera. Seperate CSS rule seems to be required. */
a.date-picker-control { display:inline-block; } a.date-picker-control span { display:block; width:16px; height:16px; margin:auto 0; } /* Default "button" styles */
div.datePicker thead th span { display:block; padding:0; margin:0; text-align:center; line-height:1em; border:0 none; background:transparent; font-weight:bold; cursor:pointer; } /* The "month, year" display */
div.datePicker th span.month-display, div.datePicker th span.year-display { display:inline; text-transform:uppercase; letter-spacing:1px; font:normal 1.2em Verdana, Sans-Serif; cursor:default; } /* Next & Previous (month, year) buttons */
div.datePicker th span.prev-but, div.datePicker th span.next-but { font-weight:lighter; font-size:2.4em; font-family: georgia, times new roman, palatino, times, bookman, serif; cursor:pointer !important; } /* Hover effect for Next & Previous (month, year) buttons */
div.datePicker th span.prev-but:hover, div.datePicker th span.next-but:hover, div.datePicker th span.today-but:hover { color:#a84444; } /* Today button */
div.datePicker th span.today-but { text-align:center; margin:0 auto; font:normal 1em Verdana, Sans-Serif; width:100%; text-decoration:none; padding-top:0.3em; text-transform:uppercase; vertical-align:middle; cursor:pointer !important } /* Disabled buttons */
div.dp-disabled th span.prev-but, div.dp-disabled th span.next-but, div.dp-disabled th span.today-but, div.dp-disabled th span.prev-but:hover, div.dp-disabled th span.next-but:hover, div.dp-disabled th span.today-but:hover, div.datePicker th span.prev-but.fd-disabled:hover, div.datePicker th span.next-but.fd-disabled:hover, div.datePicker thead th span.fd-disabled, div.datePicker th span.fd-disabled:hover { color:#aaa; cursor:default !important; } /* The mon, tue, wed etc day buttons */
div.datePicker th span.fd-day-header { text-align:center; margin:0 auto; font:900 11px Verdana, Sans-Serif; text-decoration:none; text-transform:lowercase; cursor:pointer; } /* The table */
div.datePicker table { margin:0; padding:0px; border:1px solid #ccc; background:#fff url(/gfx/datepicker/gradient-e5e5e5-ffffff.gif) repeat-x 0 -20px; text-align:center; border-spacing:2px; padding:0.3em; width:auto; empty-cells:show; -moz-border-radius:0.8em; border-radius:0.8em; } /* Common TD & TH styling */
div.datePicker table td, div.datePicker table tbody th { border:0 none; padding:0; text-align:center; vertical-align:middle; cursor:pointer; background:#fff url(/gfx/datepicker/gradient-e5e5e5-ffffff.gif) repeat-x 0 -40px; width:25px; height:25px; overflow:hidden; outline:transparent none 0px; border:1px solid #ccc; text-transform:none; -moz-border-radius:2px; border-radius:2px; } div.datePicker table td:focus, div.datePicker table td:active { outline:0 none red; } div.datePicker table th { border:0 none; padding:0; font-weight:bold; color:#222; text-align:center; vertical-align:middle; text-transform:none; } div.datePicker table thead th { height:auto !important; } div.datePicker table tbody th { border:1px solid #dcdcdc; } /* Week number display */
div.datePicker table thead th.date-picker-week-header, div.datePicker table tbody th.date-picker-week-header { font-style:oblique; background:transparent; cursor:default; } div.datePicker table thead th.date-picker-week-header { cursor:help; border:0 none; padding:0 0 0.2em 0; } /* tfoot status bar */
div.datePicker tfoot th { cursor:default; font-weight:normal; text-transform:uppercase; letter-spacing:0.1em; border:0 none; background:#fff; height:2.8em; } /* TD cell that is _not_ used to display a day of the month */
div.datePicker table tbody td.date-picker-unused { background:#fff url(/gfx/datepicker/backstripes.gif); border-color:#dcdcdc; cursor:default !important; } /* The TH cell used to display the "month, year" title */
div.datePicker table thead th.date-picker-title { width:auto; height:auto; padding:0.4em 0; } /* The "mon tue wed etc" day header styles */
div.datePicker table thead th.date-picker-day-header { text-transform:lowercase; cursor:help; height:auto; } /* The "todays date" style */
div.datePicker table tbody td.date-picker-today { background:#fff url(/gfx/datepicker/bullet2.gif) no-repeat 0 0; color:rgb(100,100,100) !important; } div.datePicker table tbody td.month-out.date-picker-highlight { color:#aa8866 !important; } /* The "highlight days" style */
div.datePicker table tbody td.date-picker-highlight, div.datePicker table thead th.date-picker-highlight { color:#a86666 !important; } /* The "active cursor" style */
div.datePicker table tbody td.date-picker-hover { background:#fff url(/gfx/datepicker/bg_header.jpg) no-repeat 0 0; cursor:pointer; border-color:rgb(100,130,170) !important; color:rgb(100,130,170); text-shadow: 0px 1px 1px #fff; } /* The "disabled days" style */
div.datePicker table tbody td.day-disabled { background:#fff url(/gfx/datepicker/backstripes.gif) no-repeat 0 0; color:#aaa !important; cursor:default; text-decoration:line-through; } div.datePicker table tbody td.month-out { border-color:#ddd; color:#aaa !important; background:#fff url(/gfx/datepicker/gradient-e5e5e5-ffffff.gif) repeat-x 0 -40px; } /* The "selected date" style */
div.datePicker table tbody td.date-picker-selected-date { color:#333 !important; border-color:#333 !important; } /* The date "out of range" style */
div.datePicker table tbody td.out-of-range, div.datePicker table tbody td.not-selectable { color:#ccc !important; font-style:oblique; background:#fcfcfc !important; cursor:default !important; } /* Week number "out of range" && "month-out" styles */
div.datePicker table tbody th.month-out, div.datePicker table tbody th.out-of-range { color:#aaa !important; font-style:oblique; background:#fcfcfc !important; } /* week numbers "out of range" */
div.datePicker table tbody th.out-of-range { opacity:0.6; filter:alpha(opacity=60); } /* Used when the entire grid is full but the next/prev months dates cannot be selected */
div.datePicker table tbody td.not-selectable { opacity:0.8; filter:alpha(opacity=80); } div.datePicker table tbody tr { display:table-row; } div.datePicker table tfoot sup { font-size:0.86em; letter-spacing:normal; text-transform:none; height: 0; line-height: 1; position: relative; top: -0.2em; vertical-align: baseline !important; vertical-align: top; } div.datePicker table thead th.date-picker-day-header, div.datePicker table thead span.month-display, div.datePicker table thead span.year-display { text-shadow: 0px 1px 1px #fff; } /* You can add focus effects (for everything but IE6) like so: */
div.datepicker-focus { /* Naughty, naughty - but we add a highlight using the table's border colour */
outline:none; } div.datepicker-focus table.datePickerTable { border-color:#999 !important; } div.datePicker table tbody tr td:focus { overflow:hidden; outline:0 none; -moz-outline: 0 none; color:rgb(100,130,170); } /* INTERNET EXPLORER WOES ====================== Hover Effects ------------- IE cannot deal with :focus on the TR so the datePicker script adds the class "dp-row-highlight" to the row currently being hovered over. This should enable you to add hover effects if desired. e.g. the following rule will highlight the cell borders in another colour when a row is moused over, it looks like crap though so I didn't include the rule within the demo: div.datePicker table tbody tr.dp-row-highlight td { border-color:#aaa; } */
/* Remove the images for Internet Explorer <= v6 using the "* html" hack This is a workaround for a nasty IE6 bug that never caches background images on dynamically created DOM nodes which means that they are downloaded for every cell for every table - nasty! */
* html div.datePicker table td { background-image:none; } * html div.datePicker table td.date-picker-unused { background:#f2f2f2; } /* Chrome has problems with the -webkit-box-shadow and -webkit-border-radius styles together Remove one or the other to get things looking less ugly */
@media screen and (-webkit-min-device-pixel-ratio:0) { div.datePicker table { border-spacing:0.3em; /* Naughty, naughty */
-webkit-box-shadow:0px 0px 5px #aaa; -webkit-border-radius:0.8em; } div.static-datepicker table { -webkit-box-shadow:0 0 0 transparent; } div.static-datepicker:focus table { -webkit-box-shadow:0px 0px 5px #aaa; } div.datePicker table td, div.datePicker table tbody th { padding:0.1em; -webkit-border-radius:2px; } div.datePicker table tbody td.date-picker-hover { -webkit-box-shadow:0px 0px 1px rgb(100,130,170); } } /* Untested webkit rules for fading out the disabled buttons - fingers crossed */
@-webkit-keyframes fadeout { to { opacity: 0.4; } from { opacity: 1.0; color:#222; } } @media screen and (-webkit-min-device-pixel-ratio:0) { div.datePicker table thead th span.fd-disabled { -webkit-animation-name: fadeout; -webkit-animation-duration: 3s; -webkit-animation-timing-function: ease-in-out; } } .ui-timepicker-div .ui-widget-header { margin-bottom: 8px; } .ui-timepicker-div dl { text-align: left; } .ui-timepicker-div dl dt { float: left; clear:left; padding: 0 0 0 5px; } .ui-timepicker-div dl dd { margin: 0 10px 10px 45%; } .ui-timepicker-div td { font-size: 90%; } .ui-tpicker-grid-label { background: none; border: none; margin: 0; padding: 0; } .ui-timepicker-rtl{ direction: rtl; } .ui-timepicker-rtl dl { text-align: right; padding: 0 5px 0 0; } .ui-timepicker-rtl dl dt{ float: right; clear: right; } .ui-timepicker-rtl dl dd { margin: 0 45% 10px 10px; } .ui-slider { position: relative; text-align: left; background-color:#CCC; } .ui-slider .ui-slider-handle { position: absolute; z-index: 2; width: 1.2em; height: 1.2em; cursor: default; background-color:#888; } .ui-slider .ui-slider-range { position: absolute; z-index: 1; font-size: .7em; display: block; border: 0; background-position: 0 0; } /* For IE8 - See #6727 */
.ui-slider.ui-state-disabled .ui-slider-handle, .ui-slider.ui-state-disabled .ui-slider-range { filter: inherit; } .ui-slider-horizontal { height: .8em; } .ui-slider-horizontal .ui-slider-handle { top: -.3em; margin-left: -.6em; } .ui-slider-horizontal .ui-slider-range { top: 0; height: 100%; } .ui-slider-horizontal .ui-slider-range-min { left: 0; } .ui-slider-horizontal .ui-slider-range-max { right: 0; } .ui-slider-vertical { width: .8em; height: 100px; } .ui-slider-vertical .ui-slider-handle { left: -.3em; margin-left: 0; margin-bottom: -.6em; } .ui-slider-vertical .ui-slider-range { left: 0; width: 100%; } .ui-slider-vertical .ui-slider-range-min { bottom: 0; } .ui-slider-vertical .ui-slider-range-max { top: 0; } .ui-datepicker-current { display:inline-block; padding:5px 10px; margin:5px; background-color:#888; color:#FFF; border:0; border-radius:10px; } .ui-datepicker-close { display:inline-block; padding:5px 10px; margin:5px; background-color:#4398d1; color:#FFF; border:0; border-radius:10px; } /* Uniform Theme: Uniform Default Version: 1.8 By: Josh Pyles License: MIT License --- For use with the Uniform plugin: http://uniformjs.com/ */
/* General settings */
div.selector, div.selector span, div.checker span, div.radio span, div.uploader, div.uploader span.action, div.button, div.button span { background-image: url("/gfx/uniform/sprite.png"); background-repeat: no-repeat; -webkit-font-smoothing: antialiased; } div.selector, div.checker, div.button, div.radio, div.uploader { display: -moz-inline-box; display: inline-block; *display: inline; zoom: 1; vertical-align: middle; /* Keeping this as :focus to remove browser styles */
} div.selector:focus, div.checker:focus, div.button:focus, div.radio:focus, div.uploader:focus { outline: 0; } div.selector, div.selector *, div.radio, div.radio *, div.checker, div.checker *, div.uploader, div.uploader *, div.button, div.button * { margin: 0; padding: 0; } .highContrastDetect { background: url("/gfx/uniform/bg-input.png") repeat-x 0 0; width: 0px; height: 0px; } /* Input & Textarea */
input.uniform-input, select.uniform-multiselect, textarea.uniform { padding: 3px; /* background: url("/gfx/uniform/bg-input.png") repeat-x 0 0; */
outline: 0; } input.uniform-input.active, select.uniform-multiselect.active, textarea.uniform.active { background: url("/gfx/uniform/bg-input-focus.png") repeat-x 0 0; } /* Remove default webkit and possible mozilla .search styles. * Keeping this as :active to remove browser styles */
div.checker input, input[type="search"], input[type="search"]:active { -moz-appearance: none; -webkit-appearance: none; } /* Select */
div.selector { background-position: 0 -130px; line-height: 26px; height: 26px; padding: 0 0 0 10px; position: relative; overflow: hidden; } div.selector span { text-overflow: ellipsis; display: block; overflow: hidden; white-space: nowrap; background-position: right 0; height: 26px; line-height: 26px; padding-right: 25px; cursor: pointer; width: 100%; display: block; } div.selector.fixedWidth { width: 190px; } div.selector.fixedWidth span { width: 155px; } div.selector select { opacity: 0; filter: alpha(opacity=0); -moz-opacity: 0; border: none; background: none; position: absolute; height: 22px; top: 2px; left: 0px; width: 100%; } div.selector.active { background-position: 0 -156px; } div.selector.active span { background-position: right -26px; } div.selector.hover, div.selector.focus { background-position: 0 -182px; } div.selector.hover span, div.selector.focus span { background-position: right -52px; } div.selector.hover.active, div.selector.focus.active { background-position: 0 -208px; } div.selector.hover.active span, div.selector.focus.active span { background-position: right -78px; } div.selector.disabled, div.selector.disabled.active { background-position: 0 -234px; } div.selector.disabled span, div.selector.disabled.active span { background-position: right -104px; } /* Checkbox */
div.checker { position: relative; } div.checker, div.checker span, div.checker input { width: 19px; height: 19px; } div.checker span { display: -moz-inline-box; display: inline-block; *display: inline; zoom: 1; text-align: center; background-position: 0 -260px; } div.checker span.checked { background-position: -76px -260px; } div.checker input { opacity: 0; filter: alpha(opacity=0); -moz-opacity: 0; border: none; background: none; display: -moz-inline-box; display: inline-block; *display: inline; zoom: 1; } div.checker.active span { background-position: -19px -260px; } div.checker.active span.checked { background-position: -95px -260px; } div.checker.hover span, div.checker.focus span { background-position: -38px -260px; } div.checker.hover span.checked, div.checker.focus span.checked { background-position: -114px -260px; } div.checker.hover.active span, div.checker.focus.active span { background-position: -57px -260px; } div.checker.hover.active span.checked, div.checker.focus.active span.checked { background-position: -133px -260px; } div.checker.disabled, div.checker.disabled.active { background-position: -152px -260px; } div.checker.disabled span.checked, div.checker.disabled.active span.checked { background-position: -171px -260px; } /* Radio */
div.radio { position: relative; margin-top: -5px; } div.radio, div.radio span, div.radio input { width: 18px; height: 18px; } div.radio span { display: -moz-inline-box; display: inline-block; *display: inline; zoom: 1; text-align: center; background-position: 0 -279px; } div.radio span.checked { background-position: -72px -279px; } div.radio input { opacity: 0; filter: alpha(opacity=0); -moz-opacity: 0; border: none; background: none; display: -moz-inline-box; display: inline-block; *display: inline; zoom: 1; text-align: center; } div.radio.active span { background-position: -18px -18px -279px; } div.radio.active span.checked { background-position: -90px -279px; } div.radio.hover span, div.radio.focus span { background-position: -36px -36px -279px; } div.radio.hover span.checked, div.radio.focus span.checked { background-position: -108px -279px; } div.radio.hover.active span, div.radio.focus.active span { background-position: -54px -279px; } div.radio.hover.active span.checked, div.radio.focus.active span.checked { background-position: -126px -279px; } div.radio.disabled span, div.radio.disabled.active span { background-position: -144px -279px; } div.radio.disabled span.checked, div.radio.disabled.active span.checked { background-position: -162px -279px; } /* Uploader */
div.uploader { background-position: 0 -297px; height: 28px; width: 190px; cursor: pointer; position: relative; overflow: hidden; } div.uploader span.action { background-position: right -409px; height: 28px; line-height: 28px; width: 82px; text-align: center; float: left; display: inline; overflow: hidden; cursor: pointer; } div.uploader span.filename { text-overflow: ellipsis; display: block; overflow: hidden; white-space: nowrap; float: left; cursor: default; height: 24px; margin: 2px 0 2px 2px; line-height: 24px; width: 85px; padding: 0 10px; } div.uploader input { opacity: 0; filter: alpha(opacity=0); -moz-opacity: 0; border: none; background: none; position: absolute; top: 0; right: 0; float: right; cursor: default; width: 100%; height: 100%; } div.uploader.active span.action { background-position: right -465px; } div.uploader.hover, div.uploader.focus { background-position: 0 -353px; } div.uploader.hover span.action, div.uploader.focus span.action { background-position: right -437px; } div.uploader.hover.active span.action, div.uploader.focus.active span.action { background-position: right -493px; } div.uploader.disabled, div.uploader.disabled.active { background-position: 0 -325px; } div.uploader.disabled span.action, div.uploader.disabled.active span.action { background-position: right -381px; } /* Buttons */
div.button { background-position: 0 -641px; height: 30px; cursor: pointer; position: relative; /* Keep buttons barely visible so they can get focus */
} div.button a, div.button button, div.button input { opacity: 0.01; filter: alpha(opacity=1); -moz-opacity: 0.01; display: block; top: 0; left: 0; right: 0; bottom: 0; position: absolute; } div.button span { display: -moz-inline-box; display: inline-block; *display: inline; zoom: 1; line-height: 22px; text-align: center; background-position: right -521px; height: 22px; margin-left: 13px; padding: 8px 15px 0 2px; } div.button.active { background-position: 0 -671px; } div.button.active span { background-position: right -551px; cursor: default; } div.button.hover, div.button.focus { background-position: 0 -701px; } div.button.hover span, div.button.focus span { background-position: right -581px; } div.button.disabled, div.button.disabled.active { background-position: 0 -731px; } div.button.disabled span, div.button.disabled.active span { background-position: right -611px; cursor: default; } /* INPUT & TEXTAREA */
input.uniform-input, select.uniform-multiselect, textarea.uniform { font-size: 12px; font-family: "Helvetica Neue", Arial, Helvetica, sans-serif; font-weight: normal; color: #777; border-top: solid 1px #aaaaaa; border-left: solid 1px #aaaaaa; border-bottom: solid 1px #cccccc; border-right: solid 1px #cccccc; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; } input.uniform-input.hover, input.uniform-input.focus, select.uniform-multiselect.hover, select.uniform-multiselect.focus, textarea.uniform.hover, textarea.uniform.focus { -webkit-box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.3); -moz-box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.3); box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.3); border-color: #999; } /* PRESENTATION */
/* Buttons */
div.button span { font-weight: bold; font-family: "Helvetica Neue", Arial, Helvetica, sans-serif; font-size: 12px; letter-spacing: 1px; text-transform: uppercase; } div.button.hover span, div.button.focus span { color: #555; } div.button.disabled span, div.button.disabled.active span { color: #bbb; } /* Select */
div.selector { font-size: 12px; } div.selector span { color: #666; text-shadow: 0 1px 0 white; } div.selector select { font-family: "Helvetica Neue", Arial, Helvetica, sans-serif; font-size: 12px; } div.selector.disabled span, div.selector.disabled.active span { color: #bbb; } /* Checker */
div.checker { margin-right: 5px; } /* Radio */
div.radio { margin-right: 3px; } /* Uploader */
div.uploader span.action { text-shadow: white 0px 1px 0px; background-color: #fff; font-size: 11px; font-weight: bold; } div.uploader span.filename { color: #777; border-right: solid 1px #bbbbbb; font-size: 11px; } div.uploader.disabled span.action, div.uploader.disabled.active span.action { color: #aaa; } div.uploader.disabled span.filename, div.uploader.disabled.active span.filename { border-color: #ddd; color: #aaa; } input.uniform-input, input.uniform-input:focus { background-color: #fff; } ul.tagit { padding: 1px 5px; overflow: auto; margin-left: inherit; /* usually we don't want the regular ul margins. */
margin-right: inherit; } ul.tagit li { display: block; float: left; margin: 2px 5px 2px 0; } ul.tagit li.tagit-choice { position: relative; line-height: inherit; } input.tagit-hidden-field { display: none; } ul.tagit li.tagit-choice-read-only { padding: .2em .5em .2em .5em; } ul.tagit li.tagit-choice-editable { padding: .2em 18px .2em .5em; } ul.tagit li.tagit-new { padding: .25em 4px .25em 0; } ul.tagit li.tagit-choice a.tagit-label { cursor: pointer; text-decoration: none; } ul.tagit li.tagit-choice .tagit-close { cursor: pointer; position: absolute; right: .1em; top: 50%; margin-top: -8px; line-height: 17px; } /* used for some custom themes that don't need image icons */
ul.tagit li.tagit-choice .tagit-close .text-icon { display: none; } ul.tagit li.tagit-choice input { display: block; float: left; margin: 2px 5px 2px 0; } ul.tagit input[type="text"] { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; border: none; margin: 0; padding: 0; width: inherit; background-color: inherit; outline: none; } /* Optional scoped theme for tag-it which mimics the zendesk widget. */
ul.tagit { border-style: solid; border-width: 1px; border-color: #C6C6C6; margin: 10px 20px 10px 0; background: inherit; } ul.tagit li.tagit-choice { -moz-border-radius: 6px; border-radius: 6px; -webkit-border-radius: 6px; border: 1px solid #CAD8F3; background: none; background-color: #DEE7F8; font-weight: normal; } ul.tagit li.tagit-choice .tagit-label:not(a) { color: #555; } ul.tagit li.tagit-choice a.tagit-close { text-decoration: none; } ul.tagit li.tagit-choice .tagit-close { right: .4em; } ul.tagit li.tagit-choice .ui-icon { display: none; } ul.tagit li.tagit-choice .tagit-close .text-icon { display: inline-block; font-family: arial, sans-serif; font-size: 16px; line-height: 16px; color: #777; padding-top: 2px; } ul.tagit li.tagit-choice:hover, ul.tagit li.tagit-choice.remove { background-color: #bbcef1; border-color: #6d95e0; } ul.tagit li.tagit-choice a.tagLabel:hover, ul.tagit li.tagit-choice a.tagit-close .text-icon:hover { color: #222; } ul.tagit input[type="text"] { width: 270px; height: 24px; line-height: 24px; background: #fdfdfd; border: 1px solid #d9d9d9; border-top: 1px solid #ccc; border-radius: 2px; color: #666; outline: none; padding: 0px 5px; margin: 0 !important; } .ui-widget { font-size: 1.1em; } /* Forked from a jQuery UI theme, so that we don't require the jQuery UI CSS as a dependency. */
.tagit-autocomplete.ui-autocomplete { position: absolute; cursor: default; } * html .tagit-autocomplete.ui-autocomplete { width:1px; } /* without this, the menu expands to 100% in IE6 */
.tagit-autocomplete.ui-menu { list-style:none; padding: 2px; margin: 0; display:block; float: left; } .tagit-autocomplete.ui-menu .ui-menu { margin-top: -3px; } .tagit-autocomplete.ui-menu .ui-menu-item { margin:0; padding: 0; zoom: 1; float: left; clear: left; width: 100%; } .tagit-autocomplete.ui-menu .ui-menu-item a { text-decoration:none; display:block; padding:.2em .4em; line-height:1.5; zoom:1; } .tagit-autocomplete .ui-menu .ui-menu-item a.ui-state-hover, .tagit-autocomplete .ui-menu .ui-menu-item a.ui-state-active { font-weight: normal; margin: -1px; } .tagit-autocomplete.ui-widget-content { border: 1px solid #aaaaaa; background: #ffffff 50% 50% repeat-x; color: #222222; } .tagit-autocomplete.ui-corner-all, .tagit-autocomplete .ui-corner-all { -moz-border-radius: 4px; -webkit-border-radius: 4px; -khtml-border-radius: 4px; border-radius: 4px; } .tagit-autocomplete .ui-state-hover, .tagit-autocomplete .ui-state-focus { border: 1px solid #999999; background: #dadada; font-weight: normal; color: #212121; } .tagit-autocomplete .ui-state-active { border: 1px solid #aaaaaa; } .tagit-autocomplete .ui-widget-content { border: 1px solid #aaaaaa; } .tagit .ui-helper-hidden-accessible { position: absolute !important; clip: rect(1px,1px,1px,1px); } div[class$=edit] .tagit li.li_even, div[class$=edit] .tagit li.li_odd { background: #f3f3f3; } div[class$=edit] .tagit li.tagit-new.li_even, div[class$=edit] .tagit li.tagit-new.li_odd { padding: 0; background: none; } .tagit li.li_odd > span { background: none; } /* Live URL */
.liveurl { width: 100%; overflow: hidden; border-top: 1px dashed #CCC; margin-top: 10px; display: none; } .liveurl .inner { margin: 15px; overflow: hidden; } .liveurl span.image { float: left; clear: none; } .liveurl .details { float: left; overflow: hidden; width: 475px; } .liveurl .details .info * { float: left; clear: both; line-height: 13px; } .liveurl .title { font-weight: bold; } .liveurl .url { font-size: 11px; font-weight: normal; color: #666; } .liveurl .image { width: 100px; margin: 0 10px 10px 0; float: left; display: none; } .liveurl .video { clear: both; float: left; margin: 10px 0 0 0; display: none; } .liveurl img { width: 100px; height: auto; display: none; } .liveurl img.active { display: block; } .liveurl .close { float: right; cursor: pointer; margin: 5px; text-indent: -999px; width: 16px; height: 16px; background: url(/gfx/liveurl/close.gif); } .liveurl .thumbnail { float: left; margin: 15px 0 0 0; clear: both; display: none; } .liveurl .thumbnail label { padding: 0 0 0 5px; vertical-align: text-top; } .liveurl .button { width: 23px; height: 23px; float: left; border: 1px solid #A8A8A8; text-align: center; line-height: 20px; background: #FFF; position: relative; cursor: pointer; } .liveurl .button.prev { border-right: none; } .liveurl .button:before { content: ''; width: 0; position: absolute; left: 5px; top: 5px; } .liveurl .button:active { border-color: #3B5998; } .liveurl .button.prev:before { border-top: 6px solid transparent; border-right: 12px solid #828282; border-bottom: 6px solid transparent; } .liveurl .button.next:before { border-top: 6px solid transparent; border-left: 12px solid #828282; border-bottom: 6px solid transparent; } .liveurl .button:active.prev:before { border-right: 12px solid #3B5998; } .liveurl .button:active.next:before { border-left: 12px solid #3B5998; } .liveurl .button.inactive { opacity: 0.5; filter: alpha(opacity=50); pointer-events: none; cursor: default; } .liveurl .count { float: left; margin: 0 0 0 10px; line-height: 25px; } .liveurl .controls { margin: 10px 0 0 0; } .post textarea { width: 600px; height: 140px; } .liveurl-loader { display: none; width: 16px; height: 11px; margin: 10px 0; background: url(/gfx/liveurl/url-loader.gif); } .liveurl * { font: 12px/1em Tahoma, Arial, Helvetica, Segoe, sans-serif; } .autocomplete-suggestions { text-align: left; cursor: default; border: 1px solid #ccc; border-top: 0; background: #fff; box-shadow: -1px 1px 3px rgba(0,0,0,.1); /* core styles should not be changed */
position: absolute; display: none; z-index: 9999; max-height: 254px; overflow: hidden; overflow-y: auto; box-sizing: border-box; } .autocomplete-suggestion { position: relative; padding: 0 .6em; line-height: 23px; white-space: nowrap; overflow: hidden; font-size: 1.02em; color: #333; } .autocomplete-suggestion b { font-weight: normal; color: #1f8dd6; } .autocomplete-suggestion.selected { background: #f0f0f0; } @charset "UTF-8"; @font-face { font-family: "beheerpaneel"; src:url("/font/beheerpaneel.eot"); src:url("/font/beheerpaneel.eot?#iefix") format("embedded-opentype"), url("/font/beheerpaneel.woff") format("woff"), url("/font/beheerpaneel.ttf") format("truetype"), url("/font/beheerpaneel.svg#beheerpaneel") format("svg"); font-weight: normal; font-style: normal; } [data-icon]:before { font-family: "beheerpaneel" !important; content: attr(data-icon); font-style: normal !important; font-weight: normal !important; font-variant: normal !important; text-transform: none !important; speak: none; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } [class^="icon-"]:before, [class*=" icon-"]:before { font-family: "beheerpaneel" !important; font-style: normal !important; font-weight: normal !important; font-variant: normal !important; text-transform: none !important; speak: none; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .icon-move:before { content: "m"; } .icon-double-left:before { content: "q"; } .icon-double-right:before { content: "w"; } .icon-open-left:before { content: "a"; } .icon-open-right:before { content: "s"; } .icon-kruis:before { content: "b"; } /**************************** CUSTOM WEBFONTS ****************************/
/*@font-face { font-family: 'Calibri'; src: url('/font/Calibri_Bold.eot'); src: local('Calibri Bold'), local('Calibri-Bold'), url('/font/Calibri_Bold.woff') format('woff'), url('/font/Calibri_Bold.ttf') format('truetype'); font-weight:bold; } @font-face { font-family: 'Calibri'; src: url('/font/Calibri.eot'); src: local('Calibri'), local('Calibri'), url('/font/Calibri.woff') format('woff'), url('/font/Calibri.ttf') format('truetype'); } */
/**************************** CUSTOM WEBFONTS ENDS ****************************/
/**************************** GENERIC HTML ELEMENT STYLING ****************************/
html, body { height:100%; width:100%; background:#F5F5F5; color: #6F7072; } html, body, * { margin:0; padding:0; line-height:normal; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; font-size:12px; font-family:'Open Sans', sans-serif; } body.moxman-fullscreen > #moxman-container-element { margin: -5px 0 0 0; } #map-canvas, #map-canvas *{ -moz-box-sizing:content-box; -webkit-box-sizing:content-box; box-sizing:content-box; } strong, b, .strong { font-family: 'Open Sans', sans-serif; font-weight: bold; } h1 { color:#000; font-size:18px; } h2 { color:#000; font-size:14px; } h3, h4, h5, h6 { color:#000; font-size:12px; } a, a:link, a:visited { color: #000; cursor:pointer; text-decoration:none; } a:hover { cursor:pointer; text-decoration:none !important; color:#4398d1; } .small { font-family: 'Open Sans', sans-serif; font-size:10px; } small b.small { color:#4398d1; } .alpha { opacity:0.4; filter:alpha(opacity=40); } .hidden, .nietinvullen, .optionsSkel, .veldenSkel { display:none; } .floatRight{ float: right; } .clear { clear:both; } .pointer { cursor: pointer; } .normalTextarea { width:98%; height:150px; padding:5px; resize:none; border: 1px solid #CCC; } .left { text-align: left; } .center { text-align: center; } .right { text-align: right; } /**************************** COLORS ****************************/
.red { color:#8B0000; } .red-bg { background-color:#8B0000; } .lightred { color:#FF0000; } .lightred-bg { background-color:#FF0000; } /**************************** IE UPGRADE MESSAGE ****************************/
#upgrade-message { display:block; width:100%; padding:10px; margin-bottom:10px; color:#FFF; background-color:#4398d1; font-size: 20px; text-align:center; } #upgrade-message > a { color:#FFFF00 !important; font-size: 20px !important; } #upgrade-message > a:hover { text-decoration: underline !important; } /**************************** GENERIC MESSAGE ****************************/
#generic-message { display:block; width:100%; padding:10px; color:#FFF; background-color:#4398d1; font-size: 12px; text-align:center; } #generic-message > a { color:#FFFF00 !important; font-size: 12px !important; } #generic-message > a:hover { text-decoration: underline !important; } #generic-message.warning { background-color: #FFA000; } #generic-message.error { background-color: #FF0000; } /**************************** GENERIC HTML ELEMENT STYLING ENDS ****************************/
.file-container, .image-container { width:100%; padding:0; margin:0; } .file-container li.header h2, .image-container li.header h2, .seoKeywords-container li.header h2 { line-height:28px; } .file-container li div.content, .image-container li div.content, .seoKeywords-container li div.content { margin:0 !important; } .image-container .dataTables_processing, .file-container .dataTables_processing { position:relative; top:35px; color:#FFF; } .image-menu { clear:both; padding:15px 0 0 15px; } .add-image { display:block; float:left; width: 250px !important; font-weight: bold; margin:0; padding:0; } .add-image:hover { color:#4398d1; } .add-image:before { position:relative; content:'+'; font-size:24px; top:2px; padding:0 6px; } .delete-image { display:block; float:right; font-weight: bold; width: 250px !important; margin:0; padding:0; text-align:right; } .delete-image.enabled { color:#000; cursor:pointer; } .delete-image.enabled:hover { color:#4398d1; } .delete-image:before { position:relative; content:'-'; font-size:24px; top:2px; padding:0 6px; } .imgFileRow { height:80px; } #login-container .submit { padding:5px 10px; } input[type=submit].gray, input[type=button].gray, a.button.gray{ color: #000; background: #dbdbdb; /* background: -moz-linear-gradient(top, #f5f5f5 0%, #f5f5f5 50%, #dbdbdb 50%, #dbdbdb 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f5f5f5), color-stop(50%,#f5f5f5), color-stop(50%,#dbdbdb), color-stop(100%,#dbdbdb)); background: -webkit-linear-gradient(top, #f5f5f5 0%,#f5f5f5 50%,#dbdbdb 50%,#dbdbdb 100%); background: -o-linear-gradient(top, #f5f5f5 0%,#f5f5f5 50%,#dbdbdb 50%,#dbdbdb 100%); background: -ms-linear-gradient(top, #f5f5f5 0%,#f5f5f5 50%,#dbdbdb 50%,#dbdbdb 100%); background: linear-gradient(top, #f5f5f5 0%,#f5f5f5 50%,#dbdbdb 50%,#dbdbdb 100%); -pie-background: linear-gradient(#f5f5f5, #dbdbdb); */
behavior: url(/css/PIE.htc); border: 1px solid #888; text-shadow: 0 1px 0 #fff; } input[type=submit].blue, input[type=button].blue, a.button.blue{ position: relative; min-width: 90px; width: auto; color: #fff; /* padding: 3px 5px; */
padding: 0 8px 0 8px; text-align:center; text-shadow: 0 1px 0 #104266; background: #4398d1 ; /* background: -moz-linear-gradient(top, #6e9feb 0%, #6e9feb 50%, #4398d1 50%, #4398d1 100%) !important; background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#6e9feb), color-stop(50%,#6e9feb), color-stop(50%,#4398d1), color-stop(100%,#4398d1)) !important; background: -webkit-linear-gradient(top, #6e9feb 0%,#6e9feb 50%,#4398d1 50%,#4398d1 100%) !important; background: -o-linear-gradient(top, #6e9feb 0%,#6e9feb 50%,#4398d1 50%,#4398d1 100%) !important; background: -ms-linear-gradient(top, #6e9feb 0%,#6e9feb 50%,#4398d1 50%,#4398d1 100%) !important; background: linear-gradient(top, #6e9feb 0%,#6e9feb 50%,#4398d1 50%,#4398d1 100%)!important ; -pie-background: linear-gradient(#6e9feb, #4398d1) !important; behavior: url(/css/PIE.htc); */
border:none; cursor:pointer; } input[type=text], input[type=password], input[type=color], input[type=date], input[type=number], input[type=email], input[type=tel], input[type=url], input[type=search], select { height:30px; line-height:30px; background: repeat-x #fdfdfd; border:1px solid #d9d9d9; border-top:1px solid #ccc; border-radius:2px; color:#666; outline:none; margin:10px 0 0 0; padding:0px 9px; resize: none; position: relative; width: 98%; } input.datePicker, input.datePickerLater { background:url('../gfx/bhp/date-icon.png') no-repeat left center; padding-left:30px; background-color:#fdfdfd; } input:disabled, select:disabled { background-color:#F8F8F8; } select { padding: 3px 0 0 9px; } #login-container input[type=text], #login-container input[type=password], #login-container input[type=color], #login-container input[type=date], #login-container input[type=number], #login-container input[type=email], #login-container input[type=tel], #login-container input[type=url], #login-container select { width: 100%; } #login-container input[type=password] { font-family: 'Open Sans', sans-serif; color: #666; } #login-container form{ padding-right: 5px; padding-left: 5px; } #login-container{ padding-top: 7px; } .tooltip-cont { position: relative; } .tooltip-cont:hover .tooltip { display: inline-block; } .tooltip { position: absolute; display: none; content: 'Dit is een tooltip'; top: 95%; left: 10px; width: 200px; color: #fff; line-height: normal; padding: 10px; background: #a6a6a6 !important; } .tooltip:after { top: -20px; left: 12%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; border-color: rgba(166, 166, 166, 0); border-bottom-color: #a6a6a6; border-width: 10px; margin-left: -10px; } /* .mce-btn, .moxman-btn { background: #d9d9d9 !important; } .mce-primary, .moxman-primary { background: #4799cf !important; } */
.moxman-primary button, input[type=button].submit, input[type=submit].submit, button.submit { /* height:24px;*/
/* background: #4398d1;*/
/* border: none;*/
/* border-radius:2px;*/
/* font-size:12px;*/
/* color:#FFF !important;*/
background: #4799cf; border: 2px solid #4799cf; border-radius: 5px !important; padding: 2px 5px; color: #fff; outline: none; cursor: pointer; } .moxman-primary button:active, input[type=button].submit:active, input[type=submit].submit:active, button.submit:active { /* height:24px;*/
/* padding:5px 10px;*/
/* background: rgb(147,193,235);*/
/* border: none; */
/* border-radius:2px;*/
/* color:#FFF !important;*/
outline:none; } .moxman-primary button:focus, input[type=button].submit:focus, input[type=submit].submit:focus, button.submit:focus { border: none; } input[type=button].submit:focus, input[type=submit]:focus, button.submit:focus{ border: 2px solid #4799cf; } input:focus, select:focus{ border: 1px solid #4799cf; } input[type=button].submit:hover, input[type=submit]:hover, button.submit:hover { background: #4799cf; border: 2px solid #79cbff; border-radius: 5px !important; padding: 2px 5px; color: #fff !important; } .mce-tinymce input[type=button], .mce-tinymce input[type=button]:active, .mce-tinymce input[type=submit], .mce-tinymce input[type=submit]:active, .mce-tinymce button, .mce-tinymce button:active, .moxman-container input[type=button], .moxman-container input[type=button]:active, .moxman-container input[type=submit], .moxman-container input[type=submit]:active, .moxman-container button, .moxman-container button:active { background: none; filter: none; } .lt-ie9 select { height: auto; padding-left:0; padding-right:0; margin-top: 15px; } select[multiple] { height:143px; padding: 0px; /* anders is de multiselect selectiekleur niet zo breed als de hele container */
} input.error, select.error { border:1px solid #F00 !important; } input:focus, select:focus { border:1px solid #4398d1; } input[type=range] { border: none; } .adminField input, .adminField select { border:1px solid #FF0000; color:#FF0000; } .adminField input:focus, .adminField select:focus { border:1px solid #3f3f3f; } .errorMsg { display:block; width:100%; padding:10px; border:2px solid #F00 !important; background-color:#FFF; margin-bottom:10px; } .errorText { color: #8B0000 !important; } label.lbl-detail{ padding-right: 10px; cursor:pointer; } .adminField label{ color: red; } /**************************** SVG AND SPRITE ****************************/
.sprite, .sprite-before:before, .sprite-after:after { background:url('/gfx/sprite/bhp.sprite-website.svg') no-repeat; background-image: none, url('/gfx/sprite/bhp.sprite-website.png'); } .no-svg .sprite, .no-svg .sprite-before:before, .no-svg .sprite-after:after { background:url('/gfx/sprite/bhp.sprite-website.png') no-repeat; background-size:none; } /**************************** SVG AND SPRITE ENDS ****************************/
ul:before, ul:after, ol:before, ol:after, li:before, li:after, .clearfix:before, .clearfix:after { content:""; display:table; } ul:after, ol:after, li:after, .clearfix:after { clear:both; } .clearboth{ clear:both; } ul, ol, li, .clearfix { zoom:1; } ul, ol { list-style-type:none; position:relative; } /**************************** WRAPPERS AND CONTAINERS ****************************/
#wrapper { height: 100%; z-index: 1; position: relative; } .container-login { background:#808080; position:absolute; width:824px; top:0px; left:50%; margin-left:-334px; overflow:hidden; cursor:default; height:100%; } #content-container { padding:0 15px 15px 15px; position: relative; } #content-container > #moxman-container-element { margin:-15px !important; } #moxman-container-element { /*max-width: 999px;*/
max-width:100%; } #content-container a.productVarianten { color: #B3B3B3; text-decoration: none; cursor: pointer; margin-top: 5px; } #main { overflow: hidden; min-height: 100%; /*max-width: 1000px;*/
border-right: 1px solid #ddd; -moz-box-shadow: 1px -10px 20px #ddd; -webkit-box-shadow: 1px -10px 20px #ddd; box-shadow: 1px -10px 20px #ddd; background:#fff; } #main-beta { overflow: hidden; min-height: 100%; /*max-width: 1000px;*/
border-right: 1px solid #ddd; background:#fff; } #main-inner { position: relative; overflow:hidden; } #imFrame, #fmFrame { width:100%; height:500px; border:0px; overflow:auto; } form[name="fmForm"], form[name="imForm"] { display: none; } /**************************** WRAPPERS AND CONTAINERS ENDS ****************************/
/**************************** DATEPICKER ****************************/
.ui-datepicker { width: 216px; height: auto; margin: 5px auto 0; font: 9pt 'Open Sans', sans-serif; -webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, .5); -moz-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, .5); box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, .5); } .ui-datepicker a { text-decoration: none; } .ui-datepicker table { width: 100%; } .ui-datepicker-header { background-color: #4398d1; color: #FFF; font-weight: bold; -webkit-box-shadow: inset 0px 1px 1px 0px rgba(250, 250, 250, 2); -moz-box-shadow: inset 0px 1px 1px 0px rgba(250, 250, 250, .2); box-shadow: inset 0px 1px 1px 0px rgba(250, 250, 250, .2); /* text-shadow: 1px -1px 0px #000; filter: dropshadow(color=#000, offx=1, offy=-1); */
line-height: 30px; border-width: 1px 0 0 0; border-style: solid; border-color: #111; text-transform: uppercase; } .ui-datepicker-title { text-align: center; } .ui-datepicker-prev, .ui-datepicker-next { display: inline-block; width: 30px; height: 15px; text-align: center; cursor: pointer; background-image: url('../gfx/bhp/arrow.png'); background-position:top left; background-repeat: no-repeat; line-height: 600%; overflow: hidden; } .ui-datepicker-prev { float: left; background-position: center -35px; } .ui-datepicker-next { float: right; background-position: center -5px; } .ui-datepicker thead { background-color: #4398d1; border-bottom: 1px solid #bbb; } .ui-datepicker th { text-transform: uppercase; font-size: 6pt; padding: 5px 0; color: #FFF; /* text-shadow: 1px 0px 0px #888; filter: dropshadow(color=#fff, offx=1, offy=0); */
} .ui-datepicker tbody td { padding: 0; border-right: 1px solid #bbb; } .ui-datepicker tbody td:last-child { border-right: 0px; } .ui-datepicker tbody tr { border-bottom: 1px solid #bbb; } .ui-datepicker tbody tr:last-child { border-bottom: 0px; } .ui-datepicker td span, .ui-datepicker td a { display: inline-block; font-weight: bold; text-align: center; width: 30px; height: 30px; line-height: 30px; color: #666666; /* text-shadow: 1px 1px 0px #fff; filter: dropshadow(color=#fff, offx=1, offy=1); */
} .ui-datepicker-calendar .ui-state-default { background: #ededed; /* background: -moz-linear-gradient(top, #ededed 0%, #dedede 100%); background: -webkit-gradient(linear, left top, left bottombottom, color-stop(0%,#ededed), color-stop(100%,#dedede)); background: -webkit-linear-gradient(top, #ededed 0%,#dedede 100%); background: -o-linear-gradient(top, #ededed 0%,#dedede 100%); background: -ms-linear-gradient(top, #ededed 0%,#dedede 100%); background: linear-gradient(top, #ededed 0%,#dedede 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ededed', endColorstr='#dedede',GradientType=0 ); */
-webkit-box-shadow: inset 1px 1px 0px 0px rgba(250, 250, 250, .5); -moz-box-shadow: inset 1px 1px 0px 0px rgba(250, 250, 250, .5); box-shadow: inset 1px 1px 0px 0px rgba(250, 250, 250, .5); } .ui-datepicker-unselectable .ui-state-default { background: #f4f4f4; color: #b4b3b3; } .ui-datepicker-calendar .ui-state-hover { background: #f7f7f7; } .ui-datepicker-calendar .ui-state-active { width:33px; background: #4398d1; -webkit-box-shadow: inset 0px 0px 10px 0px rgba(0, 0, 0, .1); -moz-box-shadow: inset 0px 0px 10px 0px rgba(0, 0, 0, .1); box-shadow: inset 0px 0px 10px 0px rgba(0, 0, 0, .1); color: #FFF; text-shadow: 0px 1px 0px #4d7a85; filter: dropshadow(color=#4d7a85, offx=0, offy=1); border: 1px solid #55838f; position: relative; margin: -1px; } .ui-datepicker-calendar td:first-child .ui-state-active { width: 29px; margin-left: 0; } .ui-datepicker-calendar td:last-child .ui-state-active { width: 29px; margin-right: 0; } .ui-datepicker-calendar tr:last-child .ui-state-active { height: 29px; margin-bottom: 0; } /**************************** LOGIN ****************************/
#login-wrapper { position: relative; margin: auto; max-width: 400px; width : 400px\9; } #login-container{ position:absolute; display:block; width:100%; height: 197px; padding: 10px; background-color: whitesmoke; border: 1px solid #bababa; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; behavior: url(/css/PIE.htc); font-size: 12px; color: #6F7072; background: #fff; } #login-container a{ position: relative; bottom: 20px; display: block; } #login-container #logo{ margin: 0; margin-top: -110px; max-width: 390px; width: 100%; border: none; position: absolute; bottom: 0; } #login-container input[name=username], #login-container input[name=password]{ margin-bottom: 12px; } #login-container label{ display: block; margin: 0px 0 1px; } #login-container .checkboxLabel{ display:inline-block; font-size:12px; } #login-msg{ position: relative; font-size: 12px; margin-top: 10px; text-align: right; clear: both; } .lt-ie9 #login-msg{ margin-top:35px; } div#login-container>form>div.clearfix{ float: right; } div#login-container>form>div.clearfix>input{ bottom: 22px; position: relative; padding: 0px 20px; } #language-container { position:absolute; top:550px; display:block; margin: auto; width:100%; height: 40px; padding: 10px; background-color: whitesmoke; border: 1px solid #bababa; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; behavior: url(/css/PIE.htc); font-size: 12px; color: #6F7072; background: #fff; text-align:center; } #language-container > ul { display:inline-block; margin:0 auto; padding:0; } #language-container > ul > li { display:block; float:left; margin-right:5px; text-align:center; } #language-container > ul > li > a { text-decoration:none; } #language-container > ul > li > a:hover, #language-container > ul > li > a.active { font-weight:bold; color:#4398d1; } #language-container > ul > li:not(.lastColumn) > a:after { content:" | "; font-weight:normal; color:#6F7072; } #new-version-container { position:fixed; left:50%; top:10px; display:block; width:95%; max-width:400px; margin-left:-200px; padding: 10px; background-color: rgba(187,187,187,0.8); -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; behavior: url(/css/PIE.htc); font-size: 12px; color: #FFF; } #new-version-container:after { content: ""; display: block; /* reduce the damage in FF3.0 */
position: absolute; bottom: -60px; left: 30px; width: 0; border-width: 60px 20px 0; border-style: solid; border-color: rgba(187,187,187,0.8) transparent; } #new-version-container a { color: #FFF; text-decoration:underline; } #new-version-container a:hover { text-decoration:underline !important; } #new-version-container p { margin-bottom:5px; } /**************************** LOGIN ENDS ****************************/
/**************************** PASSWORD VALIDATION ****************************/
#pass-info{ display:none; width: 97.5%; height: 25px; border: 1px solid #DDD; border-radius: 4px; color: #829CBD; text-align: center; font: 12px/25px 'Open Sans', sans-serif; margin:5px 0; } #pass-info.weakpass{ border: 1px solid #FF9191; background: #FFC7C7; color: #94546E; text-shadow: 1px 1px 1px #FFF; } #pass-info.stillweakpass { border: 1px solid #FBB; background: #FDD; color: #945870; text-shadow: 1px 1px 1px #FFF; } #pass-info.goodpass { border: 1px solid #C4EEC8; background: #E4FFE4; color: #51926E; text-shadow: 1px 1px 1px #FFF; } #pass-info.strongpass { border: 1px solid #6ED66E; background: #79F079; color: #348F34; text-shadow: 1px 1px 1px #FFF; } #pass-info.vrystrongpass { border: 1px solid #379137; background: #48B448; color: #CDFFCD; text-shadow: 1px 1px 1px #296429; } /**************************** TRANSLATION ****************************/
#translation-container{ position: relative; margin: auto; max-width: 400px; height: 297px; padding: 10px; background-color: whitesmoke; border: 1px solid #bababa; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; behavior: url(/css/PIE.htc); font-size: 12px; color: #6F7072; width : 400px\9; background: #fff; } #translation-container a{ position: relative; bottom: 20px; display: block; } #translation-container input[type=password]{ width:70%; margin-right:5px; } #translation-container label{ display: block; margin: 0px 0 1px; } #translation-container p{ margin:0 0 10px 0; } #translation-container .submit { width: 90px; padding: 0 22px; } #translation-msg{ position: relative; font-size: 12px; margin-top: 10px; text-align: right; clear: both; } .lt-ie9 #translation-msg{ margin-top:35px; } div#translation-container>form>div.clearfix{ float: right; } div#translation-container>form>div.clearfix>input{ bottom: 22px; position: relative; padding: 0px 20px; } blockquote#mailinglistBlockQuote { font-family: monospace; margin-left:20px; margin-top:10px; background-color:#F5F5F5; border:1px solid #CCC; width:98%; padding:15px; } blockquote#vertalingBlockQuote { margin-left:20px; margin-top:10px; background-color:#F5F5F5; border:1px solid #CCC; width:98%; padding:15px; } /**************************** TRANSLATION ENDS ****************************/
/**************************** REPORTS START ****************************/
.reportWidget > table thead tr td i, .reportWidget > table thead tr th i, div.greyHeader > i, div.header > i { margin-right:10px; } .reportWidget > table tbody tr td { padding:5px; word-break:break-word; } .reportWidget > table tbody tr td .bigData { font-size:12px; color:#000; white-space: nowrap; } .reportWidget > table tbody tr td a { display: block; } .reportWidget > table tbody tr td a.info { width: 15px; color: #4398d1; } .reportWidget > table tbody tr td a.info:hover { color: #00008B; } .reportWidget > table tbody tr td a.info i { color: #4398d1; } .reportWidget > table tbody tr td a.activeReport { font-weight:bold; color:#000; } #reportRightColumn { width:79%; float:right; overflow: auto; } #picklist { float: left; } #reportRightColumn table{ table-layout: auto !important; } #reportRightColumn table thead tr th, #reportRightColumn table tbody tr td { padding: 5px 10px; } #reportRightColumn.fullScreen { width:100%; float:left; padding:0; } #datatableReports tbody tr:nth-child(odd) { background-color:#FFF; } #datatableReports tbody tr:nth-child(even) { background-color:#F3F3F3; } #datatableReports_previous.paginate_enabled_previous { margin-right: 15px; } #datatableReports_previous.paginate_disabled_previous { margin-right: 15px; display:none; } #datatableReports_next.paginate_enabled_next { } #datatableReports_next.paginate_disabled_next { display:none; } #datatableReports_filter { display:none; } #search_reports { margin-top: 0; box-sizing: border-box; border-radius: 2px; } /**************************** REPORTS ENDS ****************************/
/**************************** STATISTICS STARTS ****************************/
#tp-statistieken .report { width: 100%; padding: 20px; } #tp-statistieken .analytics { width:100%; } #tp-statistieken .analytics .chart { background-color: #FFF; border:1px solid #CCC; margin-left:20px; } .google-visualization-table-th { background: #4398d1 none !important; } /**************************** STATISTICS ENDS ****************************/
/**************************** MAILER STARTS ****************************/
.addblock-settings.data-edit > li > label.full { float: left; width: 100%; } .addblock-settings.data-edit > li > div { padding-right: 15px; } .addblock-settings.data-edit > li > div > select { width: 79%; } .addblock-settings.data-edit > li > div > .submit { width: 20%; height: 26px; } .addblock-settings input[type=submit].submit { float: right; width: auto; font-size: 12px; margin: 12px 0px; padding: 0 10px; } /**************************** MAILER ENDS ****************************/
/**************************** NOTIFICATIONS ****************************/
#notification,#notificationTweeted { display: none; position:fixed; top:0; left:0; width:100%; height:50px; line-height:50px; background-color: #fff; text-align:center; margin:0px; padding:0px; border-bottom: 1px solid #bababa; -moz-box-shadow: 0 0 5px #888; -webkit-box-shadow: 0 0 5px #888; box-shadow: 0 0 5px #888; z-index:9999999; border: 1px solid #c4c4c4; border-radius: 3px; box-shadow: 0 1px 3px #ddd; color: #757575; font-family: "Open Sans", sans-serif; font-size: 12px; font-weight: bold; height: 35px; line-height: 35px; margin-right: 4px; padding: 0 14px; text-decoration: none; text-shadow: 0 1px 0 #fff; text-transform: uppercase; zoom: 1; /* background: url(/gfx/maskMenuRepeat.png) repeat-x #4398d1;*/
background: #4398d1; border: 1px solid #477dae; color: #fff; text-shadow: 0 1px 0 #104266; cursor:pointer; } .notificationError { background: url(/gfx/maskMenuRepeat.png) repeat-x #FF0000 !important; border: 1px solid #8B0000 !important; text-shadow: 0 1px 0 #8B0000 !important; } #notificationTweeted a { text-decoration: underline; } .notificationIcon { top: 4px; position: relative; margin-right: 3px; } .throbber-small { height:100%; width:2.5%; display:none; /* float:right;*/
clear:none; background:url( '/gfx/ajax-loader.gif' ) no-repeat center center; } .throbber-listview { display: block; margin-left: 19px; margin-top: 5px; width: 15px; float: left; background:url( '/gfx/ajax-loader.gif' ) no-repeat center center; } .grid-popup-loader { height:100%; width:120%; background:url(/gfx/bhp/bhp.loading-animated_blocks-big.gif) no-repeat center 200px #FFF; display:block; position:relative; overflow:hidden; } .grid-popup-loader.hidden { display:none; } /**************************** NOTIFICATIONS ENDS ****************************/
/**************************** MODULE MENU ****************************/
#left{ position: relative; top:0; bottom:0; float: left; width: 160px; min-width: 160px; max-width: 250px; min-height: 100%; height: auto; color: #8A8A8A; z-index: 99; } #left a:link, #left a:visited { color: #8A8A8A; text-decoration: none; } #left a:hover { color:#fff; } #settings-menu{ position: relative; height: 92px; overflow: hidden; padding:0px 0px 0px 0px; margin-top: 12px; } #settings-menu a { padding:0 0 0 15px; display: inline; } #toggle-sidebar{ position: absolute; top: 1px; right: 5px; display: block; width: 18px; height: 18px; background-position: -80px -96px; } .hideOnSmall #header-menu{ position: relative; top: 4px; } .hideOnSmall #header-menu a { position:relative; display:block; padding:0 0 0 15px; height:20px; line-height:20px; font-size:12px; color:#8A8A8A; } .hideOnSmall #header-menu li.active a { color:#fff; } #sidebarUsername { width:140px; overflow: hidden; position:relative; top:-2px; color: #8A8A8A !important; } #sidebarUsername:hover { color: #4398d1 !important; } .sitename-cont { width: 150px; height: 92px; overflow: hidden; } .showOnSmall #header-menu{ position: absolute; top: 21px; } .showOnSmall #header-menu a{ position: relative; display: block; padding: 0 4px; height: 35px; line-height: 35px; font-size:12px; color: #8A8A8A; } .showOnSmall #header-menu a:before{ content: ""; display: inline-block; float: left; width:35px; height:35px; line-height: 35px; margin-left: -5px; } #header-menu li.active{ background: #4398d1; /* background: -moz-linear-gradient(top, #6e9feb 0%, #6e9feb 50%, #4398d1 50%, #4398d1 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#6e9feb), color-stop(50%,#6e9feb), color-stop(50%,#4398d1), color-stop(100%,#4398d1)); background: -webkit-linear-gradient(top, #6e9feb 0%,#6e9feb 50%,#4398d1 50%,#4398d1 100%); background: -o-linear-gradient(top, #6e9feb 0%,#6e9feb 50%,#4398d1 50%,#4398d1 100%); background: -ms-linear-gradient(top, #6e9feb 0%,#6e9feb 50%,#4398d1 50%,#4398d1 100%); background: linear-gradient(top, #6e9feb 0%,#6e9feb 50%,#4398d1 50%,#4398d1 100%); -pie-background: linear-gradient(#6e9feb, #4398d1); */
behavior: url(/css/PIE.htc); } #header-menu li{ position:relative; } #header-menu li:hover{ background: #fff; } #header-menu li.empty:hover{ background: none; } #header-menu li a.not-allowed{ color:#ddd; cursor:default; } div#settings-menu span{ position: relative; float: left; width: 100%; z-index: 2; } #module-menu{ position: relative; top: 0; border-top: 1px solid #ddd; /*overflow: hidden;*/
} #module-menu a{ position: relative; display: block; padding: 0 4px; height: 35px; line-height: 35px; font-size:12px; color: #8A8A8A; padding: 0px; } @-moz-document url-prefix() { #module-menu a{ font-size:12px; } } #module-menu a:before{ content: ""; display: inline-block; float: left; width:35px; height:35px; line-height: 35px; margin-right: 6px; } #module-menu li{ position:relative; } #module-menu li:hover{ background: #4398d1; /* background: -moz-linear-gradient(top, #6e9feb 0%, #6e9feb 50%, #4398d1 50%, #4398d1 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#6e9feb), color-stop(50%,#6e9feb), color-stop(50%,#4398d1), color-stop(100%,#4398d1)); background: -webkit-linear-gradient(top, #6e9feb 0%,#6e9feb 50%,#4398d1 50%,#4398d1 100%); background: -o-linear-gradient(top, #6e9feb 0%,#6e9feb 50%,#4398d1 50%,#4398d1 100%); background: -ms-linear-gradient(top, #6e9feb 0%,#6e9feb 50%,#4398d1 50%,#4398d1 100%); background: linear-gradient(top, #6e9feb 0%,#6e9feb 50%,#4398d1 50%,#4398d1 100%); -pie-background: linear-gradient(#6e9feb, #4398d1); */
behavior: url(/css/PIE.htc); } #module-menu li.active a, #module-menu li.active:hover a{ color: #fff; font-weight:bold; background-image: url(/gfx/maskMenuRepeat.png); background-position: center top; background-repeat: repeat; /* text-shadow: 0 1px 0 #104266; */
background: #4398d1; /* background: -moz-linear-gradient(top, #6e9feb 0%, #6e9feb 50%, #4398d1 50%, #4398d1 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#6e9feb), color-stop(50%,#6e9feb), color-stop(50%,#4398d1), color-stop(100%,#4398d1)); background: -webkit-linear-gradient(top, #6e9feb 0%,#6e9feb 50%,#4398d1 50%,#4398d1 100%); background: -o-linear-gradient(top, #6e9feb 0%,#6e9feb 50%,#4398d1 50%,#4398d1 100%); background: -ms-linear-gradient(top, #6e9feb 0%,#6e9feb 50%,#4398d1 50%,#4398d1 100%); background: linear-gradient(top, #6e9feb 0%,#6e9feb 50%,#4398d1 50%,#4398d1 100%); -pie-background: linear-gradient(#6e9feb, #4398d1); */
behavior: url(/css/PIE.htc); } /*#module-menu li.active a.hoekje:after,#module-menu li:hover a.hoekje:after{ content: ''; width: 10px; height: 35px; float: right; left: 10px; top: 0; position: relative; background-color: #4398d1; background-image: url(/gfx/maskMenuItem.png); background-position: 0 -1px; display:block; opacity: 1; } #module-menu li.active a.grijshoekje:after,#module-menu li:hover a.grijshoekje:after{ content: ''; width: 10px; height: 35px; float: right; left: 10px; top:0; position: relative; background-color: #4398d1; opacity: 1; background-position: 0 -1px; background-image: url(/gfx/maskMenuItem2.png); display:block; } */
#module-menu li.active a.grijshoekje.loaded:after,#module-menu li.active:hover a.grijshoekje.loaded:after, #module-menu li.active a.hoekje.loaded:after,#module-menu li.active:hover a.hoekje.loaded:after{ opacity: 1; /* zorgt ervoor dat het after pijltje niet glitchy lijkt tijdens het laden van de pagina */
} #module-menu li.adminModule:not(:hover) a { color:#FF0000; } #module-menu li.active a { color:#FFF !important; } #footer-menu{ position: absolute; width:100%; bottom: 0; border-top: 1px solid #dcddde; border-bottom: 1px solid #fff; } #footer-menu a{ position: relative; display: block; border-top: 1px solid #fff; border-bottom: 1px solid #dcddde; padding: 0 5px; height: 35px; line-height: 35px; font-size:12px; color: #8A8A8A; } #footer-menu a:before{ content: ""; display: inline-block; float: left; width:35px; height:35px; line-height: 35px; margin-right: 10px; } #footer-menu li.active, #module-menu li.active:hover{ background: #4398d1; /* background: -moz-linear-gradient(top, #6e9feb 0%, #6e9feb 50%, #4398d1 50%, #4398d1 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#6e9feb), color-stop(50%,#6e9feb), color-stop(50%,#4398d1), color-stop(100%,#4398d1)); background: -webkit-linear-gradient(top, #6e9feb 0%,#6e9feb 50%,#4398d1 50%,#4398d1 100%); background: -o-linear-gradient(top, #6e9feb 0%,#6e9feb 50%,#4398d1 50%,#4398d1 100%); background: -ms-linear-gradient(top, #6e9feb 0%,#6e9feb 50%,#4398d1 50%,#4398d1 100%); background: linear-gradient(top, #6e9feb 0%,#6e9feb 50%,#4398d1 50%,#4398d1 100%); -pie-background: linear-gradient(#6e9feb, #4398d1); */
behavior: url(/css/PIE.htc); } #footer-menu li{ position:relative; } #footer-menu li:hover{ background: #fff; } #left footer{ position: absolute; left: 10px; bottom: 10px; } /* debug bar for Vuursteen only */
#debugBar { display:block; position:fixed; bottom:0; right:0; z-index:999; width:100%; margin:0; padding:5px; background-color:#F0FF8B; border-color:#EEFF00; } /* make sidebar collapsible*/
#left .showOnSmall { visibility: hidden; } #left.small{ min-width: 0; width: 45px; } #left.small #header-menu a, #left.small #module-menu a, #left.small #footer-menu a { font-size:0px !important; } #left.small #module-menu span{ font-size:0px !important; } #left.small #toggle-sidebar { width:45px; height:45px; background-position: -109px -96px; left:20px; } #left.small #manual, #left.small footer, #left.small .hideOnSmall{ visibility: hidden; } #left.small .showOnSmall { visibility: visible; overflow:hidden; } .buPaginas:before { background-position: 0 0 !important; } .buPaginas.active:before, .buPaginas.hover:before { background-position: -35px 0 !important; } .buMailinglijsten:before { background-position: -2px -1200px !important; } .buMailinglijsten.active:before, .buMailinglijsten.hover:before { background-position: -42px -1200px !important; } .buAfbeeldingen:before { background-position: 0 -35px !important; } .buAfbeeldingen.active:before, .buAfbeeldingen.hover:before { background-position: -35px -35px !important; } .buDownloads:before { background-position: 0 -70px !important; } .buDownloads.active:before, .buDownloads.hover:before { background-position: -35px -70px !important; } .buProducten:before { background-position: 0 -105px !important; } .buProducten.active:before, .buProducten.hover:before { background-position: -35px -105px !important; } .buKlanten:before { background-position: 0 -140px !important; } .buKlanten.active:before, .buKlanten.hover:before { background-position: -35px -140px !important; } .buOrders:before { background-position: 0 -175px !important; } .buOrders.active:before, .buOrders.hover:before { background-position: -35px -175px !important; } .buNieuwsartikelen:before { background-position: 0 -210px !important; } .buNieuwsartikelen.active:before, .buNieuwsartikelen.hover:before { background-position: -35px -210px !important; } .buGebruikers:before { background-position: 0 -245px !important; } .buGebruikers.active:before, .buGebruikers.hover:before { background-position: -35px -245px !important; } .buMedewerkers:before { background-position: 0 -280px !important; } .buMedewerkers.active:before, .buMedewerkers.hover:before { background-position: -35px -280px !important; } .buMailings:before, .bgtest { background-position: 0 -315px !important; } .buMailings.active:before, .buMailings.hover:before { background-position: -35px -315px !important; } .buMailer:before, .bgtest { background-position: 0 -315px !important; } .buMailer.active:before, .buMailer.hover:before { background-position: -35px -315px !important; } .buBetaalopties:before { background-position: 0 -350px !important; } .buBetaalopties.active:before, .buBetaalopties.hover:before { background-position: -35px -350px !important; } .buStatistieken:before { background-position: 0 -385px !important; } .buStatistieken.active:before, .buStatistieken.hover:before { background-position: -35px -385px !important; } .buRapportages:before { background-position: 0 -420px !important; } .buRapportages.active:before, .buRapportages.hover:before { background-position: -35px -420px !important; } .buBeheer:before { background-position: -2px -1325px !important; } .buBeheer.active:before, .buBeheer.hover:before { background-position: -42px -1325px !important; } .buWebsites:before { background-position: 0 -455px !important; } .buWebsites.active:before, .buWebsites.hover:before { background-position: -35px -455px !important; } .buBeheerders:before { background-position: -1px -1162px !important; } .buBeheerders.active:before, .buBeheerders.hover:before { background-position: -41px -1162px !important; } .buVestigingen:before { background-position: 0 -490px !important; } .buVestigingen.active:before, .buVestigingen.hover:before { background-position: -35px -490px !important; } .buSponsors:before { background-position: -2px -1232px !important; } .buSponsors.active:before, .buSponsors.hover:before { background-position: -42px -1232px !important; } .buRecepten:before { background-position: 0 -525px !important; } .buRecepten.active:before, .buRecepten.hover:before { background-position: -35px -525px !important; } .buVormgeving:before { background-position: 0 -560px !important; } .buVormgeving.active:before, .buVormgeving.hover:before { background-position: -35px -560px !important; } .buPortfolio:before { background-position: 0 -595px !important; } .buPortfolio.active:before, .buPortfolio.hover:before { background-position: -35px -595px !important; } .buGastenboek:before { background-position: 2px -1398px !important; } .buGastenboek.active:before, .buGastenboek.hover:before { background-position: -38px -1398px !important; } .buReviews:before { background-position: 0 -630px !important; } .buReviews.active:before, .buReviews.hover:before { background-position: -35px -630px !important; } .buActies:before { background-position: -2px -1294px !important; } .buActies.active:before, .buActies.hover:before { background-position: -42px -1294px !important; } .buAgenda:before { background-position: 0 -665px !important; } .buAgenda.active:before, .buAgenda.hover:before { background-position: -35px -665px !important; } .buAdvertenties:before { background-position: -2px -1430px !important; } .buAdvertenties.active:before, .buAdvertenties.hover:before { background-position: -42px -1430px !important; } .buPolls:before { background-position: 0 -700px !important; } .buPolls.active:before, .buPolls.hover:before { background-position: -35px -700px !important; } .buFotoalbums:before { background-position: 0 -735px !important; } .buFotoalbums.active:before, .buFotoalbums.hover:before { background-position: -35px -735px !important; } .buVideoarchief:before { background-position: 0 -770px !important; } .buVideoarchief.active:before, .buVideoarchief.hover:before { background-position: -35px -770px !important; } .buCoupons:before { background-position: 0 -805px !important; } .buCoupons.active:before, .buCoupons.hover:before { background-position: -35px -805px !important; } .buTagclouds:before { background-position: 0 -875px !important; } .buTagclouds.active:before, .buTagclouds.hover:before { background-position: -35px -875px !important; } .buFormulieren:before { background-position: -2px -1360px !important; } .buFormulieren.active:before, .buFormulieren.hover:before { background-position: -42px -1360px !important; } .buLandingspaginas:before { background-position: -2px -1262px !important; } .buLandingspaginas.active:before, .buLandingspaginas.hover:before { background-position: -42px -1262px !important; } .buObjecten:before { background-position: 0 -840px !important; } .buObjecten.active:before, .buObjecten.hover:before { background-position: -35px -840px !important; } .buVertalen:before { background-position: -1px -1125px !important; } .buVertalen.active:before, .buVertalen.hover:before { background-position: -40px -1125px !important; } .buPrullenbak:before { background-position: -2px -1092px !important; } .buPrullenbak.active:before, .buPrullenbak.hover:before { background-position: -42px -1092px !important; } .buPubliceren:before { background-position: 0 -1058px !important; } .buPubliceren.active:before, .buPubliceren.hover:before { background-position: -38px -1058px !important; } .buVoorkeuren:before { background-position: 0px -980px !important; } .buVoorkeuren.active:before, .buVoorkeuren.hover:before { background-position: -38px -980px !important; } .buUitloggen:before { background-position: 0 -939px !important; } .buUitloggen.active:before, .buUitloggen.hover:before { background-position: -38px -945px !important; } .buManual:before { background-position: -2px -1020px !important; } .buManual.active:before, .buManual.hover:before { background-position: -40px -1020px !important; } .buRedirects:before { background-position: -2px -1455px !important; } .buRedirects.active:before, .buRedirects.hover:before { background-position: -43px -1455px !important; } /* Temporary icons for live publish of new version */
.buBeheerpaneel:before, .buBeheerpaneel.active:before, .buBeheerpaneel.hover:before { background-image: url('/gfx/logo/bhp-icon.png'); background-size: 30px 30px; background-repeat:no-repeat; background-position: 5px 2px; } .buFeedback:before { background-image: url('/gfx/bhp/iconFeedback.png'); background-size: 30px 30px; background-repeat:no-repeat; background-position: 5px 2px; } .buFeedback.active:before, .buFeedback.hover:before { background-image: url('/gfx/bhp/iconFeedback2.png'); background-size: 30px 30px; background-repeat:no-repeat; background-position: 5px 2px; } .buBugs:before { background-image: url('/gfx/bhp/iconBugs.png'); background-size: 30px 30px; background-repeat:no-repeat; background-position: 5px 2px; } .buBugs.active:before, .buBugs.hover:before { background-image: url('/gfx/bhp/iconBugs2.png'); background-size: 30px 30px; background-repeat:no-repeat; background-position: 5px 2px; } /*Menu hover edit*/
/**************************** MODULE MENU ENDS ****************************/
/**************************** TOPMENU ****************************/
header#main-top { height:140px !important; } header#main-top > a{ height:104px; /* display: block; */
display: table-cell; vertical-align: middle; } #logo{ display: block; margin: 0; padding: 0; overflow:hidden; margin-left: 30px; } #topmenu { position: relative; height: 35px; /* background: -webkit-gradient(linear, left top, left bottom, from(#aaaaaa), to(#7e7e7e)); background: -moz-linear-gradient(top, #aaaaaa, #7e7e7e); background: -ms-linear-gradient(top, #aaaaaa, #7e7e7e); filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#aaaaaa', endColorstr='#7e7e7e'); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#aaaaaa', endColorstr='#7e7e7e')"; */
background: #706f6f; border:none; /* border-top: 1px solid #919191; */
padding-left: 17px; margin-top:1px; } #topmenu > ul li { position: relative; float:left; display:none; height: 35px; line-height: 34px; padding:0 10px; color:#FFF; width: auto; font-size: 12px; } #topmenu > ul li span { line-height:34px; } #topmenu > ul li a { display:block; } .f-nav{ z-index: 9999 !important; position: fixed !important; right: 0 !important; top: -1px !important; width: 100% !important;} #uniform-cBedrag, #uniform-cPercentage{ position: relative; float: right; top: 10px; margin-left: 5px; } #uniform-cBedrag + span, #uniform-cPercentage + span{ top: 1px; position: relative; float: right !important; font-size: 16px !important; margin-bottom: 4px; margin-left: 5px; } .radio#uniform-cPercentage{ margin-right: 0px !important; } #topmenu > ul li a:first-child { color:#FFF; padding:0; margin:0 } #topmenu > ul li > span.not-allowed, #topmenu > ul li.not-allowed, #topmenu > ul li > span.not-allowed > *, #topmenu > ul li.not-allowed > * { color:#DDD; font-size: 12px !important; cursor:default !important; } #topmenu > ul li.language-li { display:block; width:300px; height:20px; line-height:20px; } #topmenu > ul li.nonVisible { display:block; width:1px; height:40px; line-height:40px; } #topmenu > ul li.language-li a{ display: block; width:100%; height: 15px; line-height: 15px; color: black; } #topmenu > ul li.language-li a.active{ text-decoration: underline; } #topmenu > ul li.language-li a span{ width:5px; padding: 0; height: 15px; line-height: 15px; margin-right: 6px; } /*Top menu dropdowns */
#filterTable { width: 300px; } #filterTable label.auto { line-height: normal; } .topmenu-dropdown{ display:none; position:absolute; top:34px; left: -2px; z-index: 10; background-color: whitesmoke; color:#6F7072; border-left:1px solid #bababa; border-right:1px solid #bababa; border-bottom:5px solid #bababa; } .topmenu-dropdown form, .topmenu-dropdown-container{ margin: 0; padding: 12px; list-style: none; padding-top: 0px; clear: both; } .topmenu-dropdown label{ clear: left; float: left; width: 25%; line-height: 39px; position: relative; } .topmenu-dropdown label.admin{ color: #FF0000; } .amItem .topmenu-dropdown label{ clear: left; line-height: 38px; } .amItem .topmenu-dropdown .statuslabel{ float: left; } .amItem .topmenu-dropdown .statuses{ display: block; clear: none; float: left; margin-top: 10px; margin-left: 5px; } .amItem .topmenu-dropdown .statuses label{ clear: none; float: left; line-height: normal; margin-left: 10px; margin-bottom: 10px; } .amItem .topmenu-dropdown .statuses input{ clear: left; float: left; margin-top: 2px; } .amCoupons .topmenu-dropdown label{ line-height: 36px; } .amBeheer .topmenu-dropdown label{ line-height: 31px; } .topmenu-dropdown label[for='sub'], .topmenu-dropdown label[for='sub2']{ height: 1px; } .topmenu-dropdown select { width:230px; max-width:230px; margin-top: 0px; margin-bottom: 10px; position:relative; top:3px; } .amBeheer .topmenu-dropdown select { margin-bottom: 8px; } .topmenu-dropdown input[type=text], .topmenu-dropdown input[type=number], .topmenu-dropdown input[type=date], .topmenu-dropdown input[type=email], .topmenu-dropdown input[type=search], .topmenu-dropdown input[type=datetime], .topmenu-dropdown input[type=color], .topmenu-dropdown input[type=tel], .topmenu-dropdown input[type=url]{ width: 230px; max-width:230px; margin-top: 2px; } .topmenu-dropdown select, .topmenu-dropdown input[type=text], .topmenu-dropdown input[type=number], .topmenu-dropdown label{ font-size: 12px; } .topmenu-dropdown a.selectAll, .topmenu-dropdown a.activeAll { display:block; width: 230px; float:right; } .topmenu-dropdown select, .topmenu-dropdown input{ float: right; } .topmenu-dropdown select.admin, .topmenu-dropdown input.admin{ border: 1px solid #FF0000; color: #FF0000; } .amItem .topmenu-dropdown select, .topmenu-dropdown input{ float: right; margin-bottom: 4px; margin-top: 0px; } .topmenu-dropdown input:visible:not([type=submit], [type=button]){ margin-bottom: 0px; } .topmenu-dropdown input.noFloat{ float: none; margin-right: 5px; } .topmenu-dropdown #advice-title{ position: absolute; right: 17px; margin-top: 3px; } .topmenu-dropdown label.full{ width: 100%; } .topmenu-dropdown label.auto{ width: auto; } .topmenu-dropdown.large-labels label{ width: 35%; } .topmenu-dropdown.large-labels label[for^=addBeheerSpec], .topmenu-dropdown.large-labels label[for^=addBeheerSpec] + input + label, .topmenu-dropdown.large-labels label[for^=addBeheerSpec] + input + br + label{ font-size: 12px; } .topmenu-dropdown.large-labels select,.topmenu-dropdown.large-labels input[type=text], .topmenu-dropdown.large-labels input[type=email]{ width: 65%; font-size: 12px; } .topmenu-dropdown .close_button{ width: 26px; height: 20px; float: right; color: #6F7072 !important; background: none; border: none; bottom: 5px; right: 0px; position: relative; padding-bottom: 25px; font-size: 18px; font-weight: bold; line-height: 20px; font-family: 'Open Sans', sans-serif; } .topmenu-dropdown .close_button:hover{ color: #72a6d5 !important; } .topmenu-dropdown input[type=submit], .topmenu-dropdown input.save_button, .topmenu-dropdown input[name=annulerenbutton] { /* padding-left: 10px;*/
/* padding-right: 10px;*/
/* font-size: 12px;*/
/* margin-top: 0px;*/
/* margin-bottom: 0px;*/
} .kopieren_title{ position: absolute; top: 10px; left: 10px; font-size: 12px; } .amOpslaanFix{ height: 10px; } /* Correct width / postion of dropdown menu - We really need to put these in the list structure for better positioning */
#nieuw1, #nieuw2, #kopieren, .dropdown{ width:340px; padding-top: 5px; padding-bottom: 9px; } #myparcel, [for=myparcel], #uitleverbevestigingId, [for=uitleverbevestigingId], #ttcarrier, [for=ttcarrier], #ttid, [for=ttid], #tturl, [for=tturl], #voorraadBijwerken, [for=voorraadBijwerken] { display: none; } .amBeheer #nieuw1, .amBeheer #nieuw2 { width: 388px; } #amNieuwewebsite #nieuw1, #amNieuwewebsite #nieuw2 { width: 390px; } #korting { width: 250px; left: 100px; } #kopieren { width: 360px; left: 100px; } #taalKeuze { width: 150px; left: -45px; padding-top: 12px; position: absolute; } ul#taalWissel { position: relative; top: -40px; right: 10px; z-index: 999; float: right; display: block; width: auto; height: 20px; margin: 5px; padding: 0; } ul#taalWissel > li.language-li { display:none; height:25px; line-height:25px; padding:0; margin:0; text-align:right; clear:both; background-color:#FFF; } ul#taalWissel > li:not(.language-li) { clear: both; display: none; } ul#taalWissel > li.language-li.active { display:block; height:35px; line-height:35px; background-color:transparent; } ul#taalWissel > li.language-li.nonActive { display:block; height:35px; line-height:35px; background-color:transparent; } ol#taalWisselSubmenu { display: inline-block; right: -150px; width: 100%; max-height: 200px; overflow-y: scroll; border-bottom: 5px solid #bababa; } ol#taalWisselSubmenu li.language-li { display: none; width:100%; height:25px; line-height:25px; padding:0; margin:0; text-align:right; clear:both; background-color:#FFF; } ol#taalWisselSubmenu > li.language-cat { display: none; line-height: 25px; color: #888; font-weight:bold; font-size:12px; background-color: whitesmoke; padding: 2px 17px 2px 5px; border-left: 1px solid #bababa; border-right: 1px solid #bababa; text-align:left; } ul#taalWissel > li.language-li a, ol#taalWisselSubmenu > li.language-li a { display:block; width:100%; height: 25px; line-height: 25px; color: #6F7072; background-color: whitesmoke; padding: 2px 17px 2px 5px; border-left: 1px solid #bababa; border-right: 1px solid #bababa; } ul#taalWissel > li.language-li.active a, ol#taalWisselSubmenu > li.language-li.active a { height: 35px !important; line-height: 35px !important; font-weight:bold; color:#FFF; background-color:transparent; padding:10px 0 0 5px; border:0; } ul#taalWissel > li.language-li.nonActive a { height: 35px !important; line-height: 35px !important; color:#CCC; background-color:transparent; padding:10px 0 0 5px; border:0; font-size:12px; cursor:default !important; } ul#taalWissel > li.language-li a:hover, ol#taalWisselSubmenu > li.language-li a:hover { color:#4398d1; background-color:#CCC; } ul#taalWissel > li.language-li.active a:hover, ol#taalWisselSubmenu > li.language-li.active a:hover { color:#FFF; background-color:transparent; } ul#taalWissel > li.language-li.nonActive a:hover, ol#taalWisselSubmenu > li.language-li.nonActive a:hover { color: #CCC; background-color:transparent; } ul#taalWissel > li.language-li a span, ol#taalWisselSubmenu > li.language-li a span { width:5px; padding: 0; height: 15px; line-height: 15px; margin-right: 6px; } ul#taalWissel > li.language-li.active a div.language-name, ul#taalWissel > li.language-li.nonActive a div.language-name { float:left; width:100%; padding:10px 0; } ol#taalWisselSubmenu > li.language-li a div.language-name, { float:left; width:100%; padding:0; } ul#taalWissel > li.language-li.nonActive a div.language-name, ul#taalWissel > li.language-li.active a div.language-name { float:left; width:100%; font-size:12px; margin-top:-10px; } ul#taalWissel > li.language-li.nonActive a div.language-name #redTriangle, ul#taalWissel > li.language-li.active a div.language-name #redTriangle { /* I was red, now I'm white */
float:right; margin-left:5px; } ul#taalWissel > li.language-li.nonActive a div.language-name #redTriangle { color:#CCC; } ul#taalWissel > li.language-li.active a div.language-name #redTriangle { color:#FFF; } nav > ul > img.navDropdownButton { float: right; margin-top: 2px; margin-right: 2px; } nav#topmenu > ul > li > a { line-height:34px; font-size:12px !important; } nav > ul > li > a > .navTitle { display:inline-block; margin-right:5px; font-size:12px !important; } nav > ul > li > .whiteTriangle { display:inline-block; float:right; margin-left:5px; color:#FFF; margin-top:0; } nav > ul > li.nonActive > .whiteTriangle { color:#CCC; } nav > div.navDropdown { height: 0px; float:right; position: relative; background-color: green; overflow: hidden; } nav > div.navDropdown > ul { top: -1px; background-color: #8A8A8A; z-index: 999; padding-top: 5px; } nav > div.navDropdown > ul > li { width: 100px; height: 34px; position: relative; } nav > div.navDropdown > ul > li > a { color: white; display: block; text-align: center; line-height: 34px; } nav > div.navDropdown { display: none; } /**************************** TOPMENU ENDS ****************************/
/**************************** TREEVIEW ****************************/
#content-container.module-paginas{ padding-right: 46px; } .sidebar-pages{ position: absolute; z-index: 1; top: 0; right: 0; width: 50%; height: 100%; margin-right: -50%; background: #fff; } .sidebar-pages-inner{ overflow: auto; width: 100%; height: 100%; padding: 18px; } .sidebar-pages-toggle{ position: absolute; display: block; top: 0; left: -27px; bottom: 0; width: 29px; color: #7e7e7e !important; padding: 6px 7px 6px 6px; border-left: 1px solid #ccc; border-right: 1px solid #ccc; background: #fff; } .sidebar-pages-toggle .opened:before{ position: absolute; top: 6px; left: 8px; } .sidebar-pages-toggle .closed:before{ position: absolute; top: 6px; right: 8px; } div[class$=edit] .sidebar-pages li.li_even{ background: none; } @media screen and (max-width:1023px){ #content-container.module-paginas { padding-right: 0 !important; } .sidebar-pages { display: none; } } ul#contentItemsTree >li:not(.listHead)>.listActions, ul#productenTree li.hasDropdown>.listActions, ul#productenTree li.hasDropdown>.listTitle>.listActions{ /* make first level LIs unmovable on listitem and product pages */
display: none; } [id$=Tree]:not(#vormgevingTree){ float: left; min-width: 250px; width: 100%; font-size: 12px; } div#content-container>div.clearfix{ /* padding: 2px;*/
} .tabs-head{ clear: both; margin-left: 1px; margin-bottom: 0; } .tabs-head li{ display: block; float: left; margin-right: 6px; } .tabs-head li a{ display: block; outline: none; padding: 6px 10px; outline: 1px solid #ccc; background: #f3f3f3; } .tabs-head li a.active, .tabs-head li a:active{ color: #fff; outline: 1px solid #4398d1; background: #4398d1; } li.treeViewSearch { display:block; float:right !important; margin-right:60px; } li.treeViewSearch input { float:left; margin-top:5px; } li.treeViewSearch span { position:absolute; display:block; float:left; margin-left:135px; margin-top:3px; padding:0; border:none; } li.treeViewSearch span a { outline:none; } .treeView{ list-style: none; margin: -15px 0 0 0; /* background: -moz-linear-gradient(top, #f3f3f3 0%, #f3f3f3 50%, #ffffff 50%, #ffffff 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f3f3f3), color-stop(50%,#f3f3f3), color-stop(50%,#ffffff), color-stop(100%,#ffffff)); background: -webkit-linear-gradient(top, #f3f3f3 0%,#f3f3f3 50%,#ffffff 50%,#ffffff 100%); background: -o-linear-gradient(top, #f3f3f3 0%,#f3f3f3 50%,#ffffff 50%,#ffffff 100%); background: -ms-linear-gradient(top, #f3f3f3 0%,#f3f3f3 50%,#ffffff 50%,#ffffff 100%); background: linear-gradient(top, #f3f3f3 0%,#f3f3f3 50%,#ffffff 50%,#ffffff 100%); */
-webkit-background-size: 50px 50px; -moz-background-size: 50px 50px; background-size: 50px 50px; } .no-cssgradients .treeView, .no-backgroundsize .treeView{ background: url(/gfx/bhp/bg.gif) 0 25px; } .treeView li { line-height: 25px; position: relative; } .treeView li .icon-move { color: #000; } .treeView li .dropBox { display:block; border:1px dotted #FF0000; height:25px; background-color:#FDFFF7; } .treeView li .listTitle{ margin-left:20px; overflow: hidden; height: 25px; display: block; padding-right: 50px; color: #000; line-height: 25px; } .treeView li .listTitle > input[type="checkbox"] { margin:-2px 0 0 10px; } .treeView li.expandable .listTitle, .treeView li.collapsable .listTitle, .treeView ul.listSub li.expandable .listTitle, .treeView ul.listSub li.collapsable .listTitle { margin-left:0; } .treeView li .listTitle span.listTitleName { cursor: pointer; } .treeView li .listTitle a.toggleArrow{ overflow: hidden; display: inline-block; width: 13px; height: 13px; vertical-align: middle; margin-left:4px; background-position: -75px -40px; } .treeView li .listTitle a.toggleArrow.open { background-position: -98px -54px; } .treeView li.hasDropdown .listTitle a.page-link{ height: 25px; padding: 5px; display: block; margin-top: -25px; margin-left: 45px; line-height: 15px; } .treeView li .listTitle a.page-link{ height: 25px; padding: 5px; display: block; margin-top: -28px; margin-left: 25px; line-height: 20px; } .treeView li .listTitle .page-link.active{ color: #4398d1; } .treeView li .listTitle span.group-link { height: 25px; padding: 6px 25px; display: block; margin-top: -28px; margin-left: 25px; line-height: 20px; } .emptyList, .noItems{ margin-left: 50px; } .dataTables_empty{ left: 10px; position: relative; } .treeView li ul.listSub li.hasDropdown .listTitle a.page-link { height: 25px; padding: 5px; display: block; margin-top: -25px; margin-left: 45px; line-height: 15px; } .treeView li ul li.hasDropdown ul.listSub li.hasDropdown .listTitle a.page-link{ height: 25px; padding: 5px; display: block; margin-top: -25px; margin-left: 45px; line-height: 15px; } .treeView li ul li.hasDropdown ul.sortableSub3List li .listTitle a.page-link{ margin-left: 25px !important; } .treeView li ul.listSub li .listTitle a.page-link { height: 25px; padding: 5px; display: block; margin-top: -25px; margin-left: 25px; line-height: 15px; } .treeView li ul li.hasDropdown ul.listSub li .listTitle a.page-link{ height: 25px; padding: 5px; display: block; margin-top: -25px; margin-left: 25px; line-height: 15px; } .treeView li .listTitle input, .treeView li.listHead input { margin: 0 5px 0 10px; position: relative; height: 13px; /* display: table-cell;*/
vertical-align: middle; } .treeView li .listAllowDelete { position: absolute; top: 0; right: 200px; height: 25px; line-height: 25px; text-align: center; white-space: nowrap; width: 15px; padding-right: 55px; color: #FFF; } .treeView li .listAllowDelete i.icon-locked { color: #888; } .treeView li .listAllowDelete i.icon-unlocked { visibility:hidden; } .treeView li .listActions { position: absolute; top: 0; right: 110px; height: 25px; line-height: 25px; text-align: center; white-space: nowrap; width: 15px; padding-right: 55px; } .treeView li .listSubtitle { position: absolute; top: 0; right: 110px; height: 25px; line-height: 25px; white-space: nowrap; width: 300px; padding-right: 55px; overflow:hidden; } .treeView li.listHead .listActions { padding-right: 76px; } .treeView#couponsTree li.listHead .listActions { padding-right: 60px; } .treeView li.expandable > .listTitle a.page-link, .treeView li.collapsable > .listTitle a.page-link, .treeView ul.listSub li.collapsable > .listTitle a.page-link, .treeView ul.listSub li.expandable > .listTitle a.page-link { margin-left:45px; } .treeView ul.listSub li.expandable, .treeView ul.listSub li.collapsable { margin-left: 0; } .treeView li .domain{ position: absolute; top: 0; right: 200px; height: 25px; line-height: 25px; width: 200px; text-align: left; } .treeView li .modified{ position: absolute; top: 0; right: -2px; width: 112px; padding-right: 10px; height: 25px; line-height: 25px; text-align: right; } .treeView li .modifiedLeft{ margin-right: 5px; color: #000; } .treeView li .modifiedRight{ width: 31px; display: inline-block; } .treeView li .discount{ position: absolute; top: 0; right: 200px; height: 25px; line-height: 25px; width: 100px; text-align: left; display: none; } .treeView li .listActions a{ display: inline-block; margin: 8px 2px 0 0; } .treeView li.listHead{ color: #fff; font-size: 12px; background-color:#4398d1; padding-left: 20px; font-weight:bold; } a.moveElement { margin:0px !important; padding-top:5px; display:block; width:25px; height:25px; text-align:center; cursor:move; } #checkboxToggler { margin-right:6px; } a.moveElement img { margin:0 auto; } /* Tree View Sub */
.treeView ul.listSub{ list-style: none; margin: 0 0 0 20px; padding: 0; display:none; } .treeView li.hasDropdown > .listTitle{ margin: 0; } .treeView li.open > ul.listSub{ display: block; } /* Small content items have no input field - margin fix */
.treeView li.smallItems ul.listSub{ margin-left: 0; } .treeView li.smallItems ul.listSub ul.listSub{ margin-left: 20px; } /*Website module */
#websites-module-menu{ height:250px; overflow:auto; padding: 10px; margin-top: 14px; } #websites-module-menu label{ width: auto; clear: right; display: inline-block; line-height: 0; margin-bottom: 22px; padding-left: 10px; } #websites-module-menu input{ float: left; clear: both; } .websites-module-title{ font-weight: bold; display: block; clear: both; } li.li_odd > span, li.li_odd > div, li[data-itemid] > span.span_odd{ background-color: #ffffff; } li.li_even > span, li.li_even > div, li[data-itemid] > span.span_even{ background-color: #f3f3f3; } div[class$=edit] li.li_even{ background-color: #f3f3f3; } div[class$=edit] li.li_odd{ background-color: #ffffff; } div[class$=edit] .sidebar-pages li.li_odd{ background: none; } li.editSub{ /* om standaard de formulieren in te vouwen height: 30px; */
margin-top: 2px; background: white !important; height: 30px; overflow: hidden; } .productVariant { font-style: italic; color: #008B00 !important; } .nonActiveItem { font-style: italic; color: #888 !important; } /* Treeview search */
.searchBarCont { margin-top: 0; margin-bottom: 15px; } .searchBarCont li.listHead.searchBar { padding: 8px 8px 2px 30px; } .searchBarCont li.listHead .treeSearch, .searchBarCont li.listHead .filterform { display: block; width: 100%; } .searchBarCont li.listHead .filterinput { width: 100%; height: 19px; color: #a9a9a9; font-size: 12px; line-height: 0; padding: 2px 4px; margin: 0; border-radius: 5px; } .searchBarCont li.listHead .filterinput:active { color: #000; } /**************************** TREEVIEW ENDS ****************************/
/**************************** DATATABLE STARTS ****************************/
[class$=Datatable]{ float: left; width: 100%; min-width: 250px; font-size: 12px; margin: -15px 0 0 0 !important; } span.dataDescription{ display: block; width: 72%; margin-bottom: 0px; height: 0px; } .dataTables_wrapper * { outline:none; } .dataTables_wrapper table { float:left; clear:both; width:100%; overflow-x:scroll; /* -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; */
} table.dataTable tbody tr td a:link, table.dataTable tbody tr td a:visited { display:block; text-decoration:none; color:#000; } table.dataTable tbody tr td a:hover { color:#4398d1; } table.dataTable tbody tr td a:hover span { color:#4398d1 !important; } .dataTables_filter, .dataTables_processing{ display:block; float:right; margin:0px; margin-top:-57px; width: 28%; } .beheerDatatable .dataTables_wrapper{ margin-top: 70px; } .dataTables_processing{ display: inline-block; bottom: 10px; position: relative; width: auto; } .dataTables_filter input[type=text]{ max-width: 200px; width: 100%; height: 28px; background: #fff url( '/gfx/bhp/bhp.search-background-magnifier.png' ) 12px center no-repeat; padding-left: 36px; behavior:url(/css/PIE.htc); } .dataTables_filter label{ float: right; } .datatable th, .datatable td{ border:0; padding: 4px 18px 3px 0px; line-height:18px; white-space: nowrap; font-size:12px; font-family:'Open Sans', sans-serif; font-weight:normal; } .datatable td.dataTables_empty{ } .datatable td.first-column, .datatable th.first-column{ font-weight:normal; border:none; padding-left:5px; } .dataTable .paddingleft { padding-left:20px !important; } .datatable .dataTables_info, .datatable .dataTables_length, .datatable .dataTables_paginate{ line-height: 24px; float: left; margin: 20px 0 20px 20px; } .dataTables_info { float:left; clear:none; margin-top:10px; padding-left:21px; } .dataTables_length { float:right; clear:none; margin-top:10px; padding-right:21px; } .dataTables_length label span { display:inline; } .dataTables_length label select { width:auto; } .dataTables_paginate { clear:both; padding:19px 21px 0 21px; } .dataTables_paginate .paginate_button { clear:none; } .dataTables_paginate span { display:block; text-align:center; padding:2px 0; margin-right:82px; } .dataTables_paginate span a { color:#000; padding:2px 5px 2px 7px; margin:0 1px; } .dataTables_paginate .last.paginate_button, .dataTables_paginate .first.paginate_button, .paginate_button_disabled, .paginate_button_disabled:hover { color:#fff; cursor:default; } .dataTables_paginate .next.paginate_button { float:right; clear:none; margin-top:-19px; } .dataTables_paginate .previous.paginate_button{ float:left; clear:none; } table.dataTable thead th.sorting span, table.dataTable thead th.sorting_asc span, table.dataTable thead th.sorting_desc span, table.dataTable thead th.sorting, table.dataTable thead th.sorting_asc, table.dataTable thead th.sorting_desc { cursor:pointer; color:#fff; } table.dataTable thead th:first-child, table.dataTable tbody td:first-child { padding-left:5px; } table.dataTable thead th, table.dataTable tbody td { padding:5px; } table.dataTable tbody td { color:#000; } table.dataTable tbody td > span > span.time, table.dataTable tbody td > span.time { color:#6F7072 !important; } table.dataTable thead th.sorting_disabled, table.dataTable thead th:not(.sorting_asc):not(.sorting_desc):not(.sorting) { cursor: default !important; } .datatable thead th.sorting_asc { background: url('/gfx/datatables/sort_asc.png') no-repeat top 4px right; } .datatable thead th.sorting_desc { background: url('/gfx/datatables/sort_desc.png') no-repeat top 4px right; } .datatable thead th.sorting { background: url('/gfx/datatables/sort_both.png') no-repeat top 4px right; } .datatable .dataTables_info{ width: 230px; padding-left:19px; } .paginate_active { font-weight:bold; } .datatable thead tr th { font-weight:bold; } .datatable thead tr th.alignright input, .datatable thead tr th.alignright select { position:absolute; right:0px; } .datatable tbody tr td.alignright { padding-right:20px; } .datatable thead tr th#checkbox, .datatable tbody tr td.checkbox { width:5px !important; padding-right:0px !important; margin-right:0px !important; margin-left:20px; overflow:hidden !important; } .datatable thead tr th .selectallbox, .datatable thead tr th .selectallDT, .datatable tbody tr td .rowcheckbox { margin-top: -5px; margin-left:10px; vertical-align: middle; } .datatable tbody tr td { vertical-align: top; } .datatable.contentItem:not(.checkbox), .datatable tbody tr td:not(.rowcheckbox){ min-width: 60px; } .datatable.contentItem #name, .datatable tbody tr td.name { padding-left:0px; padding-right: 0px; } .datatable.contentItem #product, .datatable tbody tr td.product { padding-left:20px; } .ordersDatatable .dataTable td.name { min-width: 325px; } .datatable.contentItem #dateAdded { width:25%; } .datatable td div.imageBox { position:relative; width:60px; height:60px; overflow:hidden; line-height:60px; } .datatable td div.imageBox img { position:absolute; vertical-align: middle; max-height: 60px !important; } .selectallbox, .selectallDT { position:absolute; top:23px; } .yadcf-filter-wrapper { position:relative; top:-8px; display:block; width:100%; height:32px; margin:0; padding:0; } .yadcf-filter-reset-button { display:none; } .yadcf-filter-reset-button2 { position:absolute; float:none; top:10px; right:18px !important; color:#888; background-color:transparent; border:none; z-index:999; } .yadcf-alignright input, .yadcf-alignright select { position:absolute; right:8px; } .yadcf-aligncenter input, .yadcf-aligncenter select { position:absolute; right:8%; } .ui-datepicker { background-color:#FFF; } ul.ui-autocomplete { width:20%; background-color:#FFF; border:1px solid #4398d1; border-radius:5px; } ul.ui-autocomplete > li { width:100%; } ul.ui-autocomplete > li > a { display:block; width:100%; padding:5px; } ul.ui-autocomplete > li > a:hover { background-color:#CCC; color:#FFF; } input[type=text].yadcf-filter, input.yadcf-filter-date, input.ui-autocomplete-input, select.yadcf-filter { padding:0 5px; margin:10px 5px 0 0 !important; width:80%; max-width:300px; height:20px; font-size:12px; line-height:20px; float:left; border-radius:5px; border:none; } .yadcf-filter-reset-button { float:left; margin:10px 0 0 0 !important; padding:0; width:21px; height:21px; border:none; border-radius:5px; background-color:#CCC; } .alignright { text-align: right; } th span.titleRight { display:block; text-align:right; padding-right:15px; } .alignleft { text-align: left; } .aligncenter { text-align: center; } .firstColumnDT { border-left:1px solid #CCC !important; } .lastColumnDT { border-right:1px solid #CCC !important; } .datatable tr { /* vertical-align: top;*/
} .datatable tbody tr.even{ background: #f3f3f3; } .datatable tbody tr.odd{ background: #fff; } .datatable tbody tr.status.inactive td, .datatable tbody tr.status.inactive td a, .datatable tbody tr.status.unpaid td, .datatable tbody tr.status.unpaid td a, .datatable tbody tr.status.credited td, .datatable tbody tr.status.credited td a{ color: #ff0000 !important; font-weight: 600; } .datatable tbody tr.status.canceled td, .datatable tbody tr.status.canceled td a{ color: #bfbfbf !important; font-weight: 600; } .datatable tbody tr.status.delivered td, .datatable tbody tr.status.delivered td a{ color: #919191 !important; font-weight: 600; } .datatable tbody tr.status.paid td, .datatable tbody tr.status.confirmed td, .datatable tbody tr.status.paid td a, .datatable tbody tr.status.confirmed td a{ color: #709900 !important; font-weight: 600; } .datatable tbody tr.status.shipped td, .datatable tbody tr.status.shipped td a{ color: #9c9c9c !important; font-weight: 600; } .datatable tbody tr.status.unconfirmed td, .datatable tbody tr.status.unconfirmed td a{ color: #d76518 !important; font-weight: 600; } .datatable tbody tr.status.clickcollect td, .datatable tbody tr.status.clickcollect td a{ color: #919377 !important; font-weight: 600; } .datatable .rowcheckbox, .datatable thead input[type=checkbox] { margin-right: 18px; position: relative; } .time { opacity: 0.75; } .Nietbevestigd { color:#D56317; } .Bevestigd { color:#709A00; } .Geannuleerd { color:#c0c0c0; } #gridWrapper { min-width:100%; overflow-x:auto; } .fileDatatable > #gridWrapper, .imageDatatable > #gridWrapper { overflow-y:auto; overflow-x:hidden; max-height:350px; } .imageDatatable tbody tr { height: 60px; } .keywordDatatable { width:100% !important; } .disabled { color: #999; } /* Custom styling Datatables */
.mailBounce { color:#FF0000 !important; } .inactiveCustomer { color:#8B0000 !important; float:right; margin-right:20px; } .orderComment { display:table-cell; max-width:200px; min-height:50px; word-break:break-normal; vertical-align:middle; white-space:normal; word-wrap:break-word; } /**************************** DATATABLE ENDS ****************************/
/**************************** OTHER LISTVIEWS START ****************************/
/* SOME RANDOM CSS, DUNNO WHY, SCHEDULED FOR REMOVAL */
div.tableCel1 { width:20%; min-height:30px; float:left; line-height:20px; } div.tableCel2 { width:76.5%; min-height:30px; float:left; overflow:hidden; } ul#vormgevingTree input[type=submit]{ margin-left: 5px; padding: 0 5px 0 5px; } ul#vormgevingTree li.vorm_odd{ background-color: #F5F5F5; } ul#vormgevingTree li.vorm_even{ background-color: #ffffff; } #chooseColor + input{ padding-left: 4px; padding-right: 4px; } /**************************** OTHER LISTVIEWS ENDS ****************************/
/**************************** LANGUAGE FLAGS ****************************/
.language { background:url(/gfx/sprite/bhp.sprite-lang.png) no-repeat; width:14px !important; height:11px; float:left; margin-top:3px; padding: 0 13px; cursor:pointer; line-height:14px !important; } .da_DA { background-position: 0 0; width: 14px; height: 11px; } .da_DANb { background-position: -15px 0; width: 14px; height: 11px; } .de_DE, .de_AT, .de_CH { background-position: -30px 0; width: 14px; height: 11px; } .de_DENb, .de_ATNb, .de_CHNb { background-position: -45px 0; width: 14px; height: 11px; } .df_DF { background-position: -800px 0; width: 14px; height: 11px; } .df_DFNb { background-position: -845px 0; width: 14px; height: 11px; } .el_EL { background-position: -60px 0; width: 14px; height: 11px; } .el_ELNb { background-position: -75px 0; width: 14px; height: 11px; } .en_GB, .en_CA, .en_ZA, .ea_CA, .we_CA { background-position: -90px 0; width: 14px; height: 11px; } .en_GBNb, .en_CANb, .en_ZANb { background-position: -105px 0; width: 14px; height: 11px; } .en_US { background-position: -120px 0; width: 14px; height: 11px; } .en_USNb { background-position: -135px 0; width: 14px; height: 11px; } .es_CA { background-position: -150px 0; width: 14px; height: 11px; } .es_CANb { background-position: -165px 0; width: 14px; height: 11px; } .es_ES { background-position: -180px 0; width: 14px; height: 11px; } .es_ESNb { background-position: -195px 0; width: 14px; height: 11px; } .fi_FI { background-position: -210px 0; width: 14px; height: 11px; } .fi_FINb { background-position: -225px 0; width: 14px; height: 11px; } .fr_BE, .fr_CA, .fr_FR, .fr_CH { background-position: -240px 0; width: 14px; height: 11px; } .fr_BENb, .fr_CANb, .fr_FRNb, .fr_CHNb { background-position: -255px 0; width: 14px; height: 11px; } .it_IT { background-position: -270px 0; width: 14px; height: 11px; } .it_ITNb { background-position: -285px 0; width: 14px; height: 11px; } .ja_JA { background-position: -300px 0; width: 14px; height: 11px; } .ja_JANb { background-position: -315px 0; width: 14px; height: 11px; } .nl_BE, .nl_NL, .af_ZA { background-position: -330px 0; width: 14px; height: 11px; } .nl_BENb, .nl_NLNb, .af_ZANb { background-position: -345px 0; width: 14px; height: 11px; } .no_NO { background-position: -360px 0; width: 14px; height: 11px; } .no_NONb { background-position: -375px 0; width: 14px; height: 11px; } .pl_PL { background-position: -390px 0; width: 14px; height: 11px; } .pl_PLNb { background-position: -405px 0; width: 14px; height: 11px; } .pt_PT, .pt_BR { background-position: -420px 0; width: 14px; height: 11px; } .pt_PTNb, .pt_BRNb { background-position: -435px 0; width: 14px; height: 11px; } .sv_SV { background-position: -450px 0; width: 14px; height: 11px; } .ru_RU { background-position: -480px 0; width: 14px; height: 11px; } .zh_CN { background-position: -510px 0; width: 14px; height: 11px; } .ro_RO { background-position: -540px 0; width: 14px; height: 11px; } /**************************** LANGUAGE FLAGS ENDS ****************************/
/**************************** TEMPLATES ****************************/
/*========================================* EDIT TEMPLATES *========================================*/
.header { background:#4398d1; color:#FFF; line-height:30px; padding:0 15px; } .greyHeader { background:#A5A5A5; color:#FFF; line-height:30px; padding:0 15px; } .data-edit > li { width:100%; } .data-edit li.no-options-found { font-size: 12px; line-height: 18px; } .data-edit > li > * { float:left; width:75%; } .data-edit > li > .radio { width:70%; padding-top:5px; background-color:transparent; } .data-edit > li > .input-radio-optgroup { padding-top:15px; } .data-edit > li > a.breadCrumb:after { content:"› "; margin-left:10px; } .data-edit > li > label { width:25%; line-height:50px; padding:0 0 0 15px; font-size:12px; } .data-edit > li > .mce-container{ float: none; width: auto; } .data-edit li.header { background:#4398d1; } .data-edit li.greyHeader { background:#A5A5A5; } .data-edit li.greyHeader, .data-edit li.greyHeader > *, .data-edit li.header, .data-edit li.header > * { color:#FFF; font-weight:normal; } .data-edit li.greyHeader > *, .data-edit li.header > * { width:auto; display:inline-block; } .data-edit li.greyHeader > h2, .data-edit li.header > h2 { line-height:28px; } .selectAll, .activeAll { display:block; font-size:12px; padding:0 0 8px 0; margin: 5px 10px 0 0; margin-bottom: 2px; float: left; } .selectAll.hidden, .activeAll.hidden { display: none; } .multicheckbox-container { width: 98%; max-height: 172px; overflow: auto; margin-top: 6px; padding: 0 3px; border: 1px solid #cccccc; background: #fff; } .multicheckbox-container label { display: block; width: 100%; } .multicheckbox-container label.hidden { display: none; } .multicheckbox-container label br { display: none; } .sort { width:100%; height:100%; background:url( '/gfx/bhp/cursorMoveUpDown.png' ) no-repeat center center; background-size:10px 15px; cursor:move !important; } .lt-ie9 .sort { background:url( '/gfx/bhp/cursorMoveUpDownSmall.png' ) no-repeat center center; } .report { line-height:50px; padding-left:10px; } .keyword { padding:10px; } .keywordTable { display:block; position:relative; float:left; width:49%; margin:0 10px 10px 0; } .keywordTable tr:nth-child(even) { background-color:#EEE; } .keywordTable tr td { padding:5px; } .keywordTable tr td.keywordFirstColumn { width:300px; } .mce-editor { height:270px; padding:10px 0; } .mce-menubar { background-color:#F0F0F0 !important; border-bottom:none !important; } .editor, .editoradvanced, .textarea { padding:1% 0; } #tp-beheerders .report { padding: 20px; } /*========================================* CHANGELOG *========================================*/
.changelog-filter { width: 200px; } .changelog-container { display: block; width: 100% !important; } .changelog-version { display:block; width: 100%; padding: 5px; } .changelog-version > h2 { padding: 5px 0; } .changes-list > li { padding: 10px; } .change-title { display: block; font-size:16px; font-weight: bold; margin: 5px 0; } .change-description { display: block; margin: 5px 0; } .change-type { display: block; margin: 5px 0; } .change-date { } /*========================================* PAGINABEHEER *========================================*/
.viewstate-edit { margin-top:-15px; } .generic-settings > li.greyHeader > a, .generic-settings > li.header > a { line-height:30px; margin:0 5px; color:#FFF; } .generic-content > li > div.mce-tinymce { width:100%; padding:0; margin:0; } /*========================================* GEBRUIKERSBEHEER *========================================*/
.generic-settings > li .layout-fullname select, .additional-settings > li .layout-fullname select { width:15%; } .generic-settings > li .layout-fullname input.prefix, .additional-settings > li .layout-fullname input.prefix { width:15%; } .generic-settings > li .layout-fullname input.initials, .generic-settings > li .layout-fullname input.lastname, .additional-settings > li .layout-fullname input.initials, .additional-settings > li .layout-fullname input.lastname { width:33.1%; } .generic-settings > li .layout-zipcode input.zipcode, .additional-settings > li .layout-zipcode input.zipcode { width:15.3%; } .generic-settings > li .layout-zipcode input.city, .additional-settings > li .layout-zipcode input.city { width:82.1%; } .generic-settings > li .layout-address input.streetname, .additional-settings > li .layout-address input.streetname { width:74%; } .generic-settings > li .layout-address input.housenumber, .additional-settings > li .layout-address input.housenumber { width:14%; } .generic-settings > li .layout-address input.extra, .additional-settings > li .layout-address input.extra { width:8.8%; } /*========================================* PRODUCTBEHEER *========================================*/
.generic-settings > li #input-product-use-price-action, .generic-settings > li #input-product-use-price-gross { width:20%; } .generic-settings > li #input-product-price-action, .generic-settings > li #input-product-price-gross { width: 77.4%; } #productvariant-tabs .tab { float: left; margin: 5px 5px 0 0; background-color: #CCC; } #productvariant-tabs .tab.active { background-color: #4398d1; font-weight: bold; } #productvariant-tabs .tab a { display: inline-block; min-width: 50px; padding: 5px 10px; color: #FFF; text-align: center; } #productvariant-tabs .tab:hover { background-color: #4398d1; } /*========================================* ITEM ( OBJECT ) BEHEER *========================================*/
.generic-settings > li .lat-lon-address { width:58.8%; } .generic-settings > li .lat-lon-coordinate { width:20%; } /*========================================* FORMULIERBEHEER *========================================*/
.data-edit > li.greyHeader, .data-edit > li.header { color:#FFF; } .data-edit > li.greyHeader > span.btn-delete, .data-edit > li.header > span.btn-delete, .data-edit.opts span.btn-delete { font-size: 60px; line-height:18px; padding:0 10px 0 0; cursor:pointer; } .data-edit > li.greyHeader > span.btn-fold, .data-edit > li.header > span.btn-fold, .data-edit > li.header > span.btn-move { cursor:pointer; float:right; line-height:28px; } .data-edit > li.greyHeader > span.btn-fold, .data-edit > li.header > span.btn-fold { margin-right:35px; } .data-edit > li.greyHeader > span.btn-move, .data-edit > li.header > span.btn-move { line-height:0; margin-top:6px; margin-right:6px; } .data-edit.opts { width: 76.5%; margin-bottom: 5px; float:right; } .data-edit.opts ul.options-sub { width:100%; } .data-edit.opts ul.options-sub li input { width:90%; } .data-edit.opts ul.options-sub li span.btn-move, .data-edit.opts ul.options-sub li span.btn-delete { position:absolute; height:28px; right:26px; top:11px; } .data-edit.opts ul.options-sub li span.btn-move img { height:28px; } .data-edit.opts ul.options-sub li span.btn-delete { right:17px; top: 60px; } .form-element-spawner li span.btn-add-opt { width:auto; display:block; float:right; cursor:pointer; } .form-element-spawner li span.btn-add-opt h4 { font-size:12px; line-height:32px; margin-right:20px; } .form-element-spawner li span.btn-add-opt h4:before { position:relative; content:'+'; font-size:26px; top:3px; padding:0 6px; } #formulieren-items span.btn-add-field { width:auto; display:block; float:left; cursor:pointer; } #formulieren-items span.btn-add-field h3 { position:absolute; bottom:16px; left:23px; font-size:18px; line-height:32px; } #formulieren-items span.btn-add-field h3:before { position:relative; content:'+'; font-size:40px; top:6px; padding:0 6px; } a.kopieerbezadres, a.vouwknop{ color: #fff; position: relative; line-height: 28px; float: right !important; text-decoration: underline; } a.kopieerbezadres:hover, a.vouwknop:hover{ color: #fff; text-decoration: underline; } a.vouwknop{ right: 50px; position: relative; } /*========================================* IMAGE MANAGER *========================================*/
.generic-images, .additional-images{ padding-top: 15px; } .generic-images > li:not(.greyHeader), .additional-images > li:not(.greyHeader), .generic-images > li:not(.header), .additional-images > li:not(.header) { position:relative; margin: 5px 0; padding: 10px 0 4px 15px; } .generic-images > li.greyHeader > h2, .additional-images > li.greyHeader > h2, .generic-images > li.header > h2, .additional-images > li.header > h2{ display:inline; color:#FFF; width:auto; font-weight:normal; line-height:30px; } .generic-images > li.greyHeader > a, .additional-images > li.greyHeader > a, .generic-images > li.header > a, .additional-images > li.header > a { width:auto; } .generic-images > li a, .additional-images > li a { display:inline-block; } .generic-images > li a.image-thumb, .additional-images > li a.image-thumb { width:8%; max-height:50px; float: left; margin:0; padding:0; } .generic-images > li a.image-thumb img, .additional-images > li a.image-thumb img { height:100%; } .generic-images > li .image-data, .additional-images > li .image-data { float:left; margin-left:10px; } .generic-images > li .image-data, .additional-images > li .image-data { width:60%; } .generic-images > li .image-data > div, .additional-images > li .image-data > div { width:100%; } .generic-images > li .image-data > div *, .additional-images > li .image-data > div * { position:relative; } .generic-images > li .image-data > div label, .additional-images > li .image-data > div label { width:8%; display:inline-block; font-size:12px; } .generic-images > li .image-data > div input, .additional-images > li .image-data > div input { height:20px; line-height:18px; width:65%; display:inline-block; margin: 0 0 6px 0; } .generic-images > li .image-data > div input[type=button], .additional-images > li .image-data > div input[type=button] { width:22%; height:21px; line-height: 22px; display:inline-block; } .generic-images > li a.image-delete, .additional-images > li a.image-delete { width:20%; float:left; line-height:270%; display:inline-block; padding:0 15px; font-size: 12px; margin-top: 6px; } .generic-images > li a.sort, .additional-images > li a.sort { line-height:50px; width:10%; float:right; display:inline-block; } a.file-delete, a.image-delete{ white-space:nowrap; text-align: center; } .moxman-listview-downloads div[aria-label="View"]{ display: none !important; } /*========================================* FILE MANAGER *========================================*/
.generic-files, .additional-files{ padding-top: 15px; } .generic-files > li:not(.greyHeader), .generic-files > li:not(.header) { position:relative; margin: 5px 0; padding: 4px 0 4px 15px; } .generic-files > li.li_even { background:#F3F3F3; } .generic-files > li a { display:inline-block; } .generic-files > li a.file-thumb { width:8%; max-height:50px; float: left; margin:0 0 10px 0; padding:0; } .generic-files > li a.file-thumb:before { height:49px; width:60px; background:url( '/gfx/bhp/bhp.icon-file-types.png' ) no-repeat; background-position:0px -343px; display:block; margin-top:6px; position:relative; content:''; top:0; left:0; } .generic-files > li a.file-thumb.doc:before { background-position:0px -2px; } .generic-files > li a.file-thumb.docx:before { background-position:0px -51px; } .generic-files > li a.file-thumb.htm:before, .generic-files > li a.file-thumb.html:before { background-position:0px -148px; } .generic-files > li a.file-thumb.pdf:before { background-position:0px -196px; } .generic-files > li a.file-thumb.txt:before { background-position:0px -245px; } .generic-files > li a.file-thumb.zip { background-position:0px -294px; } .generic-files > li .file-data { float:left; margin-left:10px; } .generic-files > li .file-data { width:60%; } .generic-files > li .file-data > div { width:100%; padding-top: 8px; } .generic-files > li .file-data > div * { position:relative; } .generic-files > li .file-data > div label { width:8%; display:inline-block; } .generic-files > li .file-data > div input { height:20px; line-height:18px; width:65%; display:inline-block; margin: 0 0 6px 0; } .generic-files > li .file-data > div input[type=button] { width:22%; height:21px; line-height:22px; display:inline-block; } .generic-files > li a.file-delete { width:20%; float:left; line-height: 310%; display:inline-block; padding:0 15px; margin-top: 6px; } .generic-files > li a.sort { line-height:50px; width:10%; float:right; display:inline-block; } /*========================================* FILE MANAGER ENDS *========================================*/
/*========================================* INVOICE GENERATOR *========================================*/
.generic-invoice .address-select { position: relative; } .generic-invoice .multicheckbox-company-name { margin: 0 10px 0 0; padding: 10px; background: #eee; position: absolute; top: 40px; width: 100%; z-index: 9999; display: none; } #invoice-company-street, #invoice-company-city { width: 70% !important; } #invoice-company-houseNumber, #invoice-company-houseNumberAdd { width: 10% !important; } #invoice-company-postalCode { width: 25% !important; } .invoice-stripe{ display: block; margin: 20px 0; width: 100%; float: left; border: 0; } .product-add, .product-rest{ float: left; width: 100%; } .product-add .product-select, .product-rest .product-select{ width: 40%; margin: 0; position: relative; background: none; } .product-add .product-select .no-results, .product-rest .product-select .no-results{ z-index: 99999; } .product-add .product-select .multicheckbox-search, .product-rest .product-select .multicheckbox-search{ position: relative; } .product-add .product-select .multicheckbox-container, .product-rest .product-select .multicheckbox-container{ margin: 0 10px 0 0; padding: 10px; background: #eee; position: absolute; top:40px; z-index: 9999; display: none; } .product-add .invoice-title, .product-rest .invoice-title{ width: 40%; margin: 10px 10px 0 0; } .product-add .invoice-vat, .product-rest .invoice-vat{ width: 8%; margin: 10px 10px 0 0; } .product-add .invoice-vat:disabled, .product-rest .invoice-vat:disabled{ background-color: #F8F8F8; } .product-add .invoice-amount, .product-add .invoice-price, .product-rest .invoice-amount, .product-rest .invoice-price{ width: 15%; margin: 10px 10px 0 0; } .product-add .invoice-subtotal, .product-rest .invoice-subtotal{ width: 15%; padding: 18px 0 0 0; margin: 0 10px 0 0; text-align: right; background: none; } .product-add .invoice-product-delete, .product-rest .invoice-product-delete{ display: block; float: right; width: 24px; height: 24px; background: #e02323; color:#fff; font-size: 24px; line-height: 20px; text-align: center; margin: 10px 0 0 0; border-radius: 90px; -moz-border-radius: 90px; -webkit-border-radius: 90px; } .product-add .invoice-product-delete.hidden, .product-rest .invoice-product-delete.hidden{ display: none !important; } .product-add span.btn-add-field h3, .product-rest span.btn-add-field h3 { position:relative; clear:both; font-size:12px; line-height:32px; } .product-add span.btn-add-field h3:before, .product-rest span.btn-add-field h3:before { position:relative; content:'+'; font-size:24px; top:6px; padding:0 6px; } .add-row-button{ float:left; } .add-row-button .btn-add-field{ cursor: pointer; } .add-row-button .btn-add-field h3{ font-size: 12px; } .add-row-button .btn-add-field h3:before{ content: "+"; position: relative; top:5px; font-size: 24px; margin: 0 5px 0 0; } .row-total.negative{ color: #FF0000; } .companyShowData input, .companyShowData select { border: 0; } .invoice-total, .invoice-producttotal{ width: 20%; float: right; padding-top: 20px; margin-top: 25px; border-top: 1px solid #4398d1; } .invoice-total span, .invoice-producttotal span{ clear: both; float: left; width: 100%; text-align: right; } .invoice-total span strong, .invoice-producttotal span strong{ text-align: left; float: left; } .customer-data li span, .customer-data li label{ width: 49%; padding: 5px; background: none; display: inline-block; } .half.data-edit > li > label { width:30% !important; } .half.data-edit > li > div { width:70% !important; } .half{ width: 50% !important; float: left; padding-right: 20px;} /*========================================* SPEC STYLING STARTS *========================================*/
.spec-range-value-cont { margin-left: 50px; } /*========================================* SPEC STYLING ENDS *========================================*/
/**************************** TEMPLATES ENDS ****************************/
#preloadIconTick { background: url('/gfx/bhp/tick2.png') no-repeat -9999px -9999px; } #preloadIconCloud { background: url('/gfx/bhp/cloud2.png') no-repeat -9999px -9999px; } #preloadIconCross { background: url('/gfx/bhp/cross2.png') no-repeat -9999px -9999px; } /**************************** INTERNET EXPLORER SPECIFIC ****************************/
.lt-ie9 #container{ } /**************************** INTERNET EXPLORER SPECIFIC ENDS ****************************/
/**************************** SMALL DESKTOP MEDIA QUERIES ****************************/
@media screen and (max-width: 1545px) { #language-container { top:500px; } .yadcf-filter-date { min-width:60px; } .yadcf-filter-reset-button2 { width:14px !important; height:14px !important; } .keywordTable { display:block; float:none; width:100%; margin:0 10px 10px 0; } .keywordTable tr:nth-child(even) { background-color:#EEE; } .keywordTable tr td { padding:5px; } .keywordTable tr td.keywordFirstColumn { width:1000px; } #new-version-container:after { content: ""; display: block; /* reduce the damage in FF3.0 */
position: absolute; bottom: -30px; left: 30px; width: 0; border-width: 30px 15px 0; border-style: solid; border-color: rgba(187,187,187,0.8) transparent; } } /**************************** TABLET MEDIA QUERIES ****************************/
@media screen and (max-width:1023px) { .dataTable { width:98%; overflow: scroll; } span.titleLeft, span.titleCenter, span.titleRight { margin:3px 0; } .dataTable thead tr th, .dataTable tfoot tr td, .dataTable thead tr th a, .dataTable tfoot tr td a, .dataTable thead tr th span, .dataTable tfoot tr td span, .dataTable thead tr th input, .dataTable tfoot tr td input { font-size:12px; } .dataTable tbody tr td, .dataTable tbody tr td a, .dataTable tbody tr td span, .dataTable tbody tr td input { font-size:12px; } .dataTable thead tr th input[type="checkbox"], .dataTable tfoot tr th input[type="checkbox"], .dataTable tbody tr td input[type="checkbox"], .dataTable tfoot tr td input[type="checkbox"] { width:13px; } .yadcf-filter-date { min-width:60px; } .yadcf-filter-reset-button2 { width:14px !important; height:14px !important; } div.hideOnSmall a{ display: block; } div#settings-menu span,#header-menu li{ position: relative; float:left; width: 100%; z-index: 9999; } .treeView li .domain{ left: 250px; width: 500px; padding-left: 10px; } #dataTable1_processing{ top: 16px; right: 182px; color: #fff; } input.removeableOption{ width: 91%; } #new-version-container:after { content: ""; display: block; /* reduce the damage in FF3.0 */
position: absolute; bottom: -30px; left: 30px; width: 0; border-width: 30px 15px 0; border-style: solid; border-color: rgba(187,187,187,0.8) transparent; } } @media screen and (max-width:1023px) and (-webkit-min-device-pixel-ratio: 2) { .dataTable { width:98% !important; overflow:scroll; } span.titleLeft, span.titleCenter, span.titleRight { margin:3px 0 !important; } .dataTable thead tr th, .dataTable tfoot tr td, .dataTable thead tr th a, .dataTable tfoot tr td a, .dataTable thead tr th span, .dataTable tfoot tr td span, .dataTable thead tr th input, .dataTable tfoot tr td input { font-size:12px !important; } .dataTable tbody tr td, .dataTable tbody tr td a, .dataTable tbody tr td span, .dataTable tbody tr td input { font-size:12px !important; } .dataTable thead tr th input[type="checkbox"], .dataTable tfoot tr th input[type="checkbox"], .dataTable tbody tr td input[type="checkbox"], .dataTable tfoot tr td input[type="checkbox"] { width:12px; } } /**************************** TABLET MEDIA QUERIES ENDS ****************************/
/**************************** MOBILE MEDIA QUERIES ****************************/
@media screen and (max-width:767px) { ul.ui-autocomplete { display:none; } .mobile-delete { display:none; } .mobile-add { display:block; } #login-container{ height: 209px; /* margin-top: 105px;*/
} img#logo{ margin-left: 8px; } #module-menu a:before{ margin-right: 2px; } #module-menu li.active a.grijshoekje:after,#module-menu li.active:hover a.grijshoekje:after{ background-image: none; display:none; } #module-menu li.active a.hoekje:after, #module-menu li.active:hover a.hoekje:after{ display: none !important; /* hoekje op mobiel maar uitgezet aangezien het wit van de achtergrond (het pijltje zelf is doorzichtig ivm de custom kleuren) en op mobiel is er geen margin voor de alternate kleuren */
} #content-container:not(.no_tree) { padding:0px; } .dataTables_filter, .dataTables_processing{ margin-top: -43px; } nav#topmenu>div.navDropdown{ overflow: visible; } .listActions:not(.el_essential){ display: none; } #nieuw1, #nieuw2, #taalKeuze, #kopieren{ position: absolute; left: -17px; } /*End top menu */
/*Moxman*/
.moxman-thumbnailview .moxman-image{ width: 40% !important; } /* edit templates */
select[multiple]{ /*multiple select boxes moeten maar 1 line hoog zijn op mobiel omdat mobiele browsers vaak ipv multiselect 1 optie weergeven waar je op kan klikken voor een popup */
height: 30px; } input.removeableOption{ width: 90%; } /*sleepknoppen formulier verstoppen want werkt toch niet op mobile */
.moveFormulierField{ display: none; } #new-version-container:after { content: ""; display: block; /* reduce the damage in FF3.0 */
position: absolute; bottom: -30px; left: 30px; width: 0; border-width: 30px 15px 0; border-style: solid; border-color: rgba(187,187,187,0.8) transparent; } } @media screen and (max-width: 560px) { ul.ui-autocomplete { display:none; } #language-container { top:400px; } #language-container > ul { width:65%; } .keywordTable { width:95%; } .keywordTable tr:nth-child(even) { background-color:#EEE; } .keywordTable tr td { padding:5px; } .keywordTable tr td.keywordFirstColumn { max-width:250px; } .dataTables_filter, .dataTables_processing { display: none; } #new-version-container:after { content: ""; display: block; /* reduce the damage in FF3.0 */
position: absolute; bottom: -30px; left: 30px; width: 0; border-width: 30px 15px 0; border-style: solid; border-color: rgba(187,187,187,0.8) transparent; } } /************************************** MOBILE LANDSCAPE MEDIA QUERIES ENDS **************************************/
/************************************** MOBILE PORTRAIT MEDIA QUERIES **************************************/
.mobile-add { display:none; } .mobile-delete { display:block; } .mobile-open { display:block !important; } .grid-row { position:relative; overflow:hidden; width:100%; } .grid-column { float:left; } .grid-column.grid-column-2 { width:50%; } .grid-column.grid-column-3 { width:33.33%; } .grid-column.grid-column-4 { width:25%; } img, iframe, object, embed, video { max-width:100%; } img, video { height:auto; } .clearboth { clear: both; } @media screen and (max-width:320px) { #new-version-container { display:none; } #new-version-container p, #new-version-container a { font-size:9px; } #new-version-container:after { content: ""; display: none; /* reduce the damage in FF3.0 */
position: absolute; bottom: -20px; left: 30px; width: 0; border-width: 0; border-style: solid; border-color: rgba(187,187,187,0.8) transparent; } .dataTables_filter, .dataTables_processing { display: none; } } /************************************** MOBILE PORTRAIT MEDIA QUERIES ENDS **************************************/
/************************************** HIGH RESOLUTION MEDIA QUERIES **************************************/
/*@media print, (-o-min-device-pixel-ratio: 5/4), (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 120dpi) { */
@media print, (-o-min-device-pixel-ratio: 5/4), (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 120dppx) { #logo.bhp-logo{ content:url("/gfx/logo/bhp-logo-retina.png") !important; max-height: 90px; } #new-version-container:after { content: ""; display: block; /* reduce the damage in FF3.0 */
position: absolute; bottom: -30px; left: 30px; width: 0; border-width: 30px 15px 0; border-style: solid; border-color: rgba(187,187,187,0.8) transparent; } } /************************************** HIGH RESOLUTION MEDIA QUERIES ENDS **************************************/
/* Print styles */
@media print { /* Generic */
* { background:transparent !important; color:black !important; text-shadow:none !important; filter:none !important; -ms-filter:none !important; } a, a:visited { text-decoration:underline; } .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content:""; } pre, blockquote { border:1px solid #999; page-break-inside:avoid; } thead { display:table-header-group; } tr, img { page-break-inside:avoid; } img { max-width:100% !important; } @page { margin:0.5cm; } p, h2, h3 { orphans:3; widows:3; } h2, h3 { page-break-after:avoid; } #generic-message { display:none; } tr.header > td, tr.header > th { color: #000; font-weight: bold; text-decoration: underline; } tr.greyHeader > td, tr.greyHeader > th { color: #000; font-weight: normal; text-decoration: underline; } .print-hide { display:none; } .print-break { page-break-after: always; } /* Site specific */
} /* Overlay and loading spinner -- */
.loader-backdrop{ background-color:rgba(255,255,255,0.8); position:fixed; top:0; left:0; right:0; bottom:0; display:block; z-index:999; padding-top:10%; } .loader-backdrop.hidden, .loader-backdrop .loader-message-box.hidden{ display:none; visibility: hidden; } .loader-backdrop .loader-message-box{ min-width: 300px; width:50%; max-width:500px; padding:20px; margin:0 auto; text-align: center; background-color:#4398d1; color:#ffffff; } .loader-backdrop .loader-progress-bar{ display:block; background-color: rgba(255,255,255,0.5); height:20px; margin-top:20px; margin:10px; margin-bottom:0; position:relative; color:#4398d1; } .loader-backdrop .loader-progress-bar .progress{ display:block; position:absolute; top:0; left:0; bottom:0; width:0; content:" "; background-color:#ffffff; width:0; -webkit-transition: width 1s; /* Safari */
transition: width 1s; } .loader-backdrop .loader-progress-bar .progress-label{ display:block; position:relative; margin:0 auto; height:20px; line-height: 20px; vertical-align: middle; } .spinner { margin: 100px auto; margin-bottom:40px; width: 40px; height: 40px; position: relative; text-align: center; -webkit-animation: sk-rotate 2.0s infinite linear; animation: sk-rotate 2.0s infinite linear; } .dot1, .dot2 { width: 60%; height: 60%; display: inline-block; position: absolute; top: 0; background-color: #4398d1; border-radius: 100%; -webkit-animation: sk-bounce 2.0s infinite ease-in-out; animation: sk-bounce 2.0s infinite ease-in-out; } .dot2 { top: auto; bottom: 0; -webkit-animation-delay: -1.0s; animation-delay: -1.0s; } @-webkit-keyframes sk-rotate { 100% { -webkit-transform: rotate(360deg) } } @keyframes sk-rotate { 100% { transform: rotate(360deg); -webkit-transform: rotate(360deg) } } @-webkit-keyframes sk-bounce { 0%, 100% { -webkit-transform: scale(0.0) } 50% { -webkit-transform: scale(1.0) } } @keyframes sk-bounce { 0%, 100% { transform: scale(0.0); -webkit-transform: scale(0.0); } 50% { transform: scale(1.0); -webkit-transform: scale(1.0); } } /* -- Overlay and loading spinner */