.featured { 
	height: 450px;
	padding: 0 0 0;
	position: relative;
	clear: both; } 

#topstory { 
	width: 976px;
	height: 450px; } 

#topstory .photo { 
	background-repeat: no-repeat;
	background-position: top right;
	width: 976px;
	height: 450px; }
   
#topstory .photo a.link { 
   width: 976px;
   height: 450px;
   display: block;
   top: 0;
   left: 0; }
	
#topstory .photo .mask { 
	background: url(/img/main-mask.png) no-repeat 0 0; 
	height: 450px;
	position: relative; } 

 
   
#topstory .photo .text  {
	background: #fff no-repeat center top; 
	width: 360px;
	height: 250px;
	padding: 25px;
	position: absolute;
		top: 35px;
		left: 35px;
	box-shadow: 1px 1px 8px #adadad;		
		-moz-box-shadow: 1px 1px 8px #adadad;	
		-webkit-box-shadow: 1px 1px 8px #adadad;	
	border-radius: 10px;
		-moz-border-radius: 10px; 
		-webkit-border-radius: 10px; } 
#topstory .photo .text:hover { background-position: center -300px; } 
#topstory .photo .text:active { background-position: center -600px; } 

#topstory .text h1 { 
	color: #f0632c; 
	font-size: 60px; 
	line-height: 52px;
	margin: 0;
	padding-bottom: 10px;
	text-transform: uppercase; }
#topstory .text h1 a { 
	color: #f0632c; 
	display: block; }
	#topstory .text:hover h1 a,
	#topstory .text h1 a:hover { color: #f0632c; } 
	 
	#topstory .text:active h1,
	#topstory .text h1 a:active { color: #07807e; }  
	
#topstory .text p,
#topstory .text p a { 
	color: #1d8887; 
	font-size: 16px; 
	line-height: 20px; 
	display: block; }
	#topstory .text:hover p a,	
	#topstory .text p a:hover { color: #1d8887; } 
	 
	#topstory .text:active p a,
	#topstory .text p a:active { color: #126b6a; } 		


	
#topstory .text a.contribute {
   background: #f0632c;
   	background: -moz-linear-gradient(top, #f0632c, #d95625);
		background: -webkit-gradient(linear, left top, left bottom, from(#f0632c), to(#d95625));
		filter: progid:DXImageTransform.Microsoft.Gradient( StartColorStr='#f0632c', EndColorStr='#d95625', GradientType=0 );
	padding: 10px; 
   display: inline-block;
   margin: 15px 0;
   font-size: 20px;
   color: #fff;
   clear: both;
   text-transform: uppercase;
   border-radius: 10px;
		-moz-border-radius: 10px; 
		-webkit-border-radius: 10px; }
	
#topstory .text a.contribute:hover {
	background: #ba2c0f;
		background: -moz-linear-gradient(top, #ba2c0f, #8f2813);
		background: -webkit-gradient(linear, left top, left bottom, from(#ba2c0f), to(#8f2813));
		filter: progid:DXImageTransform.Microsoft.Gradient( StartColorStr='#ba2c0f', EndColorStr='#8f2813', GradientType=0 );	}

#topstory .text a.contribute:active {
   background: #f0632c;
      background: -moz-linear-gradient(top, #f0632c, #d95625);
		background: -webkit-gradient(linear, left top, left bottom, from(#f0632c), to(#d95625));
		filter: progid:DXImageTransform.Microsoft.Gradient( StartColorStr='#f0632c', EndColorStr='#d95625', GradientType=0 );
	box-shadow: inset 1px 1px 4px #410f05;		
		-moz-box-shadow: inset 1px 1px 4px #410f05;   			
		-webkit-box-shadow: inset 1px 1px 4px #410f05; }
      
      
      
      
#topstory .timeline .photo, #topstory .map .photo { 
   background-repeat: no-repeat;
	background-position: top left;
	width: 926px;
	height: 400px; 
   padding: 25px;
   text-align: left;
   position: relative; }
   
   
#topstory .timeline h1, #topstory .map h1 { 
   color: #f0632c; 
	font-size: 32px; 
	line-height: 30px;
	margin: 0;
	padding-bottom: 10px;
	text-transform: uppercase; }
   
#topstory .timeline p, #topstory .map p { 
   color: #7f7f7f; 
	font-size: 21px; 
	line-height: 18px;
   margin-bottom: 12px;
   width: 500px;
   float: left; } 
   
#topstory .timeline img.timeline-links { 
   position: absolute;
   top: 305px;
   right: 14px; }
   
#topstory .map img.hi-map { 
   position: absolute;
   top: 15px;
   right: 15px; }   
   
.popup { 
   background: #fff;
   box-shadow: 1px 1px 8px rgba(0, 0, 0, .4);		
		-moz-box-shadow: 1px 1px 8px rgba(0, 0, 0, .4);
		-webkit-box-shadow: 1px 1px 8px rgba(0, 0, 0, .4);
	border-radius: 6px;
		-moz-border-radius: 6px; 
		-webkit-border-radius: 6px;
   padding: 20px 20px 10px 20px;
   height: auto; 
   position: absolute;
   left: 50%; 
   top: 65px;
   z-index: 100000000; }  
   

.popup { 
   width: 860px;
   margin-left: -450px;
   top: 10px; }   
   
   
.popup img.image { 
   width: 295px !important;
   height: auto !important;
   float: left;
   margin: 0 20px 10px 0; }   
  
.popup h1 {  }
   
.popup p { 
   font-size: 13px !important;
   width: auto !important;
   float: none !important; }   
   
.popup a.close { 
	background: url(/img/popup-close.png) no-repeat 0 0;	
   width: 15px;
	height: 16px;
   float: right;
   margin: -12px -12px 0 0;
	display: block; }	
.popup a.close:hover { background-position: 0 -16px; }
.popup a.close:active { background-position: 0 -32px; }   
      
      
#topstory .hidden { display: none; }	
	
/* Top Story Controls */

#controls {
	width: 1020px;
    position: absolute;
    left: -22px; 
	top: 375px;
	height: 43px;
    margin: 0; 
	padding: 0;
    list-style: none;
	z-index: 1000000;
    }
	

#controls li { float: left; }
#controls li#topstory-tab-next { float: right; }

#controls .frame-back, 
#controls .frame-next { 
		background: url(/img/main-controls.png) no-repeat 0 0; 
		width: 43px;
		height: 43px; 
		display: block; 
		overflow: hidden; }
						
	#controls .frame-back { margin-right: 7px; }
	#controls .frame-next { background-position: -43px 0; }
	
	#controls .frame-back:hover { background-position: 0 -43px; }
	#controls .frame-next:hover { background-position: -43px -43px; }
	
	#controls .frame-back:active { background-position: 0 -86px; }
	#controls .frame-next:active { background-position: -43px -86px; }
	
	#controls a.frame {
		background: url(/img/main-thumbs.png) no-repeat 0 0; 
		width: 199px;
		height: 55px;
		padding: 10px 12px;
		margin: -18px 3px 0;
		float: left;
		font-size: 14px;
		line-height: 15px;
		color: #fff;
		font-weight: 400;
		text-align: left;
		text-transform: uppercase; }
	#controls a.frame:hover { background-position: 0 -75px; }	
	#controls li.selected a.frame {
		background-position: 0 -150px;
		height: 75px;		
		padding: 17px 12px 10px;		
		margin-top: -25px; }	
		
	#controls a.frame .thumb {
		background-position: center top; 
		width: 64px;
		height: 51px; 
		margin-right: 7px;
		float: left;
		-moz-box-shadow: inset 1.5px 1.5px 4px rgba(0, 0, 0, 0.5);
			-webkit-box-shadow: inset 1.5px 1.5px 4px rgba(0, 0, 0, 0.5);
			box-shadow: inset 1.5px 1.5px 4px rgba(0, 0, 0, 0.5);		
		border-radius: 6px;
			-moz-border-radius: 6px; 
			-webkit-border-radius: 6px; }
			
	#controls li a.frame .headline {
		padding: 7px 0 0 0 !important; }
		
#controls .selected a:link, #controls .selected a:visited { cursor: default; }
#controls a:hover, #controls a:focus, #controls a:active { cursor: pointer; }


/* Below */

.below { 
	background: url(/img/below.png) no-repeat 0 0; 
	text-align: left;
	min-height: 235px; }

.below .feed,
.below .sidebar { float: left; }

.below .feed { width: 630px; }
.below .sidebar { 
	width: 316px; 
	padding: 5px 15px 15px;
	text-align: center; }

.feed .title { 
	height: 19px;
	padding: 6px 0 0 13px;
	position: relative; }
	
.feed .title h2 { 
		width: 233px; 
		float: left;
		text-indent: -9000px; }	
		.feed .title h2 a { 
			background: url(/img/h2-campaign-feed.png) no-repeat 0 0;	
			height: 19px;
			display: block; }	
		.feed .title h2 a:hover { background-position: 0 -19px; }
		.feed .title h2 a:active { background-position: 0 -38px; }		
		
/* Tabs */

#feed-tabs { 
	position: absolute;
	top: 2px;
	right: 0; }
#feed-tabs ul { 
	width: 235px; 
	height: 20px; 
	list-style: none;	
	float: right; 
	margin: 0; }
#feed-tabs.ui-tabs-nav li { float: left; margin-right: 4px; }
#feed-tabs.ui-tabs-nav li a {
	background: #d2f1f1;
	padding: 3px 7px;
	display: inline-block;
	font-size: 11px;
	text-transform: uppercase;
	color: #077573;
	box-shadow: 1px 1px 2px #6babab;		
		-moz-box-shadow: 1px 1px 2px #6babab;	
		-webkit-box-shadow: 1px 1px 2px #6babab;	
	border-radius: 6px;
		-moz-border-radius: 6px; 
		-webkit-border-radius: 6px; }
	#feed-tabs.ui-tabs-nav li a:hover {
		background: #def5f5;
		color: #d03819;  }
	#feed-tabs.ui-tabs-nav li.ui-tabs-selected a  {
		background: #fff;
		color: #f0632c;
		box-shadow: inset 1px 1px 3px #949494;		
			-moz-box-shadow: inset 1px 1px 3px #949494;	
			-webkit-box-shadow: inset 1px 1px 3px #949494; }
		
		
/* Feed */

.feed #all, .feed #facebook, .feed #twitter, .feed #news { padding: 16px 20px 10px 22px; }

/* Rotator & Controls
-------------------------------------------------------------- */

.hidden {display: none;}

.rotator_controls  {
    height: 11px;
    overflow: hidden;
    list-style: none;
    margin: auto;
    padding: 4px 0;
    }

.rotator_controls  li {
    float: left;
    margin: 0;
    min-width: 11px; /* be nice to Opera */
    }

.rotator_controls  .selected a {
    z-index: 2;
    }

.rotator_controls  .frame-prev,
.rotator_controls  .frame-1,
.rotator_controls  .frame-2,
.rotator_controls  .frame-3,
.rotator_controls  .frame-4,
.rotator_controls  .frame-5,
.rotator_controls  .frame-6,
.rotator_controls  .frame-next {
    float: left;
    height: 11px;
    overflow: hidden;
    text-align: center;
    display: block;
    outline: 0;
    }

.rotator_controls  .frame-prev {
    background: url('/assets/img/rotator_back.png') no-repeat left top;
    width: 11px;
    }

.rotator_controls  .frame-1,
.rotator_controls  .frame-2,
.rotator_controls  .frame-3,
.rotator_controls  .frame-4,
.rotator_controls  .frame-5,
.rotator_controls  .frame-6 {
    display: none;
    }

.rotator_controls  .frame-next {
    background: url('/assets/img/rotator_next.png') no-repeat left top;
    display: none;
    }

.rotator_controls  .frame-prev:hover,
.rotator_controls  .frame-1:hover,
.rotator_controls  .frame-2:hover,
.rotator_controls  .frame-3:hover,
.rotator_controls  .frame-4:hover,
.rotator_controls  .frame-5:hover,
.rotator_controls  .frame-6:hover,
.rotator_controls  .frame-next:hover  {
    background-position: left -23px;
   background: blue;   
    }

.rotator_controls  .ui-tabs-selected .frame-prev,
.rotator_controls  .ui-tabs-selected .frame-1,
.rotator_controls  .ui-tabs-selected .frame-2,
.rotator_controls  .ui-tabs-selected .frame-3,
.rotator_controls  .ui-tabs-selected .frame-4,
.rotator_controls  .ui-tabs-selected .frame-5,
.rotator_controls  .ui-tabs-selected .frame-6,
.rotator_controls  .ui-tabs-selected .frame-next {
   background-position: left -45px;
   background: red;
   }

.rotator_controls  .ui-tabs-selected a:link,
.rotator_controls  .ui-tabs-selected a:visited { /* @ Opera, use pseudo classes otherwise it confuses cursor... */
    cursor: default;
    }

.rotator_controls  .ui-tabs-hide {
  display: none;
}

.rotator_controls  a:hover,
.rotator_controls  a:focus,
.rotator_controls  a:active { /* @ Opera, we need to be explicit again here now... */
    cursor: pointer;
    }

.rotator_controls a span,
.rotator_controls .ui-tabs-selected a span {
    display: none;
    }
      
