/*
 *
 * Author: Sander Knopper
 * Email: sander AT knopper DOT tk
 *
 * Description: Stylesheet for personal website
 *
 */


/*
General
*/

html, body {
	background-color: #eef6ee;
	font-family: 'dejavu sans', 'bitstream vera sans', verdana, 'lucida grande', sans-serif;
}

label:hover, .buttons input:hover {
	cursor: pointer;
}

input, textarea, select {
	border: 1px solid #666666;
	background-color: #ffffff;
}

input:focus, textarea:focus, select:focus {
	border: 1px solid #222222;
	background-color: #EBFFE6;
}

.buttons input {
	margin: 0;
	padding: .2em .4em .2em .4em;
	border: 1px outset #333333;
}

* html .buttons input { padding: .1em; }

.buttons input:focus, .buttons input:hover {
	background-color: #ebffe6;
}

.buttons input:active {
	border: 1px inset #333333;
}

#quote {
	padding: 1em 0 1em 0;
	border: 1px dotted #222222;
	text-align: center
}

#quote span.tqpFooter {
	display: none;
}

/*
Global positioning
*/

#wrap {
	margin: 2em auto 0 auto;
	padding: 0;
	width: 58em;
	background-color: #ffffff;
	border-left: 1px solid #666666;
	border-right: 1px solid #666666;
}

#header {
	margin: 0;
	padding: 0;
	background-color: #CCFFBF;
	text-align: center;
	border-top: .4em solid #24B300;
	border-bottom: .4em solid #24B300;
}

#header h1 {
	margin: 0;
	padding: .8em 0 .8em 0;
	font-size: 3em;
	letter-spacing: .2em;
	color: #24B300;
}

/*
 * Menu
 */

#menu {
	/*position: fixed;*/ /* IE7 can't handle this */
	float: left;
	width: 12em;
	margin: 1.8em 0 0 1.4em;
	padding: 0;
	font-size: .9em;
	background-color: #ffffff;
}

* html div#menu { width: 12em; margin-left: .7em; }

#menu fieldset {
	margin: 0;
	padding: .4em 0 .2em 0;
	border: 1px solid #888888;
	background-color: #CCFFBF;
}

* html div#menu fieldset { width: 12em; }

#menu fieldset legend {
	margin: 0 0 0 .5em;
	padding: .3em .8em .3em .8em;
	font-size: 1.2em;
	font-weight: bold;
	color: #24B300;
	background-color: #99FF80;
	border: 1px solid #888888;
}

* html div#menu fieldset { 
	position: relative;
	margin: 1.2em 0 0 0;
	padding: 1.6em 0 0 0;
}

* html div#menu fieldset legend {
	position: absolute;
	margin: 0;
	top: -.8em;
	left: .2em;
}

#menu ul {
	margin: 0;
	padding: 0;
}

#menu li {
	margin: 0;
	padding: .2em 0 .2em 0;
	list-style: none;
	border-left: .3em solid #CCFFBF;
	border-right: .3em solid #CCFFBF;
}

#menu li:hover {
	border-left: .3em solid #24B300;
	border-right: .3em solid #24B300;
}

#menu a {
	padding: .2em .5em .2em .5em;
	font-size: .9em;
	font-weight: bold;
	color: #24B300;
	text-decoration: none;
}

#menu a:hover {		/* For non-css2 supporting browsers (IE) */
	text-decoration: underline;
}

/*
Middle (content)
*/

#middle {
	margin: 0 0 0 16em;
	padding: 1.6em 1.8em 1.6em 1.8em;
	min-height: 14em;
	font-size: .8em;
}

* html div#middle { width: 48em; }

#middle table {
	color: #333333;
}

#middle td {
	padding: 2px 8px 2px 8px;
}

#middle a {
	color: #555555;
	text-decoration: none;
	border-bottom: 1px dotted #666666;
}

#middle a:hover {
	color: #222222;
	border-bottom: 1px solid #222222;
}

#middle a > img {
	border: none;
}

#middle p.pagemenu {
	margin: 0;
	padding: .4em 0 .4em 0;
	text-align: center;
	border: 1px dotted #BFBFBF;
	background-color: #F2F2F2;
}

#middle h2.pagetitle {
	padding: .2em 0 .2em .4em;
	background-color: #24B300;
	color: #ffffff;
	font-size: 1.6em;
	letter-spacing: .1em;
}

#middle p.commentheader {
	margin: 2em 0 0 0;
	padding: .2em;
	font-weight: bold;
	font-size: .8em;
	border: 1px dotted #BFBFBF;
	background-color: #F2F2F2;
}

#middle p.commentmessage {
	margin: 0;
	padding: .5em .5em .5em .5em;
	border-left: 1px dotted #BFBFBF;
	border-right: 1px dotted #BFBFBF;
	border-bottom: 1px dotted #BFBFBF;
}

#middle p.commenttext {
	margin-bottom: 2em;
}

#middle .blogtitle {
	margin: 0;
	padding: .1em 0 .1em 0;
	text-align: center;
	font-size: 2em;
	background-color: #f2f2f2;
	border: 1px dotted #bfbfbf;
}

#middle .blogdate {
	margin: 0;
	padding: .4em 0 .4em 0;
	text-align: center;
	font-size: .8em;
	border-left: 1px dotted #bfbfbf;
	border-right: 1px dotted #bfbfbf;
	border-bottom: 1px dotted #bfbfbf;
}

#middle .blogmessage {
	margin: 0;
	padding: .5em .5em .5em .5em;
	border-left: 1px dotted #bfbfbf;
	border-right: 1px dotted #bfbfbf;
	border-bottom: 1px dotted #bfbfbf;
}

#middle .blogcomment {
	margin: 0 0 2em 0;
	padding: .2em 0 .2em 0;
	text-align: center;
	background-color: #f2f2f2;
	border-left: 1px dotted #bfbfbf;
	border-right: 1px dotted #bfbfbf;
	border-bottom: 1px dotted #bfbfbf;
}

#middle table.emoticonslist {
	margin-top: .8em;
	font-size: .8em;
	text-align: center;
}

#middle table.emoticonlist td {
	margin: 0;
	padding: 0 0 0 0;
}

#middle #flashMessage.message {
	margin: 0 auto 1.8em auto;
	padding: .6em 0 .6em 0;
	background-color: #FFFF80;
	border: 1px dotted #BFBF8F;
	font-size: 1em;
	font-weight: bold;
	text-align: center;
}

#middle div.error_message {
	color: red;
}

/* Tableless form */

.extendedform input, .extendedform textarea {
	display: block;
	margin-top: .2em;
	margin-bottom: .8em;
}

.extendedform .buttons input {
	display: inline;
}

.extendedform .buttons {
	display: block;
	margin-top: 1em;
}

.tabularform .row {
	display: block;
	margin: 0 0 .6em 0;
}

.tabularform .row input {
	position: relative;
	text-align: left;
}

.tabularform .row label {
	position: relative;
	float: left;
	width: 8em;
	text-align: right;
	padding-right: .8em;
}

.tabularform .row .buttons {
	margin: 1em 0 0 8.8em;
}

* html div#middle .tabularform .row .buttons { margin-left: 9em; }

.tabularform .row .buttons input {
	margin: 0;
	text-align: center;
}

/* End form */

#footer {
	margin: 0;
	padding: .6em 0 .6em 0;
	text-align: center;
	font-size: .7em;
	color: #000000;
	background-color: #24B300;
}

#footer p {
	margin: 0;
}

#footer a {
	color: #CCFFBF;
	text-decoration: none;
}

#footer a:hover {
	text-decoration: underline;
}