/* ==========================================================================================
   Survey Project CSS
   Created: Aug 6, 2008
   Last Updated: Ongoing
   Author: Wayne Lewis
   Copyright 2008, CollegeBuilt
========================================================================================== */

/* Basics ================================================================================ */
body,table,th,td,div,span,p,input,select,textarea {font-family: Verdana, sans-serif; font-size:11px;}
body { background: #ddd; }
a:link,a:visited{color:#224979;}
a:hover{color:#6289c9;}

/* Template setup */
.TmplHeader{ background: #fff url(../Images/nsciwebtop.jpg) repeat-x top left; padding: 0; height:129px; position: relative;}
.xTmplHeaderControls{ background: #226b57 url(../Images/header_bg.png) repeat-x top; padding: 0 20px;}
.TmplMenu { vertical-align: top; width: 200px; padding-top: 20px;  background: #fff; }
.TmplContent { vertical-align: top; background: #fff; padding: 12px; }
.TmplContent .Preview {background-color: #e1e1e1;}
.TmplFooter {clear: both; padding: 12px;}

/* Menu column styles */
.TmplMenu .Container {background-color: #fff; padding: 12px;}


/* Preview ==================================  */

div.Pagination {margin: 0 0 10px 0;}
div.Pagination a:link, div.Pagination a:visited {height: 40px; width: 25px; font-size: 130%; display: inline; padding: 3px; margin-right: 8px; background: #fff; border: 1px solid #ccc;}

table.PreviewPage { background: #fff; border-top: 2px solid #bbb; border-right: 4px solid #bbb; border-bottom: 4px solid #bbb; border-left: 2px solid #bbb; }
table.PreviewPage td { padding: 15px; border-bottom: 1px solid #ddd; }
table.PreviewPage td.Controls { white-space: nowrap; padding: 15px; border-left: 1px dashed #ddd; border-bottom: 1px solid #ddd; }
table.PreviewPage tr.Alt {background: #eee;}


/* Lots of misc. styles used throughout GUI */
.NoWrap {white-space: nowrap !important;}
.ClearBoth {clear: both !important;}
.Spacer {font-size: 5px;}
hr {height: 1px; color: #ccc;}
a img{border:0;}
div.PageControls{margin-right:5px;float:right;color:#fff;font-weight:normal;}
.Centered {text-align:center !important;}
/* Custom widths on elements w/ misc overrides for some problem elements */
.DW50{width:50px !important;}
select.DW50 {width: 56px !important;}
.DW75{width:75px !important;}
select.DW75 {width: 81px !important;}
.DW100{width:100px !important;}
select.DW100 {width: 100px !important;}
.DW150{width:150px !important;}
select.DW150 {width: 150px !important;}
.DW175{width:150px !important;}
select.DW175 {width: 150px !important;}
.DW200{width:200px !important;}
select.DW200 {width: 200px !important;}
.DW250{width:250px !important;}
select.DW250 {width: 256px !important;}
.DW300{width:300px !important;}
select.DW300 {width: 306px !important;}
.DW100p {width: 100%;}
/* Headings ================================= */
h1 {font-size: 140%; margin: 5px 0; }
h2 {font-size: 120%; margin: 5px 0; }
h3 {font-size: 110%; margin: 5px 0; }
h4 {font-size: 105%; margin: 5px 0; }
h5 {font-size: 100%; margin: 5px 0; }
/* Customized Headings ====================== */
h1.PageTitle {margin: 0 0 10px 0;}
/* Need a color for something? ============== */
.Red {color: #cc3333 !important;}
.Gray {color: #999 !important;}

/* Breadcrumbs =========================================================================== */
/* Setup with left margin by default to line up w/ SectionBlock data */
div.Breadcrumbs {font-size: 90%; color: #999; margin: 0 0 8px 0;}
div.Breadcrumbs a:link, div.Breadcrumbs a:visited {color: #999;}
div.Breadcrumbs a:hover { }

/* Lists */
ul {margin-top: 0px; margin-bottom: 0px;}
li {line-height: 1.5em; list-style-type: square;}

/* Toggle controls ======================================================================================== */
/* Plus and minus icons to expand and collapse SectionBlocks, Trees. */
img.Toggler {margin: 0 6px 0 2px; height: 9px; width: 9px;}
img.Toggler .Expand {background: url(../Images/icon_plus.gif) no-repeat; cursor: pointer;}
img.Toggler .Collapse {background: url(../Images/icon_plus.gif) no-repeat; cursor: pointer;}

/* Forms ================================================================================= */
form{margin:0;}
td.Label{padding:4px 10px 4px 0; text-align:right;}
td.Field{padding:4px 10px 4px 0;}
form .Disabled {color: #000; background-color: #eee; font-style:italic;}
form td.Label{width:200px;padding:4px 10p-+x 4px 2px;text-align:right;}
form td.Field{padding:4px 10px 4px 0;}
td.Label .Top, td.Field .Top, form td.Label .Top, form td.Field .Top {vertical-align:top; padding-top: 8px;}
form .FieldGroup{position:relative;border:1px solid red;}
form .FieldGroup .Field{padding:4px;width:380px;xfont-size:92%;}
form img.Required {height: 7px; width: 7px; background: url('../Images/icon_required.png') no-repeat; border: 0px; margin-right: 4px; position: relative; top: -4px; z-index: 999; }
form div.Optional {display: inline; font-size: 90%; color: #999; padding: 2px 8px}
.HelpNote {font-style: italic; color: #999;}

/* Buttons =============================================================================== */
/* Defaults ================================= */
div.ButtonContainer{margin:12px 0 0 0;} /* Should wrap buttons not inline w/ form */
a.Button:link, a.Button:visited { background: #ddd url('../Images/buttons/button_chrome_right.png') no-repeat scroll top right; color: #333; display: block; float: left; height: 26px; margin-right: 6px; padding-right: 10px; text-decoration: none;}
a.Button:link span, a.Button:visited span, a.Button:link div, a.Button:visited div  { background: transparent url('../Images/buttons/button_chrome_left.png') no-repeat;display: block;line-height: 16px;padding: 5px 0 5px 10px;} 
/* special inline styles */
div.ButtonContainer .Inline {margin: 0; display: inline; position: relative;} /* Should wrap buttons inline buttons */
div.ButtonContainer .Inline a.Button {position: absolute; left: 0; top: 1px;}
/* Small ==================================== */
a.Button .Small:link, a.Button .Small:visited {background: #ddd url('../Images/buttons/button_chrome_small_right.png') no-repeat scroll top right; color: #444; height: 20px; }
a.Button .Small:link span, a.Button .Small:visited span, a.Button .Small:link div, a.Button .Small:visited div { background: transparent url('../Images/buttons/button_chrome_small_left.png') no-repeat;line-height: 16px; padding: 2px 0 2px 10px; }
div.ButtonContainer .Inline {height: 22px; margin: 0; display: inline; position: relative} /* Should wrap buttons inline buttons */
/* Hover states and button color definitions */
a.Button:hover {background-color: #eee; text-decoration: none; color: #333;}
a.Button .Primary:link, a.Button .Primary:visited { background-color: #baea7b;}
a.Button .Primary:hover { background-color: #cff0a2;}
div.ButtonSpacer {font-size: 28px;} /* Use between vertically stacked buttons */
div.ButtonSpacer .Small {font-size: 24px;} /* Use between vertically stacked buttons */

/* Data tables =========================================================================== */
table.Data{border-top:1px solid #999;border-right:1px solid #999;border-bottom:1px solid #666;border-left:1px solid #666;}
table.Data th,table.Data td{padding:4px 6px;border-right:1px solid #ddd;border-bottom:1px solid #ccc; vertical-align:top;}
table.Data th{background:#ccc;text-align:left;color:#000;font-weight:bold;border-right:1px solid #bbb;border-bottom:1px solid #bbb;}
table.Data th.Vertical {text-align: right; padding:4px 8px; background-image: url();} /* vertical th's, like the left column in a matrix */
/* Typically used for subheadings when displaying a data table with multiple rows per record */
table.Data tr.Alt th, table.Data th.Alt{background-color:#ddd;font-weight:normal;border-right:1px solid #ccc;border-bottom:1px solid #ccc;}
table.Data td{background-color:#fff;}
/* Column sorting */
table.Data img.ColumnSort {margin-left: 4px; height: 9px; width: 9px;}
table.Data img.ColumnSort .Ascending {background: url(../Images/icon_sort_ascending.gif) no-repeat;}
table.Data img.ColumnSort .Descending {background: url(../Images/icon_sort_descending.gif) no-repeat;}
/* Alternate row color for every other record */
table.Data tr.Alt td{background-color:#f6f6f6;}
table.Data tr.Excluded td{background-color:#e6efff;}
table.Data tr.Alt .Excluded td{background-color:#e6efff;}
/* Row or cell with totals info */
table.Data tr.Total, table.Data tr td.Total {font-weight: bold;}
/* Plus and minus icons to expand and collapse supplemental rows */
table.Data img.RowToggler {margin-right: 8px;}
table.Data img.RowToggler .Expand {background: url(../Images/icon_plus.gif) no-repeat;}
table.Data img.RowToggler .Collapse {background: url(../Images/icon_plus.gif) no-repeat;}
/* A column that displays only an action icon */
td.Icon{text-align:center;}
td.ColSpacer{padding-right:20px;}
/* A table that displays scale items */
table.ScaleTable {text-align: center;}
table.ScaleTable tr td {padding-right: 40px;}

/* Trees (expanding and collapsing hierarchies) ========================================== */
.Tree {}
.Tree .BranchContainer {margin: 0 0 0 4px; padding: 6px 0px 6px 0px; border-bottom: 1px solid #ccc; border-left: 1px solid #ccc; list-style: none;}
.Tree .Branch { padding: 1px 0px 2px 20px; margin: 0; list-style: none; }
.Tree .Branch .Root { padding-top: 5px; padding-left: 0px; }
.Tree .Branch td {border: 0px;}
.Tree .Branch td.Label {text-align: right; white-space: nowrap;}
/* Overrides for Trees inside DataTables */
/* Note: Tree rows currently display properly inside DataTables one level deep */
.Data .Tree td.DataTableBranchContainer {padding: 0px 15px 10px 6px;} /* Must be set on cell containing the branch */
.Data .Tree .BranchContainer {border-right: 1px solid #ccc; } /* div must be added inside the container cell */
.Data .Tree .BranchContainer table.Data {margin: 8px; width: 98%;} /* add a little spacing when a data table is within a branch container of another data table */

/* Messaging ============================================================================= */
div.Messagebox { line-height: 1em; font-size: 1em; }
div.Messagebox.Success { border: 1px solid #339933; color: #006600; padding: 20px 15px 20px 52px; margin: 10px 0px 10px 0px; background-color: #EEFFEE; background-image: url(../Images/icon_message_success.gif); background-position: top left; background-repeat: no-repeat; min-height: 15px; }
div.Messagebox.NoResults { border: 0px solid #999; color: #CC3333; padding: 20px 15px 20px 52px; margin: 10px 0px 10px 0px;  }      
div.Messagebox.Error { border: 1px solid #993333; color: #990000; font-weight: bold; padding: 20px 15px 20px 52px; margin: 10px 0px 10px 0px; background-color: #FFEEEE; background-image: url(../Images/icon_message_error.gif); background-position: top left; background-repeat: no-repeat; min-height: 15px; }
div.Messagebox.Notice { border: 1px solid #006dc8; color: #005ca9; font-weight: bold; padding: 20px 15px 20px 52px; margin: 10px 0px 10px 0px; background-color: #e4f3ff; background-image: url(../Images/icon_message_notice.gif); background-position: top left; background-repeat: no-repeat; min-height: 15px; }

/* Background gradients ================================================================== */
.GradientTinyWhite {background: url(../Images/gradient_white_tiny.png) repeat-x top; }
.GradientShortWhite {background: url(../Images/gradient_white_short.png) repeat-x top; }
.GradientTallWhite {background: url(../Images/gradient_white_tall.png) repeat-x top; }

/* Boxes ================================================================================= */
div.Box {position: relative;}
div.Box div.CornerTopLeft {position: absolute; top: 0; left: 0; height: 6px; width: 6px;background: url(../Images/box_corner_top_left.png) no-repeat top left; z-index: 999;}
div.Box div.CornerTopRight  {position: absolute; top: 0; right: 0; height: 6px; width: 6px;background: url(../Images/box_corner_top_right.png) no-repeat top right; z-index: 999;}
div.Box div.CornerBottomRight  {position: absolute; bottom: 0; right: 0; height: 6px; width: 6px;background: url(../Images/box_corner_bottom_right.png) no-repeat bottom right; z-index: 999;}
div.Box div.CornerBottomLeft  {position: absolute; bottom: 0; left: 0; height: 6px; width: 6px;background: url(../Images/box_corner_bottom_left.png) no-repeat bottom left; z-index: 999;}
div.Box div.EdgeTop {position: absolute; top: 0; height: 2px; width: 100%;background: url(../Images/box_edge_top.png) repeat-x; z-index: 0;}
div.Box div.EdgeRight {position: absolute; right: 0; height: 100%; width: 2px;background: url(../Images/box_edge_right.png) repeat-y; z-index: 888;}
div.Box div.EdgeBottom {position: absolute; bottom: 0; height: 2px; width: 100%;background: url(../Images/box_edge_bottom.png) repeat-x; z-index: 888;}
div.Box div.EdgeLeft {position: absolute; left: 0; height: 100%; width: 2px;background: url(../Images/box_edge_left.png) repeat-y; z-index: 888;}
div.Box div.Contents {position: relative; padding: 8px;}

/* Tabs ================================================================================== */
div.Tab {position: relative; height: 23px; background-color: #eee; cursor: pointer; margin-right: 5px;}
div.Tab div.CornerTopLeft {position: absolute; top: 0; left: 0; height: 6px; width: 6px;background: url(../Images/tab_corner_top_left.png) no-repeat top left; z-index: 999;}
div.Tab div.CornerTopRight  {position: absolute; top: 0; right: 0; height: 6px; width: 6px;background: url(../Images/tab_corner_top_right.png) no-repeat top right; z-index: 999;}
div.Tab div.EdgeTop {position: absolute; top: 0; height: 2px; width: 100%;background: url(../Images/tab_edge_top.png) repeat-x; z-index: 888;}
div.Tab div.EdgeRight {position: absolute; right: 0; height: 100%; width: 2px;background: url(../Images/tab_edge_right.png) repeat-y; z-index: 888;}
div.Tab div.EdgeBottom {position: absolute; bottom: 0; height: 2px; width: 100%;background: url(../Images/tab_edge_bottom.png) repeat-x; z-index: 0;}
div.Tab div.EdgeLeft {position: absolute; left: 0; height: 100%; width: 2px;background: url(../Images/tab_edge_left.png) repeat-y; z-index: 888;}
div.Tab div.Contents {position: relative; padding: 5px 12px; font-size: 90%; font-weight: bold;}
div.Tab .On { background-color: #fff;}
div.Tab .On div.EdgeBottom {background: url(../Images/tab_edge_left.png) repeat-y; z-index: 888;}
div.Tab:hover {background-color: #c7e8fc;}




/* Wrapper ============================================================================== */
div.Wrapper {width:85%; height: 100%; position:relative;margin:0 auto;padding:0; background-color: #fff;}
div.Wrapper .WrapperShadowLeft {width: 30px; position: absolute; left: -30px; top: 0px; height: 100%; background-image: url("/images/wrapper_shadow_left.png"); background-repeat:repeat-y; background-position:right;}
div.Wrapper .WrapperShadowRight {width: 30px; position: absolute; right: -30px; top: 0px; height: 100%; background-image: url("/images/wrapper_shadow_right.png"); background-repeat:repeat-y; background-position:left;}



/* Header =============================================================================== */
.Header { background-color: #226b57; color: #fff; height: 35px; } 
.Header .PageHeaderTitle {font-weight: bold; font-size: 120%;color: #fff; padding: 10px;}
.HeaderControls {color: #ccc;; text-align: right; padding: 4px 20px; font-size: 90%; position: absolute; right: 20px; bottom: 5px;}
.HeaderControls a:link, .HeaderControls a:visited { color: #fff; }
.HeaderControls a:hover {color: #ccc;}

/* Footer =================================================================================== */
.Footer {font-size: 80%; padding: 15px; }

/* Content Area Setup ======================================================================= */
.Content {width: 100%; padding: 15px; }

/* Heading styles */
h1 {font-size:165%;font-weight:700; border:0px;} /* unused currents */
.PageTitle, h2 {font-size:125%;font-weight:700;margin:8px 0px 20px 0px;padding:0; border:0px; line-height: .9em; color: #000} /* page headings */
.SubTitle, h3 {font-size:1.2em;font-weight:700;margin:2px 0px 0px 0px;padding:0; border:0px; line-height: 1em;} /* page subheadings */
h3 a:link, h3 a:visited {border: 0px;color:#3a76b7;}
h3 a:hover {border-bottom: 1px solid #3a76b7;}
h4 {font-size:1.1em;font-weight:700;margin:0;padding:0; border:0px;}
h5 {display: inline; font-size:1.0em; border:0px; margin-right: 5px; color:#3a76b7} /* inline headings */


/* Survey Page ========================================= */
.SurveyPage { background: #d1e1d1; margin: 0px; padding: 10px; }
        .SurveySection { background: #d1d1d1; margin: 5px; padding: 8px; }
        .SurveyRow {padding: 10px; margin: 5px; background: #eee;}
	    .SurveyRow .Question {width: 400px; padding: 10px; margin: 5px; clear: both; } 
        .SurveyRow .Answer {width:600px; padding: 10px; margin: 5px;  }
	    .SurveyHelp {margin-bottom: 15px;}
	    .SurveyRow table.SurveyScale { width: 100%;}
	    .SurveyRow table.SurveyScale th { text-align: center; background: #fff; padding: 5px;}
	    .SurveyRow table.SurveyScale td { text-align: center; background: #fff; padding: 5px;}
	    .SurveyRow.Alt { background: #f1f1f1;}
	    .SurveyRow.Selected {background: ffeeee; font-weight: bold;} /* Use this to highlight selected rows */