@charset "utf-8";

@font-face {
	font-family: MuseoSans500;
	src: url("fonts/MuseoSans500.eot?v=20110922");
	src: url("fonts/MuseoSans500.eot?#iefix") format("embedded-opentype"),
		url("fonts/MuseoSans500.woff?v=20110922") format("woff"),
		url("fonts/MuseoSans500.ttf?v=20110922") format("truetype"),
		url("fonts/MuseoSans500.svg#MuseoSans-500") format("svg");
}

html { margin: 0; padding: 0; width: 100%; height: 100%; }

body {
	line-height: 1.5em;
	font-family: MuseoSans500, "Lucida Sans Unicode", "Lucida Grande", "Dejavu Sans", "Bitstream Vera Sans", sans-serif;
	font-size: 16px;
	background-color: #eee;
	margin: 0;
	padding: 0;
	width: 100%;
	height: 99.5%;
	overflow-y: scroll;
}

a, #imageinfolink, #selectimage span, .prebuttons {
	transition: all 0.2s cubic-bezier(0.42, 0, 0.58, 1) 0s;
	-o-transition: all 0.2s cubic-bezier(0.42, 0, 0.58, 1) 0s;
	-moz-transition: all 0.2s cubic-bezier(0.42, 0, 0.58, 1) 0s;
	-webkit-transition: all 0.2s cubic-bezier(0.42, 0, 0.58, 1) 0s;
}

#bgimage {
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	z-index: -100;
}
#newbgimage {
	position: fixed;
	left: 5000px;
	top: 0;
	width: 100%;
	z-index: -99;
}

#menu {
	position: absolute;
	left: 0;
	top: 12px;
	font-size: 22px;
	height: 44px;
	line-height: 44px;
	width: 100%;
	color: #fff;
}
#menu div.bg {
	width: 100%;
	position: absolute;
	left: 0;
	background-color: #000;
	opacity: 0.5;
	z-index: -1;
	height: 100%;
}
#menu a {
	color: #fff;
	text-decoration: none;
	padding: .5em;
	text-shadow: #111 1px 1px 1px;
}
#menu a:hover, #imageinfolink:hover { color: #aaa; }
#imageinfolink {
	display: inline;
	cursor: pointer;
	text-align: center;
	margin-right: 1em;
	font-size: 16px;
	line-height: 44px;
	vertical-align: top;
	color: #fff;
}
#rightmenu {
	position: absolute;
	right: .5em;
	top: 0;

	padding: 0;
	margin: 0;
	padding-left: .5em;
	border-left: 1px solid #fff;
	height: 100%;
}

#selectimage {
	display: inline;
	margin-right: 1em;
}
#selectimage span {
	color: #fff;
	font-size: 32px;
	margin: 0 .1em;
	cursor: pointer;
}
#selectimage span:hover {
	color: #aaa;
	transform: translate(0px, -4px);
	-o-transform: translate(0px, -4px);
	-moz-transform: translate(0px, -4px);
	-webkit-transform: translate(0px, -4px);
}
#selectimage .selected { color: #f22; }

#content {
	position: relative;
	top: 68px;
	padding: .5em;
	padding-left: 1em;
	padding-top: 1.5em;
	width: 49em;
	min-height: 89.5%;
	box-shadow: 2px 2px 6px #555;
	-moz-box-shadow: 2px 2px 6px #555;
	-webkit-box-shadow: 2px 2px 6px #555;

	overflow-y: hidden;
	background-color: #fff;

	opacity: 0.9;
	opacity: 1;
}

#imageinfo {
	font-size: 16px;
	color: #000;
	background-color: #fff;
	position: fixed;
	right: -.1em;
	top: -.2em;
	line-height: 1.6em;
	text-align: left;

	min-width: 5em;
	max-width: 45em;
	min-height: 1em;
	
	padding: 0em .3em;
	display: none;
	/*border: 1px solid #444;*/
	overflow: visible;

	border-radius: 4px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;

	box-shadow: 2px 2px 6px #555;
	-moz-box-shadow: 2px 2px 6px #555;
	-webkit-box-shadow: 2px -2px 6px #555;

	transition: all .9s cubic-bezier(0.42, 0, 0.58, 1) .1s;
	-moz-transition: all .9s cubic-bezier(0.42, 0, 0.58, 1) .1s;
	-webkit-transition: all .9s cubic-bezier(0.42, 0, 0.58, 1) .1s;
	-o-transition: all .9s cubic-bezier(0.42, 0, 0.58, 1) .1s;

	/*opacity: 0.2;*/
}

a { color: #00f; text-decoration: none; }
a:hover { color: #15f; }
#imageinfo a { color:  #00f;  text-shadow: none; margin: 0; padding: 0; }
#imageinfo a:hover { color: #15f; }
#imageinfo:hover { opacity: 1 !important; }

#poweredby {
	text-align: center;
	width: 100%;
	/*
	position: absolute;
	bottom: 10px;
	left: 0px;
	*/
	margin: 1.5em 0;
}

#poweredby img {
	margin: 0 1em;
	vertical-align: middle;
}
#showpage { color: #00f; cursor: pointer; float: right; }

/*************/
a { color: #00f; text-decoration: none; }
a:hover { color: #15f; }
a img { border: none; }

form { margin: 0; padding: 0; }
input, textarea {
	font-family: "Dejavu Sans Mono", "Bitstream Sans Mono", "Consolas", monospace;
	font-size: 14px;
	padding: .3em .5em;
	border: 1px solid #b7b7b7;
	border-radius: 3px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	background-color: #fff;
	color: #000;
	opacity: 1;
}
input[type=submit] { font-size: 1.1em; background-color: #eee; color: #000; }
textarea { width: 90%; }

input:focus, textarea:focus, select:focus, *:target {
	border: 1px solid #36a;

	box-shadow: 0px 0px 3px #36a;
	-moz-box-shadow: 0px 0px 3px #36a;
	-webkit-box-shadow: 0px 0px 3px #36a;
}
/*
*:target { background-color: yellow; }
*/
pre {
	color: #fff;
	background-color: #555;
	/*opacity: .9;*/
	opacity: 1;
	line-height: 1em;
	width: auto;
	max-height: 500px;
	padding: 1em;
	overflow: auto;
	clear: right;
	border-radius: 4px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
}
.prebuttons {
	float: right;
	padding-right: 1.5em;
	cursor: pointer;
	line-height: 1.4em;
	height: 1em;
}
	
.prebuttons:hover {
	transform: translate(0px, -4px);
	-o-transform: translate(0px, -4px);
	-moz-transform: translate(0px, -4px);
	-webkit-transform: translate(0px, -4px);
}

.prebuttons a {
	color: #fff;
	background-color: #555;
	/*opacity: .9;*/
	opacity: 1;
	padding: .2em .4em;

	border-radius: 8px 8px 0 0;
	-moz-border-radius: 8px 8px 0 0;
	-webkit-border-radius: 8px 8px 0 0;
}

a.headerlink {
	visibility: hidden;
	font-weight: normal;
	/*font-size: .8em;*/
	padding: .1em .3em;
}
h1:hover > a.headerlink, h2:hover > a.headerlink,
h3:hover > a.headerlink, h4:hover > a.headerlink,
h5:hover > a.headerlink, h6:hover > a.headerlink {
	visibility: visible;
	text-decoration: none;
}

h1 { font-size: 1.6em; }
h2 { font-size: 1.4em; }
h3 { font-size: 1.2em; }

/*** Generic stuff ***/
.center { text-align: center; }
div.img { text-align: center; border: 1px black dotted; padding: .2em; max-width: 205px; }
div.right { float: right; text-align: center; border: 1px black dotted; padding: .2em; max-width: 205px; }
div.left { float: left; text-align: center; border: 1px black dotted; padding: .2em; max-width: 205px; }
p.indent { text-indent: 3em; }
img.notsowide { max-width: 25em; }

/*** weblog ***/
h3.weblog { margin: 0; padding: 0; }
div.weblog_header { background-color: #fff; margin-bottom: .1em; padding: .3em; }
div.weblog { border-bottom: 1px solid #000; margin-bottom: .75em; padding-bottom: .75em; }
div.weblog p { padding: .3em; margin: 0; }
#webloghead { text-align: center; margin-bottom: 2em; }
#webloghead h1 { margin-bottom: .1em; }
#webloghead strong { color: #000; }

.code {
	border: 1px solid #b7b7b7;
	padding: .2em .4em;
	margin-bottom: 1em;
	position: relative;
	min-height: 6em;
	clear: both;
}
.code .os { display: none; }
.code h2 { margin: .2em 0; }
.code_desc { width: 30em; }
.code_desc br { clear: both; }
.code_info {
	position: absolute;
	right: 0;
	top: 0;
	border-left: 1px solid #b7b7b7;
	width: 17.8em;
	height: 100%;
	padding-left: .5em;
}
.code_info span.row { display: block; }

.code_info span.label {
	display: inline-block;
	width: 5em;
}
.code img {
	position: absolute;
	right: 19em;
	top: .1em;
	background-color: #fff;
	opacity: 1;
	border: 1px solid #666;

	width: 8em;
}

#code { margin-top: 3em; }
.code img:hover { z-index: 50; }
#code_filter { position: absolute; z-index: 200; }

#code_filter strong { margin-right: 1em; }
#code_filter div {
	border: 1px solid #b7b7b7;
	min-width: 10em;
	height: 1.5em;
	overflow-y: hidden;
	display: inline-block;
	vertical-align: top;
	padding: .2em;
	background-color: #fff;
}
#code_filter div:hover { height: 7em; }

#code_filter span { display: block; }

#code_filter .title {
	font-weight: bold;
	text-align: center;
	margin-bottom: .5em;
}

#code_filter div, .code img {
	transition: all .5s cubic-bezier(0.42, 0, 0.58, 1) 0s;
	-o-transition: all .5s cubic-bezier(0.42, 0, 0.58, 1) 0s;
	-moz-transition: all .5s cubic-bezier(0.42, 0, 0.58, 1) 0s;
	-webkit-transition: all .5s cubic-bezier(0.42, 0, 0.58, 1) 0s;
}

#comment_name, #comment_email{ width: 24em; margin: 0; }
input#comment_name { margin-right: .6em; }
#comment_text { width: 50em; }
#turingtest { width: 50em; }

::-webkit-input-placeholder { color: #666; }
input:-moz-placeholder { color: #666; }

#comment_error {
	padding: .5em;
	width: 43.5em;
	border: 2px solid red;
	background-color: #eee;
	display: none;

	border-radius: 4px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
}

.comment {
	border: 1px solid #b7b7b7;

	width: 43.5em;
	margin: .5em 0;
	padding: .5em;

	border-radius: 4px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
}
.comment strong {
	font-size: .9em;
}
.comment p { margin-bottom: 0; margin-top: .5em; }

#commentsbox {
  border-top: 1px solid #b7b7b7;
	position: relative;
	left: -1em;
	bottom: -1.2em;
	padding-left: 1em;
	padding-top: .1em;
	padding-bottom: 2em;
	width: 49.5em;
}