/* HOFstyles3.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); /* same bkgrd pattern as HSF */
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:0.833em; /*was 0.833em;=10 pt.  --- 1em=12 pt. */
	color:#000;
}

#wrapper{
	width:51em;
	/* background-color:#fff; */
	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{
	/* height:0.625em;  --don't use height and width BOTH so that layout is elastic */
	width:13%;
	font-size:0.667em; /* 8 points */      
	background-color:#339; /* matches column 1 bkgrd color --changed to match HSF blue */
	clear:both;
	float:left;
}

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




/** CLICK HERE text **/ /* goes under Suggest Someone button */
.click{
	float:right; 
	margin-right:7em;
	font-size:0.75em; /* 9 points */
	text-align:center;
}

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

.left{
	/* originally font-size:0.542em; -- 6.5 points */
	font-size:0.625em; /* 7.5 points */
	color:#000;
	text-align:left;
	text-decoration:none;
	clear:both;
}

.right{
	/* originally font-size:0.542em; -- 6.5 points */
	font-size:0.625em; /* 7.5 points */
	color:#000;	
	text-align:right;
	text-decoration:none;
	clear:both;
}
/** end of column2 text **/



/** TEXT - main body copy in column 3 */

/* p.main{
	font-size:0.833em;
	color:#000;
} */


p.main{  /* styled this way in fame3.html */
	font-family:Verdana, Arial, sans-serif;
	font-size:0.833em;     /* .75=9pt.  .833=10pt.  .917=11 pt. */
	line-height:1.167em;   /* =14pt  1em=12 pt.  1.083=13pt. */
	text-align:left;
	padding-top:12px;
	padding-bottom:12px;	
}


/** end column3 text **/





/*** TEXT in column4 ***/
p.synopsis{
	font-family:'Times New Roman', Times, serif;
	font-size:0.917em; /* 11 pt. */
	line-height:1.25em;   /* 15 pt.? */
	text-align:center;
	padding-top:12px;
	padding-bottom:12px;	
}
/*** end of column4 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 ***/


a {text-decoration:none}



/***** START OF 4 COLUMNS SETUP ******/
#container4 {
	/* MIGHT NOT NEED THIS -->clear:left;  */
	float:left;
	width:100%;
	background:#fff url(art/gradation-sm.gif) repeat-x top;
	display:block;
	overflow:hidden;
    position:relative;
}

#container3 {
	float:left;
	width:100%;
	background:#fff; /* white */
	position:relative;
	right:26%; /*was 29*/
}
#container2 {
	float:left;
	width:100%;
	background:#696; /* green */
	position:relative;
	right:48%;  /*was 45*/
}
#container1 {
	float:left;
	width:100%;
	background:#339; /* blue */
	position:relative;
	right:13%;
}
#col1 {
	float:left;
	width:11%; /* changed column gap from 4% total to 2% total */
	/*was 9%-if container is 13% then reduce width to allow for 2% gap on left&right side so 13-4=9% */
	position:relative;
	left:88%;  /*was 89*/
	overflow:hidden;
}
#col2 {
	float:left;
	width:13%; /* was 9% - changed column gap from 4% total to 2% total */  
	/* changed col width to allow for pics' right side to hang over white area */
	position:relative;
	left:90%; 
	/* originally 93% ---95% had pic in this column hanging over white area */
	overflow:hidden;
}
#col3 {
	float:left;
	width:44%;   
	position:relative;
	left:91%;  /* originally 95, before that it was 97% */
	padding-top:12px;
	padding-bottom:12px;	
	overflow:hidden;
}
#col4 {
	float:left;
	width:22%;  
	position:relative;
	left:95%; /* was 99, before that it was 101% */
	overflow:hidden;
}