@charset "utf-8";
/*
Copyright is held by the original owners.
CSS Document: BLUE JUICE
Version: 2.00
*/

/*
ATTRIBUTES
**********
Font Primary: #000, verdana, 11px
Page Heading: #0d9cc0, impact/charcoal, 26px
Content Headings: #c46012, impact/charcoal, 22px 
__________

DIMENSIONS
**********
Main site width: 1430px/960px
Content Main: 527px > 150px
Gutter width: 24px
__________

CSS INDEX:
**********
+ Global Styles
  - Links
+ Page Layout
  - Header
  - Content
  - AutoBox
+ Footer
+ Navigation
  - Primary
+ Forms
+ Tables
+ Content
  - Headings
  - Lists
  - Boxes

__________

*/

/*
=================================
GLOBAL STYLES
*/

* {
	margin:0em;
	padding:0em;
	border:none;
	list-style:none;
}

button {
	cursor:pointer;
}

#blue_juice {
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:70%;
	color:#000;
}
	
* .accessible {
	display:block;
	position:absolute;
	left:-9999em;
	z-index:0;
	height:0px;
	width:0px;
	line-height:0px;
	font-size:0px;
	float:left;
	clear:none;
	visibility:collapse;
}

.invisible {
	display:none;
}	

.right {
	float:right;
}

.left {
	float:left;
}

.center {
	text-align:center;
}

.image.right {
	margin:0em 0em 1.5em 1.5em;
}

.image.left {
	margin:0em 1.5em 1.5em 0em;
}

.image.center {
	margin:0em 0em 1.5em 0em;
}

	/* LINKS */
	a {
		color:#b623bc;
		text-decoration:underline;
	}
	
	a:link {
		color:#0087a9;
	}
	a:visited {
		color:#0d9cc0;
	}
	a:hover {
		color:#c46012;
	}
	a:active {
		color:#c46012;
	}
	

/*
PAGE LAYOUT
*/


/* NOTE: FOOTER AT ABSOLUTE BOTTOM OF PAGE. TO INCREASE RESERVED SPACE, INCREASE CONTENT CONTAINER BOTTOM PADDING  */
html {
	height:100%;
}


body {
	background:url(../images/bg_html.jpg) center bottom repeat-y;	
	min-width:960px;
	height:100%;
}

#page {
	background:url(../images/bg_page.jpg) center 285px no-repeat;
	position:relative;
	min-height:100%;
	_position:static;	
	overflow:visible;
}

#content_container {
	min-height:724px;
	_height:724px;
	background: url(../images/bg_content.jpg) center 33px repeat-y;
	margin:0em auto;
	clear:both;
	position:relative;
	z-index:1;
	width:960px;
	left:-8px;
	padding-bottom:50px;
	overflow:visible;
}

#content_container #content {
	margin:0px 0px;
	padding:24px;
	float:left;
}

#blue_juice #content_container .col3 {
	width:536px;
}
#blue_juice #content_container .col2 {
	width:756px;
}

#header {
	position:relative;
	margin:0px auto;
}

#content_container #colA, #content_container #colC {
	width:193px;
	padding:18px 0px 36px 0px;
	float:left;
	position:relative;
}

#content_container #colA {
	margin-left:-5px;
}

#content_container #colC {
	float:right;
	margin-right:-5px;
}

	#content_container #colA .bg, #content_container #colC .bg {
		position:absolute;
		top:-5px;
		width:209px;
		height:25px;
		background:url(../images/bg_column_C.png) top left no-repeat;
	}

	#content_container #colA .bg {
		left:-6px;
	}
	
	#content_container #colC .bg {
		right:-6px;
	}

	/* BOXES */
	#content_container #colA .box, #content_container #colC .box {
		position:relative;
		padding:0px 18px 7px 5px;
		background:url(../images/bg_box.gif) left bottom no-repeat;
		margin-bottom:18px;
	}
	
		/* LINKS */
		
		#content_container .box a:link {
			color:#000000;
		}
		#content_container .box a:visited {
			color:#000000;
		}
		#content_container .box a:hover {
			color:#fde50c;
		}
		#content_container .box a:active {
			color:#fde50c;
		}
	
	
	
		/* AUTO CORNERS */
		#content_container .box .auto_corner {
			position:absolute;
			bottom:0px;
			left:0px;
			width:196px;
			height:12px;
			display:block;
			background-position:left bottom;
			background-repeat:no-repeat;
			padding:0em;
			margin:0em;
		}
		
		#content_container .box .auto_corner.oddHeight {
			bottom:-1px;
		}
		
		#content_container .styleA .auto_corner {
			background-image:url(../images/bg_box_c.gif);
		}
		#content_container .styleB .auto_corner {
			background-image:url(../images/bg_box_a.gif);
		}
		#content_container .styleC .auto_corner {
			background-image:url(../images/bg_box_d.gif);
		}
		#content_container .styleD .auto_corner {
			background-image:url(../images/bg_box_b.gif);
		}
		
		#content_container .styleA .inner .auto_corner {
			background-image:url(../images/bg_box_c_inner.gif);
		}
		#content_container .styleB .inner .auto_corner {
			background-image:url(../images/bg_box_a_inner.gif);
		}
		#content_container .styleC .inner .auto_corner {
			background-image:url(../images/bg_box_d_inner.gif);
		}
		#content_container .styleD .inner .auto_corner {
			background-image:url(../images/bg_box_b_inner.gif);
		}
		
	

	/* HEADER */
	#header {
		position:relative;
		height:245px;
		background-position:center top;
		background-repeat:no-repeat;
		min-width:960px;
	}
	
	 /* IF USING AN IMAGE IN THE BANNER, NOTE: AWKWARD PAGE RESIZING */
	#header #banner {
		margin:0em auto;
		text-align:center;
		min-width:960px;
	}
	
		#header.banner_A, #header {
			background-image:url(../images/banner_fox.jpg);
		}
		#header.banner_B {
			background-image:url(../images/banner_octopus.jpg);
		}
		#header.banner_C {
			background-image:url(../images/banner_mongoose.jpg);
		}
		#header.banner_D {
			background-image:url(../images/banner_spider.jpg);
		}
		#header.banner_E {
			background-image:url(../images/banner_hawk.jpg);
		}
		#header.banner_F {
			background-image:url(../images/banner_panther.jpg);
		}
		#header.banner_G {
			background-image:url(../images/banner_elephant.jpg);
		}

		

	
	#header #company {
		position:absolute;
		top:106px;
		margin-left:50%;
		left:-450px;
	}
	#header #company span {
		position:absolute;
		left:-9999em;
	}
	
	#header #company a {
		display:block;
		width:312px;
		height:52px;
		background: url(../images/logo_bluejuice.png) center top no-repeat;
	}
	
/*
FOOTER
*/
#footer {
	background:url(../images/bg_footer.jpg) center bottom no-repeat;
	height:33px;
	clear:both;
	min-width:960px;

	/* PLACE AT ABSOLUTE BOTTOM OF PAGE */
	position:absolute;
	_position:fixed;
	bottom:0px;
	left:0px;
	width:100%;	
	z-index:30;
}

#footer #site_design a {
	display:block;
	background:url(../images/site_design_flip_creative.gif) left top no-repeat;
	width:96px;
	height:23px;
	margin-left:50%;
	position:relative;
	top:4px;
	left:370px;
	z-index:20;
}

#footer #site_design a span {
	position:absolute;
	left:-9999em;
}


/*
=================================
NAVIGATION
*/	

	/* PRIMARY */
	#nav_primary {
		background:url(../images/bg_nav_primary.jpg) center top no-repeat;
		height:40px;
		position:relative;
		z-index:11;
		clear:both;
	}
	
	#nav_primary #nav {
		width:960px;
		margin:0px auto;
		text-align:center;
	}
	
	#nav_primary a span {
		font-family:Impact, Charcoal, sans-serif;
		font-size:20px;
		color:#fff;
		letter-spacing:.20em;
		text-transform:uppercase;
		font-weight:normal;
	}
	
	#nav_primary li {
		display:-moz-inline;
		display:inline;		
		position:relative;
		z-index:12;
		margin:0em 6px;
	}
	
	#nav_primary a {
		display:inline-block;
		z-index:12;
		text-decoration:none;
		background:none;
		line-height:32px;
		height:32px;
		padding:4px 8px 0em 8px;
	}
	
	#nav_primary a:hover {
		background-color:#d37620;
	}
		
		/* NAV MENU */
		#nav_primary #nav ul a {
		}
		
		#nav_primary #nav ul a span {
			position:relative;
			left:auto;
			top:auto;
		}
		
		#nav_primary #nav ul a:hover {
		} 
		
		#nav_primary ul ul li a { /* first level  */
		}
		#nav_primary #nav ul ul li a { /* second level */
		}
		#nav_primary #nav ul ul ul li a { /* third level  */
		}
		
		#nav_primary #nav ul {
			position:absolute;
			left:-9999em; /* Hide UL from screen */
			width:240px;
		}
		
		#nav_primary #nav .sfhover ul, #nav_primary #nav li:hover ul {
			position:absolute;
			left:0px; /* Hover or JS action */
			top:40px;
			background:#90336f;
			z-index:13;
		}
		
			#nav_primary #nav .sfhover ul ul, #nav_primary #nav li:hover ul ul {
				position:absolute;
				left:-9999em; /* Hide 2nd level UL from screen */	
			}
			
			#nav_primary #nav ul .sfhover ul , #nav_primary #nav ul li:hover ul {
				position:absolute;
				left:239px; /* Hover or JS action to see 2nd level */
				top:0px;
				z-index:13;
				background:#444;
				width:240px;
			}
			
				#nav_primary #nav .sfhover ul ul ul, #nav_primary #nav li:hover ul ul ul {
					left:-9999em; /* Hide 3rd level UL from screen */	
				}
				
				#nav_primary #nav ul ul .sfhover ul , #nav_primary #nav ul ul li:hover ul {
					left:239px; /* Hover or JS action to see 3rd level */
					top:0px;
					background:#343434;
					z-index:16;
				}	


/*
CONTENT
*/

	/* headings */
	#content_container h1, #content_container h2, #content_container h3 {
		color:#0d9cc0;
		font-family:Impact, Charcoal, Tahoma, sans-serif;
		font-weight: normal;
		font-size:2.3em;
		margin-bottom:12px;
	}
	
	#content_container h2 {
		margin-top:24px;
	}
	
	#content_container h3 {
		color:#c46012;
		margin-top:12px;
		font-size:1.8em;
		line-height:normal;
	}	
	
	#content_container h4 {
		color:#c46012;
		font-size:1.5em;
	}
	
	#content_container h5 {
		font-size:1.2em;
		color:#0d9cc0;
	}
	
	
	/* LISTS */
	#content_container ul, #content_container ol {
		margin-bottom:10px;
		margin-left:1.4em;
	}
	
	#content_container li ul, #content_container li ol {
		margin-bottom:0em;
	}
	
	#content_container ol li {
		list-style-type:decimal;
		margin-left:1.6em;
		margin-top:.4em;
	}
	
	#content_container ul li {
		list-style:disc;
		margin-left:1.6em;
		margin-top:.4em;
	}
	
	#content_container p + ul {
		margin-top:-12px;
	}		
	

#content_container p {
	margin-bottom:1.2em;
}

#content_container .component {
	margin-bottom:2.4em;
	text-align:center;
}

#content_container .box .component {
	margin-bottom:.5em;
}

#content_container .breakout {
	display:block;
	font-size:1.3em;
	margin:.7em 0em;
}

	#content_container .check_us {
		overflow:auto;
		padding-bottom:18px;
		margin:0em;
	}

	#content_container .check_us li {
		float:left;
		list-style:none;
		white-space:nowrap;
		padding:0em;
		margin:0em;
		margin-left:8px;
	}
	
	#content_container .check_us li:first-child {
		margin-left:0px;
	}