/*******************************************************************************
White Orchid Films - layout.css

Version:  Release - v1.0
Author:   Mat Wasik
Date:     June 10, 2007
*******************************************************************************/

/*
 * #01 - General
 * #02 - Main Sections
 * #03 - Specific Sections 
 * #04 - Menus / Lists
 * #05 - Forms
 * #06 - Other   
 */

/* #01 - GENERAL **************************************************************/

*
{
	margin: 0;
	padding: 0;
}

html
{
	/* footerStickAlt */
	height: 100%;
}

body
{
	/* centering */
  background: #ffffff url('../images/background_white.gif') repeat-y scroll 50% 0%;
			
	/* footerStickAlt */
	height: 100%;
}

#wrapper
{
  /* Width of whole wrapper is actually 760px - 6px border  [748=760-(2 x 6)] */
	width: 748px; 
  
  /* centering */
  margin: 0 auto;
		
	/* footerStickAlt */
	position: relative;
	min-height: 100%;
}

* html #wrapper
{
  /* footerStickAlt */
  height: 100%;
}

#header
{
  /* #6c9d30 is WOF green */
  background: #6c9d30 url('../images/green_round_edge.gif') no-repeat 100% 100%;
  /* needed to reduce width by 6px due to 3px padding on header-see style.css */
  width: 742px; 
  
  /* centering */
  margin: 0 auto;
  margin-top: 6px;
  padding: 3px;
  text-align: right;
}

#bottomOfLogo
{
  display: block;
	width: 480px;
	height: 25px;
  background: transparent url('../images/logo_bottom.gif') no-repeat scroll 0% 0%;
  float: left;
}

#mainContent
{
  display: block;
  width: 534px; /* 760-(2x6)-214 = 534 [Width-border-mainNav width] */

  float: right;
  text-align: left;  
}

#footer
{
  /* centering */
  margin: 0 auto;
  text-align: center;
  background: #6c9d30 url('../images/green_round_edge.gif') no-repeat 100% 100%;
  /* needed to reduce width by 6px due to 3px padding on footer-see style.css */
  width: 742px;
      
  /* footerStickAlt */
  position: relative;
  
  /* the following to px numbers just work, not sure why - need to figure it out */
  height: 14px; 
  margin-top: -30px;
    
  /* Blaine's stuff */
  clear: both;
  padding: 3px; 
}

/* #02 - MAIN SECTIONS ********************************************************/

#mastheadHome
{
  background: transparent url('../images/masthead_home.jpg') no-repeat scroll 0% 0%;
}

#mastheadWeddingPackages
{
  background: transparent url('../images/masthead_packages.jpg') no-repeat scroll 0% 0%;
}

#mastheadEvents
{
  background: transparent url('../images/masthead_events.jpg') no-repeat scroll 0% 0%;
}

#mastheadIncentives
{
  background: transparent url('../images/masthead_incentives.jpg') no-repeat scroll 0% 0%;
}

#mastheadTechInfo
{
  background: transparent url('../images/masthead_techinfo.jpg') no-repeat scroll 0% 0%;
}

#mastheadTestimonials
{
  background: transparent url('../images/masthead_testimonials.jpg') no-repeat scroll 0% 0%;
}

#mastheadContact
{
  background: transparent url('../images/masthead_contact.jpg') no-repeat scroll 0% 0%;
}


#pageTitleHome
{
  display: block;
  width: 225px;
  height: 25px;
  background: transparent url('../images/page_title_home.gif') no-repeat scroll 100% 0%;
  float: right;
  
  /* Need to move #pageTitle down due to #bottomOfLogo */
  margin-top: 10px;
}

#pageTitleWeddingPackages
{
  display: block;
  width: 225px;
  height: 25px;
  background: transparent url('../images/page_title_packages.gif') no-repeat scroll 100% 0%;
  float: right;
  
  /* Need to move #pageTitle down due to #bottomOfLogo */
  margin-top: 10px;
}

#pageTitleEvents
{
  display: block;
  width: 225px;
  height: 25px;
  background: transparent url('../images/page_title_events.gif') no-repeat scroll 100% 0%;
  float: right;
  
  /* Need to move #pageTitle down due to #bottomOfLogo */
  margin-top: 10px;
}

#pageTitleIncentives
{
  display: block;
  width: 225px;
  height: 25px;
  background: transparent url('../images/page_title_incentives.gif') no-repeat scroll 100% 0%;
  float: right;
  
  /* Need to move #pageTitle down due to #bottomOfLogo */
  margin-top: 10px;
}

#pageTitleTechInfo
{
  display: block;
  width: 225px;
  height: 25px;
  background: transparent url('../images/page_title_techinfo.gif') no-repeat scroll 100% 0%;
  float: right;
  
  /* Need to move #pageTitle down due to #bottomOfLogo */
  margin-top: 10px;
}

#pageTitleTestimonials
{
  display: block;
  width: 225px;
  height: 25px;
  background: transparent url('../images/page_title_testimonials.gif') no-repeat scroll 100% 0%;
  float: right;
  
  /* Need to move #pageTitle down due to #bottomOfLogo */
  margin-top: 10px;
}

#pageTitleContact
{
  display: block;
  width: 225px;
  height: 25px;
  background: transparent url('../images/page_title_contact.gif') no-repeat scroll 100% 0%;
  float: right;
  
  /* Need to move #pageTitle down due to #bottomOfLogo */
  margin-top: 10px;
}

/* #03 - SPECIFIC SECTIONS ****************************************************/

/* LETTER REPLACEMENTS */

/* Figured out a different way, no longer needed *******************************
.C
{
  float: left; /* Need to float left or image replacement won't work *
  background: url('../images/caps_c.gif') no-repeat scroll 0% 0%;
  
  /* Need to specify image dimensions or image replacemtn won't work *
  width: 14px;
  height: 14px;
  
  text-indent: -9999px;
  overflow: hidden; 
}

.I
{
  float: left; /* Need to float left or image replacement won't work *
  background: url('../images/caps_i.gif') no-repeat scroll 0% 0%;
  
  /* Need to specify image dimensions or image replacemtn won't work *
  width: 10px;
  height: 14px; 
  
  text-indent: -9999px;
  overflow: hidden;
}

.W

  float: left; /* Need to float left or image replacement won't work *
  background: url('../images/caps_w.gif') no-repeat scroll 0% 0%;
  
  /* Need to specify image dimensions or image replacemtn won't work *
  width: 22px;
  height: 14px; 
  
  
  text-indent: -9999px;
  overflow: hidden;
}

.freeNoObligation
{
  float: left; /* Need to float left or image replacement won't work *
  background: url('../images/free_no_obligation.gif') no-repeat scroll 0% 0%;
  
  /* Need to specify image dimensions or image replacemtn won't work *
  width: 142px;
  height: 20px; 
  
  
  text-indent: -9999px;
  overflow: hidden;
}

*******************************************************************************/

/* dining an b&b photos on incentives pages */
.incentivePhoto
{
  float: left;
  
  margin-left: 15px;
  margin-right: 15px;
  margin-bottom: 10px; 
}

.incentiveText
{
  float: left;
  /* Need to specify a width that is shorter than the default since the image will take up space on the left */
  width: 320px;
}

#incentiveTextCondition
{
  float: left;
  font-style: italic;
  /* Need to specify width in order for italic font to  work in IE5.5+ */
  /* There is a known IE6 italic bug: */ 
  /* http://www.positioniseverything.net/explorer/italicbug-ie.html */
  /* It's weird, 475px will push the entire mainContent down on IE6, however 474px works just fine */
  width: 474px; 
}

#testimonialsWidth
{
  width: 534px;
}

/* Wedding Packages page - rounded corner */
.rounded-corners
{
    width: 519px; /* 534 - 15 (margin-left) = 519px */ 
    margin-left: 15px;  
}

.rc-body .rc-corner .rc-content
{
    overflow: hidden; /* alternative to putting an empty div below the content with clear: both;
    				            This will ensure the height of .rc-content stretches to match the content,
    				            even if the content within is floated */
}

/* Light Green Box ************************************************************/
.lightGreenText .rc-header
{
    background: transparent url('../images/rc_lg_tl.gif') no-repeat 0 0; 
}

.lightGreenText .rc-header .rc-corner
{
    height: 21px;
    background: transparent url('../images/rc_lg_tr.gif') no-repeat right 0;
    overflow: hidden; 
}

.lightGreenText .rc-body
{
    background: transparent url('../images/rc_lg_l.gif') repeat-y 0 0;   
}

.lightGreenText .rc-body .rc-corner
{
    background: transparent url('../images/rc_lg_r.gif') no-repeat right 0;  
}

.lightGreenText .rc-footer
{
    background: transparent url('../images/rc_lg_bl.gif') no-repeat 0 0; 
}

.lightGreenText .rc-footer .rc-corner
{
    height: 11px;
    background: transparent url('../images/rc_lg_br.gif') no-repeat right 0;   
}

/* Dark Green Box *************************************************************/
.darkGreenText .rc-header
{
    background: transparent url('../images/rc_dg_tl.gif') no-repeat 0 0;
}

.darkGreenText .rc-header .rc-corner
{
    height: 21px;
    background: transparent url('../images/rc_dg_tr.gif') no-repeat right 0;
    overflow: hidden;
}

.darkGreenText .rc-body
{
    background: transparent url('../images/rc_dg_l.gif') repeat-y 0 0;
}

.darkGreenText .rc-body .rc-corner
{
    background: transparent url('../images/rc_dg_r.gif') no-repeat right 0; 
}

.darkGreenText .rc-footer
{
    background: transparent url('../images/rc_dg_bl.gif') no-repeat 0 0; 
}

.darkGreenText .rc-footer .rc-corner
{
    height: 11px;
    background: transparent url('../images/rc_dg_br.gif') no-repeat right 0;
}

/* Red Box ********************************************************************/
.redText .rc-header
{
    background: transparent url('../images/rc_r_tl.gif') no-repeat 0 0;
}

.redText .rc-header .rc-corner
{
    height: 21px;
    background: transparent url('../images/rc_r_tr.gif') no-repeat right 0;
    overflow: hidden;
}

.redText .rc-body
{
    background: transparent url('../images/rc_r_l.gif') repeat-y 0 0;
}

.redText .rc-body .rc-corner
{
    background: transparent url('../images/rc_r_r.gif') no-repeat right 0; 
}

.redText .rc-footer
{
    background: transparent url('../images/rc_r_bl.gif') no-repeat 0 0; 
}

.redText .rc-footer .rc-corner
{
    height: 11px;
    background: transparent url('../images/rc_r_br.gif') no-repeat right 0;
}

/* Purple Box *****************************************************************/
.purpleCorners .rc-header
{
    background: transparent url('../images/rc_p_tl.gif') no-repeat 0 0;
}

.purpleCorners .rc-header .rc-corner
{
    height: 21px;
    background: transparent url('../images/rc_p_tr.gif') no-repeat right 0;
    overflow: hidden;
}

.purpleCorners .rc-body
{
    background: transparent url('../images/rc_p_l.gif') repeat-y 0 0;
}

.purpleCorners .rc-body .rc-corner
{
    background: transparent url('../images/rc_p_r.gif') no-repeat right 0; 
}

.purpleCorners .rc-footer
{
    background: transparent url('../images/rc_p_bl.gif') no-repeat 0 0; 
}

.purpleCorners .rc-footer .rc-corner
{
    height: 11px;
    background: transparent url('../images/rc_p_br.gif') no-repeat right 0;
}

/* Creates a nice spacing after the three packages are listed */
.purpleCorners .rc-footer,
.redText .rc-footer {
  margin-bottom: 15px;
}
/* #04 - MENUS / LISTS ********************************************************/

/* Main menu graphics */
#mainNav
{
  display: block;
  float: left;
  width: 214px;
  
  overflow: hidden; 
  background: #ffffff url('../images/menu_bottom.gif') no-repeat scroll 100% 100%;
  
  /* this will make the background image sit right below the menu */
  padding-bottom: 115px;
  vertical-align: 100%;
}

#mainNav #menuHome 
{
  width: 214px;
  height: 34px;
  background: transparent url('../images/menu_all_pages.gif') no-repeat scroll 0px 0px; 
}

#mainNav #menuWeddingPackages 
{
  width: 214px;
  height: 34px;
  background: transparent url('../images/menu_all_pages.gif') no-repeat scroll -214px 0px;
}

#mainNav #menuOtherEvents 
{
  width: 214px;
  height: 34px;
  background: transparent url('../images/menu_all_pages.gif') no-repeat scroll -428px 0px;
}

#mainNav #menuIncentiveProgram 
{
  width: 214px;
  height: 34px;
  background: transparent url('../images/menu_all_pages.gif') no-repeat scroll -652px 0px;
}

#mainNav #menuTechInfo
{
  width: 214px;
  height: 34px;
  background: transparent url('../images/menu_all_pages.gif') no-repeat scroll -866px 0px;
}

#mainNav #menuTestimonials
{
  width: 214px;
  height: 34px;
  background: transparent url('../images/menu_all_pages.gif') no-repeat scroll -1080px 0px; 
}

/* When on a specific page, highlight menu item accordingly */
#index #menuHome
{
  width: 214px;
  height: 34px;
  background: #6c9d30 url('../images/menu_all_pages.gif') no-repeat scroll 0px -68px;
}

#packages #menuWeddingPackages
{
  width: 214px;
  height: 34px;
  background: #6c9d30 url('../images/menu_all_pages.gif') no-repeat scroll -214px -68px;
}

#events #menuOtherEvents
{
  width: 214px;
  height: 34px;
  background: #6c9d30 url('../images/menu_all_pages.gif') no-repeat scroll -428px -68px;
}

#incentives #menuIncentiveProgram
{
  width: 214px;
  height: 34px;
  background: #6c9d30 url('../images/menu_all_pages.gif') no-repeat scroll -652px -68px;
}

#techinfo #menuTechInfo
{
  width: 214px;
  height: 34px;
  background: #6c9d30 url('../images/menu_all_pages.gif') no-repeat scroll -866px -68px;
}

#testimonials #menuTestimonials
{
  width: 214px;
  height: 34px;
  background: #6c9d30 url('../images/menu_all_pages.gif') no-repeat scroll -1080px -68px;
}