/* - euro-agency.css - */
@media screen {
/* text sizing http://24ways.org/2006/compose-to-a-vertical-rhythm */

body /* for ie6 and below */ { font-size: 75%; } 
html>body /* for all other browsers */ { font-size: 12px;} 
p, h2, h3, h4, h5, h6, ul, ol, dl, form, blockquote /* = 6px of spacing between lines making 21px total line-height */ { line-height: 1.75em; }
p, h2, h3, h4, h5, h6, ul, ol, dl, form, blockquote /* set margins to preserve 21px line-height by matching line-height */ { font-size: 1em; margin-top: 1.75em; margin-bottom: 1.75em; }

/* fonts */
body { font-family: Verdana, Arial; background: #eee; color: #333333 }
a { text-decoration: none; border-bottom: 1px solid #a9a9f2; color: #4b4bc2}
h2 a, h3 a { color: #32327f; border: 0 }
#content a:hover { text-decoration: none; border-bottom: 1px solid #32327f; color: #32327f }
:focus {
	outline: 1px solid #ffcb05; background: #f8edc2;
}

#content h1  /* set as 1.75em as 21-12 = 1.75. Line-height is line-height divided by font-size 21-21=1.0em  */ { font-size: 1.75em; font-family: Tahoma; font-weight: normal; line-height: 1.0em;margin-top: 1.0em;   margin-bottom: 1.0em;  color: #32327f; }
h2 {  font-family: Tahoma; font-size: 1.5em; font-weight: normal; line-height: 1.166em; margin-top: 1.166em; margin-bottom: 1.166em; color: #32327f  }
h3 /* set as 18px */ { font-family: Tahoma; font-size: 1.166em; font-weight: normal; line-height: 1.5em; margin-top: 1.5em; margin-bottom: 1.5em; color: #333333; font-weight: bold }
h4 { font-family: Tahoma; font-size: 1.166em; font-weight: normal; line-height: 1.5em; margin-top: 1.5em; margin-bottom: 1.5em; color: #333333; font-weight: bold }
h5, h6 /* set as base size */ {  font-size: 1em; font-family: Tahoma;  }

/* header */
#header { background: #32327f; position: relative; height: 130px; border-bottom: 5px solid #ffcb05}

/* header logo */
#header h1, #header p { margin: 0 0 0 50%; position: relative; left: -256px; top: 15px; width: 512px; }
#header h1 span, #header p span { background: url(euroagency-logo.png) no-repeat;  width: 512px; height: 69px; position: absolute;  z-index: 1; margin-top: 0px;  }
#header h1 a, #header p a { color: white; }
#header h1 a:focus span, #header p a:focus span { outline: 1px solid #ffcb05;  } 

/* main navigation  */
#header ul#main-navigation { width: 940px; margin: 0 0 0 50%; background: #1e1e41 url(nav-back.png) repeat-x bottom left; left: -470px; height: 35px; overflow: hidden; position: absolute; bottom: 0; font-size: 90% }
#header ul#main-navigation li { float: left;  }
#header ul#main-navigation li a { color: white; height: 35px }
#header ul#main-navigation a span { background-position: top left; position: absolute; z-index: 1; left: 0; top: 0; height: 35px;   }
#header ul#main-navigation a:hover span, #header ul#main-navigation a:focus span  { background-position: bottom left;  } 

#header ul#main-navigation a#on:hover span { background-position: top left; }



#index_html-nav { position: absolute;left: 0 }
#index_html-nav a {  width: 55px; background-image: url(nav-home.png);   }
#index_html-nav a span { background-image: url(nav-home.png); width: 55px;  }
#index_html-nav a#on span {  background-image: url(nav-home-on.png);   }


#about-us-nav { position: absolute; left: 55px; }
#about-us-nav a {  width: 75px; background-image: url(nav-about.png);    }
#about-us-nav a span { background-image: url(nav-about.png); width: 75px;  }
#about-us-nav a#on span {  background-image: url(nav-about-on.png);   }


#agency-projects-nav { position: absolute; left: 130px }
#agency-projects-nav a { width: 114px; background-image: url(nav-projects.png);    }
#agency-projects-nav a span { background-image: url(nav-projects.png); width: 114px;   }
#agency-projects-nav a#on span { background-image: url(nav-projects-on.png);    }


#country-information-nav { position: absolute; left: 244px }
#country-information-nav a {   width: 142px; background-image: url(nav-country.png);    }
#country-information-nav a span { background-image: url(nav-country.png); width: 142px;   }
#country-information-nav a#on span { background-image: url(nav-country-on.png);   }


#publications-nav { position: absolute; left: 386px }
#publications-nav a { width: 92px; background-image: url(nav-publications.png);    }
#publications-nav a span { background-image: url(nav-publications.png);  width: 92px;   }
#publications-nav a#on span { background-image: url(nav-publications-on.png);   }


#news-nav { position: absolute; left: 478px }
#news-nav a {   width: 53px; background-image: url(nav-news.png);    }
#news-nav a span { background-image: url(nav-news.png);  width: 53px; }
#news-nav a#on span { background-image: url(nav-news-on.png);   }


#help-nav { position: absolute; left: 531px }
#help-nav a {   width: 48px; background-image: url(nav-help.png);    }
#help-nav a span { background-image: url(nav-help.png); width: 48px;   }
#help-nav a#on span { background-image: url(nav-help-on.png); }


/* header search */
#header ul#main-navigation li#search-position { float: right; position: relative; color: white; top: 4px; right: 9px }
#header ul#main-navigation li#search-position input.button { color: white; position: relative; top:5px; left: 3px }
#header #search-box { width: 230px }
#header form { margin: 0; padding: 0  }

/* content */
#wrapper {  background: white url(content-back.png) repeat-x; padding-top: 1.75em;     }
#content { width: 940px;  margin: 0 auto;  padding: 0; background: white; overflow: hidden;   }

/* right column */
#right-col { float: right;  width: 300px; margin-bottom: 1em; }
#right-col h2, #right-col h3 { padding-left: 1.0em;   }
#right-col p, #right-col ul  { padding: 0 1.75em; 	 }
#homepage-country-nav { background: #e1e8fb; /* to contain and match intro bottom and top border  */border-top: 1px solid white; border-bottom: 1px solid white;  }
#right-col ul#country-list-one { width: 40%; float: left; margin-top: 0; position: relative;}
#right-col ul#country-list-one a {  }
#right-col ul#country-list-two {   margin-left: 45%;  }
 /*#right-col ul a span { font-size: 0.916em;   }*/
/* left column */
#left-col { width: 620px; float: left;  }

/* intro */
#intro {background: #333280 url(webpic09.jpg) no-repeat left top;  color: white; padding: 0 0 0 300px; /* margin: 0;*/ border-top: 1px solid white;   border-bottom: 1px solid white; }
#intro p { padding: 0 1.5em; font-size: 1.166em; line-height: 1.5em; margin: 1.5em 0; }
#intro a, #intro a:hover { color: #ffcb03; font-weight: bold; border-color: #96836a }


#news { clear: both; position: relative; top: -1px; overflow: hidden;   }
/* news */
#news img { float: left; border: 1px solid #ccc; padding: 2px }
#news p { 	margin-left: 0px;	padding-left: 0em;	position: relative;	top: -1.75em	}
#left-col #news li { width: 300px; float: left; position: relative;  margin: 0; padding: 0; background: none }
#news h2 { font-family: Tahoma; font-weight: normal;  color: #32327f;  }
#news h2 a { border: 0; color: #32327f; }
#news a.rss-link { float: right;  line-height: 1.75em; position: relative; top: 1.75em;  background: url(rss.png) no-repeat right center; padding-right: 20px }
#news #second-news-item img  { margin-left: 1.5em }
#news #second-news-item p { padding-left: 1.75em; }
/* #news p.no-news-image  { margin-left: 0; padding-left: 0;} */
#news #second-news-item p.no-news-image { padding-left: 1.75em; } 

/* FOOTER */
#footer-wrapper { background: #eee; clear: both; border-top: 1px solid #d2d2d3 }
#footer { width: 940px;  margin: 0 auto;   color: #666666;  }
#footer img { float: right; }
#footer p /* not following vertical rhythm */ { margin-right: 150px; line-height: 1.6em; font-size: 0.916em; margin-top: 1.6em; margin-bottom: 1.6em }

/* breadcrumbs */
p#breadcrumbs {  font-size: 0.916em; margin-top: 1.909em; margin-bottom: 1.909em; line-height: 1.909em; color: #666666  }
p#breadcrumbs a { color: #666666; border-color: #ccc }

/* bulleted lists in content area */
#left-col ul li { margin-left: 1.75em; background: url(bullet.gif) no-repeat 0 8px; padding-left: 1.25em; position: relative;  }
#left-col ol li { margin-left: 3em; padding-left: 0px; list-style: decimal }

/* sidenav and sidenav subnav */
#right-col #sidenav-on a { font-weight: bold; }
#sidenav {  background: #e1e8fb; margin: 0 0 1.75em 0; overflow: hidden; border-top: 1px solid white; border-bottom: 1px solid white; }
#sidenav-subnav { margin: 0}
#sidenav-subnav li { background: url(bullet.gif) no-repeat 0 8px; padding-left: 15px; margin-left: -0.5em }
#right-col #sidenav-on #sidenav-subnav a { font-weight: normal }

/* country selectors */
#country-selector, #page-selector, #language-selector { background: #e1e8fb; overflow: hidden; border-top: 1px solid white;  border-bottom: 1px solid white; position: relative; top: -2px    }
#country-selector form, #page-selector form, #language-selector form { margin: 1.25em; }
#country-selector form select, #page-selector form select, #language-selector form select { /* to override default yellow background */ width: 85%; background: white !important  }
#country-selector form select option, #page-selector form select option, #language-selector form select option { /* to override default yellow background */ background: white !important }

/* contacts definition list */
.contacts-list { overflow: hidden /* to contain */ }
.contacts-list dt { float: left; width: 20%; font-weight: bold }
.contacts-list dd { margin-left: 25%; }

.flag { float: right; position: relative; top: -5.25em  }

/* country pages */
.box { border-top: 1px dashed #ccc; position: relative; top: -1px }
.template-country_home_view h1 { margin-right: 50px } 

/* extra styling for content pages */
#content-page #left-col { position: relative; top: -3.5em; }
#content-page #left-col #breadcrumbs { position: relative;top: 1.4em; border-top: 1px solid white;}

/* table styling */
table.plain { border: 1px solid #ccc;  margin: 0 0 1.5em 1px}
table.plain th { background-color: #eee; padding: 0.5em; border: 1px solid #ccc; }
table.plain td { padding: 0.5em; border: 1px solid #ccc;  }

/* blockquote */
blockquote { margin-left: 1em; padding-left: 1.8em; border-left: 0.2em solid #ffcb05 } 

/* Country Information Map page */

.template-country_information_home_view #left-col
{
    position: relative; top: -3.5em;
}

#country-info-map-selector
{
    position: absolute; left: 1em;
}

.template-country_information_home_view #country-selector
{
    margin-top: 5.25em; position: relative; top: 0;
}

.section-news #content img { float: right; border: 1px solid #ccc; padding: 2px; background: white; margin: 0 0 0.5em 0.5em;}
.img-float-right { float: right; border: 1px solid #ccc; padding: 2px; background: white; margin: 0 0 0.5em 0.5em;}
.img-float-left { float: left; border: 1px solid #ccc; padding: 2px; background: white; margin: 0 0.5em 0.5em 0;}

/* Forms */

form { line-height: 2 }
label { font-weight: bold; margin-top: 0.25em;  }
fieldset { border: 1px dashed #ccc; padding: 1.1em; margin-top: 1.75em; margin-bottom: 1.75em;  }
legend { font-family: Tahoma; font-size: 1.5em; font-weight: normal; line-height: 1.166em; padding: 0.1em; color: #32327f; background: white; }
.buttonstyle { background: #ffcb05; font-family: Tahoma; border: 1px solid #ffcb05;  }

h2 label {font-weight: normal;}

/* Homepage */
#homepage #news img
{
	border:1px solid red;
	float: right; 
	border: 1px solid #ccc; 
	padding: 2px;
	background: white;
	margin: 0 0 1.5em 1.5em;
	clear:left;
}

/* Assessment Resource Guide (ARG) */
table.arg-resource th
{
	text-align:left;
}

.arg-resource ul
{
	margin-top:0em;
	margin-bottom:0em;
}

/* Form controls */
.field
{
	padding-bottom:1em;
}

.arg-resource-description
{
    white-space:pre-line;
}

.archived
{
	color: #666666;
}

#yvbanner {
		display: block;
		position: relative;
		background: #fff url(yv-banner.png) left top no-repeat;
		width: 620px;
		height: 114px;
		margin: 0 0 20px;
		border-top: 1px solid #fff;
		border-bottom: 0px solid #fff;
		text-indent: -999em;
		overflow: hidden;
}
#yvbanner span {
		display: block;
		text-indent: 0;
		position: absolute;
		top: 52px;
		right: 5px;
		color: #fff;
		width: 86px;
		text-align: center;
		font-size: 34px;
		line-height: 34px;
}
#content #yvbanner:hover {
		border-bottom-width: 0;
}

.newsImageContainer {
		float: right;
		width: 200px;
		margin: 0 0 1em 1em;
		padding: 2px;
		border: 1px solid #ccc;
}

.section-news #content .newsImageContainer a {
		display: block;
		border-width: 0;
}

.section-news #content .newsImageContainer img {
		display: block;
		float: none;
		margin: 0;
		border: 0;
		padding: 0;
}

.imagecaption {
		text-align: center;
		background: #eee;
		margin: 0;
		font-size: 11px;
		line-height: 16px;
		padding: 2px 4px 4px;
}

}