/*
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

*/


/***************** 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.)
*/




body 
{
	min-width: 580px;         /* 580 2 x (LC fullwidth + CC padding) + RC fullwidth */
	max-width; 1200px		/* added max width trying to fix Chrome issue where left menu is off page  */
	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: #E8E8CE;	/*  ++PrimaryColorforBackgroundHTMLcode++ light cream color background default for body */
	overflow-x: hidden;	/* IE7 likes putting horizontal scrollbars when it doesn't need to, aaaaa! */

}



/* Essential Layout (IE Fix) */
* html #leftsidebar {
	left: 170px;              /* RC fullwidth */
}

/* Essential Layout (IE7 Fix) */
*+html #leftsidebar {
	left: 170px;              /* RC fullwidth */
}



p 
{
	margin: 1em; 	/* no spacing between paragraphs */
	font-size: 1em;   /* em is the width of one lowercase m in the current font */
	line-height: 1.25em; 
	color: #000000;  /*  ++SecondaryColorforTextHTMLcode++  Black for text color default for typical paragraphs*/

}

ol, ul 
{
	margin: 0em .25em 0em .25em;   /* no top or bottom margin, small margin to right and left. Margins are transparent, outside of border */
	padding: 0;	/* Padding uses background of element, inside of border */
	font-size: 1em;
	line-height: 1.25em;


}

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;		/* ++ThirdColorforAccent HTMLcode++ light purple default for headings  */
	margin: 0.5em 0 0.25em 0;   /* slightly more margin on top than bottom, no margin on sides */
}

h1 
{
	font-size: 1.5em;
}

h2 
{
	font-size: 1.4em;
}

h3 
{
	font-size: 1.3em;
}

h4 
{
	font-size: 1.2em;
}


blockquote 
{
	margin: 0 20px;
	padding: 0 20px;
}

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;
}

table
{
	
}

a 
{
	text-decoration: underline;
}

input, textarea, select 
{
	font-size: 1em;
	font-family: "Lucida Sans Unicode", Tahoma, Arial, sans-serif;
	border: 1px solid #999;  /* White colored border for inputs  */
	background-color: #FAFAF0; /* 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 #E8E8CE;   ++PrimaryColorforBackgroundHTMLcode++ /* Cream colored border for blockquotes  */
}

code 
{
	font-family: monospace;
	color: #666;  /* Code is  white, so must have dark background for code */
}	background-color: #3A291F; /* Darkish brown colored background for code*/


/* These were added for the photo gallery script to work. Script from http://davidwalsh.name/generate-photo-gallery  */
.clear			{ clear:both; }
.photo-link		{ padding:5px; margin:5px; border:1px solid #ccc; display:block; width:200px; float:left; }
.photo-link:hover	{ border-color:#999; }




/*  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:link 
{
	color: #3D13E6;	/* light blue color default for 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; */

}

a:visited 
{
	color: #271572;	/* darker blue color default for visited 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;  */

}

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  */

.headertitle
{
	height: 118px; /* 75 + 13 + 20*/
	border-bottom: 10px solid #8963C1;  /* ++ThirdColorforAccent HTMLcode++ light purple border color default */
}

.contentspace,
.middlecontent
{
	margin-left: 1em 1em 3em 1em;
}



.special   /* This class is not used in the web template.  It is left here for use in the future
{
	color: #FFF;		/* Items with class .special are white by default */
	margin-bottom: 0;
	width: 100%;
	overflow: auto;  	/* Width and overflow to clear '.special a' */
	-webkit-border-radius:10px 10px 10px 10px;-moz-border-radius:10px 10px 10px 10px;border-radius:10px 10px 10px 10px; 

}

.special a 
{
	float: left;
	padding: 0 10px;
	background: #8963C1 ;/*  ++ThirdColorforAccent HTMLcode++ */
}

.special a:link, 
.special a:visited 
{
	color: #FFF;	
}

.special a:hover, 
.special a:active
{
	background: #E8E8CE;  /*  ++PrimaryColorforBackgroundHTMLcode++  */
	color: #8963C1;		/* ++ThirdColorforAccent HTMLcode++ */
}


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


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

.tiny
{
	color: #999;
	font-size: 0.6em;
}


.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;
}

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

.login
{
	background: #FFF;	/*  white color background default for login  */
	position:absolute;
	right:2px;
	top:2px;
	border: 2px;
	margin: 0 1.8em 0 0;
	padding: 5px 14px 5px 14px;
	 -webkit-border-radius:10px 10px 0px 0px;-moz-border-radius:10px 10px 0px 0px;border-radius:10px 10px 0px 0px 
	width = 100%
}
.alternatepicside
{
	min-width: 580px;         /* 580 2 x (LC fullwidth + CC padding) + RC fullwidth */
	margin: 0;
	padding: 0;
	background: #E8E8CE;	/* ++PrimaryColorforBackgroundHTMLcode++ light cream color background default for body  */

}
/* I created these classes because they exist in the code, but haven't yet decided what to do with them yet.  The items already display appropriately. */

.widgetrandomtext
{
}

.menutitle
{
}

.menu-main-menu-container
{
}

.menu-item
{
}

.menu
{
}

.menu-main-menu-container
{
}




/*  ID attributes added to base styles for certain IDs  (Centrecontent, leftsidebar, and rightsidebar are repeated in another section, but must be here to work.) */

#topbanner
{
	position:absolute;
	right:40px;
	top:40px;
	margin: 0 1.8em 0 0;
	padding: 5px 14px 5px 14px;

	/* to move banner closer to org name, not under login */

}

#container 
{
	padding-left: 200px;      /* LC fullwidth */
	padding-right: 240px;     /* RC fullwidth + CC padding */
}

#container .column 
{
	position: relative;
	float: left;
}
#centrecontent 
{
	padding: 0px 15px;       /* CC padding */
	width: 100%;
}

#leftsidebar
{
	width: 170px;             /* LC width */
	padding: 0 10px 0px 10px;    /* LC padding */
	right: 190px;             /* LC fullwidth + CC padding */
	margin-left: -102%;
	overflow: hidden;
	text-align: left;
}

#rightsidebar
{
	width: 200px;             /* RC width */
	padding: 0 10px;          /* RC padding */
	margin-right: -100%;
	overflow: hidden;
	text-align: left;
}





/******************* Header specialty styles  *******************/

#header 
{
	padding: 0px;
	margin: 0px;
	background-color: #FAFAF0; /* white background default */
}

	
#header p
{
	padding: 0px;
	margin: 0 0 0 40px;	
	height:23px;
}

#header h1 
{
	padding: 0px;
	margin: 0 0 10px 10px;	
	height: 50px;
	font-size: 3.6em;
}

#header h1 a 
{
	text-decoration: none;
	color: #F5C33A;  /* Yellow header font color default */
}

#header h1 a:hover 
{
	color: #B09445;   /* Darker Yellow header font hover color default */
}


#header ul
{	
	height: 15px;
	width: 100%;
	padding: 0;	
	margin: 0px;	
	font-size: 0.9em;
	text-align: left;
	font-family: 'Lucida Grande', 'Lucida Sans Unicode', Verdana, sans-serif;
	line-height: 15px;  	/* fixes Firefox 0.9.3 */
	background-color: #591F78;  /* purple background for list font color default */
	color: #F0F0F0;   /* white list font color default */
}

#header ul li
{
	padding: 0;	
	margin: 0px;
	display: inline;
}

#header ul li a
{
	padding: 0px 10px 0px 10px;
	color: #F0F0F0;   /* white list item font color default */
}


#header ul li a:hover
{
	background: #F0F0F0;  /* white background list item font default */
	color: #B09445;  /* Darker yellow list hover font color default */
}


/******************* Main Content specialty styles *******************/

#centrecontent 
{
	padding: 10px 15px;       /* CC padding */
	width: 100%;
	overflow: hidden;
	background-color: #FFF;   /* white background color default */}
}





/******************* Left Sidebar *******************/

#leftsidebar
{
	width: 170px;             /* LC width */
	padding: 0 10px 0px 10px;    /* LC padding */
	right: 190px;             /* LC fullwidth + CC padding */
	margin-left: -105%;
	overflow: hidden;
	text-align: left;
}

#leftsidebar h2 
{
	display: inline;
	margin: 0.6em 0 0 0;
	padding: 0 10px 0 0;
	font-size: 1.0em;
}
#leftsidebar h2 a 
{
	color: #3D0A89;  
}
#leftsidebar h2 a:hover 
{
	color: #D5B440;
}


#leftsidebar ul 
{
	margin: 0.25em 0 0 0;
	padding: 0;
	list-style-type: none;
}

#leftsidebar ul ul 
{
	margin: 0.5em 0;
	border-top: 1px solid #E8E8CE; /*  ++PrimaryColorforBackgroundHTMLcode++  */
	background-color: #FAFAF0;
	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 
}

#leftsidebar ul ul li 
{
	padding: 0 0 0 10px;
	border-bottom: 1px solid #E8E8CE; /*  ++PrimaryColorforBackgroundHTMLcode++  */
	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 
}

#leftsidebar ul ul li a 
{
	display: block;
	margin: 0 0 0 -10px;
	padding: 0em 10px;
	width: 130px;
	voice-family: "\"}\""; 
	voice-family: inherit;
	width: 110px;
} 

#leftsidebar ul ul li a:hover 
{
	background-color: #FFF;
}

html>body #leftsidebar ul ul li a 
{
	width: 150px;
}


#leftsidebar ul ul ul 
{
	margin: 0;
	border: none;
}

#leftsidebar ul ul ul li 
{
	margin: 0 0 0 -10px;
	padding: 0 0 0 25px;
	border-bottom: none;
	border-top: 1px solid #E8E8CE;  /*  ++PrimaryColorforBackgroundHTMLcode++  */
}

#leftsidebar ul ul ul li a 
{
	margin: 0 0 0 -25px;
	padding: 0em 10px 0em 25px;
	width: 130px;
	voice-family: "\"}\""; 
	voice-family: inherit;
	width: 95px;
} 

html>body #leftsidebar ul ul ul li a 
{
	width: 95px;
}


/****************** Right Sidebar *******************/

/* Structure */

#rightsidebar
{
	width: 170px;             /* RC width */
	padding: 0 10px;          /* RC padding */
	margin-right: -100%;
	overflow: hidden;
	text-align: left;
}

#rightsidebar h2 
{
	display: inline;
	margin: 0.6em 0 0.3em 0;
	padding: 0 10px 0 0;
	font-size: 1.0em;
	color: #3D0A89;
}


#rightsidebar h2 a:hover 
{
	color: #D5B440;
}


#rightsidebar ul 
{
	margin: 0.25em 0 0 0;
	padding: 0;
	list-style-type: none;
}

#rightsidebar ul ul 
{
	margin: 0.5em 0;
	border-top: 1px solid #E8E8CE;  /*  ++PrimaryColorforBackgroundHTMLcode++  */
	background-color: #FAFAF0;
	border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px;
}

#rightsidebar ul ul li 
{
	padding: 0 0 0 10px;
	border-bottom: 1px solid #E8E8CE;  /*  ++PrimaryColorforBackgroundHTMLcode++  */
	border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px;
}

#rightsidebar ul ul li a 
{
	display: block;
	margin: 0 0 0 -10px;
	padding: 0em 10px;
	width: 130px;
	voice-family: "\"}\""; 
	voice-family: inherit;
	width: 110px;
} 

#rightsidebar ul ul li a:hover 
{
	background-color: #FFF;
}

html>body #rightsidebar ul ul li a 
{
	width: 110px;
}

#rightsidebar ul ul ul 
{
	margin: 0;
	border: none;
}

#rightsidebar ul ul ul li 
{
	margin: 0 0 0 -10px;
	padding: 0 0 0 25px;
	border-bottom: none;
	border-top: 1px solid #E8E8CE;  /*  ++PrimaryColorforBackgroundHTMLcode++  */
	border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px;
}

#rightsidebar ul ul ul li a 
{
	margin: 0 0 0 -25px;
	padding: 0em 10px 0em 25px;
	width: 130px;
	voice-family: "\"}\""; 
	voice-family: inherit;
	width: 95px;
} 

html>body #rightsidebar ul ul ul li a 
{
	width: 95px;
}


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

#footer 
{
	clear: both;
}

#footer p 
{
	margin: 0;
	padding: 10px 10px 0px 0px;
	font-size: 0.9em;
	text-align: left;
	background-color: #E8E8CE; /*  ++PrimaryColorforBackgroundHTMLcode++  */
	border-top: 10px solid #8963C1  /*  ++ThirdColorforAccentHTMLcode++  */

}

#orgfooter
{
	float: left;
	width: 600 px
}	

#hplfooter
{
	float: right;
	width: 900 px
}	


/********************* 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;
}





/****************** Holly Hacks *********************/

/* holly hacks to fix peekabo bugs in IE */

/* Hides from IE5-mac \*/
* html li {height: 1%;}
/* End hide from IE5-mac */



/******************** Parameters and named files in style.css ******************************/
/*****	++PrimaryColorforBackgroundHTMLcode++	default is #E8E8CE			****************/
/*****	++SecondaryColorforTextHTMLcode++	default is #000000			****************/
/*****	++ThirdColorforAccent HTMLcode++	default is #8963C1			****************/
/*****					****************/
/*****					****************/
/*****					****************/
/*****					****************/
/*****					****************/
/*****					****************/
/*****					****************/
/*****					****************/
/*****					****************/
/*****					****************/
/*****					****************/
/*****					****************/