body {                                      /* For screen width smaller than 450px */
    width:            100%;
    margin:           0 auto;
    overflow:         auto;
    background-color: #dcdcdc;
}

#navbar {
    position:         fixed;                   /* Make it stick/fixed */
    width:            100%;
    top:              -100px;                  /* Hide the navbar 100 px outside of the top view */
    transition:       top 0.9s;                /* Transition effect when sliding down (and up) */
    background-color: rgba(68, 73, 156, 0.90); /* same as hex #44499C
    z-index:          2147483647;              /* used to be 1, changed to 999 to be higher priorty than Grid header & footer */
}

#navbar a {                                 /* Style the navbar links */
    padding:         10px 25px 10px 25px;
    float:           right;
    display:         block;
    text-align:      center;
    font-family:     geist, arial, verdana, sans-serif;
    font-size:       12pt;
    letter-spacing:  1.5pt;
    font-weight:     normal;
    text-decoration: none;
    color:           #ffffff;
}

#navbar a:hover {
    color: #008743;
}

#tips {
    color:       #008743;
    font-weight: bold;
}

#maincontent {                              /* For screen width smaller than 450px */
    width:            98%;
    float:            center;
    margin:           0 auto;
    margin-top:       2px;      
    margin-bottom:    5px;
    padding-bottom:   35px; 
    overflow:         hidden;
    color:            #44499C;
    border-radius:    10px 10px 10px 10px;
    background-color: #efefef;
}

@media only screen and (min-width: 450px) { /* For screen width 450px and larger */
    #maincontent {  
        margin-top:   10px;
    }
}

#maincontentone {
    width:            98%;
    overflow:         hidden;
    margin:           0 auto;
    margin-top:       10px;  
    margin-bottom:    5px;
    padding-bottom:   35px; 
    float:            center;
    color:            #44499C;
    border-radius:    10px 10px 10px 10px;
    background-color: #efefef;
}

#top {         
    float:               right;
    text-align:          right;
    margin:              0 auto;
    padding-top:         10px;
    padding-bottom:      10px;
    overflow:            auto;
    background:          ;
    background-position: top;
    background-repeat:   no-repeat;  
}

#top a {
    font-family:         geist, arial, verdana, sans-serif;
    font-size:           12pt;
    letter-spacing:      1pt;
    font-weight:         400;
    text-align:          right;
    text-decoration:     none;
    vertical-align:      text-middle;
    margin-right:        20px;
    direction:           ltr;
    list-style-position: outside;
    color:               white;
}

#top a:link {
    font-family:         geist, arial, verdana, sans-serif;
    font-size:           12pt;
    letter-spacing:      .5pt;
    font-weight:         400;
    text-align:          right;
    text-decoration:     none;
    vertical-align:      text-middle;
    margin-right:        20px;
    direction:           ltr;
    list-style-position: outside;
    color:               white; /* #008743; */
}

#top a:hover {
    color:               #008743; /* #222222; */
    font-size:           14pt;
    font-weight:         bold;
    vertical-align:      text-middle;
    letter-spacing:      .5pt;
    font-weight:         400;
    text-align:          right;
    margin-right:        20px;
    text-decoration:     none;
    list-style-position: outside;
}

#frontcontent {
    margin:   0 auto;
    float:    center;
    overflow: hidden;
    color:    #ffffff;
}

#frontcontentone {
    position:       relative;
    margin:         0 auto;
    float:          center;
    overflow:       hidden;
    color:          #ffffff;
}

.textbox1 {                               /* For screen width smaller than 450px */
    width:          100%;
    text-align:     left;        
    float:          left;
    vertical-align: top;
    margin-top:     5px;
    margin-bottom:  0px;
    padding-top:    10px;
    padding-bottom: 5px;
    color:          #ffffff;
    font-family:    geist, 'Open Sans',century gothic, moderne sans, sans-serif;
    font-weight:    lighter;
    font-weight:    300;
    font-size:      15pt;
    letter-spacing: .5pt;
    line-height:    14pt;
}

@media only screen and (min-width: 450px) { /* For screen width 450px and larger */
    .textbox1 {
        text-align:     left;
        float:          left;
        vertical-align: bottom;
    }
}

.FullWidth {
    width: 100%;
}

.TopCenter {
    position:  absolute;
    top:       4%;
    left:      50%;
    transform: translate(-50%);
    width:     25%;
}

#customerloginpage {
    margin-top:     10px;
    margin-bottom:  20px;
    margin-right:    5px;
    margin-left:     5px;
    padding-bottom: 25px;
    text-align:     left;
    border-top:     10px solid #008743;
    color:          #44499C;
    font-family:    geist, 'Open Sans', moderne sans, sans-serif;
    font-weight:    300;
    font-size:      12pt;
    letter-spacing: .25pt;
    line-height:    20pt;
    overflow:       hidden;
}
@media only screen and (min-width: 450px) { /* For screen width 450px and larger */
    #customerloginpage {
	margin-right: 10px;
	margin-left:  10px;
    }
}

#base {margin:      5px;
       font-family: geist, 'Open Sans', moderne sans, sans-serif;
       color:       #44499C;
      }
@media only screen and (min-width: 450px) { /* For screen width 450px and larger */
    #base {margin: 10px;}
}


.loginQuoteLarge {
    font-weight:    bold;
    text-align:     left;
    font-size:      23pt;
    line-height:    24pt;
    letter-spacing: .5pt;
}

.loginQuoteSmall {
    text-align:     left;
    font-size:      15pt;
    line-height:    24pt;
    letter-spacing: .5pt;
    margin-top:     1px;
}

#miniright {
    border-top:     10px solid #008743;
    padding-top:    1em;
    color:          #44499C;
    font-family:    geist, 'Open Sans', moderne sans, sans-serif;
    font-weight:    300;
    font-size:      10pt;
}

#customerdata {
    float:          right;
    width:          200px;
    padding-top:    40px;
    padding-bottom: 5px;
    text-align:     center;
    font-weight:    normal;
    font-size:      9pt;
    line-height:    12pt;
    color:          #44499C;
}

/************************ home page ****************************/

#aboutbox {
    padding: 0px 25px 0px 25px;
    float: center;
    font-family: geist, 'Open Sans', moderne sans, sans-serif;
    font-weight: lighter;
    font-weight: 300;
    font-size: 11pt;
    text-align: left;        
    letter-spacing: 1.25pt;
    line-height: 16pt;
    overflow: hidden;
}

#quote {                                    /* For screen width smaller than 450px */
    margin-top:     20px;
    margin-bottom:  2.5px;
    padding:        0px 10px 10px 0px;
    float:          center;
    text-align:     center;
    color:          #000000;
    font-family:    geist, 'Open Sans', moderne sans, sans-serif;
    font-size:      25pt;
    line-height:    26pt;
    letter-spacing: .5pt;
}

#testomonial {
    width:          100%;
    margin:         25px;
    padding-bottom: 25px;
/*  border-bottom:  10px solid #008743; */
    text-align:     left;
    color:          #000000;
    font-family:    geist, 'Open Sans', moderne sans, sans-serif;
    font-weight:    300;
    font-size:      12pt;
    letter-spacing: .25pt;
    line-height:    20pt;
}

.testomonial {
    width:          100%;
    margin:         25px;
    padding-bottom: 25px;
/*  border-bottom:  10px solid #008743; */
    text-align:     left;
    color:          #000000;
    font-family:    geist, 'Open Sans', moderne sans, sans-serif;
    font-weight:    300;
    font-size:      12pt;
    letter-spacing: .25pt;
    line-height:    20pt;
}

.rpad {
    padding-right:25px;
}

#copy {                                     /* For screen width smaller than 450px */
    width:            100%;
    margin:           0 auto;
    float:            center;
    overflow:         hidden;
    text-align:       center;
    font-family:      geist, 'Open Sans', moderne sans, sans-serif;
    font-size:        11pt;
    font-weight:      300;
    line-height:      18pt;
    color:            #444444;
    background-color: #transparent;
}

.cardDiv {                                     /* For screen width smaller than 450px (Cost Display) */
    width:            100%;
    float:            center;
    margin:           0px 20px 20px 5px;
    padding-top:      20px;
    padding-bottom:   10px;
    border-radius:    10px 10px 10px 10px;
    overflow:         hidden; 
    text-align:       left;
    font-family:      geist, 'Open Sans', moderne sans, sans-serif;
    font-size:        12pt;
    font-weight:      300;
    line-height:      18pt;
    letter-spacing:   .5pt;
    color:            #000000;
    background-color: #ffffff;
}

@media only screen and (min-width: 450px) { /* For screen width 450px and larger (Cost Display) */
    .cardDiv {
        margin:       0px 20px 20px 20px;
    }
}

#looking {                                  /* For screen width smaller than 450px */
    padding:        0px 20px 20px 20px;
    font-size:      12pt;
    line-height:    18pt;
    letter-spacing: .25pt;
    font-family:    geist, 'Open Sans', moderne sans, sans-serif;
    font-weight:    300;
    color:          #000000;
}

#why {                                      /* For screen width smaller than 450px */
    padding:     20px;
    font-size:   12pt;
    line-height: 18pt;
    font-family: geist, 'Open Sans', moderne sans, sans-serif;
    font-weight: 300;
    color:       #000000;
}

.faqBox {                                   /* For screen width smaller than 450px (Usage Display) */
    width:            97%;
    float:            left;
    margin:           0px 20px 20px 5px;
    padding-top:      20px;
    padding-bottom:   10px;                 
    border-radius:    10px 10px 10px 10px;
    overflow:         hidden;
    text-align:       left;
    font-family:      geist, 'Open Sans', moderne sans, sans-serif;
    font-size:        12pt;
    font-weight:      300;
    line-height:      18pt;
    color:            #000000;
    background-color: #ffffff;
}

@media only screen and (min-width: 450px) { /* For screen width 450px and larger (Usage Display) */
    .faqBox {
        margin:         0px 20px 20px 20px;
        font-size:      10.5pt;
        line-height:    16pt;
        letter-spacing: .25pt;
    }
}

.faqContent {                               /* For screen width smaller than 450px */
    padding:     20px;
    font-family: geist, 'Open Sans', moderne sans, sans-serif;
    font-weight: 300;
    font-size:   12pt;
    line-height: 18pt;
    color:       #000000;
}

@media only screen and (min-width: 450px) { /* For screen width 450px and larger */
    .faqContent {
        letter-spacing: .25pt;
    }
}

#right {                                    /* For screen width smaller than 450px (Get Alerts Display) */
    width:            100%;
    float:            left;
    margin:           0px 20px 20px 5px;
    padding-bottom:   10px;
    text-align:       left;
    font-family:      geist, 'Open Sans', moderne sans, sans-serif;
    font-size:        12pt;
    font-weight:      300;
    line-height:      18pt;
    color:            #000000;
    border-radius:    10px 10px 10px 10px;
    overflow:         hidden;
    background-color: #ffffff;
}

@media only screen and (min-width: 450px) { /* For screen width 450px and larger (Get Alerts Display) */
    #right {
        margin:           0px 20px 20px 20px;
        padding-top:      20px;
        letter-spacing:   .75pt;
    }
}

.benefit {                                  /* For screen width smaller than 450px */
    padding:     20px;
    text-align:  left;
    font-size:   12pt;
    line-height: 18pt;
    font-family: geist, 'Open Sans', moderne sans, sans-serif;
    font-weight: 300;
    color:       #000000;
}

@media only screen and (min-width: 450px) { /* For screen width 450px and larger */
    .benefit {
        letter-spacing: .75pt;
    }
}

#maininfobox {                            /* For screen width smaller than 450px */
    max-width:      300px;
    min-width:      300px;
    margin-top:     10px;
    margin-bottom:  45px;
    padding:        10px 0px 0px 10px;
    height:         200px;
    float:          center;
    font-family:    geist, 'Open Sans', moderne sans, sans-serif;
    font-weight:    300;
    font-size:      12pt;
    text-align:     left;        
    letter-spacing: 1pt;
    line-height:    14pt;
    color:          #000000;
    margin:         0 auto;
}

@media only screen and (min-width: 450px) { /* For screen width 450px and larger: */
    #maininfobox {
        max-width:   600px;
        min-width:   500px;
        margin-top:  10px;
        padding:     10px 200px 0px 10px;
        height:      250px;
        float:       center;
        line-height: 12pt;
    }
}

#maininfobox a {
    font-family:         geist, 'Open Sans', century gothic, moderne sans, sans-serif;
    font-size:           12pt;
    font-weight:         normal;
    line-height:         20pt;
    text-decoration:     none;
    direction:           ltr;
    list-style-position: outside;
}

#maininfobox a:link {
    font-family:         geist, 'Open Sans',century gothic, moderne sans, sans-serif;
    font-size:           12pt;
    text-align:          left;
    line-height:         20pt;
    font-weight:         normal;
    text-decoration:     none;
    direction:           ltr;
    list-style-position: outside;
    color:               #000000;
}

#maininfobox a:hover {
    color:               #000000;
    font-size:           12pt;
    font-weight:         normal;
    line-height:         20pt;
    text-decoration:     none;
    list-style-position: outside;
}

.infobox {
    height:         50px;
    width:          100%;
    margin-right:   15px;
    padding-top:    25px;
    padding-bottom: 0px;
    text-align:     left;
    float:          left;
    letter-spacing: .0125pt;
    overflow:       hidden;
}

.infobox a {
    padding:             5px 25px 5px 25px;
    border-radius:       5px 5px 5px 5px;
    font-family:         geist, 'Open Sans', century gothic, moderne sans, sans-serif;
    font-size:           12pt;
    font-weight:         normal;
    text-align:          left;        
    line-height:         10pt;
    text-decoration:     none;
    direction:           ltr;
    list-style-position: outside;
    color:               white;
    background-color:    #008743;
}

.infobox a:link {
    padding:             5px 25px 5px 25px;
    border-radius:       5px 5px 5px 5px;
    font-family:         geist, 'Open Sans',century gothic, moderne sans, sans-serif;
    font-size:           12pt;
    text-align:          left;
    line-height:         10pt;
    font-weight:         normal;
    text-decoration:     none;
    direction:           ltr;
    list-style-position: outside;
    color:               white;
    background-color:    #008743;
}

.infobox a:hover {
    padding:             5px 25px 5px 25px;
    border-radius:       5px 5px 5px 5px;
    font-size:           12pt;
    font-weight:         bold;
    text-align:          left;
    line-height:         10pt;
    text-decoration:     none;
    list-style-position: outside;
    color:               #44499C;
    background-color:    #008743;
}

.button1 {
    overflow:         hidden;
    height:           30px;
    width:            200px;
    background-color: #008743;
    color:            #ffffff;
    margin-top:       2px;
    border-radius:    5px 5px 5px 5px;
}

.button1 a {
    font-family:         geist, 'Open Sans', century gothic, moderne sans, sans-serif;
    font-weight:         600;
    font-size:           12pt;
    line-height:         20pt;
    text-align:          center;
    padding:             10px 20px 12px 20px;
    text-decoration:     none;
    background:          none;
    background-color:    transparent;
    direction:           ltr;
    list-style-position: outside;
    color:               #ffffff;
}

.button1 a:link {
    padding:             10px 20px 12px 20px;
    font-family:         geist, 'Open Sans',century gothic, moderne sans, sans-serif;
    font-weight:         600;
    font-size:           12pt;
    line-height:         20pt;
    text-align:          center;
    text-decoration:     none;
    background:          none;
    background-color:    transparent;
    direction:           ltr;
    list-style-position: outside;
    color:               #ffffff;
}

.button1 a:hover {
    padding:             10px 20px 12px 20px;
    font-weight:         600;
    font-size:           14pt !important;
    font-weight:         bold !important;
    line-height:         20pt;
    text-align:          center;
    text-decoration:     none;
    list-style-position: outside;
    background:          none;
    background-color:    transparent;
    color:               #44499C !important;
}

.group1 {
 /* border-top:       10px solid #008743; */
    height:           30px;
    width:            200px;                  /* DIFFERENCE between group0 & group1 is width (100 vs 200) */
    margin-top:       2px;
    border-radius:    5px 5px 5px 5px;
    overflow:         hidden;
    background-color: #008743;
    color:            #ffffff;
}

.group1 a {
    padding:             10px 20px 12px 20px;
    font-family:         geist, 'Open Sans', century gothic, moderne sans, sans-serif;
    font-weight:         600;
    font-size:           12pt;
    line-height:         20pt;
    text-align:          center;
    text-decoration:     none;
    background:          none;
    background-color:    transparent;
    direction:           ltr;
    list-style-position: outside;
    color:               #ffffff;
}

.group1 a:link {
    padding:             10px 20px 12px 20px;
    font-family:         geist, 'Open Sans',century gothic, moderne sans, sans-serif;
    font-weight:         600;
    font-size:           12pt;
    line-height:         20pt;
    text-align:          center;
    text-decoration:     none;
    background:          none;
    background-color:    transparent;
    direction:           ltr;
    list-style-position: outside;
    color:               #ffffff;
}

.group1 a:hover {
    padding:             10px 20px 12px 20px;
    font-weight:         600;
    font-size:           12pt;
    line-height:         20pt;
    text-align:          center;
    text-decoration:     none;
    background:          none;
    background-color:    transparent;
    list-style-position: outside;
    color:               #44499C;
}

.group2 {
    height:           30px;
    width:            250px;                  /* DIFFERENCE between group1 & group2 is width (200 vs 250) & centered text */
    margin-top:       2px;
    border-radius:    5px 5px 5px 5px;
    overflow:         hidden;
    background-color: #008743;
    color:            #ffffff;
    text-align:       center;
}

.group2 a {                                   /* same as group a */
    padding:             10px 20px 12px 20px;
    font-family:         geist, 'Open Sans', century gothic, moderne sans, sans-serif;
    font-weight:         600;
    font-size:           12pt;
    line-height:         20pt;
    text-align:          center;
    text-decoration:     none;
    background:          none;
    background-color:    transparent;
    direction:           ltr;
    list-style-position: outside;
    color:               #ffffff;
}

.group2 a:link {                              /* same as group a:link */
    padding:             10px 20px 12px 20px;
    font-family:         geist, 'Open Sans',century gothic, moderne sans, sans-serif;
    font-weight:         600;
    font-size:           12pt;
    line-height:         20pt;
    text-align:          center;
    text-decoration:     none;
    background:          none;
    background-color:    transparent;
    direction:           ltr;
    list-style-position: outside;
    color:               #ffffff;
}

.group2 a:hover {                             /* same as group a:hover */
    padding:             10px 20px 12px 20px;
    font-weight:         600;
    font-size:           12pt;
    line-height:         20pt;
    text-align:          center;
    text-decoration:     none;
    background:          none;
    background-color:    transparent;
    list-style-position: outside;
    color:               #44499C;
}

.group3 {
    height:           30px; 
    width:            400px;                  /* DIFFERENCE between group1 & group3 is width (200 vs 400) & centered text */
    margin-top:       2px;
    border-radius:    5px 5px 5px 5px;
    overflow:         hidden;
    background-color: #008743;
    color:            #ffffff;
    text-align:       center;
}

.group3 a {                                   /* same as group a */
    padding:             10px 20px 12px 20px;
    font-family:         geist, 'Open Sans', century gothic, moderne sans, sans-serif;
    font-weight:         600;
    font-size:           12pt;
    line-height:         20pt;
    text-align:          center;
    text-decoration:     none;
    background:          none;
    background-color:    transparent;
    direction:           ltr;
    list-style-position: outside;
    color:               #ffffff;
}

.group3 a:link {                              /* same as group a:link */
    padding:             10px 20px 12px 20px;
    font-family:         geist, 'Open Sans',century gothic, moderne sans, sans-serif;
    font-weight:         600;
    font-size:           12pt;
    line-height:         20pt;
    text-align:          center;
    text-decoration:     none;
    background:          none;
    background-color:    transparent;
    direction:           ltr;
    list-style-position: outside;
    color:               #ffffff;
}

.group3 a:hover {                             /* same as group a:hover */
    padding:             10px 20px 12px 20px;
    font-weight:         600;
    font-size:           12pt;
    line-height:         20pt;
    text-align:          center;
    text-decoration:     none;
    background:          none;
    background-color:    transparent;
    list-style-position: outside;
    color:               #44499C;
}

span.fiftyfive {
    color:       #44499C;
    text-align:  left;
    font-weight: 400;
    font-family: geist, 'Pathway Gothic One', sans-serif;
    font-size:   16pt;
    line-height: 16pt;
    letter-spacing: .125pt;
}

span.fiftyfive2 {
    color:          #44499C;
    text-align:     left;
    font-weight:    400;
    font-family:    geist, 'Pathway Gothic One', sans-serif;
    font-size:      23pt;
    line-height:    23pt;
    letter-spacing: .125pt;
    border-bottom:  10px solid #008743;
}

span.fiftysix {
    color:          #44499C;
    text-align:     left;
    font-weight:    400;
    font-family:    geist, 'Pathway Gothic One', sans-serif;
    font-size:      35pt;
    line-height:    30pt;
    letter-spacing: .125pt;
    border-bottom:  10px solid #008743;
}

/* ============================================================== ADDITIONS =============================================================== */

/* Win.Alert() window styles */

.alertOK              {position:absolute; bottom:5px; right:5px;}
.alertInput           {width: 250px;}
.bold                 {font-weight: bold;}
.darkgrey             {color: #333333;}
.inputDiv             {margin-left: 15px;}
.cancelDiv            {margin-left:15px;  float:left;}
.okDiv                {margin-right:15px; float:right;}

/* general styles */

.box_round            {-webkit-border-radius:  12px;             /* Saf3-4, iOS 1-3.2, Android <e;1.6                       */
                       -moz-border-radius:     12px;             /* FF1-3.6                                                 */
                       border-radius:          12px;             /* Opera 10.5, IE9, Saf5, Chrome, FF4, iOS 4, Android 2.1+ */
                       behavior:               url(PIE/PIE.htc); /* IE<9 */
                       -webkit-background-clip: padding-box; 
                       -moz-background-clip:    padding; 
                       background-clip:        padding-box;      /* keeps bg color from leaking outside the border: */ 
		      }
.center               {text-align:center;}
.centerDiv            {margin:auto;}
.displayNone          {display:none}
.hidden               {visibility:hidden;}

/* chart styles */

.graphCost            {position:relative; left:-5px; height:300px; width:100%; text-align:center;}
.graphUsage           {position:relative; left:-5px; height:300px; width:100%; text-align:center;}
.graphPeak            {position:relative; left:-5px; height:300px; width:100%; text-align:center;}

/* Forward & Backward Arrows (used to be triangles) in title above charts */

.TriangleL            {eight:30px; width:30px; margin-right:15px;}
a img.TriangleL       {border:0px; opacity:.50; filter:alpha(opacity=50);}
a:hover img.TriangleL {opacity:1; filter:alpha(opacity=100);}
.TriangleR            {height:30px; width:30px; margin-left:15px;}
a img.TriangleR       {border:0px; opacity:.50; filter:alpha(opacity=50);}
a:hover img.TriangleR {opacity:1; filter:alpha(opacity=100);}

/* other app styles */

.imgDownload          {height:40px;}

.loadButton           {height:90px; width:100px; margin-right:15px; cursor:pointer;
                       font-family: geist, 'Open Sans', century gothic, moderne sans, sans-serif;
                       font-weight: 600;
                       font-size:   12pt;
                       text-align:  center;
		      }
.loadButton:hover     {color:            #008743;
                       background-color: #444444;
                       -webkit-box-shadow: 8px 8px 4px #999999;  /* Saf3-4, iOS 4.0.2 - 4.2, Android 2.3+   */
                       -moz-box-shadow:    8px 8px 4px #999999;  /* FF3.5 - 3.6                             */
                       box-shadow:         8px 8px 4px #999999;  /* Opera 10.5, IE9, FF4+, Chrome 6+, iOS 5 */
                       behavior:           url(PIE/PIE.htc);     /* IE<9 */
                      }

.logoDiv              {position:absolute; top:0px; left:0px; right:0px; text-align:left; background-color:#44499C;}
.marginTop10          {margin-top:10px;}
.ratingDiv            {float:left; margin-top:25px; margin-right:0px; text-align:center; font-size:70%;}


.logoImg              {width:80px;  padding:5px; padding-top:15px;}  /* For screen width smaller than 450px */
@media only screen and (min-width: 450px) {                          /* For screen width 450px and larger */
    .logoImg          {width:160px; padding:10px;}
}

.socialImg            {width:45px; padding-right:7px;}

.OCCImg               {width:400px; background:white; padding-right:5px; padding-left:5px;}