/*
/ --------------------------------------
/	Linn.co.uk
/   Frame Digital
/
/
/   -   Main Navigation
/   -   Breadcrumbs
/   -   .page sub navigation
/   -   .rotator-navigation
/	-	Mega Menus
/	-	Product mini navigation
/ --------------------------------------

*/

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

#header .navigation
{
    background-color:rgba(255,255,255,0.5);
    height: 35px;
    width:100%; 
      
}

#header .sub-navigation
{ 
    background-color:rgba(255,255,255,0.1);
    height: 35px;
	width:100%;		
}

#header .navigation ul,
#header .sub-navigation ul
{
    width: 978px;
    margin: 0 auto; /* center the ULs inside their parent divs */
    list-style: none;        
    padding:0px;
    
}

#header .navigation ul li,
#header .sub-navigation ul li
{
    float: left; position: relative;
}

#header .navigation ul li,
#header .sub-navigation ul li {  height: 35px; line-height: 35px; }

#header ul li a 
{ 
    color: #fff; 
    text-decoration: none; 
    text-transform: uppercase;     
    display: block; 
    padding: 0 20px;     
}

#header .navigation ul li a
{
    background-image: url(../../images/nav/main-nav-spacer.png);
    background-position: right;
    background-repeat: no-repeat;
}

#header .navigation ul li a.last { background: none; }

#header .navigation ul li a.selected { background: #f0f0f0; color: #000; }
#header .navigation ul li:hover a  { background: #fff !important; color: #000; }

#header .float-left { float: left; }

#header .sub-navigation ul li a:hover,
#header .sub-navigation ul li a.selected { text-decoration: underline; }

/* -------------------
/	-	Breadcrumbs
/ ------------------- */

/*

IE7 stuff - in progress
#header .sub-navigation div.container{
	width: 940px;
	margin: 0 auto;
}
*/

#header .sub-navigation ul#breadcrumbs 
{
    list-style: none;
    padding: 0px;
    
    
	width: 940px;
	margin: 0 auto;
    	
	/*
	required for <IE8
	float:left; 
	display:inline;
	*/
}

#header .sub-navigation ul#breadcrumbs li  { 
	float: left;
	padding: 0 10px 0 0;
	line-height: 35px; 
	height: 35px; 
	color: #fff; 
	font-size: 11px;  

 }
#header .sub-navigation ul#breadcrumbs li a { padding: 0;  }
#header .sub-navigation ul#breadcrumbs li.spacer { width: 5px; padding: 0 10px 0 0; }

/* -------------------
/   -   .page sub navigation
/ ------------------- */
.page .sub-navigation
{
    width: 978px;
    margin: 0 auto;
    height: 63px;
    padding: 0px; 
}

.page .top-sub-navigation
{
    height: 26px;
}

.page .sub-navigation ul { margin: 0px; padding: 0px; list-style: none; height: 26px; line-height: 26px; background-color:rgba(255,255,255,0.85);  }

.page .sub-navigation ul li { height: 26px; line-height: 26px; float: left; padding: 0px; margin: 0px; }

.page .sub-navigation ul li.selected { background-image:url(../../images/nav/navigation-selected.png); background-repeat: no-repeat; background-position: center 26px; }

.page .sub-navigation li a
{
    overflow: hidden;    
    display: block;  
    font-family: 'MyEffraRegular', Arial, Helvetica, sans-serif;
    text-align: center;
    height: 26px; line-height: 26px;    
    border-right: solid 1px #cdcdcd;
    text-decoration: none;
}

.page .sub-navigation li a:hover { text-decoration: underline; }

li.hear { width: 201px; }
li.free { width: 139px; }
li.works { width: 241px; }
li.last-ever { width: 148px; }
li.systems { width: 152px; }
li.back-top { width: 97px; }

.page .sub-navigation li.back-top a { border-right: 0px; }

/* -------------------
/   -   back to top button
/			
/ ------------------- */
.page .navigation-top{
	 width: 978px;
    margin: 0 auto;
    height: 20px;
    padding: 0px; 
}

.page .navigation-top ul{
	margin: 0px;
	padding: 0px;
	height: 20px;
	line-height: 0px;
}

.page .navigation-top ul li { 
	list-style: none;
	width:90px;
	float:right;
	position: relative;
	margin:20px 0 0 0;
}

.page .navigation-top ul li a
{
  
	display: block;  
	font-family: 'MyEffraRegular', Arial, Helvetica, sans-serif;
	text-align: center;
	padding:3px 6px;
	line-height: 20px;    
	text-decoration: none;
	background-color: #000;
	color:#fff;
	
	position: absolute;
	right:0;
	top:0;
	z-index: 10;
}

.page .navigation-top ul li a:hover{
	text-decoration: underline;
}


/* -------------------
/   -   .rotator-navigation
/   The first part is for the black sub navigation
/ ------------------- */


ul.tertiary-nav 
{

    list-style: none;
    margin: 0 0 20px 0;
    padding:0px;

}

.right-40 ul.tertiary-nav {
	margin:0 0 0 90px;
}


ul.tertiary-nav li 
{       
	color: #000;
	background-position: right;
	background-repeat: no-repeat; 
	position: relative;  
	margin: 0 0 15px 0;
	padding:0px; 
}

ul.tertiary-nav li a { padding-left: 10px; }

ul.tertiary-nav li .overlay-listen{
	padding:10px;
	background-color: #999999;
	border-top:1px solid #fff;
	display: none;
	position: absolute;
	left:0;
	top:26;
	z-index: 2;
	width:142px;
}

ul.tertiary-nav li .overlay-listen .platform{
	display:block;
	font-weight: bold;
}

ul.tertiary-nav li .overlay-listen .links{
	display:block;
	font-weight: normal;
	padding:5px 0 0 10px;
	margin:0 0 10px 0;
}

/* -------------------
/   -   The bullet points for each page of the rotator control
/ ------------------- */
.rotator-pager { position: absolute; width: 915px; top: 305px; z-index: 1; }
.rotator-pager ul { padding: 0px; margin: 0px; margin: 0 auto; width: 80px; }
.rotator-pager ul li
{
    float:left;
    list-style: none;
}

.rotator-pager ul li a { display: block; width: 8px; height: 8px; text-indent: -3000px; background: url(../../images/nav/rotator/bullets.png); background-position: bottom; margin: 6px; outline:0; }
.rotator-pager ul li a.selected { background-position: top; }


#how-it-works .rotator-pager { position: absolute; width: 915px; top: 568px; }

/* -------------------
/   -   the navigation elements for the rotators
/ ------------------- */
.page-marker { width: 906px; float: left; }
.page-marker ul 
{     
    width: 906px; 
    display: block; 
    text-align:center;
    vertical-align: middle; 
    margin: 0 auto;
    margin-top: 5px;
    list-style: none; 
    padding:0px; 
    height: 25px; 
    line-height:30px; 
    position: relative;
}

.page-marker ul li 
{  

    display: inline-block; 
    line-height:26px; 
    width: 8px; 
    height: 8px; 
    text-indent: -12000px; 
    background: url(../../images/nav/rotator/bullets.png); 
    background-position: bottom; 
    margin: 6px; 
    outline:0; 
    cursor: pointer;
    float:left;
   
    
}

.page-marker ul li.selected { background-position:top; }

.pager
{
    width: 940px;
    float:left;
    margin-top: 20px;
    margin-bottom: 20px;    
    padding: 0 19px;
}

a.next,
a.previous
{
    width: 17px;
    display: block;
    float:left;
    height: 30px;
    background-image: url(../../images/nav/rotator/rotator-arrow-left.png);
    background-repeat: no-repeat;
    background-position: bottom;
    cursor: pointer;
    text-indent: -12000px;
    outline: 0;
}

a.next
{
    background-image: url(../../images/nav/rotator/rotator-arrow-right.png);
}

a:hover.next,
a:hover.previous
{
    background-position: top;
}

/* -------------------
/	-	Mega Menus
/ ------------------- */
#header .mega-menu 
{ 
    display: none; 
    width: 762px; 
    height: 109px; 
    position: absolute; 
    left: 0px; 
    background-color: #fff; 
    top: 35px; 
    z-index: 1000; 
    padding:18px;
    padding-top: 22px;
}

#header .mega-music { width: 700px;}
#header .mega-systems { left: -75px; width: 700px; }
#header .mega-try { left: -192px; width: 700px; }
#header .mega-buying { left: -281px; width: 700px;}
#header .mega-community { left: -391px; width: 700px; }
#header .mega-support { left: -499px; width: 700px; }

@-moz-document url-prefix() 
{
    
    #header .mega-music { width: 700px;}
    #header .mega-systems { left: -76px; width: 700px; }
    #header .mega-try { left: -193px; width: 700px; }
    #header .mega-buying { left: -282px; width: 700px;}
    #header .mega-community { left: -393px; width: 700px; }
    #header .mega-support { left: -503px; width: 700px; }
}

.mega-menu .element
{
    width: 160px;
    margin-right:20px;
    float:left;
}

#header .mega-menu .element-280 { width: 280px; }
#header .mega-menu .element-220 { width: 220px; }
#header .mega-menu .element-280 h5 img { border: solid 1px #cdcdcd; margin-right: 20px; }

#header .mega-menu .element-480 { width: 480px; }

#header .mega-menu .element h5 { margin-bottom: 20px; }
#header .mega-menu .element h5 a { color:#000; padding: 0px; text-decoration:none;}
#header .mega-menu .element h5 a:hover { color:#000;  text-decoration:underline; }
#header .mega-menu .element.last { margin: 0px; }


#header .mega-menu .element ul li a { color:#000;  text-decoration:none; }
#header .mega-menu .element ul li a:hover { color:#000;  text-decoration:underline;}

#header .mega-menu .element p { font-size: 11px; line-height: 15px; color: #010101; }

.overlay { display: none; background: rgba(0,0,0,0.7); width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; z-index: 100; }


/*
READ MORE LINKS

Read more links all are black rectangles with a right-hand arrows. additional classes define different icon styles
*/

a.read-more-block{
	background: #000;    
	padding-left: 8px;
	width: 152px;
	color: #fff;
	display: inline-block;
	
	background-image: url(../../images/buttons/arrow-right.gif);
	background-repeat: no-repeat;
	background-position: right center;
	
	height: 26px;
	line-height: 26px;
	text-transform: uppercase;
	font-family: 'MyEffraRegular', Arial, Helvetica, sans-serif;   
	text-decoration: none;
	text-align: left;
	
}

a.read-more-block:hover{
	text-decoration: underline;
}

a.external{
	background-image: url(../../images/nav/external.gif);
}

a.expand:hover { background-image: url(../../images/buttons/arrow-down.gif);}


/* FONTS */

h5,
.page .sub-navigation ul li a,
#breadcrumbs li,
#header ul li a { font-family: 'MyEffraRegular', Arial, Helvetica, sans-serif;color: #fff; text-transform: uppercase; }

#header .mega-menu a { font-family: 'MyEffraRegular', Arial, Helvetica, sans-serif;color: #fff; text-transform: none; }
#header .mega-menu h5 a { text-transform: uppercase; }

#header ul li ul.plain li a { font-family: Arial; color: #010101; }

.mega-menu .element h5,
.page .sub-navigation ul li a { color: #000; }

#header div.mega-menu ul.plain { float: left; width: 170px; }
#header div.mega-menu ul.plain.border-right { width: 155px; margin-right: 15px; padding-right: 15px; border-right: solid 1px #cdcdcd; }
#header div.mega-menu ul.plain-160 { width: 160px; }
#header div.mega-menu ul.plain li,
#header div.mega-menu ul.plain li a { text-transform: none; border: 0px; line-height: 18px; height:18px; width: 200px; padding: 0px; background: none; font-size: 11px;}
#header div.mega-menu ul.plain li a:hover { text-decoration:underline;}

#header div.mega-menu ul.plain li a 
{ 
    text-decoration:none;
}

/* -------------------
/	-	Product mini navigation
/ ------------------- */

.page .product-navigation
{
    height: 110px;
    position: relative;
    margin: 0 auto;
    padding: 0;
    width: 978px;
    background-color: #fff;
    
}

.page .product-navigation ul { 
	margin: 0px;
	padding: 0px; 
	height: 110px;
}

.page .product-navigation ul li {
	height: 110px;
	line-height: 26px;
	float: left;
	padding: 0px 16px;
	margin: 0px; text-align:center;
	background-color: #fff;
	font-family: 'MyEffraRegular',Arial,Helvetica,sans-serif;
	text-transform: uppercase;
}

.page .product-navigation ul li a.selected { 
	background-image:url(../../images/nav/navigation-selected.png); 
	background-repeat: no-repeat; 
	background-position: 
	center 110px;
}

.page .product-navigation ul li a
{
	/*overflow: hidden;*/    
	display: block;  
	font-family: 'MyEffraRegular',Arial, Helvetica, sans-serif;
	background-image: none;
	text-align: center;
	text-decoration: none;
	padding: 0px;
	border: 0 none;
	height: 45px;
	padding: 75px 0 0;
}

.page .product-navigation ul li a:hover { text-decoration:underline;}

.page .product-navigation li.digital-stream { width: 120px; background:url(../../images/nav/content/digital-stream-thumb.jpg) no-repeat center 28px; }
.page .product-navigation li.turntables { width: 108px; background:url(../../images/nav/content/turntable-thumb.jpg) no-repeat center 18px;}
.page .product-navigation li.pre-amplifiers { width: 116px; background:url(../../images/nav/content/pre-amplifier-thumb.jpg) no-repeat center 28px;}
.page .product-navigation li.power-amplifiers { width: 116px; background:url(../../images/nav/content/power-amplifier-thumb.jpg) no-repeat center 28px;}
.page .product-navigation li.loudspeakers { width: 95px; background:url(../../images/nav/content/loudspeakers-thumb.jpg) no-repeat center 14px;}
.page .product-navigation li.upgrades { width: 120px; background:url(../../images/nav/content/upgrades-thumb.jpg) no-repeat center 35px;}
.page .product-navigation li.accessories { width: 77px; background:url(../../images/nav/content/accessories-thumb.jpg) no-repeat center 16px;}


#our-systems-nav-image
{
    margin-left: -20px;margin-right: 10px;
}

#header ul li a#linn-ds-nav-item
{
    margin: 0px; float:left; padding:0px;border:0px !important;
    background-image: none;
    
}

#header ul li a#linn-ds-nav-item img { margin: 0px; }

/*---------------------
- Music Moments Menu Item
---------------------*/

/* magenta */
#music #header .navigation li.fixed a,
#music-moments #header .navigation li.fixed a,
#book-demo #header .navigation li.fixed a,
#header .navigation li.making-history-normal a
{
	background-color: rgba(184, 99, 161, 0.5);
}

/* olive */
#systems-details #header .navigation li.fixed a,
#header .navigation li.sunday-morning-normal a
{
	background-color: rgba(175, 192, 140, 0.5);
}

/* peach */
#linn-ds #header .navigation li.fixed a,
#buying-linn #header .navigation li.fixed a,
#support #header .navigation li.fixed a,
#support-software #header .navigation li.fixed a,
#support-software #header .navigation li.word-for-word-normal a,
#header .navigation li.studio-time-normal a,
#header .navigation li.one-summer-normal a,
#header .navigation li.tdk-c90-normal a
{
	background-color: rgba(230, 149, 63, 0.5);
}

/* blue */
#buying-linn-products #header .navigation li.fixed a,
#header .navigation li.we-danced-normal a
{
	background-color: rgba(135, 203, 239, 0.5);
}

/* another olive */
#try-linn #header .navigation li.fixed a,
#where-are-you #header .navigation li.fixed a,
#header .navigation li.packing-essentials-normal a
{
	background-color: rgba(132, 155, 104, 0.5);
}

/* light blue */
#community #header .navigation li.fixed a,
#header .navigation li.fourteen-days-normal a
{
	background-color: rgba(135, 203, 239, 0.5);
}

/* another pink */
#header .navigation li.clothes-shopping-normal a,
#header .navigation li.great-company-normal a
{
	background-color: rgba(216, 149, 188, 0.5);
}

/* beige */
#header .navigation li.word-for-word-normal a
{
	background-color: rgba(254, 225, 171, 0.5);
}

/* cherry */
#header .navigation li.festivals-normal a
{
	background-color: rgba(223, 80, 92, 0.5);
}