/* SVG Interactive Diagram Kit - version 4.0.0 */

/* Previous code from former interactive diagrams */
.SS-items {
position : relative;
margin-top: 20px;
margin-bottom: 20px;
}

.highlight {
fill:#09C;
border:1px solid rgba(0, 60, 128, 0.41);}

.SS-item {
position : relative; 
top:0;
left:0;
display :none;
}

.SS-item img{
	 max-width: 100%;
}
.SS-items .SS-item figcaption {
background:#efefef;
padding:3px;
}
.SS-item:first-child {
display : block;
}

.SS-items .hotspots a{
display: block;
position: absolute;
border-radius: 5px;
}

.SS-items .hotspots a:hover{
  cursor: pointer;
  background-color: rgba(255,255,255,.19);
}

.SS-items .hotspots a{
    line-height: 0; 
    font-size: 0;
    color: transparent; 
 }

.my-svg-container{
 display: inline-block;
 position: relative;
 width: 100%;
 padding-bottom: 55%; /* depends on svg ratio, for my zebra height/width = 1.2 so padding-bottom = 50% * 1.2 = 60% */
 height:auto;
 vertical-align: middle; /* top | middle | bottom ... do what you want */
}

.my-svg{ /* svg into : object, img or inline */
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  height:auto;
  width: 100%; /* only required for <img /> */
}

.SS-description{
padding: 0 15px;
width:100%;
text-align:left;
}
.controls {
margin : 10px 0;
}
.slidestatus{
display: inline;
padding-left: 5px;
color: #696969;
margin-bottom: 0px;
font-size: 12px;
}

.figcaption {
	margin:15px 5px;
}

.a1{
	border: 1px solid #efefef;
	position:absolute;
	display:block;
	    opacity: 0.5;
}
.a1:hover{
background-color:#fff;
    opacity: 0.5;
	border-radius:5px;
}


/*                        Specific to SVG Interactive Diagrams
 -------------------------------------------------------------- */
 #Intro p {
	 margin-bottom:0px;
 }
  
 #Intro {
	 max-width: 900px;
	 margin-bottom: 18px;
	 margin-top: 8px;
 }

 body * {
	font-family: 'Oracle Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
	font-size: 16px;
	color: #1a1816;
	font-weight: normal;
	}

h1 {
	font-size: 33px;
	color: #1a1816;
	font-weight: normal;
	
}
 
 #SlideshowControls {
	 margin-top:5px;
 }
 
 
 #SlideContainer {
	width: 100%;
	height: 62%;
	overflow: auto;
	
}

#SVGGraphic {
	padding:10px 30px 10px 30px;
}


.box {
     fill:red;
}

svg a {
	cursor: default;
}
 
.clickable:hover {
	cursor: pointer; cursor: hand; 
	fill-opacity:0.6;
}

#Notes {
	max-width:900px;
}

#Notes p, #Notes li {
	font-family: 'Oracle Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
	font-size: 16px;
	line-height: 1.5;
}

.disabled { /* needed to support svg doing the button formatting */
	border-color: #2e6da4;
	background-color: #337ab7;
}

.hideme { /* added to hide SlideList in index.html and Overview section*/
  display:none;
}

.breadcrumb * {
   font-size: 12px;
}

.breadcrumb > li {
	font-size: 12px;
}

.breadcrumb  {
	padding: 0px;
	margin-bottom: 5px;
}

.breadcrumb > li + li:before {
  content: "/";
  padding: 0 6px;
  color: #cccccc;
  font-size:12px;
}

#BreadcrumbDiv {
	margin-left:0px;
	margin-top: 10px;
	
}


#Breadcrumbs a.last-item {
	color: #696969;
        font-size:12px;
}

#Breadcrumbs a.last-item:hover {
	text-decoration: none;
	cursor:default;
}

#Breadcrumbs a.last-item:focus {
	text-decoration: none;
}

#SlideName {
	display: inline;
	font-weight: bold;
	font-size: 10px;
	margin-left:3px;
}

#IAD {
	min-height:101% !important;
	min-width:100% !important;
}

h2 {
	margin:6px 0px 0px 0px;
	padding:0px;
	font-size:33px;

}

.oraclecode {
	font-family: "Courier New", Courier, monospace;
	display:inline;
}

ol ol li {
	list-style-type: lower-alpha;
}

ol ol ol li {
	list-style-type: lower-roman;
}

.iadcontainer {
	overflow:hidden;
}