<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 ---------->
<link rel="stylesheet" href="https://i.icomoon.io/public/temp/a15fb39f3e/UntitledProject/style.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<div class="navbar-wrapper">
<div class="container-fluid">
<nav class="navbar navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<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="#">Logo</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#" class="">Home</a></li>
<li class=" dropdown"><a href="#" class="dropdown-toggle " data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Departments <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">View Departments</a></li>
<li><a href="#">Add New</a></li>
</ul>
</li>
<li class=" dropdown"><a href="#" class="dropdown-toggle " data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Managers <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">View Managers</a></li>
<li><a href="#">Add New</a></li>
</ul>
</li>
<li class=" dropdown"><a href="#" class="dropdown-toggle active" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Staff <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">View Staff</a></li>
<li><a href="#">Add New</a></li>
<li><a href="#">Bulk Upload</a></li>
</ul>
</li>
<li class=" down"><a href="#" class="dropdown-toggle active" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">HR <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Change Time Entry</a></li>
<li><a href="#">Report</a></li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav pull-right">
<li class=" dropdown"><a href="#" class="dropdown-toggle active" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Signed in as <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Change Password</a></li>
<li><a href="#">My Profile</a></li>
</ul>
</li>
<li class=""><a href="#">Logout</a></li>
</ul>
</div>
</div>
</nav>
</div>
</div>
<div class="carousel fade-carousel slide" data-ride="carousel" data-interval="4000" id="bs-carousel">
<!-- Overlay -->
<div class="overlay"></div>
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#bs-carousel" data-slide-to="0" class="active"></li>
<li data-target="#bs-carousel" data-slide-to="1"></li>
<li data-target="#bs-carousel" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item slides active">
<div class="slide-1"></div>
<div class="hero">
<hgroup>
<h1>We are creative</h1>
<h3>Get start your next awesome project</h3>
</hgroup>
<button class="btn btn-hero btn-lg" role="button">See all features</button>
</div>
</div>
<div class="item slides">
<div class="slide-2"></div>
<div class="hero">
<hgroup>
<h1>We are smart</h1>
<h3>Get start your next awesome project</h3>
</hgroup>
<button class="btn btn-hero btn-lg" role="button">See all features</button>
</div>
</div>
<div class="item slides">
<div class="slide-3"></div>
<div class="hero">
<hgroup>
<h1>We are amazing</h1>
<h3>Get start your next awesome project</h3>
</hgroup>
<button class="btn btn-hero btn-lg" role="button">See all features</button>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row row-offcanvas row-offcanvas-right">
<div class="col-xs-12 col-sm-9">
<p class="pull-right visible-xs">
<button type="button" class="btn btn-primary btn-xs toggle-sidebar"><i class="fa fa-ellipsis-v"></i></button>
</p>
<div class="timeline-centered">
<article class="timeline-entry">
<div class="timeline-entry-inner">
<div class="timeline-date">10/02<br>2015</div>
<div class="timeline-icon bg-success">
<i class="icon-gift icon-timeline"></i>
</div>
<div class="timeline-label">
<div class="article-header">
<p class="article-title">Mais um teste de projeto</p>
<p class="text-right"><small class="text-muted"><i class="glyphicon glyphicon-time"></i> 11 hours ago via Twitter</small></p>
</div>
<div class="article-content">
<img src="http://themes.laborator.co/neon/assets/images/timeline-image-3.png" class="img-responsive article-thumbnail">
<p class="article-text"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magnam eos in vel, nesciunt expedita optio amet voluptatem est dolor ducimus sed ex, ab eum tenetur nisi possimus a consectetur mollitia.</p>
</div>
<div class="article-footer">
<div class="article-author">
<a href="#">Arber Nushi</a> <span>changed his</span> <a href="#">Profile Picture</a>
</div>
<div class="article-options text-right">
<a href="#"><span class="fa fa-trash-o"></span></a>
<a href="#"><span class="fa fa-eye"></span></a>
<a href="#"><span class="fa fa-pencil-square-o"></span></a>
</div>
</div>
</div>
</div>
</article>
<article class="timeline-entry">
<div class="timeline-entry-inner">
<div class="timeline-date">10/02<br>2015</div>
<div class="timeline-icon bg-primary">
<i class="icon-price-tags icon-timeline"></i>
</div>
<div class="timeline-label">
<div class="article-header">
<p class="article-title">Mais um teste de projeto</p>
<p class="text-right"><small class="text-muted"><i class="glyphicon glyphicon-time"></i> 11 hours ago via Twitter</small></p>
</div>
<div class="article-content">
<img src="http://themes.laborator.co/neon/assets/images/timeline-image-3.png" class="img-responsive article-thumbnail">
<p class="article-text"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magnam eos in vel, nesciunt expedita optio amet voluptatem est dolor ducimus sed ex, ab eum tenetur nisi possimus a consectetur mollitia.</p>
</div>
<div class="article-footer">
<div class="article-author">
<a href="#">Arber Nushi</a> <span>changed his</span> <a href="#">Profile Picture</a>
</div>
<div class="article-options text-right">
<a href="#"><span class="fa fa-trash-o"></span></a>
<a href="#"><span class="fa fa-eye"></span></a>
<a href="#"><span class="fa fa-pencil-square-o"></span></a>
</div>
</div>
</div>
</div>
</article>
<article class="timeline-entry">
<div class="timeline-entry-inner">
<div class="timeline-date">10/02<br>2015</div>
<div class="timeline-icon bg-warning">
</div>
<div class="timeline-label">
<div class="article-header">
<p class="article-title">Mais um teste de projeto</p>
<p class="text-right"><small class="text-muted"><i class="glyphicon glyphicon-time"></i> 11 hours ago via Twitter</small></p>
</div>
<div class="article-content">
<img src="http://themes.laborator.co/neon/assets/images/timeline-image-3.png" class="img-responsive article-thumbnail">
<p class="article-text"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magnam eos in vel, nesciunt expedita optio amet voluptatem est dolor ducimus sed ex, ab eum tenetur nisi possimus a consectetur mollitia.</p>
</div>
<div class="article-footer">
<div class="article-author">
<a href="#">Arber Nushi</a> <span>changed his</span> <a href="#">Profile Picture</a>
</div>
<div class="article-options text-right">
<a href="#"><span class="fa fa-trash-o"></span></a>
<a href="#"><span class="fa fa-eye"></span></a>
<a href="#"><span class="fa fa-pencil-square-o"></span></a>
</div>
</div>
</div>
</div>
</article>
<article class="timeline-entry begin">
<div class="timeline-entry-inner">
<div class="timeline-icon" style="-webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg);">
<i class="entypo-flight"></i> +
</div>
</div>
</article>
</div>
</div><!--/.col-xs-12.col-sm-9-->
<div class="col-xs-6 col-sm-3 sidebar-offcanvas" id="sidebar">
<div class="sidebar-item">
<div class="card hovercard">
<div class="cardheader"></div>
<div class="avatar">
<img alt="" src="http://lorempixel.com/100/100/people/9/">
</div>
<div class="info">
<div class="title">
<a target="_blank" href="http://scripteden.com/">Script Eden</a>
</div>
<div class="desc">Passionate designer</div>
<div class="desc">Curious developer</div>
<div class="desc">Tech geek</div>
</div>
<div class="bottom">
<a class="btn btn-primary btn-twitter btn-sm" href="https://twitter.com/webmaniac">
<i class="fa fa-twitter"></i>
</a>
<a class="btn btn-danger btn-sm" rel="publisher"
href="https://plus.google.com/+ahmshahnuralam">
<i class="fa fa-google-plus"></i>
</a>
<a class="btn btn-primary btn-sm" rel="publisher"
href="https://plus.google.com/shahnuralam">
<i class="fa fa-facebook"></i>
</a>
<a class="btn btn-warning btn-sm" rel="publisher" href="https://plus.google.com/shahnuralam">
<i class="fa fa-behance"></i>
</a>
</div>
</div>
</div>
<div class="sidebar-item">
<div class="list-group">
<a href="#" class="list-group-item active">Link</a>
<a href="#" class="list-group-item">Link</a>
<a href="#" class="list-group-item">Link</a>
<a href="#" class="list-group-item">Link</a>
<a href="#" class="list-group-item">Link</a>
<a href="#" class="list-group-item">Link</a>
<a href="#" class="list-group-item">Link</a>
<a href="#" class="list-group-item">Link</a>
<a href="#" class="list-group-item">Link</a>
<a href="#" class="list-group-item">Link</a>
</div>
</div>
Forked from <a href="http://bootsnipp.com/snippets/featured/single-column-timeline-dotted" target="_blank">here</a>
</div><!--/.sidebar-offcanvas-->
</div><!--/row-->
</div>
<!--
/*
* Bug report
* ----------------
*/
-->
<div class="feedback left">
<div class="tooltips">
<div class="btn-group dropup">
<button type="button" class="btn btn-primary dropdown-toggle btn-circle btn-lg" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fa fa-bug fa-2x" title="Report Bug"></i>
</button>
<ul class="dropdown-menu dropdown-menu-right dropdown-menu-form">
<li>
<div class="report">
<h2 class="text-center">Report Bug</h2>
<form class="doo" method="post" action="report.php">
<div class="col-sm-12">
<textarea required name="comment" class="form-control" placeholder="Please tell us what bug or issue you've found, provide as much detail as possible."></textarea>
<input name="screenshot" type="hidden" class="screen-uri">
<span class="screenshot pull-right"><i class="fa fa-camera cam" title="Take Screenshot"></i></span>
</div>
<div class="col-sm-12 clearfix">
<button class="btn btn-primary btn-block">Submit Report</button>
</div>
</form>
</div>
<div class="loading text-center hideme">
<h2>Please wait...</h2>
<h2><i class="fa fa-refresh fa-spin"></i></h2>
</div>
<div class="reported text-center hideme">
<h2>Thank you!</h2>
<p>Your submission has been received, we will review it shortly.</p>
<div class="col-sm-12 clearfix">
<button class="btn btn-success btn-block do-close">Close</button>
</div>
</div>
<div class="failed text-center hideme">
<h2>Oh no!</h2>
<p>It looks like your submission was not sent.<br><br><a href="mailto:">Try contacting us by the old method.</a></p>
<div class="col-sm-12 clearfix">
<button class="btn btn-danger btn-block do-close">Close</button>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
<script src="//cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>
/*
Fade content bs-carousel with hero headers
Code snippet by maridlcrmn (Follow me on Twitter @maridlcrmn) for Bootsnipp.com
Image credits: unsplash.com
*/
/********************************/
/* Fade Bs-carousel */
/********************************/
.fade-carousel {
position: relative;
height: 400px;
}
.fade-carousel .carousel-inner .item {
height: 400px;
}
.fade-carousel .carousel-indicators > li {
margin: 0 2px;
background-color: #f39c12;
border-color: #f39c12;
opacity: .7;
}
.fade-carousel .carousel-indicators > li.active {
width: 10px;
height: 10px;
opacity: 1;
}
/********************************/
/* Hero Headers */
/********************************/
.hero {
position: absolute;
top: 50%;
left: 50%;
z-index: 3;
color: #fff;
text-align: center;
text-transform: uppercase;
text-shadow: 1px 1px 0 rgba(0,0,0,.75);
-webkit-transform: translate3d(-50%,-50%,0);
-moz-transform: translate3d(-50%,-50%,0);
-ms-transform: translate3d(-50%,-50%,0);
-o-transform: translate3d(-50%,-50%,0);
transform: translate3d(-50%,-50%,0);
}
.hero h1 {
font-size: 6em;
font-weight: bold;
margin: 0;
padding: 0;
}
.fade-carousel .carousel-inner .item .hero {
opacity: 0;
-webkit-transition: 2s all ease-in-out .1s;
-moz-transition: 2s all ease-in-out .1s;
-ms-transition: 2s all ease-in-out .1s;
-o-transition: 2s all ease-in-out .1s;
transition: 2s all ease-in-out .1s;
}
.fade-carousel .carousel-inner .item.active .hero {
opacity: 1;
-webkit-transition: 2s all ease-in-out .1s;
-moz-transition: 2s all ease-in-out .1s;
-ms-transition: 2s all ease-in-out .1s;
-o-transition: 2s all ease-in-out .1s;
transition: 2s all ease-in-out .1s;
}
/********************************/
/* Overlay */
/********************************/
.overlay {
position: absolute;
width: 100%;
height: 100%;
z-index: 2;
background-color: #080d15;
opacity: .7;
}
/********************************/
/* Custom Buttons */
/********************************/
.btn.btn-lg {padding: 10px 40px;}
.btn.btn-hero,
.btn.btn-hero:hover,
.btn.btn-hero:focus {
color: #f5f5f5;
background-color: #1abc9c;
border-color: #1abc9c;
outline: none;
margin: 20px auto;
}
/********************************/
/* Slides backgrounds */
/********************************/
.fade-carousel .slides .slide-1,
.fade-carousel .slides .slide-2,
.fade-carousel .slides .slide-3 {
height: 400px;
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
}
.fade-carousel .slides .slide-1 {
background-image: url(https://ununsplash.imgix.net/photo-1416339134316-0e91dc9ded92?q=75&fm=jpg&s=883a422e10fc4149893984019f63c818);
}
.fade-carousel .slides .slide-2 {
background-image: url(https://ununsplash.imgix.net/photo-1416339684178-3a239570f315?q=75&fm=jpg&s=c39d9a3bf66d6566b9608a9f1f3765af);
}
.fade-carousel .slides .slide-3 {
background-image: url(https://ununsplash.imgix.net/photo-1416339276121-ba1dfa199912?q=75&fm=jpg&s=9bf9f2ef5be5cb5eee5255e7765cb327);
}
/********************************/
/* Media Queries */
/********************************/
@media screen and (min-width: 980px){
.hero { width: 980px; }
}
@media screen and (max-width: 640px){
.hero h1 { font-size: 4em; }
}
/*
* Timeline
* ----------------------
*/
body{
background: #EAEAEA;
}
img {
vertical-align: middle;
}
.img-responsive {
display: block;
height: auto;
max-width: 100%;
}
.img-rounded {
border-radius: 3px;
}
.img-thumbnail {
background-color: #fff;
border: 1px solid #ededf0;
border-radius: 3px;
display: inline-block;
height: auto;
line-height: 1.428571429;
max-width: 100%;
moz-transition: all .2s ease-in-out;
o-transition: all .2s ease-in-out;
padding: 2px;
transition: all .2s ease-in-out;
webkit-transition: all .2s ease-in-out;
}
.img-circle {
border-radius: 50%;
}
.timeline-centered {
position: relative;
margin-bottom: 30px;
}
.timeline-date {
position: absolute;
left: -40px;
font-size: 13px;
color: #A0A0A0;
text-align: center;
line-height: 21px;
font-weight: 500;
}
.timeline-centered:before, .timeline-centered:after {
content: " ";
display: table;
}
.timeline-centered:after {
clear: both;
}
.timeline-centered:before, .timeline-centered:after {
content: " ";
display: table;
}
.timeline-centered:after {
clear: both;
}
.timeline-centered:before {
content: '';
position: absolute;
display: block;
width: 10px;
background: #E0E0E0;
border-left: 1px solid #C1C1C1;
border-right: 1px solid #C1C1C1;
top: 20px;
bottom: 20px;
margin-left: 25px;
}
.timeline-centered .timeline-entry {
position: relative;
/*width: 50%;
float: right;*/
margin-top: 5px;
margin-left: 30px;
margin-bottom: 50px;
clear: both;
}
.timeline-centered .timeline-entry:before, .timeline-centered .timeline-entry:after {
content: " ";
display: table;
}
.timeline-centered .timeline-entry:after {
clear: both;
}
.timeline-centered .timeline-entry:before, .timeline-centered .timeline-entry:after {
content: " ";
display: table;
}
.timeline-centered .timeline-entry:after {
clear: both;
}
.timeline-centered .timeline-entry.begin {
margin-bottom: 0;
}
.timeline-centered .timeline-entry.left-aligned {
float: left;
}
.timeline-centered .timeline-entry.left-aligned .timeline-entry-inner {
margin-left: 0;
margin-right: -18px;
}
.timeline-centered .timeline-entry.left-aligned .timeline-entry-inner .timeline-time {
left: auto;
right: -100px;
text-align: left;
}
.timeline-centered .timeline-entry.left-aligned .timeline-entry-inner .timeline-icon {
float: right;
}
.timeline-centered .timeline-entry.left-aligned .timeline-entry-inner .timeline-label {
margin-left: 0;
margin-right: 70px;
}
.timeline-centered .timeline-entry.left-aligned .timeline-entry-inner .timeline-label:after {
left: auto;
right: 0;
margin-left: 0;
margin-right: -9px;
-moz-transform: rotate(180deg);
-o-transform: rotate(180deg);
-webkit-transform: rotate(180deg);
-ms-transform: rotate(180deg);
transform: rotate(180deg);
}
.timeline-centered .timeline-entry .timeline-entry-inner {
position: relative;
margin-left: -20px;
}
.timeline-centered .timeline-entry .timeline-entry-inner:before, .timeline-centered .timeline-entry .timeline-entry-inner:after {
content: " ";
display: table;
}
.timeline-centered .timeline-entry .timeline-entry-inner:after {
clear: both;
}
.timeline-centered .timeline-entry .timeline-entry-inner:before, .timeline-centered .timeline-entry .timeline-entry-inner:after {
content: " ";
display: table;
}
.timeline-centered .timeline-entry .timeline-entry-inner:after {
clear: both;
}
.timeline-centered .timeline-entry .timeline-entry-inner .timeline-time {
position: absolute;
left: -100px;
text-align: right;
padding: 10px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.timeline-centered .timeline-entry .timeline-entry-inner .timeline-time > span {
display: block;
}
.timeline-centered .timeline-entry .timeline-entry-inner .timeline-time > span:first-child {
font-size: 15px;
font-weight: bold;
}
.timeline-centered .timeline-entry .timeline-entry-inner .timeline-time > span:last-child {
font-size: 12px;
}
.timeline-centered .timeline-entry .timeline-entry-inner .timeline-icon {
background: #fff;
color: #737881;
display: block;
width: 40px;
height: 40px;
-webkit-background-clip: padding-box;
-moz-background-clip: padding;
background-clip: padding-box;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
text-align: center;
-moz-box-shadow: 0 0 0 5px #f5f5f6;
-webkit-box-shadow: 0 0 0 5px #f5f5f6;
box-shadow: 0 0 0 5px #f5f5f6;
line-height: 40px;
font-size: 15px;
float: left;
}
.timeline-centered .timeline-entry .timeline-entry-inner .timeline-icon.bg-primary {
background-color: #303641;
color: #fff;
border: 5px solid white;
box-shadow: 0 0 0 1px #303641;
}
.timeline-centered .timeline-entry .timeline-entry-inner .timeline-icon.bg-secondary {
background-color: #ee4749;
color: #fff;
border: 5px solid white;
box-shadow: 0 0 0 1px #ee4749;
}
.timeline-centered .timeline-entry .timeline-entry-inner .timeline-icon.bg-success {
background-color: #00a651;
color: #fff;
border: 5px solid white;
box-shadow: 0 0 0 1px #00a651;
}
.timeline-centered .timeline-entry .timeline-entry-inner .timeline-icon.bg-info {
background-color: #21a9e1;
color: #fff;
border: 5px solid white;
box-shadow: 0 0 0 1px #21a9e1;
}
.timeline-centered .timeline-entry .timeline-entry-inner .timeline-icon.bg-warning {
background-color: #fad839;
color: #fff;
border: 5px solid white;
box-shadow: 0 0 0 1px #fad839;
}
.timeline-centered .timeline-entry .timeline-entry-inner .timeline-icon.bg-danger {
background-color: #cc2424;
color: #fff;
border: 5px solid white;
box-shadow: 0 0 0 1px #cc2424;
}
.timeline-centered .timeline-entry .timeline-entry-inner .timeline-label {
position: relative;
background: #fff;
padding: 0;
margin-left: 60px;
-webkit-background-clip: padding-box;
-moz-background-clip: padding;
background-clip: padding-box;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
box-shadow: 0 0 3px #ADADAD;
}
.timeline-centered .timeline-entry .timeline-entry-inner .timeline-label:after {
content: '';
display: block;
position: absolute;
width: 0;
height: 0;
border-style: solid;
border-width: 9px 9px 9px 0;
border-color: transparent #fff transparent transparent;
left: 0;
top: 10px;
margin-left: -9px;
}
.timeline-centered .timeline-entry .timeline-entry-inner .timeline-label .article-header{
padding: 15px 20px;
}
.timeline-centered .timeline-entry .timeline-entry-inner .timeline-label .article-header .article-title{
color: #737881;
font-family: "Noto Sans",sans-serif;
font-size: 12px;
margin: 0;
line-height: 1.428571429;
}
.timeline-centered .timeline-entry .timeline-entry-inner .timeline-label .article-content{
padding: 15px 20px;
font-size: 0;
}
.timeline-centered .timeline-entry .timeline-entry-inner .timeline-label .article-content .article-thumbnail {
width: 30%;
display:inline-block;
}
.timeline-centered .timeline-entry .timeline-entry-inner .timeline-label .article-content .article-text {
color: #737881;
font-family: "Noto Sans",sans-serif;
font-size: 12px;
margin: 0;
padding: 0 0 0 20px;
line-height: 1.428571429;
width: 70%;
display:inline-block;
}
.timeline-centered .timeline-entry .timeline-entry-inner .article-footer{
border-top: 1px solid #E0E0E0;
padding: 15px 20px;
font-size: 0;
}
.timeline-centered .timeline-entry .timeline-entry-inner .article-footer .article-author{
width: 70%;
display: inline-block;
}
.timeline-centered .timeline-entry .timeline-entry-inner .article-footer .article-author a {
color: #4E5052;
font-weight: 600;
font-size: 15px;
}
.timeline-centered .timeline-entry .timeline-entry-inner .article-footer .article-author span {
font-size: 13px;
margin: 5px;
color: #969696;
}
.timeline-centered .timeline-entry .timeline-entry-inner .article-footer .article-options{
width: 30%;
display: inline-block;
font-size: 20px;
color: #C7C7C7;
}
.timeline-centered .timeline-entry .timeline-entry-inner .article-footer .article-options a{
color: #C7C7C7;
margin: 10px;
}
.timeline-centered .timeline-entry .timeline-entry-inner .article-footer .article-options a:hover{
color: #BABABA;
}
/*
* SideBar items
* --------------------------------------------------
*/
.sidebar-item {
-webkit-box-shadow: 0 0 3px #ADADAD;
-moz-box-shadow: 0 0 3px #ADADAD;
box-shadow: 0 0 3px #ADADAD;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
/*
* Style tweaks
* --------------------------------------------------
*/
html,
body {
overflow-x: hidden; /* Prevent scroll on narrow devices */
}
body {
padding-top: 56px;
}
footer {
padding: 30px 0;
}
.menu-sidebar{
position: absolute;
right: 15px;
top: -40px;
}
.menu-sidebar button{
border-radius: 3px;
padding: 5px 10px;
background: white;
color: #A7A4A4;
border-color: #c7c7c7;
box-shadow: 0 0 1px #CAC6C6;
font-size: 16px;
outline: none;
}
.btn:focus, .btn:active:focus, .btn.active:focus, .btn.focus, .btn:active.focus, .btn.active.focus{
outline: none;
-webkit-box-shadow:none;
box-shadow: none;
}
.list-group-item:first-child{
border-top-left-radius: 3px;
border-top-right-radius: 3px;
}
.list-group-item:last-child{
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
}
/*
* Off Canvas
* --------------------------------------------------
*/
@media screen and (max-width: 767px) {
.row-offcanvas {
position: relative;
-webkit-transition: all .25s ease-out;
-o-transition: all .25s ease-out;
transition: all .25s ease-out;
}
.row-offcanvas-right {
right: 0;
}
.row-offcanvas-left {
left: 0;
}
.row-offcanvas-right
.sidebar-offcanvas {
right: -49%; /* 6 columns */
}
.row-offcanvas-left
.sidebar-offcanvas {
left: -50%; /* 6 columns */
}
.row-offcanvas-right.active {
right: 50%; /* 6 columns */
}
.row-offcanvas-left.active {
left: 50%; /* 6 columns */
}
.sidebar-offcanvas {
position: absolute;
top: 0;
width: 50%; /* 6 columns */
}
}
/*
* CardBoard Item
*/
.card {
padding-top: 20px;
margin: 4px 0 20px 0;
background-color: rgba(214, 224, 226, 0.2);
border-top-width: 0;
border-bottom-width: 2px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.card .card-heading {
padding: 0 20px;
margin: 0;
}
.card .card-heading.simple {
font-size: 20px;
font-weight: 300;
color: #777;
border-bottom: 1px solid #e5e5e5;
}
.card .card-heading.image img {
display: inline-block;
width: 46px;
height: 46px;
margin-right: 15px;
vertical-align: top;
border: 0;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
}
.card .card-heading.image .card-heading-header {
display: inline-block;
vertical-align: top;
}
.card .card-heading.image .card-heading-header h3 {
margin: 0;
font-size: 14px;
line-height: 16px;
color: #262626;
}
.card .card-heading.image .card-heading-header span {
font-size: 12px;
color: #999999;
}
.card .card-body {
padding: 0 20px;
margin-top: 20px;
}
.card .card-media {
padding: 0 20px;
margin: 0 -14px;
}
.card .card-media img {
max-width: 100%;
max-height: 100%;
}
.card .card-actions {
min-height: 30px;
padding: 0 20px 20px 20px;
margin: 20px 0 0 0;
}
.card .card-comments {
padding: 20px;
margin: 0;
background-color: #f8f8f8;
}
.card .card-comments .comments-collapse-toggle {
padding: 0;
margin: 0 20px 12px 20px;
}
.card .card-comments .comments-collapse-toggle a,
.card .card-comments .comments-collapse-toggle span {
padding-right: 5px;
overflow: hidden;
font-size: 12px;
color: #999;
text-overflow: ellipsis;
white-space: nowrap;
}
.card-comments .media-heading {
font-size: 13px;
font-weight: bold;
}
.card.people {
position: relative;
display: inline-block;
width: 170px;
height: 300px;
padding-top: 0;
margin-left: 20px;
overflow: hidden;
vertical-align: top;
}
.card.people:first-child {
margin-left: 0;
}
.card.people .card-top {
position: absolute;
top: 0;
left: 0;
display: inline-block;
width: 170px;
height: 150px;
background-color: #ffffff;
}
.card.people .card-top.green {
background-color: #53a93f;
}
.card.people .card-top.blue {
background-color: #427fed;
}
.card.people .card-info {
position: absolute;
top: 150px;
display: inline-block;
width: 100%;
height: 101px;
overflow: hidden;
background: #ffffff;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.card.people .card-info .title {
display: block;
margin: 8px 14px 0 14px;
overflow: hidden;
font-size: 16px;
font-weight: bold;
line-height: 18px;
color: #404040;
}
.card.people .card-info .desc {
display: block;
margin: 8px 14px 0 14px;
overflow: hidden;
font-size: 12px;
line-height: 16px;
color: #737373;
text-overflow: ellipsis;
}
.card.people .card-bottom {
position: absolute;
bottom: 0;
left: 0;
display: inline-block;
width: 100%;
padding: 10px 20px;
line-height: 29px;
text-align: center;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.card.hovercard {
position: relative;
padding-top: 0;
overflow: hidden;
text-align: center;
background-color: rgb(255, 255, 255);
}
.card.hovercard .cardheader {
background: url("http://lorempixel.com/850/280/nature/4/");
background-size: cover;
height: 135px;
}
.card.hovercard .avatar {
position: relative;
top: -50px;
margin-bottom: -50px;
}
.card.hovercard .avatar img {
width: 100px;
height: 100px;
max-width: 100px;
max-height: 100px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
border: 5px solid rgba(255,255,255,0.5);
}
.card.hovercard .info {
padding: 4px 8px 10px;
}
.card.hovercard .info .title {
margin-bottom: 4px;
font-size: 24px;
line-height: 1;
color: #262626;
vertical-align: middle;
}
.card.hovercard .info .desc {
overflow: hidden;
font-size: 12px;
line-height: 20px;
color: #737373;
text-overflow: ellipsis;
}
.card.hovercard .bottom {
padding: 0 20px;
margin-bottom: 17px;
}
.sidebar-item .btn{
border-radius: 50%;
width:32px;
height:32px;
line-height:18px;
}
/*
* Bug report
* ----------------
*/
.btn-circle.btn-lg {
width: 40px;
height: 40px;
padding: 5px 8px;
font-size: 12px;
line-height: 1.33;
border-radius: 25px;
}
.feedback{position: fixed;}
.feedback textarea{height: 180px; }
.feedback .screenshot{ position: relative; top: -24px; right: 10px; opacity: .6}
.feedback .screenshot:hover{ opacity: 1}
.feedback .reported p, .feedback .failed p { height: 190px}
.feedback.left{left:5px; bottom:15px}
.feedback.right{right:5px; bottom:15px}
.feedback .dropdown-menu{width: 290px;height: 320px;bottom: 50px;}
.feedback.left .dropdown-menu{ left: 0px}
.feedback.right .dropdown-menu{ right: 0px}
.feedback .hideme{ display: none}
/*
* Menu
* ----------------
*/
.navbar, .dropdown-menu{
background:#8999A8;
border: none;
margin: 0;
}
.navbar-wrapper{
margin-bottom: 60px;
}
.nav>li>a, .dropdown-menu>li>a:focus, .dropdown-menu>li>a:hover, .dropdown-menu>li>a, .dropdown-menu>li{
border-bottom: 3px solid transparent;
}
.nav>li>a:focus, .nav>li>a:hover,.nav .open>a, .nav .open>a:focus, .nav .open>a:hover, .dropdown-menu>li>a:focus, .dropdown-menu>li>a:hover{
border-bottom: 3px solid transparent;
background: none;
}
.navbar a, .dropdown-menu>li>a, .dropdown-menu>li>a:focus, .dropdown-menu>li>a:hover{
color: #fff;
}
.dropdown-menu{
-webkit-box-shadow: none;
box-shadow:none;
}
.nav li:hover:nth-child(8n+1), .nav li.active:nth-child(8n+1){
border-bottom: #C4E17F 3px solid;
}
.nav li:hover:nth-child(8n+2), .nav li.active:nth-child(8n+2){
border-bottom: #F7FDCA 3px solid;
}
.nav li:hover:nth-child(8n+3), .nav li.active:nth-child(8n+3){
border-bottom: #FECF71 3px solid;
}
.nav li:hover:nth-child(8n+4), .nav li.active:nth-child(8n+4){
border-bottom: #F0776C 3px solid;
}
.nav li:hover:nth-child(8n+5), .nav li.active:nth-child(8n+5){
border-bottom: #DB9DBE 3px solid;
}
.nav li:hover:nth-child(8n+6), .nav li.active:nth-child(8n+6){
border-bottom: #C49CDE 3px solid;
}
.nav li:hover:nth-child(8n+7), .nav li.active:nth-child(8n+7){
border-bottom: #669AE1 3px solid;
}
.nav li:hover:nth-child(8n+8), .nav li.active:nth-child(8n+8){
border-bottom: #62C2E4 3px solid;
}
$('.toggle-sidebar').on('click', function () {
$('.row-offcanvas').toggleClass('active')
});
/*
* Bug report
* ----------------
*/
(function ( $ ) {
$.fn.feedback = function(success, fail) {
self=$(this);
self.find('.dropdown-menu-form').on('click', function(e){e.stopPropagation()})
self.find('.screenshot').on('click', function(){
self.find('.cam').removeClass('fa-camera fa-check').addClass('fa-refresh fa-spin');
html2canvas($(document.body), {
onrendered: function(canvas) {
self.find('.screen-uri').val(canvas.toDataURL("image/png"));
self.find('.cam').removeClass('fa-refresh fa-spin').addClass('fa-check');
}
});
});
self.find('.do-close').on('click', function(){
self.find('.dropdown-toggle').dropdown('toggle');
self.find('.reported, .failed').hide();
self.find('.report').show();
self.find('.cam').removeClass('fa-check').addClass('fa-camera');
self.find('.screen-uri').val('');
self.find('textarea').val('');
});
failed = function(){
self.find('.loading').hide();
self.find('.failed').show();
if(fail) fail();
}
self.find('form').on('submit', function(){
self.find('.report').hide();
self.find('.loading').show();
$.post( $(this).attr('action'), $(this).serialize(), null, 'json').done(function(res){
if(res.result == 'success'){
self.find('.loading').hide();
self.find('.reported').show();
if(success) success();
} else failed();
}).fail(function(){
failed();
});
return false;
});
};
}( jQuery ));
$(document).ready(function () {
$('.feedback').feedback();
});
