@charset "utf-8";
/* CSS Document */
ul, ol, dl { /* Due to variations between browsers, it's best practices to zero padding and margin on lists. For consistency, you can either specify the amounts you want here, or on the list items (LI, DT, DD) they contain. Remember that what you do here will cascade to the .nav list unless you write a more specific selector. */
	padding: 0;
	margin: 0;
}

/*@media only screen and (min-width : 320px) and (max-width : 700px) {*/
@media only screen {
	body {-webkit-text-size-adjust: none;}
}

body {
	margin: 0;
	padding: 0;
	color: #000;
	background-color: #DDD; 
	/* background-image: linear-gradient(to bottom, #060, #363); */
	font-size:16px;
	line-height: 1.4;
}
/* ~~ this container surrounds all other divs giving them their percentage-based width ~~ */
.container {
    max-width: 1024px;/* a max-width may be desirable to keep this layout from getting too wide on a large monitor. This keeps line length more readable. IE6 does not respect this declaration. */
	/* min-width: 970px;  the auto value on the sides, coupled with the width, centers the layout. It is not needed if you set the .container's width to 100%. */
	margin-top: auto;
	margin-right: auto;
	margin-bottom: 20px;
	margin-left: auto;
	background-color: #EAF6F1;
	text-align: left;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
	border-top-color: #060;
	border-right-color: #060;
	border-bottom-color: #060;
	border-left-color: #060;
	border-radius: 25px;
	font-size:100%;
}

/* ~~the header is not given a width. It will extend the full width of your layout. It contains an image placeholder that should be replaced with your own linked logo~~ */
.header {
	color: #FFF;
	float: none;
	height: 150px;
	line-height: 100%;
	padding-left: 0px;
	text-align: center;
	text-indent: 0px;
	width: 100%;
	margin-right: 0px;
	margin-left: 0px;
	clip: rect(auto,auto,auto,auto);  
	background-color:#85a396; 
	  
}
.crisis_opp_text {
	display: none;
	font-style:italic;
	font-size:125%;
	padding-top:20px;
	padding-bottom:20px;
}

@media screen and (min-width:500px) {
.NameTitle {
	font-size: 225%;
	position: relative;
	top:10%;
	width: 100%;
	text-align: center;
	line-height: 100%;
	float: none;
	font-weight: bold;
}
#credential {
	font-size: 90%;
	font-style: normal;
	font-weight:lighter;
	line-height: 120%;
	margin-right: 0px;
	margin-left: 0px;
	width: 100%;
	top: 15%;
	position: relative;
}
}
@media screen and (max-width:500px) {
.NameTitle {
	font-size: 160%;
	position: relative;
	top:12%;
	width: 100%;
	text-align: center;
	line-height: 120%;
	float: none;
	font-weight: bold;
}
#credential {
	font-size: 70%;
	font-style: normal;
	font-weight:lighter;
	line-height: 135%;
	margin-right: 0px;
	margin-left: 0px;
	width: 100%;
	top: 15%;
	position: relative;
}
}
#tabs {
	float:none;
	text-align: left;
	position: relative;
	line-height: 100%;
	clip: rect(auto,auto,auto,auto);
	width: 100%;
	margin-top: 0;
	margin-right: auto;
	margin-bottom: auto;
	margin-left: auto;
   
	height: 50px;
	left:0px;
	top: 35px;
}

#tabs #language a {
	font-family: KaiTi;
	color:#FFF;
	vertical-align: bottom;
	margin-right: 2px;
	margin-left: 2px;
	padding-right: 1.5%;
	padding-left: 1.5%;
	/* border: medium solid #FFF; */
	padding-top: 15px;
	padding-bottom: 10px;
	position: relative;
	float: right;
	text-decoration: none;
}

#tabs #language a:hover {
	color:#600;
}

@media screen and (min-width:700px) {
.menulist {
	float: left;
	display: block;
	position: relative;
	padding-left:20px;
}
.menu-mobile {
	float:left;
	display: none;
	position: relative;
	list-style-type:none;
}
#tabs #language {
	display: inline;
}
}
@media screen and (max-width:700px) {
.menulist {
	float: left;
	display:none;
	position: relative;
}
.menu-mobile {
	float:left;
	display: block;
	position: relative;
	list-style-type:none;
}
#tabs #language {
	display: none;
}
}

.menulist:after {
	content:""; 
	display: block;
	clear: both;
}

.menulist ul {
	display: none;
	position: absolute;
	top: 100%;
	padding-top:10px;
	padding-bottom:10px;
	width:250px
}
.menulist li {
	text-decoration: none;
	list-style-type: none;
	float: left;
	display: block;
}
.menulist li:hover > ul {
	display: block;
	background-color:#85a396;
	z-index: 1000;
}
.menulist li a {
	font-size: 125%;
	color:#FFF;
	text-align: left;
	display: block;
	padding-top: 15px;
	padding-right: 10px;
	padding-bottom: 1%;
	padding-left: 15px;
	text-decoration: none;
}
.menulist a:hover {	
	color: #600;
}
.menulist ul li {
	display: block;
	float: none;
	position: relative;
	color: #FFF;
	text-decoration: none;
	border: thin none #060;
	background-image: none;
}
.menulist ul li a {
	display: block;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
	border-top-width: thin;
	border-right-width: thin;
	border-bottom-width: thin;
	border-left-width: thin;
	font-size: 110%;
	color: #FFF;
	background-image: none;
	text-decoration: none;
}

.iconholder{
	width:40%;
	position:relative;
	float:left;
	top:-25px;
}
#menu_icon {
	resize:both;
	width:100%;
}
.menu-mobile:after {
	content:"";
	display: block;
	clear: both;
}

.menu-mobile li {
	color: #FFF;
	text-decoration: none;
	list-style-type: none;
	float: left;
	display: block;
}

.menu-mobile li a {
	font-size: 125%;
	color: #FFF;
	text-align: left;
	display: block;
	padding-top: 10px;
	padding-right: 10px;
	padding-bottom: 10px;
	padding-left: 10px;
	text-decoration: none;
}
.menu-mobile li ul {
	display: none;
	position: relative;
	top: 100%;
	list-style-type:none;
	background-color:#85a396;;
	margin-top:10px;
	padding-top:20px;
	padding-bottom:10px;
}
.menu-mobile li ul:after {
	display: block;
	clear: none;
}

.menu-mobile li a:hover {	
	color: #600;
}

.menu-mobile li:hover > ul {
	display: block;
	z-index: 1000;
}
.menu-mobile li ul li:hover > ul {
	display: block;
	background-color: #85a396;;	
	position:absolute;
	width:250px;
}
.menu-mobile li ul li {
	display: block;
	float: none;
	position: relative;
	color: #FFF;
	background-color: #85a396;
	text-decoration: none;
	border: thin none #060;
	background-image: none;
}
.menu-mobile li ul li a {
	display: block;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
	border-top-width: thin;
	border-right-width: thin;
	border-bottom-width: thin;
	border-left-width: thin;
	font-size: 110%;
	color: #FFF;
	background-color: #85a396;;	;	
	background-image: none;
	text-decoration: none;
}
.menu-mobile li ul li ul {
	background-color: #85a396;;	
	position: absolute;
	left:95%;
	top:0px;
	padding-left:10px;
	padding-right:10px;
}
.menu-mobile li ul li ul li {
	position: relative;
	float:none;
}

.menu-mobile li ul li ul li a {
	display: block;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
	border-top-width: thin;
	border-right-width: thin;
	border-bottom-width: thin;
	border-left-width: thin;
	font-size: 110%;
	color: #FFF;
	background-color: #85a396;;	;		
	background-image: none;
	text-decoration: none;
}

/* ~~ The content ~~ */
.content {
	width: 95%;
	padding-top: 30px;
	padding-right: 0;
	padding-left: 0;
	float: none;
	margin-left: 3%;
	margin-right: 3%;
	line-height: 150%;
	font-size:100%;
	font-weight:normal;
}

.content p a {
	color: #690;
	text-decoration: none;
	font-style: italic;
}

.content p a:hover {
	color: #5B0B0B;
}

.content ul {
	list-style-type: disc;
	list-style-position: outside;
	line-height: 180%;
	margin-left: 20px;
	display: list-item;
}

.container .content ul li ul {
	list-style-type: circle;
}
.container .content ul li {
	display: list-item;
	white-space: normal;
}
.container .content ul li ul li ul {
	list-style-type: square;
}


.content ul li a {
	color: #060;
	text-decoration: underline;
}

.content.ol p{
	list-style-position: inside;
	text-align: left;
}
.content ol {
	list-style-position: inside;
}
.content ol li {
	font-style: italic;

}
.content ol li p {
	font-style: normal;
}

.content audio {
	width:75%;
}

/* Map and Picture */
@media screen and (max-width:700px) {
.mapholder {
	position:relative;
	float: right;
	margin-right: auto;
	margin-left: 3%;
	margin-bottom: 3%;
	width: 100%;
	height: 60vw;
}
.picholder { 
	width: 100%;
	float: right;
	margin-right: auto;
	margin-left: 3%;
	margin-bottom: 3%;
}
}
@media screen and (min-width:700px) {
.mapholder {
	position:relative;
	float: right;
	margin-right: auto;
	margin-left: 3%;
	margin-bottom: 3%;
	width: 60%;
	height: 350px;
}
.picholder { 
	max-width: 50%;
	float: right;
	margin-right: auto;
	margin-left: 3%;
	margin-bottom: 3%;
}
}
.mapholder iframe {
	position: relative;
	width: 100%;
	height: 100%;
}
.picholder img {
	resize:both;
	width: 100%;
}

/* special div */
.page_title {
	color:#de5857;
	font-size:150%;
}

.announce p {
	color:#de5857;
	font-size:120%;
}
.announce p a {
	color:#de5857;
	font-style:italic;
}

#resume_list {
	list-style-type: none;
	margin-left:0px;
	font-style:italic;
}
#resume_list li ul {
	list-style-type: none;
	font-style:normal;
}

/* ~~ The footer ~~ */
.footer {
	font-size: 80%;
	width: 100%;
	margin-right: 0;
	margin-left: 0;
	padding-top: 10px;
	padding-right: 0;
	padding-bottom: 10px;
	padding-left: 0;
	border-top-width: thin;
	border-top-style: solid;
	border-top-color: #FFF;
	border-right-color: #FFF;
	border-bottom-color: #FFF;
	border-left-color: #FFF;
	float: none;
	height: 90px;
	color: #FFF;
	background-color:#85a396; 
	
}
@media screen and (min-width:600px) {
.footer .copyright {
	text-align: left;
	width: 30%;
	float: left;
	margin-left: 5px;
}
.footer .verify {
	text-align: right;
	float: right;
	width: 25%;
	margin-right: 5px;
}
.footer .addr {
	float: right;
	width: 40%;
	text-align: center;
}
}
@media screen and (max-width:600px) {
.footer .copyright {
	text-align: left;
	width: 40%;
	float: left;
	margin-left: 5px;
}
.footer .verify {
	text-align: right;
	float: right;
	width: 50%;
	margin-right: 5px;
}
.footer .addr {
	float: none;
	width: 40%;
	text-align: left;
	margin-left: 5px;
}
}
.footer .addr p a {
	color: #FFF;;
}
.footer .addr p a:hover {
	color: #5B0B0B;;
}
#insertbox {
	font-size: 100%;
	color: #FFF;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-top-color: #85a396;
	border-right-color: #85a396;
	border-bottom-color: #85a396;
	border-left-color: #85a396;
	padding-left: 20px;
	background-color: #85a396;
	width: 90%;
	max-width:500px;
}

#insertbox iframe {
	width: 90%;
}
#insertbox a {
	color: #FFF;
}
#insertbox a:hover {
	color: #600;
}

#insertboxright {
	font-size: 100%;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-top-color: #85a396;
	border-right-color: #85a396;
	border-bottom-color: #85a396;
	border-left-color: #85a396;
	padding-left: 20px;
	background-color: #85a396;
	width: 45%;
	float: right;
}
#insertboxright a {
	color: #FFF;
}
#insertboxright a:hover {
	color: #600;
}

#insertboxright iframe {
	width: 90%;
}

#insertboxleft {
	font-size: 100%;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-top-color: #85a396;
	border-right-color: #85a396;
	border-bottom-color: #85a396;
	border-left-color: #85a396;
	padding-left: 20px;
	background-color: #85a396;
	width: 45%;
	float: none;
}
#insertboxleft a {
	color: #FFF;
}
#insertboxleft a:hover {
	color: #600;
}
#insertboxleft iframe {
	width: 90%;
}
.newline {
	display:none;
}
@media screen and (max-width:850px) {
	#insertboxright {
		width: 90%;
		float:none;
	}
	#insertboxleft {
		width: 90%;
		float:none;
	}
	.newline {
		display:block;
	}	
}