/*  
FILE NAME: global.css 
DATE MODIFIED: 2 March 2010
DESCRIPTION: This style sheet is the default standard for the CLIPS CD-ROM and HTML products.
Please do not alter. All style variables are developed on 'project.css'. 
AUTHOR: Centre for Learning Innovation (CLI), New South Wales Department of Education and Training
VERSION:1.0.1
*/
html { height: 100%; }

body {
	margin:0;
	padding:0;
	height: 100%;
	line-height:1.4;
	color:#000;
	font-family:Verdana, helvetica, Arial, sans-serif;
	font-size:75%;
	background:#fff url(graphics/bkgrndGradient.png) repeat-x left 60px;
}

#popup,
#feedback,
#show { background-position:left top; }

#nonFooter {
	position: relative;
	min-height: 100%;
}

* html #nonFooter { height: 100%; }

#globalNav {
	float:left;
	left:0;
	width:17em;
	padding:0;
	margin:10px 10px 0 10px;
	font-size:1.1em;
}

#nav {
	padding:0.5em 0;
	margin:0;
}

#popup #nav,
#show #nav,
#feedback #nav {
	float:right;
	top:0;
	padding:0;
	margin:0 10px 0 0;
}

#content {
	float:left;
	position:relative;
	vertical-align:top;
	margin:0;
	padding:1em;
}

.textContain {
	padding:0;
	margin:0;

}

/* - - - - - - - - - - - - - - - navigation - - - - - - - - - - - - - - - */

/* ----- global navigation - 1st level ----- */

#globalNav ul {
	padding:0;
	margin:0;
}

#globalNav li {
	padding:0;
	margin:0;
	list-style:none;
}

#globalNav li span {
	font-weight:bold;
	display:inline;
	color:#333;
	margin-left: -0.7em;
}

#globalNav li a {
	display:block;
	padding:0.1em 0 0.1em 1em;
	margin: 2px 0 0 0;
	background-color:#d1cbc1;
	color:#000;
	background:#E6E6E6 url(themes/images/ui-bg_glass_75.png) repeat-x scroll 50% 50%;/* bg image from jquery theme */
	border:1px solid #BBB;
	border-left:5px solid #BBB;
	text-decoration:none;
	-moz-border-radius:4px;
	-webkit-border-radius:4px;
	font-size:90%;
}

#globalNav li a:focus,
#globalNav li a:hover,
#globalNav li a:active {
	border-left:5px solid #6D879F;
	background-color:#fff;
	background-image:none;
}

#globalNav li.selected a { color:#000; }

#globalNav li.selected a li a { background-image:none; }

#globalNav li.selected ul li a { background-image:none; }

#globalNav li.current a {
	color:#223b4a;
	background-color:#fff;
	background-image:none;
	border-left:5px solid #35506C;
}

#globalNav ul li a.ui-state-active {
	border-left:5px solid #999;
	background-position:50% 71%;
}

#globalNav .ui-accordion-content {
	padding:0;
	margin:0;
	overflow:visible;
	position: static;/* fixes bug in ie6 which prevent 2nd level nav from displaying */
}

#globalNav .ui-accordion-content a { text-indent:1em; }

#globalNav .ui-widget { font-size:100%; }

#globalNav .ui-widget-content { border:none; }

/* ----- global navigation - 2nd level ----- */

#globalNav ul ul.ui-accordion-content {
	background: #BBB;
	margin: -1px 5px 2px 5px;
	padding:0 0 2px 0;
	display:static;
}

#globalNav li li a {
	margin: 0 5px;
	padding:0.1em 0 0.1em 0em;
	border-left:5px solid #E6E6E6;
}

/* ----- global navigation - 3rd level ----- */

#globalNav ul ul ul.ui-accordion-content {
	background: #ccc;
	margin: -1px 10px 2px 10px;
	padding:0 0 2px 0;
}

#globalNav li li li a {
	margin: 0 5px;
	padding:0.1em 0 0.1em 0em;
	border-left:5px solid #E6E6E6;
}

/* ----- global navigation - 4th level ----- */

#globalNav ul ul ul ul.ui-accordion-content { margin: -1px 5px 0 5px; }

#globalNav li li li li a {
	margin: 0 5px;
	padding:0.1em 0 0.1em 0em;
	border:0;
	background:none;
}

#globalNav li li li li a:hover,
#globalNav li li li li a:focus,
#globalNav li li li li a:active,
#globalNav li li li li.current a {
	margin: 0 5px;
	padding:0.1em 0 0.1em 0em;
	border:0;
	background:none;
}

/* --------------------------------------------- Non-integrated navigation - Secondary --------------------------------------------- */

#nav ul {
	position:relative;
	display:inline;
	padding:0 0 4px 0;
	margin:1em 0;
	top:0.7em;
	background:#e4e5e6;
}

#popup #nav ul { background:transparent }

#nav li {
	list-style:none;
	margin-left:1em;
	display:inline;
	font-size:1em;
	color:#333;
}

#popup #nav li,
#show #nav li {
	border:1px solid #000;
	padding:1px 2px 2px 2px;
}

#nav li.current a:link,
#nav li.current a:visited,
#nav li.current a:focus,
#nav li.current a:hover,
#nav li.current a:active {
	/* This indicates "where you are" */
	color:#000;
	text-decoration:none;
	background:#fff url(graphics/navCurrentBkgrnd.png) no-repeat bottom center;
	padding-bottom:7px;
	font-weight:bold;
}

#nav li a {
	margin:0;
	padding:0 0.3em;
	text-decoration:none;
}

#nav li a:link,
#nav li a:visited { color:#000; }

#nav li a:focus,
#nav li a:hover,
#nav li a:active {
	color: #000066;
	text-decoration:underline;
}

/* ------------------------- Headings ----------------------- */

h1 {
	margin:15px 0;
	color:#11476C;
	font-size :130%;
	clear:both;
}

#title {
	background: #A9BF7A;
	padding:10px 0 10px 15px;
	margin:0;
}

#feedback #title {/* feedback title */
	background: #000 url(graphics/title_bg.png) repeat-x left bottom;
	padding:5px 0 5px 15px;
	margin:0;
}

#feedback #title h1 { font: normal 180%/80% "Lucida Grande", Arial, sans-serif; }

#title h1 {
	font: normal 200%/100% "Lucida Grande", Arial, sans-serif;
	position: relative;
	margin: 0;
	color: #000;
}

#title h1 span {
	display: block;
	width: 100%;
}

h2 {
	margin:15px 0 5px 0;
	color:#003366;
	font-size:115%;
	clear:both;
}

h3,
p.activityHead {
	margin: 15px 0 5px 0;
	color: #575757;
	font-size:110%;
}

h4 {
	margin:15px 0;
	font-size:100%;
	font-weight: bold;
	font-size:100%;
}

#content p {
	margin:5px 0;
	line-height:1.3;
}

#content p sub { line-height:1.5; }

/* --- Graphics --- */

p.figure img { /* Positions graphics in main content */ margin:0.3em 0 0 0; }

a img {/* ensure linked images do not display a border */ border:0; }

#content p.figure {
	border:0;
	margin:0.5em;
	padding:0.3em;
	text-align:center;
	clear:both;
}

#content p.figure span {
	display:block;
	background-color:#efefef;
}

#content p.figure.centre { padding:0; }

#content p.figure.centre img {
	text-align:center;
	margin:0 auto;
}

#content table div.ft,/* IE7 needs the specificity of table and textContain */
#content .textContain div.ft { height:auto; }

#content table div.ft p,
#content .textContain div.ft p {
	background-color:#efefef;
	padding:0;
}

#content div.ft + p { /* the paragraph immediately after the copyright and caption */ clear:both; /*  IE 7 seems to require this */ }

#content div.figure_text_right_wrap + p,
#content div.figure_text_left_wrap + p { clear:none; /* needed to counteract the global effects of clearing #content div.ft + p */ }

#content div.figure_text_left {
	width:98%; /* 98% needed to position correctly in IE6.  Width needed for FF 3 & Safari 3 */
	float:left;
	clear:left;
}

#content .figure_text_left p.caption,
#content .figure_text_left p.copyright {
	text-align:left;
	margin:0;
	padding:0.3em 0;
	float:left;
	clear:both;
}

#content div.figure_text_left_wrap {
	margin:0 0.3em 0 0;
	padding:0 0.3em;
	float:left;
	clear:left;
}

#content .figure_text_left_wrap p.caption,
#content .figure_text_left_wrap p.copyright {
	text-align:left;
	margin:0 0.3em 0 0;
	float:left;
	clear:left;
}

#content div.figure_text_centre {
	width:98%; /* 98% needed to position correctly in IE6.  Width needed for FF 3 & Safari 3 */
	margin:0 auto;
	padding:0 0.3em;
	float:none;
	clear:both;
}

#content .figure_text_centre p.caption,
#content .figure_text_centre p.copyright {
	text-align:center;
	margin:0 auto;
	padding:0.3em 0;
	float:none;
	clear:both;
}

#content div.figure_text_right {
	width:98%; /* 98% needed to position correctly in IE6.  Width needed for FF 3 & Safari 3 */
	margin:0;
	padding:0 0.3em;
	float:right;
	clear:right;
}

#content .figure_text_right p.caption,
#content .figure_text_right p.copyright {
	text-align:left;
	margin:0;
	padding:0.3em 0;
	float:right;
	clear:both;
}

#content div.figure_text_right_wrap {
	margin:0;
	padding:0 0.3em;
	float:right;
	clear:right;
}

#content .figure_text_right_wrap p.caption,
#content .figure_text_right_wrap p.copyright {
	text-align:left;
	margin:0;
	padding:0.3em 0;
	float:right;
	clear:right;
}

#content p.figure.right {
	text-align:left;
	float:none;
	clear:both;
	margin:0.5em 0 0 0;
}

#content p.figure.left {
	text-align:left;
	float:none;
	clear:both;
	margin:0.5em 0 0 0;
	padding:0;
	display:inline;
}

#content p.figure.right.wrap {
	float:right;
	clear:both;
	margin:0;
}

#content p.figure.left.wrap {
	float:left;
	clear:none;
	margin:0 0.5em 0 0;
}

#content p.figure.right.wrap +p { clear:none; }

#content p.figure.left.wrap +p { clear:none; }

#content p.figure.right +p { clear:right; }

#content p.figure.left +p { clear:left; }

#content p.figure.left +p.figure.left,
#content p.figure.right +p.figure.right { zoom:1 }

#content p.caption {
	/* Caption text style for graphics rendered in main content */
	color:#204162;
	font-size:90%;
	max-width:100%;
}

#content p.copyright {
	color:#4B6075;
	font-size:80%;
	max-width:100%;
}

/* end of graphics styles */

#content p.backToTop { clear:both; }

strong,
b { /* Used to emphasise text within a paragraph */ font-weight: bold; }

blockquote {
	/* Positions the text style for quotations and extracts.
	IMPORTANT: the text is styled with 'blockquote p' */
	margin:5px 10px 5px 50px;
	max-width:345px;
}

blockquote p {
	/* Renders the text styles for quotations and extracts */
	margin:5px 0;
	font-size:95%;
	color:#003366;
}

cite { }

em,
i { /* Used for any italicised texts in a paragraph. 
Its recommended that the values are inherited from 'p' 
as it could conflit visually with 'strong' */ }

/* popups and audio pages already have a print link so remove this second one in the footer */
#popup a.printLink,
#audio a.printLink { display:none; }

#audio { margin-top:1em; }

abbr,
acronym {
	cursor:help;
	border-bottom:1px dashed #000;
}

code {
	font-family:Courier, "Courier New", monospace;
	font-size:110%;
	display: block;
	white-space: pre;
}

pre { margin:0; }

/* --------------------- Standard lists --------------------- */
#content ul,
#content ol {
	max-width:40em;
	padding-left:2em; /* left padding needed if max-width is used. */
	margin:0;
}

#content li {
	margin:0;
	color:#000;
}

li p {
	/* Positions a list item's second or subsequent paragraph(s) */
	margin:5px 0;
	color:#000;
	vertical-align:text-top;
}

ul li ul li {
	/* Unordered list nested once */
	list-style-type:circle;
	margin:0.3em 0 0.3em 0em;
	display:list-item;
}

ol li ol li {
	/* Ordered list nested once */
	list-style-type: lower-alpha;
	margin :5px 5px 5px 35px;
	display:list-item;
}

ol li ol li ol li {
	/* Ordered list nested twice */
	list-style-type:lower-roman;
	margin :5px 5px 5px 35px;
	display:list-item;
}

dl {
	border:1px solid #5A5A5A;
	padding:0;
	margin:0;
	width:96%;
	max-width:600px;
}

dt {
	border-bottom:1px solid #5A5A5A;
	background-color:#EDF1F5;
	font-weight:bold;
	color:#003366;
	padding:3px;
	margin:0;
}

dd {
	padding:3px;
	margin:0;
}

/* --------------------- Table of content classes --------------------- */
#content div.toc {  }

#content div.toc h2.tochead {
	margin:0;
	padding:0 0 0 0.5em;
	color:#316AC5;
}

#content div.toc ul { padding:0.5em; }

#content div.toc li { list-style-type:none; }

#content div.toc a.tocLink:link { }

/* --------------------- Pseudo classes --------------------- */

/* --- Standard links --- */

a:link { color:#000; }
a:visited { color:#575757; }
a:focus { color:#003366; }
a:hover { color:#003366; }
a:active {
	color:#03F;
}

#popup #content a:link {display: inline-block}

a.wikipedia {
	background: url(graphics/wikipedia.png) no-repeat center right;
	padding-right:18px;
	text-decoration:none;
	border-bottom:dotted 1px #999;
}

a.dictionary {
	background: url(graphics/dict.gif) no-repeat center right;
	padding-right:18px;
	text-decoration:none;
	border-bottom:dotted 1px #999;
}

p.expand { clear:both; }

#content div.toggle p.expand,
#content div.toggle div.toggle { margin-left:1em; }/* nested expandable sections */

a.expandable {
	padding-left:18px;
	display:inline-block; /* fixes an IE bug where the first plus is not clickable */
}

a.closed { background: url(graphics/plus.png) no-repeat top left; }

a.open { background: url(graphics/minus.png) no-repeat top left; }

/* --------------------- footer --------------------- */
#footer {
	position: relative;
	clear:both;
	width: 100%;
	margin: -5.5em 0 0 0;
	padding: 1.1em 0;
	height:3em;
	border-top:0.2em solid #A9BF7A;
	font-family: Arial, Helvetica, sans-serif;
	font-size:0.8em;
	color: #333;
	background: #fff;
}

.push { /*ensures content layer clears footer*/
	height:5em;	/*must equal the same height as the footer*/
	clear:both;
}

#feedback #footer { }

#show #footer { margin-top:0.5em; }

#popup #footer p,
#show #footer p { width:500px; }

#feedback #footer p { width:380px; }

#footer p {
	position:absolute;
	margin:0;
	width:900px;
	height:20px;
	top:20px;
	background:url(graphics/neals.gif) no-repeat 5px top;
}

#footer p#secondaryFooterInfo {
	max-width:100%;
	padding:0.5em 0;
}

#footer #copyright {
	position:absolute;
	top:8px;
	padding-left:70px;
}

#footer #print { }

#footer a {
	color: #333;
	padding:1em 1em 0 1em;
}

#footer p#pagination {
	position:absolute;
	margin:0 0 0 -225px;
	width:450px;
	left:50%;
	top:10px;
	background-image:none;
}

#footer p#pagination span {
	width:18%;
	float:left;
}

#footer p#pagination span#start { }

#footer p#pagination span#back { }

#footer p#pagination span#location { text-align:center; }

#footer p#pagination span#next { text-align:right; }

#footer p#pagination span#end {
	float:right;
	text-align:right;
}

a.printLink { margin-left:1.5em; }

a.printLink:link,
a.printLink:visited { color:#575757; }

a.printLink:focus,
a.printLink:hover,
a.printLink:active { color:#003366; }

/* ----------------- Activity styles ---------------- */

.actdiv {
	background-color:#fff;
	padding:0.5em;
	width:90%;
	border:1px #5A5A5A dashed;
	margin:0.5em 0;
}

.actdiv p {
	/* Paragraph text style for activity. 
	Questions are tagged within strong tags and rendered using the the style for 'strong' */
	margin:0.5em;
	color:#000;
	font-size:100%;
}

.activityTitle { font-weight:bold; }

label.activityLabel { }

input { }

.actinput,
textarea {
	/* Renders the text styles for 'input' box (missing word activities) and 
	'textarea' (short answer question activities). */
	font-family:Arial, Verdana, helvetica, sans-serif;
	font-size:95%;
	color:#000;
}

.shortAnswerTextarea { width:95%; }

.actinput {
	/* Renders the margins either side of the 'input' box */
	margin:0;
	padding:0;
	width:3em;
	display: block;
	float: left;
}

p.actbutton {
	padding:1em 0;
	margin:0.1em 0;
}

p.actbutton a {
	/* These attributes render the look and feel of the feedback buttons */
	/* top, right, bottom, left */
	margin:0;
	font-family:Verdana, helvetica, Arial, sans-serif;
	font-size:90%;
	text-decoration:none;
	font-weight:bold;
	padding:0.3em;
	border-bottom:2px #5A5A5A solid;
	border-right:2px #5A5A5A solid;
	background-color:#e5e5e5;
}

p.actbutton a:link { color:#000; }

p.actbutton a:visited { color:#575757; }

p.actbutton a:focus { color:#003366; }

p.actbutton a:hover { color:#003366; }

p.actbutton a:active { color:#000; }

/* --- Table style for JavaScript activities --- */

table.activity {
	/* If this table is not rendered in the '.actfieldset' then 
	its recommended that the width not exceed 96% */
	margin:0 0 15px 0;
	width:100%;
	border-collapse:collapse;
}

table.activity td {
	/* Contains the text style for JavaScript activities */
	font-family:Verdana, Helvetica, Arial, sans-serif;
	color:#000;
	background-color:transparent;
	padding:0;
	border:0 #000 solid;
	vertical-align:middle;
}

/* -------------------- Styles for tables ------------------- */

/* --- Tabular table styles --- */

table.tabular {
	/* Its recommended that the width not exceed 96% */
	/*width:96%;*/
	margin:10px 0 10px 0;
	border-collapse:collapse;
	min-width:0;
	max-width:600px;
	font-family:Verdana, Helvetica, Arial, sans-serif;
	padding:0;
	margin:0;
	border-collapse:collapse;
	clear:both;
}

caption {
	/* Accessibility related captions for tabular tables */
	padding:1em 0 0.5em 0;
	color:#000;
	font-weight:bold;
	text-align:left;
}

table.tabular th {
	color:#003366;
	font-weight:bold;
	padding:3px 5px;
	background-color:#EDF1F5;
	border:1px #5A5A5A solid;
	vertical-align:top;
}

table.tabular td {
	/* Contains the default text style for tabular data. 
	IMPORTANT: Its recommended that text within tabular tables 
	appear within p tags and styled with 'td p' */
	color:#000;
	font-size:90%;
	text-align:left;
	padding:3px 5px;
	background-color:#fff;
	border:1px #5A5A5A solid;
	vertical-align:top;
}

table.tabular th.ta,
table.tabular td.ta,
table.layout th.ta,
table.layout td.ta { vertical-align:top; }

table.tabular th.ma,
table.tabular td.ma,
table.layout th.ma,
table.layout td.ma { vertical-align:middle; }

table.tabular th.ba,
table.tabular td.ba,
table.layout th.ba,
table.layout td.ba { vertical-align:bottom; }

table.tabular p {
	/* Paragraph text style for tabular tables */
	margin:5px 5px 5px 0;
	color:#000;
}

table.tabular li {
	/* Ordered and unordered list style for tabular tables */
	color:#000;
	margin:0 5px 5px -10px;
	display:list-item;
	text-align:left;
}

table.tabular ol li ol li {
	/* Nested ordered list for tabular tables */
	list-style-type:lower-alpha;
	margin:5px 0 0 -10px;
}

table.tabular p.caption {
	/* Caption text style for graphics rendered in tabular tables */
	margin:5px;
	color:#204162;
	text-align:left;
	/* Positions graphics inserted in tables */
	margin:0;
}

table.tabular img { }

/*-----the first element after a layout table should be cleared  ------- */
table.layout {
	padding:0;
	margin:0;
	border-collapse:collapse;
	clear:both;
}

table.layout tr { vertical-align:top; }

.layout + * { clear:both; }

/* --------------- Feedback styles ------------------- 
IMPORTANT: These styles render the texts in the feedback windows */

h1.feedback,
p.feedback { margin:15px; }

/*---------------Audio styles -------------------------- */
.transcript { visibility:visible; }

.audio { padding:0.5em }

/*---------------End of audio styles -------------------------- */

form {
	margin:0;
	padding:0;
}

.right { float:right; }

.left { float:left; }

.wrap { }

.forty { width:40%; }

.clear { clear:both; }

.clearLeft { clear:left; }

.qStem { font-weight:bold; }/*stem for a question */

.printOnly { display:none; }/* for footnoteLinks */

/*skip links */
p.skip,
p.skip a {
	position:absolute;
	left: 0;
	top:-20px;
	padding: 0 0.5em;
	margin:0;
	width: 13.2em;
	z-index: 0;
	background-color:#000;
}

.skip a:focus,
.skip a:active {
	display: inline;
	z-index: 2;
	border: solid black 1px;
	color: #cc0;
	text-decoration: none;
	position: absolute;
	top:20px;
	left: 0
}

.skip a#cont {
	position: absolute;
	top: -100px;
	width: 13.2em;
}

.skip a#cont:focus,
.skip a#cont:active {
	top:0;
	left:0;
	z-index: 2
}

.skip a:hover { cursor: default }

/*--------------- Tab styles -------------------------- */
.ui-tabs .ui-tabs-hide { display: none !important; }

#tabs div > h3:first-child { display:none; }

/*--------------- Misc -------------------*/

p.noscript {
	color:#000;
	Background:#fff;
}
#show #nonFooter .push .textContain p strong img {
	float: left;
	margin-right: 10px;
}
#show #nonFooter #content .textContain p strong img {
	float: left;
	margin-right: 15px;
	margin-bottom: 5px;
}
#show #nonFooter #content .textContain p img {
	float: left;
	margin-right: 10px;
	margin-bottom: 5px;
}
#show .textContain p img {
	float: left;
	margin-right: 10px;
	margin-bottom: 5px;
}