/* ----------------------------------------------------------------------------------------- 
Ollie Kavanagh
http://www.olliekav.com
21 Beechcroft Road
Tooting Bec
London
SW17 7BX

Visual design copyright 2008. All Rights Reserved. 
XHTML/CSS released under a Creative Commons Attribution 2.5 licence.
----------------------------------------------------------------------------------------- */

/* First of all lets setup all the other style sheets ---- */

@import url('reset.css');
@import url('typography.css');
@import url('layout.css');

/*= Header content styles
The content in here will positioned absolute to get perfect positioning
*/

/* The logo */
#header h1 a:link,
#header h1 a:visited {
	display:block;
	width:306px;
	height:114px;
	background:url(../images/main-logo.png) no-repeat;
	position:absolute;
	top:0;
	left:10px;
	text-indent:-9999px; /* Offset the text so it can still be read by screen readers */
}
#header h1 a:hover {
	border-width:0;
}
/* The speech bubble that overlays the green bar */
#header img.speech-bubble {
	position:absolute;
	top:99px;
	left:340px;
}
/* User links 
Set top right of the header
*/
#header ul.user-links {
	position:absolute;
	top:3px;
	right:10px;
	overflow:hidden;
}
#header ul.user-links li {
	float:left;
	display:inline;
	font-size:0.9em;
	margin-right:10px;
}
#header ul.user-links li a:link,
#header ul.user-links li a:visited {
	color:#81838a;
	padding:3px 0 0 20px;
}
#header ul.user-links li a:hover {
	border-width:0;
	color:#a9abb9;
}
/* Using CSS sprites for the hover images, one image rules them all! */
#header ul.user-links li a.sign-up {
	background:url(../images/icons/sign-up.gif) no-repeat 0 0;
}
#header ul.user-links li a.login {
	background:url(../images/icons/login.gif) no-repeat 0 0;
}
#header ul.user-links li a.about-us {
	background:url(../images/icons/about.gif) no-repeat 0 0;
}
#header ul.user-links li a.settings {
	background:url(../images/icons/settings.gif) no-repeat 0 0;
}
#header ul.user-links li a.logout {
	background:url(../images/icons/logout.gif) no-repeat 0 0;
}
#header ul.user-links li a.sign-up:hover,
#header ul.user-links li a.login:hover,
#header ul.user-links li a.about-us:hover,
#header ul.user-links li a.settings:hover,
#header ul.user-links li a.logout:hover {
	background-position:0 -20px; /* Offset to show a different colour on hover */
}
/* Now for the two forms in the header */
#header form,
#header ul.language-select {
	font-family: 'Clarendon Std', 'Century Old Style Std', 'Century Schoolbook', Georgia, serif
}
/* The word search form */
#header form.word-search {
	position:absolute;
	top:50px;
	left: 320px;
	width:600px;
	padding-left:20px;
}
#header form.word-search label {
	font-size:1.8em;
	font-weight:bold;
}
#header form.word-search em {
	font-size:1.6em;
	margin:0 5px 0 5px;
}
#header form.word-search input {
	vertical-align:middle;
}
#header form.word-search input[type="text"] {
	width:200px;
	font-size:1.2em;
	margin:-6px 5px 0 5px;
}
/* The jump to a language form */
#header p.laungauge-jump {
	position:absolute;
	top:102px;
	left: 380px;
	width:600px;
}
#header p.laungauge-jump em {
	color:#383946;
	font-size:1.2em;
}
#header p.laungauge-jump select {
	font-size:1.0em;
	width:140px;
}
/* To add a langauge or see the full list wei'll use and un-ordered list */
#header ul.language-select {
	position:absolute;
	top:104px;
	right:-30px;
	overflow:hidden;
	font-size:1.2em;
}
#header ul.language-select li {
	display:inline;
	margin-right:10px;
}
#header ul.language-select em {
	float: left;
	padding:4px 6px 4px 6px;
	color:#497072;
}
#header ul.language-select li a:link,
#header ul.language-select li a:visited {
	padding:4px 8px 4px 8px;
	float: left;
}
#header ul.language-select li a:hover {
	border-width:0;
}
#header ul.language-select li a.full-list {
	background:#41a0cf;
	color:#fff;
}
#header ul.language-select li a.full-list:hover {
	background:#2e7aa0;
	color:#fff;
}
#header ul.language-select li a.add-language {
	background:#a6d226;
	color:#235269;
}
#header ul.language-select li a.add-language:hover {
	background:#8eb41e;
	color:#fff;
}

/*= Homepages -------------------------------------------------------- */

img.intro-blurb {
	position:absolute;
	top:10px;
	right:10px;
}
/* Flash on the homepage */
#homepage-flash {
	margin-top:27px;
}
p.intro-text {
	margin-left:20px;
}

/*= Lanuage main pages ------------------------------------------------ */

/* List of languages and countries page */
ul.letters {
	margin-bottom:18px;
	overflow:hidden;
	text-align:center;
}
ul.letters li {
	display:inline;
}
ul.letters li a:link,
ul.letters li a:visited {
	padding:5px 0 0 0;
	height:25px;
	width:30px;
	float: left;
	margin-right:5px;
	background:url(/images/letters-background.gif) no-repeat top left;
	font-weight:bold;
}
ul.letters li a:hover {
	background-position: bottom left;
	border-width:0;
}
/* Language homepage */
#search-box {
	background:#497072;
	font-size:1.2em;
	font-weight:bold;
	border: 3px solid #3b595b;
	padding:10px 20px 10px 20px;
	position:relative;
}
#search-box input[type="text"] {
	width:300px;
	vertical-align:middle; /* Otherwise it won't sit sligned middle! */
}
#search-box input[type="image"] {
	position:relative;
	vertical-align:middle; /* Otherwise it won't sit sligned middle! */
}
#search-box img.corner {
	/* We need to pull this out over the border */
	position:absolute;
	top:-3px;
	right:-3px;
}

/*= Lanuage words pages ----------------------------------------------- */
p.phonetic-foreign-spelling {
	font-size:2.2em;
	font-weight:bold;
	margin-bottom:18px;
}
/* The MP3 box */
.classroom-box {
	border:8px solid #393B4C;
	color:#fff;
	background:url(/images/classroom-background.gif);
	height:220px;
	padding:40px 50px 40px 50px;
	position:relative; /* Used for positioning inside */
}
.classroom-box img {
	/* Use absolute positioning to get the teacher to sit above the content */
	position:absolute;
	top:40px;
	right:20px;
}
/* for the tags */
ul#tag-list {
	background:#393B4C;
	padding:10px;
	margin-top:2px;
	overflow:hidden;
}
ul#tag-list li {
	display:inline; /* Needed to display as a horizontal list */
}
/* For the language actions */
ul.language-actions {
	margin-bottom:18px;
}

/*= Countries --------------------------------------------------------- */
.multiple_select {
	margin-top:9px;
	overflow:hidden; /* no to use clear:float; this also clears floats */
}
.multiple_select li {
	float: left;
	margin-bottom:3px;
}
.multiple_select li label {
	/* we need to overwrite the form styles for these checkboxes */
	display:inline;
	float:none;
}
.multiple_select li input[type="checkbox"]{
	margin-right:5px;
}

/*= Search results ------------------------------------------------------ */
ul.search-results li {
	padding:10px 10px 10px 20px;
	border-top:1px dotted #47b1e6;
	border-left:2px solid #a6d226;
}
ul.search-results li.even {
	background:#1e1f28;
}
ul.search-results li:last-child {
	border-bottom:1px dotted #47b1e6;
}
ul.search-results li:hover {
	background:#333544;
	border-left:2px solid #ffffff;
}
/* Float the button across to the right */
a.search-again {
	position:absolute;
	top:15px;
	right:20px;
}
a.search-again:hover {
	border-width:0;
}

/*= Phrase pages -----------------------------------------------------------
These use nearly all the same classes as the word and language sections part from the ones below
---------------------------------------------------------------------------- */
body.phrases h4.phonetic {
	/* Needed as phrases are longer to stop them overlapping the box */
	font-size:1.8em;
}

/*= For the facebox -------------------------------------------------------- */
#facebox .b {
  background:url(/images/facebox/b.png);
}
#facebox .tl {
  background:url(/images/facebox/tl.png);
}
#facebox .tr {
  background:url(/images/facebox/tr.png);
}
#facebox .bl {
  background:url(/images/facebox/bl.png);
}
#facebox .br {
  background:url(/images/facebox/br.png);
}
#facebox {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 100;
  text-align: left;
}
#facebox .popup {
  position: relative;
}
#facebox .close_image {
	position:absolute;
	top:10px;
	right:10px;
	z-index:100;
}
#facebox table {
  border-collapse: collapse;
	font-size:1.6em;
}
#facebox td {
  border-bottom: 0;
  padding: 0;
}
#facebox .body {
  background: #fff;
  width: 370px;
}
#facebox .loading {
  text-align: center;
}
#facebox .image {
  text-align: center;
}
#facebox img {
  border: 0;
  margin: 0;
}
#facebox .tl, #facebox .tr, #facebox .bl, #facebox .br {
  height: 10px;
  width: 10px;
  overflow: hidden;
  padding: 0;
}
#facebox_overlay {
  position: fixed;
  top: 0px;
  left: 0px;
  height:100%;
  width:100%;
}
.facebox_hide {
  z-index:-100;
}
.facebox_overlayBG {
  background-color: #000;
  z-index: 99;
}
/* For the overwrites in the face box of our other styles */
#facebox input[type="image"] {
	margin:0;
}
#facebox em.hint {
	margin-left:0;
}