body { 
 	background-color:#dcdcd6; 
 	font-family:sans-serif; 
 	margin:0 0 0 0;
 	margin-bottom:4em; 
 	padding:0; 
} 

/* bgds */
/*--- older site brown */
body.illos {background-color:#ccccbb;} 
/*--- gpk pink */
body.gpk {background-color:#f7d4d4;} 
/*--- wacky yellow */
body.wacky {background-color:#f3f391;} 
/*--- trolls blue */
body.trolls {background-color:#aaccee;}
/*--- meanies purple */
body.mbs {background-color:#ccccff;} 
/*-----*/

p, ul, h1 { 
	margin-left:8%; 
	margin-right:8%; 
	/* line-height:1.22em; */
} 
ul.home {margin:0;}

hr {margin:auto;}/* centered */


/*---links*/
a:link {
	color:#222222; /*	*/
}
a:visited {
	color:#444444;
}
a:link:hover, a:visited:hover {
	color:#993333; 
	background-color:#ffffff; 
	text-decoration:underline;
}


/* ----- HEADINGS ----- */
h1 { 
	margin:0;
	padding:.45em;
	text-align:center; 
	font-size:275%; 
	/*color:#993333;*/ /*red-brown*/
	color:#929;/*purple*/
}
h2, h3 { 
	margin:0;
	padding:.325em 7.5%; 
	background-color:#ffffff; 
	font-size:133%; 
} 
h3 {
	font-size:120%; 
}
h4 {
	margin:0;
	padding:.325em 7.5% .67em; 
}

/* test for odd markup remnants */
h4, h5, h6 {
	/* background-color: #ff6666; */
}


/*----- TOP NAV older-----*/
nav {
	font-size:.825em;
}
nav ul {
	margin:0 0 0 0;
	padding:.35em 0 0 0;	
	text-align:center;
	list-style:none;
}
nav li {display: inline;}
nav a{}
nav a:link:hover, a:visited:hover {
	color: #993333; 
	background-color:#ffffff; 
	text-decoration:underline;
}


/*-----topnav newer, uses lists--*/
#topnav {
	padding-top:.25em;
	background:#888;
	color:white;
	border-bottom:1px solid #666;
}
#topnav li {
	margin-right:-1px;
}
#topnav a {
	margin:0;
	padding:.35em .425em .25em;
	color:white;
}
#topnav a:hover {
	background-color:#eee; 
	color:#929;
}
#topnav .artpg {
	padding:.35em 0 .25em 0;
	background:#929;
}
#topnav .currentpg {
	padding:.275em 0;
  	border:1px solid #bbb; 
	font-weight:bold;
}
.currentpg a {
	text-decoration:none;
}

/*-----lower rows links--*/
.nav12 ul {
	margin:0;
	padding:.35em 0;
	
	text-align:center;
	list-style:none;
  	border-top:1px solid #666; 
}
.nav12 li {
	padding:.35em 0;
	display:inline;
}
.nav12 a {
	margin:0;
	padding:.35em .65em .25em;
	color:#666;
}
.nav12 .currentpg {
	padding:.25em 0;
  	border:1px solid white; 
	font-weight:bold;
}
/*-----*/

/*-----Overall Layout*/
.mainSection {/* finalart, artworks, portfolio, paintings, jhpage1 */
	margin:0;
	/*padding:0;*/
	/*padding:.5em .5em 2em; */
	padding:.5em 0 2em 0;/*fit max wide*/
	text-align:center;
	width:auto;
}
.mainSection p {
	margin:.75em;
	max-width:39em;
	margin: .5em auto 2em;
}
.mainSection img {
	max-width: 100%;
}

.sideSection {
	background-color:#dd88dd;
	float:left;
	/*float: right;
	width:24%;*/
	width:14%;
	min-width:74px;/* for thumbnail imgs */
	border-left:1px solid #999;
	border-right:1px solid #999;
}


	/* home page code art examples, 1stGPK:wacky, ...*/
.container img {
	width:96%;
	max-width:1000px;

	text-align:center;
	display:block;
	margin-left:auto;
	margin-right:auto;
}

.squares {text-align:center;}
.squares img {
	/*max-width: 100%;*/
	max-width:495px;
	display:inline;
	padding:.5em .25em;
}
.squarediv{
	max-width:495px;
	display:inline-block;
	float:none;
	margin:0 auto;
	padding:0 .5em 0;
	vertical-align: top;/*text up*/
}
.squarediv p{max-width:26em; text-align:left;}
/*-----*/


/* ----- ART CAPTIONS ----- */
.caption, .textbox {/*artworks,portfolio,paintings,jphpage1*/
	margin-bottom:1.5em;
	padding:.5em;
	/* background-color:#eee;
	border:1px solid #888;*/
}
.caption p { 
	padding:0 1em 1.5em 1em;
	font-size:80%; 
	text-align:center; 
	color:#444; 
}
/*.caption imgXXXX {
	border:9px solid #fff;
}*/

/*-----*/
.textbox {/*jhpage1*/
	max-width: 36em;
	margin-left:auto;
	margin-right:auto;
}
.textbox img {
	max-width: 92%;
}
/*-----*/

/*--- home page?*/
.Footer {
	border-top: 1px solid #888;
	padding: 2em 0 3em;
	font-size:80%;
	display:none;
}
.Footer ul {
	margin: 0;
	padding: .33em;
	text-align: center;
	list-style: none;
}
.Footer li {	
	display:inline;
	padding:0 .5em;
}
.Footer hr { 
	width: 67%;
	height:1px;
	background-color: #888;
	border:0;
}
.Footer img { 
	height:72px;
	border: 1px solid #444;
	margin: 0 .5em;
}
/*-----*/


/*--- home page?
.bloghead {
	padding:0 1em 1em 1em;
	text-align:left;
}
.blogdate {
	padding:0 1em 1em 1em;
	text-align:left;
	font-size:80%;
	color:#888;
	
	display:none;
}
*/

/*----- home page bottom ---*/
.navarrows {
	margin:0%;
	padding:.25em;

	text-align:center;
	margin-left:auto;
	margin-right:auto;
}
.navarrows p {
	display:inline;
	margin:0;
	padding:0 .5em;
	color:#929;
}
.navarrows img {
	display:inline;
	padding:.25em;
	background-color:#929;
	height:2.5em;
}
.navarrows a:link:hover {text-decoration:none;background-color:transparent;}
.navarrows img:hover {background-color:#eee;}
.navleftarrow {display: inline; padding-right:2em;}
.navrightarrow {display: inline;}
/*-----*/

/*----- Links pg lists -----*/
.container {margin:0 0 0 0;padding:0 0 0 0;}
.container ul{margin-left:0;margin-right:0;padding:0 0 0 0;list-style: none;}
.container li{margin:0 0 0 0;padding:.35em 8% .35em 10%;}
.container li:nth-child(even){background:#eaeaea;}/*alternate colors*/
.container ul a{font-weight:bold;color:#555;}
/*-----*/

a.gotop{/*long pages, jump to top*/
	margin-bottom:.5em; padding:.5em;
	display:block;
	text-align:center;font-size:90%;
	color:#888; /*background-color:#faa;*/
}
a.gotop:link:hover{background-color:transparent;}



/*-----*/
/* Dead Simple Grid (c) 2012 Vladimir Agafonkin */
/* grid.css */
.col {padding:0 1.5em;}
.row .row {margin:0 -1.5em;}
.row:before, .row:after {
	content: "";
	display: table;
}
.row:after {clear:both;}

@media only screen {
	.col {
		float: left;
		width: 100%;

		-webkit-box-sizing: border-box;
		   -moz-box-sizing: border-box;
		        box-sizing: border-box;
	}
}
/* -- end grid.css -- */
/* all the important responsive layout stuff */
/*.container { xxmax-width: 90em; }*/

/* you only need width to set up columns; all columns are 100%-width by default, so we start
   from a one-column mobile layout and gradually improve it according to available screen space */
@media only screen and (min-width: 34em) { 
	.feature, .info { width: 50%; }
}
/*@media only screen and (min-width: 54em) {*/
@media only screen and (min-width: 48em) {
	.content { width: 66.66%; }
	.sidebar { width: 33.33%; }
	.info    { width: 100%;   }
}
@media only screen and (min-width: 76em) {
	.content { xxwidth: 58.33%; } /* 7/12 */
	.sidebar { xxwidth: 41.66%; } /* 5/12 */
	.info    { width: 50%;    }
}

/* -- screen.css --: */
body {
	xxfont-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	xxmargin: 0;
}
a {xxcolor: #06f;}
h1 {xxfont-size: 2.2em;}
h2 {xxfont-size: 1.4em;}
h2, h3, h4 {xxmargin-top: 0;}
h3, h4 {xxmargin-bottom: 0.5em;}

p, ul {
	line-height:1.375;
}
code {
	font-size: 1.2727em;
	color: #777;
}
iframe {
	border:0;
	overflow:hidden;
}

.container {
	margin:0 auto;
	margin:0;
	xxmax-width: 90em;
	padding:1em 0;
}

.footer {padding-top: 1.5em;}
.desc {xxcolor: #888;}
.intro {
	border-bottom: 1px dotted #bbb;
	padding-bottom: 1.5em;
}
.social {
	border-top: 1px dotted #bbb;
	padding-top: 1.5em;
}

/* minor responsive adjustments */
.footer {border-top: 1px dotted #aaa;}
.content {
	border-bottom: 1px dotted #aaa;
	margin-bottom: 1.5em;
}
@media only screen and (min-width: 34em) {
	.feature:first-child,
	.info:first-child {border-rightxx: 1px dotted #aaa;}
	h1 {font-size: 2.6em;}
	h2 {font-size: 1.6em;}
}

/*@media only screen and (min-width: 54em) {*/
@media only screen and (min-width: 48em) {
	.content {
		border: none;
		border-rightxx: 1px dotted #aaa;
		margin-bottom: 0;
	}
	.info:first-child {border: none;}
	h1 {font-size: 3em;}
	h2 {font-size: 1.7em;}

	nav {font-size:.87em;}/* j */
}

@media only screen and (min-width: 76em) {
	.info:first-child {border-rightxx: 1px dotted #aaa;}
	h1 {font-size: 3.2em;}
	h2 {font-size: 1.8em;}

	nav {font-size:.925em;}/* j */
}
/* -----end dead simple css----- */

/* minor responsive adjustments */
@media only screen and (min-width: 34em) {
}

/*@media only screen and (min-width: 54em) {*/
@media only screen and (min-width: 48em) {
	nav {font-size:.87em;}
}

@media only screen and (min-width: 76em) {
	nav {font-size:.925em;}
}