/* CSS HEX */
--jet: #353535;
--white: #ffffff;
--light-gray: #f2f2f2;
--middle-grey: #8a897c;
--highlight/active: #642C3F;

body {
	font-family: 'Roboto', sans-serif;
	font-weight: 300;
	background-color: #ffffff; 
	color: #8a897c;
}


.loadingimg {background-color: #f2f2f2;}

.strong {font-weight: 800;}

.highlightback,.blockhead {background-color: #f2f2f2;}

/*General Text*/
h1,h2,h3,h4,h5,h6,.headcolour {
	font-family: 'Domine', serif;
	font-weight: 700;
	text-transform: uppercase;
}

h1,h2,h3,h4,h5,h6,h2 a,h3 a,h4 a,h5 a,h6 a,.headcolour {
	color: #353535;
}

p,.bodycolour {color: #8a897c;}

p,.bodyfont,.cmsbody p,ul,ul li,a,span {
	font-family: 'Roboto', sans-serif;
}

/*.grey {color: #8a897c;}*/

a {color: #b3b3b3;}
a:hover, a:focus {color: #353535;}
a:active {color: #642C3F;}

a:hover, a:focus {text-decoration: none;}

ul li,.cmsbody ul li {color: #8a897c;}

.strong, .cmsbody b, .cmsbody strong {font-weight: 700;}


/* Forms */
label span.error {
	background-color: #841919;
	color: #ffffff;
}

input,select,textarea {
	font-family: 'Roboto', sans-serif;
	background-color: #ffffff;
	border-color: #d7d7d7;
	color: #8a897c;
}

input.optional, textarea.optional {
	background-color: #f9f9f9;
}

input.error, textarea.error, select.error {
	border-color: #841919;
	background-color: #e8d9d9;
}

input::placeholder {color: #d2d2d2;}

button,.button {
	-moz-box-shadow:inset 0px 1px 3px 0px #d4b6d4;
	-webkit-box-shadow:inset 0px 1px 3px 0px #d4b6d4;
	box-shadow:inset 0px 1px 3px 0px #d4b6d4;
	background-color:#8a897c;
	border-color: #353535;
	color:#ffffff;
	font-family: 'Roboto', sans-serif;
	font-weight: 300;
}

button:hover,button:focus,.button:hover,.button:focus {
	background-color:#353535;
	color: #ffffff;
}


/* Header */
header {
	background-color: #ffffff;
	border-bottom-color: #e6e6e6;
	border-bottom-width: 1px;
}

section#mainlogowrap .sitelogo path, #sidenavlogowrap .sitelogo path {
	/*fill: #8a897c !important;*/
}

section#mainlogowrap .sitelogo:hover path, section#mainlogowrap .sitelogo:focus path, #sidenavlogowrap .sitelogo:hover path, #sidenavlogowrap .sitelogo:focus path {
	/*fill: #353535 !important;*/
}	

#mainlogowrap .sitelogo:active path ,#sidenavlogowrap .sitelogo:active path {
	/*fill: #000000;*/
}


/* Main Navigation */
nav#topnav a {color: #8c8c8c;}
nav#topnav a:hover, nav#topnav a:focus, nav#topnav a.active {color: #8c8c8c; background-color: #f2f2f2;}
nav#topnav a:active {color: #642C3F; background-color: #f2f2f2;}


/* Side Menu */
#sidenavigation {background-color: #ffffff;}

#sidenavopen, #sidenavclose {
	border-top-color: #8a897c;
	border-bottom-color: #8a897c;
}

#sidenavopen:hover, #sidenavopen:focus,#sidenavclose:hover, #sidenavclose:focus {border-color: #353535;}
#sidenavopen:active, #sidenavclose:active {border-color: #642C3F;}

nav#mainnav a {color: #8a897c;}
nav#mainnav a:hover, nav#mainnav a:focus, nav#mainnav a.active {color: #8a897c; background-color: #f2f2f2;}
nav#mainnav a:active {color: #642C3F;}

/* Footer */
div#footercalenderwrap {background-color: #f2f2f2;}
div#footercalenderwrap p {color: #cccccc;}

div#newsletterwrap {background-color: #8a897c;}
div#newsletterwrap h2 {color: #ffffff;}
div#newsletterwrap p {color: #cccccc;}

form#newsletterform input.button {background-color: #e6e6e6; color: #353535;}
form#newsletterform input.button:hover, form#newsletterform input.button:focus {background-color: #353535; color: #e6e6e6;}
form#newsletterform input.button:active {background-color: #ffffff;	color: #642C3F;}

#colourfooter {background-color: #8a897c;}

section#footerlogowrap .sitelogo path {
	/*fill: #ffffff !important;*/
}
section#footerlogowrap .sitelogo:hover path, section#footerlogowrap .sitelogo:focus path {
	/*fill: #353535 !important;*/
}

section.footsitemapcol h2 a {color: #c2c2c2;}
section.footsitemapcol h2 a:hover, section.footsitemapcol h2 a:focus {color: #ffffff;}
ul.smlist li a {color: #ffffff;}
ul.smlist li a:hover,ul.smlist li a:focus {background-color: #353535; color: #ffffff;}

.footsociallink {
	color: #ffffff;
}


article#legalfooter {background-color: #353535; color: #ffffff;}
section#legalfootleft p {color: #ffffff;}
section#legalfootleft a {color: #8a897c;}
section#legalfootleft a:hover, section#legalfootleft a:focus {color: #353535;}

#arglink path {fill: #ffffff !important; transition: 1s;}
#arglink:hover path {fill: #37abc8 !important;}

#backtotop {
	background-color: #c3c3c3;
}

/* Sliders */
.slidernav {color: #ffffff;}
span.clicknav {background-color: #ffffff;}
span.clicknav.selected {background-color: #391d27;}

.slidertext h2 {background-color: rgba(87, 45, 65, 0.6); color: #ffffff;}
.slidertext p {background-color: rgba(255, 255, 255, 0.8);}

/* Banners */
.bannerwrap {background-color: #e6e6e6;}

#bannersuccess {background-color:rgba(67,76,86,0.7);}
#bannersuccess h2 {background-color: #353535; color: #ffffff;}

article#breadcrumbs {background-color: #f2f2f2;}

p.breadcrumbs {color: #8a897c;}
p.breadcrumbs a {color: #8a897c;}
p.breadcrumbs a:hover, p.breadcrumbs a:focus {color: #353535;}
p.breadcrumbs a:active {color: #642C3F;}

.collectionpanel, 
.albumpanel {
	background-color: #f2f2f2;
}

.highlightback .collectionpanel, 
.highlightback .albumpanel {
	background-color: #f8f8f8;
}


.collectionpanel:hover, 
.collectionpanel:focus, 
.albumpanel:hover, 
.albumpanel:focus,
.highlightback .collectionpanel:hover, 
.highlightback .collectionpanel:focus, 
.highlightback .albumpanel:hover,
.highlightback .albumpanel:focus {
	background-color: #8a897c;
}

.collectionpanel:active,
.albumpanel:active {
	background-color: #353535;
}

.collectionpanelimgwrap, 
.albumpanelimgwrap{
	background-color: #f2f2f2;
}

.albuminfo h3,.albuminfo h4,.albuminfo h5 {
	font-family: 'Roboto', sans-serif;
}
.albuminfo h4 {color: #8c8c8c;}
.albuminfo h5 {color: #8c8c8c;}

.collectionpanel:hover h3.linkpaneltitle,
.collectionpanel:focus h3.linkpaneltitle, 
.collectionpanel:hover p, 
.collectionpanel:focus p,
.highlightback .collectionpanel:hover h3.linkpaneltitle, 
.highlightback .collectionpanel:focus h3.linkpaneltitle, 
.highlightback .collectionpanel:hover p,
.highlightback .collectionpanel:focus p,
.albumpanel:hover .albuminfo h3, 
.albumpanel:focus .albuminfo h3, 
.albumpanel:hover .albuminfo h4, 
.albumpanel:focus .albuminfo h4,
.albumpanel:hover .albuminfo h5, 
.albumpanel:focus .albuminfo h5,
.albumpanel:hover .albuminfo p, 
.albumpanel:focus .albuminfo p,
.highlightback .albumpanel:hover .albuminfo h3, 
.highlightback .albumpanel:focus .albuminfo h3, 
.highlightback .albumpanel:hover .albuminfo h4, 
.highlightback .albumpanel:focus .albuminfo h4,
.highlightback .albumpanel:hover .albuminfo h5, 
.highlightback .albumpanel:focus .albuminfo h5,
.highlightback .albumpanel:hover .albuminfo p, 
.highlightback .albumpanel:focus .albuminfo p {
	color: #ffffff;
}


/* Photo Thumbnails*/
section.photowrap.selection article.thumbwrap.selected {border-color: #8a897c;}

.thumbwrap:hover .magnify,
.thumbwrap:focus .magnify,
.photowrap:not(.selection) .thumbwrap:hover .removephoto,
.photowrap:not(.selection) .thumbwrap:focus .removephoto,
.photowrap:not(.selection) .thumbwrap:hover .select,
.photowrap:not(.selection) .thumbwrap:focus .select,
.photowrap:not(.selection) .thumbwrap:hover .toggle,
.photowrap:not(.selection) .thumbwrap:focus .toggle {
	color: #353535;
}
.photoinfo h3 {font-family: 'Roboto', sans-serif;}


/* Calendar */
div.calendarcell h2.albumdatenumber {background-color: #353535; color: #ffffff;}
.calnavwrap {background-color: #8a897c;	color: #ffffff;}
.calnavwrap a {color: #f2f2f2;}
.monthname {background-color: #f2f2f2; color: #8a897c;}
.monthname:hover,.monthname:focus {background-color: #8a897c; color: #ffffff;}
.calpanel {background-color: #f2f2f2;}
.calpanel.calpho {background-color: #8a897c;}
.calpanel.calpho p {color: #ffffff;}
.calpanel.calcol {background-color: #ebd8e8; color: #8a897c;}
.calpanel.calpho:hover, .calpanel.calpho:focus, .calpanel.calcol:hover, .calpanel.calcol:focus ,.calpanel.calalb:hover, .calpanel.calalb:focus {background-color: #353535;} 
.calpanel.calcol h3, .calpanel.calalb h3 {color: #353535;}
.calpanel.calcol:hover h3, .calpanel.calcol:hover p, .calpanel.calalb:hover h3, .calpanel.calalb:hover p {color: #fff;}


/* Filmstrip */
#filmstripthumbs {background-color: #f2f2f2;}
.prevnextnext {background-color: #e6e6e6; color: #8a897c;}
.prevnextnext:hover, .prevnextnext:focus {background-color: #8a897c; color: #ffffff;}
.prevnextnext:active {background-color: #353535;}
.prevnextnext.buttonoff {background-color: #f2f2f2 !important; color: #ffffff;}


/* Tags */
#photo_tags {margin: 0 24px;}

.tagbutton,.taglabel {background-color: #ffffff;}
.tagbutton:hover, .tagbutton:focus {background-color: #8a897c; color: #ffffff;}
.tagbutton:active {background-color: #353535;}

.taglabel {background-color: #8a897c; color: #ffffff;}
.taglabel.exact {background-color: green; color: #ffffff;}
.taglabel.similar {background-color: orange; color: #ffffff;}
.taglabel:hover,.taglabel:focus {background-color: #353535;}

.tagbutton:before {border-right-color: #ffffff;}
.tagbutton:hover:before, .tagbutton:focus:before {border-right-color: #8a897c;}
.tagbutton:active:before {border-right-color: #353535;}

.taglabel:before {border-right-color: #8a897c;}
.taglabel.exact:before {border-right-color: green;}
.taglabel.similar:before {border-right-color: orange;}
.taglabel:hover:before,.taglabel:focus:before {border-right-color: #353535;}

.tagbutton:after, .taglabel:after {border: #e6e6e6 2px solid;}


/* Tag Cloud */
.cloudtag:hover, .cloudtag:focus {background-color: #8a897c;}
.cloudtag:active {background-color: #642C3F;}


/* Photo Actions */
#photoactions {background-color: #fff;}
.ajaxresult {background-color: #f2f2f2;}


/* Inline Editing */
.inlineeditbutton {
	font-family: 'Roboto', sans-serif;
	background-color: #8a897c;
	color: #ffffff;
}

.inlineeditbutton:hover, .inlineeditbutton:focus {background-color: #353535;}
.inlineeditbutton:active {background-color: #e6e6e6; color: #353535;}
.editable, .bannereditable {cursor: cell;}

.editicon {color: #b3b3b3;}
.editicon:hover, .editicon:focus {color: #8a897c;}
.editicon:active {color: #8a897c;}


/* Backgrounds */
#fadeback, #formback {background-color:rgba(0,0,0,0.7);}

#formback div {background-color: #572d41;}
#formback div.working {background-color: #f2f2f2;}

#fadecontent {background-color: transparent;}
#fadecontent h2 {color: #dad1b4;}
#fadecontent p {color: #ffffff;}

#cookieconfirmation {background-color:rgba(0,0,0,0.6);}
#cookieconfirmation article {background-color: #ffffff;}

/* PANEL WRAPS */
.switchtriggers.active, .switchtriggers.active:hover,.switchtriggers.active:focus,.switchtriggers.active:active {color: #353535;}
.switchtriggers.inactive {color: #e6e6e6;}
.switchtriggers.inactive:hover,.switchtriggers.active:focus {color: #8a897c;}
.switchtriggers.inactive:active {color: #841919;}


/* ADD ALBUM & ADD PHOTO WRAPS*/
.addalbumwrap a, .addphotowrap a {
	background-color: #f2f2f2;
	color: #ffffff;
	font-weight: 700;
}

.addalbumwrap a:hover, .addalbumwrap a:focus, .addphotowrap a:hover, .addphotowrap a:focus {
	background-color: #e6e6e6;
	color: #595959;
}

.addalbumwrap a:active, .addphotowrap a:active {
	background-color: #8a897c;
	color: #ffffff;
}

@media screen and (max-width: 800px){
	#mobnavhandle {
		background-color: #f2f2f2;
		/*font-weight: 700;*/
	}

	#mobnavhandle:hover, #mobnavhandle:focus, #mobnavhandle.open {
		background-color: #353535;
		color: #ffffff;
	}

	#mobnavhandle:hover:before {
		border-color: #ffffff;
	}

	nav#mainnav a {
		background-color: #f2f2f2;
	}

	nav#mainnav a.collnav {
		background-color: #8a897c;
		color: #ffffff;
	}

	nav#mainnav a.cmsnav {
		background-color: #d5d5d5;
	}

	nav#mainnav a:hover, nav#mainnav a:focus, nav#mainnav a.active {
		background-color: #353535;
		color: #ffffff;
	}
}