* {
	margin:0px;
	padding:0px;
}
body {
	margin:50px auto 50px auto;
	background:#010101;
}
.clear {
	clear:both;
}
.clearfix:after {
    content:"."; 
    display:block; 
    height:0; 
    clear:both; 
    visibility:hidden;
    font-family: "Times New Roman", Times, serif
}
*:focus {
    outline: none;
}
/*-------------------------WRAPPER------------------------------*/
#wrapper {
	margin:0 auto 50px auto;
	padding:50px;
	background:#010101 url('images/bg.gif') no-repeat center center;
	width:900px;
	height:440px;
}
/*-------------------------CONTENT------------------------------*/
#content {
	width:900px;
	height:440px;
}
#content .method-wrapper {
	width: 900px;
	display: block;
}
/*-------------------------FOOTER-----------------------------*/
#footer {
	margin:0 auto 0 auto;
	padding: 0 50px 0 50px;
	width: 900px;
	height: 100px;
	font:normal normal bold 12px/16px Arial;
	color:#666666;
}
#footer a {
	font:normal normal bold 12px/16px Arial;
	color:#666666;
	text-decoration:none;
}
#footer a:hover {
	text-decoration:underline;
}
#footer .copyright {
	float:left;
}
#footer .contact {
	float:right;
}
#footer .contact .orange {
	color:#e03500;
}
/*-------------------------INTRO------------------------------*/
.method img {
	display: block;
	width: 210px;
	height: 210px;
}
#intro-1.method {
	margin:0 20px 20px 0;
	padding:0;
	width:210px;
	height:210px;
	position:relative;
	float:left;
	overflow:hidden;
}
#intro-1.method .slide {
	top:0;
	margin:0 20px 20px 0;
	padding:20px;
	background:url('images/intro-2.gif') no-repeat center center;
	width:170px;
	height:170px;
	font:normal normal bold 12px/16px Arial;
	color:#eee9e7;
	position:relative;
	float:left;
}
#intro-1.method .slide h1 {
	margin:0;
	padding:0;
	font:normal normal bold 12px/16px Arial;
	color:#eee9e7;
	display:inline;
}
#intro-1.method .slide a {
	color:#eee9e7;
	font-weight: bold;
	text-decoration: none;
}
#intro-1.method .slide a:hover {
	text-decoration:underline;
}
/*-------------------------BRANDING------------------------------*/
#branding-1.method {
	margin:0 20px 20px 0;
	padding:0;
	width:210px;
	height:210px;
	position:relative;
	float:left;
	overflow:hidden;
}
#branding-1.method .slide {
	top:0;
	margin:0 20px 20px 0;
	padding:20px;
	background:url('images/branding-2.gif') no-repeat center center;
	width:170px;
	height:170px;
	font:normal normal bold 12px/16px Arial;
	color:#eee9e7;
	position:relative;
	float:left;
}
#branding-1.method .slide h2 {
	margin:0;
	padding:0;
	font:normal normal bold 12px/16px Arial;
	color:#eee9e7;
	
	display:inline;
	
}
#branding-1.method .slide a {
	color:#eee9e7;
	font-weight: bold;
	text-decoration: none;
}
#branding-1.method .slide a:hover {
	text-decoration:underline;
}
/*-------------------------WEB DESIGN------------------------------*/
#web-design-1.method {
	margin:0 20px 20px 0;
	padding:0;
	width:210px;
	height:210px;
	position:relative;
	float:left;
	overflow:hidden;
}
#web-design-1.method .slide {
	top:0;
	margin:0 20px 20px 0;
	padding:20px;
	background:url('images/web-design-2.gif') no-repeat center center;
	width:170px;
	height:170px;
	font:normal normal bold 12px/16px Arial;
	color:#eee9e7;
	position:relative;
	float:left;
}
#web-design-1.method .slide h2 {
	margin:0;
	padding:0;
	font:normal normal bold 12px/16px Arial;
	color:#eee9e7;
	
	display:inline;
	
}
#web-design-1.method .slide a {
	color:#eee9e7;
	font-weight: bold;
	text-decoration: none;
}
#web-design-1.method .slide a:hover {
	text-decoration:underline;
}
/*-------------------------MARKETING------------------------------*/
#marketing-1.method {
	margin:0 0 20px 0;
	padding:0;
	width:210px;
	height:210px;
	position:relative;
	float:left;
	overflow:hidden;
}
#marketing-1.method .slide {
	top:0;
	margin:0 0 20px 0;
	padding:20px;
	background:url('images/marketing-2.gif') no-repeat center center;
	width:170px;
	height:170px;
	font:normal normal bold 12px/16px Arial;
	color:#eee9e7;
	position:relative;
	float:left;
}
#marketing-1.method .slide h2 {
	margin:0;
	padding:0;
	font:normal normal bold 12px/16px Arial;
	color:#eee9e7;
	
	display:inline;
	
}
/*-------------------------HOVER IMAGES-----------------------------*/
div.rollover a.portfolio {
	width: 170px;
	height: 170px;
	cursor: pointer;
	text-decoration: none;
	border: 0;
	display: block;
} 
div.rollover span {
	width: 170px;
	height: 170px;
	overflow: hidden;
	display: block;
}
div.rollover span img {
	border: 0;
}
div.rollover a.portfolio:hover {
	background: #333;
}
/*----------------------------------------*/
div.rollover a.portfolio {
	width: 170px;
	height: 170px;
	cursor: pointer;
	text-decoration: none;
	border: 0;
	display: block;
} 
div.rollover span {
	width: 170px;
	height: 170px;
	overflow: hidden;
	display: block;
}
div.rollover span img {
	border: 0;
}
div.rollover a.portfolio:hover {
	background: #333;
}

/*-------------------------PORTFOLIO A------------------------------*/

#portfolio-a-1 {
	margin:0 20px 0 0;
	padding:20px;
	background:url('images/portfolio-a-1.gif') no-repeat;
	width:170px;
	height:170px;
	float:left; 
}
/*-------------------------PORTFOLIO B------------------------------*/
#portfolio-b-1 {
	margin:0 20px 0 0;
	padding:20px;
	background:url('images/portfolio-b-1.gif') no-repeat;
	width:170px;
	height:170px;
	float:left;
}
/*-------------------------PORTFOLIO C------------------------------*/
#portfolio-c-1 {
	margin:0 20px 0 0;
	padding:20px;
	background:url('images/portfolio-c-1.gif') no-repeat;
	width:170px;
	height:170px;
	float:left;
}
/*-------------------------LETS CHAT------------------------------*/
#lets-chat-1 {
	margin:0 0 0 0;
	padding:20px;
	background:#e03500;
	width:170px;
	height:170px;
	float:left;
}
/*-------------------------POPUP BOX------------------------------*/
#popup-contact-holder{
	display: none;
	position:absolute;
	margin:0 0 0 -405px;
	padding:20px;
	width:380px;
	height:446px;
	top: 150px;
	left:49%;
	background:#020202;
	opacity:0.6;
	filter:alpha(opacity=60);
	z-index: 300;
}
#popup-contact-content {
	display: none;
	position:absolute;
	margin:0 0 0 -385px;
	padding:20px;
	width:340px;
	height:406px;
	top: 170px;
	left: 49%;
	background:#eee9e7;
	opacity:0.95;
	filter:alpha(opacity=95);
	z-index: 600;
}
#popup-find-us-holder{
	display: none;
	position:absolute;
	margin:0 0 0 25px;
	padding:20px;
	width:380px;
	height:446px;
	top: 150px;
	left:49%;
	background:#020202;
	opacity:0.6;
	filter:alpha(opacity=60);
	z-index: 300;
}
#popup-find-us-content {
	display: none;
	position:absolute;
	margin:0 0 0 45px;
	padding:20px;
	width:340px;
	height:406px;
	top: 170px;
	left: 49%;
	background:#eee9e7;
	opacity:0.95;
	filter:alpha(opacity=95);
	z-index: 600;
}
#popup-portfolio-holder{
	display: none;
	position:absolute;
	margin:0 0 500px -400px;
	padding:20px;
	width:800px;
	height:940px;
	top: 150px;
	left:49%;
	background:#020202;
	opacity:0.6;
	filter:alpha(opacity=60);
	z-index: 300;
}
#popup-portfolio-content {
	display: none;
	position:absolute;
	margin:0 0 0 -380px;
	padding:0;
	width:800px;
	height:900px;
	top: 170px;
	left: 49%;
	opacity:0.95;
	filter:alpha(opacity=95);
	z-index: 600;
}
/* commented backslash hack for ie5mac \*/ 
html, body{height:97%;} 
/* end hack */
#popup-curtain {
	display: none;
	width: 100%;
	height: 100%;
	z-index: 100;
	position: absolute;
	top: 0;
	left: 0;
}
#close {
	margin:0 0 0 400px;
	top: 131px;
	left: 49%;
	z-index:900;
	height:59px;
	width:59px;
	display:none;
	position:absolute;
}
#close-contact {
	margin:0 0 0 405px;
	top: 131px;
	left: 49%;
	z-index:900;
	height:59px;
	width:59px;
	display:none;
	position:absolute;
}

/*#close:hover {
	background:url('/images/close-hover.gif') no-repeat;
	
}*/
div.close a.close-button {
	width: 59px;
	height: 59px;
	cursor: pointer;
	text-decoration: none;
	border: 0;
	display: block;
} 
div.close span {
	width: 59px;
	height: 59px;
	overflow: hidden;
	display: block;
}
div.close span img {
	border: 0;
}
div.close a.close-button:hover {
	background: #333;
}

/*-------------------------CONTACT FORM------------------------------*/
#contact-form hr {
    margin:20px 0 20px 0;
    height:1px;
    background:#ffffff;
    border:0;
}
#contact-form p {
	font:normal normal normal 12px/18px arial;
	color:#353535;
}
#contact-form table {
    margin:0;
    padding:0;
    border:0;
    text-align:left;
    border-collapse:collapse;
    border-spacing:0;
}
#contact-form table tr {
    padding:0px;
    border:0;
    text-align:left;
}
#contact-form table tr th {
    padding-right:20px;
    padding-bottom:20px;
    width:128px;
    border:0;
    text-align:left;
    vertical-align:text-top;
    vertical-align:top;
}
#contact-form table tr td {
    padding-bottom:20px;
    width:192px;
    border:0;
    text-align:left;
    vertical-align:text-top;
    vertical-align:top;
}
#contact-form table tr th.second-last {
    padding-right:20px;
    padding-bottom:0px;
    width:128px;
    border:0;
    text-align:left;
    vertical-align:text-top;
    vertical-align:top;
}
#contact-form table tr td.second-last {
    padding-bottom:0px;
    width:192px;
    border:0;
    text-align:left;
    vertical-align:text-top;
    vertical-align:top;
}
#contact-form table tr th.last {
    padding-top:20px;
    padding-right:20px;
    padding-bottom:20px;
    width:128px;
    border:0;
    text-align:left;
    vertical-align:text-top;
    vertical-align:top;
}
#contact-form table tr td.last {
    padding-top:9px;
    padding-bottom:20px;
    width:192px;
    border:0;
    text-align:left;
    vertical-align:text-top;
    vertical-align:top;
}
#contact-form table tr td.submit {
    text-align:right;
}
#contact-form table tr td input.input-text {
    margin:0;
    padding:0;
    width:192px;
    background:transparent;
    font:normal normal normal 14px Arial;
    color:#333333;
    border:0;
    border-bottom:1px #999999 solid;
}
#contact-form table tr td textarea.textarea-text {
    margin:0;
    padding:0;
    width:192px!important;
    height:137px!important;
    background:url('images/textarea-bg.gif') repeat left top;
    font:normal normal normal 14px Arial;
    line-height:2.65em;
    color:#333333;
    border:0;
    border-bottom:0;
    overflow:hidden;
    overflow-y:hidden;
    overflow-x:hidden; 
    -moz-overflow:auto;
}
#contact-loading {
	display: none;
	position: absolute;
	width: 31px;
	height: 32px;
	margin: 0;
	padding: 0;
	left: 175px;
	top: 189px;
	z-index: 1000;
	background: url('images/loading.gif') no-repeat center top;
}
#contact-success {
	display: none;
	position: absolute;
	width: 246px;
	height: 36px;
	margin: 0 0 0 47px;
	padding: 0;
	top: 169px;
	z-index: 1000;
	background: url('images/sent.gif') no-repeat center top;
}
#contact-errors {
	display: none;
	height: 16px;
	overflow: hidden;
	color: #e03500;
	font:normal normal bold 12px/16px Arial;
	margin-bottom: 20px;
}
/*-------------------------PORTFOLIO---------------------------------*/
#portfolio-loading {
	display: block;
	position: absolute;
	width: 31px;
	height: 32px;
	margin: 0;
	padding: 189px 384px 189px 385px;;
	left: 0;
	top: 0;
	z-index: 1000;
	background: #eee9e7 url('images/loading.gif') no-repeat center center;
}
#portfolio-banner {
	display: block;
	position:relative;
	margin:0;
	padding:20px;
	width:760px;
	height:370px;
	top: 0;
	left: 0;
	background:#eee9e7;
}
#portfolio-banner .gallerylayer {
	padding:20px;
	
	background-color:#eee9e7;
	
	height:400px;
}
#portfolio-project {
	display: block;
	position:relative;
	margin:0;
	padding:20px 0 20px 0;
	width:800px;
	height:530px;
	top: 0;
	left: 0;
	background:#020202;
	font:normal normal bold 12px/16px Arial;
	color:#eee9e7;
}
#portfolio-project .col-1 {
	float: left;
	text-align: left;
	width: 570px;
	height: 530px;
	padding: 0 10px 0 0;
}
#portfolio-project .col-1 p {
	margin: 0 0 20px 0;
}
#portfolio-project .col-1 .overview {
	height: 477px;
}
#portfolio-project .col-2 {
	float: right;
	text-align:left;
	width: 210px;
	height: 530px;
	padding: 0 0 0 10px;
}
#portfolio-project .col-2 p {
	margin: 0 0 20px 0;
}
#portfolio-project .col-2 ul {
	margin: 0 0 20px 0;
	list-style: none;
}
#portfolio-project .col-2 ul li {
	padding: 0 0 0 15px;
	margin: 0;
	background: url('images/bullet.gif') no-repeat left top;
}
/***********/
#portfolio-project ul.tabs {
	margin: 0;
	padding: 0;
	float: left;
	list-style: none;
	width: 100%;
}
#portfolio-project ul.tabs li {
	float: left;
	margin: 0 20px 0 0;
	padding: 0;
}
#portfolio-project #tab-project-overview {
	background: url('images/project-overview-g.gif') no-repeat center center;
	display: block;
	width: 167px;
	height: 23px;
	text-decoration: none;
}
#portfolio-project #tab-key-features:hover {
	background: url('images/key-features-o.gif') no-repeat center center;
	cursor: default;
}
#portfolio-project #tab-key-features {
	background: url('images/key-features-g.gif') no-repeat center center;
	display: block;
	width: 115px;
	height: 23px;
	text-decoration: none;
}
#portfolio-project #tab-technology:hover {
	background: url('images/technology-o.gif') no-repeat center center;
	cursor: default;
}
#portfolio-project #tab-technology {
	background: url('images/technology-g.gif') no-repeat center center;
	display: block;
	width: 121px;
	height: 23px;
	text-decoration: none;
}
#portfolio-project #tab-project-overview:hover {
	background: url('images/project-overview-o.gif') no-repeat center center;
	cursor: default;
}
html #portfolio-project #tab-project-overview.active, html #portfolio-project #tab-project-overview.active:hover  { /*--Makes sure that the active tab does not listen to the hover properties--*/
	background: url('images/project-overview-o.gif') no-repeat center center;
}
html #portfolio-project #tab-key-features.active, html #portfolio-project #tab-key-features.active:hover  { /*--Makes sure that the active tab does not listen to the hover properties--*/
	background: url('images/key-features-o.gif') no-repeat center center;
}
html #portfolio-project #tab-technology.active, html #portfolio-project #tab-technology.active:hover  { /*--Makes sure that the active tab does not listen to the hover properties--*/
	background: url('images/technology-o.gif') no-repeat center center;
}
.tab_container {
	overflow: hidden;
	clear: both;
	float: left;
	width: 100%;
}
.tab_content {
	padding: 20px 0 20px 0;
	display: none;
}
#project-overview {
	display: block;
}
/*************** Key Features *****************/
#portfolio-project #key-features ul li {
	list-style: none;
	margin-bottom:6px;
	padding:0 0 6px 15px;
	background:url('images/bullet.gif') no-repeat left top;
	border-bottom: 1px #333333 solid;
}
#portfolio-project #key-features ul li.last {
	border-bottom:0;
}
/*************** Technologies *****************/
#portfolio-project #technology .column {
	display:inline-block;
	float:left;
	width:144px;
	margin-right: 20px;
}
#portfolio-project #technology .last {
	margin-right: 0;
}
#portfolio-project #technology .column h3 {
	font:normal normal bold 12px/16px Arial;
	border-bottom: 1px #333333 solid;
	padding-bottom: 6px;
	margin-bottom: 17px;
}
#portfolio-project #technology .column ul {
	list-style: none;
}
/*-------------------------ICONS------------------------------*/
#icons {
	margin:0 auto 100px auto;
	padding: 0 50px 100px 50px;
	width: 900px;
	height: 100px;
	font:normal normal bold 12px/16px Arial;
	color:#666666;
	text-align:right;
}
a.magento {
	width: 34px;
}
a.standard {
	width: 40px;
}
a.twitter {
	width: 58px;
}
a.icon {
	margin-left:10px;
	background:#010101;
	/*width:58px;*/
	height:40px;
	display:inline-block;
}
.resource {
	/*width: 58px;*/
	height: 40px;
	display: inline-block;
}
.resource a.icon {
	/*width: 58px;*/
	height: 40px;
	cursor: pointer;
	text-decoration: none;
	border: 0;
	display: block;
} 
.resource span {
	/*width: 58px;*/
	height: 40px;
	overflow: hidden;
	display: block;
}
.resource span img {
	border: 0;
}
.resource a.icon:hover {
	background: #333;
}