/* 
Title: 		Landing Page styles for nac-cna.ca
Author:		Jason Westerlund (jaywest) for the National Arts Centre
Contact:	jaywest@nac-cna.ca
Updated:	October 13, 2009 
*/


/*#event_list {
float: left;
width: 680px;
margin: 20px 0;
}
#nav_calendar {
float: right;
margin: 20px 0;
}*/


body#fourth #bttn_ticketsubs{display: none;}

.assets {
display: none;
}


.ticket_widget_options {
background: transparent url("/img/rubyforty/bg_trans_blk05.png") 0 0 repeat; 
}


/* @group Layout */

#content_header {
height: 400px;
}



#content_wrap {
width: 544px; /* fix the width */ 
margin: 0 auto;  /*center the layout*/  
height: 590px; 
}

#content {
width: 544px; /* fix the width */ 
}



#content_main {
float: left;
width: 620px;
}
#content_sub {
width: 300px; 
float: right;
}



/* @end */



/* OLD scrollable */

#content_scrollable {
/*position: relative;*/	
/*background-color: #ccc;*/
width: 980px;
overflow: hidden; /* contain floats*/  
/*float: left;  prevent margins from collapsing*/ 

position: relative;
/*top: 0;*/
/*margin-top: 215px;*/
/*top: 305px;*/
/*background-color: #999;*/
background: transparent url("/img/rubyforty/bg_scrollable_fade.gif") 0 0 repeat-x; 
}
 


/* @group #event_tabs */

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

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

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






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



/* @end */





/* @group #upcoming */

#event_list {
float: left;
width: 640px;
}
#nav_calendar {
width: 220px; 
float: right;
}
#ticket_widget {
width: 220px; 
float: right;
}




/* @end */








/* @group #content_scrollable .tabs
------------------------------------------------------------------------- */


#content_scrollable .tabs {
float:left;
list-style:none;
padding:0 0 0 10px;
margin: 0;
text-transform: uppercase;
background-color: #e0e0e0;
width: 960px;
}


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



#content_scrollable .tabs a {
/*background-color: #eee;*/
padding: 10px 10px;
color: #000;
display: block;
text-decoration: none;
cursor: pointer;
border: none;
}
body.fr #content_scrollable .tabs a {
padding: 10px 6px;
}


#content_scrollable .tabs a:hover {
background-color: #999;
color: #fff;
border: none;
}



/* active item */
#content_scrollable .tabs li.active a {
background-color:#fff;
color: #000;
}



#content_scrollable .tabs a  { 
color: #000;
filter:alpha(opacity=60); /* ie */ 
opacity: 0.6; /* moz */ 
}
#content_scrollable .tabs a:hover  { 
filter:alpha(opacity=80); /* ie */ 
opacity: 0.8; /* moz */
}

/* active item */
#content_scrollable .tabs li.active a {
color: #fff;		
background-color:#999;
filter:alpha(opacity=100); /* ie */ 
opacity: 1; /* moz */
}





/* @end */





/* @group .scrollable
------------------------------------------------------------------------- */

/* 	root element for the scrollable. 
	when scrolling occurs this element stays still. */
div.scrollable {
	
	/* required settings */
	position:relative;
	overflow:hidden;	 	
	width: 960px; 
	height: 600px;
	
	/* custom decorations */
}

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

/*  a single item. must be floated on horizontal scrolling typically this element is the one that *you* will style. */ 
div.scrollable div.items div.scroll_item {
	float:left;
	
	/* custom decoration */
	width: 920px; /* 960 minus padding */ 
	padding: 20px 20px;
 	/*background-color: #999;*/
}
div.scrollable div.items div#upcoming.scroll_item {
width: 544px; /* 960 minus padding */ 
padding: 20px 10px;
}




.scrollable, .scrollable .scroll_item {
/*background-color: #999;*/
}


#content_scrollable #event_list {
width: 460px;
float: left;
}
#content_scrollable #nav_calendar {
/*float: left;*/
width: 220px;
margin-left: 480px;
margin-right: 220px;
}
#content_scrollable #feature,
#content_scrollable #feature1 {
float: right;
width: 220px;
height: 280px;
}


#content_scrollable #feature a,
#content_scrollable #feature1 a {
padding: 0;
border: 0;
}
#content_scrollable #feature a:hover,
#content_scrollable #feature1 a:hover {
padding: 0;
background: none;
}



/* @end */












/* @group #series_list
------------------------------------------------------------------------- */

div.scrollable div.items div#series_list.scroll_item {
width: 544px; /* 960 minus padding */ 
padding: 20px 10px;
overflow: hidden;
}


/*#series_list {
width: 920px;
padding: 20px 10px;
}*/

#content #series_list * {
font-family: "Lucida Grande", Tahoma ,Verdana, Arial, sans-serif;
color: #666;
}

#content #series_list div {
width: 220px;
float: left;
margin: 20px 5px 20px 10px;
}
#content #series_list p {
font-size: 12px;
line-height: 18px;
margin: 0 0 6px 0;
}
#content #series_list li {
list-style: none;
margin: 0 0 12px 0;
}


#content #series_list h2 {
font-size: 24px;
/*color: #007474;*/
margin: 0 0 8px 0;
}
#content #series_list h3 {
font-size: 16px;
line-height: normal;
margin: 0 0 4px 0;
}
#content #series_list h4 {
font-size: 14px;
line-height: normal;
margin: 0 0 4px 0;
color: #000;
}


/*#content #series_list a {
color: #007474;
}*/


/* @end */








/* @group #content_footer.enrichment
------------------------------------------------------------------------- */

.enrichment {font-family: "Lucida Grande", Tahoma ,Verdana, Arial, sans-serif;}

.enrichment ul {margin: 10px 0 20px 0;}
.enrichment li {margin: 0 0 10px 15px; list-style: disc outside;}


.enrichment #video {
width: 460px;
float: left;
margin: 22px 0 0 0;
}
.enrichment #news {
width: 220px;
margin-left: 480px;
margin-right: 220px;
}
.enrichment #enrichment {
float: right;
width: 200px;
} 
 

/* @end */



/* @group #nav_calendar_range */


#nav_calendar_range {
margin: 0 0 0 10px;
}
#nav_calendar_range * {
font: 12px/16px "Lucida Grande", Tahoma ,Verdana, Arial, sans-serif;
}
#nav_calendar_range h3 {margin: 0 0 0 0; text-transform: uppercase; font-size: 12px;}
#nav_calendar_range ul {margin: 0 0 10px 0; padding: 0;}
#nav_calendar_range li {padding: 0;margin: 0 0 5px 0; list-style: disc inside; color: #999;}

#nav_calendar_range a {color: #369; text-decoration:none; cursor:pointer; padding: 0 2px; border-bottom: 1px solid #dedede;}
#nav_calendar_range a:hover {color: #fff; background-color:#369; border-bottom: 1px solid #369;}



/* @end */






/* @group Typography
------------------------------------------------------------------------- */

/* vertical rhythm base 14px * 1.5 */ 

strong {font-weight: bold;}
em {font-style: italic;}



#content p, 
#content li {
font: 13px/1.5em Georgia, Times, serif;
margin-bottom: 1.5em; 
color: #333;
}

#content h2 {
font: 30px/1.5em Georgia, Times, serif;
margin-top: 0.25em;
margin-bottom: 0;
/*color: #999;*/
}
#content h3 {
font: 24px/1.5em Georgia, Times, serif;
margin-top: 1em;
margin-bottom: 0.5em;
color: #333;
}
#content h4 {
font: 18px/1.5em "Lucida Grande", Tahoma ,Verdana, Arial, sans-serif;
margin-top: 1em;
margin-bottom: 0.5em;
}
#content h5 {
font: 15px/1.5em "Lucida Grande", Tahoma ,Verdana, Arial, sans-serif;
margin-top: 1em;
margin-bottom: 0.5em;
}

#content_sub p, 
#content_sub li {
font: 11px/1.5em "Lucida Grande", Tahoma ,Verdana, Arial, sans-serif;
margin-bottom: 1.5em; 
}

.photo img {
padding: 10px;
background-color: #ededed;
display: block;
}



/* @end */