@charset "utf-8";
@import url("reset.css");

/**
* @version   1.0
* @author    Thomas Wilhelm ( http://thomas.web-wack.at/ )
* @copyright (c) 2009, 2010 author
*/

/* General Markups Styles
---------------------------------------- */
html {
	margin-bottom: 1px;
	height: 100%;
}

body {
	background: url("./img/bg-grad.png") repeat-x;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #777E7F;
}

h1, h2, h3, h4, h5, h6 {
	font-weight: normal;
	font-size: 1em;
}

img {
	border: 0;
}

abbr, acronym {
	border-bottom: 1px dotted #666;
}

del {
	text-decoration: line-through;
}

/* Link Styles
---------------------------------------- */
a, a:link, a:visited {
	text-decoration: none;
	color: #04B1D1;
	-moz-transition: all ease 0.4s;
	-webkit-transition: all ease 0.4s;
	transition: all ease 0.4s;
}

a:hover {
	text-decoration: underline;
	color: #5DCDE1;
}

a.button { -moz-transition: none; -webkit-transition: none; transition: none; display:inline-block; height:23px; padding:0 0 0 3px; font-size:11px; font-weight:bold; color:#333 !important; text-shadow:1px 1px 0 #fff; background:url("./img/buttons.png") 0 0 no-repeat; white-space:nowrap; border:none; overflow:visible; cursor:pointer; text-decoration:none !important; }
a.button > span { display:block; height:23px; padding:0 10px 0 8px; line-height:23px; background:url("./img/buttons.png") 100% 0 no-repeat; }
a.button:hover, a.button:focus, a.button-mo	{ color:#fff !important; text-decoration:none; text-shadow:-1px -1px 0 rgba(0,0,0,0.3); background-position:0 -30px; }
a.button:hover > span, a.button:focus > span, a.button-mo > span { background-position:100% -30px; }
	
a.button-red { background:url("./img/buttons.png") 0 -90px no-repeat; color:#fff !important; text-shadow:-1px -1px 0 rgba(0,0,0,0.3); }
a.button-red > span { background-position:100% -90px; }
	
a.button-blue { background:url("./img/buttons.png") 0 -30px no-repeat; color:#fff !important; text-shadow:-1px -1px 0 rgba(0,0,0,0.3); }
a.button-blue > span { background-position:100% -30px; }
a.button-blue:hover, a.button-blue:focus, a.button-mo { color:#fff !important; text-decoration:none; text-shadow:-1px -1px 0 rgba(0,0,0,0.3); background-position:0 -90px; }
a.button-blue:hover > span, a.button-blue:focus > span, a.button-mo > span { background-position:100% -90px; }
	
a.button-white:hover, a.button-white:focus { color:#333 !important; text-shadow:1px 1px 0 #fff; background-position:0 0; }
a.button-white:hover > span, a.button-white:focus > span { background-position:100% 0px; }

a.button > span > img {
	vertical-align: middle;
}

/* Main Boxes
---------------------------------------- */
#wrap {
	margin: 0 auto;
	width: 960px;
}

#page-header {
	position: relative;
	height: 130px;
}

#main {
	margin-bottom: 20px;
	padding-right: 35px;
	width: 653px;
	float: left;
	border-right: 1px solid #e5e6e7;
}

#main.wide {
	padding: 0;
	width: 100%;
	float: none;
	border: none;
}

#extras {
	padding-left: 35px;
	width: 236px;
	float: left;
}

#page-footer {
	padding: 6px 0 20px 0;
	border-top: 3px solid #e6e6e6;
	color: #999999;
}

/* Logo and Subheader
---------------------------------------- */
#logo, #subheader {
	position: absolute;
}
#logo {
	top: 17px;
	left: 0;
}
#logo, #logo h1, #logo a {
	display: block;
	width: 242px;
	height: 66px;
}
#logo h1 {
	text-indent: -9999px;
}
#logo a {
	background: url("./img/thomas-wilhelm.png") no-repeat;
}

#subheader {
	top: 27px;
	right: 0;
}
#subheader, #subheader h2, #subheader span {
	display: block;
	width: 242px;
	height: 66px;
}
#subheader h2 {
	margin: 0;
	padding: 0;
	text-indent: -9999px;
	background: none;
}
#subheader span {
	background: url("./img/design-dev-photo.png") no-repeat;
}

/* Global Navigation
---------------------------------------- */
#globalnav {
	position: absolute;
	top: 96px;
	left: -10px;
}
#globalnav ul {
	list-style: none;
}
#globalnav li {
	float: left;
	margin-right: 1px;
}
#globalnav a {
	display: block;
	padding: 5px 10px;
	width: auto;
	font-size: 1.4em;
	color: #666666;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	-khtml-border-radius: 4px;
	border-radius: 4px;
}
#globalnav a:hover {
	background-color: #5C5C5C;
	color: #f3f3f3;
	text-shadow: #555 0 1px 0;
	text-decoration: none;
}
#globalnav .selected a {
	background-color: #3C3C3C;
	color: #ffffff;
	text-shadow: #222 0 1px 0;
	cursor: default;
}

/* Breadcrump Navigation
---------------------------------------- */
#breadcrump ul {
	list-style: none;
}
#breadcrump li {
	float: left;
	margin-right: 14px;
}
#breadcrump a {
	display: block;
	padding-left: 12px;
	width: auto;
	font-size: 1.05em;
	color: #999999;
	background: url("./img/arrow_right.gif") no-repeat 0% 50%;
}
#breadcrump a:hover {
	text-decoration: underline;
	color: #888888;
}

/* Headings
---------------------------------------- */
/* Title Bar */
#title-bar {
	margin: 20px 0;
	padding: 8px 20px;
	width: 920px;
	height: 36px;
	background: url("./img/bg-title-bar.png") no-repeat;
}
#title-bar h1 {
	font-size: 2.8em;
	color: #ffffff;
	text-shadow: #3480a6 0 1px 0;
}

/* Define different headings */
h2 {
	margin: 16px 0;
	padding: 5px 10px;
	overflow: hidden;
	background: url("./img/bg-subtitle.gif") repeat-x;
	line-height: 20px;
	font-size: 1.6em;
	font-weight: bold;
	color: #383c3d;
	text-shadow: #fff 0 1px 0;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	-khtml-border-radius: 4px;
	border-radius: 4px;
}

h2.title {
	margin: 0;
	padding: 5px 0 2px;
	height: auto;
	background: none;
}

h3 {
	margin-bottom: 15px;
	font-size: 1.4em;
	font-weight: bold;
	color: #000000;
}

/* Text layout
---------------------------------------- */
#main .post {
	padding: 0 10px;
}

#main .post div.meta {
	margin-bottom: 15px;
	font-size: 11px;
	color: #aaa;
}
#main .post div.meta a {
	color: #aaa;
	text-decoration: none;
	border-bottom: 1px dotted #ccc;
}
#main .post div.meta a:hover {
	text-decoration: none;
	border: 0px none;
}

#main .post p {
	margin-bottom: 20px;
	line-height: 1.4;
	font-size: 1.2em;
}

div.navigation {
	font-size: 1.2em;
}

ul {
	list-style: disc;
}

#main ul {
	margin-left: 20px;
	font-size: 1.2em;
	line-height: 1.4;
}
#extras > ul {
	list-style: none;
}
#extras ul ul {
	margin-left: 14px;
	font-size: 1.2em;
	line-height: 1.4;
}

/* Comment Layout
---------------------------------------- */
ol.commentlist {
	margin-left: 20pt;
}
ol.commentlist li {
	margin-bottom: 8px;
	padding-bottom: 8px;
	font-size: 1.1em;
	border-bottom: 1px solid #eee;
}
.comment-author {
	font-size: 1.1em;
	font-weight: bold;
}
.comment-author .says {
	font-weight: normal;
}
.commentmetadata, .commentmetadata a {
	color: #888;
}
.comment-body p {
	margin-top: 0.4em;
	font-size: 1.2em;
}

.author-note {
	background-image: url("./img/author-note.png");
	background-repeat: no-repeat;
	background-position: right top;
}

/* Feedback (Comment) Layout
---------------------------------------- */
.leftside-screen {
	float: left;
	margin: 0 20px 20px 0;
	padding: 1px;
	border: 1px solid #ddd;
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	-khtml-border-radius: 6px;
	border-radius: 6px;
}

.leftside-screen img {
	margin-bottom: -4px;
}

#project-details ul {
	list-style: none;
}

/*#feedbacks {
	width: 580px;
}*/

.commentpost {
	margin-bottom: 4px;
}

.commentpost .inner {
	padding: 0 10px;
	color: #536482;
}

.commentpost .inner p {
	margin: 1em 0 0 0 !important;
}

.commentauthor {
	font-weight: bold;
	font-size: 1.05em !important;
	color: #222;
}

.commentpost a, .commentpost a:link	{
	color: #105289;
	text-decoration: underline;
}
.commentpost a:visited	{ color: #105289; }
.commentpost a:hover	{ color: #D31141; }
.commentpost a:active	{ color: #368AD2; }

/* Rounded Corners and Backgrounds
---------------------------------------- */
span.corners-top, span.corners-bottom, span.corners-top span, span.corners-bottom span {
	font-size: 1px;
	line-height: 1px;
	display: block;
	height: 5px;
	background-repeat: no-repeat;
}

span.corners-top {
	background-image: none;
	background-position: 0 0;
	margin: 0 -5px;
}

span.corners-top span {
	background-image: none;
	background-position: 100% 0;
}

span.corners-bottom {
	background-image: none;
	background-position: 0 100%;
	margin: 0 -5px;
	clear: both;
}

span.corners-bottom span {
	background-image: none;
	background-position: 100% 100%;
}

.commentpost span.corners-top, .commentpost span.corners-bottom {
	margin: 0 -10px;
}

span.corners-top {
	background-image: url("./img/corners_left.png");
}
span.corners-top span {
	background-image: url("./img/corners_right.png");
}
span.corners-bottom {
	background-image: url("./img/corners_left.png");
}
span.corners-bottom span {
	background-image: url("./img/corners_right.png");
}

.bg1	{ background-color: #ECF3F7; }
.bg2	{ background-color: #e1ebf2;  }
.bg3	{ background-color: #cadceb; }

/* General Form Styles
---------------------------------------- 
textarea {
	margin: 0.4em 0;
	padding: 0.2em;
	font-size: 1em;
	line-height: 1.4;
	color: #666;
	font-weight: normal !important;
}

input {
	padding: 0.2em;
	width: 220px;
	font-size: 1em;
	line-height: 1.4;
	color: #666;
	font-weight: normal !important;
}

label, label > span {
	display: block;
}

label > span {
	margin: 0 0 -12px 0;
	font-size: 1.2em;
	font-weight: bold;
}*/

/* Form Button Styles
---------------------------------------- */
input.button1, input.button2 {
	font-size: 1em;
}

a.button1, input.button1, input.button3, a.button2, input.button2 {
	width: auto !important;
	padding-top: 1px;
	padding-bottom: 1px;
	font-family: "Lucida Grande", Verdana, Helvetica, Arial, sans-serif;
	color: #000;
	background-color: #FAFAFA;
	background-image: url("./img/bg-button.gif");
	cursor: pointer;
}

a.button1, input.button1 {
	font-weight: bold;
	border: 1px solid #666666;
}

input.button3 {
	padding: 0;
	margin: 0;
	line-height: 5px;
	height: 12px;
	background-image: none;
	font-variant: small-caps;
}

/* Alternative button */
a.button2, input.button2, input.button3 {
	border: 1px solid #666666;
}

/* <a> button in the style of the form buttons */
a.button1, a.button1:link, a.button1:visited, a.button1:active, a.button2, a.button2:link, a.button2:visited, a.button2:active {
	text-decoration: none;
	color: #000000;
	padding: 2px 8px;
	line-height: 250%;
	vertical-align: text-bottom;
	background-position: 0 1px;
}

/* Hover states */
a.button1:hover, input.button1:hover, a.button2:hover, input.button2:hover, input.button3:hover {
	border: 1px solid #BC2A4D;
	background-position: 0 100%;
	color: #BC2A4D;
}

fieldset.submit-buttons {
	text-align: center;
}

fieldset.submit-buttons .button1, fieldset.submit-buttons .button2 {
	padding: 3px 8px;
	font-size: 1.1em;
}

/* Misc Layout Styles
---------------------------------------- */
.column1 {
	float: left;
	clear: left;
	width: 49%;
}

.column2 {
	float: right;
	clear: right;
	width: 49%;
}

.left-box {
	float: left;
	width: auto;
	text-align: left;
}

.right-box {
	float: right;
	width: auto;
	text-align: right;
}

.screenbox {
	padding: 1px;
	border: 1px solid #ddd;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	-khtml-border-radius: 4px;
	border-radius: 4px;
}
.screenbox.right-box {
	margin-left: 8px;
}

.screenshot {
	display: block;
	width: 150px;
	float: left;
	margin: 0 12px 12px 0;
	padding: 3px;
	border: 1px solid #ddd;
}
.screenshot:hover {
	border-color: #ccc;
	opacity: 1;
}
.screenshot img {
	vertical-align: middle;
}

/* Misc Styles
---------------------------------------- */
.alt {
  display: inline;
  color: #666666;
  font-family: "Warnock Pro", "Goudy Old Style", "Palatino", "Book Antiqua", Georgia, serif;
  font-style: italic;
  font-weight: normal;
}

em {
  font-style: normal;
  color: #999;
}

em span, span.italic {
  font-style: italic;
}

p.small {
  line-height: 1.4 !important;
  font-size: 1.2em !important;
}
p.large {
  line-height: 1.5 !important;
  font-size: 2em !important;
  font-family: Georgia, "Times New Roman", Times, serif;
}
p.quiet {
  color: #686c70;
  line-height: 1.6 !important;
  font-size: 1.4em !important;
}
span.quiet {
  color: #ccc;
}

.terminal {
	margin: 1.4em auto;
	padding: 0.2em 0.4em;
	width: 96%;
	height: 280px;
	border: 1px solid #ccc;
	font-family: Monaco, monospace;
	font-size: 7pt;
	color: #222;
}

/* VCard */
vcard {
	list-style: none;
	padding: 0;
	margin: 0 0 1.5em 1.5em;
}
.vcard li {
	margin: 0;
	display: block;
	padding-bottom: 0.3em;
	overflow: auto;
}
.vcard span.type {
	color: #aaa;
	float: left;
	width: 125px;
}

.error, .notice, .success {
	padding:.8em;
	margin-bottom:1em;
	border:2px solid #ddd;
}
.error {
	background:#FBE3E4;
	color:#8a1f11;
	border-color:#FBC2C4;
}
.notice {
	background:#FFF6BF;
	color:#514721;
	border-color:#FFD324;
}
.success {
	background:#E6EFC2;
	color:#264409;
	border-color:#C6D880;
}
.error a {color:#8a1f11;}
.notice a {color:#514721;}
.success a {color:#264409;}

div.error {
	font-size: 1.2em;
}

label {
	display: block;
	font-size: 1.3em;
}
label span {
	display: block;
	color: #222;
	font-weight: bold;
}

label span em {
	font-size: 0.85em !important;
}

input.text, input.title, textarea, select {
	margin:0.5em 0;
	border:1px solid #bbb;
}
input.text:focus, input.title:focus, textarea:focus, select:focus {border:1px solid #666;}
input.text, input.title {
	width:300px;
	padding:5px;
}
input.title {font-size:1.5em;}
textarea {
	width:390px;
	height:250px;
	padding:5px;
}

/* SlidMoo Slider */
#slidmoo-container {
	margin: 0 auto;
	width: 838px;
}

.slidmoo-left, .slidmoo-right {
	display: block;
	width: 19px;
	height: 316px;
	background-image: none;
	background-repeat: no-repeat;
}
.slidmoo-left {
	float: left;
	background-image: url("./img/slidmoo/slidmoo-cleft.png");
}
.slidmoo-right {
	float: right;
	background-image: url("./img/slidmoo/slidmoo-cright.png");
}

.slidmoo-box {
	display: block;
	float: left;
	padding: 23px 0 0;
	width: 800px;
	height: 293px;
	overflow: hidden;
	background: url("./img/slidmoo/slidmoo-bg.png") repeat-x;
}

.slidmoo-box h2 {
	position: relative;
	margin: 0;
	padding: 0;
	width: 37px;
	height: 269px;
	float: left;
	text-indent: -5000px;
	background-image: none;
	background-repeat: no-repeat;
	background-position: 0 0;
	cursor: pointer;
}
.slidmoo-box h2.selected {
	background-position: 0px -269px;
	cursor: default;
}
h2#slidmoo-about {
	background-image: url("./img/slidmoo/balken-about.png");
}
h2#slidmoo-projects {
	background-image: url("./img/slidmoo/balken-projects.png");
}
h2#slidmoo-w2c {
	background-image: url("./img/slidmoo/balken-w2c.png");
}

.slidmoo-box .content {
	display: none;
	margin-right: 2px;
	width: 685px;
	height: 269px;
	float: left;
	overflow: hidden;
	background: url("./img/slidmoo/slidmoo-cbg.png") repeat-x;
}

.slidmoo-box .content > .inner {
	padding: 28px;
}

.slidmoo-box .content h3 {
	font-weight: normal;
	font-size: 2em;
	font-family: "Helvetica Neue", Verdana, Arial, sans-serif;
	text-transform: uppercase;
	color: #222;
}

.slidmoo-box .content p {
	margin-bottom: 0.8em;
	font-size: 1.25em;
	line-height: 1.5;
}

.slidmoo-box a {
	color: #999;
	border-bottom: 1px dotted #ccc;
}
.slidmoo-box a:hover {
	background-color: #fff;
	border-color: #ddd;
	text-decoration: none;
}

/* Periodic Table of the Elements
---------------------------------------- */
table.periodic-table {
	margin: 0 auto;
	font-size: 1.1em;
}

td.element, td.spacer {
	width: 48px;
	height: 60px;
	background-color: #f4f5f5;
	background-repeat: repeat-x;
	border: 2px solid #fff;
	text-align: center;
}

td.element a {
	display: block;
	padding: 6px 1px;
	width: 46px;
	height: 48px;
	color: #444;
}
td.element a:hover {
	padding: 5px 0;
	border: 1px solid #666;
	color: #000;
	text-decoration: none;
}

td.element span, td.element strong {
	display: block;
}

td.element span.number {
	color: #888;
}

td.element strong {
	font-size: 1.6em;
}

td.element .info {
	position: absolute;
	top: 280px;
	left: 50%;
	margin-left: -210px;
	display: none;
	padding: 10px 12px;
	width: 220px;
	background-color: #000;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	-khtml-border-radius: 10px;
	border-radius: 10px;
	color: #fff;
	text-align: left;
	font-size: 1.1em;
}

td.element .info span, td.element .info strong {
	display: inline;
}

td.element .info em {
	text-style: normal;
	color: #aaa;
}

.metal { background-image: url("./img/pse/bg-metal.png"); }
.nonmetal { background-image: url("./img/pse/bg-nonmetal.png"); }
.transition-metal { background-image: url("./img/pse/bg-transition-metal.png"); }
.noble-gas { background-image: url("./img/pse/bg-noble-gas.png"); }
.alkaline-metal { background-image: url("./img/pse/bg-alkaline-metal.png"); }
.alkaline-earth-metal { background-image: url("./img/pse/bg-alkaline-earth-metal.png"); }
.metalloid { background-image: url("./img/pse/bg-metalloid.png"); }
.halogen { background-image: url("./img/pse/bg-halogen.png"); }
.lanthanide { background-image: url("./img/pse/bg-lanthanide.png"); }
.actinoides { background-image: url("./img/pse/bg-actinoides.png"); }
.unknown { background-image: url("./img/pse/bg-unknown.png"); }

td.periode {
	padding-right: 8px;
}
tr.gruppe td {
	padding-bottom: 8px;
	text-align: center;
}
td.periode, tr.gruppe td {
	color: #888;
}

/* Highlighter */
.highlighter {
	font-family:Monaco,Courier,Monospace;
	font-size:10px;
	white-space:pre-wrap;
	white-space:-moz-pre-wrap;
	white-space:-o-pre-wrap;
	white-space:-pre-wrap;
	word-wrap:break-word;
	background-color:#eee;
}

.highlighter ol {
	margin: 0 0 0 38px;
}

.highlighter li {
	margin: 0 0 -11px 0 !important;
	padding: 2px 0 2px 6px;
	color: #888;;
	font-size:11px;
	line-height: 1 !important;
	background-color:#fff;
	border-left:1px solid #939393;
	border-bottom:1px solid #fff;
}

.highlighter div {
	margin: 0 !important;
	padding: 0 !important;
	line-height: 1;
}

.highlighter li span {
	color: #000;
}

.highlighter li:hover {
	background-color: #f3f3f3;
}

.toplink {
	text-align: right;
}
.toplink a.button {
	font-size: 0.8em !important;
	text-transform: uppercase;
}

code.inline {
	background-color: #f1f1f1;
	border: 1px solid #dddddd;
	font-family: monospace;
	padding: 0 4px;
}

/* Tweaks
---------------------------------------- */
*:focus {
  outline: none;
}

.clear, .clearfix:after, #breadcrump:after, #content:after, div.navigation:after {
  display: block;
  visibility: hidden;
  content: ".";
  clear: both;
}