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

/* global parameters 
if the cufon wouldnt work somehow, the user will see similar font type which is Arial Narrow.
for cufon configuration please checkout js/cufon.cfg.js */
html,body{
	margin:0;
	padding:0;
	background:url(../img/bg-body.jpg) repeat-x #fff;
	color:#3b3b3b;
	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-size: 10px;
}
ul,ol,li{
	list-style:none;
	padding:0;
	margin:0;
	line-height:12px;
	font-size:10px;
}
img{
	border:none;
	margin: 0;
	padding: none;
} /* no border for all pictures */
a{
	text-decoration:none;
	color:#24C0D9;
	font-weight:bold;
}
a:hover{
	text-decoration:underline;
	color:#24C0D9;
	font-weight:bold;
}
h1,h2,h4,h5 {
	font-family:"Arial Narrow", Arial, Tahoma;
	font-weight:bold;
	padding:15px 0px 15px 0px;
	margin:0;
	line-height:26px;
}
h1 {font-size:30px;}
h2 {font-size:24px;}
h3 {
font-family:"Times New Roman", Times, serif;
	font-size:28px;
	color:#FFFFFF;
}
h4 {font-size:14px;padding-bottom:10px;}
h5 {font-size:10px;padding-bottom:10px;}
.subpage h1, .subpage h2, .subpage h3, .subpage h4, subpage h5 {padding:10px 0px 5px 0px;}
p {font-size:12px;margin:0;padding:0;font-weight:normal;line-height:16px;}
hr {border:0px;border-top:1px dotted #c0c0c0;margin:30px 0px 30px 0px;line-height:0px;height:1px;}
.clear{clear:both;font-size:0;}
.set-size {
	width:954px;
	margin:0 auto;
} /* sets the size of page contents and places it at the center of any screen resolution */
textarea {font:12px Tahoma, Geneva, sans-serif;}

.privacy {
	font:10px Tahoma, Geneva, sans-serif;
	color: #999999;
}

/* main content & submenu configuration 
You can set submenu on the left or right. To do this You must set both divs "<div id="sub" class="...">" and "<div id="main" class="...">"
with proper classes. Available variations for html pages (like about, contact etc.) are: 
1. <div id="sub" class="sub-left"> & <div id="main" class="main-right"> - places the submenu on the left of main content
2. <div id="sub" class="sub-right"> & <div id="main" class="main-left"> - places the submenu on the right of main content */
.main-right {border-left:1px dotted #c0c0c0;float:left;padding-left:40px;} /* sets the main content on the left side  */
.main-left {
	border-right:1px dotted #c0c0c0;
	float:right;
	padding-right:40px;
} /* sets the main content on the right side */
.sub-left {float:left;padding-right:40px;} /* sets the sub menu to the left side */
.sub-right {
	float:right;
	padding-left:30px;
} /* sets the sub menu to the right side */

.lights {background:url(../img/bg-lights.png) no-repeat;width:952px;height:43px;margin:0 auto;}
.float-left {float:left;} /* sets float to left on any element */
.float-right {float:right;} /* sets float to right on any element */
img.float-left {margin-right:8px;} /* sets the margin right to 8px for images which have float-left class */
img.float-right {margin-left:8px;} /* sets the margin left to 8px for images which have float-right class */

blockquote {
	background:url(../img/quote-upper.jpg) no-repeat top left;
	margin:20px 0px 20px 0px;
	padding:10px 0px 0px 60px;
	line-height:18px;
	font-style:italic;
	font-size: 12px;
}
blockquote div {
	background:url(../img/quote-lower.jpg) no-repeat bottom right;
	padding:0px 10px 10px 0px;
	color:#34C4C6;
	margin-right: 150px;
}
/* end */

/* inner background for whole body container */
#body-inner {background:url(../img/bg-body-inner.png) no-repeat top center;}

/* top section with logo & menu 
#top-menu li.hover - image that appears when you point your cursor at the link like home, about, solutions etc.
#top-menu li.selected - image that appears when the menu item has a class="selected" tag.
*/
#logo {float:left;margin:20px 0px 0px 0px;}
#top {
	background:url(../img/bg-nav-menu.gif) repeat-x;
	height:93px;
	border-bottom:1px solid #03a8cb;
	text-align: center;
	font-size: 28px;
	font-family: "Times New Roman", Times, serif;
	padding-top: 0px;
	margin-top: 1px;
	color: #FFFFFF;
	padding-bottom: 5px;
	margin-bottom: 5px;
}
#top-menu {
	margin:20px 0px 0px 0px;
	padding:0;
	list-style:none;
	text-align:center;
	float:left;
	font-size: 12px;
	font-family: Geneva, Arial, Helvetica, sans-serif;
}
#top-menu li {float:left;background:none;width:94px;height:28px;position:relative;margin:0px 0px 0px 6px; font-size: 12px;}
#top-menu li a {
	z-index:20;
	display:block;
	height:22px;
	position:relative;
	color:#fffffe;
	font-weight:normal;
	padding:8px 0px 0px 0px;
	cursor:pointer;
}
#top-menu li a:hover {
	text-decoration:none;
	cursor:pointer;
	font-size: 12px;
}
#top-menu li .hover {background:url(../img/bg-top-menu-li.jpg) no-repeat top center;position:absolute;width:94px;height:28px;left:0;top:0;z-index:0;display:none;cursor:pointer;}
#top-menu li.selected {background:url(../img/bg-top-menu-li.jpg) no-repeat top center;cursor:pointer;}
/* end */

/* normal slider delivered by the "Easy Slider" mechanism 
most important variables are:
#slider - width:930px; - this is the width of the slider space
#slider li, #slider2 li - width:930px;height:250px; - this is the width and height of slided images
#slider1next - left:930px; - this is the width of the next image which is slided and needs to be same as above two variables
#prevBtn & #nextBtn - last two variables sets the next/prev arrow image position.
*/
#slider {width:930px;position:relative;margin:0 auto;padding:10px 0px 10px 0px;text-align:center;}
#slider ul, #slider li, #slider2 ul, #slider2 li{margin:0;padding:0;list-style:none;}
#slider2{margin-top:1em;}
#slider li, #slider2 li{width:930px;height:290px;overflow:hidden;}	
#prevBtn, #nextBtn, #slider1next, #slider1prev{display:block;width:80px;height:30px;z-index:1000;}	
#slider1next{left:900px;}														
#prevBtn a, #nextBtn a, #slider1next a, #slider1prev a{display:block;width:80px;height:30px;background:url(../img/btn_prev.png) no-repeat 0 0;cursor:pointer;}
#prevBtn a:hover	{display:block;width:80px;height:30px;background:url(../img/btn_prev2.png) no-repeat 0 0;cursor:pointer;}
#nextBtn a, #slider1next a{background:url(../img/btn_next.png) no-repeat 0 0;cursor:pointer;}
#nextBtn a:hover, #slider1next a{background:url(../img/btn_next2.png) no-repeat 0 0;cursor:pointer;}	
#prevBtn {float:left;margin:-35px 0px 10px 0px;padding:0px 0px 0px 0px;position:relative;}
#nextBtn {float:right;margin:-35px 0px 10px 0px;padding:0px 0px 0px 0px;position:relative;}
/* end */

/*  containers that are holding the proper background positions and spacing 
important: if you want to modify the #content tag please checkout also the IE6 css/ie.css #content tag */
#container {background:url(../img/bg-content-bottom.png) no-repeat bottom left;position:relative;}
#content {
	background:url(../img/bg-content-top.png) no-repeat top left;
	position:relative;
	z-index:20;
	min-height:730px;
}
#inner {padding:20px 40px 0px 40px;margin-bottom:20px;float:left;} /* inner container is needed because of IE6 incompatibility when placing the padding in the #content tag */
/* end */

/* boxes on the main page + left/right side preferences */
.left-side {width:516px;float:left;margin-top:20px;}
.right-side {border-left:1px dotted #c0c0c0;float:left;width:350px;margin-top:20px;}

/* common parameters for all four boxes */
#welcome h2, #services h2, #news h2, #solutions h2 {font-size:30px;position:relative;display:block;}
#welcome h2, #news h2 {padding-top:0px;margin-top:0px;}
#welcome p, #services p, #news p  {padding:0px 0px 0px 0px;}

/* welcome box */
#welcome {width:476px;border-bottom:1px dotted #c0c0c0;padding:0px 40px 40px 0px;}
#welcome span {font-weight:bold;display:block;padding:0px 0px 12px 0px;}

/* services box */
#services {
	width:476px;
	padding:0px 40px 40px 0px;
}
#services img {border:1px solid #c5c5c5;padding:8px;margin:10px 0px 0px 0px;}
#services ul {
	padding:18px 0px 18px 0px;
	font-size: 14px;
	line-height: 20px;
	color: #999999;
}
#services li {background:url(../img/ul-li-a-mini.jpg) no-repeat 0px 6px;padding:0px 0px 0px 12px;line-height:18px;}
.imm_news{ float:left; margin:0px;}
/* news box */
#news {border-bottom:1px dotted #c0c0c0;padding:0px 0px 40px 40px;}
#news a {display:block;}
#news p.bordered {border-bottom:1px dotted #c0c0c0;padding:0px 0px 20px 0px;margin:0px 0px 20px 0px;}

/* solutions box */
#solutions {padding:20px 0px 0px 40px;}
#solutions p {padding:0px 0px 20px 0px;}
#solutions img {border:1px solid #c5c5c5;padding:8px;float:left;margin:0px 10px 0px 0px;}
#solutions a {display:block;}
/* end */


/* about page divs */
#header {
	padding:0px 0px 35px 0px;
	border-bottom:1px dotted #c0c0c0;
	height: auto;
}
#header img {float:left;border:1px solid #c5c5c5;padding:8px;margin:0px 8px 0px 0px;}
#header span {font-weight:bold;padding:0px 0px 12px 0px;display:block;}
#header p {padding:0px 0px 0px 0px;}
#multi {
	margin-left:-70px;
	float:right;
	margin-bottom:-40px;
	height: auto;
}
#multi p {
	float:left;
	width:400px;
	display:block;
	padding:0px 5px 30px 65px;
}
/* end */

/* sub menu */
#sub {
	width:234px;
	padding-top:10px;
	height: auto;
}
#sub h2 {font-size:30px;}
#sub h3 {font-size:24px;}
#sub hr {margin:30px 0px 20px 0px;}
#sub p {padding:0px 0px 0px 0px;}
#sub ul {padding:10px 0px 0px 0px;}
#sub ul li {background:url(../img/ul-li-a-mini.jpg) no-repeat 0px 6px;padding:0px 0px 0px 12px;line-height:18px;}
/* end */

/* main content */
#main {
	width:556px;
	padding-top:15px;
	padding-bottom:15px;
	padding-right: 0px;
	margin-right: 0px;
	height: auto;
}
#main p {padding:0px 0px 0px 0px;}
#main img {
	border:1px solid #c0c0c0;
	padding:8px;
}
#main .images {
	padding:20px 0px 20px 20px;
	width: auto;
	height: auto;
}
/* end */

/* services subpage - the player container */
#player {padding:0px 0px 20px 0px;}
#player img {border:0px;padding:0px;}
/* end */

/* the gallery script for works subpage */
#gallery-container {width:552px;position:relative;}
.gallery_images {margin:0px;padding:0px;cursor:pointer;}
.gallery_images li {width:100px;float:right;padding:0px 0px 30px 25px;display:block;} /* sets the width of mini image */
.gallery_images li img {display:block;float:left;}
.gallery_images .selected {background:#c7c7c7;} /* background color for selected image */
.gallery_images img {position:relative;z-index:200;}
.gallery {
	padding:0px 18px 0px 0px;
} /* sets the margin of mini images */
#main_image{height:300px;} /* main image container */
#main_image img{margin-bottom:-5px;}
/* end */

/* blog */
#blog h2 {
	padding:10px 0px 10px 10px;
	background-color: #7CC9CB;
	height: 20px;
}
#blog span {
	font-size:12px;
	color:#34C4C6;
	padding:5px 0px 10px 0px;
	display:block;
}
#blog p {padding:10px 0px 0px 0px;}
#blog a.link {display:block;padding:20px 0px 0px 0px;}
#blog li {
	display:block;
	width:552px;
	border-bottom:1px dotted #c0c0c0;
	padding:0px 0px 25px 0px;
	margin:0px 0px 25px 0px;
}
#blog .navigation {border-bottom:0px;padding:0px;}
#blog h3 {padding:20px 0px 0px 0px;margin-bottom:-5px;}

#blog-comments {display:block;} /* the comments section */
#blog-comments li {border:1px solid #c0c0c0;padding:10px;margin:10px 0px 0px 0px;display:block;width:528px;}
#blog-comments span {display:block;color:#008fff;font-size:10px;}
#blog-comments img {float:left;padding:0px;margin:0px 10px 0px 0px;}
#blog-comments a {display:block;font-size:12px;padding:2px 0px 2px 0px;}
#blog-comments p {clear:both;padding:15px 0px 0px 0px;}
#blog-comments .grey {background:#f4f4f4;} /* use grey backgroud for 1,3,5 etc. user posts */

#blog-reply {display:block;} /* the reply section */
#blog-reply .head {border:0px;clear:both;}
#blog-reply h2 {padding:40px 0px 0px 0px;font-size:30px;}
#blog-reply label {display:block;padding:20px 0px 10px 0px;}
#blog-reply li {background:none;clear:both;}
#blog-reply .input-text {background:url(../img/blog-reply-input-text.jpg) no-repeat top left;width:281px;height:17px;border:1px solid #c0c0c0;padding:4px;}
#blog-reply .textarea {background:url(../img/blog-reply-textarea.jpg) no-repeat top left;width:529px;height:150px;border:1px solid #c0c0c0;padding:10px;}
#blog-reply .input-submit {background:url(../img/blog-reply-input-submit.jpg) no-repeat top left;width:94px;height:28px;border:0px;color:#fffffe;float:right;margin:10px 5px 0px 0px;cursor:pointer;}
/* end */

/* the contact form for contact subpage */
#contact-form label {display:block;padding:20px 0px 10px 0px;}
#contact-form li {background:none;clear:both;}
#contact-form .input-text {background:url(../img/blog-reply-input-text.jpg) no-repeat top left;width:281px;height:17px;border:1px solid #c0c0c0;padding:4px;}
#contact-form .textarea {background:url(../img/blog-reply-textarea.jpg) no-repeat top left;width:529px;height:150px;border:1px solid #c0c0c0;padding:10px;}
#contact-form .input-submit {
	background:url(../img/blog-reply-input-submit.jpg) no-repeat top left;
	width:94px;
	height:28px;
	border:0px;
	color:#fff;
	float:left;
	margin:10px 5px 0px 0px;
	cursor:pointer;
}
.red {color: #FF0000;display:block;}
/* end */

/* footer section */
#footer {
	background:url(../img/bg-footer.png) no-repeat top left;
	width:955px;
	height:74px;
	font-size:12px;
	color:#d5d5d5;
}
#footer .logo {float:left;padding:20px 0px 0px 40px;}
#footer-menu {
	float:left;
	padding:25px 0px 0px 40px;
	width: 500px;
}
#footer-menu li {float:left;}
#footer-menu a, #footer-menu a:hover {color:#d5d5d5;font-weight:normal;padding:0px 9px 0px 9px;}
#footer-menu a:hover {text-decoration:underline;}
#copyright {
	border-left:1px dotted #fff;
	float:right;
	font-size:10px;
	padding:4px 20px 4px 36px;
	margin:12px 0px 0px 0px;
}
#social {float:right;padding:25px 22px 0px 0px;}
#social li {float:left;padding:0px 15px 0px 0px;}
/* end */
.azzurro{ color:#24C0D9;}