/*******************/
/* GLOBAL DEFAULTS */
/*******************/

*{
  padding: 0px;
  margin: 0px;
}

strong {
  color: #333333;             /* Very dark gray */
}

body {
  text-align: center;         /* To simulate 'margin: 0 auto' in IE */
  font-size: 12px;    
  font-family: "Arial", helvetica, sans-serif;	
  color: #666666;
  background: #F9F9F7;       /* Light gray surrounding background */
  line-height: 150%;         /* Distance between lines of text */
}

html {
  height: 100%;
}
/**************************/
/* END of global defaults */
/**************************/


/*************/
/* OUTER box */
/*************/
#outer {
	/*width: 832px;*/
	width: 840px;
  height: 100%;
  margin: 0 auto;            /* Center OUTER within BODY */
	background: #fff;          /* Need this so left column goes all the way down */
}
/********************/
/* END of outer box */
/********************/


/*************/
/* INNER box */  
/*************/
#inner {
  padding-top: 13px;
  margin: 0 auto;            /* Center INNER within OUTER */
  height: 100%;
}
/********************/
/* END of inner box */
/********************/


/********************************************/
/* HEADER code (where page title/logo goes) */
/********************************************/
#header {
  text-align: left;          /* To simulate 'margin: 0 auto' in IE */
  margin: 0 auto;
  padding-bottom: 0px;
	width: 785px;
  height: 55px;
  background: #0000AA;       /* Blue background */
  color: #FFFFFF;            /* White text */
}

#header h1 {
  padding: 20px 0px 10px 20px;
  font-size: 23px;
  font-weight: bold;
  letter-spacing: -1px;
  color: #FFFFFF;
}
/**********************/
/* END of header code */
/**********************/


/*************/
/* MENU code */
/*************/
#menu {
  text-align: left;          /* To simulate 'margin: 0 auto' in IE */
  margin: 0 auto;	
	width: 785px;
  height: 55px;	
  background: #0000AA;       /* Dark blue */
}

#menu ul li {
  display: inline;           /* Displays menu without line breaks */
  line-height: 52px;
  padding-left: 3px;
}

#menu ul li.first {
  padding-left: 17px;
	border-left: 0px;
}

#menu ul li a {
  font-size: 12px;
  font-weight: bold;
  color: #FFFFFF;            /* White font (on blue background) */
  /* padding: 8px 10px 8px 10px; */
	padding: 8px 12px 8px 12px; 
}

#menu ul li a:hover {
  background: #FFFFFF;       /* White background when hover */
  color: #4A4A24;            /* Text becomes nearly black when hover */
  text-decoration: none;     /* Get rid of the underline when hovering */
}
/********************/
/* END of menu code */
/********************/


/*******************************************/
/* LEFTCOLUMN code (where series links go) */
/*******************************************/
#leftcolumn {
  text-align: left;          /* To simulate 'margin: 0 auto' in IE */
  margin: 0 auto;            /* Center leftcolumn in its container */  
	padding-left: 20px; 
  padding-top: 15px;
	width: 200px;             
	height: 100%;              /* Will grow to size of content */	 
	float: left;
	background-color: #ffffff; /* White background */
}

#leftcolumn h3 {
  font-size: 12pt;
	font-weight: bold;	
  color: #000000;	
  margin-bottom: 6px;
}

/* ?? Is there a way to get rid of the content tag? */
/*   When I try to get rid of it, the right column content goes to the bottom of the page */
#leftcolumn .content {
  margin-bottom: 10px;
  padding: 0px 0px 0px 15px;
  line-height: 22px;
  color: #666666;
}

#leftcolumn a {
  color: #555;               /* Link color */
}

#leftcolumn ul {
	list-style: none;          /* No bullets */
	margin-left: 0;
	padding-left: 1em;         /* These two lines give  */
	text-indent: -1em;         /*   me a hanging indent */        
	line-height: 16px;
}
	
#leftcolumn ul li {
  margin-bottom: 6px;        /* Place six pixels between links */
}	
/**************************/
/* END of leftcolumn code */
/**************************/


/***********************************************/
/* RIGHTCOLUMN code (where lists and images go */
/***********************************************/
#rightcolumn {
  text-align: left;          /* To simulate 'margin: 0 auto' in IE */
	width: 600px;
	/* width: 620px;*/
  margin: 0 auto;            /* Centers the content */
	padding-top: 15px;
  font-size: 11px;
  float: right;
  border-left: solid #00A 2px;  /* Blue border on the left */
	background-color: #ffffff; /* White background */	
}

#rightcolumn h3 {
  margin-bottom: 6px;
  padding: 0px 0px 5px 0px;
  font-size: 12pt;
	font-weight: bold;
  color: #656551;
  letter-spacing: -1px;
}

/* ?? Is there a way to get rid of this? */
#rightcolumn .content {
  padding: 0px 10px 0px 30px;
  margin-bottom: 10px;
  color: #000000;
}

/* This is used for the 'Full set ' lines */
#rightcolumn .content p {
  margin: 0 0 0 0;
	padding: 0 0 0 0;
}

#rightcolumn .content a {
  color: #8C8C73;            /* Link color */
}

#rightcolumn pre { 
  border-bottom: solid #00A 2px;  /* Border between the different series */
  margin: 10px 2px 10px 2px;
}
/***************************/
/* END of rightcolumn code */
/***************************/


/*********************************************************
 * SINGLECOLUMN code                                     *                                             
 *   This is used for the home page and series list page *
 *********************************************************/
#singlecolumn {
  text-align: left;          /* To simulate 'margin: 0 auto' in IE */
  width: 700px;
  float: left;
	padding: 20px 0 0 40px;
}

#singlecolumn p {
  margin-top: 0px;
  margin-bottom: 6px;
}

#singlecolumn h3 {
  position: relative;
  font-size: 16px;
  line-height: 25px;
  color: #656551;
  letter-spacing: -1px;      /* Moves letters closer together */
  margin: 0 0 0px 0;
	padding-bottom: 0px;
}

#singlecolumn ol {
	padding-left: 20px;
	line-height: 175%;
}
/****************************/
/* END of singlecolumn code */
/****************************/

/*********************************************************
 * BIGSINGLECOLUMN code                                  *                                             
 *   This is used for the home page and series list page *
 *********************************************************/
#bigsinglecolumn {
  text-align: left;          /* To simulate 'margin: 0 auto' in IE */
  width: 700px;
  float: left;
	padding: 20px 0 0 40px;
	font-size: 14px;
}

#bigsinglecolumn p {
  margin-bottom: 12px;
}

#bigsinglecolumn h3 {
  position: relative;
  font-size: 16px;
  line-height: 25px;
  color: #656551;
  letter-spacing: -1px;      /* Moves letters closer together */
  margin: 0 0 5px 0;
}

#bigsinglecolumn ol {
	padding-left: 20px;
	line-height: 175%;
}

#bigsinglecolumn .hanging_indent {
text-indent: -10px;
padding-left: 10px;
/* padding-left: 6px; */
/* margin-top: 0px; */
/* padding-top: 0px; */
}
/*******************************/
/* END of bigsinglecolumn code */
/*******************************/


/*****************************************/
/* FOOTER code for copyright information */
/*****************************************/
#footer
{
  padding-top: 20px;
  font-size: 10px;
  clear: both;               /* No floating elements to either left or right */
  height: 33px;
  text-align: center;
  color: #A8A8FF; 
}
/**********************/
/* END of footer code */
/**********************/


/******************************************************/
/* Special code for the Sportscaster card listing     */
/*   It has it's own separate definitions because the */
/*   page needs to be extra wide                      */
/******************************************************/
#sc_singlecolumn {
  text-align: left;          /* To simulate 'margin: 0 auto' in IE */
  width: 800px;
  color: #000;               /* Black text */
}

#sc_singlecolumn p {
  padding-left: 20px;
}

#sc_singlecolumn h3 {
  font-size: 16px;
  line-height: 25px;
  color: #656551;            /* Dark gray */
	padding-left: 20px;
	padding-top: 15px;
}

#sc_singlecolumn pre {
  text-align: left;          /* To simulate 'margin: 0 auto' in IE */
  margin-top: 10px;
  margin-bottom: 10px;
  padding-left: 24px;
}

#sc_singlecolumn h4 {
  font-size: 14px;
	font-weight: bold;
	margin-top: 20px;
	margin-bottom: 0px;
	padding-left: 20px;
}

#sc_singlecolumn a {
  color: #8C8C73;
}

/* The outer box also needs to be extra wide for the Sportscaster listing */
#sc_outer {
  width: 1100px;
  height: 100%;
  margin: 0 auto;
  background: #FFFFFF;       /* Light gray */
}
/**********************************************/
/****** END of special Sportscaster code ******/
/**********************************************/


/************************************/
/* Special code for Checklist pages */
/************************************/

#checklist {
  text-align: left;          /* To simulate 'margin: 0 auto' in IE */
  width: 650px;
  float: left;
  margin-top: 10px;
  padding-left: 20px;
}

#checklist pre {
  margin: 20px 0px 10px 4px;
}

#checklist h3 {
  position: relative;
  top: 4px;
  font-size: 16px;
  line-height: 25px;
  color: #656551;
}

#checklist h4 {
  position: relative;
  top: 4px;
  font-size: 12px;
  line-height: 16px;
  color: #656551;
}

#checklist a {
  color: #8C8C73;
}
/*******************************************/
/****** END of special Checklist code ******/
/*******************************************/


/****************************************/
/***** Code for large pop-up images *****/
/****************************************/
/*Credits: Dynamic Drive CSS Library      */
/*URL: http://www.dynamicdrive.com/style/ */

.thumbnail{
position: relative;
z-index: 0;
}

.thumbnail:hover{
background-color: transparent;
z-index: 50;
}

.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: white;
padding: 5px;
left: -1000px;
border: 1px solid gray;
visibility: hidden;
color: black;
text-decoration: none;
}

.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}

.thumbnail:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
top: -50;
left: 0px; /* position where enlarged image should offset horizontally */
/* left: -100px; position where enlarged image should offset horizontally */

}

/***************************************/
/***** End code for pop-out images *****/
/***************************************/