/*
Theme Name: HPL Theme, authored by CJ Rhoads, April 2014
 (Based initially on "Nearly-Sprung"  from http://geriandricky.maxwells.net.nz/2006/07/30/nearly-sprung-wordpress-theme/ by Richard "Jodi" Maxwell, which was based on Description: 3 Column Rework of "Almost-Spring" by Becca Wei, http://beccary.com/goodies/wordpress-themes/. Becca based the theme on 'The Holy Grail of Layouts: Example #2: A List Apart', http://www.alistapart.com/articles/holygrail.  Also includes the IE7 Holy Hack fix found via http://blog.skagirlie.net/)
 
Tags: flexible-width, three-columns, left-sidebar, right-sidebar, simple website

With the intention of no vertical scrolling needed on a 1024x768 screen (vertical space has been optimised). 3 column setup, left and right are fixed, center is fluid

------ License Info ------
This Theme is Copyright 2014 by HPL Consortium, Inc.

    This theme 'HPL Theme' is free software: you can redistribute it 
    and/or modify it under the terms of the GNU General Public License as published 
    by the Free Software Foundation, either version 3 of the License, or
    (at your option) any later version.

    This program is distributed in the hope that it will be useful,
    but WITHOUT ANY WARRANTY; without even the implied warranty of
    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
    GNU General Public License for more details.

    See <http://www.gnu.org/licenses/> for more details on the terms of the licensing.

--------------------------
*/


/* *******************CJ Rhoads Notes while modifying style sheet    ********************    \
On May 1, 2014 I deleted all of the styles that not used in HPL's web template from the style.css
so that I could keep better track of what is needed and what is unnecessary garbage.  Those styles are still in this file so that I can get them as I need them.

The line that will give a nice shadowed tab-like box around an object is 
box-shadow:0px 0px 10px #888888;-webkit-border-radius:10px 10px 0px 0px;-moz-border-radius:10px 10px 0px 0px;border-radius:10px 10px 0px 0px
box-shadow:0px 0px 10px #888888;-webkit-border-radius:0px 0px 10px 10px;-moz-border-radius:0px 0px 10px 10px;border-radius:0px 0px 10px 10px

This stylesheet originally had broken out typography, structure, color and border for each style.  I found that confusing, so I consolidated them all so that 
typography, structure, colors and borders can all be found under one and only one style element name

This sheet was customized for Pagoda Writers Group.
#FFFF9E is Pagoda Writers Yellow color which replaced #E8E8CE (light cream color) 

*/


/***************** 3 Column Layout ******************/

/*
	fullwidth = width including both left and right side padding
	width = width excluding left and right side padding padding
	cc padding = centre column padding (combined left and right)

	left fullwidth = 150px wide, 10px padding each side (20 total)
	right fullwidth = 150px wide, 10px padding each side (20 total)
	cc padding = 15px either side (30 total)
	
	These need to be up front, before all the other styles.  (I tried moving them to be with similar styles and the columns disappeared.)
*/

/* CSS Variables start here */
:root {
  --bgcolor: #FFFF9E;
  --borderline: 10px solid #3D0A89;
}
/*  when needed use:   background-color: var(--bgcolor);  */



body 
{
	min-width: 580px;         /* 580 2 x (LC fullwidth + CC padding) + RC fullwidth */
	margin: 0;
	padding: 0;
	font-size: 100%;
	font-family:"Times New Roman",Georgia,Serif;  /* serif body text and non-serif headers is easiest to read and standard */
	background: var(--bgcolor);	/* light cream color background default for body  */
}


h1, h2, h3, h4, h5, h6 
{
	font-family: "Lucida Grande", Tahoma, Arial, sans-serif;  /* serif body text and non-serif headers is easiest to read and standard */
	color: #8963C1;		/* light purple default for headings [[Third Color for Accent  HTML code]] */
	margin: 0.5em 0 0.25em 0;   /* slightly more margin on top than bottom, no margin on sides */
}

h1
{
	font-size: 1.4em;
}

h2
{
	font-size: 1.4em;
	color: #3D0A89;
}

h3 
{
	font-size: 1.3em;
	padding-left: 10px;
}

h4 
{
	font-size: 1.2em;
}
p 
{
	margin: 1.1em; 	/* some spacing between paragraphs */
}

form, 
img 
{
	margin: 0;
	padding: 0;
	border: 0; 
	box-shadow:2px 2px 10px 0px  #888888;
	-webkit-border-radius:10px 10px 10px 10px;-moz-border-radius:10px 10px 10px 10px;border-radius:10px 10px 10px 10px;
}

a 
{
	text-decoration: none;
}

input, textarea, select 
{
	font-size: 1em;
	font-family: "Lucida Sans Unicode", Tahoma, Arial, sans-serif;
	border: 1px solid #999;
	background-color: #ffff9e; /* Very light Cream colored border for inputs  */
	color: #3A291F;  /* Darkish brown for text color in input area  */
}

blockquote 
{
	font-size: 0.9em;
	border-left: 4px solid #FFFF9E;   /* Cream colored border for blockquotes  */
}

code 
{
	font-family: monospace;
	color: #666;  /* Code is always white, so much have dark background */
}

/*  Pseudoclasses (based upon the type of item or action of the person, links, visited links, active links, hovering over links, tabbing or clicking on link */ 

a:hover, a:active, a:focus 
{
	color: #BB9638; /* golden color default for active links or hovering over links */
	box-shadow:0px 0px 10px #888888;-webkit-border-radius:10px 10px 10px 10px;-moz-border-radius:10px 10px 10px 10px;border-radius:10px 10px 10px 10px;

}

/*  CLASS attributes added to base styles for certain CLASSes  */

.permalink 
{
	margin: 0 1.8em 0 0;
	padding: 0 14px 0 14px;
}


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

.breadcrumbs 
{
	font-size: 0.5em;
	-webkit-border-radius:0px;-moz-border-radius:0px;border-radius:0px
}

.breadcrumbs a:link
{
	-webkit-border-radius:0px;-moz-border-radius:0px;border-radius:0px
}


.hidden
{
	visibility: hidden;
}

.login
{
	right:2px;
	top:2px;
	border: 2px;
	margin: 0 1.8em 0 0;
	padding: 0 14px 0 14px;
	 -webkit-border-radius:10px 10px 0px 0px;-moz-border-radius:10px 10px 0px 0px;border-radius:10px 10px 0px 0px;
	width:100%
}

/*  Following are styles for HTML5 semantic content */

header 
{
	border-bottom: var(--borderline);  /* purple border color default */
}

header h1 a 
{
	color: #F5C33A;
}

article
{
	float: left;
	width: 62%;
	background-color: #FFF;
	padding: 0 1% 0 3%;
}
article h2 a
{
	color: #FFF;
	margin-bottom: 0;
	width: 100%;
	-webkit-border-radius:10px 10px 10px 10px;-moz-border-radius:10px 10px 10px 10px;border-radius:10px 10px 10px 10px; 
	padding: 0 10px;
	background: #3D0A89 ;
}

article h2 a:hover, 
article h2 a:active
{
	background: #FFFF9E;
	color: #3D0A89;
}

nav
{
	float: left;	
	width: 15%;             /* LC width */
	padding: 0 10px;    /* LC padding */
	overflow: hidden;
	text-align: left;
}

nav h2
{
	margin-left: 12px;
}

nav ul
{
padding-left: 10px;
list-style-type: none;
}

nav ul li
{
margin: 6px 0;
}

nav ul li a 
{
display: block;
padding: 1px 10px;
border-bottom: 1px solid #FFFF9E;
box-shadow: 0px 0px 10px #888888;
-webkit-border-radius: 10px 10px 10px 10px;
-moz-border-radius: 10px 10px 10px 10px;
border-radius: 10px;
width: 84%;
}

nav ul li a:hover, 
nav ul li a:active
{
	background: white;
}


aside								/*  used as the right column  */
{
	float: left;
	margin-left: 8px;	
	width: 14%;             /* RC width */
	padding: 0 10px;          /* RC padding */
	overflow: hidden;
	text-align: left;
}

footer 
{
	border-top: var(--borderline);
	clear: both;
	margin-bottom: 10px;
}

.bottomnav 
{
	padding: 10px 0;
}

/******************* Header specialty styles  *******************/
	
header h1 
{
	padding: 0px;
	margin: 0 0 10px 10px;	
	height: 50px;
	font-size: 3.6em;
}

/********************** Footer **********************/

.floatright
{
	float: right;
}	


/********************* Images ***********************/
p img 
{
	padding: 0;
	max-width: 100%;
}

/*	
	Using 'class="alignright"' on an image will (who would've
	thought?!) align the image to the right. And using 'class="centered',
	will of course center the image. This is much better than using
	align="center", being much more futureproof (and valid) 
*/
	
.aligncenter,
div.aligncenter,
img.centered 
{
	display: block;
	margin-left: auto;
	margin-right: auto;
}
	
img.alignright 
{
	padding: 4px;
	margin: 0 0 2px 7px;
	display: inline;
}

img.alignleft 
{
	padding: 4px;
	margin: 0 7px 2px 0;
	display: inline;
}

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

.reallysmallthumbs a img
{
	width: 60px;
	height:60px;
	float: left;
	margin: 1px;
}

.codedirection 
{ 
	unicode-bidi:bidi-override; direction: rtl; 
}

/* Following is for the iframe subscribe form */
.subscribe {
	width: 100%;
	height 1200px;
}
/****************** end *********************/