I need some help on resolving a problem. Inside my sytle_buttons.css file there is an code that is blocking input fields in the contact form.
is there away to avoid using the
.ac-container input{
display: none;
}
and still have the site work right.
Thanks in advance
damon
Here is the html code
Expand|Select|Wrap|Line Numbers
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8" />
- <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
- <link rel="stylesheet" type="text/css" href="css/demo.css" />
- <link rel="stylesheet" type="text/css" href="css/style_buttons.css" />
- <!--<script type="text/javascript" src="js/modernizr.custom.29473.js"></script>-->
- </head>
- <body>
- <!-- Codrops top bar --><!--/ Codrops top bar -->
- <section class="ac-container">
- <div>
- <input id="ac-3" name="accordion-1" type="checkbox" />
- <label for="ac-3">Sign up for our Newsletter</label>
- <article class="ac-large">
- <p>Subscribe for free to our newsletter to keep up with the news, releases, events and more. <br>
- </p>
- </article>
- </div>
- <div>
- <input id="ac-4" name="accordion-1" type="checkbox" />
- <label for="ac-4">Contact Us</label>
- <article class="ac-large">
- <p>The Light Laboratory staff is available to serve you with answers and solutions.
- </p><table width="432">
- <form action="contact_us_how_can1.php" method="post" name="contactform" id="contactform">
- <tr>
- <td width="22" ></td>
- <td width="553" height="40"><textarea name="comments" cols="48" rows="6" class="email1" >How can we help you?</textarea></td>
- </tr>
- <tr>
- <td width="22" height="40"> </td>
- <td >Your Name:
- <input name="Your_name" type="text" class="email1" value="Full Name" size="35"></td>
- </tr>
- <tr>
- <td width="22" height="40"> </td>
- <td>Your email:
- <input name="email" type="text" class="email1" value="email@example.com" size="32"></td>
- </tr>
- <tr>
- <td width="22" height="40"> </td>
- <td height="40"><input type="submit" class="message" value=" Send Message " /></td>
- </tr>
- <tr>
- </tr>
- </form>
- </table>
- </article>
- </div>
- </section>
- </body>
- </html>
Expand|Select|Wrap|Line Numbers
- .ac-container{
- width: 450px;
- text-align: left;
- margin-top: 0px;
- margin-right: 0px;
- margin-bottom: 0px;
- margin-left: 0px;
- }
- .ac-container label{
- font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;
- padding: 5px 20px;
- position: relative;
- z-index: 20;
- display: block;
- height: 30px;
- cursor: pointer;
- color: #777;
- text-shadow: 1px 1px 1px rgba(255,255,255,0.8);
- line-height: 33px;
- font-size: 19px;
- background: #ffffff;
- background: -moz-linear-gradient(top, #ffffff 1%, #eaeaea 100%);
- background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#ffffff), color-stop(100%,#eaeaea));
- background: -webkit-linear-gradient(top, #ffffff 1%,#eaeaea 100%);
- background: -o-linear-gradient(top, #ffffff 1%,#eaeaea 100%);
- background: -ms-linear-gradient(top, #ffffff 1%,#eaeaea 100%);
- background: linear-gradient(top, #ffffff 1%,#eaeaea 100%);
- filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#eaeaea',GradientType=0 );
- box-shadow:
- 0px 0px 0px 1px rgba(155,155,155,0.3),
- 1px 0px 0px 0px rgba(255,255,255,0.9) inset,
- 0px 2px 2px rgba(0,0,0,0.1);
- }
- .ac-container label:hover{
- background: #fff;
- }
- .ac-container input:checked + label,
- .ac-container input:checked + label:hover{
- background: #c6e1ec;
- color: #3d7489;
- text-shadow: 0px 1px 1px rgba(255,255,255, 0.6);
- box-shadow:
- 0px 0px 0px 1px rgba(155,155,155,0.3),
- 0px 2px 2px rgba(0,0,0,0.1);
- }
- .ac-container label:hover:after,
- .ac-container input:checked + label:hover:after{
- content: '';
- position: absolute;
- width: 24px;
- height: 24px;
- right: 13px;
- top: 7px;
- background: transparent url(../images/arrow_down.png) no-repeat center center;
- }
- .ac-container input:checked + label:hover:after{
- background-image: url(../images/arrow_up.png);
- }
- .ac-container input{
- display: none;
- }
- .ac-container article{
- background: rgba(255, 255, 255, 0.5);
- margin-top: -1px;
- overflow: hidden;
- height: 0px;
- position: relative;
- z-index: 10;
- -webkit-transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
- -moz-transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
- -o-transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
- -ms-transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
- transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
- width: 450px;
- }
- .ac-container article p{
- font-style: italic;
- color: #777;
- line-height: 20px;
- font-size: 14px;
- padding: 20px;
- text-shadow: 1px 1px 1px rgba(255,255,255,0.8);
- }
- .ac-container input:checked ~ article{
- -webkit-transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
- -moz-transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
- -o-transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
- -ms-transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
- transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
- box-shadow: 0px 0px 0px 1px rgba(155,155,155,0.3);
- }
- .ac-container input:checked ~ article.ac-small{
- height: auto;
- }
- .ac-container input:checked ~ article.ac-medium{
- height: auto;
- }
- .ac-container input:checked ~ article.ac-large{
- height: auto;
- }
Expand|Select|Wrap|Line Numbers
- @font-face {
- font-family: 'BebasNeueRegular';
- src: url('fonts/BebasNeue-webfont.eot');
- src: url('fonts/BebasNeue-webfont.eot?#iefix') format('embedded-opentype'),
- url('fonts/BebasNeue-webfont.woff') format('woff'),
- url('fonts/BebasNeue-webfont.ttf') format('truetype'),
- url('fonts/BebasNeue-webfont.svg#BebasNeueRegular') format('svg');
- font-weight: normal;
- font-style: normal;
- }
- table {
- border-collapse:collapse;
- border-spacing:0;
- }
- fieldset,img {
- border:0;
- }
- address,caption,cite,code,dfn,th,var {
- font-style:normal;
- font-weight:normal;
- }
- ol,ul {
- list-style:none;
- }
- caption,th {
- text-align:left;
- }
- h1,h2,h3,h4,h5,h6 {
- font-size:100%;
- font-weight:normal;
- }
- q:before,q:after {
- content:'';
- }
- abbr,acronym { border:0;
- }
- section, header{
- display: block;
- }
- /* General Demo Style */
- body{
- font-family: Cambria, Palatino, Georgia, serif;
- background: #e0e3ec url(../images/bgnoise_lg.jpg) repeat top left;
- font-weight: 400;
- font-size: 15px;
- color: #393b40;
- overflow-y: scroll;
- }
- a{
- color: #333;
- text-decoration: none;
- }
- .container{
- width: 100%;
- position: relative;
- text-align: center;
- }
- .clr{
- clear: both;
- }
- .container > header{
- font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;
- padding: 20px 30px 10px 30px;
- margin: 0px 20px 10px 20px;
- position: relative;
- display: block;
- text-shadow: 1px 1px 1px rgba(0,0,0,0.2);
- text-align: center;
- }
- .container > header h1{
- font-family: Arial, sans-serif;
- font-size: 35px;
- line-height: 35px;
- position: relative;
- font-weight: 400;
- color: #3d7489;
- text-shadow: 1px 1px 1px rgba(0,0,0,0.3);
- padding: 0px 0px 5px 0px;
- }
- .container > header h1 span{
- color: #80B8CE;
- text-shadow: 0px 1px 1px rgba(255,255,255,0.8);
- }
- .container > header h2{
- font-size: 16px;
- font-style: italic;
- color: #82858e;
- text-shadow: 0px 1px 1px rgba(255,255,255,0.8);
- }