@charset "UTF-8";
/* Debra Lozon's CSS Styles */

body {
	font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
	margin: 0;
	padding: 0;
	font-family: 'MisoRegular', Verdana, Arial, Helvetica, sans-serif;
	/* For Blue Background*/
	/*background-color: rgb(224, 243, 255);*/
	background: rgb(236, 250, 250);
	background-image: url("../images/Opening_Pg_Transparent.png");
	
}

@font-face {
    font-family: 'MisoBold';
    src: url('../webfonts/miso-bold-webfont.eot');
    src: url('../webfonts/miso-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../webfonts/miso-bold-webfont.woff') format('woff'),
         url('../webfonts/miso-bold-webfont.ttf') format('truetype'),
         url('../webfonts/miso-bold-webfont.svg#MisoBold') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'MisoRegular';
    src: url('../webfonts/miso-regular-webfont.eot');
    src: url('../webfonts/miso-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../webfonts/miso-regular-webfont.woff') format('woff'),
         url('../webfonts/miso-regular-webfont.ttf') format('truetype'),
         url('../webfonts/miso-regular-webfont.svg#MisoRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'MisoLight';
    src: url('../webfonts/miso-light-webfont.eot');
    src: url('../webfonts/miso-light-webfont.eot?#iefix') format('embedded-opentype'),
         url('../webfonts/miso-light-webfont.woff') format('woff'),
         url('../webfonts/miso-light-webfont.ttf') format('truetype'),
         url('../webfonts/miso-light-webfont.svg#MisoLight') format('svg');
    font-weight: normal;
    font-style: normal;

}

.topbannerdiv {
	
	height: 155px;
	margin: 0;
	padding: 0;
	font-family: 'MisoRegular', Verdana, Arial, Helvetica, sans-serif;
	position:relative; 
}

#left_banner{
height: 155px;
width: 528px;
   position:absolute;
   bottom:0;
   left:0;
}
#top_menu{
height: 63px;
width: 69px;
   position:absolute;
   bottom:2px;
   left:528px;
}

#home_icon{
height: 63px;
width: 71px;
   position:absolute;
   bottom:7px;
   left:531px;
}



/* Dropdown Button */
.dropbtn {
    /* background-color: #4CAF50;*/
     /* color: white;*/
        background: transparent;
    padding: 0px;
    font-size: 16px;
    border: none;
    cursor: pointer;
}

/* Dropdown button on hover & focus 
.dropbtn:hover, .dropbtn:focus {
      background-color: #3e8e41;
}
*/
/* The container <div> - needed to position the dropdown content */
.dropdown {
    position: relative;
    display: inline-block;
    z-index: 1;
}

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

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

/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #f1f1f1}


/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show {display:block;}

/* end dropdown */

.artworksquares {
	height: auto;
	margin: 0;

	padding-left: 50px; 

	margin-top: 0;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
	font-family: 'MisoRegular', Verdana, Arial, Helvetica, sans-serif;
	font-size: 18px;

  min-width: 400px;

}


.contact_container{
height: 556px;
position:relative; 
}

#hand{
   position:absolute;
   bottom:0px;
   left:100px;
}

.bio_text{

}

.footer {
	height: auto;
	padding-left: 50px; 
	margin-top: 0;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
	font-family: 'MisoRegular', Verdana, Arial, Helvetica, sans-serif;
	font-size: 15px;
    min-width: 400px;
/* float: left;*/
}

.copyright_text {

	/* float: right; */
	
	width: 50%;
  margin: 0 auto;
}

IMG.ctrimage {
float: left;
}
  
.contact {
width: 150px; 
margin-right: auto;
margin-left: auto;
text-align: center

}



.grid-item {

	width: 180px;
	margin-bottom: 20px;

}



/* ~~ this fixed width container surrounds all other elements ~~ */
.container {
	margin: 0;
	padding-left: 50px; 
	padding-right: 50px; 
	margin-top: 0;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
}


p {
	margin-top: 0px;
	margin-bottom: 4px;
	padding-right: 30px;
	padding-left: 30px; /* adding the padding to the sides of the elements within the divs, instead of the divs themselves, gets rid of any box model math. A nested div with side padding can also be used as an alternate method. */
	font-family: 'MisoRegular', Verdana, Arial, Helvetica, sans-serif;
}

/* ~~ miscellaneous float/clear classes ~~ */
.fltrt {  /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
	float: right;
	margin-right: 30px;
}
.fltlft { /* this class can be used to float an element left in your page. The floated element must precede the element it should be next to on the page. */
	float: left;
	margin-right: 30px;
}

.cufltrt { /* this class can be used to float an element left in your page. The floated element must precede the element it should be next to on the page. */
	float: right;
	margin-right: 0px;
}


.fltctr {
	float: left;
	position: relative;
	left: 100px
}
.clearfloat { /* this class can be placed on a <br /> or empty div as the final element following the last floated div (within the #container) if the overflow:hidden on the .container is removed */
	clear:both;
	height:0;
	font-size: 1px;
	line-height: 0px;
}