/* holygrail.css */
/* in pursuit of the Holy Grael of CSS layouts, three columns with header and footer */

/* Credits: Three column layout, Matthew Taylor  */
/* http://matthewjamestaylor.com/blog/perfect-3-column.htm */
  
body {
  margin:0;
  padding:0;    	
  border:0;			/* This removes the border around the viewport in old versions of IE */
  width:100%;
  background:#fff;
  min-width:600px; /* Minimum width of layout - remove line if not required */
						        /* The min-width property does not work in old versions of Internet Explorer */
  font-size: 90%;						        
}
    
a {
  color:#369;
}

a:hover {
	color:#fff;
	background:#369;		
}
	
h1, h2, h3, h4 {
  margin:.8em 0 .2em 0;    
  padding:0;
}

p {
  margin:.4em 0 .8em 0;
  padding:0;
}
	
img {
	margin:0px 0px;
}

/* Header styles */
#header {
  clear:both;
  float:left;
  width:100%;
  /*	border-bottom:1px solid #2175bc;*/
  background-color:white;
  border: solid 1px #2175bc;
}
	
#header p,
#header h1
{
  padding:  0.4em 12px .2em 15px;
  margin:0;
}

#header h2 {
  padding: 0.2em 12px .4em 15px;
  margin:0;
}

#header h3 {
  padding: 0.2em 12px .4em 15px;
  margin:0;
}
#header h4 {
  padding: 0.2em 12px .4em 15px;
  margin:0;
}

#header ul {
  clear:left;
  float:left;
  width:100%;
  list-style:none;
  margin:10px 0 0 0;
  padding:0;
}
#header ul li {
  display:inline;
  list-style:none;
  margin:0;
  padding:0;
}
#header ul li a {
  display:block;
  float:left;
  margin:0 0 0 1px;
  padding:3px 10px;
  text-align:center;
  background:#eee;
  color:#000;
  text-decoration:none;
  position:relative;
  left:15px;
	line-height:1.3em;
}
#header ul li a:hover {
  background:#369;
	color:#fff;
}
#header ul li a.active,
#header ul li a.active:hover {
  color:#fff;
  background:#000;
  font-weight:bold;
}
#header ul li a span {
  display:block;
}
	
/* 'widths' sub menu */
#layoutdims {
	clear:both;
	background:#eee;
	border-top:4px solid #000;
	margin:0;
	padding:6px 15px !important;
	text-align:right;
}

/* column container */
.colmask {
  position:relative;		/* This fixes the IE7 overflow hidden bug */
  clear:both;
  float:left;
  width:100%;			/* width of whole page */
	overflow:hidden;	/* This chops off any overhanging divs */
	border: solid 1px #2175bc;
}
	
/* common column settings */
.colright,
.colmid,
.colleft {
	float:left;
	width:100%;				/* width of page */
	position:relative;
}

.col1,
.col2,
.col3 {
	float:left;
	position:relative;
	padding:0 0 1em 0;	/* no left and right padding on columns, we just make them narrower instead 
								only padding top and bottom is included here, make it whatever value you need */
	overflow:hidden;
}
	
/* 3 Column settings */
.threecol {
	background:#eee;		/* right column background colour */
}
.threecol .colmid {
	right:25%;				/* width of the right column */
	background:#fff;		/* center column background colour */
}
.threecol .colleft {
	right:52%;				/* width of the middle column */
	background:#f4f4f4;		/* left column background colour */
}
.threecol .col1 {
	width:48%;				/* width of center column content (column width minus padding on either side) */
	left:102%;				/* 100% plus left padding of center column */
}
.threecol .col2 {
	width:21%;				/* Width of left column content (column width minus padding on either side) */
	left:31%;				/* width of (right column) plus (center column left and right padding) plus (left column left padding) */
}
.threecol .col3 {
	width:21%;				/* Width of right column content (column width minus padding on either side) */
	left:85%;				/* Please make note of the brackets here:						
		(100% - left column width) 
		plus (center column left and right padding) 
		plus (left column left and right padding) 
		plus (right column left padding) */
}
	
/* Footer styles */
#footer {
  clear:left ;
  width:100%;
  padding: 0.2em 0.2em; 
  text-align: center;
   /*border-top: 1px solid #2175bc;*/
    /*border-bottom: 1px solid #2175bc;		*/
    }
    
#footer p {
  padding:10px;
  margin:  0.2em 0em 0.2em 0em; 
  font: 1.0em verdana, arial,sans-serif;
  background: #ddd;
  color: black;
 }

/* typeface and font settings for h1 to h5 and p */

body {
 	font-size: 0.9em;
}

p {
 	font-family:  verdana, arial, sans-serif;
  font-size: 0.9em;
  color: black;
}

h1 {
	font-family:  Georgia, Times, serif;
  font-size: 2.0em; 
/*  font-variant:small-caps;*/
  color: #333399;
	text-align: left;
}

/* this doesn't work :-(
h1:first-letter {
  font-size: 2.2em; 
}*/

h2 {
	font-family:  Georgia, Times, serif;
  font-size: 1.4em;
  color: black;
	text-align: left;
}

h3 {
	font-family: verdana, arial,sans-serif;
	font-weight:normal;
  font-size: 1.2em;
  color: black;
	text-align: left;
}

h4 {
	font-family: verdana, arial,sans-serif;
	font-weight:normal;
  font-size: 0.85em;
	text-align: left;
}

h5 {
	padding: 0em 0.7em;    
	font-family: verdana, arial,sans-serif;
  font-size: 0.7em;
  color: black;
	text-align: center;
}


ul {
	font-family: verdana, arial,sans-serif;
  font-size: 0.8em;
  color: black;
}

#footer {
  font: 0.8em verdana, arial,sans-serif;
}

#pageframe 
{
  padding: 20px;
  /*background-color: #fff;*/
	color: #000;
	background-color: #CCCCFF;
}