<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"> <article class="span4"> <h3 class="extra">Search</h3> <form id="search" action="search.php" method="GET" accept-charset="utf-8"> <div class="clearfix"> <input type="text" name="s" onblur="if(this.value=='') this.value=''" onfocus="if(this.value =='' ) this.value=''"> <a href="#" onclick="document.getElementById('search').submit()" class="btn btn-1">Search</a> </div> </form> <h3>Categories</h3> <ul class="list extra extra1"> <li><a href="#">Vonsequat</a></li> <li><a href="#">Utdminim veniam</a></li> <li><a href="#">Qullamcorper</a></li> <li><a href="#">Suscipitlobortis</a></li> <li><a href="#">Comnsequat</a></li> <li><a href="#">Duendrerit</a></li> <li><a href="#">Facilisis</a></li> <li><a href="#">Luptatum</a></li> <li class="last"><a href="#">Qui blandit</a></li> </ul> <h3>Archive</h3> <div class="wrapper"> <ul class="list extra2 list-pad "> <li><a href="#">May 2012</a></li> <li><a href="#">April 2012</a></li> <li><a href="#">March 2012</a></li> <li><a href="#">February 2012</a></li> <li><a href="#">January 2012</a></li> <li class="last"><a href="#">December 2011</a></li> </ul> <ul class="list extra2"> <li><a href="#">November 2012</a></li> <li><a href="#">October 2012</a></li> <li><a href="#">September 2012</a></li> <li><a href="#">August 2012</a></li> <li><a href="#">July 2012</a></li> <li class="last"><a href="#">June 2012</a></li> </ul> </div> </article></div> </div>

html { font-size: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; } body { margin: 0; font-family: 'Open Sans', sans-serif; font-size: 14px; line-height: 20px; color: #F25C27; background:#310d00; } .span4 { width: 228px; } .span { float: left; min-height: 1px; margin-left: 20px; } .span4 { width: 300px; } .span{ float: left; min-height: 1px; margin-left: 20px; } article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; } h1, h2, h4, h5, h6 { font-size: 30px; line-height: 34px; margin: 32px 0 15px; text-transform: none; color: #F25C27; font-family: 'Open Sans', sans-serif; font-weight: 300; letter-spacing: -1px; text-rendering: optimizelegibility; } h3 { line-height: 34px; margin: 32px 0 15px; text-transform: none; color: #F25C27; display: block; font-size: 1.17em; -webkit-margin-before: 1em; -webkit-margin-after: 1em; -webkit-margin-start: 0px; -webkit-margin-end: 0px; font-weight: bold; } #search { margin: 0; padding: 10px 0 0; overflow: hidden; } form { margin: 0 0 20px; } #search input { background: #ffffff; border: none; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; line-height: 21px !important; width: 260px; float: left; margin: 0px 10px 0 0; padding: 4px 12px 5px; font-size: 14px; height: 30px; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } form { display: block; margin-top: 0em; } #search input { width: 127px; } #search input { width: 200px; } #search input { background: #ffffff; border: none; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; line-height: 21px !important; width: 200px; float: left; margin: 0px 10px 0 0; padding: 4px 12px 5px; font-size: 14px; height: 30px; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } textarea, input[type="text"],.uneditable-input { background-color: #ffffff; border: 1px solid #cccccc; -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); -webkit-transition: border linear .2s, box-shadow linear .2s; -moz-transition: border linear .2s, box-shadow linear .2s; -o-transition: border linear .2s, box-shadow linear .2s; transition: border linear .2s, box-shadow linear .2s; } select, textarea, input[type="text"], .uneditable-input { display: inline-block; height: 20px; margin-bottom: 9px; font-size: 14px; line-height: 20px; color: #7f7f7f; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; } input, textarea, .uneditable-input { width: 206px; } label, input, button, select, textarea { font-family: 'Open Sans', sans-serif; font-size: 14px; font-weight: normal; line-height: 20px; } button, input { line-height: normal; } button, input, select, textarea { margin: 0; font-size: 100%; vertical-align: middle; } input:not([type]) { padding: 1px 0px; } input { -webkit-appearance: textfield; background-color: white; -webkit-rtl-ordering: logical; user-select: text; cursor: auto; padding: 1px; border-width: 2px; border-style: inset; border-color: initial; border-image: initial; } input, textarea, select, button { text-rendering: auto; color: initial; letter-spacing: normal; word-spacing: normal; text-transform: none; text-indent: 0px; text-shadow: none; display: inline-block; text-align: start; margin: 0em; font: 13.3333px Arial; } input, textarea, select, button, meter, progress { -webkit-writing-mode: horizontal-tb; } #search a { color: #F25C27; float: left; } .btn-1 { color: #F25C27; background: #FFF; padding: 5px 14px; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; text-shadow: none; border: none; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } .btn { border-color: #F25C27; border-color: rgba(0, 0, 0, 0.15) rgba(0, 0, 0, 0.15) rgba(0, 0, 0, 0.25); } .btn { display: inline-block; padding: 4px 14px; margin-bottom: 0; font-size: 14px; line-height: 20px; text-align: center; vertical-align: middle; cursor: pointer; color: #181818; text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75); background-color: #F25C27; background-image: -moz-linear-gradient(top, #ffffff, #e6e6e6); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#e6e6e6)); background-image: -webkit-linear-gradient(top, #ffffff, #e6e6e6); background-image: -o-linear-gradient(top, #ffffff, #e6e6e6); background-image: linear-gradient(to bottom, #ffffff, #e6e6e6); background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffe6e6e6', GradientType=0); border-color: #e6e6e6 #e6e6e6 #bfbfbf; border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); border: 1px solid #bbbbbb; border-bottom-color: #a2a2a2; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 0; -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); } a { color: #F25C27; text-decoration: none; outline: none; } a:-webkit-any-link { color: -webkit-link; cursor: auto; text-decoration: underline; } .list.extra { width: 100%; margin: 0; float: none; padding-top: 5px; } .list { list-style: none outside; padding-top: 14px; float: left; width: 106px; margin: 0; } .list.extra1 a, .list.extra2 a { color: #7f7f7f; } .list li a { color: #F25C27; display: inline-block; } li { line-height: 20px; } li { display: list-item; text-align: -webkit-match-parent; } .list { list-style: none outside; padding-top: 14px; float: left; width: 106px; margin: 0; } ul, menu, dir { display: block; list-style-type: disc; -webkit-margin-before: 1em; -webkit-margin-after: 1em; -webkit-margin-start: 0px; -webkit-margin-end: 0px; -webkit-padding-start: 40px; } ul, ol { padding: 0; margin: 0 0 10px 25px; }