/*
Colours used
rgb(255, 255, 255)	#ffffff		White 
rgb(38, 38, 38)		#262626		Nearly Black
rgb(67, 65, 65)		#434141		Dark Grey 
rgb(64, 63, 63)		#403F3F		Dark Grey 
rgb(166, 166, 166)	#A6A6A6 	Grey
rgb(82, 84, 75)		#52544B		Medium grey
rgb(233,233,233)	#E9E9E9		Very light grey
rgb(153, 153, 153)	#999999		Very light grey
rgb(213, 199, 4)	#D5C704 	Lime Mustard Green
rgb(135, 14, 111)	#870E6F 	Purple
rgb(153, 0, 0)		#990000		Burgundy
rgb(112, 172, 16)	#70AC10		Bottle Green

color: rgb(173,106,255);#AD6AFF		Lilacy Purple
color: rgb(71,163,255);	#47A3FF		Powdery Blue
color: rgb(255,204,0);	#FFCC00		Tangerine
color: rgb(255,0,102);	#FF0066		Pastel Raspberry
color: rgb(255,0,00);	#FF0000		Cherry
color: rgb(204,0,0);	#CC0000		Blood
color: rgb(132, 0, 0)	#840000		Dark Blood
*/

html {
	height: 100%;
}


body {
	border: 0px;
	height: 100%;
	margin: 0px;
	padding: 0px;
}


img {
	border: 0 none;
	opacity: 1;
	-moz-transition: opacity 2s; /* Firefox 4 */
	-webkit-transition: opacity 2s; /* Safari and Chrome */
	-o-transition: opacity 2s;
	transition: opacity 2s;
}


p {
	margin-bottom: 1em;
	margin-top: 0em;
}


h1, h2, h3, h4, h5, h6 {
	font-weight: normal;
	margin: 0px;
	padding: 0px;
}


h3, .h3 {
	font-size: 14px;
	text-transform: uppercase;
	line-height: 2.92em;
	font-weight: normal;
	font-style: normal;
	color: rgb(64, 63, 63); /* Dark Grey */
}

h2 {
	font-size: 24px;
	line-height: 1.2em;
	font-weight: normal;
	font-style: normal;
	color: rgb(64, 63, 63); /* Dark Grey */
} 

h1 a:visited, h1 a:link, h1 a:active {
	font-family: 'Holtwood One SC', 'sans-serif';
	font-size: 69px;
	text-transform: uppercase;
	letter-spacing: -2px;
	line-height: 0em;
	font-weight: normal;
	font-style: normal;
	text-decoration: none;
	color: rgb(64, 63, 63); /* Dark Grey */
}

ul {
	list-style-type: circle;
	margin: 1em 0 1em;
	padding: 0;
	padding-left: 2em;
}


blockquote {
	font-family: 'Georgia', 'Times New Roman', serif;
	font-size: 14px;
	line-height: 1.5em;
	font-weight: normal;
	color: rgb(166, 166, 166); /* Grey */
}

body {
	font-family: Arial, Helvetica, Geneva, sans-serif;
	font-size: 14px;
	line-height: 1.8em;
	margin-right: auto;
	margin-left: auto;
	background-color: rgb(255, 255, 255); /* White */
	color: rgb(38, 38, 38); /* Nearly Black */
}

a:link, a:visited, a:active {
	text-decoration: underline;
	color: rgb(132, 0, 0);  /* Blood red */
}

/* When I moved the below line to the top of this file then it stopped working */
a:hover {
	text-decoration: none;
	color: rgb(132,0,0);	/*	#CC0000		Blood	*/
}
/* When I moved the above line to the top of this file then it stopped working */

h1 a:hover {
	text-decoration: none;
}

iframe {
	display:block;
	margin: 0 auto; 
	background-color: #777;  /* Grey */
}

/* Classes */
/* Navigation */


.div-yim-horizontal-nav {
	width: 1024px;
}


.div-yim-horizontal-nav .ul-yim-navigation {
	float: left;
}
  


.div-yim-horizontal-nav .li-yim-navigation a {
	font-size: 26px;
	text-transform: uppercase;
	letter-spacing: 0px;
	line-height: 1em;
	text-decoration: none;
	margin-right: 27px; /* Gap between the navigation words */
	margin-top: 10px;
	margin-bottom: 10px;
/*	color: rgb(153, 153, 153); Very light grey */
 	color: rgb(82, 84, 75)	/*	#52544B		Medium grey */

}

.div-yim-horizontal-nav ul {
	list-style-type: none;
	padding: 0px;
	margin: 0px;
}


.div-yim-horizontal-nav ul li {
	float: left;
	padding: 0px;
	margin: 0px;
}





.div-yim-horizontal-nav .li-yim-navigation a:hover {
	color: rgb(132,0,0);	/*	#CC0000		Blood	*/
}

.div-yim-horizontal-nav .li-yim-navigation.li-yim-current-navigation a {
	text-decoration: none;
	color: rgb(132,0,0);	/*	#CC0000		Blood	*/
}

.div-yim-horizontal-nav ul li a {
	display: block;
}


/* Picture Gallery */

.ul-yim-gallery-thumbnail {
	padding: 0;
	margin: 0;
}


.ul-yim-gallery-thumbnail li {
	list-style-type: none;
	height: 1%;
	display: inline;
}


.ul-yim-gallery-thumbnail li .img-yim-thumbnail {
	display: inline;
}

.ul-yim-gallery-thumbnail li .div-yim-thumbnail-box-square {
	float: left;
	margin-bottom: 12px;
	margin-right: 12px;
}

.div-yim-thumbnail-box-square { 
	width: 120px;
	height: 120px;
	overflow: hidden;
	position: relative;
}


/* ID tags  */

/* Whole page - centres the banner and content otherwise the go left and right */
#div-yim-canvas {
	margin-right: auto;
	margin-left: auto;
	margin-top: 20px;	/* Gap between top of page and logo */
	margin-bottom: 50px;
	width: 800px;	/* width of the whole page */
	padding: 0 125px 0 125px;
}


#div-yim-canvas, #div-yim-content {
	overflow: hidden;
}


#div-yim-navigation {
	display: block;
}



#div-yim-navigation .div-yim-horizontal-nav {
	border-bottom: 1px solid  rgb(255, 255, 255); /* White */
	line-height: 1em;
	font-weight: bold;
	font-style: normal;
	border-color:  rgb(255, 255, 255); /* White */
}

#div-yim-navigation .div-yim-horizontal-nav .ul-yim-navigation {
	font-family: 'Francois One', 'Helvetica', 'sans-serif';
	font-weight: normal;
	font-style: normal;
}


#div-yim-header {
	margin-bottom: 40px;
}


#div-yim-page-content {
	font-family: 'Helvetica Neue', 'HelveticaNeue', 'Helvetica', 'Arial', 'Lucida Grande', 'sans-serif';
	font-size: 13px;
	line-height: 1.68em;
	font-weight: normal;
	font-style: normal;
	padding-right: 0px;
	padding-top: 0px;
	margin-right: 0px;
	margin-left: 100px;
	margin-top: 0px;
	margin-bottom: 0px;
	color: rgb(82, 84, 75); /* Medium Grey */
}

#div-yim-page-content {
	float: right;
	width: 800px; /* determines the width of the block of boxes and hence the number that will fit on the page (6) */
	padding-bottom: 75px; /* Space at the bottom of the squares */
}



#dim-yim-page-footer {
	clear: both;
}


#div-yim-page-footer-copyright {
	font-size: 12px;
	padding-bottom: 100px;
	color: rgb(153, 153, 153); /* Light Grey */
}

#span-yim-page-footer-design {
	font-size: 12px;
	float: right;
}

#span-yim-page-footer-left {
	font-size: 12px;
	float: left;
}


/* ??????????????????????????????????????? */

.span-yim-block-image-title {
	position: absolute;
/* black */
	background: rgba(0, 0, 0, 0.3); 
	opacity: 0;
	height: 120px;
	width: 120px; 
	left: 0px; 
	top: 0px;
}

.span-yim-block-image-title:hover {
	opacity: 0.9; 
	background: rgb(0, 0, 0); /* fallback color */
	background: rgba(0, 0, 0, 0.7);
}

.span-yim-block-image-text {
	position: absolute;
	left: 0px; 
	top: 0px;
	height: 120px;
	width: 110px; 
	font-family: "Helvetica", "Arial", Sans-Serif;
	font-weight: bold;
	font-size: 12px;
	color: white; 
	line-height: 107%;
	letter-spacing: -0.5px;
	padding-top: 7px; 
	padding-left: 8px;
	opacity: 0;
}

.span-yim-block-image-text:hover {
	opacity: 0.9; 
}

.span-yim-month-box-horiz {
	font-family: 'Francois One', 'Helvetica', 'sans-serif';
	font-weight: normal;
	font-style: normal;
	font-size: 22px;
	letter-spacing: 0px;
	line-height: 1em;
	text-decoration: none;
	color: rgb(132,0,0); /* Blood */
	opacity: 1;
	margin-top: -65px; 
	text-align: right; 
	margin-right: 8px; 
}

.span-yim-month-box-horiz-blank {
	font-family: 'Francois One', 'Helvetica', 'sans-serif';
	font-weight: normal;
	font-style: normal;
	font-size: 22px;
	text-transform: uppercase; 
	letter-spacing: 0px;
	line-height: 1em;
	text-decoration: none;
	color: rgb(132,0,0); /* Blood */
	opacity: 1;
	position: absolute;
}

.span-yim-month-box-horiz-blank-right {
	font-family: 'Francois One', 'Helvetica', 'sans-serif';
	font-weight: normal;
	font-style: normal;
	font-size: 22px;
	text-transform: uppercase; 
	letter-spacing: 0px;
	line-height: 1em;
	text-decoration: none;
	color: rgb(132,0,0); /* Blood */
	opacity: 1;
	text-align: right; 
}

.span-yim-month-box-vert {
	font-family: 'Francois One', 'Helvetica', 'sans-serif';
	font-weight: bold;
	font-style: normal;
	font-size: 16px;
	text-transform: uppercase;
	text-align: center;
	letter-spacing: 0px;
	line-height: 0.9em;
	text-decoration: none;
	color: rgb(132,0,0); /* Blood */
	display: block;
}

.span-yim-year-box-horiz-white-blank-right {
	font-family: 'Francois One', 'Helvetica', 'sans-serif';
	font-weight: normal;
	font-style: normal;
	font-size: 22px;
	letter-spacing: 0px;
	line-height: 1em;
	text-decoration: none;
	color: white;
	opacity: 1;
	position: absolute;
	margin-top: 9px; 
	margin-left: 6px; 
}

.span-yim-block-image-year-title {
	position: absolute;
/* black */
	background: rgba(0, 0, 0, 0.3); 
	opacity: 0.9;
	height: 120px;
	width: 120px; 
	left: 0px; 
	top: 0px;
}

.span-yim-block-image-year-title:hover {
	opacity: 0.9; 
	background: rgb(0, 0, 0); /* fallback color */
	background: rgba(0, 0, 0, 0.7);
}


.div-yim-block-image-blog-title {
	position: absolute;
/* black */
	background: rgba(0, 0, 0, 0.4); 
	opacity: 1;
	height: 28px;
	width: 120px; 
	left: 0px; 
	top: 0px;
	padding-top: 7px; 
	padding-left: 4px; 
}

.div-yim-block-image-blog-title:hover {
	opacity: 0.9; 
	background: rgb(0, 0, 0); /* fallback color */
	background: rgba(0, 0, 0, 0.7);
}


.span-yim-blog-box-horiz {
	font-family: 'Francois One', 'Helvetica', 'sans-serif';
	font-weight: normal;
	font-style: normal;
	font-size: 20px;
	letter-spacing: 0px;
	line-height: 1em;
	text-decoration: none;
	color: white;
	opacity: 1;
	margin-top: 15px; 
	text-align: right; 
	margin-left: 3px; 
}









.div-yim-block-image-blog-title-vert {
	position: absolute;
/* black */
	background: rgba(0, 0, 0, 0.4); 
	opacity: 1;
	height: 120px;
	width: 30px; 
	left: 90px; 
	top: 0px;
	padding-top: 4px; 
	text-align: center; 
}


.div-yim-block-image-blog-title-vert:hover {
	opacity: 0.9; 
	background: rgb(0, 0, 0); /* fallback color */
	background: rgba(0, 0, 0, 0.7);
}


.span-yim-blog-box-vert {
	font-family: 'Francois One', 'Helvetica', 'sans-serif';
	font-weight: normal;
	font-style: normal;
	font-size: 20px;
	letter-spacing: 0px;
	line-height: 0.9em;
	text-decoration: none;
	color: white;
	opacity: 1;
	margin-top: 15px; 
	text-align: center; 
	margin-left: 8px; 
	display: block;
}






.div-yim-blog-post-header-container {
/* images used in the blog post */
	width: 800px;
	height: 200px;
	overflow: hidden;
	position: relative; 
}

.div-yim-blog-post-header-image {
/* images used in the blog post */
	width: 800px;
	height: 200px;
	overflow: hidden;
	position: relative; 
}

.div-yim-blog-post-header-text {
/* images used in the blog post */
	top: 0px;
	width: 800px;
	height: 200px;
	position: absolute; 
}

.div-yim-blog-text {

}

.h2-yim-blog-posted {
	text-transform: uppercase;
	font-size: x-small;
	line-height: 36px;
	color: rgb(132,0,0);	/*	#CC0000		Blood	*/
	float: right;
}

.h2-yim-blog-posted-by {
	text-transform: uppercase;
	font-size: small;
	line-height: 10px;
	color: rgb(132,0,0);	/*	#CC0000		Blood	*/
	float: right;
}

.h2-yim-blog-date {
	color: rgb(132,0,0);	/*	#CC0000		Blood	*/
	float: right;
}

.h2-yim-blog-post-light {
	position: relative;
	padding: 10px; 
	color: rgb(233,233,233); /* Light Grey */
}

.h2-yim-blog-post-dark {
	position: relative;
	padding: 10px;
	color: rgb(67, 65, 65); /* Dark Grey */
}

.yim-span-h2-backing {
	color: white; 
	letter-spacing: -1px;
	line-height: 40px;
	background: rgb(0, 0, 0); /* fallback color */
	background: rgba(0, 0, 0, 0.7);
	padding: 7px; 
}

.h2-yim-older-links {
	float: right;
	color: rgb(132,0,0);	/*	#CC0000		Blood	*/
}

.h2-yim-more-recent-links{
	float: left;
	color: rgb(132,0,0);	/*	#CC0000		Blood	*/
}

.div-yim-endpost {
	clear: both;
	padding-bottom: 100px;
}

.img-yim-flip-reverse-it {
        -moz-transform: scaleX(-1);
        -o-transform: scaleX(-1);
        -webkit-transform: scaleX(-1);
        transform: scaleX(-1);
        filter: FlipH;
        -ms-filter: "FlipH";
}

.span-yim-thumbnail
{
/* Thumbnail image used in the blocks on front page and gallery */
}

/* CSS3 jQuery-Like fadeIn ------------------------------------- */
.fadeIn {
/* CSS needed for animation -------------------------------------------- */
	opacity:0;
	-webkit-animation:fadeIn ease-in 1;
	-moz-animation:fadeIn ease-in 1;
	-o-animation:fadeIn ease-in 1;
	animation:fadeIn ease-in 1;
	-webkit-animation-fill-mode:forwards;
	-moz-animation-fill-mode:forwards;
	-o-animation-fill-mode:forwards;
	animation-fill-mode:forwards;
}

/* Animation Times - Time for image to fade in ------------------------ */
.fadeIn-1s {
	-webkit-animation-duration:1.25s;
	-moz-animation-duration:1.25s;
	-o-animation-duration:1.25s;
	animation-duration:1.25s;
}

/* Animation Delay - Time for image to be delayed
---------------------------------------------------- */
.fadeIn-Delay-1s {
	-webkit-animation-delay: 1s;
	-moz-animation-delay: 1s;
	-o-animation-delay: 1s;
	animation-delay: 1s;
}

/* Key Frames
---------------------------------------------------- */
@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-o-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }


#cf {
  position:relative;
  height:120px;
  width:120px;
  margin:0 auto;
}

#cf img {
  position:absolute;
  left:0;
  -webkit-transition: opacity 1s ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  -o-transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
}

#cf img.top:hover {
  opacity:0;
}


.imgDL {
	vertical-align: middle;
 	width: 16px;
}