
/* A CSS Framework by Mike Stenhouse of Content with Style, adapted to CMSMS by Daniel Westergren */

/* clearing */
	.stretch,
	.clear {
		clear:both; 
		height:1px; 
		margin:0; 
		padding:0; 
		font-size: 15px;
		line-height: 1px;
	}
	.clearfix:after {
		content: "."; 
		display: block; 
		height: 0; 
		clear: both; 
		visibility: hidden;
	}
	.menu_horiz:after {
		content: "."; 
		display: block; 
		height: 0; 
		clear: both; 
		visibility: hidden;
	}
	* html>body .clearfix {
		display: inline-block; 
		width: 100%;
	}
	* html>body .menu_horiz{
		display: inline-block; 
		width: 100%;
	}
	
	* html .clearfix {
		/* Hides from IE-mac \*/
		height: 1%;
		/* End hide from IE-mac */
	}
	* html .menu_horiz{
		/* Hides from IE-mac \*/
		height: 1%;
		/* End hide from IE-mac */
	}
/* end clearing */


/* replace */
	.replace {
		display:block;
		
		background-repeat: no-repeat;
		background-position: left top;
		background-color:transparent;
	}
	/* tidy these up */
	.replace * {
		text-indent: -10000px;
		display:block;
		
		background-repeat: no-repeat;
		background-position: left top;
		background-color:transparent;
	}
	.replace a {
		text-indent:0;
	}
	.replace a span {
		text-indent:-10000px;
	}
/* end replace */


/* accessibility */
     span.accesskey {
     	text-decoration:none;
     }
     .accessibility {
     	position: absolute;
     	top: -999em;
     	left: -999em;
     }
/* end accessibility */

/* A CSS Framework by Mike Stenhouse of Content with Style */

/* TYPOGRAPHY */
  body {
    text-align: left;
    font-family: sans-serif;
    font-size: 0.79em;
    line-height: 1.5em;
  }

  div {
  }

  img {
    display: inline;
    border: 0;
  }
	
/* LINKS */
	a,
	a:link 
	a:active, a:visited {
		text-decoration: underline;
	}

	a:hover {
	text-decoration: none;
	}
/* END LINKS */
	
/* HEADINGS */
	h1 {
border: 0px solid #000000;
		font-size: 188%;
	             FONT-WEIGHT: normal; 
		line-height: 1.25em;
		margin: 0 0 0.25em 0;
		padding: 0;
	}
	h2 {
border: 0px solid #000000;
		font-size: 1.5em;
	             FONT-WEIGHT: normal; 
                          line-height: 1.25em;
		margin: 0 0 0.25em 0;
		padding: 0;
                          xPADDING-BOTTOM: 0.17em; 
                          BORDER-BOTTOM: 1px solid #a0a0a0;
	}
	h3 {
		font-size: 1.3em;
	             FONT-WEIGHT: normal; 
		line-height: 1.3em;
		margin: 0 0 0.5em 0;
		padding:0;
                          PADDING-BOTTOM: 0.17em; 
                          BORDER-BOTTOM: #aaa 1px solid
	}
	h4 {
		font-size: 1.2em;
		line-height: 1.3em;
		margin: 0 0 0.25em 0;
		padding: 0;
	}
	h5 {
		font-size: 1.1em;
		line-height: 1.3em;
		margin: 0 0 0.25em 0;
		padding: 0;
	}
	h6 {
		font-size: 1em;
		line-height: 1.3em;
		margin: 0 0 0.25em 0;
		padding: 0;
	}
/* END HEADINGS */

/* TEXT */
	p {
border: 0px solid #000000;
		margin: 0 0 1.5em 0;
		padding: 0;
	}
	blockquote {
		border-left: 10px solid #ddd;
		margin-left: 10px;
	}
	pre {
		font-family: monospace;
		font-size: 1.0em;
	}
	strong, b {
		font-weight: bold;
	}
	em, i {
		font-style:italic;
	}
    code {
        font-family: "Courier New", Courier, monospace;
        font-size: 1em;
        white-space: pre;
    }
/* END TEXT */
	
/* LISTS */
	#main ul {
        line-height:1.4em;
		margin: 0 0 1.5em 0;
		padding: 0;
	}
	#main ul li {
		margin: 0 0 0.25em 30px;
		padding: 0;
	}
	ol {
		font-size: 1.0em;
		line-height: 1.4em;
		margin: 0 0 1.5em 0;
		padding: 0;
	}
	ol li {
		font-size: 1.0em;
		margin: 0 0 0.25em 30px;
		padding: 0;
	}
	dl {
		margin: 0 0 1.5em 0;
		padding: 0;
		line-height: 1.4em;
	}
	dl dt {
		font-weight: bold;
		margin: 0.25em 0 0.25em 0;
		padding: 0;
	}
	dl dd {
		margin: 0 0 0 30px;
		padding: 0;
	}
/* END LISTS */
	
	
/* TABLE */
	table {
        font-size: 1em;
		margin: 0 0 1.5em 0;
        padding: 0;
	}
	table caption {
		font-weight: bold;
		margin: 0 0 0 0;
		padding: 0 0 1.5em 0;
	}
	th {
		font-weight: bold;
		text-align: left;
	}
	td {
		font-size: 1em;
	}
/* END TABLE */	
	
	hr {
                          border-style: solid;
                          border-color: gray;
                          border-width: 1px;
		margin: 0px 0px 4px;
                          padding: 0px;
		xborder-top: 1px solid gray;
		   
	}
	div.hr {
		margin: 0px;
                          padding: 0px;
		xborder-top: 1px solid gray;
	}

	
/* END TYPOGRAPHY */	

/* A CSS Framework by Mike Stenhouse of Content with Style, adapted to CMSMS by Daniel Westergren */

/* FORM ELEMENTS */
	form {
border: 1px solid #a0a0a0;
		margin:5px auto 10px auto;
                          padding: 15px 10px 5px 10px;
                          background-color: #f0f0f0;
	}
	form div,
	form p {
		font-size: 1em;
                          line-height: 1em;
		margin: 0 0 0 0;
		padding: 0;
	}
	#form h4 {
		font-size: 1em;
		font-weight: normal;
		color: red !important;
		line-height: 1em;
		margin: 0 0 0 0;
		margin-left: 12px;
		padding: 0;
		padding-bottom: 4px;
	}
	label {
		font-weight: bold;
	}
	fieldset {
		border: 1px solid #eee;
		padding: 5px 10px;
		margin: 0 0 1.5em 0;
	}
	fieldset legend {
		color: #666;
		font-size: 1.1em;
		font-weight: bold;
		margin: 0 0 0 0px;
		padding: 0;
		background-color: white;
	}
	* html fieldset legend {
		margin: 0 0 10px -10px;
	}
	fieldset ul {
		list-style: none;
		margin: 0 0 1.5em 0;
		padding: 0;
	}
	fieldset ul li {
		list-style: none;
		margin: 0 0 0.5em 0;
		padding: 0;
	}
     
	input, select, textarea {
		margin: 0 0 0.5em 0;
                          width: 100%;
		font-size:1em; 
		font-family: arial, helvetica, verdana, sans-serif;
		padding: 1px;
		margin-top: 1px;
		margin-bottom: 10px;
	}
	
	input, select {
		vertical-align:middle;
	}
	textarea {
		height: 8em;
	}
	input.check {
		border: none;
		width: auto;
		height: auto;
		margin: 0;
	}
	.radio input {
		width: auto;
		height: auto;
		margin-top: 10px;
                          margin-bottom: 10px;
                          margin-left: 8px;
	}
	.check {
		margin-top: 4px;
                          margin-bottom: 16px;
                          margin-left: 2px;
	}
	.check input {
		width: auto;
		height: auto;
                         margin: 0;
	}
	input.file {
		height: auto;
		width: 250px;
	}
	input.readonly {
		background-color: transparent;
		border: none;
	}
	.ffsubmit {
		width: 10em;
	}
	input.button {
		width: 10em;
		border:1px solid black;
		background-color: #ddd;
	}
	input.image {
		border: none;
		width: auto;
		height: auto; 
	}
	
             form div.submit {
		margin: 1em 0;
	}

             form div.submit input {
		height: 2em;
		width: 15em;
	}

/* END FORM ELEMENTS */
		

/* A CSS Framework by Mike Stenhouse of Content with Style, adapted to CMSMS by Daniel Westergren */

/* SITE SPECIFIC LAYOUT */

    body {
        margin: 0;
        padding: 0;
        text-align: center;
    }

    div#page {
        width: 780px;                       /* de inhoud van 'page' is 'content' die op zijn beurt 760 breed is */
        margin: 10px auto auto auto;
        padding: 0;
        text-align: center;
    }
    
    /* IMAGES */

    div#mainimage {
      clear: both;
      border: 1px solid #909090;
      padding:0;
      margin: 0;
    }
    
    div#insertimage1 {    /* for future use */
      clear: both;
      border: none;
      padding:0;
      margin: 5px 0px 5px 0px;
    }

    div#insertimage2 {    /* for future use */
      clear: both;
      border: none;
      padding:0;
      margin: 5px 0px 5px 0px;
    }

    /* END INSERTBOX */

    /* HEADER */

        div#header {
            margin: 0;
            padding: 0;
            height: 50px;
            background-color: #003163;
            background-image: url(images/cx_logo_on_dkblue.gif);            
            background-repeat: no-repeat;
            background-position: 5px 8px;
            text-align: center;
       }

    /* END HEADER */
    
    /* MENU */

       div#menu_vert h1 {
           color: #C0C0C0;
           text-align: right;
           margin-bottom: 30px;
       }

       div#menu_vert {
border: 0px solid #000000;
           float: left;
           width: 140px;
           margin-top: 15px;
           padding-left: 5px;
           padding-right: 10px;
      }

      div#menu_horiz {
           margin-left: 0px;
      }

    /* END MENU */
    
    /* CONTENT */

    /* home main:         | <- 540+5=545 -> |    */
    /* home content2:   | <- 180+5=185 -> |    */

    /* other menu_vert: | <- 140+5+10=155 -> |  */
    /* other content1:   | <- 400+5=405 -> |     */
    /* other content2:   | <- 180+5=185 -> |     */

        div#content {
border: 0px solid #000000;
           width: 760px; 
           margin: auto auto auto 8px;
           text-align: left;
       }

       div#content1 {                   /*content deel van vervolg pagina (met menu links) */
border: 0px solid #000000;
           float: left;
           width: 400px;
           margin: 15px auto auto auto;
           padding: 0px 0px 0px 5px;
       }

       div#content2 {                     /* rechterkolom */
border: 0px solid #000000;
           clear: right;
           float: right;
           font-size: 0.91em;
           line-height: 150%;
           color: #404040;
           width: 180px;
           margin: 15px auto auto auto;
           padding: 0px 5px 0px 0px; /* 5 uit de rechterrand van de de content style */
       }

       div#content2home {                     /* rechterkolom */
border: 0px solid #000000;
           clear: right;
           float: right;
           font-size: 0.91em;
           line-height: 150%;
           color: #404040;
           width: 195px;
           margin: 15px auto auto auto;
           padding: 0px 5px 0px 0px; /* 5 uit de rechterrand van de de content style */
       }

       div#main {                        /* content deel van de home page */
           float: left;
           width: 540px; /* tussen main style en content2 style blijft 'vanzelf' 30px over */
           margin: 15px auto auto auto;
           padding: 0px 0px 0px 5px;  /* 5 uit de linkerrand van de de content style */
       }
       
    /* END CONTENT */

    /* PRODUCT */

       div#productbox h1 {
            font-size: 1.4em;
            color: #404040;
            margin: 0;
            padding: 3px 11px 4px 10px;
            background-color: #FFE75A;
       }

       div#productbox p {
            border-top: 0.5pt solid #FFE75A;
            font-size: 0.91em;
            color: #404040;
            margin: 0;
            padding: 3px 11px 4px 10px;
       }

       div#product1head {
       }

       div#product1 {
           clear: left;
           float: left;
           width: 265px;
           border: 1px solid #d0d0d0;
           background-color: #FFFBEB;
       }

       div#product1foot {
       }

       div#product2head {
       }

       div#product2 {
           clear: right;
           float: right;
           width: 265px;
           border: 1px solid #d0d0d0;
           background-color: #FFFBEB;
       }

       div#product2foot {
       }

       div#product3head {
       }

       div#product3 {
           clear: left;
           float: left;
           margin: 10px auto auto auto;
           width: 265px;
           border: 1px solid #d0d0d0;
           background-color: #FFFBEB;
       }

       div#product3foot {
       }

       div#product4head {
       }

       div#product4 {
           clear: right;
           float: right;
           margin: 10px auto auto auto;
           width: 265px;
           border: 1px solid #d0d0d0;
           background-color: #FFFBEB;
       }

       div#product4foot {
       }

    /* END PRODUCT */

    /* GRAYBOX */

       div#graybox {
           float: left;
           margin: 0;
           padding: 0;
           padding-bottom: 8px;
           width: 540px;
           border: 1px solid #a0a0a0;
           background-color: #c0c0c0;
       }

       div#graybox h1 {
           margin: 0px; 
           padding-top: 0px;
           padding-bottom: 2px;
           color: #FFFFFF;
           font-size: 1.4em;
           border: none;
       }

       div#graybox h2 {
           font-weight: bolder;
           margin: 0px; 
           padding-top: 8px;
           padding-bottom: 0px;
           color: #000000;
           font-size: 1em;
           border: none;
      }

       div#graybox p {
           margin: 0px; 
           margin-bottom: 10px;
           font-size: 0.91em;
           line-height: 1.3em;
           color: #0;
       }

       div#graybox img {
           margin-top: 4px;
           margin-bottom: 4px;
           border: 1px solid #808080;
       }

       div#grayboxhead {
            clear: both;
            height: 10px;
            font-size: 1px;
            background-color: #c0c0c0;
            xbackground-image: url(/images/grayboxhead.gif);            
            xbackground-repeat: no-repeat;
       }

       div#grayboxcol12left {
           float: left;
           width: 361px;
       }

       div#grayboxcol1 {
height: 500px;
           float: left;
           width: 165px;
           padding: 0px 5px 0px 10px; 
           border-right: 1px solid #b8b8b8;
       }

       div#grayboxcol2 {
height: 300px;
           float: right;
           width: 165px;
           padding: 0px 5px 0px 8px; 
           border-left: 1px solid #c8c8c8;
           border-right: 1px solid #b8b8b8;
       }

       div#grayboxcol3 {
height: 300px;
           float: right;
           width: 165px;
           padding: 0px 5px 0px 8px; 
           border-left: 1px solid #c8c8c8;
       }

       div#grayboxfoot {
            xclear: both;
            xheight: 14px;
            xfont-size: 1px;
            xmargin: auto auto 10px auto;
            xbackground-color: #c0c0c0;
            xbackground-image: url(/images/grayboxfoot.gif);            
            xbackground-repeat: no-repeat;
       }

    /* END GRAYBOX */

        /* SUB */

           div#sub {
                
           }

        /* END SUB */
        
    /* END CONTENT */
 
    
    /* FOOTER */

       div#footer {
        clear: both;
        border-top: 2px solid #68A6EC;
        xborder-top: 2px solid #84B5EF;
        border-bottom:  3px solid #003163;
       }

       div#footer a {
           xfont-size: 0.8em;
           color: #ffffff;
       }

       div#footer p {
           font-size: 0.8em;
           margin: 0;
           padding: 5px;
           text-align: center;
       }

       div#aftertext p {
           font-size: 81%;
           line-height: 1.2em;
           color: #a0a0a0;
           padding: 20px 20px 0px 20px;
           text-align: left;
       }

    /* END FOOTER */

/* END LAYOUT */

div.breadcrumbs {
   padding-top: 10px;
   padding-left: 10px;
   text-align: left;
   font-size: 90%;
}

    /* CUSTOMERS EN PARTNERS*/

.customer {
    clear: both;
    height: 80px;
    }  

/*.partner {
    clear: both;
    height: 120px;
    }    */
   
.logo img {
    border: 1px solid #a0a0a0;
    }	 

 .col1 {
border: 0px solid #000000;
    clear: left;
    float: left;
    }

 .col2 {
border: 0px solid #000000;
    float: left;
    color: #000000;
    padding-left: 5px;
    }

 .col3 {
    float: right;
    font-size: 0.87em;
    color: #808080;
    line-height: 1.2em;
    text-align: right;
    } 

 .col4 {
    float: left;
    color: #000000;
    padding-left: 5px;
    }  
              
.customerlink {
    padding-top: 15px;
    }
 .customerlink2 {
    padding-top: 0px;
    }

.partnerlink {
    }
   
    /* END CUSTOMERS EN PARTNERS*/

   
    /* END PARTNERS */

          
       div#route {
           text-align: center;
           border: 1px solid #c8c8c8;
           margin-left: 50px;
           margin-right: 50px;
       }


        .promonews1 a {
            font-size: 1.1em;
            font-weight: bold;
            color: #FFE75A;
       }

        .promonews1 a:visited {
            font-size: 1.1em;
            font-weight: bold;
            color: #FFE75A;
       }

        .promonews1 p {
            margin: 0;
            padding: 0px 4px 5px 4px;
            font-weight: bold;
            font-size: 1.2em;
            font-variant: small-caps;
            color: #FDEDF0;
       }

       .promonews1 {
            margin: 0;
            margin-bottom: 10px;
            padding: 0;
            padding-bottom: 5px;
            width: 193px;
            background-color:  #D21831;
            text-align: center;
            border: 1px solid #909090;
       }

        .news a {
            font-weight: bolder;
       }

        .news a:visited {
            font-weight: bolder;
       }

        .news {
            border: 1px solid #b0b0b0;
            margin-bottom: 10px;
       }

        .newshead h1 {
            margin: 0;
            padding:0;
            font-size: 1.1em;
            font-weight: bolder;
            color: #ffffff;
       }

        .newshead {
            margin: 0;
            padding: 4px 0px 4px 12px;
            background-color:  #1578AA; /* #FFE75A; */
            xbackground-image: url(images/newshead.gif);            
            xbackground-repeat: no-repeat;
            xbackground-position: left top;
       }

        .newsfoot {
            xmargin-bottom: 4px;
            xpadding: 0;
            xheight: 0px;
            xbackground-image: url(images/newsfoot.gif);            
            xbackground-repeat: no-repeat;
            xbackground-position: left top;
       }

       .newsbox {
            margin: 0;
            padding: 5px 10px 5px 10px;
            width: 158px;
            xborder-left: 1px solid #B5B5BD;
            xborder-right: 1px solid #B5B5BD;
       }

       .newsboxhome {
            margin: 0;
            padding: 5px 10px 5px 10px;
            width: 175px;
            xborder-left: 1px solid #B5B5BD;
            xborder-right: 1px solid #B5B5BD;
       }

.NewsSummaryTitle {
  font-size: 100%;
  font-weight: bolder;
  line-height: 1.3em;
  margin: 0 0 0.25em 0;
  padding-top: 6px;
  PADDING-BOTTOM: 0.17em; 
  BORDER-BOTTOM: #aaa 1px solid
}

.NewsSummaryLink {
  font-size: 100%;
  font-weight: normal;
  line-height: 130%;
  padding: 2px 0px 0px 0px;
 }

.NewsSummaryCategory {
  font-style: italic;
 }

.NewsSummaryPostdate {
  font-size: 90%;
  font-weight: bold;
 }

.NewsSummarySummary, .NewsSummaryContent {
  padding-bottom: 2px;
 }

#NewsPostDetailDate {
  font-style: italic;
  }

#NewsPostDetailSummary {
  xfont-size: 1.06em;
  font-weight: bolder;
  xfont-style: italic;
  margin-bottom: 10px;
  }

#NewsPostDetailContent {
  }



/* A CSS Framework by Mike Stenhouse of Content with Style, adapted to CMSMS by Daniel Westergren */

/* MENU_VERT */

#menu_vert {         /* zie layout stylesheet */
  }

#menu_vert ul {
  width: 100%; /* Width of Menu Items */
  font-size: 93%;
  margin: 10px auto auto auto;
  padding: 0px;
  list-style: none;
  border-bottom: 1px solid #a0a0a0;
  }

#menu_vert li a {
  display: block;
  color: #404040;
  text-decoration: none;
  border-top: 1px solid #a0a0a0;
  background-color: #ececec;
  padding: 4px 8px;
  margin: 0px;
  }

#menu_vert lu a:hover
 {
	background-color: #D5D3D3;
}

#menu_vert lu a:active
 {
	background-color: #D5D3D3;
}

#menu_vert lu a:current
 {
	background-color: #D5D3D3;
}

/* Fix IE. Hide from IE Mac \*/
* html #menu_vert li { float: left; height: 1%; }
* html #menu_vert li a { height: 1%; }
/* End */

    div#menu_vert ul ul  {
      border: none;
    }

    div#menu_vert ul ul li a, 
    div#menu_vert ul ul li a:link, 
    div#menu_vert ul ul li a:visited  {
    }

    div#menu_vert ul ul ul i a, 
    div#menu_vert ul ul ul li a:link, 
    div#menu_vert ul ul ul li a:visited  {
    }
    div#menu_vert ul ul ul  {
    }

#menu_vert ul li a { 
  } /* Sub Menu Styles */

/* fixed image flicker by adding .cssmenu-vertical ul */

.current, .menuactive
{
	xlist-style-type: square;
	xdisplay: inline;
	background-color: #D5D3D3;
		font-weight: bold;
}

/* END MENU_VERT */


















/* MENU_HORIZ */

    * html div#menu_horiz {
        /* hide ie/mac \*/
        height: 1%;
        /* end hide */
    }
    div#menu_horiz {
       background-color: #1578AA;
       xborder-top: 2px solid #84B5EF;
       xborder-bottom: 2px solid #8C0000;
    }
    div#menu_horiz ul {
        text-align: right;
        height: 29px;
        margin: 0;
        padding: 0px 0px 0px 160px;
        list-style: none;
        border-top: 1px solid #84B5EF;
        border-bottom:  1px solid #84B5EF;
    }
    div#menu_horiz li {
        float: left;
        display: inline;
        list-style: none;
        margin: 0 ;
        xborder-right: 1px solid #C0C0C0;
    }
    div#menu_horiz li a {
        font-size: 110%;
        font-weight: 800;
        color: #FFFFFF;
        border-right: none;
    }

    div#menu_horiz a,
    div#menu_horiz a:link,
    div#menu_horiz a:active,
    div#menu_horiz a:visited {
        display: inline-block;
        padding: 5px 10px 5px 10px; 

        /* hide from ie/mac \*/
        display: block;
        /* end hide */

        text-decoration: none;
        margin: 0;
        xcolor: #F0F0F0;
        background-color: #1578AA;
    }

    #menu_horiz li a:hover {
        background-color: #218DC5;
    }

    div#menu_horiz .active {
        display: inline-block;

        /* hide from ie/mac \*/
        display: block;
        /* end hide */
        
        background-color: #1578AA;
    }

    div#menu_horiz .current a,
    div#menu_horiz .current a:link,
    div#menu_horiz .current a:active,
    div#menu_horiz .current a:visited,
    div#menu_horiz .active a,
    div#menu_horiz .active a:link,
    div#menu_horiz .active a:active,
    div#menu_horiz .active a:visited
    {
	background-color: #1578AA;
    }

    div#menu_horiz .current a:hover,
    div#menu_horiz .active a:hover 
    {
	background-color: #218DC5;
    }

/* END MENU_HORIZ */






/* Layout sections */
	body {
		background: #F2F2F2;
		color: black;
		}
		
	div#page {
		border: 1px solid #C4C4C4;
		background: #fff;
	    }
		
	div#header {
		color: #fff;
		}
		
	div#footer {
		color: #fff;
		background-color: #1578AA;
		}
		
/* Links */		
	a,
	a:link 
	a:active, a:visited {
		color: #1578AA;
                          text-decoration: none;
	}

             a:hover {
                          text-decoration: underline;
             }
        
 


/* Headings */	
	h1, h2, h3, h4, h5, h6 {
		color: #000;
	}
