

@font-family:"Source Sans Pro",sans-serif;
@primary-color:#FFFFFF;
@secondary-color:#C3C6C7;
@background-color:#0C0C0C;

@button-color:#0C0C0C;
@bar-color:#0C0C0C;
@check-lightness-color:#0C0C0C;
@button-style:'';
@background-image:none;
@background-brightness:0;

@image:'';



// general options
@font-family:Arial,sans-serif;
@transparent:transparent;
@border-radius:3px;
@padding-content-top:5px;

.create(@button-color,@background-color,@width,@height,@fontSize,@lineHeight,@padding){
	display: inline-block;
	cursor: default;
	background-color: @button-color;
	width: @width;
	height: @height - @padding-content-top;
	line-height: @lineHeight;
	padding:@padding-content-top @padding 0 @padding;
	font-size:@fontSize;
	.rounded-borders(@border-radius);
	text-align: center;
	font-weight: bold;

	max-width: 610px;
	overflow: hidden;
	//letter-spacing: -1px;
	.transition(background-color,100ms);

	.check-transparent(@button-color,@background-color,@lineHeight);
}

.check-transparent(@button-color,@background-color,@lineHeight) when (@button-color = @transparent){
	.filter-transparent-color(@background-color,@background-color,@lineHeight,@height);
	.focus &:hover.enabled,.focus &.hover.enabled,.footer &:hover.enabled,.footer &.enabled.hover,.screen &:hover{
		background-color: fade(#000000,6%);
	}
}

.check-transparent(@button-color,@background-color,@lineHeight) when not (@button-color = @transparent){
	.filter-transparent-color(@button-color,@background-color,@lineHeight,@height);
}

.filter-transparent-color(@button-color,@background-color,@lineHeight,@height){
	.color-by-lightness(@button-color);
	//.background-by-lightness(@button-color);
	.borders-by-lightness(@button-color,lightness(@button-color),lightness(@background-color));


	.multiple-box-shadows(inset 0 1px 0px rgba(255, 255, 255, 0.35),0 2px 2px fade(#000,20% - lightness(@background-color) / 4));
	.text-shadow-by-lightness(@button-color);


	&.enabled{
		cursor: pointer;
	}


	.focus &:hover.enabled,.focus &.hover.enabled,.footer &:hover.enabled,.footer &.enabled.hover,.screen &:hover{

		/*background-image: none;
		.background-color-by-lightness(@button-color);
		.transition(all,150ms);
		.box-shadow(none);*/
		.transition(background-color,100ms);
		.smooth-background(@button-color,10%);
		//.transition(all,400ms);
		cursor: pointer;
		//.transition(all,200ms);
	}

	.focus &:active.enabled,.footer &:active.enabled,&.selected,&.active.enabled{
		.box-shadow( inset 0 2px 2px rgba(0, 0, 0, 0.8));
		line-height: @lineHeight + 2;
		.smooth-background(@button-color,10%);
		border: none;
		border-bottom: 1px solid darken(@button-color,20%);
		margin: 1px;
		margin-bottom: 0;
		//.transition(all,0);
		span{
			margin-top:1px;
		}

	}

	&.disabled{
		.opacity(50);
		.transition(all,0);
	}

	//icons
	.reload{
		background:url('https://s3-eu-west-1.amazonaws.com/typeform-media-static/reload-black.png') no-repeat;
		width: 24px;
		margin-top: 7px;
		height: @height - 10;
		position: relative;
		display: block;
		float: left;
		margin-right: 17px;
		top:1px;
		.opacity(40);
	}

	.tick{
		background:url('https://s3-eu-west-1.amazonaws.com/typeform-media-static/tick-black.png') no-repeat;
		position: relative;
		display: block;
		float: right;
		width: 32px;
		height: 30px;
		margin: 9px 25px 0;
		.opacity(40);
	}

	.next{
		.iconFont("I");
		.inline-block();
		font-size: 27px;
		width: 20px;
		line-height: 31px;
		margin-left: 2px;
	}

	.confirm{
		.iconFont("H");
		.inline-block();
		font-size: 20px;
		width: 16px;
		line-height: 28px;
		margin-left: 9px;
	}

	.up{
		display: block;
		.iconFont("K");
		font-size: 27px;
		width: 21px;
		line-height: 30px;
		margin-left: -4px;
		margin-right: 2px;
		text-align: left;
		font-weight: normal;
	}

	.down{
		display: block;
		.iconFont("L");
		font-size: 27px;
		width: 21px;
		line-height: 30px;
		margin-left: -4px;
		margin-right: 2px;
		text-align: left;
		font-weight: normal;
	}
}

.background-color-by-lightness(@c,@l) when (lightness(@c)<50%){ background-color:darken(@c,@l); }
.background-color-by-lightness(@c,@l) when (lightness(@c)>=50%){ background-color:lighten(@c,@l); }

.smooth-background(@c,@l) when (lightness(@c)<90%){ background-color:lighten(@c,@l); }
.smooth-background(@c,@l) when (lightness(@c)>=90%){ background-color:darken(@c,@l); color: darken(@c,70%); }

.color-by-lightness(@c) when (lightness(@c)=<10%){ color: lighten(@c,70%); }
.color-by-lightness(@c) when (lightness(@c)>10%) and (lightness(@c)=<25%){ color: lighten(@c,50%); }
.color-by-lightness(@c) when (lightness(@c)>25%) and (lightness(@c)=<50%) { color: lighten(@c,45%); }
.color-by-lightness(@c) when (lightness(@c)>50%) and (lightness(@c)=<75%) { color: darken(@c,35%); }
.color-by-lightness(@c) when (lightness(@c)>75%){ color: darken(@c,50%); }

.text-shadow-by-lightness(@c) when (lightness(@c)=<10%){ .text-shadow(fadeout(#000,30%) 0px -1px 1px); }
.text-shadow-by-lightness(@c) when (lightness(@c)>10%) and (lightness(@c)=<25%){ .text-shadow(fadeout(#000,50%) 0px -1px 1px); }
.text-shadow-by-lightness(@c) when (lightness(@c)>25%) and (lightness(@c)=<50%) { .text-shadow(fadeout(#000,60%) 0px -1px 1px); }
.text-shadow-by-lightness(@c) when (lightness(@c)>50%) and (lightness(@c)=<75%) { .text-shadow(fadeout(#fff,60%) 0px 1px 1px); }
.text-shadow-by-lightness(@c) when (lightness(@c)>75%){ .text-shadow(fadeout(#fff,50%) 0px 1px 1px); }

.borders-by-lightness(@button-color,@lbt,@lbg) when (@lbg>=0) and (@lbg<33%) and (@lbt>=0) and (@lbt<33%){ .apply-borders(#fff,95% ,@lbg / 4 ) }
.borders-by-lightness(@button-color,@lbt,@lbg) when (@lbg>=0) and (@lbg<33%) and (@lbt>=33%) and (@lbt<66%){ .apply-borders(@button-color,100 - @lbg  ,@lbg / 5) }
.borders-by-lightness(@button-color,@lbt,@lbg) when (@lbg>=0) and (@lbg<33%) and (@lbt>=66%) and (@lbt=<100%){ .apply-borders(@button-color,@lbt - @lbg + 10% ,@lbg / 6) }
.borders-by-lightness(@button-color,@lbt,@lbg) when (@lbg>=33%) and (@lbg<70%) and (@lbt>=0) and (@lbt<33%){ .apply-borders(@button-color,0% ,@lbg / 4 ) }
.borders-by-lightness(@button-color,@lbt,@lbg) when (@lbg>=33%) and (@lbg<70%) and (@lbt>=33%) and (@lbt<66%){ .apply-borders(@button-color,10% - (@lbg - @lbt)  ,@lbg / 5) }
.borders-by-lightness(@button-color,@lbt,@lbg) when (@lbg>=33%) and (@lbg<70%) and (@lbt>=66%) and (@lbt=<100%){ .apply-borders(@button-color,@lbt - @lbg + 14% ,@lbg / 5) }
.borders-by-lightness(@button-color,@lbt,@lbg) when (@lbg>=70%) and (@lbg=<100%) and (@lbt>=0) and (@lbt<33%){  .apply-borders(#fff,60% ,@lbg / 4 ) }
.borders-by-lightness(@button-color,@lbt,@lbg) when (@lbg>=70%) and (@lbg=<100%) and (@lbt>=33%) and (@lbt<66%){ .apply-borders(@button-color,5% ,@lbg / 9) }
.borders-by-lightness(@button-color,@lbt,@lbg) when (@lbg>=70%) and (@lbg=<100%) and (@lbt>=66%) and (@lbt=<100%){ .apply-borders(@button-color,@lbt - @lbg + 17% ,@lbg / 8) }

.apply-borders(@button-color,@p,@gain){
	border-top: 1px solid darken(@button-color,@p);
	border-left: 1px solid darken(@button-color,@p + @gain);
	border-right: 1px solid darken(@button-color,@p + @gain);
	border-bottom: 1px solid darken(@button-color,@p + @gain * 2);
}

.absolute(@t:0,@r:0,@b:0,@l:0){
  position: absolute;
  top:@t;
  right:@r;
  bottom:@b;
  left:@l;
}

.inline-block(){
  display:-moz-inline-stack;
  display:inline-block;
  vertical-align:top;
  zoom:1;
  *display:inline;
}

.ellipsis {
	display: block;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	-o-text-overflow: ellipsis;
	-ms-text-overflow: ellipsis;
}

.no-ellipsis {
  display: block;
  white-space: normal;
  overflow: auto;
  text-overflow: clip;
  -o-text-overflow: clip;
  -ms-text-overflow: clip;
}

.ellipsis() {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  -ms-text-overflow: ellipsis;
}
.no-ellipsis() {
  display: block;
  white-space: normal;
  overflow: auto;
  text-overflow: clip;
  -o-text-overflow: clip;
  -ms-text-overflow: clip;
}

.box-shadow(@shadow: 0 1px 3px rgba(0,0,0,.25)) {
  -webkit-box-shadow: @shadow;
  -moz-box-shadow: @shadow;
  box-shadow: @shadow;
}

.multiple-box-shadows(
    @shadow1, 
    @shadow2: transparent 0 0 0, 
    @shadow3: transparent 0 0 0, 
    @shadow4: transparent 0 0 0, 
    @shadow5: transparent 0 0 0) 
{
   // In case some browsers support only one shadow
   
    box-shadow: @shadow1; 
    -webkit-box-shadow: @shadow1;
    -moz-box-shadow: @shadow1;

    box-shadow: @shadow1, @shadow2, @shadow3, @shadow4, @shadow5;
    -webkit-box-shadow: @shadow1, @shadow2, @shadow3, @shadow4, @shadow5;
    -moz-box-shadow: @shadow1, @shadow2, @shadow3, @shadow4, @shadow5;
}

.text-shadow(@shadow:#666666 3px 3px 3px) {
	text-shadow:@shadow;
}

.transform3d(@a:0,@b:0,@c:0){
	-webkit-transform:translate3d(@a,@b,@c);
	-moz-transform: translate3d(@a,@b,@c);
	transform: translate3d(@a,@b,@c);
}

.rounded-borders(@radius: 5px) {
  border-radius: @radius;
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
}
.multiple-rounded-borders(@a:0,@b:0,@c:0,@d:0){
  -webkit-border-top-left-radius: @a;
  -webkit-border-top-right-radius: @b;
  -webkit-border-bottom-right-radius: @c;
  -webkit-border-bottom-left-radius: @d;
  -moz-border-radius-topleft: @a;
  -moz-border-radius-topright: @b;
  -moz-border-radius-bottomright: @c;
  -moz-border-radius-bottomleft: @d;
  border-top-left-radius: @a;
  border-top-right-radius: @b;
  border-bottom-right-radius: @c;
  border-bottom-left-radius: @d;
}

.transition(@attr:all,@val,@ease:ease-out,@delay:0){
	-moz-transition: @attr @ease @val @delay;
	-webkit-transition: @attr @ease @val @delay;
	-o-transition: @attr @ease @val @delay;
	transition: @attr @ease @val @delay;
}

.transition2(@t1,@t2){
  -moz-transition: @t1,@t2;
  -webkit-transition: @t1,@t2;
  -o-transition: @t1,@t2;
  transition: @t1,@t2;
}

.opacity(@op: 100) {
	-khtml-opacity: @op / 100;
	-moz-opacity: @op / 100;
	opacity: @op / 100;
	//filter: ~"alpha(opacity = (@{op}))";
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=@{op})";
}

// Gradients
#gradient {
  .vertical (@startColor: #555, @endColor: #333) {
  	 background-color: @endColor;
    background-repeat: repeat-x;
    background-image: -khtml-gradient(linear, left top, left bottom, from(@startColor), to(@endColor)); //  Konqueror 
    background-image: -moz-linear-gradient(@startColor, @endColor); //  FF 3.6+ 
    background-image: -ms-linear-gradient(@startColor, @endColor); //  IE10 
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, @startColor), color-stop(100%, @endColor)); //  Safari 4+, Chrome 2+ 
    background-image: -webkit-linear-gradient(@startColor, @endColor); //  Safari 5.1+, Chrome 10+ 
    background-image: -o-linear-gradient(@startColor, @endColor); //  Opera 11.10 
    //-ms-filter en button css
    background-image: linear-gradient(@startColor, @endColor); //  the standard 
  }
}

.clear{
	clear: both;
}

.noSelect() {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: -moz-none;
  -ms-user-select: none;
  user-select: none;
}

.select() {
  -webkit-touch-callout: text;
  -webkit-user-select: text;
  -khtml-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select:text;
}

@font-face {
  font-family: 'ReklameScriptRegular';
  src: url('/bundles/quickyformadmin/css/fonts/reklamescript-regular.eot');
  src: url('/bundles/quickyformadmin/css/fonts/reklamescript-regular.eot?#iefix') format('embedded-opentype'),
     url('/bundles/quickyformadmin/css/fonts/reklamescript-regular.woff') format('woff'),
     url('/bundles/quickyformadmin/css/fonts/reklamescript-regular.ttf') format('truetype'),
     url('/bundles/quickyformadmin/css/fonts/reklamescript-regular.svg#ReklameScriptRegular') format('svg');
  font-weight: normal;
  font-style: normal;
}

.handwrite{
  font-family:'ReklameScriptRegular';
  -webkit-font-smoothing:antialiased;
}

.hexToRgba(@colour: #ffffff, @alpha)
{
  @alphaColour: hsla(hue(@colour), saturation(@colour), lightness(@colour), @alpha);
  @ieAlphaColour: argb(@alphaColour);
  background-color: @colour; // Fallback for older browsers
  background-color: @alphaColour;
}

.select-effect{}

.style-transparent-choice{
	position: relative;

	.aux{
		border-color:@secondary-color;
	}

	.aux, .aux div{
		position: absolute;
		top:0;
		bottom:0;
		left:0;
		right:0;
		.rounded-borders(2px);
	}

	.aux img{
		width:100%;
		height:100%;
	}

	.dark{
		display: none;
	}

	&.step5 {
		.dark{ display:block; }
		.light{display:none;}
	}

	&.step0 .aux img{ .opacity(30); }
	&.step1 .aux img{ .opacity(40); }
	&.step2 .aux img{ .opacity(50); }
	&.step3 .aux img{ .opacity(60); }
	&.step4 .aux img{ .opacity(60); }
	&.step5 .aux img{ .opacity(60); }	

	.bg{
		z-index:2;
		background: #000;
		
	}

	&.step0 .bg{ .opacity(3); }
	&.step1 .bg{ .opacity(4); }
	&.step2 .bg{ .opacity(4); }
	&.step3 .bg{ .opacity(5); }
	&.step4 .bg{ .opacity(10); }
	&.step5 .bg{ .opacity(8);background:#FFF; }

	.inset{
		z-index:3;
		.box-shadow(inset 0 2px 0 #ffffff);
	}

	&.step0 .inset{ .opacity(50); }
	&.step1 .inset{ .opacity(30); }
	&.step2 .inset{ .opacity(15); }
	&.step3 .inset{ .opacity(10); }
	&.step4 .inset{ .opacity(7); }
	&.step5 .inset{ .opacity(0); }

	.bd{
		z-index:4;
		border:1px solid #000000;
	}

	&.without-padding {
		.inset{
			.rounded-borders(0);
		}
		.bd{
			border-left: none;
			.rounded-borders(0);
		}
		&.first{
			.bd{
				border-left-style: solid;
				border-left-width:1px;
			}
			.bd, .background, .inset{
				.rounded-borders(2px 0 0 2px);
			}
		}
		&.last{
			.bd, .background, .inset{
				.rounded-borders(0 2px 2px 0);
			}
		}
	}

	&.step0 .bd{ .opacity(15); }
	&.step1 .bd{ .opacity(20); }
	&.step2 .bd{ .opacity(30); }
	&.step3 .bd{ .opacity(40); }
	&.step4 .bd{ .opacity(50); }
	&.step5 .bd{ .opacity(15); border-color: #ffffff; }	

	.tick{
		display:none;
		position: absolute;
		right: 7px;
		top: 50%;
		margin-top:-15px;
		font-size:21px;
		.opacity(70);
		.iconFont("H");

	}

	&.selected{
		.tick{
			display: block;
		}

		&.step0 .overlay{ .opacity(3);  display: block; background-color: #000000; }
		&.step1 .overlay{ .opacity(10); display: block; background-color: #ffffff; }
		&.step2 .overlay{ .opacity(5); display: block; background-color: #ffffff; }
		&.step3 .overlay{ .opacity(5); display: block; background-color: #ffffff; }
		&.step4 .overlay{ .opacity(5); display: block; background-color: #ffffff; }
		&.step5 .overlay{ .opacity(5); display: block; background-color: #ffffff; }
	}

	.overlay{
		.hexToRgba(#000000, 0);
		z-index:1;
	}

	&.step0 .overlay{ .hexToRgba(#000000, 0); }
	&.step1 .overlay, &.step2 .overlay, &.step3 .overlay, &.step4 .overlay, &.step5 .overlay { .hexToRgba(#ffffff, 0) }

	&.pre-selected,&.active{
		&.step0 { .overlay{ .hexToRgba( #000000, 0.05); } .bd{ .opacity(15 + 15); } }
		&.step1 { .overlay{ .hexToRgba( #ffffff, 0.2);  } .bd{ .opacity(20 + 15); } }
		&.step2 { .overlay{ .hexToRgba( #ffffff, 0.1);  } .bd{ .opacity(30 + 15); } }
		&.step3 { .overlay{ .hexToRgba( #ffffff, 0.1);  } .bd{ .opacity(40 + 15); } }
		&.step4 { .overlay{ .hexToRgba( #ffffff, 0.1);  } .bd{ .opacity(50 + 15); } }
		&.step5 { .overlay{ .hexToRgba( #ffffff, 0.1);  } .bd{ .opacity(10 + 15); } }
	}

	&:hover .no-hover .overlay{
		display: none;
	}

	.line{
		position: absolute;
		height: 10px;
		bottom: -10px;
		width: 1px;
		border-left: 1px solid #000000;
		left: 50%;
	}

	&.step0 .line{ .opacity(15); }
	&.step1 .line{ .opacity(20); }
	&.step2 .line{ .opacity(30); }
	&.step3 .line{ .opacity(40); }
	&.step4 .line{ .opacity(50); }
	&.step5 .line{ .opacity(15); border-left:1px solid #ffffff; }	
}
.color-primary{
	color: @primary-color;
}

.color-secondary{
	color: @secondary-color;
}
.layout-columns{
	display: table;
	width: 100%;
	padding: 0;
	margin: 0;
	table-layout: fixed;
	> li {
		display: table-cell;
		width: 2%;
		word-break: break-word;
	}
}

.layout-float{
	padding: 0;
	margin: 0;
	> li{
		list-style: none !important;
		display: block;
		float: left;
		text-align: center;
		margin-right: 15px;
	}
}

.layout-thee-columns{
	> li {
		padding-top: 17px;
		padding-bottom: 17px;
		word-break: break-word;
		&.first{
			padding-right: 10px;
		}
		&.third{
			padding-left: 10px;
		}
	}
}

.layout-float-left{
	float: left;
	margin-right: 10px;
}
.layout-float-right{
	float: right;
	margin-left: 10px;
}

 .layout-fixed-width-200{
 	width: 200px;
 }
.text-align-left{
	text-align: left;
}

.text-align-center{
	text-align: center;
}

.text-align-right{
	text-align: right;
}

.text-antialiased{
	-webkit-font-smoothing: antialiased;
}

.text-subpixel-antialiased{
	-webkit-font-smoothing: subpixel-antialiased;
}

.text-size-s{
	font-size: 12px;
	@media @large{
		font-size: 14px;
	}
}

.text-size-m{
	font-size: 13px;
	@media @large{
		font-size: 15px;
	}
}
.text-size-xl{
	font-size: 15px;
	@media @large{
		font-size: 22px;
	}
}
.choice-square{
	text-align: center;
	cursor: pointer;
	.choice-wrapper{
		position: relative; 
		display:block;
		padding: 20px 0 19px;
	}
	.label{
		position: relative;
		z-index: 1;
		color: @secondary-color;
		.report &{
			color: @bar-color;
		}
	}
	&.preselected{
		background-color: fade(@secondary-color,15%);
	}
	&.checked{
		.select-effect();
		.label{
			color: fade(contrast(@secondary-color), 70%);
		}
		.background{
			position: absolute;
			z-index: 0;
			font-weight: bold;
			background-color: @secondary-color;
			top: 1px;
			bottom: 1px;
			left: 0;
			right: 1px;
		}
		&.step0, &.step1{
			.background{
				top: 0;
				bottom: 0;
				left: -1px;
				right: 0;
			}
		}
	}
	.line{
		display: none;
	}
	&.showLineConnector .line{
		display: block;
	}
	.level{
		position: absolute;
		background-color: fade(@bar-color,40%);
		bottom: 0;
		left: 0;
		right: 0;
	}
}

/* ======= default browser stylesheet ====== */

//  ================
//  = General vars =
//  ================
@validation-color:#990000;

//  =================
//  = Media queries =
//  =================
@theshold-medium: "500px";
@theshold-large: "800px";
@medium: ~"only screen and (min-width: @{theshold-medium})";
@large: ~"only screen and (min-width: @{theshold-large})";

//  ==========
//  = Design =
//  ==========
.primaryColor		{ color:@primary-color; }
.secondaryColor  { color:@secondary-color; }
.buttonColor  	{ color:@button-color; }
.barColor  	{ color:@bar-color; }
.backgroundColor { background-color:@background-color; }
.fontFamily { font-family: @font-family; }
.backgroundImage { background-image: @background-image; }

//  =============
//  = Functions =
//  =============
.persistentSteps(){
	&.step0{
		border-color:fade(#000000,20%);
		.box-shadow(0 0 3px fade(#000000,20%));
		.overlay{
			background-color:#000000;
			.opacity(2);
		}
	}

	&.step1{
		border-color:fade(#000000,25%);
		.box-shadow(0 0 3px fade(#000000,20%));
		.overlay{
			background-color:#000000;
			.opacity(4);
		}
	}

	&.step2{
		border-color:fade(#000000,25%);
		.box-shadow(0 0 3px fade(#000000,25%));
		.overlay{
			background-color:#000000;
			.opacity(5);
		}
	}

	&.step3{
		border-color:fade(#000000,25%);
		.box-shadow(0 0 3px fade(#000000,30%));
		.overlay{
			background-color:#000000;
			.opacity(5);
		}
	}

	&.step4{
		border-color:fade(#000000,40%);
		.box-shadow(0 0 3px fade(#000000,45%));
		.overlay{
			background-color:#000000;
			.opacity(8);
		}
	}

	&.step5{
		.box-shadow(0 0 3px fade(#000000,45%));
		border-top:1px solid fade(#fff,15%);
		.overlay{
			background-color:#ffffff;
			.opacity(6);
		}
	}
}

.keyboard-icon{
	font-family: 'keyboard';
	color:fade(@secondary-color,40%);
	position: absolute;

	&.hidden{
		display: none;
	}
}

@handSpeed:1000ms;

.steps(){
	10%,87% { .opacity(100); }
	0%, 28%,56%,84% { margin-top:-3px; }
	14%,42%,70%,100% { margin-top:0; }
		
}
.hand-effect(){
	.opacity(0);
	@-webkit-keyframes hand-effect {
		.steps();
	}
	@-moz-keyframes hand-effect {
		.steps();
	}
	@-ms-keyframes hand-effect {
		.steps();
	}

	-webkit-animation: hand-effect @handSpeed 0;
    -moz-animation:    hand-effect @handSpeed 0;
    -ms-animation:     hand-effect @handSpeed 0;
}

.buttonText(){
	.inline-block();
	font-family: Helvetica,Arial;
	font-size: 11px;
	margin: 16px 8px 0 8px;
}

//  ===========
//  = Buttons =
//  ===========
.general-button(@button-color,@background-color) {
	.create(@button-color,@background-color, auto, 50px, 25px, 38px, 20px);
}
.nav-button(@button-color,@background-color) {
	.create(@button-color, @background-color, auto, 40px, 19px, 30px, 12px);
}
.key-button(@button-color,@background-color) {
	.create(@button-color, @background-color, 15px, 30px, 18px, 19px, 7px);
}
.key-great-button(@button-color,@background-color) {
	.create(@button-color, @background-color, 26px, 40px, 25px, 30px, 7px);
}

//  ===========
//  = Overlay =
//  ===========
.overlayOpacity{ 
	.overlayOpacity(@background-brightness);
}

	.overlayOpacity(@a) when (@a < 0){
		.opacity(@a * (-100));
	}
	.overlayOpacity(@a) when (@a >= 0){
		.opacity(@a * 100);
	}

.persistent.overlayColor{
	position: absolute;
	height: 100%;
	width: 100%;
	top:0;	
	left: 0;
	z-index:1;
}

.persistent.background{
	position: absolute;
	bottom:0;
	left:0;
	right:0;
}

.overlayColor{
	.overlayColor(@background-brightness);
}
	.overlayColor(@a) when (@a < 0){
		background-color:#000000;
	}
	.overlayColor(@a) when (@a >= 0){
		background-color:#ffffff;
	}

.iconFont(@letter){
	font-family: typeIconFont;
	&:before{
		content:@letter;
	}
}

//  ========
//  = Body =
//  ========

body {
	padding: 16px;
	margin: 0;
}

//  ==============
//  = Background =
//  ==============

#background{

	position: fixed;
	width:100%;
	height:100%;
	z-index: 1;
	top:0;
	left: 0;
	right: 0;
	bottom: 0;

	background-image: @background-image;
	background-color:@background-color;
	
	div{
		position: absolute;
		height: 100%;
		width: 100%;
		top:0;	
	}
} // close background

.fullscreen #background { background-size: cover; }
.repeat #background { background-repeat: repeat; }
.no-repeat #background { background-repeat: no-repeat; }

//  ===========
//  = Reports =
//  ===========
#reports { 

	display: block; 
	position: relative;
	z-index: 2;
	margin: 20px auto; 
	max-width: 800px;
	text-align: left;
	line-height: 100%;
	font-family: @font-family;
	-webkit-font-smoothing: antialiased;
	
	.btreport {
		.opacity(20);
		position: absolute;
		top:0;
		border-top: 1px solid;
		width: 100%;
	} 

	ul { 

		margin: 0;
		padding: 0;
		list-style: none;

		li.list {
			padding: 10px 0 25px;
			.opacity(40);
			&.focus{
				.opacity(100); 
			}
		}

	}	

	.widget	{ 

		.question { 
			font-size: 20px; 
			line-height: 140%;
			padding-top: 18px;
			padding-bottom: 8px; 
			color: @primary-color;
		}

		.description { 
			font-size: 14px; 
			padding-bottom: 10px; 
			font-weight: bold;
			color: @primary-color;
			.opacity(80);
			
			span { 
				font-weight: normal;
				.opacity(70);  
			}
		}

		.attachment-wrapper {
			padding-top: 15px;
		}

		&.opened {
			ul.choices-bar {
				&.rowbutton {
					.open {
						display: none;
					}

					.close {
						display: block;
					}

					.percent {
						.opacity(0);
						.transition(opacity,200ms);
					}
				}
			}	
		}

		ul.choices-bar {

			margin: 10px 0;
			width: 100%;
			
			.number {font-family: 'Arial'}

			&.hide { display: none; margin-top:-10px; }

			&.rowbutton { 
				cursor: pointer; 
				margin-top:-10px; 

				.label { 
					font-size: 16px; 
					padding: 11px 10px 10px;
					color: @primary-color;
				}

				.open {
					display: block;
				}

				.close {
					display: none;
				}

				.right {
					position: absolute; 
					right: 0;
				}

				.bd:hover {
					.opacity(50);
					.transition(opacity,200ms);
				}

			}
			
			li {

				width: 100%;
				position: relative;
				display: -moz-inline-stack;
				display: inline-block;
				vertical-align: top;
				box-sizing: border-box;
				-webkit-box-sizing: border-box;
				-moz-box-sizing: border-box;
				zoom: 1;
				margin: 6px 0;
				list-style: none;

				.bdindex {
					position: absolute;
					top: 0;
					bottom: 0;
					left: 0;
					border-right: 1px solid;
					width: 38px;
					.opacity(20);
				}

				.number {
					position: absolute;
					font-size: 12px;
					width: 38px;
					text-align: center;
					.opacity(50);
					font-weight: bold;
					top: 50%;
					margin-top: -8px;
					color: @secondary-color;
					border-color: @secondary-color;

					&.nimage {
						position: absolute;
						.opacity(100);
						width: auto;
						height: auto;
						margin-top: 0;
						top: auto;
						bottom: 0;
						border-radius: 2px;
						-webkit-border-radius: 2px;
						-moz-border-radius: 2px;
						background-color: @background-color;
						
						span {
							position: relative;
							top: 0;
							left: 0;
							right: 0;
							bottom: 0;
							.opacity(30);
							padding: 0px 3px 0px 4px;
							border-right: 1px solid;
							border-top: 1px solid;
							border-radius: 2px;
							-webkit-border-radius: 2px;
							-moz-border-radius: 2px;
						}

					}
				}

				.image {
					position: absolute;
					padding: 4px;
					width: 38px;
					height:100%;
					top: 0;
					bottom: 0;
					text-align: center;
					color: @secondary-color;
					border-color:@secondary-color;

					box-sizing: border-box;
					-webkit-box-sizing: border-box;
					-moz-box-sizing: border-box;
					
					img {
						max-width: 30px;
						max-height: 30px;
						position: relative;
					}
				}

				.label { 
					font-size: 17px; 
					display: inline-block; 
					padding: 11px 0 10px 10px;
					position: relative;
					left: 38px;
					color: @secondary-color;
					box-sizing: border-box;
					-webkit-box-sizing: border-box;
					-moz-box-sizing: border-box;
				}

				.percent { 
					float: right; 
					padding: 11px 10px 10px; 
					font-size: 20px; 
					font-weight: bold;
					color: @secondary-color;
					box-sizing: border-box;
					-webkit-box-sizing: border-box;
					-moz-box-sizing: border-box;
					
					span { 
						.opacity(50); 
						font-weight: normal; 
					}

				}

				.border { 
					z-index:2;
					position: absolute;
					top: 0;
					bottom: 0;
					left: 0;
					right: 0; 
					.opacity(20);
					border: 1px solid;
					border-radius: 2px;
					-webkit-border-radius: 2px;
					-moz-border-radius: 2px;

					-webkit-box-shadow: 0 1px 0 rgba(0,0,0,0.25), inset 0 1px 0 #ffffff;
					-moz-box-shadow: 0 1px 0 rgba(0,0,0,0.25), inset 0 1px 0 #ffffff;
					box-shadow: 0 1px 0 rgba(0,0,0,0.25), inset 0 1px 0 #ffffff;
					
				}

				.bd { 
					z-index:2;
					position: absolute;
					top: 0;
					bottom: 0;
					left: 0;
					right: 0; 
					.opacity(20);
					border-radius: 2px;
					-webkit-border-radius: 2px;
					-moz-border-radius: 2px;
					
					img {
						position: absolute;
						top: 0;
						bottom: 0;
						left: 0;
						right: 0; 
						z-index: 1;
						-ms-filter: "progid:DXImageTransfo";
						width: 100%;
						height: 100%;
					}
				}

				.aux {
					position: absolute;
					top: 0;
					left: 38px;
					right: 0;
					bottom: 0;
					overflow: hidden;

					.percent {
						overflow: hidden;
						right: 0%;
						position: relative;
						z-index: 2;
						top: 0;
						left: 18px;
						bottom: 0;
						width: 100%;
						text-align: right;
						box-sizing: border-box;

						.color-by-lightness(@bar-color);
					}

					.bg { 
						position: absolute;
						top: 0;
						bottom: 0;
						left: 0;
						right: 0;
						width: 0%;
						background-color: @bar-color;

						.label {
							position: relative;
							left: 0;
							z-index: 2;
							width: 100%;
							height: 100%;
							overflow: hidden;
							.color-by-lightness(@bar-color);
							
							box-sizing: border-box;
							-webkit-box-sizing: border-box;
							-moz-box-sizing: border-box;
						}

					}

				} // close aux 

			} // close li

		} // close ul.choices-bar

		.expandable-content {
			display: none;
		}

		.button-expand {
			color: @primary-color;
			display: block;
			font-size: 14px;
			text-decoration: none;
			margin-top: 14px;

			span {
				font-size: 12px;
			}

			&:hover {
				color: @secondary-color;
			}
		}

		div.rating {
			
			width: 100%;
			position: relative;

			.icons {

				color: @bar-color;

				.icon, .icon-back { display: inline-block; line-height: 100%; letter-spacing: 3px; padding: 10px 0; }

				.average { 
					display: block; 
					font-size: 20px; 
					font-weight: bold;
					letter-spacing: 0px;
					font-family: Arial;
					line-height: 18px;
					
					div {
						display: inline-block;

						@media @large{
							display: block;
						}
					} 

					span {
						font-size: 14px;
						.opacity(80);
						font-weight: normal;
					}

					@media @large{
						display: inline-block;
						margin-left: 15px;
					}

				}

				.icons-back	{

					position: absolute;
					top: 0;
					white-space:nowrap;
					overflow: hidden;

				}
			}

		} // close div.rating

		.rating {

				&.icon-star { .icon-rating("a","A"); }
				&.icon-heart { .icon-rating("b","B"); }
				&.icon-user { .icon-rating("c","C"); }
				&.icon-up { .icon-rating("d","D"); }
				&.icon-crown { .icon-rating("e","E"); }
				&.icon-cat { .icon-rating("f","F"); }
				&.icon-dog { .icon-rating("n","N"); }
				&.icon-circle { .icon-rating("o","O"); }
				&.icon-flag { .icon-rating("p","P"); }
				&.icon-droplet { .icon-rating("q","Q"); }
				&.icon-tick { .icon-rating("r","R"); }
				&.icon-lightbulb { .icon-rating("s","S"); }
				&.icon-trophy { .icon-rating("t","T"); }
				&.icon-cloud { .icon-rating("u","U"); }
				&.icon-thunderbolt { .icon-rating("v","V"); }
				&.icon-pencil { .icon-rating("w","W"); }
				&.icon-skull { .icon-rating("x","X"); }

			// icons
			.icon-rating(@default,@hover){
				.icon{
					.iconFont(@default);
				}
				.icon-back{
					.iconFont(@hover);
					text-transform:uppercase;
				}
			}

		} // close rating

		&.step0{
			.border, .bdindex {
				border-color:fade(#000000,80%) !important;
			}	
		}

		&.step1{
			.border, .bdindex {
				border-color:fade(#000000,40%) !important;
			}	
		}

		&.step2{
			.border, .bdindex {
				border-color:fade(#000000,40%) !important;
			}	
		}

		&.step3{
			.border, .bdindex {
				border-color:fade(#000000,40%) !important;
			}	
		}

		&.step5, &.step4{
			.border {
				-khtml-opacity: 0.4 !important;
				-moz-opacity: 0.4 !important;
				opacity: 0.4 !important;
				//filter: ~"alpha(opacity = (40))" !important;
			    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)" !important;

				border:1px solid rgba(255,255,255,0.5) !important;
				border-top:1px solid rgba(255,255,255,0.8) !important;
				
				-webkit-box-shadow: 0 1px 0 rgba(0,0,0,0.25), inset 0 1px 3px rgba(255,255,255,0.3) !important;
				-moz-box-shadow: 0 1px 0 rgba(0,0,0,0.25), inset 0 1px 3px rgba(255,255,255,0.3) !important;
				box-shadow: 0 1px 0 rgba(0,0,0,0.25), inset 0 1px 3px rgba(255,255,255,0.3) !important;
			}

			.bdindex {
				border-color:fade(#fff,90%) !important;
			}
			
			&.rowbutton { 
				.bd:hover {
					-khtml-opacity: 1 !important;
					-moz-opacity: 1 !important;
					opacity: 1 !important;
					//filter: ~"alpha(opacity = (100))" !important;
				    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)" !important;
				}
			}			
		}

	} // close widget

} // close reports

//  ==========
//  = Footer =
//  ==========

@footerHeight:60px;
.footer{
	position:fixed;
	bottom:0;
	left: 0;
	right: 0;
	width:100%;
	height:@footerHeight;
	z-index: 5;
	overflow: hidden;
	border-top-style:solid;
	border-top-width: 1px;
	.persistentSteps();
	.noSelect();

	.background{
		z-index: 1;
		height:100%;
	}

	.by{
		
		position: absolute;
		right: 119px;
		top: 17px;
		z-index:2;
		display: none;
		@media @medium{
			display: block;
		}

		.button{

			text-decoration: none;
			font-family: Helvetica, Arial;
			font-size: 11px;
			padding: 3px 6px;
			height: 16px;
			line-height: 17px;
			font-weight: normal;
			&:active{
				line-height: 18px !important;
			}

		}

	}

	.touch-text {
		position: relative;
		width: 100%;
		padding: 0 20px;
		top:20px;
		z-index: 4;
		text-align: center;
		.opacity(50);
		font-size: 16px;
		font-family: Helvetica, Arial;
		-webkit-font-smoothing: subpixel-antialiased;

		a{
			color: inherit;
			text-decoration: none;
			font-weight: bold;
			border: none;
			
			&:hover{
				text-decoration:underline;
			}
		}
	}

	.overlay{
		position: absolute;
		top:0;
		left:0;
		right:0;
		bottom:0;
		z-index:2;
	}
	
	.nav-buttons{
		position: absolute;
		z-index: 2;
		right: 8px;
		top: 8px;

		.button-wrapper{

			&.up{
				top:8px;
				margin-right:2px;
			}
			&.down{
				top:8px;
			}
		}
	}

}

.scroll-overlay{
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background: darken(@background-color,20%);
	display: none;
	z-index: 4;
}

.proportion,.percent{
	.footer .content #progress{
		visibility: visible;
		.opacity(100);
	}
}

//  =====================
//  = Controls (common) =
//  =====================

.button-wrapper{

	.inline-block();

	&.loading{
		#spin{
			left: 50%;
			text-align: center;
			width: 20px;
			position: absolute;
			top: 50%;
		}

	}
}

.button.nav {
	.nav-button(@button-color,@background-color);
}

.component {
	margin-top: 20px;
}


/* ======= simple browser stylesheet ====== */

