/*
Theme Name: Shawmac
Author: Jay Hollywood


*/



/*
©2010 Jay Hollywood
www.jayhollywood.com.au

Description : Stylesheet

*/

/*---------------------------------------------- GLOBAL SETTINGS */
html {
	height: 100%;
}

body {
	height: 100%;
	font-family: Arial, Helvetica, sans-serif;
	font-size: .75em; 
	background: #222;
}

/*-------------------------------------------------------- LINK */


a {
	color: #308dba;
	text-decoration: underline;
}

a:hover {
	color: #26a062;
}

a:active {
	color: #333;
}

/*---------------------------------------------------- HEADINGS */

h1, h2, h3, h4, h5, h6 {
	font-weight:normal;
	margin:0pt;
	padding:0pt;
	font-family: Helvetica, Arial, sans-serif;
}

h1 {
	font-size: 2.4em;
	padding: 0 0 10px 0;
}

h2 {
	font-size: 2em;
	padding: 0 0 8px 0;
}

h3 {
	font-size: 1.5em;
	padding: 0 0 20px 0;
	line-height: 1.5em;
}

h4 {
	font-size: 1.2em;
	padding: 0 0 5px 0;
}

/*-------------------------------------------------- PARAGRAPHS */

p {
	font-size: 100%;
	line-height: 1.7em;
	padding: 0 0 1.25em 0;
}


/* LISTS -------------------------------------------------------- LISTS */

ul, ol {
	padding:0 0 1.25em 2.5em;
	list-style: url(art/list-style.gif);
}

#main-content li { 
	font-size: 100%;
	line-height: 1.7em;
}

/*-- nested lists --*/

#content ul ul {
	padding: 0 0 0 1.5em;
}

#content ol ol {
	padding: 0 0 0 1.5em;
}

/*------------------------------------------------------ LAYOUT */

#supersize {
	position:fixed;
	z-index: 1;
}

#supersize img {
	height:100%;
	width:100%;
	position:absolute;
	z-index: 0;
}


#container {
	width:964px;
	position: absolute;
	z-index: 4;
	top: 0;
	left: 0;
}

#header {
	width: 964px;
	height: 162px;
	display: block;
	background: url(art/header-bg.png) no-repeat;
	position: relative;
}

a#logo {
	position: absolute;
	top: 0;
	left: 0;
	background: url(art/logo.gif) no-repeat;
	width: 207px;
	height: 138px;
	text-indent: -9999px;
}

#slogan {
	width: 514px;
	height: 89px;
	display: block;
	background: url(art/slogan.png) no-repeat;
	text-indent: -9999px;
	position: absolute;
	left: 20px;
	top: 250px;
}

.home #slogan {
	top: 315px;
}

#content-wrapper {
	width: 964px;
	display: block;
	background: url(art/bg-shadow.png);
	margin-top: 210px;
	float: left;
	display: inline;
	padding: 0 0 4px 0;
}

.home #content-wrapper {
	margin-top: 265px;

}

#content-area {
	width: 960px;
	display: block;
	background: #fff;
	position: relative;
}

#title-bar {
	width: 960px;
	height: 58px;
	display: block;
	background: url(art/top-bar.png);
	position: absolute;
	top: -4px;
	z-index: 2;
}

#title-bar h1 {
	position: absolute;
	left: 16px;
	top: 1px;
	color: #fff;
	height: 56px;
	padding: 0;
	margin: 0;
	width: 360px;
	text-indent: -9999px;
}

#title-bar form {
	width: 392px;
	display: block;
	position: absolute;
	right: 12px;
	top: 12px;
	background: url(art/input-bg.gif) no-repeat 0 1px;
}

#title-bar form input {
	width: 281px;
	background: 0;
	border: 0;
	font-size: 100%;
	padding: 9px;
	float: left;
	color: #5e5e5e;
}

#title-bar form button {
	width: 81px;
	height: 33px;
	display: block;
	background: url(art/search-btn.png) no-repeat 0 0;
	text-indent: -9999px;
	cursor: pointer;
	border: 0;
	float: right;
}

#title-bar form button:hover {
	background: url(art/search-btn.png) no-repeat 0 -33px;	
}

#title-bar form button:active {
	background: url(art/search-btn.png) no-repeat 0 -66px;	
	outline: none;
	margin: 1px 0 0 0;
}

#main-content {
	width: 680px;
	margin: 58px 30px 0 0;
	float: right;
	display: inline;
	color: #444;
	padding: 0 0 20px 0;
}

.home #main-content {
	width: 610px;
	margin: 58px 0 0 20px;
	color: #444;
	float: left;
	display: inline;
}

#main-content h2 {
	font-size: 2em;
	color: #308dba;
}

.home #main-content h2.home-content-title {
	background: url(art/divider.gif) repeat-x left bottom;
	margin: 0 0 15px 0;
	text-indent: -9999px;
}

.home #main-content h2.home-content-title span {
	background: url(art/homepage-title.gif) no-repeat;
	width: 395px;
	display: block;
	height: 39px;
}

.home #main-content h3 {
	padding: 0 0 15px 0;
}

#main-content.contact-us {
	width: 520px;
	margin: 58px 0 0 30px;
	float: left;
	display: inline;
	color: #444;
	padding: 0 20px 20px 0;
}

a#corporate-profile-btn {
	width: 200px;
	height: 38px;
	display: block;
	background: url(art/corporate-profile-btn.gif) no-repeat 0 0;
	text-indent: -9999px;
	margin: 10px 0 0 0;
}

a#corporate-profile-btn:hover {
	background-position: 0 -38px;
}

a#corporate-profile-btn:active {
	margin: 11px 0 0 0;
}

#unique-approach {
	width: 310px;
	margin: 58px 0 0 0;
	display: inline;
	float: right;
}

#unique-approach h3 {
	width: 310px;
	text-indent: -9999px;
	height: 38px;
	display: block;
	background: url(art/unique-approach.gif) no-repeat 0 0;
	padding: 0 0 3px;
}

#values {
	width: 310px;
	display: block;
	background: #efefef;
	padding: 0 0 40px 0;
}

#values p {
	width: 255px;
	margin: 0 0 0 20px;
	border-bottom: 1px solid #6c6c6c;
	color: #6c6c6c;
	padding: 15px 35px 15px 0;
}

#footer {
	width: 964px;
	height: 115px;
	display: block;
	background: url(art/footer-bg.png) no-repeat;
	margin: 50px 0 0 0;
	position: relative;
	color: #9d9d9d;
}

#footer a {
	color: #fff;
	text-decoration: none;
}

#footer a:hover {
	color: #ccc;
}

#copyright { 
	position: absolute;
	top: 18px;
	left: 120px;
}

#contact-details {
	position: absolute;
	top: 18px;
	right: 0;
	width: 300px;
	text-align: right;
}

#contact-details p {
	float: right;
	margin: 0 30px 0 0;
}

#contact-details p.numbers {
	color: #eee;
}

#hero-image {
	position: relative;
	top: 54px;
	height: 142px;
	padding: 0 0 20px 0;
}

#side-panel {
	float: left;
	width: 210px;
	margin: 64px 0 0 0;
	display: inline;
	background: url(art/divider-vert.gif) right 10px repeat-y;
}

h3#key-service-areas {
	background: url(art/key-service-areas.gif) no-repeat;
	width: 169px;
	height: 28px;
	display: block;
	text-indent: -9999px;
	margin: 0 0 0 20px;
	padding: 0;
}

h3#related-information {
	background: url(art/related-information.gif) no-repeat;
	width: 180px;
	height: 28px;
	display: block;
	text-indent: -9999px;
	margin: 0 0 0 20px;
	padding: 0;
}

#side-nav ul {
	list-style: none;
	padding: 0;
	margin: 0;
	font-size: 1.15em;
}

#side-nav {
	margin: 0 0 20px 0;
}

#side-nav ul li {
	padding: 0 0 1px 20px;
	}
	
#side-nav ul li:hover {
	background: url(art/arrow.gif) no-repeat 5px 11px;
}
	
#side-nav ul li a {
	color: #308dba;
	text-decoration: none;
	width: 189px;
	display: block;
	padding: 6px 0;
	background: url(art/divider.gif) bottom left repeat-x;
	
}

#side-nav ul li a:hover {
	background: url(art/divider.gif) bottom left repeat-x #f9f9f9;
	text-indent: 4px;
}



#more-information h3 {
	background: url(art/more-information.gif) no-repeat;
	width: 169px;
	height: 27px;
	display: block;
	text-indent: -9999px;
	margin: 0 0 0 20px;
	padding: 0;

}

#more-information p{
	color: #6c6c6c;
	padding: 20px 10px 20px 20px;
	width: 170px;
	background: #efefef;
	
	
}

#more-information .highlight {
	color: #444;
}
	



/*------------------------------------------------------ CTA */

#call-to-action {
	position: relative;
	top: 30px;
	height: 232px;
}

#call-to-action a {
	width: 320px;
	height: 237px;
	float: left;
	position: relative;
	cursor: pointer;
}

#call-to-action a span{
	width: 320px;
	height: 237px;
	text-indent: -9999px;
	position: absolute;
	top: 0;
	left: 0;
}

a#civil-engineering-cta, a#civil-engineering-cta span.hover {
	background: url(art/civil-engineering-cta.jpg) no-repeat 0 0;
}

a#civil-engineering-cta:active, a#traffic-engineering-cta:active, a#risk-management-cta:active {
	top: 1px;
}

a#traffic-engineering-cta, a#traffic-engineering-cta span.hover {
	background: url(art/traffic-engineering-cta.jpg) no-repeat 0 0;
}

a#risk-management-cta, a#risk-management-cta span.hover {
	background: url(art/risk-management-cta.jpg) no-repeat 0 0;
}

#call-to-action a span.hover {
	background-position: 0 -237px;
}
	


/* TABLES ------------------------------------------------------ TABLES */

/*-- data table --*/
table {
	border: 1px solid #ccc;
	border-bottom: none;
	border-right: none;
	width: 100%;
}

table th,
table td {
	border-right: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
	padding: 4px;
	text-align: left;
	line-height: normal;
}

table th{
	background-color: #eee;
	font-size: 12px;
	font-weight: bold;
	height: 23px;
	color: #343434;
	line-height: normal;
}

table td {
	color: #343434;
	font-size: 12px;
	text-align: left;
}

table td.right {
	text-align: right;
}



/* CONTACT FORM -------------------------------------- CONTACT FORM */


form.contactForm {
	width: 340px;
	margin: 64px 0 20px 0;
	float: left;
	display: inline;
	color: #444;
	padding: 0 0 0 20px;
	background: url(art/divider-vert.gif) left 10px repeat-y;
}

form.contactForm h2 {
	width: 148px;
	height: 19px;
	display: block;
	background: url(art/make-an-enquiry.gif) no-repeat;
	text-indent: -9999px;
}

form.contactForm label {
	display: block;
	padding: 0 0 4px 0;
}

form.contactForm label.error {
	color:#F00;
	position: absolute;
	top: 25px;
	right: 10px;
}

form.contactForm div {
	padding: 0 0 6px 0;
	position:relative;
}

form.contactForm input, form.contactForm textarea {
	width: 328px;
	background: url(art/contact-input-bg.gif) repeat-x #fdfdfd;
	border: 1px solid #c9c9c9;
	padding: 5px;
	font-size: 1.1em;
	font-family: Arial, Helvetica, sans-serif;
	color: #444;
}

form.contactForm button {
	width: 138px;
	height: 38px;
	display: inline;
	background: url(art/submit-btn.gif) no-repeat;
	text-indent: -9999px;
	border: none;
	cursor: pointer;
	float: right;
	margin: 10px 0;
}

form.contactForm button:hover {
	background-position: 0 -38px;
}
	





/* CUSTOM CLASSES -------------------------------------- CUSTOM CLASSES */

.clear {
	clear: both;
}