@import url(//fonts.googleapis.com/css?family=Fira+Sans:400,400i,500);

/*   {
border: 1px solid red !important;
 
}  

.booklets td {
	border: 2px solid red;
	} */


html, body {
	-webkit-text-size-adjust: 100%;
	-moz-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
	padding: 0;
	margin: 0;
	}

/* 62.5 means that 1.0em is equal to 10px, 1.2em equals to 12px etc. Size renders more accurately across platforms */	
	
body {
	font-family: 'Fira Sans', Calibri, Lucida, Roboto, Helvetica, sans-serif;
	font-size: 18px;
	line-height: 1.6em;
	text-align: center;
	background-color: #dedede;
	}

#content_single a:link, #content_single a:visited  {
	color: #c33;
	font-weight: 500;
	text-decoration: none;
	border-bottom: 1px dotted #c33;
	}

#content_single a:hover {
	color: #a82020;
	border-bottom: 1px solid #a82020;
	}
	
a:hover img:hover {
    -webkit-transition: .2s all;
	transition: width 2s;
    opacity: 0.7;
    filter: alpha(opacity=70); /* For IE8 and earlier */
}

#nav a:hover {
	color:  #bbb !important;
	}	
	
.sub-nav-back a:link, .sub-nav-back a:visited  {
	color:  white !important;
	border-bottom: 0px !important;
	}
	
.sub-nav-back a:hover {
	color:  #bbb !important;
	}
	
/* Blocks */

#container {
	width: 990px;
	margin: 0 auto;
	background-color: white;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	}	

#nav, #nav a {
	background-color: #8e8e93;
	text-align: left;
	padding: 8px 2px;
	color: white;
	font-size: 22px;
	font-weight: 500;
	text-decoration: none;
	}
	
#nav {
	border-bottom: 4px solid #999;
	}
		
#nav form, #nav fieldset  {
	float: right;
	margin-top: 2px;
	}

#header {
	background-color: white;
	text-decoration: none;
	text-align: left;
	margin: 0 0 10px 30px;
	}
	
#content_container {
	width: 990px;
	margin: 0 auto;
	text-align: left;
	background-color: white;
	}

#content_single {
	width: 920px;
	margin: 0 30px;
	}

#left, #left_front, #left_story {
	float: left;
	margin-bottom: 20px;
	}
	
#right, #right_front, #right_story {
	float: right;
	margin-bottom: 20px;
	}

#left {
	width: 500px;
	}

#right {
	width: 390px;
	}

#left_front  {
	width: 540px;
	}

#right_front {
	width: 340px;
	}

#left_story, #right_story {
	width: 440px;
	}
		
#footer {
	background-color: #8e8e93;
	text-align: left;
	width: 930px;
	padding: 10px 30px 10px 30px;
	}
	
#footer p, #footer a {
	color: white;
	text-decoration: none;
	}
	
#break, .break  {
	clear: both;
	}
	
blockquote {
	padding-left: 10px;
	width: 480px;
	border-left: 3px solid #8e8e8e;
	margin: 12px 0;
	}
	
/* blockquote p {
	color: #666;
	} */
	
blockquote.infobox {
	background-color: white;
	border: 3px solid #8e8e8e;
	padding-right: 6px;
	margin-bottom: 6px;
	}
	
.companydates td {
	background-color: #dedede;
	padding: 4px;
	border: 1px solid white;
	}
	
.product-chart td {
	width: 100%;
	white-space: nowrap;
	text-align: center;
	padding: 6px;
	border: 1px solid black;
	}

p {
	margin-bottom: 6px;
	}
		
.caption, .companydates {
	font-size: 16px;
	line-height: 1.6em;
	margin-bottom: 6px;
	}
	
.spaceright80 {
	padding-right: 80px;
	}

.spaceleft20 {
	padding-left: 20px;
	}
	
iframe {
	margin-top: 6px;
	}
	
hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #8e8e93;
    padding: 0;
    margin: 18px 0 12px 0;
}
	
.recipe {
	text-align: right;
	}
		
.indent {
	margin-left: 35px;
	}

.liststyle {
	margin-top: 6px;
	margin-left: 20px;
	}

.note {
	color: red;
	}
	
#sub-nav {
	line-height: 2.2em;
	font-size: 24px;
	font-weight: 500;
    margin: 18px 0 12px 0;
    border-bottom: 1px solid black;
	}
	
.sub-nav-front {
	color: black;	
	background-color: white;
	margin-right: 8px;
	padding: 12px 8px 12px 8px;
	border-left: 1px solid #808d9e;
	border-right: 1px solid #808d9e;
	border-top: 1px solid #808d9e;
	border-bottom: 2px solid white;
	}
	
.sub-nav-back {
	color: white;	
	background-color: #8e8e93;
	padding: 7px 8px 12px 8px;
	margin-right: 8px;
	}
	
.sub-nav-back a:link, a:visited {
	text-decoration: none;
	color: white;	
	}
	
h1, h2, h3, h4, h5 {
	font-weight: 500;
	margin-top: 15px;
	margin-bottom: 5px;
	}

/*
h1 {
	font-size: 36px;
	}	
*/
	
h1.special {
	margin-top: 30px;
	margin-bottom: 30px;
	font-size: 56px;
	color: #cc3333;
	}	
	
h2 {
	font-size: 24px;
	}
		
h3 {
	font-size: 20px;
	}
	
h4, h5 {
	font-size: 18px;
	}
	
sup {
	vertical-align: top;
	}
	
b {
	font-weight: 500;
	}

/* images */	

#right img {
	padding: 3px;
	border: 1px solid #b4b4b4;
	}
	
#left_front img {
	display: inline; 
	margin: 5px 10px 0 0;
	float: left;	
	background-color: white;
	border: 1px solid #b4b4b4;
	}	
	
#right_front img {
	display: inline; 
	margin: 5px 10px 15px 0;
	float: left;	
	background-color: white;
	}	
	
img.border {
	border: 1px solid #b4b4b4;
	}
	
img.insertleft {
	margin: 5px 5px 5px 0;
	float: left;
	}
		
img.insertright {
	margin: 5px 0 5px 10px;
	float: right;
	}

img.bookleft {
	margin-right: 5px;
	border: 1px solid black;
	float: left;
	}
	
/* special */
	
.ref {
	text-indent: -50px;
	margin-left: 50px;
	word-wrap: break-word;
	}

dl {
	margin-top: 6px;
	}
		
dd {
	margin-left: 15px;
	}
	
thead {
	background-color: black;
	color: white;
	}
	
.booklets th {
	background-color: black;
}

.chart {
	width: 100%;
	}

.chart td {
	padding: 2px 0;
	}
	
.storylist {
	margin-top: 10px;
	margin-left: 20px;
	}	
		
.timeline150 {
	width: 170px;
	}
	
.timeline {
	width: 70px;
	padding-right: 10px;
	/*padding-top: 10px;*/
	}
	
.chart tr:nth-child(odd), .booklets tr:nth-child(odd) {
  background-color:  #dedede;
}

table.recipe-60 {
	width: 60%;
	}

table.recipe-70 {
	width: 70%;
	}
		
table.recipe-80 {
	width: 80%;
	}
	
table.recipe-90 {
	width: 90%;
	}
	
table.recipe-100 {
	width: 100%;
	}
	
td.recipe-10 {
	width: 10%;
	}

.booklets {
	table-layout: fixed;
	width: 900px;
	}
	
.width-6  {
	width: 6%;
	}
	
.width-20  {
	width: 20%;
	}

.width-30  {
	width: 30%;
	}
	
.width-40  {
	width: 40%;
	}
	
.width-45  {
	width: 45%;
	}
	
.width-50  {
	width: 50%;
	}
	
.booklets td:nth-child(4) {
  text-align: center;
}
			
li em {
	font-weight: 500;
	}
	
p em {
	font-style: italic;
	}

.underline {
	text-decoration: underline;
	}
	  
.lift {
	margin-top: -3px;
  }
  
.pull {
	margin-bottom: -3px;
  } 
  
.drop {
	margin-top: 6px;
  }
  
.go-top  {
    position: fixed;
    width: 60px;
    height: 60px;
    right: -10px;
    bottom: 80px;
	font-weight: 500 !important;
	background-color: #8e8e93;
	font-size: 28px !important; 
	padding: 0.4em;
	border: 1px solid white;
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 10px 0 rgba(0, 0, 0, 0.2);
}

.go-top:hover {
	color:  #bbb !important;
}

.email-hover a, .email-hover a:visited {
	color:  white;
	border-bottom: 1px dotted white;
}

.email-hover a:hover  {
	color:  #bbb !important;
	border-bottom: 1px solid #bbb !important;
}

.footer-top {
	float: right;
	color: white;
	text-decoration: none;
  }
  
.footer-top a:hover {
	color:  #bbb !important;
  }