@charset "utf-8";
/*
---------------------------------------------
| 											|
| 	1. External Includes					|
| 	2. General Style Rules					|
| 		2.1 Headings						|
| 		2.2 Lists							|
| 		2.3 Links							|
| 		2.4 Images                          |
| 		2.5 Tables	                        |
|		2.6 iframe   						|		
| 											|
| 	3. General Layout Rules					|
| 											|
| 	4. MastHead								|
| 		4.1 Logo							|
| 		4.2 Primary Navigation				|
| 		4.3	Banner							|
| 											|
| 	5. Page Content							|
| 		5.1 Primary Content					|
| 		5.2 Secondary Content				|
|			5.2.1	Secondary Navigation	|
| 											|
| 	6. Footer								|
| 											|
| 	7. Misc Rules							|
| 		7.1 Clearing						|
| 											|
---------------------------------------------
*/
/* 1. External Includes 
============================================================ */
/* Tripoli Typography Stylesheet and CSS Reset */
@import url('tripoli.simple.css');
/* 2. General Style Rules	
============================================================ */
/*  2.1 Headings	*/
h1,h2,h3{clear:left;}
#main-content h1,#main-content h2,#main-content h3{color:#361659;} #main-content h4, h2 em{color:#3f3f3f;} 
#main-content h1{font-size:2.4em;} #main-content h2{font-size:2.0em;} #main-content h3{font-size:1.8em;} h2 em{font-size:0.7em; font-style:normal;}
.home h4{margin-top:0; font-size:1.2em;}
/*	2.2 Lists		*/
.content ul{margin:0; padding:0;} li{list-style:none; }
#primary-content dt{background:url("../images/sprites.png") no-repeat scroll 0 -654px transparent; padding-left:25px;}
.tac dl{} .tac dd{padding:2px 0 2px 5px;} .tac dt{} 
/* 	2.3 Links		*/
#main-content p a{color:#4F1C8B; text-decoration:none;}
a.org{color:#fff; text-decoration:none;}
/*	2.4 Images		*/
/*	2.5 Tables */
/*	2.6 iframe */
iframe{border:3px solid #ccc;}
/* 3. General Layout Rules
============================================================ */
body{background:#000 url(../images/banners/indexpagebigbackground.jpg) no-repeat center 52px;}
	body.about{background:#000 url(../images/banners/aboutuspagebg.jpg) no-repeat center 52px;}
	body.templates{background:#000 url(../images/banners/maintemplatepagebg.jpg) no-repeat center 52px;}
	body.portfolio{background:#000 url(../images/banners/portfoliopagebg.jpg) no-repeat center 52px;}
	body.packages{background:#000 url(../images/banners/packagespagebg.jpg) no-repeat center 52px;}
	body.yelloway, body.abacus{background:#000 url(../images/banners/abacusbg.jpg) no-repeat center 52px;}
	body.delivered{background:#000 url(../images/banners/deliveredityestbg.jpg) no-repeat center 52px;}
	body.greystone{background:#000 url(../images/banners/greystonebg.jpg) repeat-x left 52px;}
	body.i3learning{background:#000 url(../images/banners/i3bg.jpg) no-repeat center 52px;}
	body.nadra{background:#000 url(../images/banners/nadrabg.jpg) no-repeat center 52px;}
	body.swinton{background:#000 url(../images/banners/swintonbg.jpg) no-repeat center 52px;}
	body.hamilton{background:#000 url(../images/banners/hamiltonbg.jpg) no-repeat center 52px;}
	body.contact{background:#000 url(../images/banners/contactuspagebg.jpg) no-repeat center 52px;}
	body.tpm{background:#000 url(../images/banners/promotionsbg.jpg) repeat-x left 52px;}
	
.content, #footer{width:980px; margin: 0 auto;}
/* 4. MastHead
============================================================ */
div.mshead-wrapper{background:url(../images/topchromebg.png) repeat-x left bottom; /*position:fixed; left:0; top:0; width:100%;*/}
#masthead{height:60px; position:relative;}
	#masthead img#logo{
	position:absolute;
	top:-1px;
	left:19px;
}
	#masthead ul{overflow:hidden; float:right; background:url(../images/navidivider.jpg) no-repeat left top; padding:0 2px; }
		#masthead li{
			width:125px; float:left; height:53px;  
			margin:0; padding:0; 	position:relative;
			text-align:center; font-size:0.7em; 			
			background:url(../images/navidivider.jpg) no-repeat right top; 
		}
			#masthead li a{
				margin:0; display:block; margin:0 1px 0 0; padding:0 1px; height:100%; 
				line-height:1.111em; font-size:1em; 
				color:#000; text-decoration:none; 
				position:relative; z-index:10;
			}
			#masthead span.hover{background:url(../images/purplefade.jpg) repeat-x left top; display:block; width:124px; height:100%; position:absolute; top:0; left:0; z-index:1;}
			#masthead li a span{	display:block; padding:7px 0 9px 0;  
														font-family:"Century Gothic", "lucida grande", "lucida sans", "bitstream vera sans", verdana; font-size:2.2em; letter-spacing:-1px;
														color:#361659;
			}
#banner{overflow:hidden; width:100%; color:#fff; padding:10px 10px 15px 10px;}
	/* *per page styles */
	#page-strap-line{float:right; width:75%;}
		#page-strap-line h1{font-size:4.4em; margin:0.2em 0 0 0; letter-spacing:-4px; }
		#page-strap-line h2{font-size:2.6em; margin:0; padding-bottom:0.4em; font-weight:normal; background:url(../images/topwhitedivier.png) no-repeat left bottom;}
		.tpm #page-strap-line h1{font-size:3.6em;}
		
		.tpm #page-strap-line h1, .tpm #page-strap-line h2,
			.hamilton #page-strap-line h1, .hamilton #page-strap-line h2,
				.i3learning #page-strap-line h1, .i3learning #page-strap-line h2,
					.greystone #page-strap-line h1, .greystone #page-strap-line h2{color:#361659;}		
					
		.tpm #page-strap-line h2,
			.hamilton #page-strap-line h2,
				.i3learning #page-strap-line h2,  
					.greystone #page-strap-line h2{background:url(../images/toppurpdiv.png) no-repeat left bottom;}
		#page-strap-line p{font-size:1.2em; margin:0;}
/* 5. Page Content		
============================================================ */
.home #main-content-wrapper{background:#fff url(../images/mainpagebg.jpg) repeat-x left top;}
#main-content-wrapper{background:#F1F6FA url(../images/innerpagebg.jpg) repeat-x left top;}
#main-content{overflow:hidden;padding:5px 0;}
	#main-content p{text-align:justify;}
/* Two Col Styles */
/*default */
#primary-content{width:60%; float:left;} #secondary-content{width:35%; float:right;}
	/* home page */
	.home #primary-content{width:49%;} .home #secondary-content{width:49%;}
	.contact #primary-content{width:40%; padding-left:3em;}	.contact #secondary-content{width:40%; pedding-right:3em;}
	/* portfolio items */
	.portfolio-item #primary-content{width:40%; float:left;} 	.portfolio-item #secondary-content{width:55%; float:right; margin-bottom:20px;}
	#secondary-content ul#services li {background: url(../images/sprites.png) no-repeat 0 -654px; padding:0 0 0 25px; margin:4px 0;}
/* Website Boxes */
.website-preview-window{
	float:left; margin:5px 5px 10px 5px; padding:5px 3px 2px 3px;	 position: relative; height: 190px;	overflow: hidden;	
	border:1px solid #DDDDDD; 
}
.website-preview-window div.cover{position:relative;}
.website-preview-window div.new{
	position:absolute; left:-3px; top:-5px;  z-index:10; padding:8px; width:25px;
	background:url(../images/sprites.png) no-repeat left top; 
	text-indent:-1000em;
}
	.website-preview-window div.caption{
		position:absolute;top:0; left:0; width:282px; height:187px; padding:5px; z-index:20;
		overflow:hidden; 
		background:#fff url(../images/website-window.jpg) repeat left top;
	}	
	div.caption h3{margin-top:0;}
	div.caption p{font-size:0.8em;}	
	.caption a.site-link{
		padding:4px 35px 4px 0; position:absolute; bottom:0; right:5px; 
		text-decoration:none; font-size:0.8em;  color:#471A7A;
	}
	#websites-wrapper .caption .site-link{padding:4px 35px 4px 20px; }
	.caption a.bespoke{background: url(../images/sprites.png) no-repeat 90px -180px;}
	.caption a.template{background: url(../images/sprites.png) no-repeat 90px -148px;}
	.reposition .caption a.bespoke {background-position: 70px -180px;}
	.reposition .caption a.template {background-position: 70px -148px;}
	.packages	.caption a.template{background: url(../images/sprites.png) no-repeat 65px -148px;}
/*  Packages Page */
#packages-wrapper{width:100%; margin:0 auto;	overflow:hidden;}
	.package{width:410px; height:280px; padding:80px 40px 20px 40px;}
	#packages-wrapper div.starter{background:url(../images/packageboxes.png) no-repeat -3px -495px;}
		#packages-wrapper div.starter:hover{background:url(../images/packageboxes.png) no-repeat 0 -55px;}
	#packages-wrapper div.business{background:url(../images/packageboxes.png) no-repeat -510px -496px;}		
		#packages-wrapper div.business:hover{background:url(../images/packageboxes.png) no-repeat -517px -53px;}
	
		#packages-wrapper ul.package-details{font:verdana; font-size:1.3em; letter-spacing:-1px; padding-bottom:30px;}
			ul.package-details li{padding:3px 0 3px 40px;}
				div.starter ul.package-details li{background: url(../images/sprites.png) no-repeat 0 -148px; color:#767B7F; }
				div.business ul.package-details li{background: url(../images/sprites.png) no-repeat 0 -315px; color:#359BAA; }
				
				div.package span.view-templates{ float:left; width:48%;}
				div.package span.more-details{float:left; width:48%;  text-align:right;}	
					div.package span.view-templates a{ text-decoration:none; font-size:1.333em;	 padding:1px 20px 1px 0; }
			 	div.package span.more-details{float:left; width:48%;  text-align:right;}
					div.package span.more-details a{color:#fff;  padding:5px 10px; font-size:1.6em; font-weight:bold; text-decoration:none;}
/* Starter Package Buttons */
				div.starter span.view-templates a{background: url(../images/sprites.png) no-repeat 169px -70px; color:#767B7F; }
				div.starter span.more-details a{background:#767B7F;}			
/* Business Package Buttons */					
				div.business span.view-templates a{background: url(../images/sprites.png) no-repeat 164px -464px; color:#359BAA;}
				div.business span.more-details a{background:#359BAA;}
/*  Additional Extras */
	div#features-wrapper{margin:0 auto; width:840px;}
		div.feature{width:230px; float:left; height:125px; padding:0 15px; }
			div.feature h4{padding:8px 0 0 38px; margin:0 0 2px 0; line-height:1em;}
			.content div.feature p{line-hieght:1em;}
		div.gallery h4{background: url(../images/sprites.png) no-repeat 0 -45px;}
		div.image-editing h4{background: url(../images/sprites.png) no-repeat 0 -436px;}
		div.cms h4{background: url(../images/sprites.png) no-repeat 0 -347px;}
		div.rss h4{background: url(../images/sprites.png) no-repeat 0 -382px;}
		div.analytics h4{background: url(../images/sprites.png) no-repeat 0 -102px;}
		div.contact-form h4{background: url(../images/sprites.png) no-repeat 0 -409px;}
	
		div.feature p{font-size:0.9em;}	
/*  Template Details */
	#addServices{font-size:0.8em; line-height:1.333em; }
/*  Portfoilo*/
	#websites-wrapper{width:920px; margin:0 auto;}
/*  Templates Page - Small Previews */
	div.templates-wrapper{overflow:hidden; }
    	div.template{ float:left; margin: 5px;height:215px; width:302px; position:relative; border:1px solid #ccc; padding:2px; margin-top:30px;}
    		div.template h4{margin:0; position:absolute; top:-20px; left:0;}	
         	div.template-chooser{border:1px solid #ccc; width:300px; height:190px; overflow:hidden;}
				div.template-chooser img.single{position: absolute; top: 0px; left: 0px; display: block; z-index: 6; opacity: 1;}
				div.template .pager a.template-anchor{display:block; float:right; width:22px; height:22px; padding:1px; overflow:hidden; }
					div.template .pager{position:absolute; right:0; bottom:0; width:59%;}					
					div.template span.colour-choice{float:left; width:39%; font-size:0.8em;}
				/*
         		div.template .pager a.blue{background: url(../images/sprites.png) no-repeat 0 -508px;}
         		div.template .pager a.red{background: url(../images/sprites.png) no-repeat -2px -577px;}
         		div.template .pager a.green{background: url(../images/sprites.png) no-repeat 0 -491px;}
         		div.template .pager a.mint{background: url(../images/sprites.png) no-repeat 0 0;}
         		div.template .pager a.purple{background: url(../images/sprites.png) no-repeat -1px -560px;}
         		div.template .pager a.yellow{background: url(../images/sprites.png) no-repeat 0 -0;}
         		div.template .pager a.orange{background: url(../images/sprites.png) no-repeat 0 -0;}
         		div.template .pager a.dark{background: url(../images/sprites.png) no-repeat 0 -0;}		
         		div.template .pager a.light-green{background: url(../images/sprites.png) no-repeat 0 -0;}
				div.template .pager a.lightpurple{background: url(../images/sprites.png) no-repeat 0 -0;}
				div.template .pager a.lightblue{background: url(../images/sprites.png) no-repeat 0 -0;}		
				*/		
		.template span.overlay{background:url(../images/enlarge.png) repeat-x left top; display:block; width:300px; height:189px; position:absolute; top:0; left:0; z-index:10; cursor:hand; display:none; opacity:0;}
/*  Templates Page - Large Previews */
	div#corner-wrap{ margin-top:35px; background:#E3E1EE; width:219px; padding:1px;}
	a.page-jump, a.back-to-templates{
		display:block; width:200px; padding:10px;
		text-decoration:none; text-align:center;  font-size:1.333em;
		color:#000; background:#fff; 
	}
	 a.back-to-templates{float:left; margin:5px 0;}
	div#large-template{overflow:hidden; width:732px; margin:0 auto;}		
		#chooser-wrapper{overflow:hidden; padding:0 0 5px 0; width:280px;}
			#chooser-wrapper #large-colour-choice{margin:0; float:left;}			
			#chooser-wrapper  h4{margin:0; float:left;}
			div#large-template #large-pager{ float:right; }
		div#large-template #large-template-chooser{border:1px solid #ccc;}	
/*  Portfolios Page */
	.portfolio-item #gallery{width:55%; float:right; margin:0 0 20px 5px;}
	div#portfolio-gallery-wrapper{position:relative; padding-top:2em; padding-bottom:30px;}
		div#portfolio-gallery{width:538px; }
			div#portfolio-gallery-wrapper .pager{position:absolute; bottom:10px; left:5px; overflow:hidden;}
			div#portfolio-gallery-wrapper .pager a {background:url(../images/sprites.png) no-repeat -2px -130px; display:block; width:14px; height:15px;  float:left; margin:0 2px;}
			div#portfolio-gallery-wrapper .pager a.activeSlide { background:url(../images/sprites.png) no-repeat -16px -130px;}
		.portfolio-item a.view-site, .portfolio-item a.back-to-portfolio{float:right; text-indent:-1000em; display:block; width:215px; height:48px;}
		.portfolio-item a.view-site{background:url(../images/visitandback.png) no-repeat left top;}
		.portfolio-item a.back-to-portfolio{background:url(../images/visitandback.png) no-repeat -2px -56px;}
		
/*  Contact Us Page */
	.contact form, .contact form fieldset{padding:0; margin:0;}
	form fieldset{border:none; outline:none;}
	form fieldset label{font-size:1.4em;}
	textarea{width:300px; height:100px;}
	#captcha img{margin-bottom:5px;}
		#big-submit{background:url(../images/contactpagebackground.png) no-repeat -37px  -635px; border:none; text-indent:-1000em; 
			display:block; width:150px; height:40px;
		}

		span.missedField, .error{color:red;}
	a.template-order{background:url(../images/sprites.png) no-repeat left -600px; display:block; float:right; width:240px; height:53px; text-indent:-1000em;}
	.content form fieldset input.text{background:url(../images/contactpagebackground.png) no-repeat -34px -29px; width:333px; height:41px; border:1px solid #ccc; border-width:1px 0 0 1px; outline:none; font-size:2em; font-family:Arial, Helvetica, sans-serif;}
	.content form fieldset input.text:hover{border-width:1px 0 0 1px;}	
	.content form fieldset textarea{background:url(../images/contactpagebackground.png) no-repeat -37px  -240px; width:365px; height:140px; font-size:2em; font-family:Arial, Helvetica, sans-serif; }
	/* 6. Footer		
============================================================ */
#footer-wrapper{background:#1D0D2A url(../images/footerbg.jpg) no-repeat left top;}
	#footer{padding:5px 30px; overflow:hidden; font-size:0.9em;}
		#footer .testimonial-strap{
			color:#fff; margin:0; padding-left:70px;
			font-family:"Century Gothic", "lucida grande", "lucida sans", "bitstream vera sans", verdana; font-size:1.6em; letter-spacing:-1px;
		}
	#footer #testimonials-wrapper{
		background:url(../images/testimonialbox.png) no-repeat left top; 
		width:300px; height:100px; padding:35px 5px 20px 5px; position:relative;
		float:left;
	}
	#footer #testimonials{position:relative;}
		#testimonials p {
			font-size:1.111em;	color:#000;	line-height:1.2em; background:#F5F5F5; padding:0 5px; 
		}
		#testimonials p span{font-style:italic; display:block; font-weight:bold;}
		.content #testimonials p+p{margin-top:0;}	
			#footer .pager{position:absolute; bottom:0; right:0; overflow:hidden;}
			#footer .pager a {background:url(../images/sprites.png) no-repeat -2px -130px; display:block; width:14px; height:15px;  float:left; margin:0 2px;}
			#footer .pager a.activeSlide { background:url(../images/sprites.png) no-repeat -16px -130px;}
			#testimonials .pager a:focus { outline: none; }
		#footer #footer-content{float:right; width:50%;}	
		#footer #footer-content p,#footer #footer-content address,#footer #footer-content  li a{color:#fff;}
			#footer address{width:35%; float:left; margin:0; line-height:1.333em; padding:10px 5px;}	
				#footer address span{display:block;}
			#footer-content ul#footer-nav{border-bottom:1px solid #fff; padding: 0 0 5px 0; width:375px;}
				#footer-content ul#footer-nav li{display:inline; text-align:center; }
					ul#footer-nav li a{text-decoration:none;font-size:1em; font-weight:bold; padding:0 5px;}
			#footer div#social-media{width:39%; float:left; margin:0; line-height:1.333em; color:#fff; padding:10px 0 0 0;}	
				div#social-media a{padding:3px 0 3px 30px;  text-decoration:none; font-size:0.9em; color:#fff;}
				#footer div#social-media a.facebook{background:url(../images/sprites.png) no-repeat left -243px;}
				#footer div#social-media a.twitter{background:url(../images/sprites.png) no-repeat left -267px;}
				#footer div#social-media a.blog{background:url(../images/sprites.png) no-repeat left -292px;}
			#footer div#footer-lower-content{width:375px; border-top:1px solid #fff; clear:left; }
				#footer div#footer-lower-content p{margin:0;}
				#footer div#footer-lower-content a{color:#fff;}
/* 7. Misc Rules		
============================================================ */
.clear-left {clear:left;} .clear-right{clear:right;} .clear-both{clear:both;} 
.left {float:left;} .right{float:right;} .both{float:both;}  img.left,img.right{margin:0 3px 3px 3px;}
.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}