/* #1D84C1 */
body{
	margin: 0;
	padding: 0;
	font-family: 'Titillium Web', sans-serif;
	line-height: 20px;
	background-color: #1D84C1;
}
#logo{
	position: absolute;
	left:0;
	top:60px;
	background-color: #fff;
	  -webkit-box-shadow: rgba(0,0,0,0.2) 0px 1px 3px;
  -moz-box-shadow: rgba(0,0,0,0.2) 0px 1px 3px;
  box-shadow: rgba(0,0,0,0.2) 0px 1px 3px;
  z-index: 4;
  border-left:10px solid #1D84C1;
}

#nav{
	position: absolute;
	right:0;
	top:0;
	background-color: #fff;
	color:#000;
	padding: 0;
	font-size: 15px;

	  -webkit-box-shadow: rgba(0,0,0,0.2) 0px 1px 3px;
  -moz-box-shadow: rgba(0,0,0,0.2) 0px 1px 3px;
  box-shadow: rgba(0,0,0,0.2) 0px 1px 3px;
  z-index: 4;

 // border-right: 10px solid #1D84C1;
  border-bottom: 3px solid #1D84C1;
  opacity: 0.9;

  	  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}

#nav > ul{
	list-style: none;
	padding: 0px;
	margin: 0px;

}
#nav > ul > li{
	float: left;
}

#nav > ul > li > a:hover{
	background-color: #1D84C1;
	color: #fff;
}

#nav > ul > li.active{
	background-color: #1D84C1;

}
#nav > ul > li.active > a{
	color:#fff;
	
}

#nav > ul > li:last-child{
	display: inline;
	margin-right: 10px;
	
}

#nav > ul > li:first-child{
	display: inline;
	margin-left: 0px;
	//border-left: 10px solid #1D84C1;
	margin-right: 80px;
	padding-left: 10px;
}

#nav > ul > li > a{
	text-decoration: none;
	color: #1D84C1;
	display: block;
	padding: 17px;
	letter-spacing: 3px;
}


#pattern{
	background: url('../img/grid.gif');
	width:100%;
	height: 100%;
	z-index: 3;
	position: absolute;
	top:0;
	left:0;
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";
	filter: alpha(opacity=20);
	opacity:0.2;

}

#content{
	z-index: 6;
	width:500px;
	background-color: #FFF;
	color: #000;
	padding: 10px;
-moz-box-shadow:0px 0px 4px 1px rgba(119, 119, 119, 0.7);
-webkit-box-shadow:0px 0px 4px 1px rgba(119, 119, 119, 0.7);
box-shadow:0px 0px 4px 1px rgba(119, 119, 119, 0.7);



  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;


  opacity: 0.8;
  padding-left: 300px;

  font-size: 15px;
  margin-bottom: 10px;
  position: relative;


}


#text{
	position: absolute;
	top:160px;
	padding-left: 0px;
	z-index: 5;
	

}

#news > ul{
	list-style: none;
	padding-left: 0px;
}

#news > ul > li{
	margin-bottom: 10px;
	border-bottom: 1px solid #ccc;
	padding-bottom: 5px;
}

#address{
	font-size: 12px;
	z-index: 4;
	width:400px;
	background-color: #FFF;
	padding: 2px;
-moz-box-shadow:0px 0px 4px 1px rgba(119, 119, 119, 0.7);
-webkit-box-shadow:0px 0px 4px 1px rgba(119, 119, 119, 0.7);
box-shadow:0px 0px 4px 1px rgba(119, 119, 119, 0.7);
	

	
  opacity: 0.8;
  padding-left: 20px;
  position: fixed;
  left:0;
  bottom:0;
  width:100%;
}

.ribbon.white{
	position: absolute;
	top:-34px;
	right: 0px;
	background-color: #FFF;
	color: #000;
	padding: 10px;
	z-index: 4;

	  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}

.ribbon{
	position: absolute;
	top:5px;
	right:-20px;
	background-color: #FFF;
	padding: 5px;
	color: #000;



z-index: 4;

}

#biglogo{
	position: absolute;
	left:0px;
	top:40px;
}

.opacity {
	border-left: 10px solid #1D84C1;
}

.badge{	
	background-color: #fff;


	opacity: 0.8;
	color: #1D84C1;
	font-size: 18px;
	border-left: 10px solid #1D84C1;
	
	margin-bottom: 10px;
	float: left;
	

-moz-box-shadow:0px 0px 4px 1px rgba(119, 119, 119, 0.7);
-webkit-box-shadow:0px 0px 4px 1px rgba(119, 119, 119, 0.7);
box-shadow:0px 0px 4px 1px rgba(119, 119, 119, 0.7);

	  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;



  padding: 15px;

}

.badge > h5{
     display: table-cell;
    vertical-align: middle;
    font-size: 14px;
    
}
.badge > h5:first-letter{
	color:#1D84C1;
	font-size: 30px;

}

.clearfix{
	clear: both;
	width: 100%;
	content: " ";
}

.marginleft{
	margin-left: 0px;
	border-left: 10px solid #1D84C1;
}

#units{
		z-index: 5;
	width:500px;
	background-color: #FFF;
	color: #000;
	padding: 10px;
-moz-box-shadow:0px 0px 4px 1px rgba(119, 119, 119, 0.7);
-webkit-box-shadow:0px 0px 4px 1px rgba(119, 119, 119, 0.7);
box-shadow:0px 0px 4px 1px rgba(119, 119, 119, 0.7);


  opacity: 0.8;
  padding-left: 300px;

  font-size: 13px;
  margin-bottom: 10px;
  position: relative;
}


.badge.small{
	font-size: 16px;
	padding: 8px;
	/*color: #000;*/
	
}

.random{
	width:120px;
	height: 120px;
	background-color: #1D84C1;
	position: absolute;
	top:500px;
	left:650px;
	opacity: 0.5;
	z-index: 1;
	display: table;
	color:#1D84C1;
}
.r2{
	top:550px;
	left:470px;
	background-color: #fff;

  /* box-shadow */
  -webkit-box-shadow: rgba(0,0,0,0.2) 0px 1px 3px;
  -moz-box-shadow: rgba(0,0,0,0.2) 0px 1px 3px;
  box-shadow: rgba(0,0,0,0.2) 0px 1px 3px;
}

.r1 > span{
	display: table-cell;
	text-align: center;
	vertical-align: middle;
	color:#fff;

}
.r1{
-webkit-border-top-right-radius: 10px;
-webkit-border-bottom-right-radius: 10px;
-moz-border-radius-topright: 10px;
-moz-border-radius-bottomright: 10px;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
  /* box-shadow */
  -webkit-box-shadow: rgba(0,0,0,0.2) 0px 1px 3px;
  -moz-box-shadow: rgba(0,0,0,0.2) 0px 1px 3px;
  box-shadow: rgba(0,0,0,0.2) 0px 1px 3px;
  left:590px;
  top:550px;
}

.r2 > span{
	display: table-cell;
	text-align: center;
	vertical-align: middle;
}

.r3 > span{
	display: table-cell;
	text-align: center;
	vertical-align: middle;
}

.r3{
	top:550px;
	left:350px;
	background-color: #1D84C1;
	color: #fff;
-webkit-border-top-left-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
-moz-border-radius-topleft: 10px;
-moz-border-radius-bottomleft: 10px;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
  /* box-shadow */
  -webkit-box-shadow: rgba(0,0,0,0.2) 0px 1px 3px;
  -moz-box-shadow: rgba(0,0,0,0.2) 0px 1px 3px;
  box-shadow: rgba(0,0,0,0.2) 0px 1px 3px;
}

label{
	float: left;	
	width:140px;
	padding-right: 10px;
	line-height: 27px;
}

input{
	-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
	box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;


    color: #555555;
    display: inline-block;
    font-size: 14px;
    height: 30px;
    line-height: 20px;
    margin-bottom: 10px;
    padding: 4px 6px;
    vertical-align: middle;

}

.newsbadge{
	position: absolute;
	top:70px;
	right:0px;
	background-color: #fff;
	opacity: 0.8;
	padding: 10px;
	z-index: 10;
	border-left: none;
	border-right: 10px solid #1D84C1;
	cursor: pointer;

	-moz-box-shadow:0px 0px 4px 1px rgba(119, 119, 119, 0.7);
-webkit-box-shadow:0px 0px 4px 1px rgba(119, 119, 119, 0.7);
box-shadow:0px 0px 4px 1px rgba(119, 119, 119, 0.7);

	  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}

#news{
	font-size: 12px;
	z-index: 4;
	width:300px;
	background-color: #FFF;
	padding: 3px;
-moz-box-shadow:0px 0px 4px 1px rgba(119, 119, 119, 0.7);
-webkit-box-shadow:0px 0px 4px 1px rgba(119, 119, 119, 0.7);
box-shadow:0px 0px 4px 1px rgba(119, 119, 119, 0.7);
  opacity: 0.9;
  margin-bottom: 10px;
  position: absolute;
  top:110px;
  right:0px;
  border-right: 10px solid #1D84C1;
  border-left:none;
  z-index: 10;
  display: none;

  	  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  overflow-y:auto;

}

#news > h3{
	color:#1D84C1;
	font-size: 10px;

}
#news > p{
	font-size: 10px;
}

#news > .newsbadge{
	position: absolute;
	left: 0px;
	top:-30px;
	background-color: #fff;
	padding: 10px 20px;

}

#google_translate_element{
	position:absolute;
	z-index:30;
}

/* Heights */
@media screen and (max-height: 900px) {
	#text{
		height: 110%;
	}

}

@media screen and (max-height: 820px) {
	#text{
		height: 120%;
	}

}

@media screen and (max-height: 750px) {
	#text{
		height: 140%;
	}

}

@media screen and (max-height: 650px) {
	#text{
		height: 180%;
	}

}

@media screen and (max-height: 400px) {
	#text{
		height: 400%;
	}

}

/* Width */
@media screen and (max-width: 960px) {
		#google_translate_element{
			top:120px;
		}

}

@media screen and (max-width: 780px) {
		#google_translate_element{
			top:120px;
		}

}

@media screen and (max-width: 680px) {
		#google_translate_element{
			top:120px;
		}

}

@media screen and (max-width: 480px) {
		#google_translate_element{
			top:160px;
		}

}