/* -----------------------------------
Site:       Amnesty International Australia
CSS author: brothercake
----------------------------------- */



/* global rotator-container styles (required opacity base for animation) */
.rotator-container
{
	opacity:1;
	filter:alpha(opacity=100);
	zoom:1; /* hasLayout fix for IE */
}


/* action buttons with img content */
.button
{
	height:26px;
}
#banner-rotator-info .button a, #banner-rotator-info .button a:visited,
#action-rotator-info .button a, #action-rotator-info .button a:visited
{
	display:inline-block;
	background:#ffec01;
	color:#000;
}
#banner-rotator-info .button a, #banner-rotator-info .button a:visited
{
	font-size:0.9em;
}


/* generic hover and focus styling, for "take action" button links, 
   previous/next control buttons and slide-marker dots */
.rotator-container .button a, 
.rotator-container .button a:visited, 
.rotator-panel a, 
.rotator-panel a:visited
{
	opacity:0.9;
	filter:alpha(opacity=90);
}
.rotator-container .button a:hover, 
.rotator-panel a:hover
{
	opacity:1;
	filter:alpha(opacity=100);
}
.rotator-container .button a:focus, 
.rotator-panel a:focus
{
	outline:1px dotted #fff;
	outline-offset:1px;
	opacity:1;
	filter:alpha(opacity=100);

	-moz-outline-radius:2px;
}  



/* global slide-marker dots styling */
.rotator-panel .markers li
{
	float:left;
}

.rotator-panel .markers li a, 
.rotator-panel .markers li a:visited
{
	float:left;
	display:block;
	width:10px;
	height:10px;
	padding:5px 3px; /* to increase the clickable target area */
	line-height:1;
	opacity:0.8;
	filter:alpha(opacity=80);
	color:#aaa;
	font-weight:bold;
}
.rotator-panel .markers li a:hover,
.rotator-panel .markers li a:focus
{
	opacity:1;
	filter:alpha(opacity=100);
	outline-offset:3px;

	-moz-outline-radius:5px;
}
.rotator-panel .markers img.current
{
	color:#fff;
}


/* main banner rotator - image container */
#banner-rotator-image
{
}


/* main banner rotator - info container */
#banner-rotator-info
{
}


/* main banner rotator - info container > info heading and text elements 
   fixed height and hidden overflow ensures a consistent layout
   and limits the amount of visible content */
#banner-rotator-info .heading
{
	padding-top:0.1em; /* opera line-position tweak */
	line-height:1;
	height:1.9em;
	overflow:hidden;
}
#banner-rotator-info .text
{
	line-height:1.4;
	height:5.5em;
	overflow:hidden;
}


/* main banner rotator - control panel */
#banner-rotator-panel 
{
}


/* main banner rotator - control panel > previous/next controls */
#banner-rotator-panel .controls
{
	float:right;
	position:absolute;
	right:-27px;
	top:65px;
}

#banner-rotator-panel .controls li
{
	float:left;
	margin:0 0 0 1px;
	width:27px;
	height:26px;
}

#banner-rotator-panel .controls a, 
#banner-rotator-panel .controls a:visited
{
	width:27px;
	height:26px;
	color:#fff;
}
#banner-rotator-panel .controls a.next, 
#banner-rotator-panel .controls a.next:visited
{
	color:#000;
}


/* main banner rotator - control panel > slide-marker dots */
#banner-rotator-panel .markers
{
	float:right;
	position:relative;
	top:-25px;
	left:-7px;
}




/* action rotator - image container */
#action-rotator-image
{
	width:60px; /* IE6 needs this */
}



/* more link */
.post-summary .more
{
	clear:left;
	float:left;
	margin:8px 0 -2px 0;
}



/* action rotator - info container */
#action-rotator-info
{
}


/* action rotator - info container [when scripting is enabled]
   since the surrounding "no-wrap" element needs hidden overflow, 
    moving the marker dots down would start clipping them; 
    so their primary bottom offset is implemented as bottom-padding here
    (in "em" so that the space expands with font size)
    in combination with negative top position on the markers themselves */
#action-rotator-info.rotator-container
{
	padding-bottom:2em;
}


/* action rotator - info container > text element
   fixed height and hidden overflow ensures a consistent layout
   and limits the amount of visible content */
#action-rotator-info .text
{
	line-height:1.4;
	height:4.1em;
	overflow:hidden;
}


/* action rotator - control panel */
#action-rotator-panel 
{
	position:relative;
}

/* action rotator - control panel > slide-marker dots */
#action-rotator-panel .markers
{
	float:left;
	position:absolute;
	left:0;
	top:-1.3em;
}




	 

/* footer rotator - image container (just a dummy) */
#footer-rotator-image
{
}


/* footer rotator - info container */
#footer-rotator-info
{
}

/* hide the additional content */
#footer-rotator-info .additional
{
	display:none;
	width:0;
	height:0;
	overflow:hidden;
}


/* footer rotator - info container > text wrapper */
#footer-rotator-info .text
{
}

/* action rotator - info container > text wrapper's inner content quote
   fixed height and hidden overflow ensures a consistent layout
   and limits the amount of visible content */
#footer-rotator-info .text p em
{
	display:block;
	line-height:1.4;
	height:5.4em;
	overflow:hidden;
}


/* footer rotator - control panel */
#footer-rotator-panel 
{
	clear:both;
}


/* footer rotator - control panel > slide-marker dots */
#footer-rotator-panel .markers
{
	position:relative;
	left:50%;
	margin-left:-36px;/* centering based on 3 frames */
	
	float:left;
	margin-top:10px;
	margin-bottom:-20px;
}

#footer-rotator-panel .markers li
{
}










/* tabs and tab-box styling */
.tabs.hidden, .tabs-boxes .box.hidden
{
	display:none;
}
.tabs-boxes .box.visible
{
	display:block;
}









/* footer links containing additional data for mega-menus */
.footer-info #links-work
{
}
.footer-info #links-involved
{
}

/* hide the extra content in the default footer position */
.footer-links li img, .footer-links li span
{
	display:none;
}


/* additional navigation styling 
   for triggering and containing the mega menu */
#navigation
{
	position:relative;
}

/* selected item */
#navigation li
{
	position:static;
}
#navigation li.selected 
{
	float:left;
	position:relative;
	z-index:100;/* place this above the mega-menu so we can visually merge the backgrounds */
}
#navigation li.selected a,
#navigation li.selected a:visited
{
	overflow:visible;
}
#navigation li.selected a span
{
	position:absolute;
	left:0;
	top:0;

	height:46px;
	margin:-3px 0 0 0;
	border-top:3px solid #fff;
	
	-moz-box-shadow:2px 2px 12px rgba(0,0,0,0.8);
	-webkit-box-shadow:2px 2px 12px rgba(0,0,0,0.8);
	box-shadow:2px 2px 12px rgba(0,0,0,0.8);
}
#navigation li#nav-work.selected a span 
{ 
	background:url(../images/back-nav3.png) #fff no-repeat -84px -92px;
	width:137px; 
	/* nb. correct clip syntax delimits with commas, not spaces,
	   however that syntax doesn't work in IE7 *** or IE6 ***
	   but since this syntax still works in every other browser
	   we may as well use it for everyone */
	clip:rect(-20px 157px 49px -20px);
}

#navigation li#nav-involved.selected a span 
{ 
	background:url(../images/back-nav3.png) #fff no-repeat -222px -92px;
	width:172px; 
	clip:rect(-20px 192px 49px -20px);
}
#navigation li#nav-involved.selected { left:1px; }


/* mega-menu styling, which includes 
   showing and re-styling the extra content thagt was hidden when in the footer position 
   some of this is a little verbose, but that's because in places it has to over-ride 
   existing broad descendent rules like "#navigation a" which cascade down to the menus */
#navigation .mega-menu
{
	float:left;
	overflow:visible;
	position:absolute;
	z-index:0;/* place this below the selected item so we can visually merge the backgrounds */
	
	padding:20px;
	width:760px;
	height:auto;
	
	background:#fff;
	
	-moz-box-shadow:2px 2px 12px rgba(0,0,0,0.8);
	-webkit-box-shadow:2px 2px 12px rgba(0,0,0,0.8);
	box-shadow:2px 2px 12px rgba(0,0,0,0.8);
}
/* hidden style is displayed so we can read values from it */
#navigation .mega-menu.hidden { visibility:hidden; }

/**
	1 featured column, 2 standard columns, 1 breakout [default] = 760px
	1 featured column, 2 standard columns = 595px
	3 standard columns, 1 breakout = 675px
**/
#navigation .mega-menu#mega-menu-involved { width:595px; }

#navigation .mega-menu ul
{
	float:left;
	
	width:170px;
}
#navigation .mega-menu li
{
	float:left;
	
	width:140px;
	margin:0 30px 2em 0;

	line-height:1.3;
	height:5.2em; /* limits visible content to 4 lines in total (usually 1 link + 3 text) */
	overflow:hidden;
	
	background:transparent;
}

#navigation .mega-menu ul.featured
{
	width:235px;
	border-right:1px solid #dfdfdf;
	margin:0 19px 0 0;
}
#navigation .mega-menu ul.featured li
{
	width:200px;
	margin:0 35px 2em 0;
}

#navigation .mega-menu ul.breakout
{
	width:140px;
	padding:20px 10px 20px 15px;
	height:18.3em; /* sizes yellow box to echo (and ultimately set) height of mega-menu */
	
	background:#ffe800;
}
#navigation .mega-menu ul.breakout li
{
	width:140px;
	margin:0;
	
	line-height:1.3;
	height:18em; /* limits visible content to approximate parent dimensions (which is more than enough) */
	overflow:hidden;
}

#navigation .mega-menu li img
{
	float:left;
	margin:0 10px 0 0;
}

#navigation .mega-menu li a, #navigation .mega-menu li a:visited
{
	position:static;
	overflow:visible;
	float:none;
	height:auto;
	color:#000;
	font:normal normal bold 1em/1.3 helvetica,arial,sans-serif;
	text-align:left;
	text-transform:none;
	border-bottom:1px dotted #000;
}

#navigation .mega-menu li a:hover, 
#navigation .mega-menu li a:focus
{
	color:#333;
	background:transparent;
	border-color:#333;
}

#navigation .mega-menu li span
{
	position:static;
	display:block;
	height:auto;
	color:#555;
	margin:1px 0 0 0;
}

#navigation .mega-menu ul.breakout a, 
#navigation .mega-menu ul.breakout a:visited
{
	display:block;
	font-size:1.15em;
	border:none;
}
#navigation .mega-menu ul.breakout span
{
	color:#000;
}
#navigation .mega-menu ul.breakout span a.more, 
#navigation .mega-menu ul.breakout span a.more:visited
{
	display:inline-block;
	font-weight:normal;
	margin:15px 0 0 0;
	font-size:1em;
	background:url(../images/back-arrow-black-transparent.gif) no-repeat 0 0.3em;
}
#navigation .mega-menu ul.breakout span a.more em
{
	font-style:normal;
	border-bottom:1px dotted #000;
}









/* additional quicklinks email styling 
   for triggering and containing the email-signup mega menu */
#quicklinks
{
	position:relative;
}

#quicklinks #nav-emailsignup.selected
{
	position:relative;
	z-index:600; /* bring this above the menu */
	
	background:url(../images/back-email-close.gif) #fff no-repeat 100% 0;
	color:#000;
	padding-bottom:15px;
	
	-moz-border-radius:0;
	-webkit-border-radius:0;
	border-radius:0;
}
#quicklinks #nav-emailsignup.selected a,
#quicklinks #nav-emailsignup.selected a:visited,
#quicklinks #nav-emailsignup.selected a:hover
{
	color:#000;
}


/* email-signup mega-menu styling */
#quicklinks .mega-menu
{
	float:left;
	overflow:visible;
	position:absolute;
	z-index:500;/* bring this above the navbar */
	
	left:0;
	padding:0;
	margin:0 0 0 8px;
	
	/* we need a fixed width and height so we can set clip
	   to remove top-shadow while allowing other three sides to extend out at least 20px;
	   width matches width of side-column, as they perfectly superimpose;
	   setting a height in em allows it and the contents to expand with font-size */
	width:241px;
	/*
	height:30em;
	clip:rect(0, 261px, 32em, -20px);
	*/
	
	text-align:left;
	background:#fff;
	color:#000;
	
	-moz-box-shadow:0 0 8px rgba(0,0,0,0.8);
	-webkit-box-shadow:0 0 8px rgba(0,0,0,0.8);
	box-shadow:0 0 8px rgba(0,0,0,0.8);
}
/* hidden style is displayed so we can read values from it */
#quicklinks .mega-menu.hidden { visibility:hidden; } 



/* menu content, hidden by default */
.footer-container #links-emailsignup
{
	display:none;
	width:0;
	height:0;
	overflow:hidden;
}


/* menu styling when visible */
#quicklinks .mega-menu a, #quicklinks .mega-menu a:visited
{
	color:#333;
}

#quicklinks .mega-menu form
{
	margin:15px 15px 0 15px;
	padding:15px 15px 8px 15px;
	background:#ffe800;
}
#quicklinks .mega-menu form fieldset
{
	padding:0 0 5px 0;
}
#quicklinks .mega-menu form input.text
{
	float:left;
	width:99px;
	padding:6px 8px 4px 8px;
	border:1px solid;
	border-color:#d1d1d1 #f5f5f5 #f5f5f5 #d1d1d1;
	font:normal normal normal 1em/1.3 helvetica,arial,sans-serif;
}
#quicklinks .mega-menu form label.more
{
	background:url(../images/back-arrow-black-transparent.gif) no-repeat 0 0.4em;
	display:block;
}

#quicklinks .mega-menu div.email-info,
#quicklinks .mega-menu div.subscribe-info
{
	margin:0 15px 1px 15px;
	padding:0 15px 15px 15px;
	background:#fff8b2;
}
#quicklinks .mega-menu div.subscribe-info
{
	margin:0 15px 15px 15px;
	padding-top:15px;
}

#quicklinks .mega-menu dl
{
	margin:0;
	padding:15px 0 0 0;
}
#quicklinks .mega-menu dt
{
	font-weight:bold;
}
#quicklinks .mega-menu dd
{
	margin:0;
}

#quicklinks .mega-menu ul
{
	list-style-type:disc;
}
#quicklinks .mega-menu li
{
	list-style-type:disc;
	display:list-item;
	margin:0 0 0 1.2em;
	padding:0.1em 0 0 0em;
	border:none;
}

#quicklinks .mega-menu div.subscribe-info img
{
	float:left;
	margin:0 5px 0 0;
}











/* action groups trigger styling 
   for triggering and container the local action groups menu */
#action-groups
{
	position:relative;
	padding:0 0 20px 0;
}

#nav-action-groups
{
	display:block;
}

#nav-action-groups a, #nav-action-groups a:visited
{
	display:block;
	position:relative;
	z-index:100; /* place it above the menu */
	
	padding:5px 7px 4px 9px;
	background:url(../images/back-action-groups.gif) #fff no-repeat 100% 0;
	color:#333;
	border:1px solid;
	border-color:#d1d1d1 #f5f5f5 #f5f5f5 #d1d1d1;

	-moz-border-radius:3px;
	-webkit-border-radius:3px;
	border-radius:3px;
}
#nav-action-groups a:focus
{
	outline:1px dotted #fff;
	outline-offset:1px;
	-moz-outline-radius:3px;
}




/* global menu content styling, which is visible by default
   or when inside the mega-menu */
#links-action-groups, #action-groups .mega-menu
{
	padding:8px;
	margin:5px 0 5px -1px;
	width:164px;
	
	text-align:left;
	background:#fff;
	border:1px solid;
	border-color:#555;
	background:url(../images/back-comments.png) repeat-y -230px 0;
	
	-moz-border-radius:3px;
	-webkit-border-radius:3px;
	border-radius:3px;
}

#links-action-groups li.more,
#action-groups .mega-menu li.more
{
	background:url(../images/back-arrow-yellow-transparent.gif) no-repeat 0 0.4em;
	margin-bottom:2px;
}

#links-action-groups a:hover, #action-groups .mega-menu a:hover
{
	color:#fff;
}


/* but default content is hidden when scripting is enabled */
#links-action-groups.hidden
{
	display:none;
	width:0;
	height:0;
	overflow:hidden;
}


/* action groups mega-menu styling */
#action-groups .mega-menu
{
	float:left;
	overflow:visible;
	position:absolute;
	z-index:0;
	
	border-color:#000;
	
	-moz-box-shadow:0 0 5px rgba(150,150,150,0.8);
	-webkit-box-shadow:0 0 5px rgba(150,150,150,0.8);
	box-shadow:0 0 5px rgba(150,150,150,0.8);
}
/* hidden style is displayed so we can read values from it */
#action-groups .mega-menu.hidden { visibility:hidden; } 
   
   
/* menu content styling when inside mega-menu */
#action-groups .mega-menu ul
{
}










/* "rich-scroller" styling (script enabled scroll region) */
.rich-scroller
{
	overflow:hidden;
	padding-right:25px;
}

/* inner scrolling content */
.rich-scroller .scrolling-content
{
	padding-right:25px;
	position:absolute;
	top:0;
}


/* scrollbar controls (the scrollbar, track and buttons) */
.rich-scroller .scrollbar-controls, 
.rich-scroller .scrollbar-controls *
{
	margin:0;
	padding:0;
	list-style-type:none; 
	border:none;
	cursor:default;
}

.rich-scroller .scrollbar-controls
{
	position:absolute;
	right:0;
	top:0;
	width:15px;
	background:#ccc;
}
.rich-scroller .scrollbar-controls li
{
	display:block;
	border:none;
	width:15px;
}

.rich-scroller li.scrollbar-button-up,
.rich-scroller li.scrollbar-button-down
{
	height:15px;
	text-align:center;
}
.rich-scroller li.scrollbar-button-up
{
	border-bottom:1px solid #fff;
}
.rich-scroller li.scrollbar-button-down
{
	border-top:1px solid #fff;
}
.rich-scroller a.scrollbar-button-up, 
.rich-scroller a.scrollbar-button-up:visited,
.rich-scroller a.scrollbar-button-down, 
.rich-scroller a.scrollbar-button-down:visited
{
	display:block;
	width:15px;
	height:15px;
	position:relative;
}
.rich-scroller a.scrollbar-button-up:hover, 
.rich-scroller a.scrollbar-button-up:focus,
.rich-scroller a.scrollbar-button-down:hover, 
.rich-scroller a.scrollbar-button-down:focus
{
	background:#bbb;
}
.rich-scroller li.scrollbar-button-up img,
.rich-scroller li.scrollbar-button-down img
{
	position:absolute;
	left:4px;
	top:5px;
}

.rich-scroller .scrollbar-track
{
}
.rich-scroller a.scrollbar-scrollbar, 
.rich-scroller a.scrollbar-scrollbar:visited
{
	display:block;
	position:absolute;
	left:0;
	top:0;
	margin:16px 0 0 0;/* top position is scripted; margin shifts it below "up" button */
	width:15px;
	background:#acacac;
}
.rich-scroller a.scrollbar-scrollbar:hover, 
.rich-scroller a.scrollbar-scrollbar:focus
{
	background:#a5a5a5;
}