/*--------------------------------------------------------------------------------------------
	Global 
  --------------------------------------------------------------------------------------------*/
html, body {
	font-family: Arial, Helvetica, sans-serif;
	width:100%;
	margin:0;
	padding:0;
}

table {
	width:100%;
	height:100%;
}

table td {
	text-align:center;
	vertical-align:middle;
}

body {
	font-family:Arial, Helvetica, sans-serif;
	font-size:0.75em;
	background:#000;
	color:#FFFFFF;
}

body#psr {
	background:#1a1a1a;
}

/* Floaters */
.right {
	float:right;
}
.left {
	float:left;
}

.clear {
	clear:both;
	line-height:0px;
	height:0px;
}
/* NB: Must have ie.css if you use this */
.clearfix:after {
    content:"."; 
    display:block;
	height:0;
    clear:both; 
    visibility:hidden;
}


/*--------------------------------------------------------------------------------------------
	Structural 
  --------------------------------------------------------------------------------------------*/
#container {
	position:relative;
	width:1000px;
	margin:auto;
/*	min-height:100%;*/
}
/* Header */
#logo {
	width:506px;
	height:90px;
	margin:45px 0 0 64px;
	float:left;
	display:inline;
	background:url(../images/puur_floors.gif) no-repeat;
}
body#psr #logo {
	background:url(../images/puur_floors_psr.gif) no-repeat;
}

#logo2 {
	width:506px;
	height:90px;
	margin:45px 0 0 64px;
	float:left;
	display:inline;
	background:url(../images/puur_floors2.gif) no-repeat;
}

#navbar {
	width:430px;
	height:35px;
	float:left;
	padding:100px 0 0 0;
}

#main_panel {
	width:654px;
	float:left;
	margin:20px 0 0 0;
	position:relative;
	z-index:2;
}

#main_panel_flash {
	width:1000px;
	height:380px;
	float:left;
	position:relative;
	z-index:2;
}

#colour_desc {
	position:absolute;
	width:296px;
	height:100px;
	padding:0 0 30px 64px;
	bottom:0;
	z-index:200;
}

#colour_flash{
	position:absolute;
	z-index:1;
	top:0;
}


#nav {
	position:absolute;
	width:730px;
	height:20px;
	margin:360px 0 0 55px;
	z-index:500;
}
#nav a{
	height:20px;
	display:block;
	float:left;
	padding:0 10px;
	border:dotted #fff;
	border-width:0 1px 0 0;
}
#nav a.activeSlide { color: #ffffff }
a:focus { outline: none; }

#main_img {
	width:654px;
	height:350px;
	position:relative;
	z-index:8;
}

#mask {
	position:absolute;
	width:592px;
	height:330px;
	z-index:10;
}

#mask {
	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/black_mask.png');
}
#mask[id] {
  background:url(../images/black_mask.png) no-repeat;
}
body#psr #mask {
	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/grey_mask.png');
}
body#psr #mask[id] {
  background:url(../images/grey_mask.png) no-repeat;
}

#minimask {
	position:absolute;
	width:93px;
	height:75px;
	z-index:2;
}

#minimask {
	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/black_minimask.png');
}
#minimask[id] {
  background:url(../images/black_minimask.png) no-repeat;
}
body#psr #minimask {
	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/grey_minimask.png');
}
body#psr #minimask[id] {
  background:url(../images/grey_minimask.png) no-repeat;
}
#category {
	width:296px;
	float:left;
	background:url(../images/img_dots_white.gif) no-repeat;
	padding:0 0 0 64px;
}
#description {
	width:496px;
	padding:10px 0 0 64px;
	float:left;
}
#specs {
	width:200px;
	float:left;
}

#sample {
	width:104px;
	height:200px;
	float:left;
	padding:180px 0 0 0;
}

#right_panel {
	width:345px;
	float:left;
	margin:20px 0 0 0;
}
#gallery {
	width:345px;
	height:380px;
}

#mid_panel {
	width:1000px;
	position:relative;
	height:380px;
	float:left;
}
#showcase {
	width:1000px;
	height:380px;
	float:left;
	padding:20px 0 0 0;
	z-index:1;
}

.showcase_img {
	width:730px;
	height:380px;
	float:left;
	z-index:1;
}
.showcase_txt {
	width:260px;
	height:310px;
	padding:70px 0 0 10px;
	float:left;
	z-index:1;
}

.psf {
	background:url(../images/poured_resin_colour.gif) no-repeat;
}
.htc {
	background:url(../images/htc_superfloor_colour.gif) no-repeat;
}
.psr {
	background:url(../images/polished_concrete_colour.gif) no-repeat;
}



#intro {
	width:296px;
	float:left;
	background:url(../images/img_dots_white.gif) no-repeat;
	padding:0 0 30px 64px;
	margin:30px 0 0 0;
	display:inline;
}

.feature_panel {
	width:260px;
	float:left;
	padding:0 0 0 60px;
	min-height:120px;
	height:auto !important;
	height:120px;
	margin:30px 0 0 0;
	display:inline;
}

.feature_txt {
	width:155px;
	float:left;
}

.feature_img {
	width:105px;
	float:left;
}



#content {
	width:496px;
	float:left;
	background:url(../images/img_dots_white.gif) no-repeat;
	padding:0 0 0 64px;
}

#panel_1 {	
	width:252px;
	background:url(../images/img_drip.gif) no-repeat;
	height:463px;
	float:left;
}

#panel_2 {	
	width:580px;
	float:left;
	position:relative;
}
#Acc7b, #Acc8b {
	width:580px;
	margin:75px 0 0 0;
}
#Acc7b p{
	font-size:1em;
	padding:12px 0 0 0;
	line-height:16px;
}


#panel_3 {	
	width:148px;
	height:463px;
	float:left;
	margin:0 0 20px 0;
	display:inline;
}

.contact {
	background:url(../images/img_contact.gif) right bottom no-repeat;
}

#gallery_main {
	width:170px;
	height:290px;
	float:left;
}

#thumbnails, #thumbnails2 {	
	width:345px;
	height:375px;
}


#thumbnails li{
	list-style:none;
	width:100px;
	height:107px;
	float:left;
	padding:0 7px 10px 0;
}
#thumbnails li a {
	position:relative;
	cursor:pointer;
}
#thumbnails2 li{
	list-style:none;
	width:80px;
	height:20px;
	float:left;
	padding:315px 7px 0px 0;
}

#thumbnails2 li a{
	height:20px;
	width:70px;
	display:block;
	border:dotted #ff2400;
	border-width:0 0 0 1px;
	padding:0 0 0 10px;
	position:relative;
	cursor:pointer;
}


#thumbnails a span{
	height:20px;
	width:100px;
	text-align:center;
	display:block;
	border:dotted #ff2400;
	border-width:0 1px 0 0;
}
#thumbnails a.activeSlide span, #thumbnails2 a.activeSlide { color: #fff }
#thumbnails a:focus { outline: none; }

/* Footer */
#footer {
	width:936px;
	float:left;
	height:25px;
	padding:20px 0 0 64px;
}


/*--------------------------------------------------------------------------------------------
	Navigation 
  --------------------------------------------------------------------------------------------*/  
/* Main nav */

/*** ESSENTIAL STYLES ***/
.sf-menu, .sf-menu * {
	margin:			0;
	padding:		0;
	list-style:		none;
	z-index:200;
}
.sf-menu {
	line-height:	16px;
	z-index:200;
}
.sf-menu ul {
	position:		absolute;
	top:			-999em;
	width:			17em; /* left offset of submenus need to match (see below) */
	z-index:200;
}
.sf-menu ul li {
	width:			100%;
}
.sf-menu li:hover {
	visibility:		inherit; /* fixes IE7 'sticky bug' */
}
.sf-menu li {
	float:			left;
	position:		relative;
}
.sf-menu a {
	display:		block;
	position:		relative;
}
.sf-menu li:hover ul,
.sf-menu li.sfHover ul {
	right:			-6em;
	top:			26px; /* match top ul list item height */
	z-index:		99;
}
ul.sf-menu li:hover li ul,
ul.sf-menu li.sfHover li ul {
	top:			-999em;
}
ul.sf-menu li li:hover ul,
ul.sf-menu li li.sfHover ul {
	right:			17em; /* match ul width */
	top:			0;
}
ul.sf-menu li li:hover li ul,
ul.sf-menu li li.sfHover li ul {
	top:			-999em;
}
ul.sf-menu li li li:hover ul,
ul.sf-menu li li li.sfHover ul {
	left:			17em; /* match ul width */
	top:			0;
}

/*** DEMO SKIN ***/
.sf-menu {
	float:			right;
	margin-bottom:	1em;
	z-index:200;
}
.sf-menu a {
	padding:0 0.5em;
	text-decoration:none;
	color:#ff2400;
	z-index:200;
}
.sf-menu li li.no-link a{
	text-indent:1em;
	color:#FFFFFF;
	padding:0.5em 0;
}
.sf-menu a, .sf-menu a:visited  { /* visited pseudo selector so IE6 applies text colour*/
	color:#ff2400;
}
.sf-menu li {
	background:		#000000;
	border:dotted #fff;
	border-width:0 1px 0 0;
	z-index:200;
}
.sf-menu li.last {
	background:		#000000;
	border:dotted #fff;
	border-width:0;
}
.sf-menu li li {
	background:		#333;
	border:dotted #fff;
	border-width: 1px 0 0 0;
	z-index:200;
}
.sf-menu li li a{
	padding:1em;
}
.sf-menu li li li {
	background:		#333;
	z-index:200;
	margin:-1px 0 0 0;
	border:dotted #fff;
	border-width: 1px 0 1px 0;
}
.sf-menu li.selected li a{
	color:#ff2400;
}
.sf-menu li:hover, .sf-menu li.sfHover,
.sf-menu a:hover, .sf-menu a:active, .sf-menu li.selected li a:hover {
	background:		#000000;
	outline:		0;
	color:#FFFFFF;
}

.sf-menu li a#selected{
	color:#FFFFFF;
}



/* psr  */
body#psr .sf-menu li {
	background:		#1a1a1a;
}
body#psr .sf-menu li.last {
	background:		#1a1a1a;
}
body#psr .sf-menu li li {
	background:		#333;
}
body#psr .sf-menu li li li {
	background:		#333;
}
body#psr .sf-menu li:hover, body#psr .sf-menu li.sfHover,
body#psr .sf-menu a:focus, body#psr .sf-menu a:hover, body#psr .sf-menu a:active {
	background:		#1a1a1a;
}
body#psr .sf-menu li.selected li a:hover {
	background:		#000;
}


/* Generic Links */

a:link, a:visited, a:active {
	color: #ff2400;
	text-decoration: none;
}
a:hover {
	color: #fff;
	text-decoration: none;
}

ul#cat_nav {
	margin:0;
	padding:35px 0 0 0;
	list-style:none;
	font-size:0.92em;
	width:200px;
	position:relative;
}
ul#cat_nav li {
	margin:0;
	padding:0;
	list-style:none;
	width:200px;
	position:relative;
}
ul#cat_nav li a {
	margin:0;
	padding:0;
	width:200px;
}

h3 a:link, h3 a:visited, h3 a:active {
	color: #FFFFFF;
	text-decoration: none;
}
h3 a:hover{
	color: #ff2400;
	text-decoration: none;
}


/*--------------------------------------------------------------------------------------------
	Typography
  --------------------------------------------------------------------------------------------*/
/* Headings */
h1 {
	font-size:1.50em;
	font-weight:normal;
	margin:10px 0 0 0;
	padding:0;
}
h2 {
	font-size:1em;
	margin:0;
	padding:0;
	color:#666666;
}
h3 {
	font-size:1.50em;
	font-weight:normal;
	margin:0 0 10px 0;
	padding:0;
}
h4 {
	font-size:1.33em;
	font-weight:normal;
	margin:10px 0 0 60px;
	padding:0;
}

#panel_1 p {
	margin:35px 35px 0 60px;
}
/* Type */
p {
	font-size:0.92em;
	margin:0 20px 8px 0;
	padding:0;
}

.red {
	color:#ff2400;
	margin:5px 0 0 0;
	padding:0;
}

li {
}

div#logo h5, div#logo2 h5 {
	margin:0px 0px 0px -6000px;
}



/*--------------------------------------------------------------------------------------------
	Forms - form, input, label etc
  --------------------------------------------------------------------------------------------*/
form {
	padding:0;
	margin:0;
}

label {
	width: 100px;
	float: left;
	text-align: left;
	margin-right: 5px;
	display: block
}

#submit_btn {
	border:0;
	background:#000000;
	color:#FF0000;
	width:60px;
	text-align:right;
	margin:0 0 0 140px;
	cursor:pointer;
}

input, textarea {
	margin:0 0 5px 0;
	border:0;
	color:#FFFFFF;
	padding:0 0 0 10px;
}

input {
	background:url(../images/img_input.gif) no-repeat;
	width:200px;
	height:20px;
}
textarea {
	background:url(../images/img_textarea.gif) no-repeat;
	width:200px;
	height:100px;
}
:-moz-any-link:focus {
  outline: none;
}
a, a:focus, a:active
{
  outline: none;
}
:focus
{
  -moz-outline-style: none;
}

.Accordion {
	overflow: hidden;	
	border:none;
	outline:none;
}
.AccordionPanel {
	margin: 0px;
	padding: 0px;
}
.AccordionPanelTab {
	margin: 0px;
	cursor: pointer;
	color:#FFFFFF;
	-moz-user-select: none;
	-khtml-user-select: none;
}
.AccordionPanelContent {
	overflow: auto;
}
.AccordionPanelOpen .AccordionPanelTab {
	color: #ff2400;
}
.AccordionPanelTabHover {
	color: #ff2400;
}
.AccordionPanelOpen .AccordionPanelTabHover {
	color: #ff2400;
}
.AccordionFocused .AccordionPanelTab {
	border:none;
	outline:none;
}
.AccordionFocused .AccordionPanelOpen .AccordionPanelTab {
	border:none;
	outline:none;
}

#Acc8b h1 {
	margin:0px;
	padding:0px;
}
#Acc8b p {
	margin:0px;
	padding:0 0 12px 0;
}

#Acc8b .AccordionPanel{
	padding:0 0 30px 0;
	border:#ff2400 dotted;
	border-width:0 0 1px 0;
}

.news_img {
	width:100px;
	float:left;
	margin:0 0 20px 0;
}

.news_txt {
	width:350px;
	float:left;
}

/* These are standard sIFR styles... do not modify */

.sIFR-flash {
	visibility: visible !important;
	margin: 0;
}

.sIFR-replaced {
	visibility: visible !important;
}

span.sIFR-alternate {
	position: absolute;
	left: 0;
	top: 0;
	width: 0;
	height: 0;
	display: block;
	overflow: hidden;
}

/* Hide Adblock Object tab: the text should show up just fine, not poorly with a tab laid over it. */
.sIFR-flash + div[adblocktab=true] {
  display: none !important;
}

/* These "decoy" styles are used to hide the browser text before it is replaced... the negative-letter spacing in this case is used to make the browser text metrics match up with the sIFR text metrics since the sIFR text in this example is so much narrower... your own settings may vary... any weird sizing issues you may run into are usually fixed by tweaking these decoy styles */

.sIFR-hasFlash h1 {
	visibility: hidden;
}

.sIFR-hasFlash h2 {
	visibility: hidden;
}

.sIFR-hasFlash h3 {
	visibility: hidden;
}

.sIFR-hasFlash h4 {
	visibility: hidden;
}



input.close, #submitButton {
	border:none;
	background:#000000;
	color:#FF0000;
	float:left;
	cursor:pointer;
	width:60px;
}

#loginPanel {
  width:290px;
  height:140px;
  padding:30px 0 0 30px;
}

#loginPanel h2 {
	margin:0 0 20px 0;
}
#promptDiv { 
  width:200px; 
  height:48px; 
  background:#000000;
  text-align:left;
  color:#ffffff;
	float:left;
	padding:0 0 0 90px;
}

#form_fields {
	width:250px;
	float:left;
}

#buttonDiv { 
  text-align:left;
	float:left;
	width:170px;
	padding:0 0 0 80px;
}


.fieldTitle {
  text-align:right;
  color:#ffffff;
  width:80px;
  float:left;
  margin:0 10px 0 0;
}
.fieldEntry {
  margin-bottom:8px;
  width:150px;
  float:left;
}
.hide{
	display:none;
}