/* - - - - - - - - - - - - - - - - - - - - -
* Summary: 			CSS file for YPCFA
* URL: 				www.ypcfa.net
* Notes: 			---- 
* Created: 			??/??/05
* Last Updated: 	24/08/05
* Site redesign completed: Fri 7th Oct 2005
- - - - - - - - - - - - - - - - - - - - - */ 

/***************  This is the positioning stylesheet and contains positioning info only  *************/
/***************  This sheet MUST be linked to as the peristent stylesheet. All colours are set in bright.css & pale.css ***/


/* ----- CSS ----- */

html{
	padding: 0;
	margin: 0; 
}
body {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 100%;
	padding: 0;
	margin: 0;
	text-align: center;
	min-width: 774px;
}


/* ----- LISTS ----- */

ul {
	list-style: none;
	margin-left: 0;
	padding-left: 0;
}


/* ----- IDS ----- */

#contents{
	border-left: 3px solid #fff;
	font-size: 0.8em;
	width: 774px ;
	margin: 0 auto;
	text-align: left;
}

#topbanner {
	width:774px;
	height:109px;
	z-index:10;
}
#topbanner a{
	display: block;
	width:774px;
	height:109px;
}

#TextArea {
	margin-left: 20%;
	z-index:5;
        border: 0px solid ;
	border-left: 2px solid ;
	border-right: 2px solid ; 
	/*width: 80%;*/
}


#TextArea h3{
	/*clear: both;*/
	margin: .5em;
	font-size: 1.75em;
	padding-left: 1em;
	padding-bottom: 0.01em;
	width: 75%;
	border-bottom: 1px solid;
}
#TextArea h2 {
	margin: 1em;
	font-size: 2em;
}
#TextArea p{
	padding: 0.5em;
}
/*#TextArea ul {
	border: 0px solid;
}
#TextArea ul li{
	padding: 0.5em;
	/*display: inline; 
	color: #333333;
}*/

#TextArea ul.vertList{
	list-style: square;
	padding: 0.5em;
	margin-left: 2em;
}

#TextArea ul.vertList li{
	padding: 0.2em;
	border: 0px solid;
	margin:  0;
}

#logos {
	clear:both;
	/*margin-left: 2em;*/
	border:0px solid ;
	text-align: center;
	margin-top: 2em;
}

#disclaimer {
	margin: 10%;
	background: White;
}

/* ----- CLASSES ----- */

.centre {
	margin-left: auto;
	margin-right: auto;
	text-align:center;
	width: 100%;
}
.width {
	width: 100%;
}
.grayBG {
	background-color: #CCC;
}
.imageFloatL {
	float: left;
	padding: 8px;
}
.imageFloatR {
	float: right;
	padding: 8px;
}

/* ----- HEADINGS ----- */

h1 {	
	margin: 0; 
	padding: 0;
	font-weight: bold; 
	/*font-size: 150%;*/

}
h2 {
	margin:0;
/*	font-size: 140%;*/
	font-weight: bold;
	margin-bottom: 6px;
}
h3 {
/*	font-size: 130%;
	font-weight: bold;
	color: #006600;*/
}
h4 {
	margin: 0;
	padding: 0;
	font-weight: bold;
	color: #006600;
/*	font-size: 120%;*/
}


/* ----- IMAGES ----- */

img {
	border: none;
}

.zoomable img {
	margin: 1em;
}
.zoomable{
	position: relative;		
	margin-left: 1em;		
}
.placeHolder {
	height: 400px;
}


/* ----- LINKS ----- */

a:link {
	color: #009933;
}
a:visited {
	color: #009933;
}
a:hover {
	color: #006600;
}
a:active {
	color: #006600;
}
a.orange {
	color: #FF9933;
}
a.upTotop {
	display: block;
	/*background: #eee;
	border: 1px solid #2a2a2a;*/
	text-align: center;
	font-size: 0.75em;
	margin-bottom: 0.5em;
}
a:hover.upTotop {
	background: #ccdda5;
}


/**************** side panel *************************/

#side { 
	/*position:absolute;*/
	/*left: 0 ;*/
	float: left;
	width:20%;
	z-index:9; 
	border: 0px solid violet;
	margin-top: auto;
	clear:  both;
}

* html #side {
	height: 1%;
}*
#sideTop {
	font-size: 2.5em;	
	height: 2em ;
}


/*************  side navigation  ********************/

ul.sideNav {
	border: 0px solid red;
	border-bottom: 0px solid #fff;
	border-top: 2px solid #fff;
/*	margin-top:0em;*/
		margin: 0;
		padding: 0;
	
}

ul.sideNav li {
	/*text-align: left; 
	position: relative;
	/*padding: 0.25em 0;*/
	/*height: 2em;*/
	border-bottom: 1px solid #fff;
	margin:  0;


}
ul.sideNav li a{
	font-size: 0.9em;
	text-decoration: none;
	display:block;	
	padding: 5px 5px 5px 0.5em;
	
	/*height:27px;*/
}
ul.sideNav li a:hover{
	/*color:#cc0033;*/
}

#side h3 {
	/*background: #97BA48 ;*/
}

ul.sideNav li#launch{
	background: #ffa500;
}
/*********** top navigation  *************/

div#navigation {
	/*background: #eee;*/
	border-top: 3px solid #fff ;
	border-bottom: 3px solid #fff ;
	border-right: 3px solid #fff ;
}

div#navigation ul {
	font-weight: bold;
	/*color: #2a2a2a;*/
	text-align: center;
	margin: 0;
	padding-bottom: 5px;
	padding-top: 5px;
}

div#navigation ul li {
	display: inline;
	margin-left: -4px;
}

div#navigation ul li a {
	padding: 5px 10px 5px 10px;
	/*color: #666;*/
	text-decoration: none;
	border-right: 1px solid #fff;
}

div#navigation ul li a:hover {
	/*background-color: #ccc;
	color: #222;*/
}

#active a { border-left: 1px solid #fff; }


/********** 	quotes 	*********/
.quoteBox{
		/*background:  url("images/quote_tl.gif") no-repeat top left;
		background-color: #9eb767;
		color: #006600;*/
		width: auto;
		min-height: 1em;
		padding: 0;
		margin: 0 2em 2em ;
		float: left;
}
/**             internet explorer hack #1 ************/

html * .quoteBox {
	width: 35em;
}
.quoteBox p{
	text-align: center;
	border: 0px solid;
	/*background:  url("images/quote_br.gif") no-repeat bottom right;
	color: #687F67;*/
	margin: 0;
}
div.quote {
	/*background:  url("images/quote_tr.gif") no-repeat top right;*/
	padding: 1.5em;
	font: italic 1.75em serif;
	text-align: left;
	border: 0px solid #2a2a2a;
	/*width: auto;*/
}
.quotewrapper{
	/*background:  url("images/quote_bl.gif") no-repeat bottom left;*/
	border: 0px solid red;
	height: auto;
	padding: 0;
	margin: 0;
}


/**************	header and footer  ***************/
.footer{
	margin-bottom: 0 ;
	/*color: #fff;
	background-color: #628F68;*/
	height: 3em;
	padding: 0.5em 0.5em 0 ;
	clear: both;
	font-size: 0.8em;
}
h1{
	display: inline;
}

#header {	
	border-bottom: 2px solid white ;
	text-align: right;
	height: 5em ;
	padding:0;
	margin:0;
	/*width:99.55%;*/
}
* html #TextArea {
		 /*height: 0px;*/
		 margin-left:0;
		 float: right;
		 width: 79.5%;
		 width:expression( 
    document.body.clientWidth > (500/12) * 
    parseInt(document.body.currentStyle.fontSize)?
        "79.5%":
        "auto" );
}

#header h1 {
	/*display:inline ;
	/*color: #fff;*/
	padding-right: 0.25em;
	/*vertical-align:bottom;
	font-size: 2.5em;	
	margin-bottom:0;*/
}


/***********  tables ************/

table {
	border-collapse: collapse;
	border: 2px solid #fff;
	margin: 0.5em auto;
	text-align: center;
}
th{
	/*background: #ddd;*/
	font-size: 1.5em;
}
tr {
	border: 1px solid #fff;
/*	background:#dce8c2;*/
}
tr:hover{
/*	background:#CECFA9;*/
}
tr.odd{
/*	background: #B4B67D;*/
}
tr.odd:hover{
/*	background:#E6E6D3;*/
}
td {
	border: 1px solid #fff;
	padding: 0.5em;
}


/*****   non appearing table for layout (tsk tsk)*/
table.transTable, table.transTable tr, table.transTable tr td {
	border: none;
	background: transparent;
}

/********* divs used on links page to replace tables ********/

.links div a img{
	float:right;
}
.links div {
	clear: right;
	border: 2px solid white;
	margin: 1em 1em 2em;
	width: 75%;
	padding: 0.75em;
	min-height: 8em;
/*  ie hack #2 IE can't understand min-height and treats height as min-height. 
only IE reads indentifiers with underscores so in effect IE recieves a min-height value  
and no specific height is set for browsers that can understand the standards */	
	_height: 8em;  
}


/*********  gallery for the hotseats page ********/
/*********  gallery for the hotseats page ********/
.gallery{
	border: 0px solid;
}
.gallery div{
	border: 1px solid #9eb272;
	float: left;
	padding: 0.3em;
	text-align:center;
	margin: 0.5em ;
	width: 120px;
}
.gallery div:hover{
/*	border: 1px solid #ccdda5;*/
}
.gallery div.longer { /*  for the longer banners on the hotseats page  */
	width: 300px;
}
.gallery div.mid {
	width: 150px;
}


/*****************  non specific rule just to clear elements when needed  ******************/
.clear {
	clear:both;
}
* html .clear{
		 height:1%;
}
br.clear{
	margin:0;
	padding: 0;
}


/********* link + info styling *********/

.scroller{
	overflow:auto;
	height: 150px;
	position: relative;
	width: 500px;
}
.scroller p, .scroller img{
	float: left;
	border: 1px solid red;
	/*display: inline;*/
	max-width: 50%;
}

ul.teamimages {
	border: 11px solid red;
	background: yellow;
}

ul.teamimages li img{
	display: block;
	border: 5px solid blue;
}



/********** image boundary:- must place somehwere more apt at some point ********/

div.imageBoundary{
	border: 0px solid;	
	padding: 0.5em 0;
	margin: 1em auto;
	width: 50%;
}
div.widerimageBoundary{
  margin: 1em auto;
	width: 75%;
}

div.imageBoundary p{
	padding: 0;
	margin:auto 0;
}



/*         css for the popup window     */

#psuedo{
	
	background-color: #97ba48;
	border: 0px solid darkgreen;
	float: right;
	width: 400px;
	overflow:auto;
	font-size: 0.85em;
}

#psuedo h2{
	
	/*background:  url("images/quote_tl.gif") no-repeat top left;*/
	background-color: #7a9340;
	padding-top: 1.5em;
	color: #fff;
	
}

#psuedo p{
	padding: .75em;
}

.hidden{
	display: none;
}


/*************  position of hotseat videos and their titles *********************/
.swfHolder{
	position: relative;
	float: left;
	/*display: inline;*/
	border: 0px solid pink;
	/*margin-bottom: 2em;*/
}

/*  internet explorer bug 5 */

* html .swfHolder {
		 height: 1%;
}

.swfHolder div{
	color: #006633;
	position: static;
	top: 0;
	left: 0;
	z-index: 10;
	font: 1.5em Georgia, "Times New Roman", Times, serif;
	margin: 0;
	/*background: url("images/transBack.png");*/
	/*width: 100%;*/
	display:block;
	
}


/********* teacher resource lists **********/

.resourceLinks{
	width: 85%;
	margin: 1em auto 3em;
	border: 0px solid #ccdda5;
	padding-bottom: 3em;
}


.resourceLinks dl{
	
	font-size: 1.0em;
	width: 75%;
	float: left;
	margin: 1em 0;
}

.resourceLinks dl dt{
	border-bottom: 1px solid ;
	padding-bottom: 0;
	margin: 2em 1em 0em;
	font-size: 1.25em;
	white-space:nowrap;
}
.resourceLinks dl dd {
	border-left: 0px solid ;
	height: 48px;
	margin-top: 0em ;	
	padding-top: 1em;
	float:left;
  width: auto;
}
* html .resourceLinks dl dd {
   display:inline;
}
.resourceLinks dl dd a {
  display: block;
	height: 100%;
	padding-left: 55px;  
	border:2px solid #ccdda5;
	font:1.75em serif;
	overflow: hidden;
	width: 80px;
}
.resourceLinks dl dd a:hover {
  border-color: #9eb272;
}
.resourceLinks dl dd a.word{
	background:url("images/wordBig.png") center left no-repeat;
}

.resourceLinks dl dd a{
	background:url("images/pdfBig.png") center left no-repeat;
}

.resourceLinks dl dd a:hover{
	/*background:url("images/wordBig.png") no-repeat #eee;*/
}
.resourceLinks span{
	display: block;color:yellow;
}




/********************  collapsable quotes ***********************/

											 /* states for the quotes */
.hideList {
			background: #eee;
			display:none;		
			margin-top: 2em;
}
.showList {
			display: block;
			margin-top: 2em;
}
.toggle {
				border: 1px solid red;
				background: pink;
}


  											/*the contolling menu*/
												
.toggleList{
    margin: 0;
    padding: 0 ;
    border: 1px solid #000;
}

.toggleList li {
	border: 1px solid darkgreen;
	/*margin: 2px 1px 2px;*/margin: 0;
	width: 7em;
	height: 7em;
	padding: 0;
}
a.toggleList {
	display: block;
	float: left;
	width: 7em;
	height: 7em;
	border: 1px solid #9eb272;	
	margin: 0 2px 3em;
	line-height: 7em;
	text-align: center;
  text-decoration: none;	
	color: #fff;
}


/*  each link is given an image as background*/

a.toggleList#project {
	background: url("images/quotes%20photos/project.jpg") 0 180px ;					 
}

a.toggleList#collab {
	background: url("images/quotes%20photos/collab.jpg") 0px 180px;					 
}
a.toggleList#exchange {
	background: url("images/quotes%20photos/exchange.jpg")-1px 176px ;					 
}
a.toggleList#look {
	background: url("images/quotes%20photos/look.jpg") 1px 180px;					 
}
a.toggleList#identify {
	background: url("images/quotes%20photos/identify.jpg") 0px 179px ;					 
}


/* the hover states are set here*/
a:hover.toggleList#project {
	background: url("images/quotes%20photos/project.jpg") -1px 0;					 
}
a:hover.toggleList#collab {
	background: url("images/quotes%20photos/collab.jpg") ;					 
}
a:hover.toggleList#exchange {
	background: url("images/quotes%20photos/exchange.jpg") 0px -4px ;					 
}
a:hover.toggleList#look {
	background: url("images/quotes%20photos/look.jpg")  ;					 
}
a:hover.toggleList#identify {
	background: url("images/quotes%20photos/identify.jpg") -1px 0px;					 
}



a.toggleList b{
		display: block;
		color: #fff;
		position: relative;
		top: 5em;
		font-weight: normal;
		text-decoration: none;
}
a:hover.toggleList b {
		text-decoration: underline;		
}


/************* hack to fix the peekaboo menu in IE */

* html .floatBox{
 height: 1%;
}



/****************  form to subscribe to mailing list **********/

.subscribeForm{
	border: 0px solid;
	margin: 2em 0.5em;
	width: 95%;
	color: #5D6943;
}

.subscribeForm input, .subscribeForm textarea{
	border: 2px solid #8c9d65;
	background: transparent;
	margin: 2px 0;
	color: inherit;
	width: 33%;
	padding: 0.15em;
}
.subscribeForm span{
 	color: #dd0000;
	display: none;
}

.subscribeForm b{
	font-weight: normal;
}
.error{
	color: #cc0000;
	display: inline;
	font-weight: bold ;
}

.subscribeForm fieldset{
	border: 1px solid #5D6943;
  
}
.subscribeForm legend{ 
	border: 0px solid #fff;
	padding: .5em;

}
#submitButton {
	width: 10%;
	background: #ffa500;
	border: 2px solid #ff8c00;
	color: #ff4500;
}


.subscribeForm label {
	width: 50%;
	border: 0px solid;
	/*float: left;*/
	clear: left;
	vertical-align: middle;
}


/*************** nifty corners  ****************/
/* internet explorer is a right pain and even nifty corners don't seem 
to work right. no time to fix so they just get ugly square boxes */


.curveQuote{
	margin:  2em;
	width: 75%;
	background: transparent;
}
head+body .curveQuote .b1 {
	height: 1px;
	background: #9eb767;
	display: block;
	font-size: 1px;
	margin: 0 5px
}
 
head+body .curveQuote .b2 {
	height: 1px;
	background: #9eb767;
	display: block;
	font-size: 1px;
	margin: 0 3px
}

head+body .curveQuote .b3 {
   height: 1px;
	background: #9eb767;
	display: block;
	font-size: 1px;
	margin: 0 2px
}
head+body .curveQuote .b4 {
   height: 2px;
	background: #9eb767;
	display: block;
	font-size: 1px;
	margin: 0 1px
}

.curveQuote p {
   background: #9eb767;
	 text-align: center;
	 margin: 0 0;DDE9C3
	 font-size: 0.9em;
}

.curveQuote div.wrapper {
   background: #9eb767;
	 margin: 0;
	 padding: 0;
	 text-align: center;
	 margin: 0 0;
	 /*font-size:0.8em;*/
}
.curveQuote div {
	margin: 0 0.75em;
	padding: 0 0.5em; 
	font: italic 1.3em serif;
	text-align: left;
	border: 0px solid #9a9a9a;
}
.curveQuote div span{
  font-size: 2em;
}
in

/****************  third attempt at resource list layout ***************/

.resourceGrid {
  display:table;
  padding:0;
  margin:0;
  font-family: arial, helvetica, sans-serif;
  white-space:nowrap;
  list-style-type:none;
}

* html ul.resourceGrid  {
  display:inline-block;    /* for IE only */
  width:1px;               /* IE will expand 1px width to fit menu width */
  padding:0 2px;           /* fix bug in IE to get border spacing correct */
}  

.resourceGrid li {
  display:table-cell;      /* ignored by IE */
	padding: 0.25em 1px;
	width: 75%;
	border: 0px solid #00f;
	/*margin: 0.5em;*/
}
* html .resourceGrid li {
  display:inline;          /* for IE only */
}

.resourceGrid a {
  display:block;
  padding:0.2em 0; 
  background:transparent; 
  color:#000; 
  text-decoration:none;
  border: 1px solid #000;
	width: 100px;
}
.resourceGrid a.word {
  background: url("images/wordBig.png")center 1px no-repeat ;
	
}
.resourceGrid a.pdf {
  background: url("images/pdfBig.png")center 1px no-repeat ;
}
* html .resourceGrid a {
  display:inline-block;    /* for IE only */ 
  margin:0 -2px;           /* to correct an IE bug that doubles the border width */  
}

.resourceGrid a span{
  position: relative;
	left: -5000px;
}



.resourceGrid {
	padding:0;
	margin:0;
	color:#fff;
	font-family: arial, helvetica, sans-serif;
	white-space:nowrap;
	list-style-type:none;
}
.resourceGrid li {display:inline;}
.resourceGrid li a {
	padding:0.2em 1em;
	background:#fc6;
	color:#000;
	text-decoration:none;
	float:left;
	border:1px solid #000;
}
.resourceGrid li a:hover {
	background:#08c;
	color:#fff;
}


/**********************   styling for the disclaimer ****************/

.disclaimer{
	text-align: center;
}
.disclaimer h1 {
	color: #cc0000;
	margin: .5em;
	display: block;
}