@charset "utf-8";
/* CSS Document */

.nav-top { position:absolute; top:0px; right:0px; }
.nav-top li { float:right; font-size:11px; padding: 4px 10px 2px 10px; border-left:#6e6e6e 1px solid; }
.nav-top li.phone {color:#FFF; font-size:12px; font-weight:bold;  padding-right:0px; padding-left:8px;}
.nav-top li a {color:#b3b3b3;}
.nav-top li.phone a {color:#FFF;}
.nav-top li a:hover {color:#f5c108;}
.nav-top li.first-lst {border-left:none;}
.nav-top li a.active-top {color:#f5c108;}
	
.nav-bar {
	float:left;
    width:100%;
	background:url(./../images/menu-bar-06.png) no-repeat left top;
	margin-top:80px;
		}
		
#home .nav-bar,	
#start .nav-bar,
#nd .nav-bar,
#stopper .nav-bar,
#polariser .nav-bar,
#filters .nav-bar,
#workshops .nav-bar,
#bw .nav-bar,
#systempage .nav-bar,
#products .nav-bar,
#camera-resources .nav-bar,
#arch-fl .nav-bar,
#arch-dl .nav-bar,
#arch-start .nav-bar,
#home-resources .nav-bar,
#home-exhibitions .nav-bar,
#home-sign-up .nav-bar,
#gallery-submit .nav-bar,
#cine .nav-bar,
#proglass .nav-bar,
#reverse .nav-bar,
#workshops .nav-bar {
	float:none;
	margin-top:0px;
		font-size:16px;
		}
#arch-resources .nav-bar { font-size:16px;}

/*Zeroing top margin in nav-bar causes bottom bar in iPad to misdisplay. This is workaround.*/
.nav-bar-fix {
	margin-top:0px;
	}
	
.nav-bar li {
	float:left;
	display:block;
}

/* Sliding Doors using span to avoid dead space*/
.nav-bar a {
	float:left;
	background:url(./../images/menu-left-20.png) no-repeat left 0px;
	font-weight:bold;
	padding:0 0 0 6px;
	}
	
.nav-bar span {
    display:block;
	background:url(./../images/menu-right-20.png) no-repeat right 0px;
	padding:16px 15px 16px 9px;
	height: 24px; /*based on 56px*/
	color:#FFF;
    }
	
#start .nav-bar span,
#nd .nav-bar span,
#stopper .nav-bar span,
#polariser .nav-bar span,
#filters .nav-bar span,
#workshops .nav-bar span,
#bw .nav-bar span,
#systempage .nav-bar span,
#products .nav-bar span,
#camera-resources .nav-bar span,
#gallery-submit .nav-bar span,
#proglass .nav-bar span,
#reverse .nav-bar span{
	padding:16px 0px 16px 7px;
	}
	
.nav-bar-two-lines span {padding-top:7px; height:33px; line-height:20px;}

/*Deals with 2 lines in camera menu*/
#start .nav-bar-two-lines span,
#nd .nav-bar-two-lines span,
#stopper .nav-bar-two-lines span,
#polariser .nav-bar-two-lines span,
#filters .nav-bar-two-lines span,
#workshops .nav-bar-two-lines span,
#bw .nav-bar-two-lines span,
#systempage .nav-bar-two-lines span,
#products .nav-bar-two-lines span,
#camera-resources .nav-bar-two-lines span,
#gallery-submit .nav-bar-two-lines span,
#proglass .nav-bar-two-lines span,
#reverse .nav-bar-two-lines span
{padding-top:7px}



.nav-bar a:hover {
  background-position:left -160px;
  }
.nav-bar a:hover span {
  background-position:right -160px;
  	color:#000;
  }
/*For Home icon*/
.nav-bar span span {
	padding:0px;
	background:url(../images/house-04.png) no-repeat;
	margin-left:-2px;
	}
.nav-bar a:hover span span {
  background-position:0 0;
  }
 
/* These styles set the current tab highlight along with body id*/
#home #home-nav a,

#start #start-nav a,
#nd #nd-nav a,
#stopper #stopper-nav a,
#polariser #polariser-nav a,
#filters #filters-nav a,
#bw #filters-nav a,
#workshops #workshop-nav a,
#systempage #system-nav a,
#products #products-nav a,
#proglass #nd-nav a,
#reverse #nd-nav a,

#colour #colour-nav a,
#swatchball #swatchball-nav a,
#led #led-nav a,
#zircon #led-nav a,
#correction #correction-nav a,
#diffusion #diffusion-nav a,
#control #control-nav a,
#packs #packs-nav a,
#gobos #gobos-nav a,

#arch-start #arch-start-nav a,
#arch-fl #arch-fl-nav a,
#arch-fl-col #arch-fl-col-nav a,
#arch-dl #arch-dl-nav a,
#arch-dl-col #arch-dl-col-nav a,
#arch-zircon #arch-zircon-nav a, /*----------------------------------------------------New--------------------------------*/
#arch-gobos #arch-gobos-nav a,
#cine #cine-nav a
{
	  background-position:left -80px;
	}
	
#home #home-nav span,

#start #start-nav span,
#nd #nd-nav span,
#stopper #stopper-nav span,
#polariser #polariser-nav span,
#filters #filters-nav span,
#bw #filters-nav span,
#workshops #workshop-nav span,
#systempage #system-nav span,
#products #products-nav span,
#proglass #nd-nav span,
#reverse #nd-nav span,

#colour #colour-nav span,
#swatchball #swatchball-nav span,
#led #led-nav span,
#zircon #led-nav span, 
#correction #correction-nav span,
#diffusion #diffusion-nav span,
#control #control-nav span,
#packs #packs-nav span,
#gobos #gobos-nav span,

#arch-start #arch-start-nav span,
#arch-fl #arch-fl-nav span,
#arch-fl-col #arch-fl-col-nav span,
#arch-dl #arch-dl-nav span,
#arch-dl-col #arch-dl-col-nav span,
#arch-zircon #arch-zircon-nav span, /*----------------------------------------------------New--------------------------------*/
#arch-gobos #arch-gobos-nav span,
#cine #cine-nav span
{
	background-position:right -80px;
	color:#000;
	}

#zircon #led-nav b, #led #led-nav b	{border-top: 5px solid #000;}
	
#home-nav img {margin:1px 0 0 3px;}
#home-nav span {width:28px;}
	
#start #home-nav span,
#nd #home-nav span,
#stopper #home-nav span,
#polariser #home-nav span,
#filters #home-nav span,
#workshops #home-nav span,
#bw #home-nav span,
#systempage #home-nav span,
#products #home-nav span,
#camera-resources #home-nav span,
#gallery-submit #home-nav span,
#proglass #home-nav span,
#reverse #home-nav span
{
	width:46px;
	}
#start #home-nav span span,
#nd #home-nav span span,
#stopper #home-nav span span,
#polariser #home-nav span span,
#filters #home-nav span span,
#workshops #home-nav span span,
#bw #home-nav span span,
#systempage #home-nav span span,
#products #home-nav span span,
#camera-resources #home-nav span span,
#gallery-submit #home-nav span span,
#proglass #home-nav span span,
#reverse #home-nav span span
{
	margin-left:-23px;
	}
	
#start-nav span { width:98px;}
#nd-nav span { width:146px; padding-left:5px !important;}
#stopper-nav span { width:127px;}/*----------------------------------------------------Changed--------------------------------*/
#polariser-nav span { width:80px;}
#filters-nav span { width:78px;}
#system-nav span { width:95px;}/*----------------------------------------------------Changed--------------------------------*/
#workshop-nav span { width:100px;}

#products-nav span {width:92px; padding:7px 0px 25px 14px !important; line-height:20px; }/*----------------------------------------------------Changed--------------------------------*/
/*#products-nav span strong {margin-left:7px;}*/

/*For the Left hand end of the bar*/
#home-nav a,
#start-nav a,
#colour-nav a,
#arch-start-nav a, #cine-nav a {
	background-position:left -240px;
	}
#home-nav span,	
#start-nav span,
#colour-nav span,
#arch-start-nav span {
	background-position:right 0px;
	}
#home-nav a:hover,	
#start-nav a:hover,
#colour-nav a:hover,
#arch-start-nav a:hover {
	background-position:left -400px;
	}
#home-nav a:hover span,
#start-nav a:hover span,
#colour-nav a:hover span,
#arch-start-nav a:hover span {
	background-position:right -160px;
	}
/* Left hand end of bar when highlighted*/
#home #home-nav a,
#start #start-nav a,
#colour #colour-nav a,
#arch-start #arch-start-nav a {
	background-position:left -320px;
	}
#home #home-nav span,
#start #start-nav span,
#colour #colour-nav span,
#arch-start #arch-start-nav span {
	background-position:right -80px;
	}
	
/* Right hand highlighted button*/	
#products-nav a	{
	background-position:left -160px;
	}
#products-nav span {
	background-position:right -400px;
	color:#000;
	}
	
#products-nav a:hover {
	background-position:left -80px;
	}
#products-nav a:hover span {
	background-position:right -320px;
	}
	
/* Bevel on open end of bar beyond ul*/
.nav-bevel-end {
	height:56px;
	width: 6px;
	float:left;
	background:url(./../images/menu-left-20.png) no-repeat left 0px;
	}

ul.nav-secondary  {
 float:right;
 padding: 10px 6px 0 0;
 height: 32px;
 text-align:center;
 font-size:12px;
 font-weight:normal;
 }
.nav-secondary li {
	display:block;
	float:right;
	padding: 0 10px 0 15px;
/*	border-left:#2d2f31 groove;*/
	background:url(./../images/divider-08.png) no-repeat left top;
	}
.nav-secondary li a {
	background: transparent;
	padding: 0;
	color: #CCC;
	}
	
li.nav-secondary-last {
	background:transparent;
	}
	
.nav-secondary li a:hover {
	color:white;
		}
		
/*Sets the highlight when on Secondary nav page*/
#details #details-nav a,
#moods #mood-nav a,
#mired #mired-nav a,
#convert #convert-nav a,
#arch-details #arch-details-nav a,
#arch-convert #arch-convert-nav a {
	color:#f5c108;
	}
	
.clear-floats {
	clear:both;
	}


div.nav-bar { position:relative;}

li div.dropdown {
	float: right;
	height:328px;
	position:absolute;
	padding: 16px 32px 16px 32px;
    left:-999em;
/*    left:0px;
    top:56px;*/
	z-index:9999;

	
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;


background: #e4e5e6; /* Old browsers */
background: -moz-linear-gradient(top, #f5f5f5 0%, #e4e5e6 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f5f5f5), color-stop(100%,#e4e5e6)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #f5f5f5 0%,#e4e5e6 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #f5f5f5 0%,#e4e5e6 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #f5f5f5 0%,#e4e5e6 100%); /* IE10+ */
background: linear-gradient(to bottom, #f5f5f5 0%,#e4e5e6 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5f5f5', endColorstr='#e4e5e6',GradientType=0 ); /* IE6-9 */

-webkit-box-shadow: -1px -1px 3px rgba(0,0,0,.8) inset, 2px 2px 4px white inset, 2px 5px 10px 0px rgba(50, 50, 50, 0.45);	
-moz-box-shadow: -1px -1px 3px rgba(0,0,0,.8) inset, 2px 2px 4px white inset, 2px 5px 10px 0px rgba(50, 50, 50, 0.45);
box-shadow: -1px -1px 3px rgba(0,0,0,.8) inset, 2px 2px 4px white inset, 2px 5px 10px 0px rgba(50, 50, 50, 0.45);
}
	
li:hover div.dropdown {
	left:0px;
	top:56px;}
	
li#nd-nav:hover  div.dropdown { left:132px; width:384px; text-align: center;}

li#filters-nav:hover  div.dropdown { left:489px; width:384px; text-align: center;}


.droplogo { width: 128px; height: 224px; float:left; margin-right:16px; position: relative; z-index: 1;}
	
.droplogo p {margin-top:8px; font-size:12px !important; color:#343434; text-align:center; margin-bottom:0px !important; }

.enddrop { margin-right:0px; margin-left:8px; width:152px;/* border-left:#848484 1px dashed;*/}
.enddrop img { margin-left:12px;}
.enddrop a.new-button { margin-left:16px;}

.enddrop-02 { margin-right:0px;}
 
div.dropdown h2 { color:#343434; margin-bottom:8px;}

.bracket { margin-left:-4px; positio z-index: -1; }

.bracket-fade { width:424px; height:240px;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#594993+0,594993+99&0+40,1+100 */

background: linear-gradient(to bottom, rgba(89,73,147,0) 60%,rgba(89,73,147,0.5) 100%);
    
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00594993', endColorstr='#594993',GradientType=0 ); /* IE6-9 */
 }

.bracket-button {margin-top:-4px; width:424px; height:auto;}
div.bracket-button a {width:160px !important; margin-left:128px !important; margin-bottom:8px;}
div.bracket-button p {clear: both; text-align:center; color:rgba(89,73,147,1);}

.droplogo.bracket-button { margin-right: 0px;}
.dropdown .bracket { margin-left: 0;}
.dropdown div:first-of-type { padding-left: 4px;}
.dropdown .bracket .bracket-fade { width: 420px;}

/*****************************New Stuff****************************/

.droplogo.ledmenu { width: 224px;}

.ledmenu.enddrop img { margin-left:0px;}

.droplogo.ledmenu p { padding-left:2px; padding-right:4px; width:218px;}

.ledmenu a.new-button { margin-left:52px; margin-top:16px;}

li div.dropdown.leddrop { height:256px;}

.droplogo.ledmenu { margin-right:48px;}

.droplogo.ledmenu.enddrop { margin-right:0px;}

/*****************************New Stuff****************************/
	
/* Flexible button*/	
div.droplogo a.button:hover { background-position:left -56px !important; }
div.droplogo a.button:hover span { background-position:right -56px !important; }

a.new-button {
font-weight:bold;
font-size:17px;
display:block;
text-align:center;
height:36px;
line-height:36px;
color:#000000;
padding:0px !important;
text-decoration:none;

-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;

background-position:top left !important;

	background: #facc1e; /* Old browsers */
background: -moz-linear-gradient(top,  #facc1e 0%, #f7c307 17%, #f6c207 39%, #d29b10 73%, #d09910 91%, #e9ab12 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#facc1e), color-stop(17%,#f7c307), color-stop(39%,#f6c207), color-stop(73%,#d29b10), color-stop(91%,#d09910), color-stop(100%,#e9ab12)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #facc1e 0%,#f7c307 17%,#f6c207 39%,#d29b10 73%,#d09910 91%,#e9ab12 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #facc1e 0%,#f7c307 17%,#f6c207 39%,#d29b10 73%,#d09910 91%,#e9ab12 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #facc1e 0%,#f7c307 17%,#f6c207 39%,#d29b10 73%,#d09910 91%,#e9ab12 100%); /* IE10+ */
background: linear-gradient(to bottom,  #facc1e 0%,#f7c307 17%,#f6c207 39%,#d29b10 73%,#d09910 91%,#e9ab12 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#facc1e', endColorstr='#e9ab12',GradientType=0 ); /* IE6-9 */ 
 
-webkit-box-shadow: -1px -1px 3px rgba(35,26,3,1) inset, 2px 2px 4px rgba(253,231,151,1) inset, 2px 2px 6px -1px rgba(50, 50, 50, 0.8);	
-moz-box-shadow: -1px -1px 3px rgba(35,26,3,1) inset, 2px 2px 4px rgba(253,231,151,1) inset, 2px 2px 6px -1px rgba(50, 50, 50, 0.8);
box-shadow: -1px -1px 3px rgba(35,26,3,1) inset, 2px 2px 4px rgba(253,231,151,1) inset, 2px 2px 6px -1px rgba(50, 50, 50, 0.8);
}

a.new-button:hover {
	background: #f9f9f9; /* Old browsers */
background: -moz-linear-gradient(top,  #f9f9f9 0%, #f5f5f5 17%, #f2f2f2 39%, #d9dadb 73%, #dbdcdd 91%, #e3e4e5 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f9f9f9), color-stop(17%,#f5f5f5), color-stop(39%,#f2f2f2), color-stop(73%,#d9dadb), color-stop(91%,#dbdcdd), color-stop(100%,#e3e4e5)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #f9f9f9 0%,#f5f5f5 17%,#f2f2f2 39%,#d9dadb 73%,#dbdcdd 91%,#e3e4e5 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #f9f9f9 0%,#f5f5f5 17%,#f2f2f2 39%,#d9dadb 73%,#dbdcdd 91%,#e3e4e5 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #f9f9f9 0%,#f5f5f5 17%,#f2f2f2 39%,#d9dadb 73%,#dbdcdd 91%,#e3e4e5 100%); /* IE10+ */
background: linear-gradient(to bottom,  #f9f9f9 0%,#f5f5f5 17%,#f2f2f2 39%,#d9dadb 73%,#dbdcdd 91%,#e3e4e5 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f9f9f9', endColorstr='#e3e4e5',GradientType=0 ); /* IE6-9 */

-webkit-box-shadow: -1px -1px 3px rgba(27,27,27,1) inset, 2px 2px 4px white inset, 2px 2px 6px -1px rgba(50, 50, 50, 0.8);	
-moz-box-shadow: -1px -1px 3px rgba(27,27,27,1) inset, 2px 2px 4px white inset, 2px 2px 6px -1px rgba(50, 50, 50, 0.8);
box-shadow: -1px -1px 3px rgba(27,27,27,1) inset, 2px 2px 4px white inset, 2px 2px 6px -1px rgba(50, 50, 50, 0.8);
	}

.nav-bar .new-button {width:120px; margin-top:8px; margin-left:4px;}

b.arrow-down {
	display:inline-block;
	vertical-align:top;
	width: 0; 
	height: 0; 
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	margin-top:8px;
	margin-left:2px;
	
	border-top: 5px solid #FFF;
}

.nav-bar a:hover b.arrow-down, #systempage #system-nav b.arrow-down, #proglass #nd-nav b.arrow-down, #nd #nd-nav b.arrow-down, #reverse #nd-nav b.arrow-down, #filters #filters-nav b.arrow-down, #bw #filters-nav b.arrow-down
{ border-top-color:#000;}

a.highbar { background-color:#FFF; padding:2px 4px 2px 4px; color:#000;}
a.highbar:hover { background-color:#F5C108;}

.nav-bar #nd-nav .new-button, .nav-bar #filters-nav .new-button { position: absolute; left: calc(50% - 60px);}
.nav-bar #nd-nav h2, .nav-bar #filters-nav h2 { color: #b17c28; color: #6D0839;}

.nav-bar #nd-nav img { display: block; margin: 64px auto 0 auto;}

.nav-bar #filters-nav h2:last-of-type { display: block; margin: 72px auto 0 auto; color: #555555;}