/* Custom bootstrap css
--------------------------------------------------
MID GREY    #999999
LIGHT GREY  #E6E6E6
DARK GREEN  #4f959b
MID GREEN   #1E825E
LIGHT GREEN #2EC88B
LIGHT BLUE  #38C0CB
RED         #C8374E
ORANGE      #CB4938
 */

@import url(https://fonts.googleapis.com/css?family=Open+Sans);
/* open-sans-regular - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/open-sans-v13-latin-regular.eot'); /* IE9 Compat Modes */
  src: local('Open Sans'), local('OpenSans'),
       url('../fonts/open-sans-v13-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/open-sans-v13-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/open-sans-v13-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/open-sans-v13-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/open-sans-v13-latin-regular.svg#OpenSans') format('svg'); /* Legacy iOS */
}


html {
  position: relative;
  min-height: 100%;
}

body {
  font-family: 'Open Sans', sans-serif;
  margin-bottom: 30px;
}

header {
  background-color: #9A12B3;
  border-bottom: 1px solid #DDD;
  color: #FFF;
}

.btn, .btn-lg{
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  background-color: #663399;
  background: #663399;
  border: 1px solid #663399;
  color: #fff;
  font-family: 'Open Sans', sans-serif;
  font-family: Arial;
  text-decoration: none;
  transition: all .3s ease 0s;
}

.btn:hover, .btn:active, .btn:focus, .btn-lg:hover, .btn-lg:active, .btn-lg:focus {
  text-decoration: none;
  color: #663399;
  background: #fff;
}

footer {
  background-color: #fdfdfd;
  bottom: 0;
  font-family: 'Open Sans', sans-serif;
  height: 30px;
  position: absolute;
  text-align: center;
  width: 100%;
}

#infoBtn, #penToolBtn {
  float: right;
  margin-top: 10px;
  pointer-events: auto;
  position: relative;
  z-index: 1001;
}

#penToolOptions, #penToolOptions.active {
    top: 3px;
}

#penToolOptions button {
    font-size: 14px;
    padding: 5px 10px 5px 10px;
}


.modal-header {
  background: #fff;
}

.modal-header h3 {
  margin-top: 5px;
}

.instructions-modal-lg ol li {
  margin-bottom: 0.5em;
}

.modal-content {
  padding: 15px;
  border: none;
  border-radius: 0;
  box-shadow: none;
}

.activitypart {
  padding-top: 1%;
}

#activityDescription {
  border-top: 1px dotted #ccc;
  background-color: #DCC6E0;
}

#activityTitles h3, #activityTitles h4{
  text-align: center;
}

#activityFeedback {
  position: relative;
}


#penToolOptions
{
    position: absolute;
    z-index: 1001;
    top: 46px;
    right: 0;
    visibility: hidden;
    float: left;
    width: 28em;
    height: 3.5em;
    padding: .5em;
    border: 1px solid #ccc;
    background-color: #fff;
    box-shadow: 0 0 20px #ccc;
}
/*PEN TOOL*/
#content
{
    /* height: 100%; */
    position: relative;

    -webkit-user-select: none;/* Chrome all / Safari all */
       -moz-user-select: none;/* Firefox all */
        -ms-user-select: none;/* IE 10+ */
            user-select: none;
}
#penToolOptions .penActive
{
    z-index: 1000;

    visibility: visible;
}

.penColourOption
{
    width: 32px;
    height: 32px;
    padding: 0;

    border: 1px solid #fff;
    border-radius: 20px;
}

#penToolOptions button
{
    background-position: center;
    background-size: 100% 100%;
}

.penColourOption:hover
{
    transition: .2s;
    -webkit-transform: scale(1.1);
}

#penBLACK
{
    background-color: black;
}

#penRED
{
    background-color: red;
}

#penGREEN
{
    background-color: green;
}

#penBLUE
{
    background-color: blue;
}

/*CANVAS*/

#penToolCanvas
{
    position: absolute;
    z-index: 998;
    top: 0;
    left: 0;

    display: none;

    width: 100%;
    height: 100%;
    /* pointer-events: none; */
}

#tmp_canvas
{
    position: absolute;
    z-index: 999;
    top: 0;
    left: 0;

    cursor: crosshair;
    /* pointer-events: none; */
}

#dialog-delete
{
    z-index: 1001;

    display: none;
}

.prompt-modal {
  text-align: center;
}