/*****************
My Columns Nav Links Experiment
First, set the style for each column.
******************/
#columnWrapper {
	height: 316px;
	position: relative;
	padding-top: 5px;
	padding-right: 0;
	padding-bottom: 0px;
	padding-left: 0;
	border-top-color: #CCCCCC;
	border-right-color: #CCCCCC;
	border-bottom-color: #CCCCCC;
	border-left-color: #CCCCCC;
	margin: 0;
} 
.column {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	width: 153px;
}
.column p {
	font-size: 10px;
	color: #000000;
	margin-top: 4px;
	padding-left: 5px;
	margin-bottom: 3px;
}

/*========== List within the column ==============*/
.column ul {
	font-family: verdana, arial, sans-serif;
	font-size: 10px;
	color: #000000;
	list-style: none;
	padding:0;
	margin: 0;
}
.column li {
	font-weight: bold;
	color: #0b1966;
	margin:0;
	padding-top: 2px;
	padding-right: 4px;
	padding-bottom: 0px;
	padding-left: 1px;
}
.column li a {
	text-decoration: none;
	display: block;
	}
		
.column  ul li {
	list-style: none;
	line-height: 11px;
	padding-bottom: 1px;
}
.column ul li a {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-weight: normal;
	color: #000000;
	font-size: 10px;
	text-decoration: none;
	display: block;
	padding-top: 2px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 10px;
	background-image: url(../images/list_bulletosher.png);
	background-repeat: no-repeat;
	background-position: 3px 6px;
}
.column li a:hover {
	text-decoration: underline; 
}
/*========== End of list within the column ==============*/	

.column h2 {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	margin-bottom: -4px;
}

#colA h2 a {
	display: block;
	color: #0b1966;
	text-decoration: none;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	background-color: #bbd0e7;
	padding-top: 3px;
	padding-right: 5px;
	padding-bottom: 5px;
	padding-left: 4px;
}

#colA h2 a:hover {
	color: #fff;
	background-color: #4476af;
}
#colB h2 a {
	display: block;
	color: #0b1966;
	text-decoration: none;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	background-color: #bbd0e7;
	padding-top: 3px;
	padding-right: 5px;
	padding-bottom: 5px;
	padding-left: 4px;
}

#colB h2 a:hover {
	color: #fff;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	background-color: #4476af;
}
#colC h2 a {
	display: block;
	color: #0b1966;
	text-decoration: none;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	background-color: #bbd0e7;
	padding-top: 3px;
	padding-right: 5px;
	padding-bottom: 5px;
	padding-left: 4px;
}

#colC h2 a:hover {
	color: #fff;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	background-color: #4476af;
}
#colD h2 a {
	display: block;
	color: #0b1966;
	text-decoration: none;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	background-color: #bbd0e7;
	padding-top: 3px;
	padding-right: 5px;
	padding-bottom: 5px;
	padding-left: 4px;
}

#colD h2 a:hover {
	color: #fff;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	background-color: #4476af;
}
#colE h2 a {
	display: block;
	color: #0b1966;
	text-decoration: none;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	background-color: #bbd0e7;
	padding-top: 3px;
	padding-right: 0px;
	padding-bottom: 5px;
	padding-left: 4px;
}

#colE h2 a:hover {
	color: #fff;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	background-color: #4476af;
}
#colF h2 a {
	display: block;
	color: #0b1966;
	text-decoration: none;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	background-color: #bbd0e7;
	padding-top: 3px;
	padding-right: 5px;
	padding-bottom: 5px;
	padding-left: 4px;
}

#colF h2 a:hover {
	color: #fff;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	background-color: #4476af;
}
#colG h2 a {
	display: block;
	color: #0b1966;
	text-decoration: none;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	background-color: #bbd0e7;
	padding-top: 3px;
	padding-right: 5px;
	padding-bottom: 5px;
	padding-left: 4px;
}

#colG h2 a:hover {
	color: #fff;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	background-color: #4476af;
}
#colH h2 a {
	display: block;
	color: #0b1966;
	text-decoration: none;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	background-color: #bbd0e7;
	padding-top: 3px;
	padding-right: 5px;
	padding-bottom: 5px;
	padding-left: 4px;
}

#colH h2 a:hover {
	color: #fff;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	background-color: #4476af;
}


/*========== List within the column ==============*/	
.columnpdf ul {
	font-family: verdana, arial, sans-serif;
	font-size: 10px;
	color: #000000;
	list-style: none;
}

.columnpdf  ul li {
	list-style: none;
	line-height: 11px;
	padding-top: 4px;
	display: block;
}
.columnpdf li {
	font-weight: bold;
	color: #0b1966;
	padding-top: 2px;
	padding-right: 4px;
	padding-bottom: 0px;
	padding-left: 2px;
	display: block;
}
.columnpdf li a { 
text-decoration: none;
display: block;
}
.columnpdf ul li a {
	font-family: Verdana,Arial,Helvetica,sans-serif;
	font-weight: normal;
	color: #000000;
	font-size: 10px;
	text-decoration: none;
	display: block;
	background-image: url(../images/OsherSpr12_Sched.jpg);
	background-repeat: no-repeat;
	background-position: 3px 2px;
	height: 55px;
	padding-top: 2;
	padding-right: 0;
	padding-bottom: 0;
	padding-left: 42px;
}
.columnpdf li a:hover {
text-decoration: underline;
}	
/*========== End of list with catalog within the column ==============*/	


/*========== List spacing within the columns ==============*/
.headerspacebtm {
	margin-bottom: 5px;
}
.headerspacetop {
	margin-top: 25px;
}
/*========== Now we POSITION the columns ==============*/
#colA {
	position: absolute;
	top: 7px;
	left: 6px;
	width: 190px;
	height: 149px;
	background-color: #dfe9f5;
}
#colB {
	position: absolute;
	top: 7px;
	left: 205px;
	width: 190px;
	height: 149px;
	background-color: #dfe9f5;
}
#colC {
	position: absolute;
	top: 7px;
	left: 404px;
	width: 190px;
	height: 149px;
	background-color: #dfe9f5;
}
#colD {
	position: absolute;
	top: 7px;
	left: 602px;
	width: 190px;
	height: 149px;
	background-color: #dfe9f5;
}
#colE {
	position: absolute;
	top: 7px;
	left: 641px;
	width: 154px;
	height: 133px;
	background-color: #dfe9f5;
}
#colF {
	position: absolute;
	top: 163px;
	left: 6px;
	width: 152px;
	height: 155px;
	background-color: #dfe9f5;
}
#colG {
	position: absolute;
	top: 163px;
	left: 164px;
	width: 153px;
	height: 155px;
	background-color: #dfe9f5;
}
#colH {
	position: absolute;
	top: 163px;
	left: 323px;
	width: 153px;
	height: 155px;
	background-color: #dfe9f5;
}

/*========Here is the last column======*/
#spotcolumn {
	position: absolute;
	top: 158px;
	left: 482px;
	width: 314px;
	height: 159px;
	background-image: url(../images/spotbkgrnd_osher.jpg);
	background-repeat: no-repeat;
	font-family: Arial, Helvetica, sans-serif;
}
#spotcolumn h1 {
	color: #4476af;
	font-family: "Eurostile", Arial, Helvetica, sans-serif;
	font-size: 18px;
	line-height: 18px;
	font-weight: bold;
	padding-top: 11px;
	padding-left: 9px;
	padding-bottom: 1px;
}
#spotcolumn h2 {
	color: #1F60A9;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	line-height: 14px;
	font-weight: bold;
	padding-left: 9px;
	padding-top: 4px;
}
#spotcolumn p {
	font-family: verdana, arial, sans-serif;
	font-size: 10px;
	line-height: 12px;
	font-weight: normal;
	color: #0b1966;
	padding-left: 9px;
	padding-right: 8px;
	padding-top: 3px;
	text-decoration: none;
	padding-bottom: 4px;
}
#spotcolumn a:link,#spotcolumn a:visited {
	color: #0b1966;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	padding-left: 8px;
	font-weight: bold;
	background-image: url(../images/list_bulletosher.png);
	background-repeat: no-repeat;
	background-position: 1px 3px;
	display: block;
}	
#spotcolumn a:hover {        
	text-decoration: underline;
}
.learn-more {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	line-height: 12px;
	color: #003366;
	font-weight: bold;
	padding-top: 5px;
	margin-top: 3px;
}
.learn-more a:link {
	color: #993300;
	font-weight: bold;
}
/* Using floated elements and a clear float class is a common method to accomplish multiple column tableless layouts. If floated elements are used without being cleared the elements following will wrap around the floated element. This class should be applied to an element after the last floated element and before the close of the container with floated elements. */
#container .clearFloat {
  clear: both;
  display: block;
}