/*Version 1.0 -- SuperSeafoodRecipes - February 23, 2010 */

/* ------ Section 1 - Global Body, Font and Link Settings ------ */

body {
background-color: #ffc565; /* pale orange color for browser window background color and footer top border */
margin: 0 0 15px 0;
padding: 0;
font-family: 'Lucida Sans Unicode', 'Lucida Grande', Verdana, Arial, sans-serif;
color: #333;
font-size: 83%;  /* 88% */
line-height: 150%;  /*  added  */
}

.signature {
font-family: 'Monotype Corsiva', 'Apple Chancery', 'Comic Sans MS', cursive;
font-size: 170%;
color: #f1570d;
line-height: 120%;
margin-bottom: 30px;
}

h1, h2, h3, h4, h5, h6 {
background-color: transparent;
color: #f1570d;  /* changed from #1d487e to blue (desired color for H1) - 2/24/10 */
clear: both;
}

h2, h3, h4, h5, h6 {
margin-top: 24px;
}

h1 {
margin-top: 5px;
font-family: Georgia, 'Times New Roman', 'Palatino Linotype', Palatino, serif;
border-bottom: 0px solid #5184bd;  /* add horizontal line */
text-align: center;
margin-top: 30px;
}

h2 {
font-family: 'Lucida Sans Unicode', 'Lucida Grande', Verdana, Arial, sans-serif;
border-bottom: 0px solid #598ac0;  /* no line  */
text-align: center;
color: #598ac0;  /* added 1/18/10 */
line-height: 200%;  /*  added  */
}

h3 {
font-family: 'Lucida Sans Unicode', 'Lucida Grande', Verdana, Arial, sans-serif;
border-bottom: 0 solid #598ac0;
color: #598ac0;  /* added 1/18/10 */
}

h4 {
	font-family: 'Lucida Sans Unicode', 'Lucida Grande', Verdana, Arial, sans-serif;
	color: #f1570d;  /* blue */
	text-align: center;
	font-size: 115%;
	margin-top: 10px;
}

blockquote {
margin: 12px 56px;
color: #006;
font-size: 100%;
line-height: 20px;
font-family: 'Courier New', Courier, monospace;
}

code {
color: #333;
}

img {
border: 1px solid #ffd184;   /*  orange - 5 shades paler than background */
padding: 5px;
background-color: #ffd184;   /*  orange - 5 shades paler than background */
margin: 15px 0 5px 0 
}

.noborder {
border: 0px solid #ffd184;   /*  none */
padding: 0;
background-color: #fff;   /*  none */
margin: 0 
}

a:link img {
border: 1px solid #ffe8c1;
padding: 5px;
background-color: #ffe8c1;
}


/* -- General Link Styling -- */

a:link {
color: #35569f;            /* now #35569f - was same blue as H2  -- */
text-decoration: underline;     /* changed from underline to none 2/24/10 */
}

a:visited {
color: #35569f;				/* darker blue (darker than Hw) */
text-decoration: underline;     
}

a:hover {
color: #eb3e00;  /* orange-red - similar to fish */
background-color: #ffe8c1;   /* pale orange */
text-decoration: underline;
}


ul
{
list-style-type: square;
}

li
{
margin-bottom: 6px;
}




/* ------ Section 2 - Global Page Structure ------- */

#PageWrapper {
width: 960px;
border: 0px solid #8f8fb3;   /* dark sea blue, headlines and borders */   
}

#Header {
position: relative;
height: 160px;
}

#ContentWrapper {
float: left;
width: 100%;
}

#ContentColumn {
margin: 0 190px 0 190px;    /* STEP 1: set to "0 ExtraColumnWidth 0 NavColumnWidth" */
}

#NavColumn {
float: left;
width: 189px;               /* STEP 2: to set left column at 180, set 1 less than 180 here */
margin-left: -960px;        /* STEP 3: set to the same width specified in #PageWrapper above (but with minus sign)  */
}

#ExtraColumn {
float: left;
width: 189px;               /* STEP 4: to set right columns at 180, set 1 less than 180 here */
margin-left: -190px;        /* STEP 5: set to -(ExtraColumnWidth) */
}

#Footer {
clear: both;
width: 100%;
padding: 8px 0;    
border-top: 0px solid #598ac0;  /* same as underline for H2 */
}

.Liner {
padding: 10px;
}

#Header .Liner {
padding: 0;
}

#ContentColumn .Liner {
padding: 20px;
}

#Footer .Liner {
margin: 0;
padding: 0;
}



/* ------ Section 3 - Page Structure Details ------ */

#PageWrapper {         
margin: 8px auto;          /* changed from 24px to 8px on 2/24/10  */
background-image: url(../image-files/background.gif); /* any change to this needs to be made also to ContentWrapper  */
background-repeat: repeat-y;
}

#Header {
	background-image: url(../image-files/seafood-recipes.gif);
	background-repeat: no-repeat;
	background-color: transparent;
	background-position: top left;
}

#ContentWrapper {
background-image: url(../image-files/background.gif);  /* same image as for PageWrapper - otherwise background shows as page loads   */
background-repeat: repeat-y;
background-color: transparent;
}

#NavColumn {
background-image: url();   /* removed nav-background.jpg 1/19/10  */
background-repeat: repeat-y;
background-color: transparent;
}

#ContentColumn {
background-image: url();
background-repeat: no-repeat;
background-color: transparent;
}

#ExtraColumn {
background-image: url();
background-repeat: no-repeat;
background-color: transparent;
}

#Footer {
background-image: url();
background-repeat: no-repeat;
background-color: #acc4e0;     /* blue - 1 shade lighter than the H1 header */
text-align: center;
font-size: 85%;
}

#NavColumn {
font-size: 90%;
color: #000;
}

#ExtraColumn {
font-size: 90%;
}

#NavColumn h4 {
font-size: 95%;
color: #000;
margin-top: 0;
}

#ExtraColumn h4 {
font-size: 90%;
color: #000;
text-align: center;    
margin-top: 0;
}


/* ------ Section 4 - Left Column Navigation ------ */

.Navigation {         
width: 100%;					/* watch for overflow in IE 6 - solution: changed to fixed width */
font-family: 'Lucida Sans Unicode', 'Lucida Grande', Verdana, Arial, sans-serif;
background-color: transparent;
}

/* -- Nav Headers -- */

.Navigation h3 {
padding: 6px;
font-size: 110%;
color: #0c3f72;  /*  #dark shade of H1 blue  */
text-align: center;
background-color: #ffe8c1;   /* pale orange - also used for image borders */
border-bottom: 0px solid #ffe8c1;
margin: 12px 0;
}

/* -- Nav List -- */

.Navigation ul {
list-style-type: none;
padding: 0 0 8px 5px;
margin: -6px 0 0 6px;
}

.Navigation li {
background-color: none;        /* changed from #ffc tan, for button and RSS box backgrounds, to none -- */
border: 0px solid #8f8fb3;     /* changed from 1px solid #8f8fbc for button and RSS box borders, to none -- */
margin-bottom: 9px;            /* changed from 3px to 9px  1/19/10-- */
}

/* -- Navigation Link styles -- */

.Navigation a:link {
color: #f35569f;                   /* now #f35569f - was same blue as h2 header */
display: block;                /*  this makes the whole box highlight rather than just the text */
padding: 3px 0 3px 4px;
text-decoration: none;
}

.Navigation a:visited {
color: #f35569f;
display: block;     /*  this makes the whole box highlight rather than just the text */
padding: 3px 0 3px 4px;
text-decoration: none;
}

.Navigation a:hover {
color: #eb3e00;  /* orange-red - similar to fish */
display: block;     /*  this makes the whole box highlight rather than just the text */
padding: 3px 0 3px 4px;
background-color: #ffe8c1;   /* pale orange */
text-decoration: underline;
}



/* ------ Section 5 - Additional Navigation ------ */

/* -- Thumbnail-with-Caption Navigation -- */

.ThumbnailLink {
text-align: center;
}

.ThumbnailLink a:link {
text-decoration: none;
}

.ThumbnailLink a:hover .Caption {
text-decoration: underline;
color: #eb3e00;  /* red */
}


/* -- Horizontal Text NavBar -- */

.ExtraNav {
font-family: 'Lucida Sans Unicode', 'Lucida Grande', Verdana, Arial, sans-serif;
}

.ExtraNav ul {
list-style-type: none;
}

.ExtraNav ul li {
display: inline;
text-align: center;
}

.ExtraNav a:link {
color: #35569f;       /* now dark blue - was blue #5184bd - like regular links -- */
text-decoration: none;
text-align: center;
}

.ExtraNav a:visited {
color: #35569f;       /* dark blue - like regular links -- */
text-decoration: none;
}

.ExtraNav a:hover {
color: #eb3e00;  /* same red as for other links -- */
background-color: #ffe8c1;   /*  pale orange - also used for image borders -- */
text-decoration: underline;
}

#Header .ExtraNav {
	font-size: 115%;
	color: #0c3f72;  /*  #dark shade of H1 blue  */
	position: absolute;
	bottom: 0;
	left: 10px;
	height: 25px;
	padding: 8px 0px 1px 0px;
	width: 940px;
	background-color: #ffe8c1;   /* pale orange - also used for image borders --*/
}

#Header .ExtraNav ul { 
margin: 0 10px;
}

#Header .ExtraNav ul li { 
margin: 6px;
padding: 8px 50px 1px 25px;
}

#Header .ExtraNav a:hover {
background-color: #ffffff;   /*  white - contrast with normal pale orange -- */
}

#Footer .ExtraNav {
margin: 12px auto;
}


#Footer .ExtraNav ul { 
margin: 0 10px;
}

#Footer .ExtraNav ul li { 
margin: 6px;
padding: 8px 6px 1px 6px;
}

#Footer .ExtraNav a:hover {
background-color: #ffe8c1;   /*   pale orange -- */
}



/* ------ Section 6 - Boxes ------ */

.CalloutBox {
background-color: #fff;
font-size: 95%;
width: 50%;
float: right;
border: 5px solid #ffe8c1;
margin: 18px auto 18px 15px;
padding: 1px auto;
color: 333;
}

div.CalloutBox p {
margin: 13px;
}

p.CalloutBox {
padding: 13px;
}

div.CalloutBox h1,
div.CalloutBox h2,
div.CalloutBox h3,
div.CalloutBox h4,
div.CalloutBox h5,
div.CalloutBox h6 {
margin: 13px 0 0 13px;
}


.ReminderBox {          
background-color: #ffe8c1;
width: 33%;
border: 1px solid #ffe8c1;
margin: 0 0 12px 18px;
float: right;             /* adding float enables text to flow around it */
color: #006;
}

.ReminderBox h4 {
margin: 0;
padding: 2px;
text-align: center;
background-color: #fff;
}

.ReminderBox p {
font-size: 80%;
padding: 0 4px;
line-height: 120%;
}

.AdSenseBoxLeft, .AdSenseBoxRight, .AdSenseBoxCenter468, .AdSenseBoxExtraColumn {
padding: 5px;
background-color: #d3e4fb;
border: 0px;
}

.AdSenseBoxLeft {
margin: 0 18px 12px 18px;
float: left;
}

.AdSenseBoxRight {
margin: 0 18px 12px 18px;
float: right;
}

.AdSenseBoxCenter468 {
width: 468px;
margin: 0 auto 12px auto;
clear: both;
}

.AdSenseBoxExtraColumn {
padding: 0;
margin: 0 auto 12px auto;
clear: both;
}

.ReturnToNavBox {
background-color: #ffebc9;
font-size: 95%;
line-height: 115%;
width: 95%;
border: 5px solid #ffc565;   /* --- background orange ---*/
margin: 36px auto 4px auto;
padding: 0px 8px 6px;
}

/* -- RSS Box -- */

#RSSbox {
width: 148px;
background-color: #ffc;
border: 5px solid #ffe8c1;
margin: 8px auto 10px 3px;
padding: 4px 2px 10px 2px;
font-size: 100%;
font-weight: bold;
color: #1d487e;
line-height: 120%;
text-align: center;
}

.formbody {
font-family: 'Lucida Sans Unicode', 'Lucida Grande', Verdana, Arial, sans-serif; 
font-size: 90%;
text-align: center;
color: #000;
background-color: #ffffff;
border: 5px solid #ffe8c1;
padding: 6px 4px 4px 6px;
}

.solidbox {     /* --- pale yellow - same as in ReturnToNavBox but no border ---*/
font-family: 'Lucida Sans Unicode', 'Lucida Grande', Verdana, Arial, sans-serif; 
font-size: 95%;
line-height: 115%;
text-align: center;
color: #000;
background-color: #ffebc9;
padding: 6px 4px 4px 6px;
}





/* ------ Section 7 - Frequently Used Styles ------ */

.Clear {
clear: both;
}

.Caption {
font-size: 85%;
font-weight: bold;
color: #0c3f72;  /* deep shade of H1 blue -- */
display: block;
line-height: 150%;
margin-bottom:30px;
}

.HorLine {    /*  I added this one to replace hr - based on CalloutBox */
background-color: #fff;
width: 85%;
border-bottom: 2px solid #ffc565;
margin: -15px auto 28px auto;
padding: 0px;
}



/* -- floats -- */

.ItemRight {
float: right;
margin: 2px 0 12px 18px;
text-align: center;
}

.ItemCenter {
margin: 2px auto 12px auto;
text-align: center;
clear: both;
}

.ItemLeft {
float: left;
margin: 2px 18px 12px 0;
text-align: center;
}

/*-- Styling --*/

.IngredientList {
line-height: 110%;
}
.solidbox div h3 {
	color: #932703;
}
.solidbox div h3 {
	color: #A92D17;
}