@charset "utf-8";
/* CSS Document */

/* 
 * HTML5 ✰ Boilerplate
 *
 * What follows is the result of much research on cross-browser styling. 
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 *
 * Detailed information about this CSS: h5bp.com/css
 * 
 * ==|== normalize ==========================================================
 */

	
/* =============================================================================
   Tondo font definitions
   ========================================================================== */
	  
@font-face {
    font-family: 'tondo bold';
    src: url('../font/Tondo_Std_Bd-webfont.eot');
    src: url('../font/Tondo_Std_Bd-webfont.eot?#iefix') format('embedded-opentype'),
         url('../font/Tondo_Std_Bd-webfont.woff2') format('woff2'),
         url('../font/Tondo_Std_Bd-webfont.woff') format('woff'),
         url('../font/Tondo_Std_Bd-webfont.ttf') format('truetype'),
         url('../font/Tondo_Std_Bd-webfont.svg#tondobold') format('svg');
    font-weight: normal;
    font-style: normal;

}


@font-face {
    font-family: 'tondo medium';
    src: url('../font/Tondo_Std_Md-webfont.eot');
    src: url('../font/Tondo_Std_Md-webfont.eot?#iefix') format('embedded-opentype'),
         url('../font/Tondo_Std_Md-webfont.woff2') format('woff2'),
         url('../font/Tondo_Std_Md-webfont.woff') format('woff'),
         url('../font/Tondo_Std_Md-webfont.ttf') format('truetype'),
         url('../font/Tondo_Std_Md-webfont.svg#tondomedium') format('svg');
    font-weight: normal;
    font-style: normal;

}


@font-face {
    font-family: 'tondo';
    src: url('../font/Tondo_Std_Rg-webfont.eot');
    src: url('../font/Tondo_Std_Rg-webfont.eot?#iefix') format('embedded-opentype'),
         url('../font/Tondo_Std_Rg-webfont.woff2') format('woff2'),
         url('../font/Tondo_Std_Rg-webfont.woff') format('woff'),
         url('../font/Tondo_Std_Rg-webfont.ttf') format('truetype'),
         url('../font/Tondo_Std_Rg-webfont.svg#tondoregular') format('svg');
    font-weight: normal;
    font-style: normal;

}


/* =============================================================================
   HTML5 display definitions
   ========================================================================== */
    



a { outline: none;}

article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; }
audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; }
audio:not([controls]) { display: none; }
[hidden] { display: none; }

/* =============================================================================
   Base
   ========================================================================== */

/*
 * 1. Correct text resizing oddly in IE6/7 when body font-size is set using em units
 * 2. Force vertical scrollbar in non-IE
 * 3. Prevent iOS text size adjust on device orientation change, without disabling user zoom: h5bp.com/g
 */

html { font-size: 100%; overflow-y: scroll; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; margin:0 auto;}

body { margin:0 auto!important;  font-size: 0.87em; line-height: 1.5; background-color:#949499;}

body, button, input, select, textarea { font-family: tondo,"Myriad Pro",Myriad,arial,helvetica,sans-serif; color: #222; }

/* 
 * Remove text-shadow in selection highlight: h5bp.com/i
 * These selection declarations have to be separate
 * Also: hot pink! (or customize the background color to match your design)
 */

::-moz-selection { background: #00ADBE; color: #fff; text-shadow: none; }
::selection { background: #00ADBE; color: #fff; text-shadow: none; }


/* =============================================================================
   Links
   ========================================================================== */

a { color: #3A3A3A; text-decoration: none; outline:none;  }

a:hover {font-weight:bold!important;}
.folder { cursor:pointer; color:black!important; }
a:focus { outline: thin dotted; }

/* Improve readability when focused and hovered in all browsers: h5bp.com/h */
a:hover, a:active { outline: 0; }

/* =============================================================================
   Typography
   ========================================================================== */

abbr[title] { border-bottom: 1px dotted; }

b, strong { font-weight: bold; }



dfn { font-style: italic; }

hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }

ins { background: #ff9; color: #000; text-decoration: none; }

mark { background: #ff0; color: #000; font-style: italic; font-weight: bold; }

/* Redeclare monospace font family: h5bp.com/j */
pre, code, kbd, samp { font-family: monospace, monospace; _font-family: 'courier new', monospace; font-size: 1em; }

/* Improve readability of pre-formatted text in all browsers */
pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; }

q { quotes: none; }
q:before, q:after { content: ""; content: none; }

small { font-size: 85%; }

/* Position subscript and superscript content without affecting line-height: h5bp.com/k */
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sup { top: -0.5em; }
sub { bottom: -0.25em; }


/* =============================================================================
   Lists
   ========================================================================== */

ul, ol { margin: 1em 0; padding: 0 0 0 40px;}
ul li	{padding-bottom: 3px;}
dd { margin: 0 0 0 40px; }
nav ul, nav ol { list-style: none; list-style-image: none; margin: 0; padding: 0; }


/* =============================================================================
   Embedded content
   ========================================================================== */

/*
 * 1. Improve image quality when scaled in IE7: h5bp.com/d
 * 2. Remove the gap between images and borders on image containers: h5bp.com/e 
 */

img { border: 0; -ms-interpolation-mode: bicubic; vertical-align: middle; }

/*
 * Correct overflow not hidden in IE9 
 */

svg:not(:root) { overflow: hidden; }


/* =============================================================================
   Figures
   ========================================================================== */

figure { margin: 0; }


/* =============================================================================
   Forms
   ========================================================================== */

form { margin: 0; }
fieldset { border: 0; margin: 0; padding: 0; }

/* Indicate that 'label' will shift focus to the associated form element */
label { cursor: pointer; }

/* 
 * 1. Correct color not inheriting in IE6/7/8/9 
 * 2. Correct alignment displayed oddly in IE6/7 
 */

legend { border: 0; *margin-left: -7px; padding: 0; }

/*
 * 1. Correct font-size not inheriting in all browsers
 * 2. Remove margins in FF3/4 S5 Chrome
 * 3. Define consistent vertical alignment display in all browsers
 */

button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline; *vertical-align: middle; }

/*
 * 1. Define line-height as normal to match FF3/4 (set using !important in the UA stylesheet)
 * 2. Correct inner spacing displayed oddly in IE6/7
 */

button, input { line-height: normal; *overflow: visible; }

/*
 * Reintroduce inner spacing in 'table' to avoid overlap and whitespace issues in IE6/7
 */

table button, table input { *overflow: auto; }

/*
 * 1. Display hand cursor for clickable form elements
 * 2. Allow styling of clickable form elements in iOS
 */

button, input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; -webkit-appearance: button; }

/*
 * Consistent box sizing and appearance
 */

input[type="checkbox"], input[type="radio"] { box-sizing: border-box; }
input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; }
input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }

/* 
 * Remove inner padding and border in FF3/4: h5bp.com/l 
 */

button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }

/* 
 * 1. Remove default vertical scrollbar in IE6/7/8/9 
 * 2. Allow only vertical resizing
 */

textarea { overflow: auto; vertical-align: top; resize: vertical; }

/* Colors for form validity */
input:valid, textarea:valid {  }
input:invalid, textarea:invalid { background-color: #f0dddd; }
/* IE6 Hover Fix 

body							{ behavior: url("../js/libs/csshover3.htc"); }				
*/

/* =============================================================================
   Tables
   ========================================================================== */

table { border-collapse: collapse; border-spacing: 0; }
td { vertical-align: top; }


/* ==|== primary styles =====================================================
   Author: Michael Baird 
   ========================================================================== */
   #breadcrumb a{color:red!important;}
	
   a{color:#00A5AE;}
   
   /* == Container Styles == */
   
   
   
/*Glossary Content*/

.glossaryBG{
	width: 100%;
	height: 100%;
	background-color: hsla(0,0%,11%,0.79);
	z-index:9900;
	position:absolute;
	top:0px;
	display:none;

}


.glossaryArea{
	background-image: url(../images/container/glossaryBG.png);
	width: 852px;
	height: 637px;
	z-index: 9995;

}

.closeGlossary{position:relative; float:right; margin-top:28px; cursor:pointer; margin-right:40px;}

.closeGlossary img:hover{opacity:0.8; }


.glossaryTitle{  
	color: #FFFFFF;
    float: left;
    padding-left: 30px;
    padding-top: 10px;
    position: relative;
    width: 150px;
	}
	
	
	.glossaryContent{
		
 	
    margin-top: 94px;
    padding-left: 28px;
    padding-right: 28px;
    position: relative;
		
	}


/*Glossary end*/
   
   
#mainMenu{background:#fff; z-index:999; width:350px; height: 469px;  margin-top:-470px; position:absolute; left:0px; border-right: 5px solid #00A3AD; }
#mainMenu li{ list-style-type:none;font-weight:bold; color:#555; margin:0px; line-height: 20px;}
#mainMenu p{line-height:17px;}
#mainMenuList p{background-color:#00A3AD; color:#ffffff!important; position:relative; left:-40px; width:320px; padding:15px; top:-20px;}
#m_close{position:absolute; right:10px; top: 17px; background-image:url(../images/container/closeMenu.png); width:15px; height: 15px; z-index:999999; cursor:pointer;}


.smallest {
    font-size: 14px;
	color: #4a4a4a!important;
	
}

.medium {
    font-size: 16px;
	color: #4a4a4a!important;
}

.largest {
    font-size: 18px;
	color: #4a4a4a!important;
}
   
   


#container{

	background-image:url(../images/container/containerbg.png);
	background-repeat:no-repeat;
	width:998px; 
	height:658px;
	position: relative;
	margin: 20px auto 0;
	
		}
	
#header{
	
	background-image:url(../images/container/header.png);
	background-repeat:no-repeat;
	width:991px;
	height:100px;
	position: absolute;
	left: 0px;
	top: 4px;
	}
	
	

#exitBtn{
	
background-image: url(../images/container/exitbtn.png);
background-repeat:no-repeat;
width:71px; 
height:28px;	
position: absolute;
right:40px;
top:8px;
cursor: pointer;
border-radius: 5px;
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;

border: none;
}
		

#courseTitle{
	
	position:absolute;
	right:40px;
	bottom: 7px;	
  	font-size: 24px;
	font-family: "tondo medium","Myriad Pro",Myriad,arial,helvetica,sans-serif;  	
	color:#58585a;
	width:auto;
	text-align:right;
}
	
	
#footer{
	width:991px;
	height:51px;
	position:absolute;
	bottom: -52px;
	}
	
	
#topBar{
	
	width:990px;
	height:29px;
	background-color: #ffffff;
	position:absolute;
	left:4px;
	top:104px;
	
}



#breadcrumb{
	
	width: 800px;
	height:25px;
	position:absolute;
	left: 27px;
	padding-top:4px;
  	font-size: 14px;
	font-family: tondo,"Myriad Pro",Myriad,arial,helvetica,sans-serif;  	
  	font-weight: normal;

}

#access{
	
	width:50px;
	height:25px;
	position:absolute;
	right:35px;	
	padding-top:1px;
	font-family: tondo,"Myriad Pro",Myriad,arial,helvetica,sans-serif;  	
	color: #4a4a4a;
	font-weight:bold;
	text-decoration:underline;
			
}



#content{
	
	height:468px;
	width:990px;
	position:absolute;
	border-top: 1px solid #022d33;
	border-bottom: 1px solid #022d33;
	left:4px;
	top:137px;
	background-color:#FFFFFF;
		}
		
		
#mainContentArea{
	width:990px;
	height:470px;
	position:relative;
	
}


#fullWidthContentArea{
	width:928px;
	height:467px;
	position:relative;
	padding-left:28px;
	padding-right:28px;
	padding-top:0px;
}



#leftContent{
float: left;
position:relative;
width:537px;
height: 467px;	
padding-left: 28px;		
}

#leftContent_full {
    float: left;
    height: 467px;
    padding: 0 28px;
    position: relative;
    width: 944px;
}

#leftContentIllustration{

float: left;
position:relative;
width:510px;
height: 467px;	
padding-left: 28px;	
	
}


#rightContent{
position:relative;
float:right;
width: 394px;
height: 467px;	
}

#rightContentIllustration{
position:relative;
float:right;
width: 424px;
height: 467px;	
}
	
	
	
#progressBar{
	
	background-image:url(../images/container/progressBar.png);
	background-repeat:none;
	width: 98px;
	height:26px;
	position: absolute;
	bottom: 13px;
	left: 450px;
	display: none;
}

#pgress{
	
	color:#FFFFFF;
	padding-left:6px;
	padding-top: 4px;
	
}


#menuBtn{
	
	background-image:url(../images/container/menuBtn.png);
	background-repeat:no-repeat;
	background-size: 100%;
	width: 71px;
	height: 26px;
	position: absolute;
	bottom: 13px;
	left:27px;
	border-radius: 5px;
	border: none;
	}
	
	
#glossaryBtn{
	background-image:url(../images/container/GlossaryBtn.png);
	background-repeat:no-repeat;
	width: 90px;
	height: 26px;
	position:absolute;
	bottom: 13px;
	left: 115px;	
	border-radius: 5px;
	border: none;
}


#backBtn{
	
	background-image:url(../images/container/backBtn.png);
	background-repeat:no-repeat;
	width: 74px;
	height:26px;	
	position: absolute;
	right:125px;
	bottom: 13px;	
	border-radius: 5px;
	border: none;
}



#nextBtn{
	
	background-image:url(../images/container/nextbtn.png);
	background-repeat:no-repeat;
	width: 71px;
	height:26px;	
	position: absolute;
	right:40px;
	bottom: 13px;		
	border-radius: 5px;
	border: none;
	
}

#exitBtn:hover, #menuBtn:hover, #glossaryBtn:hover, #nextBtn:hover,  #backBtn:hover  {
  opacity:0.9;
  filter:alpha(opacity=90); /* For IE8 and earlier */	
  cursor: pointer;
}
	
	
#titlePage{

background-image:url(../images/topic0/titlePageImage.jpg);
background-color:#FFFFFF;
width: auto;
height: 465px;
margin-top:1px;
	
	
}




#courseTitlePage {
    bottom: 45px;
    color: #fff;
    font-family: "tondo medium","Myriad Pro",Myriad,arial,helvetica,sans-serif;
    font-size: 24pt;
    left: 633px;
    line-height: 40px;
    padding: 15px;
    position: absolute;
    width: 270px;
}




.pageTitle{	
color:#00A3AD;
font-size:20px;
margin-left: 0px !important;
}


.instruction{

color:#00A3AD;
font-size:14px;
font-weight:bold;	
	
	
}


.causesSightLossBg {
    background-image: url("../images/causesSightlossBg.jpg");
    background-repeat: no-repeat;
    color: #FFFFFF;
    font-size: 18px;
    height: 70px;
    margin-left: 120px;
    margin-top: 30px;
    padding-left: 30px;
    padding-top: 4px;
    width: 630px;
}

.text{width:362px;}
.uncorrectedText{position:relative; float:left; width:188px; margin-left: 0px; margin-top: 10px; color:#00A3AD; font-weight:bold;}
.correctedText{position:relative; float: right; margin-top:10px; margin-right: 0px; color:#00A3AD; font-weight:bold;}

h1{font-size:1.7em;}
h2{font-family: tondo,"Myriad Pro",Myriad,arial,helvetica,sans-serif; color:#00A3AD;font-size:1.6em;}
h3{
color:#00A3AD;
font-size:1.1em;
font-weight:bold;
font-family: tondo,"Myriad Pro",Myriad,arial,helvetica,sans-serif;	
}

.checkBtn{   
	background-image: url("../images/checklistBG.jpg");
    background-repeat: no-repeat;
    display: block;
    height: 58px;
    padding-left: 0;
    padding-top: 8px;
    text-align: center;
    width: 245px;
	color:#ffffff;
}

.transcriptBtn{
	background-image:url('../images/transcriptBG.png');
	background-repeat:no-repeat;
	display:block;
	height:32px;
	width:138px;
	padding-left:20px;
	padding-top:7px;
	margin-left:581px;
	margin-top:5px;
	color:#fff;
	cursor:pointer;
	position:absolute;
}

div.transcriptBtn:hover{
	    opacity: 0.9;
    filter: alpha(opacity=90); /* For IE8 and earlier */
}

.effectsCataract{ width:563px; height:344px; background-repeat:no-repeat; position:absolute; top:84px; left:395px; font-family: tondo,"Myriad Pro",Myriad,arial,helvetica,sans-serif; font-size:14px;}
.normalVision{position:absolute; top: 161px;left:0px;}
.withCataract{position:absolute; top: 161px;left:287px;}
.blindsopen{position:absolute; top:346px; left:0px;}
.blindsclosed{position:absolute; top:346px;left:287px;}

.smallButton{float:left; margin-right: 10px; width:130px; height:38px; overflow:hidden; background-image:url(../images/buttonSml.jpg); text-align: center;padding-top:10px; color:#ffffff; font-size:16px; font-weight:bold; cursor:pointer;}

.bigButton{float: left; width:156px; height:38px; overflow:hidden; background-image:url(../images/buttonBig.jpg); text-align: center; color:#ffffff;padding-top:10px; font-size:16px; font-weight:bold; cursor:pointer;}



.smallButton:hover, .smallButton:active{background-image:url(../images/buttonSmlHover.jpg);}

.bigButton:hover, .bigButton:active{background-image:url(../images/buttonBigHover.jpg);}

.smallButton p{padding-left:35px; padding-top:10px; margin-top:0px;}

.bigButton p{padding-left:35px; padding-top:10px; margin-top:0px;}

.hidden {position:absolute; left:-10000px; top:auto; width:1px; height:1px; overflow:hidden;}