/* --- COLOURS ---

RGB(58,21,9)	DARK RED
RGB(82,21,4)	MID RED
RGB(129,57,26)	LIGHT RED

RGB(31,33,32)	DARK
RGB(73,74,69)	SEMI-DARK
RGB(123,125,120)MID
RGB(209,211,212)LIGHT
RGB(240,240,240)NEAR-WHITE

RGB(147,108,58)	GOLDEN
RGB(161,109,74)	COPPER
RGB(150,115,40)	OCHRE

--- END :: COLOURS */

/* -------------------- COMMON DO NOT EDIT (much) -------------------- */
html	{height: 100%;}

body	{height: 100%; font-family: "calluna-sans", "Century Gothic", CenturyGothic, AppleGothic, "Franklin Gothic Medium", "Franklin Gothic", "ITC Franklin Gothic", Arial, sans-serif; line-height: 1.2; font-size: 75%; font-weight: 400; color: RGB(73,74,69); background-color: #FFF;}

strong	{font-weight: 600;}

em		{font-style: italic;}

h1, h2, 
h3, h4,
h5, h6	{letter-spacing: 0.02em; clear: left; color: RGB(82,21,4); margin-bottom: 0.6em;}

h1		{font-size: 1.6em; font-weight: 600;}
h2		{font-size: 1.4em; font-weight: 600;}
h3		{font-size: 1.3em; font-weight: 600;}
h4		{font-size: 1.2em;}
h5		{font-size: 1.1em;}
h6		{border-bottom: dotted 1px RGB(209,211,212); padding-bottom: 5px;}

h1 a, h2 a, h3 a, h4 a, h5 a, h6 a	{text-decoration: none; color: RGB(82,21,4) !important;}

p		{margin: 0 0 1.2em;}

.content a			{color: RGB(129,57,26);}
.content a.external	{color: RGB(147,108,58); text-decoration: none; margin: 0 4px; padding: 0 20px 0 5px; background: #FFF url("../icons/external-link.png") 97% 45% no-repeat;}
.content a:visited	{color: RGB(129,57,26);}
.content a:hover	{color: RGB(147,108,58);}


.content ul,ol	{padding-left: 1em; margin: 0.6em 0;}
.content ul		{list-style: circle inside; }
.content ol		{list-style: lower-roman inside;}
.content ol li	{height: 1.2em;}
.content ul li	{margin-bottom: 0.6em;}

sup, sub	{font-size: 9px;}
sup			{vertical-align: text-top;}
sub			{vertical-align: text-bottom;}

blockquote			{padding: 20px 0; position: relative; display: inline-block; font-style: italic; font-size: 0.9em; overflow: hidden;}
blockquote p		{float: left; position: relative; padding: 0 2em; margin: 0; z-index: 2;}

.accent		{text-transform: uppercase; font-weight: 400;}

/* -------- LAYOUT -------- */
#header-wrapper		{width: 100%; height: 100px; background-position: center center; background-repeat: no-repeat; background-size: cover; border-bottom: solid 2px RGB(129,57,26); overflow: hidden;}
header #homelink	{text-align: left; text-decoration: none; overflow: hidden; color: #FFF; font-size: 2em; padding: 20px 0; display: inline-block;}

#wrapper			{margin-bottom: -2em; min-height: 100%; margin-top: -102px;}

.content			{position: relative; margin-bottom: 20px;}

/* MAJOR NAVIGATION */
nav								{position: relative;}
#main-navigation				{list-style: none; text-align: left;}
#main-navigation li				{display: block; margin-bottom: 20px;}
#main-navigation a,
#main-navigation a:visited		{color: RGB(31,33,32); text-decoration: none;}
#main-navigation a:hover		{color: RGB(82,21,4);}
#main-navigation a.parent		{color: RGB(129,57,26);}

/* BREADCRUMB */
#breadcrumb						{border-top: dotted 1px RGB(209,211,212); padding-top: 10px; padding-bottom: 10px; position: relative;}
#breadcrumb li					{font-size: 0.7em; color: RGB(123,125,120); display: inline-block; text-transform: uppercase; padding-right: 1em; position: relative; margin-bottom: 0;}
#breadcrumb li:after			{content: ">"; position: absolute; right: 0; top: -0.13em;}
#breadcrumb li.omega:after		{content: "";}
#breadcrumb a					{text-decoration: none; display: block; color: RGB(123,125,120);}
#breadcrumb a:visited			{color: RGB(123,125,120);}
#breadcrumb a:hover				{color: RGB(129,57,26);}

#content-wrapper				{padding-bottom: 20px; padding-top: 182px;}
#content						{float: left; width: 880px;}

#footer-wrapper					{width: 100%; height: 1em; padding: 0.3em 0 0.7em; background-color: RGB(240,240,240);}

/* FOOTER NAVIGATION */
#footer-navigation						{list-style: none; text-align: right;}
#footer-navigation li					{display: inline-block; margin-right: 2px; padding-right: 6px; border-right: solid 1px RGB(209,211,212);}
#footer-navigation li.omega				{margin-right: 0; padding-right: 0; border-right: none;}
#footer-navigation a, footer a:visited	{font-size: 0.7em; color: RGB(73,74,69); text-decoration: none; display: block;}
#footer-navigation a:hover				{color: RGB(129,57,26);}


/* -------------------- END :: COMMON DO NOT EDIT (much) -------------------- */

/* FOUT */
.wf-loading	p,
.wf-loading	a,
.wf-loading ul,
.wf-loading ol,
.wf-loading h1,
.wf-loading h2,
.wf-loading h3,
.wf-loading h4,
.wf-loading h5,
.wf-loading h6		{visibility: hidden;}


/* PORTFOLIO (slider version) */
/*
#portfolio-slideshow-wrapper	{position: relative; padding-bottom: 190px;}
#portfolio-slideshow-container	{overflow: hidden;}
#portfolio-slideshow			{width: 30000px; height: 626px; float: left;}
.portfolio-entry				{float: left;}
.portfolio-info					{position: absolute; left: 0; right: 0; opacity: 1; bottom: 0;  height: 150px; overflow: hidden; border-top: solid 1px RGB(209,211,212); border-bottom: solid 1px RGB(209,211,212); padding: 10px 0;}
.portfolio-images				{float: left;}
.portfolio-images a				{float: left;}
.portfolio-images img			{float: left;}

#serial-scroll							{position: absolute; left: 0; right: 0; top: 0; bottom: 190px;}
#serial-scroll	.scroll-control			{position: absolute; top: 0; bottom: 0; width: 40px; background: transparent url("https://www.coilin.com/workspace/assets/default/icons/broken_noise.png") repeat; color: #FFF; opacity: 0.3;}
#serial-scroll	#prev					{left: 0;}
#serial-scroll	#next 					{right: 0;}
#serial-scroll	.scroll-control	span	{background: transparent url("../icons/move-arrows.png") left center no-repeat; width: 20px; height: 20px; display: block; position: absolute; top: 50%; left: 50%; margin-left: -10px; margin-top: -10px; text-indent: -9000px; overflow: hidden;}
#serial-scroll	#next span				{background-position: right center;}			
#serial-scroll	.scroll-control:hover	{opacity: 0.7;}
*/

/* TOP POSITIONED SCROLL CONTROL */
/*
#serial-scroll.top							{z-index: 2; position: relative; overflow: visible; color: RGB(82,21,4); border-top: dotted 1px RGB(129,57,26); margin: 0.6em 0;}
#serial-scroll.top	.scroll-control			{display: inline-block; text-decoration: none; position: relative; color: RGB(82,21,4);}
#serial-scroll.top	.scroll-control	span	{background: transparent url("https://www.coilin.com/workspace/assets/default/icons/hovers.png") left top no-repeat; height: 20px; width: 10px; display: block; position: absolute; top: -1px; overflow: hidden;}
#serial-scroll.top	#next 					{padding-right: 15px;}
#serial-scroll.top	#next span				{background-position: right top; right: 0;}			
#serial-scroll.top	#next:hover span		{background-position: right bottom;}
#serial-scroll.top	#prev					{padding-left: 15px;}
#serial-scroll.top	#prev span				{left: 0;}
#serial-scroll.top	#prev:hover span		{background-position: left bottom;}

#serial-scroll.top .scroll-pagination		{float: left; padding-top: 3px;}
#serial-scroll.top .scroll-pagination a		{display: inline-block; text-indent: -9000px; border: solid 1px RGB(82,21,4); border-radius: 50%; width: 6px; height: 6px; margin-left: 2px;}
#serial-scroll.top .scroll-pagination a.activeSlide	{background-color: RGB(82,21,4);}

#serial-scroll.top .scroll-control-container{float: right;}
#serial-scroll.top p						{margin: 0;}
#page_portfolio #serial-scroll.top			{border-top: none; width: 95%; margin-left: 2.5%;}

#items-pagination						{visibility: hidden; position: absolute;}
*/

/* NEWS */
#articles					{float: left; width: 880px; position: relative; padding-bottom: 30px;}
.article					{float: left; margin-right: 8px !important; margin-left: 9px !important; margin-bottom: 9px; background-color: #FFF;}
.article .article-content	{padding: 20px 10px; float: left; }
.article-image				{position: relative; float: left; margin: 1px;}
.alt .article-image			{float: right;}
.article-image img			{display: block;}

.article-image .overlay		{position: absolute; bottom: 0; left: 0; right: 0; padding: 10px; color: #FFF; font-size: 0.8em; margin: 0;}
#infscr-loading,			
#load-instruction			{position: absolute; bottom: 0; right: 15px; font-size: 0.8em; z-index: 1; width: 200px; text-align: right; height: 16px;}
#infscr-loading				{z-index: 2; background-color: #FFF;}
#infscr-loading img			{display: inline-block; margin-right: 6px; vertical-align: middle;}
#infscr-loading div			{display: inline-block; vertical-align: middle;}
#load-instruction p,
#infscr-loading p			{margin-bottom: 0; margin-top: 0;}
.category, .date			{font-size: 0.8em;}

#articles .grid_10			{border: solid 1px RGB(240,240,240); margin-left: 8px !important; margin-right: 8px !important; padding: 30px;}
#articles .grid_6			{background-color: RGB(240,240,240);}
#articles .grid_4			{border: solid 1px RGB(240,240,240); margin-left: 8px !important; margin-right: 8px !important; }
.grid_10 .article-content	{width: 280px;}


.article.draft				{border-color: RGB(82,21,4); border-style: dotted;}

.read-more					{text-decoration: none;}

.read-more:after			{content: ''; width: 10px; height: 20px; display: inline-block; vertical-align: middle; margin-left: 3px; background: url("https://www.coilin.com/workspace/assets/default/icons/hovers.png") top right no-repeat; position: relative; top: -2px;}
.read-more:hover:after		{background-position: bottom right;}

.content .tags				{list-style: none; padding-left: 0;}
.tags li					{display: inline-block; margin-right: 2px;}
.tags a						{border: solid 1px RGB(147,108,58); border-radius: 0 50% 50% 0; padding: 2px 4px; font-size: 0.6em; text-decoration: none;}
.tags a:hover				{background-color: RGB(147,108,58); color: #FFF !important;}

#tags-navigation 			{list-style: none; padding-left: 0;}
#tags-navigation li			{padding-bottom: 10px; display: inline; vertical-align: middle;}
#tags-navigation a			{border: solid 1px RGB(209,211,212); color: RGB(209,211,212) !important; border-radius: 0 50% 50% 0; padding: 4px 18px 6px 4px; text-decoration: none; display: inline-block;}
#tags-navigation a:hover	{background-color: RGB(129,57,26); color: #FFF !important; border-color: RGB(129,57,26);}

#category-navigation		{padding-left: 0; list-style: none;}
#category-navigation li		{margin-bottom: 4px;}
#category-navigation a		{text-decoration: none;}

/* CV */
#cv h3						{text-transform: uppercase; color: RGB(129,57,26); margin-top: 1.2em;}
#cv h4						{padding-top: 15px; color: RGB(129,57,26); text-transform: uppercase;}
#cv table					{margin: 10px 0; display: table; width: 100%;}
#cv td						{padding: 3px 5px;}
#cv td.date					{width: 25%;}
/* #cv tr.alt td				{background-color: RGB(240,240,240);} */
#cv tr.new-row				{border-top: dotted 1px RGB(209,211,212);}

.cv-sections				{border-left: solid 1px RGB(129,57,26); padding-bottom: 20px;}

.cv-column					{float: left; width: 33%;}
							
.cv-section					{display: inline-block; padding: 0 15px; border-right: solid 1px RGB(129,57,26); margin-bottom: 20px;}
	
/* USER GENERATED PAGES */
.user-content .image-container		{position: relative; float: left; margin-right: 0.7em; margin-bottom: 0.6em;}
.user-content .image-container img	{display: block;}
.user-content .overlay				{position: absolute; bottom: 1.2em; left: 1em; right: 1em; color: #FFF; font-size: 0.8em;}
.underlay							{font-size: 0.8em; color: RGB(209,211,212); display: block; margin-top: 3px; padding-top: 3px; border-top: solid 1px RGB(240,240,240);}
.main-image							{text-decoration: none;}

/* CONTACT FORM */
#contact-form label 	{float: left; width: 100%; clear: left;}

#contact-form input,
#contact-form textarea 	{font-family: "calluna-sans", "Century Gothic", CenturyGothic, AppleGothic, "Franklin Gothic Medium", "Franklin Gothic", "ITC Franklin Gothic", Arial, sans-serif; font-size: 100%; border: solid 1px RGB(82,21,4); background-color: #FFF; float: right; width: 75%; margin-bottom: 1em; padding: 2px;}	

#contact-form #submit		{background-color: RGB(129,57,26); color: #FFF; padding: 10px 0; cursor: pointer; width: 35%;}
#contact-form #submit:hover	{background-color: #FFF; color: RGB(129,57,26); border-color: RGB(129,57,26);}

/* PAGE BLOCKS */
.standard-page-block .block-image			{float: left;}
.standard-page-block .block-content			{float: left; background-color: RGB(240,240,240); padding: 10px; width: 520px;}
.standard-page-block .block-image img		{display: block;}
.standard-page-block .overlay,
.research-image	.overlay					{border-top: solid 1px RGB(209,211,212); color: RGB(209,211,212); padding-top: 0.3em; margin-top: 0.6em;}
.research-image a							{text-decoration: none;}
.research-image #image-pager,
.article-image #image-pager					{left: 0.5em !important; top: 4em !important; bottom: auto; border-top: solid 1px #DDD;}
.article-image #image-pager					{top: 0 !important;}
.bottom-page-block							{border-bottom: solid 1px RGB(209,211,212); margin-bottom: 2em;}

/* RESEARCH */
.research-article		{border-bottom: solid 1px RGB(209,211,212); margin-bottom: 2em; padding-bottom: 1em;}
.research-article.last	{border-bottom: none;}
.research-image			{float: left; position: relative;}
.research-content		{float: left; margin-left: 20px; width: 640px; position: relative;}
.research-content .published	{position: absolute; right: 0; top: 0; line-height: 1.7;}
.research-content h3 a span	{font-size: 0.8em; text-decoration: underline; padding-left: 10px;}

.research-article.single .research-content	{margin-left: 0;}

/* research and news articles */
.external-link	{border-left: solid 1px RGB(129,57,26); background: transparent url("../icons/external-link-arrow.png") right top no-repeat; padding: 0 30px 0 10px; text-decoration: none; height: 20px; overflow: hidden; display: inline-block; line-height: 20px; /* Prevent long URL breaking out of container, NB height is also restricted */  -ms-word-break: break-all; word-break: break-all; word-break: break-word;-webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto;}
.external-link:hover	{background-position: right bottom; border-left: solid 1px RGB(147,108,58);}

/* PORTFOLIO */
#portfolio-wrapper		{position: relative;}
#portfolio				{z-index: 1; overflow: hidden;}
/* #portfolio:after 		{content: ""; display: table; clear: both;} */
.portfolio-entry		{width: 100%;  border-top: solid 1px RGB(240,240,240); border-bottom: solid 1px RGB(240,240,240);}
.portfolio-images		{float: left; height: 100%; overflow: hidden; width: 70%;}
.portfolio-images div	{width: 100%; height: auto; text-align: center;} /*height: 420px */
.portfolio-images img	{display: block; max-width: 100%; width: auto;}
.portfolio-info			{float: left; width: 170px; padding: 20px 20px 20px 40px; position: relative;} /* height: 378px; */

.portfolio-info .upper img	{margin-top: 40px;}

.portfolio-info .lower		{margin-top: 100px;}

.portfolio-info .dimensions	{letter-spacing: 0.05em; color: RGB(209,211,212);}

.portfolio-info .year			{color: RGB(123,125,120);}

.portfolio-info .material		{color: RGB(82,21,4);}

.portfolio-info .process, 
.portfolio-info .collection		{color: RGB(129,57,26);}


#portfolio-nav					{text-align: right; margin-top: 20px; height: 24px;}
#portfolio-pager 				{display: inline-block; vertical-align: middle;}
/*
#portfolio-pager a				{background-color: RGB(129,57,26);border: solid 1px RGB(129,57,26); -webkit-border-radius: 50%; border-radius: 50%; height: 8px; width: 8px; margin: 7px 2px; display: inline-block; text-indent: -9000px; overflow: hidden; text-align: left;}
#portfolio-pager a:hover		{background-color: RGB(147,108,58); border-color: RGB(147,108,58);}
#portfolio-pager a.activeSlide	{background-color: #FFF;}
*/

#prev, #next 	{ vertical-align: middle;height: 22px; width: 18px; display: inline-block; text-indent: -9000px; overflow: hidden; text-align: left; background:  transparent url("../icons/external-links-arrow-double.png") right top no-repeat;}
#next:hover		{background-position: right bottom;}
#prev			{background-position: left top;}
#prev:hover		{background-position: left bottom;}

#image-pager				{text-align: left; position: absolute; bottom: 18px; left: 10px; z-index: 5; background-color: RGB(240,240,240); -webkit-border-radius: 0px 0px 5px 5px; border-radius: 0px 0px 5px 5px;}
#image-pager a				{background-color: RGB(123,125,120); border: solid 1px RGB(123,125,120); -webkit-border-radius: 50%; border-radius: 50%; height: 8px; width: 8px; margin: 6px 3px; display: inline-block; text-indent: -9000px; overflow: hidden; text-align: left;}
#image-pager a:hover		{background-color: RGB(209,211,212); border-color: RGB(209,211,212));}
#image-pager a.activeSlide	{background-color: #FFF;}

/* DOWNLOADS */
#document-login-form, 
#document-downloads			{border: solid 1px #888; background-color: #EEE; padding: 40px;}