@import url(http://fonts.googleapis.com/css?family=Trykker);
@import url(http://fonts.googleapis.com/css?family=Roboto:400,900);
@import url(http://fonts.googleapis.com/css?family=Roboto+Condensed:400,700&subset=latin,latin-ext);

body { 
	background-color:#f8f8f8;
	background-image:url('../commonFiles/bg_body.png') ;
font-family: Arial, Helvetica, sans-serif; 
} 

.reflect{
	border-left:2px #D9302B solid;
	padding-left:10px;
}

#content{ 
width: 750px; 
line-height:125%;
background-color: #ffffff; 
 width:750px; 
 margin-left:105px; 
 margin-top:0px; 
 margin-right:0px; 
 margin-bottom:0px; 
 padding-left:10px;
 padding-right:5px;
 font-family: Verdana, Geneva, Tahoma, sans-serif;
} 
/*font-family: 'Trykker', serif;*/
/* font-family:"Century Gothic";*/

.bannerCredit{
	font-size:.6em;
	color:black;
	margin-top:-5px;
	
}

#learningOutomesDiv{
	position:relative;
	width:450px;  
	
}

.learningOutcomeHeadingTabs{
	margin-left:10px; 
	position:absolute; 
	top:25px; 
	width:120px;
	color:#007795; 
	font-size:1.25em; 
	font-weight: 900;
	font-family: 'Roboto', sans-serif;
	border:0px red solid; 
}

.learnOutcomeIcon{
	width:71px;
}

.abecedarianBottomNav{
	position:absolute;
	bottom:20px;
	right:340px;
	font-size:.8em;
}

/* thisnk I dropped this for pageBottomNavigation below
.abecedarianBottomLinks{
	
}

a.abecedarianBottomLinks:hover{
	background-color:#D2E2EC;
} 
*/
#accordionContainer{
	
	border:0px red solid;
	padding:0px;
	margin-right:10px;	
	margin-left:10px;
}
.accordionHeader{

	border:0px black solid;
	margin-bottom:5px;
	font-size:1.0em;
	font-weight:bold;
	padding-left:30px;
	background-image:url('http://lor.rrc.mb.ca/items/694dbc11-b05f-4279-9e4f-40009ec79986/1/nextTriangle.png');
	background-position:left top;
	background-repeat:no-repeat;
}
.accordionContent{
	border-bottom:0px #707070 solid;
	padding-left:20px;
	padding-right:10px;
	padding-bottom:10px;
	display:none;
	overflow:hidden;
}

.accordionGameLinks{
	color:#D9302B;
	text-decoration:underline;
}



.quoteRight{
	border-left:2px #007795 solid;
	margin: 0px 0px 10px 10px;
	padding: 2px 5px 5px 10px;
	width:220px;
	font-style:italic;
	font-weight:bold;
	font-size:.9em;
	float:right;
}

.quoteLeft{
	border-left:2px #007795 solid;
	margin: 0px 10px 10px 0px;
	padding: 2px 5px 5px 10px;
	width:220px;
	font-style:italic;
	font-weight:bold;
	font-size:.9em;
	float:left;
}


.icons{
	float:left; 
	margin-right:5px;"
}

.rightSideBar{
	position:absolute;
	left:730px;
	width:220px;
	padding:5px;
	border: 2px #007795 solid;
	background-color:#D2E2EC;
}


.scenario{
	font-size:1em;
	border-left: 3px #007795 solid;
	padding-left:10px;
	padding-right:5px;
	padding-top:0px;
	padding-bottom:0px;
	margin-bottom:20px;
	margin-left:15px;
	float:right;
	width:300px;
}

.scenario .secondHeading{
	margin-top:-0px;
}

.captionText{
	font-size:.85em;
	line-height:100%;
	font-family:Arial, Helvetica, sans-serif;
}

#header{
	position:relative;
	padding:0px;
	margin:0px;
}
#headerText{
	position:absolute;
	z-index:2;
	left:15px;
	bottom:10px;
	font-family: 'Yanone Kaffeesatz', sans-serif;
	font-weight:bold;
	font-size:1.4em;
	color:white;
	text-shadow:1px 1px #000000;
}
#headerTextLarge{
	position:absolute;
	z-index:2;
	left:15px;
	bottom:40px;
	font-family: 'Roboto Condensed', sans-serif;
	font-weight:bold;
	font-size:4em;
	color:#EFEFEF;
	text-shadow:2px 2px #000000;
}


.iframeContent{ /* to control the actual content of iframe html pages */ 
 background-color: #D2E2EC; 
/*  background-color: #E8F2FC;   mathes light blue highlight on content map left side of page */
} 


/* iFrame divs */

#iframeLeftNav{
 position:fixed; 
 left: 0px;
 top:0px;
 width: 30px;
 height: 200px;
 padding: 0px; 
  border:0px black solid;


}
#iframeRightNav{
 position:fixed; 
 left: 710px;
 top:0px;
 width: 30px;
 height: 200px;
 padding: 0px; 
  border:0px black solid;
}
#iframeGraphic {
 position:fixed;
 top:0px;
 left:30px;
 width: 220px;
 height: 200px;
 margin-top: 10px;
 font-size: .8em;
}
#iframeText{
 position:fixed; 
 top:0px;
 left: 250px;
 height: 200px;
 width: 440px;
 margin-top:10px;
}
#iframeBigContent{
 position:fixed; 
 top:0px;
 left: 30px;
 height: 200px;
 width: 620px;
 margin-top:10px;
 padding-left: 5px;
 padding-right: 5px;
}
.iframeNavButtons {
 position:fixed; 
 top: 75px;	
 margin-left:5px;
 margin-right:5px;
 border:0px black solid;
}

img.iframe {
 border-style:solid; 
 border-width:2px; 
 border-color: #007795;
 margin-bottom: 5px;
}
/*iframe divs above */




/* Tooltip */
/* for jQuery tool tip function */
#toolTipDiv {
	color: #ffffff;
	position: absolute;
	display: none;
	padding: 20px 20px 20px 70px;
	max-width: 200px; /* need i.e. rule */
	background-color: #007795;
	-webkit-border-radius: 12px;
	-moz-border-radius: 12px;
	border-radius: 12px;
	background-image: url('http://lor.rrc.mb.ca/items/694dbc11-b05f-4279-9e4f-40009ec79986/1/megan74x60.png');
	background-repeat:no-repeat;
 	background-position:bottom left; 
 	font-style:italic;
 	font-size:.8em;
 	font-family:Arial, Helvetica, sans-serif;
}

a.tooltip:link {color:#545454;} 

.tooltip{
	text-decoration:none;
	border-bottom:1px red dotted;
	color:red;
}

#pageBottomNavigation{
	text-align:center;
	color:blue; 
	margin-top:30px;
}

a#pageBottomNavigation:hover{ /* not working?  */
	background-color:#D2E2EC;
} 

.button{
	border:2px #007795 solid;
	background-color:#D0D0D0;
	border-radius: 5px;
}

a {
	color: #D9302B;
}


h1 { 
color: #007795; 
} 

hr { 
width: 700px;
color: #007795; 
}   

li {
	margin: 10px 0;
}

li.noSpace{
	margin:1px 0;
}


#centreSection { 
background-color: #ffffff; 
width: 650px; 
margin-left:250px; 
margin-right:auto; 
} 

.bordered { 
border-style:solid; 
border-width:2px; 
border-color: #007795;
} 

.topHeading { 
color:#007795; 
font-size:2.0em; 
font-weight: 900;
font-family: 'Roboto', sans-serif;
} 

.secondHeading { 
color:#D9302B; 
font-size:1.25em; 
font-weight: 900;
font-family: 'Roboto', sans-serif;
} 

.secondHeadingBlue { 
color:#007795; 
font-size:1.25em; 
font-weight: 900;
font-family: 'Roboto', sans-serif;
} 

.thirdHeading{
	font-weight: 900;
	font-family: 'Roboto', sans-serif;
	font-style:italic;
	margin-top:25px;
}

.floatRight{ 
float:right; 
border-color: #007795;
border-style:solid; 
border-width:2px; 
margin-top:0px; 
margin-bottom:5px; 
margin-right:0px; 
margin-left:10px; 
} 

.floatRightNoBorder{ 
float:right; 
border-style:solid; 
border-width:0px; 
margin-top:0px; 
margin-bottom:5px; 
margin-right:0px; 
margin-left:15px; 
} 

.floatLeft{ 
float:left; 
border-style:solid; 
border-color: #007795;
border-width:2px; 
margin-top:0px; 
margin-bottom:5px; 
margin-right:10px; 
margin-left:0px; 
}

.popUpButtons { /* these may need some revision */
 background-color: #007795;
 color: #ffffff;
 padding-left:10px;
 padding-right:10px;
 text-align:center;
 height:25px;
 border-radius: 5px;
 font-weight:bold;
 font-size:.85em;
 margin-right: 5px;
 border-top:0px;
 border-left:0px;
 box-shadow: 5px 5px 10px #888888;
}
	
.comment{
  background-color:#FFFFCC;
}

/* --- CSS FOR LIGHTBOX ELEMENTS BELOW ---  */
#lightBoxScreen{ /* creates lightbox effect */
	visibility:hidden;
	opacity:0.90; 
	position:fixed; 
	width:100%; 
	height:100%; 
	margin-top:-10px; 
	margin-left:-10px; 
	background-color:#FFFFFF; /* white looks better than black in D2L */
	z-index:10;	
}
/* apply lightBoxItem class to each element to be displayed in lightbox effect */
.lightBoxItem{ 
	  visibility:hidden;
	  display:none;
	  position: absolute; 
	  top:0;
	  bottom:0; 
	  left: 0; 
	  right:0; 	 
	  margin-left:auto;
	  margin-right:auto;
	  border:0px;
	  padding:0px;	 
	  z-index:20;
	  background-color:white;
	  border:4px black solid;	
}
.closeLightboxButton{
	position: absolute;
	left:-5px;
	top:-27px;
	z-index:30;
	background-color:black;
	color:white;
}
/* --- CSS FOR LIGHTBOX ELEMENTS ABOVE ---  */