/*
 CSS declarations used by Customer Portal
*/

/* ------------------------------------------------------------
 Page Layout (sticky footer - general layout)
 
 +------------------------+
 | #portal_wrapper        |
 | +--------------------+ |
 | | #portal_frame      | |
 | | +----------------+ | |
 | | | #portal_header | | |
 | | +----------------+ | |
 | | | #content       | | |
 | | +----------------+ | |
 | +--------------------+ |
 +------------------------+
 | #portal_footer         |
 +------------------------+
 
*/
html, body, form, div#portal_wrapper {
 margin: 0;
 padding: 0;
 height: 100%;
}

form > div#portal_wrapper {
 height: auto;
 min-height: 100%
}

div#portal_footer {
 position: relative;
 margin-top: -24px; /* negative value of footer height + border if any*/
 height: 24px;
 clear:both
} 

div#portal_frame {
 padding-bottom: 24px /* bottom must be same height as #portal-footer */
}
 a.rev_link {
 font-weight: bold;
 margin: 0 3px;
 color: #003399;
 border-bottom: 1px dotted #003399;
 }
a.rev_link:hover {
 font-weight: bold;
 margin: 0 3px;
 color: #ff0000;
 border-bottom: 1px solid #ff0000;
}
/* ------------------------------------------------------------
 Page Layout (fixed width centered)
*/
div#portal_wrapper, div#portal_footer {
 margin-left: auto;
 margin-right: auto;
 background: #FFF;
 border: solid #AAA;
 border-width: 0 1px;
}

div#portal_wrapper {
 width: 720px
}

div#portal_footer {
 width: 715px;
 text-align: right;
 color: #666;
 line-height: 24px;
 padding: 0 5px 0 0;
}

div#portal_footer a {
 color: #000;
 font-weight: bold;
 text-decoration: none;
}

div#portal_footer a:hover {
 text-decoration: underline;
}

div#content {
  padding: 2px 0 0 0
}

/* ------------------------------------------------------------
 Headers
*/
h1, h2, h4 {
 font-family: Verdana, Tahoma, Geneva, sans-serif;
 font-weight: normal;
 text-decoration: none;
 text-align: center
}

/* Main header - My Account / My Rewards / etc... */
h1 {
 font-size: 28px;
 line-height: 42px;
 margin: 10px 0;
 color: #333
}

/* Subheader under main header */
h2 {
 font-size: 18px;
 line-height: 27px;
 margin: 5px 0;
 color: #000;
 font-weight: bold
}

/* Small header - portal menu / appointment category links */
h4 {
 text-align: left;
 font-size: 16px;
 line-height: 24px;
 margin: 5px 0;
 color: #333
}
div.reward {
 padding: 7px;
 margin-top: 5px;
 margin-bottom: 5px;
 color: #000;
 background: #FFFFDD;
 border-top: 1px dotted #999;
 border-bottom: 1px dotted #999;
 font-weight: bold;
 font-size: 12px;
 line-height: 20px
}

/* Header on public pages */
div.header {
 padding: 7px;
 margin-top: 10px;
 color: #000;
 background: #EEE;
 border-top: 1px solid #666;
 border-bottom: 1px dotted #666;
 font-weight: bold;
 font-size: 12px;
 line-height: 20px
}

div.header h2 {
 text-align: left
}

/* Description under H1 main header (if present) */
p.description {
 text-align: justify;
 margin: 0 20px;
 font-size: 13px;
 line-height: 20px
}

/* ------------------------------------------------------------
 Announcement message
*/
div.message {
 padding: 3px 7px;
 margin: 4px 2px;
 color: #000;
 background: #FFFFB0;
 border: 1px solid #999960;
 font-size: 13px;
 line-height: 20px
}

div.message h4 {
 font-weight: bold;
 color: #000;
 font-size: 15px;
}

div.message a.button {
 float: right;
 margin: 5px 0 15px 0
}

/* ------------------------------------------------------------
 Portal menu
 
 There are 3 items in portal menu; they span across entire page width.
 Middle item has ".border" class set (javascript may be disabled; IE doesn't support :first pseudo-class)
 Thus SUM(width + padding + border) must be equal to width on #portal_menu:
  (217[width] + 11[padding] * 2) * 3 + 2 * 1[border from li.border] = 719
  remaining 1 pixel (720 - 719) is added to li.border horizontal padding.  
*/
div#portal_menu {
 width: 720px;
 margin: 0 auto;
 border-bottom: 1px dotted #AAA;
}

div#portal_menu li {
 float: left
}

div#portal_menu li.border {
 border: dotted #AAA;
 border-width: 0 1px
}

div#portal_menu li a {
 display: block;
 width: 217px;
 height: 100px;
 padding: 11px;
 color: #000
}

div#portal_menu li.border a {
 padding-left: 12px
}

div#portal_menu li h4 {
 margin-bottom: 10px
}

div#portal_menu li a:hover, div#portal_menu li a:hover h4 {
 background-color: #666;
 color: #FFF;
 font-weight: bold
}

/* ------------------------------------------------------------
 Account menu (for logged in users)
*/
div#account_menu {
 border: solid #000;
 border-width: 1px 0;
 background: #EEE;
}

div#account_menu li {
 float: left;
 border-right: 1px solid #000
}

div#account_menu li.right {
 float: right;
 border-left: 1px solid #000;
 border-right: none;
}

div#account_menu li a {
 display: block;
 width: 120px;
 height: 24px;
 line-height: 24px;
 font-size: 13px;
 text-align: center;
 color: #000
}

div#account_menu li a:hover {
 background-color: #666;
 color: #FFF;
 font-weight: bold
}

div#greeting {
 text-align: right;
 font-weight: bold;
 font-size: 13px;
 line-height: 20px;
 padding: 3px 5px
}

/* ------------------------------------------------------------
 List / grid style customizations 
*/
ul.list li {
 font-size: 13px;
 line-height: 20px;
}

ul.list li h5 {
 font-family: Verdana, Tahoma, Geneva, sans-serif;
 font-size: 15px;
 line-height: 22px;
}

ul.list div.actions {
 padding: 0;
 margin: 7px 2px 2px 2px;
 border: none;
 background: transparent;
 text-align: right
}

ul.list div.actions a.button {
 margin-left: 4px 
}

table.grid {
 width: 712px;
 margin: 0 4px
}

ol.form li.caption {
 padding: 0 7px;
 color: #000;
 font-weight: bold;
 font-size: 12px;
 line-height: 20px
}

div#historyList li {
 font-size: 11px;
}

div#historyList li h5 {
 font-size: 13px;
}

div#historyList li div.right {
 font-size: 16px;
}


/* ------------------------------------------------------------
 Progress bar for rewards list 
*/
div.progressBar {
 width: 100px;
 height: 12px;
 border: 1px solid #718536;
 background-color: #FFF;
 padding: 1px;
}

div.progressBar div {
 float: left;
 height: 12px;
 background-color: #BCDD5A;
 margin-right: 1px
}

div.rewardsList ul li div.right {
 min-width: 120px
}

div#rewardCoupon {
 border: 4px dashed black;
 margin: 20px 150px;
 padding: 2px 10px;
 font-size: 13px;
 line-height: 20px
}

div#rewardCoupon img {
 float: right;
 width: 150px;
 height: 100px;
 margin: 0 0 10px 10px
}

div#rewardCoupon h2 {
 margin-bottom: 20px
}

div#rewardCoupon p {
 margin: 5px 0
}

div#rewardCoupon p.fineprint {
 margin-bottom: 0;
 font-size: 10px;
 line-height: 15px;
 color: #666
}

/* ------------------------------------------------------------
 Frameset progress (page numbers) for appointment scheduler 
*/
div#frameset {
 float: right
}

div#frameset li {
 float: left;
 padding-right: 5px;
 background: url(../images/fa_right.gif) right center no-repeat; 
}

div#frameset li.active {
 background: url(../images/fa_active_right.gif) right center no-repeat; 
}

div#frameset li.disabled {
 background: url(../images/fa_disabled_right.gif) right center no-repeat; 
}

div#frameset li a {
 display: block;
 font-size: 12px;
 line-height: 20px;
 padding: 2px 10px 2px 15px;
 text-decoration: none;
 color: #fff;
 border-top: 1px solid #999;
 border-bottom: 1px solid #999;
 background: url(../images/fa_left.gif) -23px center no-repeat;
}

div#frameset li.disabled a.disabled, div#frameset li.disabled a:hover.disabled {
 /* border / margin / padding override application styles */
 border-top: 1px solid #999;
 border-bottom: 1px solid #999;
 margin: 0;
 padding: 2px 10px 2px 15px;
 background: url(../images/fa_disabled_left.gif) -23px center no-repeat;
 color: #aaa
}

div#frameset li.active a {
 background: url(../images/fa_active_left.gif) -23px center no-repeat;
 cursor: default;
}

div.steps_buttons {
 margin-top: 10px;
 border-top: 1px dotted #AAA;
 padding: 5px 10px;
 text-align: center
}

/* ------------------------------------------------------------
 Comparison table for services 
*/
table#comparison {
 width: 712px;
 margin: auto
}

table#comparison td {
 padding: 4px;
 vertical-align: top
}

table#comparison td.selected {
 background-color: #FFFFDD;
}

table#comparison thead td {
 border-bottom: 1px dotted #AAA
}

table#comparison td ul {
 list-style-type: square;
 list-style-position: inside
}

/* ------------------------------------------------------------
 Calendar
*/
table.calendar tbody button.loaner, table.calendar tr.legend span.loaner {
 background: url(../images/cal_tag1.gif) bottom right no-repeat;
}

table.calendar tbody button.advisor, table.calendar tr.legend span.advisor {
 background: url(../images/cal_tag2.gif) top right no-repeat;
}

table.calendar tbody button.advisor_loaner {
 background: url(../images/cal_tag12.gif) top right no-repeat;
}

/* DIV to the right of calendar */
div#calendarForm {
 width: 430px;
 margin: 25px 0 0 20px;
 float: left
}

div#calendarForm ol.vform {
 width: 420px;
}

div#calendarForm ol.vform select {
 width: 390px;
}



/* ------------------------------------------------------------
 Fields / buttons
*/
input.text, select, textarea {
 border-color: #999;
}

a.button, button {
 background-color: #D6E2E1;
 border-color: #5B6767;
 color: #000;
}

a.button:hover, button:hover {
 background-color: #5B6767;
 border-color: #999;
 color: #FFF;
}

/* ------------------------------------------------------------
  Portal menu / Account menu
*/
div#portal_menu li h4 {
 color: #F14635
}

div#portal_menu li a:hover, div#portal_menu li a:hover h4 {
  background-color: #D6E2E1;
  color: #000
}

div#account_menu {
 background: #D6E2E1
}

div#account_menu li a:hover {
 background-color: #F14635;
 position: relative;
 margin-top: -2px;
 padding-top: 2px
}

/* ------------------------------------------------------------
 Header / panel / table / list
*/
div.header {
 background: #D6E2E1
}

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

div.panel h3 span {
 background: url(../images/title_left.gif) top left no-repeat;
}

div.panel div.body {
 border-color: #999
}

table.grid thead td {
 background: #D6E2E1;
 color: #000;
 border-color: #999;
}

table.grid thead td.left {
 background: url(../images/table_left.gif) top left no-repeat;
}

table.grid thead td.right {
 background: url(../images/title_right.gif) top right no-repeat;
}

table.grid tbody td.left, table.grid tbody td.right, table.grid tbody tr.bottom td {
 border-color: #999
}

ul.list li {
 border-color: #999
}

div.toolbar {
 border-bottom: 1px solid #999;
}
ol.form label.with_sub{
 vertical-align: top;
 line-height: 20px;
}
ol.form span.sub {
 display: block;
 float: left;
 width: 100%;
 font-weight: normal;
 font-size: x-small;
 text-align: right;
 padding-right: 5px;
 height: 5px;
 line-height: 5px;
 vertical-align: top;
}
ol.form div label.checkbox{
	display:inline;
text-align: center;
float: none;
width: auto;
}
/* ------------------------------------------------------------
 Frameset progress (page numbers) for appointment scheduler 
*/
div#frameset li a {
 color: #FFF;
}

div#frameset li.active a {
	 color: #FFF;
}

div#frameset li.disabled a.disabled, div#frameset li.disabled a:hover.disabled {
 color: #AAA;
}

/* ------------------------------------------------------------
 Calendar 
*/
table.calendar tr.labels td {
 background: #D6E2E1;
 color: #000;
 border-color: #999
}

table.calendar tbody td.left, table.calendar tbody td.right,
    table.calendar tr.bottom td {
 border-color: #999
}

table.calendar tbody button.selected {
 background: #5B6767;
 border-color: #999;
 color: #FFF;
 padding: 0;
}

table.calendar tbody button:hover {
 background: #D6E2E1;
 border-color: #5B6767;
 color: #000;
 padding: 0;
}

/* ------------------------------------------------------------
 Progress bar for rewards list 
*/
div.progressBar {
 border: 1px solid #999;
 background-color: #FFF
}

div.progressBar div {
 background-color: #F14635
}
.softgray{
color: #999;
}
.consern_text{
	padding: 3px;
	padding-left: 30px;
}