/********************************************************

	Octagon.com
	Main Styles
	Authored By: Amanda Postle
	Date Created: 1/26/09
	Date Modified: 5/1/09

********************************************************/
body, html {
background:#000 url(../images/site_BrandingBGrepeat.jpg) repeat-x;
font-family:Verdana, Arial, Helvetica, sans-serif;
text-align:center;
}

h1 {
font:30px Verdana, Arial, Helvetica, sans-serif;
}

a:link, a:visited {
text-decoration:underline;
color:#d71f1f;
}

a:hover, a:active {
text-decoration:underline;
color:#f44444;
}

p {
font-size:12px;
}

strong {
font-weight:bold;
}

em {
font-style:italic;
}

#site_wrapper, #site_container {
position:relative;
width:996px;
background:#000;
text-align:left;
margin:auto;
}

#site_container {
min-height:705px;
}


/******************************
SITE BRANDING AREA
- First layer of site including:
logo, 1st and 2ndary navigation,
search bar
*******************************/
#site_Branding {
position:absolute;
background:url(../images/site_BrandingBG.png) repeat-x;
height:123px;
width:996px;
z-index:50;
}

#site_Branding h1 a:link, #site_Branding h1 a:visited, 
#site_Branding h1 a:hover, #site_Branding h1 a:active {
position:absolute;
top:0px;
left:20px;
text-indent:-9999px;
background:url(../images/logo.png) no-repeat;
width:456px;
height:89px;
}

#site_Branding ul {
position:relative;
top:83px;
margin:13px 47px 0px 0px;
display:block;
height:19px;
text-align:right;
}

#site_Branding ul li {
display:inline;
padding:16px 0px 15px 2px;
background:url(../images/site_BrandingULline.jpg) no-repeat left;
}

#site_Branding ul li a:link, #site_Branding ul li a:visited,
#site_Branding ul li a:hover, #site_Branding ul li a:active {
font-size:16px;
color:#fff;
text-decoration:none;
margin-right:-6px;
padding:7px 16px 13px 15px;
}

#site_Branding ul a:hover, #site_Branding ul a:active {
background:url(../images/site_BrandingULdropDownBGover.jpg) repeat-x;
}

#site_Branding img.ULine {
position:absolute;
left:955px;
top:89px;
width:2px;
height:31px;
}


#site_Branding ul.dropDown {
top:0px;
margin:27px 0px 0px 582px;
padding:4px 0px 4px 0px;
position:absolute;
z-index:100;
text-align:left;
height:auto;
width:202px;
border-bottom:1px solid #343434;
background:url(../images/site_BrandingULdropDownBG.png) repeat-y;
}

#site_Branding ul.dropDown li {
float:none;
height:auto;
margin:0px 0px 5px 2px;
padding:0px;
position:relative;
display:block;
background:none;
width:198px;
}

#site_Branding ul.dropDown li a:link, #site_Branding ul.dropDown li a:visited,
#site_Branding ul.dropDown li a:hover, #site_Branding ul.dropDown li a:active {
margin:0px;
padding:7px 10px 7px 8px;
background:none;
font-size:14px;
display:block !important;
position:relative;
text-decoration:none;
font-weight:normal;
background:none;
}

#site_Branding ul.dropDown li a:hover, #site_Branding ul.dropDown li a:active {
background:#b00606 url(../images/site_BrandingULdropDownBGover.jpg) repeat-x;
}

#site_Branding ol {
position:absolute;
top:7px;
width:765px;
list-style-image:none;
list-style-position:outside;
list-style-type:none;
text-align:right;
}

#site_Branding ol li {
display:inline;
padding-left:10px;
}

#site_Branding ol a:link, #site_Branding ol a:visited,
#site_Branding ol a:hover, #site_Branding ol a:active {
font-size:10px;
color:#B5B5B5;
text-decoration:none;
}

#site_Branding ol a:hover, #site_Branding ol a:active {
color:#fff;
}

#site_Branding input {
position:absolute;
padding:3px 5px 3px 5px;
left:781px;
top:8px;
width:150px;
background:#919191;
border:none;
font-size:11px;
}

#site_Branding input.submit {
position:absolute;
top:8px;
left:946px;
padding:0;
height:19px;
width:32px;
border:none;
}



/******************************
MAIN CONTENT AREA
- Everything between site
branding and footer
*******************************/
#mainContent {
position:relative;
left:0px;
top:0px;
background:none;
width:996px;
min-height:705px;
}

/**********************************
ROTATING AREA 
***********************************/
#mainContent #HomePgRotateText {
background:url(../images/mainContentHomeBG.png) no-repeat;
width:224px;
height:583px;
position:absolute;
z-index:100;
top:123px;
left:8px;
padding:0px 10px 0px 30px;
}

#mainContent #HomePgRotateText h2 {
display:block;
font-size:28px;
font-style:italic;
font-weight:normal;
color:#fff;
width:180px;
padding:20px 30px 15px 0px;
margin-top:10px;
border-top:1px solid #ff0000;
}

#mainContent #HomePgRotateText p {
font-size:14px;
color:#fff;
line-height:20px;
padding:0px 0px 15px 0px;
}

#mainContent #HomePgRotateText a:link, #mainContent #HomePgRotateText a:visited,
#mainContent #HomePgRotateText a:hover, #mainContent #HomePgRotateText a:active {
text-decoration:none;
color:#fff;
}

#mainContent #HomePgRotateText a.redLink:link, #mainContent #HomePgRotateText a.redLink:visited,
#mainContent #HomePgRotateText a.redLink:hover, #mainContent #HomePgRotateText a.redLink:active {
text-decoration:none;
color:#ff0000;
}


#mainContent #HomePgRotateText .marketing {
display:block;
width:200px;
padding:0px 0px 15px 0px;
display:none;
}

#mainContent #HomePgRotateText .marketing h2.red {
color:#ff0000;
border:none;
padding-top:10px;
margin-top:0px;
}

#mainContent #HomePgRotateText .ap {
display:block;
width:200px;
padding:0px 0px 15px 0px;
display:none;
}

#mainContent #HomePgRotateText .ap h2.red {
color:#ff0000;
border:none;
padding-top:20px;
margin-top:0px;
}

#mainContent #HomePgRotateText .ap h2.white {
border-top:none;
border-bottom:1px solid #ff0000;
padding-top:0px;
padding-bottom:20px;
}

#mainContent #HomePgRotateText .events {
display:block;
width:200px;
padding:0px 0px 15px 0px;
}

#mainContent #HomePgRotateText .events h2.white {
border-top:none;
border-bottom:none;
padding-top:0px;
padding-bottom:10px;
}
/*********************************
END ROTATING AREA 
**********************************/

#mainContent #flashBG {
display:none;
}

#mainContent #mods {
position:absolute;
left:20px;
top:123px;
width:214px;
height:635px;
padding-left:25px;
padding-right:80px;
background:url(../images/mainContentHomeBG.png) repeat-y;
}

/******************************
Marketing Section
*******************************/
#mainContent #mods .mods01 {
border-bottom:1px solid #d71f1f;
padding:5px 0px 12px 0px;
}

#mainContent #mods .mods01 p {
color:#fff;
padding-bottom:15px;
font-size:14px;
line-height:21px;
display:none;
}

#mainContent #mods .mods01 h2 {
margin:10px 0px 5px -4px;
width:147px;
height:40px;
}

#mainContent #mods .mods01 h2 a:link, #mainContent #mods .mods01 h2 a:visited, 
#mainContent #mods .mods01 h2 a:hover, #mainContent #mods .mods01 h2 a:active,
#mainContent #mods .mods01 h2 a.selected:link, #mainContent #mods .mods01 h2 a.selected:visited, 
#mainContent #mods .mods01 h2 a.selected:hover, #mainContent #mods .mods01 h2 a.selected:active {
display:block;
text-decoration:none;
width:147px;
height:40px;
text-indent:-9999px;
background:url(../images/h1_marketing.png) no-repeat;
}

#mainContent #mods .mods01 h2 a.selected:link, #mainContent #mods .mods01 h2 a.selected:visited, 
#mainContent #mods .mods01 h2 a.selected:hover, #mainContent #mods .mods01 h2 a.selected:active {
background:url(../images/h1_marketingSelect.png) no-repeat;
}


/******************************
A+P Section
*******************************/
#mainContent #mods .mods02 {
border-bottom:1px solid #d71f1f;
padding:12px 0px 12px 0px;
}

#mainContent #mods .mods02 p {
color:#fff;
padding-bottom:15px;
font-size:14px;
line-height:21px;
padding-left:2px;
}

#mainContent #mods .mods02 h3, 
#mainContent #mods .mods02 h4 {
color:#fff;
font-size:14px;
line-height:21px;
font-weight:normal;
margin:0px 0px 0px 0px;
padding:0px 0px 15px 0px;
display:block;
left:0px;
top:0px;
}

#mainContent #mods .mods02 h4 {
left:2px;
margin-top:-150px;
color:#000;
}

#mainContent #mods .mods02 h2 {
margin:10px 0px 5px -4px;
width:214px;
height:66px;
}

#mainContent #mods .mods02 h2 a:link, #mainContent #mods .mods02 h2 a:visited, 
#mainContent #mods .mods02 h2 a:hover, #mainContent #mods .mods02 h2 a:active,
#mainContent #mods .mods02 h2 a.selected:link, #mainContent #mods .mods02 h2 a.selected:visited, 
#mainContent #mods .mods02 h2 a.selected:hover, #mainContent #mods .mods02 h2 a.selected:active { 
display:block;
text-decoration:none;
width:214px;
height:66px;
text-indent:-9999px;
background:url(../images/h1_AandP.png) no-repeat;
}

#mainContent #mods .mods02 h2 a.selected:link, #mainContent #mods .mods02 h2 a.selected:visited, 
#mainContent #mods .mods02 h2 a.selected:hover, #mainContent #mods .mods02 h2 a.selected:active {
background:url(../images/h1_AandPSelect.png) no-repeat;
}


/******************************
Events Section
*******************************/
#mainContent #mods .mods03 {
padding:12px 0px 12px 0px;
}

#mainContent #mods .mods03 p {
color:#fff;
padding-bottom:15px;
font-size:14px;
line-height:21px;
display:none;
}

#mainContent #mods .mods03 h2 {
margin:10px 0px 5px -4px;
width:106px;
height:38px;
}

#mainContent #mods .mods03 h2 a:link, #mainContent #mods .mods03 h2 a:visited, 
#mainContent #mods .mods03 h2 a:hover, #mainContent #mods .mods03 h2 a:active,
#mainContent #mods .mods03 h2 a.selected:link, #mainContent #mods .mods03 h2 a.selected:visited, 
#mainContent #mods .mods03 h2 a.selected:hover, #mainContent #mods .mods03 h2 a.selected:active {
display:block;
text-decoration:none;
width:106px;
height:38px;
text-indent:-9999px;
background:url(../images/h1_events.png) no-repeat;
}

#mainContent #mods .mods03 h2 a.selected:link, #mainContent #mods .mods03 h2 a.selected:visited, 
#mainContent #mods .mods03 h2 a.selected:hover, #mainContent #mods .mods03 h2 a.selected:active {
background:url(../images/h1_eventsSelect.png) no-repeat;
}

/******************************
Upcoming Section
*******************************/
#mainContent #modsUpcoming {
position:absolute;
top:565px;
left:728px;
width:259px;
height:140px;
background:url(../images/mainContentUpcomingBG.png) no-repeat;
}

#mainContent #modsUpcoming h3 {
color:#fff;
font-size:18px;
font-style:italic;
font-weight:normal;
letter-spacing:1px;
padding:10px 10px 3px 10px;
}

#mainContent #modsUpcoming h4 {
color:#fff;
font-size:16px;
font-weight:normal;
padding:0px 10px 10px 10px;
}

#mainContent #modsUpcoming p {
color:#fff;
font-size:11px;
padding:0px 10px 10px 10px;
}


/******************************
Footer Area
*******************************/
#clear {
clear:both;
}

#site_info {
position:relative;
min-height:50px;
width:996px;
padding-bottom:50px;
border-top:1px solid #343434;
}

#site_info ul {
width:995px;
text-align:center;
}

#site_info ul, #site_info ol {
list-style-image:none;
list-style-position:outside;
list-style-type:none;
padding-top:5px;
}

#site_info ol {
float:left;
width:700px;
margin-left:20px;
}

#site_info ul li, #site_info ol li {
display:inline;
padding-left:10px;
}

#site_info ol li {
padding-bottom:6px;
padding-right:15px;
background:url(../images/site_info_icon.jpg) right no-repeat;
}

#site_info ul a:link, #site_info ul a:visited,
#site_info ul a:hover, #site_info ul a:active {
font-size:10px;
color:#B5B5B5;
text-decoration:none;
}

#site_info ol a:link, #site_info ol a:visited,
#site_info ol a:hover, #site_info ol a:active {
font-size:10px;
color:#919191;
text-decoration:none;
}

#site_info ul a:hover, #site_info ul a:active,
#site_info ol a:hover, #site_info ol a:active {
color:#fff;
}

#site_info form {
float:left;
padding:8px 0px 0px 35px;
}

#site_info label {
float:left;
display:block;
color:#919191;
font-size:10px;
padding:2px 5px 0px 0px;
margin:8px 0px 0px 0px;
}

#site_info select {
float:left;
display:block;
color:#000;
font-size:10px;
border:none;
padding:1px;
background:#919191;
margin:7px 5px 0px 0px;
}