@charset "UTF-8";

/* ----------------------------------------
	base.css v0.2

	Swatch colors:
	01: #000000	- Black
	02: #ef4135	- Corporate red
	03: #e1f4fa	- Light blue
	04: #cccccc	- Default border color
	05: #3c5b66	- Bleu grey headers			- rgb (60, 91, 102)
	06: #dfe6ec - Gradient Bleu (Dark)		- rgb(223, 230, 236)
	07: #ffffff - White
	08: #555555 - Default text color
	
	10: #125578 - Dark panels
	
	
	Metingen origineel ontwerp
	#5fb7de - rgb(95, 183, 222) - Donker blauw ronde buttons
	#9cd8ee - rgb(156, 216, 238) - Licht blauw ronde buttons
	#e2f4fa - rgb(226, 244, 250) - Licht blauw rechter side bar
	#aab4ba - rgb(170, 180, 186) - Kader lijnen
	#3c5b66 - rgb(60, 91, 102)	- Donker groen/grijze koppen
	#84919a - rgb(132, 145, 154) - Lichtere grijze koppen
	
	#ced6db - rgb(206, 214, 219) - Verloop donker
*/

/* ****************************************

RESETS */

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,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,article,aside,canvas,details, embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video
{
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 1em;
	font: inherit;
	vertical-align: baseline;
	font-family: arial,helvetica,sans-serif;
}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section { display: block; }
body { line-height: 1; }
ol,ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: none; }
table { border-collapse: collapse; border-spacing: 0; }
/*div { height: 1%; }*/ /* ie6 */

/* ****************************************

BARE BASE */

html
{
	overflow-y: scroll;
}
body
{
	position: relative;
	width: 100%;
	text-align: center;
	background-color: #ffffff;
}

/* required for cui-overlabel fx */
form div, form p { position: relative; }

a
{
	text-decoration: none;
	outline: 0 none;
	color: #007ca5;/* #0099cc; */ /* #ef4135; */
}

a:link,
a:visited,
a:hover,
a:active { text-decoration: none; }
a:hover, a:focus { text-decoration: underline; }

.grd-col-m a,
.grd-col-r a{ text-decoration: underline; }

table
{
	width: 100%;
}
tr, td, th
{
	empty-cells: show;
	text-align: left;
	vertical-align: top;
}

th { font-weight: 600; }
th, td { border: 1px solid #ccc; padding: 2px; }
th { text-align: left; }

/* don't show borders */
.cui-noborders,
.cui-noborders tr,
.cui-noborders th,
.cui-noborders td
{
	border: none;
}

/* don't use backgrounds */
.cui-nobackground,
.cui-nobackground tr,
.cui-nobackground th,
.cui-nobackground td
{
	background: none !important;
	background-color: none !important;
}


:focus { outline: 0 none; }



/* ****************************************

BASE TYPOGRAPHY STYLES */

/* ** ** Common Addative Classes ** ** */
.left, .float_left  { float:left	}
.right, .float_right { float:right	}
.clear { clear:both; display:block; overflow:hidden; visibility:hidden; height:0px;}
.clear-left, .clear_left { clear:left; } .clear-right, .clear_right { clear:right; }
.hide  { display:none	} .block {display:block !important;} .inline {display:inline !important;}

.align_right    { text-align:right;	  }
.align_left     { text-align:left;	  }
.align_center   { text-align:center;  }
.align_justify  { text-align:justify; }

b, .bold {font-weight:600;}
i, .italic {font-style:italic;}

blockquote
{
	font-family: Georgia, "Times New Roman", Times, serif; 
	margin: 5px; 
	padding: 10px;
	font-size: 1.3em; 
	color: #333; 
	font-style: italic; 
	line-height: 1.2em; 
	width: 100%; 
	quotes: none;
}

/* float blockquote left, and set width */
blockquote.left
{
	border-right: 1px dotted #ccc;
	width: 30%;
	margin-right: 10px;
}

/* float blockquote right and set a width */
blockquote.right
{
	border-left: 1px dotted #ccc;
	width: 30%;
	margin-left: 10px;
}


/* ** ** ul li's ** ** */
ul
{
	list-style: outside disc;
}
ul, ol
{
	margin: 0 0 1.5em 1.5em;
	padding: 0;
}
li ul, li ol
{
	padding: 0;
	margin: 0 0 1.5em 1.5em;
}

/* ** ** custom select color ** ** */
::selection {
	background: #525252; /* Safari */
	color: #fff;
	}
::-moz-selection {
	background: #525252; /* Firefox */
	color:#fff;
}
/* ** ** paragraph styling ** ** */
p
{
	margin: 0 0 1.52em;
}


/* inline image alignment */
img.align_left
{
	float: left;
	margin: 1.52em 1.52em 1.52em 0;
	padding: 0;
}
img.align_right
{
	float: right;
	margin: 1.52em 0 1.52em 1.52em;
}
img.align_center
{
	display: block;
	margin: 1.52em auto;
}
img.align_left:after,
img.align_right:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; }
img.align_left,
img.align_right { display: inline-block; }
html[xmlns] img.align_left,
html[xmlns] img.align_right { display: block; }
* html img.align_left,
* html img.align_right { height: 1%; }


strong { font-weight: 600; }
em, dfn { font-style: italic; }
dfn { font-weight: 600; }
sup, sub { line-height: 0; font-size: 75%; }
sup { line-height: 85%; vertical-align: text-top; }
sub { line-height: 85%; vertical-align: text-bottom; }
abbr, acronym { border-bottom: 1px dashed #ccc; }
small
{
	line-height: 75% !important;
	font-size: 75% !important;
	color: inherit !important;
}

address
{
	margin: 0 0 1.5em;
	font-style: italic;
}

del
{
	color: #666;
	text-decoration: line-through;
}

pre, code, tt
{
	font: 1em 'andale mono', 'lucida console', monospace;
	line-height: 1.5;
	display: block;
}

code
{
	background-color: #eee;
	display: inline;
	padding: 0px 2px 1px 2px;
	line-height: 1.1em;
}

pre
{
	margin: 1.5em 0;
	white-space: pre;
}

hr.cui-hr
{
	width: 100%;
	height: 1px;
	border: none;
	color: transparent;
	background-color: transparent;
	clear: both;
	margin: 0 0 10px 0;
	border: 1px dotted #cccccc;
	border-style: none none solid;
}



/* ****************************************

COLORS */

.red { color: #ef4135; }
.clr01 { color: #000000; } /* Black */
.clr02 { color: #ef4135; } /* Corporate red */
.clr03 { color: #e1f4fa; } /* Light blue */
.clr04 { color: #cccccc; } /* Default border color */
.clr05 { color: #3c5b66; } /* Bleu grey headers */
.clr06 { color: #dfe6ec; } /* Gradient blue (dark) */
.clr07 { color: #ffffff; } /* White */
.clr08 { color: #555555; } /* Default text color */

/* ****************************************

GRADIENTS */


/* blue grey (top) to white (bottom) gradient */
.grad01
{
	/* default/fallback image */
	background: #ffffff url('/img/cict-ui/gradients/grad01-h70.jpg') repeat-x left top;

	/* For WebKit (Safari 4+, Chrome 1+) */
	background-image: -webkit-gradient(linear, left top, left bottom, from(#dfe6ec), to(#ffffff));
	
	/* For WebKit (Safari 5.1+, Chrome 10+) */
	background-image: -webkit-linear-gradient(left top, left bottom, from(#dfe6ec), to(#ffffff));
	
	/* For Mozilla/Gecko (Firefox 3.6+ etc) */
	background-image: -moz-linear-gradient(top,  #dfe6ec,  #ffffff);
	
	/* Opera 11.10+ */
	background-image: -o-linear-gradient(top, #dfe6ec, #ffffff);
}

/* white (top) to blue grey (bottom) gradient */
.grad02,
tr.grad02 > th,
tr.grad02 > td
{	
	/* default/fallback image */
	background: #ffffff url('/img/cict-ui/gradients/grad02-h80.jpg') repeat-x left bottom;	
	
	/* For WebKit (Safari 4+, Chrome 1+) */
	background-image: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#dfe6ec));
	
	/* For WebKit (Safari 5.1+, Chrome 10+) */
	background-image: -webkit-linear-gradient(left top, left bottom, from(#ffffff), to(#dfe6ec));
	
	/* For Mozilla/Gecko (Firefox 3.6+ etc) */
	background-image: -moz-linear-gradient(top,  #ffffff,  #dfe6ec);/* dfe6ec */
	
	/* Opera 11.10+ */
	background-image: -o-linear-gradient(top, #ffffff, #dfe6ec);
}

/* UNUSED (red) */
.grad03
{
	/* fallback/image non-cover color */
	background-color: #ef4135;
	
	/* For WebKit (Safari 4+, Chrome 1+) */
	background-image: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#ef4135));
	
	/* For WebKit (Safari 5.1+, Chrome 10+) */
	background-image: -webkit-linear-gradient(left top, left bottom, from(#ffffff), to(#ef4135));
	
	/* For Mozilla/Gecko (Firefox 3.6+ etc) */
	background-image: -moz-linear-gradient(top,  #b70000,  #ef4135);
	
	/* Opera 11.10+ */
	background-image: -o-linear-gradient(top, #ffffff, #ef4135);
}

/* ****************************************

BASE TYPOGRAPHY */


/* ----------------------------------------
color
---------------------------------------- */
html,body,div,span,h1,h2,h3,h4,h5,h6,p,blockquote,pre,del,em,small,strike,strong,tt,dt,dd,li,label,legend,caption,th,td,figcaption,input,select,button,textarea
{
	color: #444;
}
h1, h2, h3, h3 a { color: #3c5b66; }
p.intro { color: #333; }

/* ----------------------------------------
display
---------------------------------------- */
h1, h2, h3, h4, h5, h6 { display: block; }


/* ----------------------------------------
font-family
---------------------------------------- */
body { font-family: Arial, Helvetica, sans-serif; }
h1, h1 a, h1 small, h1 span, h2, h2 a, h2 small, h3, h3 a, h3 small { font-family: Museo700; font-weight: normal; }

/* ----------------------------------------
font-size
---------------------------------------- */
body { font-size: 12px; }
h1 { font-size: 25px; }
h2 { font-size: 20px; }
h3, h3 a { font-size: 18px; }
h4 { font-size: 14px; }
h5 { font-size: 12px; }
h6 { font-size: 12px; }

/* ----------------------------------------
font-weight
---------------------------------------- */
h1, h2, h3 { font-weight: normal !important; }
h3, h4, h5, h6, em, strong, dt, p.intro, .no-fontface h1, .no-fontface h2, .no-fontface h3 { font-weight: bold; }

/* ----------------------------------------
line-height
---------------------------------------- */
body { line-height: 1.3em; }
h1, h2, h3, h4, h5 { line-height: 1em; }

/* ----------------------------------------
margin
---------------------------------------- */
h1, h2, h3, p, ul, form { margin-bottom: 10px; }
h4, h5, h6 { margin: 1em 0 .25em 0 }
h1 { margin: 10px 0 20px 0; }
h2 { margin: 16px 0 8px 0; }
dd { margin-left: 1em; }
ul ul { margin-bottom: 0; }

/* ----------------------------------------
padding
---------------------------------------- */
ul, ol { padding-left: 1em; }

/* ****************************************

BASE LISTS */


ul { list-style-type: disc; }
ol { list-style-type: decimal; }

/* ****************************************

GRID */


.grd-row
{
	position: relative;
	display: block;
	width: 100%;
	margin-bottom: 10px;
	background-color: transparent;
}
.grd-col
{
	position: relative;
	display: block;
	margin: 0px auto;
	width: 970px;
	text-align: left;
	background-color: transparent;
}

.grd-col-l, .grd-col-m, .grd-col-r { float: left; }
.grd-lmr .grd-col-l { width: 175px; margin-right: 10px; }
.grd-lmr .grd-col-m { width: 600px; margin-right: 10px; }
.grd-lmr .grd-col-r { width: 175px; }

.grd-mr .grd-col-l { position: absolute; margin: 0; padding: 0; clear: both; visibility: hidden;  }
.grd-mr .grd-col-m { width: 785px; margin-right: 10px; }
.grd-mr .grd-col-r { width: 175px; }

/* ****************************************

MODAL GRID */

.grd-modal
{
	width: 90%;
	margin: 10px auto;
}
.grd-modal .grd-col
{
	width: 100%;
}
.grd-modal .grd-col-m
{
	float: none;
	width: 100%;
}

/* ----------------------------------------
header row
---------------------------------------- */
#grd-row-h
{
	height: 80px;
	background: #ffffff url('/img/cict-ui/gradients/grad02-h80.jpg') repeat-x left bottom;	
	background-image: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#dfe6ec));
	background-image: -webkit-linear-gradient(left top, left bottom, from(#ffffff), to(#dfe6ec));
	background-image: -moz-linear-gradient(top,  #ffffff,  #dfe6ec);/* dfe6ec */
	background-image: -o-linear-gradient(top, #ffffff, #dfe6ec);
}
#grd-logo
{
	position: absolute;
	z-index: 900;
	top: 22px;
	left: -4px;
	width: 193px;
	height: 59px;
	background: transparent url('/img/cict-ui/ui-cict-elm-v03.png') no-repeat left top;
}
#grd-logo a
{
	display: block;
	width: 193px;
	height: 59px;
}


#grd-row-h .grd-col { position: relative; }
#grd-hdr-tabs
{
	position: absolute;
	top: 52px;
	left: 205px;
	width: auto;
	height: 31px;
	overflow: hidden;
}
#grd-hdr-tabs a
{
	position: relative;
	display: inline-block;
	height: 15px;
	
	font-family: Museo700;
	font-weight: normal !important;
	font-style: normal: !important;
	font-size: 13px;
	color: #888;
	text-decoration: none;
	
	padding: 6px 20px 6px 20px;
	border: 1px solid #cccccc;
	border-bottom: none;
	
	background: #ffffff url('/img/cict-ui/gradients/grad02-h24.jpg') repeat-x left bottom;
	
	background-image: -webkit-linear-gradient(left top, left bottom, from(#ffffff), to(#dfe6ec));
	background-image: -moz-linear-gradient(top,  #ffffff,  #dfe6ec);
	background-image: -o-linear-gradient(top, #ffffff, #dfe6ec);
	
	-webkit-border-radius: 10px 10px 0px 0px;
	-moz-border-radius: 10px 10px 0px 0px;
	-o-border-radius: 10px 10px 0px 0px;
	-khtml-border-radius: 10px 10px 0px 0px;
	border-radius: 10px 10px 0px 0px;
}
#grd-hdr-tabs a.current,
#grd-hdr-tabs a:hover,
#grd-hdr-tabs a:hover.current
{
	color: #3c5b66;
	background-color: #ffffff;
	background-image: none;
}

/* ----------------------------------------
bottom row
---------------------------------------- */
#grd-row-b
{
	min-height: 70px;
}

/* ----------------------------------------
grid-clear
---------------------------------------- */
.grd-clear:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; }
.grd-clear { display: inline-block; }
html[xmlns] .grd-clear { display: block; }
* html .grd-clear { height: 1%; }

/* ****************************************

CUI ELEMENTS */


/* ----------------------------------------
cui-a-arrow
---------------------------------------- */
.cui-a-arrow a:link,
.cui-a-arrow a:visited,
.cui-a-arrow a:hover,
.cui-a-arrow a:active,
a.cui-a-arrow:link,
a.cui-a-arrow:hover,
a.cui-a-arrow:visited,
a.cui-a-arrow:active
{
	display: block;
	padding: 2px 0px 2px 8px;
	background: url("/img/cict-ui/icn/arrows/right-clr04.png") no-repeat scroll -5px 4px transparent;
	border-bottom: none;
	
}
.cui-a-arrow a:hover,
a.cui-a-arrow:hover
{
	background: url("/img/cict-ui/icn/arrows/right-clr01.png") no-repeat scroll -5px 4px transparent;
	color: #000;
	text-decoration: underline;
}

/* ----------------------------------------
cui-boxgroup
---------------------------------------- */
.cui-boxgroup
{
	position: relative;
	display: block;
	width: 100%;
	margin-bottom: 10px;	
}
.cui-boxgroup:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; }
.cui-boxgroup { display: inline-block; }
html[xmlns] .cui-boxgroup { display: block; }
* html .cui-boxgroup { height: 1%; }



/* ----------------------------------------
cui-tabs
---------------------------------------- */



/* ----------------------------------------
cui-box
---------------------------------------- */
.inner { padding: 8px; }
.cui-box
{
	position: relative;
	float: left;
	width: 100%;
	border: 1px solid #ccc;
}

/*
.accordion .ui-accordion-header,
.accordion .ui-accordion-content,
.cui-tabs,
.cui-box
{
	-moz-box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.15);
    -webkit-box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.15);
	box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.15);
}
*/

/* 
NOTE: USE cui-rounded to implement default border radius
*/
.borderradius .cui-box,
.borderradius .cui-rounded
{
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	-o-border-radius: 8px;
	-khtml-border-radius: 8px;
	border-radius: 8px;
}
.grd-col-m .cui-box { margin-left: 10px; }
.grd-col-m .cui-box:first-child,
.grd-col-m p + .cui-box
{
	margin-left: 0;
}

/* nested box default backgroud color */
.cui-box .cui-box,
.cui-tabs .cui-box
{
	background-color: #fafafa;
}

/* cui-box fill colors */
.cui-box.clr03 { background-color: #e1f4fa; }

/* primary boxes */
.grd-lmr .grd-col-l .cui-box { width: 173px; }
.grd-lmr .grd-col-m .cui-box { width: 598px; }
.grd-lmr .grd-col-r .cui-box { width: 173px; }
.grd-lmr .grd-col-m .cui-box-25 { width: 140px; }				/* 25 | 25 | 25  25 */
.grd-lmr .grd-col-m .cui-box-30 { width: 191px; }				/* 30 | 70 - 70 | 30 */
.grd-lmr .grd-col-m .cui-box-33 { width: 191px; } 				/* 33 | 33 | 33 */
.grd-lmr .grd-col-m .cui-box-50 { width: 293px; }				/* 50 | 50 */
.grd-lmr .grd-col-m .cui-box-70 { width: 395px; }				/* 30 | 70 - 70 | 30 */

/* inner boxes */
.grd-lmr .grd-col-m .cui-box .cui-box { width: 580px; }
.grd-lmr .grd-col-m .cui-box .cui-box-25 { width: 136px; }
.grd-lmr .grd-col-m .cui-box .cui-box-30 { width: 185px; }
.grd-lmr .grd-col-m .cui-box .cui-box-33 { width: 185px; }
.grd-lmr .grd-col-m .cui-box .cui-box-50 { width: 283px; }
.grd-lmr .grd-col-m .cui-box .cui-box-70 { width: 382px; }

/* inner boxes nested in tabs */
.grd-lmr .grd-col-m .ui-widget-content .cui-box { width: 574px; }
.grd-lmr .grd-col-m .ui-widget-content .cui-box-25 { width: 134px; }
.grd-lmr .grd-col-m .ui-widget-content .cui-box-30 { width: 183px; }
.grd-lmr .grd-col-m .ui-widget-content .cui-box-33 { width: 183px; }
.grd-lmr .grd-col-m .ui-widget-content .cui-box-50 { width: 281px; }
.grd-lmr .grd-col-m .ui-widget-content .cui-box-70 { width: 379px; }

.grd-col-l .cui-box, .grd-col-r .cui-box
{
	float: none;
	margin-right: 0;
	margin-bottom: 10px;
}


/* ****************************************

CUI-TABLEGRID
(IE compatible using selectivizr) */
.cui-tablegrid
{
	margin-bottom: 1.52em;
}
.cui-tablegrid th
{
	padding: 6px 2px;
	
	/* fallback/image non-cover color */
	background-color: #ffffff;
	
	/* fallback image */
	background-image: url('/img/cict-ui/gradients/grad02-h24.jpg');
	background-repeat: repeat-x;
	background-position: left bottom;
	
	/* For WebKit (Safari 4+, Chrome 1+) */
	background-image: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#dfe6ec));
	
	/* For WebKit (Safari 5.1+, Chrome 10+) */
	background-image: -webkit-linear-gradient(left top, left bottom, from(#ffffff), to(#dfe6ec));
	
	/* For Mozilla/Gecko (Firefox 3.6+ etc) */
	background-image: -moz-linear-gradient(top,  #ffffff,  #dfe6ec);/* dfe6ec */
	
	/* Opera 11.10+ */
	background-image: -o-linear-gradient(top, #ffffff, #dfe6ec);
}

/* Rollover highlight (improves reading) */
.cui-tablegrid tr.highlight td { background-color: #FFC; }

/* 1st */
.cui-tablegrid tr:nth-child(2n+1) { background-color: #E4E4E4; }

/* 2nd  */
.cui-tablegrid tr:nth-child(2n) { background-color: #F0F0F0; }




/* ----------------------------------------
cui-equalizer
---------------------------------------- */
span.cui-equalizer
{
	position: relative;
	display: block;
	width: 0px;
	background-color: red;
}

/* ****************************************

FORMS */


form { position: relative; }
fieldset { position: relative; margin: 0 0 10px 0; }
label
{
	position: relative;
	display: block;
	font-weight: bold;
	font-size: 12px;
	color: #3c5b66;	
}
.textshadow label
{
	text-shadow: 0 1px 1px #fff;
}
label.cui-overlabelX
{
	position: absolute;
	top: 3px;
	left: 5px;
	z-index: 1;
	color: #999;
	font-size: 11px;
}
.borderradius label.cui-overlabelX { top: 5px; }

input[type="submit"],
input[type="reset"],
button[type="button"]
{
	padding: 2px 8px;
	font-weight: bold;
	font-size: 11px;
	line-height: 1;
	color: #444;
	border: 1px solid #999;
	background-color: #ffffff;
}

.cssgradients input[type="submit"],
.cssgradients input[type="reset"],
.cssgradients button[type="button"]
{
	background-image: -webkit-gradient(linear, 0% 0% 0% 100%, from(#dfe6ec), to(#fff));
	background-image: -moz-linear-gradient(0 100% 90deg, #dfe6ec, #fff);
}

.borderradius input[type="submit"],
.borderradius input[type="reset"],
.borderradius input[type="button"]
{
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	-o-border-radius: 10px;
	-khtml-border-radius: 10px;
	border-radius: 10px;
}

.textshadow input[type="submit"],
.textshadow input[type="reset"],
.textshadow input[type="button"]
{
	text-shadow: #ffffff 1px 1px 0;
}

.boxshadow input[type="submit"],
.boxshadow input[type="reset"],
.boxshadow input[type="button"]
{
	-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
	-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.no-borderradius input[type="submit"],
.no-borderradius input[type="reset"],
.no-borderradius button[type="button"]
{
	border-top: 1px #FFF solid;
	border-right: 1px #999 solid;
	border-bottom: 1px #999 solid;
	border-left: 1px #FFF solid;
	padding: 4px 6px;
	background-color: #e5e5e5;
}

input[type="text"], input[type="password"], textarea,
input.ui-autocomplete-input
{
	/*
	TODO:
	begrenzen input elementen op breedte in rechter kolom
	anders wordt de layout een rommeltje wanneer het font wordt vergroot
	door de gebruiker!
	*/
	width: 100%;
	max-width: 96%;
	
	/* http://jhop.me/css/css3/the-css3-box-sizing-concept-a-solution-to-a-longstanding-problem */
	-webkit-box-sizing: border-box;		/* Safai 3 | WebKit */
	-moz-box-sizing: border-box;		/* Firefox 1+ */
	box-sizing: border-box;				/* Opera 8.5+ */
	
	/* http://caniuse.com */
	
	padding: 4px 4px;
	color: #666;
	border: 1px solid #999;
	background-image: -webkit-gradient(linear, 0% 0%, 0% 10%, from(#999), to(#fff));
	background-image: -moz-linear-gradient(0% 10% 90deg, #fff, #999);
	background-color: #fff;
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	-o-border-radius: 6px;
	-khtml-border-radius: 6px;
	border-radius: 6px;
}

textarea
{
	background-image: -webkit-gradient(linear, 0% 0%, 0% 1%, from(#999), to(#fff));
	background-image: -moz-linear-gradient(0% 1% 90deg, #fff, #999);
	font-family: verdana;
}

.no-borderradius input[type="text"],
.no-borderradius textarea
{
	border-top: 1px #666 solid;
	border-right: 1px #CCC solid;
	border-bottom: 1px #CCC solid;
	border-left: 1px #666 solid;
	padding: 2px 4px;
}


.cui-form fieldset
{
	margin-bottom: 10px;
}
.cui-form legend
{
	padding: 0 2px;
	font-weight: bold;
}
.cui-form label
{
	display: inline-block;
	line-height: 1.8;
	vertical-align: top;
}

.cui-form input
{
	width: auto;
}

.cui-form fieldset ol
{
	margin: 0;
	padding: 0;
}
.cui-form fieldset li {
	list-style: none;
	padding: 5px 0;
	margin: 0;
	border-bottom: 1px solid #ccc;
}
.cui-form fieldset li img {
	margin: 0 0 0 4px;
	padding: 0;
	vertical-align: bottom;
}
.cui-form fieldset fieldset {
	border: none;
	margin: 3px 0 0;
}
.cui-form fieldset fieldset legend {
	padding: 0 0 5px;
	font-weight: normal;
}
.cui-form fieldset fieldset label {
	display: block;
	width: auto;
}
.cui-form label {
	width: 120px; /* Width of labels */
}
.cui-form fieldset fieldset label {
	margin-left: 123px; /* Width plus 3 (html space) */
}




/* ----------------------------------------
cui-menuv (main vertical menu)
---------------------------------------- */
ul.cui-menuv
{
	margin: 0;
	padding: 0;
}
.cui-menuv
{
	width: 100%;
	padding-left: 0px;
	list-style-type: none;
	list-style-position: outside;
	margin-bottom: 20px;
	margin-top: 0px;
}
.cui-menuv ul
{
	margin-left: 0px; /* reset from ln. 112 */
	padding-left: 0px;
	list-style-type: none;
	list-style-position: outside;
	margin-bottom: 0px;
	margin-top: 0px;
}
.cui-menuv ul ul
{
	/*padding-left: 1em;*/
	padding-left: 0px;
	list-style-type: none;
	list-style-position: outside;
}
.cui-menuv li
{
	width: 100%;
}
.cui-menuv a
{
	display: block;
	width: auto;
	border-bottom: none;
	line-height: 1.2em;
	padding-top: .35em;
	padding-bottom: .35em;
	color: #7b7b7b;
}

.cui-menuv a:hover
{
	color: #000;
}
.cui-menuv a:hover { }
.cui-menuv a.current { color: #000; font-weight: bold; }
.cui-menuv a
{
	display: block;
	padding-left: 4px;
}
.cui-menuv li li li a
{
	padding-left: 20px;
	font-style: italic;
}

/* Quick Menu button in left hand menu */
#btn-snelmenu
{
	display: inline-block;
	width: auto;
	margin-top: 20px;
	padding: 0.2em .5em;
}

/* ****************************************

CUI-HEADER-IMAGE */

.grd-lmr .grd-col-m .cui-header-image
{
	position: relative;
	display: block;
	left: -8px;
	margin-bottom: 20px;
}


/* ****************************************

CUI-TOP-NAV */

#mod_topnav
{
	padding: 10px 0px 12px;
	font-size: 12px;
	line-height: 23px;
	text-align: right;
}


/* ****************************************

MIJN SERVICEPUNT */

#cui-servicepunt-login
{
	position: absolute;
	z-index: 910;
	display: none;
	top: -10px;
	right: 0px;
	width: 210px;
	height: 300px;
	-webkit-border-radius: 0 0 10px 10px;
	-moz-border-radius: 0 0 10px 10px;
	-o-border-radius: 0 0 10px 10px;
	-khtml-border-radius: 0 0 10px 10px;
	border-radius: 0 0 10px 10px;
}


/* ****************************************

BOX STYLES */

.cui-box-style01
{
	background-color: #125578;
}
.cui-box-style01 a:link,
.cui-box-style01 a:visited,
.cui-box-style01 a:hover,
.cui-box-style01 a:active
{
	color: #ffffff;
}
.cui-box-style01 label
{
	color: #ffffff;
	text-shadow: 0 1px 1px #000;
}
.cui-box-style01 label.cui-overlabelX
{
	color: #999;
	font-size: 11px;
	text-shadow: none;
}
.cui-box-style01 h1,
.cui-box-style01 h2,
.cui-box-style01 h3,
.cui-box-style01 h4,
.cui-box-style01 p
{
	color: #fff;
}


/* ****************************************

QUICKMENU */


/* ----------------------------------------
cui-quickmenu
---------------------------------------- */
#cui-quickmenu
{
	position: absolute;
	z-index: 920;
	top: 0px;
}
.cui-quickmenu-content
{
	padding: 10px;
	border: 1px solid #ccc;
	-webkit-border-radius: 0 0 10px 10px;
	-moz-border-radius: 0 0 10px 10px;
	-o-border-radius: 0 0 10px 10px;
	-khtml-border-radius: 0 0 10px 10px;
	border-radius: 0 0 10px 10px;
}

.cui-quickmenu-content table { border: 0; width: 100%; }
.cui-quickmenu-content table th,
.cui-quickmenu-content table td { border: 0;}
.cui-quickmenu-content td > ul
{
	margin-left: 0;
	vertical-align: top;
	margin-right: 10px;
	border-right: 1px dotted #3c5b66;
	list-style-type: none;
	padding-left: 0;
}
.cui-quickmenu-content li ul
{
	margin-left: 1em;
}
.cui-quickmenu-content li
{
	list-style-type: none;
}

.cui-quickmenu-content li,
.cui-quickmenu-content a
{
	width: auto;
	color: #3c5b66;
}

.cui-quickmenu-content ul li a { font-weight: 600; }
.cui-quickmenu-content ul ul li a { font-weight: normal; }



/* ----------------------------------------
FOOTER
---------------------------------------- */
#grd-row-f p
{
	text-align: right;
}




/* ----------------------------------------
MOD CAMPAGNE PAGINA BANNER LINKS
WIDGET SPOTLIGHT
---------------------------------------- */

.cui-spotlight
{
	height: 170px;
}

.cui-spotlight form
{
	position: absolute;
	width: auto;
	height: auto;
	bottom: 10px;
	left: 10px;
	margin-bottom: 0;
}

.cui-spotlight .inner
{
	padding: 10px;
}

.cui-spotlight .spotlight-price-container
{
	position: absolute;
	top: 0px;
	right: 0px;
	width: 180px;
	height: 171px;
	background: transparent url('/img/abonnementen/pricetag_spotlight_blue.png') no-repeat left top;
	text-align: center;
}
.cui-spotlight .spotlight-price
{
	position: relative;
	width: 114px;
	margin: 0 auto;
	top: 64px;
	font-size: 28px;
	line-height: 0.95em;
	font-family: Museo700; font-weight: normal;
	color: #ffffff;
}







.mod-glasvezelpagina .innerXXX
{
	background-color: #000 !important;
}

.mod002
{
	position: relative;
	text-align: center;
}
.mod002 .cui-button
{
	position: absolute;
	width: 120px;
	z-index: 20;
	bottom: 4px;
	left: 10px;
}

.mod002 .inner
{
	text-align: center;
	height: 158px;
}
.mod002 .pricetag
{
	position: absolute;
	display: block;
	bottom: 32px;
	width: 92px;
	height: 90px;
	left: 24px;
	background-image: url('/img/abonnementen/pricetag_red.png');
	background-repeat: no-repeat;
	background-position: center top;
	text-align: center;
	color: #fff;
}
.mod002 .pricetag h3
{
	/*font-family: arial,helvetica,sans-serif;*/
	/*font-weight: normal !important;*/
	font-size: 21px;
	color: #fff;
	padding-top: 46px;
}
.mod002 .pricetag h3 small
{
	display: inline-block;
	margin-right: 2px;
	color: #fff;
}


.mod-glasvezelpagina .panel1
{
	background-color: #000 !important;
}

/* Kiekeboe */
.cui-kiekeboe
{
	padding: 1px 8px;
	background-color: #900;
	color: #FFF;
	font-family: Andale Mono, Fixed, monospace;
	font-size: 11px;
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	-o-border-radius: 8px;
	-khtml-border-radius: 8px;
	border-radius: 8px;
	margin-bottom: 2px;
}
.cui-kiekeboe-dim
{
	background-color: #000;
}

/* Opleveringcheck */
#opleveringschecker-form .cui-button
{
	width: 100%;
	max-width: 96%;
	padding-top: 8px;
	padding-bottom: 8px;
}

#oc-result.given + span.cui-equalizer[style]
{
	height: 0px !important;
}

/* ****************************************

CUI YOUTUBE IFRAME 
(iframe is natively an inline element) */
.cui-video:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; }
.cui-video
{
	display: inline-block;
	width: 280px;
	height: 174px;
	margin: 0px 0px 20px 20px;
	padding: 0px;
	border: 1px solid #000;
	float: right; /* required for IE7 */
	clear: right;
}
html[xmlns] .cui-video { display: block; }
* html .cui-video { height: 1%; }

//
.cui-logo-reggefiber
{
	display: block;
	clear: right;
	border: 1px solid #000;
}
.cui-logo-reggefiber p
{
	text-align: center;
	font-size: 11px;
}

/* ****************************************

CUI-HEADERIMG */
.cui-headerimg
{
	display: block;
	position: relative;
	margin: 20px 0;
	left: -8px;
	background-repeat: no-repeat;
	background-position: left top;
}


/* ****************************************

DEVELOPMENT */
#mod-development-info
{
	margin: 400px auto 10px auto;
	width: 80%;
	text-align: center;
}

.cui-development-info .cui-box { background-color: #e3e3e3; }
.cui-development-info h1,
.cui-development-info h2, 
.cui-development-info h3,
.cui-development-info h4, 
.cui-development-info h5
{
	font-weight: bold !important;
	font-family: 'andale mono', 'lucida console', monospace;
	font-size: 1em;
	color: #900;
}
.cui-development-info,
.cui-development-info th,
.cui-development-info td,
.cui-development-info pre
{
	font-size: 10px;
	font: 1em 'andale mono', 'lucida console', monospace;
	line-height: 1.25;
	color: #900;
	text-align: left;
}

/* OVERLIB (tooltips) */
#overDiv .default,
#overDiv .inverted
{
	width: 200px;
	background-color: #125578;
	border: 2px solid #125578;
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	-o-border-radius: 8px;
	-khtml-border-radius: 8px;
	border-radius: 8px;
}
#overDiv .inverted
{
	background-color: #ffffff;
	border-color: #125578;
}

.olib_bgc td,
.olib_fgc td { margin: 0; padding: 0; border: none; }
.olib_fgc td { padding: 4px 8px; }
.olib_tfc { padding:8px; color:#ffffff; font-family: arial; font-size: 12px; }

.inverted .olib_tfc { color: #125578 }

/*
.olib_tfc p { color: inherit; }
.olib_tfc img { margin:0;padding:0;border:0; }
.olib_tfc th, .olib_tfc td {margin:0; padding:0;}
.olib_cfc{padding:3px 8px;color:#ffffff;font-weight:bold;background-color: #ef4135;}
.olib_clfc{}
*/

/* cui-list-movie */
.cui-list-movie
{
	padding-left: 0;
	margin-left: 0;
	display: inline;
}
.cui-list-movie li
{
	background-image: url('/img/vod/icn-movie.gif');
	background-position: top left;
	background-repeat: no-repeat;
	padding-left: 20px;
	list-style: none;
	float: left;
	width: 40%;
	display: inline-block;
}

/* cui-vspacers */
.cui-vspace { margin-top: 2em !important; }
.cui-vspace-2 { margin-top: 3em !important; }

/* cui-footnote */
.cui-footnote
{
	font-size: 11px;
	font-style: italic;
}





/*
TODO: 
General (site wide) purpose error, warning and notice dialogs
*/
div.display_dialog
{
	margin: 10px auto;
	padding: 0;
	border-width: 1px;
	border-style: solid;
	background-repeat: no-repeat;
	background-position: 2px 2px;
}
div.display_dialog_error
{
	border-color: #900;
	background-color: #EF4135;
	background-image: url(/img/misc/icn_warning_36x36.png);
	background-repeat: no-repeat;
}
div.display_dialog_warning
{
	background-color: #F90;
	border: #C90;
}
div.display_dialog_notice
{
	background-color: #00AFE0;
	border: #006D8B;
}
div.display_dialog_success
{
	background-color: #090;
	border: #063;
}

div.display_dialog .message {text-align: left;color: #fff;font-weight: bold;font-size:12px;padding:4px 4px 4px 4px;}
div.display_dialog .message ul, div.display_dialog .message li {margin:0 0 0 .5em;padding:0;}
div.display_dialog .message p, div.display_dialog .message li {color:#fff;}

div.display_dialog_error {padding-bottom:6px;}
div.display_dialog_error .message {padding-left:44px;}

/* todo: legacy print */
.print-only
{
	visibility: hidden !important;
	display: none !important;
	margin: 0;
	padding: 0;
}