/*	

	Web CSS Document 
	for COPMI Keeping Families and Children in Mind
	
	For browser-specific styles, see:
		main_ie6.css
		main_ie7.css
	
*/


/* RESET */

html, body,
img {
	margin:0;
	border:0;
	font-family:"Gill Sans MT", "Gill Sans", Calibri, Trebuchet, "Trebuchet MS", sans-serif;
	/*line-height:18px;*/
	}
	
object { 
	display:block; 
	margin-top:10px;

}

div.Rnearlyhalf object {
	display:inline;
	}

.imgtextblock {
	width:100%;
	padding-top: 0.75em;
	padding-bottom:0.75em;
}

.imgtextblock img {
	padding:0 !important;
}

.imgtextblock h2 {
	padding:0;
margin:0;
}	

.imgtextblock p {
	padding-top:0;
}

.text img {
	padding:1em;
}

img.link  {
	padding: 0 5px 0 0;
	float:left;
}

img.icon {
	padding:0 0.1em;
}

img.popupicon {
	padding-left:20px;
}

 
a, object, embed {
/*removes dotted line around clickable things 
(an accessibility thing) in modern browsers */
   outline: none;
}
	
	
/* FONTS */

p, h1, h2, h3, h4, h5, h6 {
	font-weight:normal;
	margin:0;
	}

h1 {
	font-size:1.3em; 		/* 19pt */
	color: #a32800; 		/* 163-40-0 */
	line-height: 1.2em; 	/* leading 23pt */
	/*padding-top: 0.95em;*/ 	/* para before 15pt */
	padding-bottom: 0.7em; 	/* para after 10pt */
	}
	
h2 {
	font-size:1.1em;		/* 16pt */
	color:#808080;			/* 50% black */
	padding-top: 0.4em;		/* para before 5pt */
	padding-bottom: 0.55em; /* para after 9pt */
	}

body.assessment h2.questiontext {
	color:#333;
	font-weight:bold;
	line-height:1.2em;
	padding-bottom:0em;
}

body.assessment p.questiontext {
	 font-weight:bold;
}

.assessment-link {
	padding:0.5em 0;
}

	
h3, p, li, dd, blockquote, .instruction, td {
	font-size:0.95em; 		/* 14pt */
	line-height:1.2em; 		/* leading 17pt */
	color:#333; 			/* 80% black */
	padding-bottom:0.8em; 	/* para after 7pt */
	}
	
p {
	padding-bottom:1.2em;
	line-height:1.4em;
	}

sup, sub {
	line-height:0;
}

sup {
	vertical-align:text-top;
}

sub {
	vertical-align:text-bottom;
}
	
h3 {
	color:#000;
	padding-top:0.5em;
	}
	
p.disclaimer {
	/*padding-left:2.75em;*/	/* Indent 43pt */
	font-style:italic;
	}


	
sup.ref {
	/*margin-top:-18px;*/
	color:#a32800;
	font-size:0.8em;
	text-decoration:none;
	}


a:link,
a:active,
a:hover,
a:visited {
	color:#a32800;
}

.fileinfo {
	font-size:80%;
	font-weight:normal;
}

.fileinfo img {
	padding:0 0.2em;
}
	
div.indent {
	padding-left:50px;
	}


.loggedin {	
	color:#7D7E80;	
	font-size:0.8em;	
	text-align:right;	
	padding-top:4px;	
	width:945px;	
	}	


.loggedin a {	
	color:#a32800;	
	}
	
	
ul {
	margin-top:3px;
	margin-bottom:0;
	}

.text ul {
	margin-top:-10px;
	padding-bottom:1em;
}

ul.link-list li {
	list-style:none;
}
	
blockquote {
	color:#b85335;
	background: transparent url(../images/quote_start_red.gif) left top no-repeat;
	padding-top:10px;
	}
	
blockquote div {
	padding: 0.5em 50px;
	background: transparent url(../images/quote_end_red.gif) right bottom no-repeat;
	display:inline;
margin-bottom:30px;
	}
		/* Bug IE6
			End quote sometimes missing - why??
		*/
	
/** alternatives **/

.robox blockquote {
	color:#fff;
	background: transparent url(../images/quote_start_red.gif) left top no-repeat;
	}
	
.robox blockquote div {
	padding: 0 55px;
	background: transparent url(../images/quote_end_red.gif) right bottom no-repeat;
	}
	
/* 2 */	
.robox15 blockquote {
	color:#a32800;
	background: transparent url(../images/quote_start_whiteon15.gif) left top no-repeat;
	display:block;
	padding-bottom:0;
	}
	
.robox15 blockquote div {
	padding: 0 55px;
	background: transparent url(../images/quote_end_whiteon15.gif) right bottom no-repeat;
	display:block;
	font-style: italic;
	
	}
/** end alternatives **/
	

	
/* HEAD */
#header {
	padding:0 2em; /* see main_ie6.css */
	height:70px;
	}
	
#banner {
	float:left;
	}
	
#header .logo {
	float:right;
	padding-left:1em;
	}
	
	
	
	
	
/** NAVIGATION **/
	
#tab-nav {	
	/*padding-top:35px;  see main_ie6.css for override */
	position: absolute;
	text-align:right;
	top:30px;
	left:500px;
	width: 480px;
	}

#tab-nav li {
	display:inline;
	list-style:none;

}


	
/* Lil nav buttons */
.navbtns li {
	display:inline;
	}

.navbtns img {
	width:18px;
	height:18px;
}

ul.navbtns li a {
	text-decoration:none;
}
	
#breadcrumbs .navbtns,
#footer .navbtns {
	position:absolute;
	top:3px;	
	}
	
#footer .navbtns {
	top:-1em;
	/*left:10px;*/
	}
	
#breadcrumbs .navbtns {
	left: -25px;
	}
	
	
	
/* BREADCRUMBS */

#breadcrumbs {
	/*width:100%;*/
	text-align:right;
	padding-right:30px;
	background-color:#ffefd6;
	border-bottom: 2px solid #ffad33; /* Two pixels of solid cheese! Mmmm! */
	margin-bottom:1em;
	height:25px;
	}
	
#breadcrumbs ul {
	margin:0;
	height:25px;
	}
	
#breadcrumbs li {
	display:inline;
	list-style:none;
	color:#7d7e80;
	font-size:90%;
	}
	
#breadcrumbs li.active {
	color:#2f2f31;
	}

#footer .toasties {
	display:none;
}
	
#breadcrumbs .navbtns .toast {
	float:right;
	text-align:right !important;
}

ul.toasties {
	display:inline;
float:right;
}
	
	
/* PULL OUT MENU (SIDEBAR) */



	#sideBarContentsInner ul{
		margin-top:0; /* stops little jump when displaying Module content */
		padding:0;
	}
	
	#sideBarContentsInner li{
		margin:0 0 3px 10px;
		padding:2px 0;
		list-style-type:none;
		display:block;
		background-color:#ededef; /* Need this for fonts to render correctly in IE */
		width:170px;
	}
	
	#sideBarContentsInner li a:link,
	#sideBarContentsInner li a:visited{
		color:#2f2f31;
		text-decoration:none;
	}

	#sideBarContentsInner li a:hover{
		color:#a32800;
	}
	
	#sideBar{
		position: absolute;
		top: 95px;
		left:-3px;
		width: auto;
		height: auto;
	}
	
	#sideBarTab{
		float:left;
		height:auto;
		width:28px;
	}
	
	#sideBarTab img{
		border:0;
	}
	
	#sideBarContents{
		overflow: hidden !important;
		float: left;
		background-color:#ededef;
		/*border:1px solid #A32800;*/
	}
	
	#sideBarContentsInner{
		width:500px;
		margin-top:10px;
	}

.mlists {
	display:none; /* these must start hidden */
	margin-left:190px;
	font-size:0.8em;
	margin-top:10px;
	background-color: #d9d9d9;
	}

.mlists li {
	background-color: #d9d9d9 !important;
}
	
.mtitles {
	float:left;
	height:100%;
	clear:left;
	margin:10px 0 10px 10px;
	}
	
.mtitles * {
	font-size:0.9em;
	}

.moduleOn {
	background-color:#d9d9d9 !important;
}

#closeSideBar {
	margin-left:380px;
	}

	
	
/* PAGE STRUCTURE */

#wrapper {
	width:990px;
	}
	
#body {
	margin:0 0 0 30px;
	/*display:inline-block;*/
	height: 100%; /* fixes misplaced round corners */
	}
	
#body,
#body-inner {
	}
	
#body-top {
	background:url(../images/cheesebox-top.gif) no-repeat top;
	height:13px;
	padding-top:0;
	margin-top:0;
	width:940px;
	line-height:0;
	}
	
#body-bottom {
	background:url(../images/cheesebox-bottom.gif) no-repeat top left;
	height:14px;
	width:940px;
	}
	
#body-inner {
	margin:0;
	padding:0;
	/*border-left:1px solid #ffad33;
	border-right:1px solid #ffad33;*/
	
	overflow: hidden; 	/** these two lines stretch the  */
	width:100%;		/* cheesey border around the floating left div **/
	}
	
.popup {
	display:none;
	}

.text {
	padding:0 10px 10px;
	}
	
	
/* COLUMNS */

/* 	Each side of the column must have 2 classes,
	a side (left or right), and
	a width (for example: L1-3rd, Lhalf, L2-3rd)
	The opposite side must have the corresponding width,
	so if you've set your left column to L1-3rd, you right column
	should be R2-3rd (one third left, 2 thirds right)
*/
	
.left {
	float:left; /*TODO all working without this float?? No, right col on front page moves down without it */

	}
	
.right {
	padding-right:10px;

	}
	
.L1-3rd {
	width:270px;/*needs tweaks */
	}
.R2-3rd {
	margin-left:290px;/*needs tweaks */
	width:620px;
	}
	
.L2-3rd {
	width:620px;
	}
.R1-3rd {
	width:270px;
	margin-left:640px;
	}
	
.Lhalf {
	width:450px; /*needs tweaks */
	}
.Rhalf {
	margin-left:460px;
	}

.Lnearlyhalf {
	width:390px; /*needs tweaks */
	}
.Rnearlyhalf {
	margin-left:400px;
	}
	
	
	
	
	
/* Two column list */	
ul.twocol {
	width:600px;
	}
	
ul.twocol li {
	list-style:none;
	float: left;
	width: 260px; 
	margin: 0px 20px 0px 0px;
	}
	
ul.twocol li:before {
	content: "\003E \0020";
	}
	
br.twocol {
	clear:left;
	}
	
br.clear {
	clear:both;
	}
	
.colbox-head {
	background-color:#a32800;
	width:600px;
	}
	
.colbox-head h3 {
	display:inline;
	color:#fff;
	}
	
.colbox-body {
	width:600px;
	border-left: 2px solid #a32800;
	border-right: 2px solid #a32800;
	display:block;
	}
	



/* FOOTER */
#footer {
	position: relative;
	margin-top:10px;
	margin-bottom:15px;
	padding-right:20px;
	font-size:0.7em;
	text-align:right;
	}
	
#footer a  {
	color: #000;
	text-decoration:none;
	}

ul.links {
	text-align: left;
	margin-left:116px;
}
	
.links li {
	display:inline;
	padding-left: 10px;
	background: url(../images/bullet.gif) no-repeat;
	}
	
li.first  {
	background: none;
	}
	
	
	
/**ROUND BOXES**/
.outer-wine { /* Red outter border */
	background: #a32800; 
	padding: 8px; 
	/*width:400px;  what to do about this? */
	}
	
	
.outer-cheese { /* Big outter yellow border */
	background: #ffad33; 
	padding: 8px; 
	}

/* inner white box */
.robox-wine,
.robox-cheese {
	margin: 0; 
	background: #fff; 
	padding: 10px; 
	border:0; 
	/*zoom:1;*/
	}
	
.robox {
	margin: 0; 
	background: #a32800; 
	padding: 10px; 
	border:0; 
	}
	
.robox15 {
	margin: 0; 
	background: #f1dfd9; 
	padding: 10px; 
	border:0; 
	width:350px;
	}
	
.robox p {
	color:#fff;
	}
	
	
	
	
/* IMAGE BORDERS
	(square corners) */
	
img.border {
	border: 8px solid #a32800;
	}
	
	
	
	
/* TABLES */

table {
	/*width: 98%;*/
	text-align:left;
	margin:2px;
	border:2px solid #000;
	border-right:1px solid #000;
	border-spacing:0;
	}
	
thead th, td {
	padding: 0.2em 0.2em 0.2em 0.6em;
	}
	
tbody, thead {
	

	}
	
/*th {
	background-color: #a32800;
	color:#fff;
	}*/

th, td {
	padding: 6px 16px;
}

th {
	vertical-align:top;
	border-bottom: 2px solid #000;
	border-right: 1px solid #000;
}
	
td {
	vertical-align:top;
	font-size:0.8em;
	border-right: 1px solid #000;
	
	}
	
td.divider {
	border-right: 2px solid #a32800;
	}
	
caption {
	color: #808080;
	padding:1em 0;
	text-align:left;
	}
	
tfoot {
	font-size:80%;
	text-align: right !important;
	color: #808080;
	}
	
	
/** INSTRUCTION BOX **/

/* usage:
		<div class="instruction">
			Click on the piggy
		</div>
*/
.instruction {	
	background: url(../images/instruction-arrow.gif) no-repeat top left;	
	margin-left: 1.2em;	/* Indent 43pt */	
	margin-right:8px;
	margin-top:1em;
	padding-left: 18px;	
	padding-top:9px;	
	padding-bottom: 1.55em;	/* para after 25pt */	
	color:#808080;	
	width:250px;
	}

.audio .instruction,
.video .instruction,
.flash .instruction  {
	float:left;
}






.audio object,
.audio embed,
.video object,
.video embed,
.flash object,
.flash embed {
	margin-bottom:30px;
	/*margin-left:30px;*/
}

.video {
	display:block;

}

.noflash {
	padding:0;
	margin:0;
}

img.nojavascript, img.noflash  {
	position:relative;
left:-1em;
top:1em;
}


	
/** UNIQUE PAGE STYLINGS **/
	
/* Module Pg0 */
#titlescreen {
	padding-top:50px;
	padding-left:25px;
	}
	
#titlescreen h3 {
	padding-top:55px;
	color:#a32800;
	font-size:1.2em;
	}
	
#titlescreen h1,
#titlescreen h2 {
	font-size:2.4em;
	padding-bottom:0;
	}
	
#titlescreen h1 {
	padding-top:0;
	}
	
	
	
/*********************
	SWF-specific
***********************/

/* m1p1 */ /*
#m1p1_6 {
	margin-top:20px;
}
*/
/* m1p3 *//*
#m1p3_4, #m1p3_6, 
#m1p6_4, 
#m1p11_4,
#m1p20_4  {
	position:relative;
	left:350px;
	top:-110px;

}
*/

/* m1p10 */
#m1p10{
	position:absolute ;  
	width: 520px;
	height:430px; 
    left:430px;
    top:50px;
	margin:0px;
	padding:0px;
	background-color:#fff;
}


/* m1p13 */
#m1p13{
	position:relative;  
	width: 720px;
	height:420px; 
    left:200px;
    top:-200px;
	margin:0px;
	padding:0px;
	/*background-color:#fff;*/
}

/* m1p18 */

#m1p18_4,
#m1p18_8,
#m1p18_12,
#m1p18_16,
#m1p18_20,
#m1p18_24,
#m1p18_28 {
	display:inline;
}

/*
#m1p18_4{
	display:float;
	width: 200px;
	height:200px; 
   left:400px;
	top:50px;
}

#m1p18_6{
	position:absolute ;
	width: 200px;
	height:200px; 
    left:530px;
	top:50px;
}
#m1p18_8{
	position:absolute ;
	width: 200px;
	height:200px; 
    left:690px;
	top:50px;
}
#m1p18_10{
	position:absolute ;
	width: 200px;
	height:200px; 
    left:370px;
	top:250px;
}
#m1p18_12{
	position:absolute ;
	width: 200px;
	height:200px; 
    left:530px;
	top:250px;
}
#m1p18_14{
	position:absolute ;
	width: 200px;
	height:200px; 
    left:690px;
	top:250px;
}*/



/******* Login and Registration pages ***********/
.login, .module0 {
	padding:1em;
	}
	
.login #header, .module0 #header {
	padding-bottom:2em;
	}
	
.login form ul {
	padding-left:0;
	}

.login li {
	list-style:none;
	
	}

ul.showbullets li {
	list-style:disc !important; /*overwrites any list-style:none that I can't control (e.g. trainer reg)*/
}
ul.showbullets {
	padding-left:2em !important;
}
	
.login ul.tab-nav li,
.module0 ul.tab-nav li {
	margin-bottom:-4px;
	margin-left:-30px;
	padding:0;
}
	
.login .redbox,
.module0 .redbox {
	border:6px solid #A32800;
	padding:1em;
	margin-bottom:1em;
}

.login .termsofuse {
	height:300px;
	overflow-y:scroll;	
	font-size:85%;
	}

.login p,
.module0 p {
	padding-bottom:1em;
	}

.login a {
	font-weight:bold;
	text-decoration:none;
}

.login label {
	display: block;
	float:left;
	width:12em;
}

.login .note,
.module0 .note {
	color:#808080;
	margin-left:11em;
}

.login .Lhalf,
.module0 .Lhalf {
	padding-top: 35px;
	}
	
.login .left img {
	margin: 15px;
	}

.login .Lhalf img {
	padding-left:2.5em;
	padding-bottom:2em;
	}
	
li.disabled * {
	color: #d9d9d9;
	}

.forms-field-required {
	color:#a32800 !important;
}

.forms-validation-message-popup td {
	border:none;
}

form #messages {
	font-size:0.95em;
	color:#333;
}

table.forms, table.forms td {
	border:0;
}

table.forms td {
	padding-left:0;
}
	
div.helpfulinfo {
	position:absolute;
	right:85px;
	top:350px;
	width:160px;
	background-color:#d9d9d9;
	padding:1em;
	}

/*** form buttons  */

      .btn-submit {
	  width: 74px;/* Width of button image */
      height: 24px;/* Height of button image */
      padding: 30px 0 0;
      margin: 0;
	  margin-left:165px;
      border: 0;
      background: transparent url(resource/images/btn-submit.png) no-repeat;
      overflow: hidden;
      cursor: pointer; /* hand-shaped cursor */
      cursor: hand; /* for IE 5.x */
	  text-align:right;
      }

	.form .indent {
		margin-left:50px;
	  }


/* input text */

.textinput .instruction {
	float:left;
	margin-top:0;
	padding:top:0;
}

.textinput form {
	padding-top:1em;
}


/* special template stuff */

/*singlecolumn-imagebtm*/
.btmimg img {
	margin:0; /*reste margins*/
	padding:0;
	margin-bottom:-1em;
}


.resources a {
	text-decoration:underline;
	font-weight:normal; /* this overrides things that should actually be bold. See below for fix */
}

.resources strong a {
	font-weight:bold; /* so the bold things stay bold */
}


/*********** My Learning Area *******************/

.mylearning #tab-nav {

}

.mylearningbox {
	padding:15px;
}

.mylearning a {
	text-decoration:none;
}

.mylearning a:hover {
	text-decoration:underline;
}

div.myfavourites, div.search, div.myprogress {
	margin-top:15px auto auto 0;
	padding:15px;
	border: 1px solid #a32800;
}

div.myfavourites {
  height:480px;
  overflow-y:scroll;
}

div.search {
  height:225px;
  overflow-y:scroll;
}

div.myprogress {
  height:225px;
  overflow-y:scroll;
}

.mylearning .title a{
	font-size:100%;
	font-weight:bold;
	text-decoration:underline;
}

.favourite {
	/*border: 1px solid #ff00ff;*/
	margin-bottom:5px;
}

.favourite p {
	padding-bottom:3px;
}

form.search span {
	padding-left:5px;
	font-size:10px;
}

.newwindow {
	width: 100% !important; /* overwrite #wrapper static width */
}

.newwindow h3 {
	color:#808080;
	font-size:1em;
}

.newwindow li {
	list-style-type: disc !important;
}



/*******************
 Assessment 
********************/


body.assessment ul {
	padding:1em;
}

body.assessment input {
	margin-right:0.4em;
	/*float:left; *//* line wrapping around checkbox fix*/
}

.assessment h3 {
	margin-bottom:0;
	padding-bottom:0;
}

.assessment table * {
	/* style reset */
	border:0;
	padding:0;
	margin:0;
	border:1px solid #000;
}

.assessment table th {
	font-size:0.8em;
	font-weight:normal;
}

.assessment table th.matrix-option {
	text-align:center;
	width:75px;
}

.assessment table th.matrix-question {
	padding:0.2em;
}

.assessment table td {
	vertical-align:middle;
	text-align:center;
}

.learning-outcomes {
	border: 2px solid #808080;
	background-color:#d9d9d9;
	padding: 1em;
	margin:1em;
}

.assessment .learning-outcomes h3 {
	color:#000000;
}

.assessment .question {
	margin:20px 0;
}

p.questionnum {
	font-weight:bold;
}

.assessment ul {
	padding-bottom:0;
}

li.answer {
	list-style-type:none !important;
}

ul.answer-list li.answer {
	list-style-type:disc !important;
}


.feedback h2,
.feedback .question {
	padding-bottom:0;
	margin:0 auto;
}

body.assessment div.feedback {
	margin-bottom:1em;
}




/**********************
* Trainer Registration
***********************/

textarea.field {
  height: 100px;
  width: 300px;
}