/* ------------------ BEGIN NEW USER and CONCLUSION BOXES --------------- */

#home-sidebar { width: 200px; float: left; margin-right: 10px; }
.outlined-callout { padding: 0px; overflow: hidden; margin-bottom: 3px; border: solid 1px #003300; background-color: #FFF; }
.outlined-callout { zoom: 1; }
.outlined-callout-inner { padding: 15px; overflow: hidden; position: relative; }
.outlined-callout-inner-conclusion { padding: 15px; overflow: hidden; position: relative; }

#home-topics h2 { font-size: 1.4em; }
#newuser { color: #FFFFFF; }
.outlined-callout-inner ul { list-style: none; }
.outlined-callout-inner ul li { padding: 5px; }
.outlined-callout-inner h2 { font-size: 1.4em; color: #b5ceec; }
.outlined-callout-inner { border: solid 6px #b5ceec; background: #385478 ; width: 200px; float: right; margin-left: 10px; }
.outlined-callout-inner-conclusion ul { list-style: none; }
.outlined-callout-inner-conclusion ul li { padding: 5px; }
.outlined-callout-inner-conclusion h2 { font-size: 1.4em; color: #b5ceec; }
.outlined-callout-inner-conclusion { border: solid 6px #b5ceec; background: #385478 ; width: 400px; float: left; margin-left: 160px; }


#home-topics .outlined-callout-inner li a:link, #home-topics .outlined-callout-inner li a:visited { text-decoration: none; color: #333333; }

#home-topics .outlined-callout-inner li.home-topic-selected a:link, #home-topics .outlined-callout-inner li.home-topic-selected a:visited { color: #FFFFFF; }

a.callout-btn:link, a.callout-btn:visited{ 
	margin: 8px auto 3px auto; display: block; overflow: visible; text-align: center; background-color: #EEF; 
	border: 1px solid #727272; border-top-color: #CCC; border-left-color: #CCC; padding: 3px 3px 2px 3px; color: #545454; text-decoration: none;	
}
a.callout-btn:hover, a.callout-btn-hover { background-color: #FFF; border-color: #666; cursor: pointer; color: #000000; }
a.callout-btn:active,  a.callout-btn-active { border-color: #333; text-decoration: none; }
a.callout-btn-disabled { background-color: #FFF; border: 1px solid #CCC; padding: 3px 3px 2px 3px; color: #CCCCCC; }

/* ------------------ END NEW USER and CONCLUSION BOXES --------------- */

#pageHeadingWindowhelp .heading1{
	border-bottom: none;
	padding: 5px 0 0 10px;
}

body, html {
	margin:0;
	padding: 0;
	color:#000;
	background-color: #5681B8;
	height: 100%;
	}
body {
	font-family: "Trebuchet MS", Arial, Helvetica, Sans-serif;
	font-size:small;
	padding: 0;
	margin:0;
	min-width:780px;
	height: 100%;
	}

p {
	font-family: "Trebuchet MS", Arial, Helvetica, Sans-serif;
	font-size:small;
	margin: 0 0 10px 0;
	line-height: 13pt;
	}
	
b, strong {
	font-weight:bold;
	}
i, em {
	font-style:italic;
}

a {
	outline: none;
}

#wrap {
	margin: 0 auto;
	width: 780px;
	position: relative;
	min-height: 99%;
	height:auto !important; 
	background-color: white;
	overflow: auto;
	}

* html #wrap {
	height: 99%;
	}

#header {
	background: #FFFFFF;
	position: fixed;
	width: 780px;
	}
#header img {
	padding: 0px;
	margin: 0px;
	}

#bannerTitleLayer {
	position:absolute;
	width:600px;
	height:28px;
	z-index: auto;
	left: 180px;
	top: 0px;
}

#bannerTitleLayer h1 {
	color: #FFFFFF;
	font-weight: bold;
	font-size: medium;
	font-family: Arial, Helvetica, sans-serif;
	float: right;
	padding: 5px 5px 0 0;
	margin: 0;
}

#moduleNameLayer {
	position:absolute;
	width:650px;
	height:26px;
	top: 33px;
	left: 0px;
	color: #FFFFFF;
	font-weight: bold;
	font-size: medium;
	font-family: Arial, Helvetica, sans-serif;
	padding: 5px 0px 0px 10px;
}


/* Breadcrumbs */
div#breadcrumbs {
	float: left;
	padding: 5px 5px 5px 15px;
    }	 
div#breadcrumbs ul{
    margin:0;
    padding:0;
    list-style-type:none;
    }
div#breadcrumbs li{
    display:inline;  /* makes it layout horizontally */
    padding:0;
    }

div#breadcrumbs li a {
	text-decoration: none;
}

.panelButtons a {
	text-decoration: none;
}

/* pageNumber */
div#pageNumber {
	float: right;
	padding: 0px 5px 0px 0px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: x-small;
	color: #333399;
}

div#pageNumber ul {
	/*float: right; */
	margin: 0;
	padding: 0px;
	white-space: nowrap;
	list-style-type: none;
}
div#pageNumber li {
	padding: 0 3px 0 3px;
	display: inline;
}
div#pageNumber li a {
	text-decoration: none;
	color: #333399;
	padding: 3px;
}
div#pageNumber li a:link {
	color: #333399;
}
div#pageNumber li a:visited {
	color: #333399;
}
div#pageNumber li a:hover {
	color: #FFF;
	background-color: #660033;
}

/* links on the index page only */
.indexLink a{
	text-decoration: none;
	color: #000000;
	padding: 10px;
}

.pageNumberBottom {
	margin-left: -5px;
}
/* end pageNumber */

#pageHeading {
	padding-top: 120px;
	margin-bottom: 5px;
}
	 
#pageHeading #heading1 {
	width: 100%;
	}

#pageHeading .heading1 {
	border-bottom: none;
	padding: 0 0 0 15px;
	}

#pageHeadingWindow {
	padding: 50px 0 0 5px;
}

#pageHeadingWindow .heading1 {
	border-bottom: none;
	padding: 0 0 0 10px;
}

/* Navigation Bar in banner */
div#navigationBar {
	height: 30px;
	width: 100%;
	background-color: #FFFFCA;
	margin: 0px;
	padding: 0px;
}
div#navigationBar ul {
	margin: 0px;
	padding: 0px;
	font-family: "Trebuchet MS", Arial, Helvetica, Sans-serif;
	font-size: small;
	color: #FFFFCA;
	line-height: 30px;
	white-space: nowrap;
	vertical-align: middle;
}
div#navigationBar li {
	list-style-type: none;
	display: inline;
}
div#navigationBar li a {
	text-decoration: none;
	padding: 6px 10px 3px 10px;
	color: #FFFFCA;
}
div#navigationBar li a:link {
	color: #406899;
}
div#navigationBar li a:visited {
	color: #3D6392;
}
div#navigationBar li a:hover {
	color: #3D6392;
	background-color: #FFEE75;
	padding: 0px 10px 3px 10px;
}

/* rounded corners in navigationBar and footer */
.rtop {
display:block;
background:#5681B8;
}
.rbottom {
display:block;
background:#5681B8;
}
.rtop *{
display: block;
height: 1px;
overflow: hidden;
background:#FFFFCA;
}
.rbottom *{
display: block;
height: 1px;
overflow: hidden;
background:#FFFFFF;
}
.rWindowtop {
display:block;
background:#5681B8;
}
.rWindowtop *{
display: block;
height: 1px;
overflow: hidden;
background:#FFFFFF;
}

.r1{margin: 0 5px}
.r2{margin: 0 3px}
.r3{margin: 0 2px}
.r4{margin: 0 1px; height: 2px}

/* end rounded corners */

a img { text-decoration: none; border:0; }
#main {
	float:left;
	width:755px;
	padding-right: 10px;
	padding-bottom: 4em;
	padding-left: 15px;
    }
#main h2, #main h3, #main p {
    padding:0;
    }

#rightCol {
    float:right;
    width:0px;
	 padding-bottom: 4em;
    }

#rightCol ul {
    margin-bottom:0;
    }
#rightCol h3, #rightCol p {
    padding:0 10px;
    }
	 
/* Footer */	 
#footer {
	color: #000000;
	height:3.2em;
	clear: both;
	background: #FFFFFF;
	position: relative;
	margin:-3.2em auto;
	width:764px;
	border-bottom: #5681B8 3px solid;
	border-top: #5681B8 1px solid;
	/* padding: 0 15px 0 15px; */
	padding: 0 0 0 15px;
	}

.footerRoundedCorners {
	clear: left;
	width:781px; 
	margin-left: -16px; 
	margin-right: -15px; 
	border-bottom: #5681B8 5px solid;
}

.copyright {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size:xx-small;
	color:#000000;
	margin-right: 100px;
}

#copyrightBot {
	/* border-top: #5681B8 1px solid; */
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size:xx-small;
	color:#000000;
	padding-top: 2px;
}
#copyrightTop {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size:xx-small;
	color:#000000;
	/* border-top: #FFF 1px solid; */
}
.copyrightText {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size:xx-small;
	color:#000000;
	width: 60%;
	float: left; 
	padding-top: 8px;
	padding-left: 28px;
}
.copyrightSpacer {
	width: 80%;
	float: left;
}
.copyrightImage {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size:xx-small;
	float: left;
	padding-top: 10px;
}

/* Images */
img {
	margin: 0px;
	}
	
.padded img {
	margin: 5px;
	}

/* float image left or right no border or caption */
img.floatLeft {
	float: left;
	margin: 4px;
	}
img.floatRight {
	float: right;
	margin: 4px;
	}

/* float multiple images left or right no border or caption */
img.floatLeftClear {
	float: left;
	clear: left;
	margin: 4px;
	}
img.floatRightClear {
	float: right;
	clear: right;
	margin: 4px;
	}

/* float image left or right with optional caption */
.floatRight {
	float: right;
	margin: 0 0 10px 10px;
	}

.floatLeft {
	float: left;
	margin: 0 10px 10px 0;
	}

/* Styles for content */
.rightAlign {
    text-align: right;    
 }
 
.centreAlign {
    text-align: center;    
 }

.leftAlign {
    text-align: left;    
 }

ul {
	list-style-type: square;
}

.heading1 {
	font-size: x-large;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	color: #133F6F;
	margin-top: 3pt;
	margin-bottom: 3pt;
	border-bottom: solid #333399 1pt;
	}

.heading2 {
	font-size:large;
	font-family:Arial Narrow, Helvetica, sans-serif;
	font-weight:bold;
	color:#133F6F;
	margin-top: 3pt;
	margin-bottom: 4pt;
	}

.heading3 {
	font-size:medium;
	font-family:Arial Narrow, Helvetica, sans-serif;
	font-weight:bold;
	color:#133F6F;
	margin-top: 3pt;
	margin-bottom: 4pt;
	}
	
.heading4, .heading5, .heading6 {
	font-size:medium;
	font-family:Arial Narrow, Helvetica, sans-serif;
	font-weight: normal;
	color:#133F6F;
	margin-top: 3pt;
	margin-bottom: 4pt;
	}

.pageHeader0 {
	font-size:large;
	font-family:Arial, Helvetica, sans-serif;
	font-weight:bold;
	color:#133F6F;
	margin-bottom: 6px;
	}
.pageHeader1 {
	font-size:medium;
	font-family:Arial, Helvetica, sans-serif;
	font-weight:bold;
	color:#133F6F;
	margin-top: 5px;
	}
.pageHeader2 {
	font-size:small;
	font-family:Arial, Helvetica, sans-serif;
	font-weight:normal;
	color:#133F6F;
	}

.pageHeader3 {
	font-size:small;
	font-family:Arial, Helvetica, sans-serif;
	font-weight: bold;
	color:#133F6F;
	margin-bottom: 10px; 
	}
	
.instruction {
	color: #333399;
	margin-bottom: 5px;
}

.quote {
	color: #710000;
	font-weight: bold;
	margin: 10px;
	margin-left: 10%;
	width: 80%;
}

.caption {
	color: #900;
	text-align: left;
	font-size: x-small;
}

.centre {
	text-align: center;
}

.noBullets {
	padding: 5px; 
	margin: 5px; 
	list-style-type: none; 
	}

/* to align radio button wrapped text in a form */
input[type=checkbox], input[type=radio] { 
	width: 13px; 
	height: 13px; 
	padding: 0; 
	margin:0; 
	vertical-align: top; 
	position: static;  /* changed from relative so that it goes under the page numbers */
	top: 1px; 
	overflow: hidden; 
} 
label { 
	display: block; 
	padding: 0; 
	padding-left: 15px; 
	text-indent: -20px; 
	border: 0px solid; 
	margin-left: 5px; 
	vertical-align: top; 
}

/* floating menu styles */
/* To change menu width, need to change 200px in 3 places where marked */
/* removed 	position: absolute;  so that long menus to not go off the bottom of the page */
#siteMap {
	z-index: 500;
}

.hideMenu {
	visibility: hidden;
}

.menu {
	font-size: small; 
	margin: -5px 10px 10px 0px; 
	}

.menu ul {
	padding: 0px; 
	z-index: 500; 
	margin: 0px; 
	width: 200px;   /* menu width */
	list-style-type: none; 
	position: relative
	}
.menu li {
	float: left; 
	background-color: #FFFFCA;
}
.menu a {
	border: #CCCCCC 1px solid;
	display: block;
	padding-left: 1em;
	width: 200px;     /* menu width */
	color: #426A9B;
	line-height: 2em;
	height: 2em;
	text-decoration: none
}
.menu b {
	float: right;
	margin-right: 2px;
	}
* html .menu a {
	width: 200px   /* menu width */
	}
* html .menu a:hover {
	font-weight: normal; 
	color: #426A9B; 
	position: relative; 
	background-color: #660033; 
	}
.menu li:hover {
	position: relative
}
.menu a:active {
	color: #426A9B; 
	background-color: #660033; 
	text-decoration: none
	}
.menu a:focus {
	color: #426A9B; 
	background-color: #660033; 
	text-decoration: none
	}

/* a is a child of li */
.menu li:hover > a {
	color: #426A9B; 
	background-color: #FFEB68; 
	text-decoration: none
	}
.menu li ul {
	padding: 2em;
	position: absolute;
	top: 0;
	left: 220px;
	background-color: transparent;
	visibility: hidden;
	}
.menu li:hover > ul {visibility: visible}
.menu ul a:hover ul ul {visibility: hidden}
.menu ul a:hover ul a:hover ul ul {visibility: hidden}
.menu ul a:hover ul a:hover ul a:hover ul ul {visibility: hidden}
.menu ul a:hover ul {visibility: visible}
.menu ul a:hover ul a:hover ul {visibility: visible}
.menu ul a:hover ul a:hover ul a:hover ul {visibility: visible}
.menu ul a:hover ul a:hover ul a:hover ul a:hover ul {visibility: visible}

.printVersionLink {
	color: #3D6392;
	float: right;
	position: static;  /* changed from relative so that it goes under the page numbers */
	margin-right: 10px;
}
.printVersionLink a {
	color: #3D6392;
}
.printVersionLink a:link {
	color: #3D6392;
}
.printVersionLink a:visited {
	color: #9966cc;
}
.printVersionLink a:hover {
	color: #3D6392;
}

.flashInteraction {
	clear: both;
	float: none;
	text-align: center;
}

.noteBox {
	width: 90%;
	margin-top: 10px;
	margin-bottom: 10px;
	margin-left: 4%;
	padding: 5px;
	border: #5681B8 1px solid;
}
.noteIcon {
	float: right;
	width: 7%;
	padding: 2px 10px 2px 2px;
	min-width: 50px;
}
.noteText {
	padding: 2px;
}

	
.narrow {
	width: 45%;
	margin-left: 2%;
}

/* Quiz Questions */
.quiz {
	border-top: #03F 1px ridge;
	margin: 0px;
}

.quizFeedback {
	margin-top: 0px;
}

.questionInstructions {
	font-weight: bold;
	color: #039;
	margin: 2px 0 2px 0;
}

.questionText {
	color: #039;
}

.quizCorrectFeedback {
	background-color:#B7FFB7;
	border-top: #6F6 1px ridge;
	border-bottom: #6F6 1px ridge;
	margin: 2px;
}

.quizIncorrectFeedback {
	background-color:#FF8A8A;
	border-top: #F00 1px ridge;
	border-bottom: #F00 1px ridge;
	margin: 2px;
}

.answerButton {
	margin-top: 10px;
	margin-bottom: 0px;
	width: auto;
}
 
 /* Multiple choice - multi answer styles */
.hideQuizQuestionFeedback {
	visibility: hidden;
	display: none;
}
.showQuizQuestionFeedback {
	visibility: visible;
}

textarea#correctFeedback {
	background-color:#B7FFB7;
	width: 600px;
	padding: 5px;
	margin: 2px;
	border: none;
	font-family: Tahoma, sans-serif;
	overflow: auto;
}
textarea#incorrectFeedback {
	background-color:#FF8A8A;
	width: 600px;
	padding: 5px;
	margin: 2px;
	border: none;
	font-family: Tahoma, sans-serif;
	overflow: auto;
}

/* For content that is for the print version only */
.printOnly {
	display: none
}

.print {
	display: none;
}

.noPrint {
	display: block;
}

/* Background Colours */
/* Use these colour styles in combination with other classes (for example class="SlidingPanels blueBack") 
 * to create a coloured background for an element.
 */


.blueBack {
	background-color: #09F;
}
.lightBlueBack {
	background-color: #9CF;
}

.greenBack {
	background-color: #00DD95;
}
.lightGreenBack {
	background-color: #6FC;
}

.redBack {
	background-color: #FF8A8A;
}

.purpleBack {
	background-color: #A87EF5;
}

.pinkBack {
	background-color: #FCF
}

.lightGreyBack {
	background-color: #CCC;
}
.darkGreyBack {
	background-color: #999;
}

.popupLayer {
	background-color: #FFFFCA;
	padding: 3px 3px 1px 3px;
   border-bottom: 1px solid #CCCCCC;
   border-right: 1px solid #CCCCCC;
}

/* popup highlights */
img.IButtonTransparent {
	border: solid 1px none; 
	cursor: pointer;
	margin-top:3px;
	margin-bottom:1px;
	margin-left:1px;
	margin-right:1px;
} 

img.IButtonTransparentHighlight {
	border: solid 2px blue;
	cursor: pointer;
	margin-top:3px;
	margin-bottom:1px;
	margin-left:1px;
	margin-right:1px;
}

.IDragAndDropBackground {
    position: absolute;
    z-index:0; 
}
.IDragAndDropElement {
    position: absolute; 
    z-index: 2;
}
.IDragAndDropTarget {
    position: absolute; 
    z-index:1;
}

.Inlinemediaobject {  
	text-align: left; 
	text-indent:0pt; 
	color: Red; 
	font-family: Arial; 
	font-size: 8pt;
 	}
	
.languageToggle {
	visibility: hidden
}

.chevron {
	padding-right: 3px;
	font-family:wingdings;
}