/* Start of CMSMS style sheet 'Layout' */
/* 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;
       }

/* End of 'Layout' */

