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: black;
    z-index:          999;                  /* 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:     arial, verdana, sans-serif;
    font-size:       12pt;
    letter-spacing:  1.5pt;
    font-weight:     normal;
    text-decoration: none;
    color:           #ffffff;
}

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

#tips {
    color:       blue;
    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:            #ffffff;
    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:            #ffffff;
    border-radius:    10px 10px 10px 10px;
    background-color: #f8f8f8;               /* ORIG #efefef; */
}

#top {         
    width:               100%;
    float:               right;
    text-align:          right;
    margin:              0 auto;
    padding-top:         10px;
    padding-bottom:      10px;
    overflow:            auto;
    background:          ;
    background-image:    url(images/SMALL-Chevron-BUILD-UP.png);
    background-position: top;
    background-repeat:   no-repeat;  
}

#top a {
    font-family:         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:               #F15C2A;
}

#top a:link {
    font-family:         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:               #F15C2A;
}

#top a:hover {
    color:               #222222;
    font-size:           12pt;
    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:    '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:     center;
        float:          center;
        vertical-align: bottom;
    }
}

.FullWidth {
    width: 100%;
}

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

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

#customerloginpage {                        /* For screen width smaller than 450px */
    width:          100%;

    margin-top:     10px;
    margin-bottom:  20px;
    padding-bottom: 25px;

    float:          center;
    text-align:     center;
    border-bottom:  1px solid #f15c2a;
    color:          #000000;
    font-family:    'Open Sans', moderne sans, sans-serif;
    font-weight:    300;
    font-size:      12pt;
    letter-spacing: .25pt;
    line-height:    20pt;
    overflow:       hidden;
}

.loginQuoteLarge {
    float:          center;
    text-align:     center;
    font-size:      25pt;
    line-height:    26pt;
    letter-spacing: .5pt;
    margin-top:     5px;
    margin-bottom:  5px;
}

.loginQuoteSmall {
    float:          center;
    text-align:     center;
    font-size:      15pt;
    line-height:    26pt;
    letter-spacing: .5pt;
    margin-top:     5px;
}

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

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

#aboutbox {
    padding: 0px 25px 0px 25px;
    float: center;
    font-family: '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:    'Open Sans', moderne sans, sans-serif;
    font-size:      25pt;
    line-height:    26pt;
    letter-spacing: .5pt;
}

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

#copy {                                     /* For screen width smaller than 450px */
    width:            100%;
    margin:           0 auto;
    float:            center;
    overflow:         hidden;
    text-align:       center;
    font-family:      '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:      '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:    '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: '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:      '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: '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:      '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: '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;
    float: center;
    font-family: '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;
        float: center;
        line-height: 12pt;
    }
}

#maininfobox a {
    font-family: '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: '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:         '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:               #333333;
    background-color:    #fbb042;
}

.infobox a:link {
    padding:             5px 25px 5px 25px;
    border-radius:       5px 5px 5px 5px;
    font-family:         '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:               #333333;
    background-color:    #fbb042;
}

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

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

.button1:hover {
    background-color: #3090d4 !important;   /* #035a6d (aquamarine) */
}

.button1 a {
    font-family:         '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:         '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:           12pt;
    line-height:         20pt;
    text-align:          center;
    text-decoration:     none;
    list-style-position: outside;
    background:          none;
    background-color:    transparent;
    color:               white !important;
}

.group1 {
    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: #444444;
    color:            #ffffff;
}

.group1 a {
    padding:             10px 20px 12px 20px;
    font-family:         '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:         '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:               #FFD400;
}

.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: #444444;
    color:            #ffffff;
    text-align:       center;
}

.group2 a {                                   /* same as group a */
    padding:             10px 20px 12px 20px;
    font-family:         '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:         '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:               #FFD400;
}

.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: #444444;
    color:            #ffffff;
    text-align:       center;
}

.group3 a {                                   /* same as group a */
    padding:             10px 20px 12px 20px;
    font-family:         '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:         '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:               #FFD400;
}

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

span.fiftysix {
    color: #000000;
    text-align: left;
    font-weight: 400;
    font-family: 'Pathway Gothic One', sans-serif;
    font-size: 35pt;
    line-height: 30pt;
    letter-spacing: .125pt;
}

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

/* Win.Alert() window styles */

.alertOK              {position:absolute; bottom:5px; right:5px;}
.alertInput           {width: 250px;}
#base                 {margin: 25px;}
.bold                 {font-weight: bold;}
.inputDiv             {margin-left: 15px;}

/* 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: */ 
		      }
.box_shadow           {-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 */
                      }

.box_round_shadow_hover       {-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: */ 
                               cursor:                  pointer;
	  	              }
.box_round_shadow_hover:hover {-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 */
                              }

.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: 'Open Sans', century gothic, moderne sans, sans-serif;
                       font-weight: 600;
                       font-size:   12pt;
                       text-align:  center;
		      }
.loadButton:hover     {color:            #FFD400;
                       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:15px; left:25px;}
.marginTop10          {margin-top:10px;}
.ratingDiv            {float:left; margin-top:25px; margin-right:0px; text-align:center; font-size:70%;}


.logoImg              {width:80px;}         /* For screen width smaller than 450px */

@media only screen and (min-width: 450px) { /* For screen width 450px and larger */
    .logoImg          {width:120px;}
}

.OCCImg               {width:400px;}