/* Define Global Workspace */

body {
    border:         none;
    width:          100%;
    height:         100%;
    margin:         0;
    padding:        0;
    font-size:      9pt;
    font-family:    sans-serif;
    line-height:    1.5;
}

/* Global Positioning */

#headleft, #headright, #head, #topmenu, #leftmenu, #footer, #right {
    position:   absolute;
}
#headleft, #headright {
    width:      50%;
    top:        0;
}
#head {
    top:        56px;
    width:      100%;
}
#headright {
    right:      0;
    height:     56px;
}
#head {
    height:     100px;
}
#headleft {
    left:       0;
    height:     156px;
}
#topmenu {
    top:        156px;
    height:     44px;
    width:      95%;
    left:       2.5%;
}
#topmenu table {
    width:      100%;
}
#topmenu table tr td {
    text-align: right;
 /* ~ 100/number_of_elements */
    width:      16.5%;
}
#topmenu #tophome {
    text-align: left;
}
#leftmenu, #right {
    top:        184px;
    bottom:     92px;
}
#leftmenu {
    width:      21%;
}
#right {
    right:      0;
    width:      21%;
    padding:    0.5em;
    overflow:   auto;
}
#kolommen {
    left:       22.5%;
    top:        184px;
    bottom:     92px;
    width:      77%;

 /* otherwise overflow does not work */
    overflow:   auto;
    position:   absolute;
}
#kolommen ul {
    padding-left: 1.1em;
}
.columns #kolommen {
    column-count:       3;
    -moz-column-count:  3;
    -webkit-column-count:   3;
    column-gap:     0px;
    -moz-column-gap:    0px;
    -webkit-column-gap: 0px;
}
.columns2 #kolommen {
    column-count:       2;
    -moz-column-count:  2;
    -webkit-column-count:   2;
    column-gap:     0px;
    -moz-column-gap:    0px;
    -webkit-column-gap: 0px;
    width:      54.5%;
}
#footer {
    bottom:     0;
    height:     76px;
    width:      98%;
    left:       1%;
}
#footer .line {
    width:          100%;
    margin-top:     4px;
    height:         2px;
    background-color: #7399e6;
    margin-bottom:  0.5%;
}

#footer .line hr {
    height: 2px;
    width: 0%;
    border-width:0px;
}
#footer table {
    width:      100%;
    border-spacing: 0;
}
#footer table tr td {
    width: 15.5;
}
#footer table tr td#sftext {
    width:      9%;
}
#footer table tr td#sflogo {
    width:      11%;
    text-align: right;
}
#footer table tr td#margn {
    width: 2%;
}

/* Logo's, Backgrounds, Captions */

#head {
    text-align:     center;
    line-height:    1;
    background-repeat:  no-repeat;
    background-position:    50%;
}
#head p {
    position:       absolute;
    bottom:         -3%;
    left:           21%;
    color:          white;
    font-size:      300%;
    font-weight:    bold;
    text-transform: uppercase;
}
#headleft {
    background-image:   url(/files/images/Boog-Staart-161x160.png);
    background-repeat:  no-repeat;
    background-position:    15% 0%;
}
#headleft a {
    color: #C5822B;
    font-weight:    bold;
    padding: 5px;
}
#headright {
    background-image:     url(/files/images/meresco-logo-small.png);
    background-repeat:    no-repeat;
    background-position: 95% 50%;
}
#leftmenu {
    border-right-style: solid;
    border-right-width: 0.5em;
}
#right {
    border-left-style: solid;
    border-left-width: 0.5em;
}
#leftmenu a {
    color:          white;
    text-transform:     uppercase;
}
#leftmenu .submenulist a {
    color:              white;
}

/* News styles */
#right .blogitem .date {
    text-align: right;
    font-size:  80%;
    color:      grey;
}
#right .blogitem .title {
    /**/
}

/* Top-menu items */
#topmenu a {
    font-size: 120%;
}
.introduction h3,
.introduction h4 {
    color:          #C5822B;
}
.introduction #leftmenu {
    border-right-color: #C5822B;
}
.introduction #right {
    border-left-color: #C5822B;
}
.introduction #footer .line {
    background-color:   #C5822B;
}
.introduction #head {
    background-image:   url(/files/images/cq2_bg_image_top_home-slice_1.jpg);
}
.documentation h3,
.documentation h4 {
    color:          #0059AC;
}
.documentation #leftmenu {
    border-right-color: #0059AC;
}
.documentation #footer .line {
    background-color:   #0059AC;
}
.documentation #head {
    background-image:   url(/files/images/cq2_bg_image_top_home-slice_1.jpg);
}
.community h3,
.community h4 {
    color:          #0059AC;
}
.community #leftmenu {
    border-right-color: #0059AC;
}
.community #footer .line {
    background-color:   #0059AC;
}
.community #head {
    background-image:   url(/files/images/cq2_bg_image_top_home-slice_1.jpg);
}
.research h3,
.research h4 {
    color:          #0059AC;
}
.research #leftmenu {
    border-right-color: #0059AC;
}
.research #footer .line {
    background-color:   #0059AC;
}
.research #head {
    background-image:   url(/files/images/cq2_bg_image_top_home-slice_1.jpg);
}
.contact h3,
.contact h4 {
    color:          #0059AC;
}
.contact #leftmenu {
    border-right-color: #0059AC;
}
.contact #footer .line {
    background-color:   #0059AC;
}
.contact #head {
    background-image:   url(/files/images/cq2_bg_image_top_home-slice_1.jpg);
}


/* Left-menu items */
/*
  Color order should remain the same:
    1st item color: #2B6E3C;
    2st item color: #A57535;
    3st item color: #4EAA99;
    4st item color: #4F4930;
    5st item color: #00311B;
    6st item color: #C6C23E;
*/
#leftmenu p {
    margin:         0 0.8em 0.8em 0.8em;
    width:          84%;
    padding:        0.5em;
}
#leftmenu .submenulist {
    margin-bottom:  0.8em;
}
#leftmenu p.has_submenu,
#leftmenu p.submenu {
    margin-bottom:         0;
}
#leftmenu .submenu {
   padding-top: 0;
   padding-bottom: 0;
}
#leftmenu .submenu a {
      font-size: 90%;
}

#leftmenu .meresco_users {
    background-color:   #2B6E3C;
}
#leftmenu .submenulist .meresco_users {
    background-color: #3FA057;
}
.meresco_users h3,
.meresco_users h4 {
    color:          #2B6E3C;
}
.meresco_users #leftmenu {
    border-right-color: #2B6E3C;
}
.meresco_users #footer .line {
    background-color:   #2B6E3C;
}
.meresco_users #head {
    background-image:   url(/files/images/cq2_bg_image_top_home-slice_2.jpg);
}
#leftmenu .meresco_applications {
    background-color:   #4F4930;
}
#leftmenu .submenulist .meresco_applications {
    background-color: #7C654A;
}
.meresco_applications h3,
.meresco_applications h4 {
    color:          #4F4930;
}
.meresco_applications #leftmenu {
    border-right-color: #4F4930;
}
.meresco_applications #footer .line {
    background-color:   #4F4930;
}
.meresco_applications #head {
    background-image:   url(/files/images/cq2_bg_image_top_home-slice_6.jpg);
}
#leftmenu .meresco_technologies {
    background-color:   #4EAA99;
}
#leftmenu .submenulist .meresco_technologies {
    background-color: #5CC8B4;
}
.meresco_technologies h3,
.meresco_technologies h4 {
    color:          #4EAA99;
}
.meresco_technologies #leftmenu {
    border-right-color: #4EAA99;
}
.meresco_technologies #footer .line {
    background-color:   #4EAA99;
}
.meresco_technologies #head {
    background-image:   url(/files/images/cq2_bg_image_top_home-slice_7.jpg);
}
#leftmenu .meresco_services {
    background-color:   #A57535;
}
#leftmenu .submenulist .meresco_services {
    background-color: #CC9042;
}
.meresco_services h3,
.meresco_services h4 {
    color:          #A57535;
}
.meresco_services #leftmenu {
    border-right-color: #A57535;
}
.meresco_services #footer .line {
    background-color:   #A57535;
}
.meresco_services #head {
    background-image:   url(/files/images/cq2_bg_image_top_home-slice_8.jpg);
}


/* Text Style and Flow Settings */
a {
    text-decoration:    none;
}
img {
    border:         none;
}
p, h3, h4, img, li {
    margin-left:        2%;
    margin-right:       2%;
    margin-bottom:      0em;
}
p, li {
    margin-top:     0.3em;
}
h3, h4 {
    margin-top:     1em;
    line-height:        1.1;
    font-variant:       small-caps;
    column-break-after: avoid;
    -moz-column-break-after: avoid;
    -webkit-column-break-after: avoid;
}

h4 {
/*     font-weight: normal; */
}


.editpage form table {
    border-spacing: 0;
}
.editpage .fieldheading {
    font-weight: bold;
    vertical-align: top;
}
.editpage  a {
    color: #C5822B;
    font-weight: bold;
}

.quote {
    font-style:     italic;
}

#topmenu a, #leftmenu a, #footer .line a {
    text-decoration:    none;
}
#topmenu a:after, #leftmenu a:after, #footer .line a:after {
    content: '>';
}
#topmenu a:before, #leftmenu a:before, #footer .line a:before {
    content: '<';
}
#topmenu a:hover:after, #leftmenu a:hover:after, #footer .line a:hover:after {
    content: '<';
}
#topmenu a:hover:before, #leftmenu a:hover:before, #footer .line a:hover:before {
    content: '>';
}
#topmenu {
    color:      #626162;
    font-size:  80%;
}

/* picturized headings */

#kolommen p.visualheading {
    font-weight: bolder;
}
#kolommen p.visualheading img {
    vertical-align: baseline;
    padding: 0;
    margin: 0;
    margin-right: 2%;
}
#kolommen p.visualheading a:link {
    color: black;
}
#kolommen p.visualheading a:visited {
    color: black;
}
#kolommen p.visualheading a:active {
    color: black;
}
#kolommen p.visualheading a:hover {
    color: black;
}
#kolommen .visualitem {
    clear: left;
    padding-top: 0.3em;
    padding-bottom: 2em;
}

/* special pages */
.welcome #head {
    background-image:   url(/files/images/cq2_bg_image_top_home-slice_2.jpg);
}
.welcome #kolommen table {
    width: 90%;
    margin-top: 2em;
    margin-bottom: 2em;
    margin-left: auto;
    margin-right: auto;
    border-spacing: 0.3em;
}
.welcome #kolommen table th {
    text-align: left;
}
.welcome #kolommen table .slogan,
.downloadlink {
    text-align: center;
}
.welcome #kolommen .seefulllist,
.downloadlink {
    text-align: center;
    font-weight: bold;
    font-size: 125%;
    margin-top: 1em;
    margin-bottom: 1em;
}


/* login */
#loginbox{
    background-repeat: no-repeat;
    background-image: url(/files/images/meresco-logo-small.png);
    background-position: 50%  10px;
    text-align: left;
    margin-left: auto;
    margin-right: auto;
    margin-top: 250px;
    width: 500px;
    padding: 10px;
}
#loginbox table{
    width: 100%;
}
#loginbox input{
    width: 100%;
}
#loginbox .title {
    margin-top: 30px;
}

/* Dummy */
#unknown {}