/* --------------- Scrollbar --------------- */	

#mcs5_container {
	height:270px;
}

#mcs5_container .customScrollBox {
	position:relative;
	height: 250px;
	overflow:hidden;
	background: #fcf6ec;
}

#mcs5_container .customScrollBox .horWrapper {
	position:relative;
	left:0;
}

#mcs5_container .customScrollBox .container {
	width: 2390px;
	position:relative;
	left:0;
	display:inline-block; *display:inline;
}

#mcs5_container .customScrollBox .content {
	clear:both;
}

#mcs5_container .customScrollBox .content p {
	margin: 0 5px 5px 0;
}

#mcs5_container .customScrollBox .content p img {
	margin-right:5px;
}

#mcs5_container .dragger_container {
	position:relative;
	margin-top: 5px;
	height:8px;
	width:745px;
	background: #f1e4c8;
}

#mcs5_container .dragger {
	position:absolute;
	width:81px;
	height:8px;
	background: url('img/scrollbar.png') no-repeat;
}

#mcs5_container .dragger_pressed {
	position:absolute;
	width:81px;
	height:8px;
	background: url('img/scrollbar.png') no-repeat;}

#mcs5_container .scrollUpBtn,#mcs5_container .scrollDownBtn {
	float: left;
	background: #000;
	height:10px;
	width: 20px;
	font-family:Arial,Helvetica,sans-serif;
	font-size:large;
	font-weight:normal;
	color:#C30;
	text-decoration:none;
}

#mcs5_container .scrollUpBtn:hover,#mcs5_container .scrollDownBtn:hover {
	color:#fff;
}		

/* ----------------- James' Stuff ----------------- */

/* General */

a img {
	border: 0;
}

body {
	margin: 0;
	background: #fcf6ec;
}

h1 {
	font-weight: normal;
	font-size: 16pt;
	padding: 0 0 0 6px;
	margin: 0;
	color: #8a2328;
}
			
p {
	font-size: 12pt;
	color: #424242;
}

p a:link, p a:visited {
	color: #8a2328;
	text-decoration: underline;
}

p a:hover, p a:active {
	color: #8a2328;
	text-decoration: none;
	background: #fffff5;
}

#everything {
	width: 950px;
	background: #fcf6ec;
	position: relative;
}

/* Left Top Stuff */

#left-top {
	position: absolute;
	top: 16px;
	left: 16px;
	width: 160px;
	font-family: proxima-nova-1, proxima-nova-2, sans-serif;
}

#avatar {
	float: left;
	padding: 10px;
	background: #fff;
}

	#avatar a {
		width: 145px;
		height: 145px;
		float: left;
		background: url('img/avatar.png');
	}
	
	#avatar a:hover { 
		background-position: 0 -145px;
	}
	
	#avatar-shadow {
		float: left;
		width: 165px;
		height: 16px;
		background: url('img/shadowbottom.png');
	}
	
	#getintouch {
		overflow: auto;
		float: left;
		/*height: 200px;*/
		background-repeat: no-repeat;
		background-position: 0px 20px;
		width: 165px;
		font-family: proxima-nova-1, proxima-nova-2, sans-serif;
		font-size: 10pt;
		color: #836649;
	}
	
		.getintouch-right {
			height: 16px;
			float:right;
			position:relative;
			left:-50%;
			text-align:left;
			margin: 0 0 5px 0;
			clear: right;
		}
		
		.getintouch-left {
			float: left;
			position:relative;
			left:50%;
			display: block;
			overflow: auto;
		}
	
		.favicons {
			width: 72px; /* This width is necessary for IE to properly display favicons in #content */
		}
	
		.getintouch-text {
			float: left;
			padding: 0;
			margin: 0;
			line-height: 16px;
		}
	
		#getintouch a {
			float: left;
			width: 16px;
			height: 16px;
			margin: 0 2px 0 0;
		}
		
			#getintouch a:hover { 
				background-position: 0 -16px;
			}
		
			.flickr {
				background: url('img/flickr.gif') 0 0 no-repeat;
			}
			
			.twitter {
				background: url('img/twitter.gif') 0 0 no-repeat;
			}
			
			.facebook {
				background: url('img/facebook.gif') 0 0 no-repeat;
			}
			
			.googleplus {
				background: url('img/googleplus.gif') 0 0 no-repeat;
			}
			
			.email {
				background: url('img/email.gif') 0 0 no-repeat;
			}
			
#followjames {
	display: block;
	float: left;
	margin-bottom: 9px;
	margin-top: 3px;
	margin-left: 7px;
}
			
#cats {
	position: fixed;
	top: 280px;
	width: 160px;
	padding: 10px 0 10px 0;
	margin-left: 19px;
	font-size: 10pt;
	text-align: center;
	border-bottom: 1px solid #e6d7b3;
	border-top: 1px solid #e6d7b3;
	font-family: proxima-nova-1, proxima-nova-2, sans-serif;
}

/* Header Stuff */

#header {
	float: left;
	width: 100%;
	height: 72px;
	background-repeat: no-repeat; 
	border-bottom: 1px solid #d6bf9d;
}

#header-wrapper {
	width: 900px;
}

#header-name {
	float: left;
	padding: 21px 0 0 177px;
}

	#name-hover {
		float: left;
	}
	
	#name-hover a {
		float: left;
		width: 292px;
		height: 47px;
		background: url('img/name.png');
	}
	
	#name-hover a:hover { 
		background-position: 0 -47px;
	}
	
#header-sharing {
	float: left;
	padding: 26px 0 0 15px;
}

	.sharing-button {
		float: left;
		padding-right: 5px;
	}
	
	.sharing-appreciated {
		float: left;
		padding: 12px 0 0 0;
	}
	
/* Section Stuff */
	
.post {
	float: left;
	margin: 0 0 10px 203px;
	border-bottom: 1px solid #e6d7b3;
	width: 745px;
}
	
.title {
	float: left;
	height: 23px;
	line-height: 29px;
}

.titlee {
	padding-top: 20px;
}

.the-content {
	float: left;
	clear: both;
	width: 745px;
}
	
/* Copyright Stuff */

#copyright {
	font-family: proxima-nova-1, proxima-nova-2, sans-serif;
	text-align: left;
	color: #97846a;
	float: left;
	margin: 10px 0 0 203px;
	padding-bottom: 20px;
	font-size: 9pt;
}

#copyright a:link, #copyright a:visited {
	color: #8a2328;
	text-decoration: underline;
}

#copyright a:hover, #copyright a:active {
	color: #8a2328;
	text-decoration: none;
	background: #fffff5;
}

/* 'Category' Links (known previous as 'categories' from previous blog design, now refers to different sections of this site eg Illustration, Graphic Design) */

a.cat-illustration:link, a.cat-illustration:visited {
	text-decoration: none;
	color: #ffffff;
	padding: 2px 3px 2px 3px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	background: #c0a3b7;
}
	
a.cat-illustration:hover, a.cat-illustration:active {
	text-decoration: none;
	color: #ffffff;
	padding: 2px 3px 2px 3px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	background: #a57d9e;
}

a.cat-webgraphicdesign:link, a.cat-webgraphicdesign:visited {
	text-decoration: none;
	color: #ffffff;
	padding: 2px 3px 2px 3px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	background: #b7b48b;
}
	
a.cat-webgraphicdesign:hover, a.cat-webgraphicdesign:active {
	text-decoration: none;
	color: #ffffff;
	padding: 2px 3px 2px 3px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	background: #aaa372;
}

a.cat-tailoredtexts:link, a.cat-tailoredtexts:visited {
	text-decoration: none;
	color: #ffffff;
	padding: 2px 3px 2px 3px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	background: #9fc1c8;
}
	
a.cat-tailoredtexts:hover, a.cat-tailoredtexts:active {
	text-decoration: none;
	color: #ffffff;
	padding: 2px 3px 2px 3px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	background: #7da8b5;
}

a.cat-donaldhoshalpatrick:link, a.cat-donaldhoshalpatrick:visited {
	text-decoration: none;
	color: #ffffff;
	padding: 2px 3px 2px 3px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	background: #e0ab87;
}
	
a.cat-donaldhoshalpatrick:hover, a.cat-donaldhoshalpatrick:active {
	text-decoration: none;
	color: #ffffff;
	padding: 2px 3px 2px 3px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	background: #da986d;
}

a.cat-poojohn:link, a.cat-poojohn:visited {
	text-decoration: none;
	color: #ffffff;
	padding: 2px 3px 2px 3px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	background: #a5c5a1;
}
	
a.cat-poojohn:hover, a.cat-poojohn:active {
	text-decoration: none;
	color: #ffffff;
	padding: 2px 3px 2px 3px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	background: #89b683;
}

/* Show/Hide links for sections, similar to 'Category' links above */

a.expand-tailoredtexts:link, a.expand-tailoredtexts:visited {
	text-decoration: none;
	color: #ffffff;
	padding: 2px 3px 2px 3px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	background: #7da8b5;
}

a.expand-tailoredtexts:hover, a.expand-tailoredtexts:active {
	text-decoration: none;
	color: #ffffff;
	padding: 2px 3px 2px 3px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	background: #9fc1c8;
}

a.expand-donaldhoshalpatrick:link, a.expand-donaldhoshalpatrick:visited {
	text-decoration: none;
	color: #ffffff;
	padding: 2px 3px 2px 3px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	background: #da986d;
}

a.expand-donaldhoshalpatrick:hover, a.expand-donaldhoshalpatrick:active {
	text-decoration: none;
	color: #ffffff;
	padding: 2px 3px 2px 3px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	background: #e0ab87;
}

a.expand-poojohn:link, a.expand-poojohn:visited {
	text-decoration: none;
	color: #ffffff;
	padding: 2px 3px 2px 3px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	background: #89b683;
}

a.expand-poojohn:hover, a.expand-poojohn:active {
	text-decoration: none;
	color: #ffffff;
	padding: 2px 3px 2px 3px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	background: #a5c5a1;
}

/* Loading indicator for 'Web & Graphic Design' */

div.loading-invisible {
	display:block;
	position: absolute;
	top: 148px;
	left: 0;
}

/* ----------------- Galleriffic Stuff ----------------- */

#illustration-gallery {
	float: left;
	width: 745px;
	clear: both;
	margin: 10px 0 25px 0;
	height: 380px;
}

ul.thumbs {
	float: left;
	width: 345px;
	margin: 3px 0 0 0;
	padding: 0;
}

ul.thumbs li {
	float: left;
	margin: 0 17px 17px 0;
	list-style: none;
}

a.thumb {
	float: left;
	opacity: 0.8;
}

a.thumb:hover {
	opacity: 1;
}

ul.thumbs li.selected a.thumb {
	opacity: 1;
}

ul.thumbs img {
}

.slideshow-container {
position: relative;
width: 400px;
}

div.slideshow {
}

div.slideshow span.image-wrapper {
	display: block;
}

div.slideshow a.advance-link, div.slideshow a.advance-link:hover, div.slideshow a.advance-link:active, div.slideshow a.advance-link:visited {
	text-decoration: none;
}
div.slideshow img {
	position: relative;
	display: block;
	top: -16px; 
	left: 0;
}

div.loader {
	position: absolute;
	top: -11px;
	left: -13px;
	background-image: url('img/loading.gif');
	background-repeat: no-repeat;
	background-position: center;
	width: 48px;
	height: 48px;
}

div.caption-container {
	position: relative;
	display: block;
	left: 0;
	top: 0;
}

/* ----------------- Lightbox Stuff ----------------- */

#lightbox{
	background-color:#fff;
	padding: 10px;
	border: 1px solid #e6d7b3;
}
	
#lightboxDetails{
	font-size: 0.8em;
	padding-top: 0.4em;
	display: none;
}
		
#lightboxCaption {
	float: left;
	display: none;
}

#keyboardMsg {
	float: right;
	display: none;
}

#closeButton {
	top: 5px;
	right: 5px;
}

#lightbox img {
	border: none;
} 

#overlay img {
	border: none;
}

#overlay {
	background-image: url(js/lightbox/overlay.png);
}

* html #overlay{
	background-color: #000;
	back\ground-color: transparent;
	background-image: url(blank.gif);
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="js/lightbox/overlay.png", sizingMethod="scale");
}