/* ==================== 

Title:			Transport Works - main stylesheet
Author:			Benjamin Tollady (http://www.thirststudios.com)
Contact:		ben@thirststudios.com
Version:		0.1
Last Updated:	23/10/2009

==================== */

/* Eric Meyer reset rules v1.0 | 20080212 */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}
body {
	line-height: 1;
	font-size: 62.5%;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}

/* remember to define focus styles! */
:focus {
	outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* CSS starts */

html, body, #wrapper {height: 100%;}

body > #wrapper {height: auto; min-height: 100%;}

#main {
	padding-bottom: 90px;
	overflow: hidden;
}  /* must be same height as the footer */

#footer {
	position: relative;
	margin-top: -90px; /* negative value of footer height */
	height: 90px;
	clear:both;
	background: #2d2d2d url(../images/footer_bg.gif) 0 0;
} 

.home object#flashIntro {
	margin-top: 82px;
}


body {
	background: #fff url(../images/bg.gif) 0 0 repeat-x;
	color: #282828;
	font-family: arial, helvetica, sans-serif;
	text-align: justify;
}
body.home {
	background: #fff url(../images/home_bg.gif) 0 0 repeat-x;
}
body .adr {
	text-align: left;
}
#skipLink {
	display: none;
}

#content ul.subnav {
	clear: both;
	overflow: hidden;
	margin: 0;
	padding: 0 10px 10px;
}
#content ul.subnav li {
	list-style: none;
	float: left;
	margin-right: 20px;
	list-style-image: none;
	padding: 0;
}


#wrapper, #footer .inner {
	width: 960px;
	margin: 0 auto;
	font-size: 1.2em;
	line-height: 1.5;
	position: relative;
}
.home #header {
	height: 451px;
}
#header {
	position: relative;
	height: 185px;
}
#logo {
	display: block;
	height: 117px;
	width: 123px;
	background: transparent url(../images/small_box.png) 0 0 no-repeat;
	position: absolute;
	top: 10px;
}
#logo a {
	text-indent: -9999px;
	outline: none;
	display: block;
	height: 117px;
	width: 123px;	
}
#shadow {
	height: 11px;
	width: 124px;
	display: block;
	position: absolute;
	top: 145px;
	left: 30px;
	background: transparent url(../images/shadow_sml.gif) 0 0 no-repeat;
}
.home #logo {
	display: block;
	height: 310px;
	width: 326px;
	background: transparent url(../images/big_logo.png) 0 0 no-repeat;
	position: absolute;
	text-indent: -9999px;
	border: none;
	z-index: 2;
	margin-top: 70px;
}
.home #header h1 {
	display: block;
	height: 32px;
	width: 519px;
	background: transparent url(../images/tw_text_home.png) 0 0 no-repeat;
	position: absolute;
	text-indent: -9999px;
	border: none;
	top: 268px;
	left: 370px;	
}
.home h2.tagLine {
	display: block;
	height: 23px;
	width: 618px;
	background: transparent url(../images/evolvingText.png) 0 0 no-repeat;
	position: absolute;
	text-indent: -9999px;
	border: none;
	top: 398px;
	left: 10px;
}
.home #cta a {
	width: 287px;
	height: 66px;
	display: block;
	border: none;
	position: absolute;
	background: transparent url(../images/cta_btn.gif) 0 0 no-repeat;
	text-indent: -9999px;
	left: 667px;
	top: 375px;
}
.home #shadow {
	height: 29px;
	width: 332px;
	display: block;
	position: absolute;
	top: 410px;
	left: 65px;
	background: transparent url(../images/shadow.png) 0 0 no-repeat;
}
.home #cta a:hover {
	background-position: 0 -66px;
}
.home #circle {
	background: transparent url(../images/circle.gif) 0 0 no-repeat;
	position: absolute;
	right: 10px;
	display: block;
	height: 218px;
	width: 588px;
	top: 145px;
}
#header h1 {
	width: 255px;
	height: 16px;
	display: block;
	background: transparent url(../images/logo_sml.gif) 0 0 no-repeat;
	text-indent: -9999px;
	border: none;
	position: absolute;
	top: 123px;
	left: 140px;
}
p, .adr, .fax {
	margin-bottom: 1em;
}
h1, h2, h3, h4, h5 {
	margin-bottom: 0.5em;
}
h1 {
	font-size: 1.8em;
}
h2 {
	font-size: 1.5em;
}
h3, .contact h2, .about h2 {
	font-size: 1.08em;
}
a, a:visited {
	color: #0087c6;
	text-decoration: none;
}
a:hover, a:active {
	color: #879600;
	/* text-decoration: underline; */
}
/* Nav */
#nav {
	position: absolute;
	right: 0;
	top: 54px;
	height: 43px;
}
#nav li {
	float: left;
}
#nav li a {
	background: transparent url(../images/nav.gif) 0 0 no-repeat;
	display: block;
	height: 43px;
	text-indent: -9999px;
	border: none;
}
/* Nav states */
#nav li#home a {
	width: 70px;
	background-position: 0 0;
}
#nav li#about a {
	width: 71px;
	background-position: -70px 0;
}
#nav li#transport a {
	width: 162px;
	background-position: -141px 0;
}
#nav li#software a {
	width: 159px;
	background-position: -303px 0;
}
#nav li#partners a {
	width: 90px;
	background-position: -462px 0;
}
#nav li#casestudies a {
	width: 117px;
	background-position: -552px 0;
}
#nav li#contact a {
	width: 82px;
	background-position: -669px 0;
}
/* Nav hover states */
#nav li#home a:hover {
	background-position: 0 -43px;
}
#nav li#about a:hover {
	background-position: -70px -43px;
}
#nav li#transport a:hover {
	background-position: -141px -43px;
}
#nav li#software a:hover {
	background-position: -303px -43px;
}
#nav li#partners a:hover {
	background-position: -462px -43px;
}
#nav li#casestudies a:hover {
	background-position: -552px -43px;
}
#nav li#contact a:hover {
	background-position: -669px -43px;
}
/* Nav on states */
.home #nav li#home a {
	background-position: 0 -86px;
}
.about #nav li#about a {
	background-position: -70px -86px;
}
.transport #nav li#transport a {
	background-position: -141px -86px;
}
.software #nav li#software a {
	background-position: -303px -86px;
}
.partners #nav li#partners a {
	background-position: -462px -86px;
}
.casestudies #nav li#casestudies a {
	background-position: -552px -86px;
}
.contact #nav li#contact a {
	background-position: -669px -86px;
}
#content {
	overflow: hidden;
	margin-bottom: 40px;
}
#primaryContent {
	width: 660px;
	float: left;
}
#secondaryContent {
	width: 280px;
	float: left;
	padding: 0 10px;
}
.mainPic {
	background: transparent url(../images/sub_img_bg.png) 0 0 no-repeat;
	height: 130px;
	width: 630px;
	padding: 15px;
	position: relative;
}
.contact .mainPic {
	background: transparent url(../images/sub_img_bg_big.png) 0 0 no-repeat;
	width: 930px;
}
.mainPic img {
	float: left;
}
.mainPic h1 {
	height: 120px;
	width: 630px;
	text-indent: -9999px;
	position: absolute;
}
.casestudies .mainPic h1 {
	background: transparent url(../images/case_title.png) 0 0 no-repeat;
	display: block;
	left: 15px;
}
#mainText {
	padding: 0 10px;
	overflow: hidden;
}
#contactPanel {
	width: 240px;
	background: transparent url(../images/contactPanel.png) 0 0 no-repeat;
	margin-top: 10px;
	padding: 0 20px;
}
#contactPanel h2, #contactPanel h3 {
	text-indent: -9999px;
	height: 45px;
}
#secondaryContent a.enquiry {
	height: 46px;
	width: 263px;
	background: transparent url(../images/get_started_btn.gif) 0 -50px no-repeat;
	display: block;
	text-indent: -9999px;
	border: none;
	margin: 20px 0 0 9px;
}
#secondaryContent a.enquiry:hover {
	background-position: 0 0;
}

#primaryContent #partnersList ul {
	background: transparent url(../images/partners_logos.gif) 0 0 no-repeat;
	width: 640px;
	height: 41px;
}
#primaryContent #partnersList ul li {
	display: none;
}
#footer .inner {
	background: transparent url(../images/footer_img.gif) 0 0 no-repeat;
	overflow: hidden;
	height: 90px;
}
#footer ul li {
	float: left;
	line-height: 90px;
	color: #999;
}
#footer ul li a {
	margin: 0 10px;
	color: #999;
}
#footer a:hover, #footer a:active {
	text-decoration: underline;
	color: #ccc;
}
#footer ul li.credit {
	float: right; 
}
#content ul {
	margin: 0;
	padding-left: 1.5em;
}
#content ol li {
	list-style: none;
}
#content li {
	list-style-image: url(../images/list_dot.gif);
}
.transport #flash {
	width: 280px;
	height: 150px;
	float: right;
	background: #fff url(../images/flashSpinBg.jpg) 0 0 no-repeat;
}
.transport #list {
	float: left;
	width: 340px;
}
.caseLogo {
	float: right;
}
#caseTop {
	overflow: hidden;
	clear: both;
}
#caseTop h2 {
	float: left;
}
.contact #primaryContent {
	width: 960px;
}
.contact .row {
	width: 480px;
	float: left;
	overflow: hidden;
	margin-bottom: 1em;
}
.contact form {
	width: 460px;
	overflow: hidden;
	background: #fff url(../images/form_bg.gif) 0 100% no-repeat;
	padding: 0;
	float: right;
}
.contact .col {
	width: 210px;
	float: left;
	padding: 10px;
	margin-right: 10px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
}
.contact img.sticker {
	position: relative;
	top: -20px;
	left: 60px;
}
.contact form h2 {
	text-indent: -9999px;
	height: 45px;
	background: transparent url(../images/get_in_touch.gif) 0 0 no-repeat;
}
.contact form fieldset {
	padding: 0 20px;
}
.contact form .hiddenFields {
	display:none;
}
form div {
	width: 200px;
	float: left;
	margin-right: 20px;
	overflow: hidden;
	margin-bottom: 1em;
}
.contact form div.right {
	margin-right: 0;
}
label, input, textarea {
	display: block;
}
label.check {
	float: left;
	margin: 0 10px 5px 0px;
}
input.check {
	float: left;
	width: auto;
}
label, p.check {
	color: #59574b;
}
input, textarea {
	width: 190px;
	border: 2px solid #cdc8ad;
	padding: 3px;
}
form div.wide {
	width: 420px;
}
textarea {
	width: 410px;
	height: 80px;
}
form button {
	background: transparent url(../images/send_btn.gif) 0 0 no-repeat;
	width: 102px;
	height: 33px;
	text-indent: -9999px;
	border: none;
	cursor: pointer;
	margin-bottom: 20px;
	float: left;
}
#fourCols {
	overflow: hidden;
}
#fourCols .col {
	width: 240px;
	float: left;
}
#fourCols h3 a {
	height: 16px;
	width: 240px;
	text-indent: -9999px;
	display: block;
}
#fourCols h3.about a {
	background: transparent url(../images/home_about.png) 0 0 no-repeat;
}
#fourCols h3.transport a {
	background: transparent url(../images/home_transport.png) 0 0 no-repeat;
}
#fourCols h3.software a {
	background: transparent url(../images/home_software.png) 0 0 no-repeat;
}
#fourCols h3.case_studies a {
	background: transparent url(../images/home_casestudies.png) 0 0 no-repeat;
}
#fourCols p {
	margin: 0 10px 1em;
}
#fourCols a {
	color: #282828;
}
#fourCols a:hover, #fourCols a:active {
	color: #879600;
	/* text-decoration: underline; */
}
#fourCols #contactPanel {
	width: 200px;
	background: transparent url(../images/contactPanel_sml.png) 0 0 no-repeat;
}
#fourCols #contactPanel a {
	color: #0087c6;
	text-decoration: none;
}
#fourCols #contactPanel a:hover, #fourCols #contactPanel a:active {
	color: #879600;
	/* text-decoration: underline; */
}
.home #fourCols h3 {
	margin-top: 25px;
}
.home #fourCols #contactPanel h3 {
	margin-top: 0px;
}
label.error {
	color: red;
}
#mapContainer {
	position: relative;
}
#rowContainer {
	float: left;
	overflow: hidden;
	width: 480px;
}
#mapContainer #dot_vic, #mapContainer #dot_nz, #mapContainer #dot_qld {
	position: absolute;
	background: transparent url(../images/dot.png) 0 0 no-repeat;
	width: 26px;
	height: 26px;
	text-indent: -9999px;
}
#mapContainer #dot_vic {
	right: 90px;
	bottom: 60px;
}
#mapContainer #dot_nz {
	right: 8px;
	bottom: 80px;
}
#mapContainer #dot_qld {
	right: 60px;
	bottom: 85px;
}
#testimonials {
	width: 640px;
	margin-top: 30px;
}
#testimonials h2 {
	width: 640px;
	background: url(../images/testiTop.gif) 0 0 no-repeat;
	height: 40px;
	text-indent: -9999px;
	margin: 0;
}

/* Testimonial slider */

/* Most common stuff you'll need to change */
	
	/* Use this to keep the slider content contained in a box even when JavaScript is disabled */
	.coda-slider-no-js .coda-slider { height: 200px; overflow: auto !important; padding-right: 20px }
	
	/* Change the width of the entire slider (without dynamic arrows) */
	.coda-slider, .coda-slider .panel { width: 600px } 
	
	/* Change margin and width of the slider (with dynamic arrows) */
	.coda-slider-wrapper.arrows .coda-slider, .coda-slider-wrapper.arrows .coda-slider .panel { width: 640px }
	
	/* Arrow styling */
	.coda-nav-left a, .coda-nav-right a { width: auto; }
	
	/* Preloader */
	.coda-slider p.loading { padding: 20px; text-align: center }

/* Don't change anything below here unless you know what you're doing */

	/* Tabbed nav */
	.coda-nav ul { clear: both; display: block; margin: auto; overflow: hidden }
	.coda-nav ul li { display: inline }
	.coda-nav ul li a { background: #000; color: #fff; display: block; float: left; margin-right: 1px; padding: 3px 6px; text-decoration: none }
	
	/* Miscellaneous */
	.coda-slider-wrapper { clear: both; overflow: auto }
	.coda-slider { float: left; overflow: hidden; position: relative }
	.coda-slider .panel { display: block; float: left }
	.coda-slider .panel-container { position: relative }
	.coda-slider-wrapper.arrows { position: relative; }
	.coda-nav-left, .coda-nav-right { 
		position: absolute;
		bottom: 0;
		right: 0;
	 }
	 .coda-nav-left{
	 	display: none;
	 }
	.coda-nav-left a, .coda-nav-right a { display: block; text-align: center; text-decoration: none }
	
#coda-slider .panel-wrapper {
	width: 640px;
	background: url(../images/testiMid.gif) 0 0 repeat-y;
}	
#coda-slider .panel .inner {
	background: url(../images/testiBot.gif) 0 100% no-repeat;
	padding: 0 20px 10px;
}
p.author {
	margin: 0;
	float: left;
}

.notify {
	width: auto;
	display: block;
	padding: 0 20px;
	color: #ff9503;
}

