/**
 * Stylesheet for holding page - gallery
 */

/**
 * CSS Reset
 * http://meyerweb.com/eric/tools/css/reset/ 
 * v2.0 | 20110126
 */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/**
 ***************************************************************************************************
 * Holding page
 ***************************************************************************************************
 */

/* Font for logo - replaced with graphic */
/*
@font-face {
    font-family: 'wc_mano_negra_btaregular';
    src: url('fonts/WCManoNegraBta-webfont.eot');
    src: url('fonts/WCManoNegraBta-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/WCManoNegraBta-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'wc_mano_negra_btabold';
    src: url('fonts/WCManoNegraBoldBta-webfont.eot');
    src: url('fonts/WCManoNegraBoldBta-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/WCManoNegraBoldBta-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
*/

/**
 * Body
 */
html, body {
height:100%;
background-color:#fff;	/* #000 */
}

/**
 * Fonts
 */
body {
color: #262626;;	/* #999 */
font-family: 'Palanquin', verdana, arial, helvetica, sans-serif;
line-height: 1.3;
font-size: 1.0em;	/* 0.9em when used with verdana */
}

/**
 * Default Anchors
 * - For specific anchor overrides see the relevant sections
 */

/* Override iOS anchor style when identifying a phone number */
a[href^="tel:"] {
	color: #262626;	/* Same as body */
	text-decoration: none;
}
a[href^="tel:"]:hover, a[href^="tel:"]:active, a[href^="tel:"]:focus {
	color: #009;
}


/**
 * Header
 */
header {
position: relative;
padding: 1em;
overflow: hidden;	/* Clear (potential) floats */
/*border-bottom: 1px solid #666;*/
/*box-shadow: 0 1px 4px #666;*/
/*background-color: #111;*/
}
header h1 {
color: #999;
font-size: 2.6em;  /* 3.2em does not quite fit on mobile screen width - increase in media queries */
font-family: wc_mano_negra_btabold,cursive;
font-weight: normal;
text-align: center;
}
header address {
	margin-top: -0.6em;	/* -1.0em */
	text-align: center;
}
header address span {
	display: block;
}
header address span.social-media {
	margin-top: 1px;
}
header address .phone-number {
	/*font-family: Georgia, Verdana, sans-serif;*/	/* Georgia / Garamond */
	font-size: 1.7em;
	/*text-align: center;*/
}
header img#logo {
	width: 100%;
	margin: 0 auto;
}

/**
 * Footer
 */

/* Sticky footer */
#wrapper {
min-height:100%;
height:auto !important;	/* Compliant browsers */
height:100%;	/* IE6 */
margin:0 auto -4em;	/* -198 */
/*overflow:hidden;*/	/* Clear floats, but some content overflows page in admin section */
}
#w3d-push {
height:4em;	/* 198 = 142 + 1 + 55 = #footer-section + border + #footer-content-section */
clear:both;	/* Problem with floated content otherwise */
}

footer {
height: 2em;	/* 2 + 1 + 1 = 4em */
padding: 1em;
/*border-top: 1px solid #666;*/
/*box-shadow: 0 -1px 4px #333;*/
/*background-color: #111;*/
}
footer p {
/*color: #999;*/
/*font-size: smaller;*/
}
footer p#copyright {
font-size: 0.7em;
}

/**
 * Social Media Links / Icons
 */
a.facebook {
	color: #4267b2;
	text-decoration: none;
	font-weight: normal;
	/* Google: facebook font */
	font-family: Tahoma, "Lucida Grande", "Helvetica Neue", "Roboto", sans-serif;
	/*font-family: "Lucida Grande", "Helvetica Neue", "Roboto", sans-serif;*/
}
img.facebook {
	width: 1.2em;
	vertical-align: top;
	/*height: 1em;*/
}


/**
 * Paintings
 */

#paintings {
/*font-size:0;*/
}
#paintings ul {
width: 100%;
}
/* 1 col (default mobile) */
#paintings ul li {
position: relative;
display: inline-block;
margin: 0.5em 0;
width: 100%;
}
#paintings ul li span {
position: absolute;
visibility: hidden;
left: 1em;
top: 0.5em;
padding: 0 0.5em;
color: #fff;
background-color: rgba(0,0,0,0.5);
}
#paintings ul li:hover span, #paintings ul li span.visible  {
visibility: visible;
}
#paintings ul li img {
display: block;
margin: 0 auto;
width: 92%;	/* 100% Orig, but still want white border on mobile */
/*box-shadow: 0px 0px 25px #999;*/
}

/**
 * Responsive adjustments...
 * - Default is mobile
 */

#mobile {
	position: absolute;
	right: 0;
	top: 0;
	padding: 0 0.5em;
	font-size: small;
	display: block;
	color: #fff;
	background-color: #fff;
}

/* 2 cols */
@media (min-width: 600px) {
	#paintings ul li {
		width: 50%;
	}
	#paintings ul li img {
		width: 96%;
	}
	#mobile {
		display: none;
	}
	header h1 {
		font-size: 3.2em;  /* 2.6em on mobile */
	}
	header img#logo {
		width: 55%;
	}
	header address {
		text-align: left;
	}
	footer p#copyright {
		font-size: 1em;
	}
}

/* 3 cols */
@media (min-width: 900px) {
	#paintings ul li {
		width: 33%;
	}
	/*
	header address {
		position: absolute;
		bottom: 0.5em;
		right: 1em;
	}
	*/
	header h1 {
		float: left;
	}
	header img#logo {
		width: 40%;
	}
	header address {
		float: right;
		margin-top: 0;
	}
	header address span {
		text-align: right;
	}
}

/* 4 cols */
@media (min-width: 1300px) {
	#paintings ul li {
		width: 25%;
	}
	header img#logo {
		width: 30%;
	}
}

/* 5 cols */
@media (min-width: 1700px) {
	#paintings ul li {
		width: 20%;
	}
	header img#logo {
		width: 25%;
	}
}