@charset "UTF-8";
/* CSS Document - All page styling

Colors used:
#ffffff - white for text on header and sidebar
#000000 - black for text in body
#451e06 - very dark brown for page background
#7e4421 - brown for header and sidebar item gradients
#ac673d - tan for sidebar background
#7b94a9 - blue-gray for sidebar slidedown items
#588c73 - jade hover color for sidebar slidedwon items; darker #3A6D54; lighter #b0cdbf;
#0080c0 - Small Title color for content. #17563B, #FF5F00
#ffdeca - Background for a hover on captions
#a9370a - Orange-brown for text links

*/

/* To correct SVG output from Adobe Illustrator */
@font-face {    
    font-family: 'ArialMT';    
    src:    
        local('Arial'),    
        local('Arial MT'),    
        local('Arial Regular');    
    font-weight: normal;    
    font-style: normal;    
}

html{   /*full page background color - very dark brown*/
	background-color: #451e06;
	/*keep the footer and scaling behaving properly*/
	min-height: 100%;
	position: relative;
	font-size: 100%;
}
body{
	/*more to keep the layout stable*/
	height: 100%;
	font-size: 1em;
}
#wrapper{	/*a wrapper for the sidebar and content divs, to keep them together and the same height*/
	min-height: 36.875em;
	width: 56.375em;
	overflow: auto;
	position: relative;
	margin: -0.438em auto 0;  /*The "auto" is to center relative to the left and right margins*/
	background-color: #ac673d;	/*effectively the background color of the sidebar*/
	box-shadow: 0.313em 0.313em 1.875em 0 rgba(240, 240, 255, 0.3);
	border-radius: 3px;
}
#wrapperFig{   /*a wrapper for a full-width figure page without sidebar---*/
	min-height: 30em;
	width: 900px;
	overflow: hidden;
	position: relative;
	margin: -0.438em auto 0;
	background-color: #ac673d;	/*effectively the background color of the sidebar*/
	box-shadow: 0.313em 0.313em 1.875em 0 rgba(240, 240, 255, 0.3);
	border-radius: 3px;
}
	
/*----------------------Header bar styling-------------------------------------------*/
#header{
	height: 1.875em;
	width: 56.375em;
	/*stays centered at the top of the page*/
	position: fixed;
	top: 0;
	left: 50%;
	margin-left: -28.188em;
	/*stays on top of other elements*/
	z-index: 1000;
	/*text and background colors*/
	color: #ffffff;  /*--White text on darker background---*/
	background-color: #7e4421; /*in case the gradient doesn't display*/
	background: linear-gradient(#451e06, #7e4421);
	box-shadow: 0 0.125em 0.313em 0 rgba(50, 50, 50, 0.4);
	border: solid 1px #451e06;	/*I left the border thicknesses in pixels*/
	border-radius: 3px;		/*because they render consistently otherwise*/
}
#search{
	height: 1.875em;
	margin: 0.25em;
	float: right;
}
.history{	/*--Navigation arrow buttons*/
	width: 1.875em;
	height: 1.875em;
	margin: 0.063em;
	border-radius: 50px;
	float: left;
}
.history:hover, .clickable:hover{
	opacity: 0.6;
	cursor: pointer;
}
.red:hover{
	color: red;
	cursor: pointer;
}
.yellow:hover{
	color: yellow;
	cursor: pointer;
}
#header img{  /*--For navigation arrow button images*/
	margin: 0.225em 0.125em;
	height: 1.363em;
	width: 1.363em;
}

#ulWrapper{   /*To center list, perhaps only title now*/
	width: 20.0em;
	height: 1.2em;
	position: absolute;
	margin-left: 18.1875em;
	text-align: center;
}
#header ul{
	list-style-type: none;
	margin-top: 0.313em;
	padding: 0;
	margin-left: 0;
	display: inline-block;
}
#header li{
	height: 1.2em;
	float: left;
	font: 0.875em Arial, Helvetica, sans-serif;
	margin-right: 0;
	border-right: 1px solid #451e06;	/*the vertical bars in the header*/
	padding: 0 1.25em;
	font-weight: bold;
	text-decoration: none;
}
#header li:last-child{
	border-right: none;
}

#headbutts {       /*Buttons for Figure pages, XPL, etc.-----*/
	width: 25.0em;
	height: 1.2em;
	margin: 0.313em;
	float: right;
	font-family: Arial, Helvetica, sans-serif;
}
/*-----------------Table of Contents styling------------------------------------------------*/
ul.inner {
	width: 25em;
	float: right;
}
a.title {
	font-weight: bold;
}
li ul.innerBullets {
	width: 370px;
	float: left;
	font-size:80%;
  list-style-type:disc;
  margin-left: 20px;
}
a.title {
	font-weight: bold;
}
/*-----------------sidebar styling*------------------------------------------------*/
#sidebar{
	width: 12.563em;
	minimum-height: 30.625em;
	float:left;
	margin-top: 0;
	margin-left: 0;
	color: #ffffff;	/*text color in the sidebar*/
	font: 1em Arial, Helvetica, sans-serif;
	position: relative;
	z-index: 4;
	opacity: .99; /*this keeps the sidebar behind "popup" images*/
}
/*sidebar headings styling*/
#sidebar span{
	position: relative; /*will move down if menu gets bigger*/
	margin-left: 1.0em;
	margin-top: 1.0em;
	font: 1em Arial, Helvetica, sans-serif;
	line-height: 1.563em;
	opacity: 0.8;
}
.sidebarList{
  font: 13px Arial, Helvetica, sans-serif;
	margin-top: 8px;
}
.n-min td:nth-child(1) {
  min-width: 34px;
  border: none;
  text-align: left
  }
.n-min td:nth-child(2) {
  min-width: 136px;
  border: none;
  text-align: left
  }
	
/*--------------------Sidebar menu styling, 2 accordian menus -----------------------------------------*/
#menu, #menu2, #menu3, #menu4{
	width: 11.875em;
	position: relative;
	margin-left: 0.313em;
	margin-top: 0.4em;
	padding: 0;
	background-color: #7b94a9;/*menu base color (blue-gray), the lightest of the three used*/
	color: white;
	box-shadow: 0 0.313em 0.938em 0.063em rgba(0,0,0,0.6);
	font-family: Arial, Helvetica, sans-serif;
	z-index: 5;
}
#menu ul, #menu2 ul, #menu3 ul, #menu4 ul{
	padding: 0;
	margin-left: 0;
	z-index: 5;
}
#menu h3, #menu2 h3, #menu3 h3, #menu4 h3{
	font-size: 0.75em;
	line-height: 2.8em;
	padding: 0 0.625em;
	cursor: pointer;
	margin: 0;
	/*fallback for browsers without gradients*/
	background: #451e06;/*the outer list color, the darkest*/
	background: linear-gradient(#451e06, #7e4421);
	z-index: 5;
}
#menu h3:hover, #menu2 h3:hover, #menu3 h3:hover, #menu4 h3:hover {
	/*the subtle "glowing text" effect*/
	/*text-shadow: 0 0 0.063em rgba(225,225,225,0.7);*/
	color: #ffdeca;
}
#menu h3 a:link, #menu2 h3 a:link, #menu3 h3 a:link, #menu4 h3 a:link, #menu h3 a:visited, #menu2 h3 a:visited, #menu3 h3 a:visited, #menu4 h3 a:visited, #menu h3 a:active, #menu2 h3 a:active, #menu3 h3 a:active, #menu4 h3 a:active {
    /*Turn off the blue color and undeline style*/
	color: #ffffff;
	text-decoration: none;
}
#menu h3 a:hover, #menu2 h3 a:hover, #menu3 h3 a:hover, #menu4 h3 a:hover {
	/*the subtle "glowing text" effect*/
	/*text-shadow: 0 0 0.063em rgba(225,225,225,0.7);*/
	color: #ffdeca;
}
#menu li, #menu2 li, #menu3 li, #menu4 li{
	list-style-type: none; /* No bullets */
	z-index: 5;
}
#menu ul ul li a, #menu2 ul ul li a, #menu3 ul ul li a, #menu4 ul ul li a{
	color: white;
	text-decoration: none;
	display: block;
}

#menu ul ul li, #menu2 ul ul li, #menu3 ul ul li, #menu4 ul ul li{
	color: white;
	text-decoration: none;
	font-size: 0.75em;
	line-height: 1.75em;
	display: block;
	padding: 0 0.938em;
	/*transition: all 0.15s;*/
}
/*#menu ul ul li a:hover, #menu2 ul ul li a:hover{
	background: #588c73;/*the hover color of the inner list, between the other two*/
/*	border-left: 5px solid #7e4421;
}*/


#menu ul ul li:hover, #menu2 ul ul li:hover, #menu3 ul ul li:hover, #menu4 ul ul li:hover{
	background: #588c73;/*the hover color of the inner list, between the other two*/
	border-left: 5px solid #7e4421;  /*shift the selection right 5 px*/
	cursor:pointer;
}
#menu ul ul, #menu2 ul ul, #menu3 ul ul, #menu4 ul ul{
	display: none;
}
#menu li.active ul, #menu2 li.active ul, #menu3 li.active ul, #menu4 li.active ul{
	/*Use <li class="active"> if you want all the subheadings to show*/
	/*display: block;*/
}

/*--------------------content div styling---------------------------------------------*/
#content{
	width: 43.60em;
	min-height: 30.625em;
	padding-top: 1em;
	padding-bottom: 1em;
	float: right;
	margin-top: 1.875em;
	/*white background for the content*/
	background-color: #ffffff;
	/*dividing border between content and sidebar, same color as page background*/
	border-left: solid 1px #451e06;
	position: relative; /*so the z-index works*/
/*	z-index: 2;*/
	display: inline-block;
	/*default font color for content, black*/
	color:#000000;
	font-family: Georgia, serif;
	line-height: 1.3;
}
#content.figurePage{  /*--For figure page with sidebar------*/
	background-color: #000000;
}

#content div.bigTitle{   /*for a large title, generally an html heading in its own div at the top of the page*/
	margin-left: auto;
	margin-right: auto;
	padding: 0.01em 0.625em;
	width: 38.8em;
	margin-top: 1.0em;
	color: #7e4421;
	text-align: center;
	box-shadow: inset 0 0 0.2em 0.2em rgba(150, 150, 150, 0.5);
}

#content div.rockTitle{   /*rock heading in its own div at the top of the page*/
	margin-left: auto;
	margin-right: auto;
	padding: 0.01em 0.625em;
	width: 38.8em;
	margin-top: 1.0em;
	color: #7e4421;
	text-align: center;
	box-shadow: inset 0 0 0.2em 0.2em rgba(150, 150, 150, 0.5);
}

#content div.rockTitle h2{   /*rock heading in its own div at the top of the page*/
	margin-top: 0.25em;
	margin-bottom: 0.25em;
}

#content div.text{    /*for divs containing mainly text*/
	margin-left: auto;
	margin-right: auto;
	padding: 0.625em;
	text-align: left;
	word-break: normal;
	width: 38em; /*to offset the padding*/
}

#content div.text1{    /*for divs containing mainly text*/
	margin-left: auto;
	margin-right: auto;
	margin-top: 1em;
	padding: 0.625em;
	background-color: #ffdeca;
	text-align: left;
	width: 40em; /*to offset the padding*/
/*	box-shadow: inset 0 0 0.2em 0.2em rgba(150, 150, 150, 0.5);*/
}

#content div.text_table{    /*for divs containing mainly text*/
	margin-left: auto;
	margin-right: auto;
	padding-bottom: 1em;
	padding-left: 0.625em;
	text-align: left;
	background-color: white;
	width: 600px; /*to offset the padding*/
	height: 500px;
	overflow-y: scroll;
}

#content div.text_table_header{    /*for divs containing mainly text*/
	padding-left: 0.625em;
	text-align: left;
	background-color: white;
	width: 600px; /*to offset the padding*/
	height:40px; 
	overflow:hidden; 
	margin-left:38px;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
}

#tableWrap {
	margin-top: -30px;	
}

#content span.center{
  display:inline-block;
  width:600px;
  margin-left:auto;
  margin-right:auto;
  text-align:center;
}

#content div.text ul{    /*for divs containing mainly text*/
	margin-top: 0.25em;
	margin-bottom: 0.25em;
}

#content div.textL {    /*left column for divs containing mainly text*/
	margin-left: 2.0em;
	margin-right: 1.0em;
	margin-top: 1em;
	float: left;
	padding: 0.625em;
	text-align: left;
	width:17em; /*to offset the padding*/
}

#content div.textR {    /*right column for divs containing mainly text*/
	margin-left: 1.0em;
	margin-right: 2.0em;
	margin-top: 1em;
	float: right;
	padding: 0.625em;
	text-align: left;
	width:17em; /*to offset the padding*/
}

#content div.text a, #wrapperFig div.text a, #content div.textL a, div.text1 a, .caption a, #content div.textR a, span.question a, #pathText a{  /*for divs containing mainly text, make links a brown color only*/
	text-decoration: none;
	color: #A9370A;
}
#content div.text a:hover, #content div.textL a:hover, .caption a:hover, #content div.textR a:hover, #pathText a:hover, div.text1 a:hover  {
	color: #000000;
	cursor: pointer;
  background-color: #FFDECA;
/*	text-decoration: underline;
	text-decoration-style: dotted;*/
}
div.frameL a:hover, div.frameL34 a:hover, div.frameR a:hover{
	cursor: pointer;
/*	text-decoration: underline;
	text-decoration-style: dotted;*/
}
#content div.text a:visited, #content div.textL a:visited, #content div.textR a:visited{
	text-decoration: none;
}

#content.figurePage div.figure{  /*Figure page with sidebar. Container for image or figure.--*/
	width: 41.6em;
	height: 31.2em;  /*---4:3 aspect ratio standard---*/
	position: relative;
	overflow: hidden;
	margin-left: auto;
	margin-right: auto;
	font-family: Arial, Helvetica, sans-serif;
}

#content.figurePage .caption{  /*Make figure page captions have Arial font*/
	font-family: Arial, Helvetica, sans-serif;
}

#content.figurePage div.figureTri{  /*Figure page with sidebar. Container for triangle 580x500px.--*/
	width: 41.6em;
	height: 35.86em;
	position: relative;
	overflow: hidden;
	margin-left: auto;
	margin-right: auto;
	font-family: Arial, Helvetica, sans-serif;
}

#content.figurePage div.figureZ{  /*Figure page with sidebar. Container for easyzoom image.--*/
	width: 41.6em;
	height: 31.2em;  /*---4:3 aspect ratio standard---*/
	margin-left: 16px;
	margin-right: 16px;
}

#content.figurePage div.figure_wSlider{  /*Figure page with sidebar. Container for image or figure.--*/
	width: 41.6em;
	height: 31.2em;  /*---4:3 aspect ratio standard---*/
	margin-left: 1em;
	position: relative;
	overflow: hidden;
	font-family: Arial, Helvetica, sans-serif;
}

#content.figurePage div.wrapSVG{  /*Figure page with sidebar. Container for image or figure.--*/
	width: 36.22em;
	height: 31.2em;  /*---4:3 aspect ratio standard---*/
	background-color: #ffffff;
	position:relative;
	float:left;
	overflow: hidden;
	font-family: Arial, Helvetica, sans-serif;
}

#content.figurePage div.wrapSVG img{ 
	position:relative;
	z-index: 7;
}

#content.figurePage div.wrapSlider{  /*Figure page with sidebar. Container for image or figure.--*/
	width: 5.38em;
	height: 31.2em;  /*--for vertical slider--*/
	background-color: #ffffff;
	position: relative;
	float:right;
	overflow: visible;
	font-family: Arial, Helvetica, sans-serif;
}

#content.figurePageLng div.figureLng{  /*Figure page with sidebar. Container for image or figure.--*/
	width: 41.6em;
	height: 55.47em;  /*--- 3:4 aspect ratio- --*/
	position: relative;
	overflow: hidden;
	margin-left: auto;
	margin-right: auto;
	font-family: Arial, Helvetica, sans-serif;
}

#content.figurePage div.figure img{ /*--Figure should scale to fit height for figure page with sidebar --*/
/*Figure page is designed for 4:3 image*/
	position: absolute;
	width: 100%;
	height: auto;
	overflow: hidden;
}

#content.figurePage div.figure object.figureSVG{ /*--SVG figure should scale to fit height for figure page with sidebar --*/
/*Figure page is designed for 4:3 image*/
	position: absolute;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

#content.figurePageLng div.figureLng img{ /*--Figure should scale to fit height for figure page with sidebar --*/
/*Figure page is designed for 4:3 image*/
	position: absolute;
	width: 100%;
	height: auto;
}

#content.figurePage div.movie {  /*Movie page with sidebar. Container for video.--*/
	width: 41.6em;
	min-height: 20em;  /*---4:3 aspect ratio standard---*/
	position: relative;
	margin-left: auto;
	margin-right: auto;
	font-family: Arial, Helvetica, sans-serif;
	text-align: center;  /*Center movie in container*/
}

#content.figurePage div.text, #content.figurePageLng div.text{
	width: 40.35em;
	background-color: #ffdeca;
	margin-left: auto;
	margin-right: auto;
	margin-top: 1em;
	text-align: justify;
	padding: 0.625em;
 	box-shadow: inset 0 0 0.2em 0.2em rgba(150, 150, 150, 0.5);
	position: relative; /*so the z-index works*/
	z-index: 4;
}
#caption-top{
	width: 40.35em;
	background-color: #ffdeca;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 1em;
	text-align: justify;
	padding: 0.625em;
 	box-shadow: inset 0 0 0.2em 0.2em rgba(150, 150, 150, 0.5);
	position: relative; /*so the z-index works*/
	z-index: 4;
}

#content span.smallTitle, #wrapperFig  span.smallTitle{   /*for smaller titles or headings within text divs*/
	padding-bottom: 0.5em;
	padding-left: 0;
	text-align: left;
	color: #0080c0;
	font-size: 1.2em;
	box-shadow: none;
}
#content div.aside{   /*comment, side-note, or quote in-line element*/
	margin: 0.4em;
	margin-right: 0;
	opacity: 0.6;
	padding: 0 0.4em;
	max-width: 12em;
	border-left: 1px solid #033a5c;
	float: right;
}
/*---------------------color scheme and hover effects for buttons*/
#content button, button.shaded  {
	border-radius: 0.313em;
	border: solid 1px #033a5c;
	color: #000000;
	background: linear-gradient(#ffffff, rgba(5,105,166,0.5));
}
#content button:hover, #content input[type=button]:hover{
	border-radius: 0.313em;
	border: solid 1px #033a5c;
	color: #000000;
	cursor: pointer;
	background: linear-gradient(rgba(5,105,166,0.5), #ffffff);
}
#content button.red {
	border-radius: 0.313em;
	border: solid 1px #033a5c;
	color: #000000;
	background: linear-gradient(#ffffff, #F2E394);
}
#content button.red:hover {
	border-radius: 0.313em;
	border: solid 1px #033a5c;
	color: #000000;
	cursor: pointer;
	background: linear-gradient(#F2E394, #ffffff);
}
#content button.red1 {
	border-radius: 0.313em;
	border: solid 1px #033a5c;
	color: #000000;
	background: linear-gradient(#ffffff, #ff7f7f);
}
#content button.red1:hover {
	border-radius: 0.313em;
	border: solid 1px #033a5c;
	color: #000000;
	cursor: pointer;
	background: linear-gradient(#ff7f7f, #ffffff);
}
#content button.green {
	border-radius: 0.313em;
	border: solid 1px #033a5c;
	color: #000000;
	background: linear-gradient(#ffffff, #588C7E);
}
#content button.green:hover {
	border-radius: 0.313em;
	border: solid 1px #033a5c;
	color: #000000;
	cursor: pointer;
	background: linear-gradient(#588C7E, #ffffff);
}
#content button.orange {
	border-radius: 0.313em;
	border: solid 1px #033a5c;
	color: #000000;
	background: linear-gradient(#ffffff, #F2AE72);
}
#content button.orange:hover {
	border-radius: 0.313em;
	border: solid 1px #033a5c;
	color: #000000;
	cursor: pointer;
	background: linear-gradient(#588C7E, #F2AE72);
}
#content input[type=button1]{
	width: 36px;
	border-radius: 0.313em;
	border: solid 1px #033a5c;
	color: #000000;
	background: linear-gradient(#ffffff, rgba(5,105,166,0.5));
}
#content input[type=button1]:hover{
	border-radius: 0.313em;
	border: solid 1px #033a5c;
	cursor: pointer;
	background: linear-gradient(rgba(5,105,166,0.5), #ffffff);
}
#content button:focus {
	text-decoration: none;
	outline: none;
}

div.buttons {
	width: 8 em;
	position: absolute;
	left: 6em;
	top: 6em;
}
#header button{
	border-radius: 0.13em;
	border: solid 1px #033a5c;
	color: #000000;
}
#content button:hover, #header button:hover, button.shaded:hover  {
	opacity: 0.6;
	cursor: pointer;
}

#headbutts button{       /*Buttons for Figure pages, XPL, etc.-----*/
	background-color: #ffffff;
}

#header a:visited, #header a:active {
    /*Turn off the blue color and undeline style*/
	text-decoration: none;
}

#holdElementBut {
	float: right;
}

/*Padding to position anchor below fixed header------------------*/
a.anchor {
	display: block; 
	position: relative; 
	top: -35px; 
	visibility: hidden;
}

/*----------------------------------------------*//*Inline FigureL and FigureR styling*/
/*First the wrappers for the image and caption buttons*/
#content div.figureL {
	width: 19em;
	height: 16.3em;
	float: left;
}
#content div.figureR {
	width: 19em;
	height: 16.3em;
	float: right;
}
/*Then the frame for the image 4:3 aspect ratio*/
#content div.frameL {
	height: 13.5em;
	width: 18em;
	float: left;
	padding-bottom: 0.8em;
	padding-top: 0.6em;
	padding-right: 1em;
	z-index: 5;
}
/*Then the frame for the image 3:4 aspect ratio*/
#content div.frameL34 {
	height: 18em;
	width: 13.5em;
	float: left;
	padding-bottom: 0.8em;
	padding-top: 0.6em;
	padding-right: 1em;
	z-index: 5;
}
#content div.frameLL {  /*4:4 aspect ratio*/
	height: 18em;
	width: 18em;
	float: left;
	padding-bottom: 0.8em;
	padding-top: 0.6em;
	padding-right: 1em;
	z-index: 5;
}
#content div.frameLT {  /*29:25 aspect ratio for ternary diagrams*/
	height: 15.5em;
	width: 18em;
	float: left;
	padding-bottom: 0.8em;
	padding-top: 0.6em;
	padding-right: 1em;
	z-index: 5;
}
#content div.frameR {
	height: 13.5em;
	width: 18em;
	float: right;
	padding-bottom: 0.8em;
	padding-top: 0.6em;
	padding-left: 1em;
	z-index: 5;
}
#content div.frameRT {  /*29:25 aspect ratio for ternary diagrams*/
	height: 15.5em;
	width: 18em;
	float: right;
	padding-bottom: 0.8em;
	padding-top: 0.6em;
	padding-right: 1em;
	z-index: 5;
}
#content div.frameC {
	height: 27em;
	width: 36em;
  margin-left: auto;
  margin-right: auto;
	padding-bottom: 0.8em;
	padding-top: 0.6em;
	padding-left: 1em;
	z-index: 5;
}
#content div.frame2L {
	height: 13.5em;
	width: 18em;
	margin-bottom: 1em;
	float: left;
	z-index: 5;
}

#content div.frame3L { /*for 3:2 image not 4:3*/
	height: 13.5em;
	width: 20.25 em;
	margin-bottom: 1em;
	float: left;
	z-index: 5;
}

#content div.frameTSL {
	height: 144.28px;
	width: 18em;
	margin-bottom: 1em;
	float: left;
	z-index: 5;
}

#content div.imageChoices {
	width: 41.6em;
	position: relative;
	overflow: hidden;
	margin-left: auto;
	margin-right: auto;
	font-family: Georgia, serif;
}

#content div.one-third-figure {
	width: 200px;
	height: 151px;
	float: left;
	overflow: hidden;
	margin-left: auto;
	margin-right: auto;
}

div.one-third-figure p.caption {
  position: absolute;
	width: 200px;
	left: 0em;
	top: 2em;
	z-index: 7;
	text-align: left;
	font-size: 0.8em;
	background-color: #ffdeca;
	border: 1px solid black;
	padding: 0.5em;
	box-shadow: 0 0 0.3em 0.2em rgba(0,0,0,0.4);
}

div.one-third-figure p.enlarge {
  position: absolute;
	width: 500px;
	top: 40px;
	left: 100px;
	z-index: 7;
	background-color: white;
	border: 1px solid black;
	box-shadow: 0 0 0.3em 0.2em rgba(0,0,0,0.4);
}

#content div.one-fourth-figure {
	width: 150px;
	height: 113px;
	float: left;
	overflow: hidden;
	margin-left: auto;
	margin-right: auto;
}

div.one-fourth-figure p.caption {
  position: absolute;
	width: 150px;
	left: 0em;
	top: 2em;
	z-index: 7;
	text-align: left;
	font-size: 0.8em;
	background-color: #ffdeca;
	border: 1px solid black;
	padding: 0.5em;
	box-shadow: 0 0 0.3em 0.2em rgba(0,0,0,0.4);
}

div.one-fourth-figure p.enlarge {
  position: absolute;
	width: 500px;
	top: 40px;
	left: 100px;
	z-index: 7;
	background-color: white;
	border: 1px solid black;
	box-shadow: 0 0 0.3em 0.2em rgba(0,0,0,0.4);
}



#content div.frameL object.figureSVG, #content div.frameR object.figureSVG{ /*--SVG figure should scale to fit frame --*/
/*Figure page is designed for 4:3 image*/
	position: relative;
	width: 100%;
	height: 100%;
	overflow: hidden;
}


/*Then instructions to fill the wrapper with the image*/
#content div.frameL img, #content div.frameL34 img{
	width: 100%;
	height: auto;
	overflow: hidden;
	float: left;
}
#content div.frameR img{
	width: auto;
	height: 100%;
	overflow: hidden;
	float: right;
}
#content div.frameC img{
	width: auto;
	height: 100%;
	overflow: hidden;
	margin-left: auto;
	margin-right: auto;
}
#content div.frame2L img, #content div.frameTSL img{
	width: 100%;
	height: auto;
	overflow: hidden;
	float: left;
}

#content div.frame2L img.center32{
	margin-top: 11.5px;
}

#content div.imageInfoR {
	height: 12.25em;
	width: 21em;
	margin-bottom: 1em;
	float: right;
	padding: 0.625em;
	z-index: 5;
}

#content div.imageInfo3R {  /*for 3:2 image not 4:3*/
	height: 12.25em;
	width: 18.75em;
	margin-bottom: 1em;
	float: right;
	padding: 0.625em;
	z-index: 5;
}

#content div.imageInfoTSR {
	height: 7.8em;
	width: 21em;
	margin-bottom: 1em;
	float: right;
	padding: 0.625em;
	z-index: 5;
}


/*A container for the figure buttons*/
#content div.buttsL {
	width: 18em;
	height: 1.2em;
	float: left;
	margin-top: 0.8em;
	margin-bottom: 0.1em;
	text-align: center;  /*Center buttons in container*/
}
#content div.buttsR {
	width: 18em;
	height: 1.2em;
	float: right;
	margin-top: 0.8em;
	margin-bottom: 0.1em;
	text-align: center;  /*Center buttons in container*/
}

/*----------------------------------------------*//*FigureL, FigureR Caption styling*/
#content div.frameL p.captionL, #content div.frameL34 p.captionL34, #content div.frameLL p.captionLL, #content div.frameLT p.captionLT, p.captionOn{
	width: 22.5em;
	position: relative;
	float: left;
	top: 0em;
	z-index: 7;
	text-align: left;
	font-size: 0.8em;
	background-color: #ffdeca;
	border: 1px solid black;
	padding: 0.5em;
	box-shadow: 0 0 0.3em 0.2em rgba(0,0,0,0.4);
	display: none;
}
#content div.frameR p.captionR, #content div.frameRT p.captionRT {
	width: 22.5em;
	position: relative;
	float: right;
	top: 0em;
	z-index: 7;
	text-align: left;
	font-size: 0.8em;
	background-color: #ffdeca;
	border: 1px solid black;
	padding: 0.5em;
	box-shadow: 0 0 0.3em 0.2em rgba(0,0,0,0.4);
	display: none;
}
#content div.frameC p.captionC {
	width: 30em;
	position: relative;
	top: 0em;
  margin-left: auto;
  margin-right: auto;
	z-index: 7;
	text-align: left;
	font-size: 0.8em;
	background-color: #ffdeca;
	border: 1px solid black;
	padding: 0.5em;
	box-shadow: 0 0 0.3em 0.2em rgba(0,0,0,0.4);
	display: none;
}

/*-----------------------------------------------------------------*/
#content span.audio{
	/*small audio buttons in the glossary and text*/
	display: inline;
}
#content span.audio:hover{
	cursor: pointer;
	opacity: 0.7;
}
#content span.audio img{
	width: 0.8em;
	height: 0.8em;
}
/*--Equation image styling------------------------------------------------------------*/
div.equation {
	width: 38em;
	height: 2em;
	text-align: center;
}
div.equation img {
	height: 100%;
	width: auto;
}

/*-----------------------------------------------------------------*/
/*#content div.feedbackLink{
	/*link to the feedback page at the bottom*/
/*	padding: 0.625em;
	box-shadow: none;
}
#content div.feedbackLink a{
	text-decoration: underline;
	color: #0080c0;
	font: 1em Arial, Helvetica, sans-serif;
}
#content div.feedbackLink a:hover{
	.tex-decoration: none;
}*/
/*------------------------------Full page figure no sidebar styling*/
#wideFigure{
	width: 56.375em;
	min-height: 30.625em;
	margin-top: 1em;
	font-family: Arial, Helvetica, sans-serif;
	line-height: 1.3;
	padding-top: 1em;
	padding-bottom: 1em;
	/*black background for the photos*/
	background-color: #000000;
	position: relative; /*so the z-index works*/
	
	z-index: 2;
}
#wideFigure4{
	width: 900px;
	min-height: 700px;
	margin-top: 1em;
	font-family: Arial, Helvetica, sans-serif;
	line-height: 1.3;
	padding-top: 1em;
	padding-bottom: 1em;
	/*black background for the photos*/
  display: block;
	background-color: #000000;
	position: relative; /*so the z-index works*/
	
	z-index: 2;
}
#wideFigure6{
	width: 900px;
	min-height: 550px;
	margin-top: 1em;
	font-family: Arial, Helvetica, sans-serif;
	line-height: 1.3;
	padding-top: 1em;
	padding-bottom: 1em;
	/*black background for the photos*/
  display: block;
	background-color: #000000;
	position: relative; /*so the z-index works*/
	
	z-index: 2;
}
#wideFigure5{
	width: 900px;
	min-height: 550px;
	margin-top: 1em;
	font-family: Arial, Helvetica, sans-serif;
	line-height: 1.3;
	padding-top: 1em;
	padding-bottom: 1em;
	/*black background for the photos*/
  display: block;
	background-color: #000000;
	position: relative; /*so the z-index works*/
	
	z-index: 2;
}
#wideFigure div.twoImages{
	/*Full page image or figure container*/
	width: 56.375em;
	height: 28.0em;
	margin-top: 1em;
	position: relative;
}

#wideFigure div.twoImages1{
	/*Full page image or figure container*/
	width: 56.375em;
	height: 37.5em;
	margin-top: 1em;
	position: relative;
}

#wideFigure div.twoImages2{
	/*Full page image or figure container*/
	width: 900px;
	height: 500px;;
	margin-top: 1em;
	position: relative;
}

#wideFigure div.text{
	margin-left: auto;
	margin-right: auto;
	margin-top: 1em;
	padding: 10px;
	background-color: #ffdeca;
	text-align: left;
	width: 848px; /*to offset the padding*/
}

#wideFigure div.wrapSlider{
	width: 70px;
	height: 567px;  /*--for vertical slider--*/
	background-color: #ffffff;
	position: relative;
	float:right;
	overflow: visible;
	font-family: Arial, Helvetica, sans-serif;
}

#wideFigure4 div.wrapSlider1{
	width: 100px;
	height: 700px;  /*--for vertical slider--*/
	background-color: #ffffff;
	position: relative;
  display:inline;
	float:left;
	overflow: visible;
	font-family: Arial, Helvetica, sans-serif;
}

.wrapSlider2{
	width: 100px;
	height: 500px;  /*--for vertical slider--*/
	background-color: #ffffff;
	position: relative;
  display:inline;
	float:left;
	overflow: visible;
	font-family: Arial, Helvetica, sans-serif;
}

.wrapSliderHoriz {
	width: 698px;
	height: 30px;  /*--for horizontal slider--*/
	background-color: #ffffff;
	position: relative;
	overflow: visible;
	font-family: Arial, Helvetica, sans-serif;
}

div.hSliderLabel {
	width: 129px;
	height:25px;  */
	font-weight:bold;
	font-size: 18px;
	float: left;
	display: inline;
	margin-right: 10px;
	margin-left: 10px;
	margin-top: 5px;
}

#slider-tp.ui-slider {
	height: 400px;
	border-radius: 1px;
	border-color: #000;
	
}	
#slider-ca1.ui-slider, #slider-ca2.ui-slider {
	width: 398px;
	height: 10px;
	border-radius: 1px;
	border-color: #000;
	display: inline;
	float: left;
	margin-top: 10px;
}	
#slider-tp .ui-slider-handle {
    height: 10px;
    width: 33px;
	margin-left:-5px;
	color: #7e4421;
	background-color: #7e4421;
	outline: none;
}
#slider-ca1 .ui-slider-handle, #slider-ca2 .ui-slider-handle {
    height: 33px;
    width: 10px;
	border-color: #000;
	color: #7e4421;
	background: #7e4421;
	margin-top: -5px;
	outline: none;
}

#wideFigure div.text p.caption{
	width: 52.75em;
	background-color: #ffdeca;
	margin-left: auto;
	margin-right: auto;
	text-align: justify;
	-webkit-margin-before:0em;
	-webkit-margin-after:0em;
}


#leftImage{
	width: 28.1875em;
	height: 28.0em;
	top: -1.0em;
	position: relative;
	float: left;
	background-color: #ffffff;
}

#leftOverImage{
	width: 28.1875em;
	height: 28.0em;
	top: -1.0em;
	position: absolute;
	float: left;
	background-color: #ffffff;
	visibility: hidden;
	z-index: 20;
}

#leftImage1{
	width: 50.0em;
	height: 37.5em;
	position: relative;
	float: left;
	background-color: #ffffff;
}

#leftImage2{
	width: 56.375em;
	height: 37.5em;
	position: relative;
	float: left;
	background-color: #ffffff;
}

#leftImage3{
	width: 500px;
	height: 500px;
	position: relative;
	float: left;
	background-color: #ffffff;
}

#rightImage{
	width: 28.1875em;
	height: 28.0em;
	position: relative;
	top: -1.0em;
	float: right;
	background-color: #ffffff;
}

#rightImage1{
	width: 6.375em;
	height: 37.5em;
	position: relative;
	float: left;
	background-color: #ffffff;
}

#rightImage2{
	width: 420px;
	height: 440px;
	position: absolute;
	top: 60px;
	left:470px;
	visibility: hidden;
	background-color: #ffffff;
	z-index: 9;
}

#rightImage3{
	width: 400px;
	height: 305px;
	position: relative;
	float: right;
	background-color: #ffffff;
}

#rightImage4{
	width: 352px;
	height: 600px;
	position: absolute;
	top: 0px;
	left:548px;
	visibility: hidden;
	background-color: #ffffff;
}
#rightImage4cms{
	width: 352px;
	height: 600px;
	position: absolute;
	top: 0px;
	left:548px;
	display: none;
}

#rightImage5{
	width: 420px;
	height: 440px;
	position: absolute;
	top: 140px;
	left:506px;
	visibility: hidden;
	background-color: #ffffff;
}


#AFM_1{
	position: absolute;
	z-index: 5;
}

#AFM_2{
	position: absolute;
	z-index: 4;
	visibility: hidden;
}

/*#figure{
	width: 56.375em;
	min-height: 30.625em;
	padding-top: 1.25em;
	padding-bottom: 1.125em;
	margin-top: 1em;
	font-family: Georgia, serif;
	line-height: 1.3;
	/*black background for the photos*/
/*	background-color: #000000;
	position: relative; /*so the z-index works*/
	
/*	z-index: 2;
}
#figure div.figure{
	/*Full page image or figure container*/
/*	width: 54.0em;
	min-height: 36.0em;
	position: relative;
	overflow: hidden;
	margin-top: 1em;
	margin-left: auto;
	margin-right: auto;
}


#figure div.figure img{
	position: absolute;
	width: 100%;
	height: auto;
}

#figure div.text{
	width: 52.75em;
	background-color: #ffdeca;
	margin-left: auto;
	margin-right: auto;
	margin-top: 1em;
	text-align: justify;
	padding: 0.625em;
/*	box-shadow: inset 0 0 0.2em 0.2em rgba(150, 150, 150, 0.5);*/
/*	position: relative; /*so the z-index works*/
/*	z-index: 4;

}

/*-----------------------------------------------------------------*//*Cover banner image styling*/
#banner{
	height: 14em;
	width: 40.0em;
}
#banner img{
/*stretch to fill banner width, do not distort div*/
	width: 100%;
	height: 100%;
	overflow: hidden;
}
/*-----------------------------------------------------------------*//*Chapter banner image styling*/
/*First the wrapper for the whole banner*/
#bannerChap {
	position: relative;
	width: 40em;
	height: 14em;
	left: 1.8em;
}
#bannerChapD {
	position: relative;
	width: 40em;
	height: 14em;
	left: 1.8em;
}
/*Then the wrapper for the image 3:2 aspect ratio*/
#bannerChap div.figureB1 {
	height: 14em;
	width: 21em;
	margin-left: auto;
    margin-right: auto;
	z-index: 5;
}

#bannerChap figure.figureB1 {
	height: 14em;
	width: 21em;
	margin-left: auto;
    margin-right: auto;
	z-index: 5;
}

#bannerChapD figure.figureBL {
	height: 224px;
	width: 300px;
	margin-left: auto;
    margin-right: auto;
	z-index: 5;
	float: left;
}

#bannerChapD figure.figureBR {
	height: 224px;
	width: 300px;
	margin-left: auto;
  margin-right: auto;
	z-index: 5;
	float: right;
}

/*Then instructions to fill the wrapper with the image*/
#bannerChap div.figureB1 img{
	width: 100%;
	height: 100%;
	overflow: hidden;
}

/*Then instructions to fill the wrapper with the image*/
#bannerChap figure.figureB1 img{
	width: 100%;
	height: 100%;
	overflow: hidden;
}

/*Then instructions to fill the wrapper with the image*/
#bannerChap figure.figureBL img, #bannerChap figure.figureBR img{
	width: 100%;
	height: 100%;
	overflow: hidden;
}

/*-----------------------------------------------------------------*//*Banner Caption styling*/


div.figureB1 p.caption {
    position: absolute;
	width: 12em;
	left: 0em;
	top: 2em;
	z-index: 7;
	text-align: left;
	font-size: 0.8em;
	background-color: #ffdeca;
	border: 1px solid black;
	padding: 0.5em;
	box-shadow: 0 0 0.3em 0.2em rgba(0,0,0,0.4);
	display: none;
}

figure.figureB1 p.caption {
    position: absolute;
	width: 12em;
	left: 0em;
	top: 2em;
	z-index: 7;
	text-align: left;
	font-size: 0.8em;
	background-color: #ffdeca;
	border: 1px solid black;
	padding: 0.5em;
	box-shadow: 0 0 0.3em 0.2em rgba(0,0,0,0.4);
	display: none;
}

figure.figureB1 p.captionR {
  position: absolute;
	width: 12em;
	right: 0em;
	top: 2em;
	z-index: 7;
	text-align: left;
	font-size: 0.8em;
	background-color: #ffdeca;
	border: 1px solid black;
	padding: 0.5em;
	box-shadow: 0 0 0.3em 0.2em rgba(0,0,0,0.4);
	display: none;
}

figure.figureBL p.caption, figure.figureBR p.caption {
	width: 280px;
	left: 0em;
	top: 1em;
	z-index: 7;
	text-align: left;
	font-size: 0.8em;
	background-color: #ffdeca;
	border: 1px solid black;
	padding: 0.5em;
	box-shadow: 0 0 0.3em 0.2em rgba(0,0,0,0.4);
	display: none;
}


/*-----------------------------------------Buttons to enlarge banner image and show caption--------------*/
#bannerChap div.butWrap {
    position: absolute;
	width: 8em;
	height: 8em;
	bottom: 2em;
	right: 2em;
	z-index: 5;
}
button.captionBbut {
	position: absolute;
	right: 2em;
	bottom: 4em;
	z-index: 7;
}
button.enlargeBbut {
	position: absolute;
	right: 2em;
	bottom: 7em;
	z-index: 7;
}
button.closeBbut {
	position: absolute;
	right: 0.3em;
	top: 0.3em;
	z-index: 11;
	font-size: 1.0em;
	background-color: #e9e9e9;
	border: 1px solid black;
	box-shadow: 0 0 0.3em 0.2em rgba(0,0,0,0.4);
}

/*Instructions for Chapter Banner enlarged image --------------------------*/
#bannerChapLrg {
	position: fixed;
  	top: 50%;
  	left: 50%;
  	transform: translate(-50%, -50%);
	width: 48em;
	height: 32em;
	z-index: 10;
	display: none;
	box-shadow: 0 0 24em 24em rgba(0,0,0,1.0);
}
#bannerChapLrg img{ 
	width: 100%;
	height: 100%;
	overflow: hidden;
}
#captionB1L {
	position: absolute;
	bottom: -4.5em;
	text-align: left;
	font-size: 0.8em;
	background-color: #e9e9e9;
	border: 1px solid black;
	padding: 0.5em;
	box-shadow: 0 0 0.3em 0.2em rgba(0,0,0,0.4);
}

/*-----------------------------------------------------------------*/
/*footer styling*/
#footer{
	width: 64em;
	height: 2.5em;
	background-color: #cb8f6b;/*in case the gradient doesn't display*/
	background: linear-gradient(#ac673d, #cb8f6b);
	position: relative;
	margin: 0.625em auto 0;
	z-index: 3;
	font: 0.875em Arial, Helvetica, sans-serif;
	font-weight: bold;
	border-radius: 3px;
}
#footer span:nth-child(1){
	/*left column of text, slightly indented*/
	position: absolute;
	left: 0.625em;
	top: 0.625em;
}
#titleWrapper{
	position:absolute;
	left: 23em;
	top: 0.5em;
	font: 1.1em Arial, Helvetica, sans-serif;
	color: #ffffff;
	font-weight: bold;
	text-align: center;
}
#footer span:nth-child(3){
	/*right column of text, given more space*/
	position: absolute;
	right: 0.625em;
	top: 0.625em;
}
#footer span a:link, #footer span a:visited, #footer span a:active {
    /*Turn off the blue color and undeline style*/
	color: #000000;
	text-decoration: none;
}
#footer div a:link, #footer div a:visited, #footer div a:active {
    /*Turn off the blue color and undeline style*/
	color: #ffffff;
	text-decoration: none;
}
#header li a:link, #header li a:visited, #header li a:active {
    /*Turn off the blue color and undeline style*/
	color: #ffffff;
	text-decoration: none;
}
#footer span a:hover, #footer div a:hover, #header li  a:hover{
	/*background-color: #eee;
	color: #7b94a9;*/
	color: Khaki;
	cursor: pointer;
}
/*-----------------------------------------------------------------*/
input:focus {
	border: 2px solid #a9370a;
	border-radius: 3px;
}

/*Table syling with common borders--*/
table, th, td {
	font-family:Arial, Helvetica, sans-serif;
	font-size:1em;
	text-align:center;
	margin-left:auto;
	margin-right:auto;
    border: 1px solid black;
    border-collapse: collapse;
}
table.fixedWidth {
	width: 600px;
}

/*----------------------------------*//*Instructions for feedback screen overlay */
/*-------------------------Align the feedback window in the center of the screen--*/
#content div.feedback {
	position: fixed;
  	top: 40%;
  	left: 50%;
  	transform: translate(-50%, -50%);
	width: 34em;
	height: 20em;
	z-index: 8;
	background-color: #ffffff;
	box-shadow: 0 0 2em 4em rgba(0,0,0,0.8);
}
#wideFigured3 div.feedback {
	position: fixed;
  	top: 40%;
  	left: 50%;
  	transform: translate(-50%, -50%);
	width: 34em;
	height: 20em;
	z-index: 8;
	background-color: #ffffff;
	box-shadow: 0 0 2em 4em rgba(0,0,0,0.8);
}
#content div.feedback img{ 
	width: 100%;
	height: auto;
	overflow: hidden;
}
#content div.feedback div.textBack {
	position: relative;
	top: 50%;
	transform: translateY(-50%);
	margin-left: auto;
	margin-right: auto;
	width: 31em;
	height: 17em;
	z-index: 11;
	background-color: #ffdeca;
	border: 2px solid black;
	padding: 0.5em;
	box-shadow: 0 0 0.3em 0.2em rgba(0,0,0,1);
}
#wideFigured3 div.feedback div.textBack {
	position: relative;
	top: 50%;
	transform: translateY(-50%);
	margin-left: auto;
	margin-right: auto;
	width: 31em;
	height: 17em;
	z-index: 11;
	background-color: #ffdeca;
	border: 2px solid black;
	padding: 0.5em;
	box-shadow: 0 0 0.3em 0.2em rgba(0,0,0,1);
}
/*---To align the text in the center of the feedback division -----*/
#content div.feedback div.textBack p{
	position: relative;
	top: 50%;
	transform: translateY(-50%);
	text-align: center;
	margin-left: auto;
	margin-right: auto;
}
#wideFigured3 div.feedback div.textBack p{
	position: relative;
	top: 50%;
	transform: translateY(-50%);
	text-align: center;
	margin-left: auto;
	margin-right: auto;
}
button.closeFeedbut {
/*--	position: fixed;
	right: 0.3em;
	top: 0.3em;  --*/
	z-index: 11;
	font-size: 0.6em;
	background-color: #e9e9e9;
	border: 1px solid black;
	box-shadow: 0 0 0.2em 0.1em rgba(0,0,0,0.8);
}

/*----------------------This is a style sheet for a d3scatter plot  */
.axis path,
.axis line {
  fill: none;
  stroke: #000;
  stroke-width: 2;
  shape-rendering: crispEdges;
}

.grid line {
  stroke: lightgrey;
  stroke-opacity: 0.9;
  shape-rendering: crispEdges;
}

.grid path {
  stroke-width: 0;
}

.dot {
  stroke: #000;
}

.tooltip {
  position: absolute;
  width: 150px;
  height: 50px;
  padding: 5px;
  pointer-events: none;
  z-index: 5;
}

.tooltip_caption {
  position: absolute;
  width: 230px;
  height: 40px;
  padding: 5px;
  pointer-events: none;
  z-index: 5;
}


.line {
/*    stroke: blue;*/
    fill:none;
    stroke-width: 3;
}

/*------------------------------Full page figure no sidebar styling*/
#wideFigured3{
	width: 900px;
	min-height: 30.625em;
	margin-top: 1em;
	font-family: Arial, Helvetica, sans-serif;
	padding-top: 1em;
	padding-bottom: 1em;
	/*black background for the photos*/
	background-color: #000000;
	position: relative; /*so the z-index works*/
	
	z-index: 2;
}
#wideFigured3 div.text{
	width: 52.75em;
	background-color: #ffdeca;
	margin-left: auto;
	margin-right: auto;
	margin-top: 1em;
	text-align: justify;
	padding: 0.625em;
}

.wideImaged3 {
	width: 667px;
	height: 500px;
	z-index: 5;
}

.wideImaged3above {
	width: 667px;
	height: 500px;
	z-index: 5;
	position: absolute;
}

.wideImaged3below {
	width: 667px;
	height: 500px;
	z-index: 2;
	position: absolute;
}
#placeHolder {
	width: 667px;
	height: 500px;
	z-index: 1;
	position: relative;
}

/*------------------------------Periodic Table styling*/
#el08 { /* Change width and height of radio button */
width:20px;
height:20px;
}

.elementInfo {
	position: absolute; /* Sit on top of the page content */
    width: 720px; /* Full width (cover the whole page) */
    height: 120px; /* Full height (cover the whole page) */
    top: 68px; 
    left: 90px;
    z-index: 4; /* Specify a stack order in case you're using a different order for other elements */
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    /* display: none; <- Crashes Chrome on hover */
    -webkit-appearance: none;
    margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
}

div.text button, div.standard button {
	border-radius: 0.313em;
	border: solid 1px #033a5c;
	color: #000000;
	background: linear-gradient(#ffffff, rgba(5,105,166,0.5));
}

div.text button:hover, div.standard button:hover {
	opacity: 1;
	cursor: pointer;
	background:  #ffffff;
	font-weight: bold;
}

#unitForm, #axisForm{
	width: 550px;
	margin: auto;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-weight: bold;
}

input [type="radio" i] {
	opacity: 1;
	cursor: pointer;
	background:  #a9370a;
}

.three-columns {
	width: 202px;
	float: left;
}

#bottomImage3{
	position: absolute;
	top: 30px;
	left: 100px;
	width: 380px;
	height: 30px;
}

#pathText{
	position: absolute;
	top: 320px;
	left: 500px;
	width: 360px;
	height: 100px;
  font-family: Arial, Helvetica, sans-serif;
	padding:10px;
	text-align: left;
	background-color: #ffdeca;
}