source: trunk/css/utilities.inc.css @ 23

/**
 * utilities.css 
 * code by strangecode :: www.strangecode.com :: this document contains copyrighted information
 *
 * CSS used often in Strangecode applications. Do not arbitrarily
 * edit this code! This file is used between many sites and modifying it may result
 * in something breaking. Instead, overwrite these values in a specific site by
 * adding new definitions to a screen.css file.
 */

/* BEAU: I format my CSS using BBEdit's Markup->CSS->Format command. Would you like to use that as well so our code looks consistant? */
/*_____________________ FORMS ____________________*/
input, select, input.submit
{
    color: #000;
    margin: 0 0.5em 0 0;
    padding: 0;
}

/* BEAU: I changed this to input.submit, since it is an <input> tag. Is that correct? It definition doesn't seem to do anything regardless of how it's set. */
input.submit
{
    font-weight: bold;
    margin: 0.5em;
}

input
{
    margin: 0.5em 0.5em 0 0;
}

form table select, form table input
{
    margin-top: 0;
}

/* 
BEAU: I want more text box widths! I find need for boxes that fit 5em, 10em, 20em, and 40em widths. These should be in EMs so text can resize and still fit. Since it is useful to apply a width to other form elements to have them similar sizes (not always a text box, such as <select multiple>) I propose renaming them to "input.tiny", "input.small", "input.medium", "input.large", and "input.half" (not sure how you would do "half" in EMs however.
*/

input.tiny, textarea.tiny, select.tiny
{
    width: 4.75em;
}

input.small, textarea.small, select.small
{
    width: 10em;
}

input.medium, textarea.medium, select.medium
{
    width: 20.5em;
}

input.large, textarea.large, select.large
{
    width: 41.5em;
}

textarea.twolines, select.twolines
{
    height: 3em;
}

textarea.short, select.short
{
    height: 8em;
}

textarea.tall, select.tall
{
    height: 25em;
}

textarea.fullscreen, select.fullscreen
{
    height: 40em;
}

/* BEAU: Should be in EMs? Also, sometimes it is nice to have the select menu be only the width as its contents. How to override this? */
select.small
{
    width: 10em;
}

select.medium
{
    width: 20.5em;
}

form label
{
    padding: 7px 0px 0px 0px;
    font-weight: bold;
}

/* BEAU: We need a .formtext substitute...something like a label tag but not bold! */
/*_____________________ COMMANDS ____________________*/
#commandbox
{
    padding: 5px;
    margin: 0 0 .5em 0;
    border: black 1px dotted;
    background-color: #DDD;
}

.commanditem
{
    margin: 0 10px 0 0;
    white-space: nowrap;
}

.commandtext
{
    padding-right: 1em;
}

.command_left
{
    float: left;
    white-space: nowrap;
}

.command_right
{
    position: relative;
    visibility: visible;
    white-space: nowrap;
    float: right;
}

/*_____________________ UTILITIES ____________________*/
.nowrap
{
    white-space: nowrap;
}

.clearboth
{
    clear: both;
}

.center
{
    text-align: center;
}

.right
{
    text-align: right;
}

.padright
{
    padding: 0 10px 0 0;
}

.padleft
{
    padding: 0 0 0 10px;
}

.help
{
    color: #666;
    font-weight: normal;
}

.monospaced
{
    font-family: monaco, courier;
    font-weight: normal;
}