/* round 3 style sheet for Rosa - for 1028px */

/* this body defines a white background color; background image is a dark red gradient strip that extends L/R of the banner and below. */
body 
{font-family: Arial, Helvetica, sans-serif; 
font-weight: 500; /* normal weight */
font-size: 11pt;
color: #000000;
background-color: #ffffff;
background-image: url('images/background1.jpg');
background-repeat: repeat-x; 
}

/* style for the scroll bar */ 
/* base color is in this page's grey family #8B8B8B, but 2 tones lighter. */
/* For track color, shades of the banner red, #c60203 are all too girlish/pink. */
/* better keep it simple */
html
{scrollbar-base-color: #a2a2a2;
} 

h1
{font-weight: bold;
font-size: 14pt;
text-align: left;
}

h2
{font-weight: bold;
font-size: 12pt;
text-align: left;
}

h3
{font-weight: bold;
font-size: 11pt;
text-align: left;
}

/* I have defined h1 as 14 pt, but also want to use 20pt on h1 sometimes, coz supposedly search engines give emphasis to h1 tags. */
/* So I define the "huge" class to be used on h1 sometimes. */
.huge
{font-size: 20pt;	
}

/* general color: banner-red #a40406; */
/* also           lighter red: #c30203; */
/* grey:          #bfbfbf;
/* 7S color: #9932cc; mid purple */
/* CCI color: #ff8533; mid orange */
/* PBE color: #4792A0; teal */

/* banner-text red */
.redcolor 
{color: #a40406;
}

/* if changing series colors: */
/* change color setting in various classes */
/* don't forget to adjust background-color in snb td */

/* 7S color: mid purple */ 
.s7color
{color: #9932cc;
}

/* CCI color: mid orange */
.ccicolor
{color: #ff8533;
}

/* PBE color: teal */ 
.pbecolor
{color: #4792A0;
}

/* ReHarm color: Medium Blue */ 
.rhcolor
{color: #0000CD;
}

.greycolor
{color: #bfbfbf;
} 

/* blue highlight for sentences, words */
.bluecolor
{color: #0000ff;
} 

/* bold the sentence */
.boldsent
{font-weight: 600;
}

/* italicize the sentence */
.italsent
{font-style: italic;
}

ul.one8th
{list-style-image: url('images/8th_tiny.gif');
}

ul.two8th
{list-style-image: url('images/8th_beamed.gif');
}

ul.redsquare
{list-style-image: url('images/redsq.gif')
}

ul.s7square
{list-style-image: url('images/s7sq.gif')
}

ul.ccisquare
{list-style-image: url('images/ccisq.gif')
}

ul.pbesquare
{list-style-image: url('images/pbesq.gif')
}

ul.rhsquare
{list-style-image: url('images/rhsq.gif')
}

/* define site wide link colors */
a:link
{color: #a40406; text-decoration: underline;
} /* our banner red */
a:visited
{color: #a40406; text-decoration: underline;
} /* same red  */
a:hover 
{color: #0000ff; text-decoration: underline;
} /* blue */
a:active
{color: #0000ff; text-decoration: underline;
}

/* this class is intended to be used with links that would like normal text */
a.disguised
{text-decoration: none; color: black;
}

/* id for Primary Navigation Bar (pnb) Used on top where cell color is transparent */
#pnbtop
{line-height: 120%;
border: 0;
color: #ffffff;
}
#pnbtop table
{border-width: 0; margin: 0px; width: 950px; font-size: 12px;
}/* border-spacing: 5px; this is supported only in >=IE8. So must use cellspacing in table tag instead*/
#pnbtop td
{text-align: center; vertical-align: center; padding: 4px 6px; background-color: transparent;
}
#pnbtop a:link
{color: #ffffff; text-decoration: none;
}
#pnbtop a:visited
{color: #ffffff; text-decoration: none;
}
/* yellow, black, gold are all reasonable colors. */
#pnbtop a:hover 
{color: blue; text-decoration: none;
} 
#pnbtop a:active 
{color: blue; text-decoration: none;
}

/* id for Primary Navigation Bar (pnb) */
#pnb
{line-height: 120%;
border: 0;
color: #ffffff;
}
#pnb table
{border-width: 0; margin: 0px; width: 950px; font-size: 12px;
}/* border-spacing: 5px; this is supported only in >=IE8. So must use cellspacing in table tag instead*/
#pnb td
{text-align: center; vertical-align: center; padding: 4px 6px; background-color: #AA0406;
}
#pnb a:link
{color: #ffffff; text-decoration: none;
}
#pnb a:visited
{color: #ffffff; text-decoration: none;
}
/* yellow, black, gold are all reasonable colors. */
#pnb a:hover 
{color: blue; text-decoration: none;
} 
#pnb a:active 
{color: blue; text-decoration: none;
}

/* id for Minor Navigation Bar (mnb) */
#mnb
{border: 0;
color: #ffffff;
}
#mnb table
{border-width: 0; width: 500px; font-size: 12px;
}
#mnb td
{background-color: #8B8B8B; text-align: center; vertical-align: center; padding: 4px 15px;
}
#mnb a:link
{color: #ffffff; text-decoration: none;
}
#mnb a:visited
{color: #ffffff; text-decoration: none;
}
/* yellow, gold, black are OK colors for hover and active. */
#mnb a:hover 
{color: #0000ff; text-decoration: none;
} /* blue */
#mnb a:active 
{color: #0000ff; text-decoration: none;
} 


/* id for copyright line text */
#copyright
{font-size: 8pt;
color: #000000;}


/* id for table that sets up the grey borders of each page */
#greyborderbox table
{background-color: #ffffff;
margin: 0px; padding: 0px;
border: 0px; width: 950px;
}
#greyborderbox td.top
{background-image: url('images/top_border.gif');
border: 0px; margin: 0px; padding: 0px; height: 25px;
}
#greyborderbox td.center
{background-color: #ffffff;
background-image: url('images/side_border.gif');
background-repeat: repeat-y;
margin: 0px; border: 0px;
padding-left: 18px; padding-right: 18px;  /* the padding clears the grey borders on the L/R */
}
#greyborderbox td.bottom
{background-image: url('images/bottom_border.gif');
border: 0px; margin: 0px; padding: 0px; height: 25px;
}

/* id for "inner table" which is the main content area. It's Row 2 of the greyborderbox. */
#innertable table
{margin: 0px; padding: 0px; border: 0px; width: 914px;
}

#innertable td.textcolumn 
{text-align: left; margin: 0px; padding-left: 25px; padding-right: 25px;
}

#innertable td.narrowcolumn
{text-align: center; vertical-align: top; margin: 0px; padding: 0px; 
}

/* for the homepage, the color "patches" are positioned on the R side of the page */
#hometopcolorpatch
{float: right; position: relative; right: 18px; top: 9px; border: 0px;
}

#homebottomcolorpatch
{float: right; position: relative; right: 18px; bottom: 9px; border: 0px;
}

/* for the product series pages, these position the grey patch that fills in the top and bottom left corners of the grey border */
#topcolorpatch
{float: left; position: relative; left: 18px; top: 9px; border: 0px;
}

#bottomcolorpatch
{float: left; position: relative; left: 18px; bottom: 9px; border: 0px;
}

/* products are used for the homepage Series layout */
#products
{
color: #000000;
text-decoration: none;
border: 1px;
border-style: solid;
border-color: #BFBFBF; 
padding: 20px;
text-align: left;
}

#products img
{float: left;
padding-right: 20px;
padding-bottom: 12px;
}

#homeRcolumntext
{color: #0000ff; font-weight: 800; font-size: 13pt;
}

/* these 3 are used for testimonials on the homepage */
/* width + paddings should add up to the same width as the 7S trailer thumbnail */
#testimonials
{width: 200px;
background-color: #fffacd; /* lemon chiffon yellow */
padding: 12px;
font-family: "Courier New", Courier, monospace;
font-size: 9pt;
color: blue;
text-align: left;
}

.person
{font-style: italic;
float: right;
}

.tag
{font-weight: 800;
text-decoration: underline;
}

/* Secondary Nav Bar (snb)- on L side of page, for EACH product series */
#snb
{font-weight: bold;
font-size: 12px;
border: 0;
color: #ffffff;
}

#snb table
{width: 160px; border: 0; background-color: transparent;
}
#snb td
{padding: 2px 8px; border: 3px; border-style: solid; border-color: #BFBFBF; 
 text-align: left; color: #ffffff; vertical-align: center; line-height: 130%; height: 55px;
}
/* use class to define unique background-color; to be set inline for each series */
#snb td.s7color
{background-color: #9932cc;
}
#snb td.ccicolor
{background-color: #ff8533;
}
#snb td.pbecolor
{background-color: #4792A0;
height: 50px;
} /* pbe tabs can be a little less high than S7 and CCI, since there are only 2 lines of text in the tabs */
#snb td.rhcolor
{background-color: #0000CD;
}

#snb a:link
{color: #ffffff; text-decoration: none;
} /* white */
#snb a:visited
{color: #ffffff; text-decoration: none;
}
#snb a:hover
{color: #0000ff; text-decoration: none;
} /* blue */
#snb a:active
{color: #0000ff; text-decoration: none;
}

/* s7modcontent is used for 7S pages module content summary */
#s7modcontent table {width:430px; text-align: left; }
#s7modcontent td.c1 {width: 110px; font-weight: 800; vertical-align: top;}
#s7modcontent td.c2 {width: 320px;}

/* ccicontent is used for cci pages content summary */
#ccicontent table {width:550px; text-align: left; }
#ccicontent td.c1 {width: 200px; font-weight: 700; vertical-align: top;}
#ccicontent td.c2 {width: 350px;}


/* productprice & productimage are used for pricing area in 7S/CCI/PBE series pages */
#productprice
{font-size: 16pt; font-weight: 700; color: #c40406;}

 /* define width and left attributes inline - based on different image's requirements. */
#productimage
{background-color: #F0F0F0; border: 1px; border-style: solid; border-color: #bfbfbf;
float: left; position: relative;
}

/* use monospace for the pull-down price list. Using spaces to align the lines don't work across the board for all browsers. */
#pulldown-letters
{font-family: 'Courier New', Courier, monospace; font-size: 10pt; letter-spacing: -1px;
}

/* The following are used in the Order page */
/* total width of cell is 860 = 850 + 10 L padding for all img */
/* 850 = 130 (image total) + 75 (price) + 645 (pulldown table) */
#pricebox_first
{width: 850px; padding-top: 15px; padding-left: 10px; padding-bottom: 10px; padding-right: 0px;
 border: 2px; border-style: solid;}
/* MUST set height of priceboxes inline to the height of the tallest pix in the series or 120px minimum */
#pricebox_first.s7 {border-color: #9932cc;}
#pricebox_first.reharm {border-color: #0000CD;}
#pricebox_first.cci {border-color: #ff8533;}
#pricebox_first.pbe {border-color: #4792a0;}
#pricebox_first.red {border-color: #a40406;}

#pricebox_others
{width: 850px; padding-top: 15px; padding-left: 10px; padding-bottom: 10px; padding-right: 0px;
border: 2px; border-top: 0px; border-style: solid;}
/* only the first pricebox has border on top */
/* all other priceboxes don't need top border as it's supplied by the bottom border of the above box */
#pricebox_others.s7 {border-color: #9932cc;}
#pricebox_others.reharm {border-color: #0000CD;}
#pricebox_others.cci {border-color: #ff8533;}
#pricebox_others.pbe {border-color: #4792a0;}
#pricebox_others.red {border-color: #a40406;}

#price
{float: left; width: 75px; color: #a40406; text-align: center; font-size: 16pt; font-weight: 700;}
/* Total = 185px; 185- price box 55px = image width (no L margin) =130px  */

#pulldown_area
{float: right; width: 645px; margin-left: 0px;}
#pulldown_area table {width: 645px; text-align: left;}


/* these next ones are used in the full Testimonial page */
/* lemon chiffon */
#box1
{width: 812px; padding:25px;
background-color: #fffacd; border: 1px; border-style: solid; border-color: #bfbfbf;}

/* light aquamarine blue */
#box2
{width: 812px; padding:25px;
background-color: #E1FFFF; border: 1px; border-style: solid; border-color: #bfbfbf;}

#greyborder_lite 
{border: 1px; border-style: solid; border-color: #bfbfbf; 
float: left; margin-right: 20px;}

.signed
{font-style: italic; font-weight: 600;}


/* The following is used in the About Rosa & Index pages */
#pinkborder 
{border: 3px; border-style: solid; border-color: #ecd6d9;}


/* The following are used in the Photo Gallery page */
#redborder 
{border: 2px; border-style: solid; border-color: #a40406;}
#purpleborder 
{border: 2px; border-style: solid; border-color: #9932cc; background-color: #EBD6F5;}
#tealborder 
{border: 2px; border-style: solid; border-color: #4792a0; background-color: #B5D3D9;}

#greyborder_full 
{border: 2px; border-style: solid; border-color: #acacac;}
#greyborder_partial 
{border-left: 0px; border-right: 0px; border-top: 2px; border-bottom: 2px; border-style: solid; border-color: #acacac;}