/* These use the new-icons.png sprite, change position when png grows */
.orderbutton    {background:url("../images/new-icons.png") -160px 0px no-repeat;}
.infobutton     {background:url("../images/new-icons.png") -140px -20px no-repeat;}
ul.ul-checks li {background:url("../images/new-icons.png") -120px -40px no-repeat; line-height:20px}
ul li           {background:url("../images/new-icons.png") -100px -60px no-repeat; padding-left:20px;}
body            {
    background: #ffffff;
    background: -moz-linear-gradient(top,  #f7f7f7 0%, #ffffff 70%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f7f7f7), color-stop(70%,#ffffff));
    background: -webkit-linear-gradient(top,  #f7f7f7 0%,#ffffff 70%);
    background: -o-linear-gradient(top,  #f7f7f7 0%,#ffffff 70%);
    background: -ms-linear-gradient(top,  #f7f7f7 0%,#ffffff 70%);
    background: linear-gradient(to bottom,  #f7f7f7 0%,#ffffff 70%);
    background-repeat: no-repeat;
    background-attachment: fixed;
}
#main-clickable {
    background-repeat: no-repeat;
    background-attachment: fixed;
    filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#f7f7f7, endColorstr=#ffffff);
}
.slidepanel .loading
{
    background-color:rgba(255,196,33,0.8);
    background-image: url("../images/loading-yellow.gif");
    background-position: 50% 50%;
    background-repeat: no-repeat}

.cat-domeinnamen        {background-image: url("../images/cat_domeinnamen.jpg")}
.cat-webhosting         {background-image: url("../images/cat_webhosting.jpg")}
.cat-mailhosting        {background-image: url("../images/cat_mailhosting.jpg")}
.cat-collaboration      {background-image: url("../images/cat_collaboration.jpg");padding:20px 200px 20px 20px;}
.cat-serverhosting      {background-image: url("../images/cat_serverhosting.jpg")}
.cat-applicationhosting {background-image: url("../images/cat_applicationhosting.jpg")}
.cat-security           {background-image: url("../images/cat_security.jpg")}
.cat-abouthostbasket    {background-image: url("../images/cat_abouthostbasket.jpg")}
.cat-partners           {background-image: url("../images/cat_partners.jpg")}
.cat-dynamiccloud       {background-image: url("../images/cat_dynamiccloud.jpg")}

/* Background colors
----------------------------------------------------------- */
::-moz-selection {background:#ffc421; color:#000000}
::selection {background:#ffc421; color:#000000}
.slidepanel_content, .slidepanel_controls, .slidepanel_controls li, .banner.yellow {background:#ffc421;}
.GridHeaderStyle, .GridStyle .first, th {background:#dedede;}

/* Borders
----------------------------------------------------------- */
#frame_writetlds, .frame.info {border:1px solid #ffc421}

/* Contact
-------------------------------------------------------------- */
.contact {height:40px; position:absolute; top:35px; left:88px; z-index:3;
          font-family:'BreuerTextLight'; font-size:17px}
.contact h2 { font-family:'BreuerTextLight'; font-size:17px; line-height:17px; margin-bottom:6px}
.contact a, .contact a:visited { color:#595959}
.contact span {display:inline-block; float:left; margin-right:6px; line-height:21px}
.contact span span { width:21px; height:21px; background-image:url(../images/icons-21px.png); margin-right:3px}
.contact-phone span { background-position:0 0}
.contact-faq span { background-position:-21px 0}
.contact-mail span { background-position:-42px 0}

/* Focus Fields
----------------------------------------------------------- */
.dataform input[type=text]:focus, .dataform input[type=password]:focus, select:focus, textarea:focus
{
    -moz-box-shadow: 0px 0px 4px #FFC421;
    -webkit-box-shadow: 0px 0px 4px #FFC421;
    box-shadow: 0px 0px 4px #FFC421;
}

/* Font colours
-------------------------------------------------------------- */
#languages a.current,
a.orderbutton, a.orderbutton:hover, a.orderbutton:visited,
#sbox-controls ul a.cur
    {color:#ED1C24;} /* red */
h1, strong, a, a:active, a:focus, a:hover, a:visited,
div#subnavigation li.current /*myportal*/,
div#subnavigation a.active /*myproducts*/
    {color:#F26534}    /* orange */

/* Logo
-------------------------------------------------------------- */
#logo-tn {width:68px; height:68px;  background-image: url("../images/sprites.png"); background-position:0 0px; position:absolute; left:0px; top:20px; text-indent:-9000px; z-index:3 }
#logo-hb {width:182px; height:29px; background-image: url("../images/sprites.png"); background-position:-68px 0px; position:absolute; right:30px; top:50px; text-indent:-9000px; z-index:3 }
#logo-hb a, #logo-tn a {display:block; height:100% }

/* Parking Page
-------------------------------------------------------------- */
.parking .logo { background:url("../images/generic-logos.png") no-repeat; display:block; text-indent:-9999px; position:absolute}
.parking .logo.telenet { width:59px; height:59px}
.parking .logo.hostbasket { width:160px; height:59px; background-position:-59px 0; right:0}
.parking .header {background:#ffc421;}
.parking .header h1 { color:#595959}

/* Navigation
-------------------------------------------------------------- */
#navigation { background: #f7f7f7 url("../images/sprites.png") 0 -68px;}

/* Quotes klantenverhalen
-------------------------------------------------------------- */
#quotes-outer { padding:15px; background-color:#ffc421; margin-bottom:0}
#quotes-outer p { margin-bottom:0px}
.quote p { font-style:italic; padding:5px}

/* Ribbon
-------------------------------------------------------------- */
.ribbon {background:url(../images/sprites.png) 0 -109px}


/* Header
-------------------------------------------------------------- */
#header-language {
    background-color: #ffc434;
    top:0px !important;;
    right:0px;
    padding: 0 10px;
}
#header-language td{
    padding: 5px 1px;
}
#header-sitemode{
    position: absolute;
    top: 0;
    right: 100px
}
#header a.logo-myaccount{
    position: absolute;
    top: 30px;
    right: 10px;
    height: 50px;
    width: 190px;
}
#header .logo-tn{
    width: 215px;
    height: 68px;
    background-image: url("../../hostbasket/images/sprites.png");
    background-position: -765px 0px;
    position: absolute;
    left: 30px;
    top: 8px;
    text-indent: -9000px;
    z-index: 3;
}
#header{
    height:85px;
}