
.IE {
	display: none;
}
.noscript{
	background: #000;
	color: #f2efe4;
	font: 100% monospace;
	left: 2px;
	margin-top: 0px;
	padding: 3px;
	position: absolute;
	top: 5px;
	width: 100%;
}
#noscript-1{
	margin-top: -7px;
}
#noscript-2{
	margin-top: 50px;
	margin-bottom: 5px;
	width: 242px;
}
#noscript-3{
	margin-top: 60px;
	padding: 10px;
}
	.border{
		border-color: rgb(165, 154, 148);
	}
	.nav-bg{
		display: none;
	}
		.home-city img {
			display: none;
			width: 100%;
			margin-top: -3%;
		}
		/* header holds title and links NOT the image */
		header {
			text-align: center;
		}
		#language {
			margin-top: 3px;
			width: 100px;
		}
			#language a{
				font-family: 'Antic Slab','Bookman Old Style','Century Schoolbook', Georgia, 'Droid Serif', serif;
				background: rgba(0, 0, 0, .7);
				color: #fff;
				padding: 1%;
			}
			#language a:nth-child(2){
				margin-left: 2%;
			}
			#language a:hover {
				background: rgba(0, 0, 0, .5);
				-webkit-transition: background .3s ease-in-out;
				-moz-transition: background .3s ease-in-out;
				-ms-transition: background .3s ease-in-out;
				-o-transition: background .3s ease-in-out;
				transition: background .3s ease-in-out;
			}
		.title{
			font-family: 'nevisBold', arial black, sans-serif;
			font-size: 300%; /* 20 / 16 */
			color: #fafed7;
		}

		/*--------------------START link styles-------------------*/
		#title-bg{
			width: 200px;
		}
		
		#nav-wrapper-main{
			clear: both;
			display: inline-block; /* doing this to center the floated nav elements inside the header element */
			font-size: 86%;
			margin-top: 30px;
		}
		#nav-wrapper-main nav a{
			font-size: 98%;
		}
	 	#nav-wrapper2, #nav-wrapper3, #nav-wrapper4 {
			clear: both;
		}
		.link-text{
			font: 110% 'Courier Prime', 'Cutive Mono' ,'Patua One', 'Rockwell', monospace;
			margin-top: 12px;
			margin-left: 5px;
			padding-top: 1px;
		}
		/* Universal styles for link circles.  The only style that is specifically added later is bg color for each circle */  
		.link-circle{
			border-radius: 13px;
			-moz-border-radius: 13px;
			-webkit-border-radius: 13px;
			color: #f2efe4;
			float: left;
			height: 29px;
			line-height: 29px;
			text-align: center;
			font-size: 86%;
			width: 29px;
			margin-bottom: 9px;
			margin-top: 6px;
		}
		.link:hover .link-text{
			background: #f2efe4;
			color: #000;
		}
		.link:hover .link-circle{
			background: #000;
		}	
		/*---Link 1---*/			
		.I-link-one-dash {
			border-top: dashed 3px #86768A;
			transform:rotate(-25deg);
			-ms-transform:rotate(-30deg); 
			-moz-transform:rotate(-30deg); 
			-webkit-transform:rotate(-17deg); 
			-o-transform:rotate(-30deg);
			display: none;
			width: 120px;
		}
		/* nav.I-link-# is the nav element that holds the circle and text*/

		.I-link-one:hover .I-link-one-dash{
			border-top: dashed 4px #BABDB5;
			}	
			.I-link-one-circle {	
				background: rgb(199, 163, 50);
			}				
			.I-link-one-text { 
				background: #f2efe4;	
				/*width: 21.040266%; /* this makes the link container width 295.692*/
				color: rgb(199, 163, 50);	
				float: left;
			}
			
		/*---Link 2---*/		
		.I-link-two-dash {
			border-top: dashed 3px #873737;
			/* Rotate div */
			transform:rotate(-127deg);
			-ms-transform:rotate(-127deg); 
			-moz-transform:rotate(-127deg);
			-webkit-transform:rotate(150deg);
			-o-transform:rotate(-127deg); 
			display: none;
			width: 100px;
		}
		/*the nav containing block is the primary area for setting margins*/	
			.I-link-two-circle {	
				background:#873737;
			}
			.I-link-two-text { 	
				background: #f2efe4;
				color: #873737;
				float: left;
			}
		/*---Link 3---*/	
		.I-link-three-dash {
			border-top: dashed 3px #4D698A;
			/* Rotate div */
			transform:rotate(50deg);
			-ms-transform:rotate(50deg); 
			-moz-transform:rotate(50deg); 
			-webkit-transform:rotate(50deg); 
			-o-transform:rotate(50deg); 
			display: none;
			width: 100px;
		}
			.I-link-three-circle {	
				background: #4D698A;
			}
			.I-link-three-text {
				background: #f2efe4;
				color: #4D698A;	
				float: left;				
			}					
		/*---Link 4---*/	
		.I-link-four-dash {
			border-top: dashed 4px #697D4D;
			transform:rotate(-140deg);
			-ms-transform:rotate(-140deg);
			-moz-transform:rotate(-140deg); 
			-webkit-transform:rotate(-140deg); 
			-o-transform:rotate(140deg); 
			display: none;
			width: 100px;
		}
			.I-link-four-circle {	
				background: #657D45;
			}		
			.I-link-four-text { 	
				background: #f2efe4;
				color: #657D45;
				float: left;
			}
				
		/*--------------------END link styles-------------------*/	
		.objectives{	
			clear: both;
			width: 100%;
			margin: 23px 0 0 15%;	
		}			
		/* Century Schoolbook is the only solely mac font, URW Bookman L is for linux unserved by Georgia*/
		.objectives h2{
			color: #000;
			font: 160% 'Cutive Mono', 'Patua One','Rockwell', 'Century Schoolbook', 'AmericanTypewriter-Bold', Georgia, 'Droid Serif',serif;
			text-transform: none; 
		}		
		.objectives p{
			margin: 3% 0 3% 0%;
			width: 75%;
			max-width: 47.375em;
			font: 90% 'Antic Slab','Bookman Old Style','Century Schoolbook', Georgia, 'Droid Serif', serif;
			text-align: left;
			line-height: 163%
		}	
		#ticker{
			clear: both;
			font: 96% 'Cutive Mono', 'Patua One','Rockwell', 'Century Schoolbook', 'AmericanTypewriter-Bold', Georgia, 'Droid Serif',serif;
			margin: 50px 0 0 0;
			padding-bottom: 1%;
		/*	width: 54%;*/
		}
		#caption{
			float: left;
		}
		#ticker-number{
			display: inline-block;
			margin-left: 0px;
			font-size: 117%;
			margin-top: -5px;
		}
		 #blog-wrapper{
			clear: both;
			border: none;
			font-size: 100%;
			float: left;
			margin: 100px 0 10px 15%;	
			width: 80%;
			overflow: hidden;
		}	
			#blog-wrapper h2{
				color: #6F6C5D;
				font: 120% 'Cutive Mono', 'Patua One', 'Rockwell', 'Century Schoolbook', Georgia, 'Droid Serif', serif;	
			}		
			/* for text between body and big titles fallback for Windows and Mac is 'Bookman Old Style', 'AmericanTypewriter is iOS fallback*/
	
			h4:nth-child(4) {
				font-size: 80%;
				line-height: 125%;
			}
			.post{
				border-bottom: 1px solid #C8CAC8;
				padding: 70px 0 50px 0px;
				width: 80%;
				margin-top: 3px;
			}
			.post-date{
				font-family:'Cutive Mono', monospace;
				font-size: 90%;
				margin: 1% 0 2% 0%;
				}			
				.box{
					width: 50px;
					height: 70px;
					float: left;
					margin-top: 2px;
					background: url("../images/boxTitle.png") no-repeat 0 0;
				}
				.post-title{
					color: #f2efe4;
					display: inline;
					font-size: 100%;
					font-family: 'nevisBold', sans-serif;
					line-height: 150%;
					margin-bottom: 50px;
					text-transform: uppercase;
					padding-left: 2px;
					letter-spacing: 2px;
					background: rgb(49, 44, 44);
				}	
				.post-content{
					font-size: 14px;
					line-height: 140%;
					margin-top: 50px;
					padding-right: 5px;
					padding-left: 5px;
				}	
			#blog-wrapper a{
				color:  #D10610;
				font-family:'Antic Slab', 'Bookman Old Style','Century Schoolbook', 'AmericanTypewriter', Georgia, 'Droid Serif', serif;

				}		
			#blog-wrapper a:hover, #blog-wrapper a:focus{
				color:gray;
				}
			#past-entries{
				display: inline;
				color: #000;
				font-family: 'Courier Prime Bold', 'Cutive Mono' ,'Patua One', 'Rockwell', monospace;	
				letter-spacing: .01em;
				font-size: 80%;
				margin-left: -200px;
			}
			#past-entries:hover{
				background: #f2efe4;
			}
			#past-entries:hover .triangle{
				border-color: transparent transparent transparent #000;
			}
			.partners {
				border-top: 1px dotted #000;
				clear: both;
				font-size: 88%;
				margin: 17% auto; 
				width: 90%; 
			}
				#logo-wrapper{
					margin-top: 20px;
				}
				h4.partners-title {
					font-family:'Antic Slab', 'Bookman Old Style','Century Schoolbook', 'AmericanTypewriter', Georgia, 'Droid Serif',serif;
					color: gray;
					padding-top: 54px;
					margin-left: 6%;
					}
				img.iea-logo {
					margin-left: 5%;
					padding: 3% 0 1.5% 0;
					float: left;
					}
				img.evi-logo {
					float: left; 
					margin-top: 3%; 
					margin-left: 2%;
					}
				img.phev-logo {
					float: left;
					margin-top: 4%;
					margin-left: 2%;
					padding-bottom: 8.5%;
					}
				img.rmi-logo{
					float: left;
					margin-left: 2%;
					margin-top: 3.75%;
					}
.underline{
	text-decoration: underline;
}
.trapezoid-1 {
	border-bottom: 80px solid rgb(131, 128, 128);
	border-left: 30px solid transparent;
	border-right: 20px solid transparent;
	height: 0;
	-webkit-transform: rotate(38deg);
	-moz-transform: rotate(-38deg);
	-o-transform: rotate(-38deg);
	-ms-transform: rotate(-38deg);
	transform: rotate(38deg);
	-webkit-transition: border-bottom .6s;
	-webkit-transition: border-bottom .6s;
	-moz-transition: border-bottom .6s;
	-o-transition: border-bottom .6s;
	transition: border-bottom .6s;
	width: 30px;
	position: relative;
	z-index: -100;
	margin-left: 420px;
}
.trapezoid-2 {
	border-bottom: 40px solid rgb(153, 53, 53);
	border-left: 40px solid transparent;
	border-right: 20px solid transparent;
	height: 0;
	-webkit-transform: rotate(-38deg);
	-moz-transform: rotate(-38deg);
	-o-transform: rotate(-38deg);
	-ms-transform: rotate(-38deg);
	transform: rotate(-38deg);
	-webkit-transition: border-bottom .6s;
	-webkit-transition: border-bottom .6s;
	-moz-transition: border-bottom .6s;
	-o-transition: border-bottom .6s;
	transition: border-bottom .6s;
	width: 30px;
	position: relative;
	z-index: -100;
	margin-left: 450px;
}
#blog-triangle{
	width: 0px;
	height: 0px;
	border-style: solid;
	border-width: 100px 0 100px 200px;
	border-color: transparent transparent transparent #587a42;
	-webkit-transform: rotate(-38deg);
	-moz-transform: rotate(-38deg);
	-o-transform: rotate(-38deg);
	-ms-transform: rotate(-38deg);
	transform: rotate(-38deg);
	display: inline-block;
	position: relative;
	z-index: -100;
	margin-left: 150px;
}
/*--below 320px..just for fun...*/
@media screen and (min-width: 300px) {
	.objectives h2 {
		font-size: 140%;
	}
}
@media screen and (min-width: 450px) {
		#noscript-2{
		margin-top: 30px;
	}
		#noscript-3{
		margin-top: 40px;
	}
}	
@media screen and (min-width: 650px) {
	.home-city{
		opacity: 1;
	}
	header{
		left: 0;
		position: absolute;
		top: -1px;
		width: 100%;
	}
	#language {
		left: 92%;
		position: relative;
		z-index: 200; /* One level above the #nav-wrapper-main */
	}
	#title-bg{
		float: left;
		margin-left: 10px;
		margin-top: 7px;
	}
	#nav-wrapper-main{
		left: -17.721%;
		position: absolute; /* to avoid setting negaive margins for each nav element */
		width: 100%;
		z-index: 100;
	}
	#nav-wrapper1 {
		float: right;
		margin-top: 0px;
	}
	#nav-wrapper2 {
		clear: both;
		float: right;
		margin-right: 50px;
	}
	#nav-wrapper3 {
		clear: both;
		float: right;
		margin-right: 24px;
	}
	#nav-wrapper4 {
		clear: both;
		float: right;
		margin-right: 35px;
	}
	.I-link-one-dash{
		position: relative;
		top: -10px;
		}
	.I-link-two-dash{
		-webkit-transform: rotate(150deg); /* CHANGE OTHER VENDOR TRANSFORMS */
		width: 63px;
		position: relative;
		right: 10px;
		top: 3px;
	}
	.objectives{
		margin-bottom: 10%;
	}
	.objectives {
		width: 87%;
	}
	.objectives p {	
		width: 100%;
		margin-bottom: -3%;
	}
	.noscript{
		top: 200px;
	}
	#noscript-2{
		margin-top: 34px;
	}
		#noscript-3{
		margin-top: 45px;
	}
}
@media screen and (min-width: 900px){
	#noscript-2{
		margin-top: 20px;
	}
		#noscript-3{
		margin-top: 30px;
	}
}
@media screen and (min-width: 1000px){
	#title-bg{
		width: 225px;
	}
}

