@charset "UTF-8";

/* CSS Document */

/***** html5 display rule *****/
article, aside, canvas, details, figcaption, figure, footer, header, hgroup, nav, menu, nav, section, summary {
	display: block;
}

body {
	text-align: center; /*centers container in IE browsers*/
}

#container {
text-align: left /*because body tag is text-align: center in order to center container in IE browsers*/
}

/* links 
--------------------------------------------------------------------------------*/

a {
	color: #4F5985;
	text-decoration: none;
}
a:visited {
	color: #4f5985;
}
a:hover {
	color: #F58424;
}

/* header section
--------------------------------------------------------------------------------*/

#header {
	background: #000 url(../_images/fullbanner.jpg) no-repeat left top;
	width: 100%;
}
#branding {
	width: 693px;
	float: left;
}
#branding #mainHeader h1, #branding  #mainHeader h2 {
	top: -10000em;
	display: none;
}
#branding #mainHeader p  {
	left: -10000px;
	display: none;
}

/* utilities are the links that are located in the top right of each page*/
#utilities {
	color: #F3F1E9;
	width: 240px;
	padding: 20px 3px 3px;
	float: right;
	font-size: 0.85em;
	letter-spacing: 0.1em;
}
#utilities a, #utilities a:visited {
	color: #F3F1E9;
}
#utilities a:hover, utilities a:focus {
	color: #6695d1;
}

#utilities ul li {
	list-style-type: none;
	padding-bottom: 5px;
}
#utilities ul.grid_2 , #utilities ul.grid_1{
	margin-top: 1.2em;
}
#utilities ul.grid_2 {
	margin-bottom: 5px;
	padding-left: 20px;
	width: 25%;
}
#utilities ul.grid_1 {
	margin-bottom: 5px;
	width: 50%;
}


/* main navigation
--------------------------------------------------------------------------------*/

#mainNavigation {
	background-image: url(../_images/navback.jpg);
	background-repeat: no-repeat;
	background-position: left top;
	font-size: 0.9em;
	line-height: 1.6em;
	letter-spacing: .1em;
	margin-top: -3.75px;
}
#mainNavigation ul
{
	margin: 0;
	padding: 0;
	list-style-type: none;
	font-size: 100%;
	cursor: default;
	width: auto;
}
#mainNavigation ul li{
	margin: 0;
	padding: 0;
	list-style-type: none;
	position: relative;
	text-align: left;
	cursor: pointer;
	width: auto;
	float: left;
}
#mainNavigation ul li a
{
	display: block;
	cursor: pointer;
	padding: 0.5em 2em 0.5em 0.75em;
	color: #F3F1e9;
	text-decoration: none;
	background-image: url(../_images/nav-divider.png);
	background-repeat: no-repeat;
	background-position: right bottom;
}
#mainNavigation ul a:hover, #mainNavigation ul a:focus
{
	color: #6695d1;
	background-image: url(../_images/nav-divider_hover.png);
}

/* main content - container
--------------------------------------------------------------------------------*/
#mainContent {
	background-color: #000;
	width: 940px;
	margin-left: 10px;
	background-image: url(../_images/mainBackground_sidebar.jpg);
	background-repeat: repeat-y;
	background-position: right bottom;
	margin-top: 20px;
}

#main {
		min-height: 500px;
}

/* secondary navigation
--------------------------------------------------------------------------------*/
#sidebar {
	background-color: #CBC8BD;
	width: 240px;
	float: left;
	margin-left: 10px;
}
#sidebar ul li {
	padding-bottom: 5px;
}
#sidebar .box {
	margin-bottom:0;
}
#secondaryNavigation .AccordionPanel.AccordionPanelOpen .AccordionPanelContent ul.bullets li {
	list-style-type: disc;
	margin-left: 10px;
}

/* about pages secondary navigation 
	--------------------------------------------------------------------------------*/
#aboutNav a , #aboutNav a:visited{
	display: block;
	line-height: 2.5;
	background-color: #595954;
	padding-left: 10px;
	color: #B2CAE8;
}
#aboutNav a:hover , #aboutNav a:focus{
	color: #F58424;
}

#TwitNav {
	border-top: 1px solid black;
	border-bottom: 1px solid grey;
}
#TwitNav a , #TwitNav a:visited{
	display: block;
	line-height: 2.5;
	background: #595954 url(/_images/searchbyClosed.png) no-repeat 5px center;
	padding-left: 10px;
	color: #A5A18C;
	padding-left: 30px;

}
#TwitNav a:hover , #TwitNav a:focus{
	color: #F58424;
}


/* main content - content
	--------------------------------------------------------------------------------*/
#main {
	background: #F3F1E9;
	width: 680px;
	float: left;
	margin-right: 10px;
	margin-bottom: 0px;
}
#noScript {
	background-color: #000;
	padding-top: 10px;
	padding-bottom: 10px;
}
#noScript h1 {
	text-align: center;
	color: #F2F1E9;
}
#main h3, #main h4, #main h5, #main h6, #main p, #main dt, #main dd {
	padding-left: 10px;
	padding-right: 10px;
}

#main p {
	margin-top: 5px;
	padding-bottom: 0px;
}

/**/
#main p.noPaddingBottom {
	margin-bottom: 2px;
}
#main ol {
	padding-left: 10px;
	padding-top: 0px;
	margin-top: -10px;
}
#main ol li {
	padding-left: 5px;
}
#main img.floatRight {
	float: right;
	margin-left: 15px;
	margin-right: 10px;
}

div.column1 {
	width: 320px;
	float: left;
}
div.column2 {
	float: right;
	width: 320px;
}
#main h3 {
	font-weight: bold;
	margin-top: 5px;
}
#main ul {
	padding-left: 20px;
}
#main  dt{
	font-weight: bold;
	margin-top: 12px;
}
#main dd{
	padding-bottom: 3px;
}
#main dd h4 {
}
#main dd h5 {
	font-size: 1em;
	color: #595954;
}
#main dd h6 {
	font-size: 1em;
	color: #333;
}
#main dd ul.bullets {
	margin-bottom: 0px;	
	margin-top:3px;
}

/* Detail pages
-------------------------------------------------------------------------------*/
.updateDate {
	font-style: italic;
	color: #666;
}

article#list {
	
}

article#projDetail {
}

article#readings {
}

article#partList {
	
}

article#agenda {
	
}

article#eventDesc {
	
}

article#staffBio {
	
}



/* lists for projects, conferences & workshops, & publications
-------------------------------------------------------------------------------*/
	/* Instructions on how to use the .links classes
	Most of the information listed on ifpa.org pages is presented in definition lists (<dl> </dl>). <dt> tags define the item (conference name, publication title, etc.), and subsequent <dd> tags are used for additional information such as descriptive text, dates, author names, links, and downloads. Several classes are available to specify how various <dd> text is to be presented. See http://www.ifpa.org/samples/listPages.htm for details.
	 Every list item in a definition list must have a <dd> tag with one of the following classes: 
	.links
	This is used when there is a pdf to download. The code for this would look like:
		<dd class="links"><a href="#" target="_blank">report</a> <span class="parens">(2.65 MB)</span> || <a href="#"> project details</a> </dd>
			Please note the following:
				There is a space before the <span class=”parens”> tag and it is outside of the <a> tag
				There is a space before and after the two vertical lines ( || ) which is also outside of the <a> tag. 
				The download report link is listed first so that it is next to the pdf icon.
	
		--------------------------------------------------------------------------------*/

#main .links {
	margin-bottom: -3px;
	padding-bottom: 5px;
	color: #004FB3;
	line-height: 1.3;
}
#main .links img {
	vertical-align: text-bottom;
	padding-right: 4px;
	padding-left: 3px;
}

/* Focus Navigation */

#policyFocus {
	background-image: url(../_images/policy-globe.png);
	background-repeat: no-repeat;
}
#regionalFocus {
	background-image: url(../_images/regional-globe.png);
	background-repeat: no-repeat;
	background-position: right;
}

#staffFocus {
	background-image: url(../_images/policy-globe.png);
	background-repeat: no-repeat;
}



/* Instructions on how to use the toggle classes
		The show description toggle looks like this:
			<dt class="toggle closed">Description</dt>
              <dd class="description">
                Description for the publication, project, or event goes here
              </dd>.
	.toggle
		Is located in the <dt> tag it is followed by a space and the “closed” class (see next bullet)

	.toggle.closed
		Is located in the <dt> tag after the “toggle” class. Please note that they are both in the same quote
	
	.description
		Is located in the <dd> tag that directly follows <dt class="toggle closed">Description</dt>

Please note that in order for the toggle to work correctly and for the page to look correct when printed, the code needs to appear exactly as it does above. 

	--------------------------------------------------------------------------------*/
#main dt.toggle {
	margin-top: 0px;
}
dt.new {
	background-image: url(../_images/new.png);
	background-repeat: no-repeat;
	background-position: 10px 0px;
	padding-top: 17px;
}
dt.updated {
	background-image: url(../_images/updated.png);
	background-repeat: no-repeat;
	background-position: 10px 0px;
	padding-top: 17px;
}
.toggle {
	background: transparent url(../_images/descriptionHide.png) no-repeat 10px center;
	text-indent: -10000px;
	cursor:pointer;
	line-height: 1.5;
}
.toggle.closed {
	background: transparent url(../_images/descriptionShow.png) no-repeat 10px center;
}
.toggle.focus {
	background: none;
	text-indent: 0px;
}
.hidden {
  display:none;
}
dd.description  {

}
dd.links {
	margin-top:1px;
}
dd.description img {
	margin-right: 10px;
}
dd.extraBottomPadding {
	margin-bottom: 10px;
}

	
/* Miscellaneous classes
		.parens
			This is most often used after a pdf link that states the size of the pdf. It is part of a <span> tag and will most likely look as follows:
				<span class="parens">(2.65 MB)</span>
		
		.superscript
		This is used any time a number is followed by an rd, st, th, etc. For example: 33rd, 22nd. It is part of a span tag and wll mostlikely look as follows: 
				37<span class="superscript">th</span> IFPA-Fletcher Conference on National Security Strategy and Policy: A New Maritime Strategy for 21<span class="superscript">st</span>-Century National Security

	--------------------------------------------------------------------------------*/
.parens {
	font-size: 0.8em;
	color: #595954;
}
.floatLeft {
	float: left;
}
.acronym {
	font-size: 0.95em;	
}
.colon {
	margin-bottom: 2px;	
}
/* footer
-------------------------------------------------------------------------------*/
#footer {
	background-color: #231F20;
	color: #FFF;
}
#footer p {
	padding-left: 10px;
	padding-top: 10px;
	color: #F3F1E9;
	font-size: 0.7em;
	float: left;
	line-height: 1.5;
}
#footer p.floatRight.expandLetterSpace {
	letter-spacing: 0.1em;
	margin-right: 10px;
	clear: right;
	float: right;
	text-align: right;
	margin-bottom: 0px;
}
#footer p.floatRight a {
	color: #6695D1;
}
#footer p.floatRight a:hover {
	color: #F58424;
}

dl#focusNavigation {
	padding-left: 20px;
	padding-right: 20px;
}

#focusNavigation dt {
	font-weight: bold;
	margin-top: 15px;
}

#focusNavigation dd {
	margin-top: 5px;
}

#staffFocus li.heading {
	font-weight: bold;
	margin-bottom: -5px;
}

#staffFocus #researchStaff {
	font-size: .95em;
	margin-top: -10px;
}
	
/*.slideshow {
	width: 650px;	
	height: 390px;
}
.slideshow img {
	padding-right: 15px;	
}
#slideShowStatusTray {
	text-align: center;
	margin-left: 10px;
	margin-right: 10px;
}
#slideShowNavigation {
	text-align: center;
	margin-bottom: 10px;
	padding: 0px;
}
.navButtons {
	margin-top: -50px;
	float: right;
}
.simpleSlideStatus-window {
	text-align: center;
}*/
.alignCenter {
	text-align: center;
}
.alignRight {
	text-align: right;	
}