@import url("styles/common.css");
@import url("styles/percentages.css");
@import url("styles/action-items.css");
@import url("styles/gameboard-items.css");
@import url("styles/activity-descriptions.css");
@import url("styles/desktop.css");
@import url("styles/desktop-nav.css");


/* Major Parts -----------------------------------------------------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/
@media only screen and (max-device-width: 400px) {
body {
	left:-450px!important;
	position: absolute;	
}
  

}

body {
	margin: 0px;
}

#desktop-container {
	margin-left: 100px;
	margin-top: 50px;
}

#gameboard-overlay {
	width: 400px;
	height: 323px;
	margin-top: 0px;
	padding-top: 275px;
	position: absolute;
	background-color: rgba(255, 255, 255, 0.9);
	border-radius: 10px;
	border-color: d1d2d4;
	border: d1d2d4;
	border-width: 3px;
	border-style:dashed;
	text-align: center;
	
	}
	
#nav-overlay {
	width: 345px;
	height: 323px;
	left: -380px;
	margin-top: 0px;
	padding-top: 275px;	
	position: absolute;
	background-color: rgba(255, 255, 255, 0.9);
	border-radius: 10px;
	border-color: d1d2d4;
	border: d1d2d4;
	border-width: 3px;
	border-style:dashed;
	text-align: center;
	
	}	
	

#nav {
	height: 360px;
	width: 360px;
	position: absolute;
	background-image: url("http://efargo.org/game/resources/svg/svg_nav-game.svg");
	}
	
#side-bar-text {
	height: 315px;
	width: 330px;
	position: absolute;
	top: 360px;
	padding-top: 40px;
	padding-left: 20px;
	padding-right:10px;
	}			



#container {
	width: 400px;
	height: 600px;
	margin-top: 0px;
	margin-left: 380px;
	position: absolute;
	
/*
	border-radius: 10px;
	border-color: black;
	border: black;
	border-width: thin;
	border-style:solid;
*/
	background-image:url("http://www.efargo.org/game/resources/svg/svg_gameboard.svg") !important;
}

#maps-container {
	width: 400px;
	height: 600px;
	margin-top: 0px;
	margin-left: 380px;
	position: absolute;
	
/*
	border-radius: 10px;
	border-color: black;
	border: black;
	border-width: thin;
	border-style:solid;
*/
}

#header-transparent {
	width: 370px;
	height: 100px;
	margin-left: 7px;
	margin-right: 7px;
	position: absolute;
	background-color: transparent;
}

#header{
	width: 400px;
	height: 123px;
	position: absolute;
	top: 5px;
	background-color: rgba(230, 231, 232, 0.7);
}

.social {
	width: 23px;
	height: 40px;
	border-color: #d1d3d4;
	border-width: 1px;;
	border-style:solid;
	background-color: white;
}

.facebook {
	position: absolute;
	top: 0px;
	left:0px;
	background-image:url("http://www.efargo.org/game/resources/svg/svg_facebook.svg");
}

.twitter {
	position: absolute;
	top: 40px;
	left:0px;
	background-image:url("http://www.efargo.org/game/resources/svg/svg_twitter.svg");	
}

.instagram {
	position: absolute;
	top: 80px;
	left:0px;
	background-image:url("http://www.efargo.org/game/resources/svg/svg_instagram.svg");
}

.facebook-link {
	float: left;
	margin-left: 20px;
	height: 46px;
	width: 46px;
	background-image:url("http://www.efargo.org/game/resources/svg/svg_facebook-link.svg");
}

.twitter-link {
	float: left;
	margin-left: 20px;	
	height: 46px;
	width: 46px;
	background-image:url("http://www.efargo.org/game/resources/svg/svg_twitter-link.svg");	
}

.instagram-link {
	float: left;
	margin-left: 20px;	
	height: 46px;
	width: 46px;
	background-image:url("http://www.efargo.org/game/resources/svg/svg_instagram-link.svg");
}

#statistics {
	position: absolute;
	width: 350px;
	height: 120px;
	left:25px;
}

.buttons {
	width: 23px;
	height: 31px;
	border-color: #d1d3d4;
	border-width: 1px;;
	border-style:solid;
	background-color: white;
}

#landing-content {
	height: 440px;
	width: 380px;
	padding: 10px;
	background-color: rgba(255, 255, 255, 0.75);
	}

.logout {
	position: absolute;
	top: 0px;
	right:0px;
	background-image:url("http://www.efargo.org/game/resources/svg/svg_logout.svg");
}

.menu {
	position: absolute;
	top: 30px;
	right:0px;
	background-image:url("http://www.efargo.org/game/resources/svg/svg_menu.svg");
}

.map {
	position: absolute;
	top: 60px;
	right:0px;
	background-image:url("http://www.efargo.org/game/resources/svg/svg_map.svg");
}

.contact {
	position: absolute;
	top: 90px;
	right:0px;
	background-image:url("http://www.efargo.org/game/resources/svg/svg_contact.svg");
}

#header-grey{
	width: 370px;
	height: 100px;
	margin-left: 8px;
	margin-right: 8px;
	margin-top: 8px;
	margin-bottom: 8px;
	position: absolute;
	background-color: #dedfe0;
}

#content {
	width: 384px;
	height: 468px;
	margin-left: 8px;
	margin-right: 8px;
	top:148px;
	position: absolute;
	float: left;
}

#congrats {
	width: 384px;
	height: 468px;
	margin-left: 8px;
	margin-right: 8px;
	top:148px;
	position: absolute;
	float: left;
}

#login-content {
	height: 600px;
	width: 330px;
	padding: 10px;
	margin-left: 15px;
	position: absolute;
	top:0px;
	background-color: rgba(255, 255, 255, 0.85);	
/* 	background-color: white; */
	
}

.login-index {
	height: 25px;
	width: 350px;
	position: absolute;
	top:70px;
	background-color: white;
}

.login {
	height: 25px;
	width: 350px;
	position: absolute;
	top:170px;
	background-color: white;
}


#error-login {
	position: absolute;
	top:265px;
	padding-left:12px;
	float: right;
	color: red;
	}
	
#error_login {
	color: red;
}		
	
#energy-goal-error {
	position: absolute;
	top:90px;
	left:-340px;
	color:red;

	}
	
#utility-other-error {
	position: absolute;
	top:82px;
	left:10px;
	color: red;
	}	
	
#location-other-error {
	position: absolute;
	top:80px;
	left:20px;
	color: red;

	}	
	
#terms-and-conditions {
	height: 550px;
	overflow: scroll;
}
		
#place {
	width: 384px;
	height: 468px;
	top:148px;
	margin-left: 8px;
	margin-right: 8px;
	position: absolute;
	float: left;
}

#bonus {
	width: 384px;
	height: 468px;
	top:148px;
	margin-left: 8px;
	margin-right: 8px;
	position: absolute;
	float: left;
}

#overlay {
	width: 400px;
	height: 600px;
	position: absolute;
	top: 0px;
	background-color: rgba(255, 255, 255, 0.75);
}

#action-container {
	width: 400px;
	height: 140px;
	position: absolute;
	background-color: rgba(230, 231, 232, 0.7);
	top: 460px;
}

#overlay-content {
	width: 400px;
	height: 400px;
	position: absolute;
	background-color: rgba(230, 231, 232, 0.7);
}

#description {
	width: 400px;
	height: 100px;
	position: absolute;
	background-color: rgba(230, 231, 232, 0.7);
}

#description-new {
	width: 400px;
	height: 140px;
	position: absolute;
	background-color: rgba(230, 231, 232, 0.7);
	top: 460px;
}

#levels {
	width: 25px;
	height: 115px;
	position: absolute;
	top:0px;
}

.level {
	width: 23px;
	height: 14px;
	border-color: #d1d3d4;
	border-width: 1px;;
	border-style:solid;
}

#level70 {
	background-image:url("http://www.efargo.org/game/resources/svg/svg_level70.svg");	
}

#level60 {
	background-image:url("http://www.efargo.org/game/resources/svg/svg_level60.svg");	
}

#level50 {
	background-image:url("http://www.efargo.org/game/resources/svg/svg_level50.svg");	
}

#level40 {
	background-image:url("http://www.efargo.org/game/resources/svg/svg_level40.svg");	
}

#level30 {
	background-image:url("http://www.efargo.org/game/resources/svg/svg_level30.svg");	
}

#level20 {
	background-image:url("http://www.efargo.org/game/resources/svg/svg_level20.svg");	
}

#level10 {
	background-image:url("http://www.efargo.org/game/resources/svg/svg_level10.svg");	
}

.level-indicator {
	width:5px;
	height: 14px;
	position: absolute;
	right:.5px;
} 

#actions {
	width: 25px;
	height: 115px;
	position: absolute;
	top:0px;
	right:0px;
	z-index: 1000px;
}

#actions-faded {
	width: 25px;
	height: 115px;
	position: absolute;
	top:0px;
	right:0px;
	opacity: .95;
}

.action {
	width: 23px;
	border-color: #d1d3d4;
	border-width: 1px;;
	border-style:solid;
	background-color:white;
}

.large {
	height: 60px;
}

.small {
	height: 25px;
}

.second {
	position: absolute;
	top: 62px;
	}
	
.third {
	position: absolute;
	top: 89px;
	}	
	
.full {
	height: 100%;
}

.two-thirds {
	height: 66%;
}

.one-third {
	height: 33%;
}

.trigger-yes {
	display: yes;
}

.trigger-no {
	display: none;
}

.reverse-trigger-yes {
	display: none;
}

#survey {
	height: 300px;
	width: 340px;
	position: absolute;
	left:20px;
	top: -460px;
	padding: 10px;
	background-color: white;
}

.faded-bar {
		opacity: .10;
}

.action-complete {
	background-color: #8dc63f;
	background-image:url("http://www.efargo.org/game/resources/svg/svg_complete.svg");
	background-position: center center;
	background-size: 25px 25px; 
	background-repeat: no-repeat;
	position: absolute;
	top:0px;	
}

.action-completed {
	position: absolute;
	top:0px;
	z-index: 1000;
	background-color: #8dc63f;
	background-image:url("http://www.efargo.org/game/resources/svg/svg_place.svg");
	background-position: center center;
	background-size: 25px 25px; 
	background-repeat: no-repeat;	
}

.action-cancel {
	background-color: #cc1319;
	background-image:url("http://www.efargo.org/game/resources/svg/svg_cancel.svg");
	background-position: center center;
	background-size: 25px 25px; 
	background-repeat: no-repeat;	
	position: absolute;
	bottom:0px;
}

.action-skip {
	background-color: #ffcc33;	
	background-image:url("http://www.efargo.org/game/resources/svg/svg_pause.svg");
	background-position: center center;
	background-size: 25px 25px; 
	background-repeat: no-repeat;	
	position: absolute;
	top:62px;
}

.action-capture {
	background-image:url("http://www.efargo.org/game/resources/svg/svg_capture.svg");
	background-position: center center;
	background-size: 25px 25px; 
	background-repeat: no-repeat;	
}

.action-place {
	background-color: #8dc63f;
	background-image:url("http://www.efargo.org/game/resources/svg/svg_place.svg");
	background-position: center center;
	background-size: 25px 25px; 
	background-repeat: no-repeat;
	position: absolute;
	top:0px;	
}
.active {
	background-image:url("http://www.efargo.org/game/resources/svg/svg_active.svg");	
}

#action-content {
	height: 113;
	width: 350px;
	position: absolute;
	left:25px;
	top:0px;
	background-image:url("http://www.efargo.org/game/resources/svg/svg_action_test.svg");
}

#action-content-large {
	height: 108;
	width: 330px;
	position: absolute;
	left:25px;
	top:0px;
	padding-top: 5px;
	padding-left: 10px;
	padding-right: 10px;
}

#title-bar {
	width: 400px;
	height: 27px;
	position: absolute;
	bottom:0px;
	background-color: rgba(230, 231, 232, 0.95);
}

#title-bar-home {
	width: 400px;
	height: 27px;
	position: absolute;
	top:573px;
	background-color: rgba(230, 231, 232, 0.95);
}

#current-coin {
	width: 25px;
	height: 27px;
	float:left;
	background-image:url("http://www.efargo.org/game/resources/svg/svg_coin-key.svg");
	background-position: center center;
	background-size: 50px 24px; 	
}

#current-1a {
	width: 25px;
	height: 27px;
	float:left;
	background-image:url("http://www.efargo.org/game/resources/svg/svg_icon_1a.svg");
	background-position: center center;
	background-size: 50px 24px; 	
}

#current-1b {
	width: 25px;
	height: 27px;
	float:left;
	background-image:url("http://www.efargo.org/game/resources/svg/svg_icon_1b.svg");
	background-position: center center;
	background-size: 50px 24px; 
	background-repeat: no-repeat;	
}

#current-1c {
	width: 25px;
	height: 27px;
	float:left;
	background-image:url("http://www.efargo.org/game/resources/svg/svg_icon_1c.svg");
	background-position: center center;
	background-size: 50px 24px; 
	background-repeat: no-repeat;		
}

#current-1d {
	width: 25px;
	height: 27px;
	float:left;
	background-image:url("http://www.efargo.org/game/resources/svg/svg_icon_1d.svg");
	background-position: center center;
	background-size: 50px 24px; 
	background-repeat: no-repeat;		
}

#current-1e {
	width: 25px;
	height: 27px;
	float:left;
	background-image:url("http://www.efargo.org/game/resources/svg/svg_icon_1e.svg");
	background-position: center center;
	background-size: 50px 24px; 
	background-repeat: no-repeat;		
}

#current-1f {
	width: 25px;
	height: 27px;
	float:left;
	background-image:url("http://www.efargo.org/game/resources/svg/svg_icon_1f.svg");
	background-position: center center;
	background-size: 50px 24px; 
	background-repeat: no-repeat;		
}

#current-1g {
	width: 25px;
	height: 27px;
	float:left;
	background-image:url("http://www.efargo.org/game/resources/svg/svg_icon_1g.svg");
	background-position: center center;
	background-size: 50px 24px; 
	background-repeat: no-repeat;		
}

#current-1h {
	width: 25px;
	height: 27px;
	float:left;
	background-image:url("http://www.efargo.org/game/resources/svg/svg_icon_1h.svg");
	background-position: center center;
	background-size: 50px 24px; 
	background-repeat: no-repeat;		
}

#current-2a {
	width: 25px;
	height: 27px;
	float:left;
	background-image:url("http://www.efargo.org/game/resources/svg/svg_icon_2a.svg");
	background-position: center center;
	background-size: 50px 24px; 	
	background-repeat: no-repeat;
}

#current-3a {
	width: 25px;
	height: 27px;
	float:left;
	background-image:url("http://www.efargo.org/game/resources/svg/svg_icon_3a.svg");
	background-position: center center;
	background-size: 50px 24px; 
	background-repeat: no-repeat;		
}

#current-go {
	width: 25px;
	height: 27px;
	float:left;
	background-image:url("http://www.efargo.org/game/resources/svg/svg_icon_go.svg");
	background-position: center center;
	background-size: 50px 24px; 
	background-repeat: no-repeat;	
}

#current-1a {
	width: 25px;
	height: 27px;
	float:left;
	background-image:url("http://www.efargo.org/game/resources/svg/svg_icon_1a.svg");
	background-position: center center;
	background-size: 50px 24px; 
	background-repeat: no-repeat;	
}

#title {
	width:350px;
	height: 23px;
	padding-top: 4px;
	float: left;
	text-align: center;
}

#title-home {
	width:350px;
	margin-left:25px;
	height: 23px;
	padding-top: 4px;
	float: left;
	text-align: center;
}

#title-full {
	width:375px;
	height: 27px;
	float: left;
	text-align: center;
}

#collapse {
	width: 25px;
	height: 27px;
	float:left;
	background-image:url("http://www.efargo.org/game/resources/svg/svg_collapse.svg");	
}

.login-box {
	height: 50px;
	padding-top: 50px:
	}

.form-box {
	width:320px;
/* 	height: 60px; */
}

.form-box-small {
	width:320px;
	height: 35px;
}

.form-box-other {
	width:320px;
	height: 35px;
}

.register-submit {
	width: 25px;
	height: 115px;
	position: absolute;
	bottom:0px;
	right:-25px;
	background-color: #8dc63f;
	}

.block-register {
	float: left;
}

.faded {
	background-image:url("http://www.efargo.org/testing/game/8/svg/efargo-game-graphics_gameboard-faded.svg") !important;	
}

#errors {
	height: 60px;
	width: 330px;
	color: red;
}

#map-link {
	width: 30px;
 	height: 30px;
 	background-image:url("http://www.efargo.org/game/resources/svg/efargo-game-graphics_map.svg");	
 	-webkit-appearance: none;
 	background-color:transparent; 
    border:0 none;
    cursor:pointer;
    float: right;
    position: absolute;
    top: 50px;
    right: 3px;
}

/* Tables ----------------------------------------------------------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/

table td {
	height: 20px;
	width: 50px;
	padding: 0px;
	overflow: hidden;
	white-space: nowrap;
}

.graphs {
	border-collapse: collapse;
	overflow: hidden;
	white-space: nowrap;
}	

.graphs, tr, td {
    border: 3px solid white;
}

.graphs tr.user {
	height: 29px;
	}
	
.graphs tr.community {
	height: 92px;
	vertical-align: top;
	padding-left: 10px;
	}
	
.graphs td.persona {
	width: 106px;
	padding-left:10px;
	padding-top: 6px;
	}
	
.graphs td.score {
	width: 229px;
	padding-left: 5px
	}				
/*
.graphs tr td {
	height: 25px;
	width: 50px;
	padding: 0px;
	border: black;
	border	
}

.graphs td.block {
	width:38px;
	text-align: center;
	border: black;
	border-width: 1px;
	border-style: solid;
}

.graphs td.user {
	width:78px;
	text-align: left;
	padding-left: 5px;
	border: black;
	border-width: 1px;
	border-style: solid;
} 

.graphs td.points {
	width: 233px;
	text-align: left;
/*
	border: black;
	border-width: 1px;
	border-style: solid;
*/
}
*/
/* Graphs ---------------------------------------------------------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/

.black-bar {
	background-color: #8dc63f;
}

#points-outline {
	width: 170px;
	height: 6px;
	border: black;
	border-width: 1px;
	border-style: solid;
	margin-top: 3px;
}


/* Game Board -----------------------------------------------------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/

.game-board-background {
/* 	background-image:url("http://www.efargo.org/game/resources/svg/efargo-game-graphics_gameboard.svg") !important;	 */
}

.game-board-background-faded {
/* 	background-image:url("http://www.efargo.org/game/resources/svg/efargo-game-graphics_gameboard-faded.svg");	 */
}

.small-row {
	height: 24px;
}

.large-row {
	height: 36px;
}

.big-box {
	height:24px;
	padding-bottom: 12px;
	width: 48px;
	position: absolute;
}

.small-box {
	height:24px;
	width: 48px;
	position: absolute;
}

.float {
	float: left;
}

#content .value0 {
	display:none;
}

#place .value1 {
	display:none;
}

.row0 {
	width:384px;
}

.row70 {
	top:0px;
	left: 24px;
}

.row60 {
	top:36px;
	left: 0px;
}

.row50 {
	top:72px;
	left: 24px;
}

.row40 {
	top:108px;
	left: 0px;
}

.row30 {
	top:144px;
	left: 24px;
}

.row20 {
	top:180px;
	left: 0px;
}

.row10 {
	top:216px;
	left: 24px;
}

.row1{
	top:252px;
}

.row2{
	top:264px;
}


.indent-half {
	margin-left: 24px;
}

.indent-1-half {
	margin-left: 72px;
}

.indent-2-half {
	margin-left: 120px;
}

.indent-3-half {
	margin-left: 168px;
}

.indent-4-half {
	margin-left: 216px;
}

.indent-5-half {
	margin-left: 264px;
}

.indent-6-half {
	margin-left: 312px;
}


.indent-1 {
	margin-left: 48px;
}

.indent-2 {
	margin-left: 96px;
}

.indent-3 {
	margin-left: 144px;
}

.indent-4 {
	margin-left: 192px;
}

.indent-5 {
	margin-left: 240px;
}

.indent-6 {
	margin-left: 288px;
}

.indent-7 {
	margin-left: 336px;
}

#content .hidden {
	opacity: .25;	
}


#place .value0 {
	background-image:url("http://www.efargo.org/game/resources/gif/gif_place-option.gif");
	Background-repeat: no-repeat;
	background-size: 46px 22px;
	background-position: center top;
}

#place .value0waste-a-watt {
	background-image:url("http://www.efargo.org/game/resources/gif/gif_place-waste-a-watt.gif");
	Background-repeat: no-repeat;
	background-size: 52px 24px;
	background-position: center top;
}

#place input[type=submit] {
	height:24px;
	width: 48px;
	font-size: 0px;
	line-height: 0px;
	margin-left: 0px;
	margin-right: 0px;
	margin-top: 0px;
	padding: 0px; 
	font-family: raleway, sans-serif;
	font-weight: 400;
	text-align: center;
	color: white;
    border-radius: 0px;
	background-color:transparent;
	background-image: none;
	border:0 none;
    cursor:pointer;
	}
	
	
.congrats-1 {
	background-image:url("http://www.efargo.org/game/resources/gif/gif_success-1.gif");
	Background-repeat: no-repeat;
	background-size: 50px 24px;
	background-position: center top;
}	

.congrats-2 {
	background-image:url("http://www.efargo.org/game/resources/gif/gif_success-2.gif");
	Background-repeat: no-repeat;
	background-size: 50px 24px;
	background-position: center top;
}

.congrats-3 {
	background-image:url("http://www.efargo.org/game/resources/gif/gif_success-3.gif");
	Background-repeat: no-repeat;
	background-size: 50px 24px;
	background-position: center top;
}

.congrats-4 {
	background-image:url("http://www.efargo.org/game/resources/gif/gif_success-4.gif");
	Background-repeat: no-repeat;
	background-size: 50px 24px;
	background-position: center top;
}

.congrats-5 {
	background-image:url("http://www.efargo.org/game/resources/gif/gif_success-5.gif");
	Background-repeat: no-repeat;
	background-size: 50px 24px;
	background-position: center top;
}

.congrats-6 {
	background-image:url("http://www.efargo.org/game/resources/gif/gif_success-6.gif");
	Background-repeat: no-repeat;
	background-size: 50px 24px;
	background-position: center top;
}

.completed-overlay {
	height: 103;
	width: 330px;
	position: absolute;
	left:25px;
	top:-113px;
	padding-top: 10px;
	padding-left: 10px;
	padding-right: 10px;
	background-color:#edeeef;
	z-index: 1000;
	text-align: left;
}

#points-map {
	height: 600px;
	width: 400px;
	margin-left: 20px;
	position:absolute;
	top:-460px;
	left:400px;
}

#points-map-desktop {
	height: 600px;
	width: 400px;
	position:absolute;
	top:0px;
	left:0px;
}

#map-info {
	top:-320px; 
	left: 460px; 
	width: 300px;
	overflow: scroll;
	position: absolute;
}

#landing-right-panel {
	top:-320px; 
	left: 460px; 
	width: 305px;
	height: 400px;
	overflow: scroll;
}


#extra-info {
	top:-320px; 
	left: 460px; 
	width: 300px;
	height: 400px;
	overflow: scroll;
}

#landing-right-panel {
	position: absolute;
	top:-320px; 
	left: 460px; 
	width: 305px;
	height: 400px;
	overflow: hidden;
}

#extra-info-title {
	position: absolute;
	top:-360px; 
	left: 470px; 
	width: 300px;
}

#extra-info .landing-right-panel {
	overflow: hidden!important;
	}