/* =General
---------------------- 
	General Styles applied to 'normalize' things
	Notes:
		EM styling generally following (http://www.clagnut.com/blog/348/) from this point 10px=1em, 11px=1.1em, etc
---------------------- */
html {
	padding: 0;
	margin: 0;
	font-size: 100%; /* ensures font consistency across browsers */
	height: 100%;
}
body {
	padding: 0;
	margin: 0;
	font-size: 62.5%; /* correct value for IE6 */
	line-height: 1.5;
	background:url('../images/background.gif') repeat-x #ECF2F2;
	color: #221E1F;
	text-align: center;/* fix IE5 bug that doesn't honor margin auto */
	font-family: Arial, Verdana, sans-serif;
	height: 100%;
}
html > body {
	font-size: 10px; /* correct value for non-IE6 browsers */
	font-size:11px;
}
p {
	padding: 0;
	margin: 0 0 1em 0;
	line-height: 1.8em;
	xcolor: #221E1F;
}

INPUT, SELECT, TH, TD {font-size: 1em}
H1 {font-size: 2.4em}  /* displayed at 24px */
H2 {font-size: 1.8em}  /* displayed at 18px */
H3 {
	font-size: 1em;
	margin: 0;
	color:#999999;
	text-transform:uppercase;
}
H4 {
	font-size: 1.2em;
	color: #555E90;
	margin: 0 0 1em 0;
	text-transform:uppercase;
}
H5 {
	font-size: 1em;
	color:#559CBE;
	margin: 0 0 0.5em 0;
	text-transform:uppercase;
}
H6 {
	font-size: 1em;
	margin: 0;
	color:#559CBE;
}
.blue {color:#559CBE;}
.gray {color:#999999;}
img, a img {
	border: none;
}

/* =Master
---------------------- 
	Master Container
	Notes:
		margin: 0px auto; centers the container horizontally except in IE5, which is fixed in the body tag
---------------------- */
#container {
	position: relative;
	margin: 0px auto;
	padding: 0 7px;
	width: 668px;
	text-align: left; /* unfix all other browsers from the IE fix in the body tag above */
	height: auto !important; /* for footer-stick */
	height: 100%; /* for footer-stick */
	min-height: 100%; /* for footer-stick */
	background:url('../images/container_background_wide.gif') #AFC9CA;
	border-left:1px solid #80A0A1;
	border-right:1px solid #80A0A1;
}

	/* Skip link(s) */
	#skiplink a {
		position : absolute;
		top : -1000px;
		left : -2000px;
	}
	
	#skiplink a:focus, #skiplink a:active {
		position : absolute;
		margin : 0;
		top : 0;
		left: 0;
		display : block;
		padding : 0;
		background: #000;
		color : #fff;
		font-weight: bold;
	}
	
	#skiplink a:hover { 
	}
		
/* =Branding
----------------------*/
#branding {
	xclear: both;
	width: 100%;
	height: 125px;
	xborder:1px solid orange;
	border-bottom:1px solid #80A0A1;
	background-color:#FFFFFF;
	position:relative;
	
}
.home{background: url("../images/isw_logo.jpg") left top no-repeat;}
.sitemap{background: url("../images/isw_logo.jpg") left top no-repeat;}
.services{	background: url("../images/isw_logo_services.jpg") left top no-repeat;}
.methodology{	background: url("../images/isw_logo_methodology.jpg") left top no-repeat;}
.about{	background: url("../images/isw_logo_about.jpg") left top no-repeat;}
.resources{	background: url("../images/isw_logo_resources.jpg") left top no-repeat;}
.contact{	background: url("../images/isw_logo_contact.jpg") left top no-repeat;}
.faq{	background: url("../images/isw_logo_faq.jpg") left top no-repeat;}

	#branding-logo {
		cursor: pointer;
		width:270px;
		height:60px;
		margin: 0;
		padding: 0;
		border:0px solid red;
		clear:both;
	}
		#branding-logo h1 {
			margin: 0;
			text-indent: -5000px;
			overflow: hidden;
			width: 100%;
			height: 100%;
			position:relative;
			float:left;
			margin: 0;
			padding: 0; /* Neutralize h1's default behavior */
		}
			#branding-logo h1 a {
				display: block;
				width: 100%;
				height: 100%;
			}
	
	#branding-tagline {
		display: block;
		position:relative;
		width: 240px;
		height: 16px;
		margin: 0 0 0 70px;
		padding: 0;
	}
		#branding-tagline h2 {
			text-indent: -5000px;
			overflow: hidden;
			background: url("../images/branding/tagline_whitebg.jpg") left top no-repeat;
			width: 100%;
			height: 100%;
			margin: 0;
			padding:0;
		}
/* =Content
----------------------
	Main Content styles
	Notes:
		font-size: 1em makes the text inherit size from #container, and expandable in IE
		Remember: The font is inherited, so some math will be necessary to size children up or down correctly
---------------------- */
#content {
	xheight: auto !important; /* for footer-stick */
	height: 100%; /* for footer-stick */
	xmin-height: 100%; /* for footer-stick */
}
#content-main {
	background:#ffffff;
	height: auto !important; /* for footer-stick */
	height: 100%; /* for footer-stick */
	min-height: 100%; /* for footer-stick */
	border-bottom:0px solid green;
	padding:15px 15px 0px 84px;
}
#content-main.home {
	background-color:#51325B;
	color:#FFFFFF;
	color:#A899AD;
	border-bottom:1px solid #80A0A1;
}
#content-main.home.purple {
	background-color:#0066CC;
}
#content-main.home .twoColumnLeft{
	float:left;
	font-size:1.2em;
	font-size:1.0em;
}

/* =Multicol
----------------------
	Multi-Column Content styles
	Notes:
		This is ONLY for content text. Navigation that goes on the left as a "column" is part of #nav-section
		If you need "pixel-perfect", you'll have to stop using percentages and use actual pixels
---------------------- */
#content-main div.twoColumnLayout {
	xwidth: 47%;
	float: left;
	display: inline; /* Fix IE double-margin bug, Fx ignores it */
	clear: both;
}
#content-main .twoColumnLeft {
	margin: 0 0 20px 0;
	float: left;
	clear: none;
	display: inline;
	width: 329px;
	padding: 0 20px 0 0;
	border-bottom:0px solid red;
}
#content-main .twoColumnLeft ul, li {
	margin: 0;
	padding: 0;
	list-style-type:none;
}
#content-main .twoColumnLeft ul{
	display:block;
	clear:both;
	margin-bottom:1em;
}
#content-main .twoColumnLeft li {
	display: block;
	clear: left;
	padding: 0 0 0 12px;
	line-height:1.8em;
	background: url("../images/bullet.gif") left 0.55em no-repeat;
}
#content-main .twoColumnRight {
	float: right;
	clear: right;
	width: 220px;
	padding:0px;
	margin: 0;
	margin-bottom:20px;
	border-bottom:0px solid blue;
	display:block;
}
#content-main.home .twoColumnRighthome {
	width: 220px;
	padding:0px;
	margin: 0;
	margin-bottom:20px;
	border-bottom:0px solid blue;
	display:inline;
}
#content-main .twoColumnRight .rightnav {
	background:url('../images/rightnav_topcorners.gif') top left no-repeat #8DB2B3;
	padding:20px 20px 14px 20px;
}
#content-main .twoColumnRight .rightnav ul, #content-main .twoColumnRight .rightnav li {
	list-style-type:none;
	padding:0;
	margin:0;
} 
#content-main .twoColumnRight .rightnav li {
	list-style-type:none;
	line-height:1.8em;
	background:url('images/') top left no-repeat;
}
#content-main .twoColumnRight .rightnav li a {
	color:#BCD7D8;
	color:#FFFFFF;
	background:url('../images/linkarrow.gif') 0px 4px no-repeat;
	padding-left:8px;
}
#content-main .twoColumnRight .rightnav li a:hover {
	color:#FFFFFF;
	background:url('../images/linkarrow_on.gif') 0px 4px no-repeat;
	text-decoration:underline;
}
#content-main .twoColumnRight .rightnav-bottom {
	height:6px;
	line-height:1px;
	font-size:1px;
	background:url('../images/rightnav_bottomcorners.gif') top left no-repeat #8DB2B3;
	margin:0 0 15px 0;
	padding:0;
}
#content-main .twoColumnRight .rightcallout {
	background:url('../images/rightcallout_topcorners.gif') top left no-repeat #A0A0A0;
	padding:20px 20px 14px 20px;
	color:#333333;
}
#content-main .twoColumnRight .rightcallout .boxtitle{
	font-weight:bold;
	display:block;
	xtext-transform:uppercase;
	color:#FFFFFF;
	margin-bottom:10px;
}
#content-main .twoColumnRight .rightcallout-bottom {
	height:6px;
	line-height:1px;
	font-size:1px;
	background:url('../images/rightcallout_bottomcorners.gif') top left no-repeat #A0A0A0;
	margin:0 0 15px 0;
	padding:0;
}

#content-main.home .twoColumnRighthome .rightnav {
	background:url('../images/rightnav_home_topcorners.gif') top left no-repeat #392340;
	padding:20px 20px 14px 20px;
}

#content-main.home .twoColumnRighthome .rightnav-bottom {
	height:6px;
	line-height:1px;
	font-size:1px;
	background:url('../images/rightnav_home_bottomcorners.gif') top left no-repeat #392340;
	margin:0;
	padding:0;
}
#content-main.home .twoColumnRighthome .updates {
	background:url('../images/rightnav_home_topcorners.gif') top left no-repeat #392340;
	margin-top:0px;
	padding:16px 20px 14px 20px;
}
#content-main.home .twoColumnRighthome .updates h4 {
	color:#FFFFFF;
	font-size:11px;
}
#content-main.home .twoColumnRighthome .updates-bottom {
	height:6px;
	line-height:1px;
	font-size:1px;
	background:url('../images/rightnav_home_bottomcorners.gif') top left no-repeat #392340;
	margin:0;
	padding:0;
}
#content-main .twoColumnRight .updates a {
	color:#BCD7D8;
	color:#FFFFFF;
	background:url('../images/linkarrow.gif') 0px 4px no-repeat;
	padding-left:8px;
}
#content-main .twoColumnRight .updates a:hover {
	color:#FFFFFF;
	background:url('../images/linkarrow_on.gif') 0px 4px no-repeat;
	text-decoration:underline;
}

/*-------------------*/
#content table tr {
	margin:0;
	padding:0;
}
#content table td {
	padding-bottom:1em;
}
#content table td.date {
	padding-right:15px;
}
#content table td.headline a, #content table td.headline a:visited {
	text-decoration:none;
	color:#E4E4E4;
}
#content table td.headline a:hover, #content table td.headline a:active {
	text-decoration:underline;
	color:#FFFFFF;
}
/* =Footer
----------------------
	Credit/footer styles: Usually the copyright/company info
	Notes:
---------------------- */
#footer-container {
	width: 668px;
	clear: both;
	position: relative; /* for footer-stick */
	background-color: #ACADB2;
	margin: -2em auto; /* negative margin makes footer-stick work */
	height: 2em;
	padding: 0 7px;
}
#siteinfo {
	margin: 0 auto; /* negative margin makes footer-stick work */
	font-size: 1.1em;
	color: #6a6a6a;
}
	#siteinfo-legal {
		float: left;
		display: inline;
		padding: 0.5em 5px 0 20px;
		font-size: 0.8em;
		color: #FFFFFF;
	}
	#siteinfo-links {
		float: right;
		display: inline;
		padding: 0.5em 20px 0 5px;
		font-size: 0.8em;
		color: #45494D;
	}
	#siteinfo-links a {
		color: #45494D;
	}
	#siteinfo-links a:hover {
		text-decoration:underline;
	}
	/*
	#siteinfo-terms {
		float: right;
		clear: both;
		display: inline;
		padding: 7px 20px 0 5px;
		width: 50%;
		text-align: right;
	}
	*/

/* =Uni
----------------------
	Universal styles: Styles that apply to elements found throughout the site
	Notes:
		The best example of this is the "clear" div
---------------------- */
a {
	color: #666666;
	text-decoration: none;
}
a.arrowed {
	color:#000000;
	background:url('../images/linkarrow.gif') 0px 4px no-repeat;
	padding-left:8px;
}
a.arrowed:hover {
	color:#999999;
	text-decoration:underline;
}
a.pdf {
	background:url('../images/pdf_icon.gif') 10px 0px no-repeat;
	padding:1px 10px 10px 30px;
}
a.pdf:hover {
	text-decoration:underline;
}
.footnote {
	color:#999999;
	line-height:1.4em;
	border-top:1px dotted #999999;
	padding-top:1em;
}
.clear {
	clear: left;
	/* Try adding any/all of these if clear divs aren't working right:
	height: 1%;
	width: 100%;
	font-size: 1%;
	line-height: 1;
	*/
}
.bold {
	font-weight: bold;
}
.em {
	font-style: italic;
}