/**
 * Simple core styles to expand upon (inline lists, etc).
 * 
 * This will include some simple layout wants/needs such as a generic tabset,
 * inline lists, form field wrapping, etc. These are just core layouts, if you
 * have a specific implementation, I recommend it be placed into interface.css
 * and extend these declarations.
 * 
 * @author philip_lee
 */

/*
 * Inline lists
 * 
 * Attaching to an unordered list will float the list items from left to right.
 * This will not float the list itself, and thus will need to be cleared if
 * necessary.
 */
ul.inline li {
	float: left;
	margin: 0 .3em;
	list-style: none;
}

ul.inlineActivity li {
	margin: 0 .3em;
	list-style: none;
}

/*
 * General form field wrappers
 * 
 * Utilizing this structure for wrapping form fields, we have the flexibility
 * of separating the labels and the fields for which they attach (rather than
 * being forced to wrap the field in the label tag), and gives us the desired
 * implementation of form field labels sitting atop the field itself.
 * 
 * usage in raw xHTML:
 * <div class="form-entry">
 *     <label for="username">Username</label>
 *     <input type="text" id="username" />
 * </div>
 * 
 * usage in TML:
 * <div class="form-entry">
 *     <t:label for="username" />
 *     <t:input t:id="username" />
 * </div>
 * 
 * TODO radio fields and checkbox field examples.
 */
div.form-entry {
    float:left;
    padding: 0 1.2em .5em 0
}
div.form-entry input,
div.form-entry select {
	display: block;
	font-size: 77%;
	padding: .3em;
}
div.form-entry input {
    width:10.769em
}
div.form-entry-radio input {
    display: inline;
	width: auto;
	/*
	 * Gives the appearance of being "middle" aligned, so I won't question the
	 * name of the declaration :)
	 */
	vertical-align: top;
	margin-right: 3px;
}
div.form-date-entry input {
    width: 5em
}


/**
 * Stylistic Form-field float clearing.
 * 
 * Being that form fields are floated side-by-side, this can be used as a
 * convenience for float clearing. Simply place this before the field you want
 * to be placed on the next line.
 * 
 * usage in raw xHTML:
 * <div class="form-entry">[...]</div>
 * <div class="form-clear"> </div>
 * <div class="form-entry">[...]</div>
 *  
 * usage in TML:
 * <div class="form-entry">[...]</div>
 * <div class="form-clear" />
 * <div class="form-entry">[...]</div>
 */
div.form-clear {
	clear: left;
}

/*
 * Basic table structure.
 * 
 * This will globally style all tables, and provide some ample padding, etc.
 * There is nothing needed to apply this to your tables.
 */
table tbody th {
	padding-right:1em;
}

/*
 * Basic tabset structure.
 * 
 * This will generate a simple tabset structure where the tabs sit atop a
 * content div.
 * 
 * usage:
 * <ul class="tabset">
 *     <li><a href="...">Not selected tab</a></li>
 *     <li class="tabset-selected"><a href="...">I'm SELECTED!! :)</a></li>
 *     <li><a href="...">another tab</a></li>
 * </ul>
 * <div class="tabset-content">
 *     <p>I am the content that is showing!</p>
 * </div>
 */
ul.tabset {
	border-bottom: 1px solid grey;
	/*
	 * TODO real color (app-specific base color)
	 */
	clear: both;
	 /*
	  * We may not want to clear this. This may have to be re-evaluated.
	  */
	width: 100%;
	float:left;
	/*
	 * Unset the standard bottom margin for ul's.
	 */
	margin-bottom: 0;
}

ul.tabsetActivity {
	/*
	 * TODO real color (app-specific base color)
	 */
	 /*
	  * We may not want to clear this. This may have to be re-evaluated.
	  */
	width: 100%;
	display:inline;
	/*
	 * Unset the standard bottom margin for ul's.
	 */
	margin-bottom: 0;
}

ul.tabsetActivity li {
	padding: .25em;
	/*border: 1px solid grey;
	 * 
	 */
	/*
	 * TODO real color (app-specific base color)
	 */
	/*margin: .5em 0 -1px .5em
	 * 
	 */
}
ul.tabsetActivity li.tabset-selected {
	background: #fff;
	border: 1px solid grey;
	padding-bottom:.1em;
	border-bottom: 1px solid #fff
}
ul.tabsetActivity li a {
	text-decoration: none;
}
div.tabsetActivity-content {
	background: #fff;
	border:1px solid grey;
	margin-right:.1em;
}


ul.tabset li {
	padding: .25em;
	border: 1px solid grey;
	/*
	 * TODO real color (app-specific base color)
	 */
	margin: .5em 0 -1px .5em
}
ul.tabset li.tabset-selected {
	border-bottom: 1px solid #fff
}
ul.tabset li a {
	text-decoration: none;
}
div.tabset-content {
	background: #fff;
	clear:both;
}
/**
 * Fine Print font-sizing.
 */
.finePrint {
	font-size: 68%
}

/* Added for defect #167 - Senthil */
#language {
    width:115px;
}