@import 'reset.css';
@import 'typography.css';

html {}
body {background: #aaafb0 url(../i/bg_body.gif) left top repeat-x;}
#masthead,
#footer {
	width: 1020px;
	margin: 0 auto;
	}
#masthead {
	margin-top: 2em;
	position: relative;
	}
#wrapper {
	width: 1040px;
	padding: 10px;
	margin: 0 auto;
	background: transparent url('../i/bg_feather.png') center top no-repeat;
	}
#contentwrapper {
	clear: both;
	padding: 0;
	}
#maincontent {
	width: 350px;
	float: left;
}
#secondcontent {
	width: 600px;
	float: left;
	margin: 60px 0 0 64px;
/*	margin: 108px 0 0 64px;*/
	}
#home #secondcontent {margin-left: 0;}
#design #secondcontent {margin-top: 30px;}
#thirdcontent {}
#footer {
	clear: both;
	margin-top: 20px;
	}

/* masthead
----------------------------------------- */
#masthead h1,
#masthead h2,
#masthead h3 {
	margin: 0;
	padding: 0;
	font-size: 1em;
	float: left;
	}
#masthead h1 a,
#masthead h2 a {
	width: 272px;
	height: 65px;
	margin: 0 0 1em -10px;
	border: none;
	display: block;
	background: transparent url('../i/logo_honda_crv.png') left top no-repeat;
	text-indent: -999em;
	}		
#masthead h3 {
	position: absolute;
	width: 223px;
	height: 37px;
	display: block;
	background: transparent url('../i/logo_crv.png') left top no-repeat;
	top: 0;
	right: 0;
	text-indent: -999em;
}
		
/* nav
----------------------------------------- */
#nav {
	clear: both;
	padding: 0;
	margin: 1em 0;
	}
#nav li {
	display: inline;
	float: left;
	width: 188px;
	height: 200px;
	display: block;
	text-align: center;
	margin: 20px 20px 0 0;
	}
#nav li h3 {
	margin: .5em 0 0 0;
	font-size: 1.1em;
	font-weight: normal;
	}
#nav li h3 a {
	border: none;
	display: inline;
	color: #fff;
	}	
#nav li span.image {
	height: 142px;
	width: 188px;
	display: block;
	text-indent: -999em;
	background:transparent url('../i/box_design.png') left top no-repeat;
	}
#nav li.design span.image {background-image: url('../i/box_design.png');}
#nav li.komfort span.image {background-image: url('../i/box_komfort.png');}
#nav li.kraft span.image {background-image: url('../i/box_kraft.png');}
#nav li.galleri span.image {background-image: url('../i/box_galleri.png');}
#nav li.teknik span.image {background-image: url('../i/box_teknik.png');}

#nav li.current a {}
#design #nav li.design a,
#komfort #nav li.komfort a,
#kraft #nav li.kraft a,
#galleri #nav li.galleri a,
#teknik #nav li.teknik a,
#nav li a:hover {
	font-weight: bold;
	}

/* fitted.js styles
----------------------------------------- */
li.hovered {
	cursor: pointer;
	border-color: #aaa;
	}
li.hovered,
li.hovered h3 a {font-weight: bold;}

#design #nav li.design span.image,
#komfort #nav li.komfort span.image,
#kraft #nav li.kraft span.image,
#galleri #nav li.galleri span.image,
#teknik #nav li.teknik span.image,
#nav li.hovered span.image {background-position: bottom left; }

/* contentwrapper
----------------------------------------- */
#contentwrapper {}

/* maincontent
----------------------------------------- */
.imageholder  {
	width: 290px;
	margin: 0 10px 10px 0;
	float: left;
}

.imageholder p {
	font-size: .8em;
	margin-top: .5em;
	font-style: italic;
}

#gallery a {
	margin: 0 4px 4px 0;
}
/* secondcontent
----------------------------------------- */
	
/* footer
----------------------------------------- */
#footer {}

/* vcard
----------------------------------------- */
/*#footer .vcard {
	width: 280px;
	float: left;
	}
#footer .vcard h3 {
	font-size: 1.25em;
	padding-top: 3px;
	padding-right: 25px;
	display: inline;
	background: transparent url(../i/icons/microformats.png) right top no-repeat;
	}
.vcard .org {margin-top: 3px;}*/
	
/* table
----------------------------------------- */
table {
	margin: 3em 0 2em; 
	font-size: .9em;
	width: 60%;
	}
caption {
	padding: 0 0 5px 0;
	font-style: italic;
	}
thead {border-bottom: 1px solid #666;}
th {color: #c00;}
tfoot td,
tfoot th {
	border-top: 1px solid #666;
	border-bottom: 1px solid #666;
	}
th,
tfoot td {
	font-weight: bold;
	}
th, td {
	padding: 3px 2px 2px;
	border-bottom: 1px solid #ccc;
	}
tr.alt td,
tr.alt {
/*	background-color: #f5f3f0;*/
	}
	
/* clearing
----------------------------------------- */
#footer:after,
#masthead:after,
#wrapper:after,
#contentwrapper:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
	}
#footer,
#masthead,
#wrapper,
#contentwrapper {
	display: inline-block;
	}
* html #footer,
* html #masthead,
* html #wrapper,
* html #contentwrapper {
	height: 1%;
	}
#footer, 
#masthead,
#wrapper,
#contentwrapper {
	display: block;
	}

/* misc
----------------------------------------- */
ul#skip {display: none;visibility: hidden;}
.debug {font-family: courier, courier new, monospace;color: orange;padding: .5em;}
.left {float: left;}
.right {float: right;}
.imageleft {float: left; margin: 0 1em .5em 0;}
.noborder {border: none !important;}
.clear {clear: both;}