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

/*-------------------------------------
---------------------------------------
blog search
---------------------------------------
-------------------------------------*/
#blogSearchWraper {
	position: relative;
	width: 288px;
	z-index: 1000;
	background: rgba(255, 255, 255, 0);
	overflow: auto;
	padding-top: 26px;
}

#blogSearchWraper #searchClose {
	position: absolute;
	top: 37px;
	right: 10px;
	z-index: 1001;
	display: none;
}

#blogSearchWraper #blogSearchInput {
	margin: 0px 0px 0px 0px;
	background-color: rgba(0,0,0,0.3);
	width: 0;
	color: black;
	border: 3px solid rgba(0,0,0,0);
	
	background-image: url(@searchIcon);
	background-position: 96% 50%;
	background-repeat: no-repeat;
	padding: 6px 20px 6px 6px;
	cursor: pointer;
}

#blogSearchWraper #blogSearchInput:hover {

	background-image: url(@searchIconHover);

}

#blogSearchWraper #blogSearchInput:focus {
	border: 3px solid rgba(0,0,0,0.3);
}


#blogSearchWraper #blogSearchSubmit {
	position: absolute;
	bottom:0;
	right: 0;


}

#blogSearchWraper #blogSearchOptionsWraper {
	clear: both;
	width: auto;
	margin: 0px 0px 0px 0px;
	float: left;

	
}

#blogSearchWraper #blogSearchOptionsWraper #blogSearchCatSelect {
	display: block;
	margin: 12px 0px 12px 0px;
}

#blogSearchWraper #blogSearchOptionsWraper #blogSearchOptions {
	float: right;
	margin: 0px 0px 0px 0px;

}



/*-------------------------------------
---------------------------------------
Blog Pagination
---------------------------------------
-------------------------------------*/
#blogPagination {
	margin: 60px 0 20px 0;

}

#blogPagination span {
	border: none;


}

#blogPagination #blogPaginationPrev {
	margin-right: 30px;
}

#blogPagination #blogPaginationNext {
	margin-left: 30px;
}

#blogPagination #blogPaginationNext, #blogPagination #blogPaginationPrev {
	display: inline;

	background: none;
	padding: 5px;
}

#blogPagination #blogPaginationNext a, #blogPagination #blogPaginationPrev a {

	padding: 0 5px;
}


#blogPagination .blogPaginationNumTag {
	display: inline;
	margin: 0px 10px;
	padding: 5px 0;


}

#blogPagination .blogPaginationNumTag a {

	display: inline-block;
	line-height: 50px;
	padding: 0px 10px;


}


#blogPagination #blogPaginationCurrentPage {
	margin: 0px 10px;
	font-weight: 700;

}




/*-------------------------------------
---------------------------------------
blog wraper & items
---------------------------------------
-------------------------------------*/
#blogWraper {

}



#blogWraper > div {
	position: relative;
	z-index: 0;
}




.blogItem {
	clear: both;
	overflow: visible;
	margin: 25px 0px 25px auto;
	padding: 16px 12px;
	height: 100px;
	border: 1px solid rgba(0,0,0,0.4);
	position: relative;
	background-color:#e5e5e5;
	cursor: pointer;

}

.blogItem .blogItem {
	position: absolute;
	top:-26px;
	left: -1px;
	right: -1px;
	bottom: -1px;

}

.oldItem > .blogItemBefore {
	display: none;
}

.blogItem .blogItem .dateTime {
	display: none;
}

.blogItem .blogItem .blogItemBefore {
	
	
}

.blogItemBefore {

	content: '';
	position: absolute;
	bottom: 24px;
	left: 0px;
	right: 0px;
	height: 30px;
	background-color: none;
	z-index: -1; 

	.border-bottom-left(20%, 5px);
	.border-bottom-right(20%, 5px);
	
	.box-shadow(0px,28px,4px,0px,rgba(0,0,0,0.3));

}

.oldItem {
	border: 1px solid rgba(0,0,0,0);
	background: rgba(0,0,0,0);
	
}

.oldItem .blogItemBefore {

	.box-shadow(0px, 21px, 4px, 0px, rgba(0,0,0,0.3));
	.border-bottom-left(0,0);
	.border-bottom-right(0,0);

	
}



.oldItem > a.blogEntryLinkImage, .oldItem > div.besideImage .category,  .oldItem > div.besideImage .tags {
	display: none;
}



.blogItem:first-child {
	margin-top: 0;
}



.blogItem .blogEntryLinkImage {
	float: left;
	width: 100px;
	height: 100px;
	margin-right: 16px;
}

.blogItem .blogEntryLinkImage img {
	width: 100%;
	height: 100%;
	

}

.blogItem .besideImage {
	float: right;
	height: 100px;
	width: 340px;
	margin-right: 70px;
}

#blogWraper .blogItem .besideImage .ellipsisPseudoWraper {
/* 	width: 100%; */
	margin-right: 20px;
}

.blogItem .besideImage .blogEntryLinkTitle {
	font-family: "Merriweather", sans-serif;
	font-weight: 700;
	font-size: 19px;
	color: rgba(0,0,0,0.7);
	padding-top: 4px;
	display: block;
	line-height: 24px;
/* 	color:#6a8896; */

}

.blogItem .besideImage .blogEntryLinkTitle h1 {

	font-size: 20px;

}




.blogItem .besideImage .dateTime {


	
}

.blogItem .besideImage .dateTime .date{
	
	
}

span.corner {
	
}

.blogItem .besideImage .dateTime .time{

}

.blogItem .besideImage .category {
	display: block;
	clear: both;
	margin-top: 16px;
	font-weight: bold;
	color: rgba(0,0,0,0.5);
}

.blogItem .besideImage .tags {
	color: rgba(0,0,0,0.5);


}



.ellipsisPseudoWraper3 {

}


.catTagsWraper {
	position: absolute;
	bottom: 16px;
	left: 133px;
}