/*
	CBX Backstage³ CMS 
	2014
	
	Cybox Webdesign Boxmeer 
	www.cybox.nl
*/


/**
 ** RESET CSS
 **/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { 	margin: 0; 	padding: 0; 	border: 0; 	outline: 0; 	font-size: 100%; 	vertical-align: baseline; 	background: transparent; } body { 	line-height: 1; } ol, ul { 	list-style: none; } blockquote, q { 	quotes: none; } blockquote:before, blockquote:after, q:before, q:after { 	content: ''; 	content: none; }  /* remember to define focus styles! */ :focus { 	outline: 0; }  /* remember to highlight inserts somehow! */ ins { 	text-decoration: none; } del { 	text-decoration: line-through; }  /* tables still need 'cellspacing="0"' in the markup */ table { 	border-collapse: collapse; 	border-spacing: 0; }

/**
 ** FONTS
 **/

/*
@font-face {
    font-family: 'Roboto';
    src: url('fonts/Roboto-Regular-webfont.eot');
    src: url('fonts/Roboto-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/Roboto-Regular-webfont.woff') format('woff'),
         url('fonts/Roboto-Regular-webfont.ttf') format('truetype'),
         url('fonts/Roboto-Regular-webfont.svg#RobotoRegular') format('svg');
    font-weight: 400;
    font-style: normal;

}
@font-face {
    font-family: 'Roboto';
    src: url('fonts/Roboto-Light-webfont.eot');
    src: url('fonts/Roboto-Light-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/Roboto-Light-webfont.woff') format('woff'),
         url('fonts/Roboto-Light-webfont.ttf') format('truetype'),
         url('fonts/Roboto-Light-webfont.svg#RobotoLight') format('svg');
    font-weight: 300;
    font-style: normal;

}
@font-face {
    font-family: 'Roboto';
    src: url('fonts/Roboto-Medium-webfont.eot');
    src: url('fonts/Roboto-Medium-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/Roboto-Medium-webfont.woff') format('woff'),
         url('fonts/Roboto-Medium-webfont.ttf') format('truetype'),
         url('fonts/Roboto-Medium-webfont.svg#RobotoMedium') format('svg');
    font-weight: 500;
    font-style: normal;

}
*/


/**
 ** BASE LAYOUT
 **/
body {
    background: #efefef;
    /*background: url(../images/background.jpg) 0px 60px fixed no-repeat;*/
    background-size: 100%;
    font-family: Roboto, Verdana, sans-serif;
    font-weight: 400;
    font-size: 14px;
}
body.login {
    background: #efefef;   
}


div#header {
    height: 53px;
    background: white;  
    /*
    box-shadow: 0px 0px 5px #666;
    box-shadow: 0px 0px 5px #007dab;
    */
    position: fixed; 
    top:0; left:0;
    width:100%;
    z-index:4;
    
    width: 250px;
    height: 100%;
    background: #007dab;
        transition: left 250ms ease;
    
}


div#header h1 {
    line-height: 1;
    font-size: 33px;  
}
div#header h1 span {
    color: #007dab;
}
div#container {
    width: 940px;
    padding: 30px 20px 30px 250px;
    
    
    background: white;
    
    position:relative;
    /*
    box-shadow: 0 0 4px #999;  
    box-shadow: 0 0 20px #777;
    */
    opacity:1;
    min-height:110%;
    transition: opacity 300ms ease-in-out;
    -webkit-transition:  opacity 300ms ease-in-out;
}

div#rightbar-faux {
    position: fixed;
    top:0; left: 200px;
    left:0;
    width: 1210px;
    height: 100%; 
    background: #fff;
}

body.login div#container {
    height: 320px;
    width: 318px;
    margin: 100px auto;  
    padding:0; 
}

/*noinspection ALL*/
body.login div#container div#login,
body.login div#container div#loginfalse {
    padding:10px 25px 15px 25px;   
    float:left;
    background: #fff;
    margin:0;
}
body.login div#container div#loginfalse {
    background: #8b3e3e;
    color: #fff;
    width:100%;
    padding:15px 25px 15px 25px;   
    box-sizing: border-box;
}
body.login div#title {
    margin:0;
    
    background: #007DAB;
    padding: 24px 25px 16px 25px;
    height: auto;
}
body.login div#container h1 {
        
    font-size: 33px;
    line-height: 1;
    text-align: left;
    
}
div#container.saving {
    opacity: 0;   
}

div#footer {
    width: 100%;
    height: 10px;
    
    clear: both;  
}

#content {
    
    position: relative;
    
    width: 100%;
    /*min-height: 470px;*/
    padding-bottom: 30px;
    
    float: left;   
}

.groen {
    color: #00c109;
}
.rood {
    color: #af0000;
}

/**
 ** SPECIFIC LAYOUT
 **/
div.columnlayout {
    position: relative;
    float: left;
    width: 100%;
    padding-bottom:30px;
}
div.column {   
    width: 300px;
    position: relative;
    float: left;
    transition: opacity 300ms ease-in-out;
    -webkit-transition: opacity 300ms ease-in-out;
}
div.columnlayout div.full {
    position: relative;
    float: left;
    width: 100%;
    margin-bottom:1em;
    
}
div.full div.column {
     
}


div#sitesettings div.column {
    width: 268px;
}
div#sitesettings div.column:first-child, div#sitesettings div.column:nth-child(2) {
    margin-right: 68px;   
}

div.column.wide {
    width: 640px;
}
div.column.media {
    width: 355px;
}
div.column.left {
    clear: left;
}   
div.column.fotos, div.column.videos {
    width: 540px;
}
div.column.files {
    width: 400px;   
}
div.column.right {
    float: right;   clear:right;
}
div.column.pagewidth {
    width: 920px;
}

div.column.hidden {
    opacity: 0;
    transition: opacity 300ms ease-in-out;
    -webkit-transition: opacity 300ms ease-in-out;
    
}

/**
 ** HELPERS
 **/
.shadow {
    /*box-shadow: 1px 1px 2px #ddd; */   
}
.clear {
    clear: both;
}
.ui-sortable-helper {
    box-shadow: 0 0 11px #ccc!important;
}
.btn, .mainbtn, li > span {
    
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;   
}
iframe.jqupload {
    display: none;   
}

/**
 ** TEXT
 **/
h1, h2, h3 {
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
}
a h1, a h2, a h3, a h4, a {
    color: #212121;
    text-decoration: none;   
}
h1 {
    font-weight: 300;
    font-size: 24px;
}
h2 {
    font-weight: 300;
    font-size: 20px;
    line-height:1.4;   
}

#content h1 {
    font-weight: 300;
    margin: 10px 0 40px 0;
}
#content h1.lower {
    font-weight: 300;
    margin: 10px 0 10px 0;
}
pre {
    margin-top: 5px;
    z-index:2;
    background: white;
}
#content p {
    line-height: 1.4;
}

/**
 ** PLUGIN MENU
 **/
ul.menu {    

    float: left;
    width: 100%;
    
    
}

ul.menu li {
    float: left; clear:both;
    position: relative;
     
    width: 100%;
    
    font-family: Roboto, sans-serif;
    font-size: 16px;
    font-weight: normal;
    text-align: left;
    color: #fff;
    background: #007DAB;
}
 
ul.menu li > a,
ul.menu li > span {
    display: block;
    width: 100%; height: 100%;   
    

    box-sizing:border-box;
    /*
    line-height: 2;
    padding: 6px 0 6px 10%;
    padding: 6px 0 6px 52px;
    */

    line-height: 1;
    padding: 0;
    
    color: #fff;
    height: 6vh;
    max-height: 44px;
    
}
ul.menu li > a span.name,
ul.menu li > span span.name {
    display: block;
    position: absolute;
    left: 52px;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
}
ul.menu li > span {
    cursor: default;
}

ul.menu li.viewsite {
    border-top: 44px solid #007DAB;
}


ul.menu li a img,ul.menu li span img {
    height: 20px;
    max-height: 60%;
    width: auto;
    position: absolute;
    /*
    right: 14px;
    top: 8px;
    right: auto; left: 14px;
    width: 20px; height: 20px;
    top: 12px; right: 16px;
    */
    top: 50%; left: 14px;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
}
ul.menu li:hover a,
ul.menu li.active a,
ul.menu li:hover > span,
 ul.menu li.active > span {
    color: #fff;
}  
ul.menu li > a:hover,
ul.menu li:hover > span {
    background: #00729c;
}
ul.menu li.logout a:hover {
    background: #6C3F47;
}
ul.menu li.active > a, ul.menu li.active > span {
    background:#00688e;
}

/* submenu */
/*noinspection ALL*/
ul.menu li ul.submenu {
    position: absolute;
    top: 0;
    left: 100%;
    background: #007DAB;
    width: 170px;
    z-index: -1;
    transform: translate3d(-100%,0,0);
    -webkit-transform: translate3d(-100%,0,0);
    transition: transform 150ms ease-out 300ms;
    -webkit-transition: transform 150ms ease-out 300ms;
}
ul.menu li:hover ul.submenu {
    transform: translate3d(0,0,0);
    -webkit-transform: translate3d(0,0,0);


    transition: transform 150ms ease-out;
    -webkit-transition: transform 150ms ease-out;
}
ul.submenu li a {
   /* padding: 3px 0 3px 15%;*/
}

div#title {
    float:left; clear:both;
    width: 100%;
    box-sizing:border-box;
    padding: 6px 0 20px 28px;
    margin-top: 22px;
    color:white;  
    margin-bottom:50px;
    height:59px;

    padding: 6px 0 20px 14px;

}
div#title img {
    margin-left: 2px;  
    width: 187px;
}


/**
 ** HORIZONTAL LISTING (pages etc) (sortable via global.js)
 **/
div.listing_container { 
    float:left;
    margin-bottom:20px;    
}
ul.listing {
    /*width:   640px;*/
    width: 939px;
    
    float:left;
    position:relative;
}

ul.listing > li {
    /*
    border-bottom: 1px solid #212121; 
    border-top: 1px solid #212121;
    border-right: 1px solid transparent;
    border-left: 1px solid transparent;
    */
    /*border: 1px solid transparent;    
    border: 1px solid #ccc;*/
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    
    /*box-shadow: 0px 0px 6px #ddd;*/
    /*box-shadow:  2px 2px 10px #ccc;*/
   
    
    margin-top: -1px;
    background: #fff;
    height:auto;
    /*
    min-height: 30px;
    */
    float:left;
    margin: -1px 0;
    position: relative;
    padding: 4px 0 4px 8px;
   /* cursor: pointer; */
    /*
    float: left;
    width: 100%;
    */
    transition: border-color 150ms ease-in-out;
    -webkit-transition:  border-color 150ms ease-in-out;  
    
    
    
}

ul.listing li span.actions.larger {
    min-width: 120px;
}
ul.listing > li.removing {
       
}

ul.listing > li.offline > span {
    color: #888;
}

ul.listing > li.archived > span {
    color: #666;
}

ul.listing > li.offline span.btn.setoffline {
    display:none;
}
ul.listing > li:not(.offline) span.btn.setonline {
    display:none;
}


ul.listing > li.highlight span.btn.sethighlight {
    display:none;
}

ul.listing > li:not(.highlight) span.btn.unsethighlight {
    display:none;
}

ul.listing > li.hidden {
    color: #666;
    margin-top: -38px;
    opacity: 0;
    visibility: hidden;
    transition: margin 150ms ease-in-out, opacity 150ms 150ms ease-in-out;
    -webkit-transition:  margin 150ms ease-in-out, opacity 150ms 150ms ease-in-out; 
}
ul.listing > li.hidden.shown {
    margin-top: -1px;
    opacity: 1;
    visibility: visible;
}


ul.listing > li.header, ul.listing > li.header:hover {
    color: #007DAB;
    /*background: #efefef;*/
    cursor: default;
    border:none;
    border-bottom: 1px solid #007DAB;
    box-shadow: none;
    padding-bottom:0;
    height:25px;
    margin-bottom:1px;
}
ul.listing li.ui-sortable-helper {
    border-color: #007DAB!important; 
}

/** eerste item onder header geen border **/
ul.listing li.header + li.item {
    
    border-top-color: transparent;   
}

ul.listing > li > span:first-child {
    padding-right: 10px;
}
ul.listing > li > span:nth-child(2){
    padding-right: 9px;
    
}

ul.listing > li > span {
    display: block;
    float: left;
    line-height: 28px;    
    position: relative;
    min-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    box-sizing: border-box;
}
ul.listing > li > span > img.flag {
    display: inline;
    height: 14px;
    margin-right: 6px; margin-top: -1px;
    vertical-align: middle;   
}

ul.listing > li > span.actions {
    float: right;
    text-align: right;
}   

/**
 ** SUB LISTING
 **/
ul.listing > li.item.hassubpages {
    
}
ul.listing.sub {
    margin-bottom: -4px;
    margin-top: 4px;
    padding-left: 11px;
    width: 924px;
    
    border-left: 1px dotted #ccc;
    padding-left:0;
    margin-left:5px;
    
    margin-bottom: 8px;
}
ul.listing.sub > li {
    border-bottom-color:transparent;
    border-left-color: transparent;
    border-top-color: transparent;
    box-shadow: none;
    position: relative;
    margin:0;
    border-right-color: transparent;
    font-size: 13px;
    
    padding: 2px 0 2px 8px;
    /*margin-right: 1px;*/
}

ul.listing.sub > li.ui-sortable-helper {
    border-bottom-color: #007DAB;
}   
ul.listing.sub > li > span {
}
ul.listing.sub > li > span:first-child{
    margin-right: -14px;
    padding-right: 20px;   
}
ul.listing.sub > li > span:last-child {
      
}

/**
 ** SUBSUB LISTING
 **/
ul.listing > li.item.hassubpages {
    
}
ul.listing.subsub {
    margin-bottom: 0;
    margin-top: 4px;
    padding-left: 11px;
    width: 911px;
    
    padding-left: 0;
    margin-left:5px;
}
ul.listing.subsub > li {
    border-bottom-color:transparent;
    border-left-color: transparent;
    box-shadow: none;
    position: relative;
    margin:0;
    border-right-color: transparent;
    font-size: 12px;
    padding: 0 0 0 8px;
    /*margin-right: 1px;*/
}

ul.listing.subsub > li.ui-sortable-helper {
    border-bottom-color: #007DAB;
}   
ul.listing.subsub > li > span:first-child{
    margin-right: -27px;
    padding-right: 34px;
}
ul.listing.subsub > li > span:last-child {
      
}



/**
 ** ICON BUTTONS
 **/
span.actions {
    -moz-user-select: none; 
    -khtml-user-select: none; 
    -webkit-user-select: none; 
    -o-user-select: none;
}
span.btn, span.actions a.btn{
    width: 16px; height: 16px;
    margin-right: 10px;
    vertical-align: middle;
    border: 0;  
    background-color: transparent;
    background-size: 16px 32px;
    cursor: pointer;
    background-position: 0 16px;
    display: inline-block;
}

input.btn.login {
    float: left; clear:both;   
    background: #007dab;
    border:none;
    color: white;
    margin: 0 5px;
    padding: 5px 11px;
    cursor: pointer;
    margin: 10px 0;
    width: auto;
    display:  inline;   
    font-family: Roboto, sans-serif;
    font-size: 19px;
    font-weight: 500;
    text-transform:uppercase;
    text-align: center;
    width: 100%;
    box-sizing: border-box;
    padding: 15px 30px 12px 30px;
    line-height: 1;
    
}
input.btn.login:hover {
    background: #00688E;
}

div.toolbar > span.btn:hover,
div.toolbar > span.btn.active,
span.actions  span.btn:hover,
span.actions > span.btn.active,
div.toolbar div.upload_container:not(.disabled):hover span.btn,
div.item.image.preview span.actions > span.btn.setpreview,
span.actions a.btn:hover
{
    background-position: 0 0; 
}


/**dialogbuttons (zonder plaatje, met text) auto width**/
span.btn.dialogbtn {
   /* box-shadow: 0 0 18px #999; */
    background: white;
    color: #4c4c4c;
    margin: 0 5px;
    padding: 5px 11px;
    cursor: pointer;
    width: auto;
    display:  inline;   
    transition: all 300ms ease;
    -webkit-transition: all 300ms ease;  
}
span.btn.dialogbtn:hover {
    /*box-shadow: 0 0 18px #666;*/
    color: #000;
}

/**toolbar buttons **/
div.toolbar span.btn {
    border: 4px solid #f4f4f4; /**zodat ie 24x24px lijkt**/
    display: block;
    margin-top: 4px;
    float: left;   
    position: relative;
    cursor: pointer;
}

/** hover border toolbar button (met after-element omdat er al een 4px border omheen zit**/
/*
div.toolbar > span.btn:hover:after, div.toolbar div.upload_container:not(.disabled):hover span.btn:after {  
    content: '';  
    position: absolute;  
    width: 24px;  
    height: 24px;  
    border: 1px solid #007dab;;  
    left: -5px; top: -5px
}
*/


div.toolbar span.btn button {
    width: 16px; height: 16px;
    margin-top: 3px;margin-left: 3px;
    display: block;
    background-position: 0 16px;
    background-repeat: repeat-y;
    cursor: pointer;
    background-color: transparent;
    border: none;
}

.btn.disabled {
    visibility: hidden!important;
}

/** BUTTON IMAGES **/
.btn.edit,
.btn.editoption,
.btn.editoptionvalue  {
    background-image: url(../images/icons/n/pencil.png);
}

.btn.move  {
    background-image: url(../images/icons/n/move.png);
     -ms-touch-action: none;
}

.btn.delete,
.btn.deleteoption,
.btn.deleteoptionvalue  {
    background-image: url(../images/icons/n/delete.png);
}
.btn.addlink  {
    background-image: url(../images/icons/n/link_add.png);
}
.btn.addimages  {
    background-image: url(../images/icons/n/image_add.png);
}
.btn.addfile  {
    background-image: url(../images/icons/n/file_add.png);
}
.btn.addvideo  {
    background-image: url(../images/icons/n/video_add.png);
}
.btn.magnify  {
    background-image: url(../images/icons/n/magnifier.png);
}
.btn.view  {
    background-image: url(../images/icons/n/magnifier.png);
}
.btn.setpreview  {
    background-image: url(../images/icons/n/lightbulb.png);
}
.btn.edittag  {
    background-image: url(../images/icons/n/edittag.png);
}
.btn.connect  {
    background-image: url(../images/icons/n/connect.png);
}
.btn.disconnect  {
    background-image: url(../images/icons/n/disconnect.png);
}
.btn.settings  {
    background-image: url(../images/icons/n/gear.png);
}
.btn.setonline  {
    background-image: url(../images/icons/n/lightbulb.png);
}
.btn.setoffline  {
    background-image: url(../images/icons/n/lightbulb_off.png);
}
.btn.sethighlight  {
    background-image: url(../images/icons/n/highlight.png);
}
.btn.unsethighlight  {
    background-image: url(../images/icons/n/highlight_off.png);
}

.btn.setarchived  {
    background-image: url(../images/icons/n/archive.png);
}
.btn.unsetarchived  {
    background-image: url(../images/icons/n/archive_off.png);
}
.btn.duplicate  {
    background-image: url(../images/icons/n/copy.png);
}
.btn.viewproducts  {
    background-image: url(../images/icons/n/tags.png);
}
.btn.viewshopproducts  {
    background-image: url(../images/icons/n/tags.png);
}
.btn.addoption  {
    background-image: url(../images/icons/n/option_add.png);
}

.btn.addoptionvalue  {
    background-image: url(../images/icons/n/option_value_add.png);
}


ul.listing > li.ui-sortable-helper > span.actions  span.btn.move {
    background-position: 0 0;        
}
/*
ul.listing > li:active button.edit {
    background-position: 0 0;        
    
}
*/
li.item span.btn.unsetarchived {
    display: none;   
}
li.item.archived span.btn.unsetarchived {
    display: inline-block;
}
li.item.archived span.btn.setarchived {
    display:none;
}

/**
 ** ACTION BUTTONS
 **/
/** all btns **/
span.btn {
    cursor: pointer;   
    position: relative;
}
/** button tooltips **/
span.btn div.tooltip, span.actions a.btn div.tooltip {
    background: none repeat scroll 0 0 white;
    border: 1px solid #CCCCCC;
    /*box-shadow: 1px 1px 2px #DDDDDD;*/
    display: block;
    font-size: 12px;
    line-height: 12px;
    padding: 6px 8px;
    position: fixed;

    z-index:9;
    white-space: nowrap;
    width: auto;
}

/** Main Action button top right **/
span.mainbtn, a.mainbtn {
    font-family: 'Roboto', sans-serif;
    font-size: 19px;

    display: inline-block;
    padding: 15px 30px 12px 30px;
    min-width: 145px;
    text-align: center;
    background: #007dab;
    border: none;
    color: white;
    top: 89px;right:0;
    position: absolute;
    cursor: pointer;
    font-weight: 500;
    text-transform:uppercase;
    
    top: -2px;right:0;
    
    /*box-shadow: 1px 3px 3px #aaa;*/
    /*box-shadow: -2px 2px 3px #aaa;*/
    /*box-shadow: -2px 2px 2px #bbb; 
    
    transition: all 150ms ease-in-out;
    -webkit-transition: all 150ms ease-in-out;*/
}/*
span.mainbtn:after {    
    content: ' ';
	position: absolute;
	width: 0;
	height: 0;
	right: 0px;
	top: 100%;
	border-width: 6px 10px;
	border-style: solid;
	border-color: #666 transparent transparent #666;
    transition: all 150ms ease-in-out;
    -webkit-transition: all 150ms ease-in-out;
  
} 
*/
span.mainbtn:hover {
    background: #00688E;
   /* box-shadow: -2px 2px 7px #666;
    top:91px;
    */
}
/*
span.mainbtn:hover {
    box-shadow: 1px 1px 3px #aaa;   
    right:-40px;
    padding-right: 45px;
    
    top: 79px;
    padding: 14px 45px 14px 30px;
    padding: 14px 49px 14px 30px;
}
span.mainbtn:hover:after {
    border-width: 0px 0px;
}*/
span.btn:hover {
    
    
}

/** Sub Action button  **/
.btn.subaction {
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    
    padding: 15px 30px 12px 30px;
    min-width: 145px;
    text-align: center;
    background: #007dab;
    border: none;
    color: white;
    width:auto;
    
    cursor: pointer;
    font-weight: 500;
    text-transform:uppercase;
  
    float: left;clear:both;
    /*box-shadow: -2px 2px 2px #bbb;*/
    
    transition: all 150ms ease-in-out;
    -webkit-transition: all 150ms ease-in-out;
}


/** Global normal button (ajax actions) **/
.btn.ajaxaction {
    display: block;
    width: 150px;
    background: white;
    border: 1px solid #ccc;
    font-size: 14px;
    line-height: 1.2;
    margin: 0 0 6px;
    padding: 8px;
    float: left; clear: both;
    cursor: pointer;
    /*box-shadow: 1px 1px 2px #ddd; */
    transition: all 150ms ease-in-out;
    -webkit-transition: all 150ms ease-in-out;
}
span.btn.ajaxaction:active {
       
}

div.toolbar span.spacer {
    display: block;
    float: left;
    height: 26px;
    width: 10px;   
}





/*upload btn */
div.upload_container {
    width:    180px;
    height: 33px;
    position: relative;
}
div.toolbar div.upload_container {
    float: left;   
    width: auto;
}
div.upload_container div.button_container {   
    width:    150px;
    height: 33px;
    position: relative;
    overflow: hidden;
    position: absolute; top:0; 
       
}

div.toolbar div.upload_container, div.toolbar div.button_container {
    width: 25px;   
    margin-right: 10px;
}

div.upload_container input {
    position: absolute;
    top: -1px; 
    right:-2px;
    z-index:0; 
    height: 35px;
    position: absolute;
    z-index: 1;
   /* right: 12px; */
    
    cursor: pointer;
    font-size: 38px;
    
    opacity:0;
    filter: alpha(opacity=0);  

}




/**
 ** FORMS
 **/
label {
    font-family: 'Roboto', sans-serif;
    font-size: 18px;
    line-height: 1.2;
    font-weight: 300;
    float: left; clear: both;
    margin: 12px 0 4px 2px;
    
    /*
    max-width: 100%;    
    overflow:hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    */
    
}
label small {
    font-size: 11px;   
}

div.cke_dialog_body label {
    clear:none;float:none;   
}

form[name=mainform] {
    margin-top: -9px;
}

input[type=text], input[type=password], input[type=submit], textarea, select {
    float: left; clear: both; 
    background: white;
    border: 1px solid #ccc;
    font-family: Verdana, sans-serif;
    font-size: 14px;
    padding: 8px;
    margin: 0 0 6px 0;
    width: 250px;
    max-width: 100%;
    box-sizing: border-box;
    border-radius: 0;
}

input[readonly] {
    color: #999;
}
/* checkboxes */
label.checkbox {
    box-sizing: border-box;

    display: block;
    font-size: 1.1em;
    margin-top: 0;
    overflow: hidden;
    padding: 5px 0;
    text-overflow: ellipsis;
    white-space: nowrap;
    float: left;
    clear: none;
    margin-right: 1.3333%;
    margin-left:0;
    cursor: pointer;
     -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
label.checkbox:nth-child(4n){

    margin-right:0;
}
label.checkbox span::before {
    width: 14px;
    height: 14px;
    display: inline-block;
    content: "";
    background: #ccc;
    vertical-align: top;
    margin: 2px 5px 0 2px;
}
label.checkbox input {
    position: absolute;
    opacity:0;
    cursor: pointer;
}


div.checkboxlist label.checkbox {
    width: 24%;
    border: 1px solid #ccc;
    padding: 5px;
    margin-bottom: 8px;
}
div.checkboxlist label.checkbox:nth-child(4n){
    margin-right:0;
}

label.checkbox input:checked + span::before {
    background: #00688E;
}
label.checkbox:hover span::before {
    background: rgba(0,104,142,.7);
}

input[type=text], input[type=password], input[type=submit], textarea {
    -webkit-appearance: none;   
}
select {
    background: #fff;
    padding: 4px 8px;
}
input[type=text].small {
    width:96px;
}
input[type=checkbox] {
    margin-left:0;   
    margin-right: 7px;
}
input[type=text].error,input[type=password].error, textarea.error, select.error {
    border-color: red;
}
input.formsubmit.hidden {
    display: none;   
}
input.datepicker {
    z-index: 2;
    position:relative;   
}
select {
    height: 35px;
    width: 268px;   
    
    -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}
input[type=text]:hover, input[type=password]:hover, textarea:hover {
    /*box-shadow: 0px 0px 1px #ccc ; */    
}
input[type=text]:focus,input[type=password]:focus, textarea:focus {
   /*box-shadow: 0px 0px 3px #ccc;   */ 
}
textarea {
    height: 150px;
}
div.wysiwyg textarea {
    width: 638px;
    height: 279px;
    resize: none;
    padding:0;
    overflow-y: scroll;
}
div.wysiwyg {
    position: relative;
    float: left; clear: both;   
    width: 638px;
    height: auto;
}
textarea.lower {
    height: 121px;
}
textarea.smaller, div.wysiwyg.smaller {
    width: 400px;
}
textarea.columnwidth, div.wysiwyg.columnwidth {
    width:    267px;
}

div.wysiwyg textarea {
    margin-top: -2px;
    margin-bottom:0!important;   
    font-family: Courier, monospace!important;
}

div.wysiwyg a.cke_button__source span.cke_button__source_label {
    display:none;
}

/*toggle switch*/
div.toggle_container {
    float: left; clear: both;
    border: 1px solid #ccc;
    background: white;
}
div.toggle_container > input {
    display:none;
}
div.toggle_container > span.toggle {
    background: #fff;
    display: block;
    float: left;
    line-height: 22px;
    height: 20px;
    padding: 4px;
    text-align: center;
    width: 60px;
    cursor:pointer;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}


div.toggle_container > span.toggle.on.active  {
    background: #d3ffb0;   
} 
div.toggle_container > span.toggle.off.active {
    background: #ff7575;
}

/** toggle past items (nieuws/agenda) **/
/*
div.toggle_past {
    float: left;  
    margin-top: -20px; 
}
div.toggle_past label {
    clear: none;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    
    font-size: 12px;
    line-height: 20px;
    margin: 0;
}
div.toggle_past input {
    float: left;
    margin-left: 0;
    margin-right: 8px;
}
*/


/** DIALOGS (notification, confirm, error) **/
div.dialog {
    background:  #007dab;
    color: white;
    font-size: 18px;
    font-weight: 300;

    position: fixed;

    top: 0;
    width: 600px;
    left: 50%;
    margin-left: -300px;

    line-height: 40px;
    z-index: 3;
    text-align: center;

    transform: translateY(-100%);
    -webkit-transform: translateY(-100%);

    /*
    transition: all 340ms cubic-bezier(0.275, -0.020, 0.000, 1.515);
    -webkit-transition: all 340ms cubic-bezier(0.275, -0.020, 0.000, 1.515);

    transition: all 100ms cubic-bezier(0,1,0,1);
    */
    /* -webkit-transition-delay: 1s;
    transition-delay: 1s;*/
}
div.dialog {
    width: 100%;
    height: 100%;
    left: 0; top: 0;
    margin-left: 0;
    background: none;
    z-index: 999;
    opacity: 0;
    /*
    transition: opacity 250ms ease;
    */
    transition: opacity 100ms ease, transform 0ms linear 110ms;

}
div.dialog.ontop {
    height: auto;
    width: 600px;
    left: 50%;
    margin-left: -300px;
}

div.dialog.active {
    transform: translateY(0);
    -webkit-transform: translateY(0);
    opacity: 1;
    transition: opacity 200ms ease, transform 0ms linear 0ms;
}
div.dialog div.outer {
    position: absolute;
    background: rgba(100,100,100,.5);
    width: 100%; height: 100%;
    z-index: 1;
}
div.dialog div.wrapper {
    width: 600px;
    height: auto;
    position: absolute;
    z-index: 2;
    left: 50%; top: 50%;
    transform: translate(-50%,-70%);
    -webkit-transform: translate(-50%,-70%);


    background: #007dab;
    /*box-shadow: 0px 0px 10px #333; */
    padding: 16px 5px 16px 5px;
    position: relative;
}
div.dialog.ontop div.wrapper {
    left: 50%; top: 0;
    transform: translate(-50%,0);
    -webkit-transform: translate(-50%,0);
}
 /*
div.dialog.active {
    transform: translateY(0);
    -webkit-transform: translateY(0);

    transition: all 360ms cubic-bezier(0,1,0,1);

}
*/


div.dialog span.msg {
    background: none;
    box-shadow: none;
    padding: 0;   
    font-weight: 400;
}
div.dialog span.actions {
    line-height: 50px;   
}

/*
div.dialog span.msg {
  background: none repeat scroll 0 0 #007dab;    
  padding: 10px 25px;
  box-shadow: 2px 2px 3px #BBBBBB;
}
*/
div.dialog.confirm { 
   
}
span.close {
    width: 24px; height: 24px;
    background-color: transparent;
    background-image:url(../images/icons/n/close.png);

     background-size: 12px 12px;
     background-repeat: no-repeat;
     background-position: 6px 6px;
  /*  border: 1px solid white;
    border-radius: 13px;
    */
    border:1px solid transparent;
    display: block;
    float: right;
    cursor: pointer;    
    margin: 6px 18px 10px 10px;
    transition: all 150ms ease 0s;
    -webkit-transition: all 150ms ease 0s;
}
span.close:hover {
    /*box-shadow: 0 0 11px #fff;*/  
}

/** imagepop (semi fancybox) **/
div#imagebox {
    background: none repeat scroll 0 0 rgba(255, 255, 255, 0.7);
    height: 100%;
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 999;
    display: none;
}
div#imagebox.active {
    display: block;
}
div#imagebox > div {
    background: none repeat scroll 0 0 white;
    
    margin: 80px auto 0;
    padding: 0;
    position: relative;
    text-align: center;
    width: 800px;
    /*box-shadow:  0 0 15px #666;*/
}
div#imagebox > div > img {
    max-width: 800px;
}
div#imagebox span.close {
    color:white;
    background-color: #007dab;
    border: 3px solid #007dab;
    position: absolute; top: -10px; right: -10px;
    margin:0;
    
}
div#imagebox span.close:hover {
    /*box-shadow: 0 0 11px #999;*/
}

/** LISTING DIALOG **/
div.listingdialog {
    background: none repeat scroll 0 0 #007dab;
    color: white;
    left: -1px;
    position: absolute;
    /*box-shadow:0px 3px 6px 0px  #aaa; */

    width: 380px;
    padding: 5px 10px 5px 10px;
    /*
    transition: all 500ms cubic-bezier(0.275, -0.020, 0.000, 1.515);
    -webkit-transition: all 500ms cubic-bezier(0.275, -0.020, 0.000, 1.515);
*/
    transition: all 100ms cubic-bezier(0,1,0,1);
    top: 34px;

    transform: translateY(-100%);
    -webkit-transform: translateY(-100%);
}

div.page_videos div.listingdialog {
    width: 492px;   
}
div.listingdialog.active {
     transform: translateY(0);
    -webkit-transform: translateY(0);
    transition: all 360ms cubic-bezier(0,1,0,1);
}


div.listingdialog label {
    font-size: 15px;
    margin-top: 4px;
    font-weight: 400;
}
div.listingdialog input {
    font-size: 12px;
    padding: 5px;
    width: 171px;
    box-shadow: none!important;
    border: none!Important;
}

div.listingdialog > div {
    float: left;  
    width: 182px;
}
div.listingdialog span.dialogbtn {
    float: right;   
    margin-right: 7px;
    margin-bottom: 8px;
    line-height:17px;
}
div.listingdialog span.close {
    border: none;
    margin: 0;  
    box-shadow:none!important; 
}





/** MEDIA LISTING **/
div.media_listing {
    border: 1px solid #ccc;   
    background: white;
    width: 770px;
    min-height: 130px;
    padding: 8px;
    float:left;
    position: relative;
    clear: both;
    padding-top: 46px;
    overflow:hidden;
    transition: min-height 300ms ease-in-out;
    -webkit-transition: min-height 300ms ease-in-out;
}
div.media_listing.files {
    width: 368px;
    padding: 46px 15px 15px 15px;
    padding-left:0;
    width: 383px;
}
div.media_listing.page_fotos, div.media_listing.page_videos {
    /*width: 477px;*/
    /*width: 250px; */
    width: 495px;
}
div.media_listing.page_fotos.one {
    width: 250px;   
}
div.media_listing.album_fotos {
    width: 920px;   
}
div.media_listing div.toolbar {
    z-index:2;
    position: absolute;
    top:0;left:0; width: 100%; height: 33px;
    border-bottom: 1px solid #ccc;
    background: #f4f4f4;
}

/** progress bar**/
div.media_listing div.progressbar, div.wysiwyg div.progressbar {
    z-index:2;
    position: absolute;
    bottom:0;left:0; 
    width: 0;
    height: 5px;
    background: #007dab;  
    transition: width 50ms linear;
    -webkit-transition: width 50ms linear;
}


div.media_listing.column {
    width: 300px;
    padding-top: 95px;
}
div.media_listing > div.items {
    float: left;
}   
div.media_listing.files > div.items {
}

/*
div.media_listing > div.items.static > div.item {    
    transition: all 300ms ease 1s;
    -webkit-transition:all 300ms ease 1s; 
}
*/
div.media_listing > div.items > div.item {
    width: 220px;
    float: left;    
    border: 1px solid #ccc;
    padding: 5px;
    background: white;
    position: relative;
    margin: 4px 7px;    
    text-align:center;
    height: 100px;
    transition: box-shadow 150ms ease-in-out;
    -webkit-transition:  box-shadow 150ms ease-in-out;  
}
div.media_listing.mediatitlesenabled > div.items > div.item {
    height: 130px;
}


div.media_listing > div.items > div.item.ui-sortable-helper  span.btn.move {
    background-position: 0 0; 
}
.ui-sortable-helper div.tooltip {
    display:none!important;
}   


div.media_listing > div.items > div.spacer {
  float: right;
  height: 50px;
  width: 150px;
}

div.media_listing > div.items > div.item > span.image {
    display: block;   
    float:left;  
}
div.media_listing > div.items > div.item > span.image img {
    max-width: 160px;
    max-height: 100px;  
}
div.media_listing > div.items > div.item > span.image.preload img {
    opacity: 0;   
}
div.media_listing > div.items > div.item.loading {
    /*background-image: url(../images/spinner.png);
    background-repeat: no-repeat;
    background-position: center 86px;*/
    border-color: #ccc;
    border-style: dotted;
    opacity: 0;
}
div.media_listing > div.items > div.video.item.loading {
    opacity:1; 
    display:none;
}
div.item.loading span.spinner {
    display: block;
    width:16px; height:16px;
    background: url(../images/spinner.png) top left no-repeat;
    background-size: 16px 16px;
    position: absolute; top: 59px; left: 99px;
}

div.media_listing > div.items > div.item.loading span.loadinginfo {
    text-align: left;
    font-size: 12px;       
    float: left;
    line-height: 1.4;
    color: #666;
    max-width: 100%; 
    word-wrap: break-word;
}
div.media_listing > div.items > div.item.loading.done {
    border-color: green;
}

div.media_listing > div.items > div.item.temp {
    border-style: dotted;
}
div.media_listing > div.items > div.item.loading span.image img {
    opacity: 0;     
}
div.media_listing > div.items > div.item span.actions {
    float:right; width:25px; padding-top:7px;
}
div.media_listing > div.items > div.item span.actions span.btn {
    margin-bottom:8px
}

div.media_listing > div.items > div.item > span.image img, 
div.media_listing > div.items > div.item span.actions {
    transition: opacity 300ms ease-out;
    -webkit-transition:  opacity 300ms ease-out;
}
div.media_listing > div.items > div.item.loading span.actions {
    opacity:0;
}

/**enkele foto? (zoals bij agenda)==>géén move icon**/
div.media_listing[data-maxitems="1"] > div.items > div.item span.actions span.btn.move {
    display:none;
}
div.media_listing[data-maxitems="1"] > div.items > div.item {
    cursor: default;
}

/** disabled upload btn (bij max aantal bereikt) **/
div.upload_container.disabled * {
    cursor: default!important;
}
div.upload_container.disabled input {
    display:none;
}

/** file/link item**/
div.media_listing > div.items > div.item.link, div.media_listing > div.items > div.item.file {
    width: 356px;
    margin: 4px 0;
    text-align: left;
    height: 40px;
    line-height: 1.4;
    margin-left: 15px;
}
div.item.link > span, div.item.file > span {
    
    float: left;
    max-width: 70%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    clear:left;
    
}
div.item.link span.url, div.item.file span.url {
    font-size: 12px;   
}
div.item.link span.actions, div.item.file span.actions {
    clear: none;float: right;
    text-align:right;
    width: 92px!important;
    padding-top: 12px!important;
}

/** video item **/
div.media_listing > div.items > div.item.video {
    text-align: left;   
}
div.media_listing div.item.video > img {
    max-width: 180px;
    max-height: 100px; 
}

/** file input stylizer **/
div.listingdialog input[type=file] {
    opacity:0!important;
}
div.file_field > input[type=file] {
    cursor: pointer;
    display: block;
    position: absolute; top: 0; right: 0;
    float: right;
    text-align: right;
    width: 181px;
    height: 24px; border: none; background: white;
    opacity: 0;
    padding: 0!important;
    z-index: 2
}
div.file_field {
    float: left;
    position: relative;  
    width: 171px; height: 14px;
    padding: 5px; 
}
div.file_field > div.file_field_stylizer {
    position: absolute; top: 0; right: 0;
    margin-bottom: 6px;
    background: #007dab;   
    width: 181px; height: 24px;
    cursor: pointer;
}
div.file_field_stylizer div.file_field_button {
    background: none repeat scroll 0 0 white;
    color: #212121;
    font-size: 12px;
    height: 24px;
    line-height: 24px;
    padding: 0 5px;
    position: absolute;
    right: 0;
    top: 0;
}
div.file_field_stylizer div.file_field_filename {
    background: none repeat scroll 0 0 white;
    height: 24px;
    position: absolute;
    top: 0;
    width: 110px;
    color: #212121;
    overflow:hidden;
    font-size: 12px;
    line-Height: 24px;
    padding: 0 5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;


}

/** fotoalbum**/
div.media_listing.album_fotos > div.items > div.item {
    width: 203px;   
}


/** media item tags (titels foto/video) **/
div.item span.media_item_tag > input {
  font-size: 11px;
  margin: 0;
  padding: 2px;
  width: 177px;
  box-shadow: none!Important;
}
div.item .media_item_tag {
    display:none;
  bottom: 7px;
  left: 5px;
  position: absolute;
}

div.media_listing.album_fotos > div.items > div.item  {
    height: 123px;   
}
div.media_listing.album_fotos > div.items > div.item span.media_item_tag > input {
    width: 162px;    
}
/** listing span breedtes; soort td's. handig predefined: **/

ul.listing > li > span.l100 {
    width: 100px;   
}
ul.listing > li > span.l110 {
    width: 110px;   
}
ul.listing > li > span.l120 {
    width: 120px;   
}
ul.listing > li > span.l130 {
    width: 130px;   
}
ul.listing > li > span.l140 {
    width: 140px;   
}
ul.listing > li > span.l150 {
    width: 150px;   
}
ul.listing > li > span.l160 {
    width: 160px;   
}
ul.listing > li > span.l170 {
    width: 170px;   
}
ul.listing > li > span.l180 {
    width: 180px;   
}
ul.listing > li > span.l190 {
    width: 190px;   
}
ul.listing > li > span.l200 {
    width: 200px;   
}
ul.listing > li > span.l210 {
    width: 210px;   
}
ul.listing > li > span.l220 {
    width: 220px;   
}
ul.listing > li > span.l230 {
    width: 230px;   
}
ul.listing > li > span.l240 {
    width: 240px;   
}
ul.listing > li > span.l250 {
    width: 250px;   
}
ul.listing > li > span.l260 {
    width: 260px;   
}
ul.listing > li > span.l270 {
    width: 270px;   
}
ul.listing > li > span.l280 {
    width: 280px;   
}
ul.listing > li > span.l290 {
    width: 290px;   
}
ul.listing > li > span.l300 {
    width: 300px;   
}
ul.listing > li > span.l310 {
    width: 310px;   
}
ul.listing > li > span.l320 {
    width: 320px;   
}
ul.listing > li > span.l330 {
    width: 330px;   
}
ul.listing > li > span.l340 {
    width: 340px;   
}
ul.listing > li > span.l350 {
    width: 350px;   
}
ul.listing > li > span.l360 {
    width: 360px;   
}
ul.listing > li > span.l370 {
    width: 370px;   
}
ul.listing > li > span.l380 {
    width: 380px;   
}
ul.listing > li > span.l390 {
    width: 390px;   
}
ul.listing > li > span.l400 {
    width: 400px;   
}
ul.listing > li > span.l410 {
    width: 410px;   
}
ul.listing > li > span.l420 {
    width: 420px;   
}
ul.listing > li > span.l430 {
    width: 430px;   
}
ul.listing > li > span.l440 {
    width: 440px;   
}
ul.listing > li > span.l450 {
    width: 450px;   
}
ul.listing > li > span.l460 {
    width: 460px;   
}
ul.listing > li > span.l470 {
    width: 470px;   
}
ul.listing > li > span.l480 {
    width: 480px;   
}
ul.listing > li > span.l490 {
    width: 490px;   
}
ul.listing > li > span.l500 {
    width: 500px;   
}
ul.listing > li > span.l510 {
    width: 510px;   
}
ul.listing > li > span.l520 {
    width: 520px;   
}
ul.listing > li > span.l530 {
    width: 530px;   
}
ul.listing > li > span.l540 {
    width: 540px;   
}
ul.listing > li > span.l550 {
    width: 550px;   
}
ul.listing > li > span.l560 {
    width: 560px;   
}
ul.listing > li > span.l570 {
    width: 570px;   
}
ul.listing > li > span.l580 {
    width: 580px;   
}
ul.listing > li > span.l590 {
    width: 590px;   
}
ul.listing > li > span.l600 {
    width: 600px;   
}
ul.listing li.nomenu > span.menutitle {
    color:#888;
}

ul.listing li span.actions.larger {
    min-width: 120px;
}

/* css for timepicker */
.ui-timepicker-div .ui-widget-header { margin-bottom: 8px; }
.ui-timepicker-div dl { text-align: left; }
.ui-timepicker-div dl dt { height: 25px; margin-bottom: -25px; }
.ui-timepicker-div dl dd { margin: 0 10px 10px 65px; }
.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; }
.ui-timepicker-rtl dl dd { margin: 0 65px 10px 10px; }
div.ui-timepicker-div .ui-datepicker .ui-datepicker-title {
    display: none;   
}
div.ui-timepicker-div div.ui-widget-header {
    display:none;
}
.ui-slider-handle, .ui-icon {
    cursor:pointer;
}
.ui-datepicker-buttonpane {
    display:none;
}
.ui_tpicker_time, .ui_tpicker_time_label {
    display:none;
}
.ui-timepicker-div {
    padding: 10px 5px 5px 5px;   
}


.ui-sortable-placeholder {
    visibility: visible!important;
    background: #f6f6f6!important;   
}



div.toggle:not(.wide) {
    float:left;
    width:115px;   
}
div.toggle:not(.wide) + div.toggle:not(.wide) {
  margin-left: 39px;
}
div.toggle[data-name=post-to-twitter] {
    width:230px;
}
div.toggle > label {
    white-space:nowrap;
}

.onoffswitch {
    position: relative; width: 114px;
    -webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;
    float:left;clear:left;
    margin-bottom:6px;
}
.onoffswitch-checkbox {
    display: none;
}
.onoffswitch-label {
    display: block; overflow: hidden; cursor: pointer;
    border: 1px solid #CCCCCC; 
}
.onoffswitch-inner {
    width: 200%; margin-left: -100%;
    
}
.onoffswitch-inner:before, .onoffswitch-inner:after {
    float: left; 
    width: 50%; 
    height: 33px; 
    padding: 0; 
    line-height: 33px;
    font-size: 14px; color: white; font-family: Verdana, Arial, sans-serif;
    -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}
.onoffswitch-inner:before {
    content: "";
    padding-left: 33px;
    background-color: #FFFFFF; 
    color: #212121;
}
.onoffswitch-inner:after {
    content: "";
    padding-left: 33px;
    background-color: #FFFFFF; 
    color: #999999;    
}
.onoffswitch-switch {
    width: 20px;
    height:20px;
    background: #CCCCCC;
    
    position: absolute;
    left:7px;top:8px;
    
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {
    margin-left: 0;
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {    
    background-color: #2FFF40; 
}

.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch:after {
  color: #212121;  
  content: "✓";
  display: block;
  font-size: 27px;
  margin-left: 0;
  margin-top: -7px;
  line-height: 27px;
}
label.onoffswitch-label {
    clear: inherit;
    float: none;
    font-size: 12px;
    line-height:1;
    margin:0;
}


/** contactsettings **/
div#contact_settings {    
    float: left; clear: both;
    padding-top: 10px;
    margin-top: 30px;
    width: 100%;
    position: relative;
}
div#contact_settings span.mainbtn.savesettings {
    top: 19px;
}

/** bs_image ckeditor uitbreiding **/
/** bs_image inline file upload **/
/** by bart **/
 a.cke_button.bs_image_button {
    width: 18px;
}   

 div.bs_imagecontainer {
    height: 26px;
    width: 28px;
    position:relative; 
    overflow:hidden;
}
 div.bs_imagecontainer > input {
    height: 26px;
    position: absolute;
    top:0;right:0;   
    opacity:0;
}
 div.bs_imagecontainer:hover a.cke_filebutton {
     background: #D5E1F2;
}

/** social **/

div#content[data-plugin=social] label + * {
    clear: both;
    float:left;   
}
div#content[data-plugin=social] p {
    float:left;clear:both;
}
div.social.connectionstatus  {
    line-height: 1.4;
    padding: 5px;
    width: 215px;
    border: 1px solid #ccc;
    position:relative;
}

/** SETTINGS **/
div.toggletfieldset {
  float: left;
  position: relative;
  width: 320px;
}
div.toggletfieldset > div {
  float: left;
  margin-right:10px;
}
div.toggletfieldset input[type="text"] {
  width: 130px;
}
div.editorset {
    display:none;
}
div.editorset.active{
    display:block;
}
div.column.userplugins {
    display: none;   
    margin-top: -37px;
}
div.column.userplugins.active {
    display:block;
}
/** news uitbreiding autoarchive **/
div.autoarchive {
    margin-left:39px;
    float:left;
    width:115px;
    display:none;
}
div.autoarchive.show {
    display:block;
}

/** MULTILANGUAGE **/
ul.langswitch {
    width: 100%;
    display: block;
    float: left;
    border-bottom: 1px solid #007dab;
    margin:12px 0 2px 0;  
}
ul.langswitch.twothird {
    width: 640px;   
}
ul.langswitch li {
    float: left;   
    border: 1px solid #007dab;
    
    margin: 0 12px -2px 12px;
    padding: 5px 8px 4px 8px;
    background: #fff;
    cursor: pointer;
}
ul.langswitch li.active {
    opacity:1;
    border-bottom: 2px solid #fff;
    
}
ul.langswitch li img {
    display:block;
    opacity: .7;
}
ul.langswitch li.active img,ul.langswitch li:hover img {
    opacity:1
       
}
div.langset {
    
    width: 100%; float:left;
    display: none;   
}
div.langset.nowidth {
    width: auto; float: none; border-bottom: none!important;
}
div.langset.active {
    display: block;   
}
div.langset.multiple {
    padding-bottom:18px;
    margin-bottom:12px;
    border-bottom: 1px solid #007dab;
}

div.productcategories {
    width: 100%;
    float:left;
}

/** product options */

div.media_listing.product_options {
    width: 622px;

    min-height: 184px;
}
div.media_listing.product_options div.listingdialog {
    width: 100%; left:0;
    box-sizing: border-box;

}
div.media_listing.product_options div.listingdialog > div {
    width: 100%;
    padding-right: 7px;
    box-sizing: border-box;
}
div.listingdialog .dialog_lang_set {
    width: 31%;
    float: left;
    margin-right: 3.5%;
}
div.listingdialog .dialog_lang_set input {
    width: 100%;
    box-sizing:border-box;
}
div.listingdialog .dialog_lang_set:nth-child(3n){
    margin-right: 0;
}
div.listingdialog .dialog_lang_set img.flag {
    width: 20px;
    float:left;
    margin: 7px 4px 0 0;
    display: none;
}
div.listingdialog div.ml .dialog_lang_set img.flag {
    display: block;
}
div.listingdialog .dialog_lang_set img + label {
    clear: right;
}
div.media_listing > div.items > div.item.option {
    text-align: left;
    height: 174px;
    overflow:hidden;
    width: 191px;
    padding: 0;
}
div.media_listing > div.items > div.item.option div.name {
    display: block;
    border-bottom: 1px solid #ccc;
    line-height: 1.6;
    font-size: 16px; font-weight: 300;
    background: #F4F4F4;
    position:relative;
    padding: 2px 6px;
    height: 26px;
}
div.media_listing > div.items > div.item.option div.name span.name {
    display: inline-block;
    max-width: 86px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
div.media_listing > div.items > div.item.option div.name span.actions,
div.media_listing > div.items > div.item.option ul li span.actions {

    padding-top:0;
    width: auto;
    padding-right:2px;

    display: block;
    height: 26px;

}
div.media_listing > div.items > div.item.option ul li span.actions {
    height: 20px;
    opacity: 0;
    transition: opacity 100ms ease;
    pointer-events: none;
}
div.media_listing > div.items > div.item.option ul li:hover span.actions {
    opacity: 1;
    pointer-events: auto;
}
div.media_listing > div.items > div.item.option span.actions span.btn,
div.media_listing > div.items > div.item.option ul li span.actions span.btn {
    display: block;
    float:left;
    vertical-align: top;
    margin: 5px 0 0 6px;
}
div.media_listing > div.items > div.item.option ul li span.actions span.btn {
    margin: 0 0 0 6px;
}

div.media_listing > div.items > div.item span.actions span.btn {

}
div.media_listing > div.items > div.item.option ul.option_values {

    line-height: 1.4;
    color: #333;
    display: block;
    max-height: 144px;
    overflow-y: auto;
    overflow-x: hidden;
    /*
    width: 94%;
    margin-left: 3%
    */
}
div.media_listing > div.items > div.item.option ul.option_values li {
    border-bottom: 1px solid #ddd;
    padding: 4px 6px;

    box-sizing: border-box;
    font-size: 12px;
    height: 24px;
    background: #fff;
    width: 94%;
    margin-left: 5px
}

/* shop orders */
ul.listing li.order span.confirmed,
ul.listing li.order span.paid {
    color: green;
}
ul.listing li.order span.payment_pending {
    color: orange;
}
ul.listing li.order span.cancelled,
ul.listing li.order span.failed {
    color: #b00013;
}
ul.listing li.order.cancelled > span,
ul.listing li.order.failed > span{
    color: #888;
}
div.orderinfo {
    width: 100%;
    float: left;
    padding-bottom: .5em;
    line-height: 1.4;
    border-bottom: 1px solid #ccc;
    box-sizing: border-box;
    margin-top: 10px;
    padding-left: 4px;
}
div.orderinfo > span {
    display: block;
    width: 50%;
    float: left;
    box-sizing: border-box;
    padding-right: 10px;
}
div.vieworder div.column {
    box-sizing: border-box;
    width: 50%;
    padding-left: 2em;
}
div.vieworder div.column:first-child {
    padding-right: 2em;
    padding-left: 0;
}
div.vieworder div.column.full {
    width: 100%;

}
div.vieworder div.shop_cart {
    margin-top: 2em;
    line-height: 1.6;
    padding-left: 0;
    padding-right: 0;
}
    div.shop_cart {
        width: 100%;
        float: left;
        margin-bottom:2em;
    }
    div.shop_cart > div {
        width: 100%;
        float:left;

        border-bottom: 1px solid #ddd;
    }
    div.shop_cart > div > div{

        float:left;
        box-sizing:border-box;
    }
    div.shop_cart > div div.img {
        width: 15%;
        position:relative;

    }
    div.shop_cart > div div.img img {
        position: absolute;
        top: 50%; left: 50%;
        transform: translate(-50%,-50%);
        -webkit-transform: translate(-50%,-50%);
        max-width: 100%;
    }
    div.shop_cart > div div.artikel {
        width: 40%;
    }
    div.shop_cart > div div.artikel a {
        color: #000;
    }
    div.shop_cart > div div.artikel a:hover {
        color: #0096ff
    }
    div.shop_cart > div div.artikel > span {
        display: block;
    }
    div.shop_cart > div div.artikel > span.option > span {
        display: inline-block;
        margin-right: .5em;
    }
    div.shop_cart > div div.artikel .title {
        font-size: 1.2em;
    }
    div.shop_cart > div div.aantal {
        width: 15%;
    }
    div.shop_cart > div div.stuksprijs,
    div.shop_cart > div div.subtotaal {
        width: 15%;
        box-sizing: border-box;
        text-align: right;
        padding-right: 1em;
    }
    div.shop_cart div.header {
        font-size: 1.2em;
    }
    div.shop_cart div.row {
        min-height: 100px;
        padding: .5em 0;

    }
    div.shop_cart div.row, div.shop_cart div.row > div {
        min-height: 100px;
        white-space: nowrap;
    }
    div.shop_cart div.totals {
        width: 30%;
        float: right;
        outline: 1px solid blue;

    }
    div.shop_cart div.totals > div {
        width: 100%;
        padding: .5em 0;
        font-size: 1.1em;
        text-align: right;
        box-sizing: border-box;
        padding-right: 1em;
    }
    div.shop_cart div.totals > div > span {
        width: 50%;
        display: inline-block;
     }
    div.shop_cart div.totals > div.totaal {
        font-weight: bold;
    }
    div.shop_cart div.totals > div.btw {
        font-size: 1em;
    }


div.settings_set {
    border: 1px solid #ccc;
    float: left;
    width: 100%;
    box-sizing: border-box;
    padding: .5em .8em;
}
div.settings_set > label:first-child, div.settings_set div.toggle:first-child > label {
    margin-top: 0;
}






/** IPAD **/

@media screen and (max-width: 1460px) {
    div#header {
        width: 230px;
    }

}

@media screen and (min-width: 1440px) {
    body {
        background: #fff;   
    }
    /*
    div#header {
        max-width: 16%;
    }
    */

    div#container {
        padding:  30px 50px;
        margin: 0 auto;
    }
    div#rightbar-faux {
        right:0;
        left: auto;
        width: 16%;   
        background: #efefef;
        z-index:2;
    }


    
}

@media screen and (max-width: 1240px) {
    div#container {
        padding-left: 70px;
        padding-right: 14px; 
        padding-top: 20px;
        
        margin: 0 auto;
    }
    div#header {
        left: -175px;
    }
    div#header div#usermenu {
        opacity:0;   
        transition: opacity 250ms ease;
    }
    
    div#header.show {
        left:0;
    }
    div#header.show div#usermenu {
        opacity:1;   
    }
    body {
        background: #fff;   
    }
    
    div#rightbar-faux {
        display:none;   
    }
    div#header div#toggle {
        width: 32px; height: 32px;
        border: 11px solid #007DAB;
        position: absolute;
        top: 4px; right: 1px;
        background-image: url(../images/menu.png);
        background-size: 32px 64px;
        background-position: 0 0;
        background-repeat: no-repeat;
        cursor:pointer;
        z-index: 9;
    }
    div#header.show div#toggle {
        background-position: 0 -32px;
        
    }
    div#usermenu ul li {
        margin-top:10px;
    }
    div#header h1 {
        font-size: 26px;
        line-height:33px;   
    }
    div#usermenu {
        margin-bottom: 16px;   
    }
    
    ul.menu li > a, ul.menu li  > span  {
        /*padding: 11px 0 11px 14px; */
    }
    ul.menu li > a span.name, ul.menu li > span span.name {
        left: 14px;
    }
    ul.menu li a img, ul.menu li span img {
        display:block;
        left: auto; right: 14px;
        height: 28px;
    }
    ul.submenu {
        #display: none!important;
    }
    div.dialog {
        left: 212px;   
    }
    #header  div#title {
        margin-top: 11px;
        margin-bottom:52px;
    }
    #header  div#title img {
        opacity:0;
        transition: opacity 150ms ease;
    }
    #header.show div#title img {
        opacity: 1;
    }
    body.login div#title img {
        display:inline;   
    }

}


@media print {
    body {
        background: #fff;
        font-size: .8em;

    }
    div#header,
    div#dialogs,
    span#cbxlogo,
    span.mainbtn,
    div.shop_cart > div div.img,
    *.noprint {
        display: none;
    }
    div#container {
        width: 100%;
        padding:0;
        box-shadow: none;
    }
    div#content {
        padding: 2em 0;
    }
    div#content h1 {
        margin: 1em 0;
    }
    div.shop_cart > div.row div.stuksprijs, div.shop_cart > div.row div.subtotaal,
    div.shop_cart > div.header div.stuksprijs, div.shop_cart > div.header div.subtotaal {
        width: 22.5%;
    }
    div.shop_cart div.totals {
        width: 45%;
    }

}

div.kaars_afloop {
    display: block;
    width: 100%; float: left;
    color: #333;
    padding-left: 8px;
}