﻿
/* Reset */

body {color:#000;}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0;}
table{border-collapse:collapse;border-spacing:0;}
fieldset,img{border:0;}
address,caption,cite,code,dfn,em,th,var{font-style:normal;font-weight:normal;}
li {list-style:none;}
caption,th {text-align:left;}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}
q:before,q:after{content:'';}
abbr,acronym {border:0;font-variant:normal;}
sup,sub {line-height:-1px;vertical-align: text-top;}
sub {vertical-align:text-bottom;}
input, textarea, select{font-family:inherit;font-size:inherit;font-weight:inherit;}


img{vertical-align:top; border:0px;}
legend{height:0; font-size:0;}
a, input, select, textarea{outline:none;}
.clear, .Clear{clear:both; font-size:0px; line-height:0px;}

/* Common Styles */

.floatRight{float:right;}
.floatLeft{float:left;}
.pad{padding-bottom:10px;}
.doublePad{padding-bottom:20px;}

.paging{height:20px;}
.paging .previous A{display:block; width:65px; height:20px; background:url(../i/pagingSprite.gif);}
.paging .previous A:hover{background-position: 0px -20px;}
.paging .previous A:active{background-position: 0px -40px;}
.paging .numbers{height:20px; cursor:default; background:url(../i/pagingSprite.gif) 0px -60px; padding:0px 10px;}
.paging .numbers A{color:#848679; text-decoration:none; font-size:11px; font-weight:bold;}
.paging .numbers A.selected{color:#34352E;}
.paging .numbers A:hover{color:#34352E;}
.paging .leftBorder{border-left:solid 1px #C5C6BB;}
.paging .rightBorder{border-right:solid 1px #C5C6BB;}
.paging .next A{display:block; width:42px; height:20px; background:url(../i/pagingSprite.gif) -65px 0px;}
.paging .next A:hover{background-position: -65px -20px;}
.paging .next A:active{background-position: -65px -40px;}

.TVI-form{}
.TVI-formField{margin-bottom:10px;}
.TVI-form .labelCell{margin-bottom:2px;}
.TVI-form LABEL{color:#194E89; font-size:1.4em; font-weight:bold;}
.TVI-form .textBox INPUT{border:solid 1px #C9C9B9; color:#4B4D42; font-size:1.2em; padding:4px;}
.TVI-form .textArea TEXTAREA{border:solid 1px #C9C9B9; color:#4B4D42; font-size:1.2em; padding:4px;}
.TVI-form .dropDownList SELECT{border:solid 1px #C9C9B9; color:#4B4D42; font-size:1.2em; padding:4px;}

.mainBox{width:690px; margin:15px 0 0 5px;}
.mainBoxTop{height:9px; font-size:0px; background:url(../i/mainBoxSprite.gif);}
.mainBoxMiddle{background:url(../i/mainBoxSprite.gif) -690px 0px;}
.mainBoxBottom{height:10px; font-size:0px; background:url(../i/mainBoxSprite.gif) 0px -9px;}
.mainBoxInner{width:640px; margin:auto;}

.content{font-size:1.2em; color:#524F47;}
.content H1{font-size:2em; color:#194E89; font-family:Georgia; margin-bottom:10px;}
.content H1.withSubtitle{margin-bottom:2px;}
.content H2{font-size:1.4em; color:#194E89; margin-bottom:10px;}
.content H3{font-size:1.4em; color:#524F47; margin-bottom:10px;}
.content A{color:#194E89; text-decoration:none;}
.content A:hover{text-decoration:underline;}


/* Template Styles */

HTML{background:white; background:url(../i/back.jpg) center top;}
BODY{font-family:Trebuchet MS, Segoe UI, Tahoma, Arial, Verdana, Sans-Serif; font-size:62.5%; color:#524F47; background:url(../i/backShadow.jpg) center top repeat-x;}

#header{width:980px; margin:auto; height:140px; background:url(../i/header.jpg) center bottom no-repeat;}
#main{width:980px; margin:auto; background:url(../i/mainBack.png) repeat-y;}

#topBar{position:relative; width:960px; margin:auto; height:30px; background:url(../i/menuBarBack.jpg);}

#topMenuWrapper{z-index:1000000; position:absolute; left:285px;}
#topMenu{}
#topMenu LI{float:left;}
#topMenu LI A{display:block; height:30px; background:url(../i/topMenu.jpg);}
#topMenu .home{width:53px;}
#topMenu .home A{background-position:0px 0px;}
#topMenu .home A:hover{background-position:0px -30px;}
#topMenu .about{width:97px;}
#topMenu .about A{background-position:-53px 0px;}
#topMenu .about A:hover{background-position:-53px -30px;}
#topMenu .about.selected A{background-position:-53px -30px;}
#topMenu .news{width:51px;}
#topMenu .news A{background-position:-150px 0px;}
#topMenu .news A:hover{background-position:-150px -30px;}
#topMenu .downloads{width:85px;}
#topMenu .downloads A{background-position:-201px 0px;}
#topMenu .downloads A:hover{background-position:-201px -30px;}
#topMenu .contact{width:63px;}
#topMenu .contact A{background-position:-286px 0px;}
#topMenu .contact A:hover{background-position:-286px -30px;}

#topMenu .about{position:relative;}
#topMenu .about .layer{position:absolute; top:30px; width:130px; background:#4A81B8; opacity:0.92; filter:alpha(opacity=92); display:none;}
#topMenu .about .aboutMenuItem{padding-top:3px;}
#topMenu .about .aboutMenuItem A{background:none; font-size:1.1em; height:20px; padding:0px 0 0 8px; color:White; text-decoration:none;}
#topMenu .about .aboutMenuItem A:hover{background:url(../i/aboutMenuItemBack.jpg);}

#newsletterSignup{position:absolute; left:644px; width:316px; height:30px;}
#newsletterSignupForm{position:absolute;}
#newsletterSignupForm-email-control{position:absolute; padding:0; width:119px; left:156px; top:8px; height:16px; font-size:1.1em; color:#2B4B6F; border:0; background:none;}
#newsletterSignupButton{position:absolute; left:276px; top:6px; width:18px; height:18px;}
#newsletterSignupButton A{display:block; height:18px; background:url(../i/newsletterSignupButton.gif);}
#newsletterSignupButton A:hover{background-position:-18px 0px;}
#newsletterSignupButton A:active{background-position:-36px 0px;}
#newsletterSignup .thankYou{display:none; position:absolute; top:0px; width:316px; background:url(../i/newsletterAdded.gif);}
#newsletterSignup .thankYou A{display:block; height:30px;}

#mainColumns{width:960px; margin:auto;}
#mainColumnsLeft{float:left; width:250px;}
#mainColumnsRight{float:left; width:710px;}
#mainColumnsRightInner{width:690px;}

#searchPanel .sp{background:url(../i/searchPanelSprite.png);}
#searchPanel #searchPanelTop{width:230px; height:11px; margin-left:15px;}

#searchPanel #searchPanelClosed{width:230px; margin-left:15px;}
#searchPanel #searchPanelClosed .button{}
#searchPanel #searchPanelClosed .button A{display:block; height:25px; background-position:0px -18px;}
#searchPanel #searchPanelClosed .button A:hover{background-position:0px -43px;}

#searchPanel #searchPanelOpen{width:230px; margin-left:15px; background-position:-230px 0px;}
#searchPanel #searchPanelOpenInner{width:220px; margin:auto;}
#searchPanel .searchPanelSection .fade{height:7px; background-position:0px -11px; background-repeat:no-repeat;}
#searchPanel .searchPanelSection .inner{width:190px; margin:auto; padding:5px 0px;}
#searchPanel .searchPanelSection .title{font-size:1.2em; color:White; padding-bottom:3px;}
#searchPanel .options .option{float:left; font-size:1.1em; padding-bottom:2px; color:#6B9FC4;}
#searchPanel .options .option SPAN{position:relative; left:5px; bottom:2px;}
#searchPanel #searchPanelManufacturersList .option{width:95px;}
#searchPanel #searchPanelManualsList .option{width:62px;}
#searchPanel #searchPanelPriceRangesList .option{width:95px;}

#searchPanel #searchPanelSubmitWrapper{padding:10px 0;}
#searchPanel #searchPanelSubmit{width:188px; margin:auto;}
#searchPanel #searchPanelSubmit A{display:block; height:24px; background-position:0px -68px;}
#searchPanel #searchPanelSubmit A:hover{background-position:0px -92px;}
#searchPanel #searchPanelSubmit A:active{position:relative; top:1px; background-position:0px -116px;}

#searchPanel #searchPanelClose{width:230px; margin-left:15px;}
#searchPanel #searchPanelClose A{display:block; height:31px; background-position:0px -140px;}
#searchPanel #searchPanelClose A:hover{background-position:0px -171px;}

.menuBox{width:230px; margin-left:15px;}
.menuBoxTopMakin{height:36px; background:url(../i/menuBoxTopMakin.gif);}
.menuBoxTopJohannus{height:36px; background:url(../i/menuBoxTopJohannus.gif);}
.menuBoxMiddle{background:url(../i/menuBoxMiddle.gif);}
.menuBoxBottom{height:11px; background:url(../i/menuBoxBottom.gif);}

.menuBox UL{width:220px; margin:auto;}
.menuBox UL LI A{display:block; padding:2px 10px; border-bottom:dashed 1px #D3D3C3; font-size:1.2em; text-decoration:none;}
.menuBox .open{border-bottom:dashed 1px #D3D3C3;}
.menuBox .open A{background:url(../i/leftMenuSubCatBack.jpg); border:none; padding:1px 10px;}
.menuBox .subCats LI A{border:0; color:#9C9C8F; padding:1px 10px 1px 20px; background:none;}

.menuBoxMakin A{color:#194E89;}
.menuBoxJohannus A{color:#AD6124;}

#leftMenu{width:230px; margin-left:15px;}
#leftMenu LI{}
#leftMenu LI A{display:block; text-decoration:none; height:45px; background:url(../i/leftMenu.gif);}
#leftMenu LI A:hover{background-position:-230px 0px;}
#leftMenu LI SPAN{ color:white; font-size:1.7em; font-family:Georgia; position:relative; top:12px; left:20px; }

#leftMenu .technologies A{background-position:0px 0px;}
#leftMenu .technologies A:hover{background-position:-230px 0px;}
#leftMenu .installation A{background-position:0px -45px;}
#leftMenu .installation A:hover{background-position:-230px -45px;}
#leftMenu .services A{background-position:0px -90px;}
#leftMenu .services A:hover{background-position:-230px -90px;}
#leftMenu .hire A{background-position:0px -135px;}
#leftMenu .hire A:hover{background-position:-230px -135px;}
#leftMenu .events A{background-position:0px -180px;}
#leftMenu .events A:hover{background-position:-230px -180px;}
#leftMenu .preownedOrgans A{background-position:0px -225px;}
#leftMenu .preownedOrgans A:hover{background-position:-230px -225px;}
#leftMenu .links A{background-position:0px -270px;}
#leftMenu .links A:hover{background-position:-230px -270px;}

#footer{width:960px; margin:auto; height:26px; background:url(../i/footerBack.gif);}
#footer .inner{color:#7C7C6D; text-align:right; padding:5px 20px;}
#footer .inner A{color:#7C7C6D; text-decoration:none;}
#footer .inner A:hover{text-decoration:underline;}



/* Home Page */

#homePageHeaderWrapper{padding-top:12px;}
#homeHeader{background:#969681;}
#homeHeader .pic{float:left; width:430px;}
#homeHeader .text{float:right; width:210px; color:White; font-size:1.2em}
#homeHeader .text .inner{padding:15px;}

#homeColumns{margin-top:15px;}
#homeColumnsLeft{float:left; width:410px; margin-left:25px;}
#homeColumnsRight{float:right; width:218px; margin-right:20px;}

#homeNewsBox{width:218px;}
#homeNewsBox .top{height:34px; background:url(../i/homeNewsBoxSprite.gif);}
#homeNewsBox .middle{background:url(../i/homeNewsBoxSprite.gif) -218px 0px;}
#homeNewsBox .bottom{height:34px; background:url(../i/homeNewsBoxSprite.gif) 0px -34px;}
#homeNewsBox .inner{width:210px; margin:auto;}

#homeNewsBox .story{padding:15px; border-bottom:dashed 1px #D3D3C3;}
#homeNewsBox .story IMG{float:left; margin:0px 10px 4px 0px;}
#homeNewsBox .story H3 A{font-size:1.3em; color:#194E89; font-weight:bold; text-decoration:none;}
#homeNewsBox .story .date{color:#82A5CC;}
#homeNewsBox .story .text{font-size:1.1em; color:#517DAD;}
#homeNewsBox .story A{color:#194E89; font-weight:bold;}


/* Category page */
#categorySearch{ margin-bottom:15px;}
#categorySearch .mainTitle{font-family:Georgia; font-size:1.8em; padding:4px 0 6px 0; color:#194E89;}
#categorySearch .main{width:680px; margin:auto; background:#E5E5D5;} 
#categorySearch .columns{padding:20px 20px 0 20px;}
#categorySearch .column{float:left;}
#categorySearch .column .title{font-weight:bold; font-size:1.2em; color:#3D3B35; padding-bottom:4px;}
#categorySearch .option{padding-bottom:3px;}
#categorySearch .option SPAN{position:relative; top:-3px; left:5px; font-size:1.1em; color:#6C6961;}
#categorySearch .manufacturer{width:90px;}
#categorySearch .manuals{width:100px;}
#categorySearch .stops{width:90px;}
#categorySearch .console{width:150px;}
#categorySearch .priceRange{width:110px;}
#categorySearch .installation{width:100px;}
#categorySearch .searchButtonWrapper{padding:0 0 20px 0;}
#categorySearch .searchButton{float:right; width:94px;}
#categorySearch .searchButton A{display:block;  height:24px; background:url(../i/categorySearchButton.jpg);}
#categorySearch .searchButton A:hover{background-position:0px -24px;}
#categorySearch .searchButton A:active{position:relative; top:1px; background-position:0px -48px;}

#categoryResults{ padding-top:15px;}
#categoryResults .item{padding-bottom:20px;}
#categoryResults .pic{float:left; width:180px; margin-right:20px;}
#categoryResults .details{float:left; width:440px;}
#categoryResults H2{color:#194E89; font-size:1.4em; font-weight:bold; margin-bottom:8px;}
#categoryResults P{padding-bottom:5px;}


/* Product Page */
#productColumns{padding-bottom:40px; padding-top:10px;}
#productColumnsLeft{float:left; width:260px; margin-right:12px;}
#productColumnsRight{float:left; width:368px;}
#productPhoto{margin-bottom:10px;}
#productThumbs .thumb{float:left;}
#productThumbs IMG{margin-bottom:10px;}
#productThumbs .notLast{margin-right:10px;}

#productTabs{position:relative; left:4px;}
#productTabs .panelTop{height:9px; background:url(../i/productTabsSprite.gif);}
#productTabs .panelMiddle{padding:12px 25px 12px 25px; background:url(../i/productTabsSprite.gif) -368px 0px;}
#productTabs .panelBottom{height:11px; background:url(../i/productTabsSprite.gif) 0px -9px;}
#productTabs .tabs{position:relative; height:34px; z-index:100;}
#productTabs .tabs LI{float:left;}
#productTabs .tabs A{display:block; height:34px; background:url(../i/productTabsSprite.gif);}

#productTabs .tabs .description{width:98px;}
#productTabs .tabs .description A{background-position:0px -54px;}
#productTabs .tabs .description A:hover{background-position:0px -20px;}
#productTabs .tabs .description.active A{background-position:0px -20px;}
#productTabs .tabs .specification{width:105px;}
#productTabs .tabs .specification A{background-position:-98px -54px;}
#productTabs .tabs .specification A:hover{background-position:-98px -20px;}
#productTabs .tabs .specification.active A{background-position:-98px -20px;}
#productTabs .tabs .audio{width:58px;}
#productTabs .tabs .audio A{background-position:-203px -54px;}
#productTabs .tabs .audio A:hover{background-position:-203px -20px;}
#productTabs .tabs .audio.active A{background-position:-203px -20px;}
#productTabs .tabs .video{width:60px;}
#productTabs .tabs .video A{background-position:-261px -54px;}
#productTabs .tabs .video A:hover{background-position:-261px -20px;}
#productTabs .tabs .video.active A{background-position:-261px -20px;}

.player {border:1px solid #E6E6D6; width:318px; }

#productTabs .panels{position:relative; top:-3px; z-index:50;}

.specsTable{ margin-bottom:10px;}
.specsTable TD{ vertical-align:top;}
.specsTable .name{width:120px; font-weight:bold;}
.extraSpecs .name{width:280px;}
.extraSpecs .stretch{}

.audioItem{padding-bottom:20px;}
.audioItem H3{margin-bottom:5px;}
.audioItem P{margin-bottom:10px;}


/* News Pages */
#newsItems{width:680px; margin-left:5px; border-top:solid 1px #D0D0C1;}
#newsItems .newsItem{border-bottom:solid 1px #D0D0C1; padding: 20px 0px;}

#newsItems .newsItem .thumb{float:left; width:80px; margin:0px 20px;}
#newsItems .newsItem .details{float:left; width:430px; margin-right:20px;}
#newsItems .newsItem .buttonColumn{float:left; width:88px; margin-right:20px;}
#newsItems .newsItem H3{color:#194E89; font-size:1.4em; font-weight:bold;}
#newsItems .newsItem .date{color:#848679; font-size:1.1em; font-weight:bold;}

.newsSummaryTopPaging{padding-top:8px;}
.newsSummaryBottomPaging{padding-top:15px;}

.newsArticlePhoto{float:left; margin:0 10px 10px 0;}
.newsArticle H3{color:#194E89; font-size:1.6em; font-weight:bold;}


/* Info Page */
.infoSectionLeft, .infoSectionRight{padding-bottom:20px;}
.infoSectionLeft .infoSectionPhoto{float:left; margin:0 10px 10px 0;}
.infoSectionRight .infoSectionPhoto{float:right; margin:0 0px 10px 10px;}


/* Downloads Page */
#downloadsTabs{position:relative; left:-4px; width:648px;}
#downloadsTabs .panelTop{height:9px; background:url(../i/downloadsTabs.gif);}
#downloadsTabs .panelMiddle{padding:12px 0px; background:url(../i/downloadsTabs.gif) -648px 0px;}
#downloadsTabs .panelBottom{height:11px; background:url(../i/downloadsTabs.gif) 0px -9px;}
#downloadsTabs .tabs{position:relative; height:34px; z-index:100;}
#downloadsTabs .tabs LI{float:left;}
#downloadsTabs .tabs A{display:block; height:34px; background:url(../i/downloadsTabs.gif);}

#downloadsTabs .tabs .brochures{width:98px;}
#downloadsTabs .tabs .brochures A{background-position:0px -54px;}
#downloadsTabs .tabs .brochures A:hover{background-position:0px -20px;}
#downloadsTabs .tabs .brochures.active A{background-position:0px -20px;}
#downloadsTabs .tabs .audio{width:95px;}
#downloadsTabs .tabs .audio A{background-position:-98px -54px;}
#downloadsTabs .tabs .audio A:hover{background-position:-98px -20px;}
#downloadsTabs .tabs .audio.active A{background-position:-98px -20px;}
#downloadsTabs .tabs .documents{width:99px;}
#downloadsTabs .tabs .documents A{background-position:-193px -54px;}
#downloadsTabs .tabs .documents A:hover{background-position:-193px -20px;}
#downloadsTabs .tabs .documents.active A{background-position:-193px -20px;}

#downloadsTabs .panels{position:relative; top:-3px; z-index:50;}

.downloadsInner{width:640px; margin:auto;}
.downloadsIntro{padding:0 15px 15px 15px;}
.download{border-top:solid 1px #E0E0D8;}
.downloadInner{padding:15px;}
.download .leftColumn{width:400px; float:left;}
.download .rightColumn{width:200px; float:right;}
.download .rightColumn .player{width:200px;}


/* Contact Page */
.contactIntro{padding-bottom:20px;}
.contactColumns{}
.contactColumnsLeft{float:left; width:300px; padding-right:15px;}
.contactColumnsRight{float:left; width:300px; padding-left:15px; border-left:solid 1px #D0D0C1;}
.contactDetails{}
.contactDetails .row{}
.contactDetails .name{float:left; width:50px; color:#194E89; font-weight:bold;}
.contactDetails .value{float:left; width:200px;}
.contactDetails .value A{color:#524F47;}

#contactForm .textBox INPUT{width:290px;}
#contactForm .textArea TEXTAREA{width:290px; height:100px;}
#contactForm .dropDownList SELECT{width:300px;}

#contactForm .errors{color:#CC0000; font-size:1.1em; padding-bottom:10px;}
#contactForm .complete{display:none;}
#contactForm .loading{display:none;}

.map{height:280px; border:solid 1px #CCCCCC; margin-bottom:10px;}


/* Buttons */
.button{}
.button A{display:block; height:20px;}

.buttonMore A{height:20px; width:75px; background:url(../i/buttonReadMore.gif);}
.buttonMore A:hover{background-position:0px -20px;}
.buttonMore A:active{background-position:0px -40px;}

.buttonDownloadBrochures A{height:24px; width:148px; background:url(../i/buttonDownloadBrochures.gif);}
.buttonDownloadBrochures A:hover{background-position:0px -24px;}
.buttonDownloadBrochures A:active{background-position:0px -48px;}

.buttonMakeEnquiry{position:relative; left:7px;}
.buttonMakeEnquiry A{height:34px; width:360px; background:url(../i/buttonMakeEnquiry.gif);}
.buttonMakeEnquiry A:hover{background-position:0px -34px;}
.buttonMakeEnquiry A:active{background-position:0px -68px;}

.buttonMoreAudioTracks A{height:24px; width:148px; background:url(../i/buttonMoreAudioTracks.gif);}
.buttonMoreAudioTracks A:hover{background-position:0px -24px;}
.buttonMoreAudioTracks A:active{background-position:0px -48px;}

.buttonBackToNewsArticles A{height:24px; width:148px; background:url(../i/buttonBackToNewsArticles.gif);}
.buttonBackToNewsArticles A:hover{background-position:0px -24px;}
.buttonBackToNewsArticles A:active{background-position:0px -48px;}

.buttonDownloadNow A{height:24px; width:118px; background:url(../i/buttonDownloadNow.gif);}
.buttonDownloadNow A:hover{background-position:0px -24px;}
.buttonDownloadNow A:active{background-position:0px -48px;}

.buttonContactSubmit A{height:34px; width:120px; background:url(../i/buttonContactSubmit.gif);}
.buttonContactSubmit A:hover{background-position:0px -34px;}
.buttonContactSubmit A:active{background-position:0px -68px;}


