@import url(https://fonts.googleapis.com/css?family=Open+Sans:100,400,600,800);

/* color classes for use in skeleton columns */
.primary-bg-color {
    background-color: #2ebaf2;
}

.secondary-bg-color {
    background-color: #dbf1ff;
}

.dark-bg-color {
    background-color: #2D2831;
}

.medium-bg-color {
    background-color: #bebebe;
}

.light-bg-color {
    background-color: #e2e2e2;
}

/* margin and padding classes for column content */
.normal-padding {
    padding: 5px 10px 5px 10px; /* top right bottom left */
}

/* border classes for use on columns */
.normal-border {
    border: 2px solid #bebebe;
}

/* font classes for use on columns */
.big-font {
    font-weight: 600;
}

.big-font a {
    text-decoration: none;
}

.light-links-font a {
    color: #ffffff;
    text-decoration: none;
}

/* menu links */
body.home a.home {
    color: #ffffff;
    border-bottom: 4px solid #F9ED23;
}

body.courses a.courses {
    color: #ffffff;
    border-bottom: 4px solid #F9ED23;
}

body.about a.about {
    color: #ffffff;
    border-bottom: 4px solid #F9ED23;
}

body.freelance a.freelance {
    color: #ffffff;
    border-bottom: 4px solid #F9ED23;
}

body.referenties a.referenties {
    color: #ffffff;
    border-bottom: 4px solid #F9ED23;
}

body.contact a.contact {
    color: #ffffff;
    border-bottom: 4px solid #F9ED23;
}

body.admin a.admin {
    color: #ffffff;
    border-bottom: 4px solid #F9ED23;
}

body.login a.login {
    color: #ffffff;
    border-bottom: 4px solid #F9ED23;
}

/* links */
a {
    color: #000000;
}

.pipe {
    color: #F9ED23;
    padding: 0px 5px 0px 10px; /* top right bottom left */
}

/* error required fields */
label.error {
    color: #ff4a4c;
    margin: 0px 0px 0px 10px; /* top right bottom left */
}

/* course tabs */
#course-tabs {
    background-color: #dbf1ff;
    border: none;
    padding: 10px 0px 0px 0px; /* top right bottom left */
}

#course-tabs .ui-tabs-nav {
    background-color: #dbf1ff;
    border: none;
}

#course-tabs .ui-tabs-tab {
    background-color: #dbf1ff;
    font-weight: 800;
    font-size: 1.2em;
    color: #000000;
}

#course-tabs .ui-tabs-tab a {
    color: #000000;
}

#course-tabs .ui-tabs-active {
    background-color: #ffffff;
    font-weight: 800;
    font-size: 1.2em;
    color: #000000;
    border: none;
}

#course-tabs .ui-tabs-panel {
    background-color: #ffffff;
    border: none;
}

#signup-tabs {
    background-color: #dbf1ff;
    border: none;
    padding: 10px 0px 0px 0px; /* top right bottom left */
}

#signup-tabs .ui-tabs-nav {
    background-color: #dbf1ff;
    border: none;
}

#signup-tabs .ui-tabs-tab {
    background-color: #dbf1ff;
    font-weight: 800;
    font-size: 1.2em;
    color: #000000;
}

#signup-tabs .ui-tabs-tab a {
    color: #000000;
}

#signup-tabs .ui-tabs-active {
    background-color: #ffffff;
    font-weight: 800;
    font-size: 1.2em;
    color: #000000;
    border: none;
}

#signup-tabs .ui-tabs-panel {
    background-color: #ffffff;
    border: none;
}

#logo {
    float: left;
    padding: 0px 50px 0px 0px; /* top right bottom left */
}

.ui-datepicker-calendar td.date-has-signup a {
    background: #cfffd4;
}

/*
Hide all weekend options in the jQueryUI DatePicker dialog
*/
th.ui-datepicker-week-end,
td.ui-datepicker-week-end {
    display: none;
}

/* square responsive box */
.box {
    position: relative;
    float: left;
    padding: 0px 0px 0px 50px; /* top right bottom left */

}

.box-content {
    position: absolute;
    background-color: #ffffff;
    padding: 0px 0px 10px 0px; /* top right bottom left */
}

.box-content a {
    text-decoration: underline;
}

.box-image {
    float: left;
    margin: 30px 0px 0px -35px; /* top right bottom left */
}

.box-image img {
    width: auto;
    height: 64px;
}

.box-text {
    padding: 10px 10px 10px 40px; /* top right bottom left */
}

.box-title {
    font-weight: 800;
    font-size: 1.1em;
}

.box-description {
    padding: 0px 10px 0px 0px; /* top right bottom left */
}

/* wide responsive box */
.wide-box {
    position: relative;
    float: left;
    padding: 10px 0px 0px 50px; /* top right bottom left */
}

/* hamburger menu */
.topnav .icon {
    display: none;
    margin: 10px 0px 0px 0px; /* top right bottom left */
}

.topnav a {
    font-weight: 800;
    text-decoration: none;
    margin: 0px 20px 0px 0px; /* top right bottom left */
}

@media screen and (max-width: 600px) {
    .topnav a {display: none;}
    .topnav a.icon {
        float: right;
        display: block;
    }
}

@media screen and (max-width: 600px) {
    .topnav.responsive {position: relative;}
    .topnav.responsive a.icon {
        position: absolute;
        right: 0;
        top: 0;
    }
    .topnav.responsive a {
        float: none;
        display: block;
        text-align: left;
    }
}

/* Smaller */
@media (max-width: 399px) {
    .box {
        width: 80%;
        padding-bottom: 55%;
    }

    .wide-box {
        width: 80%;
        padding-bottom: 100%;
    }
}

/* Larger than mobile */
@media (min-width: 400px) {
    .box {
        width: 80%;
        padding-bottom: 50%;
    }

    .wide-box {
        width: 80%;
        padding-bottom: 90%;
    }
}

/* Larger than phablet (also point when grid becomes active) */
@media (min-width: 550px) {
    .box {
        width: 50%;
        padding-bottom: 25%;
    }

    .wide-box {
        width: 80%;
        padding-bottom: 25%;
    }
}

/* Larger than tablet */
@media (min-width: 750px) {
    .box {
        width: 40%;
        padding-bottom: 30%;
    }

    .wide-box {
        width: 80%;
        padding-bottom: 40%;
    }
}

/* Larger than desktop */
@media (min-width: 1000px) {
    .box {
        width: 25%;
        padding-bottom: 25%;
    }

    .wide-box {
        width: 80%;
        padding-bottom: 20%;
    }
}

/* Larger than Desktop HD */
@media (min-width: 1200px) {
    .box {
        width: 25%;
        padding-bottom: 25%;
    }

    .wide-box {
        width: 80%;
        padding-bottom: 20%;
    }
}