/* 

Style sheet for BBSM.com - controls the design of BBSM.com, separating content from design.

TOC
1. defaults
2. element selectors
3. id selectors
4. class selectors
5. contextual seletors
6. navigation system

*/



/* 1. DEFAULTS */

* { 
  margin: 0;
  padding: 0;
  border:0;
  }


/* 2. ELEMENT SELECTORS to define elements */

body  {
	background: #FFFFFF;
	text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
	color: #000000; 
	font-family: Trebuchet MS, Verdana, Arial, sans-serif;
	font-size: 12px;
}


/* Anchors in main text */

A, A:link, A:visited {
   color:#cc6600; 
   text-decoration:none; 
   font-weight:normal; 
}

A:hover {
	color:#cc6600;
	text-decoration:underline;
}


/* the bottom margin is set, not the top margin, just like in H1, H2 and H3 as this is good practice */
p  {
    border-top-width: 0;
    padding-top: 0;
    margin-bottom: 10px;
    border-bottom-width: 0;
    padding-bottom: 0;

}

/* Heading 2 which is used on the Corporate and Facilities pages for secondary level navigation */

h2 {
	font-size: 14px;
	font-family:Arial, Helvetica, sans-serif;
	font-weight:bold;
	color:#cc6600;
	margin-bottom:10px; 
}


h2 a:link, h2 a:visited {
	color:#000000;
	text-decoration: none;
	font-weight:bold;
}

h2 a:hover {
	color: #cc6600;
    text-decoration:none;
	font-weight:bold;
}

/* Heading 1 - used on Stores and Contact page headings */
h1 {
	font-size: 16px;
	font-family:Arial, Helvetica, sans-serif;
	font-weight:bold;
	color:#cc6600;
	margin-bottom:10px; 
	
}


/* Heading 3 - used for Footer */
h3 {
	font-size: 11px;   
	font-family:Arial, Helvetica, sans-serif;
	font-weight:bold;
	color:#000000;
	margin-bottom: 0px;  
}

/* Heading 4 - used on Stores and Club Card page in info area NEW*/
h4 {
	font-size: 14px;   /* changed NM from 12 */
	font-family:Arial, Helvetica, sans-serif;
	font-weight:bold;
	color:#000000;
	margin-bottom:10px;    /* changed NM from 0 */
}



/* used to format tables like on Expansion Plans page */
table {
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 5px;
	margin:0px;
	border-collapse: collapse;
}



td {
	font-family: Trebuchet MS, Verdana, Arial, sans-serif;
	padding-left: 0px;
	padding-bottom: 5px;
    vertical-align:top;
}

/* used to format a table column that contains a list like table on Expansion Plans page - element specific CLASS SELECTORS*/
td.list{
	font-family: Trebuchet MS, Verdana, Arial, sans-serif;
	padding-right: 10px;
	padding-bottom: 5px;
    vertical-align:top;

}


/* the table header */
th {
	font-size: 12px;
	font-family:Arial, Helvetica, sans-serif;
	font-weight:bold;
	color:#000000;
	padding-bottom:0px;
	text-align:left;
}


img {
    border: 0;
}

/* Used for list like for product listing on the Products page */

ul {
   list-style-type: none;
}


ul ul {
   list-style-type: circle;
   padding-left: 25px;
}


li  {
    font-family: Trebuchet MS, Verdana, Arial, sans-serif;
    font-size: 12px;
}



/* 3. ID SELECTORS for structural use */

#container {
   width:770px;
   margin:0 auto; /* the auto margins (in conjunction with a width) center the page */
   text-align:left; /* this overrides the text-align: center on the body element. */
}

#header {
  width:770px;
  margin:0px 0px; /*top and bottom are 0; left and right are 54*/
  border:0px;
  padding:0px;
  height: 65px; /*this lines seems to close down the gap displayed in strict mode - let's see if it works on IE7 */
}


#navigation {
  width: 770px;
  margin: 0px 0px; /*top and bottom are 0; left and right are 54*/
  background:url(../images/navigation/menu_background.jpg);
}

/* The page will either contain a banner or 2 column image */ 

/* The banner contains a 3 column image - image size is 770 by 255  */
#banner {
  width: 770px;
  margin: 0 0px; 
  border-top: 10px solid #ffffff;
}


/* The content area contains a 2 column image (image size 520 by 255) - and some text */
#contentArea {
  float: left; 
  width: 515px;
  padding: 10px 5px 5px 0px;  /* top, left, bottom, right; therefore, total width is 510+5+5=520 */
  background-color: #ffffff;
  text-align:left;
}  

#sideArea {
  float: left;
  width: 250px;
  background-color:#ffffff;
} 



#footer {
  width: 770px;
  border-top: 1px solid #CC6600;
  font-size: 11px;
  font-family:Arial, Helvetica, sans-serif;
}   


/* The columnWrapper wraps up the contentArea and the sideArea */
#columnWrapper {
  overflow: hidden;
}   


/* 4. CLASS SELECTORS */
/*    setting CLASSES that can be applied to different elements or groups of elements */

/* the clearfloat class is placed on a div or break element and is the final element before the close of the container that 
   contains the float */

.clearfloat { 
	 clear: both;
    height: 0;
    font-size: 1px;
    line-height: 0px;
}


.center {
   text-align: center;
}

.right { 
   text-align: right;
}	
	

.bold {
    font-weight: bold;
}


.separatorText {
    color: #000000;
}	 
 
/* Use this to add some space above secondary navigation */
 
.topPadding {
   padding-top: 10px;
} 

.adobePadding {
   padding-top: 20px;
} 
 
/* Define promo panel and promo link for the promotions */
 
.promoPanel {
    border-top: 10px solid #ffffff;
	padding: 0px 0px 0px 0px;
	width: 250px;
	height: 95px;
} 


.promoLink {
   height: 25px;
	background-image:url(../images/promos/promo_background.jpg);
	position:relative; 
	padding: 5px 5px 0px 0px;
	text-align:right; 
	font-size: 12px;
	font-family:Arial, Helvetica, sans-serif;
	font-weight:bold;
	color:#000000;
}

.promoLink a:link,.promoLink a:visited {
	color: #000000;
    text-decoration: none;
	font-weight:bold;
}

.promoLink a:hover {
  text-decoration: underline;
}

.promoBody {
	background-image:url(../images/promos/promo_background2.jpg); background-repeat: repeat-y;
    padding: 5px 10px 5px 10px;
	text-align:left; 
	font-size: 12px;
	font-family:Arial, Helvetica, sans-serif;
	font-weight:normal;
	color:#000000;
}

	
/* for styling the Club Card informational area including additional docs */

.clubinfoPanel {
    padding: 10px 10px 10px 10px;
	width: 230px;
	font-size: 14px;
	font-weight: normal;
	font-family: Arial, Helvetica, sans-serif;	
}


.clubinfoPanel p {
   font-size: 12px;
}	

.clubinfoPanel table {
   width: 220px;
   font-size: 12px;
   text-align:left;
}

.clubinfoPanel td {
	font-family:Arial, Helvetica, sans-serif;
	padding-left: 0px;
	padding-bottom: 0px;
    vertical-align:top;
}
	
.clubinfoPanel li {
    font-size: 14px;
	font-weight: normal;
	font-family:Arial, Helvetica, sans-serif;
}

.clubinfoPanel img {
   margin-top: 20px;
}


/* for styling the store informational area like opening hours*/

.storeinfoPanel {
    padding: 10px 10px 10px 10px;
	width: 230px;
	font-size: 14px;
	font-weight: normal;
	font-family: Arial, Helvetica, sans-serif;	
}


.storeinfoPanel p {
   font-size: 12px;
}	

.storeinfoPanel table {
   width: 220px;
   font-size: 14px;
   text-align:left;
}

	

/* for styling single columns on the Products page */
.productsPanel {
   width: 240px;
   padding: 0px 0px 10px 0px;
   float: left;
}

	

/* for styling single columns on the Contacts page */

.contactsPanelLeft, .contactsPanelRight {
   width: 230px;
	height: 200px;
	padding: 10px 10px 10px 10px;
	float: left;
	border: 1px solid #CCCCCC;
	margin: 0px 0px 0px 0px;
}

.contactsPanelLeft {
   margin-right: 5px;
}	
	
.contactsPanelLeft p, .contactsPanelRight p {
   margin-bottom: 0px;

}

/* for styling the store information and image blocks on the Stores page */

.storePanelLeft, .storePanelRight {
   width: 490px;
   padding: 10px 10px 10px 10px;
   border: 1px solid #CCCCCC;
	float: left;
	margin-top: 10px solid #ffffff;
	
}

.storePanelLeft img {
   float: right;
	margin-left:10px;	
}

.storePanelRight img {
   float: left;
	margin-right:10px;
}

.storePanelRight p {
   margin-bottom: 0px;
	margin-left: 260px;
}

.storePanelLeft p {
   margin-bottom: 0px;
}


/* Define footer panel - place five of these horizontally in the footer section */
/* Full width of footer is 770= 5*(149+5) */

.footerPanel {
   width: 149px;
   float: left;
   padding: 0px 0px 0px 5px;
}


/* 5. CONTEXTUAL SELECTORS */
/* to define property values for elements depending on context */


/* Define how header and list appear in the footer section */
#footer h3 {
   font-size: 11px;
   font-family:Arial, Helvetica, sans-serif;
   font-weight:bold;
   color: #CC6600;
   margin-bottom:0px;
}

#footer ul {
   list-style-type: none;
}

#footer li {
   font-size: 11px;
   font-family:Arial, Helvetica, sans-serif;
}


/* Define how links appear in the footer section */

#footer a:link,#footer a:visited {
   color:#000000;
   font-weight:normal;
   text-decoration: none;
}

#footer a:hover {
   color: #cc6600;
   text-decoration:none;
}

#navigation ul {
   list-style-type: none;
   padding: 0 0 0px;
}

#navigation li {
   font-size: 16px;
   font-family: Trebuchet MS;
   display: inline; /* places the navigation items next to each other horizontally */
   text-align: center;
}



/* Define how the links work in the top navigation */
/* The padding and margin-right control the size and spacing of the tabs */
	

#navigation a:link,#navigation a:visited {
	color: #FFFFFF;
    text-decoration: none;
	text-weight:bold;
	background:url(../images/navigation/menu_background.jpg);
    margin-right: 0px; /* adds space between the tabs */
	margin-left:0px;
	padding: 0px 18px; 
}

#navigation a:hover {
	padding: 0px 18px;
	text-decoration: none;
	margin-right: 0px; 
	color:#000000;
	text-weight:bold; 
}



/* 6. NAVIGATION SYSTEM  */
/* Define which tab to highlight on the page - i.e.  highlight HOME on homepage, CORPORATE on corporate pages... */

#homePage #homePageLink a:link, #homePage #homePageLink a:visited,
#companyOverviewPage #companyOverviewPageLink a:link, #companyOverviewPage #companyOverviewPageLink a:visited,
#csrPage #companyOverviewPageLink a:link, #csrPage #companyOverviewPageLink a:visited,
#expansionPlansPage #companyOverviewPageLink a:link, #expansionPlansPage #companyOverviewPageLink a:visited,
#historyPage #historyPageLink a:link, #historyPage #historyPageLink a:visited,
#clubcardPage #facilitiesOverviewPageLink a:link, #clubcardPage #facilitiesOverviewPageLink a:visited,
#facilitiesOverviewPage #facilitiesOverviewPageLink a:link, #facilitiesOverviewPage #facilitiesOverviewPageLink a:visited,
#productsPage #productsPageLink a:link, #productsPage #productsPageLink a:visited,
#storesPage #storesPageLink a:link, #storesPage #storesPageLink a:visited,
#contactPage #contactPageLink a:link, #contactPage #contactPageLink a:visited
 {
   background: #ffffff;
   border-bottom-color:#ffffff;
   color:#cc6600;
   text-decoration:none;
}