/* CSS Document */
/*	
CLIENT
Author(s): Louis de Valliere
Date: 23/11/2010
Version: 1.0
www.sofismo.ch
www.louisdevalliere.com
*/
@sofismo_green: #6FBA91;

img.preload { display: none; }

/*LINKS*/
a, a:visited{
	text-decoration:none;
	color:#555555;
}
a:hover{
	text-decoration:none;
	color:#555555;
}
a.footer_link, a.footer_link:visited{
	color:#b3b3b3;
	padding:5px;
}
a.footer_link:hover{
	color:@sofismo_green;
	text-decoration:underline;
}
a.content_link, a.content_link:visited{
	color:@sofismo_green;
}
a.content_link:hover{
	color:@sofismo_green;
	text-decoration:underline;
}
a.nav_link, a.nav_link:visited{
	color:#b3b3b3;
	font-size:13px;
}
a.nav_link:hover{
	color:@sofismo_green
}
a.sub_nav_link, a.sub_nav_link:visited{
	color:#fefefe;
	font-size:11px;
}
a.sub_nav_link:hover{
	color:@sofismo_green
}
a.pre_head_link, a.pre_head_link:visited{
	color:#b3b3b3;
}
a.pre_head_link:hover{
	color:@sofismo_green;
	text-decoration:underline;
}
a.active, a.active:visited, a.active:hover{
	color:@sofismo_green
}
a.active_white, a.active_white:visited, a.active_white:hover{
	color:#FFF;
}
a.green, a.green:visited, a.green_bold, a.green_bold:visited{
	color:@sofismo_green
}
a.green:hover, a.green_bold:hover{
	text-decoration:underline;
}
a.green_bold, a.green_bold:visited{
	font-weight:bold;
}
/*LAYOUT*/
html,body{
	font-family: 'Helvetica Neue', Helvetica, Arial, Sans-serif;
	background-color:#E3E3E3;
	background-image:url('../images/top_bg.png');
	background-repeat:repeat-x;
}
p+p{
	text-indent:0;
	margin-top:15px;
}
.text_align_right{
	text-align:right;
}
.bold{
	font-weight:bold;
}
.green{
	color:@sofismo_green;
}
.pre_header{
	margin:10px 0px 3px 0px; 			/* Top and bottom margins made smaller */
	p{
		margin:0;
		padding:0px 15px 0px 32px; 		/* Right margin set to 15px like in the footer, left margin set to 32px to aligh with logo */
		color:#b3b3b3;
		font-size:11px;
	}
}
.header{
	background-color:#5A5A5A; 			/* Colour changed to dark grey instead of black */
	height:160px;           			/* Height increased a bit to accomodate longer "services" menu */
	.logo img{
		margin-top:30px;
		margin-left:24px; 				/* Margin reduced to 24px, to align edge of logo with margin in the content */
	}
	.navigation{
		height:130px; 					/* Increased to accomodate longer menues */
		position:relative;
		ul.main_list{
			position:absolute;
			right:0px; 					/* No effect! reduced to 0 */
			top:62px; 					/* Should align main menues with bottom of "SOFISMO" */
			padding:0px 0px 0px 0px; 	/* No effect! Reduced everything to 0 */
			li.parent, li.active_parent, li.parent_small, li.active_parent_small, li.active_parent_static, li.parent_static{
				position:relative;
				display:inline;
				ul.children, ul.active{
					position:absolute;
					left:0px;
					top:50px;
					padding:6px 0px 8px 12px; /* Minimize the right padding (distance between menue columns) and keep right padding the same as in columns_i */
					display:none;
				}
			}
			li.active_parent, li.active_parent_small, li.active_parent_static{
				top:-50px; /* Keep at 50 because dyamic menu always scrolls up 50px */
				ul.children, ul.active{
					display:inline;
				}
			}
			li.active_parent_static, li.parent_static{
				top:0px;
			}
			li.active_parent_small{
				top:-20px;
			}
			li.column_1{
				padding:40px 50px 80px 10px; /* Column "Tools" Argument 2 geändert von 20 nach 50, um das Menü nach links zu schieben */
			}
			li.column_2{
				padding:40px 30px 80px 10px; /* Column "Services" Argument 2 geändert von 15 auf 30, um das Menü nach links zu schieben */
			}
			li.column_3{
				padding:40px 40px 80px 10px; /* Column "Company" */
			}
			li.column_4{
				padding:40px 45px 80px 10px; /* Column "Career" */
			}
			li.column_5{
				padding:40px 0px 80px 0px; 	 /* Column "Contact", padding right reduced to 0 */
			}
		}
	}
}
.picture{
	position:relative;
	margin:8px 0px 0px 0px;  		/* Dicke des weissen Abstandes zwischen Header und Bild */
/*	background-color:#111;	*/
	min-height:250px;
	.page_picture{
		float:left;
		width:100%;
		position:relative;
		z-index:10;
	}
	h1{
		position:absolute;
		top:50px;
		left:30px;
		font-weight:bold;
		font-size:30px;
		color:#FFF;
		z-index:500;
	}
	h4{ 							/* New style for the upper statement in the homepage */
		position:absolute;
		top:15px;
		right:15px;
		font-weight:normal;
		font-size:24px;
		color:#FFF;
		z-index:500;
	}
	h5{ 							/* New style for the lower statement in the homepage */
		position:absolute;
		bottom:-10px;
		right:15px;
		font-weight:normal;
		font-size:17px;
		color:#FFF;
		z-index:500;
	}
	.mask{
		position:absolute;
		bottom:0px;
		left:0px;
		z-index:1000;
	}
}
.title{
	h1{
		position:absolute;
		top:20px; 					/* Change to 20px because first text has to be at the top right edge of the page */
		right:10px; 				/* Define right edge since it is to be right-justified */
									/* background-image:url('../images/black_overlay.png'); no background */
		z-index:1000;
		color:#FFF;
		padding:0px 0px 0px 0px; 	/* No padding */
		font-weight:normal;
		font-family:'Helvetica Neue', Helvetica, Arial, Sans-serif;
	}
	#title_why{
		position:absolute;
		bottom:80px;
		right:0px;
		padding:8px 16px 8px 24px;
		font-weight:normal;
		font-size:20px;
		color:#FFF;
		z-index:500;
		background-image:url('../images/black_overlay.png');
		font-family:'Helvetica Neue', Helvetica, Arial, Sans-serif;
	}
	#title_who{
		position:absolute;
		bottom:20px;
		right:10px;
		padding:0px 0px px 0px; 	/* No padding */
		font-weight:normal;
		font-size:20px;
		color:#FFF;
		z-index:500;
									/* background-image:url('../images/black_overlay.png'); no background */
		font-family:'Helvetica Neue', Helvetica, Arial, Sans-serif;		
	}
}
#slideshow{
	#slidesContainer{
		margin-top:8px;
		width:750px;  				/* Changed from 950px */
		height:250px;    			/* Changed from 339px */
		position:relative;
		background-color:#000;
		ul, li{
			margin:0;
			padding:0;
		}
		.slideButton, .inactive, .active{
			width:34px;
			height:24px;
		}
		.inactive{
			background-image:url('../images/black_overlay.png');			
		}
		.active{
			background-image:url('../images/title_selector_active.png');
		}
		#slide3button{
			position:absolute;
			bottom:10px;
			right:20px;
			z-index:2000;
		}
		#slide2button{
			position:absolute;
			bottom:10px;
			right:60px;
			z-index:2000;
			
		}
		#slide1button{
			position:absolute;
			bottom:10px;
			right:100px;
			z-index:2000;
			
		}
		#slide4button{
			position:absolute;
			bottom:10px;
			right:140px;
			z-index:2000;
			
		}
		.slide{
			width:750px; 			/* Changed from 950. Reduce by 20 pixels to avoid horizontal scroll */
			height:340px;	
		}
		.picture{
			position:relative;
			margin-top:8px;
			background-color:#000;
			min-height:150px;
			.page_picture{
				float:left;
				width:100%;
				position:relative;
				z-index:10;
			}
			h1{
				position:absolute;
				top:50px;
				left:30px;
				font-weight:bold;
				font-size:30px;
				color:#FFF;
				z-index:500;
			}
			.mask{
				position:absolute;
				bottom:0px;
				left:0px;
				z-index:1000;
			}
		}
		.title{
			h1{
				position:absolute;
				top:120px;
				left:0px;
				background-image:url('../images/black_overlay.png');
				z-index:1000;
				color:#FFF;
				padding:16px 30px 16px 40px;
				font-weight:normal;
				font-family:'Helvetica Neue', Helvetica, Arial, Sans-serif;
			}
			#title_why{
				position:absolute;
				bottom:80px;
				right:0px;
				padding:8px 16px 8px 24px;
				font-weight:normal;
				font-size:20px;
				color:#FFF;
				z-index:500;
				background-image:url('../images/black_overlay.png');
				font-family:'Helvetica Neue', Helvetica, Arial, Sans-serif;
			}
			#title_who{
				position:absolute;
				bottom:30px;
				right:0px;
				padding:8px 16px 8px 24px;
				font-weight:normal;
				font-size:20px;
				color:#FFF;
				z-index:500;
				background-image:url('../images/black_overlay.png');
				font-family:'Helvetica Neue', Helvetica, Arial, Sans-serif;		
			}
		}
	}
}
.content{
	background-color:#FFF;
	.margin_sides{
		margin:0px 50px 0px 30px;
	}
	.margin_bottom{
		margin-bottom:20px;
	}
	.margin_top{
		margin-top:20px;
	}
	h2{
		font-size:20px;
		font-weight:bold;
		color:#333333;
	}
	h3{
    		margin-top: 10px;
    		margin-bottom: 0px;
		font-size:12px;
		font-weight:bold;
		color:#3333333;
	}
	ul {
    		margin-top: 2px;
    		margin-bottom: 2px;
    		margin-left: -10px;
	}
	p {
    		margin-top: 2px;
    		margin-bottom: 2px;
    		margin-left: 0px;
	}
	.sidebar{
		font-size:11px;
	}
	.title_bottom, .title_bottom_news{
		h3{
			float:left;
		}
		p{
			margin-left:130px;
		}
	}
	.title_bottom_news{
		p{
			margin-left:50px;
		}
	}
	.grey{
		color:#999999;
	}
}
.footer{
	font-size:11px;
	ul{
		margin:3px 5px 10px 20px;		/* Left margin changed from 0 to 20px to allign with Logo */
		padding:0;
		li{
			display:inline;
			margin:5px;
		}
	}
}
ul.disc li{
	list-style-type:disc;
}
ul.flush_disc{
	list-style-type:disc;
	padding:0px 0px 0px 17px;
}
ul.flush{
	padding:0;
}
/* Container */
#agile, #e_agile{
	display:none;
	width:700px; 
	color:#bbb; 
	background-color:#333333; 
	padding:12px;
}
#agile-container, #e_agile-container{
	height:800px;
}
#agile, #e_agile {
	padding:8px;
}
#agile a.modalCloseImg , #e_agile a.modalCloseImg {
	background:url(../images/basic/x.png) no-repeat; 
	width:25px; 
	height:29px; 
	display:inline; 
	z-index:3200; 
	position:absolute; 
	top:-15px; 
	right:-16px; 
	cursor:pointer;
}
#agile h3, #e_agile h3 {
	color:@sofismo_green;
}
#web_window a, #web_window_e a{
	color:@sofismo_green;
}
.modal{
	display:none;
}
.no_margin{
	margin:0;
	padding:0;
}