/*reformed app main stylesheet*/
body {
    font: 12px/1.5 Helvetica, Arial, sans-serif;
    background: url(../images/body-bg.jpg) #fff;
}

p {
    margin-bottom:15px;
}

dl dt p, dl dd p {margin-bottom: 0;}

#main_container {
    height: 620px;
    background: #F1ECB8;
    /*margin: 5px auto;*/
    overflow:hidden;
    -moz-box-shadow: 0px 7px 15px #000;
    -webkit-box-shadow:  0px 5px 15px #000;
    box-shadow:  0px 7px 15px #000;
    behavior: url(css/PIE.htc);
}

/* pages */

#home_top {
    height: 275px;
    background: url(../images/reformed-bg.png) no-repeat #f88017;
    border-bottom: 1px solid #F5DEB3;
    overflow: hidden;
    width: 960px;
}

#home_bottom {
    height: 330px;
    background: #1A092B;
    overflow: hidden;
    width: 960px;
}

#intro {
    padding: 30px 0 0 30px;
}

#intro p {
    font-weight: bold;
    font-size: 1.6em;
    color: darkRed;
    text-shadow: 0 1px 0 #FBCFA7;
}

a#view_saved_forms, a#view_saved_forms:visited {
    display: block;
    border-radius: 25px;
    -moz-border-radius: 25px;
    -webkit-border-radius: 25px;
    margin:8px 0 10px 125px;
    width: 332px;
    height: 308px;
    background: url(../images/view-edit-link.png) no-repeat transparent;
}

a#create_new_form, a#create_new_form:visited {
    display:block;
    border-radius: 25px;
    -moz-border-radius: 25px;
    -webkit-border-radius: 25px;
    margin:8px 125px 10px 0;
    width: 332px;
    height: 308px;
    background: url(../images/create-link.png) no-repeat transparent;
}

a#view_saved_forms:hover { background: url(../images/view-edit-link.png) no-repeat #4D1B7F; }
a#create_new_form:hover { background: url(../images/create-link.png) no-repeat #4D1B7F; }

.hidden {
    display:none;
}

#header {
    background: url("../images/reformed-bg.png") no-repeat 0 -198px #FBC293;
    height: 75px;
    border-bottom: 2px solid wheat;
}

#logo h1, #logo_small h1 {
    color:#e66f07;
    font-family: tahoma, helvetica, arial, sans-serif ;
    text-shadow:1px 1px 1px #FBCFA7;
}

#logo h1 { font-size: 8em; margin-top: 105px; }
#logo h1 span {font-size:1.4em;}

#logo_small h1 { font-size: 4em; margin: -10px 10px;}
#logo_small h1 span {font-size: 1.4em;}

#sidebar, .sidebar {
    overflow:auto;
    height:510px;
}

#sidebar h3, .sidebar h3, #saved_forms_header {
    text-align: center;
    font-size: 1.5em;
    color: #771600;
    text-shadow: 0px 1px 0 #ffffbb;
    background: wheat;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    padding:3px;
    margin: 4px auto;
}

#sidebar h2, .sidebar h2 {
    font-size: 1.2em;
    text-align: center;
    text-shadow: 0px 1px 0px #ffffbb;
    border-bottom: 2px dotted #E66F07;
}

.instructions {
    color: #000;
    font-weight: bold;
    margin-bottom: 5px;
    text-shadow: 0 1px 0 #ffffbb;
}

#sidebar p, .sidebar p {
    margin-bottom: 0px;
}

#sidebar ul#edit_instruct {
    margin-left: 30px;
    list-style: circle outside none;
}

#sidebar ul#edit_instruct li {
    border-top: 1px solid wheat;
    border-bottom: 1px solid #ffffbb;
    padding: 4px;
}

#sidebar ul#edit_instruct li.first_li {
    border-top:0 none;
}

#sidebar ul#edit_instruct li.last_li {
    border-bottom: 0 none;
}


/* sidebar form controls */
#sidebar #sidebar_tabs {
    background: #F1ECB8;
}

#sidebar .ui-tabs .ui-tabs-panel {
    padding: 2px;
}

#sidebar .ui-tabs .ui-tabs-nav li a {
    padding: 0.3em 1em;
}

#sidebar ul.form_controls li {
    margin: 2px;
    text-align:right;
    padding:1px;
}

#sidebar ul.form_controls li p {
    font-weight: bold;
    display:inline;
}

#sidebar ul.form_controls li p a {
    display:inline-block;
    width:30px;
    height:32px;
    background: url(../images/add-form-item.png) no-repeat transparent;
    margin: 4px 4px -2px 5px;
}

#sidebar ul.form_controls li p a:hover {
    background-position: 0px -31px;
}

/* sidebar form control individual control styling */
#sidebar ul.form_controls fieldset {
    border: 1px solid #CCCCCC;
    padding: 3px;
    width: 210px;
    display:inline;
    position:relative;
    top: -8px;
    text-align:left;
    height: 20px;
}

#sidebar ul.form_controls input[type="text"], #sidebar ul.form_controls input[type="password"] ,
#sidebar ul.form_controls select {
    position: relative;
    top: -10px;
    width: 210px;
}

#sidebar ul.form_controls input[type="file"] {
    position: relative;
    top: -10px;
}

#sidebar ul.form_controls textarea {
    width:210px;
    height:25px;
}

#sidebar ul.form_controls input[type="radio"], #sidebar ul.form_controls input[type="checkbox"],
#sidebar ul.form_controls li label {
    position:relative;
    top: -10px;
}

/* main content area */
#content {
    overflow: hidden;
}

#form_editor {
}

/* form preview area */
/*#form_area form fieldset{
    border: 1px solid #000;
}*/

/* dialogs */
div.dialog form dt {
    float:left;
    clear:left;
    width: 130px;
    text-align: right;
    margin: 0 5px;
    padding: 4px 0 0;
}

div.dialog form dt label {
    font-weight: bold;
    color: #000;
    text-shadow: 0 1px 0 #ffffff;
}

div.dialog form dl {
    margin: 5px auto;
}

div.dialog form fieldset {
    border:1px solid #ccc;
    padding: 10px;
    margin: 10px;
}

div.dialog form fieldset legend {
    font-weight: bold;
    color: #0070A3;
    text-shadow: 0 1px 0 #ffffff;
    padding: 0 5px;
    font-size: 1.2em;
}

#create_select_field form div#option_list table tr td {
    padding: 3px;
}

#create_select_field form div#option_list table tr td input[type="text"] {
    width: 130px;
}
#create_select_field form div#option_list table thead tr td {
    font-weight: bold;
    text-align: center;
    font-size: .8em;
    text-shadow: 0px 1px 0 #ffffff;
}

#create_radio_field dt, #create_checkbox_field dt {
    width: 200px;
}

#create_radio_field #radio_option_list dt, #create_checkbox_field #checkbox_option_list dt {
    width: 80px;
}

#create_radio_field #radio_option_list dd table tr td, #create_checkbox_field #checkbox_option_list dd table tr td  {
    padding:3px;
}

#create_radio_field #radio_option_list dd table thead tr td , #create_checkbox_field #checkbox_option_list dd table thead tr td  {
    font-size:0.8em;
    font-weight:bold;
    text-align:center;
    text-shadow:0 1px 0 #FFFFFF;
}

div.dialog div#val-tabs div table {
    width: 100%;
}

div.dialog div#val-tabs div table tr {
    border-top: 2px solid wheat;
    border-bottom: 2px solid wheat;
}

div.dialog div#val-tabs div table td {
    padding: 5px;
    vertical-align: middle;
}

div.dialog div#val-tabs div table tr td label {
    font-size: .9em;
    font-weight: bold;
    color: #000;
    text-shadow: 0 1px 0 #ffffff;
}

div.dialog div#val-tabs div table tr td label.error {
    font-size: .8em;
    font-weight: bold;
    color: red;
    text-shadow: 0 1px 0 #ffffff;
    display:block;

}

/*dialog errors*/
div.dialog label.error {
    font-weight: bold;
    color: red;
    margin-left: 10px;
}

/*#create page error formatting*/
form#form_attributes dl dd.ui-state-error {
    display: block;
    padding: 3px;
    position: absolute;
    right: -5px;
    top: -5px;
    width: 150px;
}
form#form_attributes dl dd.ui-state-error span.ui-icon {
    float:left;
}

/* default form styling for app */

div.page form.pageform dt {
    float:left;
    clear:left;
    width: 200px;
    text-align: right;
    margin: 0 5px;
    padding: 4px 0 0;
}

div.page form.pageform dd {
    float:left;
    margin: 10px;
}

div.page form.pageform dt label {
    font-weight: bold;
    color: #000;
    text-shadow: 0 1px 0 #ffffff;
}

div.page form.pageform dl {
    /*margin: 15px auto;*/
    padding: 5px;
    margin: 2px;
    position: relative;
}

div.page form.pageform fieldset {
    border:1px solid #ccc;
    padding: 10px;
    margin: 10px;
}

div.page form.pageform fieldset legend {
    font-weight: bold;
    color: #0070A3;
    text-shadow: 0 1px 0 #ffffff;
    padding: 0 5px;
    font-size: 1.2em;
}

#create_main dl dt label {
    margin-left: 30px;
}

div.instruction_block {
    position:relative;
    padding: 5px;
    margin: 0 auto;
    border-top: 1px solid #ffffbb;
    border-bottom: 1px solid wheat;
}

.first_div {
    border-top: 0 none !important;
}

.last_div {
    border-bottom: 0 none !important;
}


.large_num {
    color: #E66F07;
    display: block;
    font-size: 3em;
    font-weight: bold;
    left: 15px;
    position: absolute;
    text-shadow: 0 1px 0 #fff;
    top: 0;
}

div.large_num_div {
    color: #E66F07;
    display: block;
    float:left;
    font-size: 3em;
    font-weight: bold;
    text-shadow: 0 1px 0 #fff;
    margin: 5px;
}

.odd {
    background: #dff0ff;
}

.even {
    background: #ffd;
}

div.page form.pageform input[type="text"], div.page form.pageform input[type="password"], div.page form.pageform textarea {
    -moz-border-radius:4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    background:none repeat scroll 0 50% #FFFFFF;
    border:2px solid wheat;
    font-family:monospace;
    padding:3px;
    min-width:200px;
}

/* main form area form styles */
div#form_area {
    border: 3px solid wheat;
    background: #fff;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    padding: 5px;
    height: 440px;
    overflow:auto;
}

/*div#form_area label{
    font-weight:bold;
    color:#000;
    text-shadow: 0 1px 0 #e8e8e8;
}*/

/*div#form_area form dl dt {
    width: 165px;
}
*/
/* button styles */
.ui-button {
    margin: 4px;
}

/*form results, fieldset_error styling */
#form_results h3, #fieldset_error h3, #delete_confirmation {font-size: 1.5em; text-align:center;}
#form_results p, #fieldset_error p, #delete_confirmation {font-weight:bold; text-align:center;}
.note { font-weight:bold; font-size: .9em; background: #ffa; padding: 4px; text-align: center;}
#form_results table { width: 100%; }
#form_results table thead { font-weight: bold; text-align: center;}
#form_results table tr { border-top:2px solid wheat; border-bottom: 2px solid wheat;}
#form_results table tr td {padding: 4px; width:50%;}
#form_results table tr td.left_border {border-left: 1px solid wheat;}

/* fieldset link slide-down dialog */
#fieldset_controls {
    margin: 0 5px 5px;
    display:none;
    text-align: center;
    background: #ffa;
    border-radius: 0 0 10px 10px;
    -moz-border-radius: 0 0 10px 10px;
    -webkti-border-radius: 0 0 10px 10px;
    border: 1px solid wheat;
    border-top: 0 none;
}

/* selectable styles */
#form_area .ui-selectee {background: #ffa; border-bottom:1px solid wheat; border-top:1px solid wheat;}
#form_area .ui-selecting { background: #FECA40; }
#form_area .ui-selected { background: #E66F07; color: white; }
/*#form_area dl.ui-selected dt label {color:white; text-shadow: 0 1px 0 #000;}*/

/* form edit hover styles */
.editable_element {
    /*background: #F4F8FD;*/
    border:1px solid #D2DBF4;
    position: relative;
    margin: 4px auto;
    min-height: 32px;
}

/* form edit buttons */
.dl_form_edit_button_container {
    width: 100px;
    height: 32px;
    overflow:hidden;
    position:absolute;
    top: 2px;
    left: 0px;
}

.fieldset_form_edit_button_container {
    width: 100px;
    height: 32px;
    overflow:hidden;
    position:absolute;
    top: -36px;
    right: 5px;    
}

a.delete_element {
    width: 32px;
    height: 32px;
    display:block;
    float:left;
    overflow:hidden;
    background: url(../images/form-edit-sprite.png) no-repeat transparent;
    background-position: -2px 0;
    margin: 0 2px;
}

span.dummy_delete_button {
    width: 32px;
    height: 32px;
    margin:0 2px;
    overflow:hidden;
    background: url(../images/form-edit-sprite.png) no-repeat transparent;
    background-position: -2px -32px;
    display:inline-block;
}

a.delete_element:hover {
    background-position: -2px -32px;
}

a.edit_element {
    width: 32px;
    height: 32px;
    display:block;
    float:left;
    overflow:hidden;
    background: url(../images/form-edit-sprite.png) no-repeat transparent;
    background-position: -42px 0px;
    margin: 0 2px;
}

a.edit_element:hover {
    background-position: -42px -32px;
}

div.move_element_lit {
    width: 16px;
    height: 32px;
    display:block;
    float:left;
    overflow:hidden;
    background: url(../images/form-edit-sprite.png) no-repeat transparent;
    background-position: -83px -32px;
    margin: 0 2px;
}

a#edit_form_html {
    width: 130px;
    height: 130px;
    display: block;
    overflow: hidden;
    background: url(../images/edit-html-button.png) no-repeat transparent;
    margin: 4px auto;
}

a#edit_form_html:hover {
    background-position: 0 -131px;
}

#preview_area_heading {
    font-weight:bold;
    font-size: 1.1em;
    margin: 0 auto 0 150px;
    text-align:center;
    width: 300px;
    text-shadow: 0 1px 0 #FFFFBB;
    display: inline-block;
}

/* crosshair for selectable form items during edit */
#form_area form .editable_element:hover {
    cursor: move;
}

.placeholder {
    height: 30px;
    background: #ffa;
    border-top: 1px solid wheat;
    border-bottom: 1px solid wheat;
}

/* form theme switcher styling */
#theme_switcher_dialog {
    display:inline-block;
}

/* saved forms table */
div#forms_list {
    border: 3px solid wheat;
    background: #fff;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    padding: 5px;
    height: 446px;
    overflow:auto;
}

table#saved_forms_table {
    width: 100% !important; /*have to set important because datatable is messing up style on reload */
    clear:left;
}

table#saved_forms_table thead th {
    cursor: pointer;
    border: 1px solid wheat;
    background-color: #ffa;
}

table#saved_forms_table td {
    border:1px solid wheat;
    padding:3px 4px 0 4px;
}

div#saved_forms_table_filter {
    font-weight: bold;
}

div#saved_forms_table_filter input[type="text"] {
    -moz-border-radius:4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    background:none repeat scroll 0 50% #FFFFFF;
    border:2px solid wheat;
    font-family:monospace;
    padding:3px;
    min-width:200px;
    margin-bottom: 3px;
}

table#saved_forms_table td {
    vertical-align: middle;
}

table#saved_forms_table tr td.center {
    text-align:center;
}

table#saved_forms_table tr td a.tablelink {
    font-weight: bold;
}

table#saved_forms_table tr td a.tablelink:hover {
    text-decoration: none;
}

/* get code dialog */
textarea#get_code_textarea {
    width: 570px;
    height: 270px;
}

#get_code_instructions ol {
    margin: 5px 0 5px 30px;
    list-style: outside decimal;
}

/*footer*/
#footer {
    color: white;
    background: #1A092B;
    padding: 0px 25px;
    font-weight:bold;
    font-size: .8em;
    position: absolute;
    bottom: 0px;
}

#footer p {
    margin-bottom: 0px;
}

#footer a {
    color:white;
    text-decoration:none;
}

#footer a:hover {
    text-decoration: underline;
}

/* top menu */
#top_menu {
    height: 70px;
    padding-top: 10px;
    overflow: hidden;
}

#top_menu a {
    display: block;
    float:left;
    width: 126px;
    height: 65px;
    background: url(../images/menu-sprite.png) no-repeat transparent;
}

#top_menu a.menu_home { background-position: 0 -70px; }
#top_menu a.menu_create { background-position: -126px -70px; margin-left: -22px; }
#top_menu a.menu_editor { background-position: -252px -70px; margin-left: -22px; }
#top_menu a.menu_help { background-position: -378px -70px; margin-left: -22px; }

#top_menu a.menu_home:hover, #top_menu a.menu_home.active { background-position: 0 0;}
#top_menu a.menu_create:hover, #top_menu a.menu_create.active { background-position: -126px 0;}
#top_menu a.menu_editor:hover, #top_menu a.menu_editor.active { background-position: -252px 0;}
#top_menu a.menu_help:hover, #top_menu a.menu_help.active { background-position: -378px 0;}

/* corner banner */
#themeroller-banner {
    position: absolute;
    top: 0px;
    right: -5px;
}

/* themeswitcher ul */
#themeGallery ul {
    height: 440px !important;
}