/* 

STYLE SHEET FOR WEBSITE

ToC

	1. defaults
	2. structure
	3. links and navigation
	4. fonts
	5. images
	6. forms

Notes

*/



/* --------- 1. defaults  --------- */

* {
	margin: 0;
	padding: 0;
	background-color: #212121;
		}

body {
	background: #212121 url(assets/shared/body-background.gif) repeat-x;
	color: #FFFFFF;
		}
		
/*  --------- 2. structure  --------- */

#jump {
		background: #767272 url(assets/shared/top-stripe.gif) 20% 0 no-repeat;
		height: 11px;
		overflow: hidden;
		}

#wrapper {
		width: 760px;
		margin: 0 auto;
		background: url(assets/shared/wrapper-background.gif) no-repeat;
		padding-left: 13px;
		padding-top: 29px;
		}
		
#masthead {
		height: 80px;
		}
		
#logo {
	float: left;
	height: 70px;
	width: 200px;
		}
		
#navContainer {
		float: right;
		border-left: 1px solid #898989;
		padding-left: 17px;
		padding-bottom: 15px;
		}
#SWT_navContainer {
		float: right;
		border-left: 1px solid #898989;
		padding-left: 17px;
		padding-bottom: 15px;
		}

#content {
		}

#sidebar { 
		width: 389px;
		float: left;
		}

#copy {
	padding-top: 0px;
	float: left;
	width: 360px;
		}

#footer {
		clear: both;
		padding: 20px;
		}

.separator {
		clear: both;
		}

.separatorInvisible {
		clear: both;
		height: 1px;
		}

.infoBlock {
	clear: both;
	margin-bottom: 0em;
	padding-top: 1em;
	border-bottom-width: 0px;
	border-bottom-style: none;
	border-bottom-color: #FFFFFF;
		}
		
.infoText {
		float: left;
		width: 278px;
		margin-right: 20px;
		}
		
.infoImage {
		float: left;
		width: 62px;
		}

.noBottomBorder {
		border-bottom: 0;
		}
		
/* ---------- 3. links and navigation ---------- */

a {
		color: #ffffff;
		}

a:visited {
		color: #cccccc;
		}
		
a:hover {
		color: #f2e122 !important;
		}

#jump a {
		color: transparent;
		padding-top: 10px;
		display: block;
		text-decoration: none;
		}

#jump a:hover {
		color: #ffffff !important;
		padding-top: 0;
		border-bottom: 1px solid #999999;
		}

#navigation {
	width: 525px;
	padding-right: 5px;
		}
		
#SWT_navigation {
	width: 325px;
	padding-right: 5px;
		}

#navigation a {
		text-decoration: none;
		}

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

#navigation ul {
		list-style-type: none;
		}

#navigation li {
		display: inline;
		}

.mainNavigationList {
		font: bold 1.2em/0.8em Arial, sans-serif;
		text-transform: uppercase;
		letter-spacing: 0.05em;
		margin-bottom: 13px;
		}

.mainNavigationList li {
		padding-right: 15px;
		}

.mainNavigationList a {
		color: #ffffff;
		}
		
.portfolioList {
	color: #7c7c7c;
	letter-spacing: 0.1em;
	font-family: Arial, sans-serif;
	font-size: 1em;
	line-height: 1.4em;
	font-weight: bold;
	text-transform: uppercase;
		}

.portfolioList li {
		padding-right: 18px;
		}
		
.portfolioList a {		
		color: #e1e1e1;
		}

.portfolioList a:visited {
		color: #b1b1b1;
		}

.urlContainer a, a.externalLink {
		color: #cccccc;
		background: url(assets/shared/external-link.gif) 100% 0 no-repeat;
		padding-right: 15px;
		}

a.externalLink {
		color: #ffffff;
		}
		
		/* auto-link highlighting */
body.linkHome li#linkHome a, body.linkAbout li#linkAbout a, body.linkDesign li#linkDesign a, body.linkWriting li#linkWriting a, body.linkExternals li#linkExternals a, body.linkContacts li#linkContacts a, body.linkPf2000ad li#linkPf2000ad a, body.linkPfAbaddon li#linkPfAbaddon a, body.linkPfDaisy li#linkPfDaisy a, body.linkPfDigit li#linkPfDigit a, body.linkPfGithead li#linkPfGithead a, body.linkPfFilemaker li#linkPfFilemaker a, body.linkPfIFI li#linkPfIFI a, body.linkPfPCA li#linkPfPCA a, body.linkPfProven li#linkPfProven a, body.linkPfTechworld li#linkPfTechworld a, body.linkPfThalamus li#linkPfThalamus a, body.linkPfWDR li#linkPfWDR a {
	color: #f26522;
	background-color:  #212121;
		}
		
/* ---------- 4. fonts ---------- */

html {
		font-size: 100%;
		}

body {
	font-size: 62.5%;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: normal;
	text-transform: none;
		}

h1, h2, h3, h4, p, ul {
		}

h1 {
	color: #FFFF00;
	padding-bottom: 8px;
	margin-bottom: 7px;
	text-transform: none;
	font-family: Arial, sans-serif;
	font-size: 1.4em;
	font-weight: bold;
		}

.urlContainer {
		float: right; 
		font-size: 0.8em;
		font-weight: normal;
		text-transform: lowercase;
		line-height: 1.4em;
		}

h1.captionTextPadded {
		font-weight: bold;
		font-size: 1.1em;
		padding-bottom: 2px !important;
		margin-bottom: 0;
		}
		
h2 {
		font: bold 1.1em/1.1em "Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, sans-serif;
		color: #eeeeee;
		padding-bottom: 2px;
		text-transform: uppercase;
		margin-top: 1.5em;
		}

h3 {
		}
		
h4 {
		}

p {
		font: 1.1em/1.4em "Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, sans-serif;
		margin-bottom: 1em;
		}

.introText {
		border-bottom: 1px solid #555;
		padding-bottom: 1em;
		margin-bottom: 0em;
		}

.thumbnailsSelector {
		margin-top: -0.8em;
		}

.captionText, .captionTextPadded {
		font: 1.0em/1.3em Arial, sans-serif;
		padding-left: 1em;
		padding-right: 2.2em;
		margin-bottom: 0;
		border-left: 1px solid #555555;
		}

.captionTextPadded {
		padding-bottom: 1em !important;
		}

.footnote {
		font-size: 0.9em;
		margin-top: 1.5em;
		}

.terminate {
		text-align: center;
		color: #464646;
		}

#jump p {
		font: 0.9em Arial, sans-serif;
		text-align: center;
		text-transform: uppercase;
		}

#sidebar ul {
		padding-left: 25px;
		border-left: 1px solid #555555;
		}


#sidebar li {
		font: 1.0em/1.3em Arial, sans-serif;
		}


blockquote {
		margin-top: 1.6em;
		}

p.quoteBody {
		text-align: right;
		font-size: 1.2em;
		color: #f26522;
		}
		
p.quoteCite {
		text-align: right;
		font-weight: bold;
		}

/* ---------- 5. images ---------- */

a img {
		border: 0;
		}

#sidebar img {
		display: block;
		padding-right: 6px;
		background: #212121 url(assets/shared/shadow-right.gif) no-repeat top right;
		}

#imageContainer {
		width: 368px;
		padding-bottom: 6px;
		padding-right: 6px;
		background: #212121 url(assets/shared/shadow-bottom.gif) no-repeat bottom right;
		margin-bottom: 1em;
		}

#imageContainer div {
		width: 368px;
	 	padding: 0px 6px 0 0px;
		}

.infoImage img {
	border: 1px solid #555555;
	background-color: #FFFFFF;
		}

/* ---------- 6. forms ---------- */

form {
		background: #333;
		padding: 10px;
		margin-bottom: 1em;
		}

input, textarea {
		margin-top: 3px;
		}

.formField {
		background-color: #333333 !important;
		border: 1px solid #888888;
		color: #ffffff;
		font: normal 1.1em/1.4em "Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, sans-serif;
		padding: 1px;
		width: 336px;
		}
		
.formField:hover, .formField:focus {
		border-color: #aaaaaa;
		}
		
.submitButton {
		font: bold 1.1em/1.4em "Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, sans-serif;
		border: 1px solid #888888;
		background-color: #888888 !important;
		color: #ffffff;
		padding: 2px 4px;
		}
		
.submitButton:hover, .submitButton:focus {
		border-color: #aaaaaa;
		}

.realname {
		visibility: hidden;
		height: 1px;
		}
		
/* ---------- A. debug colours ---------- */

/*
#wrapper {
		background: red;
		}
		
#masthead {
		background: purple;
		}
		
#navContainer {
		background: orange;
		}
		
#content {
		background: orange;
		}

#sidebar {
		background: blue;
		}
		
.introText, .infoBlock {
		background: green;
		}
		*/		

.styleStartUp {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 18px;
	font-style: normal;
	font-weight: bold;
	font-variant: normal;
	color: #CCCCCC;
	line-height: 20px;
	text-transform: lowercase;
}