/* RESET STYLES */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, code, strong, form, label, table, tbody, tfoot, tr, th, td
{margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align: baseline; background-color:transparent; 	letter-spacing: 0}
article, aside, details, figcaption, figure, footer, header, hgroup, nav, section
{display:block}
audio, canvas, video                 {display:inline-block; *display:inline; *zoom:1}
audio:not([controls])                {display:none}
[hidden]                             {display:none}
html                                 {font-size:100%; overflow-y:scroll; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%}
body                                 {margin:0}
body, button, input, select, textarea
{font-family:sans-serif}
a                                    {color:#7da03f}
a:visited                            {color:#7da03f}
a:focus                              {outline:thin dotted}
a:hover, a:active                    {outline:0}
abbr[title]                          {border-bottom:1px dotted}
b, strong                            {font-weight:bold}
blockquote                           {margin:1em 40px}
dfn                                  {font-style:italic}
mark                                 {background:#ff0; color:#000}
pre, code, kbd, samp                 {font-family:monospace, serif; _font-family:'courier new', monospace; font-size:1em}
pre                                  {white-space:pre;white-space:pre-wrap; word-wrap:break-word}
q                                    {quotes:none}
q:before, q:after                    {content:''; content:none}
small                                {font-size:75%}
sub,sup                              {font-size:75%; line-height:0; position:relative; vertical-align:baseline}
sup                                  {top:-0.5em}
sub                                  {bottom:-0.25em}
ul,ol                                {margin:1em 0; padding:0 0 0 40px}
dd                                   {margin:0 0 0 40px}
nav ul, nav ol                       {list-style:none; list-style-image:none}
img                                  {border:0; -ms-interpolation-mode:bicubic}
svg:not(:root)                       {overflow:hidden}
figure                               {margin:0}
form                                 {margin:0}
fieldset                             {border:1px solid #c0c0c0; margin:0 2px; padding:0.35em 0.625em 0.75em}
legend                               {border:0; *margin-left:-7px}
button, input, select, textarea      {font-size:100%; margin:0; vertical-align:baseline; *vertical-align:middle}
button,input                         {line-height:normal}
button, input[type="button"], input[type="reset"], input[type="submit"]
{cursor:pointer; -webkit-appearance:button; *overflow:visible}
input[type="checkbox"], input[type="radio"]
{box-sizing:border-box; padding:0}
input[type="search"]                 {-webkit-appearance:textfield; -moz-box-sizing:content-box; -webkit-box-sizing:content-box; box-sizing:content-box}
input[type="search"]::-webkit-search-decoration
{-webkit-appearance:none}
button::-moz-focus-inner, input::-moz-focus-inner
{border:0; padding:0}
textarea                             {overflow:auto; vertical-align:top}
table                                {border-collapse:collapse; border-spacing:0}
/* /RESET STYLES */


html{
    width: 100%;
    height: 100%;
}

body{

    width: 100%;
    height: 100%;
    overflow: hidden;
}

.jwlogo{
    display: none !important;
}

#videoOverlay{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.8);
    z-index: 1500;
    display: none;
}

#videoPlayer{
    width: 300px;
    height: 300px;
    margin: 30px auto;
    background: black;
}

#videoClose{
    width: 20px;
    height: 20px;
    background: transparent url(../img/close.png) no-repeat 0 0;
    position: absolute;
    top: 10px;
    right: 10px;
    cursor: pointer;
    z-index: 1800;
}

#mainContent{
    position: relative;
    background-color: #000;
    min-height: 500px;
    min-width: 960px;
    height: 100%
}

#bigLamp{
    position: absolute;
    top:0;
    left:0;
    background: transparent url(../img/largeLamp.png) no-repeat 0 0;
    width: 671px;
    height: 100%;

}

#mainNav{
    margin: 0 0 20px;
    width: 400px;
    height: 35px;
}

#pettyThumb{
    background: transparent url(../img/pettyThumb.png) no-repeat 0 0;
    width: 341px;
    height: 191px;
    margin: 20px 0 20px 0;
    cursor: pointer;
}

#lampNav{
    background: transparent url(../img/lampNav.jpg) no-repeat 0 0;
    width: 146px;
    height: 35px;
    float: left;
    margin: 0 30px 0 0;
}

.nav{
    cursor:pointer;
    border: 1px solid black;
}

.nav:hover{
    border: 1px solid white;
}

#roiNav{
    background: transparent url(../img/ROINav.jpg) no-repeat 0 0;
    width: 168px;
    height: 35px;
    float: left;
    margin: 0 20px 0 0;
}

#creeLogo{
    position: absolute;
    bottom:10px;
    right: 10px;
    background: transparent url(../img/creeLogo.jpg) no-repeat 0 0;
    width: 111px;
    height: 24px;

}

#intro{
    width: 100%;
    height: 100%;
    background-color: black;
    position: relative;
    z-index: 1000;
}

#introTitle{
    color: white;
    font: 300 24px/24px 'proxima-nova', sans-serif;
    position: relative;
    margin: 0 0 10px 0;
}

#introCopy{
    color: rgb(170, 170, 170);
    font: 100 12px/14px 'proxima-nova', sans-serif;
    width: 330px;
    float: right;
    margin: 50px 100px 0 0;
    position: relative;
}

#lamp{
    width: 100%;
    height: 100%;
    background-color: black;

}

#roi{
    width: 100%;
    height: 100%;
    background-color: black;
}

.roiImage{
    position: absolute;
    top: 0;
    left:0;
}

#before{
    width: 100%;
    height: 100%;
    background: url(../img/before.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    z-index: 2;
    border-right: 1px solid white;
    overflow: hidden;
}

#after{
    width: 100%;
    height: 100%;
    background: url(../img/after.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    z-index: 1;
}

#graphHolder{
    width: 600px;
    height: 140px;
    background-color: rgba(0,0,0,.7);
    position: absolute;
    top: -145px;
}

#graph{
    border-left: 1px solid #aaa;
    border-bottom: 1px solid #aaa;
    width: 575px;
    height: 94px;
    position: absolute;
    top: 10px;
    right: 10px;
    background-color: black;
}

#graphImage{
    background: transparent url(../img/charts.png) no-repeat 0 0;
    width: 575px;
    height: 94px;
    border-right: 1px solid #3d3d3d;

}

#graphLegend{
    margin: 10px 0 0;
    height: 20px;
}

.graphLabel{
    display: inline;
    float: left;
    color: white;
    font: 400 14px/14px 'proxima-nova', sans-serif;
}

#energyLabel{
    color: #42b28d;
}

#savingsLabel{
}

#energyValue{
    float: left;
    color: #42b28d;
    font: 100 14px/14px 'proxima-nova', sans-serif;
    margin: 0 30px 0 0;
}

#savingsValue{
    float: left;
    color: white;
    font: 100 14px/14px 'proxima-nova', sans-serif;
}

#afterInfo,#beforeInfo{
    width: 560px;
    height: 164px;
    background-color: rgba(0,0,0,.7);
    position: absolute;
    top: 150px;
    color: white;
    padding: 20px;
    font: 100 14px/18px 'proxima-nova' , sans-serif;
}

#afterInfo h1, #beforeInfo h1{
    font: 300 24px/24px 'proxima-nova', sans-serif;
    margin: 0 0 10px 0;
}

#slideHolder{
    position: absolute;
    bottom: 0;
    height: 50px;
    z-index: 100;
    width: 600px;
    left: 50%;
    margin-left: -300px
}

#yearProgress{
    width: 100px;
    position: relative;
    color: white;
    font: 100 18px/18px 'proxima-nova', sans-serif;
    text-align: center;
    padding: 15px 0 0;
    margin: -15px 0 0;
}

#boldYear{
    font: 400 18px/18px 'proxima-nova', sans-serif;
}


#costPerMonth{
    color: white;
    position: absolute;
    top: 63px;
    right: 30px;
    z-index: 3;
    width: 250px;
    margin: 0 10px 0 0;
}

#costValueLabel{
    color: white;
    font: normal 14px/14px 'proxima-nova', Arial, sans-serif;
    font-weight: 700;
}

#costValue{
    font: normal 72px/72px 'proxima-nova', Arial, sans-serif;
    font-weight: 200;
}

.dragdealer {
    position: relative;
    height: 20px;
    background:  rgb(255,255,255);
    background: rgba(255,255,255,.8);
    border-radius: 30px;
}
.dragdealer .handle {
    position: absolute;
    cursor: pointer;
}
.dragdealer .red-bar {
    width: 100px;
    height: 20px;
    background: #54b1ca; /* Old browsers */
    background: -moz-linear-gradient(top,  #54b1ca 0%, #3e7a9f 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#54b1ca), color-stop(100%,#3e7a9f)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #54b1ca 0%,#3e7a9f 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #54b1ca 0%,#3e7a9f 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #54b1ca 0%,#3e7a9f 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #54b1ca 0%,#3e7a9f 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#54b1ca', endColorstr='#3e7a9f',GradientType=0 ); /* IE6-9 */

    color: #FFF;
    line-height: 30px;
    text-align: center;
    border-radius: 30px;
}
.dragdealer .disabled {
    background: #898989;
}

.ds{
    text-shadow: 1px 1px 0px #000;
}

#lampHolder{
    position: relative;
}

#bulb1a{
    position: absolute;
    background: transparent url(../img/bulb1a.png) no-repeat 0 0;
    width: 210px;
    height: 222px;
    top: 135px;
    z-index: 10;
    float: left;
}

#bulb1{
    position: absolute;
    background: transparent url(../img/bulb1.png) no-repeat 0 0;
    width: 270px;
    height: 222px;
    top: 135px;
    z-index: 9;
}

#bulb2{
    position: absolute;
    background: transparent url(../img/bulb2.png) no-repeat 0 0;
    width: 205px;
    height: 138px;
    top: 180px;
    left: 87px;
    z-index: 9;
}

#bulb3a{
    position: absolute;
    background: transparent url(../img/bulb3a.png) no-repeat 0 0;
    width: 245px;
    height: 377px;
    left: 90px;
    z-index: 10;
    top: 50px;

}

#bulb3{
    position: absolute;
    background: transparent url(../img/bulb3.png) no-repeat 0 0;
    width: 341px;
    height: 377px;
    left: 90px;
    z-index: 9;
    top: 50px;
}

#bulb4{
    position: absolute;
    background: transparent url(../img/bulb4.png) no-repeat 0 0;
    width: 147px;
    height: 254px;
    top: 110px;
    left: 170px;
    z-index: 9;
}

#bulb5{
    position: absolute;
    background: transparent url(../img/bulb5on.png) no-repeat 0 0;
    width: 189px;
    height: 267px;
    top: 100px;
    left: 199px;
    z-index: 9;
}

#bulb6{
    position: absolute;
    background: transparent url(../img/bulb6.png) no-repeat 0 0;
    width: 164px;
    height: 310px;
    z-index: 10;
    top: 76px;
    left: 250px;
}

#lampLight{
    position: absolute;
    top: 340px;
    background: transparent url(../img/light.jpg) no-repeat 0 ;
    height:159px;
    width: 799px;
    z-index: 0;
    left: -80px
}

#learnMoreButton{
    padding: 10px;
    width: 120px;
    height: 25px;
    border: 1px solid white;
    text-align: center;
    color: white;
    font: 200 14px/14px 'proxima-nova', sans-serif;
    clear: both;
    text-decoration: none;
    margin: 10px 0 0;
    position: relative;
}

.backButton{
    width: 60px;
    height: 25px;
    position: absolute;
    top: 10px;
    left: 10px;
    color: white;
    cursor: pointer;
    font: 200 16px/16px 'proxima-nova', sans-serif;
    padding: 10px 0 0 20px;
    border: 1px solid white;
    z-index: 50;
}

.hotspot{
    width: 40px;
    height: 40px;
    border-radius: 100px;
    cursor: pointer;
    z-index: 1000;
    left: 120px;
    position: relative;
    top: 160px;
    opacity: 1;
}

#lampLabel{
    color: white;
    font: 100 24px/24px 'proxima-nova', serif;
    padding: 10px 0 0 10px;
    width: 200px;
    margin: auto;
}

#lampTitle{
    font: 400 24px/24px 'proxima-nova', serif;

}

#lampSlide{
    position: absolute;
    width: 500px;
    z-index: 100;
    top: 500px;
    margin-left: 50%;
    left: -250px;
}



#learnMore{
    width: 300px;
    height: 80px;
    background-color: rgba(0,0,0,.7);
    position: relative;
    z-index: 100;
    padding: 0px 0 0 10px;
    position: absolute;
    top: 149px;
    right: 0;
}

#learnMore input{
    margin: 10px 0 0 0;
}

#learnMore h1{
    color: white;
    font: 200 18px/18px 'proxima-nova';
    margin: 10px 0 0 0;
}

#submitButton{
    width: 55px;
    height: 14px;
    border: 1px solid white;
    color: white;
    font: 200 14px/14px 'proxima-nova', sans-serif;
    position: relative;
    padding: 5px 0 5px 10px;
    float: right;
    margin: 10px 10px 0 0;
    cursor: pointer;
}

.ui-front {
    z-index: 1010 !important;
}

.ui-widget-overlay{
    background: rgba(0,0,0,.8) !important;
    opacity: 1 !important;
}

.ui-widget-content{
    background: black !important;
    border-radius: 0 !important;
    color: white;
}

.ui-widget-content p{
    color: white !important;
    font: 200 12px/12px 'proxima-nova', sans-serif;
}

.ui-widget-header{
    background: none !important;
    border: none !important;
}

.ui-dialog .ui-dialog-content {
    padding: 0 !important;
}

.ui-state-default .ui-icon {
    background:transparent url(../img/close.png) no-repeat 0 0 !important;
    width: 20px !important;
    height: 20px !important;
    padding: 0 !important;
   }
.ui-state-default{
    background: none !important;
}

.ui-dialog-titlebar{
    height: 20px !important;
}


.ui-button-icon-only {
    border: none !important;
    padding: 0 !important;
}



#dialogCol1{
    width: 325px;
    position: relative;
    float: left;
}

#dialogCol2 {
    position: relative;
    width: 420px;
    color: #aaa;
    font: 200 12px/17px 'proxima-nova', sans-serif;
    float: right;
    margin: 0 20px 0 0;
}

#dialogCol2 h1{
    color: white;
    font: 100 24px/36px 'proxima-nova', sans-serif;

}

#partNumber{
    color: #aaa;
    font-size: 18px;
}