/* 
    Document   : default.fbe
    Created on : 18-sep-2010, 11:42:24
    Author     : PureDutch
    Description:
        Default styles
*/

/* import ================================================================================= */
@import "fbe.tools.css";
@import "fbe.typography.css";
@import "fbe.layoutColumns.css";
@import "fbe.navigation.css";
@import "fbe.uniform.css";
/* end import ============================================================================= */

/* resets ================================================================================= */
*		{ margin:0; padding:0; }
html,
body    { height: 100%; width: 100%  }
img     { border:0; vertical-align:top; }
/* end resets ============================================================================= */

/* settings =============================================================================== */
.settings-page .preview {
	float:left; 
	width:25px; 
	height:25px; 
	border:1px solid #000000; 
	border-radius:4px;
	margin-right: 15px;
}
.settings-page .colorPick,
.settings-page .dummyfile {
	float:left; 
	margin-right:10px;
}
.settings-page .controls input,
.settings-page .controls select{
	float:left; 
	height:25px; 
	margin-right: 15px;
	line-height: 25px;
}

.settings-page .form-actions .btns{
	clear: both;
}
.settings-page .form-actions .primaryExplain {
	float: left;
	margin-bottom: 10px;
}
.settings-page .form-actions .secondaryExplain {
	float: right;
	margin-bottom: 10px;
}
.explain #resultPass, .explain #resultUser{
	font-weight:bold;
	font-size:12px;
}
.explain #resultPass.short, .explain #resultUser.short{
	color:#FF0000;
}
.explain #resultPass.weak{
	color:#E66C2C;
}
.explain #resultPass.good{
	color:#2D98F3;
}
.explain #resultPass.strong{
	color:#006400;
}
#tempPass.short:focus, #UserName.short:focus{
	border-color:#FF0000;
	box-shadow: 0 1px 1px rgba(255, 0, 0, 0.075) inset, 0 0 8px rgba(255, 0, 0, 0.6);
}
#tempPass.weak:focus{
	border-color:#E66C2C;
	box-shadow: 0 1px 1px rgba(230, 108, 44, 0.075) inset, 0 0 8px rgba(230, 108, 44, 0.6);
}
#tempPass.good:focus{
	border-color:#2D98F3;
	box-shadow: 0 1px 1px rgba(45, 152, 243, 0.075) inset, 0 0 8px rgba(45, 152, 243, 0.6);
}
#tempPass.strong:focus{
	border-color:#006400;
	box-shadow: 0 1px 1px rgba(0, 100, 0, 0.075) inset, 0 0 8px rgba(0, 100, 0, 0.6);
}

/* end settings ============================================================================= */

/* landing =============================================================================== */
.fbe-landing .intro-text {
	font-size: 13px;
	padding-bottom: 30px;
}
.fbe-landing .intro-text h1 {
    font-size: 22px;
    font-weight: bold;
	margin-bottom: 15px;
}	
.fbe-landing .intro-text p {
	line-height: 22px;
	margin-bottom: 15px;
}
.fbe-landing .intro-text a.primaryAction, 
.fbe-landing .intro-text a.secondaryAction {
	border-radius: 4px 4px 4px 4px;
    box-shadow: 1px 1px 0 #D5E2E7;
    color: #FFFFFF;
    cursor: pointer;
	display: inline-block;
    font-size: 18px;
	float: none;
    font-weight: bold;
    line-height: 26px;
    text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.25);
	text-decoration: none;
}
.fbe-landing a.primaryAction {
    padding: 10px 65px;
    float: left;
    margin-right: 20px;
	border: 1px solid #FF6A00;
	background: none repeat scroll 0 0 #FF6A00;
}
.fbe-landing a.secondaryAction {
    padding: 10px 40px 12px;
}
.fbe-landing .main-block.block {
	margin-bottom: 20px;
}
.fbe-landing .block-content  { 
	padding: 10px; 
}
.fbe-landing .block-content iframe:first-child { 
	margin-right: 15px;
	margin-left: 7px;	
}

.fbe-landing .main-block .block-title h2 {
	font-size: 18px;
	margin-bottom: 0px;
	
}
.fbe-landing .main-block .usp ul{
	width: 48%;
	display: inline-block;
	vertical-align: top;
}
.fbe-landing .main-block .usp ul:first-child {
	margin-right: 2%;
}
.fbe-landing .main-block .usp li{
    background: url("../images/icons/more.png") no-repeat scroll left top transparent;
    font-size: 13px;
    line-height: 20px;
    padding-left: 40px;
}

.fbe-landing .col-right {
	padding-top: 45px;
}

.fbe-landing .demo-container{
	position: relative;
}
.fbe-landing .demo-form{
    background: none repeat scroll 0 0 white;
    bottom: -20px;
    box-shadow: 1px 1px 10px #333333;
    position: absolute;
    right: 15px;
    width: 285px;	
}

.fbe-landing .demo-form label {
    display: block;
    line-height: 20px;
    margin-bottom: 7px;	
	width: 90px;
	float: left;
}
.fbe-landing .demo-form input {
	line-height: 20px;
	padding-left: 5px;
    margin-bottom: 7px;	
	height: 20px;
	float: left;
	width: 160px;
}
.fbe-landing .demo-form #closeDemo {
	 margin-left: 20px;
	 cursor: pointer;
}
.fbe-landing .demo-form button {
	padding: 7px 15px 8px;
	clear: both;
	border: 1px solid #FF6A00;
	background: none repeat scroll 0 0 #FF6A00;	
    color: #FFFFFF;
    cursor: pointer;
    font-size: 16px;
}
.fbe-landing .languages{
	top:0px;
	position: absolute;
	right: 0px;
}

.landing.social{
	background: none repeat scroll 0 0 white;
	border-radius: 0 8px 8px 0;
	box-shadow: 5px 1px 4px -3px grey;
	padding: 5px;
	position: absolute;
	right: -40px;
	text-align: center;
	top: 54px;
	z-index: 1;	
}
.landing.social-follow.container{
    bottom: 40px;
    height: 80px;
    position: absolute;
    right: 62px;
    text-align: center;
    z-index: 1;
	width: 250px;
	padding: 10px;
	overflow: hidden;
	
}
.landing.social-follow.content{
    background: none repeat scroll 0 0 white;
    border-radius: 8px 8px 8px 8px;
    padding: 10px;
    text-align: center;
    z-index: 1;
}
.landing.social-follow.content{
    font-family: bradley hand itc;
    font-size: 23px;
    font-weight: bold;	
}
.landing.social-follow.content a .at300bs{
    box-shadow: 0 1px 6px 0 grey;
	margin: 10px 5px 0 5px;
	border-radius: 5px;
}
.landing.social-follow.content a:hover .at300bs{
	margin-top: 0px;
}
.landing.social .at300bs:first-child {
	margin-top: 5px;
}

.landing.social .at300bs {
	margin-bottom: 5px;
	margin-right: 3px;
}

.fbe-landing .col-right {
	position: relative
} 
.fbe-landing .languages  li{
	display: inline-block;
	margin-right: 5px;
}
.fbe-landing .languages img {
	opacity: 0.4;
}

.fbe-landing .languages a {
	cursor: pointer;
}

.fbe-landing .languages a:hover img,
.fbe-landing .languages a.selected img{
	opacity: 1;
}

.fbe-landing .main-block.block.two-column .one,
.fbe-landing .main-block.block.two-column .two{
	width: 263px;
	float: left;
	clear: none !important;
}
.fbe-landing .main-block.block.two-column .one{
	margin-right: 10px;
}


.fbe-landing .col-right .inner-text{
	background: rgba(255,255,255,0.6);
	padding: 5px;
}

.fbe-landing .col-right .plans {
	border: 1px solid darkgray;
	border-radius: 5px 5px 0 0;
	background: #fff;
	padding: 10px;
	margin: 25px 15px;
}
.fbe-landing .col-right .plans .title{
	border-bottom: 1px solid darkgray;
    color: black;
    font-size: 14px;
    padding: 5px 10px 0;	
}

.fbe-landing .col-right .plans .content{
	padding: 15px 10px;
}

.fbe-landing .col-right .plans .content li{
    background: url("../images/icons/checkbox.png") no-repeat scroll left 5px transparent;
    color: black;
    font-size: 16px;
    font-weight: bold;
    line-height: 25px;
    margin-bottom: 15px;
    padding-left: 50px;
}	

/* end landing ============================================================================= */

/* home =============================================================================== */
.logo-fb { margin-bottom: 10px; }
.company-logo { margin-bottom: 10px; }
/* end home ============================================================================= */

/* fbwebsite */
.fbwebsite { border: 2px dotted; margin: 20px 0pt; border-radius: 5px 5px 5px 5px; }
.fbwebsite > * { padding: 10px; }
/* defaulttemplate */
.buttonHolder.defaultTemplate { overflow: auto; }
.defaultLoginBox a { margin: 10px 0 0 10px; display: block; }
.buttonHolder.defaultTemplate { text-align: center; }
.buttonHolder.defaultTemplate .primaryAction { margin-right:5px; }

/* default block settings ================================================================================ */
.main-block.block { margin-bottom: 10px; }
.main-block .block-title {
	border-bottom: 0 none; font-size: 16px; color:white; padding:5px 10px 5px 10px; font-weight:normal; overflow: auto;
	/* CSS3 */
	border-radius:			3px 3px 0 0;
	-webkit-border-radius:	3px 3px 0 0;
	-moz-border-radius:		3px 3px 0 0;
	-o-border-radius:		3px 3px 0 0;
	-khtml-border-radius:	3px 3px 0 0;
}

.main-block .block-title .block-title-span {
	max-width:	240px;
	float:		left;
}	

.main-block h2				{ font-weight:normal; /*float:left;*/ }
.main-block .block-content	{ margin:0; clear: both; overflow: auto;
	/* CSS 3 */
	-moz-border-radius:0 0 3px 3px;
}

.main-block.data-content .block-content{ padding: 5px; }

/* sub blocks */
.main-block .block { margin: 0 4px 4px 4px; }
.main-block .block .block-title { background-color: #748fba; border-color:#748fba; padding: 3px 10px; }
.main-block .block .block-title h2 { margin: 0;  font-size: 13px; }

.main-block .block .block-title.under {
	/* CSS 3 */
	border-radius:			0 0 3px 3px;
	-webkit-border-radius:	0 0 3px 3px;
	-moz-border-radius:		0 0 3px 3px;
	-o-border-radius:		0 0 3px 3px;
	-khtml-border-radius:	0 0 3px 3px;
}
.main-block .block .block-content { margin:0; clear: both; border-right:1px solid #b2b2b2; border-bottom:1px solid #b2b2b2; border-left:1px solid #b2b2b2;  overflow: auto; }
.main-block .block .block-content.under { border-top: 0; border-bottom: 0;
	/* CSS 3 */
	-moz-border-radius:  0 0 0 0 !important;
}

/* default blocks ================================================================================ */



/* data-list */
.block.data-list .block-content { padding: 0 3px 3px 3px; }
.block.data-list .data{ width: 100%;}
.block.data-list .data li{ cursor:pointer; margin:0; /*clear:both;*/ border-right:1px solid #b2b2b2; border-bottom:1px solid #b2b2b2; border-left:1px solid #b2b2b2;  padding:4px 3px 4px 3px; overflow: auto;}
.block.data-list.special .data li { padding: 0; }
.block.data-list .data li > .description { width: 225px; }
.block.data-list .data li > .description.short { width: 200px; }
.block.data-list .data li .description { float:left; padding:2px 0 0 5px; }
.block.data-list.special .data li .description { padding: 6px 0 6px 9px; width: 73%; }
.block.data-list .data li .description a { text-decoration: none; }
.block.data-list.special .data li a { margin-top: 4px; }
.block.data-list .data li .right { width: auto; }
.block.data-list .data li.last {
	/* CSS 3 */
	-moz-border-radius:0 0 3px 3px;
}
.block.competencies .add-competency.disabled { } 
.block.competencies .add-competency.disabled a,
.block.competencies .add-competency.disabled a *{ 
	display: none; 
	visibility: hidden;
}
.block.competencies .add-competency.disabled > span { display: block; }

/* data-list fixed height and scroll*/
.block.data-list.scroll .block-content { height: 150px; overflow: auto  }

/* end default blocks============================================================================== */
.loginBox, .forgotPasswordBox { display: none; }
.loginBox.open, .forgotPasswordBox.open { display: block; }
.loginBox-content, .forgotPasswordBox-content {width: 240px; top: 0px; padding:5px 10px 10px 10px; position: absolute; right:25px; margin-left: -230px; -moz-border-radius:0 0 5px 5px; }

/*************/
div.user { -moz-border-radius: 5px 5px 5px 5px;
    border: 1px solid white;
    /*margin-left: 330px;*/
    margin-top: 3px;
    padding: 3px 10px;
	background: #e2e2e2;
	position: absolute;
	left: 44%;
}

div.user span { color: #444444; font-size: 15px; }
/****************/

/* newfb-page ================================================================================ */
.subtitle { text-align: left; border-bottom: 1px solid #C4CED1; padding-bottom: 5px; margin: -10px 0 10px 0; position: relative; }

.subtitle .column.one { text-align: left;  font-size: 14px; }
.subtitle .column.one span {margin-top: 10px; display: block;}
.subtitle .column.two { text-align: center; }
.subtitle .go-to { bottom: 10px; float: right; position: absolute; right: 0; vertical-align: bottom; text-align:right; }

.subtitle .go-to .rounded{ padding: 5px;}
.subtitle .go-to .rounded .rounded.white { padding: 5px 10px;  }
.subtitle .go-to .rounded .rounded.white.one {margin-bottom: 5px;}

.subtitle .column.three { text-align: right; padding-top:20px; }
/*.subtitle .column.three button { position: absolute; right: 0; bottom: 8px;}*/



/** Step 1 ***************/

/* block competencies */
.block.competencies { margin-bottom: 5px; }
.block.competencies .block-title h2 { margin: 0; border-bottom:0;
	/* CSS 3 */
	-moz-border-radius:3px 3px 0 0;
}
.block.competencies .block-content { overflow: auto}
/*.block.competencies ul{ width: 100%;}
.block.competencies li { margin:0; clear: both; border-right:1px solid #b2b2b2; border-bottom:1px solid #b2b2b2; border-left:1px solid #b2b2b2;  padding:3px; overflow: auto;}
.block.competencies li.last {
	 CSS 3 
	-moz-border-radius:0 0 3px 3px;
}*/
.block.competencies li span.name { padding:2px 0 0 2px; width: 275px; display: inline-block; }
.block.competencies li span.name.custom { width:245px; }

.block.competencies .disabled,
.block.data-list .data li.selected { background: #e5e5e5; }
.block.competencies .disabled span,
.block.competencies .disabled span:hover { border-color: #fff; color:#bbb; }
/* block selectedCompetencies */
.block.selectedCompetencies { margin-bottom: 5px; }
/* block sendFeedback */
.block.sendFeedback { text-align: right; }

.block.selectedCompetencies .block-content { overflow-y:auto; padding: 0 4px 4px 4px; }
.block.selectedCompetencies ul{ width: 100%;}
.block.selectedCompetencies li { margin:0; clear: both; border-right:1px solid #b2b2b2; border-bottom:1px solid #b2b2b2; border-left:1px solid #b2b2b2;  padding:3px 3px 4px 3px; /*height:26px;*/}
.block.selectedCompetencies li:after{ clear:both; content:"."; display:block; height:0; line-height:0; visibility:hidden; }

.fb-page .block.selectedCompetencies .opinion-container {
    display: table;
    float: right;
    height: 26px;
    width: 70px;
}
.fb-page .block.selectedCompetencies .opinion {
    margin-top: 7px;
    vertical-align: middle;
}
.fb-page .block.selectedCompetencies .opinion-container span{
    display: table-cell;
    height: 26px;
    text-align: center;
    vertical-align: middle;
    width: 55px;
}

.block.selectedCompetencies li.last {
	/* CSS 3 */
	-moz-border-radius:0 0 3px 3px;
}
.block.selectedCompetencies li span.name {     
    height: 26px;
	width: 225px;
	display: table-cell;
	vertical-align: middle;
    position: relative;
    padding-right: 30px;
}
.block.selectedCompetencies li label  {
    float: left;
    /*height: 26px;*/
    line-height: 13px; 
	overflow: hidden;
	width: 225px;
	margin-right: 15px;
}

/** End step 1 ***************/

/** Step 2 ***************/
.add-contact-toolbar{ margin-top: 5px; float:right; }

.block.addContacts .disabled	{ background: #e5e5e5; }
.block.addContacts .disabled *,
.block.addContacts .disabled *:hover { background: none; border-color: #fff; color:#bbb; }

.block.addContacts .disabled.red	{ background: #ffe5e5; }
.block.addContacts .disabled.red *,
.block.addContacts .disabled.red *:hover { background: #ffe5e5; border-color: #fff; color:#bbb; }

/* addContacts */
.block.addContacts .block-content.addContacts{ height: 355px; position: relative; }
.block.addContacts  label.addTo { margin:6px 0 0 2px; display: block }
.block.addContacts input { margin-top:1px; vertical-align: top;}
.block.addContacts select { margin:3px 0; vertical-align: top; width: 140px;

    border: 1px solid #B2BABE;
    -moz-border-radius: 3px 3px 3px 3px;
    background: none repeat scroll 0 0 #FFFFFF;
}

.block.addContacts select.large { width: 280px; }
.block.toolbar-block { position: absolute; background: #CDD5EB; }
.block.toolbar-block .block-content { padding: 3px; overflow: hidden; margin: 0; }

/* addContact */
.block.addContact .block-content { padding: 3px; /* TODO: WAAROM FIXED HEIGHT?!?!? height: 160px;*/ overflow: hidden;}
.block.addContact .block-content table{ width:100%; }
.block.addContact .block-content table td { padding: 0 2px; }
.block.addContact .textInput { margin-top: 5px; }
.block.addContact .textInput.firstname,
.block.addContact .textInput.lastname { width:135px;}
.block.addContact .textInput.emailAddress { width:290px;}

/*addressbook*/
.block.addressbook { margin-top:10px; }
.block.addressbook .data li.emptyMessage {display: none;}
.block.addressbook .data li.emptyMessage.show {display: block;}
.block.addressbook  .block-content { height: 308px !important; }
.block.addressbook.scroll  .block-content { height: 115px !important; }

/* added contacts */
.block.addedContacts .block-content { height: 112px; }
.block.addedContacts .data { margin-bottom:  4px; }
.block.addedContacts .data li { width: 47.5%;  margin-left: 1%; float: left; }
.block.addedContacts .data li.emptyMessage {display: none;}
.block.addedContacts .data li.emptyMessage.show {display: block; width: 557px;}
/* personal message */
.block.personalMessage .block-content { height: 190px; }
.block.personalMessage textarea { height: 160px; width: 563px; margin-top:5px;     font: 11px arial,helvetica,sans-serif;}


/* contacts import */
.ui-widget-header {
	color: white !important;
}


/** step 3 ************/
.block.viewMessage .block-content { height: 152px; overflow:auto; }
.newfb-page .block.viewMessage .block-content { height: 142px; overflow:auto; }
.block-payment .block-content { padding:25px 25px }
.block-payment .block-content ul { clear: both; overflow: auto; }
.block-payment .block-content ul li { float:left; width: 100px; }
.block-payment .block-content .terms { display: block; clear: both; margin-top: 24px; }
/* end newfb-page ============================================================================= */


/*resultspage*/
.block.highCharts .block-title #chartChoice { height:16px; border: medium none;font-size: 11px; vertical-align: middle; }
.block.highCharts .block-content { height: auto; overflow:hidden; padding: 3px;  }

.block.tips .block-content > ul > .user { border-bottom: 1px solid #aaa; border-top: 1px solid #aaa; padding: 5px 0 3px 5px; font-weight: bold; margin-top:5px }
.block.tips .block-content > ul > .user-tips { border-bottom: 1px dashed #eaeaea; padding: 2px 0;  }
.block.tips .block-content > ul > li.user-tips strong { display: table-cell; padding-bottom:5px; }
.block.tips .block-content > ul > li.user-tips  { padding: 5px 0 5px 10px}
.comptips .compname {border-bottom: 1px dashed #aeaeae; padding: 2px 0 7px 0; font-weight: bold; font-size: 11px;}
.comptips .compcontent {border-bottom: 1px dashed #aeaeae; padding: 2px 0 7px 0; margin-bottom: 5px; }
.comptips .user-comptips {padding-left: 6px; }
.comptips .tip-username {color:#aeaeae;}
.block .description {padding: 2px 0px;}
.block .description a { text-decoration: none; width: 100%; display: block; }
.block .description.selected a{ font-weight: bold; background: url("../images/icons/16x16/User.png") no-repeat scroll right top transparent; }

/* response-page ============================================================================= */
/* responseTips */
.block.responseTips textarea {  font: 11px arial,helvetica,sans-serif; width: 563px; margin-top:5px; }
/* end response-page ============================================================================= */


/*message*/

.messageBox {
	width: 250px;
	height: auto;
	padding: 10px;
	text-align: center;
	position: absolute;
	z-index: 666;
	left:335px;
	background: white;
	border: 2px solid gray;
	border-top: 0;
	-moz-border-radius: 0px 0px 3px 3px;
	-moz-box-shadow: 0px 2px 3px #CCCCCC;
}

/* import contacts */
#import-contacts{
	margin-bottom:5px !important;
}

#contactContainerMain td{
	padding:2px;
}

#contactContainerMain.step2 select{
	width:300px;
}

/* file input hack */
#file {
   display: none;
  }

.dummyfile input[type="text"] {
   width: 120px;
   display: inline;
}
/* end of default.fbe.css =============================================================== */


/*bootstrap columns basic*/

.row::after, .row::before{
    content: " ";
    display: table;
}

.row::after {
    clear: both;
}

.row{
    box-sizing: border-box;
    /*margin-left: -15px;*/
    /*margin-right: -15px;*/
}
.col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9 {
    float: left;
}
.col-md-12 {
    width: 100%;
}
.col-md-11 {
    width: 91.6667%;
}
.col-md-10 {
    width: 83.3333%;
}
.col-md-9 {
    width: 75%;
}
.col-md-8 {
    width: 66.6667%;
}
.col-md-7 {
    width: 58.3333%;
}
.col-md-6 {
    width: 50%;
}
.col-md-5 {
    width: 41.6667%;
}
.col-md-4 {
    width: 33.3333%;
}
.col-md-3 {
    width: 25%;
}
.col-md-2 {
    width: 16.6667%;
}
.col-md-1 {
    width: 8.33333%;
}