%[if edit]%
<div class="badgerInstructions">
<p>
<h1>The Badger Stack</h1>
<h2>Beautiful badges made easier...</h1>
The aim of this stack is to provide experienced RapidWeaver users with the ability to create beautiful pure-CSS badges and buttons to display on your website. Pure CSS brings the advantages of faster loading, a broad range of customisable options, responsive support and pin-sharp results on retina display devices. The Badger stack provides a wealth of different settings, which in turn gives you the tools necessary to build beautiful bright badges or buttons for modern websites. Once you have created a new badge design, you can copy-and-paste it into other pages or embed it into non-Stack pages using the PlusKit @import function. Google-embedded font faces enhance badges even further. This stack merges in the functionality from a couple of other popular Stacks, like the Sticky stack and Font Stack.
</p>

<p>The Badger stack may look a bit daunting at first glance and the choice of customisable options may appear bewildering. This stack has over 80 settings! However the settings have been sorted and split-down into different categories to make things easier. Some settings are only displayed when others have been enabled. Each setting is also tool-tipped, so you get information about particular settings when you roll your mouse over them. There are also some details below about what each group of settings does. If you don't change any settings and preview your page straight away, you'll see a nice basic blue badge displayed at the top right, using the default styles. So you can use this as the foundation to start customising the Badger stack, using the provided settings.</p>

<p><strong>Badger Basic Settings</strong>
<br />A link can be applied to the stack, which will open a URL if the badge is clicked or tapped. Toggle consolidation and / or these instructions on and off in the basic settings. Because this stack uses cutting-edge CSS technologies, some of the effects like gradients, rounded corners and rotation do not work in IE7 or IE8; therefore the option is provided for you to completely hide the stack in these older web browsers. The 'Edit Padding' setting allows you to increase the amount of padding around the stack exclusively in Stacks edit mode, which can be useful for editing larger badges or badges that have steeper rotation applied.</p>

<p><strong>Badger Placement Settings</strong>
<br />Control where the Badger stack is located in your page using these settings. Make your choice from the placement menu. To append Badger stack onto a division, type <code>&lt;div id='badgerStack'>&lt;/div></code> somewhere in your page (like the site title, an ExtraContent container or a sidebar). The 'badgerStack' ID then becomes the anchor point, and you can move the badge around using the absolute positioning controls. The other options to append the Badger stack relate to placement on the screen. Use the number input boxes to apply spacing around the badge, or negative values to pull it off the edge of a container. A word of warning if you are trying to position a Badger stack within other stacks (like an ExtraContent stack); the Stacks plugin applies <code>overflow:hidden</code> on all stack elements, so this may give the illusion of your Badger stack getting cropped, rather than hanging off the edge of a container.</p>

<p><strong>Badger Sizing Settings</strong>
<br />This group of settings deals with the physical width and height of your Badger stack. Padding and margins can be applied if required. The breakpoint setting is used to hide the Badger stack on screen widths below the figure you enter in the box.</p>

<p><strong>Badger Border Settings</strong>
<br />As the name implies, these settings adjust the border radius (rounded corners) applied on your Badger stack. The badger stack can have up to 3 different solid borders rendered around it, and here you can customise the thickness and colour of each border. If no borders are required, simply set the thickness setting to 0px. Borders may not be required if you plan to use your own graphics as the badge background.</p>

<p><strong>Badger Box Shadow</strong>
<br />These settings apply a CSS3 / RGBa box shadow around the badge. RGBa box shadows are only supported in newer web browsers, and will be ignored in older browsers (like IE7 - IE9). If you are not sure what RGBa Box Shadows are or you want to see some examples, search online. If no shadow effect is required on your Badger stack, simply set all the values to 0 to nullify the box shadow.</p>

<p><strong>Badger Special Effects</strong>
<br />Badger provides the option to have the badge fade-into view when the page has finished loading. You can specify the delay before the transition starts and the the length of the transition itself. CSS transitions take effect on aspects like borders, text and backgrounds (except gradients) when you rollover a Badger stack with your mouse. Browser developers are still in the process of adding support for CSS transitional effects on CSS gradients, as of writing this.</p>

<p><strong>Badger Font Style Settings</strong>
<br />This stack uses embedded font faces from Google Web Fonts. Setup of embedded web fonts is identical to the free Font Stack (available to download from the Stacks4Stacks website). So if you're not sure how to use the embedded fonts, be sure to try the Font Stack first and read the instructions provided. In the Badger stack, you can customise several aspects of the font styling.</p>

<p><strong>Badger Background Settings</strong>
<br />The final group of settings allow you to customise that background of the Badger stack. Choose a solid (flat) colour or one of the gradient designs. Alternatively use an image stored on your computer or an image stored in an online warehouse. The colour settings are provided in pairs; covering both static and hovered buttons. CSS gradients are not supported in older web browsers, and degrade back to the first colour. When using image backgrounds (especially PNG images) it may be necessary to disable rounded corners and borders. Images are rendered as CSS backgrounds.</p>

<p>The preview shown below is a basic mockup-up of how your Badger stack will look. The width setting has been ignored. Double-click the text shown to change it.</p>
</div>
%[endif]%

<div id="badger%id%" class="badger">
	<div class="border1">
		<div class="border2">
			<div class="border3">
				<div id="badgerInner%id%" class="badgerInner">%text%</div>
			</div>
		</div>
	</div>
	
	%[if %("%id=link_on%" == "block")% ]%
	<div id="badgerLink%id%">%id=link_url%</a></div>
	%[endif]%
</div>

%[if %("%id=ie_support%" == "hide")% ]%
<!--[if lte IE 8]>
<style type="text/css">
	#badger%id% {
		display: none !important;
	}
</style>
<![endif]-->
%[endif]%