/*mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm

	

	Squirt Boom Burst

  

mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm*/


/*mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm 
mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm

	1. BASE STYLING
	
mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm
mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm*/

html { overflow: -moz-scrollbars-vertical; }

body {
	font-family: Arial, Verdana, Helvetica, sans-serif; 
	font-size:12px; 
	font-weight:normal;
	line-height: 16px;
	word-spacing: normal;
	letter-spacing: normal;
	text-transform: none;
	text-align: left;
	text-indent:0;
	white-space: normal;
	background: #e5e516 url(../images/bgBody.jpg) 50% 0 no-repeat;
	overflow: hidden;
	height: 100%;
	
	
}

/*-------------------------------------
	1a. Header
--------------------------------------*/

#header {
	position: relative;
	width: 950px;
	height: 100px;
	margin: 0px auto;
}

#header #logoSBB {
	float: left;
	margin: 0px 75px 0px 75px;
}

#header a.mainNav {
	display: block;
	position: relative;
	zoom: 1;
	float: left;
	text-indent: -9000px;
	margin-top: 20px;
}

#header a#mainNavSquirt {
	width: 182px;
	height: 56px;
	/*background: url(../images/navMain.png) 0 0 no-repeat;*/
	background: url(../images/navMain.gif) 0 0 no-repeat;
	
}

#header a#mainNavSquirt.selected, #header a#mainNavSquirt:hover { background-position: 0px -60px; }

#header a#mainNavBoom {
	width: 160px;
	height: 56px;
	/*background: url(../images/navMain.png) -182px 0 no-repeat;*/
	background: url(../images/navMain.gif) -182px 0 no-repeat;
}

#header a#mainNavBoom.selected, #header a#mainNavBoom:hover { background-position: -182px -60px; }

#header a#mainNavBurst {
	width: 185px;
	height: 56px;
	/*background: url(../images/navMain.png) -342px 0 no-repeat;*/
	background: url(../images/navMain.gif) -342px 0 no-repeat;
}

#header a#mainNavBurst.selected, #header a#mainNavBurst:hover { background-position: -342px -60px; }


/*-------------------------------------
	1b. Body
--------------------------------------*/

#container {
	position: relative;
	overflow: hidden;
	width: 939px;
	height: 0px;
	margin: 0px auto;	
}

#body {
	position: relative;
	overflow: hidden;
	width: 939px;
	height: 575px;
	margin: 0px auto;	
}

#body #content {
	position: relative;
	width: 889px;
	height: 525px;
	padding: 25px;
}

#body .squirt { background: url(../images/bgSquirt.jpg) 0 0 no-repeat; }
#body .boom { background: url(../images/bgBoom.jpg) 0 0 no-repeat; }
#body .burst { background: url(../images/bgBurst.jpg) 0 0 no-repeat; }
#body .generic { background: url(../images/bgGeneric.jpg) 0 0 no-repeat; }

/*-------------------------------------
	1c. Footer
--------------------------------------*/

#footer {
	position: relative;
	width: 939px;
	height: 80px;
	margin: 0px auto;
	padding-top: 20px;
	text-align: center;
	color:#7D7A1F;
	font-size:10px;
}

#footer a {
	color:#7D7A1F;
	font-size:10px;
	text-decoration:none;	
}

#footer p { margin-bottom: 10px; }


/*mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm 
mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm

	2. CONTENT
	
mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm
mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm*/

.iconContainer {
	position: relative;
	padding-top: 30px;
}

.iconContainer a.icon { 
	position: relative;
	display: block; 
	width: 90px;
	text-align: center;
	z-index: 150;
}

.iconContainer .icon span { position: absolute; text-indent: -9000px; }

.iconContent {
	position: absolute;
	top: 45px;
	left: 90px;
	background: url(../images/bgContentTile.jpg) 0 0 repeat-y;
	padding: 0px;
	z-index: 100;
	/*display: none;*/
	visibility: hidden;
	width: 700px;
}

.iconContent .copy { padding: 35px 35px 20px; }

.iconContent img.top {
	left: 0;
	top: 0;
	position: absolute;
}


/*mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm 
mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm

	3. PAGE LAYOUTS
	
mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm
mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm*/

.copyOnly p { margin: 0px 0px 10px 30px; }
.genericClose { position: absolute; right: 21px; top: 22px; }


/*-------------------------------------
	3a. Squirt - SBB Icon
--------------------------------------*/

p.sbbHeadline { font-weight: bold;  font-size: 16px; margin-bottom: 20px; padding-top: 3px; }
p.sbbHeadline span { color: #E0144C; font-size: 19px; }

p.sbbNextEvent { color: #E0144C; font-size: 15px; font-weight: bold; text-align: center; margin-bottom: 7px; }

p.sbbCalFooter { font-size: 10px; text-align: center; margin: 10px auto; }
p.sbbCalFooterSM { font-size: 10px; text-align: center; margin: 10px auto 0px auto; }

p.sbbCopy { margin: 0px 0px 16px 25px; }

ol.sbbOrdered { margin-left: 45px; font-weight: bold; }
ol.sbbOrdered li span { font-weight: normal; }

div#smallCal { width: 175px; float: right; }

div#sbbLeftColumn { width: 400px; }

#smallCal #eventsHome { margin-bottom: 10px; padding: 10px; width: 152px; height: 227px; background: url(../images/eventBGHome.jpg) no-repeat; }
#smallCal #monthHome { width: 130px; height: 37px; margin: 10px auto 0px auto; *padding-top: 10px; }
#smallCal #dayHome { width: 120px; height: 93px; margin: 10px auto; }
#smallCal #eventDetail { text-align: center;}
#smallCal #events #mySlidesHome, #smallCal #jFlowSlide { width: 155px; margin: 0px auto;}
#smallCal #mySlidesHome div { text-align: center; font-size: 11px; width: 155px; line-height: 13px; }

/*-------------------------------------
	3b. Squirt - Calendar Icon
--------------------------------------*/

#myController { display: none; }

.jFlowPrev, .jFlowNext{ cursor:pointer; }

#mySlides, #jFlowSlide { width: 180px; margin: 0px auto;}

#mySlides div { text-align: center; }

#slideControls, #slideControlsHome { position: absolute; visibility: hidden; margin-left: 24px; width: 150px; bottom: 29px; }

.jFlowPrev { float: left; }

.jFlowNext { float: left; }

.moreToday { float: left; padding: 0px 20px; }
					
#calendar {
	float: left;
	width: 400px;
	height: 385px;
}
#events {
	position: relative;
	float: left;
	padding: 20px 20px 0px 20px;
	width: 180px;
	height: 295px;
	background: url(../images/eventBG.jpg) no-repeat;
}

table#calTable td {  }

div.iconContainer #calendarPage { top: -75px; }

#month { width: 175px; height: 50px; margin: 0px auto 0px auto;  }
#day { width: 140px; height: 109px; margin: 0px auto; }
#eventDetail { text-align: center;}
p.calIntro { text-align: center; padding-bottom: 10px; }
.red { color: #E0144C; }

td.calBorderOn { border: 1px solid #cfcdcb; }
td.calBorderOff { border: none; }

/*-------------------------------------
	3c. Boom - Girl Talk Icon
--------------------------------------*/

div.iconContainer #girlTalkPage { top: -75px; }
#girlTalkPage p { padding: 30px 0px 0px 28px; width: 285px; }
#girlTalkPage img.gtPoster { padding-bottom: 20px; }

/*-------------------------------------
	3d. Boom - Can Icon
--------------------------------------*/

div.iconContainer #canPage  { top: -100px; }

/*-------------------------------------
	3e. Burst - Squirt Icon
--------------------------------------*/

.burstLeft { float: left; width: 420px; padding: 30px 0px; }
.burstLeft .facebook { position: relative; width: 287px; height: 76px; background: url(../images/outlineFB.gif) no-repeat; text-align: center; margin-left:50px; }
.burstLeft .facebook img.squirtIcon { position: absolute; left: -22px; top: 12px; }
.burstLeft .facebook img.facebookIcon { margin-top: 18px; }

.burstLeft p { margin-bottom: 15px; font-size: 12px; }
.burstLeft p.burstHeadline { font-size: 15px; font-weight: bold; }



.burstRight { float: left; width: 205px;  padding: 30px 0px; }
.burstRight .p106 { width: 201px; height: 172px; background: url(../images/outlineP106.gif) no-repeat; text-align: center; }
.burstRight .p106 .p106Icon { margin: 40px 0px 8px 0px; }
.burstRight .p106 p { font-size: 11px; line-height: 14px; }

/*-------------------------------------
	3f. Footer - Nutrition
--------------------------------------*/

table.nutrition { margin-left: 200px; margin-bottom: 50px;  }
table.nutrition th { color: #d8001e; padding: 5px;}
table.nutrition th span { color: #000; }
table.nutrition td {}
table.nutrition td.hr { background: url(../images/nutritionSep.gif) repeat-x; height: 15px;}
table.nutrition td.ing, table.nutrition th.ing { padding-left: 20px; }
table.nutrition td.small { font-size: 10px; padding: 10px; }


/*mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm 
mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm

	. GENERIC STYLING
	
mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm
mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm*/

a { color: #F00; }

h2 { margin: 0 0 0.5em 0; line-height: 1.4em; font-size: 1.27em; padding:0; }

h2.pageHeader { color:#E0144C; font-size:14px; }

.scroll-pane p {	overflow: visible; padding-bottom:0.0em; margin-top: 0; line-height:1.6em; margin-bottom:1.2em; }

.floatLeft, .floatLeftSpace { float:left; }

.floatLeftSpace { padding:0px 10px 0px 0; }

.floatLeftMoreSpace { padding:0px 20px 0px 0; }

.floatRight, .floatRightSpace, .floatRightMoreSpace { float:right; }

.floatRightSpace { padding:8px 0 8px 8px; }

.floatRightMoreSpace { margin:0 0 0px 20px; }

.center { text-align: center; }

.clearBoth { clear:both; }

.clearLeft { clear:left; }

.clearRight { clear:right; }

.faintBorder { border:1px solid #d6d6d6; }

.faintBorderRight { border-right:1px solid #D6D6D6; }

.faintBorderLeft { border-left:1px solid #D6D6D6; }

.faintBorderBottom { border-bottom:1px solid #D6D6D6; }

.faintBorderTop { border-top:1px solid #D6D6D6; }

.smallText { font-size:small; }

.smallerText { font-size:x-small; }

.extraSmallText { font-size:1em; }

.mediumText { font-size:1.2em; }

.largeText { font-size:1.5em; }

.hidden { display:none; }

.noBottomMargin { margin-bottom:0 !important; }

.noBorder { border:none !important; }

.noRborder { border-right:none !important; }

ul.nobullets { list-style:none; list-style-type:none; }

.lastFeature { border-bottom:2px solid #98BF4B; padding-bottom:1em; }

.noLeftMargin { margin-left:0 !important; }

.noTopMargin { margin-top: 0 !important; }

.noTopPadding { padding-top: 0 !important; }

.bold { font-weight: bold; }

	ol, ul { margin-left: 29px; }
	li { margin-bottom: 1.2em; }
	li.last { margin-bottom: 0px;}