/*-- base styles --*/

* {
margin: 0px;
padding: 0px;
}

body {
	background-color: white;
	font-size:75%;
	page: auto;
}

img {
border: none;
}


/*-- type --*/

* {
	font-family: 'helvetica neue', 'arial', sans-serif;
	color: #666;
	line-height: 110%;
}

a:link,
a:active,
a:visited {
color: #666;
text-decoration: none;
border-bottom: 1px solid #ccc;
}

a:hover {
border-bottom: 1px solid #333;
}

p.contact, p {
	font-family: 'helvetica neue', 'arial', sans-serif;
	font-size: 1.1em;
}


/*-- structure-- */

/* header */

.headerContainer {
float: left;
width: 100%;
background-image: url(images/headerBg.png);
background-repeat: repeat-x;
background-position: 100%;
}

.header {
position: relative;
width: 650px;
margin: -15px auto 0px auto;
z-index: 10;
}

.header h1 {
	position: relative;
	margin-top: 50px;
	float: left;
	width: 650px;
	background-image: url(images/logo.gif);
	background-repeat: no-repeat;
	background-position: 0px 100%;
	z-index: 1000;
}

.header h1 a {
height: 100px;
display: block;
font-size: 1px;
text-indent: -1000px;
border: none;
}

.header h1 a:hover {
border: none;
}

.contact {
	width: 280px;
	position: relative;
	bottom: 65px;
	left: 370px;
	z-index: 2000;
}

.mobi {
	width: 180px;
	position: absolute;
	top: 161px;
	height: auto;
	left: 468px;
	padding: 5px;
	background-color:#C09;
	font-size: 34px;
	font-weight: bold;
	font-stretch: extra-expanded;
	text-align: center;
}

.topnote {
	width: 180px;
	position: relative;
	bottom: 110px;
	left: 425px;
	z-index: 2000;
	font: "Palatino Linotype", "Book Antiqua", Palatino, serif;
	font-style: italic;
	background-color: #FF0;
}

.skype {
	width: 155px;
	position: relative;
	top: 0px;
	left: 10px;
	z-index: 2000;
}

/* menu */

.header .menu {
	position: absolute;
	top: 20px;
	width: 650px;
}

ul.menu li{
list-style: none;
}

.header .menu li a.homeMenu:link,
.header .menu li a.homeMenu:active,
.header .menu li a.homeMenu:visited{
overflow: hidden;
float: left;
border: none;
background-image: url(images/toplogo1.gif);
height: 25px;
width: 190px;
text-indent: -1000px;
background-position: 0px 0px;
background-repeat: no-repeat;
}

.header .menu li a.homeMenu:hover,
.header li.here a {
background-position: 0px -26px!important;
}

.header .menu li a.portfolioMenu:link,
.header .menu li a.portfolioMenu:active,
.header .menu li a.portfolioMenu:visited{
overflow: hidden;
float: left;
border: none;
background-image: url(images/toplogo2.gif);
height: 25px;
width: 165px;
text-indent: -1000px;
background-position: 0px 0px;
background-repeat: no-repeat;
}

.header .menu li a.portfolioMenu:hover {
background-position: 0px -26px;
}

.header .menu li a.processMenu:link,
.header .menu li a.processMenu:active,
.header .menu li a.processMenu:visited{
overflow: hidden;
float: right;
border: none;
background-image: url(images/toplogo3.gif);
height: 25px;
width: 250px;
text-indent: -1000px;
background-position: 0px 0px;
background-repeat: no-repeat;
}

.header .menu li a.processMenu:hover {
background-position: 0px -26px;
}

.header .menu li a.aboutMenu:link,
.header .menu li a.aboutMenu:active,
.header .menu li a.aboutMenu:visited{
overflow: hidden;
float: left;
border: none;
background-image: url(images/aboutMenu.png);
height: 25px;
width: 120px;
text-indent: -1000px;
background-position: 0px 0px;
background-repeat: no-repeat;
cursor:pointer;
}

.header .menu li a.aboutMenu:hover {
background-position: 0px -26px;
}


/* content */

.contentContainer {
float: left;
width: 100%;
}

.content {
	float: left;
	width: 100%;
	position: relative;
	height: 350px;
}


/* footer */

.footerContainer {
	float: left;
	width: 100%;
	background-image: url(images/footerBg.png);
	background-repeat: repeat-x;
	height:6em;
} 

.footer {
margin: 0px auto 0px auto;
width: 650px;
}

.footer h1 {
margin-top: -110px;
margin-left: 0px;
float: left;
overflow: hidden;
font-size: 1px;
text-indent: -1000px;
width: 210px;
height: 50px;
background-image: url(images/footerlogo.gif);
}

.footer ul.menu {
margin-left: 250px;
float: left;
width: 580px;
}

.footer ul.menu li{
list-style: none;
float: left;
}

.footer ul.menu li a:link,
.footer ul.menu li a:active,
.footer ul.menu li a:visited {
float: left;
position: relative;
font-size: 1.1em;
margin-left: 5px;
top: -80px;
border: none;
}

.footer ul.menu li a:hover {
color: #333;
}

/* home */

.preview {
width: 100%;
height: 311px;
position: relative;
z-index: 0;
}


#currentPreview, #newPreview {
background-repeat: no-repeat;
position: relative;
top: -92px;
overflow: hidden;
margin: 0px auto 0px auto;
width: 600px;
height: 403px;
left: -39px;
}

#currentPreview {
background-image: url(portfolioImages/preview1.jpg);
}


#currentImage2 {
background-color: #333;
}

#currentImage3 {
background-color: #1e1e20;
}

#currentImage4 {
background-color: #aeab98;
}

#currentImage img, #newImage img {
margin-left: 2000px;
}

.imagePreview img{
margin-left: 0px!important;
}

.imagePreview #currentImage img, .imagePreview #newImage img {
margin-left: 0px;
}

.previewNav {
width: 650px;
margin: 0px auto 0px auto;
text-align: right;
padding-top: 25px;
}

ul.imageNav {
float: right;
list-style: none;
width: 320px;
}

ul.imageNav li {
display: inline;
}

#pause, #next, #prev {
display: none;
}


#newImage {
width: 100%;
position: absolute;
top: 0px;
}


#full a:link,
#full a:active,
#full a:visited{
border: none;
position: absolute;
top: 0px;
left: 0px;
overflow: hidden;
text-indent: -1000px;
height: 306px;
width: 99%;
background-repeat: no-repeat;
}

#full a:hover{
background-image: url(siteImages/viewFullHome.png);
background-position: 50% 120px;
cursor:pointer;
}

/* text */

body.about h1 {
background-color: #;
}


body.about h2 {
	display: none;
}


body.about .content h3 {
	position: relative;
	width: 650px;
	font-size: 1.8em;
	font-weight: normal;
	padding: 0px;
	font-family: 'georgia', sans-serif;
	margin-top: 30px;
	margin-right: auto;
	margin-bottom: 10px;
	margin-left: auto;
	text-align: center;
}

.introTextContainer {
position: relative;
top: 0px;
width: 100%;
height: 273px;
background-color: #33b3e3;
margin-bottom: 30px;
background-image: url(siteImages/textBgBlue.png);
background-position: 100% 100%;
background-repeat: repeat-x;
}

#introText {
width: 650px;
margin: 0px auto 0px auto;
}

#intro {
font-size: 1px;
overflow: hidden;
text-indent: -2000px;
width: 650px;
height: 246px;
background-image: url(siteImages/textWash1.png);
background-position: 0px 0px;
background-repeat: no-repeat;
}

#newIntro {
font-size: 1px;
width: 650px;
height: 246px;
position: absolute;
margin-top: -246px;
position: relative;
top: 0px;
}

#textBg {
position: absolute;
top: 0px;
width: 650px;
height: 246px;
background-image: url(siteImages/aboutMatt.png);
background-position: 0px 60px;
background-repeat: no-repeat;
}



body.about .content p {
	width: 650px;
	font-family: 'georgia', sans-serif;
	margin-bottom: 0px;
	margin-top: 0px;
	margin-right: auto;
	margin-left: auto;
	font-size: medium;
}

body.about .content{
	height: auto;
	margin-bottom: 10px;
}

/*-- portfolio --*/

.projectDetails {
position: relative;
width: 650px;
margin: 30px auto 0px auto;
padding: 10px 0px 0px 0px;
background-image: url(siteImages/line.png);
background-repeat: no-repeat;
}

.content .projectDetails h2, .content .projectDetails h3 {
padding-right: 16em;
font-family: 'georgia', serif;
display: block!important;
font-size: 1.1em!important;
font-weight: normal;
}

.projectDetails h3 {
background-image: url(siteImages/line.png);
background-repeat: no-repeat;
background-position: bottom left;
padding-bottom: 10px!important;
}

.projectDetails a.prev, .projectDetails a.next {
position: absolute;
top: 20px;
height: 16px;
width: 18px;
overflow: hidden;
display: block;
text-indent: -2000px;
}

.projectDetails a.prev:link,
.projectDetails a.prev:visited,
.projectDetails a.prev:active {
right: 50px;
border: none;
background-image: url(siteImages/previous.png);
background-repeat: no-repeat;
background-position: -18px 0px;
}

.projectDetails a.prev:hover {
background-position: 0px 0px;
}

.projectDetails a.next:link,
.projectDetails a.next:visited,
.projectDetails a.next:active {
right: 0px;
border: none;
background-image: url(siteImages/next.png);
background-repeat: no-repeat;
background-position: -18px 0px;
}

.projectDetails a.next:hover {
background-position: 0px 0px;
}

.portfolioImage {
width: 650px;
margin: 0px auto 0px auto;
margin-top: 30px;
}

a.all {
font-size: 1.1em;
position: absolute;
top: 20px;
right: 100px;
}

/* portfolio index */

.indexItem {
padding-top: 20px;
position: relative;
background-image: url(siteImages/indexBg.png);
background-position: bottom left;
background-repeat: no-repeat;
width: 650px;
margin: 0px auto 0px auto;
}

.indexItem h1, .indexItem h2 {
display: block!important;
margin-left: 300px;
font-size: 1.1em;
font-family: 'georgia', sans-serif;
font-weight: normal;
height: auto;
}

.indexItem h1 {
background-color: transparent!important;
padding-top: 30px;
}

.indexItem img {
position: absolute;
bottom: 24px;
left: 12px;
}

.indexItem a.more:link,
.indexItem a.more:active,
.indexItem a.more:visited {
margin-left: 300px;
cursor:pointer;
position: relative;
left: -20px;
display: block;
overflow: hidden;
height: 80px;
width: 231px;
background-image: url(siteImages/viewFull.png);
background-repeat: no-repeat;
text-indent: -10000px;
padding-bottom: 20px;
background-position: 0px 0px;
border: none;
}

.indexItem a.more:hover {
border: none;
background-position: -231px 0px;
}

/* process */

.content #process p img {
float: left;
margin: 0px 20px 20px 0px;
}

#process h3 {
	margin-top: 30px!important;
}

.processSection {
	float: left;
	height: 44em;
	width: 650px;
	margin-left: 20px;
	margin-right: 0px;
}

.processSection p {
width: 600px!important;
float: left;
}

#introHeading {
text-align: center;
}

#introSubHeading {
text-align: left;
}

#introHeading span {
display: block;
width: 600px;
text-align: right;
}

#seqNav {
position: relative;
top: -10px;
width: 600px;
text-align: right;
}

#storyNav {
position: absolute;
top: 20px;
}

#storyNavBg {
	position: absolute;
	top: 18px;
	left: 31px;
}

#storyNav a:link,
#storyNav a:active,
#storyNav a:visited {
width: 120px;
float: left;
font-family: georgia, sans-serif;
font-size: 1.3em;
border-bottom: none;
border-right: 1px solid #ccc;
text-align: center;
}

a#nextSection {
font-family: georgia, sans-serif;
font-size: 1.7em;
}

#introHeading span a:link,
#introHeading span a:active,
#introHeading span a:visited {
font-family: georgia, sans-serif;
font-size: 1.7em;
}

.processSection li {
font-size: 11px;
font-family: georgia, sans-serif;	
}

/* process layout */

#discovery p img {
position: relative;
top: 5px;
}

#visualisations p {
margin-top: 30px;
}

#design p {
position: relative;
margin-top: 20px;
}

#design p img{
position: relative;
top: -20px;
}

.processSection li {
width: 100%;
float: left;
}

#processWindow {
	position: relative;
	width: 700px;
	height: 38em;
	overflow: auto;
	margin-top: -5px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
}
.paragraphhead {
	font-weight: bold;
	font-size: medium;
}