/*****************************************************************************
/* img_test.css
/*
/* stylesheet to support img upload/manipulation test page
/*
/* Revised 8/21/2015, L.Pritchett, Cliffson Solutions, LLC
/*****************************************************************************/

/*===========================================================================*/
/* global settings
/*===========================================================================*/

html
{
  /* Always show Safari scrollbar */

  margin-bottom: 1px;
  height: auto;
}


body
{
  font-family: Arial, sans-serif;
  font-size: 12px;
  line-height: 1.7em;
  text-align: left;
  color: #222222;
}


/*===========================================================================*/
/* page elements
/*===========================================================================*/

.box_img_group
{
  margin-top: 20px;
}


.box_img_group .box_ctls
{
  width: 500px;
  display: inline-block; 
  text-align: left;
}


.box_img_group .box_img_large
{
  position: relative;
  display: inline-block;
  width: 480px;
  height: 480px;
  vertical-align: middle;
  background-color: #eeeeee;
  border: 1px solid blue;
}


.box_img_group .box_img_large .frame_img
{
  margin: -8px 0px 0px -8px;
  width: 500px;
  height: 500px;
  border: none;
}


.box_img_group .box_img_large .box_msg
{
  margin-top: -492px;
  opacity:0.5;
}


.box_img_group .box_img_small
{
  position: relative;
  display: inline-block;
  width: 140px;
  height: 140px;
  vertical-align: middle;
  background-color: #eeeeee;
  border: 1px solid blue;
}


.box_img_group .box_img_small .frame_img
{
  margin: -8px 0px 0px -8px;
  width: 160px;
  height: 160px;
  border: none;
}


.box_img_group .box_img_small .box_msg
{
  margin-top: -152px;
  opacity: 0.5;
}


.box_img_group .box_ctls input.read_only
{
  margin-right: 5px;
  width: 30px;
  text-align: center;
}


.box_img_group .box_ctls input.read_only:disabled
{
  color: #555555;
}


/*===========================================================================*/
/* iFrame styles; these are defined within their own context, as iframes 
/*   contents have their own internal environment and don't cascade styles 
/*   from the iframe's parent objects
/*===========================================================================*/

.box_spinner
{
  margin: 0px;
  padding: 40px 0px 0px 0px;
  text-align: center;
}


.box_img_review
{
  margin: 0px;
  padding: 0px;
}


/*===========================================================================*/
/* jQuery slider styles
/*===========================================================================*/

.box_img_group .box_ctls .ui-widget 
{
  /* general settings for jQuery UI widgets */

display: inline-block;
  color: #222222;
  font-family: Verdana,Arial,sans-serif;
  font-size: 1.1em;
  background-color: #e6fcff;
  border: 1px solid #aaaaaa;
}


.box_img_group .box_ctls .ui-state-focus
{
  outline: none;
}


.box_img_group .box_ctls .ui-slider 
{
  /* define slider track */

margin-top: 10px;
  position: relative;
  height: 0.8em;
width: 150px;
  text-align: left;
  border-radius: 4px;
}


.box_img_group .box_ctls .ui-slider .ui-slider-handle 
{
  top: -0.3em;
  margin-left: -0.6em;
  cursor: default;
  height: 1.2em;
  position: absolute;
  width: 1.2em;
background-color: #6cc0db;
border: 1px solid black;
  border-radius: 4px;
  z-index: 2;
}


.box_img_group .box_ctls .ui-slider .ui-slider-handle:hover
{
  background-color: #d86ca4;
}