source: branches/1.1dev/css/utilities.inc.css @ 308

/**
 * 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 4px 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: 1px;
}

/* 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
{
    width: 250px;
    margin: 4px 4px 0 0;
}

input
{
    margin: 4px 4px 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.textwide, textarea.textwide
{
    width: 500px;
}

input.text, textarea.text
{
    width: 250px;
}

input.textsmall, textarea.textsmall
{
    width: 150px;
}

input.texthalf, textarea.texthalf
{
    width: 121px;
    /*  125 minus 4 to account for the 4px padding on the right  */
}

/*textarea
{
    height: 8em;
}*/

/* BEAU: Again, here, "small", "medium", "large" denominations make sense. But how to diferentiate width from height? */
textarea.twoliner
{
    height: 3em;
}

textarea.paragraphs
{
    height: 20em;
}

textarea.tall
{
    height: 40em;
}

form label
{
    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: #999;
    font-weight: normal;
}

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

.normal { font-weight: normal; }