body {
background-image: url("/assets/images/background.space.png");
margin-top: 0px;
margin-left: 0px;
font-size:1.0em;
color: #121212;
height:100%;
}
body a {
color: #D43349;
text-decoration:none;
font-weight:bold;
}
body a:hover {
color: #FFC400;
}
body a:visited {
color: #D433BB;
}
/* -------------- header stuff -------------------- */
#headerContainer {
margin-top:8px;
padding-bottom: 50px;
background-image: url("/assets/images/road3a.gif");
background-repeat: repeat;
}
/* A wrapper container for the hotrod image so that we can clip when the animation of the hotrod when it goes outside the
width of the page (during the animation) by overflow:hidden (otherwise a scrollbar appears). Also, we need to put a
in the div to give it some content, otherwise the image of the hotrod wont appear on the screen. Set the height and width as
well (note: height only has an effect once there's the content in the div).
Also: Make the position of the wrapper container div 'absolute' otherwise it pushes all the other content down if its in the
flow with 'relative'. Making it absolute has the effect of meaning that we need to also refer to the "#hotRod" image by
absolute co-ordinates relative to the parent rather than the parent #hotrodContainer (we could have refered to the #hotrod image with co-ordinates relative to this wrapper container if #hotrodContainer was declared as relative but we cant
make it relative due to the flow problem.
Conclusion: this #hotrodContainer serves only to clip the hotrod animation when it goes off the screen. It is invisible because it is position:absolute with no visible content. And we are left to position the #hotRod absolutely with respect to the page. */
#hotrodContainer {
position:absolute;
top:0px;
left:0px;
height:100px;
width:100%;
overflow:hidden;
}
#hotRod {
position:absolute;
top: 35px;
left:-25px;
}
#headerImage {
margin-left: 200px;
}
#tabPescatoreOn {
position:absolute;
top:-50px;
left:-50px;
z-index:1;
}
#tabPescatoreOver {
position:absolute;
top:-50px;
left:-50px;
z-index:1;
}
#tabBlueHandOn {
position:absolute;
top:-50px;
left:-50px;
z-index:1;
}
#tabBlueHandOver {
position:absolute;
top:-50px;
left:-50px;
z-index:1;
}
/* ------- Navigation ------- */
#navContainer {
font-size:0.8em;
margin-top:10px;
margin-left:12px;
margin-right:12px;
/*background-color: #559345;*/
/*background-color: #121212;*/
}
/* the outer UL: this id is set in the outerTpl chunk */
.mainNavUL {
/* works with the float: left on the .navListItem class */
overflow: hidden;
/* unordered lists have default padding and right indentation. Remove (some browsers use padding others margin) */
margin:0px;
margin-bottom:30px;
padding:0px;
background-color:#222222;
}
/* MAIN NAV LI */
.mainNavUL li {
/* list-style:none, gets rid of the default unordered list bullets. */
list-style: none;
/* By specifying float:left, we make the main nav a horizontal list.
However you also need overflow:hidden on the UL container.*/
float: left;
/* Or alternately by specifying display:inline (IE) or display:inline-block (FF), we make the main nav a horizontal list.
However if you do it this way you need to put all your li's on the same line otherwise browsers put a space between the
list elements (ie. write it all on one line as */
/*display:inline-block;*/
/* Center the text (ie a href links). */
text-align: center;
/* to make the whole list item clickable link, keep the padding to 0, and style the link in the
"#navContainer ul li a" style below */
/* there's 2 ways of padding the buttons: either padding/color here or padding background-color in .spiffyNav */
padding:5px;
background-color:#222222;
margin:0px;
/* if you take away spiffy corners code in the vpMainMenuTemplateLI and uncomment the style below, it actually looks alright
Otherwise, the .spiffyNav class below styles the spiffy div used to wrap the links.
width:120px;
margin: 5px;
border-color: white;
border-style: solid;
border-width: 2px;
background-color:black;
*/
}
/*
.mainNavTab {
background: url(/assets/images/right.yellow.png) right top no-repeat;
padding-right: 7px;
color:yellow;
}
*/
.spiffyNav {
background:transparent;
padding:0px;
width:100px;
}
/* NOTE: The order is important here:
The a:hover active styles need to come before the normal active styles because a:hover for active needs to inherit
from a active normal (and not a:hover normal). We also need background-color:transparent set on a active normal
so it nullifies the tomato inherited from the a:hover normal
*/
/* ---------------------------------------------------------------------------------------*/
/* the style of any links in the main menu when you hover over them: see overrides below */
.mainNavUL li a:hover {
cursor: pointer;
color: black;
background: goldenrod url(/assets/images/left.goldenrod-222222bg.png) left top no-repeat;
padding-left: 10px
}
/* the style of any links in the main menu when you hover over them: see overrides below */
.mainNavUL li a:hover span {
cursor: pointer;
color: black;
background: url(/assets/images/right.goldenrod-222222bg.png) right top no-repeat;
padding-right: 10px
}
/* the style of an active link thats being hovered over in the main menu: overrides rule above */
/* no longer applies since inner span above overrides this */
/*
.mainNavUL li.active a:hover {
cursor: default;
color:green;
}
*/
/* ---------------------------------------------------------------------------------------*/
/* the style of any links in the main menu: see overrides below */
.mainNavUL li a {
font-weight:bold;
color: yellow;
text-decoration: none;
/* displaying the links as block elements makes the link take up most of the list area and therefore makes most of the box clickable. Then set the padding to make the whole box clickable as well */
display:block;
/*
background: #2F4F4F url(/assets/images/left.3366CC-222222bg.png) left top no-repeat;
*/
text-decoration: none;
padding-left: 10px
}
/* the style of any links in the main menu: see overrides below */
.mainNavUL li a span {
font-weight:bold;
color: yellow;
text-decoration: none;
/* displaying the links as block elements makes the link take up most of the list area and therefore makes most of the box clickable. Then set the padding to make the whole box clickable as well */
display:table-cell;
vertical-align:middle;
/* if you want buttons over all main menu items uncomment the next line */
/*
background: url(/assets/images/right.goldenrod-222222bg.png) right top no-repeat;
*/
padding-right: 10px;
height:22px;
/* you can specify a min-width, but then when you increase the font size in the browser
you loose the pescatore icon being over the menu itmes cos its position is absolute
Also, width should be greater than largest text word to avoid different width buttons as well
*/
width:70px;
}
/* ---------------------------------------------------------------------------------------*/
/* the style of the active link in the main menu */
.mainNavUL li.active a {
font-weight:bold;
color: red; /* has no effect: inner span below does */
text-decoration: none;
/* displaying the links as block elements makes the link take up most of the list area and therefore makes most of the box clickable. Then set the padding to make the whole box clickable as well */
display:block;
padding:0px;
background: #3366CC url(/assets/images/left.3366CC-222222bg.png) left top no-repeat;
text-decoration: none;
padding-left: 10px
/*background-color:transparent;*/
}
/* the style of the active link in the main menu */
.mainNavUL li.active a span {
font-weight:bold;
color: white;
text-decoration: none;
/* displaying the links as block elements makes the link take up most of the list area and therefore makes most of the box clickable. Then set the padding to make the whole box clickable as well */
display:table-cell;
vertical-align:middle;
background: url(/assets/images/right.3366CC-222222bg.png) right top no-repeat;
padding-right: 10px;
height:22px;
/*background-color:transparent;*/
}
/* ---------------------------------------------------------------------------------------*/
/* this class is on the active menu item: it uses the &hereTpl which calls the vpHereTemplate which outputs text rather
than a link for the active menu. Style that text here the same as the active link. */
.menuHere {
font-weight:bold;
color: red;
text-decoration: none;
/* displaying the links as block elements makes the link take up most of the list area and therefore makes most of the box clickable. Then set the padding to make the whole box clickable as well */
display:block;
padding:0px;
background-color:transparent;
}
/* ---------------------------------------------- SUB NAV --------------------------------- */
/* the outer UL: this id is set in the innerTpl chunk */
.subNavUL {
/* works with the float: left on the .subNavListItem class */
overflow: hidden;
/* unordered lists have default padding and right indentation. Remove (some browsers use padding others margin) */
margin-top:5px;
margin-left:12px;
padding:0px;
/* position:absolute frees it from being linked to the parent list item in the display and you can put it where you want */
position:absolute;
background-color:#222222;
left:0px;
font-size:0.8em;
}
/*
The style of any sub menu item: the name of this class is passed to the Wayfinder '&rowClass' parameter.
*/
/*.subNavListItem {*/
.subNavUL li {
/* list-style:none, gets rid of the default unordered list bullets. */
list-style: none;
/* By specifying float:left, we make the main nav a horizontal list.
However you also need overflow:hidden on the UL container.*/
float: left;
/* Or alternately by specifying display:inline (IE) or display:inline-block (FF), we make the main nav a
horizontal list.
However if you do it this way you need to put all your li's on the same line otherwise browsers put a space
between the list elements (ie. write it all on one line as */
/*display:inline-block;*/
/* Center the text (ie a href links). */
text-align: center;
/* to make the whole list item clickable link, keep the padding to 0, and style the link in the
"#navContainer ul li a" style below */
/* there's 2 ways of padding the buttons: either padding/color here or padding background-color in .spiffyNav */
padding:2px;
background-color:transparent;
margin: 2px;
}
/* ---------------------------------------------------------------------------------------*/
/* the style of any links in the sub menu when you hover over them: see overrides below */
.mainNavUL li ul.subNavUL li a:hover {
cursor: pointer;
color: black;
background-color: goldenrod;
}
/* the style of an active link thats being hovered over in the main menu: overrides rule above */
.mainNavUL li ul.subNavUL li.active a:hover {
/* cursor: default; */
}
/* the style of any links in the main menu: see overrides below */
.mainNavUL li.active .subNavUL li a {
font-weight:bold;
color: yellow;
text-decoration: none;
/* displaying the links as block elements makes the link take up most of the list area and therefore makes most of the box clickable. Then set the padding to make the whole box clickable as well */
display:table-cell;
vertical-align:middle;
text-align:center;
padding-left:3px;
padding-right:3px;
padding-top:2px;
padding-bottom:2px;
background-color:transparent;
background-image:none;
}
/* the style of any links in the sub menu: see overrides below */
.mainNavUL li.active .subNavUL li.active a {
font-weight:bold;
color: white;
text-decoration: none;
/* displaying the links as block elements makes the link take up most of the list area and therefore makes most of the box clickable. Then set the padding to make the whole box clickable as well */
display:block;
background-color:#3366cc;
}
/* ------- Page contents for the generic container and all the different pages */
#pageContents {
margin-left: 5px;
margin-right: 5px;
margin-top: 5px;
margin-bottom: 0px;
}
.blackContents {
padding:8px;
/* spiffy corners provides the background of #121212 */
background-color:#000000;
font-size:0.9em;
color: #0080FF;
}
.blackContents h3 {
color: orange;
}
.blackContents h4 {
color: #88A62D;
}
.leftPic {
float:left;
margin-right:25px;
border-color:white;
border-style:solid;
border-width:2px;
display:block;
}
.rightPic {
float:right;
margin-left:25px;
border-color:white;
border-style:solid;
border-width:2px;
display:block;
}
.centerPic {
margin-left:auto;
margin-right:auto;
display:block;
border-color:white;
border-style:solid;
border-width:2px;
}
.blackBorderPic {
border-color:black;
border-style:solid;
border-width:2px;
}
.centerText {
text-align:center;
}
.mockTable {
width:90%;
display: table;
}
.mockRow {
display: table-row;
}
.mockCell {
display: table-cell;
}
.commentsDiv {
display:none;
}
span.mockLink {
color: #D43349;
text-decoration:none;
font-weight:bold;
}
.whiteContents {
padding:8px;
/* spiffy corners provides the background of #ffffff */
background-color:#000000;
font-size:0.8em;
color: #121212;
}
.whiteContents h3 {
color: blue;
}
.whiteContents h4 {
color: #88A62D;
}
.creamContents {
padding:0px;
/* to blend in cream spiffy corners with white background */
background-color:#ffffff;
font-size:0.8em;
color: #121212;
}
.blogEntry {
padding:20px;
font-size:0.8em;
}
.dottedLine {
border-bottom-style:dashed;
border-bottom-color:grey;
border-bottom-width:1px;
}
#footerContainer {
margin-left:5px;
margin-right:5px;
margin-top: 0px;
margin-bottom:5px;
padding: 8px;
/* spiffy corners provides the background of #121212 */
background-color:#000000;
font-size:0.7em;
color: #339DD4;
}
.sideBar {
padding: 8px;
margin-left: 2px;
margin-right: 4px;
margin-top: 2px;
margin-bottom: 4px;
width: 280px;
float:right;
}
.main {
padding: 12px;
margin:8px;
margin-right: 320px;
}
#manulEatingChickenPic {
float:right;
margin-right: 60px;
border:2px;
border-style:solid;
border-color:black;
}
.pescatoreUnorderedList {
margin-left:20px;
padding:1px;
list-style-image:url(/assets/images/arrow.round.gif);
color:midnightblue;
}
/* custom jot classes used in vpJotTemplate */
.vp-jot-user {
float: left;
width: 125px;
}
.vp-jot-content
{
margin-left: 125px;
}
.pescatoreGallery{
position: relative; /*keep this intact*/
visibility: hidden; /*keep this intact*/
border-width: 2px;
border-style: solid;
border-color: black;
margin-left:8px;
}
.pescatoreGallery .gallerydesctext{ /*CSS for description DIV of Example 1 (if defined)*/
text-align: left;
padding: 2px 5px;
}
#pescatoreMainVideo {
margin-left:auto;
margin-right:auto;
width:400px;
border-style:solid;
border-width:2px;
border-color:black;
}
#pescatoreVideos li a:hover img {
border-width: 2px;
border-color:yellowgreen;
}
#pescatoreVideos li.active a img {
border-width: 2px;
border-color:dodgerblue;
}
#pescatoreVideos li a img {
border-width: 0px;
}
#pescatoreCounter {
width:120px;
float:right;
}
#sitemap (
font-size:0.8em;
}
.question {
font-weight:bold;
color: #9E5C30;
}
.msgNotify {
color: crimson;
}