/*  
Theme Name: JADE
Theme URI: http://www.jadenet.org/
Description: A theme for the JADE Network
Version: 0.6 Public Site
Author: Jan Sroka
Author URI: http://jansroka.com/
*/
/* JADE CSS 2005 *************************************************************/
/* Jan Sroka (jan.sroka@jadenet.org)******************************************/

/* (brand new, extended color definitions; -js 20050810)

JADE Colors
	dark blue = #133984
	light blue = #72b3e7
	
If you need some dark colors, use
	light grey = #cccccc
	dark grey = #333333
	
If you need  highlight colors (for notices, special attention stuff, etc.)

	JADE beige = #F5F5E7
	JADE red = #660000

*/

/* footer **************************************/
#footer {
float: left;
clear: both;
height: 155px;
background-image: url(images/footer.jpg);
width: 765px;
}

#footer p{
color: #666666;
font-size: 8pt;
	font-family: Arial, Helvetica, sans-serif;
	padding: 25px 0px 0px 10px;
	margin: 0px;
	float: left;
}

#footer p a{
color: #666666;
}
/* supporters **************************************/
#supporters {
float: right;
padding: 0px 10px 0px 0px;
	margin: 0px;
	position: relative;
	top: 0px;
	width: 280px;
}

#supporters ul{
	list-style: none;
	margin: 25px 0px 0px 0px;
	padding: 0px;
}

#supporters li {
float: right;
padding: 0px 5px 0px 0px;
margin: 0px;
}

#supporters p {
text-align: right;
float: right;
margin: 3px 0px 0px 0px;
padding: 0px;
color: #fff;
font-size: 8pt;
	font-family: Arial, Helvetica, sans-serif;
}


/* FRONTPAGE */
#image-teaser{ /* this should be pretty much identical to the page teasers*/
	height: 200px;
	width: 765px;
	background-color:#133984;
	float: left;
	background-image: url(images/teaser/rotate.php);
	background-repeat: no-repeat;
	border-bottom: 5px solid  #72b3e7;
	clear: both;
	z-index: 10;
}

#collum1, #collum2, #collum3 {
margin: 0px 0px 10px 0px;
padding: 0px;
}

#collum1 h2, #collum2 h2, #collum3 h2 {
color : #133984;
font-family: Arial, Helvetica, sans-serif;
font-size : 16px;
margin: 10px 0px 1px 0px;
padding: 0px 0px 0px 0px;
clear: both;
}

#collum1 ul, #collum2 ul, #collum3 ul  {
margin: 0px;
padding: 0px;
list-style-type: none;
}

#collum1 {
width: 295px;
float: left;
overflow: hidden;
margin-left: 5px;
}

.col1 a{
width: 295px;
}

#collum2 {
float: left;
width: 220px;
margin-left: 5px;
}

.col2 a{
width: 215px;
}

#collum3 {
width: 220px;
float: right;
margin-right: 5px;
margin-left: 5px;
}

.col3 a{
width: 210px;
}

#collum3 p{
margin: 0px;
padding: 0px;
}

/* infomercial ************************************/

#infomercial {
	margin: 0px 0px 0px 0px;
	width: 100%;
	height: 130px;
	background-color: #333;
	float: left;
	background-repeat: no-repeat;
	background-image: url(images/infomercial.jpg);
}

#infomercial h2 {
padding: 10px 5px 5px 300px;
margin: 0px;
font-size: 20px;
color: #fff;
}

#infomercial a {
color: #fff;
}


#infomercial p {
	padding: 5px 10px 10px 300px;
	margin: 0px;
	font-size: 12px;
	color: #fff;
}


/*******************************************************/
#container {
	width: 765px;
	margin: 0px auto;
	text-align: left;
	padding: 0px;
	background-color: #fff;
	min-height: 100%;
    height: 100%;
    voice-family: "\"}\"";
    voice-family: inherit;
    height: auto;
	
}
/* http://www.alistapart.com/articles/footers/ for explanations*/
html>body #container {
    height: auto;
	min-height: 100%;
	}
html, body {
    height: 100%;
}

body {
	margin: 0px auto;
	text-align: center;
	height: 100%;
	padding: 0px;
	color: #000000;
	background-color:#fff;
	font-size: 10pt;
	font-family: Arial, Helvetica, sans-serif;
	background-image: url(images/container-bg.jpg);
	background-repeat: repeat-y;
	background-position: center top;
}

#homepage {
width: 100%;
height: 100%;
float: left;
text-align: left;
}

#sidebar {
width: 220px;
float: right;
text-align: left;
padding: 0px 0px 5px 0px;
margin: 10px 0px 0px 10px;
}
/* News ********************************************************************/

#news p{
padding: 0px 10px 5px 10px;
}

#news h4{
padding: 0px 0px 0px 10px;
}

/* Header ********************************************************************/
#header {
height: 134px;
width: 765px;
background-image: url(images/header.jpg);
margin: 0px;
padding: 0px;
}

#contact {
float: right;
}

#login{
float: right;
position: absolute;
top: 0px;
width: auto;
right: 0px;
}

#login li:hover  {

}

#login li a:hover { 
		color: #fff;
		background-color: transparent;
	}



/* cat submenues *************************************************************/

#menu {
padding: 5px 0px 0px 0px;
margin: 0px;
float: right; 
width: 190px;
text-align: left;
clear: both;
}

#menu p{
padding: 10px;
}

#menu ul {
padding: 0px;
margin: 0px;
}

/* search */
#search #searchsubmit {
margin: 0px 0px 0px 0px;
padding: 0px;
height: 20px;
border: 0px;
background-color: transparent;
color: #133984;
font-weight: bold;
}

#search #s {
margin: 0px;
padding: 0px;
height: 18px;
float: left;
width: 140px;
}

#search{
padding: 0px 0px 0px 10px;
margin: 0px;
width: 180px;
float: left;
height: 30px;
}

#menu #search {
padding: 0px;
}

#searchform {
margin: 0px;
padding: 0px;
width: 180px;
}

/* subs ******************************************************/

#submenuContainer {
margin: 0px 0px 30px 0px;
padding: 0px 0px 30px 0px;
}

.submenu, .level1, .level2{ 
float: left; 
width: 190px;
margin: 0px;
padding: 0px;
}

.fpmenu {
float: left;
margin: 0px 0px 10px 0px;
padding: 0px 0px 10px 0px;
list-style-type: none;
font-family: Arial, Helvetica, sans-serif;
}

.submenu ul, .level1 ul, .level2
{
margin: 0px 0px 0px 0px;
padding: 0px;
list-style-type: none;
float: left;
}

.submenu ul li ul, , .level1 ul li ul, .level2 ul li ul {
margin: 0px 0px 0px 10px;
padding: 0px;
}

.submenu .current a, .level1 .current a, .level2 .current a {
background-color: #72b3e7;
color: #fff;
display: block;
border-bottom: 1px solid #72b3e7;
border-top: 1px solid #72b3e7;
}
.submenu a, .level1 a, .level2 a
{
display: block;
padding: 5px 10px 5px 10px;
width: 160px;
background-color: #fff;
border-bottom: 1px solid #133984;
}
.fpmenu a
{
display: block;
padding: 2px 5px 2px 10px;
margin: 0px;
background-color: #fff;
border-bottom: 1px solid #E7EBF2;
}
.submenu li, .fpmenu li, .level1 li, .level2 li{
list-style: none;
}

.level2 a{
background-color: #ccc;
}

.submenu  a:link, .fpbmenu  a:link, .level1 a:link
{
color: #133984;
text-decoration: none;
}

.submenu  a:hover, .fpmenu a:hover, .level1 a:hover, .level2 a:hover
{
background-color: #133984;
color: #fff;
text-decoration: none;
}

#archiveform, #memberform, #exboform {
margin: 0px 0px 0px 0px;
padding: 0px;
float: left;
height: 30px;
}

#archiveform select, #memberform select, #exboform select{
width: 180px;
}
/***********************************************************************************/
#content {
float: left;
width: 765px;
}

/* teasers for sections of website */
#teaser-news{
width: 765px;
height: 200px;
background-color: #006633;
background-image:  url(images/teaser/teaser-news.jpg);
border-bottom: 5px solid  #72b3e7;
}

#teaser-network{
width: 765px;
height: 200px;
background-color: #133984;
background-image: url(images/teaser/teaser-network.jpg);
border-bottom: 5px solid  #72b3e7;
}

#teaser-life {
width: 765px;
height: 200px;
background-color: #133984;
background-image: url(images/teaser/teaser-life.jpg);
border-bottom: 5px solid  #72b3e7;
}

#teaser-programs {
width: 765px;
height: 200px;
background-color: #133984;
background-image: url(images/teaser/teaser-programs.jpg);
border-bottom: 5px solid  #72b3e7;
}

#teaser-careers {
width: 765px;
height: 200px;
background-color: #133984;
background-image: url(images/teaser/teaser-careers.jpg);
border-bottom: 5px solid  #72b3e7;
}

#teaser-gallery {
width: 765px;
height: 200px;
background-color: #133984;
background-image: url(images/teaser/teaser-gallery.jpg);
border-bottom: 5px solid  #72b3e7;
}

#teaser-knowledge {
width: 765px;
height: 200px;
background-color: #133984;
background-image: url(images/teaser/teaser-knowledge.jpg);
border-bottom: 5px solid  #72b3e7;
}

#teaser-contact {
width: 765px;
height: 200px;
background-color: #133984;
background-image: url(images/teaser/teaser-contact.jpg);
border-bottom: 5px solid  #72b3e7;
}

/* ********************/
#main {
margin: 0px;
width: 550px;
padding: 15px 10px 10px 10px;
float: left;
text-align: left;
}

#main hr {
color: #133984;
background-color: #133984;
height: 1px;
}


/******** topmenu  ****************************************************************/

#subfooter {
width: 765px;
height: 20px;
background-color: #f1f8fe;
}

#topmenu {
		margin: 0;
		padding: 0;
		height: 20px;
		width: 765px;
		border-bottom: 10px solid #72b3e7;
	}
/* topmenu navigation*/

	#navi {
		position: relative;
		top: 0px;
		margin: 0px;
		padding: 0px;
		height: 20px;
		width: 765px;
		float: left;
		list-style-type: none;
		
	}

	#navi li ul{
		margin: 0;
		padding: 0;
	}

	#navi a {
		text-decoration: none;
	}

	#navi li { /*float the main list items*/
		margin: 0;
		float: left;
		display: block;
	}

	#navi li ul {
		display: none;
				background: #72b3e7;
	}

	#navi li.off ul, #navi li.on ul  { /*put the subnav below*/
		position: absolute;
		left: 0;
		background: #72b3e7;
		height: 20px;
		width: 765px;
	}

	#navi li.on ul {
		background: #72b3e7;
		margin: 0px;
		padding: px;
	}

	#navi li.on:hover ul, #navi li.over ul { /*for ie*/
		background: #72b3e7;
	}

	#navi li a {
		color: #133984;
		font-weight: bold;
		display: block;
		width: auto;
		padding: 0px;
		margin: 0px;
		padding: 2px 10px 2px 10px;
	}

	#navi li.on a {
		color: #fff;
		padding: 2px 10px 2px 10px;
	}

	#navi li.on ul a, #navi li.off ul a {
		border: 0;
		float: left; /*ie doesn't inherit the float*/
		color: #fff;
		width: auto;
		background: #72b3e7;
		
	}

	#navi li.on:hover ul a, #navi li.over ul li a { /*for ie - the specificity is necessary*/
		background: #72b3e7;
	}

	#navi li.on ul {
		display: block;
	}

	#navi li.off:hover ul, #navi li.over ul {
		display: block;
		z-index: 6000;
	}

	#navi li.off a:hover, #nav li.on a:hover { 
		color: #fff;
		background-color:#133984;
	}
	
/* up to jade website link */
#up{
float: right;
position: absolute;
top: 0px;
width: auto;
right: 0px;
}
	
/*subnav formatting*/

#navi li.off ul a, #navi li.on ul a {
	display: block;
	background: #72b3e7;
	color: #fff;
	float: left;
}		

#navi li.on ul a {
	background: #72b3e7;
	color: #fff;
}
	#navi li.off ul a:hover, #navi li.on ul a:hover { 
		color: #fff;
		background-color: #133984;
	}
	
	/* subfooter */
#subfooter {
float: left;
border-bottom: 10px solid #133984;
}

ul#subnavi {
text-align: left;
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
background-color: #fff;
color: #fff;
width: 100%;
height: 20px;
line-height: 20px;
font-family: Arial,Helvetica,sans-serif;
border-bottom: 0px solid #133984;
list-style-type: none;
}


ul#subnavi li {
margin: 0;
padding: 0px 0 0px 0;
display: inline;
float: right;
}

#subfooter ul li a  {
margin: 0px;
padding: 2px 10px 2px 10px;
color: #133984;
height: 20px;
text-decoration: none;
font-weight: bold;
border: 0px solid;
}

#topmenu ul li a:hover, #subfooter ul li a:hover {
background-color: #133984;
color: #fff;
}

#topmenu .on, #subfooter ul li .on {
background-color: #72b3e7;
color: #fff;
}


/******** **************************************************************************/
p {
margin: 0px 0px 5px 0px;
padding: 0px 0px 3px 0px;
text-align: justify;
}

.notice {
background-color: #F5F5E7;
padding: 5px;
}

img a{
text-decoration: none;
}

img a :hover {
text-decoration: none;
border: 0px;
}

p img {
padding: 0px 5px 0px 5px;
margin: 0px;
border: 0px;
}

/*********************************************************************************************/
#jedb .countries {
vertical-align: top;
text-align: left;
float: left;
clear: both;
}

table#countries {
border-color: #133984;
width: 100%;
}

#sitemap {
list-style: none;
}

/** links *****************************************************************************/

a img, a img :hover {
text-decoration: none;
border-bottom: 0px;
border: 0px;
}

#gazette ul a{
border-bottom: 0px;
}

hr {
color : #133984;
height: 1px;
}

A:link  { color: #133984; font-family: Arial, Helvetica, sans-serif; text-decoration: none; }

A:visited  { color: #133984;; font-family: Arial, Helvetica, sans-serif; text-decoration: none; }

A:hover  { color: #133984; font-family: Arial, Helvetica, sans-serif; text-decoration: underline; }

A:active  { color: #133984; font-family: Arial, Helvetica, sans-serif; text-decoration: underline; }

b, strong {
background : #ffffff;
color : #133984;
font-family: Arial, Helvetica, sans-serif;
font-weight : bold;
}

/** headings */
h1 {
color : #133984;
font-family: Arial, Helvetica, sans-serif;
font-size : 14pt;
margin: 5px 0px 5px 0px;
padding: 0px;
}

h1 a :hover {
text-decoration: none;
}

h2 {
color : #133984;
font-family: Arial, Helvetica, sans-serif;
font-size : 13pt;
margin: 5px 0px 5px 0px;
padding: 5px 5px 0px 0px;
}

#menu h2 {
margin: 5px 0px 5px 0px;
padding: 5px 5px 0px 0px;
}

.submenu h2 {
margin-top: 40px;
}

#main h1 {
font-size: 20px;
color: #133984;
font: Arial, Helvetica, sans-serif;
margin: 0px;
padding: 0px;
}

h3 {
color : #133984;
font-family: Arial, Helvetica, sans-serif;
font-size : 16px;
margin: 10px 0px 1px 0px;
padding: 0px 0px 0px 0px;
clear: both;
}

h4 {
color : #133984;
font-family: Arial, Helvetica, sans-serif;
font-size : 14px;
margin: 5px 0px 0px 0px;
padding: 0px 5px 0px 0px;
clear: both;
}

/** Lists ***********************************************************************/


/** Tables *******************************************************************************/
table {
font-family: Arial, Helvetica, sans-serif;
font-size : 10pt;
text-align: left;
vertical-align: top;
}

/** history */
table #history {
width: 100%;
}

#history td{
padding: 5px;
margin: 0px;
}

#history .year {
	width: 100px;
}

#history .members {
width: 40%;
}

#history .exbo {
width: 40%;
}



/****/

table p {
vertical-align: top;
}

table caption {
text-align: left;
color : #133984;
font-weight: bold;
}

table .agenda {
width: 100%;
text-align: left;
vertical-align: top;
}
table .agenda td {
padding: 2px;
text-align: left;
vertical-align: top;
}

.agenda ul {
padding-bottom: 0px;
margin-bottom: 0px; 
padding-top: 0px;
margin-top: 0px; 
}

table .agenda th {
background-color: #133984;
color: #fff;
text-align: left;
}

.agenda h2{
font-size: 16px;
}

tr th a {
background-color: #133984;
color: #fff;
text-align: left;
}

/* comment form */
#commentform p {
	font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif;
	}
#commentform input {
	width: 170px;
	padding: 2px;
	margin: 5px 5px 1px 0;
	}

h2#respond{
border-top: 2px solid #133984;
padding-top: 10px;
margin-top: 10px;
}

h2#comments{
border-top: 2px solid #72b3e7;
padding-top: 10px;
margin-top: 10px;
}

#commentform {
width: 550px;
float: left;

}

#commentform textarea {
	width: 550px;
	padding: 0px;
	margin: 0px;
	height: 50px;
	}
#commentform #submit {
	margin: 0;
	float: right;
	}
	
	
	/*	Using 'class="alignright"' on an image will (who would've
	thought?!) align the image to the right. And using 'class="centered',
	will of course center the image. This is much better than using
	align="center", being much more futureproof (and valid) */
	
img.centered {
	display: block;
	margin-left: auto;
	margin-right: auto;
	}
	
img.alignright {
	padding: 4px 0px 4px 4px;
	margin: 0 0 2px 7px;
	display: inline;
	}

img.alignleft {
padding: 4px 4px 4px 0px;
	margin: 0 7px 2px 0px;
	display: inline;
	}

.alignright {
	float: right;
	}
	
.alignleft {
	float: left
	}
/* End Images */

.navigation {
height: 15px;
clear: both;
}

object , p object{
padding: 0px;
margin: 0px;
background-color: #FF0000;
}
/***/
.contactform { 
			position: relative;
			overflow: hidden;
			}
		
		.contactleft {
			width: 25%; 
			text-align: right;
			clear: both; 
			float: left; 
			display: inline; 
			padding: 4px; 
			margin: 5px 0; 
			}
		
		.contactright {
			width: 70%;  
			float: right; 
			display: inline; 
			padding: 4px; 
			margin: 5px 0; 
			}

    .contacterror {
      border: 1px solid #ff0000;
    	}