@media screen and (max-width: 1215px) {
	body { font-size:.9em; }
}
@media screen and (max-width: 1075px) {
	body { font-size:.85em; }
}
@media screen and (max-width: 1025px) {
	body { font-size:.8em; }
}
@media screen and (max-width: 960px) {
	body { font-size:.75em; }
}
@media screen and (max-width: 900px) {
	body #header h1 { font-size:7em; }
}
@media screen and (max-width: 800px) {
	body { font-size:.7em; }
	body #header h1 { font-size:6em; margin:0 0 -0.9em 0.85em; }
}
@media screen and (max-width: 680px) {
	body #header h1 { font-size:5em; }
	body #header h2 { height:14em; }
	body #content li.feeditem:first-child { font-size:2em; }
}
@media screen and (max-width: 580px) {
	body #header h1 { font-size:3em; }
	body #header h2 { height:12em; -webkit-background-size:0.75; -moz-background-size:0.75; }
}



@font-face {
	font-family: 'Charis';
	src: local('Charis SIL'),
		url('/ssf/fonts/CharisSILR.ttf') format('opentype');
}

div.messages
{
}
div.message
{
	position:fixed;
	top:-5em;
	left:0;
	width:100%;
	line-height:3em;
	color:#fff;
	text-shadow: 1px 1px 1px #000;
	letter-spacing:.1em;
	background:#7cbde7;
	background: rgba(124, 189, 231, 0.9);
	z-index:9001;
	border-width:1px 0;
	border-style:solid;
	border-color:#9cddf7;
	font-weight:bold;
	text-align:center;
	font-size:16px;
	-webkit-transition:top 0.25s linear;
	-moz-transition:top 0.25s linear;
}
div.message.visible 
{
	top:0;
	-webkit-transition:top 0.5s linear;
	-moz-transition:top 0.5s linear;
}
div.message span.loadprogress
{ 
	background: url('/ssf/images/load.gif') no-repeat center left;
	padding:16px;
	margin-left:1em;
	width:16px;
	height:16px;
}
div.message span.cancel,
div.message span.yes,
div.message span.no 
{
	margin-left:1em;
	text-shadow:none;
	font-size:.8em;
	cursor:pointer;
}

* { 
	margin:0;
	padding:0;
	}
body {
	font-family:helvetica,arial,sans-serif;
	color:#222;
	
	/* non-webkit, non-mozilla */
	background:#fff url('/ssf/images/line_medium.png');
	
	/* mozilla */
	background: 
		-moz-linear-gradient(right,rgba(255,255,255,1),rgba(255,255,255,0),rgba(255,255,255,0)),
		url('/ssf/images/line_medium.png') repeat,
		#fff;
	
	/* webkit */
	background:
		-webkit-gradient(linear,right top,left top,from(rgba(255,255,255,1)),to(rgba(255,255,255,0))),
		url('/ssf/images/line_medium.png') repeat,
		#fff;
	
	}
h1,h2 {
	font-family:Charis,'bitstream charter',serif;
	}
.page {
	overflow:hidden;
	padding-bottom:30px;
	}
	
@-webkit-keyframes pan {
	0% {
		background-position: left bottom;
	}
	100% {
		background-position: right bottom;
	}
}
	
#header h1 {
	font-size:8em;
	margin:-40px 0 -0.8em 0.5em;
	position:relative;
	z-index:200;
 	color:#f0f0f0;
	
	background:url('/ssf/images/paint.png') repeat,-webkit-gradient(linear,left top,left bottom,from(rgba(0,0,0,0)),to(rgba(0,0,0,0))) no-repeat;
	-webkit-text-fill-color: transparent;
	-webkit-background-clip: text;
	-webkit-animation-name: pan;
	-webkit-animation-duration: 15s;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-timing-function: linear;
	-webkit-animation-direction: alternate;
	text-shadow:2px 2px 5px rgba(0,0,0,0.5);
	}

#header h2 {

	/* non-webkit, non-mozilla */
	background:#333 url('/ssf/images/logo_white.png') no-repeat center 80%;
	
	/* mozilla */
	background: 
		url('/ssf/images/logo_white.png') no-repeat center 80%,
		-moz-linear-gradient(top,rgba(255,255,255,0.35),rgba(255,255,255,0)),
		url('/ssf/images/line_dark.png') repeat,
		#333;
	
	/* webkit */
	background:
		url('/ssf/images/logo_white.png') no-repeat center 80%,
		-webkit-gradient(linear,left top,left bottom,from(rgba(255,255,255,0.35)),to(rgba(255,255,255,0))),
		url('/ssf/images/line_dark.png') repeat,
		#333;
		
	position:absolute;
	z-index:300;
	top:-40px;
	right:8em;
	height:16em;
	padding:10px 1em 0 1em;
	border:1px solid #555;
	border-left-color:#777;
	border-bottom-color:#666;
	-moz-box-shadow:5px 5px 9px rgba(0,0,0,0.75);
	-webkit-box-shadow:5px 5px 9px rgba(0,0,0,0.75);
	font-size:0.85em;
	vertical-align:bottom;
	text-align:center;
	color:#fff;
	text-shadow:2px 2px 3px rgba(0,0,0,0.5);
	-webkit-transition:top 0.25s linear;
	-moz-transition:top 0.25s linear;
	}
#header h2:hover {
	top:-10px;
	-webkit-transition:top 0.25s linear;
	-moz-transition:top 0.25s linear;
	}
	
#content {
	margin:3em auto;
	padding:0 6em 0 3em;
	}
#content #feeditem_info {
	position:relative;
	line-height:2em;
	font-size:1.25em;
	color:#444;
	text-shadow:1px 1px 0 rgba(255,255,255,0.75);
	background:#eee url('/ssf/images/line_medium.png');
	padding:0 0.5em;
	}
#content #feeditem_info #feeditem_count {
	font-weight:bold;
	font-size:1.25em;
	}
#content .feeditems {
	z-index:240;
	position:relative;
	list-style:none;
	}
#content li.feeditem {
	line-height:1.25em;
	color:#333;
	padding:0 0.5em;
	border-bottom:1px solid #ccc;
	position:relative;
	font-size:2em;
/* 	overflow:hidden; */
	-webkit-transition:background-color 0.5s linear;
	-moz-transition:background-color 0.25s linear;
	}
#content .feeditems li.feeditem:hover {
	-webkit-transition:background-color 0.5s linear;
	-moz-transition:background-color 0.25s linear;
	}

#content .feeditems li.feeditem.twitter.active,
#content .feeditems li.feeditem.twitter:hover {
	background:#ffe;
	}
#content .feeditems li.feeditem.flickr.active,
#content .feeditems li.feeditem.flickr:hover {
	background:#eff;
	}
#content .feeditems li.feeditem.delicious.active,
#content .feeditems li.feeditem.delicious:hover {
	background:#fef;
	}
#content .feeditems li.feeditem.tumblr.active,
#content .feeditems li.feeditem.tumblr:hover {
	background:#efe;
	}
#content .feeditems li.feeditem.youtube.active,
#content .feeditems li.feeditem.youtube:hover {
	background:#fee;
	}
#content .feeditems li.feeditem.livejournal.active,
#content .feeditems li.feeditem.livejournal:hover {
	background:#eef;
	}
#content li.feeditem:nth-child(even) {
	background:#f3f3f3 url('/ssf/images/line_medium.png');
	}
#content li.feeditem a.feedtitle {
	display:block;
	padding:0.66em 0;
	}
#content li.feeditem:first-child {
	font-size:4em;
	line-height:0.8em;
	padding:0 0.35em;
	}
#content li.feeditem:first-child a.feedtitle {
	padding:0.35em 0;
	}
#content li.feeditem:first-child span.feedtitle {
	font-weight:bold;
	font-family:Charis,'bitstream charter',serif;
	}
#content li.feeditem:first-child span.feeddate {
	text-shadow:-1px -1px 0 rgba(0,0,0,0.5);
	color:#bbb;
	}
	
#content li.feeditem span.feedtitle {
	position:relative;
	z-index:110;
	text-shadow:2px 2px 6px rgba(0,0,0,0.25);
	}
#content li.feeditem span.feeddate {
	color:#999;
	position:relative;
	z-index:100;
	text-shadow:1px 1px 4px rgba(0,0,0,0.15);
	}
#content li.feeditem a {
	text-decoration:none;
	color:inherit;
	outline:0;
	}
#content li.feeditem .contents a:hover {
	text-decoration:underline;
	}
#content li.feeditem div.contents {
	display:none;
	font-size:0.5em;
	line-height:1.25em;
	padding-bottom:1.33em;
	}
#content li.feeditem:first-child div.contents {
	padding-bottom:0.66em;
	}
#content li.feeditem a.feedtitle:hover:before {
	content: "click to expand";
	color:#fff;
	background-color:#666;
	background-color:rgba(96,96,96,0.75);
	padding:0 0.25em;
	line-height:1.25em;
	font-size:12px;
	position:absolute;
	bottom:0; left:0;
	font-family:helvetica,arial,sans-serif;
	}
#content li.feeditem.active a.feedtitle:hover:before {
	content: "click to collapse";
	}
#footer {
	border-color:#999;
	border-style:solid;
	border-width:1px 0;
	background:#eee url('/ssf/images/line_medium.png') repeat 0 0;
	color:#222;
	padding:1em;
	font-size:.9em;
	text-align:center;
	text-shadow:1px 1px 2px rgba(0,0,0,0.35);
	}