﻿/*************************************************************************/
/* Start of Global styles */
html
{
    background-color: #f0eee2;
}

/* Remove padding and margin here, because most browsers have a 
   default margin and padding setting. This can really throw off 
   your design. */
body
{
    padding: 0px;
    margin: 0px;
}

/* Many places had small pieces that needed to be enlarged with 
   the text bolded as well. The next 2 classes helped make this 
   easier */
.LargeBold
{
    font-weight: bold;
    font-size: 16px;
}

.LargerBold
{
    font-weight: bold;
    font-size: 20px;
}

/* All links tended to be the same color (good idea) and have these 
   basic style rules */
.Link
{
    color: #0066cc;
    font-weight: bold;
}

/* People expect some kind of change when hovering over a link */
.Link:hover
{
    text-decoration: underline;
}

/* It's not cool when an image gets a blue border from being inside 
   a link tag */
.ImageLink img
{
    border-style: none;
}

/* Basic rules common to all section header text */
.SectionHeader
{
    font-size: 18px;
    font-weight: bold;
}

/* The main content font-size is slightly larger than the menu 
   and sidebar areas. Rather than repeating this syle inline 
   everywhere, do it once and simply assign the class. */
.MainContent
{
    font-size: 15px;
}

/* Content in pages that do not have a heading will appear lower
   than other pages that do have a heading, as the heading is a
   span, and doesn't have the same spacing as a 'p' element. */
.NoHeadingContent
{
    margin-top: 0px;
}

/* End of Global styles */
/*************************************************************************/


/*************************************************************************/
/* Start of container styles */
/* This is the main div where everything is contained. The margin:0px auto; 
   style rule is what centers the site in the browser window. The position:relative 
   rule is what allows the columns lengths to match up dynamically. Combined with 
   the float rules on the columns and a background image repeated on the y axis, 
   all columns will appear to be the same length. */
#OuterContainer
{
    /* Total width of site: 937px */
    width: 937px;
    position: relative;
    margin: 0px auto;
    font-family: "Times New Roman";
    font-size: 14px;
}

#InnerContainer
{
    width: 937px;
    float: left;
    background-image: url( '../images/MasterPageImages/BackgroundImage.gif' );
    background-repeat: repeat-y;
    border-top: 3px solid #000000;
    border-bottom: 3px solid #000000;
}

/* End of container styles */
/*************************************************************************/


/*************************************************************************/
/* Start of header styles */
#Header
{
    width: 937px;
    height: 50px;
    padding-left: 5px;
    background-image: url( '../images/MasterPageImages/Header.gif' );
    background-repeat: no-repeat;
}

/* End of header styles */
/*************************************************************************/


/*************************************************************************/
/* Start of Menu styles */

#Menu
{
    width: 130px;
    float: left;
    font-size: 16px;
    text-align: right;
    border-left: 3px solid black;
}

#Menu a
{
    position: relative;
    top: 175px;
    color: #FFFFFF;
    text-decoration: none;
    padding-right: 5px;
}

/*End of Menu styles */
/*************************************************************************/


/*************************************************************************/
/* Start of main content left styles */

#MainLeft
{
    width: 340px;
    float: left;
    background-color: #FFFFFF;
    border-left: 3px solid black;
}

.ContentLeft
{
    width: 310px;
    font-family: Papyrus;
    padding: 5px;
    margin-left: 10px;
    margin-top: 10px;
}

#DownloadMonthlyMagazine
{
    background-color: #f0eee2;
    cursor: pointer;
}

#DownloadMonthlyMagazine a
{
    color: #000000;
    text-decoration: none;
}

#DownloadMonthlyMagazine p
{
    font-style: italic;
    padding: 10px;
}

#Banner
{
    margin-top: 10px;
    margin-left: 10px;
    border: 3px solid black;
}

/* End of main content left styles */

/* Start of main content right styles */

#MainRight
{
    width: 315px;
    float: left;
    background-color: #FFFFFF;
}

#foodImageSlides
{
    margin-top: 10px;
    height: 287px;
}

.imageSlide
{
    border: 2px solid black;
}

#EducationInspirationQuality
{
    width: 294px;
    height: 25px;
    position: relative;
    left: 2px;
    font-family: Papyrus;
    font-weight: bold;
    font-size: 18px;
    text-align: center;
    padding: 3px;
    color: #FFFFFF;
    background-color: #993333;
}

.ContentRight
{
    width: 280px;
    position: relative;
    font-family: Papyrus;
    padding: 10px;
    margin-top: 10px;
    background-color: #f0eee2;
}

/* End of main content right styles */


/*************************************************************************/
/* Start of sidebar styles */

#OnThePlate
{
    font-weight: bold;
    font-style: italic;
    font-size: 16px;
}

#Sidebar
{
    width: 130px;
    float: left;
    padding: 5px;
    color: #FFFFFF;
    background-color: #993333;
    border-left: 3px solid black;
    border-right: 3px solid black;
}

/* End of sidebar styles */
/*************************************************************************/


/*************************************************************************/
/* Start of Footer styles */

#Footer
{
    text-align: center;
    height: 40px;
}

/* End of Footer styles */
/*************************************************************************/


/* End of 'Section' styles. The following styles are specific to the page 
   on which they are applied */


/*************************************************************************/
/* Start of Home page content styles */

#VCECoverImage
{
    float: left;
    padding-right: 5px;
    padding-bottom: 5px;
    position: relative;
    top: 5px;
}

#PrivacyPolicy
{
    width: 290px;
    font-style: italic;
    padding: 10px;
}

/* End of Home page content styles */
/*************************************************************************/


/*************************************************************************/
/* Start of Interviews styles */

.InterviewThumbnail
{
    padding-right: 5px;
    float: left;
}

/* End of Interviews styles */
/*************************************************************************/

/*************************************************************************/
/* Start of Meals styles */

#MealPackages
{
    font-family:Papyrus;
    font-size:18px;
    margin-top:20px;
}

#MealPackages a
{
    font-weight: bold;
    font-size: 20px;
    color: #0066cc;
    font-weight: bold;
}

/* End of Meals styles */
/*************************************************************************/

/*************************************************************************/
/* Start of Slider styles */

#slider ul, 
#slider li
{
    margin: 0;
    padding: 0;
    list-style: none;
}

#slider, 
#slider li
{
/*
    define width and height of container element and list item (slide) list items must be the same size as the slider area
*/
    width: 270px;
    height: 450px;
    overflow: hidden;
}

span#prevBtn
{
    position:absolute;
    left:10px;
    bottom:20px;
}

span#nextBtn
{
    position:absolute;
    right:10px;
    bottom:20px;
}

/* End of Slider styles */
/*************************************************************************/

