/*  mindcontrolled.nl

    for mindconnect.nl
*/

/*  General
*/
body {
    background-color: #f5f5f5;
    
    padding: 0;
    margin: 0;
    
    font-family: tahoma, sans-serif;
    font-size: 14px;
    
    color: black;
}

a {
    color: black;
    text-decoration: none;
}

img {
    border: 0;
}

.hidden {
    display: none;
    visibility: hidden;
}




/*  Clearfix
*/
.cleargroup:after {
  content: "";
  display: table;
  clear: both;
}

/*  Container is centered and has the whole site.
*/
#container {
    width: 940px;
    margin: 0 auto;
    
    background-color: white;
}

/*  Pad content equally, on all sides.

    Top contains the logo and top menu
    contentcontainer has all content
    Footer has the footer links
*/
#container,
#top,
#contentcontainer /*,
#footer*/ {
    padding: 10px;
}

/*  Header has:
    logo and top menu
    visual (header image)
    menu tabs
    submenu's
    breadcrumbs
*/
#header {
    margin-top: 0.8em;
}

#logo {
    float: left;
    
    margin: 0;

    font-size: 32px;
    letter-spacing: -2px;
}

#topmenu {
    margin-top: 1em;
    padding: 0;
    float: right;
    
    font-size: 16px;
    font-weight: bold;
}

#topmenu ul,
#mainsubmenu ul,
#breadcrumbs ul,
#mainmenutabs ul /*,
#footer ul*/ {
    margin: 0;
    padding: 0;
    
    list-style-type: none;
}

#topmenu li,
#mainsubmenu li,
#breadcrumbs li,
#mainmenutabs li /*,
#footer li*/ {
    display: inline;
}

/*  Top menu
*/
#topmenu li {
    margin-left: 20px;
}

#topmenu li:first-child {
    margin-left: 0;
}

#topmenu a {
    color: #00aeef;
}

#topmenu a span {
    color: #005288;
}

#topmenu a:hover,
#topmenu a.current,
#topmenu a:hover span,
#topmenu a.current span {
    color: #ffa900;
}

/*  Visual / Header image
*/
#visual {
    width: 100%;

    position: relative;
    
    background-position: center top;
    background-repeat: no-repeat;
}

#visual.bokeh {
    background-image: url(../images/headers/colorbokeh.jpg);
}

#visual.tulpen {
    background-image: url(../images/headers/tulpen.jpg);
}

#visual.zonsondergang {
    background-image: url(../images/headers/zonsondergang.jpg);
}

#visual.snelweg {
    background-image: url(../images/headers/snelweg.jpg);
}

#visual.long {
    height: 288px;
}

#visual.short {
    height: 130px;
}

/*  Infoweergave in header
*/
#visual.long #fact {
    width: 100%;
    position: absolute;
    top: 90px;

    color: #ffffff;
    
    font-size: 20px;
    font-weight: bold;
    text-align: center;
    
    letter-spacing: -1px;
    
    text-shadow: rgba(0, 0, 0, 0.4) 1px 1px 0px;
}

#fact a {
    color: #ffffff;
    
    text-decoration: underline;
}

sup {
    font-size: 65%;
    
    letter-spacing: 0;
}

/*  Main menu
    This has the main menu tabs, plus anything else in the
    half-transparent banner over the visual.
*/
#mainmenu {
    /*height: 2.4em;*/
    height: 38px;
    width: 100%;

    /*  position absolute within #visual, 48px from the bottom.
        
    */
    position: absolute;
    bottom: 72px; /* 48px */
    
    background-image: url(../images/transparent.png);
}

#mainmenu a {
    color: white;
}

/*#mainmenu a span {
    text-decoration: underline;
}*/

#collapsebutton,
#expandbutton {
    position: absolute;
    
    top: 12px;
    right: 12px;
    
    font-size: 0.7em;
}

#cart {
    position: absolute;
    
    top: 8px;
    right: 10px;
    
    font-size: 16px;
    font-weight: bold;
    
    text-shadow: #454545 1px 1px 0px;
}

#cart span.badge {
    margin-left: 5px;
    padding: 1px 6px 2px 6px;
    
    background-color: #005288;
    /*background-color: #00aeef;*/
    /*background-color: #6fc400;
    text-shadow: #3c6a00 1px 1px 0px;*/
    border-radius: 8px;
    
    text-decoration: none;
}

/*  Main menu tabs
    General styles:
    Every tab is a list item (li) containing and anchor (a).
    The anchors are larger than the list items, blowing up the list items
    to the size of the anchor.
    
    The tabs are rounded and when inactive, have a shadow at the bottom.
    When hovered, they have a full color and the text in white.
*/
#mainmenutabs {
    position: absolute;
    bottom: 8px;
}

#mainmenutabs ul {
    margin-left: 6px;
    
    font-size: 16px;
    font-weight: bold;
}

#mainmenutabs li {
    margin-right: 6px;
}

/*  General tabs
    Tabs that have no style end with these.
*/
#mainmenutabs a {
    padding: 5px 24px 8px 24px;
    
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    
    color: black;
    /*background-color: white;*/
    
    background: white url(../images/shadow-tab.png) repeat-x center bottom;
}

#mainmenutabs a:hover {
    color: white;
    background: #4a4a4a;
}

/*  Tab for webhosting
    Every tab should have:
    - a name (webhosting)
    - a plain anchor
    - a hover and current anchor
*/
#mainmenutabs a.webhosting {
    color: #00aeef;
}

#mainmenutabs a.webhosting:hover,
#mainmenutabs a.webhosting.current {
    color: white;
    background: #00aeef;
}

/*  Tab for domeinnamen
*/
#mainmenutabs a.domeinnamen {
    color: #005288;
}

#mainmenutabs a.domeinnamen:hover,
#mainmenutabs a.domeinnamen.current {
    color: white;
    background: #005288;
}

/*  Tab for meetpakket
    Hover has text-shadow applied for better readability
*/
#mainmenutabs a.meetpakket {
    color: #599d00;
}

#mainmenutabs a.meetpakket:hover,
#mainmenutabs a.meetpakket.current {
    color: white;
    background: #599d00;
    
    /*text-shadow: #a26c00 1px 1px 0px;*/
}

/*  Tab for X
    Hover has text-shadow applied for better readability
*/
#mainmenutabs a.X {
    color: #ec9d00;
}

#mainmenutabs a.X:hover,
#mainmenutabs a.X.current {
    color: white;
    background: #ec9d00;
    
    text-shadow: #a26c00 1px 1px 0px;
}
/*  END tabs
*/


/*  Main submenu
    
*/
#mainsubmenu,
#importantnotice {
    width: 100%;
    height: 24px;

    padding: 0;

    /*  position absolute within #visual, 24px from the bottom. */
    position: absolute;
    bottom: 48px;

    background-color: #f5f5f5;
}

#importantnotice {
	background-color: #ff6600;
	bottom: 24px;
}

#importantnotice p {
	font-size: 13px;
	font-weight: bold;
	line-height: 17px;
	color: white;
	padding: 3px 16px 4px 16px;
	margin: 0;
}

#importantnotice a {
	color: white;
	text-decoration: underline;
}


/*  Submenus:
    Every sub should have:
    - a name (like webhosting)
    - a background color covering the whole submenu
      this is also the color buttons will have when not active
    - a hover and current anchor for the buttons on the submenu

    Colors for every submenu:
*/
#mainsubmenu.webhosting {
    background-color: #00aeef;
}

#mainsubmenu.domeinnamen {
    background-color: #005288;
}

#mainsubmenu.meetpakket {
    background-color: #599d00;
}

#mainsubmenu.X {
    background-color: #ec9d00;
}

/*  General things for the items in the submenu.

    The height of #mainsubmenu is 24 pixels with 0 padding.
    This ul has a calculated border padding of 5px.
    To vertical center the text on the buttons, we want a top padding of 3px.
    24px - 3 - 4 = height: 17px;
    
    If we don't specify this, Webkit will end up measuring the ul at 15.5 px high, and cause problems.
    
    Then;
    Font size is done in pt here, to prevent rendering differences of 0.5 or 1 px between Firefox and Chrome.
    
    No wait.
    
    The li can still be 16px in Chrome when it's 17px in Firefox.
    
    Ok I don't get it. It's just weird, ok?
*/
#mainsubmenu ul {
    padding: 3px 0 0;
    height: 17px;
    
    font-size: 13px;
    line-height: 17px;
    font-weight: bold;
}

/*  We're pushing the borders of this a outside.
    The ul has a top-padding of 3px, so that's what we want here too.
*/
#mainsubmenu a {
    color: #4a4a4a;
   
    padding: 3px 16px 4px 16px;
}

#mainsubmenu a:hover,
#mainsubmenu a.current {
    color: white;
    background-color: #4a4a4a;
}

/*  Submenu item styles for webdesign and domeinnamen
    Colors for hover and active
*/
#mainsubmenu.webdesign a {
    color: white;
    text-shadow: #a26c00 1px 1px 0px;
}

#mainsubmenu.webhosting a,
#mainsubmenu.domeinnamen a,
#mainsubmenu.meetpakket a {
    color: white;
}

#mainsubmenu.webhosting a:hover,
#mainsubmenu.webhosting a.current,
#mainsubmenu.domeinnamen a:hover,
#mainsubmenu.domeinnamen a.current,
#mainsubmenu.meetpakket a:hover,
#mainsubmenu.meetpakket a.current
{
    color: white;
    background-color: #0092c8;
}

#mainsubmenu.webdesign a:hover,
#mainsubmenu.webdesign a.current {
    color: white;
    background-color: #be7e00;
}

#mainsubmenu.meetpakket a:hover,
#mainsubmenu.meetpakket a.current {
    color: white;
    background-color: #6fc400;
}

/*  Breadcrumbs

*/
#breadcrumbs {
    /* width: 912px; 100% minus padding; */
    width: 100%;
    height: 21px;
    
    padding: 3px 0 0 0;
    
    /*  position absolute within #visual, 0px from the bottom. */
    position: absolute;
    bottom: 0;
    
    font-size: 13px;
    color: #a2a2a2;
}

#breadcrumbs li {
    margin-right: 5px;
}

/*  Put an arrow before every crumb
*/
#breadcrumbs li:before {
    content: "\00BB \0020";
}

/*  Except for the first one.
*/
#breadcrumbs li:first-child:before {
    content: "";
    
    /* when changing this, you may want to change the padding for submenu items as well */
    padding-left: 16px;
}

#breadcrumbs a {
    color: #888888;
}

#breadcrumbs a:hover {
    color: #000000;
}

/*  Contentcontainer

*/
#contentcontainer {
    padding-left: 0;
    padding-right: 0;
}

/*  General components inside contentcontainer
*/
#contentcontainer a,
#contentcontainer a:visited,
#cart-contents a,
#cart-contents a:visited {
    color: #888888;
    
    text-decoration: none;
    
    border-bottom: 1px solid #888888;
}

#contentcontainer a:hover,
#cart-contents a:hover {
    color: #000000;
    
    border-bottom: 1px solid #00aeef;
}

#contentcontainer ol.faqtop5 {
    font-size: 13px;
    line-height: 24px;
    
    padding-left: 26px;
}



/*  Headings
*/
h1 {
    font-size: 22px;
    
    margin: 16px 0;
}

h1:first-child {
    margin-top: 0px;
}

h2 {
    font-size: 16px;
    
    margin: 12px 0;
}



/*  If the first element is a h2, or if the h2 is preceded
    by an icon.
*/
h2:first-child,
img.snippeticon + h2,
img.snippeticon + h1 {
    margin-top: 0px;
}

h3 {
    font-size: 14px;
    
    margin: 8px 0;
}

h3:first-child {
    margin-top: 0px;
}


/*  Paragraphs
*/
p {
    margin: 10px 0;

    font-size: 14px;
    line-height: 24px;
}



/*  Grid alignment

    Basics from bootstrap 2.2.2
    Using Bootstrap auto clearfix for grid layout
*/

/*  A row is 960 px wide, with a left margin of -20px;
    This means the whole row *grows* 20px to the left.
    The zoom is for the auto clear fix.
*/
.row {
    margin-left: -20px;
    *zoom: 1;
}

/*  Auto clear fix */
.row:before,
.row:after {
    display: table;
    line-height: 0;
    content: "";
}

.row:after {
    clear: both;
}

/*  When we encounter a nested row (row with a span that contains another row)
    Expand 30px on the left, 10px on the right. Then normal spanX's will fit again.
*/
.row > div[class*="span"] .row {
    margin: 10px -10px 0 -30px;
}
.row > div[class*="span"].bare .row {
    margin: 0px -10px 0 -20px;
}

/*  For every spanX that's directly under a row...
    - Float left so spans can stack.
    - Throw a 20px margin before starting the column.
    This will by default create a gutter if columns are stacked.
    - Add 10px padding all around
*/
.row > div[class*="span"] {
    float: left;
    min-height: 1px;
    margin-left: 20px;
    
    padding: 10px;
}

/*  Bare:
    No padding on a spanX, so we can use the full width of the column.
*/
div[class*="span"].bare {
    padding: 0;
}

/*  span4:
    960px - 20px (10px margin left and right) = 940px.
    940px should hold 3 columns.
    3 columns means 2 gutters of 20px wide.
    940px - 20px - 20px = 900px
    900px / 3 columns = 300px for every column.
    
    I'd like every column to have 10px padding, so:
    width: 280px
    default padding: 10px
    will make for a total width of 300px
*/
.span4 { width: 280px; }
.span4.bare { width: 300px; }

/*  span6:
    940px / 2 columns = 460px
    2 columns mean 1 gutter of 20px.
    460px - 20px = 440px;
*/
.span6 { width: 440px; }
.span6.bare { width: 460px; }

/*  span8:
    This should span 2 columns including the gutter in between.
    300px + 20px + 300px = 620px;
    
    Cheat: skip padding on the left side to precisely fit two nested 
    columns.
*/
.span8 { width: 600px; }
.span8.bare { width: 620px; }

/*  span12:
    This should span all 3 columns including their 2 gutters.
*/
.span12 { width: 920px; }
.span12.bare { width: 940px; }

/*  For tables:
*/

.span1 {
    width: 60px;
}

.span2,
table.pakketten th {
    /*  Padding is 10px in either side (width), we've got 6 columns.
        Borders are collapsed.

        /So column width is 940 / 6 = 156 - 20 = 136px;/
        940 - (5 x 20) / 6 - 20 = 120
    */
    width: 120px;
}

.span3 {
    width: 210px;
}
/*  END grid
    --------------------------
*/



/*  Notices at the top of the content.
*/
div.notice {
    color: white;
    background-color: #4b4b4b;
    
    text-shadow: black 1px 1px 0px;
    
    margin-bottom: 10px;
}

div.notice span:first-child {
    float: left;
    padding: 6px 0px;
}

div.notice span + span {
    float: right;
}

div.notice span a:first-child {
    margin-right: 10px;
}

div.notice a {
    color: white !important;
    font-weight: bold;
    text-decoration: none !important;
}

/*  Quickswitcher for pakketten
    groter/kleiner/in winkelmandje doen
*/
div.quickswitcher {
    width: 280px;
    float: left;
    
    color: #888888;
    font-size: 12px;
    text-align: center;
    
    padding: 7px 0px;
}

div.quickswitcher span {
    padding: 7px 0;
}

div.quickswitcher span a + a {
    margin-left: 6px;
}

div.incartbutton,
div.incartform {
    width: 300px;    
    float: right;
}

div.incartform form input[type="submit"],
div.incartform a.button {
    width: 100%;
}

/*  Icons in snippets.
    Usually the first child of a spanX, followed by a H2.
*/
img.snippeticon {
    float: right;
    
    margin-top: -16px;
    padding: 0;
}

/*  Customer experiences
*/
.referenties blockquote {
    margin: 0 0 0 5px;
    padding: 0;
    
    color: #888888;
    
    font-size: 16px;
    font-style: italic;
    line-height: 24px;
}

/*  Note
*/
.aantekening {
    font-size: 10px;
    
    color: #888888;
}


/*  Misc. effects
*/
.rounded {
    border-radius: 5px;
}

.shadow {
    text-shadow: #9f9f9f 1px 1px 0px;
}

/*  Mindconnect main colors
*/
.mc-donkerblauw {
    color: #005288;
}

.mc-felblauw {
    color: #00aeef;
}

.mc-oranje {
    color: #ffa900;
}


/*  Background colors
*/
.wit {
    background-color: #ffffff;
}

.lichtgrijs {
    /*background-color: #f0f0f0;*/
    background-color: #f5f5f5;
}

.middelgrijs {
    /*color: white;*/
    background-color: #d9d9d9;
    
    /*text-shadow: black 1px 1px 0px;*/
}

.donkergrijs {
    color: white;
    background-color: #4b4b4b;
    
    text-shadow: black 1px 1px 0px;
}

.dropshadow {
    box-shadow: 2px 2px 0px #d9d9d9;
}

/*  qtip-specific
    Override specific default qtip values
*/
.qtip-content {
    padding: 10px !important;
}

.qtip {
    font-size: 14px !important;
    
    max-width: 460px !important;
}

/*  Form field placeholders
*/
.placeholder {
    color: #888888;
}



/*  Forms
*/
form {
    margin: 0;
    padding: 0;
}


input[type="submit"],
#contentcontainer a.button {
    margin: 0;
    padding: 6px 8px;
    border: 0px solid white;
    
    font-family: tahoma, sans-serif;
    font-size: 14px;
    font-weight: bold;
    
    color: white;
    background-color: #0092c8;
    text-shadow: #000000 1px 1px 0px;
    
    border-radius: 4px;
    
    cursor: pointer;
}

/*  Links that look like form buttons ;-)
*/
#contentcontainer a.button {
    display: inline-block;
    
    box-sizing: border-box;
    -moz-box-sizing: border-box; 
    -ms-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    
    text-decoration: none;
    text-align: center;
    /*line-height: 30px;*/
    
    padding: 7px 8px;
}

input[type="submit"].current:hover,
#contentcontainer a.button:hover {
    background-color: #0092c8;
    text-shadow: #000000 1px 1px 0px;
}

input[type="submit"]:hover,
input[type="submit"].current,
#contentcontainer a.button {
    background-color: #6fc400;
    text-shadow: #3c6a00 1px 1px 0px;
}




/*  Oranje knop
*/
input[type="submit"].warning {
    color: white;
    background-color: #ff6000;
    
    text-shadow: #a23d00 1px 1px 0px;
}

input[type="submit"].warning:hover,
input[type="submit"].warning.current {
    color: #ff6000;
    background-color: white;
    
    /*text-shadow: none;*/
    /*text-shadow: #e65700 1px 1px 0px;*/
    text-shadow: #b94600 1px 1px 0px;
    
    padding: 3px 5px;
    border: 3px solid #ff6000;
}

/*  Disabled knop
*/
input[type="submit"].disabled,
input[type="submit"].disabled:hover,
input[type="submit"].disabled.current {
    color: #888888;
    background-color: white;
    
    /*text-shadow: #888888 1px 1px 0px;*/
    text-shadow: transparent 0px 0px 0px;
    
    padding: 4px 5px;
    border: 3px solid #e0e0e0;
    
    pointer: default;
}

textarea {
    padding: 8px;
    border: 2px solid #f0f0f0;
    
    font-family: tahoma, sans-serif;
}

input[type="text"],
select {
    background-color: white;
    
    padding: 6px 8px;

    border: 2px solid #f0f0f0;
    border-radius: 4px;
    
    font-family: tahoma, sans-serif;
    font-size: 14px;
}

label {
    font-size: 14px;
    line-height: 24px;
}

ul.form {
    margin: 0;
    padding: 0;
    
    list-style-type: none;
    
    font-size: 14px;
    line-height: 24px;
}

ul.form li {
    min-height: 34px;
}

/*  Only direct siblings need this,
    free for everything else.
*/
ul.form li > label {
    display: block;
    /*width: 140px;*/
    width: 33%;
    
    padding: 6px 0px;
    
    float: left;
}

/*  Padding is to correctly offset text
*/
ul.form li label + div {
    padding: 6px 0;
    width: 67%;
    
    float: right;
}

/*  Auto clear list items
*/
ul.form li {
    *zoom: 1;
}

/*  Auto clear fix */
ul.form li:before,
ul.form li:after {
    display: table;
    line-height: 0;
    content: "";
}

ul.form li:after {
    clear: both;
}
/*  END
    Auto clear
*/

/*  Default, 'full' length form field
    Fields are corrected for 6px padding top and bottom.
*/
ul.form li div input[type="text"],
ul.form li div input[type="submit"],
ul.form li div select {
    margin: -6px 0;
}

ul.form li div input[type="text"] {
    width: 274px;
}

ul.form li div input[type="text"].small {
    width: 76px;
}

ul.form li div input[type="text"].medium {
    width: 175px;
}

/*  All input fields but the first
*/
ul.form li div input ~ input {
    margin-left: 3px;
}

/*  END
    forms
*/



/*  Winkelmandje popup
*/
#cart-contents table.winkelmandje {
    margin: 0 0 10px 0;
}

#cart-contents table.winkelmandje,
#cart-contents table.winkelmandje td {
    font-size: 11px;
}

#cart-contents table.winkelmandje td {
/*    padding: 7px 6px;*/
}



/*  Tables
    
    Pakketeigenschappen-table
    Winkelmandje-table
    Domeincheck-table
*/

/*  Define padding for table cells
*/
th,
td {
    padding: 7px 10px;
    
    vertical-align: top;
    text-align: left;
}

table.domeincheck th,
table.domeincheck td {
    padding: 7px 5px;
}

table.pakketten td,
table.winkelmandje td,
table.domeincheck td {
    font-size: 14px;
}

table.pakketten,
table.winkelmandje,
table.domeincheck {
    width: 100%;
    margin-bottom: 20px;
    
    border-collapse: collapse;
}

table.domeincheck {
    background-color: white;
}

/*  Center the text on the first cell of the domeincheck table
*/
table.domeincheck tbody td:first-child {
    text-align: center;
}

/*  Table for specific pakket pages
*/
table.pakketten.klein td {
    font-size: 13px;
}



/*  Row highlighting for domains already in cart
*/
table.domeincheck tr.incart {
    color: white;
    text-shadow: #5a9e00 1px 1px 0px;
    
    background-color: #6fc400 !important;;
}

/*  Slightly different font style for this highlight (lightgreen instead of grey)
*/
table.domeincheck tr.incart td div.note {
    color: #d5ff9f;
    text-shadow: none;
}

/*  Different checkmark (white instead of green)
*/
table.domeincheck tr.incart td span.checkmark {
    color: white;
    text-shadow: #3c6a00 1px 1px 0px;
}

table.domeincheck tbody tr.incart span.gratis {
    color: #ffffff;
}

/*  A mouse-over for the highlighted row
*/
table.domeincheck tbody tr.incart:hover {
    color: white;
    
    text-shadow: #5a9e00 1px 1px 0px !important;
    
    background-color: #65b300 !important;
}
/*
*/



/*  Pakketten-table
*/
table.pakketten td,
table.pakketten th {
    border-left: 1px solid #f0f0f0;
    border-bottom: 1px solid white;
}

table.pakketten td:first-child,
table.pakketten th:first-child {
    border-left: 0px solid white;
}

/*  Slightly darker background color for every odd-numbered row.
*/
table.pakketten tbody tr:nth-child(odd),
table.domeincheck tbody tr:nth-child(odd) {
    background-color: #f8f8f8;
}

/*  Highlight row
*/
table.pakketten.rowhighlight tbody tr:hover,
table.domeincheck.rowhighlight tbody tr:hover {
    background-color: #f0f0f0;

    text-shadow: white 1px 1px 0px;
}



/*  Small notes in table cell
*/
table.pakketten td div,
table.winkelmandje td div,
table.domeincheck th div.note,
table.domeincheck td div.note {
    font-size: 10px;
    font-weight: normal;
    
    color: #888888;
}

/*  For shortening display of long domain names.
*/
div.clip-text-overflow {
    overflow: hidden;
    text-overflow: ellipsis;
    
    white-space: nowrap;
}

table.domeincheck td div.clip-text-overflow,
table.domeincheck th div.clip-text-overflow {
    float: left;
    
    margin-right: 5px;
    
    max-width: 265px;
}

/*  Note under submit button in pakketten table
*/
table.pakketten td form + div,
table.pakketten td a + div {
    margin: 5px 8px;
}

/*  Display checkmark with green color, dark green shade and set
    line-height so it is at about the same height as other text.
*/
span.checkmark {
    color: #6fc400;
    text-shadow: #3c6a00 1px 1px 0px;
    
    font-size: 22px;
    font-weight: bold;
    
    line-height: 10px;
}

/*  If domain isn't free
*/
span.checkmark.disabled {
    color: #dfdfdf;
    text-shadow: #c7c7c7 1px 1px 0px;
}

span.gratis {
    color: #6fc400;
/*    text-shadow: #3c6a00 1px 1px 0px;*/
    
    font-weight: bold;
}

/*  END tables
*/


/*  UnSlider slider
*/
.slider {
    position: relative;
    overflow: auto;
}

.slider.pakketten ul,
.slider.referenties ul {    
    padding: 0;
    margin: 0;
}

.slider.pakketten li,
.slider.referenties li {
    list-style: none;

    float: left;
}

.slider ul > li {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
}

.slider.pakketten ul > li,
.slider.referenties ul > li {
    width: 296px;
    padding: 8px 8px 30px 8px;
}

.slider .dots {
    position: absolute;
}

.dots li {
    display: inline-block;
    
    width: 10px;
    height: 10px;
    margin: 0 4px;

    text-indent: -999em;

    background: #f0f0f0;
    border-radius: 6px;

    cursor: pointer;

    -webkit-transition: background .5s, opacity .5s;
    -moz-transition: background .5s, opacity .5s;
    transition: background .5s, opacity .5s;
}
.dots li.active {
    background: #00aeef;
}

.slider.pakketten .dots {
    margin: 0 0 0 100px;
    padding: 0;
    
    bottom: 8px;
}


/*  END slider
*/


/*  Footer
*/
#footer {
    border-top: 1px solid #c0c0c0;
    
    font-size: 11px;
    
    padding-top: 15px;
}

#footer ul {
    list-style-type: none;
}

#footer div[class*="span"] > ul {
/*    margin-bottom: 10px;*/
    margin: 0;
    
    padding-left: 0px;
}

#footer div[class*="span"] > ul > li {
    margin-bottom: 10px;
}

#footer ul li a {
    color: #888888;
}

#footer ul li a:hover {
    color: #000000;
}

#footer ul li ul {
    padding-left: 5px;
    /*list-style-type: none;*/
}

#footer ul li ul li a {
    color: #c0c0c0;
}

#footer ul li ul li a:hover {
    color: #888888;
}

/*  Printing
*/
.forprintonly {
    visibility: hidden;
}

@media print {
    
    body {
        background-color: transparent;
    }
    
    #visual,
    #topmenu,
    input[type="submit"], a.button,
    #footer,
    div.debug {
        display: none;
        visibility: hidden;
    }
    
    .forprintonly {
        visibility: visible;
    }
    
    .donkergrijs {
        color: #000000;
        background-color: transparent;
        
        text-shadow: none;
    }
}

/*  Errors
*/
div.errors {    
    border; 1px solid #ffffff;
    
    color: #ffffff;
    background-color: #ff6000;
    
    margin: 0 0 10px 0;
    padding: 10px;
}

div.errors ul {
    margin: 0;
    padding-left: 20px;
    
    line-height: 20px;
}


/*  Debugging
*/
#debug {
    position: fixed;
    top: 10px;
    left: 10px;
    width: 200px;
    
    padding: 10px;
}