/* html adaptions */ 

body {
	margin-left: 0px;
	margin-top: 0px;
	background-color:#f0f1e9 ;
}


body  h1 {
	font-family: Arial;
	font-weight: bold;
	font-size: 1.2em;
	color: #000;
}

body  h2 {
	font-family: Arial;
	font-weight: bold;
	font-size: 1.5em;
	margin-top: 6px;
	margin-bottom: 6px;
	color: #000;
	
}



body h3{
	font-family: Arial;
	font-weight: bold;
	font-size: 1em;
	color: #000;
	font-style:italic;
	font-weight:bold;
	margin-top: 6px;
	margin-bottom: 6px;
	background-color: #f0f1e9;
	clip: rect(1px,auto,auto,auto);
}



body,td,th {
	font-family: Arial;
	font-size: 0.9em;
}

/* is this necessary? Check out */

h1 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1.5em;
	font-style: normal;
	font-weight: bold;
	color: #000;
}

/********************************/

a:link {
	text-decoration: none;
	color: #b34343;
}
a:visited {
	text-decoration: none;
	color: #b34343;;
}
a:hover {
	text-decoration: none;
	color: #000;
 	cursor:pointer;
}

a:active {
	text-decoration: none;
	color: #CD4921;
}

p.date{
	color: #b34343;
	font-size: 1em;
	font-weight:bold;
	margin-bottom:0.3em;
}



/* user css begins */

#wrapper{
	position:relative;
	margin-left:auto;
	margin-right:auto;
	height:auto;
}



section{
	float:left;
	height:auto;
	width: 950px;
	clear:both;
}







/* on all pages */




/* only on index page */

.alighnRight {
	text-align: right;
}


/* on all pages */


	






/* not sure if this is used anymore */

#left{
	width:250px;
	float: left;
	align: center;

}

/**********************************/

/* used on all pages - main content block */

#mainColumn{
	float: left;
	width:680px;
	height:auto;
}

/* episode or article button */

.episodes{
	float: left;
	width:150px;
	height:80px;
	margin-top:10px;
	margin-bottom: 30px;
	margin-right:40px;
	padding:3px;
	background-color:#f0f1e9 ;
	
}




/* larger text for episode or article button */

.episode{
	font-family: Arial;
	font-size: 1.2em;
	font-weight:bold;
	color: #666666;;
	
}

/* smaller text for episode or article button */
.section{
	font-family: Arial;
	font-size: 1.8em;
	font-weight:bold;
	color: #b34343;
}

.index{
	float: left;
	width:150px;
	height:80px;
	border: 5px solid #8a8a8a;
    border-radius: 20px;
    -moz-border-radius: 20px;
	-khtml-border-radius: 20px;
	-webkit-border-radius: 20px;
		 box-shadow:5px 5px 10px #000;
	-webkit-box-shadow:5px 5px 10px #000;
	-moz-box-shadow: 5px 5px 10px #000;
	margin-top:10px;
	margin-bottom: 10px;
	margin-right:40px;
	padding-top:10px;
	padding-left:10px;
}

#spacer{

	margin-top:110px;
}

@media only screen and (min-width: 1050px) {
    /* desktop */
	#wrapper{
		width:950px;
	}
	
	/* Patch to correct a slight out of alignment of first page with other pages */
	#frame{
		position:relative;
		margin-top:14px;
		margin-left:-11px;
		
	}
	section{
		width:950px;
	}
	header{
		height:112px;
		background-image: url(../images/banner2.jpg);
		background-repeat:no-repeat;
	}
	#trailer{
		height:0px;
		width:0px;
		display:none;
	}
	nav{
		height: 20px;
		width: 950px;
		font-family: Arial, sans-serif;
		font-weight:400;
		font-size: 1.2em;
		font-weight: bold;
		padding-top: 10px;
	}
	#container{
		width: 930px;
		height: 240px;
	}
	
	ul {
  		margin: 0;
  		padding: 0;
  		list-style-type: none;
	}

	li {
  		margin-right:75px;
  		float:left;
	}
	
	#leftColumn{
		float:left;
		width:260px;
		margin-top: 3px;
	}


	#rightColumn{
		float:left;
		width:260px;
				margin-top: 3px;

	}


	#centreColumn{
		float: left;
		width:386px;
		height:544px;
		margin-top:20px;
		margin-left:22px;
		margin-right:22px;
		background-image:url(../images/signpost.jpg);
	}
	#one{
		float: left;
		width:150px;
		height:150px;
		margin-top:30px;
		margin-bottom: 20px;
		margin-right:20px;
		background-image:url(../images/one.jpg)
	}

	/* only on index page */
	#two{
		float: right;
		width:150px;
		height:150px;
		margin-top:30px;
		margin-bottom: 20px;
		margin-left:40px;
		background-image:url(../images/two.jpg)
	}

	/* only on index page */

	#three{
		float: left;
		width:150px;
		height:150px;
		margin-right:40px;
		background-image:url(../images/three.jpg)
	}

	/* only on index page */

	#four{
		float: right;
		width:150px;
		height:150px;
		margin-left:40px;
		background-image:url(../images/four.jpg);
	}
	/* the edging of the boxes */

	.boundary, .episodes, .smallepisodes{
		border: 12px solid #8a8a8a;
		border-radius: 20px;
		-moz-border-radius: 20px;
		-khtml-border-radius: 20px;
		-webkit-border-radius: 20px;
		 box-shadow:10px 10px 20px #000;
		-webkit-box-shadow:10px 10px 20px #000;
		-moz-box-shadow: 10px 10px 20px #000;
		margin-bottom: 2em;
	}
	.smallindex{
		float: left;
		width:150px;
		height:60px;
		border: 5px solid #8a8a8a;
		border-radius: 20px;
		-moz-border-radius: 20px;
		-khtml-border-radius: 20px;
		-webkit-border-radius: 20px;
		box-shadow:5px 5px 10px #000;
		-webkit-box-shadow:5px 5px 10px #000;
		-moz-box-shadow: 5px 5px 10px #000;
		margin-top:10px;
		margin-bottom: 10px;
		margin-right:40px;
		padding-top:10px;
		padding-left:10px;
	}
	#footer{
		float:left;
		clear:both;
		width:950px;
		height: 200px;
	}
	
	.footer img{
		float:left;
		margin-left: 50px;
		margin-bottom: 10px;
		border: 5px solid #8a8a8a;
		border-radius: 10px;
		-moz-border-radius: 10px;
		-khtml-border-radius: 10px;
		-webkit-border-radius: 10px;
		box-shadow:5px 5px 10px #000;
		-webkit-box-shadow:5px 5px 10px #000;
		-moz-box-shadow: 5px 5px 10px #000;
	}
}

@media only screen and (min-width: 700px) and (max-width: 1050px) {
    /* tablets */
	#wrapper{
		width:700px;
	}
	
	#frame{
		position:relative;
		margin-top:14px;
	}
	section{
		width:700px;
		
	}
	
	header{
		height:80px;
		background-image: url(../images/banner2.jpg);
		background-size: 100% 100%;
		margin-bottom: 8px;

	}
	#trailer{
		height:0px;
		width:0px;
		left:-2000px;
		display:none;
		
	}

	nav{
		height: 20px;
		width: 700px;
		font-family: Arial, sans-serif;
		font-weight:400;
		font-size: 1.0em;
		font-weight: bold;
		padding-top: 9px;

	}
	
	#horizontalLine{
		position:relative;
		padding-top:4px;
	}
	#container{
		width: 700px;
		height: 240px;
				
	
	}
	ul {
  		margin: 0;
  		padding: 0;
  		list-style-type: none;
	}

	li {
  		margin-right:45px;
  		float:left;
	}
	/* only on index page */
	
	#leftColumn{
		float:left;
		width:200px;
	}
	#rightColumn{
		float:left;
		width:200px;
	}

	#centreColumn{
		float: left;
		width:250px;
		height:544px;
		margin-top:80px;
		margin-left:25px;
		background-image:url(../images/Small.jpg);
		background-repeat:no-repeat;
		
	}
	
	#one{
		float: left;
		width:100px;
		height:100px;
		margin-top:30px;
		margin-bottom: 20px;
		margin-right:40px;
		background-image:url(../images/one.jpg);
		background-size: 100% !00%;
	}

	/* only on index page */
	#two{
		float: right;
		width:100px;
		height:100px;
		margin-top:30px;
		margin-bottom: 20px;
		margin-left:40px;
		background-image:url(../images/two.jpg);
		background-size: 100% !00%;
	}

	/* only on index page */

	#three{
		float: left;
		width:100px;
		height:100px;
		margin-right:40px;
		background-image:url(../images/three.jpg);
		background-size: 100% !00%;
	}

	/* only on index page */

	#four{
		float: right;
		width:100px;
		height:100px;
		margin-left:40px;
		background-image:url(../images/four.jpg);
		background-size: 100% !00%;
	}
	.boundary, .episodes, .smallepisodes{
		border: 12px solid #8a8a8a;
		border-radius: 20px;
		-moz-border-radius: 20px;
		-khtml-border-radius: 20px;
		-webkit-border-radius: 20px;
		 box-shadow:10px 10px 20px #000;
		-webkit-box-shadow:10px 10px 20px #000;
		-moz-box-shadow: 10px 10px 20px #000;
		margin-bottom: 2em;
	}
	.smallindex{
		float: left;
		width:150px;
		height:60px;
		border: 5px solid #8a8a8a;
		border-radius: 20px;
		-moz-border-radius: 20px;
		-khtml-border-radius: 20px;
		-webkit-border-radius: 20px;
		box-shadow:5px 5px 10px #000;
		-webkit-box-shadow:5px 5px 10px #000;
		-moz-box-shadow: 5px 5px 10px #000;
		margin-top:10px;
		margin-bottom: 10px;
		margin-right:40px;
		padding-top:10px;
		padding-left:10px;
	}
	
	#footer{
		float:left;
		clear:both;
		width:700px;
		height: 200px;
	}
	
	.footer img{
		float:left;
		margin-left: 50px;
		margin-bottom: 10px;
		border: 5px solid #8a8a8a;
		border-radius: 10px;
		-moz-border-radius: 10px;
		-khtml-border-radius: 10px;
		-webkit-border-radius: 10px;
		box-shadow:5px 5px 10px #000;
		-webkit-box-shadow:5px 5px 10px #000;
		-moz-box-shadow: 5px 5px 10px #000;
	}


}

@media only screen and (max-width: 700px) {
    /* phones */
	#wrapper{
		width:300px;
	}
	
	#frame{
		position:relative;
		width:300px;
		margin-top:14px;
	}
	section{
		width:300px;
		
	}
	header{
		height:70px;
		width: 300px;
		background-image: url(../images/bannerSmall.jpg);
	}
	
	#trailer{
		position:relative;
		width:300px;
		margin-top:10px;
		margin-bottom:10px;
		text-align:center; 
		font-family: Arial, sans-serif;
		font-weight:400;
		font-size: 1.2em;
		font-weight: bold;
		font-style:italic;
		color: #b34343;
		padding-top: 10px;
		padding-bottom:10px;
	}
	nav{
		position:relative;
		float:left;
		height: 100px;
		width: 300px;
		margin-left:auto;
		margin-right:auto;
		margin-top:230px;
		font-family: Arial, sans-serif;
		font-weight:400;
		font-size: 1.2em;
		font-weight: bold;
		padding-top: 10px;
	}
		
	ul {
  		margin: 0;
  		padding: 0;
  		list-style-type:none;
	}

	li {
		width:300px;
		text-align:center;
		margin-bottom: 30px;
  		float:left;
		padding-bottom:10px;
		border-bottom: 1px solid black; 
	}
	
	/* top item of menu not needed */
	.top{
		width:0px;
		height:0px;
		display:none;
		margin-left:-2000px;
		
	}
		
		
	

	#centreColumn{
		postion:relative;
		float: left;
		width:200px;
		height:234px;
		margin-left:65px;
		margin-right:0px;
		margin-top:-360px;
		background-image:url(../images/Small.jpg);
		background-size: 100%  100%;
		background-repeat:no-repeat;
	}
	#rightColumn{
		position:relative;
		width:0px;
		height:0px;
		margin-left:-1000px;

	}
	#leftColumn{
		position:relative;
		width:0px;
		height:0px;
		margin-left:-1000px;
	}
	
	
	#one{
		width:0px;
		height:0px;
		margin-left:-1000px;
		background-image:none;
	}

	/* only on index page */
	#two{
		width:0px;
		height:0px;
		margin-top:30px;
				
		margin-left:-1000px;
		background-image:none;
	}

	/* only on index page */

	#three{
		width:0px;
		height:0px;
		margin-left:-1000px;
		background-image:none;
	}

	/* only on index page */

	#four{
		width:0px;
		height:0px;
		margin-left:-1000px;
		background-image:none;
	}
	.boundary, .episodes, .smallepisodes{
		border: 0px;
		
	}
	
	#footer{
		position:relative;
		margin-top:140px;
		float:left;
		clear:both;
		width:200px;
		margin-left:auto;
		margin-right:auto;
		height: 200px;
	}
	
	.footer img{
		float:left;
		margin-left: 100px;
		margin-right: 100px;
		margin-bottom: 30px;
		border: 5px solid #8a8a8a;
		border-radius: 10px;
		-moz-border-radius: 10px;
		-khtml-border-radius: 10px;
		-webkit-border-radius: 10px;
		box-shadow:5px 5px 10px #000;
		-webkit-box-shadow:5px 5px 10px #000;
		-moz-box-shadow: 5px 5px 10px #000;
	}
	
	#footer hr{
		width:0px;
		magin-left:-1000px;
	}

	#horizontalLine{
		position:relative;
		width:0px;
		height:0px;
		display:none;
		margin-left:-1000px;
	}

}

@media only screen and (max-width: 767px) and (orientation: portrait) {
    /* portrait phones */
}

#trials{
	margin-top:110px;
	background-image:url(../images/trialsSmall.jpg);
	
}
#conor{
		background-image:url(../images/conor.jpg);
}

#once{
		background-image:url(../images/onceSmall.jpg);
}
#remembrance{
		background-image:url(../images/remembranceSmall.jpg);

}
	

#part1{
	margin-top:110px;
	background-image:url(../images/partone.jpg);
}

#Austen{
	margin-top:110px;
	background-image:url(../images/Austen.jpg);
}

#Buchan{
	background-image:url(../images/Buchan.jpg);
}

#Conrad{
	background-image:url(../images/Conrad.jpg);
}
#Dickens{
	background-image:url(../images/Dickens.jpg);
}