/*
*  fixed-layout.css
*
*  Histology Guide
*  Version 4.2
*
*  Copyright (c) 2005-2019. T. Clark Brelje and Robert L. Sorenson. All rights reserved.
*/

@charset "utf-8";
/* Set HTML 5 tags to display:block so browsers know how to render the tags properly. */
header, section, footer, aside, nav, article, figure, figcaption, hgroup {
	display: block;
}
/* -- Fixed width wrapper -- */
#wrapper {
	width: 960px;
	margin: 0 auto;
	background: #fff;
	padding-top: 100px;
}

/* -- Body -- */
body {
	margin: 0;
	padding: 0;
	color: #3f3f3f;
	background: #777;
	font: 400 14px/19px 'Open Sans', sans-serif;
}

/* -- Footer -- */
footer {
	background: #00529A;
	clear: both;
	color: #fff;
	font-size: 13px;
	line-height: 50px;
	text-shadow: 1px 1px 2px rgba(64, 64, 64, .33);
	position: relative;
	text-align: center;
}

/* -- Element/tag selectors -- */
ul, ol, dl {
	padding: 0;
	margin: 0;
}

/* ================================================================================
   Header Tags
   ================================================================================ */

h1 {
}

h2 {
	color: #000;
	color: #2980b9;
	margin: 25px 0px 0px 50px;
	padding: 0;
	font: 400 26px/1.33 'PT Serif', serif;
	transition: color 0s linear, background-color 0s linear;
	text-shadow: 1px 1px 2px rgba(128, 128, 128, .5);
}

h3 {
	margin: 15px 0px 0px 50px;
	padding: 0;
	color: #000 !important;
	font: 400 20px/1.33 'PT Serif', serif;
	transition: color 0s linear, background-color 0s linear;
	text-shadow: 1px 1px 2px rgba(128, 128, 128, .5);
}

h4, h5, h6 {
	color: #3f3f3f;
	font: 400 14px/1.33 'PT Serif', serif;
	margin: 18px 0 9px 0;
	padding: 0;
	padding-left: 60px;
}

/* ================================================================================
   Header - title, subtitle, appmenu
   ================================================================================ */
 
/* Title and subtitle
======================================== */

header {
	position: fixed;
	top: 0;
	z-index: 100;
	width: 960px;
	background: #3f3f3f;
	background:	-moz-linear-gradient(left, #001427 10%, #00529A 90%);
	background:	-webkit-linear-gradient(left, #001427 10%, #00529A 90%);
	background:	-o-linear-gradient(left, #001427 10%, #00529A 90%);
	background:	-ms-linear-gradient(left, #001427 10%, #00529A 90%);
	background:	linear-gradient(left, #001427 10%, #00529A 90%); /* W3C */
}
header .title {
	float: left;
	margin: 0;
	padding: 0;
	padding-left: 40px;
	padding-right: 25px;
	color: #accdfd;
   	font: 700 40px/70px 'PT Serif',serif;
	text-shadow: 1px 1px 2px rgba(128, 128, 128, .9);
}
header .subtitle {
	float: left;
	margin-top: 36px;
	color: #ccc;
	font: 600 20px/20px 'Open Sans', sans-serif;
	text-shadow: 1px 1px 2px rgba(128, 128, 128, .9);
}

header .options {
	float: right;
	font-size: 14px;
	line-height: 70px;
}
header .options li {
	float: left;
	display: inline;
	list-style-type: none;
}
header .options a:link,
header .options a:visited,
header .options a:focus {
	display: block;
	padding-left: 10px;
	padding-right: 10px;
	color: #fff;
	transition: color 0s linear, background-color 0s linear;
}
header .options a:hover,
header .options a:active {
	color: #fff;
	background: #0078d7;
	text-shadow: 1px 1px 2px rgba(64, 64, 64, .33);
}

/* Horizontal app menu
======================================== */

.appmenu {
	position: relative;
	float: left; 
	width: 960px;
	height: 28px;
	background: #cce1ff;
	font-size: 14px;
	line-height: 28px;
	text-shadow: 1px 1px 2px rgba(64, 64, 64, .33);
}
.appmenu ul {
	list-style-type: none;
}
.appmenu li {
	display: inline-block;
}
.appmenu li a:link,
.appmenu li a:visited,
.appmenu li a:focus {
	display: block;
	padding: 0px 20px;
	color: #00529A;
	text-shadow: 1px 1px 2px rgba(64, 64, 64, .33);
	transition: color 0s linear, background-color 0s linear;
}
.appmenu li a:hover,
.appmenu li a:active {
	color: #fff;
	background: #0078d7;
}
/* -- Navigation indicator --*/
body.appmenu-home a.appmenu-home,
body.appmenu-slidebox a.appmenu-slidebox,
body.appmenu-EM-atlas a.appmenu-EM-atlas,
body.appmenu-quiz a.appmenu-quiz,
body.appmenu-index a.appmenu-index,
body.appmenu-search a.appmenu-search,
body.appmenu-help a.appmenu-help {
	display: block;
	padding: 0px 20px;
	color: #3f3f3f;
	background: #fff;
	font: 400 14px/28px 'Open Sans',sans-serif;
	text-shadow: 1px 1px 2px rgba(64, 64, 64, .33);
	transition: color 0s linear, background-color 0s linear;
}
body.appmenu-home a.appmenu-home:hover,
body.appmenu-slidebox a.appmenu-slidebox:hover,
body.appmenu-EM-atlas a.appmenu-EM-atlas:hover,
body.appmenu-quiz a.appmenu-quiz:hover,
body.appmenu-index a.appmenu-index:hover,
body.appmenu-search a.appmenu-search:hover,
body.appmenu-help a.appmenu-help:hover {
	color: #fff;
	background: #0078d7;
}

/* ================================================================================
   Aside - atlas of histology
   ================================================================================ */

aside {
	float: right;
	position: relative;
	left: 0px;
	width: 260px;
	color: #777;
	font: 400 13px/18px 'Open Sans', sans-serif;
}
aside .background {
	margin-top: 30px;
	margin-left: 30px; 
	margin-right: 30px;
	margin-bottom: 0px;
	background: #e7e7e7; /* light gray */
	background: #f3f6ff; /* light blue */
	border: 1px solid #CCC;
	border: 1px solid #cddff0;
}
aside .description {
	padding-top: 5px;
	padding-bottom: 5px;
	margin-left: 5px;
	margin-right: 5px;
}
aside p {
	margin-bottom: 15px;
	padding-top: 5px;
	padding-bottom: 5px;
	padding-left: 5px;
	padding-right: 5px;
}
aside .title a:link,
aside .title a:visited,
aside .title a:focus {
	font-family: serif;
	font-size: 20px;
	text-decoration: none;
	text-shadow: 1px 1px 2px rgba(64, 64, 64, .33);
	transition: color 0s linear, background-color 0s linear;
}
aside .title a:hover,
aside .title a:active {
	text-shadow: 1px 1px 2px rgba(64, 64, 64, .33);
}
aside img {
	margin-top: 10px;
	margin-left: 10px;
}

/* -- Navigation indicator --*/
body.appmenu-slidebox a.nav-chapter,
body.appmenu-EM-atlas a.nav-chapter,
body.appmenu-quiz a.nav-chapter {
	color: #aa00aa;
	text-shadow: 1px 1px 2px rgba(64, 64, 64, .33);
}
body.appmenu-slidebox a.nav-chapter:hover,
body.appmenu-EM-atlas a.nav-chapter:hover,
body.appmenu-quiz a.nav-chapter:hover {
	color: #fff;
	background: #6699cc;  /* light blue */
	background: #0078d7;
	text-shadow: 1px 1px 2px rgba(64, 64, 64, .33);
}

/* ================================================================================
   Navigation
   ================================================================================ */

nav,
nav-index {
	float: right;
	position: relative;
	left: 0px;
	width: 200px;
	color: #777;
	font: 400 13px/18px 'Open Sans', sans-serif;
}
nav-index {
	position: relative;
}
nav,
nav-index .background {
	margin-top: 30px;
	margin-left: 30px;
	margin-right: 30px;
	margin-bottom: 0px;
	background: #e7e7e7; /* light gray */
	background: #f3f6ff; /* light blue */
	border: 1px solid #CCC;
	border: 1px solid #cddff0;
}
nav-index .background {
	margin-left: 60px;
	margin-right: 60px;
}
nav,
nav-index .center{
	padding-top: 5px;
	padding-bottom: 5px;
	font: 400 13px/18px 'PT Serif', sans serif;
}
nav ul {
	list-style-type: none;
	width: 200px;
	font: 400 13px/18px 'Open Sans', sans-serif;
	text-align: left;
}
nav-index ul {
	list-style-type: none;
	width: 80px;
	font: 400 13px/18px 'Open Sans', sans-serif;
	text-align: center;
}
nav ul a:link,
nav ul a:visited,
nav ul a:focus,
nav-index ul a:link,
nav-index ul a:visited,
nav-index ul a:focus {
	display: block;
	padding-top: 3px;
	padding-bottom: 3px;
	color: #707070;
	text-decoration: none;
	transition: color 0s linear, background-color 0s linear;
}
nav ul a:link,
nav ul a:visited,
nav ul a:focus {
	padding-left: 15px;
	padding-right: 15px;
}
nav ul a:hover,
nav ul a:active,
nav-index ul a:hover,
nav-index ul a:active { 
	color: #fff;
	background: #2980b9;
	background: #0078d7;
}
nav,
nav-index .center {
	text-align: center;
}

/* ================================================================================
   Content
   ================================================================================ */

#content {
	float: left;
	position: relative;
	left: 30px;
	width: 685px;
	min-height: 1000px;
}
#content p {
	margin: 12px 0px 5px 0px;
	padding: 0px 60px 0px 60px;
	color: #444;
}
#content ul {
 	list-style-type: disc;
	margin: 0px 50px 0px 75px;
}
#content ul ul {
 	list-style-type: disc;
	margin: 0px 30px 0px 50px;
}
#content .list {
	padding: 0px 60px 0px 60px;
	color: #444;
}
#content ol {
	margin: 0px 50px 0px 75px;
}
#content ol ul {
	margin: 0px 15px 0px 50px;
}
#content .right-img {
	float: right;
	display: block;
	padding: 25px 50px 25px 25px;
}
#content .left-img {
	float: left;
	display: block;
	margin: 25px 25px 25px 50px;
}
#content .center-img {
	float: left;
	display: block;
	margin-left: auto;
	margin-right: auto;
	padding-top: 25px;
	padding-bottom: 25px;
}
#content .help-img {
	padding: 0px 0px 0px 125px;
}

#content .response {
	display: none;
	margin: 0px 75px 0px 50px;
	padding: 3px 10px 3px 10px;
	color: #3f3f3f;
	border: solid 1px #ffcc00;
	border: solid 1px #ecdf64;
	border-radius: 5px;
	background: #ffffcc;
	background: #fffad4 ;
}

#content .response ul {
 	list-style-type: disc;
	margin: 0px 0px 0px 15px;
}

#content .response-list {
	display: none;
	margin: 0 0;
	padding: 3px 10px 0px 10px;
	border: solid 1px #ffcc00;
	border-radius: 5px;
	background: #ffffcc;
	color: #3f3f3f;
}

#content .response-image {
	display: block;
	margin: 0 0;
	padding: 0 0;
	outline: none;
}

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

a img {
	border: none;
}

/* -- Styling for links must remain in this order -- */
a {
	transition: color .33s linear, background-color .33s linear;
}

a:link,
a:visited,
a:focus {
	color: #0078d7;  /* cyan */
	color: #324fe1;  /* blue */
	text-decoration: none;
/*	outline: none; */
}

a:hover,
a:active {
	color: #ff0000;
	color: #ff322e;  /* orange */
}

/* ================================================================================
   Miscellaneous
   ================================================================================ */

/* -- miscellaneous float/clear classes -- */
.clearfloat {
	visibility: hidden;
	display: block;
	clear: both;
	height: 0;
	content: "";
}

/* -- Move anchor links from underneath header --*/
.jumptarget:before { 
	content: ""; 
	display: block; 
	height: 125px; 
	margin-top: -125px; 
} 

.icomoon {
	font: 400 12px/24px 'icomoon',sans-serif;
}

.disabled {
	color: #aaa;
}

.center {
	margin: 0px auto;
}

/* Prevent the contents of draggable elements from being selectable. */
[draggable] {
  -moz-user-select: none;
  -khtml-user-select: none;
  -webkit-user-select: none;
   /*
     Introduced in IE 10.
     See http://ie.microsoft.com/testdrive/HTML5/msUserSelect/
   */
   -ms-user-select: none;
   user-select: none;
}

/* ================================================================================
   Slide tables
   ================================================================================ */

.table-spacing {
	margin: 0 30px !important;
}
/* -- Hidden table for slides -- */
.slide-table {
	margin: 0 auto;
	margin-top: 15px;
	width: 580px;
	border-collapse: collapse;
}
.slide-table img {
	vertical-align: middle;
	margin-top: 1px;
	margin-bottom: 1px;
}
.slide-table a,
.slide-table a:link {
	display: inline-block;
	border: solid 1px transparent;
}
.slide-table a:hover {
	z-index: 10;
	border: solid 1px #ff322e;
	animation-duration: 1s;
	animation-fill-mode: both;
	animation-timing-function: ease-in-out;
	animation-name: pulse;
}
.slide-table .description {
	width: 400px;
	padding-left: 20px;
}
.slide-table p {
	margin: 0 !important;
	font-size: 14px;
}
.slide-table .description a,
.slide-table .description a:link {
	border: none;
	color: #000 !important;
}
.slide-table .description a:hover {
	color: #ff322e !important;
}
.slide-table .description .title {
	color: #000;
}
.slide-table .description .subtitle {
	color: #a7a7a7 !important;
}
.slide-table .description .subtitle2 {
	font-size: 16px;
	font-weight: bold;
}
.slide-table .description .subtitle-links {
	color: #777; 
	display: inline-block;
	font: 400 13px/13px 'Open Sans',sans-serif;
	text-align: center;
}
.slide-table .description .subtitle-links a,
.slide-table .description .subtitle-links a:link {
	border: none;
	color: #777 !important;
}
.slide-table .description .subtitle-links a:hover {
	color: #ff322e !important;
}

/* ================================================================================
   Fancybox
   ================================================================================ */

.fancybox {
	margin-top: 30px;
	margin-left: 0px;
	margin-bottom: 20px;
}

/* ================================================================================
   Chapters
   ================================================================================ */

.chapters-box {
	display: flex;
	flex-direction: row;
	flex-flow: row wrap;
	margin-left: 60px;
	width: 540px;
}
.chapters-box-item {
	width: 180px;
	margin-top: 20px;
	text-align: center;
}
.chapters-box-item a,
.chapters-box-item a:link,
.chapters-box-item a:focus {
	display: inline-block;
	border: solid 1px transparent;
}
.chapters-box-item a:hover,
.chapters-box-item a:active {
	z-index: 10;
	border: solid 1px #ff322e;
	animation-duration: 1s;
	animation-fill-mode: both;
	animation-timing-function: ease-in-out;
	animation-name: pulse;
}
.chapters-box-title a,
.chapters-box-title a:link,
.chapters-box-title a:focus {
	color: #000 !important;
	font-weight: 700;
}
.chapters-box-title a:hover,
.chapters-box-title a:active {
	border: 0;
	color: #ff322e !important;  /* orange */
}

.slide-shadow {
	-webkit-box-shadow: 2px 2px 50px -10px rgba(96,96,96,1);
	-moz-box-shadow: 2px 2px 50px -10px rgba(96,96,96,1);
	box-shadow: 2px 2px 50px -10px rgba(96,96,96,1);}
}