/*

reseting elements:

*/

html, body, div, h1, h2, h3, h4, h5, h6, ul, ol, dl, dt, dd, p, a, blockquote, pre, fieldset, textarea, input, img { 
	margin: 0; padding: 0; }

a img {border: none;}

/* This takes out the fuzzy line around links when you click them, it's an optional addition */

:focus {outline: none;}

/*

global

*/

body {
	font-family: Helvetica, Arial, sans-serif;
	background: url(images/bg.jpg) repeat-x #4d4d4d;
}

body#home { background: url(images/bg-home.jpg) repeat-x; }

.container {
	width: 960px;
	margin: auto;
	position: relative;
}

h1, h2, p {
	margin-bottom: 30px;
}

p {
	font-size: 12px;
	line-height: 20px;
	color: #808080;
}

p small {
	font-size: 10px;
}

p.big {
	font-size: 14px;
	color: #4c4c4c;
	font-weight: bold;
}

p a {
	color: #00a8ff;
	text-decoration: none;
}

p a:hover {
	color: #1a4c66;
	text-decoration: underline;
}

.no-margin {
	margin: 0;
}

ul,li {
	font-size: 12px;
	line-height: 20px;
	color: #808080;
}

li {
	margin: 3px 0 3px 0;
}

.clear { clear: both; }

/*

header

*/

#navigation {
	height: 60px;
}

body#home #header {
	background: url(images/header-home.jpg) no-repeat top;
	height: 340px;
	min-width: 960px;
}

#header {
	background: url(images/header.jpg) no-repeat top;
	height: 190px;
	min-width: 960px;
}

#logo {
	position: absolute;
	display: block;
	width: 190px;
	height: 59px;
	background: url(images/logo.png) no-repeat;
	left: -34px;
}

#menu {
	float: right;
	height: 30px;
	margin-top: 15px;
}

#menu li {
	display: inline;
	float: left;
}

#menu li a {
	display: block;
	height: 30px;
	margin-left: 20px;
}

#nav-home { width: 54px; background: url(images/nav-home.png); }
#nav-design { width: 56px; background: url(images/nav-design.png); }
#nav-hosting { width: 63px; background: url(images/nav-hosting.png); }
#nav-portfolio { width: 73px; background: url(images/nav-portfolio.png); }
#nav-blog { width: 47px; background: url(images/nav-blog.png); }
#nav-about { width: 56px; background: url(images/nav-about.png); }
#nav-contact { width: 65px; background: url(images/nav-contact.png); }
#nav-login { width: 63px; background: url(images/nav-login.png); background-position: bottom; }

#login a:hover { background-position: top; }
#button a:hover, #button a.active { background-position: bottom; }

#home-learn-more {
	width: 150px;
	height: 50px;
	background: url(images/buttons/home-learn-more.png) no-repeat;
	display: block;
}

/* header titles */

#header-description {
	width: 460px;
	float: left;
	padding-top: 60px;
}

#header-calltoaction {
	width: 333px;
	float: right;
	margin-top: 40px;
	margin-right: 45px;
}

#header-twitter {
	width: 333px;
	float: right;
	margin-top: 40px;
	margin-right: 45px;
	height: 113px;
}

h1.title {
	position: relative;
	text-indent: -9999px;
	background: no-repeat;
}

h1 span{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: no-repeat;
}

.title-detail {
	margin-bottom: 0px;
}

h1#design-innovation { width: 305px; height: 37px; }
h1#design-innovation span { background: url(images/titles/design-innovation.png); }

h1#design-innovation-detail { width: 455px; height: 85px; }
h1#design-innovation-detail span { background: url(images/titles/design-innovation-detail.png) no-repeat; }

h1#portfolio-title { width: 145px; height: 37px; }
h1#portfolio-title span { background: url(images/titles/portfolio.png) no-repeat; }

h1#design-and-development { width: 380px; height: 37px; }
h1#design-and-development span { background: url(images/titles/design-and-development.png) no-repeat; }

h1#design-and-development-detail { width: 296px; height: 21px; }
h1#design-and-development-detail span { background: url(images/titles/design-and-development-detail.png) no-repeat; }

h1#web-and-email-hosting { width: 380px; height: 37px; }
h1#web-and-email-hosting span { background: url(images/titles/web-and-email-hosting.png) no-repeat; }

h1#web-and-email-hosting-detail { width: 420px; height: 21px; }
h1#web-and-email-hosting-detail span { background: url(images/titles/web-and-email-hosting-details.png) no-repeat; }

h1#portfolio-title-detail { width: 357px; height: 22px; }
h1#portfolio-title-detail span { background: url(images/titles/portfolio-detail.png) no-repeat; }

h1#about-title { width: 130px; height: 29px; }
h1#about-title span { background: url(images/titles/about.png) no-repeat; }

h1#about-title-detail { width: 168px; height: 17px; }
h1#about-title-detail span { background: url(images/titles/about-detail.png) no-repeat; }

h1#contact-title { width: 156px; height: 25px; }
h1#contact-title span { background: url(images/titles/contact.png) no-repeat; }

h1#contact-title-detail { width: 341px; height: 22px; }
h1#contact-title-detail span { background: url(images/titles/contact-detail.png) no-repeat; }

h1#blog-title { width: 123px; height: 37px; }
h1#blog-title span { background: url(images/titles/blog.png) no-repeat; }

h1#blog-title-detail { width: 355px; height: 22px; }
h1#blog-title-detail span { background: url(images/titles/blog-detail.png) no-repeat; }

h1#control { width: 223px; height: 37px; }
h1#control span { background: url(images/titles/control-panel.png) no-repeat; }

/* header scroller */

#header-scroller {
	position: relative;
	background: url(images/scroller/scroll-stroke.png);
	padding: 10px 10px 0px 10px;
	width: 440px;
	height: 300px;
	margin-top: 30px;
	float: right;
	overflow: hidden;
}

#scroll-prev a, #scroll-next a {
	display:block;
	position:absolute;
	top:125px;
	width:35px;
	height:70px;
}

#scroll-prev a {
	left:0;
	background:url(images/scroller/scroll-left.png);
}

#scroll-next a {
	background:url(images/scroller/scroll-right.png);
	right:0;
}

#scroller ul li {
	width: 440px;
	height: 300px;
	list-style: none;
	position: relative;
}

#scroll-shadow {
	background: url(images/scroller/scroll-shadow.png);
	width: 460px;
	height: 1px;
	position: absolute;
	bottom: 0;
	left: 0;
}

.scroll-mag {
	display: block;
	background: url(images/scroller/magnify.png);
	width: 40px;
	height: 40px;
	position: absolute;
	bottom: 30px;
	right: 30px;
}

/* blog search */

#search {
	background: url(images/search-bg.png) no-repeat;
	width: 300px;
	height: 50px;
	float: right;
	margin-top: 70px;
	position: relative;
}

#search input {
	width: 230px;
	background: none;
	margin: 10px;
	border: none;
	padding: 9px 0 9px 10px;
	font-family: Helvetica, Arial, sans-serif;
	font-size: 12px;
	line-height: 12px;
	color: #fff;
	font-style: italic;
}

#search button#search-submit {
	background: url(images/icons/blog-search.png) no-repeat;
	height: 15px;
	width: 14px;
	border: none;
	position: absolute;
	right: 23px;
	top: 18px;
}

/*

body

*/

#body {
	background: url(images/body-bg.jpg) repeat-x #fff;
	min-width: 960px;
}

#body .container {
	padding-top: 30px;
}

.column {
	float: left;
	width: 300px;
	margin-left: 30px;
}

.column:first-child { margin-left: 0px; }

h1.product-title, h1.product-title a {
	font-size: 18px;
	color: #03354a;
}

h1.body-title, h1.body-title a {
	font-size: 24px;
	color: #0687ca;
}

h1.body-title a:hover {
	color: #1a4c66;
}

h1.body-title a {
	text-decoration: none;
}

h2.body-subtitle {
	font-size: 20px;
	color: #0687ca;
}

h2.phone-number {
	font-size: 20px;
	color: #1a4c66;
}

.why {
	margin-bottom: 30px;
}

.why h1 {
	margin-bottom: 10px;
}

.why-icon {
	width: 50px;
	float: left;
}

.why-description {
	width: 230px;
	float: right;
}

h1#our-talk-is-your-talk { width: 173px; height: 20px; }
h1#our-talk-is-your-talk span { background: url(images/titles/our-talk-is-your-talk.png) no-repeat; }

h1#uptime-guarantee { width: 230px; height: 20px; }
h1#uptime-guarantee span { background: url(images/titles/uptime-guarantee.png) no-repeat; }

h1#money-back-policy { width: 233px; height: 20px; }
h1#money-back-policy span { background: url(images/titles/money-back-policy.png) no-repeat; }

h1#cpanel-control-system { width: 233px; height: 20px; }
h1#cpanel-control-system span { background: url(images/titles/cpanel-control-system.png) no-repeat; }

h1#personal-hosting{ width: 233px; height: 20px; }
h1#personal-hosting span { background: url(images/titles/personal-hosting.png) no-repeat; }

h1#business-hosting{ width: 253px; height: 20px; }
h1#business-hosting span { background: url(images/titles/business-hosting.png) no-repeat; }

h1#professional-hosting{ width: 243px; height: 20px; }
h1#professional-hosting span { background: url(images/titles/professional-hosting.png) no-repeat; }

h1#ultra-hosting{ width: 243px; height: 20px; }
h1#ultra-hosting span { background: url(images/titles/ultra-hosting.png) no-repeat; }

h1#raid-servers { width: 233px; height: 20px; }
h1#raid-servers span { background: url(images/titles/raid-servers.png) no-repeat; }

h1#backbone-uk-network { width: 233px; height: 20px; }
h1#backbone-uk-network span { background: url(images/titles/backbone-uk-network.png) no-repeat; }

h1#email-template-design { width: 233px; height: 20px; }
h1#email-template-design span { background: url(images/titles/email-template-design.png) no-repeat; }

h1#website-design { width: 233px; height: 20px; }
h1#website-design span { background: url(images/titles/website-design.png) no-repeat; }

h1#website-hosting { width: 233px; height: 20px; }
h1#website-hosting span { background: url(images/titles/website-hosting.png) no-repeat; }

h1#w3c-valid { width: 233px; height: 20px; }
h1#w3c-valid span { background: url(images/titles/w3c-valid.png) no-repeat; }

h1#bespoke-designs { width: 233px; height: 20px; }
h1#bespoke-designs span { background: url(images/titles/bespoke-designs.png) no-repeat; }

.client-logo {
	float: left;
	padding: 0;
	margin: 0 30px 30px 0;
}

/* Although default (6 clients) requires only #client-3 and #client-6 (the ones on the far right), every additional row of clients you add requires another #client-9, #client-12 and etc. I have added #client-9 and #client-12 for those who may require them */ 

#client-3, #client-6, #client-9, #client-12 {
	margin-right: 0px;
}

/* Same as #client-number, except for #team-3, #team-6, etc */

#team-3, #team-6, #team-9, #team-12 {
	margin-right: 0px;
}

.team-member {
	float: left;
	margin-right: 30px;
}

.team-avatar {
	margin-bottom: 30px;
}

/* Contact Form */

form#contact-form {
	position: relative;
}

#contact-form input, textarea {
	margin: 0;
	padding: 0;
	border: 1px solid #cccccc;
	background: #e5e5e5;
	margin-bottom: 30px;
	font-family: Helvetica, Arial, sans-serif;
	font-size: 12px;
	font-style: italic;
	color: #808080;
}

#contact-form input {
	width: 238px;
	padding-left: 30px;
	padding-right: 30px;
	padding-top: 9px;
	padding-bottom: 9px;
	line-height: 12px;
}

#contact-form textarea {
	width: 238px;
	padding: 8px 30px;
	line-height: 20px;
	height: 132px;
}

#contact-submit {
	background: url(images/icons/send.png) no-repeat;
	width: 40px;
	height: 40px;
	border: none;
	position: absolute;
	right: 30px;
	bottom: 60px; /* Additional 30px offset from the textarea margin */
}

#login-submit {
	width: 120px;
	height: 25px;
	float: right;
	background-color: #03354a;
	border: none;
	cursor:pointer;
	color: #FFF;
	font-size: 12px;
}

#login-submit:hover {
	background-color: #258db0;
}

/* portfolio */

.ui-tabs .ui-tabs-hide { display: none !important; }

.portfolio-description {
	width: 300px;
	float: left;
}

.portfolio-image {
	position: relative;
	background: #bfbfbf;
	float: right;
	padding: 10px;
	margin-bottom: 30px;
	
	/* The following styles are CSS3 rounded corners, only supported (as of date) Safari 4 and Firefox 3.5 */
	
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
}

a.portfolio-mag {
	display: block;
	background: url(images/scroller/magnify.png);
	width: 40px;
	height: 40px;
	position: absolute;
	bottom: 40px;
	right: 40px;
}

#portfolio-nav {
	position: absolute;
    background: url(images/portfolio-nav-bg.png) repeat;
    top: -115px;
    right: 0;
    height: 40px;
    
    /* The following styles are CSS3 rounded corners, only supported (as of date) Safari 4 and Firefox 3.5 */
	
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
}

#portfolio-nav li {
	float: left;
	list-style: none;
	margin: 0 20px;
	line-height: 40px;
	font-family:Arial, Helvetica, sans-serif;
	font-size: 12px;
}

#portfolio-nav li a {
	display: blocks;
	text-decoration: none;
	color: #87c0d6;
}

#portfolio-nav li.ui-tabs-selected a {
	color: #fff;
	
	/* The following gives the active portfolio item a little edge, however, for various reasons, this does not work in IE6 and is therefore disabled by default */
	
	/*height: 50px;
	background: url(images/portfolio-nav-edge.png) bottom no-repeat;*/
}

#portfolio-nav li.ui-tabs-selected a:hover { color: #fff; }
#portfolio-nav li a:hover { color: #e7f3f7; }

/* blog main */

#main {
	width: 630px;
	float: left;
}

#sidebar {
	width: 300px;
	float: right;
}

#main .post h1.body-title {
	float: left;
}

#main .post p.small {
	float: right;
	line-height: 24px;
}

.img-wrap {
	background: #bfbfbf;
	float: right;
	padding: 10px;
	margin-bottom: 30px;
	
	/* The following styles are CSS3 rounded corners, only supported (as of date) Safari 4 and Firefox 3.5 */
	
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
}
/* Product Boxes */

#product-box {
	width: 278px;
	height: auto;
	border: solid 1px #c8c8c8;
	margin: 15px 0 15px 0;
	background-color: #f7f7f7;
	padding: 10px 10px 2px 10px;
}

#product-box-number1 {
	width: 278px;
	height: auto;
	border: solid 1px #c8c8c8;
	margin: 15px 0 15px 0;
	background-color: #f7f7f7;
	padding: 10px 10px 2px 10px;
	background-image: url(images/hosting-number1.png);
	background-repeat: no-repeat;
	background-position: right top;
}

#product-box-order {
	width:120px;;
	height: auto;
	background-color: #920303;
	padding: 4px 10px 4px 10px;
	color: #FFF;
	font-size: 14px;
	float: right;
	border: solid 1px #920303;
	font-weight: 400;
}

/* blog navigation */

#blog-nav {
	height: 50px;
	background: url(images/blog-nav-bg.png) repeat-x;
	min-width: 960px;
}

#blog-nav .sub-container {
	width: 630px;
	float: left;
	margin-top: 10px;
	height: 30px;
}

#blog-nav #pages {
	float: left;
}

#blog-nav #prev-next {
	float: right;
}

#blog-nav #pages li {
	list-style: none;
	float: left;
	margin-right: 10px;
}

#blog-nav #prev-next li {
	list-style: none;
	float: left;
	margin-left: 10px;
}

#blog-nav #pages li a {
	display: block;
	width: 30px;
	height: 23px;
	background: url(images/blog-page-bg.png) no-repeat;
	padding-top: 7px;
}

#blog-nav #pages li a, #blog-nav a.blog-nav-button {
	text-align: center;
	font: bold 14px Helvetica, Arial, sans-serif;
	color: #494949;
	text-decoration: none;

	/* Text shadows adds a indent feel to the text and are not new to CSS3, but are not supported by some browsers, this adds a small effect that looks great but isn't necessary */
		
	text-shadow: 0px 1px 0px #d4d4d4;
}

#blog-nav #pages li a:hover, #blog-nav a:hover {
	color: #000;
}

a.blog-nav-button {
    background: transparent url(images/blog-page-end.png) no-repeat scroll top right;
    display: block;
    float: left;
    height: 30px;
    padding-right: 10px;
}

a.blog-nav-button span {
    background: transparent url(images/blog-page-start.png) no-repeat;
    display: block;
    height: 23px;
    padding-left: 10px;
    padding-top: 7px;
}

/* blog sidebar */

.sidebar-seperate {
	width: 300px;
	height: 1px;
	background: #cccccc;
	margin-bottom: 30px;
}

#subscribe {
	margin-bottom: 30px;
}

.subscribe-item:last-child {
	margin-right: 0;
}

.subscribe-item {
	float: left;
	text-align: center;
	margin-right: 30px;
	height: 80px;
	position: relative;
}

.subscribe-item .counter {
	position: absolute;
	margin: 0;
	bottom: 0;
	text-align: center;
	width: 100%;
}

.subscribe-item .counter p {
	margin: 0;
}

#subscribe h2.body-subtitle {
	float: right;
	line-height: 40px;
}

#sidebar-about img {
	width: 80px;
	height: 80px;
	float: left;
	margin-bottom: 30px;
}

#sidebar-about #sidebar-about-info {
	width: 190px;
	float: right;
}

#sidebar-recent img {
	width: 80px;
	height: 80px;
	float: right;
	margin-bottom: 30px;
}

#sidebar-recent #sidebar-recent-info {
	width: 190px;
	float: left;
}


/*

footer

*/

#footer {
	background: url(images/footer-bg.png) repeat-x #4d4d4d;
	min-width: 960px;
}

#footer .container {
	padding-top: 50px;
}

h1.footer-title {
	font-size: 24px;
	color: #ffffff;
}

h2.footer-blog-title {
	margin-bottom: 10px;
	font-size: 20px;
	color: #ffffff;
}

#footer p {
	color: #e5e5e5;
}

#footer p a:hover {
	color: #00d8ff;
}

#footer .footer-thumb {
	width: 80px;
	height: 80px;
	float: left;
}

#footer .footer-blog {
	width: 200px;
	float: right;
}

#footer p.small {
	margin-bottom: 10px;
}

#testimonial-uber-wrap {
	background: url(images/testimonial-repeat.jpg) repeat-y;
}

#testimonial-wrap {
	background: url(images/testimonial-end.jpg) bottom no-repeat;
}

#testimonial {
	background: url(images/testimonial-start.jpg) top no-repeat;
	padding: 30px;
}

#testimonial p {
	margin-bottom: 0;
	color: #b2b2b2;
}