body {
	font-family: 'Noto Sans', sans-serif;
	background-color:#f0f0f0;
	font-size: 18px;
	line-height: 26px;
}
button, select, textarea {
	font-family: Arial,sans-serif;
}
h1, h2, h3, h4 {
	font-family: 'Lato', sans-serif;;
}
h2 {
	font-size:27px;
	line-height:40px;
	font-weight:300;
}
h3 {
	font-size: 24.5px;
	margin-bottom: 15px;
	font-weight:700;
}


.content-bubble {
	background-color: #fff;
	padding: 40px;
	border: 1px solid #ccc;
	border-radius: 10px;
	box-shadow: 3px 3px 3px #ccc;
	display:inline-block;
}
.index {
	text-align:center;
}
.index .content-bubble {
	margin-top:200px;
	margin-bottom:200px;
}
.index .content-bubble h1 {
	margin-bottom:30px;
}
.openreader-icon {
	display:block;
	margin:30px auto;
}
html.reader {
	height:100%;
}
body.reader {
	overflow:hidden;
	height:100%;
}
.leftbar {
	overflow:auto;
	width:250px;
	float:left;
	height:100%;
	background: #FFF;
	box-shadow: -2px 0 8px #999;
}
.leftbar hr {
	margin: 0 20px 0 10px;
}
.content {
	overflow:auto;
	height:100%;
}
.add-area {
	position: relative;
	display:inline-block;
}
.popover {
	padding:10px;
}
.popover.bottom {
	top:100%;
	margin-top:0;
}
#add-form-wrapper {
	margin-top:5px;
	width:500px;
}
#add-form-wrapper .close {
	position:absolute;
	top:2px;
	right:10px;
}
#add-form-wrapper input[type="text"] {
	width: 261px;
}
.add-form-spinner,
.add-submit-button {
	position:absolute;
	right:10px;
	bottom:10px;
}
.add-form-spinner {
	display:none;
	padding-bottom:10px;
	padding-right:5px;
}
.form-message {
	height:25px;
	line-height:30px;
	margin:5px;
	font-size:14px;
	color:rgb(173, 35, 35);
}
form {
	margin:0;
}
label {
	cursor:default;
	font-size:12px;
	font-color:#444;
}
input[type="text"] {
	margin:0;
	display:block;
}

.feed {
	margin:5px 10px;
	padding:3px 10px;
	border-radius:10px;
	cursor:pointer;
	font-size:14px;
	position:relative;
}
.feed.has-unread {
	font-weight:700;
}
.feed.being-read,
.feed:hover {
	background-color:#f3f3f3;
}
.feed-label {
	overflow:hidden;
	width:175px;
	text-overflow:ellipsis;
	white-space: nowrap;
}
.feed .close {
	position:absolute;
	top:6px;
	right:5px;
	display:none;
	line-height:20px;
	height:20px;
	width:20px;
}
.feed:hover .close {
	display:block;
}

#floatingCirclesG{
position:relative;
width:50px;
height:50px;
-moz-transform:scale(0.6);
-webkit-transform:scale(0.6);
-o-transform:scale(0.6);
-ms-transform:scale(0.6);
transform:scale(0.6);
}

.f_circleG{
position:absolute;
background-color:rgba(0,0,0,0);
height:9px;
width:9px;
-moz-border-radius:5px;
-moz-animation-name:f_fadeG;
-moz-animation-duration:1.04s;
-moz-animation-iteration-count:infinite;
-moz-animation-direction:linear;
-webkit-border-radius:5px;
-webkit-animation-name:f_fadeG;
-webkit-animation-duration:1.04s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-direction:linear;
-o-border-radius:5px;
-o-animation-name:f_fadeG;
-o-animation-duration:1.04s;
-o-animation-iteration-count:infinite;
-o-animation-direction:linear;
-ms-border-radius:5px;
-ms-animation-name:f_fadeG;
-ms-animation-duration:1.04s;
-ms-animation-iteration-count:infinite;
-ms-animation-direction:linear;
border-radius:5px;
animation-name:f_fadeG;
animation-duration:1.04s;
animation-iteration-count:infinite;
animation-direction:linear;
}

#frotateG_01{
left:0;
top:20px;
-moz-animation-delay:0.39s;
-webkit-animation-delay:0.39s;
-o-animation-delay:0.39s;
-ms-animation-delay:0.39s;
animation-delay:0.39s;
}

#frotateG_02{
left:6px;
top:6px;
-moz-animation-delay:0.52s;
-webkit-animation-delay:0.52s;
-o-animation-delay:0.52s;
-ms-animation-delay:0.52s;
animation-delay:0.52s;
}

#frotateG_03{
left:20px;
top:0;
-moz-animation-delay:0.65s;
-webkit-animation-delay:0.65s;
-o-animation-delay:0.65s;
-ms-animation-delay:0.65s;
animation-delay:0.65s;
}

#frotateG_04{
right:6px;
top:6px;
-moz-animation-delay:0.78s;
-webkit-animation-delay:0.78s;
-o-animation-delay:0.78s;
-ms-animation-delay:0.78s;
animation-delay:0.78s;
}

#frotateG_05{
right:0;
top:20px;
-moz-animation-delay:0.91s;
-webkit-animation-delay:0.91s;
-o-animation-delay:0.91s;
-ms-animation-delay:0.91s;
animation-delay:0.91s;
}

#frotateG_06{
right:6px;
bottom:6px;
-moz-animation-delay:1.04s;
-webkit-animation-delay:1.04s;
-o-animation-delay:1.04s;
-ms-animation-delay:1.04s;
animation-delay:1.04s;
}

#frotateG_07{
left:20px;
bottom:0;
-moz-animation-delay:1.17s;
-webkit-animation-delay:1.17s;
-o-animation-delay:1.17s;
-ms-animation-delay:1.17s;
animation-delay:1.17s;
}

#frotateG_08{
left:6px;
bottom:6px;
-moz-animation-delay:1.3s;
-webkit-animation-delay:1.3s;
-o-animation-delay:1.3s;
-ms-animation-delay:1.3s;
animation-delay:1.3s;
}

@-moz-keyframes f_fadeG{
0%{
background-color:#000000}

100%{
background-color:rgba(0,0,0,0)}

}

@-webkit-keyframes f_fadeG{
0%{
background-color:#000000}

100%{
background-color:rgba(0,0,0,0)}

}

@-o-keyframes f_fadeG{
0%{
background-color:#000000}

100%{
background-color:rgba(0,0,0,0)}

}

@-ms-keyframes f_fadeG{
0%{
background-color:#000000}

100%{
background-color:rgba(0,0,0,0)}

}

@keyframes f_fadeG{
0%{
background-color:#000000}

100%{
background-color:rgba(0,0,0,0)}

}

#loading-content h2 {
	margin-top:100px;
	text-align:center;
	margin-bottom:0;
}
#spinner {
	margin:20px auto;
	display: block;
	width: 50px;
}

.topbar {
	position:fixed;
	top:0;
	left:0;
	height:50px;
	width:100%;
	background: -moz-linear-gradient(top,  rgba(68,68,68,0.9) 0%, rgba(13,13,13,0.9) 20%, rgba(1,1,1,0.9) 40%, rgba(10,10,10,0.9) 56%, rgba(42,42,42,0.9) 98%, rgba(43,43,43,0.95) 99%, rgba(28,28,28,1) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(68,68,68,0.9)), color-stop(20%,rgba(13,13,13,0.9)), color-stop(40%,rgba(1,1,1,0.9)), color-stop(56%,rgba(10,10,10,0.9)), color-stop(98%,rgba(42,42,42,0.9)), color-stop(99%,rgba(43,43,43,0.95)), color-stop(100%,rgba(28,28,28,1))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  rgba(68,68,68,0.9) 0%,rgba(13,13,13,0.9) 20%,rgba(1,1,1,0.9) 40%,rgba(10,10,10,0.9) 56%,rgba(42,42,42,0.9) 98%,rgba(43,43,43,0.95) 99%,rgba(28,28,28,1) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  rgba(68,68,68,0.9) 0%,rgba(13,13,13,0.9) 20%,rgba(1,1,1,0.9) 40%,rgba(10,10,10,0.9) 56%,rgba(42,42,42,0.9) 98%,rgba(43,43,43,0.95) 99%,rgba(28,28,28,1) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  rgba(68,68,68,0.9) 0%,rgba(13,13,13,0.9) 20%,rgba(1,1,1,0.9) 40%,rgba(10,10,10,0.9) 56%,rgba(42,42,42,0.9) 98%,rgba(43,43,43,0.95) 99%,rgba(28,28,28,1) 100%); /* IE10+ */
	background: linear-gradient(to bottom,  rgba(68,68,68,0.9) 0%,rgba(13,13,13,0.9) 20%,rgba(1,1,1,0.9) 40%,rgba(10,10,10,0.9) 56%,rgba(42,42,42,0.9) 98%,rgba(43,43,43,0.95) 99%,rgba(28,28,28,1) 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e6444444', endColorstr='#1c1c1c',GradientType=0 ); /* IE6-9 */
	border-bottom:1px solid #222;
	box-shadow: -4px 0px 6px 1px #666;
	line-height:50px;
	z-index:50;
}
.leftbar, .content {
	padding-top:60px;
	box-sizing:border-box;
}
.topbar a {
	color:#FFF;
	display:inline-block;
	padding:0 20px;
	border-left:1px solid #444;
	border-right:1px solid #222;
	height:50px;
	font-size:16px;
}
.topbar a:hover {
	text-decoration:none;
}
.topbar a.right {
	float:right;
}
.topbar a i {
	margin-top: 3px;
}

.feed-item {
	margin:15px 20px;
	border-radius:10px;
	border:5px solid #999;
	padding:20px;
	background-color:#FFF;
	box-shadow: 2px 2px 4px #ddd;
	font-size:14px;
	line-height:20px;
	min-width:800px;
	position:relative;
	transition: border-color 0.1s linear;
}
.feed-item.read {
	border-color:#ccc;
}
.feed-item > h3 {
	font-size:26px;
	line-height:26px;
	margin:0px 0 7px;
	width:700px;
}
.feed-item > .item-date {
	position:absolute;
	right:20px;
	top:20px;
}
.feed-item center {
	text-align:left;
}
.feed-item .item-info {
	padding-bottom:10px;
	font-size:12px;
}
.feed-item.no-items {
	text-align:center;
}

.loading-ellipsis .one {
    opacity: 0;
    -webkit-animation: dot1 1.3s infinite;
    animation: dot1 1.3s infinite;
}

.loading-ellipsis .two {
    opacity: 0;
    -webkit-animation: dot2 1.3s infinite;
    animation: dot2 1.3s infinite;
}

.loading-ellipsis .three {
    opacity: 0;
    -webkit-animation: dot3 1.3s infinite;
    animation: dot3 1.3s infinite;
}

@keyframes dot1 {
      0% { opacity: 0; }
     25% { opacity: 0; }
    100% { opacity: 1; }
}
@-webkit-keyframes dot1 {
      0% { opacity: 0; }
     25% { opacity: 0; }
    100% { opacity: 1; }
}
@keyframes dot2 {
      0% { opacity: 0; }
     50% { opacity: 0; }
    100% { opacity: 1; }
}
@-webkit-keyframes dot2 {
      0% { opacity: 0; }
     50% { opacity: 0; }
    100% { opacity: 1; }
}
@keyframes dot3 {
      0% { opacity: 0; }
     75% { opacity: 0; }
    100% { opacity: 1; }
}
@-webkit-keyframes dot3 {
      0% { opacity: 0; }
     75% { opacity: 0; }
    100% { opacity: 1; }
}


#warningGradientOuterBarG{
height:5px;
width:40px;
border:1px solid #444444;
overflow:hidden;
background-color:#F0F0F0;
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F0F0F0), to(#444444));
background: -moz-linear-gradient(top, #F0F0F0, #444444);
background: -webkit-linear-gradient(top, #F0F0F0, #444444);
background: -ms-linear-gradient(top, #F0F0F0, #444444);
background: -o-linear-gradient(top, #F0F0F0, #444444);
background: linear-gradient(top, #F0F0F0, #444444);
}

.warningGradientBarLineG{
background-color:#F0F0F0;
float:left;
width:4px;
height:30px;
margin-right:6px;
margin-top:-7px;
-moz-transform:rotate(45deg);
-webkit-transform:rotate(45deg);
-ms-transform:rotate(45deg);
-o-transform:rotate(45deg);
transform:rotate(45deg);
}

.warningGradientAnimationG{
width:59px;
-moz-animation-name:warningGradientAnimationG;
-moz-animation-duration:1s;
-moz-animation-iteration-count:infinite;
-moz-animation-timing-function:linear;
-webkit-animation-name:warningGradientAnimationG;
-webkit-animation-duration:1s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-timing-function:linear;
-ms-animation-name:warningGradientAnimationG;
-ms-animation-duration:1s;
-ms-animation-iteration-count:infinite;
-ms-animation-timing-function:linear;
-o-animation-name:warningGradientAnimationG;
-o-animation-duration:1s;
-o-animation-iteration-count:infinite;
-o-animation-timing-function:linear;
animation-name:warningGradientAnimationG;
animation-duration:1s;
animation-iteration-count:infinite;
animation-timing-function:linear;
}

#warningGradientFrontBarG{
}

@-moz-keyframes warningGradientAnimationG{
0%{
margin-left:-10px;
}

100%{
margin-left:0px;
}

}

@-webkit-keyframes warningGradientAnimationG{
0%{
margin-left:-10px;
}

100%{
margin-left:0px;
}

}

@-ms-keyframes warningGradientAnimationG{
0%{
margin-left:-10px;
}

100%{
margin-left:0px;
}

}

@-o-keyframes warningGradientAnimationG{
0%{
margin-left:-10px;
}

100%{
margin-left:0px;
}

}

@keyframes warningGradientAnimationG{
0%{
margin-left:-10px;
}

100%{
margin-left:0px;
}

}

.show-read-items {
	margin-top:15px;
	display: inline-block;
}

.hidden {
	display:none;
}