/*BCFHOF-styles */
/*--------------------------------------------------
Basic Style Sheet for IE7, IE8, Safari, Firefox
Version:1
Author: Kathy Traeger
email: kathy@graphicangel.com
website: http://www.graphicangel.com/
---------------------------------------------------*/


body {
	text-align: center;
	color: #000; background: #ccc url(images/background_1.gif) repeat;
	font-family: geneva, arial, helvetica, sans-serif;
	margin: 0 0 0 0px;
	padding: 0px 0 0 0;
	
}  

#wrapper {
  width: 950px;
  margin: 0 auto;
  text-align: left;
  color: #000; background:#fff;
}
#wrapper2 {
  margin: 0 auto;
  text-align: left;
  height: 900px;
  color: #000; background: transparent url(images/band.jpg) repeat-x bottom left !important;
}

#header {
	height: 181px;
	color: #000; background: #fff url(images/BCFHOF_top_bar_rev3.gif) no-repeat;
}
#tagline {
	color: #093; background: transparent;
	font: 26px/22px normal, normal, geneva, arial, helvetica, sans-serif;
	font-weight: bold;
	text-align: center;
	margin: 5px 30px 15px 30px;/* top right bottom left */
	padding: 8px 0 8px 0;
}

h1 {
	color: #093; background: transparent;
	font: 30px/30px normal, bold, geneva, arial, helvetica, sans-serif;
	text-align: left;
	margin: 0 auto;
	padding: 8px 0;
}
 h2 {
	color: #093; background: transparent;
	font: 30px/30px normal, bold, geneva, arial, helvetica, sans-serif;
	text-align: left;
	margin: 0 auto;
	padding: 8px 0;
}

h3 {
	color: #093; background: transparent;
	font: 22px/24px italic, bold, geneva, arial, helvetica, sans-serif;
	text-align: left;
	margin: 0 20px 0 30px;/* top right bottom left */
	padding: 0px;
	
}
h4 {
	color: #093; background: transparent;
	font: 20px/22px normal, normal, geneva, arial, helvetica, sans-serif;
	font-weight: bold;
	text-align: left;
	margin: 5px 35px 15px 35px;/* top right bottom left */
	padding: 8px 0;
}
h5 {
	color: #093; background: transparent;
	font: 28px/30px italic, bold, geneva, arial, helvetica, sans-serif;
	text-align: center;
	margin: 0 20px 0 30px;/* top right bottom left */
	padding: 0px;
	
}
h6 {
	color: #093; background: transparent;
	font: 14px/18px italic, bold, geneva, arial, helvetica, sans-serif;
	text-align: left;
	margin: 0 20px 0 55px;/* top right bottom left */
	padding: 0px;
	
}
h7 {
	color: #fff; background: transparent;
	font: 10px/12px nornal, bold, geneva, arial, helvetica, sans-serif;
	text-align: center;
	margin: 5px 0 0 0;/* top right bottom left */
}

p {
  	font: 14px/20px normal, normal, geneva, arial, helvetica, sans-serif;
	text-align: left;
	color: #666; background: transparent;
	margin: 30px 0 auto;
}
/* #content used in right column only and includes green left hand border and watermark */
#video {
color:#fff; background: #000 url(video/video.jpg) no-repeat;
width:486px;
height:389px;
margin: 0 0 0 30px;

}
#video2 {
color:#fff; background: transparent;
width:478px;
height:269px;
margin: 15px 0 0 50px;


}
#caption-video {
	font: 8px/8px normal, normal, geneva, arial, helvetica, sans-serif;
	text-align: left;
	margin: 10px 0 0 30px;
	color: #000; background: transparent;
}

#content {
	width: 699px;
	float: right;
	margin: 0 0 0 0;
	color: #000; background: #fff url(images/watermark.gif) no-repeat;
	padding-top: 20px;
	border-left: 1px #093 solid;
	position: relative;
	display: inline;
}
#content2 {
	width: 570px;
	margin: 0 50px 0 0;

}
#content4 {
	width: 550px;
	margin: 0 50px 0 0;

}
.content3 {
	width: 600px;
	margin: 0 50px 0 0px;

}
#content ul {
	font-size: 14px;
	text-align: right;
	padding: 10px 0 10px 0;/* top right bottom left */
	margin: 0 46px 54px 0;/* top right bottom left */
	list-style: none;
	color: #093; background: transparent; 
	border-top: 1px #093 solid;
	border-bottom: 1px #093 solid;
}
#content p {
	margin: 0 90px 0 30px;/* top right bottom left */
}
#content h1 {
	color: #093; background: transparent;
	font: 30px/30px normal, bold, geneva, arial, helvetica, sans-serif;
	text-align: left;
	margin: 0 80px 0 30px;/* top right bottom left */
	padding: 8px 0;
}
#content h2 {
	color: #093; background: transparent;
	font: 22px/24px normal, bold, geneva, arial, helvetica, sans-serif;
	text-align: left;
	margin: 0 80px 0 15px;/* top right bottom left */
	padding: 0 10px 0 15px;/* top right bottom left */
}
#content h3 {
	color: #093; background: transparent;
	font: 16px/16px normal, bold, geneva, arial, helvetica, sans-serif;
	text-align: left;
	margin: 0 80px 0 15px;/* top right bottom left */
	padding: 0 10px 0 15px;/* top right bottom left */
}

#content-mission {
	font: 18px/24px normal, normal, geneva, arial, helvetica, sans-serif;
	margin: 0 30px 0 30px;/* top right bottom left */
	color: #093; background: transparent; 
}
.content-arrows {
	font: 12px/12px normal, normal, geneva, arial, helvetica, sans-serif;
	margin: 25px 0px 0 0px;/* top right bottom left */
	color: #093; background: transparent;
	text-align: center; 
}
.content-filler {
	width: 699px;
	height: 75px; /* to give me an even space at bottom of box */
	margin: 20px 0 0 0;
	color: #000; background: transparent;
	}
.content-filler2 {
	width: 699px;
	height: 300px; /* to give me an even space at bottom of box */
	margin: 20px 0 0 0;
	color: #000; background: transparent;
	}
.content-filler3 {
	width: 699px;
	height: 550px; /* to give me an even space at bottom of box */
	margin: 0px 0 0 0;
	padding: 0px 0 0 0;
	color: #000; background: transparent;
	}
.content-filler4 {
	width: 699px;
	height: 200px; /* to give me an even space at bottom of box */
	margin: 0px 0 0 0;
	padding: 0px 0 0 0;
	color: #000; background: transparent;
	}
.content-filler5 {
	width: 699px;
	height: 700px; /* to give me an even space at bottom of box */
	margin: 0px 0 0 0;
	padding: 0px 0 0 0;
	color: #000; background: transparent;
	}



/* floating images*/
.floatleft {
	float: left;
	width: auto;
	clear: both;
	margin: 0 0px 0 0px;
	padding: 0 20px 0 30px;
}
.floatleft2 {
	float: left;
	width: auto;
	clear: both;
	margin: 0px 0px 0 0px;
	padding: 35px 0px 0 90px;
}
.floatlefttop {
	float: left;
	width: auto;
	clear: both;
	margin: 0 20px 0 11px;
}
.caption-directors {
	font: 12px/14px normal, normal, geneva, arial, helvetica, sans-serif;
	text-align: center;
	margin: 10px 0 0 0;
	color: #093; background: transparent;
}
.caption-inductees {
	font: 11px/12px normal, normal, geneva, arial, helvetica, sans-serif;
	text-align: center;
	margin: 10px 0 0 0;
	color: #093; background: transparent;
}
.floatright {
	float: right;
	padding: 10px;
	margin: 20px 80px 30px 10px;
	width: 300px;
	clear: both;
}
.floatright2 {
	float: right;
	padding: 0px 10px 0 0;
	margin: 0px 90px 0px 0px;
	width: 200px;
	clear: both;
}
.floatright3 {
	float: right;
	padding: 0px 0 0 0;
	margin: 25px 30px 0px 10px;
	width: 200px;
	clear: both;
}
.thumbnail{
	float:left;
	width: 103px;
	padding: 7px;
	}
.thumbnail2{
	float:left;
	width: 80px;
	padding: 7px;
	}
.thumbnail3{
	float:left;
	width: 150px;
	height: 130px;
	padding: 7px;
	text-align: center;
	
	}
/* floating images within a content paragraph */
img.right {
	float: right;
	padding: 20px 20px 60px 40px;
	margin: 0px;
	clear: both;
	
}
img.top {
	float: left;
	padding: 20px;
	margin: 0;
	margin-left: 11px;
	clear: both;
} 
/* sidebar is left column */
#sidebar {
	width: 250px;
	float: left;
	margin: 0 0 0 0px;
	color: #666; background: transparent;
	padding: 42px 0 0 0;/* top right bottom left */
	text-align: center;
	clear: both;
	overflow: hidden;
}
#sidebar h2{
	color: #093; background: transparent;
	font: 28px/30px normal, normal, geneva, arial, helvetica, sans-serif;
	text-align: center;
	margin: 0 15px 0 0;/* top right bottom left */
	padding: 15px 0 0 25px;/* top right bottom left */
}
#sidebar h3{
	color: #093; background: transparent;
	font: 14px/16px normal, bold, geneva, arial, helvetica, sans-serif;
	text-align: center;
	margin: 0 15px 0 0;/* top right bottom left */
	padding: 15px 0 0 25px;/* top right bottom left */
}
.thanks {
	color: #093; background: transparent;
	font: 22px/28px normal, normal, geneva, arial, helvetica, sans-serif;
	text-align: left;
	margin: 5px 35px 15px 45px;/* top right bottom left */
	padding: 8px 0;
}

/* screen box with rounded corners in sidebar */
/* Note to self: issues getting the gif element to work on the top and bottom of bax corners. Discovered for this layout I only wanted a bottom corner curl, but must reslove for other sites going forward. Jpeg works because background color is white but won't work for tinted or colored panels.*/
.box{
	width: 158px;
	color: #093; background: #eaf5ea url(images/bottom.jpg) no-repeat left bottom;
	margin: 5px 46px 0 46px;/* top right bottom left */
}
.box2{
	width: 500px;
	margin: 0 20px 0 13px;/* top right bottom left *//* top right bottom left */
}
.box3{
	width: 175px;
	color: #093; background:transparent;
	margin: 0px 36px 0 36px;/* top right bottom left */
}
.box4{
	width: 665px;
	margin: 0 20px 0 13px;/* top right bottom left *//* top right bottom left */
}
.box p{
	color: #093; background: #eaf5ea;
	font: 12px/16px normal, normal, geneva, arial, helvetica, sans-serif;
	text-align: left;
	margin: 0 5px auto;/* top right bottom left */
	padding: 15px 0 0 15px;/* top right bottom left */
}
.box h1{
	color: #093; background: #eaf5ea;
	font: 12px/18px normal, normal, geneva, arial, helvetica, sans-serif;
	text-align: left;
	margin: 0 15px 0 0;/* top right bottom left */
	padding: 15px 0 0 25px;/* top right bottom left */
}
.box3 h1{
	color: #093; background: transparent;
	font: 28px/30px normal, bold, geneva, arial, helvetica, sans-serif;
	text-align: center;
	margin: 0 0px 0 0;/* top right bottom left */
	padding: 0px 0 0 0px;/* top right bottom left */
}
/* table styling for alumni section */ 
table {
  border-collapse: collapse;
  width: 600px;
  border: 1px solid #ccc;
  margin: 0 0 0 50px;
  text-align: left;
}

th {
color: #fff; background: #000;
}

th, td {
  padding: 4px 10px;
  font-size: 80%;
}

.captions {
  	color: #666; background: transparent;
	font: 12px/14px normal, normal, geneva, arial, helvetica, sans-serif;
	text-align: left;
	margin: auto;
	padding: 8px 0;
}  

col {
  border-right: 1px solid #ccc;
  margin: 0 auto;
}
thead {
  border-top: 1px solid #000;
  border-bottom: 1px solid #000;
}
.odd {
	color: #000; background:#e0e8db;
}

/* football heroes page */ 
.heroes {
	color: #000; background: #eaf5ea;
	border: 0px;
	margin: 15px 15px 0 15px; /* top right bottom left */
	width: 510px;
}
.heroes img {
	float: left;
	padding: 15px 10px 10px 5px;/* top right bottom left */
	margin: 15px 0 0 11px;
	clear: both;
}
.heroes p {
	margin-top: 25px;
	float: inherit;
	width: auto;
}
.clear {
	clear: both;
}
/* end table styling for alumni section */ 

/* new section Rosemary helped with */ 
#footer{
	text-align: center;
	width: 950px;
	color: #000;
	background: #093;
}
#footer p {
   font: 11px/13px normal, normal, geneva, arial, helvetica, sans-serif;
   text-align: center; 
   color: #fff;  background: transparent;
   margin: 0px 0 0 0;
   padding: 5px 0 5px 0;
} 
#footer a:hover {
	color: #fff; background: transparent;
	text-decoration: none;
	outline: none; /* gets rid of dotted border in firefox */
}
/* end of new section Rosemary helped with */   
/* form styling section */

form {
  font-size: 11px;
  width: 425px;
} 

fieldset {
  margin: 10px 0;
  padding: 10px 0;
  text-align: left; 
  border: 0 solid transparent;
  
}
legend {
  font: 16px/18px normal, normal, geneva, arial, helvetica, sans-serif;
  margin: 30px 0 0 30px;
  text-align: left; 
  color: #093; background: transparent;
}    
label {
	display:inline;
}
#remember-me label {
  float: left;
  width: 400px;
}
input {
  width: 400px;
} 

input[type="text"], textarea {
  width: 400px;
}
input.radio, input.checkbox, input.submit {
  width: auto;
}  
input.radio {
  float: left;
  margin-right: 40px;
}  
input:focus, textarea:focus {
  color: #000; background: #eaf5ea;
} 
textarea {
	width: 400px;
	height: 150px;
}  
#submit {
  color: #fff; background: #093;
  text-align: center; 
  width: 80px;
} 
#reset {
  color: #fff; background: #093;
  text-align: center; 
  width: 80px;
}
.required {
  font-size: 11px;
  color: #093; background: transparent;
}
fieldset#Category {
	margin: 20px 0 0 0px;
	padding: 0;
	border: 0 solid transparent;
	color: #fff; background: transparent;
}
#Category h2 {
	width: 75px;
	float: left;
	font: 16px/22px normal, normal, geneva, arial, helvetica, sans-serif;
}
#Category p {
	margin: 5px 0 0 15px;
}
#Category div {
	width: 95px;
	float: left;
}
.clear { 
	clear: both;
}
#Category label {
	width: 200px;
	float: none;
	display: inline;
}
   
/* standard links in LVHA order** however note that Andy Budd in the Css Mastery book says that he recommends LAHV*/ 
a:link {
	color: #000; background: transparent;
	text-decoration: none;
	font-style: normal;
	font-weight: normal;
}

a:visited {
	color: #000; background: transparent;
	font: 12px/20px normal, normal, geneva, arial, helvetica, sans-serif;
	text-decoration: none;
	outline: none; /* gets rid of dotted border in firefox */
}

a:hover {
	color: #093; background: transparent;
	text-decoration: none;
}
a:active {
	color: #609; background: transparent;
	text-decoration: none;
	outline: none; /* gets rid of dotted border in firefox */
}
#credits {
	margin: 0 0 0 0;
	padding: 0;
	font: 13px/16px normal, normal, arial, helvetica, sans-serif;
	clear: both;
	color: #fff; background: transparent;
	text-align: center;
	height: 50px;
}