/* http://meyerweb.com/eric/tools/css/reset/ */
/* v1.0 | 20080212 */
html,body,div,span,applet,object,iframe,
h1,h2,h3,h4,h5,h6,p,blockquote,pre,
a,abbr,acronym,address,big,cite,code,
del,dfn,em,font,img,ins,kbd,q,s,samp,
small,strike,strong,sub,sup,tt,var,
b,u,i,center,
dl,dt,dd,ol,ul,li,
fieldset,form,label,legend,
table,caption,tbody,tfoot,thead,tr,th,td { margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent; }
body { line-height:1; }
ol,ul { list-style:none; }
blockquote,q { quotes:none; }
blockquote:before,
blockquote:after,
q:before,q:after { content:'';content:none; }
:focus { outline:0; }
ins { text-decoration:none; }
del { text-decoration:line-through; }
table { border-collapse:collapse;border-spacing:0; }
/*html5*/
article, aside, dialog, figure, footer, header,hgroup, menu, nav, section { display: block; }
/*assets */
#accesslinks { position: absolute; left: 0; top: 0em; display: block; width: 20em; }
#accesslinks li { position: absolute; top: 0em; display: block; left: 0; text-align: center; width: 20em; }
#accesslinks li a { position: absolute; top: -10em; z-index: 999; }
#accesslinks li a {display: block; line-height: 2em; font-weight: bold;position: relative; color: #FFFFFF; font-size: 0.75em;}
#accesslinks li a:focus, #access li a:active { background: #000000;  top: 0em; text-decoration: none; }
.ir { position: relative; display: block; }
a.ir { cursor: pointer; }
.ir span { width: 100%; height: 100%; display: block; position: absolute; top: 0; left: 0; background-repeat: no-repeat;}
/*main*/
body {
	background:url(/images/bg.png) 50% 0 repeat;
	color: black;
	font: normal 1em/1.7 "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-weight: 300;
	margin: 0;
	padding: 0 0 1em 0;
}
div.fade {
width:100%;
background:url(/images/bg-fade.png) 50% 0 repeat-x;
}
a {
	color: #32aeba;
	text-decoration: none;
}
a:hover,
a:focus {
	color: #39c;
	text-decoration: none;
	border-bottom-color:#39c;
}

a:active,
a:focus {
	background-color: #ddd;
}

abbr,
acronym {
	cursor: help;
}
input.text,
textarea {
	border: none;
	outline: 1px solid #C3C3C3;
	font-family: inherit;
	font-size: 0.875em;		/* 12px / 16px = 0.875em */
}

em {
	font-family: Calibri, "Trebuchet MS", Helvetica, Arial, sans-serif;
}

cite {
	font-family: Constantia, Georgia, Palatino, "Times New Roman", Times, serif;
}

blockquote,
ol,
p,
ul,
dl {
	margin-bottom: 1.2em;
}
dt {
	font-weight:bold;
}
dd {
	font-style:italic;
	margin-left:1em;
}

blockquote,aside {
	background: rgba(255,255,255,0.05);
	border-radius: 0 1em;
	-moz-border-radius: 0 1em;
	-webkit-border-radius: 0 1em;
	color: #DEDEDE;
	font: normal .95em/1.7 Georgia, "Times New Roman", Times, serif;
	font-style: italic;
	margin: 0 0 1.5em;
	padding: 1.5em 1.5em 0.5em;
}

blockquote em,
blockquote p cite {
	font-style: normal;
}

li.comment blockquote {
	border-left: 2px solid #525252;
	background: none;
	border-radius: 0;
	-moz-border-radius: 0;
	-webkit-border-radius: 0;
	margin-left: 0;
}

address {
	font-size: 0.95em;
	margin-bottom: 1em;
	text-align: right;
}

address:before {
	content: "";
}

.note {
	font-style: normal;
	font-size: 0.75em;	/* 12px / 16px = 0.75 */
}

ol.code li,
code,
pre {
	color: #FEA;
	font: normal .8em "Inconsolata", "Profont", "Bitstream Vera Sans Mono", "Monaco", "Courier New", courier, monospace;
}

a code {
	color: inherit;
}

time {width:100%;}

del {
	color: #6A6A6A;
}

img,
object {
	max-width: 100%;
}

object {
	margin: 0 auto 1em;
	max-width: 100%;
}

form {
	text-align: center;
}

form table {
	margin: 0 auto;
	max-width: 70.779%;	/* 700px / 989px = 0.70779 */
}

form th,
form td {
	display: block;
}

form th {
	font-weight: normal;
	padding-bottom: 0.25em;
}

form td {
	padding-bottom: 0.5em;
}

form table input.text,
form table textarea {
	display: block;
	width: 100%;
}

/* Layout */
div.container {
  margin:0 auto;border:0;
  width:555px;
}
header#banner {
	padding-top:1em;
  height:12em;
  text-align:center;
}
#banner h1 {
	float:left;
	width:220px;
	color:#eee;
	text-align:left;
	font-weight:normal;
}
#appspace {
	float:right;
	color:white;
	font-size:13px;
	width:270px;
}
#appspace h1 {
	width:auto;
}
#appspace h1 a {
	color:white;
	font-size:1.2em;
}
#appspace p {
margin-bottom:0;
}
#appspace p a {
color:white;
text-decoration:underline;
}
#appspace p a:hover {
text-decoration:none;
}
nav {margin:0 auto;width:555px;}
nav ul {width:555px;overflow:hidden;margin:0;}
nav ul li {display:inline;margin:0;background:#eee;float:left;height:45px;}
nav ul li a {color:#999; text-transform:uppercase;text-decoration:none;font-weight:bold;vertical-align:top;letter-spacing:1px;}
nav ul li a:hover {text-decoration:underline;color:#666;cursor:pointer;}
nav ul li a span {background:url(/images/nav.png) 0 0 no-repeat;}

li#nav-latest {width:139px;}
li#nav-popular {width:140px;}
li#nav-search {width:139px;}
li#nav-about {width:137px;}

li#nav-latest span {background-position:0 0;}
li#nav-popular span {background-position:-139px 0;}
li#nav-search span {background-position:-279px 0;}
li#nav-about span {background-position:100% 0}

section.content {
background:url(/images/content-bg.png) 0 0 repeat-y;
 overflow:hidden;
 margin:0;
text-align:center;
width:555px;
margin:0 auto;
min-height:300px;
}
ol li article { border-bottom:1px solid #efeeee;margin:1em;}
ol li article figure {
	padding:3px 8px 6px 8px;background:url(/images/image-bg.png) 50% 100% no-repeat;margin:0;
	position:relative;
}
ol li article.landscape90 figure, ol li article.landscape270 figure {
	padding:6px 7px 7px 7px;background:url(/images/image-bg-landscape.png) 50% 100% no-repeat;margin:0;
	position:relative;
}
ol li article figure {
	padding:3px 8px 6px 8px;
	margin:0;
	position:relative;
}
ol li article.landscape90 figure, ol li article.landscape270 figure {
	padding:6px 7px 5px 7px;
	margin:0;
	position:relative;
}

ol li article figure div.image-info {
 display:none;
 position:absolute;
 bottom:13px;
 left:50%;
 margin-left:-160px;
 text-align:left;
 width:320px;
 background:rgba(0,0,0,0.5);
 color:white;
}
ol li article.landscape90 figure div.image-info, ol li article.landscape270 figure div.image-info {
 display:none;
 position:absolute;
 bottom:13px;
 left:50%;
 margin-left:-230px;
 text-align:left;
 width:460px;
 background:rgba(0,0,0,0.5);
 color:white;
}
ol li article figure img {
/* Implement later
	-moz-box-shadow:0 6px 12px #999999;
	-webkit-box-shadow:0 6px 12px #999999;
	-o-box-shadow:0 6px 12px #999999;
	box-shadow:0 6px 12px #999999;
*/}
ol li article.landscape90 figure img, ol li article.landscape270 figure img {width:460px;}
ol li article.portrait0 figure img, l li article.portrait180 figure img {width:320px;}
html>body ol li article.landscape90 figure img, html>body ol li article.landscape270 figure img {width:auto;max-width:460px;}
html>body ol li article.portrait0 figure img, html>body ol li article.portrait180 figure img {width:auto;max-width:320px;}

ol li article figure:hover div.image-info {display:block;}
div.image-info ul {margin:5px 0 5px 10px;}


footer {overflow:hidden;margin-bottom:10px;}
.post-info ul {width:320px;margin:0 auto;}
.post-info li {float:left;clear:left;}
.post-info li a {color:#666;text-decoration:none;}
.post-info li.like {float:right;margin:0;width:30px;clear:right;}
.post-info li.like a {float:right;margin:0;width:30px;padding-left:30px;background:url(/images/like.png) 0 5px no-repeat;}
.post-info li.liked {float:right;margin:0;width:30px;padding-left:30px;background:url(/images/liked.png) 0 5px no-repeat;color:#aaa;}
.post-info li.likes {float:right;clear:right;text-align:right;margin:0;width:100px;color:#666;}

#loadmore a {border:1px solid #32aeba;background:#afdee3;margin:0 auto;width:250px;padding:10px;border-radius:0.2em;-moz-border-radius:0.2em;-webkit-border-radius:0.2em;}

#about article p, #free article p {text-align:left;margin:2em;}
#free article ol {text-align:left;margin:2em; list-style:decimal;}
#free article ol li {text-align:left;margin:2em; list-style:decimal;}

#footer {margin-top:30px;color:white;}
#footer a {color:white;}

#main-content {background:url(/images/content-bottom.png) 0 100% no-repeat;padding-bottom:7px;}

/* Twitter */
.twitter_results {
	border-top:1px solid #aaa;
	border-bottom:0;
	width:320px;
	margin:0 auto;
	height:auto;
}
.twitter_status{
	font-size:12px;
	text-align:left;
	padding:6px;
	border-bottom:solid 1px #DEDEDE;
}
.twitter_image{
	float:left; 
	margin-right:14px;
	border:solid 2px #DEDEDE;
	width:50px;
	height:50px;
}
.twitter_small{
 font-size:11px;
 padding-top:4px;
 color:#999;
 clear:left;
}