/* 
Title: 		Home Page Template
Purpose:	General layout and styles for the home page
Website:	nac-cna.ca
Author:		Jason Westerlund (jaywest) for the National Arts Centre
Contact:	jaywest@nac-cna.ca
Updated:	May 28, 2010 
*/



.ticket_widget {
width: 180px;
}

#header {
	font-size: 0; line-height: 0; /* required for IE7 */
}
/* @group Layout */

/*#content {
margin-top: 34px;  start all content below the #nav_mandate  
}*/
#content_header_wrap {
width: 100%;
background-color: transparent;
height: 440px;
background: url("/img/bg/marquee_blk20.png") repeat-x;

}

#marquee_overlay {
position: absolute;
width: 100%;
height: 440px;
top:  0;
left: 0;
}

.prairie {
	background: url("/img/marquee/prairie_crosstext.jpg") 50% 234px repeat-x scroll;
}

.boxoffice {
	background: url("/img/marquee/box_office_bg.png") repeat-x;
}



#content_header {
margin: 0 auto;
width: 980px;
height: 440px;
background-color: transparent; 

}

#content_inner {
width: 980px;
margin: 20px auto;
/*background: #fff url("/img/1011/bg_home.png") 0 0 repeat-x;*/
overflow: hidden;
}

#nav_filter {
margin-top: 0;
}


#content_main {
float: left;
width: 460px;
margin: 10px 0 0 20px;
_margin: 10px 0 0 10px; /* Win/IE6 */ 
/*clear: left;*/
}
#content_sub {
float: right;
width: 300px;
margin: 0 20px 0 0;
_margin: 0 10px 0 0; /* Win/IE6 */ 
}





#content_footer_wrap {
clear: both;
padding: 20px 0;
overflow: hidden;
background-color: #f1f1f1; 
}

#content_footer {
width: 980px;
margin: 0 auto;
overflow: hidden;
}
#content_footer a {
margin: 0 5px;
}



/* @end */





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

#branding p {
background: transparent url("/img/trans/bg_trans_wht20.png") 0 0 repeat;
}
#branding p a:hover {
background-color: #333;
}
/* @end */




/* @group #nav_main */

#nav_mandate_wrap {
background-color: #212121;

}
#nav_main_wrap {
background: transparent url("/img/trans/bg_trans_blk20.png") 0 0 repeat !important; 
}
#nav_main a {
color: #999;
}
#nav_main_wrap:hover {
background: transparent url("/img/trans/bg_trans_blk70.png") 0 0 repeat !important; 
}
#nav_main_wrap:hover a {
color: #999;
}
#nav_main a:hover {
background: transparent url("/img/trans/bg_trans_wht20.png") 0 0 repeat !important; 
color: #fff;
}

/* @end */







/* @group Marquee */



/* tabs portion (top) */


/* minor resets */

/*#content_header_wrap{
	/*background: #171330;*!/
	/*background: #000;*!/
	background: #000000 url('/img/bg/marquee_blk20.png') 160px 0 repeat-x;
	border: 1px solid green;
	margin:  0;
}*/

#marquee {
/*float:left;*/
margin:0 auto;
/*width:1040px;*/
position: relative;
}

/*temp*/

#images {
cursor:pointer;
/*float:left;*/
height:440px;

position:relative;
width:980px;

}

/* single slide */
#images div {
	margin: 0 auto;
	display:none;
	position:absolute;
	top:0;
	height:440px;
	font-size:12px;
	float: left;
}


#images img {
	width: 980px;
	height:  440px;
	border: none;
	padding: 0;
	margin: 0;
}

#images a {
	border:none;
}

/* tabs (those little circles below slides) */
.slidetabs {
	position: relative;
	top: -185px;
	/*left: 480px;*/
	margin: 0 0 0 48%;
	/*clear:both;*/
	height: 30px;
	width: 80px;
	z-index: 9;
	
}

/* single tab */
.slidetabs a {
	width:8px;
	height:8px;
	float:left;
	margin:3px;
	background:url("/img/1011/navigator.png") 0 0 no-repeat;
	display:block;
	font-size:1px;	
	border: none;	
}

/* mouseover state */
.slidetabs a:hover {
	background-position:0 -8px;      
}

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


/* prev and next buttons */

.backward, .forward {
	float:left;
	margin-top:240px;
	background:transparent url("/img/1011/hori_large.png") no-repeat;
	display:block;
	width:30px;
	height:30px;
	cursor:pointer;
	font-size:1px;
	text-indent:-9999em;	
	position: absolute;
	/*left:20px;*/
	z-index: 9;
	border: none;
}

.forward {
	right: 20px;
	float: right;
}


.forward 				{ background-position: 0 -30px; clear:right; }
.forward:hover 		{ background-position:-30px -30px;}
.forward:active 	 	{ background-position:-60px -30px; } 
#marquee a:hover {
	background-color: transparent;
	border: none;
}

/* prev */
.backward {
	left: 20px;
}
.backward:hover  		{ background-position:-30px 0; }
.backward:active  	{ background-position:-60px 0; }

/* disabled navigational button. is not needed when tabs are configured with rotate: true */
.disabled {
	visibility:hidden !important;		
}




/* horizontal scrollable portion */

/* container */
#scroller {
height:160px;
position:absolute;
top:280px;
width:980px;
background: url("/img/trans/bg_trans_blk20.png") repeat;
/*margin: 0 20px;*/
}




/* scrollable navi */

/* position and dimensions of the navigator */
.navi  {

height:20px;
margin:  0 0 0 49%;
position:absolute;
top:165px;
width:200px;
}

/* items inside navigator */
#content .navi a {
	width:8px;
	height:8px;
	float:left;
	margin:3px;
	background:url("/img/1011/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;     
}



/* captions */


/* @group #marquee_scroller .caption */


/*#marquee_scroller {
 background: transparent url("/img/trans/bg_trans_blk40.png") repeat;
	float: left;
	/*height: 160px;
	margin-left: 50px;*!/

}*/

#marquee_scroller {
  	position:absolute;
	overflow:hidden;
	width: 980px;
	height:160px;



}

#marquee_scroller .items {
	/* this cannot be too large */
	width:20000em;
	position:absolute;
	clear:both;
}

.items div {
	float:left;
	
/*	width:980px;*/

}

/* single scrollable item */
#marquee_scroller img {
margin:0 20px;
position: absolute;
top: 0;
left: 0;
}




/* active item */
#marquee_scroller .active {
	border:2px solid #000;
	position:relative;
	cursor:default;
}






.caption {
color: #fff;
float: left;
position: absolute;
height: 100px; /* expanded height of caption */ 
width: 320px;
}

#marquee_scroller a {
width: 320px; /* width of image */ 
height: 160px; /* height of image */ 
float:left;
overflow: hidden;
position: relative;
text-decoration: none;
margin: 0;
}
 	
#marquee_scroller a .caption {
top: 130px; /* the diff between this and the image height will be the caption height  */ 
left: 0;
margin-left: 20px;
text-align: right;
background: transparent url("/img/trans/bg_trans_blk40.png") 0 0 repeat !important; /* IE7 */ 
background-color: #000;
}
#marquee_scroller a:hover .caption {
background: transparent url("/img/trans/bg_trans_blk60.png") 0 0 repeat !important; /* IE7 */ 
background-color: #000;
}

#marquee_scroller .caption h3 {
font: 17px/normal Georgia, Times, serif;
font-weight: normal;
margin: 6px 30px 2px 0;
text-align: right;
color: #fff;
}


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




/* @end */