@charset "utf-8";
/* CSS Document */

.container input.invalid, textarea.invalid, select.invalid
{
    background-color: #ffdddd;
}






body{font-family: 
	Gotham, Arial, "Helvetica Neue", Helvetica,"sans-serif"
}

/* Style inputs, select elements and textareas */
.container input[type=text], select, textarea{
  width: 100%;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  resize: vertical;     	
}


input[type=email]{
  width: 100%;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  resize: vertical;      	
}
input[type=date]{
  width: 100%;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  resize: vertical;      	
}




input[type=password]{
  width: 100%;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  resize: vertical;    
  	
}



input[type=file]{
  width: 100%;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  resize: vertical;    
	
}


/* Style the label to display next to the inputs */
label {
  padding: 8px 8px 8px 0;
  display: inline-block;
  vertical-align: right;  
}

.status_red{
	
  color: orangered;
  padding: 8px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  float: right;
}

/* Style the submit button */
input[type=submit] {
 
  color: white;
  padding: 8px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  float: right;
}

.my-button{
  background-color: #4CAF50;
  color: white;
  padding: 8px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  float: right;
}

.my-button-left{
  background-color: #4CAF50;
  color: white;
  padding: 8px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  float: left;
}

.my-button-delete{
  background-color: orangered;
  color: white;
  padding: 8px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  float: left;
}

.my-login{
  background-color: #999;
  color: white;
  padding: 8px 20px;
  border: none;
  border-radius: 0px;  
  float: right;
}


/* Style the buttons in jquery dialog to stack vertically */
.leftButton
{
    position: absolute;
    left:8px;
}



/* Style the container */
.container {
  border-radius: 5px;
  background-color: #f2f2f2;
  padding: 20px;
}

/* Floating column for labels: 10% width */
.col-1 {
  float: left;
  width: 1%;
  margin-top: 6px;
  text-align: right;
}



/* Floating column for labels: 10% width */
.col-5 {
  float: left;
  width: 5%;
  margin-top: 6px;
  text-align: right;
}


/* Floating column for labels: 5% width */
.col-5v {
  float: left;
  width: 5%;
  margin-top: 14px;
  text-align: left;
}

/* Floating column for labels: 10% width */
.col-10 {
  float: left;
  width: 10%;
  margin-top: 6px;
  text-align: right;
}


/* Floating column for labels: 15% width */
.col-15 {
  float: left;
  width: 15%;
  margin-top: 6px;
  text-align: right;
}

/* Floating column for labels: 15% width */
.col-15L{
  float: left;
  width: 15%;
  margin-top: 6px;
  text-align: left;
}


/* Floating column for labels: 15% width */
.col-20 {
  float: left;
  width: 20%;
  margin-top: 6px;
  text-align: right;
}

/* Floating column for labels: 25% width */
.col-25 {
  float: left;
  width: 50%;
  margin-top: 6px;
  text-align: right;
}



/* Floating column for inputs: 10% width added by Malcolm but will not display correctly */
.col-30 {
  float: left;
  width: 30%;
  margin-top: 6px;
}

/* Floating column for inputs: 10% width added by Malcolm but will not display correctly */
.col-35 {
  float: left;
  width: 35%;
  margin-top: 6px;
}

/* Floating column for inputs: 40% width added by Malcolm but will not display correctly */
.col-40 {
  float: left;
  width: 40%;
  margin-top: 6px;
}

/* Floating column for inputs: 65% width added by Malcolm but will not display correctly */
.col-50 {
  float: left;
  width: 50%;
  margin-top: 6px;
}

/* Floating column for inputs: 65% width added by Malcolm but will not display correctly */
.col-55 {
  float: left;
  width: 55%;
  margin-top: 6px;
}

/* Floating column for inputs: 65% width added by Malcolm but will not display correctly */
.col-60 {
  float: left;
  width: 60%;
  margin-top: 6px;
}


/* Floating column for inputs: 65% width added by Malcolm but will not display correctly */
.col-65 {
  float: left;
  width: 65%;
  margin-top: 6px;
}

/* Floating column for inputs: 75% width */
.col-70 {
  float: left;
  width: 70%;
  margin-top: 6px;
}


/* Floating column for inputs: 75% width */
.col-75 {
  float: left;
  width: 75%;
  margin-top: 6px;
}


/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Responsive layout - when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .col-10, .col-25, .col-75, input[type=submit] {
    width: 100%;
    margin-top: 0;
  }
}


/* CSS for camera */
#newImages {
    height : 300px;
    position : relative;
    max-width : 100%;
}
img.masked {
    position : absolute;
    background-color : #fff;
    border : 1px solid #babbbd;
    padding :10px;
    box-shadow :1px 1px 1px #babbbd;
    margin : 10px auto 0;
}
#player {
    width : 320px;
    height : 240px;
    margin :10px auto;
}
canvas{
    width : 320px;
    height : 240px;
    margin : 10px auto;
}
#capture-btn{
    width : 130px;
    margin : 0 auto;
}
#pick-image{
    display : none;
}

.mfslButton {
	-moz-box-shadow: 0px 1px 0px 0px #fff6af;
	-webkit-box-shadow: 0px 1px 0px 0px #fff6af;
	box-shadow: 0px 1px 0px 0px #fff6af;
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ffec64), color-stop(1, #ffab23));
	background:-moz-linear-gradient(top, #ffec64 5%, #ffab23 100%);
	background:-webkit-linear-gradient(top, #ffec64 5%, #ffab23 100%);
	background:-o-linear-gradient(top, #ffec64 5%, #ffab23 100%);
	background:-ms-linear-gradient(top, #ffec64 5%, #ffab23 100%);
	background:linear-gradient(to bottom, #ffec64 5%, #ffab23 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffec64', endColorstr='#ffab23',GradientType=0);
	background-color:#ffec64;
	-moz-border-radius:6px;
	-webkit-border-radius:6px;
	border-radius:6px;
	border:1px solid #ffaa22;
	
	cursor:pointer;
	color:#333333;
	font-family:Arial;
	font-size:18px;
	padding:6px 24px;
	text-decoration:none;
	text-shadow:0px 1px 0px #ffee66;
	
}
.mfslButton:hover {
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ffab23), color-stop(1, #ffec64));
	background:-moz-linear-gradient(top, #ffab23 5%, #ffec64 100%);
	background:-webkit-linear-gradient(top, #ffab23 5%, #ffec64 100%);
	background:-o-linear-gradient(top, #ffab23 5%, #ffec64 100%);
	background:-ms-linear-gradient(top, #ffab23 5%, #ffec64 100%);
	background:linear-gradient(to bottom, #ffab23 5%, #ffec64 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffab23', endColorstr='#ffec64',GradientType=0);
	background-color:#ffab23;
}
.mfslButton:active {
	position:relative;
	top:1px;
}

.width-400px{
    width: 400px;
    display: inline-block;
}
.wrapper {
    text-align: center;
}