/*
Personas without Personas

Nope, it's not dividing by zero. It's possible, and this style opens you, the user up to new and exciting possibilities when it comes to using personas you find online, or even, adding your own special touch to firefox with an image on the left or right side of your browser.

This was initially made because with Glasser, there is no other way to add your own image. If you do have Windows Vista/7 and use |2eason's modified overlay.xul and dwm-overlay.js files on SixxGate's thread about it on mozillazine.org, and want something similar to Personas, you can use this style to achieve the exact same effect.

!!!WARNING! THE GUIDE BELOW TEACHES YOU HOW TO TAKE PERSONAS FROM THE PERSONAS WEBSITE. ONLY DO THIS IF YOU HAVE NO OTHER OPTION, AND USE PERSONAS IF YOUR BROWSER SETTINGS ALLOW YOU TO. ELSE, TAKE ANY PERSONA FOR PERSONAL USE ONLY, AND DO NOT RE-POST THEM ON THE PERSONAS WEBSITE OR ELSEWHERE AND/OR CREDIT YOURSELF FOR CREATING THEM. ELSE, USE AN IMAGE OF YOUR CHOICE ON YOUR MACHINE. READ THE PERSONAS TERMS OF SERVICE FOR MORE INFORMATION.

...Wait, you're asking where to find personas, right? Well, you can make your own, or go to getpersonas-cdn.mozilla.net to find them. Since you do not have the extension required to "Wear" them, you will have to do some snooping around.

When you find a persona you want on their website, right-click and choose to view the page's source. From there, memorize the last digits in the address bar. This is important as you can use this number when using the find function in the source to locate the address of the image you wish to use. The URL for the persona in use in this style is http://www.getpersonas.com/en-US/persona/64323

Using the example given, in the source code window press <Ctrl>+F or go into Edit > Find. From there, using the instruction I provided earlier, the number you would need to type in would be 64323.

Press enter a couple times and you will eventually find the image location in PHP. The dead giveaway is the back slashes before the forward slashaes. You'll also see some junk before and after it. The main thing you are looking for is "http:\/\/..." as well as an image name, it's extension and a whole bunch of numbers after it... like this: http:\/\/getpersonas-cdn.mozilla.net\/static\/2\/3\/64323\/header2.png?1260925626

Copy up to the file extension (.png in this case) and paste it in a copy of your favorite text processor. Go into it's text replacement option (Find and Replace, or <Ctrl>+H for your keyboard junkies) and replace "\/" with "/". After that, copy, close the text editor (unless you're going to be changing more addresses) and paste it in the address bar.

Just like that, you have given yourself the full-sized header persona to copy! As of this writing, Personas only does the header (top toolbars), not footers (AKA the status and find bars)

IMPORTANT, The style was made on an 1024x8768 resolution with a fresh profile. If you remove, add or modify toolbars, or have a different width screen, you will have to edit the background position so any image you use looks seamless and to the edge of the screen when applied.

I will repeat: 

The style has been assembled to apply the image and text settings to all toolbars, then below these settings, the positioning of all the images. Yes, images, as the code below uses the same image multiple times. X/Y settings needed to be used, as you cannot say, for example, 500px right, or left 480px. Pixel values and words do not mix. I am sorry, this limitation is not of my choice, rather, a limitation of how CSS is interpreted. Tweak to fit, and remove anything if necessary. Just be sure to remove both the toolbar settings you don't need on the top and the corresponding image position block beneath that goes with it.

Toolbar you need not here? Install DOM Inspector, press <Ctrl>+<Shift>+I to access the DOMi window and navigate to chrome://browser/content/browser.xul. Use the Fine a node... button and just click on stuff until you find the class or ID you need, then add it in the code.

TO DO:
Figure out how to add multiple user-made toolbars
*/

#toolbar-menubar, /*Menu toolbar*/
#nav-bar, /*Nagivation and search*/
toolbar[id^="__customToolbar"], /*Custom toolbars, limit 1 please. Also, add your own settings using the below as a template.*/
#PersonalToolbar, /*Bookmarks*/
.tabbrowser-tabs /*Tab bar*/
{
/*Required selectors. Do not modify*/
-moz-appearance: none !important;
border: none !important;
/*Selectors you can modify*/
background-image: url(http://getpersonas-cdn.mozilla.net/static/2/3/64323/header2.png) !important; /*Image location. Find and replace if you wish.*/
color: white !important;
}

/*Below are the position settings for the persona. Modify as necessary

QUICK TIP: Find the setting for one toolbar, then copy the entire bottom section into your text processor and use it's replace function to quickly replace all the X values for the image.
*/

#toolbar-menubar
{
background-position: -1976px -0px !important;
background-repeat: no-repeat !important;
}

#nav-bar
{
background-position: -1976px -19px !important;
background-repeat: no-repeat !important;
}

#PersonalToolbar
{
background-position: -1976px -53px !important;
background-repeat: no-repeat !important;
}

.tabbrowser-tabs
{
background-position: -1976px -79px !important;
background-repeat: no-repeat !important;
background-color: red !important;
}

/*Toolbar text color settings*/

menubar > menu,
#nav-bar > toolbarbutton,
#bookmarksBarContent > toolbarbutton,
toolbar[id^="__customToolbar"]
{
color: white !important;
text-shadow: 0px 0px 6px black, 0px 0px 6px black, 0px 0px 6px black !important;
}

/*Tab text settings*/

.tabbrowser-tab
{
color: white !important;
text-shadow: 0px 0px 6px black, 0px 0px 6px black, 0px 0px 6px black !important;
}

/*Tab background settings*/
.tabbrowser-tab
{
background: transparent !important;
background-image: url(chrome://browser/skin/tabbrowser/tab-bkgnd.png) !important;
}

.tabbrowser-tab:hover
{
background-image: url(chrome://browser/skin/tabbrowser/tab-hover-bkgnd.png) !important;
}

.tabbrowser-tabs [selected="true"]
{
background-image: url(chrome://browser/skin/tabbrowser/tab-active-bkgnd.png) !important;
}

#urlbar,
.searchbar-textbox
{
-moz-appearance: none !important;
background-color: rgba(255,255,255,0.25) !important;
border: none !important;
color: black !important;
text-shadow: 0px 0px 6px white, 0px 0px 6px white, 0px 0px 6px white !important;
}