/* -------------------------------------------------------------- 
  
   Boilerplate Screen Styles
   * Version:   0.5 (2007-11-19)
   
-------------------------------------------------------------- */

@import "lib/reset.css";
@import "lib/typography.css";
@import "lib/forms.css";
@import "lib/plugins/tabs.css";


/* Site
-------------------------------------------------------------- */
  
/* Page
-------------------------------------------------------------- */

#page { margin: 0 auto; width: 950px;}


/* Header
-------------------------------------------------------------- */

#header { margin-top: 20px;}

#header p {margin-bottom: 0}

#header .tabs { clear: both; border-bottom: 1px solid #ddd; padding-top: 1em;}
#header .tabs li { margin-right: 1px; }
#header .tabs a { padding: 3px 3px; background: #ddd; color: #666; text-decoration: none; font-size: 0.91em}

#header .tabs li.current_page_item a { background: transparent; color: #000; font-weight: bold; }

#logo { width: 50%; float: left }
form#login { width: 50%; float: right; text-align: right}
#login label { text-align: right ; display: block; color: #666; font-size: 0.91em }
#login input { margin-left: 5px; width: 120px; }
#login input[type=submit] { float: right; width: 60px; }
#login a { float: right; font-size: 12px; text-decoration: underline; color: #666; }


/* Body
-------------------------------------------------------------- */

#body { 
  margin-top: 20px; height:758px; position: relative;   
}

#body.homepage {
 /* needs a little extra on the right to show the dropshadow */
 width: 956px;
 height: 765px;
 background: transparent url('../../../images/shadows.jpg') no-repeat -8px 0;
}

#body.homepage p a {
  color: #fff;
  text-decoration: underline;
}

#body p a, #body li a {
  text-decoration: underline;
}

#body ul { list-style-type: square }

#introduction { float: left; width: 480px; margin-right: 130px; }

#resources { float: left; width: 230px; }
#resources h3 { color: #888; }
#resources h4 { color: #000; }
#resources ul, #resources ol { color: #000; }
#resources li { list-style: square }
#resources ul a { color: #000; text-decoration: underline}


/* Footer
-------------------------------------------------------------- */
#footer {  margin-top: 20px; }

#footer .tabs { width: 405px; border-top: 3px solid #eee; }
#footer .tabs a { padding: 10px 30px 10px 0; color: #666; text-decoration: none; }

#footer .quiet { color: #666; font-size: 85%}

#footer a { color: #444; font-weight: bold; text-decoration: underline}

#footer #copyright {
 padding-right: 90px; 
 height: 29px;
 color: #444; 
}

#footer #copyright.logo {
 background: url('../../../images/charanga-logo-small.png') no-repeat right; 
}

#footer #copyright {
 float: left; 
}
#footer #fms-member {
 float: right;  
}

#footer #fms-member img {
 vertical-align: middle; 
 padding-left: 0.5em;
}
    
  
/* Colour (backgrounds and type)
------------------------------------------------------------- */
 
#homepage {
 color: #000;
 background: #fff;
 
}

.essex-torqouise {
 /* http://www.essexcc.gov.uk/vip8/ecc/ECCWebsite/dis/gui.jsp?channelOid=13835&guideOid=14897 */
 background-color: #1E9D8B; 
}

#header.homepage {
  height: 70px;
}

#header.homepage h1 {
 display: none; 
}

body {
  color: #000;
}

.overlay {
 text-align: center;
 background-color: #222;
 opacity: 0.9; 
}

h3.overlay a {
 color: #ddd; 
}

h3.overlay a:hover {
 color: #fff; 
}

.box h2 {
  color: #fff;
}

/* Type (sizes and faces)
-------------------------------------------------------------- */

.box p {
  font-size: 75%;
  font-weight: bold;
  padding: 4px;
}

.box h2 {
  font-size: 130%;
  text-align: center;
  padding: 0 4px;
  margin: 0;
}

.box h2 a {
  color: #fff;
}
 
/* Position
-------------------------------------------------------------- */
.box {
  position: absolute;
  overflow: hidden;
  height: 285px;
}

.box .backdrop {
  background-color: #1E9D8B;
}

.box h3.overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 4px;
  margin: 0;
}

.box img {
 display: block;
 margin-top: -17px;
}

.x4 {
  width: 220px;
}

.x4 img {
  width: 220px;
}

.x3 {
  width: 303px;
  height: 180px;
}

.x2 {
  width: 455px;
  height: 260px;
}

#box1 {
  left: 0px;
  top: 0px;
  background: #5068cf;
}

#box2 {
  left: 240px;
  top: 0px;  
  background: #8dd83d;
}

#box3 {
  left: 490px;
  top: 0px;  
  background: #f29f05;
}

#box4 {
  left: 730px;
  top: 0px;  
  background: #bf1304;
}

#box5 {
  left: 0px;
  top: 300px;  
  background: #26a3bf;
}

#box6 {
  left: 325px;
  top: 300px;  
  background: #91b163;
}

#box7 {
  left: 647px;
  top: 300px;  
  background: #d35656;
}

#box7 h3.overlay {
 background: #bb291d;
}

#box8 {
  left: 0;
  top: 495px;
  background: #5598c8;
}

#box9 {
  left: 495px;
  top: 495px;
  background: #8fc9ad;
}

#box8 img, #box9 img {
  display: block;
  margin-top: -14px;
  margin-left: auto;
  margin-right: auto;
}

#box9.box  {
 margin-left: auto;
 margin-right: auto;
}

#box8 p, #box9 p {
 margin: 0 0 0.3em;
}

p img {
 margin: 0;
 margin-left: -4px;
}

.date {
  float: right;
}

form#login {
	width: 260px;
	}
 
/* New Login
-------------------------------------------------------------- */	


#header {
	position: relative;
	}
	
#rss {
	width: 230px;
	height: 80px;
	color: #000;
	position:absolute;
	top:1px;
	right:0;
	}
#rss a#studentLogin, #rss a#teacherLogin {
	position: absolute;
	height: 30px;
	width: 230px;
	text-indent: -9999em;
	line-height: 0;
	font-size: 0.1px;
	color: #000;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;	
	-moz-box-shadow:1px 1px 2px rgba(0,0,0,0.4);
	-webkit-box-shadow:rgba(0,0,0,0.4) 1px 1px 2px;				
	}
#rss a#studentLogin {
	top:0;
	left:0;
	background: url('../../../images/newButton.png') -230px 0 no-repeat;
	}
#rss a#teacherLogin {
	top:35px;
	left:0;
	background: url('../../../images/newButton.png') 0 0 no-repeat;
	}
#rss a#studentLogin:hover {
	background: url('../../../images/newButton.png') -230px -30px no-repeat; 
	}
#rss a#teacherLogin:hover {
	background: url('../../../images/newButton.png') 0 -30px no-repeat; 
	}
#rss a#studentLogin:active {
	top:1px;
	}
#rss a#teacherLogin:active {
	top:36px;
	}