/* CSS styles for tradeinns.co.uk
   Coded by DJENAN KOZIC :: 25/02/2008
   ----------------------------------------------------- */

/* ------ CSS CONTENTS ------

   1. COLOURS, DIMENSIONS & DESIGN NOTES
   2. RESETS
   3. BASICS
   4. HEADER
   5. NAVIGAITON
   6. MAIN CONTENT
   7. FOOTER
   8. TABLES

/*


/* ------ 1. COLOURS, DIMENSIONS & DESIGN NOTES ------

   PAGE WIDTH: 944px

   Independent elements, single content/images column.

   Body Background:       trans
   Header Background:     trans
   Navigation Background: trans
   Content Background:    #xxx
   Footer Background:     trans

   H2:                    #4db64f
   Main Text:             #1f3735
   Links:                 #4db64f

   Image Border:          #fff

   Footer Text:           #fff
   Footer Links:          #4db64f

*/



/* ------ 2. RESETS ------ */

* { margin:0; padding:0; }

a, a:hover, a:active, a img, a, a:hover img, a:active img { outline:none; border:none; }



/* ------ 3. BASICS ------ */

body {
	font-size:62.5%;
	background-color:#475e5c;
	padding:20px;
	}

a { text-decoration:underline; }
a:hover { text-decoration:none; }



/* ------ 4. HEADER ------ */
#header {
	position:relative;
	margin:0 auto;
	width:944px;
	height:305px;
	background:transparent url('img/header_bg.gif') no-repeat top left;
	}

h1.logo {
	position:absolute;
	top:56px;
	left:259px;
	}
a.logo {
	display:block;
	text-indent:-5000em;
	width:345px;
	height:83px;
	background:transparent url('img/logo.gif') no-repeat top left;
	
	}
h2.phonenumber {
	position:absolute;
	top:44px;
	right:38px;
	text-indent:-5000em;
	width:179px;
	height:179px;
	background:transparent url('img/phonenumber.gif') no-repeat top left;
}
h2.address {
	position:absolute;
	top:276px;
	right:43px;
	text-indent:-5000em;
	width:228px;
	height:14px;
	background:transparent url('img/address.gif') no-repeat top left;
	}


/* ------ 5. NAVIGAITON ------ */

#navigation {
	position:absolute;
	top:272px;
	left:40px;
	width:519;
	margin:0 auto;
	}

	#navigation ul { list-style:none; margin:0; padding:0;}
	#navigation li { display:inline; margin:0; padding:0;}
		#navigation li a { background-image:url('img/nav.gif'); float:left; height:0; padding-top:21px; overflow:hidden; margin-right:10px; padding-right:10px; border-right:2px solid #251138}

		#navigation li#nav-1 a { background-position:0 0; width:46px; }
		#navigation li#nav-1 a:hover { background-position:0 -21px; }

		#navigation li#nav-2 a { background-position:-68px 0; width:129px; }
		#navigation li#nav-2 a:hover { background-position:-68px -21px; }

		#navigation li#nav-3 a { background-position:-217px 0; width:86px; }
		#navigation li#nav-3 a:hover { background-position:-217px -21px; }

		#navigation li#nav-4 a { background-position:-324px 0; width:48px; }
		#navigation li#nav-4 a:hover { background-position:-324px -21px; }

		#navigation li#nav-5 a { background-position:-393px 0; width:83px; padding-right:0; margin-right:0; border:none; }
		#navigation li#nav-5 a:hover { background-position:-393px -21px; }



/* ------ 6. MAIN CONTENT ------ */

#contentwrapper {
	position:relative;
	width:944px;
	margin:0 auto;
	background:transparent url('img/contentwrapper_bg.gif') repeat-y center left;
	}

div.content {
	position:relative;
	background:transparent url('img/content_bg.gif') no-repeat top right;
	float:left;
	padding:30px 40px 0px 50px;
	width:532px;
	}

	div.content p {
		font:normal 1.1em Verdana, Helvetica, Arial, sans-serif;
		line-height:1.6em;
		padding-bottom:1.6em;
		color:#1f3735;
		}

	div.content h1 {}
	div.content h2 {
		font:bold 1.4em Verdana, Helvetica, Arial, sans-serif;
		line-height:1.6em;
		padding-bottom:1.6em;
		color:#4db64f;
	}
	div.content h3 {
		font:bold 1.4em Verdana, Helvetica, Arial, sans-serif;
		line-height:1.6em;
		padding-top:0.8em;
		padding-bottom:0.8em;
		color:#000;
	}

	div.content ol, div.content ul {
		list-style:square;
		padding-left:16px;
		padding-bottom:0.8em;
	}
	div.content li {
		font:normal 1.1em Verdana, Helvetica, Arial, sans-serif;
		line-height:1.6em;
	}

	div.content a {
		color:#4db64f;
		text-decoration:underline;
		}
	div.content a:hover {
		text-decoration:none;
		}
	div.content a:active {color:#000;}
	div.bottomborder {
		background:transparent url('img/contentbottom_bg.gif') no-repeat bottom right;
		width:45px;
		height:0;
		padding:40px 40px 0px 50px;
		width:532px;
		clear:both;
	}

div.images {
	float:right;
	padding:35px 82px 0 0;
	width:170px;
	}

	div.images img {
		border:5px solid #fff;
		display:block;
		margin-bottom:15px;
	}



/* ------ 7. FOOTER ------ */

#footer {
	position:relative;
	height:69px;
	width:944px;
	margin:0 auto;
	background:transparent url('img/footer_bg.gif') no-repeat top left;
	}

	#footer p {
		padding:15px 0 0 47px;
		font:normal 1.2em Verdana, Helvetica, Arial, sans-serif;
		line-height:1.6em;
		padding-bottom:0.8em;
		color:#fff;
	}

	#footer a {
		color:#4db64f;
		text-decoration:underline;
		}
	#footer a:hover {
		text-decoration:none;
		}
	#footer a:active {color:#000;}



/* ------ 8. TABLES ------ */

div.content table {
	background-color:transparent;
	font:normal 1.1em Verdana, Helvetica, Arial, sans-serif;
	line-height:1.6em;
	color:#1f3735;
	margin-bottom:15px;
	}
div.content table tr { background-color:#D9E7B9; }
div.content table tr td { padding:3px 10px 4px 10px;  border-bottom:1px solid #C9D0AF; }