customize survey progress bar css - Fluidsurvey - css

Question

I am trying to customize a survey we created through Fluidsurvey. The CSS section has the ff code for all pages, which shows the progress bar at the top right portion of the page. However we would like to move it at the bottom of each page:
html, body {
background-color: #fff;
margin:10px 0 0 0;
font-family: "Lucida Grande", Tahoma, Verdana, Arial, sans-serif;
font-size: 12px;
}
#survey .survey-progress-outer {
display: block;
border: 1px solid #999;
width: 150px;
height: 15px !important;
background-color: #fff;
font-size: 75%;
margin-top: 6px;
margin-right: 15px;
overflow: hidden;
line-height: 18px;
color: #000;
}
#survey .header-progress-container{
position: relative;
}
#survey .survey-progress-inner {
background-color: #ABDCED;
}
#survey, #890 {
width: 800px;
margin: 0 auto;
}
#footer {
text-align: right;
}
#survey {
border: 1px solid #333333;
}
#survey .header-progress-container {
background-color: #3B5998;
color: #fff;
padding: 5px;
}
#survey-form {
padding: 20px;
}
#survey .question-body {
padding: 5px;
background-color: #EDEFF4;
margin: 5px 0;
}
#survey .buttons input {
background-color: #5B74A8;
border: 1px solid #333;
color: #fff;
padding: 2px 5px;
font-weight: bold;
}
I tried inserting the following in the .survey-progress-outer section:
position: relative;
bottom: 0%;
right: 0%;
but did not produce the desired effect. Kindly help. Thanks.

Answer 1

To achieve re-locating the progress bar to another location in the survey, a custom javascript must be used (possible through a FluidSurveys JavaScript advanced question, or by pasting script html into a question description or something).
You'll want to remove the existing progress bar element and move it to the bottom of the #survey element, but retaining the same structure for CSS purposes means having to create a second .survey-header element to contain your relocated progress bar. This is to ensure existing CSS and JavaScript can still find the progress bar.
var p = $('.survey-progress-outer').detach();
$('<div class="survey-header"/>').append(p).appendTo('#survey');