/*

	Style.css // Stylesheet 
	
*/


/*
	
	GLOBAL STYLES

*/


/* Elements */
body{ overflow-y: scroll; margin: 0; background: #fff; color: #666; font-family: 'Open Sans', helvetica, sans-serif; font-size: 11px; line-height: 20px; }
h1{ margin: 0 0 30px 0; font-size: 1.818181818em; line-height: 1em; color: #007fcc; }
hr{	display: block; margin: 0 0 30px 0; height: 1px; border: none; background: #ebebeb; }
hr.alt{ margin: 0 0 20px 0; height: 1px; border: none;  }
p{ margin: 0 0 20px 0; color: #808080; font-size: 1.181818182em; }
strong{ color: #333; }
a{ text-decoration: none; color: #007fcc; }
a:hover{ text-decoration: underline; }
img{ border: none; }
table{ width: 100%; border-collapse : collapse; }
table td{ vertical-align: top; padding : 0; }

/* Global */
.clear{ clear: both; }

/* Structure */
#wrapper{ float: left; margin-left: 60px; margin-top: 40px; width: 800px; }
#header{ display: block; position: relative; z-index: 1000;	width: 100%; height: 80px; background: #007fcc;}
#aside{ display: block; position: relative; float: left; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; padding: 60px 20px 0 20px; width: 180px; min-height: 600px; background: #fafafa; }
#footer{	display: block; position: relative; z-index: 1000;	width: 100%; height: 100px; background: #007fcc; color: #fff;}
.article{ display: block; margin: 40px 0; }

/* Selection */
::selection{ background:#007fcc; color:#fff;}
::-moz-selection{ background:#007fcc; color:#fff;}
::-webkit-selection{ background:#007fcc; color:#fff;}

/* Header */
#komma-logo{ position: absolute; top: 22px; left: 30px; width: 143px; height: 30px; }
#komma-logo img{ width: 100%; }
#header .shadow{	position: absolute; bottom: -10px; left: 0; width: 100%; height: 10px; background: url( '../images/structure/header-shadow.png' ) repeat-x; }
.flags{ position: absolute; top: 20px; right: 5%; height: 15px; z-index: 100; }
.flag{ display: block; float: left; margin-left: 10px; width: 20px; height: 20px; background: no-repeat url('../images/structure/kms_sprite.png'); opacity: 0.25; filter: alpha(opacity=25); cursor: pointer; }
.flag.active{ opacity: 1; filter: alpha(opacity=100); }
.flag.nl{ background-position: -10px -10px; }
.flag.en{ background-position: -70px -10px; }

/* Aside */
#aside .content{ position: relative; }
#aside .shadow{ position: absolute; top: 0; right: 0; width: 10px; height: 100%; background: url( '../images/structure/aside-shadow.png' ) repeat-y; }
#aside section.welcome{ display: block; margin-bottom: 50px; color: #999; font-size:  1.181818182em; }
#aside .user-label{ 	color: #666; }
#aside h2{ margin: 0 0 10px 0; font-size: 1.272727273em; font-weight: 400; color: #b3b3b3;}
#aside ul{ margin: 0 0 20px 0; padding: 0; }
#aside ul li{ list-style: none; margin-left: 10px; font-size: 13px; line-height: 30px; }
#aside ul li.active a{ color: #007fcc; font-weight: 700; }
#aside hr{ margin-bottom: 20px; }
#aside a{ color: #666; text-decoration: none; }
#aside a:hover{ color: #007fcc; }

/* Footer */
#footer .shadow{	position: absolute; width: 100%; height: 10px; background: url( '../images/structure/header-shadow.png' ) repeat-x; }
#footer ul{ position: absolute; top: 40px; left: 30px; margin: 0; padding: 0; list-style: none; }
#footer ul li{ display: block; float: left; margin-right: 40px; text-transform: uppercase;  }
#footer ul li a{ color: #7EBED5; }
#footer ul li a:hover{ color: #fff; text-decoration: none; }

/* form */
form{ position: relative; }
input[type='text'],input[type='password'], select{	display: block; padding: 0 10px; margin-bottom: 20px; width: 100%; height: 30px;color: #666; font-size: 12px;  box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;  }
input[type="submit"],input[type="button"]{ position: absolute; top: 0; left: 0; z-index: 4; margin-right: 10px; padding: 7px 10px 4px 10px; width: 150px; background: none; border: none; color: #fff; font-size: 1em; font-weight: 700; text-transform: uppercase; cursor: pointer; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; }
input[type="checkbox"]{ display: inline; margin: 0; padding: 0; width: 1em; height: 1em; }
select{	background: url('../images/structure/selectBg.jpg'); padding: 5px 0 0 10px;}

form .label{ display: block; margin-left: 10px; margin-bottom: 10px; height: 10px; font-size: 1.181818182em; font-weight: 700; line-height: 10px; }
input.logout{ top: 45px; right: 4.70727665%; left: auto; padding: 0; margin: 0; width: 90px; height: 20px; background: #007fcc; border: none; color: #fff; font-weight: 700; text-transform: uppercase; cursor: pointer; text-align: right; }
input.logout:hover{	text-decoration: underline;  }

/* Buttons */
.btn{ display: block; position: relative; float: left; margin: 0 10px 30px 0; font-size: 1.090909091em; font-weight: 700; text-transform: uppercase; text-align: center; line-height: 1em; 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;}
.btn:hover{ text-decoration: none; }
.btn.rounded .out, .btn.rounded .over { border-radius:4px; -moz-border-radius:4px; }
.btn .out, .btn .over{ display: block; padding: 8px 10px 8px 10px; width: 150px; height: 30px; box-sizing: border-box; -moz-box-sizing: border-box;-webkit-box-sizing: border-box;}
.btn .out{  position: relative; z-index: 1;   }
.btn .over{ position: absolute; z-index: 2; top: 0; left: 0; opacity: 0; filter: alpha(opacity=0);  }

/* Blue Button (Out / Over) */
.btn.blue .out{ background: #007fcc; border: 1px solid #0075af; color: #fff; }
.btn.blue .over{ background: #046596; border: 1px solid #054463; color: #fff;}

/* Gray Button (Out / Over) */
.btn.gray .out{ background: #b3b3b3; border: 1px solid #999; color: #fff;  }
.btn.gray .over{ background: #666; border: 1px solid #666; color: #fff;  }

/* Alerts */
#alerts-holder{	position:fixed; top: 100px; right: 30px; z-index: 9999; width: 310px;}
.alert{	margin-bottom: 20px; padding: 28px; width: 250px; min-height: 60px; color: #fff; opacity: 0; filter: alpha(opacity=0); }
.alert.error{ background: #ff5a5a; border: 2px solid #bf0000; }
.alert.warning{ background: #ffb400; border: 2px solid #ff8400; }
.alert.succes{ background: #00d84d; border: 2px solid #2ebf5b; }
.alert h1{ font-size: 1em; margin: 0 0 10px 0; color: #fff; }
.alert ul{ margin: 0; padding: 0; width: 250px; }
.alert ul li{ list-style: none; }
.alert strong{ color: #ffffff; }

/*
	
	PAGE SPECIFIC STYLES

*/

/* Login */
body.login #wrapper{	position: absolute; top: 200px;  left: 50%;margin-left: -155px; width: 310px; }
body.login #footer{ position: absolute; bottom: 0; left: 0;}

/* Contact */
.c-indication{ display: inline-block; width: 30px; color: #0E61DB; font-size: 0.8em; font-weight: 700;}

/* MultiPage */
#wrapper ul{ margin: 0; padding: 0; }
#wrapper ul li{	display: block; height: 40px; list-style: none; }
#wrapper ul li.alt{ background: #f2f2f2; }
#wrapper ul li.sel{	background: #007fcc; color: #fff;}
#wrapper ul li.sel.alt{ background: #0075af; }
ul.mp-list{ margin-bottom: 30px !important; }
ul.mp-list li{ min-width: 925px; }
ul.mp-list .col{ float: left; position: relative;  overflow: hidden; white-space: nowrap; padding-top: 10px; margin-right: 1px; height: 24px;font-size: 1.090909091em;}
.heading .col{ background: #fff; color: #007fcc; font-weight: 700; }
.col.title{ padding-left: 10px;width: 309px; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
.col.prodtitle{ width: 169px; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }

.col.title a{ color: #666666; }
.sel .col.title a{ color: #fff; }

.col.code{  padding-left: 10px; width: 169px; }
.col.added{ padding-left: 10px; width: 149px; }
.col.edit{ float: right !important; padding-left: 10px; padding-right: 9px; width: 170px; }
.col.link{ width: 69px; }
ul.mp-list .col.show_hide{ width: 80px;margin-right: 40px; }
.col.new strong, .col.show_hide strong{ color: #007fcc; }
.col.new a,.col.show_hide a{ color: #808080; }

.col.cb input{ margin: 4px 0 0 10px; width: 10px; height: 10px;}
a.col{ text-decoration: none; cursor: pointer; }
.col.edit .subcol{ float: left; width: 60px; }
.col.edit .subcol a{ color: #808080; }
.sel .col.edit .subcol a{ color: #fff; }
.publish{ color: #007fcc; font-weight: bold; }
.page-nav{ display: block; margin-top: 40px; width: 100%; color: #808080; text-align: center; font-size: 14px; font-weight: 700; font-variant: small-caps; text-transform: lowercase; }
.page-nav .page-count{ font-size: 12px; font-weight: 400;  }
.page-nav .next, .page-nav .prev{ text-decoration: none; color: #808080; cursor: pointer;}
.page-nav .next:hover, .page-nav .prev:hover{ color: #007fcc; }
.page-nav .next.disabled, .page-nav .prev.disabled{ text-decoration: none; color: #b3b3b3; cursor: default;}
.page-nav .next.disabled:hover, .page-nav .prev.disabled:hover{ color: #b3b3b3; }

hr.vr{ position: relative; top: 10px; left: 0; display: inline-block; margin: 0 20px; width: 1px; height: 30px; border: none; background: #ebebeb; }

.x2_filter{ position: absolute; right: 0; top: 0; width: 200px;  }
.x2_filter .active{ font-weight: 700;}

/* MultiPage || Add */
form{ position: relative; height: auto;}
form .left-col{ position: relative; top: -1px; padding: 30px 89px 100px 0; width: 310px; height: 100%; min-height: 400px; float: left; border-right: 1px solid #ebebeb; }
form .right-col{ position: relative; top: -1px; padding: 30px 0 100px 90px; width: 310px; height: 100%; min-height: 400px; float: left;  }
form .left-col.no-border{  padding: 30px 90px 100px 0; width: 310px; height: 100%; min-height: 400px; border: none; }

.btns-holder{ position: absolute; bottom: 30px;}
.btns-holder-top{ position: relative; }
hr.shift-up{ position: relative; top: -2px; left: 0;  }
h2.shift-right{ margin-left: 10px; }
form h2{ margin-top: 0; }

.loading-holder{ margin: 0 0 20px 0; width: 300px; height: 10px; color: #808080;line-height: 1em; }
#loader{display: none; }
#docloader{ display: none; }

.crop-choice{ margin: 0 0 10px 0; width: 300px; height: 10px; color: #808080;line-height: 1em; }
.jcrop-holder{ display: block; margin: 0 0 20px 0; }

.image-container{ float: left; margin: 0 20px 20px 0; width: 60px; height: 80px !important; }
.image-container .holder{ overflow: hidden; width: 58px; height: 58px; border: 1px solid #F2F2F2; cursor: pointer; }
.image-container .remove{ margin: 10px 0 0 0; width: 60px; height: 10px; text-align: center;  }

#product_images{ width: 320px; }

.doc-container{	width: 100%; height: auto !important; margin-bottom: 10px; }
.doc-container .label{ margin-left: 0; text-transform: uppercase;font-size: 13px; }
.doc-container .icon{ float: left; width: 51px; height: 62px; }
.doc-container .info{ margin-top: 3px; float: left; margin-left: 10px; font-size: 13px; line-height: 16px; }
.doc-container .info a{	 font-size: 13px; }
.doc-container .icon.pdf{ background: url('../images/structure/doc-sprite.png'); }
.doc-container .icon.zip{ background: url('../images/structure/doc-sprite.png') -59px 0; }

/* MultiPage || Order */
#sortable-list{ padding:0; }
#wrapper #sortable-list li{ display: block;margin: 0 0 10px 0; padding: 5px 10px; width: 380px; min-height: 20px; height: auto; background: #fff; color: #333; list-style: none; cursor: move;  border: 1px solid #f2f2f2; }
#sortable-list li.thumb{ float: left; margin: 0 20px 20px 0; padding: 0 ;width: 60px; height: 60px !important; list-style: none; cursor: move;  border: 1px solid #f2f2f2;}

/* Where to buy */
.wheretobuy form .left-col{ padding: 30px 89px 30px 0; min-height: 0; }
.wheretobuy form .right-col{ padding: 30px 0 30px 90px; min-height: 0; }
.wtb_products_title{ font-size: 1.5em; margin: 1em 0 2em 0; }
.wtb_h{ display:block; margin: 0 0 1em 0; font-size: 1.5em; font-weight: bold; line-height: 1em; color: #007fcc; }
.wtb_column{ float: left; width: 315px; overflow: hidden; }
.wtb_column input{ margin-right: 10px; }
#wrapper .wtb_column ul{display:block; margin: 0 0 2em 0; }
#wrapper .wtb_products li{ height: auto; }
.wtb_column label{ cursor: pointer; }
#js_load{ display: none; }

#import_loading{ display: none; }

/*
	
	MEDIA QUERIES
	
*/

@media all and (max-width: 1115px){
	body{ width: 1100px; }
	#wrapper{ margin-left: 20px; }
}

@media all and (max-width: 1300px){
    .wtb_column{ width: 260px; }
}

@media all and (min-width: 1101px){
    #aside{ width: 16.363636364%; }
	#wrapper{ margin-left: 5.454545455%; width: 72.727272727%; }
}


/*
	
	OVERRIDES
	
*/

.hidden{ display: none !important; }
.no-margin{ margin: 0 !important; }
.no-margin-right{ margin-right: 0 !important; }
.low-margin-bottom{ margin-bottom: 10px !important; }