@charset "utf-8";
/* CSS Document */

/* === Main Content Section === */

body  {
	font:100%;
	background-color:#131213;
	margin:0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
	padding:0;
	text-align:center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
	color:#000000;
	height:100%;
}

#container { 
	position:relative; /* adding position: relative allows you to position the two sidebars relative to this container */
	width:1280px;  /* using 20px less than a full 800px width allows for browser chrome and avoids a horizontal scroll bar */
	background-color:#000;
	margin:0 auto; /* the auto margins (in conjunction with a width) center the page */
	border:0px;
	top:0px;
	left:0px;
	text-align:left; /* this overrides the text-align: center on the body element. */
	z-index:1; /* workaround for background image stretching */
} 

#mainContent { 
	margin:0 200px; /* the right and left margins on this div element creates the two outer columns on the sides of the page. No matter how much content the 		sidebar divs contain, the column space will remain. */
	background-color:#000;
}

#middleContent {
	background-color:#000;
	position:absolute;
	left:0px;
	top:20px;
	width:1280px;
	height:877px;
	background:url(../images/content.png) top no-repeat; /* This is the monitor image - the middle background of the page. */
}

/*workaround for background stretching*/
img#bg {
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100%;
}

/* === Logo Section === */

#logo {
	position:absolute;
	left:180px;
	top:35px;
	color:#7e7e7e;
	font-size:9px;
	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
	width:158px;
	height:50px;
}

#logo #logoinfo {
	position:absolute;
	right:40px;
	top:25px;
}


/*  Aligning players */

#projects1 {
margin-top: 150px;
}

#projects2 {
	height: 100%;
	width: 100%;
	background-image: url(../images/portfolio/02-background.jpg);
}

#projects3 {
	margin-top: 0px;
	background-image: url(../images/portfolio/03-background.jpg);
	height: 100%;
	width: 100%;
}

#projects4 {
	background-image: url(../images/portfolio/04-background.jpg);
	height: 100%;
	width: 100%;
}

#projects5 {
	background-image: url(../images/portfolio/05-background.jpg);
	height: 100%;
	width: 100%;
	clear: both;
	float: none;
	padding-top: -150px;
}
#container #mainContent #middleContent #slides #slide2 #projects5 #close5 {
	margin-top: 136px;
}
#container #mainContent #middleContent #slides #slide2 #projects4 #close4 {
	margin-top: 165px;
}
#container #mainContent #middleContent #slides #slide2 #projects3 #close3 {
	margin-top: 136px;
}
#container #mainContent #middleContent #slides #slide2 #projects1 #close1 {
	margin-top: 136px;
}





/* === Menu Section === */

#menu {
	position:absolute;
	right:180px;
	top:50px;
	background-color:transparent;
	padding:0;
	font-size:16px;
	font-weight:bold;
	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
	float: right;
}

#container #mainContent #middleContent #slides #slide3 #link {
	right: 0px;
	bottom: 0px;
	position: absolute;
}


#menu ul, 
#slide2 .list ul {
    margin:0;
    padding:0;
    list-style-type:none;
}

#menu li {
	margin:0;
    float:left;
	margin-left:15px;
    background-color:transparent;
    text-align:center;
	color:#7e7e7e;
}

#menu a,
#menu li.linkmenu a {
    display:block;
    text-decoration:none;
}

#menu li.linkmenu a:visited {
	text-decoration:none;
	color:#7e7e7e;
}

#menu #switches .first {
	color:#FFF;
}

#menu #switches li {
	cursor:pointer;
	font-size: 18px;
}

/* === Slides Section === */

#slides {
	position:absolute;
	left:217px;
	top:144px;
	width:848px;
	height:429px;
	background-color:#000;
	color:#7e7e7e;
	font-size:10px;
}

#slide0, #slide1, #slide2, #slide3, #slide4, #slide5,
.project1, .project2, .project3, .project4, 
#mainprojects, 
#mail {
	position:absolute;
	left:0px;
	top:0px;
	width:848px;
	height:429px;
	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
}

/* === Home Section === */

#slide0 h3 {
	margin-top:100px;
	margin-left:70px;
	font-weight:bold;
	font-size:14px;
}

/* === About Section === */

#slide1 #infoheader {
	position:absolute;
	margin-top:100px;
	margin-left:70px;
	width:708px;
}

#slide1 #infoheader h1 {
	font-weight:bold;
	color:#ccc;
}

#slide1 #infospan {
	position:absolute;
	margin-top:150px;
	margin-left:70px;
	width:708px;
	text-align:justify;
}

#slide1 #infospan span {
	font-weight:bold;
	font-size:14px;
	color:#646464;
}

/* === Main-projects Section === */

#slide2 #mainprojects {
	padding-top:2px;
	padding-bottom:2px;
	height:429px;
}

#slide2 #mainprojects .thumbnailphoto {
	position: absolute;
	width: 211px;
	height: 424px;
}

#slide2 #mainprojects .thumbnailphoto.thumb1 {
	background: url(../images/portfolio/01.jpg) center no-repeat;
}

#slide2 #mainprojects .thumbnailphoto.thumb2 {
	background: url(../images/portfolio/02.jpg) center no-repeat;
}

#slide2 #mainprojects .thumbnailphoto.thumb3 {
	background: url(../images/portfolio/03.jpg) center no-repeat;
}

#slide2 #mainprojects .thumbnailphoto.thumb4 {
	background: url(../images/portfolio/04.jpg) center no-repeat;
}

#slide2 #mainprojects .thumbnailphoto.thumb5 {
	background: url(../images/portfolio/05.jpg) center no-repeat;
}

#slide2 #mainprojects .thumbnailphoto.thumb6 {
	background: url(../images/mainproject6.jpg) center no-repeat;
}

#slide2 #mainprojects .thumbnailphoto.thumb7 {
	background: url(../images/mainproject7.jpg) center no-repeat;
}

#slide2 #mainprojects .thumbnailphoto.thumb8 {
	background: url(../images/mainproject8.jpg) center no-repeat;
}

/* === Sub-projects Section === */

#slide2 .close {
	position:absolute;
	right:15px;
	top:15px;
	width:34px;
	height:34px;
	background-image:url(../images/closebutton.png);
	z-index:1001;
}

#slide2 .close:hover {
	cursor:pointer;
}

/* === Services Section === */

#slide3 #service1 {
	position:absolute;
	left:0px;
	top:0px;
	width:276px;
	height:429px;
}

#slide3 #service2 {
	position:absolute;
	left:286px;
	top:0px;
	width:276px;
	height:429px;
}

#slide3 #service3 {
	position:absolute;
	left:572px;
	top:0px;
	width:276px;
	height:429px;
}

#slide3 #service1 h1, 
#slide3 #service2 h1, 
#slide3 #service3 h1 {
	font-size:25px;
	color:#cccccc;
}

#slide3 #service1 h2, 
#slide3 #service2 h2, 
#slide3 #service3 h2 {
	font-size:12px;
	color:#646464;
}

#slide3 #service1 span, 
#slide3 #service2 span, 
#slide3 #service3 span {
	color:#cccccc;
	line-height:1.6em;
}

#slide3 #service1content, 
#slide3 #service2content, 
#slide3 #service3content {
	position:absolute;
	top:170px;
}

#slide3 #service1content {
	left:10px;
}

#slide3 #service2content {
	left:4px;
}

#slide3 img {
	padding-top:40px;
}

#slide3 #service1 img {
	float:right;
}

#slide3 #service3 img {
	float:left;
}

#slide3 #service2 img {
	display:block;
	margin-left:auto;
	margin-right:auto;
}

/* === Partners Section === */

#slide4 #partners {
	padding-top:2px;
	padding-bottom:2px;
	height:429px;
}

#slide4 #partners .thumbnailphoto {
	position: absolute;
	width: 211px;
	height: 424px;
}

#slide4 #partners .thumbnailphoto.thumb1 {
	background: url(../images/partners/01.jpg) center no-repeat;
}

#slide4 #partners .thumbnailphoto.thumb2 {
	background: url(../images/partners/02.jpg) center no-repeat;
}

#slide4 #partners .thumbnailphoto.thumb3 {
	background: url(../images/partners/03.jpg) center no-repeat;
}

#slide4 #partners .thumbnailphoto.thumb4 {
	background: url(../images/partners/04.jpg) center no-repeat;
}

#slide4 #partners .thumbnailphoto.thumb5 {
	background: url(../images/partners/05.jpg) center no-repeat;
}

#slide4 #partners .thumbnailphoto.thumb6 {
	background: url(../images/partners/06.jpg) center no-repeat;
}

#slide4 #partners .thumbnailphoto.thumb7 {
	background: url(../images/partners/07.jpg) center no-repeat;
}

#slide4 #partners .thumbnailphoto.thumb8 {
	background: url(../images/partners/08.jpg) center no-repeat;
}

#slide4 #partners .thumbnailphoto.thumb9 {
	background: url(../images/partners/09.jpg) center no-repeat;
}

/* === Sub-partners Section === */

#slide4 .close {
	position:absolute;
	right:15px;
	top:15px;
	width:34px;
	height:34px;
	background-image:url(../images/closebutton.png);
	z-index:1001;
}

#slide4 .close:hover {
	cursor:pointer;
}


/* === Contact Section === */

#slide5 #separator {
	position:absolute;
	left:8px;
	bottom:100px;
	width:830px;
	height:1px;
	background-image:url(../images/separator.png);
}

#slide5 #companyinfo {
	position:absolute;
	left:20px;
	bottom:0px;
	width:800px;
	height:75px;
	font-family:;
	font-size:9px;
}

#mail #contactname {
	position:absolute;
	left:50px;
}

#mail #contactemail {
	position:absolute;
	left:280px;
}

#mail #contactmessage {
	position:absolute;
	left:510px;
}

#mail #contactname,
#mail #contactemail,
#mail #contactmessage {
	top:50px;
	width:230px;
	height:180px;	
}

#mail input {
	color:#7e7e7e;
	background-color:#333;
	width:215px;
	border:0;
	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
	font-weight:bold;
	font-size:14px;
}

#mail textarea {
	height:150px;
	width:300px;
	color:#7e7e7e;
	background-color:#333;
	border:0;
	scrollbar-base-color:#7e7e7e;
	scrollbar-arrow-color:#7e7e7e;
	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
	font-weight:bold;
	font-size:14px;
}

#mail #contactbuttons {
	position:absolute;
	right:30px;
	bottom:120px;
	width:150px;
	height:32px;
}

#mail #contactbuttons .contactsend {
	position:absolute;
	left:0px;
	bottom:0px;
}

#mail #contactbuttons .contactclear {
	position:absolute;
	left:75px;
	bottom:0px;
	font-weight:bolder;
}

#mail #contactbuttons .button {
	background:url(../images/sendbutton.png) center no-repeat;
	width:65px;
	height:32px;
}

#mail #contactbuttons .button:hover {
	cursor:pointer;
	color:#FFF;
}

/* === Social Media Section === */

#socialmedia {
	position:absolute;
	left:182px;
	top:625px;
}

#socialmedia img:hover {
	cursor:pointer;
}

/* === Footer Section === */

#footer {
	position:absolute;
	right:180px;
	top:625px;
	width:300px;
	height:25px;
	color:#7e7e7e;
	text-align:right;
	font-size:10px;
	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
}