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

/* COLORS & Titles & Text 
----------------------------------
	Background: # 929494 (grey)
	Background container: #FFF (white)
	Border lines: #D7D8D8 (light grey)
	
	H1: banner - image
	H2, H3: background images + Borders #D7D8D8 (light grey)
	H4: background images + background-color: #D2CC9F (beige)
	H5: #484741 (dark grey) - Georgia 23px
	H6: #484741 (dark grey) - Georgia 18px
	Text: #575959 (grey) - Georgia 12px
	Text in beige: #BFB781 (beige)
	
	Nav and subnav: Images
	
	Footer: #575959 (grey) - Arial caps 12px
	
	Links: #Ab5A45 (red-pink) - Georgia 12px - rollover: underline	
	
----------------------------------*/


/* --------------------------------
	GENERAL TYPOGRAPHY
________________________________ */

html {
	font-size: 100.01%;
}

body {
	font-family: Georgia, Times New Roman, Times, serif;
    font-size: 62.5%;
}

#container {
	font-family: Georgia, Times New Roman, Times, serif;
}

h1, h2, h3, h4, h5, h6, address, blockquote, dd, dl, dt, ol, p, ul {
	margin: 0 0 1em;
	padding: 0;
}

button, input, select, textarea {
	font-family: Georgia, Times New Roman, Times, serif;
}


a {
	color:#AB5A45;
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

	a.italic {
		font-style: italic;		
	}

p {
	color: #575959;
	font-size: 1.2em;
	line-height: 1.4em;
}



/* Titles 
------------------------------------------- */

h2 {
	border-bottom: 1px solid #D7D8D8;
	border-right: 1px solid #D7D8D8;
	height: 49px;
	margin: 0 0 15px;
	width: 614px;	
}

	#about h2 { background: url(../graphics/h2_about.gif) no-repeat 0px 20px;}	
	#hardware h2 {background: url(../graphics/h2_hardware.gif) no-repeat 0px 20px;}	
	#registers h2 {background: url(../graphics/h2_registers.gif) no-repeat 0px 20px;}	
	#architecturals h2 {background: url(../graphics/h2_architecturals.gif) no-repeat 0px 20px;}
	#iron h2 {background: url(../graphics/h2_iron.gif) no-repeat 0px 20px;}
	#lighting h2 {background: url(../graphics/h2_lighting.gif) no-repeat 0px 20px;}	
	#inspiration h2 {background: url(../graphics/h2_inspiration.gif) no-repeat 0px 20px;}
	#inspiration h2.insparchive {background: url(../graphics/h2_inspiration_archives.gif) no-repeat 0px 20px;}
	#resources h2 {background: url(../graphics/h2_resources.gif) no-repeat 0px 20px;}
	#resources h2.desarchive {background: url(../graphics/h2_resources_archives.gif) no-repeat 0px 20px;}
	#contact h2 {background: url(../graphics/h2_contact.gif) no-repeat 0px 20px;}


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

h3 {
	border-bottom: 1px solid #D7D8D8;
	clear: both;
	height: 40px;
	margin: 0 0 15px;
	width: 614px;
}

	#about h3 {background: url(../graphics/h3_about_media.gif) no-repeat 0px 14px;}
	#hardware h3.antique {background: url(../graphics/h3_antique_hardware.gif) no-repeat 0px 14px;}
	#hardware h3.restoration {background: url(../graphics/h3_hardware_restoration.gif) no-repeat 0px 14px;}
	#hardware h3.reproduction {background: url(../graphics/h3_reproduction_hardware.gif) no-repeat 0px 14px;}
	#registers h3.antique {background: url(../graphics/h3_antique_registers.gif) no-repeat 0px 14px;}
	#registers h3.reproduction {background: url(../graphics/h3_reproduction_registers.gif) no-repeat 0px 14px;}
	#architecturals h3.door {background: url(../graphics/h3_architecturals_door.gif) no-repeat 0px 14px;}
	#architecturals h3.glass {background: url(../graphics/h3_architecturals_glass.gif) no-repeat 0px 14px;}
	#architecturals h3.mantel {background: url(../graphics/h3_architecturals_mantel.gif) no-repeat 0px 14px;}
	#architecturals h3.other {background: url(../graphics/h3_architecturals_other.gif) no-repeat 0px 14px;}
	#iron h3.antique {background: url(../graphics/h3_antique_iron.gif) no-repeat 0px 14px;}
	#iron h3.reproduction {background: url(../graphics/h3_reproduction_iron.gif) no-repeat 0px 14px;}
	#lighting h3.chandeliers {background: url(../graphics/h3_lighting_chandeliers.gif) no-repeat 0px 14px;}
	#lighting h3.school {background: url(../graphics/h3_lighting_schoolhouse.gif) no-repeat 0px }
	#lighting h3.industrial {background: url(../graphics/h3_lighting_industrial.gif) no-repeat 0px 14p}
	#lighting h3.sconces {background: url(../graphics/h3_lighting_sconces.gif) no-repeat 0px 14px;}
	#inspiration h3 {background: url(../graphics/h3_inspiration_tips.gif) no-repeat 0px 14px;}
	#resources h3 {background: url(../graphics/h3_resources_community.gif) no-repeat 0px 14px;}




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

h4 {
	height: 50px;
	margin: 0 0 10px;
	width: 300px;
}


#home h4 {
	color: #FFF;
	font-size: 1.8em;
	font-weight: normal;
	height: 25px;
	margin: 20px 0 0;
	padding: 0;
	width: 250px;
}

	#about h4 {background: #D2CC9F url(../graphics/h4_about-news.gif) no-repeat 10px 30px;}
	#hardware h4 {background: #D2CC9F url(../graphics/h4_hardware-produtcs.gif) no-repeat 10px 30px;}
	#registers h4 {background: #D2CC9F url(../graphics/h4_registers-produtcs.gif) no-repeat 10px 30px;}
	#architecturals h4 {background: #D2CC9F url(../graphics/h4_architecturals-produtcs.gif) no-repeat 10px 30px;}
	#iron h4 {background: #D2CC9F url(../graphics/h4_iron-produtcs.gif) no-repeat 10px 30px;}
	#lighting h4 {background: #D2CC9F url(../graphics/h4_lighting-produtcs.gif) no-repeat 10px 30px;}
	#inspiration h4 {background: #D2CC9F url(../graphics/h4_archive_designideas.gif) no-repeat 10px 30px;}
	#resources h4 {background: #D2CC9F url(../graphics/h4_form.gif) no-repeat 10px 30px;}
	#contact h4 {background: #D2CC9F url(../graphics/h4_form.gif) no-repeat 10px 30px;}

 	h4#featured {background: #D2CC9F url(../graphics/h4_featured-produtcs.gif) no-repeat 10px 30px;	margin: 30px 0 10px;}
 	h4#featured2 {background: #D2CC9F url(../graphics/h4_featured-produtcs.gif) no-repeat 10px 30px;	margin: 0 0 10px;}
	h4#tips {background: #D2CC9F url(../graphics/h4_produtcs_tips.gif) no-repeat 10px 30px; margin: 15px 0 10px;}
	h4#selling {background: #D2CC9F url(../graphics/h4_contact-selling.gif) no-repeat 10px 30px; margin: 15px 0 10px;}
	h4#designers {background: #D2CC9F url(../graphics/h4_archive_designers.gif) no-repeat 10px 30px; margin: 15px 0 10px;}

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

h5 {
	color: #484741;
	font-size: 2.3em;
	font-weight: normal;
	line-height: 1.2em;
	margin: 0 0 2px;
}

	h5.borderline  {
		border-bottom: 1px solid #D7D8D8;	
		margin: 0 0 5px;
		width: 100%;
	}
	
	.year h5.borderline {background: url(../graphics/arrow-down.gif) no-repeat 600px 13px;}	
	.year h5.borderline-open {background: url(../graphics/arrow-up.gif) no-repeat 600px 13px;}

h6 {
	color: #484741;
	font-size: 1.8em;
	font-weight: normal;
	line-height: 1.2em;
	margin: 0 0 4px;
}

	h6.article {
		margin: 20px 0 4px;
	}


	h6.smalltitle {
		color: #484741;
		font-size: 1.6em;
		font-weight: normal;
		line-height: 1em;
		margin: 0 0 4px;
	}

	.beige {
		color: #90886D;
	}



/* --------------------------------
	IMAGES 
-------------------------------- */

a img {
	border: 0;
}

img#logo {
	float: left;
	margin: 0 15px 0 0;
}

.imgcontent img {
	float: left;
	padding: 0 0 15px 0;
}

.imgleft {
	float: left;
	margin: 0 15px 15px 0;
}

.imgmargerigth {
	margin: 0 15px 0 0;
}

.imgright {
	margin: 10px 0;
}

#sidebar img {
	margin: 20px 0 0;
	padding: 0 0 20px;
	border-bottom: 1px solid #BFB781;
}
	

/* Image Replacement 
------------------------------------------- */

.ir {
	background-position:0 0;
	background-repeat:no-repeat;
	display:block;
	overflow:hidden;
	text-indent:-999em;
}

.ir a {
	display:block;
	height:100%;
	width:100%;
}


/* --------------------------------
	HOMEPAGE 
________________________________ */

.hometxt {
	color: #90886D;
	font-size: 1.4em;
	font-style: italic;	
	line-height: 1.2em;;
}

/* --------------------------------
	FOOTER 
________________________________ */

#footer {
	color: #575959;
	font-family: Arial, Helvetica, sans-serif;
    font-size: 1em;
}

#footer a {
	color: #575959;
	font-size: 1em;
}

#footer a:hover {
	color: #575959;
	font-size: 1em;
}

#footer p.right {
	font-size: 1em;
	}

/* --------------------------------
	MAIN 
________________________________ */

ul.list {
	list-style-type: disc;	
	margin: 15px 0 0;
}

ul.list li {
	color:#AB5A45;
	margin: 0 0 5px 15px;
}

ul.list li a {
	font-size: 1.2em;
}


.bold {
	font-size: 1.4em;	
	font-weight: bold;
}

.normalbold {	
	font-weight: bold;
}

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

form {
	margin: 0 0 20px 0;
}

form p {
	margin: 0;
}

label {
	float: left;
	color: #575959;
	font-size: 1.0em;
	margin: 5px 0;
	width: 70px;
}

	#home label {
		color: #888168;
	}

.textbox {
	background: #FFF url(../graphics/bg-form.png) repeat-x 0 0;
	border: 1px solid #D2CC9F;
	font-size: 1em;
	margin: 5px 0;
	padding: 3px;
	text-align: left;
	width: 180px;
}

	#home .textbox {
		border: 1px solid #FFF;
		width: 160px;
	}

#submit {
	width: 94px;
	margin: 10px 0 0;
}

/*
----------------------------------
Inspiration
----------------------------------
*/

.toggle-content dt {
	background: url(../graphics/arrow-down.gif) no-repeat right 2px;
	border-bottom: 1px solid #D7D8D8;
	clear: left;
	color: #484741;
	cursor: pointer;
	font-size: 1.7em;
	font-weight: normal;
	line-height: 1em;
	margin: 0 0 10px;
	padding: 0 0 4px;
}
	
	.toggle-content dt.open {
		background: url(../graphics/arrow-up.gif) no-repeat right 2px;
	}
	
.inspiration-tips dd img {
	float: left;
	display: block;	
	margin: 3px 0 25px;
}

.inspiration-tips dd p {
	display: block;
	margin: 0 25px 25px 100px;
}