@import url("reset.css");

/*-----------------------------------------------------
	Defaults
-----------------------------------------------------*/
body { font:12px Arial, Helvetica, sans-serif; color:#5C5C5C; background:#f5f5f5 url(../imgs/bkg/bkg.jpg) repeat-x top center}
#skiplinks {position:absolute; left:-9999px;}
#wrapper{ width:889px; margin: 0 auto;}

/*-----------------------------------------------------
	Links
-----------------------------------------------------*/
a:link {text-decoration:none; color:#39729f; font-weight:bold} 
a:visited {text-decoration:none; color:#39729f; font-weight:bold}
a:hover, a:focus {text-decoration:underline;}
a:active {text-decoration:underline;}
a:focus {outline: 1px dotted #000;}

/*-----------------------------------------------------
	Type
-----------------------------------------------------*/

h1,h2,h3,h4,h5,h6 { font-family:Arial, Helvetica, sans-serif }

h1	{ font-size:38px; color:#000; font-weight:normal}
h2	{ font-size:33px; color:#000; margin-left:-10px;}
h3	{ font-size:20px; color:#000; margin-left:-10px; margin-bottom:15px; }
h4	{ font-size:20px; color:#5c5c5c; margin-left:-10px; margin-bottom:15px; font-weight:normal }
h5	{}
p	{ margin-bottom:15px }
li	{}
blockquote {}
cite {}
strong {font-weight:bold;}
em {font-style:italic;}
.strike { text-decoration:line-through}

/*-----------------------------------------------------
	Forms
-----------------------------------------------------*/

input, select, textarea, label { font:11px Verdana, Geneva, sans-serif; font-weight:bold}

/*-----------------------------------------------------
	IE6 Browser Upgrade Notice
-----------------------------------------------------*/
#upgrade-browser { font-family:Arial, Helvetica, sans-serif; color:#000; padding:20px; background: #fff url(../imgs/ie6-warning/grad.png) repeat-x bottom left }
#upgrade-browser p { font-size:12px; background:url(../imgs/ie6-warning/warning-icon.png) no-repeat; padding-left:35px; margin:0}
#upgrade-browser a { text-decoration:underline; font-weight:bold; color:#000}
#upgrade-browser a:hover, #upgrade-browser a:focus { text-decoration:none; color:#000}

/*-----------------------------------------------------
	Layout
-----------------------------------------------------*/

#wrapper { width:918px}
#header { height:157px; background:url(../imgs/bkg/bkg-header.png) no-repeat left bottom; position:relative}
#sharp-logo,
#plasma-logo,
#main-nav,
#utility-nav,
#sub-nav { position:absolute }

#sharp-logo { top: 48px; left:0}
#plasma-logo { top: 10px; right:0}

#main-nav { top:97px; left:0; height:40px; }
#main-nav li { float:left}
#main-nav li a { float:left; display:block; text-indent:-9999px; height:40px; background:url(../imgs/main-nav.png) no-repeat 0 0; overflow:hidden}
#main-nav li.nav-1 a { width:129px; background-position: 0 0}
#main-nav li.nav-2 a { width:160px; background-position: -129px 0}
#main-nav li.nav-3 a { width:197px; background-position: -289px 0}
#main-nav li.nav-4 a { width:172px; background-position: -486px 0}
#main-nav li.nav-5 a { width:113px; background-position: -658px 0}

#main-nav li.nav-1 a:hover, body.home #main-nav li.nav-1 a { background-position: 0 -40px}
#main-nav li.nav-2 a:hover, body.benefits #main-nav li.nav-2 a { background-position: -129px -40px}
#main-nav li.nav-3 a:hover, body.technology #main-nav li.nav-3 a { background-position: -289px -40px}
#main-nav li.nav-4 a:hover, body.products #main-nav li.nav-4 a { background-position: -486px -40px}
#main-nav li.nav-5 a:hover, body.faq #main-nav li.nav-5 a { background-position: -658px -40px}

#utility-nav { top:70px; right:137px;}
#utility-nav li{ float:left; border-left: solid 1px #b2b2b2 }
#utility-nav li.first { border:none}
#utility-nav li a { float:left; color:#fff; font-size:12px; font-weight:bold; margin: 0 10px; }

#sub-nav { top:171px; left:30px; width:858px}
#sub-nav li { float:left;}
#sub-nav li a { float:left; display:block; text-indent:-9999px; height:17px; background:url(../imgs/sub-nav.png) no-repeat 0 0; overflow:hidden; margin-left:37px; display:inline /* fix double marging bug in ie6 */}
#sub-nav li.first a { margin-left:0}
#sub-nav li.last,
#sub-nav li.last a { float:right}

#masthead { height:174px; padding: 30px 30px 0; background-color:#fff; position:relative}

#footer-wrap { background:#8b8b8b; clear:both; margin-top:25px; padding: 30px 0 50px 0}
#footer { width:878px; margin: 0 auto; /*height:115px;*/ padding:45px 20px 20px; background:#7d7d7d url(../imgs/plasmacluster-foot.png) no-repeat 20px 20px;}

#footer ul { border-top: dashed 1px #bebebe; padding-top:5px; width:100%; overflow:hidden}
#footer li { float:left; border-left: solid 1px #a9a9a9; padding-left:10px; margin-right:10px }
#footer li.first { border:none; padding-left:0;}
#footer li a { float:left; font-size:11px; color:#a9a9a9 }
#footer li a:hover { color:#fff; text-decoration:none}

#footer #copyright { text-align:right; margin-top:60px}
#footer #copyright span { color:#bebebe; font-size:10px; display:block }

#content { background: url(../imgs/bkg/bkg-content.png) no-repeat 0 0; padding: 20px 0 20px 30px; font:11px Verdana, Geneva, sans-serif; font-weight:bold}
#content a { text-decoration:underline }
#content a:hover { text-decoration:none }
#content .col1 { float:left; width:380px; color:#5c5c5c; /*background:red*/ }
#content .col1 h2 { margin-bottom:15px}
#content .col1 p, #content .col2 p, #content .col3 p { line-height:17px}
#content .col2 { float:right; width:444px; /*background:green */}
#content .col3 { clear:both}

.strapline { color:#39729f; font:20px Arial, Helvetica, sans-serif; display:block; font-weight:bold  }

.callout { background:#fff url(../imgs/bkg/bkg-callout-top.png) repeat-x top left; float:left; padding: 6px 0 0 0; }
.callout .inside { background:url(../imgs/bkg/bkg-callout-bot.png) repeat-x bottom left;  border: solid 1px #eaeaea; border-bottom:none; border-top:none; }
.callout .inside div {padding: 15px 15px 0;}
.callout .inside h2 { font-size:20px; border-bottom: dashed 1px #b2b2b2; margin-bottom:8px; width:170px;}
.callout .inside p { width:170px; color:#5c5c5c}
.callout .inside a { position:absolute; bottom:21px}

.pic { margin-bottom:15px}
.pic .inside { padding:10px 10px 16px;position:relative}
.pic .inside img { display:block}

#assets .callout { margin-left:24px; width:290px; }
#assets .first { margin-left:0}
#assets .inside { position:relative;}
#assets .inside div { height:152px;}
#assets .inside h2 { font-weight:normal}
#assets .c-products div { background:url(../imgs/callouts/purifier.jpg) no-repeat top right}
#assets .c-technology div { background:url(../imgs/callouts/molecules.jpg) no-repeat top right }
#assets .c-benefits div { background:url(../imgs/callouts/virus.jpg) no-repeat top right }

#bot-links li { width:214px; float:left; margin-left:20px}
#bot-links li.first { margin-left:0}

a.arrow { background:url(../imgs/bkg/link-arrow.png) no-repeat center right; padding: 6px 30px 0 0;}

.dash-div { background:url(../imgs/bkg/dash-fade.png) no-repeat 0 0; padding-top:15px; margin-left:-30px; width:410px; clear:both}

.small-print { font:10px Verdana, Geneva, sans-serif; margin-left:-30px; color:#8b8b8b; width:918px; padding-top:25px}
.small-print span{ color:#000}

.faq-bubble { margin: 4px 0 10px 0; display:block; float:right;}

.first-letter { display:block; float:left; color:#39729f; font-weight:bold; font-size:18px; line-height:12px; padding: 0 5px 0 0}

.sub-pics { width:100%; overflow:hidden}
.sub-pics li { width:207px; font-size:10px}
.sub-pics li img { margin-bottom:10px}

#enquiry-form div { clear:both; padding-bottom:10px; width:100%; overflow:hidden}
#enquiry-form em { color:red}
#enquiry-form span { color:#bfbfbf; font-size:9px}
#enquiry-form .dash-div { margin-left:-10px}
#enquiry-form label { float:left; width:150px}
#enquiry-form input, #enquiry-form textarea, #enquiry-form select { width: 210px;}
#enquiry-form textarea {height:105px}
#enquiry-form div.check label {width: 350px; float:right;}
#enquiry-form div.check input { float:left; width:auto}
#enquiry-form .button { float:right; width:auto}

.red { color:red}

/*-----------------------------------------------------
	Home
-----------------------------------------------------*/
body.home { background:#f5f5f5 url(../imgs/bkg/bkg-home.jpg) repeat-x top center}
body.home h1 { font-weight:bold; font-size:29px; margin-left:-10px; margin-bottom:15px; }
body.home h2 { margin-left:0}
body.home #masthead { height:368px; padding:0}
body.home #content { padding: 30px 0 20px 20px  }

body.home #content .col1{ width:450px; border-right: dashed 1px #ababab; padding-right:23px}

body.home #content .col2 { width:405px; position:relative }
body.home #content .col2 h2 { font-size:19px; width:225px; margin-bottom:15px}
body.home #content .col2 p { width:200px}
body.home #content .col2 a.badge { position:absolute; top:1px; right:4px}

/*-----------------------------------------------------
	Benefits
-----------------------------------------------------*/
body.benefits #masthead { background:#fff url(../imgs/masthead/benefits.jpg) no-repeat 10px 10px}

body.benefits #sub-nav li.nav-1 a { width:51px; background-position: 0 0}
body.benefits #sub-nav li.nav-2 a { width:41px; background-position: -51px 0}
body.benefits #sub-nav li.nav-3 a { width:64px; background-position: -92px 0}
body.benefits #sub-nav li.nav-4 a { width:41px; background-position: -156px 0}
body.benefits #sub-nav li.nav-5 a { width:101px; background-position: -197px 0}

body.benefits #sub-nav li.nav-1 a:hover, body.benefits #sub-nav li.nav-1 a.current { background-position: 0 -17px}
body.benefits #sub-nav li.nav-2 a:hover, body.benefits #sub-nav li.nav-2 a.current { background-position: -51px -17px}
body.benefits #sub-nav li.nav-3 a:hover, body.benefits #sub-nav li.nav-3 a.current { background-position: -92px -17px}
body.benefits #sub-nav li.nav-4 a:hover, body.benefits #sub-nav li.nav-4 a.current { background-position: -156px -17px}
body.benefits #sub-nav li.nav-5 a:hover, body.benefits #sub-nav li.nav-5 a.current { background-position: -197px -17px}

body.benefits h3 { font-size:20px; color:#39729f; clear:both}

#b-sections { margin-left:-30px}
#b-sections a { position:relative; bottom:0}
#b-sections a.plasmaLive { position:absolute; top:20px; left:20px; height:47px}

.ap-banner { margin-top:20px}

body.benefits #content .col2 .callout { clear:both; float:none}

body.benefits .mould-ex { display:block; width:282px; height:17px; text-indent:-9999px; background:url(../imgs/buttons.png) no-repeat 0 -53px; overflow:hidden}

body.experiment #content .col1 {width:424px;}
body.experiment #content .col2 h3 { margin-left:0}
body.experiment #content .col2 p.indent { padding-left:10px}
body.experiment #content .dash-div { background: none; padding-top:15px; margin-left:-30px; clear:both; border-top: 1px dashed #ababab; width:auto; margin-bottom:0}

#snapshotB { height:319px}
#snapshotA { height:166px; width:288px}
#snapshotA a, #snapshotB a { position:relative; bottom:auto}

/*-----------------------------------------------------
	Products
-----------------------------------------------------*/
body.products #masthead { background:#fff url(../imgs/masthead/products.jpg) no-repeat 10px 10px}
body.products #masthead .enquiry-link { display:block; width:87px; height:18px; text-indent:-9999px; background:url(../imgs/buttons.png) no-repeat 0 0; position:absolute; top:168px; right:31px; overflow:hidden}
body.products #masthead .buynow-link { display:block; width:94px; height:18px; text-indent:-9999px; background:url(../imgs/buttons.png) no-repeat 0 -18px; position:absolute; top:168px; right:154px; overflow:hidden}

body.products #sub-nav li.nav-1 a { width:59px; background-position: 0 -34px}
body.products #sub-nav li.nav-2 a { width:69px; background-position: -59px -34px}
body.products #sub-nav li.nav-3 a { width:87px; background-position: -128px -34px}
body.products #sub-nav li.nav-4 a { width:89px; background-position: -215px -34px}
body.products #sub-nav li.nav-5 a { width:65px; background-position: -304px -34px}

body.products #sub-nav li.nav-1 a:hover, body.products #sub-nav li.nav-1 a.current { background-position: 0 -51px}
body.products #sub-nav li.nav-2 a:hover, body.products #sub-nav li.nav-2 a.current { background-position: -59px -51px}
body.products #sub-nav li.nav-3 a:hover, body.products #sub-nav li.nav-3 a.current { background-position: -128px -51px}
body.products #sub-nav li.nav-4 a:hover, body.products #sub-nav li.nav-4 a.current { background-position: -215px -51px}
body.products #sub-nav li.nav-5 a:hover, body.products #sub-nav li.nav-5 a.current { background-position: -304px -51px}

.p-data { font-size:11px; color:#000; border: solid 1px #4e6baa; margin:5px 10px; clear:both; width:600px }
.p-data th[scope="col"] { background:#000; color:#fff; font-size:11px; padding:8px; }
.p-data th.col  { background:#000; color:#fff; font-size:11px; padding:8px; }
.p-data th[scope="row"] { text-align:left; padding:8px; border-right: solid 1px #32bdf2  }
.p-data th.row { text-align:left; padding:8px; border-right: solid 1px #32bdf2  }
.p-data td { text-align:center;}
.p-data tr:nth-child(even) td,
.p-data tr:nth-child(even) th[scope="row"] {background-color: #c7eafb;}
.p-data .odd {background-color: #c7eafb;}
.p-data .br {border-right: solid 1px #32bdf2}
.p-data th:nth-child(1){ text-align:left}
.p-data .a-left{ text-align:left}


/*a.ep { clear:both; display:block; width:255px; height:18px; text-indent:-9999px; background:url(../imgs/buttons.png) no-repeat 0 -89px; overflow:hidden}*/

/*#tabs { clear:both; padding-top:20px}
#tabs h3 { margin-left:0; color:#39729f}
#tabs h4 { margin-left:0}*/

/*#tabNav { border-bottom: solid 1px #e3e2e2; height:51px; margin-bottom:30px; position:relative; left:-30px; width:918px }
#tabNav li { float:left; padding-left:10px; }
#tabNav li a { float:left; display:block; width:444px; height:52px; text-align:center; font:14px Arial, Helvetica, sans-serif; color:#7b7b7b; text-decoration:none; line-height:52px; background:url(../imgs/bkg/tabs.png) no-repeat 0 0;}
#tabNav li a:hover { color:#39729F }
#tabNav li a.selected { background-position: 0 -52px; padding-top:10px; line-height:52px; margin-top:-10px; color:#000; font-weight:bold;}*/

/*#tabNav li { }
#tabNav li a { position:absolute; display:block; width:444px; height:52px; text-align:center; font:14px Arial, Helvetica, sans-serif; color:#7b7b7b; text-decoration:none; line-height:52px; background:url(../imgs/bkg/tabs.png) no-repeat 0 0;}
#tabNav li a.f { top: 0; left:10px}
#tabNav li a.s { top: 0; left:464px}
#tabNav li a:hover { color:#39729F }
#tabNav li a.selected { background-position: 0 -52px; line-height:62px; height:62px; color:#000; font-weight:bold; top:-10px}*/

/*body.ph #content,
body.ph #first, body.ph #second { width:888px; overflow:hidden}
body.ph #content .col1 .callout { margin-right:15px; margin-bottom:9px}*/

body.ph h2 {width:600px;}

#ionRange { width:888px}

body.ph #content #ionRange .col1 { width:636px;}
body.ph #content #ionRange .col2 { width:180px; margin:40px 10px 0 0}
#ionRange .col1 .pwrap { padding-bottom:25px; width:100%; overflow:hidden }

#ionRange h3,
#puriRange h3 { margin-left:0; color:#39729F;}
#ionRange h4 { margin-left:0;}

#ionRange .col1 .banner { margin-bottom:15px}
#ionRange .col1 .diagram { float:right; margin: 0 0 10px 30px;}
#ionRange .col1 p { margin-bottom:25px;}
#ionRange .col1 p.last { margin-bottom:0;}
#ionRange .col1 p.intro { font-size:16px; color:#000; font-weight:bold; line-height:21px}
#ionRange .col1 p.links { }

#ionRange .col1 a.ion-spec,
#ionRange .col1 a.buy-now,
#puriRange a.puri-spec { float:left; display:block; height:18px; text-indent:-9999px; background:url(../imgs/buttons.png) no-repeat 0 -71px; overflow:hidden;}

#ionRange .col1 a.ion-spec { width:171px; background-position: 0 -71px; margin-right:20px}
#ionRange .col1 a.buy-now  { width:94px; background-position: 0 -107px; }
#puriRange a.puri-spec { width:171px; background-position: 0 -71px; }

#puriRange { clear:both; padding:20px 0}
#puriRange ul { border-top: solid 2px #e3e2e2;}
#puriRange ul li { border-left: solid 1px #e3e2e2; float:left; width:221px; padding: 20px 0 0 0; text-align:center }
#puriRange ul li p { line-height:17px }
#puriRange ul li img { margin-top:15px}
#puriRange ul li.first { border-left:none; text-align:left}


/*-----------------------------------------------------
	Air Purifier Systems
-----------------------------------------------------*/

body.air-purifier #masthead { background:#fff url(../imgs/masthead/ap.jpg) no-repeat 10px 10px}
body.air-purifier .col3 { padding-bottom:15px}
body.air-purifier h2 { width:auto; margin-bottom:15px}

body.air-purifier #content .col1 { width:429px}
body.air-purifier #content .col2 { width:429px}
body.air-purifier #content .callout { margin-left:15px; float:right; margin-bottom:8px}
body.air-purifier #content .callout .inside a { position:relative; bottom:0}

.ap-data { font-size:11px; color:#000; margin:5px 10px; clear:both; width:600px;}
.ap-data th, .ap-data td  { text-align:left; border-bottom: solid 1px #b2b2b2; padding:8px }
.ap-data th { padding-left:0}
.ap-data td { text-align:center; font-weight:normal;}
.ap-data td img { padding:8px 0}

body.air-purifier a.spec { clear:both; display:block; width:171px; height:18px; text-indent:-9999px; background:url(../imgs/buttons.png) no-repeat 0 -71px; overflow:hidden; margin:10px 0 10px 0}

/*-----------------------------------------------------
	Technology
-----------------------------------------------------*/

body.technology #masthead { background:#fff url(../imgs/masthead/tech.jpg) no-repeat 10px 10px}

body.technology #content { padding: 30px 0 20px 20px  }

body.technology #sub-nav li.nav-1 a { width:144px; background-position: 0 -68px}
body.technology #sub-nav li.nav-2 a { width:137px; background-position: -144px -68px}
body.technology #sub-nav li.nav-3 a { width:118px; background-position: -281px -68px}

body.technology #sub-nav li.nav-1 a:hover, body.technology #sub-nav li.nav-1 a.current { background-position: 0 -85px}
body.technology #sub-nav li.nav-2 a:hover, body.technology #sub-nav li.nav-2 a.current  { background-position: -144px -85px}
body.technology #sub-nav li.nav-3 a:hover, body.technology #sub-nav li.nav-3 a.current  { background-position: -281px -85px}

body.technology .col3 { border-bottom: dashed 1px #b2b2b2; margin-bottom:15px; padding-bottom:15px}
body.technology .col3 div { float:left}
body.technology .col3 h2 { margin-left:0; font-size:28px; font-weight:normal; width:440px;}
body.technology .col3 h2 span {color:#39729f; font-weight:bold }
body.technology .col3 p { width:380px;}
body.technology .col3 img { float:left }

body.technology .vid-link { display:block; width:282px; height:17px; text-indent:-9999px; background:url(../imgs/buttons.png) no-repeat 0 -36px; overflow:hidden}

body.technology #areas { clear:both; padding-top:15px; width:100%; overflow:hidden }
body.technology #areas li { float:left; width:80px; text-align:center; font:9px Arial, Helvetica, sans-serif; font-weight:normal; white-space:normal; color:#000; margin: 0 0 15px 22px; height:110px}
body.technology #areas li.first { margin-left:0}

/*-----------------------------------------------------
	Faq's
-----------------------------------------------------*/
body.faq #content { padding: 30px 0 20px 0  }

body.faq #masthead { background:#fff url(../imgs/masthead/faq.jpg) no-repeat 10px 10px}
body.faq #content li { margin-bottom:2px; }
body.faq #content li a span { float:left; color:#39729f; padding-right:20px; font:13px Arial, Helvetica, sans-serif; font-weight:bold}
body.faq #content li a p { margin-bottom:0; margin-left:50px; font-size:13px; color:#5C5C5C}
body.faq #content li a { display:block; padding: 8px 100px 8px 30px; text-decoration:none}
body.faq #content li a:hover { background:#e3e3e3; cursor:pointer}

.modal { display:none}
#fancy_div { overflow:auto}
#fancy_div h5 { font-size:16px; margin: 6px 0 0 11px; height:50px; background:url(../imgs/fancybox/h-bg.jpg) no-repeat 0 0; padding: 7px 0 0 10px}
#fancy_div h5.contact { font-size:16px; margin: 6px 0 0 11px; height:32px; background:none; padding: 0}
#fancy_div p { padding: 0 11px}
#fancy_div .small-print { margin-left:0; width:auto}
#fancy_div h5.spec { background:none; padding:10px 10px ; color:#000; height:auto; font-size:18px; margin:0; float:left}
#fancy_div a.print,
#fancy_div a.buy{ float:right; margin:10px 10px 0 0}
#fancy_bg { background:url(../imgs/fancybox/panel-bg.jpg) no-repeat 0 0}
.no-bg #fancy_bg { background:none}

/*-----------------------------------------------------
	Docs
-----------------------------------------------------*/
body.docs #masthead { background:#fff url(../imgs/masthead/tech.jpg) no-repeat 10px 10px}

.useful-links { clear:both; margin-left:89px}
.useful-links h3 { margin-left:0}


/*-----------------------------------------------------
	Classes
-----------------------------------------------------*/
/* new clearfix */
.clearfix:after {visibility: hidden;display: block;font-size: 0;content: " ";clear: both;height: 0;}
* html .clearfix             { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */

.cboth {clear:both;}
.hide {display:none}
.fl { float:left}
.fr { float:right}
.off-screen { position:absolute; top:-99999px}