@charset "utf-8";
/* CSS Document for
Laboratoro Digital Book "Making Things With Books, Making Books With Things
Mick Eadie
Polemicweb
October 2013
*/


/* Reset Styles
***********************/
html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed,figure, figcaption, footer, header, hgroup,menu, nav, output, ruby, section, summary,time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; }

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,footer, header, hgroup, menu, nav, section {display: block;}
ol, ul {list-style: none;}
blockquote, q demo
blockquote:before, blockquote:after,q:before, q:after {content: ''; content: none;}
table {border-collapse: collapse; border-spacing: 0;}
strong {font-weight: bold;}
em {font-style: italic;}

/* no script box */
noscript div{margin:20px auto;padding:20px;text-align:center;width:540px;height:300px;background:#FFF;color:black;border:2px solid black}
noscript div p{margin:20px;}


/* ********************* layout
*/

html {
  height: 100%; 
  margin-bottom: 1px; 
  overflow-y: scroll;
}

#container{
		width:990px;
		margin: 0 auto;
		background:#FFF;
		padding:10px;
		position:relative;
		border-left:1px solid #e3e3e3;
		border-right:1px solid #e3e3e3;
}

#left{
	width:160px;
	float:left;
}

#main{
	width:670px;
	float:left;
	position:relative;
	margin-left:20px;
	border-left:1px solid #f5f3f3;
	border-right:1px solid #f5f3f3;
}

#page_holder{
	width:540px;
	margin-left:65px;
}

#right{
	width:100px;
	float:left;
	margin-left:30px;
	margin-top:50px;
}

/* ************************************** Arrows back and next
*/

.right_arrow {display:none;position:absolute;height:100%;width:30px;top:0;right:2px;display:block;}
.left_arrow{display:none;position:absolute;height:100%;width:30px;top:0;left:2px;display:block}

.left-arrow-img
{
	width:28px;
	height:50px;
	display:block;
	text-decoration:none;
	background-image:url(../images/sys/arrow-icons.png);
	background-position:-56px 0;
	background-size:112px 50px;
	cursor:pointer;
	position:relative;
	top:200px;
}

.left-arrow-img:hover{ background-position:-84px 0; }

.right-arrow-img
{
	width:28px;
	height:50px;
	display:block;
	text-decoration:none;
	background-image:url(../images/sys/arrow-icons.png);
	background-position:0px 0;
	background-size:112px 50px;
	cursor:pointer;
	position:relative;
	top:200px;
}

.right-arrow-img:hover{ background-position:-28px 0; }


/* ************************ Body, Headings, Papragraphs, Href
*/

body{
	font-family: 'IM Fell English', serif;
	font-size:1.2em;
	background:#f0f0f0;
	color:black;
	-webkit-font-smoothing:antialiased;
	text-rendering: optimizeLegibility;
	text-shadow: 0 0 1px rgba(0,0,0,0.3);
	height:100%;
	line-height: 1.3em;
}

h1{font-size:1.4em}
h2{font-size:1.3em}
h3{font-size:1.2em}

p{text-align:left;margin:10px;text-align:justify;}

a:hover {
  cursor:pointer;
 }

.page a {
	color:#7b7b7b;
	text-decoration:none;
	border-bottom: 1px dashed;
	text-shadow: 0 0 1px rgba(0,0,0,0.1);
}

.page a:hover{
	color:#464545;
	text-decoration:none;
}

.page a:active{
	color:#000;
	text-decoration:none;
}


#left a {
	color:#7b7b7b;
	text-decoration:none;
	text-shadow: 0 0 1px rgba(0,0,0,0.1);
}

#left a:hover{
	color:#464545;
	text-decoration:underline;
}

#left a:active{
	color:#000;
	text-decoration:underline;
}


/* ************************************ lists
*/

ul{
	list-style-type:none;
	font-size:85%;
	position:relative;
	top:50px;
}

ul li{
	margin-left:10px;
	margin-top:7px;
}

ul#page-index{
	width:90px;
	background-color:#fff;
	top:0;
}

ul#page-index img{
	margin:5px 0;
	border:1px solid #e7e4e4
}



/* *************************************** The Pages
*/

.page{text-align:center;}

/******************************************  Media Files
*/


.media-content,
.media1-content,
.media2-content,
.media3-content,
.media4-content,
.media5-content,
.media6-content,
.media7-content,
.media8-content
	{
	display:none;
	width:520px;
	border:1px solid #333;
	text-align:centre;
	background-color:#e7e4e4;
	background-color:#000;
	padding:10px;
	text-align:centre;
	}
	
.media1-content{height:430px;}
.media-content{height:340px;}
.media2-content,
.media3-content,
.media4-content,
.media5-content,
.media6-content,
.media7-content,
.media8-content
	{height:60px;}