/* demo-jsnote elements which contain script-support messages */
span.demo-jsnote
{
	display:block;
	margin-top:0.5em;
}



/* universal demo-image rules 
   [in addition to what's inherited from the prefs stylsheet] */
.demo-image, .demo-image img
{
	width:180px;
	height:108px;
}
.demo-image 
{
	padding:6px;
}




/* omni-random demo image [ditto] */
#demo-omnirandom
{
	display:block;
	float:right;
	/*
	margin:0 0 1.5em 1.5em;
	*/
	margin:0 0 1em 2em;
	text-decoration:none;
	color:inherit;
}
#demo-omnirandom[href]
{
	height:auto;
}
#demo-omnirandom[href]:hover, #demo-omnirandom[href]:focus
{
	-moz-outline-radius:4px;
	outline-radius:4px;
}
#demo-omnirandom .caption
{
	display:block;
	padding:0.25em 0.4em 0 0.4em;
	font:inherit;
	font-size:0.85em;
	line-height:1.2;
	text-decoration:none;
	text-align:center;
	background:transparent !important;
}




/* live examples, in portrait or landscape orientation (depending on space) 
   which are used in the user-manual in several places 
   the widths are set so we can do swap-change examples 
   with an intermediate shim image that's only 2x2 or something */
.portrait-example, .portrait-example img
{
	width:60px;
	height:100px;
}

.landscape-example, .landscape-example img
{
	width:120px;
	height:70px;
}
.landscape-example
{
	/* use whatever pref border-color it inherits 
	   (which will be the link color since it's a link) */ 
	border:1px solid; 
	padding:1px;
}






/* main superform demo image */
.superform-image
{
	display:block;
	margin:0 auto 2em auto;
}
@media all and (min-width:770px)
{
	.superform-image
	{
		float:left;
		clear:none;
		margin:0.5em 1em 2em 0;
	}
}






/* main superform demo form */ 
#content .demo-form
{
	font-size:0.75em; /* equalize font-size with image so that margin-top is the same */
	margin:1em 0 1em 0;
}
@media all and (min-width:770px)
{
	#content .demo-form
	{
		float:right;
		clear:none;
		width:54%;
		margin:0.5em 0 2em 0;
	}
}

#content .demo-form fieldset
{
	font-size:1.35em; /* compensate for font-size equalization on the form */
	border:none;
	padding:0.55em 0.45em 0.4em 0.6em;
	margin:0;
}
#content .demo-form fieldset.buttons
{
	padding-top:0.25em
}

/* groups and labels */
form.demo-form fieldset div, form.demo-form span.checkbox
{
	float:left;
	clear:both;
	width:100%;
	margin:0 0 0.5em 0;
}

form.demo-form fieldset div label, form.demo-form span.checkbox label
{
	width:8em;
	font-size:0.8em;
	float:left;
	position:relative;
	top:0.2em;
	padding:0;
	letter-spacing:-0.05em;
	text-indent:0.1em;
	background:transparent;
}

form.demo-form fieldset div.checkbox label, form.demo-form span.checkbox label
{
	top:-0.23em;
	display:inline;
	width:auto;
	line-height:1.15;
	font-weight:normal;
}
form.demo-form fieldset div#imgform-select-plusfade
{
	margin:0.1em 0 0.2em 0;
}
form.demo-form fieldset div#imgform-select-reverse
{
	margin:0 0 0.4em 0;
}

/* textboxes and selects */
form.demo-form input.text, form.demo-form select
{
	font-size:0.75em;
	padding:0.15em;
}
form.demo-form input.text
{
	width:15%;
}
form.demo-form select
{
	width:55%;
}

/* bars-field and type-selector 
   [with display toggle and menu-width adjustment 
    when appname class == "bars"] */
form.demo-form input#imgform-bars
{
	width:10%;
	margin-right:1.5%;
	display:none;
	float:left;
}
form.demo-form fieldset.bars input#imgform-bars
{
	display:block;
	position:relative;
	top:1px;
	margin-bottom:-1px;
}
form.demo-form fieldset.bars select#imgform-type
{
	width:42%;
}

/* checkboxes */
form.demo-form input.checkbox
{
	float:left;
	font-size:0.8em;
	margin:0 0.4em 0 8em;
}



/* disabled labels, inputs, selects and containing groups */
form.demo-form fieldset div.disabled label, form.demo-form label.disabled, 
form.demo-form fieldset div.disabled select, form.demo-form select.disabled, 
form.demo-form fieldset div.disabled input, form.demo-form input.disabled
{
	opacity:0.5;
	filter:alpha(opacity=60);
}





/* main superform demo code example output 
   nb. some of the rules for the h3 label are in pref-specific stylesheets
   [see "pre, #content #demo-wrapper, div.superform-codeoutput h3"] */
div.superform-codeoutput
{
	clear:both;
	margin:0 0 3em 0;
	position:relative;
}

div.superform-codeoutput h3
{
	position:absolute;
	z-index:200;
	font:normal normal normal 0.75em/1 arial,sans-serif;
	padding:0.3em 0.6em 0.25em 0.4em;
	margin:-1.2em 0 0 -0.4em;
	border-width:3px;
	border-style:double;
}

div.superform-codeoutput pre
{
	z-index:100;
}

/* variations for "nocolor" and "nocss" layouts */
body.design-nocolor #content div.superform-codeoutput h3, 
body.design-nocss #content div.superform-codeoutput h3 
{
	position:static;
	float:left;
	margin:-2em 0 3px 0;
}
body.design-nocolor #content div.superform-codeoutput pre, 
body.design-nocss #content div.superform-codeoutput pre 
{
	clear:both;
	border-width:3px;
	border-style:double;
	padding:0.8em;
}







/* customized script compiler/download form (and intro in the content column) */
#content .compiler-intro
{
	clear:none;
	margin:0 0 1em 0;
	width:auto;
	float:none;
}

#content .compiler-form
{
	margin:0 0 3em 0;
	width:auto;
	float:none;
}
@media all and (min-width:770px)
{
	#content .compiler-intro
	{
		float:left;
		width:55%;
		margin:0 0.5em 3em 0;
	}
	#content .compiler-form
	{
		float:right;
		clear:none;
		width:35%;
		margin:0 1.1em 3em 0;
	}
}
#column .compiler-form
{
	margin:0.8em 0.5em 0.5em 0.1em;
}

.compiler-form fieldset
{
	margin:0;
	border:none;
}
.compiler-form fieldset.buttons
{
	padding-top:0.65em;
}


.compiler-form label
{
	display:block;
	float:left;
	padding:0;
	width:48%;
	background:transparent;
	
	font-weight:normal;
}
.compiler-form label.fade
{
	width:auto;
	padding-bottom:2px;
}
.compiler-form label.grow
{
	clear:left;
}
#content .compiler-form label
{
}
#content .compiler-form label.fade
{
	width:auto;
}