/**********************************************************************
 * Sidebar css
 * Contains styles for the sidebars (currently only in the blog pages)
 *
 **********************************************************************/
 
#sidebar{
	float:right;
	width:310px;
	height:100%;
	text-align:left;
	overflow:hidden;
	margin-right:5px;
}

/*----------Title of sidebar widgets (Contact Us, Popular Posts, Twitter)-----------*/
.widget h5{
	background-color: #0d1e87;
	color:#fff;
	font-size:1.5em;
	line-height:1.5em;
	text-transform:uppercase;
	text-indent:15px;
	font-weight:800;

    /* apply rounded corners only to the top borders */
    border-top-left-radius:4px;
    border-top-right-radius:4px;
    -moz-border-radius-topright:4px;
    -moz-border-radius-topleft:4px;
}

/*----------Widget settings-----------*/
.widget{
	width:99%; /* had to set this to 99% to ensure border showed up */
	font-size:1.4em;
	margin-bottom:15px; /* play around with this */
	position:relative;

    /* 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;
}
.widget ul{
	list-style:none;
}

/*----------Size and color of the text is set here (Contact Us)-----------*/
.widget p{
	font-size:1em;
	color:#000;
	padding:0 20px;
}

/*-----------------------------Text Widget (Contact Us)------------------------------*/
.text-widget p{
	background:#fff; /* background color of the box is set here */
	padding:12px 16px 18px 16px;
    font-size:1.1em;
}
.text-widget p a:hover{
    text-decoration:underline;
}

/*--------------------------------Recent/Popular Articles------------------------------*/
#sidebar #recent-box{
    /* 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;
}

.sb-article-widget{
    /* 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 */
}
.sb-article-widget:hover{
    /* the following lines add a grayscale/not-grayscale effect on hover */
    filter: none;
    -webkit-filter: grayscale(0%);
}
.articles-widget li{
	margin-top:1px;
	position:relative;
	transition:all 0.3s;
	-moz-transition:all 0.3s;
	-webkit-transition:all 0.3s;
	-o-transition:all 0.3s;
	overflow:hidden;
}
.articles-widget img{
	display:block;
	width:100%;
	height:auto;
	vertical-align:bottom;
	z-index:40;
}
.articles-widget .title{
	display:block;
	background:#0d1e87;
	position:absolute;
	left:100%;
	/*top:0;*/
	bottom:0;
	width:100%;
	/*height:100%;*/
	height:30%;
	font-size:1.5em;
	color:#bfbfbf;
    /*padding:20px;*/
	padding:0px 20px;
	transition:all 0.3s;
	-moz-transition:all 0.3s;
	-webkit-transition:all 0.3s;
	-o-transition:all 0.3s;
	vertical-align:top;
	z-index:50;
	opacity:0;
}
.articles-widget li:hover .title{
	color:#f7f7f7;
	left:0;
	opacity:0.7;
}
.articles-widget .more{
	display:block;
	position:absolute;
	background:url(../images/css/more.png) no-repeat;
	width:25px;
	height:25px;
	bottom:10px;
	right:10px;
	transition:all 0.3s;
	-moz-transition:all 0.3s;
	-webkit-transition:all 0.3s;
	-o-transition:all 0.3s;
	opacity:0.7;
	z-index:55;
}
.articles-widget li:hover .more{
	opacity:1;
}

/*---------------------------------Twitter------------------------------*/
#sidebar #twitter{
	background:#fff; /* change this background color */

    /* 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;	
}

/* Don't believe we need to change anything here - we are using the API directly from Twitter instead */
#twitter #tweeter{
	margin:0 0 0 15px;
	color:#bfbfbf;
	padding-top:20px;
	font-size:0.93em;
}
.widget #tweeter li{
	background:url(../images/css/twtr-widget.png) no-repeat top left;
	padding:0 20px 20px 30px;
	margin:0;
	list-style:none;
}
.widget #tweeter li:hover{
	font-weight:inherit;
	background-color:inherit;
}


/*-------------------------------Search Box------------------------------*/
#search{
	margin:10px 5px 20px 0;
	position:relative;
	width:100%;
}
#search-field{
	background:#404040;
	line-height:30px;
	height:30px;
	padding-left:10px;
	width:270px;
	color:#bfbfbf;
	transition:all 0.3s;
	-moz-transition:all 0.3s;
	-webkit-transition:all 0.3s;
	-o-transition:all 0.3s;
	-webkit-appearance: none;
}
#search-field:focus{
	background-color: #fff;
	color: #000;    
}
#search-submit{
	background:url(../images/css/search.png) center center no-repeat #404040;
	height:30px;
	width:30px;
	position:absolute;
	top:0;
	right:0;
	transition:background-color 0.3s;
	-moz-transition:background-color 0.3s;
	-webkit-transition:background-color 0.3s;
	-o-transition:background-color 0.3s;
}
#search-submit:hover{
	background-color: #fff;
	color: #000;    
	cursor:pointer;
}

/*--------------------------------Post Meta------------------------------*/
#post-meta{
	color:#fff;
	margin-bottom:10px;
}
#post-meta .tile-sidebar{
	width:100px;
	height:100px;
	display:inline-block;
	position:relative;
	overflow:hidden;
	background-color: #fff;
	color: #000;    
	
}
#post-meta .tile-sidebar .meta1 > img,
#post-meta .tile-sidebar .meta2 > img,
#post-meta .tile-sidebar .meta3 > img{
	position:absolute;
	top:0;
	left:0;
	transition:all 0.3s;
	-moz-transition:all 0.3s;
	-webkit-transition:all 0.3s;
	-o-transition:all 0.3s;
}
#post-meta .count{
	font-size:0.9em;
	position:absolute;
	bottom:5%;
	left:10%;
	transition:all 0.3s;
	-moz-transition:all 0.3s;
	-webkit-transition:all 0.3s;
	-o-transition:all 0.3s;
}
.comment-widget .comment-count{
	color:#000;
	background:#fff;
	padding:10px;
	min-width:25px;
	text-align:center;
}
.comment-widget .comment-count:hover{
	text-decoration:underline;
}
.comment-widget .comment-quick-reply{
	background:url(../images/css/comment-widget.png) no-repeat;
	width:45px;
	height:30px;
	line-height:28px;
	text-indent:6px;
}
.comment-widget .comment-quick-reply:hover{
	text-decoration:underline;
}
#post-meta .comment-widget{
	left:27%;
}
#post-meta .fb-like{
	left:27%;
}
#post-meta .twitter-share-button{
	left:20%;
}
#post-meta .comment-widget,
#post-meta .fb-like,
#post-meta .twitter-share-button{
	position:absolute;
	top:-100%;
	transition:all 0.3s;
	-moz-transition:all 0.3s;
	-webkit-transition:all 0.3s;
	-o-transition:all 0.3s;
	display:block;
}
#post-meta .tile-sidebar:hover .meta1 > img,
#post-meta .tile-sidebar:hover .meta2 > img,
#post-meta .tile-sidebar:hover .meta3 > img{
	top:-100%;
}
#post-meta .tile-sidebar:hover .count{
	bottom:-100%;
}
#post-meta .tile-sidebar:hover .comment-widget,
#post-meta .tile-sidebar:hover .fb-like,
#post-meta .tile-sidebar:hover .twitter-share-button{
	top:20%;
}    
.sidebreak{
	background-color: #fff;
	color: #000;    
}

/*---------------------------------Archive (Calendar)------------------------------*/
table, td, td{
	border-spacing:1px;
	color:#f7f7f7;
	transition:all 0.3s;
	-moz-transition:all 0.3s;
	-webkit-transition:all 0.3s;
	-o-transition:all 0.3s;
}
#archive th,
#archive tbody td{
	width:44px;
	height:44px;
	text-align:center;
}
#archive tfoot td{
	text-align:center;
	background-color:#404040;
	height:25px;
}
#archive thead th{
	background-color:#404040;
}
#archive td.none{
	background:#404040;
}
#archive tbody td:hover,
#archive tfoot #prev:hover,
#archive tfoot #next:hover{
	background:#fff !important;
	color:#404040;
	cursor:pointer;
}
#archive tbody td.none:hover{
	background:#404040 !important;
	color:inherit;
	cursor:inherit;
}


/*----------------------------Mobile Version--------------------------------*/
@media all and (max-width:970px) {
    #sidebar{
	    width:32.3%;
    }
}
@media all and (max-width:640px) {
    #sidebar{
	    width:100%;
	    margin-right:0;
    }
    #search{
	    display:none;
    }
}