/* === GENERAL BODY STYLE === */
html {
	background-color: #d8d8d8;
	background-image: url(../images/background.png);
}

body {
	font-family: Verdana, sans-serif;
	font-size: 11px;
	color: #333333;
	padding: 0;
	margin: 0;
	text-align: center; /* Accounting for IE5 */
	padding-bottom: 18px;
}

#body {
	background-color: #ffffff;
	background-image: url(../images/content-background.png);
	background-repeat: repeat-y;
	width: 660px;
	padding: 0 72px 0 72px;
	margin: 19px auto 0 auto;
	text-align: left; /* Recover from IE5 centering */
	overflow: hidden;
}
table {
	font-family: Verdana, sans-serif;
	font-size: 11px;
}

td {
	vertical-align: top;
}

/* === HEADERS AND PARAGRAPHS === */
h1 {
	font-family: 'Century Gothic', sans-serif;
	font-size: 24px;
	margin: 0 10px 0 0;
	padding: 2px 0 0 0;
}

h2 {
	font-family: 'Century Gothic', sans-serif;
	font-size: 18px;
	font-weight: bold;
	letter-spacing: 0.3em;
	color: #ff5300;
	margin: 15px -20px 20px -20px;
	clear: both;
}

h3 {
	font-size: 11px;
	font-weight: bold;
	font-variant: small-caps;
	margin: 15px 0 5px 0;
	padding: 0;
	clear: both;
}

h4 {
	font-size: 11px;
	font-weight: bold;
	font-variant: small-caps;
	margin: 2px 0 3px 0;
	padding: 0;
}

p, blockquote {
	text-align: justify;
	line-height: 18px;
	margin: 0 0 30px 0;
	padding: 0;
/*	clear: both;*/
}
blockquote {
	margin: 0 3em 10px 3em;
	padding: 5px 5px 5px 45px;
	border: 1px solid #ddd;
	/*border-left: 5px solid #ffcc99;*/
	background-color: #eaeaea;
	background-image: url(../images/quote.gif);
	background-position: 5px 5px;
	background-repeat: no-repeat;
}
q {
	background-color: #eaeaea;
	border-bottom: 1px solid #ffcc99;
}
pre, code, kbd, samp {
	font-family: 'Consolas', monospace;
}
pre, samp {
	color: gray;
	background-color: black;
	border: 1px solid silver;
	padding: 1px;
	overflow: auto;
}

/* === LINKS === */
a:link {
	color: #ff5300;
	text-decoration: underline;
}
a:hover {
	color: #ff5300;
	background-color: #ffebe1;
}
a:active {
	color: #ff0000;
}
a:visited {
	color: #ff5300;
	text-decoration: none;
}

/* DEFAULT ELEMENT STYLES */
abbr, acronym {
	border-bottom: 1px dotted #ff5300;
}
hr {
	border: 0;
	border-top: 1px solid silver;
	height: 1px;
}
ol, ul, li, fieldset {
	border: 0;
	margin: 0;
	padding: 0;
}
ul {
	list-style-type: square;
	padding: 0 0 0 1.5em;
}
ul li, ol li {
	line-height: 18px;
}
ol {
	padding: 0 0 0 2em;
	margin: 0 0 30px 0;
}
label {
	font-size: 11px;
	font-weight: bold;
	font-variant: small-caps;
	text-align: right;
}
input, textarea {
	font-family: Verdana, sans-serif;
	font-size: 11px;
}
input.text, textarea {
	background-color: #fff6e5;
	border: 1px solid #ffcc99;
	width: 30em;
	padding: 2px;
}
textarea {
	height: 10em;
}
input.text:hover, textarea:hover,
input.hover, textarea.hover {
	border: 1px solid #ff8f4c;
}
input.text:focus, textarea:focus,
input.focus, textarea.focus {
	background-color: #ffe5cc;
	border: 1px solid #ff8f4c;
}
input.button {
	padding: 2px;
}


/* === CUSTOM STYLES === */
.stepbystep {
	margin: 0 0 30px 0;
}
.stepbystep ol {
	padding: 0 0 0 2em;
}
.stepbystep li {
	line-height: 18px;
	margin-bottom: 0.5em;
}
.stepbystep li.one {
	list-style-image: url(../images/list-step-01.png);
}
.stepbystep li.two {
	list-style-image: url(../images/list-step-02.png);
}
.stepbystep li.three {
	list-style-image: url(../images/list-step-03.png);
}
.stepbystep li.four {
	list-style-image: url(../images/list-step-04.png);
}

#ioc {
	margin-bottom: 30px;
	z-index: 100;
}
#ioc ul {
	padding: 0 0 0 2em;
}
#ioc ul ul {
	padding: 0 0 0 1em;
}
#ioc li {
	line-height: 18px;
}
#ioc #iocTop {
	display: none;
	margin-bottom: 6px;
}
#ioc.undocked {
	background-color: #fff;
	border: 1px solid;
	border-color: #ccc #999 #999 #ccc;
	position: fixed;
	padding: 5px;
	width: 180px;
	top: 100px;
	right: 20px;
}
#ioc.undocked h3 {
	background-color: #ff5300;
	color: #fff;
	margin: -4px -4px 6px -4px;
	padding: 2px;
}
#ioc.undocked #iocTop {
	display: block;
}

/*#ioc .newsItem {
	display: none;
}*/

.sectionend {
	text-align: right;
	margin-top: -20px;
	clear: both;
}

/* --- Illustration Images --- */
img.sketch {
	background-color: #fff6e5;
	background-image: url(../images/thumb-background.png);
	border: 1px solid #ffcc99;
	/*border-radius: 10px 10px;
	-moz-border-radius: 10px;*/
	padding: 10px;

}
.illustration {
	background-color: #fff6e5;
	background-image: url(../images/thumb-background.png);
	border: 1px solid #ffcc99;
	/*border-radius: 10px 10px;
	-moz-border-radius: 10px;*/
	padding: 10px;
	margin: 0 0 10px 10px;
	float: right;
	clear: both;
}
.imageTitle {
	color: #ff5300;
	background-color: #fc9;
	font-weight: bold;
	padding: 2px;
	line-height: 13px;
	text-align: center;
	text-decoration: none;
}
.illustrationContainer {
	float: right;
	margin: 0 0 10px 10px;
	clear: both;
}
.illustrationContainer .illustration {
	float: none;
	margin: 0;
	display: block;
}


/* --- TIMESTAMP --- */
.timestamp {
	color: #999999;
	background-color: #fafafa;
	padding: 1px;
	border: 1px solid #bbbbbb;
	border-top: 1px solid #dddddd;
	border-left: 1px solid #dddddd;

	float: left;
	text-align: center;
	margin: 3px 5px 3px 0;
	width: 4em;
	/* RESET H4 */
	font-weight: normal;
	font-variant: normal;
}
.timestamp .separator, .timestamp .prefix {
	display: none;
}
.timestamp .day {
	font-size: 20px;
	display: block;
}
.timestamp .time {
	display: block;
	border-top: 1px solid #ddd;
	margin-top: 2px;
	padding-top: 1px;
}
.newsContent {
	line-height: 18px;
	overflow-x: auto;
	border: 1px solid white; /* Without this Firefox render this element over the .footer when overflow = auto */
}
.footer {
	color: #999;
	text-align: right;
	padding: 3px 0 6px 0;
	/*margin: -15px 0 30px 0;*/
	margin: 0 0 30px 0;
	border-top: 1px solid #ddd;
	border-bottom: 3.1px double silver; /* For some reason, Firefox 1.5 only show a single line if the width is 3px. */
	list-style-type: none;
	clear: both;
}
.footer li {
	display: inline;
	margin: 0 10px 0 15px;
}
.footer label {
	font-variant: normal;
	font-weight: normal;
	line-height: 1em;
	vertical-align: middle;
}
.footer input {
	line-height: 1em;
	vertical-align: middle;
}

.comments, div.postComment {
	margin: 0 2em 0 5em;
	list-style-type: none;
}
.comments .comment {
	margin: 1em 0 2em 0;
}
.comments .comment .metadata {
	color: #999;
	background-image: url(../images/commentArrow.gif);
	background-repeat: no-repeat;
	background-position: right bottom;
	z-index: 2;
	position: relative;
	float: left;
	padding: 0 15px 3px 0;
	/*background-color: gray;*/
	font-size: 11px;
	font-weight: normal;
	font-variant: normal;
	margin: 0;
}

.comments .comment .metadata .date, .comments .comment .metadata .username {
	font-weight: bold;
}
.comments .comment .metadata span.username {
	color: #333;
}
.comments .comment .content {
	background-color: #f3f3f3;
	border: 1px solid #ccc;
	padding: 5px;
	margin-bottom: 30px;
	z-index: 1;
	position: relative;
	height: 1%; /* IE HACK */
	top: -1px;
	clear: both;
	/*border-color: red;*/
	/*white-space: pre;*/
	line-height: 18px;
}
.comments .comment .content p {
	margin: 0 0 1em 0;
}

.comments .comment.admin .content {
	background-color: #fff6e5;
	border-color: #ffcc99;
}
.comments .comment.admin .metadata {
	background-image: url(../images/commentAdminArrow.gif);
}


#postComment fieldset {
	margin: 0 0 20px 0;
	/*width: 43em;*/
}
#postComment ul {
	list-style-type: none;
}
#postComment li {
	padding: 0 0 3px 0;
	clear: both;
	text-align: right;
}
#postComment label {
	text-align: right;
	vertical-align: top;
	/*float: left;
	display: block;
	width: 12em;*/
}
#postComment input.text, #postComment textarea {
	width: 80%;
}
#postComment input.text.disabled {
	background-color: #f3f3f3;
	border: 1px solid #ccc;
}
#postComment .footer {
	margin: 30px 0 0 0;
}

/* --- */
/*
.continue {
	clear: none;
}*/
.tooltip, #tooltip {
	z-index: 100;
	color: #fc6;
	background-color: #ffd;
	border: 1px solid #fe8;
	padding: 2px;
	text-align: left;
	opacity: 0.9;
}
.tooltip ul, #tooltip ul {
	list-style-type: none;
}

.hint {
	color: #999999;
	background-color: #fafafa;
	font-size: 9px;
	font-weight: normal;
	font-variant: normal;
	padding: 1px;
	border: 1px solid #bbbbbb;
	border-top: 1px solid #dddddd;
	border-left: 1px solid #dddddd;
}
.hint a, a.hint {
	text-decoration: none;
}
/* DEBUG */
#ioc .hint, #ioc .jsHelper {
	display: none;
}

.accessKey {
	text-decoration: underline;
}

/* === HEADER STYLING === */
#header {
	color: #ffffff;
	background-color: #ff5300;
	background-image: url(../images/header.png);
	background-repeat: no-repeat;
	height: 51px;
	margin: 0 -72px 0 -72px;
}
#header p {
	letter-spacing: 0.3em;
	margin: 0 10px 0 0;
}
#header * {
	display: none;
}

/* === NAVIGATION STYLING === */
#navigation {
	color: #ff5300;
	background-color: #ffc9af;
	background-image: url(../images/navigation.png);
	background-repeat: no-repeat;
	list-style-type: none;
	height: 32px;
	padding: 0 52px 0 52px;
	margin: 0 -72px 0 -72px;
}
#navigation li {
	float: left;
	background-repeat: no-repeat;
	background-image: url(../images/nav-separator.png);
	background-position: left;
	padding: 0 0 0 5px;
	margin: 0;
}
#navigation li.home {
	background-image: none;
	padding: 0;
}
#navigation li * {
	display: block;
	height: 40px;
	text-indent: -200px; /* Move the text away from the background image... (NOTE: Negative value required to avoid Opera 8.5 making the width of the elements 200px longer) */
	overflow: hidden; /* ...and hide it! :D Voila! (NOTE: for Opera 7.54, we have to spesify a width for the parent element to prevent elements to stack on top of each other) */
}
#navigation a {
	background-position: 0 0;
}
#navigation a:hover {
	background-position: 0 40px;
}
#navigation .home *, #navigation .home			 { width: 50px; }
#navigation .home a			{ background-image: url(../images/nav-home-normal.png); }
#navigation .home span		{ background-image: url(../images/nav-home-down.png); }

#navigation .sketch *, #navigation .sketch		 { width: 72px; }
#navigation .sketch a		{ background-image: url(../images/nav-sketch-normal.png); }
#navigation .sketch span	{ background-image: url(../images/nav-sketch-down.png); }

#navigation .process *, #navigation .process	 { width: 63px; }
#navigation .process a		{ background-image: url(../images/nav-process-normal.png); }
#navigation .process span	{ background-image: url(../images/nav-process-down.png); }

#navigation .final *, #navigation .final		 { width: 101px; }
#navigation .final a		{ background-image: url(../images/nav-final-normal.png); }
#navigation .final span		{ background-image: url(../images/nav-final-down.png); }

#navigation .interface *, #navigation .interface { width: 75px; }
#navigation .interface a	{ background-image: url(../images/nav-interface-normal.png); }
#navigation .interface span	{ background-image: url(../images/nav-interface-down.png); }

#navigation .contact *, #navigation .contact	 { width: 68px; }
#navigation .contact a		{ background-image: url(../images/nav-contact-normal.png); }
#navigation .contact span	{ background-image: url(../images/nav-contact-down.png); }

/* === FOOTER STYLING === */
#copyright, #designRights {
	font-size: 9px;
	color: #999999;
	text-align: center;
}
#copyright {
	background-image: url(../images/separator.png);
	background-position: center;
	background-repeat: repeat-x;
	margin: 20px 0 0 0;
	padding-bottom: 0;
	clear: both;
}
#copyright .text {
	background-color: #ffffff;
	padding-left: 5px;
	padding-right: 5px;
}

#designRights {
	font-size: 7px;
	text-transform: uppercase;
	background-image: url(../images/footer.png);
	background-position: bottom;
	background-repeat: no-repeat;
	margin: 0 -72px 0 -72px;
	padding-top: 0;
	padding-bottom: 20px;
}

/* === 'Home' PAGE SPESIFIC === */
#sitemap {
	list-style-type: none;
	background-color: gray;
	float: left;
	/*width: 100%;*/
	/* Some browsers don't read decimals so tweak the value a bit to ensure that the sitemap content doesn't become too short. */
	width: 99.9999%;

	border: 1px solid #ffcc99;
	background-color: #fff6e5;
	background-image: url(../images/thumb-background.png);
	margin: 0 0 20px 0;
	padding: 0;
}
#sitemap li {
	float: left;
	width: 33.3333%;
	position: relative;
	line-height: 1.2em;
}
#sitemap h4 {
	margin: 0 10px;
	padding-top: 10px;
}
#sitemap a {
	/*background: silver;
	opacity: 0.6;*/
	position: absolute;
	display: block;
	z-index: 2;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	text-indent: 10px;
	line-height: 25px;
	background: url('../images/v2/imageOnloadTest.png') no-repeat;
}
#sitemap p {
	padding: 10px 0 0 0;
	margin: 0 10px;
	height: 7.5em;
}
#sitemap h5 {
	position: absolute;
	z-index: 1;
	left: 10px;
	bottom: 10px;
	margin: 0;
	width: 100%;

	font-size: 9px;
	text-align: center;
	margin: 0 -10px 0 -10px;
	display: block;
}
#sitemap a {
	color: #000;
	text-decoration: none;
}
#sitemap a:hover {
	color: #ff5300;
	background-color: transparent;
}
/*
#sitemap .hover * {
	color: #ff5300;
	background-color: transparent;
	text-decoration: none;
}
#sitemap #final.hover h5 {
	color: #ffcc99;
}*/
#sitemap #sketches h5 {
	background-color: #ffcc99;
}
#sitemap #process h5 {
	background-color: #ff8f4c;
}
#sitemap #final h5 {
	background-color: #ff5300;
}
#sitemap #process div, #sitemap #final div {
	border-left: 1px solid #ffcc99;
}


/* === 'Contact' PAGE SPESIFIC === */
form#sendEmail fieldset {
	margin: 0 0 30px 0;
	width: 43em;
}
form#sendEmail ul {
	list-style-type: none;
}
form#sendEmail li {
	padding: 0 0 3px 0;
	clear: both;
	text-align: right;
}
form#sendEmail label {
	text-align: right;
	float: left;
	display: block;
	width: 12em;
}


/* === 'Final' PAGE SPESIFIC === */
#preview.largeView {
	background-color: #fff6e5;
	background-image: url(../images/thumb-background.png);
	border: 1px solid #ffcc99;
	padding: 10px;
	text-align: center;
	/*float: left;
	width: 380px;*/
}
#preview.largeView img {
	width: 354px;
}

#previewBackground {
	background-color: #fff;
	border: 1px solid #ff5300;
	width: 220px; /* (260 minus padding) */
	height: 200px; /* (240 minus padding) */
	/*padding: 20px;*/
	opacity: 0.8;
}
#preview {
	width: 218px; /* (260 minus padding) */
	height: 198px; /* (240 minus padding) */
	padding: 0px;
	border: 0;
	text-align: center;
	/*background-color: #aaa; DEBUG */
}
#preview img.thumbnail {
	background-color: #fff;
	border: 1px solid silver;
	padding: 10px;
	margin-top: 20px;
}
#preview img#loadAnimation, img#loadAnimation {
	vertical-align: middle;
	margin-right: 5px;
	border: 0;
	padding: 0;
}
#preview #loadInfo {
	margin-top: 10px;
}

#listView {
	background-color: #fff6e5;
	background-image: url(../images/thumb-background.png);
	border: 1px solid #ffcc99;
	list-style-type: none;
	text-align: center;
	/*float: right;*/
	/*width: 100%;*/ /* Bad IE! Bad! */
	height: 1%;
}
#listView a {
	text-decoration: none;
}
#listView a:hover, #preview a:hover {
	background-color: transparent;
}
#listView li {
	padding: 10px;
	float: left;
}
#listView li img, #preview img {
	background-color: #fdfdfd;
	border: 1px solid #eaeaea;
	padding: 10px;
	margin-bottom: 2px;
}
#listView li.header {
	background-color: #ffcc99;
	color: #ff5300;
	font-weight: bold;
	padding: 3px;
}
#listView li.listviewFooter {
	color: #333333;
	background-color: #fff6e5;
	border-top: 1px solid #ffcc99;
	padding: 3px;
	clear: both;
	float: none;
	height: 1%; /* Behold the Holy Hack! */
}

#previewNavigation {
	margin: 1em 0;
}
#loadingScreen.largePreviewVisible {
	position: absolute;
	top: 100px;
	left: 200px;
	background-color: white;
	border: 1px solid #ffcc99;
	padding: 10px;
}
#loadingScreen.largePreviewVisible img {
	margin-top: 0;
}

/* === 'Formatting' PAGE SPESIFIC === */
ul#xhtmlcodes {
	/*line-height: 18px;*/
	list-style-type: none;
	margin: 0 0 30px 0;
	/*border: 1px solid red;  DEBUG */
	position: relative;
	top: -30px;
}
ul#xhtmlcodes code {
	/*font-family: monospace;
	font-size: 14px;*/
}
ul#xhtmlcodes li {
	font-weight: bold;
	font-variant: small-caps;
	background-color: #fff6e5;
	border: 1px solid;
	border-color: #feb #fca #fca #feb;
	margin: 2px;
	padding: 2px;
	float: left;
	/*display: inline;*/
	text-align: center;
	text-transform: uppercase;
}
ul#xhtmlcodes ul {
	list-style-type: none;
	/*float: left;
	display: inline;*/
	padding: 0;
	margin: 0;
	/*border: 1px solid blue;*/
}
ul#xhtmlcodes ul li {
	font-weight: normal;
	border: none;
	float: none;
	display: inline;
	margin: 0;
	padding: 0;
}
ul#xhtmlcodes ul li code {
	color: #999999;
	background-color: #fafafa;
	margin: 0;
	padding: 0 2px 0 2px;
	border: 1px solid #bbbbbb;
	border-top: 1px solid #dddddd;
	border-left: 1px solid #dddddd;
}

#commentPreview {
	border: 1px dotted silver;
	padding: 1em;
}
#commentPreview h3 {
	margin-top: 0;
}
#loadIndicator {
	margin-top: 0.5em;
	text-align: center;
}

#commentError {
	background-color: #ffe5cc;
	border: 1px solid #ff5300;
	padding: 5px;
}
#commentError ul {
	/*list-style-type: none;*/
	margin: 1em 0 0 2em;
	display: none;
}
#commentError li {
	/*border-bottom: 1px dotted #ff5300;*/
	background-color: #fff6e5;
	margin-bottom: 1px;
}