/*	undohtml.css
(CC) 2004 Tantek Celik. Some Rights Reserved.
	http://creativecommons.org/licenses/by/2.0
	This style sheet is licensed under a Creative Commons License.

	Purpose: undo some of the default styling of common (X)HTML browsers */

/*	link underlines tend to make hypertext less readable, because underlines
	obscure the shapes of the lower halves of words */

:link, :visited { text-decoration: none; }

/*	no list-markers by default, since lists are used more often for semantics */
ul, ol { list-style: none; }

/*	avoid browser default inconsistent heading font-sizes and pre/code too */
h1, h2, h3, h4, h5, h6, pre, code
{
	font-size: 1em;
	text-transform: lowercase;
}

/*	remove the inconsistent (among browsers) default ul,ol padding or margin
	the default spacing on headings does not match nor align with normal
	interline spacing at all, so let's get rid of it. Zero out the spacing
	around pre, form, body, html, p, blockquote as well form elements are oddly
	inconsistent, and not quite CSS emulatable. Nonetheless strip their margin
	and padding as well */

ul, li, h1, h2, h3, h4, h5, h6, pre, sup, form, body, html, p, blockquote, fieldset, input
{
	margin: 0;
	padding: 0;
}

table, tr, th, td
{
	margin: 0;
	padding: 0;
}

/*	whoever thought blue linked image borders were a good idea? */
a img, :link img, :visited img { border: none; }

/*	de-italicize address */
address { font-style: normal; }

/*	Drawing Business site styles start here. First we remove some unwanted
	display properties from some additional elements. */

hr, legend { display: none; }
fieldset { border: none; }
a>img { vertical-align: bottom; }

a:link, a:focus
{
	color: rgb(0, 159, 60);
	background-color: inherit;
}

a:hover, a:focus, a:active
{
	color: red;
	background-color: inherit;
	text-decoration: underline;
}

a:visited
{
	color: rgb(108, 108, 108);
	background-color: inherit;
}

p, blockquote, q
{
	margin-top: 8px;
	margin-bottom: 15px;
}

body
{
	margin: 0;
	padding: 0 0 20px 0;
	color: black;
	background-color: white;
	font-family: Verdana, Trebuchet, Arial, sans-serif;
	font-size: 1em;
	;
}

#main-page
{
	width: 800px;
	margin: 0 auto;
	font-size: 0.9em;
	;
}

div.page-style
{
	position: relative;
	color: black;
	background-color: rgb(247,243,0);
	background-repeat: no-repeat;
	background-position: center bottom;
	border-color: rgb(64,64,64);
	border-width: 1px;
	border-style: solid;
	padding: 152px 39px 40px 39px;
}

div.page-style#homepage { background-image: url(/img/page/dinosaurs.png); }
div.page-style#contact-page { background-image: url(/img/page/enterprise.png); }
div.page-style#credits, div.page-style#error500, div.page-style#error410, div.page-style#error404, div.page-style#error403 { background-image: url(/img/page/robot-eye.png); }
div.page-style#access { background-image: url(/img/page/mai.png); }

div.page-style#links
{
	background-image: url(/img/page/flesh-5.png);
	background-position: 50% 110px;
}

div.page-style#credentials
{
	background-image: url(/img/page/harajuku.png);
	background-position: center center;
}

div.page-style#blog
{
	background-image: url(/img/page/dredd.png);
	background-position: 50% 116px;
	background-repeat: repeat-y;
}

div.page-style#promote, div.page-style#forum, div.page-style#portfolio
{
	background-image: url(/img/page/icon.png);
	background-position: 0 116px;
	background-repeat: repeat;
}

div.page-style#downloads
{
	background-image: url(/img/page/download-arrow.png);
	background-repeat: repeat;
}

#banner
{
	position: absolute;
	width: 800px;
	height: 112px;
	top: 0;
	left: 50%;
	margin-left: -400px;
	;
}

/*Format the lists used for navigation*/
dl, dl dt
{
	padding: 0;
	margin: 0;
}

dl dt { display: inline; }
#banner span, dl dd { display: none; }

#banner :link
{
	border: none;
	text-decoration: none;
	font-weight: normal;
}

#top-banner
{
	position: absolute;
	width: 798px;	height: 86px;	top: 0;
	left: 0;
	color: rgb(112, 112, 112);
	background-color: rgb(128,128,128);
	background-image: url(/img/banner-steel.png);
	background-repeat: repeat-x;
	border-color: rgb(64,64,64);
	border-width: 1px;
	border-style: none solid solid solid;
}

#banner-nav h4
{
	position: absolute;
	width: 74px;
	height: 7px;
	top: 10px;
	left: 20px;
	background-image: url(/img/navigate.png);
	background-repeat: no-repeat;
}

/* Background images for the main navigation buttons */
#banner-nav dt
{
	display: block;
	position: absolute;
	width: 48px;
	height: 48px;
	top: 27px;
	background-image: url(/img/button-bevel.png);
	background-repeat: no-repeat;
	text-align: center;
}

/* Position each of the navigation icons */
#icon-1 { left: 20px; }
#icon-2 { left: 88px; }
#icon-3 { left: 156px; }
#banner-nav dt a img { margin-top: 2px; }

/* Position the text labels for the three main links */
#banner-nav a strong
{
	position: absolute;
	top: -19px;
	left: 78px;
	font-size: 9px;
	visibility: hidden;
	font-weight: normal;
	color: rgb(112, 112, 112);
	background-color: inherit;
	text-transform: uppercase;
	font-family: monaco, courier, sans-serif;
}

dt#icon-2 a strong { left: 10px; }
dt#icon-3 a strong { left: -58px; }
#banner-nav a:hover { text-decoration: none; }
#banner-nav a:hover strong { visibility: visible; }

#banner-logo
{
	position: absolute;
	width: 380px;
	height: 86px;
	top: 0;
	left: 50%;
	text-align: right;
}

#banner-logo h2
{
	position: absolute;
	width: 225px;
	height: 7px;
	top: 68px;
	left: 86px;
	background-image: url(/img/richard-smith-drawing-business.png);
	background-repeat: no-repeat;
}

#banner-logo p
{
	position: absolute;
	width: 59px;
	height: 59px;
	top: 19px;
	left: 321px;
	margin: 0;
	padding: 0;
}

#minor-banner
{
	position: absolute;
	width: 798px;	height: 24px;	top: 87px;
	left: 0;
	color: white;
	background-color: black;
	background-image: url(/img/banner-glass.png);
	background-repeat: repeat-x;
	border-color: rgb(64,64,64);
	border-width: 1px;
	border-style: none solid solid solid;
	font-size: 0.7em;
	line-height: 2em;
}

#minor-banner a
{
	color: white;
	background-color: inherit;
	text-transform: lowercase;
}

#minor-banner a:hover,#minor-banner a:focus
{
	text-decoration: underline;
	font-weight: normal;
}

#minor-banner dt { margin-right: 0.5em; }

#minor-banner dl { padding-left: 20px; }

div#page-ident
{
	position: absolute;
	width: 50%;
	right: 0;
	top: 0;
	text-align: right;
}

div#page-ident h3
{
	text-transform: lowercase;
	font-weight: normal;
	padding-right: 20px;
	margin: 0;
}

div#intro em, div#intro strong
{
	font-style: normal;
	font-weight: normal;
}

/* ------ BEGIN POSITIONING AND APPEARANCE FOR THE SPEECH BUBBLES ------ */
div.panel
{
	position: relative;
	height: 100%;
	background-repeat: no-repeat;
	background-position: right center;
	margin-bottom: 40px;
}

div.b-outer { position: relative; }

div.b-top
{
	position: relative;
	height: 12px;
	background-image: url(/img/bubbles/flow-large-top.png);
	background-repeat: no-repeat;
	background-position: left bottom;
}

div.b-bottom
{
	position: relative;
	height: 12px;
	background-image: url(/img/bubbles/flow-large-top.png);
	background-repeat: no-repeat;
	background-position: left top;
}

div.b-content
{
	position: relative;
	padding: 16px 16px 17px 16px;
	color: inherit;
	background-color: white;
	border-color: black;
	border-width: 2px;
	border-style: none solid none solid;
	;
}

/*	To stop IE breaking the box size, hide the overflow from the boxes.
	The resort the default overflow for more capable browsers. */

/*	Fix the position for the right hand bubble in panels with 2 bubbles. */
div.a-right
{
	position: absolute;
	top: 0;
	right: 0;
}

/*	Set the widths for the different size containers. */
.v-small { width: 276px; }
.v-half { width: 330px; }
.v-default { width: 400px; }
.v-large { width: 520px; }
.v-full { width: 100%; }


/*	The top section of the large bubble needs more room. */
.v-default div.b-top, .v-large div.b-top, .v-full div.b-top { height: 27px; }

/*	The half size and small containers need a margin for the arrow. */
.v-half div.b-content, .v-small div.b-content { margin-right: 17px; }
.a-right div.b-content, .a-right div.b-content { margin: 0 0 0 17px; }
div.v-default div.b-content { margin: 0 !important; }

/*	Set the backgground images for the different bubbles sizes. */
.v-small div.b-top { background-image: url(/img/bubbles/small-top.png); }
.v-small div.b-bottom { background-image: url(/img/bubbles/small-bottom.png); }
.v-half div.b-top { background-image: url(/img/bubbles/half-top.png); }
.v-half div.b-bottom { background-image: url(/img/bubbles/half-bottom.png); }
.v-default div.b-top { background-image: url(/img/bubbles/default-top.png); }
.v-default div.b-bottom { background-image: url(/img/bubbles/default-bottom.png); }
.v-large div.b-top { background-image: url(/img/bubbles/large-top.png); }
.v-large div.b-bottom { background-image: url(/img/bubbles/large-bottom.png); }
.v-full div.b-top { background-image: url(/img/bubbles/full-top.png); }
.v-full div.b-bottom { background-image: url(/img/bubbles/full-bottom.png); }

/*	For the small and half size bubbles, push the images over to align with the content. */
div.a-right div.b-top, div.s-right div.b-top { background-position: right bottom; }
div.a-right div.b-bottom, div.s-right div.b-bottom { background-position: right top; }

.arrow
{
	position: absolute;
	width: 19px;
	height: 31px;
	background-repeat: no-repeat;
}

.a-right div.arrow
{
	top: 44px;
	left: 0;
	background-image: url(/img/bubbles/arrow-left.png);
}

.a-left div.arrow
{
		right: 0;
	bottom: 84px;
	
	background-image: url(/img/bubbles/arrow-right.png);
}


/*	
	Single large bubbles are pushed to the right by padding the panel that contains them.
	The background image is then pushed back to the left.
*/
div.s-right
{
	padding-left: 320px;
	background-position: left center;
}

div.p-large { padding-left: 200px; }

/* ------ END POSITIONING AND APPEARANCE FOR THE SPEECH BUBBLES ------ */

/*	
	Background images for the main panels.
*/

div#pane-bg-1
{
	min-height: 325px;
	margin-left: -15px;
	padding-left: 335px;
	background-image: url(/img/bg/zed.png);
}

/*
	Need to move Strawberry to the left a bit, because it is quite a narrow image 
*/

div#pane-bg-2
{
		margin-right: 70px;
	min-height: 325px;	
	
	background-image: url(/img/bg/strawberry-blonde.png);
}

div#pane-bg-3
{
	min-height: 325px;

	margin-right: 50px;
	background-image: url(/img/bg/pod-girl.png);
}

div#pane-bg-4
{
	min-height: 325px;
	background-image: url(/img/bg/macbeth.png);
}

div#pane-bg-5
{
	min-height: 325px;
	background-image: url(/img/bg/children.png);
}

div#pane-bg-6
{
	min-height: 496px;
	background-image: url(/img/bg/axe-girl.png);
}

div#pane-bg-7
{
	min-height: 325px;
	padding-left: 270px;
	margin-left: 50px;
	background-image: url(/img/bg/phone.png);
}

div#pane-bg-8
{
	min-height: 325px;
	background-image: url(/img/bg/sharewareman.png);
}

div#pane-bg-9
{
	min-height: 441px;
	background-image: url(/img/bg/professor-indus.png);
}

div#pane-bg-10
{
	min-height: 325px;
	background-image: url(/img/bg/drac-attack.png);
}

div#access div#pane-bg-10 { margin-right: 50px; }

div#pane-bg-11
{
	min-height: 325px;
	background-image: url(/img/bg/supergoose.png);
}

div#pane-bg-12
{
	min-height: 284px;
	background-image: url(/img/bg/van-girl.png);
}

div#pane-bg-13
{
	min-height: 580px;
	background-image: url(/img/bg/sexy-postie.png);
}

div#pane-bg-14
{
	min-height: 313px;
	background-image: url(/img/bg/curly.png);
}

div#samples div.b-content
{
	font-size: 0.7em;
	text-align: center;
}

div#samples p { margin: 4px 0; }

/*
	Pad the text within the large bubble so it fits nicely.
*/

h3, h4, h5
{
	margin-bottom: 1em;
	text-transform: lowercase;
}

/*
Tarty bitmap text for the main headings, just because it's funky
*/

h3.bitmap
{
	position: relative;
	height: 16px;
	background-repeat: no-repeat;
	background-position: left top;
}

.bitmap#hd-e-mail
{
	background-image: url(/img/heading/e-mail.png);
	margin-left: 8px;
}

.bitmap#hd-im { background-image: url(/img/heading/instant-message.png); }
.bitmap#hd-phone { background-image: url(/img/heading/by-phone.png); }
.bitmap#hd-post { background-image: url(/img/heading/by-post.png); }
.bitmap#hd-summary { background-image: url(/img/heading/summary.png); }
.bitmap#hd-clients { background-image: url(/img/heading/clients.png); }
.bitmap#hd-plaudits { background-image: url(/img/heading/client-comments.png); }
.bitmap#hd-awards { background-image: url(/img/heading/awards.png); }
.bitmap#hd-access-keys { background-image: url(/img/heading/access-keys.png); }
.bitmap#hd-browsers { background-image: url(/img/heading/browsers.png); }
.bitmap#hd-exceptions { background-image: url(/img/heading/exceptions.png); }
.bitmap#hd-mac-ie { background-image: url(/img/heading/mac-ie.png); }
.bitmap#hd-illustration { background-image: url(/img/heading/illustration.png); }
.bitmap#hd-friends { background-image: url(/img/heading/friends.png); }
.bitmap#hd-software { background-image: url(/img/heading/software.png); }
.bitmap#hd-built-with { background-image: url(/img/heading/built-with.png); }
.bitmap#hd-open-source { background-image: url(/img/heading/open-source.png); }
.bitmap#hd-people { background-image: url(/img/heading/people.png); }
.bitmap#hd-design { background-image: url(/img/heading/design.png); }
.bitmap#hd-support { background-image: url(/img/heading/support.png); }
.bitmap#hd-badges { background-image: url(/img/heading/badges.png); }
.bitmap#hd-no-pictures { background-image: url(/img/heading/text-only.png); }
.bitmap#hd-wallpaper { background-image: url(/img/heading/wallpaper.png); }
.bitmap#hd-paper-model { background-image: url(/img/heading/paper-model.png); }
.bitmap span { display: none; }

blockquote, q
{
	font-size: 0.9em;
	font-style: italic;
}

div#client-comments p span
{
	color: rgb( 100,190,106 );
	background-color: inherit;
}

div#client-comments p span a
{
	color: inherit;
	background-color: inherit;
}

div#client-list
{
	top: 19px;
	padding-bottom: 19px;
}

div#client-list li { font-size: 0.9em; }

/*
Styling for the contact forms
*/

#main-contact form { margin: 0 8px; }
#main-contact fieldset { font-size: 0.8em; }
#main-contact input[type="text"] { width: 75%; }
#main-contact input, textarea { margin-top: 4px; }

#main-contact textarea
{
	width: 346px;
}

form#quick-contact textarea { height: 80px; }

input[type="text"], input[type="password"], input[type="submit"], textarea
{
	color: black;
	background-color: rgb( 251,249,127 );
	border-color: black;
	border-width: 1px;
	border-style: solid;
}

input[type="submit"]
{
	font-size: 0.9em;
	padding: 2px 4px;
}

/*
The highlights for missing fields on form submissions
*/

form em
{
	color: red;
	background-color: inherit;
	font-weight: bold;
}

ul#keylist li
{
	position: relative;
	height: 1.6em;
}

ul#keylist li span
{
	display: block;
	position: absolute;
	width: 2.5em;
	right: 0;
	top: 0;
}

div.webbadges p { text-align: center; }
div.webbadges code
{
	display: block;
	color: black;
	background-color: rgb(218, 218, 218);
	padding: 1em;
	margin-bottom: 2em;
	line-height: 1.4em;
	border-color: rgb(108, 108, 108);
	border-width: 1px;
	border-style: solid;
}

div#maplist ul li ul li
{
	padding-left: 4em;
	background-image: url(/img/map-arrow.png);
	background-repeat: no-repeat;
	background-position: 0 3px;
}
div#maplist ul h4, div#maplist ul h5, div#maplist ul h6 { margin-bottom: 0.3em; }
div#maplist ul li p
{
	margin-top: 0.3em;
	font-size: 0.8em;
}

/*
Rules for the table on contact page.
*/
#software td, #im-services td, #im-services th { padding-bottom: 1em; }

/*	Need to fudge the height of the table to sort out IE5 */

.service
{
	text-align: right;
	padding-right: 6px;
	color: rgb( 100,190,106 );
	background-color: inherit;
}

div#badges
{
	height: 15px;
	margin-bottom: 0;
		
}

div#badges dl dt a img { margin-right: 20px; }

p#sitescore
{
	text-align: center;
	margin-top: 1em;
}

p#sitescore img
{
	color: white;
	background-color: rgb(209,17,17);
	font-size: 0.8em;
}

div.db-footer
{
	padding-top: 12px;
	text-align: center;
	font-size: 0.7em;
	text-transform: lowercase; 
}

div.db-footer a { text-decoration: underline; }

div.db-footer dl {margin-top: 0.5em;}

/*	Styling for the Del.icii.us tag list at the bottom of the page. */
ul#taglist, ul#taglist li { display: inline; }
ul#taglist li a { text-decoration: none; }

div.wallpaper { text-align: center; }
div.wallpaper img
{
	padding: 8px 24px 8px 24px;
	color: black;
	background-color: rgb(218, 218, 218);
	border-color: rgb(128,128,128);
	border-width: 2px;
	border-style: solid;
}
div.wallpaper ul { margin-top: 0.5em; margin-bottom: 1em; }
div.wallpaper li { font-size: 0.8em; margin-bottom: 0.2em; }

/* General rules for all pages */
*.rightside { text-align: right; }
*.large-gap { margin-top: 2em; }
*.text-only { display: none; }
*.notes { font-size: 0.8em; }
*.shout { text-transform: uppercase; }

/*
	Make sure that all submit buttons show the hand cursor in Gecko and Safari (this
	selector style doesn't work in WinIE.
*/

input[type="submit"]:hover { cursor: pointer; }

td.spambot:hover { cursor: help; }

.show-list dt
{
	display: block;
	margin-bottom: 0.5em;
}

.show-list dd
{
	display: block;
	font-size: 0.9em;
	margin-left: 1em;
	margin-bottom: 1.5em;
}

/*
	Sometimes I do want the strong phrase element to display as bold
*/
strong.reallybold { font-weight: bold !important; }


div#gallery.IE
{
	width: 716px;
	overflow: hidden;
}

/*
*/