<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.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="col-lg-12"> <h1><a href="#">Style Guide</a></h1> </div> </div> <div class="navbar navbar-default navbar-fixed-top" role="navigation"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse"> <span class="sr-only">Toggle Navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#page-top">CardeoStrap</a> </div> <div class="collapse navbar-collapse navbar-responsive-collapse"> <ul class="nav navbar-nav"> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" id="nav1"> CSS <span class="caret"></span> </a> <ul class="dropdown-menu" role="menu" aria-labelledby="nav1"> <li role="menuitem"><a href="#nav-type">Typography</a></li> <li role="menuitem"><a href="#nav-tables">Tables</a></li> <li role="menuitem"><a href="#nav-forms">Forms</a></li> <li role="menuitem"><a href="#nav-buttons">Buttons</a></li> </ul> </li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" id="nav2"> Components <span class="caret"></span> </a> <ul class="dropdown-menu" role="menu" aria-labelledby="nav2"> <li role="menuitem"><a href="#nav-dropdowns">Dropdowns</a></li> <li role="menuitem"><a href="#nav-tabs">Tabs & Pills</a></li> <li role="menuitem"><a href="#nav-navbars">Navbar</a></li> <li role="menuitem"><a href="#nav-paging">Paging</a></li> <li role="menuitem"><a href="#nav-labels">Labels</a></li> <li role="menuitem"><a href="#nav-alerts">Alerts</a></li> <li role="menuitem"><a href="#nav-thumbs">Thumbnails</a></li> <li role="menuitem"><a href="#nav-media">Media Object</a></li> <li role="menuitem"><a href="#nav-list-groups">List Groups</a></li> <li role="menuitem"><a href="#nav-panels">Panels</a></li> <li role="menuitem"><a href="#nav-wells">Wells</a></li> </ul> </li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" id="nav3"> Javascript <span class="caret"></span> </a> <ul class="dropdown-menu" role="menu" aria-labelledby="nav3"> <li role="menuitem"><a href="#nav-modal">Modal</a></li> <li role="menuitem"><a href="#nav-tooltip">Tooltip</a></li> <li role="menuitem"><a href="#nav-accordion">Accordion</a></li> <li role="menuitem"><a href="#nav-carousel">Carousel</a></li> </ul> </li> </ul> </div> </div> <div class="container-fluid"> <div class="row"> <div class="col-lg-12 page-header"> <h1 id="page-top">Style Guide</h1> </div> </div> <!-- TYPOGRAPHY //--> <div class="row"> <div class="col-lg-12 page-header"> <h2 id="nav-type">Typography</h2> </div> <!-- HEADERS //--> <div class="col-lg-12"> <h3>Headers</h3> <table class="table"> <thead> <tr> <th>Example</th> <th>EMS</th> <th>PX</th> </tr> </thead> <tbody> <tr> <td><h1 id="demoh1">Header 1</h1></td> <td>2em</td> <td>32px</td> </tr> <tr> <td><h2>Header 2</h2></td> <td>1.75em</td> <td>28px</td> </tr> <tr> <td><h3>Header 3</h3></td> <td>1.5em</td> <td>24px</td> </tr> <tr> <td><h4>Header 4</h4></td> <td>1.313em</td> <td>21px</td> </tr> <tr> <td><h5>Header 5</h5></td> <td>1.125em</td> <td>18px</td> </tr> <tr> <td><h6>Header 6</h6></td> <td>1em</td> <td>16px</td> </tr> </tbody> </table> <!-- TEXT EMPHASIS //--> <h3>Text Emphasis Classes</h3> <ul class="inline"> <li class="text-muted">.text-muted</li> <li class="text-primary">.text-primary</li> <li class="text-warning">.text-warning</li> <li class="text-danger">.text-danger</li> <li class="text-success">.text-success</li> <li class="text-info">.text-info</li> </ul> <!-- BLOCKQUOTE, CODE & PRE //--> <div class="row"> <div class="col-lg-4"> <h3>Blockquote</h3> <blockquote> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> <small>John Smith</small> </blockquote> </div> <div class="col-lg-4"> <h3>Code</h3> I like to <code><code></code>. </div> <div class="col-lg-4"> <h3>Pre</h3> <pre>/* I also like multi-line code */ body { font-size: 16px; color: #333; ... }</pre> </div><!-- nested col end //--> </div><!-- nested row end //--> </div><!-- typography .col-lg-12 end //--> </div><!-- .row end typography //--> <!-- TABLES //--> <div class="row"> <div class="col-lg-12 page-header"> <h2 id="nav-tables">Tables</h2> </div> <!-- BASIC TABLE //--> <div class="col-lg-12"> <h3>Basic Table</h3> <table class="table"> <thead> <tr> <th>#</th> <th>First Name</th> <th>Last Name</th> <th>Username</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>John</td> <td>Smith</td> <td>jsmith</td> </tr> <tr> <td>2</td> <td>Jane</td> <td>Doe</td> <td>jdoe</td> </tr> <tr> <td>3</td> <td>Jon</td> <td>Doe</td> <td>jondoe</td> </tr> </tbody> </table> <!-- STRIPED TABLE //--> <h3>Table Striped</h3> <table class="table table-striped"> <thead> <tr> <th>#</th> <th>First Name</th> <th>Last Name</th> <th>Username</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>John</td> <td>Smith</td> <td>jsmith</td> </tr> <tr> <td>2</td> <td>Jane</td> <td>Doe</td> <td>jdoe</td> </tr> <tr> <td>3</td> <td>Jon</td> <td>Doe</td> <td>jondoe</td> </tr> </tbody> </table> <!-- HOVER TABLE //--> <h3>Table Hover</h3> <table class="table table-striped table-hover"> <thead> <tr> <th>#</th> <th>First Name</th> <th>Last Name</th> <th>Username</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>John</td> <td>Smith</td> <td>jsmith</td> </tr> <tr> <td>2</td> <td>Jane</td> <td>Doe</td> <td>jdoe</td> </tr> <tr> <td>3</td> <td>Jon</td> <td>Doe</td> <td>jondoe</td> </tr> </tbody> </table> <!-- BORDERED TABLE //--> <h3>Table Bordered</h3> <table class="table table-striped table-hover table-bordered"> <thead> <tr> <th>#</th> <th>First Name</th> <th>Last Name</th> <th>Username</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>John</td> <td>Smith</td> <td>jsmith</td> </tr> <tr> <td>2</td> <td>Jane</td> <td>Doe</td> <td>jdoe</td> </tr> <tr> <td>3</td> <td>Jon</td> <td>Doe</td> <td>jondoe</td> </tr> </tbody> </table> <!-- CONDENSED TABLE //--> <h3>Table Condensed</h3> <table class="table table-condensed"> <thead> <tr> <th>#</th> <th>First Name</th> <th>Last Name</th> <th>Username</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>John</td> <td>Smith</td> <td>jsmith</td> </tr> <tr> <td>2</td> <td>Jane</td> <td>Doe</td> <td>jdoe</td> </tr> <tr> <td>3</td> <td>Jon</td> <td>Doe</td> <td>jondoe</td> </tr> </tbody> </table> <!-- CONTEXTUAL TABLE CLASSES //--> <h3>Contextual Table Classes</h3> <table class="table"> <thead> <tr> <th>#</th> <th>First Name</th> <th>Last Name</th> <th>Username</th> </tr> </thead> <tbody> <tr class="success"> <td>1</td> <td>John</td> <td>Smith</td> <td>jsmith</td> </tr> <tr class="danger"> <td>2</td> <td>Jane</td> <td>Doe</td> <td>jdoe</td> </tr> <tr class="warning"> <td>3</td> <td>Jon</td> <td>Doe</td> <td>jondoe</td> </tr> <tr class="active"> <td>3</td> <td>Jon</td> <td>Doe</td> <td>jondoe</td> </tr> </tbody> </table> </div><!-- tables .col-lg-12 end //--> </div><!-- tables .row end //--> <!-- FORMS //--> <div class="row"> <div class="col-lg-12 page-header"> <h2 id="nav-forms">Forms</h2> </div> </div> <!-- BASIC FORM //--> <div class="row"> <div class="col-lg-6"> <form> <fieldset> <legend>Basic Form</legend> <div class="form-group"> <label>Name</label> <input type="text" class="form-control" placeholder="Enter Name" /> </div> <div class="form-group"> <select class="form-control"> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> </select> </div> <div class="form-group"> <label>File Input</label> <input type="file" /> <p class="help-block">Block level help</p> </div> <div class="form-group"> <div class="checkbox"> <label> <input type="checkbox" value=""> Checkbox 1 </label> </div> <div class="checkbox"> <label> <input type="checkbox" value=""> Checkbox 2 </label> </div> <div class="checkbox"> <label> <input type="checkbox" value=""> Checkbox 3 </label> </div> </div> <div class="form-group"> <div class="radio"> <label> <input type="radio" name="radiogroup" value="option1" /> Radio 1 </label> </div> <div class="radio"> <label> <input type="radio" name="radiogroup" value="option2" /> Radio 2 </label> </div> </div> <div class="form-group"> <label>textarea</label> <textarea class="form-control" rows="10"></textarea> </div> <div class="form-group"> <button type="submit" class="btn btn-sm">Cancel</button> <button type="submit" class="btn btn-primary btn-sm">Submit</button> </div> </fieldset> </form> </div><!-- left form col end //--> <!-- INLINE FORM //--> <div class="col-lg-6"> <h3>Inline Form</h3> <form class="form-inline"> <div class="form-group"> <input type="text" class="form-control" placeholder="Email" /> </div> <div class="form-group"> <input type="password" class="form-control" placeholder="Password" /> </div> <div class="checkbox"> <label> <input type="checkbox" /> Remember me </label> </div> <button type="submit" class="btn btn-primary btn-sm">Sign In</button> </form> <hr /> <!-- HORIZONTAL FORM //--> <h3>Horizontal Form</h3> <form class="form-horizontal"> <div class="form-group"> <label class="col-lg-2 control-label">Email</label> <div class="col-lg-10"> <input type="text" class="form-control" placeholder="Email" /> </div> </div> <div class="form-group"> <label class="col-lg-2 control-label">Password</label> <div class="col-lg-10"> <input type="password" class="form-control" placeholder="password" /> </div> </div> <div class="form-group"> <div class="col-lg-offset-2 col-lg-10"> <div class="checkbox"> <label> <input type="checkbox" /> Remember me </label> </div> </div> </div> <div class="form-group"> <div class="col-lg-offset-2 col-lg-10"> <button type="submit" class="btn btn-primary btn-sm">Sign In</button> </div> </div> </form> <hr /> <!-- INPUT GROUPS //--> <h3>Input Groups</h3> <div class="input-group leading"> <span class="input-group-addon">@</span> <input type="text" class="form-control" placeholder="Username" /> </div> <div class="input-group leading"> <input type="text" class="form-control" /> <span class="input-group-addon">.00</span> </div> <div class="input-group leading"> <span class="input-group-addon">$</span> <input type="text" class="form-control" /> <span class="input-group-addon">.00</span> </div> <div class="input-group leading"> <span class="input-group-btn"> <button class="btn btn-primary" type="button">Go!</button> </span> <input type="text" class="form-control" /> </div> <div class="input-group leading"> <input type="text" class="form-control" /> <span class="input-group-btn"> <button class="btn btn-primary" type="button">Go!</button> </span> </div> <div class="input-group leading"> <div class="input-group-btn"> <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" id="drop1">Action <span class="caret"></span></button> <ul class="dropdown-menu" role="menu" aria-labelledby="drop1"> <li role="menuitem"><a tabindex="-1" href="#">Action</a></li> <li role="menuitem"><a tabindex="-1" href="#">Link</a></li> <li role="menuitem"><a tabindex="-1" href="#">Link</a></li> <li role="menuitem" class="divider"></li> <li role="menuitem"><a tabindex="-1" href="#">Link</a></li> </ul> </div> <input type="text" class="form-control" /> </div> <div class="input-group"> <input type="text" class="form-control" /> <div class="input-group-btn"> <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" id="drop2">Action <span class="caret"></span></button> <ul class="dropdown-menu" role="menu" aria-labelledby="drop2"> <li role="menuitem"><a tabindex="-1" href="#">Action</a></li> <li role="menuitem"><a tabindex="-1" href="#">Link</a></li> <li role="menuitem"><a tabindex="-1" href="#">Link</a></li> <li role="menuitem" class="divider"></li> <li role="menuitem"><a tabindex="-1" href="#">Link</a></li> </ul> </div> </div> </div><!-- right form col end //--> </div><!-- forms .row end //--> <!-- BUTTONS //--> <div class="row"> <div class="col-lg-12 page-header"> <h2 id="nav-buttons">Buttons</h2> </div> </div> <div class="row"> <div class="col-lg-12"> <ul class="inline"> <li><button class="btn btn-default">Default</button></li> <li><button class="btn btn-primary">Primary</button></li> <li><button class="btn btn-info">Info</button></li> <li><button class="btn btn-success">Success</button></li> <li><button class="btn btn-warning">Warning</button></li> <li><button class="btn btn-danger">Danger</button></li> <li><button class="btn btn-inverse">Inverse</button></li> </ul> </div> </div><!-- button row 1 end //--> <div class="row"> <div class="col-lg-12"> <ul class="inline"> <li><button class="btn btn-primary btn-lg">Large Button</button></li> <li><button class="btn btn-primary btn-sm">Small Button</button></li> <li><button class="btn btn-primary btn-xs">Mini Button</button></li> </ul> </div> </div><!-- button row 2 end //--> <div class="row"> <div class="col-lg-12 page-header"> <h2>Button Groups</h2> </div> </div> <div class="row"> <div class="col-lg-4"> <div class="btn-group"> <button type="button" class="btn btn-primary btn-sm">Left</button> <button type="button" class="btn btn-primary btn-sm">Center</button> <button type="button" class="btn btn-primary btn-sm">Right</button> </div> </div> <div class="col-lg-4"> <div class="btn-toolbar"> <div class="btn-group"> <button type="button" class="btn btn-primary btn-sm">L</button> <button type="button" class="btn btn-primary btn-sm">C</button> <button type="button" class="btn btn-primary btn-sm">R</button> </div> <div class="btn-group"> <button type="button" class="btn btn-primary btn-sm">L</button> <button type="button" class="btn btn-primary btn-sm">C</button> <button type="button" class="btn btn-primary btn-sm">R</button> </div> </div> </div> <div class="col-lg-4 leading"> <div class="btn-group-vertical"> <button type="button" class="btn btn-primary btn-sm">Left</button> <button type="button" class="btn btn-primary btn-sm">Center</button> <button type="button" class="btn btn-primary btn-sm">Right</button> </div> </div> </div><!-- button groups 1 end //--> <div class="row"> <div class="col-lg-12"> <div class="btn-group btn-group-justified"> <a class="btn btn-primary btn-sm">Left</a> <a class="btn btn-primary btn-sm">Center</a> <a class="btn btn-primary btn-sm">Right</a> </div> </div> </div> <!-- DROPDOWNS //--> <div class="row"> <div class="col-lg-12 page-header"> <h2 id="nav-dropdowns">Dropdowns</h2> </div> </div> <div class="row"> <div class="col-lg-3"> <div class="dropdown"> <a class="dropdown-toggle btn btn-primary" data-toggle="dropdown" href="#" id="drop3">Dropdown Trigger <b class="caret"></b></a> <ul class="dropdown-menu" role="menu" aria-labelledby="drop3"> <li role="menuitem"><a tabindex="-1" href="#">Action</a></li> <li role="menuitem"><a tabindex="-1" href="#">Link</a></li> <li role="menuitem"><a tabindex="-1" href="#">Link</a></li> <li role="menuitem" class="divider"></li> <li role="menuitem"><a tabindex="-1" href="#">Link</a></li> </ul> </div> </div><!-- dropdown col one //--> <div class="col-lg-3"> <div class="dropdown"> <a class="dropdown-toggle btn btn-primary" data-toggle="dropdown" href="#" id="drop4"> With Headers <b class="caret"></b></a> <ul class="dropdown-menu" role="menu" aria-labelledby="drop4"> <li class="dropdown-header" role="menuitem">Dropdown Header</li> <li role="menuitem"><a tabindex="-1" href="#" >Action</a></li> <li role="menuitem"><a tabindex="-1" href="#" >Link</a></li> <li class="dropdown-header" role="menuitem">Dropdown Header</li> <li role="menuitem"><a tabindex="-1" href="#" >Link</a></li> <li role="menuitem" class="divider"></li> <li role="menuitem"><a tabindex="-1" href="#" >Link</a></li> </ul> </div> </div><!-- dropdown col two //--> <div class="col-lg-3"> <div class="btn-group"> <button type="button" class="btn btn-primary">Action</button> <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown"> <span class="caret"></span> </button> <ul class="dropdown-menu"> <li><a tabindex="-1" href="#">Action</a></li> <li><a tabindex="-1" href="#">Link</a></li> <li><a tabindex="-1" href="#">Link</a></li> <li class="divider"></li> <li><a tabindex="-1" href="#">Link</a></li> </ul> </div> </div><!-- dropdown col 3 //--> <div class="col-lg-3"> <div class="dropdown pull-right"> <a class="dropdown-toggle btn btn-primary" data-toggle="dropdown" href="#" id="drop5"> Right Aligned <b class="caret"></b></a> <ul class="dropdown-menu" role="menu" aria-labelledby="drop5"> <li class="dropdown-header" role="menuitem">Dropdown Header</li> <li role="menuitem"><a tabindex="-1" href="#">Action</a></li> <li role="menuitem"><a tabindex="-1" href="#">Link</a></li> <li class="dropdown-header" role="menuitem">Dropdown Header</li> <li role="menuitem"><a tabindex="-1" href="#">Link</a></li> <li role="menuitem" class="divider"></li> <li role="menuitem"><a tabindex="-1" href="#">Link</a></li> </ul> </div> </div><!-- dropdown col 4 //--> </div><!-- end dropdown row //--> <div class="row"> <div class="col-lg-12 page-header"> <h2 id="nav-tabs">Tabs & Pills</h2> </div> </div> <div class="row"> <div class="col-lg-12 leading"> <h3>Basic Tabs</h3> <ul class="nav nav-tabs"> <li class="active"><a href="#">Home</a></li> <li><a href="#">Page</a></li> <li><a href="#">Page</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" id="drop6"> Dropdown <span class="caret"></span> </a> <ul class="dropdown-menu" role="menu" aria-labelledby="drop6"> <li role="menuitem"><a tabindex="-1" href="#">Action</a></li> <li role="menuitem"><a tabindex="-1" href="#">Link</a></li> <li role="menuitem"><a tabindex="-1" href="#">Link</a></li> <li role="menuitem" class="divider"></li> <li role="menuitem"><a tabindex="-1" href="#">Link</a></li> </ul> </li> </ul> </div> <div class="col-lg-12 leading"> <h3>Justified Tabs</h3> <ul class="nav nav-tabs nav-justified"> <li class="active"><a href="#">Home</a></li> <li><a href="#">Page</a></li> <li><a href="#">Page</a></li> <li><a href="#">Page</a></li> </ul> </div> </div><!-- tabs row end //--> <div class="row"> <div class="col-lg-12 leading"> <h3>Basic Pills</h3> <ul class="nav nav-pills"> <li class="active"><a href="#">Home</a></li> <li><a href="#">Page</a></li> <li><a href="#">Page</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" id="drop7"> Dropdown <span class="caret"></span> </a> <ul class="dropdown-menu" role="menu" aria-labelledby="drop7"> <li role="menuitem"><a tabindex="-1" href="#">Action</a></li> <li role="menuitem"><a tabindex="-1" href="#">Link</a></li> <li role="menuitem"><a tabindex="-1" href="#">Link</a></li> <li role="menuitem" class="divider"></li> <li role="menuitem"><a tabindex="-1" href="#">Link</a></li> </ul> </li> </ul> </div> <div class="col-lg-12"> <h3>Justified Pills</h3> <ul class="nav nav-pills nav-justified"> <li class="active"><a href="#">Home</a></li> <li><a href="#">Page</a></li> <li><a href="#">Page</a></li> <li><a href="#">Page</a></li> </ul> </div> </div><!-- pills row end //--> <!-- NAVBAR //--> <div class="row"> <div class="col-lg-12 page-header"> <h2 id="nav-navbars">Navbar</h2> </div> </div> <div class="row"> <!-- BASIC NAVBAR //--> <div class="col-lg-12"> <h3>Basic Navbar</h3> <div class="navbar navbar-default"> <a class="navbar-brand" href="#">Title</a> <ul class="nav navbar-nav"> <li class="active"><a href="#">Home</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" id="drop8"> Dropdown <span class="caret"></span> </a> <ul class="dropdown-menu" role="menu" aria-labelledby="drop8"> <li role="menuitem"><a tabindex="-1" href="#">Action</a></li> <li role="menuitem"><a tabindex="-1" href="#">Link</a></li> <li role="menuitem"><a tabindex="-1" href="#">Link</a></li> <li role="menuitem" class="divider"></li> <li role="menuitem"><a tabindex="-1" href="#">Link</a></li> </ul> </li> </ul> </div> </div><!-- navbar col end //--> <!-- NAVBAR WITH FORM //--> <div class="col-lg-12"> <h3>Navbar Form</h3> <div class="navbar navbar-default"> <a class="navbar-brand" href="#">Title</a> <ul class="nav navbar-nav"> <li class="active"><a href="#">Home</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> </ul> <form class="navbar-form pull-right"> <input type="text" class="form-control navbar-form-width" /> <button type="submit" class="btn btn-primary">Submit</button> </form> </div> </div><!-- navbar col end //--> <!-- NAVBAR WITH BUTTONS //--> <div class="col-lg-12"> <h3>Navbar Buttons</h3> <div class="navbar navbar-default"> <a class="navbar-brand" href="#">Title</a> <ul class="nav navbar-nav"> <li class="active"><a href="#">Home</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> </ul> <button type="button" class="btn btn-primary navbar-btn">Sign In</button> </div> </div><!-- navbar col end //--> <!-- NAVBAR WITH TEXT //--> <div class="col-lg-12"> <h3>Navbar Text</h3> <div class="navbar navbar-default"> <a class="navbar-brand" href="#">Title</a> <ul class="nav navbar-nav"> <li class="active"><a href="#">Home</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> </ul> <p class="navbar-text pull-right">Signed in as John Doe</p> </div> </div><!-- navbar col end //--> <!-- INVERSE NAVBAR //--> <div class="col-lg-12"> <h3>Navbar Form</h3> <div class="navbar navbar-inverse"> <a class="navbar-brand" href="#">Title</a> <ul class="nav navbar-nav"> <li class="active"><a href="#">Home</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" id="drop9"> Dropdown <span class="caret"></span> </a> <ul class="dropdown-menu" role="menu" aria-labelledby="drop9"> <li role="menuitem"><a tabindex="-1" href="#">Action</a></li> <li role="menuitem"><a tabindex="-1" href="#">Link</a></li> <li role="menuitem"><a tabindex="-1" href="#">Link</a></li> <li role="menuitem" class="divider"></li> <li role="menuitem"><a tabindex="-1" href="#">Link</a></li> </ul> </li> </ul> <form class="navbar-form"> <input type="text" class="form-control navbar-form-width" /> <button type="submit" class="btn btn-primary">Submit</button> </form> </div> </div><!-- navbar col end //--> </div><!-- navbar row end //--> <!-- BREADCRUMB //--> <div class="row"> <div class="col-lg-12 page-header"> <h2>Breadcrumbs</h2> </div> </div> <div class="row"> <div class="col-lg-12"> <ul class="breadcrumb"> <li><a href="#">Home</a></li> <li><a href="#">Page</a></li> <li class="active"><a href="#">Page</a></li> </ul> </div> </div><!-- breadcrumb row end //--> <!-- PAGINATION //--> <div class="row"> <div class="col-lg-12"> <h2 id="nav-paging">Pagination</h2> </div> </div> <div class="row"> <!-- DEFAULT PAGINATION //--> <div class="col-lg-4"> <h3>Default</h3> <ul class="pagination"> <li><a href="#">«</a></li> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> <li><a href="#">5</a></li> <li><a href="#">»</a></li> </ul> </div> <!-- SMALL PAGINATION //--> <div class="col-lg-4"> <h3>Small</h3> <ul class="pagination pagination-sm"> <li><a href="#">«</a></li> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> <li><a href="#">5</a></li> <li><a href="#">»</a></li> </ul> </div> <!-- LARGE PAGINATION //--> <div class="col-lg-4"> <h3>Large</h3> <ul class="pagination pagination-lg"> <li><a href="#">«</a></li> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> <li><a href="#">5</a></li> <li><a href="#">»</a></li> </ul> </div> </div><!-- pagination row end //--> <!-- PAGER //--> <div class="row"> <div class="col-lg-12 page-header"> <h2>Pager</h2> </div> </div> <div class="row"> <div class="col-lg-6"> <h3>Default</h3> <ul class="pager"> <li><a href="#">Previous</a></li> <li><a href="#">Next</a></li> </ul> </div> <div class="col-lg-6"> <h3>Aligned Links</h3> <ul class="pager"> <li class="previous"><a href="#">← Previous</a></li> <li class="next"><a href="#">Next →</a></li> </ul> </div> </div><!-- page row end //--> <!-- LABELS & BADGES //--> <div class="row"> <div class="col-lg-12 page-header"> <h2 id="nav-labels">Labels & Badges</h2> </div> </div> <div class="row"> <!-- LABELS //--> <div class="col-lg-6"> <h3>Labels</h3> <ul class="inline"> <li><span class="label label-default">Default</span></li> <li><span class="label label-primary">Primary</span></li> <li><span class="label label-success">Success</span></li> <li><span class="label label-warning">Warning</span></li> <li><span class="label label-danger">Danger</span></li> <li><span class="label label-info">Info</span></li> </ul> </div> <!-- BADGES //--> <div class="col-lg-6"> <h3>Badges</h3> <ul class="inline"> <li><span class="badge badge-default">1</span></li> <li><span class="badge badge-primary">2</span></li> <li><span class="badge badge-success">3</span></li> <li><span class="badge badge-warning">4</span></li> <li><span class="badge badge-danger">5</span></li> <li><span class="badge badge-info">6</span></li> </ul> </div> </div><!-- labels and badges row end //--> <!-- JUMBOTRON //--> <div class="row"> <div class="col-lg-12 page-header"> <h2>Jumbotron</h2> </div> </div> <div class="row"> <div class="col-lg-12"> <div class="jumbotron"> <div class="container"> <h1 id="jumboheader">Hello, world!</h1> <p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p> <p><a class="btn btn-primary">Learn more</a></p> </div> </div> </div> </div><!-- jumbotron row end //--> <!-- PAGE HEADER //--> <div class="row"> <div class="col-lg-12 page-header"> <h2>Page Header</h2> </div> </div> <div class="row"> <div class="col-lg-12"> <div class="page-header"> <h1 id="demoheader">Example page header <small>subtext for header</small></h1> </div> </div> </div><!-- page header row end //--> <!-- ALERTS //--> <div class="row"> <div class="col-lg-12 page-header"> <h2 id="nav-alerts">Alerts</h2> </div> </div> <div class="row"> <!-- BLOCK ALERT //--> <div class="col-lg-12"> <h3>Block Alert</h3> <div class="alert alert-block"> <button type="button" class="close" data-dismiss="alert">×</button> <h4>Warning!</h4> <p>Best check yo self, you're not looking too good. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. <a href="#">Link</a></p> </div> </div> <!-- ALTERNATE ALERTS //--> <div class="col-lg-12"> <h3>Alternate Alerts</h3> <div class="alert alert-danger"> <button type="button" class="close" data-dismiss="alert">×</button> <p>Oh snap! Change a few things up and try submitting again. <a href="#">Link</a></p> </div> <div class="alert alert-success"> <button type="button" class="close" data-dismiss="alert">×</button> <p>Well done! You successfully read this important alert message. <a href="#">Link</a></p> </div> <div class="alert alert-info"> <button type="button" class="close" data-dismiss="alert">×</button> <p>Heads up! This alert needs your attention, but it's not super important. <a href="#">Link</a></p> </div> </div> </div><!-- alerts row end //--> <!-- PROGRESS BARS //--> <div class="row"> <div class="col-lg-12 page-header"> <h2>Progress Bars</h2> </div> </div> <div class="row"> <!-- Default Bars //--> <div class="col-lg-12"> <h3>Default Bars</h3> <div class="progress"> <div class="progress-bar progress-bar-info" style="width: 20%"></div> </div> <div class="progress"> <div class="progress-bar progress-bar-success" style="width: 40%"></div> </div> <div class="progress"> <div class="progress-bar progress-bar-warning" style="width: 60%"></div> </div> <div class="progress"> <div class="progress-bar progress-bar-danger" style="width: 80%"></div> </div> </div> <!-- Striped Bars //--> <div class="col-lg-12"> <h3>Striped Bars</h3> <div class="progress progress-striped active"> <div class="progress-bar progress-bar-info" style="width: 20%"></div> </div> <div class="progress progress-striped"> <div class="progress-bar progress-bar-success" style="width: 40%"></div> </div> <div class="progress progress-striped"> <div class="progress-bar progress-bar-warning" style="width: 60%"></div> </div> <div class="progress progress-striped"> <div class="progress-bar progress-bar-danger" style="width: 80%"></div> </div> </div> </div><!-- progress bars end //--> <!-- Thumbnails //--> <div class="row"> <div class="col-lg-12 page-header"> <h2 id="nav-thumbs">Thumbnails</h2> </div> </div> <div class="row"> <div class="col-lg-12"> <h3>Default</h3> </div> </div> <div class="row"> <div class="col-lg-3"> <a href="#" class="thumbnail"> <img src="http://placekitten.com/300/300" alt="" /> </a> </div> <div class="col-lg-3"> <a href="#" class="thumbnail"> <img src="http://placekitten.com/300/300" alt="" /> </a> </div> <div class="col-lg-3"> <a href="#" class="thumbnail"> <img src="http://placekitten.com/300/300" alt="" /> </a> </div> <div class="col-lg-3"> <a href="#" class="thumbnail"> <img src="http://placekitten.com/300/300" alt="" /> </a> </div> </div> <div class="row"> <div class="col-lg-12"> <h3>Custom Content</h3> </div> </div> <div class="row"> <div class="col-lg-4"> <div class="thumbnail"> <img src="http://placekitten.com/500/200" alt="" /> <div class="caption"> <h3>Thumbnail Label</h3> <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p> <p><a href="#" class="btn btn-primary">Action</a> <a href="#" class="btn btn-default">Action</a></p> </div> </div> </div> <div class="col-lg-4"> <div class="thumbnail"> <img src="http://placekitten.com/500/200" alt="" /> <div class="caption"> <h3>Thumbnail Label</h3> <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p> <p><a href="#" class="btn btn-primary">Action</a> <a href="#" class="btn btn-default">Action</a></p> </div> </div> </div> <div class="col-lg-4"> <div class="thumbnail"> <img src="http://placekitten.com/500/200" alt="" /> <div class="caption"> <h3>Thumbnail Label</h3> <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p> <p><a href="#" class="btn btn-primary">Action</a> <a href="#" class="btn btn-default">Action</a></p> </div> </div> </div> </div> <!-- MEDIA OBJECT //--> <div class="row"> <div class="col-lg-12 page-header"> <h2 id="nav-media">Media Object</h2> </div> </div> <div class="row"> <div class="col-lg-6"> <div class="media"> <a class="pull-left" href="#"> <img class="media-object" src="http://placekitten.com/40/40" alt="" /> </a> <div class="media-body"> <h4 class="media-heading">Media Heading</h4> Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus. </div> </div> <div class="media"> <a class="pull-left" href="#"> <img class="media-object" src="http://placekitten.com/40/40" alt="" /> </a> <div class="media-body"> <h4 class="media-heading">Media Heading</h4> Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus. </div> </div> <div class="media"> <a class="pull-left" href="#"> <img class="media-object" src="http://placekitten.com/40/40" alt="" /> </a> <div class="media-body"> <h4 class="media-heading">Media Heading</h4> Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus. </div> </div> </div> <div class="col-lg-6"> <div class="media"> <a class="pull-left" href="#"> <img class="media-object" src="http://placekitten.com/40/40" alt="" /> </a> <div class="media-body"> <h4 class="media-heading">Media Heading</h4> Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus. </div> </div> <div class="media"> <a class="pull-left" href="#"> <img class="media-object" src="http://placekitten.com/40/40" alt="" /> </a> <div class="media-body"> <h4 class="media-heading">Media Heading</h4> Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus. </div> </div> <div class="media"> <a class="pull-left" href="#"> <img class="media-object" src="http://placekitten.com/40/40" alt="" /> </a> <div class="media-body"> <h4 class="media-heading">Media Heading</h4> Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus. </div> </div> </div> </div> <!-- LIST GROUP //--> <div class="row"> <div class="col-lg-12 page-header"> <h2 id="nav-list-groups">List Groups</h2> </div> </div> <div class="row"> <div class="col-lg-6"> <!-- BASIC LIST GROUP //--> <h3>Basic List Group</h3> <ul class="list-group"> <li class="list-group-item">Cras justo odio</li> <li class="list-group-item">Dapibus ac facilisis in</li> <li class="list-group-item">Morbi leo risus</li> <li class="list-group-item">Porta ac consectetur ac</li> <li class="list-group-item">Vestibulum at eros</li> </ul> </div> <div class="col-lg-6"> <!-- LIST GROUP WITH BADGES //--> <h3>With Badges</h3> <ul class="list-group"> <li class="list-group-item"><span class="badge">1</span> Cras justo odio</li> <li class="list-group-item"><span class="badge">3</span> Dapibus ac facilisis in</li> <li class="list-group-item"><span class="badge">10</span> Morbi leo risus</li> <li class="list-group-item"><span class="badge">6</span> Porta ac consectetur ac</li> <li class="list-group-item"><span class="badge">800</span> Vestibulum at eros</li> </ul> </div> </div> <div class="row"> <div class="col-lg-6"> <!-- LINKED LIST GROUP //--> <h3>Linked List Group</h3> <div class="list-group"> <a href="#" class="list-group-item active">Cras justo odio</a> <a href="#" class="list-group-item">Dapibus ac facilisis in</a> <a href="#" class="list-group-item">Morbi leo risus</a> <a href="#" class="list-group-item">Porta ac consectetur ac</a> <a href="#" class="list-group-item">Vestibulum at eros</a> </div> </div> <div class="col-lg-6"> <!-- CUSTOM CONTENT LIST GROUP //--> <h3>Custom Content</h3> <div class="list-group"> <a href="#" class="list-group-item active"> <h4 class="list-group-item-heading">List group item heading</h4> <p class="list-group-item-text">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p> </a> <a href="#" class="list-group-item"> <h4 class="list-group-item-heading">List group item heading</h4> <p class="list-group-item-text">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p> </a> <a href="#" class="list-group-item"> <h4 class="list-group-item-heading">List group item heading</h4> <p class="list-group-item-text">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p> </a> </div> </div> </div> <!-- PANELS //--> <div class="row"> <div class="col-lg-12 page-header"> <h2 id="nav-panels">Panels</h2> </div> </div> <div class="row"> <div class="col-lg-4"> <h3>Basic Panel</h3> <div class="panel panel-default"> <div class="panel-body"> Basic panel example </div> </div> </div> <div class="col-lg-4"> <h3>Panel with Header</h3> <div class="panel panel-default"> <div class="panel-heading">Panel heading</div> <div class="panel-body"> Panel content </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h3 class="panel-title">Panel title</h3> </div> <div class="panel-body"> Panel content </div> </div> </div> <div class="col-lg-4"> <h3>Panel with Footer</h3> <div class="panel panel-default"> <div class="panel-body"> Panel content </div> <div class="panel-footer"> Panel footer </div> </div> </div> </div> <div class="row"> <div class="col-lg-6"> <h3>Contextual Alternatives</h3> <div class="panel panel-primary"> <div class="panel-heading">Panel heading</div> <div class="panel-body">Panel content</div> </div> <div class="panel panel-success"> <div class="panel-heading">Panel heading</div> <div class="panel-body">Panel content</div> </div> <div class="panel panel-warning"> <div class="panel-heading">Panel heading</div> <div class="panel-body">Panel content</div> </div> <div class="panel panel-danger"> <div class="panel-heading">Panel heading</div> <div class="panel-body">Panel content</div> </div> <div class="panel panel-info"> <div class="panel-heading">Panel heading</div> <div class="panel-body">Panel content</div> </div> </div> <div class="col-lg-6"> <h3>With List Groups</h3> <div class="panel panel-default"> <div class="panel-heading">Panel Heading</div> <div class="panel-body"> <p>Some default panel content here. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.</p> </div> <!-- list group //--> <ul class="list-group"> <li class="list-group-item">Cras justo odio</li> <li class="list-group-item">Dapibus ac facilisis in</li> <li class="list-group-item">Morbi leo risus</li> <li class="list-group-item">Porta ac consectetur ac</li> <li class="list-group-item">Vestibulum at eros</li> </ul> </div> </div> </div> <!-- WELLS //--> <div class="row"> <div class="col-lg-12 page-header"> <h2 id="nav-wells">Wells</h2> </div> </div> <div class="row"> <div class="col-lg-4"> <h3>Default</h3> <div class="well">Use the well...</div> </div> <div class="col-lg-4"> <h3>Large</h3> <div class="well well-large">Use the well...</div> </div> <div class="col-lg-4"> <h3>Small</h3> <div class="well well-small">Use the well...</div> </div> </div> <!-- MODAL //--> <div class="row"> <div class="col-lg-12 page-header"> <h2 id="nav-modal">Modal</h2> </div> </div> <div class="row"> <div class="col-lg-12"> <a data-toggle="modal" href="#myModal" class="btn btn-primary btn-lg">Launch demo modal</a> <div class="modal fade" id="myModal"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title">Modal title</h4> </div> <div class="modal-body"> Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div><!-- /.modal-content //--> </div><!-- /.modal-dialog //--> </div><!-- /.modal //--> </div> </div> <!-- TOOLTIPS //--> <div class="row"> <div class="col-lg-12 page-header"> <h2 id="nav-tooltip">Tooltip</h2> </div> </div> <div class="row"> <div class="col-lg-3"> <a data-toggle="tooltip" title="top tooltip" id="tooltip-top">Tooltip</a> </div> <div class="col-lg-3"> <a data-toggle="tooltip" title="left tooltip" data-placement="left" id="tooltip-left">Left Tooltip</a> </div> <div class="col-lg-3"> <a data-toggle="tooltip" title="bottom tooltip" data-placement="bottom" id="tooltip-bottom">Bottom Tooltip</a> </div> <div class="col-lg-3"> <a data-toggle="tooltip" title="right tooltip" data-placement="right" id="tooltip-right">Right Tooltip</a> </div> </div> <!-- COLLAPSE / ACCORDION //--> <div class="row"> <div class="col-lg-12 page-header"> <h2 id="nav-accordion">Collapse</h2> </div> </div> <div class="row"> <div class="col-lg-12"> <div class="panel-group" id="accordion"> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseOne"> Accordion group 1 </a> </h4> </div> <div id="collapseOne" class="panel-collapse collapse in"> <div class="panel-body"> stuff </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo"> Accordion group 2 </a> </h4> </div> <div id="collapseTwo" class="panel-collapse collapse"> <div class="panel-body"> stuff </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseThree"> Accordion group 3 </a> </h4> </div> <div id="collapseThree" class="panel-collapse collapse"> <div class="panel-body"> stuff </div> </div> </div> </div><!-- #accordion end //--> </div> </div> <!-- CAROUSEL //--> <div class="row"> <div class="col-lg-12 page-header"> <h2 id="nav-carousel">Carousel</h2> </div> </div> <div class="row"> <div class="col-lg-12"> <div id="carousel-example-generic" class="carousel slide"> <!-- Indicators //--> <ol class="carousel-indicators"> <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li> <li data-target="#carousel-example-generic" data-slide-to="1"></li> <li data-target="#carousel-example-generic" data-slide-to="2"></li> </ol> <!-- Wrapper for slides --> <div class="carousel-inner"> <div class="item active"> <img src="http://placekitten.com/1200/600" alt=""> <div class="carousel-caption"> <h3>Caption 1</h3> <p>scotch, scothity, scotch, scotch</p> </div> </div> <div class="item"> <img src="http://placekitten.com/1200/600" alt=""> <div class="carousel-caption"> <h3>Caption 2</h3> <p>scotch, scothity, scotch, scotch</p> </div> </div> <div class="item"> <img src="http://placekitten.com/1200/600" alt=""> <div class="carousel-caption"> <h3>Caption 3</h3> <p>scotch, scothity, scotch, scotch</p> </div> </div> </div> <!-- Controls --> <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev"> <span class="icon-prev"></span> </a> <a class="right carousel-control" href="#carousel-example-generic" data-slide="next"> <span class="icon-next"></span> </a> </div><!-- carousel end //--> </div> </div> <div class="row footer"> <div class="col-lg-12"> <p>footer</p> </div> </div> </div>

/* https://github.com/cardeo/cardeostrap TYPOGRAPHY */ body{background:#fff;font-family:"Helvetica Neue",helvetica,arial,verdana,sans-serif;font-size:16px;line-height:1.428571429;color:#333;padding-top:2em}ul,ol{margin-bottom:1.5em;margin-left:2em}ul.unstyled,ul.inline{margin-left:0;padding-left:0}li{line-height:1.428571429}ul.inline li{margin-right:1em;display:inline-block}ul.inline li.right{margin-left:1em}a,a:link,a:visited{color:#3498db;text-decoration:none}a:hover{color:#232323;text-decoration:underline}p{margin-bottom:1.5em}hr{margin:1.5em 0;border-top:1px solid #bdc3c7;border-bottom:0}h1,h2,h3,h4,h5,h6{font-family:"Helvetica Neue",helvetica,arial,verdana,sans-serif;font-weight:400}h1{font-size:2em}h2{font-size:1.75em}h3{font-size:1.5em}h4{font-size:1.313em}h5{font-size:1.125em}h6{font-size:1em}h1 small,h2 small,h3 small,h4 small,h5 small,h6 small{font-size:.75em;color:#bdc3c7}h1,h2,h3,h4,h5,h6{margin:.5em 0}h1,h2,h3,h4,h5,h6{color:#333}blockquote{color:#333}blockquote.pull-right{float:none;padding:1em;border:0;text-align:right}small,.small{font-size:.75em;color:#bdc3c7}code,pre{padding:0 .5em .19999999999999996em;font-size:1em;color:#e74c3c;-moz-border-radius:5px;-ms-border-radius:5px;border-radius:5px}code{padding:.19999999999999996em .5em;background-color:#ecf0f1;color:#e74c3c;border:0}pre{color:#3498db;padding:1em;margin:.75em 0;font-size:1em;line-height:1.428571429;background-color:#ecf0f1;border:0;-moz-border-radius:5px;-ms-border-radius:5px;border-radius:5px}.hero-unit{padding:1em;font-size:1em;line-height:1.428571429;background:#333;color:#fff;border:0;margin-bottom:1em;-moz-border-radius:5px;-ms-border-radius:5px;border-radius:5px}.hero-unit h1{font-size:3em;margin:0;line-height:1.178571429;color:#fff}.text-muted{color:#bdc3c7}.text-primary{color:#333}.text-warning{color:#f1c40f}.text-danger{color:#e74c3c}.text-success{color:#2ecc71}.text-info{color:#1abc9c}.container-fluid{margin:0 4em}.form-control{color:#333;background:#fff;border:solid 1px #bdc3c7;-moz-box-shadow:none;-webkit-box-shadow:none;box-shadow:none;-moz-border-radius:5px;-ms-border-radius:5px;border-radius:5px;-moz-transition:background .1s linear;-webkit-transition:background .1s linear;transition:background .1s linear}legend{font-family:"Helvetica Neue",helvetica,arial,verdana,sans-serif;color:#333;border-bottom:1px solid #bdc3c7}fieldset{margin-bottom:2em}fieldset:last-child{margin:0}input,select,textarea,input[type="text"],input[type="password"],input[type="datetime"],input[type="datetime-local"],input[type="date"],input[type="month"],input[type="time"],input[type="week"],input[type="number"],input[type="email"],input[type="url"],input[type="search"],input[type="tel"],input[type="color"],.uneditable-input{background-color:#fff;border:1px solid #bdc3c7;-moz-border-radius:5px;-ms-border-radius:5px;border-radius:5px;-moz-box-shadow:none;-webkit-box-shadow:none;box-shadow:none}select{border:1px solid #bdc3c7}input:focus,textarea:focus,select:focus,textarea:focus,input[type="text"]:focus,input[type="password"]:focus,input[type="datetime"]:focus,input[type="datetime-local"]:focus,input[type="date"]:focus,input[type="month"]:focus,input[type="time"]:focus,input[type="week"]:focus,input[type="number"]:focus,input[type="email"]:focus,input[type="url"]:focus,input[type="search"]:focus,input[type="tel"]:focus,input[type="color"]:focus,.uneditable-input:focus{border-color:#3498db;color:#333;-moz-box-shadow:none!important;-webkit-box-shadow:none!important;box-shadow:none!important}input[type="radio"]:focus,input[type="checkbox"]:focus,select:focus{outline:thin dotted #3498db;outline:1px auto -webkit-focus-ring-color;-moz-box-shadow:none;-webkit-box-shadow:none;box-shadow:none}input[type="file"]{border:0}.help-block{font-size:.875em;color:#bdc3c7}form.form-inline select,form.form-inline input[type="text"],form.form-inline input[type="password"],form.form-inline input[type="datetime"],form.form-inline input[type="datetime-local"],form.form-inline input[type="date"],form.form-inline input[type="month"],form.form-inline input[type="time"],form.form-inline input[type="week"],form.form-inline input[type="number"],form.form-inline input[type="email"],form.form-inline input[type="url"],form.form-inline input[type="search"],form.form-inline input[type="tel"],form.form-inline input[type="color"]{width:120px}form.form-search{background:transparent;padding:0}form small{padding-left:.5em}.input-group-addon{background:#3498db;color:#fff;border-color:#3498db}table,.table{margin-bottom:1.5em;background:#fff}th,.table th,.table th{padding:1em;line-height:1.428571429}td,.table td,.table td{padding:1em;line-height:1.428571429;vertical-align:middle;-moz-transition:background .1s linear;-webkit-transition:background .1s linear;transition:background .1s linear}caption{font-weight:700;padding:1em;border:1px solid #bdc3c7;border-bottom:0}.table-striped tbody>tr:nth-child(odd){background:#ecf0f1}.table-hover tbody tr:hover td,.table-hover tbody tr:hover th,.table-striped.table-hover tbody tr:hover td,.table-striped.table-hover tbody tr:hover th{background-color:#bdc3c7;-moz-transition:background .1s linear;-webkit-transition:background .1s linear;transition:background .1s linear}.table-condensed th,.table-condensed td,.table-striped.table-condensed td,.table-striped.table-condensed th{padding:.5em;font-size:.857em}.table-striped tbody>tr:nth-child(odd)>td,.table-striped tbody>tr:nth-child(odd)>th{background-color:transparent}.table-bordered th,.table-bordered td{border:#bdc3c7 1px solid;border-top:0}th.center,td.center{text-align:center}th.right,td.right{text-align:right}th{white-space:nowrap}.table>thead>tr>td.success,.table>tbody>tr>td.success,.table>tfoot>tr>td.success,.table>thead>tr>th.success,.table>tbody>tr>th.success,.table>tfoot>tr>th.success,.table>thead>tr.success>td,.table>tbody>tr.success>td,.table>tfoot>tr.success>td,.table>thead>tr.success>th,.table>tbody>tr.success>th,.table>tfoot>tr.success>th{background:#27ae60;border-color:#27ae60;color:#fff}.table>thead>tr>td.danger,.table>tbody>tr>td.danger,.table>tfoot>tr>td.danger,.table>thead>tr>th.danger,.table>tbody>tr>th.danger,.table>tfoot>tr>th.danger,.table>thead>tr.danger>td,.table>tbody>tr.danger>td,.table>tfoot>tr.danger>td,.table>thead>tr.danger>th,.table>tbody>tr.danger>th,.table>tfoot>tr.danger>th{background:#c0392b;border-color:#c0392b;color:#fff}.table>thead>tr>td.warning,.table>tbody>tr>td.warning,.table>tfoot>tr>td.warning,.table>thead>tr>th.warning,.table>tbody>tr>th.warning,.table>tfoot>tr>th.warning,.table>thead>tr.warning>td,.table>tbody>tr.warning>td,.table>tfoot>tr.warning>td,.table>thead>tr.warning>th,.table>tbody>tr.warning>th,.table>tfoot>tr.warning>th{background:#f39c12;border-color:#f39c12;color:#fff}.table>thead>tr>td.active,.table>tbody>tr>td.active,.table>tfoot>tr>td.active,.table>thead>tr>th.active,.table>tbody>tr>th.active,.table>tfoot>tr>th.active,.table>thead>tr.active>td,.table>tbody>tr.active>td,.table>tfoot>tr.active>td,.table>thead>tr.active>th,.table>tbody>tr.active>th,.table>tfoot>tr.active>th{background-color:#ecf0f1;border-color:#bdc3c7}.btn{background-color:#fff;border:#bdc3c7 solid 1px;color:#333;cursor:pointer;font-size:.875em;display:inline-block;margin-bottom:0;outline:0;text-decoration:none;white-space:nowrap;text-transform:uppercase;text-align:center;text-shadow:none;background-image:none;font-family:"Helvetica Neue",helvetica,arial,verdana,sans-serif;font-weight:700;-moz-border-radius:5px;-ms-border-radius:5px;border-radius:5px;-moz-box-shadow:none;-webkit-box-shadow:none;box-shadow:none;-moz-transition:background .1s linear;-webkit-transition:background .1s linear;transition:background .1s linear}.btn:hover,.btn:active{background:#ecf0f1;color:#333;text-decoration:none;-moz-transition:background .1s linear;-webkit-transition:background .1s linear;transition:background .1s linear}.btn-default,a.btn-default{border:1px solid #bdc3c7;color:#333;background-color:#fff}.btn-default:hover,.btn-default:active{border:1px solid #bdc3c7;color:#333;background:#ecf0f1}.btn-primary,a.btn-primary{border:1px solid #3498db;color:#fff;background:#3498db}.btn-primary:hover,.btn-primary:active{border:1px solid #2980b9;color:#fff;background:#2980b9}.btn-info,a.btn-info{border:1px solid #1abc9c;color:#fff;background:#1abc9c}.btn-info:hover,.btn-info:active{border:1px solid #16a085;color:#fff;background:#16a085}.btn-success,a.btn-success{border:1px solid #2ecc71;color:#fff;background:#2ecc71}.btn-success:hover,.btn-success:active{border:1px solid #27ae60;color:#fff;background:#27ae60}.btn-warning,a.btn-warning{border:1px solid #f1c40f;color:#fff;background:#f1c40f}.btn-warning:hover,.btn-warning:active{border:1px solid #f39c12;color:#fff;background:#f39c12}.btn-danger,a.btn-danger{border:1px solid #e74c3c;color:#fff;background:#e74c3c}.btn-danger:hover,.btn-danger:active{border:1px solid #c0392b;color:#fff;background:#c0392b}.btn-inverse,a.btn-inverse{border:1px solid #34495e;color:#fff;background:#34495e}.btn-inverse:hover,.btn-inverse:active{border:1px solid #2c3e50;color:#fff;background:#2c3e50}.btn-link,.btn-link:hover,.btn-link:active{border:0;background:transparent}.btn-xs{font-size:.625em}.btn-sm{font-size:.75em}.btn-lg{font-size:1.5em}.btn.disabled,.btn.disabled:hover,.btn.disabled:active{background:#bdc3c7;color:#95a5a6;cursor:default}a [class^="icon-"],a [class*=" icon-"]{text-decoration:none}.dropdown{position:relative}.dropdown-menu{border:1px solid #bdc3c7;background:#fff;-moz-border-radius:5px;-ms-border-radius:5px;border-radius:5px;-moz-box-shadow:none;-webkit-box-shadow:none;box-shadow:none;-webkit-margin-before:0}.dropdown-menu li>a:hover,.dropdown-menu li>a:focus,.dropdown-submenu:hover>a{color:#fff;background-color:#3498db;background-image:none}.dropdown-menu .divider{background-color:#bdc3c7}.caret{border-top:4px solid #fff}.dropdown-header{color:#bdc3c7;font-size:.75em;padding:.5em}button.dropdown-toggle{min-width:0}.nav-tabs{border-bottom:solid 1px #bdc3c7}ul.nav-tabs,ul.nav-pills{margin:0}.nav-tabs>li>a{border:solid #bdc3c7 transparent;-webkit-border-top-left-radius:5px;-webkit-border-top-right-radius:5px;-webkit-border-bottom-left-radius:0;-webkit-border-bottom-right-radius:0;-moz-border-radius-topleft:5px;-moz-border-radius-bottomleft:0;-moz-border-radius-topright:5px;-moz-border-radius-bottomright:0;border-top-left-radius:5px;border-top-right-radius:5px;border-bottom-left-radius:0;border-bottom-right-radius:0;-moz-transition:background .1s linear;-webkit-transition:background .1s linear;transition:background .1s linear}.nav-tabs>li.active>a,.nav-tabs>li.active>a:hover,.nav-tabs>li.active>a:focus{color:#333;background:#fff;border-top:solid 1px #bdc3c7;border-left:solid 1px #bdc3c7;border-right:solid 1px #bdc3c7;border-bottom:solid 1px transparent}.nav-tabs>li>a:hover{border-color:none;border-bottom-color:#bdc3c7}.nav-tabs .dropdown-menu,.nav-pills .dropdown-menu{border-color:#bdc3c7}.nav-tabs .dropdown-menu .divider,.nav-pills .dropdown-menu .divider{border-color:#bdc3c7;background:#bdc3c7}.nav>li>a:hover,.nav>li>a:focus{background-color:#ecf0f1;-moz-transition:background .1s linear;-webkit-transition:background .1s linear;transition:background .1s linear}.nav-pills>li.active>a,.nav-pills>li.active>a:hover{color:#fff;background-color:#3498db;-moz-transition:background .1s linear;-webkit-transition:background .1s linear;transition:background .1s linear}.nav-tabs.nav-justified>li>a{border-bottom:solid 1px #bdc3c7}.navbar{background:#ecf0f1}.navbar-nav>.active>a,.navbar-nav>.active>a:hover,.navbar-nav>.active>a:focus{color:#fff;background:#3498db}.navbar-brand a{color:#bdc3c7}.navbar-brand:hover,.navbar-brand:focus{color:#333}.navbar-nav>li>a{color:#95a5a6}.navbar-nav>li>a:hover,.navbar-nav>li>a:focus{color:#fff;background:#3498db}.navbar-form-width{width:200px}ul.navbar-nav{margin-left:0}.navbar-nav>li>.dropdown-menu{border:solid #bdc3c7 1px}.navbar-nav .dropdown-menu .divider{border-color:#bdc3c7;background:#bdc3c7}.navbar-nav>.open>a,.navbar-nav>.open>a:hover,.navbar-nav>.open>a:focus{color:#fff;background-color:#3498db}.navbar-inverse{background:#333}.navbar-inverse .navbar-nav>.open>a,.navbar-inverse .navbar-nav>.open>a:hover,.navbar-inverse .navbar-nav>.open>a:focus{background:#3498db}ul.breadcrumb{margin-left:0}.breadcrumb li.active a{color:#333}.pager li>a,.pager li>span{color:#333;background:#fff;border:solid 1px #bdc3c7}.pager li>a:hover,.pager li>a:focus{color:#333;background-color:#ecf0f1}.label,.badge{background:#fff}.label-default,.badge-default{color:#333;border:1px #bdc3c7 solid}.label-primary,.badge-primary{background:#3498db}.label-success,.badge-success{background:#2ecc71}.label-warning,.badge-warning{background:#f1c40f}.label-danger,.badge-danger{background:#e74c3c}.label-info,.badge-info{background:#1abc9c}.jumbotron{background-color:#ecf0f1}.jumbotron h1{font-weight:700;font-size:3em;letter-spacing:-1px}.progress{margin-bottom:1em;background:#ecf0f1;-moz-border-radius:5px;-ms-border-radius:5px;border-radius:5px;-moz-box-shadow:none;-webkit-box-shadow:none;box-shadow:none}.progress-bar{font-size:1em;color:#fff;-moz-box-shadow:none;-webkit-box-shadow:none;box-shadow:none;-moz-transition:background .1s linear;-webkit-transition:background .1s linear;transition:background .1s linear}.progress-bar-info,.progress-striped .progress-bar-info{background-color:#1abc9c}.progress-bar-success,.progress-striped .progress-bar-success{background-color:#2ecc71}.progress-bar-warning,.progress-striped .progress-bar-warning{background-color:#f1c40f}.progress-bar-danger,.progress-striped .progress-bar-danger{background-color:#e74c3c}.thumbnail,.img-thumbnail{border:1px solid #bdc3c7;-moz-border-radius:5px;-ms-border-radius:5px;border-radius:5px;-moz-transition:background .1s linear;-webkit-transition:background .1s linear;transition:background .1s linear}.thumbnail .caption p:last-child{margin-bottom:0}a.thumbnail:hover,a.thumbnail:focus{border:1px solid #3498db}ul.list-group{margin-left:0}.list-group-item{padding-top:1em;padding-right:2em;padding-bottom:1em;padding-left:1em;background:#fff;border:1px solid #bdc3c7}a.list-group-item.active,a.list-group-item.active:hover{background-color:#3498db;color:#fff}a.list-group-item.active .list-group-item-text{color:#fff}a.list-group-item:hover,a.list-group-item:focus{background:#ecf0f1}.panel{margin-bottom:1em;background-color:#fff;border:1px solid #bdc3c7;-moz-border-radius:5px;-ms-border-radius:5px;border-radius:5px;-moz-box-shadow:none;-webkit-box-shadow:none;box-shadow:none}.panel-heading{padding:1em;background:#ecf0f1;border-bottom:1px solid #bdc3c7;-moz-border-radius:5px 5px 0 0;border-radius:5px 5px 0 0}.panel-title{font-size:1em}.panel-footer{padding:1em;background-color:#ecf0f1;border-top:1px solid #bdc3c7;-moz-border-radius:0 0 5px 5px;border-radius:0 0 5px 5px}.panel .list-group .list-group-item:first-child{-moz-border-radius:0;border-radius:0}.panel .list-group .list-group-item{border-width:1px 0}.list-group-item:last-child{margin-bottom:0;-moz-border-radius:0 0 5px 5px;border-radius:0 0 5px 5px}.panel .list-group .list-group-item:last-child{border-bottom:0}.panel-primary{border-color:#3498db}.panel-primary .panel-heading{color:#fff;background:#3498db;border-color:#3498db}.panel-success{border-color:#2ecc71}.panel-success .panel-heading{color:#fff;background-color:#2ecc71;border-color:#2ecc71}.panel-warning{border-color:#f1c40f}.panel-warning .panel-heading{color:#fff;background-color:#f1c40f;border-color:#f1c40f}.panel-danger{border-color:#e74c3c}.panel-danger .panel-heading{color:#fff;background-color:#e74c3c;border-color:#e74c3c}.panel-info{border-color:#1abc9c}.panel-info .panel-heading{color:#fff;background-color:#1abc9c;border-color:#1abc9c}.well{padding:1em;margin-bottom:1em;background-color:#ecf0f1;border:1px solid #bdc3c7;-moz-border-radius:5px;-ms-border-radius:5px;border-radius:5px}.well-large{padding:1.5em;-moz-border-radius:5px;-ms-border-radius:5px;border-radius:5px}.well-small{padding:.5em;-moz-border-radius:5px;-ms-border-radius:5px;border-radius:5px}.tooltip{font-size:1em}.tooltip-inner{padding:.5em 1em;-moz-border-radius:5px;-ms-border-radius:5px;border-radius:5px}.accordion{margin-bottom:1em}.accordion-group{border:solid 1px #bdc3c7;-moz-border-radius:5px;-ms-border-radius:5px;border-radius:5px}.accordion-heading .accordion-toggle{padding:1em}.accordion-inner{padding:1em;border-top:1px solid #bdc3c7}.carousel-indicators li{border:1px solid #fff}.carousel-caption{color:#fff}.carousel h3{color:#fff}.alert,.alert-danger,.alert-success,.alert-info,.alert-block{color:#fff;text-shadow:none;border:0;padding:1em;margin-bottom:1em;-moz-border-radius:5px;-ms-border-radius:5px;border-radius:5px}.alert{background-color:#f1c40f}.alert-danger{background-color:#e74c3c}.alert-success{background-color:#2ecc71}.alert-info{background-color:#1abc9c}.alert .close{position:static}.alert p:last-child{margin-bottom:0}.alert a{color:#f39c12}.alert-danger a{color:#c0392b}.alert-success a{color:#27ae60}.alert-info a{color:#16a085}.alert a:hover{color:#fff}.has-warning .help-block,.has-warning .control-label{color:#f1c40f}.has-warning .form-control{border-color:#f1c40f;-moz-box-shadow:none;-webkit-box-shadow:none;box-shadow:none}.has-error .help-block,.has-error .control-label{color:#e74c3c}.has-error .form-control{border-color:#e74c3c;-moz-box-shadow:none;-webkit-box-shadow:none;box-shadow:none}.has-success .help-block,.has-success .control-label{color:#2ecc71}.has-success .form-control{border-color:#2ecc71;-moz-box-shadow:none;-webkit-box-shadow:none;box-shadow:none} /* This beautiful CSS-File has been crafted with LESS (lesscss.org) and compiled by simpLESS (wearekiss.com/simpless) */ /* for demo only */ .footer { border-top: 1px solid #ccc; margin-top: 40px; padding-top: 20px; padding-bottom: 100px; color: #ccc; } .leading { margin-bottom: 2em; } h1 { display: none; } h1#page-top, h1#demoh1, h1#jumboheader, h1#demoheader { display: block; }

$(document).ready(function(){ $('#drop1, #drop2, #drop3, #drop4, #drop5, #drop6, #drop7, #drop8, #drop9, #nav1, #nav2, #nav3').dropdown(); $('.navbar-responsive-collapse').collapse(); $('#tooltip-left, #tooltip-top, #tooltip-bottom, #tooltip-right').tooltip(); $('.carousel').carousel() });