<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="container"> <div class="row"> <div class="panel panel-success"> <div class="panel-heading"> What would you like to know? </div> <div class="panel-body"> <form action="#" method="get"> <!-- USE TWITTER TYPEAHEAD JSON WITH API TO SEARCH --> <input class="form-control" id="system-search" name="q" placeholder="Search by help topic, keywords, or phrases for" width='100%' required> </form> </div> </div> </div> </div>

@import url("http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,700italic,400,300,700"); @import url("http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600|Roboto Mono"); @import url("https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"); @font-face { font-family: 'Dosis'; font-style: normal; font-weight: 300; src: local('Dosis Light'), local('Dosis-Light'), url(http://fonts.gstatic.com/l/font?kit=RoNoOKoxvxVq4Mi9I4xIReCW9eLPAnScftSvRB4WBxg&skey=a88ea9d907460694) format('woff2'); } @font-face { font-family: 'Dosis'; font-style: normal; font-weight: 500; src: local('Dosis Medium'), local('Dosis-Medium'), url(http://fonts.gstatic.com/l/font?kit=Z1ETVwepOmEGkbaFPefd_-CW9eLPAnScftSvRB4WBxg&skey=21884fc543bb1165) format('woff2'); } body { font-family: 'Source Sans Pro', 'Helvetica Neue', Arial, sans-serif, Open Sans; font-size: 14px; line-height: 1.42857; height: 350px; padding: 0; margin: 0; } .panel-success>.panel-heading { color: #fff; background-color: #5FA503; border-color: #d6e9c6; }