/* browsers interpret margin and padding a little differently, we'll remove all default padding and margins and set them later on */ * { margin: 0; padding: 0; } /*Set initial font styles*/ body { text-align: left; font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; font-size: 75.01%; line-height: 1em; } /*set font size for all divs, this overrides some body rules*/ div { font-size: 1em; } /*if img is inside "a" it would have borders, we don't want that*/ img { border: 0; } /*default link styles*/ /* set all links to have underline and bluish color */ a, a:link a:active { text-decoration: none; /* css validation will give a warning if color is set without background color. this will explicitly tell this element to inherit bg colour from parent element */ background-color: inherit; color: MidnightBlue; } /* remove underline on hover and change color */ a:hover { text-decoration: none; background-color: red; color: white; } /*****************basic layout *****************/ body { margin: 0; padding: 0; /* default text color for entire site*/ color: black; /* you can set your own image and background color here */ background: url(http://www.aquaticjungle.com/uploads/ngrey/ ) repeat-x left top; } div#pagewrapper { /* min max width, IE wont understand these, so we will use java script magic in the */ max-width: 990px; min-width: 400px; margin: 0 auto; /* now that width is set this centers wrapper */ margin: 0 auto; background-color: #fefefe; color: DimGray; background: url(http://www.aquaticjungle.com/uploads/ngrey/ngrey/ ) repeat-x left top; /* header, we will hide h1 a text and replace it with an image, we assign a height for it so the image wont cut off */ } div#header { /* adjust according your image size */ width: 100%; margin: 0 auto; height: 120px; padding: 5px 0px 0px 0px; background: rgb(159, 13, 13) url(http://www.aquaticjungle.com/uploads/ngrey/ ) repeat-x left top; } div#logo-nav { /* adjust according your image size */ width: 990px; margin: 0 auto; height: 110px; padding: 5px 0px 5px 0px; background: url(http://www.aquaticjungle.com/uploads/ngrey/ ) repeat-x left top; } div#logo { /* adjust according your image size */ width: 290px; float: left; height: 100px; margin: 5px 0px 0px 0px; background: url(http://www.aquaticjungle.com/uploads/ngrey/ ) repeat-x left top; } div#logo h1 a { /* you can set your own image here */ background: url(http://www.aquaticjungle.com/uploads/ngrey/aquaticjungle-logo3.jpg) no-repeat left top; /* this will make the "a" link a solid shape */ display: block; /* adjust according your image size */ height: 100px; /* this hides the text */ text-indent: -999em; /* old firefox would have shown underline for the link, this explicitly hides it */ text-decoration: none; } div#logo h1 { margin: 0; padding: 0; /*these keep IE6 from pushing the header to more than the set size*/ line-height: 0; font-size: 0; /* this will keep IE6 from flickering on hover */ background: url(http://www.aquaticjungle.com/uploads/ngrey/aquaticjungle-logo3.jpg) no-repeat left top; } div#nav { /* adjust according your image size */ width: 680px; float: right; height: 100px; margin: 5px 0px 0px 0px; background: url(http://www.aquaticjungle.com/uploads/ngrey/ ) repeat-x left top; } div#upper-nav { /* adjust according your image size */ width: 680px; height: 30px; margin: 15px 0px 0px 0px; background: url(http://www.aquaticjungle.com/uploads/ngrey/ ) repeat-x left top; } div#upper-nav p { font-family: Arial, Helvetica, sans-serif; font-size: 1.2em; line-height: 0.5em; padding: 0.5em 0em 0.5em 0em; margin: 0 0 0em 0; font-weight: normal; color: beige; } div#upper-nav p a { /* footer link would be same color as default we want it same as footer text */ color : beige; text-decoration: none; } div#upper-nav p a:hover { color : white; text-decoration: underline; } div#upper-nav1 { /* adjust according your image size */ width: 68%; float: left; margin: 0px 0px 0px 0px; background: url(http://www.aquaticjungle.com/uploads/ngrey/ ) repeat-x left top; border-right: 1px groove #D9E2E6; } div#upper-nav2 { /* adjust according your image size */ width: 31%; float: right; margin: 0px 0px 0px 0px; background: url(http://www.aquaticjungle.com/uploads/ngrey/ ) repeat-x left top; border-bottom: 0px solid #D9E2E6; } div#lower-nav { /* adjust according your image size */ width: 680px; height: 40px; margin: 0px 0px 0px 0px; background: url(http://www.aquaticjungle.com/uploads/ngrey/ ) repeat-x left top; } div#social { /* adjust according your image size */ width: 55px; float: right; height: 60px; margin: 5px 0px 0px 0px; background: transparent url(http://www.aquaticjungle.com/uploads/ngrey/ ) repeat-x left top; } div#social-twiter { /* adjust according your image size */ width: 47%; height: 30px; float: left; margin: 17px 0px 0px 0px; background: url(http://www.aquaticjungle.com/uploads/ngrey/ ) repeat-x left top; border-bottom: 0px solid #D9E2E6; } div#social-facebook { /* adjust according your image size */ width: 47%; height: 30px; float: right; margin: 17px 0px 0px 0px; background: url(http://www.aquaticjungle.com/uploads/ngrey/ ) repeat-x left top; border-bottom: 0px solid #D9E2E6; } div#scroller { /* adjust according your image size */ height: automatic; margin: 0 auto; padding: 0px 0px 0px 0px; /* you can set your own image here, will go behind h1 a image */ background: url(http://www.aquaticjungle.com/uploads/ngrey/ ) repeat-x left top; /* border just the bottom */ } div#scroller2 { /* adjust according your image size */ height: automatic; margin-bottom: 0em; padding: 0px 0px 0px 0px; /* you can set your own image here, will go behind h1 a image */ background: url(http://www.aquaticjungle.com/uploads/ngrey/ ) repeat-x left top; /* border just the bottom */ } div#content { /* some air above and under menu and content */ margin: 2em 0em 2em 0em; width: 100%; background: url(http://www.aquaticjungle.com/uploads/ngrey/ ) no-repeat right bottom; } /* ------------body------------ */ div#main { /* this is the last inside div so we set the space inside it to keep all content away from the edges of images/box */ width: 990px; margin: 0 auto; padding: 0px 0px 0px 0px; /* you can set your own image here */ background: url(http://www.aquaticjungle.com/uploads/ngrey/ ) no-repeat right bottom; } div#main p { font-family: Arial, Helvetica, sans-serif; font-size: 1.2em; line-height: 1.5em; padding: 1em 0em 1.5em 0em; margin: 0 0 0em 0; font-weight: normal; color : #2e2e2e; } div#main p a { /* footer link would be same color as default we want it same as footer text */ color : #2e2e2e; text-decoration: none; } div#main p a:hover { color : #2e2e2e; text-decoration: underline; } div#main-body { width: 990px; margin: 20px 0px 10px 0px; /* you can set your own image here */ background: url(http://www.aquaticjungle.com/uploads/ngrey/ ) no-repeat left top; } div#main-body p { font-family: Arial, Helvetica, sans-serif; font-size: 1.1em; text-allign: centre; line-height: 1.5em; padding: 0.5m 0em 0.5em 0em; margin: 0 0 0em 0; font-weight: normal; color : black; } div#main-body p a { /* footer link would be same color as default we want it same as footer text */ color : blue; text-decoration: none; } div#main-body p a:hover { color: white; text-decoration: underline; } div#main-body1 { float: centre; width: 400px; margin: 20px 0px 20px 0px; /* this one is for centre side */ background: url(http://www.aquaticjungle.com/uploads/ngrey/ ) no-repeat right bottom; } div#main-body2 { float: centre; width: 400px; margin: 20px 0px 20px 45px; /* this one is for centre side */ background: url(http://www.aquaticjungle.com/uploads/ngrey/ ) no-repeat right bottom; } div#main-body3 { float: centre; width: 400px; height: automatic; margin: 20px 0px 20px 0px; /* this one is for centre side */ background: url(http://www.aquaticjungle.com/uploads/ngrey/ ) no-repeat right bottom; } /* ------------footcontent------------ */ div#footer-main { /* adjust according your image size */ height: 250px; border-top: 0px dashed Silver; background: rgb(159, 13, 13) url(http://www.aquaticjungle.com/uploads/ngrey/ ) repeat-x bottom; } div#footer-top { width: 990px; height: 250px; margin: 0 auto; padding: 0px 0px 0px 0px; /* you can set your own image here */ background: url(http://www.aquaticjungle.com/uploads/ngrey/ ) no-repeat left top; } div#footer-top p { font-family: Arial, Helvetica, sans-serif; font-size: 1.1em; line-height: 1.5em; padding: 1em 1em 0.5em 0em; margin: 0 0 0em 0; font-weight: normal; color : beige; } div#footer-top p a { /* footer link would be same color as default we want it same as footer text */ color : beige; text-decoration: none; } div#footer-top p a:hover { color : white; text-decoration: underline; } div#footer-top1 { float: left; width: 240px; height: 180px; margin: 40px 0px 10px 0px; /* this one is for left side */ border-right: 1px dashed Yellow; background: url(http://www.aquaticjungle.com/uploads/ngrey/ ) no-repeat right bottom; } div#footer-top2 { float: left; width: 230px; height: 180px; border-right: 1px dashed Yellow; margin: 40px 0px 10px 20px; /* this one is for centre side */ background: url(http://www.aquaticjungle.com/uploads/ngrey/ ) no-repeat right bottom; } div#footer-top3 { float: left; width: 230px; height: 180px; border-right: 1px dashed yellow; margin: 40px 0px 10px 20px; /* this one is for centre side */ background: url(http://www.aquaticjungle.com/uploads/ngrey/ ) no-repeat right bottom; } div#footer-top4 { float: right; width: 230px; height: 180px; margin: 40px 0px 10px 0px; border-right: 0px dashed DarkGray; /* this one is for centre side */ background: url(http://www.aquaticjungle.com/uploads/ngrey/ ) no-repeat right bottom; } div#footer { height: 50px; padding: 0px 0px 0px 0px; /* you can set your own image here */ background: #333333 url(http://www.aquaticjungle.com/uploads/ngrey/ ) no-repeat left top; } div#footer-bottom { width: 990px; height: 50px; margin: 0 auto; padding: 0px 0px 0px 0px; /* you can set your own image here */ background: url(http://www.aquaticjungle.com/uploads/ngrey/ ) no-repeat left top; } div#footer-bottom p { /* sets different font size from default */ font-size: 0.9em; /* some air for footer */ color: #FFE4E1; padding: 1.6em 0em 0em 0em; /* centered text */ margin: 0; } div#footer-bottom p a { /* footer link would be same color as default we want it same as footer text */ text-decoration: none; color: #FFE4E1; } div#footer-bottom p a:hover { color : #F8F8FF; text-decoration: none; } div#footer-bottom1 { float: left; width:330px; height: 50px; margin: 0px 45px 0px 0px; /* this one is for left side */ border-right: 0px dashed Silver; background: url(http://www.aquaticjungle.com/uploads/ngrey/ ) no-repeat right bottom; } div#footer-bottom2 { float: left; width: 330px; height: 50px; margin: 0px 0px 0px 0px; border: 0px groove white; /* this one is for centre side */ background: url(http://www.aquaticjungle.com/uploads/ngrey/ ) no-repeat right bottom; } div#footer-bottom3 { float: right; width: 240px; height: 50px; margin: 0px 0px 0px 0px; border: 0px groove white; /* this one is for centre side */ background: url(http://www.aquaticjungle.com/uploads/ngrey/logo-foot.png) no-repeat right bottom; } /* as we hid all hr for accessibility we create new hr with div class="hr" element */ div.hr { height: 1px; padding: 1em; border-bottom: 1px dotted black; margin: 1em; } /* relational links under content */ div.left49 { /* combined percentages of left+right equaling 100% might lead to rounding error on some browser */ width: 70%; } div.right49 { float: right; width: 29%; /* set right to keep text on right */ text-align: right; } /********************CONTENT STYLING*********************/ /* HEADINGS */ h1 { /* font size for h1 */ font-size: 1.2em; color: #ff9900; padding: 0.5em 0em 0.5em 0em; line-height: 1.3em; } div#content h2 { font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; color: #575757; /* font size for h2 the higher the h number the smaller the font size, most times */ font-size: 1.9em; /* some air around the text */ padding: 1em 0em 1em 0em; line-height: 1.3em; /* and some air under the border */ margin: 0 0 0em 0; } h3 { font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; color: black; /* font size for h3 the higher the h number the smaller the font size, most times */ font-size: 1.1em; text-align: left; /* some air around the text */ padding: 0.3em 0em 0.2em 0em; line-height: 1.0em; /* and some air under the border */ margin: 0 0 0em 0; } div#content h4 { font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; color: silver; /* font size for h4 the higher the h number the smaller the font size, most times */ font-size: 1.3em; text-align: left; /* some air around the text */ padding: 0.5em 0em 0.5em 0em; line-height: 1.3em; /* and some air under the border */ margin: 0 0 0.5em 0; } h5 { font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; color: #575757; /* font size for h5 the higher the h number the smaller the font size, most times */ font-size: 1.3em; text-align: left; /* some air around the text */ padding: 0em 0em 2em 0em; line-height: 0.5em; /* and some air under the border */ margin: 0em 0em 0em 0em; } h6 { font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; color: silver; /* font size for h6 the higher the h number the smaller the font size, most times */ font-size: 1.1em; text-align: left; /* some air around the text */ padding: 0em 0em 0em 0em; line-height: 0.3em; /* and some air under the border */ margin: 0em 0em 0em 0em; } /* END HEADINGS */ /* TEXT */ p { /* default p font size, this is set different in some other divs */ font-size: 1em; /* some air around p elements */ margin: 0 0 1.5em 0; line-height: 1.4em; padding: 0; } blockquote { border-left: 10px solid #fff; margin-left: 10px; font-size: 1.3em; } strong, b { /* explicit setting for these */ font-weight: bold; } em, i { /* explicit setting for these */ font-style: italic; } /* Wrapping text in tags. Makes CSS not validate */ code, pre { /* css-3 */ white-space: pre-wrap; /* Mozilla, since 1999 */ white-space: -moz-pre-wrap; /* Opera 4-6 */ white-space: -pre-wrap; /* Opera 7 */ white-space: -o-pre-wrap; /* Internet Explorer 5.5+ */ word-wrap: break-word; font-family: "Courier New", Courier, monospace; font-size: 1em; } pre { /* black border for pre blocks */ border: 1px solid #000; /* set different from surroundings to stand out */ background-color: #ddd; margin: 0 1em 1em 1em; padding: 0.5em; line-height: 1.5em; font-size: 90%; } /* Separating the divs on the template explanation page */ div.templatecode { margin: 0 0 2.5em; } /* END TEXT */ /* LISTS */ /* lists in content need some margins to look nice */ div#main ul, div#main ol, div#main dl { font-size: 1.0em; line-height: 1.4em; margin: 0 0 1.5em 0; } div#main ul li, div#main ol li { margin: 0 0 0.25em 3em; } /* definition lists topics on bold */ div#main dl { margin-bottom: 2em; padding-bottom: 1em; border-bottom: 1px solid #c0c0c0; } div#main dl dt { font-weight: bold; margin: 0 0 0 1em; } div#main dl dd { margin: 0 0 1em 1em; } /* END LISTS */ /* Stylesheet: Layout: Top menu + 2 columns Modified On 2025-07-15 20:40:15 */