/*

Screen Stylesheet for Advanced Bionics
Created by Rareview Interactive
http://www.rareview.com

*/

/* =Imports
============================================================================== */

	@import url("resets.css");

/* =Base
============================================================================== */

	/* General
	-------------------------------------------------------------------------- */
		
		body {
			min-width: 964px;
			font: 62.5%/1.5 Tahoma, Arial, Helvetica, sans-serif, "Lucida Grande", "Lucida Sans", Verdana;
			background: url(../files/bg-header.jpg) top left repeat-x #fff;
			color: #646464;
			}
	
	/* Links
	-------------------------------------------------------------------------- */
	
		a, a:visited {
			color: #3584AB;
			text-decoration: none;
			}
			
		a:hover {
			text-decoration: underline;
			}

/* =Navigations
============================================================================== */

	/* Main Navigation
	-------------------------------------------------------------------------- */
	
		#main-nav {
			padding: 3px 2px 0 2px;
			width: 960px;
			height: 39px;
			background: url(../files/main-nav.jpg) top left no-repeat;
			position: absolute;
			bottom: 0;
			}
			
		/* main navigation list */
			
		#main-nav ul {
			margin: 0;
			list-style: none;
			float: left;
			}
			
		#main-nav ul li {
			height: 39px;
			float: left;
			}
			
		#main-nav ul li a, #main-nav ul li a:visited {
			padding-left: 19px;
			height: 39px;
			text-decoration: none;
			display: block;
			float: left;
			}
			
		#main-nav ul li a em {
			padding: 2px 22px 0 0;
			height: 37px;
			line-height: 37px;
			font-size: 1.2em;
			font-style: normal;
			color: #506169;
			text-shadow: #fff 1px 1px 1px;
			background: url(../files/main-nav-buttons.jpg) top right no-repeat;
			display: block;
			float: left;
			cursor: pointer;
			}
		
		#main-nav ul li a:hover, #main-nav ul li.selected a {
			text-decoration: none;
			background: url(../files/main-nav-buttons.jpg) -10px -39px no-repeat;
			}
			
		#main-nav ul li a:hover em, #main-nav ul li.selected a em {
			background: url(../files/main-nav-buttons.jpg) center right no-repeat;
			}
			
		#main-nav ul li a:active, #main-nav ul li a:focus {
			margin-right: -1px;
			padding-left: 20px;
			background: url(../files/main-nav-buttons.jpg) -454px -78px no-repeat;
			position: relative;
			left: -1px;
			}
			
		#main-nav ul li a:active em, #main-nav ul li a:focus em {
			background: url(../files/main-nav-buttons.jpg) bottom right no-repeat;
			}
			
		/* first link in main navigation - has rounded top left corner */
		
		#main-nav ul li:first-child a {
			padding-left: 20px;
			background: url(../files/main-nav-buttons.jpg) 0 0 no-repeat;
			}
		
		#main-nav ul li:first-child a:hover {
			background: url(../files/main-nav-buttons.jpg) 0 -39px no-repeat;
			}
			
		#main-nav ul li:first-child a:active, #main-nav ul li:first-child a:focus {
			margin-right: 0;
			background: url(../files/main-nav-buttons.jpg) 0 -78px no-repeat;
			left: 0;
			}
			
	/* Secondary Navigation Section
	-------------------------------------------------------------------------- */
		
		#secondary-nav {
			height: 416px;
			position: relative;
			}
			
		#secondary-nav ul {
			position: absolute;
			top: 95px;
			left: 10px;
			}
			
		#secondary-nav ul li img {
			position: relative;
			top: 14px;
			left: 60px;
			border: 0;
			}
		
		/* buttons */
		
		#secondary-nav ul li a, #secondary-nav ul li a:visited {
			width: 224px;
			height: 75px;
			background-position: 0 -225px;
			background-repeat: no-repeat;
			display: block;
			}
			
		#secondary-nav ul li a:hover {
			background-position: 0 -75px;
			}
			
		#secondary-nav ul li a:active, #secondary-nav ul li a:focus {
			background-position: 0 -150px;
			}
			
		#secondary-nav ul li.selected a {
			background-position: 0 0 !important;
			}
			
		/* button 1 */
		
		#secondary-nav ul li.secondary-nav-button-1 a {
			background-image: url(../files/secondary-nav-button-1.png);
			}
			
		/* button 2 */
		
		#secondary-nav ul li.secondary-nav-button-2 a {
			background-image: url(../files/secondary-nav-button-2.png);
			}
			
		/* button 3 */
		
		#secondary-nav ul li.secondary-nav-button-3 a {
			background-image: url(../files/secondary-nav-button-3.png);
			}
			
	/* Tertiary Navigation
	-------------------------------------------------------------------------- */
		
		#tertiary-nav {
			width: 960px;
			height: 100px;
			overflow: hidden;
			position: relative;
			}
			
		body.orange-theme #tertiary-nav { background: url(../files/tertiary-nav-orange.jpg) top left no-repeat; }
		body.blue-theme #tertiary-nav { background: url(../files/tertiary-nav-blue.jpg) top left no-repeat; }
		body.green-theme #tertiary-nav { background: url(../files/tertiary-nav-green.jpg) top left no-repeat; }


	/* Secondary Navigation Grey
	-------------------------------------------------------------------------- */
	
		#secondary-nav-grey {
			padding: 0px;
			width: 960px;
			height: 39px;
			background: url(../files/secondary-nav-grey.jpg) top left no-repeat;
			position: relative;
			bottom: 0;
			}
			
		/* secondary navigation list */
			
		#secondary-nav-grey ul {
			margin: 0;
			list-style: none;
			float: left;
			}
			
		#secondary-nav-grey ul li {
			height: 39px;
			float: left;
			}
			
		#secondary-nav-grey ul li a, #main-nav ul li a:visited {
			padding-left: 19px;
			height: 39px;
			text-decoration: none;
			display: block;
			float: left;
			}
			
		#secondary-nav-grey ul li a em {
			padding: 2px 22px 0 0;
			height: 37px;
			line-height: 37px;
			font-size: 1.2em;
			font-style: normal;
			color: #506169;
			text-shadow: #fff 1px 1px 1px;
			background: url(../files/secondary-nav-buttons-grey.jpg) top right no-repeat;
			display: block;
			float: left;
			cursor: pointer;
			}
		
		#secondary-nav-grey ul li a:hover, #secondary-nav-grey ul li.selected a {
			text-decoration: none;
			background: url(../files/secondary-nav-buttons-grey.jpg) -10px -39px no-repeat;
			}
			
		#secondary-nav-grey ul li a:hover em, #secondary-nav-grey ul li.selected a em {
			background: url(../files/secondary-nav-buttons-grey.jpg) center right no-repeat;
			}
			
		#secondary-nav-grey ul li a:active, #secondary-nav-grey ul li a:focus {
			margin-right: -1px;
			padding-left: 20px;
			background: url(../files/secondary-nav-buttons-grey.jpg) -454px -78px no-repeat;
			position: relative;
			left: -1px;
			}
			
		#secondary-nav-grey ul li a:active em, #secondary-nav-grey ul li a:focus em {
			background: url(../files/secondary-nav-buttons-grey.jpg) bottom right no-repeat;
			}
			
		/* first link in main navigation - has rounded top left corner */
		
		#secondary-nav-grey ul li:first-child a {
			padding-left: 20px;
			background: url(../files/secondary-nav-buttons-grey.jpg) 0 0 no-repeat;
			}
		
		#secondary-nav-grey ul li:first-child a:hover {
			background: url(../files/secondary-nav-buttons-grey.jpg) 0 -39px no-repeat;
			}
			
		#secondary-nav-grey ul li:first-child a:active, #secondary-nav-grey ul li:first-child a:focus {
			margin-right: 0;
			background: url(../files/secondary-nav-buttons-grey.jpg) 0 -78px no-repeat;
			left: 0;
			}
/* =Header
============================================================================== */

	/* General
	-------------------------------------------------------------------------- */
	
		#header {
			width: 100%;
			height: 150px;
			background: url(../files/bg-header-highlight.jpg) top center no-repeat;
			}
			
		#header .copy {
			margin: 0 auto;
			max-width: 964px;
			height: 150px;
			position: relative;
			}
			
	/* Logo
	-------------------------------------------------------------------------- */
	
		a#logo, a#logo:visited {
			width: 101px;
			height: 101px;
			background: url(../files/logo.jpg) top left no-repeat;
			display: block;
			text-indent: -9999px;
			overflow: hidden;
			position: absolute;
			top: 5px;
			left: 2px;
			}
			
		a#logo:hover {
			text-decoration: none;
			background: url(../files/logo.jpg) bottom left no-repeat;
			}
		a#logo-earcare, a#logo-earcare:visited{
			width: 170px;
			height: 53px;
			background: url(../files/earcare_logo.png) bottom right no-repeat;
			display: block;
			text-indent: -9999px;
			overflow: hidden;
			position: absolute;
			bottom: 45px;
			right: 12px;
			}
	
		a#logo-earcare:hover {
			text-decoration: none;
			background: url(../files/earcare_logo.png) bottom left no-repeat;
			}
	
	/* Log In/Out Message
	-------------------------------------------------------------------------- */
	
		#login-msg {
			font-size: 1.1em;
			position: absolute;
			top: 10px;
			right: 0;
			}
			
		#login-msg p {
			padding-right: 10px;
			line-height: 2.4em;
			color: #fff;
			text-shadow: #223f4d 1px 1px 1px;
			float: left;
			}
			
		#login-msg a, #login-msg a:visited {
			padding-left: 6px;
			height: 27px;
			text-decoration: none;
			background: url(../files/button-welcome-left.jpg) top left no-repeat;
			display: block;
			float: left;
			}
			
		#login-msg a em {
			padding: 0 10px 0 4px;
			height: 27px;
			line-height: 2.4em;
			font-style: normal;
			color: #506169;
			text-shadow: #fff 1px 1px 1px;
			background: url(../files/button-welcome-right.jpg) top right no-repeat;
			display: block;
			float: left;
			cursor: pointer;
			}
			
		#login-msg a:hover {
			text-decoration: none;
			background: url(../files/button-welcome-left.jpg) center left no-repeat;
			}
			
		#login-msg a:hover em {
			background: url(../files/button-welcome-right.jpg) center right no-repeat;
			}
			
		#login-msg a:active, #login-msg a:focus {
			background: url(../files/button-welcome-left.jpg) bottom left no-repeat;
			}
			
		#login-msg a:active em, #login-msg a:focus em  {
			background: url(../files/button-welcome-right.jpg) bottom right no-repeat;
			}
			
	/* Search
	-------------------------------------------------------------------------- */
	
		#search {
			padding: 7px 0px 0 0;
			float: right;
			}
			
		#search label {
			padding: 0 10px 0 20px;
			line-height: 2.4em;
			color: #9da8ae;
			font-size: 1.2em;
			background: url(../files/search-icon.gif) center left no-repeat;
			float: left;
			}
			
		#search span.search-input {
			width: 199px;
			height: 26px;
			background: url(../files/search-input.jpg) top left no-repeat;
			display: block;
			float: left;
			}
			
		#search span.search-input input {
			padding: 7px 5px 0 5px;
			width: 189px;
			height: 19px;
			line-height: 19px;
			color: #506169;
			background: transparent;
			border: 0;
			display: block;
			}
			
/* =Content
============================================================================== */

	/* General
	-------------------------------------------------------------------------- */
	
		#content {
			margin: 0 auto;
			width: 960px;
			}
		
		#content .copy {
			margin-bottom: 20px;
			width: 960px;
			background: url(../files/content-bottom-divide.gif) bottom center no-repeat;
			float: left;
			}
			
		/* left column */

		div#leftCol {
		float: left; padding-right: 20px; width: 620px; padding-top: 20px;
		}

		/* right column */

		div#rightCol {
		float: left; width: 320px; padding-top: 20px;
		}
			
	/* Headings, Paragraphs, Lists, Preformatted Code
	-------------------------------------------------------------------------- */
		
		#content .copy p, #content .copy ul, #content .copy ol, #content .copy dl, #content .copy pre{
			margin-bottom: 2em;
			padding: 0;
			font-size: 1.2em;
			}
			
		.modalText p {
		font-size: 1.2em;
		}
			
			
		h1, h2, h3, h4, h5, h6 {
			font-weight: normal;	
			}
			
		h1 {
			margin-bottom: .7em;
			font-size: 2.1em;
			text-transform: uppercase;
			}
			
		h2 {
			margin-bottom: .9em;
			font-size: 1.4em;
			}
			
		h3 {
			font-size: 1.3em;
			font-weight:bold;
			}


		#content .copy ul {
			list-style: none;
			}

		#content .copy ul li {
			padding-left: 15px;
			margin-top: 8px;
			margin-top: 8px;
			background: url(../files/list-arrow.gif) 0 .45em no-repeat;
			}

		#content .copy div.caption ul li {
			padding-left: 4px;
			margin-top: 8px;
			margin-top: 8px;
			background: none;
			list-style-type: disc;
			}


		/* section titles - special <h1> headings that have an underline and less margin */
		
		.section-title {
			margin-bottom: .2em;
			padding-bottom: .5em;
			border-bottom: 1px solid #ffd7b1;
			}
			
		/* superscript */
		
		sup {
			font-size: .8em;
			position: relative;
			bottom: .3em;
			}
			
		/* footnote */
		
		#content .copy p.footnote {
			font-size: 1em;
			color: #9f9f9f;
			}
			
	/* Homepage Carousel
	-------------------------------------------------------------------------- */
		
		#home-carousel {
			width: 960px;
			height: 416px;
			background: url(../files/bg-home-carousel.jpg) top right no-repeat;
			position: relative;
			overflow: hidden;
			}
			
#home-carousel.bea-carousel {		background: url(../files/bg-bea-carousel.jpg) top right no-repeat;}
#home-carousel.free-offer {		background: url(../files/FreeOfferPanel.gif) top right no-repeat;}

		/* carousel photos */
		
		#home-carousel-photos {
			width: 640px;
			height: 416px;
			float: left;
			}
		
		#home-carousel-photos li {
			position: relative;
			}
			
		/* carousel text */
			
		#home-carousel-text {
			width: 320px;
			height: 320px;
			overflow: hidden;
			position: absolute;
			top: 25px;
			float: right;
			}
			
		#home-carousel-text li {
			padding: 0 25px 0 40px;
			color: #fff;
			height: 320px;
			}
			
		#home-carousel-text li a.arrow-button {
			margin: 10px 0 0 -4px;
			float: left;
			}
			
		#home-carousel-text li blockquote {
			width: 255px;
			padding: 15px 0;
			font-size: 1.6em;
			line-height: 1.6em;
			float: left;
			}
			
		#home-carousel-text li cite {
			width: 255px;
			font-size: 1.2em;
			font-style: normal;
			line-height: 1.8em;
			float: left;
			}
			
		/* carousel nav */
			
		#home-carousel-nav {
			width: 255px;
			position: absolute;
			bottom: 25px;
			right: 25px;
			}
			
		#home-carousel-nav a, #home-carousel-nav a:visited {
			padding-right: 1px;
			width: 22px;
			height: 23px;
			line-height: 1.9em;
			font-size: 1.2em;
			color: #fff;
			text-decoration: none;
			text-align: center;
			display: block;
			float: left;
			}
			
		#home-carousel-nav a.selected {
			color: #2bb2ea !important;
			background: url(../files/button-carousel-selected.png) top left no-repeat;
			}
			
	/* Homepage Link Trio - the three image links at the bottom of the page for Connect, Learn, and Contact.
	-------------------------------------------------------------------------- */
	
		#home-trio {
			width: 960px;
			margin: 0;
			list-style: none;
			}
		
		#home-trio li {
			width: 320px;
			height: 40px;
			float: left;
			}
			
		#home-trio li a, #home-trio li a:visited {
			width: 320px;
			height: 40px;
			text-decoration: none;
			position: relative;
			display: block;
			}
			
		#home-trio li a:hover {
			text-decoration: none;
			}
			
		#home-trio li a span {
	width: 300px;
	color: #fff;
	background: url(../files/bg-home-trio-blue.png) no-repeat;
	position: absolute;
	bottom: -10px;
	left: 0;
	cursor: pointer;
	padding-top: 11px;
	padding-right: 10px;
	padding-bottom: 11px;
	padding-left: 10px;
			}
			
		#home-trio li#home-trio-left a span {
			background-position: bottom left;
			}
			
		#home-trio li#home-trio-center a span {
			background-position: center left;
			}
			
		#home-trio li#home-trio-right a span {
			background-position: bottom right;
			}
			
		#home-trio li a span img {
			padding: 11px 10px 11px 40px;
			background: url(../files/button-arrow.png) 0 0 no-repeat;
			float: left;
			}
			
		#home-trio li a:hover span img {
			background: url(../files/button-arrow.png) 0 -34px no-repeat;
			}
			
		#home-trio li a:active span img, #home-trio li a:focus span img {
			background: url(../files/button-arrow.png) 0 -68px no-repeat;
			}
			
		#home-trio li a span em {
			padding-top: 2px;
			font-style: normal;
			font-size: 1.8em;
			float: left;
			}
	
	/* Tooltips
	-------------------------------------------------------------------------- */
		
		.tooltip {
			position: relative;
			}
		
		a.tooltip-button, a.tooltip-button:visited {
			width: 49px;
			height: 49px;
			position: relative;
			display: block;
			text-indent: -9999px;
			overflow: hidden;
			background: url(../files/tooltip-button.png) top left no-repeat;
			}
			
		a.tooltip-button:hover {
			background: url(../files/tooltip-button.png) center left no-repeat;
			}
			
		a.tooltip-button:active, a.tooltip-button-selected {
			background: url(../files/tooltip-button.png) bottom left no-repeat !important;
			}
		
		.tooltip-top {
			padding: 16px 0 0 0;
			width: 298px;
			background: url(../files/tooltip-top.png) top left no-repeat;
			display: none;
			position: absolute;
			top: 3px;
			right: 30px;
			}
			
		.tooltip-bottom {
			margin-bottom: -6px;
			padding: 0 45px 16px 20px;
			width: 233px;
			font-size: 1.2em;
			line-height: 1.5em;
			color: #2e5e6d;
			background: url(../files/tooltip-bottom.png) bottom left no-repeat;
			display: block;
			}
			
		.tooltip-bottom a, .tooltip-bottom a:visited {
			font-weight: bold;
			color: #0089d3;
			}
		
		/* carousel tooltips positioning for each specific photo - create a new "photo-X-tooltip" class for each tooltip that goes in the carousel. Replace "X" with number */
			
		#home-carousel-photos .home-photo-1-tooltip {
			position: absolute;
			top: 260px;
			right: 100px;
			}
			
		/* tooltip on top of photo on example interior page */
		
		#secondary-nav .interior-photo-1-tooltip {
			position: absolute;
			top: 250px;
			right: 120px;
			}
	
	/* Arrow Buttons
	-------------------------------------------------------------------------- */

		a.arrow-button, a.arrow-button:visited {
			padding: 11px 0 0 40px;
			height: 23px;
			background: url(../files/button-arrow.png) top left no-repeat;
			display: block;
			}
			
		a.arrow-button:hover {
			background: url(../files/button-arrow.png) center left no-repeat;
			}
			
		a.arrow-button:active, a.arrow-button:focus {
			background: url(../files/button-arrow.png) bottom left no-repeat;
			}
			
/* =Footer
============================================================================== */

	/* General
	-------------------------------------------------------------------------- */
	
		#footer {
			margin: 0 auto;
			width: 960px;
			}
		
		#footer .copy {
			padding: 20px 0;
			width: 960px;
			font-size: 1.1em;
			text-align: center;
			}
		
		/* footer list of links */	
			
		#footer .copy ul {
			margin-bottom: 10px;
			list-style: none;
			}
			
		#footer .copy ul li {
			padding: 3px 10px;
			list-style: none;
			display: inline;
			background: url(../files/footer-link-divides.gif) center left no-repeat;
			}
			
		#footer .copy ul li:first-child {
			background: none;
			}
			
		/* footer copyright paragraph */	
			
		#footer .copy p {
			color: #87a2af;
			}


		/* left column */
	
	
		
		#content-left-col {

			padding: 20px 10px 0px 10px;

			width: 620px;

			float: left;

			}

			

		/* right column */

		
	
		#content-right-col {

			padding: 20px 10px 0px 10px;

			width: 300px;

			float: right;

			}



/* ACTION LINK */

			
		a.actionLink span{
			padding: 7px 10px 7px 40px;
			}

		a.actionLink{
			height: 33px;
			line-height: 33px;
			font-weight: bold;
			display: block;
			background: url(../files/button-arrow.png) 0 0 no-repeat;
			}
			
		a.actionLink:hover{
			background: url(../files/button-arrow.png) 0 -34px no-repeat;
			text-decoration: none;
			}
			
		a.actionLink:active{
			background: url(../files/button-arrow.png) 0 -68px no-repeat;
			}

div.minBorder{
border: 2px solid #CCDCE1;
}

div.actionLinks {
border: 2px solid #CCDCE1;
padding: 24px;
}

div.actionLinks {
font-size: 12px;
line-height: 18px;
}

div.actionLinks img {
margin-right: 8px;
}


div.actionLinks h2 {
border-bottom: 2px solid #CCDCE1;
color: #99B9C3;
font-size: 16px;
font-weight: normal;
text-transform: uppercase;
padding-bottom: 8px;
}

textarea.TinyInfoTA {
width: 292px;
}