@charset "utf-8";

/*
stylesheet for www.sheboyganvisualartists.com, version 2
February 2017
Gregory Kerkman, Web Designer
*/

/* -----color guide-----
#000000 black
#FFFFFF white
#CCC off white [title, menu link]
#333 dark grey [menu background]
#aaaaaa light grey [dropdown menu]
#f1f1f1 off white [dropdown hover]
#eee off white [memberItem]
#FC0 yellow [notice]
#C00 red [redbutton]
#0C0 green [greenbutton, buyButton]
*/

/* -- Fonts -- 
sans-serif
*/

/* CSS Document */

/* CSS Reset */
/** * Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/) * http://cssreset.com */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;}

/* Global Constants */

/*html5 display rule*/
article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary {
	display: block;
}

/* Custom, iPhone Retina */ 
@media only screen and (min-width : 320px) {
	
	html {
		min-width: 100%;
		min-height: 100%;
	}
	
	.clearfix:after {
		content: "";
		display: block;
		clear: both;
	}
	
	body {
		color: #fff;
		background-color: #000;
		margin: 0.5em;
		font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
	}
	
	.container {
		width: 100%;
		max-height: 100%;
	}
	
	.content {  /* causing problem on home page */
		/*width: 100%;
		min-height: 80%;*/
	}
	
	/* --- GENERAL STYLES --- */
	
	p {
		padding-bottom: 1em;
	}

	h2 {
		line-height: 1;
		padding-bottom: 0.5em;
	}
	
	/* --- End General Styles --- */
	h2.padded {
		/*padding-top: 20px;*/
	}
	.marginTop {
		/*margin-top: 20px;*/
	}
	.extraMarginTop {
		/*margin-top: 44px;*/
	}

	.header {
		text-align: center;
	}
	#title {
		display: block;
		width: 100%;
	}
	#title img {
		width: 50%;
		margin: 0 auto;
		padding: 0 auto;
	}
	#menu {
		width: 100%;
		font-weight: bold;
		font-size: 1.2em;
		text-transform: uppercase;
		list-style-type: none;
		margin: 1em 0 0;
		padding: 0;
		background-color: #333;
	}
	#menu li {
		/*float: left;*/
	}
	#menu li a {
		color: #ccc;
		padding: 0.5em;
		display: block;
	}
	#menu li a, .dropbtn {
		/*color: white;
		text-align: center;
		padding: 14px 16px;
		text-decoration: none;*/
	}
	#menu li a:hover, .dropdown:hover .dropbtn {
		/*color: #333333;
		background-color: #cccccc;*/
	}

	#menu li.dropdown {
		/*display: inline-block;*/
	}

	.dropdown-content {
		/*display: none;
		position: absolute;
		background-color: #aaaaaa;
		min-width: 160px;
		box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);*/
	}

	.dropdown-content a {
		/*color: black;
		padding: 12px 16px;
		text-decoration: none;
		display: block;
		text-align: left;*/
	}

	.dropdown-content a:hover {
		/*background-color: #f1f1f1*/
	}

	.dropdown:hover .dropdown-content {
		/*display: block;*/
	}

	#menu li a:hover, #menu a.on {
	}


	#facebookLink,#facebookGroupLink,#flickrLink,#youTubeLink,#mailchimpLink {
		/*display: inline-block;
		top: 0;
		background-repeat: no-repeat;
		background-position: center center;
		height: 58px;*/
	}
	#facebookLink {
		/*width: 45px;
		background-image: url(/images/facebook.png);*/
	}
	#facebookGroupLink {
		/*width: 36px;
		background-image: url(/images/facebook-group-small.png);*/
	}
	#flickrLink {
		/*width: 40px;
		background-image: url(/images/flickr-icon-small.png);*/
	}
	#youTubeLink {
		/*width: 40px;
		background-image: url(/images/youtube.png);*/
	}
	#mailchimpLink {
		/*width: 40px;
		background-image: url(/images/eepurl.png);*/
	}

	#facebookLink span,#facebookGroupLink span,#flickrLink span,#youTubeLink span,#mailchimpLink span {
		/*display: none;*/
	}
	#breadcrumb {
		/*position: relative;
		display: block;
		height: 20px;*/
	}
	#membersLink {
		/*display: block;
		position: absolute;
		right: 0;
		top: 0;*/
	}
	.memberItem {
		/*background-color: #eee;
		padding: 10px;
		margin-bottom: 10px;
		margin-top: 10px;*/
	}

	.event, .infoBlock, .insetEvent {
		/*background-color: #eee;
		display: block;
		padding: 10px;
		margin-bottom: 10px;
		margin-top: 10px;*/
	}
	.insetEvent {
		/*background-color: #FFFFFF;*/
	}
	.infoBlock {
		/*margin: 0;*/
	}
	.event p, .memberItem p {
		/*padding: 0 !important;*/
	}
	.event ul, .memberItem ul {
		/*padding-bottom: 0;*/
	}
	.multiCol {
	}
	.multiCol div {
	}
	.leftCol{
		/*width: 465px;
		float: left;*/
	}
	.rightCol {
		/*width: 465px;
		float: right;*/
	}
	.leftColRSVP{
		/*width: 340px;
		float: left;*/
	}
	.leftColSub {
		/*width: 165px;
		float: left;*/
	}
	.rightColSub {
		/*width: 300px;
		float: right;*/
	}
	.rightColSubRSVP {
		/*width: 170px;
		float: right;*/
	}

	.col1of3, .col2of3, .col3of3 {
		/*width: 300px;
		float: left;*/
	}


	.col1of4, .col2of4, .col3of4, .col4of4 {
		/*width: 225px;
		float: left;*/
	}

	.cell4 {
		/*width: 215px;
		float: left;
		background-color: #fff;
		margin: 4px;
		padding: 4px;*/
	}
	.cell4 h1 {
		/*line-height: 24px;*/
	}
	.clearBoth {
		/*clear: both;*/	
	}

	.first {
		/*margin-top: 0;*/
	}

	.popup a {
		/*color: #333;*/
	}
	#memberContainer {
		/*position: relative;*/
	}
	#patronMembers,#formerMembers {
		/*position: absolute;
		width: 200px;*/
	}

	#artistMembers {
		/*width: 200px;*/
	}

	#patronMembers {
	  /*top: 0;
	  left: 220px;*/
	}

	#formerMembers {
	  /*top: 0;
	  left: 440px;*/
	}

	#ff p {
		/*padding-bottom: 0;*/
	}
	#notice {
		/*background-color: #FC0;
		padding: 10px;
		color: #333;
		margin-bottom: 20px;
		display: block;*/
	}
	#notice a {
		/*color: #000;*/
	}
	.paddingBottom{
		/*padding-bottom: 20px !important;*/
	}
	#home {
		/*padding: 0;
		height: 480px;*/
	}
	#FlickrSet {
		/*padding-top: 30px;
		padding-bottom: 14px;*/
	}
	.submitButton {
		/*display: block;
		text-align: center;
		clear: both;
		padding: 30px;*/
	}
	.joinField {
		/*width: 98%;*/
	}
	#joinSubmit {
		/*text-align: center;
		padding-bottom: 25px;*/
	}
	#rsvpSubmit {
		/*padding-bottom: 25px;*/
	}
	.note {
		/*font-size: 11px;
		line-height: 13px;
		display: block;
		padding: 6px;*/
	}
	.complete {
		/*color: #fff;*/
	}
	.bioImage {
		/*float: left;
		padding-bottom: 10px;
		padding-right: 10px;*/
	}
	.artistsBioText {
		/*background-color: #fff;
		padding-left: 10px;
		padding-right: 10px;
		padding-top: 10px;*/
	}
	.artistsText {
		/*background-color: #fff;
		padding-left: 10px;
		padding-right: 10px;
		padding-top: 10px;
		margin-bottom: 20px;*/
	}
	.noBottom {
		/*margin-bottom: 0;
		padding-bottom: 0;*/
	}
	.artistLink {
		/*display: block;
		float: left;
		height: 150px;
		padding-right: 25px;
		text-align: center;
		width: 75px;*/
	}
	.redbutton {
		 /*background-color: #C00;
		 color: #FFF;
		 text-decoration: none;
		 padding: 5px;*/
	}
	.greenbutton {
		 /*background-color: #0C0;
		 color: #FFF;
		 text-decoration: none;
		 padding: 5px;*/
	}
	.buyButton {
		/*padding: 4px;
		background-color: #0C0;
		width: 200px;
		text-align: center;
		border-radius: 5px;
		margin-top: 5px;*/
	}
	.buyButton a {
		/*text-decoration: none;
		color: #FFFFFF;*/
	}
	#copyright {
		/*float: left;
		text-align: left;*/
	}
	#allLinks {
		/*text-align: right;*/
	}
	.viewButton a {
		/*background-color: #0C0;
		border-radius: 5px;
		color: white;
		margin-top: 5px;
		padding: 4px 20px 4px 20px;
		text-align: center;
		text-decoration: none;
		width: 100px;*/
	}
	a img.social {
		/*border: 2px solid #000000;*/
	}
	
	/* Home Page */
	.slideshow {
		/*display: block;
		float: none;
		width: 55%;*/
	}
	.slideshow img {
		/*width: 100%;*/
	}
	.homeText {
		/*float: none;
		display: block;
		width: 447px;
		padding-left: 1em;*/
	}
	.homeText div {
		/*position: relative;
		display: block;*/
	}
	.title0,.title1,.subtitle1,.subtitle2,.textHome {
		/*display: block;
		margin: 0;
		padding: 0;*/
	}
	.title1 {
		/*font-size: 28px;
		font-weight: bold;
		color: #202020;
		line-height: 30px;*/
	}
	.title2 {
		/*font-size: 24px;
		font-weight: bold;
		color: #202020;
		line-height: 24px;*/
	}
	.subtitle1 {
		/*font-size: 20px;
		font-weight: bold;
		color: #444;
		line-height: 24px;*/
	}
	.subtitle2 {
		/*font-size: 18px;
		font-weight: bold;
		color: #444;
		line-height: 18px;*/
	}
	.textHome {
		/*margin-top: 10px;
		line-height: 18px;*/
	}
	
	/* End Home Page */
	
}  /* End 320px width */

/* Extra Small Devices, Phones */ 
@media only screen and (min-width : 480px) {

} /* End Extra Small Devices, Phones */

/* Small Devices, Tablets */
@media only screen and (min-width : 768px) {
	#title {
		display: inline-block;
		width: 25%;
	}
	#title img {
		width: 100%;
	}
	
}  /* End Small Devices, Tablets */

/* Medium Devices, Desktops */
@media only screen and (min-width : 992px) {
	
}  /* End Medium Devices, Desktops */

/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px) {
	
} /* End Large Devices, Wide Screens */

@media only screen and (min-width : 1920px) {
	
}

@media only screen and (min-width : 2880px) {
	
}