/*
	custom version of /templates/popups/template.css
	for HSA popups
*/

/*
	==============
	generic layout
	==============
*/

* {
	padding: 0;
	margin: 0;
}

.u, .underscore, .underline {
	text-decoration: underline;
}

/*
	if you want to do custom styling for a single popup, you
	can use an id attribute in the body tag. make it unique
	among all popups.
	Example: http://mdk12.org/assessments/high_school/look_like/2005/english/resources/starwalking.html
	
	revision: do not use the body tag. Use the id in the div
*/

body {
	background-color: white;
	margin-top: 0.5em;
	margin-bottom: 1em;
}

div.popup {
	width: 95%;
	margin-left: auto;
	margin-right: auto;
	border: 1px solid black;
}

/*
	=======================
	generic text for links.
	=======================
*/

a.popupLink {
	font-family: arial, helvetica;
	font-size: 12px;
	text-decoration: none;
	float: right;
	font-weight: normal;
}

/*
	=======================================================
	topnavbar, botnavbar
	the top and bottom areas which hold the popup title and
	the print and close buttons
	=======================================================
*/

div.topnavbar, div.botnavbar {
	height: 1.3em;
}

div.topnavbar p, div.botnavbar p {
	font-family: arial, helvetica;
	font-size: 12px;
	font-weight: bold;
	margin-left: 0;
	text-indent: 0;
	padding-top: 2px;
	padding-left: 0.3em;
	padding-right: 0.7em;
}

div.topnavbar {
	border-bottom: 1px solid black;	
}

div.botnavbar {
	border-top: 1px solid black;
}

/*
	title is in the topnavbar
*/

.title {
	float: left;
}

a {
	text-decoration: none;
}

/*
	====================
	generic content area
	====================
*/

div.popuptext {
	padding-left: 1em;
	padding-right: 1em;
}

/*
	if you have a graphic title, entag with <h1>
*/

h1, h2 {
	text-align: center;
	margin-top: 10px;
	font-size: 120%;
	margin-bottom: 0.5em;
}

/*
	often used after an <h1> or <p class="intro">
*/
p.author {
	text-align: center;
	margin-top: 0;
	margin-bottom: 1em;
}

p {
	text-indent: 1.5em;
	margin-bottom: 0.5em;
}

p.credits {
	margin-top: 1em;
	border-top: 1px solid gray;
	padding-top: 1em;
	text-indent: 0;
}

p.credits {
	font-size: 0.8em;
}

p.topintro {
	margin-bottom: 1em;
	border-bottom: 1px solid gray;
	padding-bottom: 1em;
	text-indent: 0 !important;
	font-size: 0.8em;
}

/*
	=============
	Color schemes
	=============
*/

/*
	HSA color schemes
	white text on blue backgrounds
	this will override the generic unless removed
*/

div.topnavbar, div.botnavbar {
	background-color: #666699;
}

div.topnavbar p, div.botnavbar p {
	color: #cccccc;
}

a.popupLink {
	color: white;
}

/*
	the content area has a gray border on top and
	a pale green border on the bottom.
	div.popuptext surrounds all the content in the
	popup.
*/

div.popuptext {
	border-top: 10px solid #e5e5e5;
	border-bottom: 10px solid #ccffcc;
}


/*
	===================
	Customizing content
	===================
*/
/*
	Turn off all paragraph indents via div.noindentparas.
	Do not use this on body tags as suggested in an earlier
	version of this stylesheet. body tag classes do not
	import well into the tookit pdf.
*/

div.noindentparas p {
	text-indent: 0;
}

/*
	for when you have more than one story on a page
	Example: http://mdk12.org/assessments/high_school/look_like/2005/english/resources/people.html
*/

h2 {
	font-style: italic;
}

/*
	use p.image for images other than the <h1> title image
*/

p.image {
	text-align: center;
	text-indent: 0;
	margin: 2em;
}

/*
	produces a centered, italic introduction
*/
p.intro {
	width: 80%;
	margin-left: auto;
	margin-right: auto;
	font-style: italic;
	margin-bottom: 0.5em;
}

/*
	makes an <hr> above the credits or
	glossary section at the end of some
	resources
	Example of p.credits:
	http://mdk12.org/assessments/high_school/look_like/2005/english/resources/starwalking.html
	Example of div.glossary:
	http://mdk12.org/assessments/high_school/look_like/2005/english/resources/mussels.html
*/

p.credits, div.glossary {
	margin-top: 1em;
	border-top: 1px solid gray;
	padding-top: 1em;
	text-indent: 0;
}

p.credits {
	font-size: 0.8em;
}

div.glossary p.credits {
	border: none;
}

div.glossary {
	font-size: 90%;
	font-style: normal;
}

div.glossary ul {
	list-style: none;
}

div.glossary ul a {
	text-decoration: none;
	font-size: 80%;
	vertical-align: super;
}

/*
	===================================
	styles for various types of content
	===================================
*/

/*
	p.numbered is for paragraphs where every sentence
	is given its own number. Just put <sup>n</sup> before the sentences to show the number n.
	Example: http://mdk12.org/assessments/high_school/look_like/2005/english/resources/biking.html
*/


p.numbered sup {
	color: #ff0000;
	font-size: 80%;
	font-weight: bold;
}

.numbered sup {
	color: #ff0000;
	font-size: 80%;
	font-weight: bold;
}

/*
	div.numberedParas is for paragraphs with a number on 
	the left margin. Use <sup>n</sup> to contain the number n. Encase the
	remainder of the paragraph with <span>...</span>
	Example: http://mdk12.org/assessments/high_school/look_like/2005/english/resources/safari.html
*/

div.numberedParas p {
	text-indent: 0;
}

div.numberedParas p sup {
	color: #ff0000;
	font-size: 80%;
	font-weight: bold;
}

div.numberedParas p span {
	padding-left: 1.5em;
}

.numberednoparas sup {
	color: #ff0000;
	font-size: 80%;
	font-weight: bold;
}

/*
	div.poem is for poetry, where you will use <br />
	at the end of each line.
	Example: http://mdk12.org/assessments/high_school/look_like/2005/english/resources/people.html
*/

div.poem p {
	text-indent: 0;
	line-height: 1.2em;
}

/*
	if you want poem lines to be numbered, use
	<span style="float: left;">...</span> to enclose the
	poem text, and <span class="lineNum>n</span> to show the 
	line number n. You only need to do this on the lines that
	contain a number.
	Example: http://mdk12.org/assessments/high_school/look_like/2005/english/resources/mussels.html
*/

div.poem p span.lineNum {
	color: red;
	float: right;
	font-size: 90%;
	font-weight: bold;
}

/*
	fnLink means link to a footnote. superscripting is provided
	via css, so don't use <sup> tags. The footnotes themselves
	are in a div.glossary section.
	Example footnote reference: <a href="#fn1" id="note1" class="fnLink">1</a>
	Example footnote text: <a id="fn1" href="#note1">1</a>
	This way the footnote will link back to the footnote reference.
*/

a.fnLink {
	vertical-align: super;
	font-size: 80%;
}

span.fnLink, sup.fnLink {
	vertical-align: super;
	font-size: 80%;
	color: black !important;
	font-weight: normal !important;
}

/*
	===============================================================
	page-specific styles. Use these as examples, but can be removed
	for non-HSA items
	===============================================================
*/

/*
	special case for lists in sound popup
*/

div#sound div.popuptext ul {
	padding-left: 1.5em;
}

div#sound div.popuptext li {
	margin-bottom: 0.5em;
}

div#sound div.glossary ul {
	padding-left: 0;
}

div#sound div.glossary li {
	margin-bottom: 0;
}

/*
	table styling for biology elephants page
*/

div#elephants table {
	border: 1px solid black;
	border-collapse: collapse;
	width: 70%;
	margin-left: auto;
	margin-right: auto;
	margin-top: 1em;
	margin-bottom: 1.5em;
	font-size: 80%;
	text-align: center;
}

div#elephants table caption {
	text-align: center;
}


div#elephants table th, div#elephants table td {
	border: 1px solid black;
	padding: 0.5em;
}

div#elephants table th {
	font-weight: normal;
	background-color: #cccccc;
}

/*
	Special styling for Anna and the King
	/assessments/high_school/look_like/2006/english/resources/anna.html
*/

div#AnnaAndKing h2 {
	font-size: 100%;
	text-align: left;
	font-style: normal;
}

/*
	Special styling for Starwalking with Sarah
	/assessments/high_school/look_like/2006/english/resources/anna.html
*/

div#starwalking p.author {
	font-style: italic;
}

/* 
	doubleBorderedIntro for HSA 2008
	English popups
*/

div.doubleBorderedIntro {
	border: 1px solid #999;
	padding: 4px;
	margin-bottom: 1em;
}

div.doubleBorderedIntro p {
	margin: 0;
	padding: 4px 8px;
	text-indent: 0;
	border: 1px solid #999;
}