/* IMAGE DISPLAY */
body { margin: 0; padding: 0; background: #008193; }
p,h1,h2,h3,ul,ol,div,form,input,select { border: 0; margin: 0; padding: 0; }

/* CONTAINER
------------------------------------------------*/
/* hide from mac ie \*/
#container {
position: absolute;
left: 50%;
top: 50%;
margin-top: -290px;
margin-left: -385px;
}
/* */
#container { width: 770px; height: 550px; text-align: left; background: #c6e1e8 url(../images/bg.png) repeat; }

/* NAV
------------------------------------------------*/
#nav { position: absolute; background: #fff; top: 0; left: 0; width: 770px; height: 34px; }
#nav ul { margin: 0; padding: 0; list-style: none; }
#nav li { display: block; height: 34px; width: 77px; position: absolute; top: 0; background-repeat: no-repeat; background-position: left top; }

#nav a { display: block; overflow: hidden; position: absolute; top: 0; left: 0; height: 34px; width: 77px; background-repeat: no-repeat; text-indent: -1000em; }
#nav a:link, #nav a:visited { background-position: left top; }
#nav a:hover, #nav a:active { background-position: left bottom; }
#nav .current a:link, #nav .current a:visited, #nav .current a:hover, #nav .current a:active { background-position: left bottom; }

#nav #n1, #nav #n1 a { background-image: url(../images/n_design.gif); }
#nav #n2, #nav #n2 a { background-image: url(../images/n_exhibition.gif); }
#nav #n3, #nav #n3 a { background-image: url(../images/n_project.gif); }
#nav #n4, #nav #n4 a { background-image: url(../images/n_modular.gif); }
#nav #n5, #nav #n5 a { background-image: url(../images/n_portable.gif); }
#nav #n6, #nav #n6 a { background-image: url(../images/n_graphics.gif); }
#nav #n7, #nav #n7 a { background-image: url(../images/n_hire.gif); }
#nav #n8, #nav #n8 a { background-image: url(../images/n_contact.gif); }
#nav #n9, #nav #n9 a { background-image: url(../images/n_news.gif); }
#nav #n0, #nav #n0 a { background-image: url(../images/n_links.gif); }

#nav #n1 { left: 0; }
#nav #n2 { left: 77px; }
#nav #n3 { left: 154px; }
#nav #n4 { left: 231px; }
#nav #n5 { left: 308px; }
#nav #n6 { left: 385px; }
#nav #n7 { left: 462px; }
#nav #n8 { left: 539px; }
#nav #n9 { left: 616px; }
#nav #n0 { left: 693px; }

/* FLASHTRO
------------------------------------------------*/
#skipintro
{
	font: 80% arial,helvetica,verdana,sans-serif;
	position: absolute;
	text-align: center;
	left: 0;
	top: 520px;
	width: 770px;
	height: 22px;
	padding: 8px 0 0;
	background: #c6e1e8 url(../images/flashfooter.png) repeat-x left top;
}
#skipintro a { font-weight: bold; text-decoration: none; }
#skipintro a:link, #skipintro a:visited { color: #002d62; }
#skipintro a:hover, #skipintro a:active { color: #fff; }

#introtext
{
	font: 80% arial,helvetica,verdana,sans-serif;
	position: absolute;
	text-align: center;
	left: 0;
	top: 560px;
	width: 770px;
	color: #65cfde;
}

#homemovie { width: 372px; height: 205px; position: absolute; left: 177px; top: 270px; border: 2px solid #008193; }

/* TEXTBOX
------------------------------------------------*/
#textbox, #textbox-intro, #textbox-contact, #textbox-content
{
	position: absolute;
	left: 0;
	top: 62px;
	background-color: #e7f2f5;
	background-repeat: no-repeat;
	background-position: left top;
	background-attachment: scroll;
	color: #002d62;
	font-size: 11px;
	font-family: arial,verdana,sans-serif;
	line-height: 1.2;
	overflow: auto;
}

#textbox { width: 230px; height: 324px; background-image: url(../images/textarea.png); }
#textbox-intro { width: 709px; height: 324px; background-image: url(../images/textarea_large.png); }
#textbox-contact { width: 709px; height: 374px; overflow: hidden; }

.wrapper { padding: 10px 15px 10px 10px; }
h1 { font-size: 100%; font-style: italic; font-weight: bold; line-height: 1.2; }
h2 { font-size: 100%; font-style: italic; font-weight: bold; line-height: 1.2; margin: 1em 0; }
h1, p { margin: 0 0 1em; }

#textbox-content { width: 709px; height: 374px; overflow: auto; }
#textbox-content ul { margin: 0 0 1em; padding: 0 0 0 2em; list-style-type: square; }
#container .wrapper a:link { color: #008193; text-decoration: underline; }
#container .wrapper a:visited { color: #006070; text-decoration: underline; }
#container .wrapper a:hover, #container .wrapper a:active { color: #008193; text-decoration: none; }

#container .wrapper h2 { padding-top: 1em; border-top: 1px solid #fff; }
#container .wrapper dl { margin: 1em 0; padding: 0; }
#container .wrapper dt { font-weight: bold; }
#container .wrapper dd { text-indent: 0; padding: 0; margin: 0 0 2em; }

#textbox-content .backlink { margin-bottom: 1em; padding-bottom: 1em; border-bottom: 1px solid #fff; }

/* IMAGEBOX
------------------------------------------------*/
#imagebox { position: absolute; left: 250px; top: 62px; width: 510px; height: 324px; background: #fff; }
#imagebox-intro { position: absolute; left: 177px; top: 249px; width: 350px; height: 244px; background: transparent; }
#frame
{
	position: absolute;
	left: 0;
	top: 0;
	z-index: 10;
	width: 510px;
	height: 324px;
	background: transparent url(../images/mainimageborder.png) no-repeat left top;
}
#imagebox .fakemap { width: 510px; height: 324px; z-index: 20; }
#imagebox img, #imagebox p { border: 0; position: absolute; top: 0; left: 0; margin: 0; padding: 0; width: 510px; height: 324px; }
#imagebox .hide { visibility: hidden; }
#imagebox .show { visibility: visible; }

#imagebox .innerthumbs { position: absolute; top: 295px; left: 250px; width: 250px; z-index: 30; }
#imagebox .innerthumbs img { position: relative; float: left; margin: 0 0 0 10px; width: 50px; height: 50px; border: 2px solid #008193; }
#imagebox .innerthumbs .first { margin-left: 0; }

#imagebox .movie { position: absolute; left: 80px; top: 55px; z-index: 100; font: 90%/1.4 arial,helvetica,sans-serif; }
#imagebox .movie p { margin-bottom: 1em; position: static; width: 290px; height: auto; }
#imagebox .movie a { display: inline; width: auto; height: auto; }

/* THUMBNAILS
------------------------------------------------*/
#thumbnails
{
	position: absolute;
	left: 10px;
	top: 441px;
	width: 600px;
	height: 50px;
}
#thumbnails img { background: #fff; border: 0; float: left; width: 50px; height: 50px; margin: 0 0 0 10px; }
#thumbnails .first { margin: 0; }

#thumbnails a span { display: none; text-decoration: none; }
#thumbnails a:link, #thumbnails a:visited, #thumbnails a:hover, #thumbnails a:active { text-decoration: none; }
#thumbnails a:hover span, #thumbnails a.sfhover span, #thumbnails #title
{
	font: 70% verdana,helvetica,sans-serif;
	position: absolute;
	top: -20px;
	display: block;
	background: transparent;
	color: #002d62;
	border: 0;
	z-index: 100;
	text-decoration: none;
	white-space: nowrap;
}
.s1 { left: 0; }
.s2 { left: 60px; }
.s3 { left: 120px; }
.s4 { left: 180px; }
.s5 { left: 240px; }
.s6 { left: 300px; }
.s7 { left: 360px; }
.s8 { left: 420px; }
.s9 { left: 480px; }
.s10 { left: 540px; }

/* DOWNLOADS
------------------------------------------------*/
.map { width: 107px; top: 426px; left: 204px; background: #fff url(../images/downloadmap.gif) no-repeat left top; }
.map a { width: 107px; background: transparent url(../images/downloadmap.gif) no-repeat left top; }

#download { position: absolute; height: 22px; }
#download a { display: block; position: absolute; height: 22px; text-indent: -1000em; }
#download.brochure { width: 139px; top: 396px; left: 621px; background: #fff url(../images/downloadbrochure.gif) no-repeat left top; }
#download.brochure a { width: 139px; background: transparent url(../images/downloadbrochure.gif) no-repeat left top; }
#download a { overflow: hidden; }
#download a:link, #download a:visited { background-position: left top; }
#download a:hover, #download a:active { background-position: left bottom; }

#online { position: absolute; height: 22px; }
#online a { display: block; position: absolute; height: 22px; text-indent: -1000em; }
#online.brochure { width: 139px; top: 396px; left: 621px; background: #fff url(../images/onlinebrochure2.gif) no-repeat left top; }
#online.brochure a { width: 139px; background: transparent url(../images/onlinebrochure2.gif) no-repeat left top; }
#online a { overflow: hidden; }
#online a:link, #download a:visited { background-position: left top; }
#online a:hover, #download a:active { background-position: left bottom; }

/* LOGO // FOOTER
------------------------------------------------*/
#companyinfo { position: absolute; left: 34px; top: 490px; color: #002d62; font: 11px arial,verdana,sans-serif; }
#logo { position: absolute; left: 621px; top: 453px; width: 139px; height: 46px; border: 0; }
#footer { position: absolute; left: 10px; top: 508px; width: 750px; height: 32px; background: transparent url(../images/footer.gif) no-repeat left top; }
#footer #email { display: block; position: absolute; left: 590px; top: 10px; width: 160px; height: 28px; text-decoration: none; }
#footer #request { display: block; position: absolute; left: 10px; top: 10px; width: 100px; height: 28px; text-decoration: none; }

#descriptor { position: absolute; left: 0; top: 560px; width: 770px; height: 32px; text-align: center; color: #fff; font: 70% arial,helvetica,sans-serif; }
#descriptor span { color: #e2f0f4; }
#descriptor a:link, #descriptor a:visited { color: #c6e1e7; text-decoration: underline; }
#descriptor a:hover, #descriptor a:active { color: #c6e1e7; text-decoration: none; }