body {
font-family: 'Source Sans Pro', sans-serif;
color: #222;
line-height: 30px;
}

body, div, ul, li, h1, h2, h3, h4, p {
margin: 0;
padding: 0;
}

ul {
list-style: none;
}

a.light {
color: inherit;
border-bottom: 1px solid #ddd !important;
}

/*
h1 { background: red; }
div.meta { background: red; }
h2.uppercase { background: red; }
h3 { background: red; }
#sidebar ul li { background: red; }
*/


/* -----------------------
baseline
-------------------------- */


/*
#baseline-5px {
position: absolute;
width: 100%;
height: 200%;
background: url(baseline-5px.png);
z-index: 50;
opacity: 0.1;
}
*/

/*
#baseline-20px {
position: absolute;
width: 100%;
height: 200%;
background: url(baseline-20px.png);
z-index: 50;
opacity: 0.1;
}
*/

h1 span {
display: block;
position: relative;
top: -6px;
}
h2 span {
display: block;
position: relative;
top: -1px;
}
.feed h2 span {
display: block;
position: relative;
top: 0px;
}
h3 span {
display: block;
position: relative;
top: -1px;
}
div.meta div {
position: relative;
top: -5px;
}
#sidebar ul li span {
display: block;
position: relative;
top: 4px;
}
p span {
display: block;
position: relative;
top: -1px;
}
.admin p span {
display: inline;
}
ul.channels-list li span {
display: block;
position: relative;
top: -1px;
}

.show-more {
margin: 50px 0 50px 0;
}

.button-link {
display: inline-block;
text-align: center;
padding: 5px 20px;
padding: 3px 20px;
border-radius: 6px;
position: relative;
background: #f5f5f5;
border-bottom: 1px solid #D6E1EC;
color: #227caa;
text-decoration: none;
font-size: 16px;
}
.button-link:hover {
background: #f0f0f0;
border-bottom: 1px solid #dadada;
transition: background 0.15s linear;
}
.button-link:active {
bottom: -1px;
}


#mobile-app {
margin: 60px 0 0 0;
text-align: center;
}
#mobile-app div {
margin: 30px 0 0 0;
}
#mobile-app div a {
border: none;
}


.mobile-only {
display: none;
}
span.screen-only {
display: inline;
}

/* -----------------------
layout
-------------------------- */


html, body, #container {
height: 100%;
}

#container {
display: table;

width: 100%;
}
#content {
display: table-cell;
margin: 60px auto;
padding: 60px 120px 120px 120px;
vertical-align: top;
}
#wrap {
background: white;
max-width: 800px;
margin: 0 auto;
}


/* -----------------------
type
-------------------------- */

h1 {
font-size: 30px;
line-height: 30px;
font-weight: 400;
margin: 0 0 50px 0;
}
h2 {
font-size: 18px;
font-weight: 600;
margin: 30px 0 10px 0;
color: rgb(238, 108, 72);
}
h3 {
font-size: 18px;
line-height: 30px;
font-weight: 400;
margin: 0;
}
p {
margin: 10px 0 10px 0;
}
a {
color: #227caa;
border-bottom: 1px solid #d4e1ec;
text-decoration: none;
}


h1 a {
border: none;
}


/* -----------------------
feed
-------------------------- */

.feed h2 {
font-size: 14px;
font-weight: 600;
color: rgb(238, 108, 72);
margin: 50px 0 30px 0;
text-transform: uppercase;
}
.entry {
margin: 10px 0 10px 0;
padding: 0 0 0 0;
}
.entry h3 {
font-size: 18px;
line-height: 30px;
font-weight: 400;
margin: 0;
}
.entry h3 a {
padding: 3px 0;
color: #222;
text-decoration: none;
border: none;
}
.entry h3 a:hover {
background: #d4e5f7;
transition: background 0.15s linear;
}

/*
.entry h3 span a:visited {
color: #777;
}
*/

.meta {
font-size: 14px;
line-height: 20px;
font-weight: 400;
color: #aaa;
margin: 10px 0 20px 0;
}
.meta a {
color: inherit;
border-bottom: 1px solid #eee;
}

.line {
height: 1px;
background: linear-gradient(to right, rgba(238, 108, 72, 0.25) , #fff);
margin-top: -11px;
/*display: none;*/
}
.meta .bar {
padding: 0 2px;
}



.notice {
padding: 10px 30px;
margin: 59px 0 0 0 ;
border-radius: 5px;
background: #555;
background: #EE6C46;
color: #fff;
}

.notice span {
display: inline-block;
}
.notice a {
display: inline-block;
float: right;
padding: 0 15px;
margin: 0 10px;
border-radius: 5px;
background: #fff;
color: #444;
}


/* -----------------------
sidebar
-------------------------- */

#sidebar {
line-height: 20px;
display: table-cell;
width: 200px;
background: #eee;
vertical-align: top;
padding: 90px 30px 90px 60px;
}
#sidebar ul {
list-style: none;
}
#sidebar ul li {
margin: 10px 0 15px 0;
}
#sidebar ul li a {
color: #555;
text-decoration: none;
padding: 3px 0;
border: none;
}
#sidebar ul li a:hover {
background: #ddd;
transition: background 0.15s linear;
}

#sidebar ul li a.active {
background: #e5e5e5;
background: #ddd;
}

div.hr {
margin: 30px 0 19px 0;
height: 1px;
background: linear-gradient(to right, rgba(220, 220, 220, 1.0), rgba(220, 220, 220, 0.0));
}
#sidebar {
position: relative;
}
#sidebar .copyright {
margin-top: 40px;
color: #aaa;
font-size: 14px;
}

#sidebar a {
border: none;
}

#sidebar .sponsor-space {
margin-top: 80px;
}
#sidebar .sponsor-space h3 {
font-size: 14px;
color: #555;
margin-bottom: 5px;
}
#sidebar .sponsor-space p {
font-size: 14px;
color: #555;
}


/* -----------------------
home
-------------------------- */

.home {
background: #fafafa;
}
.home #logo {
margin: 0 0 24px 0;
}
.home #logo span {
display: block;
margin: 29px 0 0 0;
	font-weight: 600;
}



img { vertical-align: bottom; }

#home-container {
/*margin: 90px auto;*/
margin: auto;
padding: 90px 0 0 0;

width: 700px;
text-align: center;
}
#home-container h2.desc {
font-size: 30px;
line-height: 30px;
font-weight: 300;
margin: 0 0 55px 0;
}
#home-container h2.desc-small {
font-weight: 300;
font-size: 20px;
line-height: 30px;
margin: 49px 35px;
}



#screen {
margin: -25px 0 0 0;
}

#calls {
margin: 17px 0 47px 0;
color: #676767;
}

#calls a.button {
display: inline-block;
text-align: center;
padding: 6px 40px;
margin: 10px 5px;
border-radius: 6px;
position: relative;
text-decoration: none;
font-size: 16px;
	background: #f1f1f1;
	border-bottom: 1px solid #dddddd;
	color: #676767;
}
#calls a:active.button {
bottom: -1px;
}
#calls a:hover.button {
	background: #eeeeee;
	border-bottom: 1px solid #dadada;
transition: background 0.15s linear;
}

#calls a.secondary {
margin-left: 5px;
color: #676767;
border-bottom: 1px solid #ddd;
}



#footer {
font-weight: 300;
margin: 50px 0;
padding-bottom: 50px;
font-size: 16px;
}
#footer a {
color: #888;
text-decoration: none;
padding: 0 10px;
border: none;
}

#footer a:hover {
color: #444;
transition: color 0.15s linear;
}

.home h2 {
color: inherit;
}


/* -----------------------
error
-------------------------- */


#error-container {
margin: 90px auto;
width: 600px;
text-align: left;
}

#error-container h1 {
}

#error-container h1 img {
position: relative;
top: -7px !important;
}

#error-container h1 span {
display: inline !important;
padding-left: 15px;
}


#error-container h2 {
line-height: 30px;
margin: 40px 0 10px 0;
}

#error-message p {
font-weight: 300;
}


.no-connection * {
text-align: center;
}
.no-connection {
width: auto !important;
}





/* -----------------------
about
-------------------------- */

#twitter-profiles {
margin: 55px 0 60px 0;
}
#twitter-profiles a {
display: inline-block;
text-align: center;
padding: 6px 10px;
width: 200px;
margin: 10px 10px;
border-radius: 6px;
position: relative;
color: #227caa;
text-decoration: none;
background: #f0f0f0;
border-bottom: 1px solid #ddd;
}
#twitter-profiles a.profile:active {
bottom: -1px;
}
#twitter-profiles a.profile:hover {
background: #eaeaea;
border-bottom: 1px solid #dadada;
transition: background 0.15s linear;
}
.profile span {
color: #555;
font-weight: 300;
font-size: 14px;
padding-left: 5px;
}



/* -----------------------
about
-------------------------- */

/*
.about #content {
width: 600px;
}
*/


/* -----------------------
forms
-------------------------- */

input.input {
padding: 7px 10px;
border-radius: 3px;
border: 1px solid #ccc;
background: #fff;
font-weight: 300;
font-size: 14px;
font-family: 'Source Sans Pro', sans-serif;
width: 275px;
}

button {
font-family: inherit;
font-size: 16px;
border: none;
padding: 6px 25px;
border-radius: 6px;
position: relative;
text-decoration: none;
background: #EEF2F5;
border-bottom: 1px solid #D6E1EC;
color: #227caa;
background: #f1f1f1;
border-bottom: 1px solid #dddddd;
color: #676767;
}
button:hover {
	cursor: pointer;
	background: #eeeeee;
	border-bottom: 1px solid #dadada;
transition: background 0.15s linear;
}

/* -----------------------
newsletter
-------------------------- */


#subscribe-form-ii {
background: #f0f0f0;
width: 300px;
margin: 60px auto 30px auto;
padding: 30px 40px;
border-radius: 4px;
text-align: left;
}
#subscribe-form-ii p {
color: #888;
}
#subscribe-form-ii input.input {
padding: 8px 10px;
border-radius: 3px;
border: 1px solid #ccc;
background: #fff;
font-weight: 300;
font-size: 14px;
font-family: 'Source Sans Pro', sans-serif;
width: 275px;
}
#subscribe-form-ii button {
padding: 10px 18px;
margin: 30px 0 5px 0;
margin: 40px 0 5px 0;
border-radius: 3px;
border: none;
font-weight: 400;
font-size: 16px;
font-family: 'Source Sans Pro', sans-serif;
color: #676767;
background: #ddd;
border-bottom: 1px solid #bbb;
background: #EE6C46;
color: #fff;
border-bottom: 1px solid #C25839;
}
#subscribe-form-ii button:hover {
cursor: pointer;
}
#subscribe-form-ii select {
font-family: 'Source Sans Pro', sans-serif;
font-size: 14px;
font-weight: 300;
border: 1px solid #ccc;
height: 34px;
border-radius: 3px;
background: #fff;
}
#subscribe-form-ii label {
display: block;
font-weight: 300;
}
#subscribe-form-ii h2 {
display: block;
margin: 30px 0 15px 0;
font-weight: 300;
}
#subscribe-form-ii  #topics-selection {
}
#subscribe-form-ii  #topics-selection table span {
padding: 0 15px 5px 0;
display: block;
float: left;
}
#subscribe-form-ii .timezone {
width: 231px;
}
#subscribe-form-ii .error {
display: block;
margin: -5px 0 10px 0;
}
#subscribe-form-ii .error span {
background: #fed;
color: #543;
}
#subscribe-form-ii table {
line-height: 25px;
}

#subscribe-form-ii-inner {
/*border: 1px solid #aaa;*/
}



/* -----------------------
tooltip
-------------------------- */


.tooltip-label, a.addto {
border-bottom: 1px solid #eee !important;
}


.tooltip-box {
z-index: 10;
padding: 10px 20px;
margin-top: 27px;
margin-left: -125px;
width: 180px;
text-align: left;
position: absolute;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
color: #eee;
border: 1px solid #ddd;
background: #333;
opacity: 0.95;
}
.tooltip-box p {
margin: 5px 0;
}
.tooltip-box a {
color: #ccc !important;
border: none;
}
.tooltip-box a:hover {
color: #ddd !important;
border-bottom: 1px solid #555 !important;
}
.tooltip-label {
cursor: pointer;
-webkit-user-select: none; /* webkit (safari, chrome) browsers */
-moz-user-select: none; /* mozilla browsers */
-khtml-user-select: none; /* webkit (konqueror) browsers */
-ms-user-select: none; /* IE10+ */
}
.tooltip-label::selection {
background: #fff;
}

.tooltip-box:after, .tooltip-box:before {
bottom: 100%;
left: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.tooltip-box:after {
border-color: rgba(250, 250, 250, 0); /* background */
border-bottom-color: #fafafa;
border-color: rgba(51, 51, 51, 0); /* background */
border-bottom-color: #333;
border-width: 8px;
margin-left: -8px;
}
.tooltip-box:before {
border-color: rgba(221, 221, 221, 0); /* border */
border-bottom-color: #ddd;
border-width: 9px;
margin-left: -9px;
}




/* ===================== */
/* mobile menu */
/* ===================== */


#mobile-menu {
background: #fafafa;
border-bottom: 1px solid #eee;
padding: 9px 0 10px 0;
}
#mobile-menu-col1 {
float: left;
width: 50%;
}
#mobile-menu-col2 {
float: left;
width: 50%;
}
#mobile-menu h3 {
text-align: center;
background: #fafafa;
margin: 0;
padding: 5px 0;
font-size: 16px;
font-weight: 600;
}
#mobile-menu ul li {
text-align: center;
background: #fafafa;
list-style: none;
}
#mobile-menu ul li a, #mobile-menu ul li a.active {
border: none;
display: block;
background: none;
color: #777;
padding: 5px 0;
}
#mobile-menu ul li a.active span {
border-bottom: 1px solid #ddd;
}
#mobile-menu-handle {
	display: none;
width: 23px;
height: 19px;
background: none;
border: none;
position: absolute;
top: 34px;
top: 29px;
top: 19px;
left: 40px;
opacity: 0.30;
}


#mobile {
display: none;
}
#mobile h1 {
display: none;
}

/* ===================== */
/* mobile */
/* ===================== */


@media only screen and (min-width : 0px) and (max-width : 1024px) {

	html {
	-webkit-text-size-adjust: 100%; /* Prevent font scaling in landscape while allowing user zoom */
	}

	#mobile-menu-handle {
	display: inline-block;
	}
	#mobile-menu {
	/*display: block;*/
	}

	#wrap {
	max-width: 1024px;
	}

	#content {
	padding: 0 40px 40px 40px;
	}

	#sidebar {
	display: none;
	}

	.feed h1 { display: none; }
	.feed h2 { margin: 40px 0 30px 0; }
	.about h1 { display: none; }
	.sponsorship h1 { margin-top: 40px; }
	
	#mobile {
	display: block;
	}
	#mobile h1 {
	margin: 0;
	display: block;
	text-align: center;
	background: #fafafa;
	border-bottom: 1px solid #eee;
	padding: 34px 0 25px 0;
	padding: 29px 0 20px 0;
	}
	#mobile h1 {
	font-size: 26px;
	}

	.about #mobile { margin: 0 0 15px 0; }

	#home-container {
	margin: 70px auto;
	width: auto;
	padding: 0 25px;
	}
	#screen {
	display: none;
	}
	#bg-img {
	display: none;	
	}
	#topics {
	max-width: 700px;
	margin: auto;
	}
	h2.desc {
	max-width: 500px;
	margin-left: auto !important;
	margin-right: auto !important;
	}
	h2.desc br {
	display: none;
	}

	span.mobile-only {
	display: inline;
	}
	.screen-only {
	display: none !important;
	}

	.notice {
	text-align: center !important;
	}
	.notice a {
	float: none;
	margin: 15px auto 5px auto;
	}
	.notice span {
	display: block;
	}

	#error-container {
	width: auto;
	padding: 0 40px;
	}

}


@media only screen and (min-width : 0px) and (max-width : 500px) {

	#content {
	padding: 0 25px 40px 25px;
	}
	#mobile-menu-handle {
	left: 25px;
	}
	#mobile h1 {
	font-size: 26px;
	}






}

@media only screen and (min-width : 765px)  and (max-width : 1024px) {


}



/* mobile */
/* ipad 768px */
/* http://stackoverflow.com/questions/3375706/ipad-browser-width-height-standard */
/* @media only screen and (min-width : 320px) and (max-width : 568px) */
/* @media only screen and (min-width : 568px)  and (max-width : 1024px) */




.star img {
display: none;
}





/*CSS for basic styling and non-retina image path:*/
#bg-img {
margin: -25px auto 0 auto;
width: 600px;
height: 375px;
}
#bg-img a {
display: block;
border: none;
width: 600px;
height: 375px;
background-image: url(/public/images/screen-small-600px.png);
/*background-size: 600px 375px;*/
}

/*CSS for serving the retina image to devices with a high "device-pixel-ratio":*/
/*
@media only screen and (-moz-min-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 3/2), only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-devicepixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx) {
	#bg-img {
	background-image: url(/public/images/s2.png);
	background-size: 600px 375px;
	}
}
*/

/*CSS for serving the retina image to devices with a high "device-pixel-ratio":*/
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
	#bg-img {
	background-image: url(/public/images/screen-big.png);
	background-size: 600px 375px;
	}
}