@charset "UTF-8";

/*
colors
.pageBarBodyText a {
    color: #4064b0;
}

.pageBarBodyText a:hover {
    color: #ffaf1f;
}
*/

/* All the main boxes in the site go in order below the container id. */
#container {
	width: 1024px;
	margin-top: 0px;
	margin-right: auto;
	margin-left: auto;
}

/* The signin tab colors can be changed in the header.psd file on the Signin Tab layer. The header.psd file contains the signinTab, banner and nav bar tabs. All were cut into slices. Font size and font color can be changed int he signinTab_text class. */
#signinTab {
	background-image: url(images/sign_in_tab.jpg);
	background-repeat: no-repeat;
	margin: 0px;
	padding: 0px;
	width: 1024px;
	height: 27px;
}
.signinTab_text {
	color: #333333;
	height: 20px;
	width: 240px;
	float: right;
	font-size: 10pt;
	font-family: Arial, Helvetica, sans-serif;
	text-align: center;
	margin: 0px auto;
	padding-top: 6px;
	padding-right: 25px;
}
.signinTab_text a {
	color: #000000;
}
.signinTab_text a:hover {
	color: #FFFFFF;
}

/* The header colors can be changed in the header.psd file. The "banneer" layer contains a solid color and the there is layer on of top of it called "wave" than can also be adjusted if needed. Header font color can be changed in the header_text class. */
#header {
	height: 140px;
	width: 1024px;
	background-image: url(images/banner.jpg);
	background-repeat: no-repeat;
}
.header_text {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 36pt;
	color: #FFFFFF;
	float: left;
/*	width: 600px;
	margin: 0px;
	padding-top: 65px;
	padding-left: 25px;
*/
	padding-top: 10px;
	padding-left: 15px;
}

.header_text img{
	border: 0px;
}

.header_text a {
	text-decoration: none;
	color: #FFFFFF;
}

.header_text a:visited {
	text-decoration: none;
	color: #FFFFFF;
}


/* The nav bar can be changed in the header.psd file. There are 2 folders in the psd file for the nav bar. One is the over state buttons. I've made 6 buttons, but only placed 2 in the DW file for now. Colors and tab names will have to be changed in the PSD file since I created rollovers with them in Dreamweaver. There is a nav_right_spacerFor2pages.jpg file that contains a tiny bit of the shadow from underneath the banner. This jpg goes to the right of the current nav bar tabs. If you add more tabs, you'll need to recreate that spacer. You'll see my slices in the psd file. */
#navbar {
	height: 32px;
}

.navbarTabs {
	float: left;
	width: 107px;
	height: 32px;
	background-image: url(images/tab.jpg);
	background-repeat: no-repeat;
}

.navbarTabs_Text {
	font-size: 12pt;
	font-family: Arial, Helvetica, sans-serif;
	color:#000000;
	text-align: center;
	padding-top: 3px;
}

.navbarTabs_Text a {
	color:#000000;
	text-decoration: none;
}

.navbarTabs_Text a:hover {
	color: #ffaf1f;
}


#navbarTop {
	height: 32px;
}

.navbarTopTabs {
	float: left;
	width: 137px;
	height: 32px;
	background-image: url(images/toptab.jpg);
	background-repeat: no-repeat;
}

.navbarTopTabs_Text {
	font-size: 12pt;
	font-family: Arial, Helvetica, sans-serif;
	color:#000000;
	text-align: center;
	padding-top: 9px;
}

.navbarTopTabs_Text a {
	color:#000000;
	text-decoration: none;
}

.navbarTopTabs_Text a:hover {
	color: #ffaf1f;
}


/* Here is where all the main content begins. */
#content {
	width: 1024px;
}

/* Streaming Event Box font color and size can be changed in the class below. The colors of the box can be edited as needed in the streamingEventBox.psd file. I placed a white box in there for now until you're ready to add your video. */
.streamingEventBox {
	float: left;
	height: 460px;
	width: 480px;
	padding: 0px;
	margin: 0px;
	background-image: url(images/streamingEventBox.jpg);
	background-repeat: no-repeat;
}
.streamingEventsHeading {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14pt;
    color: #FFFFFF;
    text-align: left;
    height: 60px;
    width: 440px;
    padding-top: 22px;
    padding-left: 15px;
    margin: 0px;
}
/*
.streamingEventsHeading {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14pt;
	color: #FFFFFF;
	text-align: left;
	height: 60px;
	width: 440px;
	padding-top: 22px;
	padding-left: 15px;
	margin: 0px;
}
*/
.streamingEventWMP {
 	padding-left: 80px;
	padding-top: 3px;
}

/* Chat box left empty as requested. Colors to box can be changed in the chatBox.psd file. Font color and size can be changed in the chatBoxHeading class below. */
.chat {
	padding: 0px;
	float: left;
	height: 460px;
	width: 330px;
	margin: 0px;
	background-image: url(images/chatBox.jpg);
	background-repeat: no-repeat;
}
.chatBoxHeading {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14pt;
	color: #FFFFFF;
	text-align: left;
	height: 25px;
	width: 300px;
	padding-top: 17px;
	padding-left: 15px;
	margin: 0px;
}

/* Customizable box for Main School Page. Based off of Chat class. The background is the same as chat.psd. Colors to box can be changed in the chatBox.psd file. Font color and size can be changed in the customizableBoxHeading class below. */
.customizable {
	padding: 0px;
	float: left;
	height: 460px;
	width: 330px;
	margin: 0px;
	background-image: url(images/chatBox.jpg);
	background-repeat: no-repeat;
}
.customizableBoxHeading {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14pt;
	color: #FFFFFF;
	text-align: left;
	height: 25px;
	width: 300px;
	padding-top: 17px;
	padding-left: 15px;
	margin: 0px;
}
.customizableBoxText {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12pt;
	color: #FFFFFF;
	padding: 10px;
	height: 390px;
	width: 300px;
	margin-right: auto;
	margin-left: auto;
}

.customizableBoxText a {
    color: #FFFFFF;
}

.customizableBoxText a:hover {
    color: #FFFF00;
}

/* School Logo */
.logo {
	margin: 0px;
	float: right;
	height: 270px;
	width: 188px;
	background-image: url(images/logo.jpg);
	background-position: center top;
	background-repeat: no-repeat;
}
.logoHeading {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14pt;
	color: #FFFFFF;
	text-align: left;
	height: 25px;
	width: 150px;
	padding-top: 14px;
	padding-left: 15px;
	margin: 0px;
}
.logo img {
	padding-top: 25px;
	padding-left: 20px;
}

/* Stream Sponsor */
.sponsor {
	margin: 0px;
	float: right;
	height: 270px;
	width: 188px;
	background-image: url(images/logo.jpg);
	background-position: center top;
	background-repeat: no-repeat;
}
.sponsorHeading {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14pt;
	color: #FFFFFF;
	text-align: left;
	height: 25px;
	width: 150px;
	padding-top: 14px;
	padding-left: 15px;
	margin: 0px;
}
.sponsor img {
	padding-top: 5px;
	padding-left: 7px;
}
.sponsorText {
	padding-top: 5px;
	text-align: center;
	color: #FFFFFF;
	margin-left: 5px;
	margin-right: 5px;
}
.sponsorText a {
	color: #000000;
}
.sponsorText a:hover {
	color: #FFFFFF;
}


/* The ads box colors can be edited in the ads.psd file. I created classes for the actual Heading of the box (adsHeading), the title of the ad (adTitle),  and the website (adWebsite). The normal text for the sponsor ads is the overall font of the site which is set in the body tag style. */ 
.ads {
	margin: 0px;
	padding: 0px;
	float: right;
	height: 708px;
	width: 210px;
	background-image: url(images/ads.jpg);
	background-position: center top;
	background-repeat: no-repeat;
	height: 713px;
	width: 210px;
}
.adsHeading {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14pt;
	color: #FFFFFF;
	text-align: left;
	height: 25px;
	width: 150px;
	padding-top: 17px;
	padding-left: 15px;
	margin: 0px;
}
.adsText {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10pt;
	color: #000000;
	padding: 10px;
	width: 170px;
	margin-right: auto;
	margin-left: auto;
}
.adTitle {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10pt;
	font-weight: bold;
	color: #000000;
	text-decoration: underline;
}
.adWebsite {
	color: #333333;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10pt;
}


/* The upcomingEvents box features 5 icons. Haven't added any kind of scroll feature. I can only get a vertical scroll bar in there but that doesn't look right. Room has been left for a horizontal scroll underneath the icons. The icons are placed inside the upcomingEventsIconsContainer. The heading font and size can be changed in the upcomingEventsHeading class. */
.upcomingEvents {
	height: 275px;
	width: 830px;
	clear: left;
	margin: 0px;
	padding: 0px;
	background-image: url(images/upcomingEventsBar.jpg);
	background-repeat: no-repeat;
}
.upcomingEventsHeading {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14pt;
	color: #FFFFFF;
	text-align: left;
	height: 25px;
	width: 800px;
	padding-top: 17px;
	padding-left: 15px;
	margin: 0px;
}
.upcomingEventsIconsContainer {
	margin: 10px;
	height: 205px;
	background-position: center;
	text-align: center;
	width: 790px;
	padding-left: 15px;
	overflow: auto;
}

/* page bar */
.pageBarTop {
	width: 1024px;
	height: 45px;
	clear: left;
	margin: 0px;
	background-image: url(images/pageBarTop.png);
	background-repeat: no-repeat;
}

.pageBarText {
	padding: 16px 0px 0px 15px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14pt;
	color: #000000;
}

.pageBarBody {
	width: 1024px;
	color: #000000;
	background-image: url(images/pageBarBody.png);
}

.pageBarBodyText {
	padding-left: 15px;
	padding-right: 15px;
	padding-top: 5px;
	width: 965px;
	height: 500px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14pt;
	color: #000000;
	overflow: auto;
	margin-left: 10px;
}

.pageBarBodyText p {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12pt;
}

.pageBarBodyText ol {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12pt;
}

.pageBarBodyText a {
    color: #4064b0;
}

.pageBarBodyText a:hover {
    color: #ffaf1f;
}

.pageBarBodyText td {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12pt;
}

.pageBarBottom {
	width: 1024px;
	height: 23px;
	background-image: url(images/pageBarBottom.png);
	background-repeat: no-repeat;
}

#userListTable {
	width: 1500px;
}

.userListTable table {
	width: 1500px;
	border-style: solid;
	border-width: 1px;
	border-spacing: 0px;
	border-color: #FFFFFF;
	border-collapse: collapse;
}

.userListTable th {
	border-style: solid;
	border-width: 1px;
}

.userListTable td {
	border-style: solid;
	border-width: 1px;
}

#sponsorListTable {
	width: 900px;
}

.sponsorListTable table {
	width: 900px;
	border-style: solid;
	border-width: 1px;
	border-spacing: 0px;
	border-color: #FFFFFF;
	border-collapse: collapse;
}

.sponsorListTable th {
	border-style: solid;
	border-width: 1px;
}

.sponsorListTable td {
	border-style: solid;
	border-width: 1px;
}

.trOne {
	background: #CCCCCC;
}

#streamListTable {
	width: 1000px;
}

.streamListTable table {
	width: 1000px;
	border-style: solid;
	border-width: 1px;
	border-spacing: 0px;
	border-color: #FFFFFF;
	border-collapse: collapse;
}

.streamListTable th {
	border-style: solid;
	border-width: 1px;
}

.streamListTable td {
	border-style: solid;
	border-width: 1px;
}


/* The icons are all the same size. The original file is called icon.psd and the image122x102.psd is the size of the actual image that can be placed there. */
.Icon {
	float: left;
	height: 185px;
	width: 125px;
	margin: 5px 0 5px 10px;
	background-image: url(images/icon.jpg);
	background-repeat: no-repeat;
	padding: 7px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10pt;
	color: #FFFFFF;
}
.IconText {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #FFFFFF;
	text-align: center;
	height: 40px;
	width: 124px;
	padding-top: 5px;
	margin: 0px;
}
.IconText a {
	color: #000000;
}
.IconText a:hover {
	color: #FFFFFF;
}
.IconLogo {
	padding-left: 1px; 
    padding-top: 1px;
}

/* main body icons */
.bodyIcon {
	float: left;
	height: 240px;
	width: 172px;
	margin: 10px 4px;
	background: url(images/schoolIcon.jpg) no-repeat center;
	padding: 7px 8px 0px 8px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10pt;
	color: #FFFFFF;
}

.bodyIconLogo {
/*    margin: 5px 10px;*/
}

/*
.bodyIcon {
	float: left;
	height: 240px;
	width: 172px;
	margin: 10px 4px;
	background: url(images/schoolIcon.jpg) no-repeat center;
	padding: 7px 8px 0px 8px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10pt;
	color: #FFFFFF;
}
*/
.bodyIcon img {
	margin: 5px 10px;
}

.bodyIconText {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #FFFFFF;
	text-align: center;
	height: auto;
	width: 154px;
	padding-top: 5px;
	margin: 0px 10px;
}

.bodyIconText a {
	color: #FFFFFF;
}

.bodyIconText a:hover {
	color: #000000;
}

/* The aboutTheEvent box colors can be edited in the aboutTheEvent.psd file. The heading font and size can be changed in the aboutTheEventHeading class. The aboutTheEventText class features the article or whatever copy you decide to place in there. The overflow is set to auto to allow a vertical scroll bar. */
.aboutTheEvent {
	margin: 0px;
	padding: 0px;
	float: left;
	height: 400px;
	width: 510px;
	background-image: url(images/aboutTheEvent.jpg);
	background-repeat: no-repeat;
}
.aboutTheEventHeading {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14pt;
	color: #FFFFFF;
	text-align: left;
	height: 25px;
	width: 400px;
	padding-top: 17px;
	padding-left: 15px;
	margin: 0px;
}
.aboutTheEventText {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12pt;
	color: #FFFFFF;
	text-align: left;
	margin: 7px 5px 5px 20px;
	padding: 0px 20px 0px 0px;
	height: 335px;
	width: 460px;
	overflow: auto;
}

/* The previousStreams box contains 9 icons. The colors for that box can be changed in the previousStreams.psd file. The heading font size and color can be controlled in the previousStreamsHeading class. The previousStreamsIconsContainer holds all 9 icons and has a veritcal scroll bar. */
.previousStreams {
	margin: 0px;
	padding: 0px;
	float: right;
	height: 400px;
	width: 510px;
	background-image: url(images/previousStreams.jpg);
	background-repeat: no-repeat;
}
.previousStreamsHeading {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14pt;
	color: #FFFFFF;
	text-align: left;
	height: 25px;
	width: 400px;
	padding-top: 17px;
	padding-left: 15px;
	margin: 0px;
}

.previousStreamsIconsContainer {
	height: 335px;
	background-position: center;
	margin-right: 5px;
	margin-left: 15px;
	padding: 0px;
	margin-top: 7px;
	margin-bottom: 5px;
	width: 485px;
	overflow: auto;
}


/* The main sposor ad will go here. The mainSponsorAd.psd file has the rounded rectangle shape to enclose the ad in. */
.sponsorAd {
	margin: 0px;
	padding: 0px;
	height: 150px;
	width: 1024px;
	clear: both;
	background-image: url(images/mainSponsorAd.jpg);
	background-repeat: no-repeat;
}

.sponsorAdText {
	padding: 10px 10px 10px 10px;
	text-align: center;	
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
}

.sponsorAdText a {
	color: #000000;
}	

.sponsorAdText a:hover {
	color: #FFFFFF;
}

.sponsorAdText a:visited {
	color: #000000;
}	

/* The footer id has 2 divs, a left and a right to hold text on each side. Feel free to change fonts sizes and colors here. */
#footer {
	height: 50px;
	width: 964px;
	padding-top: 10px;
	padding-right: 30px;
	padding-bottom: 5px;
	padding-left: 30px;
	clear:both;
}
.footer_right {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10pt;
	color: #666666;
	float: right;
	width: 400px;
	height: 35px;
	margin: 0px;
	padding: 0px;
	text-align: right;
}
.footer_left {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10pt;
	color: #666666;
	float: left;
	width: 400px;
	height: 35px;
	margin: 0px;
	padding: 0px;
	background-position: top;
}

/* The body tag sets the font and background color for the entire site. */
body {
	font-family: Arial, Helvetica, sans-serif;
	background-color: #FFFFFF;
	background-position: center;
	margin: 0px;
}


/* NEW SPONSORSHIP  LAYOUT STYLES */
.sponsor_column_left {
	background:url(images/sponsor_column_new.jpg)  no-repeat;
	width:203px;
	height:672px;
	margin-left:5px;
	margin-top:0px;
	float:left;
	clear:both;
}

.sponsor_column_left img{
	border: 0px;
}

.sponsor_column_left a {
	text-decoration: none;
	color: #FFFFFF;
}

.sponsor_column_left a:visited {
	text-decoration: none;
	color: #FFFFFF;
}

.sponsor_column_right{
	background:url(images/sponsor_column_new.jpg)  no-repeat;
	width:203px;
	height:672px;
	margin-right:2px;
	margin-top:0px;
	float:right;
}

.sponsor_column_right img{
	border: 0px;
}

.sponsor_column_right a {
	text-decoration: none;
	color: #FFFFFF;
}

.sponsor_column_right a:visited {
	text-decoration: none;
	color: #FFFFFF;
}

.sponsor_column_platinum {
	width:180px;
	height:250px;
	margin: 15px 10px 10px;
}
.sponsor_column_gold {
	width:180px;
	height:160px;
	margin: 15px 10px 10px;
}
.sponsor_column_silver {
	width:180px;
	height:90px;
	margin: 15px 10px 10px;
}

.middle_box {
    background:url(images/middle_box.jpg) no-repeat;
    width:594px;
    height:672px;
    margin-left:8px;
    margin-top:0px;
    float:left;
}

.middle_box_content { 
	height:610px; 
	width:577px; 
	margin:3px;   
	padding:2px; 
	overflow:auto;
}

/*
.middle_box {
 	background-image: url(images/middle_box.jpg);
	background-repeat: none; 
 	height:672px; 
	width: 594px;
	margin-left:10px;
	margin-top:10px;
	float:left;   
	overflow: auto; 
}
*/

.home_page_text {
	margin: 15px 20px 10px 15px;
	color:#999999;
	clear:both;
	font-size:11pt;
	text-align:justify;
}
.home_page_text a {
	color: #FFFFFF;
}
.home_page_text a:hover {
	color: #FFFF00;
}
.center_content {
	width:610px;
	height:672px;
	float:left;
	margin-top:0px;
}
.upcoming_events_box {
	background:url(images/upcoming_events_box.jpg) no-repeat;
	width:347px;
	height:263px;
	margin-left:6px;
	float:left;
}
.upcoming_events_box_icons {
	width:330px;
	height:205px;
	margin:5px;
	overflow:auto;
	}

.school_logo_box {
	background:url(images/school_logo.jpg) no-repeat;
	width:241px;
	height:265px;
	margin-left:6px;
	float:left;
}

.school_logo_box img {
	padding-left: 40px;
	padding-top: 20px;
	border: 0px;
}

.school_logo_box a {
	text-decoration: none;
}

.school_logo_box a:visited {
	text-decoration: none;
}

.about_box {
	background:url(images/about_box.jpg) no-repeat;
	width:233px;
	height:404px;
	margin-top:4px;
	margin-left:6px;
	float:left;
	
}
.previous_streams_box {
	background:url(images/previous_streams_box.jpg) no-repeat;
	width:351px;
	height:404px;
	margin-top:4px;
	margin-left:10px;
	float:left;
}
.previous_streams_icons {
	width:342px;
	height:352px;
	margin: 5px;
/*	margin-top:35px 5px 7px 5px; */
	overflow:auto;
	}
.box_headings {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
	color: #000000;
	text-align: left;
	height: 25px;
	width: auto;
	padding-top: 15px;
	padding-left: 10px;
	margin: 0px;
}
.school_page_text {
	height:360px;
	margin: 10px 20px 10px 10px;
	color:#000000;
	clear:both;
	font-size:13px;
	text-align:justify; 
}	
.school_page_text p {
	margin: 0px 0px 5px 0px;
}
.icon_new {
	float: left;
	height: 156px;
	width: 138px;
	margin-left: 10px;
	margin-top:5px;
	background: url(images/icon_new.jpg) no-repeat center;
	padding: 7px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10pt;
	color: #FFFFFF;
	margin-bottom: 10px;
}
.video_box {
	background:url(images/video_box.jpg) no-repeat;
	width:593px;
	height:394px;
	margin-left:9px;
	float:left;
}
.information_box {
	background:url(images/information_box.jpg) no-repeat;
	width:593px;
	height:278px;
	margin-left:9px;
	margin-top:8px;
	float:left;
}
.video_spot {
	width:325px;
	height:275px;
	padding-left: 5px;
	float:left;
	color: #999999;
}

.video_spot a {
	color: #FFFFFF;
}

.video_spot a:hover {
	color: #FFFF00;
}		

/*  Map Items */

#map {
  background-image: url(map_images/FloridaOutline.jpg);
  background-repeat: no-repeat;
  width: 540px;
  height: 463px;
  position: relative;
}


#menu a {
  position: absolute;  
  text-decoration: none;
  font-size: 18px;
}

a#Duval {
  top: 38px;
  left: 395px;
}

a#Duval:hover {
  background-image: url(map_images/Duval.jpg);
  background-repeat: no-repeat;
  top: 31px;
  left: 387px;
  width: 122px;
  height: 45px;
}

a#StJohns {
  top: 60px;
  left: 425px;
}

a#StJohns:hover {
  background-image: url(map_images/StJohns.jpg);
  background-repeat: no-repeat;
  top: 46px;
  left: 411px;
  width: 114px;
  height: 59px;
}

a#Clay {
  top: 63px;
  left: 390px;
}

a#Clay:hover {
  background-image: url(map_images/Clay.jpg);
  background-repeat: no-repeat;
  top: 53px;
  left: 383px;
  width: 114px;
  height: 59px;
}

a#Seminole {
  top: 150px;
  left: 430px;
}

a#Seminole:hover {
  background-image: url(map_images/Seminole.jpg);
  background-repeat: no-repeat;
  top: 116px;
  left: 419px;
  width: 121px;
  height: 62px;
}

a#Volusia {
  top: 125px;
  left: 430px;
}

a#Volusia:hover {
  background-image: url(map_images/Volusia.jpg);
  background-repeat: no-repeat;
  top: 96px;
  left: 411px;
  width: 125px;
  height: 83px;
}

a#Hillsborough {
  top: 198px;
  left: 350px;
}

a#Hillsborough:hover {
  background-image: url(map_images/Hillsborough.jpg);
  background-repeat: no-repeat;
  top: 191px;
  left: 195px;
  width: 204px;
  height: 65px;
}

a#Pinellas {
  top: 198px;
  left: 330px;
}

a#Pinellas:hover {
  background-image: url(map_images/Pinellas.jpg);
  background-repeat: no-repeat;
  top: 196px;
  left: 243px;
  width: 114px;
  height: 45px;
}

#menu a i { 
 visibility: hidden;
/*  color: #000000;  */
}

/*end of map items*/

.home_page_text2 {
/*	margin: 15px 20px 10px 15px; */
    margin-left: 10px;
	color:#000000;
	clear:both;
	font-size:11pt;
	text-align:justify;
}
.home_page_text2 a {
	color: #4064b0;
}
.home_page_text2 a:hover {
	color: #ffaf1f;
}

.faq_page_text {
/*	margin: 15px 20px 10px 15px; */
    margin-left: 10px;
	color:#000000;
	clear:both;
	font-size:11pt;
	text-align: left;
}

.faq_page_text strong {
	color: #111111;
}

.faq_page_text a {
	color: #4064b0;
}
.faq_page_text a:hover {
	color: #ffaf1f;
}

.county_box {
	background:url(images/county_box.jpg) no-repeat;
	width:595px;
	height:407px;
	margin-left:9px;
	float:left;
	margin-bottom: 5px;
}

.county_box_text {
 	width: 585px;
    height: 350px;
	overflow-y: auto;
}	

.about_county_box {
	background:url(images/upcoming_events_box.jpg) no-repeat;
	width:347px;
	height:263px;
	margin-left:6px;
	float:left;
}

.about_county_box_text {
	padding-left: 16px;
	padding-right: 16px;
	color:#000000;
}	

.about_county_box_textof {
	overflow: auto;
	width: 337px;
	height: 203px;
	margin-top: 5px;
}

.countyIcon {
	float: left;
	height: 153px;
	width: 110px;
	margin: 0px;
	background: url(images/schoolIconSmall.jpg) no-repeat center;
	padding: 7px 8px 0px 8px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10pt;
	color: #FFFFFF;
}

.countyIcon img {
	margin: 5px 10px;
}

.countyIconText {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #FFFFFF;
	text-align: center;
	height: auto;
	width: 98px;
	padding-top: 0px;
	margin: 0px 7px;
}

.countyIconText a {
	color: #FFFFFF;
}

.countyIconText a:hover {
	color: #000000;
}

.school_logo_box2 {
	background:url(images/school_logo.jpg) no-repeat;
	width:241px;
	height:265px;
	margin-left:6px;
	float:left;
}

.school_logo_box2 img {
	padding-left: 60px;
	padding-top: 40px;
}