/*These are the areas and their explanations/details of styling. Use the notes or instructions within these marks to help understand how Cascading Style Sheets manipulate the presentation of your HTML structure and copy.*/ body {/*no position needed - will 'flow' into position via HTML normal layout*/ font-family: verdana, arial, helvetica, sans-serif; margin: 0 auto; padding-bottom: 0; width: 1000px; min-width: 1000px; background: #aec4c6;/*light gray-blue; fills in behind 'wrapper'*/ } h1, h2, h3, h4, h5, a:link, a:visited, a:hover, ul{/*font-family for all headers and links*/ font-family: verdana, arial, helvetica, sans-serif; } h1 {/*largest font-size, heads pages, dark gray-blue*/ font-size: 1.2em; font-weight: normal; color: #336677; } h2 {/*next largest font-size, sub-topics, black*/ font-size: .9em; font-weight: bold; color: #000; } h2.title { font-size: 0.85em; margin-top: -5px; font-style: italic; color: #336677; } h3, h4 { font-size: 0.8em; } h5.copyright { font-size: .55em; color: #336677; text-align: left; margin-top: 50px; } p {/*standard font-size for all copy in paragraphs*/ font-size: .8em;/*80% of chosen font size or 'em'*/ line-height: 1.6em; padding-bottom: .5em; /*text-align: justify;*/ } a:link, a:visited {/*for all standard links before/after they're used*/ font-weight: bold; text-decoration: none; color: #336677; background-color: transparent; } a:hover {/*for all 'mouseover' links*/ font-weight: bold; text-decoration: underline; color: #800000; background-color: transparent; } table, th, td { border: 1px solid #336677; } ul.secrets { font-size: 0.8em; line-height: 1.4em;1.6em; list-style-type: disc; margin: -25px 0 -10px 15em; } html>body ul.secrets { /* Gecko only */ margin-top: -18px; } ul.secrets li { margin-left: 18.2em; } html>body ul.secrets li { padding: 0; margin-left: 1.2em; } #wrapper { /*contains 'content' and shows a narrow band of background color to the left of 'content'*/ padding: 140px 0 0 193px; background-color: #aec4c6; } /* Hack for IE7 */ *+html #wrapper { margin-top: 0; } #content {/*space within the 'wrapper' for all visible copy and pix*/ padding: 45px 25px 25px 35px; border-left: 2px solid #336677; border-bottom: 2px solid #336677; background-color: #e7e6e8; } #header {/*for the top of all pages, with or without a photo*/ position: absolute;/*positioned 0 from top and 0 from left of 'window' within the */ top: 0; left: 0; width: 100%; min-width: 850px; margin:0; padding: 0; background: #367 url(../images/mfoHeader.jpg) no-repeat 215px; 15px; /* For IE5/Win's benefit height = [correct height] + [top padding] + [top and bottom border widths] */ height: 130px; line-height: 110px; /* IE5/Win incorrectly parses the "\"}"" value, prematurely closing the style declaration. The incorrect IE5/Win value is above, while the correct value is below. */ voice-family: "\"}\""; voice-family:inherit; height: 130px; /* the correct height */ } /* Opera 5 hack: feeds correct length values to user agents that exhibit the parsing error exploited above yet get the CSS box model right and understand the CSS2 parent-child selector. ALWAYS include a the Opera 5 hack every time you use the hack (above). */ body>#header {height:130px;} #header img {/*styles the image space in the header*/ float: right; margin-left: -.2em; padding: 0; } #bar {/*creates the narrow yellow bar*/ position: absolute; top: 130px; left: 0; height: 30px; width: 100%; border-bottom: 2px solid #336677; background-color: #ffcc66; } #boxspace { position: absolute; top: 440px; left: 21px; height: 150px; width: 170px; font-size: 0.85em; } body>#boxspace { position: ;fixed /* changed 3/09 */ top: 430px; } * html div.books { margin: 25px 0 0 -7px; } div.books { margin: 25px 0 0 -4px; } #navspace {/*space set aside for the navigation links*/ position: absolute; top: 145px; left: 20px; width: 70px; padding: 15px 12px 15px 15px; z-index: 2; } /*Added to fool IE for fixed menu - fixes these spaces in Foxfire, Mozilla, Nav, etc.*/ body>#navspace, #header, #bar { position: ;fixed; /* changed 3/09 */ } #navlist {/*styling of the navigation links' fonts*/ font-family: verdana, helvetica, arial, sans-serif; font-size: .8em; font-weight: bold; width: 9em; padding: 0 .5em .5em 0; background-color: #336677; } #navlist ul {/*layout of the navigation links*/ list-style: none; margin: 0; padding-left: 6px; } #navlist li a:link, #navlist li a:visited {/*colors & layout of the unused navigation links*/ display: block; width: 100%; padding: 1px 0px 2px 1px; color: #ffcc66; text-decoration: none; border-top: 4px solid #336677; border-bottom: 2px solid #336677; border-left: 1px solid #336677; } #navlist li a:hover {/*color & layout for 'mouseover' nav links*/ display: block; text-decoration: none; padding: 1px 0px 2px 1px; color: #800000; background-color: #e7e6e8; border-top: 4px solid #336677; border-bottom: 2px solid #336677; border-left: 1px solid #336677; } #navlist li.block {/*color & layout for breadcrumb link*/ display: block; width: 100%; text-decoration: none; padding: 1px 0px 2px 1px; color: #800000; background-color: #e7e6e8; border-top: 4px solid #336677; border-bottom: 2px solid #336677; border-left: 1px solid #336677; } ul#guidelist {/*ul = area surrounding individual list (li) items*/ position: absolute;/*removes the area from the 'flow' of the rest of the elements on the page and 'tacks' it into position*/ top: 0; left: 228px;/*moves the first listing placement to the right*/ list-style-type: none; padding: 0;/*to remove left-indent in some browsers*/ margin: 0;/*to remove left-indent in all the other browsers*/ } ul#guidelist li { display: inline;/*sets list items in a horizontal row instead of vertical list*/ } ul#guidelist li a {/*affects both the list item (li) and the item's 'a' state, such as a's text-decoration, like 'underline'*/ float: left;/*stacks the list items to the left*/ width: 10em;/*sets width of each list item's 'area'*/ padding: 0.5em 0 0.2em 0;/*pads some space (.2em top, bottom; 0em right, left) in the area around the list item*/ font-size: .8em;/*sets font-size for list (li) items*/ font-weight: bold;/*sets font-weight (bold) for list items*/ color: #336677;/*font color*/ } ul#guidelist li a:hover { color: #800000;/*changes the font color when it is 'moused over' so you can tell it is an active link*/ } #floatquoteright {/*right-floating box for quotes*/ float: right; margin: 1.15em; padding: 1em; border: 1px solid black; font-size: .9em; } #floatquoteleft {/*left-floating box for quotes*/ float: left; width: 325px; margin: .25em; padding: 10px; border: 2px solid #336677; font-size: .8em; } #thumb {/*removes 'bullets' from list*/ list-style-type: none; } #thumb li {/*styles this list*/ float:left; margin-right: 18px; margin-bottom: 8px; font: bold .8em Verdana, Helvetica, Arial, sans-serif; color: black; text-align: center; } /* Hide from IE5-mac. Only IE-win sees this. The Holly Hack \*/ * html #content { height: 1%; margin-left: 0; } /* End hide from IE5-mac End Holly Hack*/ #thumb img { display: block; border: 1px solid black; } #title { margin: 0 0 25px 0; border-bottom: 1px solid #336677; } /* Hack for IE7 *+html #title { margin: -10px 0 25px 0; } */ #frame {/*'container' for photos on the gallery page*/ background-color: transparent; } #frame img {/*layout for the gallery images*/ display: block; margin-left: 11em; } #frame p {/*text styling & layout for the text paragraphs on the gallery page*/ width: 400px; display: block; margin-left: 14em; margin-bottom: 5em; } #triplist {/*styles the list used to explain the trips*/ font-size: .8em; font-weight: normal; line-height: 1.5em; list-style-type: square;/*puts a square in front of each listed item*/ padding: 0 0 15px 15px; margin: -1.4em 0 1.5em 1.5em;/*reduces top margin, expands margin on bottom & left to set it off from text above and below.*/ } #triplist li {/*'expands' the list slightly*/ padding-top: 5px; } #triplist a, a:hover {/*bolds the font for clarity*/ font-weight: bold; } p.title { font: normal bold 1em Arial sans-serif; color: #ffcc99; margin: 10px 100px 0 0; text-align: right; } p.trips {/*adjusts the bottom margin for spacing*/ margin-bottom: .75em; } p.list {/*'expands' the list a little*/ margin: -.25em 0 2em 0; } p.center {/*centers the text*/ text-align: center; } p.index1 { font-size: 1em; text-align: center; margin-bottom: -25px; } p.index2 { font-size: 0.8em; font-weight: bold; color: #000; margin: 25px 0 -1px 0; text-align: center; } p.index3 { font-size: 1em; text-align: center; margin-bottom: -25px; float: left; } p.book { font-size: 0.75em; font-weight: bold; color: #000; margin-bottom: -3px; } p.contact1 {/*styles 'contact' text, line 1*/ font-size: 1em; font-weight: bold; color: #800000; } p.contact2 {/*styles 'contact' text, line 2 and on*/ font-size: .8em; } p.left { text-align: left; font-size: 0.8em; margin: -10px 0 10px 60px; } *html p.left { text-align: left; font-size: 0.8em; margin: -15px 0 10px 60px; } p.short {/*shortens paragraphs to fit in a listing*/ margin-top: -1em; } img.right { text-align: right; margin-right: 40px; } img.left { text-align: left; margin-left: 40px; } .bold { font-weight: bold; } .clearboth {/*clears text from righ and left below*/ clear: both; } .dlist {/*styles the list used to explain full-day and half-day trips*/ font-size: .8em; font-weight: normal; line-height: 1.5em; list-style-type: circle;/*puts a circle in front of each listed item*/ padding: 0 0 0 15px; margin: -.5em -/5em 1.5em 0.5em;/*expands margin on bottom to set it off from following text.*/ } .elist {/*styles the list used to explain the trips*/ font-size: .8em; font-weight: normal; list-style-type: circle;/*puts a circle in front of each listed item*/ padding: 0 0 0 15px; margin: 13em 0 1.5em 0;/*expands margin on bottom to set it off from following text.*/ } ul.float { margin: 0; padding: 0; float: left; width: 100%; } .floatright {/*right-floating box for photo, copy, etc.*/ float: right; margin: 0 0 .25em 1.15em; padding: 0; } html>body .floatright { margin-bottom: 1.25em; } .ratephoto { float: right; margin: 30px 20px 0 20px; } .floatright1 {/*right-floating box for photo, copy, etc.*/ float: right; margin: -.25em .25em 1.15em; padding: 0; } .floatright2 {/*right-floating box for photo on Exotic page*/ float: right; margin: 0 5em .25em 1.15em; padding: 0; } .floatright3 {/*right-floating box for photo on Exotic page*/ float: right; margin: -1.5em 5em .25em 1.15em; padding: 0; } .floatrightOrvis {/*right-floating box for book cover photo*/ float: right; margin: -.5em 1em .25em 1.15em; padding: 0; } html>body .floatrightOrvis { margin-right: 1.5em; } .floatrightP {/*right-floating box for photo, copy, etc.*/ float: right; margin: 0 0 2em 1.15em; padding: 0; } html>body .floatrightP { padding-bottom: 3em; } .floatleft {/*left-floating box for photo, copy, etc.*/ float: left; margin: 0 1.15em .25em 0; padding: 0; } .floatleft2 {/* extra left-floating box for photo on Exotic page*/ float: left; margin: 0 1.15em .25em 0; padding: 0; } .floatleft3 { float: left; margin: 7em 1.15em .25em 0; } .floatboxright {/*right-floating bordered box for copy, etc.*/ float: right; margin: .25em 1.5em .25em .25em; padding: 1.5em; color: #000; font-weight: bold; text-align: center; line-height: 1.25em; background-color: #aec4c6; border: 1px solid #336677;/*the border styling*/ } .floatboxright-ads {/*right-floating bordered box for ads, etc.*/ float: right; width: 210px; margin: 1em .5em .5em .5em; padding: .7em; font-size: 70%; color: #000; text-align: left; line-height: 1.3em; background-color: #aec4c6; border: 1px solid #336677;/*the border styling*/ } * html .floatboxright-ads { margin-right: 2em; } .floatboxright-ads p { margin: 0.25em 0; } .floatboxright-ads h2 { font-size: 110%; margin: 0.5em 0; } .floatboxleft {/*right-floating bordered box for copy, etc.*/ float: left; margin: .25em 1.5em .25em .25em; padding: 1.5em; color: #000; font-weight: bold; text-align: center; line-height: 1.25em; background-color: #aec4c6; border: 1px solid #336677;/*the border styling*/ } .quotebox { text-align: center; } .quoteboxindex { position: absolute; top: 0; right: 0; /* float: right;*/ font-size: 0.9em; margin: 0; padding: .9em .9em .5em .9em; height: 128px; color: #000; text-align: left; line-height: 1.25em; background-color: #aec4c6; border: 1px solid #336677; } html>body .quoteboxindex { margin-top: -10px; } .right { margin: 0; padding: 0; text-align: right; } /*.quoteboxindex { float: right; font-size: 0.9em; margin: .5em; padding: 1.5em 1.5em 0 1.5em; color: #000; text-align: center; line-height: 1.25em; background-color: #aec4c6; border: 1px solid #336677; } html>body .quoteboxindex { padding: 1.5em 1.5em 1em 1.5em; margin: .75em; }*/ .img { border: none; float: right; padding-right: 3px; } img.schoolpermit {/*for IE */ float: right; margin-top: 4em; padding-left: 1em; } html>body img.schoolpermit { margin-top: 3em; } .smallh2 {/*reduces font size a little*/ font-size: .8em; font-weight: normal; color: #000; } .thumb p {/*gets rid of top margin*/ margin-top: 0; } .trip {/*adjusts the font size*/ font-size: .75em; } .more { font-style: italic; font-weight: bold; color: #336677; text-align: right; margin: 0px; padding: 0px; }