/*
Theme Name: hairbeauty
Theme URI:
Author:
Author URI:
Description: A responsive customizable theme that works out of the box.
Version:1.0.0
Tags: light, white, blue, gray, custom-colors, threaded-comments, custom-menu, sticky-post, translation-ready, custom-header, custom-background, two-columns, right-sidebar, left-sidebar, editor-style, featured-images
Text Domain: hairbeauty
License: GNU General Public License (GPL), v2 (or newer)
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/

html {
	-webkit-text-stroke: 1px rgba(0,0,0,0.1);
	-webkit-font-smoothing: antialiased;
}

body {
	margin:0;
	font-family: 'Open Sans', sans-serif;
	line-height: 1;
	border-top:5px solid #314a69;
}

a{
	text-decoration:underline;
	color:#314a69;
}
a:hover{text-decoration:none; }

.wrapper {
	margin:0 auto;
	width:70%;
}

/* =Header
-------------------------------------------------------------- */
#header{
	margin-top:2em;
	margin-bottom:45px;
	position:relative;
}
#branding{
	padding:10px;
	border: 3px solid #afb279;
	border-radius:6px;
	background:rgba(0,0,0,0.9);
}
.site-title {
	font-size: 2.8em;
	font-weight: bold;
	margin:0;
	font-family: 'Oswald', sans-serif;
}
.site-title a:hover{
	text-decoration:none;
	color:#afb279 !important;
}
.site-description {
	font-size: 1.2em;
	line-height:1.65em;
	font-weight: bold;
	margin-top:0.8em;
	font-family: 'Open Sans', sans-serif;
	width:100%;
}

table{margin:4px 4px 10px 4px; border-collapse:collapse;}
td{border:1px solid #f5f5f5; padding:4px;}
th{background:#f5f5f5;}

.border, .widget, .comment-body, input[type=submit], .widget_search input, .search-post input, #searchsubmit, #header img {border:3px solid #afb279;}
.radius, .widget, .comment-body, input[type=submit], .widget_search input, .search-post input, #searchsubmit, #header img{border-radius:4px;}

/* =Header Menu
-------------------------------------------------------------- */
#header-menu {
	display: inline-block;
	margin-left:-0.7em;
	width: 100%;
	font-weight:bold;
	font-size: 1.1em;
	position:relative;
	z-index:9999;
	margin-bottom:15px;
}
#header-menu ul {
	background:#fff;
	list-style: none;
	margin: 0;
	padding-left: 0;
}
#header-menu li {
	float: left;
	position: relative;
}
#header-menu a {
	display: block;
	margin-right: 0.7em;
	margin-left:0.7em;
	line-height:1.2em;
	border-bottom:4px solid #afb279;
}
#header-menu a:hover{
	border-bottom:4px solid #f7f7f7;
	color:#afb279;
	text-decoration:none;
}

/*sub menu level 2*/
#header-menu ul ul {
	display: none;
	font-size:0.8em;
	float: left;
	position: absolute;
	top: 4em;
	line-height: 4em;
	left: 0;
	z-index: 99999;
	width:170px;
	padding-right:1em;
	clear:both;
}
#header-menu ul ul a {
	line-height: 1em;
	padding: .5em 0 .5em 1em;
	width:167px;
	margin:0;
	border-left:3px solid #f5f5f5;
	border-bottom:1px solid #f5f5f5;
}

/* sub menu level 3-5*/
#header-menu ul ul ul,
#header-menu ul ul ul ul,
#header-menu ul ul ul ul ul
 {
	display: none;
	font-size:1em;
	float: left;
	position: absolute;
	top:0;
	line-height: 4em;
	left:185px;
	z-index: 99999;
	width:170px;
}

#header-menu li:hover > a:before{
	content:"{";
	display: block;
	-webkit-transform: rotate(90deg);
	-moz-transform: rotate(90deg);
	-o-transform: rotate(90deg);
	-ms-transform: rotate(90deg);
	transform: rotate(90deg);
	font-size:30px;
	text-align:center;
	padding:0;
	line-height:1em;
	margin-bottom:-30px;
	color:#314a69;
}

#header-menu li:hover > a:after{
	content:"}";
	display: block;
	-webkit-transform: rotate(90deg);
	-moz-transform: rotate(90deg);
	-o-transform: rotate(90deg);
	-ms-transform: rotate(90deg);
	transform: rotate(90deg);
	font-size:30px;
	text-align:center;
	padding:0;
	line-height:1em;
	margin-top:-30px;
	color:#314a69;
}

#header-menu ul ul a:hover:after,
#header-menu ul li ul :hover > a:after,
#header-menu ul ul a:hover:before,
#header-menu ul li ul :hover > a:before{
	content:"";
	margin:0;
}

#header-menu ul ul a:hover,
#header-menu ul li ul :hover > a{
	background:#f3f3f3;
	border-left:3px solid #314a69;
}

#header-menu ul li:hover > ul {
	display: block;
}

#header img{
	position:relative;
	border-radius:6px;
	z-index:7;
}

.header-image{
	display:block;
	width:99.6%;
	height:450px;
	/*margin:0 auto 15px auto;*/
	margin:0 auto;
	margin-top:40px;
	z-index:6;
}

#header .header-logo {
	float:left;
	margin-right:10px;
	margin-bottom:10px;
	margin-right:25px;
	border:none;
	border-radius:0;
}

.sidebar-logo {
	border:none;
	margin-bottom:10px;
	margin-left:29px;
	margin-top:19px;
}

.footer-logo {
	float:left;
	margin-right:10px;
	margin-bottom:10px;
	margin-right:25px;
	margin-left:0;
	border:none;
}

/* Full width if the sidebar is inactive: */
.no-sidebar .wrapper .container{width:100%;}
.no-sidebar .wrapper .container .post,
.no-sidebar .wrapper .container .type-page,
.no-sidebar .wrapper .container .type-attachment{width:96.6%;}

.left-sidebar .wrapper #rightsidebar {
	float:left;
	width:29%;
	margin-bottom:20px;
	margin-left:0;
}

/* Keep posts and stickies in place if there is a sidebar: */
.container{
	width:65%;
	clear:both;
	margin:0;
	padding:0;
	float:left;
	display:block;
}

/* Float the content to the right if the sidebar is to the left!*/
.left-sidebar .wrapper .container {float:right; margin-right:0;}

/* =Content
-------------------------------------------------------------- */
/*Width at 93% if the sidebar is active: */
.post,
.type-page,
.type-attachment{
	line-height: 1.5;
	margin-bottom:40px;
	margin-left:0;
	width:97,8%;
	padding:1em;
	background:rgba(0,0,0,0.9);
	color:#333;
	border: 3px solid #afb279;
	border-radius:6px;
	font-family:Verdana,Georgia,Serif;
	-ms-word-wrap: break-word;
	word-wrap: break-word;
	overflow:hidden;
}

.post-title, .archive-title{
	display:block;
	line-height:1.5;
	padding-bottom:0.5em;
	padding-top:0;
	margin:0;
	clear:both;
	color:#314a69;
	font-family: 'Oswald', sans-serif;
}
.post-title a:hover{
	color:#afb279 !important;
}
.archive-title{
	padding-bottom:0.9em;
}

.crumbs{
	font-size:0.9em;
	clear:both;
	margin-bottom:1.3em;
}
.crumbs a:hover{
	text-decoration:underline;
	color:#afb279 !important;
}

.post p{
	text-align:justify;
}

.meta {
	clear: both;
	padding:9px;
	width:100%;
	margin: 5px 0 5px 0;
	background:#afb279;
	border:2px solid #f7f7f7;
	color:#000 !important;
	font-size:10pt;
	line-height:18px;
	display:block;
	box-sizing: border-box;
}

.meta a{
	color:#000;
}

.meta a:hover{
	color:#f7f7f7;
	text-shadow:1px 1px 2px #000;
}

.attachment_nav_clear{float:right; clear:both; margin:4px;}
.fullimg{width:100%; float:left; clear:both; margin:6px;}

/*author info
-------------------------------------------------------------- */
.author-info {
	color:#314a69;
	clear:both;
	font-size:1em;
	line-height: 20px;
	overflow: hidden;
	min-height:45px;
	margin:0;
	padding: 4px 0 0 4px;
}
.author-info .author-link{
	padding-top:6px;
}
.author-info.author-link a {
	color:#314a69;
}
.author-info .author-avatar {
	float:left;
	height:60px;
	width:60px;
	margin:10px;
	border-radius:4px;
}
.author-info .author-description {
	float:left;
	margin:10px;
	font-size:1em;
}
.author-info h2 {
	font-size:1.2em;
	font-weight:bold;
	margin:0;
}

/* Stickies*/
.sticky{
	position:relative;
	z-index:7;
	float:left;
	width:95.5%;
	padding:1em;
	background:#f5f5f5;
	color:#666;
	margin: 0 7px 50px 0;
}

.sticky .crumbs,
.sticky .meta{display:none;}

.sticky:hover {
	background:#e6e6e6;
}
.sticky img{
	margin: 0 auto;
}

.search-post{
	margin-top:0;
	clear:both;
	overflow:hidden;
	padding:12px;
	min-height:5px;
	background:rgba(0,0,0,0.9);
	border: 3px solid #afb279;
	color:#333;
}

/* Navigation
----------------------------------------*/
.more-link {
	color:#f7f7f7;
	clear:both;
	padding-top:3px;
}
a.more-link:hover{
	color:yellow;
}
.page-link {
	color:#666;
	clear:both;
	padding-top:3px;
	padding-bottom:12px;
}

.page-link a{
	color:#666;
}

.page-link a:hover,
.more-link a:hover{
	text-decoration:none
}
.older-posts,
.newer-posts{
	font-family: 'Oswald', sans-serif;
	background:rgba(0,0,0,0.9);
	border: 3px solid #afb279;
	color:#333;
	min-width:170px;
	padding:9px;
	min-height:15px;
	margin:0 0 40px 0;
	-ms-word-wrap: break-word;
	word-wrap: break-word;
	word-break: break-all;
}

.newer-posts{
	float:right;
}
.older-posts{
	float:left;
}
.older-posts a,
.newer-posts a,
.paged-comments{
	color:#666;
}
.older-posts a:hover,
.newer-posts a:hover,
.paged-comments a:hover{
	color:#314a69;
}

.paged-comments{
	background:#e6e6e6;
	color:#666;
	width:140px;
	padding:6px;
	margin-bottom:25px;
	margin-top:43px;
	min-height:15px;
	font-family: 'Oswald', sans-serif;
}

/* =Images and objects
-------------------------------------------------------------- */

@media \0screen {
  img, object{
  	width: auto; /* for ie 8 */
  }
}

img,
object {
     max-width: 100%;
	 height: auto;
}

a img {border: none;}
p img {margin: 0.5em;}

img.size-auto,
img.size-full,
img.size-large,
img.size-medium,
.attachment img,
.widget-area img {
	max-width: 100%;
	height: auto;
}

.attachment-thumbnail{
	border-radius:4px;
	}
.type-attachment .attachment-thumbnail{margin:8px;}

img.alignleft {
	margin-right: 1em;
}
img.alignright {
	margin-left: 1em;
}
.wp-caption {
	padding: 5px;
	text-align: center;
}
.wp-caption img {
	margin: 5px;
}
img.wp-post-image{
	float:left;
	width:100%;
	height:450px;
	margin-bottom:15px;
	border:3px solid #fff;
	border-radius:3px;
}
img.wp-post-image:hover{
	border:3px solid #afb279;
	opacity:0.8;
}
dl.gallery-item, .wp-caption, .wp-caption-text {
	color:#314a69;
	font-size:0.9em;
}
.gallery-caption {}
.wp-smiley {
	margin: 0;
}
object{margin:15px;}

blockquote{border-left:3px solid #314a69; padding:5px 0 5px 10px;}

/* =Comments
-------------------------------------------------------------- */
#comments {
	clear: both;
	width:100%;
	padding-top:35px;
}
#comments .navigation {
	padding:0 0 18px 0;
}
h2#comments-title{
	padding-left:0;
	padding-bottom:3px;
	margin-top:5px;
	text-decoration:none;
	font-family: 'Oswald', sans-serif;
	font-weight:bold;
	font-size:26px;
	color:#314a69;
}
.commentlist {
	list-style:none;
	margin-top:0;
	padding:0;
}
.commentlist .children {
	list-style:none;
	margin:0;
}
.comment-body{
	font-size:.9em;
	padding:20px;
	min-height:5px;
	line-height:1.5;
	margin-bottom:30px;
	background:#f5f5f5;
	color:#666;
	overflow:hidden;
	-ms-word-wrap: break-word;
	word-wrap: break-word;
}
.comment-body p {
	margin:0;
	padding:0;
}
.comment-body a{
	color:#314a69;
	text-decoration:underline;
}
.comment-meta{
	margin-bottom:20px;
	margin-top:20px;
}
.comment-author {
	margin:0;
	padding:0;
	font-weight:bold;
	font-size:1em;
}
.comment-author a{
	color:#314a69;
}
.commentlist .avatar {
	width:32px;
	height:32px;
	border-radius:4px;
	border:1px solid #ccc;
	margin-right:10px;
}

.comment-edit-link{
	color:#314a69;
	font-size:.9em;
}
.bypostauthor .comment-author {}
.bypostauthor .comment-body {
	border-left:2px solid #314a69;
}
.comment-reply-link{}

.comment-form-comment label {margin-right:6px;}

.reply a{
	background:#314a69;
	border-radius:4px;
	border:1px dotted #666;
	padding:5px;
	float:right;
	font-weight:bold;
	font-size:.9em;
	color:#ccc;
	text-decoration:underline;
}
.reply a:hover{
	color:#fff;
}
.children li.depth-5 .reply{
	visibility:hidden;
}
.commentlist .even {}
.nopassword,.nocomments {
	/*display: none;*/
}
.pingback {
	color:#314a69;
}
.pingback a{
	text-decoration:underline;
}

/* Comments form
-------------------------------------------------------------- */

input[type=submit] {
	margin:3px;
	padding:3px;
}

#respond {
	overflow:hidden;
	position:relative;
	background:#314a69;
	color:#ccc;
	padding:12px;
	border-radius:4px;
	margin-bottom:30px;
}
#cancel-comment-reply-link{
	font-size:.9em;
	font-weight:normal;
}
#respond a{
	color:#ccc;
}
#respond p{
	margin:0;
}
#respond .logged-in-as{
	padding-bottom:6px;
	font-size:.9em;
}
#respond .logged-in-as a{
	color:#ccc;
}
#respond .comment-notes{
	font-size:12px;
	margin-bottom: 1em;
}
#respond .required {
	color:#fff;
	font-weight: bold;
}
#respond label {}

#respond input {
	margin:9px;
}

.comment-form-comment label,
#respond textarea {
	padding:6px;
	width:80%;
	float:left;
	clear:both;
}
#respond .form-allowed-tags {
	margin-top:14px;
	margin-bottom:14px;
	color:#ccc;
	font-size:.9em;
	line-height:1em;
	float:left;
	clear:both;
}

#respond .form-submit {
	margin: 12px 0;
	display:block;
	clear:both;
}
#respond .form-submit input {
	font-size:.9em; width: auto;
}

/* =Widgets
-------------------------------------------------------------- */

#rightsidebar{
	float:right;
	width:29%;
	margin-top:-18px;
	margin-bottom:20px;
	margin-right:0;
}

.widget{
	position:relative;
	float:right;
	width:100%;
	margin-bottom:40px;
	padding:9px;
	background:rgba(0,0,0,0.9);
	list-style: none;
	font-size:1.2em;
	line-height:1.3em;
	z-index:2;
}

.widget, #s, #searchsubmit{
	border-color:#afb279;
	color:#afb279;
}

#s{
	background:rgba(247,247,247,0.9)
}

#searchsubmit{
	background:rgba(175,178,121,0.9);
	color:#000;
}

.widget:hover, .widget:hover:hover #s, .widget:hover:hover #searchsubmit {
	background:rgba(175,178,121,0.9);
	border-color:#f7f7f7;
	color:#f7f7f7;
}

.widget:hover:hover #searchsubmit{
	background:rgba(247,247,247,0.9);
	color:#000;
}

.widgettitle{
	margin-left:9px;
	margin-top:9px;
	margin-bottom:15px;
	font-weight:bold;
	font-family: 'Oswald', sans-serif;
	font-size:1.5em;
}

.widget:hover:hover .widgettitle, .widget:hover:hover ul li a {
	color:#000;
}
.widget ul li a:hover{
	color:#f7f7f7 !important;
	text-shadow:1px 1px 2px #000;
}

.widget ul{
	font-size:.9em;
	padding:0;
	margin:0;
	float:left;
	border-radius:4px;
	width:100%;
}
.widget ul li{
	list-style: none;
	font-weight:normal;
	margin-left:9px;
	margin-top:6px;
	margin-bottom:9px;
	padding:0;
	text-align:left;
	color:#314a69;
}
#calendar_wrap{
	padding-top:5px;
	font-size:.9em;
}

.widget_calendar .widgettitle {
	display:none;
}
#wp-calendar {
	color:#314a69;
	font-weight:normal;
	padding:5px;
}
#wp-calendar a {
	color:#314a69;
	text-decoration:underline;
}
#wp-calendar caption {
	font-family: 'Oswald', sans-serif;
	font-size:18px;
	margin-bottom:8px;
}
.tagcloud{
	padding:10px;
}


.widget ul li a,
.tagcloud a {
	color:#314a69;
}

.textwidget{
	color:#afb279;
	padding:10px;
	background:#f5f5f5;
	overflow:hidden;
}

.textwidget p{
	color:#696a48 !important;
}

.textwidget a{
	color:#f7f7f7;
}
.textwidget a:hover{
	color:yellow;

}

.widget_search form, .searchform form {margin-top:3px;}
.widget_search input, .search-post input, #s{
	margin:3px;
	padding:3px;
}

.widget_rss ul li {margin-bottom:25px; width:97%;}
.rssSummary{width:90%;}
.rss-date{width:90%; float:left; clear:both;}

select {
    max-width: 150px !important;
    overflow: hidden;
}
option {
    max-width: 120px !important;
    overflow: hidden;
}

/* =Footer
-------------------------------------------------------------- */

#footer {
	display:inline-block;
	padding:10px;
	margin:0 auto;
	margin-bottom:40px;
	width:100%;
	background:rgba(0,0,0,0.9);
	border: 3px solid #afb279;
	color:#333;
	box-sizing: border-box;
	text-align:center;
}

#footer p{color:#afb279;}

#footer .widget{
	width:100%;
	box-sizing: border-box;
}

/* Alignment
-------------------------------------------------------------- */
.alignleft {
	display: inline;
	float: left;
}
.alignright {
	display: inline;
	float: right;
}
.aligncenter {
	clear: both;
	display: block;
	margin-left: auto;
	margin-right: auto;
}

/* Text meant only for screen readers */
.screen-reader-text {
	clip: rect(1px, 1px, 1px, 1px);
	position: absolute !important;
}

/* Responsive
-------------------------------------------------------*/

@media screen and (max-width:1024px){
	.wrapper{width:90%;}
	#header {background-size:100%;}
}

@media screen and (max-width:780px){
	.site-title {font-size:2.6em;}
	#header-menu{font-size:1em;}
	#header{width:99.5%;}
	#header{background:none;}
	.container,
	#rightsidebar,
	.left-sidebar .wrapper #rightsidebar {width:100%; margin:10px auto; float:left;}
	.sticky{width:90%; margin: 0 9px 50px 9px;}
}

@media screen and (max-width:600px){
	.wrapper{padding:10px; margin:0; width:90%;}
	#header{width:98.5%;}
	.header-logo, .site-title{clear:both;}
	.header-image{display:none;}
	#footer .widget{width:96%;}
		#header-menu li ul {visibility:hidden;}
	#header-menu li:hover > a:before,
	#header-menu li.current_page_item:before,
	#header-menu li:hover > a:after,
	#header-menu li.current_page_item:after{
		content:"";
	margin:0;
	}
}