#greenframe {width:960px; margin-top:-12px; position:relative; text-align:left; overflow:hidden}
#greenframe #panes {height:400px; margin-top:81px; background:#fff; overflow:hidden;}
#greenframe ul.tabs {
	width:960px;
	height:80px;
	margin:0 !important;
	padding:0;
	position:absolute;
	top:0;
	left:0;
	list-style-type:none;
	background:#fff url(images/greenframe/bg-tabs3.png) repeat-x;
	border-bottom:1px solid #ccc;
}
#greenframe ul.tabs li {
	float:left;
	padding:0;
	margin:0;
}
#greenframe ul.tabs a { 
	width:100px;
	height:80px;
	margin:0;
	display:block;
	float:left;
	background:transparent url(images/greenframe/nav-sprites3.png) no-repeat scroll;
	border-bottom:1px solid #ccc;
	cursor:pointer;
	text-indent:-9999px;
	outline:none;
}
#greenframe ul.tabs a.current {cursor:default; border-bottom-color:#fff}

/* CSS sprite for the navigation */
#greenframe #gftab-intro 	     { background-position:0 -80px;}
#greenframe #gftab-intro:hover   { background-position:0 -160px;}
#greenframe #gftab-intro.current { background-position:0 0 !important; }

#greenframe #gftab-greenhouse-gas			{ background-position:-100px -80px; }
#greenframe #gftab-greenhouse-gas:hover 	{ background-position:-100px -160px; }
#greenframe #gftab-greenhouse-gas.current	{ background-position:-100px 0 !important; }

#greenframe #gftab-electricity			{ background-position:-200px -80px; }
#greenframe #gftab-electricity:hover 	{ background-position:-200px -160px; }
#greenframe #gftab-electricity.current	{ background-position:-200px 0 !important; }

#greenframe #gftab-water			{ background-position:-300px -80px; }
#greenframe #gftab-water:hover		{ background-position:-300px -160px; }
#greenframe #gftab-water.current	{ background-position:-300px 0 !important; }

#greenframe #gftab-gas			{ background-position:-400px -80px; }
#greenframe #gftab-gas:hover	{ background-position:-400px -160px; }
#greenframe #gftab-gas.current	{ background-position:-400px 0 !important; }

#greenframe #gftab-waste			{ background-position:-500px -80px; }
#greenframe #gftab-waste:hover	{ background-position:-500px -160px; }
#greenframe #gftab-waste.current	{ background-position:-500px 0 !important; }

#greenframe #gftab-message-center			{ background-position:-600px -80px; }
#greenframe #gftab-message-center:hover		{ background-position:-600px -160px; }
#greenframe #gftab-message-center.current	{ background-position:-600px 0 !important; }

.ajax-load {display:block; width:32px; margin:80px auto}

#greenframe h1, #greenframe h2, #greenframe h3, #greenframe h4 {margin:0; padding:0; color:#333}
#greenframe h2 {margin:0; padding:20px 0 20px 20px; font-size:20px}
#greenframe h2 span {display:block; margin:8px 0 0 0; font-family:Arial, Helvetica, sans-serif; font-size:14px; font-weight:normal; color:#369}

/* message-center styles */
#messages {float:left; width:70%; height:334px}
#messages-inner {height:312px; overflow:auto; margin:0 20px 20px; border:1px solid #ddd; background:#fff}
#messages table {}
#messages table td {padding:5px; vertical-align:top}
#messages table td img {border:1px solid #ccc}
#messages h3 {margin:0; padding:0 0 5px 0}
#messages p {margin:0 0 5px 0; padding:0}
#messages p.indent {padding-left:20px}
#messages div.more {}
#messages div.more p  {float:left; width:15%; margin:0; padding:0; text-align:right}
#messages div.more ul {float:left; width:80%; margin:0}
/* message-center feedback styles */
div#feedback {float:left; width:30%}
div#feedback-inner {margin:0 20px 20px 0; padding:10px 20px; border:1px solid #DAE8B8; background:#e4e4e4; text-align:center}
div#feedback h3 {padding-bottom:20px}
div#feedback img {cursor:pointer}
img {margin:0; padding:0; border:0}

#greenframe div#poweredby {float:right; margin-top:8px; font-size:10px; line-height:34px; color:#999}
#greenframe div#poweredby a {display:inline-block; width:130px; height:34px; background:url(images/greenframe/poweredby-white.png) 100% 0 no-repeat; text-indent:-9999px}

/* Sustainability Dashboard styles */
#widgets {width:920px; padding:10px}
.widget {float:left; width:450px; margin-right:10px; margin-bottom:10px}
.widget h3 {height:25px; padding-left:5px !important; font-family:Arial, Helvetica, sans-serif; font-size:12px; line-height:25px; background:url(images/sustainability/bg-widget-header.png) no-repeat;}
.widget h3 img {margin:0 4px 0 0; vertical-align:text-top}
.widget-frame {float:left; width:448px; height:200px; border:1px solid #dbdbdb; border-top:0; background:url(images/sustainability/bg-widget-equiv.png) repeat-x}
.widget h4 {font-family:Arial, Helvetica, sans-serif; font-size:12px}
.widget-left {float:left; width:224px}
.data {width:202px; margin:10px; border:1px solid #e6e6e6; text-align:right; background:#fff}
.data h4 {height:24px; padding-left:8px !important; font-weight:normal; line-height:24px; background:#EEEEE6; text-align:left}
.data h4 strong {color:#666}
.data div.number {padding:5px 0; font-size:16px; font-weight:bold; color:#000}
.data span.units {margin:0 15px 0 5px; font-size:12px; font-weight:normal; color:#666}
.data .savings div.number {color:#060}
.data .notes {padding:4px 0 0 8px; font-size:9px; color:#666; text-align:left; background:#e0e1d1}
.widget-right {float:left; width:204px; padding:10px}
.widget-right h4 {margin-bottom:5px !important}
.widget-right p {line-height:1.5; margin-bottom:5px !important}
.equiv-to {margin-top:20px; height:60px; font-size:14px; font-weight:bold; color:#060}
.equiv-to strong {font-size:16px}
.equiv-to-factor {height:30px; font-size:10px}
.equiv-to-details {}
.equiv-to-details a {font-size:10px}
#tips .widget-left {width:175px}
#tips .widget-right {width:253px; height:180px; overflow:auto}
#tips-image {width:175px; height:176px; display:block}
#tips-buttons {width:175px; height:24px; background:url(images/sustainability/bg-tips-buttons.png) repeat-x; position:relative}
#tips-prev {position:absolute; left:0; top:0}
#tips-next {position:absolute; right:0; top:0}
#tips-buttons img {display:block}
#tips-buttons p {margin:0; padding:0; text-align:center; line-height:24px}
#tips p.source {font-size:95%; color:#999}

/* overlay styles */
.apple_overlay {
	/* initially overlay is hidden */
	display:none;
	/* growing background image */
	background-image:url(images/greenframe/overlay/white.png);
	/* 
		width after the growing animation finishes
		height is automatically calculated
	*/
	width:640px;
	padding:50px 30px 30px;
}

/* default close button positioned on upper right corner */
.apple_overlay .close {
	background-image:url(images/greenframe/overlay/close-btn-extjs.png);
	position:absolute; top:30px; right:30px;
	cursor:pointer;
	height:15px;
	width:15px;
}
.apple_overlay h3.overlay-title {
	position:absolute; top:30px; left:33px;
	font-size:14px;
	font-family:Arial, Helvetica, sans-serif;
	color:#333
}
.apple_overlay h3.overlay-title img {vertical-align:top}