@import url(constants.less);
@import url(classes.less);


html {
	position: relative;

	background-image: url(@background);
 	background-repeat: repeat;


	
}


.ui-dialog .ui-dialog-content { position: relative; border: 0; padding: 0; background: none; overflow: auto; zoom: 1; }
.ui-widget-header { border: none; background: none; color: black; font-weight: bold; }

.ui-dialog {
	position: fixed;
}



/*-------------------------------------
---------------------------------------
loading
---------------------------------------
-------------------------------------*/
#loadingWraper {
	margin-top: 40px;
	height: 80px;
	text-align: center;
	display: none;
}

.ui-progressbar-value {
	background-image: url(@progressbarImage);
	background-repeat: repeat-x;
	margin: 0 !important;

}

#progressBar {
	width: 400px;
	margin: 0 auto;
	height: 20px;
	background: none;
	overflow: hidden;

	
}










#pageFooter {
	margin-top: 100px;

}

#pageFooter p {
	color: @black5;
	font-size: 13px;

}


.clear {
	clear: both !important;
}




#logoWraper {
	position: relative;
}

#logo, #logo2 {
	width: 100%;

	opacity: 0.1;	
	top:-72px;
	position: absolute;
	
	
}
#logo {
	z-index: 1;
	-webkit-animation: fadeOut 2s linear infinite;

}


#logo2 {
	
	z-index: 2;
	-webkit-animation: fadeIn 2s linear infinite;
/* 	-webkit-animation-iteration-count: 0; */
/* 	-webkit-animation-fill-mode: backwards; */
}

/* KEYFRAMES */

@-webkit-keyframes fadeIn {
	0% {
		opacity: 0;
	}
	50%{
		opacity: 0.1;
	}
	100% {
		opacity: 0;
	}
}

@-webkit-keyframes fadeOut {
	0% {
		opacity: 0.1;
	}
	50% {
		opacity: 0;
	}
	100%{
		opacity: 0.1;
	}
}




#designHeader{
	position: fixed;
	bottom:0;
	left: 0;
	right:0;
	top:0;
	z-index: -1;
	pointer-events: none;
	
	
	.radial-gradient(center, center, circle, contain, rgba(0,0,0,0.0), rgba(0,0,0,0.1), rgba(0,0,0,0.2), 0%, 110%, 200%);
}








h1, h2, h3, h4, h5, h6 {

	color:@blueDark2;
	font-weight: 900;
	font-family: 'Merriweather', serif;	

}

h1 {
	font-size: 22px;
	margin: 32px 0px 16px 0px;
	padding: 0;


}

h2 {
	font-weight:700;
	font-size:20px;
	color: rgba(0,0,0,0.5);
}
	
p, span, li, a, input, textarea,label {

	font-weight: 300; /* 300, 400(normal), 600, 700, 800 each normal and italics*/
	font-size: 17px; /* 5.348 8.653 14 22.652 36.651 59.301 95.949 155.245 251.186 406.419 657.586*/
	color: rgba(0,0,0,0.85);




	line-height: 21px;

/* 	font-family: 'Merriweather', serif; */
	font-family: 'Signika', sans-serif;



}

p, li {
	margin: 10px 0 10px 0;
	padding: 0px 0px 0px 0px;
}

a {
	text-decoration: none;
}


#addThisWraper a {
	background-color: transparent;



	font-size: 12px;
	border-bottom: none;
	.transition(none);

}

#addThisWraper a:hover {
	background-color: transparent;
	border-bottom: none;
}

body {
	

	
}

#allContentWraper {
	max-width: 987px;
	margin: 0 auto;
	overflow: auto;
	position: relative;
	min-height: 100%;


}



#mainContent {

	max-width: 640px;
	width: 100%;
	float: right;
/* 	margin-left: 10px; */
	margin-top: 67px;
	padding: 20px;
	margin-left: auto;
	margin-right: auto;

	
}


#asideContent {
	max-width: 287px;
/*  	margin-right: 10px; */
	margin-top:146px;
	position: relative;
	float: left;
	overflow: visible;
	margin-left: auto;
	margin-right: auto;	

	
}

#asideWraper {
	background-color: rgba(255,255,255,0.2);
	padding: 16px;
	margin: 32px 0px 0px 0px;
	border: 1px inset @blueBright4;
	.box-shadow-inset(0,0,2px,0,rgba(0,0,0,0.3))
}


#asideWraper a {
	display: block;
	margin: 0px 0px 16px 0px;



	
}

#asideWraper a span:hover {
	color: @blue;
	
}

#aside2 a{
	margin: 3px 0px 0px 0px;
}


#asideWraper a span {


	.transition(all, 0.3s);
	font-size: 16px;
	font-family: 'Merriweather', serif;
	font-weight: 700;
	color: @black7;
	
}

#asideWraper .date {
	color: @blueBright2;
}

#aside1 p, #aside2 p {
	margin: 0;


}

video {

}

.pageWraper {

	background-color: rgba(0,0,0,0.2);
	padding: 16px 0;
	overflow: hidden;
	position: relative;

}

.pageWraper > div{

	background-color: rgba(255,255,255,0.7);
	margin: 0 16px;
	padding: 25px;
	
	/*remove this to remove the shadow-overflow to the page-wraper on the top and bottom*/
	z-index: 0;
	
	position: relative;

}

.pageWraper > div:before, .pageWraper > div:after, #navigation:before, #navigation:after {
	
	content: '';
	position: absolute;
	top:13px;
	left: 0;
	right: 0;
	height: 3px;

	.border-top-left(50%, 10px);
	.border-top-right(50%, 10px);	
	
	z-index: -10;
	.box-shadow(0px, -15px, 4px, 0px, rgba(0,0,0,0.5));
}


.pageWraper > div:after, #navigation:after {
	top: auto;
	bottom:13px;


	.border-bottom-left(50%, 10px);
	.border-bottom-right(50%,10px);
	.box-shadow(0px, 15px, 4px, 0px, rgba(0,0,0,0.5));
}




#langSwitcher {
	clear: both;
	background-color: rgba(255,255,255,0.2);
	padding: 12px 16px 12px 16px;
	margin: 32px 0;
	overflow: auto;
	border: 1px inset @blueBright4;
	.box-shadow-inset(0,0,2px,0,rgba(0,0,0,0.3))
		
}

#langSwitcher a {
	color: rgba(0,0,0,0.5);

	.transition(all, 0.2s);
}

#langSwitcher a:hover {
	color: white;
}

#langSwitcher a:first-child {
	float: left;
}

#langSwitcher a:nth-child(2) {
	float: right;
	display: block;
}

#mainContent > h1 {



	margin: 0 0px 21px 0px;

	font-size: 36px;
	text-align: center;
/* 	color: rgba(255,255,255,0.5); */
	color: rgba(0,0,0,0.3);	
	text-shadow:0px -1px 0px rgba(255,255,255,0.4), 0px 1px 0px #505050;

}



p {


}


#addThisWraper {
	margin: 0px 0px 24px 0px;
}

/*-------------------------------------
---------------------------------------
ribbons left and right
---------------------------------------
-------------------------------------*/
.ribbonLeftParent, .ribbonRightParent {
	position: absolute;
	z-index: 100;
	width:100px;
	height: 25px;
	border-bottom: 1px inset @black3;
	.linear-gradient(@black3, @black4);
	.box-shadow(0px,1px,2px, 0px, rgba(0,0,0,0.5));
}

.ribbonLeftParent {
	top: 12px;
	left: -12px;
	border-left: 1px inset @black4;

	.border-bottom-left(2px, 2px);
	.border-top-left(2px, 2px);
}

.ribbonRightParent{
	top: 18px;
	right: -14px;
	border-right: 1px inset @black4;
	.border-top-right(2px, 2px);
	.border-bottom-right(2px, 2px);
}


.ribbonLeft, .ribbonRight{
	font-size: 13px;
	color: white;
	display: block;
	width: 100%;
	text-align: center;
	line-height: 25px;
	position: relative;
	font-weight: 400;
	margin-top: 1px;
	margin-left: 0px;
	text-shadow:0px -1px 0px @black5, 0px 1px 0px @black2;
}





.ribbonLeftCorner, .ribbonRightCorner{
	width: 0;
	height: 0;  
	line-height: 0;  
	border-top: 7px solid @black6;  
	top: 38px;  
	position: absolute;
}

.ribbonLeftCorner{
	border-left: 11px solid transparent;  
	top: 38px;  
	left: -12px;  
}

.ribbonRightCorner{
	border-right: 11px solid transparent;  
	top: 44px;  
	right: -12px;  
}