/* - - - - - - - - - - - - - - - - - - - - -
* Summary: 			CSS file for Plan International's IRR
* URL: 				www.planidproject.net
* Notes: 			Reworked YPCFA CSS
* Created: 			??/??/05
* Last Updated: 	24/08/05
- - - - - - - - - - - - - - - - - - - - - */
/*	I've combined 'bright.css' and 'position.css', BOTH POSITION AND STYLE DELCARED HERE.
	I've deleted the nifty corners script as it didn't seem to work at all (even in FF)
*/

/* ----- global ----- */

html {
	padding: 0;
	margin: 0; 
}

body {
	background: #F0F0F0;
	background: url("logoimages/bgmenu.jpg");
	font-family: Arial, Helvetica, sans-serif;
	font-size: 9pt;
	padding: 0;
	margin: 0;
	min-width: 774px;
}

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


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


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

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

.textcol{
	margin-left: 210px;
	padding-right: 10px;
	padding-bottom: 20px;
}

.textcolwide{
	margin-left: 150px;
	padding-right: 10px;
	padding-bottom: 20px;
}

#contents {
	background:#ffffff;
	border-left: 3px solid #fff;
	border-right: 5px dashed #B3CF9D;
	width: 780px;
}


#TextArea {
	margin-left:20%;
	z-index:5;
	border-left: 1px dashed #999999;
}

#TextArea p{
	padding:1em 2em;
	line-height:1.7em;
}
#poem{
float:right;
padding:0px;
font-size:-0.1em;
clear:none;
}

#poem p{
letter-spacing:0.1em;
line-height:1.3em;
font-size:12px;
font-family:Georgia, "Times New Roman", Times, serif;

}


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

h1 {	
	margin:0; 
	padding:0;
	font-weight:200;
	font-family:arial;
	letter-spacing:-2px;
	color:#333333;
	font-size:24px;
	/*font-size: 150%;*/
}

h2 {
	font-size:1.5em;
	padding-bottom:2em;
	padding-right:0.5em;
	font-weight:200;
	margin-top:2em;
	margin-left:1em;
}

h3 {
	font-size: 1.3em;
	color:#336600;
	padding:20px;
	background:url(IMAGES/himg.gif) no-repeat top left;
}

h4 {
	margin:2em;
	padding: 0;
	font-weight: bold;
	color: #0033CC;
/*	font-size: 120%;*/
}



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

a:link {
	color:#669900 ;
}
a:visited {
	color: #669900 ;
}
a:hover {
	color: #3333cc;
}
a:active {
	color: #3366cc;
}
a.orange {
	color: #003366 ;
}


a.upTotop {
	margin-top:20px;
	padding:10px;
	display: block;
	/*background: #eee;
	border: 1px solid #2a2a2a;*/
	text-align: left;
	font-size: 0.9em;
	border-top:dashed #666666 1px;
}
a:hover.upTotop {
	color:#fff;
	background: #7B6C6C;
	border-top:dashed #fff 1px;
}

/**************	header and footer  ***************/
.footer{
	margin-bottom: 0 ;
	/*color: #fff;
	background-color: #628F68;*/
	height: 5em;
	padding: 0.5em 0.5em 0 ;
	clear: both;
	font-size: 0.8em;
	color: #000;
	background: #fff url(IMAGES/footer.gif) no-repeat bottom right;
	border-top: dashed #000 2px;
}


#header {
	background:url("logoimages/bghead.jpg");
	border-bottom: 1px dashed #333333 ;
	text-align:right;
	height:70px;
	padding:0 5px 0 0;
	margin:0;
}
#header h1{
padding-top:30px;
padding-right:6px;
}
* 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" );
}

#topbanner {
	width:774px;
	height:150px;
	margin:0px;
	padding:0px;
}


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

#sideTop {
/*	color: #738F35;*/
	background:url("logoimages/bgside.jpg");
	height:70px;
	border-bottom: 1px dashed #333333 ;
}


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

/**************** 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%;
}*

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

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

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

ul.sideNav li a{
	color:#333333;
	font-size: 0.9em;
	text-decoration: none;
	display:block;	
	padding: 5px 5px 5px 0.5em;
}
ul.sideNav li a:hover{
	color:#fff;
	background-color:#DFF2C1;
	background-color:#666666;
}

#side h3 {
	background: #000000 ;
}

ul.sideNav li#launch a:link{
	color:#003300;}
	
ul.sideNav li#launch a:hover{
	background-color:#708047;
	color:#ffffff;
}

/*********** top navigation  *************/

div#navigation {
	position:absolute;
	left:305px;
	top:132px;
	border-top: 2px dashed #666666 ;
	margin:0px;
	padding-top:6px;
	padding-right:2px;
	height:30px;

}

div#navigation ul {
	color:#ff0000;
	font-weight:bold;
	text-align:right;
	margin:0px;
	padding:0px;
}

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

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

div#navigation ul li a:hover {
	color:#CC6600;
}
/*
div#navigation ul li a:hover {
	color: #7B6C6C;
	text-decoration:underline;
}
*/

li:hover ul{
	background-color:#00FF00;
}

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


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

table {
	border-collapse: collapse;
	border: 2px solid #fff;
	margin: 0.5em auto;
	text-align: center;
}

th{
	background-color:a5e1e3;
	font-size: 1.5em;
}

tr {
	border: 1px solid #fff;
	background-color: #FFF;
}

tr td:hover{
	background-color: #EFF5D2 ;
}

tr.odd{
	background-color: #76c7f1;
}

tr.odd td:hover{
	background-color: #9bcfea;
}

td {
	border: 1px solid #fff;
	padding: 0.5em;
}

.gallery div{
	border: 1px solid #9eb272;
	background: #ccdda5;
}
.gallery div:hover{
	border: 1px solid #ccdda5;
}

#hottable p{
	padding: 4px;
	text-align: left;
}


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

.centre {
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	width: 100%;
}

.width {
	width: 100%;
}

.grayBG {
	background-color: #ccc;
}

.imgover{
	MARGIN:4PX;
	border: 1px dashed #b3cf9d;
}

.mono{
	font-family:"Courier New", Courier, mono;
}

.green{
	color:#708047;
	font-weight:800;
}

.small{
font-size:x-small;
color:#666666;
}


/********* TEACHER RESOURCE **********/

#resourceLinks{
	margin:0;
	padding:0;
	width:80%;
}

#resourceLinks dl{
	margin:6px;
  	display: block;
	clear:both;
	float: left;
	margin:0;
	padding-bottom:4px;
	margin: 2em 1em 0em;
	font-weight:400;
	font-size:1.1em;
}

#resourceLinks dt{
	border-bottom:1px dashed #cccccc;
	width:500px;
	margin:6px;
  	display: block;
	padding-bottom:4px;
	font-weight:800;
	font-size:1.1em;
}

#resourceLinks dd{
	width:500px;
	height:48px;
}

#resourceLinks dd a{
}

#resourceLinks dl a{
	padding: 6px 6px 0 0;
	display:block;
	border:1px dashed #999999;
	width:120px;
	height:24px;
	margin:6px;
	font-size:x-small;
	text-decoration:none;
	color:#999999;
}
#resourceLinks dl dd a:hover {
  border-color:#000000;
  color:#000000;
}

#resourceLinks .box{
}

#resourceLinks dl dd a.word{
	background:url("images/wordbig.gif") top left no-repeat;
	text-align:right;

}

#resourceLinks dl dd a.pdf{
	background:url("images/pdfbig.gif") top left no-repeat;
	text-align:right;
}

#resourceLinks dl dd a.wordres{
	background:url("images/wordbig.gif") top left no-repeat;
	text-align:right;
	background-color:#FFCC33;
	color:#000;
}

#resourceLinks dl dd a.pdfres{
	background:url("images/pdfbig.gif") top left no-repeat;
	text-align:right;
	background-color:#FFCC33;
	color:#000;
}

.restitle{
font-size:13px;
padding-top:15px;
color:#0033CC;
}



/********** QUOTES *********/

.newquote{
	font-size:1.2em;
	font-weight:bold;
	letter-spacing:.em;
	color:#5D5252;
}

.altquote{
	font-size:1.2em;
	letter-spacing:.1em;
	color:#5D5252;
}

.byline{
	margin:1em;
	line-height:4em;
	letter-spacing:0.15em;
	color:#7B6C6C;
}

.squash{
	line-height:0.9em;
	letter-spacing:-0.5px;
}


/* ----- IMAGES ----- */
.javazoom{
	padding:0;
	float:right;
	display:inline;
	margin:2em 0;
	width:400px;
	height:260px;
	border: 1px dashed #999999;	
}

img {
	border: none;
}

.zoomable img {
	margin: 1em;
}

.zoomable{
	position: relative;		
	margin-left: 1em;		
}

.placeHolder {
	height: 400px;
}

.imageFloatPad {
	float:left;
	margin:0;
	padding:0 20px 20px 0px;
	display:inline;
}

.imageFloatL{
	padding:0;
	float:left;
	display:inline;
	margin:2em 0;
	border-top: 1px dashed #b3cf9d;
	border-right: 1px dashed #b3cf9d;
	border-bottom: 1px dashed #b3cf9d;	
}

.imageHotSeat{
	padding:0;
	float:center;
	display:block;
	margin:0;
	border: 2px dashed #b3cf9d;
}

.imageFloatLink{
	padding:0;
	float:left;
	display:inline;
	border-top: 1px dashed #b3cf9d;
	border-right: 1px dashed #b3cf9d;
	border-bottom: 1px dashed #b3cf9d;	
}

.imageFloatLinkr2{
	padding:0;
	float:left;
	display:inline;
	border-right: 1px dashed #b3cf9d;
	border-bottom: 1px dashed #b3cf9d;	
}

.imageFloatR{
	padding:0;
	float:right;
	display:inline;
	margin:2em 0;
	border-top: 1px dashed #b3cf9d;
	border-right: 1px dashed #b3cf9d;
	border-bottom: 1px dashed #b3cf9d;	
}

/*****************  CLEAR ELEMENTS  ******************/

.clear {
	clear:both;
}

* html .clear{
	height:1%;
}

br.clear{
	margin:0;
	padding: 0;
}

.breathe{
	clear:both;
	height:1px;
}

.hidden{
	display: none;
}

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

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

.subscribeForm input, .subscribeForm textarea{
	border: 2px solid #cccccc;
	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 dashed #669900;
  
}
.subscribeForm legend{ 
	color:#000;
	border: 0px solid #fff;
	padding: .5em;
	font-size:1.4em;

}
#submitButton {
	margin:10px;
	width: 10%;
	background: #fff;
	border: 2px solid #333333;
	color: #000	;
}


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

/********** SITE STYLES **********/

#cutHere{
position:absolute;
top:540px;
left:790px;
}

/********** EXTERNAL PAGES **********/

#disclaim{
	padding:0 15px;
	margin:auto;
	width:50%;
	border-left:2px dashed gray;
}

#popup {
	margin-left:3em;
	border-left: 1px dashed #999999;
	padding-left:1em;
	width:350px;
}

#hotlogo{
	position:absolute;
	left:300px;
	top:0px;
}


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

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