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


#wrapper_experience{
background-color: #d8a669;
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_community{
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: 400px;
}

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

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

.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;
}

.ambass{
margin-top: 110px;
}

.ambass_first{
margin-top: 60px;
font-size: 80%;
color: #333333;
}

.ambass_title {
margin-top: 130px;
font-size: 80%;
color: #333333;
}

.exp_pages{
margin-top: 20px;
margin-left: 50px;
margin-right: 50px;
}

.exp_pages_quote_name{
margin-top: 5px;
margin-left: 230px;
font-style: italic;
font-weight: bold;
}

.exp_pages_subquote_right{
margin-top: 5px;
margin-left: 245px;
font-style: italic;
}

.exp_pages_subquote{
margin-top: 5px;
font-style: italic;
text-align: right;
}

.exp_pages_header{
margin-top: 120px;
margin-left: 50px;
}

.exp_pages_italic{
margin-top: 10px;
margin-left: 50px;
font-style: italic;
}

hr{
color: #6F3700;
width: 100px;
margin-left: 250px;
height: 0.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 ap divs containing the stove images and tag line text **************************************/

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

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

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

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

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

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

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

/************************* end of ap divs containing the stove images and tag line text ****************************************/

/************************* start of body copy positioning **********************************************************************/

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: 10px; 
margin-right: 10px;
}

.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{
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;
}

/************************* end of body copy positioning ***************************************************************************/

/************************* start of ap image positioning **************************************************************************/

#ap_green{
position: absolute; 
top: 180px;
left: 633px;
width: 270px; 
height: 180px; 
z-index: 33;  
}

#ap_group{
position: absolute; 
top: 230px;
left: 610px;
width: 275px; 
height: 371px; 
z-index: 33;  
}

#ap_group_testim{
position: absolute; 
top: 185px;
left: 570px;
width: 345px; 
height: 182px; 
z-index: 33;  
}

#ap_owner{
position: absolute; 
top: 276px;
left: 533px;
width: 355px; 
height: 327px; 
z-index: 33;  
}

#ap_comp{
position: absolute; 
top: 402px;
left: 60px;
width: 600px; 
height: 166px; 
z-index: 31;  
}

#ap_comp2{
position: absolute; 
top: 602px;
left: 60px;
width: 600px; 
height: 12px; 
z-index: 33;  
}

#ap_recipe_text{
position: absolute; 
top: 622px;
left: 60px;
width: 600px; 
height: 12px; 
z-index: 35;  
}

#ap_recipe_text a{
font-size: 75%;
font-style: italic;
}

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

#ap_barkingweb_ack{
position: absolute;
height: auto;
width: 150px;
top: 715px;
left: 755px;
font-size: 60%;
font-style: normal;
color: #330000;
z-index: 53;
}

#ap_anniemeyer_ack{
position: absolute;
height: auto;
width:150px;
top: 703px;
left: 755px;
font-size: 60%;
font-style: normal;
color: #330000;
z-index:50;
}

#ap_barkingweb_ack a, #ap_anniemeyer_ack a{
color: #CC9933;
}

/************************* end of ap image positioning *****************************************************************************/

/************************* start of floated image positioning **********************************************************************/

.leftimage{
margin-right: 15px;
margin-bottom: 5px;
float: left;
}

.rightimage{
margin-left: 15px;
margin-bottom: 5px;
float: right;
}

/************************* end of floated image positioning *************************************************************************/

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