/* ========== */
/* == base == */
/* ========== */

body, html { background: #fff; border: 0; margin: 0; padding: 0; height: 100%; }









/* ================== */
/* == custom fonts == */
/* ================== */

@font-face {
    font-family: 'MyriadProLight';
    src: url('../../_lib/fonts/myriadpro-light.eot');
    src: url('../../_lib/fonts/myriadpro-light.eot?#iefix') format('embedded-opentype'),
         url('../../_lib/fonts/myriadpro-light.woff') format('woff'),
         url('../../_lib/fonts/myriadpro-light.ttf') format('truetype'),
         url('../../_lib/fonts/myriadpro-light.svg#MyriadProLight') format('svg');
	font-weight: normal;
	font-style: normal;
}
@font-face {
    font-family: 'MyriadProRegular';
    src: url('../../_lib/fonts/myriadpro-regular.eot');
    src: url('../../_lib/fonts/myriadpro-regular.eot?#iefix') format('embedded-opentype'),
         url('../../_lib/fonts/myriadpro-regular.woff') format('woff'),
         url('../../_lib/fonts/myriadpro-regular.ttf') format('truetype'),
         url('../../_lib/fonts/myriadpro-regular.svg#MyriadProRegular') format('svg');
	font-weight: normal;
	font-style: normal;
}
@font-face {
    font-family: 'MyriadProSemibold';
    src: url('../../_lib/fonts/myriadpro-semibold.eot');
    src: url('../../_lib/fonts/myriadpro-semibold.eot?#iefix') format('embedded-opentype'),
         url('../../_lib/fonts/myriadpro-semibold.woff') format('woff'),
         url('../../_lib/fonts/myriadpro-semibold.ttf') format('truetype'),
         url('../../_lib/fonts/myriadpro-semibold.svg#MyriadProSemibold') format('svg');
	font-weight: normal;
	font-style: normal;
}
@font-face {
    font-family: 'MyriadProBold';
    src: url('../../_lib/fonts/myriadpro-bold.eot');
    src: url('../../_lib/fonts/myriadpro-bold.eot?#iefix') format('embedded-opentype'),
         url('../../_lib/fonts/myriadpro-bold.woff') format('woff'),
         url('../../_lib/fonts/myriadpro-bold.ttf') format('truetype'),
         url('../../_lib/fonts/myriadpro-bold.svg#MyriadProBold') format('svg');
}

.font-black { color: #000; }
.font-gray-dark { color: #333; }
.font-white { color: #fff; }

.font-shadow-white { text-shadow: 0px 1px 0px rgba(255, 255, 255, 1); }
.opacity
{
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
	filter: alpha(opacity=50);
	-khtml-opacity: 0.5;
	-moz-opacity: 0.5;
	-o-opacity: 0.5;
	opacity: 0.5;
}









/* =================== */
/* == button styles == */
/* =================== */

.button-style-hero, .button-style-hero:active, .button-style-hero:hover, .button-style-hero:visited { background: #175DA8; color: #fff; cursor: pointer; font: normal 20px MyriadProRegular; line-height: 22px; margin: 0; padding: 19px 26px 16px 26px;  text-decoration: none; text-shadow: 0px 1px 0px rgba(0, 0, 0, .41);
	border-radius: 4px;
	CCborderRadius: 4px;
	-khtml-border-radius: 4px;
	-moz-border-radius: 4px;
	-o--border-radius: 4px;
	-webkit-border-radius: 4px;
}

.button-style-diversion-reports { background: #175DA8; color: #fff; cursor: pointer; font: normal 12px MyriadProBold; line-height: 13px; margin: 0px 2px 0px 0px; padding: 5px 10px 4px 10px;  text-decoration: none; text-shadow: 0px 1px 0px rgba(0, 0, 0, .21); }
.button-style-diversion-reports:hover { background: #676C72; color: #fff; cursor: pointer; font: normal 12px MyriadProBold; line-height: 13px; margin: 0px 2px 0px 0px; padding: 5px 10px 4px 10px;  text-decoration: none; text-shadow: 0px 1px 0px rgba(0, 0, 0, .21); }
.button-style-diversion-reports-selected, .button-style-diversion-reports-selected:hover { background: #676C72; color: #fff; cursor: pointer; font: normal 12px MyriadProBold; line-height: 13px; margin: 0px 2px 0px 0px; padding: 5px 10px 4px 10px;  text-decoration: none; text-shadow: 0px 1px 0px rgba(0, 0, 0, .21); }

.button-style-carbon-reports { background: #175DA8; color: #fff; cursor: pointer; font: normal 12px MyriadProBold; line-height: 13px; margin: 0px 2px 0px 0px; padding: 5px 10px 4px 10px;  text-decoration: none; text-shadow: 0px 1px 0px rgba(0, 0, 0, .21); }
.button-style-carbon-reports:hover { background: #676C72; color: #fff; cursor: pointer; font: normal 12px MyriadProBold; line-height: 13px; margin: 0px 2px 0px 0px; padding: 5px 10px 4px 10px;  text-decoration: none; text-shadow: 0px 1px 0px rgba(0, 0, 0, .21); }
.button-style-carbon-reports-selected, .button-style-carbon-reports-selected:hover { background: #676C72; color: #fff; cursor: pointer; font: normal 12px MyriadProBold; line-height: 13px; margin: 0px 2px 0px 0px; padding: 5px 10px 4px 10px;  text-decoration: none; text-shadow: 0px 1px 0px rgba(0, 0, 0, .21); }

.button-chat, .button-chat:active, .button-chat:hover, .button-chat:visited { background: #efefef; color: #336699; cursor: pointer; font: normal 30px MyriadProRegular; line-height: 32px; margin: 0; padding: 19px 26px 16px 26px; text-decoration: none; text-shadow: 0px 1px 0px rgba(255, 255, 255, .41);
	border-radius: 14px;
	CCborderRadius: 14px;
	-khtml-border-radius: 14px;
	-moz-border-radius: 14px;
	-o--border-radius: 14px;
	-webkit-border-radius: 14px;
}

.brand-link, .brand-link:active, .brand-link:hover, .brand-link:visited { text-decoration: none; }









/* ================ */
/* == global nav == */
/* ================ */

.logo { background: url(../../_images/wastetracking-logo.png) no-repeat center center; border: 0; float: left; margin: 0; padding: 0; position: relative; width: 48px; height: 80px; z-index: 110; }
.logo-text-header { color: #fff; font: normal 24px MyriadProBold; line-height: 26px; margin: 0; padding: 22px 0px 0px 58px; text-shadow: 0px 1px 0px rgba(0, 0, 0, .41); }
.logo-text-header-light { color: #fff; font: normal 24px MyriadProLight; line-height: 26px; margin: 0; padding: 0; text-shadow: 0px 1px 0px rgba(0, 0, 0, .41); }
.logo-text-sub-header { color: #1f1f1f; font: normal 13px MyriadProSemibold; line-height: 15px; margin: -2px 0px 0px 0px; padding: 0px 0px 0px 58px; text-shadow: 0px 1px 0px rgba(255, 255, 255, .13); }
.logo-text-sub-header-gray { color: #afafaf; font: normal 13px MyriadProSemibold; line-height: 15px; margin: -2px 0px 0px 0px; padding: 0px 0px 0px 58px; text-shadow: 0px 1px 0px rgba(0, 0, 0, .13); }

.login-text { margin: 0; padding: 43px 0px 0px 0px; text-align: right; }
.login-text-link, .login-text-link:active, .login-text-link:hover, .login-text-link:visited { color: #fff; font: normal 14px MyriadProSemibold; line-height: 16px; margin: 0; padding: 0; text-decoration: none; text-shadow: 0px 1px 0px rgba(0, 0, 0, .41); }

.menu { margin: 0; padding: 36px 0px 0px 0px; text-align: right; }
.menu-link, .menu-link:active, .menu-link:hover, .menu-link:visited { color: #fff; font: normal 14px MyriadProBold; line-height: 16px; margin: 0; padding: 0; text-decoration: none; text-shadow: 0px 1px 0px rgba(0, 0, 0, .41); }
.diversion-link-dot { color: #ccccff; font: normal 24px MyriadProBold; position: relative; top: -21px; left: -68px; text-decoration: none; }
.carbon-link-dot { color: #e5e5ff; font: normal 24px MyriadProBold; position: relative; top: -21px; left: -90px; text-decoration: none; }
.material-link-dot { color: #fff; font: normal 24px MyriadProBold; position: relative; top: -21px; left: -65px; text-decoration: none; }









/* ========== */
/* == hero == */
/* ========== */

#container-hero
{
	background: #666699; margin: 0; padding: 0; width: 100%; min-width: 1170px; height: 900px;
	background-size: cover;
	-khtml-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
	-webkit-background-size: cover;
}

.nav-hero { background-color: #175DA8; border: 0; margin: -900px 0px 0px 0px; padding: 0; position: relative; width: 100%; min-width: 1170px; height: 80px; z-index: 100;
	opacity: 0.50;
	filter: alpha(opacity=.50);
	-khtml-opacity: 0.50;
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
	-moz-opacity: 0.50;
	-o-opacity: 0.50;
	-webkit-opacity: 0.50;
}
.nav-hero-header { border: 0; margin: -80px 0px 0px 0px; padding: 0; position: relative; width: 100%; min-width: 1170px; height: 80px; z-index: 110; }

/*#logo-link { background: #efefef; cursor: pointer; margin: 0; padding: 0; width: 100px; height: 40px; }*/

.hero-header { margin: 0; padding: 99px 0px 0px 0px; }
.hero-header p.header { color: #fff; font: normal 90px MyriadProSemibold; line-height: 80px; margin: -1px 0px 0px 0px; padding: 0; text-align: center; text-shadow: 5px 5px 5px rgba(0, 0, 0, 0.7); }
.hero-header p.sub-header { color: #fff; font: normal 24px MyriadProRegular; line-height: 26px; margin: 11px 0px 0px 0px; padding: 0; text-align: center; text-shadow: 3px 3px 3px rgba(0, 0, 0, 0.7); }
.hero-header p.sub-header-link { font: normal 30px MyriadProLight; line-height: 32px; margin: -3px 0px 0px 0px; padding: 0; text-align: center; }
.hero-header p.sub-header-link a { color: #333; text-decoration: none; }
.hero-header p.sub-header-link a:active, .header-hero p.sub-header-link a:hover, .header-hero p.sub-header-link a:visited { color: #333; text-decoration: none; }
.hero-header p.brand { line-height: 46px; margin: 0; padding: 0; position: relative; bottom: -339px; width: 170px; height: 46px; }
.hero-buttons { margin: 61px 0px 0px 0px; padding: 0; text-align: center; }









/* ==================================== */
/* == basic jquery slider essentials == */
/* ==================================== */

#hero-carousel-container { background: none; margin: 0; padding: 0; position: relative; width: 100%; min-width: 1170px; height: 900px; z-index: 50; }
.hero-1
{
    background: url(../../_images/hero/hero-1.jpg) no-repeat center center; margin: 0; padding: 0; width: 100%; min-width: 1170px; height: 900px;
    background-size: cover;
    -khtml-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    -webkit-background-size: cover;
}
.hero-2
{
    background: url(../../_images/hero/hero-2.jpg) no-repeat center center; margin: 0; padding: 0; width: 100%; min-width: 1170px; height: 900px;
    background-size: cover;
    -khtml-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    -webkit-background-size: cover;
}
.hero-3
{
    background: url(../../_images/hero/hero-3.jpg) no-repeat center center; margin: 0; padding: 0; width: 100%; min-width: 1170px; height: 900px;
    background-size: cover;
    -khtml-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    -webkit-background-size: cover;
}
.hero-4
{
    background: url(../../_images/hero/hero-4.jpg) no-repeat center center; margin: 0; padding: 0; width: 100%; min-width: 1170px; height: 900px;
    background-size: cover;
    -khtml-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    -webkit-background-size: cover;
}
.hero-5
{
    background: url(../../_images/hero/hero-5.jpg) no-repeat center center; margin: 0; padding: 0; width: 100%; min-width: 1170px; height: 900px;
    background-size: cover;
    -khtml-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    -webkit-background-size: cover;
}
.hero-6
{
    background: url(../../_images/hero/hero-6.jpg) no-repeat center center; margin: 0; padding: 0; width: 100%; min-width: 1170px; height: 900px;
    background-size: cover;
    -khtml-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    -webkit-background-size: cover;
}
.hero-7
{
    background: url(../../_images/hero/hero-7.jpg) no-repeat center center; margin: 0; padding: 0; width: 100%; min-width: 1170px; height: 900px;
    background-size: cover;
    -khtml-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    -webkit-background-size: cover;
}
.hero-8
{
    background: url(../../_images/hero/hero-8.jpg) no-repeat center center; margin: 0; padding: 0; width: 100%; min-width: 1170px; height: 900px;
    background-size: cover;
    -khtml-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    -webkit-background-size: cover;
}
.hero-9
{
    background: url(../../_images/hero/hero-9.jpg) no-repeat center center; margin: 0; padding: 0; width: 100%; min-width: 1170px; height: 900px;
    background-size: cover;
    -khtml-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    -webkit-background-size: cover;
}
.hero-10
{
    background: url(../../_images/hero/hero-10.jpg) no-repeat center center; margin: 0; padding: 0; width: 100%; min-width: 1170px; height: 900px;
    background-size: cover;
    -khtml-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    -webkit-background-size: cover;
}
.hero-11
{
    background: url(../../_images/hero/hero-11.jpg) no-repeat center center; margin: 0; padding: 0; width: 100%; min-width: 1170px; height: 900px;
    background-size: cover;
    -khtml-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    -webkit-background-size: cover;
}

ul.bjqs { display: none; list-style: none; margin: 0; overflow: hidden; padding: 0; position: relative; }
li.bjqs-slide { display: none; position: absolute; }
ul.bjqs-controls { list-style: none; margin: -10px 0px 0px 0px; padding: 0; z-index: 9999; }
ul.bjqs-controls.v-centered li a { position: absolute; }
ul.bjqs-controls.v-centered li.bjqs-next a { right: 0; }
ul.bjqs-controls.v-centered li.bjqs-prev a { left: 0; }
ol.bjqs-markers{ list-style: none; margin: 0; padding: 0; width: 100%; }
ol.bjqs-markers.h-centered{ text-align: center; }
ol.bjqs-markers li { display: inline; }
ol.bjqs-markers li a { display: inline-block; }
p.bjqs-caption{ display: block; margin: 0; padding: 2%; position: absolute; bottom: 0; width: 96%; }

#banner-fade,
#banner-slide{ width: 100%; }
ul.bjqs-controls.v-centered li a { background: #fff; color: #000; /*display:block;*/ display: none; padding: 10px; text-decoration: none; }
ul.bjqs-controls.v-centered li a:hover { background: #000; color: #fff; }

ol.bjqs-markers li a { background: #fff; color: #fff; font: normal 8px Arial; margin: 0px 5px 0px 5px; padding: 0px 3px 0px 3px; position: relative; top: -146px; left: 0;
	border-radius: 10px;
	-khtml-border-radius: 10px;
	-moz-border-radius: 10px;
	-o-border-radius: 10px;
	-webkit-border-radius: 10px;
}
ol.bjqs-markers li.active-marker a, ol.bjqs-markers li a:hover{ background: #000; color: #000; }
p.bjqs-caption{ background: rgba(255, 255, 255, 0.5); display: none; }

.transparent-box { background: rgba(0, 0, 0, 0.5); margin: 0 auto; position: relative; top: -200px; width: 300px; height: 25px; z-index: 50; }









/* ======================= */
/* == diversion reports == */
/* ======================= */

#container-diversion-reports
{
	background: url(../../_images/diversion-reports/background.jpg) no-repeat center center; margin: 0; padding: 0; width: 100%; min-width: 1170px; height: 1138px;
	background-size: cover;
	-khtml-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
	-webkit-background-size: cover;
}

.nav-diversion { background-color: #676C72; border: 0; margin: 0; padding: 0; width: 100%; min-width: 1170px; height: 80px; z-index: 100; }

.diversion-reports-header { margin: 0; padding: 57px 0px 0px 0px; }
.diversion-reports-title p { color: #ccccff; font: normal 18px MyriadProBold; letter-spacing: 1px; line-height: 20px; margin: 0 auto; padding: 1px 0px 0px 0px; text-align: center; text-shadow: 0px 1px 0px rgba(0, 0, 0, .41); }
.diversion-reports-buttton-months { float: left; margin: 0; padding: 0; height: 24px; }
.diversion-reports-buttton-types { float: right; margin: 0; padding: 0; height: 24px; }
.diversion-reports-summary { margin: 0; padding: 71px 0px 0px 0px; }
.diversion-reports-summary p { font: normal 50px MyriadProRegular; line-height: 52px; margin: 0; padding: 0; text-align: center; text-shadow: 0px 1px 0px rgba(0, 0, 0, .41); }

#diversion-rate { background: #676c72; margin: 0px 0px 2px 0px; padding: 0; width: 225px; height: 81px; }
#diversion-rate p.diversion-rate-title { color: #efefef; font: normal 16px MyriadProRegular; line-height: 18px; margin: 0; padding: 15px 0px 0px 15px; text-shadow: 0px 1px 0px rgba(0, 0, 0, .41); }
#diversion-rate p.diversion-rate-number { color: #ccccff; font: normal 22px MyriadProRegular; line-height: 24px; margin: 0; padding: 2px 0px 0px 15px; text-shadow: 0px 1px 0px rgba(0, 0, 0, .41); }

#diversion-legend { margin: 151px 0px 0px 0px; padding: 0; }
#diversion-legend p.diversion-legend-disposed { color: #ccccff; font: normal 16px MyriadProRegular; line-height: 22px; margin: 0; padding: 0; text-shadow: 0px 1px 0px rgba(255, 255, 255, .11); }
#diversion-legend p.diversion-legend-recycled { color: #ccccff; font: normal 16px MyriadProRegular; line-height: 22px; margin: 0; padding: 0; text-shadow: 0px 1px 0px rgba(0, 0, 0, .41); }
#diversion-legend p.diversion-legend-salvaged { color: #ccccff; font: normal 16px MyriadProRegular; line-height: 22px; margin: 0; padding: 0; text-shadow: 0px 1px 0px rgba(0, 0, 0, .41); }
#diversion-legend .diversion-legend-number { color: #ccccff; font: normal 18px MyriadProRegular; line-height: 18px; margin: 0; padding: 0px 0px 0px 12px; text-shadow: 0px 1px 0px rgba(0, 0, 0, .41); }

#diversion-chart-donut { margin: 37px auto 0 auto; padding: 0; width: 500px; height: 410px;  }

#diversion-data-recycled { margin: 0; padding: 0; position: relative; top: -126px; left: 574px; height: 60px; }
.diversion-data-recycled-title { color: #9da7d1; font: normal 16px MyriadProSemibold; line-height: 18px; margin: 0; padding: 0; text-align: left; text-shadow: 0px 1px 0px rgba(0, 0, 0, .41); }
.diversion-data-recycled-number { color: #fff; font: normal 24px MyriadProSemibold; line-height: 26px; margin: 0; padding: 2px 0px 0px 0px; text-align: left; text-shadow: 0px 1px 0px rgba(0, 0, 0, .41); }
.diversion-data-recycled-number-selected { color: #000; font: normal 32px MyriadProBold; line-height: 34px; margin: 0; padding: 0; text-align: left; text-shadow: 0px 1px 0px rgba(255, 255, 255, .13); }

#diversion-data-disposed { margin: 0; overflow: visible; padding: 0; position: relative; top: -290px; left: -573px; height: 60px; }
.diversion-data-disposed-title { color: #141a38; font: normal 16px MyriadProSemibold; line-height: 18px; margin: 0; padding: 0; text-align: right; text-shadow: 0px 1px 0px rgba(255, 255, 255, .21); }
.diversion-data-disposed-number { color: #fff; font: normal 24px MyriadProSemibold; line-height: 26px; margin: 0; padding: 2px 0px 0px 0px; text-align: right; text-shadow: 0px 1px 0px rgba(0, 0, 0, .41); }
.diversion-data-disposed-number-selected { color: #000; font: normal 32px MyriadProBold; line-height: 34px; margin: 0; padding: 0; text-align: right; text-shadow: 0px 1px 0px rgba(255, 255, 255, .13); width: auto; }

#diversion-data-salvaged { margin: 0; padding: 0; position: relative; top: -412px; left: 525px; height: 60px; }
.diversion-data-salvaged-title { color: #5f73d1; font: normal 16px MyriadProSemibold; line-height: 18px; margin: 0; padding: 0; text-align: left; text-shadow: 0px 1px 0px rgba(0, 0, 0, .41); }
.diversion-data-salvaged-number { color: #fff; font: normal 24px MyriadProSemibold; line-height: 26px; margin: 0; padding: 2px 0px 0px 0px; text-align: left; text-shadow: 0px 1px 0px rgba(0, 0, 0, .41); }
.diversion-data-salvaged-number-selected { color: #000; font: normal 32px MyriadProBold; line-height: 34px; margin: 0; padding: 0; text-align: left; text-shadow: 0px 1px 0px rgba(255, 255, 255, .13); }

#diversion-chart-line { margin: -70px auto 0 auto; width: 970px; }

#diversion-stats { position: relative; top: 52px; }
#diversion-stats p.disposed { color: #D2CBBF; font: normal 20px MyriadProRegular; line-height: 22px; margin: 0; padding: 0; text-align: center; text-shadow: 0px 1px 0px rgba(255, 255, 255, .11); }
#diversion-stats p.disposed-number { color: #fff; font: normal 30px MyriadProSemibold; line-height: 32px; margin: 0; padding: 0; text-align: center; text-shadow: 0px 1px 0px rgba(0, 0, 0, .41); }
#diversion-stats p.recycled { color: #D2CBBF; font: normal 20px MyriadProRegular; line-height: 22px; margin: 0; padding: 0; text-align: center; text-shadow: 0px 1px 0px rgba(0, 0, 0, .51); }
#diversion-stats p.recycled-number { color: #fff; font: normal 30px MyriadProSemibold; line-height: 32px; margin: 0; padding: 0; text-align: center; text-shadow: 0px 1px 0px rgba(0, 0, 0, .41); }
#diversion-stats p.salvaged { color: #D2CBBF; font: normal 20px MyriadProRegular; line-height: 22px; margin: 0; padding: 0; text-align: center; text-shadow: 0px 1px 0px rgba(0, 0, 0, .51); }
#diversion-stats p.salvaged-number { color: #fff; font: normal 30px MyriadProSemibold; line-height: 32px; margin: 0; padding: 0; text-align: center; text-shadow: 0px 1px 0px rgba(0, 0, 0, .41); }









/* =========================== */
/* == environmental reports == */
/* =========================== */

#container-carbon-reports { background: #54555A; margin: 0; padding: 0; width: 100%; min-width: 1170px; height: 820px; }

.nav-carbon { background-color: #939A9A; border: 0; margin: 0; padding: 0; width: 100%; min-width: 1170px; height: 80px; z-index: 100; }

.carbon-reports-header { margin: 0; padding: 57px 0px 0px 0px; }
.carbon-reports-title p { color: #e5e5ff; font: normal 18px MyriadProBold; letter-spacing: 1px; line-height: 20px; margin: 0 auto; padding: 1px 0px 0px 0px; text-align: center; text-shadow: 0px 1px 0px rgba(0, 0, 0, .41); }
.carbon-reports-buttton-months { float: left; margin: 0; padding: 0; height: 24px; }
.carbon-reports-buttton-types { float: right; margin: 0; padding: 0; height: 24px; }
.carbon-reports-summary { margin: 0; padding: 71px 0px 0px 0px; }
.carbon-reports-summary p { font: normal 50px MyriadProRegular; line-height: 52px; margin: 0; padding: 0; text-align: center; text-shadow: 0px 1px 0px rgba(0, 0, 0, .41); }

#carbon-chart-bar { margin: 108px auto 0 auto; padding: 0; width: 970px; height: 267px; }
.carbon-icons { background: url(../../_images/carbon-reports/icons.png) no-repeat center center; margin: 15px 0px 0px 177px; padding: 0; width: 869px; height: 73px; }









/* ====================== */
/* == material reports == */
/* ====================== */

#container-material-reports
{
	background: #666; margin: 0; padding: 0; width: 100%; min-width: 1170px; height: 719px;
	background-size: cover;
	-khtml-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
	-webkit-background-size: cover;
}

.nav-material { background-color: #797E80; border: 0; margin: 0; padding: 0; width: 100%; min-width: 1170px; height: 80px; z-index: 100;
	/*opacity: 0.60;
	filter: alpha(opacity=60);
	-khtml-opacity: 0.60;
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
	-moz-opacity: 0.60;
	-o-opacity: 0.60;
	-webkit-opacity: 0.60;*/
}
.nav-material-header { border: 0; margin: -80px 0px 0px 0px; padding: 0; width: 100%; min-width: 1170px; height: 80px; z-index: 110; }

.material-reports-header { margin: 0; padding: 57px 0px 0px 0px; }
.material-reports-title p { color: #fff; font: normal 18px MyriadProBold; letter-spacing: 1px; line-height: 20px; margin: 0 auto; padding: 1px 0px 0px 0px; text-align: center; text-shadow: 0px 1px 0px rgba(0, 0, 0, .41); }
.material-reports-summary { margin: 0; padding: 71px 0px 0px 0px; }
.material-reports-summary p { font: normal 50px MyriadProRegular; line-height: 52px; margin: 0; padding: 0; text-align: center; text-shadow: 0px 1px 0px rgba(0, 0, 0, .41); }

.material-chart-list { margin: 0; padding: 129px 0px 0px 0px; }
.material-chart-list p.numbers { color: #e0e0e0; font: normal 20px MyriadProRegular; line-height: 26px; margin: 0; padding: 0px 20px 0px 0px; text-align: right; }
.material-chart-list p.materials { color: #e0e0e0; font: normal 20px MyriadProRegular; line-height: 26px; margin: 0; padding: 0; }
.material-chart-list p.in-tons { color: #fff; font: normal 20px MyriadProBold; line-height: 26px; margin: 0; padding: 0; }
.material-chart-list p.rate { color: #e0e0e0; font: normal 20px MyriadProBold; line-height: 26px; margin: 0; padding: 0; }
.small { font: normal 12px MyriadProBold; line-height: 26px; margin: 0; padding: 0; }









/* =========== */
/* == login == */
/* =========== */

#container-login { background: #175da8; margin: 0; padding: 0; width: 100%; min-width: 1170px; height: 187px; }
.login-title p { color: #fff; font: normal 17px MyriadProRegular; letter-spacing: 1px; line-height: 19px; margin: 50px 0px 0px 0px; padding: 0px 0px 0px 8px; text-shadow: 0px 1px 0px rgba(0, 0, 0, .41); }
.login-form { background: url(../../_images/form-bg.jpg) no-repeat center center; margin: 0; padding: 0; width: 570px; height: 64px; }

.form-top { background: url(../../_images/form-top-bg.png) no-repeat center center; float: right; margin: 17px 0px 0px 0px; padding: 0; width: 430px; height: 44px; }









/* ================= */
/* == form fields == */
/* ================= */

.initial-class { color: #fff; }
.normal-class { color: #fff; }

input { background: none; border: none; color: #333; font: normal 16px Arial; line-height: 44px; outline: none; }

.top-field-email-address { color: #fff; float: left; font: normal 14px MyriadProSemibold; line-height: 16px; margin: 16px 0px 0px 49px; padding: 0; text-shadow: 0px 1px 0px rgba(0, 0, 0, .17); width: 130px; height: 17px;
	-webkit-appearance: none;
	-moz-appearance: none;
	-ms-appearance: none;
	-o-appearance: none;
	-khtml-appearance: none;
	appearance: none;
}
.top-field-password { color: #fff; float: left; font: normal 14px MyriadProSemibold; line-height: 16px; margin: 16px 0px 0px 49px; padding: 0; text-shadow: 0px 1px 0px rgba(0, 0, 0, .17); width: 121px; height: 17px;
	-webkit-appearance: none;
	-moz-appearance: none;
	-ms-appearance: none;
	-o-appearance: none;
	-khtml-appearance: none;
	appearance: none;
}
.field-email-address { color: #fff; float: left; font: normal 20px MyriadProRegular; line-height: 22px; margin: 23px 0px 0px 66px; padding: 0; text-shadow: 0px 1px 0px rgba(0, 0, 0, .21); width: 170px; height: 22px;
	-webkit-appearance: none;
	-moz-appearance: none;
	-ms-appearance: none;
	-o-appearance: none;
	-khtml-appearance: none;
	appearance: none;
}
.field-password { color: #fff; float: left; font: normal 20px MyriadProRegular; line-height: 22px; margin: 23px 0px 0px 52px; padding: 0; text-shadow: 0px 1px 0px rgba(0, 0, 0, .21); width: 170px; height: 22px;
	-webkit-appearance: none;
	-moz-appearance: none;
	-ms-appearance: none;
	-o-appearance: none;
	-khtml-appearance: none;
	appearance: none;
}
.field-submit { background: #194c19; color: #fff; cursor: pointer; float: left; font: normal 20px MyriadProRegular; line-height: 22px; margin: 12px 0px 0px 10px; padding: 0; width: 92px; height: 42px;
	border-radius: 3px;
	CCborderRadius: 3px;
	-khtml-border-radius: 3px;
	-moz-border-radius: 3px;
	-o--border-radius: 3px;
	-webkit-border-radius: 3px;
}
.field-contractor-id { color: #fff; float: left; font: normal 20px MyriadProRegular; line-height: 22px; margin: 23px 0px 0px 66px; padding: 0; text-shadow: 0px 1px 0px rgba(0, 0, 0, .21); width: 170px; height: 22px;
	-webkit-appearance: none;
	-moz-appearance: none;
	-ms-appearance: none;
	-o-appearance: none;
	-khtml-appearance: none;
	appearance: none;
}
.field-contractor-password { color: #fff; float: left; font: normal 20px MyriadProRegular; line-height: 22px; margin: 23px 0px 0px 52px; padding: 0; text-shadow: 0px 1px 0px rgba(0, 0, 0, .21); width: 170px; height: 22px;
	-webkit-appearance: none;
	-moz-appearance: none;
	-ms-appearance: none;
	-o-appearance: none;
	-khtml-appearance: none;
	appearance: none;
}
.field-contractor-submit { background: #242371; color: #fff; cursor: pointer; float: left; font: normal 20px MyriadProRegular; line-height: 22px; margin: 12px 0px 0px 10px; padding: 0; width: 92px; height: 42px;
	border-radius: 3px;
	CCborderRadius: 3px;
	-khtml-border-radius: 3px;
	-moz-border-radius: 3px;
	-o--border-radius: 3px;
	-webkit-border-radius: 3px;
}
.top-field-submit { background: #175DA8; color: #fff; cursor: pointer; float: left; font: normal 14px MyriadProSemibold; line-height: 16px; margin: 6px 0px 0px 10px; padding: 0; text-shadow: 0px 1px 0px rgba(0, 0, 0, .17); width: 66px; height: 34px;
	border-radius: 3px;
	CCborderRadius: 3px;
	-khtml-border-radius: 3px;
	-moz-border-radius: 3px;
	-o--border-radius: 3px;
	-webkit-border-radius: 3px;
}









/* ============ */
/* == footer == */
/* ============ */

#container-footer { background: #e5e5e5; margin: 0; padding: 0; width: 100%; min-width: 1170px; height: 181px; }
p.footer-title { color: #4c4c4c; font: normal 16px MyriadProBold; line-height: 18px; margin: 0; padding: 48px 0px 0px 0px; text-shadow: 0px 1px 0px rgba(255, 255, 255, .47); }
p.footer-sub-title { color: #888; font: normal 12px MyriadProSemibold; line-height: 14px; margin: 0; padding: 3px 0px 0px 0px; text-shadow: 0px 1px 0px rgba(255, 255, 255, .47); }
p.footer-links { color: #888; font: normal 12px MyriadProSemibold; line-height: 14px; margin: 0; padding: 3px 0px 0px 0px; text-align: right; text-shadow: 0px 1px 0px rgba(255, 255, 255, .47); }
a.footer-links, a.footer-links:hover, a.footer-links:active, a.footer-links:visited { color: #175DA8; font: normal 12px MyriadProBold; text-decoration: none; }
hr { background: #bfbfbf; border: none; margin: 15px 0px 0px 0px; padding: 0; width: 100%; height: 1px; }


.hideFullSizeCover {position: fixed;
background-color: #000000;
opacity: 0.8;
z-index: 197;
width: 100%;
height: 100%;
display: none;
}

.popuplogin {
    width: 370px;
    height: 320px;
    position: fixed;
    background-color: #006ebc;
    border-radius: 5px;
    text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.41);
    font-family: MyriadProRegular;
    z-index: 200;
    top: 50%;
    left: 50%;
    margin-top: -185px;
    margin-left: -190px;
    display: none;
}
.popuplogin .closePopUp {
    float: right;
    margin: 10px;
}
.popuplogin .center_form {
    width: 255px;
    margin-left: 70px;
    padding-top: 35px;

}
.popuplogin .center_form h2 {
    font-size: 14px;
    color: #FFFFFF;
    margin-bottom: 8px;

}
.popuplogin .center_form .inputform {
    width: 228px;
    height: 63px;
    border: 2px solid #00659e;
    border-radius: 5px;
    background-color: #008acc;
    margin-bottom: 6px;
}
.popuplogin .center_form .buttonForm {
    width: 228px;
    height: 42px;
}
.popuplogin .center_form .buttonForm input{
    width: 226px;
    height: 40px;
    color: #FFFFFF;
    font-size: 20px;
    border: none;
    border-radius: 5px;
    background-color: #004da6;
    cursor: pointer;
}
.popuplogin .center_form .buttonForm input:hover{
    background-color: #23508a;
}
.popuplogin .center_form .iconFields {
    float: left;
}
.popuplogin .center_form .iconFields .iconWeb {
    margin-top: 22px;
    margin-left: 20px;
    float: left;
    border: none;
    cursor: default;
}
.popuplogin .center_form .iconFields .iconD {
    margin-top: 20px;
    margin-left: 12px;
    float: left;
    border: none;
    cursor: default;
}
.popuplogin .center_form .inputFileds {
    float: left;
}
.popuplogin .center_form .inputFileds input {
    border: none;
    margin-left: 10px;
    margin-top: 15px;
    font-size: 20px;
    width: 140px;
    background-color: #008acc;
    padding: 5px;
    color: #FFFFFF;
    line-height: 20px;
    text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.21);
}
.popuplogin .center_form .forgot_password {
    width: 226px;
    text-align: center;
    margin-top: 20px;
    font-weight: bolder;
}
.popuplogin .center_form .forgot_password a {
    color: #FFFFFF;
    text-decoration: none;
    font-size: 14px;
    display: block;

}
.popuplogin .center_form .forgot_password a img {
    margin-left: 15px;
}

.subcontractorLogin {
    width: 450px;
    height: 340px;
    position: fixed;
    background-color: #424F8A;
    border-radius: 5px;
    text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.41);
    font-family: MyriadProRegular;
    z-index: 200;
    top: 50%;
    left: 50%;
    margin-top: -185px;
    margin-left: -200px;
    display: none;
}
.subcontractorLogin .closePopUpSub {
    float: right;
    margin: 10px;
}
.subcontractorLogin .center_form {
    width: 420px;
    margin-left: 70px;
    padding-top: 35px;

}
.subcontractorLogin .center_form h2 {
    font-size: 21px;
    color: #FFFFFF;
    margin-bottom: 8px;

}
.subcontractorLogin .center_form h2 a{
    font-size: 21px;
    color: #8e98c5;
    margin-bottom: 8px;
    text-decoration: none;

}
.subcontractorLogin .center_form .inputform {
    width: 230px;
    height: 53px;
    border: 2px solid #3f4e78;
    border-radius: 5px;
    background-color: #5D6DA9;
    margin-bottom: 6px;
}
.subcontractorLogin .center_form .buttonForm {
    margin-top: 103px;
    width: 100px;
    height: 42px;
    float: left;
}
.subcontractorLogin .center_form .textFieldsSub {
    float: left;
    width: 250px;
}

.subcontractorLogin .center_form .buttonForm input{
    width: 100px;
    height: 40px;
    color: #FFFFFF;
    font-size: 20px;
    border: none;
    border-radius: 5px;
    background-color: #175DA8;
    cursor: pointer;
    margin-top: 20px;
}
.subcontractorLogin .center_form .buttonForm input:hover{
    background-color: #241f64;
}
.subcontractorLogin .center_form .iconFields {
    float: left;
}
.subcontractorLogin .center_form .iconFields .iconWeb {
    margin-top: 15px;
    margin-left: 20px;
    float: left;
    border: none;
    cursor: default;
}
.subcontractorLogin .center_form .iconFields .iconD {
    margin-top: 14px;
    margin-left: 12px;
    float: left;
    border: none;
    cursor: default;
}
.subcontractorLogin .center_form .inputFileds {
    float: left;
}
.subcontractorLogin .center_form .inputFileds input {
    border: none;
    margin-left: 10px;
    margin-top: 10px;
    font-size: 18px;
    width: 160px;
    background-color: #5D6DA9;
    padding: 5px;
    color: #FFFFFF;
    line-height: 20px;
    text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.21);
}
.subcontractorLogin .center_form .inputFileds .selectBox {
    border: none;
    margin-left: 10px;
    margin-top: 10px;
    font-size: 18px;
    width: 210px;
    background-color: #5D6DA9;
    padding: 5px;
    color: #FFFFFF;
    line-height: 20px;
    text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.21);
}
.subcontractorLogin .center_form .forgot_password {
    width: 226px;
    text-align: center;
    margin-top: 20px;
    font-weight: bolder;
}
.subcontractorLogin .center_form .forgot_password a {
    color: #FFFFFF;
    text-decoration: none;
    font-size: 14px;
    display: block;

}
.subcontractorLogin .center_form .forgot_password a img {
    margin-left: 15px;
}

.modalAlertButton { margin-top: 10px; font-family: MyriadPro; background-color: #008acc; border: 0; width: 120px; font-weight: bolder; height: 40px; border-radius: 6px; color: #FFFFFF; font-size: 16px;}
.modalAlert {min-height: 100px; max-width: 350px; overflow: hidden; color: #3e403f; font-size: 16px; padding-top: 10px; }
#verif { background-color: #9da7d1;}
#verif:hover { background-color: #94a0d2;}

::-webkit-input-placeholder {color:#FFFFFF;}
::-moz-placeholder          {color:#FFFFFF;}/* Firefox 19+ */
:-moz-placeholder           {color:#FFFFFF;}/* Firefox 18- */
:-ms-input-placeholder      {color:#FFFFFF;}

#cover {
    background: none repeat scroll 0 0 #fff;
    height: 100% !important;
    opacity: 0.5;
    padding-bottom: 99999% !important;
    position: absolute;
    top: 0;
    width: 100% !important;
    z-index: 99999;
    display: none;
}

#loader {
    height: 75px;
    left: 0;
    margin: 10% auto 0;
    position: fixed;
    right: 0;
    text-align: center;
    top: 0;
    width: 50%;
    z-index: 999999;
    display: none;
}

#triangle-down {
    border-top: 20px solid #175DA8!important;
}

.modalView {
    position: absolute;
    top: 30%;
    left: 50%;
    margin-left: -165px;
    z-index: 999999999999;
    width: 330px;
    height: 500px;
}
#closeModal {
    position: absolute;
    right: 5px;
    top: 0;
}

.subcontractorPoleForm{
    background-color: #424F8A;
    padding: 30px 0;
    display: none;
}

.login_title{
    color: #fff; font: normal 15px MyriadProRegular;
}

.email-field{
    border-radius: 4px;
    border-left: 1px solid #3f4e78;
    border-top: 1px solid #3f4e78;
    display: block;
    background: url("../../_images/field-email-bg.png") left  no-repeat;
    background-color: #5D6DA9;
    padding-left: 65px;
    margin: 0 auto;
    color:#fff;
    width: 236px;
    height: 45px;
    line-height: 45px;
}

.new-email-field{
    border-radius: 4px;
    border-left: 1px solid #3f4e78;
    border-top: 1px solid #3f4e78;
    display: block;
    background: url("../../_images/field-email-bg.png") left  no-repeat;
    background-color: #5D6DA9;
    padding-left: 65px;
    margin: 0 auto;
    color:#fff;
    width: 236px;
    height: 45px;
    line-height: 45px;
}

.project-name-field{
    background-color: #5D6DA9;
    border-radius: 4px;
    border-left: 1px solid #3f4e78;
    border-top: 1px solid #3f4e78;
    display: block;
    margin: 0 auto;
    color:#fff;
    width: 236px;
    padding-left: 10px;
    padding-right: 10px;
    height: 45px;
    line-height: 45px;
}

.project-street-field{
    background-color: #5D6DA9;
    border-radius: 4px;
    border-left: 1px solid #3f4e78;
    border-top: 1px solid #3f4e78;
    display: block;
    margin: 10px auto;
    color:#fff;
    width: 236px;
    padding-left: 10px;
    padding-right: 10px;
    height: 45px;
    line-height: 45px;
}

.password-field{
    border-radius: 4px;
    border-left: 1px solid #3f4e78;
    border-top: 1px solid #3f4e78;
    display: block;
    background: url("../../_images/field-password-bg.png") left  no-repeat;
    padding-left: 65px;
    margin: 10px auto;
    background-color: #5D6DA9;
    color:#fff;
    width: 236px;
    height: 45px;
    line-height: 45px;
}

.fakepassword-field{
    border-radius: 4px;
    border-left: 1px solid #3f4e78;
    border-top: 1px solid #3f4e78;
    display: block;
    background: url("../../_images/field-password-bg.png") left  no-repeat;
    padding-left: 65px;
    margin: 10px auto;
    background-color: #5D6DA9;
    color:#fff;
    width: 236px;
    height: 45px;
    line-height: 45px;
}

.new-password-field, .verify-password-field, .new-fakepassword-field, .verify-fakepassword-field{
    border-radius: 4px;
    border-left: 1px solid #3f4e78;
    border-top: 1px solid #3f4e78;
    display: block;
    background: url("../../_images/field-password-bg.png") left  no-repeat;
    padding-left: 65px;
    margin: 10px auto;
    background-color: #5D6DA9;
    color:#fff;
    width: 236px;
    height: 45px;
    line-height: 45px;
}

.login-submit{
    background-color: #175DA8;
    color:#fff;
    width: 236px;
    border-radius: 4px;
    font: 20px MyriadProSemibold;
    height: 40px;
    cursor: pointer;
}

.create-wmp-submit{
    background-color: #175DA8;
    color:#fff;
    width: 236px;
    border-radius: 4px;
    font: 20px MyriadProSemibold;
    height: 40px;
    cursor: pointer;
}

.create-account-submit{
    background-color: #175DA8;
    color:#fff;
    width: 236px;
    border-radius: 4px;
    font: 20px MyriadProSemibold;
    height: 40px;
    cursor: pointer;
}

#popup_login_form{
    margin-top: 10px;
}

#createWmpForm{
    margin-top: 10px;
}

#createAccountForm{
    margin-top: 10px;
}

.createWmp{
    background-color: #424F8A;
    padding: 30px 0;
    display: none;
}

.createAccount{
    background-color: #424F8A;
    padding: 30px 0;
    display: none;
}

.tip_txt{
    color: #fff;
    font: 14px MyriadProSemibold;
}

.tip_txt a{
    color: #fff;
    text-decoration: none;
}