@pixelated-tech/components 3.1.4

package/dist/components/linkedin/pixelated.linkedin.js

@@ -0,0 +1,180 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React, { useState, useEffect } from 'react';
+/*
+TODO #6 Finish LinkedIn Integration to show recommendations
+*/
+/*
+https://www.linkedin.com/company/pixelatedtech
+https://www.linkedin.com/company/106825397/admin/dashboard/
+
+https://developer.linkedin.com/
+https://www.linkedin.com/developers/apps/222241632/products?refreshKey=1743873578146
+https://learn.microsoft.com/en-us/linkedin/shared/integrations/people/reputation-guides/recommendation
+https://learn.microsoft.com/en-us/answers/questions/1021872/how-do-i-get-access-to-this-linkedin-api-connectio
+
+https://github.com/jsushank17/LinkedIN-Rest-API-with-React-JS-and-Express/blob/master/CustomLinkedIN.jsx
+https://reintech.io/blog/integrating-linkedin-testimonials-on-your-website
+
+*/
+export function LinkedIn() {
+    const debug = true;
+    const [accessToken, setAccessToken] = useState();
+    const [recommendations, setRecommendations] = useState();
+    const proxyURL = 'https://proxy.pixelated.tech/prod/proxy?url=';
+    let codeParam, stateParam, myHref;
+    if (typeof window !== 'undefined') {
+        const urlParams = new URLSearchParams(window.location.search);
+        codeParam = urlParams.get('code');
+        stateParam = urlParams.get('state');
+        myHref = window.location.origin;
+    }
+    const LinkedInApi = {
+        clientID: '78sh51y6nl3xe8',
+        clientSecret: 'WPL_AP1.dug4iQXjl3VjEGG0.tok/0A==',
+        appID: '222241632',
+        redirectUrl: `${myHref}/linkedin`,
+        state: '96573480', // epoch time for Monday, January 22, 1973 12:58:00 PM GMT-05:00
+        oAuthUrl: 'https://www.linkedin.com/oauth/v2/authorization',
+        oAuthResponseType: 'code',
+        oAuthScope: 'w_member_social',
+        tokenUrl: 'https://www.linkedin.com/oauth/v2/accessToken',
+        // recommendUrl : 'https://api.linkedin.com/v2/recommendations/urn:li:recommendation:(urn:li:person:brianwhaley)',
+        recommendUrl: 'https://api.linkedin.com/v2/recommendation',
+        meUrl: 'https://api.linkedin.com/v2/me',
+    };
+    async function fetchOAuth() {
+        if (debug)
+            console.log("Fetching LinkedIn oAuth Token");
+        const oAuthParams = new URLSearchParams({
+            response_type: LinkedInApi.oAuthResponseType,
+            client_id: LinkedInApi.clientID,
+            state: LinkedInApi.state,
+            scope: encodeURIComponent(LinkedInApi.oAuthScope),
+            redirect_uri: LinkedInApi.redirectUrl
+        });
+        const fullOAuthURL = /* proxyURL + */ LinkedInApi.oAuthUrl + "?" + oAuthParams.toString();
+        try {
+            if (debug)
+                console.log("OAuth URL : ", fullOAuthURL);
+            window.location.href = fullOAuthURL;
+        }
+        catch (err) {
+            console.log("Error Fetching OAuth Token : ", err);
+        }
+    }
+    async function fetchAccessToken() {
+        if (accessToken)
+            return;
+        if (debug)
+            console.log("Fetching LinkedIn Access Token");
+        const fullTokenURL = proxyURL + LinkedInApi.tokenUrl;
+        try {
+            if (debug)
+                console.log("oAuth Code : ", codeParam);
+            if (debug)
+                console.log("Access Token URL : ", fullTokenURL);
+            const tokenRequestBody = new URLSearchParams({
+                'grant_type': 'authorization_code',
+                'code': codeParam,
+                'redirect_uri': LinkedInApi.redirectUrl,
+                'client_id': LinkedInApi.clientID,
+                'client_secret': LinkedInApi.clientSecret
+            });
+            if (debug)
+                console.log("FETCHBODY : ", tokenRequestBody.toString());
+            if (debug)
+                console.log("FETCHBODY LENGTH : ", tokenRequestBody.toString().length);
+            const tokenResponse = await fetch(fullTokenURL, {
+                method: "POST",
+                headers: {
+                    "Content-Type": "application/x-www-form-urlencoded",
+                    // "Content-Length" : tokenRequestBody.toString().length ,
+                },
+                body: tokenRequestBody
+            });
+            if (tokenResponse.ok) {
+                const tokenData = await tokenResponse.json();
+                console.log(await tokenData);
+                setAccessToken(tokenData.access_token);
+                if (debug)
+                    console.log("Access Token : ", await tokenData);
+            }
+            else {
+                console.error(`HTTP Error : Status: ${tokenResponse.status}`);
+                // Optionally, throw an error to be caught later
+                throw new Error(`HTTP Error : Status: ${tokenResponse.status}`);
+            }
+        }
+        catch (err) {
+            console.log("Error Fetching Access Token : ", err);
+        }
+        return;
+    }
+    async function fetchRecommendations() {
+        if (!accessToken || recommendations)
+            return;
+        if (debug)
+            console.log("Fetching LinkedIn Recommendations");
+        const recommendParams = new URLSearchParams({
+            // "q": "received-recommendations",
+            // oauth2_access_token: accessToken,
+            "q": "recipient",
+            "statusFilters": "List(VISIBLE)",
+        });
+        const fullRecommendsURL = proxyURL + LinkedInApi.recommendUrl + "?" + recommendParams.toString();
+        try {
+            console.log("RECOMMEND URL : ", fullRecommendsURL);
+            console.log("ACCESS TOKEN : ", accessToken);
+            const recommendResponse = await fetch(fullRecommendsURL, {
+                method: 'GET',
+                headers: {
+                    Authorization: `Bearer ${accessToken}`,
+                    'X-Restli-Protocol-Version': '2.0.0',
+                },
+                /* body: new URLSearchParams({
+                    "recommendee": "urn:li:person:ro87f5eyg_",
+                    "status": "VISIBLE",
+                }) */
+            });
+            console.log("RECOMMEND RESPONSE : ", recommendResponse);
+            const recommendData = await recommendResponse.json();
+            if (recommendData.elements)
+                setRecommendations(recommendData.elements);
+            if (debug)
+                console.log("Recommendations : ", await recommendData);
+        }
+        catch (err) {
+            console.log("Error Fetching LinkedIn Recommendations : ", err);
+        }
+    }
+    useEffect(() => {
+        if (codeParam && stateParam) {
+            if (debug)
+                console.log("oAuth Code Is Present");
+            if (accessToken) {
+                if (debug)
+                    console.log("Access Token Is Present");
+                if (!recommendations) {
+                    if (debug)
+                        console.log("No Recommendations Are Present");
+                    fetchRecommendations();
+                }
+                else {
+                    if (debug)
+                        console.log("Recommendations Already Retrieved");
+                }
+            }
+            else if (!accessToken) {
+                if (debug)
+                    console.log("No Access Token Is Present");
+                fetchAccessToken();
+            }
+        }
+        else {
+            if (debug)
+                console.log("No oAuth Code Present");
+            fetchOAuth();
+        }
+    }, [accessToken]);
+    return (_jsx("div", { children: _jsx("div", { children: recommendations ? _jsx("div", { children: JSON.stringify(recommendations) }) : _jsx("p", { children: "Loading..." }) }) }));
+}

package/dist/components/linkedin/pixelated.linkedin1.js

@@ -0,0 +1,102 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useState, useEffect } from 'react';
+export function LinkedIn() {
+    const [data, setData] = useState(null);
+    const proxyURL = 'https://proxy.pixelated.tech/prod/proxy?url=';
+    const urlParams = new URLSearchParams(window.location.search);
+    const codeParam = urlParams.get('code');
+    const LinkedInApi = {
+        clientID: '78sh51y6nl3xe8',
+        clientSecret: 'WPL_AP1.dug4iQXjl3VjEGG0.tok/0A==',
+        appID: '222241632',
+        // redirectUrl: 'https://www.pixelated.tech/linkedin',
+        redirectUrl: 'http://localhost:6006',
+        tokenUrl: 'https://www.linkedin.com/oauth/v2/accessToken',
+        oAuthUrl: 'https://www.linkedin.com/oauth/v2/authorization',
+        oAuthResponseType: 'code',
+        oAuthScope: 'r_basicprofile', // 'r_liteprofile r_emailaddress w_member_social',
+        recommendUrl: 'https://api.linkedin.com/v2/recommendations/urn:li:recommendation:(urn:li:person:brianwhaley)',
+        meUrl: 'https://api.linkedin.com/v2/me',
+        state: '96573480' // epoch time for Monday, January 22, 1973 12:58:00 PM GMT-05:00
+    };
+    const oAuthParams = new URLSearchParams({
+        response_type: LinkedInApi.oAuthResponseType,
+        client_id: LinkedInApi.clientID,
+        state: LinkedInApi.state,
+        scope: LinkedInApi.oAuthScope,
+        redirect_uri: LinkedInApi.redirectUrl
+    });
+    const fullOAuthURL = proxyURL + LinkedInApi.oAuthUrl + "?" + oAuthParams.toString();
+    const recommendParams = new URLSearchParams({
+        q: 'received',
+        oauth2_access_token: codeParam
+    });
+    const fullRecommendsURL = proxyURL + LinkedInApi.recommendUrl + "?" + recommendParams.toString();
+    async function fetchOAuth() {
+        console.log("Fetching LinkedIn oAuth Token");
+        try {
+            console.log("OAuth URL : ", fullOAuthURL);
+            // const oAuthPromise = await fetch(fullOAuthURL, { method: 'GET' });
+            // const oAuthPromise = await fetch(LinkedInApi.oAuthUrl + "?" + oAuthParams.toString(), { method: 'GET' });
+            window.location.href = fullOAuthURL;
+            // console.log(await oAuthPromise);
+            // const response = await oAuthPromise.response;
+            // console.log(await response);
+        }
+        catch (err) {
+            console.log("Error : ", err);
+        }
+    }
+    async function fetchAccessToken() {
+        console.log("Fetching LinkedIn Access Token");
+        try {
+            const fullTokenURL = proxyURL + LinkedInApi.tokenUrl;
+            console.log("Access Token URL : ", fullTokenURL);
+            const tokenPromise = await fetch(fullTokenURL, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/x-www-form-urlencoded',
+                    'grant_type': 'authorization_code',
+                    // 'grant_type' : 'client_credentials',
+                    'code': codeParam,
+                    'redirect_uri': LinkedInApi.redirectUrl,
+                    'client_id': LinkedInApi.clientID,
+                    'client_secret': LinkedInApi.clientSecret
+                }
+            });
+            console.log(tokenPromise);
+            const response = await tokenPromise.response;
+            console.log(await response);
+            console.log("Access Token : ", await response.data);
+        }
+        catch (err) {
+            console.log("Error : ", err);
+        }
+    }
+    async function fetchRecommendations() {
+        console.log("Fetching LinkedIn Recommendations");
+        try {
+            console.log(fullRecommendsURL);
+            const recommendPromise = await fetch(fullRecommendsURL, { method: 'GET' });
+            console.log(await recommendPromise);
+            const response = await recommendPromise.response;
+            console.log(await response);
+            console.log(await response.body);
+            setData(await response.body);
+        }
+        catch (err) {
+            console.log("Error : ", err);
+        }
+    }
+    useEffect(() => {
+        if (codeParam) {
+            console.log("Access Token Is Present");
+            fetchAccessToken()
+                .then(fetchRecommendations());
+        }
+        else {
+            fetchOAuth();
+        }
+    }, []);
+    return (_jsxs("div", { children: [_jsx("div", { children: _jsx("a", { href: fullOAuthURL, children: "Click it!" }) }), _jsx("div", { children: data ? _jsx("div", { children: JSON.stringify(data) }) : _jsx("p", { children: "Loading..." }) })] }));
+}

package/dist/components/linkedin/pixelated.linkedin2.js

@@ -0,0 +1,92 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import React, { useEffect, useState } from 'react';
+// CONFIG: Replace with your values
+const CLIENT_ID = '78sh51y6nl3xe8';
+const CLIENT_SECRET = 'WPL_AP1.dug4iQXjl3VjEGG0.tok/0A==';
+const REDIRECT_URI = 'http://localhost:6006/?path=/story/linkedin--linked-in-recommendations';
+const STATE = '96573480'; // Any random string
+const SCOPES = 'r_liteprofile';
+const proxyUrl = 'https://proxy.pixelated.tech/prod/proxy?url=';
+export function LinkedInAuthRecommendations() {
+    const debug = true;
+    const [accessToken, setAccessToken] = useState(null);
+    const [recommendations, setRecommendations] = useState([]);
+    const [error, setError] = useState(null);
+    // Step 1: Redirect user to LinkedIn login
+    const initiateLogin = () => {
+        if (debug)
+            console.log("Initiating Login");
+        // const url = encodeURI(`https://www.linkedin.com/oauth/v2/authorization?response_type=code&client_id=${CLIENT_ID}&redirect_uri=${encodeURIComponent(REDIRECT_URI)}&state=${STATE}&scope=${encodeURIComponent(SCOPES)}`);
+        const authUrl = `${proxyUrl}https://www.linkedin.com/oauth/v2/authorization?response_type=code&client_id=${CLIENT_ID}&redirect_uri=${encodeURIComponent(REDIRECT_URI)}&state=${STATE}&scope=${encodeURIComponent(SCOPES)}`;
+        window.location.href = authUrl;
+    };
+    // Step 2: Handle LinkedIn redirect and get access token
+    useEffect(() => {
+        if (debug)
+            console.log("Handling redirect and getting access token");
+        const urlParams = new URLSearchParams(window.location.search);
+        const code = urlParams.get('code');
+        const state = urlParams.get('state');
+        if (code && state === STATE) {
+            // Step 3: Exchange code for access token
+            if (debug)
+                console.log("Exchanging code for access token : ", code);
+            const fetchAccessToken = async () => {
+                try {
+                    const response = await fetch(`${proxyUrl}https://www.linkedin.com/oauth/v2/accessToken`, {
+                        method: 'POST',
+                        headers: {
+                            'Content-Type': 'application/x-www-form-urlencoded',
+                        },
+                        body: new URLSearchParams({
+                            grant_type: 'authorization_code',
+                            code,
+                            redirect_uri: REDIRECT_URI,
+                            client_id: CLIENT_ID,
+                            client_secret: CLIENT_SECRET, // Only safe on server
+                        }),
+                    });
+                    const data = await response.json();
+                    setAccessToken(data.access_token);
+                }
+                catch (err) {
+                    console.log(err);
+                    setError('Failed to get access token');
+                }
+            };
+            fetchAccessToken();
+        }
+    }, []);
+    // Step 4: Call LinkedIn API to get recommendations (hypothetical)
+    useEffect(() => {
+        const fetchRecommendations = async () => {
+            if (!accessToken)
+                return;
+            if (debug)
+                console.log("Calling LinkedIn API");
+            try {
+                const response = await fetch(`${proxyUrl}https://api.linkedin.com/v2/recommendations`, {
+                    headers: {
+                        Authorization: `Bearer ${accessToken}`,
+                        'X-Restli-Protocol-Version': '2.0.0',
+                    },
+                });
+                const data = await response.json();
+                setRecommendations(data.elements || []);
+            }
+            catch (err) {
+                console.log(err);
+                setError('Failed to fetch recommendations');
+            }
+        };
+        fetchRecommendations();
+    }, [accessToken]);
+    // UI
+    if (error)
+        return _jsxs("p", { className: "text-red-500", children: ["Error: ", error] });
+    if (!accessToken) {
+        return (_jsx("div", { className: "p-4", children: _jsx("button", { onClick: initiateLogin, className: "px-4 py-2 bg-blue-600 text-white rounded", children: "Login with LinkedIn" }) }));
+    }
+    return (_jsxs("div", { className: "p-4", children: [_jsx("h2", { className: "text-xl font-bold mb-2", children: "LinkedIn Recommendations" }), recommendations.length === 0 ? (_jsx("p", { children: "No recommendations found." })) : (_jsx("ul", { className: "space-y-4", children: recommendations.map((rec, index) => (_jsxs("li", { className: "p-4 border rounded shadow", children: [_jsx("p", { className: "font-semibold", children: rec.recommender?.name || 'Unknown' }), _jsx("p", { children: rec.text })] }, index))) }))] }));
+}
+;

package/dist/components/markdown/markdown.css

@@ -0,0 +1,12 @@
+/* ========================================
+===============  MARKDOWN   ===============
+======================================== */
+
+.markdown,
+.markdown * {
+	margin: 20px 0; 
+}
+
+.markdown li {
+	margin: 0;
+}

package/dist/components/markdown/markdown.js

@@ -0,0 +1,39 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import PropTypes from "prop-types";
+import { SmartImage } from "../cms/cloudinary.image";
+import { usePixelatedConfig } from "../config/config.client";
+import "./markdown.css";
+/* ========== MARKDOWN ========== */
+Markdown.propTypes = {
+    markdowndata: PropTypes.string.isRequired,
+};
+export function Markdown(props) {
+    function markdownParser(text) {
+        const config = usePixelatedConfig();
+        const toHTML = text
+            .replace(/^#{6}\s(.*$)/gim, '<h6>$1</h6>') // h6 tag
+            .replace(/^#{5}\s(.*$)/gim, '<h5>$1</h5>') // h5 tag
+            .replace(/^#{4}\s(.*$)/gim, '<h4>$1</h4>') // h4 tag
+            .replace(/^#{3}\s(.*$)/gim, '<h3>$1</h3>') // h3 tag
+            .replace(/^#{2}\s(.*$)/gim, '<h2>$1</h2>') // h2 tag
+            .replace(/^#{1}\s(.*$)/gim, '<h1>$1</h1>') // h1 tag
+            .replace(/(=|-|\*){3}/gim, '<hr />') // horizontal rule
+            // .replace(/!\[(.*?)\]\((.*?)\)/gim, "<img alt='$1' title='$1' src='$2' />") // images
+            .replace(/!\[(.*?)\]\((.*?)\)/gim, _jsx(SmartImage, { alt: '$1', title: '$1', src: '$2', cloudinaryEnv: config?.cloudinary?.product_env, cloudinaryDomain: config?.cloudinary?.baseUrl, cloudinaryTransforms: config?.cloudinary?.transforms })) // images
+            .replace(/\[([^[]+)\]\((.*)\)/gim, '<a href="$2">$1</a>') // links
+            .replace(/^\*{1}\s+(.*$)/gim, '<ul><li>$1</li></ul>') // unordered list
+            .replace(/<\/ul>\s?<ul>/g, '') // duplicate unordered list
+            .replace(/^\d+\.\s+(.*$)/gim, '<ol><li>$1</li></ol>') // ordered list
+            .replace(/<\/ol>\s?<ol>/g, '') // duplicate ordered list
+            .replace(/:"(.*?)":/gim, '<q>$1</q>') // quote
+            .replace(/^> (.*$)/gim, '<blockquote>$1</blockquote>') // blockquote
+            .replace(/`(.*?)`/gim, '<code>$1</code>') // inline code
+            .replace(/\*{2}(.*?)\*{2}/gim, '<b>$1</b>') // bold text
+            .replace(/\*{1}(.*?)\*{1}/gim, '<i>$1</i>') // italic text
+            .replace(/~{2}(.*?)~{2}/gim, '<b>$1</b>') // strikethrough
+            .replace(/(^[A-z].+)/gim, '<p>$1</p>') // paragraphs
+        ;
+        return toHTML.trim(); // using trim method to remove whitespace
+    }
+    return (_jsx("div", { className: "section-container", children: _jsx("div", { className: "markdown", dangerouslySetInnerHTML: { __html: markdownParser(props.markdowndata) } }) }));
+}

package/dist/components/menu/menu-accordion.css

@@ -0,0 +1,198 @@
+
+/* ========================================
+=====      SLIDING PANEL MENU         =====
+======================================== */
+
+.panelMenuButton {
+	/* background-color: rgba(255,255,255,0.7); */
+	/* display: none; */
+	/* display: inline; */
+	margin: 0px 10px 0px 0px;
+	padding: 5px;
+	text-align: center;
+	width: 35px;
+
+	/* .rounded; */
+	-moz-border-radius: 5px;
+	-webkit-border-radius: 5px;
+	border-radius: 5px;
+}
+
+@media screen and (max-width: 480px) {
+	.panelMenuButton {
+		display: inline;
+	}
+}
+
+.panelMenuHeader {
+	background-color: #336699;
+	/* background-image: url(/images/pix/pix-bg.gif); */
+	color: #FFFFFF;
+	padding: 15px;
+	/* .rounded; */
+	-moz-border-radius: 5px;
+	-webkit-border-radius: 5px;
+	border-radius: 5px;
+}
+
+
+/* ========================================
+============  ACCORDION MENU   ============
+======================================== */
+
+.accordionMenuWrapper {
+	/* background: #FFF; */
+	background: rgba(150, 190, 250, 0.7);
+	border-right: 1px solid #ccc;
+	height: auto;
+	/* height: 100%; */
+	position: fixed;
+	left: 0px;
+	top: 60px;
+	width: 220px;
+	z-index: 1000;
+    padding: 5px;
+}
+
+.accordionIn {
+	left: 0px;
+	transition: transform 0.5s ease-out 0.0s;
+	transform: translateX(0px);
+}
+
+.accordionOut {
+	left: 0px;
+	transition: transform 0.5s ease-out 0.0s;
+	transform: translateX(-250px);
+}
+
+.accordionDown {
+	top: 60px;
+	transition: transform 0.5s ease-out 0.0s;
+	transform: translateY(0px);
+}
+
+.accordionUp {
+	/* bottom: 0px; */
+	top: 60px;
+	transition: transform 0.55s ease-out 0.0s;
+	transform: translateY(-150%);
+}
+
+.accordionMenu,
+.accordionMenu ul {
+	/* ALL LIST LEVELS */
+	display: inline-block;
+	list-style-type: none;
+	padding: 0;
+	width: 200px;
+}
+
+.accordionMenu li {
+	/* ALL LIST ITEM LEVELS */
+	border-bottom: 1px solid #FFF;
+}
+
+.accordionMenu li:first-child {
+	/* ALL LIST ITEM LEVELS */
+	border-top: 1px solid #FFF;
+}
+
+.accordionMenu a {
+	color: #000;
+	display: block;
+	text-decoration: none;
+}
+
+/* ===== LEVEL 1 ===== */
+
+.accordionMenu > ul {
+	margin: 0px 0px 0px 5px;
+	padding: 0;
+	width: 200px;
+}
+
+.accordionMenu > ul > li > a {
+	/* this is the button */
+	color: black;
+	background: #CCC;
+    /* background-image: url(/images/pix/pix-bg-lite.jpg); */
+	font-weight: bold;
+	height: 30px;
+	line-height:30px;
+	padding-left: 10px;
+}
+
+.accordionMenu > ul > li > a:hover {
+	background: #EDD;
+    /* background-image: url(/images/pix/pix-bg-sm-bw.gif); */
+}
+
+
+.panelMenuButton .hamburger{
+    /* the tricks */
+	display: block;
+   	-webkit-transform: scaleX(1.75);
+   	-moz-transform: scaleX(1.75);
+   	-o-transform: caleX(1.75); 
+   	transform: scaleX(1.75);
+	writing-mode: vertical-lr;
+	transform: scaleX(1.75);
+    /* optional */
+    font-size: 8pt;
+    cursor: pointer;
+    font-weight: 900;
+    color: #CCC;
+}
+/* hamburger hover style */
+/* .accordionMenu .hamburger:hover {
+    color: #FFC75F;
+} */
+
+/* ===== LEVEL 2 ===== */
+
+.accordionMenu > ul > ul {
+	margin: 0px 0px 0px 20px;
+	padding: 0;
+	width: 180px;
+}
+
+.menuHide { 
+	animation: hide 0.25s linear;
+   	animation-fill-mode: forwards;
+}
+.menuShow { 
+	animation: show 0.25s linear;
+   	animation-fill-mode: forwards;
+}
+@keyframes hide {
+	0% { opacity: 1; display: inline-block; }
+	99% { display: inline-block; }
+	100% { opacity: 0;  display: none;}
+}
+@keyframes show {
+	0% { opacity: 0; display: none; }
+	1% { display: inline-block; }
+	100% { opacity: 1;  display: inline-block;}
+}
+
+
+.accordionMenu ul > ul > li:first-child {
+	/* ALL LIST ITEM LEVELS */
+	border-top: 0px;
+}
+
+.accordionMenu > ul > ul > li > a {
+	/* this is the button */
+	color: black;
+	background: #CCC;
+    /* background-image: url(/images/pix/pix-bg-lite.jpg); */
+	font-weight: bold;
+	height: 30px;
+	line-height:30px;
+}
+
+.accordionMenu > ul > ul > li > a:hover {
+	background: #EDD;
+    /* background-image: url(/images/pix/pix-bg-sm-bw.gif); */
+}