/*--------------------------------------------
Website: The Door Store / www.thedoorstore.ca
Design & development: 4c / www.4c.ca
Date: June 2008
Description: Layout

-------------------------------------------- */

/* WEBSITE ARCHITECTURE 
----------------------------------
	1 - CONTAINER / #Container
		
		1.1 - HEADER / #header
			1.1.1 - Logo / 2 images
			1.1.2 - navigation / #nav
		
		1.2 - BANNER / img #banner
		
		1.3 - CONTENT / #main
			1.3.1 - left column / #leftcolumn
					- h2
					- image + content /#content 
							- h5 + text
					- h3
					- images /.imgcontent (when there are more than one image) + content /.content 
																				- h6 + text
					- h3
					- images /.imgcontent (when there are more than one image) + content /.content 
																				- h6 + text
							
			1.3.2 - Right column / #rightcolumn
					- h4
					- subnavigation /#subnav
					- h4
					- text + image
					- h4
					- text
							
	2 - FOOTER / #footer
	
----------------------------------*/

* {
	outline: none;
}

body {
	background-color: #929494;
	margin: 0;
	padding: 0;
}

#container {
	background-color: #fff;
	margin: 10px auto;
	padding: 20px;
	width: 930px;
}

#header {
	height: 80px;
	margin: 0;
	width: 930px;
}

	#header .sentence {
		float: left;
		margin: 28px 0 0 0;
	}

#banner {
	margin: 3px 0 15px 0;
	height: 240px;
	width: 930px;
}

#main {
	margin: 0;
	min-height: 350px;
	height: auto !important;
	height: 350px;
	width: 930px;	
}

#leftcolumn {
	float: left;
	margin: 0 15px 0 0;
	width: 615px;
}

	#leftcolumn .content {
		float: left;
		margin: 0 0 15px 0;
		width: 300px;
	}
	
	#leftcolumn .contentbloc1 {
		float: left;
		margin: 0 15px 10px 0;
		width: 300px;
	}
	
		#leftcolumn .contentbloc1 p {
			float: right;
			display: block;	
			width: 210px;				
		}
	
	#leftcolumn .contentbloc2 {
		float: left;
		margin: 0 0 10px;
		width: 300px;
	}
	
		#leftcolumn .contentbloc2 p {
			float: right;
			display: block;	
			width: 210px;			
		}
	
	#leftcolumn .imgcontent {
		float: left;
		margin: 0 15px 15px 0;
		width: 300px;
	}


.year {
	cursor: pointer;
}
	
.yeargallery {
	margin: 0;
	padding: 0;
	width: 100%;
}

#rightcolumn {
	float: left;
	margin: 0;
	width: 300px;
}

#footer {
    height: 20px;
	margin: 10px auto 20px;
	width: 970px;
}

	#footer .left {
		display: block;
		float: left;
		margin: 0 20px 0 0;
	}	
	
	#footer .right {
		display: block;
		float: right;
		margin: 0;
	}	
		
.clear {
	clear: both;
	margin: 0;
	padding: 0;
	width: 100%;
}


#inspiration .clear {
	height: 30px;
}

.archives {
	border-bottom: 1px solid #D7D8D8;
	height: 90px;
	margin: 10px 0;
	width: 300px;
}

.listarchive {
	border-bottom: 1px solid #D7D8D8;
	margin: 10px 0;
	width: 615px;
}


/*-------------------------
 	home page
 -------------------------*/

#middlebar {
	height: 350px;
	margin: 0 0 5px 0;
	padding: 0;
	width: 930px;
}

#flashcontent {
	display: block;
	float: left;
	height: 350px;
	margin: 0;
	padding: 0;
	width: 660px;
}

#sidebar {
	background-color: #D2CC9F;
	float: right;
	height: 350px;
	margin: 0;
	padding: 0 15px;
	width: 240px;
}

ul#button {
	clear: both;
	height: 130px;
	margin: 0;
	padding: 0;
	width: 930px;
}

	#button li {
		height: 130px;
		float: left;
		list-style-type: none;
		margin: 0 5px 0 0;
		padding: 0;
		width: 182px;
	}
	
	#button li.last {
		margin: 0;
	}
	
	#button a {
		background-repeat: no-repeat;
		background-position: 0 -130px;
		display: block;
		height: 130px;
		overflow: hidden;
		text-indent: -999em;
	}
			
		#button .homehardware a {background-image: url(../graphics/but_hardware.jpg);}			
		#button .homeregisters a {background-image: url(../graphics/but_registers.jpg);}			
		#button .homearchitecturals a {background-image: url(../graphics/but_architecturals.jpg);}			
		#button .homeiron a {background-image: url(../graphics/but_iron.jpg);}			
		#button .homelighting a {background-image: url(../graphics/but_lighting.jpg);}

/*-------------------------
 	Site Navigation 
 -------------------------*/

#nav ul {
	height: 11px;
	margin: 20px 0 0;
	padding: 0;
	overflow: hidden;
}

	#nav li {
		height: 11px;
		float: left;
		list-style-type: none;
		margin: 20px 0 0;
		padding: 0;
	}
	
	#nav .separation {
		float: left;
		margin: 0 5px;
	}
	
	#nav a {
		background-repeat: no-repeat;
		background-position: 0 -12px;
		float: left;
		display: block;
		height: 11px;
		overflow: hidden;
		text-indent: -999em;
	}
	
		#nav a:hover {
			background-position: 0 0;
		}

			#nav .about a {background-image: url(../graphics/nav_about.gif); width: 47px;}
			#nav .hardware a {background-image: url(../graphics/nav_hardware.gif); width: 74px;}
			#nav .registers a {background-image: url(../graphics/nav_registers.gif); width: 72px;}
			#nav .architecturals a {background-image: url(../graphics/nav_architecturals.gif); width: 116px;}
			#nav .iron a {background-image: url(../graphics/nav_iron.gif); width: 32px;}
			#nav .lighting a {background-image: url(../graphics/nav_lighting.gif); width: 60px;}
			#nav .inspiration a {background-image: url(../graphics/nav_inspiration.gif); width: 80px;}
			#nav .resources a {background-image: url(../graphics/nav_resources.gif); width: 80px;}
			#nav .blog a {background-image: url(../graphics/nav_blog.gif); width: 37px;}
			#nav .contact a {background-image: url(../graphics/nav_contact.gif); width: 63px;}

/*-------------------------
 	Site Sub-Navigation 
 -------------------------*/
 
#subnav ul {
	margin: 0;
	padding: 0;
	width: 300px;
}

#subnav li {
	border-bottom: 1px solid #D7D8D8;
	height: 18px;
	list-style-type: none;
	margin: 0;
	padding: 6px 0 0;
	width: 300px;
}

#subnav a {
	background-repeat: no-repeat;
	background-position: 10px 0;
	display: block;
	height: 14px;
	overflow: hidden;
	text-indent: -999em;
}

	#subnav a:hover {
		background-position: 10px -14px;
	}

	/* Hardware ----------------------*/	
	
	#hardware #subnav .subnav-antique a {background-image: url(../graphics/subnav_hardware_antique.gif);}	
	#hardware #subnav .subnav-restoration a {background-image: url(../graphics/subnav_hardware_restoration.gif);}	
	#hardware #subnav .subnav-reproduction a {background-image: url(../graphics/subnav_hardware_reproduction.gif);}	
	#hardware #subnav .subnav-brass a {background-image: url(../graphics/subnav_hardware_brass.gif);}	
	#hardware #subnav .subnav-signature a {background-image: url(../graphics/subnav_hardware_signature.gif);}


	/* Registers ----------------------*/	
 
	#registers #subnav .subnav-antique a {background-image: url(../graphics/subnav_registers_antique.gif);}
	#registers #subnav .subnav-reproduction a {background-image: url(../graphics/subnav_registers_reproduction.gif);}
 
	/* Architecturals ----------------------*/	
 
	#architecturals #subnav .subnav-door a {background-image: url(../graphics/subnav_architecturals_door.gif);}	
	#architecturals #subnav .subnav-mantel a {background-image: url(../graphics/subnav_architecturals_mantel.gif);}	
	#architecturals #subnav .subnav-glass a {background-image: url(../graphics/subnav_architecturals_glass.gif);}	
	#architecturals #subnav .subnav-other a {background-image: url(../graphics/subnav_architecturals_other.gif);}

	/* Iron ----------------------*/	
	
	#iron #subnav .subnav-antique a {background-image: url(../graphics/subnav_iron_antique.gif);}	
	#iron #subnav .subnav-reproduction a {background-image: url(../graphics/subnav_iron_reproduction.gif);}
	#iron #subnav .subnav-door a {background-image: url(../graphics/subnav_iron_door.gif);}	
	#iron #subnav .subnav-favourites a {background-image: url(../graphics/subnav_iron_favourites.gif);}	
	
	/* Lighting ----------------------*/	
 
	#lighting #subnav .subnav-chandeliers a {background-image: url(../graphics/subnav_lighting_chandeliers.gif);}	
	#lighting #subnav .subnav-school a {background-image: url(../graphics/subnav_lighting_school.gif);}	
	#lighting #subnav .subnav-industrial a {background-image: url(../graphics/subnav_lighting_industrial.gif);}	
	#lighting #subnav .subnav-sconces a {background-image: url(../graphics/subnav_lighting_sconces.gif);}