/*If the border and padding are zero then ie and w3c are the same the "dimension" embraces the content. The margin lies outside the "dimension"*/
body {/*line-height: 135%; font-size: 100%;*/font-size: 95%; background-color: #E4E4FF; text-align: center; color: #000044;}

#page-container {width:900px; background-color: #FFFFFF; margin: 0px auto; border: ridge 3px #FFD700; text-align: left; font-family: Verdana ,Tahoma, arial, FreeSans ,sans-serif}
#page-container a:link, a:visited, a:active {padding-left: 2px; padding-right: 2px; text-decoration: none; background-color: #FFFFFF; color: #B20000;}
#page-container a:hover {background-color: #FFAA00; color: #FFFFFF; text-decoration: none;}

#columns-container {margin:0px 9px 0px 9px; padding-bottom: 5px}

#banner {background-color: #FFC655; background-image: url(/images/cooking.jpg); height: 50px; background-repeat: no-repeat}

/* horizontal nav list at top right of page*/
#navbartop ul {position: relative; line-height: 0px; text-align: right; top: 13px; list-style: none; margin: 0px; padding-right: 7px;}
#navbartop ul li {display: inline;}

#navbarbottom ul {position: relative; line-height: 0px; text-align: right; top: -20px; list-style: none; margin: 0px; padding-right: 7px}
#navbarbottom ul li {display: inline; border-top: solid 1px #FFD700; border-bottom: solid 1px #FFD700}

#headpic {float: left; margin-right: 10px; margin-bottom: 10px; padding: 0px; border: ridge 3px #FFD700; background-image: url(../images/toque.jpg); width: 83px; height: 106px; max-width: 77px; max-height: 100px; background-color: transparent; background-repeat: no-repeat;}

/* this box is used for the footer - position can be added to stop margin collapse*/
#footer {margin-top: 0px; padding: 2px; border-top: solid 1px #FFD700; border-bottom: solid 1px #FFD700; margin-bottom: 5px; background-image: url(../images/email.jpg); background-repeat: no-repeat; background-position: center right; font-size: 10px;}

/* surrounds code in a coloured box with a dotted border*/
.rightbox {margin: 5px; padding: 5px 5px 5px 8px; border: dashed 1px #8FCC00;}

.clearfloat {height: 0; clear: both;}

/*textbox in left-column */
.leftbox {margin-top: 10px; margin-bottom: 10px; padding: 5px; border: solid 1px #FFAA00; background-color: #FFFFFF}/*deliberate margin collapse*/
/*pretty much just a 5 px high line with a repeat-y bkg img in it. ]*/
.border-x {background-image: url(../images/border-x.jpg); height: 3px; background-repeat: repeat-y; font-size: 1%/*ie;*/ ;background-color:  #FFDD99;}

/*right-column*/
#col-right {float: right; width: 637px; padding: 0px 0px 5px 0px}
/*col-left content is in a left-floating div to keep the content from leaking towards the top of the page */
/*must define 0px margin or left-box sticks out by 5+5 px from col-left*/
#col-left {float: left; width: 230px; padding: 0px; margin: 0px;}

/* indent for use in column right */
p.indent {margin-left: 15px; margin-right: 15px;}

p {margin:0.9em}