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


/* reset browsers */
html,body,div,ul,ol,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,pre,form,p,blockquote,fieldset,input,hr {margin:0; padding:0;}
h1,h2,h3,h4,h5,h6,pre,code,address,caption,cite,code,em,strong,th {font-size:1em; font-weight:normal; font-style:normal;}
ul,ol {list-style:none;}
fieldset,img,hr {border:none;}
caption,th {text-align:left;}
table {border-collapse:collapse; border-spacing:0;}
td {vertical-align:top;}

a {cursor:pointer; text-decoration:none;}
/* get rid of those system borders being generated for A tags */
a:active {outline:none;}
:focus {-moz-outline-style:none;}

.clear{clear:both;}

body {
	background: url(../_img/background_html.png) no-repeat top center;
	background-color:#F7F7F7;
	/*overflow:auto;*/
	font-family:'Lucida Grande','Lucida Sans Unicode',Verdana,Helvetica,Arial,sans-serif;
	font-size: 12px;
	font-weight: normal;
	text-transform: normal;
	letter-spacing: normal;
	line-height: 2.3em;
	color:#999;
}

#container{
	width:1030px;
	margin: 0 auto 0 auto;
}

#section01{
	background: url(../_img/background_content.png) no-repeat;
	margin-top:50px;
	width:960px;
	margin: 56px auto 0 auto;
	height:500px;
}

#section01 h1 {
	width:588px;
	height:72px;
	margin:0px auto 0 auto;
	padding:220px 0 0 0;
	
}

#section02{
	width:966px;
	margin: 0px auto 0 auto;
}

li.smallWindow {
	background:url(../_img/background_content_mini.png) 0 0 no-repeat;
	width:476px;
	height:246px;
	float:left;
	margin:14px 0 0 0;
}

li.right{
	margin-left:14px;
}

li.smallWindow h2 {
	text-indent:-9999px;
	margin:15px 0 0 35px;
}

li.smallWindow p, li.smallWindow ul {
	margin:23px 8px 0 30px;
	font-size:13px
}

li.smallWindow ul {
	/*list-style:circle outside;	*/
	margin-left:35px;
}

li.skills ul {
	margin-top:50px;	
}

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

li.tools li{
	float:left;
}

/*-------------titles--------------*/
li.name h2 {
	background:url(../_img/title_about.gif) 0 0 no-repeat;
	width:71px;
	height:23px;
}

li.services h2 {
	background:url(../_img/title_services.gif) 0 0 no-repeat;
	width:95px;
	height:23px;
}

li.skills h2 {
	background: url(../_img/title_skills.gif) 0 0 no-repeat;
	width:62px;
	height:23px;
}

li.tools h2 {
	background: url(../_img/title_tools.gif) 0 0 no-repeat;
	width:59px;
	height:23px;
}

li.tools ul {
	margin: 55px 60px 0 60px;	
}

li.tools li {
	margin: 0 0 0 10px;	
}

/*---------------section 03 - Portfolio---------------*/
#section03{
	background: url(../_img/background_portfolio.png) 32px 0  no-repeat;
	margin-top:14px;
	width:1030px;
	height:506px;
	position:relative;
}

h3 {
	position:absolute;
	top:17px;
	left:67px;
	text-indent:-9999em;
	background: url(../_img/title_portfolio.gif) 0 0 no-repeat;
	width:102px;
	height:23px;
}

div.scrollable {
	/* required settings */
	position:relative;
	overflow:hidden;	 	
	width: 960px;	
	height:451px;	
	/* custom decorations */
	margin:52px 0 0 0;	
	
	/* this makes it possible to add next button beside scrollable */
	float:left;	
}

/* 
	root element for scrollable items. Must be absolutely positioned
	and it should have a super large width to accomodate scrollable items.
	it's enough that you set width and height for the root element and
	not for this element.
*/
div.scrollable div.items {	
	width:20000em;	
	position:absolute;
	clear:both;		
	margin-left:0px;
	color:#FFF;
}

/* single scrollable item */
div.scrollable div.items div.item {
	float:left;
	width:960px;
	height:451px;
	margin-right:0px;
	
	/*background-color: #0fb8e8;*/
}

/*********** navi ***********/


/* position and dimensions of the navigator */
div.navi {
	position:absolute;
	top:24px;
	left:350px;
	margin:0 auto 0 auto;
	width:400px;
	height:52px;
}

/* items inside navigator */
div.navi a {
	width:12px;
	height:12px;
	float:left;
	margin:3px;
	background: url(../_img/navigator_top.png) 0 0 no-repeat;
	display:block;
	font-size:1px;
}

/* mouseover state */
div.navi a:hover {
	background-position:0 -24px;      
}

/* active state (current page state) */
div.navi a.active {
	background-position:0 -24px;     
} 

/*********** TOP NAV ***********/


/*--------------------ARROWS----------------------*/

/* prev, next, prevPage and nextPage buttons */
a.prev, a.next, a.prevPage, a.nextPage {
	display:block;
	width:31px;
	height:31px;
	background: url(../_img/arrow_left.gif) no-repeat;
	float:left;
	font-size:1px;
	margin:200px 4px 0 0;
}

/* mouseover state */
/*a.prev:hover, a.next:hover, a.prevPage:hover, a.nextPage:hover {
	background-position:0px -30px;		
}*/

/* disabled navigational button */
a.disabled {
	visibility:hidden !important;		
}

/* next button uses another background image */
a.next, a.nextPage {
	background-image: url(../_img/arrow_right.gif);
	clear:right;
	margin:200px 0 0 4px;
}

/*--------------------CONTENT PORTFOLIO----------------------*/

.description {
	margin:13px 0 0 30px;
}

.description .logoCS {
	float:left;	
	margin:0;
}

.description .line {
	float:left;	
	margin:0 15px 0 30px;
}

.description .text {
	float:left;	
	margin:20px 15px 0 0;
}

.description .logoCS {
	width:129px;	
}

.description .logoCS span {
	width:124px;
	margin: 0 auto 0 auto;
}

.projectType {
	margin: 10px 0 0 0;	
}

.viewProject a {
	float:right;
	text-indent:-9999px;
	background:url(../_img/title_view_project.gif) 0 0 no-repeat;
	width:90px;
	height:15px;
	display:block;
	text-decoration:none;
	margin: 30px 20px 0 0;
}

.viewProject .hidden {
	display:none;	
}



/*--------------------SECTION 04 CONTACT----------------------*/

#section04 {width:890px;margin: 150px auto 0 auto;}

#section04 h5 {text-indent:-9999px; background: url(../_img/title_contact.gif) 0 0 no-repeat;width:91px;height:23px;margin: 0 0 15px 0;}

#section04 h6 {text-indent:-9999px; background: url(../_img/title_download.gif) 0 0 no-repeat;width:109px;height:20px;margin: 0 0 15px 0;}

#section04 .bloc {width:445px; float:left;}

#section04 .left {margin: 40px 0 0 50px;}

#section04 .right {margin: 40px 0 0 90px}

#section04 .small{line-height:18px;	color:#FFF;}

#section04 a {color:#76ad1c;}

#section04 a:hover {color:#FFF;}

#myForm_firstName, #myForm_Email, #myForm_message{width:400px;}

#footer {margin: 250px 0 0 0; width:100%; text-align:center; background:#373737; color:#656565}