/* =============== */
/* = box colors  = */
/* =============== */
.outer-box-color{
	background: #545454;	
}

.inner-box-color{
	background: #F5F5F5;
}

.land-box-color{
	background: #679935;
	margin-bottom: 10px;
}

.activity-box{
	width: 170px;
	color: white;
	margin-top: 15px;
}

.air-box-color{
	background: #cc9935;
	margin-bottom: 10px;
}

.water-box-color{
	background: #6799cc;
	margin-bottom: 10px;
}

.hud-color{
	background: #434343; /*#3f4246;*/
	color: #F5F5F5;
}

.grey-color{
	background: #bebebe; /*#3f4246;*/
	color: #F5F5F5;
}

.white-color{
	background: #ffffff; /*#3f4246;*/
	color: #000000;
}


/*box*/
.box-wrapper {
	padding: 8px;
	overflow: hidden;
	/*	color: #000000;*/
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
/*	float: left;*/
	line-height: 22px;
}

.box-header {
	font-size: 1.2em;
	font-weight: bold;
	/*	color: #222;*/
}

.box-icon {
	width: 16px;
	height: 16px;
	float:left;
	padding:0px;
	margin: 0px 5px 5px 0px;
	vertical-align: top;
}

.box-open {
	background: url(/images/icons/16-arrow-down.png) no-repeat 0px 0px;
	cursor: pointer;
}

.box-closed {
	background: url(/images/icons/16-arrow-right.png) no-repeat 0px 0px;
	cursor: pointer;
}

.icon-right {
	background: url(/images/icons/16-arrow-right.png) no-repeat 0px 0px;
	cursor: pointer;
}

.icon-left {
	background: url(/images/icons/16-arrow-left.png) no-repeat 0px 0px;
	cursor: pointer;
}


.box-header .title {
	float: left;
	cursor: pointer;
}

.box-contents {
	clear:both;
}
.box .link {
	float: left;
	font-size: 1.0em;
	font-weight: normal;
	margin-left: 25px;
}

div .box {
	margin: 10px 5px 10px 5px;
	padding: 10px;
	overflow: hidden;
	color: #000000;
	/*background: #FEFEFE;  #F5F5F5; #5DA7BE #BE5D5D; #b1b1b1;*/
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
/* 	float: left;*/
}

div .extra-large{
	width: 98%;	
}

div .large{
	width: 80%;	
}

div .medium{
	width: 50%;	
}

div .small{
	width: 39%;
}

/* hud box*/
div .hud{
    border: 1px rgb(0,0,0) solid;
    padding: 0em 0em 0em;
    background-color: rgb(48,53,60);
    -webkit-box-shadow: 1px 1px 2px #777777;
    -moz-box-shadow: 0px 0px 2px #777777;
    box-shadow: 0px 0px 5px #777777;
    color: #ffffff;	
    cursor: pointer;
/*    width: 210px;*/
 	height: 60px;	
    line-height: 0em;	
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
    opacity: 0.6;
	-moz-opacity:.60;
    filter:alpha(opacity=60); /*IE opacity */
}