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}

img {border:none}

#wrap {
	width:882px; 
	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 0 0 8px;
	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 16px "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:0 0 5px 0;
	color:#000;
	border-bottom:1px solid #ddd
	}
	
#content {
	width:100%;
	text-align: left;
	margin: 25px auto;
	}
	
#maincontent-home {
	float: left;
	text-align: left;
	background:#fff;
	margin: 0 auto;
	padding: 0px 0px 100px 0px;
	width: 500px
	}

#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-home {
	margin: 0 0 0 524px;
	text-align: left;
	color: #555;
	background:#fff;
	height:100%;
	min-height:400px
	}

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

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

#news p {margin:0 0 10px 0}

#links ul {/*margin:0; padding:0; */list-style:square}
#links ul li {display:inline; padding:10px}

#misc, #feat, #news {margin-bottom:16px}

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

#sidebar .feature-btn, #sidebar-home .feature-btn {margin:5px 0 0 0}
#sidebar .albumart, #sidebar-home .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 .iphone, #sidebar-home .iphone {background:url(/images/weblog/general/iphone.gif) 0 3px no-repeat; margin:0 0 0 0; padding-left:85px; height:50px; display:block}
#sidebar .feature, #sidebar-home .feature {margin:0 0 12px 0; padding:0}


#sidebar #midcol {float:left; margin-bottom:50px; width:135px}
#sidebar-home #midcol-home {float:left; margin-bottom:50px; width:200px}
#sidebar #farcol, #sidebar-home #farcol {float:right; width:135px}
#sidebar-home #reading img.book {float:left; margin:0 8px 0 0}

/* 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;}
div#flickr_badge_uber_wrapper img[src*="http://geo.yahoo.com"] { display:none }

/* 	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:#E8D59B} /* D9C891 or E8D59B*/

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

.playbox div.play {border-left:1px solid #C7D8D8}
.playbox div.misc {border-left:1px solid #C6D991}
.playbox div.wall {border-left:1px solid #D9C891; padding-left:8px}

.playbox ul {list-style:none; margin:0; padding:0}
.playbox ul li {padding-bottom:5px}

.playbox div.misc strong {padding-left:8px}
.playbox div.play ul li {background:url(/images/playarrw1.gif) #fff 0 5px no-repeat; padding-left:8px}
.playbox div.misc ul li {background:url(/images/playarrw2.gif) #fff 0 5px no-repeat; padding-left:8px}


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

.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}

#portmain {width:540px; margin-right:40px}

.feature {width:540px; height:210px;}
.feature .content {padding:0 0 10px 0}
.feature .content a.mlink {font-weight:bold; margin-top:16px; display:block}
.featureimg {display:block; margin-bottom:18px}

.feature .content h3 {font-size:11px; font-weight:bold; text-transform:none; border-bottom:1px solid #C7CECE; margin-bottom:5px}

#portsidebar {width:250px; height:404px; float:left; margin: 26px 0 0 70px; text-align:left}


#portsidebar .scrtext div {float:left; padding:0 10px 0 0; text-align:center; font-weight:bold}
#portsidebar .scrtext div img {display:block}

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

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

ul.tools ul {list-style:none; margin:0; padding:0 0 0 8px}
ul.tools 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:10px 24px 0 0}
.portsmr {margin:10px 28px 0 0; vertical-align:top}

.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}

.project-large {float:left; margin:0 18px 20px 0}
.visit {font-weight:bold}

#sitedetails dl {padding:0; margin:0}
#sitedetails dl dt {
	float: left;
	font-weight: bold;
	text-align: right;
	line-height: 18px;
}

#sitedetails dl dd {
	line-height: 18px;
	margin-bottom:10px
}

#webpager {margin-bottom:30px; border-bottom:1px solid #ddd}
#webpager #left {float:left; width:50%}
#webpager #right {float:right; width:50%; text-align:right}
.portclear {clear:both; height:50px}
.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
	}
	
	
#iphonethumbs img {float: left; margin: 0 15px 40px 0}
.clearboth {clear: both}

/* 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}


.footclear {clear:both; margin-top:100px}
#footerbox
{
	position: relative;
	clear:both;
	text-align:center;
	height: 118px;
	margin: -124px auto 0 auto;
	/*background:#fdfed7;*/
	background:url(/images/footbg.gif) repeat-x #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 26px 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 5px 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
	}
	
/* homepage flickrbox */
#images { min-height: 375px; width: 500px; padding:0; margin:0; overflow:hidden}
#loader {text-align:center; background:#f5f5f5}
#loader img {vertical-align:middle}

div#flickrbox {
	position: relative;
    z-index: 90;
	width:500px;
	height:375px;
    margin: 0;
    background: transparent;
}

a#next, a#prev {
	position: absolute;
	bottom: 0px;
	height: 100%;
	width: 35%;
	cursor: pointer;
	outline: none;
	background-image: url('images/blank.gif');
	overflow: hidden;
	z-index: 1102;
}

a#next {
	right: 0px; 
}

a#prev {
	left: 0px; 
}

span.arrow {
	position: absolute; 
	top: 50%;
	margin-top: -20px;
	width: 35px;
	height: 35px;
	z-index: 112; 
	cursor: pointer;
	display: block;
}

span#arrwp {
	left:-9999px;
	background: transparent url('/images/flick_left.png') no-repeat;
}

span#arrwn {
	right:-9999px;
	background: transparent url('/images/flick_right.png') no-repeat;
}

a#prev:hover, a#next:hover {
	visibility: visible
}

a#prev:hover span {
	left: 20px; 
}

a#next:hover span {
	right: 20px; 
}