@font-face {
font-family: GothamRdBk_font;
src: local(GothamRdBk_font), url('/fonts/GothamRounded-Book.otf') format('opentype');
}

@font-face {
font-family: GothamRounded-Bold_font;
src: local(GothamRounded-Bold_font), url('/fonts/GothamRounded-Bold.otf') format('opentype');
}

body{
margin:70px 0 0 0;
padding:0;
line-height: 1.5em;
font: normal 14px 'Varela', verdana, sans-serif;
color: #222;
}

h3 {
font-size:18px;
}

a {
color:#be1621;
text-decoration:none;
}

a:hover {
color:white;
text-decoration:none;
}

a:visited {
color:#661621;
text-decoration:none;
}

a.exp {
color:#be1621;
text-decoration:none;
}

a.exp:hover {
color:#be1621;
text-decoration:underline;
}

/* STRUCTURE */

#pagewrap {
	padding: 5px;
	width: 980px;
	margin: 20px auto;
}

#pagewrap1 {
	padding: 5px;
	width: 100%;
}

.content1 {
	width: 25%;
	float: left;
}

.content2 {
	width: 37%;
	float: left;
}

.content3 {
	width: 18%;
	float: left;
}

.content4 {
	width: 75%;
	float: left;
}

#header {
	height: 100px;
	padding: 0 15px;
}
#content {
	width: 160px;
	float: left;
	padding-top: 30px;
}

#middle {
	width: 560px; /* Account for margins + border values */
	float: left;
	padding: 5px 15px;
	margin: 30px 5px 5px 20px;
}

#middle_one {
	width: 95%; /* Account for margins + border values */
	float: left;
}

#middle_two {
	width: 30%; /* Account for margins + border values */
	float: left;
	padding: 5px 8px;
}

#middle_three {
	width: 33%; /* Account for margins + border values */
	float: left;
	padding: 5px 15px;
}

#sidebar {
	width: 183px;
	padding: 5px 5px;
	float: left;
}
#footer {
	clear: both;
	padding: 0 15px;
}

/************************************************************************************
MEDIA QUERIES
*************************************************************************************/
/* for 980px or less */
@media screen and (max-width: 980px) {
	
	#pagewrap {
		width: 98%;
	}
	#content {
		width: 25%;
		padding: 1% 4%;
	}
	#middle {
		width: 57%;
		padding: 1% 4%;
		margin: 30px 0px 5px 5px;
		float: right;
	}
	
	#middle_one {
	width: auto; /* Account for margins + border values */
	float: left;
}

#middle_two {
	width: auto; /* Account for margins + border values */
	float: left;
	padding: 5px 8px;
}

	
	#sidebar {
		clear: both;
		padding: 1% 4%;
		width: auto;
		float: none;
	}

	#header, #footer {
		padding: 1% 4%;
	}
	
.tooltip-wrap .tooltip-content{
  font-size: 0.80em;
	}
}

/* for 700px or less */
@media screen and (max-width: 600px) {

	#content {
		width: auto;
		float: none;
	}
	
	#middle {
		width: auto;
		float: none;
		margin-left: 0;
	}
	
	#sidebar {
		width: auto;
		float: none;
	}
	
	#middle_two {
	width: auto; /* Account for margins + border values */
	float: left;
	padding: 5px 8px;
}

.tooltip-wrap {
  top: 68px;
    font-size: 0.70em;
  }
  
}

/* for 480px or less */
@media screen and (max-width: 480px) {

	#header {
		height: auto;
	}
	h1 {
		font-size: 2em;
	}
	#sidebar {
		display: none;
	}
	
	.tooltip-wrap {
	width:93%;
    top: 28px;
    font-size: 0.65em;
  }
  
  	.tooltip-content {
	width:93%;
  }
  
    body{
margin:20px 0 0 0;
}

}


#content {

}

#sidebar {

}
#header, #content, #middle, #sidebar {

}

#pagewrap, #header, #content, #middle, #sidebar, #footer {
	border: solid 0px #ccc;
}

.tooltip-wrap {
  position: relative;
  top: 68px;
  text-align: top;
}
.tooltip-wrap .tooltip-content  {
  width:90%;
  display: none;
  position: absolute;
  bottom: 3%;
  left: 4%;
  right: 4%;
  -moz-border-radius:10px;
  -webkit-border-radius:10px;
  border-radius:10px;
  background-color: #fff;
  font-size: 0.80em;
  padding: 1.5em;
  z-index:10;
  opacity: 0.90;
  filter: alpha(opacity=90); /* For IE8 and earlier */
}
.tooltip-wrap:hover .tooltip-content {
  display: block;
}

.hmright { 
top: -170px;
right: 0; 
border: 0px; 
z-index: 3; 
position: absolute; 
width:auto;
height:auto;
}

.menulang { 
top: 12px;
left: 69%;
right: 0; 
border: 0px; 
z-index: 5; 
position: absolute; 
width:auto;
height:auto;
font-size: 1.1em;
}

.exptooltip-wrap {
  position: relative;
  right: 3px;
}
.exptooltip-wrap .exptooltip-content {
  width:98%;
  display: none;
  position: absolute;
  bottom: 3%;
  left: 4%;
  right: 4%;
  -moz-border-radius:10px;
  -webkit-border-radius:10px;
  border-radius:10px;
  background-color: #fff;
  padding: 1.5em;
  font-size: 0.75em;
  z-index:90;
  opacity: 0.90;
  filter: alpha(opacity=90); /* For IE8 and earlier */
}
.exptooltip-wrap:hover .exptooltip-content {
  display: block;
}