/* ==========  ========== */
/* ========== ========== ========== */

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

html {
height:101%;
}

body {
background:url(../images/layout/bg.jpg) top repeat-x #0b0b0b;
} bg



* {
outline:none;
}

.contentbg {
background:url(../images/layout/content.png) top repeat-y ; /* Main background area (white panel) */
}

.headerbg {
/* background:url(../images/layout/header1.png) top no-repeat; */ /* Main header background*/



}

.hidden {
display:none;
}

/* ========== Homepage ========== */

.intro {
height:215px;
position:relative;
margin-bottom:20px;
}

.intro h4 {
position:absolute;
top:115px;
left:70px;
font-size:12px;
color:#D1ECF8;
}

/* ========== ========== ========== */

#nav{
position:absolute;
top:160px;
z-index:500;
left:0px;
}

#nav, #nav ul{
 margin:0;
 padding:0;
 list-style-type:none;
 list-style-position:outside;
 position:absolute;
 line-height:25px; /*this defines the height of each element*/
 }
 
 #nav a{
 display:block;
 padding:0px 10px;
 }
 
 #nav li{
 float:left;
 position:relative;/*  opera + ie 6 need */
 }
 
  #nav li ul a{
	width:170px;
	height:auto;
	float:left;

 }
 
#nav ul {
    position:absolute;
    display:none;
	width:160px;
	top:25px;
	}

	
#nav li ul ul {
    left:160px;
	top:0;
	position:absolute;
    }
 
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li:hover ul ul ul ul{
    display:none;

    }
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li li li li:hover ul{
    display:block;

    }



#nav a{
color:#fff;
text-decoration:none;
}

#nav ul a{
background-color:#202020;
color:#fff;
}

#nav a:hover, #nav a:visited:hover {
	background-image:url(../images/layout/menu/light.png);
	color:#fff;
	background-repeat: repeat;
}


.contentwshade {
background:url(../images/layout/contentwshade.png) top no-repeat;
margin-top:-20px;
padding-top:20px;
}

.contentarea {
	padding-bottom:20px;
	background: #f3f3f3;
}

p.largetext {
font-size:12px;
color:#1B1B1B;
}

h3 {
	font-size:1.5em;
	line-height:1;
	margin-bottom:1em;
	color:#333;
	font-weight:bold;
	letter-spacing:-1px;
}

a.more {
display:block;
text-indent:-9999px;
height:24px;
width:52px;
background:url(../images/buttons/more.png) top no-repeat;
}

a.more:hover {
background-position:bottom;
}

a.view {
display:block;
text-indent:-9999px;
height:24px;
width:52px;
background:url(../images/buttons/view.png) top no-repeat;
}

a.view:hover {
background-position:bottom;
}

blockquote p {
color:#0D1820;
font-style:italic;
margin:0;
}

blockquote {
background:#EAF6FD;
border:1px solid #D1ECF8;
padding:10px 10px 10px 10px;
margin:0 0 20px 0;
}

strong.author {
font-weight:bold;
color:#300;
display:block;
padding-left:19px;
background:url(../images/icons/author.png) left no-repeat;
margin-top:10px;
font-style:normal;
}

.smallsidebar p {
font-size:11px;
color:#999;
}

.smallsidebar h5 {
margin-bottom:10px;
}

/* ========== Contact ========== */

fieldset {
border:1px solid #ccc;
}

legend {
border:1px solid #ccc;
padding:5px 10px;
font-weight:bold;
color:#300;
background:#f6f6f6;
}

label {
display:block;
font-weight:bold;
color:#333;
padding:5px 0 10px 0;
}

input, textarea {
font:120% Helvetica, Arial, sans-serif;
padding:5px;
border:1px solid #ccc;
}

input[type=submit] {
cursor:pointer;
background:#900;
border:1px solid #498929;
color:#fff;
}




/* ========== ========== ========== */

/* ========== footer ========== */

.footer {
height:180px;
background-image:url(../images/layout/footer_bg.png);
background-repeat:no-repeat;
clear:both;
vertical-align:top;
padding-top:10px;
padding-bottom:0px;
padding-left:30px;
padding-right:30px;
color:#FFF;
font-size:90%;
border-top:2px solid #999
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
    .footer { margin:0 0 0 0px }
}

.foot_head {font-size:2em;padding-bottom:4em; color:#FFF;}
.footer .nav {
text-decoration:none;
font-color:#FFF;
float:left;
margin:0;
padding-right:40px;
}
.footer .nav_end {
	text-decoration:none;
font-color:#FFF;
float:right;
text-align:right;
margin:0;
padding-left:20px;
}

.footer .nav li {
list-style:none;
float:left;
margin-right:10px;
border-right:1px solid #fff;
padding-right:10px;
}

.footer .nav a {
color:#FFF; text-decoration:none; font-weight:bold;}


.footer .nav a:hover {
color:#999; text-decoration:none;}
.footer .nav_end a {
color:#FFF; text-decoration:none; font-weight:bold;}


.footer .nav_end a:hover {
color:#999; text-decoration:none;}

.footer .nav li.last {
margin-right:0;
padding-right:0;
border-right:none;
}



/* ========== ========== ========== */

/* ========== Work ========== */

p.screenshot {
width:270px;
height:226px;
background:url(../images/layout/work.png) top no-repeat;
position:relative;
}

p.screenshot img {
position:absolute;
top:17px;
left:7px;
}

.workinfo {
	border:1px solid #E8E8E8;
	background:url(../images/layout/workinfo.png) top repeat-x;
	height:60px;
	padding-left:10px;
}

.workinfo h5 {
font-size:12px;
font-weight:bold;
color:#300;
padding-top:5px;
margin-bottom:12px;
}

.workinfo a {
color:#900;
text-decoration:underline;
padding-left:17px;
background:url(../images/icons/view.png) left no-repeat;
font-weight:normal;
}

.workinfo a:hover {
color:#666
text-decoration:none;
}

.latestwork {
margin-bottom:25px;
}

.work-large {
width:545px;
height:457px;
position:relative;
background:url(../images/layout/work-large.png) top no-repeat;
}

.work-large img {
position:absolute;
top:33px;
left:14px;
}

/* ========== ========== ========== */

/* ========== News ========== */

.newspost h4 {
border-bottom:1px solid #eee;
background:url(../images/icons/news.png) left no-repeat;
padding-left:20px;
padding-bottom:5px;
}

.newspost span.date {
float:right;
text-align:right;
padding-left:20px;
background:url(../images/icons/date.png) left no-repeat;
font-size:12px;
}

.news_img {
float: right;
border:0;
padding-left:20px;
}

.img_left {
float: left;
border:0;
padding:10px;
}
.img_right {
float: right;
border:0;
padding:10px;
}
.newspost p {
font-size:12px;
}

/* ========== ========== ========== */

/* ========== Services ========== */

ul.services {
margin:0 0 15px 0;
padding:0;
border-bottom:1px solid #E8E8E8;
}

ul.services li {
list-style:none;
background:url(../images/layout/services.png) top no-repeat;
height:21px;
margin:0;
padding:5px 0 0 30px;
font-weight:bold;
}

/* ========== ========== ========== */

/* ========== Breadcrumbs ========== */

ul.breadcrumbs {
height:43px;
background:url(../images/layout/breadcrumbs.png) top no-repeat;
margin:0 0 10px;
padding:5px 0 0 10px;
}

ul.breadcrumbs li {
list-style:none;
float:left;
padding-right:13px;
margin-right:10px;
background:url(../images/general/breadcrumb.gif) right no-repeat;
}

ul.breadcrumbs li.last {
background:none;
}

/* ========== ========== ========== */



/* ========== Copyright area ========== */

.copyright {
font-size:11px;
color:#666;
height:30px;
}

.copyright p {
padding-top:6px;
}

/* ========== ========== ========== */
/* ========== Products area ========== */

.prod_group {
	margin: 20px;
	width:auto;
	height:auto;
		
	
	}
	
.prod_grouplow {
	margin-top: 90px;
	margin:20px;
	top:50px;
	width:auto;
	height:auto;
		
	
	}
.prod_header {
border-bottom:solid #CCC;
border-width:1px;
margin-top:5px;
float:left;
width:800px;

}
.prods {
	position:relative;
	float:left;
	width:203px;
	margin-top:10px;
	margin-bottom:10px;
	margin-right:3px;
	font-size:12px;
color:#333;
height:130px;


}
.prods_tall {
	position:relative;
	float:left;
	width:203px;
	margin-top:10px;
	margin-bottom:10px;
	margin-right:3px;
	font-size:12px;
color:#333;
height:160px;


}
.prods_lge {
	position:relative;
	float:left;
	width:400px;
	margin-top:10px;
	margin-bottom:10px;
	margin-right:7px;
	font-size:12px;
color:#333;


}

.thumb {
float:left;
}
.desc_header {
margin:10px;
position:relative;
float:left;
top:10px;
}

.desc_header_desc {
	font-size:9px;
}
.desc{
position:relative;
font-size:9px;
float:left;
}

/* ========== ========== ========== */

/* ========== Header area ========== */

.header {
position:relative;
width:950px;
background:url(../images/layout/header2.png) top no-repeat; /* Main header background*/
height:237px;
z-index:500;

}

.header h1 {
font-size:30px;
color:#900;
padding-top:40px;
margin-bottom:0;
letter-spacing:-2px;
}

.header h1 a {
color:#900;
text-decoration:none;
}

.header h1 a:hover {
color:#300;
}

.header h3 {
font-size:12px;
font-weight:bold;
color:#272727;
margin:0;
padding:0;
}

.header .nav {
position:absolute;
top:150px;
margin:0 0 0 5px;
padding:0;
}

.header .nav li {
list-style:none;
float:left;
padding:9px 0px 12px 0;
margin:0 5px 0 0;
}

.header .nav li a {
padding:9px 11px 12px 11px;
font-weight:bold;
color:#ccc;
text-decoration:none;
}

.header .nav li a:hover {
background:url(../images/nav/a_hover.png) bottom no-repeat;
color:#fff;
}

body.about ul.nav li.about a, body.news ul.nav li.news a, body.work ul.nav li.work a, body.services ul.nav li.services a, body.contact ul.nav li.contact a, body.single ul.nav li.single a, body.threecolumns ul.nav li.threecolumns a, body.elements ul.nav li.elements a  {
background:white;
border-bottom:1px solid white;
color:#900;
}
/*

			Vertical Accordions
		*/
		
		.accordion_toggle {
			display: block;
			height: 30px;
			width: 100%px;
			background: url(../images/general/accordion_toggle.jpg) no-repeat top right #C4C4C4;
			padding: 0 10px 0 10px;
			line-height: 30px;
			color: #ffffff;
			font-weight: normal;
			text-decoration: none;
			outline: none;
			font-size: 12px;
			color: #000000;
			border-bottom: 1px solid #FFF;
			cursor: pointer;
			margin: 0 0 0 0;
		}
		
		.accordion_toggle_active {
			background: url(../images/general/accordion_toggle_active.jpg) no-repeat top right #db2c2c;
			color: #ffffff;
			border-bottom: 1px solid #f68263;
		}
		
		.accordion_content {
			background-color: #ffffff;
			color: #444444;
			overflow: hidden;
		}
			
			.accordion_content h2 {
				margin: 15px 0 5px 10px;
				color: #0099FF;
			}
			
			.accordion_content p {
				line-height: 150%;
				padding: 5px 10px 15px 10px;
			}
			
		.vertical_accordion_toggle {
			display: block;
			height: 30px;
			width: 100%;
			background: url(images/accordion_toggle.jpg) no-repeat top right #a9d06a;
			padding: 0 10px 0 10px;
			line-height: 30px;
			color: #ffffff;
			font-weight: normal;
			text-decoration: none;
			outline: none;
			font-size: 12px;
			color: #000000;
			border-bottom: 1px solid #cde99f;
			cursor: pointer;
			margin: 0 0 0 0;
		}

		.vertical_accordion_toggle_active {
			background: url(images/accordion_toggle_active.jpg) no-repeat top right #e0542f;
			color: #ffffff;
			border-bottom: 1px solid #f68263;
		}

		.vertical_accordion_content {
			background-color: #ffffff;
			color: #444444;
			overflow: hidden;
		}

			.vertical_accordion_content h2 {
				margin: 15px 0 5px 10px;
				color: #0099FF;
			}

			.vertical_accordion_content p {
				line-height: 150%;
				padding: 5px 10px 15px 10px;
			}
  			
		/*
			Horizontal Accordion
		*/
		
		.horizontal_accordion_toggle {
			/* REQUIRED */
			float: left;	/* This make sure it stays horizontal */
			/* REQUIRED */

			display: block;
			height: 100px;
			width: 30px;
			background: url(images/h_accordion_toggle.jpg) no-repeat top left #a9d06a;
			color: #ffffff;
			text-decoration: none;
			outline: none;
			border-right: 1px solid #cde99f;
			cursor: pointer;
			margin: 0 0 0 0;
		}
		
		.horizontal_accordion_toggle_active {
			background: url(images/h_accordion_toggle_active.jpg) no-repeat top left #e0542f;
			border-right: 1px solid #f68263;
		}
		
		.horizontal_accordion_content {
			/* REQUIRED */
			height: 100px;	/* We need to define a height for the accordion as it stretches the width */
			float: left;	/* This make sure it stays horizontal */
			/* REQUIRED */
			
			overflow: hidden;
			background-color: #ffffff;
			color: #444444;
		}
			
			.horizontal_accordion_content p {
				width: 450px;
				line-height: 150%;
				padding: 5px 10px 15px 10px;
			}
					
					
    /* Container styling*/
    #horizontal_container {
      margin: 20px auto 20px auto;
      width: 680px;   
      height: 1px;    
    }
    
    #vertical_nested_container {
      margin: 20px auto 20px auto;
      width: 620px;
    }
/* ========== ========== ========== */

#table
{font-family:"Lucida Sans Unicode", "Lucida Grande", Sans-Serif;font-size:10px;width:380px;border-collapse:collapse;text-align:left;margin:0px;}

#table td{
	border-bottom:1px solid #CCC;
	color:#666;
	padding:6px 8px;
}
	
.tablehead {
	font-size: 1.2em;
	color:#292929;
}
.tablesubhead {
	font-size: 1.1em;
	color:#2F2F2F;
}
.tablecontent {
	font-size: .8em;
	color:#2F2F2F;
}

#spectable
{font-family:"Lucida Sans Unicode", "Lucida Grande", Sans-Serif;font-size:10px;width:700px;border-collapse:collapse;text-align:left;margin:0px;}

#spectable td{
	border-bottom:1px solid #CCC;
	color:#666;
	padding:6px 8px;
}
	
.tablehead {
	font-size: 1.2em;
	color:#292929;
}
.tablesubhead {
	font-size: 1.1em;
	color:#2F2F2F;
}
.tablecontent {
	font-size: .8em;
	color:#2F2F2F;
}

#zebratable
{font-family:"Lucida Sans Unicode", "Lucida Grande", Sans-Serif;font-size:10px;width:800px;border-collapse:collapse;text-align:left;margin:0px;}

#zebratable td{
	border-bottom:1px solid #CCC;
	color:#666;
	padding:6px 8px;
}

.odd{background:#EBEBEB;}
.heading{;}
	
.tablehead {
	font-size: 1.2em;
	color:#292929;
}
.tablesubhead {
	font-size: 1.1em;
	color:#2F2F2F;
}
.tablecontent {
	font-size: .8em;
	color:#2F2F2F;
}
#largetble
{font-family:"Lucida Sans Unicode", "Lucida Grande", Sans-Serif;font-size:10px;width:820px;border-collapse:collapse;text-align:left;margin:0px;}

#pricingtable
{font-family:"Lucida Sans Unicode", "Lucida Grande", Sans-Serif; width:850px;border-collapse:collapse;text-align:left;margin:0px;}

#pricingtable td{
	border-bottom:1px solid #CCC;
	color:#666;
	padding:6px 8px;
}

    /*Downloads Page*/
	
#downloads
a {font-weight:normal; color:#666;}
a:hover {color:#900;}

.dleven{
	width:100%;
	padding:5px;
	height:auto;

	
}
.dlodd{
	width:100%;
	background-color:#E5E5E5;
	padding:5px;
	height:auto;


}
.dlprod_title{
	display:block;
	width:130px;
	color:#000;
	font-weight:bold;
	float:left;
}
.dl_prod {
	display:block;
	width: 185px;
	overflow: hidden;
	float:left;
	padding: 0 0 0 5;
	font-size:smaller;
}
.dl_prodline {
	display:block;
	width: 185px;
	overflow: hidden;
	float:left;
	padding: 0 0 0 5;
	font-size:smaller;
}

.dlimg{
	width:inherit
	margin-left:10px;
}

#contacts {
	padding: 10px;
	width: 270px;
	height: 85px;
	margin-bottom: 0px;
	background: url(/images/layout/contact_back.png) no-repeat;
	
}
#contactbutt {
	float:right;
	margin-right:25px;
}

#s3slider {
   width: 830px; /* important to be same as image width */
   height: 400px; /* important to be same as image height */
   margin-left:20px;
   position: relative; /* important */
   overflow: hidden; /* important */
}

#s3sliderContent {
   width: 830px; /* important to be same as image width or wider */
   position: absolute; /* important */
   top: 0; /* important */
   margin-left: 0; /* important */
}

.s3sliderImage {
   float: left; /* important */
   position: relative; /* important */
   display: none; /* important */
}

.s3sliderImage span {
   position: absolute; /* important */
   left: 0;
   font: 15px/20px Arial, Helvetica, sans-serif;
   font-weight:bold;
   padding: 10px 13px;
   width: 830px;
   background-color: #000;
   filter: alpha(opacity=70); /* here you can set the opacity of box with text */
   -moz-opacity: 0.7; /* here you can set the opacity of box with text */
   -khtml-opacity: 0.7; /* here you can set the opacity of box with text */
   opacity: 0.7; /* here you can set the opacity of box with text */
   color: #fff;
   display: none; /* important */
   bottom: 0;

   /*
       if you put
       top: 0; -> the box with text will be shown at the top of the image
       if you put
       bottom: 0; -> the box with text will be shown at the bottom of the image
   */
}

.clear {
   clear: both;
}