﻿@charset "UTF-8";

/* 

OUTLINE  -----------------------------------------------------------------------------------------------

- CSS RESET, CLEARFIX, & UTILITY CLASSES
- BASE BLOCK ELEMENTS & GLOBAL STYLES
- GENERAL TEXT STYLES
- BRANDING
- LOG-IN FORM
- CALLOUT
- FOOTER



COLOR PALETTE  -----------------------------------------------------------------------------------------

#ab499b Highlight (Headings, Highlights)
#008bbf Secondary Highlight (Secondary Headings, Links)
#87888b Neutral Gray (Body Text)
#b2b2b2 Light Gray (Footer Text)



TYPOGRAPHY  --------------------------------------------------------------------------------------------

Primary Fontstack:   roboto, Arial, Helvetica, sans-serif



NOTES  -------------------------------------------------------------------------------------------------




*/


/* ------------------------------------------------------------------------------------------------------*/
/* CSS RESET & CLEARFIX, & UTILITY CLASSES  -------------------------------------------------------------*/


html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, figure, footer, header, 
hgroup, menu, nav, section, menu,
time, mark, audio, video {
  margin:0;
  padding:0;
  border:0;
  outline:0;
  font-size:100%;
  vertical-align:baseline;
  background:transparent;
}

article, aside, figure, footer, header, hgroup, nav, section {display: block;}          

table { border-collapse:collapse; border-spacing:0; }  /* (NOTE: tables still need cellspacing="0" in the markup) */
html { overflow-y: scroll; }  /* Add this in to always generate vertical scrolls (and avoid page shift on centered layouts) */
html { -webkit-font-smoothing: antialiased; }  /* Cleaner typography in Safari/Chrome */

:focus, a:active, a:selected	{ outline: 0; border: 0; ie-dummy: expression(this.hideFocus=true); }  /* Gets rid of broswer generated outlines around elements */
a:active, a:selected, a:visited { border: none; outline: none; }  /* Remove dotted line around selected elements in IE */


/* Clearfix ------- */

.clearfix:before,
.clearfix:after { content:""; display:table; }

.clearfix:after { clear:both; }

.clearfix { zoom:1; }  /* For IE 6/7 (trigger hasLayout) */


/* Utility Classes ------- */

.left { float: left; }
.right { float: right;}



/* ------------------------------------------------------------------------------------------------------*/
/* BASE BLOCK ELEMENTS & GLOBAL STYLES ------------------------------------------------------------------*/


html {
    font: 400 14px/15px roboto, tahoma, Helvetica, sans-serif;
    -webkit-font-smoothing: antialiased;
    color: #2a2e32;
}

#organization-banner {
  width: 100%;
	padding: 10px 0;
  background: url(../images/bg-window.gif) repeat-x bottom #eeeeef;
}

#organization-banner .container {
	width: 960px;
	margin: 0 auto;
	padding: 0 25px;
  text-align: center;
}

#wrapper {
	width: 960px;
	margin: 0 auto;
	padding: 0 25px;
}

#main, #callout {
    margin: 11px 0 21px;
    padding: 22px;
    border-radius: 5px;
    border: solid 1px #e5e5e5;
}

/* IE 8 and below */
.ltie9 #main, 
.ltie9 #callout { 
	border-radius: 0;
	border: 1px solid #e5e5e5;
} 


#callout {
  margin-bottom: 15px;
  padding-bottom: 12px;
  background: url(../images/bg-callout.gif) no-repeat left top;
}

#page-footer {
	margin: 0 0 20px 0;
 	padding: 0 10px 20px 10px;
}



/* ------------------------------------------------------------------------------------------------------*/
/* GENERAL TEXT STYLES  ---------------------------------------------------------------------------------*/


/* All general content-based text styles */
																					
h1 {
	font-family: roboto, tahoma, Helvetica, sans-serif;
	font-style: normal;
	font-size: 35px;
	line-height: 38px;
	font-weight: 200;
	padding: 0;
	margin: -3px 0 3px;
	color: #ab499b;
}

h2 {
	font-family: roboto, tahoma, Helvetica, sans-serif;
	font-style: normal;
	font-size: 16px;
	line-height: 20px;	
	font-weight: 600;
	padding: 0;
	margin: 0 0 7px;
	color: #008bbf;
	letter-spacing: .05em;
}

p {
	font-family: roboto, Arial, Helvetica, sans-serif;
	font-style: normal;
	font-size: 14px;
	line-height: 19px;	
	font-weight: 400;
	margin: 0 0 15px 0;
	color: #87888b;
}

small {
  font-family: roboto, Arial, Helvetica, sans-serif;
 font-style: normal;
  font-size: 12px;
  line-height: 14px;	
  font-weight: 400;
  margin: 0 0 15px 0;
  color: #87888b;
}

a:link {
    color: #007DA3;
    text-decoration: none;
}
a:visited {
    color: #007DA3;
    text-decoration: none;
}
a:hover {
    color: #007DA3;
    text-decoration: underline;
}
a:active {
    color: #007DA3;
    text-decoration: underline;
}


/* Button styles */

a.button {
  border: 0;
	padding: 9px 12px 7px 12px;
	margin: 8px 0 0 0;
	font-family:  roboto, tahoma, Helvetica, sans-serif;
	font-style: normal;
    font-size: 13px;
    line-height: 13px;	
    font-weight: 600;
	color: #fff;
	letter-spacing: .05em;
	cursor: pointer;
	text-shadow: 0 1px 2px #579b62;	
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	-moz-box-shadow: 0 2px 4px #c1c1c1;
	-webkit-box-shadow: 0 2px 4px #c1c1c1;
	box-shadow: 0 2px 4px #c1c1c1;
	background: #7baf68; /* Old browsers */
	/* IE9 SVG, needs conditional override of 'filter' to 'none' */
	background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2FhY2M3MSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM3YmFmNjgiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
	background: -moz-linear-gradient(top,  #aacc71 0%, #7baf68 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#aacc71), color-stop(100%,#7baf68)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #aacc71 0%,#7baf68 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #aacc71 0%,#7baf68 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #aacc71 0%,#7baf68 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #aacc71 0%,#7baf68 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#aacc71', endColorstr='#7baf68',GradientType=0 ); /* IE6-8 */
}

a.button:link			{ color: #fff; text-decoration: none; }
a.button:visited	{ color: #fff; text-decoration: none; }
a.button:hover 		{ color: #fff; background: #7baf68; text-decoration: none; }
a.button:active		{ 
  position: relative;
  top: 1px;
  color: #fff; 
  background: #699c4f; 
  text-decoration: none;
  -moz-box-shadow: 0 0 8px #c1c1c1;
  -webkit-box-shadow: 0 0 8px #c1c1c1;
  box-shadow: 0 1px 2px #c1c1c1;
}

a.button .arrow {
  display: inline-block;
  position: relative;
  top: 2px;
  left: 2px;
  width: 7px;
  height: 13px;
  background-image: url(../images/btn-arrow.png);
}

/* IE 9 and below */
.ltie10 a.button { border-radius: 0; padding-top: 5px; } 

/* IE 8 and below */
.ltie9 a.button { background: #aacc71; }
.ltie9 a.button:hover { background: #7baf68; } 



/* ------------------------------------------------------------------------------------------------------*/
/* BRANDING  ------------------------------------------------------------------------------------------- */


#branding {
  float: left;
}

#branding h1#logo {
  width: 280px;
  height: 153px;
  margin: 19px 0 13px 47px;
  padding: 0 0 14px 0;
  text-indent: -5000px;
  border-bottom: 1px solid #e5e5e5;
  background: url(../images/e-cimpact-logo.gif) no-repeat left top;
}

#branding #site-type {
    margin: 0 0 0 51px;
    font-family: roboto, tahoma, Helvetica, sans-serif;
    font-style: normal;
    font-size: 14px;
    line-height: 16px;	
    font-weight: 800;
    color: #ab499b;
    text-transform: uppercase;
    letter-spacing: .2em;
}

#site-name {
    font-family: roboto, tahoma, Helvetica, sans-serif;
    font-style: normal;
    font-size: 24px;
    line-height: 24px;
    font-weight: 800;
    color: #585858;
    text-transform: uppercase;
    letter-spacing: .075em;
}

.mini-logo {
    padding: 10px 0 10px 0;
    background: url(../images/e-c-impact_mini.png) no-repeat center top; 
    height: 50px;
}


/* ------------------------------------------------------------------------------------------------------*/
/* LOG-IN FORM  ---------------------------------------------------------------------------------------- */


.login {
  margin: 0;
  padding: 5px;
}

p.form-instructions {
  margin: 0 0 13px;
}

fieldset { position: relative; }

.field-container { position: relative; }

input[type="text"],
input[type="password"] {
    width: 294px;
    background-color: #fff;
    border: 1px solid #bfc0c2 !important;
    padding: 7px 7px 6px 7px !important;
    font-family: roboto, tahoma, Helvetica, sans-serif;
    font-style: normal;
    font-size: 13px;
    line-height: 13px;
    font-weight: 400;
    color: #000;
    /*color: #bfc0c2;*/
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}
input:focus { }

.primary-button {
    display: inline-block;
    margin: 5px;
    padding: 10px 26px;
    border-radius: 5px;
    color: #FFF !important;
    background-color: #AB4A9C;
    font: 700 15px roboto, tahoma, Helvetica, sans-serif;
    text-decoration: none !important;
    border: none;
    cursor: pointer;
}

.primary-button:active {
    background-color: #f3bbea;
    border-color: #f3bbea;
    color: #AB4A9C;
}


label { 
    position: absolute;
    top: 9px;
    left: 85px;
    z-index: 5;
    font-family: roboto, tahoma, Helvetica, sans-serif;
    font-style: normal;
    font-size: 15px;
    line-height: 15px;	
    font-weight: 400;
    color: #bfc0c2;
}


/* Feedback */

p.feedback {
    margin: 0 0 20px;
    padding: 10px 10px 8px 35px;
    font-family: roboto, tahoma, Helvetica, sans-serif;
    font-style: normal;
    font-size: 14px;
    line-height: 18px;	
    font-weight: 600;
}

.feedback.error { 
  color: #b63740;
  background: url(../images/icon-error.png) no-repeat 7px 7px #fce8e8;
}

.feedback.success { 
  color: #699c4f;
  background: url(../images/icon-success.png) no-repeat 7px 7px #eaf4db;
}

input[type="text"].error,
input[type="file"].error, 
textarea.error, 
select.error {
  background: rgba(255, 0, 0, 0.15);
}



/* ------------------------------------------------------------------------------------------------------*/
/* CALLOUT  -------------------------------------------------------------------------------------------- */


#callout-header {
  float: left;
  width: 320px;
  margin: 6px 0 0 48px;
}

#callout-content {
  float: right;
  width: 468px;
  padding: 2px 40px 0 0;
}

#errorSummary a {
    color: #000;
    padding-left: 12px;
}


