/* 
Title: 		Home page Styles for nac-cna.ca 
Author:		Jason Westerlund (jaywest) for the National Arts Centre
Contact:	jaywest@nac-cna.ca
Updated:	May 22, 2009  
*/

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


.assets {display: none;}

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

#nav_main a {
color: #666;
}

#branding h2 {
background-color: rgba(0, 0, 0, 0.8) !important;
background-color: #000;  /*IE only*/ 
filter:alpha(opacity=80);  /*IE only*/ 
}
#branding h2 a:hover {
background-color: rgba(0, 0, 0, 0.2) !important;
background-color: #000;  /*IE only*/ 
filter:alpha(opacity=20);  /*IE only*/ 
}


#content_header h1 {display: none;}



#content_header {
width: 544px;
/*margin-top: -86px;*/
position: relative;

margin-left:0;
padding: 0;
height: 640px;
}


#content_scrollable {
margin-top:-50px;
}


body.fr #content #event_tabs li a {
font-size: 13px;
padding: 10px 8px;
}






/* @group #home_grid
------------------------------------------------------------------------- */


#home_grid {
width: 544px;
overflow: hidden;
height: 390px;
}

#content #home_grid a {
padding: 0;
border: none;
display: block;
}
#content #home_grid a:hover {
background: none;
border: none;
}


#home_grid #slot1 {float:left; width:554px; margin: 0 15px 13px 0;}
#home_grid #slot2 {float:left; width:310px; margin: 0 0 13px 0;}
#home_grid #slot3 {float:left; width:310px; margin: 0 15px 0 0; clear: left;}
#home_grid #slot4 {float:left; width:310px; margin: 0 15px 0 0;}
#home_grid #slot5 {float:left; width:310px; margin: 0 0 0 0;}



.boxgrid {
width: 310px; /* width of image */ 
height: 193px; /* 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: 100px; /* expanded height of caption */ 
width: 100%;
/*opacity: .4;*/
}
 	
.caption .boxcaption {
top: 118px; /* the diff between this and the image height will be the caption height  */ 
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: 6px 8px 2px 0;
text-align: right;
color: #fff;
}
body.fr #content .boxcaption h3 {
font-size: 18px;
line-height: 28px;
}


#content .boxcaption p {
font: 17px/normal Georgia, Times, serif;
font-weight: normal;
margin: 0 8px;
text-align: right;
color: #fff;
}
#content .boxcaption p.details {
font: 11px/normal "Lucida Grande", Tahoma ,Verdana, Arial, sans-serif;
}
 
   

/* @end */




/* @group #nav_region */

#nav_region {
width: 460px;
display: none; 
}

#nav_region ul {
margin: 0;
overflow: hidden;
white-space: nowrap;
float: left;
}
#nav_region li  { 
display: inline; /* make the list horizontal */
list-style: none; /* hide the bullets */
float: left;
margin: 0;
border-left: 1px solid #ccc;
}
#nav_region li:first-child {border-left:0;} /* hide first pipe */
#nav_region a {
padding: 3px 6px; /* spacing between text and pipe */ 
margin: 0;
}
* html #nav_region li {margin: 0 1px 0 -1px;} /* Win/IE6: li are shifted to hide the first pipe.*/

#nav_region p {
display: inline;
float: right;
}

.rss {
margin-left: 10px;
}


/* @end */







/* @group #marquee_scroller
------------------------------------------------------------------------- */




#marquee_scroller {
/* required settings */
position:relative;
overflow:hidden;
width: 960px;
height: 193px;
float:left;	/* this makes it possible to add next button beside scrollable */
/* custom decorations */
/*background-color: #eee;*/ 
/*background:url("/img/grid/bg_marquee.png") top right no-repeat;
border: 1px solid red;*/
margin-top: 4px;
}

#marquee_scroller .items {
/* root element for scrollable items. */
width:20000em;
position:absolute;
clear:both;
/* custom decorations */
/*background-color: #ccc;*/ 
}
#marquee_scroller a { 
/* single scrollable item */ 
float:left;
margin: 0 !important;
cursor:pointer;
width: 264px;
height: 193px;
display: block;
padding: 0 8px;

}
#content #marquee_scroller a:hover { 
background: none;
}



/* 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: 10px 10px;
cursor:pointer;
font-size:1px;
position: relative;
}

/* 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; }

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


a.left {float: left;}
a.right {float: right;}

#content a.browse {
margin: 10px;
z-index:100;
}
#content a.browse:hover { 
border: none;
}

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


/* 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;      
}

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


/* @end */






/* @group #marquee_scroller .caption */

#marquee_scroller a {
width: 264px; /* width of image */ 
height: 193px; /* height of image */ 
float:left;
overflow: hidden;
position: relative;
text-decoration: none;
}

#marquee_scroller img {
position: absolute;
top: 0;
left: 0;
width: 264px;
height: 193px;
}
.caption {
color: #fff;
float: left;
position: absolute;
height: 110px; /* expanded height of caption */ 
width: 264px;
}
 	
#marquee_scroller a .caption {
top: 166px; /* the diff between this and the image height will be the caption height  */ 
left: 0;
text-align: right;
background: transparent url("/img/rubyforty/bg_trans_blk40.png") 0 0 repeat !important; /* IE7 */ 
background-color: #000;
}
#marquee_scroller a:hover .caption {
background: transparent url("/img/rubyforty/bg_trans_blk60.png") 0 0 repeat !important; /* IE7 */ 
background-color: #000;
}


#marquee_scroller .caption h3 {
font: 16px/normal Georgia, Times, serif;
font-weight: bold;
margin: 6px 8px 2px 0;
text-align: right;
color: #fff;
}
body.fr #marquee_scroller .caption h3 {
font-size: 18px;
line-height: 28px;
}


#marquee_scroller .caption p {
font: 14px/normal Georgia, Times, serif;
font-weight: normal;
margin: 0 8px;
text-align: right;
color: #fff;
}
#marquee_scroller .caption p.details {
font: 11px/normal "Lucida Grande", Tahoma ,Verdana, Arial, sans-serif;
}



/* @end */