/* reset
   ================================================== */

* {
	margin: 0;
	padding: 0;
}

/* global
   ================================================== */

html {
	background: url("../img/bg.png") repeat-x;
}

body {
	min-width: 960px;
	font-family: Arial, sans-serif;
}

#wrapper {
	margin: 0 auto;
	width: 960px;
}

h1, h2, h3, h4, h5, h6 {
	font-family: Arial, sans-serif;
	color: #333;
}

h2 {
	font-size: 20px;
}

p {
	font-family: Arial, sans-serif;
	font-size: 12px;
	color: #333;
}

ul, ol, dl {
	list-style: none;
}

li {
	font-family: Arial, sans-serif;
}

a, img {
	outline: none;
	border: none;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
	empty-cells: hide;
	table-layout: fixed;
}

.clear {
	clear: both;
}

.bold {
	font-weight: bold;
}

#simpleTooltip {
	margin: 10px 0 0 0;
	padding: 5px;
	font-size: 12px;
	color: #fff;
	background: #FF0000;
	border: 1px solid #8B3D3C;
}

/* header & navigation
   ================================================== */

#header-top {
	height: 80px;
	background: #303030 url(../img/header_top_bg.png) repeat-x;
	color: #fff;
	border-bottom: 1px solid #292929;
}

	#header-top-content {
		margin: 0 auto;
		width: 960px;
	}

		#smartmouse-logo {
			margin: 15px 0 0 0;
			float: left;
			position: relative;
			width: 315px;
			height: 51px;
			background: url(../img/header_logo.png) no-repeat;
			background-position: bottom;
		}
		
			#smartmouse-logo a {
				position: absolute;
				width: 315px;
				height: 51px;
			}
			
		#header-top-content-rightcol {
			float: right;
			width: 446px;
		}

			#phone-top {
				float: right;
				width: 209px;
				height: 23px;
				border-left: 1px solid #3E3E3E;
				border-right: 1px solid #3E3E3E;
				border-bottom: 1px solid #333;
				background: url(../img/phone_top.png) no-repeat;
			}
			
				#phone-top h3 {
					text-indent: -9999px;
				}

			#nav {
				margin: 16px 0 0 15px;
				width: 446px;
				height: 40px;
				background: url(../img/nav.png) no-repeat;
			}
			
				#nav li, #nav a {
					display: block;
					height: 40px;
				}

				#nav li {
					display: inline;
				}
					
				#nav span {
					display: none;
					}
					
					#nav-home {
						margin: 0 0 0 15px;
						position: absolute;
						width: 57px;
						background: url(../img/nav.png) -15px 0 no-repeat;
					}
					
						#nav-home a:hover {
							background: url(../img/nav.png) -15px -40px no-repeat;
						}

					#nav-services {
						margin: 0 0 0 73px;
						position: absolute;
						width: 130px;
						background: url(../img/nav.png) -73px 0 no-repeat;
					}

						#nav-services a:hover {
							background: url(../img/nav.png) -73px -40px no-repeat;
						}

					#nav-testimonials {
						margin: 0 0 0 204px;
						position: absolute;
						width: 97px;
						background: url(../img/nav.png) -204px 0 no-repeat;
					}

						#nav-testimonials a:hover {
							background: url(../img/nav.png) -204px -40px no-repeat;
						}
						
					#nav-about {
						margin: 0 0 0 302px;
						position: absolute;
						width: 59px;
						background: url(../img/nav.png) -302px 0 no-repeat;
					}

						#nav-about a:hover {
							background: url(../img/nav.png) -302px -40px no-repeat;
						}

					#nav-contact {
						margin: 0 0 0 362px;
						position: absolute;
						width: 69px;
						background: url(../img/nav.png) -362px 0 no-repeat;
					}

						#nav-contact a:hover {
							background: url(../img/nav.png) -362px -40px no-repeat;
						}

/* content / home
   ================================================== */

#content {
	margin: 0 auto;
}

	#banner-home {
		margin: 0 auto;
		position: relative;
		width: 960px;
		height: 211px;
		background: url(../img/banner_home.png) no-repeat;
	}
	
		#banner-home h2, h3 {
			text-indent: -9999px;
		}

	#leftcol-home {
		width: 359px;
		float: left;
	}

		#services-home {
			margin: -12px 0 0 0;
			float: left;
			width: 359px;
			height: 129px;
			text-indent: -9999px;
			background: url(../img/services_home.png) no-repeat;
		}

			a#services-home-button {
				width: 128px;
				height: 65px;
				margin: -294px 0 0 246px;
				position: absolute;
				text-indent: -9999px;
				background-position: center;
				background: url(../img/services_button.png) no-repeat;
			}

				a#services-home-button:active {
					margin: -294px 0 0 246px;
					background: url(../img/services_button_hover.png) no-repeat;
					background-position: center;
				}

		#contact-home {
			float: left;
			width: 359px;
			height: 81px;
			background: url(../img/contact_home.png) no-repeat;
		}

			#contact-home h3 {
				text-indent: -9999px;
			}

			#contact-home ul {
				margin: 12px 0 0 21px;
				list-style-type: none;
			}
			
				#contact-home ul li p {
					line-height: 18px;
					color: #fff;
				}
				
					#contact-home ul li p a {
						color: #fff;
						text-decoration: none;
					}

		#concepts-home {
			margin: 12px 0 0 0;
			float: left;
			width: 359px;
			height: 174px;
			background: url(../img/concepts_home.png) no-repeat;
		}

	#rightcol-home {
		float: right;
		width: 575px;
	}

		#testimonials-home {
			margin: 12px 0 0 0;
			float: right;
			width: 575px;
			height: 380px;
		}
		
			span.home-bubble {
				margin: 0 0 0 10px;
				position: absolute;
				width: 28px;
				height: 26px;
				background: url(../img/bubble.png) no-repeat;
			}

			#testimonials-home h2 {
				margin: 0 0 0 45px;
				position: relative;
				font-weight: 100;
			}

			#slider ul {
				margin: 0 auto;
			}

				#slider ul li {
					margin: 0 auto;
					padding: 0;
					width: 575px;
					height: 385px;
					list-style-type: none;
				}
						
					.testimonials-home-single {
						margin: 10px 0 15px 10px;
						background: #DBE9F8;
						border: 1px solid #bfcbd8;
						width: 563px;
					}

						#slider ul li p {
							padding: 12px;
							line-height: 18px;
						}

			#controls p {
				position: absolute;
			}

				#nextBtn {
					margin: -407px 0 0 556px;
					position: absolute;
					width: 20px;
					height: 20px;
				}

					#nextBtn a {  
						position: absolute;
						width:20px;
						height:20px;
						background: url(../img/more_button.png) no-repeat;
					}

						#nextBtn a:active {
							background: url(../img/more_button_hover.png) no-repeat;
						}

				#prevBtn {
					margin: -407px 0 0 536px;
					position: absolute;
					width: 20px;
					height: 20px;
				}

					#prevBtn a {  
						position: absolute;
						width:20px;
						height:20px;
						background: url(../img/more_button_back.png) no-repeat;
					}

						#prevBtn a:active {
							background: url(../img/more_button_back_hover.png) no-repeat;
						}

			#more-button {
				display: none;
			}

/* content / services
   ================================================== */

#banner-services {
	margin: 0 auto;
	position: relative;
	width: 960px;
	height: 211px;
	background: url(../img/banner_services.png) no-repeat;
}
	
	#banner-services h2, h3 {
		text-indent: -9999px;
	}

.services-contentbox {
	padding: 12px;
	background: #DBE9F8;
	border: 1px solid #bfcbd8;
}

	.services-contentbox p {
		padding: 8px;
		font-size: 14px;
		line-height: 22px;
	}

#training {
	margin: 12px 0 0 0;
}
	
	#training h1 {
		margin: 0 0 0 20px;
		text-indent: -9999px;
		width: 414px;
		height: 61px;
		background: url(../img/services_training_h1.png) no-repeat;		
	}
	
	#services-button {
		width: 108px;
		height: 31px;
		margin: -35px 0 0 500px;
		position: absolute;
		text-indent: -9999px;
		background-position: center;
		background: url(../img/services_learnmore_button.png) no-repeat;
	}

		#services-button:active {
			margin: -35px 0 0 500px;
			background: url(../img/services_learnmore_button_hover.png) no-repeat;
			background-position: center;
		}

#consulting {
	margin: 12px 0 0 0;
}

	#consulting h1 {
		margin: 0 0 0 20px;
		text-indent: -9999px;
		width: 414px;
		height: 61px;
		background: url(../img/services_consulting_h1.png) no-repeat;		
	}

#troubleshooting {
	margin: 12px 0 8px 0;
}

	#troubleshooting h1 {
		margin: 0 0 0 20px;
		text-indent: -9999px;
		width: 414px;
		height: 61px;
		background: url(../img/services_troubleshooting_h1.png) no-repeat;		
	}

/* content / testimonials
   ================================================== */

#testimonials-h2 {
	margin: 32px 0 0 0;
	padding: 12px;
	background: #5DAAFD;
	border: 1px solid #4B88C9;
}

	span.testimonials-bubble {
		position: absolute;
		width: 28px;
		height: 26px;
		background: url(../img/bubble.png) no-repeat;
	}

	#testimonials h2 {
		margin: 0 0 0 35px;
		color: #fff;
		font-weight: 100;
	}

.testimonials-single {
	margin: 32px 16px 16px 16px;
	padding: 12px;
	background: #DBE9F8;
	border: 1px solid #bfcbd8;
}

	.testimonials-single p {
		padding: 8px;
		font-size: 14px;
		line-height: 22px;
	}

.testimonials-single-small {
	margin: 16px;
	padding: 12px;
	float: left;
	width: 262px;
	height: 185px;
	background: #DBE9F8;
	border: 1px solid #bfcbd8;
}

	.testimonials-single-small p {
		padding: 8px;
		font-size: 14px;
		line-height: 22px;
	}
	
.testimonials-single-alt {
	background: #C8DFF8;
}

/* content / about
   ================================================== */

#about {
	margin: 32px 0 8px 0;
	background: #DBE9F8;
	border: 1px solid #bfcbd8;
}

	#about h2 {
		margin: 30px 0 0 60px;
		padding: 12px;
		width: 500px;
		color: #fff;
		line-height: 28px;
		font-weight: 100;
		background: #5DAAFD;
		border: 1px solid #4B88C9;
	}
	
		#about-h2-links a {
			font-size: 16px;
			color: #333;
		}
	
	#about-facebook {
		margin: 12px;
		float: right;
		width: 300px;
		height: 487px;
	}
	
	#about-social {
		margin: 50px 0 0 0;
	}
	
		#about-social p {
			margin: 0 0 0 180px;
			width: 320px;
			font-size: 14px;
			line-height: 22px;
		}
		
		#about-social-sites {
			margin: 30px 0 0 110px;
			width: 500px;
		}
		
			#about-social-sites-twitter {
				margin: 0 15px 0 15px;
				float: left;
				width: 150px;
				height: 134px;
				background: url(../img/about_twitter.png) no-repeat;
			}

				#about-social-sites-twitter a {
					float: left;
					width: 150px;
					height: 134px;
				}
			
			#about-social-sites-facebook {
				margin: 0 15px 0 15px;
				float: left;
				width: 200px;
				height: 134px;
				background: url(../img/about_facebook.png) no-repeat;
			}

				#about-social-sites-facebook a {
					float: left;
					width: 200px;
					height: 134px;
				}

/* content / contact
   ================================================== */

#contact-info {
	margin: 50px auto;
	width: 330px;
}

	#contact-logo {
		margin: 0 auto;
		width: 200px;
		height: 208px;
		background: url(../img/about_logo.png) no-repeat;
	}

	#contact-info h2 {
		margin: 10px 0;
		text-align: center;
		font-weight: 100;
		line-height: 28px;
	}
	#contact-info h1 {
		text-align: center;
		margin: 0 0 10px;
	}

#contact {
	margin: 32px 0 8px 0;
	padding: 10px;
	float: right;
	position: relative;
	width: 592px;
	height: 455px;
	background: #DBE9F8;
	border: 1px solid #bfcbd8;
}

	#contactForm {
		position: relative;
	}
	
		#contactForm ul li {
			padding: 10px;
		}
		
		#contactForm label, input, textarea {
			overflow: auto;
			color: #333;
			font-size: 16px;
		}
			
		#contactForm ul li label {
			float: left;
			width: 140px;
		}
		
		#contactForm #name, #phone, #email {
			margin: 0 0 10px 0;
			padding: 5px;
			width: 280px;
			height: 20px;
			font-weight: bold;
			border: 1px solid #c9c9c9;
		}
			
		#contactForm #comment {
			width: 430px;
			height: 210px;
			border: 1px solid #c9c9c9;
		}
			
		#contactForm .button {
			margin: 0 0 0 140px;
		}
			
	#message {
		margin: 150px auto;
		padding: 15px 15px 18px 15px;
		width: 300px;
		text-align: center;
		background: #EBF2FA;
		border: 1px solid #D3D9E0;
	}
		
		#message h2 {
			font-size: 28px;
		}
		
		#message p {
			margin: 5px 0 0 0;
			font-size: 14px;
		}
		
	label#name_error, label#email_error, label#phone_error {
		margin: -32px 0 0 440px;
		position: absolute;
		color: red;
		font-size: 10px;
	}
	
#contact-call {
	text-align: center;
}

#contact-chat {
	float: right;
}

/* footer
   ================================================== */

#footer {
	padding: 2px 0 12px 0;
	clear: both;
	border-top: 1px solid #ddd;
}

	#footer-content {
		float: right;
		width: 420px;
		height: 25px;
	}

		p#copyright {
			padding: 8px 0 0 0;
			float: left;
			width: 210px;
			height: 17px;
			color: #999;
			font-size: 10px;
		}
	
		p.valid {
			padding: 4px 0 0 10px;
			float: left;
			width: 60px;
			height: 21px;
		}