/*   
Theme Name: Bits
Theme URI: http://bits.simonwebdesign.com/
Description: Bits is a responsive time line theme licensed under the <a href="http://www.opensource.org/licenses/gpl-license.php">GPL</a>. Typography is also resposive based on flowtype.js. This theme is based on the Simon WP Framework. Bits theme comes with custom icons in jpg and svg.
Author: SWD
Author URI: http://simonwebdesign.com
License: GNU General Public License v2.0
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Version: 1.0
Tags: light, white, black, gray, two-columns, right-sidebar, fluid-layout, custom-background, post-formats
*/

/* Contents
 
 Global
 Header 
 Navigation
 Sidebar
 Post
 Meta
 Footer
 Misc
 Forms
 Comments 
 Pagination
 Typography
 
*/

/* Global */
/* ---------------------------------------------------------- */

body {
		margin: 0px;
		padding: 0px;
}
html {
		padding: 0px;
		margin: 0px;
}
/* Flex Grid */
.outer_wrap {
}
.inner_wrap {
		margin: 0 auto;
		max-width: 960px;
		padding: 0px 10px 0px 10px;
}
.flex_10,
.flex_20,
.flex_25,
.flex_33,
.flex_40,
.flex_50,
.flex_60,
.flex_66,
.flex_75,
.flex_80,
.flex_90,
.flex_100 {
		display: inline;
		float: left;
		position: relative;
}
.push {
		margin: 1px 0px 0px 0px;
}
.flex_10 {
		width: 10%;
}
.flex_20 {
		width: 20%;
}
.flex_25 {
		width: 25%;
}
.flex_33 {
		width: 33%;
}
.flex_40 {
		width: 40%;
}
.flex_50 {
		width: 50%;
}
.flex_60 {
		width: 60%;
}
.flex_66 {
		width: 66%;
}
.flex_75 {
		width: 75%;
}
.flex_80 {
		width: 80%;
}
.flex_90 {
		width: 90%;
}
.flex_100 {
		width: 100%;
}
.flex_pad {
		padding: 28px;
}
.flex_vert_pad {
		padding: 10px 0px 10px 0px;
}
.clear {
		clear: both;
}
/* Header */
/* ---------------------------------------------------------- */
#header {
		padding: 0px 0px 30px 0px;
}
.outer_header_wrap {
		max-width: 960px;
		margin: 0 auto;
}
.inner_header_wrap {
		padding: 10px;
}
/* Navigation */
/* ---------------------------------------------------------- */
nav {
		border-bottom: 0;
		-webkit-border-radius: 8px 8px 8px 8px;
		border-radius: 8px 8px 8px 8px;
		overflow: hidden;
}
nav a {
		text-decoration: none;
		color: #1B86D2;
}
nav a:hover {
		text-decoration: none;
		color: #f3f3f3;
}
nav a:visited {
		text-decoration: none;
		color: #fff;
}
nav ul {
		display: none;
		height: auto;
		padding: 0px;
		margin: 0px;
		list-style-type: none;
}
#navigation li li {
		display: none;
		height: auto;
}
nav #pull {
		padding: 0;
		width: 30px;
		height: 30px;
}
nav a#pull {
		display: block;
}
nav li {
		text-align: center;
		float: left;
		width: 50%;
		-webkit-box-shadow: inset 1px 1px 1px 2px #ffffff;
		box-shadow: inset 0px 0px 1px 0px #ffffff;
}
nav li a {
		color: #fff;
		padding: 15px 15px 15px 15px;
		display: block;
		height: auto;
		overflow: hidden;
}
#navigation {
		padding: 0px;
		background: #3983CA;
		overflow: hidden;
}
/* Sidebar */
/* ---------------------------------------------------------- */
#sidebar {
		margin: 0px 0px 0px 20px;
}
#sidebar img {
		max-width: 100%;
		height: auto;
}
#pages,
#archives,
#categories,
#feeds,
#sidebarmeta,
#blogroll {
		margin: 0px;
}
.sidebaritem {
		padding: 0px 0px 10px 0px;
		margin: 0px 0px 10px 0px;
		border-bottom: 1px dotted #ccc;
}
/* Post */
/* ---------------------------------------------------------- */

.fadeIn {
		animation-name: fadeIn;
		-webkit-animation-name: fadeIn;
		animation-duration: 1.5s;
		-webkit-animation-duration: 1.5s;
		animation-timing-function: ease-in-out;
		-webkit-animation-timing-function: ease-in-out;
		visibility: visible !important;
}
 @keyframes fadeIn {
 0% {
 opacity: 0.0;
}
 60% {
}
 80% {
 opacity: 1;
}
 100% {
 opacity: 1;
}
}
 @-webkit-keyframes fadeIn {
 0% {
 opacity: 0.0;
}
 60% {
}
 80% {
 opacity: 1;
}
 100% {
 opacity: 1;
}
}
.postmetadata {
		padding: 0px 0px 5px 0px;
		color: #777777;
		font-size: 12px;
		line-height: 18px;
		text-transform: capitalize;
		clear: both;
}
.meta {
		padding: 0px 0px 10px 0px;
}
object,
video {
		max-width: 100%;
		width: 100%;
}
.wp-caption {
		max-width: 95%;
		height: auto;
}
img {
		max-width: 100%;
		height: auto;
}
.wp-caption img,
.gallery-icon img {
		max-width: 100%;
		height: auto;
}
.home .outer_wrap,
.category .outer_wrap {
}
.inner_wrap .content {
		padding: 0px;
}
.archive .post,
.blog .post,
.post,
.type-post,
.type-page {
		visibility: hidden;
		padding: 0x;
		-webkit-border-radius: 8px 8px 8px 8px;
		border-radius: 8px 8px 8px 8px;
}
.single .post.odd,
.single .post.even {
		color: #000;
		background: #fff;
}
.home .content .post a,
.archive .content .post a {
		color: #fff;
		border-bottom: #fff solid 1px;
}
.home .content .post a:hover,
.archive .content .post a:hover {
		color: #f3f3f3;
		border-bottom: 0px;
}
.home .content .post,
.archive .content .post {
		color: white;
}
.post.even {
		background: #0099cc;
}
.post.odd {
		background: #72BEF3;
}
.post.sticky {
		color: white;
}
.post.sticky a {
		color: white;
}
.top-line {
		visibility: hidden;
		margin: 8px 0px 0px 0px;
		padding: 0px 0px 48px 0px;
		height: auto;
		background: url(http://simonwebdesign.com/wp-content/themes/bits/images/line.png) center center repeat-y;
}
.pointer-wrap {
		position: absolute;
		left: 0;
		right: 0;
}
.pointer {
		font-size: 48px;
		text-align: center;
		margin-top: -28px;
		margin-bottom: -28px;
		color: #f3f3f3;
}
.even .pointer {
		font-size: 48px;
		text-align: center;
		margin-top: -28px;
		margin-bottom: -28px;
		color: #0099cc;
}
.odd .pointer {
		font-size: 48px;
		text-align: center;
		margin-top: -28px;
		margin-bottom: -28px;
		color: #72BEF3;
}
.sticky .pointer {
		font-size: 48px;
		text-align: center;
		margin-top: -28px;
		margin-bottom: -28px;
}
.postdate {
		visibility: hidden;
		text-align: left;
		padding: 0px 0px 0px 0px;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 18px;
		margin-top: 4px;
		width: 200px;
		color: #0088c7;
		font-size: 34px;
		height: 48px;
}
.postdate ul {
		color: #0088c7;
		list-style-type: none;
		padding: 0px;
		margin: 0px;
		font-size: 28px;
}
.postdate li {
		float: left;
		width: 33%;
}
.post iframe {
		max-width: 100%;
		max-height: auto;
}
path {
		fill: #0088c7;
}
.post-status-icon {
		padding: 0px;
		-webkit-border-radius: 8px 8px 8px 8px;
		border-radius: 8px 8px 8px 8px;
}
.posttime {
		text-transform: uppercase;
		font-weight: regular;
		padding: 12px 0px 10px 0px;
		margin: 0px;
		text-align: center;
}
.postmonth {
		text-transform: uppercase;
		font-weight: regular;
		padding: 12px 0px 10px 0px;
		margin: 0px;
		text-align: center;
}
.postyear {
		color: #777;
		font-weight: bolder;
		font-size: 14px;
		padding: 0px;
}
.aligncenter {
		display: block;
		margin-left: auto;
		margin-right: auto;
}
.alignleft {
		float: left;
		margin: 0px 20px 20px 0px;
		clear: both;
}
.alignright {
		float: right;
		margin: 0px 0px 20px 20px;
		clear: both;
}
.attachment-post-thumbnail {
		float: left;
		min-width: inherit;
		overflow: hidden;
		margin: 0px 20px 0px 0px;
}
/* Meta */
/* ---------------------------------------------------------- */

.time {
		background: url(images/swpf_icons.png) no-repeat left -88px;
		margin: 0px;
		padding: 0px 0px 0px 23px;
}
.post-comments {
		background: url(images/swpf_icons.png) no-repeat left -66px;
		margin: 0px;
		padding: 0px 0px 0px 23px;
}
.categories {
		background: url(images/swpf_icons.png) no-repeat left -108px;
		margin: 0px;
		padding: 0px 0px 0px 23px;
}
.tags {
		background: url(images/swpf_icons.png) no-repeat left -24px;
		margin: 0px;
		padding: 0px 0px 0px 23px;
}
.meta_author {
		background: url(images/swpf_icons.png) no-repeat left -45px;
		margin: 0px;
		padding: 0px 0px 0px 25px;
}
.author {
		padding: 20px 20px 0px 0px;
		margin: 0px 0px 20px 0px;
}
.author img {
		float: left;
		margin: 0px 20px 10px 0px;
}
.authorinfo h3 {
		margin: 0px 0px 10px 0px;
		padding: 0px;
}
.authorinfo p {
		margin: 0px;
		padding: 0px 0px 20px 20px;
		font-size: 12px;
}
/* Footer */
/* ---------------------------------------------------------- */

#footer {
		font-size: 14px;
		visibility: hidden;
		margin: 0px 0px 0px 0px;
		text-align: center;
		padding: 20px;
		color: #848484;
}
/* Misc */
/* ---------------------------------------------------------- */

.gallery-caption {
		width: 90%;
		padding: 0px;
		margin: 0 auto;
}
.bypostauthor {
}
.wp-caption-text {
		font-size: 10px;
		color: #777;
		border: 1px solid #ddd;
		text-align: center;
		background-color: #f3f3f3;
		padding: 0px;
		margin: 0px 0px 20px 0px;
		-moz-border-radius: 3px;
		-khtml-border-radius: 3px;
		-webkit-border-radius: 3px;
		border-radius: 3px;
}
.wp-caption img {
		margin: 0;
		padding: 0;
		border: 0 none;
}
.wp-caption-dd {
		font-size: 11px;
		line-height: 17px;
		padding: 0 4px 5px;
		margin: 0;
}
/* Comments */
/* ---------------------------------------------------------- */
h3#reply-title {
		padding: 0px;
		margin: 0px;
}
.logged-in-as {
		padding: 0px;
		margin: 0px;
}
#comments-title:before {
		content: "Comments: ";
		color: #777;
}
#comments-title {
		padding: 30px 0px 0px 0px;
		margin: 0px;
		text-align: center!important;
}
.comment-author {
		font-weight: bolder;
		font-size: 14px;
		font-style: italic;
		text-transform: capitalize;
		margin: 0px 0px 0px 0px;
		padding: 40px 0px 0px 0px;
}
.comment-author .avatar {
		display: block;
		float: left;
		margin: -5px 12px 0px 0px;
		padding: 0px;
		-webkit-border-radius: 30px;
		-moz-border-radius: 30px;
		border-radius: 30px;
		border: solid 5px #f3f3f3;
}
#comment-block {
		padding: 0px;
		overflow: hidden;
}
.comment-body p {
		margin: 10px 0px 10px 0px;
		padding: 10px 10px;
		background-color: #f3f3f3;
		-webkit-border-radius: 3px;
		-moz-border-radius: 3px;
		border-radius: 3px;
}
#comment-block .children {
		margin: 0px 0px 0px 28px;
}
#comment-block ol,
#comment-block .children li {
		margin: 0px;
		padding: 0px;
		font-size: 14px;
		list-style-type: none;
}
#comment-block a {
		color: #006699;
}
.commentmetadata {
		font-size: 10px;
		padding: 0px;
		margin: 0px;
}
#respond {
		margin: 40px 0px 0px 0px;
}
a#cancel-comment-reply-link {
		background: #ccc;
		color: white;
		padding: 5px!important;
 display:;
		-webkit-border-radius: 3px;
		-moz-border-radius: 3px;
		border-radius: 3px;
}
/* Pagination */
/* ---------------------------------------------------------- */

.navigation {
		visibility: hidden;
		width: 100%;
		text-align: center;
		padding: 5px;
		margin: 30px 0px 50px 0px!important;
}
.navigation a {
		padding: 5px 6px 4px 6px;
		margin: 3px;
		font-weight: bold;
		color: #4280D6;
}
.navigation a:hover {
		color: #82BAF6;
		padding: 5px 6px 4px 6px;
		margin: 3px;
		font-weight: bold;
}
.navigation span.pages {
		padding: 5px 6px 4px 6px;
		margin: 3px;
		color: #333;
		font-weight: bold;
		background-color: inherit;
		display: none;
}
.navigation span.current {
		padding: 5px 6px 4px 6px;
		margin: 3px;
		font-weight: bold;
		color: #fff;
		background-color: #3983CA;
		-webkit-border-radius: 4px;
		-moz-border-radius: 4px;
		border-radius: 4px;
}
/* Typography Framework */
/* ---------------------------------------------------------- */


body {
		font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
#header h1 {
		font-weight: 300;
		margin: 0px;
		padding: 30px 0px 0px 0px;
}
#header h1 a {
		color: #3983CA;
		font-size: 36px;
		letter-spacing: -.5px;
		text-decoration: none;
}
#header h1 a:hover {
		color: grey;
		text-decoration: none;
}
.description {
		color: #777777;
		margin: 0px 0px 0px 0px;
		padding: 0px 0px 0px 0px;
}
.bread-crumb {
		color: #777777;
		font-size: 12px;
		margin: 0px 0px 0px 0px;
		padding: 5px 5px 5px 10px;
}
.content-format-aside .entry,
.content-format-gallery .entry,
.content-format-link .entry,
.content-format-image .entry,
.content-format-quote .entry,
.content-format-status .entry,
.content-format-video .entry,
.content-format-audio .entry,
.content-format-chat .entry {
		padding: 0px 0px 0px 0px;
}
.content-format-aside .entry {
		padding: 10px 0px 0px 0px;
}
.content-format-link p {
		font-size: 22px;
		padding: 0px 0px 0px 0px;
}
.content-format-link p:before {
		content: 'Link: ';
		margin: 0px;
		font-weight: 600;
}
.content-format-quote blockquote {
		font-size: 22px;
		padding: 20px 10px 20px 90px;
		margin: 0px;
		background: url("images/quotes.png") 10px 10px no-repeat;
}
.content-format-status p:before {
		content: 'Status: ';
		margin: 0px;
		font-weight: 600;
}
.content-format-status p {
		font-size: 26px;
		margin: 0px;
		line-height: 32px;
}
.content-format-status .entry p {
		margin: 0px;
		padding: 0px 0px 0px 20px;
		text-align: left;
}
.content-format-status .entry img {
		float: left;
		text-align: center;
}
a,
a:visited {
		text-decoration: none;
		color: #1B86D2;
}
a:hover {
		text-decoration: none;
		color: #006699;
}
thead {
		display: table-header-group;
}
tr,
img {
		page-break-inside: avoid;
}
img {
		max-width: 100% !important;
}
h2,
h3 {
		page-break-after: avoid;
}
p,
h2,
h3 {
		orphans: 3;
		widows: 3;
}
p {
		margin: 0 0 10px;
		line-height: 20px;
		font-size: 16px;
}
small {
		font-size: 85%;
}
strong {
		font-weight: bold;
}
em {
		font-style: italic;
}
.left {
		text-align: left;
}
.right {
		text-align: right;
}
.center {
		text-align: center;
}
h1,
h2,
h3,
h4,
h5,
h6 {
		margin: 0px 0px 15px 0px;
		font-family: inherit;
		font-weight: 300;
		line-height: 20px;
		color: inherit;
		text-rendering: optimizelegibility;
}
h1,
h2,
h3 {
		line-height: 40px;
}
h1 {
		font-size: 42px;
}
h2 {
		font-size: 31.5px;
}
h3 {
		font-size: 24.5px;
}
h4 {
		font-size: 17.5px;
}
h5 {
		font-size: 14px;
}
h6 {
		font-size: 11.9px;
}
h1 small {
		font-size: 24.5px;
}
h2 small {
		font-size: 17.5px;
}
h3 small {
		font-size: 14px;
}
h4 small {
		font-size: 14px;
}
h1 a {
		text-decoration: none;
}
.headline {
		padding-bottom: 9px;
		margin: 20px 0 30px;
		border-bottom: 1px solid #eeeeee;
}
ul,
ol {
		font-size: 14px;
		color: #222222;
		padding: 0;
		margin: 0 0 10px 25px;
}
ul ul,
ul ol,
ol ol,
ol ul {
		margin-bottom: 0;
}
li {
		line-height: 20px;
}
dl {
		margin-bottom: 20px;
		font-size: 14px;
		line-height: 20px;
}
dt,
dd {
		line-height: 20px;
}
dt {
		font-weight: bold;
		margin-top: 10px;
}
dd {
		margin: 5px 0px 0px 20px;
}
hr {
		margin: 20px 0;
		border: 0;
		border-top: 1px solid #eeeeee;
		border-bottom: 1px solid #ffffff;
}
abbr[title],
abbr[data-original-title] {
		cursor: help;
		border-bottom: 1px dotted #999999;
}
blockquote {
		font-size: 14px;
		line-height: 22px;
		border-left: 10px solid #ccc;
		margin: 20px;
		quotes: "\201C""\201D""\2018""\2019";
		padding: 20px 10px 20px 90px;
		background: url("images/quotes.png") 10px 10px no-repeat;
}
address {
		display: block;
		margin-bottom: 0px;
		font-style: normal;
		line-height: 20px;
}
code,
pre {
		padding: 0 3px 2px;
		font-family: Monaco, Menlo, Consolas, "Courier New", monospace;
		font-size: 12px;
		color: #333333;
		-webkit-border-radius: 3px;
		-moz-border-radius: 3px;
		border-radius: 3px;
}
code {
		padding: 2px 4px;
		color: #d14;
		background-color: #f7f7f9;
		border: 1px solid #e1e1e8;
}
pre {
		display: block;
		padding: 9.5px;
		margin: 0 0 10px;
		font-size: 13px;
		line-height: 20px;
		word-break: break-all;
		word-wrap: break-word;
		white-space: pre-wrap;
		background-color: #f5f5f5;
		border: 1px solid #ccc;
		border: 1px solid rgba(0, 0, 0, 0.15);
		-webkit-border-radius: 4px;
		-moz-border-radius: 4px;
		border-radius: 4px;
}
pre.prettyprint {
		margin-bottom: 20px;
}
pre code {
		padding: 0;
		color: inherit;
		white-space: pre;
		white-space: pre-wrap;
		background-color: transparent;
		border: 0;
}
.pre-scrollable {
		max-height: 340px;
		overflow-y: scroll;
}
table {
		max-width: 100%;
		background-color: transparent;
		border-collapse: collapse;
		border-spacing: 0;
		border: 1px solid #ccc;
}
tr,
td {
		border: 1px solid #ccc;
		padding: 5px;
}
th {
		padding: 5px;
		background-color: #f3f3f3;
		border: 1px solid #ccc;
}
form {
		margin: 0 0 20px;
}
fieldset {
		padding: 0;
		margin: 0;
		border: 0;
}
legend {
		display: block;
		width: 100%;
		padding: 0;
		margin-bottom: 20px;
		font-size: 21px;
		line-height: 40px;
		color: #333333;
		border: 0;
		border-bottom: 1px solid #e5e5e5;
}
legend small {
		font-size: 15px;
		color: #999999;
}
label,
input,
button,
select,
textarea {
		font-size: 14px;
		font-weight: normal;
		line-height: 20px;
}
input,
button,
select,
textarea {
		font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
label {
		display: block;
		margin-bottom: 5px;
}
select,
textarea,
input[type="text"] {
		display: inline-block;
		height: 20px;
		padding: 4px 6px;
		margin-bottom: 10px;
		font-size: 14px;
		line-height: 20px;
		color: #555555;
		-webkit-border-radius: 4px;
		-moz-border-radius: 4px;
		border-radius: 4px;
		vertical-align: middle;
}
input[type="text"] {
		display: inline-block;
		height: 20px;
		padding: 6px;
		margin-bottom: 10px;
		margin-right: 8px;
		font-size: 14px;
		line-height: 20px;
		color: #555555;
		-webkit-border-radius: 4px;
		-moz-border-radius: 4px;
		border-radius: 4px;
		vertical-align: middle;
}
textarea {
		height: auto;
		width: 96%;
}
radio,
checkbox {
		min-height: 20px;
		padding-left: 20px;
}
radio input[type="radio"],
checkbox input[type="checkbox"] {
		float: left;
		margin-left: -20px;
}
textarea,
input[type="text"] {
		background-color: #ffffff;
		border: 1px solid #cccccc;
		-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
		-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
		box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
		-webkit-transition: border linear .2s, box-shadow linear .2s;
		-moz-transition: border linear .2s, box-shadow linear .2s;
		-o-transition: border linear .2s, box-shadow linear .2s;
		transition: border linear .2s, box-shadow linear .2s;
}
textarea:focus,
input[type="text"]:focus {
		border-color: rgba(82, 168, 236, 0.8);
		outline: 0;
		-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6);
		-moz-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6);
		box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6);
}
input[type="radio"],
input[type="checkbox"] {
		margin: 4px 0 0;
		line-height: normal;
}
select {
		height: 30px;
		line-height: 30px;
		width: 220px;
		border: 1px solid #cccccc;
		background-color: #ffffff;
}
select:focus,
input[type="radio"]:focus,
input[type="checkbox"]:focus {
		outline: thin dotted #333;
		outline: 5px auto -webkit-focus-ring-color;
		outline-offset: -2px;
}
.button,
input[type="submit"] {
		display: inline-block;
		padding: 16px;
		margin-bottom: 0;
		font-size: 14px;
		font-weight: 600;
		line-height: 20px;
		text-align: center;
		vertical-align: middle;
		cursor: pointer;
		color: #fff;
		background-color: #3B82D0;
		border: 0px;
		border-bottom-color: #b3b3b3;
		-webkit-border-radius: 4px;
		-moz-border-radius: 4px;
		border-radius: 4px;
		-webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
		-moz-box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
		box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
}
.button:hover,
.button:focus,
.button:active,
.button.active,
.button.disabled,
.button[disabled] {
		color: #333333;
		background-color: #e6e6e6;
		border: 1px solid #777777;
}
.button:hover,
.button:focus {
		color: #333333;
		text-decoration: none;
}
.button:focus {
		outline: thin dotted #333;
		outline: 5px auto -webkit-focus-ring-color;
		outline-offset: -2px;
}