/*This part resets margins and lets you start with a clean fresh tight canvas*/
/* http://meyerweb.com/eric/tools/css/reset/    v2.0 | 20110126   License: none (public domain)*/
/* h and p dl, dt, dd, table, tr, th, td,removed from reset list*/
html, body, div, span, applet, object, iframe,
pre, a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, sub, sup, tt, var,
b, u, i, center,
ol, ul, li,
fieldset, caption, tbody, tfoot, thead,
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;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
* {
	box-sizing:border-box;
	-moz-box-sizing:border-box;
	-webkit-box-sizing:border-box;
	-webkit-font-smoothing:antialiased;
}
html, body {
	height:100%;
}




/*        Start below this line                */


div{overflow:hidden;}/* passable fix for white space (padding) between divs and correct alignment of floats*/
img{border-radius:5px;}
.center{ text-align:center;}
.body{ margin:0 auto; background-color:#f9f9f9; text-align:center; }
.maincontainer{ margin:0 auto; padding:0;}
/*    header styles  */
.header{ margin:0 auto; width:100%; font-size:20px; font-weight:bold; padding:20px 0 0 0; line-height:0px;}
a .header, a .header:link{ text-decoration:none;}
.header2{ margin:0 auto; width:100%; color: #333333; font-size:20px; padding:0 0 20px 0; line-height:0px;}
.clear{ clear:both;}
.line50{ width:50%; text-align:center;}
.h3{
	font-size:20px;
	font-weight:bold;
	margin:0 auto;
	padding:60px 0 20px 0;
}
.grow { transition: all .2s ease-in-out; }
.grow:hover { transform: scale(1.1); }
.max300{margin:0 auto; max-width:800px;!important }
.max300 img{ text-align: center;  width:100%;}
@media (max-width:600px){
.max300{ width:100%;}
.max300 img{ width:70%;}
}

/*hyper links*/
a:link {
	color:  #000066;
	text-decoration: none;
}
      /* visited link */
      a:visited {
	color:   #000066;
	text-decoration: none;
}
      /* mouse over link */
      a:hover {
	color:  000066;
	text-decoration: underline;
}
      /* selected link */
      a:active {
	color: #333333;
}


/*ellen tital hyperlinked*/
.h3 a {color:#3d2b1f;}
.h3 a:link, .h3 a:visited {color:#000066;}
.h3 a {text-align: center;} 
	  
	  
	  
	  
.index{ background-color: #e6e6fa;}

.studio{ background-color: #c3b091;}

.figurative{ background-color: #c3b091;}

.contact{ background-color: ##e6e6fa;}

.stilllife{ background-color: #c3b091;}

.watercolor{ background-color: #c3b091;}




/*   navagation */
.screennav{ margin:0 auto; text-align:center; width:100%; height:40px; }
.screennav a, .screennav a:link{ color: #f9f9f9;}
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
  padding-left:30%;/*this aligns the navagation center - use screen tagrets to adjust for tablest and cell phones*/
}
li {
  float: left;
}
li a, .dropbtn {
  display: inline-block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
li a:hover, .dropdown:hover .dropbtn {
  background-color: #4682b4;
}
li.dropdown {
  display: inline-block;
}
.dropdown-content {
  display: none;
  position: absolute;
  top:170px;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
  color: #333333;!important
}
.dropdown-content a {
  color: #333333!important;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}
.dropdown-content a:hover {background-color: #f1f1f1;}
.dropdown:hover .dropdown-content {
  display: block;
  color: #333333;!important
}

@media (min-width:601px){
.mobinav { display:none;}
}
@media (max-width:1500px){
ul { padding-left:28%;!important/*this aligns the navagation center - use screen tagrets to adjust for tablest and cell phones*/}
}
@media (max-width:1400px){
ul {  padding-left:26%;!important/*this aligns the navagation center - use screen tagrets to adjust for tablest and cell phones*/}
}
@media (max-width:1200px){
ul {  padding-left:24%;!important/*this aligns the navagation center - use screen tagrets to adjust for tablest and cell phones*/}
}
@media (max-width:1000px){
ul { padding-left:25%;!important/*this aligns the navagation center - use screen tagrets to adjust for tablest and cell phones*/}
}
@media (max-width:950px){
ul {  padding-left:20%;!important/*this aligns the navagation center - use screen tagrets to adjust for tablest and cell phones*/}
}
@media (max-width:800px){
ul { padding-left:0%;!important/*this aligns the navagation center - use screen tagrets to adjust for tablest and cell phones*/}
}
@media (max-width:630px){
ul { padding-left:0%!important; font-size:14px;/*this aligns the navagation center - use screen tagrets to adjust for tablest and cell phones*/}
}
@media (max-width:600px){
.screennav{ display:none;}
.mobinav, .mobinav a, .mobinav a:link, .mobinav a:visited { color:#f9f9f9;}

}

/*      this code can be used to align divs horizontally     */
/*    note container amounts, size, width, and image fill width all manipulate the end results  */
.floatcontainer{/*main contaciner to hold the floating boxes*/
	 width:100%;
}
/*block is 40% fill*/
.block {
	float:left;
	width:40%;/*equal the % to the amout of boxes ( 33.3 - 3 or 25% for 4 or 50% for 2) ect*/
	overflow:hidden;
	padding:15px;
}
.block img {width:60%}

/* block sides 30% */
.blocksides {
	float:left;
	width:30%;/*equal the % to the amout of boxes ( 33.3 - 3 or 25% for 4 or 50% for 2) ect*/
	overflow:hidden;
	padding:15px;
}
.blocksides img { width:70%}

/* thirds  33.3% */
.thirds{
	float:left;
	width:33.3%;/*equal the % to the amout of boxes ( 33.3 - 3 or 25% for 4 or 50% for 2) ect*/
	overflow:hidden;
	padding:15px;
}
.thirds img { width:70%;}

.fifty{
	float:left;
	width:50%;/*equal the % to the amout of boxes ( 33.3 - 3 or 25% for 4 or 50% for 2) ect*/
	overflow:hidden;
	padding:15px;
}
.fifty img{ width:40%;}/*this is the size of the image aka how much it fills the box*/
.fiftygalleries{
	float:left;
	width:50%;/*equal the % to the amout of boxes ( 33.3 - 3 or 25% for 4 or 50% for 2) ect*/
	overflow:hidden;
	padding:15px;
}
.fiftygalleries img { width:35%;}


@media (max-width:600px){
/* thirds  33.3% */

.block {
	width:100%;/*equal the % to the amout of boxes ( 33.3 - 3 or 25% for 4 or 50% for 2) ect*/
	padding:15px;
}
/* block sides 30% */
.blocksides {
	width:100%;/*equal the % to the amout of boxes ( 33.3 - 3 or 25% for 4 or 50% for 2) ect*/
	padding:15px;
}
.block img { width:75%;}
.blocksides img{width:75%;}
.thirds{
	width:100%;
	padding:15px;
}
.thirds img{ width:75%;}

.fifty{	width:100%;}
.fifty img{ width:75%;}
}

.block img {
	width:75%; 
}
.blocksides img{ width:75%;}

.thumbnails img{ width:70px;}
.thumb{width:100px;}
.column {
  float:left;
  width: 100%;
  padding: 5px;
}
/* Clear floats after image containers */
.clear{
  clear: both;
}
.padding-top{ padding:20px 0 0 0;}
.padding-top img{ width: 70%}

.hr {
	width:100%;
	color:#191970
}
/**************************************************/
/**************************************************/
/**************************************************/
/**************************************************/
/*                 resume page                    */
/**************************************************/
/**************************************************/
/**************************************************/
/**************************************************/
.resumeheading{ font-size:20px; font-weight:bold; text-align:left; !important}
.hangingindent {
	text-align: left;
	padding-left: 15px;
	background-color: #f1f1f1;
}
.hangingindent li { text-indent:10px; width:100%; padding:0 0 5px 0; }


/****************************************************/
meltoncookstudio page


@media (min-width:601px){
.topnav {display:none;}
}
.topnav {
  overflow: hidden;
  background-color: #333;
  color:#f9f9f9;
  position: relative;
}
.fa fa-bars{ color:#000000;!important}
.click{ color:#000000;!important}
@media (max-width:600px){
/* Style the navigation menu */
.topnav {
  overflow: hidden;
  background-color: #333;
  color:#f9f9f9;
  position: relative;
}

/* Hide the links inside the navigation menu (except for logo/home) */
.topnav #myLinks {
  display: none;
  color:#f9f9f9;
}

/* Style navigation menu links */
.topnav a {
  color: #f9f9f9;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
  display: block;
}

/* Style the hamburger menu */
.topnav a.icon {
  display: block;
  position: absolute;
  right: 15px;
  top: 0;
}

/* Add a grey background color on mouse-over */
.topnav a:hover {
  background-color: #f9f9f9;
  color: black;
}

/* Style the active link (or home/logo) */
.active {
  background-color: #f9f9f9;
  color: white;
} 
}