/* Begin default CSS */
html, body {
height: 100%;
}
body {
background-color: #343434;
margin: 0px;
font-family: "Trebuchet MS", Geneva, Arial, Helvetica, sans-serif
}
img {
border: 0px;
}
p{
margin: 0;
}
img{
border: none;
}
a{
text-decoration: none;
color: #00FF00;
font-weight: bold;
}
a:focus
{
outline: none;
}
ul
{
margin: 0;
padding: 0;
}
/* Einde default CSS */
#siteContainer
{
background-image: url(../images/siteContainer_bg.gif);
background-repeat: repeat-x;
background-position: top;
background-color: #ffffff;
}
#siteContainer #wrapper
{
height: 100%;
min-height: 100%;
height: auto !important;
width: 968px;
margin: 0 auto -250px; /* the bottom margin is the negative value of the footer's height */
}
#footer #wrapper
{
margin-left: auto;
margin-right: auto;
width: 968px;
padding: 5px 0 0 0;
}
/* Header */
#header
{
height: 52px;
margin: 0 4px;
}
#header .servoyLogo
{
float: left;
padding: 16px 0 0 0;
}
#header #socialmediaIcons {
float:right;
padding-top:16px;
}
#header #socialmediaIcons img {
float:right;
}
/* NewBanner */
#newbanner
{
height: 106px;
margin: 0 4px;
}
/* Menu */
#Menu
{
height: 40px;
margin: 0 4px;
background-image: url(../images/topMenu_bg.gif);
background-repeat: no-repeat;
background-position: center;
}
#Menu ul#menu3Root
{
float: left;
position: relative;
z-index: 200;
margin: 0 10px;
list-style: none;
}
#Menu ul#menu3Root li
{
display: block;
float: left;
position: relative;
}
#Menu ul#menu3Root li a
{
color: #edeeee;
display: block;
float: left;
font-size: 0.9em;
font-weight: bold;
height: 26px;
padding: 10px 10px 4px 10px;
text-decoration: none;
background-image: url(../images/topMenu_pipe.gif);
background-position: right;
background-repeat: no-repeat;
}
#Menu ul#menu3Root li a:hover
{
background-color:#f7f7f7;
color: #383838;
}
/* Dropdown menu 1 */
#Menu ul#menu3Root li ul
{
display: block;
float: none;
height: auto;
left: 0;
margin: 40px 0 0 0;
padding: 0;
position: absolute;
visibility: hidden;
z-index: 1000;
background-image: none;
border-left: 1px #c8c8c8 solid;
border-right: 1px #c8c8c8 solid;
}
#Menu ul#menu3Root li ul li
{
background-image:none;
display: block;
float: none;
height: auto;
margin: 0;
padding: 0;
background-color: #f6f6f6;
}
#Menu ul#menu3Root li ul li a
{
display: block;
float: none;
padding: 4px 5px;
color: #383838;
font-size: 11px;
height: auto;
width:180px;
background-image: none;
}
#Menu ul#menu3Root li ul li a:hover
{
background-color: #f17701;
color:#fff;
width:180px;
display: block;
height: auto;
}
/* Dropdown menu 2 */
#Menu ul#menu3Root li ul li ul
{
float: left;
margin-top: 0px;
margin-left: 191px;
top: 0px;
padding: 0;
position: absolute;
visibility: hidden;
z-index: 300;
border: none;
}
#Menu ul#menu3Root li ul li ul li
{
background-image: none;
display: block;
float: none;
height: auto;
margin: 0;
padding: 0;
border: none;
background-image: url(../images/topMenu_sub_sub_bg_normal.gif);
background-position: top;
background-repeat: repeat-x;
background-color: #f17701;
}
#Menu ul#menu3Root li ul li ul li a
{
border: none;
display: block;
float: none;
color: #FFFFFF;
width: 200px;
height: auto;
}
#Menu ul#menu3Root li ul li ul li a:hover
{
border: none;
height: auto;
width: 200px;
display: block;
background-color: #eb6200;
background-image: none;
}
/* Header image */
#headerImage
{
height: 240px;
padding: 10px 0 10px 0;
margin: 0 4px;
position: relative;
}
/* Menu options */
#options
{
float: right;
width: 255px;
padding-right: 10px
}
#options .search
{
width: 120px;
height: 22px;
padding: 10px 0 0 0;
float: left;
}
#options .search input.field
{
border: none;
background-image: url(../images/search_input_bg.gif);
background-position: left;
background-repeat: no-repeat;
width: 93px;
padding: 2px 0 0 5px;
height: 18px;
color: #c0c0c0;
font-size: 11px;
font-family: "Trebuchet MS", arial, verdana;
float: left;
}
#options .search .button
{
border: none;
background-image: url(../images/search_button_bg.gif);
background-repeat: no-repeat;
background-position: bottom;
width: 21px;
height: 20px;
padding: 2px 0 0 0;
cursor: pointer;
float: left;
}
#options .language
{
float: left;
padding: 10px 0 0 10px;
}
#options option.dutch
{
background-image: url(../images/flag_dutch.gif);
background-repeat: no-repeat;
background-position: 5px;
padding: 2px 0 0 25px;
color: #c0c0c0;
font-size: 11px;
font-family: "Trebuchet MS", arial, verdana;
}
#options option.english
{
background-image: url(../images/flag_english.gif);
background-repeat: no-repeat;
background-position: 5px;
padding: 2px 0 0 25px;
color: #c0c0c0;
font-size: 11px;
font-family: "Trebuchet MS", arial, verdana;
}
#options .select
{
position: absolute;
width: 95px;
padding: 2px 0 0 25px;
height: 18px;
color: #c0c0c0;
font-size: 11px;
font-family: "Trebuchet MS", arial, verdana;
overflow: hidden;
background-image: url(../images/language_input_bg.gif);
background-repeat: no-repeat;
}
/* Content */
#contentContainer
{
overflow: hidden;
padding: 0 0 10px 0;
}
#contentContainer #menuSmall {
float:left;
width:200px;
color:#5b5b5b;
padding: 5px 10px 20px 0;
}
#contentContainer #menuSmall .menuSmalltop {
background-image: url(../images/menuSmallTop.gif);
background-repeat: no-repeat;
width: 200px;
height: 16px;
}
#contentContainer #menuSmall .menuSmallbottom {
background-image: url(../images/menuSmallBtm.gif);
background-repeat: no-repeat;
width: 200px;
height: 16px;
}
#contentContainer #menuSmall .menuSmallmiddle {
height:auto;
background-image: url(../images/menuSmallSides.gif);
background-repeat: repeat-y;
}
#contentContainer #menuSmall a {
cursor:pointer;
cursor:hand;
color:#5b5b5b;
}
#contentContainer #menuSmall a:hover {
text-decoration:underline;
}
#contentContainer #menuSmall ul {
padding: 0 0 0 10px;
width:180px;
font-size:11px;
list-style: none;
overflow: hidden;
}
#contentContainer #menuSmall ul li {
float:left;
}
#contentContainer #menuSmall ul li a {
font-weight:normal;
background-image: url(../images/menuSmallArrow.png);
background-repeat: no-repeat;
background-position: 4px;
padding: 7px 0 7px 15px;
display: block;
width: 165px;
font-weight: normal;
}
#contentContainer #menuSmall ul li.active a {
background-image: url(../images/menuSmallArrowDown.png);
background-repeat: no-repeat;
font-weight: normal;
}
#contentContainer #menuSmall ul li ul{
float:left;
width: 180px;
background-repeat:repeat;
margin: 0;
padding: 0;
}
#contentContainer #menuSmall ul li ul li{
float:left;
font-weight:normal;
height:auto;
list-style-image:inherit;
background-image: url(../images/menuSmall_sub_sub_bg.gif);
background-repeat: repeat-x;
background-position: top;
background-color: #f7f7f7;
}
#contentContainer #menuSmall ul li ul li a, #contentContainer #menuSmall ul li.active ul li a {
font-weight: normal;
background-image: url(../images/menuSmallArrow.png);
background-repeat: no-repeat;
background-position: 17px;
padding: 7px 0 7px 30px;
width: 150px;
}
#contentContainer #menuSmall ul li ul li ul li
{
background-image: none;
padding: 7px 0 7px 35px;
width: 145px;
}
#contentContainer #menuSmall ul li ul li.active ul li a,
#contentContainer #menuSmall ul li.active ul li ul li a,
#contentContainer #menuSmall ul li ul li ul li a
{
font-weight: normal;
background-image: url(../images/menuSmallArrow.png);
background-repeat: no-repeat;
background-position: 0px;
padding: 0 0 0 10px;
}
#contentContainer #columnSmall {
position: relative;
z-index: 5;
float: left;
width: 560px;
height: auto;
min-height: 500px;
background-image: url(../images/contentBlock_BtmBg.jpg);
background-repeat: repeat-x;
background-position: left bottom;
margin-top:10px;
padding:0px 15px 50px 15px;
color:#5b5b5b;
}
#contentContainer #column {
position:relative;
z-index: 5;
float:left;
width:765px;
height:auto;
min-height:500px;
background-image:url(../images/contentBlock_BtmBg.jpg);
background-repeat:repeat-x;
background-position:left bottom;
margin-top:10px;
padding:0px 15px 50px 15px;
color:#5b5b5b;
}
#contentContainer #columnSmall ul, #contentContainer #column ul{
padding: 0;
margin: 0;
list-style: none;
}
#contentContainer #columnSmall ul li, #contentContainer #column ul li{
background-image: url(../images/menuSmallArrow.png);
background-repeat: no-repeat;
background-position: left 5px;
padding: 0 0 0 10px;
}
#contentContainer #column hr,
#contentContainer #columnSmall hr{
float:left;
clear:both;
height:1px;
border:0px;
background-image:url(../images/hr.jpg);
background-repeat:no-repeat;
width:100%;
margin:0px;
padding:0px;
color: #EAEAEA;
}
#contentContainer #column h1,
#contentContainer #columnSmall h1 {
clear:both;
height:auto;
border:0px;
width:100%;
font-size:20px;
margin:0px;
padding:20px 0px 19px 0px;
}
#contentContainer #column h2,
#contentContainer #column span,
#contentContainer #columnSmall h2,
#contentContainer #columnSmall span {
float:left;
clear:both;
width:100%;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
}
#contentContainer #column h2,
#contentContainer #columnSmall h2{
font-size:14px;
text-transform:uppercase;
padding:28px 0px 8px 0px;
margin:0px;
}
#contentContainer #column span,
#contentContainer #columnSmall span{
font-size:12px;
padding-top:10px;
}
#contentContainer #column span a,
#contentContainer #columnSmall span a {
color:#eb6200;
}
#contentContainer #column span h1 a,
#contentContainer #columnSmall span h1 a {
color:#5B5B5B;
}
#contentContainer #column span a:hover,
#contentContainer #columnSmall span a:hover {
text-decoration:underline;
}
#contentContainer #column span h1 a:hover,
#contentContainer #columnSmall span h1 a:hover {
text-decoration:none;
}
#contentContainer #column .inleiding,
#contentContainer #columnSmall .inleiding{
font-size:12px;
padding-top:0px;
}
#contentContainer #column .top,
#contentContainer #columnSmall .top{
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 403px;
background-image: url(../images/contentBlock_TopBg.png);
background-repeat: no-repeat;
background-position: center top;
z-index:-1;
}
#contentContainer #column .fade,
#contentContainer #columnSmall fade{
position:absolute;
bottom:-5px;
left:0px;
padding-left:10px;
width:785px;
height:5px;
background-image:url(../images/contentBlock_fade.jpg);
background-repeat:repeat-x;
background-position:center top;
}
#contentContainer #column .btm,
#contentContainer #columnSmall .btm{
position:absolute;
bottom:-5px;
left:0px;
width:785px;
height:5px;
background-image:url(../images/contentBlock_fade.jpg);
background-repeat:repeat-x;
background-position:center top;
z-index:-1;
}
#contentContainer #column .topLeft,
#contentContainer #column .topRight,
#contentContainer #column .btmLeft,
#contentContainer #column .btmRight,
#contentContainer #columnSmall .topLeft,
#contentContainer #columnSmall .topRight,
#contentContainer #columnSmall .btmLeft,
#contentContainer #columnSmall .btmRight{
position:absolute;
width:5px;
height:260px;
background-image:url(../images/contentBlock_Sides.png);
background-repeat:no-repeat;
}
#contentContainer #column .topLeft,
#contentContainer #columnSmall .topLeft{
top:0px;
left:0px;
background-position:0px 0px;
}
#contentContainer #column .topRight,
#contentContainer #columnSmall .topRight{
top:0px;
right:0px;
background-position:-5px 0px;
}
#contentContainer #column .btmLeft,
#contentContainer #columnSmall .btmLeft{
bottom:-1px;
left:0px;
background-position:-10px 0px;
}
#contentContainer #column .btmRight,
#contentContainer #columnSmall .btmRight{
bottom:-1px;
right:0px;
background-position:-15px 0px;
}
#contentContainer #rightContainer {
float:right;
width:160px;
}
#contentContainer #rightContainer .blurb {
float:left;
padding:0px 0px 0px 5px;
}
.tabContainer
{
height: 250px;
width: 449px;
float: left;
padding: 0 0 0 4px;
background-image: url(../images/tabContainer_bg.gif);
background-repeat: no-repeat;
background-position: 4px 10px;
margin: 0;
}
.tabMenu
{
width: 381px;
height: 30px;
background-image: url(../images/tabMenu_bg.gif);
background-repeat: no-repeat;
background-position: left 10px;
margin: 0 auto;
padding: 10px 0 0 0;
}
.tabMenu ul
{
list-style: none;
padding: 0 4px;
}
.tabMenu ul li
{
float: left;
}
.tabMenu ul li a
{
float:left;
color: #FFFFFF;
text-decoration: none;
font-weight: bold;
font-size: 0.7em;
display: block;
height: 22px;
padding: 5px 9px 0 9px;
background-image: url(../images/tabMenu_pipe.gif);
background-repeat: no-repeat;
background-position: right;
}
.tabMenu ul li a:hover, .tabMenu ul li.lastChild a:hover, .tabs .current, ul.tabs li.lastChild .current
{
height: 30px;
background-image: url(../images/tabMenu_left_bg.gif);
background-position: left;
background-repeat: no-repeat;
background-color: #FFFFFF;
float:left;
color: #444c4d;
text-decoration: none;
font-weight: bold;
font-size: 0.7em;
display: block;
height: 30px;
padding: 0 0 0 9px;
}
.tabMenu ul li a:hover span, .tabs .current span
{
height: 25px;
display: block;
background-image: url(../images/tabMenu_right_bg.gif);
background-position: right;
background-repeat: no-repeat;
padding: 5px 9px 0 0;
}
.tabMenu ul li.lastChild a
{
background-image: none;
}
.panes
{
}
/* tab pane styling */
.panes div {
display:none;
height: 164px;
width: 390px;
margin: 0 auto;
background-image: url(../images/tabContent_bg.gif);
background-position: top;
background-repeat: no-repeat;
padding: 12px 20px 17px 20px;
overflow: hidden;
}
ul.tabList
{
padding: 0 10px 0 0;
display: block;
line-height: 1.3em;
}
ul.tabList li
{
text-decoration: none;
list-style: none;
margin:0;
padding:0;
}
ul.tabList li a
{
background-image: url(../images/tabContent_bullet.gif);
background-repeat: no-repeat;
background-position: left 3px;
padding: 0 0 0 15px;
color: #000000;
font-size: 0.7em;
font-weight: normal;
display: block;
float: left;
}
ul.tabList li a:hover
{
text-decoration: underline;
}
.blurbWrapper
{
height: 250px;
width: 343px;
float: left;
padding: 0 13px 0 0;
}
.blurb
{
width: 150px;
height: 115px;
float: left;
padding: 0 0 10px 18px;
}
.blurbBig
{
width: 159px;
float: left;
}
.blurbCustomers {
float:left;
width:159px;
height:160px;
padding-top:86px;
background-image:url(../images/blurbs/customers.jpg);
background-repeat:no-repeat;
text-align:center;
}
/* Footer */
#footerPush
{
height: 255px;
}
#footerTop
{
height: 4px;
background-image: url(../images/footerTop_bg.gif);
background-repeat: repeat-x;
background-position: bottom;
}
#footer
{
height: 225px;
background-image: url(../images/footer_bg.gif);
background-repeat: repeat-x;
background-position: bottom;
background-color:#e6e6e6;
z-index:1;
}
#copyright, #copyright
a
{
padding: 5px 0 5px 0;
background-image: url(../images/copyright.gif);
background-repeat: repeat-x;
background-position: bottom;
text-align: center;
color: #a3a3a3;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 11px;
background-color: #343434;
}
#copyright
a
{
text-decoration: underline;
}
#footer #events, #footer #news, #footer #succesStories {
float:left;
height:auto;
}
#footer #events {
width: 240px;
}
#footer #succesStories .block{
width: 240px;
}
#footer #news .block{
width: 450px;
}
#footer #events .block, #footer #news .block, #footer #succesStories .block {
position:relative;
border: 1px solid #ccc;
height:auto;
min-height:126px;
background-color:#FFF;
float:left;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
font-size:12px;
color:#5b5b5b;
}
#footer #events .block {
width: 240px;
}
#footer #events .block ul {
width: 240px;
list-style:none;
font-size:12px;
overflow: hidden;
}
#footer #events .block ul li {
width: 240px;
display: block;
padding: 3px 0 2px 0;
border-bottom:1px solid #eaeaea;
background-image:url(../images/white.gif);
background-repeat:repeat-x;
background-position:bottom;
float: left;
}
#footer #events .block ul li.firstChild{
}
#footer #events .block ul li.lastChild{
border-bottom: none;
}
#footer #events .block ul li:hover {
border-top:1px solid #fff;
padding-top:2px;
background-color:#f0f0f0;
padding: 2px 0 2px 0;
}
#footer #events .block ul li .datum {
width: 206px;
min-height: 12px;
clear: both;
float: left;
color: #444c4d;
font-weight: bold;
padding: 0px 10px 0px 24px;
background-image: url(../images/Footer_orangeStar.png);
background-repeat: no-repeat;
background-position: 10px 4px;
}
#footer #events .block ul li .titel {
width: 220px;
min-height:11px;
clear:both;
float:left;
color:#444c4d;
font-weight:normal;
padding:0px 10px 0px 10px;
}
#footer #events .more a{
float:right;
height:20px;
right:10px;
width:auto;
color:#5b5b5b;
background-image:url(../images/Footer_orangeArrow.png);
background-repeat:no-repeat;
background-position:right 4px;
padding-right:10px;
font-size: 12px;
}
#footer #news .more, #footer #succesStories .more {
bottom:-27px;
float:right;
height:20px;
position:absolute;
right:10px;
width:auto;
color:#5b5b5b;
background-image:url(../images/Footer_orangeArrow.png);
background-repeat:no-repeat;
background-position:right 4px;
padding-right:10px;
z-index:2;
}
#footer #events .more:hover, #footer #news .more:hover, #footer #succesStories .more:hover {
text-decoration:underline;
}
#footer #events .fade {
height: 7px;
width: 240px;
background-image:url(../images/Footer_blockFadeLarge.png);
background-repeat:no-repeat;
background-position:center top;
float: left;
}
#footer #succesStories .block .fade {
position:absolute;
float:left;
bottom:-8px;
height:7px;
width:240px;
background-image:url(../images/Footer_blockFadeSmall.png);
background-repeat:no-repeat;
background-position:center top;
z-index:1;
}
#footer #news .block .fade{
position:absolute;
float:left;
bottom:-8px;
height:7px;
width:450px;
background-image:url(../images/Footer_blockFadeSmall.png);
background-repeat:no-repeat;
background-position:center top;
z-index:1;
}
#footer #news .block ul, #footer #succesStories .block ul {
font-weight:bold;
font-size:11px;
color:#444c4d;
padding:8px 11px;
list-style:none;
min-height:110px;
}
#footer #news .block ul li, #footer #succesStories .block ul li {
padding:3px 0px;
}
#footer #news .block ul li a, #footer #succesStories .block ul li a{
font-weight:normal;
font-size:11px;
color:#444c4d;
background-image:url(../images/Footer_orangeArrow.png);
background-repeat:no-repeat;
background-position:left 3px;
padding-left:11px;
margin-left:3px;
}
#footer #news .block ul li a:hover, #footer #succesStories .block ul li a:hover{
text-decoration:underline;
}
#footer .block .conrnerTopLeft,
#footer .block .conrnerTopRight,
#footer .block .conrnerBottomLeft,
#footer .block .conrnerBottomRight
{
position:absolute;
height:3px;
width:3px;
background-image:url(../images/Footer_blockCorners.png);
}
#footer .block .conrnerTopLeft
{
top:-1px;
left:-1px;
background-position:left top;
}
#footer .block .conrnerTopRight
{
top:-1px;
right:-1px;
background-position:right top;
}
#footer .block .conrnerBottomLeft
{
bottom:-1px;
left:-1px;
background-position:left bottom;
}
#footer .block .conrnerBottomRight
{
bottom:-1px;
right:-1px;
background-position:right bottom;
}
#footer #events .title,
#footer #news .title,
#footer #succesStories .title,
#footer #events h4,
#footer #news h4,
#footer #succesStories h4
{
padding:15px 0px 9px 10px;
font-size:18px;
color:#444c4d;
width:auto;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
margin:0px;
}
#footer #succesStories, #footer #events{
padding-left:16px;
width:240px;
}
#footer #news{
width: 450px;
}
.imageContainer
{
display: none;
}
#santabletotal
{
margin: 0;
padding: 0;
}
#santable
{
border-bottom: 1px #EEE solid;
padding-left: 10px;
}
#santablecountry
{
background-color: #EDF3F7;
font-weight: bold;
padding-left: 10px;
}
#santabletop
{
background-image: url('../../images/nav_bground_grey2.gif');
font-weight: bold;
padding-left: 10px;
border-bottom: 1pt #FFF solid;
}
#santabletitle
{
color: #07112a;
font-weight: bold;
padding: 4px 0px 4px 10px;
background: #fff;
border-top: 2px #e08000 solid;
border-bottom: 1px #e08000 solid;
}
#sanwrap { margin: 10px 20px 10px 20px; }
#santitle h1
{
color: #07112a;
font-size: 1.25em;
font-weight: bold;
line-height: 1.4em;
margin-bottom: 0.6em;
font-family: "Trebuchet MS", Verdana, sans-serif;
padding: 4px 0px 4px 10px;
background: #fff;
border-top: 2px #e08000 solid;
border-right: 1px #FFF solid;
border-bottom: 1px #e08000 solid;
border-left: 0px #FFF solid;
}