/* StylesComponents.css */

/* note definition of custom elements below */

/* title block element for image sizer - adds title text at top */
title-block {
  display: block;
  padding-left: 1em;
  padding-right: 1em;
  height: 1.5em;
  line-height: 1.1em; /*vertically align text*/
  font-family: Tahoma;
  font-weight: bold;
  font-size: 1.2em;
  -webkit-user-select: none; /* Chrome all / Safari all */
  -moz-user-select: none; /* Firefox all */
  -ms-user-select: none; /* IE 10+ */
  user-select: none; /* Likely future */
}

/* sizer-button created for image sizer */
sizer-button {
  display: table-cell;
  background-color: #eeeeee;
  color: #333333;
  width: 1.5em;
  height: 0.75em;
  line-height: 0.55em; /*vertically align text*/
  text-align: center;
  vertical-align: middle;
  margin-left: 0px;
  margin-right: 10px;
  margin-bottom: 8px;
  padding:5px;
  border: 1px solid black;
  font-family: Tahoma;
  font-size: 1.0em;
  font-weight: bold;
  box-shadow: 2px 2px 2px 1px #cccccc;
}

  /* what happens when mouse hovers over sizer-button */
  sizer-button:hover {
    background-color: #dddddd;
    box-shadow: -2px -2px 2px 1px #cccccc;
    cursor: pointer;
    -webkit-user-select: none; /* Chrome all / Safari all */
    -moz-user-select: none; /* Firefox all */
    -ms-user-select: none; /* IE 10+ */
    user-select: none; /* Likely future */
  }

/* Flexbox to hold sizer buttons and title */
sizerbutton-container {
  display: flex;
}

/* wrapper for images that makes them look like a photo */
photo-box {
  display: table-cell;
  border: 1px solid black;
  background-color: white;
  padding: 0.25em;
  margin: 10px;
  box-shadow: 5px 5px 7px #cccccc;
}

/* add a border to any element */
.bordered {
  border: 1px solid black;
}

/* add drop shadow to any element */
.shadowed {
  box-shadow: 4px 4px 6px 5px #cccccc;
}

}