/* general */

body {
margin-top: 0;
margin-left: 0;
margin-right: 0;
font-family: Cantarell, Arial, sans-serif;
font-size: medium;
color: #555500;

/* background-image: url(pieces/images/metal_bg.jpg); */
background-color: #f0f0f0;
/* background-image: url(pieces/images/woodgrain3.jpg);
background-color: #eeaa22; */
/* min-width: 1020px; */
min-width: 1024px;
}


#maincontent {
position: static;
float: left;
padding: 0px 10px 20px 10px; /* top right bottom left */
margin-top: 0px;
/* margin-left: 200px; */
/* margin-right: 200px; */
border: 1px solid #cccccc;
/* background-color: #f0f0f0; */
background-color: #f9f9f9;
width: 100%;
min-width: 590px;

}

#maincontent h1 {
	margin-left: 3em;
}


.project img {
 /* this is the cut in the matte, or inner frame depth if not using a matte */
  border:solid 3px;
  border-bottom-color:#fff;
  border-left-color:#eee;
  border-right-color:#eee;
  border-top-color:#ccc;
  max-height:100%;
  max-width:100%;
}

.project {
	display: inline-block;
	max-width:100%
	text-align:left;
	vertical-align: top;
	margin: 15px;
	/* border: 3px solid black; */
}

.project .wrapper {
	display: table;
	width:fit-content;
	font: inherit;
}

.project img {
}

.project .ptitle {
	display: table-caption;
	caption-side: bottom;
	text-align:center;
	font-size: large;
	font-weight: bold; /* maybe not though */
	margin: 10px;
}

.project .details {
	display: table-caption;
	caption-side: bottom;
	font: inherit;
	/* font-family: Arial; */
}

/* thanks to Chris Smith for the basis for this */
.pictureframe {
  display:block;
  font-size: 0px ; /* font size and white space tags are to eliminate the gap between the picture and the frame */
  white-space: nowrap; 
  background-color:#ddc;
  border:solid 20px #eee;  /* overall thickness of the frame */
  border-bottom-color:#fff;  /* making the bottom brighter and the top darker adds to the 3d effect */
  border-left-color:#eee;
  border-radius:2px;  /* rounds the corners just a little */
  border-right-color:#eee;
  border-top-color:#ddd;
  box-shadow:0 0 5px 0 rgba(0,0,0,.25) inset, 0 4px 8px 4px rgba(0,0,0,.25); /* shadow makes it pop from the page, or it looks inset */
  box-sizing:border-box;
  display:inline-block;
  /* margin:10vh 10vw; */
  /* height:80vh; */
  padding:0px;   /* this is the matte size, and I don't want a matte at all */
  position:relative;  /* this is needed for the cool extra before/after border to overlay properly */
  /* text-align:center; */
}
/* before and after draw the cool extra border in the middle of the frame that makes it look fancy */
.pictureframe:before {
    border-radius:2px;
    bottom:-8px;
    left:-8px;
    right:-8px;
    top:-8px;
    box-shadow:0 2px 5px 0 rgba(0,0,0,.25) inset;
    content:"";
    position:absolute;
  }
.pictureframe:after {
    border-radius:2px;
    bottom:-11px;
    left:-11px;
    right:-11px;
    top:-11px;
    box-shadow: 0 2px 5px 0 rgba(0,0,0,.25);
    content:"";
    position:absolute;
  }


.pictureframe a {
  /* have to push links to the front or they get covered up by the fancy picture frame stuff and don't work */
  position:relative;
  z-index:999;
}

  
.talk .event {
	display:block;
	font-size: large;
	font-weight: bold;
}

.talk .talktitle {
	display:block;
	font-size: large;
	font-style: italic;
}

.talk .talkdetails {
	display:block;
	padding-left: 20px;
}

.talk .testimonial {
	font-style:italic;
	display:block;
	padding-left: 20px;
	padding-top: 10px;
	padding-bottom: 10px;
}

  
.award .awardtitle {
	font-size: large;
	font-weight: bold;
}

.award .awardsource {
	font-size: large;
	font-style: italic;
}

.awardsource::before {
	content: " - ";
}

.award .awarddetails {
	display:block;
	padding-left: 20px;
	margin-top:0px;
}

.awarddetails .awardtitle {
	font-weight:normal;
}

a:link {
 color: #aa6644;
}
a:visited {
 color: #223322;
}


.ifnocss {
  display: none;
}

.details {
  font-size: smaller;
  margin-left: 1em;
}



/* Header = "banner" */

#banner {
 margin-left:10px;
 margin-right:10px;
 background-color: #f0f0f0;
 position: static;
 min-width: 1024px;
 font-family: Arial, sans-serif;
 font-size: medium;
 font-weight: bold;
 color: #555500;
}

.myname {
  font-family: Arial, sans-serif;
  font-size: large;
  font-weight: bold;
  padding-left: 5px;
  padding-right: 5px;
}

.topmenuitem {
  font-family: Arial, sans-serif;
  font-size: medium;
  font-weight: bold;
  border-left: 1px solid #655010;
  border-right: 1px solid #655010;
  padding-left: 5px;
  padding-right: 5px;

/*  padding-top:5px;
  background-image: url(pieces/images/typewriterbutton100px.png); */
}

.topmenuitem a:link {
  color: #655010;
  text-decoration: none;
  font-weight: bold;
}

.topmenuitem a:visited {
  color: #655010;
  text-decoration: none;
  font-weight: bold;
}

.topmenuitem a:hover {
  color: #958010;
  text-decoration: underline overline;
  font-weight: bold;
}

.topmenuitem a:focus {
  /* color: #958010;
  text-decoration: underline overline;
  font-weight: bold; */
}

.topmenuitem a:active {
  color: #655010;
  text-decoration: none;
  font-weight: bold;
}


.unfinished {
    opacity: 0.3; /* Real browsers */
    filter: alpha(opacity = 30); /* MSIE */
}


.submenuitem a:link {
  color: #655010;
  text-decoration: none;
  font-weight: bold;
}

.submenuitem a:visited {
  color: #655010;
  text-decoration: none;
  font-weight: bold;
}

.submenuitem a:hover {
  color: #958010;
  text-decoration: underline overline;
  font-weight: bold;
}

.submenuitem a:active {
  color: #655010;
  text-decoration: none;
  font-weight: bold;
}

#banner .slogan {
  text-align: center;
  /* background-color: #ffddcc; */
}

#banner .newsflash {
  /* width: 100px; */

  /* background-color: #ddffcc; */
  /* border: 1px solid #dddddd; */

  border: 2px inset #f5f5f5;

  max-width: 175px;
  padding: 5px;
}

/* footer */
/* minimalist, put the contact link here, copyright info, etc, small text */

#footer {
  clear: both;
  background-color: #f0f0f0;
  margin-left:10px;
  margin-right:10px;

  font-size: small;
  color: #888888;
}

#footer a {
   color: #888888;
}