/* app css stylesheet */

// -----
// @INTRO
// -----
// .protectedIntroBody{
// 	margin-bottom: 50px;
// }

.Private{display: none;}
// @end

.importantContainer{
	background: url("../img/geometry.png");
	border-bottom: 1px dashed @gray-lighter;
}

.blockquotes{
	margin-bottom: 90px;
}
.credit{
	color:@gray-light;
	position: absolute;
	right:10px;
	bottom:10px;
}

#scrollTop{
	display: block;
	background-color: @gray-light;
	text-align: center;
	border-radius:3px;
	color: #fff;
	font-size: 18px;
	vertical-align: center;
	.square(50px);
	line-height: 44px;
	position: fixed;
	bottom: 60px;
	right: 30px;
	text-decoration: none;
	.opacity(50);
	cursor: pointer;
	z-index:1020;
}
.pikockContainer{
	@backgroundImg: "../img/create-website-pikock.jpg";
	background-image: url("@{backgroundImg}");
	background-position: center center;
	background-size:cover;
	background-attachment: fixed;
	background-repeat: no-repeat;
	background-color: #fff;
	position: absolute;
	min-width: 100%;
	width: 100%;
	top: 50px;
	bottom: 0;
	left: 0;
	right:0;
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader( src='@{backgroundImg}', sizingMethod='scale');
	-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader( src='@{backgroundImg}', sizingMethod='scale')";

	.overlayContainer{
		background: url("../img/background.png");
		position: absolute;
		width:100%;
		height:100%;
		top:0;
		left:0;
		right:0;
	}
	.intro{
		text-align: center;
		color: #fff;
		padding-top:12%;
		p.lead{
			font-size: 31px;
		}
	}
}
// -------
// @EDITOR
// -------

.piEditor{
	margin-bottom: 100px;
	.hr{
		margin-top: 30px;
	}
	.well{
		form{
			margin:0;
		}
	}
	table tr td > div{
		margin-bottom:0;
		margin-top:0;
	}
	table tr td > div > input:first-child{
		margin-bottom:0;
	}
	// popup fix
	div.modal{
		z-index: 0;
		position: relative;
		left: 0;
		margin-left:0;
	}
}

// @end


//EXAMPLE//

.bs-example{
	margin: 30px 0;
	.popover{
		position: relative;
		display: block;
		float: left;
		z-index:990;
		width: 260px;
		&.top,&.left,&.right,&.bottom{
			margin: inherit;
		}
		margin: 20px;
	}

	.modal{
		position: relative;
		top: auto;
		right: auto;
		left: auto;
		bottom: auto;
		z-index: 1;
		display: block;
		overflow: hidden;
	}
}
/* @loader  */
.isViewLoading{
	font-family: @font-family-base;
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	left: 0;
	z-index: 1;
	background: url("../img/geometry.png");
	h1{
		text-align: center;
		padding-top: 180px;
	}
	.loader {
		position:relative;
		.square(100px);
		margin-right: auto;
		border-radius:100px;
		.scale(0.5);
		margin-left: auto;
		margin-top: 50px;
		
		div {
		  .square(20px);
		  background:@gray-light;
		  text-shadow: 0 1px 2px #F6F6F6;
		  position:absolute;
		  top:40px;
		  left:40px;
		  border-radius:10px;
		}
	}
}

.bar1 {
  -moz-transform:rotate(0deg) translate(0, -40px);
  -webkit-transform:rotate(0deg) translate(0, -40px);
  opacity:0.12;
}
.bar2 {
  -moz-transform:rotate(45deg) translate(0, -40px);
  -webkit-transform:rotate(45deg) translate(0, -40px);
  opacity:0.25;
}
.bar3 {
  -moz-transform:rotate(90deg) translate(0, -40px);
  -webkit-transform:rotate(90deg) translate(0, -40px);
  opacity:0.37;
}
.bar4 {
  -moz-transform:rotate(135deg) translate(0, -40px);
  -webkit-transform:rotate(135deg) translate(0, -40px);
  opacity:0.50;
}
.bar5 {
  -moz-transform:rotate(180deg) translate(0, -40px);
  -webkit-transform:rotate(180deg) translate(0, -40px);
  opacity:0.62;
}
.bar6 {
  -moz-transform:rotate(225deg) translate(0, -40px);
  -webkit-transform:rotate(225deg) translate(0, -40px);
  opacity:0.75;
}
.bar7 {
  -moz-transform:rotate(270deg) translate(0, -40px);
  -webkit-transform:rotate(270deg) translate(0, -40px);
  opacity:0.87;
}
.bar8 {
  -moz-transform:rotate(315deg) translate(0, -40px);
  -webkit-transform:rotate(315deg) translate(0, -40px);
  opacity:1;
}

.loader {
  
  animation-name: rotateLoader;
  animation-duration:2s;
  animation-iteration-count:infinite;
  animation-timing-function:linear;
  
  -webkit-animation-name: rotateLoader;
  -webkit-animation-duration:2s;
  -webkit-animation-iteration-count:infinite;
  -webkit-animation-timing-function:linear;
  
  -moz-animation-name: rotateLoader;
  -moz-animation-duration:2s;
  -moz-animation-iteration-count:infinite;
  -moz-animation-timing-function:linear;
 
}

@keyframes rotateLoader {
  from {-webkit-transform:scale(0.5) rotate(0deg);-moz-transform:scale(0.5) rotate(0deg);}
  to {-webkit-transform:scale(0.5) rotate(360deg);-moz-transform:scale(0.5) rotate(360deg);}
}

@-webkit-keyframes rotateLoader {
  from {-webkit-transform:scale(0.5) rotate(0deg);-moz-transform:scale(0.5) rotate(0deg);}
  to {-webkit-transform:scale(0.5) rotate(360deg);-moz-transform:scale(0.5) rotate(360deg);}
}

@-moz-keyframes rotateLoader {
  from {-webkit-transform:scale(0.5) rotate(0deg);-moz-transform:scale(0.5) rotate(0deg);}
  to {-webkit-transform:scale(0.5) rotate(360deg);-moz-transform:scale(0.5) rotate(360deg);}
}
/* @end */	

/* @DROPDOWN COLORPICKER */

div.colorpicker{
	min-width: 0;
	padding: 0;
	div.colorpicker-saturation{
		margin:4px;		
	}
	div.colorpicker-hue{
		margin:4px;
		margin-left:0;
	}
}

/* @end */


.groupNameTitle{
	color: @text-color;
	text-shadow: 0 1px 1px #F6F6F6;
}

.labelTitle{
	line-height: @line-height-base;
	font-size: 14px;
	font-weight: normal;
	color: @text-color;
	text-shadow: 0 1px 1px #F6F6F6;
}


.protected {
	font-family: @font-family-base;
	font-size: 14px;
	line-height: 20px;
	color: #333;
	
	a{
		color: @link-color;
		&:hover {
			color: @link-hover-color;
		}
	}

	.socialButtons{
		padding-top: 15px;
		li{
			margin-left: 5px;
		}
	}

	.introHeader{
		padding: 180px 90px;
		h1{
			font-size: 46px;
		}
	}
	
	.buttonsBlocks{
		.github{
			margin-top: 9px;
			display: block;
		}
	}
	
	.navbar{
		z-index:1010;
	}
	.buttonsDiv{
		background: @brand-primary;
		border-top: 1px dashed @gray-lighter;
		border-bottom: 1px dashed @gray-lighter;
		margin-top: 45px;
		padding : 45px 0;

		.buttonsBlocks{
			padding-left: 90px;
			color:#fff;
			margin-bottom: 0;
			a{
				margin-left: 30px;
			}
		}
	}

	.centerTitle{
		text-align: center;
		padding : 45px 0;
	}	
	
	#menuBottom{
		background: @gray-darker;
		padding: 7px 0 10px;
		position: fixed;
		right: 0;
		left: 0;
		margin-bottom: 0;
		
		ul{
			list-style: none;
			width: 800px;
			margin: 0 auto;
			li{
				float: left;
				padding-right: 5px;
			}
		}	
		.sign{
			color: @gray-light;
			float: right;
			padding :7px;
		}
		
		.checkbox{
			color: @gray-light;
			padding-right: 10px;
			padding-top: 10px;
		
		}
	}
	
	[class^="icon-"], [class*=" icon-"] {
		vertical-align: middle;
		margin: 0 4px 4px 0;
	}
	
	.btn-large [class^="icon-"], .btn-large [class*=" icon-"] {
		margin-top: 0px;
	}
	
	.footer{
		background: @gray-darker;
		color: @gray-light;
		padding: 10px 0;
	}
	
	.colorShowDiv{
		margin-top: 5px;
			.colorShow{
			overflow: hidden;
			height: 50px;
			margin-bottom: 30px;
			#gradient > .vertical(#f5f5f5, #f9f9f9);
			.box-shadow(inset 0 1px 2px rgba(0,0,0,.1));
			border-radius: @border-radius-base;
			.colorShowBar{
			  width: 100%;
			  height: 100%;
			  color: #fff;
			  float: left;
			  font-size: 12px;
			  text-align: center;
			  text-shadow: 0 -1px 0 rgba(0,0,0,.25);
			  .box-shadow(inset 0 -1px 0 rgba(0,0,0,.15));
			  .box-sizing(border-box);
			  .transition(width .6s ease);
			}
		}
	}


	// -------------------------
	// colorpicker
	// -------------------------
	.colorpicker{
		span.input-group-addon{
			padding: 0;
			width: 28px;
			height: 28px;
			i{
				margin: -0px 0px 0px;
				width: 30px;
				height: 32px;
				z-index: 0;
				border-top-right-radius: 4px;
				border-bottom-right-radius: 4px;
				-webkit-box-shadow: inset 0px 0px 1px #999999;
				box-shadow: inset 0px 0px 1px #999999;
				margin-left: -1px;
				display: block;
			}
		}
	}
	// @end
@import "../../twitter-bootstrap/less/forms.less";
@import "../../twitter-bootstrap/less/type.less";
@import "../../twitter-bootstrap/less/modals.less";
@import "../../twitter-bootstrap/less/utilities.less";
@import "../../twitter-bootstrap/less/navbar.less";
@import "../../twitter-bootstrap/less/dropdowns.less";
@import "../../twitter-bootstrap/less/buttons.less";

}


@media (max-width: 767px) {
	body{
		padding: 0;
	}
	
	.container{
		padding-left: 20px;
		padding-right: 20px;
		
	}
	
}


@media (max-width: 979px) {

	.navbar-fixed-top, .navbar-fixed-bottom, .navbar-static-top {
	    margin : 0px;
	    
	}
	

}

// TODO: apico icons variable (create new var for apico icons ?)
// TODO: colorpicker test 
// TODO: *PROD* set url for social button (prod url)



@import "pi.variables.less";
@import "pi.mixins.less";
@import "apico-sprites.less"; 
@import "colorpicker.less";