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

html { background-color: #0b1314 }
body { background: #0b1314 url(../images/bg.jpg) repeat-x center bottom; color:#FFF; font-family: Helvetica, Arial, sans-serif }

#wrapbox { margin: auto; width: 700px; }
#header { height: 200px; background: url(../images/header-bg.jpg) no-repeat top center; padding-top:57px; margin-bottom:  -80px; }
#logo { width: 155px; margin: auto; }

#menu, #blendmenu { width: 370px; margin: 20px auto 20px auto; }
#menu .delimiter { float: left; margin: 0px; }
#menu ul, #blendmenu ul { float: left; list-style: none; padding: 0px 10px 0px 10px; margin: 0px; }
#menu li, #blendmenu li { float: left; padding: 0px 10px 0px 10px;}
#menu ul li img, #blendmenu ul li img { vertical-align: top; }
#previewer { margin-top:-50px; width:700px; height: 360px; background: url(../images/shadow-under.png) no-repeat bottom center; }
#content { min-height: 400px;  }
#pagetext { margin: auto 31px 35px 31px; }
#footer { height: 209px; }
#footermenu { float: left; }
#footermenu ul { list-style: none; margin: 0px; padding: 0px; }
#footermenu ul li { float: left; padding: 10px;  }
#footermenu ul li a { color: #666; font-weight: normal;}
#footermenu ul li a:hover { color: #20b7e7; text-decoration:none }
#footermenu ul li { float: left; padding: 10px; }
.example{ color:#666;}
#notfound { margin: auto; width: 350px; text-align:center; padding: 100px;  }
#notfound h1 { font-weight: bold; color:#C00; margin: auto auto 5px auto; font-size: 24px; }

#designedby { margin: 10px auto; float: right; }
.social { position: relative; top: 6px;}

#emailform input { border: none; padding: 5px; }


.portfolio_item { margin-bottom: 30px;}
.item_thumb { width: 300px; float: left; background: url(../images/item_shadow.png) bottom center no-repeat; text-align: center; padding-bottom: 40px; }
.item_details { margin-left: 15px; margin-bottom: 5px; width: 300px; float: left; }
.item_name { font-size: 14px; color: #20b7e7; }
.item_url a{ color: #20b7e7; }
.icon { position: relative; top: 4px; }

.customlist { margin-top:10px; list-style: none; }
.customlist li { background: url(../images/icons/next.png) left no-repeat; padding: 4px 0px 4px 20px; }

.demo { position: relative; top: -45px; left: 200px; }
.blendmenu a{
		display:block;
		text-indent:-9999px;
		height:21px;
		background-repeat:no-repeat;
	}

#menu_home { background-image:url(../images/menu-home.png); width:42px; }
#menu_about { background-image:url(../images/menu-about.png); width:37px; }
#menu_services { background-image:url(../images/menu-services.png); width:48px; }
#menu_portfolio { background-image:url(../images/menu-portfolio.png); width:47px; }
#menu_contact { background-image:url(../images/menu-contact.png); width: 45px; }


#menu_home_current { background-image:url(../images/menu-home-on.png); width:42px; }
#menu_about_current { background-image:url(../images/menu-about-on.png); width:37px; }
#menu_services_current { background-image:url(../images/menu-services-on.png); width:48px; }
#menu_portfolio_current { background-image:url(../images/menu-portfolio-on.png); width:47px; }
#menu_contact_current { background-image:url(../images/menu-contact-on.png); width: 45px; }


#menu_home, #menu_about, #menu_services, #menu_portfolio, menu_contact{background-position:0 0;}
#menu_home:hover,#menu_home.hover, #menu_about:hover,#menu_about.hover, #menu_services:hover,#menu_services.hover, #menu_portfolio:hover,#menu_portfolio.hover, #menu_contact:hover,#menu_contact.hover{background-position:0 -21px;}
        
.package {
	width: 200px;
	margin: 10px;
	float: left;
	text-align:center;
}

.package ul {
	margin: 0;
	padding:0;
	list-style: none;
}

.package ul li {
	margin-top: 7px;	
}

.package h2 {
	color: #3CF;
	font-size: 20px;
	margin: -10px 0px 10px 0px;
}

#product-range {
	margin-top: 40px;
	width: 750px;
}

/* Easy Slider */
	#slider { float: left; }
	#slider ul, #slider li,
	#slider2 ul, #slider2 li{
		margin:0;
		padding:0;
		list-style:none;
		}
	#slider2{margin-top:1em;}
	#slider li, #slider2 li{ 
		/* 
			define width and height of list item (slide)
			entire slider area will adjust according to the parameters provided here
		*/ 
		width:638px;
		height:303px;
		overflow:hidden; 
		}	
	#prevBtn, #nextBtn,
	#slider1next, #slider1prev{
		float: left;
		width:31px;
		height:303px;
		position:relative;
		z-index:1000;
		}	
	#nextBtn, #slider1next{ 
		
		}														
	#prevBtn a, #nextBtn a,
	#slider1next a, #slider1prev a{  
		display:block;
		position:relative;
		width:31px;
		height:303px;
		background:url(../images/arrow-prev.png) no-repeat center center;	
		}	
	#nextBtn a, #slider1next a{ 
		background:url(../images/arrow-next.png) no-repeat center center;	
		}	
		
	/* numeric controls */	

	ol#controls{
		margin:1em 0;
		padding:0;
		height:28px;	
		}
	ol#controls li{
		margin:0 10px 0 0; 
		padding:0;
		float:left;
		list-style:none;
		height:28px;
		line-height:28px;
		}
	ol#controls li a{
		float:left;
		height:28px;
		line-height:28px;
		border:1px solid #ccc;
		background:#DAF3F8;
		color:#555;
		padding:0 10px;
		text-decoration:none;
		}
	ol#controls li.current a{
		background:#5DC9E1;
		color:#fff;
		}
	ol#controls li a:focus, #prevBtn a:focus, #nextBtn a:focus{outline:none;}
	
/* // Easy Slider */