@import url(colors.css);

html, body {
	height: 100%;
}

body {
	margin: 0px;
	padding: 0px;
	font-family: 'Helvetica Neue', Helvetica, sans-serif, Arial, Geneva, 'Lucida Grande', Verdana, Helvetica, sans-serif;
	font-size: 13px;
	background: #e9e9e9 url(../images/page/background/gradient.png) repeat-x top left;
	min-width: 800px;
}

body.simple-head { background-position: 0em 10em; }
body.extra-head { background-position: 0em 15em; }
body.full-head { background-position: 0em 15em; }

a { color: #c0002f; outline-style: none; }
a:hover { color: #555; }

a:link, a:visited { text-decoration: none; }
a:hover, a:active { text-decoration: underline; }

img { border: 0px; }

pre {
  max-width: 600px;
  max-height: 400px;
  border: 1px solid #ddd;
  background: #eee;
  overflow-x: auto;
  overflow-y: auto;
  padding: 1em 2em;
  font-size: 90%;
  line-height: 1.2em;
  margin: 2em 0em;
}

#container {
	background: url(../images/page/background/overlay.png) repeat;
	position: relative;
	min-height: 100%;
}


/*
 * Header
 */

#header {
	background-repeat: repeat-x;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	overflow: hidden;
}

#header > div {
	background: url(../images/page/header/overlay.png) no-repeat top right;
}

#header > div:after {
	content: ".";
	display: block;
	height: 0px;
	clear: both;
	visibility: hidden;
}

#header ul {
	margin: 0px;
	padding: 0px;
	list-style: none;
}

/* Homepage */

#header .homepage:after {
	content: ".";
	display: block;
	height: 0px;
	clear: both;
	visibility: hidden;
}

#header .homepage a {
	height: 25px;
	width: 80px;
	display: block;
	float: right;
	background-color: rgba(255,255,255,0.4);
	background-position: 16px 7px;
	background-image: url(../images/page/header/fadingred.png);
	background-repeat: no-repeat;
	margin: 2em 0em 0em 0em;
	padding: 0.1em 0.8em 0.1em 0.8em;
	-moz-border-radius-topleft: 20px;
	-webkit-border-top-left-radius: 20px;
	-moz-border-radius-bottomleft: 20px;
	-webkit-border-bottom-left-radius: 20px;
}

#header .homepage a:hover {
	background-color: #c0002f;
	
}

#header .homepage span { display: none; }

/* Alignment */

#header .icon,
#header .menu {
	float: left;
	text-align: right;
	width: 21%;
}

#header .title,
#header .info,
#header .buttons {
	float: right;
	width: 75%;
}

body.simple-head #header .title h1 {
	margin: 0px 0px 2em 0px;
}

#header .info p {
	width: 66.7%;
}

/* Title */

#header h1 {
	text-transform: lowercase;
	font-size: 120%;
	font-weight: 300;
	color: #fff;
	color: rgba(255,255,255,0.6);
	margin-bottom: 1.5em;
}

#header h1 span { display: none; }

#header h1 strong {
	display: block;
	margin-left: -0.05em;
	color: #fff;
	line-height: 1em;
	font-size: 570%;
}

body.koku #header h1 strong:after {
	content: "1.0";
	display: inline-block;
	margin-left: 0.6em;
	margin-top: 1em;
	font-size: 15%;
	line-height: 1.8em;
	padding: 0em 1em;
	vertical-align: top;
	background-color: rgba(255,255,255,0.4);
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
}

/* Icon */

#header .icon img {
	margin-top: 1em;
	width: 96px;
	height: 96px;
}

/* Info */

#header .info {
	color: rgba(255,255,255,0.7);
	font-size: 140%;
	font-weight: lighter;
}
#header .info p {
	padding: 0px;
	margin: 0px 25% 1em 0px;
}

/* Menu */

body.simple-head #header .menu,
body.extra-head #header .menu { margin-bottom: 1.5em; }
body.simple-head #header .menu { margin-top: 1.5em; }

#header .menu { text-transform: uppercase; }

#header .menu li a {
	color: #000;
	color: rgba(255,255,255,0.5);
}

#header .menu li a.active {
	color: #fff;
}

#header .menu li a:hover {
	color: #fff;
	text-decoration: none;
}

/* Buttons */

#header .buttons { text-transform: lowercase; }

#header .buttons > div {
	float: left;
	background-repeat: repeat-x;
	background-color: #1e1e1e;
	background-image: url(../images/page/header/buttons.png);
	-moz-box-shadow: 0px 0px 5px rgba(0,0,0,0.6);
	-webkit-box-shadow: 0px 0px 5px rgba(0,0,0,0.6);
	-moz-border-radius-topleft: 8px;
	-webkit-border-top-left-radius: 8px;
	-moz-border-radius-topright: 8px;
	-webkit-border-top-right-radius: 8px;
}

#header .buttons li {
	float: left;
	position: relative;
	font-size: 115%;
	border-right: 1px solid rgba(0,0,0,0.15);
	border-left: 1px solid rgba(0,0,0,0.05);
}

#header .buttons li:first-child { border-left: none; }
#header .buttons li:last-child { border-right: none; }

#header .buttons li > a {
	display: block;
	color: #fff;
	padding: 0.8em 1.7em;
	font-weight: lighter;
}

#header .buttons li:hover { background: rgba(255,255,255,0.08); }
#header .buttons li:first-child { -moz-border-radius-topleft: 8px; -webkit-border-top-left-radius: 8px; }
#header .buttons li:last-child { -moz-border-radius-topright: 8px; -webkit-border-top-right-radius: 8px; }
#header .buttons li > a:hover { text-decoration: none; }

#header .buttons .popup {
	position: absolute;
	display: none;
	width: 100%;
}
#header .buttons .popup p {
	text-transform: none;
	text-align: center;
	font-size: 80%;
	background: #fff;
	padding: 1em 1.2em;
	margin: 0px;
	border-radius: 8px;
	-moz-border-radius: 8px;
	-webkit-border-radius: 8px;
	-moz-box-shadow: 0px 0px 5px rgba(0,0,0,0.6);
	-webkit-box-shadow: 0px 0px 5px rgba(0,0,0,0.6);
}

#header .buttons .popup:after {
	display: block;
	content: '';
	background: url(../images/page/header/point.png) no-repeat;
	width: 27px;
	height: 17px;
	margin: 0px auto;
}


/*
 * Content
 */

#content {
	padding-top: 1em;
}

#content > .promo:first-child,
#content > .social:first-child {
	margin-top: 2em;
}

#content > .promo,
#content > .social {
	float: left;
	clear: left;
	width: 21%;
	margin: 0.8em 0px;
}

#content > .promo > div,
#content > .social > div {
	float: right;
	width: 45%;
	padding: 0.5em 1.2em;
	text-align: center;
	background-color: #fff;
	-moz-border-radius: 8px;
	-webkit-border-radius: 8px;
	-moz-border-radius-topleft: 0px;
	-webkit-border-top-left-radius: 0px;
	-moz-box-shadow: 0px 0px 3px rgba(0,0,0,0.35);
	-webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.35);
}

#content > .promo span { display: block; margin-bottom: 0.5em; }
#content > .promo .headline { font-size: 150%; }
#content > .promo .details { font-size: 80%; }

#content > .social p { margin: 0.5em 1em; font-size: 80%; color: #888; }
#content > .social p:first-child { margin-top: 1em; }
#content > .social p:last-child { margin-bottom: 1em; }

#content > .main {
	min-height: 200px;
	width: 50%;
	padding: 0px;
	margin: 1.5em auto 0em auto;
	font-size: 115%;
	font-weight: 300;
	padding-bottom: 6em;
}

#content > .main > p:first-child {
	font-size: 120%;
}

#content > .main h1 { font-size: 215%; }
#content > .main h2 { font-size: 200%; }
#content > .main h2 { font-size: 175%; }

#content > .main h1,
#content > .main h2 {
	font-weight: 300;
	margin-bottom: 0.3em;
}

#content > .main h3 {
	font-weight: 400;
	margin-top: 1.5em;
	margin-bottom: 0.2em;
}
#content > .main h3 + p {
	margin-top: 0.2em;
}

#content > .main .note {
	font-size: 80%;
	color: #888;
}

/* Screenshots */

#content > .main .screenshots {
	display: table;
	background-color: #e4e4e4;
	border: 8px solid #fff;
	padding: 1.5em 2em;
	margin: 1.2em 0em 2em 0em;
	-moz-box-shadow: 0px 0px 3px rgba(0,0,0,0.35);
	-webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.35);
}

#content > .main .screenshots div.row {
	white-space: nowrap;
	display: table-row;
}

#content > .main .screenshots a {
	display: inline-block;
	padding: 0.4em 0.4em;
}

/* Features */

#content .main ul.features {
	list-style: none;
	padding: 0px;
}

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

#content .main ul.features li {
	width: 40%;
	padding: 0px 10% 0px 0px;
	margin-bottom: 0.8em;
	float: left;
}

.features strong {
	font-weight: 400;
	font-size: 100%;
}

.features p {
	margin-top: 0.5em;
}

#content .main ul.features li:nth-child(odd) { clear: left; }


/*
 * Footer
 */


#footer {
	background: #fff;
	background: rgba(255,255,255,0.5);
	color: #bcbcbc;
	border-top: 1px solid #d3d3d3;
	font-size: 75%;
	position: absolute;
	bottom: 0;
	height: 2.8em;
	overflow: hidden;
	width:100%;
}

#footer > div {
	padding: 0.8em 1.2em;
}

#footer ul {
	display: inline;
	list-style: none;
	padding: 0px;
}

#footer ul li {
	display: inline;
	text-transform: uppercase;
	padding-right: 0.5em;
}

#footer .copyright {
	float: right;
}

#footer a { color: #bcbcbc; }
#footer a:hover { color: #777; }
#footer a:hover { text-decoration: none; }
#footer a:active { text-decoration: none; }

#footer a[href="/"],
#footer a[href="http://www.fadingred.com/"] {
	background: url(../images/page/footer/fadingred.png) no-repeat;
	opacity: 0.5;
	width: 1.5em;
	height: 1.5em;
	display: block;
	float: left;
	margin-right: 0.3em;
}

#footer a[href="/"]:hover,
#footer a[href="http://www.fadingred.com/"]:hover { opacity: 1.0; }
#footer a[href="/"] span,
#footer a[href="http://www.fadingred.com/"] span { display: none; }


/*
 * Other
 */

ul.instructions {
	list-style: none;
	margin: 2em;
	padding: 0px;
}

ul.instructions li span {
	display: block;
	float: left;
	font-size: 200%;
	margin-right: 0.5em;
	vertical-align: top;
}

ul.instructions li img {
	margin: 0em 1em;
	display: block;
	clear: both;
}

table.listing {
  border-collapse: collapse;
}
table.listing td,
table.listing th {
  text-align: left;
  font-size: 85%;
  padding: 0.3em 1em;
  border: 1px solid #ccc;
  background-color: #eee;
}
table.listing th {
  font-weight: normal;
  font-size: 90%;
}

ul.support {
	list-style: none;
	padding: 0px;
}

ul.support li a strong {
	display: block;
	margin-top: 0.4em;
	font-size: 140%;
	color: #000;
}

ul.support li a span {
	font-size: 80%;
}

ul.support li a {
	display: block;
	width: 35%;
	height: 64px;
	background: #efefef url(../images/page/general/lightgradient.png) repeat-x;
	margin: 1em 0em;
	padding: 1em 2.4em;
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	-moz-box-shadow: 0px 0px 3px rgba(0,0,0,0.25);
	-webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.25);
}

ul.support li a:hover strong { color: #fff; }
ul.support li a:hover {
	background: #c0002f url(../images/page/general/redgradient.png) repeat-x;
	color: #fff;
	text-decoration: none;
}

ul.support img {
	width: 64px;
	height: 64px;
	margin-right: 0.8em;
	float: left;
}

img.bordered {
	border: 8px solid #fff;
	-moz-box-shadow: 0px 0px 3px rgba(0,0,0,0.35);
	-webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.35);
}