html {
    position: relative;
    min-height: 100%;
}

body {
    background:  #FBFBFB;
    margin-top: 0;
    padding-top:  70px;
    margin-bottom: 250px;
    font-family: 'Open Sans', sans-serif;
    font-size:  16px;
    line-height:  1.8;
    color:  #333;
    text-align: left;
}

p {
    /*Checken of niet alleen voor nieuws en kb*/
    margin-bottom: 20px;
}

label {
    line-height:  normal;
}
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ layouts */

/* 
    Here just a common layout type is pre-written, whole site wrapper, header, nav, content with left and right and a footer.
    Change these as needed :-)
    If you have a persistant toolbar at the top of the screen, or banners at the top of the screen, semantically you'll probably want
    these below the content in the DOM, so absolutly position them to the top. Remember to padding-top the #container
*/

/* 
.vertical-align {
    display: flex;
    align-items: center;
}
*/

    #header-front-page {
        width: 100%;
        padding-top: 30px;
        background-color:  #ECF4F9;
        text-align:  left;
    }

    #header-front-page button {
        margin-top:  20px;
        margin-bottom:  20px;
    }

    .header-title {
        font-size:  48px;
        font-weight:  400;
        margin-top:  20px;
        margin-bottom:  20px;
    }

    .header-text {
        margin-bottom:  10px;
    }

    header {
    }

    .divider {
        background: rgba(0, 0, 0, 0) url("images/divider.png") repeat-x scroll 0 0;
        background-color: white;
        height: 6px;
        line-height: 0;
    }
    
    section {
    }            
        article {
        }
        aside {
        }
        
        /*		
		if you have floated columns inside of "section" (or some other element), putting "overflow: auto;" in "section" should clear the floats fine
		but sometimes you need to be able to absolutly position elements outside of the element, overflow: auto; would draw scroll bars
		in which case, for IE set the height of the element to be 1% (*height: 1%;) and uncomment the :after psuedo class stuff below
		( http://www.positioniseverything.net/easyclearing.html )
		*/		
		
		/*
		section:after {
		    content: "."; 
		    display: block; 
		    height: 0; 
		    clear: both;
		    visibility: hidden;
		}
		*/
        
footer {
    height: auto;
    position: absolute;
    height: 250px;
    bottom: 0;
    width: 100%;
    background: #333 none repeat scroll 0 0;
    color: #ffffff;
   
}

    footer .container {
        padding: 0 0 0 0;
    }

    footer p {
        line-height: normal;
    }

    footer ul {
        padding: 0;
    }

        footer li {
            list-style-position: outside;
            list-style: none;
            line-height:  normal;
        }

            footer li > a {
                color: #ffffff !important;
                outline: medium none !important;
                margin-right: 5px;
            }

                footer li > a:hover {
                    color: #f46516 !important;
                    outline: medium none !important;
                }

    footer h3 {
        font-size: 20px;
        margin-top:  20px;
        margin-bottom:  20px;
    }

    footer .input-group {
        margin-top:  20px;
    }


/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ general styles */

/*
    The base styles for the whole site, setting up base font styles/colors etc.
    specific styles for specific areas done later to override these
    some ultra basic form styles set up here too
*/

h1 {

}

    h2 {
        font-size: 28px;
        line-height: 40px;
        margin-bottom: 20px;
    }

    h3 {
    font-size: 22px;
}

ul li {
	list-style-type: none;
}

ol li {
}

hr {
    border: 1px solid #dadada;
    margin: 40px 0;
}
		
img {
}

small {
	font-size: 11px;
    color: #666;
}

abbr[title], acronym[title] {
	cursor: help;
	color: #fff;
	border-bottom: 1px dotted #fff;
}
	
a {
	text-decoration: none;
}
	a:focus, a:active {
		text-decoration: none;
	}
	a:hover {
	}
	
	
.orange {
    color: #f46516;
}

.red {
    color: red;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ custom classes */

/*
    Classes that your likely to use all over your site, like rss links, or a button style or something
    But not something thats going to be lots of lines of CSS - if it is, like 'calls to actions' in the right column,
    make a module css, callsToActions.css and put it in the /modules/ folder (remember to link it in the cssLoader.css)
*/

.emphasize {
    color: #333;
    font-weight: 600;
}

.no-top-margin {
    margin-top:  0px;
}

.btn-orange { 
  color: #FFFFFF; 
  background-color: #F46516; 
  border-color: #F46516; 
} 
 
    .btn-orange:hover, 
    .btn-orange:focus, 
    .btn-orange:active, 
    .btn-orange.active, 
    .open .dropdown-toggle.btn-orange { 
      color: #FFFFFF; 
      background-color: #DC5B14; 
      border-color: #F46516; 
    } 
 
    .btn-orange:active, 
    .btn-orange.active, 
    .open .dropdown-toggle.btn-orange { 
      background-image: none; 
    } 
 
    .btn-orange.disabled, 
    .btn-orange[disabled], 
    fieldset[disabled] .btn-orange, 
    .btn-orange.disabled:hover, 
    .btn-orange[disabled]:hover, 
    fieldset[disabled] .btn-orange:hover, 
    .btn-orange.disabled:focus, 
    .btn-orange[disabled]:focus, 
    fieldset[disabled] .btn-orange:focus, 
    .btn-orange.disabled:active, 
    .btn-orange[disabled]:active, 
    fieldset[disabled] .btn-orange:active, 
    .btn-orange.disabled.active, 
    .btn-orange[disabled].active, 
    fieldset[disabled] .btn-orange.active { 
      background-color: #F46516; 
      border-color: #F46516; 
    } 
 
    .btn-orange .badge { 
      color: #F46516; 
      background-color: #FFFFFF; 
    }

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ div specific styles */
/* 
    Styles for sitewide elements, like navigation, header, toolbars, footer.
    Stuff that appears on most of the pages on a site.
*/
.navbar {
    border:  none;
    box-shadow:  none;
    padding-top:  20px;
    padding-bottom:  20px;
    margin-bottom:  0px;
    transition-duration: 250ms;
    background-color: #ecf4f9;
    min-height: 70px;
}
    .navbar-brand {
        background-image: url('../inboxify/images/inboxify_dark.png');
        background-size: 160px auto;
        background-repeat: no-repeat;
        background-position: 20px 5px;
	    border: none;
	    outline: none;
        width:  260px;
    }

    .navbar-nav {
        margin-top: 3px;
    }
    
    .navbar.navbar-inner  {
        background-color:  #103040;
        padding-top:  10px;
        padding-bottom:  10px;
    }

    .navbar.navbar-inner .navbar-brand {
        background-image: url('../inboxify/images/inboxify.png');    
    }

    .navbar-toggle {
        background-color:  #333;
    }
    
    nav ul {
    }
        nav ul li {
            /*padding: 0 20px 0 20px;*/
        }

        #navbarCollapse .nav > li > a {   
            color:  #333;
            padding-top: 12px;
            padding-bottom: 12px;
        }

            #navbarCollapse .nav > li > a:hover {   
                text-shadow: 1px 0 0 currentColor;
            }

                #navbarCollapse .nav > li > a.btn {
                    /*padding: 6px 12px;*/
                }

                #navbarCollapse .nav > li > a.sign-up-button {
                    background-color: #5cb85c;
                    color: #ffffff;
                    border-color: #4cae4c;
                    border-radius: 4px;
                }

                #navbarCollapse .nav > li > a.sign-up-button:hover {
                    background-color: #449d44;
                    border-color: #398439;
                    text-shadow: none;
                }

                .navbar-inner #navbarCollapse .nav > li > a {   
                    color:  #fff;
                    outline: medium none !important;
                }

                    .navbar-inner #navbarCollapse .nav > li > a:hover {
                        text-shadow: none;
                        background: #143d52 none repeat scroll 0 0;
                        border-radius: 4px;    
                    }

                    .navbar-inner #navbarCollapse .nav > li > a.selected {
                        background: #143d52 none repeat scroll 0 0;
                        border-radius: 4px;
                    }

                    #navbarCollapse .nav > li > a.sign-up-button:hover {
                        background-color: #449d44;
                        border-color: #398439;
                        text-shadow: none;
                    }
                
/* Scrollup Button */
.scrollup{
    position:fixed;
    bottom:44px;
    right:64px;
    display:none;
	border: none !important;
	outline: none !important;
    color: #666666 !important;
    font-size: 24px;
}


/* ie6 !ftw */

div#ie {
	background-color: #ffc;
	border-top: 1px solid #000;
	border-bottom: 1px solid #000;
	padding: 5px 0 0 0;
	height: 20px;
	text-align: center;
}
	div#ie p {
		display: block;
		color: #333;
		font-size: 11px;
		margin: 0;
	}
	

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ page specific styles */
/*
    If your site is small and didnt need modules or pages css documents, 
    then here is where you'd put page specific css, else, make modules in
    /pages/ and /modules/
*/
.page-header {
    border: none;
}

.icons {
    padding-top:  30px;
    text-align:  center;
}

.functions .fa {
    font-size: 64px;
    color:  #f46516;
}

.functions h3 {
    line-height: normal;
    font-size: 24px;
    text-align: center;
    margin-top:  20px;
    margin-bottom:  20px;
}

#testimonials {
    height: 100px;
    margin-bottom: 20px;
}

    #testimonials .carousel-control {
        background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
}

    #testimonials blockquote {
        border: medium none;
        color: #a7a7a7;
        font-size: 1.286em;
        font-style: italic;
        line-height: 1.5;
        margin: 5px 10% 10px 10%;
        padding: 3px 0 0;
        text-align: center;
    }

.tarieven-container {
    margin-top: 40px;
}

.row.faq {
    margin-bottom:  20px;
}

.faq h3 {
    font-size: 16px;
    line-height: 1.8;
    font-weight: 600;
}

#refreshCaptcha {
    font-size: 24px;
    padding-top: 20px;
    cursor: pointer;
}

.gebruiksvoorwaarden dt {
    clear: left;
    float: left;
    line-height: 1.8;
}

.gebruiksvoorwaarden dd {
    line-height: 1.8;
    margin-left: 40px;
}

#archive-list {
    padding-left: 0px;
}

#archive-list li {
    margin-bottom:  20px;
}


/* News */
.breadcrumbs {
    margin-top:  20px !important;
    border-radius: 4px;
    list-style: outside none none;
    margin-bottom: 20px !important;
    font-size:  100% !important;
    padding: 0;
}

    .breadcrumbs li {
        display: inline-block;
        margin: 0;
    }

    .breadcrumbs a {
      text-decoration: none;
      border: none;
      color: #337ab7 !important; }
      .breadcrumbs a:hover {
        color:  #23527c !important;
        text-decoration:  underline !important;
        border: none; }
      .breadcrumbs a:focus {
        outline: none; }
      .breadcrumbs a:hover {
        color: inherit; }

        .breadcrumbs li::after {
            color: rgba(0, 0, 0, 0.6);
            content: "\00a0/\00a0";
        }

/*Heroic KB Plugin*/
.hkb-breadcrumbs {
    margin-top:  20px !important;
    /*background-color: #f5f5f5;*/
    border-radius: 4px;
    list-style: outside none none;
    margin-bottom: 20px !important;
    /*padding: 8px 15px !important;*/
    font-size:  100% !important; 
}

    #hkb ol.hkb-breadcrumbs a {
      text-decoration: none;
      border: none;
      color: #337ab7 !important; }
      #hkb ol.hkb-breadcrumbs a:hover {
        color:  #23527c !important;
        text-decoration:  underline !important;
        border: none; }
      #hkb ol.hkb-breadcrumbs a:focus {
        outline: none; }
      #hkb ol.hkb-breadcrumbs a:hover {
        color: inherit; }

/*
#hkb ol.hkb-breadcrumbs a {
    color: #337ab7 !important;
}
*/    

.search-span {
    float: right;
    margin-right: 6px;
    margin-top: -20px;
    position: relative;
    z-index: 2;
    color: red;    
}

.hkb-site-search__field {
    float: left;
    margin: 0;
    min-height: 50px;
    padding-left: 1em;
    padding-right: 1em;
    padding: 15px 40px 15px 50px !important;
    width:  100% !important;
}

.hkb-site-search .hkb-site-search__field.live-search-loading {
        background: url("images/loader.svg") no-repeat right 5px center; }

.search-icon {
    position: absolute;
    z-index: 1;
    left: 15px;
    top: 12px;
    color: #7B7B7B;
    cursor:pointer;
    width: 0;
    font-size: 24px;
}

/*Table of contents*/

.table-of-contents {
    margin-bottom: 20px;
}
/*
.hkb_widget_toc {
        padding-left:  20px;
    border-radius: 0.25rem;
}
*/

.hkb_widget_toc a:hover {
    background: none !important;
}

/*
.hkb_widget_toc .widget-title {
    margin-top:  0px !important;
}
*/    

/*
h2.widget-title {
    margin-top:  0px;
    margin-bottom:  0px;
}
*/

.hkb_widget_toc ol {
    list-style: outside none !important;
}

.hkb_widget_toc .nav ol {
    padding-left:  20px !important;
}

.hkb_widget_toc li a {
    display: block;
    position: relative;
}

.hkb_widget_toc .nav > li > a {
    color: #337ab7 !important;
    padding:  0 !important;
}

.hkb_widget_toc .nav > li > a:hover {
    color:  #23527c !important;
    text-decoration:  underline !important;
}

.hkb_widget_toc .nav > li > a:focus {
    border: none;
    outline:  0;
    background: none !important;
}

.entry-content a:focus {
    border:  none;
    outline:  0;
}

.entry-content p {
    margin-top:  16px;
    margin-bottom:  16px;
}

.topic-header {
    margin-top: 10px !important;
    margin-bottom:  30px;
}


.alert {
    margin-top: 20px;
    margin-bottom: 20px;
}

.img-fluid {
    height: auto;
    max-width: 100%;
}

.emphasize-info {
    font-weight:  bold;
}

img.kb {
    margin-top:  20px;
    margin-bottom:  20px;
}

.quick-start-prev {
    float:  left;
}

.quick-start-next {
    float:  right;
}

h3.api-method {
    margin-top: 40px;
    margin-bottom: 20px;
}

@media(min-width:1202px){
.highlight{
  /*border:solid 2px #555;*/
  margin-top:-20px;
  font-size:1.1em;
    margin-left:-5%;
    margin-right:-5%;
    width:110%;
    box-shadow:0px 0px 5px rgba(0,0,0,0.2);
  }
}

/* Small Devices, Tablets */
@media only screen and (max-width : 992px) {
    .header-title {
        font-size: 16px;
    }

    footer {
      position: relative;
      height: auto;
    }

    body {
        margin-bottom: auto;
    }
}

@media(max-width:1201px) {
    .customer-img,
    .img-related {
        margin-bottom: 30px;
    }
    .navbar-collapse {
        font-size: 12px;
    }

    header.carousel .fill img {
	    width: 90%;
        padding-top: 0px;
    }

}