body {
	margin: 0;
	padding: 0;
	font-family: "Lucida Grande", "Lucida Sans", Helvetica, Arial, sans-serif;
	font-size: 100%;
	min-width: 960px;
	background: rgba(253,246,243,1);
}

h1, h2, h3, h4, h5 {
	margin: 0;
}

a {
	text-decoration: none;
}

img {
	border: none;
}

/* header */

#header {
	height: 55px;
	width: 100%;
	padding-top: 7px;
	background: url(/images/background_header.png) repeat-x;
	position: relative;
	z-index: 1000;
}

/* alternative header with border, background, and shadows all done in css
	height: 45px;
	width: 100%;
	padding-top: 7px;
	position: relative;
	z-index: 1000;
	background-color: rgba(175,52,17,1);
	border-top: solid 1px rgba(217,84,29,1);
	border-bottom: solid 1px rgba(217,84,29,1);
	-webkit-box-shadow: 0px 1px rgba(0,0,0,0.3);
	-moz-box-shadow: 0px 1px rgba(0,0,0,0.3);
 */

#navwrapper {
	position: relative;
	width: 920px;
	margin: auto;
}

ul#navigation {
	list-style: none;
	height: 32px;
	width: 500px;
	margin: auto;
}

ul#navigation li {
	float: left;
	border-right: solid 1px rgba(183,73,41,1);
	padding: 6px 26px 0px 26px;
}

ul#navigation li#navcontact {
	border: none;
}

ul#navigation li a {
	text-indent: -5000em;
	display: block;
	height: 33px;
	background-image: url(/images/navigation.png);
	background-repeat: no-repeat;
}

ul#navigation li a:active {
	position: relative;
	top: 1px;
}

#navprojects a {
	width: 69px;
	background-position: 0px 0px;
}
#navprojects a:hover {
	background-position: 0px -33px;
}

#navblog a {
	width: 42px;
	background-position: -119px 0px;
}
#navblog a:hover {
	background-position: -119px -33px;
}

#navabout a {
	width: 60px;
	background-position: -209px 0px;
}
#navabout a:hover {
	background-position: -209px -33px;
}

#navcontact a {
	width: 67px;
	background-position: -311px 0px;
}
#navcontact a:hover {
	background-position: -311px -33px;
}

/* features */

#features {
	position: relative;
	height: 490px;
	background: #fff;
}

#featureimage {
	margin: auto;
	height: 490px;
	width: 960px;
	position: relative;
}

#featureimage img {
	margin: auto;
	z-index: -1000;
	margin-top: -10px;
}

.featuremaskleft {
	position: absolute;
	top: -10px;
	left: 0;
	display: block;
	height: 500px;
	width: 59px;
	background: url(/images/featuresmask_left.png) repeat-y;
}
.featuremaskright {
	position: absolute;
	top: -10px;
	right: 0;
	display: block;
	height: 500px;
	width: 59px;
	background: url(/images/featuresmask_right.png) repeat-y;
}

#strap {
	width: 100%;
	height: 143px;
	position: absolute;
	bottom: 0;
	background: url(/images/background_strap.png) repeat-x;
}

#strapcontent {
	position: relative;
	width: 920px;
	padding: 20px 0px;
	margin: auto;
	height: 98px;
	padding-top: 22px;
	padding-bottom: 23px;
}

h1 a {
	text-indent: -5000em;
	display: block;
	background: url(/images/ketlailogo.png) no-repeat;
	width: 162px;
	height: 161px;
	position: absolute;
	top: -8px;
	left: -1px;
}

#header h1 a {
	-webkit-transition: top 0.3s ease-in-out;
	position: absolute;
	top: -75px;
	left: -1px;
}

#header h1 a:hover {
	top: -10px;
}

#latestproject {
	width: 539px;
	height: 98px;
	border-right: solid 1px rgba(183,73,41,1);
	padding-left: 180px;
	float: left;
}

#latestproject h2, #latestproject p {
	font-family: Georgia, "Times New Roman", serif;
	font-weight: normal;
	color: rgba(255,255,255,1);
	text-shadow: 0 1px 1px rgba(0,0,0,0.3);
}

#latestproject h2 {
	font-size: 28px;
	line-height: 28px;
}

#latestproject p {
	font-size: 13px;
	line-height: 18px;
	width: 360px;
	margin: 0;
	margin-top: 10px;
}

div.seemore, form.formtastic input[type="submit"] {
	font-family: "Lucida Grande", "Lucida Sans", Helvetica, Arial, sans-serif;
	font-size: 9px;
	line-height: 9px;
	font-weight: bold;
	text-transform: uppercase;
	text-shadow: 0 1px 1px rgba(0,0,0,0.3);
}
#latestproject div.seemore  {
	margin-top: 12px;
	float: left;
}
div.seemore a, #content div.projectlist div.seemore a span, #content div.seemore.box a span {
	color: rgba(255,255,255,1);
	padding-right: 18px;
	margin-right: 20px;
	background-image: url(/images/seemorearrow.png);
	background-repeat: no-repeat;
	background-position: right 1px;
}
div.seemore a:hover, #content div.projectlist div.seemore a:hover span, #content div.seemore.box a:hover span {
	color: rgba(255,186,0,1);
	background-image: url(/images/seemorearrow.png);
	background-repeat: no-repeat;
	background-position: right -14px;
}

#content div.projectlist div.seemore a {
	margin-right: 0;
}

#recentprojects {
	height: 93px;
	width: 179px;
	float: left;
	border-right: solid 1px rgba(183,73,41,1);
	padding-left: 20px;
	padding-top: 5px;
}

#recentprojects h3 {
	display: block;
	text-indent: -5000em;
	height: 32px;
	width: 126px;
	background: url(/images/header_recentprojects.png) no-repeat;
	float: left;
}

#recentprojects ul {
	float: left;
	list-style: none;
	padding: 0;
	padding-top: 4px;
	margin: 0;
	font-family: "Lucida Grande", "Lucida Sans", Helvetica, Arial, sans-serif;
	font-size: 11px;
	line-height: 11px;
	font-weight: bold;
	text-shadow: 0 1px 1px rgba(0,0,0,0.3);
}
#recentprojects ul li {
	margin-bottom: 8px;
}
#recentprojects ul li a {
	color: rgba(255,255,255,1);
	padding-left: 18px;
}
#recentprojects ul li a.active {
	background: url(/images/seemorearrow.png) no-repeat left 2px;
}
#recentprojects ul li a:hover {
	color: rgba(255,186,0,1);
	background: url(/images/seemorearrow.png) no-repeat left -13px;
}

/* content header */

#contentheader {
	background: rgba(255,255,255,1);
}

#contentheader h2 {
	margin: auto;
	width: 740px;
	padding-left: 200px;
	padding-right: 20px;
	padding-top: 33px;
	padding-bottom: 37px;
	font-family: Georgia, "Times New Roman", serif;
	font-weight: normal;
	font-style: italic;
	font-size: 40px;
	line-height: 50px;
	color: rgba(93,21,0,1);
}

body.homepage #contentheader h2 {
	font-size: 20px;
	line-height: 32px;
}

/* content */

#content {
	margin: auto;
	width: 920px;
	border-top: solid 1px rgba(214,149,130,1);
	color: rgba(195,56,21,1);
}

#content h3, label {
	font-size: 10px;
	text-transform: uppercase;
	color: rgba(93,21,0,1);
}

#content p a, #content ul a {
	color: rgba(255,129,27,1);
}
#content a:hover, #content ul a:hover {
	color: rgba(141,71,14,1);
}

/* content columns */

.fivecolumnheader {
	float: left;
	width: 920px;
	padding-top: 18px;
	padding-bottom: 50px;
	border-top: solid 1px rgba(214,149,130,1);
}

.fourcolumnheader {
	float: left;
	width: 700px;
	padding-top: 18px;
	padding-bottom: 50px;
	border-top: solid 1px rgba(214,149,130,1);
}
.fourcolumnheader:first-child, .fivecolumnheader:first-child {
	border-top: none;
}
.fourcolumnheader.first, .fivecolumnheader.first {
	border-top: none;
}

.fourcolumnheader h3, .fivecolumnheader h3 {
	float: left;
	width: 160px;
	line-height: 16px;
	margin-top: 3px;
}

.fourcolumnheader p, .fivecolumnheader p {
	margin-left: 180px;
	font-family: Georgia, "Times New Roman", serif;
	font-size: 14px;
	line-height: 21px;
	margin-top: 0;
	margin-bottom: 14px;
}

.fivecolumnheader.projectlist p {
	margin-right: 200px;	
}

.fourcolumnheader pre, .fivecolumnheader pre {
	margin-left: 180px;
	margin-bottom: 14px;
	padding: 14px;
	overflow: auto;
	border: solid 1px rgba(238, 187, 181,1);
	background: rgba(255,255,255,1);
	white-space: none;
}

.onecolumn {
	width: 200px;
	margin-left: 720px;
	padding-top: 18px;
	padding-bottom: 10px;
	border-bottom: solid 1px rgba(214,149,130,1);
}

.onecolumn h3 {
	line-height: 24px;
}

.onecolumn h4 {
	margin-top: 14px;
	font-family: Georgia, "Times New Roman", serif;
	font-size: 12px;
	line-height: 16px;
	font-style: italic;
}

.onecolumn p {
	font-size: 11px;
	line-height: 16px;
}

p.readmore {
	text-align: right;
	font-size: 9px;
	line-height: 9px;
	font-weight: bold;
	text-transform: uppercase;
	margin-top: 14px;
}

.onecolumn ul {
	font-size: 11px;
	line-height: 18px;
	list-style: none;
	padding: 0;
}

.onecolumn ul li {
	padding-right: 20px;
	text-align: right;
}

.onecolumn ul.bloglist li {
	text-align: left;
}

/* projects list page */

div.projectlist img.listimage {
	width: 150px;
	margin-bottom: 8px;
	-webkit-border-radius: 2px;
	-moz-border-radius: 2px;
}

#content div.projectlist {
	position: relative;
}

#content div.projectlist div.seemore {
	float: right;
	position: relative;
	top: 0px;
	right: 0px;
}

#content div.projectlist div.seemore a, div.seemore.box a {
	display: block;
	padding: 8px;
	width: 150px;
	background-color: rgba(185,62,27,1);
	/* old colours
	background-color: rgba(175,52,17,1);
	border: solid 1px rgba(217,84,29,1);
	*/
	border: solid 1px rgba(255,129,27,1);
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-box-shadow: 0px 1px rgba(0,0,0,0.3);
	-moz-box-shadow: 0px 1px rgba(0,0,0,0.3);
}

#content div.seemore.box a {
	width: 173px;
	color: rgba(255,255,255,1);
	margin-left: 180px;
}

#content div.projectlist div.seemore a span, #content div.seemore.box a span {
	display: block;
	margin-right: 0px;
	background-position: right 0px;
}

#content div.projectlist div.seemore a:hover span, #content div.seemore.box a:hover span {
	background-position: right -15px;	
}

#content div.projectlist div.seemore a, #content div.seemore.box a {
	background-image: none;
}

#content div.projectlist div.seemore a:hover, #content div.seemore.box a:hover {
	color: rgba(255,186,0,1);
	background-image: none;
}

#content div.projectlist div.seemore a:active, #content div.seemore.box a:active {
	position: relative;
	top: 1px;
	background-image: none;
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
}

/* project pages */

h3.projectsummary {
	overflow: auto;
	height: inherit;
	padding: 8px;
	text-shadow: 0 1px 1px rgba(0,0,0,0.3);
	background-color: rgba(185,62,27,1);
	/* old colours
	background-color: rgba(175,52,17,1);
	border-right: solid 1px rgba(217,84,29,1);
	border-left: solid 1px rgba(217,84,29,1);
	border-bottom: solid 1px rgba(217,84,29,1);
	*/
	border-right: solid 1px rgba(255,129,27,1);
	border-left: solid 1px rgba(255,129,27,1);
	border-bottom: solid 1px rgba(255,129,27,1);
	-webkit-border-bottom-left-radius: 5px;
	-webkit-border-bottom-right-radius: 5px;
	-moz-border-radius-bottomleft: 5px;
	-moz-border-radius-bottomright: 5px;
	-webkit-box-shadow: 0px 1px rgba(0,0,0,0.3);
	-moz-box-shadow: 0px 1px rgba(0,0,0,0.3);
}

h3.projectsummary img.projectimage {
	float: left;
	width: 300px;
	margin-right: 16px;
	-webkit-border-radius: 2px;
	-moz-border-radius: 2px;
}

h3.projectsummary span {
	display: block;
	color: rgba(255,255,255,1);
	font-family: Georgia, "Times New Roman", serif;
	font-weight: normal;
	font-size: 24px;
	line-height: 28px;
	text-transform: none;
}

/* blog page */

h3 .subhead {
	display: block;
	font-family: Georgia, "Times New Roman", serif;
	text-transform: none;
	font-style: italic;
	color: rgba(195,56,21,1);
}

/* contact page */

#content form.contactform label {
	width: 200px;
}

label {
	font-family: "Lucida Grande", "Lucida Sans", Helvetica, Arial, sans-serif;
	font-weight: bold;
	text-align: right;
	padding-right: 8px;
	line-height: 16px;
	padding-top: 4px;
}

input[type="text"], textarea {
	font-family: Georgia, "Times New Roman", serif;
	font-size: 13px;
	background: transparent;
	border: none;
	border-bottom: dashed 1px rgba(255,129,27,1);
	color: rgba(195,56,21,1);
	padding: 4px;
	width: 250px;
}

textarea {
	border-right: dashed 1px rgba(255,129,27,1);
}

input[type="text"]:focus, textarea:focus {
	background-color: rgba(255,255,255,1);
}

form.formtastic input[type="submit"] {
	padding: 8px;
	color: rgba(255,255,255,1);
	background-color: rgba(185,62,27,1);
	border: solid 1px rgba(255,129,27,1);
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-box-shadow: 0px 1px rgba(0,0,0,0.3);
	-moz-box-shadow: 0px 1px rgba(0,0,0,0.3);
}
form.formtastic input[type="submit"]:hover {
	color: rgba(255,186,0,1);
	cursor: pointer;
}

input[type="submit"]:active {
	position: relative;
	top: 1px;
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
}

p.notice {
	padding: 10px;
	padding-left: 245px;
	font-size: 11px;
	text-transform: uppercase;
}

/* footer */
 
#footer {
	background: url(/images/background_footer.png) repeat-x;
}

#footercontent {
	width: 760px;
	margin: auto;
	padding-left: 200px;
	padding-top: 15px;
}

#footer p {
	font-weight: bold;
	font-size: 9px;
	line-height: 12px;
	color: rgba(240,120,50,1);
	text-shadow: 0 1px 1px rgba(0,0,0,0.3);
	float: left;
	padding-left: 20px;
	padding-top: 6px;
	border-left: solid 1px rgba(183,73,41,1);
	height: 32px;
}

#footer a {
	color: rgba(255,255,255,1);
}
#footer a:hover {
	color: rgba(255,186,0,1);
}

p#footercopyright {
	width: 159px;
}
p#footermoreinfo {
	width: 339px;
}

/* forms */

form.formtastic.message ol li {
	margin-left: 250px;
}

form.formtastic.message ol li.text textarea {
	width: 250px;
}

form.formtastic.message ol li#message_copy_input {
	margin-left: 220px;
}

form.formtastic.message ol li#message_copy_input label {
	text-align: right;
	width: 200px;
	padding-left: 0;
	padding-right: 0;
}

form.formtastic.message ol li#message_copy_input input {
	float: right;
	margin-top: 2px;
}

form.formtastic.message ol li.commit {
	margin-left: 230px;
}

/*  
Sticky Footer Solution by Steve Hatcher http://stever.ca http://www.cssstickyfooter.com
*/

* {margin:0;padding:0;} 

/* must declare 0 margins on everything, also for main layout components use padding, not 
vertical margins (top and bottom) to add spacing, else those margins get added to total height 
and your footer gets pushed down a bit more, creating vertical scroll bars in the browser */

html, body, #container {height: 100%;}

body > #container {height: auto; min-height: 100%;}

#main {padding-bottom: 75px;}  /* must be same height as the footer */

#footer {position: relative;
	margin-top: -55px; /* negative value of footer height */
	height: 55px;
	clear:both;} 

/* CLEAR FIX*/
.clearfix:after {content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;}
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix { height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */




/* JYS changes */
#content label {
  width: 150px;
  float: left;
}
#content .checkbox input {
  margin-left: 150px;
  margin-right: 20px;
}
#content .checkbox label {
  float: none;
}
#latestproject p {
  width: 440px;
}
.alignleft {
  float: left;
  margin: 0px 12px 8px 0px;
}
#twitter h3 {
  background-image: url(/images/newuser-bird-left.gif); 
  background-position: top right; 
  background-repeat: no-repeat;
}