html{ padding:0; margin:0} /* background:transparent url('../images/leafs.gif') left 0 no-repeat; */
body{; margin:0; padding:1px; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:small; text-align:center; min-height:500px; height:auto !important; height:500px} /* background:transparent url('../images/leafs-right.gif') right 0 no-repeat*/
acronym, abbr{border-bottom:1px dashed; cursor:help}
address{font-style:normal; font-size:x-small; color:#999}
blockquote{background:transparent url('../images/quote-left.gif') left top no-repeat; margin:10px 0}
blockquote div{padding:0 44px; background:transparent url('../images/quote-right.gif') right bottom no-repeat}
form{display:inline; margin-bottom:0}
img{border:0; display:block}
form{display:inline}
ul#accessLinks{position:absolute; left:-2000px; margin:0; padding:0}
ul#accessLinks a:focus, ul#accessLinks a:active{position:absolute; left:2000px; width:200px; font-weight:bold; padding:10px; color:#fff; background:#6DADDE; top:0; text-decoration:none}
.article{border:1px solid #ccc; color:#999; width:550px; line-height:160%; margin:auto; padding:20px}
.button{margin-left:100px}
.picture{color:#999; float:left; font-size:x-small; margin:5px 10px 10px 0; width:340px}
.picture a{color:#8bb82c}
.picture a:hover{background-color:#99cc33; color:#fff; text-decoration:none}
.picture a:active{background-color:#99cc33; color:#fff; text-decoration:none}
.picture a:focus{background-color:#99cc33; color:#fff; text-decoration:none}
.description{color:#999; float:left; margin:5px 0 10px 0; width:350px; text-align:inherit}
.description a{color:#8bb82c}
.description a:hover{background-color:#99cc33; color:#fff; text-decoration:none}
.description a:active{background-color:#99cc33; color:#fff; text-decoration:none}
.description a:focus{background-color:#99cc33; color:#fff; text-decoration:none}
.thumb{float:left}
.title2{color:#acd52f; font-family:Arial, Helvetica, sans-serif; font-size:medium; font-weight:bold}
#logo{background:url('../images/2003_johandesilva.gif') no-repeat; display:block; float:left; height:25px; margin:0; text-indent:-700em; width:220px; text-decoration:none}
#title{margin:0; padding:0; float:right; font-size:medium; font-weight:bold; color:#acd52f; font-family:Arial, Helvetica, sans-serif}
/* layout ids */
#wrapper{width:700px; margin:40px auto; text-align:left; padding:0}
#content{clear:both}
#menu{clear:both; font-weight:bold; color:#acd52f; margin:10px 0} /* ; background:url('../images/2003_divider.gif') no-repeat */
#menu h3,h2{margin:0; padding:0; font-size:small}
#menu a{font-weight:normal; color:#999; text-decoration:none}
#menu a:hover{color:#fff; background-color:#99cc33}
#menu a:active{color:#fff; background-color:#99cc33}
#menu a:focus{color:#fff; background-color:#99cc33}
#menu ul{margin:0; padding:0; list-style-type:none}
#menu li{margin:0; padding:0}
#one{float:left}
#two{float:left; margin-left:30px}
#three{float:left; margin-left:30px}
#four{float:right}
#footer{clear:both; margin-top:20px;}
#footer ul{margin:15px 0; padding:0; list-style-type:none}
#footer li{display:inline; padding-right:3px}
/* forms */
.errorMessage{padding:10px; border:#FF0000 1px solid; color:#000; background-color:#FCD8DE}
.form-one select{border:1px solid #9cb5c8; background:#fff url('/images/form-textfield-bg.gif') no-repeat top left}
.form-one input{border:1px solid #9cb5c8; background:#fff url('/images/form-textfield-bg.gif') no-repeat top left}
.form-one textarea{border:1px solid #9cb5c8; background:#fff url('/images/form-textfield-bg.gif') no-repeat top left; width:350px}
.form-one label{color:#999; display:block; clear:both; width:215px; float:left; text-align:right; margin:0 5px 10px 0}
.form-one input:focus	{background:#d8eeff}
.form-one textarea:focus{background:#d8eeff}
.form-one select:focus	{background:#d8eeff}
.form-one .required{color:#990000}
.form-one p{clear:both}

/* CSS: min-height with !important works with IE6, Mozilla/Firefox/Gecko, Opera 7.x+, Safari1.2 */
selector {min-height:500px; height:auto !important; height:500px; }

/* perfect bullet point by johan */
selector ul{margin:0; padding:0}
selector li{list-style-type:none; background:#fff url('../images/bullet-dmg.gif') left 3px no-repeat; margin:0 0 10px 0; padding-left:10px}

/* data table */
.table-style1 table{border:solid #ccc; border-width:0 0 1px 1px; border-spacing:0; border-collapse:collapse}
.table-style1 td, .table-style1 th {padding:5px; border:solid #ccc; border-width: 1px 1px 0 0}
.table-style1 th {font-weight:bold; background:#e7eff7; text-align:left}
.table-style1 td {text-align:left; vertical-align:top; padding-top:5px}
.table-style1 tbody tr:hover {background:#f6f6f6}
.table-style1 tbody tr:hover th{background:#e7eff7}
.table-style1 input:focus{background:#f6f6f6}


/* content slider */
.contentslide{width:339px; height:340px}
.contentslide .opacitylayer{width:100%; height:100%; filter:progid:DXImageTransform.Microsoft.alpha(opacity=100); -moz-opacity:1; opacity:1}
.contentslide .contentdiv{display:none}
.pagination{clear:both; border:1px #ccc;  /*Width of pagination DIV. To equal that of Content Slider's width, take into account the later's left/right paddings!*/text-align:left;  /*Left/ right border width of pagination DIV.*/padding: 0 0 4px 0}
* html .pagination{ /*Simplified box model hack to get IE5 to display width equal to that of Content Slider's*/width:400px;  /*IE5 width*/w\idth:340px;  /*IE6 width*/}
.pagination a{padding: 0 5px; text-decoration:none; color:#999; background-color:white}
.pagination a:hover, .pagination a.selected{color:#fff; background-color:#99cc33}

.glidecontentwrapper{
position: relative;  /* Do not change this value */
width: 700px; 
height: 230px;  /* Set height to be able to contain height of largest content shown*/
overflow: hidden; 
}
.glidecontent{ /*style for each glide content DIV within wrapper.*/
position: absolute;  /* Do not change this value */
background: white; 
padding: 0px; 
visibility: hidden; 
width: 700px; 
}
/*
 Total glidecontent width: 330px+10px+10px=350px
	Or width of wrapper div itself (not counting wrapper border/padding)
*/

.glidecontenttoggler{ /*style for DIV used to contain toggler links. */
width: 700px; 
margin-top: 6px; 
text-align: center;  /*How to align pagination links: "left", "center", or "right"
background: white;  /*always declare an explicit background color for fade effect to properly render in IE*/
}


.glidecontenttoggler a{ /*style for every navigational link within toggler */
display: -moz-inline-box; 
display: inline-block; 
border: 1px solid black; 
color: #2e6ab1; 
padding: 1px 3px; 
margin-right: 3px; 
font-weight: bold; 
text-decoration: none; 
}

.glidecontenttoggler a.selected{ /*style for selected page's toggler link. ".selected" class auto generated! */
background: #E4EFFA; 
color: black; 
}

.glidecontenttoggler a:hover{
background: #E4EFFA; 
color: black; 
}

.glidecontenttoggler a.toc{ /*style for individual toggler links (page 1, page 2, etc). ".toc" class auto generated! */
}

.glidecontenttoggler a.prev, .glidecontenttoggler a.next{ /*style for "prev" and "next" toggler links. ".prev" and ".next" classes auto generated! */
}

.glidecontenttoggler a.prev:hover, .glidecontenttoggler a.next:hover{
background: #1A48A4; 
color: white; 
}


#screenshot{position:absolute;  border:0px solid #ccc;  background:#99cc33;  padding:5px;  display:none;  color:#fff; }

/* bug fixes */
.clear{clear:both; height:0}
.clearfix:after{content: "."; display:block; height:0; clear:both; visibility:hidden}
.clearfix{display:inline-block}
/* Hides from IE-mac \*/
* html .clearfix{height:1%}
.clearfix{display:block}
/* End hide from IE-mac */


