@charset "UTF-8";
/* CSS Document */


@font-face {
    font-family:"asapregular";
    src: url('../fonts/asap-regular-webfont.eot');
    src: url('../fonts/asap-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/asap-regular-webfont.woff') format('woff'),
         url('../fonts/asap-regular-webfont.ttf') format('truetype'),
         url('../fonts/asap-regular-webfont.svg#asapregular') format('svg');
    font-weight: normal;
    font-style: normal;

}




@font-face {
    font-family:"karlabold";
    src: url('../fonts/karla-bold-webfont.eot');
    src: url('../fonts/karla-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/karla-bold-webfont.woff') format('woff'),
         url('../fonts/karla-bold-webfont.ttf') format('truetype'),
         url('../fonts/karla-bold-webfont.svg#karlabold') format('svg');
    font-weight: normal;
    font-style: normal;

}




@font-face {
    font-family:"karlaregular";
    src: url('../fonts/karla-regular-webfont.eot');
    src: url('../fonts/karla-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/karla-regular-webfont.woff') format('woff'),
         url('../fonts/karla-regular-webfont.ttf') format('truetype'),
         url('../fonts/karla-regular-webfont.svg#karlaregular') format('svg');
    font-weight: normal;
    font-style: normal;

}





h1 {
	font-family:"karlabold", Arial, Helvetica, sans-serif;
	font-weight:normal;
	font-size:5.5em;
	color:#cc0033;
	line-height:1;
	margin-top: 20px;		
}

h2 {
	color: #336699;
    font-family: "karlaregular",Arial,Helvetica,sans-serif;
    font-size: 2em;
    font-weight: normal;
    line-height: 1.25;
    margin-top: 20px;	
}

h3 {
	font-family:"karlabold", Arial, Helvetica, sans-serif;
	font-weight:normal;
	font-size:3em;
	color:#f47c30;	
}

h4 {
	color: #FFFFFF;
    font-family: "karlabold",Arial,Helvetica,sans-serif;
    font-size: 2.25em;
    font-weight: normal;
    line-height: 1.25;
}

h5 {
	font-family:"karlabold", Arial, Helvetica, sans-serif;
	font-weight:normal;
	color:#336699;	
	font-size: 1.5em;
}

p {
	font-family:"asapregular", Arial, Helvetica, sans-serif;
	font-size: 1.45em;
    line-height: 1.5;	
}

header p {
	font-size:1.5em;	
}

header span.bold {
    font-size: 1.15em;
    font-weight: bold;
}

header a span.bold {
    color: #FFFFFF;
    text-decoration: underline;
}

header a.button {
		margin-left:20px;	
		margin-top:10px;
	}

a.button {
    background: none repeat scroll 0 0 #FFFFFF;
    color: #336699;
    font-size: 1.5em;
    padding: 10px;
}

html {
	background-attachment: fixed;
    background-clip: border-box;
    background-color: rgba(0, 0, 0, 0);
    background-image: url("../img/seamless_asphalt_texture.jpg");
    background-origin: padding-box;
    background-repeat: repeat;
    background-size: 50% auto;
	
}


header {
	background-color: #336699;
    color: #FFFFFF;
    height: 85px;
	margin-top:50px;
    padding-top: 20px;
	-webkit-box-shadow: 0 2px 5px 0 #9E9E9E;
	box-shadow: 0 2px 5px 0 #9E9E9E;
	text-align:center;
	width:100%;
}

.facebook-share {
    float: right;
    position: relative;
    top: -40px;
}

.facebook-share-footer {
    float: right;
    position: relative;
    top: 20px;
}


footer {
	background-color: #336699;
    color: #FFFFFF;
    height: auto;
    padding-bottom: 40px;
    padding-top: 40px;
    text-align: center;
    width: 100%;
}
	

label {
	display: inline-block;
    font-family: "karlabold", Arial, Helvetica, sans-serif;
    font-size: 1.25em;
    margin-bottom: 5px;
}

textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], .uneditable-input {
    background-color: #FFFFFF;
    border: 2px solid #336699;
    border-radius: 8px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
    transition: border 0.2s linear 0s, box-shadow 0.2s linear 0s;
}

input#txt-zipcode {
    color: #336699;
    font-family: "karlaregular",Arial,Helvetica,sans-serif;
    font-size: 1.75em;
    height: 25px;
    padding-top: 10px;
    text-align: center;
    width: 150px;
}

.banded {
	background-color:#336699;	
	color:#FFFFFF;
}

.inline {
	display:inline-block;	
}

.padded {
	padding:20px;	
}


/* Titles Section */

#titles {
    text-align: center;
	margin-top:50px;
}

#star-divider {
    margin: 20px 0;
}

/* What Can You Do */
#what_can_you_do {
    padding: 20px 0 0;
	margin:20px 0;
}

/* Nickels */

#nickels {
	margin-bottom:50px;
	text-align:center;	
}

#nickels .banded {
    height: auto;
    padding: 10px;
}

#nickels img {
	margin-right: 10px;
    margin-top: -70px;	
}

/* Find Officials */

#find-officials {
	background-color:#d1e8e8;
	text-align:center;
	padding:20px;
}

div.step {
	margin:20px 0 40px 0;
		
}

#find-officials .official {
    display: inline-table;
    margin: 20px;
}

#div-representatives {
	position:relative;	
}

.official-photo {
    height: 200px;
    width: 150px;
	overflow:hidden;
}

.official-photo > img {
	height: 100%;
    max-width: none;
    position: relative;
}

#find-officials .official-photo {
    position:relative;
	cursor:pointer;
}

.official-photo:before {  
    content: "";  
    display: block;  
    position: absolute;  
    top: 0;  
    bottom: 0;  
    left: 0;  
    right: 0;  
    background: rgba(255,255,255, 0.5);  
	background-color:#FFFFFF;
	filter: alpha(opacity=50);
	opacity:0.5;
    -moz-transition: background .3s linear;  
    -webkit-transition: background .3s linear;  
    -o-transition: background .3s linear;  
    transition: background .3s linear;  
}  

.official-photo:hover:before, .official-photo:active:before, .official-photo.active:before {  
    background: none;  
}  



p.official_details {
    color: #336699;
    font-size: 1em;
	width:150px;
}

#find-officials .icon {
    display: inline-block;
	margin:0 10px;
	position:relative;
	cursor:pointer;
}

.icon:before {  
    content: "";  
    display: block;  
    position: absolute;  
    top: 0;  
    bottom: 0;  
    left: 0;  
    right: 0;  
    background: rgba(255,255,255, 0.5); 
	background-color:#FFFFFF;
	filter: alpha(opacity=50);
	opacity:0.5;
    -moz-transition: background .3s linear;  
    -webkit-transition: background .3s linear;  
    -o-transition: background .3s linear;  
    transition: background .3s linear;  
}  

.icon:hover:before, .icon:active:before, .icon.active:before {  
    background: none;  
}  

.icon img {
    max-height: 50px;
}

.active-icon_info {
    background: none repeat scroll 0 0 #FFFFFF;
    border: 2px solid #336699;
    border-radius: 10px;
    margin: 20px auto;
	min-height: 150px;
    padding: 20px;
    width: 75%;
}

.active-icon_info p {
    color: #336699;
    font-size: 1.25em;
}


/* IE8 Fixes */


	body {
		width:768px\9;
		margin:10px auto 200px\9;
	}