/* CSS STYLES - JUNIPER RACING - WWW.JUNIPERRACING.COM.AU -------- */
/* Created by Six Degrees The Agency - www.sixdegreestheagency.com */


/* GENERAL HTML -------------------------------------------------- */

body {
	background: url(img/body-bg.jpg) top left repeat;
	color: #838f97;
	font: 12px Helvetica, Arial, 'Liberation Sans', FreeSans, sans-serif;
	line-height: 16px;
	margin: 0;
	padding: 0;
}

a {
	color: #00508f;
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

p {
	margin: 0 0 20px 0;
}

hr {
	margin: 0 0 5px 0;
}

img {
	border: none;
}

strong {
	color: #000;
}

img, div {behavior: url(pngfix/iepngfix.htc)}


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

h1 {
	color: #003d7d;
	font-size: 20px;
	font-weight: normal;
	margin: 0 0 20px 0;
}

h2 {
	line-height: 20px;
	font-size: 16px;
	font-weight: normal;
	margin: 0 0 5px 0;
}

h3 {
	color: #003d7d;
	font-size: 12px;
	margin: 0 0 5px 0;
	text-transform: uppercase;
}


/* DIVS ---------------------------------------------------------- */

.container-01 {
	background: url(img/container-bg.png) top left repeat-y;
	margin: 0 auto;
	padding: 0;
	width: 840px;
}

.container-02 {
	background: #FFF;
	margin: 0 auto;
	padding: 0;
	width: 800px;
}

.header-nav {
	height: 15px;
	margin: 0;
	padding: 20px 20px 15px 20px;
	width: 760px;
	text-align: right;
}

.header-img {
	background: url(img/juniper-racing-header.jpg) top left no-repeat;
	height: 270px;
	margin: 0 0 30px 0;
	padding: 0;
	width: 800px;
}

.navigation {
	display: inline;
	float: left;
	margin: 0 0 20px 0;
	padding: 0;
	width: 150px;
}

.main-content {
	display: inline;
	float: left;
	margin: 20px 0 20px 0;
	padding: 0 20px 0 40px;
	width: 590px;
}

.image-column {
	display: inline;
	float: left;
	margin: 0 20px 0 0;
	width: 180px;
}

.project {
	display: inline;
	float: left;
	margin: 0 0 20px 0;
	padding: 0;
	width: 285px;
}


/* HEADER NAVIGATION --------------------------------------------- */

.header-nav a {
	color: #838f97;
	margin: 0;
	padding: 0;
	text-decoration: none;
}

.header-nav a:hover {
	color: #003d7d;
	margin: 0;
	padding: 0;
	text-decoration: none;
}


/* NAVIGATION ---------------------------------------------------- */

.navigation a {
	color: #003d7d;
	display: block;
	margin: 0;
	padding: 2.5px 20px;
	text-decoration: none;
	width: 100px;
}

.navigation a:hover, .navigation a.active {
	background: #003d7d;
	color: #FFF;
	display: block;
	margin: 0;
	padding: 2.5px 20px;
	text-decoration: none;
	width: 100px;
}

.navigation-header {
	margin: 17.5px 0 0 0;
	padding: 0 20px 2.5px 20px;
	text-transform: uppercase;
	width: 100px;
}

a.navigation-img, a.navigation-img:hover {
	margin: 40px 0;
	padding: 0;
}

.navigation img {
	border: none;
}


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

.img-text {
	color: #000;
	font-size: 10px;
	margin: 5px 0 30px 0;
	padding: 0;
}

.image-column img, .project img {
	margin: 0 0 10px 0;
}


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

table {
	margin: 0 0 30px -5px;
	padding: 0;
	width: 590px;
}

table p {
	margin: 0 0 5px 0;
}

.table-text {
	padding: 10px;
}

a.view {
	color: #838f97;
	display: block;
	height: 26px;
	margin: 0;
	padding: 35px 10px;
	text-align: center;
	width: 80px;
}

a.view:hover {
	background: #838f97;
	color: #FFF;
	text-decoration: none;
}
	


/* CLEAR FLOATED ELEMENTS ---------------------------------------- */

html body div.clear,
html body span.clear {
	background: none;
	border: 0;
	clear: both;
	display: block;
	float: none;
	font-size: 0;
	margin: 0;
	padding: 0;
	overflow: hidden;
	visibility: hidden;
	width: 0;
	height: 0;
}

.clearfix:after {
	clear: both;
	content: '.';
	display: block;
	visibility: hidden;
	height: 0;
}

.clearfix {
	display: inline-block;
}

* html .clearfix {
	height: 1%;
}

.clearfix {
	display: block;
}