/***** COLORS *****

00009d title blue

d1d1d1 border grey
fafafa background lt grey


/*******************/
#slides {
	position: absolute;
	
	z-index: 1;
	background-color: #c87b10;
}

 
body, table, .default
{
font: 16px/22px comic sans ms, arial narrow, verdana, helvetica, geneva, sans-serif;
color: #000;		
padding: 0px;
margin: 0px;
padding-top: 0px;	
}

body#public
{
/*background:transparent url('images/bg_tiling.jpg') center top repeat-y;*/
text-align: left;
}

.alt_color
{
color: #00009d;
}

/* Generic heading styling */
h1, h2, h3, h4
{
font-family: comic sans ms, arial narrow, verdana, helvetica, geneva, sans-serif;
color: #00009d;
padding-bottom: 4px;
/*font-weight: bold;*/
}

h1
{
font-size: 26px;
line-height: 26px;
padding-bottom: 15px;
display: inline-block;
}

h2, .editor_title
{
font-size: 22px;
line-height: 28px;
display: inline-block;
}

h3
{
font-size: 16px;
line-height: 20px
}

h4
{
font-size: 14px;
line-height: 18px
}

.default_color
{
color: #3c3c3c;	
}

.bold
{
font-weight: bold;
}

.emphasis
{
font-style: italic;
/*font-size: 28px;*/
font-weight: bold;
}

.copyright
{
font-size: 14px;
}

/* LoVe HAte anchors */
a {color: #00009d; text-decoration: none}
a:link {color: #00009d; }
a:visited {color: #00009d; }
a:hover {color: #00009d;}
a:active {color: #00009d; }

a img
{
border: 0px;
}

		
							
/**** MAIN LAYOUT ****/

#container
{
padding-top: 0px;
text-align: center;
margin: 0 auto;
/*background-color: #fff;*/
background:transparent url('images/bg_tiling.jpg') top center repeat-x;
}

#container_2
{
padding-top: 0px;
text-align: center;
margin: 0 auto;
background:transparent url('images/clouds.jpg') top center no-repeat;
}

	#container_3
	{
	width: 1000px;
	text-align: left;
	margin: 0 auto;
	border: 0px solid #000000;	
	}		
							
		#header
		{		
		position: relative;		
		border: 0px solid #000000;
		width: 1000px;
		height: 323px;	
		text-align: left;
		background-image: url(images/dash_header.jpg); 
		background-repeat: no-repeat; 	
		z-index: 100;		
		}		
		
			#header_flash
			{
			border: 0px solid #000000;
			position: relative;
			left: -85px;
			top: 75px;
			width: 198px;
			height: 198px;	
			z-index: 10;
			/*background-image: url(images/dazzle_logo_for_site.png); 
			background-repeat: no-repeat; 			*/
			}	
		
			#logo
			{
			position: absolute;
			left: 30px;
			top: 140px;
			width: 359px;
			height: 105px;	
			background-image: url(images/logo_for_site.png); 
			background-repeat: no-repeat; 
			z-index: 20;			
			}			
			
			#slogan
			{
			position: absolute;
			left: 11px;
			top: 8px;
			width: 523px;
			height: 117px;	
			background-image: url(images/teaching_kids.png); 
			background-repeat: no-repeat; 
			z-index: 20;			
			}			
			
			#jaime_and_adam_flash
			{
			border: 0px solid #000000;
			position: absolute;
			left: 530px;
			top: -115px;
			width: 250px;
			height: 400px;	
			z-index: 10;
			/*background-image: url(images/dazzle_logo_for_site.png); 
			background-repeat: no-repeat; 			*/
			}	
			
			#jaime_and_adam_image
			{
			border: 0px solid #000000;
			position: absolute;
			left: 558px;
			top: 90px;
			width: 226px;
			height: 193px;	
			z-index: 10;
			background-image: url(images/jamie_and_adam_image.png); 
			background-repeat: no-repeat; 			
			}	
			
			#nav_container
			{
			position: absolute;
			left: 90px;
			top: 283px;	
			width: 850px;			
			border: 0px solid #fff;					
			text-align: center;
			z-index: 200;
			}
			
				#nav_container_padding
				{
				padding-left: 0px;
				padding-right: 0px;
				padding-bottom: 0px;
				}
					
		
		#content_container
		{
		border: 0px solid red;
		width: 1000px;
		min-height: 300px;
		background-image: url(images/content_bg_tiling.png); 
		background-repeat: repeat-y;
		padding-top: 0px;
			
		}				
				
			#left_column
			{
			float: left;
			width: 270px;			
			text-align: left;
			border: 0px solid #000;		
			position: relative;					
			top: 0px;
			left: 0px;		
						
			}
			
			#left_image
			{
			position: absolute;	
			left: -300px;
			top: -50px;
			border: 0px solid red;
			width: 282px;
			height: 243px;
			background-image: url(images/left_image.png); 
			background-repeat: no-repeat;
			padding-top: 0px;
			}	
			
			#right_image
			{
			position: absolute;	
			left: 1010px;
			top: -10px;
			border: 0px solid red;
			width: 282px;
			height: 243px;
			background-image: url(images/right_image.png); 
			background-repeat: no-repeat;
			padding-top: 0px;
			}	
			
				#left_column_padding
				{
				padding-left: 15px;
				padding-right: 0px;
				padding-bottom: 0px;
				padding-top: 10px;
				}				
				
					#box_1
					{
					position: relative;	
					left: -20px;
					border: 0px solid red;
					width: 268px;
					height: 180px;
					background-image: url(images/box_1.png); 
					background-repeat: no-repeat;
					padding-top: 0px;
					margin-top: 10px;
					}	
					
					#box_2
					{
					position: relative;	
					left: -20px;
					top: -40px;
					border: 0px solid red;
					width: 268px;
					height: 182px;
					background-image: url(images/box_2.png); 
					background-repeat: no-repeat;
					padding-top: 0px;
					}		
					
					#box_3
					{
					position: relative;	
					left: -20px;
					top: -70px;
					border: 0px solid red;
					width: 268px;
					height: 180px;
					background-image: url(images/box_3.png); 
					background-repeat: no-repeat;
					padding-top: 0px;
					}	
					
					#box_4
					{
					position: relative;	
					left: -20px;
					top: -105px;
					border: 0px solid red;
					width: 268px;
					height: 182px;
					background-image: url(images/box_4.png); 
					background-repeat: no-repeat;
					padding-top: 0px;
					display: none;
					}				
					
					#facebook_like_box
					{
					position: relative;	
					left: 10px;
					top: -100px;
					border: 0px solid red;
					/*width: 240px;
					height: 320px;*/
					padding-top: 0px;
					margin: 0 auto;					
					display: block;
					
					}				
					
													
			#main_content
			{		
			float: left;
			width: 710px;	
			border: 0px solid red;
			text-align: left;
			position: relative;	
			left: 0px;				
			min-height: 200px;
			overflow: visible;
				
			}			
			
				#home_image
				{
				position: relative;
				left: -10px;
				top: 0px;
				width: 708px;
				height: 343px;	
				background-image: url(images/home_image.png); 
				background-repeat: no-repeat; 
				z-index: 20;			
				}					
	
				#main_content_padding
				{
				padding-left: 15px;
				padding-top: 10px;
				padding-right: 30px;
				padding-bottom: 0px;
				}		
				
					#title_container
					{
					position: relative;
					left: 0px;
					top: 0px;
					margin-top: 10px;
					margin-bottom: 15px;
					}
				
					
		#footer
		{
		position: relative;
		border: 0px solid #000000;
		text-align: center;
		height: 146px;
		width: 1000px;
		background-image: url(images/dash_footer.jpg); 
		background-repeat: no-repeat; 		
		}	
		
			#sub_nav_container
			{
			position: absolute;
			top: 130px;
			left: 930px;
			border: 0px solid #000000;
			}		
		
		#website_by
		{
		color: #000;
		}
		
		#website_by a
		{
		color: #000;
		}



/******************* SLIDER CSS *******************/

#slider							
{ 
border: 0px solid red;
/*background: url(images/slider-bg.jpg); */
width: 960px;
height: 260px; /* if no height is set, slider will default to the height of the slide with the largest block of text */
overflow: hidden;
position: absolute; 
margin: 0px 0px 0px 0px; 
top: 130px;
left: 20px;
/*display: none;*/
}
								  
	/* DEFAULT is for three panels in width, adjust as needed. This only matters if JS is OFF, otherwise JS sets this. */								  
	#mover
	{ 
	width: 2760px; /*width of entire slider area multiplied by the amout of slides used*/
	position: absolute; 
	}
	
		.slide /* set height and width to that of the #slider! */
		{		
		border: 0px solid green;
		position: relative; 
		width: 960px; 
		height: 307px;
		float: left; 		
		}
		
			.slide_padding
			{
			padding: 0px 0px 0px 0px;			
			}
		
				.slide h2 /* use this to set position of slider title */		
				{				
				position: relative;
				color: #00009d;
				font-size: 26px;
				font-style: italic;
				top: 40px; 
				left: 10px; 			
				}
				
				.slide .left_slide_container /* use this to set position of left slide */	
				{					
				position: relative;
				top: 50px; 
				left: 10px; 
				border: 0px solid #000; 
				font-size: 24px; 
				line-height: 28px; 
				width: 410px; /* use this to set width of left slide */		
				}
				
					.slide img.learn_more 
					{
					border: 0px solid #000;
					position: relative; 
					top: 15px; 
					left: 140px; 
					display: block;
					display: none;
					}
				
				.slide .right_slide_container 
				{
				position: absolute;
				border: 0px solid #000;				 
				top: 0px; /* DO NOT use this for vertical positioning of right slide */	
				left: 430px; /* use this for HORIZONTAL positioning of right slide */			
				width: 526px;  /* use this to set width of right slide */	
				/*height: 260px;*/  /* use this to set height of right slide - not really necessary as content should stretch the container*/					
				}
				
					.right_slide_container_padding
					{					
					padding: 0px 0px 0px 0px;	 /* use this for VERTICAL positioning of right slide */										
					border: 0px solid red;	
					display: block;		 		
					}
				
						.slide img
						{		
						border: 0px solid #000;						
						top: 0px; 	/* dont touch this setting */			
						}
										
		
#slider-stopper
{
position: absolute; 
top: 1px; 
right: 20px; 
background: #ac0000; 
color: white;
padding: 3px 8px; 
font-size: 10px; 
text-transform: uppercase; 
z-index: 1000; 
}

	
/******* PRODUCTS PAGE ********/

#home_page ul
{

}

	#home_page ul li
	{
	padding: 0px 0px 5px 0px;
	color: #00009d; /* color of bullets */
	
	}
	
	#home_page ul span
	{
	padding: 0px 0px 5px 0px;
	color: #3c3c3c; /* color of list text */
	}

/********* SET FOR GALLERY TABLE WIDTH **********/

#gallery #gallery_table
{
width: 665px;  /* reduce to fit into small content area */
/*width: 700px;*/
border: 0px solid #d1d1d1;
border-collapse: separate;
border-spacing: 10px; /* reduce to fit into small content area. */
empty-cells: show;
}

#gallery .image_container
{
width: 200px; /* reduce to fit into small content area. NOTE...bg image will be trimmed if below 200px */
/*background-color: #fff;*/
padding-bottom: 11px; 
}

#gallery table td
{
padding: 6px; /* reduce to fit into small content area. */
}

#gallery table td img
{
border: 0px solid #570909;
width: 190px;  /* reduce to fit into small content area */
margin: 0 auto;
/*padding: 5px;*/
cursor: pointer;

}

#gallery .image_caption
{
width: 170px;
/*background-image: url(images/box_shade_top.jpg);
background-position: top left;
background-repeat: repeat-x;	*/
margin: 0 auto;	
padding: 0px;
border: 0px solid #000;
line-height: 28px;
/*margin-top: 5px;*/
}