/* Stylesheet for simplified homepages */
/* Defines: title bar, mobile menubar, p#intro, orange hilite, selector bar (languages and audiences), audience-head */
/* Used by: /index, /spanish, /french, /chinese, /arabic, /congress, /students, redirect pages */

#title-bar {
	width: 100%;
	overflow: hidden;
	}
#title-bar h1,
#title-bar .tagline {
	margin-left: 1em;
	margin-right: 1em;
	}
.tagline {
	text-align: center;
	font-style: italic;
	margin-bottom: 1em;
	}

p#intro {
	font-size: 120%;
	line-height: 150%;
	}

.chunk {
	margin: 1em 0;
	padding: 8px;
	border: solid 2px #ccb;
	border-radius: 10px;
	background: #fff;
	}
.audience-head {
	background: #ccb;
	padding: 0.25em;
	border: solid 1px #ccb;
	border-radius: 10px 10px 0 0;
	margin: -9px;
	margin-bottom: 1em;
	text-align: center;
	font-size: 18px;
	line-height: 90%;
	text-transform: uppercase;
	letter-spacing: 2px;
	}

@media only screen and (max-width: 480px) {
#breadcrumb {
	display: block;
	}
#header {
	padding-bottom: 0.5em;
	}
#topmenu {
	display: block;
	position: relative;
	left: auto;
	top: auto;
	width: 90%;
	height: auto;
	margin: 1em 5% 0.75em;
	background: #033466 url(/parts/topmenu-sub.jpg) top repeat-x;
	border-radius: 15px;
		-moz-border-radius: 15px;
		-webkit-border-radius: 15px;
	box-shadow: 0px 0px 6px #999; 
		-moz-box-shadow: 0px 0px 6px #999;
		-webkit-box-shadow: 0px 0px 6px #999;
	}
	#topmenu > ul {
		display: block;
		height: auto;
		}
	#topmenu > ul > li {
		display: block;
		height: auto;
		border-bottom: solid 1px #ccc;
		}
		#topmenu > ul > li:first-child,
		#topmenu > ul > li:first-child a {
			border-radius: 15px 15px 0 0;
				-moz-border-radius: 15px 15px 0 0;
				-webkit-border-radius: 15px 15px 0 0;			
			}
		#topmenu > ul > li:last-child,
		#topmenu > ul > li:last-child a {
			border-bottom: none;
			}
		#topmenu > ul > li > a:after {
			content: "▼";
			float: right;
			}
		#topmenu a[href="/"],
		#topmenu a[href="/arabic.php"],
		#topmenu a[href="/chinese.php"],
		#topmenu a[href="/french.php"],
		#topmenu a[href="/spanish.php"] {
			background: inherit;
			}
		#topmenu > ul > li > a:hover,
		#topmenu > ul > li > a:focus,
		#topmenu > ul > li > a:active {
			background: #048 url(/parts/topmenu.jpg) bottom repeat-x;
			}
			#topmenu a[href="/"]:hover,
			#topmenu a[href="/"]:focus,
			#topmenu a[href="/"]:active {
				background: #048 url(/parts/topmenu.jpg) bottom repeat-x;
				}

	#topmenu li:hover ul,
	#topmenu li:focus ul {				/* doesn't include :active because that makes no sense */
		display: block;					/* reveals dropdowns */
		position: relative;
		top: auto;
		left: auto;
		border-radius: 0;
			-moz-border-radius: 0;
			-webkit-border-radius: 0;
		box-shadow: none; 
			-moz-box-shadow: none;
			-webkit-box-shadow: none;
		}
	#topmenu li ul.last {
		left: auto;
		border-radius: 0 0 15px 15px;
			-moz-border-radius: 0 0 15px 15px;
			-webkit-border-radius: 0 0 15px 15px;
		}
	#topmenu li:hover li a,
	#topmenu li:focus li a {
		width: inherit;
		}

	#topmenu li:hover li.popup > a:after,
	#topmenu li:focus li.popup > a:after {
		content: "▼";
		padding-top: auto;
		}
	#topmenu li:hover li:hover ul,
	#topmenu li:focus li:focus ul {
		display: block;					/* reveals submenus */
		position: relative;
		top: auto;
		left: auto;
		background: inherit;
		}
		#topmenu li:hover li:hover ul a,
		#topmenu li:focus li:focus ul a {
			padding-left: 10%;
			}
	#topmenu li:hover ul.last li:hover ul,
	#topmenu li:focus ul.last li:focus ul {
		left: auto;
		border-radius: 0;
			-moz-border-radius: 0;
			-webkit-border-radius: 0;
		}
		#topmenu li:hover li:first-child > a:hover,
		#topmenu li:focus li:first-child > a:focus,
		#topmenu li:hover li:last-child > a:hover,
		#topmenu li:focus li:last-child > a:focus,
		#topmenu li:hover ul.last li:first-child > a:hover,
		#topmenu li:focus ul.last li:first-child > a:focus,
		#topmenu li:hover ul.last > li:first-child > a:hover,
		#topmenu li:focus ul.last > li:first-child > a:focus {
			border-radius: 0;
				-moz-border-radius: 0;
				-webkit-border-radius: 0;
			}

#title-bar {
	border-radius: 10px;
	background: #fff;
	}
}

@media all and (min-width: 481px) {
#topmenu a[href="/"],
#topmenu a[href="/arabic.php"],
#topmenu a[href="/chinese.php"],
#topmenu a[href="/french.php"],
#topmenu a[href="/spanish.php"] {
	background: orange url(/parts/topmenu-hover.jpg) top repeat-x;
	}

#title-bar {
	background: #fff url(satellite.jpg) top right no-repeat;
	}
h1 {
	margin-top: 1em;
	margin-bottom: 0.25em;
	}
.tagline {
	font-size: 20px;
	line-height: 100%;
	}

#selectors {
	border: none;
	}
	#selectors .audience-head {
		display: none;
		}
.selector-bar {
	position: absolute;
	right: 0;
	z-index: 200;
	width: 900px;
	text-align: right;
	font-size: 90%;
	}
	#languages {
		top: 0;
		}
	#audiences {
		top: 1.5em;
		}
.selector-bar ul, 
.selector-bar li {
	list-style: none;
	margin: 0;
	padding: 0;
	display: inline-block;
	}
.selector-bar li {
	border-right: dotted 1px #999;
	}
	.selector-bar li:last-child {
		border-right: none;
		}
.selector-bar a {
	padding: 0 6px;
	font-weight: normal;
	}
	.selector-bar a:hover,
	.selector-bar a:focus {
		background: #f3f3f3;
		border-radius: 0;
			-moz-border-radius: 0;
			-webkit-border-radius: 0;
		}
	.selector-bar a:active {
		background: orange;	
		border-radius: 0;
			-moz-border-radius: 0;
			-webkit-border-radius: 0;
		}
html[lang="en"] #languages li[lang="en"],
html[lang="es"] #languages li[lang="es"],
html[lang="fr"] #languages li[lang="fr"],
html[lang="zh"] #languages li[lang="zh"],
html[lang="ar"] #languages li[lang="ar"] {
	background: #f3f3f3;
	}
}