/*
 CSS declarations used by TCC application
 Core colors used throughout the site:
  - Light / dark green (tabs / buttons): #BCDD5A / #718536
  - Light / dark orange (selected tabs / buttons): #F47930 / #BF5E26
  - Light / dark blue (panel titles / links): #003399 / #6688CC
 Pantone: green=382PC, orange=1655PC, black=Black6PC
*/

/* ------------------------------------------------------------
 CSS reset / clearfix
*/
html,body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,p,blockquote,th,td{margin:0;padding:0}
img,body,html{border:none}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal}
ol,ul{list-style:none}
caption,th{text-align:left}
h1,h2,h3,h4,h5,h6{font-size:100%}
q:before,q:after{content:''}

html { overflow: auto }
img { vertical-align: middle }
a { text-decoration: none }
a.disabled, a.disabled:hover {
 cursor: default;
 cursor: not-allowed
}

/* CLEAR FIX - containing floats without additional structural markup */
.clearfix:after {
 content: ".";
 display: block;
 height: 0;
 clear: both;
 visibility: hidden
}
.clearfix { display: inline-block }
/* Hides from IE-mac \*/
* html .clearfix { height: 1% }
.clearfix { display: block }
/* End hide from IE-mac */

/* ------------------------------------------------------------
 General settings
*/
body {
 background: url(../images/bg_tile.gif) top center repeat;
 padding: 4px 0
}

body, td, button, input, select, ol.form label, ol.vform label {
 font-family: Arial, Helvetica, Verdana, sans-serif;
 font-size: 12px
}

/* ------------------------------------------------------------
 Page Layout: frame
*/
div#pl_frame_top {
 background: url(../images/frame_top.gif) no-repeat;
 margin: 0 auto;
 width: 1000px;
 height: 4px;
}

div#pl_frame {
 background: #FFF;
 margin: 0 auto;
 border: solid #AAA;
 border-width: 0 1px 1px 1px;
 width: 1000px;
}

/* ------------------------------------------------------------
 Page Layout: header
 Layer contains logo / status / menu
 Mimimum height of 76px is 68px logo + 8 px menu base
*/
div#pl_header {
 position: relative;
 height: 6em;
 min-height: 76px;
}

/* ------------------------------------------------------------
 PageLayout: logo
 Logo container: image is 282x64; left=4px is to compensate for 4px high pl_frame_top
*/
div#pl_logo {
 position: absolute;
 top: 0;
 left: 4px;
 width: 282px;
 height: 68px;
}

/* ------------------------------------------------------------
 PageLayout: status
 Status layer in Header's top right corner
*/
/* ------------------------------------------------------------
 PageLayout: status
 Text / links in status layer.
*/
div#pl_status {
 position: absolute;
 top: 0;
 right: 4px;
 height: 22px;
 line-height: 22px;
 text-align: right;
 font-weight: bold;
 color: #000;
}

div#pl_status a {
 margin: 0 3px;
 border-bottom: 1px dotted #003399;
 color: #003399;
}

div#pl_status a:hover {
 background-color: #6688CC;
 border: 1px solid #003399;
 color: #FFF;
 padding: 1px 2px;
 margin: -2px 0;
}

div#pl_status a.disabled, div#pl_status a.disabled:hover {
 color: #AAA;
 border-color: #AAA
}

div#pl_status a.disabled:hover {
 background-color: transparent;
 border: none;
 border-bottom: 1px dotted #AAA;
 padding: 0;
 margin: 0 3px
}

/* ------------------------------------------------------------
 PageLayout: top menu
 Menu layer in Header's bottom right corner
 8px bottom is menu strip's outer height 
*/

div#top_menu {
 position: absolute;
 right: 0;
 bottom: 8px;
 z-index: 101;
}

div#top_menu ul ul {
 display: none;
}

/* Used on pages where menu is disabled */
div#top_menu div.tagline {
 font-family: Arial, sans-serif;
 font-size: 24px;
 font-weight: bold;
 font-style: italic;
 padding: 2px 7px;
 color: #666;
}

div#menu_strip {
 position: absolute;
 left: 0;
 bottom: 0;
 width: 1000px;
 height: 6px;
 background-color: #F47930;
 border: solid #BF5E26;
 border-width: 1px 0;
}

div#top_menu li {
 float: left;
 margin-right: 1px;
 width: 100px;
 text-align: center;
 font-family: "Arial Rounded MT Bold", "Arial Black", sans-serif;
 font-size: 14px;
 background: url(../images/tab_right.gif) top right no-repeat;
}

div#top_menu li a {
 display: block;
 height: 42px;
 line-height: 42px;
 padding: 0px 10px;
 text-decoration: none;
 white-space: nowrap;
 background: url(../images/tab_left.gif) top left no-repeat;
 color: #000;
}

/* class for menu items presented in 2 lines
 *  needed in order to use line-height for vertical centering
 */
div#top_menu li a.double {
 height: 36px;
 line-height: 18px;
 padding: 3px 10px;
 white-space: normal;
}

/* currently selected tab is padded 1px down to hide upper border of menu strip */
div#top_menu li.selected, div#top_menu li:hover {
 padding-bottom: 1px;
 margin-bottom: -1px;
 background: url(../images/tab_right_active.gif) top right no-repeat;
}

div#top_menu li.selected a, div#top_menu li:hover a {
 background: url(../images/tab_left_active.gif) top left no-repeat;
 color: #FFF;
}

div#top_menu li.disabled {
 padding-bottom: 0;
 margin-bottom: 0;
 background: url(../images/tab_right_disabled.gif) top right no-repeat;
}

div#top_menu li.disabled a {
 cursor: default;
 cursor: not-allowed;
 background: url(../images/tab_left_disabled.gif) top left no-repeat;
 color: #666;
}

/* ------------------------------------------------------------
 PageLayout: submenu
*/
div#submenu {
 position: absolute;
 z-index: 100;
 display: none;
 width: 100%;
 line-height: 21px;
 height: 21px;
 padding-bottom: 2px;
 text-align: left;
 background-color: #F47930;
 border-bottom: 1px solid #BF5E26
}

div#submenu div {
 position: relative;
 float: left;
}

div#submenu, div#submenu a, div#submenu span {
 text-decoration: none;
 font-weight: bold;
 color: #FFF;
}

div#submenu a, div#submenu span {
 margin: 0 5px;
}

div#submenu a:hover {
 background-color: #000;
 color: #FFF;
 padding: 4px 5px;
 margin: -4px 0;
}

div#submenu a.disabled, div#submenu a.disabled:hover {
 background: #F47930;
 color: #DDD
}

/* ------------------------------------------------------------
 PageLayout: breadcrumbs
 Text / links in breadcrumbs layer.
*/

div#breadcrumbs {
 margin: 4px;
 font-weight: bold;
 color: #003399;
}

div#breadcrumbs a {
 margin: 0 3px;
 border-bottom: 1px dotted #003399;
 color: #003399;
}

div#breadcrumbs a:hover {
 background-color: #6688CC;
 border: 1px solid #003399;
 color: #FFF;
 padding: 1px 2px;
 margin: -2px 0;
}

/* ------------------------------------------------------------
 PageLayout: masking layer and 'loading' iframe 
*/
div#backgroundMask {
 position: absolute;
 background-color: #000;
 top: 0;
 left: 0;
 padding: 0;
 margin: 0;
 width: 100%;
 height: 100%;
 cursor: wait;
 z-index: 1000;
}

div#loadingMessage {
 position: absolute;
 background-color: #FFF;
 color: #000;
 border: 2px solid #000;
 width: 170px;
 padding: 5px;
 cursor: wait;
 font-weight: bold;
 text-align: center;
 display: none;
 z-index: 1001;
}

/* ------------------------------------------------------------
 PageLayout: main content
*/
div#content {
 margin-top: -4px;
 padding: 2px;
}

div#content a.link {
 font-weight: bold;
 margin: 0 3px;
 color: #003399;
 border-bottom: 1px dotted #003399;
}

div#content a.link-disabled {
 border-color: #AAA;
 color: #AAA
}

div#content a.link:hover {
 background-color: #6688CC;
 border: 1px solid #003399;
 color: #FFF;
 padding: 1px 2px;
 margin: -2px 0;
}

div#content a.link-disabled:hover {
 background-color: transparent;
 border: none;
 border-bottom: 1px dotted #AAA;
 color: #AAA;
 padding: 0;
 margin: 0 3px
}

/* ------------------------------------------------------------
 Panel
 Panel title is rendered as H3 with embedded span 
*/
div.panel { margin: 2px }

div.panel h3 {
 background: url(../images/title_right.gif) top right no-repeat
}

div.panel h3 span {
 display: block;
 padding: 3px 5px;
 font-size: 14px;
 line-height: 21px;
 font-weight: bold;
 background: url(../images/title_left.gif) top left no-repeat;
 color: #000
}

div.panel div.body {
 border: 1px solid #5C7D00
}

/* Message Panels */
div.panel-ERROR, div.panel-WARNING, div.panel-INFO {
 margin-top: 4px;
 line-height: 19px
}

div.panel-ERROR ul, div.panel-WARNING ul, div.panel-INFO ul {
 list-style-type: square;
 margin-left: 25px
}

div.panel-ERROR h3 {
 background: url(../images/title_right_red.gif) top right no-repeat !important
}

div.panel-ERROR h3 span {
 background: url(../images/title_left_red.gif) top left no-repeat !important;
 color: #FFF !important
}

div.panel-ERROR div.body {
 border: 1px solid #990808 !important;
 padding: 4px !important;
 background-color: #FFEEEE !important
}

div.panel-WARNING h3, div.panel-INFO h3 {
 background: url(../images/title_right_yellow.gif) top right no-repeat !important
}

div.panel-WARNING h3 span, div.panel-INFO h3 span {
 background: url(../images/title_left_yellow.gif) top left no-repeat !important;
 color: #FFF !important
}

div.panel-WARNING div.body, div.panel-INFO div.body {
 border: 1px solid #A89F22 !important;
 padding: 4px !important;
 background-color: #FFFFEE !important
}

div.panel-ERROR tr, div.panel-WARNING tr, div.panel-INFO tr {
 height: 16px
}

div.panel td.ERROR {
 background: url(../images/icon_error.gif) center no-repeat;
}

div.panel td.WARNING {
 background: url(../images/icon_warning.gif) center no-repeat;
}

div.panel td.INFO {
 background: url(../images/icon_info.gif) center no-repeat;
}

/* Index panel */
div.panel-index h3 {
 width: 75%;
 background: url(../images/line_right.gif) bottom right no-repeat;
}

div.panel-index h3 span {
 background: url(../images/line_left.gif) bottom left no-repeat;
 padding: 3px 20px 13px 20px;
}

div.panel-index div.body {
 border: none;
 margin: -7px 0 0 17px;
}

/* 2 panels in 1 row side by side */
div.panel-r2 {
 float: left;
 width: 494px;
 margin: 2px;
}

/* 2 panels in 1 row side by side, embedded in another panel */
div.panel-r2e {
 float: left;
 width: 488px;
 margin: 0 0 4px 4px;
}

/* panel with centered text inside - do we need this? */
div.panel-text div.body {
 padding: 4px;
 line-height: 18px;
 text-align: center;
}

/* Frame (no title bar) panel - do we need this? */
div.panel-frame h3 {
 height: 6px;
}

div.panel-frame h3 span {
 padding: 3px;
} 

/* ------------------------------------------------------------
 UL::list - list with odd / even row styles
 Has no header by itself; to be used within another container
*/
ul.list li {
 padding: 3px;
 line-height: 18px;
 text-align: justify;
 border-bottom: 1px dotted #718536;
}

/* .odd class is applied dynamically by JS */
ul.list li.odd {
 background-color: #EEEEEE;
}

ul.list h3 {
 font-size: 14px;
 font-weight: bold;
 text-decoration: underline;
}

ul.list h5 {
 font-size: 12px;
 font-weight: bold;
 text-decoration: underline;
}

/* right-aligned layer within list row */
ul.list div.right {
 float: right;
 padding: 0 0 20px 20px;
}

ul.list div.actions {
 padding: 5px;
 margin: 3px;
 border: 1px dotted #718536;
 background-color: #FFFFD0;
 font-weight: bold;
 clear: both
}

ul.list li.message {
 padding: 5px 0;
 text-align: center;
}

/* toolbar with selection controls */
div.toolbar {
 padding: 3px;
 background-color: #FFFFD0;
 border-bottom: 1px solid #718536;
}

/* ------------------------------------------------------------
 UL::index - list with directory-like index style
 Has no header by itself; to be used within another container
*/
ul.index li {
 font-size: 11px;
 padding: 4px 0px;
 line-height: 18px;
}

ul.index h5, ul.index h5 a {
 font-size: 14px;
 font-weight: bold;
}

/* ------------------------------------------------------------
 Table::grid - simple table with odd / even row styles
 Header uses the same style as panel header in ui.css
*/
table.grid {
 margin: 2px;
 width: 992px;
}

/* 2 grids (or grid and panel) in 1 row side by side */
table.grid-r2 {
 float: left;
 width: 494px;
 margin: 0 0 4px 4px;
}

div.grid {
 margin: 4px auto 2px auto;
 width: 992px;
 height: 200px;
}

table.grid td {
 padding: 3px;
 line-height: 18px;
}

table.grid thead td {
 font-weight: bold;
 background: #BCDD5A;
 color: #000;
 padding: 3px 5px;
 border: solid #718536;
 border-width: 1px 0;
}

table.grid thead td.title {
 font-size: 14px;
}

/* left / right / bottom / odd classes below are added dynamically by JQuery */
table.grid thead td.left {
 background: url(../images/table_left.gif) top left no-repeat;
 padding-top: 4px;
 border-width: 0 0 1px 0;
}

table.grid thead td.right {
 background: url(../images/title_right.gif) top right no-repeat;
 padding-top: 4px;
 border-width: 0 0 1px 0;
}

table.grid tr.header td {
 background: #DDDDDD;
 color: #000;
 font-weight: bold;
 border: solid #A2A2A2;
 border-width: 0 1px 1px 0;
}

table.grid tbody td.left {
 border-left: 1px solid #718536;
}

table.grid tbody td.right {
 border-right: 1px solid #718536;
}

table.grid tbody tr.bottom td {
 border-bottom: 1px solid #718536;
}

table.grid tbody tr.odd td {
 background-color: #EEEEEE;
}

/* ------------------------------------------------------------
 Tab Control
*/
div.tabControl { margin: 0 2px 2px 2px }

div.tabControl div.tabStrip {
 height: 2px;
 background-color: #F47930; 
 border: 1px solid #BF5E26;
}

div.tabControl div.body {
 border: solid #999;
 border-width: 0 1px 1px 1px;
 overflow: auto;
}

ul.tabControl { margin: 6px 2px 0 2px }

ul.tabControl li {
 float: left;
 position: relative;
 z-index: 101;
 margin-left: 1px;
 text-align: center;
 font-family: "Arial Rounded MT Bold", "Arial Black", Arial, sans-serif;
 font-size: 12px;
 background: url(../images/tab_right.gif) top right no-repeat;
}

ul.tabControl li a {
 display: block;
 min-width: 60px;
 height: 24px;
 line-height: 27px;
 padding: 0px 10px;
 text-decoration: none;
 white-space: nowrap;
 background: url(../images/tab_left.gif) top left no-repeat;
 color: #000;
}

/* currently selected tab is padded 1px down to hide upper border of menu strip */
ul.tabControl li.selected, ul.tabControl li:hover {
 padding-bottom: 1px;
 margin-bottom: -1px;
 background: url(../images/tab_right_active.gif) top right no-repeat;
}

ul.tabControl li.selected a, ul.tabControl li:hover a {
 background: url(../images/tab_left_active.gif) top left no-repeat;
 color: #FFF;
}

ul.tabControl li.disabled {
 padding-bottom: 0;
 margin-bottom: 0;
 background: url(../images/tab_right_disabled.gif) top right no-repeat;
}

ul.tabControl li.disabled a {
 cursor: default;
 cursor: not-allowed;
 background: url(../images/tab_left_disabled.gif) top left no-repeat;
 color: #666;
}

/* ------------------------------------------------------------
 Chart
*/
img.chart {
 border: none;
 padding: 4px 0;
 vertical-align: bottom;
}

div.chart {
 font-style: italic;
 text-align: center;
 padding: 2px;
}

/* ------------------------------------------------------------
 Calendar
*/
table.calendar {
 float: left;
 margin: 10px;
}

table.calendar button, table.calendar button:hover {
 margin: 0;
 min-width: 28px;
 background: none;
 border: none;
 text-align: right
}

table.calendar tr.title {
 height: 20px;
}

table.calendar tr.title button {
 font-size: 18px;
 padding: 0 3px 2px 3px;
 color: #000;
}

table.calendar tr.title td.disabled button {
 color: #999;
}

table.calendar thead tr, table.calendar tr.legend {
 height: 30px; 
}

table.calendar thead td {
 text-align: center;
 font-weight: bold;
}

table.calendar tr.labels td {
 background: #BCDD5A;
 border-top: 1px solid #718536;
 border-bottom: 1px solid #718536;
}

table.calendar tr.labels td.left {
 background: url(../images/table_left.gif) top left no-repeat;
 border-top: none;
}

table.calendar tr.labels td.right {
 background: url(../images/title_right.gif) top right no-repeat;
 border-top: none;
}

table.calendar tbody td.left { border-left: 1px solid #718536 }
table.calendar tbody td.right{ border-right: 1px solid #718536 }
table.calendar tr.bottom td { border-bottom: 1px solid #718536 }

table.calendar tbody td {
 padding: 1px;
 text-align: right;
}

table.calendar tbody span {
 display: block;
 font-size: 14px;
 line-height: 21px;
 padding: 2px 6px;
 color: #999;
}

table.calendar tr.legend td {
 text-align: left;
}

table.calendar tr.legend span {
 display: block;
 margin-left: 5px;
 width: 18px;
 height: 18px;
 padding: 0;
 border: 1px solid #999;
}

table.calendar tbody button {
 font-size: 14px;
 line-height: 21px;
 padding: 1px 3px;
}

table.calendar tbody button.selected {
 padding: 0 2px;
 background-color: #BCDD5A;
 border: 1px solid #718536;
}

table.calendar tbody button:hover {
 padding: 0 2px;
 background-color: #F47930;
 border: 1px solid #BF5E26
}

/* ------------------------------------------------------------
 Form / input components
*/
ol.form li {
 height: 30px;
 line-height: 30px;
 vertical-align: middle;
}

ol.form label {
 display: block;
 float: left;
 width: 45%;
 font-weight: bold;
 text-align: right;
 padding-right: 5px
}

ol.form li.buttons {
 text-align: center;
 padding: 2px 0; 
}

ol.form li.checkbox {
 text-align: center;
}

ol.form li.checkbox-inlined {
 text-align: left;
 padding-left: 4px
}

ol.form li.mbox {
 height: auto;
 line-height: 24px;
}

ol.form li.mbox div, ol.form li.displayField div {
 margin-left: 46%
}

ol.form li.checkbox label, ol.form li.mbox div label {
 display: inline;
 float: none;
 text-align: left;
 padding-left: 5px
}

ol.form li.mbox div label {
 font-weight: normal
}

ol.form li.textarea, ol.form li.displayField {
 height: auto
}

ol.form li.displayField div {
 line-height: 20px;
 padding: 5px 0;
}

/* Vertical form layout (label over field) */
ol.vform {
 width: 230px;
 margin: auto;
 text-align: left;
}

ol.vform li {
padding: 4px; 
}

ol.vform label {
 font-weight: bold;
}

div.panel-form li.odd, div.panel-vform li.odd {
 background-color: #EEE;
}

input.text {
 width: 200px;
 height: auto;
 vertical-align: middle;
 padding-top: 2px;
 padding-bottom: 3px;
 border: 1px solid #718536;
}

select {
 width: 202px;
 height: 22px;
 vertical-align: middle;
 line-height: 20px;
 border: 1px solid #718536;
}

input.checkbox {
}

textarea {
 width: 350px;
 height: auto;
 padding-top: 2px;
 padding-bottom: 3px;
 border: 1px solid #718536;
}

input.ERROR, select.ERROR, textarea.ERROR {
 border: 1px solid #990808;
 background-color: #FFEEEE;
}

input.disabled, button.disabled, textarea.disabled {
 border: 1px solid #999999 !important;
 background-color: #EEEEEE !important;
 color: #999999 !important;
 cursor: default
}

ol.form li.textarea img.icon {
 vertical-align: top;
}

ol.form li img.icon {
 vertical-align: middle;
 margin-left: 3px;
 border: none;
}

/* Button and link looking like button*/
a.button, button {
 font-weight: bold;
 font-size: 13px;
 line-height: 17px;
 background-color: #BCDD5A;
 border: 1px solid #718536;
 color: #000;
}

button {
 padding: 2px 5px;
 margin: 0 5px;
 cursor: pointer;
 width: auto;
 overflow: visible
}

a.button {
 display: inline-block;
 padding: 3px 10px;
}

a.button:hover, button:hover {
 background-color: #F47930;
 border: 1px solid #BF5E26
}

a.button-disabled, a.button-disabled:hover {
 border: 1px solid #999999;
 background-color: #EEEEEE;
 color: #999999;
}

/* ------------------------------------------------------------
 Simple header styles
*/
h1, h2, h4 {
 font-family: Verdana, Tahoma, Geneva, sans-serif;
 font-weight: bold;
 text-align: center
}

h1 {
 font-size: 48px;
 line-height: 72px;
 text-align: left;
 color: #666
}

h2 {
 font-size: 14px;
 line-height: 21px;
 text-decoration: underline;
}

h4 {
 font-size: 12px;
 line-height: 18px;
 text-decoration: underline;
}

/* ------------------------------------------------------------
 Freeform page styles
 (pages not extending pageTemplate, such as login / error / etc...)
*/
div.freeform#content {
 margin: 0;
 padding: 10px 0 0 0
}

div.freeform div#left {
 float: left;
 width: 250px;
 padding: 10px
}

div.freeform div#main {
 margin-left: 270px;
 padding: 10px;
 border-left: 1px dotted #AAA
}

div.freeform div#bottom {
 margin-top: 10px;
 padding: 0 10px;
 border-top: 1px dotted #AAA
}

div.freeform div#bottom p {
 color: #666;
 font-size: 12px;
 line-height: 18px;
 text-align: justify;
 margin-top: 10px
}

div.freeform div#bottom p.copyright {
 text-align: center;
}


div.freeform div#header {
  font-size: 18px;
  line-height: 27px;
  color: #333
}

div.freeform div#header h1 {
  color: #333
}

/* ------------------------------------------------------------
 Page-specific styles (used by specific pages)
*/

/* AdvisorDesk :: Index page; number of calls available */
div.bigCounter {
 margin: 3px 3px 0 0;
 padding: 5px 15px 0 15px;
 min-width: 40px;
 text-align: center;
 background-color: #6688CC;
 border: 1px solid #003399;
 color: #FFF;
 -webkit-border-radius: 5px;
 -moz-border-radius: 5px;  
}

div.bigCounter-disabled {
 border: 1px solid #999999;
 background-color: #EEEEEE;
 color: #999999;
}

div.bigCounter b {  
 font-size: 24px;
}


/* tag - do we need this?*/
ul.list span.tag {
 display: inline-block;
 padding: 1px 5px;
 border: 1px solid black;
 background: #DFDEDB;
 font-weight: bold;
}