@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;font:12px Tahoma, Geneva, sans-serif;background:url(../img/bg-body.jpg) repeat-x #fff;color:#3b3b3b;}
ul,ol,li{
	list-style:none;
	padding:0;
	margin:0;
	line-height:normal;
}
img{border:0;} /* no border for all pictures */
a{text-decoration:none;color:#dbb950;font-weight:bold;}
a:hover{text-decoration:underline;color:#dbb950;font-weight:bold;}
h1,h2,h3,h4,h5 {
	font-family:"Arial Narrow", Arial, Tahoma;
	font-weight:bold;
	padding:15px 0px 15px 0px;
	margin:0;
	line-height:14px;
}
h1 {font-size:30px;}
h2 {
	font-size:24px;
	font-family: "Arial Narrow", Arial, Tahoma;
	color: #000000;
}
h3 {font-size:18px;padding-bottom:10px;}
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;}

/* 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:40px;} /* 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;}
blockquote div {background:url(../img/quote-lower.jpg) no-repeat bottom right;padding:0px 60px 10px 0px;color:#dbb950;}
/* 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:8px 0px 0px 0px;}
#top {background:url(../img/bg-nav-menu.gif) repeat-x;height:87px;border-bottom:1px solid #124973;}
#top-menu {margin:30px 0px 0px 0px;padding:0;list-style:none;text-align:center;float:right;}
#top-menu li {float:left;background:none;width:94px;height:28px;position:relative;margin:0px 0px 0px 6px;}
#top-menu li a {z-index:20;display:block;height:22px;position:relative;color:#fffffe;font-weight:normal;padding:6px 0px 0px 0px;cursor:pointer;}
#top-menu li a:hover {text-decoration:none;cursor:pointer;}
#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:320px;}
#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:20px 40px 40px 0px;}
#services img {border:1px solid #c5c5c5;padding:8px;margin:10px 0px 0px 0px;}
#services ul {padding:18px 0px 18px 0px;}
#services li {background:url(../img/ul-li-a-mini.jpg) no-repeat 0px 6px;padding:0px 0px 0px 12px;line-height:18px;}

/* 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;}
#header img {
	float:left;
	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;}
#multi p {float:left;width:400px;display:block;padding:0px 5px 40px 65px;}
/* end */

/* sub menu */
#sub {width:234px;padding-top:10px;}
#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;
	color: #dbb950;
}
#sub ul li {
	padding:0px 0px 0px 0px;
	line-height:18px;
}
/* end */

/* main content */
#main {width:556px;padding-top:15px;padding-bottom:15px;}
#main p {padding:0px 0px 0px 0px;}
#main img {border:1px solid #c0c0c0;padding:8px;}
#main .images {padding:20px 0px 20px 0px;}
/* 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:0px 0px 8px 0px;}
#blog span {font-size:10px;color:#dbb950;padding:0px 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:#dbb950;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:right;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:10px;color:#dbb950;}
#footer .logo {float:left;padding:20px 0px 0px 40px;}
#footer-menu {float:left;padding:25px 0px 0px 40px;}
#footer-menu li {float:left;}
#footer-menu a, #footer-menu a:hover {color:#dbb950;font-weight:normal;padding:0px 9px 0px 9px;}
#footer-menu a:hover {text-decoration:underline;}
#copyright {border-left:1px dotted #646464;float:right;font-size:10px;padding:4px 40px 4px 56px;margin:12px 0px 0px 0px;}
#social {float:right;padding:25px 22px 0px 0px;}
#social li {float:left;padding:0px 15px 0px 0px;}
.appcenter
{
margin:auto;
}
/* end */