/* 
@import "../../../portiersapp/skins/helix_learning/css/main.min.css";
    Created on : 20-mrt-2015, 13:57:06
    Author     : Miguel van den Branden


    Neste Replaces:
    text  ->  003b95 -> 9d0b0e
    buttons  ->  78dd2e -> 9d0b0f
    buttons hover  ->  68bc29 -> 691719

*/


@font-face {
    font-family: "FontAwesome";
    font-style: normal;
    font-weight: normal;
    src: url("../fonts/fontawesome-webfont.eot?#iefix&v=4.3.0") format("embedded-opentype"), url("../fonts/fontawesome-webfont.woff?v=4.3.0") format("woff"), url("../fonts/fontawesome-webfont.ttf?v=4.3.0") format("truetype"), url("../fonts/fontawesome-webfont.svg?v=4.3.0#fontawesomeregular") format("svg");
}

body {
	background-image:url("../images/background.jpg");
    background-repeat: no-repeat;
	background-position: bottom center;
	
   /* background-position: right top;
    background-repeat: no-repeat;
	background-color: #fff;
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#29b8e5', endColorstr='#005681', GradientType=0 );
    background-attachment: fixed;*/
    font-family: "pragmatica-web",sans-serif;
}

#languagecontainer {
    text-align: center;
}

#languagecontainer h2 {
    margin-bottom: 30px;
}

#languagecontainer a{
	display: block;
	font-weight:bold;
	color: #9d0b0f;
}

#languagecontainer a:hover{
	color: #691719;
}


h2, h3, h4, h5, h6 {
    color: #9d0b0e !important;
    font-family: "pragmatica-web",sans-serif;
    font-style: normal !important;
    font-weight: 200 !important;
}

h2 {
    margin-bottom: 20px;
}

#modalTitle {
    color: #2C6684 !important;
}

#header {
    /*height: 100px;*/
}

#footer {
    color: #9d0b0e !important;
    font-family: "pragmatica-web",sans-serif;
    font-style: normal !important;
    font-weight: 200 !important;
    font-size: 0.8rem;
	margin-top: 2em;
}

.slogan{
	background:none !important;
}

#headerbg {
    text-align:left;
    /*border-bottom: 1px solid #d7d7d7;*/
	/*background: url(../images/png/logo_background_2.png) repeat-x;
        
    background-color: #fff;*/
}

#headerbg2{
	background: url(../images/png/logo_background.png) no-repeat center top;
        background-size: 100% 141px;
}

.headerbar {
/*    background-color: #555555;*/
	background-image: url("../images/png/logo.png");
	background-position: left 10px;
	background-repeat: no-repeat;
	height: 100px;
}

.footerlogo {
	/*background-image: url("../images/png/slogan.png");*/
	background-position: center top;
	background-repeat: no-repeat;
	height: 150px;
}

#requirements {
    font-size: 12px;
    background-color: #FFD7D7;
    padding: 20px;
    border: 1px solid #ccc;
}

#logo {
    margin: 0 auto;
}

#headerspacer {
/*    margin-top: 42px;*/
}

#portaltitle {
    /*margin-top: 30px;*/
}

#header h2 {
    font-size: 25px;
    color: #231f20;
    margin: 0px;
    margin-bottom: 5px;
    width: 100%;
}

button, .button {
    background-color: #899427;
    border: 1px solid #7C8624;
    font-weight: normal;
}

button:hover, .button:hover {
    background-color: #98A42B;
    border: 1px solid #7C8624;
}

.navbutton {
    background-color: #9d0b0f;
    padding-top: 1rem;
    padding-right: 2rem;
    padding-bottom: 1.0625rem;
    padding-left: 2rem;
    margin: 0 0 1.25rem;
    color: #fff;
    font-weight: normal;
    transition: background-color 300ms ease-out;
    border-radius: 5px;
    display: block;
}

.navbutton i{
    color: #fff;
}

.navbutton:focus, .navbutton:hover, .navbutton:focus {
	background-color: #691719;
    color: #fff;
}


.customcancelbutton {
    font-family: "FontAwesome", "pragmatica-web",sans-serif;
    background-color: #9d0b0f;
    border-radius: 5px !important;
    color: #fff;
    cursor: pointer;
    display: block;
    font-size: 1rem;
    font-weight: normal;
    padding-top: 1rem;
    padding-right: 2rem;
    padding-bottom: 1.0625rem;
    padding-left: 2rem;
    margin: 0 0 1.25rem;
    text-align: center;
    transition: background-color 300ms ease-out;
    width: 100%;
    border: none;
    font-style: normal !important;
}

.custombutton {
    background-color: #9d0b0f;
    border-radius: 5px !important;
    color: #fff;
    cursor: pointer;
    display: block;
    font-size: 1rem;
    font-weight: normal;
    padding-top: 1rem;
    padding-right: 2rem;
    padding-bottom: 1.0625rem;
    padding-left: 2rem;
    margin: 0 0 1.25rem;
    text-align: center;
    transition: background-color 300ms ease-out;
    width: 100%;
    border: none;
    font-family: "FontAwesome", "pragmatica-web",sans-serif;
    font-style: normal !important;
}

.custombutton:focus, .custombutton:hover, .custombutton:focus,
.customcancelbutton:focus, .customcancelbutton:hover, .customcancelbutton:focus
{
    color: #fff;
    background-color: #691719; 
}


#contentcontainer {
    /*padding: 20px;*/
/*    box-shadow: 0 10px 10px #ccc;
    background-color: #fff;*/
    color: #fff;
    font-family: "pragmatica-web",sans-serif;
    font-style: normal !important;
    font-weight: 200 !important;
}

#contentcontainer h2 {
    text-align: center;
}

.courseicon {
    color: #ffffff;
    font-size: 120px !important;
    margin-bottom: 10px;
}

.courseicon img{
	height: 120px;
	margin-top: -30px;
}

.courseblocks h3 {
    color: #fff !important;
    font-weight: 300 !important;
}

.courseblocks a {
    color: #000 !important;
}

.courseblocks .panel {
    margin-bottom: 0px;
}

.panelrollover {
    background-color: #FFF;
    border: none;
}

.coursepanel {
    background: #FFF none repeat scroll 0 0;
    color: #999;
    margin-bottom: 1.25rem;
    padding: 1.25rem 1.25rem 0 1.25rem;
    border-radius: 5px;
}

.panelrollover:hover {
    background-color: FFF;
    outline: 2px solid #2C6684;
}



.flag-wrapper {
    /*box-shadow: 0 0 3px 1px #838383 !important;*/
    box-shadow: none !important;
}

.flag-wrapper:hover {
/*    box-shadow: 0 0 10px 0 #b0b1b0 !important;
    -webkit-transition: box-shadow 0.15s ease-in-out 0s !important;
    -moz-transition: box-shadow 0.15s ease-in-out 0s !important;
    -o-transition: box-shadow 0.15s ease-in-out 0s !important;
    -ms-transition: box-shadow 0.15s ease-in-out 0s !important;
    transition: box-shadow 0.15s ease-in-out 0s !important; */
}


.flag-icon-nl {
    background-image: url("admin/css/flag-icons/flags/4x3/nl.svg");
}

.flag-icon-gb {
    background-image: url("admin/css/flag-icons/flags/4x3/gb.svg");
}

.flag-icon-de{
    background-image: url("admin/css/flag-icons/flags/4x3/de.svg");
}

.flag-icon-fr {
    background-image: url("admin/css/flag-icons/flags/4x3/fr.svg");
}

.flag-icon-pt {
    background-image: url("admin/css/flag-icons/flags/4x3/pt.svg");
}

.flag-icon-pl {
    background-image: url("admin/css/flag-icons/flags/4x3/pl.svg");
}

.img-thumbnail {
    background-color: #fff;
    display: inline-block;
    height: auto;
    line-height: 1.42857;
    max-width: 100%;
    padding: 4px;
}

#userselecttable {
    width: 100%;
    border: none;
}

#languagetext {
    display: inline-block;
    font-size: 22px;
    padding-left: 16px;
    vertical-align: text-bottom;
}

#registercontainer h3 {
    margin-bottom: 20px;
	text-align:center;
}

/* Registrationform */
#registerform {
    
}

#registerform label {
    /*color: #fff;*/
    font-size: 18px;
}

/* Dateloginform */
#dateloginform {
    
}

#dateloginform label {
    /*color: #fff;*/
    font-size: 18px;
}

#dateloginform h5, 
#registerform h5 {
    color: #231f20 !important;
}

/* Nameselectionpage */
.nameselection {
    text-align: center;
    margin-bottom: 0px !important;
    border-radius: 5px;
}

.namesectionlist li {
    padding-bottom: 0px;
}



/* Portal course overview */

.fa-circle:before {
    color: #2CBAE3;
}

#logininfo {
    
/*    box-shadow: 0 0 5px 0 #808080;
    position: relative;*/
}

.marque {
    float: right;
    margin-right: -29px;
    margin-top: -29px !important;
}

#loginheader {
    background-color: #fff;
    padding: 10px;
    font-size: 14px;
    margin-bottom: 10px;
    font-family: "pragmatica-web",sans-serif;
/*    border-bottom: 1px solid #ccc;
    text-align: right;
    margin-bottom: 20px;*/
}

#portalcourseoverview .panel {
    min-height: 200px;
}

.courselink {
/*    border-bottom: 1px dotted #2ba6cb;*/
    font-size: 15px;
    font-family: "pragmatica-web",sans-serif;
    color: #fff;
}

.courselink:hover {
    color: #ccc;
}

#contactsupervisortext {
    font-size: 12px;
    font-family: "pragmatica-web",sans-serif;
    color: #fff;
}


.marque {
    font-size: 2em !important;
    float: right;
    margin-top: -34px !important;
    margin-right: -34px !important;
}



#blocked {
    background-color: #BD1D49 !important;
    border: none !important;
}

#failed {
    background-color: #BD1D49 !important;
    border: none !important;
}

#passed {
    background-color: #009100 !important;
    border: none !important;
}

#expired {
    background-color: #FFCC99 !important;
    border: none !important;
}

#startcourse {
    background-color: #9d0b0f !important;
    border: none !important;
    border-radius: 10px !important;
    text-align: center;
	transition: background-color 300ms ease-out;
}

#startcourse:hover {
    /*border: 2px solid #2C6684 !important;*/
	background-color: #691719 !important;
}

.choicebutton {
    background-color: #9d0b0f;
    padding-top: 1rem;
    padding-right: 2rem;
    padding-bottom: 1.0625rem;
    padding-left: 2rem;
    /*margin: 0 0 1.25rem;*/
    color: #ffffff;
    font-weight: normal;
    transition: background-color 300ms ease-out;
    border-radius: 5px;
    display: block;
    margin-bottom: 1.25rem;
}

.choicebutton:focus, .choicebutton:hover, .choicebutton:focus {
    background-color: #691719; 
	color: #fff;
}

.choicebutton i {
    float: right;
}



/*#failed:hover,
#passed:hover,
#expired:hover,
#startcourse:hover {
    box-shadow: 0 0 10px 0 #b0b1b0;
    -webkit-transition: box-shadow 0.15s ease-in-out 0s;
    -moz-transition: box-shadow 0.15s ease-in-out 0s;
    -o-transition: box-shadow 0.15s ease-in-out 0s;
    -ms-transition: box-shadow 0.15s ease-in-out 0s;
    transition: box-shadow 0.15s ease-in-out 0s; 
}*/


#blocked h4,
#failed h4,
#passed h4,
#expired h4,
#startcourse h4
{
    color: #fff;
    font-family: "pragmatica-web",sans-serif;
}

.flag-icon {
    font-size: 40px;
    background-color: #fff;
    box-shadow: 0 0 8px -2px #000;
    width: 100%;
}

.requirements {
    /*background-color: #de770f;*/
}

#languagecontainer .panel {
    color: #fff !important;
    border: none !important;
}


#languagecontainer .panel h1, #languagecontainer .panel h2, #languagecontainer .panel h3, #languagecontainer .panel h4, #languagecontainer .panel h5, #languagecontainer .panel h6, #languagecontainer .panel p, #languagecontainer .panel li, #languagecontainer .panel dl {
    color: #fff !important;
}




/* ==========================================================================
   Media Queries
   ========================================================================== */


/* Small screens
   ========================================================================== */
@media only screen {

} 

/* Define mobile styles
   ========================================================================== */

@media only screen and (max-width: 40em) {
    body {
        background-image: none !important;
    }
    #header {
        /*background-color: #1792B5;*/
    }
    #header h2 {
        margin-top: 5px;
        font-size: 22px;
        color: #FFF;
    }
    #contentcontainer {
        margin-top: 20px;
    }
} 

/* max-width 640px, mobile-only styles, use when QAing mobile issues
   ========================================================================== */



/* Medium screens
   ========================================================================== */
@media only screen and (min-width: 40.063em) {
    #header h2 {
        color: #231f20 !important;
    }
} 


/* min-width 641px, medium screens
   ========================================================================== */
@media only screen and (min-width: 40.063em) and (max-width: 64em) { 
    #contentcontainer {
        margin-top: 30px;
    }
    #header h2 {
        color: #231f20 !important;
    }
} 

/* min-width 641px and max-width 1024px, use when QAing tablet-only issues
   ========================================================================== */

/* Large screens
   ========================================================================== */
@media only screen and (min-width: 64.063em) {
    #contentcontainer {
        margin-top: 30px;
    }
    #header h2 {
        color: #231f20 !important;
    }
} 

/* min-width 1025px, large screens
   ========================================================================== */

@media only screen and (min-width: 64.063em) and (max-width: 90em) {

} 

/* min-width 1025px and max-width 1440px, use when QAing large screen-only issues
   ========================================================================== */



/* XLarge screens
   ========================================================================== */
@media only screen and (min-width: 90.063em) { } 

/* min-width 1441px, xlarge screens
   ========================================================================== */

@media only screen and (min-width: 90.063em) and (max-width: 120em) {

} 

/* min-width 1441px and max-width 1920px, 
   use when QAing xlarge screen-only issues
   ========================================================================== */

/* XXLarge screens
   ========================================================================== */
@media only screen and (min-width: 120.063em) { 

} 
/* min-width 1921px, xxlarge screens
   ========================================================================== */



.sweet-button {
	width: 300px;
	overflow:hidden;
	height:1%;
	/*margin: 350px auto 0 auto;*/
/*	background-color: #41BEFF;
	background-image: -o-linear-gradient(-90deg , rgb(236,236,236) 0%, rgb(147,147,147) 100%);
	background-image: -moz-linear-gradient(-90deg , rgb(236,236,236) 0%, rgb(147,147,147) 100%);
	background-image: -webkit-linear-gradient(-90deg , rgb(236,236,236) 0%, rgb(147,147,147) 100%);
	background-image: -ms-linear-gradient(-90deg , rgb(236,236,236) 0%, rgb(147,147,147) 100%);
	background-image: linear-gradient(-90deg , rgb(236,236,236) 0%, rgb(147,147,147) 100%);*/
/*	border-radius: 10px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	box-shadow: 0px 1px 0px 0 #fff inset, 0 1px 2px 0 rgba(0,0,0,.8);
	-moz-box-shadow: 0px 1px 0px 0 #fff inset, 0 1px 2px 0 rgba(0,0,0,.8);
	-webkit-box-shadow: 0px 1px 0px 0 #fff inset, 0 1px 2px 0 rgba(0,0,0,.8);*/
}

.sweet-button-icon {
	float: left;
	width: 50px;
	height: 100%;
	position: relative;
	text-align: center;
	margin-top: 14px;
	margin-left: 10px;
}

.sweet-button-label {
	font-size: 12px;
	color: #9d0b0e;
	/*box-shadow: 1px 0 0 0 rgba(0, 0, 0, 0.2) inset, -1px 0 0 0 rgba(255, 255, 255, 0.3) ;*/
	float: right;
	height: 100%;
	padding: 10px;
	width: 230px;
	display: block;
	text-decoration: none;
    text-align: left;
}

.sweet-button-label span{
	font-weight: bold;
	font-size: 13px;
	
}

ul.ui-autocomplete{
	background-color:#fff !important;
	font-size: 12px !important;
	border:1px solid #ccc !important;
}

ul.ui-autocomplete li:hover{
	background-color:#ccc;
}