* {margin: 0; padding: 0; line-height: 1.5;}
ol,ul {list-style: none;}
a {text-decoration: none; color: #333;}
a:hover {text-decoration:underline;}
a img {border: none; text-decoration: none;}
.clearboth {clear: both; height: 1px; font-size: 0.01px; line-height: 0.01px;}
.ie6-upgradebar {display: none;}
 

body {
	font-family: Helvetica, Arial, sans-serif;
	background: #FFF;
	color: #232428 !important;
	font-size: 0.75em;
}
	
#fader {
	margin: 0px auto;
	width: 1080px;
	background: transparent url('../images/fade-bg.png') center repeat-y;
}


/*****************************************************/
/*************** WELCOME + SITE ACTIONS **************/
/*****************************************************/

#top {
	background: #1f1f22;
	margin: 0px auto;
	overflow: hidden; clear: both;	
}

#top-inner {
	margin: 0px auto;
	padding: 0 20px;
	width: 960px;
}
	
#top a:hover {
	background: none;
	border-bottom: none;
	text-decoration: none;
}

#top-welcome {
	float: right;
}
	
#top-welcome .ms-SpLinkButtonActive, #top-welcome .ms-SpLinkButtonInActive {
	background-image: none;
	background-color: transparent;
	border: none;
	padding: 0;
	margin: 0;
}

#top-welcome .ms-SPLink a:link, #top-welcome .ms-SPLink a:visited {
	color: #FFF !important;
	text-decoration: none;
	font-size: 8pt;
}	

#top-siteactions {
	float: right;
}
	
#top-siteactions .ms-siteactionsmenu div div div {
	background-image: none;	
	background-color: transparent;
	border: none;
}
	
#top-siteactions .ms-siteactionsmenu div div div a {
	color: #FFF !important;
	font-weight: normal;
	font-family: verdana;
	font-size: 8pt;
}	
	
/*****************************************************/
/*************** HEADER + NAVIGATION *****************/
/*****************************************************/
	
#header {
	height: 80px;
	background: #1d1e20 url('../images/header-bg.png') repeat-x left top;
}
	
#header-inner {
	margin: 0px auto;
	height: 80px;
	padding: 0 20px;
	width: 960px;
	background: #1d1e20 url('../images/header-inner-bg.png') repeat-x left top;
}

#header a img {border: none; display: block;}

#header a:hover {
	background: none;
	border-bottom: none;
}

#logo a {
	float: left;
	width: 138px;
	height: 59px;
	margin: 0;
	display: inline-block;
	background: transparent url('../images/trinkit-logo.png') no-repeat top left;
}

#logo a:hover {
	background: transparent url('../images/trinkit-logo.png') no-repeat bottom left;
}

#topnav {
	float: right;
	display: inline-block;
	margin: 0;
	margin-right: 20px;
}

#topnav li {
	float: left;
	margin-left: 10px;
}

#topnav a {
	position: relative;
	display: block;
	margin: 0;
	text-align: center;
	color: #FFF;
	overflow: hidden;
}

#tab-what a, #tab-what span {width: 103px; height: 59px; background: url('../images/tabs/tab-what.png');}
#tab-work a, #tab-work span {width: 85px; height: 59px; background: url('../images/tabs/tab-work.png');}
#tab-blog a, #tab-blog span {width: 93px; height: 59px; background: url('../images/tabs/tab-blog.png');}
#tab-about a, #tab-about span {width: 84px; height: 59px; background: url('../images/tabs/tab-about.png');}

#topnav a span  {background-position: left top;}
#topnav a:hover span {background-position: left center;}

.what #tab-what a:hover span, .what #tab-what span {background-position: left bottom;}
.work #tab-work a:hover span, .work #tab-work span {background-position: left bottom;}
.blog #tab-blog a:hover span, .blog #tab-blog span {background-position: left bottom;}
.about #tab-about a:hover span, .about #tab-about span {background-position: left bottom;}

#topnav span {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	margin: 0;
	cursor: pointer;
}

/*****************************************************/
/*************** PROMO DECK **************************/
/*****************************************************/

#deck {
	height: 186px;
	background: #a8d6e2 url('../images/deck-bg.png') repeat-x left top;
}
	
#deck-inner {
	margin: 0px auto;
	width: 1000px;
	height: 186px;
	background: #bdecf8 url('../images/deck-inner-bg.png') repeat-x left top;
}

#deck-clouds {
	margin: 0px auto;
	padding: 0 20px;
	width: 960px;
	height: 186px;
	background: transparent url('../images/deck/deck-clouds.png') no-repeat 350px top;
}

#deck-image {
	height: 186px;
	width: 1000px;
	float: left;
}

#deck-h1 {
	width: 700px;
	height: 34px;
	float: left;
	margin: 67px 0 6px 208px;
}

#deck-h2 {
	width: 700px;
	height: 17px;
	float: left;
	margin-left: 211px;
}

.home #deck-image {background: url('../images/deck/avatar-home.png') no-repeat left top;}
.what #deck-image {background: url('../images/deck/avatar-what.png') no-repeat left top;}
.work #deck-image {background: url('../images/deck/avatar-work.png') no-repeat left top;}
.blog #deck-image {background: url('../images/deck/avatar-blog.png') no-repeat left top;}
.about #deck-image {background: url('../images/deck/avatar-about.png') no-repeat left top;}

.home #deck-h1 {background: url('../images/deck/h1-home.png') no-repeat left top;}
.what #deck-h1 {background: url('../images/deck/h1-what.png') no-repeat left top;}
.work #deck-h1 {background: url('../images/deck/h1-work.png') no-repeat left top;}
.blog #deck-h1 {background: url('../images/deck/h1-blog.png') no-repeat left top;}
.about #deck-h1 {background: url('../images/deck/h1-about.png') no-repeat left top;}
.home #deck-h2 {background: url('../images/deck/h2-home.png') no-repeat left top;}
.what #deck-h2 {background: url('../images/deck/h2-what.png') no-repeat left top;}
.work #deck-h2 {background: url('../images/deck/h2-work.png') no-repeat left top;}
.blog #deck-h2 {background: url('../images/deck/h2-blog.png') no-repeat left top;}
.about #deck-h2 {background: url('../images/deck/h2-about.png') no-repeat left top;}


/*****************************************************/
/*************** TITLE REPLACEMENTS ******************/
/*****************************************************/

.replace {text-indent: -9999px;}

h2.at-trinkit {background: transparent url('../images/headings/h2-at-trinkit.png'); height: 189px; width: 280px;}
h2.trinkit-is {background: transparent url('../images/headings/h2-trinkit-is.png'); height: 109px; width: 280px;}

h2.kinloch-golf-club {background: #eff8f7 url('../images/headings/h2-kinloch-golf-club.png') no-repeat; height: 29px; width: 242px;}
h2.nz-garden-sheds {background: #eff8f7 url('../images/headings/h2-nz-garden-sheds.png') no-repeat; height: 29px; width: 233px;}
h2.rainbow-youth {background: #eff8f7 url('../images/headings/h2-rainbow-youth.png') no-repeat; height: 29px; width: 206px;}
h2.environment-canterbury {background: #eff8f7 url('../images/headings/h2-environment-canterbury.png') no-repeat; height: 29px; width: 340px;}
h2.celsias {background: #eff8f7 url('../images/headings/h2-celsias.png') no-repeat; height: 29px; width: 92px;}
h2.your-business {background: #eff8f7 url('../images/headings/h2-your-business.png') no-repeat; height: 29px; width: 201px;}
h2.snow-gadgets {background: #eff8f7 url('../images/headings/h2-snow-gadgets.png') no-repeat; height: 29px; width: 188px;}
h2.surf-gadgets {background: #eff8f7 url('../images/headings/h2-surf-gadgets.png') no-repeat; height: 29px; width: 169px;}
h2.midas-infomedia {background: #eff8f7 url('../images/headings/h2-midas-infomedia.png') no-repeat; height: 29px; width: 230px;}
h2.hui-taumata {background: #eff8f7 url('../images/headings/h2-hui-taumata.png') no-repeat; height: 29px; width: 174px;}

h2.why-trinkit {background: #eff8f7 url('../images/headings/h2-why-trinkit.png') no-repeat; height: 29px; width: 286px;}
h2.web-design {background: #eff8f7 url('../images/headings/h2-web-design.png') no-repeat; height: 29px; width: 379px;}
h2.sharepoint {background: #eff8f7 url('../images/headings/h2-sharepoint.png') no-repeat; height: 29px; width: 337px;}
h2.hosting-support {background: #eff8f7 url('../images/headings/h2-hosting-support.png') no-repeat; height: 29px; width: 251px;}

a.recent-work {background: #4693a3 url('../images/headings/h3-recent-work.png'); height: 30px; width: 280px; display: block; margin-bottom: 10px;}
a.zacs-blog {background: #4693a3 url('../images/headings/h3-zacs-blog.png'); height: 30px; width: 280px; display: block; margin-bottom: 10px;}

h3.zac-smith {background: #aec0bf url('../images/headings/h3-zac-smith.png'); height: 30px; width: 280px;}
h3.kate-smith {background: #aec0bf url('../images/headings/h3-kate-smith.png'); height: 30px; width: 280px;}

h3.select-project {background: #aec0bf url('../images/headings/h3-select-project.png'); height: 30px; width: 270px;}
h3.our-services {background: #aec0bf url('../images/headings/h3-our-services.png'); height: 30px; width: 270px;}

h3.admin {background: #aec0bf url('../images/headings/h3-admin.png'); height: 30px; width: 270px;}
h3.friends {background: #aec0bf url('../images/headings/h3-friends.png'); height: 30px; width: 270px;}
h3.archives {background: #aec0bf url('../images/headings/h3-archives.png'); height: 30px; width: 270px;}
h3.twitter {background: #aec0bf url('../images/headings/h3-twitter.png'); height: 51px; width: 270px;}

h2.error {background: #eff8f7 url('../images/headings/h2-error.png'); height: 138px; width: 570px;}
h3.sorry {background: #eff8f7 url('../images/headings/h3-sorry.png'); height: 121px; width: 570px;}

a.previous {background: #eff8f7 url('../images/headings/a-previous-page.png') no-repeat bottom left; height: 42px; width: 570px; display: block;}
a:hover.previous {background: #eff8f7 url('../images/headings/a-previous-page.png') no-repeat top left; height: 42px; width: 570px; display:block}

/*****************************************************/
/*************** HOMEPAGE SPECIFIC *******************/
/*****************************************************/

.intro-quote {
	background: url('../images/intro-quote.png') transparent no-repeat;
	display: block; 
}

.intro-top {
	background: #292c2f url('../images/intro-top-bg.png') repeat-x;
	padding-top: 20px;
}

.intro-base {
	background: #adc0be url('../images/intro-base-bg.png') repeat;
	padding: 0 0 30px 0
}

.intro-base p {
	font-family: Georgia, serif;
	font-style: italic;
	font-size: 1.2em;
	line-height: 1.7em;
	padding: 0 20px;
}

.intro-base strong {
	line-height: 1.5em;
	display: block;
	padding-top: 10px;
}

.home h3 {
	margin-bottom: 10px;
}

#news-feed li {
	background: transparent url('../images/news-feed-bg.png');
	margin-bottom: 2px;
	padding: 10px 20px 20px 20px;
}

#news-feed li .date {
	font-size: 0.9em;
	font-family: Georgia, serif;
	font-style: italic;
	color: #627377;
	display: block;
}

#news-feed li a {
	font-weight: bold;
	color: #176477;
	display: block;
	margin-bottom: 3px;
	font-family: Georgia, serif;
}

#news-feed li .abstract {
	font-size: 0.9em;
}

a.view-more {
	float: right;
	font-size: 0.9em;
	font-family: Georgia, serif;
	font-style: italic;
	color: #627377;
}

#more {
	clear: both;
	height: 42px;
	background: transparent url('../images/more-bg.png') repeat;
	float: left;
	width: 100%;
	overflow: hidden;
	position: relative;
}

#more ul {
   clear: left;
   float: left;
   position: relative;
   left: 50%;
   text-align: center;
}

#more ul li {
	font-size: 1.1em;
	margin: 15px 10px 0 10px;
	display: block;
	float: left;
	position: relative;
	right: 50%;
}

#more ul li.find-out {
	font-family: Georgia, serif;
	font-style: italic;
}

#more ul li a {
	font-weight: bold;
	color: #176477;	
}

/*****************************************************/
/*************** MAIN CONTENT ************************/
/*****************************************************/

#auths {
	margin: 0px auto;
	width: 1000px;
}

.last {margin: 0!important;}

#main {
	background: #d7dfde url('../images/main-bg.png') repeat-x left top;
}
		
#main-inner {
	margin: 0px auto;
	padding: 40px 40px 0 40px;
	width: 920px;
	background: #eff8f7 url('../images/main-inner-bg.png') repeat-x left top;
	overflow: hidden; zoom:1;
}	
	
.what h3, .what h4, .what a {color: #678816;}
.work h3, .work h4, .work a {color: #dc9100;}
.blog h3, .blog h4, .blog a {color: #b22e0b;}
.about h3, .about h4, .about a {color: #0b5e9b;}

.col280 {
	width: 280px;
	float: left;
	margin-right: 40px;
	margin-bottom: 40px;
}

.col270 {
	width: 270px;
	float: left;
	margin-bottom: 40px;
}

.col610 {
	width: 610px;
	float: left;
	margin-right: 40px;
	margin-bottom: 40px;
}

.col610 {
	font-size: 1.1em;
}

.col610 table.RadEWrapper {
	width: 590px !important;
}

.col280 table.RadEWrapper {
	width: 270px !important;
}

#edits {
	padding: 25px;
	margin: 25px 0;
	border: 1px #CCC dashed;
	background: #FFF;
	margin-right: 5px;
}

.ms-long {
	width: 535px;
}

#ctl00_PlaceHolderMain_ctl00__ControlWrapper_RichImageField,
#ctl00_PlaceHolderMain_ctl01__ControlWrapper_RichImageField {
	line-height: 0;
}

.about h3 {
	margin-bottom: 10px;
}

.about .bio {
	background: transparent url('../images/news-feed-bg.png') repeat-y;
	padding: 10px 20px 20px 20px;
	margin-top: 10px;
}

.about .bio p {
	margin-bottom: 10px;
}

.about .contact {
	background: #dee9e6 url('../images/contact-bg.png') repeat-x;
	width: 260px;
	height: 46px;
	margin: 10px 0;
	padding: 14px 0 0 20px;
}

.about .zac {
	background: transparent url('../images/contact-zac.png') no-repeat;
	display: block;
	width: 172px;
	height: 33px;	
	}
	
.about .kate {
	background: transparent url('../images/contact-kate.png') no-repeat;
	display: block;
	width: 176px;
	height: 33px;	
	}
	
.what h2 {
	margin-bottom: 15px;
}	

.what h4 {
	color: #7ba60f;
	font-family: Georgia, serif;
	font-size: 1.2em;
	margin: 20px 0 5px 0;
}

.what p {
	margin-bottom: 15px;
}

.what .col610 ul {
	list-style: disc;
	margin: 15px 0 15px 45px;
}

.form table {
	width: 600px;
	padding: 25px 30px 30px 30px;
	border-top: 1px #C8D4D3 dotted;
	border-bottom: 1px #C8D4D3 dotted;
	margin: 15px 0;
}

.form table tr {
	height: 50px;
}

.form th {
	width: 150px;
	text-align: right;
	padding: 10px 20px;
	font-weight: normal;
}

.form td input {
	padding: 5px;
	width: 250px;
}

.form td textarea {
	padding: 5px;
	width: 250px;
	height: 80px;
	margin-top: 5px; 
}

.col404 {
	margin: 0px auto;
	padding: 0;
	width: 570px;
	margin-top: 20px;
	margin-bottom: 80px;
}

.col404 h3 {
	margin-bottom: 40px;
}

#ctl00_PlaceHolderMain_UserControlFieldControl1_ctl00_ContactForm_ctl00_RequiredFieldValidator1,
#ctl00_PlaceHolderMain_UserControlFieldControl1_ctl00_ContactForm_ctl00_RequiredFieldValidator2,
#ctl00_PlaceHolderMain_UserControlFieldControl1_ctl00_ContactForm_ctl00_Validator1,
#ctl00_PlaceHolderMain_UserControlFieldControl1_ctl00_ContactForm_ctl00_RequiredFieldValidator3 {
	color: #c02031 !important;
	font-size: 0.8em;
	float: left;
}

p.thanks {
	margin-top: 20px;
	font-size: 1.2em;
	font-family: Georgia, serif;
	border-top: 1px #C8D4D3 dotted;
	padding-top: 30px;
	margin-top: 30px;
}

/*****************************************************/
/*************** GALLERY SPECIFIC ********************/
/*****************************************************/

.gallery-item {
	width: 280px;
	float: left;
	margin-right: 40px;
	margin-bottom: 40px;
}

.gallery-item-last {
	width: 280px;
	float: left;
	margin-bottom: 40px;
}


.gallery-item h4 a, .gallery-item-last h4 a  {
	font-family: Georgia, serif;
	font-size: 1.1em;
	display: inline-block;
	margin: 5px 0;
}

a.gallery img {
	padding: 3px;
	background: #FFF;
	border: 1px #c8d4d3 solid !important;
	margin-bottom: 10px;
}

a:hover.gallery img {
	padding: 3px;
	background: #c8d4d3;
	border: 1px #adc0be solid;
}

.work h2 {
	display:block;
	margin-bottom: 15px;
}

.work p {
	margin-bottom: 15px;
}

.work img.gallery-full {
	padding: 4px;
	background: #FFF;
	border: 1px #c8d4d3 solid;
	margin: 10px 0;
	float: left;
}


#project-list li a {
	display: block;
	padding: 5px 25px;
	color: #232428;
	border-bottom: 1px #c8d4d3 solid;
}

#project-list li {
	background: #fcfefd;
}

#project-list li.alt {
	background: #eff8f7;
}

#project-list li a:hover {
	background: #d8e3e2;
	text-decoration: none;
}

.current-project, #project-list li a.current-project:hover {
	font-weight: bold;
	background-image: url('../images/current-project.png');
	background-repeat: no-repeat;
	background-position: 8px center;
}

#download-links {
	float: right;
	width: 280px;
	margin-top: 10px;
}

a.download {
	width: 150px;
	padding: 10px;
	background: #fcfefd;
	display: block;
	text-align: center;
	border: 1px #C8D4D3 dashed;
	margin-bottom: 15px;
}

a:hover.download {
	text-decoration: none;
	border: 1px #C8D4D3 solid;
	background: #FFF;
}


/*****************************************************/
/*************** BLOG SPECIFIC ***********************/
/*****************************************************/

.list-entry {
	margin-bottom: 40px;
	padding-bottom: 10px;
	border-bottom: 1px dotted #BBB;
}

.blog .col610 .title {
	margin-bottom: 15px;
}
	
.blog .col610 .author {
	color: #5e6067; 
	font-size: 90%;
}
	
.blog .col610 h3 {
	margin-bottom: 0;
}

.blog h3 {
	font-family: Georgia, serif;
	font-size: 2em;
	font-weight: normal;
}

.blog .col610 p {
	margin-bottom: 10px;
}

.blog .col610 ul {
	list-style: disc;
	margin: 15px;
}

.blog .col610 ol {
	list-style: decimal;
	margin: 15px;
}

.blog .col610 ul li, .blog .col610 ol li {
	margin: 5px 25px;
}

.blog .col610 .editpost {
	color: #5E6067; 
	font-weight: normal; 
	font-size: 60%;
	margin-left: 10px;
}

.blog .col610 h5 {
	margin-bottom: 20px;
	font-size: 1.1em;
}

.blog .col270 .block {
	margin-bottom: 40px;
}

.blog .col270 h4 {
	color: #2e2f33;
	text-transform: uppercase;
	font-size: 120%;
	margin: 0 0 5px 10px;	
}

.col270 img.mvp {
	display: block;
	margin: 0px auto;
}

.col270 .rss {
	padding-left: 20px;
	background: url('/Style Library/Trinkit/images/feed-icon-14x14.png') no-repeat left center;	
}

.block ul li a {
	display: block;
	padding: 5px 25px;
	color: #232428;
	border-bottom: 1px #c8d4d3 solid;
}

.block ul li a:hover {
	background: #d8e3e2;
	text-decoration: none;
}

.tagcloud {
	text-transform: lowercase;
}
	
.tagcloud a {
	padding-right: 1px;
	text-decoration: none;
}

.blog .categories {
	border: 1px #C8D4D3 dotted;
	padding: 5px;
	font-style: italic;
	background: #FCFEFD;
	margin: 30px 0 30px 0;
}

#comments h5 {
	border-bottom: 1px #C8D4D3 dotted;
	margin-bottom: 0;
	padding: 10px 0;
}

#comment-list {
	list-style: none;
	margin: 0;
}

#comment-list li {
	padding: 20px 0;
	border-bottom: 1px #C8D4D3 dotted;
	margin: 0;
}

.comment-meta {
	margin-bottom: 10px;
	font-size: 0.9em;
	font-style: italic;
}

.commentform {
	float:left;
	margin-bottom: 40px;
	width: 500px;
}

.row {width: 500px; clear: both; margin-bottom:5px; float: left;}
.row span.label {float: left; width: 80px; text-align: right; margin: 0 5px 0 0;}
.row span.formw input {float: right; width: 400px; float: right; padding: 2px;}
.row span.formw textarea {float: right; width: 400px; float: right; padding: 2px;} 
.button {float: right;}

#twitter_update_list {
	margin-top: 5px;
}

#twitter_update_list li {
	padding: 5px 25px;
	border-bottom:1px solid #C8D4D3;
}

#twitter_update_list li span {
	display: block;
}	

#twitter-link {
	text-align: left;
	padding: 10px 0 0 25px;
	display: block;
}

.re-tweet{
	float: right;
	padding: 0 0 20px 20px;
}

.share-this {
	float: right;
}


/*****************************************************/
/*************** FOOTER ******************************/
/*****************************************************/

#footer {
	height: 91px;
	background: #d7dfde url('../images/footer-bg.png') repeat-x left top;
}
		
#footer-inner {
	margin: 0px auto;
	padding: 0 20px;
	width: 960px;
	height: 91px;
	background: #eff8f7 url('../images/footer-inner-bg.png') repeat-x left top;
}

#contact-lst {
	float: left;
	margin-left: 20px;
	margin-top: 35px;
}
	
#nav-lst {
	float: right;
	margin-right: 20px;
	margin-top: 35px;
	}
	
#contact-lst li, #nav-lst li {
	float: left;
}

#contact-lst a, #nav-lst a {
	position: relative;
	display: block;
	margin: 0;
	text-align: center;
	color: #FFF;
	overflow: hidden;
}

#footer-tab-contact {width: 108px; height: 36px; background: url('../images/tabs/footer-tab-contact.png');}
#footer-tab-email a, #footer-tab-email span {width: 131px; height: 36px; background: url('../images/tabs/footer-tab-email.png');}
#footer-tab-phone {width: 96px; height: 36px; background: url('../images/tabs/footer-tab-phone.png');}

#footer-tab-home a, #footer-tab-home span {width: 56px; height: 36px; background: url('../images/tabs/footer-tab-home.png');}
#footer-tab-what a, #footer-tab-what span {width: 92px; height: 36px; background: url('../images/tabs/footer-tab-what.png');}
#footer-tab-work a, #footer-tab-work span {width: 77px; height: 36px; background: url('../images/tabs/footer-tab-work.png');}
#footer-tab-blog a, #footer-tab-blog span {width: 84px; height: 36px; background: url('../images/tabs/footer-tab-blog.png');}
#footer-tab-about a, #footer-tab-about span {width: 76px; height: 36px; background: url('../images/tabs/footer-tab-about.png');}

#contact-lst a span, #nav-lst a span   {background-position: left top;}
#contact-lst a:hover span, #nav-lst a:hover span {background-position: left bottom;}

#contact-lst span, #nav-lst span {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	margin: 0;
	cursor: pointer;
	}