/* 
------------------------------------------------------------------------------
|  v0.9997 062308 - Full scrolling masthead and content						  |
|         v0.9998 012024 fixed herlink color for body-trailer to match content-container                                                                    |
| This layout has the following structure:                                    |
| body-container: encapsulates all page contents except body-footer           |
|    body-header: masthead and navigation area                                |
|            nav: navigation bar area                                         |
|     content-container: wrapper for the main table content area              |
|   body-trailer: footer area. by design, kept out of body container to       |
|                 allow footer to be pinned to the bottom of window frame or  |
|                 to bottom of content-container.                             |
|                 See "body-trailer location option selection" at the end of  | 
|                 this file for instructions                                  | 
|                                                                             |
| Notes:                                                                      |
| 1- activation of border property(s) may cause unexpected scroll bars on     |
|    some browsers.  Seee the notes for body {padding:right} selector which   |
|    help to aleviate for some browsers.                                      |
| 2- inspiration for pinned body-trailer constructs from the open source      |
|   web design Lazy Days: COPYRIGHT: Pat Heard  { http://fullahead.org }      |
| 3- inspiration for active page identification from:                         |
|        Andy Dingley dingbat@codesmiths.com         						  |                                              	  |                                                                       
------------------------------------------------------------------------------
*/

body
{
	font-family: 'Trebuchet MS', sans-serif ; 
	font-size: 12px;
	line-height: 1.3;
	font-weight: normal;
	font-style: normal;
	text-align: center; /* insures IE will center divs */
	/* NOTE: if an offset of the background image is specified, take into consideration masthead height and units (see masthead parameters below).  */
	color: #484848;
	margin: 0;
	margin-right: 1px;
	/* 0.92 -  margin-right: 1px needed to get around scroll bars appearing when div borders are activated. The value needs to be one px greater than the largest border thickness.  solves problem for border around body-header container on most browsers. if no borders are active, set the value to 0 or 1px. */
	padding: 0;
	height: 100%;
	width: auto;
	background-color: #E9E9DC;
/*	background-image: url(http://www.aces-softball.com/images/aces-background.jpg);
	background-repeat: no-repeat;
	background-position: 0 0;
	background-attachment: fixed; */
}

/*
------------------------------------------------------------------------------------------------
|         default styles for the hyperlinks. these may be overriden by specific classes         |
------------------------------------------------------------------------------------------------
a:link, a:visited {
	color:#484848 !important; 
	}

a:hover {
	color:# cb4e00 !important;  
	}
*/
/*
------------------------------------------------------------------------------------------------
|                                     WARNING:                                                   |
| The following is a hack for body-trailer container pinning to the bottom of the window frame.  |
| IE will only work with a height:100%. Non-IE broswers will work only with height:auto.         |
| Non-IE browsers will recognize this #body-container[id] and override it to height:auto.        |
| In both cases, the bottom of the body-trailer will be pinned to the bottom of the window.      |
| The body-trailer will scroll up to a maximum of the bottom of the content-container container. |
| See "body-trailer location option selection" at the end of this file for more info             |
------------------------------------------------------------------------------------------------
*/
#body-container[id]  
{
height: auto;
}

#body-container 
{
   margin-top: 0px ;
   margin-right:auto;
   margin-bottom:0;
   margin-left:auto; 
   border: 0px black dashed; /*    debug only -  */
   height:auto; /* See "body-trailer location option selection" at the end of this file  */
   min-height: 100%;  /*    v0.9 for pinning of trailer to bottom of window */
}

/*
------------------------------------------------------------------------------
|                         masthead parameters                                 |
|                                                                             |
|   #body-header parameters                                                   |
|        background: the background characteristics of the masthead           |
|                 if an image is used, take into consideration the height and |
|                 width of the masthead plus growth due to use text resizing  |
|                                                                             |
|   nomimal height of masthead calculations (#nav parameters):                |
|             |   margin-top + margin-bottom + height                         |
|                                                                             |
|       this size will change with user text sizing changes. If an optional   |
|       image file is used, the masthead height may increase if the img is    |
|       postioned below the nav bar.                                          |
|                                                                             |
|  #body-header-image parameters                                              |
|       controls location of optional image file in the masthead              |
|       this style can be duplicated and numbered if more than one image      |
|       is desired with independent positioning.                              |
|       float:  controls pinning of image to left or right of masthead        |
|       margin: controls positioning of image on masthead relative to page    |
|                                                                             |
------------------------------------------------------------------------------
*/
#body-header 
{
   float:left; /* added to prevent margin collapse when border is 0px */
   width:100%; /* added to prevent margin collapse when border is 0px */
   top:0;
   margin:0;
   min-width:600px;  /* not recognized by all broswers */
   background: url(../images/sbc-header-1x4-final.jpg) #251d18 no-repeat; /* url(../images/sbc_logo.jpg) no-repeat;the background image of the masthead. color was 201816*/
     border: 0px red solid; /* debug only  */
 }


#body-header-image  /* optional masthead image file for logos, etc. */
{
   float: right; /* controls pinning of mashead image */
   padding: 0px;
   margin:10px 30px 0 0; /* controls location  of masthead image relative to page */
   border: 0px red solid; /* debug only*/
   z-index: 0; /* a positive value insures stacking on top of nav bar */
}

/*
------------------------------------------------------------------------------
|                   navigation bar parameters                                 |
|  #nav parameters                                                            |
|       margin-top:     masthead height from top of page to top of the        |
|                       navigation bar                                        |
|       margin-bottom:  controls the amount of visible masthead under the     |
|               nav bar                                                       | 
|       line-height:, height: - determines height of the nav bar.  must be    |
|               equal so #nav li a:hover fill will encompass entire box.      |
|               use % or em values so nav bar will grow with user text        |
|               resizing actions.                                             |
|       font-size:  - size of text in nav bar. use % or em values so nav bar  |
|               text will grow with user text resizing actions.               |
|       min-height: - of nav bar                                              |
|       border: - controls a border around the entire nav bar. be careful     |
|               using right and left borders as this may cause unexepected    |
|               scrollbars on some browsers                                   |
|       opacity: - controls the implementation of opacity under the nav bar   |
|                                                                             |
|   #nav ul parameters                                                        |
|         float: left   - locks nav bar to left of window                     |
|         float: right  - locks nav bar to right of window                    |
|         margin-left   - left hand x-positioning of the nav bar when         |
|                        floated left                                         |
|         margin-right  - right hand x-positioning of the nav bar when        |
|                        floated right                                        |
|                                                                             |
|  #nav li a parameters control the attributes of link items in the nav bar   |
|                                                                             |
|  #nav li a:hover parameters control the style of link  items on mouseover   |
------------------------------------------------------------------------------
*/
#nav 
{
  /* float:left;  0.92  deleted */
   width: 95%;/* 0.92 was 100%*/
   overflow:hidden; /* prevents nav items from spilling over into content-container content area */
   min-width:600px;
   line-height: 2em; 
   height: 2em; /* must match #nav line-height so hover fill will encompass entire box */
	font-family: 'Trebuchet MS', sans-serif ; 
  font-weight: bold;
  font-size: 0.92em;  /* 0.92 - was 92% then 85% */
   min-height:20px;
   margin-top:5px; /* controls height of masthead from top of page to top of nav area */
   margin-bottom:10px; /* controls the amount of visible masthead under the nav bar */
   margin-right:auto; /* controls the x-positioning of the nav bar */
   margin-left:auto; /* controls the x-positioning of the nav bar */
   border: 0px red solid; /* debug only*/
   border-top: 0px white solid;  
   padding:0;
   /* background-color: #202020; */
/*  
------------------------------------------------------------------------------
| the following 3 lines control opacity for the nav bar line -                |
|                 uncomment them to activate                                  |
|    opacity:                   CSS3 attribute                  range: 0-1.0  |
|    -moz-opacity:              for older Moz browsers          range: 0-1.0  |
|    filter:alpha(opacity=50):  for IE browsers                 range: 0-100  |
|                                                                             |
| Note:  Opacity  affects both the text color as well as the background       |                                                  
------------------------------------------------------------------------------
*/  
   /* opacity: 0.8;  
   -moz-opacity:0.8;  
   filter:alpha(opacity=80); 
   */
 }

#nav ul
{
 /*   float:right; 0.92 controls the pinning of the nav bar to the window. */
   margin:0 auto; /* 022515 changed to centered nav links */
/*   margin-left:300px;   controls the left hand x-positioning of the nav bar when floated left */
 /*  margin-right:0px;  controls the right hand x-positioning of the nav bar when floated right */
}

#nav li, #nav ul 
{
   list-style: none; /* 0.92 - changed from list-style-type */
   display: inline; /* 0.92 */
   padding: 0px; 

}

#nav li
{
	text-align: center;
    padding: 0 10px 0 10px; 
    margin:0;
 }

#nav li a
{
/*    display: block;  0.92 deleted */
	padding: 0 10px 0 10px; /* 0.92 was 0 15 0 15 */
	color: white !important;
	border: 1px #251d18 solid; /* border same color as background. prevents movement of nav items on hover */
    text-decoration: none;
/* 	font-weight: bold; */
}

#nav li a:hover
{
/*    padding: 0 10px 0 10px;    0.92 deleted so padding will follow #na li a */
	color: white !important;  /*insures nav item color on hover  was: 87837a */
	border: 1px #898f79 solid; /* was #CB4E00 */	
} 


/*
------------------------------------------------------------------------------
|      The following property pairs control active page identification.       |
|      The result is a unique style value applied to the navigation item to   |                                             |      identify it as the active page.                                        |
|        Inspired by Andy Dingley dingbat@codesmiths.com                      |                                               |                                                                             |
|       This is a page equivilency list of each page. It is effectly a css    |
|       version of a "case" statement. Each page that is to be identified has |
|       a <body id=page_name > tag where page_name is the first property in   |
|       the pair (e.g. #home).                                                |
------------------------------------------------------------------------------
*/

ul.nav li a,
    #home #nav-home,
        #sbc-specs #nav-sbc-specs, 
#sbc-screenshots #nav-sbc-screenshots, 
    #sbc-downloads #nav-sbc-downloads, 
    #sbc-support #nav-sbc-support 
{
  background-color: #898f79 !important; /* the properties for the current page nav item. was #cb4e00 */
   	border: 1px #898f79 solid; /* prevents blooming on hover of active nav item. must match both  ul.nav li a background-color and nav li a:hover border */
    color:white !important;
} 
        
/* 
------------------------------------------------------------------------------
|               end of masthead and navigation bar items                      |
------------------------------------------------------------------------------
*/

td 
{
   text-align: left ;
   color: #484848 ; /* 0.92 was 003366 */
   background:  inherit; /* #e9e9dc ; 0.92 was white */
   padding: 0px 5px 0px 2px ;
   vertical-align:top;
/*   font-size: 0.95em; */
 
}

.content-container 
{
   border: 0px blue dashed;  /* debug only */
   margin-top: 0px ;
   margin-right:auto;
   margin-bottom:0;
   margin-left:auto;
   line-height:1.3; /* controls overall spacing between lines in the table */
}

.content-container table 
{
   border-collapse:collapse;
   border: 0px red solid;  /* debug only */
   margin-top: 0px ;
   margin-right:auto;
   margin-bottom:0;
   margin-left:auto;  
   table-layout: auto  ;
   white-space: nowrap ;
   overflow: hidden ;
	max-width:900px;  /* 061719 added */
   padding: 0px 0px 0px 0px  ; /* 0.92 was 0 2 0 2 */
   color: #484848 ; /* 0.92 was 003366 */
   background:  inherit;  /* #e9e9dc ; 0.92 was white */
}

img {
border:none ; 
width: 100%;
height:auto;
	}

.content-container a:link, .content-container a:visited
{
	color: #cb4e00 !important;
	text-decoration: none;
}
   
.content-container a:hover {
   color: #900800 !important; /* was 037537 */
   background: inherit;
   margin: 0;
}
   
/*
------------------------------------------------------------------------------
|                            body trailer area                                |
|           see section on "body-trailer parameter selections" below          |
------------------------------------------------------------------------------
*/

.body-trailer 
{
  margin:0;
  padding:0 0 0 10px;
  color:#323232   ; /* was 828282, c1c1bb, 484848 */
  background: #e0dfcd; /*0.92 was e0dfcd, d8cdb0  e0dfcd , then #9b9b9b; */ 
  text-align:center;
  border: 0px maroon dashed; /*- debug only */
  font-size:0.92em;
/*  
------------------------------------------------------------------------------
| the following 3 lines control opacity for the trailer line -                |
|                 uncomment them to activate                                  |
|    opacity:                   CSS3 attribute                  range: 0-1.0  |
|    -moz-opacity:              for older Moz browsers          range: 0-1.0  |
|    filter:alpha(opacity=50):  for IE browsers                 range: 0-100  |
|                                                                             |
| Note:  Opacity  affects both the text color as well as the background       |                                                  
------------------------------------------------------------------------------
*/
   opacity: 0.5;   
  -moz-opacity:0.5;  
   filter:alpha(opacity=50);
} 

.body-trailer a:link, .body-trailer a:visited {
	color:#bb7653  !important;
	text-decoration:none;
	}

.body-trailer a:hover {
	color:#cb4e00 !important; /* was white */
	text-decoration:none;
}

.clearout   /* for float clearing */
{
clear:both;
}

/* 
------------------------------------------------------------------------------
|                 body-trailer parameter selections                           |
|                                                                             |
| location= pinned to window frame:                                           |
|    body-trailer {margin-top: -3em;                                         |
|                   padding-bottom: 0.6em;   compromise to avoid y-scroll on  |
|                              most browsers including IE6                    |
|                   padding-top: 1em;  }                                      |
|    .content-container   {padding-bottom:3em;}                               |
|     NOTE: body-trailer {margin-top:} offsets                               |
|           .content-container  {padding-bottom}                              |
|                                                                             |
| location= pinned to content-container:                                      |
|     these selectors can have any values.                                    |
------------------------------------------------------------------------------
*/
.content-container 
{
/*	width:950px; */
	margin: 0 auto 0 auto;
	padding-bottom:3em;
 }

.body-trailer 
{
	margin-top:-0.5em; /* was -3em */
    padding-bottom:0.6em; 
	padding-top:0.5em; /* was 1em */
}
/* 
------------------------------------------------------------------------------
|                 body-trailer location option selection                      |
| the following selectors control the location of the body-trailer:           |
|         location              html              body-container              |
|   pinned to window frame   height:100%;           height:100%               |
|   pinned to content-container      remove                height: auto       |
|                                                                             |
|    un-comment the following line to select body-trailer pinned              |
|    to window frame                                                          |
|  WARNING: Leave this line at the end of the file !!!                        |
------------------------------------------------------------------------------
*/
html {height: 100%;} #body-container{height: 100%;}