/*  CSS containing common style rules for the screen layout.
 *
 *  FIX-ME: NN4 doesn't even seen this at the moment because it's scared by 'media' attributes.
 *
 */

body {
  margin: 0;
  padding: 0;
  background-color: #ffffff;
  font-family: "Verdana", "Helvetica", "Arial", sans-serif;
  font-size: 80%;
  color: #505050;
}

img {
  margin: 0;
  padding: 0;
  border: 0;
}

form {
  font-size: 90%;
  margin: 0;
}

table {
  font-size: 100%;
}

abbr {
  cursor: help;
}

p, h1, h2 { margin: 0; } /* Might be able to remove this later; at the moment, without it, the main-rubber-rcap image doesn't extend to the edges of the main div */

/* Link properties: will override these for the crumbtrail, banner and footer later */

a:link, a:visited, a:hover, a:active { text-decoration: none; }

/* textual hyperlink properties based on page class */
.home a:link, .home a:visited { color: #002783; }
.catalogue a:link, .catalogue a:visited,
.multimedia a:link, .multimedia a:visited { color: #f25500; }
.search a:link, .search a:visited,
.resources a:link, .resources a:visited { color: #c50b0c; }
.news a:link, .news a:visited { color: #18ab00; }
.about a:link, .about a:visited { color: #0088f2; }
.order a:link, .order a:visited { color: #9804c1; }
.contact a:link, .contact a:visited { color: #e7007a; }
.notes a:link, .notes a:visited { color: #002783; }


a:hover { color: #ffffff !important; }

.home a:hover { background-color: #002783; }
.catalogue a:hover,
.catalogue a:hover h3,
.multimedia a:hover { background-color: #f25500; }
.search a:hover,
.resources a:hover { background-color: #c50b0c; }
.news a:hover { background-color: #18ab00; }
.about a:hover { background-color: #0088f2; }
.order a:hover { background-color: #9804c1; }
.contact a:hover { background-color: #e7007a; }
.notes a:hover { background-color: #797979; } 



#main p a:link, #main p a:visited,
#main ol a:link, #main ol a:visited,
#main ul a:link, #main ul a:visited,
#main dl a:link, #main dl a:visited { border-bottom: 2px solid; }
#main p a:active, #main p a:hover,
#main ol a:active, #main ol a:hover,
#main ul a:active, #main ul a:hover,
#main dl a:active, #main dl a:hover { border-bottom: none; }

.home a:link, .home a:visited { border-color: #bac5dd !important; }
.catalogue a:link, .catalogue a:visited,
.multimedia a:link, .multimedia a:visited  { border-color: #fbd1ba !important; }
.search a:link, .search a:visited,
.resources a:link, .resources a:visited { border-color: #efbdbd !important; }
.news a:link, .news a:visited { border-color: #c0e8ba !important; }
.about a:link, .about a:visited { border-color: #bae3f7 !important; }
.order a:link, .order a:visited { border-color: #e3bbee !important; }
.contact a:link, .contact a:visited { border-color: #f9badb !important; }
.notes a:link, .notes a:visited { border-color: #dbdbdb !important; }




/* Other properties that change colour depending on page class */
.home h2 em { color: #f25500; }
.catalogue h2 em,
.multimedia h2 em { color: #f25500; }
.search h2 em,
.resources h2 em { color: #c50b0c; }
.news h2 em { color: #18ab00; }
.about h2 em { color: #0088f2; }
.order h2 em { color: #9804c1; }
.contact h2 em { color: #e7007a; }
.notes h2 em { color: #797979; }

/*  Hide content that is intended for screen readers, etc. */
.hidden { display: none; }

/*********************************************************************
 *  banner - Cambridge, ELT, basket, help
 *********************************************************************/

#banner { height: 37px; white-space: nowrap; overflow: hidden; }
#basket a:hover, #basket a:focus, #help a:hover, #help a:focus { background-position: bottom right;  }

#strip { height: 37px; width: 100%; border: 0; }
#block { width: 130px; height: 37px; padding: 0;}
#striptitle { background: top left no-repeat; height: 36px; padding: 0; width: 99%; text-indent: -9999px; font-size: 1px; }
#striptitle p { width: 210px; }

/* For top-right elements, dimension basis: width(#icons) 
 *   width(#icons li) = width(#icons); 
 *   width(#regional-sites) + horiz_padding(#regional-sites) = width(#icons) - sum(width(#icons a))
 */

#icons { padding: 0 0 0 0; margin: 0; width: 326px; height: 37px; }
#icons ul {
  width: 326px;
  padding: 0 4px 0 0; margin: 0;
  float: left;
}

#icons li {
  padding: 0; margin: 0;
  height: 37px;
  list-style: none;
  float: left;
}


#icons a { 
  width: 33px; height: 37px; overflow: hidden;
  padding: 0; margin: 0;
  display: block;
  font-size: 1px;
  text-indent: -9999px;
  text-decoration: none;
  float: left;
}


#regional-sites { width: 260px; height: 37px; background: top right no-repeat; text-align: right; }

/* this is the hyperlink for JS-less browsers */
#regional-sites a { 
 padding: 0 20px 0 0; font-size: 11px;
 text-indent: 0px; width: 240px; 
 font-weight: bold;
 height: 37px; 
 line-height: 34px;
 } 

#regional-sites a:hover { background: none; text-decoration: underline;  }

/* Colour-changing parts in banner are in skin.css. Note: regional-sites also changes on mouse events! */

/* dropdown menu rendered in JS */
#countries { height: 16px; margin: 9px 16px 9px 0; font-size: 11px; padding: 0;} 

#regional-sites optgroup { font-size: 100%; font-style: normal; font-weight: normal;
                           margin-top: 0.3em; padding: 0 0 0.4em 0.4em;
                           border-top: 1px solid #c0c0c0; border-bottom: 1px solid #c0c0c0;
			   background-color: #f0f0f0; color: #000066; }

#regional-sites optgroup.heading { font-weight: bold; text-align: center;
                                   margin-top: 0.3em; padding: 0; border: 0; }

#regional-sites optgroup option { text-align: left; background-color: #ffffff; padding-left: 0.4em; }


/*********************************************************************/
/*********************************************************************/


#main h2, #main th {
  padding: 4px 5px 5px 6px !important;
  margin: 0 -3px 12px -6px;
  background: bottom repeat-x url("../images/h2-bg.gif"); 
}


#main hr {
  clear: both;
  border: 0;
  height: 1px;
  margin: 0 -3px 12px -6px;
  background: center repeat-x url("../images/h2-bg.gif"); 
  overflow: hidden;
}

#main h2 em { font-weight: normal; font-style: normal; }
#main h2 strong { font-weight: normal; font-style: italic; }

#main h3 {
  margin: 0 0 6px 0;
  padding: 5px 0 0 0;
}


#header h1 {
  color: #ffffff;
  padding: 10px 0 0 14px;
  float: left;
}

.home #header h1 { display: none; }



/*
 *  Hide link imploring people to upgrade their browser. 
 */

.no-imported-css { display: none !important; }


/*
 * Related links - define a different trailing bullet for each page class
 * (:hover background colour is set along with all other anchor colours in basic.css)
 *
 */

.related a,
.related-back a {
  display: -moz-inline-box;
  display: inline-block;
  height: 17px !important;
  line-height: 17px !important;
  border-bottom: 0px !important;
}

.related a {
  padding-right: 20px;
  background: top right no-repeat;
}

.related-back a {
  padding-left: 20px;
  background: top left no-repeat;
}

.related a:hover { background-position: bottom right; }
.related-back a:hover { background-position: bottom left; }

.catalogue .related a { background-image: url("../images/catalogue-related.gif"); }
.catalogue .related-back a { background-image: url("../images/catalogue-related-back.gif"); }

.multimedia .related a { background-image: url("../images/catalogue-related.gif"); }
.multimedia .related-back a { background-image: url("../images/catalogue-related-back.gif"); }

.resources .related a { background-image: url("../images/resources-related.gif"); }
.news .related a { background-image: url("../images/news-related.gif"); }
.about .related a { background-image: url("../images/about-related.gif"); }
.order .related a { background-image: url("../images/order-related.gif"); }
.contact .related a { background-image: url("../images/contact-related.gif"); }


#main p.related { font-weight: normal;}
#main h3.related { font-size: 90%; line-height: 1; margin-bottom: 0;}


.home .news-date { padding-left: 2em; font-size: 90%; font-style: italic; }
.news .news-date { float: right; padding-left: 1em;  margin-top: 0.5em; text-align: right; font-size: 85%; font-style: italic; }
.news .floating { margin-right: 6px; margin-top: 4px; float: left; }
.news .box { overflow: hidden; _height: 1%;}




/* Heading styles */

h1 { /* Heading within #header */
  font-size: 150%; 
  font-family: "Helvetica", "Arial", sans-serif;
}
h2, table th {  /* Headings within #main */
  font-size: 100%;
  font-family:  "Trebuchet MS", "Helvetica", "Arial", sans-serif;  
  font-weight: bold;
  color: #000066;
  clear: both; 
}

h3 { /* Subheadings within #main */
  font-size: 110%;
  font-family:  "Trebuchet MS", "Helvetica", "Arial", sans-serif;  
  font-weight: bold;
  color: #000066;
}





/* EXTRA STUFF FOR HOME PAGE */
.home #header { overflow: hidden; }

.home #header table { /* Used for the extra links on the home page */
  width: 100%;
  height: 80px;
}

.home #header a {
  font-family: "Arial", "Helvetica", sans-serif;
  font-weight: bold;
  font-size: 140%;
  display: block;
  overflow: hidden;
  height: 20px;
}

.home #header a span { visibility: hidden; line-height: 20px; width: 90px; }

#header p {
  font-family: "Verdana", "Helvetica", sans-serif;
  font-weight: normal;
  font-size: 85%;
  color: #ffffff;
  margin: 2px 0 0 0;
  line-height: 1.1;
}

/* END EXTRA STUFF */






.home #main h1 {color:#000066; font-size:130%; margin-bottom:15px; margin-top:5px;}

#main p, #main ul, #main ol, #main dl, #main blockquote {
  font-size: 90%;
  line-height: 1.3;
  padding-bottom: 0.8em; /* using 'margin' mars the layout */
  /* clear: both; */
}

#main li { margin-top: 0.4em; }

#main ul, #main ul, #main dl { margin-top: 0.5em; margin-bottom: 0.5em; }

#main dt { margin-left: 1em; }
#main dd { margin-bottom: 0.5em; font-style: italic;}

#main em em { font-style: normal; }

#main .box {
  margin: 0 10% 0.4em 10%;
  padding: 0.4em 1em;
  border: solid 1px #fdeed2;
  background: #fdf5e9;  
}
/* \*/
* html #main .box { margin: 0 4em 0.4em 4em; }
/* */


#footer {
  position: relative;
  font-size: 80%;
  color: #666666;
  padding: 12px 0 12px 4px;
}


#footer a:link, #footer a:visited { 
  color: #666666;
  background: none;
  text-decoration: underline;
}

#footer a:hover, #footer a:active {
  color: #666666 !important;
  text-decoration: none;
}


/* 
 *  Floating divs, all some %age subdivision of the page width.
 *
 *  .catpage:      project and component page content wrappers
 *  .highlights:   home page and catalogue home page
 *  .resourcebox:  resource home page AND NOW ALSO CATALOGUE but with different properties - RENAME CLASS?
 *  .resource: resource 'component' pages 
 *  .projectbox:   contains a project on the uberproject page.  
 */



.projectbox, .catpage, .highlights, .resource  {
  font-size: 90%;
  padding: 0;
  overflow: hidden;
}

.projectbox { float: left; width: 24em; }
.resource { float: left; width:33%;  text-align:center; border:0px solid red;} /*added centering*/

.highlights { float: left; width: 25%;   text-align:center; border:0px solid red;} /*added centering*/

.resources-new {float:left; width:33%; overflow:visible; border:0px solid red; text-align:center;} /*new style JC*/

.resources-new h3 {margin-right: 1em !important; font-size: 100%; line-height:100%; white-space: normal;}

.resources-new a:hover { background: none; } /* Gecko needs this; don't know where it's getting the padding from, though. */ 
.resources-new a img { border: 2px solid #ffffff; } 
.home .resources-new a:hover img { border-color: #002783 !important; }


.resources .resourcebox { float: left; width: 25%;}
.catalogue .resourcebox { float: left; width: 20%;}

#main .projectbox h3, #main .highlights h3, .resources-new h3, #main .resource h3 { 
  font-family: "Helvetica", "Arial", sans-serif;
  color: #707070;

}

#main .catpage h3 { 
  font-family: "Helvetica", "Arial", sans-serif;
  font-size: 120%;
  padding-top: 0;
  margin-right: 1em;
  color: #000066;
}

#main .catpage img { float: left; margin-right: 1em; }

#main .catpage p,
#main .catpage ul { font-size: 100%;}

#main .catpage ul { margin-left: 0; padding-left: 0;}
#main .catpage li { margin-left: 2em; padding-bottom: 0.5em; }

#main .catpage p.author { color: #000066; font-style: italic; font-size: 100%; }
#main .catpage p.level { color: #000066; font-size: 90%; }


.attributes,
.minilinks {
  background-color: #f8f8f8;
  padding: 2px 0 2px 10px;
  font-size: 90%;
  clear: right;
  float: right;
  width: 130px;
  text-align: left;
  border: 1px solid #f0f0f0;
  margin-left: 10px;
}

.maxilinks {
  background-color: #f8f8f8;
  padding: 2px 10px 2px 10px;
  font-size: 90%;
  clear: right;
  float: left;
  text-align: left;
  border: 1px solid #f0f0f0;
  margin-left: 10px;
  font-weight: bold;
  width: 50%;
}

#main .maxilinks ul {
  padding: 0; margin: 0;
}

#main .maxilinks li {
  line-height: 1;
  float: left;
  width: 50%;
  display: block;
  padding: 2px 0;
}

#main .maxilinks a {
  display: block;
  float: left;
  padding: 1px 4px;
  font-weight: normal;
  border: none !important;
}

.catalogue .attributes { color: #f25500; margin-bottom: 5px; }
.resources .attributes { font-weight: normal; margin-bottom: 1em;}

#main .attributes p { padding-bottom: 4px; }
#main .attributes { padding-top: 4px; font-size: 80%; }

#main .minilinks {
  font-weight: bold;
  padding-bottom: 0;
  margin: 5px 0 0 10px;
}

#main .minilinks a {
  padding: 0 8px;
  display: block;
  width: 104px;
  font-weight: normal;
  border: none !important;
}


#main .minilinks span a { background-color: transparent; margin-left: -10px;}


#main .minilinks img {
  margin: 3px 0 6px 0px;
  border: 2px solid #f8f8f8;
}

#main .minilinks a:hover img {
  border-color: #f25500;
}

#main .catpage p.blurb { padding: 0.4em 0 0.4em 0; }
#main .catpage p.blurblist { padding: 0; margin-left: 2em;}

#main .catpage .box { margin: 0 155px 0.4em 190px; }

#main table.components,
#main table.components-list { font-size: 80%; width: 100%; margin-bottom: 1em;}

#main table.components th {
  font-weight: bold;
  text-align: left;
  padding-bottom: 0.5em;
  padding: 0 !important;
  margin: 0;
  background: none; 
  font-family:  "Helvetica", "Arial", sans-serif;  
  color: #505050;
}

#main table.components td,
#main table.components-list td {
  padding-right: 5px;
  border: #e8e8e8 1px solid;
  border-width: 1px 0 0 0;
  vertical-align: top;
}

.language-variety { color: #fabe9f; font-size: 90%; padding: 0 2px;}

#main table.components-list tr.subhead td { border: none; padding-top: 8px; }
#main table.components-list tr.first-child td { border: none; }


/* IE doesn't support the following pseudo-class (see iewin-fixes.css) */
#main table.components tr:first-child td { border: none; }


#main ul.samplelist  {
  font-size: 80%;
  line-height: 2;
  margin: 0;
  padding: 0 0 1em 0;
  list-style: none;
}

#main ul.samplelist li {
  display: inline;
  border: #d0d0d0 solid 1px;
  background: #f0f0f0;
  padding: 1px 5px;
  margin: 1px;
}

#main ul.samplelist li a {
  border: none !important;
}


#main .projectbox { /* Used on uber-project page */
  padding: 6px 0 6px 0;
  border: #e0e0e0 solid;
  border-width: 0 0 1px 0;
  height: 10em;
  min-height: 110px;
  font-size: 100%;
}

.projectbox-content {
  height: 100%;
  margin-left: 0px;
  margin-right: 10px;
  overflow: auto;
}

#main .projectbox img { border: 2px solid #ffffff; width: 70px; 
                        float:left; font-size: 80%; color: #b0b0b0;
			background-color: #f7f7f7; min-height: 60px;}

#main .projectbox a:hover img { color: #b0b0b0; } 


#main .projectbox p { margin-left: 0.4em; }
#main .projectbox h3 {
  padding-top: 0;
  margin: 0 1em 0.3em 0.4em;
  font-size: 95%;
}

.projectbox .unavailable {
  font-size: 90%;
  color: #f25500;
}



.projectbox h3 a:link, .projectbox h3 a:visited { color: #000060; }


.projectbox p, .highlights p {  margin-right: 1em; }
 
.highlights div { height: 104px; overflow: hidden; }

.highlights h3 {
  margin-right: 1em !important;
  font-size: 110%;
  white-space: normal;
}


/* resourcebox is used on the resources home page and the catalogue home page. */
#main .resourcebox, .resourcebox-new {
  float: left;
  font-size: 100%;
  overflow: hidden;

}

#main .resourcebox-new {
border:0px solid blue;
width:33%;

}

#main .resourcebox, .resourcebox-new p {
  line-height: 1.1em;
  text-align: center;
}
.resources #main .resourcebox p { min-height: 145px; }
.catalogue #main .resourcebox p { min-height: 112px; }

#main .resourcebox p a { 
  display: block;
  border: 2px solid #ffffff !important; 
  color: #000066; 
  font-weight: bold;
  padding: 0; margin: 0 auto;
  text-align: left;
  overflow: visible;
}

#main .resourcebox-new p a { 
  border: 2px solid #ffffff !important; 
  color: #000066; 
  font-weight: bold;
  padding: 0; margin: 0 auto;
  text-align: center;
  overflow: visible;

} /*new style JC*/

.resources .resourcebox-new img {border:2px solid #000000;}
.resources .resourcebox-new a:hover img {border:2px solid #3e2dde;}

.catalogue .resourcebox p a:hover span { background-color: #f25500; padding-bottom: 1px; }
.resources .resourcebox p a:hover span { background-color: #c50b0c; padding-bottom: 1px; }
.resources .resourcebox-new p a:hover span { background-color: transparent; color:#3e2dde; padding-bottom: 1px; }

.resources #main .resourcebox p a { width: 113px; }
.catalogue #main .resourcebox p a { width: 80px; }

.resources #main .resourcebox p a:hover { cursor: hand; border-color: #c50b0c !important; }
.resources #main .resourcebox-new p a:hover {background-color:transparent; color:#c50b0c;}
.catalogue #main .resourcebox p a:hover { cursor: hand; border-color: #f25500 !important; }


.resources #main table.articles { width: 80%; }

#main .resourcehead img { height: 80px; width: 80px; float: left; margin: 0 1em 1em 1px;}

#main .highlights a:hover { background: none; } /* Gecko needs this; don't know where it's getting the padding from, though. */ 
#main .highlights a img { border: 2px solid #ffffff; } 

#main .resource h3 { padding-top: 0; padding-bottom: 1em; font-size: 95%;}
#main .resource a { cursor: hand; display: block; width: 168px; padding: 2px; color: #505050; margin: 0;}
#main .resource img      { display: block; width: 168px; height: 51px;}
#main .resource img.site { height: 88px; }

.resources .banner {margin-right:10px; height:107px; border:1px solid #000000; margin-bottom:10px; padding:0; background-color:#7c70ea;}

.resources .featurebox {width:100%; border:0px solid black; margin: 0px auto 10px auto;}

.resources .zonebox {width:48%;  float:left;  margin-bottom:15px;}
.resources .zonebox-full {width:100%; margin-bottom:15px; float:left; border:0px solid black;}
.resources .zonebox-right {width:48%;  float:right; margin-bottom:15px;  border:0px solid black;}

.resources .zonebox-title {width:100%; height:50px; background-color:#7c70ea; background-image:url(../images/resources/purple-corner2.jpg); background-repeat:no-repeat; background-position: top right; /*border-bottom:2px solid #ffffff;*/}
.resources .zonebox-title .dictionary {background-color:#010066; background-image:url(../images/resources/dict-colourjoin.jpg); background-position:top right; background-repeat:no-repeat; height:50px; margin:0 12px 0 0; overflow:hidden;}
.resources .zonebox-title a:hover {background-color:transparent; border:0;}
.resources .zonebox-title p a {color:#01e4ff; float:right; padding-right:15px; text-decoration:none;}
.resources .zonebox-title img.label {margin-right:10px;}
.resources .zonebox-title h2 {color:#cccccc; float:left; background-image:none; border:0px solid red;}


.resources .zonebox-body {background-color:#eceef0; padding:0; color:#000000; height:100%; width:100%; float:left; }
.resources .zonebox-body .wrapper{width:100%;}
.resources .zonebox-body .wrapper .column {width:30%; float:left; margin-left:0px; border:0px solid yellow; height:auto; padding:5px;}
.resources .zonebox-body ul {margin:0 0 0 5px; padding:0; list-style:none;}
.resources .zonebox-body li {margin-bottom:5px;}
.resources .zonebox-body p {margin:5px 0 0 5px; padding:0; font-weight:bold;}
.resources .zonebox-body p.desc{margin:0 10px 0 5px; padding:0; font-weight:normal;}
.resources .zonebox-body p.describe {margin:0 0 0 5px; padding:0; font-weight:bold; color:#666666}
.resources .zonebox-body p.more {text-align:right; padding-right:10px; font-weight:normal; padding-top:0; margin-top:0;}
.resources .back {font-weight:normal; padding:0; margin:0; background-color:#7c70ea; width:155px; float:right; height:30px;}
.resources .zonebox-body img {margin:0 0 0 10px;}
.resources .zonebox .rule {height:1px; border-bottom:1px solid #01e4ff; line-height:0;}
.resources .zonebox-body ul.phonetic {font-family:"lucida sans unicode";}


.resources .zonebox-foot {border:0px solid yellow; height:20px; background-color:#eceef0; background-image:url(../images/resources/greycorner2.jpg); background-position:right; background-repeat:no-repeat; clear:left;}
.resources .zonebox-foot img {float:left;}

.resources .title-list {width:120px; margin:auto;}
.resources .title-list a {background-color:transparent;}
.resources .title-list a img {border:1px solid #ffffff; margin:0 0 10px 0; padding:0; background:transparent;}
.resources .title-list a:hover img {border:1px solid #3e2dde; background:transparent;}

/* Resources - table format used for weblinks and articles */

.resources #main table {
  font-size: 90%;
  text-align: left;
  margin: 1em 1em;
}

.resources #main td {
  vertical-align: top;
  border-bottom: solid 1px #fdeed2;
  padding: 0.2em 0.6em 0.2em 2px;
}

.resources #main td:first-child { border-left: solid 1px #fdeed2; }
.resources #main td:last-child { border-right: solid 1px #fdeed2; }

.resources #main th {
  background: #fdf5e9;  
  border: solid #fdeed2;
  border-width: 1px 0;
  padding: 0.2em 0.6em 0.2em 2px;
}

.resources #main table .subhead {
  color: #ffffff;
  padding: 0 0.6em !important;
  font-weight: bold;
  background-color: #f7bf5d;
  border: #ffffff solid;
  border-width: 8px 0 0 0 !important; 
}

.resources #main table img {
  vertical-align: top;
  margin: 1px; 
}

.resources #main table p {
  font-size: 100%;
}

/* resources - floats used for downloadable activities */

.resources .activity {
  float: left;
  width: 40%;
  border: 2px solid #fdeed2;
  padding: 3px;  
  background: no-repeat top left url('../images/resources-download.gif') #fdf5e9;
  background-position: 4px 4px;
  margin: 0 10px 10px 0;
}

.resources .activity-content {
  float: left;
  padding-left: 48px;
  padding-bottom: 14px;
  background: no-repeat bottom right url('../images/resources-click-on-cover.gif');
}

.resources .activity-content img {
  float: right;
  margin-left: 1em;
}

.resources .activity img { border: 2px solid #fdf5e9; float: right;}
.resources .activity a:hover img { border-color: #f29a00;}


.resources .activity:after {
   content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}

.home .highlights a:hover img { border-color: #002783 !important; }

.catalogue .highlights a:hover img,
.catalogue .projectbox a:hover img { border-color: #f25500 !important; }
.search .projectbox a:hover img  { border-color: #f29a00 !important; }

.search .highlights a:hover img,
.resources .highlights a:hover img { border-color: #f29a00 !important; }
.news .highlights a:hover img { border-color: #18ab00 !important; }
.about .highlights a:hover img { border-color: #0088f2 !important; }
.order .highlights a:hover img { border-color: #9804c1 !important; }
.contact .highlights a:hover img { border-color: #e7007a !important; }




/* Forms */
#main form { 
  position: relative;
  width: 80%;
  margin: 1em auto 1em auto; 
  padding: 12px;
  border: solid 1px #efbdbd;
  background: #fae9e9;  
}

#main form table { font-size: 100%; }
#main form table p { font-size: 100%; }

#main form label { font-weight: bold; }

.search input[type=text] { border: 1px solid #c0c0c0; }

.search input[type=text]:focus {
  background-color: #f2ebbb;
  border-color: #f29b00;
}


.resources #main form,
.resources #main .box { background-color: #fcf3f3; border-color: #efbdbd; }
.catalogue #main form, .catalogue #main .box, 
.multimedia #main form, .multimedia #main .box { background-color: #fef6f2; border-color: #fbd1da; }
.news #main form,
.news #main .box { background-color: #f3fbf2; border-color: #c0e8ba; }
.about #main form,
.about #main .box { background-color: #f2fafe; border-color: #bae3f7; }
.order #main form,
.order #main .box { background-color: #faf2fc; border-color: #e3bbee; }
.contact #main form,
.contact #main .box { background-color: #fef2f8; border-color: #f9badb; }



/* Country site list formatting */
.countries a  { display: block; font-size: 80%; }
.countries td { vertical-align: top; }

/* For teacher login */
p.login { margin: 1em; border: 1px solid #dddddd; padding: 4px; width: 90%; background: #f8f8f8;}

.restricted { padding: 4px; border: 1px solid #efbdbd; background: #f8f8f8;}

/* For multimedia FAQs  */
#main .FAQ .question { margin-top: 1.5em; margin-bottom: 0.4em; padding: 0.4em; font-weight: bold; background: #fcf0de;}
#main .FAQ .answer { margin-left: 2em; margin-bottom:0.2em;}
#main .FAQ img {display: block; margin: 1em auto;}

/* Ask the author */
#main .asktheauthor { clear: left; padding-top: 1em; }
#main .asktheauthor .question { border: 1px solid;background-color: #fcf3f3; border-color: #efbdbd; padding: 1em; color: #000; margin: 0 1em 1em 1em;}
#main .asktheauthor .answer { border: 1px solid #cccccc; padding: 1.4em; margin: 0 1em 2em 1em; }
.asktheauthor .question strong { color: #666666; }

#main .asktheauthor td,
#main .asktheauthor tr, 
#main .asktheauthor table { border: 0 !important; }

/* Project page */
#main p.revquote { padding-left: 2em; padding-bottom: 0.8em; }
#main .revsrc { padding-right: 1em; text-align: right; font-style: italic; color: #f25500;}

/* Collapsible lists */
.collapsed { display: none; }
.expanded { display: block; background-color: #f8f8f8; padding-top: 0.5em;}


/* sidebar extensions */
#sidebar .panelbreak { margin-left: -11px; margin-right: -11px; width: 164px; }
#sidebar .panelbreak-rcap { background-position: 147px 4px; }


/* Opera hacks */
@media all and (min-width: 0px){
  #searchword { height: 14px !important;}
  #dict-button { border: none; }
  #countries { height: 17px !important; }
}