/* Sprite */

#navigation em a,
.stripNavL a,
.stripNavR a,
#contentRight .uspOne,
#contentRight .uspTwo,
#contentRight .uspThree,
.titleAbout,
.titleContact,
#footer .top,
#filter a,
#filter .selected a,
.ciClient,
.ciProblem,
.ciSolution,
.formButton,
#hireMeButton,
.readOn,
.archives
{
	background: url(../images/sprite.png) no-repeat;
}

/* Typography */

h1 {
	color: #666666;
	font-size: 40px;
}

h2 {
	color: white;
	font-size: 28px;
	margin: 0;
	padding: 0;
}

#contentLeft h2 {
	color: #333333;
	font-size: 24px;
	margin: 0 0 10px 0;
}

h3 {
	color: #555555;
	font-size: 20px;
	margin: 0 0 10px 0;
}

/* Links */

a {	text-decoration: none;	color: #ff3300;	}
a:hover { text-decoration: underline; cursor: pointer; }
a:visited { color: #cc3300; }

a img {
	border: none;	
}

h1 a, h1 a:visited {
	color: #999999;
	text-decoration: none;
}

/* Lay-out */

* {
	outline: none;
}

body {
	background: url(../images/body_bg.jpg) repeat-x #a9a9a9;
	font-family: "Lucida Sans", "Lucida Grande", Arial, Verdana, sans-serif;
	line-height: 160%;
	font-size: 13px;
	color: #333333;
	margin: 0;
	padding: 0;
}

p em {

	font-style: normal;

	font-weight: normal;

	color: #666666;

}


#wrapper {
	margin: 0px auto;
	width: 991px;
	min-height: 515px;
	background: url(../images/container_bg.gif) no-repeat center 119px;
}

	#container {
		width: 951px;
		margin: 0px auto;
	}
	
	#header {
		width: 951px;	
	}
	
		#logo {
			float: left;
			height: 40px;
			margin: 30px 0 6px 10px;
		}
		
			#logo h1 {
				margin: 0;
				padding: 0;	
			}
			
			#logo .cufon {
				float: left;
			}
		
		#hireMe {
			float: right;
			width: 160px;
			margin: 25px 0 0 0;
			font-size: 14px;
			color: #999999;
			text-align: center;
			line-height: 130%;
		}
			
		#navigation {
			clear: left;
			float: left;
			width: 750px;
			margin-top: 10px;
		}
			
			#navigation em a {
				float: left;
				margin: 0 6px 0 0;
				font-style: normal;
				font-weight: bold;
				font-size: 16px;
				width: 129px;
				height: 26px;
				padding: 7px 0 0 0;
				text-align: center;
				background-position: -112px -33px;	
			}
			
			#navigation em a, #navigation em a:visited {
				text-decoration: none;
				color: #333333;
			}
			
			#navigation em a:hover {
				background-position: -112px 0px;
				color: #ff3300;		
			}
			
			#navigation em a.selected {
				background-position: -112px 0px;
				color: #ff3300;	
			}
	/* Homepage header */
		
	#slider {
		clear: left;
		float: left;
		display: block;
		margin: 10px 0 0 10px;
		display: block;
		width: 929px;
		height: 298px;
		border: 1px solid #ABABAB;
	}
	
		.stripNav {
			visibility: hidden;
			position: absolute !important;
		}
		
		.stripViewer .panelContainer .panel ul {
			text-align: left;
			margin: 0 15px 0 30px;
		}
		
		.slider-wrap { /* This div isn't entirely necessary but good for getting the side arrows vertically centered */
			margin: 0;
			position: relative;
			width: 100%;
		}
	
		/* These 2 lines specify style applied while slider is loading */
		
		.csw {
			width: 100%;
			height: 298px;
			background: #fff;
			color: white;
			overflow: hidden;
			background: url(../images/slider_bg.jpg) no-repeat #333333;
		}
		
		.csw .loading {
			margin: 120px 0 180px 0;
			text-align: center;
			padding: 0 0 0 5px;
		}
		
		.csw .loading img {
			margin: 5px 5px 0 0;
		}
	
		.stripViewer { /* This is the viewing window */
			position: relative;
			overflow: hidden; 
			margin: auto;
			background: url(../images/slider_bg.jpg) no-repeat #333333;
			width: 929px; /* Also specified in  .stripViewer .panelContainer .panel  below */
			height: 298px;
			clear: both;
		}
		
		.panelContainer { /* This is the big long container used to house your end-to-end divs. Width is calculated and specified by the JS  */
			position: relative;
			left: 0;
			top: 0;
			width: 100%;
			list-style-type: none;
			/* -moz-user-select: none; // This breaks CSS validation but stops accidental (and intentional - beware) panel highlighting in Firefox. Some people might find this useful, crazy fools. */
		}
		
		.panelContainer .panel { /* Each panel is arranged end-to-end */
			float:left;
			height: 298px;
			position: relative;
			width: 929px; /* Also specified in  .stripViewer  above */
		}
		
		.panelContainer .panel .wrapper { /* Wrapper to give some padding in the panels, without messing with existing panel width */
			padding: 0px 70px;
		}
		
			.panelContainer .panel .wrapper .text {
				float: left;
				width: 258px;
				padding: 20px 20px 20px 0;
				color: white;
			}
			
			.panelContainer .panel .wrapper #textNoJS {
				float: left;
				height: 260px;
				padding: 20px;	
			}
			
			.panelContainer .panel .wrapper .image {
				float: right;
				margin: 0;
				padding: 0;
				width: 510px;
				height: 300px;
			}
			
		.stripNavL, .stripNavR { /* The left and right arrows */
			position: absolute;
			top: 140px;
			z-index: 100;
			text-indent: -9000em;
		}
		
		.stripNavL a, .stripNavR a {
			display: block;
			height: 29px;
			width: 27px;
		}
		
		.stripNavL {
			left: 20px;
		}
		
		.stripNavR {
			right: 20px;
		}
		
		.stripNavL a {
			background-position: 0px -79px;
		}
		
		.stripNavR a {
			background-position: -54px -79px;
		}
		
		.stripNavR a:hover {
			background-position: -81px -79px;
		}
	
		.stripNavL a:hover {
			background-position: -27px -79px;
		}

	
	/* Non-homepage headers */
	
	#sliderStatic {
		clear: left;
		float: left;
		display: block;
		margin: 10px 0 0 10px;
		display: block;
		width: 929px;
		height: 148px;
		border: 1px solid #ABABAB;
	}
	
	/* Content layer */
	
	#content {
		clear: left;
		float: left;
		padding: 20px;
		width: 911px;
		background: white;	
	}
	
		/* Left colum */
		
		#contentLeft {
			float: left;
			width: 584px;
		}
			
			#contentLeftMore {
				float: left;
				width: 270px;
				padding: 0 20px 0 0;
				border-right: 1px solid #DDDDDD;	
			}
			
			#contentLeftOld {
				float: right;
				width: 270px;
				padding: 0 0 0 20px;
			}
			
				#contentLeftOld .date {
					color: #555555;	
				}
		
		/* Right colum */
		
		#contentRight {
			float: right;
			padding: 20px 25px 0 25px;
			width: 259px;
			min-height: 510px;
			background: url(../images/content-right_bg.png) no-repeat top center;
		}
		
			#contentRight .uspOne, #contentRight .uspTwo, #contentRight .uspThree {
				padding: 0 10px 0 0;
				height: 50px;
				width: 38px;
			}
			
			#contentRight .uspOne {
				background-position: -241px -65px;
			}
			
			#contentRight .uspTwo {
				background-position: -291px -65px;
			}
			
			#contentRight .uspThree {
				background-position: -344px -65px;
			}
			
			.titleAbout {
				background-position: -397px -75px;
				height: 39px;
				width: 36px;
			}
			
			.titleContact {
				background-position: -447px -80px;
				height: 39px;
				width: 36px;
			}
	
	/* Footer */
	
	#footer {
		width: 911px;
		font-size: 11px;
		clear: both;
		float: left;
		height: 8px;
		padding: 26px 20px 26px 20px;
		margin-bottom: 30px;
		background: url(../images/footer_bg.jpg) no-repeat top center;
	}
	
		#footer .alignLeft {
			float: left;
		}
		
		#footer .alignRight {
			float: right;
		}
		
		#footer .top {
			float: right;
			display: block;
			background-position: -496px -76px;
			padding: 0 0 0 28px;
			height: 23px;
		}
	
	/* Alignment and style of images */
	
	#content .alignLeft, #content .alignRight {
		padding: 10px;
		border: 1px solid #DDDDDD;
		background: #F5F5F5;	
	}
	
	#content .alignLeft {
		float: left;
		margin: 0 10px 10px 0;	
	}
	
	#content .alignRight {
		float: right;
		margin: 0 0 10px 10px;	
	}
	
	#content img {
		padding: 10px;
		border: 1px solid #DDDDDD;
		background: #F5F5F5;	
	}
	
	.thumb {
		display: block;
		padding: 10px;
		border: 1px solid #DDDDDD;
		background: #F5F5F5;
		width: 564px;
		height: 150px;
	}
		
		.thumb img {
			padding: 0px !important;
			border: none !important;
			background: none !important;	
		}
	
	.thumb:hover {
		padding: 0px;
		border: 11px solid #DDDDDD;
		background: #F5F5F5;
	}

/* Portfolio page */
			
#filter {
	float: left;
	margin: 0 0 20px 0;	
}

#filter em {
	float: left;
	display: inline;
	font-style: normal;
}

	#filter a {
		cursor: pointer;
		display: block;
		width: 102px;
		height: 22px;
		margin: 5px 10px 0 0;
		text-align: center;
		background-position: -577px 0px;
		color: white;
	}
	
	#filter a:hover {
		background-position: -577px -22px;
		color: #333333;
	}
	
	#filter .selected a {
		background-position: -577px -44px;
		color: #333333;
	}
	
.clientInfo {
	color: #333333;
	width: 544px;
	margin: 10px 20px 0 20px;	
}
	
	.ciClient, .ciProblem, .ciSolution {
		width: 14px;	
	}

	.ciClient {
		background-position: -111px -90px;
	}
	
	.ciProblem {
		background-position: -154px -90px;
	}
	
	.ciSolution {
		background-position: -134px -90px;
	}

/* Contact page */
			
.contactTable {
	width: 45%;
	float: left;	
}

.formTable td {
	padding: 5px 0;	
}

.formField, .formSelect, .formTextarea, .formButton {
	font-family: "Lucida Sans", "Lucida Grande", Arial, Verdana, sans-serif;
	font-size: 13px;
	color: #333333;	
}

.formField {
	height: 17px;
	width: 300px;
	padding: 5px;
	border: 1px solid #ccc;
	background: url(../images/field_bg.jpg) repeat-x top left;
}

.formTextarea {
	height: 200px;
	width: 300px;
	padding: 5px;
	border: 1px solid #ccc;
	background: url(../images/field_bg.jpg) repeat-x top left;
}

.formButton {
	border: none;
	display: block;
	width: 112px;
	height: 30px;
	background-position: -465px 0px;
	text-indent: -9999px;
}

.formButton:hover {
	background-position: -465px -30px;	
}

/* Buttons */

#hireMeButton {
	display: block;
	margin: 7px auto 0 auto;
	width: 112px;
	height: 30px;
	background-position: 0px 0px;
	text-indent: -9999px;
}

#hireMeButton:hover {
	background-position: 0px -30px;	
}

.panel .readOn {
	display: block;
	width: 112px;
	height: 30px;
	background-position: -679px 0px;
	text-indent: -9999px;
	margin-top: 15px;
}

.panel .readOn:hover {
	background-position: -679px -30px;	
}

.readOn {
	display: block;
	width: 112px;
	height: 30px;
	background-position: -241px 0px;
	text-indent: -9999px;
	margin-top: 15px;
}

.readOn:hover {
	background-position: -241px -30px;	
}

.archives {
	display: block;
	width: 112px;
	height: 30px;
	background-position: -353px 0px;
	text-indent: -9999px;
	margin: 10px 0 0 0;
}

.archives:hover {
	background-position: -353px -30px;	
}

/* Other elements */
	
.hr {
	clear: both;
	height: 1px;
	border-top: 1px solid #dddddd;
	font-size: 0px;
	line-height: 0px;
	padding: 0;
	margin: 15px auto;
}

.clr {
	clear: both;	
}

.accordion {
	width: 250px;
	border-bottom: solid 1px #c4c4c4;
}
.accordion h3 {
	background: #e9e7e7 url(../images/arrow-square.gif) no-repeat right -51px;
	padding: 7px 15px;
	margin: 0;
	font: bold 120%/100% Arial, Helvetica, sans-serif;
	border: solid 1px #c4c4c4;
	border-bottom: none;
	cursor: pointer;
}
.accordion h3:hover {
	background-color: #e3e2e2;
}
.accordion h3.active {
	background-position: right 5px;
}
.accordion p {
	background: #f7f7f7;
	margin: 0;
	padding: 10px 15px 20px;
	border-left: solid 1px #c4c4c4;
	border-right: solid 1px #c4c4c4;
}