/* HOF2styles.css */

/* Universal style rule */
*{
/* Block all browser default margins and padding */
  margin: 0;
  padding: 0;
}


/* THIS FILE WORKS WITH COL.2 PIC's right side HANGING OVER COL.3 */

body {
	background:#ccf url(art/cyprbk_pattern.jpg); /* li.blue bkgrd with HSF bkgrd pattern */
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:0.833em; /*10pt.  --- 1em=12 pt. */
	color:#000000;
}

#wrapper{
	width:51em;
	margin:20px auto; /* centered horizontally */
}


/***** major layout divisions ****/
#branding{
	height:4.75em;
	background-color:#339; /*matches column 1 bkgrd color --changed to match HSF blue */
}


/*this goes directly under branding bar and above column 1 */
#bluebar{
	width:13%;
	font-size:0.667em; /* 8 points */      
	background-color:#339; /* matches column 1 bkgrd color --also matches HSF blue */
	clear:both;
	float:left;
}

/*this goes directly under branding bar and above columns 2,3,4  */
#greenbar{
	margin-left:13%;  /* margin must match left column's (bluebar's) width */
	font-size:0.667em; /* 8 points */
	width:87%;   
	background-color:#696; /* matches col2 bkgrd color */
}


/** TEXT in column 1 **/
.col1grn{
	font-family:'Times New Roman', Times, serif;
	font-size:0.833em; /* 10 points --was 9 points-Megan found it too small */
	line-height:1.25em; /* 15 points leading */
	color:#9c9; /* light green text */
	text-align:center;
}
/* sponsors' names */
.col1white{
	font-family:'Times New Roman', Times, serif;
	font-weight:bolder;
	font-size:0.833em; /* 10 points --was 9 points-Megan found it too small */
	line-height:1.25em; /* 15 points leading */
	color:#fff; /* white text */
	text-align:center;
}
/** END of column 1 text **/




/** CAPTION TEXT in column 2 **/
.left{
	/* originally font-size:0.542em; -- 6.5 points */
	font-size:0.625em; /* 7.5 points */
	text-align:left;
	clear:both;
}

.right{
	font-size:0.625em; /* 7.5 points */
	text-align:right;
	clear:both;
}
/** END of column2 text **/



/*** TEXT in column 3 ***/
h3{
	font-family:'Times New Roman', Times, serif;
	font-size:1.167em;  /* 14 points */
	margin-top:15px;
	text-align:center;
}

p.main{
	font-family:'Times New Roman', Times, serif;
	font-size:0.917em; /* 11 pt. */
	line-height:1.25em;   /* 15 pt. */
	text-align:left;
	padding-top:12px;
	padding-bottom:12px;	
}
/*** END of column3 text ***/


/*** FOOTER section ***/
#footer {
	clear:both;
	float:left;
	width:100%;
}
#footer p {
	margin-top:10px;
	margin-left:2%;
	padding-right:2%;
	font-size:0.667em;  /* 8 points */
	text-align:center;
}
/*** end of footer section ***/


/***** START OF 3 COLUMNS SETUP --all have same height ******/
#container3 {
	/* MIGHT NOT NEED THIS -->clear:left;  */
	float:left;
	width:100%;
	position:relative;
	background:#fff; /* white - column 3 background colour */
	display:block;
	overflow:hidden;
}

#container2 {
	clear:left;
	float:left;
	width:100%;
	position:relative;
	right:74%;
	background:#696; /* green - column 2 bkgrd color */
}
#container1 {
	float:left;
	width:100%;
	position:relative;
	right:13%;
	background:#339; /* blue- column 1 bkgrd color */
}
#col1 {
	float:left;
	width:11%; /* use 2% gap for this column - 1% gap on each side */
	position:relative;
	left:88%;
	overflow:hidden;
}
#col2 {
	float:left;
	width:13%;
	/* was 9% */ /* changed column gap from 4% total to 2% total */  
	/* but then changed col width to allow for pics' right side to hang over white area */
	position:relative;
	left:90%; /* was 90 */
	/* originally 93% ---95% had pic in this column hanging over white area */
	overflow:hidden;
}

#col3 {
	float:left;
	width:68%; /* was 70% --total was 74% so used 4% gap for this column - 2% gap on each side */
	position:relative;
	left:91%;
	overflow:hidden;
}
/**** end 3 column-container setup ***/