/* 
Title: 		NAC Global Template
Purpose:	Styles for global header and footer only
Website:	nac-cna.ca
Author:		Jason Westerlund (jaywest) for the National Arts Centre
Contact:	jaywest@nac-cna.ca
Updated:	May 12, 2010  
*/

/* This document should contain all pure and valid css rules. 
All hacks required to compensate for IE bugs are maintained in ie.css */

@import url("reset.css");
/*@import url("dark.css");*/


/* @group General
------------------------------------------------------------------------- */

#nav_skip {display: none;} /* web standards message will be hidden from modern browsers */

/* hide the dotted system borders being generated for A tags */
a:active {outline:none;}
:focus {-moz-outline-style:none;}

/* @end */




/* @group Layout 
------------------------------------------------------------------------- */

/* centre the layout */ 
html {text-align:center;} /* center the page layout for Win/IE */
#wrapper {text-align: left;} /* compensate for the centering above */
#content_wrap {
/*width: 960px; moved to content.css */
/*border: 1px solid cyan;*/ 
/*margin: 0 auto;  center the layout moved to content.css  */  
overflow: hidden;  /* ensure the div stretches to contain its floats - this is disabled in ie6.css */
/*margin-top: 33px;*/
}

/* sticky footer method  http://www.cssstickyfooter.com */ 
html, body, #wrapper, #content_wrap {height: 100%; padding: 0; margin: 0;}
#wrapper > #content_wrap {height: auto; min-height: 100%;}
#content {overflow: auto; padding-bottom: 260px;}  /* must be same height as the footer */
#footer_wrap {
position: relative;
margin-top: -260px; /* negative value of footer height */
height: 260px;
clear:both;
}

/* sticky footer Opera Fix*/
body:before {
content:"";
height:100%;
float:left;
width:0;
margin-top:-32767px;
}



/* clearfix hack */ 
.clearfix:after {content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;}
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix { height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

#wrapper {
}

#content_wrap {
width: 100%;
}
#content {
/*margin-top: 34px;  start all content below the #nav_mandate */ 
width: 100%;
position: relative; /* needed for positioning */ 
}

/*#content_nav {
width: 100%;
overflow: hidden;  ensure the div stretches to contain its floats 
border: 1px solid red; 
position: relative;
}*/



#header {
/* used to position elements between the #nav_man and #nav_sub */ 
width: 980px;
margin: 0 auto; /* center the layout */ 
/*overflow: visible;  ensure the div stretches to contain its floats*/ 
/*border: 1px solid #fff;*/ 
position: relative;
/*height: 202px;*/
}



#footer_wrap {
/*height: 260px;*/
width: 100%;
/*background-color: #eee;*/
background: url("/img/trans/bg_trans_blk08.png") 0 0 repeat;
}
#footer {
width: 960px;
margin: 0 auto; /* center the layout */ 
overflow: hidden; /* ensure the div stretches to contain its floats */
}

/* @end */






/* @group #branding
------------------------------------------------------------------------- */

#branding {
position: absolute;
top: 84px;
left: 3.2%;
z-index: 9;
}
#branding p {
width: 100px; /* width of replacement image */
height: 100px; /* height of replacement image */
background: transparent url("/img/trans/bg_trans_blk20.png") 0 0 repeat;
border: none;
margin: 0;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px; 
}
#branding p a {
text-indent: -9999px; /* hide the text */
width: 100px; /* width of replacement image */
height: 100px; /* height of replacement image */
background: transparent url("/img/1011/nac_badge.png") 0 0 no-repeat;
position: relative; /* restore opacity */ 
display: block;
border: none;
padding: 0;
}
#branding p a:hover {
background-color: #999;
margin: 0;
padding: 0;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px; 
}


/* @end */





/* @group #nav_mandate
------------------------------------------------------------------------- */

#nav_mandate_wrap {
position: relative;
top: 0;
left: 0;
width: 100%;
height: 34px;
background-color: #000;
z-index: 9;
}
#nav_mandate_wrap h2 {
float: left;
margin: 0;
}
#nav_mandate_wrap h2 a {
text-indent: -9999px; /* hide the text */
width: 496px; /* width of replacement image */
height: 34px; /* height of replacement image */
background: url("/img/1011/nac_mandate_en.png") 0 0 no-repeat;
display: block; 
border: none;
}
body.fr #nav_mandate_wrap h2 a {
width: 578px; /* width of replacement image */
background: url("/img/1011/nac_mandate_fr.png") 0 0 no-repeat;
}

body.en #nav_mandate_wrap h2 a:hover,
body.fr #nav_mandate_wrap h2 a:hover {
background-position: 0 -34px;
}



#nav_mandate {
margin: 0;
padding: 0;
/*overflow: hidden;*/
white-space: nowrap;
float: left;
height: 34px;
display: none;
}
#nav_mandate li  { 
display: inline; /* make the list horizontal */
list-style: none; /* hide the bullets */
float: left;
margin: 0;
font: 12px/1.5em "Lucida Grande", Tahoma ,Verdana, Arial, sans-serif;
color: #444;
text-transform: uppercase;
padding: 8px 2px;

}
/*#nav_mandate a {
padding: 3px 6px;  spacing between text and pipe  
margin: 0;
}*/

/* @end */





/* @group #nav_utility
------------------------------------------------------------------------- */

#nav_utility {
margin: 7px 7px 0 0;
overflow: hidden;
white-space: nowrap;
float: right;
}
#nav_utility li  { 
font: 12px/1.5em "Lucida Grande", Tahoma ,Verdana, Arial, sans-serif;
display: inline; /* make the list horizontal */
list-style: none; /* hide the bullets */
float: left;
margin: 0;
border-left: 1px solid #666;
}
#nav_utility li:first-child {border-left:0;} /* hide first pipe */
#nav_utility a {
padding: 3px 6px; /* spacing between text and pipe */ 
margin: 0;
color: #999;
text-decoration: none;
display: block;
border: none;
}
#nav_utility a:hover {
background-color: #333;
color: #fff;
}

* html #nav_utility li {margin: 0 1px 0 -1px;} /* Win/IE6: li are shifted to hide the first pipe.*/
 
/* @end */






/* @group #cse-search-box
------------------------------------------------------------------------- */

#cse-search-box {
float: right;
}
#cse-search-box div {
/*float: right;*/
border: none;
margin: 7px 20px 0 0;
}

/*body.fr #cse-search-box input#txtKeywords {
width: 170px;
}*/
#cse-search-box input#txtKeywords {
background: #424242 url("/img/1011/bg_search.png") 0 50% no-repeat;
padding: 2px 3px 2px 20px;
font-size: 13px;
width: 130px;
margin: 0;
color: #999;
border: none;
/*border: 1px solid #666;*/
}
body.fr #cse-search-box input#txtKeywords {font-size: 13px; width: 120px;}

#cse-search-box input#txtKeywords:hover {
background-color: #666;
}

#cse-search-box input#txtKeywords.fieldFocus {
background: #eee url("/img/1011/bg_search_focus.gif") 0 50% no-repeat;
color: #000;
/*border: 1px solid #333;*/
}

#bttnSearch {display: none;}


/* @end */




/* @group #nav_main
------------------------------------------------------------------------- */

#nav_main h3, 
#nav_main hr {
display: none; 
}

#nav_main_wrap {
position: absolute;
top: 34px;
left: 0;
width: 100%;
height: 34px;
z-index: 9;
background: transparent url("/img/trans/bg_trans_blk08.png") 0 0 repeat; 
}
#nav_main_wrap:hover {
/*z-index: 9;*/
background: transparent url("/img/trans/bg_trans_blk10.png") 0 0 repeat; 
}

#nav_main {
width: 980px;
margin: 0 auto; /* center the layout */ 
/*position: relative;*/
overflow: hidden;  /*ensure the div stretches to contain its floats*/ 
}


#nav_main ul {
overflow: hidden;
white-space: nowrap;
float: left; /* opposing float to the search field */ 
text-transform: uppercase;
margin: 0;
}
/*body.fr #nav_main ul {font-size: 12px;}*/


#nav_main li  { 
font: 13px/normal "Lucida Grande", Tahoma ,Verdana, Arial, sans-serif;
display: inline; /* make the list horizontal */
list-style: none; /* hide the bullets */
float: left;
margin: 0;
}
#nav_main a {
padding: 11px 10px 10px 10px;
margin: 0;
color: #999;
/*color: rgba(255, 255, 255, 0.2);*/
display: block;
text-decoration: none;
border: none;
}
body.fr #nav_main a {padding: 10px 6px;}

#nav_main_wrap:hover a {
color: #000;
}
#nav_main a:hover {
background: none;
color: #fff;
}


/*#nav_main a:hover {  default hover  
background: transparent url("/img/trans/bg_trans_blk10.png") 0 0 repeat; 
background-color: #999;
color: #fff;
background: rgba(255, 255, 255, 0.2);
filter:alpha(opacity=50);  ie  
opacity: 0.5;  moz  
}*/

body#home #nav_home a,
body#naco #nav_naco a,
body#et #nav_et a,
body#ft #nav_ft a,
body#dan #nav_dan a,
/*body#fourth #nav_fourth a,*/
body#family #nav_fam a,
body#education #nav_edu a {
background-color: #999;
color: #fff;
}

/* hover states */ 
/*#nav_naco a:hover	{color: #fff; background-color: #E8A11D;}
#nav_et a:hover		{color: #fff; background-color: #D90021;}
#nav_ft a:hover		{color: #fff; background-color: #00868F;}
#nav_dan a:hover	{color: #fff; background-color: #A31559;}
#nav_fourth a:hover {color: #fff; background-color: #636;}
#nav_edu a:hover 	{color: #fff; background-color: #666;}
#nav_fam a:hover 	{color: #fff; background-color: #666;}*/



/* on states */ 
body#naco #nav_naco a		{color: #000; background-color: #fff !important;}
body#et #nav_et a 			{color: #fff; background-color: #D90021;}
body#ft #nav_ft a 			{color: #000; background-color: #fff;}
body#dance #nav_dan a 		{color: #000; background-color: #fff !important;}
body#fourth #nav_fourth a	{color: #000; background-color: #fff !important;}
body#edu #nav_edu a 		{color: #fff; background-color: #666;}
body#fam #nav_fam a 		{color: #fff; background-color: #666;}



#nav_main {
position: relative;
overflow: visible;
}


/* @end */





/* @group #nav_sub */

#nav_sub {
float:left;
list-style:none;
padding: 0;
margin: 0 0 0 0;
text-transform: uppercase;
width: 980px; /* was 980 */ 
/*background: transparent url("/img/rubyforty/bg_trans_wht80.png") 0 0 repeat;*/
/*overflow: hidden;*/
height: 34px;
position: absolute;
bottom: 0;
left: 0;
/*top: -34px;*/
/*top: 0;*/
z-index: 999;
background: transparent url("/img/trans/bg_trans_blk05.png") 0 0 repeat; 
/*background-color: #000;  Win/IE6 */ 
}
#nav_sub:hover {
background: transparent url("/img/trans/bg_trans_blk10.png") 0 0 repeat; 
}
#nav_sub:hover a {
color: #000;
}




#nav_sub li  { 
font: 13px/normal "Lucida Grande", Tahoma ,Verdana, Arial, sans-serif;
display: inline; /* make the list horizontal */
list-style: none; /* hide the bullets */
float: left;
margin: 0;
}


#nav_sub a {
padding: 11px 10px 10px 10px;
margin: 0;
color: #999;
display: block;
text-decoration: none;
cursor: pointer;
border: none;
}
#nav_sub a:hover {
background: none;
color: #fff;
/*background: transparent url("/img/trans/bg_trans_wht20.png") 0 0 repeat;*/ 
}

/*body.fr #nav_sub a {padding: 10px 6px;}*/

/* active item */
body.upcoming #nav_upcoming a,
body.s1011 #nav_1011 a,
body.family #nav_family a,
body.education #nav_education a,
body.development #nav_development a,
body.about #nav_about a {
background-color:#f1f1f1 !important;
color: #000 !important;
}


/* @end */




















/* @group #nav_section
------------------------------------------------------------------------- */

#nav_section {
width: 200px; /* 220 minus padding */ 
margin: 0 20px 40px 0;
padding: 10px 10px 0 10px;
float: right;
position: relative;
background-color: #fff;
border: 1px solid #ddd; 
border-radius: 8px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
box-shadow: 0 0 5px #ccc;
-moz-box-shadow: 0 0 5px #ccc;
-webkit-box-shadow: 0 0 5px #ccc;
}
#nav_section h3 {
font: bold 13px/1.5em "Lucida Grande", Tahoma ,Verdana, Arial, sans-serif;
text-transform: uppercase;
margin: 10px 0;
}
#nav_section li  { 
font: 13px/1.5em "Lucida Grande", Tahoma ,Verdana, Arial, sans-serif;
list-style: none; /* hide the bullets */
margin: 2px 0;
}
#nav_section a {
padding: 7px 10px 7px 20px;
width: 190px;
color: #666;
display: block;
text-decoration: none;
border: none;
}
#nav_section a:hover {
color: #000;
background: transparent url("/img/1011/nav_section_hover.png") 0 50% no-repeat; 
}
#nav_section ul ul  { 
margin-bottom: 10px;
}
#nav_section li li  { 
margin-left: 8px;
}
#nav_section li li a  { 
font-size: 12px;
}

#nav_section .ui-state-active,
#nav_section .ui-state-active:hover,
#nav_section.season_list li.monthCurrent a {  /*activated sub-nav parent*/  
color: #000;
background: transparent url("/img/1011/nav_section_on.png") 0 50% no-repeat; 
}

#nav_section li a.current,
#nav_section li ul a.ui-accordion-content-active  { 
color: #000;
background: transparent url("/img/1011/nav_section_sub_on.png") 0 50% no-repeat; 
}



#nav_section.season_list h3 {
padding-left: 20px;
}
#nav_section.season_list li.monthOFF {
color: #ccc;
padding: 0 10px 0 20px;
height: 22px;
}
#nav_section.season_list li a span {
color: #f1f1f1;
}
#nav_section.season_list li a:hover span {
color: #000;
}


/* @end */







/* @group #nav_filter
------------------------------------------------------------------------- */

#nav_filter {
width: 140px; 
margin: 42px 10px 40px 10px;
padding: 10px 0 0 0;
float: left;
}

#nav_filter h3 {
font: bold 13px/1.5em "Lucida Grande", Tahoma ,Verdana, Arial, sans-serif;
text-transform: uppercase;
margin: 10px 10px;
}
#nav_filter h3 a {
/*font-weight: bold;*/
}


#nav_filter li  { 
font: 13px/1.5em "Lucida Grande", Tahoma ,Verdana, Arial, sans-serif;
list-style: none; /* hide the bullets */
margin: 0;
}
#nav_filter a {
padding: 6px 20px 6px 10px;
width: 110px; /* 140 minus padding */ 
color: #666;
display: block;
text-decoration: none;
border: none;
/*height: 22px;*/
}

#nav_filter a:hover {
/*font-weight: bold;*/
color: #000;
background: transparent url("/img/1011/nav_filter_hover.png") right 50% no-repeat; 
}

#nav_filter .today li#filter_today a,
#nav_filter .week li#filter_week a,
#nav_filter .month li#filter_month a,
#nav_filter .naco li#filter_naco a,
#nav_filter .theatre li#filter_et a,
#nav_filter .tre li#filter_ft a,
#nav_filter .dance li#filter_dance a,
#nav_filter .broadway li#filter_broadway a,
#nav_filter .variety li#filter_variety a,
#nav_filter .community li#filter_community a,
#nav_filter .education li#filter_education a,
#nav_filter .family li#filter_family a,
#nav_filter .festival li#filter_festival a,
#nav_filter .AcrossCanada li#filter_beyond a  { 
color: #000;
font-weight: bold;
background: transparent url("/img/1011/nav_filter_on.png") right 50% no-repeat; 
}

#nav_filter li#filter_month {
margin-bottom: 15px;
}


/* @end */







/* @group .pill_nav
------------------------------------------------------------------------- */

ul.pill_nav {
/*margin: -10px 20px 0 0;*/
margin: 0;
overflow: hidden;
white-space: nowrap;
float: right;
}
#content_header ul.pill_nav {
margin: 0;
}

ul.pill_nav li  { 
display: inline; /* make the list horizontal */
list-style: none; /* hide the bullets */
float: left;
margin: 0;
}
ul.pill_nav a {
font: 11px/normal "Lucida Grande", Tahoma ,Verdana, Arial, sans-serif;	
padding: 3px 16px;
margin: 0 0 0 8px;  /* space between pills */
display: block;
background: transparent url("/img/rubyforty/bg_trans_blk05.png");
color: #666;
border: none;
border-radius: 16px;
-webkit-border-radius: 16px;
-moz-border-radius: 16px;
text-decoration: none;
}
ul.pill_nav a:hover {
background: transparent url("/img/rubyforty/bg_trans_blk30.png");
color: #fff;
}
ul.pill_nav a.current,
ul.pill_nav a:hover.current {
background: transparent url("/img/rubyforty/bg_trans_blk50.png");
color: #fff;
}


/* @end */




#content_nav {
float: left;
width: 940px;  /* 980 minus padding */ 
padding: 20px 20px;	
overflow: hidden; /* contain floats*/  
/*margin-top: -33px;*/
position: relative;
}





/* @group #nav_breadcrumb
------------------------------------------------------------------------- */

#nav_breadcrumb {
margin: 2px 0 0 0;
overflow: hidden;
white-space: nowrap;
float: left;
}
/*#content_header #nav_breadcrumb {
margin: 0;
}*/

#nav_breadcrumb li  { 
font: 11px/normal "Lucida Grande", Tahoma ,Verdana, Arial, sans-serif;	
display: inline; /* make the list horizontal */
list-style: none; /* hide the bullets */
float: left;
margin: 0;
color: #999;
}
#nav_breadcrumb a {
padding: 3px 14px 3px 4px;
margin: 0;  /* space between pills */
display: block;
background: transparent url("/img/1011/breadcrumb.png") center right no-repeat;
color: #999;
border: none;
text-decoration: none;
/*border-radius: 16px;
-webkit-border-radius: 16px;
-moz-border-radius: 16px;*/
}
#nav_breadcrumb a:hover,
#nav_breadcrumb li a:hover {
background: #999 url("/img/1011/breadcrumb.png") center right no-repeat;
color: #fff;
}

#nav_breadcrumb span {
padding: 3px 14px 3px 4px;
display: block;
}



/* @end */







/* @group #footer
------------------------------------------------------------------------- */


#footer h3 {display: none;}

#footer div {
width: 140px; 
float: left;
padding: 35px 13px 10px 7px;
}

#footer h4 {
font: bold 12px/1.5em "Lucida Grande", Tahoma ,Verdana, Arial, sans-serif;	
margin: 0 0 8px 4px;
color: #999;
}

#footer ul {
padding: 0;
margin: 0;
}

#footer li  { 
font: 11px/1.5em "Lucida Grande", Tahoma ,Verdana, Arial, sans-serif;
margin: 0;
list-style: none; /* hide the bullets */
}
#footer a {
padding: 3px 4px;
margin: 3px 0;
color: #999;
display: block;
text-decoration: none;
width: 132px; /* 140 minus padding */ 
border: none;
}
#footer a:hover {
background-color: #666;
color: #fff;
}




#footer h4#nac_lecafe {
text-indent: -9999px; /* hide the text */
width: 115px; /* width of replacement image */
height: 56px; /* height of replacement image */
background: url("/img/1011/le_cafe_footer.png") 0 0 no-repeat;
margin: 0 0 15px 0;
/*position: relative;
left: -5px;
top: -10px;*/
}	
#nac_lecafe a {
width: 115px; /* width of replacement image */
height: 56px; /* height of replacement image */
display: block;
}	
#nac_lecafe a:hover {
background: none;
}




#nav_legal {
float: left;
clear: left;
width: 600px;
margin: 0;
}
#nav_legal li  { 
display: inline; /* make the list horizontal */
list-style: none; /* hide the bullets */
float: left;
margin: 0 6px 0 0;
}
#footer #nav_legal a {
color: #999;
width: auto;
}



/* @end */




/* @group #social */

#footer #nav_social {
width: 152px; /* 160 minus padding */ 
padding-left: 8px;
padding-right: 0;
/* _width: 142px; temp patch for Win/IE6 */
}



#nav_social h4 {
font-weight: normal;
display: none; 
}
#footer #nav_social ul {
overflow: hidden; 
}
#footer #nav_social li {
float: left;
}

#nav_social a {
border: none;
padding: 0 1px 0 0;
margin: 0;
width: 35px;
height: 36px;
/*display: inline-block;*/
display: block;
}
#nav_social a:active {
padding: 1px 0 0 0; /* push text down 1px */
}
#footer #nav_social li a:hover {
border: none;
background: none;
}


#nav_social img {
border: none;
width: 35px;
}




/*

.social_channels img {
border: none;
}*/


/* @end */






/* @group #email_alerts */

#email_alerts {	
margin: 0 0 0 -1px;
padding: 10px 0 0 0;
width: 140px;
}

#footer #email_alerts a {
text-indent: -9999px; /* hide the text */
background: url("/img/1011/alerts_footer_en.png") 0 0 no-repeat;
width: 150px; /* width of replacement image */
height: 78px; /* height of replacement image */
display: block; 
border: none;
padding: 0;
margin: 0;
/* _width: 142px; temp patch for Win/IE6 */
}


body.fr #footer #email_alerts a {
background: url("/img/1011/alerts_footer_fr.png") 0 0 no-repeat;
}
#footer #email_alerts a:active {
margin: 1px 0 0 0; /* push button down 1px */
outline: none;
}


/*#footer #email_alerts a:hover {
background: none;
}*/


/* @end */


/* @group #share_tools */

	#share_tools ul {
		margin:  0px;
		width: 300px;
	}
   #share_tools li {
    	display: inline;
    	list-style: none;
    	padding: 5px 0;
    	margin: 5px;
    	float: left;
    }
   

    .bubbleInfo {
        position: relative;
        
    }
    
    .popup {
        position: absolute;
        display: none; /* keeps the popup hidden if no JS available */
        background: transparent url("/img/1011/popup_bg.png") no-repeat;
        width: 310px !important;
        height: 210px !important;
        padding: 20px;
        z-index: 999;
    }
    
    .popup, iframe.twitter-anywhere-tweet-box {
            width: 310px !important;
            height: 210px !important;
            z-index: 999;
    
    } 
    
    .trigger img {
    	
    cursor: pointer;
    }

/* @end */

/* @group #labels */
#soldout {
	background: #000;
	text-transform: uppercase;
	font:10px 'Lucida Grande';
	color: #ffffff;
	
	border:  1px solid #000;
	margin:  3px 12px 0; 
	padding: 2px 4px ;
	-moz-border-radius : 3px;
-webkit-border-radius : 3px;
-border-radius: 3px;

}

/* @end */