@import url(reset.css);
@import url(text.css);
@import url(960.css);

body{ background:url(../img/body-bg.jpg) scroll 0%; color:#666; font-size:62.5%;}

#page{background:#FFF url(../img/);position:relative; border:5px solid #ececec; border-top-width:0;}

#header{ position:relative; padding-top:10px; height:120px;}
	#logo{width:290px; height:100px; float:left; position:relative; left:20px; top:-20px;}
	#strapline{width:406px; height:31px; float:right; position:relative; left:-20px; top:30px;}

	#navigation{border:1px solid #CCC; border-left-width:0; border-right-width:0; position:relative; }
		
	ul#menu {
	margin: 0;
	padding: 0;
	list-style: none;
	float: left;
	font-size: 1.1em;
}
ul#menu li{
	margin: 0;
	padding: 0;
	overflow: hidden;  /*--Important - Masking out the hover state by default--*/
	float: left;
	height:40px;
}
ul#menu a, ul#menu span { /*--The <a> and <span> share the same properties since the <span>  will be a duplicate of the <a> tag--*/
	padding: 10px 40px;
	float: left;
	text-decoration: none;
	color: #fff;
	background: url(../img/b_bg.gif) repeat-x;
	text-transform: uppercase;
	clear: both;
	width: 100%;
	height: 20px;
	line-height: 20px; /*--Vertical alignment of text--*/
}
ul#menu li.last a, ul#menu li.last span{padding:10px 43px 10px 41px;}
ul#menu a{ /*--This is basically the hover state of navigation--*/
	color: #555;
	background-position: left bottom;
}
ul#menu span{ /*--Default state of navigation--*/
	background-position: left top;
}


	
#left{  padding:20px 10px; width:630px; float:left; margin-right:20px;}
#left img{float:right; margin:0 0 10px 10px;}
#home #left{padding-top:0;}
#right{width:250px; float:left; padding:20px 10px;}
#feature{background:url(../img/feature-banner.jpg) no-repeat; height:200px; width:960px; margin-bottom:20px;}

.project{ padding:10px 0; border-bottom:2px solid #d9d9d9; margin-bottom:10px;}
.project img{ float:left; border:2px solid #d9d9d9; padding:5px; background:#fff; margin-right:10px;}
.project p{}
.project h5{}

#content{background:#FFF url(../img/content-top.gif) repeat-x; background-position:top left;}

#home-calltos, .services{list-style:none; margin-bottom:0;}
#home-calltos li, .services li{margin-left:0; display:block; background:#fff; padding:5px; margin-bottom:10px; border-bottom:1px dotted #CCC;}
#home-calltos li.last{margin-bottom:0;}
#home-calltos li a{text-decoration:none; padding-left:20px; background-position:center left; height:16px; padding-bottom:5px; padding-top:3px;}
#home-calltos li a#services{background:url(../img/icons/pencil.png) no-repeat;}
#home-calltos li a#about{background:url(../img/icons/about.png) no-repeat;}
#home-calltos li a#contact{background:url(../img/icons/contact.png) no-repeat;}

#home-calltos li a:hover{text-decoration:underline; color:#000000;}
#content a{color:#4690BB;}
#welcome{margin-top:10px; margin-bottom:10px;}
#latest-work{margin-top:10px; background:#79C1CF url(../img/latest-work-bg.jpg) repeat-x;border:1px solid #4690bb; margin-bottom:10px;}
#latest-work p{color:#fff; font-size:14px;}
#work, #description, #bottom-left, #bottom-right{padding:10px;}
#description{padding-bottom:0;}
#footer{border-top:1px solid #CCC; padding:10px 0; width:98%; margin: 0 auto;}
#footer a{color:#4690BB;}
#footer p{margin-bottom:0;}

/* Accordion
----------------------------------*/
.ui-accordion .ui-accordion-header { cursor: pointer; position: relative; margin-top: 1px; zoom: 1; }
.ui-accordion .ui-accordion-li-fix { display: inline; }
.ui-accordion .ui-accordion-header-active { border-bottom: 0 !important; }
.ui-accordion .ui-accordion-header a { display: block; font-size: 1em; padding: .5em .5em .5em 2.2em; }
.ui-accordion .ui-accordion-header .ui-icon { position: absolute; left: 1px; top: 50%; margin-top: -8px; }
.ui-accordion .ui-accordion-content { padding: 1em 2.2em; border-top: 0; margin-top: -2px; position: relative; top: 1px; margin-bottom: 2px; overflow: auto; display: none; }
.ui-accordion .ui-accordion-content-active { display: block; }
.ui-icon-circle-arrow-e{background:url(../img/icons/down.png); height:16px; width:16px;}
.ui-icon-circle-arrow-s{background:url(../img/icons/up.png); height:16px; width:16px;}



/*useful classes*/

.floatl{float:left; }
.floatr{float:right; }
.action{padding:5px; background:#f9f9f9; border:1px solid #CCC; margin-bottom:10px;}
.grey-box{background:#f9f9f9; border:1px solid #CCC;}

.clearfix:after {
	content: ".";
	display: block;
	clear: both;
	visibility: hidden;
	line-height: 0;
	height: 0;
}
 
.clearfix {
	display: inline-block;
}
 
html[xmlns] .clearfix {
	display: block;
}
 
* html .clearfix {
	height: 1%;
}

#product-1, #product-2{margin-bottom:20px;}
/*for fun*/
.rounded-small{
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-border-radius: 5px;

}

/* Contact Form Styles*/
#contact-form{border:1px solid #CCC; background:#f9f9f9; padding:10px;}
		form#contact-form label{width:50%;float:left; color:#606060; font-size:1.3em;}
		form#contact-form div{margin-bottom:5px;}
		form#contact-form input{ border:1px solid #606060; float:left; padding:5px; height:15px; width:240px; margin-bottom:5px;}
		form#contact-form textarea{ border:1px solid #606060; float:left; padding:5px;  width:240px; margin-bottom:5px;}
		form#contact-form input#submit{ width:100px; height:40px; padding:10px; clear:both; margin-bottom:20px;}
		span.blue{color:#6392C0; font-weight:700;}
		
		#alert h4.warning{background:#FEEFB3; color:#D2AC5F; border:1px solid #D2AC5F; padding:5px; width:90%; margin-bottom:5px;}
#alert h4.success{background:#CEE6C3; color:#1E9145; border:1px solid #1E9145; padding:5px; width:90%; margin-bottom:5px;}

.data{}
.data tr{}
.data td{padding:5px; font-size:1.2em;}
.data th{ padding:5px; font-weight:700; text-align:left; font-size:1.2em; background:#5C8DA9; color:#FFF;}

.odd{background:#f9f9f9;}
#sitemap ul{font-size:1em; margin-bottom:0;}