/* ---------------------------------------------------------------------- */
/* Styelsheet
/* ----------------------------------------------------------------------

Theme Name: CCR Stylo
Description: Responsive WordPress Blog Theme
Version: 1.0.2
Author: CodexCoder
Author URI: http://www.codexcoder.com
Theme URI: 
License: GNU General Public License v2.0
License URI: http://www.gnu.org/licenses/gpl-2.0.html

Tags: light, purple, pink, two-columns, right-sidebar, fluid-layout, custom-background, custom-header, custom-menu, featured-images, microformats, post-formats, rtl-language-support, sticky-post, theme-options, translation-ready
Text Domain: codexcoder

Style WordPress theme, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
------------------------------------------------------------------------- */

/* ---------------------------------------------------------------------- */
/* Imported Stylesheets (Order is important)
/* ---------------------------------------------------------------------- */
@import url(http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800);

@import url('css/font-awesome.css');

/* ---------------------------------------------------------------------- */
/* Body
/* ---------------------------------------------------------------------- */
html {
	font-size: 1em;
	/* 1 */
	-webkit-text-size-adjust: 1em;
	/* 2 */
	-ms-text-size-adjust: 1em;
	/* 2 */;
}

* {
	padding: 0;
	margin: 0;
}

a {
	text-decoration: none;
	text-transform: none;
	color: #f78181;
}

a:hover {
	text-decoration: none;
	text-transform: none;
	color:#b83457;
}

p {
	font-size: 1em;
	font-weight: 300;
	text-align: justify;
}
li, ol {
	list-style: none;
}
ul, ol {
	margin-top: 0;
	margin-bottom: 0;
}
h1,h2,h3,h4,h5,h6 {
	font-family: 'Open Sans',Helvetica, sans-serif;
}

body {
	font-family: 'Open Sans',Helvetica, sans-serif;
	font-size: 1em;
}

.wrap {
	border: 10px solid #f78181;
	margin: 0 5px;
}

/* ---------------------------------------------------------------------- */
/* ==========================HEADER SECTION==============================
/* ---------------------------------------------------------------------- */

header {
	border-bottom: 10px solid #f78181;
	/*min-height: 183px;*/
}

#logo {
	padding: 20px;
}

#header .logo {
	font-size: 1.2em;
	font-weight: 700;
	color: #f78181;
}

#header .description {
	font-weight: 300;
	font-size: 1.823em;
	color: #f78181;
	margin-top: 0;
	display: block;
}

.adminarea {
	padding: 53px 20px;
}

/* ---------------------------------------------------------------------- */
/* ==========================Menu SECTION==============================
/* ---------------------------------------------------------------------- */
.navbar {
	border: none;
}
.collapse.navbar-collapse.bs-navbar-collapse {
	border-left: 10px solid #f8a1a1;
	margin-left: -10px;
	margin-right: -10px;
	border-right: 10px solid #f8a1a1;
}
.navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:hover, .navbar-default .navbar-nav>.active>a:focus {
	color: #FFF;
	background-color: #f3a1a2;
	text-transform: capitalize;
}
.navbar-default .navbar-nav>li>a:hover, .navbar-default .navbar-nav>li>a:focus {
	color: #fff;
	background-color: #f3a1a2;
}
.navbar-default {
	background-color: #FFFFFF;
	border-bottom: 10px solid #FC8181;
}

.navbar-default .navbar-nav>.open>a, .navbar-default .navbar-nav>.open>a:hover, .navbar-default .navbar-nav>.open>a:focus {
	color: #FFF;
	background-color: #f3a1a2;
}

.dropdown-menu {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 1000;
	display: none;
	float: left;
	min-width: 150px;
	padding: 0;
	margin: 0;
	font-size: 1em;
	list-style: none;
	background-color: #fff;
	border: none;
	border-radius: 0;
}

.dropdown-menu>li>a {
	padding: 15px 15px;
	min-width: 200px;
}

.dropdown-menu>li>a:hover, .dropdown-menu>li>a:focus {
	background-color: #f3a1a2;
}
.dropdown-menu>.active>a, .dropdown-menu>.active>a:hover, .dropdown-menu>.active>a:focus {
	color: #fff;
	text-decoration: none;
	background-color: #f3a1a2;
	outline: 0;
}

/* ---------------------------------------------------------------------- */
/* ==========================SLIDER SECTION==============================
/* ---------------------------------------------------------------------- */
#slider-home {
	margin-bottom: 20px;
	position: relative;
}

.slider-title a { 
	color:#fff;
	padding-left: 20px;
}
.slider-title a:hover { 
	color:#f78181;
}
.carousel-caption {
	right: 0;
	left: 0;
	background: #000;
	bottom: 0;
	opacity: .7;
}
.item img {
	width: 100%;
	height: 350px;
}

a.slide-left:hover, a.slide-right:hover {
	text-decoration: none;
}

a.slide-left:before {
	content: "\f104";
	font-family: fontAwesome;
	font-size: 2em;
	background: #fff;
	padding: 10px;
	color: #f8a1a1;
	position: absolute;
	z-index: 999;
	top: 38%;
	border-top-right-radius: 5px;
	border-bottom-right-radius: 5px;
}

a.slide-right:after {
	content: "\f105";
	font-family: fontAwesome;
	font-size: 2em;
	background: #fff;
	padding: 10px;
	color: #f8a1a1;
	position: absolute;
	right: 0;
	top: 38%;
	border-top-left-radius: 5px;
	border-bottom-left-radius: 5px;
}

.carousel-indicators .active {
	width: 15px;
	height: 15px;
}

.carousel-indicators li {
	width: 15px;
	height: 15px;
	border-radius: 0;
	margin: 0;
}

.carousel-indicators {
	position: absolute;
	bottom: 10px;
	left: 66%;
	z-index: 15;
	width: 60%;
	padding-left: 0;
	text-align: right;
	list-style: none;
}
/* ---------------------------------------------------------------------- */
/* ==========================ARTICLE SECTION==============================
/* ---------------------------------------------------------------------- */

.article {
	padding: 0;
	border-right: 10px solid #f78181;
}

.featured {
	padding: 0;
	border-left: 10px solid #f8a1a1;
	margin-left: -10px;
}

#main .content {
	padding-right: 0;
	min-height: 500px;
	border-right: 10px solid #f78181;
}

.box {
	box-shadow: 0px 0px 10px #ccc;padding: 5px;
	border-left: 10px solid #f3a1a1;
	margin-left: -10px;
	margin-top: 0;
	padding-left: 10px;
	font-size: 1.3em;
	color: #f78181;
	font-weight: 500;
	margin-bottom: 15px;
}
.left-col {
	border-right: 10px solid #f78181;
	padding: 0;
}


.content p {
	font-size: 1em;
	font-weight: 300;
	text-align: justify;
}
img.alignleft {
	margin: 10px 10px 10px 0;
	margin: 0.857142857rem 0.854285714rem 0.857142857rem 0;
}
img.alignright {
	margin: 12px 0 12px 24px;
	margin: 0.857142857rem 0 0.857142857rem 1.714285714rem;
}
img.aligncenter {
	margin-top: 12px;
	margin-top: 0.857142857rem;
	margin-bottom: 12px;
	margin-bottom: 0.857142857rem;
}
.alignleft {
	float: left;
}
.alignright {
	float: right;
}
.feature-news h3 {
	box-shadow: 1px 1px 5px #E99595, -1px -1px 5px #F89898;
	border-left: 10px solid #f3a1a1;
	margin-left: -10px;
	padding: 5px;
	margin-top: 0;
	font-size: 1.5em;
	color: #f78181;
	font-weight: 800;
}

.feature-news {
	padding: 0;
}

.recent-post {
	margin-left: 0px;
	padding: 0;
}

.recent-post h3 {
	box-shadow: 1px 1px 5px #E99595, -1px -1px 5px #F89898;
	padding: 5px;
	margin-top: 0;
	font-size: 1.5em;
	color: #f78181;
	font-weight: 800;
	border-left: 10px solid #f8a1a1;
	margin-left: -10px;
	font-family: 'Open Sans',Helvetica, sans-serif;
}

.post h2, .feat h2 {
	font-weight: 500;
	font-size: 1.2em;
	color: #E06969;
	font-family: 'Open Sans',Helvetica, sans-serif;
}

.post {
	padding: 10px;
}

.post p, .feat p {
	font-size: 0.85em;
	font-weight: 300;
	text-align: justify;
}

.post img {
	margin-top: 5px;
}

.meta {
	font-size: .8em;
	color: #f8a1a1;
}

.metatag {
	font-size: 0.744em;
	color: #fff;
	position: absolute;
	top: 75px;
	left: 20px;
	background: #333;
	opacity: 0.7;
}

.fa {
	margin-right: 5px;
	margin-left: 5px;
}

.feat {
	padding: 0 10px;
	position: relative;
	width: 100%;
}

.feat img {
	width: 100%;
}

.readmore {
	border-left: 10px solid #f8a1a1;
	box-shadow: 1px 1px 0px #f8a1a1;
	font-size: 0.81em;
	color: #f8a1a1;
	font-family: 'Open Sans',Helvetica, sans-serif;
	padding: 0 5px;
}

.readmore a {
	color: #f8a1a1;
}

.recent-post-widget {
	padding-bottom: 10px;
	padding-left: 10px;
}

.recent-post-widget img {
	float: left;
	margin-right: 10px;
}

.recent-post-widget .metatag {
	color: #f8a1a1;
	float: left;
	position: inherit;
}

.recent-post-widget h4 {
	color: #c55471;
	font-size: 1em;
	font-weight: 500;
	padding: 0;
	margin: 0;
}

.pagination {
	display: inline-block;
	padding-bottom: 0;
	margin: 20px 0;
	border-radius: 0px;
	border-left: 10px solid #f8a8a8;
	margin-left: -10px;
	color: #f8a8a8;
	margin-top: 0;
	margin-bottom: -5px;
}

.pagination>li>a, .pagination>li>span {
	position: relative;
	float: left;
	padding: 6px 12px;
	margin-left: -1px;
	line-height: 1.428571429;
	text-decoration: none;
	background-color: #fff;
	border: none;
	color: #f8a1a1;
	font-weight: 800;
}
.pagi-nav {
	width: 100%;
	box-shadow: 0px 0px 5px #ccc;
	margin-top: 15px;
	margin-bottom: 14px;
}
.pagination>li:last-child>a, .pagination>li:last-child>span {
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
}
.pagination>li:first-child>a, .pagination>li:first-child>span {
	margin-left: 0;
	border-bottom-left-radius: 0;
	border-top-left-radius: 0;
}
#main .border {
	border: 10px solid #f8a1a1;
}

.feat-title {
	margin-top: 10px;
	font-size: 1em;
	line-height: 20px
} 
.tagcloud a {
	background: #f8a1a1;
	padding: 0 5px;
	color: #fff;
	margin: 0 5px;
	text-shadow: 0 1px 1px #7E7E7E;
}
blockquote {
	float: left;
}
/*=======Widget========*/
.widget-ads img {
	width: 175px;
	height: auto;
	margin: 5px;
}

/*====== calendar widget======== */
.widget_calendar {}
#wp-calendar {width: 100%; }
#wp-calendar caption { text-align: right; color: #FFF; margin-top: 10px; background: #f8a1a1; padding: 10px; }
#wp-calendar thead { font-size: 1em;}
#wp-calendar thead th { padding-bottom: 10px; text-align: center; padding-top: 10px; color: #AFAFAF;}
#wp-calendar tbody { color: #aaa; }
#wp-calendar tbody td { background: #f5f5f5; border: 1px solid #fff; text-align: center; padding:8px;}
#wp-calendar tbody td:hover { background: #fff; }
#wp-calendar tbody .pad { background: none; }
#wp-calendar tfoot #next { font-size: 10px; text-transform: uppercase; text-align: right; }
#wp-calendar tfoot #prev { font-size: 10px; text-transform: uppercase; padding-top: 10px; }
/*======Single page=====*/
.author {
	padding: 6px 10px;
	margin-bottom: 20px;
	box-shadow: 1px 1px 5px #f8a1a1;
}
.author p{
	font-size: 0.9em;
	/* margin-bottom: 20px; */
	padding: 0 10px;
	text-align: justify;
	margin-top: 5px;
}

.author h2 {
	font-size: 1.4em;
	color: #f8a8a8;
	font-weight: 800;
	padding: 0;
	margin: 0;
}

.author img {
	float: left;
	margin-right: 10px;
	box-shadow: 2px 2px 6px #F0C2C2;
	margin-bottom: 0!important;
	margin-top: 10px;
}

.author span {
	color: #f8a1a1;
}

.comments {
	border-top: 1px solid #f8a1a1;
}

.single .content .single-thumb {
	width: 100%;
	height: auto;
	margin-bottom: 20px;
	margin-top: 10px;
}

/* Sidebar CSS */

.sidebar {
	padding-left: 0;
	padding-right: 5px;
	border-left: 10px solid #f78181;
	margin-left: -10px;
}
.sidebar .thumb img{
	margin-left: 10px;
	height: 48px;
	width: 64px;
}
.sidebar .title{
	font-size: 1em;
	margin-top: 7px
}
.widget .meta{
	margin-left: 5px;
	margin-top: 5px;
}
.sidebar .media-list{
	margin-top: 15px;
	padding-right: 5px;
}

.widget {
	margin-bottom: 30px;
}

.widget li ul {
	padding-left: 10px;
}
/*-------------
/* search
/*=========*/
#searchsubmit {
	padding: 2px 8px;
	background: #f8a1a1;
	color: #fff;
	border: 0;
	text-shadow: 1px 0px 1px #5F5F5F;
}
#searchform {
	padding: 0 10px;
}

/* ---------------------------------------------------------------------- */
/* ==========================Footer SECTION==============================
/* ---------------------------------------------------------------------- */
footer {
	background-color: #FFFFFF;
	color: #808080;
	font-size: 0.8em;
	margin-left: -10px;
	border-left: 10px solid #f8a1a1;
	border-right: 10px solid #f8a1a1;
	margin-right: -10px;
}
#footer {
	box-shadow: 0px 1px 5px #ccc;
	padding: 10px;
	height: 40px;
}
.powered {
	text-align: right;
}

/*============Comment Output===========*/
.commentlist .reply {
	float: left;
}
.commentlist .reply a {}
.comment-border {
	border-left: 10px solid #FD9C9C;
	float: left;
	margin-bottom: 15px;
	margin-left: -20px;
	width: 100%;
}
.commentlist .alt {width: 100%;}
.commentlist .odd {width: 100%;}
.commentlist .even {}
.commentlist .thread-alt {}
.commentlist .thread-odd {}
.commentlist .thread-even {}
.commentlist li ul.children .alt {
	margin-left: 50px;
	float: left;
}
.commentlist li ul.children .odd {}
.commentlist li ul.children .even {}

.commentlist .vcard {
}
.commentlist .vcard cite.fn {
	font-size: 1.6em;
}
.commentlist .vcard span.says {}
.commentlist .vcard img.photo {}
.commentlist .vcard img.avatar {
	width: 68px;
	height: 68px;
	border-radius: 50%;
	float: left;
	margin-top: 0;
	margin-right: 10px;
}
.commentlist .vcard cite.fn a.url {}

.commentlist .comment-meta {} 
.commentlist .comment-meta a {}
.commentlist .commentmetadata {}
.commentlist .commentmetadata a {}

.commentlist .parent {}
.commentlist .comment {}
.commentlist .children {}
.commentlist .pingback {}
.commentlist .bypostauthor {}
.commentlist .comment-author {
	float: left;
	box-shadow: 1px 1px 4px #E0E0E0;
	padding: 5px;
	width: 100%;
}
.commentlist .comment-author-admin {}

.commentlist {
	padding: 5px 20px;
	margin-left: -10px;
	margin-top: 10px;
	float: left;
	width: 100%;
}
.commentlist li {}
.commentlist li p {
	float: left;
	width: 88%;
}
.commentlist li ul {}
.commentlist li ul.children li {}
.commentlist li ul.children li.alt {}
.commentlist li ul.children li.byuser {}
.commentlist li ul.children li.comment {}
.commentlist li ul.children li.depth-{id} {}
.commentlist li ul.children li.bypostauthor {
	width: 93%;
}
.commentlist li ul.children li.comment-author-admin {
	margin-left: 7%;
}

#cancel-comment-reply {}
#cancel-comment-reply a {}

/*Comment Form */

#respond {
	padding: 0 20px;

	margin: 0;
} 
#reply-title { } 
#cancel-comment-reply-link { }
#commentform { } 
#author { } 
#email { } 
#url { } 
#submit {
	background: #f3a1a1;
	border-radius: 0;
	color: #fff;
	font-size: 2em;
	border: 0;
	width: 63px;
	margin-bottom: 15px;
}
.comment-notes { } 
.required { }
.comment-form-author {
	width: 100%;
}
.comment-form-email {
	width: 100%;
} 
.comment-form-url {
	width: 100%;
}
.comment-form-comment {
	width: 100%;
} 
.form-allowed-tags { } 
.form-submit

.commentlist .children li.odd .comment-author .vcard {
	width: 80%;
}
.form-control:focus {
	box-shadow: none;
	border: 1px solid #ccc;
}
textarea.form-control {
	height: auto;
	border-radius: 0;
}

.wp-caption {
	max-width: 100%; /* Keep wide captions from overflowing their container. */
	padding: 4px;
}
.wp-caption .wp-caption-text,
.gallery-caption{
	font-style: italic;
	font-size: 12px;
	line-height: 2;
	color: #757575;
}

.sticky .featured-post {
	border-top: 4px double #ededed;
	border-bottom: 4px double #ededed;
	color: #757575;
	font-size: 13px;
	line-height: 3.692307692;
	margin-bottom: 24px;
	text-align: center;
}


/* ---------------------------------------------------------------------- */
/* ==========================Responsive SECTION==============================
/* ---------------------------------------------------------------------- */


@media (min-width: 320px) and (max-width: 767px) {
	#main .content {
		border-right: none;
		padding-right: 15px;
	}
	.left-col {
		border-right: 0;
	}
	#header .logo {
		font-size: 0.7em;
		font-weight: 700;
		color: #f78181;
	}
	#header .description {
		font-weight: 300;
		font-size: 0.9em;
		color: #f78181;
		margin-top: 0;
		display: block;
	}
	.featured {
		padding-right: 0px;
		padding-left: 0px;
	}
	.sidebar {
		padding-left: 15px;
	}
	.navbar-default .navbar-nav .open .dropdown-menu>.active>a, .navbar-default .navbar-nav .open .dropdown-menu>.active>a:hover, .navbar-default .navbar-nav .open .dropdown-menu>.active>a:focus{
		color: #fff;
		background-color: #f3a1a2;
	}

}
/*====within 768 and 1200====*/
@media (min-width: 768px) and (max-width: 1200px) {
	.featured {
		width: 34.66%;
	}
	.pull-left {
		float: none !important;
	}
	.post img {
		width: 100%;
	}
	.sidebar-nav {
		padding: 9px 0;
	}

	.dropdown-menu .sub-menu {
		left: 100%;
		position: absolute;
		top: 0;
		visibility: hidden;
		margin-top: -1px;
	}

	.dropdown-menu li:hover .sub-menu {
		visibility: visible;
	}

	.dropdown:hover .dropdown-menu {
		display: block;
	}

	.nav-tabs .dropdown-menu, .nav-pills .dropdown-menu, .navbar .dropdown-menu {
		margin-top: 0;
	}

	.navbar .sub-menu:before {
		border-bottom: 7px solid transparent;
		border-left: none;
		border-right: 7px solid rgba(0, 0, 0, 0.2);
		border-top: 7px solid transparent;
		left: -7px;
		top: 10px;
	}
	.navbar .sub-menu:after {
		border-top: 6px solid transparent;
		border-left: none;
		border-right: 6px solid #fff;
		border-bottom: 6px solid transparent;
		left: 10px;
		top: 11px;
		left: -6px;
	}

}
/*====above 1200px==========*/
@media (min-width: 1200px) {
	.featured {
		width: 34.66%;
	}
	.sidebar-nav {
		padding: 9px 0;
	}
	.dropdown-menu .sub-menu {
		left: 100%;
		position: absolute;
		top: 0;
		visibility: hidden;
		margin-top: -1px;
	}

	.dropdown-menu li:hover .sub-menu {
		visibility: visible;
	}

	.dropdown:hover .dropdown-menu {
		display: block;
	}

	.nav-tabs .dropdown-menu, .nav-pills .dropdown-menu, .navbar .dropdown-menu {
		margin-top: 0;
	}

	.navbar .sub-menu:before {
		border-bottom: 7px solid transparent;
		border-left: none;
		border-right: 7px solid rgba(0, 0, 0, 0.2);
		border-top: 7px solid transparent;
		left: -7px;
		top: 10px;
	}
	.navbar .sub-menu:after {
		border-top: 6px solid transparent;
		border-left: none;
		border-right: 6px solid #fff;
		border-bottom: 6px solid transparent;
		left: 10px;
		top: 11px;
		left: -6px;
	}
}