@charset "utf-8";

html {
	height:100%;
}

body {
	/* csshover3.htc is to fix IE6 CSS problems (allow hover for almost all tags) */
	behavior: url("csshover3.htc");
	margin: 0;
	padding: 0;
	font-family: "Open Sans", Arial, Helvetica, sans-serif;
        font-weight:300;
	height:100%;
	display:block;
	color:#333;
	background:#eee;
}
	
#alert, #alert span {
	color: #C00 !important;
}
.appBody #notes {
	padding: 0em 0.5em 1em 0.5em;
	font-size: 0.75em;
	text-align: center;
}

.appBody #success {
	padding: 0em 0.5em 1em 0.5em;
	font-size: 0.75em;
	text-align: center;
	color:#006600;
}

.button {padding:.2em .4em;background:#fff;-moz-border-radius: 4px;-webkit-border-radius: 4px;border-radius:4px;-moz-box-shadow:1px 1px 1px rgba(0,0,0,0.2);
	-webkit-box-shadow:1px 1px 1px rgba(0,0,0,0.2);
	-o-box-shadow:1px 1px 1px rgba(0,0,0,0.2);
	box-shadow:1px 1px 1px rgba(0,0,0,0.2);}
.button:hover {background:#fcfcfc;}
.button a:hover {text-decoration: none !important;}

.divider {height:2px;background-image:url(../images/divider.png);margin:6em 0;}

.how img, .who img {display:block;margin:auto;}
.how div {font-size:1.1em;}
.how p span {font-size:1.5em;color:#000;margin:0 0 0 -1.2em;font-weight:700;display:block;float:left;}

.why p {margin-bottom:2em;}

.why h3 {color:#226CB5;text-align:right;}
.who h2 {color:#226CB5 !important;}

h2.login {font-family: "Open Sans" !important;font-weight:300 !important;font-size:3em;color:#000 !important;}

.segment_login h1 {font-size:2.5em;line-height:1.1em;}
.segment_login h1 + p {font-size:1.5em;}

/* HEADER

=========================== */

.appBody .header {
	margin:0!important;
	background:#222;
}
.appBody .accounts {
	margin-top: 4px;
        text-align:right;
}
.appBody #welcome {
	margin-top: 12px;
}
.loginform {font-size:.7em;}
#loginHeader, .prize-modal {
        width:280px;
	line-height: 2em;
	color:#000;
	padding:.5em;
	text-align:left;
	background:#fff;
	position:fixed;
	top:50%;
	left:50%;
	margin-left:-150px;
	margin-top:-120px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	-moz-box-shadow:2px 2px 3px rgba(0,0,0,0.2);
	-webkit-box-shadow:2px 2px 3px rgba(0,0,0,0.2);
	-o-box-shadow:2px 2px 3px rgba(0,0,0,0.2);
	box-shadow:2px 2px 3px rgba(0,0,0,0.2);
}

#how, #where, #what {
        color:#000;
        width:90%;
	padding:1.5em;
        position:absolute;
        top:50px;
        left:0;
        font-family:"Open Sans";
        font-size:.8em;
	background:#fff;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	-moz-box-shadow:2px 2px 3px rgba(0,0,0,0.2);
	-webkit-box-shadow:2px 2px 3px rgba(0,0,0,0.2);
	-o-box-shadow:2px 2px 3px rgba(0,0,0,0.2);
	box-shadow:2px 2px 3px rgba(0,0,0,0.2);
        z-index: 50000;
}

.accounts a {color:#ccc !important;}

#loginHeader a {
	font-size:0.8em;
	color:#5AB7FA;
	
}
#loginHeader label{margin-right:.5em;}
#loginHeader div {display:block;}
#loginHeader input {font-size:1em;border:solid 1px #ccc;background:#fafafa;width:160px;}
.loginform .button {background:#226CB5;color:#fff;border:none;font-family:"Rokkitt";font-size:1.2em;padding:.5em 1em;margin-left:1em;cursor:pointer;}
#loginHeader .rememberMe input {line-height: 1em;vertical-align: middle;border:none;padding: 0; margin: 0; background:none;width:auto;}
#loginHeader .rememberMe label {line-height: 1em;font-size:0.8em;color:#5AB7FA;margin-right:auto;}
.loginform .rememberMe {line-height: 1em; margin-bottom: 1em;margin-top:.8em;}

#teamStatsLink {text-align:center;margin-top:2em;}
#showLoginButton {text-align:center;margin-top:1em;}
#showLoginButton a{font-size:1.2em;font-family:"Rokkitt";padding:.5em 1em;background:#226CB5;color:#fff;-moz-box-shadow:1px 1px 1px rgba(0,0,0,0.2);
	-webkit-box-shadow:1px 1px 1px rgba(0,0,0,0.2);
	-o-box-shadow:1px 1px 1px rgba(0,0,0,0.2);
	box-shadow:1px 1px 1px rgba(0,0,0,0.2);
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;}
#closeLoginHeader {margin-top:-2em;margin-right:-2.3em;}

#ticker {height:6em;overflow:hidden;margin-top:1em;}
#ticker li {height:6em;list-style: none;text-align:right;padding-right:3em;}
.scrollNumber {font-family:"Rokkitt";color:#333;font-size:4em;}

h1, h2 {color:#226CB5;}

.logo {padding:.6em;}
.how_video {height:25em;background:#000;}
.brand {padding:1em 0;text-align:center;}

/* FOOTER

=========================== */

.appBody #footer {
	behavior: url(PIE.htc);
	margin-top: 2em;
	color: #999;
	text-align: center;
	padding: 1em 0px;
}  
.appBody #footer a {
	color: #333;
}
.appBody #footer p {
	margin: 0;
}

/* GENERAL STYLES

=========================== */

.small {font-size:.8em;}

.blue {color:#036;}

.green{color:#b2bb1e}

.gray{color:#bbb;}

.bold {font-weight:bold;}

.alignC {text-align:center;}
.alignR{text-align:right;}
.alignL{text-align:left;}

.cursive {font-family:"Dancing Script", cursive;}

.pad {padding:10%}
.banner {height:40em;width:100%;background-size:cover;overflow:hidden;position:relative;background-position:center;}
.banner video {width:100%;height:auto;position:absolute;bottom:0;left:0;}
.banner .mobile-video img{width:100%;height:auto;position:absolute;bottom:0;left:0;display:none;}
.banner .copy {position:absolute;color:#fff;font-size:3em;width:40%;left:55%;padding-top:2.5em;line-height:1.1;}
.banner .button {background:#f60;font-size:.6em;padding:.6em;font-weight:bold;color:#fff;}
.banner .button:hover {color:#fff;background:#e65c00;}
.contain {max-width:100em;margin:auto;background:#fff;}
.bluebar {text-align:center;font-weight:bold;font-size:2em;color:#fff;background:#2e3192;padding:1em;}

.segment_video fieldset {border:none;max-width:50em;margin:auto;}
.segment_video .contactPB input {padding:.5em;}
.contactPB .button {font-size: 1.3em;background: #f60;color: #fff;padding: .5em 1em;margin: .2em;border-radius: 4px;border:none;}

.video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px; height: 0; overflow: hidden;
}
 
.video-container iframe,
.video-container object,
.video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.register h3 {margin-top:3em;}
.register .button {background:#2e3192;color:#fff;padding:.4em 1em;}
.register .button:hover {color:#fff;}


/* ACTION BAR
============================= */

.actionbar {text-align:right;padding:0; margin: 0;}

.actionbar a {margin-right:2em;display:inline-block;color:#999 !important; zoom:1;
	*display: inline;}

.actionbar img {display:block;margin:0 auto;}


/* DASHBOARD ELEMENTS
=============================== */

.mainpanel {margin:0 !important;height:28em;}

.mainpanel h1{font-family:"Open Sans", Arial, Helvetica, sans-serif;font-size:1.5em;margin:.7em 1em;font-weight:300;text-align:center;color:#fff}

.mainpanel .pad {padding:0 2em;}

.stats {padding:.2em 3em;font-size:1.2em;color:#fff;}
.stats span {font-size:2.5em;}
.dashboardSummaryBox {background:#ccc;}

.calendarpanel, .welcomepanel, .mystatspanel {height:28em;}

.statsBox {width:16em;margin:auto;}
.statsBox p {color:rgba(255,255,255,.4);font-size:.8em;margin-left:50px;}
.mystatspanel {background:#348899;}
.greenzone h3 {font-weight:300;color:#fff;margin-top:2em;}
.greenzone .numbers {font-size:2.1em;color:rgba(255,255,255,1);}
.greenzone .pad{margin-top:3em;margin-left:60px;}
.greenzone img {margin-left:-50px;float:left;}
.numbers{line-height:1.1em;font-size:1.1em;color:#000;}
.numbers p{height:24px;}
.statsSmall{font-size:4em;color:#fff;text-align:center;}
.segment_dashboard #date,  .segment_commuter #date{
  margin: 20px;
  color:#962d3e;
  border-radius:0;
  	-moz-border-radius: 0; 
	-webkit-border-radius: 0;
  background: rgba(255,255,255,.7);
  background-image:url('../images/red-toggle.png');
  background-repeat:no-repeat;
  background-position:95% center;
  width: 150px;
  padding: 5px 5px 5px 5px;
  font-size: 16px;
  border: none;
  height: 34px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.calendarpanel h3 {font-size:1.4em;font-family:"Open Sans";margin:0;text-align:center;}
.badges {width:80%;margin:4em auto 0;color:rgba(255,255,255,.3);}
.calendarpanel{background:#962d3e;}
.welcomepanel {background:#343642;color:#fff;}
.welcome {color:rgba(255,255,255,.3); margin-top:4em;}
.panel {}

.commuterdash {
	height:36em;	
}

.mainpanel .stats {}

#trendBox {height:17em;}

.flipcounter {
	font-family:"Inconsolata", sans-serif;
	font-size:8em;
	width:.6em;
	margin:auto;
	padding:.1em .08em 0;
	margin:.2em .03em 0;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	background: #036;
	-webkit-box-shadow: 1px 1px 3px #ccc;
	-moz-box-shadow: 1px 1px 3px #ccc;
	box-shadow: 1px 1px 3px #ccc;
	color:#fff;
	display:inline-block;
}
#qualification {
        color: #F30;
        text-align:center;
        margin:1em auto;	
	width:80%;
	padding:.5em 0;
	font-size:.85em;
}
#zappedornot {
	margin:1em auto;
	color:#fff;	
}
#thismonth {
	font-size:1.5em;
	text-align:center;
	margin-left:.2em;
	margin-top:1em;
	color:#666;
	line-height:1.1em;
}
#totals {text-align:center;margin:auto;font-size:.9em;-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;}
#totals .number {
	font-size:2.5em;
	font-weight:bold;
	width:3em;
	display:block;
	color:#000;
}
#totals .category {display:inline-block;color:#999; zoom:1
	*display: inline;}
#totals img {margin:0 .3em;}
.seePrizesButton {
	padding:0.7em;
	background-color:#F30;
	color:#fff;
	width:60%;
	margin:1em auto;
	text-align:center;
	display:block;
	border-radius: 5px; 
	-moz-border-radius: 5px; 
	-webkit-border-radius: 5px;
}
.myStats {
	background-color:#dadada;
        -moz-box-shadow: inset 0px 0px 5px #bbb;
        -webkit-box-shadow: inset 0px 0px 5px #bbb;
        box-shadow: inset 0px 0px 5px #bbb;}
.quickview form {text-align:center;padding:2em 0;}
#points {text-align:center;}
#points h1 {font-family:"Open Sans";font-size:5em;margin:.2em 0 0;}
#points .threshold {
	color:#093;
}
.passEarned {color:#093;margin:0;}
.reportTable {margin:auto;}
.zappedToday {font-family:"Open Sans", sans-serif;font-size:.5em;margin:0 auto;}
.zappedornot {padding-top:1em;text-align:center;font-size:1.5em;}
.firstname{font-size:2.5em;color:rgba(255,255,255,1)}
.commuterName {background:#ddd;text-align:center;padding:.3em;}
.commuterName a {margin:0 1em;color:#fff;}
.commuterName h2 {margin:0;font-family:"Open Sans";}

/* So floats in container display properly in FF */
.appBody #navigationContainer:after{
	display: block; clear: both; content:' '; height: 0px;	
}

.appBody #sectionParameters {
	text-align: center;
	vertical-align: middle;
}

.appBody #calPopup {
	position:absolute;
	visibility:hidden;
	background-color:white;
}

.appBody #mainContent {
	padding-bottom:100px;		
}

.appBody a img {
	border:none;
}
.appBody a {
	color: #03C;
	text-decoration: none;
}
.appBody a:hover {
	color: #036;
	text-decoration: none;
}

.appBody #container .ui-widget {
	text-align: left;
}

/* Do not use z-index over 999, else modal dialogs will be obstructed */
.header img {position:relative;z-index:900;}
.appBody #container .ui-widget {
	text-align: left;
}
body .ui-widget {
	text-align: left;
}

.quickview {overflow: auto;}

/* FROM LOGIN_MAIN */

.clearfloat {
	clear: both;
}

.appBody #sectionTitle {
	padding: 0.5em 0.5em;
}

/* So floats in container display properly in FF */
.appBody #navigationContainer:after{
	display: block; clear: both; content:' '; height: 0px;	
}

.appBody #sectionParameters {
	text-align: center;
	vertical-align: middle;
}

.appBody #calPopup {
	position:absolute;
	visibility:hidden;
	background-color:white;
}

.appBody #notes {
	padding: 0em 0.5em 1em 0.5em;
	font-size: 0.75em;
	text-align: center;
}

.appBody #success {
	padding: 0em 0.5em 1em 0.5em;
	font-size: 0.75em;
	text-align: center;
	color:#006600;
}

.appBody #notification {
	padding: 0em 0.5em 1em 0.5em;
	font-size: 0.75em;
	text-align: center;
	color: #FF0000;
	float:right;
	margin-top:2em;
	margin-right:5em;
}

.appBody #footer p {
	margin: 0;
	text-align: center;
}

.appBody h2 {
	color: #69C;
        font-family:"Open Sans";
        font-weight:normal;
}

.appBody #ride_stats {
	font-size: 0.7em;
	font-weight: normal;
	width: 351px;
	padding: 12px;
	background-image: url(../images/stats-box-bg.gif);
	background-position: bottom;
	margin-bottom: 12px;
}
.appBody #ride_stats table {
	width: 100%;
}
.appBody #ride_stats table tbody tr td {
	text-align: right;
}
.appBody #ride_stats table tbody tr th {
	text-align: right;
	font-weight: normal;
	white-space: nowrap;
}
.appBody #ride_stats table thead tr td {
	color: #666;
	text-align: right;
}

#rideCountBox {
	height: 284px;
	width: 370px;
	position: absolute;
	left: 533px;
	top: 10px;
}
#rideCountBox h1 {
	text-align: center;
	font-size: 2.2em;
}
#rideCountBanner {
	background:#ccc;
	height: 140px;
	width: 300px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
}
#rideCountBanner .numbers {
	font-family:"Rokkitt";
	font-size: 3em;
	color: #fff;
}
#rideCountBanner #rideCountContent {
	width: 250px;
	margin-right: auto;
	margin-bottom: auto;
	margin-left: auto;
	color: #666;
}
#rideCountBanner #rideCountContent p {
	border-bottom-width: 1px;
	border-bottom-style: dotted;
	border-bottom-color: #FFF;
	padding-bottom: 0.5em;
	padding-top: 1em;
	text-align: center;
}

#rideCountBox #teamStatsLink {
	height: 20px;
	text-align: center;
	color: #666;
}

#homeTeasers {
	padding-top: 20px;
	margin-top:2em;
}

#homeTeasers  h1 {
	font-family:"Rokkitt";
	font-size: 1.4em;
	font-weight: normal;
	color: #226CB5;
}
#homeTeasers  a{
	background-color: #F60;
	font-size: 1em;
	color: #FFF;
	font-family:"Rokkitt";
	-webkit-box-shadow: 1px 1px 2px #666;
	-moz-box-shadow: 1px 1px 2px #666;
	box-shadow: 1px 1px 2px #666;
	display: block;
	float: left;
	text-decoration: none;
	padding-top: 0.2em;
	padding-right: 0.6em;
	padding-bottom: 0.2em;
	padding-left: 0.6em;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
}

.example-link .text {background:#eee;padding:1em;height:5em;}

#otherLinks {
    text-align:center;
}
#otherLinks a {
    margin:.2em;
}

#overlay {background:rgba(0,0,0,.4);width:100%;height:100%;z-index:500;display:none;position:fixed;left:0;top:0;}


/* the overlayed element */
.simple_overlay {
 
    /* must be initially hidden */
    display:none;
 
    /* place overlay on top of other elements */
    z-index:10000;
 
    /* styling */
     min-height:200px;
 
  
	
}
 
/* close button positioned on upper right corner */
.close {
	background-image:url(../images/close-popup.png);
	position:absolute;
	right:-15px;
	top:-15px;
	cursor:pointer;
	height:32px;
	width:32px;
}
#topTabs {font-family:"Open Sans";margin:2em 0;}
#topTabs span {padding:1em;}
#topTabs .on {font-size:2em;}
/*.leftLinks p {
height: 80px;
margin-top: 0.5em;
text-align: center;
padding-top: 30px;
font-family:"Dancing Script";
font-size:1.3em;
}
.leftLinks .selected span{
color: #FFF;
background:#226CB5;
padding:.6em 1em;
}

 .leftLinks .selected span:before, .leftLinks .selected span:after
{  
    content: "";
	position:abolute;
    border-top:1em solid #226CB5;
	border-right:.5em solid #226CB5;
	border-bottom:1em solid #226CB5;
	border-left:.5em solid #226CB5; 
} 
.leftLinks .selected span:after {
	border-right-color:transparent;
}*/
/*.ribbonLinks .ribbon {overflow:hidden;}
.ribbonLinks .ribbon:before, .ribbonLinks .ribbon:after {
    content: "";
    float:left;
    border:.7em solid #fff;
}
.ribbonLinks .ribbon:before {
    border-left-color:transparent;
}
.ribbonLinks .ribbon:after {
    border-right-color:transparent;
} */
.ribbonLinks .ribbon span {
    color:#000;
    background:#fff;
    overflow:hidden;
    padding:.5em !important;
    height:1.4em;
}

.prize-list {
    background:#fff;
   -moz-border-radius: 5px;
   -webkit-border-radius: 5px;
   border-radius: 5px;
   font-size:.8em;
}

.prize-list img {
    max-height: 150px;
    max-width: 150px;
}
.prize-list h3 {color:#000;font-family:"Rokkitt"}

.prize { 
   width:20%;
   margin: 2% 5%;
   position: relative;
   float:left;
   padding-left:110px;
}
.prize.has-button {
}

.prize img { 
   height:auto;
   width:auto;
   max-height:100px;
   max-width:100px;
   margin:0 auto;
}

.prizeImageContainer {
    width:100px;
    float:left;
    margin-left:-110px;
}

.prizeTextContainer {
    
}

.prize h2, .prize h3, .prize h4 {
    margin:0;
    padding:0;
}

.prize .noPrizeClaim, .prize .prizeClaimButton, .prize .prizeRedeemButton {
    display: inline-block;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    border:solid 1px #cccccc;
    padding:3px;
    margin-top:.75em;
}

.prizes h1 {font-family: "Rokkitt"}

.winnings h1{
    font-family:"Dancing Script";
    color: #b2bb1e;
}

.userRewardStats>div {
    display:inline-block !important;
}

.userRewardStats .standardButton {
    display:block !important;
    margin:auto;
    background:#fafafa;
    box-shadow: none;
    border: solid 1px #ccc;
}

.userSelection {
    list-style: none;
    padding:0;
    display: inline-block;
}

.userSelection li {
    margin:3px 0;
}

.userSelection .standardButton {
    display:block;
}
.userSelection .standardButton span {
    padding: 0 10px;
}
.team_ride_report tr > td:first-child { 
  text-align:left;
  color:#000;
}
.team_ride_report td {
    padding:.3em;
    color:#226CB5;
    margin:0;
}
.team_ride_report thead td{
    color:#666 !important;
    border-bottom:solid 1px #ccc;
}

.commuterSummary {background:#ddd;}
.commuterSummary thead {
    color:#666;
}
.commuterSummary tbody {
    color: #333;
}

.commuterSummary .reportTable {
    width:85%;
    margin: 2em 7.5%;
}

.commuterSummary caption {
    height:1.6em;
    line-height:1.6em;
    background:#bbb;
    position:relative;
    color:#fff;
}


.contentBlock {padding:0 1em;}

ul.contentBlock {
    padding: 0;
}
.rewardRedemptionSearch .userSelection li {
    text-align:left;
    border: solid 1px #ddd;
    margin:.3em;
    padding:.5em .5em;
}


.rewardRedemptionSearch .userSelection li span {
    font-weight:normal;
    margin:.5em;
}

.who .row > h1 {font-weight:normal;color:#000;text-align:center;margin:2em 0 0;}
.who .row > h2 {font-weight:300;font-size:3em;text-align:center;margin:0;}
.who .row > p {font-size:1.2em;}
.who .video {width:560px;height:315px;}
.who .column {margin:0 !important;background-size:cover;background-position:center;}
.example-link {width:25%;box-sizing:border-box;border:solid 2px #fff;text-align:center;}
.who .example-link {height:25em;position:relative;}
.example-link .image {height:20em;background-size:cover;background-position:center;}
.who a {display:block;width:100%;height:100%;text-align:center;transition:background .5s;-webkit-transition:background .5s;}
.who a:hover {background:rgba(0,0,0,.3);}
.who a span {display:inline-block;background:#226CB5;border-radius:4px;margin:auto;padding:.7em 1.2em;margin-top:8em;color:#fff;font-weight:bold;}
.who .k12 {background-image:url('../images/k12.jpg');}
.who .campus {background-image:url('../images/campus.jpg');}
.who .corporate {background-image:url('../images/corporate.jpg');}
.who .citywide {background-image:url('../images/citywide.jpg');}
.example .intro {font-size:1.4em;line-height:1.5em;padding:0em 3em;}
.example .quote {font-size:2.5em;border-top:solid 1px #333;border-bottom:solid 1px #333;padding:1em 0;margin:2em auto;max-width:20em;}
.example .spotlight {background:#fff;padding:4em 0;margin:3em 0;}
.example h1 {padding-top:3em;}
.example .corporate {background-image:url('../images/banner-corporate.jpg');}
.example .citywide {background-image:url('../images/banner-citywide.jpg');}
.example .campus {background-image:url('../images/banner-campus.jpg');}
.example .k12 {background-image:url('../images/banner-k12.jpg');}
.example .banner h1 {text-align:center;color:#fff;margin-top:2em;font-weight:300;font-size:4em;text-shadow:0 0 10px #000;}

.spotlight-header {font-size:.75em;color:#666;}
.segment_login .action {padding:6em 0;}
.action {padding:0}
.action a {font-size:1.6em;background:#f60;color:#fff;padding:.5em 1em; margin:.2em;border-radius:4px;display:inline-block;}
.action a:hover {background:#e65c00;color:#fff;}

.summary {font-family:"Rokkitt";color:#000;font-size:1.3em;}
.summary span {display:block;}
.summary .blue {color:#226CB5;}

.quotation {margin:10%;padding-left:40px;padding-top: 20px;background-image: url('../images/quote-open.png');background-repeat:no-repeat;}
.quotation .content {font-size:1.4em;line-height:2.2em;padding-bottom:20px;background-image: url('../images/quote-close.png');background-repeat:no-repeat;background-position: right bottom;}
.quotation .name {margin:0;font-style:italic;color:#000;}
.quotation .title {font-size:.8em;margin:0;}

.smallStatsBox .ui-tabs a {font-size: .8em; padding: .2em 1em !important;}
.smallStatsBox .standardTabs ul {display:table; margin:0 auto; padding:.2em 0 0;}
.smallStatsBox .ui-tabs li {border:none !important; padding: 0 !important; }
.smallStatsBox .ui-state-default {background:rgba(255,255,255,.4);}
.smallStatsBox .ui-state-default a:link {color:#348899;}
.smallStatsBox .ui-state-active {background:rgba(255,255,255,1);}

.smallStatsBox .ui-state-active a:link{color:#348899;}

.simpleList .smallButton {
    margin-right:.5em;
}

.block_ALERT {color:#f00;text-align:center;background:#fff;border:solid 1px #f00;margin-top:.5em;padding:.1em;-webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;}
.block_AWARD_NOTICE{color:#099C09; font-size:.7em;}
.block_COMMUTER_BOXES{padding:2em;margin-bottom:1em !important;}


.desktop-hide {display:block;}
.mobile-header {float:none !important;width:240px !important;margin:auto !important;text-align:center;background:#fff;height:50px;line-height:50px;position:relative;}
.mobile-header:before {left:-2em;border-right-width:25px;border-left-color:transparent !important;}
.mobile-header:before, .mobile-header:after {
content: "";
position: absolute;
display: block;
bottom: 0;
border: 25px solid 
#fff;
z-index: -1;
}
.mobile-header:after {
right: -2em;
border-left-width: 25px;
border-right-color: 
transparent;
}

div.reportDashboardSummary table thead, .calendarSummary table thead {
	display:none;
}

.calendarSummary table {padding:1em;background:#fff;}
.calendarSummaryBox {
    background: #ccc;height:26em;
}


.reportTable {
	width:80%;
	border-spacing:0px;
	margin:0 auto 2em;
}
.reportTable td{padding-left:.5em}
.reportDashboardSummary caption {display:none !important;}

.quickview select, #reporttoggle {margin: 10px;
  color:#fff;
  border-radius:0;
  	-moz-border-radius: 0; 
	-webkit-border-radius: 0;
  background-color:#348899;
  background-image:url('../images/white-toggle.png');
  background-repeat:no-repeat;
  background-position:95% center;
  width: 80%;
  padding: 5px 5px 5px 5px;
  font-size: 16px;
  border: none;
  height: 34px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;}
  
.quickview select {width:18em;background:#343642;background-image:url('../images/white-toggle.png');background-repeat:no-repeat;background-position:95% center;}
div.reportDashboardSummary table thead {
	display:none;
}

.reportDashboardSummary caption, .reportCommuterCalendar caption {display:none !important;}

/* #Media Queries
================================================== */

	/* Smaller than standard 960 (devices and browsers) */
	@media only screen and (max-width: 959px) {}

	/* Tablet Portrait size to standard 960 (devices and browsers) */
	@media only screen and (min-width: 768px) and (max-width: 959px) {
		
		.mainLinks {font-size:1em !important; margin-top:0 !important;}
		.fixed { position: fixed ; width:172px !important; }
		.main { padding-top:0 !important;}
		.fifth p {width: 25% !important;}
                .desktop-hide { display: none !important; }
                .prize {width:50% !important;}
		
		}

	/* All Mobile Sizes (devices and browser) */
	@media only screen and (max-width: 767px) {
		
            .who .video {width:300px;height:170px;}
            .mainLinks { font-size: 1.2em !important; line-height: 2em; margin-top:0 !important;}
		#search input[type="text"] { margin:auto !important; }
		.drop {width:100% !important;margin:0 !important;}
		.main { padding-top:0 !important;}
		.fifth p {width: 33% !important;}
                .zappedornot{padding-top:.2em !important;}
                #showLoginButton{margin-top:0 !important;}
                .prize{width:150px !important; margin:0 0 0 120px !important;border-bottom:solid 1px #ccc;padding:2em 0 !important;}
                .prize:last-child{border:none !important;}
		.standardForm label {
                    display: block;
                    font-weight: normal;
                    text-align: left;
                    padding: .4em;
                    font-size: 0.8em;
                    zoom: 1;
                }
                
		}

	/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
	@media only screen and (min-width: 480px) and (max-width: 767px) {
		
		.fixed { position:relative !important; width: 420px !important; text-align:center; }
		.drop {width:100% !important;margin:0 !important;}
		.boxLinks .one-third.column.drop{width:100% !important;margin:0 !important;text-align:center !important;}
		
		}

	/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
	@media only screen and (max-width: 479px) {
		
		.fixed { position:relative !important; width: 300px !important; text-align:center; }
		.drop {width:100% !important;margin:0 !important;}
		.fifth p {width: 50% !important;}
		.boxLinks .one-third.column.drop{width:100% !important;text-align:center !important;}
                .accounts {text-align:center !important;}
                
		}


/* RESPONSIVE LAYOUT
	
	
/* #Images
================================================== */

	img.scale {
		max-width: 100%;
		height: auto; }
	
	
/* #1800 Grid 
================================================== */


	.container { position: relative; margin: 0 auto; padding: 0;}
	.column, .columns { float: left; display: inline; margin-left: 15px; margin-right: 15px;box-sizing:border-box; }
	.row {}
	.banner {height:40em;}
	.banner .copy {font-size:2.8em;}

	/* Nested Column Classes */
	.column.alpha, .columns.alpha 				{ margin-left: 0; }
	.column.omega, .columns.omega 				{ margin-right: 0; }
	
	 .one-half.column				{ width: 50%; margin:0 }
	 .one-half.column.alpha		{ margin-left: 0 !important;}
	 .one-half.column.omega		{ margin-right: 0 !important; float:right;}

	 .one-third.column			{ width: 33.333%; margin:0 }
	 .one-third.column.alpha		{ margin-left: 0 !important}
	 .one-third.column.omega		{ float:right; margin-right: 0 !important}
	 .two-thirds.column			{ width: 66.66%; margin:0 }
	 .two-thirds.column.omega		{ margin-right: 0 !important; float:right; }
	
	 .one-fourth.column			{ width: 25%; margin:0 }
	 .one-fourth.column.alpha		{ margin-left: 0 !important}
	 .one-fourth.column.omega		{ margin-right: 0 !important; float:right; }
	
	 .one-fifth.column			{ width: 20; margin:0 }
	 .one-fifth.column.alpha		{ margin-left: 0 !important}
	 .one-fifth.column.omega		{ margin-right: 0 !important; float:right; }

	/*****************************
		12 Column
	*****************************/

	/* Base Grid */
	 .one.column 						{ width: 65px;  }
	 .two.columns 					{ width: 160px; }
	 .three.columns 					{ width: 235px; }
	 .four.columns 					{ width: 350px; }
	 .five.columns 					{ width: 405px; }
	 .six.columns 					{ width: 490px; }
	 .seven.columns 					{ width: 575px; }	
	 .eight.columns 					{ width: 660px; }
	 .nine.columns 					{ width: 745px; }
	 .ten.columns 					{ width: 830px; }	
	 .eleven.columns 					{ width: 915px; }	
	 .twelve.columns 					{ width: 1000px; }

	/* Offsets */	
	 .offset-by-one 					{ margin-left: 80px;  }
	 .offset-by-two 					{ margin-left: 160px; }
	 .offset-by-three 				{ margin-left: 280px; }
	 .offset-by-four 					{ margin-left: 320px; }
	 .offset-by-five 					{ margin-left: 400px; }
	 .offset-by-six 					{ margin-left: 480px; }
	 .offset-by-seven 				{ margin-left: 560px; }
	 .offset-by-eight 				{ margin-left: 640px; }
	 .offset-by-nine 					{ margin-left: 720px; }
	 .offset-by-ten 					{ margin-left: 800px; }
	 .offset-by-eleven 				{ margin-left: 880px; }
        
        .desktop-hide { display: none; }

	
/* #1400 Grid 
================================================== */

	@media only screen and (min-width: 1140px) and (max-width: 1799px) {

	.container { position: relative; margin: 0 auto; padding: 0;}
	.column, .columns { float: left; display: inline; margin-left: 15px; margin-right: 15px; }
	.row { }
	.banner {height:32em;}
	.banner .copy {font-size:2.3em;}
	.stats {font-size:1em;}

	/* Nested Column Classes */
	.column.alpha, .columns.alpha 				{ margin-left: 0; }
	.column.omega, .columns.omega 				{ margin-right: 0; }
	
	 .one-half.column				{ width: 50%; margin:0 }
	 .one-half.column.alpha		{ margin-left: 0 !important;}
	 .one-half.column.omega		{ margin-right: 0 !important; float:right;}

	 .one-third.column			{ width: 33.333%; margin:0 }
	 .one-third.column.alpha		{ margin-left: 0 !important}
	 .one-third.column.omega		{ float:right; margin-right: 0 !important}
	 .two-thirds.column			{ width: 66.666%; margin:0 }
	 .two-thirds.column.omega		{ margin-right: 0 !important; float:right; }
	
	 .one-fourth.column			{ width: 25%; margin:0 }
	 .one-fourth.column.alpha		{ margin-left: 0 !important}
	 .one-fourth.column.omega		{ margin-right: 0 !important; float:right; }
	
	 .one-fifth.column			{ width: 20%; margin:0 }
	 .one-fifth.column.alpha		{ margin-left: 0 !important}
	 .one-fifth.column.omega		{ margin-right: 0 !important; float:right; }

	/*****************************
		12 Column
	*****************************/

	/* Base Grid */
	 .one.column 						{ width: 65px;  }
	 .two.columns 					{ width: 160px; }
	 .three.columns 					{ width: 235px; }
	 .four.columns 					{ width: 350px; }
	 .five.columns 					{ width: 405px; }
	 .six.columns 					{ width: 490px; }
	 .seven.columns 					{ width: 575px; }	
	 .eight.columns 					{ width: 660px; }
	 .nine.columns 					{ width: 745px; }
	 .ten.columns 					{ width: 830px; }	
	 .eleven.columns 					{ width: 915px; }	
	 .twelve.columns 					{ width: 1000px; }

	/* Offsets */	
	 .offset-by-one 					{ margin-left: 80px;  }
	 .offset-by-two 					{ margin-left: 160px; }
	 .offset-by-three 				{ margin-left: 280px; }
	 .offset-by-four 					{ margin-left: 320px; }
	 .offset-by-five 					{ margin-left: 400px; }
	 .offset-by-six 					{ margin-left: 480px; }
	 .offset-by-seven 				{ margin-left: 560px; }
	 .offset-by-eight 				{ margin-left: 640px; }
	 .offset-by-nine 					{ margin-left: 720px; }
	 .offset-by-ten 					{ margin-left: 800px; }
	 .offset-by-eleven 				{ margin-left: 880px; }
        
        .desktop-hide { display: none; }
}

/* #Base 960 Grid 
================================================== */

	@media only screen and (min-width: 960px) and (max-width: 1139px) {
	
	.container { position: relative; margin: 0 auto; padding: 0; }
	.column, .columns { float: left; display: inline; margin-left: 10px; margin-right: 10px; }

	/* Nested Column Classes */
	.column.alpha, .columns.alpha 				{ margin-left: 0; }
	.column.omega, .columns.omega 				{ margin-right: 0; }

	 .one-third.column			{ width: 33.333%; margin:0 }
	 .two-thirds.column			{ width: 66.666%; margin:0 }
	
	 .one-fourth.column			{ width: 25%; margin:0 }
	 .one-fourth.column.alpha		{ margin-left: 0 !important}
	 .one-fourth.column.omega		{ margin-right: 0 !important; float:right; }
	
	 .who .example-link {height:15em;}
	 .example-link .image {height:10em;}
	 .example-link .text {height:5em;font-size:.8em;}
	 .who a span {margin-top:5em;}
	 .banner {height:28em;}
	 .banner .copy {font-size:2.2em;}
	 .example .banner h1 {margin-top:0;}
	 .stats {font-size:.75em;}

	/*****************************
		12 Column
	*****************************/

	/* Base Grid */
	 .one.column 						{ width: 60px;  }
	 .two.columns 					{ width: 140px; }
	 .three.columns 					{ width: 220px; }
	 .four.columns 					{ width: 300px; }
	 .five.columns 					{ width: 380px; }
	 .six.columns 					{ width: 460px; }
	 .seven.columns 					{ width: 540px; }	
	 .eight.columns 					{ width: 620px; }
	 .nine.columns 					{ width: 700px; }
	 .ten.columns 					{ width: 780px; }	
	 .eleven.columns 					{ width: 860px; }	
	 .twelve.columns 					{ width: 940px; }

	/* Offsets */	
	 .offset-by-one 					{ margin-left: 80px;  }
	 .offset-by-two 					{ margin-left: 160px; }
	 .offset-by-three 				{ margin-left: 240px; }
	 .offset-by-four 					{ margin-left: 320px; }
	 .offset-by-five 					{ margin-left: 400px; }
	 .offset-by-six 					{ margin-left: 480px; }
	 .offset-by-seven 				{ margin-left: 560px; }
	 .offset-by-eight 				{ margin-left: 640px; }
	 .offset-by-nine 					{ margin-left: 720px; }
	 .offset-by-ten 					{ margin-left: 800px; }
	 .offset-by-eleven 				{ margin-left: 880px; }
        
        .desktop-hide { display: none; }
        
        .banner {height:25em;}
        .banner .copy {font-size:2em;}

	}

/* #Tablet (Portrait)
================================================== */	

	/* Note: Design for a width of 768px */

	@media only screen and (min-width: 768px) and (max-width: 959px) {
                .statsSmall {font-size:2em;}
                .greenzone .numbers {font-size:1.6em;}
                .statsSmall p {margin-bottom: 2em;}
                .smallStatsBox .standardTabs ul {font-size:.7em;}
                .commuterSummary .reportTable {font-size:.85em;}
                
		.container { margin: 0 auto; }
		.column, .columns { float: left; display: inline; margin-left: 10px; margin-right: 10px; }
		/*.container .column, 
		.container .columns { margin-left: 10px; margin-right: 10px;  }*/
		.column.alpha, .columns.alpha 				{ margin-left: 0; margin-right: 10px; }
		.column.omega, .columns.omega 				{ margin-right: 0; margin-left: 10px; }

		.container .one-third.column				{ width: 33.333%; margin: 0 }
		.container .two-thirds.column				{ width: 492px; }
		
		.container .one-fourth.column			{ width: 25%; margin:0 }
		.container .one-fourth.column.alpha		{ margin-left: 0 !important}
		.container .one-fourth.column.omega		{ margin-right: 0 !important; float:right; }	
		
		.example-link {width:50% !important;margin:0;height:18em;}
		.example-link .image {height:14em;}
		.example-link .text {height:4em;}
		.who a span {margin-top:6em;}
		
		.mainpanel {height:23em;}
		#trendBox {height:10em;}
		
		.banner {height:20em;}
		.banner .copy {font-size:1.5em;}
		.example .banner h1 {margin-top:0;font-size:2.5em;}
		
		.banner .mobile-video img{display:block;}
		.stats {font-size:.65em;}

		/*****************************
			12 Column
			((768/12) - 20) * 1 = 44
		*****************************/

		 .one.column 					{ width: 44px;  }
		 .two.columns 				{ width: 108px; }
		 .three.columns 				{ width: 172px; }
		 .four.columns 				{ width: 236px; }
		 .five.columns 				{ width: 300px; }
		 .six.columns 				{ width: 364px; }
		 .seven.columns 				{ width: 428px; }	
		 .eight.columns 				{ width: 492px; }
		 .nine.columns 				{ width: 556px; }
		 .ten.columns 				{ width: 620px; }	
		 .eleven.columns 				{ width: 684px; }	
		 .twelve.columns 				{ width: 748px; }



		/* Offsets */	
		 .offset-by-one 				{ margin-left: 64px;  }
		 .offset-by-two 				{ margin-left: 128px; }
		 .offset-by-three 			{ margin-left: 192px; }
		 .offset-by-four 				{ margin-left: 256px; }
		 .offset-by-five 				{ margin-left: 320px; }
		 .offset-by-six 				{ margin-left: 384px; }
		 .offset-by-seven 			{ margin-left: 448px; }
		 .offset-by-eight 			{ margin-left: 512px; }
		 .offset-by-nine 				{ margin-left: 576px; }
		 .offset-by-ten 				{ margin-left: 640px; }
		 .offset-by-eleven 			{ margin-left: 704px; }
                
        .desktop-hide { display: none; }
        .loginform label {display:inline-block;width:7em;text-align:right;padding-right:.5em;}

	}


/*	#Mobile (Portrait) 
================================================== */

	/* Note: Design for a width of 320px */

	@media only screen and (max-width: 767px) {
		.container {}
		.columns, .column { margin: 0; }
		
		.banner {height:17em;}
		.banner .copy {font-size:1.5em;}
		.stats {font-size:.75em;}

		 .one.column,
		 .two.columns,
		 .three.columns,
		 .four.columns,
		 .five.columns,
		 .six.columns,
		 .seven.columns,
		 .eight.columns,
		 .nine.columns,
		 .ten.columns,
		 .eleven.columns,
		 .twelve.columns,
		 .thirteen.columns,
		 .fourteen.columns,
		 .fifteen.columns,
		 .sixteen.columns, 
		 .one-third.column,
		 .one-fourth.column,
		 .two-thirds.column  { width: 100%;display:block;margin:auto;padding:1em; }

		/* Offsets */	
		 .offset-by-one,				
		 .offset-by-two, 					
		 .offset-by-three, 				
		 .offset-by-four, 					
		 .offset-by-five, 					
		 .offset-by-six, 					
		 .offset-by-seven, 				
		 .offset-by-eight, 				
		 .offset-by-nine, 					
		 .offset-by-ten, 					
		 .offset-by-eleven, 				
		 .offset-by, 				
		 .offset-by-thirteen, 			
		 .offset-by-fourteen, 			
		 .offset-by-fifteen { margin-left: 0; } 
		
		.phone-hide { display: none !important; }
		.drop {width:100% !important;}
                .desktop-hide {display:block;}
                
        .banner {height:12em;}
        .banner .copy {width:100%;left:0;font-size:1.3em;padding-top:1.5em;}
        .example .banner h1 {margin-top:0;font-size:2em;}
		.example .intro {font-size:1.2em;}
		.example-link {height:30em;}
		.example-link .image {height:15em;}
		.banner .mobile-video img {display:block;}
		.loginform label {display:inline-block;width:7em;text-align:right;padding-right:.5em;}
	}	 


/* #Mobile (Landscape)
================================================== */

	/* Note: Design for a width of 480px */

	@media only screen and (min-width: 480px) and (max-width: 767px) {
                .accounts {text-align:center !important;}
		.container {  }
		.columns, .column { margin: 0; }
		.stats {font-size:.75em;}

		 .one.column,
		 .two.columns,
		 .three.columns,
		 .four.columns,
		 .five.columns,
		 .six.columns,
		 .seven.columns,
		 .eight.columns,
		 .nine.columns,
		 .ten.columns,
		 .eleven.columns,
		 .twelve.columns,
		 .thirteen.columns,
		 .fourteen.columns,
		 .fifteen.columns,
		 .sixteen.columns,
		 .one-third.column,
		 .one-fourth.column, 
		 .two-thirds.column { width: 100%; }
		
		.phone-hide { display: none !important; }
		.drop {width:100% !important;}
                .desktop-hide {display:block;}
                
        .banner {height:12em;}
        .banner .copy {width:100%;left:0;font-size:1.3em;padding-top:1.5em;}
        .example .banner h1 {margin-top:0;font-size:2em;}
        .example .intro {font-size:1.2em;}
        .example-link {height:30em;}
        .example-link .image {height:15em;}
        .banner .mobile-video img{display:block;}
        .loginform label {display:inline-block;width:7em;text-align:right;padding-right:.5em;}
	}


/* #Clearing
================================================== */

	/* Self Clearing Goodness */
	.container:after { content: "\0020"; display: block; height: 0; clear: both; visibility: hidden; } 

	/* Use clearfix class on parent to clear nested columns, 
	or wrap each row of columns in a <div class="row"> */
	.clearfix:before,
	.clearfix:after,
	.row:before,
	.row:after {
	  content: '\0020';
	  display: block;
	  overflow: hidden;
	  visibility: hidden;
	  width: 0;
	  height: 0; }
	.row:after,
	.clearfix:after {
	  clear: both; }
	.row, 
	.clearfix {
	  zoom: 1; }

	/* You can also use a <br class="clear" /> to clear columns */
	.clear {
	  clear: both;
	  display: block;
	  overflow: hidden;
	  visibility: hidden;
	  width: 0;
	  height: 0;
	}
	
  

.fixed_headers {
			table-layout: fixed;
			border-collapse: collapse;
		}
		.fixed_headers th {
			text-decoration: underline;
		}
		.fixed_headers th,
		.fixed_headers td {
			padding: 5px;
		}
		.fixed_headers td:nth-child(1),
		.fixed_headers th:nth-child(1) {
			width: 80%;
			text-align:left;
		}
		.fixed_headers td:nth-child(2),
		.fixed_headers th:nth-child(2) {
			width: 20%;
		}
		.fixed_headers td:nth-child(3),
		.fixed_headers th:nth-child(3) {
			width: 350px;
		}
		.fixed_headers thead {
			
		}
		.fixed_headers thead tr {
			display: block;
			position: relative;
		}
		.fixed_headers tbody {
			
			overflow: auto;
			width: 100%;
			height: 300px;
		}
		.fixed_headers tbody tr:nth-child(even) {
			background-color: #dddddd;
		}
		.old_ie_wrapper {
			height: 300px;
			overflow-x: hidden;
			overflow-y: auto;
			
		}
		.old_ie_wrapper tbody {
			height: auto;
		}
		
		.old_ie_wrapper::-webkit-scrollbar {
 display: none;
 }
		
		
@media only screen and (max-width: 959px) and (min-width: 768px) {

	.old_ie_wrapper {height:10em;}
	.fixed_headers {height:10em;}

}
