@import "reset.css"; /* Imports the reset.css */

body { 
	background: url(../images/bg.png) repeat-x #656565; /* This is the topbar and header background */
	font-family: Arial,Helvetica Neue,Helvetica;
	font-size:12px;
	color:#666666;
}

	/* Text */
		p { margin-bottom: 0.6em; line-height: 17px;}
		a { color: #444343; font-weight: bold; text-decoration: none; } /* Links */
		a:hover { text-decoration: underline; }
		
		/* Headings */
		h2 {
			font: 28px Arial, Helvetica, sans-serif;
			color: #12b881;
			letter-spacing: -1px;
			border-bottom: 1px dotted #b7b7b7;
		}
		h3 {
			font: 28px Arial, Helvetica, sans-serif; 
			font-size: 22px;
			color: #444343;
			letter-spacing: -1px;
			border-bottom: 1px dotted #b7b7b7;
		}
		h4 { font-size: 18px; margin: 10px 0 5px;}
	    h5 { font-size: 16px; margin: 10px 0 5px;}
	    h6 { font-size: 16px; margin: 15px 0 5px; font-family:Georgia, "Times New Roman", Times, serif; font-style:italic; color:#12B881;}
		
#container{ 
	width: 982px; 
	margin: 0 auto -31px;
	padding:0 20px 0 25px;
	background:url(../images/white-panel-bg.png) repeat-y;
	} /* -31px is the height of the footer and push */



#footer, #push { height: 31px; } /* The push and footer height must be the same */
#push { margin-top: 40px; }


/* Topbar */
#topbar {
	color: #fff;
	font-weight: bold;
	height: 35px;
	line-height: 35px; /* Vertical centers the text */
	overflow: hidden;
}
#topbar p { margin: 0; 	line-height: 35px;} /* Remove margin-bottom: 0.6em; from p elements inside #topbar */
.top-content { width: 950px; }
#topbar p.twitter a{ 
	background: url(../images/twitter.png) no-repeat right; /* The Twitter Bird */ 
	color: #fff;
	padding: 10px 36px 10px 0;
}
#topbar p.email-us { margin-right: 20px;}
#topbar p.email-us a { color: #dde78c; } /* Mail text color */

	/* Search form */
	#searchform { float: right; margin-top: 4px; width: 220px;}
	#searchform input.searchfield, #searchform #searchsubmit { border: none; float: left; width: auto;}
	/*  The input field */
	#searchform input.searchfield {
		background: url(../images/search_input.png) no-repeat;
		padding: 5px 0 0 8px;
		height: 21px; /* Will be 26px with padding */
		width: 161px; /* Will be 169px with padding */
	}
	/* Search button */
	#searchform #searchsubmit { 
		background: url(../images/search_submit.png) no-repeat; 
		margin-left: 8px;
		height: 28px;
		width: 43px;
		text-indent: -9999px; /* Push the text away */
	}

/* Header */

#header {
	height: 160px;
	position: relative;
	border-bottom:1px #CCCCCC dotted;
}
#header #logo { float: left; margin-top: 0; width: auto;}
#header #logo h1 a{ 
	background: transparent url(../images/logo.png) no-repeat;
	color: #343434; /* Color of the text if you remove the logo */
	display: block; 
	font: 48px Georgia, Arial, Times, serif; 
	height: 106px; /* Height of logo.png */
	width: 966px; /* Width of logo.png */
	text-indent: -9999px; /* Push the text away */
}
#header #logo p.tagline{ 
	font: 14px Georgia, Arial, Times, serif;
	float: right;
	margin: -7px 0 0;
	width: auto;
}

/* Navigation */
ul#nav { 
	position: absolute;
	bottom: 0; right: 0;
}
ul#nav li { 
	background: url(../images/menu_li.png) repeat-x;
	border: 1px solid #bcbcbc;
	border-bottom: none; 
	font-size: 12px;
	float: left; 
	height: 28px;
	line-height: 28px;
	padding: 0 25px;
	margin: 0 3px 0 0;
	width: auto;
	position: relative;
	text-shadow: #000 0 1px 0;
	
}
ul#nav li.last { margin-right: 0; } /* The last navigation li have the class "last" */
ul#nav li a { color: #fff; } /* Color of the navigation text */

	/* Active page */
	ul#nav li.active {
		background: url(../images/menu_li_active.png) repeat-x;
		border: 1px solid #fff;
		border-bottom: none;
		text-shadow: none;
	}
	ul#nav li.active a{ color: #363636;}
	
	/* 2. level */
	ul#nav li ul{ 
		visibility: hidden;
		background: #444343 url(../images/menu_li.png) repeat-x bottom;
		position: absolute; 
		top: 27px; 
		left: 0; 
		z-index:5;
		width:200px;
		
	}
	ul#nav li ul li{
		background: none;
		border: none;
		border-top: 1px solid #858484;
		margin: 0 0px -1px 0;
		float: none; 
	}
	ul#nav li.active ul li{ border: none;}
	ul#nav li.active ul li a{ color: #fff;}



/* Top section */
#top-section { margin-top: 55px; }
#top-section .top-image { float: left; width: 590px; height:275px; }
/*#top-section img { border: 3px solid #343434; } /* The image border */
#top-section .top-info{ float: left; margin-left: 40px; height: 200px; width: 310px; position: relative;}
#top-section h2 { margin-bottom: 15px; }

	/* Read more button */
	a.readmore { position: absolute; bottom: 0; left: 0; }

/* Main */
#main {
	float: left;
	margin-top: 0;
	width: 600px; 
}
#main p { text-align:left; }
#main img.alignleft, #main img.alignright { border: 1px solid #dedede; padding: 4px; }
#main a:hover img.alignleft, #main a:hover img.alignright { border: 1px solid #8A8A8A;}
	/* Main headings */
	#main h2 { margin-bottom: 15px; margin-top:20px; }
	#main h3 { margin: 20px 0 10px; }
	#main h4.btn { float: left; padding: 5px 20px; }
	
	/* Main lists */
	#main ul, #main ol { font-size: 12px; margin: 5px 0 5px 10px;}
	#main ul li, #main ol li { list-style: inside; line-height: 20px; border-bottom: 1px dotted #dedede;  } 
	#main ul li{ list-style: url(../images/list_bullet.png);}
	#main ol li{  list-style: decimal; }
	

/* Services */
	
h3.services { margin-top: 20px; }
#main ul.services { margin: 10px 0 0 5px; width: 450px;}
#main ul.services li{ color: #595959; margin-bottom: 30px;  line-height: 20px; border-bottom: none; list-style: none;  }
#main ul.services li:hover{ color: #101010; }
#main ul.services li strong{ color: #101010; }
#main li.service1, li.service2, li.service3, li.service4, li.service5 {  padding: 7px 0 0 40px; }

#main ul.services li.service1 {
	background: url(../images/service-icons/money.png) no-repeat left center; 
}
#main ul.services li.service2 {
	background: url(../images/service-icons/web.png) no-repeat left center; 
}
#main ul.services li.service3 {
	background: url(../images/service-icons/users.png) no-repeat left center; 
}
#main ul.services li.service4 {
	background: url(../images/service-icons/clock.png) no-repeat left center; 
}
#main ul.services li.service5 {
	background: url(../images/service-icons/favorite.png) no-repeat left center; 
}

	/* Gallery */
	
	div.gallery { overflow: hidden; }
	div.gallery img { margin: 0 5px 5px 0; }
	div.gallery-nav{  font: 14px Arial, Helvetica, sans-serif;  margin: 25px 8px 15px 0;} /* The gallery navigation */
	div.gallery-nav a {font-weight: normal; }
	
		/* The Gallery Slider */

 		/* These 2 lines specify style applied while slider is loading */
		.csw {width: 540px; height: 465px; }
		.csw .loading {margin: 200px 0 300px 0; text-align: center; }
 
		.stripViewer { /* This is the viewing window */
			position: relative;
			overflow: hidden; 
			width: 540px; /* Also specified in  .stripViewer .panelContainer .panel  below */
			height: 465px;
			clear: both;
		}
		
		.stripViewer .panelContainer { /* This is the big long container used to house your end-to-end divs. Width is calculated and specified by the JS  */			position: relative;
			left: 0; top: 0;
			width: 100%;
		}
		
		.stripViewer .panelContainer .panel { /* Each panel is arranged end-to-end */
			float:left;
			height: 100%;
			position: relative;
			width: 540px; /* Also specified in  .stripViewer  above */
			
			
		}
		
		.stripNav { /* Removes the tab menu */
			display: none;
		}
	


/* Sidebar */

#sidebar {
	border-left: 1px solid #dedede;
	float: right;
	margin-top: 55px;
	width: 280px; /* 300px with padding */ 
	padding: 10px 22px 25px 20px; /* I add some padding so there's a little space between the top and bottom of the left border and text */
}
#sidebar h3 { border-bottom: none; margin-bottom: 12px; }
#sidebar .box { margin-bottom: 35px; border-bottom: 1px dotted #dedede; padding-bottom: 17px;}
#sidebar p { line-height: normal; padding-right:10px;}
#sidebar ul li {
	margin-left: 20px;
	margin-bottom:7px;
	line-height: 14px;
	padding-right:10px;
	font-size:12px;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	list-style-image:url(../images/arrow-bullet.gif);
}
.sidbar-ad{
	font-family:Georgia, "Times New Roman", Times, serif;
	font-size:16px;
	color:#999999;
	font-style:italic;
}

#sidebar img.alignleft { margin-right: 5px; }
#sidebar img.alignright { margin-left: 5px; }

	/* Ads area */
	.ads-area { margin-top: 30px; }
	.ads-area img.alignleft{ margin: 0 5px 5px 0;}
	
/* Footer */
#footer {
	background: url(../images/footer_bg.png) repeat-x;
	color: #777;
	font-size: 11px;
} 
#footer-inner { width: 940px; margin: 0 auto; }
#footer p { margin: 0; line-height: 31px; /* Height of footer (look on about line 37) */}
#footer a { color: #777;font-weight: normal; }
#footer a:hover { color: #2dcb96; text-decoration: none;}


/* Form elements and contactform */
form#contactform { margin-top: 25px; }
form#contactform p{ margin-bottom: 4px; }
form label {
	color: #829107;
	font-weight: bold;
}

form input[type=text] { /* Text input fields */
	border: 1px solid #d3d3d3;
	padding: 4px 72px 4px 5px;
	margin-bottom: 12px;
}
form input[type=text]:focus, form input[type=text]:hover, form textarea:focus, form textarea:hover{
	border: 1px solid #B2B2B2;
}
form label.error { /* Error */
	background: none;
	border: none;
	font-weight: normal;
}
form input[type=text].error, form textarea.error {
	border: 1px solid #C00;
	padding: 4px 64px 4px 5px;
	font-family: Arial, Helvetica, sans-serif;
}
form textarea {
	border: 1px solid #d3d3d3;
	font: 12px Arial, Helvetica, sans-serif;
	padding: 4px 5px;
	margin-bottom: 12px;
	width: 368px; /* Will be 380px with padding and border */
	overflow: auto;
	-moz-box-sizing: border-box;   
	-webkit-box-sizing: border-box;   
	-ms-box-sizing: border-box;   
	box-sizing: border-box;   
}

form input.btn { /* The submit button */
	border: 1px solid #89933d; 
	padding: 4px 12px;
	margin-bottom: 10px;
}
form input.btn:hover {  border: 1px solid #727a32; }
p.human { display: none; } /* Hide the human text field */

	/* Different things */
	.aligncenter { display: block; margin-left: auto; margin-right: auto; }
	.alignleft { float: left; }
	.alignright{ float: right; }
	img.alignleft { float: left; margin-right: 10px; }
	img.alignright { float: right; margin-left: 10px;}
	
	.clear { clear: both; }
	
	/* Give some things attention to your users - Just give a element a class - For example <p class="error">Some error text!</p>*/
	.warning, .alert, .error, .success, .download {
		padding: 6px 9px;
		font-family: Georgia, "Times New Roman", Times, serif; 
		/* I think it looks better with Georgia instead of Arial, just delete this line if you dont' */
	}
	.warning, .alert { background: #fffbbc; border: 1px solid #E6DB55; }
	.error { background: #ffebe8; border: 1px solid #C00; }
	.success, .download{ background: #e7f7d3; border: 1px solid #6c3; }
	
	/* Buttons */
	.btn {
		background: #444343 url(../images/btn_bg.png) repeat-x; 
		border: 1px solid #000; 
		color: #fff;
		padding: 4px 12px;
		text-shadow: #444343 0 1px 0;
		border-radius: 5px; /* Rounded corners - Currently not supported by any browser */
		-moz-border-radius: 5px; /* Rounded corners for Firefox */
		-webkit-border-radius: 5px; /* Rounded corners for Safari and Chrome */
	}
	.btn:hover { border: 1px solid #000; }
	.btn a { color: #fff; }
	input[type="submit"] { cursor: pointer; } /* Gives all submit buttons a hand cursor on rollover - Not working in IE6 */
	
	
	blockquote {
		border-left: 3px solid #dde78c;
		color: #666;
		font: italic 12px Georgia, "Times New Roman", Times, serif;
		overflow: hidden;
		margin: 10px 0;
		padding-left: 9px;
	}
	code { padding: 0 3px; background: #eee; }
	pre {
		background: url(../images/pre.png) repeat;
		border: 1px solid #eee;
		padding: 9px;
		overflow-x: auto; /* Use horizontal scroller if needed*/
	}
	
	/* Table */
	
	table {	
		width: 100%;
		border:1px solid #dedede;
		margin: 10px;	
	}
	table caption{
		color: #829107;
		font-size: 18px;
		text-align:left;
		line-height:40px;
	}
	table thead th {
		background: #EAEAEA url(../images/table_head_bg.png) repeat-x; /* The background image is just a soft gradient */
		border: 1px solid #dedede;
		font-size: 12px;
		padding: 15px;
	}
	table tbody td{ 
		background: #fcfcfc;
		border-left:1px solid #dedede;
		border-bottom:1px solid #dedede;
		font-size: 12px;
		padding: 10px;
		text-align: left;
	}
	table tbody td:hover{ background: #F8F8F8;} /* Color of the hover background in tables */
	
/*TITLES*/

#welcome{ 
	display:block;
	background:url(../images/welcome.gif) no-repeat;
	width:550px;
	height:30px;
	text-indent:-99999px;
	}

#latest-news{ 
	display:block;
	background:url(../images/latest-news.gif) no-repeat;
	width:550px;
	height:30px;
	text-indent:-99999px;
	}


#featured-product-heading{
	display:block;
	background:url(../images/featured-product.gif) no-repeat;
	width:300px;
	height:24px;
	text-indent:-99999px;
	}
#testimonial-heading{
	display:block;
	background:url(../images/testimonials.gif) no-repeat;
	width:300px;
	height:24px;
	text-indent:-99999px;
	}
	
#newsletter-subs{
	display:block;
	background:url(../images/news-letter.gif) no-repeat;
	width:300px;
	height:24px;
	text-indent:-99999px;
	}
#clients-heading{
	display:block;
	background:url(../images/clients.gif) no-repeat;
	width:300px;
	height:24px;
	text-indent:-99999px;
	}





/*NEWS SCROLLER*/
#scrollup {
	position: relative;
	overflow: hidden;
	height: 200px;
	width: 300px;
}

.headline {
	position: absolute;
	top: 210px;
	left: 5px;
	height: 195px;
	width:300px;
	font-family:Georgia, "Times New Roman", Times, serif;
	font-size:12px;
	text-align:left;
}




/*TESTIMONIALS*/
ul#client-logos li img{
	border:none;
	padding: 4px;
	list-style:none;
}

#testimonial{position:relative; margin:5px 0 5px 0;}
#left-quote{ background:url(../images/quote-left.gif) no-repeat top left; height:19px; width:24px;}

#testi-text{
	background:url(../images/quote-right.gif) no-repeat bottom right;
	width:250px;
	padding:0 15px 15px 25px;
	font-family:Georgia, "Times New Roman", Times, serif;
	font-size:12px;
	color:#666666;
	}

#testi-logo{ position:relative; top:0; left:5px;}
#credits{position:relative; top:-80px; left:110px;}
#readmore{ position:relative; top:-25px; float:right;}
.title{ font-size:11px;}


/*FEATURED PRODUCT*/
#featured-product{ position:relative; float:left;}
#f-product{ float:left; border:none; margin:0 7px 7px 0;}





.infiniteCarousel {
  width: 420px;
  position: relative;
}

		.infiniteCarousel .wrapper {
		  width: 400px; /* .infiniteCarousel width - (.wrapper margin-left + .wrapper margin-right) */
		  overflow: auto;
		  min-height: 10em;
		  margin: 0 40px;
		  position:relative;
		  top: 0;
		}
		
		.infiniteCarousel ul a img {
		  border: 5px solid #8bc7b4;
		  -moz-border-radius: 5px;
		  -webkit-border-radius: 5px;
		}
		
		.infiniteCarousel .wrapper ul {
		  width: 9999px;
		  list-style-image:none;
		  list-style-position:outside;
		  list-style-type:none;
		  margin:0;
		  padding:0;
		  position: absolute;
		  top: 0;
		}
		
		.infiniteCarousel ul li {
		  display:block;
		  float:left;
		  padding: 10px;
		  height: 80px;
		  width: 110px;
		}
		
		.infiniteCarousel ul li a img {
		  display:block;
		}
		
		.infiniteCarousel .arrow {
		  display: block;
		  height: 36px;
		  width: 37px;
		  background: url(../images/arrow.png) no-repeat 0 0;
		  text-indent: -999px;
		  position: absolute;
		  top: 37px;
		  cursor: pointer;
		}
		
		.infiniteCarousel .forward {
		  background-position: 0 0;
		  right: -65px;
		}
		
		.infiniteCarousel .back {
		  background-position: 0 -72px;
		  left: 0;
		}
		
		.infiniteCarousel .forward:hover {
		  background-position: 0 -36px;
		}
		
		.infiniteCarousel .back:hover {
		  background-position: 0 -108px;
		}



#product-col-left{
	position:relative;
	float:left;
	width:300px;
	padding-left:5px;
}

#product-col-right{
	position:relative;
	float:left;
	width:200px;
	padding:25px 0 0 25px;
	margin-right:5px;
}

#download-link{
	margin-top:15px;
	border:none;
}