/*** references to the layouts are in the designs folder ***/
/*** Bubbles_Website--Body_Area_Templates ***/

/***** I WOULDN'T CHANGE ANY STYLES FROM HERE THROUGH THE LAYOUT SECTION *****/
body 
{
    background: #97ceed url(../images/body_bg.jpg) repeat-x;
    font-family: Tahoma, Geneva, sans-serif;
}

#hd
{
    line-height: 1;
}

#hd img
{
    line-height: 1;
}

#container
{
    width: 986px;
    margin: auto;
}

#mainNav
{
    line-height: 1;
    background: url(../images/nav_bar.gif) no-repeat;
    margin-left: -3px;
    margin-right: -3px;
		position: relative;
		z-index: 1000;
}

/* This hack allows the ul element to clear its floated li elements in firefox, safari, and opera. */
#mainNav:after, .centeredMenu:after {

    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    height: 0;
    line-height: 0;
}

/* This hack does it for IE */
#mainNav, .centeredMenu {
    *zoom: 1;
}

#bd
{
    background: url(../images/body_bg_white.jpg) no-repeat;
    height: 531px;
    padding: 3px 15px 5px 17px;
    *margin-top: -3px;
}

/* combine a class size - small, medium or large - with this 
   div ID to end up with your content area column sizes */
/* example - <div id="bdContent" class="medium"> */
#bdContent
{
    border: solid 1px #bbbbbb; 
    _border: none;
    height: 384px;   
}

/* Combine a mainContent class - right, left - with this 
   div ID to end up with your main content column placement.
	 This also combines with whatever size you've chosen above
	 for bdContent to achieve the correct size of the mainContent
	 area for a given layout  */
/* example - <div id="mainContent" class="mainContentLeft"> */
#mainContent
{
    padding: 5px 8px;    
    height: 373px;
    overflow: auto;
}

#flashHolder
{
	position: absolute;
	z-index: 10;
}

/* combine a sidebar class - right, left - with this 
   div ID to end up with your side bar column placement.
	 this also combines with whatever size you've chosen above
	 for bdContent to achieve the correct size of the sidebar
	 for a given layout  */
/* example - <div id="sidebar" class="sidebarRight"> */
#sidebar
{
    
}

/****** WHOLE CLASS *****/
/* this class is for one column of content all the way across the page */

.wholeClass .mainContentLeft
{
    position: relative;
    width: 98.5%;
    
}


/* one main content rule to get a column in the middle of the whole page */
#mainContent #rightColUl
{
	float: right;
	width: 500px;
	*margin-top: -14px;
	
}

/****** SMALL CLASS *****/
/* THIS IS THE CLASS FOR 3 COLUMN LAYOUTS */
/* bubbles.website.template-3column.sidebar.left.jpg
	 bubbles.website.template-3column.sidebar.right.jpg */


/* if using a picture for this area, make sure width = 240px */
.small .sidebarRight
{
    width: 240px;
    float: right;
}

.small #mainContentLeft
{
    width: 688px;    
}


.small .sidebarLeft
{
    width: 240px;
    float: left;
}

.small #mainContentRight
{
    width: 688px;    
}

.small .left-col
{
    width: 330px;
    float: left;
}

.small .right-col
{
    margin-left: 350px;
}


/*****************************************/
/************* ONE-THIRD CLASS **************/
/* THIS IS THE CLASS FOR THE ONE THIRD PIC LAYOUT */

/* this class is for the one-third layout, pic on right side */
/* bubbles.website.template-one.third.right.jpg */
.oneThird .sidebarRight
{
    width: 315px;
    float: right;
}


.oneThird .mainContentLeft
{
    width: 619px;
    
}


/* this class is for the one-third pic layout, pic on left side */
/* bubbles.website.template-one.third.left.jpg */
.oneThird .sidebarLeft
{
    width: 315px;
    float: left;
}

.oneThird .mainContentRight
{
    width: 619px;
}


/********************************************************/
/******************** MEDIUM CLASS **********************/
/* THIS IS THE CLASS FOR THE HOME PAGE, STANDARD LAYOUT */

/* this class is for the regular layout, pic on right side */
/* this positioning is used on the home page */
/* bubbles.website.template-standard.right.jpg */
.medium .sidebarRight
{
    width: 388px;
    float: right;
}


.medium .mainContentLeft
{
    width: 546px;
		
}


/* this class is for the medium pic layout, left side */
/* bubbles.website.template-standard.left.jpg */
.medium .sidebarLeft
{
    width: 388px;
    float: left;
}

.medium .mainContentRight
{
    width: 547px;
}

/*****************************************/
/*************** LARGE CLASS *************/
/* THIS IS THE CLASS FOR THE LARGEST PICS */

/* this class is for the large pic layout, pic on right side */
/* bubbles.website.template-two.thirds.right.jpg */
.large .sidebarRight
{
    width: 632px;
    float: right;
}

.large .mainContentLeft
{
    width: 303px;
}



/* this class is for the large pic layout, pic on left side */
/* bubbles.website.template-two.thirds.left.jpg */
.large .sidebarLeft
{
    width: 632px;
    float: left;
}

.large .mainContentRight
{
    width: 303px;
}
/******************************************************/
/***** END OF CONTENT AREA LAYOUT CLASSES AND IDS *****/
/******************************************************/

/******************************************************/
/*** TEXT STYLES MAIN CONTENT AND SIDE CONTENT AREAS **/
/******************************************************/

#mainContent h1, #bdContent h1
{
    
    /* styles for heading text out for img    
    padding-bottom: 5px;*/    
    margin-top: 10px;
		font-family: "Arial Black", Gadget, sans-serif;
		font-size: 30px;
		padding-left: 12px;
		color: #FF3C94;
}

#mainContent h2, #bdContent h2
{
    margin-top: 10px;
    padding-bottom: 2px;
		font-family: "Arial Black", Gadget, sans-serif;
		font-size: 22px;
		padding-left: 12px;
		color: #131A6C;
}

#mainContent h3, #bdContent h3
{
    margin-top: 7px;
    padding-bottom: 2px;
		font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
		font-weight: bold;
		font-size: 18px;
		padding-left: 12px;
		color: #131A6C;
}

#mainContent h4, #bdContent h4
{
    margin-top: 7px;
    padding-bottom: 2px;
		font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
		font-weight: bold;
		font-size: 15px;
		padding-left: 12px;
		color: #FF158D;
}

#mainContent h5, #bdContent h5
{
    margin-top: 7px;
    padding-bottom: 2px;
		font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
		font-weight: bold;
		font-size: 15px;
		padding-left: 12px;
		color: #131A6C;
}

/* like h2 but pink */
#mainContent h6, #bdContent h6
{
    margin-top: 7px;
    padding-bottom: 2px;
		font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
		font-weight: bold;
		font-size: 22px;
		padding-left: 12px;
		color: #FF158D;
}


#mainContent .simuH4, #bdContent .simuH4
{
		font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
		font-weight: bold;
		font-size: 15px;
		color: #FF158D;	
}

#mainContent p, #bdContent p
{
    padding-left: 12px;
    font-size: 14px;
    color: #161c6d;
    margin-bottom: 17px;
    *line-height: 2;
    line-height: 18px;
}


/* Prevent large images from causing scroll bars*/
#mainContent img {
	max-width: 100%;
	max-height: 370px;
}

#mainContent .pinkTxt, #bdContent .pinkTxt
{
		color: #FF158D;	
}


#mainContent .pinkTxtB, #bdContent .pinkTxtB
{
	color: #0000FF;
	font-weight: bold;
}

#mainContent a:link, #mainContent a:visited, #bdContent a:link, #bdContent a:visited {
		color: #FF3C94;
		text-decoration: underline;
}

#mainContent a:hover, #bdContent a:hover {
		color: #1E28AC;
		text-decoration: underline;
}

#mainContent ul, #mainContent ol {
		margin-left: 40px;
		margin-bottom: 15px;
		margin-top: 15px;
}

#mainContent ul li	{
	list-style: outside disc;
	color: #333333;
	margin-bottom: 10px;
	margin-right: 7px;
}

#mainContent ol li	{
		list-style: outside decimal;
		color: #333333;
		margin-bottom: 3px;
		margin-right: 7px;
}

#mainContent ol li ul li	{
		list-style: outside disc;
		color: #333333;
		margin-right: 7px;
}


#mainContent #hours
{
    padding-top: 20px;
}

#sidebar p 
{
		font-size: 12px;
}

.buyNow
{		
		display: inline-block;
		vertical-align: bottom;
		padding: 0 0 0 5px;
		margin: 0;
}

.contactIcons
{
		float: left;
    padding: 10px;
   	text-align: center;
		vertical-align: middle;
}

#icons
{
    margin-top: 20px; 
}

#icons li
{
    float: left;
    padding: 0px 22px;
   	text-align: center;
   	font-weight: bold;	
		font-size: 12px;
		line-height: 11px;
}

#icons a:link, #icons a:visited
{				
		color: #161C6D;
		text-transform: uppercase;
		text-decoration: none;
}

#icons a:hover
{
	 color: #ff0d8b;
}

#mainContent .imgRight
{
		float: right;
		padding: 0 0 7px 7px;
		margin: -5px -6px -5px 0;
}

#mainContent .imgRightDown
{
		float: right;
		padding: 42px 0 0 7px;
		margin: 0 -6px -5px 0;
}


#mainContent .imgLeft
{
		float: left;
		padding: 0 7px 0 0;
		margin: -5px 0 -5px 0;
}

#mainContent .imgLeftDown
{
		float: left;
		padding: 42px 7px 0 0;
		margin: 0 0 -5px 0;
}

/******************************************************/
/********************** FOOTER STYLES *****************/
/******************************************************/

#ft p
{
    margin-top: -10px;
    text-align: center;
    font-family: Tahoma;
    font-size: 11px;
    color: #161c6d;
    line-height: 1.7;
}

#ft p#handwash
{
    margin-top: 7px;
    padding-bottom: 0;
}

.cleanGreen
{
	padding-left: 70px;
}