/* ======== Altrincham Society of Artists Screen Stylesheet ::
Original:   shelfimage, Killersites.com
Modified:   May 2020 Tom Russell
Created:    November 2014, THR
Updated:	  Date / Initials
Version:	  4.0 4/26/2011
*/

/* ======== Resets ::
----------------------------------------------------------------- */
body, address, blockquote, h1, h2, h3, h4, h5, h6, p, pre, dl, ol,
ul, dd, dt, li, fieldset, figure, form, menu { margin: 0; padding: 0; }

/* ======== HTML & Body ::
----------------------------------------------------------------- */
html {
	font-size: 100.01%;
	height: 101%;
	-webkit-font-smoothing: antialiased;
	-webkit-text-size-adjust: auto;
	}

body { 
		width: 70%;
		margin-left: 10vw; margin-right:10vw;
		height: 70%;
		font:100%/1.4 Arial,Tahoma,Geneva,Helvetica,sans-serif;
		background:#fff;
		color:#333;
}

/* ======== Links ::
----------------------------------------------------------------- */
a,a:visited {text-decoration:underline;}
a:active, a:focus, a:hover {text-decoration:none;outline:none;}
a img {border:none;}

/* ======== Typography ::
----------------------------------------------------------------- */
/* example: @font-face {
font-family: 'MyriadProRegular';
src: url('../fonts/myriadpro-regular-webfont.eot');
src: local('Myriad Pro'), local('MyriadPro-Regular'), 
url('../fonts/myriadpro-regular-webfont.woff') format('woff'), 
url('../fonts/myriadpro-regular-webfont.ttf') format('truetype'),
url('../fonts/myriadpro-regular-webfont.svg#webfontt5Bf7X9V') format('svg');
}*/

/*abbr,acronym {text-decoration: none;border:0}
address, h1, h2, h3, h4, h5, h6, dd, dt, li, p, pre {padding:6px 0;}
h1 {font-size:22px;}
h2 {font-size:18px;}
h3 {font-size:16px;}
h4 {font-size:14px;}
h5 {font-size:12px;}
h6 {font-size:11px;}
address,blockquote,div,dd,dt,li,p,pre,th,td {font-size:12px;}
dt {font-weight:bold;}
q:before,q:after {content:'';}
*/
/* ======== Lists ::
----------------------------------------------------------------- */
dl, ol, ul {margin-left: 20px;}
li, ol, dd, dt {vertical-align:middle;list-style-position: inside;}

/* ======== Tables ::
----------------------------------------------------------------- */
table {border:none;border-collapse:collapse;border-spacing:0;overflow:hidden;word-wrap:break-word;}
caption, th, td {text-align: left;vertical-align:top;}

/* ======== Clearing ::
----------------------------------------------------------------- */
.clearfix:before, .clearfix:after {content: "\0020"; display: block; height: 0; overflow: hidden;}
.clearfix:after {clear: both;}

/* ======== General Purpose Classes ::
----------------------------------------------------------------- */
.alignleft { text-align: left; }
.alignright { text-align: right; }
.caps { text-transform: uppercase !important; }
.center { text-align: center; }
.clear { clear: both; padding: 0; margin: 0; line-height: 0; }
.floatleft { float: left; }
.floatright { float: right; }
.hidden { display: none; }
.inline { display: inline; }
.large { font-size: 125%; font-weight: bold; }		/*.large {font-size:20px;font-weight:bold;} OLD STUFF*/
.light { color: #999; }
.small { font-size: 63%; font-weight: normal; }		/*.small {font-size:10px;font-weight:normal;} OLD STUFF*/
.visuallyhidden { position: absolute; left: -9999em; }/* SEO Ok way to move text out of view */

/* ======== Template ::
----------------------------------------------------------------- */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
#wrap {}
#header /* header */ { }
#content { }
#main {}
#sidebar {}
#footer /* footer */ { clear: both; }

/* ------------ ASA specific ------------------ */
.homeIntro1 {
	font-family: 'Kaushan Script', sans-serif;
	color: #0080ff;
	font-style: normal;
	width: 60%;
	height: auto;
  text-align: center;
	margin-left: auto;
	margin-right: auto;
  padding-top: 2%;
}

.homeIntro2 {
	font: normal normal normal 200%/100% "calibri light", sans-serif;
/*	font-style: normal;font-size: 200%; */
  text-align: center;
  padding-top: 2%;
}

.homeIntro3 {
	font-style: italic;
	font-size: 50%;
}

.homeHeader {
	font: 400% "calibri light", sans-serif;
	text-align: center;
	padding: 2%;
  text-shadow: 5px 5px 5px grey;
}

#film_roll {
	width: 100%;
	margin: auto;
}

/* Home page. */
.OM_container {
	width: 100%;
/*	height: 25%;*/
	height: 10em;
	border: 0px;
	margin: 0px;
	padding: 0px;
   /*  ie6/7 */
    *display: inline;
    zoom: 1;
}

.OM_link {
	 text-decoration: none;
}

.OM_div {
	display: inline-block;
	height: 100%;
	margin: 0px;
	padding: 0px;
	vertical-align: top;
	overflow: auto;
  /*ie6/7 */
    *display: inline;
    zoom: 1;
}

.OM_artist {
	display: inline-block;
/*  position: relative; */
	height: 27vw;
	width: 29%;
	border: 1px solid black;
/*	margin: 1.4% 1.4% 2.5% 1.4%; */
	margin: 1vw 1vw 2vw 1vw;
}

.OM_artistPhoto {
	height: 80%;
	width: auto;
	border-radius: 15px;
	float: left;
}

.OM_artistName {
	text-align: left;
	font-size: 1vw;
}

.OM_picture {
    width: 100%;
    height: 80%;
    max-width: 100%;
    max-height: 100%;
		margin-top: 0%;
		vertical-align: sub;
}

.OM_bioText {
	font: italic normal normal 1vw/1.3vw 'calibri light', sans-serif;
}

.OM_samplePainting {
	/* Use for normal aspect ratio paintings */
	height: 95%;
	width: auto;
/*	overflow: auto;*/
	float: right;
	border: 1px solid #cccccc;
}

.OM_samplePaintingXW {
/*	Use for extra wide paintings */
	height: auto;
	width: 100%;
	float: right;
	border: 1px solid #cccccc;
}

.OM_picture a img {
    display: block;
    margin: auto;
}

.OM_ASAlogo {
	display: inline-block;
	width: 15%;
}

.OM_ASAlogoImg {
	display: block;
	margin: 1em;
	margin-bottom: 0px;
	width: 70%;
}

.OM_artistLinks {
	font: bold 1vw/1vw 'Calibri', sans-serif;
	color: black;
	padding-bottom: 0.5em;
}

.OM_artistLinksPad {
	padding-right: 0.5em;
}

.OM_sales {
/*	font: italic 0.8em/0.9em 'Calibri light', sans-serif; */
	font:  1vw/1vw 'Calibri light', sans-serif;
	color: teal;
	padding-top: 0.5em;
}

.OM_info_panel {
/*	position: absolute; 
	top: 80%;*/
	padding: 2.5% 2.5% 2.5% 5%;
}

.OM_picture_title {
	font: bold 1vw/1vw 'Calibri', sans-serif;
}

.OM_picture_detail {
	font: bold 0.8vw/0.9vw 'Calibri', sans-serif;
}

.OM_picture_footer {
/*	font: italic 0.8em/0.9em 'Calibri light', sans-serif; */
	font: italic 0.8vw/1vw 'Calibri light', sans-serif;
}

.OM_Intro {
	display: inline-block;
	width: 80%;
	height: auto;
	margin: 0.7vw;
	color: grey;
	font: normal 1.5vw/1.5vw 'Calibri light', sans-serif;

  text-align: center;
}

.OM_socialMediaSpan {
	display: inline-block;
	width: 5%;
	height: auto;
	padding: 0 1em 0 0;
	}

.OM_socialMedia {
	width: 100%;
	height: auto;
	border-radius: 3px;
	align-content: center;
}

.zoomTall {
	transition: transform 0.5s;
	display: block;
	position: relative;
	height: auto;
	max-height: 95%;
	width: auto;
	max-width: 90%;
	margin-top: 5%;
	border: 1px solid black;
	margin-left: auto;
	margin-right: auto;
}
        
.zoomTall:hover {
	-ms-transform: scale(2.5); /* IE 9 */
	-webkit-transform: scale(2.5); /* Safari 3-8 */
	transform: scale(2.5);
	transition-delay: 500ms;
	z-index: 2;
}

.zoomWide {
	transition: transform .5s;
	display: block;
	position: relative;
	width: auto;
	max-width: 90%;
	height: auto;
	max-height: 95%;
	margin-top: 5%;
	border: 1px solid black;
	margin-left: auto;
	margin-right: auto;
}
        
.zoomWide:hover {
	-ms-transform: scale(2.5); /* IE 9 */
	-webkit-transform: scale(2.5); /* Safari 3-8 */
	transform: scale(2.5);
	transition-delay: 500ms;
	z-index: 2;
}


/* ======== Navigation ::
----------------------------------------------------------------- */
/* ==== Main Menu ==== 
#menu ul {margin:0 auto; list-style: none;}
#menu li {float: left;}
#menu a {display: block;}
#menu a:active, #menu a:focus, #menu a:hover {}*/

	/* 2nd Tier Child Menu with Accessible drop down method 
	#menu li ul {position: absolute;top: -999em;left: -999em;}
	#menu li:hover ul, #menu li.hover ul {top: auto;left: auto;}
	#menu li li {}
	#menu li a {}
	#menu li a:active, #menu li a:focus, #menu li a:hover {}*/
	

/* ==== Footer Menu ==== */
#footer ul { }
#footer li { }
#footer li a { }
#footer li a:active, #footer li a:focus, #footer li a:hover { }

/* ======== Page Styles ::

/* ======== Forms ::
----------------------------------------------------------------- */
label {cursor:pointer;}
fieldset {border:0;}
input,label,select,textarea {line-height:1.2;vertical-align:baseline;font-size:inherit;font-family:inherit;}
input[type=radio], input[type=checkbox] {position:relative;top:1.5px;}
input[type=text], textarea {padding:.2em;}
textarea {overflow:auto;}

/* ==== Simple CMSMS Contact Form for modified contact template ==== */
#contactform {margin:0 auto;width:500px;}
#contactform div {clear:both;display:block;padding:5px 0;overflow:hidden;}
#contactform label, #contactform p.label, #contactform input {display:block;float:left;}
#contactform label, #contactform p.label {padding:4px 10px 0 0;text-align:right;width:30%;}
#contactform input, #contactform textarea {width:60%;}
#contactform textarea {height:180px;}
#contactform div.submit input {width:160px;}
/* Errors */
#contactform .error, #contactform .error * {color:#c1342c !important;}


/* ======== Internet Explorer Corrections ::
----------------------------------------------------------------- */
#iexplorer .clearfix {zoom: 1;}
.ie7 img { -ms-interpolation-mode: bicubic; }


/* ======== Print ::
----------------------------------------------------------------- */

@media print {
  * { background: transparent !important; color: black !important; text-shadow: none !important; filter:none !important;
  -ms-filter: none !important; } 
  a, a:visited { color: #444 !important; text-decoration: underline; }
  a[href]:after { content: " (" attr(href) ")"; }
  abbr[title]:after { content: " (" attr(title) ")"; }
  .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; }  
  pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
  thead { display: table-header-group; }
  tr, img { page-break-inside: avoid; }
  @page { margin: 0.5cm; }
  p, h2, h3 { orphans: 3; widows: 3; }
  h2, h3{ page-break-after: avoid; }
}