* {
    margin:0;
    padding:0;
    border: none;
}

html, body {
    height: 100%; /* uses the height of the viewport, for vertical centering */
}

body {
    background:white;
    
    font-family: verdana, helvetica, arial, sans-serif;
    font-size: 12px;
}

#container {
    position:absolute;
    width:800px;
    
    left:50%;
    margin-left:-400px;
    
    background: #ffa600;
    
    
    /** Does not work in Safari! **/
    
    top:50%;
	margin-top: -334px;
    /**/
}

.clear {
	clear: both;
}

#logo {
    position: absolute;
    
    top:81px;
    left:51px;
    width: 119px;
    height: 56px;
    
    background: #ffffff;
    
    z-index: 100;
}

#logo a {
    float:left;
    display:block;

    cursor: pointer;
}

#logo a img {
    display: block; /* in strict mode, img is an inline element, so browsers add a bottom margin */
    width: 119px;
    height: 56px;
    border: none;
}

#logo a span{
    display:none;
}

#header {
    width:100%;
    height:185px;
    background: white;
}

#header h1 {
    display:none;
    color:black;
}

/********************* Background *********************/

#background-home {
    position:absolute;
    
    top:270px;
    left:300px;
    
    width:189px;
    height:248px;
    
    background: url(../img/background-home.gif) no-repeat;
    
    z-index: 0; 
}

#background-news {
    position:absolute;
    
    top:0px;
    left:0px;
    
    width:100%;
    height:530px;
    
    background: url(../img/background-news.gif) no-repeat;
    
    z-index: 0; 
}


#background-company {
    position:absolute;
    
    top:159px;
    left:0px;
    
    width:100%;
    height:257px;
    
    background: url(../img/background-company.gif) no-repeat;
    
    z-index: 0; 
}

#background-profiles {
    position:absolute;
    
    top:155px;
    left:0px;
    
    width:100%;
    height:257px;
    
    background: url(../img/background-profiles.gif) no-repeat;
    
    z-index: 0; 
}

#background-solutions {
	position: absolute;
	
	top: 177px;
	left: -16px;
	
	width: 873px;
	height: 436px;
	
	background: url(../img/background-solutions.gif) no-repeat;
    
    z-index: 0; 
}

#background-projects {
	position: absolute;
	
	top: 105px;
	left: 0px;
	
	width: 800px;
	height: 255px;
	
	background: white;
	
	/* background: url(../img/background-projects.gif) no-repeat; */
    
	z-index:1;
}


/********************* Main content *********************/

#maincontent {
    background: transparent;
    color: white;
    
    height: 385px;
    
    position:relative;
    z-index: 1;
}



/********************* News *****************************/

#news-box {
    width:570px;
    height:221px;
    
    background:transparent;
    color: #666666;
    
    overflow: auto; 
}

#news-content {
    width:170px;
    
    margin-left: 195px;
    
    background: white;
    
    font-size: 11px;
}

.news-item {
	margin-bottom: 30px;
}

.news-item a {
    text-decoration: none;
    color: #ff9900;
}

.news-item a:hover {
    text-decoration: underline;
}

.news-item h3 {
    font-size: 11px; 
    font-style: normal;
    font-weight: normal;
    margin-bottom: 8px;
}

.news-item p {
    margin-top: 8px;
    margin-bottom: 8px;
}

/********************* Company ************************/

#company-title {
    position: absolute;
    
    width: 68px;
    height: 43px;
    
    left:402px;
    top:167px;
    
    
    background: transparent url(../img/company-title.gif) top left no-repeat;
    
    z-index: 100;
}

#company-title img {
    width:100%;
    height:100%;
}

#company-content {
    float: left;
    
    background: transparent;
    
    padding-top: 90px;
    padding-left: 75px;
    width: 450px;
}

#company-content p{
    margin-bottom: 20px;
}

#text-wrap-box-1 {
    float:right;
    width: 75px;
    height: 150px;
}

#text-wrap-box-2 {
    float:right;
    width: 75px;
    height: 18px;
}

#text-wrap-box-3 {
    float:right;
    width: 150px;
    height: 9px;
}

/** special "the profiles" button **/

#company-profiles
{
    display: inline; /* fix for IE (double float margin bug) */
    float: right;
    
    margin-right: 50px;
    margin-top: 260px;
}

#company-profiles a {
    background-image: url(../img/navigation-profiles.gif);    
    
    height: 26px;
    width: 100px;
}



/********************** Profiles  ***********************/

#profiles-content {
    background:transparent;
    
    padding-top: 115px;
}

#profiles-content ul {
    display: block;
    
    width: 300px;
    height: 130px;
    
    padding-left: 105px;
    padding-right: 20px;
    
    overflow: auto;
}

#profiles-content li {
    display: block;

    height: 100%;
    
    padding: 0px;
    margin: 0px;
    
    list-style: none;
    
    overflow: hidden;
    
    font-size: 12px;
    color: white;
}

#profiles-content h3 {
    color: black;
    
    font-size: 12px;
    font-style: normal;
    font-weight: normal;
    margin-bottom: 20px;
    margin-left: 15px;
}

#profiles-content p {
	margin-bottom: 1em;
}

#profiles-navigation {
    background: transparent;
}

#profiles-navigation ul {
    list-style: none;
    display: inline;
    
    height: 35px;
}

#profiles-navigation li {
    display: inline;  /* fix for IE double margin */
}

#profiles-navigation a {
    width: 35px;
    height: 35px;
    
    float: left;
    
    color: white;
    
    background-image: url(../img/baby-monolith.gif);
}

#profiles-navigation a:hover {
	background: transparent url(../img/baby-monolith-rotating.gif);
}

#profile-button-1 {
    position: absolute;
    
    left: 120px;
    top: 280px;
	
	background-position: -140px 0;
    
    z-index: 2;
}

#profile-button-2 {
    position: absolute;
    
    left: 160px;
    top: 305px;
	
	background-position: 0 0 ;
    
    z-index: 4;
}

#profile-button-3 {
    position: absolute;
    
    left: 310px;
    top: 300px;

	background-position: -105px 0;
    
    z-index: 3;
}

#profile-button-4 {
    position: absolute;
    
    left: 435px;
    top: 275px;
    
	background-position: -70px 0;

    z-index: 1;
}

#profile-button-5 {
    position: absolute;
    
    left: 465px;
    top: 245px;
    
	background-position: -35px 0;
	
    z-index: 0;
}

#profile-button-6 {
    position: absolute;
    
    left: 495px;
    top: 295px;
    
	background-position: 0 0;
	
    z-index: 5;
}


/********************* Solutions *********************/

#solutions-content {
    background:transparent;
    
    padding-top: 100px;
}

#solutions-content ul {
    display: block;
	
	background: #7F7F92;
    
    width: 300px;
    height: 130px;
    
    padding-left: 105px;
    padding-right: 20px;
    
    overflow: auto;
}

#solutions-content li {
    display: block;

    height: 100%;
    
    padding: 0px;
    margin: 0px;
    
    list-style: none;
    
    overflow: hidden;
    
    font-size: 12px;
    color: white;
}

#solutions-content h3 {
    color: white;
    
    font-size: 12px;
    font-style: normal;
    font-weight: normal;
    margin-bottom: 20px;
    margin-left: 10px;
}

#solutions-content p {
	margin-bottom: 1em;
}


#solutions-navigation {
	position: absolute;
	
	background: transparent url(../img/solutions-columns.gif) no-repeat;
	
	width: 253px;
	height: 289px;
	
	left: 448px;
	top: 53px;
}

#solutions-navigation ul {
    list-style: none;
    display: inline; /* fix for IE double margin */
}

#solutions-navigation li {
    display: inline;  /* fix for IE double margin */
}

#solutions-shadow-1 {
	position:absolute;	
	background-image: url(../img/solutions-shadow-1.gif);
	width: 91px;
	height: 83px;
	left: 137px;
	top: 0px;
	z-index: 1;
}

#solutions-shadow-2 {
	position:absolute;	
	background-image: url(../img/solutions-shadow-2.gif);
	width: 71px;
	height: 131px;
	left: 87px;
	top: 44px;
	z-index: 2;
}

#solutions-shadow-3 {
	position:absolute;	
	background-image: url(../img/solutions-shadow-3.gif);
	width: 88px;
	height: 216px;
	left: 157px;
	top: 45px;
	z-index: 3;
}

#solutions-shadow-4 {
	position:absolute;	
	background-image: url(../img/solutions-shadow-4.gif);
	width: 86px;
	height: 139px;
	left: 106px;
	top: 141px;
	z-index: 4;
}

#solutions-shadow-5 {
	position:absolute;	
	background-image: url(../img/solutions-shadow-5.gif);
	width: 59px;
	height: 103px;
	left: 165px;
	top: 186px;
	z-index: 5;
}



/********************* Projects *********************/

#projects-category-navigation {
	position: absolute;
	top: 23px;
	
	padding-left: 50px;
	
	background: white;
	
	width: 115px;
}

#projects-category-navigation ul {
	list-style: none;
}

#projects-category-navigation a {
	display: block;
	
	padding-top: 1px;
	padding-bottom: 1px;
	
	border-left: 2px solid #D8D8D8;
	padding-left: 10px;
	
	width: 100%;
	color: #666;
	text-decoration: none;
	font-size: 11px;
}

#projects-category-navigation a:hover {
	border-left: 7px solid white;
	padding-left: 5px;
	background: #CCC;
}



#projects-project-navigation {
	position: absolute;
	
	background: transparent;
	
	top: 220px;
	
	padding-left: 50px;
	
	width: 740px;
	height: 150px;
	
	overflow: auto;
	
	/* this is to make the text flow over the projects-mask divs */
	z-index: 9999999;
}

#projects-project-navigation h2 {
	display: none;
}

#projects-project-navigation ul {
	list-style: none;
	
	height: 100%;
}


#projects-project-navigation a {
	display: block; 
	
	padding-top: 2px;
	padding-bottom: 2px;
	
	padding-left: 12px;
	
	width: 140px;
	color: white;
	text-decoration: none;
	font-size: 11px;
}

#projects-project-navigation a:hover {
	border-left: 2px solid white;
	padding-left: 10px;
}




#projects-content {
	position: absolute;
	
	top: -80px;
	left: 188px;
	
	width: 571px;
	height: 450px;
	
	background: transparent url(../img/projects-mask.gif) no-repeat;
}

#projects-content ul {
	position: absolute;
	top: 20px;
	left: 17px;
	
	color: black;
	background: white;
	
	width: 400px;
	height: 420px;
	
	padding-left: 32px;
	padding-right: 20px;
	
	overflow: auto;
	
	list-style: none;
}

#projects-content li {
	padding-top: 70px;
	
	height: 350px;
	width: 340px;
}

.project-description {
	position:relative;
	z-index: 100;
	
	overflow: auto;
	
	background: white;
	
	/* js animated properties */
	width: 340px;
	height: 55px;
	margin-bottom: 0px;
	padding-right: 0px;
}

.project-description:hover,
.project-description-hover
{
	/* js animated properties - overriden in style-script.css */
	width: 240px;
	height: 155px;
	margin-bottom: -100px;
	padding-right: 100px;
}

.project-description h3 {
	font-size: 1em;
	font-weight: normal;
	margin-bottom: 1em;
}

.project-description:hover h3{
	margin-bottom: 3em;
}


.project-screenshot {
	position: relative;
	
	background: black;
	
	width: 316px;
	height: 222px;
	
	text-align: center;
}

a.project-launch {
	position: relative;
	z-index: 2;
	
	width: 100%;
	height: 100%;
	background-color: transparent;
	background-image: url(../img/projects-screenshot-mask.gif);
	
	margin-bottom: -222px; /* 100% uses the width and not the height of the containing element! */
}

.project-screenshot img {
	margin-top: 5px;
	/*
	margin-left: 60px;
	*/
	color: white;
}




/*
a.project-launch {
	position: relative;
	z-index: 1;
	display: block; 
	
	width: 316px;
	height: 222px;
	
	background-color: transparent; 
	background-image: url(../img/projects-screenshot-mask.gif);
	
	margin-bottom: -222px;
}

a.project-launch:hover {
	background-image: url(../img/projects-screenshot-mask-hover.gif);
}

a.project-launch span {
	display: none;
}

.project-screenshot {
	position:relative;
	z-index:0;
	
	width: 316px;
	height: 222px;
	
	background: black;
}

*/

.projects-mask {
	position: absolute;
	
	display: block;
	
	background-image: url(../img/projects-mask.gif);
	background-repeat: no-repeat;
	
	z-index: 100;
}

#projects-mask-part-1 {
	top: 0px;
	left: 0px;
	
	background-position: 0px 0px;
	
	width: 500px;
	height: 60px;
}


#projects-mask-part-2 {
	top: 50px;
	left: 0px;
	
	background-position: 0px -50px;
	
	width: 42px;
	height: 300px;
	
}

#projects-mask-part-3 {
	top: 350px;
	left: 0px;
	
	background-position: 0 -350px;
	
	width: 200px;
	height: 100px;
}

#projects-mask-part-4 {
	top: 390px;
	left: 200px;
	
	background-position: -200px -390px;
	
	width: 300px;
	height: 60px;
}

#projects-mask-part-5 {
	top: 60px;
	left: 385px;
	
	background-position: -385px -60px;
	
	width: 115px;
	height: 330px;
	
	
	width: 105px;
	left: 395px;
	
	background-position: -395px -60px;
}



/********************* Contact *********************/

#contact-content {
	padding-top: 50px;
	padding-left: 100px;
	/* fix for IE */
	width: 50%;
}

#contact-content {
	color: black;
}


#contact-info {
	color: black;
 	margin-bottom: 50px;
}

#contact-form p {
	margin-top: 10px;
	margin-bottom: 10px;
}

#contact-form label {
	display: block;
	float: left;
	clear: left;
	width: 10ex;
}

#contact-form label.error {
	color: red;
	font-weight: bold;
}

#contact-form input#name,  
#contact-form input#email
{
	width: 25ex;
}

#contact-form input#send {
	color: white;
	background: #ffa600;
	
	padding: 0.5em 2ex 0.5em 0;
}

#contact-form input#send:hover {
	color: black;
}

#contact-form textarea {
	overflow: auto;
}



/** "the map" link **/

#contact-map {
    position: absolute;
	left: 420px;
}

#contact-map a.button {
	position: relative;
	left: 200px;
	
	background-image: url(../img/navigation-map.gif);
	
	height: 30px;
	width: 80px;
}



/********************* Map *********************/

#map-content {
	padding-left: 100px;
	padding-right: 50px;
	padding-top: 20px;
}

#map-content a {
	float: right;
}

#map-content #contact-info {
	padding-top: 30px;
	margin: 0;
}



/********************* Navigation *********************/

#navigation {
	position: relative;
	
    height: 43px;
    width:100%;
    color: white;
    background: #ffa600;
    background: transparent;
    
    clear:both;
	
	z-index: 1000;
}

#navigation ul {
    list-style: none;    
    margin-left: 87px;
}

#navigation li {
    display: inline; /* For IE - double margin fix*/
}

#navigation a {
    float: left;

    width: 100px;
    height: 43px;

    text-decoration: none;
    font-family: sans-serif;
    
    color:white;
    
    margin-left: 13px;
    margin-right: 13px;
    
    
    display:inline; /* For IE - double margin fix*/
}

#news {
    background-image: url(../img/navigation-news.gif);
}

#company {
    background-image: url(../img/navigation-company.gif);
}

#solutions {
    background-image: url(../img/navigation-solutions.gif);
}

#projects {
    background-image: url(../img/navigation-projects.gif);
}

#contact {
    background-image: url(../img/navigation-contact.gif);
}


/*********** Button class (with hover effect) **********/

/* 
actual width and height has to be set seperately for an <a> element with an id 

care has to be taken of the specificity of the selectors with ids, 
that could override the properties specified here.

In particular, using the shorthand background when trying to set only the background-image property 
will result in the hover effect not working. 
*/

a.button {
    display: block;  /* forces the a tag to behave like a block level element */
    background-position: top left;
    background-repeat: no-repeat;
    border: none;
	color: white;
}

a.button:hover {
    background-position: 0 100%;
	color: black;
}

/* empty images with alt text inside button links that display alt text for users that turn off loading of images */
.button img {
    display: block;
    border: none;
    
    width: 100%;
    height: 100%;
}

/* span with hidden button text inside that shows up on unstyled content */
.button span {
    display: none; 
}

/************************ Footer ****************************/

#footer {
    width:100%;
    padding-top: 3px;
    font-size: 9px;
    background: white;
    color: black;
}



/***************** DEBUG ******************************/

/*
#background-home
{
    display: none !important;
}


#background-news, #news-box
{
    display: none !important;
}


#background-company, #company-title, #company-content, #company-profiles
{
    display: none !important;
}


#background-profiles, #profiles-content, .profiles-monolith, #profiles-navigation
{
    display: none !important;
}


#background-solutions, #solutions-content, #solutions-navigation
{
    display: none !important;
}


#contact-content
{
    display: none !important;
}
/**/