/**
* !!! DO NOT MODIFY THIS FILE. ANY CHANGES OR ENHANCEMENTS MUST GO IN A SEPARATE
* STYLE SHEET. ALL CHANGES SHOULD BE COMMENTED AND INCLUDE THE AUTHOR NAME
* AND THE DATE IT WAS MODIFIED ON, AS WELL AS PROVIDE A BRIEF DESCRIPTION FOR
* WHAT THE STYLE ACCOMPLISHES !!!
*
* I.E.
*
* Author: Joe User
* Date: 2010/01/31
* Description: Wraps the content within a red border.
*
* div.newstyle {
*     border: 1px solid #c00;
* }
*/

 

/** 
* World Hepatitis Alliance
*
* @project 		World Hepatitis Alliance - Sitefinity CMS Theme
* @version 		1.0
* @author 		Mike Badgley, High Road Communications
* @copyright	2010
*/

/**
* Reset
*
* Global reset of all X/HTML elements. This section MUST appear at the top!
*
* @author 	Eric Meyer, meyerweb.com
* @version	1.0 | 20080212
* @see 		http://meyerweb.com/eric/tools/css/reset/
* @section 	reset
* @media 	all
*/
@media all {

	html, body, div, span, applet, object, iframe,
	h1, h2, h3, h4, h5, h6, p, blockquote, pre,
	a, abbr, acronym, address, big, cite, code,
	del, dfn, em, font, img, ins, kbd, q, s, samp,
	small, strike, strong, sub, sup, tt, var,
	b, u, i, center,
	dl, dt, dd, ol, ul, li,
	fieldset, form, label, legend,
	table, caption, tbody, tfoot, thead, tr, th, td {
		margin: 0;
		padding: 0;
		border: 0;
		outline: 0;
		font-size: 100%;
		vertical-align: baseline;
		background: transparent;
	}
	body {
		line-height: 1;
	}
	ol, ul {
		list-style: none;
	}
	blockquote, q {
		quotes: none;
	}
	blockquote:before, blockquote:after,
	q:before, q:after {
		content: '';
		content: none;
	}

	/* remember to define focus styles! */
	a:active {
		outline: 0;
	}

	/* remember to highlight inserts somehow! */
	ins {
		text-decoration: none;
	}
	del {
		text-decoration: line-through;
	}

	/* tables still need 'cellspacing="0"' in the markup */
	table {
		border-collapse: collapse;
		border-spacing: 0;
	}

}


/**
* Core Layout
*
* Basic styling for most X/HTML elements to give a general layout that is
* usable and shared across all devices and browsing platforms.
*
* @section	core
*/
html {
	background-color: #fff;
	font-size: 100.01%;
}

body {
	background-color: #000;
	color: #666;
	font: normal 13px/19px Arial, Helvetica, sans-serif;
}

a:link,
a:visited,
a:hover,
a:active {
	color: #00aeef;
	text-decoration: underline;
}
a:hover,
a:active {
	text-decoration: none;
}

address, p, hr {
	margin: 1.45em 0;
}
h1, h2, h3, h4, h5, h6 {
	margin: 0 0 1.45em 0;
}
	/* for Cufon.replace('h1') */
	.cufon-loading h1 { 
		visibility: hidden !important;
	}
	h1 {
		background: transparent url(../_images/layout_u_graykeyline_220w_1h.gif) repeat-x left bottom;
		color: #00adee;
		font-size: 2.00em;
		font-weight: normal;
		line-height: 28px;
		margin: 19px -30px 19px;
		padding: 0 16px 12px;
	}
	h2 {
		color: #000;
		font-size: 1.54em;
		font-weight: normal;
		margin: 0 0 0.95em 0;
	}
		address + h2, 
		blockquote + h2, 
		p + h2, 
		ul + h2, 
		ol + h2, 
		dl + h2 { margin-top: 1.5em; }
	h3 {
		color: #00adee;
		font-size: 1.23em;
		font-weight: bold;
		margin: 0;
	}
		h3 + p,
		h3 + ul,
		h3 + ol { margin-top: 0; }
	
blockquote, dl, ol, ul {
	margin: 1.45em 0 1.45em 2.27em;
}
	ul {
		color: #666;
		list-style-type: disc;
	}
	ol {
        color: #666;
        list-style-type: decimal;
	}

form { } 
	input.text,
	textarea.text {
		background-color: #e3e4e4;
		border: 0;
		color: #666;
		font-size: 100%;
		font-family: Arial, Helvetica, sans-serif;
		padding: 5px;
		vertical-align: top;
	}

	/* Graphic-based submit buttons. */
	input.submit {
		background: transparent no-repeat left top;
		border: 0;
		cursor: pointer;
		height: 23px;
		margin: -1px 0 0 0;
		*margin-top: 0;
		overflow: hidden;
		padding: 23px 0 0 0;
		position: relative;
		text-indent: -5000px;
		vertical-align: top;
	}

	textarea:focus {
		/*border: 1px solid #a0acbf;*/
	}



/**
* Page Layout
*
* Define major sections of the template - header, column(s) and footer.
*
* @section	layout
* @media	screen, projection
*/
@media screen, projection {

	/**
	* @section Page layout
	*/
	#page {
		margin: 0 auto;
		position: relative;
		width: 940px;
	}


	/**
	* @section Header
	*/
	#header {
		background: #fff url(../_images/layout_u_header_940w_220h.gif) no-repeat left top;
		clear: both;
		padding: 1px 0;
		position: relative;
		width: 100%;
	}
		/* SEO purposes only. */
		h1.bg {
			background-image: none;
			left: -5000px;
			margin: 0;
			padding: 0;
			position: absolute;
		}

		#header .logo {
			left: 16px;
			position: absolute;
			top: 28px;
		}
			#header .logo,
			#header .logo img {
				display: block;
				text-decoration: none;
			}

		/* Search field. */
		#header div.search {
			position: absolute;
			right: 15px;
			top: 20px;
		}
			div.search input.text { 
				height: 19px; 
				padding: 2px 0 0 3px;
			}
			div.search input.submit {
				background-image: url(../_images/btn_u_search_67w_23h.png);
				width: 67px;
			}


	/**
	* @section Content
	*/
	#content {
		display: inline;
		float: left;
		padding-bottom: 30px;
		*padding-bottom: 14px;
		position: relative;
		width: 940px;
	}
		div.column {
			display: inline;
			float: left;
			left: 940px;
			position: relative;
		}


		/**
		* @subsection 1 Column (Black)
		* @notes All black layout that will be used primarily for the "Home" 
		* page.
		*/
		div.one-column-black { }
			div.one-column-black #body {
				margin-left: -100%;
				width: 100%;
			}
			div.one-column-black #sidebar,
			div.one-column-black #navigation { display: none; }


		/**
		* @subsection 1 Column (White)
		* @notes Similar to above, except content resides on a white background.
		* Additional content container is available (black background).
		*/
		div.one-column-white { }
			div.one-column-white #body {
				background: #fff url(../_images/layout_u_1columnbodytop_940w_3h.gif) no-repeat left top;
				margin-left: -100%;
				width: 100%;
			}
				div.one-column-white #body div.layout {
					background: transparent url(../_images/layout_u_1columnbodybottom_940w_3h.gif) no-repeat left bottom;
					overflow: hidden;
					padding: 1px 30px 15px;					
					position: relative;
				}
			div.one-column-white #sidebar,
			div.one-column-white #navigation { display: none; }


		/**
		* @subsection 2 Column - Right Sidebar
		* @notes Two column layout with the body column being on a white back-
		* ground while the right-hand sidebar is a series of 'boxes' that sit
		* on the site's default background color (black). An additional content
		* container is available (black background).
		*/
		div.two-column-right { }
			div.two-column-right #body {
				background: #fff url(../_images/layout_u_2columnrightbodytop_697w_3h.gif) no-repeat left top;
				margin-left: -940px;
				width: 697px;
			}
				div.two-column-right #body div.layout {
					background: transparent url(../_images/layout_u_2columnrightbodybottom_697w_3h.gif) no-repeat left bottom;
					overflow: hidden;
					padding: 1px 30px 15px;
					position: relative;
				}
			div.two-column-right #sidebar {
				margin-left: -221px;
				width: 221px;
			}
			div.two-column-right #navigation { display: none; }


		/**
		* @subsection 2 Column - Left Sidebar
		* @notes Two column layout with the body column being on a white back-
		* ground while the left-hand sidebar is primarily used for the secondary
		* navigation (black background). An additional content container is 
		* available (black background).
		*/
		div.two-column-left { }
			div.two-column-left #body {
				background: #fff url(../_images/layout_u_2columnleftbodytop_780w_3h.gif) no-repeat left top;
				margin-left: -780px;
				width: 780px;
			}
				div.two-column-left #body div.layout {
					background: transparent url(../_images/layout_u_2columnleftbodybottom_780w_3h.gif) no-repeat left bottom;
					overflow: hidden;
					padding: 1px 30px 15px;
					position: relative;
				}
			div.two-column-left #navigation {
				margin-left: -940px;
				width: 135px;
			}
			div.two-column-left #sidebar { display: none; }


		/**
		* @subsection 3 Column - Left and Right Sidebar
		* @notes Three column layout that utilizes the two sidebar (left and 
		* right) that are found in the two layout types above. An additional
		* content container is available (black background).
		*/
		div.three-column { zoom: 1; }
			div.three-column #body {
				background: #fff url(../_images/layout_u_3columnbodytop_538w_3h.gif) no-repeat left top;
				margin-left: -780px;
				width: 538px;
				z-index: 10;
			}
				div.three-column #body div.layout {
					background: transparent url(../_images/layout_u_3columnbodybottom_538w_3h.gif) no-repeat left bottom;
					overflow: hidden;
					padding: 1px 30px 15px;
					position: relative;
				}
			div.three-column #navigation {
				margin-left: -940px;
				width: 135px;
				z-index: 10;
			}
			div.three-column #sidebar { 
				margin-left: -221px;
				width: 221px;
			}


	/**
	* @section Bottom (content area)
	* @notes The bottom content area spans the width of the template and falls
	* immediately beneath the content (#content) area.
	*/
	#bottom {
		margin: 0 0 30px 0;
		/*overflow: hidden;*/
		position: relative;
		width: 100%;
	}
		#page div.bottom-three-column {
			margin-left: 160px;
			width: 538px;
		}
		#page div.bottom-two-column-left {
			margin-left: 160px;
			width: 780px;
		}
		#page div.bottom-two-column-right {
			margin-left: 243px;
			width: 697px;
		}
		


	/**
	* @section Footer
	*/

	#footer {
		background-color: #fff;
		clear: both;
		color: #86878a;
		font-size: 0.92em;
		height: auto !important;
		height: 160px;
		line-height: 1.23em;		
		min-height: 160px;
		padding-top: 1px;
		position: relative;
		width: 100%;
	}
		#footer div.box {
			margin: 27px auto;
			position: relative;
			width: 940px;
		}

		/* "Am I Number 12?" mission statement. */
		#footer p.mission {
			display: inline;
			float: right;
			margin-top: 0;
			text-align: right;
			width: 365px;
		}
			p.mission img {
				float: right;
				margin: -3px 0 0 14px;
				position: relative;
			}

		#footer ul.navigation {
			display: block;
			float: none;
			margin: 0;
			text-align: left;
			width: auto;
		}
			#footer ul.navigation li {
				color: #86878a;
				float: none;
			}
		#footer ul.navigation.language { margin-bottom: 11px; }
			ul.navigation .copyright { display: block; }

			#footer a:link,
			#footer a:visited,
			#footer a:hover,
			#footer a:active {
				color: #86878a;
			}
			#footer a:hover,
			#footer a:active {
				text-decoration: underline;
			}


	/**
	* @section Miscellaneous
	*/

	/**
	* @subsection Skip over navigation
	*/
	#skipper {
		position: absolute;
		text-indent: -9999px;
	}

	/**
	* @subsection Graphical headers
	* @note This is a nearly-retired item as Cufon is now the solution for an
	* text replacement that is required.
	*/
	.bg {
		background-color: transparent;
		background-position: left top;
		background-repeat: no-repeat;
		display: block;
		overflow: hidden;
		text-decoration: none;
		text-indent: -5000px;
	}

	/**
	* @subsection Float "clearfix"
	*/
	.clearfix:after {
		content: ".";
		display: block;
		height: 0;
		clear: both;
		line-height: 0;
		visibility: hidden;
	}
	.clearfix {
		display: inline-block;
	}
	/* Hide from IE Mac \*/
	.clearfix {
		display: block;
	}
	/* End hide from IE Mac */

}



/**
* Navigation
*
* Styling for the primary, secondary, etc. navigation is found within this
* section.
*
* @section	navigation
* @media	screen, projection
*/
@media screen, projection {

	/**
	* @subsection Toolbar
	* @note This styling applies to both the header and footer versions.
	*/
	ul.navigation {
		display: inline;
		float: left;
		font-size: 0.92em;
		line-height: 16px;
		list-style-type: none;
		margin: 14px 0 16px 0;
		width: 45%;
	}
		ul.navigation li {
			color: #a8a9ad;
			display: inline;
			float: left;
			margin: 0 4px 0 0;
		}
			ul.navigation a:link,
			ul.navigation a:visited,
			ul.navigation a:hover,
			ul.navigation a:active {
				color: #a8a9ad;
				margin: 0 7px 0 0;
				text-decoration: none;
			}
			ul.navigation a:hover,
			ul.navigation a:active {
				color: #fff;
			}

		/* Text resizing - small, medium and large. */
		ul.navigation li.textsize {
			margin-right: 0;
		}
			li.textsize a:link,
			li.textsize a:visited,
			li.textsize a:hover,
			li.textsize a:active {
				background-color: transparent;
				background-image: url(../_images/icon_u_textsize_56w_16h.gif);
				background-repeat: no-repeat;
				float: left;
				height: 16px;
			}

			/* Small, medium and large icons. */
			li.textsize a.small {
				background-position: 0 0;
				width: 17px;
			}
			li.textsize a.small-active,
			li.textsize a.small:hover,
			li.textsize a.small:active { background-position: 0 -16px; }

			li.textsize a.medium {
				background-position: -17px 0;
				width: 18px;
			}
			li.textsize a.medium-active,
			li.textsize a.medium:hover,
			li.textsize a.medium:active { background-position: -17px -16px; }

			li.textsize a.large {
				background-position: -35px 0;
				width: 21px;
			}
			li.textsize a.large-active,
			li.textsize a.large:hover,
			li.textsize a.large:active { background-position: -35px -16px; }


	/**
	* @subsection Languages
	*/
	ul.language {
		float: right;
		margin-right: -11px;
		text-align: right;
	}
		ul.language li { float: none; }
		
		/* Temporary - for testing purposes only! */
		ul.language a { color: #000 !important; }


	/**
	* @subsection Social-related
	*/
	ul.social {
		font-size: 12px;
		line-height: 16px;
		list-style-type: none;
		margin: 57px 15px 19px 15px;
		text-align: right;
	}
		ul.social li {
			background: transparent no-repeat left center;
			color: #666;
			display: inline;
			margin-left: 11px;
		}
			ul.social li a:link,
			ul.social li a:visited,
			ul.social li a:hover,
			ul.social li a:active {
				color: #666;
				text-decoration: none;
			}
			ul.social li a:hover,
			ul.social li a:active {
				text-decoration: underline;
			}

		ul.social li.sharethis {
			background-image: url(../_images/icon_u_sharethis_9w_9h.gif);
			padding-left: 13px;
		}
			/* Override styling from "ShareThis". */
			ul.social li.sharethis a { 
				background-image: none !important;
				padding: 0 !important;
			}
		ul.social li.rss {
			background-image: url(../_images/icon_u_rss_9w_9h.gif);
			padding-left: 14px;
		}
		ul.social li.facebook {
			background-image: url(../_images/icon_u_facebook_9w_9h.gif);
			padding-left: 13px;
		}
		ul.social li.twitter {
			background-image: url(../_images/icon_u_twitter_7w_9h.gif);
			padding-left: 11px;
		}
		ul.social li.youtube {
			background-image: url(../_images/icon_u_youtube_29w_9h.gif);
			padding-left: 33px;
		}


	/**
	* @subsection Primary
	*/
	div.primary div.rtsLevel1 ul.rtsUL {
		height: auto !important;
		height: 63px;
		list-style-type: none;
		margin: 0;
		min-height: 63px;
		width: 940px;
	}
		div.primary div.rtsLevel1 li {
			display: inline;
			float: left;
			margin: 0;
		}
			div.primary div.rtsLevel1 a:link,
			div.primary div.rtsLevel1 a:visited,
			div.primary div.rtsLevel1 a:hover,
			div.primary div.rtsLevel1 a:active {
				background-color: transparent;
				background-image: url(../_images/nav_en_primary_940w_63h.png);
				background-repeat: no-repeat;
				display: block;
				height: auto !important;
				height: 63px;
				margin: 0;
				min-height: 63px;
				text-decoration: none;
			}

			div.primary div.rtsLevel1 a.tabi0 {
				background-position: 0 0;
				width: 185px;
			}
			div.primary div.rtsLevel1 a.tabi0:hover,
			div.primary div.rtsLevel1 a.tabi0.rtsSelected,
			div.primary div.rtsLevel1 .rtsSelected a.tabi0 {
				background-position: 0 -63px;
			}

			div.primary div.rtsLevel1 a.tabi1 {
				background-position: -185px 0;
				width: 127px;
			}
			div.primary div.rtsLevel1 a.tabi1:hover,
			div.primary div.rtsLevel1 a.tabi1.rtsSelected,
			div.primary div.rtsLevel1 a.tabi1.rtsSelected {
				background-position: -185px -63px;
			}

			div.primary div.rtsLevel1 a.tabi2 {
				background-position: -312px 0;
				width: 70px;
			}
			div.primary div.rtsLevel1 a.tabi2:hover,
			div.primary div.rtsLevel1 a.tabi2.rtsSelected,
			div.primary div.rtsLevel1 .rtsSelected a.tabi2 {
				background-position: -312px -63px;
			}

			div.primary div.rtsLevel1 a.tabi3 {
				background-position: -382px 0;
				width: 107px;
			}
			div.primary div.rtsLevel1 a.tabi3:hover,
			div.primary div.rtsLevel1 a.tabi3.rtsSelected,
			div.primary div.rtsLevel1 .rtsSelected a.tabi3 {
				background-position: -382px -63px;
			}

			div.primary div.rtsLevel1 a.tabi4 {
				background-position: -489px 0;
				width: 124px;
			}
			div.primary div.rtsLevel1 a.tabi4:hover,
			div.primary div.rtsLevel1 a.tabi4.rtsSelected,
			div.primary div.rtsLevel1 .rtsSelected a.tabi4 {
				background-position: -489px -63px;
			}

			div.primary div.rtsLevel1 a.tabi5 {
				background-position: -613px 0;
				width: 167px;
			}
			div.primary div.rtsLevel1 a.tabi5:hover,
			div.primary div.rtsLevel1 a.tabi5.rtsSelected,
			div.primary div.rtsLevel1 .rtsSelected a.tabi5 {
				background-position: -613px -63px;
			}

			div.primary div.rtsLevel1 a.tabi6 {
				background-position: -780px 0;
				width: 160px;
			}
			div.primary div.rtsLevel1 a.tabi6:hover,
			div.primary div.rtsLevel1 a.tabi6.rtsSelected,
			div.primary div.rtsLevel1 .rtsSelected a.tabi6 {
				background-position: -780px -63px;
			}


	/**
	* @subsection Breadcrumb
	*/
	div.breadcrumb {
		display: block;
		float: none;		
		margin: 14px 0 16px 0;
		overflow: hidden;
		position: relative;
		width: 100%;
	}
		div.breadcrumb span { margin-right: 4px; }
		div.breadcrumb span a { margin-right: 7px; }
		
		/* Depending on the layout type, the breadcrumb will need to be
		positioned in such away that in lines up with the 'body' column. */
		div.two-column-left div.breadcrumb,
		div.three-column div.breadcrumb {
			margin-left: 159px;
			width: 781px;
		}


	/**
	* @subsection Secondary
	*/
	div.secondary ul {
		display: block;
		float: none;
		font-size: 1em;
		list-style-type: none;
		margin: 0;
		width: 100%;
	}
		div.secondary li {
			background: transparent url(../_images/layout_u_bluekeyline_940w_1h.gif) repeat-x left bottom;
			color: #fff;
			font-weight: bold;
			margin: 0 0 7px 0;
			padding: 0 0 10px 0;
			width: 100%;
		}
			div.secondary div {
				padding-right: 6px;
			}
			
			div.secondary a:link,
			div.secondary a:visited,
			div.secondary a:hover,
			div.secondary a:active {
				color: #fff;								
				text-decoration: none;
			}
			div.secondary a:hover,
			div.secondary a:active,
			div.secondary .rtSelected a { color: #00aeef !important; }
		
		/* Second level children. */
		div.secondary li li {
			background-position: left top;
			font-weight: normal;
			margin: 10px 0 0 0;
			padding: 7px 0 0 0;
		}
			div.secondary li li div { padding-left: 16px; }

			div.secondary li li a:link,
			div.secondary li li a:visited,
			div.secondary li li a:hover,
			div.secondary li li a:active { color: #a8a9ad; }

		/* Third level children. */
		div.secondary li li li div { 
			background: #0f0f0f url(../_images/layout_u_navigationfourthlevel_29w_45h.gif) repeat-x left top;
			margin-top: -5px;
			margin-bottom: -10px;
			padding: 5px 6px 10px 30px;
			position: relative;
			zoom: 1;
		}
			div.secondary li li li a:link,
			div.secondary li li li a:visited,
			div.secondary li li li a:hover,
			div.secondary li li li a:active { color: #757575; }


}



/**
* Microsite
*
* Various components of the site (i.e. Blog, Wall, Scrapbook) will be housed
* within a 'microsite' type of layout during the time that the rest of the 
* regular site is still being developed in all the available (7) languages.
*
* EACH RULE _MUST_ BE PROCEEDED BY "#microsite".
*
* @section	microsite
* @media	screen, projection
*/
@media screen, projection {

	/**
	* @section Header
	*/
	#microsite #header {
		background: transparent;
	}
		/* Different version of the WHA logo is used for the microsite. */
		#microsite #header .logo {
			left: 0;
			top: 64px;
		}
		
		/* Link to take the user back to the 'regular' WHA site. */
		#microsite div.goback {			
			margin-top: 86px;
			text-align: right;
		}
			#microsite div.goback a {
				background: transparent url(../_images/icon_u_whitearrowleft_4w_11h.gif) no-repeat left center;
				padding-left: 14px;
			}

	/**
	* @section Primary navigation
	* @notes Although the class name is misleading, this 'secondary' navigation is 
	* used as the 'primary' navigation for the microsite.
	*/
	#microsite div.secondary {
		background: transparent url(../_images/microsite/layout_u_primarynavbg_940w_42h.gif) no-repeat left top;
		margin: 13px 0 24px 0;
		height: 42px;
	}
		#microsite div.secondary ul {
			font-size: 14px;
		}
			#microsite div.secondary li {
				background: transparent url(../_images/microsite/layout_u_primarynavkeyline_1w_42h.gif) no-repeat right bottom;
				display: inline;
				float: left;
				font-weight: normal;
				margin: 0;
				padding: 0 1px 0 0;
				width: auto;
				_width: 20px;
				_white-space: nowrap;
			}
				#microsite div.secondary li div { padding: 0; }
				#microsite div.secondary li span { 
					display: inline;
					height: auto;
					width: auto;
				}

				#microsite div.secondary a:link,
				#microsite div.secondary a:visited,
				#microsite div.secondary a:hover,
				#microsite div.secondary a:active {
					border: 0;
					color: #fff;
					display: block;
					height: 42px;
					line-height: 42px;	
					margin: 0;
					padding: 0 13px 0 14px;					
					text-decoration: none;
				}
				#microsite div.secondary a:hover,
				#microsite div.secondary a:active,
				#microsite div.secondary .rtSelected a { 
					background: transparent url(../_images/microsite/layout_u_primarynavactive_14w_42h.gif) repeat-x left bottom;
					color: #fff !important; 
				}
				/* First item in the navigation has a rounded left corner, and 
				thus needs to be styled accordingly. */
				#microsite div.secondary .rtFirst a:hover,
				#microsite div.secondary .rtFirst a:active,
				#microsite div.secondary .rtFirst .rtSelected a { 
					background: transparent url(../_images/microsite/layout_u_primarynavactivefirst_600w_42h.gif) no-repeat left bottom;
					color: #fff !important; 
				}
	
	
	/**
	* @section Content
	*/
	#microsite #content { padding-bottom: 60px; }

}



/**
* Mobile
*
* The follow styles are applied to mobile devices.
*
* Absolute positioning is an absolute no-no on mobile devices.
* There’s no room to float anything on such a small screen either.
* We need to keep everything in the document flow so that the
* mobile UA sees a one column layout.
*
* Ref: http://nidahas.com/2005/04/04/mobile-css-first-steps/
*
* @section	mobile
* @media	handheld
*/
@media handheld {

	* {
	   background-image: none !important;
	   float: none !important;
	   position: static !important;
	}

}



/**
* Core Generic Styling
*
* Styles that can be applied to, for the most part, any element on the page.
*
* @section	generic
* @media	all
*/
@media all {

	/* Add a blue dotted 'keyline' to the bottom of the target element. */
	.keyline {
		background: url(../_images/layout_u_bluekeyline_940w_1h.gif) no-repeat left bottom;
		padding-bottom: 1px;
		zoom: 1;
	}
		/* Change the default position from the bottom to the top. */
		.keyline-top {
			background-position: left top;
			padding-bottom: 0;
			padding-top: 1px;
		}

	/* Rounded blue button that is rendered on a white or black background. */
	a.button:link,
	a.button:visited,
	a.button:hover,
	a.button:active,
	span.button {
		background: transparent url(../_images/btn_u_blueonblack_500w_21h.png) no-repeat left top;
		float: left;
		padding-left: 7px;
		text-decoration: none !important;
	}
		a.button span,
		span.button input,
		#wall-share-overlay .RadUpload .ruBrowse {
			background: transparent url(../_images/btn_u_blueonblack_500w_21h.png) no-repeat right top;
			color: #fff;
			cursor: pointer;
			display: block;
			float: left;
			font-size: 0.77em;
			font-weight: bold;
			height: 21px;
			line-height: 20px;
			padding-right: 7px;
			text-align: center;
			text-transform: uppercase;
			white-space: nowrap;
		}
		span.button input {
			border: 0 !important;
			font: bold 10px/1 Arial, Helvetica, sans-serif !important;
			line-height: 1 !important;
			padding: 3px 7px 7px 0 !important;
		}
		
	a.button.white,
	span.button.white {
		background-image: url(../_images/btn_u_blueonwhite_500w_23h.png) !important;
	}
		a.button.white span,
		span.button.white input {
			background-image: url(../_images/btn_u_blueonwhite_500w_23h.png);
			height: 23px;
		}

	/* Right-align a block of content. */
	div.align-right {
		text-align: right;
	}

	/* Photo and image alignment (left or right) when appearing within a block 
	of text. */
	img.align-left,
	img.align-right {
		display: inline;
		margin: -3px 0 9px 0;
	}
		img.align-left {
			float: left;
			margin-right: 19px;
		}
		img.align-right {
			float: right;
			margin-left: 19px;
		}
	
	/* Row(s) of icons/logos that are horizontally separated by a keyline (if 
	more than one row of content exists. By default, the "Simple Image Gallery
	Sitefinity control is used. */
	div.logo-row {
		padding-bottom: 1.46em;
		white-space: nowrap;
	}
	div.logo-row-keyline {
		background: transparent url(../_images/layout_u_bluekeylineonwhite_124w_1h.gif) repeat-x left bottom;
		margin-bottom: 1.46em;
	}
	
	div.logo-row + p { margin-top: 0; }
	
		div.logo-row ol.sf_photoListSimple {
			list-style-type: none;
		}
			div.logo-row ol.sf_photoListSimple * {
				display: inline;
				margin: 0;
				padding: 0;
			}
			
			/* Title of the logo - needs to be disabled/hidden. */
			div.logo-row ol.sf_photoListSimple dt {
				display: none;
			}
			
		div.logo-row img,
		div.logo-row ol.sf_photoListSimple img {
			margin: 0 10px 0 0;
			vertical-align: middle;			
		}

}



/**
* Form Controls
*
* Custom layout for each type of form control (i.e. input, radio, etc.) that 
* appears throughout the site.
*
* @section	form-controls
* @media	screen, projection
*/
@media screen, projection {

	

}



/**
* Graphical (Rotating) Banner
*
* Large banner that spans the width of the page and can be configured (via
* the jQuery / jQuery Tools libraries) to rotate through a pre-defined list.
*
* @section	banner
* @media	screen, projection
*/
@media screen, projection {

	div.banner {
		height: 271px;
	}
	div.rotate {
		overflow: hidden;
		position: relative;
		width: 940px;
	}
		div.banner div.items,
		div.banner div.items div {
			height: 271px;			
			width: 940px;			
		}
			div.rotate div.items div {		
				display: none;
			}

		/* Numeric navigation (i.e. 1 | 2 | 3) for advancing to a specific item
		in the rotation index. */
		div.rotate div.navigation.numeric {
			display: block;
			float: none;
			margin: 0;
			position: absolute;
			right: 7px;
			top: 33px;
			width: 112px;
			z-index: 10;
		}
			div.rotate div.numeric a {
				background-color: transparent;
				background-image: url(../_images/nav_u_numeric_84w_23h.png);
				background-repeat: no-repeat;
				cursor: pointer;
				float: left;
				display: inline;
				height: 23px;
				margin: 0;
				width: 28px;
			}

			div.numeric a.link1 { background-position: 0 -23px; }
			div.numeric a.link2 { background-position: -28px 0; }
			div.numeric a.link3 { background-position: -56px 0; }
			div.numeric a.link4 { background-position: -84px 0; }

			div.numeric a.link1.current:hover,
			div.numeric a.link1.current:active,
			div.numeric a.link1.current { background-position: 0 0; }

			div.numeric a.link2.current:hover,
			div.numeric a.link2.current:active,
			div.numeric a.link2.current { background-position: -28px -23px; }

			div.numeric a.link3.current:hover,
			div.numeric a.link3.current:active,
			div.numeric a.link3.current { background-position: -56px -23px; }

			div.numeric a.link4.current:hover,
			div.numeric a.link4.current:active,
			div.numeric a.link4.current { background-position: -84px -23px; }

		/* Rotate arrow links for advancng through the rotation. */
		div.rotate a.navigation {
			background-color: transparent;
			background-image: url(../_images/nav_u_arrows_18w_162h.gif);
			background-repeat: no-repeat;
			cursor: pointer;
			display: block;
			height: 81px;
			position: absolute;
			text-decoration: none;
			top: 92px;
			width: 18px;
			z-index: 10;
		}
			div.rotate a.navigation.prev {
				background-position: 0 -162px;
				left: 0;
			}
			div.rotate a.navigation.prev:hover,
			div.rotate a.navigation.prev:active {
				background-position: 0 -243px;
			}

			div.rotate a.navigation.next {
				background-position: 0 0;
				right: 0;
			}
			div.rotate a.navigation.next:hover,
			div.rotate a.navigation.next:active {
				background-position: 0 -81px;
			}

}



/**
* Calls To Action (Graphic-based)
*
* Graphic calls to action - three column layout with static widths for each.
*
* @section	callstoaction
* @media	screen, projection
*/
@media screen, projection {

	div.callstoaction {
		height: 201px;
		margin-bottom: -7px;
		overflow: hidden;
		padding-top: 19px;
		position: relative;
		z-index: 100;
	}
		div.callstoaction div.action {
			display: inline;
			float: left;
			overflow: hidden;
			position: relative;
		}
			div.callstoaction div.action1{
				width: 275px;
			}
			div.callstoaction div.action2 {
				margin-left: 35px;
				width: 326px;
			}
			div.callstoaction div.action3 {
				margin-left: 35px;				
				width: 269px;
			}

}



/**
* Tabbed Content
*
* Display multiple 'pages' of content in a single element - using a series of
* tab links at the top to navigate through the set. Non-JavaScript users will
* see all the content, one 'tab' after the other.
*
* @section	tabbed
* @media	screen, projection
*/
@media screen, projection {

	div.tabbed,
	div.teaser-navigation { 
		clear: both;
	}	
		div.teaser-navigation {
			width: 940px;
		}
			div.bottom-two-column-left div.teaser-navigation,
			div.bottom-three-column div.teaser-navigation { margin-left: -160px; }			
			div.bottom-two-column-right div.teaser-navigation { margin-left: -243px; }
		
		/* "Online Scrapbook" tabbed content. */
		#online-scrapbook { 
			margin-top: 36px;
			width: 780px;
		}

		/* Tabs for navigating through the various content areas. */
		div.tabbed ul.tabs {
			display: block;
			float: none;
			height: 50px;
			margin: 0 auto;
			position: relative;
			top: -22px;
		}
			ul.tabs li { margin: 0; }
			ul.tabs a {
				cursor: pointer;
				display: block;
				height: 50px;
				margin: 0 !important;
			}
				
		/* Text link to view all entires of the current-viewed content area. */
		div.tabbed div.more {
			margin-bottom: 22px;
		}
			div.tabbed div.more a:link,
			div.tabbed div.more a:visited,
			div.tabbed div.more a:hover,
			div.tabbed div.more a:active {
				background: transparent url(../_images/icon_u_bluearrowright_5w_9h.gif) no-repeat 99% 58%;
				padding-right: 16px;
				text-decoration: none;
			}
			div.tabbed div.more a:hover,
			div.tabbed div.more a:active {
				text-decoration: underline;
			}

	/* Define column layout and widths. */
	div.panes {
		display: block;
		float: left;
		overflow: hidden;
		position: relative;
		width: 100%;
	}
		/* Each row of content (secondary navigation calls to action) OR pane
		(tabbed navigation) is wrapped within this element. */
		div.panes div.pane {
			clear: left;
			margin-bottom: 30px;
			overflow: hidden;
			position: relative;
			width: 100%;
		}
		div.panes div.pane.keyline { padding-bottom: 30px; }

		/* Four column layout. */
		div.four-column-layout div.teaser {
		    display: inline;
		    float: left;
		    width: 25%;
		}

		/* Three column layout. */		
		div.three-column-layout div.col {
		    border-right: 1px solid #333334;
		    display: inline;
		    float: left;
		    margin-bottom: 30px;
		    width: 259px;
		}
			div.three-column-layout div.col.col3 {
				border-right: 0;
				width: 260px;
			}
		
		/* Pagination navigation at the bottom of the pane. */
		div.paging {
			clear: left;	
			float: left;
			left: 50%;
			position: relative;				
		}
			div.paging a.prev,
			div.paging a.next {
				position: relative;
				right: 50%;
			}
				div.paging a.prev { margin-right: 8px; }
				div.paging a.next { margin-left: 8px; }
			
			div.paging span.pages { 
				float: left; 
				position: relative;
				right: 50%;
			}
				div.paging span.pages a { margin: 0 4px; }

	/* Default styling for each column - item-specific styles follow at the end
	of this section. */
	div.panes div.item {
		border-right: 1px solid #333334;
		color: #a8a9ad;
		line-height: 1.31em;
		padding: 0 16px;
	}
		/* Keylines that seperate each teaser. */
		div.panes div.item.keyline {
			margin-bottom: 21px;
			padding-bottom: 20px;
		}

		/* Disable the keyline on the last column. */
		div.panes div.pane div.item.last { border-right: 0; }
		
		#online-scrapbook div.item {
			border-right: 0;
			margin-left: 16px;
			margin-right: 16px;
			padding-left: 0;
			padding-right: 0;
		}
		
		/* Main heading of the column and/or item within the column. */
		div.panes h2 {
			color: #00adee;
			font-size: 1.23em;
			font-weight: bold;
			line-height: 0.94em;
			margin: 0 0 0.69em 0;
		}
			div.panes div.item h2 a { text-decoration: none !important; }

		/* Thumbnail assigned (if applicable) to the content item. */
		div.panes div.item img.photo {
			display: block;
			margin: 0.69em 0;
		}

		div.panes div.item a:link,
		div.panes div.item a:visited,
		div.panes div.item a:hover,
		div.panes div.item a:active { text-decoration: none; }
		div.panes div.item a:hover,
		div.panes div.item a:active { text-decoration: underline; }

		/* Teaser description of the content item. */
		div.panes div.item p {
			margin: 0 0 0.60em 0;
		}


	/**
	* @section "Blog Post / News" Item
	*/		
	div.item.news {	}
		div.item.news h2 { margin: 0 0 0.56em 0; }
		
		div.item.news span.author {
			color: #757575;
			display: block;
			font-size: 0.91em;
			margin-bottom: 1em;
		}


	/**
	* @section "Video" Item
	*/		
	div.item.video { }
		div.item.video h2 {
			overflow: hidden;
			position: relative;
		}
			div.panes div.item.video h2 img.photo {
				float: left;
				height: 58px;
				margin: 0 10px 10px 0;
				width: 86px;
				-ms-interpolation-mode: bicubic;
			}
			
		div.item.video span.author { 
			color: #757575;
			display: block;
		}
		
		div.panes div.item.video p { margin-top: 0; }


	/**
	* @section "Photo" Item
	*/		
	div.item.photo { }
		div.panes div.item.photo img.photo {
			float: left;
			height: 58px;
			margin: 0 10px 10px 0;
			width: 86px;
			-ms-interpolation-mode: bicubic;
		}
	
	
	/**
	* @section "Twitter" Item
	*/		
	div.item.tweet { }		
		/* Variation 1 - Twitter icon. */
		div.item.tweet blockquote {
			background: transparent url(../_images/icon_u_twitter_19w_18h.gif) no-repeat 0 1px;
			margin: 0 0 0.69em 0;
			padding-left: 3px;
			text-indent: 20px;
			zoom: 1;
		}
			div.item.tweet blockquote p { margin: 0; }
			
			div.item.tweet cite {
				color: #666;
				display: block;
				font-size: 0.85em;
				font-style: normal;
				margin: 0;
				text-indent: 0;
			}

		/* Variation 2 - Simple. */
		div.item.tweet p { margin: 0 !important; }
		
		div.item.tweet span.author {
			color: #666;
			font-size: 0.85em;
		}
}



/**
* Sidebar (Right) Features
*
* Feature items that appear within the right-hand sidebar of select pages. 
* Generally follow the same layout rules as the body column (#body).
*
* @section	sidebar-features
* @media	screen, projection
*/
@media screen, projection {

	#sidebar div.feature {
		background: #fff url(../_images/layout_u_sidebarrighttop_221w_3h.gif) no-repeat left top;
		margin-bottom: 22px;
	}
	#sidebar div.button {
		margin-bottom: 22px;
	}
		#sidebar div.feature div.layout {
			background: transparent url(../_images/layout_u_sidebarrightbottom_221w_3h.gif) no-repeat left bottom;
			overflow: hidden;
			padding: 1px 11px 3px;
			position: relative;
		}

		div.feature div.layout * { margin-top: 0 }

		/* Hyperlinks receive different color treatment. */
		div.feature a:link,
		div.feature a:visited,
		div.feature a:hover,
		div.feature a:active {
			color: #666;
			text-decoration: none;
		}
		div.feature a:hover,
		div.feature a:active {
			text-decoration: underline;
		}

		/* Graphical headings that appear at the top of the feature. */
		div.feature h2.bg {
			margin: 0 0 .5em;
		}

		/* Sub-headings (text-based). */
		div.feature h3 {
			color: #000;
			font-size: 1.15em;
			margin-bottom: 0.65em;
		}

		/* Elements tagged with a class of 'keyline'. */
		div.feature .keyline {
			background-image: url(../_images/layout_u_graykeyline_220w_1h.gif);
			margin: 0 -11px 8px;
			padding: 0 11px 8px;
		}

		/* Plain list of items and/or links. */
		div.feature ul.plain {
			list-style-type: none;
			margin-left: 0;
		}

		/* Columnized list of items and/or links. */
		div.feature ul.columns { overflow: hidden; position: relative; }
		div.feature ul.columns li {
			display: inline;
		}
			div.feature ul.columns div {
				float: left;
				padding-left: 3%;
				position: relative;
				width: 44%;
			}

		/* Feature button that spans the content width of the sidebar 
		feature. */
		div.feature img.button {
			display: block;
			margin-left: -11px;
			margin-right: -11px;
		}


		/**
		* @subsection Graphic features
		* @notes Block-style images that are separated by keylines.
		*/
		div.graphic-feature {
			margin-bottom: 19px;
			padding-bottom: 20px;		
		}
			div.graphic-feature img {
				display: block;
				margin: 0 auto;
			}
			div.graphic-feature img.keyline-top {
				padding-top: 20px;
			}


		/**
		* @subsection Scrapbook
		* @notes List the latest headlines from the available social media
		* outlets (i.e. Twitter, Flickr, etc.).
		*/
		div.scrapbook { }
		
			div.scrapbook ul {
				margin: 0;
			}
				div.scrapbook ul li.keyline {
					padding-bottom: 11px;
				}

				/* The last element in the list should have no margin applied
				to it. */
				div.scrapbook ul li.last { margin-bottom: 0; }

			/* Thumbnail associated with the type of social media element that
			is being displayed. */
			div.scrapbook div.icon {
				background: transparent no-repeat left top;
				padding-left: 30px;
				zoom: 1;
			}
				div.scrapbook div.photo { background-image: url(../_images/icon_u_flickr_21w_13h.gif); }
				div.scrapbook div.video { background-image: url(../_images/icon_u_youtube_21w_16h.gif); }
				div.scrapbook div.tweet { background-image: url(../_images/icon_u_twitter_21w_19h.gif); }

			/* Title of the social media element. */
			div.scrapbook .headline {
				display: block;
				font-weight: bold;
				line-height: 1em;
				margin-bottom: 1px;
			}

			/* Source and author of that social media element. */
			div.scrapbook .source {				
				display: block;
				font-size: 0.85em;
			}
				div.scrapbook .source a:link,
				div.scrapbook .source a:visited,
				div.scrapbook .source a:hover,
				div.scrapbook .source a:active {
					text-decoration: none;
				}
				div.scrapbook .source a:hover,
				div.scrapbook .source a:active {
					text-decoration: underline;
				}


		/**
		* @subsection Tag Cloud
		* @notes List of available tags within the blog; each tag styles accord-
		* ing to it's popularity and use.
		*/
		#ftr-blog-tags ul {
			list-style-type: none;
			margin-left: 0;
			text-align: center;
		}
			#ftr-blog-tags ul li {
				margin: 0;
			}
			#ftr-blog-tags ul a:link,
			#ftr-blog-tags ul a:visited,
			#ftr-blog-tags ul a:hover,
			#ftr-blog-tags ul a:active {
				text-decoration: none;
			}


		/**
		* @subsection Archive
		* @notes List of archive dates for past blog posts.
		*/
		#ftr-blog-archive ul.rtUL { 
			list-style-type: none;
			margin: 0;
		}
			/* First-level items represent the 'year' (i.e. 2010). */
			#ftr-blog-archive li.rtLI {
				color: #000;
				font-size: 1.18em;
				font-weight: bold;
				margin-bottom: 0.65em;
			}
				#ftr-blog-archive li.rtLI a { color: #000; }
			
			/* Second-level items represent the 'month' (i.e. March). */
			#ftr-blog-archive ul.rtUL ul.rtUL {
				overflow: hidden;
				position: relative;
				margin-bottom: 1.0em;
			}
				#ftr-blog-archive ul.rtUL ul.rtUL li {
					color: #666;
					display: inline;
					font-size: 0.82em;
					font-weight: normal;
					margin: 0;
				}
				#ftr-blog-archive ul.rtUL ul.rtUL li a { color: #666; }
			
				/* Each second-level item is displayed in a multi-column (2) layout. */
				#ftr-blog-archive ul.rtUL ul.rtUL div {
					float: left;
					padding-left: 3%;
					position: relative;
					width: 44%;
				}


		/**
		* @subsection WHA on Twitter
		* @notes Lists the latest tweets from the WHA Twitter feed.
		*/
		#ftr-twitter div.tweet { background-image: url(../_images/icon_u_twitter_16w_16h.gif); }

		#ftr-twitter .headline { font-weight: normal; }
		#ftr-twitter .source {
			color: #a8a9ad;
			font-size: 1em;
			line-height: 1.09em;
		}

		#ftr-twitter a:link,
		#ftr-twitter a:visited,
		#ftr-twitter a:hover,
		#ftr-twitter a:active {
			color: #00aeef;
		}

}



/**
* Blog Layout
*
* Covers all elements that are customized for the Blog portion of the site.
*
* @section	blog
* @media	screen, projection
*/
@media screen, projection {

	/* An individual blog post - composed of a headline, date, teaser/content,
	and related meta data. */
	div.blog div.post {
		margin-bottom: 1.46em;
		padding: 0 12px;
	}

	/* Any post that has an assigned thumbnail/photo will need to be tagged with
	a class of 'photo' */
	div.blog div.photo {
		height: auto !important;
		height: 86px;
		margin-left: 113px;
		min-height: 86px;
		position: relative;
	}
	div.postlist div.blog div.photo { margin-left: 0; }

		div.blog .post * { margin-top: 0; }
	
		/* Headline of the blog post. */
		div.blog h2 { margin-top: 0.95em; }
		div.blog .post h3 { margin: 0; }		
			div.blog .post h3 a:link,
			div.blog .post h3 a:visited,
			div.blog .post h3 a:hover,
			div.blog .post h3 a:active {
				text-decoration: none;
			}

		/* Published date of the blog post or comment. */
		div.blog div.post span.date,
		div.blog div.comment span.date {
			color: #393939;
			display: block;
			font-size: 0.91em;
			margin-bottom: 0.77em;
		}
		
		/* On a language-specific blog (i.e. English), a short biography (with
		photo) is used to profile the author. */
		div.author {
			background-image: none;
			margin-bottom: 38px;
			padding: 0 0 0 149px;
			position: relative;
		}
			div.author h3 a { text-decoration: none !important; }
			
			div.author span.photo {
				background-image: url(../_images/layout_u_thumbnail_139w_97h.gif);
				display: block;
				height: 85px;
				left: 0;
				padding: 6px;
				position: absolute;
				top: 0;
				width: 127px;
			}
				div.profile span.photo img {
					height: 85px;
					width: 127px;
				}

		/* Teaser content for the current blog post. */
		div.blog div.teaser {
			margin: 1.45em 0;
		}
		
		/* Meta information that pertains to the blog post. */
		div.blog div.meta {
			background: transparent url(../_images/layout_u_graykeyline_220w_1h.gif) repeat-x left top;
			clear: left;
			margin: 1.00em -41px 0;
			position: relative;
			text-align: right;
			width: auto;
			zoom: 1;
		}
			div.blog div.post div.meta { margin-left: -155px; }
			div.blog div.profile div.meta { margin-left: -194px; }

			div.blog div.meta div.keyline {
				background: transparent url(../_images/layout_u_graykeyline_220w_1h.gif) repeat-x left bottom;
				padding: 9px 28px;
			}
			div.blog div.meta div.keyline.last {
				background-image: none;
				padding-bottom: 0;
			}

			div.blog div.meta a:link,
			div.blog div.meta a:visited,
			div.blog div.meta a:hover,
			div.blog div.meta a:active {
				text-decoration: none;
			}
			div.blog div.meta a:hover,
			div.blog div.meta a:active {
				text-decoration: underline;
			}

			/* Individual 'pieces' of meta (i.e. posts, comments, tags, etc.). */
			div.blog div.meta span.meta { margin-left: 0.65em; }


	/**
	* @section Comments
	* @notes List of comments that appear for an individual post page.
	*/
	div.blog ul.comments {
		list-style-type: none;
		margin: 1em -30px;
		position: relative;
	}
		div.blog ul.comments li {
			background-image: none;
			margin: 0;
			padding: 0;
		}
		
		div.blog ul.comments div.comment {
			margin-bottom: 1em;
			padding: 0 30px 1em 30px;
		}
			div.blog ul.comments div.keyline {
				background-image: url(../_images/layout_u_graykeyline_220w_1h.gif);
				background-repeat: repeat-x;
			}
			
			div.blog ul.comments span.date {
				display: block;
			}


	/**
	* @section Form (Comments)
	* @notes Form for submitting a new comment to the current blog post.
	*/
	div.blog div.form {
	
	}
		div.form div.row {
			margin: 1em 0;
		}
			div.form div.row label {
				display: block;
				font-weight: bold;
				margin-bottom: 2px;
			}
			div.form div.row input.text,
			div.form div.row textarea.text {
				width: 617px;
			}
		
		div.blog div.form input.button {
			background-image: url(../_images/btn_en_post_72w_33h.gif);
			border: 0;
			cursor: pointer;
			height: 33px;
			*padding-top: 33px;
			width: 72px;
		}
			
}



/**
* Black & White Photos
*
* Black and white photos or portraits of people that appear on pages that have 
* been assigned the three column layout template. The element is dynamically 
* generated by a JavaScript function, and will only render if the page is 
* 'tall' enough to handle it.
*
* @section	bw-photos
* @media	screen, projection
*/
@media screen, projection {

	div.bwphoto {
		background: transparent no-repeat left top;
		position: absolute;
	}
		div.bwphoto-1 {
			background-image: url(../_images/photo_u_blackandwhiteportrait1_400w_365h.jpg);
			bottom: -40px;			
			height: 365px;
			left: -141px;
			width: 420px;
		}
		div.bwphoto-2 {
			background-image: url(../_images/photo_u_blackandwhiteportrait2_227w_366h.jpg);
			bottom: 20px;					
			height: 366px;
			left: -31px;
			width: 227px;
		}
		div.bwphoto-3 {
			background-image: url(../_images/photo_u_blackandwhiteportrait3_326w_296h.jpg);
			bottom: 0px;				
			height: 296px;
			left: -104px;
			width: 326px;
		}
		div.bwphoto-4 {
			background-image: url(../_images/photo_u_blackandwhiteportrait4_310w_254h.jpg);
			bottom: 56px;			
			height: 254px;
			left: -32px;
			width: 310px;
		}

}



/**
* Team Listings
*
* List the members of the orgainization in a table-like fashion.
*
* @section	team
* @media	screen, projection
*/
@media screen, projection {
    
    div.team div.row {
        margin-bottom: 20px;
        overflow: hidden;
        position: relative;
    }
    div.team div.keyline {
        background-image: url(../_images/layout_u_bluekeylineonwhite_124w_1h.gif);
        background-repeat: repeat-x;
        padding-bottom: 20px;
    }
        div.team div.column {
            left: 0;
            width: 50%;
        }
            div.team div.item {
                height: auto !important;
                height: 126px;
                min-height: 126px;
                padding: 0 17px 0 107px;
                position: relative;
            }
            /* A featured team member is a singular item; centered within 
            the row. */
            div.team div.profiled {
				clear: both;
				margin-left: 17px;
				left: 25%;
            }
                /* Thumbnail of the team member. */
                div.team img.photo {
                    background: transparent url(../_images/layout_u_thumbnail_94w_126h.gif) no-repeat left top;
                    height: 112px;
                    left: 0;
                    padding: 7px;
                    position: absolute;
                    top: 0;
                    width: 80px;
                }
                
                /* Devision/country the team member belongs to. */
                div.team h3 {
                    font-size: 1em;
                    line-height: 1.08em;
                    margin: 0 0 2px 0;
                }
                
                /* WHA office of the member. */
                div.team span.source {
                    display: block;
                }

}



/**
* Sitefinity Control: Download List
*
* List of documents from a Sitefinity "Document" Library.
*
* @section	sf-download-list
* @media	all | screen, projection
*/
@media all {

	div.library-list {
		margin-bottom: 1em;
	}
		div.library-list div.item {
			margin-bottom: 1em;
		}
		
		div.library-list h3 {
			color: #393939;
			font-size: 1em;
		}
			div.library-list h3 a:link,
			div.library-list h3 a:visited,
			div.library-list h3 a:hover,
			div.library-list h3 a:active {
				color: #393939;
				text-decoration: none;
			}
			div.library-list h3 a:hover,
			div.library-list h3 a:active {
				text-decoration: underline;
			}
		
		div.library-list span.fileinfo {
			display: block;
			margin: 0.25em 0;
		}	
		
}
@media screen, projection {

	div.library-list span.fileinfo {
		background: transparent url(../_images/icon_u_pdf_21w_21h.gif) no-repeat left center;
		padding-left: 21px;
	}

}



/**
* Sitefinity Control: News
*
* List of news releases and the details view of each.
*
* @section	sf-news
* @media	all
*/
@media all {

	ul.sf_newsList {
		margin: 1.45em 0;
	}
		ul.sf_newsList li {
			margin: 0 0 1.0em 0;
		}
		
		ul.sf_newsList h2.sf_newsTitle {
			color: #00ADEE;
			font-size: 1.23em;
			font-weight: bold;
			line-height: 0.94em;
			margin: 0;
		}
			ul.sf_newsList h2.sf_newsTitle a { text-decoration: none !important; }
		
		ul.sf_newsList .sf_newsDate {
			margin-top: 0;
		}
}



/**
* Sitefinity Control: Grid
*
* Table or grid layout of a list of items. This overrides the default 
* behavior defined by Sitefinity.
*
* @section	sf-grid
* @media	all
*/
@media all {

	#content table.sf_libraryGrid {
		line-height: 100%;
		margin-bottom: 1em;
		width: 100%;
	}
		#content table.sf_libraryGrid thead th,
		#content table.sf_libraryGrid thead td {
			background: #0094e7 url(../_images/layout_u_tableheading_28w_28h.gif) repeat-x left top;
			border-top: 0;
			border-bottom: 1px solid #fff;
			color: #fff;
			font-size: 100%;
			padding: 8px;
		}
		
		#content table.sf_libraryGrid tbody th,
		#content table.sf_libraryGrid tbody td {
			background-color: #fff;
			border: 0;
			font-size: 100%;
			padding: 8px;
			width: auto;
		}
		
		#content table.sf_libraryGrid tbody .zebra th,
		#content table.sf_libraryGrid tbody .zebra td {
			background-color: #f5f5f5;
		}
		
}



/**
* The Wall
*
* Large photo gallery viewer of user-submitted profiles. Includes a form 
* (sidebar) for submitting a new profile, a browseable gallery (photo
* thumbnails) and a popup/overlay for displaying the details of any profile
* that is selected.
*
* @section	wall
* @media	screen, projection
*/
@media screen, projection {

	/**
	* @section Photo gallery
	*/
	#wall-gallery {
		position: relative;
		width: 668px;
	}
		#wall-gallery div.pane {
			height: 534px;
			margin: 0 0 0 29px;
			overflow: hidden;
			position: relative;
			width: 618px;			
		}
			#wall-gallery input.profile {
				float: left;
				height: 68px;				
				margin: 0 8px 8px 0;
				width: 95px;
			}
		
		#wall-gallery input.navigation {
			display: block;
			position: absolute;
			top: 238px;
		}
			#wall-gallery input.navigation.prev { left: 0; }
			#wall-gallery input.navigation.next { right: 0; }


	/**
	* @section Filter (by Countires and by Languages)
	*/			
	#wall-filter {
	
	}
		#wall-filter select { 
			margin-right: 10px;
			width: 214px;
		}
	
	
	/**
	* @section Submit profile form
	*/
	#wall-share {
		background: #fff url(../_images/layout_u_wallsharebg_242w_19h.gif) no-repeat 0 100%;
		float: right;
		padding-bottom: 19px;
		position: relative;		
		width: 242px;
	}
		#wall-share div.layout {
			padding: 0 14px 12px 14px;
			width: auto;
		}
			#wall-share input.text,
			#wall-share textarea.text { width: 204px; }
			#wall-share select { width: 214px; }
			#wall-share textarea.text { height: 155px; }
		
		#wall-share div.choose a.button { float: right; }


	/**
	* @section Lightbox popup/overlay window
	*/
	div.lightbox {
		background: transparent url(../_images/layout_u_lightboxtop_659w_41h.png) no-repeat 0 0;
		display: none;
		padding-top: 41px;
		width: 659px;
		z-index: 10000; 
	}
		div.lightbox div.layout {
			background: transparent url(../_images/layout_u_lightboxbottom_659w_11h.png) no-repeat 0 100%;
			padding: 21px 19px 11px 19px;
			position: relative;
			width: auto;
			zoom: 1;
		}
		
		/**
		* @subsection Crop Your Image
		*/
		#wall-share-overlay ul.ruInputs {
			list-style-type: none;
			margin-left: 0;
			overflow: hidden;
			position: relative;
		}
			#wall-share-overlay .RadUpload .ruFakeInput {
				background: #e3e4e4;
				border: 0;
				color: #666;
				float: left;
				font-size: 100%;
				font-family: Arial, Helvetica, sans-serif;
				height: 12px;
				line-height: 1;
				margin-right: 0;
				padding: 5px;
				width: 214px;
			}			
			#wall-share-overlay .RadUpload .ruBrowse {
				background-image: url(../_images/btn_u_blueonwhite_500w_23h.png) !important;
				float: left;
				border: 0 !important;
				font: bold 10px/1 Arial, Helvetica, sans-serif !important;
				line-height: 1 !important;
				*line-height: 14px !important;
				padding: 3px 7px 7px 4px !important;
				margin-left: 0;
				width: auto; !important;
			}
			
			#wall-share-overlay .jcrop-holder { margin-bottom: 1.80em; }
		
		
		/**
		* @subsection Profile
		*/
		#wall-profile div.layout {
			height: 290px;
			overflow: hidden;
			position: relative;
		}
		#wall-profile div.layout div.scroller {
			height: 290px;
			overflow: auto;
			padding-right: 10px;
			position: relative;		
			width: auto;
		}
			/* User's name. */
			#wall-profile h2,
			#wall-share-overlay h2,
			#wall-thanks-overlay h2 {
				color: #00adee;
				font-size: 2.00em;
				font-weight: normal;
				margin: 0;
			}
			
			/* Photo that the user uploaded (if applicable) with their 
			profile. */
			#wall-profile img.photo {
				float: left;
				height: 203px !important;
				margin: 19px 19px 8px 0;

			}
			
			/* Country-related information of the user. */
			#wall-profile div.geo,
			#wall-share-overlay p.instructions {
				background: transparent url(../_images/layout_u_bluekeylineonwhite_124w_1h.gif) repeat-x 0 100%;
				color: #393939;
				margin-top: 0.365em;
				padding-bottom: 0.73em;
				zoom: 1;
			}
			
			/* Short (500 character) biography of the user. */
			#wall-profile div.teaser {
				margin: 1.46em 0;
			}
			
		/* Close button. */
		div.lightbox .close { 
			cursor: pointer; 
			height: 41px;
			position:absolute; 
			right: 0;
			top: 0;
			width: 44px;
		}
		
}



/**
* Local Groups
*
* Community page that includes an interactive Flash map, along with a list of
* news, events and patient groups that are related to countries selected from
* the aforementioned map.
*
* @section	local-groups
* @media	screen, projection
*/
@media screen, projection {

	div.localgroupmap {
		margin-bottom: 3.0em;
	}
	
	div.contribute {
		color: #fff;
		font-size: 1.40em;
		font-weight: bold;
		overflow: hidden;
		position: relative;
		text-align: center;
	}
		div.contribute a.button { 
			display: inline-block;
			float: none;
			font-size: 0.63em;			
			margin-left: 5px;
		}

}



/**
* Search Results
*
*
* @section	search-results
* @media	all
*/
@media all {

	dl.searchResults {
		margin-left: 0;
	}
		dl.searchResults dt {
			color: #00adee;
			font-size: 1.23em;
			margin: 2.0em 0 0.50em 0;
		}
			dl.searchResults dt a:link,
			dl.searchResults dt a:visited,
			dl.searchResults dt a:hover,
			dl.searchResults dt a:active {
				text-decoration: none;
			}
			dl.searchResults dt a:hover,
			dl.searchResults dt a:active {
				text-decoration: underline;
			}

		dl.searchResults dd {
			margin: 0;
		}

}