/* see also: cogpol.css */
/* this was with radix theme 20150619, now  */



/*** Regular Use When Writing ***/
.lg-quote {
	font-size: 2em;
	font-family: Garamond;
	font-style: italic;
	text-align: center;
}
.intro-frame {
	font-size: .9em;
	color: purple;
	display: block;
	border-bottom: 1px solid purple;
	border-top: 1px solid purple;
}
div.series {
	width: 100%;
	text-align: right;
	font-variant: small-caps;
	font-size: .9em;
	margin-top: -3px;
	margin-bottom: 1em;
}
.the-purple { font-weight: bold; color: purple; }




/*** Workshop Page ***/
.view-workshop-calendar div.views-row {
		padding-bottom: 3em;
	}
.view-workshop-calendar div.views-row .views-field-title,
.view-workshop-calendar div.views-row .views-field-date {
	font-size: 1.25em;
}
.view-workshop-calendar div.views-row .views-field-title {
	    border-bottom: 3px solid #eee;
    padding-bottom: 1px;
}



/*** Blog page layout ***/
header { padding-bottom: 1em; }
.field-name-body { padding-bottom: 1em; }


/*** Social links like facebook and twitter ***/

/* in header, follow me: (follow module) */
#page-header {
	position: absolute;
	top: 0em;
	right: 1em;
}
/* in blogs (where else!?), share */
.service-label { 
	content: "Share! ";
	display: inline-block;
}
div.service-links ul li {
	display: inline-block;
	list-style-type: none;
	padding-left: .3em;
}

.submitted {
	float: right;
	padding: 0 0 1em 1em;
	text-align: center;
}

.node-blog {
	font-size: 1.4em;
}
.node-blog h4, .node-blog h3 {
	margin-top: 18px;
	color: rgb(22, 31, 40); /* twice as dark as before, as text? */
}

/*** Exploring new front page image ***/
.group-book-display .field-name-field-sell-links a {
	color: #18bc9c;
	padding: 6px 12px 6px 8px;
	font-size: 1.1em;
	background: rgba(255,255,255, .98);
	border-top: 2px solid #2c3e50;
	border-bottom: 2px solid #2c3e50;
	border-right: 1px solid blue;
	border-top-right-radius: 10px;
	border-bottom-right-radius: 10px;
}
.group-book-display .field-name-field-image-book {
	width: 520px; /* 554 x 312 */
	overflow: hidden;
	margin-left: -220px;
}
.group-book-display .field-name-field-image-book img {
	height: 378px;
	width: 671px;
}
.group-book-display .field-name-field-sell-links {
	position: relative;
	top: -70px;
	left: -212px; /* was -12px */
}
.group-book-display .field-name-field-sell-links a {
	padding-left: 206px;
}

.group-book-display .field-name-field-image-book {
	/* background: transparent; */
	padding: 0; 
}
/* overwrite the less file for the moment */
.pane-content .node-home-slice .field-name-field-image-book {
	padding-top: 0;
	padding-bottom: 0;
}

.group-book-display {
	position: relative;
	top: -37px; /* problem: creates space beneath image */
	height: 351px;   /* 378-37px, with overflow still on, but there is 
		some border, so add it back, idunno how much */
}
	

/*** Header Imaging ***/
body {
	/*background: rgba(228,239,222,.05); /* sleepy! Get rid of green boxes
		and might be ok */
  background: #fff url("./images/web_green_line240.png") repeat-x; 
	background-position: left -190px;
} 

/*** Colorizing Take #1 ***/
/*** Retheme the "second header" browser-built theme
 * to primary purple? Might erase this, which sends it back
 * to business-grey, looks alright ***/
/* or grey with pretty button. */
.pane-plain-box-second-header #edit-submit {
	background: #6d438e; /*#02288e; /* <-- less saturated -- rgba(85, 11, 142, .8);*/
			/* um, nice (accidental) blue ... maybe replace grey? */
}
	
/*** Margin for book for non-home-page fiddling ***/
#mini-panel-get_the_book_sidebar {
	float: right;
	position: absolute;
	bottom: -24px; /* set the bottom 40 px below the frame it is in,
			then don't allow it to overflow (except on mouse-over) */
	right: 50px;
	height: 130px;
	padding-left: 20px; /* overflow into this! */
	overflow: hidden;
	/*overflow-x: visible; */
}
/* ok, if you are logged in, this is over menu items. You're probably me,
 * 	at least for now.
 * Instead of visiblizing the overflow, hide it! */
/* !!! For me only!!! Dev tricks (no one else logged in anyway) */
.logged-in #mini-panel-get_the_book_sidebar:hover {
	/*visibility: hidden; /* ha ha! I reinvented flash (this unhovers)*/
}
/* from the side, book disappears before you can hover over it,
 * from the bottom, it should stay */
.logged-in #navbar:hover #mini-panel-get_the_book_sidebar:hover {
  display: block;
}
.logged-in #navbar:hover #mini-panel-get_the_book_sidebar {
	display: none;
}

.navbar-nav {
	z-index: 400;
}
#mini-panel-get_the_book_sidebar:hover {
	overflow: visible;
}
#mini-panel-get_the_book_sidebar:hover img {
	top: 4px; /* 28px shift down on hover */
}
#mini-panel-get_the_book_sidebar:hover .field-name-field-sell-links {
	/* attached not to the image, image can slide while this stays still */
}
#mini-panel-get_the_book_sidebar img {
	position: relative;
	top: -24px;
}
#mini-panel-get_the_book_sidebar h2 {
	display: none;
}
/* non-crazy version 
#mini-panel-get_the_book_sidebar .field-name-field-sell-links {
  position: relative;
  top: -70px;
  left: -12px;
}
*/
@media screen and (max-width: 991px) {
	#mini-panel-get_the_book_sidebar {
		display: none;
	}
}
/* absolute positioning version */
/* I want this to overlow the overflow=hidden! */
#mini-panel-get_the_book_sidebar .field-name-field-sell-links {
  position: relative;
  top: -170px; /* sidebar */
  left: -12px;
	z-index: 10;
	overflow: visible;
}

#mini-panel-get_the_book_sidebar .field-name-field-sell-links a {
}
/* Changed mind: just one Sell! link for now */
#mini-panel-get_the_book_sidebar .field-name-field-sell-links .odd {
	display: none;
}

#mini-panel-get_the_book_sidebar .field-name-field-sell-links a {
  background: #333;
  color: #eee;
	padding: 6px 10px;
}

/* In variables.less, divided brand-primary from the-purple */


/*** Front Page Fiddling ***/

.front .radix-layouts-header h2.pane-title {
	display: none; /* see pane-inner-title */
}
h2.pane-inner-title {
  font-size: 24px;
}
.group-book-display {
  float: left;
}

#temp-blog-section h2.pane-title { /* think this whole section may go! */
	display: none;
}
	
/* clear around the book ... title or body, not sure yet.
 * Title would require change node.tpl */
.front #node-36 .field-name-body {
 clear: right;
}

/*-- Front Page, Purchase Row --*/
.front #get-thebook {
	margin-bottom: 1.5em;
	margin-top: 1.25em;
}
#get-thebook:target div.purchase-row{
	background: yellow;
}
div.purchase-row {
	width: 100%;
	text-align: center;
	font-size: 1.6em;
}

/*** Book Sales Table ***/
/*@media only screen and (max-width: 760px) {}*/
div.book-sale {
  margin-left: 0;
  margin-right: 0;
  background-color: #e9efe5;
     /* #e9e4ed; green: #e9efe5*/
  background: rgba(229,239,223, 1);
	padding-bottom: .5em;
	padding-top: .5em;
	border-left: 1px solid #e9e4ed;
	border-right: 1px solid #e9e4ed;
    border-bottom: 2px solid #afda95;
    /* purple, header, book title? color: #8d12ed; */
}
div.purple-panel {
	background-color: #e9e4ed;
}
div.book-sale .title {
	color: #8d12ed;
}
/*div.book-sale:nth-child(odd) {
	border-right: 2px solid #afda95;
}
div.book-sale:nth-child(even) {
	border-left: 2px solid #afda95;
}*/
.buy-row {
	overflow: hidden;
	padding: 1px;
}
.buy-row div {
	margin-top: 0;
	margin-bottom: 0;
}


div.buy-image-p {
	border: 2px solid brown;
}
div.buy-image-p {
	float: left;
	margin-right: 10px;
}
/* Maybe on it's own page tis will look ok */
Xdiv.buy-image-p:nth-child(even) {
	float: left;
	margin: left: -20px;
	padding-right: 10px;
}
Xdiv.buy-image-p:nth-child(odd) {
	float: right;
	margin-left: .6em;
	/* even not odd, style:  margin-right: -20px; */
}
div.buy-box {
	width: 45%;
	text-align: center;
	width: 120px;
	margin: .5em;
	font-size: .95em;
	padding: .2em .4em;
	display: inline-block;
	float: right;
	font-size: .8em;
}
div.buy-box:nth-child(1) {
	font-weight: bold;
	color: white; /* depends on background */
	background:  #e5daed; /*e9e4ed; /*rgba(141,18,237, 0.1); /* #8d12ed; /* or white #fff; /* only if green background*/
	border: 1px solid #8d12ed;
	line-height: 125%; /* shrink this, increase vertical font, maybe */
}
div.buy-box a {
	padding-top: 0;
}
div.buy-box div.buy {
	text-transform: uppercase;
	font-size: .8em;
}
div.buy-box-powells {
	position: relative;
	top: -3px; /* to match the well -- eyeball
			creates extra padding below */
}
/*-- Front Page Second Row, meh, why no classes? --*/
.green-panel,
#node-24 .container-fluid .row:nth-child(2) {
	margin-left: 0;
	margin-right: 0;
	background-color: #e9efe5; /*rgba(229, 239, 223, 1); */
}

.green-panel  .pane-title ,
#node-24 .container-fluid .row:nth-child(2) .pane-title {
  display: inline-block;
	float: right;

	background: rgba(229,239,223, 1);
	display: inline-block; /* still leaves a little weirdness. */
	font-size: 18px;
 
	padding: 1em;
	padding-left: .6em;
    border-bottom-color: #afda95;
    border-bottom-style: solid;
    border-bottom-width: 2px;
    color: #8d12ed;
    margin-bottom: 0;
    margin-left: 6px;
    margin-top: 1px;
   background-color: transparent;
}

.green-panel .pane-content,
#node-24 .container-fluid .row:nth-child(2) .pane-content {
	padding: 1em;
	/*color: #2c3e50; /* this is the same as the background behind the
		default menu-bar. I may be removing these colors for purple, but
	  it does look nice as text! */
}
.green-panel  .pane-pane,
#node-24 .container-fluid .row:nth-child(2) .panel-pane {
	margin-bottom: 0px;
	margin: 0;
	background-color: #e9efe5; /* rgba(229, 239, 223, .5);*/
}
.green-panel  .pane-panel,
#node-24 .container-fluid .row:nth-child(2) .panel-panel {
	margin: 0;
	padding-left: 10px; /* theme defaults to 15px each */
	padding-right: 0px;
}
/* For 3 col: */
@media screen and (max-width: 991px) {
	.green-panel  h2.pane-title,
	#node-24 .container-fluid .row:nth-child(2) h2.pane-title {
		padding: 0px 6px 6px 6px;
		margin-left: 6px;
		margin-top: .75em; /* some screen-size adjustments here */
		margin-bottom: 0px;
		font-size: 1.05em;
	}
	.green-panel .panel-pane,
	#node-24 .container-fluid .row:nth-child(2) .panel-panel:nth-child(n+2) .panel-pane {
		border-top: 2px solid rgba(255,255,255,.8);
	}
}
@media screen and (min-width: 992px) {
	#node-24 .container-fluid .row:nth-child(2) .panel-panel:nth-child(n+2) .panel-pane {
		border-left: 2px solid rgba(255,255,255,.8);
	}
	#node-24 .container-fluid .row:nth-child(2) .panel-panel:nth-child(1) {
		padding-left: 0px;
	}
}

/* A little more spacing between panes
 * For front page, intending to be site-wide
 * views of content. Might just force all panes
 * to be separated more? */
.view-content h2 {
	padding-top: 1em;
}


/*** Webform for Workshops Page ***/
/* email not above, not sure why. */
.webform-client-form #edit-submitted-email {
	display: block;
	clear: left;
}
/* and .form-group { margin-bottom: 15px;  exists elsewhere, so */
.webform-client-form .form-item {
	margin-bottom: 15px;
}

#node-23 .panel-3col-33-stacked .panel-col-last {
	z-index: 101; /* put form above map if conflict, not working, but */
}
#node-23 .panel-3col-33-stacked .panel-col {
	z-index: 1;
	overflow: hidden; /* this hides the right-end of the map */
}

/*** Book Reviews ***/
.field-name-field-book-cover {
	float: left;
	margin-right: .8em;
	margin-bottom: .8em;
}
.see-my-review {
  float: right; 
	margin-left: 2em; 
	margin-top: -.5em; 
	padding: .3em .6em; 
	background: rgba(128,0,128,.06);
}

/*** Books for Sale ***/
div.book-sale {
}

/*-- Blog Page on-the-fly changes --*/

/* a bit like sidebar from the book */
.sidebit {	
	float: right; margin: .4em 0 1.2em .4em; padding: 1em 0 1em 1em; background: rgba(200,255,200,.1);	
}
.field-name-field-comment-spark {
	margin: 2em 15% 1em 15%;
	padding: 1.2em 1.6em;
 	background: rgba(255,250,205, .3); very light lemonchiffon, not used elsewhere yet */
}

/* lead image */
.field-name-field-lead-image {
	text-align: center;
}
.field-name-field-lead-image img {
	max-width: 100%;
	height: auto;
}
@media screen and (min-width: 991px) {
	.field-name-field-lead-image {
		float: right;
		padding-left:1em;
		text-align: right;
	}
}


.field-name-field-issue { margin-top: 1em; }

/*** Commerce ***/
td.views-field-add-to-cart-quantity {
	width: 200px;
}