/*-------------------------------------------------------------------//
//Last Edited on August 25, 2009 by Bree [bree@trafikinteractive.com]//
//-------------------------------------------------------------------*/


/* HEADER.PHP */
html, body {
	margin:	0px 0px 0px 0px; 
	padding: 0px 0px 0px 0px;
}

body {
	background: #FFFFFF;
	border-top: 5px #000000 solid;
	font-family: Arial, Helvetica, sans-serif; /* font appears too large in IEs when set as Geneva */
}

h1, h2, h3 {
	margin:	0px 0px 0px 0px;
}

p, ul {
	line-height: 18px;
	margin:	0px 0px 10px 0px;
}

.wrapper {
	width: 895px;
	margin:	0px auto;
}

.header {
	width: 895px;
	height: 145px;
	background: none;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	position: relative;
}

	.logo {
		width: 146px;
		height: 83px;
		position: absolute;
		top: 12px;
		left: 0px;
	}

.contentWrapper {
	width: 895px;
	background: none;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
}
	

/* HEADER.PHP > .NAVIGATION */
.navHolder {
	width: 665px;
	height: 31px;
	position: absolute;
	top: 4px;
	right: 0px;
}

.navigation {
	width: 665px;
	height:	31px;
	background: url(../../images/interface/navbar.gif) no-repeat;
	margin:	0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	position: relative;
	display: block;
	z-index: 30;	
}

	.navigation li {
		float: left;
		position:absolute;
	}

	.navigation li span {
		display: none;
	}	
	
	.navigation li a { 
		height: 31px;
    		display: block;
	}
	
		.home {
			width: 70px;
			left: 0px; 
		}
		
		.about {
			width: 85px;
			left: 70px; 
		}
		
		.services {
			width: 105px;
			left: 155px; 
		}
		
		.portfolio {
			width: 110px;
			left: 260px; 
		}
		
		.blog {
			width: 70px;
			left: 370px; 
		}
		
		.links {
			width: 81px;
			left: 440px; 
		}
		
		.faq {
			width: 64px;
			left: 521px; 
		}
		
		.contact {
			width: 80px;
			left: 585px; 
		}
		
		.home a:hover, .home .selected {background:transparent url(../../images/interface/navbar.gif) -0px -31px no-repeat;}
		.about a:hover, .about .selected {background:transparent url(../../images/interface/navbar.gif) -70px -31px no-repeat;}
		.services a:hover, .services .selected {background:transparent url(../../images/interface/navbar.gif) -155px -31px no-repeat;}
		.portfolio a:hover, .portfolio .selected {background:transparent url(../../images/interface/navbar.gif) -260px -31px no-repeat;}
		.blog a:hover, .blog .selected {background:transparent url(../../images/interface/navbar.gif) -370px -31px no-repeat;}
		.links a:hover, .links .selected {background:transparent url(../../images/interface/navbar.gif) -440px -31px no-repeat;}
		.faq a:hover, .faq .selected {background:transparent url(../../images/interface/navbar.gif) -521px -31px no-repeat;}
		.contact a:hover, .contact .selected {background:transparent url(../../images/interface/navbar.gif) -585px -31px no-repeat;}
		
		
/* HEADER.PHP > .NAVIGATION DROPDOWN */

.navigation li ul {
	width:190px;
	position:absolute;
	top:31px;
	left:0px;
	display:none;
	background:#FFF;
	border-right: solid 1px #000;
	border-bottom: solid 1px #000;
	border-left: solid 1px #000;
	z-index: 40;
}

	.navigation li ul li {
		float: left;
		position: relative;
	}

		.navigation li ul li a {
			color: #000;
			text-decoration: none;
			width: 160px;
			height: 20px;
			padding: 5px 15px 5px 15px;
			display: block;
			font-size: 12px;
		}

		.navigation li ul li a:hover {
			color: #FFF;
			background: #000;
		}
	

/* PAGE CONTENT */

.contentArea {
	width: 655px;
	min-height: 550px;
  	height: auto !important;
  	height: 550px;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	float: left;
}

	
	.contentArea h2, .contentArea h3 {
		margin: 0px 0px 0px 0px;
		color: #000;
	}
	
	.contentArea h2 {
		font-size:18px;
	}
	
	.contentArea h3 {
		font-size:16px;
	}
	
	.contentArea p {
		color:#000;
	}
	
	.contentArea p a {
		color: #566c11;
		font-weight: bold;
	}
	
	.contentArea p a:hover {
		color: #000;
	}
	
	h2.heading {
		margin-bottom: 20px;
	}
	
/* INDEX.PHP */
.homeCallout {
	width: 665px;
	height: 359px;
	background: url(../../images/interface/homeCallout-bg.gif) no-repeat;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
}

	.homeCalloutImage {
		width: 663px;
		height: 268px;
		padding: 1px;
	}

	.homeCalloutTitle {
		width: 663px;
		height: 24px;
		background: url(../../images/titles/what-weve-been-up-to-lately.gif) no-repeat;
		margin: 10px 0px 0px 0px;
		padding: 0px 0px 0px 0px;
	}
	
	.homeCalloutText p {
		margin: 10px 10px 0px 10px;
		padding: 0px 0px 0px 0px;
		color: #000;
		font-size: 12px;
	}
	
.servicesCallouts {
	width: 665px;
	margin: 60px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
}

	.servicesCallouts h2 {
		margin: 0px 0px 15px 0px;
		padding: 0px 0px 0px 0px;
	}

	.webDesign {
		width: 205px;
		margin: 0px 0px 0px 0px;
		padding: 0px 0px 0px 0px;
		color: #000;
		font-size: 12px;
		float: left;
	}
	
	.webDevelopment {
		width: 205px;
		margin: 0px 0px 0px 25px;
		padding: 0px 0px 0px 0px;
		color: #000;
		font-size: 12px;
		float: left;
	}
	
	.searchEngineOptimization {
		width: 205px;
		margin: 0px 0px 0px 25px;
		padding: 0px 0px 0px 0px;
		color: #000;
		font-size: 12px;
		float: left;
	}
	
	
/* EDMONTON-WEB-COMPANY > INDEX.PHP */
.companyHolder {
	width: 665px;
	margin: 20px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
}

	.companyHolder .leftCol {
		width: 205px;
		margin: 0px 0px 0px 0px;
		padding: 0px 0px 0px 0px;
		float: left;
	}
	
	.companyHolder .rightCol {
		width: 435px;
		margin: 0px 0px 0px 0px;
		padding: 0px 0px 0px 0px;
		float: right;
	}
	
		.companyHolder .rightCol h2 {
			color: #9d1a1d;
			font-weight: bold;
			font-size: 14px;
			padding: 0px 0px 0px 0px;
			margin: 0px 0px 20px 0px;
			background: url(../../images/interface/main-content-h2-bg.gif) no-repeat;
		}
		
		.companyHolder .rightCol p {
			color: #000;
			font-size: 12px;
		}
		
		.companyHolder .leftCol .divider {
			width: 205px; 
			height: 16px;
			margin: 0px 0px 20px 0px;
		}
		
		.companyHolder .leftCol h2 {
			color: #9d1a1d;
			font-weight: bold;
			font-size: 14px;
			padding: 0px 0px 0px 0px;
			margin: 0px 0px 20px 0px;
		}
		
		.companyHolder .leftCol p {
			color: #000;
			font-size: 12px;
		}
		
		.companyHolder .leftCol ul {
			font-size: 12px;
			margin: 0px 0px 0px 10px;
		}
		
			.companyHolder .leftCol ul a {
				color: #566c11;
			}
			
			.companyHolder .leftCol ul a:hover {
				color: #000;
			}
	
/* EDMONTON-WEB-COMPANY > TEAM.PHP */
.teamMember {
	width: 665px;
	height: 188px;
	margin: 30px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
}

	.teamMember .image {
		width: 205px;
		height: 188px;
		margin: 0px 0px 0px 0px;
		padding: 0px 0px 0px 0px;
		float: left;
	}
	
	.teamMember .information {
		width: 435px;
		height: 188px;
		margin: 0px 0px 0px 0px;
		padding: 0px 0px 0px 0px;
		float: right;
	}
	
		.teamMember .information h2 {
			font-size: 14px;
			fon-weight: bold;
			color: #9d1a1d;
			padding: 0px 0px 0px 0px;
			margin: 0px 0px 5px 0px;
		}
		
			.teamMember .information h2 a {
				color: #566c11;
			}
	
			.teamMember .information h2 a:hover {
				color: #000;
			}
		
		.teamMember .information h3 {
			font-size: 14px;
			color: #000;
			padding: 0px 0px 0px 0px;
			margin: 0px 0px 10px 0px;
		}
		
		.teamMember .information p {
			font-size: 12px;
			color: #000;
			padding: 0px 0px 0px 0px;
			margin: 0px 0px 0px 0px;
		}
		
		
/* EDMONTON-WEB-COMPANY > COMMUNITY.PHP */
.communityHolder {
	width: 665px;
	margin: 20px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
}

	.communityHolder .leftCol {
		width: 205px;
		margin: 0px 0px 0px 0px;
		padding: 0px 0px 0px 0px;
		float: left;
	}
	
	.communityHolder .rightCol {
		width: 435px;
		margin: 0px 0px 0px 0px;
		padding: 0px 0px 0px 0px;
		float: right;
	}
	
		.communityHolder .rightCol h2 {
			color: #9d1a1d;
			font-weight: bold;
			font-size: 14px;
			padding: 0px 0px 0px 0px;
			margin: 0px 0px 20px 0px;
			background: url(../../images/interface/main-content-h2-bg.gif) no-repeat;
		}
		
		.communityHolder .rightCol p {
			color: #000;
			font-size: 12px;
		}
		
		.communityHolder .leftCol .divider {
			width: 205px; 
			height: 16px;
			margin: 0px 0px 20px 0px;
		}
		
		.communityHolder .leftCol h2 {
			color: #9d1a1d;
			font-weight: bold;
			font-size: 14px;
			padding: 0px 0px 0px 0px;
			margin: 0px 0px 20px 0px;
		}
		
		.communityHolder .leftCol p {
			color: #000;
			font-size: 12px;
		}
		
		.communityHolder .leftCol ul {
			font-size: 12px;
			margin: 0px 0px 0px 10px;
		}
		
			.communityHolder .leftCol ul a {
				color: #566c11;
			}
			
			.communityHolder .leftCol ul a:hover {
				color: #000;
			}
		
		
/* EDMONTON-WEB-COMPANY > SIBLINGS.PHP */
.sibling {
	width: 665px;
	height: 188px;
	margin: 30px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	position: relative;
}

	.sibling .image {
		width: 205px;
		height: 188px;
		margin: 0px 0px 0px 0px;
		padding: 0px 0px 0px 0px;
		float: left;
	}
	
	.sibling .information {
		width: 435px;
		height: 188px;
		margin: 0px 0px 0px 0px;
		padding: 0px 0px 0px 0px;
		float: right;
	}
	
		.sibling .information h2 {
			font-size: 14px;
			fon-weight: bold;
			color: #9d1a1d;
			padding: 0px 0px 0px 0px;
			margin: 0px 0px 5px 0px;
		}
		
		.sibling .information h3 {
			font-size: 12px;
			font-weight: bold;
			color: #000;
			padding: 0px 0px 0px 0px;
			margin: 0px 0px 10px 0px;
		}
		
		.sibling .information p {
			font-size: 12px;
			color: #000;
			padding: 0px 0px 0px 0px;
			margin: 0px 0px 0px 0px;
		}
		
		.sibling .visitWebsite {
			width: 138px;
			height: 12px;
			position: absolute;
			top: 0px;
			right:0px;
		}
		
		
/* EDMONTON-ALBERTA-SERVICES - WEB-DESIGN.PHP, WEB-DEVELOPMENT.PHP, SEARCH-ENGINE-OPTIMIZATION.PHP, SOCIAL-MEDIA-MARKETING.PHP, CONTENT-COPYWRITING.PHP, WEB-MAINTENANCE.PHP */
.servicesHolder {
	width: 665px;
	margin: 20px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
}

	.servicesHolder .leftCol {
		width: 205px;
		margin: 0px 0px 0px 0px;
		padding: 0px 0px 0px 0px;
		float: left;
	}
	
	.servicesHolder .rightCol {
		width: 435px;
		margin: 0px 0px 0px 0px;
		padding: 0px 0px 0px 0px;
		float: right;
	}
	
		.servicesHolder .rightCol h2 {
			color: #9d1a1d;
			font-weight: bold;
			font-size: 14px;
			padding: 0px 0px 0px 0px;
			margin: 0px 0px 20px 0px;
			background: url(../../images/interface/main-content-h2-bg.gif) no-repeat;
		}
		
		.servicesHolder .rightCol p {
			color: #000;
			font-size: 12px;
		}
		
		.servicesHolder .leftCol .divider {
			width: 205px; 
			height: 16px;
			margin: 0px 0px 20px 0px;
		}
		
		.servicesHolder .leftCol h2 {
			color: #9d1a1d;
			font-weight: bold;
			font-size: 14px;
			padding: 0px 0px 0px 0px;
			margin: 0px 0px 20px 0px;
		}
		
		.servicesHolder .leftCol p {
			color: #000;
			font-size: 12px;
		}
		
		.servicesHolder .leftCol ul {
			font-size: 12px;
			margin: 0px 0px 0px 10px;
		}
		
			.servicesHolder .leftCol ul a {
				color: #566c11;
			}
			
			.servicesHolder .leftCol ul a:hover {
				color: #000;
			}
	
/* EDMONTON-WEB-DESIGN > PORTFOLIO.PHP */
.portfolioItem {
	width: 665px;
	padding: 0px 0px 0px 0px;
	margin: 20px 0px 0px 0px;
}

	.portfolioItem li {
		width: 205px;
		margin: 0px 25px 30px 0px;
		padding: 0px 0px 0px 0px;
		float: left;
		display: block;
	}
	
		.portfolioItem li.endRow {
			margin: 0px 0px 30px 0px;
		}

	.portfolioItem h3 {
		color: #9d1a1d;
		font-size: 12px;
		padding: 0px 0px 0px 0px;
		margin: 0px 0px 0px 0px;
		font-weight: bold;
	}	
	
	.portfolioItem p {
		font-size: 12px;
		padding: 0px 0px 0px 0px;
		margin: 0px 0px 0px 0px;
	}
	
	.portfolioInformation {
		width: 665px;
		margin: 10px 0px 0px 0px;
		position: relative;
	}
	
		.portfolioInformation h2 {
			font-size: 14px;
			font-weight: bold;
			color: #9d1a1d;
			padding: 0px 0px 0px 0px;
			margin: 0px 0px 20px 0px;
		}
		
		.portfolioInformation p {
			font-size: 12px;
			padding: 0px 0px 0px 0px;
			margin: 0px 0px 0px 0px;
		}
	
		.portfolioInformation .visitWebsite {
			width: 138px;
			height: 12px;
			position: absolute;
			top: 0px;
			right:0px;
		}
		
	.portfolioNavigation {
		width: 200px;
		height: 20px;
		margin: 50px auto 0px auto;
		paddng: 0px 0px 0px 0px;
	}
	
/* LINKS > CLIENTS.PHP, NON-PROFITS.PHP */
.linksItem {
	width: 665px;
	padding: 0px 0px 0px 0px;
	margin: 20px 0px 0px 0px;
}

	.linksItem li {
		width: 205px;
		margin: 0px 25px 30px 0px;
		padding: 0px 0px 0px 0px;
		float: left;
		display: block;
	}
	
		.linksItem li.endRow {
			margin: 0px 0px 30px 0px;
		}

	.linksItem h3 {
		color: #9d1a1d;
		font-size: 12px;
		padding: 0px 0px 0px 0px;
		margin: 0px 0px 0px 0px;
		font-weight: bold;
	}	
	
	.linksItem p {
		font-size: 12px;
		padding: 0px 0px 0px 0px;
		margin: 0px 0px 0px 0px;
	}
	
	
/* FREQUENTLY-ASKED-QUESTIONS > FAQ.PHP */
.faqContent {
	width: 665px;
	margin: 20px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
}

	.faqContent h2 {
		width: 665px;
		background: url(../../images/interface/faq-bg.gif) no-repeat;
		font-size: 14px;
		margin: 20px 0px 0px 0px;
		padding: 0px 0px 0px 0px;
	}
	
		.faqContent h2 a {
			color: #566c11;
		}
		
	.faqContent p {
		font-size: 12px;
	}
	
	.faqContent p.answer {
		width: 640px;
		margin: 20px 0px 0px 20px;
		padding: 0px 0px 0px 0px;
	}
	
	.faqForm {
		margin-top:10px;
	}
	
	.faqForm input, .faqForm textarea {
		margin-bottom: 10px;
	}
	
	
/* EDMONTON-WEB-COMPANY > CONTACT.PHP */
.contactContent {
	width: 665px;
	margin: 20px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
}

	.contactContent p {
		font-size: 12px;
	}
	
	.contactForm {
		margin-top: 20px;
	}
	
	.contactForm h2 {
		color: #9d1a1d;
		font-size: 12px;
		font-weight: bold;
		margin: 0px 0px 10px 0px;
	}
	
	.contactForm input {
		margin-bottom: 10px;
	}
	
.redText {
	color: #860e18;
}


/* 404 PAGE NOT FOUND */
.pageNotFoundTitle {
		width: 663px;
		height: 24px;
		background: url(../../images/titles/whoops-what-did-you-do.gif) no-repeat;
		margin: 10px 0px 0px 0px;
		padding: 0px 0px 0px 0px;
	}	

/* SIDEBAR.PHP */
.sidebar {
	width: 205px;
	background: url(../../images/interface/sidebar-background.gif) repeat-y;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	float: right;
	position: relative;
}

	.sidebarTop {
		width: 205px;
		height: 11px;
		background: url(../../images/interface/sidebar-top-bg.gif) no-repeat;
		margin: 0px 0px 0px 0px;
		padding: 0px 0px 0px 0px;
	}
	
	.sidebarBottom {
		width: 205px;
		height: 11px;
		background: url(../../images/interface/sidebar-bottom-bg.gif) no-repeat;
		margin: 0px 0px 0px 0px;
		padding: 0px 0px 0px 0px;
	}

.container {
	padding: 0px 10px 0px 10px;
}

	.sidebarContentFirst {
		width: 189px;
		margin: 0px 0px 0px 0px;
		padding: 0px 0px 0px 0px;
		position: relative;
	}
	
		.yellowBar {
			width: 205px;
			height: 18px;
			background: #e9bc41;
			position: absolute;
			bottom: -25px;
			left: -10px;
		}
	
			.yellowBar span {
				display: none;
			}
			
	.sidebarContentSecond {
		width: 189px;
		margin: 40px 0px 0px 0px;
		padding: 0px 0px 0px 0px;
		position: relative;
	}
	
		.redBar {
			width: 205px;
			height: 18px;
			background: #9d1a1d;
			position: absolute;
			bottom: -25px;
			left: -10px;
		}
	
			.redBar span {
				display: none;
			}
	
	.sidebarContentThird {
		width: 189px;
		margin: 40px 0px 0px 0px;
		padding: 0px 0px 0px 0px;
		position: relative;
	}

	.sidebar a {
		color: #455b11;
	}

	.sidebar h2 {
		width: 189px;
		height: 19px;
		padding: 0px 0px 0px 0px;
		margin: 0px 0px 0px 0px;
		background: url(../../images/interface/sidebar-h2-bg.gif) no-repeat;
		color: #000;
		font-size: 13px;
	}
	
	.sidebar p {
		margin: 5px 0px 0px 0px;
		padding: 0px 0px 0px 0px;
		color: #000;
		font-size: 12px;
	}


/* FOOTER.PHP */

.footerHolder {
	width: 100%;
	height: 248px;
	background: #000 url(../../images/interface/footerHolder-background.gif) repeat-x;
	margin-top: 50px;
}

			
.footer {
	width: 895px;
	height:	249px;
	margin:	0px auto 0px auto;
	background: url(../../images/interface/footer-background.gif) no-repeat;
	padding: 0px 0px 0px 0px;
	position: relative;
}


.socialNavigationHolder {
	width: 300px;
	height: 87px;
	position: absolute;
	top: 100px;
	left: 0px;
	font-size: 10px;
	color: #FFF;
}

	.socialNavigationHolder p {
		margin: 0px 0px 0px 0px;
		padding: 0px 0px 0px 0px;
	}

.socialNavigation {
	width: 246px;
	height:	66px;
	background: url(../../images/interface/social-navigation.jpg) no-repeat;
	margin:	0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	position: relative;
	display: block;
	z-index: 30;	
}

	.socialNavigation li {
		float: left;
		position:absolute;
	}

	.socialNavigation li span {
		display: none;
	}	
	
	.socialNavigation li a { 
		height: 67px;
    		display: block;
	}
	
		.twitter {
			width: 61px;
			left: 0px; 
		}
		
		.facebook {
			width: 61px;
			left: 61px; 
		}
		
		.wordpress {
			width: 61px;
			left: 122px; 
		}
		
		.flickr {
			width: 63px;
			left: 183px; 
		}
		
		.twitter a:hover, .twitter .selected {background:transparent url(../../images/interface/social-navigation.jpg) -0px -66px no-repeat;}
		.facebook a:hover, .facebook .selected {background:transparent url(../../images/interface/social-navigation.jpg) -61px -66px no-repeat;}
		.wordpress a:hover, .wordpress .selected {background:transparent url(../../images/interface/social-navigation.jpg) -122px -66px no-repeat;}
		.flickr a:hover, .flickr .selected {background:transparent url(../../images/interface/social-navigation.jpg) -183px -66px no-repeat;}
		
	.footerLinks {
		width: 400px;
		position: absolute;
		top: 105px;
		right: 0px;
		text-align: right;
		font-size: 10px;
		color: #FFF;
	}
	
		.footerLinks a {
			color: #FFF;
		}
		
		.footerLinks a:hover {
			color: #566c11;
		}
		


	.copyright {
		width: 895px;
		position: absolute;
		top:200px;
		left:0px;
		color: #FFF;
		font-size: 10px;
		text-align:center;
	}
		
		.copyright a {
			color: #FFF;
		}
		
		.copyright a:hover {
			color: #455b11;
		}