<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="body"> <div class='centerplease'> R.U. S.E.R.V.S. Frequently Asked Questions </div> <br> <div class="content"> <div> <input type="checkbox" id="question1" name="q" class="questions"> <div class="plus">+</div> <label for="question1" class="question"> What does R.U. S.E.R.V.S. stand for? </label> <div class="answers"> Rutgers University services, education, and resources for veteran students. </div> </div> <div> <input type="checkbox" id="question2" name="q" class="questions"> <div class="plus">+</div> <label for="question2" class="question"> Do I need to be a veteran to join? </label> <div class="answers"> You do not, in fact we encourage all members of the Rutgers community to join in our meetings. </div> </div> <div> <input type="checkbox" id="question3" name="q" class="questions"> <div class="plus">+</div> <label for="question3" class="question"> When are the meetings? </label> <div class="answers"> We meet once a month on the first Wednesday of the month, 8 PM at the Veterans House on College Avenue Campus. </div> </div> <div> <input type="checkbox" id="question4" name="q" class="questions"> <div class="plus">+</div> <label for="question4" class="question"> How do I get in touch with the organization? </label> <div class="answers"> The best way to contact us is by e-mailing us, there is a link to e-mail us at the bottom of the page or you can visit the "Contact Us" page. </div> </div> </div> </div> <!-- end of body !--> <div class="footer"> <ul class="contact"> <li> RU S.E.R.V.S. </li> <li> <a href="mailto:ruservs@gmail.com?Subject=Website%20Contact" target="_top">E-mail Us</a> </li> <li> 848-932-VETS </li> </ul> <div class="copyright"> Copyright © 2015, Rutgers, The State University of New Jersey, an equal opportunity, affirmative action institution. </ul> </div> <!-- end of footer !-->

/* import the fonts needed */ @import url("http://fonts.googleapis.com/css?family=Cookie"); @import url("http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"); /* reset */ * { margin: 0; padding: 0; box-sizing: border-box; } /* header settings */ .header > input { display: none; } .header > label { display: none; width: 3em; height: 3em; margin-left: 1em; margin-top: .5em; background-size: contain; background-image: url("https://drive.google.com/uc?export=view&id=0B6od18BhWGl5eWhtZzJUaFA0SjA"); background-repeat: no-repeat; } .header { width: 100%; height: 4em; background-color: #0C1323; opacity: 0.9; background-image: url("https://drive.google.com/uc?export=view&id=0B6od18BhWGl5YWN3emwyelRyUUE"); background-repeat: no-repeat; background-position: right; background-size: auto 4em; position: fixed; top: 0px; z-index: 1000; } .header > .navbar { width: auto; } .header > .navbar > li { display: inline-block; width: auto; height: auto; font-size: 130%; padding: 10px 12px 5px 12px; text-align: center; } .header > .navbar > li > a { color: white; text-decoration: none; font-family: Trebuchet MS, Charcoal, sans-serif; text-shadow: 2px 2px grey; } .header > .navbar > li > a:hover { color: #C21814; } /* end header settings */ /* body settings */ .body { margin-top: 3em; z-index: -1000; width: 100vw; height: 100vh; font-family: Trebuchet MS, Charcoal, sans-serif; font-size: 130%; color: #0C1323; background-size: 100%; background-repeat: repeat-y; background-image: url("https://drive.google.com/uc?export=view&id=0B6od18BhWGl5elFiRTlubVZfN0k"); } .question:hover { color: #C21814; } .content { width: 80%; padding: 20px; margin: 0 auto; padding: 0 60px 0 0; } .centerplease { margin: 0 auto; width: 100vw; font-size: 150%; text-align: center; margin-top: 3em; padding: 5px; } .question { position: relative; background: #0C1323; margin: 0; padding: 10px 10px 10px 50px; display: block; width:100%; cursor: pointer; color: white; text-shadow: 2px 2px grey; } .answers { background: #999; padding: 0px 15px; margin: 5px 0; height: 0; overflow: hidden; z-index: 15; position: relative; opacity: 0; -webkit-transition: .7s ease; -moz-transition: .7s ease; -o-transition: .7s ease; transition: .7s ease; } .questions:checked ~ .answers{ height: auto; opacity: 1; padding: 15px; } .plus { position: absolute; color: white; margin-left: 10px; z-index: 15; font-size: 2em; line-height: 100%; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none; -webkit-transition: .3s ease; -moz-transition: .3s ease; -o-transition: .3s ease; transition: .3s ease; } .questions:checked ~ .plus { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); } .questions { display: none; } /* end of body settings */ /* footer settings */ .footer { display: block; width: 100%; color: #242B39; text-align: center; position: fixed; bottom: 0px; background-color: white; padding: 5px; z-index: 10; opacity: .9; } .footer > .contact { padding: 0px 0px 5px 0px; } .footer > .contact > li > a { text-decoration: none; color: #242B39; } .footer > .contact > li > a:hover { text-decoration: underline; text-transform: uppercase; color: #C21814; } .footer > .contact > li { display: inline; padding: 0px 8px 0px 8px; border-right: 1px solid #242B39; } .footer > .contact > li:last-child{ border-right: 0; } /* end of footer settings */ /* <= 600px settings*/ @media (max-width: 600px) { .header > label { display: inline-block; } .header > .navbar { display: none; } .header > input:checked + .navbar { display: block; width: 220px; height: 110vh; position: absolute; top: 4em; z-index: 100; background-color: #0C1323; } .header > input:checked + .navbar > li { width: 250px; padding: 15px 0px 15px 15px; } .body { height: 120vh; font-size: 90%; } .footer { display: inline-block; width: 100%; z-index: 16; text-align: center; position: fixed; bottom: 0px; padding: 0px 0px 2px 0px; } } /* 601-759px settings */ @media all and (min-width:601px) and (max-width:749px) { .header > label { display: inline-block; } .header > .navbar { display: none; } .header > input:checked + .navbar { display: block; width: 200px; height: 130vh; position: absolute; top: 4em; z-index: 100; background-color: #0C1323; } .header > input:checked + .navbar > li { width: 250px; padding: 15px 0px 15px 15px; } .body { height: 100vh; font-size: 100%; } .footer { display: inline-block; width: 100%; z-index: 16; text-align: center; position: fixed; bottom: 0px; padding: 0px 0px 2px 0px; } } /* 750-799px settings */ @media all and (min-width:750px) and (max-width:799px) { .body { height: 100vh; font-size: 100%; } } /* 800-1300px settings*/ @media all and (min-width:800px) and (max-width:1300px) { .body { height: 100vh; font-size: 100%; } .footer { display: inline-block; width: 100%; z-index: 16; text-align: center; position: fixed; bottom: 0px; padding: 0px 0px 2px 0px; } }