@charset "utf-8";
@import url('http://fonts.googleapis.com/css?family=Kelly+Slab');
@import url('http://fonts.googleapis.com/css?family=Playball');
@import url('css/reset.css');
@import url('css/wordpress.css');

/*
Theme Name: Cherrylicious Theme
Theme URI: 
Description: A custom WordPress theme for Cherrybomb Beauty Parlour
Author: Nik Peran
Author URI: http://hyperlinkstudio.com.au/
Version: 1.0
Tags: responsive, two-columns, red, black

License:
License URI:

General comments (optional).
*/


/* Assume mobile device experience first */


body { 
	font-size: 62.5%; /* ~10px */ 
	text-align: center; /* for IE */ 
	font-family: Georgia, Palatino, 'Times New Roman', Times, serif;
	background: #300 url('images/body-bg.jpg') no-repeat center top scroll;
	position: relative;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-text-size-adjust: 100%; /* http://blog.55minutes.com/2012/04/iphone-text-resizing/ */	
}

/* Structure ---- */

header {
	background: url('images/logo-inner.png') no-repeat center top;
	height: 220px;	
} 

.container {
	max-width: 900px;
	margin: auto;
	text-align: left;
}

a#logo {
	display: block;
	width: 250px;
	height: 200px;
	margin: auto;
	color: transparent;
}

div#page {
	background: url('images/main-bg.png') repeat-y center top;
	color:#ccc; 
}

div.table {
	display: table;
	width: 100%;
}

div.divider {
	clear: both;
	margin: 20px 2%;
	border-top: 1px dotted #444;
}

.centered {
	max-width: 870px;
	margin: auto;
}

.contained { /* Stop heading and p margins breaking thru box */
	border-top: 1px solid transparent;	
	border-bottom: 1px solid transparent;
}

/* Content Columns */
#join {	display: none; /* links to child pages */ }
#main {}
#side { clear: both; margin-top:20px; border-top: 1px dotted #444; }

/* Home page greeting */
#welcome { margin: 10px 0; }

#base { /* bottom of page background image */
	clear: both;
	background: url('images/footer-bg.png') no-repeat center -15px; 
	height: 50px; 
}

footer {
	margin: 0 2%;
	margin-bottom: 60px;
}


/* Menus */

/* Link to show/hide mobile menu  */
a#menu-toggle { 
	text-align: center;
	background-color: #000;
	height: 14px;		
	display: block;
	background-image: url( data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAZCAYAAADE6YVjAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAADhJREFUeNpi/P//PwOtARMDHQBdLGFBYtMq3BiHT3DRPU4YR4NrNAmPJuHRJDyahEeT8Ii3BCDAAF0WBj5Er5idAAAAAElFTkSuQmCC );
	background-repeat: no-repeat;
	background-position: 10px center;	
	color: #fffcf5;
	padding: 17px 5px 17px 5px;	
	font-size: 1.5em;
	font-family:"Times New Roman", Times, serif;
	font-weight: bold;
}
	
a#menu-toggle.fixed {
	position: fixed;
	top: 0;
	left: 0;
}

/* Main Navigation */
#navigation {
	background: url('images/main-bg.png') repeat-y center top;	
}

/* Top Level Links (Parent) */
#navigation > ul {
	text-align: center;
	position: relative;
}

#navigation ul:after { /* Clearfix to nested floats */
	content: ""; 
	clear: both; 
	display: block;
}

#navigation > ul > li {
	display: inline-block;
	padding-left: 8px;
	margin-top: 8px;
	min-width: 60px;
	text-align: center;
	font-family: 'Playball', cursive;
	font-size: 3em;
	font-weight: bold;   
}

#navigation > ul > li.current_page_item, #navigation > ul > li.current-menu-item,
#navigation > ul > li.current-page-parent, #navigation > ul > li.current_page_parent /* need both */
{
   background: url('images/cherry.png') no-repeat;
}	

#navigation > ul > li > a {
	color: #fffcf5;
	display: block;
	padding: 23px 5px 36px 5px;	
	text-shadow:
	 -1px -1px 0 #555,  
	  1px -1px 0 #555,
	 -1px 1px 0 #555,
	  1px 1px 0 #555;
} 
#navigation > ul > li > a:hover {
	text-shadow:
	 -1px -1px 0 #B1191C,  
	  1px -1px 0 #B1191C,
	 -1px 1px 0 #B1191C,
	  1px 1px 0 #B1191C;
}

	/* Child Menu Links */
	#navigation ul ul { /* Hide all submenus by default */
		display: none;
	}

	#navigation ul li:hover > ul {
		display: block;
		
	}	
	
	#navigation ul ul {
		text-align: left;
		text-transform: uppercase;
		font-weight: normal;
		font-family: Georgia, "Times New Roman", Times, serif;
		font-size: 13px;
		background-color: #300;
		position: absolute; 
		top: 62px;
		margin-left: 0px;
		width: 180px;
		padding: 1px;
	}
	#navigation ul ul li {
		position: relative;
	}
	#navigation ul ul li a {
		display: block;
		color: #fff;
		height: 25px;
		line-height: 25px;
		overflow: hidden;
		padding: 2px 2px 2px 10px;
	}	
	#navigation ul ul li a:hover {
		background-color: #560C10;
	}	
	
		/* Grandchild Menu Links */
		#navigation ul ul ul {
			position: absolute; 
			left: 100%; /* 100% lines up exact */
			top: 0px;
			font-size: inherit;
		}	 

/* Sub Navigation (footer links) */
#subnav {
	background: url('images/main-bg.png') repeat-y center top;	
	text-align: center;
	padding-top: 8px;
}
	
	#subnav ul {
		font-size: 1.1em;
		line-height: 140%;
		color: #666;	
	}	
	
	#subnav ul li {
		display: inline-block;
	}
	
	/* Separate footer links with pipe except for last one */
	#subnav ul li:after { content: ' | ' }  
	#subnav ul li:last-child:after { content: none; }


/* Typography */
footer {
	font-size: 1.1em;
	color: #B2977E;
}

#page p {
	margin: 1.5em 2%;
	font-size: 1.5em;
	line-height: 150%;
	font-family: Arial, Helvetica, sans-serif;
}
#page .comment-body p {
	line-height: 140%;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 15px;
}

h1, h2, h3, h4, h5, h6 {
	font-family: Georgia, "Times New Roman", Times, serif;
	color: #D31201; /*992934 dark red | light red FF2C1D*/
	margin: 5px 0;
}

h1 { font-size: 2.4em; }
h2 { font-size: 2.0em; }
h3 { font-size: 1.8em; }
h4 { font-size: 1.6em; }
h5 { font-size: 1.5em; }
h6 { font-size: 1.4em; }

#page h1, #page h2, #page h3, #page h4, #page h5, #page h6 {
	 margin-left: 2%;
	 margin-right: 2%;
	 margin-bottom: 1.0em;
     clear: both;
}

.post-info { /* Cat, Author, Time */
	margin: 15px 2%;
	font-size: 1.2em;
}

/* Read More links on archive pages */
div.read-more { text-align: right; padding-right: 10px; font-size: 1.45em; position: relative; top: -15px; }


/* Links */
#page a, a[href="/subscribe"] {
	color: #fff;
	text-decoration: underline;
}
#page a:hover, a[href="/subscribe"]:hover {
	color: #f33;	
	text-decoration: none;
}
#join a {
	text-decoration: none;
}

#subnav a, #page a.grey {
	color: #666;
}
#subnav a:hover, #page a.grey:hover {
	color: #aaa;
	text-decoration: underline;
}
div.prevnext-links {
	clear: both;
}



/* Lists */
#join li, #main li, #side li {
	font-size: 14px;
}

#join > ul {
	margin-left: 40px;
	line-height: 140%;
}
#join > ul li {
	padding-bottom: 25px;
	text-transform: uppercase;
}
#join ul ul { margin-left: 10px; }
#join ul ul li { padding: 6px 0; }

#main ol {
	margin: 10px 0 10px 40px;
	line-height: 135%;
	list-style-type: decimal;
}
#main ul {
	margin: 10px 0 10px 50px;
	line-height: 135%;
	list-style-type:square;
}
#side ol {
	margin: 10px 0 10px 20px;
	line-height: 135%;

}
#side ul {
	margin: 10px 0 10px 8px;
	line-height: 135%;
}
#main li, #side li {
	padding-bottom: 5px;
	padding-left: 10px;
}



/* Images */

/* Remove bottom border from links that contain an image */
a img { border:none; vertical-align: top; }

/* Responsive. ht and w atts must be removed from html. Kept for images
   from when site first built but now superceded by styles underneath. */
img.scale,
img.adaptive,
img.responsive { /* Also used for attachment pages to allow larger than main column width */
	width: 95%;
	max-width: 660px;
	display: block;
	margin: 20px auto;
}
/* Make images inserted in WP editor responsive. Works even with ht and w atts in html. From WP 2011 Theme. 
#main img[class*="align"],*/
/*#main img[class*="wp-image-"] {
   width: 95%;
   max-width: 660px;
   height: auto;
}*/
#main img.size-large {
   width: 95%;
   max-width: 660px;
   height: auto;
}

.fullwidth img {
	max-width: 820px; /* images on full width page */
}

img.border {
	border: 1px solid #444;
}

.gallery { padding-bottom: 25px; }

.post-thumbnail { /* Archive Thumbnails */
	float: left; 
	padding: 4px; 
	background-color: #610000;
	margin: 12px 2% 5px 2%;
}
.post-thumbnail:hover { /* Archive Thumbnails */
	background-color: #960000;
}


/* Forms */
#page select,
#page textarea,
#page input[type="text"],
#page input[type="email"],
#page input[type="tel"],
#page input[type="search"]
{
	background-color: #450506; 
	border: 1px solid #331B1B;
	border-radius: 5px;
	box-shadow: inset 0 0 10px #000000;
	padding: 5px 10px;
	color: #E7D2B7;
	font-size: 15px;
	width: 100%; max-width: 320px;
}
#page textarea {
	font-family: Arial, Helvetica, sans-serif;
}
#page input[type="submit"] {
	padding: 5px 10px;
}
#side .search-form { margin: 10px 2% 20px 2%; }
#main .search-form { margin: 20px auto; }

/* Specific to Contact Form (Contact-Form-7 plugin) */
#contact-form textarea[name="your-message"] { height: 65px; }
#contact-form input[name="your-captcha"] { width: 120px; }
/* Specific to Mailing List (Contact-Form-7 plugin) */
#mailing-list input[name="list_captcha"] { width: 230px; } 
/* Error boxes (all) */
.wpcf7-form .wpcf7-response-output.wpcf7-validation-errors,
.wpcf7-form .wpcf7-response-output.wpcf7-mail-sent-ok {
    padding: 10px;
	font-size: 14px;
	font-family: Arial, Helvetica, sans-serif;
}
/* CAPTCHA */
img.wpcf7-captchac { vertical-align: middle; border-top: 3px solid #fff; border-bottom: 2px solid #fff; }

/* Tables */
#page table { margin: 15px 2%; }
#page table td { 
	font-size: 1.5em;
	line-height: 140%;
	font-family: Arial, Helvetica, sans-serif;
	padding: 5px;
}

/* Pagination - Search Results Page */
#main .pagination { clear:both; position:relative; font-size:11px; line-height:13px; }
#main .pagination span, #main .pagination a { display:block; float:left; margin: 2px 2px 2px 0; padding:6px 9px 5px 9px; text-decoration:none; width:auto; color:#fff; background: #555; }
#main .pagination a:hover{ color:#fff; background: #EC5C5C; }
#main .pagination .current{ padding:6px 9px 5px 9px; background: #992934; color:#fff; }

/* Contact Form (Contact-Form-7 plugin) */
#contact-form { margin: 15px 0; border-top: 1px dotted #444; border-bottom: 1px dotted #444; }


/* Mobile only styles */
@media (max-width: 500px) {
	/* Menu is cloned in mobile.js. Hide the desktop version when mobile */
	nav#navigation:not(.mm-menu) { /* Removes flash of unstyled content in mobile menu */
		display: none;
	}
}

/* Commence styles for desktop and wider devices */
/* Switch to desktop menu at 500px width */
@media (min-width: 501px) { 

	/* Menu is cloned in mobile.js. Hide the mobile version when desktop */
	#mm-navigation, a#menu-toggle {
	  display: none !important;
	}
	
	body.home header { /* Larger header image on home page */
		background: url('images/logo-home.png') no-repeat center top;
		height: 345px;	
	}	
  	
}

/* Increment content margins between 800px and 900px */
@media (min-width: 800px) { .buffer { padding: 0 10px; } }
@media (min-width: 820px) { .buffer { padding: 0 20px; } }
@media (min-width: 840px) { .buffer { padding: 0 30px; } }
@media (min-width: 860px) { .buffer { padding: 0 40px; } }
@media (min-width: 880px) { .buffer { padding: 0 50px; } }
@media (min-width: 900px) { .buffer { padding: 0 60px; } }


/* Make main content and sidebar appear side by side */
@media (min-width: 700px) { 

	#page {	padding-top:10px; /* don't dispaly as table as distorts margins */ }
	#join { display: table-cell; width: 240px; margin-bottom: 10px; }	
	#side { display: table-cell; width: 240px; margin-bottom: 10px; border-left: 1px dotted #333; padding-left: 15px; border-top: none; }	
	#main { display: table-cell; padding: 0 15px; margin-bottom: 10px; min-width: 360px; }
	
	/* Home page greeting */
	#welcome { margin-left: -40px; }
	
	/* Site map goes to two columns */
	#site-map { display: table; width: 100%; }
	#site-map .column { display: table-cell; }
	
	/* Contact Form (Contact-Form-7 plugin) */
	#contact-form > div { display: table-cell; padding: 10px; }

	 		
}

/* Mailing List in Footer */
#mailinglist span {
	display: block;
	width: 180px;
	padding-top: 18px; /* align with Facebook img */
	float: left;
	/* border: 1px dotted pink; */
}
#mailinglist:first-child { /* the first <span> */
	font-size:18px;
	line-height: 160%;
	color:#fff;
	font-family: 'Kelly Slab', Arial, Helvetica, sans-serif;
	letter-spacing: -1px;
	font-variant: small-caps;
}
span#facebook { padding-top: 0; }

#mailinglist input {
	color:#fff;
	font-size:12px;
	font-family:Georgia, "Times New Roman", Times, serif;
	background-color: #130505;
	width: 98%;
	border: none;
	border-radius: 5px;
	padding: 6px;
}

#facebook a {
	background:url('images/facebook.png') no-repeat 20px 0;
	width:180px; 
	height:60px;
	text-indent:-999em; 
	overflow:hidden;
	display:block;
} 

/* Placeholders */
#mailinglist ::-webkit-input-placeholder {  color: #D24242; font-family: Verdana, Geneva, sans-serif; font-size: 11px; } /* WebKit browsers */
#mailinglist :-moz-placeholder { color: #D24242; opacity: 1; font-family: Verdana, Geneva, sans-serif; font-size: 11px; } /* Mozilla Firefox 4 to 18 */
#mailinglist ::-moz-placeholder { color: #D24242; opacity: 1; font-family: Verdana, Geneva, sans-serif; font-size: 11px; } /* Mozilla Firefox 19+ */
#mailinglist :-ms-input-placeholder {  color: #D24242; font-family: Verdana, Geneva, sans-serif; font-size: 11px; } /* Internet Explorer 10+ */


/* Photogrid Extension */
.photogrid {
	margin: 15px 2%;
}
.photogrid img {
	background-color: #610000;
	padding: 3px;
	margin: 3px 3px 0 0;
}
.photogrid img:hover {
	background-color: #960000;
}

/* Excerpts Extension */
i.post_date { font-size: 12px; }

/* Category Posts Extension */
#side ul.category-posts { margin-left: 0; }
#side ul.category-posts li { padding-bottom: 10px; line-height:125%; }



/* Start custom styles for Price List pages */
#pricelist {
	background: #FE2512 url('images/price-head.jpg') no-repeat center top; 
	min-height: 600px;
	border-top: 1px solid transparent; /* stop top margins collapsing */
}
#pricefooter { 
	background: url('images/price-foot.jpg') no-repeat center bottom; 
	height: 52px;
}

#pricebody { 
	background: url('images/price-body-top.png') no-repeat center top, url('images/price-body.png') repeat-y center center; 
	margin-top: 286px;
	padding: 0 10px 1px 10px;
}

/* Typography */
#page #pricebody p {
	color: #333;
	line-height: 135%;
}

#page #pricebody p {
	margin: 8px 2%;
}

#pricebody em { font-size: 80%; }
#pricebody strong { color: black; }

#page #pricebody h1 { font-size: 2.4em; font-variant: small-caps; }
#page #pricebody h2 { font-size: 2.2em; font-variant: small-caps; }
#page #pricebody h3 { font-size: 2.0em; }
#page #pricebody h4 { font-size: 1.8em; }
#page #pricebody h5 { font-size: 1.6em; }
#page #pricebody h6 { font-size: 1.5em; }

#page #pricebody h1, #page #pricebody h2, #page #pricebody h3, 
#page #pricebody h4, #page #pricebody h5, #page #pricebody h6 {
	font-family:Tahoma, Geneva, sans-serif;
	color: #D31201; /*992934 dark red*//*FF2C1D light red*/
	margin: 25px 2% 8px 2%;	
}

@media (min-width: 720px) { 
	#pricebody { 
		padding-left: 70px;
		padding-right: 70px;
	}
}

#pricebody img.scale,
#pricebody img.adaptive,
#pricebody img.responsive {
	max-width: 450px;
}

#price-lists { border-top: 1px solid #333; margin: 25px 2% 1px 2%; padding: 18px 0; color: #333; font-size: 13px; font-family: Arial, Helvetica, sans-serif; color: black; }
#price-lists ul { display: inline; }
#price-lists ul li { display: inline; }
/* Separate lists with comma except for last one */
#price-lists ul li:after {	content: ', ' }
#price-lists ul li:last-child:after { content: none; }

#pricebody a { color: #D31201; }
#pricebody div.divider { height: 2px; margin: 25px 2%; border-top: 4px solid black; border-bottom: 1px solid black; clear: both; }
/* End custom styles for Price List pages */



/* Miscellaneous */
p.nocomments { display: none; } /* Hides "Comments are closed." message */
.pw_map_canvas { margin: 15px 2%; } /* Google maps plugin shortcode */


/* Responsive 2 (sub) columns - Used on contact page */
.twincols { margin: 10px 0; }
.twincol-left {}
.twincol-right {}
@media (min-width: 500px) {
	.twincols { display: table; box-sizing: border-box; width: 100%; }
	.twincol-left { display: table-cell; padding-right:5px; }
	.twincol-right { display: table-cell; left:5px; }
}