@import url("borders.css");


.clear {
	clear: both;		/* generic clearing element so that whatever comes 
						   after this element will appear below all floating 
						   elements above it */
}

.hide {
	display: none;		/* generic class to hide elements from CSS-capable
						   browsers */
}

body {
	margin: 0;			/* void out browser-defined gutterspace */
	padding: 0;
	font-family:Verdana, Geneva, sans-serif;
	font-size: 1em;
	color: #000;
	background-color: #FFF;
	background-image:url(../images/clovergorsebigbkgd.gif);
}
h1, h2, h3, h4 {
	margin:0; 
	padding:0; 
	color:#476042;
	text-transform:uppercase; 
}

h2 {
	font-size:1.2em;
	text-align:center;
}

h3 {
	margin:.25em 0em 1em 6em;
	font-size:.8em; 
	color:#000;
	font-style:oblique;
}
.right { text-align:right;}
h4 {font-size:.75em; margin:.75em 0 0 0;}

p {font-weight:normal; font-size: .75em; margin:.25em 0em;}

a {color: #476042;
}

a:link {
	color: #476042;
	text-decoration: underline;
}
a:visited {
	text-decoration: underline;
	color: #000;
}
a:hover {
	text-decoration: none;
	color: #E1B35B;
	background-color: #476042;
}
a:active {
	text-decoration: none;
	color: #E1B35B;
}










	/* TOP NAVIGATION */


#navcontainer ul
{
padding-left: 0;
margin-left: 0;
background-color:#476042;
color: White;
float: left;
width: 100%;
font-family: arial, helvetica, sans-serif;

}

#navcontainer ul li { display: inline; }


#navcontainer ul li a
{
padding: 0.2em 1em;
background-color: #476042;
color: White;
text-decoration: none;
float: left;
border-right: 1px solid #fff;
}


#navlist li a:link { color: #fff;
background: #476042;
}
#navlist li a:visited {
color: #fff;
background: #476042;
}


#navcontainer ul li a:hover
{
background-color:#6A9662;
color:#FF6;
}


#navcontainer ul li a.current
{
background-color:#6A9662;
color:#fff;
}

div.hr {
  height: 15px;
  background-image:url(../images/cloverbutton.gif) );
  background-repeat:no-repeat;
  background-position:center;
}

div.hr hr {
  display: none;
}

img {
	float:left;
	border:none;
	padding:.25em;
}

ol {
	font-size: .8em;
}
.green {color:#476042; font-weight:bold; }


dl {margin:  .25em ;
	}
		
	dt {font-weight:bold; color:#000; font-size:.85em;
	}
	dd {font-style:italic; color:#060; margin-bottom: .5em; font-size:.75em;
	}
	
.article{
	height:10em;
	padding:.5em ; 
	background-color:#FFFCCC;	
	border: #063 solid 1px; 
	overflow:auto;
	
	

}

.rightsm {
	text-align:right;
	font-size:0.75em;
	color:#063;
}

#hj, #news, #hippo, #com, #bowl, #hs, #intro {
	height:3em;
	background-repeat:no-repeat;
	background-attachment:scroll;
	background-position:1em; 
	background-color:#ffff66; 
	border: solid #476042;
	border-width: 1px 1px 2px 1px; 
	
	


	
}
#hj{background-image:}
#news {background-image:}
#hippo{background-image:}
#com{background-image:}
#bowl{background-image}
#hs{background-image:}
#intro{background-image:url(../images/HJLogosm.gif);}

#date{ font-size: .85em; font-weight:bold; text-align:center; }




#sleeve {
	max-width: 999px;	/* max resolution - 25px to accomadate for the vertical
						   scrollbar */
	min-width: 615px;	/* min resolution - 25px */
	margin: 0 auto;		/* auto horizontal margins will cause the layout to be
						   horizontally centered (usually) */
}

#wrapper{
	margin: 1em;			/* reserve some gutter space around the layout even
							   in very low resolution */
	border: #476042 double thick;
	
}

#masthead,
#footer {
	border: solid 1px #ccc;
	margin: 0.5em;
	padding: 1px 0.5em;
}

#masthead {
	background-image:url(../images/Horsesmast4h.png);
	height:125px;
	background-repeat: no-repeat;
	background-position: 50% ;
	
	
	
	
	text-indent:-9999px;
	background-color:#476042;
	

}

#masthead h1 {
	font-size: 1.5em;
	margin: 0;
}

#masthead h2 {
	font-size: 1em;
	margin: 0;
}

#main-menu {
	margin-top: .25em;
	margin-bottom:1.5em;
}

#page {
	float: left;			/* full page width panel */
	width: 100%;
}

div.panel {
	background-color: inherit;
	border: 0;
	padding: 1px 1em;
	margin: 0.5em;
	margin-bottom: 0;		/* don't rely on margin collapsing. simply have
							   no bottom margin */
}

#left-column {
	float: left;
	width: 80%;				/* width of main column as a percent of the 
							   available horizontal space */
}

#left-column div.panel {
	margin-right: 0.25em;
}

#right-column {
	float: left;
	width: 20%;				/* 100% - <width of #left column> */
	font-size: 0.85em;		/* gutter space of panels inside #right-column
							   is defined in EMs. If you change the 
							   font size of this column YOU MUST CHANGE
							   the gutter space dimensions of panels
							   in this column. the formula here is simple:

							   ( 1 / <font size> ) * <target size>

							   Apply this formula and round to the 
							   nearest hundreth. Look below for some
							   examples. */
}

#right-column div.panel {
	margin-left: 0.29em;	/* ( 1em / 0.85em ) * 0.25em = 0.29em */
	margin-right: 0.59em;	/* ( 1em / 0.85em ) * 0.5em = 0.59em */
	margin-top: 0.59em;		/* ( 1em / 0.85em ) * 0.5em = 0.59em */
	border: solid 1px #d9d3b4;
}
#right-column h2 {
	border-bottom: solid 1px #476042;
	font-size: .75em;
	
	 }

#footer {
	padding: 0;
	font-size:.8em;
	background-color:#476042;
	color:#ccc;
	text-align:center;
	height:auto
}
#footer li {
		display: inline;
		margin-right: 0.5em; padding-right: 0.75em;
		padding-bottom:.25em;
		padding-top: .25em;
		border-right: 1px solid #476042;
		font-weight:bold;
		color:#476042;
		
		
}
	
#footer li.last {
		border-right-style:none;
}
	
#footer a:link {
	color: #476042;
	text-decoration: underline;
}
#footer a:visited {
	text-decoration: underline;
	color: #000;
}
#footer a:hover {
	text-decoration: none;
	color: #E1B35B;
	background-color: #476042;
}


/*two column starts here*/

div.two-columns {
	width: 100%;
}

div.two-columns div.tc-left-column {
	float: left;
	width: 50%;
	
}
div.two-columns div.tc-right-column {
	float: left;
	width: 50%;
	
	
}
div.two-columns div.tc-right-align {
	text-align: right;
}
div.two-columns div.tc-left-column div.tc-panel {
	margin-right: 1em;
}
div.two-columns div.tc-right-column div.tc-panel {
	margin-left: 1em;
}
div.tc-border div.tc-left-column {
	margin-right: -1px;
	border: 0;
}
div.tc-border  div.tc-right-column {
	border:0;
}
/*DO NOT EDIT BELOW HERE*/

/* CSS Hacks
 * --
 *
 * The Key Hacks Used In this Layout
 *
 * [* html]		Any rule that starts with this will only be applied by
 *				Win/IE 6, Mac/IE 5 and earlier versions. This is a quick
 *				and dirty way to hide CSS from non-IE browsers
 *
 * [\*]			The backslash acts as an escape character for Mac/IE. Thus
 *				changing how it interprets the closing comment mark, 
 *				essentially causing Mac/IE to ignore it and treat anything
 *				that follows as part of a CSS comment until another,
 *				unescaped closing comment mark is found. This allows us
 *				to hide IE hacks specific to Windows from Mac users.
 *
 * [min-width:0]		- IE 7
 * [position:relative]	- IE 6
 * [height:0.01%]		- IE 5
 *				This is used to trigger hasLayout in Win/IE. hasLayout is 
 *				a unique property of IE's rendering engine that is the 
 *				root of almost every IE rendering bug. triggering hasLayout
 *				will often resolve a rendering issue in IE, although it
 *				can sometimes lead to other rendering bugs.
 *
 */
.clear {					/* hide from IE/Mac \*/
	padding-bottom: 1px;
	margin-bottom: -1px;	/* this padding/margin hack is here for
							   older Mozilla engines (Netscape 7, 6,
							   FireFox pre 2.0) which will not allow 
							   an element to clear unless it has some 
							   effect on how the rest of the layout 
							   renders (ie, it takes up space). 
							   Hidden from IE/Mac as it triggers a 
							   horizontal scrollbar. */
}
#page,
#left-column,
#right-column {
	overflow: visible;		/* an old hack for Win/IE where the width of
							   italicized text is not properly calculated
							   and leads to possibly breaking the layout. */
}
#main-menu {
	padding-left: 1em;
	padding-right: 1em;		/* for clients that can't center the menu,
							   such as Mac/IE and Netscape 6 */
}
#wrapper{
	min-width: 0;			/* for IE 7 */
}
* html #wrapper {				/* hide from IE/Mac \*/
	position: relative;		/* for IE 6 */
}

div.tc-right-column,
#right-column {
	margin-right: -1px;		/* for IE's rounding bug */
}
/** html #masthead {
	background-image: none;	 for IE 6 and earlier - can't really do
							   transparent PNGs 
}*/

* html div.tc-border div.tc-right-column {
	margin-right: -100%;	/* for IE */
}
* html div.tc-panel {		/* hide from Mac/IE \*/
	padding: 1px 0;			/* help IE ignore margin collapse */
}

#sleeve #wrapper #left-column .panel .two-columns.tc-border .tc-right-column .tc-panel .article p .bold {
	font-weight: bold;
}
