/***************************************************************************
 *                                common.css
 *                            ------------------
 *	 AUTHOR				  : Kevin K. Nelson
 *   EMAIL                : knelson@taoti.com
 *   COPYRIGHT            : (C) 2005-2007 Taoti Enterprises International, Inc.
 *                           -  ALL RIGHTS RESERVED
 *
 *   LAST UPDATED         : 2007-08-24
 *
 *   PURPOSE              : To provide a default template for CSS tag
 *                          definitions and consistent class names as well
 *                          as a consistent layout for where definitions go.
 *                          The order of definitions for this CSS page are:
 *                            * tag definitions
 *                            * table classes (e.g. classes for <td> or <tr>)
 *                            * text classes (e.g. classes for <p>)
 *                            * anchor tag classes (for various link classes)
 *
 ***************************************************************************/

/*******************************************************************
TAG DEFINITIONS
   - only change colors, font-family, and size as needed.  Try not
     to write too many tag definitions beyond what's here
*******************************************************************/
html { width:100%; height:100%; }
body { width:100%; height:100%; margin:0px 0px 0px 0px; background-color:white; color:black; }

/* SPECIFIC, BUT ALL TEMPLATES */
td				 { vertical-align:top; }
#left_column     { padding:0px 0px 0px 0px; }
#right_column    { padding:0px 0px 0px 0px; }
#left_column td  { padding:0px 0px 0px 0px; }
#banner_top td   { padding:0px 0px 0px 0px; }

form { margin:0px 0px 0px 0px; }
fieldset { display:block; margin-top:0px; margin-bottom:12px; }
legend   { font-size:16px; font-weight:bold; color:black; }

/* DEFAULT FONT SETTING */
table, td, div, p, blockquote, h1, h2, h3, h4, h5, h6, ul, ol {
	margin-top:			0px;
	font-family:		Verdana, Arial, Helvetica, sans-serif;
	color:				inherit;
}
textarea, input, select {
	font-family:		Verdana, Arial, Helvetica, sans-serif;
	font-size:			12px;
}

/* FONT SIZES & BOTTOM MARGINS */
h1 { font-size:24px;margin-bottom:24px; }
h2 { font-size:20px;margin-bottom:10px; }
h3 { font-size:16px;margin-bottom:16px; }
h4 { font-size:14px;margin-bottom:14px; }
td, p, blockquote, ul, ol, h5, h6 { font-size:12px;margin-bottom:12px; }
div { font-size:12px; }

/* ALIGNMENT */
p, blockquote { text-align:left; }

/* SET BORDER-DEFAULT COLOR/STYLE, BUT SET 0px SIZE */
img, table, tr, td, form, div, p, blockquote, h1, h2, h3, h4, h5, h6, ul, ol {
	border-color:		#DFDFDF;
	border-style:		solid;
	border-width:		0px 0px 0px 0px;
}
/*******************************************************************
TABLE CLASSES
   - these are some default classes that many of our applications
     use.  If this is a static site with no applications, then
	 removing these would probably not be harmful.  Otherwise,
	 change colors, margins, etc., as needed when they do not
	 have the desired look.  If I might work on the site, there
	 is a good chance that I will want these classes, though.
*******************************************************************/
.center_table {
	margin-left:		auto;
	margin-right:		auto;
}
.title_cell {
	font-weight:		bold;
	font-size:			14px;
	padding:			5px 5px 5px 5px;
    white-space:		nowrap;
}
.content_cell {
	padding:			5px 5px 5px 5px;
}
.left_form_cell  { padding:7px 5px 2px 5px; border-width:0px 0px 1px 0px; text-align:left; font-weight:bold; }
.right_form_cell { padding:7px 5px 2px 5px; border-width:0px 0px 1px 0px; text-align:right; }

.row1 { background-color:#FFFFFF; }
.row2 { background-color:#EDEDED; }
.row_selected { background-color: #FFFF99; }

.top    { vertical-align: top; }
.middle { vertical-align: middle; }
.bottom { vertical-align: bottom; }

tr.rollover { cursor:pointer; }

/*******************************************************************
BLOCK CLASSES
   - classes for block-level tags
*******************************************************************/
.center_block {
	display:			block;
	margin-left:		auto;
	margin-right:		auto;
}
.title {
	margin:		10px 0px;
	font-size:			20px;
	font-weight:		bold;
}
.heading {
	margin: 			0px 0px 0px 0px; 
	font-size:			14px;
	font-weight:		bold;
}

.bordered    { border-width:1px 1px 1px 1px; }
.noborder    { border-width:0px 0px 0px 0px; }
.line_top    { border-top-width:1px; }
.line_right  { border-right-width:1px; }
.line_bottom { border-bottom-width:1px; }
.line_left   { border-left-width:1px; }

.left    { text-align: 	left; }
.center  { text-align: 	center; }
.right   { text-align: 	right; }
.justify { text-align: 	justify; }

.block      { display:	block; }
.no_display { display:	none; }

.no_margin  { margin: 0px 0px 0px 0px; }

.pad_sm { padding: 5px 5px 5px 5px; }
.pad_md { padding: 10px 10px 10px 10px; }
.pad_lg { padding: 15px 15px 15px 15px; }
/*******************************************************************
FORM CLASSES
   - so that, by default, forms are of the right size, etc.
*******************************************************************/
input.default    { width:200px; }
select.default   { width:200px; }
textarea.default { width:200px; height:80px; }
textarea.full    { display:block; width:99%; margin-left:auto; margin-right:auto; height:250px; }

/*******************************************************************
OUR PHP LIBRARY'S status_message() CLASS DEFINITIONS
   - like the table classes, these are specific to the application,
     and can be removed for static sites.
*******************************************************************/
.status_container {
	margin:				20px 10px 20px 10px;
	padding:			3px 5px 3px 5px;
}
.status_title {
	font-size:			16px;
	font-weight:		bold;
	border-style:		solid;
	border-width:		0px 0px 1px 0px;
	border-color:		black;
}
.status_message {
	font-size:			12px;
}

/*******************************************************************
TEXT CLASSES
   - I want these to be our default text definitions across the 
     board...so that when any of us are on a site, we can simply
	 type "class='small'" or "class='right'"into a tag and know that 
	 it's going to work
*******************************************************************/
.small_descr { font-size:10px;   font-weight:bold; }
.required    { font-size:10px;   color:Red; }
.error       { font-weight:bold; color:Red; }

.xsmall { font-size:	9px; }
.small  { font-size: 	10px; }
.normal { font-size: 	12px; }
.medium { font-size:	14px; }
.large  { font-size: 	16px; }
.xlarge { font-size:    20px; }
.huge   { font-size: 	24px; }

.bold      { font-weight: bold; }
.no_bold   { font-weight: normal; }
.italic    { font-style:  italic; }
.no_italic { font-style:  normal; }

.small_caps { font-variant: small-caps; }

.red   { color: #CC0000; }
.navy  { color: navy; }
.black { color: black; }
.white { color: white; }

/*******************************************************************
ANCHOR CLASSES
   - some generic anchor classes
*******************************************************************/
a.no_underline:link, a.no_underline:visited, a.no_underline:hover, a.no_underline:active {
	text-decoration: none;
}
a.pub_link:link, a.pub_link:visited {
	display:block; text-decoration:none; background-color:inherit;
}
a.pub_link:hover, a.pub_link:active {
	display:block; text-decoration:none; background-color:#FFFFCC;
}
a.icon_link { display:block;float:right;font-weight:bold;line-height:16px;height:20px;text-decoration:none; }
a.icon_link img { display:block;float:left;margin:2px 4px; }
a.icon_link span { padding:2px 4px 2px 0px;font-size:14px; }

/*******************************************************************
LIST DEFINITIONS
   - JB's List Definitions, for an LI without bullets & indenting TDs 
*******************************************************************/
.main ul {
	list-style: none;
	padding: 0px 0px 0px 0px;
	margin: 20;
	}

.main li {
  	margin: 0;
  	list-style: none;
	padding: 0px 0px 0px 10px;
  	line-height: 1.5em;
	}

.main a:link {text-decoration: none;}
.main a:visited {text-decoration: none;}
.main a:hover {text-decoration: underline;}
.main a:active {text-decoration: none;}

/*******************************************************************
Subtle Separation
   - JB's Dotted Div 
*******************************************************************/
.featured {clear: both; border: thin dotted black; padding: 3px; width: 97%;}
.featured_m_l {margin:0px 5px 5px 0px;border: thin dotted black; padding: 0px 3px 3px 3px; width: 69%;float:left}
.featured_s {margin:10px 0px 10px 10px;border: thin dotted black; padding: 0px 3px 3px 3px; width: 33%;float:right}
/*******************************************************************
Video Overlay
   - JB 
*******************************************************************/
#video_box {
position:relative;
display:block;
}
img.play {
position: absolute;
bottom: 5px;
left: 5px;
} 
.right_float {
float:right;
margin: 0px 0px 10px 10px; }

/**************************************************************************
 * PAGING CLASSES TO CREATE GENERIC PAGER FOR TEMPLATES WHERE NOT DEFINED *
 *************************************************************************/
.tpageblock { border-width:0px 0px 1px 0px;border-color:navy;border-style:dotted;padding-bottom:6px;margin-bottom:6px; }
.bpageblock { border-width:1px 0px 0px 0px;border-color:navy;border-style:dotted;padding-top:6px;margin-top:6px; }

.paging     { cursor:default;text-align:right; }

.paging a, .paging .current_page {
    display:            inline;
    border:             1px solid black;
    font-size:          12px;
    font-weight:        bold;
    padding:            2px 5px 2px 5px;
    height:             20px;
    line-height:        16px;
	margin-right:3px;
}
.paging a:link, .paging a:visited {
    text-decoration:    none; 
    color:              navy;
    background-color:   white;
}
.paging a:hover, .paging a:active{
    text-decoration:    none; 
    color:              black;
    background-color:   #FFFFCC;
}
.paging .current_page {
    background-color:   #CCCCCC;
    color:              black;
    cursor:             default;
}