/* 
Theme Name: June7
Description: A three column responsive theme (based on Almost Spring and Holy Grail) 
Version: 1.0
Author: June Gilbank

Theme last updated: 18.02.19
*/

/* Basics and Typography */

body { margin: 0; padding: 0; background: #E2CAE0 url(images/bg.gif) repeat-x fixed; font-size: 78%; font-display: swap; font-family: "Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, sans-serif; color: #333; text-align: center; }

p { font-size: 1em; line-height: 1.5em; margin: 1em 0; }

ol, ul { font-size: 1em; line-height: 1.5em; margin: 1.2em 0 1.2em 2.1em; padding: 0; }

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

td img { max-width:none !important; }

#blogcol1 li { padding: 5px 0; }

h1, h2, h3, h4, h5, h6 { margin: 1em 0 0 0; font-family: 'Alegreya Sans', "Lucida Grande", Tahoma, Arial, sans-serif; font-weight:bold; color: #969766; }

h1 { font-size: 24px; }
h2 { font-size: 22px; }
h3 { font-size: 20px; }
h4 { font-size: 18px; }
h5 { font-size: 16px; }
h6 { font-size: 14px; }

a { text-decoration: none; }
a:link { color: #894E50; }
a:visited { color: #894E50; }
a:hover, a:active { color: #C9CBB3; }

input, textarea, select { border: 1px solid #C1C0B5; background-color: #FAFAF0; color: #333; font-size: 1em; font-family: "Lucida Sans Unicode", Tahoma, Arial, sans-serif; }
 
blockquote { margin: 0 20px; padding: 0 20px; border-left: 4px solid #E8E7D0; font-size: 0.9em; }

code { font-family: monospace; color: #666; }

form, img { margin: 0; padding: 0; border: 0; }

.small { font-size: 0.9em; color: #999; }

.alt { color:#009999; }

/* CSS Button */

.cssbutton {
	background-color:#e2cae0;
	-moz-border-radius:6px;
	-webkit-border-radius:6px;
	border-radius:6px;
	border: 1px solid #638263;
	color:#404040 !important;
	font-family:Verdana;
	font-size:13px;
	font-weight:normal !important;
	display:inline-block;
	margin: 0 5px;
	padding:3px 6px;
	height:20px;
	line-height:20px;
	width:120px;
	text-decoration:none;
	text-align:center;
}
.cssbutton:hover {
	background-color:#d5a7d2;
	color:#000000;
	cursor:pointer;
}

/* Top Bar */

#topbar { background: #E8E7D0; padding:2px; width:100%; display:inline-block; box-sizing: border-box; border-top: 1px solid #c9cbb3; border-bottom: 1px solid #c9cbb3; }

#topbar p { margin: 7px 0 !important; }

#search { float:right; padding: 0 10px; font:12px Verdana; }

/* Header Styles */
#header { width: 100%; box-sizing: border-box; }
#header h1 { margin: 0; font-size:1.8em; height: 0; visibility:hidden; }
#header h1 a { text-decoration: none; color: #894E50; }

/* Intro Styles */
header#intro { clear:both; overflow:hidden; }

#intro { display: inline-block; background-color: #ffffff !important; padding:0 5px 20px 20px !important; color: #969766 !important; font-size:1em !important; font-style:italic !important; width:100%; box-sizing: border-box; }

#intro .pagetitle { min-width:60%; }

#intro h1 { display: block; margin-top: 15px !important; color: #8a4f51 !important; font-weight:800 !important; font-size: 24px !important; font-style:normal !important; }

#intro a:link { color: #894E50 !important; }
#intro a:visited { color: #894E50 !important; }
#intro a:hover, a:active { color: #C9CBB3 !important; }
#intro h1 { font-family: 'Alegreya Sans', "Lucida Grande", Tahoma, Arial, sans-serif !important; }

.title { font-family: 'Alegreya Sans', "Lucida Grande", Tahoma, Arial, sans-serif !important; font-weight:bold; font-size:18px; text-transform:uppercase; color:#8a4f51; }



/* Footer Styles */
#footer { clear: both; background: #E2CAE0; font-size: 0.9em; text-align: right; margin-bottom: 0; padding-bottom: 20px; }
#footer p { margin: 0; padding: 15px 0 20px 10px; font-size: 0.9em; text-align: right; }

/* FOOTER MENU */

#footermenu { clear:both; max-width:100%; background-color: #e8e7d0; padding:0 20px; box-sizing: border-box; border-top: 1px solid #c9cbb3; border-bottom: 1px solid #c9cbb3; }
 
.footercol { float:left; width:194px; margin:15px; }

a.foot { text-decoration: none; font-weight:normal; }
a.foot:link { color: #8a4f51; }
a.foot:visited { color: #8a4f51; }
a.foot:hover, a#foot:active { color: #621217; background-color:#c9cbb3; } 
.foot { padding-top: 1px; }
 
/* Right Sidebar Styles */
#blogcol3 h2 { display: inline; margin: 1.2em 0 0.6em 0; padding: 0 10px 0 0; font-size: 16px; }
#blogcol3 ul { margin: 0; padding: 0; list-style-type: none; }
#blogcol3 ul li { }
#blogcol3 ul ul { margin: 1.2em 0; }
#blogcol2 .widget { margin: 1.2em 0; padding: 6px 0 6px 0px; border-bottom: 1px solid #E8E7D0; }
#blogcol3 .widget { margin: 1.2em 0; padding: 6px 0 6px 0px; border-bottom: 1px solid #E8E7D0; }
#blogcol3 ul ul li { padding: 0 0 0 10px; }
#blogcol3 ul ul li a { display: block; margin: 0 0 0 -10px; padding: 2px 10px 0 10px; width: 190px; voice-family: "\"}\""; voice-family: inherit; width: 170px; } 
html>body #blogcol3 ul ul li a { width: 170px; }
#blogcol3 ul ul li a:hover { background-color: #FFF; }
/* Nested lists? */
#blogcol3 ul ul ul { margin: 0; border: none; }
#blogcol3 ul ul ul li { margin: 0 0 0 -10px; padding: 0 0 0 25px; border-bottom: none; }
#blogcol3 ul ul ul li a { margin: 0 0 0 -25px; padding: 2px 10px 0 25px; width: 190px; voice-family: "\"}\""; voice-family: inherit; width: 155px; } 
html>body #blogcol3 ul ul ul li a { width: 155px; }

#blogcol3 img { padding: 4px 0; }

.postspermonth { margin: 5px 0 10px 0; list-style: none; padding-left: 5px; }

/* Left Sidebar Styles */
#blogcol2 h2 { display: inline; margin: 1.2em 0 0.6em 0; font-size: 16px; }
#blogcol2 ul { margin: 0; padding: 0; list-style-type: none; }
#blogcol2 ul li { }
#blogcol2 ul ul { margin: 0em 0; }
#blogcol2 ul ul li { padding: 0 0 0 10px; }
#blogcol2 ul ul li a { display: block; margin: 0 0 0 -10px; padding: 2px 10px 0 10px; width: 150px; voice-family: "\"}\""; voice-family: inherit; width: 130px; } 
html>body #blogcol2 ul ul li a { width: 130px; }
#blogcol2 ul ul li a:hover { background-color: #FFF; }
/* Nested lists? */
#blogcol2 ul ul ul { margin: 0; border: none; }
#blogcol2 ul ul ul li { margin: 0 0 0 -10px; padding: 0 0 0 25px; border-bottom: none; }
#blogcol2 ul ul ul li a { margin: 0 0 0 -25px; padding: 2px 10px 0 25px; width: 150px; voice-family: "\"}\""; voice-family: inherit; width: 115px; } 
html>body #blogcol2 ul ul ul li a { width: 115px; }

#blogcol2 img { padding: 4px 0; }

/* 2 column left sidebar styles */

#2col2 h2 { display: inline; margin: 1.2em 0 0.6em 0; padding: 0 10px 5px 0; background: url(images/arrow.gif) no-repeat center right; font-size: 16px; }
#2col2 img { padding: 4px 0; }


/* Blog */

.post { }
.posttitle { margin-bottom: 0; width: 100%; color: #FFF; overflow: auto; /* Width and overflow to clear '.posttitle a' */ }
.posttitle a { float: left; padding: 0 10px; background: #894E50 url(images/posttitle.gif) no-repeat top right; }
.posttitle a:link, .posttitle a:visited { color: #E2CAE0; }
.posttitle a:hover, .posttitle a:active { background: #EFE2EE url(images/posttitle.gif) no-repeat 100% -91px; color: #969766; }
.postmeta { margin-top: 0; padding-top: 1px; background: url(images/postmeta.gif) no-repeat top left; font-size: 0.9em; color: #999; }
.postentry { }
.postentry a, .page a { font-weight:bold; }
.anchormenu a {font-weight:normal; }
.permalink { margin: 0 1.8em 0 0; padding: 0 0 0 14px; background: url(images/permalink.gif) no-repeat center left; }
.commentslink { padding: 0 0 0 17px; background: url(images/commentslink.gif) no-repeat center left; }

.infobox { border: medium solid #E2cAE0; padding: 5px; text-align:center; font-size: 1em; }

/* Comments */

#commentlist, #commentlist .children { margin: 1.2em 0; padding: 0; border-bottom: 1px solid #E8E7D0; list-style-type: none; }
#commentlist li { border-top: 1px solid #E8E7D0; padding: 1px 1px; background-color: #FFF; }
#commentlist .children { margin-left:1.5em; }
#commentlist .alt { background-color: #FAFAF0 !important; color:#000000 !important; }
.commenttitle { margin-bottom: 0; font-size: 1.1em; }
.commentmeta { margin-top: 0; font-size: 0.9em; color: #999; }

#comment { width: 98%; }

.navigation { }

/* Comment Avatar */

#commentlist li .avatar { border: 1px solid #E8E7D0; padding: 2px; margin: 0 10px 0 0; float: left; }

/* Images etc */

a img { border: none; }

.navigation { display: block; text-align: center; margin-top: 10px; margin-bottom: 60px; }

.alignright { float: right; }
 
.alignleft { float: left; }

#blogcol1 .post img { display:block; margin:0 auto; } 

#blogcol1 div.donate { text-align: center; } 

#blogcol1 img.wp-smiley, #blogcol1 img.half { display:inline; margin: 0; }

div.halfcenter  { text-align:center; }
div.halfcenter img.half { display:block; max-width:50%; }

div.halfleft { max-width:50%; height:auto; float: left; padding-right: 10px; padding-bottom: 10px;}

div.halfright { max-width:50%; height:auto; float: right; padding-left: 10px; padding-bottom: 10px;}

div.clear { clear:both; }

img.extra-space { padding-top:10px; padding-bottom:10px; }

@media only screen and (max-width:420px) {
table#blogtable img { width:120px; }
img.wp-smiley { width:auto !important; }

}

.tutorialwrapper { clear:both; display:block; overflow:hidden; padding:10px 0; }
.tutorial { display: block; overflow:hidden; }
.tutorial img { max-width:none; }
img.tut { float: left; padding-right:10px; }
.tutorial a img.tut { padding-bottom:10px; }

.ico { display:inline-block !important; vertical-align:bottom; padding-right:10px; padding-top:10px; }

/* Embedded Videos */

.video {
	position: relative;
	padding-bottom: 56.25%;
	height: 0;
	overflow: hidden;
}
.video iframe,  
.video object,  
.video embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
 
/* Mailinglist */

#mailinglist { padding: 40px; min-height:200px; }

/* Login */

.login { float:right; font-style:normal; max-width: 40%; text-align:right; padding: 10px 10px 10px 20px; }

/* Leftmenu */

#leftmenu img { padding: 6px 0; }

.center { display:block; margin-left:auto; margin-right:auto; }

@media all and (min-width: 851px) {
.arrows { display:block; margin-left:auto; margin-right:auto; }
}
@media only screen and (max-width: 850px) { 
.arrows { display:block; margin-left:56px }
} 

/* TESTIMONIALS */

#speech { background: #efe2ee; padding: 15px; -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; }
#bubble { height: 21px; margin-left: 30px; background: url(/testimonials/images/speech-bubble.gif) no-repeat; }

/* RESPONSIVE STYLES */

.wrapper { margin:0 auto; text-align:left; background-color: #FFF; }

@media all and (min-width: 960px) {
.wrapper { width: 940px; } 
} 
 
/* Layout */
/* column container */
/* Cols (l pad, content, r pad), px: Left: 25, 130, 20. Middle: 15, 500, 15. Right: 30, 180, 25. */
#blogcolmask { position:relative; /* This fixes the IE7 overflow hidden bug and stops the layout jumping out of place */
 clear:both; float:left; width:100%; /* width of whole page */
 overflow:hidden; /* This chops off any overhanging divs */
 background:#fff; /* Right column background colour */
}

@media all and (min-width: 960px) {
#blogcolmid { float:left; width:200%; margin-left:-235px; /* Width of right column */ position:relative; right:100%; background:#fff; /* Centre column background colour */ }

#blogcolright { float:left; width:100%; margin-left:-50%; position:relative;
 left:410px; /* Left column width + right column width */
 background:#fff; /* Left column background colour */ }
 
#blogcol1wrap { float:left; width:50%; position:relative;
 right:175px; /* Width of left column */
 padding-bottom:1em; /* Centre column bottom padding */ }
 
#blogcol1 { margin:0 250px 0 190px; /* Centre column side padding:
 Left padding = left column width + centre column left padding width
 Right padding = right column width + centre column right padding width */
 position:relative; left:200%; overflow:hidden; }
 
#blogcol2 { float:left; float:right; /* This overrides the float:left above */ width:130px; /* Width of left column content (left column width minus left and right padding) */ position:relative; right:25px; /* Width of the left-hand side padding on the left column */ }

#blogcol3 { float:left; float:right; /* This overrides the float:left above */ width:180px; /* Width of right column content (right column width minus left and right padding) */ margin-right:70px; /* Width of right column right-hand padding + left column left and right padding. JG: I had to subtract 15px to get this number to work properly. */ position:relative; left:50%; }

}

@media only screen and (min-width: 793px) and (max-width: 959px) {
#blogcolmid { float:left; width:100%; background:#fff; }
#blogcolright { float:left; width:200%; position:relative; left:210px; background:#fff; }
#blogcol1wrap { float:right; width:50%; position:relative; right:210px; padding-bottom:1em; }
#blogcol1 { margin:0 20px 0 240px; position:relative; right:100%; overflow:hidden; width:500px; }
#blogsidebars { width:180px; }
#blogcol2 { float:left; width:160px; position:relative; right:180px; }
#blogcol2 img { display:block; margin-left:auto; margin-right:auto; }
#blogcol3 { float:left; width:180px; position:relative; right:180px; }
}

@media only screen and (max-width: 792px) {
#blogcolright { float:left; width:100%; background:#fff; }
#blogcol1wrap { float:right; width:100%; padding-bottom:1em; }
#blogcol1 { display:block; margin:0 auto; overflow:hidden; max-width:500px; padding: 0 15px; }
#blogcol2 { clear:both; display:block; margin:0 auto; max-width:500px; padding: 0 15px; }
#blogcol3 { clear:both; display:block; margin:0 auto; max-width:500px; padding: 0 15px; }
#speech { max-width:350px; }
#blogcol2 img.center { display:block; margin-left:56px; }
.widget_text { overflow:hidden; }
div.blogavatar { float:left; padding-right: 20px; }
div.mr_social_sharing_wrapper { display:inline-block; width:auto !important; }
ul#amazon li { float: left; }
}

@media only screen and (max-width: 749px) {
#speech { max-width:550px; }
}

/* Bonus styles (superceding blog styles) for 2-column layout */

/* column container */
#twocolmask { position:relative; /* This fixes the IE7 overflow hidden bug and stops the layout jumping out of place */
 clear:both; float:left; width:100%; /* width of whole page */
 overflow:hidden; /* This chops off any overhanging divs */ 
}

@media only screen and (min-width: 851px) {
/* 2 column left menu settings */
#twocolright { float:left; width:200%; position:relative; left:175px; background:#fff; }
#twocol1wrap { float:right; width:50%; position:relative; right:175px; padding-bottom:1em; }
#twocol1 { margin:0 20px 0 190px; position:relative; right:100%; overflow:hidden; }
#twocol2 { float:left; width:130px; position:relative; right:155px; }
}
@media only screen and (max-width: 850px) {
/* 2 column left menu settings */
#twocolright { float:left; width:100%; background:#fff; }
#twocol1wrap { float:right; width:100%; padding-bottom:1em; }
#twocol1 { margin:0 20px; right:100%; overflow:hidden; }
#twocol2 { clear:both; width:100%; margin:0 20px; }
}
 
@media only screen and (max-width: 599px) {
 #header { text-align:center; }
 #header img { width:90%; max-width: 500px; height auto; padding-bottom 5px; }
 #header { padding: 0; margin: 0 auto; background: #FFF; }
}

@media only screen and (min-width: 600px) and (max-width: 939px) {
 #header img { width: 53%; height auto; }
 #header { padding: 0; margin: 0 auto; background: #FFF url(images/random-header.php) no-repeat top right; background-size: 47%; }
}

@media all and (min-width: 768px) and (max-width: 939px) {
 .wrapper { width: 95%; }
}

@media all and (min-width: 940px) and (max-width: 959px) {
 .wrapper { width: 98%; max-width: 940px; }
 #blogcol3 { max-width: 180px; }
 #header img { width: 53%; height auto; }
 #header { padding: 0; margin: 0 auto; background: #FFF url(images/random-header.php) no-repeat top right; background-size: 47%; }
}

@media all and (min-width: 960px) {
 #blogcol3 { max-width: 180px; }
 #header img { width: 500px; height 148 px; }
 #header { padding: 0; margin: 0 auto; background: #FFF url(images/random-header.php) no-repeat top right; width: 940px; height:148px; }
}

/* PRETTYPHOTO LIGHTBOX */
div.pp_description { display:none !important; }