/* This CSS file is used for viewing or editing
   a response through FormGenerator or for
   previewing a form through FormBuilder */

#response-wrapper {padding: 20px;} /* Outermost shell of responses */

#response-table {}
.col1 {width: auto;} /* main response area */
.col2 {width: 150px;} /* lists of steps in the form */
#response-table td {vertical-align: top;}

#response {}
#response-table-inner {width: 100%; margin-top: 20px;}

#response-table-inner h2 {
  border-bottom: solid 1px #ddd;
}

/* hover styles */
#response-table-inner tr:hover { background-color: #f4f4f4;}
#response-table-inner tr tr:hover { background-color: inherit;}
#response-table-inner tr:hover .list-holder, #response-table-inner tr:hover .readonly { border: solid 1px #f4f4f4;}
#response-table-inner tr:hover .RadGrid_response-grid .readonly { border: solid 1px #fff;}

#response ul {margin: 0; padding: 0;}
#response li {list-style: none; margin: 0; padding: 0;}
#response td {padding: 5px;}
.fieldlist td { padding: 0;}
.label {font-size: 12px; font-weight: bold;}
.question-label {width: 250px;} /* for question labels */
.question-label .label {margin-top: 4px;} /* for question labels */
.answer-label { }
.answer-label ul { overflow: auto;}
.textarea-label { padding: 5px;} /* for textarea answers */

.note {color: #666; display: block; font-size: 11px;}
.asterisk {color: #cc0000;}

.charleft {font-size: 11px; color: inherit !important;}

.readonly,
.list-holder {padding: 4px; border: solid 1px #fff;}
.GridControl .readonly {padding: 0;}

/* Sets the font for all question types */
.answer-label * { font: normal 11px arial, helvetica, sans-serif;}

/* question borders for edit mode */
.editable {
  border: solid 1px #A2B3C2;
  background-color: #fff;
  border-radius: 3px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  outline: none;
}
.horizontal .editable, .vertical .editable {border-width: 0;}

input.editable,
textarea.editable {padding: 4px;}
select.editable {padding: 2px 1px;}

/* for displaying radio buttons and checkboxes */
.horizontal {float: left; margin-right: 5px !important;}
.horizontal *, .vertical * { vertical-align: middle;}
.vertical {float: none;}

/* For FieldLists */
.fieldlist { margin: 0 !important;}
.fieldlist td { padding: 0 !important; vertical-align: middle !important;}
.fieldlist .readonly { display: inline; padding: 0 !important;}

/* For grids on the form */

#response .grid-entry {background-color: #fff; border-radius: 5px; padding: 0; border: solid 1px #E1E9F2; margin-top: 4px; width: 100%;}
#response .grid-entry .question-label { width: 150px;}
#response .grid-entry div {display: inline-block !important;}
#response .grid-entry .ibutton {margin-right: 5px;}
#response .grid-entry .grid-icon {cursor: pointer; margin: 0 4px;}
#response .Action { text-align: right;}

/* The toolbar that appears in MyRequests.aspx */
#response-edit-toolbar { }
#response-edit-toolbar #progress { margin: 0; }
#response-edit-toolbar .response-steps { margin: 0; padding: 0; }
#ResponseFooterContainer  { }

#ResponseFooterContainer .app-toolbar {
  margin: 7px 15px 0 0;
}

/* Progress Bar and Step List */
#progress { text-align: left; margin-left: 20px; }
#progress a { text-decoration: none; }
#progress div { margin-bottom: 10px; }
#progress h2 { margin-top: 0; }
#ProgressBarContainer {font-size: 11px; width: 200px; float: right; }
.ProgressCompletedDivClass { font-size: 11px; }

.progress-bar-text { font-size: 11px; }
.progress-bar-text .left { text-align: left; }
.progress-bar-text .right { text-align: right; }
.response-steps ul { margin: 0; padding: 0; }
.response-steps li { list-style: none; display: block; float: left; padding: 0 10px 0 0; font-size: 12px;}

.response-steps li a {
  line-height: 24px;
  margin-right: 8px;
}
.response-steps li, .response-steps li a, .response-steps li span {
  height: 24px;
  line-height: 24px;
}
.response-steps .selected-response-step {
  position: relative;
  border-radius: 5px;
  font-weight: bold;
  padding: 4px 0;
}
.response-steps .selected-response-step .step-name {
  padding: 4px 6px;
  font-weight: bold;
}
.step-number, .step-arrow {
  display: none;
  visibility: hidden;
}
.steps-in-this-form {
  font-weight: bold;
  font-size: 14px !important;
  color: #666;
}


/* Uploadify */

.uploadifyQueueItem {background-color: #F5F5F5; border: 2px solid #E5E5E5; font: 11px Verdana, Geneva, sans-serif; margin-top: 5px; padding: 10px; width: 350px;}
.uploadifyError {background-color: #FDE5DD !important; border: 2px solid #FBCBBC !important;}
.uploadifyQueueItem .cancel {float: right;}
.uploadifyQueue .completed {background-color: #E5E5E5;}
.uploadifyProgress {background-color: #E5E5E5; margin-top: 10px; width: 100%;}
.uploadifyProgressBar {background-color: #0099FF; height: 3px; width: 1px;}

/* Uploadify image and file thumbnails */
.upload-file-table {
  width: 100%; /* Sets the width of the parent table */
}
#response td .upload-button {
  padding: 0;
 }
.upload-file-container li {
  width: auto;
}
#response td .file-image-list {
  padding-left: 0;
}

.upload-file-container .xls, .upload-file-container .xlsx, .upload-file-container .pdf, .upload-file-container .doc, .upload-file-container .docx, .upload-file-container .ptp, .upload-file-container .pptx, .upload-file-container .txt, .upload-file-container .csv, .upload-file-container .eps {
   background-image: url(../../images/icons/filetypes.png);
   background-repeat: no-repeat;
   height: 40px;
}
.upload-file-container .csv /* for Comma Delimited documents */ {
  background-position: 0 0;
}
.upload-file-container .xls, .upload-file-container .xlsx /* for Excel documents */ {
  background-position: 0 -40px;
}
.upload-file-container .doc, .upload-file-container .docx /* for Word documents */  {
  background-position: 0 -80px;
}
.upload-file-container .pdf /* for PDF documents */ {
  background-position: 0 -120px;
}
.upload-file-container .txt /* for text documents */{
  background-position: 0 -200px;
}
.upload-file-container .ppt, .upload-file-container .pptx /* for PowerPoint documents*/ {
  background-position: 0 -160px;
}
.upload-file-container .eps /* for text documents */{
  background-position: 0 -240px;
}

#response .answer-label .upload-file-container a {
  margin-left: 35px;
  display: inline-block;
  height: 35px;
  line-height: 35px !important;
  text-decoration: none;
}
#response .answer-label .upload-file-container a:hover {
  text-decoration: underline;
}
.upload-file-container li, .upload-file-container li a {
  vertical-align: middle;
}

.upload-file-container li * { vertical-align: middle;}
.upload-image-container li, .upload-image-container img {height: 100px; overflow: hidden;}
.upload-file-container .upload-delete { background: url(../../images/uploadify/cancel.png) no-repeat; height: 16px !important; width: 16px !important; margin-left: 5px; cursor: pointer; }
.upload-file-container .upload-link { padding: 0 !important; border: 0; text-decoration: underline; font-size: 20px; }

.upload-image-container li a {}
.upload-image-container li {float: left; margin: 0 3px 3px 0 !important; position: relative; border: 1px solid #D5E3F4; }
.upload-image-container .upload-delete { background: url(../../images/uploadify/cancel.png) no-repeat; height: 16px !important; width: 16px !important; position: absolute; right: 0; cursor: pointer; }
.upload-image-container .upload-link { padding: 0 !important; border: 0; text-decoration: underline; font-size: 20px; }

.ContainsImagePath {text-align: right; vertical-align: bottom;}
.upload-link { display: none; visibility: hidden;}

/* Validation and Errors */

#ValidationErrorMessage {margin-top: 10px;}

#ValidationErrorMessage, .ValidationErrorMessage {
  border: solid 1px #ecd86f;
  background: url(../../images/validation-bkgd.jpg) repeat-x;
  width: 100%;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  margin: 10px 0 20px 0;
  padding: 4px 0;
}

.ValidationErrorMessage {padding: 5px;}
#ValidationErrorMessage IMG, .ValidationErrorMessage IMG {margin-left: 8px; margin-right: 8px; vertical-align: middle;}
#ValidationErrorMessage SPAN, .ValidationErrorMessage {font-size: 11px;}

label.error {
  color: #cc0000;
  font-size: 11px;
  font-weight: normal;
  display: block;
}