/* 

Colours 
=======

Orange: #f5a11c;
Gray: #9b9898;

Reseting elements
=================
*/

html, body, div, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, a, blockquote, pre, fieldset, table, th, td, 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;}

/*

Gloal
=====

*/

body {
	font-family: Century Gothic;
	background: url(images/bg.jpg) repeat-x #ffffff;
}

body#home { }

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

h1, h2, h3, p, .title {
	margin-bottom: 20px;
}

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;
}

.clear { clear: both; }

.spacer {
	height: 20px;
}
/*

header

*/

#navigation {
	background-color:#1a1819;
	height: 30px;
}

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

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

#logo {
	float:left;	
	width: 150px;
	height: 65px;
	
	}

#slogan {
	float:left;
	width: 250px;
	height: 65px;
	font-size:16px;
	color:#ffffff;
	}

.red{
	font-size:20px;
	color:#ac0505;	
}



#menu {
	float: left;
	height: 20px;
	margin-top: 5px;
	margin-left: 150px;
	font-size:15px;
	color: #dedede;
	 
}

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

}

#menu li a {
	height: 40px;
	margin-left: 20px;
	text-decoration: none;
	color:#dedede;
}

#menu li a.active {
	color: #858484;
		text-decoration: none;
}



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

/* header titles */

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

	color:#b2b2b2;
}

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

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

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

/* h1 title (tagline) dimensions */
h1#home { width: 450px; height: 49px; }
h1#clients, h1#services, h1#about, h1#contact { width: 165px; height: 38px; }

/* h1 title images */
h1#home span { background: url(images/titles/home.png) no-repeat; }
h1#clients span { background: url(images/titles/clients.png) no-repeat; }
h1#services span { background: url(images/titles/services.png) no-repeat; }
h1#about span { background: url(images/titles/about.png) no-repeat; }
h1#contact span { background: url(images/titles/contact.png) no-repeat; }
h1#team span { background: url(images/titles/team.png) no-repeat; }
h1#all-about-me span { background: url(images/titles/all-about-me.png) no-repeat; }

/* Tagline detail dimensions */
.title#home-detail { width: 452px; height: 82px; }
.title#clients-detail, .title#services-detail, .title#about-detail, .title#contact-detail, .title#case-study-detail { width: 452px; height: 28px; }

/* Tagline detail images */
.title#home-detail span { background: url(images/titles/home-detail.png); }
.title#clients-detail span { background: url(images/titles/clients-detail.png) no-repeat; }
.title#services-detail span { background: url(images/titles/services-detail.png) no-repeat; }
.title#about-detail span { background: url(images/titles/about-detail.png) no-repeat; }
.title#contact-detail span { background: url(images/titles/contact-detail.png) no-repeat; }
.title#team-detail span { background: url(images/titles/team-detail.png) no-repeat; }

.title#case-study-detail span { background: url(images/titles/case-study-detail.png); }

/* header scroller */

#header-scroller {
	position: relative;
	padding: 10px 10px 0px 10px;
	width: 440px;
	height: 110px;
	margin-top: 10px;
	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;
}

.service-img{
	margin-bottom: 10px;
}

/* 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-download {
	float: left;
	width: 300px;
	margin-left: 30px;
}

.column-button {
	float: left;
	width: 450px;
	margin-right:20px;
	padding-top: 100px;
}

.column-contact{
	float: left;
	width: 800px;
	margin-right:20px;
	padding-top: 100px;
}


.column-clients {
	float: left;
	width: 450px;
	margin-top:10px;
	margin-left: 30px;
}

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

h2.body-title, h2.body-title a {
	font-size: 24px;	
	color: #9b9898;
}

h2.team-title, h2.team-title a {
	margin-bottom:5px;
	color: #9b9898;
}

h3.team-title, h3.team-title a {
	margin-bottom:5px;
	color: #bab9b9;
}


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

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

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

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

.why {
	margin-bottom: 30px;
}

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

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

.why-description {
	
	float: right;
}

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

h2#masters-of-gui { width: 200px; height: 25px; }
h2#masters-of-gui span { background: url(images/titles/masters-of-gui.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: 20px;
	bottom: 50px; /* Additional 30px offset from the textarea margin */
}

/* subscribe (contact us) */

.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;
	color: orange;
}

#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;
}

/* clients */

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

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

.clients-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.clients-mag {
	display: block;
	background: url(images/scroller/magnify.png);
	width: 40px;
	height: 40px;
	position: absolute;
	bottom: 40px;
	right: 40px;
}

a.clients-case {
	display: block;
	background: url(images/case-study.png);
	width: 120px;
	height: 40px;
	position: absolute;
	bottom: 40px;
	right: 40px;
}

#clients-nav {
	position: absolute;
    background: url(images/clients-nav-bg.png) repeat;
    top: -115px;
    right: 0;
    height: 44px;
    
    /* 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;
}

#clients-nav li {
	float: left;
	list-style: none;
	margin: 0 20px;
	line-height: 40px;
	font-family: Verdana, sans-serif;
	font-size: 14px;
}

#clients-nav li a {
	display: block;
	text-decoration: none;
	color: #f7a118;
}

#clients-nav li.ui-tabs-selected a {
	color: #fff;
	
	/* The following gives the active clients 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/clients-nav-edge.png) bottom no-repeat;*/
}

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

/* case studies */

.case-study {
	width: 630px;
	float: left;
}

.case-study-image {
	background: #bfbfbf;
	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;
}

#case-study-list ul{
	font-size: 12px;
	padding-left: 30px;
	color: #f5a11c;
}
#case-study-list li{
	padding-bottom: 10px;	
}

/* 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;
}

/*

footer

*/

#footer {
	min-width: 960px;
}

#footer .container {
	
}

#bottom-footer{
	background-color:#1A1819;
	color:#ffffff;
	height:40px;
	padding-top:5px;
	font-size:14px;
	text-align:center;
	border-top:#000000 solid 10px;
}

#bottom-footer a{
	text-decoration:none;
	color:#ffffff;
}


h3.footer-title, h3.footer-twitter-title {
	font-size: 21px;
	color: #9B9898;
}

h3.footer-twitter-title {
	background-image: url(images/twitter/twitter.png);
	background-position: left;
	background-repeat: no-repeat;
	padding-left: 55px;
	height: 48px;
	margin-bottom:5px;
}

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

#footer p {
	color: #808080;
}

#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-wrap1 {
	background: url(images/testimonial-repeat.jpg) repeat-y;
}

#testimonial-wrap1 {
	background: url(images/testimonial-end.jpg) bottom no-repeat;
	margin-bottom: 10px;
}

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

#testimonial1 p {
	margin-bottom: 10px;
	color: #b2b2b2;
}

#tweet ul{
	text-decoration:none;
	list-style: none;
	color: #E5E5E5;
	font-size: 12px;
	padding-bottom: 5px;
}

#tweet li{
	padding-bottom: 15px;
}
#tweet a{
	color: #9a9a9a;
	font-size: 12px;
}