@import url(reset.css);

body {background-color:#000; color:#bbb; font-family:Geneva, Arial, sans-serif; letter-spacing:normal; font-size:10pt; margin-bottom:50px; }
h1, h2 {font-size:22px; color:#fff; line-height:18px; font-weight:normal;}
h1 {margin:.5em 0 5px 0;}
h1#advantage {margin:-18px -17px 5px -17px; z-index:1;}
h2 {font-size:16px; margin-top:1.5em;}
h2 span {font-size:14px; color:#666;}
#box.orange h2 {color:#003366; font-weight:bold; margin-top:0.5em;}
h3 {font-size:14px; color:#960; margin-top:1.5em; font-weight:normal;}
h4 {font-size:12px; color:#666; margin-top:0.5em; font-weight:bold;}
p {margin-top:1em; line-height:1.4em;}
p.intro {font-size:120%;}
b, strong {font-weight:bold;}
i, em {font-style:oblique;}
hr {height:1px; border:none; border-top:1px dashed #333; margin:1.2em 0; clear:left;}
ul, ol {margin:.5em 1em;}
ul li, ol li {margin:.5em 1em;}
ul li {list-style-type:disc;}
ul li li {list-style-type:circle;}
ol li {list-style-type:decimal;}
ol li li {list-style-type:lower-alpha;}
a {color:#c60; text-decoration:underline;}
a:hover {text-decoration:none;}
.orange a {color:#000;}
label {font-weight:bold; font-size:90%; display:block; float:left; margin-right:5px; color:#666;}

#layout { position: relative; z-index: 1; }

#header {background:#141414; z-index: 3; }
#bannerContainer {width:820px; height:96px; margin:0 auto; background:url(../images/background-banner.png) no-repeat right #141414;}
#logo {margin:15px 0;}
#bannerContact {float:right; margin:0;}
#bannerContact li {float:left; list-style-type:none; margin:0;}

#navigationContainer {height:40px; background:#303030 url(../images/nav-off.png) bottom left repeat-x;}
#navigation {width:820px; margin:0 auto; padding:0;}
#navigation li {display:inline; float:left; height:40px; position:relative; list-style-top:none; margin:0;}
#navigation li.special {float:right;}
#navigation a {display:block; font-size:12px; padding:14px 12px; text-transform:uppercase; text-decoration:none; border-left:solid 1px #333; border-right:solid 1px #111;}
#navigation li.special a {background:#366485 url(../images/nav-special.png) bottom left repeat-x; border-left:solid 1px #366384; border-right:solid 1px #234055; color:#ccc; padding:8px 12px;}
#navigation li a:hover, #navigation li.on a {background:#d27100 url(../images/nav-on.png) bottom left repeat-x; color:#fff; text-decoration:none; border-left:solid 1px #aa5a00; border-right:solid 1px #663300;}

/* DropDown Navigation */

#navigation ul {
  display: block;
  position: absolute;
  left: -20px;
  top: 31px;
  width: 140px;
  padding: 1px 8px 8px 8px;
  z-index:200;
}

#navigation ul li {
  float: left; /*For Gecko*/
  display: block !important;
  display: inline; /*For IE*/
  margin: 1px 0;
  padding: 0;
  line-height: normal;
  height: 30px;
  width: 140px;
  background:none;
  z-index:201;
}

#navigation ul li a {
  display: block;
  margin: 0;
  padding: 8px;
  font-weight: normal;
  background: #d2a951;
  border:solid 1px #996600;
  color:#663300;
  text-align: left;
  line-height: normal;
  z-index:202;
}

#navigation ul li a:hover {
  color: #ffffff;
  background: #cc6600;
  border:solid 1px #fff;
}

#contentContainer {width:820px; margin:0 auto; background:url(../images/background-glow.png) no-repeat center top; z-index: 2;}
#homePageContainer {width:820px; height:305px; margin-bottom:2px;}
#pageContainer {position:relative; background:url(../images/background-vertical-rules.png) no-repeat center 2px; padding:20px;}

#footerContainer, #footerContainer a {font-size:10px; color:#555;}
#footerContainer a {text-decoration:underline;}
#footerContainer a:hover {color:#ccc; text-decoration:none;}
#footerContainer {margin:40px 0;}
#footerContainer li {list-style:none; display:inline; border-left:solid 1px #222; padding:2px 8px; margin:4px 0; line-height:24px;}
#footerContainer li.first {border:none; padding-left:0;}

.button {display:block; float:left; text-transform:lowercase; text-decoration:none; font-size:11px; height:21px; line-height:11px; font-weight:bold; color:#300; background:url(../images/button-off.png) no-repeat bottom left; padding-left:5px;}
.button span {display:block; float:left; cursor:pointer; padding:5px 10px 5px 5px; height:11px; background:url(../images/button-off.png) no-repeat top right;}
.button:hover {background-image:url(../images/button-over.png); color:#600;}
.button:hover span {background-image:url(../images/button-over.png);}

.columns {margin:0;}
.columns .column {float:left; margin:0 20px 20px 0; list-style-type:none;}
.threeColumn .column {width:245px; margin-right:20px;}
.threeColumn .columnSpan2of3 {width:510px;}
.fourColumn .column {width:180px;}
.fourColumn .columnSpan2of4 {width:370px; margin-right:40px;}
.columns .last {margin-right:0;}

.thumbnailList .thumbnail {position:relative; border:1px solid #fff; width:175px;}
.thumbnailList .column {margin-bottom:25px; height:145px; position:relative; display:inline; float:left;}
.thumbnailList h4 {height:25px;}
.thumbnailList .caseStudyLink {background:url(../images/icon-star-off.png) no-repeat right; line-height:11px; height:11px; padding:5px 25px 4px 0; font-size:11px; font-weight:bold; text-transform:lowercase; float:right; color:#c60;}
.thumbnailList .caseStudyLink:hover {background-image:url(../images/icon-star-over.png); color:#fc3; text-decoration:none;}

.captionedPhoto {margin:5px 0 20px 0;}
.captionedPhoto dt img {border:1px solid #fff;}
ul.caseStudies .captionedPhoto dt img {width:508px;}
.captionedPhoto dd {line-height:20px; color:#fff; padding:5px; background:#333 url(../images/background-captioned-photo-caption.png) repeat-x top;}
.captionedPhoto dd h4 {font-size:10px; color:#999; text-transform:uppercase; display:inline;}
.captionedPhoto dd .button {float:right;}

.introduction {font-size:14px;}
.clear {clear:both;}
.clearLeft {clear:left;}
.clearRight {clear:right;}
.floatLeft {float:left;}
.floatRight {float:right; margin:0 0 10px 10px;}

#box {display:block; margin:20px 0;}
#boxTop, #boxBottom {height:5px; line-height:0; margin:0; padding:0; font-size:5px;}
* html #boxTop, * html #boxBottom {display:none;}
#boxTop {background:#000 url(../images/orange-top.png) center top no-repeat;}
#boxBottom {background:#000 url(../images/orange-bottom.png) center top no-repeat;}
#box-content {padding:10px; margin:0;}
.orange #box-content {background:#d2a951; color:#000;}
#box li, #box ul {list-style:none; margin:0; padding:3px 0;}
#box label {font-size:80%; font-weight:bold; color:#333;}


ul.form {margin:10px 0; padding:0;}
ul.form li {display:block; list-style:none; padding:7px 0; margin:0; border-top:dotted 1px #333;}
form label {display:block; font-weight:normal; width:120px; float:left; color:#666; margin:0;}
form .options label {float:none; width:auto; display:inline;}
form .options {padding-left:130px;}

input.required, textarea.required {
	border: 1px solid #999;
	padding: 3px;
}
input.validation-failed, textarea.validation-failed {
	border: 1px solid #900;
	color : #900;
}
input.validation-passed, textarea.validation-passed {
	border: 1px solid #00CC00;
	color : #000;
}

.validation-advice, .custom-advice {
	margin: 5px 0;
	color : #900;
	font-weight: bold;
}

.horinaja {background:#222;}
.horinaja ul {margin:10px;}
.horinaja ul li {border:solid 1px #fff;}
.horinaja .horinaja_pagination {border:solid 1px #666; margin:10px;}
.horinaja .horinaja_pagination li {width:50px;}

/* Pixel Fusion */

#tabStart { display: none !important; visibility: hidden !important; }

#error_for_captcha { color: #900; }

#Slideshow { background-color: #2b2b2b; overflow: hidden; padding: 10px; }

* html #Slideshow { display: inline-block; }

#tabNav { float: left; list-style: none; margin: 0; padding: 0; }

* html #tabNav { position: relative; margin-left: -10px; /* display: inline; margin-left: -5px; */ }

* html #tabNav li { position: relative; left: 20px; }

#tabNav li { list-style: none; margin: 0 0 10px; }

#tabNav li:last-child { margin: 0; }

#tabNav a { background: no-repeat 0 0; display: block; height: 73px; text-indent: -99999px; width: 171px; }

#tabNav .ui-state-active a, #tabNav .ui-state-hover a { background-position: 0 -73px; }

#tabNav .popularBays { background-image: url('/images/pixelfusion/tabs-popular_bays.png'); }

#tabNav .addAccessories { background-image: url('/images/pixelfusion/tabs-add_accessories.png'); }

#tabNav .customise { background-image: url('/images/pixelfusion/tabs-customise.png'); }

.ui-tabs-hide { display: none; visibility: hidden; }

#Slideshow .ui-tabs-panel { float: right; margin: 0; overflow: hidden; padding: 0 0 0 20px; width: 565px; }

* html #Slideshow .ui-tabs-panel { position: relative; }

#Slideshow .slideshow { background-color: #000; float: right; margin: 0 0 0 10px; overflow: hidden; padding: 3px; }

/* * html #Slideshow .slideshow { display: inline; } */

#Slideshow #compare { padding: 0 0 0 5px; width: 580px; }

#compare .slideshow { margin: 0 0 0 1px; }

#Slideshow #compare .caption { margin: 0 0 10px; text-align: center; text-transform: uppercase; width: 100%; }

#Slideshow .images { overflow: hidden; }

#Slideshow .play, #Slideshow .pause { background: no-repeat 50% 50%; display: block; position: relative; text-indent: -99999px; z-index: 100; }

#Slideshow .play:hover { background-image: url('/images/pixelfusion/slide-play.png'); }

#Slideshow .pause:hover { background-image: url('/images/pixelfusion/slide-pause.png'); }

#Slideshow .controls { clear: both; height: 16px; list-style: none; margin: 0; padding: 0; }

#Slideshow .next, #Slideshow .previous { background: no-repeat 50% 50%; height: 36px; list-style: none; margin: 0; padding: 0; text-indent: -99999px; width: 22px; }

#Slideshow .next { background-image: url('/images/pixelfusion/slide-next.gif'); float: right; }

#Slideshow .previous { background-image: url('/images/pixelfusion/slide-previous.gif'); float: left; }

#Slideshow .caption { color: #fff; list-style: none; margin: 0; padding: 12px 0 0; text-align: center; }

#Slideshow .pages { clear: both; font-size: 0.9em; line-height: 1.5; margin: 0 0 10px; padding: 0; text-align: center; }

#Slideshow .pages a { color: #666; margin: 0 4px; text-decoration: none; }

#Slideshow .pages .activeSlide { color: #fff; }

html body #Slideshow .clear { height: 1px; margin: 0; overflow: hidden; padding: 0; }