@charset "utf-8";
/* CSS Document */


body {
		margin:auto;
		padding:0;
		border:0;			/* This removes the border around the viewport in old versions of IE */
		width:90%;
		font-size:90%;
		background:#000000;
		/*min-width:600px;		/* Minimum width of layout - remove line if not required */
						/* The min-width property does not work in old versions of Internet Explorer */
	}
	
/* Test */

a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: none;
}
a:active {
text-decoration: none;
}
.style1 {
	text-align: center;
	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
	color:#FFF;
	font-size:16px;
}
.style2 {
	color: #FF0;
	font-size: medium;
	text-decoration: underline;
}
/*
.style3 {
	color: #000000;
	font-size: small;
}
.style5 {
	color: #FF3300;
} */
.style7 {
	color: #FFFFFF;
	font-size: medium;
}
.style8 {
	color: #FFFFFF;
}

/*end Test */

#header{
	margin-top:25px;
	clear:both;
	float:left;
	width:100%;
	background-color:#999;
	text-align: center;
	background: url(../images/football-field6.jpg) no-repeat;
	background-position:center;
	height:150px;
}

p.img_para{
	text-align:center;
}

p.white {
	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
	color:#FFF;
	font-size:16px;
}

ul.white{
	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
	color:#FFF;
	font-size:16px;
}

h3.style1{
	text-align:center;
	color:#000;
	}

#horiz_bar {
	background: url(../images/horiz_bar_Blk.gif) repeat-x;
	position:relative;
    top:170px;
	hieght: 50px;
}

/* BUBBLE PLASTIC VERTICAL MENU */

.bubplastic.vertical {
	width: 125px;
	margin: 0px;
	padding: 0px;
	display: block;
}
.bubplastic.vertical ul {
	display: block;
	list-style: none;
	margin: 0;
	padding: 0;
}
.bubplastic.vertical ul li {
	display: block;
	float: left;
	width: 100%;
	margin: 0;
	padding: 0;
	background: transparent url(../images/bg-bubplastic-button.gif) top left no-repeat;
}

.bubplastic.vertical ul li a {
	display: block;
	margin: 0;
	width: 100%;
	padding-left: 35px;
	text-transform: uppercase;
	font-family: "Helvetica Neue",helvetica,"microsoft sans serif",arial,sans-serif;
	font-size: 70%;
	color: #FFFFFF;
	text-decoration: none;
	background: transparent url(../images/bg-bubplastic-button.gif) top left no-repeat;
}

.bubplastic.vertical ul li a span.menu_ar {
	display: block;
	margin: 0;
	width: 100%;
	height: 22px;
	padding-top: 5px;
	padding-right: 35px;
	background: transparent url(../images/bg-bubplastic-button.gif) top right no-repeat;
	cursor: pointer;
}
/* END BUBBLE PLASTIC VERTICAL MENU */

/* ORANGE HOVER */
.bubplastic.orange ul li a:hover,
.bubplastic.orange ul li.highlight a {
	background: transparent url(../images/bg-bubplastic-h-orange.gif) top left no-repeat;
}
.bubplastic.orange ul li a:hover span.menu_ar,
.bubplastic.orange ul li.highlight a span.menu_ar {
	background: transparent url(../images/bg-bubplastic-h-orange.gif) top right no-repeat;
}
/* E.O. Bubbl Menu */


/* B.O. Main Content. Column colors are shown by sliding layers to the left to reveal layer below. Content is POSITIONED SEPERATELY */

/* B.O Background/Column colors */
#container3 {              /*This is the main_wrapper AND the Rt column (it is bttm layer) The width is determined by adding the right:30% position of #container2 and the right:40% position of #container1 and subtracting the total of 70% from 100% leaving you with a rt column of 30%.*/
    float:left;
    width:100%;
    background: white; /* rt column color */
    overflow:hidden;
    position:relative;
}
#container2 {              /*This sits inside #container3, is the middle column and layer*/
    float:left;
    width:100%;
    background: #000000;       /* middle column color */
    position:relative;
    right:20%;             /* This slides BOTH the middle and top layer (#container2 & #container1) 30%to the left revealing the color of the bottom layer (#container3), the Rt column. This sets the width of the rt column*/
}
#container1 {              /* This sits inside #container2 and is the top layer and left column */
    float:left;
    width:100%;
    background:white;
    position:relative;
    right:60%;             /* This slides top layer (#container1) 40%to the left relative to the position of #container2, so the right:**% from the move done above with #container2 + this 40% = 70% from the rt, revealing the color of the middle layer (#container2), the Rt column */
}
/* E.O. Background/Column colors */

/* B.O. Content positionng. This is SEPERATE from Background/Column colors. This aligns content divs with the column background colors. These Divs are not to have any color assigned. they are for content only. Graphics must be transp. or same color background */

#col1 {     /* This is the left content div/column */
    float:left;
    width:20%;    /* This creates a 2% pad between the content Div and the width of the left background column(sides only). So 30% column width minus 4% = 26% width */
    position:relative;
    left:80%; /* decrease to move left */
    overflow:hidden;
}
#col2 {      /* This is the middle content div/column */
	float:left;
	margin-top:15px;
	width:56%;      /* This creates a 2% pad between the content Div and the width of the middle background column(sides only). So 40% column width minus 4% = 36% width */
	position:relative;
	left:82%; /* increase to move right */
	overflow:hidden;
	/*background-color: #000000; */
}
#col3 {     /* This is the right content div/column */
	float:left;
	width:20%;      /* This creates a 2% pad between the content Div and the width of the left background column(sides only). So 30% column width minus 4% = 26% width */
	position:relative;
	left:84.6%;       /* increase to move right */
	overflow:hidden;
}