html {height: 100%}

body {
	background: url(/images/topper_b.png) #fff repeat-x top;
	color: #333;
	margin: 0; padding: 0;
	text-align: center;
	font: 11px/16px "Trebuchet MS", "Lucida Grande", verdana, lucida, arial, helvetica, sans-serif;
	height: 100%;
	}
	
a:link {color:#155fed; text-decoration:none}
a:visited {color:#333399; text-decoration:none}
a:hover {color:#c60; text-decoration:underline}
a:active  {color:#155fed; text-decoration:none}

#wrap {
	width:827px; 
	margin:0 auto; 
	padding:0;
	position: relative;
	min-height: 100%;
	}
	
* html #wrap {height: 100%}
	
#header {
	background: url(/images/zeich_b2.png) transparent no-repeat 100% 6px;
	height:78px;
	margin:0; padding:0;
	} 

h1 {
	display:block;
	float:left;
	width:97px;
	height:34px;
	margin:24px 0 0 0; padding:0
	}

h1 a {	
	background: url(/images/logo1.gif) no-repeat left;
	text-indent:-9999px;
	margin:0; padding:0;
	display:block;
	width:97px;
	height:34px
	}

	
#nav {
	float: right;
	list-style: none;
	margin: 30px 0 0 370px;	
	padding: 0;
	height: 48px;
	display: inline;
	overflow: hidden
	}
	
#nav ul {
	list-style: none;
	margin: 0; padding: 0
	}
	
#nav li {
	margin: 0; padding: 0;
	display: inline;
	list-style: none
	}

#nav a {
	float: left;
	padding: 24px 0 0 0; margin:0 4px 0 4px;
	overflow: hidden;
	height: 0px !important; 
	}
	
#nav a:hover {
	background-position: 0 -24px;
	}

#nav a:active, #nav a.selected {
	background-position: 0 -24px;
	}
	
	
#tabhome a  {
	width: 50px;
	background: url(/images/bnav/home_b.gif) top left no-repeat;
	}

#tabplay a  {
	width: 92px;
	height:48px;
	background: url(/images/bnav/play_b.gif) top left no-repeat;
	}
	
#tabport a  {
	width: 77px;
	background: url(/images/bnav/port_b.gif) top left no-repeat;
	}
	
#tabcontact a  {
	width: 69px;
	
	background: url(/images/bnav/contact_b.gif) top left no-repeat;
	}
	
h3 {	
	font: bold 14px "Trebuchet MS", "Lucida Grande", verdana, lucida, arial, helvetica, sans-serif;
	text-transform:uppercase;
	margin:0 0 10px 0
	}
	
h3.error {color:#c30}

h4 {	
	font: bold 13px "Trebuchet MS", "Lucida Grande", verdana, lucida, arial, helvetica, sans-serif;
	margin:4px 0 5px 0
	}
	
#content {
	width:100%;
	text-align: left;
	margin: 25px auto;
	}

#maincontent {
	float: left;
	text-align: left;
	background:#fff;
	margin: 0 auto;
	padding: 0px 0px 100px 0px;
	width: 502px
	}
	
#maincontent-wide {
	float: left;
	text-align: left;
	background:#fff;
	margin: 0 auto;
	padding: 0px 0px 50px 0px;
	width: 702px
	}
	
#maincontent img.photofirst {border:1px solid #555; margin-top:20px; display:block; text-align:center; margin-left: auto; margin-right: auto}
#maincontent img.photo {border:1px solid #555; margin-top:40px; display:block; text-align:center; margin-left: auto; margin-right: auto}

#maincontent p.tagbar {
	font:10px verdana,arial,geneva;
	color:#444;
	border:1px solid #D8D8CC; background:#F0F0E8; 
	padding:2px 6px 1px 6px;
	margin: 2px 0 10px 0;
	height:14px;
	width:502px;
	voice-family: "\"}\""; 
	voice-family:inherit;
	width: 488px;	 
	}
html>#maincontent p.tagbar 	{
	width: 488px;
	}
	
#maincontent p.tagbar a {margin-left:8px}
#maincontent p.tagbar a:link {color:#444; text-decoration:none}
#maincontent p.tagbar a:visited {color:#444; text-decoration:none}
#maincontent p.tagbar a:hover {color:#c60; text-decoration:none;}
#maincontent p.tagbar a:active  {color:#c30; text-decoration:none}
	
#maincontent p.tagbar span.left {
  float: left;
  text-align: left
  }

#maincontent p.tagbar span.right {
  float: right;
  text-align: right
  }
  
#maincontent p.tagbar img {margin:0 4px 0 0; vertical-align:middle}
img.pageicon {margin:0 2px 0 0; vertical-align:middle}

#sidebar {
	margin: 0 0 0 528px;
	text-align: left;
	color: #555;
	background:#fff;
	height:100%;
	min-height:400px
	}

#sidebar dl {margin:0 0 18px 0; padding:0}
#sidebar dt {border-bottom:1px dotted #777; margin-bottom:5px}
dt img {margin-right:1px}
#sidebar dd {margin-left:0px}

#sidebar h3 {font-size:11px; font-weight:normal; text-transform:none; border-bottom:1px solid #999}

#sidebar ul {list-style: none; margin:4px 0px 0px 5px; padding:0}
#sidebar li {padding-bottom:2px}

#sidebar .feature-btn {margin:5px 0 0 0}
#sidebar .albumart {background:url(/images/weblog/general/albumart.jpg) 0 3px no-repeat; margin:0 0 0 0; padding-left:52px; height:50px; display:block}

#sidebar .feature {margin:0 0 12px 0; padding:0}


#sidebar #midcol {float:left; margin-bottom:50px; width:135px}
#sidebar #farcol {float:right; width:135px}


/* flickr */

#sidebar dl.flickr dt {color:#0063dc}
#sidebar dl.flickr dt span {color:#ff0084}
#sidebar dl.flickr dd {width:150px; min-height:136px}
#sidebar dl.flickr dd img {border: 2px solid #eee !important; float:left; margin:0 6px 6px 0; width:60px; height:60px;}

#sidebar dl.reading dd img {float:left; margin:0 8px 0 0}


/* 	Comments  */
	div.comments-form {margin-top:30px}
	#commentbox {
		padding: 8px 0px 30px 0px;
		margin: 0
		}

	#commentbox .cmtdata {
		width: 160px;
		padding: 1px;
		margin-bottom: 10px;
		font-family: "Lucida Grande", verdana, lucida, arial, helvetica, sans-serif;
		font-size:11px
		}
			
	#commentbox .button {
		width: 120px;
		margin: 0 8px 8px 0
		}
			
	#commentbox textarea {
		padding: 1px;
		width: 496px; height: 145px; 
		margin-bottom: 7px; margin-top: 1px; 
		font-family: "Lucida Grande", verdana, lucida, arial, helvetica, sans-serif;
		font-size:11px
		} 
	
p.comment_status {
		font:bold 11px "Trebuchet MS", "Lucida Grande", verdana, lucida, arial, helvetica, sans-serif;
		margin:40px 0px 5px 0px; 
		padding-bottom:3px; 
		border-bottom:1px solid #ccc
		}
div.commententry {margin:0px 0px 5px 0px; padding:8px 0 12px 0; border-bottom:1px dotted #ccc;}
div.commententry p {padding:0; margin:0}
div.commententry p.footer {padding-top:6px; margin:0}

span.required {color:#600; font-size:10px; font-weight:normal !important}
span.frmnote {font-size:10px; color:#333 !important; font-weight:normal !important}
img.captcha {background:url(/images/warrow.gif) #fff 91px 5px no-repeat; padding-right:23px}

.playbox {float:left; margin-right:28px}

.playbox h4 {
	font:12px "trebuchet ms","lucida sans",arial; 
	margin:0; 
	width:195px; 
	padding:0 0 0 4px;
    voice-family: "\"}\""; 
    voice-family:inherit;
    width:191px;
	} 
	html>body .playbox h4 {
  	width:191px;
	} 
	
.playbox h4.play {background:#C7D8D8}
.playbox h4.misc {background:#C6D991}
.playbox h4.wall {background:#D9C891} /* D9C891 or E8D59B*/

.playbox div {
	width:195px;
	padding:5px 4px 0 4px;
	margin-top:2px;
	text-align:right;
    voice-family: "\"}\"";
    voice-family:inherit;
    width:186px;
	} 
	html>body .playbox div {
  	width:186px
	} 

.playbox div.play {border-right:1px solid #C7D8D8}
.playbox div.misc {border-right:1px solid #C6D991}
.playbox div.wall {border-right:1px solid #D9C891}
  
.playbox ul {list-style:none; margin:0; padding:0}

#contact-form input {
	margin-bottom:10px; 
	font-family: "Lucida Grande", verdana, lucida, arial, helvetica, sans-serif;
	font-size:11px
	}
#contact-form submit {width:140px}

#contact-form textarea {
	font-family: "Lucida Grande", verdana, lucida, arial, helvetica, sans-serif;
	font-size:11px
	}

.list {list-style-image: url(/images/blt2.gif); margin:4px 0px 0px 28px; padding:0}
.list li {padding-bottom:3px}

.list-re {list-style-image: url(/images/blt2.gif); margin:4px 0px 0px 28px; padding:0}
.list-re li {padding-bottom:10px}

.goback {font-weight:bold}

ul.category {list-style:none; margin:0; padding:0}

#feature {background:url(/portfolio/images/featbg.gif) no-repeat left; width:500px; height:148px}
#feature .content {padding:10px 20px 10px 10px}
#feature .content object {border:1px solid #C3CACA; float:left; margin-right:14px}
#feature .content embed {border:1px solid #C3CACA; float:left; margin-right:14px}
#feature .content h3 {font-size:11px; font-weight:bold; text-transform:none; border-bottom:1px solid #C7CECE; float:left; width:320px; margin-bottom:4px;}

#portsidebar {background:url(/portfolio/images/sidebarbg.gif) no-repeat left; width:189px; height:404px; float:left; margin: 26px 0 0 28px; text-align:left}

#portsidebar .scrtext {padding:0 14px 0 14px}
#portsidebar h3 {font-size:11px; font-weight:bold; text-transform:none; padding:10px 0 0 14px; margin-bottom:6px}
#portsidebar .what {padding-top:14px; color:#999}

#portsidebar ul {list-style:none; margin:0; padding:0}
#portsidebar ul li {padding: 0 0 1px 11px; background: url(/images/portarrw01.gif) no-repeat 0 5px;}

#portsidebar ul ul {list-style:none; margin:0; padding:0 0 0 8px}
#portsidebar ul ul li {padding: 0 0 1px 13px; background: url(/images/portarrw02.gif) no-repeat 4px 7px;}

.pcolumn {width:116px; float:left; margin-left:6px; text-align:center}
.pcolumn h3.port, .pcolumnside h3.port {font-size:11px; font-weight:bold; text-transform:none; border-bottom:1px solid #C7CECE; float:left; margin-bottom:6px; width:116px; text-align:left}

.pcolumnside {width:116px; float:left; margin-left:62px; text-align:center}

.portsm {margin-bottom:20px; display:block}
.portsmx {margin-right:16px;}

.portboxl {float:left; width:390px}
.portboxr {float:left; margin-left:14px; width:320px}
.portboxl img {float:left; margin-right:10px}
.portboxr img {float:left; margin-right:10px}

.portboxl .arrow {margin:5px 5px 0 0; padding:0}
.portboxr .arrow {margin:5px 5px 0 0; padding:0}

hr.port {clear:both; height:1px; color:#ccc; margin:16px 0 16px 0; background:#ccc; border:none}
#sitedetails {float:left; margin-left:16px; padding:0}

.note {color:#777}

.fileicon {margin:0 4px 0 0; vertical-align:middle; text-decoration:none}
.sss {margin-top:14px}


/* error handling for entry comments */
div.errorbox {
	background:url(/images/icon_alert.gif) #FAD6D6 7px 8px no-repeat; 
	padding:7px 5px 5px 25px; 
	border:1px solid #c66;
	margin-top:12px
	}
div.errorbox ul  {margin:5px 0 0 15px; padding:0}
div.errorbox ul li {list-style: square; padding: 0 0 4px 0}

.error {
	background:url(/images/icon_alert.gif) transparent 2px 3px no-repeat; 
	color:#c30; 
	padding-left:20px;
	font-weight:bold
	}

/* graphics portfolio */
#maincontent-graphics {
	float: left;
	text-align: left;
	background:#fff;
	margin: 0 auto;
	padding: 0px 0px 40px 0px;
	width: 520px
	}
	
#maincontent-graphics #pic {margin-top:16px}
	
#contentright-graphics {
	width:175px;
	margin:58px 0 0 14px; padding:0;
	float:left
	}
	
	
/* old school style */
.column {border-bottom:1px solid #555; margin-bottom:10px}
.post {margin:0 0 14px 0; padding:10px 0 10px 0; width:400px}
.date {font:9px "trebuchet ms", verdana,arial,sans-serif; text-align:right; border-top:1px solid #eee; padding-top:3px; margin-top:2px}
.archive {font:9px "trebuchet ms", verdana,arial,sans-serif; float:right}



#footerbox
{
	position: relative;
	clear:both;
	text-align:center;
	height: 118px;
	margin: -124px auto 0 auto;
	background:#fdfed7;
	border-top: 1px solid #dcd7b6;
	border-bottom:5px solid #270e02;
}

/* A CSS hack that only applies to IE -- specifies a different offset for the footer */
* html #footerbox
{
	margin-top: -118px;
}



#footer
{
	font:11px/16px 'trebuchet ms',verdana,arial,geneva;
	width:835px;
	text-align:left;
	margin: 0 auto;
	color:#625b30
}
	

#footer a:link {color:#625b30; text-decoration:none}
#footer a:visited {color:#625b30; text-decoration:none}
#footer a:hover {color:#625b30; text-decoration:underline}
#footer a:active  {color:#625b30; text-decoration:none}


#footer textarea {font:11px/16px verdana,arial,geneva; width:143px; height:55px; overflow-x:hidden; overflow-y:auto}
#footer span#error {display:none}

#footer .loading {background:url(/images/footload.gif) 0 1px no-repeat; padding-left:17px}
#footer .success {background:url(/images/success.png) 0 1px no-repeat; padding-left:14px}
#footer .error {background:url(/images/alert.png) 0 3px no-repeat; padding-left:14px;  font:11px/16px 'trebuchet ms',verdana,arial,geneva; color:#625b30}

#footer form {margin:0; padding:0}
#footer #form {width:144px; float:left; margin:8px 0 0 0; padding: 0 20px 0 20px; border-left:1px solid #dcd7b6; border-right:1px solid #dcd7b6; height:96px}

#footer #form #name {display:none}
#footer .send {font:11px/12px arial,geneva; height:19px; padding:0 1px 0 1px}


#footer dl {margin:8px 25px 0 10px; float:left}
#footer dl.footdlfirst {margin-left:0}
#footer dl.footdllast {margin:8px 22px 0 0}
#footer dl dt, label {font-weight:bold}
#footer dl dd {padding:0; margin:0}


#footer div#status-send span#status {
  float: left;
  text-align: left;
  width: 75%;
  }

#footer div#status-send span#send {
  float: right;
  text-align: right;
  width: 23%;
  }
  
#footer #flair {
	float:left;
	height:96px;
	margin:8px 0 0 0; 
	padding:0 18px 0 14px;
	border-right:1px solid #dcd7b6
	}

#footer #flair ul {
	list-style:none; 
	margin:3px 0 0 0; 
	padding:0;
	}
	
#footer #flair ul li {
	padding:0 0 5px 0;
	}
	
#footer #flair ul li.rss {background:url(/images/rss.gif) 0 2px no-repeat; padding-left:16px}
#footer #flair ul li.flickr {background:url(/images/flickr.gif) 0 2px no-repeat; padding-left:16px}
#footer #flair ul li.delicious {background:url(/images/delicious.gif) 0 3px no-repeat; padding-left:16px}

#footer #featflickr {
	float:left;
	height:96px;
	margin:8px 0 0 0; 
	padding:0 14px 0 14px;
	border-right:1px solid #dcd7b6;
	font:10px/16px 'trebuchet ms',verdana,arial,geneva;
	text-align:right
	}
	
#footer #featflickr img {
	display:block;
	border:none;
	padding-top:2px;
	}
	
#footer #copylight {
	height:76px;
	width:83px;
	float:left;
	margin:8px 0 0 0; 
	padding:0 0 0 14px;
	font:10px/16px 'trebuchet ms',verdana,arial,geneva
	}
	
#footer #copylight a {
	background:url(/images/footer-pratie.gif) no-repeat; 
	text-indent:-9999px;
	display:block;
	padding: 0 0 6px 0;
	height:18px;
	width:77px;
	}
	
#footer #copylight div {
	border-top:1px solid #dcd7b6;
	padding:4px 0 0 0
	}

.ghandi {font: 8px/10px Courier New, Helvetica, sans-serif; color:white; background:#3D3D3B; width:261px;}