/* ==============================================
*                   INITIAL                     *
* v2.1, by Faruk Ates - www.kurafire.net        *
* Addendum by Robert Nyman - www.robertnyman.com*
* ==============================================*/
audio:not([controls]) { display: none; }
[hidden] { display: none; }

html, body {width:100%; height:100%;}
html {font-size: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; overflow-x: auto; overflow-y:scroll; }
body {line-height:18px; font-weight: 400; background-color:#ffffff; color:#595959; text-align:left }

a { outline:none}
a:focus {outline:thin dotted;}
a:hover, a:active {outline: 0; }
a img { border: none; }

abbr[title] { border-bottom: 1px dotted #666666; cursor: help; }
address { margin: 0 0 1.5em; font-style: italic; }
b, strong { font-weight: bold; }
blockquote { margin: 1em 40px; margin: 1.5em; font-style: italic; }
dfn { font-style: italic; }
em { font-style: italic; }
hr {
    border-bottom: none;
    border-left: none;
    border-right: none;
    border-top-width:1px;
    border-top-color:#d9d9d9;
    border-top-style:solid;
    color: #FFFFFF;
    background-color: #ffffff;
    height:2px;
    margin:16px 0;
    display:block;
    clear:both;
}



ins { background: #ff9; color: #000; text-decoration: none; }
mark { background: #ff0; color: #000; font-style: italic; font-weight: bold; }
option {outline:none}
pre, code, kbd, samp { font-family: monospace, serif; _font-family: 'courier new', monospace; font-size: 1em; }
pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; }
q { quotes: none; }
q:before, q:after { content: ""; content: none; }
small { font-size: 85%; color:#7b7b7b; }
sub, sup { font-size: 80%; line-height: 0; position: relative; vertical-align: baseline; }
sup { top: -0.5em; }
sub { bottom: -0.25em; }
div, form { position:relative; zoom:1}
.clearfix:after {content: "."; display: block; height: 0; clear: both; visibility: hidden;}
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
p { margin: 0 0 8px 0; clear:both;}
/* zoom and *display = ie7 hack for display:inline-block */
audio, canvas, video,
button, .button, #BasketPrice span, #checkdomaincontent li, label, .dataform p span, .editline .selectedpromocode,
.info_item, .moreinfo,
.icon-mail, .icon-website, .icon-myaccount, .pager a,
.slidepanel_controls li span, .slidepanel_controls li span a, .subnavigation .steps, ul.breadcrumb li,
#footer_bottom li
{
    display: inline-block;
    zoom: 1;
    *display: inline;
}
/* Fix for jumping footer */
div[id*=checkboxes]{display:none}

/* Set Font
----------------------------------------------------------- */
body, td, th, input, select, textarea, .ui-widget {font-family : Verdana, "Bitstream Vera Sans", "DejaVu Sans", Tahoma, Geneva, Arial, Sans-serif; font-size:11px}
#languages, .searchselector, #basket {font-size:10px}

/* ----------------------- WEBFONTS ----------------------- */
@font-face {
    font-family: 'CooperStdBlack';
    src: url('../../generic/fonts/cooperblackstd-webfont.eot');
    src: url('../../generic/fonts/cooperblackstd-webfont.eot?#iefix') format('embedded-opentype'),
         url('../../generic/fonts/cooperblackstd-webfont.woff') format('woff'),
         url('../../generic/fonts/cooperblackstd-webfont.ttf') format('truetype'),
         url('../../generic/fonts/cooperblackstd-webfont.svg#CooperStdBlack') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'BreuerTextLight';
    src: url('../../generic/fonts/breuertext-light-webfont.eot');
    src: url('../../generic/fonts/breuertext-light-webfont.eot?#iefix') format('embedded-opentype'),
         url('../../generic/fonts/breuertext-light-webfont.woff') format('woff'),
         url('../../generic/fonts/breuertext-light-webfont.ttf') format('truetype'),
         url('../../generic/fonts/breuertext-light-webfont.svg#BreuerTextLight') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'BreuerTextRegular';
    src: url('../../generic/fonts/breuertext-regular-webfont.eot');
    src: url('../../generic/fonts/breuertext-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../../generic/fonts/breuertext-regular-webfont.woff') format('woff'),
         url('../../generic/fonts/breuertext-regular-webfont.ttf') format('truetype'),
         url('../../generic/fonts/breuertext-regular-webfont.svg#BreuerTextRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'BreuerTextMedium';
    src: url('../../generic/fonts/breuertext-medium-webfont.eot');
    src: url('../../generic/fonts/breuertext-medium-webfont.eot?#iefix') format('embedded-opentype'),
         url('../../generic/fonts/breuertext-medium-webfont.woff') format('woff'),
         url('../../generic/fonts/breuertext-medium-webfont.ttf') format('truetype'),
         url('../../generic/fonts/breuertext-medium-webfont.svg#BreuerTextMedium') format('svg');
    font-weight: bold;
    font-style: normal;
}
@font-face {
    font-family: 'BreuerTextBold';
    src: url('../../generic/fonts/breuertext-bold-webfont.eot');
    src: url('../../generic/fonts/breuertext-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../../generic/fonts/breuertext-bold-webfont.woff') format('woff'),
         url('../../generic/fonts/breuertext-bold-webfont.ttf') format('truetype'),
         url('../../generic/fonts/breuertext-bold-webfont.svg#BreuerTextBold') format('svg');
    font-weight: bold;
    font-style: normal;
}
@font-face {
    font-family:"Breuercondprimeweb";
    src:url(https://static-b.telenet.be/telenet.be/sites/all/themes/telenet/font/breuercondprimeweb-regular.eot);
    src:url(https://static-b.telenet.be/telenet.be/sites/all/themes/telenet/font/breuercondprimeweb-regular.woff) format("woff"),
        url(https://static-b.telenet.be/telenet.be/sites/all/themes/telenet/font/breuercondprimeweb-regular.ttf) format("truetype");
    font-weight:normal;
    font-style:normal;
    text-rendering:auto;
}

/* Background images
These use the new-icons.png sprite, change position when png grows
------------------------------------------------------------------- */
.slidepanel_content .close          {background:url("../images/new-icons.png") -260px 0px no-repeat;}
.subnavigation .steps ul li span    {background:url("../images/new-icons.png") -240px -20px no-repeat;}
ul.breadcrumb li                    {background:url("../images/new-icons.png") -233px -25px no-repeat;}
ul.ul-checks li                     {} /* zie hostbasket/style.css */
ul li                               {} /* zie hostbasket/style.css */
li.accept                           {background:url("../images/new-icons.png") -220px -40px no-repeat;}
li.alert                            {background:url("../images/new-icons.png") -200px -60px no-repeat;}
li.error                            {background:url("../images/new-icons.png") -180px -80px no-repeat;}
ul.sf-menu>li.home a                {background:url("../images/new-icons.png") -160px -100px no-repeat;}
ul.sf-menu>li.home a:hover          {background:url("../images/new-icons.png") -140px -120px no-repeat;}
.opleidingen .opleidingen-locatie   {background:url("../images/new-icons.png") -120px -140px no-repeat;}
.opleidingen .opleidingen-tijdstip  {background:url("../images/new-icons.png") -100px -160px no-repeat;}
.opleidingen .opleidingen-inschrijven{background:url("../images/new-icons.png") -80px -180px no-repeat;}
.opleidingen .opleidingen-prijs     {background:url("../images/new-icons.png") -60px -200px no-repeat;}
.searchlist .searchfield input      {background:url("../images/new-icons.png") -40px -220px no-repeat !important; padding-left:25px !important;}
/* Toggle icons */
.icon-toggle                        {background: url("../images/new-icons.png") -20px -240px no-repeat; display:inline-block; padding-left:20px} /* login.xslt and basketoverview.xslt */
.icon-toggle.off                    {background-position: 0px -260px;}


.moreinfo   {background:url("../images/icon-moreinfo.png") 100% 0 no-repeat;padding-right:20px;line-height:14px;}
.info_item  {background:url("../images/icon-moreinfo.png") 0px 2px no-repeat;padding-left:20px;}


li.last, .tag-cloud li, #footer li, #footer_bottom li {background:none !important;}

/* AVAS levels
----------------------------------------------------------- */
.avas-level1, .avas-level2, .avas-level3, .avas-level4 { background-image: url(../images/avas_levels.png); background-repeat: no-repeat; background-color:transparent}
.avas-level1, .avas-level2, .avas-level3, .avas-level4 {height:35px; line-height:10px; margin-bottom:10px}
.avas-level2 {background-position:0 -35px}
.avas-level3 {background-position:0 -70px; background-repeat: no-repeat}
.avas-level4 {background-position:0 -105px; background-repeat: no-repeat}
.avas-level1 span, .avas-level2 span, .avas-level3 span, .avas-level4 span {margin-left:170px; margin-top:9px; display:inline-block}

/* Background colors
----------------------------------------------------------- */
#sbox, .quotes-hp
    {background-color:#fbfbfb} /* 98% white */
.backgroundcolor
    {background-color:#f5f5f5} /* 96% white */
tr.hover td
    {background-color:#e8e8e8} /* 91% white */
th
    {background:#dedede} /* 87% */

/* Border-radius
----------------------------------------- */
input, select, textarea,
.ui-tooltip-icon, .ui-tooltip-icon .ui-icon
{
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    -o-border-radius: 3px;
    -ms-border-radius: 3px;
    -khtml-border-radius: 3px;
    border-radius: 3px;
    -moz-background-clip: padding;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
}
button, .button, .message, .item, .rounded, .frame, .banner-promo
{
    -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;
    margin-bottom: 30px
}
.content.rounded {margin-bottom:0}
.bigrounded
{
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -o-border-radius: 10px;
    -ms-border-radius: 10px;
    -khtml-border-radius: 10px;
    border-radius: 10px;
    -moz-background-clip:    padding;
    -webkit-background-clip: padding-box;
    background-clip:         padding-box;
}
.notroundedlefttop
{
    -webkit-border-top-left-radius: 0px;
    -moz-border-radius-topleft: 0px;
    border-top-left-radius: 0px;
}
.subnavigation li, .subnavigation .steps,
div#sbox-wrapper ul#slider li.panel,
.frame-hp h3
{
    -webkit-border-top-right-radius: 5px;
    -moz-border-radius-topright: 5px;
    border-top-right-radius: 5px;
    -webkit-border-top-left-radius: 5px;
    -moz-border-radius-topleft: 5px;
    border-top-left-radius: 5px;
}
div#sbox-wrapper div#sbox-controls,
div#sbox-wrapper #sbox-controls ul li.last a
{
    -webkit-border-bottom-right-radius: 5px;
    -moz-border-radius-bottomright: 5px;
    border-bottom-right-radius: 5px;
}
div#sbox-wrapper div#sbox-controls,
div#sbox-wrapper #sbox-controls ul li.first a {
    -webkit-border-bottom-left-radius: 5px;
    -moz-border-radius-bottomleft: 5px;
    border-bottom-left-radius: 5px;
}

/* Border-colors
----------------------------------------------------------- */
.datatable, .datatable td, .datatable th, .frame
    {border-top: 1px solid #cccccc;
    border-bottom: 1px solid #cccccc;
    border-left: 1px solid #cccccc;
    border-right: 1px solid #cccccc} /* 80% */
.border,
 .item, .dataform input, select, textarea, .editline
   {border:1px solid #b8b8b8;}
.border-top, .item .extrainformation
    {border-top:1px solid #b8b8b8}
.border-bottom, .item h3
    {border-bottom:1px solid #b8b8b8}
input.error, select.error, textarea.error
    {border:1px solid #E3000B; margin-right:10px; margin-bottom:0; font-weight:normal}
.col, .border-right
    {border-right:1px solid #666666}
.col-left
    {border-right: 1px dotted #d8d8d8;}
.border-right.last, .col.last, .last a
    {border-right:none !important;}

/* BasketOverview.aspx
----------------------------------------------------------- */
.item {margin-bottom:10px;background:#dedede;}
.item h3 { margin:0; height:28px; line-height:28px; padding-left:5px;}
.item h3 .price {position:absolute; right:30px; top:0;}

.holdbuttons {position:absolute; right:2px; top:5px;} /* houdt Edit knop rechtsboven */
.item .basicinformation {background-color:#eeeeee; min-height:50px; padding:5px;}
.item .extrainformation {padding:5px; } /**Height is needed to solve IE7 bug -- removed (Ranu 19/4/2021).**/ /*Padding changed by jonas */

#BasketPrice { text-align:right; margin:5px 0;padding-right:30px}
#BasketPrice span { margin-left:20px; width:75px; font-weight:bold; line-height:18px}

/* Breadcrumb */
div.breadcrumb { min-height:30px}
ul.breadcrumb { margin:0}
ul.breadcrumb li  {height:18px; line-height:18px; padding-left:20px; color:#808080; margin:8px 0 15px 0}
ul.breadcrumb li a {color:#999999}
ul.breadcrumb li.first { padding-left:0; margin-left:0; background:none}

/* Bullets
----------------------------------------------------------- */
div.bullets {margin-bottom:16px;clear:both}
div.bullet {float:left;position:relative;/*width:20%;*/padding-left:22px;font-family: 'Breuercondprimeweb';font-weight: normal;font-size: 17px;line-height: 21px;}
div.bullet a:hover {font-weight:bold;text-decoration:none}
div.bullet::before {background: url(https://static-a.telenet.be/telenet.be/sites/all/themes/telenet/images/sprite-grid.png) 0 0 no-repeat;
background-position: 0 0;
position: absolute;
content: "";
width: 30px;
height: 30px;
left: 0;
top: 2px;}
div.bullets::after
{
    content:"";
    clear:both;
    display:block}

/* Buttons
----------------------------------------------------------- */
button, /*a.button,*/ *.button, input[type="submit"] {
    background-color:#666666;
    color: #f7f7f7 !important;
    border:0;
    cursor:pointer;
    display: inline-block;
    font-size:15px !important; /* otherwise overruled by jquery.ui */
    line-height:15px;
    font-weight:bold;
    font-family:Arial !important;
    height:auto;
    margin: 0;
    padding: 9px 16px 8px 16px;
    text-align:center;
    outline:none;
    vertical-align: baseline !important;
    z-index:1;
}
button:hover, .button:hover,
button.current, .button.current {
    background-color: #999999;
}
button[disabled], button[disabled]:hover,
input[disabled], input[disabled]:hover,
input.button[disabled]:hover,
input:disabled, select:disabled, textarea:disabled {
    background:#d9d9d9;
    color:#808080 !important;
    border: 1px solid #cccccc !important;
    cursor:no-drop;
    opacity: 0.3;
}
button.orange, .button.orange               {background-color:#F26534;}
button.orange:hover, .button.orange:hover   {background-color:#ffc421;}
button.yellow, .button.yellow               {background-color:#ffc421;color:#595959 !important;}
button.yellow:hover, .button.yellow:hover   {background-color:#ecb400;color:#595959 !important;}
button.red, .button.red                     {background-color:#d81b21;}
button.red:hover, .button.red:hover         {background-color:#b8000a;}
button.green, .button.green                 {background-color:#79B825;}
button.green:hover, .button.green:hover     {background-color:#64a303;}

button.medium, .button.medium {
    font-size:14px !important;
    line-height:14px;
    padding: 7px 12px;
}
button.small, .button.small {
    font-size: 12px !important;
    line-height:12px;
    padding: 6px 10px 5px 10px;
}
input + button, select + button, button + button {margin-left:5px}

/* Special Buttons */
button.loading { background:transparent url(../images/loading-small.gif) !important; width:20px; height:20px !important; text-indent:-9999px; padding:0; margin:0;}
button.edit { position:absolute; right:5px; top:5px}

/* Buttons: Info - Order */
.infobutton, .infobutton:hover, .infobutton:visited
    {color:#808080; }   /* 50% brightness */
.infobutton, .orderbutton {height:20px; line-height:20px; font-weight:bold; padding:0 0 0 24px; display:inline-block; text-decoration:none;clear:right}
.infobutton:hover, .orderbutton:hover { text-decoration:underline}
.clearbuttons { display:block; padding-top:10px}
.clearbuttons+.clearbuttons { padding-top:0px }

/* Big MyAccount Buttons */
.bigbutton {
    background-color:#d9d9d9;
    color:#4d4d4d !important;
    border: 1px solid #bfbfbf;
    padding:7px 20px 7px 10px;
    margin-bottom:8px;
    margin-left:0;
    text-align:left;
    float:left;
    line-height:32px;
    background: #d9d9d9; /* Old browsers */
    background: -moz-linear-gradient(top,  #d9d9d9 0%, #bfbfbf 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#d9d9d9), color-stop(100%,#bfbfbf)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #d9d9d9 0%,#bfbfbf 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #d9d9d9 0%,#bfbfbf 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #d9d9d9 0%,#bfbfbf 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #d9d9d9 0%,#bfbfbf 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d9d9d9', endColorstr='#bfbfbf',GradientType=0 ); /* IE6-9 */
    -moz-box-shadow: inset 0px 1px 0px #ffffff;
    -webkit-box-shadow: inset 0px 1px 0px #ffffff;
    box-shadow: inset 0px 1px 0px #ffffff;
}
.bigbutton:hover {
    background: #cccccc; /* Old browsers */
    background: -moz-linear-gradient(top,  #cccccc 0%, #b3b3b3 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#cccccc), color-stop(100%,#b3b3b3)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #cccccc 0%,#b3b3b3 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #cccccc 0%,#b3b3b3 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #cccccc 0%,#b3b3b3 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #cccccc 0%,#b3b3b3 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cccccc', endColorstr='#b3b3b3',GradientType=0 ); /* IE6-9 */
}
@media only screen and (max-width:400px) {
    .bigbutton { width:100%; clear:right; margin-right:0}
}
@media only screen and (min-width:401px) and (max-width:600px) {
    .bigbutton { width:49%; margin-right:2%}
    .bigbutton:nth-child(2n+2) {clear:right; margin-right:0}
}
@media only screen and (min-width: 601px) and (max-width:1024px) {
    .bigbutton { /*width:32.66%;*/ margin-right:1%}
    .bigbutton:nth-child(3n+3) {clear:right; margin-right:0}
}
@media only screen and (min-width: 1025px) {
    .bigbutton { /*width:24.25%;*/ margin-right:1%}
    .bigbutton:nth-child(5n+5) {clear:right; margin-right:0}
}
.holdcols { margin-bottom:16px}

/* Buttons: new flat buttons */
.flat-pricetable .button, .flatbutton {width:100%; margin-top:6px; background:#F26534; font-size:18px !important; text-transform:uppercase; font-family:'BreuerTextBold' !important; text-decoration:none !important; text-decoration:none !important;}
.flat-pricetable .button:hover, .flatbutton:hover {text-decoration:none !important; background-color:#ffc421}
.flat-pricetable .button.more-info, .flatbutton.more-info {background:#bfbfbf; color:#666666 !important;}
.flat-pricetable .button.more-info:hover, .flatbutton.more-info:hover {background:#a6a6a6}
.flat-pricetable-price .button {margin-top:0}

/* Category Images
----------------------------------------------------------- */
.cat-domeinnamen, .cat-webhosting, .cat-mailhosting /* upc */, .cat-collaboration, .cat-serverhosting, .cat-applicationhosting, .cat-abouthostbasket, .cat-partners, .cat-security, .cat-cloudoffice
{
    background-repeat:no-repeat; background-position:right top; padding:20px 335px 20px 20px; margin-bottom:30px; height:220px;
}

/* Domain Checker vanuit de Homepage
----------------------------------------------------------- */
#checkdomaincontent li { width:411px; margin-right:32px; margin-bottom:8px; padding-left:3%; padding-bottom:8px;
    font-weight:bold; position:relative; line-height:22px; min-height:22px; _height:22px}
#checkdomaincontent li:nth-child(even) { margin-right:0}
#checkdomaincontent li button { position:absolute; top:0; right:0; width:95px;}
#checkdomaincontent .domain-legend li { width:auto; display:block; border-bottom:none; padding-bottom:0px;}

/* Domain Checker Full
-------------------------------------------------------------- */
.checkboxes td { padding:2px; width:16px} /* reset the default 5px 10px padding */
#frame_writetlds {padding:5px; margin:2px 0 10px 0; display:inline-block; width:100%; height:30px} /* display needed for IE7 border bug */

/* CSS3 Styles
----------------------------------------------------------- */
* {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
.shadow {-webkit-box-shadow: 0 4px 23px 5px rgba(0,0,0,0.2); -moz-box-shadow: 0 4px 23px 5px rgba(0,0,0,0.2); box-shadow: 0 4px 23px 5px rgba(0,0,0,0.2);}
.gradient {
    background: #e6e6e6; /* Old browsers */
    background: -moz-linear-gradient(top,  #e6e6e6 0%, #ffffff 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e6e6e6), color-stop(100%,#ffffff)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #e6e6e6 0%,#ffffff 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #e6e6e6 0%,#ffffff 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #e6e6e6 0%,#ffffff 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #e6e6e6 0%,#ffffff 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e6e6e6', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
}
.gradient-reverse {
    background: #ffffff; /* Old browsers */
    background: -moz-linear-gradient(top,  #ffffff 30%, #e6e6e6 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(30%,#ffffff), color-stop(100%,#e6e6e6)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #ffffff 30%,#e6e6e6 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #ffffff 30%,#e6e6e6 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #ffffff 30%,#e6e6e6 100%); /* IE10+ */
    background: linear-gradient(to top,  #ffffff 30%,#e6e6e6 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e6e6e6',GradientType=0 ); /* IE6-9 */
}

/* Cursors & outlines
----------------------------------------------------------- */
a {cursor:pointer}
a, a:active, a:focus, :focus, ::-moz-focus-inner {outline: none}

/* Customer Stories
----------------------------------------------------------- */
.klantverhaal {clear: both;width:698px;border-bottom: 1px solid#EEE;min-height: 135px;margin-bottom: 10px;font-size:12px;line-height:16px}
.klantverhaal h2 {font-family: Verdana, Geneva, sans-serif;font-size: 15px;font-weight: bold;margin: 10px 0 5px;}
.klantverhaal a {text-decoration:none}
.klantverhaal .klant_image {float: left;display: block;width: 27%;}
.klantverhaal .klant_data {float: left;width: 73%;}
.klantverhaal .klant_naam {font-weight: bold;}
.klantverhaal span {color: #000000;}
blockquote {background: url("../images/klant_quote_left.png") no-repeat left top;margin: 12px 0;padding: 0 20px;font-style: italic;}
blockquote span {color: #58595b;background: url("../images/klant_quote_right.png") no-repeat right bottom;padding-right: 20px;}
.klant_data a {
background: transparent url("https://images.tn-media.be/tsd3/restyle_2012/jelly_rood_smb.png") no-repeat right 2px;
display: inline-block;
padding-right: 30px;
color: #f26534;
text-decoration: none;
min-height: 26px;
padding-top: 3px;
font-family: 'BreuerTextBold';
font-size: 15px;
}

/* Dataform labels, inputs en selects
----------------------------------------------------------- */
label, span.label { width:200px; font-weight:bold; padding-right:10px}
label:hover { color:#737373}
span.indent { margin-left:200px; display:block !important;}

label, .dataform p span, .dataform td, #pageflowdata p, #wizards .frame p { line-height:23px; vertical-align:top}
/*.dataform .productinformation label, .dataform .productinformation p span { line-height:14px}*/
.dataform p.title span { line-height:16px; display:block}
.dataform input[type=text], .dataform input[type=password], select, textarea
{
    color:#333333;
    /* vertical-align:top; inputs staan momenteel te hoog op de lijn */
    padding:4px 3px;
    overflow: visible;
    background:#FFFFFF;
    -moz-box-shadow: inset 1px 1px 5px #cccccc;
    -webkit-box-shadow: inset 1px 1px 5px #cccccc;
    box-shadow: inset 1px 1px 5px #cccccc;
    vertical-align:top;
}
.dataform input[type=text].error:focus, .dataform input[type=password].error:focus, select.error:focus, textarea.error:focus
{
    -moz-box-shadow: 0px 0px 4px red;
    -webkit-box-shadow: 0px 0px 4px red;
    box-shadow: 0px 0px 4px red;
}
.dataform input     {width:205px; height:23px;vertical-align:baseline;padding:4px}
.dataform textarea  {width:205px;}
.dataform select    {padding:2px 3px; height:23px}
input.search, input.newsletter { width:120px;}

input.watermark { font-style:italic; font-weight:lighter;color:#808080}

input[type="radio"], input[type="checkbox"] {border:none; background:none !important; vertical-align:top;margin:0 5px 0 0 !important; padding:0 !important; box-shadow: 0 0 0; height:23px}
input[type="radio"], input[type="checkbox"], input[type="image"], input[type="button"], input[type="submit"] {width:auto !important;}
input[type="button"], input[type="submit"] {height:auto;}
input[type="radio"] + label, input[type="checkbox"] + label {width:auto; min-width:80px;display:inline}

/* Dynamic Cloud Landing Page
-------------------------------------------------------------- */
.ddc-landing.nl, .ddc-landing.en { background:url(../images/visual-dynamic-cloud-nl.jpg); height:415px}
.ddc-landing.fr { background:url(../images/visual-dynamic-cloud-fr.jpg); height:415px}
.ddc-landing span {text-indent:-9999px; display:inline-block}
.ddc-landing h1 {position:absolute;right:0;top:61px;font-size:44px;line-height:55px;color:#333333;margin-top:0}
.ddc-landing h2 {position:absolute;right:0;top:138px;font-size:32px;line-height:32px;color:#333333;font-weight:normal}
    .ddc-landing.fr h2 {top:133px;font-size:27px;}
.ddc-landing p {position:absolute;right:0;top:183px;font-size:20px;color:#333333;text-align:right;line-height:28px;letter-spacing:0.03em}
    .ddc-landing.fr p {letter-spacing:0}
.ddc-landing .btn-simulate {position:absolute;right:200px;top:280px;width:250px;height:50px;background-image:url(about:blank);}
.ddc-landing .btn-activate {position:absolute;right:0px;top:280px;width:195px;height:50px;background-image:url(about:blank);}
.ddc-landing .btn-readmore {position:absolute;right:0px;top:340px;width:175px;height:30px;background-image:url(about:blank);}

/* Dynamic Cloud Overview Table
------------------------------------------------------------ */
#ddccontent tr.first td, #ddccontent tr.odd td {font-weight:bold}
#ddccontent h4 { margin:3px 0}
#ddccontent tr.odd td {background:#dedede}
#ddccontent a.ui-slider-handle, #ddccontent tr.first td {background-color:#ffc421}
#ddccontent a.ui-slider-handle {border:1px solid #b8b8b8}

/* Edit Line
----------------------------------------------------------- */
.editline { padding:7px 0px 7px 10px;margin-bottom: 5px; position:static; overflow:hidden;background-color:#eeeeee;}
.editline button {margin-left:5px}
.editline .selectedpromocode { width:100px; font-weight:bold}

/* Errors
----------------------------------------------------------- */
.error {color:#E3000B;margin-bottom: 2px; font-weight:bold}
.error-hidden { color:#E3000B; margin-top:3px; line-height:14px;margin-left:0; font-size:11px} /* verkeerd ingevuld input */
label+.error+div.error-hidden,
label+.error+div+div.error-hidden,
label+.error+span+div.error-hidden,
label+.error+span+div+div.error-hidden,
label+.error+input#autopostbackfix+div.error-hidden,
label+.error+input#autopostbackfix+div+div.error-hidden,
label+.error+br+span+div.error-hidden
label+.error+br+span+div+div.error-hidden {margin-left:204px}
p label.blocklabel+.error+div.error-hidden,
p label.blocklabel+.error+span+div.error-hidden { margin-left:0px}
.error a {color:#E3000B}

/* (Floating) messages
----------------------------------------------------------- */
.floating {
    position:relative; height:100%; width:100%; z-index:9999;
    background: rgb(255, 255, 255); /* The Fallback */
    background-color:rgba(255,255,255,0.75);}
div.fixed {position:fixed; left:0; top:0; width:100%; z-index:9999;}
.floating.loading { position:absolute; left:0; top:0;}
.floating .loading {min-height:45px; height:100%; width:100%; background-position:50% 50%; z-index:999;background:transparent url("/generic/images/loading.gif") 50% 50% no-repeat;}
.floating .message {
    text-align:center;
    width:410px; 
    top:50%;
    border-radius: 0;
    display: table;

    margin: auto;
    margin-top:-165px;
    -moz-box-shadow: 0 4px 23px 5px rgba(0,0,0,0.2);
    -webkit-box-shadow: 0 4px 23px 5px rgba(0,0,0,0.2);
    box-shadow: 0 4px 23px 5px rgba(0,0,0,0.2);}
.message            {border:1px solid #FFC421; background:#FFFFFF; color:#666666; line-height:16px; font-weight:bold; padding:12px; z-index:900;}
.message li         {text-align:left}
.message.success    {border:1px solid #3e9c04; background:#dfead8; color:#3e9c04}
.message.error      {border:1px solid #e3000b; background:#ffebeb; color:#e3000b}
.message p{
    padding: 20px;margin: 0px;
}
.message button{
    margin-bottom: 20px
}

#checkdomaincontent { min-height:300px}

/* Floats
----------------------------------------------------------- */
.left, .col-left, .feature-left, .feature-right, .sidebar, .subsubnavigation li {float:left;}
.right, .col-right {float:right;}
.left {margin-left:0;margin-right:5px;}
.right {margin-left:5px;margin-right:0}
.clear {float:none !important; overflow:hidden; width:100%; height:0px; clear:both}

/* Font colours
----------------------------------------------------------- */
.red
    {color:#E3000B}     /* red */
.alert, .orange
    {color:#F26534}    /* orange */
#BasketPrice .reduction, .accept
    {color:#006600}     /* green */
#footer_bottom, #footer_bottom .copyright a,
.disabled
    {color:#d4d4d4}     /* 83% brightness */
p.info, .tags a
    {color:#999999;}    /* 60% brightness */
h3 a, h3 a:hover, h3 a:visited,
div.slidepanel_controls a, #sbox-controls a, .frame-hp a, .frame-hp a:visited, div.subnavigation a, a.moreinfo, a.toggledetails, .cloudoffice #navigation a
    {color:#595959 /*!important;*/}    /* 35% brightness */

/*font weights*/
.bold{
    font-weight:bold;
}

/* Footer :: cleaned
----------------------------------------------------------- */
#footer
    {background-image: url("../images/bg-footer.png"); background-repeat: repeat-x; background-color:#3e3e3e; background-position: 50% 0px;
     border-bottom:1px solid #575757; padding:10px 0;
     position:absolute; left:0;bottom:65px;width:100%; /*height:240px;*/ z-index:1}
    #footer ul, #footer_bottom ul { margin-bottom:0}
    #footer, #footer a {color:#d4d4d4}     /* 83% brightness */
    #footer .col {height:160px}
    #footer .buttons {margin:5px 0}
    #footer .button{width: 100%;display: block;margin-top: 5px}
    #footer input.newsletter{width: 100%}
    #footer h3{margin-top: 15px;}
#footer_bottom
    {background-color:#363636; border-top:1px solid #232323; clear:both; padding:10px 0;
     position:absolute;left:0;bottom:0;width:100%;height:65px; z-index:1}
#footer_bottom div.copyright { padding-left:30px; color:#b3b3b3; }
#footer_bottom div.copyright p { padding-bottom:12px}


/* Frames Rounded
-------------------------------------------------------------- */
.frame {padding:20px; clear:both; margin-bottom:20px; background-color: #FFFFFF;}
.frame.accept, .frame.error, .frame.info, .frame.alert {line-height:16px; font-weight:bold}
    .frame.accept {border:1px solid #3e9c04; color:#3e9c04} /* green */
    .frame.error    {border:1px solid #e3000b; background:#ffebeb}
    .frame.info                     {border:1px solid #666666; color:#666666} /* grey */
    .frame.alert                    {border:1px solid #ff9933;} /* orange */
.frame.accept, .frame.error, .frame.info, .frame.alert {padding:5px 5px 5px 25px; margin-bottom:10px;}

.frame span.one-third, .frame span.two-third { margin-bottom:0; padding-top:6px}
.frame.info span.two-third { width:567px; margin-bottom:6px}

/* Grid
-------------------------------------------------------------- */
.col-left { width:677px; padding:0 12px 0 0; position:relative; clear:left} /* include padding and border! */
.sidebar { width:221px; padding:0px 0px 0 10px;}

.wrap           {width:960px; height:auto; margin: 0 auto;} /* all div are already relative */
div.slidepanel  {z-index:3; width:100%;height:42px;position:absolute;left:0;top:0;}
div.header      {z-index:2; height:106px;background:#FFFFFF}
div#navigation  {z-index:2; height:41px; line-height:41px;}
#main-clickable {z-index:1; padding-bottom:270px;min-height:100%; position:relative;}
#main-clickable.bab {padding-bottom:145px}
.content        {width:960px; padding: 20px 29px; min-height:200px; background-color:#FFFFFF; top:-1px; clear:both}

.col { padding:0 2.5%;}
.one-fourth, .one-half, .three-fourth, .one-third, .two-third, .one-fifth, .one-sixth {float:left; display:block; margin-right:1.5%; position:relative; clear:none}
.last  {margin-right:0 !important;}
.one-third          {width:32.333%;}
.two-third          {width:66.167%;}
.one-fourth         {width:23.875%; min-width:165px}
.one-fifth          {width:18.800%; min-width:165px}
.one-sixth          {width:15.416%;}
.one-half           {width:49%;}
.three-fourth       {width:74.625%;}

#pageflowdata { min-height:150px; }
.productinformation { background-color:#f5f5f5}
#container
{
    min-height:100%;
    min-width:320px;
    width:100%;
 }
#pageflowinformation
{
    min-width:320px;
    width:100%;
 }
/* GridStyle
----------------------------------------------------------- */
.GridAlternatingItemStyle {background-color: #e5e5e5;}
.GridStyle th,
.GridStyle td,
#dgCustomers_dgMain td,
#gvProductCategories table td,
#dgInvoices_dgMain td,
#dgDomains_dgMain td {border:1px solid #CCCCCC;padding:5px;}
.GridHeaderStyle a {color:#333333;}
.GridHeaderStyle, .GridStyle .first, .GridHeaderStyle a {font-weight: bold;}

/* Headings
-------------------------------------------------------------- */
h1 {font-family:'BreuerTextBold'; font-size:24px; line-height:24px; margin-bottom: 12px; font-weight:bold; margin-top:0; clear:left;}
h2 {font-family:'BreuerTextBold'; font-size:20px; line-height:33px; margin-bottom: 12px; font-weight:bold; clear:left;}
h3 {font-family:'BreuerTextBold'; font-size:18px; line-height:18px; margin-bottom: 10px; font-weight:bold; margin-top:0px; clear:left;}
h4 {font-family:'BreuerTextMedium'; font-size:14px; line-height:14px; margin-bottom: 10px; clear:left;}
.slidepanel h2 { color:#333333}
.frame>h3 { margin-top:10px}

/* Header - Basket
-------------------------------------------------------------- */
#basket { width:100px; height:18px; font-weight:bold;position:absolute; right:225px; top:15px; z-index:4; text-align:right}

/* Header - Languages
-------------------------------------------------------------- */
#languages { width:70px; height:18px; font-weight:bold;position:absolute; right:0px; top:13px; z-index:4;}
/* generic language panel */
#languagePanel { width:88px; height:19px; position:absolute; right:10px; top: 0px; color:#60605F; z-index:9998}
    #languagePanel .wrap { height:19px; width:auto}
    #languagePanel ul { margin:0}
    #languagePanel li { margin:0; padding:0; background:none; float:left}
    #languagePanel a {width: 24px; height: 19px; line-height: 19px; float: left; margin-right: 4px; background-image: url(https://images.tn-media.be/header/languagePanelgrey.png); background-repeat: no-repeat; background-position: top left; display: block; font-size: 10px; color: black; text-align: center;}
    #languagePanel li.active a, #languagePanel li a:hover { background-position: bottom left; color:White; text-decoration:none}

/* Homepage
sbox - quotes-hp - frame-hp
-------------------------------------------------------------- */
#sbox {width:672px; margin-right:12px}
#sbox, .quotes-hp { height:240px;float: left;overflow:hidden;margin-top:5px;}
.quotes-hp  {margin-right:0px}
.quotes-hp #quotes div { display:none; width:100%;}

/* Overall Wrapper */
div#sbox-wrapper {overflow: visible !important; /* needed for Opera and Safari */}
/* anythingSlider viewport window */
div#sbox-wrapper div#sbox-inner { overflow: hidden;}
/* anythingSlider base (original element) */
ul#slider {background: transparent;margin:0;position: absolute; top: 0; left: 0;overflow: visible !important; width:100%; height:100%;}
/* all panels inside the slider */
ul#slider li { background-image:none; width:auto; height:auto; padding: 20px; margin: 0;}
ul#slider li.panel { display: block; overflow: hidden; float: left; height:100%; position:relative; padding:0}
ul#slider li.panel img { position:absolute; left:10px; top:10px}
ul#slider li.panel div.details { padding-left:260px; padding-top:20px; padding-right:40px; height:190px }
ul#slider li.panel div.details p { text-shadow: #FFFFFF 1px 1px 0px; margin-bottom:21px}
ul#slider li.panel div.details a.orderbutton { display:block}
ul#slider li.panel div.details .price { position:absolute; right:10px; bottom:10px}
/* Navigation Arrows */
div#sbox-wrapper .arrow {top: 45%;position: absolute;display: block;}
div#sbox-wrapper .arrow a {display: block;width: 40px;height: 50px; margin-top: -25px;background:url(../images/sbox-gradients.png) repeat-x;
    opacity:0.4}
div#sbox-wrapper .arrow a:hover { opacity:1}
/* hide text, target the span so IE7 doesn't text-indent the link */
div#sbox-wrapper .arrow a span { display: block; visibility: hidden; }
/* back arrow */
div#sbox-wrapper .back { left: 0; }
div#sbox-wrapper .back a, div#sbox-wrapper .back a:hover, div#sbox-wrapper .back a.hover { background-position: 0 0px; }
div#sbox-wrapper .back.disabled { display: none; } /* disabled arrows, hide or reduce opacity: opacity: .5; filter: alpha(opacity=50); */
/* forward arrow */
div#sbox-wrapper .forward { right: 0; }
div#sbox-wrapper .forward a, div#sbox-wrapper .forward a:hover, div#sbox-wrapper .forward a.hover { background-position: 0 -50px; }
div#sbox-wrapper .forward.disabled { display: none; } /* disabled arrows, hide or reduce opacity: opacity: .5; filter: alpha(opacity=50); */
/* Navigation Links */
div#sbox-wrapper div#sbox-controls {
    position:absolute; left:0; bottom:0; width:100%; height:25px;
    border-top:1px solid #ebebeb; display: none;
    background: #ffffff; /* Old browsers */
    background: -moz-linear-gradient(top,  #ffffff 30%, #e6e6e6 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(30%,#ffffff), color-stop(100%,#e6e6e6)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #ffffff 30%,#e6e6e6 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #ffffff 30%,#e6e6e6 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #ffffff 30%,#e6e6e6 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #ffffff 30%,#e6e6e6 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e6e6e6',GradientType=0 ); /* IE6-9 */
}
div#sbox-wrapper #sbox-controls ul {margin: 0; overflow: hidden; width:100%; height:100%;}
div#sbox-wrapper #sbox-controls ul li { padding:0; display:inline;}
div#sbox-wrapper #sbox-controls ul li a {width:25%; border-right:1px solid #CBCBCB; float:left; background-image:none; text-align:center;
    padding:0; display: block; height:100%; line-height:25px; text-decoration: none;}
div#sbox-wrapper #sbox-controls ul a:hover, div#sbox-wrapper #sbox-controls ul a.cur {
    background: #e6e6e6; /* Old browsers */
    background: -moz-linear-gradient(top,  #e6e6e6 0%, #ffffff 70%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e6e6e6), color-stop(70%,#ffffff)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #e6e6e6 0%,#ffffff 70%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #e6e6e6 0%,#ffffff 70%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #e6e6e6 0%,#ffffff 70%); /* IE10+ */
    background: linear-gradient(to bottom,  #e6e6e6 0%,#ffffff 70%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e6e6e6', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
}
div#sbox-wrapper #sbox-controls ul li a:active, div#sbox-wrapper #sbox-controls ul li a:focus { outline: none; }

/* Frames HomePage */
.quotes-hp, .frame-hp  {width:216px;}
.frame-hp {background-color:#fbfbfb; margin-right:12px; margin-bottom:0px; float:left}
.frame-hp img { width:100%}
.frame-hp a:hover {text-decoration:none}
.frame-hp h3 {margin:0; padding:0px 0 0px 10px; height:30px; line-height:30px; border-bottom:1px solid #cfcfcf; color:#595959; text-shadow: #e0e0e0 1px 1px 0px; white-space:nowrap;font-weight:bold;background: #bfbfbf;}

/* Icons
-------------------------------------------------------------- */
/* icons parking page */
.icon-parking-mail {background-image:url("../images/large-icons.png"); background-position: -480px -80px; background-repeat: no-repeat;}
.icon-parking-website {background-image:url("../images/large-icons.png"); background-position: -440px -120px; background-repeat: no-repeat;}
.icon-parking-myaccount {background-image:url("../images/large-icons.png"); background-position: -400px -160px; background-repeat: no-repeat;}
.icon-parking-mail, .icon-parking-website, .icon-parking-myaccount {width:40px; height:40px; float:left; margin-right:15px;}

/* 32px icons MyProducts */
.icon32 {background-image:url("../images/sprites-icons-32.png"); background-repeat: no-repeat; float:left; height:32px; width:32px; vertical-align:middle; margin-right:10px;}
.icon-createuserwizard, .icon-createdatabaseuserwizard, .icon-createpackageuserwizard
{
    background-position: -32px 0}
.icon-manageexistinguserswizard, .icon-manageexistingdatabaseuserswizard, .icon-manageactivelicenseswizard
{
    background-position: -64px 0}
.icon-deleteuserwizard, .icon-deletedatabaseuserwizard, .icon-deletepackageuserwizard
{
    background-position: -96px 0}
.icon-edituserdetailswizard, .icon-editdatabaseuserwizard, .icon-editpackageuserdetailswizard, .icon-syncdatabaseusersroleswizard
{
    background-position: -128px 0}
.icon-syncdatabaseusersroleswizard
{
    background-position: -160px 0}
.icon-resetuserpasswordwizard, .icon-resetdatabaseuserpasswordwizard, .icon-managesecuritywizard, .icon-resetpackageuserpasswordwizard, .icon-resetdatabaseuserpasswordwizard
{
    background-position: -192px 0}
.icon-unlockuserwizard, .icon-unlockpackageuserwizard
{
    background-position: -224px 0}
.icon-changeversionwizard
{
    background-position: -256px 0}
.icon-manageapplicationpoolswizard
{
    background-position: -288px 0}
.icon-setapplicationstatewizard
{
    background-position: -320px 0}
.icon-startapplicationpoolwizard
{
    background-position: -352px 0}
.icon-stopapplicationpoolwizard
{
    background-position: -384px 0}
.icon-recycleapplicationpoolwizard
{
    background-position: -416px 0}
.icon-setunrestrictedrootaccesswizard
{
    background-position: -448px 0}
.icon-setreadrootaccesswizard
{
    background-position: -480px 0}
.icon-managehostheaderswizard, .icon-domainconfigurationwizard
{
    background-position: -512px 0}
.icon-addhostheaderwizard
{
    background-position: -544px 0}
.icon-deletehostheaderwizard, .icon-deleteexistinghostheaderswizard
{
    background-position: -576px 0}
.icon-addserverwizard
{
    background-position: -608px 0}

.icon-managepackagebrandingwizard
{
    background-position: 0 -32px}
.icon-editpackagebrandingcolorswizard
{
    background-position: -32px -32px}
.icon-uploadpackagebrandinglogowizard
{
    background-position: -64px -32px}
.icon-resetpackagebrandingwizard
{
    background-position: -96px -32px}
.icon-collaborationgettingstartedwizard
{
    background-position: -128px -32px}
.icon-endtrialstartorderwizard
{
    background-position: -160px -32px}
.icon-usageoverviewwizard,
.icon-veeamoverviewwizard
{
    background-position: -192px -32px}

/*.icon-editpackageuserapplicationswizard,
.icon-manageapplicationdirectorieswizard        {background-position: -544px 0}
.icon-createapplicationdirectorywizard          {background-position: -576px 0}
.icon-deleteexistingapplicationdirectorieswizard{background-position: -608px 0}*/

/* 18x18px icons - only apply as a span ! */
span.span-icon {background-image:url(../images/sprites-icons.png); background-repeat:no-repeat; width:18px; height:18px; line-height:18px;
    display:inline-block; vertical-align:bottom; padding:0; margin:0;float:none;text-indent:-9999em}
span.icon-remotedesktop {background-position: 0 0}
span.icon-recycle       {background-position: -18px 0}
span.icon-pause         {background-position: -36px 0}
span.icon-play          {background-position: -54px 0}
span.icon-stop          {background-position: -72px 0}
span.icon-editserver    {background-position: -90px 0}
span.icon-url           {background-position: -108px 0}
span.icon-user          {background-position: -126px 0}
span.icon-pwd           {background-position: -144px 0}
span.icon-calendar      {background-position: -162px 0}
span.icon-add           {background-position: -180px 0}
span.icon-delete        {background-position: -198px 0}
span.icon-mail          {background-position: -216px 0}
span.icon-phone         {background-position: -234px 0}
span.icon-monitor       {background-position: -252px 0}
span.icon-edit          {background-position: -270px 0}
span.icon-accept        {background-position: -288px 0}
span.icon-config        {background-position: -306px 0}
span.icon-alert         {background-position: 0px -18px}
span.icon-arrow-down    {background-position: -18px -18px}
span.icon-arrow-up      {background-position: -36px -18px}
span.icon-close         {background-position: -54px -18px}
span.icon-search        {background-position: -72px -18px}
span.icon-pending       {background-position: -198px -19px}
span.icon-inprogress    {background-position: -215px -20px}
span.icon-accept        {background-position: -288px 0px}
span.icon-error         {background-position: -54px -20px}
span.icon-yes           {background-position: -90px -18px}
span.icon-warning       {background-position: 0px -18px}
span.icon-filelist      {background-position: -234px -18px}
span.icon-createticket  {background-position: -252px -18px}
span.icon-question,
span.icon-question-central,
span.icon-info {
    background-position: -108px -18px
}
div.icon-question,
div.icon-question-central,
div.icon-info {
    background-position: -108px -18px
}

/* temporarily - to much work to complete now */
.icon-question      {background-image:url(../images/sprites-icons.png); background-position: -108px -18px; background-repeat:no-repeat; width:18px; height:18px; line-height:18px;
    display:inline-block; vertical-align:bottom; padding:0; margin:0;float:none;text-indent: -9999em;}
.icon-question-central {
    background-image: url(../images/sprites-icons.png);
    background-position: -108px -18px;
    background-repeat: no-repeat;
    width: 18px;
    height: 18px;
    line-height: 18px;
    display: inline-block;
    vertical-align: central;
    padding: 0;
    margin: 0;
    float: none;
    text-indent: -9999em;
}
.icon-question-container1 .icon-question    { top: -2px;left: -10px; }
.icon-question-container2 .icon-question    { top: 1px;left: 3px; }

span.icon-led-orange    {background-position: -126px -18px}
span.icon-led-green     {background-position: -144px -18px}
button.delete           {background: url("../images/sprites-icons.png") -162px -18px no-repeat; width:18px; height:18px; text-indent:-9999px; position:absolute; right:5px; top:5px;padding:0}
button.delete:hover     {background-position: -180px -18px; background-color:transparent}

/* Inline Boxes
-------------------------------------------------------------- */
.inline-box {
    -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;
    padding:8px; font-family: 'CooperStdBlack'; font-size:22px; line-height:100%; text-align:center; text-shadow: 0 1px 1px rgba(0,0,0,0.25);
    background-color:#ffc421; color:White; margin-top:12px; margin-bottom:12px;}
.inline-box .phone-number {font-size:24px; line-height:100%}
.inline-box.cta-box { background-color:#F26534}

/* Links
-------------------------------------------------------------- */
a, button:hover, .button:hover, .button.current, h3 a, h3 a:visited, #navigation ul ul li a:hover, .subnavigation a:hover, .slidepanel_controls a:hover { text-decoration: none}
a:hover { text-decoration: underline}

/* Lists
-------------------------------------------------------------- */
ul { margin: 0 0 15px 0}
ul li {padding-left:25px; margin-left:0px;}
ol { margin: 0 0 15px 25px}
ol li { list-style-type: decimal; }
dl { margin: 0 0 1.5em 0; }
dt { font-weight: bold; }
dd { margin-left: 1.5em; }
.sidebar li { margin-bottom:6px}

#footer li, #footer_bottom li { padding-left:0;}
#footer li {line-height:18px}

div#footer_bottom li { height:14px; line-height:14px; padding-right:12px; margin-left:12px; border-right: 1px solid #666666}
div#footer_bottom li.first { margin-left:0}

/* Pagina met Productfiches */
.pdf-list li { background:url("../images/pdf.png") 0 0 no-repeat; padding-right:24px; list-style:none}

/* Linux Shared Webhosting Apache Page
------------------------------------------------------------ */
.body-linux-shared-webhosting { background:none}
.container-linux-shared-webhosting { width:600px; height:400px; position:absolute;top:50%;left:50%;margin-left:-300px; margin-top:-200px;
    background:url("../images/linux_shared_webhosting.png") no-repeat}
.container-linux-shared-webhosting a { display:block; height:100%; text-indent:-9999px}

/* MyPortal
-------------------------------------------------------------- */
.icon { height:16px; width:16px;}

/* Navigation
-------------------------------------------------------------- */
div#navigation .wrap { background:url("../images/navigation-shadow.png") 50% 100% no-repeat; height:41px}

/*** ESSENTIAL STYLES ***/
.sf-menu, .sf-menu * {
    margin:         0;
    padding:        0;
    list-style:     none;
}
.sf-menu *, .sf-menu *:hover {
    text-decoration:none;
}
.sf-menu ul {
    position:       absolute;
    top:            -999em;
    width:          10em; /* left offset of submenus need to match (see below) */
    overflow:       visible !important;
}
.sf-menu ul li {
    width:          100%;
    height:         30px;
}
.sf-menu li:hover {
    visibility:     inherit; /* fixes IE7 'sticky bug' */
}
.sf-menu li {
    float:          left;
    position:       relative;
    line-height:    18px;
}
.sf-menu a {
    display:        block;
    position:       relative;
}
.sf-menu li:hover ul,
.sf-menu li.sfHover ul {
    left:           -1px;
    top:            30px; /* match top ul list item height */
    z-index:        99;
}
ul.sf-menu li:hover li ul,
ul.sf-menu li.sfHover li ul {
    top:            -999em;
}
/* 3e niveau */
ul.sf-menu li li:hover ul,
ul.sf-menu li li.sfHover ul {
    left:           10em; /* match ul width */
    top:            0px;
    margin-left:    -4px;
    padding:        0px;
    border-left:    0px

}
ul.sf-menu li li:hover li ul,
ul.sf-menu li li.sfHover li ul {
    top:            -999em;
}
ul.sf-menu li li li:hover ul,
ul.sf-menu li li li.sfHover ul {
    left:           10em; /* match ul width */
    top:            0;
}

/*** arrows **/
.sf-menu a.sf-with-ul {
/*padding-right:    2.25em;*/
min-width:      1px; /* trigger IE7 hasLayout so spans position accurately */
}
.sf-sub-indicator {
    position:       absolute;
    display:        block;
    right:          10px;
    top:            1.05em; /* IE6 only */
    width:          10px;
    height:         10px;
    text-indent:    -999em;
    overflow:       hidden;
    background-image: url("../images/arrows-ffffff.png");
    background-repeat: no-repeat;
    background-color:transparent;
    background-position: -10px -100px; /* 8-bit indexed alpha png. IE6 gets solid image only */
}
a > .sf-sub-indicator {  /* give all except IE6 the correct values */
    top: 10px;
    background-position: 0 -100px; /* use translucent arrow for modern browsers*/
}
/* apply hovers to modern browsers */
a:focus > .sf-sub-indicator,
a:hover > .sf-sub-indicator,
a:active > .sf-sub-indicator,
li:hover > a > .sf-sub-indicator,
li.sfHover > a > .sf-sub-indicator {
    background-position: -10px -100px; /* arrow hovers for modern browsers*/
}

/* point right for anchors in subs */
.sf-menu ul .sf-sub-indicator { background-position:  -10px 0; }
.sf-menu ul a > .sf-sub-indicator { background-position:  0 0; }
/* apply hovers to modern browsers */
.sf-menu ul a:focus > .sf-sub-indicator,
.sf-menu ul a:hover > .sf-sub-indicator,
.sf-menu ul a:active > .sf-sub-indicator,
.sf-menu ul li:hover > a > .sf-sub-indicator,
.sf-menu ul li.sfHover > a > .sf-sub-indicator {
    background-position: -10px 0; /* arrow hovers for modern browsers*/
}

/* Hover and Active
-------------------------------------------------------------- */
.sf-menu ul
{
    border-top: none;
    border-right: 1px solid #ffffff;
    border-bottom: 1px solid #ffffff;
    border-left: 1px solid #ffffff;
    background-color:#a3a3a3;
    z-index:999;
}
.sf-menu ul li
    {border-bottom: 1px dotted #f6f6f6}
.sf-menu ul li.last
    {border-bottom: none}

.sf-menu li a, /* 1st level */
.sf-menu ul li:hover>a,
.sf-menu ul li.current>a
    {color:#4d4d4d;}
.sf-menu ul li a, /* other levels */
.sf-menu li:hover a,
.sf-menu li.current a
    {color:#FFFFFF;}
.sf-menu ul li:hover,
.sf-menu ul li.current
    {background:#dedede !important;}

/* 1e niveau
-------------------------------------------------------------- */
.sf-menu { height:30px; padding-top:2px }
.sf-menu>li { border-right:1px solid #727272; border-left:1px solid #d8d8d8; font-weight:bold; }
.sf-menu li { background:none}
.sf-menu li a { padding: 6px 30px 6px 22px; }

.sf-menu>li.home { border-left:none}
.sf-menu>li.home a { width:20px; height:20px; margin:5px 6px 5px 0; padding:0; text-indent:-999em; display:block}

.sf-menu>li.search {padding-left:20px; padding-top:3px; height:30px; border-right:none}
.sf-menu>li.search form { height:23px}
.sf-menu>li.search input { float:left}
.sf-menu>li.search a {padding:0; float:left;margin:3px 0 0 3px}

/* subniveaus
-------------------------------------------------------------- */
.sf-menu ul li { font-weight:normal;}
.sf-menu ul li a { text-transform:none}
.sf-menu ul li:hover,
.sf-menu ul li a:focus,
.sf-menu ul li a:hover,
.sf-menu ul li a:active {outline: 0}

/* Ogone
---------------------------------------------------------------*/
.ogonetemplate small {font-size:100%; color:#595959}
.ogonetemplate label {width:auto; font-weight:normal}

/* Opleidingen
------------------------------------------------------------ */
.opleidingen .opleidingen-locatie, .opleidingen .opleidingen-tijdstip, .opleidingen .opleidingen-inschrijven, .opleidingen .opleidingen-prijs {padding-left:24px; height:20px; line-height:20px;clear:none; margin-right:12px }
.opleidingen .opleidingen-prijs {margin-right:0 }
.opleidingen div, .opleidingen p {float:left}
.opleidingen .opleidingen-datum {font-size:24px; text-align:center;width:9%; padding-right:2%;margin-right:2%;font-weight:bold;border-right: 1px solid #e3000b;color:#E3000B}
    .opleidingen .opleidingen-datum span {display:block;font-size:18px}
.opleidingen .opleidingen-inhoud {width:89%}
    .opleidingen .opleidingen-inhoud p {margin-bottom:10px}
.opleidingen .opleidingen-details {clear:left; width:100%}

/* Pager
----------------------------------------------------------- */
.pager a { background:#acaaab; padding: 3px 8px 3px 9px; color:#FFFFFF; margin-bottom:4px; text-align:center;}
.pager a:hover, .pager a.selected { background:#333; color:#FFFFFF}

/* Parking Page
----------------------------------------------------------- */
.parking {background:#f2f2f2}
.parking .wrap { position: absolute; left:50%; top:50%; margin-left:-225px; margin-top:-250px; width:450px; height:500px;}
.parking .logos { height:75px}
.parking .frame { border:1px solid #FFFFFF; padding:0; margin:0;
    -webkit-box-shadow: 0 0px 10px rgba(0,0,0,.3);
    -moz-box-shadow: 0 0px 10px rgba(0,0,0,.3);
    box-shadow: 0 0px 10px rgba(0,0,0,.3);
}
.parking .header { height:44px;
    -webkit-border-top-right-radius: 5px;
    -moz-border-radius-topright: 5px;
    border-top-right-radius: 5px;
    -webkit-border-top-left-radius: 5px;
    -moz-border-radius-topleft: 5px;
    border-top-left-radius: 5px;
    -webkit-box-shadow: 0 5px 5px rgba(0,0,0,.2);
    -moz-box-shadow: 0 5px 5px rgba(0,0,0,.2);
    box-shadow: 0 5px 5px rgba(0,0,0,.2);
}
.parking .header h1 {line-height: 44px;text-shadow: #FFFFFF 1px 1px 0px;padding-left: 25px;margin: 0;}
.parking .body { padding:25px 25px 0px}
.parking p { margin-bottom:25px}
.parking a { color: #333333; text-decoration: underline;}

/* Pricetables 'flat'
-------------------------------------------------------------- */
.hold-flat-pricetables {text-align:center}
.flat-pricetable {border: 1px solid #CCCCCC; text-align:center; background:#f5f5f5; font-size:12px; margin-bottom:12px;-webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; vertical-align:top}
.flat-pricetable:hover {background:#e5e5e5;}
.flat-pricetable-header {background:#bfbfbf;}
    .flat-pricetable-header h3 {margin:0; padding:10px 0; font-size:24px; line-height:24px; text-shadow: 1px 1px 0px #e0e0e0;}
    .flat-pricetable-header h3 sup a {font-size:10px; top:-13px}
    .flat-pricetable-header .price sup a {color:#595959}
    .flat-pricetable-prices {background:#ffc421;}
    .flat-pricetable .price {background:#ffc421; padding:6px 10px /*13px*/; font-size:26px; line-height:26px;}
    .flat-pricetable .price+.price {background:white;border-bottom:1px solid #bfbfbf}
    .flat-pricetable .price .from {font-size:13px; line-height:13px;}
    .flat-pricetable .price .period, .flat-pricetable .price .price-extra {font-size:13px; line-height:13px; display:block;}
    .flat-pricetable .price .price-extra {text-transform:none;display:block;/*margin-top:8px*/}
.flat-pricetable.one-half {max-width:300px;float:none;display:inline-block}
.flat-pricetable.one-fourth { width:216px; margin-right:13px}
.flat-pricetable.single {width:350px; float:none;display:inline-block;margin-right:0}
.flat-pricetable-body {padding: 10px 20px}
.flat-pricetable.one-fourth .flat-pricetable-body {padding: 10px 13px}
    .flat-pricetable p {margin:14px 0 18px 0}
    .flat-pricetable ul {margin:0}
    .flat-pricetable ul li {line-height:18px; padding:4px 0px; background:none;}
.flat-pricetable.scale {top:-10px; z-index:99; -webkit-box-shadow:0px 0px 5px #999999; -moz-box-shadow:0px 0px 5px #999999; box-shadow:0px 0px 5px #999999 /* left offset, top offset, blur, color */}
.flat-pricetable.scale .flat-pricetable-body {padding: 20px 25px}

/* Merged Tables */
/* Normal merged 3 x 1/3rd */
.flat-pricetable.merged { width:899px}
.flat-pricetable.merged .flat-pricetable-header .one-third { width:299px; margin:0}
.flat-pricetable.merged .flat-pricetable-body .one-third { width:290px; margin:0}
.flat-pricetable.merged .one-third.first {padding-left:0; padding-right:13px}
.flat-pricetable.merged .one-third.middle {border-left:1px dotted #ccc; border-right:1px dotted #ccc; padding-left:6px; padding-right:6px}
.flat-pricetable.merged .one-third.last {padding-right:0; padding-left:13px}
.flat-pricetable.merged .flat-pricetable-body {padding: 10px 13px}

.flat-pricetable.merged-three-fourth {width:671px;float:none;display:inline-block}
.flat-pricetable.merged-two-halves { width:600px;float:none;display:inline-block}
.flat-pricetable.merged-three-fourth .flat-pricetable-body .one-third {width:214px;}
.flat-pricetable.merged-three-fourth .flat-pricetable-header .one-third {margin:0; width:223px}
.flat-pricetable.merged .flat-pricetable-prices .one-third {padding: 0}
.flat-pricetable.merged .one-half {margin:0; width:50%;}
.flat-pricetable.merged .one-half.first {padding-right:13px;border-right:1px dotted #ccc;}
.flat-pricetable.merged .one-half.last {padding-left:13px}

.flat-pricetable.dc{max-width: 438px !important}
.flat-pricetable.dc.right{margin-right: 0 !important}
.flat-pricetable.dc .flat-pricetable-body ul{height: 200px}
.flat-pricetable.dc .flat-pricetable-body.bottom ul{height: 120px}
.flat-pricetable.dc ul li{
    list-style-type: disc;
    margin-left: 20px;
    line-height: 16px;
}
.flat-pricetable.dc .action{
    margin-top: -18px;
}

/* Price Tables Technical
-------------------------------------------------------------- */
.datatable {margin:0 auto 15px auto; background-color:#ffffff}
.datatable tr:hover td { background-color:#d9d9d9;}
.datatable.nohover tr:hover td { background-color:transparent;}
.datatable th {background:#bfbfbf; padding:10px 0; font-size:22px; line-height:22px;font-family: 'BreuerTextBold';text-shadow: 1px 1px 0px #e0e0e0;text-align:center;vertical-align:top}
.datatable th a { text-decoration: none; color: #595959;}
.datatable th, .datatable td {vertical-align:middle}
.datatable .title { font-weight:bold; background-color:#e8e8e8; padding:8px 10px}
.datatable a { text-decoration:underline}

.datatable.cols-5 td {width:15%}
.datatable.cols-4 td {width:20%; text-align:center}
.datatable.cols-4 td:first-child {width:40%; text-align:left}
.datatable.cols-3 td {width:30%; text-align:center}
.datatable.cols-3 td:first-child {width:40%; text-align:left}
.datatable.cols-2 td {width:50%}
.datatable.cols-5 td:first-child, .datatable.cols-3 td:first-child, .datatable.cols-2 td:first-child {min-width:300px;}

.datatable.veeam th:first-child {width: 45%;}

/* Prices
------------------------------------------------------------- */
.price {text-transform:uppercase; font-family:'BreuerTextBold'; font-size:16px;display:block}
.price del {font-weight: normal; color: #666666; font-size:70%}
.datatable .price del {font-size:15px}

/* Progressbar
----------------------------------------------------------- */
.progressbar { margin:0 0 14px 0; padding:10px 15px; background: #ffffff;
  /* Give it the inset look by adding some shadows and highlights */
  -moz-box-shadow: inset 0px 1px 2px 0px rgba(0, 0, 0, 0.5), 0px 1px 0px 0px white;
  -webkit-box-shadow: inset 0px 1px 2px 0px rgba(0, 0, 0, 0.5), 0px 1px 0px 0px white;
  -o-box-shadow: inset 0px 1px 2px 0px rgba(0, 0, 0, 0.5), 0px 1px 0px 0px white;
  box-shadow: inset 0px 1px 2px 0px rgba(0, 0, 0, 0.5), 0px 1px 0px 0px white;
}
.progressbar li { display:inline; margin-right:15px; padding-right:15px; border-right:1px solid #999}
.progressbar li.active { color:#F26534; font-weight:bold}

/* Promo Banners
----------------------------------------------------------- */
.banner-promo {padding:10px;border:1px solid #ffc421;background:#f5f5f5;font-size:11px}

/* Ribbon
-------------------------------------------------------------- */
.ribbon {width:980px; height:61px; position:absolute; left:-11px; top:-10px; z-index:99}
.ribbon .wrap { margin:9px 0 0 150px; width:auto}
.ribbon span { float:left;width:84px; height:34px; background:url(../images/ribbon-www.png); text-indent:-9999px}
.ribbon form { float:left;width:357px;}
.ribbon form .text {width:357px; height:32px; line-height:30px; padding-left:7px; margin:0; font-size:14px; background:#FFFFFF;
    -webkit-box-shadow: inset -1px 1px 4px #858585;
    -moz-box-shadow: inset -1px 1px 4px #858585;
    box-shadow: inset -1px 1px 4px #858585;
 }

/* SearchList
----------------------------------------------------------- */
.searchlist {margin-bottom:10px}
.searchlist .searchfield {margin-bottom:10px}
.searchlist .searchselectors { clear:left; float:left; width:25px; border-top: 1px solid #b8b8b8; border-left: 1px solid #b8b8b8}
.searchlist .searchselectors .searchselector {border-width:0 1px 1px 0; border-style:solid; border-color: #cccccc; width:100% !important; height:20px; line-height:20px; margin:0; padding:0;background-color:#f7f7f7; background-image:none}
.searchlist .searchselectors .searchselector:focus { box-shadow:none}
.searchlist .searchselectors .searchselector:hover {background-color:#3e3e3e; color:#FFFFFF}
.searchlist .searchselectors .searchselector.selected, .searchselectors .searchselector.selected:hover {background-color:#FFFFFF; border-right:0px; color:#666666}
.searchlist .searchselectors .searchselector.disabled, .searchlist .searchselectors .searchselector.disabled:hover {background-color:#eeeeee; color:#d4d4d4}
.searchlist .searchresults {float:left; font-size:9px; height:541px; width:830px; border-width: 1px 1px 1px 0; border-style:solid; border-color:#b8b8b8; overflow:auto}
.searchlist .searchresults .searchresult {padding: 0px 4px; height:20px; line-height:19px; border-bottom: 1px solid #b8b8b8}
.searchlist .searchresults .searchresult:hover {background:#dedede; cursor:pointer}
.searchlist .searchresults .searchresult.selected { font-weight:bold}

.dataform #searchresults .list div.listviewitem { margin-bottom:20px}
.dataform #searchresults .list p { margin: 0}
.dataform #searchresults .list a { color:#999999}
.dataform #searchresults .list h3 { margin-bottom:5px}
.dataform #searchresults .list h3 a, .dataform #searchresults h3 a:hover { color:#666666}

/* Slide panel
----------------------------------------------------------- */
.slidepanel_content {display:none; overflow:hidden;}
.slidepanel_content .close { position:absolute; right:10px; top:10px; width:20px; height:20px; text-indent:-9999px}
.slidepanel_content .contactpanel, .slidepanel_content .loginpanel {display:none; height:210px} /* DO NOT REMOVE !! */
.ID1234 .slidepanel_content .contactpanel, .ID1234 .slidepanel_content .loginpanel {height:238px; padding-top:10px;} /*ONLY FOR HOMEPAGE*/
.slidepanel_content .wrap { padding-top:15px}

.slidepanel_controls {height:9px; border-bottom:1px solid #FFFFFF; box-shadow:0 3px 3px rgba(0,0,0,0.25); z-index:999;}
.slidepanel_controls .wrap ul {position:absolute; top:8px; right:70px; z-index:3}
.slidepanel_controls li {float:left; padding:0; margin-right:8px; border-left:1px solid white; border-bottom:1px solid white; border-right:1px solid white; box-shadow:0 3px 3px rgba(0,0,0,0.25); border-bottom-left-radius: 12px; border-bottom-right-radius: 12px;}
.slidepanel_controls li span {padding:2px 11px; }

.slidepanel_content .contactpanel p { margin-bottom:0}

/* Slide panel - Login panel
-------------------------------------------------------------- */
.forgotpassword {position: relative !important;float: right;width: 204px;margin-right: 17px;margin-top: 13px;}

/* Subnavigation
-------------------------------------------------------------- */
.subnavigation, .subnavigation ul, .subnavigation li.current, .subnavigation li:hover, .subnavigation .steps { height:28px; line-height:27px}
.subnavigation li, .subnavigation .steps li {height:27px; line-height:27px;}
.subnavigation {z-index:100}
.subnavigation ul {margin-bottom:0}
.subnavigation li {float:left; padding:0; border-left:1px solid #B8B8B8; border-top:1px solid #B8B8B8; border-right:1px solid #B8B8B8; border-bottom:0;
    margin-right:5px;  background:#ececec; box-shadow: inset 0px -8px 4px -6px #CCC}
.subnavigation li.current, .subnavigation li:hover {background:#ffffff; box-shadow:none}
.subnavigation a { display:block; height:100%; padding:0 13px; white-space:nowrap;}
.subnavigation a:hover {color:#666666}
.subnavigation li.order { background:#aeaeae; box-shadow: inset 0px -8px 4px -6px #999999}
.subnavigation li.order a { font-weight:bold}

.subnavigation .steps {border-left:1px solid #B8B8B8; border-top:1px solid #B8B8B8; border-right:1px solid #B8B8B8; background:#FFFFFF;}
.subnavigation .steps li { background:white; box-shadow:none; border:none; cursor:default; margin:0}
.subnavigation .steps li span {color:#D4D4D4;display:block; padding:0 15px 0 15px; white-space:nowrap;}
.subnavigation .steps li.first span { background:none}
.subnavigation .steps li.currentnav span {font-weight:bold;color:#666666; }

/* Subsubnavigation
-------------------------------------------------------------- */
ul.subsubnavigation {height:26px}
ul.subsubnavigation li { list-style:none; background:none; padding:0; margin-right:10px}

/* Webbuilder Services floated cols
------------------------------------------------------------- */
.services .col-left { width:66px; border-right:0; padding-bottom:10px}
.services .col-right { width:760px;}

/* Tag cloud
------------------------------------------------------------- */
ol.tag-cloud { margin:15px 0 0 0}
ol.tag-cloud li { display: inline; padding:0 4px; line-height:normal}
/* hide the extra context from CSS-enabled browsers, but not screenreaders */
.tag-cloud span { position: absolute; left: -9999px; width: 990px; }
/* size is purely presentational, based upon the class */
.tag-cloud .size0 a { font-size: 11px; color:#cccccc }
.tag-cloud .size1 a { font-size: 12px; color:#b8b8b8 }
.tag-cloud .size2 a { font-size: 13px; color:#a8a8a8 }
.tag-cloud .size3 a { font-size: 14px; color:#949494 }
.tag-cloud .size4 a { font-size: 15px; color:#808080 }
.tag-cloud .size5 a { font-size: 16px; color:#6b6b6b }
.tag-cloud .size6 a { font-size: 17px; color:#5c5c5c }
.tag-cloud .size7 a { font-size: 18px; color:#474747 }
.tag-cloud .size9 a { font-size: 19px; color:#333333 }
.tag-cloud .size10 a { font-size: 20px; color:#1f1f1f }

/* Tables
-------------------------------------------------------------- */
table {border-collapse: collapse; border-spacing: 0; empty-cells:show; margin-bottom: 1.4em; width:100%;}
th, td, caption {padding: 5px 10px; text-align: left; font-weight: normal;}
th {font-weight:bold;}

/* Various classes
-------------------------------------------------------------- */
p.title {font-size:16px; margin-bottom:10px; font-weight:bold}
div.deletequestion {background:#999999;color:#FFFFFF;display:none;padding:5px; min-height:36px}
div.deletequestion .frame { margin-bottom:0}

/* Basket Overview dotted line */
.dotted-div {border-bottom:1px dotted #CCCCCC;margin-bottom:10px;padding-bottom:5px}
.dotted-div:last-child {border-bottom:none;margin-bottom:10px;padding-bottom:5px}

.paragraph {margin-bottom:25px;}

/* Features */
.feature-left {width:35%; margin-bottom:10px; margin-right:5%}
.feature-right {width:60%; margin-bottom:10px}

.footnote {font-size:10px; color:#999999}
.hidden, .hide {display: none;}
.padding-large { padding-top: 15px; padding-right:15px; padding-bottom:15px; padding-left:15px}
.padding-small { padding-top: 8px; padding-right:8px; padding-bottom:8px; padding-left:8px}
.tags { background: url("../images/icon-tags.png") 0 0 no-repeat; height:27px; padding-left:52px;}

/* Dynamic Cloud V4
------------------------------------------------------------ */
    /*Overzicht Datacenter Resources*/
    .ddc-resource-overview-btn{
        display:inline-block;
        vertical-align:top;
        padding:10px 15px; margin:0 6px 18px 0;
        color:#808080;
        background:#ffffff;
        /*text-shadow: 1px 1px 0px rgba(255,255,255,1);*/
        font-size: 32px;
        line-height:28px;
        font-family: 'BreuerTextBold';
        border: 1px solid #b3b3b3 !important;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
        -o-border-radius: 5px;
        -ms-border-radius: 5px;
        -khtml-border-radius: 5px;
        border-radius: 5px;
    }
    .ddc-resource-btn-overview-unit {
        display:inline-block;
        vertical-align:top;
        font-size:10px;
        line-height:11px;
        font-family:Verdana;
        margin-left:3px;
        color:#666666;
        margin-top:2px
    }
    /*
    #ddc-subnavigation {z-index:2;height:42px;line-height:42px;border:1px solid #CCCCCC;}
    */

    .easyPieChart {position: relative; text-align:center; float:left; margin:10px 30px 40px 10px; font:20px Verdana}
    .easyPieChart .label {line-height:11px; font-size:13px; margin-top:10px;font-family: 'BreuerTextBold';}
    .easyPieChart canvas {position: absolute;top: 0;left: 0;}

    /* Overzicht Datacenter Servers */
    .ddc-server {position:relative; min-width:323px; width:24%; margin-right:1%; margin-bottom:10px;padding:10px; clear:none; float:left; overflow:visible; vertical-align:top; min-height:120px}
    @media screen and (max-width: 670px) {.ddc-server {width:100%; margin-right:0}}
    .ddc-server-running  {border:solid green;border-width:1px 1px 1px 12px;}
    .ddc-server-stopped  {border:solid lightgrey;border-width:1px 1px 1px 12px;}
    .ddc-server-updating {border:solid orange;border-width:1px 1px 1px 12px;}
	.ddc-server-unknown  {border:solid red;border-width:1px 1px 1px 12px;}

    .ddc-server h3 {margin-top:0; margin-bottom:9px; line-height:20px; width: 92%;}
    .ddc-server .icon-arrow-down {display: none}
    .ddc-server .context-menu {width: 18px}
    .ddc-server p {margin-bottom:0px}
    .ddc-server-os-windows { background:url(../images/windows.png) no-repeat; padding-left:24px;margin-right:6px}
    .ddc-server-os-linux { background:url(../images/linux.png) no-repeat; padding-left:24px;margin-right:6px}
    .ddc-server-ip { width:215px; display:block}

    .context-menu {position:absolute; top:10px; right:10px;width:40px}
        .context-menu-trigger {cursor:pointer}
        .context-menu-trigger:hover {background:#CCC}
        .context-menu-content { border:1px solid #cccccc; width:180px; background:#F0F0F0; z-index:9999; padding:5px; display:none; position:absolute; top:18px; right:0}
        .context-menu-content .span-icon {margin-right:5px}
        .context-menu-content a { display:block; margin-bottom:6px}
        .context-menu-content a:hover {text-decoration:none; background:#CCC}

    /* Server Details */
    .ddc-server-details .ddc-server-cost {position:absolute; top:0px; right:11px; text-align:right}
        /* default */
        .ddc-server-details .ddc-server-cost-running {color:green;font-weight:bold}
        /* inactive server or spec */
        .ddc-server-details-stopped .ddc-server-cost-running,
        .ddc-server-spec-stopped .ddc-server-cost-running {font-weight:normal}
        .ddc-server-details-stopped .ddc-server-cost-stopped,
        .ddc-server-spec-stopped .ddc-server-cost-stopped {font-weight:bold}
        .ddc-details-table td, .ddc-details-table th {border:1px solid #cccccc}
        .ddc-details-table td { background-color:#ffffff;}
        .ddc-details-table th {vertical-align:middle;background: #d9d9d9;}
        .ddc-details-table ul {margin:0}
        .ddc-details-table li {line-height:18px}
    /* ddc-ports-list */
    .ddc-ports-list li {background:none; padding-left:0; display:inline-block; width:150px}

    /* Pending Tasks */
    .pending-tasks-container {position:absolute; top:15px; right:15px; width:50%;}
    .pending-tasks-trigger {float:right}
    .pending-tasks-content {float:right;background:#ffffff;width:100%;z-index:9999;display:none}

    /* Toggle general */
    .toggle-trigger {cursor:pointer}
    .toggle-content {display:none}


/* Final Resets
-------------------------------------------------------------- */
.searchlist .searchselectors .searchselector, button.delete {
    -moz-border-radius: 0px;
    -webkit-border-radius: 0px;
    -o-border-radius: 0px;
    -ms-border-radius: 0px;
    -khtml-border-radius: 0px;
    border-radius: 0px;
}
#autopostbackfix {display:none} /* needed to solve auto postback issue */

/* --------------------------------------------------------------
* qTip2 - Pretty powerful tooltips
* http://craigsworks.com/projects/qtip2/
*
* Version: nightly
* Copyright 2009-2010 Craig Michael Thompson - http://craigsworks.com
*
* Dual licensed under MIT or GPLv2 licenses
*   http://en.wikipedia.org/wiki/MIT_License
*   http://en.wikipedia.org/wiki/GNU_General_Public_License
*
* Date: Sun Nov 13 11:19:27.0000000000 2011
*/

/* Core qTip styles */
.ui-tooltip
{
    position: absolute;
    left: -28000px;
    top: -28000px;
    display: none;
    max-width: 300px;
    min-width: 50px;
    z-index: 15000;
    padding:0px;
}
/* Fluid class for determining actual width in IE */
.ui-tooltip-fluid
{
    display: block;
    visibility: hidden;
    position: static !important;
    float: left !important;
}
.ui-tooltip-content
{
    position: relative;
    padding: 10px;
    overflow: hidden;
    border-width: 1px;
    border-style: solid;
    text-align: left;
    word-wrap: break-word;
    overflow: hidden;
}
.ui-tooltip-titlebar
{
    position: relative;
    min-height: 14px;
    padding: 5px 35px 5px 10px;
    overflow: hidden;
    border-width: 1px 1px 0;
    border-style: solid;
    font-weight: bold;
}
.ui-tooltip-titlebar + .ui-tooltip-content
{
    border-top-width: 0px !important;
}
/*! Default close button class */
.ui-tooltip-titlebar .ui-state-default
{
    position: absolute;
    right: 4px;
    top: 50%;
    margin-top: -9px;
    cursor: pointer;
    outline: medium none;
    border-width: 1px;
    border-style: solid;
}
* html .ui-tooltip-titlebar .ui-state-default{ top: 16px; } /* IE fix */
.ui-tooltip-titlebar .ui-icon,
.ui-tooltip-icon .ui-icon
{
    display: block;
    text-indent: -1000em;
}
.ui-tooltip-icon .ui-icon
{
    width: 18px;
    height: 14px;
    text-align: center;
    text-indent: 0;
    font: normal bold 10px/13px Tahoma,sans-serif;
    color: inherit;
    background: transparent none no-repeat -100em -100em;
}
/* Applied to 'focused' tooltips e.g. most recently displayed/interacted with */
.ui-tooltip-focus{

}
/* Applied on hover of tooltips i.e. added/removed on mouseenter/mouseleave respectively */
.ui-tooltip-hover{

}
/*! Default tooltip style */
.ui-tooltip-default .ui-tooltip-titlebar,
.ui-tooltip-default .ui-tooltip-content
{
    background: transparent;
    background: #3E3E3E;
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#D9000000,endColorstr=#D9000000);
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#D9000000,endColorstr=#D9000000)";
    color: white;
    border-color: #CCCCCC;
}
.ui-tooltip-default .ui-tooltip-titlebar{
    background-color: #FFEF93;
    }
.ui-tooltip-default .ui-tooltip-icon{
    border-color: #222;
    background: #F1F1F1;
    color: #777;
}
.ui-tooltip-default .ui-tooltip-titlebar .ui-state-hover{
    border-color: #303030;
    color: #111;
}

/* Tips plugin */
.ui-tooltip .ui-tooltip-tip{
    margin: 0 auto;
    overflow: hidden;
    z-index: 10;
}
.ui-tooltip .ui-tooltip-tip,
.ui-tooltip .ui-tooltip-tip *{
    position: absolute;
    line-height: 0.1px !important;
    font-size: 0.1px !important;
    color: #123456;
    background: transparent;
    border: 0px dashed transparent;
}
.ui-tooltip .ui-tooltip-tip canvas{ top: 0; left: 0; }

/*! Add shadows to your tooltips in: FF3+, Chrome 2+, Opera 10.6+, IE6+, Safari 2+ */
.ui-tooltip-shadow
{
    -moz-box-shadow: 2px 2px 11px #666;
    -webkit-box-shadow: 2px 2px 11px #666;
    box-shadow: 2px 2px 11px #666;
}
.ui-tooltip-shadow .ui-tooltip-titlebar,
.ui-tooltip-shadow .ui-tooltip-content{
    filter: progid:DXImageTransform.Microsoft.Shadow(Color='gray', Direction=135, Strength=3);
    -ms-filter:"progid:DXImageTransform.Microsoft.Shadow(Color='gray', Direction=135, Strength=3)";
}

/*! Add rounded corners to your tooltips in: FF3+, Chrome 2+, Opera 10.6+, IE9+, Safari 2+ */
.ui-tooltip-rounded,
.ui-tooltip-rounded .ui-tooltip-content{
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
}
.ui-tooltip-rounded .ui-tooltip-titlebar{
    -moz-border-radius: 5px 5px 0 0;
    -webkit-border-radius: 5px 5px 0 0;
    border-radius: 5px 5px 0 0;
}
.ui-tooltip-rounded .ui-tooltip-titlebar + .ui-tooltip-content{
    -moz-border-radius: 0 0 5px 5px;
    -webkit-border-radius: 0 0 5px 5px;
    border-radius: 0 0 5px 5px;
}

/* IE9 fix - removes all filters */
.ui-tooltip:not(.ie9haxors) div.ui-tooltip-content,
.ui-tooltip:not(.ie9haxors) div.ui-tooltip-titlebar{
    filter: none;
    -ms-filter: none;
}

/* FancyBox 2.0.1
------------------------------------------------ */
.fancybox-tmp {
    position: absolute;
    top: -9999px;
    left: -9999px;
    padding: 0;
    overflow: auto;
    visibility: hidden;
}

.fancybox-tmp iframe, .fancybox-tmp object {
    vertical-align: top;
    padding: 0;
    margin: 0;
}

.fancybox-wrap {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1002;
}

.fancybox-outer {
    padding: 0;
    margin: 0;
    background: #f9f9f9;
    color: #444;
    text-shadow: none;
    -webkit-border-radius: 4px;
       -moz-border-radius: 4px;
            border-radius: 4px;
}

.fancybox-opened {
    z-index: 1003;
}

.fancybox-opened .fancybox-outer {
    -webkit-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
       -moz-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
}

.fancybox-inner {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    position: relative;
    outline: none;
    overflow: hidden !important;
}

.fancybox-error {
    color: #444;
    font: 14px/20px "Helvetica Neue",Helvetica,Arial,sans-serif;
    margin: 0;
    padding: 10px;
}

.fancybox-image, .fancybox-iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    padding: 0;
    margin: 0;
    vertical-align: top;
}
.fancybox-image {
    max-width: 100%;
    max-height: 100%;
}
#fancybox-loading {
    position: fixed;
    top: 50%;
    left: 50%;
    margin-top: -21px;
    margin-left: -21px;
    width: 42px;
    height: 42px;
    background: url('../images/fancybox/fancybox_loading.gif');
    opacity: 0.9;
    cursor: pointer;
    z-index: 1010;
}
.fancybox-close, .fancybox-prev span, .fancybox-next span {
    background-image: url('../images/fancybox/fancybox_sprite.png');
}
.fancybox-close {
    position: absolute;
    top: -18px;
    right: -18px;
    width: 36px;
    height: 36px;
    cursor: pointer;
    z-index: 1004;
}
.fancybox-prev, .fancybox-next {
    position: absolute;
    top: 0;
    width: 40%;
    height: 100%;
    cursor: pointer;
    background: transparent url('../images/fancybox/blank.gif'); /* helps IE */
    z-index: 1003;
}
.fancybox-prev {left: 0;}
.fancybox-next {right: 0;}
.fancybox-prev span, .fancybox-next span {
    position: absolute;
    top: 50%;
    left: -9999px;
    width: 36px;
    height: 36px;
    margin-top: -18px;
    cursor: pointer;
    z-index: 1003;
}
.fancybox-prev span {background-position: 0 -36px;}
.fancybox-next span {background-position: 0 -72px;}
.fancybox-prev:hover, .fancybox-next:hover {visibility: visible;}
.fancybox-prev:hover span {left: 20px;}
.fancybox-next:hover span {left: auto;right: 20px;}
/* Overlay helper */
#fancybox-overlay {
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    display: none;
    z-index: 1001;
    background: #000;
}
/* Title helper */
.fancybox-title {
    visibility: hidden;
    font: normal 13px/20px "Helvetica Neue",Helvetica,Arial,sans-serif;
    position: relative;
    text-shadow: none;
    z-index: 1005;
}
.fancybox-opened .fancybox-title {
    visibility: visible;
}
.fancybox-title-float-wrap {
    position: absolute;
    bottom: 0;
    right: 50%;
    margin-bottom: -35px;
    z-index: 1003;
    text-align: center;
}
.fancybox-title-float-wrap .child {
    display: inline-block;
    margin-right: -100%;
    padding: 2px 20px;
    background: transparent; /* Fallback for web browsers that doesn't support RGBa */
    background: rgba(0, 0, 0, 0.7);
    -webkit-border-radius: 15px;
       -moz-border-radius: 15px;
            border-radius: 15px;
    text-shadow: 0 1px 2px #222;
    color: #FFF;
    font-weight: bold;
    line-height: 24px;
    white-space: nowrap;
}
.fancybox-title-outside-wrap {
    position: relative;
    margin-top: 10px;
    color: #fff;
}
.fancybox-title-inside-wrap {
    margin-top: 10px;
}
.fancybox-title-over-wrap {
    position: absolute;
    bottom: 0;
    left: 0;
    color: #fff;
    padding: 10px;
    background: #000;
    background: rgba(0, 0, 0, .8);
}

/* jQuery UI Slider
------------------------------------------------ */
.ui-slider {text-decoration: none !important;}
.ui-slider .ui-slider-handle  {overflow: visible !important;}
.ui-slider .ui-slider-tooltip {display: none;}
.ui-slider .screenReaderContext {position: absolute;width: 0;height: 0;overflow: hidden;left: -999999999px;}
.ui-slider .ui-state-active .ui-slider-tooltip, .ui-slider .ui-state-focus .ui-slider-tooltip, .ui-slider .ui-state-hover .ui-slider-tooltip {
    display: block;position: absolute;bottom: 2.5em;text-align: center;padding: .3em .2em .4em;font-size: .9em;width: 15em;margin-left: -7em;}
.ui-slider .ui-slider-tooltip .ui-tooltip-pointer-down, .ui-slider .ui-slider-tooltip .ui-tooltip-pointer-down-inner {
    position: absolute;display: block;width:0;height:0;border-bottom-width: 0;background: none;}
.ui-slider .ui-slider-tooltip .ui-tooltip-pointer-down {
    border-left: 7px dashed transparent;border-right: 7px dashed transparent;border-top-width: 8px;bottom:-8px;right: auto;left: 50%;margin-left: -7px;}
.ui-slider .ui-slider-tooltip .ui-tooltip-pointer-down-inner {
    border-left: 6px dashed transparent;border-right: 6px dashed transparent;border-top: 7px solid #fff;bottom: auto;top: -9px;left: -6px;}
.ui-slider a {text-decoration: none;}
.ui-slider ol, .ui-slider li, .ui-slider dl, .ui-slider dd, .ui-slider dt {list-style: none;margin: 0;padding: 0;}
.ui-slider ol, .ui-slider dl {position: relative;top: 1.3em;width: 100%;}
.ui-slider dt {top: 1.5em;position: absolute;padding-top: .2em;text-align: center;border-bottom: 1px dotted #ddd;height: .7em;color: #999;}
.ui-slider dt span {background: #fff;padding: 0 .5em;}
.ui-slider li, .ui-slider dd {position: absolute;overflow: visible;color: #666;}
.ui-slider span.ui-slider-label {position: absolute;}
.ui-slider li span.ui-slider-label, .ui-slider dd span.ui-slider-label {display: none;}
.ui-slider li span.ui-slider-label-show, .ui-slider dd span.ui-slider-label-show {display: block;}
.ui-slider span.ui-slider-tic {position: absolute;left: 0;height: .8em;top: -1.3em;}
.ui-slider li span.ui-widget-content, .ui-slider dd span.ui-widget-content {border-right: 0;border-left-width: 1px;border-left-style: solid;border-top: 0;border-bottom: 0;}
.ui-slider .first .ui-slider-tic, .ui-slider .last .ui-slider-tic {display: none;}
.ui-slider-scale {margin-left: 0px !important;}

/* jQuery UI Modal
------------------------------------------------ */
.ui-widget-overlay {background:none; background-color: rgba(255, 255, 255, 0.75); -webkit-transition: 200ms opacity;}
.ui-dialog {background: white; box-shadow: 0 4px 23px 5px rgba(0, 0, 0, 0.2), 0 2px 6px rgba(0,0,0,0.15);}
.dialog-box {display:none}

/* jQuery UI datepicker extension for time
	------------------------------------------------ */
.ui-timepicker-div .ui-widget-header { margin-bottom: 8px; }
.ui-timepicker-div dl { text-align: left; }
.ui-timepicker-div dl dt { float: left; clear:left; padding: 0 0 0 5px; }
.ui-timepicker-div dl dd { margin: 0 10px 10px 45%; }
.ui-timepicker-div td { font-size: 90%; }
.ui-tpicker-grid-label { background: none; border: none; margin: 0; padding: 0; }

.ui-timepicker-rtl{ direction: rtl; }
.ui-timepicker-rtl dl { text-align: right; padding: 0 5px 0 0; }
.ui-timepicker-rtl dl dt{ float: right; clear: right; }
.ui-timepicker-rtl dl dd { margin: 0 45% 10px 10px; }