/* 
Title: 		Tools Styles: RubyForty (Master Styles for nac-cna.ca) 
Author:		Jason Westerlund (jaywest) for the National Arts Centre
Contact:	jaywest@nac-cna.ca
Updated:	March 4, 2010 
*/

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












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


.hide {display: none;}
/*.left {float: left; width: 49%;}
.right {float: right; width: 49%;}*/

.columns3 {float: left; width: 33%;}

/*.col {
float: left;
width: 48%;
margin: 0 20px 20px 0;
}
.col.last {
margin-right: 0;
}*/



.tel {white-space: nowrap;}

sup,
sub {
height: 0;
line-height: 1;
vertical-align: baseline;
_vertical-align: bottom;
position: relative;
font-size: 50%;
}
sup {bottom: 1ex;font-size:0.65em;}
sub {top: .5ex;}


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


/* sidebar ads in event listings */ 
#content #content_sub .ad a,
#content #content_sub .ad a:hover {
background: none;
border: none;
}


/* @end */






/* @group Buttons */


#bttn_ticketsubs {
float: right;
width: 198px;
overflow: hidden;
/*margin: 0 20px 20px 0;*/
display: none; 
}


/*.bttn_ticketsubs {
width: 198px;
overflow: hidden;
margin: 0 0 20px 0;
position: relative;
left: -10px;
}*/


#content a.bttn_tickets {
text-indent: -9999px; /* hide the text */
width: 75px; /* width of replacement image */
height: 30px; /* height of replacement image */
background: url("/img/rubyforty/bttn_tickets_en.png") 0 -30px no-repeat;
display: block; 
border: none;
padding: 0;
float: left;
}
body.fr #content a.bttn_tickets {
width: 73px; /* width of replacement image */
background: url("/img/rubyforty/bttn_tickets_fr.png") 0 -30px no-repeat;
}
#content a.bttn_tickets:hover,
body.fr #content a.bttn_tickets:hover {
background-position: 0 0;
background-color: transparent;
border: none;
}


#content a.bttn_subscriptions {
text-indent: -9999px; /* hide the text */
width: 123px; /* width of replacement image */
height: 30px; /* height of replacement image */
background: url("/img/rubyforty/bttn_subscriptions_en.png") 0 -30px no-repeat;
display: block; 
border: none;
padding: 0;
float: right;
}
body.fr #content a.bttn_subscriptions {
width: 125px; /* width of replacement image */
background: url("/img/rubyforty/bttn_subscriptions_fr.png") 0 -30px no-repeat;
}
#content a.bttn_subscriptions:hover,
body.fr #content a.bttn_subscriptions:hover {
background-position: 0 0;
background-color: transparent;
border: none;
}



/* Generic Button */ 

#content a.button {
background: transparent url("/img/rubyforty/bttn_generic_a.png") bottom right scroll no-repeat;
color: #000;
display: block; 
float: left;
font: 15px "Lucida Grande", Tahoma ,Verdana, Arial, sans-serif;
height: 30px;
border: none;
padding-right: 16px; /* sliding doors padding */ 
border: none;
margin: 10px 0;
}
#content a.button span {
background: transparent url("/img/rubyforty/bttn_generic_span.png") bottom left scroll no-repeat;
line-height: 18px;
display: block;
padding: 6px 0 6px 16px;
}
#content a.button:active {
background-position: top right;
color: #000;
outline: none; /* hide dotted outline in Firefox */
}
#content a.button:active span {
background-position: top left;
padding: 7px 0 5px 16px; /* push text down 1px */
}
#content a.button:hover {
background-color: transparent;
border: none;
}







/* Generic Button BIG */ 

#content .button.big {
background: transparent url("/img/rubyforty/bttn_generic_big_a.png") bottom right scroll no-repeat;
color: #000;
display: block; 
float: left;
font: 17px "Lucida Grande", Tahoma ,Verdana, Arial, sans-serif;
/*height: 43px;*/
border: none;
padding-right: 16px; /* sliding doors padding */ 
border: none;
/*margin: 10px 0;*/
/*text-align: center;*/
/*margin: 10px auto;*/
cursor: pointer;
}
#content .button.big span,
#content .button.big input {
background: transparent url("/img/rubyforty/bttn_generic_big_span.png") bottom left scroll no-repeat;
line-height: 18px;
display: block;
margin: 0;
padding: 6px 0 6px 16px;
height: 43px;
border: none;
cursor: pointer;
}
#content .button:active {
background-position: top right;
color: #000;
outline: none; /* hide dotted outline in Firefox */
}
#content .button:active span {
background-position: top left;
padding: 7px 0 5px 16px; /* push text down 1px */
}
#content .button:hover {
background-color: transparent;
border: none;
}







/* More Button */ 

#content a.bttn_more {
background: transparent url("/img/1011/bttn_more_a.png") bottom right scroll no-repeat;
color: #666;
display: block; 
float: left;
font: 13px "Lucida Grande", Tahoma ,Verdana, Arial, sans-serif;
text-transform: uppercase;
height: 38px;
border: none;
padding-right: 24px; /* sliding doors padding */ 
border: none;
margin: 0 0;
}
#content a.bttn_more span {
background: transparent url("/img/1011/bttn_more_span.png") bottom left scroll no-repeat;
line-height: normal;
display: block;
padding: 11px 0 11px 18px;
}
#content a.bttn_more:hover {
color: #000;
border: none;
background-color: transparent;
padding: 0 24px 0 0;
}
#content a.bttn_more:active {
background-position: top right;
color: #000;
outline: none; /* hide dotted outline in Firefox */
}
#content a.bttn_more:active span {
background-position: top left;
padding: 12px 0 10px 18px; /* push text down 1px */
}







/* Buy Tickets */ 

#content a.buy_tickets {
text-indent: -9999px; /* hide the text */
width: 89px; /* width of replacement image */
height: 26px; /* height of replacement image */
background: url("/img/rubyforty/bttn_buy_en.png") bottom left no-repeat;
display: block;
border: none;
padding: 0;
margin: 5px 0 0 0;
}
body.fr #content a.buy_tickets {
width: 97px; /* width of replacement image */
background: url("/img/rubyforty/bttn_buy_fr.png") bottom left no-repeat;
}
#content a.buy_tickets:hover,
body.fr #content a.buy_tickets:hover {
background-position: top left;
background-color: transparent;
border: none;
}




#content a.bttn_gift {
text-indent: -9999px; /* hide the text */
width: 107px; /* width of replacement image */
height: 26px; /* height of replacement image */
background: url("/img/rubyforty/bttn_giftcards_en.png") 0 0 no-repeat;
display: block;
border: none;
padding: 0;
margin: 5px 0 0 0;
}
body.fr #content a.bttn_gift {
background: url("/img/rubyforty/bttn_giftcards_fr.png") 0 0 no-repeat;
}

/* @end */	





/* @group Links
------------------------------------------------------------------------- */




#content a.rss {
background:transparent url("/img/rubyforty/rss_12x12.gif") left center no-repeat;
color:#999;
font-size:11px;
padding-left:16px;
white-space:nowrap;
font-family:"Lucida Grande", Tahoma ,Verdana, Arial, sans-serif;
border: 0;
}
#content a.rss:hover {
background: #369 url("/img/rubyforty/rss_12x12.gif") left center no-repeat;
color:#fff;
}

#content a.itunes {
background:url("/img/rubyforty/itunes_12x12.png") no-repeat scroll left center transparent;
border:0 none;
color:#999999;
font-family:"Lucida Grande",Tahoma,Verdana,Arial,sans-serif;
font-size:11px;
padding-left:16px;
white-space:nowrap;
}

#content a.itunes:hover {
background: #369 url("/img/rubyforty/itunes_12x12.png") left center no-repeat;
color:#fff;
}

.bttn_donate {
background: transparent url("/img/rubyforty/bttn_orange.gif") 0 50% repeat-x;
padding: 5px 10px;
max-width: 140px;
font: 12px/14px "Lucida Grande", Tahoma ,Verdana, Arial, sans-serif;
border: none;
}




#content a.facebook {background: transparent url("/img/rubyforty/facebook.gif") 2px 50% no-repeat; padding: 1px 2px 1px 20px; border: none; display: block;}
#content a.facebook:hover {background-color: #369; color: #fff; border: none;} 

#content a.twitter {background: transparent url("/img/rubyforty/twitter.gif") 2px 50% no-repeat; padding: 3px 2px 3px 20px; border: none; display: block;}
#content a.twitter:hover {background-color: #369; color: #fff; border: none;} 

#content a.youtube {background: transparent url("/img/rubyforty/youtube.gif") 2px 50% no-repeat; padding: 3px 2px 3px 20px; border: none; display: block;}
#content a.youtube:hover {background-color: #369; color: #fff; border: none;} 

#content a.email {background: transparent url("/img/rubyforty/email.png") 2px 50% no-repeat; padding: 3px 2px 3px 19px; border: none; display:inline-block;}
#content a.email:hover {background-color: #369; color: #fff; border: none;}





/* @end */















/* @group .photo
------------------------------------------------------------------------- */

.photo {
position: relative;
}
.photo.right {
float: right;	
margin: 0 6px 20px 20px;
}
.photo.left {
float: left;	
margin: 0 20px 20px 0;
}
.photo a {
display: block;
padding: 0;
}
.photo a:hover {
padding: 0;
margin: 0;
}

.photo img {
padding: 2px;
background-color: #fff;
border: 1px solid #ccc;
}
.photo span {
bottom: -3px;
right: 0px;
margin-left: 3px;
}



/* Captions */

.photo span {
background: transparent url("/img/rubyforty/bg_trans_blk60.png") !important;  /* Mozilla only */
background-image: none; /* Win/IE6 */
background-color: #000; /* Win/IE6 */ 
position: absolute; /* transparency does not work if we position the transparent div */
bottom: -3px;
right: -3px;
}
.photo .caption {
font: 12px/1.5em "Lucida Grande", Tahoma ,Verdana, Arial, sans-serif;
padding: 0 6px 1px 6px;
color: #fff;
position: relative;
}
.photo .credit {
font: 9px/1.5em "Lucida Grande", Tahoma ,Verdana, Arial, sans-serif;	
position: absolute;
bottom: -18px;
right: 0;
line-height: normal;
/*display: none;*/
/*width: 600px;*/
color: #999;
/*width: auto;*/
white-space: nowrap;
}
#content a.photo {
padding: 0;
border: none;
display: block;
}

/* @end */


/* @group Tabs */

#content .tab_nav {
float:left;
list-style:none;
padding:0 0 0 0;
margin: 0;
text-transform: uppercase;
/*width: 980px;*/
/*background: transparent url("/img/rubyforty/bg_trans_wht80.png") 0 0 repeat;*/ 
}

#content .tab_nav li  { 
display:block;
float:left;
list-style:none;
margin:0;
padding:0;
font: 13px "Lucida Grande", Tahoma ,Verdana, Arial, sans-serif;
}

#content .tab_nav a {
/*background-color: #eee;*/
padding: 10px 10px;
color: #999;
display: block;
text-decoration: none;
cursor: pointer;
border: none;
}
#content .tab_nav a:hover {
background-color: #999;
color: #fff;
border: none;
}
/* active item */
#content .tab_nav a.current {
background-color:#999;
color: #fff;
}


.tab_panes {
width: 940px; /* 960 minus padding */ 
padding: 20px;
background-color: #fff;
/*margin-top: 33px;*/
overflow: hidden; /* contain child floats */ 
}



/* @end */





/* @group .scroll_gallery 
------------------------------------------------------------------------- */

/* remove margins from the image */
.items img {
	margin:0;
}
/* make A tags our floating scrollable items */
.items a {
	display:block;
	float:left;
	margin: 10px 6px;
} 

/* scrollable should not disable gallery navigation */
#gallery .disabled {
	visibility:visible !important;
}

#gallery .inactive {
	visibility:hidden !important;
}


#scroll_gallery {
/*width: 700px;*/
margin: 0 0 10px 0;
}

.scrollable {
/*width: 610px;*/
}


/* @end */








/* @group .scroll_quotes 
------------------------------------------------------------------------- */

.scroll_quotes .scrollable {
/* root element for the scrollable. when scrolling occurs this element stays still. */
/* required settings */
position:relative;
overflow:hidden;
width: 540px;
height: 260px;
/* custom settings */
/*background-color: #eee;*/
}

.scrollable .items {
/* root element for scrollable items, must be absolute */ 
width: 999999em;
position:absolute;
clear:both;
}

.scroll_quotes .scrollable blockquote {
/* single scrollable item */
float:left;
width: 520px;
height: 260px;
margin: 10px 10px;
} 

/* scrollable should not disable gallery navigation */
.scroll_quotes .disabled {
visibility:visible !important;
}

.scroll_quotes .inactive {
visibility:hidden !important;
}




#content .scroll_quotes blockquote p {
font: 16px/1.5em Georgia, Times, serif;
font-style: italic;
color: #00868F;
margin: 0;
}
#content .scroll_quotes blockquote p em {
font-style: normal;
}
#content .scroll_quotes blockquote p strong {
color: #333;
font-size: 22px;
font-weight: normal;
}
#content .scroll_quotes blockquote p cite {
font: 11px/1.5em "Lucida Grande", Tahoma ,Verdana, Arial, sans-serif;
display: block;
margin: 6px 0 0 0;
color: #999;
}
#content .scroll_quotes blockquote p cite em {
font-style: italic;
}


/* @end */




/* @group .navi */

/* position and dimensions of the navigator (those little circles below slides) */
.navi {
margin: 0;
margin-left: 50%;
width:200px;
height:20px;
}

/* items inside navigator */
#content .navi a {
width:8px;
height:8px;
float:left;
margin:3px;
background: transparent url("/img/rubyforty/slide_navigator.png") 0 0 no-repeat;
display:block;
font-size:1px;
border: none;
}

/* mouseover state */
#content .navi a:hover {
background-position:0 -8px;
background-color: transparent;
border: none;
}

/* active state (current page state) */
.navi a.active {
background-position:0 -16px;     
}

/* @end */





/* @group .tipsy */

.tipsy {
font: 10px "Lucida Grande", Tahoma ,Verdana, Arial, sans-serif !important; 
padding: 5px;
opacity: 0.8; 
filter: alpha(opacity=80); 
background-repeat: no-repeat;
}
.tipsy-inner {
padding: 6px 10px;
background-color: black;
color: white; 
max-width: 200px; 
text-align: left;
line-height: 13px;
}

  .tipsy-north { background-image: url("/js/tipsy/tipsy-north.gif"); background-position: top center; }
  .tipsy-south { background-image: url("/js/tipsy/tipsy-south.gif"); background-position: bottom center; }
  .tipsy-east { background-image: url("/js/tipsy/tipsy-east.gif"); background-position: right center; }
  .tipsy-west { background-image: url("/js/tipsy/tipsy-west.gif"); background-position: left center; }

/* @end */





/* @group .datestamp */

.event_item {
position: relative;
padding: 0 0 15px 80px;
}
.datestamp {
background-color: #700417;
width: 60px;
height: 60px;
position: absolute;
top: 0;
left: 0;
-moz-border-radius: 6px; /* Firefox, or Gecko-based browsers */
-webkit-border-radius: 6px; /* Safari, or Webkit-based browsers */
}
.datestamp .month {
font: 16px/16px Georgia, Times, serif;	
text-transform: uppercase;
display: block;
text-align: center;
margin: 9px 0 0 0;
color: #fff;
}
body.fr .datestamp .month {margin: 3px 0 0 0;}

.datestamp .day {
font: 34px/34px Georgia, Times, serif;	
display: block;
text-align: center;
margin: -3px 0 0 0;
color: #fff;
}
body.fr .datestamp .day {margin: 0;}


/* @end */

/* @group overlay-basics */

/* the overlayed element */

.simple_overlay {
	
	/* must be initially hidden */
	display:none;
	
	/* place overlay on top of other elements */
	z-index:10000;
	
	/* styling */
	background-color:#333;
	
	width:675px;	
	min-height:200px;
	border:1px solid #666;
	
	/* CSS3 styling for latest browsers */
	-moz-box-shadow:0 0 90px 5px #000;
	-webkit-box-shadow: 0 0 90px #000;	
}

/* close button positioned on upper right corner */
.simple_overlay .close {
	background-image:url(/css/jquery.tools/close.png);
	position:absolute;
	right:-15px;
	top:-15px;
	cursor:pointer;
	height:35px;
	width:35px;
}

/* @end */

/* @group overlay-gallery  */

/* the large image. we use a gray border around it */





#img {
	border:1px solid #666;
}

/* "next image" and "prev image" links */
.next, .prev {
	font-family: "Lucida Grande", Tahoma ,Verdana, Arial, sans-serif;
	
	/* absolute positioning relative to the overlay */
	position:absolute;
	top:40%;	
	border:1px solid #666;	
	cursor:pointer;
	display:block;
	padding:10px 20px;
	color:#fff;
	font-size:11px;
	
	/* upcoming CSS3 features */
	-moz-border-radius:5px;
	-webkit-border-radius:5px;	
}

.prev {
	left:0;
	border-left:0;
	-moz-border-radius-topleft:0;
	-moz-border-radius-bottomleft:0;
	-webkit-border-bottom-left-radius:0;
	-webkit-border-top-left-radius:0;
}

.next {
	right:0;
	border-right:0;
	-moz-border-radius-topright:0;
	-moz-border-radius-bottomright:0;
	-webkit-border-bottom-right-radius:0;
	-webkit-border-top-right-radius:0;	
}

.next:hover, .prev:hover {
	text-decoration:underline;
	background-color:#000;
}

/* when there is no next or previous link available this class is added */
.disabled {
	visibility:hidden;		
}

/* the "information box" */
.info {
	font-family: "Lucida Grande", Tahoma ,Verdana, Arial, sans-serif;

	position:absolute;
	bottom:0;
	left:0;	
	padding:10px 15px;
	color:#fff;
	font-size:11px;
	border-top:1px solid #666;
}

.info strong {
	display:block;	
}

/* progress indicator (animated gif). should be initially hidden */
.progress {
	position:absolute;
	top:45%;
	left:50%;
	display:none;
}

/* everybody should know about RGBA colors. */
.next, .prev, .info {
	background:#333 !important;
	background:rgba(0, 0, 0, 0.6) url(/css/jquery.tools/h80.png) repeat-x;		
}

/* @end */








/* @group .apple_overlay */

/* the overlayed element */
.apple_overlay {
	
	/* initially overlay is hidden */
	display:none;
	
	/* growing background image */
	background-image:url(../img/overlay/white.png);
	
	/* 
		width after the growing animation finishes
		height is automatically calculated
	*/
	width:640px;		
	
	/* some padding to layout nested elements nicely  */
	padding:35px;

	/* a little styling */	
	font-size:11px;
}

/* default close button positioned on upper right corner */
.apple_overlay div.close {
	background-image:url(/css/jquery.tools/close.png);
	position:absolute; right:5px; top:5px;
	cursor:pointer;
	height:35px;
	width:35px;
}



/* @end */























/* @group scrollable-horizontal */

/*
	root element for the scrollable.
	when scrolling occurs this element stays still.
*/
.scrollable {

	/* required settings */
	position:relative;
	overflow:hidden;
	width: 680px;
	height:120px;

	/* custom decorations */
	/*border:1px solid #ccc;
	background:url(/img/global/gradient/h300.png) repeat-x;*/
	height: 100px;
}

/*
	root element for scrollable items. Must be absolutely positioned
	and it should have a extremely large width to accomodate scrollable items.
	it's enough that you set the width and height for the root element and
	not for this element.
*/
.scrollable .items {
	/* this cannot be too large */
	width:20000em;
	position:absolute;
	clear:both;
}

/* single scrollable item */
.scrollable img {
	float:left;
	margin: 20px 5px 20px 21px;
	background-color:#fff;
	padding:2px;
	border:1px solid #ccc;
	cursor:pointer;
	width: 70px; /* thumbnail size */ 
	height: 70px; /* thumbnail size */ 
	
	-moz-border-radius:4px;
	-webkit-border-radius:4px;
}

/* active item */
.scrollable .active {
	border:2px solid #000;
	z-index:9999;
	position:relative;
}


/* jaywest additions */ 

#content .scrollable a {
padding: 0;
border: none;
}
#content .scrollable a:hover {
background-color: transparent;
}

/* @end */






/* @group scrollable-buttons */
/* this makes it possible to add next button beside scrollable */



.scrollable {
	float:left;	
}

/* prev, next, prevPage and nextPage buttons */
a.browse {
	background:url(/img/rubyforty/bttn_horiz_scroller_dark.png) no-repeat;
	display:block;
	width:30px;
	height:30px;
	float:left;
	margin:40px 10px;
	cursor:pointer;
	font-size:1px;
}

/* right */
a.right 				{ background-position: 0 -30px; clear:right; margin-right: 0px;}
a.right:hover 		{ background-position:-30px -30px; }
a.right:active 	{ background-position:-60px -30px; } 


/* left */
a.left				{ margin-left: 0px; } 
a.left:hover  		{ background-position:-30px 0; }
a.left:active  	{ background-position:-60px 0; }

/* up and down */
a.up, a.down		{ 
	background:url(../../lab/scroller_gallery/img/vert_large.png) no-repeat; 
	float: none;
	margin: 10px 50px;
}

/* up */
a.up:hover  		{ background-position:-30px 0; }
a.up:active  		{ background-position:-60px 0; }

/* down */
a.down 				{ background-position: 0 -30px; }
a.down:hover  		{ background-position:-30px -30px; }
a.down:active  	{ background-position:-60px -30px; } 


/* disabled navigational button */
a.disabled {
	visibility:hidden !important;		
} 	



/* jaywest additions */ 
#content a.browse {
padding: 0;
border: none;
margin: 34px 5px;
_background-color: #ccc; /* Win/IE6 */ 
}
#content a.browse:hover {
background-color: transparent;
}
/* @end */





/* @group #impact_grid */


#impact_grid {
/*width: 700px;*/
}
#impact_grid li {
padding: 0;
margin: 0 13px 20px 0;
list-style: none;
float: left;
width: 220px;
}
#content #impact_grid a {
padding: 0;
border: none;
background-color: #ccc;
display: block; 
width: 220px;
height: 120px;
border: 1px solid red; 
}

.boxgrid {
width: 220px; /* width of image */ 
height: 120px; /* height of image */ 
/*margin:10px;*/
float:left;
/*background:#161613;
border: solid 2px #8399AF;*/
overflow: hidden;
position: relative;
}




.boxgrid img {
position: absolute;
top: 0;
left: 0;
/*border: 0;*/
}
.boxcaption {
color: #fff;
float: left;
position: absolute;
/*background: #000;*/
height: 90px; /* expanded height of caption */ 
width: 100%;
/*opacity: .4;*/
}
 	
.caption .boxcaption {
top: 90px; /* the diff between this and the image height will be the caption height - same as js  */ 
left: 0;
text-align: right;
/*position: relative;*/
background-color: rgba(0, 0, 0, 0.4) !important;
/*background-color: #000;  IE only*/ 
/*filter:alpha(opacity=40);  IE only*/ 
/*background-color: #ccc;*/ 
/*background-color: #000;  IE6 only*/ 
background: transparent url("/img/rubyforty/bg_trans_blk40.png") 0 0 repeat; /* IE7 */ 

/*filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=40);  For IE 5-7*/ 
/*-MS-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";  For IE 8*/  
  

}
.caption a:hover .boxcaption {
background-color: rgba(0, 0, 0, 0.6) !important;
background: transparent url("/img/rubyforty/bg_trans_blk60.png") 0 0 repeat; /* IE7 */ 
}


#content .boxcaption h3 {
font: 20px/normal Georgia, Times, serif;
font-weight: normal;
margin: 4px 8px 2px 0;
text-align: right;
color: #fff;
}
body.fr #content .boxcaption h3 {
font: 15px/normal Georgia, Times, serif;
margin: 8px 8px 2px 0;
}
#content .boxcaption p {
font: 16px/normal Georgia, Times, serif;
font-weight: normal;
margin: 0 8px;
text-align: right;
color: #fff;
}
body.fr #content .boxcaption p {
font: 13px/normal Georgia, Times, serif;
}

/* @end */