/* Core Styles */
@import url('core.css');
body {background: url('../../images/background.png') repeat-x #1b1b1b; font-family: Arial,Geneva,Helvetica,sans-serif;}

/* Header Styles */
#header {height: 100px; width: 960px; margin: 0 auto; overflow: hidden;}
#header a#logo {background: url('../../images/logo.png') no-repeat; width: 220px; height: 38px; font-size: 0; display: block; float: left; margin: 33px 0;}

#navigation {float: right; margin: 35px 0 0;}
	#navigation li {float: left; margin: 0 0 0 40px;}
		#navigation a {color: #aaa; text-decoration: none; font-weight: 900; font-size: .8em; display: block; padding: 8px 0 8px 25px; text-align: center;}
		#navigation a:hover {color: #fff;}

	#services {background:url('../../images/icon-sprite.png') no-repeat 0 -524px;}
	#portfolio {background:url('../../images/icon-sprite.png') no-repeat 0 -488px;}
	#about-us {background:url('../../images/icon-sprite.png') no-repeat 0 7px;}
	#contact-us {background:url('../../images/icon-sprite.png') no-repeat 0 -64px;}
	#get-quote {background: url('../../images/icon-sprite.png') no-repeat 0 -100px; padding: 0 0 0 24px;}
	#get-quote a {background: url('../../images/quote-button.png') no-repeat; padding: 8px 0; width: 111px; color: #fff;}
	#get-quote a:hover{background: url('../../images/quote-button_hover.png') no-repeat;}

/* Body Styles */
#body,#text-content,#promo-page,#notify,#quote-container {width: 960px; margin: 0 auto; background: url('../../images/body-shading.png') no-repeat 0 10px; min-height: 461px; padding: 20px 0 0; overflow: hidden;}
#main-content {width: 640px; height: 245px; float: left; margin: 0 10px 0 0; overflow: hidden;}

/* Upcoming Projects Slideshow */
#upcoming-projects-data {overflow: hidden; height: 245px;}
	#upcoming-projects-data img {border-style: solid; border-color: #ddd; border-width: 1px 1px 0; display: block; width: 638px; height: 174px;}
	#upcoming-projects-data a.text {color: #444; text-decoration: none; font-size: .8em; display: block; text-align: center; background: url('../../images/main-banner-label.png'); border: 1px solid #ddd; padding: 27px 0 26px;}
	#upcoming-projects-data a.text:hover {color: #000;}
	#upcoming-projects-data a strong {color: #9B1414;}

/* Client Testimonials */
#client-testimonials-data {height: 245px; width: 640px; overflow: hidden; border: 1px solid #ddd; background-color: #fff;}
#client-testimonials-data h2 {padding: 20px 20px 0; color: #333;}
#client-testimonials-data blockquote {font-size: .9em; line-height: 1.5em; color: #555; display: block; padding: 30px 20px 0; text-indent: 40px;}
#client-testimonials-data blockquote:before, blockquote:after {color: #ddd; display: block;font-size: 7em;width: 50px;}
#client-testimonials-data blockquote:before {content: open-quote;height: 0; margin-top: 10px; margin-left: -44px;}
#client-testimonials-data blockquote:after {content: close-quote;height: 0; margin-top: 20px; margin-left: 500px;}
#client-testimonials-data a {color: #777; text-decoration: none; display: block; font-size: .9em; float: right; padding: 10px 20px;}

.client-testimonial {height: 245px;}

/* Services Tabs */
#services-holder {width: 638px; height: 197px; float: left; overflow: hidden;}

	#services-links {border-style: solid; border-color: #ddd; border-width: 1px 1px 0; width: 638px; float: left; margin: 10px 0 0; overflow: hidden; background-color: #eaeaea;}
		#services-links li {float: left; border-bottom: 1px solid #ddd;}
			#services-links li a {color: #333; font-size: .8em; text-decoration: none; padding: 10px 17px 10px 37px; display: block; border-left: 1px solid #ddd; font-weight: 900;}
			#services-links li:first-child a {border:0;}
			#services-links li a:hover {color: #991414;}
	
	#web-design-tab a {background: url('../../images/icon-sprite.png') no-repeat 16px -594px;}
	#web-development-tab a {background: url('../../images/icon-sprite.png') no-repeat 16px -629px}
	#web-hosting-tab a {background: url('../../images/icon-sprite.png') no-repeat 16px -665px;}
	#logo-design-tab a {background: url('../../images/icon-sprite.png') no-repeat 16px -414px;}
	#social-tab a {background: url('../../images/social.png') no-repeat 10px 10px;}
	
	.services-text {border-style: solid; border-color: #ddd; border-width: 0 1px 1px; height: 149px; float: left; background-color: #fafafa; font-size: .9em; overflow: hidden; width: 638px;}
		.services-text p {padding: 15px 20px; height: 144px; line-height: 2em; color: #333; width: 609px;}
		.services-text a {color: #991414; text-decoration: underline;}
		.services-text a:hover {text-decoration: none;}
		
/* Services Page */
#services-page-holder {width: 960px; overflow: hidden;}

	#services-page-links {width: 960px; height: 113px; margin: 10px 0; overflow: hidden; background: url('/images/dashboard.png');}
		#services-page-links li {float: left; margin: 20px 0 0 65px;}
			#services-page-links li a {display: block; height: 91px;}
	
	#services-page-holder .services-text {border-style: solid; border-color: #ddd; border-width: 1px; float: left; background-color: #fafafa; font-size: .9em; overflow: hidden; width: 958px; padding: 0; height: auto;}
		#services-page-holder .services-text p {margin: 20px; line-height: 200%; color: #333; padding: 0; height: auto; width: 940px;}
		#services-page-holder .services-text a {color: #991414; text-decoration: underline;}
		#services-page-holder .services-text a:hover {text-decoration: none;}

	#services-page-holder .ui-tabs-selected {background-color: transparent; height: 91px;}

	#design-tab {background: url('/images/web-design_.png') no-repeat; width: 79px; height: 83px; cursor: pointer;}
	#design-tab:hover {height: 91px;}
	
	#development-tab {background: url('/images/development_.png') no-repeat; width: 92px; height: 83px; cursor: pointer;}
	#development-tab:hover {height: 91px;}
	
	#hosting-tab {background: url('/images/hosting_.png') no-repeat; width: 55px; height: 83px; cursor: pointer;}
	#hosting-tab:hover {height: 91px;}
	
	#logo-print-tab {background: url('/images/logo-print_.png') no-repeat; width: 86px; height: 83px; cursor: pointer;}
	#logo-print-tab:hover {height: 91px;}
	
	#social-management-tab {background: url('/images/social-management_.png') no-repeat; width: 90px; height: 83px; cursor: pointer;}
	#social-management-tab:hover {height: 91px;}
	
	#seo-tab {background: url('/images/seo_.png') no-repeat; width: 103px; height: 83px; cursor: pointer;}
	#seo-tab:hover {height: 91px;}
	

/* Front Page - Side Menu */
#side-menu {overflow: hidden; float: right;}
	#side-menu li {background: url('../../images/side-menu-panel.png') no-repeat; width: 310px; display: block; margin: 0 0 10px;}
		#side-menu li a {color: #333; text-decoration: none; display: block; padding: 14px 0 12px 40px; font-size: .8em; font-weight: 900;}
		#side-menu li a:hover {color: #991414;}

	#upcoming-projects-tab a {background:url('../../images/icon-sprite.png') no-repeat 14px -555px;}
	#client-testimonials-tab a {background:url('../../images/icon-sprite.png') no-repeat 14px -23px;}
	#our-process-tab a {background:url('../../images/icon-sprite.png') no-repeat 14px -447px;}
	#good-web-design-tab a {background:url('../../images/icon-sprite.png') no-repeat 14px -375px;}
	#faq-tab a {background:url('../../images/icon-sprite.png') no-repeat 14px -131px;}

#promotional-banners {width: 308px; height: 185px; overflow: hidden; border: 1px solid #ddd; background-color: #fff; float: right;}
#promotional-banners img {width: 308px; height: 185px;}

/* Text Content Page Styles */
#text-content h2,#notify h2,#quote-container h2 {background-color: #f0f0f0; color: #333; padding: 10px 20px; margin: 0 0 10px; font-size: 1.6em; border: 1px solid #ddd;}
p.text-intro {background-color: #fcfcfc; border: 1px solid #ddd; padding: 20px 20px 60px; margin: 0 0 10px 0; color: #222; line-height: 1.5em; font-size: .9em;}
#text-list {background-color: #fafafa; padding: 10px; border: 1px solid #ddd; height: 220px; overflow: hidden; margin-top: -1px;}
#text-list li {padding: 10px; height: 220px;}
#text-list li h4 {margin: 0 0 10px;}
#text-list li p {line-height: 1.5em; font-size: .9em; margin: 0 0 7px; color: #333;}
#text-list li p.indent {text-indent: 20px;}
#text-content a,#notify a {color: #991414; text-decoration: underline;}
#text-content a:hover,#notify a:hover {text-decoration: none;}

#text-actions {float: right; position: relative; bottom: 60px; right: 20px;}
	#text-actions span {color: #888; float: left; margin: 10px 20px 0 0; font-size: .8em;}
	#text-actions a.go-prev {display: block; background: url('../../images/icon-sprite.png') no-repeat 0 -336px; width: 32px; height: 32px;float: right;}
	#text-actions a.go-next {display: block; background: url('../../images/icon-sprite.png') no-repeat 0 -180px; width: 32px; height: 32px;float: left;}

/* Portfolio Page Styles */
a.go-left {float: left; margin: 120px 15px 0 0; background: url('../../images/icon-sprite.png') no-repeat 0 -284px; width: 32px; height: 32px;}
a.go-right {float: left; width: 32px; margin: 120px 0 0 15px; background: url('../../images/icon-sprite.png') no-repeat 0 -232px; width: 32px; height: 32px;}

#portfolio-clip {overflow: hidden; height: 446px; width: 862px; float: left;}
#portfolio-container {width: 10000px;}
#portfolio-container li {height: 446px; float: left; margin: 0 10px 0 0;}
#portfolio-container img.portfolio-graphic {height: 273px; width: 860px; display: block; border: 1px solid #ddd;}
.portfolio-description {background-color: #fafafa; border: 1px solid #ddd; width: 860px; height: 159px; margin: 10px 0 0; overflow: hidden;}
.portfolio-description span {font-size: 1em; font-weight: 900; margin: 20px 20px 0; display: block;}
.portfolio-description a {margin: 20px; color: #991414; text-decoration: none; font-size: .8em;}
.portfolio-description a:hover {color: #E51414;}
.portfolio-description p {font-size: .8em; padding: 20px; line-height: 1.5em;}

/* Client List Page Styles */
#client-list {background-color: #f6f6f6; width: 958px; height: 378px; border: 1px solid #ddd;}
#client-list li {margin: 10px 0 0 10px; font-size: .85em; display: block; float: left; width: 213px; padding: 4px 7px; text-align: left; border-bottom: 1px solid #ccc; border-top: 1px solid #eee; background-color: #fafafa; color: #333;}

/* Footer Styles */
#footer {width: 960px; margin: 0 auto; background: url('../../images/footer-wave.png') no-repeat; overflow: hidden; padding-bottom: 50px;}

/* Credit Card Icons */
#credit-cards {clear: both; float: right; overflow: hidden;}
#credit-cards li {float: left; margin: 10px 20px 0 0;}

/* Site Map */
.site-map {float: left; margin: 15px 30px 0 20px; line-height: 1.5em;}
	.site-map li.label {color: #ddd; font-weight: 900; font-size: .85em;}
	.site-map li {margin: 0 0 -3px;}
		.site-map li a {color: #777; font-size: .75em; text-decoration: none;}
		.site-map li a:hover {color: #ccc; text-decoration: underline;}

/* Promotional Pages */
#promo-header {display: block; margin: 0 0 10px;}
#promo-content {border: 1px solid #ddd; background-color: #fff; }
#promo-content p {font-size: .8em; color: #333; line-height: 1.5em; margin: 20px;}
#promo-content p a {color: #991414; text-decoration: underline;}
#promo-content p a:hover {color: #991414; text-decoration: none;}
#promo-content ul {margin: 20px;}
#promo-content ul li {font-size: .8em; color: #333; line-height: 1.5em;}

/* About Us */
#about-us-text {border: 1px solid #ddd; background-color: #fafafa;}
#about-us-text p {font-size: .85em; color: #333; margin: 20px;}
#about-us-text h4 {margin: 20px;}

#award-panel {float: right; margin: 20px 20px 0 10px; background: #fafafa; border: 1px solid #ddd; width: 320px;}
#award-graphic {margin: 10px; float: left;}
#award-text {margin: 0 10px; font-size: .8em; line-height: 150%;}

#avatars {overflow: hidden; margin: -10px 0 0 0;}
#avatars .profile {float: left; margin: 20px 0 20px 20px; padding: 10px; border: 1px solid #cacaca; background: #f3f3f3; width: 427px; height: 70px;}
#avatars .profile-avatar {float: left; margin: 0 20px 0 7px;}
#avatars .profile-info {float: left;}
#avatars .profile-name {display: block; font-weight: 900; margin: 5px 0 0; color: #222;}
#avatars .profile-title {display: block; margin: 2px 0 0; font-size: .75em; color: #333;}
#avatars .profile-email {display: block; margin: 5px 0 0; font-size: .75em;}
#avatars .profile-email a {text-decoration: none;}
#avatars .profile-email a:hover {text-decoration: underline;}

/* Quote Form Styles */
#quote-container fieldset {width: 960px; margin: 0 auto; background-color: #eee; overflow: hidden; border: 1px solid #ddd;}
#quote-container label {display: inline-block; font-size: .8em; margin: 0 0 4px; color: #333; font-weight: 900;}
#quote-container input.entry {display: block; border: 1px solid #bbb; padding: 5px 4px; margin: 0 0 10px; font-size: .9em; width: 260px; color: #444;}
#quote-container select {display: block; font-family: arial; font-size: .9em; background-color: #fff; border: 1px solid #bbb; padding: 4px; margin: 0 0 10px; color: #444;}
#quote-container textarea {display: block; width: 300px; height: 273px; border: 1px solid #bbb; font-family: arial; font-size: .9em; padding: 4px; color: #666;}
#quote-container input.action {color:#ccc;width:940px;background-color:#222;cursor:pointer;margin:0 0 10px 10px; padding:4px 0; display: block;}
#quote-container input.action:hover{background-color: #000;color: #fff;}
#quote-container fieldset span.required {display: inline; font-size: .75em; color: #991414;}

#quote-contact-details {float: left; width: 260px; overflow: hidden; padding: 10px;}
#quote-project-information {float: left; width: 340px; overflow: hidden; padding: 10px 0 0 0;}
#quote-project-description {float: left; width: 310px; overflow: hidden; padding: 10px;}
#quote-actions {clear: both;}

/* Copyright and Description */
h2 {font-size: .75em; color: #555; font-weight: 500; margin: 10px 20px 0 0;}
h3 {font-size: .75em; color: #555; font-weight: 500; float: right; width: 300px; text-align: right; clear: right; margin: 10px 20px 0 0;}
.copyright {display: block; float: right; clear: right; color: #777; font-size: .8em; margin: 20px 20px 0; text-align: right;}
address {display: block; float: right; clear: right; color: #888; font-size: .75em; margin: 15px 20px 0; text-align: right;}
#webdesign-directory {font-size: .75em; color: #555; font-weight: 500; float: right; width: 350px; text-align: right; clear: right; margin: 20px 20px 0;}
#webdesign-directory a {color: #777; text-decoration: none;}
#webdesign-directory a:hover {color: #999;}

#phone-number {color: #fff; margin: 4px 0 0 0; display: block;}

.ui-tabs .ui-tabs-hide {display: none;}
.ui-tabs-selected {background-color: #fafafa;border-bottom: 1px solid #fff !important;}

/* Modal Contact Form Styles */
#modal-window-data {display: none;}
#modal-contact-form {overflow: hidden; background: url('../../images/requestQuote.png') no-repeat 380px 30px;float:left;}
	#modal-contact-form label{display:block;width:150px;font-size:.85em;margin:10px 0 0 10px;}
	#modal-contact-form input.contactForm{border:1px solid #d0d0d0;background-color:#eee;color:#222;width:270px;margin:5px 0 5px 10px;padding:4px;}
	#modal-contact-form textarea{border:1px solid #d0d0d0;background-color:#eee;color:#222;width:670px;height:80px;margin:5px 0 5px 10px;padding:4px;}
	#submit{color:#ccc;width:177px;background-color:#222;cursor:pointer;margin:0 0 5px 10px; padding:4px 0; display: block; width: 680px;}
	#submit:hover{background-color: #000;color: #fff;}

#notify p {padding: 20px; font-size: .8em; background-color: #fafafa; border: 1px solid #ddd;}