/* CSS Document */
/* French Ranges Stove Collection section CSS Document */
/*	Author:			Barkingweb.com - Nick Barling 
*	Date:			May 9 2006	
*	Version:		1.0
*	File:			collection.css
*	Description:	CSS File to style site's 'the collection' stove pages content	
*	Notes:			This is the file to alter to make changes to styling within 'the collection' sub menu pages.
*					Use the descriptive headers to identify the elements that you
*					wish to change.
*/

#wrapper{
background-color: #d6a86a;
border: 1px solid #333333;
margin: 10px auto;
width: 940px; /* width is needed for page sizing but also asigns the MS 'layout' quality to the wrapper (alternate would be the holly hack */ 
position: relative; /* positioning is required to allow control of absolutely positioned elements within the wrapper, using the wrapper as a reference point */
}

#wrapper_cormatin{
background-color: #d8ad5f;
border: 1px solid #333333;
margin: 10px auto;
width: 940px; /* width is needed for page sizing but also asigns the MS 'layout' quality to the wrapper (alternate would be the holly hack */ 
position: relative; /* positioning is required to allow control of absolutely positioned elements within the wrapper, using the wrapper as a reference point */
}

#wrapper_rully{
background-color: #d8ad5f;
border: 1px solid #333333;
margin: 10px auto;
width: 940px; /* width is needed for page sizing but also asigns the MS 'layout' quality to the wrapper (alternate would be the holly hack */ 
position: relative; /* positioning is required to allow control of absolutely positioned elements within the wrapper, using the wrapper as a reference point */
}

#wrapper_cluny{
background-color: #d09c62;
border: 1px solid #333333;
margin: 10px auto;
width: 940px; /* width is needed for page sizing but also asigns the MS 'layout' quality to the wrapper (alternate would be the holly hack */ 
position: relative; /* positioning is required to allow control of absolutely positioned elements within the wrapper, using the wrapper as a reference point */
}

#wrapper_cluny1400{
background-color: #bfae4f;
border: 1px solid #333333;
margin: 10px auto;
width: 940px; /* width is needed for page sizing but also asigns the MS 'layout' quality to the wrapper (alternate would be the holly hack */ 
position: relative; /* positioning is required to allow control of absolutely positioned elements within the wrapper, using the wrapper as a reference point */
}

#wrapper_cluny1800{
background-color: #d8d0bd;
border: 1px solid #333333;
margin: 10px auto;
width: 940px; /* width is needed for page sizing but also asigns the MS 'layout' quality to the wrapper (alternate would be the holly hack */ 
position: relative; /* positioning is required to allow control of absolutely positioned elements within the wrapper, using the wrapper as a reference point */
}

#wrapper_chagny1400{
background-color: #cbbb63;
border: 1px solid #333333;
margin: 10px auto;
width: 940px; /* width is needed for page sizing but also asigns the MS 'layout' quality to the wrapper (alternate would be the holly hack */ 
position: relative; /* positioning is required to allow control of absolutely positioned elements within the wrapper, using the wrapper as a reference point */
}

#wrapper_chagny1800{
background-color: #d8d0bd;
border: 1px solid #333333;
margin: 10px auto;
width: 940px; /* width is needed for page sizing but also asigns the MS 'layout' quality to the wrapper (alternate would be the holly hack */ 
position: relative; /* positioning is required to allow control of absolutely positioned elements within the wrapper, using the wrapper as a reference point */
}

#wrapper_chambertin{
background-color: #aeb16b;
border: 1px solid #333333;
margin: 10px auto;
width: 940px; /* width is needed for page sizing but also asigns the MS 'layout' quality to the wrapper (alternate would be the holly hack */ 
position: relative; /* positioning is required to allow control of absolutely positioned elements within the wrapper, using the wrapper as a reference point */
}

#wrapper_savigny{
background-color: #d8d0bd;
border: 1px solid #333333;
margin: 10px auto;
width: 940px; /* width is needed for page sizing but also asigns the MS 'layout' quality to the wrapper (alternate would be the holly hack */ 
position: relative; /* positioning is required to allow control of absolutely positioned elements within the wrapper, using the wrapper as a reference point */
}

#wrapper_saulieu{
background-color: #d09c62;
border: 1px solid #333333;
margin: 10px auto;
width: 940px; /* width is needed for page sizing but also asigns the MS 'layout' quality to the wrapper (alternate would be the holly hack */ 
position: relative; /* positioning is required to allow control of absolutely positioned elements within the wrapper, using the wrapper as a reference point */
}

#wrapper_volnay{
background-color: #aeb16b;
border: 1px solid #333333;
margin: 10px auto;
width: 940px; /* width is needed for page sizing but also asigns the MS 'layout' quality to the wrapper (alternate would be the holly hack */ 
position: relative; /* positioning is required to allow control of absolutely positioned elements within the wrapper, using the wrapper as a reference point */
}

#wrapper_vougeot{
background-color: #daab8b;
border: 1px solid #333333;
margin: 10px auto;
width: 940px; /* width is needed for page sizing but also asigns the MS 'layout' quality to the wrapper (alternate would be the holly hack */ 
position: relative; /* positioning is required to allow control of absolutely positioned elements within the wrapper, using the wrapper as a reference point */
}

#wrapper_sully{
background-color: #d6a86a;
border: 1px solid #333333;
margin: 10px auto;
width: 940px; /* width is needed for page sizing but also asigns the MS 'layout' quality to the wrapper (alternate would be the holly hack */ 
position: relative; /* positioning is required to allow control of absolutely positioned elements within the wrapper, using the wrapper as a reference point */
}

#wrapper_chagny{
background-color: #d6a86a;
border: 1px solid #333333;
margin: 10px auto;
width: 940px; /* width is needed for page sizing but also asigns the MS 'layout' quality to the wrapper (alternate would be the holly hack */ 
position: relative; /* positioning is required to allow control of absolutely positioned elements within the wrapper, using the wrapper as a reference point */
}

#wrapper_fontenay{
background-color: #e6ba54;
border: 1px solid #333333;
margin: 10px auto;
width: 940px; /* width is needed for page sizing but also asigns the MS 'layout' quality to the wrapper (alternate would be the holly hack */ 
position: relative; /* positioning is required to allow control of absolutely positioned elements within the wrapper, using the wrapper as a reference point */
}

#wrapper_citeaux{
background-color: #d09c62;
border: 1px solid #333333;
margin: 10px auto;
width: 940px; /* width is needed for page sizing but also asigns the MS 'layout' quality to the wrapper (alternate would be the holly hack */ 
position: relative; /* positioning is required to allow control of absolutely positioned elements within the wrapper, using the wrapper as a reference point */
}

.col_main_content{
position: relative; /* positioning is required to allow control of absolutely positioned elements within the div, using the div as a reference point */
margin-top: 80px;
margin-left: 40px;
margin-right: 300px;
}

.col_main_content h3{
font-size: 80%;
color: #a9891b;
padding-top: 24px;
margin-bottom: 5px;
}

.col_main_content p{
font-size: 75%;
line-height: 155%;
color: #333333;
letter-spacing: normal;
text-align: left;
padding-right: 5px;
padding-bottom: 5px;
}

.col_main_content-new{
margin-left: 40px;
margin-right: 300px;
}

.col_main_content-new h3{
font-size: 80%;
color: #a9891b;
margin-bottom: 5px;
}

.col_main_content-new p{
font-size: 75%;
line-height: 155%;
color: #333333;
letter-spacing: normal;
text-align: left;
padding-right: 5px;
padding-bottom: 5px;
}

.col_main_bottom_content{ /* this is used as a starting point for the floats nested within it in the html document */
margin-top: 0px;
margin-left: 40px;
margin-right: 300px;
}

.col_main_bottom_content h3{
font-size: 80%;
color: #a9891b;
padding-top: 10px;
margin-bottom: 5px;
}

.col_main_bottom_content p{
font-size: 75%;
line-height: 155%;
color: #333333;
letter-spacing: normal;
text-align: left;
padding-right: 5px;
padding-bottom: 5px;
}

/************************* start of divs containing the stove images **************************************/

#ap_rangeface{
position: absolute; 
top: auto;
left: 20px;
width: 350px; 
height: 240px;
z-index: 10;  
}

#rangeface{
	margin: 10px 0 15px 20px;
	width: 350px; 
	z-index: 10;
	float: left;
}

#rangeface p{
	font-size: 70%;
	font-style: italic;
	line-height: 155%;
	font-weight: bold;
	letter-spacing: normal;
	text-align: center;
}

/********************** start of css for stove large image pages ****************************************************/ 

#ap_trad_config_volnay{ /* control for the text bullet list */
position: absolute; 
top: 295px;
left: 360px;
width: 325px; 
margin-bottom: 0px; /* adding a large margin forces the wrapper div to remain open below the image within the ap div */
z-index: 20;
}

#ap_trad_config_volnay h3{
font-size: 80%;
color: #a9891b;
padding-top: 10px;
margin-bottom: 5px;
margin-left: 0px;
}

#ap_trad_config_volnay ul{
font-size: 75%;
line-height: 155%;
color: #333333;
letter-spacing: normal;
}

#ap_trad_config_volnay ul li{
list-style: none;
}

#ap_classique_config_volnay{ /* control for the text bullet list */
position: absolute; 
top: 510px;
left: 360px;
width: 325px; /* half the width of the ap div it covers */
margin-bottom: 0px; /* adding a large margin forces the wrapper div to remain open below the image within the ap div */
z-index: 30;
}

#ap_classique_config_volnay h3{
font-size: 80%;
color: #a9891b;
padding-top: 10px;
margin-bottom: 5px;
margin-left: 0px;
}

#ap_classique_config_volnay ul{
font-size: 75%;
line-height: 155%;
color: #333333;
letter-spacing: normal;
}

#ap_classique_config_volnay ul li{
list-style: none;
}

#ap_trad_config_vougeot{ /* control for the text bullet list */
position: absolute; 
top: 295px;
left: 360px;
width: 325px; 
margin-bottom: 0px; /* adding a large margin forces the wrapper div to remain open below the image within the ap div */
z-index: 20;
}

#ap_trad_config_vougeot h3{
font-size: 80%;
color: #a9891b;
padding-top: 10px;
margin-bottom: 5px;
margin-left: 0px;
}

#ap_trad_config_vougeot ul{
font-size: 75%;
line-height: 155%;
color: #333333;
letter-spacing: normal;
}

#ap_trad_config_vougeot ul li{
list-style: none;
}

#ap_classique_config_vougeot{ /* control for the text bullet list */
position: absolute; 
top: 510px;
left: 360px;
width: 325px; /* half the width of the ap div it covers */
margin-bottom: 0px; /* adding a large margin forces the wrapper div to remain open below the image within the ap div */
z-index: 30;
}

#ap_classique_config_vougeot h3{
font-size: 80%;
color: #a9891b;
padding-top: 10px;
margin-bottom: 5px;
margin-left: 0px;
}

#ap_classique_config_vougeot ul{
font-size: 75%;
line-height: 155%;
color: #333333;
letter-spacing: normal;
}

#ap_classique_config_vougeot ul li{
list-style: none;
}

/* positioning for the range top options diagrams in the cluny, volnay and vougeot config.html pages */

#traditional_volnay{
position: relative; 
top: 35px;
left: 40px;
width: 650px;
padding-bottom: 5px;
margin-bottom: 5px;
}

#classique_volnay{
position: relative; 
top: 0px;
left: 40px;
width: 650px;
margin-top: 2px;
margin-bottom: 10px; 
}

#traditional_vougeot{
position: relative; 
top: 35px;
left: 40px;
width: 650px;
padding-bottom: 5px;
margin-bottom: 5px;
}

#classique_vougeot{
position: relative; 
top: 0px;
left: 40px;
width: 650px;
margin-top: 2px;
margin-bottom: 10px; 
}

#ap_large_cluny{
position: relative; 
top: 35px;
left: 40px;
width: 650px; 
margin-bottom: 100px; /* adding a large margin forces the wrapper div to remain open below the image within the ap div */
}

#ap_dim_cluny{
position: relative; 
top: 35px;
left: 40px;
width: 650px; 
margin-bottom: 100px; /* adding a large margin forces the wrapper div to remain open below the image within the ap div */
}

#ap_large_cluny1400{
position: relative; 
top: 35px;
left: 40px;
width: 650px; 
margin-bottom: 100px; /* adding a large margin forces the wrapper div to remain open below the image within the ap div */
}

#ap_dim_cluny1400{
position: relative; 
top: 35px;
left: 40px;
width: 650px; 
margin-bottom: 100px; /* adding a large margin forces the wrapper div to remain open below the image within the ap div */
}

#ap_dim_volnay{
position: relative; 
top: 35px;
left: 40px;
width: 650px; 
margin-bottom: 100px; /* adding a large margin forces the wrapper div to remain open below the image within the ap div */
}

#ap_large_volnay{
position: relative; 
top: 35px;
left: 40px;
width: 650px; 
margin-bottom: 100px; /* adding a large margin forces the wrapper div to remain open below the image within the ap div */
}

#ap_dim_vougeot{
position: relative; 
top: 35px;
left: 40px;
width: 650px; 
margin-bottom: 100px; /* adding a large margin forces the wrapper div to remain open below the image within the ap div */
}

#ap_large_sully{
position: relative; 
top: 35px;
left: 40px;
width: 650px; 
margin-bottom: 100px; /* adding a large margin forces the wrapper div to remain open below the image within the ap div */
}

#ap_dim_sully{
position: relative; 
top: 35px;
left: 40px;
width: 650px; 
margin-bottom: 100px; /* adding a large margin forces the wrapper div to remain open below the image within the ap div */
}

#ap_large_sully1800{
position: relative; 
top: 35px;
left: 40px;
width: 650px; 
margin-bottom: 100px; /* adding a large margin forces the wrapper div to remain open below the image within the ap div */
}

#ap_large_sully2200{
position: relative; 
top: 35px;
left: 40px;
width: 650px; 
margin-bottom: 100px; /* adding a large margin forces the wrapper div to remain open below the image within the ap div */
}

#ap_dim_sully2200{
position: relative; 
top: 35px;
left: 40px;
width: 650px; 
margin-bottom: 100px; /* adding a large margin forces the wrapper div to remain open below the image within the ap div */
}

#ap_large_fontenay{
position: relative; 
top: 35px;
left: 40px;
width: 650px; 
margin-bottom: 100px; /* adding a large margin forces the wrapper div to remain open below the image within the ap div */
}

#ap_dim_fontenay{
position: relative; 
top: 35px;
left: 40px;
width: 650px; 
margin-bottom: 100px; /* adding a large margin forces the wrapper div to remain open below the image within the ap div */
}

.ap_large_stove_name{
position: absolute; 
top: 260px;
left: 700px;
width: 154px; 
height: 82px; 
z-index: 20;
} 

.ap_img_map_all{
position: absolute; 
top: 400px;
left: 700px;
width: 165px; 
height: 184px; 
z-index: 25;
}

.ap_get_adobe_reader{
position: absolute; 
top: 600px;
left: 777px;
width: 165px; 
height: 184px; 
z-index: 26;
}

/******************** end of css for stove large image pages **********************************************************/

/******************** start of css for stove config pages *************************************************************/

.ap_config_text{ /* do not ap this div. If it were ap it would spill out of the wrapper below the range top config image */ 
position: relative;
margin-top: -60px; /* a negative margin tucks the text under the range top config image */
padding-top: 0px;
}

.ap_config_text h3{
font-size: 80%;
color: #a9891b;
padding-top: 10px;
margin-bottom: 5px;
margin-left: 50px;
}

.ap_config_text ul{
font-size: 75%;
line-height: 155%;
color: #333333;
letter-spacing: normal;
margin-left: 50px;
margin-right: 40px;
}

.ap_config_text ul li{
display: inline;
text-decoration: none;
padding-right: 10px;
}

/******************** end of css for stove config pages *************************************************************/

#ap_kitchen1{
position: absolute; 
top: 530px;
left: 654px;
width: 255px; 
height: 190px; 
z-index: 35;  
}

#ap_kitchen2{
position: absolute; 
top: 326px;
left: 633px;
width: 261px; 
height: 216px; 
z-index: 33;  
}

#ap_kitchen3{
position: absolute; 
top: 180px;
left: 659px;
width: 261px; 
height: 161px; 
z-index: 30;  
}

#ap_viz{
position: absolute; 
top: 190px;
left: 650px;
width: 236px; 
height: 177px; 
z-index: 30;  
}

#ap_veg{
position: absolute; 
top: 367px;
left: 700px;
width: 199px; 
height: 133px; 
z-index: 35;  
}

#ap_barrel{
position: absolute; 
top: 430px;
left: 640px;
width: 185px; 
height: 278px; 
z-index: 33;  
}

#ap_wine_bottles{
position: absolute; 
top: 190px;
left: 650px;
width: 224px; 
height: 168px; 
z-index: 30;  
}

#ap_carrots{
position: absolute; 
top: 348px;
left: 711px;
width: 184px; 
height: 300px; 
z-index: 33;  
}

#ap_olives{
position: absolute; 
top: 570px;
left: 634px;
width: 246px; 
height: 148px; 
z-index: 35;  
}

#ap_wisteria{
position: absolute; 
top: 190px;
left: 659px;
width: 235px; 
height: 170px; 
z-index: 30;  
}

#ap_sausage{
position: absolute; 
top: 348px;
left: 633px;
width: 253px; 
height: 243px; 
z-index: 33;  
}

#ap_pom{
position: absolute; 
top: 570px;
left: 654px;
width: 254px; 
height: 170px; 
z-index: 35;  
}

#ap_tree{
position: absolute; 
top: 348px;
left: 633px;
width: 197px; 
height: 255px; 
z-index: 33;  
}

#ap_mustard{
position: absolute; 
top: 570px;
left: 654px;
width: 240px; 
height: 160px; 
z-index: 35;  
}

#ap_citroen{
position: absolute; 
top: 580px;
left: 654px;
width: 245px; 
height: 165px; 
z-index: 33;  
}

#ap_cherry{
position: absolute; 
top: 348px;
left: 633px;
width: 190px; 
height: 245px; 
z-index: 35;  
}

#ap_crab{
position: absolute; 
top: 190px;
left: 659px;
width: 235px; 
height: 225px; 
z-index: 30;  
}

#ap_card{
position: absolute; 
top: 190px;
left: 659px;
width: 235px; 
height: 235px; 
z-index: 30;  
}

#ap_postbox{
position: absolute; 
top: 212px;
left: 655px;
width: 232px; 
height: 169px; 
z-index: 30;  
}

#ap_cheese{
position: absolute; 
top: 370px;
left: 676px;
width: 232px; 
height: 180px; 
z-index: 35;  
}

#ap_onion{
position: absolute; 
top: 545px;
left: 629px;
width: 249px; 
height: 165px; 
z-index: 33;  
}

#ap_abondance{
position: absolute; 
top: 212px;
left: 655px;
width: 253px; 
height: 110px; 
z-index: 30;  
}

#ap_garlic{
position: absolute; 
top: 545px;
left: 629px;
width: 161px; 
height: 160px; 
z-index: 37;  
}

#ap_window{
position: absolute; 
top: 318px;
left: 719px;
width: 200px; 
height: 340px; 
z-index: 35;  
}

#ap_tower{
position: absolute; 
top: 212px;
left: 629px;
width: 252px; 
height: 144px; 
z-index: 33;  
}

#ap_mush{
position: absolute; 
top: 326px;
left: 711px;
width: 177px; 
height: 165px; 
z-index: 35;  
}

#ap_cock{
position: absolute; 
top: 465px;
left: 655px;
width: 230px; 
height: 297px; 
z-index: 30;  
}

#ap_postcard{
position: absolute; 
top: 190px;
left: 655px;
width: 250px; 
height: 155px; 
z-index: 30;  
}

#ap_bread{
position: absolute; 
top: 333px;
left: 722px;
width: 180px; 
height: 200px; 
z-index: 35;  
}

#ap_castle{
position: absolute; 
top: 530px;
left: 629px;
width: 252px; 
height: 214px; 
z-index: 33;  
}

#ap_apple_pear{
position: absolute; 
top: 190px;
left: 650px;
width: 240px; 
height: 180px; 
z-index: 30;  
}

#ap_sunflowers{
position: absolute; 
top: 357px;
left: 711px;
width: 200px; 
height: 133px; 
z-index: 35;  
}

#ap_crayfish{
position: absolute; 
top: 435px;
left: 632px;
width: 224px; 
height: 280px; 
z-index: 33;  
}

/**************************** start of divs containing the images of the stove names (the fontenay, etc) ******************************/

#ap_stove_lacanche{
position: absolute; 
top: auto;
left: 400px;
width: 160px; 
height: 82px; 
z-index: 20;
} 

#ap_tag_prelude{
position: absolute;
top: 180px;
width: 460px;
left: 150px;
height: 86px;
z-index: 10;
}

#ap_tag_cluny{
position: absolute;
top: 180px;
width: 370px;
left: 180px;
height: 86px;
z-index: 10;
}

.ap_image_size{
position: absolute;
top: auto;
left: 30px;
}

.ap_rtn_img_text{
position: absolute;
top: 630px;
left: 330px;
}

.ap_cluny1400_rtn_img_text{
position: absolute;
top: 840px;
left: 450px;
}

/* controls return image text on configuration pages for cluny, volnay and vougeot */
.ap_rtn_img_text_cvv{
position: absolute;
top: 650px;
left: 330px;
width: 400px;
z-index: 10;
}

p.large_page_caption{
font-size: 9px !important;
font-style: italic;
line-height: 155%;
font-weight: bold;
letter-spacing: normal;
text-align: left;
padding: 5px;
vertical-align: middle;
text-decoration: none;
}

p.captions{
float: left;
margin-top: 250px; /* this margin forces the text below the ap image above the containing div */
font-size: 65%;
font-style: italic;
line-height: 155%;
font-weight: bold;
letter-spacing: normal;
text-align: left;
padding: 5px;
vertical-align: middle;
text-decoration: none;
}

p.bodycopy_floatleft_narrow{
float: left;
margin-top: 250px; /* this margin forces the text below the ap image above the containing div */
font-size: 65%;
font-style: italic;
line-height: 155%;
font-weight: bold;
letter-spacing: normal;
text-align: left;
padding: 5px;
vertical-align: middle;
text-decoration: none;
width: 320px;
}

.bodycopy_floatright{
font-size: 75%;
line-height: 155%;
text-align: left;
white-space: normal;
float: right;
padding-right: 6px;
width: 200px; /* the width controls the text positioning between the right col and ap range image */
margin-top: 90px; /* top margin allows the copy to sit under the absolutely positioned range name */
margin-right: 10px;
}

.bodycopy_floatright a{
text-decoration: none;
color: #666;
}

.bodycopy_floatright a:hover{
text-decoration: underline;
color: #232323;
}

.bodycopy_floatleft_wide{
font-size: 75%;
line-height: 155%;
text-align: left;
text-indent: 0px;
white-space: normal;
float: left;
padding-right: 10px;
width: 580px;
margin-top: 10px;
margin-right: 10px;
}

.bodycopy_floatleft_wide a{
text-decoration: none;
color: #666;
}

.bodycopy_floatleft_wide a:hover{
text-decoration: underline;
color: #232323;
}

.bodycopy_floatleft{
font-size: 75%;
line-height: 155%;
text-align: left;
text-indent: 45px;
white-space: normal;
float: left;
padding-left: 10px;
}

.col_main_content .captions{
font-size: 65%;
font-style: italic;
line-height: 155%;
font-weight: bold;
letter-spacing: normal;
text-align: left;
padding: 5px;
vertical-align: middle;
text-decoration: none;
}

.clearright{
clear: right;
}

.clearleft{
clear: left;
}

.clearboth{
clear: both;
}

/********************** start of css for the collection page ****************************************************/

#range_collection_thumb{
position: relative;
width: 920px;
margin: 0 0 0 10px;
padding: 0;
}