/*

SOC.ELECTRICGECKO.DE

malte mueller, 2010
malte@electricgecko.de
electricgecko.de

#ff0000
#fff
#111

*/


/* basics */

* {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font-weight: inherit;
	font-style: inherit;
	font-family: inherit;
	text-align: left;
	vertical-align: baseline;
    -webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

section, article, nav, footer {
	display: block;
}

::selection {
	background: #ff0000; /* Safari */
	color: #fff;
	}
::-moz-selection {
	background: #ff0000; /* Firefox */
	color: #fff;
}

html {
	font-size: 100% /*IE6 hack*/
}


body {
	background-color: #fffffa;
    color: #ff0000;
    font-family: "Courier", monospace;
    font-size: 1em;
    line-height: 1.2em;

    }


img {
	border: 0;
	max-width: 800px;	
}

/* typography */

#meta p {
	margin-bottom: 0.5em;
}

.text p {
	text-indent: 2em;
	margin-bottom: 0.75em;
}

.text p:first-child {
	text-indent: 0;
}

i, em, q {
	color: #000;
}

blockquote {
	margin-bottom: 0.3em;
	font-family: "Helvetica", "Arial", sans-serif;
	color: #111;
	font-size: 3em;
	line-height: 1.2em;
}

ul {
	list-style: none;
	padding-left: 1em;
}

h1, h2, h3, h4 { font-weight: normal; }

h1 {
	width: 100%;
	height: 9.25em;
	position: fixed;
	background: transparent url(../i/h1-soc.png) no-repeat;
	background-position: center;
	top: 30%;
	text-indent: -9999px;
	z-index: 1;
}

#meta h3 {
	text-align: center;
	color: #fff;
}

h3 {
	text-align: center;
	color: #111;
}

/* links */

a {
	color: #000;
	text-decoration: none;
	border-bottom: 1px solid #ff0000;
	-moz-outline-style: none;
	}

a:hover {
	color: #ff0000;
	border-color: #ff0000;
}

h1 a {
	display: block;
	margin: 0 auto;
	width: 9.875em;
	height: 9.25em;
	border: 0;
}

.date a {
	color: #ff0000;
	border: 0;
}

.date a:hover {
	border-bottom: 1px solid #ff0000;
}
	
/* dirty helpers */


.hidden 	{ position:absolute; left:-9999px; width:200px; }

.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}


/* navigation */

.main {
	letter-spacing: 0.2em;
	width: 100%;
	position: fixed;
	bottom: 3%;
	font-size: 0.8em;
	z-index: 2;
}

.main ul li {
	width: 20%;
	text-align: center;
	float: left;
}

.paging {
	position: relative;
	width: 60%;
	height: 15em;
	margin: -18em auto 20em auto;
	font-size: 0.75em;
	z-index: 3;
}

.past {
	float: left;
}

.past:before {
	content: "\21D0\2002";
}

.future {
	float: right;
}

.future:after {
	content: "\2002\21D2";
}

/* content */

.cap {
	display: none;
}

.content {
	position: relative;
	width: 80%;
	font-size: 0.7em;
	margin: 2% auto 0 auto;
}

.post {
	position: relative;
	margin: 0 auto 25em auto;
	padding: 1em 0 1em 0;
	z-index: 2;
	/* background-color: #fffffa; 
	background-color: #ccc;*/
}

.post:last-child {
	margin-bottom: 35em;
}

.post:first-child {
	position: relative;
	z-index: 0;
}

.post img {
	text-align: center;
	margin: 0 auto;
	display: block;
	position: relative;
	max-height: 620px;
}

.link-wrap {
	text-align: center;
}

.link-wrap a {
	font-family: "Helvetica", "Arial", sans-serif;
	color: #111;
	border-width: 2px;
	font-size: 5em;
	line-height: 1.2em;
}

.link-wrap a:hover {
	color: #ff0000;
}

hr {
	display: block;
	float: left;
	width: 1.75em;
	background-color: #ff0000;
	height: 1px;
	margin: 0.85em 0.6em 0 1em;
}

.quote-src {
	display: block;
	float: left;
}

.date {
	text-align: center;
	display: block;
	letter-spacing: 0.2em;
	margin: 1em 0 0.5em 0;
	color: #111;
}

.video {
	text-align: center;
}

/* meta info */

#meta {
	width: 100%;
	height: 100%;
	background: #ff0000 url(../i/h1-soc-fff.png) no-repeat;
	background-position: center 10%;
	position: fixed;
	top: 0;
	z-index: 10;
	color: #111;
	font-size: 0.75em;
	display: none;
}

#meta-close {
	color: #fff;
	border-color: #fff;
	display: block;
	width: 3em;
	margin-left: -1.5em;
	position: absolute;
	top: 45%;
	left: 50%;
	text-align: center;
	z-index: 15;
}

#meta-close:hover {
	color: #111;
	border-color: #111;
}

.about {
	width: 23em;
	margin: 10% 0 0 5%;
	float: left;
}

.about p {
	text-align: center;
}

.elsewhere {
	width: 23em;
	margin: 12% 5% 0 0;
	float: right;
}

.elsewhere ul {
	padding: 0;
	margin: 0;
}

.elsewhere ul li {
	text-align: center;
}

.elsewhere ul li a {
	border-color: #fff;
}

.elsewhere ul li a:hover {
	color: #fff;
}

.following {
	width: 80%;
	position: relative;
	margin: 4em auto;
}

.following p {
	text-align: center;
}

.following a:hover {
	color: #fff;
}

/* iphone */

@media handheld and (max-width: 480px), screen and (max-device-width: 480px) {

h1 {
	height: 9.25em;
	position: relative;
	top: 3em;
	margin-bottom: 6em;
}

.content {
	width: 90%;
	font-size: 1em;
}

.post {
	margin-bottom: 15em;
}

.main {
	height: 3em;
	position: relative;
	text-align: center;
	bottom: 0;
	font-size: 1.5em;
	margin: 0 auto;
	width: 80%;
}

.main:after {
	content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

.main ul li {
	float: none;
	width: 100%;
	margin-bottom: 2em;
}

.paging {
	height: 3em;
	font-size: 1.5em;
	position: relative;
	margin: -5em auto 5em auto;
}

#meta {
	padding-top: 20.5em;
	font-size: 1em;
	background-position: center 3em;
}

#meta a {
	border-bottom-color: #111;
}

#meta h3 {
	color: #111;
}

#meta-close {
	top: 11em;
	font-size: 1.5em;
	color: #111;
}

.about, .elsewhere {
	float: none;
	width: 80%;
	margin: 0 auto 5em auto;
}

.following {
	display: none;
}

}