/**********************************************************************
 * Blog pages css
 * Contains styles for the blog list page and individual blog pages
 *
 **********************************************************************/


/*--------------------------------------------------------------------------------------------------------------
Blog Listing Page
----------------------------------------------------------------------------------------------------------------*/
#bloglist-left,
#portfoliolist-left{
	width:630px;
	float:left;
	margin-left:5px;
	position:relative;
	padding-bottom:63px;
}
#portfoliolist-left #filter{
	margin-left:0px;
}
#content .bloglist a:hover,
#content .portfoliolist a:hover{
	text-decoration:none;
}
.bloglist,
.portfoliolist{
	width:100%;
	height:150px;
    margin-top:0px;
	margin-bottom:10px;
	position:relative;
	overflow:hidden;

    /* the following lines add a grayscale/not-grayscale effect on hover */
    filter: gray; /* IE6-9 */
    -webkit-filter: grayscale(90%); /* Chrome 19+ & Safari 6+ */
    -webkit-transition: all .6s ease; /* Fade to color for Chrome and Safari */
    -webkit-backface-visibility: hidden; /* Fix for transition flickering */

    /* the following lines were added to create a border around the tiles with rounded corners */
    border-top:1px solid #CCC; /* because borders were added, the size of the tiles need to shrink by 2px below */
	border-left:1px solid #CCC; /* because borders were added, the size of the tiles need to shrink by 2px below */
	border-right:1px solid #BBB; /* because borders were added, the size of the tiles need to shrink by 2px below */
	border-bottom:1px solid #BBB; /* because borders were added, the size of the tiles need to shrink by 2px below */
	border-radius:4px;
	-moz-border-radius:4px;        
}
.bloglist:hover,
.portfoliolist:hover{
    margin-top:0px;
    margin-bottom:10px;
    
    /* the following lines add a grayscale/not-grayscale effect on hover */
    filter: none;
    -webkit-filter: grayscale(0%);
    
    /* the following lines were added to create a border around the tiles with rounded corners */
    border-top:1px solid #CCC; /* because borders were added, the size of the tiles need to shrink by 2px below */
	border-left:1px solid #CCC; /* because borders were added, the size of the tiles need to shrink by 2px below */
	border-right:1px solid #BBB; /* because borders were added, the size of the tiles need to shrink by 2px below */
	border-bottom:1px solid #BBB; /* because borders were added, the size of the tiles need to shrink by 2px below */
	border-radius:4px;
	-moz-border-radius:4px;
}

/*------------------------------Title of Article in Blog List-----------------------------------*/
.bl-posttitle,
.pl-projecttitle{
	width:100%;
	height:100%;
	position:absolute;
	background:url(../images/css/bloglistbg.png) repeat;
	display:table;
	transition:opacity 0.3s;
	-moz-transition:opacity 0.3s;
	-webkit-transition:opacity 0.3s;
	-o-transition:opacity 0.3s;
	opacity:0;
	filter:alpha(opacity=0);
}

/*------------------------------Hover over effect in Blog List-----------------------------------*/
.bloglist:hover .bl-posttitle{
	opacity:1.0;
	filter:alpha(opacity=100);
	margin-top:0px;
}
.portfoliolist:hover .pl-projecttitle{
	opacity:1.0;
	filter:alpha(opacity=100);
}

/*------------------------------Hover over effects for Category text in Blog List-----------------------------------*/
.bloglist .tile-cat
{
    opacity:0;
}

.bloglist:hover .tile-cat
{
	transition:all 0.3s;
	-moz-transition:all 0.3s;
	-webkit-transition:all 0.3s;
	-o-transition:all 0.3s;
	opacity:0.7;
}


/*------------------------------Text Settings for Title of Article in Blog List-----------------------------------*/
.bl-title,
.pl-title{
	font-size:1.8em;
	color:#fff;
	display:table-cell;
	vertical-align:middle;
}


/*------------------------------Image of Article in Blog List-----------------------------------*/
.bloglist-img{
	float:right;
}



/*------------------------------Settings for Pagination of Blog List-----------------------------------*/
.pagination{
	position:absolute;
	bottom:0;
	width:100%;
	display:block;
	margin:20px 0;
	font-size:1.4em;
}
#content .pagination a:hover{
	text-decoration:none;
}
.pages{
	float:right;
	height:30px;
	background-color:#0d1e87;
	color:#fff;
	line-height:30px;
	padding:0 10px;
}
.pagination .current,
.page,
.nextpagelink{
	float:left;
	height:30px;
	width:30px;
	line-height:30px;
	margin-right:3px;
	background-color:#0d1e87;
	color:#fff;
	border-color: #fff;
	border-bottom:3px solid;
	transition:background 0.3s;
	-moz-transition:background 0.3s;
	-webkit-transition:background 0.3s;
	-o-transition:background 0.3s;
}
.pagination .current{
	font-weight:bold;
	color:#0d1e87;
	border-top: 1px solid #0d1e87;
	border-left: 1px solid #0d1e87;
	border-right: 1px solid #0d1e87;
	border-bottom:3px solid #0d1e87;
    background-color:#fff;
}
.page:hover,
.nextpagelink:hover{
	background-color:#404040;
	color:#fff;
	font-weight:bold;
}

/*----------------------------Mobile Version--------------------------------*/
@media all and (max-width:970px) {
    #bloglist-left,
    #portfoliolist-left{
	    width:65.6%;
    }
}
@media all and (max-width:640px) {
    #bloglist-left,
    #portfoliolist-left{
	    float:none;
	    width:100%;
	    margin-right:10px;
	    margin-left:0;
    }
}


/*--------------------------------------------------------------------------------------------------------------
Single Blog Article Page
----------------------------------------------------------------------------------------------------------------*/
#single{
	float:left;
	width:630px;
	text-align:left;
	margin-left:5px;
}
#single h1,
#single h2,
#single h3,
#single h4,
#single h5{
	/*color:#f7f7f7;*/
	color:#404040;
}

/*----------------------------Unsure what this is used for--------------------------------*/
.post-meta{
	position:relative;
	margin-bottom:30px;
}
.post-meta-left{
	float:left;
	max-width:480px;
	display:block;
}

/*----------------------------Container for the blog article--------------------------------*/
.sbp-article,
.spf-article{
	position:relative;
	background-color:#fff; /* change background color here */

    /* the following lines were added to create a border around the tiles with rounded corners */
    border-top:1px solid #CCC; /* because borders were added, the size of the tiles need to shrink by 2px below */
	border-left:1px solid #CCC; /* because borders were added, the size of the tiles need to shrink by 2px below */
	border-right:1px solid #BBB; /* because borders were added, the size of the tiles need to shrink by 2px below */
	border-bottom:1px solid #BBB; /* because borders were added, the size of the tiles need to shrink by 2px below */
	border-radius:4px;
	-moz-border-radius:4px;	
}

/*----------------------------Title of the blog article--------------------------------*/
.sbp-title,
.spf-title{
	color:#404040;
	padding:20px 0 0 30px;
	letter-spacing:-0.01em;
}

/*----------------------------Body text of the blog article--------------------------------*/
.sbp-content,
.spf-content{
	color:#404040;
	padding:20px 30px 10px 30px;
}

/*----------------------------Author container for at bottom of blog article--------------------------------*/
#authorinfo{
	background:#202020;
	color:#bfbfbf;
	position:relative;
	padding-left:140px;
	min-height:120px;
	display: none; /* HIDE THE AUTHOR INFO FOR NOW */
}
#author-avatar{
	position:absolute;
	left:30px;
	top:30px;
}
.author{
	display:block;
	font-size:1.6em;
	padding:25px 0 10px 0;
}
#authorinfo p{
	display:block;
	padding:0 20px 20px 0;
}

/*----------------------------Mobile Version--------------------------------*/
@media all and (max-width:970px) {
    #single{
	    width:65.6%;
    }
}
@media all and (max-width:640px) {
    #single{
	    float:none;
	    width:100%;
	    margin-right:10px;
	    margin-left:0;
    }
}


/*----------------------------------------------------------------------------
Comments
----------------------------------------------------------------------------*/
#commentform{
	padding:10px 0;
}
#comments{
	background-color:#404040;
	color:#bfbfbf;
	margin:20px 0;
	position:relative;
	overflow:hidden;
}
.commentlist{
	padding:0 30px 20px 30px;
	list-style:none;
}
.comment{
	position:relative;
	padding:0 20px 0 120px;
	margin-bottom:10px;
	background:#202020;
	min-height:120px;
}
.avatar{
	position:absolute;
	left:20px;
	top:20px;
}
.comment-author{
	padding-top:15px;
}
.commenter{
	display:block;
	font-size:1.5em;
}
.comment-date{
	display:block;
	margin-bottom:10px;
}
.comment-reply{
	position:absolute;
	top:20px;
	right:20px;
	visibility:hidden;
	z-index:100;
}
.comment:hover .comment-reply{
	visibility:visible;
}
#comments .comment-reply:hover{
	text-decoration:none;
}
ul.children{
	list-style:none;
	padding-bottom:10px;
}
ul.children .comment{
	background-color:#404040;
}
#respond{
	padding:0 30px 20px 30px;
}
#comsubmit{
	background:none;
	font:inherit;
	color:inherit;
	cursor:pointer;
}
.comment-form-author input,
.comment-form-email input,
.comment-form-url input,
.comment-form-comment textarea{
	background-color:#707070;
	color:#bfbfbf;
	padding:5px 0;
	font:inherit;
	width:100%;
	text-indent:5px;
}
.comment-form-comment textarea{
	max-width:366px;
	height:187px;
}
#commentformleft{
	display:inline-block;
	width:33%;
}
#commentformright{
	display:inline-block;
	width:65%;
	margin-left:2%;
	vertical-align:top;
	text-align:right;
}
/*----------------------------Mobile Version--------------------------------*/
@media only screen and (device-width: 768px) and (device-height: 1024px) and (-webkit-min-device-pixel-ratio: 1){
    /* For iPad */
    .comment-reply{
	    visibility:visible;
    }
}
@media all and (max-width:970px) {
    #commentformleft{
	    display:block;
	    width:100%;
    }
    #commentformright{
	    display:block;
	    width:100%;
	    margin-left:0;
    }
    .comment-form-comment textarea{
	    max-width:100%;
	    height:185px;
    }
}
@media all and (max-width:640px) {
    .comment-reply{
	    left:35px;
	    top:110px;
    }
    .comment-reply{
	    visibility:visible;
    }
}