/*
Theme Name:   CCW by Biote (modifying Quark)
Theme URI:    http://biote.net
Description:  CCW Theme
Template:     quark
Version:      1.0.0
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
*/

/*  NOTE  - no need to import or enqueue Quark parent - Quark does it itself  */

/* STU added 31-3-2015  */
html {
    margin: 1px !important;   
}

body {
    background-attachment: fixed;
    background-image: url("images/gccw_bkgr.jpg");
    background-position: center top;
    background-repeat: no-repeat;
	background-color: #221f1f;
}

body, h1, h2, h3, h4, h5, h6, h1.page-title, .entry-header .entry-title, b, strong, em, .entry-header time, .entry-header address   {
	font-family: Arial,Helvetica,sans-serif;
}

h1.page-title {
    font-size: 1.5rem;
    line-height: 1.2;
	margin-left: 2rem;
}

h3 {
    font-size: 1.25rem;
    line-height: 1.3;		/* works well for home blog titles */
}

.banner, .site-header, .site-content, .site-footer, .smallprint {
	max-width: 1040px;  	/*### reduced from 1200  */
}

#banner-logo {
	vertical-align: middle;

}

#gccw-logo {
	/* float: left; */	
	margin-bottom: 26px;
	margin-top: 48px;
	margin-right: 2rem;
}

.site-content {
	background-color: #fff;
}

/* left margn of an article content item */
.site-content article {
	margin-left: 2.00rem;
}

/* front page images - how why etc  */
.frontButt {
    display:inline-block;
	max-width:100%;
    white-space: normal;
}

/* increase sidebar left margin  */
.widget-area { 
	margin-left: 38px;    	/* 24 + 16 = 40px gap between content and sidebar */
	margin-left: 2.2rem;	/* this value works in better with a .col margin of 0  */
	background-color: #fff;	
}


/* bottom margin for each widget */
.widget-area .widget {
    margin-bottom: 0.65rem;
}

#nav-spacer {
	height: 16px;
}
/* banner holds navigation menus  */
.banner {
	background-color: #ee3f61;		/* MENU background colour */
}
.banner {
    min-height: 35px;
    padding: 0.5375rem 0;
}

/* google map */

/* make map div container not have any border around the map */
#map-post {
    padding: 0;
}
/* attempt to make responsive in width. If height is 100% map doesn't display */
#map-canvas {
		width:100%;
		height: 470px;		/* reduced from 600 to lose the top grey that occurs when full world show */
}

#map-canvas img {
	max-width: inherit;		/* fixes distortion of zoom etc controls by a max-width inheritance */
}

/* infowindow */
.gm-style-iw p {
	margin-bottom: 2px;
}
/* END  google map */



/*  Search box */

/* search container holds social and search elements  */
/* push search etc to right and give margins  */
#search-container {
	margin-right: 18px;
	margin-right: 1rem;
	margin-left: 2.3rem;
	float: left;
}

/* stop text preceding search box - 'Search for:' */
#search-container  .screen-reader-text {
    display:none;
}

/* width of the input box [but not the botton] */
#search-container input[type="text"] {
	width: 210px;
	width: 13rem;
}

/* width of the input box [but not the botton] */
.search-form input[type="submit"] {
	width: 36px;
    height:30px;	/* when font size is set to 0, need this to re assert the button */
    background: url("images/arrow_button.gif") top left no-repeat; 
    border: none;
	color: transparent;	/* to remove search text from under button   */
	font-size:0px; /* to get rid of text in IE8  */
}

/* the search submit button */
#search-container #searchsubmit {
	width: 36px;
    height:30px;	/* when font size is set to 0, need this to re assert the button */
    background: url("images/arrow_button.gif") top left no-repeat; 
    border: none;
	color: transparent;	/* to remove search text from under button   */
	font-size:0px; /* to get rid of text in IE8  */
}	

#search-form {
	background:rgba(255,255,255,0.5);
	margin-bottom: 12px;
	line-height: 50px;
}

#search-form input {
	color: #ccc;			/* input box text colour */
	padding: 0.308571rem;  /* adjust padding to accomodate the font-size */
	margin-right: -4px;		/* space between input box and 'go'  */
	margin-left: 12px;
}

#search-form .submit-text {
	color: #fff;
}
/* END Search box */

/* Social items  */
#social-container {
	width: 280px;
	background-color: #00b7eb;
	padding-top: 8px;
	padding-bottom: 8px;
	padding-left: 8px;
}

#twitImg {
	margin-left:4px;
}
/* END Social items  */

/* reset the main nav div to left handed and not as hugely high  */
.main-navigation {
    clear: right;
    float: left;
    margin: 0 0 0;
    text-align: left;
}

.nav-menu {
    font-family: Arial,Helvetica,sans-serif;
	font-weight: normal;
}	

.main-small-navigation a, .main-navigation a {
    color: #fff;
	text-transform: uppercase;
}
.main-navigation .current-menu-item > a, .main-navigation .current-menu-ancestor > a, .main-navigation .current_page_item > a, .main-navigation .current_page_ancestor > a, .main-navigation .current_page_parent > a {
    color: #fff;
	text-transform: uppercase;
}

/* to stop text transform on submenu items when on current page */
.main-navigation ul ul .current-menu-item > a {
    color: #fff;
    text-transform: none;
}

.main-navigation li:hover > a {
    text-decoration: underline;
	color: #fff;
}

/* submenu  */
.main-navigation ul ul {
    padding-bottom: 0.6rem;
	background-color: #666;
    line-height: 1.0rem;
	padding-left: 0.4rem;
    box-shadow: none;		/*  remove box shadow */
	width: 15rem;			/*  width of submenu box */
}

.main-navigation ul ul a {
    color: #fff;
	background-color: #666;
	text-decoration: none;
	text-transform: none;
    padding-top: 0.4rem;
    width: 14.5em;
}

.main-navigation ul ul a:hover{
    color: #fff;
	background-color: #666;
	text-decoration: underline;
	text-transform: none;
}
.main-navigation ul ul a:visited{
	text-transform: none;
}

/* this affects sub sub menu items eg in About/item/subitem, but may not be necessary */
.sub-menu .menu-item li a {
    color: #fff;
    text-transform: none;
}

.main-navigation ul ul a, .main-small-navigation a {
    color: #fff;
	background-color: #666;
	text-transform: none;
	/*padding-top: 6px;
	padding-bottom: 6px;  */
}
/* END submenu  */


/* Home page special text */
#home-blurb {
	background-color: #d9d6cd;
	color: #000;
	line-height: 25px;
	padding: 20px;
	padding-right: 20px;
	padding-bottom: 5px;
}

/* Home page 'latest' text */
.home-latest h3#latest {
	color: #666;
	font-size: 1.4rem;	
	background-color: #eceae6; 
	margin-left: 1.2rem;		/* push h3 in from left of box */
}

.home-latest {
	padding-top: 0.7rem;  	/* to top of coloured box */
	margin-left: 2rem;		/* push box in from left */
	background-color: #eceae6;   
	color: #666;	
	height: 1.9rem;			/* make sure enough height for the h3 */
   }
   
.home-blog-post {
	background-color: #eceae6;
	color: #333;
	line-height: 25px;
	padding: 20px;
	padding-right: 20px;
}
#home-blog-post p {
	font-size: 1.12rem;
}

#home-blurb p {
	font-size: 1.2rem;
}

#home-more {
	font-size: 1.13rem;
	float: right;
	margin-top: -10px;   /*  TEMPORARY FIX  */
}

#home-more a {
	color: red;
}

.homeSponsorMeta {
	color: #aaa;
	font-size: 1.2rem;	
	float: left;
	width: 225px;
}
.homeSponsorPic {
	max-width: 925px;
	padding-bottom: 35px;
	text-align: center;
}

.blog-latest h3#latest {
	color: #666;
	font-size: 1.4rem;	
}

.blog-latest {
	padding-top: 0.7rem;  	/* to top of coloured box */
	margin-left: 2rem;		/* push box in from left */
	background-color: #fff;   
	color: #666;	
	margin-left: 3.2rem;		/* push h3 in from left of box */
	height: 1.9rem;			/* make sure enough height for the h3 */
   }

.blogDate {
    border-bottom: 1px solid #ccc;
    border-top: 1px solid #ccc;
	font-size: 0.8rem;
	margin-bottom: 12px;
}
	
.blog-post {
	background-color: #fff;
	color: #333;
	line-height: 25px;
	padding: 20px;
	padding-right: 20px;
}

#map-blurb {
	background-color: #eceae6;
	color: #000;
	line-height: 25px;
	padding: 20px;
	padding-right: 20px;
}

#map-blurb p {
	font-size: 1rem;
}

/* indent 'previous' link   */
.nav-previous {
    margin-left: 28px;
}

/* WP 'more' link */
.more-link {
    float: right;
	padding-bottom: 15px;
	line-height: 1px;	/* to lift it off bottom of box */
}

.spacer {
	height: 20px;
}


/* ==========================================================================
   Twelve Column Grid
   ==========================================================================

   NOTE 	- each column plus margin  is 8.464%; each column is 6.866%, so each margin is 1.594%
   			at 1200 px this is 101.52 px each
			at 1040 px this is 87.984px  (ie 88px)
   
 CHANGES to grid8 and grid4 to take in diff widths of content and sidebar  
   
.grid_12_of_12 { width: 100%; }
.grid_11_of_12 { width: 91.53%; }
.grid_10_of_12 { width: 83.06%; }
.grid_9_of_12  { width: 74.6%; }*/
.grid_8_of_12  { width: 66.35%; }		/* (660+30)/1040  */
/*.grid_7_of_12  { width: 57.66%; }
.grid_6_of_12  { width: 49.2%; }
.grid_5_of_12  { width: 40.73%; } */
.grid_4_of_12  { width: 32.05%; }		/* (280 + 30 + 40) /1040 - 1.6% (1.6% is col right margin I think) */
/*.grid_3_of_12  { width: 23.8%; }
.grid_2_of_12  { width: 15.33%; }
.grid_1_of_12  { width: 6.866%; } */

.col {
    margin: 0 0 0 0;		/* adjust right margin because it collapses messily with the default of 1.6%  */
}

/*  Banner logo and text */
.site-title h1 {
    margin-top: 2.8rem;
}

#headercontainer h1 {
	font-size: 2.9rem;
	color: #666;
}
#headercontainer h1 #logo-text {
	font-size: 2.3rem;
	color: #999;
	line-height: 1.05;
}
/*  END Banner logo and text */


p, ol, ul, dl, address {
   font-size: 16px;
   font-size: 1rem;   /*  */
}

.entry-header .entry-title, .entry-content h3 {
	font-size: 1.3rem;
	line-height: 1.1;
}

.site-content {
	color: #333;
	font-size: 1rem;
	line-height: 1.5rem;
}

.site-content a {
	color: #ee3f61;
	text-decoration: none;
}

.site-content a:hover, .site-content a:active  {
	text-decoration: underline;
}

.entry-content {
    margin-bottom: 0.25rem;
}
.entry-meta {
    padding-bottom: 0.8rem;
}

.site-content article {
    margin-bottom: 1.5rem;	/* for margin below text prior to map */
}

#events a {
	color: #fff;
}

/*  Open Letter */
.open-letter blockquote  {
	border-left: 0;
	padding: 0 0 0 0.2rem;
	margin-left: 0;
	color: #666;	
	background-color: #eceae6;
}

.open-letter blockquote p  {
	border-left: 0;
	font-size: 1rem;
	font-style: normal;
	font-family: Arial,Helvetica,sans-serif;
		padding: 20px 20px 0;

}

.open-letter p, .open-letter h4  {
	color: #333;
}

.open-letter h4  {
	margin-bottom: 1px;
	padding-top: 14px;
	margin-left: 15px;
	margin-right: 15px;
	font-size: 1.3rem;
	font-style: bold;
	font-weight: 600;
}

.open-letter-form1 {
	font-size: 0.85rem;
	color: #666;
}
p.open-letter-form1 {
	margin-bottom: 10px;
}

.sidebar-country {
	font-size: 0.9rem;
	color: #666;
}


.sidebar-open-letter div.wpcf7 {
    padding-bottom: 10px;
}

.sidebar-open-letter .textwidget {
   margin-bottom: 10px;
 /*  padding-bottom: 4px;  */
}

.sidebar-open-letter aside {
	background-color: #d9d6cd;
	margin: 0 18px 0 0 !important;    /* margin 0 between sign-image and supoorter countr  */
}

.sidebar-open-letter div.wpcf7-validation-errors {
  /*  margin-top: -14px;   */
}

.sidebar-open-letter .wpcf7-form .invalid {
    margin-bottom: 14px;
}

/* title */
.sidebar-open-letter h3 {
	font-size: 1.4rem;
	margin-left: 14px;
	padding: 14px 0 10px;
	color: #666;
}

.sidebar-open-letter a {
	color: #fff;
}

.sidebar-open-letter p {
	margin-left: 10px;
	margin-right: 10px;
	margin-bottom: 12px;
}

.sidebar-open-letter textarea {
	max-width: 432px;
	max-width: 28.125rem;
}
.sidebar-open-letter input[type="text"], .sidebar-open-letter input[type="email"] {
	max-width: 98%;
}
.sidebar-open-letter select {
	max-width: 97%;
}

/*  submit button for form  */
.sidebar-open-letter .buttons_open_letter {
	float: right;
	margin-right: 20px;
	background-repeat: no-repeat;
	background-image: url("images/Submit.gif");
	border: 0 none;
	cursor: pointer;
	width: 84px;
	height: 31px;
}

.sidebar-open-letter input[type="submit"] {
	color: #f00;			/* set text to same colour as submit button, to hide it  */
	text-shadow: 0;
}

.sidebar-open-letter .buttons_open_letter:hover {
    background-position: 0 0;
}

.open-letter-thanks {
	margin-left: 24px;
	color: #939393;
}

.sidebar-share {
	padding-top: 12px;
	color: #939393;
	background-color: #fff;	
}
.sidebar-share hr {
	width: 95%;
	margin: 8px;
}

/* /* supporter  counter div under letter   red box   */
.open-letter-support {
	background-color: #aaa;
	text-align: center;
	color: #fff;
	font-size: 1.3rem;
	padding-top: 4px;
	padding-bottom: 4px;
}

/* supporter counter div on sidebar   red box  */
.open-letter-support-sidebar {
	background-color: #ee3f61;
	text-align: center;
	color: #fff;
	font-size: 1.3rem;
	padding-top: 4px;
	padding-bottom: 4px;
	margin-top: -10px;
	max-width: 280px;
}

.open-letter-support-sidebar a {
	color: #fff;
}

#sigNames, .open-letter-names-intro {
	margin-left: 0px;
	margin-bottom: 1.9rem;
	color: #666;
}

p.open-letter-names {
	line-height: 1.2;
	margin-bottom: 0.7rem;
}

.sidebar-open-letter div.wpcf7-validation-errors {
    border: 2px solid #f00;
}


/* pagination */
#paginContainer {
	width: 100%;
}

#paginDescr {
	font-size: 14px;
	color: #333;
	float: left;
	margin-left: 12px;
}

#pagination {
	float: right;
	color: #666;
	margin-right: 12px;
}

.pagNav {
	font-size: 14px;
	color: #ee3f61;
}

.open-letter-pagin {
	background-color: #f0f0f0;
	padding-top: 4px;
	padding-bottom: 34px;
}
/* END Open Letter */


/*  form */
/* radios and checkboxes vertically */
span.wpcf7-list-item { display: block; }


.hideActivity {
color: red;
	display: none;
}

/* hide the form lat and lng fields */
#i_lat, #i_lng {
	display:none;
	line-height:2px;
}

/* form styling */
.wpcf7 strong {
	font-size: 22px;
	font-size: 1.375rem;
}

/* form support text */
.formSupport {
	color: #909090;
}

#formInfo, #formPermission {
	background-color: #eceae6;
	padding: 12px;
	margin-bottom: 12px;
}

/* indent radios and checkboxes */
.wpcf7-list-item input[type="radio"], .wpcf7-list-item input[type="checkbox"], #mc4wp-checkbox input[type="checkbox"] {
	margin-left: 20px;
}

.wpcf7-textarea {
	max-width: 432px;
	max-width: 28.125rem;
}

div.wpcf7-mail-sent-ok {
    background-color: #dff0d8;
    border-color: #d6e9c6;
    color: #468847;
}

/* Captcha  */

#captcha-container {
	width: 340px;
	height: 90px;
	border: 2px solid pink;
	padding: 10px;
	line-height: 28px;
	margin-bottom: 12px;
}
#captcha-input {
	float: right;
	margin-right: 33px;
}

#mc4wp-checkbox label {
	font-weight: normal;
}
/* END Captcha  */

/*  END form */

/* WIDGETS  */

/* events text widget */
#events {
	background-color:#ee3f61; 
	color:#fff;
	padding:10px;
	font-size:1.2rem; 
	max-width:280px;
	text-align:center;
}

/* END WIDGETS  */




/*  footer */

/*  need the !important because there are inline styles coming from the theme */
#footercontainer {
    background-color: #444141 !important;
	
}
#footercontainer {
	height: 150px;
}

.row .smallprint {
	text-align: left;
}

.contact-text {
	width: 45%;
	color: #fff;
	float: left;
	text-align: left;
	margin-left: 40px;
}
.contact-text a, .smallprint .contact-text a {
	color: #fff;
	text-decoration: none;
}

.contact-text a:hover, .contact-text a:active {
	text-decoration: underline;
}

#biote-credit {
	color: #ddd;
	float: right;
	text-align: right;
	margin-right: 40px;
}
#biote-credit a {
	color: #ddd;
	text-decoration: none;
}

#biote-credit a:hover, #biote-credit a:active {
	text-decoration: underline;
	color: #ddd;
}

/*  END  footer */


/*  Adjust the menu at less than 800px */
@media only screen and (max-width: 800px) {
	.main-small-navigation ul li, .main-navigation ul li {
    	background-color: #ee3f61;		/* keep background colour */
	}
	
	.nav-menu {
		font-size: 14px;		/* at medium size reduce nav font  */
	}
	.main-navigation {
    	margin: 0 0 0 12px;		/* at medium size indent nav text  */
	}
	
	/* set menu button colour */
	.banner h1, .banner h2, .banner h3, .banner h4, .banner h5, .banner h6 {
    	color: #121212;
	}
	
	#search-container {
	    margin-left: 1.5rem;	/* at medium size move search/social more to the left  */
	}
	

	#events {
		font-size:0.8rem;		/* reduce font when screen small */ 
	}
	/* make search box in sidebar shorter   */
	input[type="text"]#s {
    	width: 74%;
	}
}

/*  Adjust the menu at less than 520px */
@media only screen and (max-width: 520px) {
	.main-small-navigation ul li, .main-navigation ul li {
    	background-color: #ee3f61;		/* keep background colour */
	}
	
	#search-container {
		/* margin-right: 18px;
		margin-right: 1rem; */
		float: none;
		width:280px;
		margin-left:0px;
		margin-right:0px;
		margin:auto;
	}
	/* width of the input box [but not the botton] */
	#search-container input[type="text"] {
		/*width: 90%;
		width: 13rem; */
	}
	
	.col {
	    display: block;
	    float: none;
	    margin: 0 0 0 1.6%;
	}
	
	#events {
		font-size:0.45rem;		/* reduce font when screen small */ 
	}
	
	/* max the width so logo width is maximised  */
	.grid_8_of_12 {
    	width: 99%;
	}
	#gccw-logo {
    	margin-right: 0;
	}
	.site-content article, .home-latest {
    	margin-left: 1rem;			/* smaller margins on text */
		margin-right: 1rem;
	}

	/* max the width so search/follow width is maximised  */	
	.grid_4_of_12 {
    	width: 98%;
	}

	/*  slip the credit down to the left  */
	#biote-credit {
	    margin-left: 40px;
		float: left;
	}
	/*  and get rid of pipe character  */
	#pipe {
	    visibility: hidden;
	}

	/* lessen the left margin on widgets */
	.widget-area {
    	margin-left: 1rem;
	}

	/* set these fields so that they scale responsively */
	input[type="text"], input[type="email"], textarea {
    	width: 100%; 
	}
	
	/* make search box in sidebar shorter   */
	input[type="text"]#s {
    	width: 54%;
	}

	/* set menu button colour */
	.banner h1, .banner h2, .banner h3, .banner h4, .banner h5, .banner h6 {
    	color: #121212;
	}
	
	.main-navigation ul ul a, .main-small-navigation a {
    	background-color: #ee3f61;
    	color: #fff;
    	text-transform: none;
	}
}


}