/*=== Setup ===*/
*{
	border: 0;
	margin: 0;
	padding: 0;
}
body{
	background:#B5E4F6 repeat-x top;
	color: #41484d;
	font: 14px Arial,Tahoma,Verdana,Helvetica,Sans-Serif;
}
a{
	color: #4f3d33;
	text-decoration: none;
}
a:hover{
	text-decoration: underline;
}
input,select,textarea{
	border: #969696 1px solid;
	font-size: 11px;
	padding: 2px;
}
select{
	padding: 0;
}
li{
	list-style: none;
}
h2 span, h3 span{
	display: none;
}
/*=== Layout ===*/
#page,#page-bot,#page-top{
	background: url(images/page-bgr.png) repeat-y;
	margin: 0 auto;
	width: 932px;
}
#page{
	padding: 0 32px 20px 25px;
	width: 875px;
}
#page-bot{
	background: url(images/page-bot.png) no-repeat bottom;
	height: 7px;
}
#page-top{
	background: url(images/page-top.png) no-repeat top;
	height: 54px;
}
#bot-bgr{
	background: none;
	padding: 0 0 50px;
}
/*=== Subscribe to Feed ===*/
ul.subscribe{
	float: right;
	padding: 20px 50px 0 0;
}
* html ul.subscribe{
	padding-right: 40px;
}
.subscribe li{
	float: left;
	font-size: 14px;
	font-weight: bold;
	letter-spacing: -1px;
	margin: 0 20px 0 10px;
}
.subscribe li.feed{
	background: url(images/ico-post.gif) no-repeat left;
	padding: 0 0 0 20px;
}
.subscribe li a{
	color: #41484d;
	position: relative;
}
/*=== Header ===*/
#header{
	height: 80px;
}
/*- Logo & Tagline-*/
#logotag {
	width:300px;
	height:50px;
	float:left;
	padding-top:5px;
	}
#logotag h1{
	font-size:22px;
	font-weight:bold;
	letter-spacing:-1px;
	margin:0px !important;
	padding:0px !important;
}
#logotag h1 a{b hnm,
	color:#13b6df;
}
#mytag {
	width:300px;
	height:22px;
	float:right;
	margin:0px !important;
	padding:0px !important;
	}
.tag {
	float:left;
	margin:0px !important;
	padding:0px !important;
	font-size:16px;
	color:#adadad;
	}
a.hlink {
	color:#adadad;
}
a.hlink:visited{
	color:#adadad;
}
/*- Search -*/
.search{
	background: url(images/search-bgr.gif) no-repeat;
	float: left;
	height: 25px;
	margin: 0px 0 0;
	width: 200px;
}
.search input{
	background: none;
	border: 0;
	color: #000;
	float: left;
	font-size: 12px;
	margin: 4px 0 0 10px;
	padding: 0px;
	width: 150px;
}
.search .btn{
	margin: 4px 0 0 0px;
	padding: 0;
	width: auto;
}
/*=== Title ===*/
#title{
	background: url(images/title-bgr.gif) repeat-x top;
	height: 220px;
}
.left-title {
	float:left;
	width:280px;
	height:149px;
	padding:20px 20px;
	color:#FFF;
	}
.right-title {
	float:right;
	width:240px;
	height:149px;
	padding:20px 20px;	
	color:#FFF;
	}
.left-title h2, .right-title h2 {
	color:#dedede;
	font-weight:bold;
	letter-spacing:-1px;
	font-size:16px;
	text-transform:uppercase;
	}
.left-title p, .right-title p {
	text-align:justify;
	font-size:12px;
	}
/*- Top Menu -*/
#title li{
	float: left;
	font-weight: bold;
	line-height: 30px;
	padding: 0 15px;
	text-transform: uppercase;
}
#title li a{
	color: #ffffff;
}
#title li a:hover {
	color:#65453e;
	}
/*- Title Layout -*/
.tcol1{
	float: left;
	width: 350px;
}
.tcol2{
	float: right;
	width: 295px;
}
/*- Polaroid -*/
#polaroids{
 	z-index: 100;
	height: 600px;
	margin: 0 0 0 317px;
	position: absolute;
	top: 107px;
	width: 276px;
}
/*=== Columns ===*/
#columns{
	margin: 30px 0 0;
}
#columns h2{
	color: #65453e;
	font-size: 22px;
	font-weight: bold;
}
#columns h2 a{
	color: #65453e;
}
#columns h3{
	color: #65453e;
	font-size: 16px;
	letter-spacing: -1px;
}
#columns h3 em{
	color: #4f3d33;
	font-style: normal;
}
#columns h4{
	color: #4f3d33;
	font-size: 14px;
	font-weight: normal;
	line-height: 15px;
	padding: 0 0 5px;
	font-weight:bold;
}
#columns h4 a{
	color: #4f3d33;
}
.col1{
	width: 600px
}
.col2{
	float: right;
	width: 200px;
}

/*=== Each Post ===*/
.pagetitle{
	color: #41484d !important;
	font-size:14px !important;
	text-transform:uppercase;
	font-weight:bold !important;
	border-bottom:#13b6df dotted 1px;
	padding-bottom:5px;
}
.post{
	background: url(images/hl-dot2.gif) repeat-x bottom;
	padding: 15px 0 5px;
}
.post p{
	clear: both;
	padding: 0 0 15px;
}
.post.last{
	background: none;
}
.postmetadata{
	color: #777;
	font-size: 11px;
	padding: 0 0 15px;
}
.postmetadata a{
	color: #777;
}
.meta-cal {
	background:url(images/ico-cal.gif) center left no-repeat;
	padding-left:15px;
	}
.meta-comm {
	background:url(images/ico-comm.gif) center left no-repeat;
	padding-left:15px;
	margin-left:15px;
	}
.meta-tag {
	background:url(images/ico-tag.gif) center left no-repeat;
	padding-left:15px;
	}
.postimg img.fl{
	margin: -10px 15px 0 0;
	padding-bottom:0px;
}
.entry p{
	text-align:justify;
	font-size:12px;
	line-height:20px;
	}
.entry blockquote { 
	padding: 3px 15px;
	background: #FDEAE8;
	border: 1px solid #4f3d33;
	margin: 5px auto 15px auto;
	color:#000;
	width:85%;
	}
.entry blockquote p {
	font-size:12px;
	padding: 5px 0px;
	margin: 5px 0px;
	line-height: 20px;
	}
.entry img { 
	padding: 2px 2px 2px 2px;
	margin: 0px 15px 0px 0px !important;
	float:left;
	display:inline;
	}
.none-img { 	
	background:none !important;
	border:none !important; 
	}
.none-img img { 	
	background:none !important;
	border:none !important; 
	}
.entry ul, .entry ol {
	margin-bottom:15px;
	font-size:12px;
	line-height:20px;
	margin-left:15px;
	}
.entry ul li ul, .entry ol li ol{
	margin-bottom:0px;
	padding-top:3px;
	}
.entry ul li {
	list-style:circle inside !important;
	padding:3px 0px;
	}
.entry ul li ul li {
	list-style:disc inside !important;
	}
.entry ol li {
	list-style:decimal inside !important;
	font-size:12px;
	padding:3px 0px;
	}
.entry ol li ol li {
	list-style:decimal-leading-zero inside !important;
	}
/*=== Comments ===*/
.comments_template{
	margin: 0 0 0 10px;
	padding: 0 0 10px 0;
}
.comments_template p.nocomments, .comments_template p.alert{
	padding: 10px;
	font-size: 12px;
}
#comments {
	font-size: 20px;
	padding: 2px 10px 0px 30px;
	color:#4f3d33;
	background:url(images/ico-comment.gif) center left no-repeat;
}
.comments_template form#commentform{
	margin: 0;
	padding: 10px;
}
.comments_template form#commentform p{
	line-height: 16px;
}
ol.commentlist{
	margin: 10px 0;
	padding: 0;
	list-style: none;
	font-size: 12px;
	line-height: 16px;
}
ol.commentlist p{
	margin-bottom:10px;
	line-height: 16px;
}
ol.commentlist cite{
	font-style: normal;
	font-weight: bold;
}
ol.commentlist li{
	padding: 10px;
	border-top:1px dotted #13b6df;
}
ol.commentlist li.alt{
	background:#FDEAE8;
	border-top:1px dotted #13b6df;	
}
ol.commentlist li.highlighted{
	background:#FDEAE8;
	border-top:1px dotted #13b6df;	
}
/*=== Navigation ===*/
.navigation {
	padding:15px 0px 15px 0px;
	font-weight:bold;
	float:left;
	}
.alignleft {
	float:left;
	display:inline;
	}
.alignright {
	float:right;
	display:inline;
	}
/*=== Ads ===*/
.ads{
	height: 125px;
	margin: 10px 0 30px;
}
.ads img{
	display: block;
	float: left;
	margin: 0 24px 0 0;
}
.ads img.last{
	margin: 0;
}
/*=== Comments ===*/
ul.comments{
	padding: 0 0 15px;
}
.comments li{
	border-bottom:1px dotted #13b6df;
	font-size: 11px;
	padding: 4px 0 5px 5px;
	color: #4f3d33;
}
.comments li em, .comments li a em{
	color: #4f3d33;
	font-style: normal;
}
.comments li a{
	color: #41484d;
}
.comments li a:hover{
	text-decoration:none;
	color: #4f3d33;
}
.comments img {
	vertical-align:text-bottom;
	padding-left:5px;
	padding-right:5px;
	}
/* Specific Headers */
.hdr1, .hdr2, .hdr3, .hdr4, .hdr5, .hdr6{
	background: url(images/hdr-bgr1.gif) no-repeat left;
	height: 52px;
	line-height: 52px;
	padding: 0 0 0 50px;
}
.hdr2{
	background: url(images/hdr-bgr2.gif) no-repeat left;
}
.hdr3{
	background: url(images/hdr-bgr3.gif) no-repeat left;
}
.hdr4{
	background: url(images/hdr-bgr4.gif) no-repeat left;
}
.hdr5{
	background: url(images/hdr-bgr5.gif) no-repeat left;
}
.hdr6{
	background: url(images/hdr-bgr6.gif) no-repeat left;
}
/*=== Recent Readers ===*/
table#MBL_COMM td.mbl_fo_hidden {
display:none;
}
.recent{
	padding: 10px 0 0;
}
.recent img{
	border: 1px solid #222222;
	float: left;
	height: auto;
	margin: 3px;
}
* html .recent img{
	margin: 0 3px;
}
/*=== Flicker Photos ===*/
.flickr{
	background: url(images/flickr-bgr.gif) no-repeat left;
	height: 97px;
	margin: 0 0 0 -5px;
	padding: 23px 0 0 133px;
	position: relative;
}
.flickr p {
	display:inline;
	float:left;
	padding:0px 15px 0px 8px;
	}

/*=== Past Photos ===*/
.photobar{
	background: url(images/flickr-bgr.gif) no-repeat left;
	height: 125px;
	margin: 0 0 0 -5px;
	padding: 0px 0 0 03px;
	position: relative;
}
.photobar p {
	display:inline;
	float:left;
	padding:0px 5px 0px 5px;
	}
/*=== Footer ===*/
#footer{
	background: #65453e;
	clear: both;
	color: #acb4b9;
	font-size: 12px;
	line-height: 30px;
	margin: 30px 0 0;
	text-align: left;
	padding:0px 15px;
}
#footer a{
	color: #acb4b9;
}
/*=== Misc. ===*/
.fix{
	clear: both;
	height: 1px;
	margin: -1px 0 0;
	overflow: hidden;
}
.fl{
	float: left;
}
.fr{
	float: right;
}
.ac{
	text-align: center;
}
.ar{
	text-align: right;
}
/*=== Portfolio ===*/
.showcase {
	float:left;
	display:inline;
	width:206px;
	}
.showcase h2 {
	font-size:16px !important;
	margin-bottom:5px !important;
	font-weight:bold !important;
	color: #65453e;
	}
.showcase p {
	font-size:10px !important;
	line-height:14px !important;
	text-align:justify !important;
	margin-bottom:7px !important;
	}
.showcase img {
	background:none !important;
	padding:0px !important;
	margin-bottom:5px;
	border:3px solid #FAD3D1 !important;
	}
.weblink a {
	font-weight:bold !important;
	text-transform:uppercase;
	font-size:12px !important;
	float:right;
	}
.showcase-divider {
	width:100%;
	height:15px;
	float:left;
	margin-bottom:15px;
	background: url(images/hl-dot2.gif) repeat-x bottom;
	}


PixoPoint
Specialists in the design, coding and implementation of websites

    * Forum
    * About
    * Contact
    * Generator
    * Home

Web Development
Welcome to PixoPoint Web Development, experts in developing effective, future-proof web designs. We specialise in the design, coding and implementation of large and small scale websites. Particular areas of expertise include menu navigation, software integration and automated design services. Our new Template Generator and Multi-level Navigation plugin for WordPress are used by many professional web designers. For further information, or to request pricing information, please visit our contact page.
Premium Membership
Includes access to our premium CSS menu generator, featuring vertical flyout and horizontal slider menus. Also includes access to a (private) premium membership support forum. Premium Membership »
Donate
Support for our plugin and theme development is always appreciated.
Advertising

    * Blog
          o Dropdown Plugin
          o Aqua Vaccinium
          o Hellish Simplicity
          o Dropdown Generator
          o Simple CMS Plugin
          o Simple CMS Theme
          o Ice Edge WordPress Theme
    * Stuff
          o Another Level
                + Next Level
                      # Test
                      # Test
                      # Test
                      # Test
                + Test
                + Test
                + Last Level
                      # Current page item
                      # Test
                      # Test
                      # Test
                      # Test
                + Test
          o Test
          o Test
          o Test
    * Forum
          o Themes
          o Dropdown menus
          o Simple CMS Plugin

Welcome to the Suckerfish multi-level CSS Generator. By modifying the options below, you can generate a restyled Suckerfish dropdown navigation above. You can copy and paste the CSS generated from the box further down the page.

Note: You need to upgrade to our premium service to modify some features.

Premade Designs:

Navigational type:

Premium users only
(show premium options »)

WordPress Optomised:

Click Here to Pick up the color Current Page Item Background Colour:

enter a valid HEX colour value

Click Here to Pick up the color Current Page Parent/Ancestor Background Colour:

enter a valid HEX colour value

Click Here to Pick up the color Current Page Item Indicator Colour:

enter a valid HEX colour value

Current Page Item Indicator Symbol

 

Current Page Parent Indicator Symbol

 
Top Level Menu items

These options modify the top level menu items.

 

Background image:

If no image is specified, only the background colour will be displayed

Click Here to Pick up the color Background colour:

enter a valid HEX colour value

Click Here to Pick up the color Background colour on hover:

enter a valid HEX colour value

Click Here to Pick up the color Text colour:

enter a valid HEX colour value

Click Here to Pick up the color Text colour on hover:

enter a valid HEX colour value

Font size:

enter a font size in PXs

Font family:

choose a font family
(show premium options »)

Font weight:

choose a font weight

Height:

enter measurement in PXs

Horizontal padding:

enter measurement in PXs

Border width:

Click Here to Pick up the color Border colour:

enter a valid HEX colour value

Flyout Width:

Only applies to Vertical Flyout menus

Repeat background image:

Only applies to Vertical Flyout menus

Buttonized: (developmental)

Creates graphical buttons instead of basic text links. Note: You must have a background image colour specified above for this to work
Lower Level Menu items

These options modify the second level menu items.

Click Here to Pick up the color Background colour:

enter a valid HEX colour value

Click Here to Pick up the color Background colour on hover:

enter a valid HEX colour value

Click Here to Pick up the color Text colour:

enter a valid HEX colour value

Click Here to Pick up the color Text colour on hover:

enter a valid HEX colour value

Font size:

enter a font size in PXs

Font family:

choose a font family
(show premium options »)

 

Font weight:

choose a font weight

Click Here to Pick up the color Border colour:

enter a valid HEX colour value

Opacity:

enter an opacity between 0 and 1

Vertical padding:

enter vertical padding in PXs

Border width:

enter a border width in PXs

Width:

enter a width in PXs

Flyout direction:

 
CSS Code

Paste the following code into your CSS file. This code can be used with any unordered list which has an ID of #suckerfishnav.
#suckerfishnav {
    background:#1F3E9F url("../multi-level-navigation-plugin/images/suckerfish_blue.png") repeat-x;
    font-size:18px;
    font-family:verdana,sans-serif;
    font-weight:bold;
    width:100%;
    }
#suckerfishnav, #suckerfishnav ul {
    float:left;
    list-style:none;
    line-height:40px;
    padding:0;
    border:1px solid #aaa;
    margin:0;
    width:100%;
    }
#suckerfishnav a {
    display:block;
    color:#dddddd;
    text-decoration:none;
    padding:0px 10px;
    }
#suckerfishnav li {
    float:left;
    padding:0;
    }
#suckerfishnav ul {
    position:absolute;
    left:-999em;
    height:auto;
    width:151px;
    font-weight:normal;
    margin:0;
    line-height:1;
    border:0;
    border-top:1px solid #666666;
    }
#suckerfishnav li li {
    width:149px;
    border-bottom:1px solid #666666;
    border-left:1px solid #666666;
    border-right:1px solid #666666;
    font-weight:bold;
    font-family:verdana,sans-serif;
    }
#suckerfishnav li li a {
    padding:4px 10px;
    width:130px;
    font-size:12px;
    color:#dddddd;
    }
#suckerfishnav li ul ul {
    margin:-21px 0 0 150px;
    }
#suckerfishnav li li:hover {
    background:#1F3E9F;
    }
#suckerfishnav li ul li:hover a, #suckerfishnav li ul li li:hover a, #suckerfishnav li ul li li li:hover a, #suckerfishnav li ul li li li:hover a {
    color:#dddddd;
    }
#suckerfishnav li:hover a, #suckerfishnav li.sfhover a {
    color:#dddddd;
    }
#suckerfishnav li:hover li a, #suckerfishnav li li:hover li a, #suckerfishnav li li li:hover li a, #suckerfishnav li li li li:hover li a {
    color:#dddddd;
    }
#suckerfishnav li:hover ul ul, #suckerfishnav li:hover ul ul ul, #suckerfishnav li:hover ul ul ul ul, #suckerfishnav li.sfhover ul ul, #suckerfishnav li.sfhover ul ul ul, #suckerfishnav li.sfhover ul ul ul ul {
    left:-999em;
    }
#suckerfishnav li:hover ul, #suckerfishnav li li:hover ul, #suckerfishnav li li li:hover ul, #suckerfishnav li li li li:hover ul, #suckerfishnav li.sfhover ul, #suckerfishnav li li.sfhover ul, #suckerfishnav li li li.sfhover ul, #suckerfishnav li li li li.sfhover ul {
    left:auto;
    background:#444444;
    }
#suckerfishnav li:hover, #suckerfishnav li.sfhover {
    background:#5E7AD3;
    }

/*=== IE6 Fix ===*/