/*
	common.css
	----------
	defines rules for common elements used throughout site

*/

html {min-width:900px;} /* fixes issues with responsive meta tags on non-responsive pages */

/* set default properties on body */
BODY { margin: 0; padding: 0; color: #333; font-size: 75%; background: #FFFFFF url(../images/bg.page.gif) repeat-y center top; text-align: center; }

/* set all headers to same size and give them a standard line-height to 
   make styling them easier
*/
H1, H2, H3, H4, H5, H6 { font-size: 100%; line-height: 1; }

/* default link styles */
A { text-decoration: none; }
A:hover { text-decoration: underline; }
H1 A, H2 A, H3 A, H4 A, TH A,
#MainColumn .ColumnWrapper .Column A { color: #333; }
#MainColumn .three-feature .Column A { color: #333; }

/* remove all HRs from display, as we just want them to appear when no CSS is around */
HR { display: none; }
HR.Separator { display: block; height: 0; border: none; border-top: 1px solid #CCC; margin: 1em 0; }

/* remove borders and margin/padding from FIELDSETs so we can use them as 'clear' wrappers */
FIELDSET { margin: 0; border: none; padding: 0; }

/* LEGENDs don't accept styles consistently across all browsers, 
   so let's move them off-page and just use them for structure.
   we'll probably use Hx elements for titling of FIELDSETs
*/
LEGEND { margin: 0; padding: 0; position: absolute; top: -9999px; left: -9999px; }
LEGEND { display: none; } /* NOTE: hiding legends by default as FF has problem WRT absolute positioning the element offscreen */

/* resetting font-size here to prevent widgets from being too large/small */
SELECT,
BUTTON,
INPUT.FileInput { font-size: 100%; }


/* -- BEGIN: tables ------------------------------------------------------- */

/* LayoutTables are used in places where CSS can't accomplish what we need it to. */
.LayoutTable { width: 100%; border: none; border-collapse: collapse; border-spacing: 0; clear: both; } /* TODO: add bottom margin? */
.LayoutTable TD { vertical-align: top; }

/* secondary class for LayoutTables. sometimes, we don't want 100% wide LayoutTables */
.NoStretch { width: auto; }

/* FormTables are used for LABEL/INPUT pairs, with LABELs in THs and INPUT/SELECT/other stuff in TDs */
.FormTable { width: 100%; border: none; border-collapse: collapse; border-spacing: 0; clear: both; } /* TODO: add bottom margin? */
.FormTable TD,
.FormTable TH { padding: 4px 0 !important; line-height: normal; }
.FormTable TH { font-weight: normal; text-align: right !important; padding: 8px .5em 3px 0 !important; vertical-align: top; }
.FormTable THEAD TH { text-align: left; border-bottom: 1px solid #081E3F; }
.FormTable TD .Inputs,
.FormTable TD .FieldValue { min-height: 14px; padding-top: 4px; }
.FormTable TD .FieldValue { font-weight: bold; }
.FormTable LABEL,
.FormTable .Label { }
.FormTable TR.required LABEL { font-weight: bold; }


/* DataTables hold tabular data. this is the detault style. we'll subclass this as necessary later on */
.DataTable { width: 100%; border: none; border-collapse: collapse; border-spacing: 0; clear: both; margin-bottom: 1em; }
.DataTable TH,
.DataTable TD { padding: .5em 5px; text-align: left; line-height: normal; }
.DataTable THEAD TH { border-bottom: 1px solid #BBB; vertical-align: bottom; background: #EEE; }
.DataTable TFOOT TD { border-top: 1px solid #BBB; vertical-align: bottom; font-weight: bold; }

/* --------------------------------------------------------- END: tables -- */


/* -- BEGIN: forms -------------------------------------------------------- */

/* wraps a single field and its label */
DIV.Field { margin: .25em 0 1em; }
DIV.Field P { margin-bottom: .25em; }

/* wraps "submit"-type buttons and cancel, etc. links */
DIV.FormAction { }
DIV.FormAction INPUT.Button { }

/* wraps things that control elements of the form. ex: select all/none (checkboxes) */
DIV.FormControls { }

INPUT.TextInput { font-size: 100%; } /* for standard text inputs */
INPUT.CheckboxInput { } /* for checkboxes */
INPUT.RadioInput { } /* for radio buttons */
SELECT.SelectInput { } /* for pulldown menus and multi-selects */
TEXTAREA.TextAreaInput { width: 99%; } /* width is not 100%, because TEXTAREAs have borders and padding by default */

/* used in conjuction w/ JS to show the title attribute inside the INPUT, or SELECT */
.ShowTitle { }

/* used in conjunction w/ .ShowTitle */
.Disabled { color: #999; }

/* denotes a required form field, used on the INPUT/SELECT element */
.Required { }

/* usualy goes around the asterisk to mark a field as required */
.RequiredMark { color: #C00; }

LABEL.Invisible { display: block; position: absolute; top: -10000px; left: -10000px; }

.HelpText { color: #999; font-style: italic; }

/* ---------------------------------------------------------- END: forms -- */


/* -- BEGIN: lists -------------------------------------------------------- */

/* for navigation that "pounds down". used on UL and maybe OL */
.PoundDownNav { margin: 0 0 1em; padding: 0; list-style: none; }
.PoundDownNav LI { margin: 0 0 .5em; padding: 0 0 0 12px; background: url(./images/icon.arrow.dn.gif) 0 .6em no-repeat; }

/* for radio buttons and checkboxes. used on UL and maybe OL */
.Inputs { margin: 0 0 1em; padding: 0; list-style: none; line-height: 1; }
.Inputs LI { margin: 0 0 .5em; padding: 0 0 0 2em; text-indent: -2em; }

/* displays a simple list as horizontal. used on UL and maybe OL */
.HorizList { margin: 0; padding: 0; list-style: none; }
.HorizList LI { display: inline; margin: 0; padding: 0 1em 0 0; }

/* a "standard" smaller bullet. used on UL and maybe OL */
.DotBullet { margin: 0 0 1em; padding: 0 0 0 10px; list-style: none; }
.DotBullet LI { padding: 0 0 0 8px; background: url(./images/icon.bullet.gif) 0 .6em no-repeat; }
* HTML .DotBullet LI { background-position: 0 .7em; } /* stupid IE6/win */
*:first-child + HTML .DotBullet LI { background-position: 0 .7em; } /* stupid IE7/win */

/* for when no bullet is desired */
.NoBullet { margin: 0 0 1em; padding: 0; list-style: none; }
.NoBullet LI { }

/* for a list of images */
.ImageList { margin: 0 0 1em 0; padding: 0; list-style: none; }
.ImageList LI { margin: 0 0 10px; padding: 0; }
.ImageList LI IMG { display: block; }

/* lists of links (DTs) with descriptions (DDs) */
DL.LinkList { }
DL.LinkList DT { }
DL.LinkList DD { margin-bottom: 1em; } 


/* ---------------------------------------------------------- END: lists -- */


/* images */
.Image,
.Picture { } /* content images */
.Photo { } /* photos */
.Logo { } /* logos */
.Icon, /* icon-like images */
.Button { vertical-align: middle; } /* button-like images */
.SortIndicator { } /* the up/down arrows in THs inside DataTables */

/* links */ 

UL.link-list LI { display:block; width: auto; margin-bottom: .92em; padding-left: 10px; background: url(/extension/ksgmain/design/ksgmain/images/bg.column-arrow-red.gif) no-repeat left .5em; zoom:1; }

.Link { cursor: pointer; }
.LinkAction { white-space: nowrap; font-weight: bold; }

.LinkMore { margin-top: .3em; font-size: 10px; font-weight: bold; line-height: 1.2em; text-transform: uppercase; }
.LinkMore A { }
.LinkMore SPAN { padding: 0 7px 0 0; background: url(../images/graphic.link-arrow-red.gif) no-repeat right bottom; }

.LinkBack { margin-bottom: 1.5em; line-height: 1; }
.LinkBack A { color: inherit;  text-decoration: none !important; padding-left: 10px; background: url(/images/icon.arrow.5C5C5C.lt.gif) 0 .2em no-repeat; }
* HTML .LinkBack A { color: #555; background-position: 0 .4em; }
*:first-child+HTML .LinkBack A { color: #555; background-position: 0 .4em; }

.LinkNext { padding-right: 8px; background: url(/images/icon.arrow.5C5C5C.rt.gif) 100% .2em no-repeat; }
.LinkPrev { padding-left: 8px; background: url(/images/icon.arrow.5C5C5C.lt.gif) 0 .2em no-repeat; }

* HTML .LinkNext { background-position: 100% .4em; }
* HTML .LinkPrev { background-position: 0 .4em; }

*:first-child+HTML .LinkNext { background-position: 100% .4em; }
*:first-child+HTML .LinkPrev { background-position: 0 .4em; }

.LinkDelete { color: #C00; }
.LinkClose { text-align: right; }

.ReturnToTop { padding: .5em; margin-bottom: 1em; border-bottom: 1px solid #D9D9D9; text-align: right; }
.ReturnToTop A { font-size: .92em; font-weight: bold; }

#page-options { margin-bottom: .5em; text-align: right; }
#page-options IMG { margin-right: 5px; }
#page-options A { color: #666; }
#page-options #option-print { margin-right: 7px;}
#page-options #option-email { margin-left: 7px; }

.Invisible { display: none; }

#SideColumn .action-box { /*width: 186px;*/ padding: 2px; border: 1px solid #CCC; }
#SideColumn .action-box H3 { background-color: #EEE; margin-top: 0; padding: .5em; }
#SideColumn .action-box UL { margin: .5em; padding:0; }
#SideColumn .action-box LI { list-style: none; margin-bottom: .5em; }
#SideColumn .action-box LI A { color: #666; }

/* abstract classes */
.Item { }
.Content { }
.Active { }
.Hover { }
.Selected { }
.Deleted { }
.Marked { }

/* for lists */
.Even { background: #FFF; }
.Odd { background: #F9F9FC; background: #F3F3F6; }

/* simple inline navigation */
P.InlineNav { }
P.InlineNav SPAN { font-weight: bold; }
P.InlineNav A { }


/* -- BEGIN: fixes -------------------------------------------------------- */

/* used for explicity clearing floated elements. this is an empty DIV. */
.ClearFix { clear: both; height: 0; font-size: 0; }

/* used as a "double wrapping" around elements.
   used when design dictates something a single DIV cannot accomplish.
   meant to prevent generic selectors like "DIV DIV".
*/
.BoxFix { }

/* used as a hook to capping off an element at the top/bottom/left/right.
   no content exists in a .Cap, so we can set the font-size to zero without worry.
*/
.Cap { font-size: 0; }

/* ---------------------------------------------------------- END: fixed -- */