/* Start of CMSMS style sheet 'hokoji3col3' */
/* Start of CMSMS style sheet 'hokoji3col : Three column CSS fluid layout' */
/*
CSS-file for Strictly CSS three column layout 2006

Three column CSS fluid layout: 100% width | Strictly CSS

http://www.strictlycss.com
Developed by Eivind Savio
*/
* /*Set's border, padding and margin to 0 for all values*/
{
padding: 0;
margin: 0;
border: 0;
}
body, html {
color: #000; 
font-family: Verdana, Arial, Tahoma, sans-serif;
background-color: #8E4C20; 
}
body {
font-size: 70%;
min-width: 760px;
}
p {padding: 7px 0 7px 0;}

p.in {text-indent: 2em}

a {
color: #000099;
}
a:hover{
color: #0000FF;
text-decoration: none;
}

h1, h2, h3 {
font-weight: bold;
padding-bottom: 5px;
}
 
h1 { 
	margin:0;
	font:normal 1.6em Arial, Sans-Serif;
	letter-spacing:-1px;
	color:#666666;
	}
h1 a {
	color:#666666;
	}

form { margin-bottom: 1px; }
	
h2 {
font-size: 1.4em;
}
h3 {
font-size: 1.3em;
}

#header h2{
color: #fff;
}
.clear { clear: both; }
#mainContainer {
min-height: 300px;
 
}
* html #mainContainer {
height: 300px; /*** IE doesn't support min-height, but instead it handles height as min-height so we need to hack the height ***/
}
/**************************
HEADER
**************************/
#header {

	height:156px;
 text-align: center;

background-color: #CCAE74;
background-image: url(uploads/hoko3col/header3col-back.gif);
background-repeat: no-repeat;
background-position: center;
padding: 0;
 border:1px solid #000099;
  
}
/**************************
CONTENT AND COLUMNS
**************************/
.outer {
border-left: 128px solid #8E4C20; /*** This is the width and the color for our left column ***/
border-right: 128px solid #8E4C20; /*** This is the width and the color for our right column ***/
}
* html .outer {
/*** No need for hacking IE on this layout ***/
}
.inner {
width: 100%; 
}
* html .inner {
/*** No need for hacking IE on this layout ***/
}
/*** div.inner is wider than its container, div.outer, and so overlaps to the right, pushing
div.right into the proper position. IE expands div.outer instead, requiring a Tan hack to avoid 
blowing the layout apart. IE gets the original 100% width as in the Livingstone layout. It blows 
my mind that all this hacking is being caused by the mighty Gecko engine! (shakes head ruefully)
***/
.float-wrap {
float: left;
width: 100%;
margin-left: -128px; /*** Same length as .outer border-left but with negative value ***/
}
* html .float-wrap {
/*** No need for hacking IE on this layout ***/
}
#content {
float: right;
background: #fff;
margin-right: -128px;  /*** Same length as .outer border-left but with negative value ***/
width: 100%;
	font-size:14px;
	font-family:Geneva, Arial, Helvetica, sans-serif;
	color:#331100;
	background-color:#F5F1D0;

}
* html #content {
position: relative;
}
.contentWrap{
padding:12px 10px;
border:1px solid #000099;	
}
.contentWrap ol, .contentWrap ul {
margin: 3px 0 5px 35px;
}
.contentWrap li {
padding-bottom: 2px;
}
/**************************
LEFT COLUMN
**************************/
/*** div.left is in div.float-wrap, and when div.float-wrap is neg margined to the left, 
div.left is carried over into the proper position. 
***/
#left {
float: left;
text-align: center;
width: 128px;
min-height: 250px;
padding: 0;
}
* html #left {
position: relative;  /*** IE needs this  ***/
height: 250px;
}
#left ul {
list-style: none;
padding-bottom: 4px;
}
#left li {
padding-bottom: 2px;
}
/*************************
RIGHT COLUMN
**************************/
#right {
float: right; 
width: 128px;
padding: 5px;
min-height: 250px;
margin-right: -133px; /** This negative margin-right value is the width of the right column + the padding, in this example 130px. ***/
}
* html #right {
height: 250px;
position: relative;  /*** IE needs this  ***/
}
#right ul {
list-style: none;
margin-bottom: 4px;
}
#right li {
padding-bottom: 12px;
 
text-decoration: none
 
}
 
#right a {font: 12pt  arial, sans-serif;
 
 line-height: 20px;
}



/* menu Bar */

div#menu {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1em;
		width: 126px;
  padding-top: 4px;
}
 

/* ul has padding and margin by default, we dont want em nor do we want list bullet */
div#menu ul {
list-style:none;
padding:0;
margin:0;
 
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    color: #FFF;
    line-height: 30px;
    white-space: nowrap;
}

/* Make a block level to fill all the area and style with some borders */

div#menu li a {
  display:block;
    text-decoration: none;
   font-weight: bold;
	text-transform:uppercase;
	letter-spacing:1px;
    padding: 4px 10px;
	color:#663311;
  background-image: url(uploads/hokoji/button.gif);  
 background-repeat: no-repeat;
  width: 124px
}
 
div#menu li h3 {display: block; 
     font-size: 1.3em;
       color: #000;
		 padding: 0px 7px;
		   background-image: url(uploads/hokoji/button-nolink.gif); 
 background-repeat: no-repeat;
			  width: 124px
}
 
 
div#menu li a:hover {
    color: #bb1100;
	background-image:url(uploads/hokoji/button_hilite.gif);
 background-repeat: no-repeat;
}
div#menu a {
    text-decoration: none;
   font-weight: bold;
	text-transform:uppercase;
	letter-spacing:1px;
    padding: 0;
		padding-left: 4px;
	color:#663311;
}
div#menu a:link {
    color: #663311;
}
div#menu a:visited {
    color: #663311;
}
div#menu a:hover {
    color: #bb1100;
	background-image:url(uploads/hokoji/buttonhilite.gif);
  background-repeat: no-repeat;
	}
 
/**************************
FOOTER
**************************/
#footer {
text-align: center;
	height:90px;
	line-height:30px;
	padding:8px 0px;
	background-image:url(uploads/hokoji/bg_footer3.gif);
	background-repeat: repeat-x;
        font-family: Arial, Helvetica, sans-serif;
	font-size:10px;
	color:#440000;
border:1px solid #000099;	
	}
 
#footer a {
	color:#990033;
	text-decoration:none;
	}
#footer a:hover {
	color:#ff0000;
	}
/* End of 'hokoji3col : Three column CSS fluid layout' */


/* End of 'hokoji3col3' */