HQ:Forms Styling testing.css
/*
- This is the code for the general styling of the Forms
- The code is based of Kelly Drinkwater's code, which can be found here: https://igem.org/Template:JS/KForms_2pt4?action=raw&ctype=text/javascript
- /
fieldset .column.half_size { width:42%; }
fieldset .column.half_size.message_box{ border: 1px solid #8e8e8e;
border-radius: 5px; padding: 1.5%;
}
#formbody .note{ padding: 5px 15px;
color: #616161; font-size: 120%;
}
/* This wraps the section of questions */
fieldset {
border: 1px solid #d3d3d3;
margin-bottom: 1.5em;
background-color: #f9f9f9;
border-radius: 5px;
padding: 40px;
width: 85%;
max-width: 1250px;
margin: 40px auto;
}
/*This styles the title of a section */ legend { font-size: 16px; font-weight: bold; color: #00bdcd; }
/*This styles the input text boxes */ input[type=text] { padding: 7px 20px; margin: 0px; display: inline-block; border: 1px solid #d3d3d3; border-radius: 5px; box-sizing: border-box; max-width: 170px; }
/* This styles the big paragraph text areas */ #formbody textarea { padding: 15px; margin: 0px 15px; width: 96%; display: inline-block; border: 1px solid #d3d3d3; border-radius: 5px; box-sizing: border-box; }
/* This styles the dropdown select */
#formbody select{
background: #ffffff;
width: 20%;
margin-bottom: 3px;
border: 1px solid #d3d3d3;
}
#formbody .teamselector-multiple {
border-radius: 5%; padding: 15px; margin: 0px 15px; width: 85%;
}
/* visible when selecting which dropdown option */ #formbody input:focus { background: #ffffff; }
/*This styles the input text boxes and select dropdown when selected or brought "in focus" */
input[type=text]:focus, #formbody textarea:focus , #formbody select:focus{
border: 1px solid #90528f;
outline: none;
}
/*This styles the input submit button */
input[type=submit] {
max-width: 65%; border: 3px solid #90528f; font-weight: bold; padding: 14px 20px; margin: 0px; background-color: #90528f; color: white; border-radius: 4px; cursor: pointer; font-size: 100%;
}
/*This styles the input submit button on hover */ input[type=submit]:hover { background-color: transparent; color: #90528f; }
/*styling for p class used for questions */
#formbody .question { margin-top: 1em; font-weight: bold; color: #616161; padding: 10px 15px; }
/* styling for ul in forms */ #formbody fieldset ul { margin-left: 0px; padding-left: 25px; list-style:none; }
/* styling for ul in forms */
#formbody fieldset ul li {
padding: 10px 0px;
list-style:none;
}
/* styling for the wrapper class, this class surrounds an item that is being saved into the system. it gives visual feedback to the user that the form is working. */
#formbody .wrapper{
padding: 10px;
background-color: transparent;
}
/* make span class align the text to the left of dropdowns so they all align */ #formbody .align_dropdowns { width: 90px; float: left; padding: 5px 0px; }
#formbody .dropdown_question { padding: 0px 32px; margin-bottom: 10px; }
/*style section numbers */
.section_numbers {
color: #00bdcd;
border-radius: 50%;
padding: 5px 7px 5px 9px;
text-align: center;
font-size: 15px;
margin-right: 10px;
border: 3px solid #00bdcd;
}
.admins_only {
display: none;
border: 2px solid #FF9900 !important;
}
#formbody td { text-align: center; }
#aj_form_error_inner_div {
display: block; margin: 30px auto 20px auto; width: 40%; text-align: center; border: 1px solid #fdb9b9; padding: 15px 0px; border-radius: 5px; background-color: rgba(255, 228, 232, 0.71);
}
- aj_form_error_inner_div img {
width: 10%;
padding: 0px;
}
- formbody select#team_list_dropdown {
width: 80%; margin: auto 12px;
}
- formbody fieldset .column.half_size {
padding: 0px; width:49%; }
- formbody fieldset .column.half_size.message_box{
border: 1px solid #8e8e8e; border-radius: 5px; padding: 10px 0px; } }
.igem_content_wrapper h3 {
color: #616161 !important;
}
- submitted_warning, #submitted_agree{
display:none; }
- sign_off_button {
display:block; }
.submitted_form_message{ background-color: #d9c5dd; bottom: 0px; left: 0px; position: fixed; padding:2% 0; }
- aj_form_error_inner_div{display:none;}