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

body {
	margin: 0; /* zero the margin and padding of the body element to account for differing browser defaults */
	padding: 0;
	color: #000000; /* Chrys - I left out a background color, to make eCampus use the default grey, and eliminate one set of borders.  */
	font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
	font-size: 95%;
	width: 98%;
	/*overflow:hidden;  This eliminates the extra scrollbars in Firefox in eCampus */
}

a:hover {background-color: #FF0;}

/* There is no longer a container, just mainContent */

#mainContent {
	z-index:1;
	padding:5em 3.5em 1em 2em;
	line-height: 1.5em;
	text-align: left;
	/*letter-spacing:0.05em;  Disabled by Clint*/ 
	background:url(images/GLO101-Background.png) no-repeat top right #ffffff;
	/* background-size:contain; */ /* This lets the background fill up the page width */
	background-color: #ffffff;
	max-width: 800px !important; /* Chrys - To aid with different screen resolutions. YOUR BACKGROUND IMAGE SHOULD BE THE SAME WIDTH AS THIS NUMBER. Otherwise you will have strange problems. */
	border: 1px solid #000;
	margin:5px;  /* Chrys - I minimized the amount of margin, because the LMS puts a margin on the left and right by default, and I wanted to keep precious screen space. However, I kept a small one, because the back and forward button sit on the container edge without it */
	}



.designer-note {  /* Chrys - My tactic to get SME attention during reviews. Comments from the ID to the SME */
	font-size: 150%;
	color:#F00;
	font-weight: normal;
	letter-spacing: 0.04em;
	background-color:#FCC;
	}

h1 {font-family:Georgia, "Times New Roman", Times, serif;  }
h2, h3, h4, h6, h5 {font-family: Arial, Helvetica, sans-serif;}
h1 {
	font-size: 180%; 
	line-height: normal;
	color: #3e77b9; /* blue */ 
	letter-spacing:.01em;
	font-weight:bold;
	padding: 2px 0 5px 0;

	}
h2 {
	font-size: 135%;
	line-height: normal;
	color:#576976; /*blue-ish*/
	letter-spacing:.01em;
	font-weight: bold;
	margin-top: .08em; 
	/*margin-bottom: 0; */
	}
h3 {
	font-size: 120%;
	line-height: normal;
	color: #d85d54; /* dark gold */
	font-style: normal;
	font-weight: bold;
	letter-spacing:.03em;
	}
h4 {
	font-size: 130%;
	color: #002741; /* blue */
	font-weight: normal;
	}
	
h5 {
	font: normal .8em Verdana, Geneva, sans-serif;
	color: #000000;
	vertical-align: text-bottom;
	letter-spacing: normal;
}	
h6 {font: normal .4em times;
	font-size: 120%;
	line-height: 1.4em;
	color: #003366; /* blue */
	font-style: italic;
	font-weight: bold;}

img {
	max-width:100%; /* Chrys - To make images resize to match browser width */
	height:auto; /* Chrys - To make images resize to match browser width */
}

iframe {
   overflow: hidden !important; /* Chrys-This makes content like Captivates or Articulates that are embedded in an iframe appear sans scrollbars, no matter what else is going on in your page. */
}

/* This makes any iframe responsive, as long as you delete the height and width that a site like YouTube sticks into the embed code. Put the iframe inside a div, and give the div this class. -Chrys  */
.responsive_iframe {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 35px;
    height: 0;
    overflow: hidden;
}
.responsive_iframe iframe {
	position: absolute;
	top: 1px;
	left: 2px;
	width: 95%;
	height: 95%;
}

/* This next style is for anything you want people with a screenreader to hear, but that you do not want people without a screenreader to see. */
.screenreader {
	position:absolute;
	left:-1000px;	
}

/* The next three styles control the footer. */
#footer {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 100%;
	color: #000000;
	max-width: 1190px !important; /* Chrys - To aid with different screen resolutions */
	min-height: 1em;
	padding-top:1em 0.25em 0.25em 0em;
	margin:5px;
} 
#footer a {   /* This changes the link color only in the footer */
	color:#c26738;	
}

/* For decorated activities checklist. Replace the checkbox.png image with whatever you like, and give the ul this class. */
.checklist {
	list-style-type:none !important;	
}
.checklist ul {
	list-style-type:none !important;	
}
.checklist li 
{ 
    list-style-image:url(../images/checkbox.png); 
    list-style-position: inside;
	margin-bottom:5px;
}

/* This is to give something like a blockquote or div of text extra emphasis. Only use this sparingly, for very important points. */
.emphasis {
	padding-top:15px 15px 5px 20px;
	line-height: 168%;
	color: #E35205;
	font-style:oblique;
	letter-spacing: 0.04em;	
}

/* left floating div for just images, automatically formats the captions. */
.l {
	float: left; 
	padding-top: 15px 15px 5px 5px;
	font-size: 82%;
	line-height: 168%;
	color: #E35205;
	font-style: italic;
	letter-spacing: 0.04em;	
	max-width: 25%;
}
.l img {
	max-width: 100%;
}

/* right floating div for just images, automatically formats the captions. */
.r {
	margin:15px;
	float: right; 
	padding-top: 15px 5px 5px 5px;
	font-size: 82%;
	line-height: 168%;
	color: #E35205;
	font-style: italic;
	letter-spacing: 0.04em;
	max-width: 35%;
}
.r img {
	max-width: 100%;
}

/* left column, for when you want two side-by-side columns */
.column-l {
	margin:1em;
	float: left; 
	padding: 0.9em;
	color: #000000;
	background:#f1b80f url(../images/column-l.png) top left no-repeat;
	background-size:contain;
	font-style: italic;
	letter-spacing: 0.04em;	
	max-width: 35%;
	min-width: 20%;
}
/* right column, for when you want two side-by-side columns */
.column-r {
	margin:1em;
	float: left; 
	padding: 0.9em;
	color: #000000;
	background:#f1b80f url(../images/column-r.png) top right no-repeat;
	background-size:contain;
	font-style: italic;
	letter-spacing: 0.04em;	
	max-width: 35%;
	min-width: 20%;
}

.sidebar {   /*For when you want to float a box with image and text both. Or just text. */
	float: right;
	font-size: 92%;
	line-height: 111%;
	color: #000000;
	background-color:#DFD8D8;
	min-width: 10%;
	max-width: 23%;
	padding: 15px 15px 15px 17px;
	margin: 10px 0px 7px 10px;	
}

/* For rare times when you need something centered. You should almost never use this. */
.centered   {
	margin-right: auto;
	margin-left: auto;
	text-align: center;
	width: 75%;	
}

/* Pullquote style for key points */
.pull {
	color: #c26738;
	float: right;
	font-style:italic;
	font-weight: normal;
	min-width: 10%;
	max-width: 30%;
	border-top: 1px dotted #930;
	border-bottom: 1px dotted #930;
	padding: 10px;
	font-family: "Myriad Pro";
	font-size: 125%;
	margin-top: 10px 0px 10px 15px;
	}
.pull::before {	   /* This automatically inserts a quotation mark at the beginning of all pull quotes */
	content: ' " ';
}
.pull::after {    /* This automatically inserts a quotation mark at the end of all pull quotes */
	content: ' " '; 
}
	
.caption { /* To go below images, etc. */
	color: #0c3b59;
	font-size:93%;
	letter-spacing:-1px;
}
.caption a:link {
	color: #0c3b59;
}
.caption v:link  {
	color: #0c3b59;
}

.tabimg{   /*For when you want to float a box with image and text both. Or just text. */
	
	font-size: 92%;
	padding-left: 85px;
	line-height: 111%;
	color: #D96E04;
	background-color:#ffffff;
	font-style: italic
	
}

/*formatting for table appearance. Remember to make your first row of headers into TH cells. Dreamweaver will NOT do this automatically for you. It will make them all td. */
table {
	font-family:"Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
	border:solid 0px #cca027;
	font-size:99%;
	background-color:#FFFFFF;
}
table caption {
	  margin:5px;
	  text-align:left;
	  font-weight:bold;
  }
table td {
	background-color:#E8E8E8;
	border: solid 0px #cca027;
	padding:15px;	
	}	
table th {
	background-color: #AFCAE4;
	color: #4A4545;
	border: solid 0px #cca027;
	text-align: left;
	
	padding-left: 5px;
	font-size: 100%;
}
table th.arrow {
	background:url(../images/arrow.png) center left no-repeat;
	padding-left:14px;
}
table td.arrow {
	background-image:url(../images/arrow.png) center left no-repeat #DDE5E8;
}

/* This gives you a box for examples, links out, etc. */
.example {
	z-index:3;	
	padding:0.85em 0.85em 0.5em 2.1em;
 	max-width:58%;
	color:#000000;
	Font-family:Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif;
	font-size:1.2em;
	border: 1px solid #f1b80f;
	background:#ffffff url(../images/example.png) top left no-repeat;
}

#box_photo_sb {
	width:270px;
	float: right;
	margin-left:1em;
	margin-bottom:1em;	
}

#box_photo_sb_wide {
	width:500px;
	float: right;
	margin-left:1em;
	margin-bottom:1em;	
}


#box_photo_sb_med {
	width:400px;
	float: right;
	margin-left:1em;
	margin-bottom:1em;	
}

#box_photo_sb_content {
	background-color:#dadee2;
	font-size: 92%;
	line-height: 120%;
	color: #78553d;
	font-style: italic;
	padding:.5em 1.5em .5em 1.5em;
	
}

#box_photo_sb_header {
	padding:1em 1em .8em 1em;
	font-size: 100%;
	line-height: 100%;
	color: #ffffff;
	letter-spacing:.01em;
	font-weight:600;
	font-family: verdana, arial, helvetica, sans-serif;
	background-color:#d85d54;
	border-radius: 15px 15px 0px 0px;
}

#box_photo_sb_line {
	background-color:#99a053;
	padding:0.5em 0.1em 0.1em 0.5em;
	
}

.video_font
{ font: normal .4em times;
	font-size: 120%;
	line-height: 1.4em;
	color: #003366; /* blue */
	font-style: italic;
	font-weight: bold;
}

.letterbox
{box-shadow: 7px 7px 5px grey;
padding: 10px;
border: 1px solid black;
background: white;}

.letterbox2
{box-shadow: 7px 7px 5px grey;
padding: 10px;
border: 1px solid black;
background: #E1ECFD;}

.letterbox3
{box-shadow: 7px 7px 5px grey;
padding: 10px;
border: 1px solid black;
background: #FDF5E1;}


.viewnote
{
	font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
	font-size: 75%;
	color: #925304
}

.scimg
{float: left;
padding-right: 22px;}

.scimg2
{float: right;
padding-right: 22px;
padding-left: 22px}


#box_photo_main_98 {
	width:100%;
	/* float: left; */
	margin-bottom:1em;
}


#box_photo_main {
	width:550px;
	/* float: left; */
	margin-bottom:1em;
}

#box_photo_main_all {
	width:100%;
	/* float: left; */
	margin-bottom:1em;
}

#box_photo_main_620 {
	width:620px;
	/* float: left; */
	margin-bottom:1em;
}

#box_photo_main_header {
	padding:1em 1em .8em 1em;
	font-size: 100%;
	line-height: 100%;
	color: #ffffff;
	letter-spacing:.01em;
	font-weight:600;
	font-family: verdana, arial, helvetica, sans-serif;
	background-color:#3e77b9;
	border-radius: 15px 15px 0px 0px;
}

#box_photo_main_content {
	background-color: #c8cfdb;
	font-size: 92%;
	line-height: 120%;
	color: #4B4A4A;
	font-style: italic;	
	border-left: solid;
	border-right: solid;
	border-left-width: 1px;
	border-left-color: #3e77b9;
	border-right-color: #3e77b9;
	border-right-width: 1px;
	padding:.0em .0em .0em .0em;
}

#box_photo_main_line {
	background-color:#99a053;
	padding:0.5em 0.1em 0.1em 0.5em;
	
}

#box_photo_main_footer {
	padding:.1em .1em .4em .1em;
	font-size: 100%;
	line-height: 100%;
	color: #ffffff;
	letter-spacing:.01em;
	font-weight:600;
	font-family: verdana, arial, helvetica, sans-serif;
	background-color:#3e77b9;
	border-radius: 0px 0px 0px 0px;
}

#boxcap {
	padding-left: 10px;
}

#box_all {
	width:100%;
	
}