* {
  
  box-sizing       : border-box; 
  position         : relative;
  margin           : 0px;
  padding          : 0px;
  outline          : none;   
  
}

textarea, input {
   font-family     : inherit;
   font-size       : inherit;
}

@font-face { 
  font-family      :pageStandard;
  src              :url('pageIcons02.ttf');
}

@-webkit-keyframes pulse01 {
  0%, 100% {
    -webkit-transform:rotateX(0deg) rotateY(30deg) rotateZ(0deg) scale(1);  
  }
  
  25% {
    -webkit-transform: rotateX(-30deg) rotateY(0deg) rotateZ(0deg) scale(1);  
  }

  50% {
    -webkit-transform: rotateX(0deg) rotateY(-30deg) rotateZ(0deg) scale(1);  
  }
  
  75% {
    -webkit-transform: rotateX(30deg) rotateY(0deg) rotateZ(0deg) scale(1);  
  }

}

@keyframes pulse01 {
  0%, 100% {
    transform:rotateX(0deg) rotateY(30deg) rotateZ(0deg) scale(1);
  }
  
  25% {
    transform: rotateX(-30deg) rotateY(0deg) rotateZ(0deg) scale(1);
  }

  50% {
    transform: rotateX(0deg) rotateY(-30deg) rotateZ(0deg) scale(1);
  }
  
  75% {
    transform: rotateX(30deg) rotateY(0deg) rotateZ(0deg) scale(1);
  }

}

body {
  padding          : 1em; 
  
}

.pulse {
  -webkit-animation: pulse01 1.2s infinite;
  animation        : pulse01 1.2s infinite;
}

.formWrapper {
  width            : 20em;
  box-shadow       : 0px 0px 0.2em rgba(0,0,0,0.25);  
  border-radius    : 3px 3px 3px 3px;    
  
}

.formScreen {
  
  
}

.formHead {
  background-color : #6384b3;
  height           : 2.5em;
  line-height      : 2.5;
  padding          : 0em 0.5em;
  color            : #eeeeee;
  font-weight      : bold;
  border-bottom    : 1px solid #cccccc;
  border-radius    : 3px 3px 0px 0px;  
}

.formBody {
  padding          : 0em 0em 0.5em 0em;
  background-color : #fafafa;
  
}

.formControls {
  background-color : #fafafa;
  border-top       : 1px solid #e0e0e0;
  width            : 100%;
  border-radius    : 0px 0px 3px 3px;    
  text-align       : right;
  padding          : 0.5em 0.5em;
  height           : calc(3em + 1px);
  

}

.formButton {
  background-color : #6384b3;
  color            : #eeeeee;
  border-radius    : 3px;
  display          : inline-block;
  padding          : 0.5em 1em;
  line-height      : 1;
  font-size        : 1em;
  background-image : linear-gradient(180deg, rgba(0,0,0,0.1), rgba(255,255,255,0.1));  
  box-shadow       : 1px 1px 0.1em rgba(0,0,0,0.15);
  cursor           : pointer;
  margin-left      : 0.5em;
  vertical-align   : text-top;
  
}

.formButton:active {
  margin-top       :1px; 
  
}

.formElm {
  padding          : 0.5em 0.5em 0em 0.5em;
  
}

.formElm_title {
  color            : #666666;
  font-size        : 0.8em;
  padding          : 0.25em 0em;
}

.formElm_body {
  border-radius    : 3px;
  border           : 1px solid #bbbbbb;
  background-color : #ffffff;
 
}

.formElm_body.active {
  border           : 1px solid #666666;
}

.formElm_body.file {
  padding          : 0.5em;
}

.formElm_body.input {
  
}

.formElm_body.input.active {
  border-radius    : 3px 3px 0px 0px;
}


.formElm_body_input {
  border-radius    : 3px;  
  padding          : 0.625em;
  width            : 100%;
  border           : 0px solid #bbbbbb;
  font-size        : 0.8em;
}

.formElm_body_input.select {
  width            : calc(100% - 2.5em);
  cursor           : pointer;
  height           : calc(2.5em);
  font-size        : 0.8em;

}

.formElm_image {
  width            : 3em;
  height           : 2.25em;
  border-radius    : 3px;
  display          : inline-block;
  margin-right     : 0.25em;
  font-size        : 2em;
  vertical-align   : middle;  
  text-align       : center;
  padding          : 0.625em 0em;
  
  font-family      : pageStandard;
  color            : #bbbbbb;

}

.formElm_image div {
  opacity          : 1; 
  transition       : opacity 0.4s 0s;
  
}


.formElm_image.on div {
  opacity          : 0; 
}

.formElm_image_image {
  position         : absolute;
  top              : 0em;
  left             : 0em;
  z-index          : 1;
  transition       : opacity 0.3s 0s;
  opacity          : 0;
  width            : 100%;
  height           : 100%;
  
  box-shadow       : 1px 1px 0.1em rgba(0,0,0,0.15);

  border-radius    : 3px;  
  
}

.formElm_image_image.on{
  opacity          : 1;
}





.formElm_area {
  width            : calc(100% - 6.5em);
  height           : 4.5em;
  border           : 5px dashed transparent;
  
  border-radius    : 3px;
  display          : inline-block; 

  line-height      : 1.2;
  vertical-align   : middle;
  text-align       : center;
  font-weight      : bold;
  color            : #ffffff;
  cursor           : pointer;
  padding          : calc(1.05em - 5px) 0.5em;
  
  transition       : color 0.3s 0s, border 0.3s 0s;
  
}

.formElm_areaPost {
   
  width            : calc(100% - 6.5em);
  height           : 4.5em;
  display          : inline-block;
  vertical-align   : middle;

  
}

.formElm_areaPostIn {
  height           : 1.75em;
  font-size        : 0.8em;
  
}

.formElm_areaPost_name {
  display          : inline-block;
  width            : calc(100% - 1.4em);
  white-space      : nowrap;
  overflow         : hidden;
  text-overflow    : ellipsis;
  line-height      : 1.75;
  padding          : 0em 0.25em 0em 0em;
  color            : #666666;  
  vertical-align   : middle;
  
}

.formElm_areaPost_button {
  width            : 1.4em;
  display          : inline-block;
  font-family      : pageStandard;
  color            : #999999;
  text-align       : center;
  cursor           : pointer;
  line-height      : 1.75;
  vertical-align   : middle;
  transition       : color 0.3s 0s;
}

.formElm_areaPost_button:active {
  margin-top       : 1px; 
  
}

.formElm_areaPost_button:hover {
  color            : #333333;
  
}


.formElm_areaPost_text {
  display          : block;
  width            : 100%;
  padding          : 0.35em;
  border-radius    : 3px;
  border           : 1px solid #bbbbbb;
  height           : 3.875em;
  resize           : none;
  font-size        : 0.8em;
  
}

.formElm_areaPost_text.active {
    
  border           : 1px solid #666666;

  
}

.formElm_body.file:hover .formElm_area {

  border           : 5px dashed #bbbbbb;
  color            : #bbbbbb;

}

.formElm_area.on {
  color            : #666666;

  border           : 5px dashed #666666;
  opacity          : 1;

  
}

.formElm_body_popup {
  position         : absolute;
  background-color : #ffffff;
  border           : 1px solid #666666;
  border-top       : 0px solid #666666;
  border-radius    : 0px 0px 3px 3px;
}

.formElm_body_popup_line {
  padding          : 0.2em 0.5em;
  cursor           : pointer;
}

.formElm_body_popup_line:hover {
  background-color : #6384b3;
  color            : #eeeeee;
}


.formElm_body_button {
  position         : absolute;
  top              : 0px;
  right            : 0px;
  text-align       : center;
  width            : calc(2em);
  height           : calc(100%);
  background-color : #6384b3;
  cursor           : pointer;

  font-family      : pageStandard;
  line-height      : 2.25;
  color            : #eeeeee;
  
  background-image : linear-gradient(180deg, rgba(0,0,0,0.1), rgba(255,255,255,0.1));  
  
  
  

 
}

.noSelect {
  
  -webkit-touch-callout: none;
  -webkit-user-select  : none;
  -khtml-user-select   : none;
  -moz-user-select     : none;
  -ms-user-select      : none;
  user-select          : none;   
  
  
}