/* 
---------------------------------------------------------------------------------------------------------------
OXFAM EDUCATION: MAIN.CSS GLOBAL STYLESHEET
Main structure and core text styles used site-wide.
Author: Eddy Lambert: elambert@oxfam.org.uk
Last update: 03-09-2007
------------------------------------------------------------------------------------------------------------------ */



/* 
---------------------------------------------------------------------------------------------------------------
BROWSER HACKS
To overcome unwelcome browser behaviours and/or version quirks
NB. These hacks are designed to act as a failsafe if new CSS code is added on an ad-hoc basis during life of site
    Do not activate until core site has been fully tested.
------------------------------------------------------------------------------------------------------------------ */

/* Make Firefox measure widths including padding to prevent padded divs exploding beyond specified dimensions */
/* DIV{-moz-box-sizing:border-box;box-sizing:border-box;margin:0;padding: 0;} */




/* 
---------------------------------------------------------------------------------------------------------------
CLASS TO HIDE CONTENT FROM DISPLAY BUT STILL MAKE AVAILABLE TO SCREEN-READERS
Sends links off to far top rather than using display:none in case screenreader ignores display property
------------------------------------------------------------------------------------------------------------------ */

.hidden
{
position:absolute;
left:0px;
top:-500px;
width:1px;
height:1px;
overflow:hidden;
} 




/* 
---------------------------------------------------------------------------------------------------------------
UNIVERSAL BODY STYLES
Core body fonts and link styles
------------------------------------------------------------------------------------------------------------------ */


body {
text-align:center;
font-family: Arial, Verdana, Helvetica, sans-serif;
font-size: 0.8em;
background-image:url(../../images/bg.gif);
background-repeat: repeat-x;
background-position: top;
background-color:#ffffff;
margin:0px;
color:#333333;
}

TD {
text-align:left;
font-family: Arial, Verdana, Helvetica, sans-serif;
font-size: 0.8em;
margin:0px;
color:#333333;
}

.smalltext {
font-family: Arial, Verdana, Helvetica, sans-serif;
font-size: 0.9em;
color:#333333;
}

.smallgrey {
font-family: Arial, Verdana, Helvetica, sans-serif;
color:#666666;
}

.helptext {
font-family: Arial, Verdana, Helvetica, sans-serif;
font-size: 0.9em;
color:#333333;
}
		
a:link, a:visited, a:active {
color: #2B5779;
text-decoration: none;
}

a:hover {
text-decoration: underline;
}

h1 {
font-size: 1.5em;
}
h2 {
font-size: 1.25em;
}
h3 {
font-size: 1.0em;
}


/* 
---------------------------------------------------------------------------------------------------------------
STRUCTURE - CONTAINERS: 
These are the core containing DIVs for the header/3-col/footer layout. Important that these are not padded.  
Padding should be applied only to 'content' DIVs which are defined below                                  
------------------------------------------------------------------------------------------------------------------ */

/* --- Centered wrapper for all header content --- */
#headwrap { 
clear:both;
width:880px; 
margin:0 auto; 
text-align:left; 
} 


.azbox {
background-color:#E1E9EE;
padding:2px;
border-right:1px solid transparent;
float:left;
font-weight:bold;
margin-right:1px;
margin-top:1px;
}

/* --- Main header container --- */
#header {
width:880px;
margin:0 auto; 
height:90px;
padding:0px;
background-color:#ffffff;
text-align:center; 
}

/* --- 32px block for main nav bar --- */
#topmenu {
width:880px;
height: 32px;
margin:0px;
padding:0px;
background-color:#ffffff;
text-align:center; 
}

/* --- Holding container for everything below the header --- */
#pagewrap { 
clear:both;
width:880px; 
margin:0 auto; 
margin-top:20px;
text-align:left; 
} 

/* --- Main header container --- */
#subnav{ 
width:185px; 
float:left; 
margin-right:40px; 
} 

#page{ 
width:430px; 
float:left; 
} 

.bodycopy {
margin-bottom:0px;
line-height: 1.35em;
font-size:1.05em;
}

.bodycopy p {
margin:0px;
margin-top:12px;
}

.bodycopy a {
font-weight:bold;
}


.summary {
margin-top:1px;
margin-bottom:1px;
font-size:1.1em;
line-height: 1.15em;
background-color: #7392A9;
color:#ffffff;
}

.summary p {
margin:0px;
padding:8px;
}


#related{ 
width:205px; 
float:right; 
margin-left:10px; 
} 

.related-block{ 
margin-bottom:20px; 
} 

#relatedhome{ 
width:205px; 
float:right; 
margin-left:10px; 
} 



#footerwrap { 
text-align:center; 
background:#7E8A93;
width:100%;
min-height:100px;
margin-top:60px;
} 

#footer {
width:880px;
padding:12px;
margin:0 auto; 
text-align:center; 
background-color:#7E8A93;
}



/* 
------------------------------------------------------------------------------------------------------------------
STRUCTURE: SUB-CONTAINERS
These are the DIVs which break the main containers into smaller parts.  Again, avoid padding these.                                  
------------------------------------------------------------------------------------------------------------------ */

#whitespace {
clear:both;
margin-top:20px;
}


#logo{ 
width:645px; 
height:90px;
padding:0px;
float:left;
text-align:left; 
background-color:#ffffff;
} 

#topmenu-main{ 
width:675px; 
float:left;
text-align:left; 
background-color:#E1E9EE;
margin:0px;
padding:0px;
color: White;
font-size:120%;
} 

#topmenu-sub { 
width:205px; 
height:20px;
float:right;
text-align:right; 
background-color:#E1E9EE;
margin:0px;
padding:0px;
color: White;
font-size:100%;
margin-top:10px;
} 

#search{ 
width:205px; 
background-color:#ffffff;
margin:0px;
margin-top:33px;
position:relative; 
left:7px; 
float:right;
} 

.leftfeatureblock{ 
width:215px;
float:left; 
background: #E1E9EE;
} 

.rightfeatureblock{ 
width:214px;
float:right; 
background: #E1E9EE;
} 

.leftsubblock{ 
margin-top:20px;
width:92px;
float:left; 
background: #E1E9EE;
} 

.rightsubblock{ 
margin-top:20px;
width:92px;
float:right; 
background: #E1E9EE;
} 

.subicons {
margin-top:40px;
}
.subicons p {
clear:both;
font-size:0.9em;
margin:0px;
padding:0px;
padding-top:5px;
padding-bottom:5px;
border-bottom: 1px dashed #A7C3D8;
}


/* 
------------------------------------------------------------------------------------------------------------------
CONTENT
Definitions for content areas.  
------------------------------------------------------------------------------------------------------------------ */


/* ----- Main page header ----- */

#page h1 {
font-size:1.5em;
color:white;
font-weight:bold;
margin:0px;
margin-bottom:1px;
/* background-image:url(../../images/blue_corner.gif); */
/* background-repeat: no-repeat;*/
/* background-position: top right;*/
background-color: #41749B;
padding:4px;
padding-left:8px;
}



/* ----- Standard coloured block header for content boxes ----- */

h3 {
width:100%;
color:white;
font-weight:bold;
margin:0px;
margin-bottom:1px;
/* background-image:url(../../images/blue_corner.gif); */
/* background-repeat: no-repeat; */
/* background-position: top right; */
background-color: #41749B;
font-size: 1.1em;
/* border-top: 4px solid #6889A2; */
}

h3 p {
padding:3px;
margin:0px;
}


#relatedhome h3 {
font-size: 1.0em;
}




/* ----- Slightly smaller coloured block header for content boxes ----- */

h4 {
width:100%;
color:white;
font-weight:bold;
margin:0px;
margin-bottom:1px;
/* background-image:url(../../images/blue_corner.gif); */
/* background-repeat: no-repeat; */
/* background-position: top right; */
background-color: #41749B;
font-size: 1.0em;
}

h4 p {
padding:3px;
margin:0px;
}


#related h4 {
font-size: 0.9em;
background-color: #7392A9;
}

#related h4 p {
padding:2px;
padding-left:4px;
margin:0px;
}

#subnav h4 {
font-size: 0.9em;
background-color: #7392A9;
}

#subnav h4 p {
padding:3px;
margin:0px;
}


/* ----- Internal page sub-header ----- */

h5 {
letter-spacing:0.5px;
width:100%;
font-weight:bold;
margin:0px;
margin-top:10px;
margin-bottom:10px;
font-size: 1.1em;
border-bottom: 1px dashed #A7C3D8;
}




/* ----- Emergency header ----- */

.emergencyheader {
width:100%;
color:white;
font-weight:bold;
margin:0px;
margin-bottom:1px;
/* background-image:url(../../images/blue_corner.gif); */
/* background-repeat: no-repeat; */
/* background-position: top right; */
background-color: #9C2E22;
font-size: 1.1em;
/* border-top: 4px solid #6889A2; */
}

.emergencyheader p {
padding:3px;
margin:0px;
}




/* ----- Resource link box ----- */

.resourcebox {
clear:both;
width:100%;
margin:0px;
padding:0px;
border-top: 1px dashed #A7C3D8;
font-size:0.9em;
margin-top:8px;

}

.resourcebox p {
padding:4px;
padding-left:0px;
margin:0px;
margin-top:6px;
}


.resourcebox a {
font-weight:bold;
}


/* ---- Category index ---- */

.catbox {
clear:both;
width:100%;
margin:0px;
padding:0px;
border-bottom: 1px dashed #A7C3D8;
font-size:0.9em;
}

.catbox p {
padding:0px;
padding-top:3px;
padding-bottom:3px;
margin:0px;
}


.catbox a {
font-weight:bold;
}



/* ----- Generic shaded content box ----- */

.blockbox {
clear:both;
width:100%;
margin:0px;
padding:0px;
border-bottom: 1px solid #ffffff;
background: #E1E9EE;
font-size:0.9em;
}

.blockbox p {
padding:4px;
margin:0px;
}



.files {
padding:0;
margin:0;
list-style: none;
font-size:0.9em;
}

.files li  {
padding:4px;
padding-left: 22px;
padding-bottom:8px;
padding-top:8px;
border-bottom: 1px dashed #A7C3D8;
}

.files li a {
font-weight:bold;
}

.files li.doc  {
background-image: url(../../images/icons/doc.gif); background-repeat: no-repeat; background-position: 0 .5em;
}

.files li.film  {
background-image: url(../../images/icons/film.gif); background-repeat: no-repeat; background-position: 0 .5em;
}

.files li.music  {
background-image: url(../../images/icons/music.gif); background-repeat: no-repeat; background-position: 0 .5em;
}

.files li.pdf  {
background-image: url(../../images/icons/pdf.gif); background-repeat: no-repeat; background-position: 0 .5em;
}

.files li.picture  {
background-image: url(../../images/icons/picture.gif); background-repeat: no-repeat; background-position: 0 .5em;
}

.files li.ppt  {
background-image: url(../../images/icons/ppt.gif); background-repeat: no-repeat; background-position: 0 .5em;
}

.files li.txt  {
background-image: url(../../images/icons/txt.gif); background-repeat: no-repeat; background-position: 0 .5em;
}

.files li.xls  {
background-image: url(../../images/icons/xls.gif); background-repeat: no-repeat; background-position: 0 .5em;
}

.files li.zip  {
background-image: url(../../images/icons/zip.gif); background-repeat: no-repeat; background-position: 0 .5em;
}







/* ----- Variant for 'feature' boxes (often with thumbnails) which sets a specific min-height of 75px for
	 Firefox which does not include the thumbnail height in it's calculation of reserved space        ----- */


.featurebox {
clear:both;
width:100%;
margin:0px;
padding:0px;
border-bottom: 1px solid #ffffff;
background: #E1E9EE;
font-size:0.85em;
min-height:75px;
}

.featurebox p {
padding:4px;
line-height:1.2em;
margin:0px;

}

/* ----- Variant for 'feature' boxes for full page span emergencies box ----- */


.emergencyfeaturebox {
clear:both;
width:100%;
margin:0px;
padding:0px;
border-bottom: 1px solid #ffffff;
background: #F2F0CB;
font-size:0.85em;
min-height:75px;
}

.emergencyfeaturebox p {
padding:4px;
line-height:1.2em;
margin:0px;

}

.emergencyfeaturebox a:link, .emergencyfeaturebox a:visited, .emergencyfeaturebox a:active {
color: #9C2E22;
}

.emergencyfeaturebox2 {
clear:both;
width:100%;
margin:0px;
padding:0px;
border-bottom: 1px solid #ffffff;
background: #F2F0CB;
font-size:0.85em;
}

.emergencyfeaturebox2 p {
padding:4px;
line-height:1.2em;
margin:0px;

}

.emergencyfeaturebox2 a:link, .emergencyfeaturebox a:visited, .emergencyfeaturebox a:active {
color: #9C2E22;
}

.topresourcesbox {
clear:both;
width:100%;
margin:0px;
padding:0px;
border-bottom: 1px solid #ffffff;
background: #E1E9EE;
font-size:0.85em;
min-height:60px;
}

.topresourcesbox p {
padding:2px;
line-height:1.2em;
margin:0px;

}



/* ----- Variant for 'related' boxes (often with thumbnails) which may need separate styling at some point        ----- */



.relatedbox {
clear:both;
width:100%;
margin:0px;
padding:0px;
margin-bottom: 1px;
background: transparent;
font-size:0.9em;
border-bottom: 1px dashed #A7C3D8}

.relatedbox p {
padding:1px;
padding-top:6px;
padding-bottom:6px;
line-height:1.2em;
margin:0px;

}


/* ----- Footer areas for copyright message and footer links ----- */

#copyright {
color:white;
display:inline;
width:250px;
text-align:left;
font-size:0.85em;
float:left;
}

#footerlinks {
margin-top:10px;
color:white;
display:inline;
float:right;
text-align:right;
font-size:0.85em;
}



/* 
------------------------------------------------------------------------------------------------------------------
SPECIFIC STYLES 
Individual classes for specific effects
------------------------------------------------------------------------------------------------------------------ */


/* ----- Search form fields ----- */

.searchform p {display:inline; margin:0px;}
.searchform label {display:none;}
.searchform input {margin:0px; padding:2px 2px; }
.searchform select {min-width:156px; width:auto; padding:1px;}
.searchform input, .searchform select {display:inline; vertical-align:middle; background:#fff; border:solid 1px #7f9db9;margin:0px;}
input.btn {padding:0px; margin:0px; border:0 !important; width:auto !important;}



/* ----- Image definitions for thumbnails (both left and right floats) and 'top' - all of which include white divide line----- */

.thumbnail-left {
padding:0px;
margin:0px;
margin-right:5px;
float:left;
border-right: 1px solid #ffffff;
}

.thumbnail-right {
padding:0px;
margin:0px;
margin-left:5px;
margin-right:5px;
margin-top:5px;
float:right;
border-left: 1px solid #ffffff;
}

.thumbnail-topresourceright {
padding:0px;
margin:0px;
margin-left:5px;
float:right;
border-left: 1px solid #ffffff;
}

.thumbnail-top {
padding:0px;
margin:0px;
border-bottom: 1px solid #ffffff;
}



/* ----- Special style for links in areas where they are undelimited to add a bit of extra padding ----- */

.menulinks a {
padding-right: 0.5em;
}




/* ----- Footer links and a special footer <p> with less spacing  ----- */

#footer a {
color: #ffffff;
text-decoration: none;
}

#footer a:hover {
text-decoration: underline;
background-color: transparent;
}

#footer p {
margin:0px;
margin-top:3px;
}





/* 
------------------------------------------------------------------------------------------------------------------
TOP NAVIGATION
List-based top nav
------------------------------------------------------------------------------------------------------------------ */


#topmenu-main #mainmenu-container ul,#topmenu-sub #mainmenu-container ul
{
padding: 0;
margin: 0;
background-color: #ffffff;
float: left;
width: 100%;
font-family: arial, helvetica, sans-serif;
}


#topmenu-main #mainmenu-container ul li, #topmenu-sub #mainmenu-container ul li
{  
display: inline;
}

#topmenu-main #mainmenu-container ul li a
{
padding: 7px;
border-right: 1px solid #ffffff;
background-color: #E1E9EE;
color: #1865A3;
font-weight:bold;
text-decoration: none;
float: left;
}


#topmenu-sub #mainmenu-container ul li a
{
padding: 3px;
padding-right:4px;
padding-left:4px;
border-left: 5px solid #ffffff;
background-color: #E1E9EE;
color: #41749B;
font-weight:normal;
text-decoration: none;
float: right;
}


#topmenu-main #mainmenu-container ul li a:hover,#topmenu-sub #mainmenu-container ul li a:hover
{
background-color: #A7C3D8;
color: #ffffff;
}



#topmenu-main #mainmenu-container li a#current,#topmenu-sub #mainmenu-container li a#current
{
background-color:#41749B;
color:white;
}