/*
FILE NAME: global.css
DATE MODIFIED:9 July 2009
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:0.8.4
*/
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;
	height:100%;
	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 1em 5em 1em; /* padding bottom larger than footer height for IE bug */
	}
.textContain{
	padding:0;
	margin:0;
	max-width:40em;
	}

/* - - - - - - - - - - - - - - - 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 10px 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 10px 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;
	top:0.7em;
	background:#e4e5e6;
	}

#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;
	}
#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:#006699;
	font-size :130%;
	clear:both;
	}
#title {
	background: #000 url(graphics/title_bg.png) repeat-x left bottom;
	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 300%/100% "Lucida Grande", Arial, sans-serif;
	position: relative;
	margin: 0;
	color: #fff;
	}
#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 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:right;
	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:right;
	margin:0;
	padding:0.3em 0 ;
	float:right;
	clear:right;
	}
#content p.figure.right{
	text-align:right;
	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;
	}
#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.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 */


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;
	}
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{
	border:solid 1px #efefef;
	}
#content div.toc h2.tochead{
	border-bottom: 1px dotted #999;
	background-color:#efefef;
	margin:0;
	padding:0 0 0 0.5em;
	}
#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:#575757;}

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 center left;}
a.open{background: url(graphics/minus.png) no-repeat center left;}


/* --------------------- footer --------------------- */
#footer {
	position: relative;
	clear:both;
	background:#fff url(graphics/banner_swoosh2.gif) no-repeat right top;
	font-size:0.8em;
	color:#575757;
	border-top:0.4em #fc3 solid;
	padding:1em;
	margin-top: -5.5em; /* negative value of (Height + Padding + Borders)+ small amount to cover browser differences in rounding.  Better to use a consistent unit (em or px) - easier to add */
	height:3em;
	}
#footer p{ margin:0;}
#footer p#secondaryFooterInfo{
	max-width:100%;
	padding:0.5em 0;
	}
#footer #copyright{
	/*background:url(graphics/neals.gif) no-repeat left;*/
	padding:5px 0 5px 65px;
	}
#footer #print{ padding-left:1em;}
#footer p#pagination{
	padding:0;
	margin:0 auto;
	height:2em;
	width:450px;
	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;
	}
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;
	}
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}
.ui-tabs .ui-tabs-hide { display: none !important; }