#preferences {
	background:#EDEDED;
    position:relative;
}

#preferences #web-toolbar 
{
    top:0;
    right:0;
}

#preferences h1,
#preferences .white, 
#preferences .blue {
	-moz-border-radius:8px;
	-webkit-border-radius:8px;
}

#preferences .white {
	background:#FFF;
	padding:10px;
	height:100%;
}

#preferences .section .white {
    margin-top:0;
}

#preferences .blue {
	background:#edf5f4;
	padding:10px;
}

#preferences p.txtIntro {
	margin-left:10px;
}

#preferences h1,
#preferences h2,
#preferences h3 {
	margin:0;
}

#preferences h1 {
	display:block;
	background:#1361A5;
	color:#FFF;
	line-height:26px;
	padding:0 5px 0 10px;
	font-size:0.7em;
}

#preferences .indent {
    display:block;
    padding:0 0 0 25px;
}

.trip-saved {
    color:Green;
    margin:10px;
}

.indent1 {
    padding:0 10px;
}

.newsletters .success{
    font-weight:bold;    
    color:green;
    margin-left: 10px;
}

#preferences .success,
#notifications .success {
    font-size:0.7em;
    font-weight:bold;
    color:green;
}

.successLink {
    font-size:0.7em;
    font-weight:bold;
    color:blue;
}
/**
* Collapsible boxes
*/

#preferences .collapsible h1 {
	background: #1361A5 url(/translink/images/icon-collapse.gif) no-repeat 99% 50%;
	cursor:pointer;
}

#preferences .collapsible h1.collapsible-closed {
	background: #1361A5 url(/translink/images/icon-expand.gif) no-repeat 99% 50%;
}

#panelProfile p span {
	margin-left:1.5%;
}

#panelProfile dl {
	height:100%;
}

#panelProfile dt,
#panelProfile dd {
	float:left;
	font-size:0.7em;
	margin:10px 0 0 0;
	line-height:22px;
}

#panelProfile dt {
	clear:left;
	width:23.5%;
	text-indent:13px;
	margin-left:1.5%;
	display:inline;
}

#panelProfile dd {
	width:75%;
}

#preferences dt.required span,
#preferences span.required {
	color:#FF0000;
	font-weight:bold;
	margin-right:5px;
}

#preferences dt.required {
	text-indent:0;
}

/**
* Input fields
*/

#txtPostal1,
#txtPostal2 {
	width:50px;
	text-transform:uppercase;
}

#txtPostal2 {
	margin-left:2%;
}

#txtHomePhone1,
#txtWorkPhone1,
#txtMobilePhone1 {
	width:25px;
}

#txtHomePhone2,
#txtHomePhone3,
#txtWorkPhone2,
#txtWorkPhone3,
#txtMobilePhone2,
#txtMobilePhone3 {
	width:45px;
}

#txtHomePhone4,
#txtWorkPhone4,
#txtMobilePhone4 {
	width:65px;
}



#preferences .button-panel {
	margin:10px 0 0 0;
}

#preferences .button-panel .col {
	float:left;
	width:50%;
}



#preferences .error-icon-important {
	display:block;
	background:url(/translink/images/icon-field-error-important.gif) no-repeat;
	font-size:0.7em;
	color:#ff0000;
	line-height:20px;
	padding-left:25px;
}

#preferences label.field-help {
	margin:0 0 0 5px;
	padding:2px;
	display:inline-block;
}

#preferences label.field-error {
	margin:0 0 0 5px;
	color:#FF0000;
	display:inline-block;
	background:url(/translink/images/icon-field-error-l.gif) no-repeat;
	padding:0 0 0 25px;
	line-height:20px;
}

#preferences .section {
	margin:10px 0 0 0;
}

/** My Alerts **/

#panelAlerts .lblError {
	background:url(/translink/images/one-customer/form-icon-warning.gif) no-repeat ;
	padding:0 0 0 3em !important;
	margin:0.5em 0;
	display:block ;
	font-size:.7em;
	line-height:1.8em;
	color:rgb(252,92,5) ;
}

#panelAlerts .ui-datepicker-trigger {
	vertical-align:middle;
	margin:0 0 0 10px;
}

#panelAlerts .white {
	margin:10px 0;
}

#panelAlerts input,
#panelAlerts p {
	padding:0;
	margin:0;
}

#panelAlerts label {
	display:inline-block;
	font-size:0.7em;
	font-weight:bold;
    line-height:115%;
}

#panelAlerts .leg span {
	float:left;
	display:block;
	font-size:0.7em;
	font-weight:bold;
	margin:0;
	line-height:23px;
	padding-right:40px;
}

#panelAlerts .leg span.bus {
	background:url(/translink/images/icon-bus-small.gif) no-repeat 80% 0%;
}

#panelAlerts .leg span.skytrain {
	background:url(/translink/images/icon-skytrain-small.gif) no-repeat 80% 0%;
}

#panelAlerts .leg span.seabus {
	background:url(/translink/images/icon-seabus-small.gif) no-repeat 80% 0%;
}

#panelAlerts .leg span.westcoastexpress {
	background:url(/translink/images/icon-wce-small.gif) no-repeat 80% 0%;
}

#panelAlerts .leg p {
	float:left;
	line-height:23px;
	width:80%;
}


#panelAlerts .heading {
	padding-left:10px;
	line-height:150%;
}

#panelAlerts h2 {
	margin:0;
	padding:0;
	font-size:0.7em;
}

#panelAlerts .col1 {
	float:left;
	width:5%;
}

#panelAlerts .heading .col1 
{
    width:7%;
}

#panelAlerts .col1 input 
{
    margin:5px 0 0 0;
}

#panelAlerts .col2 {
	float:left;
	width:40%;
}

#panelAlerts .heading .col2
{
    width:37.50%;
}


#panelAlerts .col3 {
	float:left;
	width:40%;
}

#panelAlerts .col4 {
	float:left;
	text-align:right;
	width:15%;
}

#alertPreferences label {
	font-weight:normal;
}

#panelAlerts table.systemwide td,
#panelAlerts table.weekdays td {
    padding:5px 5px 0 0;
}

#panelAlerts table.systemwide label,
#panelAlerts table.weekdays label {
    font-weight:normal;
    font-size:100% !important;
}

#panelAlerts label {
    padding:0 0 0 5px;
}

#panelAlerts .lnk_alertName {
    font-size:0.7em;
    font-weight:bold;
}










/**
* Notifications
*/

#columns #content.content-wide {
	width:730px;
}

#content .page {
	padding:10px;
}

#notifications {
	background:#EDEDED;
    position:relative;
}

#notifications h1,
#notifications .white, 
#notifications .blue {
	-moz-border-radius:8px;
	-webkit-border-radius:8px;
}

#notifications .right,
#preferences  .right { text-align:right; }


#notifications .white {
	background:#FFF;
	padding:10px;
}

/**
* Container - blue background, 10px padding
*/
#notifications .blue {
	background:#edf5f4;
	padding:10px;
}

/**
* Reset margins
*/
#notifications h1,
#notifications h2,
#notifications h3 {
	margin:0;
}

#notifications h1 {
	display:block;
	background:#1361A5;
	color:#FFF;
	line-height:26px;
	padding:0 5px 0 10px;
	font-size:0.7em;
}

#step1 .tripName,
#step2 .tripLegOpen,
#step2 .tripLegClosed,
#step3 .section,
#notifications .collapsible {
	margin:10px 0 0 0 ;
}

/**
* Collapsible boxes
*/

#notifications .collapsible h3 {
	background: #edf5f4 url(/translink/images/collapsible-close.gif) no-repeat 95% 50%;
	display:block !important;
	padding:5px;
	margin-right:10px;
	cursor:pointer;
}

#notifications .collapsible h3.collapsible-closed {
	background: #edf5f4 url(/translink/images/collapsible-open.gif) no-repeat 95% 50%;
}

/* Checkbox lists */
#notifications .cb-list {
	margin:0;
	padding:0;
}


#notifications .cb-list td {
    padding-bottom:5px;
}

#notifications .cb-list td input {
    float:left;
    display:inline;
    margin:0 5px 0 0;
    padding:0;
}

#notifications .cb-list td input[type=radio],
#notifications .cb-list td input[type=checkbox] {
    margin:0 5px 0 0;
    padding:0;
    width:13px;
    height:13px;
    
}

/* Global contextual help icon */
a.help {
	display:inline-block;
	width:15px;
	height:15px;
	margin:0 0 0 5px;
	vertical-align:middle;
}

/* Contextual help pop up */
div.help { display:none; }

.valsummary ul
{
	display: none;
	visibility: hidden;
}

.tab-help {
	background:none;
	width:230px;
	height:auto;
	margin:0;
	font-size:0.8em;
}
.tab-help-top {
	background:url(/translink/images/help_popup_top.gif) 0 bottom no-repeat;
}
.tab-help-middle {
	background:url(/translink/images/help_popup_tile.gif) 0 0 repeat-y;
}
.tab-help-middle-grey {
	padding:5px;
}
.tab-help-bottom {
	background:url(/translink/images/help_popup_bottom.gif) 0 0 no-repeat;
}
.tab-help .btnClose-x {
	background:url(/translink/images/btnClose_x.gif) right 0 no-repeat;
}




/* Error classes */
#notifications .error-icon-d {
	color:#FF0000;
	background:url(/translink/images/icon-field-error.gif) no-repeat;
	padding:0 0 0 25px;
	margin:5px 0;
	line-height:20px;
    display:block;
}

#panelAlerts label.error-icon-d {
	color:#FF0000;
	padding:0 0 0 40px;
	margin:0;
	line-height:20px;
    display:block;
}


#notifications .error-icon-d ul,
#preferences div.error-icon-d ul {
    font-size:100% !important;
}

#notifications .error {
	color:#FF0000;
    font-size:0.7em;
}

#notifications .button-panel {
	margin:10px 0 0 0;
}

#notifications .button-panel .col {
	float:left;
	width:50%;
}

/**
* Intro paragraph for each step, left aligned
*/
#notifications p.txtIntro {
	margin-left:10px;
}

/**
* Setup Notification
*/

#step1 .button-panel 
{
    margin:20px 0 0 0;
}

#servicestep .col1,
#accessibilitystep .col1
{
    float:left;
    width:200px;
    display:inline;
}

#servicestep .col2,
#accessibilitystep .col2
{
    margin:0 15px 0 250px;
}

#servicestep .routes,
#accessibilitystep .stations
{
    margin:10px 0 0 0;
}


/**
* Step 1 - Name Your Trip
*/
#step1 .tripName p {
	margin:0;
	line-height:27px;
}

#step1 .tripName #txtTripName {
	padding:3px;
	width:75%;
}

#step1 .tripName .col {
	float:left;
	width:50%;
}

/**
* Step 2 - Add Trip Legs - Closed
*/
#step2 .tripLegClosed .col1 { float:left; width:80%; }
#step2 .tripLegClosed .col2 { float:left; width:20%; }

#step2 .tripLegClosed .leg div {
	float:left;
	display:block;
	font-size:0.7em;
	font-weight:bold;
	margin:0;
	line-height:23px;
}

#step2 .tripLegClosed .leg div span {
    padding-right:30px;
    display:inline-block;
}

#step2 .tripLegClosed .leg span.bus {
	background:url(/translink/images/icon-bus-small.gif) no-repeat 80% 0%;
}
#step2 .tripLegClosed .leg span.seabus {
	background:url(/translink/images/icon-seabus-small.gif) no-repeat 80% 0%;
}
#step2 .tripLegClosed .leg span.skytrain {
	background:url(/translink/images/icon-skytrain-small.gif) no-repeat 80% 0%;
}
#step2 .tripLegClosed .leg span.wce {
	background:url(/translink/images/icon-wce-small.gif) no-repeat 80% 0%;
}

#step2 .tripLegClosed .leg p {
	float:left;
	line-height:23px;
	width:80%;
	margin:0;
	padding:0;
}

#step2 .tripLegClosed .leg p span {
    display:inline;
    font-size:100%;
    float:none;
    font-weight:normal;
    padding:0;
}

#step2 .tripLegClosed .leg p strong span {
    font-weight:bold;
}

/**
* Step 2 - Add Trip Legs - Open
*/
#step2 .tripLegOpen .col1 {
	float:left;
	width:20%;
}

#step2 .tripLegOpen .col2 {
	float:right;
	width:75%;
}

#step2 .tripLegOpen .col2 .col1 {
	float:left;
	width:40%;
}

#step2 .tripLegOpen .col2 .col2 {
	float:right;
	width:58%;
}

#step2 .tripLegOpen h2 {
	margin:0 0 10px 0;
	font-size:0.7em;
	line-height:150%;
}

#step2 .tripLegOpen .col2 {
	padding:10px 0 0 0;
}
#step2 .tripLegOpen .col2 .col1,
#step2 .tripLegOpen .col2 .col2 {
	height:145px;
	padding:5px 0 0 0 ;
	overflow-y:scroll;
}

#step2 .tripLegOpen .col2 .col1 h3,
#step2 .tripLegOpen .col2 .col2 h3 {
	display:inline;
}

#transitMode ul, #transitMode2 ul {
	margin:0;
	padding:10px 0 0 0;
	list-style:none;
}

#transitMode ul li, #transitMode2 ul li {
	display:block;
	height:40px;
	margin-bottom:7px;
	line-height:40px;
}

#transitMode ul li a, #transitMode2 ul li a {
	outline:0;
	display:block;
	height:40px;
	padding-left:50px;
	text-decoration:none;
}


#transitMode ul li.bus {
	background:url(/translink/images/icon-mode-bus.gif) no-repeat;
}

#transitMode ul li.skytrain, #transitMode2 ul li.skytrain {
	background:url(/translink/images/icon-mode-skytrain.gif) no-repeat;
}

#transitMode ul li.seabus, #transitMode2 ul li.seabus {
	background:url(/translink/images/icon-mode-seabus.gif) no-repeat;
}

#transitMode ul li.wce, #transitMode2 ul li.wce {
	background:url(/translink/images/icon-mode-train.gif) no-repeat;
}

#transitMode ul li.hover, #transitMode2 ul li.hover {
	background-position:0% 100%;
}

#quickFind {
    border-bottom:1px solid #ccc;
    width:100%;
    
}

#quickFind table {
    width:75%;
	padding:0;
	margin:15px 0;
	font-size:0.7em;
}

#quickFind td {
    vertical-align:middle;
    padding-right:10px;
}

#quickFind label {
	font-weight:bold;
	margin-right:20px;
}

#quickFind #inputQuickFind {
	width:50%;
	padding:3px;
}


/**
* Step 3 - Set Up Notifications
*/

#step3 #notifyDays h1 
{
    margin:10px 0;
}

#step3 div.indent {
	display:block;
	margin-left:25px;
	font-size:0.7em;
}

#step3 div.indent select {
	margin:10px 0 0 85px;
}

#step3 .optSystemAlert input {
	float:left;
}

#step3 .optSystemAlert label {
	float:left;
	margin-left:5px;
	display:inline;
	width:90%;
}

#step3 table.days td {
    padding:0 5px 0 0;
}

#step3 ul {
	margin:10px 0 0 0;
	padding:0;
	list-style:none;
}

#step3 ul.days li {
	float:left;
	padding-left:10px;
}

#step3 ul.times li {
	float:left;
	padding-left:10px;
}

#step3 ul.days li.first,
#step3 ul.times li.first {
	float:left;
	padding-left:0px;
	width:50px;
}

#step3 li span {
	display:block;
	text-indent:23px;
	font-size:90%;
}

#step3 #inputMobile1 {
	width:30px;
}

#step3 #inputMobile2 {
	width:40px;

}
#step3 #inputMobile3,
#step3 #inputMobile4 {
	width:50px;

}

.contact-indent {
    padding-left:22px;
    font-size:0.7em;
}

.contact-indent select {
    margin:10px 0 0 90px;
}

#panelAlerts .contact-indent label {
    font-weight:normal;
    font-size:100% !important;
}

#panelAlerts p span label {
    font-size:100% !important;
    margin-top:10px;
}
/*

#panelAlerts label a {
    display:block;
    line-height:115%;
}
*/

/**
* Buttons
*/

input.button {
	border:0;
	cursor:pointer;
	padding:0;
	margin:0;
	text-indent:-9999px;
}

input.cancel {
	background:url(/translink/images/btn-cancel.gif) no-repeat;
	width:70px;
	height:27px;
	line-height:27px;
}

input.save {
	background:url(/translink/images/btn-save.gif) no-repeat;
	width:57px;
	height:27px;
	line-height:27px;
}

input.change {
	background:url(/translink/images/btn-change.gif) no-repeat;
	width:75px;
	height:27px;
	line-height:27px;
}

input.update {
	background:url(/translink/images/btn-update.gif) no-repeat;
	width:70px;
	height:27px;
	line-height:27px;
}

input.delete {
	background:url(/translink/images/btn-delete.gif) no-repeat;
	width:65px;
	height:27px;
	line-height:27px;
}

input.go {
	background:url(/translink/images/btn-go.gif) no-repeat;
	width:46px;
	height:27px;
	line-height:27px;
	margin-left:6px;
}

input.add-leg {
	background:url(/translink/images/btn-add-leg.gif) no-repeat;
	width:132px;
	height:27px;
	line-height:27px;
}

input.save-trip-disabled {
	background:url(/translink/images/btn-save-trip-disabled.gif) no-repeat;
	width:81px;
	height:27px;
	line-height:27px;
}

input.save-trip-enabled {
	background:url(/translink/images/btn-save-trip-enabled.gif) no-repeat;
	width:81px;
	height:27px;
	line-height:27px;
}

input.save-name-enabled {
	background:url(/translink/images/btn-save-name-enabled.gif) no-repeat;
	width:94px;
	height:27px;
	line-height:27px;
}

input.save-name-disabled {
	background:url(/translink/images/btn-save-name-disabled.gif) no-repeat;
	width:94px;
	height:27px;
	line-height:27px;
}

input.save-alert-enabled {
	background:url(/translink/images/btn-save-alert-enabled.gif) no-repeat;
	width:87px;
	height:27px;
	line-height:27px;
}

/** Newsletters module **/

div.newsletters h2 {
    color:#FFF;
}

div.newsletters .blue {
    background:#edf5f4;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
    margin:10px;
    padding:5px;
}

div.newsletters .blue input {
    float:left;
    padding:0;
    margin:0 5px 0 0;
}

div.newsletters .blue strong {
    float:left;
    width:120px;
}


div.newsletters .blue p {
    padding:0;
    margin:0;
}

div.newsletters .blue div p {
    padding-left:25px;
}

div.newsletters p.indent {
    padding:0 0 5px 20px;
}

div.newsletters .btnNewsletters {
    margin:0 0 0 10px;
}

/** Modal **/

.GrayedOut {
    background-color:#000;
    filter:alpha(opacity=50);
    -moz-opacity:0.5;
    -khtml-opacity: 0.5;
    opacity: 0.7;
}

.ModalPopup {
    font-size:75%;
    font-weight:bold;
    width:350px;
}

.ModalPopup .blue {
	background:#edf5f4;
	padding:10px;
	-moz-border-radius:8px;
	-webkit-border-radius:8px;
}

.ModalPopup .white {
	background:#FFF;
	padding:10px;
	-moz-border-radius:8px;
	-webkit-border-radius:8px;
}

.ModalPopup .button-panel {
	margin:10px 0 0 0;
}

#profileTabs 
{
    margin:25px 0 0 0;
}

#profileTabs .ui-tabs-panel
{
    font-family:Verdana, Arial, Sans-Serif;
    background:#FFF;
    padding:10px;
    -webkit-border-radius: 8px;
    -webkit-border-top-left-radius: 0;
    -moz-border-radius: 8px;
    -moz-border-radius-topleft: 0;
    border-radius: 8px;
    border-top-left-radius: 0;
}

#profileTabs .ui-tabs-nav 
{
    list-style:none;
    margin:0;
    padding:0;
}

#profileTabs .ui-tabs-nav a
{
    top:0;
    text-transform:capitalize;
}



/* tabs 
#preferences {
  width:600px ;
  font-size:0.65em ;
  float:left;
  padding:1px 0 0 15px;
}

#preferences #tabs {
  background:url(../images/trip/background-trip-widget.gif) no-repeat 0 -2px ;
  width:600px;
  height:350px;
  padding:15px;
  margin:0;
  position:relative;
}

#preferences .ui-tabs-nav a, #preferences .ui-tabs-nav a span {
    background: url(../images/trip/sprite-tabs.gif) no-repeat bottom right;
}

#preferences .ui-tabs-nav a span {
    background-position: bottom left;
}

#preferences .ui-tabs-nav a {
    top:0px; 
}

#preferences .ui-tabs-nav a span {
    height: 40px;
    line-height: 30px;
}

#preferences .ui-tabs-nav .ui-tabs-selected a {
    top:0px;
    background-position:top right;
}

#preferences .ui-tabs-nav .ui-tabs-selected a span {
    height: 40px;
    line-height: 30px;
    background-position:top left;
}

#preferences .ui-tabs-nav .ui-tabs-disabled a:link,
#preferences .ui-tabs-nav .ui-tabs-disabled a:visited {
    color: #1361A5;
}

*/
